/* Glow layer (2026-10-12): depth, light and motion on the concept pages (home, /crewlink, /crewconnect, /pricing).
   Visual only: no copy, no layout of content changes. Loaded after concept.css. Brand colours only
   (#4F7CFF blue, #3DDC97 connect green, #FFB547 drive amber). Respects prefers-reduced-motion and the light theme. */
:root{
  --gw-blue:79,124,255;--gw-violet:122,92,255;--gw-cyan:55,162,255;--gw-green:61,220,151;--gw-amber:255,181,71;
  --gw-aurora:.55;--gw-edge:rgba(255,255,255,.09);--gw-edge-hot:rgba(var(--gw-blue),.55);
  --gw-glass:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  --gw-head:linear-gradient(180deg,#FFFFFF 0%,#E4E9FF 55%,#A9BCFF 100%);
  --gw-grain:.06;
}
:root[data-theme="light"]{
  --gw-aurora:.28;--gw-edge:rgba(8,9,10,.08);--gw-edge-hot:rgba(var(--gw-blue),.45);
  --gw-glass:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  --gw-head:linear-gradient(180deg,#08090A 0%,#1A2340 60%,#2F5FE0 100%);
  --gw-grain:.035;
}

/* ---------- ambient: aurora + grain behind everything ---------- */
body.cx{background:var(--cl-bg)}
body.cx::before{content:"";position:fixed;inset:-20vh -20vw;z-index:-2;pointer-events:none;opacity:var(--gw-aurora);
  background:
    radial-gradient(38vw 30vw at 78% 8%,rgba(var(--gw-blue),.55),transparent 70%),
    radial-gradient(30vw 26vw at 12% 30%,rgba(var(--gw-violet),.32),transparent 70%),
    radial-gradient(34vw 24vw at 60% 92%,rgba(var(--gw-cyan),.22),transparent 70%);
  filter:blur(40px);animation:gwDrift 28s ease-in-out infinite alternate}
body.cx::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--gw-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes gwDrift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-4vw,3vh,0) rotate(6deg)}100%{transform:translate3d(3vw,-2vh,0) rotate(-4deg)}}

/* ---------- hero: perspective grid floor (static), lit headline ---------- */
.cx .hero{overflow:clip;padding-bottom:88px}
.cx .hero::before{inset:-30% -30% auto;height:900px;
  background:
    radial-gradient(40% 46% at 72% 34%,rgba(var(--gw-blue),.42),transparent 70%),
    radial-gradient(28% 30% at 20% 12%,rgba(var(--gw-violet),.22),transparent 72%);
  animation:gwPulse 9s ease-in-out infinite alternate}
@keyframes gwPulse{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.gw-floor{position:absolute;left:-10%;right:-10%;bottom:-2px;height:62%;z-index:-1;pointer-events:none;perspective:700px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 100%)}
.gw-floor i{position:absolute;inset:-60% -20% 0;transform:rotateX(68deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(var(--gw-blue),.28) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--gw-blue),.28) 1px,transparent 1px);
  background-size:64px 64px}
:root[data-theme="light"] .gw-floor i{background-image:linear-gradient(rgba(var(--gw-blue),.16) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--gw-blue),.16) 1px,transparent 1px)}

