/* ============================================================
   BYGPAS · EDITORIAL DESIGN SYSTEM
   ------------------------------------------------------------
   Editorial weekend-magazine aesthetic. Paper cream stock,
   deep ink, forest accent. Instrument Serif for display,
   Inter for body UI, JetBrains Mono for metadata & eyebrows,
   Source Serif 4 for body prose.

   This is the NEW brand foundation (2026-04-24 rebrand).
   Replaces the Fraunces + DM Sans + #0F6E56 system for
   landing-surface pages. The 5-band score token palette
   stays intact — editorial tones layered on top.

   Load-order contract:
     <link rel="stylesheet" href="/css/bygpas-editorial.css">
     <link rel="stylesheet" href="/css/style.css">              (legacy — result/modal/admin)
     <link rel="stylesheet" href="/css/bygpas-design-system.css">

   Editorial tokens take precedence because this file loads
   first; legacy sheets still style the result-container
   subtree (score-card, flags, dimension cards) until those
   components are ported.
   ============================================================ */

:root {
  /* Surfaces — warm paper palette */
  --bg:          #f6f2e7;  /* Paper cream, whole-page */
  --paper:       #fbfaf6;  /* Cards, inputs, elevated panels */
  --paper-2:     #efe9d8;  /* Sunken sections (stats, sources, guides) */
  --paper-3:     #ebe4d0;  /* Deeper — progress-bar tracks */

  /* Ink — text hierarchy
     WCAG 2.1 AA audit (2026-04-24): --ink-3 darkened from #78736a (3.5–4.0:1)
     to #5f5b53 (~5.5:1 on bg/paper/paper-2/paper-3) for body-meta compliance.
     --ink-4 darkened from #a8a294 (2.2:1) to #8b8578 (~3.1:1) — placeholder
     only, treated as non-essential text per WCAG 1.4.3 exception.            */
  --ink-1:       #1b1917;  /* Primary text, dark buttons */
  --ink-2:       #3d3a34;  /* Secondary text */
  --ink-3:       #5f5b53;  /* Tertiary / meta — AA on all surfaces */
  --ink-4:       #8b8578;  /* Placeholder only — non-essential text */

  /* Rules — border scale */
  --line:        #ddd5c3;
  --line-soft:   #e8e1ce;
  --line-hard:   #c9c0aa;

  /* Accents — forest olive
     WCAG audit (2026-04-24): --accent darkened from #5f7a45 (4.2:1) to #4f6839
     (~5.1:1 on bg) so it can carry small-text underline-hover & icon roles
     without AA failure. --ok mirrors --accent for the same reason.            */
  --accent:      #4f6839;  /* Forest green (active/brand) — AA on bg/paper */
  --accent-2:    #3d5128;  /* Deep forest (headings em, hover) */
  --accent-soft: #c5d2a8;  /* Hand-drawn underline tint */
  --accent-tint: #e6eed4;  /* Icon tile backgrounds */

  /* Semantic — score bands + flags
     --warn used as TEXT in .score-verdict h4 (24px italic display).
     Old #c28a2e on --paper = 3.0:1 — fails 4.5 AA but qualifies as large-text
     (24px+ regular). Italic display serif legibility is fragile, so we darken
     to #9a6b1d (~4.7:1) for safety margin. Flag-icon white-on-warn (#fff on
     #9a6b1d) measures ~4.5:1 — passes AA for 11px bold.                      */
  --risk:        #b03a2e;
  --risk-soft:   #f5d9d3;
  --warn:        #9a6b1d;  /* Burnt amber — AA-safe for verdict heading */
  --warn-soft:   #f3e4c3;
  --ok:          #4f6839;  /* Reuses --accent */
  --ok-soft:     #dbe5c4;

  /* Type stacks */
  --f-display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --f-serif:   'Source Serif 4', Georgia, serif;
  --f-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Rhythm */
  --max:       1200px;
  --gutter:    clamp(20px, 4vw, 56px);
  --radius-ed: 14px;        /* "-ed" suffix to avoid collision with legacy --radius */
  --radius-ed-sm: 10px;
}

/* ============================================================
   GLOBAL RESET + TYPOGRAPHY
   ============================================================ */
body {
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body img { max-width: 100%; display: block; }
body a { color: inherit; text-decoration: none; }

/* Editorial container */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Eyebrow label — mono uppercase with leading tick */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ============================================================
   NAV (editorial)
   Replaces legacy .nav. Matches prototype exactly.
   Selector is hoisted (body > nav.nav) so it beats style.css.
   ============================================================ */
body > nav.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: auto;
  padding: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  display: block;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}
.nav-logo-editorial {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 22px;
  font-style: italic;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.nav-logo-editorial .logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent-2);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 19px;
  font-style: normal;
  padding-bottom: 2px;
  line-height: 1;
}
body > nav.nav .nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
}
body > nav.nav .nav-links a {
  transition: color .15s;
  font-size: 14px;
  color: var(--ink-2);
}
body > nav.nav .nav-links a:hover { color: var(--ink-1); }
body > nav.nav .nav-links .nav-link-disabled {
  font-size: 14px;
  color: var(--ink-4);
  cursor: not-allowed;
  user-select: none;
}
body > nav.nav .nav-btn,
body > nav.nav .nav-links .nav-btn {
  border: 1px solid var(--line-hard);
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1) !important;
  transition: background .15s, border-color .15s, color .15s;
}
body > nav.nav .nav-btn:hover {
  background: var(--paper);
  border-color: var(--ink-1);
  color: var(--ink-1) !important;
}

/* Hamburger — editorial tones */
body > nav.nav .nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
body > nav.nav .nav-hamburger i {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink-1);
  border-radius: 2px;
}

@media (max-width: 820px) {
  body > nav.nav .nav-links { display: none; }
  body > nav.nav .nav-hamburger { display: flex; }
}

/* ============================================================
   SKIP LINK + SCREEN-READER ONLY
   ============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink-1);
  color: var(--paper);
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-size: 14px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HERO
   ============================================================ */
section.hero {
  padding: clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 96px);
  display: block;
  max-width: none;
  margin: 0;
  text-align: left;
  background: transparent;
  position: relative; /* 2026-04-24 review: parity with prototype linje 167 */
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-copy .eyebrow { margin-bottom: 28px; }
/* 2026-04-24 review: hoisted selector to `section.hero .hero-title` to beat
   legacy `.hero h1` (specificity 0,1,1) in style.css line 304 which would
   otherwise win when <h1> carries class hero-title. Editorial typography
   must take precedence on any page that adopts the new structure. */
section.hero .hero-title,
.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 6.2vw, 88px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
  color: var(--ink-1);
  text-wrap: balance;
  text-align: left;
}
section.hero .hero-title em,
.hero-title em {
  font-style: italic;
  color: var(--accent-2);
  background-image: linear-gradient(transparent 86%, var(--accent-soft) 86%);
  padding-inline: 2px;
  font-weight: 400;
}
.hero-deck {
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 0 36px;
}

/* Search field — editorial */
.search-ed {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 8px 8px 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 40px -28px rgba(30,26,22,0.22);
  transition: border-color .15s, box-shadow .15s;
  max-width: 560px;
  width: 100%;
  margin: 0;
}
.search-ed:focus-within {
  border-color: var(--ink-2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 40px -24px rgba(30,26,22,0.3);
}
.search-ed svg { color: var(--ink-3); flex-shrink: 0; }
.search-ed input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--f-sans);
  font-size: 16px;
  padding-block: 16px;
  color: var(--ink-1);
  outline: none;
  min-width: 0;
}
.search-ed input::placeholder { color: var(--ink-4); }
.search-btn-ed {
  background: var(--ink-1);
  color: var(--paper);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .08s, background .15s;
  white-space: nowrap;
  cursor: pointer;
}
.search-btn-ed:hover { background: var(--accent-2); }
.search-btn-ed:active { transform: translateY(1px); }
/* 2026-04-24 review: WCAG 2.4.7 — visible keyboard focus required (EAA) */
.search-btn-ed:focus-visible,
.waitlist-form button:focus-visible,
.cookie-btn:focus-visible,
#login-modal button[type="submit"]:focus-visible,
#error-state button:focus-visible,
.search-again-btn:focus-visible,
body > nav.nav .nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.search-hint-ed {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding-left: 2px;
}

/* Trust row — hero-level */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  max-width: 560px;
}
.trust-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.trust-row-item a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
}
.trust-row-item a:hover { text-decoration-color: var(--accent); }
.trust-row-item svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Preview card (hero right column).
   Når .hero.compact mode aktiveres (search submitted) skjuler vi
   HELE hero — scan-loader har sin egen search-shell + title, så at
   beholde den gamle hero-copy + preview-card ovenover scanneren ser
   forvirrende ud. resultat.js sætter .compact via showSearchState(). */
section.hero.compact { display: none; }
.preview-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 24px 60px -32px rgba(30,26,22,0.2),
    0 6px 18px -12px rgba(30,26,22,0.08);
  position: relative;
}
.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.preview-head h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  line-height: 1.1;
  color: var(--ink-1);
}
.preview-head .sub {
  font-size: 12.5px;
  color: var(--ink-3);
}
.preview-tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding: 5px 10px;
  border: 1px solid var(--line-hard);
  border-radius: 999px;
  flex-shrink: 0;
  font-weight: 600;
}
.preview-score {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: center;
  padding-block: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.score-ring-ed {
  position: relative;
  width: 96px;
  height: 96px;
}
.score-ring-ed svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring-ed .track { fill: none; stroke: var(--paper-3); stroke-width: 8; }
.score-ring-ed .fill {
  fill: none;
  stroke: var(--warn);
  stroke-width: 8;
  stroke-linecap: round;
}
.score-value-ed {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}
.score-value-ed span { font-size: 13px; color: var(--ink-3); }
.score-verdict .lab {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.score-verdict h4 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  color: var(--warn);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.score-verdict p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Dimension bars (in preview) */
.dims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-bottom: 20px;
}
.dim {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}
.dim-label {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
.dim-value {
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1;
  color: var(--ink-1);
}
.dim-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.dim-bar > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ok);
}
.dim-bar.warn > i { background: var(--warn); }
.dim-bar.risk > i { background: var(--risk); }

/* Flags list (in preview) */
.flags-ed { display: flex; flex-direction: column; gap: 10px; }
.flag-ed {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.flag-ed.ok {
  background: var(--ok-soft);
  color: var(--ink-1);
  border-color: color-mix(in srgb, var(--ok) 20%, transparent);
}
.flag-ed.warn {
  background: var(--warn-soft);
  color: var(--ink-1);
  border-color: color-mix(in srgb, var(--warn) 25%, transparent);
}
.flag-ed.risk {
  background: var(--risk-soft);
  color: var(--ink-1);
  border-color: color-mix(in srgb, var(--risk) 25%, transparent);
}
.flag-icon-ed {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 1px;
  font-weight: 700;
  font-size: 11px;
}
.flag-ed.ok .flag-icon-ed { background: var(--ok); color: var(--paper); }
.flag-ed.warn .flag-icon-ed { background: var(--warn); color: var(--paper); }
.flag-ed.risk .flag-icon-ed { background: var(--risk); color: var(--paper); }

.preview-badge {
  position: absolute;
  top: -14px;
  left: 28px;
  background: var(--ink-1);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}

/* ============================================================
   STATS STRIP (replaces .trust-strip for new editorial look,
   but keeps #trust-strip id for analytics-agnostic anchor)
   ============================================================ */
section.trust-strip {
  border-block: 1px solid var(--line-soft);
  padding: 56px 0;
  display: block;
  max-width: none;
  margin: 0;
  gap: 0;
  background: transparent;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; gap: 32px; } }
