/* New hero (radar detection cycle). Injected by lsx-hero.js after hydration;
   everything is scoped under #lsx-hero and keyframes are prefixed so nothing
   collides with the compiled Tailwind bundle. Remove this file + lsx-hero.js
   + the two tags in index.html to roll back. */

#lsx-hero{--lime:#d9f64b;--lime2:#eeff6e;--lime-dim:#9fc12e;
  position:relative;overflow:hidden;border-radius:72px;background:#050505;min-height:92vh;display:flex;align-items:center;
  margin:86px 16px 0;font-family:'Inter',sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
#lsx-hero *{box-sizing:border-box;margin:0;padding:0}
#lsx-hero::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(217,246,75,.55) 35%,rgba(217,246,75,.55) 65%,transparent)}
#lsx-hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.5) 100%)}
#lsx-hero .lsx-noise{position:absolute;inset:0;z-index:3;opacity:.05;pointer-events:none;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
#lsx-hero .lsx-grid{position:absolute;left:50%;top:50%;width:0;height:0;z-index:0;pointer-events:none}
#lsx-hero .lsx-grid i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(217,246,75,.09);display:block}
#lsx-hero .lsx-grid i:nth-child(1){width:720px;height:720px;border-color:rgba(217,246,75,.13)}
#lsx-hero .lsx-grid i:nth-child(2){width:1010px;height:1010px}
#lsx-hero .lsx-grid i:nth-child(3){width:1340px;height:1340px;border-color:rgba(217,246,75,.06)}
#lsx-hero .lsx-grid i:nth-child(4){width:1700px;height:1700px;border-color:rgba(217,246,75,.04)}
#lsx-hero .lsx-glow{position:absolute;inset:0;z-index:2;background:
  radial-gradient(ellipse 50% 60% at 72% 48%,rgba(217,246,75,.12),transparent 62%),
  radial-gradient(ellipse 45% 35% at 12% 110%,rgba(217,246,75,.14),transparent 70%),
  radial-gradient(ellipse 30% 25% at 95% 0%,rgba(120,140,40,.10),transparent 70%)}

#lsx-hero .lsx-wrap{position:relative;z-index:5;display:grid;grid-template-columns:minmax(430px,1fr) minmax(520px,1.05fr);gap:24px;align-items:center;width:100%;max-width:1380px;margin:0 auto;padding:72px 64px}

@keyframes lsxRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
#lsx-hero h1{animation:lsxRise .7s .08s cubic-bezier(.2,.7,.2,1) both}
#lsx-hero .lsx-sub{animation:lsxRise .7s .18s cubic-bezier(.2,.7,.2,1) both}
#lsx-hero .lsx-ctas{animation:lsxRise .7s .28s cubic-bezier(.2,.7,.2,1) both}
#lsx-hero .lsx-micro{animation:lsxRise .7s .34s cubic-bezier(.2,.7,.2,1) both}
#lsx-hero .lsx-proof{animation:lsxRise .8s .44s cubic-bezier(.2,.7,.2,1) both}
#lsx-hero .lsx-ratings{animation:lsxRise .8s .54s cubic-bezier(.2,.7,.2,1) both}
#lsx-hero .lsx-radar-zone{animation:lsxRadarIn 1.1s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes lsxRadarIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}

#lsx-hero h1{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(46px,4.7vw,70px);line-height:.98;letter-spacing:-.035em;margin-bottom:24px;max-width:13ch;
  background:linear-gradient(180deg,#fff 55%,#b9bfa9);-webkit-background-clip:text;background-clip:text;color:transparent}
#lsx-hero h1 .lsx-accent{font-style:italic;background:linear-gradient(120deg,var(--lime2),var(--lime) 45%,var(--lime-dim));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(217,246,75,.35))}
#lsx-hero .lsx-sub{color:#9aa08c;font-size:17px;line-height:1.65;max-width:42ch;margin-bottom:36px}

#lsx-hero .lsx-ctas{display:flex;gap:14px;align-items:center;margin-bottom:14px}
#lsx-hero .lsx-btn-main{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 30px;border-radius:999px;
  background:linear-gradient(135deg,var(--lime2),var(--lime) 55%,#b8d63a);color:#000;font-weight:700;font-size:15px;text-decoration:none;
  box-shadow:0 8px 34px rgba(217,246,75,.38), 0 2px 8px rgba(217,246,75,.3), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12);
  transition:transform .18s, box-shadow .18s}
#lsx-hero .lsx-btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(217,246,75,.5), 0 3px 10px rgba(217,246,75,.35), inset 0 1px 0 rgba(255,255,255,.55)}
#lsx-hero .lsx-btn-main i{position:absolute;top:0;bottom:0;left:-60%;width:45%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:lsxShimmer 3.4s 1.6s ease-in-out infinite}
@keyframes lsxShimmer{0%{left:-60%}45%,100%{left:130%}}
#lsx-hero .lsx-btn-main svg{width:15px;height:15px;transition:transform .18s}
#lsx-hero .lsx-btn-main:hover svg{transform:translateX(3px)}
#lsx-hero .lsx-btn-ghost{display:inline-flex;align-items:center;height:54px;padding:0 28px;border-radius:999px;color:#fff;font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;
  background:linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.035)) padding-box,
             linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s, background .18s, box-shadow .18s}
