.vertical-diagram { display:none; }
@media (max-width:700px) {
  .desktop-diagram { display:none!important; }
  .vertical-diagram { position:relative; display:grid; gap:36px; width:100%; min-width:0; margin:24px auto 10px; color:#192922; }
  .vertical-diagram > svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .vertical-diagram path { fill:none; stroke:#bbcbc1; stroke-width:1.6; }
  .vertical-diagram > :not(svg) { position:relative; }
  .diagram-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .diagram-grid > :last-child:nth-child(odd) { grid-column:1/-1; width:calc((100% - 12px)/2); justify-self:center; }
  .diagram-card { box-sizing:border-box; min-width:0; padding:14px; background:white; border:1px solid #dce2dc; border-radius:11px; box-shadow:0 3px 9px #233c320d; }
  .diagram-card strong { font:600 15px/1.25 Arial,sans-serif; overflow-wrap:anywhere; }
  .diagram-card .diagram-icon { width:20px; height:20px; object-fit:contain; margin-right:6px; vertical-align:middle; }
  .diagram-card p { font:14px/1.45 Arial,sans-serif!important; color:#53635a; margin:9px 0 0!important; }
  .diagram-card p:empty { display:none; }
  .diagram-card small { display:block; margin-bottom:9px; font:600 10px/1.4 Arial,sans-serif; letter-spacing:.09em; color:#557467; text-transform:uppercase; }
  .diagram-engine { justify-self:center; display:grid; justify-items:center; gap:6px; }
  .diagram-engine img { box-sizing:border-box; width:64px; height:64px; padding:11px; object-fit:contain; background:white; border:1px solid #dce2dc; border-radius:19px; box-shadow:0 3px 10px #233c3214; }
  .diagram-engine strong { font:600 14px/1.4 Arial,sans-serif; }
  .diagram-report { padding:19px; }
  .diagram-report strong { font:400 24px/1.12 Georgia,serif; }
  .diagram-report footer { margin-top:13px; border-top:1px solid #e1e6df; padding-top:10px; font:12px/1.5 monospace; color:#486457; }
  .integration-workflow .vertical-diagram > .diagram-card { justify-self:center; width:75%; }
  .integration-workflow .diagram-grid img { display:block; margin-bottom:9px; }
}
@media (max-width:700px) {
  .compact-output { padding:16px; }
  .compact-output small { margin-bottom:8px; }
  .compact-entry, .compact-suggestion { display:flex; align-items:center; gap:10px; }
  .compact-entry { min-height:32px; font:16px/1.3 Georgia,serif; }
  .compact-marker { flex:none; min-width:29px; text-align:center; font:600 13px/22px Arial,sans-serif; border-radius:5px; }
  .compact-marker[data-severity="P0"] { background:#f5dfda; color:#79392f; }
  .compact-marker[data-severity="P1"] { background:#faeacb; color:#71521d; }
  .compact-marker[data-severity="P2"] { background:#e4eddb; color:#425a38; }
  .compact-suggestion { margin-top:8px; border-top:1px solid #e0e6e1; padding-top:10px; font:15px/1.4 Arial,sans-serif; }
}

#overview .hero-grid > div:first-child .eyebrow {
  font-family: var(--font-body) !important;
  text-transform: none;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .012em !important;
  text-wrap: balance;
}