/* MiSaarthi shared design system — centralized cross-page guardrails */
:root {
  --ms-brand-navy: #102a43;
  --ms-brand-blue: #3159d9;
  --ms-brand-blue-hover: #2448bf;
  --ms-brand-accent: #f0a83b;
  --ms-text: #20364b;
  --ms-muted: #60778d;
  --ms-border: #dce6ef;
  --ms-surface: #ffffff;
  --ms-page: #f7f9fc;
  --ms-radius-sm: 10px;
  --ms-radius-md: 16px;
  --ms-radius-lg: 22px;
  --ms-shadow-card: 0 8px 28px rgba(16,42,67,.07);
  --ms-content-width: 1180px;
  --ms-space-section: clamp(44px, 6vw, 84px);
  --ms-focus-ring: 0 0 0 3px rgba(49,89,217,.28);
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { color: var(--ms-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid rgba(49,89,217,.72) !important; outline-offset: 3px !important; }
::selection { background: rgba(49,89,217,.16); color: var(--ms-brand-navy); }
.ms5-nav { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ms-border); box-shadow: 0 3px 16px rgba(16,42,67,.045); backdrop-filter: blur(14px); }
.ms5-nav-inner { width: min(100%, var(--ms-content-width)); margin-inline: auto; }
.ms5-brand { text-decoration: none !important; flex-shrink: 0; }
.ms5-brand-name { color: var(--ms-brand-navy) !important; letter-spacing: -.045em; }
.ms5-brand-tag { color: var(--ms-muted) !important; }
.ms5-nav a, .ms5-footer a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.ms5-footer { border-top: 1px solid var(--ms-border); }
.ms5-footer-inner { width: min(100%, var(--ms-content-width)); }
.ms5-footer a:focus-visible { border-radius: 5px; }
:where(.ms5-nav, .ms5-footer) a { text-underline-offset: 3px; }
:where(.ms5-nav, .ms5-footer) a:hover { text-decoration-thickness: 2px; }
/* Keep long-form and tool pages aligned without overriding their page-specific grids. */
:where(main, .ms5-main, .page-container) { min-width: 0; }
:where(main, .ms5-main) :where(img, table, pre, iframe) { max-width: 100%; }
table { max-width: 100%; }
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  body { overflow-wrap: anywhere; }
  :where(main, .ms5-main) { min-width: 0; }
  :where(main, .ms5-main) table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}