:root {
  --shell-narrow: 720px;
  --shell-standard: 1120px;
  --shell-wide: 1280px;
  --shell-space-section: clamp(48px, 7vw, 88px);
  --shell-space-card: clamp(20px, 3vw, 32px);
}

.navbar > .container,
.footer > .container,
.site-footer > .container {
  width: min(100% - 48px, var(--shell-standard));
  max-width: var(--shell-standard);
  margin-inline: auto;
}

.navbar > .container { min-height: 72px; }
.navbar .nav-links { gap: clamp(14px, 2vw, 28px); }
.navbar .nav-links a[aria-current="page"] { color: var(--accent, #d4982c); }
.navbar .hamburger { flex: 0 0 auto; }

.mobile-menu a[aria-current="page"] {
  color: var(--accent, #d4982c);
  font-weight: 700;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-gold,
.btn-outline,
.tool-cta {
  min-height: 44px;
  line-height: 1.2;
}

/* Generated comparisons keep wide decision tables scrollable inside the
   article instead of widening the entire mobile viewport. */
.cmp-section,
.comparison-table-wrap,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 600px) {
  .cmp-section,
  .comparison-table-wrap,
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cmp-table { min-width: 0; }
}

.footer,
.site-footer {
  margin-top: var(--shell-space-section);
  padding: 56px 0 28px;
  background: var(--bg-secondary, #0d0d16);
  border-top: 1px solid var(--border, #222230);
}

.footer .footer-grid,
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(120px, 1fr));
  gap: 36px;
  align-items: start;
}

.footer .footer-brand p,
.site-footer .footer-brand p {
  max-width: 280px;
  color: var(--text-secondary, #999);
  line-height: 1.65;
}

.footer .footer-heading,
.site-footer .footer-heading {
  margin-bottom: 12px;
  color: var(--text-primary, #eee);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.footer ul,
.site-footer ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer a,
.site-footer a { overflow-wrap: anywhere; }
.footer .footer-bottom,
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border, #222230);
  color: var(--text-muted, #777);
  font-size: .82rem;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent, #d4982c);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .footer .footer-grid,
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .footer-brand,
  .site-footer .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .navbar > .container,
  .footer > .container,
  .site-footer > .container { width: min(100% - 32px, var(--shell-standard)); }
  .navbar > .container { min-height: 64px; }
  .navbar .nav-cta { display: none; }
  .mobile-menu { max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-menu a { min-height: 44px; display: flex; align-items: center; }
  html:not(.shell-ready) .navbar > .container {
    min-height: auto;
    padding-block: 14px;
    flex-wrap: wrap;
  }
  html:not(.shell-ready) .navbar .nav-links {
    order: 3;
    display: flex !important;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 12px;
  }
  html:not(.shell-ready) .navbar .nav-links a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
  }
  html:not(.shell-ready) .navbar .hamburger { display: none !important; }
  .footer,
  .site-footer { padding-top: 40px; }
}

@media (max-width: 520px) {
  .footer .footer-grid,
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer .footer-brand,
  .site-footer .footer-brand { grid-column: auto; }
  .footer .footer-bottom,
  .site-footer .footer-bottom { flex-direction: column; }
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-gold,
  .btn-outline,
  .tool-cta { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
  .sa-pv-stat[style] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100% !important;
    max-width: 100%;
    margin-inline: 0 !important;
  }
  .sa-pv-stat .box { min-width: 0; }
}