/* ============================================================
   DOZZON New Design Override (loaded LAST on every page)
   Goal: shift the entire site (chrome + article content) to the
   new editorial "cyan" design language without rewriting HTML.
   All rules use !important to dominate minified/shared styles.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  --dz-ink: #182124;
  --dz-muted: #627074;
  --dz-paper: #f6f7f6;
  --dz-line: #d9dfdd;
  --dz-cyan: #009d9a;
  --dz-cyan-dark: #007d7b;
  --dz-deep: #111c1e;
  --dz-lime: #c5e66d;
  --dz-card: #ffffff;
  --dz-font: 'Manrope', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --dz-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Override legacy live-theme tokens so the whole site shifts to the new
     editorial cyan language. These names are matched against the existing
     shared stylesheets; any element using them recolors automatically. */
  --accent: #009d9a !important;
  --accent-2: #007d7b !important;
  --accent-3: #c5e66d !important;
  --primary: #009d9a !important;
  --primary-dark: #007d7b !important;
  --neon-cyan: #009d9a !important;
  --neon-blue: #009d9a !important;
  --neon-purple: #007d7b !important;
  --neon-magenta: #009d9a !important;
  --neon-gradient: linear-gradient(120deg, #009d9a, #007d7b) !important;
  --neon-holographic: linear-gradient(120deg, #009d9a, #007d7b, #111c1e) !important;
  --metal-frame: linear-gradient(120deg, #009d9a, #007d7b) !important;
  --metal-gradient: linear-gradient(135deg, #eef2f1, #dfe6e4) !important;
  --brass: #009d9a !important;
  --steel: #5b6b6e !important;
  --glass-bg: rgba(255,255,255,0.72) !important;
  --glass-border: rgba(17,28,30,0.08) !important;
  --bg-primary: #fbfcfb !important;
  --bg-secondary: #f1f4f3 !important;
  --bg-card: #ffffff !important;
  --text-primary: #182124 !important;
  --text-secondary: #3a474a !important;
  --text-muted: #627074 !important;
  --border: #d9dfdd !important;
  --line: #d9dfdd !important;
  --paper: #f6f7f6 !important;
  --ink: #182124 !important;
  --muted: #627074 !important;
  --grid: rgba(0,157,154,0.06) !important;
  --font-sans: var(--dz-font) !important;
  --font-mono: var(--dz-mono) !important;
}

/* ---- Base typography / background ---- */
html, body {
  font-family: var(--dz-font) !important;
  color: var(--dz-ink) !important;
  background: var(--dz-paper) !important;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dz-font) !important;
  color: var(--dz-ink) !important;
  letter-spacing: -0.02em;
}
a { color: var(--dz-cyan) !important; }
::selection { background: var(--dz-cyan) !important; color: #fff !important; }

/* ---- Navbar: clean white sticky header ---- */
.navbar.nav, nav.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--dz-line) !important;
  box-shadow: 0 1px 0 rgba(17,28,30,0.04), 0 8px 24px -16px rgba(17,28,30,0.25) !important;
  backdrop-filter: none !important;
}
.nav-container.nav-inner, .nav-inner {
  max-width: 1200px !important;
  padding: 0 24px !important;
}
.nav-logo, a.nav-logo { color: var(--dz-ink) !important; font-weight: 800 !important; }
.nav-logo .brand-mark, .nav-logo span { color: var(--dz-cyan) !important; }
.nav-link, .nav-links .nav-link {
  color: var(--dz-ink) !important;
  font-weight: 500 !important;
}
.nav-link:hover, .nav-links .nav-link:hover { color: var(--dz-cyan) !important; }
.nav-dropdown-trigger { color: var(--dz-ink) !important; }
.nav-dropdown-menu, .nav-dropdown-inner {
  background: #ffffff !important;
  border: 1px solid var(--dz-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px -24px rgba(17,28,30,0.35) !important;
}
.nav-dropdown-item:hover { background: var(--dz-paper) !important; }
.nav-dropdown-item-title { color: var(--dz-ink) !important; }
.nav-dropdown-item-desc { color: var(--dz-muted) !important; }
.nav-cta, .btn-cta, a.btn-cta {
  background: var(--dz-cyan) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}
.nav-cta:hover, .btn-cta:hover { background: var(--dz-cyan-dark) !important; color: #fff !important; }

/* ---- Mobile nav toggle ---- */
#mobileMenuBtn, .mobile-menu-btn, button.mobile-menu-btn { color: var(--dz-ink) !important; }

/* ---- Footer: deep editorial ---- */
.footer, footer.footer {
  background: var(--dz-deep) !important;
  color: #cdd6d4 !important;
  border-top: none !important;
}
.footer a, .footer .footer-link { color: #cdd6d4 !important; }
.footer a:hover { color: #fff !important; }
.footer .footer-title, .footer h3, .footer h4 { color: #fff !important; }
.footer .footer-bottom, .footer-bottom { color: #8a9794 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; }

/* ---- Buttons (global) ---- */
.btn, .button, button.btn {
  font-family: var(--dz-font) !important;
  border-radius: 999px !important;
}
.btn-primary, .btn.btn-primary, .button-primary {
  background: var(--dz-cyan) !important;
  border-color: var(--dz-cyan) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--dz-cyan-dark) !important; border-color: var(--dz-cyan-dark) !important; }
.btn-outline, .btn.btn-outline {
  border-color: var(--dz-line) !important;
  color: var(--dz-ink) !important;
}
.btn-outline:hover { border-color: var(--dz-cyan) !important; color: var(--dz-cyan) !important; }

/* ---- Section headings ---- */
.section-title, .section-heading, .section-header h2 {
  color: var(--dz-ink) !important;
}
.section-sub, .section-desc, .section-header p { color: var(--dz-muted) !important; }
.section-tag, .eyebrow {
  color: var(--dz-cyan) !important;
  background: rgba(0,157,154,0.10) !important;
  border: 1px solid rgba(0,157,154,0.20) !important;
  border-radius: 999px !important;
  font-family: var(--dz-mono) !important;
  letter-spacing: 0.04em !important;
}

/* ---- Cards ---- */
.card, .feature-card, .solution-card, .stat-card, .glass-card {
  background: var(--dz-card) !important;
  border: 1px solid var(--dz-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(17,28,30,0.04), 0 18px 40px -28px rgba(17,28,30,0.30) !important;
}

/* ============================================================
   Article content -> new editorial clean look
   ============================================================ */
.wrapper, .article-body, main, .article-wrap {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.masthead {
  border-bottom: 1px solid var(--dz-line) !important;
  padding-bottom: 22px !important;
  margin-bottom: 26px !important;
}
.masthead .category, .masthead .kicker {
  color: var(--dz-cyan) !important;
  font-family: var(--dz-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 13px !important;
}
.masthead h1, .masthead h1.title {
  font-size: 38px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  color: var(--dz-ink) !important;
}
.masthead .meta, .article-meta {
  color: var(--dz-muted) !important;
  font-size: 14px !important;
}
.meta-dot, .meta-sep { color: var(--dz-line) !important; }
.lede, .article-lede, .article-body > p:first-of-type {
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: var(--dz-muted) !important;
  font-weight: 400 !important;
}
.article-body h2, .wrapper h2, h2 {
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 38px 0 14px !important;
  color: var(--dz-ink) !important;
}
.article-body h3, .wrapper h3, h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--dz-ink) !important;
}
.article-body p, .wrapper p, p {
  font-size: 16.5px !important;
  line-height: 1.85 !important;
  color: #2c373a !important;
}
.article-body a, .wrapper a { color: var(--dz-cyan) !important; text-decoration: underline !important; text-underline-offset: 3px !important; }

/* tables / data */
.data-table, table, .article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 22px 0 !important;
  font-size: 15px !important;
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--dz-line) !important;
}
.data-table th, table th {
  background: var(--dz-deep) !important;
  color: #fff !important;
  text-align: left !important;
  padding: 12px 14px !important;
  font-weight: 600 !important;
}
.data-table td, table td {
  padding: 11px 14px !important;
  border-top: 1px solid var(--dz-line) !important;
  color: #2c373a !important;
}
.data-table tr:nth-child(even) td, table tr:nth-child(even) td { background: var(--dz-paper) !important; }

/* KPI grid */
.kpi-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; margin: 24px 0 !important; }
.kpi-card {
  background: #fff !important;
  border: 1px solid var(--dz-line) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}
.kpi-card .num, .kpi-card .value { color: var(--dz-cyan) !important; font-weight: 800 !important; font-size: 30px !important; }
.kpi-card .label { color: var(--dz-muted) !important; font-size: 13px !important; }

/* callout / formula / blockquote */
.callout, .formula-box {
  background: rgba(0,157,154,0.07) !important;
  border-left: 4px solid var(--dz-cyan) !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 16px 20px !important;
  margin: 22px 0 !important;
  color: #2c373a !important;
}
blockquote, .article-body blockquote {
  border-left: 4px solid var(--dz-cyan) !important;
  background: var(--dz-paper) !important;
  padding: 14px 20px !important;
  color: var(--dz-ink) !important;
  font-style: normal !important;
  border-radius: 0 12px 12px 0 !important;
}
.pros-cons { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 22px 0 !important; }
.pros-cons .pro, .pros-cons .con {
  background: #fff !important; border: 1px solid var(--dz-line) !important; border-radius: 14px !important; padding: 16px 18px !important;
}
.footer-note, .article-footer-note { color: var(--dz-muted) !important; font-size: 13.5px !important; border-top: 1px solid var(--dz-line) !important; padding-top: 14px !important; margin-top: 28px !important; }

/* extended reading / faq */
.ext-reading, .related, .article-ext-reading {
  background: var(--dz-paper) !important;
  border: 1px solid var(--dz-line) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin: 26px 0 !important;
}
.ext-reading h3, .related h3 { color: var(--dz-ink) !important; }
.ext-reading a, .related a { color: var(--dz-cyan) !important; text-decoration: none !important; }
.faq-section, .faq { border-top: 1px solid var(--dz-line) !important; margin-top: 28px !important; }
.faq-q { color: var(--dz-ink) !important; font-weight: 600 !important; }
.faq-a { color: var(--dz-muted) !important; }

/* focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--dz-cyan) !important;
  outline-offset: 2px !important;
}

/* reduce neon glow leftovers from old theme */
[class*="neon"], [class*="glass"] { box-shadow: none !important; text-shadow: none !important; }

@media (max-width: 768px) {
  .masthead h1, .masthead h1.title { font-size: 28px !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .pros-cons { grid-template-columns: 1fr !important; }
  .article-body h2, .wrapper h2, h2 { font-size: 22px !important; }
}