/* ==========================================================================
   /kunder/<slug>/ — Kunde-cases (delt layout)
   Bogforum, Copenhagen Comics og kommende cases. Citatdrevet,
   Struktur: "hvad vi løser" + features-liste.
   Genbruger token-systemet og strukturmønsteret fra /om/ og /ai/filosofi/.
   ========================================================================== */

.case-page {}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */

/* ── Hero — split: copy + featured citat ──────────────────────────────── */
.case-hero {
  position: relative;
  padding: var(--space-2xl) 0 var(--space-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(184,90,58,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(127,168,182,0.08) 0%, transparent 60%);
}
.case-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.case-hero__copy {
  max-width: 600px;
}
.case-hero__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184,90,58,0.12);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-l);
}
.case-hero__title {
  font-family: var(--font);
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--brand-primary);
  margin: 0 0 var(--space-s);
}
.case-hero__type {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-l);
}
.case-hero__pitch {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--text);
  max-width: 56ch;
  margin: 0 0 var(--space-l);
}
.case-hero__pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.case-hero__pills li {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
}

/* Featured quote — stort citat ved siden af heroen */
.case-hero__quote {
  position: relative;
  padding: var(--space-xl);
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(49,79,89,0.08);
  max-width: 480px;
  margin-left: auto;
}
.case-hero__quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(184,90,58,0.42) 0%, rgba(127,168,182,0.32) 100%);
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.case-hero__mark {
  position: absolute;
  top: -16px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 20px rgba(184,90,58,0.40);
  animation: caseMarkPulse 3.6s ease-in-out infinite;
}
@keyframes caseMarkPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(184,90,58,0.35); }
  50%      { transform: scale(1.06); box-shadow: 0 8px 28px rgba(184,90,58,0.55), 0 0 0 6px rgba(184,90,58,0.10); }
}
/* Hero-quote-card løftes ved hover — eneste store overflade uden hover */
.case-hero__quote {
  transition: transform .3s ease, box-shadow .3s ease;
}
.case-hero__quote:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(49,79,89,0.14);
}
.case-hero__quote blockquote {
  margin: var(--space-s) 0 var(--space-m);
  padding: 0;
}
.case-hero__quote blockquote p {
  font-family: var(--font);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--text);
  margin: 0;
  font-style: italic;
}
.case-hero__quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-s);
  border-top: 1px solid var(--border);
}
.case-hero__quote-author {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text);
}
.case-hero__quote-role {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Quick facts — vandret strip ─────────────────────────────────────── */
.case-section--facts {
  padding: var(--space-l) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.case-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-l) var(--space-2xl);
}
.case-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--space-m);
  border-left: 2px solid var(--border);
  transition: border-color .25s;
}
.case-fact:hover { border-left-color: var(--accent); }
.case-fact__label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-fact__value {
  font-family: var(--font);
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
  line-height: 1.3;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.case-section {
  padding: var(--space-xl) 0;
}
.case-section--subtle {
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, var(--brand-primary)) 100%);
  position: relative;
}
.case-section--subtle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(49,79,89,0.07) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.5;
  pointer-events: none;
}
.case-section--subtle > * { position: relative; z-index: 1; }


/* Keyframes: subtilt float på hero-quote + pulse på case-features tjek-cirkler. */
@keyframes caseHeroQuoteFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes caseFeatureCheckPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,136,60,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(0,136,60,0.12); }
}
/* Hero-quote-card svæver langsomt — samme blide rytme som om-figure-nod */
.case-hero__quote {
  animation: caseHeroQuoteFloat 8s ease-in-out infinite;
}
/* Tjek-cirklerne pulser blidt så øjet fanger dem som "aktive" */
.case-features li > span[aria-hidden] {
  animation: caseFeatureCheckPulse 5.6s ease-in-out infinite;
}
.case-features li:nth-child(2n) > span[aria-hidden] { animation-delay: 0.7s; }
.case-features li:nth-child(3n) > span[aria-hidden] { animation-delay: 1.4s; }

.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-l);
}

.case-section__head {
  font-family: var(--font);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-l);
  color: var(--text);
}
.case-section__head--center { text-align: center; }
.case-section__lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 var(--space-l);
}
.case-section__note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: var(--space-l) 0 0;
}