#lsx-hero .lsx-btn-ghost:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.4);
  background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)) padding-box,
             linear-gradient(180deg,rgba(217,246,75,.45),rgba(217,246,75,.1)) border-box}
#lsx-hero .lsx-micro{color:#6f7565;font-size:13px;margin-bottom:40px}
#lsx-hero .lsx-micro b{color:#a8ae98;font-weight:600}

#lsx-hero .lsx-proof{display:flex;align-items:center;gap:26px;padding-top:26px;flex-wrap:wrap;position:relative;margin-bottom:18px}
#lsx-hero .lsx-proof::before{content:"";position:absolute;top:0;left:0;right:18%;height:1px;
  background:linear-gradient(90deg,rgba(217,246,75,.25),rgba(255,255,255,.07) 40%,transparent)}
#lsx-hero .lsx-item{display:flex;flex-direction:column;gap:3px}
#lsx-hero .lsx-n{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:22px;color:#fff;letter-spacing:-.02em}
#lsx-hero .lsx-n em{color:var(--lime);font-style:normal}
#lsx-hero .lsx-l{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6f7565}
#lsx-hero .lsx-vsep{width:1px;height:34px;background:linear-gradient(180deg,transparent,#262a1a,transparent)}

#lsx-hero .lsx-ratings{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
#lsx-hero .lsx-rate{display:inline-flex;align-items:center;gap:9px}
#lsx-hero .lsx-mark{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:10.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.4)}
#lsx-hero .lsx-g2 .lsx-mark{background:#ff492c;color:#fff}
#lsx-hero .lsx-tp .lsx-mark{background:#00b67a;color:#fff;font-size:12px}
#lsx-hero .lsx-stars{color:var(--lime);letter-spacing:1.5px;font-size:12px;filter:drop-shadow(0 0 8px rgba(217,246,75,.4))}
#lsx-hero .lsx-val{color:#fff;font-weight:700;font-size:13px}
#lsx-hero .lsx-on{color:#6f7565;font-size:12px}

#lsx-hero .lsx-radar-zone{position:relative;height:600px}
#lsx-hero .lsx-radar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:470px;height:470px}
#lsx-hero .lsx-dish{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(217,246,75,.07),rgba(217,246,75,.025) 45%,transparent 72%);
  box-shadow:inset 0 0 60px rgba(217,246,75,.05)}