.cx .hero h1,.cx .sec-h h2,.cx .lead-card h3{background:var(--gw-head);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cx .hero h1{font-size:clamp(44px,8.8vw,92px);letter-spacing:-.065em;line-height:.96;padding-bottom:.06em;filter:drop-shadow(0 10px 40px rgba(var(--gw-blue),.25))}
.cx .hero h1 .gw-hi{background:linear-gradient(100deg,#8AA9FF 0%,#4F7CFF 30%,#37A2FF 55%,#8AA9FF 80%,#4F7CFF 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gwSheen 7s linear infinite}
@keyframes gwSheen{to{background-position:-220% 0}}
.cx .sec-h h2{padding-bottom:.05em}
.cx .hero .kick .badge.live{border-color:rgba(var(--gw-green),.35);background:rgba(var(--gw-green),.08);color:var(--cl-text)}
.cx .badge.live i{box-shadow:0 0 0 0 rgba(var(--gw-green),.7);animation:gwPing 2s ease-out infinite}
@keyframes gwPing{0%{box-shadow:0 0 0 0 rgba(var(--gw-green),.7)}100%{box-shadow:0 0 0 8px rgba(var(--gw-green),0)}}
.cx .kick{color:var(--cl-text-2)}
.cx .kick b{text-shadow:0 0 18px rgba(var(--gw-blue),.6)}
.cx .kick.cc b{text-shadow:0 0 18px rgba(var(--gw-green),.6)}

/* ---------- glass surfaces with a lit edge and cursor spotlight ---------- */
.cx .card,.cx .daystrip,.cx .mock,.cx .board,.cx .lead-card,.cx .setup-wrap,.cx .prompt,.cx .heromap,.cx .res,.cx .price-strip a,.cx .ds-stats div{
  position:relative;isolation:isolate;background:var(--gw-glass),color-mix(in srgb,var(--cl-surface) 78%,transparent);
  border-color:var(--gw-edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.35),0 24px 60px -24px rgba(0,0,0,.6);
  transition:transform .4s cubic-bezier(.2,.75,.28,1),box-shadow .4s,border-color .3s}
:root[data-theme="light"] .cx .card,:root[data-theme="light"] .cx .daystrip,:root[data-theme="light"] .cx .mock,:root[data-theme="light"] .cx .board,
:root[data-theme="light"] .cx .lead-card,:root[data-theme="light"] .cx .setup-wrap,:root[data-theme="light"] .cx .prompt,:root[data-theme="light"] .cx .heromap,
:root[data-theme="light"] .cx .res,:root[data-theme="light"] .cx .price-strip a,:root[data-theme="light"] .cx .ds-stats div{
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(8,9,10,.05),0 24px 60px -28px rgba(30,50,120,.25)}
/* lit gradient edge (mask trick) + spotlight follow, driven by --mx/--my from glow.js */
.cx .card::after,.cx .daystrip::after,.cx .mock::after,.cx .board::after,.cx .lead-card::after,.cx .setup-wrap::after,.cx .heromap::after,.cx .price-strip a::after,.cx .prompt::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),var(--gw-edge-hot),transparent 45%),
             linear-gradient(180deg,rgba(255,255,255,.10),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.9;transition:opacity .3s}
.cx .card::before,.cx .lead-card::before,.cx .price-strip a::before,.cx .prompt::before,.cx .daystrip::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(var(--gw-blue),.10),transparent 42%)}
.cx .gw-on::before{opacity:1}
.cx .card:hover,.cx .price-strip a:hover,.cx .lead-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -30px rgba(var(--gw-blue),.45),0 0 0 1px rgba(var(--gw-blue),.18)}
.cx .lead-card.cc{--gw-edge-hot:rgba(var(--gw-green),.55)}
.cx .lead-card.cc::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(var(--gw-green),.10),transparent 42%)}
.cx-connect{--gw-edge-hot:rgba(var(--gw-green),.55)}

/* hero map: floating, glowing, tilts toward the cursor */
.cx .heromap{border-radius:22px;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.75,.28,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 120px -30px rgba(var(--gw-blue),.55),0 0 0 1px rgba(var(--gw-blue),.14)}
.cx .hero-g{position:relative}
.cx .gw-halo{position:absolute;left:50%;right:-6%;top:-12%;bottom:-12%;z-index:-1;pointer-events:none;border-radius:50%;
  background:conic-gradient(from var(--gw-a,0deg),rgba(var(--gw-blue),.0),rgba(var(--gw-blue),.45),rgba(var(--gw-cyan),.0),rgba(var(--gw-violet),.35),rgba(var(--gw-blue),.0));
  filter:blur(60px);opacity:.7;animation:gwSpin 14s linear infinite}
