/* Static service explanation: no live readings or recurring animation. */
.monitoring-section { padding: 88px max(16px, calc((100vw - var(--max)) / 2)); background: #111719; color: #f5efe6; }
.monitoring-inner { max-width: var(--max); margin-inline: auto; }
.monitoring-heading { margin-bottom: 52px; }
.monitoring-heading .micro { color: #d8c09a; }
.monitoring-heading h2 { margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 950; line-height: 1.04; letter-spacing: -.045em; }
.monitoring-heading h2 span { color: #d8c09a; }
.monitoring-intro { max-width: 770px; margin: 24px 0 0; color: #b8c0c0; font-size: 17px; line-height: 1.7; }
.monitoring-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.monitoring-eyebrow { margin: 0; color: #c2b39c; font-size: 11px; font-weight: 750; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.monitoring-list { list-style: none; margin: 20px 0 0; padding: 0; }
.monitoring-list li { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-top: 1px solid #354042; }
.monitoring-list li:last-child { padding-bottom: 0; }
.monitoring-list svg { flex: none; width: 32px; height: 32px; margin-top: 3px; fill: none; stroke: #d8c09a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.monitoring-list h4 { margin: 0 0 8px; font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.monitoring-list p { max-width: 360px; margin: 0; color: #b8c0c0; font-size: 14px; line-height: 1.6; }
.monitoring-example { min-width: 0; margin: 0; padding: 30px; border: 1px solid #3a4445; border-radius: 18px; background: #1a2326; }
.monitoring-example-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 30px; }
.monitoring-scheme-label { padding: 5px 9px; border: 1px solid #4a5555; border-radius: 4px; color: #b8c0c0; font-size: 10px; }
.monitoring-route { padding: 22px; border: 1px solid; border-radius: 10px; }
.monitoring-route-blocked { border-color: #71534d; background: #292625; }
.monitoring-route-available { border-color: #55766d; background: #202f2c; }
.monitoring-route-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.monitoring-route-heading h3 { margin: 0; font-size: 15px; font-weight: 750; }
.monitoring-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; }
.monitoring-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.monitoring-route-blocked .monitoring-status { color: #efaea1; }
.monitoring-route-available .monitoring-status { color: #a9d6bf; }
.monitoring-chain { display: grid; grid-template-columns: auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto; align-items: center; gap: 8px; }
.monitoring-chain > span { padding: 10px 11px; border: 1px solid #61615c; border-radius: 5px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.monitoring-chain i { height: 1px; background: #8c8b7c; }
.monitoring-route-available .monitoring-chain > span { border-color: #617f72; }
.monitoring-replacement { display: flex; align-items: center; gap: 18px; padding: 20px 24px; }
.monitoring-replacement svg { flex: none; width: 24px; height: 48px; fill: none; stroke: #d8c09a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.monitoring-replacement strong { display: block; color: #d8c09a; font-size: 15px; }
.monitoring-replacement span { display: block; margin-top: 5px; color: #b8c0c0; font-size: 12px; line-height: 1.5; }
.monitoring-example-note { margin: 24px 0 22px; color: #d6dcd9; font-size: 14px; line-height: 1.65; }
.monitoring-example figcaption { padding-top: 16px; border-top: 1px solid #3a4445; color: #a0acab; font-size: 11px; line-height: 1.6; }

@media (max-width: 1100px) {
  .monitoring-layout { gap: 32px; }
  .monitoring-example { padding: 24px; }
  .monitoring-route { padding: 18px; }
}
@media (max-width: 850px) {
  .monitoring-section { padding-block: 64px; }
  .monitoring-heading { margin-bottom: 36px; }
  .monitoring-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .monitoring-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .monitoring-example { max-width: 640px; width: 100%; }
}
@media (max-width: 520px) {
  .monitoring-heading h2 { font-size: clamp(1.65rem, 6.4vw, 2rem); }
  .monitoring-intro { margin-top: 20px; font-size: 15px; }
  .monitoring-list { grid-template-columns: minmax(0, 1fr); }
  .monitoring-list h4 { font-size: 18px; }
  .monitoring-example { padding: 20px 14px; border-radius: 12px; }
  .monitoring-example-head { gap: 10px; margin-bottom: 22px; }
  .monitoring-example-head .monitoring-eyebrow { font-size: 10px; }
  .monitoring-route { padding: 16px 12px; }
  .monitoring-route-heading h3 { font-size: 14px; }
  .monitoring-chain { gap: 5px; }
  .monitoring-chain > span { padding: 9px 6px; font-size: 10px; }
  .monitoring-replacement { gap: 12px; padding-inline: 12px; }
  .monitoring-replacement strong { font-size: 14px; }
}