/* =================================================================
   SMC Practice — Customera.cx overlay
   Applies the locked SMC design system to existing pages.
   Loads AFTER the page's inline <style> so it wins on cascade order.
   No content changes — only typographic + chromatic + family-mark rules
   that the in-place token sweep can't express.
   ================================================================= */

:root {
  /* SMC tokens — kept here so future work can reference them by name
     without depending on the standalone colors_and_type.css. */
  --smc-paper:    oklch(0.94 0.010 250);
  --smc-paper-2:  oklch(0.88 0.020 250);
  --smc-clay:     oklch(0.78 0.035 250);
  --smc-ink:      oklch(0.18 0.012 250);
  --smc-ink-2:    oklch(0.30 0.012 250);
  --smc-muted:    oklch(0.50 0.012 250);
  --smc-rule:     oklch(0.18 0.012 250 / 0.10);
  --smc-accent:   oklch(0.55 0.045 250);
  --smc-accent-soft: oklch(0.55 0.045 250 / 0.10);
  --smc-signal:   oklch(0.55 0.13 145);

  --smc-font-sans:   'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --smc-font-italic: 'Instrument Serif', Georgia, serif;
  --smc-font-feat:   "ss01", "ss02", "cv01";
}

/* — Body spine: Hanken everywhere, with the practice's feature flags. */
body {
  font-family: var(--smc-font-sans);
  font-feature-settings: var(--smc-font-feat);
}

/* — The signature: <em> inside any headline switches to Instrument Serif
     italic in the room's slate accent. Solid, never outlined. */
h1 em, h2 em, h3 em,
.hero h1 em, .section-title em, .fw-title em, .hub-title em, .cta-title em {
  font-family: var(--smc-font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--smc-accent);
}

/* — Family mark intentionally omitted on customera.cx.
     The existing customera-logo.svg already carries the brand mark beside
     the wordmark, so the SMC 7-pixel dot would crowd the lockup. The dot
     still applies on Counsel and Library, where there is no logo image. */

/* — Family footer row (cross-site presence). Quietly added to the
     existing footer; appears only where the .footer-family-row exists. */
.footer-family-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.footer-family-row .ff-item { display: inline-flex; align-items: baseline; gap: 6px; }
.footer-family-row .ff-item.is-other { opacity: 0.55; }
.footer-family-row .ff-sq {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  transform: translateY(-1px);
}
.footer-family-row .ff-sq.ff-counsel  { background: oklch(0.44 0.065 25); }
.footer-family-row .ff-sq.ff-library  { background: oklch(0.55 0.045 155); }
.footer-family-row .ff-sq.ff-practice { background: oklch(0.55 0.045 250); }

/* =================================================================
   ADOPTED 2026-07-04 — Dark-chrome brand-system override, folded in
   from the approved mock (_scratch-mocks/customera-prod-dark-chrome).
   Unifies header + footer to canonical Practice navy + slate, applies
   the rounded/pill language, adds the family footer line, and balances
   the homepage Problem section. Header + footer + buttons only; no
   structural or content changes. Loads after each page's inline
   <style>, so these win on cascade.
   ================================================================= */

:root{
  --bs-navy:        oklch(0.18 0.012 250);   /* == --smc-ink */
  --bs-slate:       oklch(0.55 0.045 250);   /* == --smc-accent */
  --bs-slate-light: oklch(0.65 0.045 250);
  --bs-paper:       oklch(0.94 0.010 250);   /* == --smc-paper */
}

/* — Header: one consistent token navy, softer translucency, system rule */
nav{
  background: color-mix(in oklch, var(--bs-navy) 96%, transparent) !important;
  border-bottom: 1px solid color-mix(in oklch, var(--bs-paper) 12%, transparent) !important;
}
/* — Rounded (pill) language on the header actions */
.nav-cta-sprint{ background: var(--bs-slate) !important; border-radius: 999px !important; padding: 9px 18px !important; }
.nav-cta-sprint:hover{ background: var(--bs-slate-light) !important; }
.nav-cta-hub{ border-radius: 999px !important; }
.nav-cta-hub:hover{ border-color: var(--bs-slate) !important; color: var(--bs-slate-light) !important; }
.nav-menu-btn{ border-radius: 999px !important; }
.nav-dropdown{
  background: var(--bs-navy) !important;
  border: 1px solid color-mix(in oklch, var(--bs-slate) 30%, transparent) !important;
  border-radius: 12px !important;
}
/* — Footer: same token navy as the header (was a darker ad-hoc navy) */
footer{ background: var(--bs-navy) !important; }
footer::before{ background: var(--bs-slate) !important; }
.footer-col-title{ color: var(--bs-slate) !important; }
.footer-contact a{ color: var(--bs-slate) !important; }
.footer-contact a:hover{ color: var(--bs-slate-light) !important; }
.footer-legal a:hover{ color: var(--bs-slate) !important; }

/* — Body buttons to full pill, matching the header and the system default */
.btn-gold, .btn-ghost-light, .btn-ghost-dark { border-radius: 999px !important; }

/* — Family line (final footer row), on the dark chrome. This is the
     active family-footer style; the earlier .footer-family-row above is
     retained but unused (markup uses .footer-family). */
.footer-family{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 28px; margin-top:22px; padding-top:20px; border-top:1px solid color-mix(in oklch, var(--bs-paper) 12%, transparent); font-size:13.5px; font-weight:500; }
.footer-family .ff{ display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; }
.footer-family .ff.other{ color: color-mix(in oklch, var(--bs-paper) 45%, transparent); }
.footer-family .ff.self{ color: var(--bs-paper); }
.footer-family .ff.other:hover{ color: color-mix(in oklch, var(--bs-paper) 70%, transparent); }
.footer-family .ff-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; transform:translateY(-1px); }
.footer-family .dot-c{ background: oklch(0.44 0.065 25); }
.footer-family .dot-l{ background: oklch(0.55 0.045 155); }
.footer-family .dot-p{ background: var(--bs-slate); }
.footer-family .ff-verb{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; font-size:15px; margin-left:2px; }
.footer-family .v-c{ color: oklch(0.50 0.065 25); }
.footer-family .v-l{ color: oklch(0.60 0.045 155); }
.footer-family .v-p{ color: color-mix(in oklch, var(--bs-slate) 80%, white); }
@media (max-width: 640px){ .footer-family{ gap:10px 18px; } }

/* — Balance the homepage Problem section (only .problem-grid exists there;
     inert elsewhere). Left text block spans the same top-to-bottom as the
     right stat grid. Cosmetic layout only. */
.problem-grid{ align-items: stretch !important; }
.problem-statements{ margin-top: 0 !important; justify-content: space-between !important; }
@media (max-width: 900px){
  .problem-statements{ justify-content: flex-start !important; }
}