@property --gw-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes gwSpin{to{--gw-a:360deg}}
.cx .gl-map .route{stroke-opacity:.75}
.cx .gl-map .route.sel{stroke-width:2.8;opacity:1;filter:drop-shadow(0 0 6px rgba(var(--gw-blue),.9));stroke-dasharray:10 6;animation:gwFlow 1.2s linear infinite}
@keyframes gwFlow{to{stroke-dashoffset:-16}}
.cx .gl-map .truck{filter:drop-shadow(0 0 6px rgba(var(--gw-blue),1))}
.cx .gl-map .stop.ok{filter:drop-shadow(0 0 4px rgba(var(--gw-green),.9))}
.cx .gl-map .stop.late{filter:drop-shadow(0 0 4px rgba(255,107,107,.9))}
.cx .gl-clock{text-shadow:0 0 24px rgba(var(--gw-blue),.55)}

/* ---------- buttons ---------- */
.cx .btn-p,.clb-cta{position:relative;overflow:hidden;background:linear-gradient(180deg,#6B90FF 0%,#4F7CFF 55%,#3F68E8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(var(--gw-blue),.6),0 10px 30px -6px rgba(var(--gw-blue),.65)}
.cx .btn-p::after,.clb-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:gwShine 4.5s ease-in-out infinite}
@keyframes gwShine{0%,62%{left:-60%}100%{left:130%}}
.cx .btn-p:hover,.clb-cta:hover{background:linear-gradient(180deg,#86A4FF 0%,#5D87FF 55%,#4A73F0 100%);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--gw-blue),.8),0 16px 44px -8px rgba(var(--gw-blue),.85)}
.cx .btn-p{transition:transform .2s,box-shadow .2s,background .2s}
.cx .lead-card.cc .btn-p{background:linear-gradient(180deg,#6BE8B0 0%,#3DDC97 60%,#2FC283 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--gw-green),.6),0 10px 30px -6px rgba(var(--gw-green),.55)}
.cx .ghost{background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:var(--gw-edge);transition:border-color .2s,background .2s,transform .2s}
.cx .ghost:hover{border-color:rgba(var(--gw-blue),.6);background:rgba(var(--gw-blue),.08);transform:translateY(-1px)}
:root[data-theme="light"] .cx .ghost{background:rgba(255,255,255,.7)}
.cx .seg{background:color-mix(in srgb,var(--cl-surface) 70%,transparent);border-color:var(--gw-edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cx .seg button[aria-checked="true"],.cx .seg button[aria-pressed="true"],.cx .seg button[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(var(--gw-blue),.22),rgba(var(--gw-blue),.10));color:var(--cl-text);box-shadow:0 0 0 1px rgba(var(--gw-blue),.5),0 6px 18px -6px rgba(var(--gw-blue),.6)}
.clb-row{border-color:var(--gw-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 50px -20px rgba(0,0,0,.6)}
.clb-prog{height:2px;background:linear-gradient(90deg,rgba(var(--gw-blue),0),#4F7CFF 40%,#37A2FF 80%,#3DDC97);box-shadow:0 0 10px rgba(var(--gw-blue),.8)}

/* ---------- sections: lit seams and per-section ambient light ---------- */
.cx .sec + .sec{border-top:0}
.cx .sec + .sec::before{content:"";position:absolute;top:0;left:50%;width:min(1100px,90vw);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--gw-blue),.45),transparent)}
.cx .sec{isolation:isolate}
.cx .sec > .gw-amb{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cx .sec > .gw-amb::before{content:"";position:absolute;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:50%;
  left:var(--ax,70%);top:var(--ay,10%);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--gw-c,var(--gw-blue)),.24),transparent);filter:blur(20px)}
.cx #problem{--gw-c:var(--gw-amber);--ax:20%;--ay:20%}
.cx #crewconnect{--gw-c:var(--gw-green);--ax:80%;--ay:30%}
.cx #brain{--gw-c:var(--gw-violet);--ax:25%;--ay:40%}
.cx #pricing{--ax:50%;--ay:0%}
.cx #walkthrough{--ax:50%;--ay:60%}

/* number tiles: brighter figures */
.cx .ds-stats b,.cx .res b,.cx .price-strip span{text-shadow:0 0 30px rgba(var(--gw-blue),.25)}
.cx .ds-stats .d b{text-shadow:0 0 24px rgba(var(--gw-amber),.5)}
.cx .res.hi{background:linear-gradient(160deg,rgba(var(--gw-blue),.22),rgba(var(--gw-blue),.06));border-color:rgba(var(--gw-blue),.5)}
.cx .blk .wrk{background:linear-gradient(180deg,#6B90FF,#4F7CFF 60%,#3F68E8)}
.cx .ds-bar{box-shadow:0 0 0 1px rgba(var(--gw-blue),.15),0 20px 60px -20px rgba(var(--gw-blue),.5)}
.cx .wk-bar .cut{background:linear-gradient(90deg,#3F68E8,#4F7CFF,#37A2FF);box-shadow:0 0 18px rgba(var(--gw-blue),.7)}
.cx .points li::before{background:linear-gradient(180deg,rgba(var(--gw-blue),.3),rgba(var(--gw-blue),.1));box-shadow:0 0 0 1px rgba(var(--gw-blue),.35),0 0 16px rgba(var(--gw-blue),.3)}
.cx .faq details{border-top-color:var(--gw-edge);transition:background .3s}
.cx .faq details[open]{background:linear-gradient(90deg,rgba(var(--gw-blue),.06),transparent 70%)}
.cx input:focus,.cx select:focus{box-shadow:0 0 0 3px var(--cl-accent-tint),0 0 24px rgba(var(--gw-blue),.35)}
.setup-chip{border-color:rgba(var(--gw-blue),.35);box-shadow:0 0 0 1px rgba(var(--gw-blue),.15),0 20px 50px -10px rgba(var(--gw-blue),.45)}

/* ---------- richer scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cx .rv{animation:gwIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes gwIn{from{opacity:0;transform:translateY(40px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
  }
  @supports not (animation-timeline:view()){
    .cx .rv{filter:blur(6px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.28,1),filter .8s}
    .cx .rv.in{filter:none}
  }
  .cx .hero .gw-in{opacity:0;transform:translateY(24px);filter:blur(10px);animation:gwRise .9s cubic-bezier(.2,.75,.28,1) forwards;animation-delay:calc(var(--i,0) * 110ms + 80ms)}
  @keyframes gwRise{to{opacity:1;transform:none;filter:none}}
}
@media (prefers-reduced-motion:reduce){
  body.cx::before,.gw-floor i,.cx .gw-halo,.cx .btn-p::after,.clb-cta::after{animation:none!important}
}
@media (max-width:979px){.cx .gw-halo{left:-10%;right:-10%;top:45%}}
@media (max-width:720px){
  .cx .heromap{transform:none}
}
/* hero map palette: routes in brand light instead of gray */
.cx .globe{--route:rgba(var(--gw-blue),.38);--area:rgba(var(--gw-cyan),.28);--grat:rgba(var(--gw-blue),.10)}
:root[data-theme="light"] .cx .globe{--route:rgba(var(--gw-blue),.40);--area:rgba(var(--gw-blue),.25);--grat:rgba(var(--gw-blue),.08)}
.cx .gl-map .stop{fill:rgba(237,238,240,.55)}
:root[data-theme="light"] .cx .gl-map .stop{fill:rgba(8,9,10,.4)}

/* =====================================================================
   Inner pages (body.clx: guides, industries, compare, glossary, tools, blog, product pages)
   ===================================================================== */
/* aurora painted into the existing scrim so it sits above the city-grid canvas */
.clx .clx-scrim{background:
  radial-gradient(42vw 34vw at 82% 4%,rgba(var(--gw-blue),.22),transparent 70%),
  radial-gradient(30vw 26vw at 6% 38%,rgba(var(--gw-violet),.12),transparent 70%),
  radial-gradient(36vw 26vw at 60% 100%,rgba(var(--gw-cyan),.10),transparent 70%),
  linear-gradient(97deg,color-mix(in srgb,var(--cl-bg) 88%,transparent) 0%,color-mix(in srgb,var(--cl-bg) 80%,transparent) 45%,color-mix(in srgb,var(--cl-bg) 64%,transparent) 100%)}
:root[data-theme="light"] .clx .clx-scrim{background:
  radial-gradient(42vw 34vw at 82% 4%,rgba(var(--gw-blue),.12),transparent 70%),
  radial-gradient(30vw 26vw at 6% 38%,rgba(var(--gw-violet),.06),transparent 70%),
  linear-gradient(97deg,color-mix(in srgb,var(--cl-bg) 92%,transparent),color-mix(in srgb,var(--cl-bg) 78%,transparent))}
body.clx::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--gw-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hero */
.clx .clx-hero{position:relative;isolation:isolate;padding-bottom:40px;overflow-x:clip}
.clx .clx-hero::before{content:"";position:absolute;inset:-40% -20% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 50% at 75% 40%,rgba(var(--gw-blue),.26),transparent 70%);animation:gwPulse 9s ease-in-out infinite alternate}
.clx .clx-hero .gw-floor{height:70%;bottom:-20px;opacity:.7}
.clx .clx-hero h1,.clx article h2,.clx .cl-sec > h2,.clx .cta-box h2{background:var(--gw-head);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.clx .clx-hero h1{letter-spacing:-.055em;line-height:1.02;padding-bottom:.06em;filter:drop-shadow(0 10px 36px rgba(var(--gw-blue),.22))}
.clx .clx-hero h1 .gw-hi{background:linear-gradient(100deg,#8AA9FF 0%,#4F7CFF 30%,#37A2FF 55%,#8AA9FF 80%,#4F7CFF 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gwSheen 7s linear infinite}
.clx .clx-hero .eyebrow{color:var(--cl-accent-text);text-shadow:0 0 18px rgba(var(--gw-blue),.6)}
.clx .clx-hero .eyebrow::before{width:28px;height:2px;opacity:1;background:linear-gradient(90deg,transparent,currentColor);box-shadow:0 0 8px currentColor}

/* hero route map card */
.clx .clx-map{border-radius:20px;padding:16px 16px 14px;border-color:var(--gw-edge);
  background:var(--gw-glass),color-mix(in srgb,var(--cl-surface) 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.75,.28,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 110px -30px rgba(var(--gw-blue),.55),0 0 0 1px rgba(var(--gw-blue),.14)}
.clx .clx-hero .gw-halo{position:absolute;left:55%;right:-4%;top:-6%;bottom:-6%;z-index:-1;pointer-events:none;border-radius:50%;
  background:conic-gradient(from var(--gw-a,0deg),rgba(var(--gw-blue),0),rgba(var(--gw-blue),.4),rgba(var(--gw-cyan),0),rgba(var(--gw-violet),.3),rgba(var(--gw-blue),0));
  filter:blur(60px);opacity:.65;animation:gwSpin 14s linear infinite}
.clx .clx-hero.solo .gw-halo{display:none}

/* glass surfaces in the article and hubs */
.clx .card,.clx .takeaway,.clx .note,.clx figure.calc,.clx .cl-calc,.clx .cta-box,.clx .related li,.clx .clx-map{position:relative;isolation:isolate}
.clx .card,.clx .takeaway,.clx .note,.clx figure.calc,.clx .cl-calc,.clx .related li{
  border-color:var(--gw-edge);border-radius:16px;background:var(--gw-glass),color-mix(in srgb,var(--cl-surface) 76%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -28px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.2,.75,.28,1),box-shadow .4s}
:root[data-theme="light"] .clx .card,:root[data-theme="light"] .clx .takeaway,:root[data-theme="light"] .clx .note,:root[data-theme="light"] .clx figure.calc,
:root[data-theme="light"] .clx .cl-calc,:root[data-theme="light"] .clx .related li{box-shadow:inset 0 1px 0 #fff,0 20px 50px -28px rgba(30,50,120,.22)}
.clx .card::after,.clx .takeaway::after,.clx figure.calc::after,.clx .cl-calc::after,.clx .cta-box::after,.clx .clx-map::after,.clx .related li::after{
  content:"";display:block;position:absolute;inset:-1px;width:auto;height:auto;border:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),var(--gw-edge-hot),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.10),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.clx .clx-map::before,.clx figure.calc::before{display:none}
.clx .card::before,.clx .related li::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(var(--gw-blue),.12),transparent 42%)}
.clx .gw-on::before{opacity:1}
.clx .card:hover,.clx .related li:hover{transform:translateY(-3px);border-color:var(--gw-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -30px rgba(var(--gw-blue),.5),0 0 0 1px rgba(var(--gw-blue),.2)}
.clx .card .tag{color:var(--cl-accent-text)}
.clx .card:hover h2 a{color:var(--cl-text)}
.clx .takeaway{border-left:0;background:linear-gradient(135deg,rgba(var(--gw-blue),.14),transparent 60%),color-mix(in srgb,var(--cl-surface) 76%,transparent)}
.clx .takeaway h2{-webkit-text-fill-color:var(--cl-accent-text);color:var(--cl-accent-text);background:none}
.clx .note{border-left:2px solid var(--cl-accent);box-shadow:-10px 0 30px -18px rgba(var(--gw-blue),.9),0 24px 60px -28px rgba(0,0,0,.6)}
.clx figure.calc .r.hi b,.clx .cl-calc .out b{text-shadow:0 0 26px rgba(var(--gw-blue),.4)}
.clx .cl-calc .out .hot b{text-shadow:0 0 22px rgba(var(--gw-amber),.5)}
.clx .cl-calc input,.clx .cl-calc .out div{border-radius:10px}
.clx .cl-calc input:focus{box-shadow:0 0 0 3px var(--cl-accent-tint),0 0 24px rgba(var(--gw-blue),.35)}
.clx .cta-box{border-color:rgba(var(--gw-blue),.3);border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--gw-blue),.30),transparent 55%),radial-gradient(80% 120% at 100% 100%,rgba(var(--gw-violet),.18),transparent 60%),color-mix(in srgb,var(--cl-surface) 80%,transparent);
  box-shadow:0 40px 100px -40px rgba(var(--gw-blue),.7)}
.clx .btn,.clx .cta-box .btn{position:relative;overflow:hidden;background:linear-gradient(180deg,#6B90FF 0%,#4F7CFF 55%,#3F68E8 100%);color:var(--cl-on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(var(--gw-blue),.6),0 10px 30px -6px rgba(var(--gw-blue),.65);transition:transform .2s,box-shadow .2s}
.clx .btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:gwShine 4.5s ease-in-out infinite}
.clx .btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(var(--gw-blue),.8),0 16px 44px -8px rgba(var(--gw-blue),.85)}

/* article typography accents */
.clx article h2{padding-bottom:.05em;position:relative}
.clx article h2:not(.takeaway h2)::before{content:"";position:absolute;left:-18px;top:.32em;width:3px;height:.8em;border-radius:2px;
  background:linear-gradient(180deg,#8AA9FF,#4F7CFF);box-shadow:0 0 12px rgba(var(--gw-blue),.9)}
.clx article li::marker{color:var(--cl-accent)}
.clx article a{border-bottom:1px solid rgba(var(--gw-blue),.45);transition:border-color .2s,text-shadow .2s}
.clx article a:hover{border-bottom-color:var(--cl-accent);text-shadow:0 0 16px rgba(var(--gw-blue),.6)}
.clx blockquote{border-left:2px solid var(--cl-accent);background:linear-gradient(90deg,rgba(var(--gw-blue),.08),transparent 70%);border-radius:0 12px 12px 0}
.clx table{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--gw-edge)}
.clx th{background:color-mix(in srgb,var(--cl-surface-2) 80%,transparent)}
.clx .clx-rail{border-left-color:var(--gw-edge)}
.clx .clx-rail a.here{border-left:2px solid var(--cl-accent);box-shadow:-8px 0 18px -8px rgba(var(--gw-blue),1);color:var(--cl-text)}
.clx .cl-alpha a{transition:color .2s,padding .2s,text-shadow .2s}
.clx .cl-alpha a:hover{padding-left:6px;text-shadow:0 0 16px rgba(var(--gw-blue),.6)}

/* entrance + reveal */
@media (prefers-reduced-motion:no-preference){
  .clx .clx-hero .gw-in{opacity:0;transform:translateY(22px);filter:blur(10px);animation:gwRise .9s cubic-bezier(.2,.75,.28,1) forwards;animation-delay:calc(var(--i,0) * 100ms + 60ms)}
  .clx .clx-rev{filter:blur(6px);transform:translateY(28px) scale(.98);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.28,1),filter .8s}
  .clx .clx-rev.in{filter:none;transform:none}
}
@media (prefers-reduced-motion:reduce){.clx .clx-hero::before,.clx .gw-halo,.clx .btn::after{animation:none!important}}
@media (max-width:900px){.clx .clx-hero .gw-halo{left:-10%;right:-10%;top:40%}.clx .clx-map{transform:none}.clx article h2::before{display:none}}

/* ---------- device tiers: keep phones/tablets smooth ----------
   Touch devices and small screens: no per-card backdrop blur (expensive on mobile GPUs), no blur filter on the
   full-screen aurora (pre-softened gradients instead), no tilt. */
@media (pointer:coarse),(max-width:900px){
  body.cx::before{filter:none;animation:none;opacity:calc(var(--gw-aurora) * .8)}
  .cx .card,.cx .daystrip,.cx .mock,.cx .board,.cx .lead-card,.cx .setup-wrap,.cx .prompt,.cx .heromap,.cx .res,.cx .price-strip a,.cx .ds-stats div,
  .clx .card,.clx .takeaway,.clx .note,.clx figure.calc,.clx .cl-calc,.clx .related li,.clx .clx-map,.cx .ghost,.cx .seg{-webkit-backdrop-filter:none;backdrop-filter:none}
  .cx .card,.cx .daystrip,.cx .mock,.cx .board,.cx .lead-card,.cx .setup-wrap,.cx .prompt,.cx .heromap,.cx .res,.cx .price-strip a,.cx .ds-stats div,
  .clx .card,.clx .takeaway,.clx .note,.clx figure.calc,.clx .cl-calc,.clx .related li,.clx .clx-map{background-color:var(--cl-surface)}
  .gw-floor i{animation:none}
  .cx .gw-halo,.clx .gw-halo{filter:blur(40px);animation:none}
  .cx .heromap,.clx .clx-map{transform:none!important}
  .cx .hero h1,.clx .clx-hero h1{filter:none}
  .cx .card:hover,.cx .price-strip a:hover,.cx .lead-card:hover,.clx .card:hover,.clx .related li:hover{transform:none}
  .clx .clx-rev{filter:none}
  .cx .rv{filter:none!important}
}
/* no hover devices: spotlight edges stay at their resting highlight */
@media (hover:none){.cx .gw-on::before,.clx .gw-on::before{opacity:0}}
/* older Safari (<16) has no overflow:clip */
@supports not (overflow:clip){.cx .hero,.clx .clx-hero{overflow:hidden}.cx main{overflow-x:hidden}}
/* fixed background layers never widen the page */
.clx #cl-field,.clx .clx-scrim{max-width:100%}