/* ── Case-block — tema + body + citat ────────────────────────────────── */
.case-block {
  margin: 0 0 var(--space-xl);
  padding: 0 0 var(--space-xl);
  border-bottom: 1px solid var(--border);
}
.case-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.case-block__title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-s);
  color: var(--brand-primary);
  line-height: 1.3;
}
.case-block__body {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 var(--space-m);
  max-width: 60ch;
}
.case-block__quote {
  margin: 0;
  padding: var(--space-m) var(--space-l);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.case-block__quote p {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  font-style: italic;
}

/* ── Invite-flow — 5-trins diagram, kerne-USP-sektion ────────────────── */
.case-section--flow {
  padding: var(--space-xl) 0;
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.case-flow__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184,90,58,0.12);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-m);
}
.case-flow {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 var(--space-xl);
  position: relative;
}
/* Vertikal forbindelse mellem trinene — tegnes med ::before bag numrene */
.case-flow::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(184,90,58,0.55) 0%,
    rgba(127,168,182,0.45) 50%,
    rgba(184,90,58,0.55) 100%);
  border-radius: 1px;
  z-index: 0;
}
.case-flow__step {
  display: grid;
  grid-template-columns: 48px 56px 1fr;
  gap: var(--space-m);
  align-items: flex-start;
  padding: var(--space-m) 0;
  position: relative;
  z-index: 1;
}
.case-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 4px var(--bg);
}
.case-flow__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: rgba(127,168,182,0.14);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .25s, color .25s, transform .25s;
}
.case-flow__icon svg { width: 26px; height: 26px; }
.case-flow__step:hover .case-flow__icon {
  background: rgba(184,90,58,0.16);
  color: var(--accent);
  transform: rotate(-3deg) scale(1.05);
}
.case-flow__title {
  font-size: 18px;
  font-weight: var(--fw-bold);
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.35;
}
.case-flow__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}
.case-flow__body code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: rgba(127,168,182,0.14);
  color: var(--brand-primary);
  font-weight: var(--fw-medium);
}
.case-flow__body strong { color: var(--text); font-weight: var(--fw-bold); }

/* Resultat — Før / Nu / Det utænkelige (3-kolonne fortælling i stedet for tal) */
.case-flow__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-m);
  margin: var(--space-xl) 0 var(--space-l);
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.case-flow__result {
  padding: var(--space-m);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border);
  transition: background .2s, border-color .2s;
}
.case-flow__result:hover {
  background: var(--bg);
  border-left-color: var(--brand-primary);
}
.case-flow__result--strong {
  background: var(--bg);
  border-left-color: var(--accent);
}
.case-flow__result--strong:hover { border-left-color: var(--accent); }
.case-flow__result-label {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.case-flow__result--strong .case-flow__result-label { color: var(--accent); }
.case-flow__result-text {
  display: block;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
}

.case-flow__live {
  text-align: center;
  margin: var(--space-m) 0 0;
}
.case-flow__live a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: 12px 22px;
  background: var(--brand-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  min-height: 44px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.case-flow__live a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(49,79,89,0.18);
  background: color-mix(in srgb, var(--brand-primary) 80%, var(--accent));
}

/* ── Features-checklist (hvad de bruger) ─────────────────────────────── */
.case-features {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  display: grid;
  gap: 10px;
}
.case-features li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px var(--space-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--text);
  transition: border-color .2s, transform .2s;
}
.case-features span[aria-hidden] { flex: 0 0 auto; }
.case-features a { flex: 0 0 auto; }
.case-features li:hover {
  border-color: rgba(184,90,58,0.42);
  transform: translateX(3px);
}
.case-features span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: rgba(0,136,60,0.14);
  color: var(--brand-success);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.case-features a {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.case-features a:hover { color: var(--accent); border-bottom-style: solid; }

/* ── Andre kunder strip ──────────────────────────────────────────────── */
.case-other {
  list-style: none;
  padding: 0;
  margin: var(--space-l) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.case-other li {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}
.case-other a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--brand-primary);
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.case-other a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.case-cta {
  position: relative;
  padding: var(--space-3xl) 0;
  background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary) 70%, black) 100%);
  color: white;
  text-align: center;
  overflow: hidden;
}
.case-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(214,228,240,0.20) 0%, transparent 60%);
  pointer-events: none;
}
.case-cta__head {
  position: relative;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-m);
  color: white;
  letter-spacing: -0.01em;
}
.case-cta__lede {
  position: relative;
  font-size: 17px;
  color: rgba(255,255,255,0.88);
  max-width: 50ch;
  margin: 0 auto var(--space-xl);
  line-height: 1.55;
}
.case-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: center;
}
.case-cta__actions .btn { min-height: 44px; }
.case-cta__btn-light {
  border-color: rgba(255,255,255,0.45);
  color: white;
  background: transparent;
}
.case-cta__btn-light:hover {
  background: rgba(255,255,255,0.10);
  border-color: white;
  color: white;
}

/* ── Scroll-reveal — content er altid synligt; transition kun ved is-revealed ─
   FIX (R5): tidligere skjulte vi sektioner med opacity:0 indtil IO triggede,
   men det forårsagede tomme hvide zoner hvis IO ikke nåede at fyre eller en
   bruger klikkede direkte til en deeplink. Nu viser vi alt content fra
   første paint; .is-revealed kan stadig anvendes til subtile animationer. */
