/* =====================================================================
   Mr.PetzAI · AI-Kompass 360° — Seitenspezifisches CSS  (Praefix: mpk-)
   Baut auf style.css auf. Keine globalen Klassen aendern.
   Gold #D8BE7C = Premium-/Hover-Akzent (CD-Pflicht).
   ===================================================================== */
.mpk-scope {
  --mpk-gold: #D8BE7C;
  --mpk-gold-soft: rgba(216, 190, 124, .14);
  --mpk-gold-border: rgba(216, 190, 124, .55);
  --mpk-navy: #06243a;
  --mpk-cyan: #18b7c9;
  --mpk-ink: #1D2733;
  --mpk-muted: #4E5D6C;
  --mpk-bd: #E3E9EF;
  --mpk-r: 14px;
  --mpk-nav: 175px;
}

.mpk-scope, .mpk-scope * { min-width: 0; }
.mpk-scope img, .mpk-scope svg { max-width: 100%; }

/* ---------------------------------------------------------------
   1) UMBRUECHE — Ursache: text-wrap:balance aus #mpr-widen.
      Hier neutralisiert. Textbreiten ruhig, aber nicht endlos.
   --------------------------------------------------------------- */
.mpk-scope h1,
.mpk-scope h2,
.mpk-scope h3 {
  text-wrap: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}
