/* ── Impulsion SMS-compliance pages (privacy, terms, sms opt-in) ─────────
   Plain static HTML/CSS — no JS framework, no client-side routing — so
   carrier/A2P verification bots and curl see full real content on a raw
   GET. Brand: antique gold #c69d4d accent, near-white/near-black
   high-contrast body, Fraunces serif for display type (WONK axis pinned
   to 0 per apps/client/DESIGN-SYSTEM.md so lowercase f/g don't render
   wonky), Inter for body copy. Self-contained: no app tokens imported. */

:root {
  --ink: #171310;
  --charcoal: #1c1712;
  --charcoal-deep: #120e0a;
  --gold: #c69d4d;
  --gold-deep: #8f7133;
  --paper: #ffffff;
  --cream: #faf8f4;
  --border: #e7e2d6;
  --muted: #6b6558;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  font-variation-settings: 'WONK' 0;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}
a { color: var(--gold-deep); text-decoration: underline; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
  cursor: pointer; border: none; transition: transform .15s ease, box-shadow .15s ease;
  letter-spacing: 0.02em; text-decoration: none; font-family: var(--font-body);
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #201808; box-shadow: 0 8px 24px rgba(198,157,77,.35); }

/* Header — near-white workspace, high contrast, gold as sparing accent only */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.logo img { width: 36px; height: 36px; object-fit: contain; }
.logo b { font-family: var(--font-heading); font-variation-settings: 'WONK' 0; font-size: 19px; display: block; color: var(--ink); }
.logo span { font-size: 10px; letter-spacing: .16em; color: var(--gold-deep); font-weight: 700; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--gold-deep); }

/* Legal content */
.legal { padding: 64px 0 88px; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); margin: 14px 0 8px; }
.legal-meta { color: var(--muted); font-size: 15px; margin-bottom: 36px; }
.legal h2 { font-size: 21px; margin: 34px 0 12px; }
.legal p { color: #38332a; font-size: 16px; margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 22px; color: #38332a; font-size: 16px; }
.legal li { margin-bottom: 8px; }
.legal-callout {
  background: var(--cream); border: 1.5px solid var(--gold); border-radius: 14px;
  padding: 18px 22px; margin: 18px 0 22px; box-shadow: 0 6px 20px rgba(198,157,77,.14);
}
.legal-callout p { margin: 0; color: var(--ink); }
.legal-fine { color: var(--muted); font-size: 13.5px; margin-top: 22px; }
.legal-footnote { color: var(--muted); font-size: 13px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Form */
.sms-form { margin: 28px 0 8px; max-width: 460px; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.fld span { font: 600 12px var(--font-body); color: var(--muted); letter-spacing: .01em; }
.fld input { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; font: 15px var(--font-body); background: #fff; color: var(--ink); }
.fld input:focus { outline: none; border-color: var(--gold); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 20px; font-size: 13.5px; color: #38332a; line-height: 1.5; }
.consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; }

.funnel-success { text-align: center; padding: 28px 8px; background: var(--cream); border: 1px solid var(--border); border-radius: 18px; max-width: 460px; }
.funnel-success .check { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: rgba(198,157,77,.22); color: var(--gold-deep); font-size: 30px; line-height: 56px; font-weight: 800; }
.funnel-success h3 { font-family: var(--font-heading); font-variation-settings: 'WONK' 0; margin: 0 0 8px; }
.funnel-success p { color: #4a4438; font-size: 15px; margin: 0; }

/* Footer — dark charcoal, gold accent, light text */
.ftr { background: var(--charcoal-deep); color: rgba(255,255,255,.62); padding: 44px 0; font-size: 14px; }
.ftr .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.ftr .logo b { color: #fff; }
.ftr .logo span { color: var(--gold); }
.ftr a { color: rgba(255,255,255,.78); }
.ftr a:hover { color: var(--gold); }

/* Footer contact block — carrier/A2P brand-verification requirement:
   the registered business address, phone, and email must be visible on
   every legal/opt-in page. Deliberately NOT `.wrap` (which is flex in
   the footer) so this stays a simple stacked text block. */
.ftr-contact {
  max-width: 1120px; margin: 20px auto 0; padding: 20px 24px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.55);
}
.ftr-contact a { color: rgba(255,255,255,.75); }
.ftr-contact a:hover { color: var(--gold); }