/* A welcoming business onboarding flow, scoped to the signup page. */
.auth-signup { --brand: #087f55; --brand-dark: #05613f; --brand-light: #e8f5ee; --ink: #173b31; --muted: #657b72; --bg: #f4f5ef; }
.auth-signup .su-shell { padding: 48px 24px; }
.auth-signup .su-card { max-width: 1080px; grid-template-columns: 40% 60%; border: 1px solid #e3e8df; border-radius: 28px; box-shadow: 0 24px 70px -36px #254b3a66; }
.auth-signup .su-brand { padding: 40px 36px; background: linear-gradient(155deg, #113f33, #086044 75%, #11724e); }
.auth-signup .su-brand::before { background: #ffffff05; width: 360px; height: 360px; }
.auth-signup .su-brand::after { background: #ffffff06; }
.auth-signup .brand-logo { font-size: 22px; }
.auth-signup .su-brand .brand-body { margin-top: 46px; }
.welcome-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #c8e4ce; margin-bottom: 16px; }
.auth-signup .su-brand h1 { font-size: 38px; line-height: 1.15; letter-spacing: -1.4px; }
.auth-signup .su-brand h1 span { color: #d0ecc5; font-weight: 500; }
.auth-signup .su-brand p.lead { font-size: 14px; line-height: 1.75; color: #deeee5; margin-top: 18px; }
.welcome-visual { position: relative; margin: 32px auto 34px; width: 232px; padding-top: 14px; }
.shop-roof { display: flex; height: 35px; position: relative; z-index: 2; border-radius: 10px 10px 0 0; overflow: hidden; transform: perspective(180px) rotateX(10deg); }
.shop-roof span { width: 20%; background: #d9e9b6; border-radius: 0 0 8px 8px; }
.shop-roof span:nth-child(even) { background: #86b590; }
.shop-front { position: relative; margin: -4px 10px 0; height: 118px; background: #f6f5e7; border-radius: 0 0 10px 10px; padding: 18px; box-shadow: 0 12px 28px #002a2555; }
.shop-name { color: #285740; font-weight: 700; font-size: 12px; margin-bottom: 14px; }
.shop-window { width: 103px; height: 48px; border: 4px solid #adc5a0; background: #d9e7dd; display: flex; align-items: flex-end; gap: 5px; padding: 5px; }
.shop-window span { width: 22px; height: 19px; background: #d8aa72; border-radius: 3px 3px 0 0; }
.shop-window span:nth-child(2) { height: 28px; background: #83ab88; }
.shop-door { position: absolute; right: 18px; bottom: 0; width: 43px; height: 66px; border: 4px solid #adc5a0; border-bottom: 0; background: #d9e7dd; }
.welcome-note { background: #fff; color: #285740; font-size: 11px; font-weight: 600; padding: 12px; border-radius: 10px; position: relative; margin: -8px -10px 0 22px; box-shadow: 0 8px 22px #002a2525; }
.welcome-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #37a66c; margin-right: 5px; }
.auth-signup .su-feats li { font-size: 12px; line-height: 1.5; margin-bottom: 14px; gap: 10px; }
.auth-signup .brand-foot { font-size: 11px; opacity: .65; margin-top: 28px; }
.auth-signup .su-form { padding: 42px 46px; background: #fffefa; }
.onboarding-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.onboarding-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: #087f55; }
#step-count { color: #657b72; font-size: 11px; white-space: nowrap; }
.auth-signup .head h2 { font-size: 30px; letter-spacing: -.9px; line-height: 1.2; }
.auth-signup .head p { line-height: 1.6; margin-top: 10px; }
.auth-signup .stepper { margin-bottom: 28px; padding: 18px 12px; border: 1px solid #e4eade; border-radius: 14px; background: #f5f7f0; }
.auth-signup .stepper .st { font-size: 11px; font-weight: 600; color: #7b8a7e; }
.auth-signup .stepper .num { width: 30px; height: 30px; font-size: 12px; margin-bottom: 8px; background: #e5ebdf; }
.auth-signup .stepper .st.active { color: #087f55; }
.step-intro { margin-bottom: 24px; }
.step-intro h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.4px; margin: 0 0 8px; }
.step-intro p { font-size: 13px; line-height: 1.7; color: #657b72; margin: 0; }
.auth-signup .inp { background: #fff; border-color: #dce4dc; border-radius: 10px; }
.auth-signup .fg { margin-bottom: 20px; }
.auth-signup .hint { font-size: 12px; line-height: 1.6; margin-top: 9px; }
.auth-signup .btn-primary { border-radius: 10px; font-size: 14px; box-shadow: 0 6px 14px -8px #087f5566; }
.auth-signup .foot-note { padding-top: 24px; margin-top: 28px; border-top: 1px solid #e8ece3; font-size: 12px; }
.auth-signup .cat-card { background: #fff; border-radius: 10px; }
.auth-signup .cat-card.selected { background: #e8f5ee; }
@media (max-width: 860px) {
    .auth-signup .su-shell { padding: 24px 16px; }
    .auth-signup .su-card { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .auth-signup .su-brand { padding: 26px 28px; }
    .auth-signup .su-brand .brand-body { margin-top: 22px; }
    .auth-signup .su-brand h1 { font-size: 30px; letter-spacing: -.8px; }
    .auth-signup .su-brand p.lead { margin: 12px 0 0; max-width: 420px; font-size: 13px; }
    .welcome-visual { display: none; }
    .welcome-eyebrow { font-size: 9px; margin-bottom: 10px; }
    .auth-signup .su-form { padding: 30px 28px; }
}
@media (max-width: 480px) {
    .auth-signup .su-shell { padding: 0; }
    .auth-signup .su-card { border: 0; border-radius: 0; }
    .auth-signup .su-brand { padding: 24px 22px; }
    .auth-signup .brand-logo { font-size: 19px; }
    .auth-signup .su-brand h1 { font-size: 28px; }
    .auth-signup .su-form { padding: 28px 22px; }
    .auth-signup .head h2 { font-size: 26px; }
    .auth-signup .head p { font-size: 13px; }
    .auth-signup .stepper { padding: 16px 6px; margin-bottom: 24px; }
    .auth-signup .stepper .st { font-size: 10px; }
    .auth-signup .stepper .st .num { margin-bottom: 8px; }
    .step-intro h3 { font-size: 19px; }
    .auth-signup .row-between { font-size: 12px; }
    .onboarding-meta { gap: 8px; }
    .onboarding-kicker { letter-spacing: 1px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-signup .pane { animation: none; }
    .auth-signup *, .auth-signup *::before, .auth-signup *::after { scroll-behavior: auto !important; transition: none !important; }
}