body .article-wrap { min-width: 0; }
.preview-intro { margin: 0 0 32px; }
.preview-jumps { display:flex; flex-wrap:wrap; gap:8px 20px; padding:0 0 16px; border-bottom:1px solid #e1e0d9; }
.preview-jumps a { color:#443782; text-underline-offset:3px; }
.article [id] { scroll-margin-top:100px; }
.article > h2 { margin:28px 0 0; }
.article > h3 { margin:0; }
.article li + li { margin-top:12px; }
.matrix-panel {
  --matrix-edge:#dedbd3;
  width:min(1040px, calc(100vw - 88px));
  align-self:center;
  padding:24px;
  border:1px solid var(--matrix-edge);
  border-radius:16px;
  background:#f7f5ef;
}
.matrix-toolbar { display:flex; justify-content:flex-end; margin-bottom:16px; }
.preview-button { display:inline-flex; padding:10px 15px; border-radius:8px; text-decoration:none; font-weight:600; color:white !important; background:#282344; font-size:14px; line-height:1.4; }
.preview-button:hover { background:#453970; }
.matrix-desktop { table-layout:fixed; width:100%; border-spacing:0; border-collapse:separate; border:1px solid var(--matrix-edge); border-radius:10px; overflow:hidden; background:#fff; }
.matrix-desktop th,.matrix-desktop td { padding:16px; text-align:left; vertical-align:top; font-size:15px; line-height:1.55; }
.matrix-desktop thead th { background:#eeece5; font-weight:600; }
.matrix-desktop tbody th { font-weight:550; }
.matrix-desktop tbody tr > * { border-top:1px solid var(--matrix-edge); }
.matrix-desktop tr > * + * { border-left:1px solid var(--matrix-edge); }
.matrix-priority { display:block; font-size:12px; color:#635e70; margin-bottom:5px; }
.matrix-status { display:table; margin-bottom:7px; border-radius:5px; padding:2px 7px; font-size:12px; font-weight:650; line-height:1.5; color:#245644; background:#e6f1e9; }
.matrix-status.open { color:#69460f; background:#f9edcc; }
.matrix-status.met-with-a-workaround { color:#4d3e75; background:#ede8f6; }
.matrix-empty { color:#696471; }
.article .matrix-mobile { display:none; }
.preview-takeaways {
  margin-top:24px;
  padding:28px 32px;
  border-top:3px solid #39776e;
  border-radius:0 0 12px 12px;
  background:#f5f3ed;
}
.article .preview-takeaways h2,
.article .preview-cta h2 { margin:0 0 16px; }
.article .takeaway-list { list-style:none; margin:0; padding:0; }
.article .takeaway-list li { margin:0; padding:16px 0; }
.article .takeaway-list li + li { border-top:1px solid #dcdad0; }
.article .takeaway-list li:first-child { padding-top:0; }
.article .takeaway-list li:last-child { padding-bottom:0; }
.article .takeaway-list h3 {
  margin:0 0 6px;
  font-size:18px;
  font-weight:650;
  line-height:1.35;
}
.article .takeaway-list p { margin:0; }
.preview-cta {
  margin-top:16px;
  padding:32px;
  border-radius:12px;
  border:1px solid #d3e5dd;
  background:#edf6f1;
  color:#173b34;
}
.article .preview-cta h2 { color:inherit; }
.article .preview-cta p { color:inherit; margin:0 0 12px; }
.preview-cta-links { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:20px; }
.preview-cta-links > a { min-height:44px; display:inline-flex; align-items:center; }
.preview-cta-links > a:not(.preview-button) { color:#235c50; text-decoration:underline; text-underline-offset:4px; }
.preview-cta .preview-button { background:#39776e; color:#fff !important; }
.preview-cta .preview-button:hover { background:#2e625a; }
.preview-cta-links > a:focus-visible { outline:2px solid #235c50; outline-offset:4px; }
@media (max-width:767px) {
  .matrix-panel { width:100%; padding:12px; }
  .matrix-toolbar { justify-content:flex-start; margin-bottom:12px; }
  .matrix-desktop { display:none; }
  .article .matrix-mobile { display:grid; gap:12px; padding:0; margin:0; list-style:none; }
  .article .matrix-mobile > li { margin:0; padding:12px; border:1px solid var(--matrix-edge); border-radius:8px; background:#fff; }
  .matrix-mobile h3 { margin:0 0 8px; font-size:16px; line-height:1.4; }
  .matrix-mobile .matrix-evidence { margin:0 0 12px; font-size:14px; line-height:1.5; }
  .matrix-evidence strong { display:block; }
  .matrix-mobile dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
  .matrix-mobile dl > div { padding:8px; background:#f7f5ef; border-radius:5px; }
  .matrix-mobile dt { margin-bottom:5px; font-weight:650; font-size:13px; }
  .matrix-mobile dd { margin:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
  .preview-takeaways,.preview-cta { padding:20px; }
}