.stats-grid .trust-item {
  display: block;
  text-align: center;
}
.stats-grid .trust-item strong {
  font-family: var(--f-display);
  font-size: clamp(56px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  margin-bottom: 8px;
  font-weight: 400;
  display: block;
}
.stats-grid .trust-item span {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  display: block;
}
.stats-grid .trust-item a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
}
.stats-grid .trust-item a:hover { text-decoration-color: var(--accent); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
section.how-it-works {
  padding: clamp(80px, 10vw, 140px) 0;
  display: block;
  max-width: none;
  margin: 0;
  background: transparent;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 72px;
}
@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
}
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  color: var(--ink-1);
  text-wrap: balance;
}
.section-head h2 em {
  font-style: italic;
  color: var(--accent-2);
}
.section-head p {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 42ch;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  overflow: hidden;
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.steps .step {
  background: var(--paper);
  padding: 36px 32px 32px;
  position: relative;
  text-align: left;
  max-width: none;
}
.step-num {
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  display: block;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  line-height: 1;
}
.step-num::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ink-3);
  vertical-align: middle;
  margin-right: 10px;
}
.step-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-2);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.steps .step h3 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--ink-1);
}
.steps .step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 36ch;
}
.step-detail {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* ============================================================
   SOURCES (8 data sources grid)
   ============================================================ */
section.sources {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  padding: clamp(72px, 9vw, 120px) 0;
}
.sources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  overflow: hidden;
  margin-top: 48px;
}
@media (max-width: 820px) { .sources-grid { grid-template-columns: repeat(2, 1fr); } }
.source {
  background: var(--paper);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
}
.source-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 600;
}
.source-name {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.source-what {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: auto;
}

/* ============================================================
   FAQ
   ============================================================ */
section.faq-section {
  padding: clamp(80px, 10vw, 140px) 0;
  display: block;
  max-width: none;
  margin: 0;
  background: transparent;
}
.faq-head {
  text-align: center;
  margin-bottom: 56px;
}
.faq-head .eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}
.faq-head .eyebrow::before,
.faq-head .eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
section.faq-section h2 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  color: var(--ink-1);
  text-align: center;
}
.faq-list {
  max-width: 820px;
  margin: 56px auto 0;
  border-top: 1px solid var(--line);
  display: block;
  gap: 0;
}
.faq-list .faq-item {
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.faq-list .faq-item summary {
  list-style: none;
  padding: 28px 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color .15s;
  color: var(--ink-1);
  font-weight: 400;
}
.faq-list .faq-item summary:hover { color: var(--accent-2); }
.faq-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::after {
  content: '+';
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--line-hard);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform .25s, background .15s, color .15s;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 2px;
  font-family: var(--f-sans);
}
.faq-list .faq-item[open] summary::after {
  transform: rotate(45deg);
  background: var(--ink-1);
  color: var(--paper);
  border-color: var(--ink-1);
}
.faq-list .faq-item p {
  padding: 0 8px 32px;
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.faq-list .faq-item p strong {
  font-weight: 600;
  color: var(--ink-1);
}
.faq-footer-note {
  text-align: center;
  margin-top: 32px;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink-3);
}
.faq-footer-note a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
  font-weight: 500;
}
.faq-footer-note a:hover { text-decoration-color: var(--accent); }

/* ============================================================
   SEO CONTENT GRID
   ============================================================ */
section.seo-content {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  display: block;
  max-width: none;
  margin: 0;
}
section.seo-content h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 48px;
  color: var(--ink-1);
  text-wrap: balance;
  max-width: 22ch;
}
.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .seo-grid { grid-template-columns: 1fr; } }
.seo-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 28px;
}
.seo-block h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink-1);
}
.seo-block p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   GUIDES (blog cards)
   2026-04-24 review: prototype renders guides on var(--paper-2)
   with border-block separators (linje 722-726). Restored.
   ============================================================ */
section.guides {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  display: block;
  max-width: none;
  margin: 0;
}
.guides-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 48px;
}
.guides-head h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  color: var(--ink-1);
}
.guides-head a {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.guides-head a:hover { color: var(--accent-2); }
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .guides-grid { grid-template-columns: 1fr; } }
.guide {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  text-decoration: none;
  color: inherit;
}
.guide:hover {
  transform: translateY(-3px);
  border-color: var(--line-hard);
  box-shadow: 0 16px 40px -24px rgba(30,26,22,0.2);
}
.guide-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-2);
}
.guide h3 {
  font-family: var(--f-display);
  font-size: 28px; /* 2026-04-24 review: matched prototype (was 24px, drift) */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-1);
}
.guide p {
  font-family: var(--f-serif);
  font-size: 14px; /* 2026-04-24 review: matched prototype (was 15px) */
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.guide-link {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   NEWSLETTER (replaces .cta-section)
   ============================================================ */
section.cta-section {
  padding: clamp(72px, 9vw, 120px) 0;
  background: transparent;
  display: block;
  max-width: none;
  margin: 0;
}
.cta-box {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
  padding: 0;
  border: 0;
}
.cta-box small {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.cta-box small::before,
.cta-box small::after {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.cta-box h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--ink-1);
}
.cta-box > p {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 52ch;
  margin-inline: auto;
}
.waitlist-form {
  display: flex;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 8px 8px 20px;
  border-radius: var(--radius-ed);
  box-shadow: 0 16px 40px -28px rgba(30,26,22,0.2);
  max-width: 520px;
  margin: 0 auto;
}
.waitlist-form input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--f-sans);
  font-size: 15px;
  padding-block: 14px;
  outline: none;
  color: var(--ink-1);
  min-width: 0;
}
.waitlist-form input::placeholder { color: var(--ink-4); }
.waitlist-form button {
  background: var(--ink-1);
  color: var(--paper);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.waitlist-form button:hover { background: var(--accent-2); }

/* ============================================================
   FOOTER (dark editorial)
   ============================================================ */
body > footer.footer {
  background: var(--ink-1);
  color: #d8d3c4;
  padding: 56px 0 28px;
  display: block;
  flex-direction: unset;
  text-align: left;
  font-family: var(--f-sans);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-logo {
  font-family: var(--f-display);
  font-size: 28px;
  font-style: italic;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-logo .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--ink-1);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 22px;
  font-style: normal;
  padding-bottom: 2px;
  line-height: 1;
}
.footer-tag {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.5;
  color: #b8b2a4;
  max-width: 32ch;
  margin: 0;
}
.footer-col h4 {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #8a8478;
  margin: 0 0 16px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: 14px;
  color: #d8d3c4;
  transition: color .15s;
  text-decoration: none;
}
.footer-col a:hover { color: #fff; }
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #8a8478;
}
@media (max-width: 640px) {
  .footer-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ============================================================
   LOADING + ERROR states (editorial)
   ============================================================ */
#loading-state.loading-state {
  max-width: 720px;
  margin: 48px auto;
  padding: 48px var(--gutter);
  text-align: center;
  background: transparent;
}
#loading-state .spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-ed 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin-ed { to { transform: rotate(360deg); } }
#loading-state .loading-text {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
}
#error-state.error-state {
  max-width: 720px;
  margin: 48px auto;
  padding: 32px var(--gutter);
  text-align: center;
  background: var(--risk-soft);
  border: 1px solid color-mix(in srgb, var(--risk) 25%, transparent);
  border-radius: var(--radius-ed);
}
#error-state p {
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--ink-1);
  margin: 0 0 16px;
}
#error-state button {
  background: var(--ink-1);
  color: var(--paper);
  border: 0;
  padding: 12px 24px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
#error-state button:hover { background: var(--accent-2); }

/* ============================================================
   RESULT CONTAINER — search-again button
   Result subtree (score-card, flags, dims) still uses legacy
   style.css / bygpas-design-system.css until those components
   are ported. Only the wrapper + search-again button is styled
   here in the editorial system.
   ============================================================ */
#result-container {
  max-width: var(--max);
  margin: 48px auto;
  padding-inline: var(--gutter);
}
.search-again {
  margin-bottom: 24px;
}
.search-again-btn {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-hard);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.search-again-btn:hover {
  background: var(--ink-1);
  color: var(--paper);
  border-color: var(--ink-1);
}

/* ============================================================
   COOKIE BANNER (editorial)
   ============================================================ */
#cookie-banner.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  box-shadow: 0 24px 60px -24px rgba(30,26,22,0.35);
  padding: 20px 24px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  font-family: var(--f-sans);
}
#cookie-banner.cookie-banner p {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
  min-width: 260px;
}
.cookie-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-btn {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.cookie-btn-primary {
  background: var(--ink-1);
  color: var(--paper);
  border-color: var(--ink-1);
}
.cookie-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cookie-btn-secondary {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--line-hard);
}
.cookie-btn-secondary:hover { background: var(--paper-2); border-color: var(--ink-1); }
.cookie-link {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
}
.cookie-link:hover { color: var(--ink-1); }

/* ============================================================
   LOGIN MODAL (editorial)
   ============================================================ */
#login-modal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 25, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#login-modal .modal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 36px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.5);
  position: relative;
  font-family: var(--f-sans);
}
#login-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--ink-3);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
#login-modal .modal-close:hover { background: var(--paper-2); color: var(--ink-1); }
#login-modal h2 {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--ink-1);
}
#login-modal p {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 20px;
}
#login-modal form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#login-modal input[type="email"] {
  font-family: var(--f-sans);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--line-hard);
  border-radius: var(--radius-ed-sm);
  background: var(--bg);
  color: var(--ink-1);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#login-modal input[type="email"]:focus {
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
#login-modal .consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.45;
}
#login-modal .consent-label input { margin-top: 3px; flex-shrink: 0; }
#login-modal button[type="submit"] {
  background: var(--ink-1);
  color: var(--paper);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
#login-modal button[type="submit"]:hover { background: var(--accent-2); }
#login-modal .login-sent {
  text-align: center;
  padding: 20px 0;
}
#login-modal .login-sent-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-2);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
}
#login-modal .login-sent p { margin-bottom: 8px; }
#login-modal .login-sent strong { color: var(--ink-1); font-weight: 600; }
#login-modal .login-sent-hint {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 16px !important;
}

/* ============================================================
   MOBILE MENU (editorial)
   ============================================================ */
#mobile-menu.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px var(--gutter);
  gap: 4px;
  font-family: var(--f-sans);
}
#mobile-menu.mobile-menu.open { display: flex; }
#mobile-menu a,
#mobile-menu .nav-link-disabled {
  padding: 14px 0;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
#mobile-menu a:last-child { border-bottom: 0; }
#mobile-menu .nav-link-disabled { color: var(--ink-4); cursor: not-allowed; }
#mobile-menu a:hover { color: var(--ink-1); }

/* ============================================================
   AI disclaimer + utilities
   ============================================================ */
.ai-disclaimer {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-align: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-weight: 500;
}

.hidden { display: none !important; }

/* ============================================================
   MOBILE REFINEMENTS (≤600px)
   ============================================================ */
