/* motion.css — shared design layer for SecondFactor.ai (dark cinematic + mono microtype) */
:root{--disp:Sora,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--ease:cubic-bezier(.16,1,.3,1)}
body{font-family:var(--disp);font-weight:300}
h1,h2,h3{letter-spacing:-.025em}

/* ---- header / footer ---- */
header.band{background:rgba(43,47,120,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(244,243,253,.12)}
.nav-a,.nl{font:400 12.5px var(--mono)!important;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,253,.82)}
.nav-a:hover,.nav-a.on,.nl:hover,.nl.on{color:#fff}
.chmenu{border-radius:0;box-shadow:none;border-color:var(--brd)}
.chitem{font:400 12.5px var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;border-radius:0}

/* ---- buttons ---- */
.pill,.sm{border-radius:0!important;font-family:var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;box-shadow:none!important}
.pill{font-size:13px!important;padding:16px 28px;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.sm{font-size:12px!important;padding:11px 20px}
.pill-s{border-color:var(--brd)}
.pill-s:hover{border-color:var(--ac);color:var(--ac)}

/* ---- labels / eyebrows ---- */
.eyebrow{border-radius:0;background:transparent;border-color:var(--brd);font:400 11.5px var(--mono)!important;letter-spacing:.2em;color:var(--mut2)}

/* ---- surfaces ---- */
.crd,.sfd,.input,select.input,textarea.input,.chmenu{border-radius:0!important}
.crd{box-shadow:none!important;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.crd:hover{transform:translateY(-3px);box-shadow:none!important;border-color:rgba(48,120,232,.45)}
.crd:before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.crd{position:relative;overflow:hidden}
.crd:hover:before{transform:scaleX(1)}
.sfd{box-shadow:none!important}

/* ---- dark hero band on inner pages ---- */
.hero-in{position:relative;overflow:hidden;background:var(--ink)!important;color:#f4f3fd;padding-top:clamp(56px,7vw,96px)!important;padding-bottom:clamp(56px,7vw,96px)!important}
.hero-in:before{content:"";position:absolute;left:50%;top:48%;width:min(140vw,1180px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 200deg,transparent 0deg,rgba(185,209,249,.38) 55deg,rgba(106,156,240,.14) 110deg,transparent 170deg);
  mask:radial-gradient(circle,transparent 58%,#000 59%,#000 61%,transparent 62%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 59%,#000 61%,transparent 62%);
  animation:mSpin 26s linear infinite}
.hero-in:after{content:"";position:absolute;left:50%;top:54%;width:min(110vw,860px);height:min(60vh,460px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(106,156,240,.24),transparent 70%);animation:mPulse 6s ease-in-out infinite}
.hero-in > *{position:relative;z-index:1}
.hero-in h1,.hero-in h2{color:#fff}
.hero-in p{color:rgba(244,243,253,.85)!important}
.hero-in .eyebrow{background:rgba(244,243,253,.06);border-color:rgba(185,209,249,.3);color:var(--ac3)}
.hero-in a[href*="pricing"],.hero-in .pill-s{background:transparent;border-color:rgba(244,243,253,.3);color:#f4f3fd}
.hero-in .pill-s:hover{border-color:#fff;color:#fff}
.hero-in .pill-p{background:#fff;border-color:#fff;color:var(--ink)}
.hero-in .pill-p:hover{background:var(--ac3);border-color:var(--ac3);color:var(--ink)}
.hero-in a{color:rgba(244,243,253,.75)}
@keyframes mSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes mPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ---- marquee ---- */
.mq{border-top:1px solid rgba(244,243,253,.12);border-bottom:1px solid rgba(244,243,253,.12);background:var(--ink);overflow:hidden;padding:15px 0}
.mq div{display:flex;gap:46px;width:max-content;animation:mSlide 26s linear infinite}
.mq span{font:400 12.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,243,253,.8);display:flex;align-items:center;gap:46px}
.mq span:after{content:"";width:5px;height:5px;background:var(--ac3);border-radius:50%;opacity:.7}
@keyframes mSlide{to{transform:translateX(-50%)}}

/* ---- accordions ---- */
details summary{font-weight:400!important}
details summary span:last-child{font-family:var(--mono)}

/* ---- mono microtype helpers ---- */
.mono{font-family:var(--mono)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* type weights — match homepage */
h1{font-weight:200!important}
h2{font-weight:300!important}
h3{font-weight:400!important}
p,li,td,th,label,summary{font-weight:300}
.pill,.sm,.nav-a,.nl,.eyebrow,.chitem{font-weight:400!important}

/* card CTA baselines */
.crd{display:flex;flex-direction:column}
.crd > a:last-child:not(.pill),.crd > a.pill:last-child,.crd > div:last-child:has(> .pill){margin-top:auto}
.crd p{margin-bottom:18px!important}

/* compact header at narrow widths */

/* dark-band microtype contrast */
.band .lbl-d,.hero-in .lbl-d{color:rgba(244,243,253,.84)}
.band [style*="rgba(244,243,253,.72)"]{color:rgba(244,243,253,.84)!important}

/* ---- wide-screen layout: use the full viewport ---- */
main > section,main > div > section{padding-left:clamp(20px,4vw,80px)!important;padding-right:clamp(20px,4vw,80px)!important}
[style*="max-width:1120px"],[style*="max-width:1100px"],[style*="max-width:1200px"]{max-width:min(1640px,94vw)!important}
[style*="max-width:900px"]{max-width:min(1200px,92vw)!important}
[style*="max-width:720px"]{max-width:min(1100px,92vw)!important}
/* text columns keep a comfortable measure */
p[style*="max-width:66ch"],p[style*="max-width:64ch"],p[style*="max-width:62ch"]{max-width:72ch!important}

/* denser card rows on large monitors */
@media (min-width:1500px){
  [style*="minmax(270px,1fr)"],[style*="minmax(260px,1fr)"],[style*="minmax(250px,1fr)"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* hero rings fill the band on any screen */
.hero-in{min-height:clamp(420px,48vh,620px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero-in > *{max-width:min(1200px,92vw)}
.hero-in:before{width:clamp(360px,76vmin,1000px)!important;top:50%!important}
.hero-in:after{width:clamp(360px,74vmin,980px)!important;height:clamp(280px,60vmin,760px)!important;top:50%!important}

/* ---- final responsive pass (all inner pages) ---- */
@media (max-width:1024px){
  [style*="minmax(300px,1fr)"],[style*="minmax(310px,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="minmax(270px,1fr)"],[style*="minmax(260px,1fr)"],[style*="minmax(250px,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="padding:44px"]{padding:30px!important}
}
@media (max-width:720px){
  main > section,main > div > section{padding-left:20px!important;padding-right:20px!important;padding-top:48px!important;padding-bottom:48px!important}
  [style*="minmax(270px,1fr)"],[style*="minmax(260px,1fr)"],[style*="minmax(250px,1fr)"],[style*="minmax(240px,1fr)"],[style*="minmax(200px,1fr)"],[style*="minmax(190px,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  .hero-in{min-height:auto;padding-top:56px!important;padding-bottom:56px!important}
  .pill{width:100%;justify-content:center}
  [style*="padding:44px"],[style*="padding:36px"],[style*="padding:34px"]{padding:24px!important}
  table,select,input,textarea{max-width:100%}
}
@media (max-width:420px){
  .nav-a,.nl,.eyebrow,.pill,.sm{letter-spacing:.12em!important}
}

/* nav in display face; logo tile transparent */
.nav-a,.nl,.chitem{font-family:var(--disp,Sora,system-ui,sans-serif)!important;font-weight:300!important;font-size:14.5px!important;letter-spacing:.01em!important;text-transform:none!important}
.otpb{color:#fff!important}

/* richer ring motion on inner-page hero bands */
.hero-in{position:relative}
.hero-in:before{animation:mSpin 26s linear infinite,mDrift 21s ease-in-out infinite!important}
.hero-in > .arcb{position:absolute;left:50%;top:50%;width:clamp(300px,58vmin,760px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 20deg,transparent 0deg,rgba(106,156,240,.3) 40deg,transparent 120deg);
  mask:radial-gradient(circle,transparent 62%,#000 63%,#000 64.5%,transparent 65.5%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 64.5%,transparent 65.5%);
  animation:mSpin 34s linear infinite reverse}
.hero-in > .orb{position:absolute;left:50%;top:50%;width:clamp(360px,72vmin,900px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;animation:mSpin 20s linear infinite}
.hero-in > .orb b{position:absolute;left:50%;top:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:rgba(185,209,249,.9);box-shadow:0 0 14px 4px rgba(185,209,249,.4)}
@keyframes mDrift{0%,100%{margin-left:0;margin-top:0}50%{margin-left:2%;margin-top:-1.6%}}

/* extra ring layer + motes on inner-page heroes */
.hero-in > .arcw{position:absolute;left:50%;top:50%;width:clamp(460px,92vmin,1200px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 300deg,transparent 0deg,rgba(185,209,249,.2) 30deg,transparent 90deg);
  mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65%,transparent 66%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65%,transparent 66%);
  animation:mSpin 44s linear infinite}
.hero-in > .orb.wide{width:clamp(460px,92vmin,1200px);animation-duration:36s}
.hero-in > .motes{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-in > .motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(185,209,249,.55);animation:mRise 16s linear infinite}
.hero-in > .motes i:nth-child(1){left:22%;top:84%}
.hero-in > .motes i:nth-child(2){left:46%;top:90%;animation-delay:4s;width:2px;height:2px}
.hero-in > .motes i:nth-child(3){left:72%;top:86%;animation-delay:8s}
.hero-in > .motes i:nth-child(4){left:60%;top:94%;animation-delay:11s;width:2px;height:2px}
@keyframes mRise{0%{transform:translateY(0);opacity:0}15%{opacity:.7}85%{opacity:.35}100%{transform:translateY(-42vh);opacity:0}}

/* decor behind copy; orbit dots outside the text block */
.hero-in > .arcb,.hero-in > .arcw,.hero-in > .orb,.hero-in > .motes{z-index:0}
.hero-in > div.sec,.hero-in > h1,.hero-in > h2,.hero-in > p{position:relative;z-index:2}
.hero-in > .orb{width:clamp(700px,76vmax,1160px)!important}
.hero-in > .orb.wide{width:clamp(1000px,104vmax,1600px)!important}

/* footer echo of the hero motion */
footer.dark{position:relative;overflow:hidden}
footer.dark:before{content:"";position:absolute;left:50%;top:-40%;width:clamp(680px,90vmax,1500px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:conic-gradient(from 240deg,transparent 0deg,rgba(185,209,249,.24) 45deg,rgba(106,156,240,.1) 100deg,transparent 160deg);
  mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  animation:mSpin 38s linear infinite}
footer.dark:after{content:"";position:absolute;left:50%;top:-10%;width:clamp(420px,60vmax,1000px);height:clamp(260px,40vmax,620px);transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(106,156,240,.2),transparent 70%);animation:mPulse 7s ease-in-out infinite}
footer.dark > *{position:relative;z-index:2}

/* CTA + footer motion on inner pages (.band sections) */
main section.band{position:relative;overflow:hidden}
main section.band:before{content:"";position:absolute;left:50%;top:55%;width:clamp(680px,92vmax,1560px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:conic-gradient(from 210deg,transparent 0deg,rgba(185,209,249,.26) 48deg,rgba(106,156,240,.1) 105deg,transparent 165deg);
  mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  animation:mSpin 36s linear infinite}
main section.band:after{content:"";position:absolute;left:50%;top:60%;width:clamp(420px,62vmax,1040px);height:clamp(260px,42vmax,640px);transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(106,156,240,.2),transparent 70%);animation:mPulse 7s ease-in-out infinite}
main section.band > *{position:relative;z-index:2}
main section.band .ringdot{position:absolute;left:50%;top:55%;width:clamp(700px,86vmax,1440px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;animation:mSpin 24s linear infinite}
main section.band .ringdot b{position:absolute;left:50%;top:0;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:rgba(185,209,249,.9);box-shadow:0 0 14px 4px rgba(185,209,249,.4)}
footer.band{position:relative;overflow:hidden}
footer.band:before{content:"";position:absolute;left:50%;top:-38%;width:clamp(680px,90vmax,1500px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:conic-gradient(from 240deg,transparent 0deg,rgba(185,209,249,.24) 45deg,rgba(106,156,240,.1) 100deg,transparent 160deg);
  mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  animation:mSpin 38s linear infinite}
footer.band:after{content:"";position:absolute;left:50%;top:-8%;width:clamp(420px,60vmax,1000px);height:clamp(260px,40vmax,620px);transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(106,156,240,.2),transparent 70%);animation:mPulse 7s ease-in-out infinite}
footer.band > *{position:relative;z-index:2}

/* ---- mobile header / drawer ---- */
.burger{display:none;width:44px;height:44px;background:none;border:1px solid rgba(244,243,253,.28);padding:0;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1px;background:#f4f3fd;transition:transform .3s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .burger{display:flex;order:9}
  .navlinks{display:none!important;position:absolute;left:0;right:0;top:100%;box-sizing:border-box;flex-direction:column!important;gap:0!important;background:var(--ink);border-top:1px solid rgba(244,243,253,.14);padding:8px 20px 18px}
  .navlinks.open{display:flex!important}
  .navlinks > a,.navlinks .chdd > a{display:block;padding:14px 0;border-bottom:1px solid rgba(244,243,253,.1);font-size:15px!important}
  .navlinks .chdd{display:block;position:static}
  .navlinks .chdd::after{display:none}
  .navlinks .chdd > a{display:flex!important;justify-content:space-between}
  .navlinks .chmenu{position:static!important;display:flex!important;flex-direction:column;opacity:1!important;visibility:visible!important;transform:none!important;border:0!important;background:none!important;box-shadow:none!important;min-width:0;padding:0 0 8px 14px!important}
  .navlinks .chitem{padding:11px 0!important;border-bottom:0!important;font-size:13px!important}
  header .signin{display:none}
  .hdcta{padding:10px 16px!important;font-size:11px!important;white-space:nowrap}
  header{position:relative}
  header.band,header:has(.nav){position:sticky}
}
@media (max-width:420px){
  .hdcta{display:none}
  header .signin{display:block;font-size:12px!important;white-space:nowrap}
}

/* ---- light gradient hero (homepage) ---- */
.hero{background:linear-gradient(165deg,#fbfbfd 0%,#eef1f7 48%,#e4e9f3 100%)!important;color:#1d2230!important}
.hero .h1{color:#1d2230!important}
.hero .p-d,.hero p{color:rgba(29,34,48,.74)!important}
.hero .lbl-d{color:rgba(29,34,48,.7)!important}
.hero .up.mono,.hero .up.mono span,.hero .up[style*="var(--disp)"],.hero .up[style*="var(--disp)"] span{color:rgba(31,36,80,.7)!important}
.hero .otpb{border-color:rgba(29,34,48,.2)!important;background:rgba(255,255,255,.7)!important;color:#1d2230!important}
.hero .btn-l{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}
.hero .btn-l:hover{background:#2461c9!important;border-color:#2461c9!important}
.hero .btn-o{border-color:rgba(29,34,48,.28)!important;color:#1d2230!important;background:transparent!important}
.hero .btn-o:hover{border-color:#3078e8!important;color:#3078e8!important}
.hero .wordline span span{color:#3078e8!important}
.hero .halo i{border-color:rgba(48,120,232,.16)!important}
.hero .arc,.hero .arc2,.hero .arc3{background:conic-gradient(from 200deg,transparent 0deg,rgba(48,120,232,.22) 55deg,rgba(48,120,232,.08) 110deg,transparent 170deg)!important;opacity:.7!important}
.hero .glow{background:radial-gradient(50% 50% at 50% 50%,rgba(48,120,232,.14),transparent 70%)!important}
.hero .orbit b{background:#3078e8!important;box-shadow:0 0 14px 4px rgba(48,120,232,.28)!important}
.hero .motes i{background:rgba(48,120,232,.45)!important}
.hero .grain{background-image:radial-gradient(rgba(29,34,48,.08) 1px,transparent 1px)!important}
.hero .cue b{background:linear-gradient(to bottom,rgba(48,120,232,.6),transparent)!important}

/* ---- light gradient hero bands (inner pages) ---- */
.hero-in{background:linear-gradient(165deg,#fbfbfd 0%,#eef1f7 48%,#e4e9f3 100%)!important;color:#1d2230!important}
.hero-in h1,.hero-in h2{color:#1d2230!important}
.hero-in p{color:rgba(29,34,48,.74)!important}
.hero-in .lbl-d,.hero-in .eyebrow{color:rgba(29,34,48,.66)!important;border-color:rgba(29,34,48,.2)!important;background:rgba(255,255,255,.5)!important}
.hero-in a{color:rgba(29,34,48,.78)}
.hero-in .pill-p{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}
.hero-in .pill-p:hover{background:#2461c9!important;border-color:#2461c9!important;color:#fff!important}
.hero-in .pill-s,.hero-in a[href*="pricing"]{background:transparent!important;border-color:rgba(29,34,48,.28)!important;color:#1d2230!important}
.hero-in .pill-s:hover{border-color:#3078e8!important;color:#3078e8!important}
.hero-in:before{background:conic-gradient(from 200deg,transparent 0deg,rgba(48,120,232,.2) 55deg,rgba(48,120,232,.07) 110deg,transparent 170deg)!important}
.hero-in:after{background:radial-gradient(50% 50% at 50% 50%,rgba(48,120,232,.12),transparent 70%)!important}
.hero-in > .arcb,.hero-in > .arcw{background:conic-gradient(from 20deg,transparent 0deg,rgba(48,120,232,.18) 40deg,transparent 120deg)!important}
.hero-in > .orb b{background:#3078e8!important;box-shadow:0 0 14px 4px rgba(48,120,232,.26)!important}
.hero-in > .motes i{background:rgba(48,120,232,.4)!important}

/* ---- blue gradient grounds ---- */
body{background:linear-gradient(180deg,#fbfcff 0%,#f4f7fd 40%,#efeefc 100%)!important;background-attachment:fixed!important}
section.dark,section.band,footer.dark,footer.band{background:linear-gradient(160deg,#28376d 0%,#2b2f78 55%,#1b2650 100%)!important}
header.band,header:has(.nav){background:rgba(43,47,120,.9)!important}
.cell,.panel,.crd,.sfd{background:rgba(255,255,255,.92)!important}
.pill-p,.btn-l{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}
.pill-p:hover,.btn-l:hover{background:#2461c9!important;border-color:#2461c9!important;color:#fff!important}
.hero-in .pill-p,.hero .btn-l{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}

/* ---- light gradient everywhere (dark bands converted) ---- */
section.dark,section.band,footer.dark,footer.band{background:linear-gradient(165deg,#fbfcff 0%,#edf3fc 50%,#e4eaf6 100%)!important;color:#1f2450!important;border-color:rgba(31,36,80,.12)!important}
section.dark h1,section.dark h2,section.dark h3,section.band h1,section.band h2,section.band h3,footer.dark span,footer.band span{color:#1f2450!important}
section.dark .num,section.band .num{color:#1f2450!important}
section.dark p,section.band p,footer.dark p,footer.band p,.p-d,.s-d{color:rgba(31,36,80,.76)!important}
.lbl-d{color:rgba(31,36,80,.68)!important}
section.dark .btn-l,section.band .pill-p,footer .btn-l{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}
section.dark .btn-o,section.band .pill-s{border-color:rgba(31,36,80,.28)!important;color:#1f2450!important;background:transparent!important}
section.dark .btn-o:hover,section.band .pill-s:hover{border-color:#3078e8!important;color:#3078e8!important}
section.dark .stepcard-x,section.band .stepcard-x,section.dark [style*="border:1px solid rgba(244,243,253"],section.band [style*="border:1px solid rgba(244,243,253"]{border-color:rgba(31,36,80,.14)!important;background:rgba(255,255,255,.75)!important}
section.dark .mono,section.band .mono{color:rgba(31,36,80,.76)!important}
section.dark:before,section.band:before,footer.dark:before,footer.band:before{background:conic-gradient(from 210deg,transparent 0deg,rgba(48,120,232,.2) 48deg,rgba(48,120,232,.07) 105deg,transparent 165deg)!important}
section.dark:after,section.band:after,footer.dark:after,footer.band:after{background:radial-gradient(50% 50% at 50% 50%,rgba(48,120,232,.12),transparent 70%)!important}
section.dark .glow,section.band .glow{background:radial-gradient(50% 50% at 50% 50%,rgba(48,120,232,.14),transparent 70%)!important}
section.dark .arc,section.dark .arc3,section.band .arc{background:conic-gradient(from 200deg,transparent 0deg,rgba(48,120,232,.2) 55deg,rgba(48,120,232,.07) 110deg,transparent 170deg)!important}
section.dark .halo i{border-color:rgba(48,120,232,.16)!important}
section.dark .orbit b,section.band .ringdot b{background:#3078e8!important;box-shadow:0 0 14px 4px rgba(48,120,232,.26)!important}
section.dark .motes i{background:rgba(48,120,232,.4)!important}
footer.dark a,footer.band a,footer .nav-a,footer .nl{color:rgba(31,36,80,.78)!important}
footer.dark a:hover,footer.band a:hover,footer .nav-a:hover,footer .nl:hover{color:#3078e8!important}
footer .lbl-d{color:rgba(31,36,80,.68)!important}
footer [style*="border-top:1px solid"]{border-color:rgba(31,36,80,.12)!important}
header.band,header:has(.nav){background:rgba(251,252,255,.92)!important;border-bottom:1px solid rgba(31,36,80,.12)!important}
header .nl,header .nav-a{color:rgba(31,36,80,.92)!important;font-weight:400!important}
header .nl:hover,header .nl.on,header .nav-a:hover,header .nav-a.on{color:#3078e8!important}
header .chitem{font-weight:400!important}
header a[style*="color:#f4f3fd"],header a[style*="color:#eef3ff"]{color:#1f2450!important}
header .btn-l,header .sm{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}
.burger{border-color:rgba(31,36,80,.28)!important}
.burger span{background:#1f2450!important}
.navlinks.open{background:#f5f9ff!important;border-color:rgba(31,36,80,.12)!important}
.navlinks.open > a,.navlinks.open .chdd > a{border-color:rgba(31,36,80,.1)!important}

/* remaining dark-band button variants on light grounds */
section.dark .pill-o,section.band .pill-o,.hero-in .pill-o,footer .pill-o{background:transparent!important;border-color:rgba(31,36,80,.28)!important;color:#1f2450!important}
section.dark .pill-o:hover,section.band .pill-o:hover,.hero-in .pill-o:hover{border-color:#3078e8!important;color:#3078e8!important}
section.dark .pill-d,section.band .pill-d,.hero-in .pill-d{background:#3078e8!important;border-color:#3078e8!important;color:#fff!important}
section.dark .st,section.band .st{color:#3078e8!important;border-color:rgba(48,120,232,.3)!important}

/* ---- stronger blue gradient ground (whole site) ---- */
body{background:linear-gradient(170deg,#ffffff 0%,#e9f1fd 26%,#d8e6fb 52%,#e6eefc 74%,#f4f8fe 100%)!important;background-attachment:fixed!important}
section.dark,section.band,footer.dark,footer.band{background:linear-gradient(165deg,#f4f8fe 0%,#dce8fb 48%,#cddff9 100%)!important}
.hero{background:linear-gradient(160deg,#ffffff 0%,#e8f0fd 34%,#d7e5fb 68%,#e9f1fd 100%)!important}
.hero-in{background:linear-gradient(160deg,#f5f9ff 0%,#e2ecfc 55%,#d2e1fa 100%)!important}
main > section:not(.dark):not(.band):not(.hero):not(.hero-in){background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(223,234,251,.45))!important}
.cell,.panel,.crd,.sfd{background:rgba(255,255,255,.96)!important}
header.band,header:has(.nav){background:rgba(247,250,255,.92)!important}

.panel.diagram{background:transparent!important;border:0!important;padding:0!important}
.panel.diagram rect[fill="#fff"],.panel.diagram rect[fill="#ffffff"]{fill:rgba(255,255,255,.45)}


/* only the status values animate, in sequence */
.stseq .st{opacity:1!important;transform:none!important;animation:none!important}
.stseq .st b{font-weight:400;display:inline-block;opacity:0;transform:translateY(6px);animation:stVal 4.5s var(--ease) infinite}
.stseq .st:nth-child(1) b{animation-delay:0s}
.stseq .st:nth-child(2) b{animation-delay:.6s}
.stseq .st:nth-child(3) b{animation-delay:1.2s}
@keyframes stVal{0%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:none}80%{opacity:1;transform:none}94%{opacity:0;transform:translateY(-5px)}100%{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.stseq .st b{opacity:1;transform:none;animation:none}}

/* channels dropdown (light header) */
.chmenu{background:#f8fbff!important;border-color:rgba(31,36,80,.12)!important;box-shadow:0 18px 38px rgba(31,36,80,.12)!important}
.chitem{color:#1f2450!important;font-family:var(--disp,Sora,system-ui,sans-serif)!important;font-weight:300!important;text-transform:none!important;letter-spacing:.01em!important}
.chitem:hover{background:#e5eefc!important;color:#3078e8!important}

/* descenders not clipped by the wordline mask */
.wordline{overflow:visible!important}
.h1{padding-bottom:.08em}

/* buttons + section labels in the display face */
.btn,.pill,.sm,.lbl,.lbl-d,.eyebrow,.nav-a,.nl,.chitem{font-family:var(--disp,Sora,system-ui,sans-serif)!important}
.btn,.pill,.sm{font-weight:400!important;letter-spacing:.06em!important;text-transform:none!important;font-size:14.5px!important}
.lbl,.lbl-d,.eyebrow{font-weight:400!important;letter-spacing:.14em!important;font-size:12px!important}
.st{font-family:var(--mono)!important;font-weight:400!important;letter-spacing:.1em!important;text-transform:uppercase!important;font-size:11.5px!important}

/* cards blend into the gradient instead of white boxes */
.cell,.panel,.crd,.sfd{background:transparent!important;box-shadow:none!important}
.grid{background:transparent!important;border:0!important;gap:clamp(20px,2.4vw,40px)!important}
.grid > .cell,.grid > a.cell{border:0!important;padding:0!important}
.grid > .cell:before{display:none!important}
.panel{border:0!important;padding:0!important}
.cell,.crd{border-color:rgba(31,36,80,.12)}
.crd{background:transparent!important}
.prow{border-color:rgba(31,36,80,.12)!important}
/* keep a soft divider rhythm where columns sat side by side */
.grid.g4,.grid.g2{position:relative}
@media (min-width:900px){
}

/* visible separation without white boxes */
.grid{border:1px solid rgba(31,36,80,.14)!important;gap:0!important;background:transparent!important}
.grid > .cell,.grid > a.cell{border:0!important;padding:clamp(24px,2.3vw,36px)!important}
.grid > .cell:not(:last-child){box-shadow:inset -1px 0 0 rgba(31,36,80,.14)!important}
@media (max-width:900px){
  .grid > .cell:not(:last-child){box-shadow:inset 0 -1px 0 rgba(31,36,80,.14)!important}
}
.panel{border:1px solid rgba(31,36,80,.14)!important;padding:clamp(24px,2.3vw,36px)!important}
.panel.diagram{border:0!important;padding:0!important}


/* 2-up blocks: no frame, just space */
.grid.g2{border:0!important;gap:clamp(28px,4vw,72px)!important}
.grid.g2 > .cell{padding:0!important;box-shadow:none!important}
.grid.g2 > .cell:not(:last-child){box-shadow:none!important}
.grid.g2 > .cell .prow{border-top:0!important;padding:10px 0!important}
.grid.g2 > .cell > div[style*="border:1px solid"]{border:0!important}

/* route inspector as a timeline, not a table */
.tline{list-style:none;margin:22px 0 0;padding:0 0 0 22px;position:relative}
.tline:before{content:"";position:absolute;left:4px;top:6px;bottom:10px;width:1px;background:linear-gradient(to bottom,rgba(48,120,232,.5),rgba(48,120,232,.12))}
.tline li{position:relative;padding:0 0 22px}
.tline li:last-child{padding-bottom:0}
.tline li:before{content:"";position:absolute;left:-22px;top:5px;width:9px;height:9px;border-radius:50%;background:#f6f9fe;border:1px solid rgba(48,120,232,.55)}
.tline li.done:before{background:#3078e8;border-color:#3078e8}
.tl-k{display:block;font:400 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(31,36,80,.78);margin-bottom:5px}
.tl-v{display:block;font:300 15px/1.6 var(--disp);color:rgba(31,36,80,.82)}

/* breathing room at section band edges */
main section.sec{padding-top:clamp(56px,6vw,96px)!important;padding-bottom:clamp(56px,6vw,96px)!important}
main section.sec[style*="padding-top:0"]{padding-top:clamp(56px,6vw,96px)!important}



/* uniform blended surfaces across all pages */
.crd,.sfd,.panel,.cell{background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(220,232,251,.38))!important;box-shadow:none!important}
.crd{border:1px solid rgba(31,36,80,.14)!important}
.crd:hover{border-color:rgba(48,120,232,.4)!important}
main section.band .stepcard,main section .sfd{border:1px solid rgba(31,36,80,.14)!important}
input.input,select.input,textarea.input{background:rgba(255,255,255,.62)!important;border:1px solid rgba(31,36,80,.16)!important;box-shadow:none!important}
/* selects: the native arrow ignores padding and hugs the border, so draw our own with room around it.
   Must come after the rule above, whose background shorthand would otherwise clear the image. */
select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:46px!important;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231f2450' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:12px 8px!important}
select.input:hover{border-color:rgba(48,120,232,.45)!important}
/* same box height as the text inputs next to it */
input.input,select.input{min-height:41px;line-height:normal}
table,tbody,thead,tr,td,th{background:transparent!important}
th,td{border-color:rgba(31,36,80,.12)!important}
main section .grid{border:1px solid rgba(31,36,80,.14)!important}
/* alternating tints also on inner pages (non-.sec sections) */

#modeTabs{background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(220,232,251,.38))!important;border:1px solid rgba(31,36,80,.14)!important}

/* 2-up columns: no card tint, they sit on the section gradient */
.grid.g2 > .cell{background:transparent!important}
/* secondary/ghost buttons get the blended fill, not white */
a.pill-s,a.pill-o,a.btn-g,a.btn-o,button.btn-o,a.sm:not(.hdcta){background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(220,232,251,.42))!important;border:1px solid rgba(31,36,80,.18)!important;color:#1f2450!important}
.pill-s:hover,.pill-o:hover,.btn-g:hover,.btn-o:hover{border-color:#3078e8!important;color:#3078e8!important}

/* pricing switcher states */
.mode-t{border:0!important;cursor:pointer;padding:11px 22px!important;background:transparent!important;color:rgba(31,36,80,.72)!important;transition:background .2s,color .2s}
.mode-t:hover{background:rgba(48,120,232,.1)!important;color:#3078e8!important}
.mode-t.on{background:#3078e8!important;color:#fff!important}
.mode-t.on:hover{background:#2461c9!important;color:#fff!important}
/* tooltip */
.tip{position:relative}
.tip .tipbody{position:absolute;left:0;top:calc(100% + 10px);width:min(360px,80vw);padding:14px 16px;background:#f8fbff;border:1px solid rgba(31,36,80,.16);box-shadow:0 18px 38px rgba(31,36,80,.14);
  font:300 13.5px/1.65 var(--disp,Sora,system-ui,sans-serif);letter-spacing:normal;text-transform:none;color:rgba(31,36,80,.82);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s;z-index:20}
.tip:hover .tipbody,.tip:focus .tipbody,.tip:focus-within .tipbody{opacity:1;visibility:visible;transform:none}

.crd:has(.tip),.cell:has(.tip),.panel:has(.tip){overflow:visible!important}
.tip .tipbody{top:auto!important;bottom:calc(100% + 10px)!important;transform:translateY(4px)}
.tip:hover .tipbody,.tip:focus .tipbody,.tip:focus-within .tipbody{transform:none}

.hero-in > div,.hero-in > p,.hero-in > h1,.hero-in > h2{width:100%;margin-left:auto;margin-right:auto}
.hero-in > .eyebrow{width:auto!important;align-self:center}
.hero-in > .arcb,.hero-in > .arcw,.hero-in > .orb,.hero-in > .motes{width:auto;margin:0}

/* testimonial quote cards */
.grid.quotes > .cell{padding:clamp(24px,2.3vw,36px)!important;background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(220,232,251,.38))!important;display:flex;flex-direction:column}
.grid.quotes > .cell > .lbl:last-child{margin-top:auto;line-height:1.7}
.grid.quotes{border:1px solid rgba(31,36,80,.14)!important;gap:0!important}
.grid.quotes > .cell:not(:last-child){box-shadow:inset -1px 0 0 rgba(31,36,80,.14)!important}

.grid.quotes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:760px){.grid.quotes{grid-template-columns:minmax(0,1fr)!important}.grid.quotes > .cell:not(:last-child){box-shadow:inset 0 -1px 0 rgba(31,36,80,.14)!important}}

@media (min-width:761px){
  .grid.quotes > .cell{box-shadow:none!important}
  .grid.quotes > .cell:nth-child(odd){box-shadow:inset -1px 0 0 rgba(31,36,80,.14)!important}
  .grid.quotes > .cell:nth-child(1),.grid.quotes > .cell:nth-child(2){box-shadow:inset 0 -1px 0 rgba(31,36,80,.14)!important}
  .grid.quotes > .cell:nth-child(1){box-shadow:inset -1px 0 0 rgba(31,36,80,.14),inset 0 -1px 0 rgba(31,36,80,.14)!important}
}


/* testimonials: borderless quotes that sit on the gradient */
.quotes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(30px,3.6vw,64px)!important;background:transparent!important;border:0!important}
.quotes > .cell{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column;position:relative}
.quotes > .cell:before{display:block!important;content:"\201C";position:absolute;left:-2px;top:-26px;font:300 62px var(--disp);color:rgba(48,120,232,.28);line-height:1;transform:none!important;background:none!important;width:auto!important;height:auto!important}
.quotes > .cell p{font:300 15.5px/1.7 var(--disp)!important;color:rgba(31,36,80,.82)!important;margin:0 0 16px!important;padding-top:14px}
.quotes > .cell > .lbl:last-child{margin-top:auto;font-size:11px!important;letter-spacing:.14em!important;line-height:1.7;color:rgba(31,36,80,.7)!important;padding-top:12px;border-top:1px solid rgba(31,36,80,.12)}
@media (max-width:760px){.quotes{grid-template-columns:minmax(0,1fr)!important}}

.quotes > .cell p{font:300 15px/1.65 var(--disp)!important;max-width:46ch}

.quotes > .cell{overflow:visible!important}

/* testimonial carousel */
.tcarousel{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,28px);margin-top:clamp(22px,2.4vw,34px)}
.tstage{display:grid;flex:1;max-width:760px}
.tquote{grid-area:1/1;margin:0;visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s;pointer-events:none}
.tquote.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.tquote blockquote{margin:0;font:300 clamp(15px,1.25vw,17px)/1.6 var(--disp);color:rgba(31,36,80,.86);max-width:52ch}
.tquote figcaption{display:flex;flex-direction:column;gap:5px}
.tname{font:400 15.5px var(--disp);color:#3078e8}
.trole{font:300 13.5px var(--disp);letter-spacing:.01em;text-transform:none;color:rgba(31,36,80,.72)}
.tnav{width:42px;height:42px;flex:none;border:1px solid rgba(31,36,80,.18);background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(220,232,251,.4));color:#3078e8;font:400 20px var(--disp);line-height:1;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.tnav:hover{border-color:#3078e8;background:rgba(48,120,232,.1)}
.tdots{display:flex;gap:8px;justify-content:center;margin-top:clamp(14px,1.6vw,22px)}
.tdot{width:26px;height:3px;border:0;padding:0;background:rgba(31,36,80,.2);cursor:pointer;transition:background .3s}
.tdot.on{background:#3078e8}
@media (max-width:620px){.tnav{display:none}}
@media (prefers-reduced-motion:reduce){.tquote{transition:none}}

/* testimonial band: full-width gradient, no white gaps */
main section.sec:has(.tcarousel){background:linear-gradient(140deg,rgba(255,255,255,.55) 0%,rgba(220,232,251,.75) 38%,rgba(202,221,248,.7) 68%,rgba(233,241,253,.6) 100%)!important;
  border-top:1px solid rgba(31,36,80,.1);border-bottom:1px solid rgba(31,36,80,.1);position:relative;overflow:hidden;
  max-width:none!important;padding-left:clamp(20px,4vw,80px)!important;padding-right:clamp(20px,4vw,80px)!important}
main section.sec:has(.tcarousel):before{content:"";position:absolute;left:50%;top:50%;width:clamp(620px,86vmax,1500px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:conic-gradient(from 210deg,transparent 0deg,rgba(48,120,232,.18) 48deg,rgba(48,120,232,.06) 105deg,transparent 165deg);
  mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);animation:mSpin 40s linear infinite}
main section.sec:has(.tcarousel) > *{position:relative;z-index:2;max-width:min(1640px,94vw);margin-left:auto;margin-right:auto}

main section.sec:has(.tcarousel){padding-top:clamp(40px,4vw,62px)!important;padding-bottom:clamp(40px,4vw,62px)!important}

/* remove remaining frames/dividers so blocks sit on the gradient */
main .grid{border:0!important;gap:clamp(26px,3vw,52px)!important;background:transparent!important}
main .grid > .cell{box-shadow:none!important;padding:0!important;background:transparent!important}
main .grid.g4 > .cell{background:transparent!important}
main .panel{border:0!important;padding:0!important;background:transparent!important}
main .crd{border:0!important;background:transparent!important;padding:0!important}
main .crd:hover{border:0!important}
main section.sec{border-top:0!important}
main .grid.quotes{border:0!important}

/* flatten grids: beat earlier divider/tint rules */
main .grid,main .grid.g4,main .grid.g2,main .grid.quotes{border:0!important;background:transparent!important;gap:clamp(26px,3vw,52px)!important}
main .grid.quotes > .cell{padding:0!important}

/* seamless section grounds — no visible band edges */
main section,main section.sec,main section.dark,main section.band,main > section:not(.hero):not(.hero-in){background:transparent!important;border-top:0!important;border-bottom:0!important}
main section.sec:has(.tcarousel){background:linear-gradient(140deg,rgba(255,255,255,.35) 0%,rgba(220,232,251,.45) 40%,rgba(209,225,249,.4) 70%,rgba(235,242,253,.3) 100%)!important;border:0!important}
main > div.view,main{background:transparent!important}

/* soft divider between sections + inner cards back, no outer frame */
main section.sec + section.sec,main section.sec + section.dark,main section.dark + section.sec{position:relative}
main section.hero:before{background:none}

/* inner cards: tinted blocks with hairline, but no outer grid frame */
main .grid,main .grid.g4,main .grid.g2,main .grid.quotes{border:0!important;background:transparent!important;gap:clamp(16px,1.6vw,24px)!important}
main .grid.g4 > .cell{background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(220,232,251,.42))!important;border:1px solid rgba(31,36,80,.12)!important;padding:clamp(22px,2.1vw,32px)!important;box-shadow:none!important}
main main .grid.quotes > .cell{background:transparent!important;border:0!important;padding:0!important}

main .grid.g2 > .cell,main .grid.g2 > .cell + .cell{background:transparent!important;border:0!important;padding:0!important}
main .grid.g2.quotes > .cell{padding:0!important}


/* individual cards keep a box; nothing wraps around them */
main .grid.g4 > .cell,main .steps > .stepcard{background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(220,232,251,.42))!important;border:1px solid rgba(31,36,80,.12)!important;padding:clamp(22px,2.1vw,32px)!important;box-shadow:none!important}
main .grid,main .grid.g4,main .grid.g2,main .grid.quotes,main section.sec,main section.dark{border:0!important}

/* stats row matches the card treatment */
main section.dark .sec > div > div:has(> .num){background:transparent;border:0;padding:0}
main .steps > .stepcard{background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(220,232,251,.42))!important;border:1px solid rgba(31,36,80,.12)!important;padding:clamp(22px,2.1vw,32px)!important}

/* stats row: always four tracks */
main section.dark .sec > div:has(.num){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:860px){main section.dark .sec > div:has(.num){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:480px){main section.dark .sec > div:has(.num){grid-template-columns:minmax(0,1fr)!important}}

/* step heading sits beside its number */
.stephead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.stephead .stepnum{flex:none;width:34px;height:34px;font-size:15px}

/* subtle gradient rule between modules */
main section.sec,main section.dark{position:relative}
main section.hero:before{content:none}

main section.sec:has(.tcarousel){border-top:1px solid rgba(48,120,232,.18)!important}

/* module dividers via border, never pseudo-elements */
main section.sec,main section.dark{border-top:1px solid rgba(48,120,232,.18)!important}
main section.hero,main section.hero-in{border-top:0!important}

/* feature/channel cards: wider, shorter */
main .grid.g4{gap:clamp(14px,1.4vw,20px)!important;background:transparent!important}
main .grid.g4 > .cell{padding:clamp(20px,1.8vw,28px)!important;border:1px solid rgba(31,36,80,.12)!important;background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(220,232,251,.4))!important}
main .grid.g4 > .cell .h3{font-size:17px!important;margin:0 0 8px!important}
main .grid.g4 > .cell .s,main .grid.g4 > .cell p{font-size:13.5px!important;line-height:1.6!important;margin-bottom:14px!important}
main .grid.g4 > .cell > .lbl:last-child{margin-top:auto;font-size:10.5px!important}

/* same card treatment for inner-page grids */
main section > div > div[style*="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))"],
main section > div > div[style*="grid-template-columns:repeat(auto-fit,minmax(250px,1fr))"],
main section > div > div[style*="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))"],
main section > div[style*="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))"]{gap:clamp(14px,1.4vw,20px)!important;background:transparent!important}
main section .crd,main section .stepcard,main section > div > div[style*="minmax(260px,1fr)"] > div,
main section > div > div[style*="minmax(250px,1fr)"] > div,
main section > div > div[style*="minmax(300px,1fr)"] > div{background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(220,232,251,.4))!important;border:1px solid rgba(31,36,80,.12)!important;padding:clamp(20px,1.8vw,28px)!important;box-shadow:none!important}
main section .crd h3,main section .crd > h3{font-size:17px!important;margin:0 0 8px!important}
main section .crd p{font-size:13.5px!important;line-height:1.6!important}

.crd > span.sm,.cell > span.sm,span.sm{align-self:flex-start;width:auto}

.heropill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid rgba(48,120,232,.3);background:rgba(255,255,255,.55);font:400 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(31,36,80,.76)}
.heropill i{width:6px;height:6px;border-radius:50%;background:#3078e8;animation:dotPulse 1.8s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.5}50%{opacity:1}}

.hero > .heropill{position:absolute;left:clamp(10px,2vw,34px);top:34%;transform-origin:left center;transform:rotate(-90deg) translate(-50%,-50%);z-index:3;border:0!important;background:none!important;padding:0!important;gap:12px;font-size:10.5px!important;letter-spacing:.3em!important;color:rgba(31,36,80,.55)!important;white-space:nowrap}
.hero > .heropill:after{content:"";width:clamp(30px,5vw,70px);height:1px;background:linear-gradient(90deg,rgba(48,120,232,.5),transparent)}
@media (max-width:900px){.hero > .heropill{display:none}}

.hero > .heropill{animation:fadeIn .9s var(--ease) .2s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:1100px){.hero > .heropill{display:none}}

/* section eyebrow pills: calmer sibling of the hero pill (static border, no sheen) */
.eyebrow,.hero-in .eyebrow,.hero-in > .eyebrow{position:relative;display:inline-flex;align-items:center;gap:10px;width:auto;padding:8px 18px 8px 14px!important;border:0!important;border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(244,243,253,.55))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 22px -12px rgba(48,120,232,.32),0 2px 5px -2px rgba(31,36,80,.07);
  font:500 11.5px var(--mono,"JetBrains Mono",monospace)!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#1f2450!important;white-space:nowrap}
.eyebrow:before,.hero-in .eyebrow:before,.hero-in > .eyebrow:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(100deg,rgba(48,120,232,.7),rgba(185,209,249,.45) 50%,rgba(48,120,232,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.eyebrow:after,.hero-in .eyebrow:after,.hero-in > .eyebrow:after{content:"";order:-1;flex:none;width:6px;height:6px;border-radius:50%;background:#3078e8;box-shadow:0 0 0 3px rgba(48,120,232,.14)}
@media (max-width:480px){.eyebrow,.hero-in .eyebrow,.hero-in > .eyebrow{font-size:10.5px!important;letter-spacing:.14em!important;padding:7px 15px 7px 12px!important}}