/* CoreLayerEngine — global responsive layer (single source of truth).
   Guarantees every layout reflows fluidly from 320px phones to ultrawide.
   Loaded last on every page, so it always wins over component/inline styles. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
body{overflow-x:hidden}
p,h1,h2,h3,h4,li,a,span,div{overflow-wrap:break-word}

/* ============================================================
   EVEN VERTICAL RHYTHM — one cadence for every section, site-wide.
   Every section gets the SAME top and bottom padding (symmetric), so the
   breathing room above and below each block is equal. !important neutralises
   the ad-hoc inline padding-top:0 / padding-bottom overrides that made the
   spacing uneven. ============================================ */
.au-section{padding-top:clamp(48px,5vw,72px) !important;padding-bottom:clamp(48px,5vw,72px) !important}
.au-foot{padding-top:clamp(48px,5vw,72px)}
@media (max-width:520px){.au-section{padding-top:clamp(36px,9vw,48px) !important;padding-bottom:clamp(36px,9vw,48px) !important}}

/* generic two-column content split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);align-items:center}

/* --- fluid collapse: tablets & below --- */
@media (max-width:880px){
  .hero-grid,.feat-row,.split,.compare{grid-template-columns:1fr !important}
  .feat-row .vis{order:-1}
}
/* --- fluid collapse: phones --- */
@media (max-width:680px){
  .decisions,.sol3,.metrics,.ptiers{grid-template-columns:1fr !important}
  .au-h1{font-size:clamp(30px,8.5vw,40px)}
  .au-h2{font-size:clamp(24px,6.5vw,32px)}
}
@media (max-width:520px){
  .au-row{flex-wrap:wrap}
  .au-btn--lg{width:100%;justify-content:center}
  .billtoggle{width:100%;justify-content:center}
}

/* keep wide visuals from forcing a horizontal scrollbar */
.loopwrap{max-width:100%}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* brand mark in header/footer */
.au-brand .cle-mark{width:28px;height:28px;border-radius:9px;display:block;flex:0 0 auto}

/* live nav indicator */
.nav-live{display:inline-flex;align-items:center;gap:6px}
.nav-live-dot{width:7px;height:7px;border-radius:50%;background:#19F08F;box-shadow:0 0 8px #19F08F;animation:clepulse 1.4s infinite}
@keyframes clepulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ===================== MOBILE HEADER (hamburger drawer) ===================== */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border-radius:11px;border:1px solid var(--au-line-2);background:var(--au-surface);cursor:pointer;margin-left:auto;flex:none;padding:0}
.nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:var(--au-ink);border-radius:2px;transition:transform .22s ease,opacity .2s ease}
.nav-drawer{display:none}
@media (max-width:1080px){
  .au-nav .mega-nav,.au-nav .au-nav-cta{display:none !important}
  .nav-burger{display:flex}
  .nav-drawer{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:var(--au-surface);border-top:1px solid var(--au-line);border-bottom:1px solid var(--au-line);
    box-shadow:0 26px 50px -20px rgba(15,15,45,.4);z-index:60;
    max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .2s ease;padding:0 clamp(18px,5vw,40px)}
  .nav-toggle:checked ~ .nav-drawer{max-height:86vh;opacity:1;overflow:auto;padding-top:8px;padding-bottom:18px}
  .nav-drawer>a{padding:14px 2px;font-size:16px;font-weight:600;color:var(--au-ink);border-bottom:1px solid var(--au-line);display:flex;align-items:center;gap:8px;text-decoration:none}
  .nav-drawer>a:hover{color:var(--au-violet-ink)}
  .nav-drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .nav-drawer-cta .au-btn{width:100%;justify-content:center}
  .nav-toggle:checked ~ .au-nav-in .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .au-nav-in .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .au-nav-in .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:380px){.au-brand{font-size:17px}.au-nav-in{gap:10px}}
/* ===================== MOBILE FOOTER ===================== */
.au-foot-bot{flex-wrap:wrap;gap:8px 16px}
@media (max-width:760px){.au-foot-grid{grid-template-columns:1fr 1fr !important;gap:28px 22px}}
@media (max-width:460px){.au-foot-grid{grid-template-columns:1fr !important;gap:26px}.au-foot-bot{flex-direction:column;gap:8px;text-align:center;align-items:center}}

/* retire legacy mobile link row (replaced by hamburger drawer) */
.mega-mobile{display:none !important}

/* footer legal links */
.au-foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.au-foot-legal a{color:var(--au-muted)}
.au-foot-legal a:hover{color:var(--au-ink)}

/* brand-colored platform chips (social proof) */
.plat-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.plat-chip{display:inline-flex;align-items:center;gap:10px;background:var(--au-surface);border:1px solid var(--au-line);border-radius:999px;padding:8px 16px 8px 8px;font-weight:600;font-size:14.5px;color:var(--au-ink);box-shadow:0 2px 10px rgba(20,20,60,.05);transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease;text-decoration:none}
.plat-chip:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,20,60,.14)}
.plat-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff}
.plat-ic svg{width:16px;height:16px}
@media (max-width:520px){.plat-chip{font-size:13.5px;padding:7px 13px 7px 7px;gap:8px}.plat-ic{width:27px;height:27px}.plat-rail{gap:9px}}

/* motion: auto-scrolling platform marquee */
.plat-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.plat-track{display:flex;width:max-content;animation:plat-scroll 36s linear infinite}
.plat-track:hover{animation-play-state:paused}
.plat-set{display:flex;gap:12px;padding-right:12px}
.plat-set .plat-chip{flex:none}
@keyframes plat-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.plat-track{animation:none}.plat-set:nth-child(2){display:none}.plat-set{flex-wrap:wrap;justify-content:center;padding-right:0;gap:12px}.plat-marquee{-webkit-mask-image:none;mask-image:none}}

/* ===================== HEADER FIT — full-width nav bar, single row, never crams =====================
   The nav content (brand + mega-menu + Log In / Book a Demo / Subscribe Now) was overflowing the old
   1160px cap once the 3rd CTA was added. Go full-width, keep it on one row, and hand off to the
   hamburger drawer a little earlier so mid-size laptops get the clean menu instead of a cramped bar. */
.au-nav-in{max-width:none !important;gap:14px;flex-wrap:nowrap}
.au-brand{flex:0 0 auto}
.mega-nav{flex-wrap:nowrap;gap:0;min-width:0}
.mega-trigger,.mega-flat{padding:9px 10px;white-space:nowrap}
.au-nav-cta{gap:10px;flex:0 0 auto}
.au-nav-cta .au-btn{white-space:nowrap}

/* SAFETY NET: never let scroll-reveal hide content. Sections are visible by default;
   the reveal script (when present) just skips the fade. Guarantees the page always renders
   even if a script fails to load. */
.au-reveal{opacity:1 !important;transform:none !important}