/* ===========================================================================
   MiraFloor — "claude design" skin
   Research-journal aesthetic: warm ivory ground (never pure white), near-black
   ink, hard edges, zero shadows, typography-led emphasis.
   Chromatic budget is deliberately tiny: the brand red #E31E24 is the single
   accent held in reserve (kept so the site still matches Google Business
   Profile, ads and print).
   Loaded LAST — remove the <link> to revert everything.
   =========================================================================== */
:root{
  --paper:#FAF9F6;      /* ground — warm ivory, never #fff            */
  --paper-2:#F3F1EB;    /* alternating band                            */
  --paper-3:#E9E6DE;    /* hairlines / dividers                        */
  --ink:#141413;        /* dominant ink                                */
  --ink-2:#43413D;      /* body copy            (10.4:1 on paper)      */
  --ink-3:#6B6862;      /* muted / captions      (5.36:1 on paper)     */
  --accent:#E31E24;     /* the one reserved accent                     */
  --night:#141413;      /* inverted sections                           */
}

/* ---------- ground ---------- */
html,body{background:var(--paper)!important;color:var(--ink-2)!important}

.bg-white{background-color:var(--paper)!important}
.bg-slate-50{background-color:var(--paper-2)!important}
.bg-slate-100{background-color:var(--paper-3)!important}
.bg-slate-900,.bg-dark,.bg-slate-800{background-color:var(--night)!important}

/* ---------- ink ---------- */
.text-slate-900,.text-slate-800{color:var(--ink)!important}
.text-slate-700,.text-slate-600{color:var(--ink-2)!important}
/* slate-500 is a muted tone on light ground; slate-400/300 are this site's
   LIGHT-on-dark utilities (hero stat labels) — inking them made them vanish. */
