/*
 * Sign up, log in, forgot password, verify email — site/assets/auth-ui.css.
 * These pages share their component classes (sc-*) with the customer dashboard, so this file is loaded ONLY on the auth pages: it re-maps
 * the tokens to the public site's six colours and gives the controls the same shape (pill buttons, rounded fields, light titles).
 */
body.sc-root { background: #fdfcfc; }
.sc-auth-page {
  --sc-background: #fdfcfc; --sc-foreground: #0c0a09; --sc-card: #fdfcfc; --sc-card-foreground: #0c0a09;
  --sc-primary: #0c0a09; --sc-primary-foreground: #fdfcfc; --sc-secondary: #f5f3f1; --sc-secondary-foreground: #0c0a09;
  --sc-muted: #f5f3f1; --sc-muted-foreground: #5c5854; --sc-accent: #f5f3f1; --sc-accent-foreground: #0c0a09;
  --sc-destructive: #b4472b; --sc-destructive-foreground: #fdfcfc; --sc-border: #e7e3df; --sc-input: #e7e3df; --sc-ring: #0c0a09;
  --sc-success: #0c0a09; --sc-success-foreground: #fdfcfc; --sc-good: #0c0a09; --sc-radius: 1.25rem;
  background: #fdfcfc; color: #0c0a09; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
/* card column: 380px in the theme, 15% wider here (380 x 1.15 = 437); the terms text below sits in the same column and re-wraps with it */
.sc-auth-page .sc-auth-wrap { max-width: 437px; }
.sc-auth-page .sc-card { box-shadow: none; border-radius: 28px; }
.sc-auth-page .sc-card-header { padding: 32px 32px 0; } .sc-auth-page .sc-card-content { padding: 22px 32px 30px; } .sc-auth-page .sc-card-footer { padding: 0 32px 30px; }
.sc-auth-page .sc-card-title { font-size: 1.75rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 8px; }
.sc-auth-page .sc-card-description { font-size: .95rem; line-height: 1.6; }
.sc-auth-page .sc-label { font-size: .84rem; font-weight: 500; }
.sc-auth-page .sc-input, .sc-auth-page .sc-select { height: 46px; border-radius: 14px; font-size: .96rem; }
.sc-auth-page .sc-input:focus, .sc-auth-page .sc-select:focus { outline: 2px solid #0c0a09; outline-offset: 1px; border-color: transparent; box-shadow: none; }
.sc-auth-page .sc-btn { height: var(--btn-h, 41px); border-radius: 999px; font-size: .95rem; font-weight: 500; letter-spacing: -.005em; }
.sc-auth-page .sc-btn-primary:hover { opacity: 1; background: #5c5854; }
.sc-auth-page .sc-btn-outline { background: transparent; border-color: #e7e3df; }
.sc-auth-page .sc-btn-outline:hover { background: #f5f3f1; }
.sc-auth-page .sc-link, .sc-auth-page a.sc-link { color: #0c0a09; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #e7e3df; }
.sc-auth-page .sc-link:hover { text-decoration-color: #0c0a09; }
.sc-auth-page .sc-alert { border-radius: 14px; font-size: .9rem; }
.sc-auth-page .sc-alert-destructive { background: #f5f3f1; border-color: #b4472b; color: #b4472b; }
.sc-auth-page .sc-alert-success { background: #f5f3f1; border-color: #0c0a09; color: #0c0a09; }
.sc-auth-page .sc-auth-footer-text, .sc-auth-page .sc-auth-footer-text a { color: #5c5854; font-size: .84rem; }
.sc-auth-page .sc-auth-footer-text { text-wrap: balance; }
.sc-auth-page .sc-auth-footer-text a { color: #0c0a09; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #e7e3df; }
@media (max-width: 520px) { .sc-auth-page .sc-card-header { padding: 26px 22px 0; } .sc-auth-page .sc-card-content { padding: 18px 22px 24px; } }

/* the theme leaves buttons and fields in the browser's default typeface */
.sc-auth-page button, .sc-auth-page input, .sc-auth-page select, .sc-auth-page textarea, .sc-auth-page a { font-family: inherit; }
.sc-auth-page h1.sc-card-title { margin: 0 0 8px; }

/* signup: what the visitor gets (conversion copy under the card) */
.sc-auth-page .sc-auth-perks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; justify-content: center; }
.sc-auth-page .sc-auth-perks li { position: relative; padding-left: 22px; font-size: .88rem; color: #5c5854; }
.sc-auth-page .sc-auth-perks li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 6px; height: 10px; border: solid #0c0a09; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-30%); }