/* ── Legal / compliance pages (privacy, sms) ─────────────────────────────
   Static HTML pages (not part of the React bundle) so carrier/A2P
   verification bots and curl see real content without executing JS.
   Reuses the same design tokens + component patterns as src/styles.css. */

:root {
  --ink: #2b2113;
  --forest: #26362a;
  --gold: #d9a24a;
  --gold-deep: #8d6b39;
  --cream: #f8f5ee;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; }
a { color: var(--gold-deep); text-decoration: underline; }
a:hover { color: var(--forest); }
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;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #23180a; box-shadow: 0 8px 24px rgba(228,172,89,.35); }

/* Header (mirrors src/styles.css .hdr) */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--forest) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; }
.logo .badge {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gold); color: #23180a; font-family: var(--font-heading); font-weight: 800; font-size: 18px;
}
.logo b { font-family: var(--font-heading); font-size: 18px; display: block; }
.logo span { font-size: 10px; letter-spacing: .16em; color: var(--gold); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: #fff; }

/* Legal content */
.legal { padding: 64px 0 88px; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); margin: 14px 0 8px; color: var(--forest); }
.legal-meta { color: #6b6355; font-size: 15px; margin-bottom: 36px; }
.legal h2 { font-size: 22px; margin: 34px 0 12px; color: var(--forest); }
.legal p { color: #4a4436; font-size: 16px; margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 22px; color: #4a4436; font-size: 16px; }
.legal li { margin-bottom: 8px; }
.legal-callout {
  background: #fff; border: 1.5px solid var(--gold); border-radius: 14px;
  padding: 18px 22px; margin: 18px 0 22px; box-shadow: 0 6px 20px rgba(228,172,89,.14);
}
.legal-callout p { margin: 0; color: var(--forest); }
.legal-fine { color: #7a7263; font-size: 13.5px; margin-top: 22px; }
.legal-footnote { color: #8a8272; font-size: 13px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e6ddcc; }

/* Form (mirrors src/styles.css .fld / .consent / .funnel-success) */
.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: #6b6355; letter-spacing: .01em; }
.fld input { padding: 12px 14px; border: 1.5px solid #e6ddcc; border-radius: 10px; font: 15px var(--font-body); background: #fff; }
.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: #4a4438; 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: #fff; border: 1px solid #ece5d8; border-radius: 18px; max-width: 460px; }
.funnel-success .check { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 22%, #fff); color: var(--gold-deep); font-size: 30px; line-height: 56px; font-weight: 800; }
.funnel-success h3 { font-family: var(--font-heading); color: var(--forest); margin: 0 0 8px; }
.funnel-success p { color: #5a5346; font-size: 15px; margin: 0; }

/* Footer (mirrors src/styles.css .ftr) */
.ftr { background: color-mix(in srgb, var(--forest) 82%, black); color: rgba(255,255,255,.6); 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 a { color: rgba(255,255,255,.75); }
.ftr a:hover { color: #fff; }

/* Footer contact block — carrier/A2P brand-verification requirement: the
   registered business address + phone must be visible on the SMS opt-in
   and terms pages. 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: #fff; }