@media (max-width: 600px) {
  body > nav.nav .nav-inner { padding-block: 14px; }
  .hero-title { font-size: 40px; }
  .hero-deck { font-size: 17px; }
  .search-ed { padding: 6px 6px 6px 16px; }
  .search-ed input { font-size: 15px; padding-block: 14px; }
  .search-btn-ed { padding: 12px 18px; font-size: 13px; }
  .trust-row { gap: 14px; }
  .preview-card { padding: 22px 20px; }
  .preview-head h3 { font-size: 22px; }
  .score-ring-ed { width: 84px; height: 84px; }
  .score-value-ed { font-size: 28px; }
  .dims { gap: 12px 20px; }
  .section-head h2 { font-size: 36px; }
  section.faq-section h2 { font-size: 36px; }
  section.seo-content h2 { font-size: 32px; }
  .guides-head h2 { font-size: 32px; }
  .cta-box h2 { font-size: 32px; }
  .waitlist-form { flex-direction: column; padding: 8px; }
  .waitlist-form input { padding: 14px 16px; }
  .faq-list .faq-item summary { padding: 22px 4px; font-size: 18px; }
  .faq-list .faq-item p { padding: 0 4px 24px; font-size: 15px; }
}

/* ============================================================
   FOCUS-VISIBLE (WCAG 2.4.7 — non-negotiable)
   Added 2026-04-24 a11y pre-audit. All interactive elements that
   previously relied solely on hover or browser-default focus rings
   now have a visible 2px forest outline + 2px offset. The accent
   is dark enough (#4f6839, ~5:1 on bg) to satisfy 1.4.11 (3:1
   non-text contrast for UI components against any adjacent surface).
   ============================================================ */
.search-btn-ed:focus-visible,
.search-again-btn:focus-visible,
.cookie-btn:focus-visible,
.cookie-link:focus-visible,
body > nav.nav .nav-btn:focus-visible,
body > nav.nav .nav-links a:focus-visible,
body > nav.nav .nav-hamburger:focus-visible,
.waitlist-form button:focus-visible,
.guide:focus-visible,
.faq-list .faq-item summary:focus-visible,
.trust-row-item a:focus-visible,
.stats-grid .trust-item a:focus-visible,
.guides-head a:focus-visible,
.faq-footer-note a:focus-visible,
.footer-col a:focus-visible,
#login-modal .modal-close:focus-visible,
#login-modal button[type="submit"]:focus-visible,
#mobile-menu a:focus-visible,
#error-state button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-ed-sm);
}

/* Search field already has :focus-within border + shadow.
   Add an outline fallback for users who disable shadows. */
.search-ed:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   REDUCED MOTION (a11y)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .guide:hover { transform: none; }
  .search-btn-ed:active { transform: none; }
  /* FAQ rotate is a state change but the 250ms transition itself
     should be neutralised. transition-duration override above
     already handles this — the rotated end-state is preserved. */
  .faq-list .faq-item[open] summary::after { transition: none; }
}

/* ============================================================
   BLOG — EDITORIAL LAYOUT
   ------------------------------------------------------------
   2026-04-25 layout pass: Agent 1 swapped fonts/tokens on all
   25 blog posts mechanically; this section ports the actual
   layout to editorial weekend-magazine style. Hairline grid,
   Source Serif 4 prose, drop-cap, mono eyebrows, italic display
   serif H2/H3, hairline-bordered pullquotes.
   ------------------------------------------------------------
   Selectors are scoped to existing class hooks (.post-wrapper,
   .post-content, .blog-wrapper, .blog-card etc.) so the diff in
   the actual blog HTML is small. body main.* and body section.*
   selectors lift specificity above style.css legacy rules.
   ============================================================ */

/* ---------- Blog landing (index.html) ---------- */
body main.blog-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(64px, 8vw, 112px);
}
body main.blog-wrapper .blog-header {
  text-align: left;
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
}
@media (max-width: 820px) {
  body main.blog-wrapper .blog-header {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
}
body main.blog-wrapper .blog-header::before {
  content: 'Bygpas · journal';
  display: block;
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 24px;
}
body main.blog-wrapper .blog-header h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0;
  text-wrap: balance;
}
body main.blog-wrapper .blog-header h1 em {
  font-style: italic;
  color: var(--accent-2);
}
body main.blog-wrapper .blog-header p {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 44ch;
}

/* Hairline-grid blog cards */
body main.blog-wrapper .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  overflow: hidden;
}
@media (max-width: 960px) {
  body main.blog-wrapper .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body main.blog-wrapper .blog-grid { grid-template-columns: 1fr; }
}
body main.blog-wrapper .blog-card {
  background: var(--paper);
  border: 0;
  border-radius: 0;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: background .15s, transform .15s;
  text-decoration: none;
  color: inherit;
}
body main.blog-wrapper .blog-card:hover {
  background: var(--paper-2);
  transform: none;
  border-color: transparent;
}
body main.blog-wrapper .blog-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body main.blog-wrapper .blog-card-category {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 16px;
}
body main.blog-wrapper .blog-card h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 0 0 14px;
}
body main.blog-wrapper .blog-card p {
  font-family: var(--f-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
  flex-grow: 1;
}
body main.blog-wrapper .blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
body main.blog-wrapper .blog-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-hard);
}

/* Blog landing CTA box — paper-2 sunken section */
body main.blog-wrapper .blog-cta-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 48px 36px;
  text-align: center;
  margin-top: clamp(56px, 7vw, 88px);
}
body main.blog-wrapper .blog-cta-box h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 12px;
}
body main.blog-wrapper .blog-cta-box p {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 28px;
}
body main.blog-wrapper .blog-cta-box a {
  display: inline-block;
  background: var(--ink-1);
  color: var(--paper);
  padding: 14px 28px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}
body main.blog-wrapper .blog-cta-box a:hover { background: var(--accent-2); }
body main.blog-wrapper .blog-cta-box a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Article (single blog post) ---------- */
body main.post-wrapper {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(56px, 7vw, 96px);
}

/* Breadcrumb — mono uppercase */
body main.post-wrapper .post-breadcrumb {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 36px;
}
body main.post-wrapper .post-breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s;
}
body main.post-wrapper .post-breadcrumb a:hover { color: var(--accent-2); }

/* Article header — eyebrow, italic display title, deck, meta */
body main.post-wrapper .post-header {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
body main.post-wrapper .post-category {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 24px;
}
body main.post-wrapper .post-category::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
body main.post-wrapper .post-header h1 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0 0 24px;
  text-wrap: balance;
}
body main.post-wrapper .post-header h1 em {
  font-style: italic;
  color: var(--accent-2);
}
body main.post-wrapper .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  padding: 0;
  border: 0;
}
body main.post-wrapper .post-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-hard);
}

/* Article body — Source Serif 4 prose */
body main.post-wrapper .post-content {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
}
body main.post-wrapper .post-content p {
  margin: 0 0 22px;
}
body main.post-wrapper .post-content .lead {
  font-family: var(--f-serif);
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-1);
  font-weight: 400;
  margin: 0 0 40px;
  letter-spacing: -0.005em;
}
/* Drop-cap on first paragraph after .lead */
body main.post-wrapper .post-content > .lead + p::first-letter,
body main.post-wrapper .post-content > p.lead + p::first-letter {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 4.4em;
  line-height: 0.85;
  float: left;
  padding: 8px 14px 0 0;
  color: var(--accent-2);
  font-weight: 400;
}
@media (max-width: 600px) {
  body main.post-wrapper .post-content > .lead + p::first-letter,
  body main.post-wrapper .post-content > p.lead + p::first-letter {
    font-size: 3.6em;
    padding: 6px 10px 0 0;
  }
}

body main.post-wrapper .post-content h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: clamp(48px, 5vw, 64px) 0 18px;
  text-wrap: balance;
}
body main.post-wrapper .post-content h2 em {
  font-style: italic;
  color: var(--accent-2);
}
body main.post-wrapper .post-content h3 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 36px 0 14px;
}
body main.post-wrapper .post-content h3 em {
  font-style: italic;
  color: var(--accent-2);
}

body main.post-wrapper .post-content strong {
  color: var(--ink-1);
  font-weight: 600;
}
body main.post-wrapper .post-content em {
  font-style: italic;
}

body main.post-wrapper .post-content a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color .15s, color .15s;
}
body main.post-wrapper .post-content a:hover {
  color: var(--ink-1);
  text-decoration-color: var(--accent);
}

/* Lists — discrete forest-tinted bullets */
body main.post-wrapper .post-content ul {
  margin: 0 0 26px;
  padding-left: 0;
  list-style: none;
}
body main.post-wrapper .post-content ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.65;
}
body main.post-wrapper .post-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
body main.post-wrapper .post-content ol {
  margin: 0 0 26px;
  padding-left: 24px;
  counter-reset: ol-counter;
  list-style: none;
}
body main.post-wrapper .post-content ol li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
  line-height: 1.65;
  counter-increment: ol-counter;
}
body main.post-wrapper .post-content ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: -22px;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent-2);
  font-size: 1.05em;
  line-height: 1.6;
}

/* Block-level quotes */
body main.post-wrapper .post-content blockquote {
  margin: 36px 0;
  padding: 20px 28px;
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-1);
  border-radius: 0 var(--radius-ed-sm) var(--radius-ed-sm) 0;
}
body main.post-wrapper .post-content blockquote p:last-child { margin-bottom: 0; }

/* Inline code + pre blocks */
body main.post-wrapper .post-content code {
  font-family: var(--f-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-1);
  border: 1px solid var(--line-soft);
}
body main.post-wrapper .post-content pre {
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed-sm);
  padding: 20px 24px;
  overflow-x: auto;
  margin: 28px 0;
  color: var(--ink-1);
}
body main.post-wrapper .post-content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Step-number — circle adornment on h2 (used in saadan-tjekker) */
body main.post-wrapper .post-content .step-number {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-2);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  margin-right: 14px;
  vertical-align: 4px;
  line-height: 1;
  padding-bottom: 2px;
}

/* Callouts — hairline-bordered pullquote blocks */
body main.post-wrapper .post-content .callout,
body main.post-wrapper .post-content .warning,
body main.post-wrapper .post-content .danger {
  margin: 36px 0;
  padding: 22px 26px;
  border-radius: 0 var(--radius-ed-sm) var(--radius-ed-sm) 0;
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
}
body main.post-wrapper .post-content .callout {
  background: var(--ok-soft);
  border-left: 2px solid var(--accent);
  color: var(--ink-1);
}
body main.post-wrapper .post-content .callout p,
body main.post-wrapper .post-content .callout strong {
  color: var(--ink-1);
}
body main.post-wrapper .post-content .warning {
  background: var(--warn-soft);
  border-left: 2px solid var(--warn);
  color: var(--ink-1);
}
body main.post-wrapper .post-content .warning p,
body main.post-wrapper .post-content .warning strong {
  color: var(--ink-1);
}
body main.post-wrapper .post-content .danger {
  background: var(--risk-soft);
  border-left: 2px solid var(--risk);
  color: var(--ink-1);
}
body main.post-wrapper .post-content .danger p,
body main.post-wrapper .post-content .danger strong {
  color: var(--ink-1);
}
body main.post-wrapper .post-content .callout p:last-child,
body main.post-wrapper .post-content .warning p:last-child,
body main.post-wrapper .post-content .danger p:last-child { margin-bottom: 0; }

