/* Attestra Solutions / CertiQR – theme header, top bar, offer bar, dropdown menus, phone menu, popups, mobile action bar.
   Everything is scoped to .mfx-* and resets its own box model, so page styles cannot leak in. */

/* ---------- page base (the bundled pages bring their own styles) ---------- */
html,body{margin:0;padding:0}
body{background:#F5F4FF}
.mfpage{overflow-x:clip}
.mf-plain{max-width:860px;margin:0 auto;padding:clamp(48px,7vw,90px) 22px;color:#4A4270;font:16.5px/1.7 "Instrument Sans",system-ui,sans-serif}
.mf-plain h1,.mf-plain h2,.mf-plain h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;color:#140C33;letter-spacing:-.03em;line-height:1.1}
.mf-plain a{color:#4A22E0}

.mfx-head,.mfx-drawer,.mfx-ann,.mfx-mbar,.mfx-pop{
  --violet:#4A22E0; --violet-deep:#3312B0; --pink:#FF3D8B; --sun:#FFC93D;
  --ink:#140C33; --ink-2:#4A4270; --ink-3:#7C74A3; --paper:#F5F4FF; --line:#E4E0FF; --line-2:#EFEDFF;
  --head:"Bricolage Grotesque",system-ui,sans-serif; --body:"Instrument Sans",system-ui,sans-serif; --ease:cubic-bezier(.2,.8,.2,1);
  font-family:var(--body); -webkit-font-smoothing:antialiased; line-height:1.4;
}
.mfx-head *,.mfx-drawer *,.mfx-ann *,.mfx-mbar *,.mfx-pop *{box-sizing:border-box; margin:0; padding:0}
.mfx-head a,.mfx-drawer a,.mfx-ann a,.mfx-mbar a,.mfx-pop a{text-decoration:none; color:inherit}
.mfx-head svg,.mfx-drawer svg,.mfx-ann svg,.mfx-mbar svg,.mfx-pop svg{display:block; flex:0 0 auto}
.mfx-head button,.mfx-drawer button,.mfx-ann button,.mfx-mbar button,.mfx-pop button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent}
.mfx-head ul{list-style:none}
.mfx-head :focus-visible,.mfx-drawer :focus-visible,.mfx-pop :focus-visible,.mfx-ann :focus-visible,.mfx-mbar :focus-visible{outline:3px solid var(--pink); outline-offset:3px; border-radius:8px}

/* ---------- offer bar (Announcement → bar) ---------- */
.mfx-ann{position:relative; z-index:1001; background:linear-gradient(90deg,var(--violet-deep),var(--violet) 55%,#6B3BFF); color:#fff}
.mfx-ann.is-hidden{display:none}
.mfx-ann-in{max-width:1240px; margin:0 auto; min-height:42px; padding:7px 52px; display:flex; align-items:center; justify-content:center; gap:14px; position:relative; flex-wrap:wrap}
.mfx-ann-ic svg{width:18px; height:18px; color:var(--sun)}
.mfx-ann p{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-size:13.5px; font-weight:500; line-height:1.35; text-align:center; justify-content:center}
.mfx-ann p em{font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--sun); color:var(--ink); padding:4px 9px; border-radius:99px}
.mfx-ann p b{font-weight:700}
.mfx-ann p .tx{color:rgba(255,255,255,.88)}
.mfx-ann-cd{display:flex; gap:4px}
.mfx-ann-cd i{font-style:normal; display:flex; align-items:baseline; justify-content:center; gap:2px; min-width:44px; padding:4px 7px; border-radius:8px; background:rgba(255,255,255,.14); color:#fff; font:700 13px ui-monospace,Menlo,monospace}
.mfx-ann-cd i small{font-size:9px; color:rgba(255,255,255,.7); text-transform:uppercase}
.mfx-ann-go{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; background:#fff; color:var(--violet)!important; padding:6px 14px; border-radius:99px; white-space:nowrap; transition:transform .2s}
.mfx-ann-go:hover{transform:translateY(-1px)}
.mfx-ann-go svg{width:13px; height:13px}
.mfx-ann-x{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff!important}
.mfx-ann-x:hover{background:rgba(255,255,255,.14)!important}
.mfx-ann-x svg{width:15px; height:15px}

/* ---------- popup / slide-in (Announcement → popup, slide-in) ---------- */
.mfx-pop[hidden]{display:none!important}
.mfx-pop{position:fixed; z-index:1003}
.mfx-pop.is-modal{inset:0; display:grid; place-items:center; padding:18px}
.mfx-pop-bg{position:absolute; inset:0; background:rgba(20,12,51,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:mfxFade .3s}
.mfx-pop-in{position:relative; width:min(480px,100%); max-height:calc(100vh - 36px); overflow:auto; background:#fff; color:var(--ink); border-radius:26px; box-shadow:0 40px 90px -30px rgba(20,12,51,.55); border:1px solid var(--line); animation:mfxPopIn .45s var(--ease)}
.mfx-pop-in img{display:block; width:100%; max-height:260px; object-fit:cover}
.mfx-pop-tx{padding:28px 28px 30px}
.mfx-pop .badge{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); background:var(--paper); border:1px solid var(--line); padding:5px 11px; border-radius:99px; margin-bottom:12px}
.mfx-pop h3{font:800 clamp(22px,3vw,28px)/1.1 var(--head); letter-spacing:-.03em; color:var(--ink); padding-right:24px}
.mfx-pop p{margin-top:10px; color:var(--ink-2); font-size:15px; line-height:1.6}
.mfx-pop .go{display:inline-flex; align-items:center; gap:9px; margin-top:20px; background:var(--violet); color:#fff!important; font-weight:600; font-size:15px; padding:13px 22px; border-radius:99px; box-shadow:0 10px 22px -10px rgba(74,34,224,.75); transition:background .2s,transform .2s}
.mfx-pop .go:hover{background:var(--violet-deep); transform:translateY(-2px)}
.mfx-pop .go svg{width:15px; height:15px}
.mfx-pop-x{position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fff!important; border:1px solid var(--line)!important; color:var(--ink)!important; box-shadow:0 4px 12px rgba(20,12,51,.12)}
.mfx-pop-x svg{width:16px; height:16px}
.mfx-pop.is-slide{left:22px; bottom:22px; width:min(360px,calc(100vw - 32px))}
.mfx-pop.is-slide .mfx-pop-in{width:100%; animation:mfxSlide .5s var(--ease)}
.mfx-pop.is-slide .mfx-pop-tx{padding:22px}
.mfx-pop.is-slide h3{font-size:19px; padding-right:30px}
.mfx-pop.is-slide p{font-size:14px}
@keyframes mfxFade{from{opacity:0}}
@keyframes mfxPopIn{from{opacity:0; transform:translateY(20px) scale(.96)}}
@keyframes mfxSlide{from{opacity:0; transform:translateY(30px)}}
@media (max-width:760px){
  .mfx-pop.is-slide{left:10px; right:10px; width:auto; bottom:calc(92px + env(safe-area-inset-bottom))}
  body:not(.mfx-has-mbar) .mfx-pop.is-slide{bottom:10px}
  .dev-desktop{display:none!important}
}
@media (min-width:761px){ .dev-mobile{display:none!important} }

/* ---------- header shell ---------- */
.mfx-head{position:relative; z-index:1000; color:var(--ink); transition:transform .35s var(--ease)}
.mfx-head.is-sticky{position:sticky; top:0}
.admin-bar .mfx-head.is-sticky{top:32px}
@media (max-width:782px){ .admin-bar .mfx-head.is-sticky{top:46px} }
@media (max-width:600px){ .admin-bar .mfx-head.is-sticky{top:0} }

/* top bar */
.mfx-tb{background:var(--ink); color:#D9D4F5; font-size:12.5px; overflow:hidden; max-height:40px; transition:max-height .35s var(--ease),opacity .3s}
.mfx-head.is-scrolled .mfx-tb{max-height:0; opacity:0}
.mfx-tb-in{max-width:1240px; margin:0 auto; height:38px; padding:0 24px; display:flex; align-items:center; gap:16px}
.mfx-tb-lbl{display:inline-flex; align-items:center; gap:7px; flex:none; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--violet); padding:4px 10px; border-radius:99px}
.mfx-tb-lbl .pd{width:6px; height:6px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 0 rgba(255,201,61,.7); animation:mfxPulse 2s infinite}
@keyframes mfxPulse{70%{box-shadow:0 0 0 7px rgba(255,201,61,0)}100%{box-shadow:0 0 0 0 rgba(255,201,61,0)}}
.mfx-tb-vp{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mfx-tb-tr{display:flex; gap:44px; width:max-content; animation:mfxTicker 38s linear infinite}
.mfx-tb-vp:hover .mfx-tb-tr{animation-play-state:paused}
@keyframes mfxTicker{to{transform:translateX(-50%)}}
.mfx-it{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.mfx-it i{color:var(--sun); display:grid}
.mfx-it i svg{width:14px; height:14px}
.mfx-it b{color:#fff; font-weight:600}
a.mfx-it:hover span{color:#fff; text-decoration:underline; text-underline-offset:3px}
.mfx-tb-ct{display:flex; align-items:center; gap:14px; flex:none}
.mfx-ch{display:inline-flex; align-items:center; gap:7px; color:#D9D4F5; transition:color .2s}
.mfx-ch:hover{color:#fff}
.mfx-ch svg{width:14px; height:14px}
.mfx-ch-wa .wi{width:20px; height:20px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center}
.mfx-ch-wa .wi svg{width:12px; height:12px}
.mfx-tb-so{display:flex; gap:2px}
.mfx-tb-so a{width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:#D9D4F5}
.mfx-tb-so a:hover{background:rgba(255,255,255,.1); color:#fff}
.mfx-tb-so svg{fill:currentColor}
@media (max-width:1060px){ .mfx-ch-mail{display:none} }
@media (max-width:760px){ .mfx-tb-ct{display:none} .mfx-tb-in{padding:0 14px} }

/* main bar */
.mfx-bar{position:relative; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); transition:background .3s,box-shadow .3s}
@supports (backdrop-filter:blur(10px)){ .mfx-bar{background:rgba(255,255,255,.8); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5)} }
.mfx-head.is-scrolled .mfx-bar{box-shadow:0 10px 30px -18px rgba(20,12,51,.35)}
.mfx-in{max-width:1240px; margin:0 auto; height:78px; padding:0 24px; display:flex; align-items:center; gap:22px; transition:height .3s}
.mfx-head.is-scrolled .mfx-in{height:68px}
.mfx-logo{flex:none; display:flex; align-items:center}
.mfx-logo img{display:block; width:auto; max-width:200px; object-fit:contain; transition:height .3s}
.mfx-head.is-scrolled .mfx-logo img{height:40px!important}

.mfx-nav{flex:1; display:flex; justify-content:center; min-width:0}
.mfx-ul{display:flex; align-items:center; gap:2px; position:relative}
.mfx-ind{position:absolute; top:50%; height:38px; transform:translateY(-50%); border-radius:99px; background:var(--paper); border:1px solid var(--line); opacity:0; pointer-events:none; transition:left .35s var(--ease),width .35s var(--ease),opacity .25s; z-index:0}
.mfx-ul>li{position:relative; z-index:1}
.mfx-link{display:flex; align-items:center; gap:5px; padding:10px 14px; font-size:15px; font-weight:500; color:var(--ink-2); white-space:nowrap; border-radius:99px; transition:color .2s}
.mfx-link svg{width:15px; height:15px; transition:transform .25s}
.mfx-ul>li:hover>.mfx-link,.mfx-ul>li.is-on>.mfx-link,.mfx-ul>li.is-open>.mfx-link{color:var(--violet)}
.mfx-ul>li.is-open>.mfx-link svg{transform:rotate(180deg)}
.mfx-ul>li.is-on>.mfx-link{font-weight:600}

/* dropdowns */
.mfx-mega{position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,8px); opacity:0; visibility:hidden; transition:opacity .25s,transform .3s var(--ease),visibility .25s; z-index:5}
.mfx-mega::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}
.has-sub.is-open>.mfx-mega{opacity:1; visibility:visible; transform:translate(-50%,0)}
.mfx-mega-in{background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 70px -28px rgba(20,12,51,.4); padding:12px; display:grid; gap:10px}
.mfx-mega-list{grid-template-columns:minmax(260px,1fr)}
.mfx-mega-list.has-promo{grid-template-columns:minmax(280px,1fr) 230px}
.mfx-ml{display:grid; gap:2px; align-content:start}
.mfx-ml a{display:block; padding:12px 14px; border-radius:14px; transition:background .2s}
.mfx-ml a b{display:block; font-size:14.5px; font-weight:600; color:var(--ink)}
.mfx-ml a small{display:block; color:var(--ink-3); font-size:12.5px; margin-top:2px}
.mfx-ml a:hover,.mfx-ml a[aria-current]{background:var(--paper)}
.mfx-ml a:hover b{color:var(--violet)}
.mfx-promo{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:220px; padding:18px; border-radius:16px; color:#fff!important; background:radial-gradient(120% 90% at 100% 0%,#7A4DFF 0%,var(--violet) 45%,var(--violet-deep) 100%); overflow:hidden; isolation:isolate}
.mfx-promo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.35}
.mfx-promo-art{position:absolute; right:-14px; top:-10px; opacity:.18; z-index:-1}
.mfx-promo-art svg{width:150px; height:150px; stroke-width:1.2}
.mfx-promo .pe{align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--sun); color:var(--ink); padding:4px 9px; border-radius:99px}
.mfx-promo b{font:800 20px/1.1 var(--head); letter-spacing:-.02em}
.mfx-promo .pl{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; opacity:.95}
.mfx-promo .pl svg{width:14px; height:14px; transition:transform .2s}
.mfx-promo:hover .pl svg{transform:translateX(3px)}

/* blog dropdown */
.mfx-mega-bl{grid-template-columns:minmax(300px,1fr) 240px; width:min(620px,92vw)}
.mfx-mh{display:block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px 6px}
.mfx-bm-t{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.mfx-bm-t a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; font-size:14px; font-weight:500; color:var(--ink-2)}
.mfx-bm-t a i{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--paper); color:var(--violet)}
.mfx-bm-t a i svg{width:16px; height:16px}
.mfx-bm-t a:hover{background:var(--paper); color:var(--violet)}
.mfx-bm-all{display:inline-flex; align-items:center; gap:6px; margin:8px 10px 4px; font-size:13.5px; font-weight:600; color:var(--violet)!important}
.mfx-bm-all svg{width:14px; height:14px}
.mfx-bm-f{display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:16px; background:var(--paper); border:1px solid var(--line)}
.mfx-bm-f img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:11px; margin-bottom:6px}
.mfx-bm-f .mfx-mh{padding:0}
.mfx-bm-f b{font:700 15px/1.25 var(--head); color:var(--ink)}
.mfx-bm-f small{font-size:12px; color:var(--ink-3)}

/* right side */
.mfx-act{flex:none; display:flex; align-items:center; gap:10px}
.mfx-trial{display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:99px; font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color .2s,background .2s}
.mfx-trial svg{width:16px; height:16px; color:var(--violet)}
.mfx-trial:hover{color:var(--violet); background:var(--paper)}
.mfx-cta{display:inline-flex; align-items:center; gap:10px; padding:7px 7px 7px 20px; border-radius:99px; background:var(--violet); color:#fff!important; font-size:15px; font-weight:600; white-space:nowrap; box-shadow:0 10px 22px -10px rgba(74,34,224,.75); transition:background .2s,transform .2s}
.mfx-cta i{width:32px; height:32px; border-radius:50%; background:#fff; color:var(--violet); display:grid; place-items:center; transition:transform .3s var(--ease)}
.mfx-cta i svg{width:15px; height:15px}
.mfx-cta:hover{background:var(--violet-deep); transform:translateY(-1px)}
.mfx-cta:hover i{transform:rotate(45deg)}
.mfx-burger{display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--line)!important; background:#fff!important; position:relative}
.mfx-burger span{position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease),top .3s}
.mfx-burger span:first-child{top:18px}.mfx-burger span:last-child{top:26px}
.mfx-burger[aria-expanded="true"] span:first-child{top:22px; transform:rotate(45deg)}
.mfx-burger[aria-expanded="true"] span:last-child{top:22px; transform:rotate(-45deg)}

/* reading progress */
.mfx-prog{position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden}
.mfx-prog i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--pink)); transform-origin:0 50%; transform:scaleX(0)}

@media (max-width:1180px){ .mfx-trial{display:none} .mfx-link{padding:10px 11px; font-size:14.5px} }
@media (max-width:1060px){
  .mfx-nav{display:none}
  .mfx-burger{display:block}
  .mfx-act{margin-left:auto}
  .mfx-head.is-smart.is-away{transform:translateY(-100%)}
}
@media (max-width:560px){
  .mfx-in{height:68px; padding:0 14px; gap:12px}
  .mfx-logo img{max-width:150px; height:36px!important}
  .mfx-cta{padding:6px 6px 6px 14px; font-size:14px}
  .mfx-cta i{width:28px; height:28px}
}
@media (max-width:400px){ .mfx-cta{display:none} }

/* ---------- phone menu ---------- */
.mfx-drawer{position:fixed; inset:0; z-index:999; background:#fff; color:var(--ink); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; overflow-y:auto; overscroll-behavior:contain}
.mfx-drawer::before{content:""; position:fixed; inset:-20% -10% auto -10%; height:520px; pointer-events:none; background:radial-gradient(40% 44% at 22% 28%,rgba(74,34,224,.10),transparent 70%),radial-gradient(36% 40% at 80% 14%,rgba(255,61,139,.08),transparent 68%)}
.mfx-drawer.is-open{opacity:1; visibility:visible}
html.mfx-lock,html.mfx-lock body{overflow:hidden}
.mfx-drawer-in{position:relative; min-height:100%; padding:var(--mfx-top,104px) 22px calc(26px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:22px; max-width:640px; margin:0 auto}
.mfx-dnav>a,.mfx-dnav summary{display:flex; align-items:center; justify-content:space-between; font:800 26px/1.1 var(--head); letter-spacing:-.03em; padding:13px 0; border-bottom:1px solid var(--line); list-style:none; cursor:pointer; transform:translateY(12px); opacity:0; transition:transform .45s var(--ease),opacity .45s,color .2s}
.mfx-drawer.is-open .mfx-dnav>a,.mfx-drawer.is-open .mfx-dnav summary{transform:none; opacity:1}
.mfx-dnav summary::-webkit-details-marker{display:none}
.mfx-dnav summary svg{width:22px; height:22px; color:var(--violet); transition:transform .3s}
.mfx-dnav details[open] summary svg{transform:rotate(180deg)}
.mfx-dnav>a.is-on,.mfx-dnav>a:hover{color:var(--violet)}
.mfx-dls{display:flex; flex-direction:column; padding:8px 0 6px 4px}
.mfx-dls a{font-size:17px; font-weight:600; color:var(--ink-2); padding:9px 0}
.mfx-dls a:hover{color:var(--violet)}
.mfx-dfoot{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.mfx-dcta{display:flex; align-items:center; justify-content:center; gap:9px; background:var(--violet); color:#fff!important; font-weight:600; font-size:16px; padding:16px; border-radius:99px; box-shadow:0 10px 22px -10px rgba(74,34,224,.75)}
.mfx-dcta svg{width:16px; height:16px}
.mfx-dtrial{display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-radius:99px; border:1.5px solid var(--line); font-weight:600; color:var(--ink)}
.mfx-dtrial svg{width:17px; height:17px; color:var(--violet)}
.mfx-dq{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mfx-dq a{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:16px; background:var(--paper); border:1px solid var(--line); font-weight:600; font-size:14px}
.mfx-dq a svg{width:17px; height:17px; color:var(--violet)}
.mfx-soc{display:flex; align-items:center; gap:4px}
.mfx-soc--lg{justify-content:center; gap:10px}
.mfx-soc--lg a{width:44px; height:44px; border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; color:var(--ink-2)}
.mfx-soc--lg a svg{width:18px; height:18px; fill:currentColor}
.mfx-soc:empty{display:none}

/* ---------- mobile action bar ---------- */
.mfx-mbar{display:none}
@media (max-width:760px){
  .mfx-mbar{display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:8px; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:990;
    padding:7px; border-radius:22px; background:rgba(255,255,255,.94); border:1px solid var(--line); box-shadow:0 18px 40px -12px rgba(20,12,51,.35);
    transition:transform .35s var(--ease),opacity .3s}
  @supports (backdrop-filter:blur(10px)){ .mfx-mbar{background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4)} }
  .mfx-mbar>a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; border-radius:15px; color:var(--ink-2); font-size:11px; font-weight:600; letter-spacing:.02em; transition:background .2s}
  .mfx-mbar>a svg{width:20px; height:20px; color:var(--violet)}
  .mfx-mbar>a:active{background:var(--paper)}
  .mfx-mbar>a.go{white-space:nowrap; flex-direction:row; gap:8px; background:var(--violet); color:#fff; font-size:14px; font-weight:600}
  .mfx-mbar>a.go svg{color:#fff; width:16px; height:16px}
  .mfx-mbar:has(>a:nth-child(2):last-child){grid-template-columns:1fr 1.5fr}
  html.mfx-lock .mfx-mbar,.mfx-mbar.is-tucked{transform:translateY(140%); opacity:0}
  body.mfx-has-mbar{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .mfx-tb-tr{animation:none}
  .mfx-head *,.mfx-drawer *,.mfx-pop *{transition:none!important; animation:none!important}
}
@media print{ .mfx-head,.mfx-drawer,.mfx-ann,.mfx-mbar,.mfx-pop{display:none!important} body.mfx-has-mbar{padding-bottom:0} }

/* ---------- closing call-to-action banner (.atcta) – used at the end of most pages ---------- */
.atcta{--v:#4A22E0;--ink:#140C33;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(34px,5vw,68px);border-radius:32px;color:#fff;text-align:left;font-family:"Instrument Sans",system-ui,sans-serif;
  background:radial-gradient(55% 75% at 100% 0%,rgba(255,61,139,.38),transparent 62%),radial-gradient(45% 65% at 0% 100%,rgba(255,201,61,.20),transparent 60%),linear-gradient(135deg,#5B2EFF 0%,#4A22E0 42%,#2A0FA0 100%);
  box-shadow:0 44px 90px -42px rgba(74,34,224,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.atcta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 90% at 80% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 80% 30%,#000,transparent 75%)}
.atcta *{box-sizing:border-box}
.atcta-eye{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.atcta-eye i{width:8px;height:8px;border-radius:50%;background:#FF3D8B;box-shadow:0 0 0 0 rgba(255,61,139,.7);animation:atctaPulse 2.2s infinite}
@keyframes atctaPulse{70%{box-shadow:0 0 0 9px rgba(255,61,139,0)}100%{box-shadow:0 0 0 0 rgba(255,61,139,0)}}
.atcta h2{margin:18px 0 14px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(32px,4.3vw,54px);line-height:1.02;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.atcta p{margin:0;max-width:46ch;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.6;color:rgba(255,255,255,.84)}
.atcta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.atcta-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:99px;font-size:15.5px;font-weight:600;text-decoration:none!important;white-space:nowrap;border:1.5px solid transparent;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.atcta-btn svg{width:17px;height:17px;flex:none;transition:transform .25s}
.atcta-btn:hover svg{transform:translateX(3px)}
.atcta-btn.is-main{background:#fff;color:var(--v)!important;box-shadow:0 14px 28px -14px rgba(20,12,51,.6)}
.atcta-btn.is-main:hover{transform:translateY(-2px);box-shadow:0 20px 34px -14px rgba(20,12,51,.7)}
.atcta-btn.is-alt{color:#fff!important;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.06)}
.atcta-btn.is-alt:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.atcta-btn:focus-visible{outline:3px solid #FFC93D;outline-offset:3px}
.atcta-btn .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.atcta-trust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.atcta-trust li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8)}
.atcta-trust svg{width:16px;height:16px;padding:2px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;flex:none}
/* artwork: a verified certificate */
.atcta-art{position:relative;height:330px;display:grid;place-items:center}
.atcta-cert{position:relative;width:min(300px,100%);padding:24px 24px 22px;border-radius:22px;background:#fff;color:var(--ink);transform:rotate(-5deg);box-shadow:0 40px 70px -30px rgba(20,12,51,.65);animation:atctaFloat 6s ease-in-out infinite}
.atcta-cert .bar{display:block;height:6px;border-radius:6px;background:linear-gradient(90deg,#4A22E0,#FF3D8B);margin-bottom:18px}
.atcta-cert small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7C74A3}
.atcta-cert b{display:block;margin:6px 0 14px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em}
.atcta-cert .ln{display:block;height:9px;width:82%;border-radius:6px;background:#EFEDFF;margin-bottom:8px}
.atcta-cert .ln.s{width:56%}
.atcta-cert .row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:14px}
.atcta-cert .qr{width:86px;height:86px;border-radius:8px;background:
  linear-gradient(#140C33,#140C33) 0 0/26px 26px no-repeat,linear-gradient(#140C33,#140C33) 100% 0/26px 26px no-repeat,linear-gradient(#140C33,#140C33) 0 100%/26px 26px no-repeat,
  repeating-conic-gradient(#140C33 0 25%,#fff 0 50%) 0 0/14px 14px;box-shadow:inset 0 0 0 5px #fff}
.atcta-cert .seal{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#4A22E0;color:#fff;box-shadow:0 10px 22px -8px rgba(74,34,224,.8)}
.atcta-cert .seal svg{width:30px;height:30px}
.atcta-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:99px;background:#fff;color:#140C33;font-size:13px;font-weight:700;box-shadow:0 18px 36px -16px rgba(20,12,51,.6);white-space:nowrap}
.atcta-chip svg{width:17px;height:17px;color:#4A22E0}
.atcta-chip .dot{width:9px;height:9px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.atcta-chip.c1{top:22px;right:4%;animation:atctaFloat 5s ease-in-out -1.5s infinite}
.atcta-chip.c2{bottom:26px;left:2%;font-family:ui-monospace,Menlo,monospace;font-weight:600;animation:atctaFloat 7s ease-in-out -3s infinite}
@keyframes atctaFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:900px){
  .atcta{grid-template-columns:1fr;text-align:center;border-radius:26px}
  .atcta p{margin-inline:auto}
  .atcta-btns,.atcta-trust{justify-content:center}
  .atcta-art{height:260px;order:-1;margin-top:-6px}
  .atcta-cert{width:250px;padding:20px}
  .atcta-cert .qr{width:70px;height:70px}
}
@media (max-width:520px){
  .atcta{padding:30px 20px}
  .atcta-art{display:none}
  .atcta-btns{flex-direction:column}
  .atcta-btn{justify-content:center;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.atcta-cert,.atcta-chip,.atcta-eye i{animation:none}}

/* ---------- "From the blog" on the home page (.atblog) ---------- */
.atblog{padding:clamp(56px,7vw,100px) 0 0;font-family:"Instrument Sans",system-ui,sans-serif;color:#140C33}
.atblog *{box-sizing:border-box}
.atblog-in{width:100%;max-width:1160px;margin:0 auto;padding:0 24px}
.atblog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.atblog-eye{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4A22E0}
.atblog-eye::before{content:"";width:22px;height:2px;border-radius:2px;background:#FF3D8B}
.atblog h2{margin:12px 0 0;max-width:20ch;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.04;letter-spacing:-.04em;color:#140C33}
.atblog-all{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;border:1.5px solid #E4E0FF;background:#fff;color:#140C33!important;font-weight:600;font-size:15px;text-decoration:none!important;transition:.2s}
.atblog-all:hover{border-color:#4A22E0;color:#4A22E0!important;transform:translateY(-2px)}
.atblog-all svg,.atblog-go svg{width:16px;height:16px;transition:transform .25s}
.atblog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.atblog-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E4E0FF;border-radius:22px;overflow:hidden;text-decoration:none!important;color:inherit!important;transition:transform .25s,box-shadow .25s,border-color .25s}
.atblog-card:hover{transform:translateY(-4px);border-color:#CFC6FF;box-shadow:0 30px 60px -34px rgba(74,34,224,.55)}
.atblog-img{display:block;aspect-ratio:1200/630;background:#EFEDFF;overflow:hidden}
.atblog-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.atblog-card:hover .atblog-img img{transform:scale(1.04)}
.atblog-meta{display:flex;align-items:center;gap:10px;padding:20px 22px 0;font-size:12.5px}
.atblog-meta i{font-style:normal;font-weight:700;color:#4A22E0;background:#F5F4FF;border:1px solid #E4E0FF;padding:4px 10px;border-radius:99px}
.atblog-meta em{font-style:normal;color:#7C74A3}
.atblog-card b{display:block;padding:12px 22px 0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:700;color:#140C33}
.atblog-card p{margin:10px 0 0;padding:0 22px;font-size:14.5px;line-height:1.6;color:#4A4270;flex:1}
.atblog-go{display:inline-flex;align-items:center;gap:7px;padding:18px 22px 22px;font-size:14px;font-weight:600;color:#4A22E0}
.atblog-card:hover .atblog-go svg,.atblog-all:hover svg{transform:translateX(3px)}
@media (max-width:960px){.atblog-grid{grid-template-columns:1fr 1fr}.atblog-card:nth-child(3){display:none}}
@media (max-width:600px){.atblog-grid{grid-template-columns:1fr}.atblog-card:nth-child(3){display:flex}}

/* blog dropdown: topic names on one line */
.mfx-mega-bl{grid-template-columns:minmax(420px,1fr) 240px;width:min(720px,94vw)}
.mfx-bm-t{grid-template-columns:repeat(2,max-content);column-gap:10px}
.mfx-bm-t a span{white-space:nowrap}
@media (max-width:1180px){.mfx-mega-bl{grid-template-columns:minmax(420px,1fr);width:min(480px,94vw)}.mfx-mega-bl .mfx-bm-f,.mfx-mega-bl .mfx-promo{display:none}}

/* ---------- card grids: an unfinished last row sits in the centre instead of leaving an empty slot ---------- */
@media (min-width:961px){
  .atp .cards.c3{grid-template-columns:repeat(6,minmax(0,1fr))}
  .atp .cards.c3>*{grid-column:span 2}
  .atp .cards.c3>*:last-child:nth-child(3n+1){grid-column:3/span 2}
  .atp .cards.c3>*:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
  .atp .cards.c3>*:last-child:nth-child(3n+2){grid-column:4/span 2}
  .atp .cards.c4{grid-template-columns:repeat(8,minmax(0,1fr))}
  .atp .cards.c4>*{grid-column:span 2}
  .atp .cards.c4>*:last-child:nth-child(4n+1){grid-column:4/span 2}
  .atp .cards.c4>*:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
  .atp .cards.c4>*:last-child:nth-child(4n+2){grid-column:5/span 2}
  .atp .cards.c4>*:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}
  .atp .cards.c4>*:nth-last-child(2):nth-child(4n+2){grid-column:4/span 2}
  .atp .cards.c4>*:last-child:nth-child(4n+3){grid-column:6/span 2}
}
@media (min-width:621px){
  .atp .cards.c2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .atp .cards.c2>*{grid-column:span 2}
  .atp .cards.c2>*:last-child:nth-child(2n+1){grid-column:2/span 2}
}
@media (min-width:621px) and (max-width:960px){
  .atp .cards.c3,.atp .cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .atp .cards.c3>*,.atp .cards.c4>*{grid-column:span 2}
  .atp .cards.c3>*:last-child:nth-child(2n+1),.atp .cards.c4>*:last-child:nth-child(2n+1){grid-column:2/span 2}
}

/* menu highlight: drawn on the item itself (no measuring), so it always sits exactly behind the word */
.mfx-ind{display:none!important}
.mfx-link{transition:color .2s,background-color .2s,box-shadow .2s}
.mfx-ul>li:hover>.mfx-link,.mfx-ul>li.is-open>.mfx-link,.mfx-ul>li.is-on>.mfx-link{background:#F5F4FF;box-shadow:inset 0 0 0 1px #E4E0FF}

/* ---------- product updates sign-up strip (.atnl) ---------- */
.mfx-nl.atnl{background:#F5F4FF!important;color:#140C33!important;padding:clamp(48px,7vw,88px) 20px 0!important;font-family:"Instrument Sans",system-ui,sans-serif}
.mfx-nl.atnl::before{display:none!important}
.atnl *{box-sizing:border-box;margin:0;padding:0}
.atnl-card{position:relative;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px);border-radius:30px;background:#fff;border:1px solid #E4E0FF;box-shadow:0 40px 80px -50px rgba(74,34,224,.5);overflow:hidden;isolation:isolate}
.atnl-card::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(74,34,224,.10),transparent 65%)}
.atnl-ey{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:99px;background:#F5F4FF;border:1px solid #E4E0FF;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4A4270}
.atnl-ey i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff}
.atnl-ey i svg{width:13px;height:13px;fill:#fff}
.atnl h2{margin:16px 0 10px!important;font:800 clamp(28px,3.4vw,42px)/1.05 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.04em;color:#140C33!important;text-transform:none!important}
.atnl h2 .hl{color:#4A22E0!important}
.atnl-tx>p{font-size:16px;line-height:1.6;color:#4A4270;max-width:46ch}
.atnl-perks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px!important}
.atnl-perks li{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#140C33}
.atnl-perks svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#EDE8FF;color:#4A22E0;flex:none}
.atnl-box{background:#F5F4FF;border:1px solid #E4E0FF;border-radius:22px;padding:22px}
.atnl .mfx-nl-f{display:grid;gap:12px}
.atnl .fld{display:grid;gap:6px}
.atnl .fld .lb{font-size:12.5px;font-weight:600;color:#4A4270}
.atnl .fld input{width:100%;height:50px;padding:0 16px;border-radius:14px;border:1.5px solid #E4E0FF;background:#fff;color:#140C33;font:15.5px "Instrument Sans",system-ui,sans-serif;outline:0;transition:border-color .2s,box-shadow .2s}
.atnl .fld input::placeholder{color:#A39CC6}
.atnl .fld input:focus{border-color:#4A22E0;box-shadow:0 0 0 4px rgba(74,34,224,.14)}
.atnl .fld.bad input{border-color:#E5484D}
.atnl button[type=submit]{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;margin-top:4px;border:0;border-radius:99px;background:#4A22E0;color:#fff;font:600 16px "Instrument Sans",system-ui,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:0 14px 28px -14px rgba(74,34,224,.8);transition:background .2s,transform .2s}
.atnl button[type=submit]:hover{background:#3312B0;transform:translateY(-2px)}
.atnl button[type=submit] i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#25D366}
.atnl button[type=submit] i svg{width:14px;height:14px;fill:#fff}
.atnl .note{font-size:12.5px;color:#7C74A3;text-align:center}
.atnl .err{font-size:13px;color:#C62F35;text-align:center}
.atnl .ok{display:grid;justify-items:center;gap:8px;text-align:center;padding:24px 10px}
.atnl .ok[hidden]{display:none}
.atnl .ok .ck{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#4A22E0;color:#fff}
.atnl .ok .ck svg{width:26px;height:26px}
.atnl .ok b{font:800 22px "Bricolage Grotesque",sans-serif;color:#140C33}
.atnl .ok p{color:#4A4270}
@media (max-width:860px){.atnl-card{grid-template-columns:1fr}}
.atcta-btn>span{display:inline}
/* closing banner: real, scannable QR code on the certificate */
.atcta-cert .qr{display:block;width:92px;height:92px;padding:0;border-radius:10px;background:#fff!important;box-shadow:0 0 0 1px #E4E0FF;line-height:0;cursor:pointer}
.atcta-cert .qr svg{display:block;width:100%;height:100%;border-radius:10px}
@media (max-width:900px){.atcta-cert .qr{width:76px;height:76px}}
/* sign-up strip: neutralise the old dark-strip styles from lists.css */
.mfx-nl.atnl .fld{display:grid!important;gap:6px;height:auto!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;position:static}
.mfx-nl.atnl .fld:focus-within{box-shadow:none!important}
.mfx-nl.atnl .fld .lb{display:block;font:600 13px "Instrument Sans",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#4A4270!important;margin:0!important}
.mfx-nl.atnl .fld input{flex:none!important;height:50px!important;width:100%;padding:0 16px!important;border:1.5px solid #E4E0FF!important;border-radius:14px!important;background:#fff!important;color:#140C33!important;font:500 15.5px "Instrument Sans",system-ui,sans-serif!important}
.mfx-nl.atnl .fld input::placeholder{color:#A39CC6!important}
.mfx-nl.atnl .fld input:focus{border-color:#4A22E0!important;box-shadow:0 0 0 4px rgba(74,34,224,.14)!important}
.mfx-nl.atnl .fld.bad input{border-color:#E5484D!important}
.mfx-nl.atnl .mfx-nl-f button{height:52px!important;border-radius:99px!important;background:#4A22E0!important;color:#fff!important;font:600 16px "Instrument Sans",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
.mfx-nl.atnl .mfx-nl-f button::after{display:none!important}
.mfx-nl.atnl .mfx-nl-f button:hover{background:#3312B0!important;box-shadow:0 16px 32px -14px rgba(74,34,224,.8)!important}
.mfx-nl.atnl .mfx-nl-f button i{background:#25D366!important;color:#fff!important}
.mfx-nl.atnl .note{color:#7C74A3!important;font-size:12.5px!important;line-height:1.5}
.mfx-nl.atnl .ok .ck{width:56px!important;height:56px!important;background:#4A22E0!important;color:#fff!important}
.mfx-nl.atnl .ok b{text-transform:none!important;font:800 22px "Bricolage Grotesque",sans-serif!important;color:#140C33}
.mfx-nl.atnl .ok p{color:#4A4270!important}

/* ---------- sign-up strip v2: WhatsApp chat preview + one-line form ---------- */
.mfx-nl.atnl2{padding:clamp(56px,8vw,96px) 20px 0!important;background:#F5F4FF!important}
.atnl2-in{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.atnl2-in::before{content:"";position:absolute;left:-4%;top:50%;width:min(520px,60%);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(37,211,102,.16),rgba(74,34,224,.10) 45%,transparent 70%);pointer-events:none}
.atnl2-in>*{position:relative;z-index:1}
/* chat card */
.atnl2-chat{border-radius:26px;overflow:hidden;background:#EFEAE2;box-shadow:0 40px 80px -40px rgba(20,12,51,.55),0 0 0 1px rgba(20,12,51,.06);transform:rotate(-2deg);max-width:400px;justify-self:center;width:100%}
.atnl2-chat .hd{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#075E54;color:#fff}
.atnl2-chat .av{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.atnl2-chat .av svg{width:26px;height:26px}
.atnl2-chat .who{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.atnl2-chat .who b{font:700 15px "Instrument Sans",sans-serif}
.atnl2-chat .who small{font-size:12px;opacity:.8}
.atnl2-chat .wa{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.atnl2-chat .wa svg{width:17px;height:17px;fill:#fff}
.atnl2-chat .bd{display:flex;flex-direction:column;gap:8px;padding:16px 14px 18px;background-image:radial-gradient(rgba(7,94,84,.07) 1px,transparent 1px);background-size:14px 14px}
.atnl2-chat .day{align-self:center;font-size:11px;font-weight:600;color:#54656F;background:#fff;padding:3px 10px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.06);margin-bottom:2px}
.atnl2-chat .bub{position:relative;max-width:86%;align-self:flex-start;margin:0;padding:8px 10px 18px;border-radius:2px 12px 12px 12px;background:#fff;color:#111B21;font-size:13.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.atnl2-chat .bub.me{align-self:flex-end;border-radius:12px 2px 12px 12px;background:#D9FDD3}
.atnl2-chat .bub em{position:absolute;right:8px;bottom:4px;display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:10.5px;color:#667781}
.atnl2-chat .bub em svg{width:15px;height:10px;color:#53BDEB}
/* text + form */
.atnl2-tx h2{margin:16px 0 10px!important;font:800 clamp(30px,3.8vw,46px)/1.04 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.045em;color:#140C33!important;text-transform:none!important}
.atnl2-tx h2 .hl{color:#1DAA61!important}
.atnl2-tx>p{font-size:16.5px;line-height:1.6;color:#4A4270;max-width:50ch}
.atnl2 .mfx-nl-f{margin-top:22px!important;display:block}
.atnl2 .mfx-nl-f .row{display:flex;gap:8px;padding:8px;border-radius:22px;background:#fff;border:1px solid #E4E0FF;box-shadow:0 24px 50px -32px rgba(74,34,224,.55)}
.mfx-nl.atnl2 .fld{flex:1;min-width:0}
.mfx-nl.atnl2 .fld .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mfx-nl.atnl2 .fld input{height:50px!important;border:0!important;background:#F5F4FF!important;border-radius:15px!important}
.mfx-nl.atnl2 .fld input:focus{background:#fff!important;box-shadow:0 0 0 2px #4A22E0!important}
.mfx-nl.atnl2 .fld.bad input{box-shadow:0 0 0 2px #E5484D!important}
.mfx-nl.atnl2 .mfx-nl-f button{flex:none;height:50px!important;padding:0 20px 0 10px;margin:0!important;border-radius:15px!important;background:#25D366!important;color:#0B3B24!important;font-weight:700!important;white-space:nowrap;box-shadow:none!important}
.mfx-nl.atnl2 .mfx-nl-f button:hover{background:#1FC05B!important;transform:translateY(-1px)}
.mfx-nl.atnl2 .mfx-nl-f button i{background:#fff!important}
.mfx-nl.atnl2 .mfx-nl-f button i svg{fill:#25D366!important}
.atnl2 .err{margin-top:10px!important;text-align:left!important}
.atnl2 .ok{justify-items:start!important;text-align:left!important;margin-top:20px;padding:18px 20px!important;border-radius:20px;background:#fff;border:1px solid #E4E0FF;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.atnl2 .ok .ck{grid-row:span 2;width:46px!important;height:46px!important;background:#25D366!important}
.atnl2 .ok .ck svg{width:22px!important;height:22px!important}
.atnl2 .ok b{font-size:19px!important}
.atnl2 .atnl-perks{margin-top:16px!important}
@media (max-width:900px){.atnl2-in{grid-template-columns:1fr}.atnl2-chat{order:2;transform:none;max-width:420px}.atnl2-in::before{left:50%;top:auto;bottom:0;transform:translateX(-50%)}}
@media (max-width:620px){.atnl2 .mfx-nl-f .row{flex-direction:column}.mfx-nl.atnl2 .mfx-nl-f button{justify-content:center}}

/* ---------- sign-up strip v3: centred, one pill-shaped form ---------- */
.mfx-nl.atnl3{position:relative;overflow:hidden;padding:clamp(64px,9vw,112px) 20px clamp(8px,2vw,16px)!important;background:#F5F4FF!important;text-align:center}
.mfx-nl.atnl3::after{content:"";position:absolute;left:50%;top:clamp(20px,4vw,40px);width:min(900px,120%);aspect-ratio:2.4;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(74,34,224,.12),transparent),repeating-radial-gradient(circle at 50% 50%,transparent 0 46px,rgba(74,34,224,.07) 46px 47px);-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.atnl3-in{position:relative;z-index:1;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.atnl3-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#2BE077,#16A34A);box-shadow:0 18px 34px -14px rgba(22,163,74,.7),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-6deg)}
.atnl3-ic svg{width:30px;height:30px;fill:#fff}
.atnl3-ey{margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4A22E0}
.atnl3 h2{margin:10px 0 12px!important;font:800 clamp(32px,4.6vw,54px)/1.02 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.05em;color:#140C33!important;text-transform:none!important;text-wrap:balance}
.atnl3 h2 .hl{color:transparent!important;background:linear-gradient(90deg,#4A22E0,#FF3D8B);-webkit-background-clip:text;background-clip:text}
.atnl3-lede{font-size:17px;line-height:1.6;color:#4A4270;max-width:52ch}
.atnl3 .mfx-nl-f{width:100%;margin-top:28px!important;display:block}
.atnl3-bar{display:flex;align-items:center;gap:0;padding:8px;border-radius:999px;background:#fff;border:1px solid #E4E0FF;box-shadow:0 30px 60px -34px rgba(74,34,224,.55),0 2px 0 rgba(255,255,255,.8) inset;transition:box-shadow .2s,border-color .2s}
.atnl3-bar:focus-within{border-color:#CFC6FF;box-shadow:0 0 0 5px rgba(74,34,224,.10),0 30px 60px -34px rgba(74,34,224,.55)}
.mfx-nl.atnl3 .fld{flex:1;min-width:0;display:flex!important;align-items:center;gap:0;position:relative}
.mfx-nl.atnl3 .fld .ic{display:grid;place-items:center;width:44px;flex:none;color:#7C74A3;border:0!important;height:auto!important}
.mfx-nl.atnl3 .fld .ic svg{width:19px;height:19px}
.mfx-nl.atnl3 .fld:nth-of-type(2) .ic svg{fill:#25D366;stroke:none}
.mfx-nl.atnl3 .fld .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mfx-nl.atnl3 .fld input{height:52px!important;padding:0 10px 0 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.mfx-nl.atnl3 .fld input:focus{box-shadow:none!important}
.mfx-nl.atnl3 .fld.bad .ic{color:#E5484D}
.mfx-nl.atnl3 .fld.bad input::placeholder{color:#E5484D!important}
.atnl3-bar .sep{width:1px;height:28px;background:#E4E0FF;flex:none}
.mfx-nl.atnl3 .mfx-nl-f button{flex:none;display:inline-flex!important;align-items:center;gap:10px;height:52px!important;padding:0 22px 0 24px!important;margin:0!important;border-radius:999px!important;background:#4A22E0!important;color:#fff!important;font:600 15.5px "Instrument Sans",system-ui,sans-serif!important;white-space:nowrap;box-shadow:0 12px 24px -12px rgba(74,34,224,.9)!important}
.mfx-nl.atnl3 .mfx-nl-f button svg{width:17px;height:17px;transition:transform .2s}
.mfx-nl.atnl3 .mfx-nl-f button:hover{background:#3312B0!important;transform:none}
.mfx-nl.atnl3 .mfx-nl-f button:hover svg{transform:translateX(3px)}
.atnl3 .err{margin-top:12px!important}
.atnl3 .ok{margin-top:28px;display:flex!important;align-items:center;gap:14px;padding:14px 26px 14px 14px!important;border-radius:999px;background:#fff;border:1px solid #E4E0FF;box-shadow:0 30px 60px -34px rgba(74,34,224,.55);text-align:left!important}
.atnl3 .ok[hidden]{display:none!important}
.atnl3 .ok .ck{width:44px!important;height:44px!important;flex:none}
.atnl3 .ok .ck svg{width:22px!important;height:22px!important}
.atnl3 .ok b{font-size:18px!important;display:block}
.atnl3 .ok p{font-size:14px}
.atnl3-perks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:20px!important}
.atnl3-perks li{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:#4A4270}
.atnl3-perks svg{width:17px;height:17px;padding:3px;border-radius:50%;background:#4A22E0;color:#fff;flex:none}
@media (max-width:680px){
  .atnl3-bar{flex-direction:column;align-items:stretch;border-radius:26px;padding:10px;gap:6px}
  .atnl3-bar .sep{width:auto;height:1px;margin:0 12px}
  .mfx-nl.atnl3 .mfx-nl-f button{justify-content:center}
}

/* ---------- sign-up strip v3: motion ---------- */
.atnl3-in{position:relative}
/* signal ripples behind the icon */
.atnl3-rip{position:absolute;left:50%;top:29px;width:0;height:0;z-index:-1;pointer-events:none}
.atnl3-rip i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(37,211,102,.45);opacity:0;animation:atnlRip 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.atnl3-rip i:nth-child(2){animation-delay:1.2s;border-color:rgba(74,34,224,.35)}
.atnl3-rip i:nth-child(3){animation-delay:2.4s}
@keyframes atnlRip{0%{transform:scale(.45);opacity:.9}100%{transform:scale(4.2);opacity:0}}
/* icon: float + little nudge, like a new message arriving */
.atnl3-ic{animation:atnlFloat 5s ease-in-out infinite}
.atnl3-ic::after{content:"";position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:#FF3D8B;border:3px solid #F5F4FF;transform:scale(0);animation:atnlBadge 5s ease-in-out infinite}
.atnl3-ic{position:relative}
@keyframes atnlFloat{0%,100%{transform:rotate(-6deg) translateY(0)}45%{transform:rotate(-6deg) translateY(-6px)}55%{transform:rotate(4deg) translateY(-6px)}62%{transform:rotate(-8deg) translateY(-4px)}70%{transform:rotate(-6deg) translateY(0)}}
@keyframes atnlBadge{0%,50%{transform:scale(0)}58%{transform:scale(1.25)}64%,92%{transform:scale(1)}100%{transform:scale(0)}}
/* heading gradient slowly flows */
.atnl3 h2 .hl{background-size:200% 100%!important;background-image:linear-gradient(90deg,#4A22E0,#FF3D8B,#4A22E0)!important;animation:atnlFlow 6s linear infinite}
@keyframes atnlFlow{to{background-position:200% 0}}
/* pill: a light travels round its border */
.atnl3-glow{position:relative;padding:1.5px;border-radius:999px;overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -34px rgba(74,34,224,.55)}
.atnl3-glow::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;z-index:-1;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 62%,rgba(74,34,224,.0) 62%,#4A22E0 78%,#FF3D8B 86%,transparent 92%);animation:atnlSpin 5s linear infinite}
.atnl3-glow::after{content:"";position:absolute;inset:0;z-index:-2;background:#E4E0FF;border-radius:inherit}
@keyframes atnlSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.atnl3-glow .atnl3-bar{border:0!important;box-shadow:none!important}
.atnl3-glow:focus-within{box-shadow:0 0 0 5px rgba(74,34,224,.12),0 30px 60px -34px rgba(74,34,224,.55)}
/* button: sheen + arrow nudge */
.mfx-nl.atnl3 .mfx-nl-f button{position:relative;overflow:hidden}
.mfx-nl.atnl3 .mfx-nl-f button::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:atnlSheen 4.5s ease-in-out infinite}
@keyframes atnlSheen{0%,60%{left:-60%}85%,100%{left:130%}}
.mfx-nl.atnl3 .mfx-nl-f button svg{animation:atnlNudge 2.4s ease-in-out infinite}
@keyframes atnlNudge{0%,70%,100%{transform:none}80%{transform:translateX(4px)}90%{transform:translateX(0)}}
.mfx-nl.atnl3 .mfx-nl-f button:active{transform:scale(.97)}
/* invalid fields shake */
.mfx-nl.atnl3 .fld.bad{animation:atnlShake .4s}
@keyframes atnlShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
/* entrance when it scrolls into view */
.atnl3:not(.is-in) .atnl3-ic,.atnl3:not(.is-in) .atnl3-ey,.atnl3:not(.is-in) h2,.atnl3:not(.is-in) .atnl3-lede,.atnl3:not(.is-in) .mfx-nl-f,.atnl3:not(.is-in) .atnl3-perks{opacity:0;transform:translateY(18px)}
.atnl3.is-in .atnl3-ey,.atnl3.is-in h2,.atnl3.is-in .atnl3-lede,.atnl3.is-in .mfx-nl-f,.atnl3.is-in .atnl3-perks{animation:atnlUp .7s cubic-bezier(.2,.8,.2,1) both}
.atnl3.is-in .atnl3-ey{animation-delay:.08s}.atnl3.is-in h2{animation-delay:.16s}.atnl3.is-in .atnl3-lede{animation-delay:.24s}.atnl3.is-in .mfx-nl-f{animation-delay:.34s}.atnl3.is-in .atnl3-perks{animation-delay:.44s}
@keyframes atnlUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.atnl3-perks li{opacity:1}
/* success: pop + draw the tick */
.atnl3 .ok:not([hidden]){animation:atnlPop .5s cubic-bezier(.2,1.4,.4,1) both}
.atnl3 .ok .ck svg{stroke-dasharray:30;stroke-dashoffset:30;animation:atnlDraw .45s .25s ease-out forwards!important}
@keyframes atnlPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes atnlDraw{to{stroke-dashoffset:0}}
@media (max-width:680px){.atnl3-glow{border-radius:28px}.atnl3-glow::before{width:300%}}
@media (prefers-reduced-motion:reduce){
  .atnl3-rip i,.atnl3-ic,.atnl3-ic::after,.atnl3 h2 .hl,.atnl3-glow::before,.mfx-nl.atnl3 .mfx-nl-f button::before,.mfx-nl.atnl3 .mfx-nl-f button svg{animation:none!important}
  .atnl3:not(.is-in) *{opacity:1!important;transform:none!important}
}
/* sign-up section: always a full-width band of its own */
.mfx-nl.atnl3{display:block;width:100%;max-width:none;box-sizing:border-box;clear:both;margin:0!important;float:none}
/* the old strip stylesheet resets every margin inside .mfx-nl – restore the ones this design needs */
.mfx-nl.atnl3 .atnl3-in{margin:0 auto!important}
.mfx-nl.atnl3 .atnl3-ey{margin-top:20px!important}
.mfx-nl.atnl3 .atnl3-lede{margin:0 auto!important}
.mfx-nl.atnl3 .ok{margin-top:28px!important}
.mfx-nl.atnl3 .atnl3-perks{margin:20px 0 0!important;padding:0!important}


/* ---------- footer trial strip v2: glass card, travelling border, live "trial key" ---------- */
.atf .atf-try{position:relative;isolation:isolate;overflow:hidden;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px 24px!important;padding:22px 24px!important;border-radius:26px!important;background:rgba(255,255,255,.04)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}
.atf .atf-try::before{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;z-index:-2;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0 60%,#4A22E0 72%,#FF3D8B 82%,#FFC93D 88%,transparent 94%);animation:atfSpin 7s linear infinite}
.atf .atf-try::after{content:"";position:absolute;inset:1.5px!important;left:1.5px!important;top:1.5px!important;right:1.5px!important;bottom:1.5px!important;z-index:-1;border-radius:24.5px;width:auto!important;height:auto!important;aspect-ratio:auto!important;background:radial-gradient(50% 120% at 0% 50%,rgba(91,46,255,.35),transparent 70%),radial-gradient(40% 120% at 100% 50%,rgba(255,61,139,.16),transparent 70%),#1A1040!important;animation:none!important;transform:none!important;opacity:1}
@keyframes atfSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.atf-try-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#6B3BFF,#4A22E0);box-shadow:0 14px 28px -12px rgba(74,34,224,.9),inset 0 1px 0 rgba(255,255,255,.3);animation:atfKey 4s ease-in-out infinite}
.atf-try-ic svg{width:26px;height:26px}
@keyframes atfKey{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-14deg)}84%{transform:rotate(10deg)}92%{transform:rotate(-4deg)}}
.atf .atf-try-tx{display:block!important}
.atf .atf-try-tx small{display:inline-block;margin-bottom:6px;background:#FFC93D;color:#140C33;padding:4px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.atf .atf-try-tx b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(18px,1.8vw,22px);line-height:1.15;letter-spacing:-.03em;white-space:normal}
.atf .atf-try-tx p{margin:4px 0 0;font-size:13.5px;color:rgba(255,255,255,.72)}
.atf-key{display:flex;flex-direction:column;gap:5px;padding:10px 30px 10px 14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px dashed rgba(201,184,255,.35);position:relative}
.atf-key .lb{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C9B8FF}
.atf-key code{font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#fff;white-space:nowrap}
.atf-key code .s{color:#FF7EB3}
.atf-key .cur{position:absolute;right:12px;bottom:11px;width:8px;height:15px;background:#C9B8FF;border-radius:2px;animation:atfCur 1s steps(1) infinite}
@keyframes atfCur{50%{opacity:0}}
.atf .atf-try-go{flex:none;display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:99px;background:#fff;color:#4A22E0;font-weight:600;font-size:15px;white-space:nowrap;box-shadow:0 14px 28px -14px rgba(0,0,0,.6);transition:transform .2s}
.atf .atf-try-go:hover{transform:translateY(-2px)}
.atf .atf-try-go svg{width:16px;height:16px;transition:transform .2s}
.atf .atf-try-go:hover svg{transform:translateX(3px)}
@media (max-width:1020px){.atf .atf-try{grid-template-columns:auto minmax(0,1fr) auto}.atf-key{display:none}}
@media (max-width:600px){.atf .atf-try{grid-template-columns:auto minmax(0,1fr)}.atf .atf-try-go{grid-column:1/-1;justify-content:center}.atf-try-ic{width:48px;height:48px;border-radius:15px}}
@media (prefers-reduced-motion:reduce){.atf .atf-try::before,.atf-try-ic,.atf-key .cur{animation:none!important}}
/* sign-up ripples: stay inside the section and fade out before its edge (no cut-off rings) */
.mfx-nl.atnl3{padding-top:clamp(96px,11vw,140px)!important}
.atnl3-rip i{left:-50px;top:-50px;width:100px;height:100px}
@keyframes atnlRip{0%{transform:scale(.55);opacity:.85}70%{opacity:.25}100%{transform:scale(2.5);opacity:0}}
.mfx-nl.atnl3::after{top:clamp(30px,5vw,60px)!important;-webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 92%)!important;mask-image:radial-gradient(closest-side,#000 25%,transparent 92%)!important}
@media (max-width:600px){.atnl3-rip i{left:-40px;top:-40px;width:80px;height:80px}}
/* closing CTA: always breathing room above and below (also when the updates sign-up follows it) */
.mfpage section.wrap:has(> .atcta){position:relative;z-index:2;margin-top:clamp(56px,6vw,80px)!important;padding-bottom:clamp(56px,7vw,96px)!important}
.mfpage section.wrap:has(> .cta-band){position:relative;z-index:2;padding-bottom:clamp(56px,7vw,96px)!important}
/* a full-width band ending the page meets the sign-up with a clean edge */
.mfpage + .mfx-nl.atnl{border-top:1px solid transparent}
.atp-trial + .mfx-nl.atnl,.mfpage:has(.tr-alt:last-child) + .mfx-nl.atnl{border-top-color:#E8E4FB}

/* =================== dark page hero (.dh) – How it works, Use cases, FAQ, Docs, Changelog, legal pages =================== */
.dh{position:relative;overflow:hidden;isolation:isolate;padding:clamp(40px,6vw,76px) 0 clamp(52px,7vw,92px);color:#fff;text-align:center;font-family:"Instrument Sans",system-ui,sans-serif;background:radial-gradient(45% 70% at 95% 0%,rgba(255,61,139,.28),transparent 60%),radial-gradient(55% 80% at 0% 0%,rgba(91,46,255,.55),transparent 62%),#140C33}
.dh::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 80% at 50% 10%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 50% 10%,#000,transparent 75%)}
.dh::after{content:"";position:absolute;left:50%;top:-14%;width:520px;height:520px;margin-left:-260px;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(107,59,255,.45),transparent 65%);filter:blur(10px);animation:dhGlow 7s ease-in-out infinite}
.dh-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.dh-crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:18px;animation:dhUp .6s ease both}
.dh-crumbs a{color:rgba(255,255,255,.78)!important;text-decoration:none}
.dh-crumbs a:hover{color:#fff!important}
.dh-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 10px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;animation:dhUp .6s ease both}
.dh-pill i{width:8px;height:8px;border-radius:50%;background:#FF7EB3;box-shadow:0 0 12px #FF3D8B}
.dh h1{margin:18px auto 14px!important;max-width:20ch;font:800 clamp(38px,5.4vw,68px)/1.04 "Bricolage Grotesque",system-ui,sans-serif!important;letter-spacing:-.045em!important;color:#fff!important;text-wrap:balance;animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .08s both}
.dh h1 span{color:transparent;background:linear-gradient(90deg,#B9A6FF,#FF7EB3,#FFC93D,#B9A6FF);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:dhSheen 6s linear infinite}
.dh .lede{margin:0 auto!important;max-width:60ch;font-size:clamp(16px,1.5vw,18px)!important;line-height:1.65!important;color:rgba(255,255,255,.8)!important;animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .16s both}
.dh .lede a{color:#C9B8FF!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dh-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px;animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .24s both}
.dh-cta .btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px!important;border-radius:99px!important;font-weight:700!important;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s!important}
.dh-cta .btn-primary{background:#fff!important;color:#4A22E0!important;border-color:#fff!important}
.dh-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(255,255,255,.5)}
.dh-cta .btn-ghost{background:transparent!important;border:1.5px solid rgba(255,255,255,.3)!important;color:#fff!important}
.dh-cta .btn-ghost:hover{background:rgba(255,255,255,.1)!important;transform:translateY(-2px)}
.dh-updated{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0!important;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.75)!important;animation:dhUp .6s ease .28s both}
.dh--sm{padding-bottom:clamp(44px,5vw,64px)}
.dh--sm h1{font-size:clamp(36px,4.6vw,56px)!important}
@keyframes dhUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dhSheen{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes dhGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}
/* the same card finish as Features on the other theme pages */
.mfpage .cards .card{border-radius:22px;transition:transform .25s,box-shadow .25s,border-color .25s}
.mfpage .cards .card:hover{transform:translateY(-4px);border-color:#CFC6FF;box-shadow:0 26px 44px -28px rgba(74,34,224,.55)}
.mfpage .cards .card .card-ico{transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.mfpage .cards .card:hover .card-ico{transform:rotate(-8deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){.dh *,.dh::after{animation:none!important}.mfpage .cards .card:hover{transform:none}}
/* checkout: the same dark band at the top, order cards rising into it */
.atp-checkout{position:relative;isolation:isolate}
.atp-checkout::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(300px,30vw,360px);z-index:-1;background:radial-gradient(45% 80% at 95% 0%,rgba(255,61,139,.28),transparent 60%),radial-gradient(55% 90% at 0% 0%,rgba(91,46,255,.55),transparent 62%),#140C33}
.atp-checkout #checkoutView>.crumbs,.atp-checkout #checkoutView>.crumbs span{color:rgba(255,255,255,.6)!important}
.atp-checkout #checkoutView>.crumbs a{color:rgba(255,255,255,.8)!important}
.atp-checkout #checkoutView>h1{color:#fff!important;font-family:"Bricolage Grotesque",system-ui,sans-serif!important;letter-spacing:-.04em!important;animation:dhUp .6s ease both}
.atp-checkout #checkoutView>.lede{color:rgba(255,255,255,.8)!important;animation:dhUp .6s ease .08s both}
.atp-checkout #checkoutView .grid{animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .16s both}
.atp-checkout #checkoutView .block,.atp-checkout #checkoutView .summary,.atp-checkout #checkoutView aside{box-shadow:0 30px 60px -40px rgba(20,12,51,.55)}
/* home: the hero in the same dark style */
.atp-home .hero{color:#fff;isolation:isolate;background:radial-gradient(45% 60% at 98% 0%,rgba(255,61,139,.26),transparent 60%),radial-gradient(55% 70% at 0% 0%,rgba(91,46,255,.55),transparent 62%),#140C33!important}
.atp-home .hero::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)!important;background-size:56px 56px!important;-webkit-mask-image:radial-gradient(70% 70% at 30% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 30% 20%,#000,transparent 75%);opacity:1!important}
.atp-home .hero h1{color:#fff!important;animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .05s both}
.atp-home .hero h1 .mark{color:transparent!important;background:linear-gradient(90deg,#B9A6FF,#FF7EB3,#FFC93D,#B9A6FF);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:dhSheen 6s linear infinite}
.atp-home .hero .eyebrow{color:#C9B8FF!important;animation:dhUp .6s ease both}
.atp-home .hero .lede{color:rgba(255,255,255,.8)!important;animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .14s both}
.atp-home .hero-cta{animation:dhUp .7s cubic-bezier(.2,.8,.2,1) .22s both}
.atp-home .hero-cta .btn-primary{background:#fff!important;color:#4A22E0!important;border-color:#fff!important}
.atp-home .hero-cta .btn-ghost{background:transparent!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
.atp-home .hero-cta .btn-ghost:hover{background:rgba(255,255,255,.1)!important}
.atp-home .hero .chips li{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:#E6E0FF!important}
.atp-home .hero .chips .tick{background:rgba(43,224,119,.18)!important;color:#2BE077!important}
.atp-home .hero .verifier{box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)!important;animation:dhUp .8s cubic-bezier(.2,.8,.2,1) .2s both}
.atp-home .regbar{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;color:#fff;box-shadow:none!important}
.atp-home .regbar .reg-stat b{color:#fff!important}
.atp-home .regbar .reg-stat i,.atp-home .regbar .reg-note,.atp-home .regbar .reg-sub{color:rgba(255,255,255,.7)!important}
.atp-home .regbar .reg-live{color:#C9B8FF!important}
.atp-home .regbar .reg-stat{border-color:rgba(255,255,255,.1)!important}
/* 404 in the same style */
.atp-404 .at404{position:relative;isolation:isolate;background:radial-gradient(45% 70% at 95% 0%,rgba(255,61,139,.28),transparent 60%),radial-gradient(55% 80% at 0% 0%,rgba(91,46,255,.55),transparent 62%),#140C33!important;color:#fff}
.atp-404 .at404 h1{color:#fff!important;font-family:"Bricolage Grotesque",system-ui,sans-serif!important;animation:dhUp .6s ease .05s both}
.atp-404 .at404 .code{color:#FF7EB3!important}
.atp-404 .at404 .lede,.atp-404 .at404 .slug,.atp-404 .at404 .links h2{color:rgba(255,255,255,.75)!important}
.atp-404 .at404 .slug{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important}
.atp-404 .at404 .slug b{color:#fff!important}
.atp-404 .at404 .btn-primary{background:#fff!important;color:#4A22E0!important;border-color:#fff!important}
.atp-404 .at404 .btn-ghost{background:transparent!important;border-color:rgba(255,255,255,.3)!important;color:#fff!important}
.atp-404 .at404 .links{border-color:rgba(255,255,255,.12)!important}
.atp-404 .at404 .links a{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;color:#E6E0FF!important}
.atp-404 .at404 .links a:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
.mf-amt{font:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;background:none!important;padding:0!important;margin:0!important;border:0!important;white-space:nowrap}
.atp-404 .at404,.atp-404 .at404 .btn,.atp-404 .at404 .links a{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}
.atp-pricing .plan.enterprise li svg{color:#C9B8FF!important}
.atp-pricing .plan.enterprise li svg,.atp-pricing .plan.enterprise li .tick{background:rgba(201,184,255,.16)!important;border-radius:50%}
.atp-pricing .plan.enterprise hr,.atp-pricing .plan.enterprise ul{border-color:rgba(255,255,255,.14)!important}
/* CTA certificate QR: pages that style their own demo QR (home, verify) must not repaint this one */
.atcta-cert .qr svg rect{fill:#fff!important}
.atcta-cert .qr svg path{fill:#140C33!important}
.atcta-cert .qr svg{background:#fff!important}