/* ClosedLoop AI v3 "alive" chrome layer.
   Loaded LAST (after tokens.css, site.css, index-CFw-kQHv.css) so it is the
   authoritative ground/type layer: it re-asserts the cool ladder tokens (the app
   bundle re-declares --muted at :root and loads before this) and reskins the shared
   nav + mega panels + buttons + mobile drawer + footer to v3. Homepage body lives in
   index.php (.v3-home). Cool ground only; orange is the sole warm accent, used for
   hover-heat + evidence + the dark-band footer link hover. Sharp 2px corners, no shadows. */

/* ---- authoritative cool ladder (wins over tokens.css + app bundle) ---- */
:root{
  --ink:#141519; --ink-2:#1B1F24; --graphite:#3A3F46; --muted:#6B6F77; --muted-2:#A1A5AC;
  --page-bg:#FCFDFD; --surface:#FFFFFF; --surface-2:#F0F2F3; --surface-3:#E9ECEE;
  --board:#F0F2F3; --board-2:#E9ECEE;
  --line:#D7DBDE; --line-soft:#E6E9EB; --rule:#E6E9EB; --rule-2:#D7DBDE;
  --orange:#FF4F00;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

/* ---- type: flip Inter -> Space Grotesk sitewide ---- */
.cl-site{ font-family:var(--sans); background:var(--page-bg); overflow-x:clip; }
.cl-site h1,.cl-site h2,.cl-site h3,.cl-site h4,.cl-site h5,.cl-site h6{ font-family:var(--sans); letter-spacing:-0.03em; }
.cl-site button,.cl-site input,.cl-site textarea,.cl-site select{ font-family:var(--sans); }

/* ================= NAV (ground bar, hairline under) ================= */
.cl-site .nav{ background:rgba(252,253,253,0.86); border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(1.3) blur(8px); -webkit-backdrop-filter:saturate(1.3) blur(8px); }
.cl-site .nav-inner{ max-width:1120px; height:62px; gap:22px; }
.cl-site .brand{ font-weight:600; font-size:17px; letter-spacing:-0.02em; color:var(--ink); }
.cl-site .nav .brand-mark{ width:26px; height:26px; }
.cl-site .nav-links{ margin-left:8px; gap:2px; }
.cl-site .nav-link{ font-weight:500; font-size:14px; color:var(--ink); border-radius:2px; padding:8px 11px; letter-spacing:-0.01em; }
.cl-site .nav-link:hover,.cl-site .nav-link.open,.cl-site .nav-link.active,
.cl-site .nav-link-group.open .nav-link{ background:rgba(255,79,0,0.08); color:var(--ink); }
.cl-site .nav-link .car{ color:var(--muted-2); }

/* mega: white panel, ONE thin cool hairline, no graphite box, no shadow, sharp corners */
.cl-site .mega{ background:var(--surface); border:1px solid var(--rule); border-radius:2px; box-shadow:none; }
.cl-site .mega h5,.cl-site .mega-v3 h5,
.cl-site .msplit-col h5,.cl-site .medit-col h5,.cl-site .mlogos-main h5{ font-family:var(--mono); color:var(--muted); }
.cl-site .mega-link{ border-radius:2px; }
.cl-site .mega-link:hover{ background:rgba(255,79,0,0.06); }
.cl-site .mega-link .ml-t{ color:var(--ink); }
.cl-site .mega-link .ml-d{ color:var(--muted); }
.cl-site .mchip{ border-radius:2px; }
.cl-site .mchip:hover{ background:var(--ink); color:var(--surface); border-color:var(--ink); }
.cl-site .mlogo-tile{ border-radius:2px; }
.cl-site .medit-hero{ border-radius:2px; }
.cl-site .medit-hero-tag{ color:var(--brand-2); }
/* promo rail: sharp cool board, no shadow, indigo signature kicker (light context = no orange) */
.cl-site .mrail{ background:var(--board); border:1px solid var(--rule); border-radius:2px !important; box-shadow:none; padding:16px 18px !important; }
.cl-site .mrail:hover{ background:var(--board-2); border-color:var(--rule-2); }
.cl-site .mrail-l{ color:var(--brand-2); font-family:var(--mono); }
.cl-site .mrail-t{ color:var(--ink); }
.cl-site .mrail-a{ color:var(--ink); font-family:var(--mono); }

/* ================= BUTTONS (ink on light; sharp 2px) ================= */
.cl-site .btn{ border-radius:2px; font-family:var(--sans); font-weight:600; letter-spacing:-0.01em; }
.cl-site .btn-primary{ background:var(--ink); color:var(--surface); border-color:var(--ink); }
.cl-site .btn-primary:hover{ background:#000; border-color:#000; }
.cl-site .btn-outline{ border-color:var(--rule-2); background:var(--surface); color:var(--ink); }
.cl-site .btn-outline:hover{ background:rgba(20,21,25,0.05); border-color:var(--ink); }
.cl-site .btn-ghost{ color:var(--ink); background:transparent; }
.cl-site .btn-ghost:hover{ color:var(--orange); background:transparent; }
.cl-site .nav-cta{ gap:12px; }
.cl-site .nav-cta .btn{ height:34px; padding:0 16px; font-size:13px; }
.cl-site .nav-cta .nav-cta-logged-out.btn-ghost{ padding:0 6px; }

/* burger + mobile drawer (mirror the desktop v3 changes) */
.cl-site .nav-burger{ border:1px solid var(--rule-2); border-radius:2px; }
.cl-site .nav-burger span{ background:var(--ink); }
.cl-site .nav-mobile{ top:62px; background:var(--page-bg); border-top:1px solid var(--rule); }
.cl-site .nav-mobile-group{ border-bottom:1px solid var(--rule); }
.cl-site .nav-mobile-section--leaf{ border-bottom:1px solid var(--rule); }
.cl-site .nav-mobile-section{ font-family:var(--sans); font-weight:600; color:var(--ink); }
.cl-site .nav-mobile-h5{ font-family:var(--mono); color:var(--muted); }
.cl-site .nav-mobile-link{ color:var(--ink); border-radius:2px; }
.cl-site .nav-mobile-link:hover{ background:rgba(255,79,0,0.08); color:var(--ink); }
.cl-site .nav-mobile-chev{ color:var(--muted); }
.cl-site .nav-mobile-cta{ border-top:1px solid var(--rule); }

/* ================= FOOTER (dark v3 band, mono heads, hairlines) ================= */
.cl-site .foot{ background:#0E0F13; border-top:1px solid rgba(255,255,255,0.10); color:#A5A9AE; }
.cl-site .foot .brand{ color:#F3F4F5; }
.cl-site .foot .foot-tag{ color:#A5A9AE; }
.cl-site .foot h4{ font-family:var(--mono); color:#F3F4F5; letter-spacing:0.16em; }
.cl-site .foot ul a{ color:#A5A9AE; }
.cl-site .foot ul a:hover{ color:var(--orange); }
.cl-site .foot .foot-trust{ color:#A5A9AE; }
.cl-site .foot .foot-social a{ border:1px solid rgba(255,255,255,0.14); border-radius:2px; color:#A5A9AE; }
.cl-site .foot .foot-social a:hover{ color:#F3F4F5; border-color:rgba(255,255,255,0.30); }
.cl-site .foot .baseline{ border-top:1px solid rgba(255,255,255,0.10); color:#767B81; font-family:var(--mono); }
.cl-site .foot .baseline-links a{ color:#A5A9AE; }
.cl-site .foot .baseline-links a:hover{ color:var(--orange); }

/* focus ring in v3 orange */
.cl-site :focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.cl-site ::selection{ background:var(--orange); color:#fff; }

/* ================= DRAFTING-GRAMMAR BACKSTOP (2026-07-10 consistency pass) ================= */
/* No shadows: the app bundle paints a faint 1px drop under .nav on top of the v3 hairline
   border — kill it so the nav carries exactly ONE rule, like every other hairline on the site. */
.cl-site .nav{ box-shadow:none; }

/* Corner-frame restore. Every page family defines `.fr` (six graphite corner ticks + ONE
   thicker signature corner: indigo on light, orange on dark bands) via background-image —
   but later `background:` SHORTHANDS on the entity classes (.fcard, .plate, .ft-mcard,
   .ig-spec, .doc-tb, .stage, .pr-tier, …) reset background-image and erased the frames
   SITEWIDE. This backstop re-asserts the frame at (0,2,1) specificity so an equal-specificity
   shorthand can never kill it again, on any page, including the inline-styled pages
   (index/pricing/product-teams). It reads the SAME custom props each family's own .fr rule
   sets (--fc/--sig/--fl/--ft), so per-family colors, tick weights, hover-grow (--fl:22px)
   and .band-dark overrides all keep working; fallbacks cover families that only set --fc. */
body.cl-site .fr{
  background-image:
    linear-gradient(var(--fc,#868A90),var(--fc,#868A90)), linear-gradient(var(--fc,#868A90),var(--fc,#868A90)),
    linear-gradient(var(--fc,#868A90),var(--fc,#868A90)), linear-gradient(var(--fc,#868A90),var(--fc,#868A90)),
    linear-gradient(var(--fc,#868A90),var(--fc,#868A90)), linear-gradient(var(--fc,#868A90),var(--fc,#868A90)),
    linear-gradient(var(--sig,var(--brand,#5F67BB)),var(--sig,var(--brand,#5F67BB))),
    linear-gradient(var(--sig,var(--brand,#5F67BB)),var(--sig,var(--brand,#5F67BB)));
  background-repeat:no-repeat;
  background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
  background-size:
    var(--fl,16px) var(--ft,0.75px), var(--ft,0.75px) var(--fl,16px),
    var(--fl,16px) var(--ft,0.75px), var(--ft,0.75px) var(--fl,16px),
    var(--fl,16px) var(--ft,0.75px), var(--ft,0.75px) var(--fl,16px),
    var(--fl,16px) var(--fts,calc(var(--ft,0.75px) * 3)), var(--fts,calc(var(--ft,0.75px) * 3)) var(--fl,16px);
}

/* Legacy-radius cleanup: site.css:415 `.cl-site .cap{ border-radius:10px }` (old app-bundle
   card) bleeds into product-teams' comparison cells — the only >2px rounding left on the
   site. Pin the drafting grammar's 2px. (Only product-teams.php uses .cap.) */
.cl-site .v3-pt .cmp .cap{ border-radius:2px; }