/*
 * Renovalith brand system — "Signal / Charge"
 * Loaded on the landing page only by wp/mu-plugins/renovalith-site.php.
 * The page markup (content/home.html) carries the desktop look as inline styles;
 * this file supplies the base reset and the responsive overrides, mirroring
 * HomeMobile.dc.html from the Claude Design artifact.
 */

:root {
  --rl-bg:        #0B2A1D;
  --rl-accent:    #17A56A;
  --rl-accent-lt: #57DBA0;
  --rl-ink:       #EAFBF3;
  --rl-muted:     #93A09A;
}

*, *::before, *::after { box-sizing: border-box; }

body.rl-body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rl-bg) !important;
  color: var(--rl-ink);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.rl-body .rl-page { display: block; width: 100%; overflow-x: hidden; }
body.rl-body .rl-page a { color: var(--rl-accent); text-decoration: none; }
body.rl-body .rl-page a:hover { color: var(--rl-accent-lt); }
body.rl-body ::selection { background: rgba(23, 165, 106, 0.35); }

/* Tablet: pull the wide 96px gutters in so nothing crowds the edge. */
@media (max-width: 1200px) {
  .rl-nav, .rl-hero, .rl-section, .rl-cta, .rl-footer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .rl-divider { margin-left: 40px !important; margin-right: 40px !important; }
}

/* Phone: single-column stack, per HomeMobile.dc.html. */
@media (max-width: 782px) {
  .rl-nav { height: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .rl-nav-links { display: none !important; }

  .rl-hero { padding: 56px 24px 48px !important; }
  .rl-hero-h1 { font-size: 40px !important; }
  .rl-hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  .rl-section { padding: 48px 24px !important; }
  .rl-section-h2 { font-size: 28px !important; }
  .rl-grid-3 { grid-template-columns: 1fr !important; gap: 20px !important; }

  .rl-cta { padding: 48px 24px 56px !important; }
  .rl-cta-h2 { font-size: 30px !important; }

  .rl-footer { padding: 40px 24px 32px !important; }
  .rl-footer-cols { flex-direction: column !important; gap: 32px !important; }
  .rl-footer-groups { gap: 40px !important; }

  .rl-divider { margin-left: 24px !important; margin-right: 24px !important; }
}