/* Asymmetry Computing — site polish layer  (2026-06-20)
   Additive, layout-preserving. Loaded AFTER the compiled stylesheet.
   Goals:
     A. Apple-caliber global type / motion / depth refinements.
     B. Harmonize the React home page onto the editorial subpage system
        (solutions.css): warm #f4f4f1 ground, electric-blue #1d35ff + lime
        accents, heavier 800-weight display headlines, blue mono eyebrow.
   Safe to remove — touches presentation only, never layout structure. */

:root{
  --ac-bg:#f4f4f1;        /* warm editorial ground (matches subpages)   */
  --ac-ink:#102033;       /* primary display ink                         */
  --ac-blue:#1d35ff;      /* electric brand blue                         */
  --ac-blue-2:#6a3cff;    /* gradient partner                            */
  --ac-lime:#e6ff4b;      /* lime CTA accent                             */
  --ac-line:rgba(16,32,51,.10);
}

/* ─────────────────────────────────────────────────────────────────────
   A · GLOBAL — premium rendering everywhere
   ───────────────────────────────────────────────────────────────────── */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{ font-feature-settings:"kern" 1,"liga" 1,"calt" 1; }

/* Stats & tables line up */
.font-mono,[class*="font-mono"],table{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"kern" 1;
}

/* Optical tracking + confident weight on large display headings */
h1,h2,
[class*="text-4xl"],[class*="text-5xl"],
[class*="text-6xl"],[class*="text-7xl"],
[class*="text-[2"],[class*="text-[3"],[class*="text-[4"],[class*="text-[5"]{
  letter-spacing:-.028em;
}

/* Smooth state transitions + clear, on-brand focus rings */
a,button,[role="button"]{
  transition:color .18s ease,background-color .18s ease,
    border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--ac-blue);
  outline-offset:2px;
  border-radius:6px;
}

/* Brand selection + slim scrollbar */
::selection{ background:rgba(29,53,255,.16); }
*{ scrollbar-width:thin; scrollbar-color:#c7d0db transparent; }
::-webkit-scrollbar{ width:10px;height:10px; }
::-webkit-scrollbar-thumb{
  background:#c7d0db;border-radius:8px;
  border:2px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:#aab6c4; }

/* Gentle lift on card-like surfaces (hover-capable pointers only) */
@media (hover:hover) and (pointer:fine){
  [class*="rounded-2xl"][class*="shadow-["][class*="border"]:hover,
  [class*="rounded-3xl"][class*="shadow-["][class*="border"]:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 48px rgba(15,23,42,.10);
  }
}

@media (prefers-reduced-motion:reduce){
  a,button,[role="button"],
  [class*="rounded-2xl"],[class*="rounded-3xl"]{ transition:none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   B · HOME — adopt the editorial subpage identity
   Selectors target the compiled hero markup (verified class names).
   ───────────────────────────────────────────────────────────────────── */

/* B1 · Warm editorial ground everywhere (cool grounds → warm #f4f4f1) so the
   SPA pages (home, company, demo, docs headers) match the static pages. */
[class~="bg-[#F4F6F8]"],
[class~="bg-[#F4F7FB]"],
[class~="bg-[#F4F8FF]"],
[class~="bg-[#F5F7FA]"]{ background-color:var(--ac-bg) !important; }
[class~="border-[#D9E2EC]"]{ border-color:rgba(16,32,51,.08) !important; }

/* B2 · Hero eyebrow: emerald pill → blue mono kicker (matches .sec-kicker) */
#root span[class*="bg-emerald-50"][class*="text-emerald-700"]{
  background:#fff !important;
  border-color:rgba(29,53,255,.16) !important;
  color:var(--ac-blue) !important;
  box-shadow:0 6px 20px rgba(20,20,20,.05);
  letter-spacing:.14em;
}
#root span[class*="bg-emerald-50"][class*="text-emerald-700"] .bg-emerald-500,
#root span[class*="bg-emerald-50"][class*="text-emerald-700"] [class*="bg-emerald-500"]{
  background-color:var(--ac-blue) !important;
}

/* B3 · Display headline: match the subpage editorial type scale exactly
   (solutions.css .hero h1 → clamp(38px,7vw,74px), weight 800, -.03em). */
#root h1[class*="font-heading"]{
  font-size:clamp(40px,6.4vw,74px) !important;
  font-weight:800 !important;
  letter-spacing:-.032em !important;
  line-height:1.04 !important;
  color:var(--ac-ink) !important;
}
/* sub-headline + lede sizes matched to the subpage system */
#root h2[class*="font-medium"][class*="tracking-tight"]{
  font-size:clamp(19px,2.4vw,24px) !important;
}
#root section[class~="bg-[#F4F6F8]"] p[class*="text-base"]{
  font-size:clamp(15.5px,1.5vw,17px) !important;
  line-height:1.65 !important;
}
/* on-page section headings (Features / evidence blocks) → subpage h2 scale */
#root h2[class*="text-3xl"],
#root h2[class*="text-4xl"],
#root h2[class*="text-[2"],
#root h2[class*="text-[3"]{
  font-size:clamp(27px,4.2vw,44px) !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
}
/* the trailing accent period: emerald → brand blue */
#root h1[class*="font-heading"] [class*="text-emerald-500"],
#root h2[class*="tracking-tight"] [class*="text-emerald-500"]{
  color:var(--ac-blue) !important;
}

