/* Create account in two steps (Oct 2026): two short centered bars, in the house blue only (the step words are for
   screen readers). Step 1: about your company. Step 2: email and password. Google's "Almost done" shows step 2.
   Loaded by products.html. */
.su-steps{display:flex;align-items:center;justify-content:center;margin:0 0 .9rem}
/* The step words are read out by screen readers only; the bars show the step on screen. */
.su-steps-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.su-steps-bar{display:inline-flex;gap:.3rem;flex:none}
.su-steps-bar i{display:block;width:1.75rem;height:.3rem;border-radius:999px;background:#e1e7f5;transition:background-color .3s ease}
.su-steps[data-step="1"] .su-steps-bar i:first-child,
.su-steps[data-step="2"] .su-steps-bar i{background:var(--accent,#3552c8)}
.su-step[hidden]{display:none!important}
.su-step.is-entering{animation:su-step-in .26s ease-out}
@keyframes su-step-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.su-step.is-entering{animation:none}.su-steps-bar i{transition:none}}
#signup-next-btn svg{margin-left:.1rem}

/* "This email already has an account" (Oct 2026): the window's message box in calm blue, with the way in. */
.auth-error.is-info,.page-products .auth-error.is-info{background:#eef2fc;border-color:#cdd8f6;color:#1f2a52}
.auth-error.is-info a{color:var(--accent,#3552c8);font-weight:600;white-space:nowrap}
.auth-error.is-info a:hover{text-decoration:underline}

/* Create account waits for the "I agree" tick (Oct 2026): pale, and pressing it does nothing until the box is ticked.
   Hovering shows the reason in the browser's own tooltip (title). js/main.js agreeGateSync() sets aria-disabled (not
   disabled), so the button can still be reached with Tab and read out with that reason. */
.auth-submit{transition:background-color .2s ease,color .2s ease,transform .15s ease}
.auth-submit[aria-disabled="true"],
.auth-submit[aria-disabled="true"]:hover{background:#e1e7f5;color:#56679f;cursor:not-allowed}
.auth-submit[aria-disabled="true"]:active{transform:none}

/* Password rules: a grey dot until a rule is met, then a check mark in the same space (no jump while typing). */
.su-rules li::before{width:.7rem;height:.7rem;border-radius:0;background:radial-gradient(circle,currentColor 0 .22rem,transparent .24rem)}
.su-rules li.is-met::before{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:su-tick .18s ease-out}
@keyframes su-tick{from{transform:scale(.4)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.auth-submit{transition:none}.su-rules li.is-met::before{animation:none}}
.su-back{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.3rem .7rem}
.su-back::before{content:"";width:.42rem;height:.42rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}