/* Kudexa Site 3.21.0 — the home page's new design and colours (Switch site_home_style).
   Same page, same words, same order: only colours, shapes and shadows change.
   Every rule is scoped to .kxs .kh3n (the class the page gets when the switch is on),
   printed after home3.css. Surfaces use the site's tokens, so light and dark both work. */
.kxs .kh3n{
  --n-blue:#2F5BEA; --n-violet:#7C4DFF; --n-pink:#E8467C; --n-green:#13955A;
  --n-grad:linear-gradient(90deg,#2F5BEA 0%,#7C4DFF 55%,#E8467C 100%);
  --n-shadow:0 1px 0 rgba(16,20,45,.05),0 24px 48px -28px rgba(16,20,45,.28);
}
.kxs[data-kx="dark"] .kh3n{--n-shadow:0 1px 0 rgba(255,255,255,.04),0 24px 48px -28px rgba(0,0,0,.8)}

/* headings and labels */
.kxs .kh3n h1 em,.kxs .kh3n h2 em{background:var(--n-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kxs .kh3n .kh3-kick{color:var(--n-violet)}
.kxs[data-kx="dark"] .kh3n .kh3-kick{color:#B9A2FF}

/* buttons: pills */
.kxs .kh3n .kh3-btn{border-radius:999px}
.kxs .kh3n .kh3-btn:not(.kh3-line){box-shadow:0 16px 30px -18px rgba(16,20,45,.7)}

/* hero: a soft colour field, numbered steps in their own colours */
.kxs .kh3n .kh3-hero{background:
  radial-gradient(700px 420px at 12% 0%,color-mix(in srgb,#7C4DFF 14%,transparent),transparent 70%),
  radial-gradient(700px 420px at 90% 8%,color-mix(in srgb,#E8467C 11%,transparent),transparent 70%),
  radial-gradient(900px 460px at 50% 0%,color-mix(in srgb,#2F5BEA 8%,transparent),transparent 70%),var(--page)}
.kxs .kh3n .kh3-step{border-radius:999px;box-shadow:var(--n-shadow)}
.kxs .kh3n .kh3-step:nth-of-type(1) i{background:color-mix(in srgb,#2F5BEA 14%,var(--card));color:#2F5BEA}
.kxs .kh3n .kh3-step:nth-of-type(3) i{background:color-mix(in srgb,#7C4DFF 14%,var(--card));color:#7C4DFF}
.kxs .kh3n .kh3-step:last-of-type{background:var(--invert);color:var(--invert-ink);border-color:var(--invert)}
.kxs .kh3n .kh3-step:last-of-type i{background:linear-gradient(145deg,#FF8FB8,#E8467C);color:#fff}

/* the video, framed in a soft gradient card */
.kxs .kh3n .kh3-video{padding:12px;border-radius:30px;box-shadow:var(--n-shadow);
  background:linear-gradient(140deg,color-mix(in srgb,#7C4DFF 16%,var(--card)),color-mix(in srgb,#2F5BEA 12%,var(--card)) 50%,color-mix(in srgb,#FF8A5B 16%,var(--card)))}
.kxs .kh3n .kh3-stage{border:0;border-radius:20px}
.kxs .kh3n .kh3-cap{margin-top:10px}

/* sections that sit on the soft band keep it, a little warmer */
.kxs .kh3n .kh3-soft{background:linear-gradient(180deg,color-mix(in srgb,#7C4DFF 4%,var(--soft)),var(--soft))}

/* how it starts: three cards, each in its own colour */
.kxs .kh3n .kh3-st{border-radius:28px;box-shadow:var(--n-shadow);border-color:color-mix(in srgb,var(--c) 18%,var(--line));
  background:linear-gradient(170deg,var(--card) 40%,color-mix(in srgb,var(--c) 8%,var(--card)))}
.kxs .kh3n .kh3-st:nth-child(1){--c:#2F5BEA;--c1:#6E8BFF}
.kxs .kh3n .kh3-st:nth-child(2){--c:#7C4DFF;--c1:#C38BFF}
.kxs .kh3n .kh3-st:nth-child(3){--c:#13A865;--c1:#3BE39C}
.kxs .kh3n .kh3-st .n,.kxs .kh3n .kh3-st.hi .n{border-radius:14px;color:#fff;background:linear-gradient(145deg,var(--c1),var(--c));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 12px 22px -12px var(--c)}
.kxs .kh3n .kh3-st .tag,.kxs .kh3n .kh3-st.hi .tag{background:color-mix(in srgb,var(--c) 12%,var(--card));color:var(--c)}
.kxs .kh3n .kh3-st.hi{border:2px solid var(--c);box-shadow:0 26px 50px -28px var(--c)}

/* what you will have: the same three colours */
.kxs .kh3n .kh3-hv{border-radius:28px;box-shadow:var(--n-shadow);border-color:color-mix(in srgb,var(--c) 18%,var(--line));
  background:linear-gradient(170deg,var(--card) 40%,color-mix(in srgb,var(--c) 8%,var(--card)))}
.kxs .kh3n .kh3-hv:nth-child(1){--c:#2F5BEA}.kxs .kh3n .kh3-hv:nth-child(2){--c:#7C4DFF}.kxs .kh3n .kh3-hv:nth-child(3){--c:#13A865}
.kxs .kh3n .kh3-hvs,.kxs .kh3n .kh3-hv.hi .kh3-hvs{color:var(--c)}
.kxs .kh3n .kh3-hvs i,.kxs .kh3n .kh3-hv.hi .kh3-hvs i{background:var(--c);color:#fff;border-color:var(--c)}
.kxs .kh3n .kh3-hvc{background:color-mix(in srgb,var(--c) 12%,var(--card));color:var(--c)}
.kxs .kh3n .kh3-hv.hi{border:2px solid var(--c);box-shadow:0 26px 50px -28px var(--c)}

/* quotes, when there are any */
.kxs .kh3n .kh3-quote{border-radius:24px;box-shadow:var(--n-shadow)}

/* pricing: monthly clean, yearly the dark premium card */
.kxs .kh3n .kh3-pc{border-radius:28px;box-shadow:var(--n-shadow)}
.kxs .kh3n .kh3-pc.hi{border:0;color:#fff;overflow:hidden;
  background:radial-gradient(340px 260px at 100% 0%,rgba(124,77,255,.55),transparent 70%),radial-gradient(300px 240px at 0% 100%,rgba(232,70,124,.3),transparent 70%),linear-gradient(155deg,#1B1446 0%,#0C0F1D 62%);
  box-shadow:0 30px 60px -28px rgba(76,45,190,.65)}
.kxs .kh3n .kh3-pc.hi small,.kxs .kh3n .kh3-pc.hi .kh3-pfor,.kxs .kh3n .kh3-pc.hi .gst,.kxs .kh3n .kh3-pc.hi .kh3-reass,.kxs .kh3n .kh3-pc.hi .kh3-inc{color:#C9CCDA}
.kxs .kh3n .kh3-pc.hi .amt,.kxs .kh3n .kh3-pc.hi .amt .per{color:#fff}
.kxs .kh3n .kh3-pc.hi .kh3-inc:after{background:rgba(255,255,255,.16)}
.kxs .kh3n .kh3-pc.hi ul{color:#E6E7F0}.kxs .kh3n .kh3-pc.hi ul.kh3-ul2 b{color:#fff}
.kxs .kh3n .kh3-pc.hi .kh3-btn{background:#fff;color:#0C0F1D;border-color:#fff}
.kxs .kh3n .kh3-pc .badge{background:#FFC24D;color:#2A1A00;padding:6px 14px;font-size:13px}
.kxs .kh3n .kh3-pc .kh3-inc{color:var(--n-blue)}
.kxs .kh3n .kh3-pc.hi .kh3-inc{color:#B9A2FF}
.kxs .kh3n .kh3-pc li:before,.kxs .kh3n .kh3-pc ul.kh3-ul2 li:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--n-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.kxs .kh3n .kh3-pc ul.kh3-ul2 li{gap:10px}
.kxs .kh3n .kh3-pc.hi li:before{background-color:#9B7BFF}

/* the trial in three steps: three coloured tiles */
.kxs .kh3n .kh3-trialtl{border:0;background:none;gap:12px;overflow:visible}
.kxs .kh3n .kh3-trialtl > div{border:0;border-radius:20px;padding:16px 18px;background:color-mix(in srgb,var(--c) 9%,var(--card))}
.kxs .kh3n .kh3-trialtl > div:nth-child(1){--c:#13A865;--c1:#3BE39C}
.kxs .kh3n .kh3-trialtl > div:nth-child(2){--c:#2F5BEA;--c1:#8FA8FF}
.kxs .kh3n .kh3-trialtl > div:nth-child(3){--c:#7C4DFF;--c1:#B9A2FF}
.kxs .kh3n .kh3-trialtl i,.kxs .kh3n .kh3-trialtl > div:first-child i{width:32px;height:32px;border-radius:10px;border:0;color:#fff;background:linear-gradient(145deg,var(--c1),var(--c))}

/* trust line as soft chips */
.kxs .kh3n .kh3-trust{gap:8px}
.kxs .kh3n .kh3-trust span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.kxs .kh3n .kh3-trust span:not(:first-child):before{content:none}

/* everything in both plans: one colour per system */
.kxs .kh3n .kh3-stk > div{border-radius:24px;border-top:5px solid var(--c);box-shadow:0 22px 40px -30px var(--c);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,var(--card)),var(--card) 110px)}
.kxs .kh3n .kh3-stk > div:nth-child(1){--c:#7C4DFF}.kxs .kh3n .kh3-stk > div:nth-child(2){--c:#2F5BEA}
.kxs .kh3n .kh3-stk > div:nth-child(3){--c:#13A865}.kxs .kh3n .kh3-stk > div:nth-child(4){--c:#FF8A1F}
.kxs .kh3n .kh3-stk > div:nth-child(5){--c:#E8467C}.kxs .kh3n .kh3-stk > div:nth-child(6){--c:#0E8FA3}
.kxs .kh3n .kh3-stk b:before{width:10px;height:10px;background:var(--c)}
.kxs .kh3n .kh3-stk li:before{color:var(--c)}
.kxs .kh3n .kh3-free{border:1.5px dashed color-mix(in srgb,#7C4DFF 35%,var(--line));background:var(--card);border-radius:18px}
.kxs .kh3n .kh3-free a{color:var(--n-blue)}
.kxs[data-kx="dark"] .kh3n .kh3-free a{color:#8FA8FF}

/* quick answers */
.kxs .kh3n .kh3-faq2 details{border-radius:18px}
.kxs .kh3n .kh3-faq2 summary:after{background:color-mix(in srgb,#7C4DFF 10%,var(--card));border-color:transparent;color:#7C4DFF}
.kxs .kh3n .kh3-faq2 details[open]{border-color:#7C4DFF;box-shadow:0 18px 40px -28px rgba(124,77,255,.6)}
.kxs .kh3n .kh3-faq2 details[open] summary:after{background:#7C4DFF;border-color:#7C4DFF;color:#fff}
.kxs .kh3n .kh3-askq{border-radius:18px}
.kxs .kh3n .kh3-askq-ic{background:linear-gradient(145deg,#B9A2FF,#7C4DFF);color:#fff}

/* the closing band: the dark premium look, with the gradient words */
.kxs .kh3n .kh3-fin{border:0;
  background:radial-gradient(520px 360px at 100% 0%,rgba(124,77,255,.55),transparent 70%),radial-gradient(480px 340px at 0% 100%,rgba(47,91,234,.5),transparent 70%),linear-gradient(155deg,#1B1446 0%,#0C0F1D 62%);
  box-shadow:0 30px 70px -30px rgba(76,45,190,.6)}
.kxs .kh3n .kh3-fin h2{color:#fff}
.kxs .kh3n .kh3-fin h2 em{background:linear-gradient(90deg,#8FA8FF,#B9A2FF 50%,#FF8FB8);-webkit-background-clip:text;background-clip:text;color:transparent}
.kxs .kh3n p.kh3-fin-sub,.kxs .kh3n .kh3-fin .kh3-risk{color:#C9CCDA}
.kxs .kh3n .kh3-fin-tag{color:#C9CCDA;border-color:rgba(255,255,255,.2)}
.kxs .kh3n .kh3-fin-tag i{background:#B9A2FF;box-shadow:0 0 0 4px rgba(185,162,255,.2)}
.kxs .kh3n .kh3-fin .kh3-btn.kh3-fin-alt{color:#fff;border-color:rgba(255,255,255,.4)}
.kxs .kh3n .kh3-fin:before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}

/* real people: each card in its own colours, moving and fading at both edges as before */
.kxs .kh3n .kh3-ppl-vp{padding:6px 0 34px}
.kxs .kh3n .kh3-pcn{position:relative;flex:none;width:232px;background:var(--card);border-radius:24px;overflow:hidden;text-align:center;padding-bottom:18px;
  display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);box-shadow:0 1px 0 rgba(16,20,45,.05),0 22px 40px -26px var(--b)}
.kxs .kh3n .kh3-pcn-ban{position:relative;width:100%;height:78px;background:linear-gradient(120deg,var(--a),var(--b))}
.kxs .kh3n .kh3-pat0{background-image:radial-gradient(circle at 85% 12%,rgba(255,255,255,.16) 0 38px,transparent 39px),radial-gradient(circle at 15% 100%,rgba(255,255,255,.12) 0 30px,transparent 31px),linear-gradient(120deg,var(--a),var(--b))}
.kxs .kh3n .kh3-pat1{background-image:linear-gradient(160deg,transparent 55%,rgba(255,255,255,.13) 55%),linear-gradient(120deg,var(--a),var(--b))}
.kxs .kh3n .kh3-pat2{background-image:radial-gradient(120% 60% at 50% 110%,rgba(255,255,255,.18) 0 50%,transparent 51%),linear-gradient(120deg,var(--a),var(--b))}
.kxs .kh3n .kh3-pat3{background-image:linear-gradient(rgba(255,255,255,.16) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.16) 2px,transparent 2px),linear-gradient(120deg,var(--a),var(--b));background-size:30px 26px,30px 26px,auto}
.kxs .kh3n .kh3-pat4{background-image:radial-gradient(circle at 20% 50%,transparent 0 16px,rgba(255,255,255,.2) 17px 26px,transparent 27px),radial-gradient(circle at 80% 25%,rgba(255,255,255,.15) 0 14px,transparent 15px),linear-gradient(120deg,var(--a),var(--b))}
.kxs .kh3n .kh3-pcn-new{position:absolute;top:10px;right:10px;background:#fff;color:var(--b);border-radius:999px;padding:3px 10px;font-weight:800;font-size:11px}
.kxs .kh3n .kh3-pcn-av{width:78px;height:78px;margin-top:-39px;border-radius:50%;border:4px solid var(--card);box-shadow:0 0 0 3px var(--a);position:relative;z-index:1;overflow:hidden;background:color-mix(in srgb,var(--a) 15%,var(--card))}
.kxs .kh3n .kh3-pcn-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.kxs .kh3n .kh3-pcn-n{margin-top:12px;font:800 17px/1.3 var(--kh3-head);color:var(--ink);display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 20px);text-decoration:none}
.kxs .kh3n a.kh3-pcn-n:hover{color:#0A66C2}
.kxs .kh3n .kh3-pcn-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kxs .kh3n .kh3-pcn-li{flex:none;width:20px;height:20px;border-radius:5px;background:#0A66C2;color:#fff;font:800 12px/20px Arial,sans-serif;text-align:center}
.kxs .kh3n .kh3-pcn-t{margin-top:6px;padding:4px 10px;border-radius:999px;max-width:calc(100% - 20px);background:color-mix(in srgb,var(--a) 14%,var(--card));color:var(--b);font-weight:700;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kxs[data-kx="dark"] .kh3n .kh3-pcn-t{color:var(--a)}
.kxs .kh3n .kh3-pcn-sc{margin-top:14px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px;color:var(--mute)}
.kxs .kh3n .kh3-pcn-ring{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--b) calc(var(--sc)*1%),var(--line) 0)}
.kxs .kh3n .kh3-pcn-ring i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--ink)}
.kxs .kh3n .kh3-ppl .kh3-ppl-h{color:#13955A}

/* 3.22.1 — tighter space between sections (was 96px above and below each, so two sections met with ~200px between) */
.kxs .kh3n .kh3-sec{padding-top:64px;padding-bottom:64px}
.kxs .kh3n .kh3-havesec{padding-top:16px}
.kxs .kh3n .kh3-faqsec{padding-top:40px}
.kxs .kh3n p.kh3-havenote{margin-top:24px !important}
@media (max-width:760px){
  .kxs .kh3n .kh3-sec{padding-top:44px;padding-bottom:44px}
  .kxs .kh3n .kh3-havesec{padding-top:8px}
  .kxs .kh3n .kh3-faqsec{padding-top:28px}
}

/* 3.22.0 — Why Kudexa: one table to decide, its rows in a box that scrolls when the list is long */
.kxs .kh3n .kh3-why{padding-bottom:8px}
.kxs .kh3n .kh3-why .kh3-lead{max-width:620px;margin:16px auto 0}
.kxs .kh3n .kh3-cmp{max-width:920px;margin:40px auto 0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--n-shadow);position:relative}
.kxs .kh3n .kh3-cmp-r{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;padding:16px 26px;border-top:1px solid var(--line)}
.kxs .kh3n .kh3-cmp-r span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.kxs .kh3n .kh3-cmp-r b{font:700 16px/1.4 var(--kh3-head);color:var(--ink)}
.kxs .kh3n .kh3-cmp-r small{font-size:13.5px;line-height:1.45;color:var(--mute)}
.kxs .kh3n .kh3-cmp-r .y,.kxs .kh3n .kh3-cmp-r .n{text-align:center;font-weight:800;font-size:18px}
.kxs .kh3n .kh3-cmp-r .y{color:#13955A}.kxs .kh3n .kh3-cmp-r .n{color:var(--faint)}
.kxs .kh3n .kh3-cmp-r .k,.kxs .kh3n .kh3-cmp-h span:last-child{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:-16px -26px -16px 0;background:color-mix(in srgb,#2F5BEA 7%,transparent)}
.kxs .kh3n .kh3-cmp-h span:last-child{margin:-18px -26px -18px 0}
.kxs .kh3n .kh3-cmp-h{border-top:0;background:color-mix(in srgb,var(--ink) 3%,var(--card));padding-top:18px;padding-bottom:18px}
.kxs .kh3n .kh3-cmp-h span{font-size:13px;font-weight:700;color:var(--mute);text-align:center}
.kxs .kh3n .kh3-cmp-h span:first-child{text-align:left;letter-spacing:.08em;text-transform:uppercase}
.kxs .kh3n .kh3-cmp-h span:last-child{color:#2F5BEA;font-weight:800;font-size:14px}
.kxs[data-kx="dark"] .kh3n .kh3-cmp-h span:last-child{color:#8FA8FF}
.kxs .kh3n .kh3-cmp-h i{font-style:normal}
.kxs .kh3n .kh3-cmp-short{display:none}
.kxs .kh3n .kh3-cmp-sc{max-height:560px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent)}
.kxs .kh3n .kh3-cmp-sc:focus-visible{outline:2px solid #7C4DFF;outline-offset:-2px}
.kxs .kh3n .kh3-cmp-sc > .kh3-cmp-r:first-child{border-top:0}
.kxs .kh3n .kh3-cmp-sc > .kh3-cmp-r:last-child{padding-bottom:40px}

@media (max-width:760px){
  .kxs .kh3n .kh3-cmp{border-radius:22px;margin-top:28px}
  .kxs .kh3n .kh3-cmp-r{grid-template-columns:minmax(0,1fr) 54px 62px;gap:8px;padding:14px 14px}
  .kxs .kh3n .kh3-cmp-r .k{margin:-14px -14px -14px 0}
  .kxs .kh3n .kh3-cmp-h span:last-child{margin:-18px -14px -18px 0}
  .kxs .kh3n .kh3-cmp-r b{font-size:14.5px}
  .kxs .kh3n .kh3-cmp-r small{font-size:12.5px}
  .kxs .kh3n .kh3-cmp-h span{font-size:11px !important}
  .kxs .kh3n .kh3-cmp-long{display:none}
  .kxs .kh3n .kh3-cmp-short{display:inline}
  .kxs .kh3n .kh3-cmp-sc{max-height:460px}
}

@media (max-width:760px){
  .kxs .kh3n .kh3-video{padding:8px;border-radius:22px}
  .kxs .kh3n .kh3-stage{border-radius:16px}
  .kxs .kh3n .kh3-trialtl > div{border:0}
}
