/*
  Shared site chrome - reset, buttons, badges, cards, nav/header, mobile nav,
  section shell, and footer. Pulled out of index.html so every page (home,
  privacy policy, terms, and anything added later) links one file instead of
  duplicating ~200 lines of the same CSS three times. Page-specific sections
  (hero, verification cards, services grid, etc.) stay local to each page's
  own <style> block. No color / font / spacing / radius / shadow value is
  hand-picked here - each one pulls from design-system/tokens/*.css.
*/

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ -webkit-font-smoothing:antialiased; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

:focus-visible{ outline:none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

.wrap{max-width: var(--container-max); margin:0 auto; padding:0 var(--space-8);}
@media (max-width:720px){ .wrap{padding:0 var(--space-5);} }

.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono-label);
  text-transform:uppercase;
  color: var(--accent-verified-strong);
  display:flex; align-items:center; gap: var(--space-2);
}
.eyebrow::before{ content:""; width:16px; height:1px; background: var(--accent-verified-strong); display:inline-block; }
.eyebrow.on-inverse{ color: var(--brass-gold-300); }
.eyebrow.on-inverse::before{ background: var(--brass-gold-300); }

h1,h2,h3{ font-weight: var(--weight-bold); }

/* ---------- BUTTON (matches components/core/Button.jsx) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  cursor:pointer; border:1px solid transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-md{ padding:10px 18px; font-size: var(--text-base); }
.btn-lg{ padding:13px 24px; font-size: var(--text-md); }
.btn-primary{ background: var(--ink-navy-900); color: var(--fg-on-inverse); border-color: var(--ink-navy-900); }
.btn-primary:hover{ background: var(--ink-navy-800); }
.btn-gold{ background: var(--accent-verified); color: var(--ink-navy-900); border-color: var(--accent-verified); }
.btn-gold:hover{ background: var(--brass-gold-300); }
.btn-secondary{ background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-strong); }
.btn-secondary:hover{ background: var(--neutral-100); }

/* ---------- BADGE (matches components/feedback/Badge.jsx) ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size:11px; letter-spacing: var(--tracking-mono-label);
  text-transform:uppercase; font-weight: var(--weight-medium); border:1px solid transparent;
}
.badge-verified{ background: var(--accent-verified-soft); color: var(--brass-gold-700); border-color: var(--brass-gold-300); }

/* ---------- CARD (matches components/surfaces/Card.jsx) ---------- */
.card{ background: var(--bg-surface); border-radius: var(--radius-md); border:1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.card-elevated{ box-shadow: var(--shadow-md); }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(238,240,241,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border-default);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
a.logo{ display:inline-block; }
.navlinks{ display:none; align-items:center; gap: var(--space-8); font-size:14.5px; font-weight: var(--weight-medium); }
@media (min-width:960px){ .navlinks{ display:flex; } }
.navlinks a{ color: var(--fg-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.navlinks a:hover{ color: var(--fg-primary); }
.navcta{ display:none; }
@media (min-width:960px){ .navcta{ display:inline-flex; } }

/* ---------- MOBILE NAV (burger, <960px) ---------- */
.navburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--radius-sm);
  border:1px solid var(--border-default); background: var(--bg-surface);
  color: var(--fg-primary); cursor:pointer;
}
@media (min-width:960px){ .navburger{ display:none; } }
.mobile-nav{
  display:none; flex-direction:column;
  background: var(--bg-surface); border-bottom:1px solid var(--border-default);
  box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-8) var(--space-6);
}
.mobile-nav.open{ display:flex; }
@media (min-width:960px){ .mobile-nav{ display:none !important; } }
.mobile-nav a{
  padding: var(--space-4) 0; font-size:15px; font-weight: var(--weight-medium);
  color: var(--fg-primary); border-top:1px solid var(--border-default);
}
.mobile-nav a:first-child{ border-top:none; }
.mobile-nav .btn{ margin-top: var(--space-4); width:100%; }

/* ---------- SECTION SHELL ---------- */
section{ padding: var(--space-24) 0; }
.band-white{ background: var(--bg-surface); border-top:1px solid var(--border-default); border-bottom:1px solid var(--border-default); }
.band-tint{ background: var(--neutral-100); border-top:1px solid var(--border-default); }
.section-head{ max-width: 620px; margin-bottom: var(--space-12); }
.section-head h2{ font-family: var(--font-display); font-size: clamp(28px,3.4vw,var(--text-2xl)); letter-spacing: var(--tracking-tight); margin-top: var(--space-4); }
.section-head p{ color: var(--fg-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-top: var(--space-4); }

.svc-icon{
  width:44px; height:44px; border-radius:50%;
  background: var(--accent-verified-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--space-6); color: var(--brass-gold-700);
}

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--border-default); padding: var(--space-6) 0; }
.foot-grid{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: var(--space-6); }
.foot-note{ font-family: var(--font-mono); font-size:11.5px; color: var(--fg-muted); margin-top: var(--space-2); }
.foot-copyright{ font-family: var(--font-mono); font-size:11.5px; color: var(--fg-muted); text-align:center; white-space:nowrap; }
.foot-legal{ display:flex; gap: var(--space-6); font-size:13.5px; color: var(--fg-secondary); justify-self:end; }
@media (max-width:700px){
  .foot-grid{ grid-template-columns:1fr; text-align:center; }
  .foot-copyright{ order:2; }
  .foot-legal{ order:3; justify-self:center; }
}

/* ---------- LEGAL CONTENT (privacy policy, terms) ---------- */
.legal-hero{ padding: var(--space-16) 0 var(--space-6); }
.legal-hero h1{ font-family: var(--font-display); font-size: clamp(32px,4.4vw,var(--text-3xl)); letter-spacing: var(--tracking-tighter); margin: var(--space-4) 0 var(--space-3); }
.legal-hero .updated{ font-family: var(--font-mono); font-size:12px; letter-spacing: var(--tracking-mono-label); color: var(--fg-muted); text-transform:uppercase; }
.legal-body{ max-width: var(--container-narrow); margin:0 auto; padding-bottom: var(--space-16); }
.legal-body h2{ font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); margin: var(--space-10) 0 var(--space-3); }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color: var(--fg-secondary); font-size:15px; line-height: var(--leading-relaxed); margin-bottom: var(--space-4); }
.legal-body ul, .legal-body ol{ color: var(--fg-secondary); font-size:15px; line-height: var(--leading-relaxed); margin:0 0 var(--space-4) var(--space-6); }
.legal-body li{ margin-bottom: var(--space-2); }
.legal-body a{ color: var(--accent-verified-strong); text-decoration:underline; text-underline-offset:2px; }
.legal-body strong{ color: var(--fg-primary); font-weight: var(--weight-semibold); }
.legal-note{ background: var(--neutral-100); border:1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); font-size:13.5px; color: var(--fg-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-10); }