/* Tables — hairline dividers, paper-2 header */
body main.post-wrapper .post-content table,
body main.post-wrapper .post-content .price-table,
body main.post-wrapper .post-content .example-table,
body main.post-wrapper .post-content .compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-family: var(--f-sans);
  font-size: 14.5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed-sm);
  overflow: hidden;
}
body main.post-wrapper .post-content table th,
body main.post-wrapper .post-content .price-table th,
body main.post-wrapper .post-content .example-table th,
body main.post-wrapper .post-content .compare-table th {
  background: var(--paper-2);
  text-align: left;
  padding: 16px 18px;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
body main.post-wrapper .post-content table td,
body main.post-wrapper .post-content .price-table td,
body main.post-wrapper .post-content .example-table td,
body main.post-wrapper .post-content .compare-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
body main.post-wrapper .post-content table tr:last-child td,
body main.post-wrapper .post-content .price-table tr:last-child td,
body main.post-wrapper .post-content .example-table tr:last-child td,
body main.post-wrapper .post-content .compare-table tr:last-child td {
  border-bottom: 0;
}
body main.post-wrapper .post-content .price-table td:last-child,
body main.post-wrapper .post-content .example-table td.num {
  color: var(--ink-1);
  font-family: var(--f-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body main.post-wrapper .post-content .num.pos { color: var(--accent-2); }
body main.post-wrapper .post-content .num.neg { color: var(--risk); }

/* Inline content CTA */
body main.post-wrapper .post-content .inline-cta {
  display: block;
  text-align: center;
  margin: 40px 0;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
}
body main.post-wrapper .post-content .inline-cta p {
  font-family: var(--f-serif);
  font-size: 17px;
  color: var(--ink-1);
  margin: 0 0 14px;
}
body main.post-wrapper .post-content .inline-cta a {
  display: inline-block;
  padding: 12px 24px;
  background: var(--ink-1);
  color: var(--paper);
  text-decoration: none;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  transition: background .15s;
}
body main.post-wrapper .post-content .inline-cta a:hover { background: var(--accent-2); }
body main.post-wrapper .post-content .inline-cta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Bottom CTA — dark editorial */
body main.post-wrapper .post-cta {
  background: var(--ink-1);
  color: var(--paper);
  border-radius: var(--radius-ed);
  padding: 48px 36px;
  text-align: center;
  margin: clamp(56px, 6vw, 80px) 0 40px;
}
body main.post-wrapper .post-cta h3 {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 14px;
  text-wrap: balance;
}
body main.post-wrapper .post-cta p {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  color: #d8d3c4;
  margin: 0 auto 28px;
  max-width: 460px;
}
body main.post-wrapper .post-cta a {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s;
}
body main.post-wrapper .post-cta a:hover { background: var(--accent-2); }
body main.post-wrapper .post-cta a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* FAQ section — same hairline list as homepage */
body main.post-wrapper .post-faq {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
body main.post-wrapper .post-faq h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 28px;
}
body main.post-wrapper .post-faq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 4px;
}
body main.post-wrapper .post-faq details:first-of-type {
  border-top: 1px solid var(--line);
}
body main.post-wrapper .post-faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-right: 4px;
  transition: color .15s;
}
body main.post-wrapper .post-faq summary:hover { color: var(--accent-2); }
body main.post-wrapper .post-faq summary::-webkit-details-marker { display: none; }
body main.post-wrapper .post-faq summary::after {
  content: '+';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-hard);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1;
  padding-bottom: 2px;
  transition: transform .25s, background .15s, color .15s, border-color .15s;
}
body main.post-wrapper .post-faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--ink-1);
  color: var(--paper);
  border-color: var(--ink-1);
}
body main.post-wrapper .post-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-ed-sm);
}
body main.post-wrapper .post-faq details p {
  margin: 14px 0 0;
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}

/* Author + back-to-blog */
body main.post-wrapper .post-author {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 60px);
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
body main.post-wrapper .post-author strong {
  color: var(--ink-1);
  font-weight: 600;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  display: block;
  margin-bottom: 4px;
}
body main.post-wrapper .back-to-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s;
}
body main.post-wrapper .back-to-blog:hover { color: var(--accent-2); }
body main.post-wrapper .back-to-blog:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-ed-sm);
}

/* Related posts — 3-up hairline grid */
body main.post-wrapper .related-posts {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
body main.post-wrapper .related-posts h2 {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 24px;
}
body main.post-wrapper .related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  overflow: hidden;
}
@media (max-width: 720px) {
  body main.post-wrapper .related-posts-grid { grid-template-columns: 1fr; }
}
body main.post-wrapper .related-posts-grid a {
  display: block;
  background: var(--paper);
  padding: 22px 22px 24px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: background .15s;
  min-height: 116px;
}
body main.post-wrapper .related-posts-grid a:hover { background: var(--paper-2); }
body main.post-wrapper .related-posts-grid a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body main.post-wrapper .related-post-title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 0 0 8px;
  display: block;
}
body main.post-wrapper .related-post-deck {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  display: block;
}

/* ---------- Newsletter strip (blog landing + posts) ---------- */
body section.newsletter-section {
  background: var(--ink-1);
  padding: clamp(56px, 7vw, 88px) var(--gutter);
  text-align: center;
  margin-top: 0;
  border-top: 1px solid var(--line);
}
body section.newsletter-section .newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
}
body section.newsletter-section h2 {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
body section.newsletter-section p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.55;
  color: #d8d3c4;
  margin: 0 0 28px;
}
body section.newsletter-section form {
  display: flex;
  gap: 8px;
  background: var(--paper);
  border-radius: var(--radius-ed);
  padding: 8px 8px 8px 20px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: 0 16px 40px -28px rgba(0,0,0,0.4);
}
body section.newsletter-section input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 15px;
  padding-block: 12px;
  color: var(--ink-1);
  outline: none;
  min-width: 0;
}
body section.newsletter-section input[type="email"]::placeholder { color: var(--ink-4); }
body section.newsletter-section button {
  background: var(--ink-1);
  color: var(--paper);
  border: 0;
  padding: 12px 22px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
body section.newsletter-section button:hover { background: var(--accent); }
body section.newsletter-section button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body section.newsletter-section .newsletter-msg {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #b8b2a4;
  margin: 16px 0 0;
}

/* Mobile refinements */
@media (max-width: 600px) {
  body main.post-wrapper .post-content { font-size: 17px; }
  body main.post-wrapper .post-content .lead { font-size: 19px; margin-bottom: 32px; }
  body main.post-wrapper .post-content h2 { font-size: 26px; margin-top: 44px; }
  body main.post-wrapper .post-content h3 { font-size: 21px; }
  body main.post-wrapper .post-content blockquote { padding: 18px 22px; font-size: 17px; }
  body main.post-wrapper .post-cta { padding: 36px 24px; }
  body main.post-wrapper .post-cta p { font-size: 16px; }
  body section.newsletter-section form { flex-direction: column; padding: 8px; }
  body section.newsletter-section input[type="email"] { padding: 14px 16px; }
}

/* ============================================================
   CITY PAGES + SEO LANDING — editorial layout port
   ------------------------------------------------------------
   Added 2026-04-25 to bring `public/byer/*.html` (19 files) and
   the 3 SEO landing pages (`tjek-haandvaerker.html`,
   `hvad-koster-renovering.html`, `klage-over-haandvaerker.html`)
   under the same paper-cream + serif-italic editorial system as
   the homepage. Replaces legacy `.seo-hero`, `.seo-section`,
   `.seo-cta-section`, `.seo-warning-item`, `.seo-step-item`,
   `.city-contractors-*`, `.newsletter-section` previously pulling
   from style.css.

   Selectors are hoisted (`body section.seo-hero`, etc.) so editorial
   wins over legacy specificity. This sheet loads first, so editorial
   wins on cascade-order alone for unhoisted classes.
   ============================================================ */

/* --- Breadcrumb (editorial) ----------------------------------------- */
body nav.breadcrumb {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-3);
}
body nav.breadcrumb a {
  color: var(--ink-3);
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
}
body nav.breadcrumb a:hover { color: var(--ink-1); text-decoration-color: var(--accent); }
body nav.breadcrumb span:not([aria-hidden]) { color: var(--ink-1); }

/* --- SEO/City hero (editorial) -------------------------------------- */
body section.seo-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) var(--gutter) clamp(40px, 6vw, 80px);
  text-align: left;
  background: transparent;
}
body section.seo-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-2);
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: 0;
  margin-bottom: 24px;
}
body section.seo-hero .hero-badge::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
body section.seo-hero h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  color: var(--ink-1);
  text-wrap: balance;
  max-width: 22ch;
  text-align: left;
}
body section.seo-hero h1 em {
  font-style: italic;
  color: var(--accent-2);
  background-image: linear-gradient(transparent 86%, var(--accent-soft) 86%);
  padding-inline: 2px;
  font-weight: 400;
}
body section.seo-hero > p {
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 36px;
}
body section.seo-hero .search-container {
  max-width: 560px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body section.seo-hero form.search-box,
body section.seo-hero .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 8px 8px 8px 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 40px -28px rgba(30,26,22,0.22);
  transition: border-color .15s, box-shadow .15s;
}
body section.seo-hero .search-box:focus-within {
  border-color: var(--ink-2);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body section.seo-hero .search-box input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--f-sans);
  font-size: 16px;
  padding-block: 16px;
  color: var(--ink-1);
  outline: none;
  min-width: 0;
}
body section.seo-hero .search-box input::placeholder { color: var(--ink-4); }
body section.seo-hero .search-box button {
  background: var(--ink-1);
  color: var(--paper);
  border: 0;
  padding: 14px 22px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .08s;
}
body section.seo-hero .search-box button:hover { background: var(--accent-2); }
body section.seo-hero .search-box button:active { transform: translateY(1px); }
body section.seo-hero .search-box button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body section.seo-hero .search-hint {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  padding-left: 2px;
  background: transparent;
  border: 0;
}

/* --- SEO content sections (editorial) ------------------------------- */
body section.seo-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) var(--gutter);
  background: transparent;
}
body section.seo-section.seo-section-alt {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  max-width: none;
  padding-inline: 0;
}
body section.seo-section.seo-section-alt > * {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body section.seo-section h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--ink-1);
  text-wrap: balance;
  max-width: 26ch;
}
body section.seo-section h2 em {
  font-style: italic;
  color: var(--accent-2);
}
body section.seo-section .seo-section-intro {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 60ch;
}
body section.seo-section > p:not(.seo-section-intro):not(.seo-price-disclaimer) {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 70ch;
}
body section.seo-section a,
body section.seo-section .seo-section-intro a,
body section.seo-section .seo-step-tip a,
body section.seo-section .seo-block a,
body section.seo-section .seo-warning-item a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
  font-weight: 500;
}
body section.seo-section a:hover { text-decoration-color: var(--accent); }

/* --- SEO grid + blocks ---------------------------------------------- */
body .seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
}
body .seo-grid.seo-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  body .seo-grid, body .seo-grid.seo-grid-3 { grid-template-columns: 1fr; }
}
body .seo-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body .seo-block-number {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 4px;
  line-height: 1;
}
body .seo-block h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-1);
}
body .seo-block p {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
body .seo-block-weight {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-3);
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* --- SEO steps + tips (numbered editorial) -------------------------- */
body .seo-steps-list,
body .seo-tips-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
body .seo-step-item,
body .seo-tip-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 700px) {
  body .seo-step-item, body .seo-tip-item {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
body .seo-step-number,
body .seo-tip-number {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-2);
  font-weight: 400;
  font-style: italic;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
}
body .seo-step-content h3,
body .seo-tip-item h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink-1);
}
body .seo-step-content p,
body .seo-tip-item p {
  font-family: var(--f-serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 14px;
  max-width: 64ch;
}
body .seo-step-tip {
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 var(--radius-ed-sm) var(--radius-ed-sm) 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 12px;
}
body .seo-step-tip strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-1);
  margin-right: 4px;
}

