/* StateHandbook.com — civic indigo + amber.
   Distinctive typography per house rule: Bricolage Grotesque display,
   IBM Plex Sans body. Deliberately unlike t1 (Oswald/Source Sans, federal
   blue) and t2 (Fraunces/Source Sans, academic green) — the factory varies
   design per tenant on purpose (plan §6.1: no recognisable footprint). */

/* --- HCWF shared-chrome contract (core navbar/footer read these; core ships no
   defaults, and a tenant that omits them renders an unstyled footer on white) --- */
:root {
  --mm-navbar-bg: #1b2239;
  --mm-navbar-text: #e8ebf3;
  --mm-footer-bg: #1b2239;
  --mm-footer-text: #cdd3e2;
  --primary-color: #232c4b;
  --secondary-color: #e4a33c;
  --text-dark: #1a1f2e;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;

  --sh-indigo: #232c4b;
  --sh-indigo-dark: #141a2e;
  --sh-amber: #e4a33c;
  --sh-ink: #1a1f2e;
  --sh-paper: #f6f4ef;
  --sh-rule: #d9dbe4;
}

.site-footer { background: var(--mm-footer-bg); color: var(--mm-footer-text); }
.site-footer a { color: var(--mm-footer-text); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: var(--sh-amber); }
.site-footer h4 { color: #fff; }
.navbar, .hcwf-navbar { background: var(--mm-navbar-bg) !important; }
.hcwf-navbar .nav-link { color: var(--mm-navbar-text) !important; }
.hcwf-navbar .nav-link:hover, .hcwf-navbar .nav-link:focus { color: var(--sh-amber) !important; }
.navbar-brand img, .site-logo, .hcwf-logo-link img { max-width: 320px; max-height: 54px; }

/* --- site --- */
body { font-family: var(--font-body); color: var(--sh-ink); }
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
a { color: var(--sh-indigo); }
a:hover { color: #3d4a7a; }

.sh-hero { background: linear-gradient(158deg, var(--sh-indigo) 0%, var(--sh-indigo-dark) 92%); color: #fff; padding: 4.5rem 0 4rem; }
.sh-hero .lead { max-width: 42rem; }
.sh-hero .badge { background: var(--sh-amber); color: var(--sh-ink); font-weight: 600; }
.btn-sh { background: var(--sh-amber); border: none; color: var(--sh-ink); font-weight: 600; padding: .7rem 1.6rem; }
.btn-sh:hover { background: #f2b552; color: var(--sh-ink); }
.btn-outline-light:hover { color: var(--sh-indigo-dark); }

/* hero aside — the state picker, which IS the product's promise made visible */
.sh-picker { background: #fff; color: var(--sh-ink); border-radius: 8px; padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.38); }
.sh-picker h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: #5b6377; }
.sh-picker .sh-states { display: flex; flex-wrap: wrap; gap: .35rem; margin: .85rem 0 1rem; }
.sh-state { border: 1px solid var(--sh-rule); border-radius: 4px; padding: .2rem .5rem; font-size: .85rem;
  font-weight: 600; background: var(--sh-paper); }
.sh-picker .sh-note { font-size: .82rem; color: #5b6377; margin-bottom: 0; }
.sh-preview { border: 1px solid var(--sh-rule); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
.sh-preview img { display: block; width: 100%; height: auto; }
.sh-sample-link { color: var(--sh-indigo); font-weight: 600; }

.sh-step-num { font-family: var(--font-display); font-size: 2rem; color: var(--sh-indigo); font-weight: 700; }
.sh-section-alt { background: var(--sh-paper); }
.sh-check li { margin-bottom: .5rem; }
.sh-fineprint { font-size: .85rem; color: #5b6377; }
.sh-guide h2 { margin-top: 2.2rem; color: var(--sh-indigo); }
.sh-guide table { font-size: .93rem; }
.sh-pull { border-left: 4px solid var(--sh-amber); background: var(--sh-paper);
  padding: 1rem 1rem 1rem 1.25rem; border-radius: 4px; }
.sh-card { border: 1px solid var(--sh-rule); border-radius: 6px; padding: 1.25rem; height: 100%; background: #fff; }
.sh-card h3 { font-size: 1.05rem; }
.sh-price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--sh-indigo); }