/* GoCheckMyMortgage — shared family tokens + common components.
   Loaded by every page; per-page CSS (checker.css, article.css) builds on these.

   Family DNA is REUSED from the sibling's token file (home-command-center/
   public/css/tokens.css): same reset, shadow scale, and single-file-source-of-
   truth discipline — NOT duplicated palette. The palette + type are this site's
   own (Constitution §9: deep ink-slate primary, aged-brass accent, cream ground,
   clay for "not yet", sage for "eligible"; Montserrat/Open Sans like Pet), so the
   three sites read as one publisher while staying distinct at a glance. */
:root {
  /* ground + ink */
  --bg: #F6F4EE;              /* cream field */
  --ink: #22303A;
  --card: #FFFFFF;
  --line: #E4E1D8;
  --muted: #5C6A72;

  /* brand */
  --slate: #1E3442;          /* deep ink-slate primary (hero, verdict band) */
  --slate-deep: #152632;
  --brass: #B08A3E;          /* aged-brass accent */
  --brass-soft: #F1E6CE;

  /* verdict registers */
  --sage: #E0EDE3;   --sage-ink: #20613F;    /* eligible / good news */
  --amber: #F6E9D2;  --amber-ink: #8F6516;   /* so close / two paths */
  --clay: #F5E1DA;   --clay-ink: #A9432C;    /* not yet / structural */

  --shadow: 0 1px 2px rgba(34,48,58,.04), 0 10px 30px rgba(34,48,58,.07);
  --shadow-lg: 0 30px 70px rgba(21,38,50,.28);

  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-head: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;          /* base — never smaller; the rem scale keys off this */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; }

.wrap { max-width: 760px; margin: 0 auto; }

.eyebrow {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--brass); font-weight: 700; margin-bottom: 6px;
}

/* Brand lockup — shared across pages. */
.brand {
  display: flex; gap: 8px; align-items: center;
  font-weight: 800; font-family: var(--font-head); margin-bottom: 20px;
}
.brand .ico {
  width: 26px; height: 26px; border-radius: 7px; background: var(--slate);
  color: #fff; display: grid; place-items: center; font-size: .75rem;
}
.brand .free {
  margin-left: auto; font-size: .68rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  color: var(--muted); font-family: var(--font-body); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* ---- usability controls (a11y.js, ported from the Parents chassis) ---- */
.a11y-widget { position: fixed; left: 14px; bottom: 14px; z-index: 80; }
.a11y-toggle {
  width: 46px; height: 46px; border-radius: 50%; background: var(--card);
  border: 1.5px solid var(--line); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 19px; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(34,48,58,.45);
  display: flex; align-items: baseline; justify-content: center; line-height: 1; gap: 1px;
}
.a11y-toggle span { font-size: 13px; }
.a11y-panel {
  position: absolute; left: 0; bottom: 54px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  box-shadow: 0 16px 40px -20px rgba(21,38,50,.5); width: 186px;
}
.a11y-cap { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.a11y-grp { display: flex; gap: 6px; margin-bottom: 8px; }
.a11y-b {
  flex: 1; min-height: 44px; border: 1.5px solid var(--line); background: var(--bg);
  color: var(--ink); border-radius: 10px; font-weight: 700; font-size: 15px;
  cursor: pointer; font-family: var(--font-body);
}
.a11y-b:hover { border-color: var(--slate); }
.a11y-b.on { background: var(--slate); color: #fff; border-color: var(--slate); }
.a11y-wide { width: 100%; font-size: 13px; min-height: 44px; }
html.a11y-contrast { --ink: #16222B; --muted: #414F58; }
html.a11y-contrast a:not(.btn-aff):not(.cta-btn):not([class*="btn"]) { text-decoration: underline; }
@media print { .a11y-widget { display: none; } }