/* Global UI refresh loaded last on every page. */
:root {
  --ui-bg: #f5f7fb;
  --ui-surface: #ffffff;
  --ui-ink: #111827;
  --ui-muted: #667085;
  --ui-line: #dce4ef;
  --ui-blue: #2563eb;
  --ui-green: #059669;
  --ui-red: #dc2626;
  --ui-amber: #b45309;
  --ui-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
  --ui-shadow-soft: 0 8px 20px rgba(17, 24, 39, 0.06);
}

html {
  background: var(--ui-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ui-bg) !important;
  color: var(--ui-ink);
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0 !important;
}

.nav,
.mobile-nav,
.mobile-nav.open,
.mobile-menu-btn,
.blog-nav,
.breadcrumb {
  display: none !important;
}

.header,
header:has(.blog-header-inner) {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  padding: 18px 16px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-inner,
.blog-header-inner {
  width: min(100% - 0px, 760px) !important;
  max-width: 760px !important;
  min-height: 36px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.logo,
.logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--ui-ink) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.logo span:first-child {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--ui-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.logo-suffix {
  color: #9ca3af !important;
}

.main,
main.main,
.blog-main,
.sitemap-page {
  width: min(100% - 28px, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 18px 0 44px !important;
}

.page-title,
.blog-title,
.sitemap-page h1 {
  margin: 8px 0 8px !important;
  color: var(--ui-ink) !important;
  font-size: 1.86rem !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  word-break: keep-all;
}

.page-desc,
.blog-desc,
.sitemap-page .count {
  max-width: 680px;
  margin: 0 0 20px !important;
  color: var(--ui-muted) !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  word-break: keep-all;
}

.main > div[style*="max-width:560px"],
.main > div[style*="max-width: 560px"],
.main > div[style*="max-width:720px"],
.main > div[style*="max-width: 720px"] {
  width: 100% !important;
  max-width: 760px !important;
}

.card,
.blog-card,
.post-card,
.category-card,
.summary-card,
.result-box,
.comparison-box,
.comparison-card,
.chart-container,
.info-box,
.result-placeholder,
.sch-wrap,
details {
  border-radius: 8px !important;
}

.card,
.blog-card,
.post-card,
.category-card {
  margin-bottom: 14px !important;
  padding: 22px !important;
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

.card:hover,
.blog-card:hover,
.post-card:hover,
.category-card:hover {
  border-color: #cbd5e1 !important;
}

.sal-hero,
[class*="-hero"] {
  border-radius: 8px !important;
}

.sal-hero {
  margin-bottom: 14px !important;
  padding: 22px !important;
  border: 1px solid #bfdbfe !important;
  background: #eff6ff !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.sal-hero::after {
  display: none !important;
}

.sal-badge {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-radius: 999px !important;
}

.sal-hero-title {
  color: var(--ui-ink) !important;
  font-size: 1.25rem !important;
}

.sal-hero-desc {
  color: #4b5563 !important;
  opacity: 1 !important;
}

.input-row {
  margin-bottom: 18px !important;
}

.input-label {
  margin-bottom: 8px !important;
  color: #374151 !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
  word-break: keep-all;
}

.input-hint {
  color: #8b95a1 !important;
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

.input-wrap {
  align-items: stretch !important;
}

.input-field,
.date-input,
.select-input,
textarea.input-field {
  min-height: 54px !important;
  border: 1px solid #cfd8e5 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.input-field:hover,
.date-input:hover,
.select-input:hover {
  border-color: #a9b6c8 !important;
}

.input-field:focus,
.date-input:focus,
.select-input:focus,
textarea.input-field:focus {
  border-color: #111827 !important;
  box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.09) !important;
}

.input-field.has-suffix {
  border-radius: 8px 0 0 8px !important;
}

.input-suffix {
  min-height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-color: #cfd8e5 !important;
  border-radius: 0 8px 8px 0 !important;
  background: #f8fafc !important;
  color: #596579 !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

.input-wrap.is-focused .input-suffix {
  border-color: #111827 !important;
  color: #111827 !important;
  background: #f8fafc !important;
}

.toggle-group,
.tab-bar {
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: #eef2f7 !important;
}

.toggle-btn,
.tab-btn,
.view-toggle button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #596579 !important;
  font-size: 0.9rem !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.toggle-btn.active,
.tab-btn.active,
.view-toggle button.active {
  background: #fff !important;
  color: var(--ui-ink) !important;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08) !important;
}

.btn-primary,
.preset-btn,
.preset-button,
.inc-btn,
.more-btn,
.primary-link,
.sticky-cta-btn,
.filter-tab,
.chip {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

.btn-primary {
  min-height: 54px !important;
  background: var(--ui-ink) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 22px rgba(17, 24, 39, 0.14) !important;
}

.btn-primary:hover {
  opacity: 0.96 !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(17, 24, 39, 0.18) !important;
}

.preset-btn,
.preset-button,
.inc-btn {
  min-height: 42px !important;
  border: 1px solid var(--ui-line) !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  white-space: normal !important;
}

.preset-btn:hover,
.preset-button:hover,
.inc-btn:hover,
.preset-btn.active,
.preset-button.active {
  border-color: #111827 !important;
  background: #111827 !important;
  color: #fff !important;
}

.result-box,
.comparison-box,
.comparison-card,
.peer-box,
.ins-card,
.raise-box {
  border: 1px solid var(--ui-line) !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.result-box {
  padding: 18px 16px !important;
  text-align: left !important;
}

.result-box.highlight,
.summary-card {
  border: 0 !important;
  background: var(--ui-ink) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(17, 24, 39, 0.16) !important;
}

.result-label,
.detail-label {
  color: #6b7280 !important;
  font-weight: 780 !important;
}

.result-box.highlight .result-label,
.result-box.highlight .result-sub,
.summary-card .result-label,
.summary-card .result-sub {
  color: rgba(255, 255, 255, 0.72) !important;
}

.result-value,
.detail-value,
.stat-value,
.raise-value,
.peer-value,
.comparison-card .c-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

.result-value {
  color: var(--ui-ink) !important;
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere;
}

.result-box.highlight .result-value,
.summary-card .result-value {
  color: #fff !important;
}

.detail-row {
  min-height: 38px !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom-color: #edf2f7 !important;
}

.seo-title {
  color: var(--ui-ink) !important;
  font-size: 1.04rem !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.seo-text {
  color: #4b5563 !important;
  font-size: 0.91rem !important;
  line-height: 1.78 !important;
  word-break: keep-all;
}

.chart-container,
.sch-wrap,
table {
  border-color: var(--ui-line) !important;
}

.calc-table th,
.compare-table th,
.strategy-table th,
.sch-table th,
table th {
  background: #f8fafc !important;
  color: #4b5563 !important;
  letter-spacing: 0 !important;
}

.calc-table td,
.compare-table td,
.strategy-table td,
.sch-table td,
table td {
  color: #374151 !important;
}

.result-placeholder {
  border: 1px solid var(--ui-line) !important;
  background: #f8fafc !important;
  color: #4b5563 !important;
}

.footer-enhanced,
.blog-footer {
  margin-top: 36px !important;
  background: #111827 !important;
  color: #cbd5e1 !important;
}

.footer-brand,
.footer-col-title,
.footer-bottom {
  letter-spacing: 0 !important;
}

#updateBadge {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  padding: 5px 10px !important;
}

#relatedCalcs > div {
  border-radius: 8px !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}

.related-calc-item {
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid var(--ui-line) !important;
  color: #374151 !important;
}

.related-calc-item:hover {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}

#saas-profile-badge,
#saas-profile-float {
  display: none !important;
}

#saas-toolbar {
  border-radius: 8px !important;
}

@media (max-width: 720px) {
  .header,
  header:has(.blog-header-inner) {
    padding-top: 14px !important;
  }

  .main,
  main.main,
  .blog-main,
  .sitemap-page {
    width: min(100% - 22px, 760px) !important;
    padding-top: 14px !important;
  }

  .page-title,
  .blog-title,
  .sitemap-page h1 {
    font-size: 1.46rem !important;
  }

  .page-desc,
  .blog-desc {
    font-size: 0.89rem !important;
    margin-bottom: 16px !important;
  }

  .card,
  .blog-card,
  .post-card,
  .category-card {
    padding: 17px !important;
  }

  .result-grid,
  .result-grid-3,
  .insurance-grid,
  .comparison-grid,
  .peer-compare,
  .raise-card {
    grid-template-columns: 1fr !important;
  }

  .input-field,
  .date-input,
  .select-input,
  .input-suffix {
    min-height: 50px !important;
    font-size: 0.95rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}