/* B4 · Sub-headline weight/colour parity */
#root h2[class*="font-medium"][class*="tracking-tight"]{
  font-weight:600 !important;
  color:#2c2c2a !important;
}

/* B5 · Primary navy CTA → near-black ink with blue hover (matches .btn) */
#root a[class~="bg-[#0B1B2B]"]{ background-color:#0f1419 !important; }
@media (hover:hover){
  #root a[class~="bg-[#0B1B2B]"]:hover{ background-color:var(--ac-blue) !important; }
}

/* B6 · Moderate accent unification — recolor DECORATIVE emerald/indigo to the
   brand blue across every home section, so the page reads as one family with
   the subpages. Live-status pulse dots are deliberately preserved green (B7). */
#root [class*="text-emerald-4"],
#root [class*="text-emerald-5"],
#root [class*="text-emerald-6"],
#root [class*="text-emerald-7"],
#root [class*="text-green-5"],
#root [class*="text-green-6"],
#root [class*="text-indigo-4"],
#root [class*="text-indigo-5"],
#root [class*="text-indigo-6"]{ color:var(--ac-blue) !important; }

#root [class*="border-emerald-"],
#root [class*="border-indigo-"]{ border-color:rgba(29,53,255,.30) !important; }

#root [class*="bg-emerald-50"]:not(:has(.animate-pulse)):not(:has(.animate-ping)),
#root [class*="bg-indigo-50"]{ background-color:rgba(29,53,255,.06) !important; }

/* decorative emerald fills used as accents (bars, underlines, icon chips) */
#root [class*="bg-emerald-400"],
#root [class*="bg-indigo-400"],
#root [class*="bg-indigo-500"],
#root [class*="bg-indigo-600"]{ background-color:var(--ac-blue) !important; }

/* gradient stops (from-/via-/to-emerald|indigo) → blue family */
#root [class*="from-emerald-"],#root [class*="from-indigo-"]{ --tw-gradient-from:var(--ac-blue) !important; }
#root [class*="via-emerald-"], #root [class*="via-indigo-"]{ --tw-gradient-via:var(--ac-blue-2) !important; }
#root [class*="to-emerald-"],  #root [class*="to-indigo-"]{ --tw-gradient-to:var(--ac-blue-2) !important; }

/* B7 · PRESERVE the live/operational green — pulse + ping status indicators
   keep their semantic emerald (matches subpage .site-status green). */
#root [class*="bg-emerald-500"][class*="animate-pulse"],
#root [class*="bg-emerald-500"][class*="animate-ping"],
#root [class*="bg-emerald-400"][class*="animate-pulse"],
#root [class*="bg-green-500"][class*="animate-pulse"]{ background-color:#10b981 !important; }

/* B8 · Slightly more generous heading rhythm on home (Apple-grade breathing) */
#root h1[class*="font-heading"]{ line-height:.96 !important; }

/* B9 · Make the compiled SPA pill nav match the static pill nav exactly so the
   nav never jumps in size/shape/position between pages. */
nav[class*="border-stone-200"][class*="rounded-full"]{
  top:14px !important;
  max-width:1240px !important;
  background:#fff !important;
  box-shadow:0 12px 40px rgba(16,32,51,.08) !important;
  border-color:rgba(16,32,51,.07) !important;
}