/* --- SEO warnings list (editorial flag styling) --------------------- */
body .seo-warnings-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
body .seo-warning-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius-ed-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  align-items: start;
}
body .seo-warning-item.seo-warning-red {
  background: var(--risk-soft);
  border-color: color-mix(in srgb, var(--risk) 25%, transparent);
}
body .seo-warning-item.seo-warning-yellow {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 25%, transparent);
}
body .seo-warning-item.seo-warning-green {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
body .seo-warning-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  background: var(--risk);
  color: var(--paper);
  margin-top: 2px;
  font-family: var(--f-sans);
}
body .seo-warning-yellow .seo-warning-icon { background: var(--warn); }
body .seo-warning-green .seo-warning-icon,
body .seo-warning-icon.seo-warning-icon-check { background: var(--ok); }
body .seo-warning-item h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink-1);
}
body .seo-warning-item p {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-1);
  margin: 0;
  max-width: 70ch;
}

/* --- SEO links list (reference cards) ------------------------------- */
body .seo-links-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
body .seo-link-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
body .seo-link-item h3 {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink-1);
}
body .seo-link-item p {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 10px;
  max-width: 70ch;
}
body .seo-link-item .seo-link-detail {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 8px;
  font-style: normal;
}
body .seo-link-item a {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
}
body .seo-link-item a:hover { text-decoration-color: var(--accent); }

/* --- SEO price tables (editorial) ----------------------------------- */
body .seo-price-table-wrapper {
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  background: var(--paper);
}
body .seo-price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-sans);
}
body .seo-price-table thead { background: var(--paper-2); }
body .seo-price-table th {
  text-align: left;
  padding: 16px 22px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
body .seo-price-table td {
  padding: 18px 22px;
  font-size: 14.5px;
  color: var(--ink-1);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-sans);
  vertical-align: top;
}
body .seo-price-table td strong {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
body .seo-price-table tbody tr:last-child td { border-bottom: 0; }
body .seo-price-disclaimer {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 18px 0 0;
  font-weight: 500;
  line-height: 1.6;
}

/* --- SEO CTA mid-page (editorial card) ------------------------------ */
body section.seo-cta-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--gutter);
  background: transparent;
}
body .seo-cta-box {
  background: var(--ink-1);
  color: var(--paper);
  border-radius: var(--radius-ed);
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
  text-align: left;
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
body .seo-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
body .seo-cta-box h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--paper);
  text-wrap: balance;
  max-width: 28ch;
}
body .seo-cta-box p {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  color: #d8d3c4;
  margin: 0 0 28px;
  max-width: 56ch;
}
body .seo-cta-box a.seo-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--paper);
  padding: 14px 26px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s, transform .08s;
}
body .seo-cta-box a.seo-cta-btn:hover { background: var(--paper); color: var(--ink-1); }
body .seo-cta-box a.seo-cta-btn:active { transform: translateY(1px); }
body .seo-cta-box a.seo-cta-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body .seo-cta-box .seo-cta-note {
  display: block;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8a8478;
  font-weight: 500;
}

/* --- SEO related links grid ----------------------------------------- */
body section.seo-related {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  background: transparent;
  border-top: 1px solid var(--line-soft);
}
body section.seo-related h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 36px;
  color: var(--ink-1);
}
body .seo-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 740px) {
  body .seo-related-grid { grid-template-columns: 1fr; }
}
body a.seo-related-link {
  display: grid;
  grid-template-columns: 110px 1fr 22px;
  gap: 22px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-1);
  transition: background .15s, padding .15s;
}
body a.seo-related-link:hover {
  background: var(--paper-2);
  padding-inline: 16px 8px;
}
body a.seo-related-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body .seo-related-label {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--accent-2);
}
body .seo-related-title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink-1);
}
body .seo-related-arrow {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ink-3);
  font-style: italic;
  transition: transform .2s, color .15s;
}
body a.seo-related-link:hover .seo-related-arrow {
  color: var(--accent-2);
  transform: translateX(4px);
}
@media (max-width: 540px) {
  body a.seo-related-link {
    grid-template-columns: 1fr 22px;
    gap: 6px 16px;
  }
  body .seo-related-label { grid-column: 1; }
  body .seo-related-title { grid-column: 1; }
  body .seo-related-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* --- City-specific: contractor cards rendered by city-contractors.js  */
body section.city-contractors-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  background: transparent;
}
body section.city-contractors-section h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--ink-1);
  text-wrap: balance;
  max-width: 24ch;
}
body .city-contractors-intro {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 60ch;
}
body .city-contractors-intro a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
  font-weight: 500;
}
body .city-contractors-empty {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 500;
  text-align: center;
  padding: 48px 24px;
  background: var(--paper-2);
  border: 1px dashed var(--line-hard);
  border-radius: var(--radius-ed);
}
body .city-contractors-empty a {
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
}
body .city-contractors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 820px) { body .city-contractors-grid { grid-template-columns: 1fr; } }

body .city-contractor-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .15s, padding .15s;
}
body .city-contractor-card:hover {
  background: var(--paper-2);
  padding-inline: 16px;
}
body .city-contractor-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body .city-contractors-grid > .city-contractor-card:nth-child(odd) {
  border-right: 1px solid var(--line);
}
@media (max-width: 820px) {
  body .city-contractors-grid > .city-contractor-card { border-right: 0 !important; }
}
body .city-contractor-header {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: center;
}
body .city-contractor-score {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid var(--line-hard);
}
body .city-contractor-score-num {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
body .city-contractor-score-label {
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-top: 4px;
  display: block;
}
body .city-contractor-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body .city-contractor-name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body .city-contractor-cvr {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 600;
}
body .city-contractor-specialties {
  font-family: var(--f-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.4;
}
body .city-contractor-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-2);
}
body .city-contractor-badge-premium {
  background: var(--ink-1);
  color: var(--paper);
}
body .city-contractor-cta {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  font-weight: 600;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body .city-contractor-cta::after { content: '\2192'; transition: transform .15s; display: inline-block; }
body .city-contractor-card:hover .city-contractor-cta::after { transform: translateX(4px); }
body .city-contractors-updated {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 24px;
  text-align: right;
}

/* --- City: index page (city directory) ------------------------------ */
body section.city-directory {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}
body .city-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  overflow: hidden;
}
@media (max-width: 900px) { body .city-directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body .city-directory-grid { grid-template-columns: 1fr; } }
body a.city-directory-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 28px 32px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
body a.city-directory-card:hover { background: var(--paper-2); }
body a.city-directory-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body .city-directory-region {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--accent-2);
}
body .city-directory-name {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink-1);
  margin: 6px 0 4px;
}
body .city-directory-name em {
  font-style: italic;
  color: var(--accent-2);
}
body .city-directory-cta {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: auto;
  padding-top: 18px;
}
body .city-directory-cta::after {
  content: '\00a0\2192';
  margin-left: 2px;
  transition: transform .15s;
  display: inline-block;
}
body a.city-directory-card:hover .city-directory-cta::after { transform: translateX(3px); }

/* --- City: related cities tag-row ---------------------------------- */
body section.city-related {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  border-top: 1px solid var(--line-soft);
}
body section.city-related h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 28px;
  color: var(--ink-1);
}
body .city-related-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body a.city-related-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--ink-1);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
body a.city-related-tag:hover {
  background: var(--ink-1);
  border-color: var(--ink-1);
  color: var(--paper);
}
body a.city-related-tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- City final CTA: deep dark variant (.cta-box.cta-box-deep) ------ */
body section.cta-section .cta-box.cta-box-deep {
  background: var(--ink-1);
  color: var(--paper);
  border-radius: var(--radius-ed);
  padding: clamp(40px, 5vw, 64px);
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
  border: 0;
}
body section.cta-section .cta-box.cta-box-deep small {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  background: transparent;
  padding: 0;
  border: 0;
}
body section.cta-section .cta-box.cta-box-deep small::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
body section.cta-section .cta-box.cta-box-deep h2 {
  color: var(--paper);
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 14px;
  text-align: left;
}
body section.cta-section .cta-box.cta-box-deep p {
  color: #d8d3c4;
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 56ch;
}
body section.cta-section .cta-box.cta-box-deep a.seo-cta-btn,
body section.cta-section .cta-box.cta-box-deep .seo-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--paper);
  padding: 14px 26px;
  border-radius: var(--radius-ed-sm);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
body section.cta-section .cta-box.cta-box-deep a.seo-cta-btn:hover {
  background: var(--paper);
  color: var(--ink-1);
}
body section.cta-section .cta-box.cta-box-deep a.seo-cta-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Mobile refinements for city + SEO landing --------------------- */
@media (max-width: 600px) {
  body section.seo-hero { padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(32px, 5vw, 56px); }
  body section.seo-hero h1 { font-size: 36px; }
  body section.seo-hero > p { font-size: 17px; }
  body section.seo-section h2,
  body section.city-contractors-section h2 { font-size: 32px; }
  body .seo-step-number, body .seo-tip-number { font-size: 44px; }
  body .seo-step-content h3, body .seo-tip-item h3 { font-size: 22px; }
  body .seo-warning-item { padding: 16px 18px; }
  body .seo-warning-item h3 { font-size: 19px; }
  body .city-contractor-header { grid-template-columns: 72px 1fr; gap: 14px; }
  body .city-contractor-score { width: 72px; height: 72px; }
  body .city-contractor-score-num { font-size: 26px; }
  body .city-contractor-name { font-size: 19px; }
  body .seo-cta-box h2 { font-size: 26px; }
  body .seo-cta-box p { font-size: 15.5px; }
  body section.cta-section .cta-box.cta-box-deep { padding: 32px 24px; }
  body section.cta-section .cta-box.cta-box-deep h2 { font-size: 26px; }
}

/* ============================================================
   OPSLAG — RICH COMPANY PROFILE
   ------------------------------------------------------------
   Layout for /opslag.html (rich company profile page).
   Masthead with score ring + verdict, dimension bars,
   findings list, data sources grid, similar companies,
   sticky upsell sidebar with paper actions card.

   All selectors scoped via `body .opslag-content` to
   avoid colliding with existing `.dim` / `.dims` / `.source`
   / `.sources` rules elsewhere in this file (those style the
   index.html score-preview component). The opslag page sets
   `<main class="opslag-content">` so this scope wins by
   specificity (0,1,2 vs 0,1,0/0,1,1) without `!important`.

   Tokens only — no `--gray-*` legacy. Two verbatim hex
   tints (#d6d1c4, #a39e91) live in the dark `.upsell` card,
   ported from the original opslag design ref where they
   served as warm-paper-on-ink body/foot tones.
   ============================================================ */

/* ---------- Layout: breadcrumb + two-col grid ---------- */
body .opslag-content .crumbs {
  padding-block: 22px 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body .opslag-content .crumbs a { color: var(--ink-3); transition: color .15s; }
body .opslag-content .crumbs a:hover { color: var(--ink-1); }
body .opslag-content .crumbs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
body .opslag-content .crumbs span { color: var(--ink-4); margin-inline: 8px; }

body .opslag-content .cols {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  padding-block: 56px 80px;
}
@media (max-width: 960px) {
  body .opslag-content .cols { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Masthead ---------- */
body .opslag-content .masthead {
  padding-block: 28px 40px;
  border-bottom: 1px solid var(--line-soft);
}
body .opslag-content .masthead-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}
body .opslag-content .mh-left h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 10px 0 14px;
  text-wrap: balance;
  color: var(--ink-1);
}
body .opslag-content .mh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  color: var(--ink-2);
  padding-top: 4px;
  margin: 0;
}
body .opslag-content .mh-meta dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
  font-weight: 600;
}
body .opslag-content .mh-meta dd { margin: 0; font-size: 14.5px; color: var(--ink-1); }
body .opslag-content .mh-meta > div { min-width: 0; }

