/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SCAIL v4 — THE LIQUID-GLASS LAYER (2026-10-30)

   One design language for the site and the portal. Source of truth: the portal hub design target
   (glassdash/index.html, "Liquid Glass Hub"). This sheet loads LAST on every v4 surface — the
   homepage, the React pages (SiteChrome) and the static pages in public/gtm — and only restyles:
   it keeps every layout, scene, copy line and GSAP timeline the v4 site already has.

   1. Colors are the Spectra logo kit only: #D6006E 0 · #C8102E 20 · #B04C00 40 · #8C6A08 60 ·
      #0C7D6C 80 · #1A6FB5 100. Shadows are neutral rgba(20,20,30,…).
   2. Cards, tiers, panels, the nav bar and the sticky CTA bar are liquid glass: a translucent white
      fill, blur(26px) saturate(185%), a gradient edge, an inner top highlight, a soft neutral drop
      shadow and a sheen that follows the pointer (glass.js sets --mx/--my).
   3. Behind it all, a soft mesh of kit-tinted blobs on #F5F5F7, three floating glass bubbles and
      the site's existing grain. Sections that paint their own scene keep it.
   4. Lufga is the display face (200/300, tabular figures), Urbanist the body face (300/400).
   The prism gradient stays on the wordmark, the Halo sphere, one accent word per headline and the
   Halo CTA only.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --kit:linear-gradient(100deg,#D6006E 0%,#C8102E 20%,#B04C00 40%,#8C6A08 60%,#0C7D6C 80%,#1A6FB5 100%);
  --ramp:linear-gradient(90deg,#D6006E 0%,#C8102E 20%,#B04C00 40%,#8C6A08 60%,#0C7D6C 80%,#1A6FB5 100%);
  --r1:#D6006E;--r2:#C8102E;--r3:#B04C00;--r4:#0C7D6C;--r5:#1A6FB5;--r6:#8C6A08;
  --lg-fill:linear-gradient(145deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.40) 48%,rgba(255,255,255,.28) 100%);
  --lg-strong:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.60));
  --lg-inner:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.58));
  --lg-hi:radial-gradient(120% 70% at 12% -10%,rgba(255,255,255,.85),transparent 45%);
  --lg-lo:radial-gradient(80% 50% at 100% 110%,rgba(255,255,255,.35),transparent 60%);
  --lg-sheen:radial-gradient(280px circle at var(--mx,-600px) var(--my,-600px),rgba(255,255,255,.55),transparent 60%);
  --lg-edge:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.18) 40%,rgba(255,255,255,.06) 60%,rgba(255,255,255,.72));
  --lg-blur:blur(26px) saturate(185%);
  --lg-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(20,20,30,.045),0 1px 2px rgba(20,20,30,.05),0 24px 60px -28px rgba(20,20,30,.30);
  --lg-shadow-hover:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(20,20,30,.05),0 36px 70px -30px rgba(20,20,30,.40);
  --lg-inner-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,20,30,.05),0 10px 24px -18px rgba(20,20,30,.28);
  --shadow-card:var(--lg-shadow);
  --shadow-float:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(20,20,30,.05),0 2px 6px rgba(20,20,30,.05),0 30px 60px -22px rgba(20,20,30,.30);
  --f-display:'Lufga','Outfit',ui-sans-serif,system-ui,sans-serif;
  --font-display:'Lufga','Outfit','Urbanist','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ── TYPE: Lufga for display and figures, Urbanist for text, never bold ─────────────────────── */
h1,h2,h3,.d-xxl,.d-xl,.d-l,.d-m,.numeral,.tier-price,.price,.gv,.big,.v4c-logo,.lw,.wordmark,.flogo{font-family:var(--f-display)}
.numeral,.tier-price,.price,.gauge .gv,.kpi .v,.pt-kpi b,.pp-kpi b,.counter,[class*="-num"],.num{font-variant-numeric:tabular-nums}
b,strong{font-weight:500}