html.js .case-page [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
html.js .case-page [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Indre items er synlige fra start; transitions bevares til hover-feedback */
html.js .case-fact,
html.js .case-features li,
html.js .case-other li {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease-out, transform .45s ease-out, border-color .25s, color .25s;
}
html.js .case-section.is-revealed .case-fact,
html.js .case-section.is-revealed .case-features li,
html.js .case-section.is-revealed .case-other li {
  opacity: 1;
  transform: none;
}
html.js .case-section.is-revealed .case-fact:nth-child(1),
html.js .case-section.is-revealed .case-features li:nth-child(1),
html.js .case-section.is-revealed .case-other li:nth-child(1) { transition-delay: .10s; }
html.js .case-section.is-revealed .case-fact:nth-child(2),
html.js .case-section.is-revealed .case-features li:nth-child(2),
html.js .case-section.is-revealed .case-other li:nth-child(2) { transition-delay: .20s; }
html.js .case-section.is-revealed .case-fact:nth-child(3),
html.js .case-section.is-revealed .case-features li:nth-child(3),
html.js .case-section.is-revealed .case-other li:nth-child(3) { transition-delay: .30s; }
html.js .case-section.is-revealed .case-fact:nth-child(4),
html.js .case-section.is-revealed .case-features li:nth-child(4),
html.js .case-section.is-revealed .case-other li:nth-child(4) { transition-delay: .40s; }
html.js .case-section.is-revealed .case-fact:nth-child(5),
html.js .case-section.is-revealed .case-features li:nth-child(5),
html.js .case-section.is-revealed .case-other li:nth-child(5) { transition-delay: .50s; }

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .case-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .case-hero__quote { margin-left: 0; max-width: 100%; }
}

@media (max-width: 768px) {
  .case-hero { padding: var(--space-xl) 0 var(--space-l); }
  .case-hero__title { font-size: clamp(30px, 8vw, 44px); }
  .case-section { padding: var(--space-l) 0; }
  .case-facts { gap: var(--space-m); }
  .case-fact { padding-left: var(--space-s); }
  .case-cta__actions { flex-direction: column; align-items: stretch; }
  .case-cta__actions .btn { width: 100%; justify-content: center; }
  .case-block__quote { padding: var(--space-s) var(--space-m); }
  /* Flow-trin: ikonet bliver til mindre badge oppe i højre hjørne så grid kun
     er num + content på mobil — undgår 3-kolonne presset */
  .case-flow__step { grid-template-columns: 40px 1fr; }
  .case-flow__icon { display: none; }
  .case-flow__num { width: 40px; height: 40px; font-size: var(--fs-base); }
  .case-flow::before { left: 19px; }
  .case-flow__results { padding: var(--space-m); }
}

@media (max-width: 480px) {
  .case-section__head { font-size: var(--fs-3xl); }
  .case-hero__quote { padding: var(--space-l); }
  .case-hero__mark { width: 40px; height: 40px; font-size: 30px; top: -12px; }
  /* Lange uppercase-pille-tekster wrapper grimt — komprimer på smal mobil */
  .case-flow__kicker {
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.14em;
    padding: 4px 10px;
  }
  .case-flow__body code { word-break: break-all; }
}

/* ── Reduced motion — fjerner kun bevægelse, beholder farve-feedback ── */
@media (prefers-reduced-motion: reduce) {
  .case-hero__mark,
  .case-hero__quote,
  .case-features li > span[aria-hidden] { animation: none; transition: border-color .2s, color .2s; }
  .case-fact,
  .case-features li,
  .case-other a {
    transform: none !important;
    transition: border-color .2s, color .2s, background .2s;
  }
  html.js .case-page [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .case-fact,
  html.js .case-features li,
  html.js .case-other li { opacity: 1; transform: none; transition: border-color .2s, color .2s; }
}

/* ── Dark mode ────────────────────────────────────────────────────────── */
[data-theme="dark"] .case-section--facts {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .case-section--subtle {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 80%, var(--brand-primary)) 100%);
}
[data-theme="dark"] .case-section--subtle::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
}
[data-theme="dark"] .case-hero__quote,
[data-theme="dark"] .case-hero__pills li,
[data-theme="dark"] .case-features li,
[data-theme="dark"] .case-other a,
[data-theme="dark"] .case-block__quote { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .case-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 50%, black) 0%, rgb(10,20,24) 100%);
}
[data-theme="dark"] .case-section--flow {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
[data-theme="dark"] .case-flow__num { background: var(--surface); box-shadow: 0 0 0 4px var(--bg); }
[data-theme="dark"] .case-flow__results { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .case-flow__live a:hover { background: color-mix(in srgb, var(--brand-primary) 70%, var(--accent)); }
[data-theme="dark"] .case-flow__body code { background: rgba(127,168,182,0.20); color: rgb(181,208,216); }
[data-theme="dark"] .case-features span[aria-hidden] { background: rgba(0,136,60,0.20); color: rgb(110,231,160); }

/* R6 Fix B: case-snapshot — kort tre-punkts-resumé i hero (problem / det
   vi byggede / effekten). Ingen fabrikerede tal — bullets er konkrete
   beskrivelser destilleret fra eksisterende casetekst. */
.case-snapshot {
  background: var(--surface-hover, rgb(241,245,249));
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  margin: 0 0 var(--space-l);
  border-radius: var(--radius-md);
}
.case-snapshot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); }
.case-snapshot li { line-height: 1.5; }
.case-snapshot strong { color: var(--brand-primary); }
[data-theme="dark"] .case-snapshot { background: var(--surface); border-left-color: var(--accent); }
[data-theme="dark"] .case-snapshot strong { color: var(--ink); }