body .opslag-content .mh-tags {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
body .opslag-content .mh-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line-hard);
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
  background: transparent;
}
body .opslag-content .mh-tag.pos {
  border-color: var(--accent);
  color: var(--accent-2);
  background: var(--accent-tint);
}
body .opslag-content .mh-tag.warn {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-soft);
}
body .opslag-content .mh-tag.risk {
  border-color: var(--risk);
  color: var(--risk);
  background: var(--risk-soft);
}

/* Score card (right side of masthead) */
body .opslag-content .mh-score {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  min-width: 300px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 24px 60px -32px rgba(30, 26, 22, 0.2);
}
body .opslag-content .ring-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 20px;
  align-items: center;
}
body .opslag-content .score-ring {
  position: relative;
  width: 112px;
  height: 112px;
}
body .opslag-content .score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
body .opslag-content .score-ring .track {
  fill: none;
  stroke: var(--paper-3);
  stroke-width: 9;
}
body .opslag-content .score-ring .fill {
  fill: none;
  stroke: var(--warn);
  stroke-width: 9;
  stroke-linecap: round;
}
body .opslag-content .score-ring .fill.ok   { stroke: var(--ok); }
body .opslag-content .score-ring .fill.warn { stroke: var(--warn); }
body .opslag-content .score-ring .fill.risk { stroke: var(--risk); }
body .opslag-content .score-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}
body .opslag-content .score-value span { font-size: 13px; color: var(--ink-3); }

body .opslag-content .verdict-lab {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 5px;
}
body .opslag-content .verdict-title {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink-1);
}
body .opslag-content .verdict-title em { font-style: italic; color: var(--warn); }
body .opslag-content .verdict-title em.ok   { color: var(--accent-2); }
body .opslag-content .verdict-title em.warn { color: var(--warn); }
body .opslag-content .verdict-title em.risk { color: var(--risk); }
body .opslag-content .verdict-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 860px) {
  body .opslag-content .masthead-grid { grid-template-columns: 1fr; }
  body .opslag-content .mh-score { min-width: 0; }
}

/* ---------- Section heads (reusable inside opslag) ---------- */
body .opslag-content .sec { margin-bottom: 56px; }
body .opslag-content .sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
body .opslag-content .sec-head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  color: var(--ink-1);
}
body .opslag-content .sec-head h2 em { font-style: italic; color: var(--accent-2); }
body .opslag-content .sec-num {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
body .opslag-content .sec-intro {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 0 28px;
}

/* ---------- Dimension bars (6 axes) ---------- */
body .opslag-content .dims {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
}
body .opslag-content .dim {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-soft);
}
body .opslag-content .dim:last-child { border-bottom: 0; }
body .opslag-content .dim-name {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 500;
}
body .opslag-content .dim-name small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 600;
}
body .opslag-content .bar {
  height: 7px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
body .opslag-content .bar::after {
  content: '';
  position: absolute;
  left: 70%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--line-hard);
  opacity: 0.6;
}
body .opslag-content .bar-fill {
  height: 100%;
  border-radius: 999px;
}
body .opslag-content .bar-fill.ok   { background: var(--ok); }
body .opslag-content .bar-fill.warn { background: var(--warn); }
body .opslag-content .bar-fill.risk { background: var(--risk); }
body .opslag-content .dim-val {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 600;
  min-width: 48px;
  text-align: right;
}
body .opslag-content .dim-note {
  grid-column: 2 / 4;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.45;
  padding-top: 4px;
  font-family: var(--f-serif);
  font-style: italic;
}

/* ---------- Findings list ---------- */
body .opslag-content .findings {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
body .opslag-content .finding {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
body .opslag-content .find-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
body .opslag-content .find-icon.ok   { background: var(--ok-soft);   color: var(--accent-2); }
body .opslag-content .find-icon.warn { background: var(--warn-soft); color: var(--warn); }
body .opslag-content .find-icon.risk { background: var(--risk-soft); color: var(--risk); }
body .opslag-content .find-body h4 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink-1);
}
body .opslag-content .find-body p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
body .opslag-content .find-source {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
  padding-top: 6px;
}
@media (max-width: 620px) {
  body .opslag-content .finding { grid-template-columns: 36px 1fr; }
  body .opslag-content .find-source { grid-column: 2; padding-top: 2px; white-space: normal; }
}

/* ---------- Data sources grid ---------- */
body .opslag-content .sources {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
body .opslag-content .source {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  flex-direction: row;
  min-height: 0;
}
body .opslag-content .source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
body .opslag-content .source small {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 2px;
}
@media (max-width: 720px) {
  body .opslag-content .sources { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Similar companies ---------- */
body .opslag-content .similar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body .opslag-content .similar-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 20px;
  transition: border-color .15s, transform .15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
body .opslag-content .similar-card:hover { border-color: var(--ink-2); }
body .opslag-content .similar-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body .opslag-content .sim-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
body .opslag-content .sim-head h4 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink-1);
}
body .opslag-content .sim-head small {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  display: block;
  margin-top: 3px;
}
body .opslag-content .sim-score {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  flex-shrink: 0;
}
body .opslag-content .sim-score.ok   { color: var(--accent-2); }
body .opslag-content .sim-score.warn { color: var(--warn); }
body .opslag-content .sim-score.risk { color: var(--risk); }
body .opslag-content .sim-meta {
  font-size: 13px;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  body .opslag-content .similar { grid-template-columns: 1fr; }
}

/* ---------- Sidebar (sticky) ---------- */
body .opslag-content .side {
  position: sticky;
  top: 96px;
  align-self: start;
}

/* Upsell card — dark ink, radial accent glow */
body .opslag-content .upsell {
  background: var(--ink-1);
  color: var(--paper);
  border-radius: 18px;
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
}
body .opslag-content .upsell::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}
body .opslag-content .upsell .eyebrow { color: var(--accent-soft); }
body .opslag-content .upsell .eyebrow::before { background: var(--accent-soft); }
body .opslag-content .upsell h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 14px 0 10px;
  color: var(--paper);
}
body .opslag-content .upsell h3 em { font-style: italic; color: var(--accent-soft); }
body .opslag-content .upsell p {
  font-size: 14px;
  color: #d6d1c4;
  line-height: 1.55;
  margin: 0 0 18px;
}
body .opslag-content .upsell ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 8px;
}
body .opslag-content .upsell li {
  font-size: 13.5px;
  color: #d6d1c4;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
body .opslag-content .upsell li svg {
  color: var(--accent-soft);
  flex-shrink: 0;
  margin-top: 3px;
}
body .opslag-content .upsell-price {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 600;
  margin-bottom: 10px;
}
body .opslag-content .upsell-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  color: var(--ink-1);
  padding: 14px 20px;
  border-radius: 10px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  border: 0;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
body .opslag-content .upsell-cta:hover { background: var(--accent-soft); }
body .opslag-content .upsell-cta:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
body .opslag-content .upsell-foot {
  margin-top: 12px;
  font-size: 11.5px;
  color: #a39e91;
  text-align: center;
}

/* Actions card — paper, below upsell */
body .opslag-content .actions-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 20px;
  margin-top: 20px;
}
body .opslag-content .actions-card h4 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
body .opslag-content .action-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink-1);
  text-decoration: none;
  transition: color .15s;
}
body .opslag-content .action-link:last-child { border-bottom: 0; }
body .opslag-content .action-link:hover { color: var(--accent-2); }
body .opslag-content .action-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
body .opslag-content .action-link span {
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---------- Reduced-motion: belt-and-braces (global override
   already neutralises transitions, but explicit clauses make
   intent obvious for future maintainers) ---------- */
@media (prefers-reduced-motion: reduce) {
  body .opslag-content .similar-card,
  body .opslag-content .upsell-cta,
  body .opslag-content .action-link,
  body .opslag-content .crumbs a {
    transition: none;
  }
  body .opslag-content .similar-card:hover { transform: none; }
}

/* ============================================================
/*    LIVE SCAN LOADER — editorial loading state
   ------------------------------------------------------------
   Replaces spinner med en transparent live-feed af de 8 datakilder
   der scannes når en CVR slås op. Sourced fra Bygpas Søger-design
   (2026-04-25). Wired til resultat.js.

   Brand-tokens reuse:
     - --paper, --paper-2, --line, --line-soft, --line-hard
     - --ink-1..4, --accent, --accent-2, --accent-tint
     - --warn (til scanning state), --f-display, --f-mono, --f-serif
   ============================================================ */

#loading-state.loading-state {
  /* Override legacy centered-spinner layout (style.css .loading-state has
     text-align:center + padding:64px 24px). */
  display: none;
  padding: 0;
  background: var(--bg);
  min-height: 60vh;
  text-align: left;
}
#loading-state.loading-state:not(.hidden) { display: block; }

body #loading-state .scan-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 48px) 80px;
}

/* Search shell — locked input view "now scanning" */
body #loading-state .search-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 12px 32px -20px rgba(30,26,22,0.1);
}
body #loading-state .search-shell .search-icon {
  color: var(--ink-3);
  flex-shrink: 0;
}
body #loading-state .search-shell-text {
  flex: 1;
  font-size: 17px;
  color: var(--ink-1);
  font-weight: 500;
  padding: 14px 0;
  font-family: var(--f-sans);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body #loading-state .search-shell-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-right: 10px;
  flex-shrink: 0;
}
body #loading-state .search-shell-btn {
  padding: 13px 20px;
  border-radius: 10px;
  background: var(--ink-1);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  font-family: var(--f-sans);
  flex-shrink: 0;
  transition: background 0.15s;
}
body #loading-state .search-shell-btn:hover { background: var(--accent-2); }
body #loading-state .search-shell-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Scan header — title left + meter right */
body #loading-state .scan-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
body #loading-state .scan-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-2);
  font-weight: 600;
  margin-bottom: 18px;
}
body #loading-state .scan-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent-2);
}
body #loading-state .scan-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: scan-pulse 1.2s ease-out infinite;
}
@keyframes scan-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 104, 57, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(79, 104, 57, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 104, 57, 0); }
}
body #loading-state .scan-title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 12px;
  text-wrap: balance;
  color: var(--ink-1);
}
body #loading-state .scan-title em {
  font-style: italic;
  color: var(--accent-2);
}
body #loading-state .scan-deck {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 420px;
  margin: 0;
}

/* Live progress meter (right column) */
body #loading-state .scan-meter {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
}
body #loading-state .scan-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
body #loading-state .scan-meter-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
body #loading-state .scan-meter-count {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}

/* ============================================================
   RAPPORT — RICH FULL REPORT LAYOUT
   ------------------------------------------------------------
   Editorial weekend-magazine treatment for the paid 49-kr
   Bygpas-rapport. Reader is sitting down with a freshly
   pulled report — printable, foldable, foot-noted.

   Layout: 240px sticky TOC + 1fr body. On <1100px, TOC
   collapses to an inline accordion above body. Cover page
   is full-bleed, paper-2 stock, page-break-after for print.

   All component classes scoped via `body .rapport-content`
   to inherit editorial tokens and avoid leaking onto the
   legacy result-container subtree.

   Print: 8 sections, page-break-before per section, hairline
   borders forced to #999 for monochrome print, color-coded
   bar fills preserved with -webkit-print-color-adjust.
   ============================================================ */

