/* Signup page: a light, standalone layout with the product floating beside the form. */
.signup-page{margin:0;background:#f6f4ff;color:var(--ink,#222);overflow-x:hidden}
.sg-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#f8f6ff 0%,#f1eeff 100%)}
.sg-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.sg-bg .b1{width:44rem;height:44rem;left:-14rem;top:-16rem;background:radial-gradient(circle,#b9a6ff 0%,rgba(185,166,255,0) 68%)}
.sg-bg .b2{width:38rem;height:38rem;right:-10rem;top:8%;background:radial-gradient(circle,#9fdcf6 0%,rgba(159,220,246,0) 68%)}
.sg-bg .b3{width:46rem;height:46rem;left:30%;bottom:-24rem;background:radial-gradient(circle,#d9c9ff 0%,rgba(217,201,255,0) 68%)}
.sg-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:78rem;margin:0 auto;padding:1.4rem clamp(1.2rem,4vw,3rem) 0}
.sg-logo img{display:block;height:auto}
.sg-login{margin:0;font-size:.92rem;color:var(--graphite,#5b5773)}
.sg-login a{color:var(--violet-deep,#3d22a3);font-weight:600;text-decoration:none}
.sg-login a:hover{text-decoration:underline}
.sg{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);column-gap:clamp(2rem,4vw,4.5rem);max-width:78rem;margin:0 auto;padding:1.4rem clamp(1.2rem,4vw,3rem) 0;align-items:center}
.sg-intro{min-width:0}
.sg-kicker{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;font:600 .72rem/1 var(--mono,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep,#3d22a3)}
.sg-kicker::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#3ec98a;box-shadow:0 0 0 4px rgba(62,201,138,.22)}
.sg-title{margin:0;max-width:17ch;font:600 clamp(2.1rem,3.7vw,3.2rem)/1.1 var(--display,inherit);letter-spacing:-.015em;color:var(--plum,#120e35)}
.sg-title .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-lead{margin:1.1rem 0 0;max-width:38rem;font-size:1.05rem;line-height:1.6;color:var(--graphite,#5b5773)}
/* the product, floating */
.sg-stage{--px:0;--py:0;position:relative;height:25rem;margin-top:2.4rem;perspective:1600px}
.sg-float{position:absolute;transition:transform .25s ease-out}
.sg-float .shot{margin:0;animation:sgfloat 9s ease-in-out infinite}
.sg-float .scr-win{box-shadow:0 40px 70px -34px rgba(34,18,110,.55),0 10px 24px -14px rgba(34,18,110,.3);border-color:rgba(255,255,255,.8)}
.sg-back{left:0;top:0;width:min(34rem,92%);transform:rotateY(-9deg) rotateX(3deg) translate(calc(var(--px) * -10px),calc(var(--py) * -8px));transform-origin:left center}
.sg-front{right:0;bottom:0;width:min(25.5rem,78%);z-index:2;transform:rotateY(-5deg) translate(calc(var(--px) * 16px),calc(var(--py) * 12px));transform-origin:right center}
.sg-front .shot{animation-delay:-4s;animation-duration:10s}
@keyframes sgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* the form */
.sg-formwrap{display:flex;justify-content:center;min-width:0}
.su-card{position:relative;width:100%;max-width:27rem;padding:2.2rem clamp(1.4rem,3vw,2.3rem) 2rem;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid rgba(229,225,243,.9);box-shadow:0 40px 80px -40px rgba(61,34,163,.45),0 2px 0 rgba(255,255,255,.8) inset;backdrop-filter:blur(6px);text-align:center}
.su-card::before{content:"";position:absolute;left:1.6rem;right:1.6rem;top:0;height:4px;border-radius:0 0 6px 6px;background:var(--grad-cool,linear-gradient(120deg,#4f2fb8,#9b7cff))}
.su-card h1{margin:0;font:600 clamp(1.5rem,2.3vw,1.85rem)/1.2 var(--display,inherit);color:var(--plum,#120e35)}
.su-note{margin:.5rem 0 1.5rem;font-size:.9rem;color:var(--graphite,#5b5773)}
.su-with{margin:0 0 .75rem;font-size:.9rem;font-weight:500}
.su-providers{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.su-prov{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1rem;border:1.5px solid #d9d3f3;border-radius:10px;background:#fff;font:600 .93rem/1 var(--body,inherit);color:#2b2940;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.su-prov:hover{border-color:var(--violet-bright,#6b4de6);box-shadow:0 8px 18px -10px rgba(61,34,163,.45);transform:translateY(-1px)}
.su-prov:focus-visible,.su-submit:focus-visible,.su-field input:focus-visible,.su-check input:focus-visible{outline:3px solid rgba(107,77,230,.45);outline-offset:2px}
.su-prov svg{width:1.25rem;height:1.25rem;flex:none}
.su-or{position:relative;margin:1.3rem 0 .9rem;text-align:center;font-size:.85rem;color:var(--graphite,#5b5773)}
.su-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hairline,#e5e1f3)}
.su-or span{position:relative;padding:0 .8rem;background:#fff}
.su-form{text-align:left}
.su-field{display:block}
.su-field input{width:100%;box-sizing:border-box;padding:.85rem .95rem;border:1.5px solid #ddd8f1;border-radius:10px;background:#fbfaff;font:500 .95rem/1.2 var(--body,inherit);color:var(--ink,#222);transition:border-color .15s,background .15s}
.su-field input:hover{border-color:#c9c0ee}
.su-field input:focus{border-color:var(--violet-bright,#6b4de6);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(107,77,230,.14)}
.su-field input::placeholder{color:#8a87a3}
.su-field input[aria-invalid="true"]{border-color:#d6204f;box-shadow:0 0 0 4px rgba(214,32,79,.1)}
.su-check{display:flex;align-items:center;gap:.6rem;margin:1.1rem 0 0;font-size:.88rem;cursor:pointer}
.su-check input{width:1.05rem;height:1.05rem;margin:0;accent-color:var(--violet-deep,#3d22a3)}
.su-check a{color:var(--violet-deep,#3d22a3);text-decoration:none;font-weight:600}
.su-check a:hover{text-decoration:underline}
.su-err{margin:.4rem 0 0;font-size:.8rem;color:#d6204f}
.su-submit{display:block;width:100%;margin-top:1.3rem;padding:1rem 1.2rem;border:0;border-radius:99px;background:linear-gradient(120deg,var(--violet-deep,#3d22a3),var(--violet-bright,#6b4de6));font:600 .98rem/1 var(--body,inherit);color:#fff;cursor:pointer;box-shadow:0 14px 28px -12px rgba(61,34,163,.7);transition:transform .15s,box-shadow .15s}
.su-submit:hover{transform:translateY(-1px);box-shadow:0 18px 32px -12px rgba(61,34,163,.75)}
/* the 14 day track */
.sg-track{grid-column:1/-1;position:relative;list-style:none;margin:2.6rem 0 0;padding:0 0 3rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.sg-track::before,.sg-track::after{content:"";position:absolute;left:0;top:.5rem;height:4px;margin-top:-2px;border-radius:4px}
.sg-track::before{right:0;background:#e0daf6}
.sg-track::after{width:100%;background:linear-gradient(90deg,#3ec98a,var(--violet-bright,#6b4de6) 55%,#f4a62a);transform-origin:left center;animation:sgfill 2.6s cubic-bezier(.3,.7,.2,1) .4s both}
@keyframes sgfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sg-node{position:relative;padding:1.7rem 1rem 0 0}
.sg-dot{position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:50%;background:#fff;border:3px solid var(--violet-bright,#6b4de6);box-shadow:0 0 0 5px rgba(107,77,230,.14);animation:sgpop .5s ease-out both}
.sg-node-1 .sg-dot{border-color:#3ec98a;box-shadow:0 0 0 5px rgba(62,201,138,.2);animation-delay:.3s}
.sg-node-2 .sg-dot{animation-delay:1.4s}
.sg-node-3 .sg-dot{border-color:#f4a62a;box-shadow:0 0 0 5px rgba(244,166,42,.2);animation-delay:2.5s}
@keyframes sgpop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.sg-day{display:block;margin-bottom:.35rem;font:600 .72rem/1 var(--mono,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep,#3d22a3)}
.sg-node h3{margin:0 0 .3rem;font:600 1.02rem/1.3 var(--display,inherit);color:var(--plum,#120e35)}
.sg-node p{margin:0;font-size:.9rem;line-height:1.5;color:var(--graphite,#5b5773);max-width:22rem}
@media(max-width:1000px){
 .sg{grid-template-columns:1fr;row-gap:1.8rem;align-items:start}
 .sg-stage{display:none}
 .sg-title{max-width:none}
 .sg-track{grid-template-columns:1fr;margin-top:1rem;padding-bottom:2.4rem;gap:1.6rem}
 .sg-track::before,.sg-track::after{display:none}
 .sg-node{padding:0 0 0 2rem}
 .sg-node::before{content:"";position:absolute;left:.45rem;top:.9rem;bottom:-1.9rem;width:3px;border-radius:3px;background:#e0daf6}
 .sg-node:last-child::before{display:none}
 .sg-dot{top:.1rem}
}
@media(max-width:420px){.su-providers{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sg-float .shot,.sg-track::after,.sg-dot{animation:none}.sg-float{transition:none}.su-submit,.su-prov{transition:none}}
.sg-stage{height:22rem;margin-top:2rem}
.sg-back .scr-win{max-height:17.5rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.sg-track{margin-top:1.6rem}
.sg-front{transform:translate(calc(var(--px) * 16px),calc(var(--py) * 12px))}
.sg-login a{white-space:nowrap}
@media(max-width:560px){.sg-login-q{display:none}.sg-login a{padding:.5rem .9rem;border:1.5px solid #d9d3f3;border-radius:99px;background:rgba(255,255,255,.7)}}
.sg-stage{height:25rem;margin-top:2.2rem}
.sg-back{width:min(38rem,100%)}
.sg-back .scr-win{max-height:23rem}

/* ---- revision: form on the left, small dashboard on the right, platform page blueprint background ---- */
.sg-bg{background:
 radial-gradient(60rem 36rem at 78% 0%,color-mix(in srgb,var(--violet-bright,#6b4de6) 26%,transparent),transparent 70%),
 radial-gradient(40rem 30rem at 0% 100%,color-mix(in srgb,var(--ic-cyan,#16b6d8) 12%,transparent),transparent 70%),
 #F3F5FA}
.sg-bg .sx-grid{position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(rgba(79,47,184,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(79,47,184,.14) 1px,transparent 1px);
 background-size:44px 44px;opacity:.6;
 -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%)}
.sg{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;padding-top:2.2rem}
.sg-left{min-width:0}
.sg-title{max-width:none;font-size:clamp(2.2rem,3.8vw,3.1rem)}
.sg-lead{margin:.7rem 0 0;font-size:1.1rem;max-width:none}
.sg-left .su-card{max-width:38rem;margin-top:1.9rem;padding:2.1rem clamp(1.4rem,3vw,2.4rem) 2rem;text-align:left}
.sg-left .su-with{margin-bottom:.8rem}
.sg-stage{height:24rem;margin:0;position:relative}
.sg-back{left:0;top:50%;width:34rem;margin-top:-8.5rem;transform-origin:left center;transform:scale(.76) rotateY(-9deg) rotateX(3deg) translate(calc(var(--px) * -10px),calc(var(--py) * -8px))}
.sg-back .scr-win{max-height:22rem}
@media(max-width:1250px){.sg-back{transform:scale(.64) rotateY(-9deg) rotateX(3deg) translate(calc(var(--px) * -10px),calc(var(--py) * -8px))}}
@media(max-width:1000px){.sg{grid-template-columns:1fr;padding-top:1.4rem}.sg-left .su-card{max-width:none}}
.sg{min-height:calc(100vh - 5.2rem);align-content:center;padding-top:1rem}
.sg-track{margin-top:3.4rem;padding-bottom:2.2rem}
.sg-back{transform:scale(.8) rotateY(-9deg) rotateX(3deg) translate(calc(var(--px) * -10px),calc(var(--py) * -8px))}
@media(max-width:1250px){.sg-back{transform:scale(.66) rotateY(-9deg) rotateX(3deg) translate(calc(var(--px) * -10px),calc(var(--py) * -8px))}}
@media(max-width:1000px){.sg{min-height:0;align-content:start}.sg-track{margin-top:1rem}}

/* The embedded signup wizard (Onboarding by ASJ plugin). Its provider buttons use images from the old uploads folder that no longer exist, so they are drawn here instead. */
.su-wizard .sso-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.75rem;padding:0 1.1rem;border:1px solid var(--hairline,#ddd9ee);border-radius:10px;background:#fff;color:var(--graphite,#1b1733);font-weight:600;text-decoration:none;cursor:pointer}
.su-wizard .sso-btn img{display:none}
.su-wizard .sso-btn::before{content:"";width:1.2rem;height:1.2rem;background:center/contain no-repeat}
.su-wizard .g-btn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.5 12.2c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.5c2.1-1.9 3.3-4.7 3.3-8z'/%3E%3Cpath fill='%2334A853' d='M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .7-2.2 1.1-3.8 1.1-2.9 0-5.4-2-6.3-4.6H2.1v2.8A11 11 0 0 0 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.7 14.1a6.6 6.6 0 0 1 0-4.2V7.1H2.1a11 11 0 0 0 0 9.8l3.6-2.8z'/%3E%3Cpath fill='%23EA4335' d='M12 5.4c1.6 0 3.1.6 4.2 1.6l3.1-3.1A11 11 0 0 0 2.1 7.1l3.6 2.8C6.6 7.4 9.1 5.4 12 5.4z'/%3E%3C/svg%3E")}
.su-wizard .m-btn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F25022' d='M2 2h9.5v9.5H2z'/%3E%3Cpath fill='%237FBA00' d='M12.5 2H22v9.5h-9.5z'/%3E%3Cpath fill='%2300A4EF' d='M2 12.5h9.5V22H2z'/%3E%3Cpath fill='%23FFB900' d='M12.5 12.5H22V22h-9.5z'/%3E%3C/svg%3E")}
.su-wizard .g-btn::after{content:"Google"}
.su-wizard .m-btn::after{content:"Microsoft"}
.su-wizard .g-btn,.su-wizard .m-btn{margin:.25rem .35rem}
/* From step 2 the plugin wraps itself in a second card (padding, margin, shadow, all !important) inside ours, which leaves about 200px for the fields on a phone. */
@media(max-width:1000px){.su-wizard .onboarding-container,.su-wizard .onboarding-container.onboarding-card-layout{margin:0!important;padding:0!important;box-shadow:none!important;background:transparent!important}}

/* Signup embed: the wizard alone at the top of the page, for the frame on the paid landing page. */
.signup-embed{background:#fff}
.signup-embed .se{display:flex;justify-content:center;padding:1rem}
.signup-embed .su-card{max-width:34rem;text-align:left;box-shadow:none}