#lsx-hero .lsx-ring{position:absolute;border-radius:50%}
#lsx-hero .lsx-r1{inset:0;border:1px solid rgba(217,246,75,.28);box-shadow:0 0 40px rgba(217,246,75,.08), inset 0 0 40px rgba(217,246,75,.05)}
#lsx-hero .lsx-r2{inset:17%;border:1px solid rgba(217,246,75,.18)}
#lsx-hero .lsx-r3{inset:34%;border:1px solid rgba(217,246,75,.12)}
#lsx-hero .lsx-ch{position:absolute;left:2%;right:2%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,246,75,.18),transparent)}
#lsx-hero .lsx-cv{position:absolute;top:2%;bottom:2%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(217,246,75,.18),transparent)}
#lsx-hero .lsx-ticks{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(217,246,75,.35) 0deg .5deg,transparent .5deg 15deg);
  -webkit-mask-image:radial-gradient(circle,transparent 47.6%, #000 48.2%, #000 49.4%, transparent 50%);
  mask-image:radial-gradient(circle,transparent 47.6%, #000 48.2%, #000 49.4%, transparent 50%)}

/* the glow trails the beam: beam at 0°, tail fills 265°→360° behind it */
#lsx-hero .lsx-sweep{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:conic-gradient(from 265deg,transparent 0deg,rgba(217,246,75,.03) 20deg,rgba(217,246,75,.12) 60deg,rgba(217,246,75,.34) 95deg,transparent 95.4deg);
  animation:lsxSpin 6s linear infinite;filter:blur(1px);will-change:transform}
#lsx-hero .lsx-sweep::before{content:"";position:absolute;left:50%;top:0;bottom:50%;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(217,246,75,.95),rgba(217,246,75,.15));box-shadow:0 0 14px rgba(217,246,75,.9)}
@keyframes lsxSpin{to{transform:rotate(360deg)}}
#lsx-hero .lsx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 24px 7px rgba(217,246,75,.55);animation:lsxCore 3s ease-in-out infinite}
@keyframes lsxCore{0%,100%{box-shadow:0 0 24px 7px rgba(217,246,75,.55)}50%{box-shadow:0 0 36px 12px rgba(217,246,75,.75)}}

#lsx-hero .lsx-blip{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px 2px rgba(217,246,75,.85)}
#lsx-hero .lsx-blip::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(217,246,75,.55);animation:lsxPing 6s ease-out infinite}
@keyframes lsxPing{0%{transform:scale(.35);opacity:1}18%,100%{transform:scale(2.3);opacity:0}}
#lsx-hero .lsx-b-ne{left:63%;top:22%}#lsx-hero .lsx-b-ne::after{animation-delay:.4s}
#lsx-hero .lsx-b-se{left:69%;top:57%}#lsx-hero .lsx-b-se::after{animation-delay:1.8s}
#lsx-hero .lsx-b-sw{left:33%;top:64%}#lsx-hero .lsx-b-sw::after{animation-delay:3.7s}
#lsx-hero .lsx-b-nw{left:29%;top:30%}#lsx-hero .lsx-b-nw::after{animation-delay:5.2s}

#lsx-hero .lsx-lead{position:absolute;width:236px;border-radius:15px;padding:12px 14px;backdrop-filter:blur(10px);opacity:0;
  border:1px solid transparent;
  background:linear-gradient(160deg,rgba(16,18,10,.95),rgba(9,10,6,.97)) padding-box,
             linear-gradient(160deg,rgba(217,246,75,.45),rgba(217,246,75,.06) 35%,rgba(255,255,255,.06) 70%,rgba(217,246,75,.2)) border-box;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
@keyframes lsxDne{0%,6.7%{opacity:0;transform:translateY(8px) scale(.9)}10.5%,26%{opacity:1;transform:none}30%,100%{opacity:0;transform:translateY(-5px) scale(.94)}}
@keyframes lsxDse{0%,30%{opacity:0;transform:translateY(8px) scale(.9)}33.8%,57.7%{opacity:1;transform:none}61.7%,100%{opacity:0;transform:translateY(-5px) scale(.94)}}
@keyframes lsxDsw{0%,61.7%{opacity:0;transform:translateY(8px) scale(.9)}65.5%,82.7%{opacity:1;transform:none}86.7%,100%{opacity:0;transform:translateY(-5px) scale(.94)}}
@keyframes lsxDnw{2.7%{opacity:1;transform:none}6.7%,86.7%{opacity:0;transform:translateY(8px) scale(.9)}90.5%{opacity:1;transform:none}100%{opacity:1;transform:none}}
#lsx-hero .lsx-lead-ne{right:-14px;top:44px;transform-origin:0% 100%;animation:lsxDne 6s infinite}
#lsx-hero .lsx-lead-se{right:-4px;bottom:36px;transform-origin:0% 0%;animation:lsxDse 6s infinite}
#lsx-hero .lsx-lead-sw{left:-6px;bottom:22px;transform-origin:100% 0%;animation:lsxDsw 6s infinite}
#lsx-hero .lsx-lead-nw{left:-14px;top:38px;transform-origin:100% 100%;animation:lsxDnw 6s infinite}

#lsx-hero .lsx-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#lsx-hero .lsx-ava{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;font-family:'Plus Jakarta Sans','Inter',sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.4)}
#lsx-hero .lsx-lead-ne .lsx-ava{background:linear-gradient(135deg,#8b7cf0,#6c5ce7);color:#fff}
#lsx-hero .lsx-lead-se .lsx-ava{background:linear-gradient(135deg,#3b9ff0,#0984e3);color:#fff}
#lsx-hero .lsx-lead-sw .lsx-ava{background:linear-gradient(135deg,#f0a13b,#e37209);color:#fff}
#lsx-hero .lsx-lead-nw .lsx-ava{background:linear-gradient(135deg,#f06292,#d81b60);color:#fff}
#lsx-hero .lsx-nm{color:#fff;font-weight:700;font-size:13px}
#lsx-hero .lsx-rl{color:#8b917c;font-size:11px;margin-top:1px}
#lsx-hero .lsx-row{display:flex;align-items:center;gap:7px;font-size:11px;color:#b9bfa9;padding:2.5px 0}
#lsx-hero .lsx-ok{color:var(--lime);font-weight:700;text-shadow:0 0 8px rgba(217,246,75,.5)}
#lsx-hero .lsx-score{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}
#lsx-hero .lsx-t{font-size:9.5px;letter-spacing:.1em;color:#6f7565;font-weight:700}
#lsx-hero .lsx-bar{flex:1;height:4px;border-radius:2px;background:#1a1d12;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#lsx-hero .lsx-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--lime-dim),var(--lime));box-shadow:0 0 8px rgba(217,246,75,.6)}
#lsx-hero .lsx-pct{color:var(--lime);font-weight:800;font-size:11.5px;font-family:'Plus Jakarta Sans','Inter',sans-serif}
#lsx-hero .lsx-tag{position:absolute;top:-9px;right:13px;background:linear-gradient(135deg,var(--lime2),var(--lime));color:#000;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  box-shadow:0 4px 14px rgba(217,246,75,.4), inset 0 1px 0 rgba(255,255,255,.5)}

@media (prefers-reduced-motion: reduce){
  #lsx-hero *{animation:none!important;transition:none!important}
  #lsx-hero .lsx-lead-ne{opacity:1!important}}
@media(max-width:1080px){
  #lsx-hero .lsx-wrap{grid-template-columns:1fr;padding:56px 28px}
  #lsx-hero .lsx-radar-zone{height:560px}
  #lsx-hero h1{max-width:none}}

/* ============ workspace section polish (cards below the demo) ============ */
/* The clipped shadows were never an overflow or z-index problem: the sections
   carry `content-visibility: auto`, which implies paint containment, and paint
   containment clips a child's shadow at the section's own edges. A 300px probe
   shadow got sliced exactly at 418/1570 — the section box — while every
   ancestor reported overflow:visible. Turning containment off on the sections
   that hold lifting cards is the fix; the shadows below can then be as wide as
   they like. */
/* Applied to every section, not just the ones with lifting cards: 12 of the 13
   sections carry content-visibility:auto, so ANY shadow that reaches past its
   own section was being sliced — the demo card, the Sonya panel, the pricing
   cards, all of them. */
main section{content-visibility:visible!important;contain:none!important;contain-intrinsic-size:auto!important}
.lsx-liftsec{position:relative;z-index:2}
.lsx-cardlift{position:relative;z-index:4;transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1)}
.lsx-cardlift:hover{transform:translateY(-5px)}
.lsx-cardlift.lsx-dark:hover{box-shadow:0 30px 70px -18px rgba(0,0,0,.62), 0 0 46px -6px rgba(217,246,75,.16)}
.lsx-cardlift.lsx-lime:hover{box-shadow:0 30px 70px -18px rgba(110,130,18,.5)}

/* Quickstart pipeline — replaces the video player that had no video */
.lsx-qs{position:relative;border-radius:18px;padding:18px 20px 16px;margin-top:6px;overflow:hidden;
  border:1px solid transparent;font-family:'Inter',sans-serif;
  background:linear-gradient(165deg,rgba(16,18,10,.95),rgba(8,9,5,.97)) padding-box,
             linear-gradient(165deg,rgba(217,246,75,.4),rgba(217,246,75,.05) 40%,rgba(255,255,255,.07) 75%,rgba(217,246,75,.18)) border-box;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.lsx-qs-head{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#8b917c;margin-bottom:14px}
.lsx-qs-head .lsx-qs-dot{width:6px;height:6px;border-radius:50%;background:#d9f64b;box-shadow:0 0 8px #d9f64b;animation:lsxQsDot 2s infinite}
@keyframes lsxQsDot{0%,100%{opacity:1}50%{opacity:.35}}
.lsx-qs-step{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);opacity:.38;transition:none}
.lsx-qs-step:last-of-type{border-bottom:none}
.lsx-qs-num{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:0 0 22px;
  font-size:10.5px;font-weight:800;color:#9aa08c;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lsx-qs-txt{flex:1;min-width:0}
.lsx-qs-t1{color:#fff;font-weight:700;font-size:13px}
.lsx-qs-t2{color:#8b917c;font-size:11px;margin-top:1px}
.lsx-qs-check{width:16px;height:16px;border-radius:50%;flex:0 0 16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eeff6e,#d9f64b);color:#000;font-size:10px;font-weight:900;opacity:0;transform:scale(.4)}
/* 7.5s loop: steps light up in order, checks land, total flashes */
.lsx-qs .q1{animation:lsxQsA 7.5s infinite}
.lsx-qs .q2{animation:lsxQsB 7.5s infinite}
.lsx-qs .q3{animation:lsxQsC 7.5s infinite}
@keyframes lsxQsA{0%{opacity:.38}4%,100%{opacity:1}}
@keyframes lsxQsB{0%,22%{opacity:.38}27%,100%{opacity:1}}
@keyframes lsxQsC{0%,52%{opacity:.38}57%,100%{opacity:1}}
.lsx-qs .q1 .lsx-qs-check{animation:lsxQsK1 7.5s infinite}
.lsx-qs .q2 .lsx-qs-check{animation:lsxQsK2 7.5s infinite}
.lsx-qs .q3 .lsx-qs-check{animation:lsxQsK3 7.5s infinite}
@keyframes lsxQsK1{0%,16%{opacity:0;transform:scale(.4)}21%,100%{opacity:1;transform:scale(1)}}
@keyframes lsxQsK2{0%,46%{opacity:0;transform:scale(.4)}51%,100%{opacity:1;transform:scale(1)}}
@keyframes lsxQsK3{0%,74%{opacity:0;transform:scale(.4)}79%,100%{opacity:1;transform:scale(1)}}
.lsx-qs-bar{height:3px;border-radius:2px;background:#1a1d12;margin-top:6px;overflow:hidden}
.lsx-qs-bar i{display:block;height:100%;border-radius:2px;width:0;
  background:linear-gradient(90deg,#9fc12e,#d9f64b);box-shadow:0 0 8px rgba(217,246,75,.6);
  animation:lsxQsBar 7.5s infinite}
@keyframes lsxQsBar{0%,26%{width:0}48%,100%{width:100%}}
.lsx-qs-total{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);animation:lsxQsT 7.5s infinite}
@keyframes lsxQsT{0%,78%{opacity:.4}84%,100%{opacity:1}}
.lsx-qs-total .lsx-qs-res{color:#fff;font-weight:800;font-size:14px;font-family:'Plus Jakarta Sans','Inter',sans-serif}
.lsx-qs-total .lsx-qs-res em{color:#d9f64b;font-style:normal}
.lsx-qs-total .lsx-qs-time{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8b917c}
.lsx-qs-total .lsx-qs-time b{color:#d9f64b}
@media (prefers-reduced-motion: reduce){
  .lsx-qs *{animation:none!important}
  .lsx-qs .lsx-qs-step{opacity:1}
  .lsx-qs .lsx-qs-check{opacity:1;transform:none}
  .lsx-qs-bar i{width:100%}}

/* ============ dark feature card: refine the grain, add depth ============ */
.lsx-fine-grain{opacity:.06!important}
.lsx-darkcard::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(217,246,75,.4) 35%,rgba(217,246,75,.4) 65%,transparent)}
.lsx-darkcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse 60% 45% at 22% 108%,rgba(217,246,75,.10),transparent 65%),
    radial-gradient(ellipse 45% 35% at 88% -6%,rgba(217,246,75,.07),transparent 60%),
    radial-gradient(ellipse 130% 110% at 50% 45%,transparent 58%,rgba(0,0,0,.42) 100%)}


/* Interactive demo, broken out of the 1440 container to the window width.
   The embed wrapper sizes itself with a percentage padding-bottom, so the
   height follows the new width and the product renders larger, not stretched. */
/* Two constraints shape this rule.
   1. The page sets `zoom: .8` on <html>. Under zoom, 100vw and percentages
      resolve against different boxes, so mixing them (width in vw, offset in %)
      puts the card off-centre. Everything here is a percentage of the container
      plus a fixed overhang — one coordinate system, no drift.
   2. The section is a Framer Motion node and writes `transform` inline after
      its reveal, so translateX cannot be used for the centring either. */
/* ---- demo card, expanded to the full screen on click ----
   Position and size are written inline by lsx-hero.js. They cannot be expressed
   here: the page sets zoom:.8 on <html>, under which % resolves against a layout
   box wider than the window and vw against a third value again. position:fixed
   sidesteps all of it — the box is laid out against the viewport, so the site's
   1440 grid cannot clip it. */
.lsx-fs {
  position: fixed !important;
  z-index: 200;
  max-width: none !important;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09);
}
.lsx-fs-anim {
  transition: left .42s cubic-bezier(.22,.9,.24,1), top .42s cubic-bezier(.22,.9,.24,1),
              width .42s cubic-bezier(.22,.9,.24,1), height .42s cubic-bezier(.22,.9,.24,1);
}

.lsx-fs-back {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(4,4,5,.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .42s ease;
}
.lsx-fs-back.on { opacity: 1; }

.lsx-fs-close {
  position: absolute;
  top: 18px; right: 18px;
  /* the card's own header strip is z-10 and would swallow the click */
  z-index: 30;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,12,.72);
  color: #e6e6ea;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lsx-fs-close:hover { background: #d9f64b; color: #0a0a0a; border-color: #d9f64b; }
.lsx-fs-close svg { width: 16px; height: 16px; }

/* Opens the demo. Sits in the card header next to the dashboard CTA, matching
   its geometry and type exactly — same 48px height, same 12px radius, same
   12px/900/1.2px Jakarta caps — so the two read as one pair, ghost + solid. */
.lsx-btn-pair { display: flex; align-items: center; gap: 10px; }
.lsx-fs-open {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 26px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: #f4f4f5;
  font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.lsx-fs-open svg { width: 15px; height: 15px; color: #d9f64b; transition: color .2s ease; }
.lsx-fs-open:hover {
  background: rgba(217,246,75,.12);
  border-color: rgba(217,246,75,.45);
  transform: translateY(-1px);
}
.lsx-fs-open:hover svg { color: #eeff6e; }

@media (prefers-reduced-motion: reduce) {
  .lsx-fs-anim, .lsx-fs-back, .lsx-fs-open { transition: none; }
}

/* ---- one content width across the page ----
   See the note in lsx-hero.js: the build had four different container widths,
   so sections started and ended on different vertical lines. 1392px is the one
   most of the page already used. */
@media (min-width: 768px) {
  /* width:auto matters — the closing CTA's container carries an explicit
     width:1280px, not just a max-width, so capping max-width alone left it
     narrow */
  .lsx-std { width: auto !important; max-width: 1392px !important; margin-left: auto; margin-right: auto; }
  .lsx-stdpad { padding-left: 24px; padding-right: 24px; }
}

/* ---- one corner scale, squircle corners ----
   Three radii instead of the seven the build shipped (12/16/24/32/40/48/72),
   assigned by block size in lsx-hero.js. `corner-shape: squircle` is the real
   superellipse — Chrome 139+; everywhere else the border-radius below is what
   renders, so this degrades to a plain rounded corner. Pills (rounded-full)
   are left alone. */
.lsx-rx-l { border-radius: 30px !important; }
.lsx-rx-m { border-radius: 18px !important; }
.lsx-rx-s { border-radius: 12px !important; }

@supports (corner-shape: squircle) {
  /* superellipse(2.2), not squircle (= superellipse(4)). A full squircle keeps
     curving far along the straight edge, which on a 400px+ card reads as a
     stretched, sheared corner rather than a soft one. 2.2 is just past a
     circular arc — the corner stays where it starts. */
  .lsx-rx-l, .lsx-rx-m, .lsx-rx-s, #lsx-hero, .lsx-fs, .lsx-mega, .lsx-qs {
    corner-shape: superellipse(2.2);
  }
}

/* The embed wrapper is square while the card around it is not, and a
   cross-origin iframe is composited in its own layer that the card's
   overflow:hidden does not always clip — so the white embed showed as square
   ears in the bottom corners. Round the wrapper and the iframe themselves. */
.lsx-embed-round,
.lsx-embed-round iframe {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.lsx-embed-round { border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
@supports (corner-shape: squircle) {
  .lsx-embed-round, .lsx-embed-round iframe { corner-shape: superellipse(2.2); }
}

/* ---- depth on the big blocks ----
   Only possible now that paint containment is off: before, any shadow with
   real reach was sliced at the section edge. Two layers — a wide soft one for
   the drop and a tight one to seat the card on the page. */
.lsx-shade {
  box-shadow:
    0 34px 80px -34px rgba(9,9,11,.55),
    0 14px 34px -20px rgba(9,9,11,.38),
    0 1px 0 rgba(255,255,255,.04) inset !important;
}
.lsx-cardlift:hover{transform:translateY(-6px)}
.lsx-cardlift.lsx-dark:hover{box-shadow:0 46px 96px -30px rgba(0,0,0,.72), 0 0 60px -10px rgba(217,246,75,.22)!important}
.lsx-cardlift.lsx-lime:hover{box-shadow:0 46px 96px -30px rgba(96,116,10,.6), 0 0 54px -14px rgba(217,255,0,.35)!important}

/* ---- the light half of the page ----
   It was flat #fff edge to edge, which gave the white cards nothing to sit on
   and made the new shadows read as smudges. The canvas now carries a very low
   contrast paper tone with two brand-tinted pools of light (lime top-left,
   cool top-right) and a trace of grain; cards stay pure #fff and lift off it. */
/* The same picture as before, but painted by a fixed pseudo-element instead of
   four `background-attachment: fixed` layers. Fixed backgrounds are repainted
   on the main thread on every scroll frame; a fixed element is promoted to its
   own composited layer and simply stays put. Identical output, no per-frame
   paint. */
.lsx-canvas { background: #f8f9f3 !important; }
.lsx-canvas::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 10% -6%, rgba(217,246,75,.16), transparent 62%),
    radial-gradient(900px 540px at 94% 4%, rgba(150,180,255,.10), transparent 64%),
    radial-gradient(1200px 760px at 52% 104%, rgba(217,246,75,.09), transparent 66%),
    linear-gradient(180deg, #f7f8f2 0%, #fbfbf7 42%, #f5f6f0 100%);
}
.lsx-canvas::after {
  content: '';
  position: fixed;
  inset: 0;
  /* -1 keeps the grain above the canvas background but below every child, so
     no stacking context is forced onto <main> — doing that put the hero over
     the nav and clipped the mega-menu */
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* sections that used to paint their own flat white now let the canvas through */
.lsx-paper { background-color: transparent !important; }

/* ---- finishing pass ----
   Secondary CTAs, anchor scrolling, focus rings and a soft rule between
   sections. Everything here is additive: remove the classes and the page falls
   back to what the build shipped. */

/* the dark pill CTAs (Start enriching, Chat with Sonya, …) all measured
   differently — same height, corner and type as the lime primary now */
.lsx-cta2 {
  border-radius: 12px !important;
  box-shadow: 0 14px 30px -14px rgba(9,9,11,.55), 0 2px 6px -3px rgba(9,9,11,.4),
              inset 0 1px 0 rgba(255,255,255,.09) !important;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease !important;
}
.lsx-cta2:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(9,9,11,.6), 0 3px 10px -4px rgba(9,9,11,.45),
              inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* dark blocks sitting on the light canvas get the same top edge-light the hero
   uses, so they read as lit rather than pasted on */
/* No position here: several of these blocks are absolutely-positioned
   backdrops, and forcing position:relative dropped them back into the flow —
   that is what knocked the dark panel out of the enrichment section. */
.lsx-litedge { }
.lsx-litedge::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,246,75,.4), transparent);
  pointer-events: none;
  z-index: 5;
}

/* keyboard focus was invisible against both halves of the page */
main a:focus-visible, main button:focus-visible,
.lsx-nav a:focus-visible, .lsx-nav button:focus-visible {
  outline: 2px solid #b7d92e;
  outline-offset: 3px;
  border-radius: 8px;
}

/* mega-menu links point at in-page anchors; jumping to them was abrupt */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* Nothing on screen, nothing to animate: the radar sweep, the blips and the
   four lead cards keep compositing at 60fps while the user reads the rest of
   the page. Paused via IntersectionObserver in lsx-hero.js. */
#lsx-hero.lsx-idle *, #lsx-hero.lsx-idle { animation-play-state: paused !important; }

/* ---- dark footer + ecosystem column ----
   The footer shipped white; on a page that now ends in a dark section it read
   as an unfinished strip. Colours are overridden rather than re-authored, so
   the build's own layout classes still drive the grid. */
.lsx-footer {
  /* Layered as backgrounds rather than pseudo-elements on purpose: a positioned
     ::before here would sit above the footer's own unpositioned content, and
     pushing it behind with z-index:-1 would bury it under the footer's fill.
     Top to bottom: a lime hairline on the edge, a wide lime bloom rising off
     the orbit sphere, a cool counter-glow top-right, then the base fade. */
  background:
    linear-gradient(90deg, transparent, rgba(217,246,75,.55) 30%, rgba(217,246,75,.55) 70%, transparent) top / 100% 1px no-repeat,
    radial-gradient(760px 320px at 50% 100%, rgba(217,246,75,.16), transparent 70%),
    radial-gradient(620px 280px at 88% 2%, rgba(120,150,255,.09), transparent 68%),
    radial-gradient(520px 260px at 6% 12%, rgba(217,246,75,.06), transparent 70%),
    linear-gradient(180deg, #0b0b0d 0%, #08080a 55%, #040405 100%) !important;
  border-top-color: transparent !important;
  color: #e4e4e7 !important;
}
.lsx-footer h4, .lsx-footer .lsx-eco-h { color: #fafafa !important; }
.lsx-footer span, .lsx-footer p, .lsx-footer li { color: #9a9aa2; }
.lsx-footer a { color: #a1a1aa !important; transition: color .18s ease; }
.lsx-footer a:hover { color: #d9f64b !important; }
.lsx-footer [class*="border-"] { border-color: rgba(255,255,255,.08) !important; }
.lsx-footer [class*="text-zinc-9"], .lsx-footer [class*="font-extrabold"] { color: #fafafa !important; }
.lsx-footer [class*="bg-zinc-1"], .lsx-footer [class*="bg-white"] { background-color: rgba(255,255,255,.06) !important; }
.lsx-footer hr { border-color: rgba(255,255,255,.08) !important; }

/* six columns became seven once Ecosystem joined; the brand block keeps its
   double width */
.lsx-footer .lsx-eco-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.lsx-eco-list { display: flex; flex-direction: column; gap: 14px; }
.lsx-eco-list a {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
}
.lsx-eco-list img {
  width: 17px; height: 17px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(255,255,255,.07);
  padding: 1px;
}
.lsx-eco-h {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ---- footer orbit ----
   The shadcn orbiting-circles globe, rebuilt in plain CSS (this repo ships a
   compiled Next export — no React source to drop a component into). Same
   anatomy as the original: rings pinned to the bottom edge so only their top
   half shows, each icon mirrored at +180deg, and every badge counter-rotating
   at its ring's speed so it never turns upside down. The icons are leads
   instead of vendor logos, and the particle sphere carries our mark. */
.lsx-orbit {
  position: relative;
  width: 100%;
  height: 275px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: 34px;
}
@media (max-width: 900px) { .lsx-orbit { height: 168px; margin-top: 24px; } }

.lsx-orbit-ring {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
}
.lsx-orbit-ring.r1 { width: 280px; height: 280px; }
.lsx-orbit-ring.r2 { width: 380px; height: 380px; border-color: rgba(255,255,255,.08); }
.lsx-orbit-ring.r3 { width: 490px; height: 490px; border-color: rgba(255,255,255,.06); }
@media (max-width: 900px) {
  .lsx-orbit-ring.r1 { width: 160px; height: 160px; }
  .lsx-orbit-ring.r2 { width: 220px; height: 220px; }
  .lsx-orbit-ring.r3 { width: 285px; height: 285px; }
}

/* arm: full radius, rotated so its tip lands on the ring */
.lsx-orbit-arm {
  position: absolute;
  top: 0; left: 50%;
  height: 50%;
  margin-left: -14px;
  transform-origin: bottom center;
  animation: lsxOrbitCW var(--dur) linear infinite;
}
.lsx-orbit-ring.ccw .lsx-orbit-arm { animation-name: lsxOrbitCCW; }
@keyframes lsxOrbitCW  { from { transform: rotate(var(--a)) } to { transform: rotate(calc(var(--a) + 360deg)) } }
@keyframes lsxOrbitCCW { from { transform: rotate(var(--a)) } to { transform: rotate(calc(var(--a) - 360deg)) } }
@keyframes lsxSpinCW   { from { transform: rotate(var(--ca)) } to { transform: rotate(calc(var(--ca) - 360deg)) } }
@keyframes lsxSpinCCW  { from { transform: rotate(var(--ca)) } to { transform: rotate(calc(var(--ca) + 360deg)) } }

/* the badge itself — a circle on the ring, like the component's icon pills */
.lsx-orbit-chip {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  /* each lead carries its own --c, so the ring reads as people rather than a
     row of identical dots */
  background: linear-gradient(145deg, var(--c, #d9f64b), color-mix(in srgb, var(--c, #d9f64b) 62%, #0a0a0a));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.9),
              0 0 16px -4px color-mix(in srgb, var(--c, #d9f64b) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35);
  animation: lsxSpinCW var(--dur) linear infinite;
}
.lsx-orbit-ring.ccw .lsx-orbit-chip { animation-name: lsxSpinCCW; }
@media (max-width: 900px) {
  .lsx-orbit-arm { margin-left: -10px; }
  .lsx-orbit-chip { width: 21px; height: 21px; margin-top: -10px; }
}
.lsx-orbit-chip b {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(9,9,11,.86);
}
@media (max-width: 900px) { .lsx-orbit-chip b { font-size: 7.5px; } }
/* verified leads carry a lime tick, enriched ones a soft dot */
.lsx-orbit-chip::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0d0d0f;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 2px #d9f64b;
}
.lsx-orbit-chip.enriched::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
@media (max-width: 900px) { .lsx-orbit-chip::after { width: 6px; height: 6px; border-width: 1.5px; } }

/* the particle sphere at the centre, half of it below the fold of the block */
.lsx-orbit-core {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translate(-50%, 50%);
  width: 235px; height: 235px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 30%, rgba(217,246,75,.22), transparent 44%),
    radial-gradient(circle at 50% 50%, #101208 0%, #0a0b06 58%, #060704 76%);
  box-shadow: 0 0 70px -20px rgba(217,246,75,.45), inset 0 0 34px rgba(0,0,0,.8);
}
@media (max-width: 900px) { .lsx-orbit-core { width: 135px; height: 135px; } }
/* two dot fields at different densities, masked to read as a lit globe */
.lsx-orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.lsx-orbit-mark {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translate(-50%, 34%);
  width: 50px; height: 50px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(8,8,8,.8);
  border: 1px solid rgba(217,246,75,.3);
  box-shadow: 0 0 30px -4px rgba(217,246,75,.55), inset 0 1px 0 rgba(255,255,255,.08);
  z-index: 2;
}
.lsx-orbit-mark img { width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 900px) {
  .lsx-orbit-mark { width: 34px; height: 34px; border-radius: 11px; }
  .lsx-orbit-mark img { width: 20px; height: 20px; }
}

/* offscreen or reduced motion: hold everything still */
.lsx-orbit.lsx-idle * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lsx-orbit * { animation: none !important; } }


/* ================= first paint =================
   Everything below is expressed against classes that already exist in the
   static HTML, so the new look is on screen with the very first frame instead
   of appearing once the JS has run. The JS passes still run afterwards and
   handle the cases a stylesheet cannot compute (radius by block size, the
   mega-menu, the orbit). Before this, a reload showed the shipped design for
   as long as hydration took. */

/* the page canvas — same three pools of light, no JS class needed */
body > div.min-h-screen { background: #f8f9f3 !important; }
body > div.min-h-screen::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 10% -6%, rgba(217,246,75,.16), transparent 62%),
    radial-gradient(900px 540px at 94% 4%, rgba(150,180,255,.10), transparent 64%),
    radial-gradient(1200px 760px at 52% 104%, rgba(217,246,75,.09), transparent 66%),
    linear-gradient(180deg, #f7f8f2 0%, #fbfbf7 42%, #f5f6f0 100%);
}
body > div.min-h-screen::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main section.bg-app-bg { background-color: transparent !important; }

/* footer, dark from the first frame */
footer.bg-app-bg {
  background:
    linear-gradient(90deg, transparent, rgba(217,246,75,.55) 30%, rgba(217,246,75,.55) 70%, transparent) top / 100% 1px no-repeat,
    radial-gradient(760px 320px at 50% 100%, rgba(217,246,75,.16), transparent 70%),
    radial-gradient(620px 280px at 88% 2%, rgba(120,150,255,.09), transparent 68%),
    radial-gradient(520px 260px at 6% 12%, rgba(217,246,75,.06), transparent 70%),
    linear-gradient(180deg, #0b0b0d 0%, #08080a 55%, #040405 100%) !important;
  border-top-color: transparent !important;
  color: #e4e4e7 !important;
}

/* one content width */
@media (min-width: 768px) {
  main section > div.mx-auto[class*="max-w-"] {
    width: auto !important;
    max-width: 1392px !important;
    margin-left: auto; margin-right: auto;
  }
}

/* the corner scale, for the radii the build states literally */
main [class*="rounded-[24px]"], main [class*="rounded-[32px]"],
main [class*="rounded-[40px]"], main [class*="rounded-[48px]"],
main .rounded-3xl, main .premium-dark-card, main .premium-dark-card-popular { border-radius: 30px !important; }
main [class*="rounded-[20px]"], main [class*="rounded-[18px]"], main .rounded-2xl { border-radius: 18px !important; }
main [class*="rounded-[12px]"], main .rounded-xl { border-radius: 12px !important; }

/* the flat link row is hidden until lsx-nav.js puts the mega-menu in its place,
   so the old nav never flashes either */