/*
 * 100 % EU — mærket i heroen og sektionen.
 *
 * Fra designhandoff'et (design_handoff_eu_onboarding/web/eu.css), uændret
 * bortset fra denne forklaring. Farverne er en DÆMPET EU-palet og ikke de
 * officielle, skarpe: blå #2E4A86, guld #E8CF85.
 *
 * Teksten i markup'en er rettet i forhold til handoff'et — se
 * tests/unit/eu-paastande.test.ts for hvorfor, og hvad der skal være sandt,
 * før de absolutte formuleringer kan bruges.
 */
/* ── Hero: 100 % EU pill ──────────────────────────────────────────── */
.qmm-eupill { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 16px 6px 6px; border-radius: 100px; background: rgba(46,74,134,0.07); border: 1px solid rgba(46,74,134,0.28); color: #2E4A86; font-size: 13.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 16px -10px rgba(46,74,134,0.45); }
.qmm-eupill svg { width: 28px; height: 28px; flex: none; }
.qmm-eupill { text-decoration: none; transition: border-color .15s, color .15s; }
.qmm-eupill:hover { border-color: #2E4A86; background: rgba(46,74,134,0.11); }

/* ── 100 % EU section ─────────────────────────────────────────────── */
.qmm-eus { padding: 120px 0; background: var(--bg-page); border-top: 1px solid var(--border); }
.qmm-eus-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: 72px; align-items: center; }
.qmm-eus-copy h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 20px; text-wrap: balance; }
.qmm-eus-lead { font-size: 17px; line-height: 1.6; color: var(--fg-2); max-width: 540px; margin: 0 0 36px; text-wrap: pretty; }
.qmm-eus-stack { list-style: none; margin: 0; padding: 0; max-width: 560px; border-top: 1px solid var(--border); }
.qmm-eus-stack li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.qmm-eus-stack .k { color: var(--fg-1); font-weight: 600; }
.qmm-eus-stack .v { color: var(--fg-2); font-size: 13px; }
.qmm-eus-chip { padding: 3px 9px; border-radius: 100px; background: rgba(46,74,134,0.10); color: #2E4A86; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.qmm-eus-visual { display: flex; justify-content: center; }
.qmm-eus-emblem { width: 100%; max-width: 400px; height: auto; }
.qmm-eus-emblem-big { font-family: var(--font-display); font-size: 52px; font-weight: 800; letter-spacing: -0.02em; fill: #fff; }
.qmm-eus-emblem-small { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.28em; fill: #E8CF85; }
.qmm-eus-points { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--border); }
.qmm-eus-points h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.qmm-eus-points p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) {
  .qmm-eus { padding: 80px 0; }
  .qmm-eus-grid { grid-template-columns: 1fr; gap: 48px; }
  .qmm-eus-visual { order: -1; }
  .qmm-eus-emblem { max-width: 240px; }
  .qmm-eus-points { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .qmm-eus-stack li { grid-template-columns: minmax(0,1fr) auto; }
  .qmm-eus-stack .v { display: none; }
}