/* ── BACKGROUND: the living mesh (glass.js injects .lg-bg once per page) ────────────────────── */
html{background:#F5F5F7}
body{background:transparent!important}
.lg-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(110% 90% at 0% 0%,#fde4ec 0%,transparent 55%),radial-gradient(90% 80% at 100% 0%,#dde9f5 0%,transparent 60%),
    radial-gradient(90% 90% at 100% 100%,#fdebd9 0%,transparent 55%),radial-gradient(80% 80% at 0% 100%,#ddeeea 0%,transparent 60%),#F5F5F7}
.lg-bg .lg-blob{position:absolute;border-radius:50%;opacity:.7;will-change:transform}
.lg-bg .b1{width:46vw;height:46vw;left:-8vw;top:-10vw;background:radial-gradient(circle,#f6a9c4 0%,rgba(246,169,196,.35) 38%,rgba(246,169,196,0) 70%)}
.lg-bg .b2{width:40vw;height:40vw;right:-6vw;top:4vw;background:radial-gradient(circle,#b9d2ec 0%,rgba(185,210,236,.35) 38%,rgba(185,210,236,0) 70%)}
.lg-bg .b3{width:38vw;height:38vw;right:14vw;bottom:-14vw;background:radial-gradient(circle,#f3c9a6 0%,rgba(243,201,166,.35) 38%,rgba(243,201,166,0) 70%)}
.lg-bg .b4{width:34vw;height:34vw;left:12vw;bottom:-12vw;background:radial-gradient(circle,#b5dbd3 0%,rgba(181,219,211,.35) 38%,rgba(181,219,211,0) 70%)}
.lg-bg .lg-bub{position:absolute;border-radius:50%;background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.35) 18%,transparent 42%),
    radial-gradient(circle at 70% 78%,rgba(12,125,108,.22),transparent 55%),
    radial-gradient(circle at 50% 50%,rgba(176,76,0,.18),rgba(140,106,8,.16) 45%,rgba(12,125,108,.14) 70%,rgba(255,255,255,.5));
  box-shadow:inset -10px -16px 40px rgba(12,125,108,.14),inset 8px 10px 30px rgba(255,255,255,.8),0 30px 60px -30px rgba(20,20,30,.22)}
.lg-bg .bb1{width:220px;height:220px;left:-70px;top:56%}
.lg-bg .bb2{width:150px;height:150px;right:4%;top:-46px}
.lg-bg .bb3{width:90px;height:90px;right:30%;bottom:5%}
@media (prefers-reduced-motion:no-preference){
  .lg-bg .b1{animation:lgDrift1 26s cubic-bezier(.22,1,.36,1) infinite alternate}
  .lg-bg .b2{animation:lgDrift2 31s cubic-bezier(.22,1,.36,1) infinite alternate}
  .lg-bg .b3{animation:lgDrift3 29s cubic-bezier(.22,1,.36,1) infinite alternate}
  .lg-bg .b4{animation:lgDrift2 35s cubic-bezier(.22,1,.36,1) infinite alternate-reverse}
  .lg-bg .lg-bub{animation:lgFloat 14s ease-in-out infinite alternate}
  .lg-bg .bb2{animation-duration:17s}.lg-bg .bb3{animation-duration:11s}
}
@keyframes lgDrift1{to{transform:translate3d(9vw,7vw,0) scale(1.12)}}
@keyframes lgDrift2{to{transform:translate3d(-8vw,6vw,0) scale(.92)}}
@keyframes lgDrift3{to{transform:translate3d(-6vw,-8vw,0) scale(1.1)}}
@keyframes lgFloat{to{transform:translateY(-34px) rotate(8deg)}}
html.lg-hidden .lg-bg *{animation-play-state:paused}
@media (max-width:760px){.lg-bg .bb1{width:130px;height:130px;left:-50px}.lg-bg .bb2{width:96px;height:96px}.lg-bg .bb3{display:none}}

/* sections that painted plain white now let the mesh through */
.how{background:transparent}

/* ── LIQUID GLASS: the outer surfaces (blurred) ──────────────────────────────────────────────── */
.device,.vis-card,.tier,.train,.plantable,.desks,.stcard,.fx-win,.fx-tues,.imx-card,.ap-card,.fd-card,.rd-card,.cmp-box,.atk,
.ctab-in,.pe-card,.th-card,.side-note,.mailtrack,.ma-float,.float,.fx-askp,.v4c-menu,
.tile,.card,.hx-job,.hx-rung,.hx-out,.hx-led,.atl .lg-doc,
.nav.scrolled .bar,.v4c-nav .v4c-bar,.fx-sticky,.v4c-sticky,.fx-top,.pricing .toggle{
  background:var(--lg-sheen) padding-box,var(--lg-hi) padding-box,var(--lg-lo) padding-box,var(--lg-fill) padding-box,var(--lg-edge) border-box!important;
  border:1px solid transparent!important;
  -webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important;
  box-shadow:var(--lg-shadow)!important;
}
/* surfaces that float over busy content read better a little more opaque */
.nav.scrolled .bar,.v4c-nav .v4c-bar,.fx-sticky,.v4c-sticky,.fx-askp,.v4c-menu,.float,.side-note,.mailtrack,.ma-float,.fx-top{
  background:var(--lg-sheen) padding-box,var(--lg-hi) padding-box,var(--lg-strong) padding-box,var(--lg-edge) border-box!important}
/* the home nav is transparent until it scrolls; keep that */
.nav:not(.scrolled) .bar{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.tier,.vis-card,.stcard,.ap-card,.fd-card,.rd-card,.pe-card,.imx-card,.th-card{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .tier:hover,.stcard:hover,.ap-card:hover,.pe-card:hover,.rd-card:hover,.th-card:hover{transform:translateY(-4px);box-shadow:var(--lg-shadow-hover)!important}
}
.tier.feat{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(20,20,30,.08),0 36px 70px -30px rgba(20,20,30,.38)!important}
.tier .spot,.vis-card .spot{display:none}

/* ── LIQUID GLASS: panels that sit inside a glass surface (no second blur) ───────────────────── */
.panel,.kpi,.pt-kpi,.pp-kpi,.dcard,.imp-file,.big-progress,.an-bars,.halo-note,.mailbox,.tr-gauges,.timeline,.pc,.map-card,
.plan-card,.hf-call,.hf-field,.hf-item,.hf-letter,.idm-reason,.idm-card,.imx-stats div,.pt-feed,.ps-tile,.ma-row,.es-halo,.es-steps,
.th-panel,.th-letter,.rd-clock,.pp-tier,.pp-link,.pp-funnel,.pt-top,.wl-top,.phone-mini,.sp-scail,.tool,.ap-no,.fd-way,.q-ico,.paper,.letter{
  background:var(--lg-inner)!important;border-color:rgba(255,255,255,.92)!important;box-shadow:var(--lg-inner-shadow)!important}
.paper,.letter{background:linear-gradient(160deg,#fff,rgba(255,255,255,.9))!important}
.hf-msg:not(.me):not(.cl),.bub.ai,.hn-msg.ha{background:var(--lg-inner)!important;border-color:rgba(255,255,255,.92)!important;box-shadow:var(--lg-inner-shadow)}
.hf-step[aria-selected=true],.idm-tab[aria-selected=true],.bt.on,.d-side .ic.on{background:var(--lg-strong)!important;box-shadow:var(--lg-inner-shadow)!important}

/* the demo window sits on the dark band: it keeps its own light ground so text stays AA */
.demo-win{background:linear-gradient(160deg,#fbfbfc,#f1f2f5)!important;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 40px 80px -30px rgba(0,0,0,.55)}
.win-bar{background:rgba(255,255,255,.75)!important}

/* ── BUTTONS: the Halo CTA may wear the kit; every other primary is ink ─────────────────────── */
.btn-ghost,.v4c-btn.gh{background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.5)) padding-box,var(--lg-edge) border-box!important;border:1px solid transparent!important;
  -webkit-backdrop-filter:blur(14px) saturate(170%)!important;backdrop-filter:blur(14px) saturate(170%)!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,20,30,.08),0 8px 20px -14px rgba(20,20,30,.3)!important}
.btn-ghost:hover,.v4c-btn.gh:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,20,30,.16),0 12px 26px -14px rgba(20,20,30,.35)!important}
.btn-halo,.lg-halo-cta{background:var(--kit)!important;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.18);border:0!important;
  box-shadow:0 0 0 5px rgba(255,255,255,.6),0 0 0 6px rgba(14,14,16,.06),0 22px 40px -18px rgba(176,76,0,.55)!important}
.btn-halo i,.lg-halo-cta i{background:#fff!important}

/* ── CHARTS: the portal's chart style ───────────────────────────────────────────────────────── */
/* billing bars (homepage "Get paid on schedule"): blue glass columns, the hot one wears the kit (vertical) */
.chart i{background:linear-gradient(180deg,rgba(26,111,181,.42),rgba(26,111,181,.14));border-radius:12px 12px 6px 6px}
.chart i.hi{background:linear-gradient(180deg,#D6006E 0%,#C8102E 20%,#B04C00 40%,#8C6A08 60%,#0C7D6C 80%,#1A6FB5 100%)}
.mmenu{background:linear-gradient(160deg,rgba(253,228,236,.86),rgba(245,245,247,.9) 45%,rgba(221,233,245,.86))!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
/* progress tracks */
.seg,.track,.ph-track,.imx-bar,.fx-prog,.pp-fun .t{border-radius:99px}

/* ── LIGHT AA FIXES the glass needs ──────────────────────────────────────────────────────────── */
.tier .tier-sub,.tier-list li{color:#4F4F58}

/* ── MOBILE: same material, lighter blur so scrolling stays smooth ─────────────────────────── */
@media (max-width:760px),(pointer:coarse){
  :root{--lg-blur:blur(16px) saturate(170%)}
}
@media (prefers-reduced-transparency:reduce){
  :root{--lg-fill:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.86));--lg-blur:none}
}

/* pipeline-style bars (the portal hub's "Client pipeline"): glass track, tint-to-color fill */
.an-bar .t,.pp-fun .t,.imx-bar{height:10px;background:rgba(255,255,255,.6)!important;box-shadow:inset 0 1px 2px rgba(20,20,30,.08);border-radius:99px}
.an-bar .t i,.pp-fun .t i{background-image:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0))!important}

/* Lufga runs wider than the face it replaces: tighten the largest display sizes a touch */
.d-xxl,.d-xl{letter-spacing:-.042em}

/* ── THE OPERATOR DASHBOARD DEMO, drawn like the portal hub ─────────────────────────────────── */
.dc-grid2 .bars.lg-replaced{display:none}
.lg-area{position:relative;flex:1 1 auto;min-height:220px;margin-top:10px}
.lg-area svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.lg-adot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid #0C7D6C;opacity:0;pointer-events:none;transition:opacity .2s}
/* the activity feed reads like Halo's desk: each event on a glass tile */
.feed .fd{grid-template-columns:34px 1fr;align-items:center;gap:12px;padding:8px 6px;border-bottom:0;border-radius:14px;transition:background .3s}
.feed .fd:hover{background:rgba(255,255,255,.55)}
.feed .fd i{justify-self:center;margin:0;width:9px;height:9px;box-shadow:0 0 0 12px rgba(255,255,255,.9),0 0 0 13px rgba(20,20,30,.06),0 12px 18px 4px rgba(20,20,30,.10)}
.kv{font-variant-numeric:tabular-nums}

/* ── R-114 / R-115 (Sean 2026-10-30): no grain, real sphere mark ─────────────────────────
   The noise/grain texture read as "grainy" and got annoying while scrolling: it is off everywhere.
   The nav mark is the official Spectra dot-sphere icon (img), sized like the old 22px mark. */
.grain,.bg .grain,.lq-grain,.gl-grain{display:none!important;background:none!important}
.logo img.logo-mark,img.logo-mark{width:24px;height:24px;display:inline-block;vertical-align:middle;flex:none}
.v4c-logo img{width:24px;height:24px;display:block}