/* ---------- Outer container + 2-col grid ---------- */
body .rapport-content {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 32px 80px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
  font-family: var(--f-sans);
  color: var(--ink-1);
}

/* ---------- COVER PAGE (full-bleed, paper-2 stock) ---------- */
body .rapport-content .rapport-cover {
  grid-column: 1 / -1;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 72px);
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
body .rapport-content .rapport-cover::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-tint) 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}
body .rapport-content .cover {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
body .rapport-content .cover-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
body .rapport-content .cover-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
body .rapport-content .cover-title {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink-1);
}
body .rapport-content .cover-title em {
  font-style: italic;
  color: var(--accent-2);
}
body .rapport-content .cover-sub {
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 22px 0 0;
  max-width: 44ch;
}

/* Cover-side block: oversized score-ring + verdict */
body .rapport-content .cover-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
body .rapport-content .cover-score-ring {
  position: relative;
  width: 180px;
  height: 180px;
}
body .rapport-content .cover-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
body .rapport-content .cover-score-ring .track {
  fill: none;
  stroke: var(--paper-3);
  stroke-width: 12;
}
body .rapport-content .cover-score-ring .fill {
  fill: none;
  stroke: var(--warn);
  stroke-width: 12;
  stroke-linecap: round;
}
body .rapport-content .cover-score-ring .fill.ok   { stroke: var(--ok); }
body .rapport-content .cover-score-ring .fill.warn { stroke: var(--warn); }
body .rapport-content .cover-score-ring .fill.risk { stroke: var(--risk); }
body .rapport-content .cover-score-ring .score-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
}
body #loading-state .scan-meter-count em {
  font-style: italic;
  color: var(--ink-3);
  font-size: 20px;
}
body #loading-state .scan-meter-bar {
  height: 3px;
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
body #loading-state .scan-meter-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body #loading-state .scan-meter-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
body #loading-state .scan-meter-time {
  color: var(--ink-2);
  font-weight: 600;
}

/* Source grid label */
body #loading-state .scan-grid-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
body #loading-state .scan-grid-label-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
body #loading-state .scan-grid-label-right span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body #loading-state .scan-grid-label-right i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-4);
  font-style: normal;
}
body #loading-state .scan-grid-label-right .done i { background: var(--accent); }
body #loading-state .scan-grid-label-right .scan i {
  background: var(--warn);
  animation: scan-pulse-dot 1s infinite;
}
@keyframes scan-pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* The 8-source grid */
body #loading-state .scan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
body #loading-state .scan-row {
  background: var(--paper);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: center;
  transition: background 0.3s ease;
  position: relative;
}
body #loading-state .scan-row[data-state="done"] {
  background: var(--paper);
}
body #loading-state .scan-row[data-state="scanning"] {
  background: linear-gradient(90deg, var(--paper) 0%, #fffaed 50%, var(--paper) 100%);
  background-size: 200% 100%;
  animation: scan-sweep 1.4s linear infinite;
}
@keyframes scan-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
body #loading-state .scan-row[data-state="pending"] .scan-row-name,
body #loading-state .scan-row[data-state="pending"] .scan-row-detail {
  color: var(--ink-4);
}

body #loading-state .scan-row-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
body #loading-state .scan-row[data-state="pending"] .scan-row-indicator {
  border: 1px dashed var(--line-hard);
}
body #loading-state .scan-row[data-state="pending"] .scan-row-indicator svg {
  display: none;
}
body #loading-state .scan-row[data-state="scanning"] .scan-row-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--warn);
  border-right-color: var(--warn);
  border-radius: 50%;
  animation: scan-spin 0.8s linear infinite;
}
body #loading-state .scan-row[data-state="scanning"] .scan-row-indicator svg {
  display: none;
}
@keyframes scan-spin {
  to { transform: rotate(360deg); }
}
body #loading-state .scan-row[data-state="done"] .scan-row-indicator {
  background: var(--accent);
  color: var(--paper);
  animation: scan-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scan-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
body #loading-state .scan-row[data-state="done"] .scan-row-indicator svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body #loading-state .scan-row-body { min-width: 0; }
body #loading-state .scan-row-name {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
body #loading-state .scan-row-detail {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.4;
  min-height: 18px;
  font-family: var(--f-sans);
}
body #loading-state .scan-row[data-state="done"] .scan-row-detail strong {
  color: var(--ink-1);
  font-weight: 600;
}
body #loading-state .scan-row[data-state="done"] .scan-row-detail {
  animation: scan-fade-in 0.4s ease;
}
@keyframes scan-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
body #loading-state .scan-row[data-state="scanning"] .scan-row-detail::after {
  content: '...';
  display: inline-block;
  font-family: var(--f-mono);
  color: var(--warn);
  margin-left: 2px;
}

body #loading-state .scan-row-timing {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-align: right;
  opacity: 0.7;
}
body #loading-state .scan-row[data-state="done"] .scan-row-timing {
  color: var(--accent);
  opacity: 1;
  font-weight: 600;
}

/* Trust note below the grid */
body #loading-state .scan-assurance {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-2);
  font-family: var(--f-sans);
}
body #loading-state .scan-assurance-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
body #loading-state .scan-assurance strong {
  color: var(--ink-1);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* Complete state — slides in når alle 8 er done */
body #loading-state .scan-complete {
  display: none;
  margin-top: 40px;
  padding: 32px 36px;
  background: linear-gradient(140deg, var(--paper) 0%, var(--accent-tint) 100%);
  border: 1px solid var(--accent-soft);
  border-radius: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  animation: scan-slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body #loading-state .scan-complete.show { display: flex; }
@keyframes scan-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
body #loading-state .scan-complete-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 8px;
}
body #loading-state .scan-complete-title {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 6px;
  color: var(--ink-1);
}
body #loading-state .scan-complete-sub {
  font-size: 14px;
  color: var(--ink-2);
  font-family: var(--f-sans);
}
body #loading-state .scan-complete-sub em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--warn);
}
body #loading-state .scan-complete-sub em.tone-ok { color: var(--accent-2); }
body #loading-state .scan-complete-sub em.tone-risk { color: var(--risk); }
body #loading-state .scan-complete-btn {
  padding: 14px 22px;
  background: var(--ink-1);
  color: var(--paper);
  border-radius: 10px;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--f-sans);
  transition: background 0.15s;
}
body #loading-state .scan-complete-btn:hover { background: var(--accent-2); }
body #loading-state .scan-complete-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile refinements */
@media (max-width: 880px) {
  body #loading-state .scan-header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body #loading-state .scan-deck { max-width: 100%; }
}
@media (max-width: 600px) {
  body #loading-state .scan-grid {
    grid-template-columns: 1fr;
  }
  body #loading-state .scan-row {
    padding: 16px 18px;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  body #loading-state .scan-row-timing {
    grid-column: 2;
    text-align: left;
  }
  body #loading-state .scan-complete {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 22px;
  }
  body #loading-state .search-shell-meta { display: none; }
  body #loading-state .scan-grid-label-right span:not(:last-child) {
    display: none;
  }
}

/* Reduced motion — kill animations, keep states */
@media (prefers-reduced-motion: reduce) {
  body #loading-state .scan-pulse,
  body #loading-state .scan-grid-label-right .scan i,
  body #loading-state .scan-row[data-state="scanning"],
  body #loading-state .scan-row[data-state="scanning"] .scan-row-indicator::before,
  body #loading-state .scan-row[data-state="done"] .scan-row-indicator,
  body #loading-state .scan-row[data-state="done"] .scan-row-detail,
  body #loading-state .scan-meter-bar-fill,
  body #loading-state .scan-complete {
    animation: none !important;
    transition: none !important;
  }
  body #loading-state .scan-row[data-state="scanning"] {
    background: var(--paper-2) !important;
  }
}

/* Visually hidden but accessible to screen-readers */
body .sr-only,
body #loading-state .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body .rapport-content .cover-score-ring .score-value span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 6px;
  display: block;
  text-align: center;
}

body .rapport-content .cover-verdict {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 24px 28px;
  width: 100%;
  box-shadow: 0 24px 60px -32px rgba(30, 26, 22, 0.18);
}
body .rapport-content .cover-verdict-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 6px;
}
body .rapport-content .cover-verdict-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink-1);
}
body .rapport-content .cover-verdict-title em { font-style: italic; color: var(--warn); }
body .rapport-content .cover-verdict-title.ok em   { color: var(--accent-2); }
body .rapport-content .cover-verdict-title.warn em { color: var(--warn); }
body .rapport-content .cover-verdict-title.risk em { color: var(--risk); }
body .rapport-content .cover-verdict-text {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

body .rapport-content .cover-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
body .rapport-content .cover-meta dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 4px;
}
body .rapport-content .cover-meta dd {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 500;
}

/* ---------- TOC SIDEBAR (sticky 240px column) ---------- */
body .rapport-content .rapport-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  font-family: var(--f-sans);
}
body .rapport-content .rapport-toc-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
body .rapport-content .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: rapport-toc;
}
body .rapport-content .toc-list li {
  counter-increment: rapport-toc;
  margin: 0;
  padding: 0;
}
body .rapport-content .toc-link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  border-radius: 6px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body .rapport-content .toc-link:hover {
  color: var(--ink-1);
  border-bottom-color: var(--line-hard);
}
body .rapport-content .toc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body .rapport-content .toc-link.active {
  background: var(--ink-1);
  color: var(--paper);
  border-bottom-color: transparent;
}
body .rapport-content .toc-num {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0.1em;
}
body .rapport-content .toc-link.active .toc-num { color: var(--accent-soft); }
body .rapport-content .toc-name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: inherit;
  white-space: normal;
  line-height: 1.4;
}

/* ---------- BODY COLUMN (rich prose) ---------- */
body .rapport-content .rapport-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* ---------- SECTION SHELL ---------- */
body .rapport-content .rapport-section {
  margin-bottom: 80px;
  scroll-margin-top: 96px;
}
body .rapport-content .rapport-section-head {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
body .rapport-content .rapport-section-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  padding-top: 16px;
}
body .rapport-content .rapport-section-num strong {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-2);
  margin-bottom: 4px;
  text-transform: none;
}
body .rapport-content .rapport-section-head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin: 0 0 12px;
}
body .rapport-content .rapport-section-head h2 em {
  font-style: italic;
  color: var(--accent-2);
}
body .rapport-content .rapport-section-intro {
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}

body .rapport-content .rapport-section-body {
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-1);
}
body .rapport-content .rapport-section-body p {
  margin: 0 0 18px;
  max-width: 68ch;
}
body .rapport-content .rapport-section-body h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 36px 0 16px;
}
body .rapport-content .rapport-section-body h3 em { font-style: italic; color: var(--accent-2); }
body .rapport-content .rapport-section-body h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 28px 0 12px;
}
body .rapport-content .rapport-section-body strong { font-weight: 600; color: var(--ink-1); }

/* Aside / callout box (paper-2, hairline accent border) */
body .rapport-content .rapport-section-aside {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-ed-sm);
  padding: 22px 26px;
  margin: 28px 0;
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
body .rapport-content .rapport-section-aside h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-2);
  margin: 0 0 10px;
}
body .rapport-content .rapport-section-aside p { margin: 0 0 10px; }
body .rapport-content .rapport-section-aside p:last-child { margin: 0; }