.mpk-scope .section-head { max-width: 1120px; }
.mpk-scope .section-head h2 { max-width: 1180px; }
.mpk-scope .section-head > p:not(.eyebrow),
.mpk-scope .section-lead,
.mpk-section-note {
  max-width: 1080px;
  text-wrap: normal;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Karten-/Grid-Texte nutzen die volle Kartenbreite */
.mpk-legend-card p,
.mpk-usecase p,
.mpk-eco-card p,
.mpk-step p,
.mpk-compare-list li,
.mpk-followup p { max-width: none; text-wrap: normal; }

/* ---------------------------------------------------------------
   2) TYPOGRAFIE — ein System, keine Sonderfaelle
   --------------------------------------------------------------- */
.mpk-scope .hero-content h1 {
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.mpk-scope .section-head h2 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
}
/* Kartentitel: EINE Regel fuer alle Karten */
.mpk-legend-card h3,
.mpk-usecase h3,
.mpk-eco-card h3,
.mpk-step h3,
.mpk-compare-head h3 {
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 .25rem;
}
.mpk-followup h2,
.mpk-subhead h2 {
  font-size: clamp(1.6rem, 2.1vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: .9rem;
}
.mpk-why h3 { color: #fff; font-size: 1.25rem; font-weight: 750; line-height: 1.25; margin-bottom: .8rem; }
.mpk-why p { color: rgba(255, 255, 255, .72); }
.mpk-note-on-dark { color: rgba(255, 255, 255, .72) !important; }

/* ---------------------------------------------------------------
   3) STICKY-HEADER / ANKER — Ueberschrift nicht mehr verdeckt
   --------------------------------------------------------------- */
[id^="mpk-"] { scroll-margin-top: var(--mpk-nav); }
.mpk-answer-result { scroll-margin-top: var(--mpk-nav); }

/* ---------------------------------------------------------------
   4) BUTTONS — kein Textueberlauf, Gold-Hover verbindlich
   --------------------------------------------------------------- */
.mpk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  max-width: 100%;
  min-height: 46px;
  padding: .75rem 1.15rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mpk-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (min-width: 768px) { .mpk-btn { white-space: nowrap; } }

.mpk-btn-primary { background: var(--mpk-cyan); color: #06243a; border-color: var(--mpk-cyan); }
.mpk-btn-outline { background: #fff; color: var(--mpk-navy); border-color: rgba(6, 36, 58, .22); }
.mpk-btn-ghost { background: transparent; color: var(--mpk-muted); border-color: var(--mpk-bd); }

/* Gold-Hover: ALLE Buttons/CTAs dieser Seite (auch dunkelblaue) */
.mpk-btn-primary:hover, .mpk-btn-primary:focus-visible,
.mpk-btn-outline:hover, .mpk-btn-outline:focus-visible,
.mpk-btn-ghost:hover,   .mpk-btn-ghost:focus-visible,
.mpk-scope a.btn:hover, .mpk-scope a.btn:focus-visible,
.mpk-scope .btn.primary:hover, .mpk-scope .btn.primary:focus-visible,
.mpk-scope .btn.secondary:hover, .mpk-scope .btn.secondary:focus-visible,
.mpk-scope .btn.light:hover, .mpk-scope .btn.light:focus-visible {
  background: var(--mpk-gold);
  border-color: var(--mpk-gold);
  color: #06243a;
  box-shadow: 0 8px 24px rgba(216, 190, 124, .24);
  transform: none;            /* kein Springen, keine Layoutverschiebung */
}
.mpk-btn:focus-visible { outline: 3px solid rgba(24, 183, 201, .45); outline-offset: 3px; }

/* Globale Buttons im Scope: Text bleibt in der Flaeche */
.mpk-scope .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
@media (min-width: 768px) { .mpk-scope .btn { white-space: nowrap; } }
/* CTA-Band: Button darf nicht schrumpfen */
.mpk-scope .cta-band .cta-inner { gap: 2.6rem; }
.mpk-scope .cta-band .cta-inner .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   5) HERO
   --------------------------------------------------------------- */
.mpk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem;
  align-items: center;
}
.mpk-hero-claim {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 700;
  color: var(--mpk-gold);
  margin: .4rem 0 .9rem;
  line-height: 1.2;
}
.mpk-trustline {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin: 1.4rem 0 .2rem; padding: 0; list-style: none;
  color: rgba(255, 255, 255, .82); font-size: .9rem;
}
.mpk-trustline li { display: inline-flex; align-items: center; gap: .45rem; }
.mpk-trustline svg { width: 16px; height: 16px; color: var(--mpk-gold); flex: 0 0 auto; }
.mpk-hero-note {
  margin-top: 1.3rem; padding: .85rem 1.05rem;
  border: 1px solid rgba(216, 190, 124, .32);
  background: rgba(216, 190, 124, .08);
  border-radius: 10px; color: rgba(255, 255, 255, .82);
  font-size: .9rem; max-width: 700px;
}
.mpk-compass-emblem { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; }
.mpk-compass-emblem svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------
   6) SCHAUBILDER
   --------------------------------------------------------------- */
.mpk-section-note { color: var(--mpk-muted); font-size: 1.02rem; }

.mpk-compass-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.mpk-legend-card {
  display: flex; gap: .85rem; align-items: flex-start; padding: 1.15rem;
  background: #fff; border: 1px solid var(--mpk-bd); border-top: 3px solid var(--mpk-cyan);
  border-radius: var(--mpk-r); box-shadow: 0 8px 26px rgba(8, 43, 70, .06);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mpk-legend-card:nth-child(5n) { border-top-color: var(--mpk-gold); }
.mpk-legend-ico, .mpk-eco-ico, .mpk-usecase-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  background: rgba(24, 183, 201, .10); color: var(--mpk-navy);
}
.mpk-legend-ico { width: 44px; height: 44px; border-radius: 11px; }
.mpk-legend-ico svg { width: 22px; height: 22px; }
.mpk-legend-card p { font-size: .88rem; margin: 0; color: var(--mpk-muted); }

.mpk-process-flow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem; margin-top: 2.2rem; position: relative; list-style: none; padding: 0;
}
.mpk-step {
  position: relative; padding: 1.4rem 1.2rem; background: #fff;
  border: 1px solid var(--mpk-bd); border-radius: var(--mpk-r);
  box-shadow: 0 8px 26px rgba(8, 43, 70, .06);
}
.mpk-step-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.mpk-step-num {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: var(--mpk-navy); color: var(--mpk-cyan);
  font-weight: 800; font-size: .95rem; font-family: 'Manrope', system-ui, sans-serif;
}
.mpk-step-ico { color: var(--mpk-navy); }
.mpk-step-ico svg { width: 22px; height: 22px; }
.mpk-step p { font-size: .88rem; margin: 0; color: var(--mpk-muted); }
.mpk-step::after {
  content: ""; position: absolute; top: 50%; right: -.6rem;
  width: .9rem; height: 2px; background: var(--mpk-gold); transform: translateY(-50%);
}
.mpk-process-flow .mpk-step:last-child::after { display: none; }

.mpk-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }

