/* ===========================================================================
   Monitoring marketing pages (/uptime-monitoring, /heartbeat-monitoring,
   /traffic-alerts). MOBILE-FIRST, uses the existing PUBLIC page tokens
   (--landing-text, --primary, --border …) — these pages are deliberately NOT
   app-skinned (render_app_skin() is authenticated-pages-only, per CLAUDE.md).
   No render-blocking anything: one small stylesheet, no webfonts, no JS.
   =========================================================================== */

.mk { max-width: 46rem; }

.mk-crumbs { font-size: .82rem; color: var(--muted, #64748B); margin-bottom: .75rem; }
.mk-crumbs a { color: inherit; }

.mk h1 { line-height: 1.2; margin-bottom: 1rem; }

/* Direct-answer block: visually the first thing, and the quotable answer. */
.mk-answer {
  border-left: 3px solid var(--primary, #2563EB);
  background: color-mix(in srgb, var(--primary, #2563EB) 6%, transparent);
  border-radius: 0 8px 8px 0;
  padding: .9rem 1rem;
  margin: 0 0 2rem;
}
.mk-answer p { margin: 0; font-size: 1.02rem; line-height: 1.6; }

.mk-section { margin: 0 0 2rem; }
.mk-section h2 { font-size: 1.28rem; line-height: 1.3; margin: 0 0 .6rem; }
.mk-section h3 { font-size: 1.02rem; line-height: 1.35; margin: 1.2rem 0 .35rem; }
.mk-section p { line-height: 1.65; margin: 0 0 .8rem; }

/* Code samples: scroll inside their own box — the page never scrolls sideways. */
.mk-code {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #0F172A; color: #E2E8F0;
  border-radius: 8px; padding: .8rem .9rem; margin: .6rem 0 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.5;
}
.mk-code code { white-space: pre; }

/* Tiers: stacked on mobile, side by side from 34rem. No prices by design. */
.mk-tiers { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .mk-tiers { grid-template-columns: 1fr 1fr; } }
.mk-tier {
  border: 1px solid var(--border, #E2E8F0); border-radius: 10px; padding: .9rem 1rem;
}
.mk-tier h3 { margin: 0 0 .5rem; font-size: 1rem; }
.mk-tier ul { margin: 0; padding-left: 1.1rem; }
.mk-tier li { line-height: 1.6; font-size: .92rem; }
.mk-note { font-size: .9rem; color: var(--muted, #64748B); margin-top: .75rem; }

.mk-faq h3 { font-weight: 600; }
.mk-cta .btn { margin-right: .5rem; margin-top: .35rem; }

/* Long URLs/tokens in prose must never widen the page on a 375px screen. */
.mk p, .mk li { overflow-wrap: anywhere; }