/* ---------- DIMENSIONS — RICH (3-col with detail + recommendation) ---------- */
body .rapport-content .dim-rich {
  display: grid;
  grid-template-columns: 220px 200px 1fr;
  gap: 28px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
}
body .rapport-content .dim-rich:first-of-type { border-top: 1px solid var(--line); }
body .rapport-content .dim-rich .dim-name {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.3;
}
body .rapport-content .dim-rich .dim-weight {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 4px;
}
body .rapport-content .dim-rich .dim-score-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
body .rapport-content .dim-rich .dim-score-big {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink-1);
}
body .rapport-content .dim-rich .dim-score-big.ok   { color: var(--ok); }
body .rapport-content .dim-rich .dim-score-big.warn { color: var(--warn); }
body .rapport-content .dim-rich .dim-score-big.risk { color: var(--risk); }
body .rapport-content .dim-rich .dim-bar-rich {
  width: 100%;
  height: 12px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
body .rapport-content .dim-rich .dim-bar-rich::before,
body .rapport-content .dim-rich .dim-bar-rich::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--line-hard);
}
body .rapport-content .dim-rich .dim-bar-rich::before { left: 30%; }
body .rapport-content .dim-rich .dim-bar-rich::after  { left: 70%; }
body .rapport-content .dim-rich .bar-fill {
  height: 100%;
  border-radius: 999px;
}
body .rapport-content .dim-rich .bar-fill.ok   { background: var(--ok); }
body .rapport-content .dim-rich .bar-fill.warn { background: var(--warn); }
body .rapport-content .dim-rich .bar-fill.risk { background: var(--risk); }

body .rapport-content .dim-rich .dim-detail {
  font-family: var(--f-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
}
body .rapport-content .dim-rich .dim-recommendation {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--accent-2);
  margin: 0;
  padding: 12px 16px;
  background: var(--accent-tint);
  border-radius: var(--radius-ed-sm);
  border-left: 2px solid var(--accent-2);
}
body .rapport-content .dim-rich .dim-recommendation::before {
  content: 'Anbefaling';
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 4px;
  opacity: 0.85;
}

/* ---------- FINANCIALS TABLE (hairline rows, mono numerics) ---------- */
body .rapport-content .fin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-sans);
  font-size: 14px;
  margin: 12px 0 20px;
}
body .rapport-content .fin-table th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  text-align: right;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-1);
}
body .rapport-content .fin-table th:first-child { text-align: left; }
body .rapport-content .fin-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  color: var(--ink-1);
}
body .rapport-content .fin-table td:first-child {
  text-align: left;
  font-weight: 500;
  font-family: var(--f-sans);
}
body .rapport-content .fin-table td small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
}
body .rapport-content .fin-table tbody tr:hover { background: var(--paper); }
body .rapport-content .fin-positive {
  color: var(--ok);
  font-family: var(--f-mono);
  font-weight: 600;
}
body .rapport-content .fin-negative {
  color: var(--risk);
  font-family: var(--f-mono);
  font-weight: 600;
}
body .rapport-content .fin-trend {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
}
body .rapport-content .fin-trend span {
  display: inline-block;
  width: 4px;
  background: var(--ink-3);
  border-radius: 1px;
  opacity: 0.6;
}
body .rapport-content .fin-trend.ok   span { background: var(--ok); }
body .rapport-content .fin-trend.warn span { background: var(--warn); }
body .rapport-content .fin-trend.risk span { background: var(--risk); }

/* ---------- OWNERSHIP TREE (hairline connectors, paper cards) ---------- */
body .rapport-content .owner-tree {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed);
  padding: 28px 30px;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body .rapport-content .owner-node {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  position: relative;
}
body .rapport-content .owner-node + .owner-node {
  border-top: 1px solid var(--line-soft);
}
body .rapport-content .owner-node.is-child {
  padding-left: 44px;
  position: relative;
  margin-left: 18px;
  border-top: 0;
}
body .rapport-content .owner-node.is-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 50%;
  width: 1px;
  background: var(--line-hard);
}
body .rapport-content .owner-node.is-child::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--line-hard);
}
body .rapport-content .owner-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-2);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 18px;
  font-style: italic;
  flex-shrink: 0;
}
body .rapport-content .owner-badge.is-person {
  background: var(--paper-2);
  color: var(--ink-1);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
}
body .rapport-content .owner-info {
  min-width: 0;
}
body .rapport-content .owner-info h5 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
body .rapport-content .owner-info small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
body .rapport-content .owner-share {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
}

/* ---------- REVIEW BREAKDOWN (themed excerpts) ---------- */
body .rapport-content .review-themes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}
body .rapport-content .review-theme {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed-sm);
  padding: 20px 22px;
}
body .rapport-content .review-theme-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
body .rapport-content .review-theme-head h5 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
body .rapport-content .review-theme-count {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink-3);
}
body .rapport-content .review-theme.ok   .review-theme-count { background: var(--ok-soft);   color: var(--accent-2); }
body .rapport-content .review-theme.warn .review-theme-count { background: var(--warn-soft); color: var(--warn); }
body .rapport-content .review-theme.risk .review-theme-count { background: var(--risk-soft); color: var(--risk); }
body .rapport-content .review-theme-sample {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 6px;
}
body .rapport-content .review-theme-meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 8px 0 0;
}

/* ---------- MEETING CHECKLIST (paper cards + checkbox) ---------- */
body .rapport-content .checklist {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body .rapport-content .checklist-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed-sm);
  padding: 18px 22px;
}
body .rapport-content .checklist-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink-1);
  border-radius: 6px;
  margin: 2px 0 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--paper);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
body .rapport-content .checklist-item input[type="checkbox"]:checked {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
body .rapport-content .checklist-item input[type="checkbox"]:checked::after {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg) translate(1px, -1px);
}
body .rapport-content .checklist-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body .rapport-content .checklist-item label {
  cursor: pointer;
  display: block;
}
body .rapport-content .checklist-question {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0 0 6px;
  display: block;
}
body .rapport-content .checklist-helper {
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  display: block;
}
body .rapport-content .checklist-why {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* ---------- RECOMMENDATIONS — RICH (oversized italic numerals) ---------- */
body .rapport-content .rec-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}
body .rapport-content .rec-item:first-of-type { border-top: 1px solid var(--line); }
body .rapport-content .rec-item-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--accent-2);
}
body .rapport-content .rec-item h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin: 0 0 10px;
}
body .rapport-content .rec-item h3 em { font-style: italic; color: var(--accent-2); }
body .rapport-content .rec-item-body {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}
body .rapport-content .rec-priority {
  display: inline-block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-3);
  margin-top: 10px;
}
body .rapport-content .rec-priority.high { background: var(--risk); }
body .rapport-content .rec-priority.med  { background: var(--warn); }
body .rapport-content .rec-priority.low  { background: var(--ok); }

/* ---------- CONTRACT CLAUSES (paper card with quote + commentary) ---------- */
body .rapport-content .clause {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-ed-sm);
  padding: 24px 28px;
  margin: 16px 0;
}
body .rapport-content .clause-eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 10px;
}
body .rapport-content .clause-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-1);
  margin: 0 0 14px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--accent-2);
}
body .rapport-content .clause-rec {
  font-family: var(--f-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
body .rapport-content .clause-rec strong {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-2);
  display: block;
  margin-bottom: 4px;
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 1100px) {
  body .rapport-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body .rapport-content .rapport-toc {
    position: static;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-ed);
    padding: 20px 24px;
  }
  body .rapport-content .toc-list {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 4px;
  }
}
@media (max-width: 860px) {
  body .rapport-content .cover {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body .rapport-content .cover-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  body .rapport-content .rapport-section-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body .rapport-content .rapport-section-num strong { font-size: 44px; }
  body .rapport-content .review-themes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body .rapport-content {
    padding-block: 24px 56px;
  }
  body .rapport-content .rapport-cover {
    padding: 32px 22px;
    margin-bottom: 36px;
  }
  body .rapport-content .cover-title { font-size: clamp(44px, 12vw, 64px); }
  body .rapport-content .cover-meta { grid-template-columns: 1fr; }
  body .rapport-content .dim-rich {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body .rapport-content .rec-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  body .rapport-content .rec-item-num { font-size: 48px; }
  body .rapport-content .toc-list { grid-template-columns: 1fr; }
  body .rapport-content .owner-node {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }
  body .rapport-content .owner-share {
    grid-column: 2;
    margin-top: 4px;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  body .rapport-content .toc-link,
  body .rapport-content .checklist-item input[type="checkbox"],
  body .rapport-content .fin-table tbody tr {
    transition: none;
  }
}

/* ---------- PRINT (CRITICAL — paid users print/save PDF) ---------- */
@media print {
  body { background: white; color: black; }
  body .rapport-content {
    grid-template-columns: 1fr;
    max-width: none;
    padding: 0;
    gap: 0;
  }
  body .rapport-content .rapport-toc,
  body nav.nav,
  body footer.footer,
  body .footer {
    display: none !important;
  }
  body .rapport-content .rapport-cover {
    page-break-after: always;
    background: white;
    border: 1px solid #999 !important;
    box-shadow: none;
  }
  body .rapport-content .rapport-cover::before { display: none; }
  body .rapport-content .rapport-section {
    page-break-before: always;
    page-break-inside: avoid;
    margin-bottom: 0;
    padding-block: 24px 12px;
  }
  body .rapport-content .rapport-section:first-of-type {
    page-break-before: auto;
  }
  body .rapport-content .rapport-section-head {
    page-break-after: avoid;
  }
  body .rapport-content .rapport-section-body p,
  body .rapport-content .rapport-section-body h3,
  body .rapport-content .rapport-section-body h4 {
    page-break-inside: avoid;
  }
  body .rapport-content .checklist-item,
  body .rapport-content .clause,
  body .rapport-content .review-theme,
  body .rapport-content .owner-node,
  body .rapport-content .rec-item,
  body .rapport-content .dim-rich {
    page-break-inside: avoid;
  }
  /* Hairline borders forced for monochrome print */
  body .rapport-content .dim-rich,
  body .rapport-content .clause,
  body .rapport-content .checklist-item,
  body .rapport-content .review-theme,
  body .rapport-content .owner-tree,
  body .rapport-content .rapport-section-aside,
  body .rapport-content .cover-verdict {
    border: 1px solid #999 !important;
    background: white !important;
    box-shadow: none !important;
  }
  /* Color preservation for bars + status */
  body .rapport-content .checklist-item input[type="checkbox"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body .rapport-content .bar-fill,
  body .rapport-content .fin-trend span,
  body .rapport-content .rec-priority,
  body .rapport-content .cover-score-ring .fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body .rapport-content .bar-fill.ok   { background: #4f6839 !important; }
  body .rapport-content .bar-fill.warn { background: #9a6b1d !important; }
  body .rapport-content .bar-fill.risk { background: #b03a2e !important; }
  body .rapport-content .fin-positive { color: #4f6839 !important; }
  body .rapport-content .fin-negative { color: #b03a2e !important; }
  body .rapport-content .rec-priority.high { background: #b03a2e !important; }
  body .rapport-content .rec-priority.med  { background: #9a6b1d !important; }
  body .rapport-content .rec-priority.low  { background: #4f6839 !important; }
  /* Avoid bleeding ink in headers */
  body .rapport-content .rapport-section-head h2,
  body .rapport-content .cover-title,
  body .rapport-content .rapport-section-num strong {
    color: black !important;
  }
  body .rapport-content .rapport-section-num strong,
  body .rapport-content .cover-title em,
  body .rapport-content .rec-item-num {
    color: #3d5128 !important;
  }
  /* Drop sticky behaviour entirely */
  body .rapport-content .rapport-toc,
  body .rapport-content { position: static; }
}