/* Base layout. References tokens.css only; no client-specific values live here. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--text-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Column body so a short page (the form's thank-you state) still fills the screen and
   the footer lands on the bottom edge instead of floating mid-viewport. */
body { margin: 0; font-family: var(--font-body); line-height: var(--leading); color: var(--color-text); background: var(--color-bg); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--space-2); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-2); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-3); }
section { padding: var(--space-5) 0; }
section.alt { background: var(--color-surface); }
.eyebrow { color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: var(--space-1); }
.muted { color: var(--color-muted); }

.btn { display: inline-block; padding: 14px 22px; border-radius: var(--radius); font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.btn-primary { background: var(--color-brand); color: var(--color-brand-ink); }
.btn-secondary { background: transparent; color: var(--color-brand); border: 2px solid var(--color-brand); }
.btn:disabled { opacity: .6; cursor: default; }

header.site { border-bottom: 1px solid var(--color-line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 68px; }
header.site .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--color-text); text-decoration: none; }
header.site nav a { margin-left: var(--space-3); color: var(--color-text); text-decoration: none; font-weight: 600; }
header.site .head-call { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 720px) { header.site nav { display: none; } }

.hero { padding: var(--space-6) 0; }
.hero .lead { font-size: 1.2rem; max-width: 40rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3); }
section.alt .card { background: var(--color-bg); }

.cta-band { background: var(--color-brand); color: var(--color-brand-ink); text-align: center; padding: var(--space-4) var(--space-3); }
.cta-band a { color: inherit; font-size: 1.6rem; font-weight: 800; text-decoration: none; }

.lead-card { max-width: 560px; margin: 0 auto; }
.lead-form label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.lead-form input, .lead-form textarea { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }
.lead-form .opt { font-weight: 400; color: var(--color-muted); }
.lead-form .cf-turnstile { margin-bottom: var(--space-2); }
.lead-status { margin-top: var(--space-2); }
.lead-status.err { color: var(--color-error); }
.lead-done h3 { margin-top: 0; }

footer { border-top: 1px solid var(--color-line); padding: var(--space-4) 0; color: var(--color-muted); font-size: .95rem; margin-top: auto; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }

/* Mobile sticky call bar */
.sticky-call { position: fixed; left: 0; right: 0; bottom: 0; display: none; padding: 10px var(--space-3); background: var(--color-bg); border-top: 1px solid var(--color-line); z-index: 10; }
.sticky-call .btn { width: 100%; text-align: center; }
/* The bar's clearance belongs only to pages that have the bar; on the form pages it was
   72px of empty background under the footer. */
@media (max-width: 720px) { .sticky-call { display: block; } body:has(.sticky-call) { padding-bottom: 72px; } }