.text-slate-500{color:var(--ink-3)!important}
.text-slate-400,.text-slate-300{color:#B9B5AC!important}
/* No light-ground guard here on purpose: an ancestor carries .bg-white on most
   of the page, so the guard matched everything and re-inked the hero stats.
   Light-ground slate-400 was already migrated to slate-600 in an earlier pass. */
/* headings inherit their section's colour; only tint them on light ground */
:where(section,div,main):not(.hero-bg):not(.hero):not(.cta):not(.bg-slate-900) > :where(h1,h2,h3,h4){color:var(--ink)}

/* on inverted (near-black) sections keep type legible */
/* Deliberately NOT re-colouring .text-slate-* inside dark sections: on this site
   those elements always sit on a light card nested in the dark band, so forcing
   them light made the calculator's mix cards unreadable. */

/* ---------- hairlines ---------- */
.border-slate-100,.border-slate-200,.border-slate-300{border-color:var(--paper-3)!important}

/* ---------- accent stays the brand red ---------- */
/* NB: no descendant selector here — '.text-white *' repainted the dark text
   inside light cards nested in dark sections (calculator mix cards). */
.text-white{color:#FAF9F6!important}
.text-brand{color:var(--accent)!important}
.bg-brand{background-color:var(--accent)!important}
.border-brand{border-color:var(--accent)!important}

/* ---------- hard edges, zero shadows ---------- */
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
.rounded-3xl,.rounded-2xl{border-radius:6px!important}
.rounded-xl,.rounded-lg{border-radius:4px!important}
.card,article.card{border:1px solid var(--paper-3)!important;background-color:var(--paper)!important}

/* ---------- buttons: flat, 0px; primary keeps the signature curve ---------- */
.btn,button,.btn-outline{border-radius:0!important}
.btn-primary,.bg-brand.rounded-xl,a.bg-brand{
  border-radius:0 0 10px 10px!important;   /* flat top, rounded bottom */
  background-color:var(--accent)!important;color:#fff!important;
}
.btn-outline{background-color:transparent!important;border:1px solid var(--ink)!important;color:var(--ink)!important}
/* on inverted grounds the outline button must invert too, or it disappears */
.hero .btn-outline,.hero-bg .btn-outline,.cta .btn-outline,.bg-slate-900 .btn-outline,
.hero-bg a[class*='border-white'],.hero-bg button[class*='border-white']{
  border-color:rgba(250,249,246,.45)!important;color:#FAF9F6!important;background-color:transparent!important}
.hero .btn-outline:hover,.hero-bg .btn-outline:hover,.cta .btn-outline:hover{
  border-color:#FAF9F6!important;background-color:rgba(250,249,246,.08)!important}

/* ---------- focus: visible, never removed ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent)!important;outline-offset:2px!important
}

/* ===================== typography & rhythm =====================
   Emphasis comes from type and hairlines — never from glow or colour. */
body{-webkit-font-smoothing:antialiased;letter-spacing:-0.005em}

h1{font-weight:800!important;letter-spacing:-0.035em!important;line-height:1.04!important;text-wrap:balance}
h2{font-weight:800!important;letter-spacing:-0.028em!important;line-height:1.1!important;text-wrap:balance}
h3{font-weight:700!important;letter-spacing:-0.018em!important}

/* uppercase eyebrows earn their spacing */
.kicker,[class*="tracking-wider"],[class*="tracking-widest"]{
  letter-spacing:.16em!important;font-size:11.5px!important;font-weight:800!important;
  color:var(--ink-3)!important;text-transform:uppercase
}

/* body copy: room to breathe, measure kept readable */
p{line-height:1.68}
section p:not(.mini):not([class*="text-xs"]){max-width:68ch}

/* numerals line up wherever they sit in columns */
table,.stat b,.stats,[class*="tabular"]{font-variant-numeric:tabular-nums}

/* ---- alternating ivory <-> near-black band rhythm ---- */
section.s,section[class*="py-"]{border-top:1px solid var(--paper-3)}
section.alt,.bg-slate-50{background:var(--paper-2)!important}

/* ---- hairline-led cards instead of floating shadow boxes ---- */
.card,article.card,.wiz,details{
  border:1px solid var(--paper-3)!important;background-color:var(--paper)!important;
  transition:border-color .18s ease
}
.card:hover,article.card:hover{border-color:var(--ink)!important;transform:none!important}

/* ---- tables read as data, not decoration ---- */
table th{color:var(--ink)!important;font-weight:800!important;background:var(--paper-2)!important}
table td,table th{border-color:var(--paper-3)!important}

/* ---- inverted feature blocks ---- */
.hero,.cta,footer,.bg-slate-900{background-color:var(--night)!important;color:var(--paper)!important}
.hero-bg{color:var(--paper)!important}   /* keep its photographic background intact */
.hero h1,.hero-bg h1,.hero-bg h2,.cta h2,footer .t{color:var(--paper)!important}
.hero p.sub,.hero-bg p,.cta p{color:#B9B5AC!important}
.stat{background-color:rgba(250,249,246,.05)!important;border:1px solid rgba(250,249,246,.14)!important}
.stat b{color:var(--paper)!important}
.stat span{color:#B9B5AC!important}
.tag{background-color:rgba(250,249,246,.07)!important;border:1px solid rgba(250,249,246,.16)!important;color:var(--paper)!important;border-radius:0!important}

/* ---- form fields on the dark CTA ---- */
.form input{border-radius:0!important;background-color:rgba(250,249,246,.06)!important;
  border:1px solid rgba(250,249,246,.22)!important;color:var(--paper)!important}
.form input::placeholder{color:#8E8A82!important}

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

/* ===== landing-page (lp.css) tokens re-pointed at the ivory scale =====
   lp.css ships cool slate greys tuned for a white ground; on warm ivory they
   drop below AA. Overriding the tokens fixes every consumer at once. */
:root{
  --slate:#6B6862;   /* was #64748B — 5.36:1 on --paper */
  --line:#E9E6DE;    /* warm hairline instead of cool #E2E8F0 */
  --dark:#141413;    /* single near-black for inverted bands */
}
.wiz-hint,.mini,.zones,.fbar{color:var(--ink-3)!important}
.lead,.card p,.check li,.check-a li{color:var(--ink-2)!important}
.wiz-q-title,.card h3,.combo h3,.combo-a h3{color:var(--ink)!important}

/* these live on near-black grounds — keep them light, not inked */
.hero .mini,.hero .sub,.hero .tag,.cta p,footer .zones,footer .fbar{color:#B9B5AC!important}
.hero .mini{color:#8E8A82!important}

/* teal/amber wizard accents drifted away from the brand — bring them back in */
.wiz-opt.sel{border-color:var(--accent)!important;background-color:#FBF2F2!important;color:var(--ink)!important}
.wiz-opt:hover{border-color:var(--accent)!important}
.wiz-opt:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

/* Brand red as TEXT on ivory measures 4.45:1 — just under AA. Fills keep the
   exact brand colour (white-on-red passes easily); only red type is deepened. */
:root{--accent-ink:#D4191E}   /* 5.04:1 on --paper */
.text-brand,.hd-phone,.kicker,.combo .kick,a.text-brand,
.wiz-links a.article-link,.step b{color:var(--accent-ink)!important}
.bg-brand,.btn-primary,.logo i,.ico{background-color:var(--accent)!important}
.bg-brand,.btn-primary{color:#fff!important}