/* ExpertESA design tokens , shared across every page.
   Page-local tokens (radii, gaps, sidebar width, special accents) stay in
   each page's inline <style>. */

:root {
  /* Pastel block , domestic palette per DESIGN.md */
  --sage:      #C8E6C4;
  --sage-deep: #A8D4A3;
  --peach:     #FFD6B8;
  --lavender:  #DDD6F3;
  --cream:     #F5F0E8;
  --sky:       #C5E3F7;

  /* Surface + ink */
  --bg:       #F7F5F2;
  --ink:      #1A1A1A;
  --muted:    #5B616E;
  --white:    #FFFFFF;

  /* Semantic , verified (sage/forest family) */
  --verified-forest: #166534;
  --verified-mist:   #DCFCE7;
  --verified-edge:   #BBF7D0;

  /* Semantic , stop (crimson family) */
  --stop-crimson: #DC2626;
  --stop-deep:    #991B1B;
  --stop-mist:    #FEF2F2;
  --stop-edge:    #FECACA;

  /* Type */
  --font-d: 'Fraunces', Georgia, serif;
  --font-b: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

/* ─── Breakpoint policy ───────────────────────────────────────
   Public-marketing surfaces (index, landlord, states, terms,
   privacy, state pages) use exactly three breakpoints:
     ≤1024px  — tablet down
     ≤768px   — phone
     ≤480px   — small phone
   Never introduce 600/640/700/720/900 breakpoints in public
   surfaces. Internal app surfaces (portal, admin) may use
   surface-specific breakpoints for sidebar/drawer collapse
   points; they are not subject to this policy. */

/* Honor OS-level prefers-reduced-motion across animations, transitions, and smooth scroll.
   Page-specific :hover transform resets stay on each page so they only apply where defined. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Shared navigation ───────────────────────────────────────
   Canonical layout for every public-marketing nav. Three-column
   grid with mathematical centering. Each page may still add its
   own page-local nav-* rules (hamburger drawer on index.html,
   landlord-bar above nav on index.html), but the base sticky bar,
   grid layout, logo, links, and cta pill all come from here. */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 245, 242, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.07);
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
}
.nav-logo {
  justify-self: start;
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.025em;
  color: var(--ink); text-decoration: none;
}
.nav-logo img { height: 48px; width: auto; }
.nav-links {
  justify-self: center;
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-b);
  font-size: 0.875rem; font-weight: 500;
  padding: 10px 16px; border-radius: 100px;
  background: transparent;
  transition: color 0.18s, background-color 0.18s;
}
.nav-links a:hover { color: var(--ink); background: rgba(26, 26, 26, 0.06); }
.nav-links a.active { color: var(--ink); background: rgba(26, 26, 26, 0.09); }
.nav-cta {
  justify-self: end;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px; border-radius: 100px;
  background: var(--ink); color: var(--white); text-decoration: none;
  font-family: var(--font-b); font-size: 0.875rem; font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 26, 26, 0.22); }

/* Mobile: collapse to logo + cta only; pages with hamburger drawers
   add their own .nav-hamburger styles that override .nav-cta. */
@media (max-width: 768px) {
  nav { padding: 0 18px; height: 64px; grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-logo img { height: 38px; }
}

/* ─── Shared footer ───────────────────────────────────────────
   Canonical light footer used on every public-marketing surface.
   Markup pattern:
     <footer>
       <div class="footer-inner">
         <div class="footer-row">
           <div class="footer-brand">…logo + tag…</div>
           <div class="footer-links">…links…</div>
         </div>
         <p class="footer-disclaimer">…short referral line…</p>
         <div class="footer-bottom">…long legal + copyright…</div>
       </div>
     </footer>
*/
footer {
  background: transparent;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  padding: 40px 24px 48px;
  margin-top: 32px;
}
footer a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
footer a:hover { color: var(--ink); }
.footer-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-row {
  display: flex; flex-direction: column; gap: 22px;
  align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.footer-brand { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.footer-brand img { height: 44px; width: auto; }
.footer-tag {
  font-family: var(--font-b);
  font-size: 0.86rem; color: var(--muted);
}
.footer-links {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-b); font-size: 0.88rem;
}
.footer-links a { font-weight: 500; }
.footer-disclaimer {
  max-width: 920px;
  margin: 24px auto 12px;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-b);
  font-size: 0.82rem; color: var(--muted);
  line-height: 1.55;
}
.footer-bottom {
  font-family: var(--font-b);
  font-size: 0.78rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; line-height: 1.65;
  max-width: 920px; margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}