/* --- P1-Kontrastfix: Karten liegen in .section.dark. Die globale Regel
   `.section.dark h2,.section.dark h3{color:#fff}` hat die Kartenueberschriften
   weiss gefaerbt -> weisse Schrift auf heller Karte. Hier hart ueberschrieben.
   Dunkler Text auf hellem Grund, keine opacity-Abschwaechung. --- */
.mpk-compare-card {
  padding: 1.6rem;
  border-radius: var(--mpk-r);
  background: #ffffff;
  color: #06243a;
  border: 1px solid rgba(6, 36, 58, .12);
  box-shadow: 0 8px 26px rgba(8, 43, 70, .06);
}
.mpk-scope .section.dark .mpk-compare-card h3,
.mpk-compare-card h3 {
  color: #06243a !important;
  opacity: 1;
}
.mpk-scope .section.dark .mpk-compare-card p,
.mpk-scope .section.dark .mpk-compare-card li,
.mpk-compare-card p,
.mpk-compare-card li {
  color: rgba(6, 36, 58, .82) !important;
  opacity: 1;
}
/* Linke Karte: Hinweis-/Risikocharakter, aber klar lesbar (nicht "deaktiviert") */
.mpk-compare-card.is-open {
  background: #f4f7fa;
  border-color: rgba(6, 36, 58, .16);
  border-style: solid;
}
.mpk-compare-card.is-open .mpk-compare-head svg { color: #b59448; }
/* Rechte Karte: Tuerkis-Akzent */
.mpk-compare-card.is-checked {
  background: #ffffff;
  border-top: 4px solid #13c7d9;
}
.mpk-compare-card.is-checked .mpk-compare-head svg { color: #13c7d9; }

.mpk-compare-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.mpk-compare-head svg { width: 24px; height: 24px; flex: 0 0 auto; }
.mpk-compare-head h3 { margin: 0; }
.mpk-compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mpk-compare-list li { position: relative; padding-left: 1.6rem; font-size: .94rem; line-height: 1.5; }
.mpk-compare-list li::before {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: .7rem; height: .7rem; border-radius: 50%; opacity: 1;
}
.mpk-compare-card.is-open .mpk-compare-list li::before { background: #b59448; }
.mpk-compare-card.is-checked .mpk-compare-list li::before { background: #13c7d9; }
.mpk-why { margin-top: 2.6rem; }

.mpk-ecosystem-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.2rem; }
.mpk-eco-card {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem;
  background: #fff; border: 1px solid var(--mpk-bd); border-radius: var(--mpk-r);
  box-shadow: 0 8px 26px rgba(8, 43, 70, .06); text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mpk-eco-ico { width: 46px; height: 46px; border-radius: 12px; }
.mpk-eco-ico svg { width: 24px; height: 24px; }
.mpk-eco-card.is-primary { border-top: 3px solid var(--mpk-gold); }
.mpk-eco-card.is-primary .mpk-eco-ico { background: rgba(216, 190, 124, .16); }
.mpk-eco-card p { font-size: .92rem; margin: 0; color: var(--mpk-muted); }
.mpk-eco-link {
  margin-top: auto; color: #087d8f; font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
}

.mpk-usecase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.mpk-usecase {
  padding: 1.25rem; background: #fff; border: 1px solid var(--mpk-bd);
  border-radius: var(--mpk-r); box-shadow: 0 8px 26px rgba(8, 43, 70, .05);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mpk-usecase-ico { width: 40px; height: 40px; border-radius: 10px; margin-bottom: .7rem; }
.mpk-usecase-ico svg { width: 20px; height: 20px; }
.mpk-usecase p { font-size: .86rem; margin: 0; color: var(--mpk-muted); line-height: 1.5; }

/* Karten-Hover (Gold, ohne Springen) */
.mpk-legend-card:hover, .mpk-usecase:hover, a.mpk-eco-card:hover {
  box-shadow: 0 16px 40px rgba(8, 43, 70, .12);
  border-color: var(--mpk-gold-border);
}
a.mpk-eco-card:hover .mpk-eco-link { color: var(--mpk-gold); }

/* ---------------------------------------------------------------
   7) FRAGE-PANEL + ANTWORTKARTE
   --------------------------------------------------------------- */
.mpk-question-panel {
  background: #fff; border: 1px solid var(--mpk-bd); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(8, 43, 70, .10); padding: 1.8rem; margin-top: 2rem;
  max-width: 1120px;
}
.mpk-field label {
  display: block; color: var(--mpk-navy); font-size: .78rem; font-weight: 850;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .45rem;
}
.mpk-field textarea {
  width: 100%; min-height: 96px; border: 1.5px solid var(--mpk-bd); border-radius: 10px;
  background: #fff; color: var(--mpk-ink); font: inherit; padding: .9rem 1rem;
  resize: vertical; outline: none; box-sizing: border-box;
}
.mpk-field textarea:focus { border-color: var(--mpk-cyan); box-shadow: 0 0 0 3px rgba(24, 183, 201, .15); }
.mpk-actions, .mpk-voice-controls { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.mpk-voice-controls { margin-top: .8rem; }
.mpk-voice-hint {
  margin: .9rem 0 0; font-size: .82rem; color: var(--mpk-muted);
  display: inline-flex; align-items: center; gap: .45rem;
}
.mpk-voice-hint svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--mpk-cyan); }
.mpk-status { margin: .6rem 0 0; font-size: .82rem; color: #087d8f; font-weight: 700; min-height: 1.1em; }

#mpk-answer { margin-top: 1.4rem; }
.mpk-answer-card {
  max-width: 1080px;
  border: 1px solid var(--mpk-bd); border-left: 4px solid var(--mpk-cyan);
  border-radius: 0 var(--mpk-r) var(--mpk-r) 0; background: #F4F7FA; padding: 1.5rem 1.6rem;
}
.mpk-answer-card p, .mpk-answer-card dd { max-width: 980px; text-wrap: normal; }
.mpk-topic-chip {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--mpk-bd);
  color: var(--mpk-navy); border-radius: 999px; padding: .35rem .85rem;
  font-size: .78rem; font-weight: 800; margin-bottom: 1rem; max-width: 100%;
}
.mpk-answer-body { margin: 0; display: grid; gap: 1rem; }
.mpk-answer-row dt {
  font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em;
  color: #087d8f; margin-bottom: .2rem;
}
.mpk-answer-row dd { margin: 0; color: var(--mpk-ink); font-size: .96rem; line-height: 1.6; }
.mpk-answer-row--next dd { font-weight: 650; color: var(--mpk-navy); }
.mpk-answer-fallback { color: var(--mpk-ink); font-size: 1rem; line-height: 1.6; margin: 0 0 1.1rem; }
.mpk-answer-cta { display: inline-flex; }
.mpk-load-error { color: #a4423a; font-weight: 600; }

/* --------------------------------------------------------------
   BEISPIELFRAGEN — Einstiegskarten (UX-Redesign, kein Chip-Friedhof)
   -------------------------------------------------------------- */
#mpk-examples { margin-top: 1.6rem; }
.mpk-examples-block { margin-top: 3rem; }
.mpk-cta-row { margin-top: 2.4rem; }
.mpk-examples-intro { max-width: 1080px; color: var(--mpk-muted); font-size: 1.02rem; margin-bottom: 0; }

.mpk-question-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  /* Karten behalten ihre natuerliche Hoehe: klappt eine Karte auf,
     werden die anderen NICHT mitgedehnt -> Inhalte bleiben oben. */
  align-items: start;
}
@media (max-width: 1400px) and (min-width: 1025px) {
  .mpk-question-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mpk-question-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid rgba(6, 36, 58, .12);
  border-top: 3px solid var(--mpk-cyan);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(8, 43, 70, .07);
}
.mpk-question-card:nth-child(5) { border-top-color: var(--mpk-gold); }
.mpk-question-card-ico {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(24, 183, 201, .10);
  color: #06243a;
  flex: 0 0 auto;
}
.mpk-question-card:nth-child(5) .mpk-question-card-ico { background: rgba(216, 190, 124, .18); }
.mpk-question-card-ico svg { width: 24px; height: 24px; }
.mpk-question-card h3 {
  font-size: 1.25rem; font-weight: 800; line-height: 1.25;
  letter-spacing: -.015em; color: #06243a; margin: .2rem 0 0;
}
.mpk-question-card-intro {
  font-size: .92rem; line-height: 1.5; color: var(--mpk-muted);
  margin: 0 0 .4rem; max-width: none;
}

.mpk-question-list { display: grid; gap: .55rem; margin-top: .2rem; }
.mpk-question-slot[hidden] { display: none; }

.mpk-question-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(6, 36, 58, .12);
  color: #06243a;
  font: inherit;
  font-size: .95rem;
  line-height: 1.35;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mpk-question-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(24, 183, 201, .14);
  color: #06243a;
  font-size: .78rem; font-weight: 800; line-height: 1;
  margin-top: .05rem;
}
.mpk-question-text { flex: 1 1 auto; overflow-wrap: break-word; }
.mpk-question-arrow { flex: 0 0 auto; color: rgba(6, 36, 58, .35); margin-top: .1rem; }
.mpk-question-arrow svg { width: 16px; height: 16px; display: block; }

.mpk-question-item:hover,
.mpk-question-item:focus-visible {
  border-color: var(--mpk-gold);
  box-shadow: 0 8px 24px rgba(216, 190, 124, .18);
  background: rgba(216, 190, 124, .06);
}
.mpk-question-item:hover .mpk-question-arrow,
.mpk-question-item:focus-visible .mpk-question-arrow { color: #06243a; }
.mpk-question-item:focus-visible { outline: 3px solid rgba(24, 183, 201, .45); outline-offset: 2px; }

.mpk-more-btn { align-self: flex-start; margin-top: .35rem; }

/* Anschlussbereiche */
.mpk-followup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; align-items: start; }
.mpk-followup p { margin-bottom: 1.5rem; }

/* Ruhige Sektionsabstaende, keine Mindesthoehen */
.mpk-scope .section { padding-block: clamp(4rem, 7vw, 7rem); }

/* ---------------------------------------------------------------
   8) RESPONSIVE
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
  .mpk-scope .section-head { max-width: 1160px; }
  .mpk-scope .section-head > p:not(.eyebrow),
  .mpk-scope .section-lead,
  .mpk-section-note { max-width: 1100px; }
}
@media (max-width: 1080px) {
  .mpk-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .mpk-compass-emblem { max-width: 340px; margin-top: .5rem; }
  .mpk-usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .mpk-question-cards { grid-template-columns: 1fr; }
  .mpk-more-btn { align-self: stretch; }
}
@media (max-width: 900px) {
  .mpk-compass-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpk-process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpk-step::after { display: none; }
  .mpk-comparison-grid { grid-template-columns: 1fr; }
  .mpk-ecosystem-map { grid-template-columns: 1fr; }
  .mpk-followup { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 767px) {
  .mpk-scope { --mpk-nav: 96px; }
  .mpk-scope .section-head,
  .mpk-scope .section-head h2,
  .mpk-scope .section-head > p:not(.eyebrow),
  .mpk-scope .section-lead,
  .mpk-section-note,
  .mpk-question-panel,
  .mpk-answer-card,
  .mpk-answer-card p,
  .mpk-answer-card dd { max-width: 100%; }
  .mpk-compass-legend { grid-template-columns: 1fr; }
  .mpk-process-flow { grid-template-columns: 1fr; }
  .mpk-usecase-grid { grid-template-columns: 1fr; }
  .mpk-question-panel { padding: 1.2rem; }
  .mpk-actions .mpk-btn,
  .mpk-voice-controls .mpk-btn { width: 100%; white-space: normal; }
  .mpk-question-item { padding: 1rem; font-size: .95rem; }
  .mpk-question-card { padding: 1.25rem; }
  .mpk-more-btn { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .mpk-scope * { transition: none !important; }
}