/* A focused website shell for registration. Scoped so billing invitations retain their layout.
   Fonts are served locally to preserve registration's self-only font/style CSP. */
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('../fonts/manrope/Manrope-Variable.ttf') format('truetype');
}
@font-face {
    font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url('../fonts/sora/Sora-Variable.ttf') format('truetype');
}
.registration-modern {
    --qh-font: 'Manrope', sans-serif;
    --qh-ink: #11121b;
    --qh-muted: #5f6372;
    --qh-soft: #f5f6fa;
    --qh-border: #dcdfe7;
    --qh-blue: #007cbd;
    --qh-blue-dark: #006ca6;
    --signup-focus: #007cbd;
    --signup-focus-soft: #eaf4fa;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: var(--qh-font);
    -webkit-font-smoothing: antialiased;
}
.registration-modern h1, .registration-modern h2,
.registration-modern .signup-price strong, .registration-modern .signup-total dd {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
}
.registration-modern .signup-header {
    width: 100%; max-width: none; padding: 0; margin: 0;
    background: #f3f4f7; border-bottom: 1px solid var(--qh-border);
}
.registration-modern .signup-header-inner,
.registration-modern .signup-footer-inner {
    width: min(100% - 64px, 1240px); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.registration-modern .signup-header-inner { min-height: 76px; }
.registration-modern .signup-brand { flex-shrink: 0; }
.registration-modern .signup-brand img { width: 130px; }
.registration-modern .signup-header-actions { display: flex; align-items: center; gap: 28px; }
.registration-modern .signup-help,
.registration-modern .signup-signin {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    color: var(--qh-ink); font-size: 14px; font-weight: 700; text-decoration: none;
}
.registration-modern .signup-help { color: var(--qh-muted); font-weight: 500; }
.registration-modern .signup-signin span { color: var(--qh-blue); }
.registration-modern .signup-help:hover,
.registration-modern .signup-signin:hover { color: var(--qh-blue); text-decoration: none; }
.registration-modern .signup-shell {
    width: min(100% - 64px, 1080px); max-width: none;
    padding: 36px 0 64px; margin: 0 auto; flex: 1 0 auto;
}
.registration-modern .signup-progress { max-width: 640px; margin: 0 auto 56px; }
.registration-modern .signup-progress li { font-size: 13px; font-weight: 500; gap: 10px; }
.registration-modern .signup-progress li > span[aria-hidden] { width: 30px; height: 30px; background: #fff; border-color: var(--qh-border); }
.registration-modern .signup-progress li:not(:last-child)::after { margin-inline: 16px; background: var(--qh-border); }
.registration-modern .signup-progress li.is-current { color: var(--qh-blue); font-weight: 700; }
.registration-modern .signup-progress li.is-current > span[aria-hidden] { color: #fff; background: var(--qh-blue); border-color: var(--qh-blue); }
.registration-modern .signup-progress li.is-done > span[aria-hidden] { color: var(--qh-blue); background: var(--signup-focus-soft); border-color: transparent; }
.registration-modern .signup-title { max-width: 720px; margin-bottom: 32px; }
.registration-modern .signup-title h1,
.registration-modern .signup-finish h1 { font-size: clamp(30px, 3.25vw, 42px); line-height: 1.2; letter-spacing: -.045em; margin-bottom: 20px; }
.registration-modern .signup-title p { max-width: 620px; font-size: 16px; line-height: 1.8; color: var(--qh-muted); }
.registration-modern .signup-eyebrow,
.registration-modern .signup-title .signup-eyebrow {
    color: var(--qh-blue); font-size: 12px; line-height: 1.6;
    font-weight: 800; text-transform: uppercase; letter-spacing: .055em; margin-bottom: 16px;
}
.registration-modern .signup-card { border-radius: 12px; border-color: var(--qh-border); padding: 32px; box-shadow: none; }
.registration-modern .signup-button {
    min-height: 50px; padding: 13px 22px; border-radius: 7px;
    background: var(--qh-blue); border-color: var(--qh-blue); color: #fff; font-weight: 800;
}
.registration-modern .signup-button:hover { background: var(--qh-blue-dark); border-color: var(--qh-blue-dark); color: #fff; }
.registration-modern .signup-button-secondary { background: var(--qh-soft); border-color: var(--qh-border); color: var(--qh-ink); }
.registration-modern .signup-button-secondary:hover { background: var(--qh-soft); border-color: var(--qh-blue); color: var(--qh-ink); }
.registration-modern .signup-text-button { color: var(--qh-ink); font-weight: 700; }
.registration-modern .signup-text-button:hover { color: var(--qh-blue); text-decoration: none; }
.registration-modern .signup-text-button span[aria-hidden] { color: var(--qh-blue); }
.registration-modern .signup-google { background: #fff; border-color: #aeb4bf; color: #1f1f1f; font-weight: 500; }
.registration-modern .signup-fields { gap: 22px 20px; }
.registration-modern .signup-fields label { font-weight: 700; font-size: 13px; gap: 8px; }
.registration-modern .signup-fields input,
.registration-modern .signup-fields select { border-radius: 7px; border-color: #cbd0dc; }
.registration-modern .signup-fields input:focus,
.registration-modern .signup-fields select:focus { border-color: var(--signup-focus); }
.registration-modern .signup-fields [aria-invalid='true'] { border-color: #c43d43; }
.registration-modern .signup-fields [aria-invalid='true']:focus { border-color: #c43d43; }
.registration-modern .signup-code-wrapper .signup-code { border-width: 1px; background: #fff; }
.registration-modern .signup-divider { margin-block: 26px; }
.registration-modern .signup-title-centered { max-width: 600px; }

/* Keep each step centered, with single-column fields by default. */
.registration-modern .signup-title .signup-eyebrow { margin-inline: auto; }
.registration-modern .signup-step-layout { max-width: 620px; margin-inline: auto; }
.registration-modern .signup-step-layout > .signup-title { text-align: center; margin: 0 0 28px; }
.registration-modern .signup-step-layout > .signup-title p { margin-inline: auto; }
.registration-modern .signup-step-layout > .signup-account { width: 100%; max-width: none; margin: 0; background: var(--qh-soft); }
.registration-modern .signup-step-layout .signup-fields { grid-template-columns: minmax(0, 1fr); }
.registration-modern.signup-step-account .signup-step-layout { max-width: 520px; }
.registration-modern.signup-step-practice .signup-form-section .signup-field { gap: 8px; }
@media (min-width: 621px) {
    .registration-modern.signup-step-practice .signup-form-section .signup-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.registration-modern .signup-plan-controls {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 22px 26px; margin: 0 0 28px; border: 1px solid var(--qh-border);
    border-radius: 12px; background: var(--qh-soft);
}
.registration-modern .signup-currency-picker { justify-content: flex-start; gap: 8px 12px; max-width: 560px; margin: 0; }
.registration-modern .signup-currency-picker label { color: var(--qh-ink); font-weight: 600; }
.registration-modern .signup-currency-picker select { border-radius: 7px; max-width: 220px; }
.registration-modern .signup-currency-picker p { text-align: left; color: var(--qh-muted); }
.registration-modern .signup-billing-toggle { margin: 0; flex-shrink: 0; }
.registration-modern .signup-billing-toggle [role=group] { border-radius: 8px; border-color: var(--qh-border); padding: 4px; }
.registration-modern .signup-billing-toggle button { border-radius: 5px; padding: 11px 15px; font-size: 14px; font-weight: 700; }
.registration-modern .signup-billing-toggle button[aria-pressed=true] { background: var(--qh-blue); }
.registration-modern .signup-billing-toggle button[aria-pressed=true] span { color: #fff; }
.registration-modern .signup-billing-toggle span { color: #26704c; font-size: 11px; }
.registration-modern .signup-plans { gap: 24px; }
.registration-modern .signup-plan { padding: 32px; }
.registration-modern .signup-plan-professional { border-color: #96bcd4; background: #f9fcfe; }
.registration-modern .signup-plan h2 { font-size: 24px; }
.registration-modern .signup-plan > div > p { min-height: 0; font-size: 14px; line-height: 1.7; }
.registration-modern .signup-price { margin-top: 26px; }
.registration-modern .signup-price strong { font-size: 38px; line-height: 1.2; letter-spacing: -.04em; }
.registration-modern .signup-plan ul { padding-top: 26px; border-top: 1px solid var(--qh-border); margin-top: 26px; }
.registration-modern .signup-plan li { padding-bottom: 13px; line-height: 1.65; }
.registration-modern .signup-plan li::before { color: var(--qh-blue); }
.registration-modern .signup-launch-notice { max-width: none; margin: 0 0 28px; padding: 12px 20px; border: 1px solid #d9e8f1; border-radius: 8px; background: #f3f9fc; }
.registration-modern .signup-launch-notice strong, .registration-modern .signup-launch-notice span { display: inline; }
.registration-modern .signup-launch-notice span { margin-left: 8px; }
.registration-modern.signup-step-plan .signup-shell { padding-top: 24px; }
.registration-modern.signup-step-plan .signup-launch-notice { margin-bottom: 20px; }
.registration-modern.signup-step-plan .signup-progress { margin-bottom: 24px; }
.registration-modern.signup-step-plan .signup-title { margin-bottom: 24px; }
.registration-modern.signup-step-plan .signup-title .signup-eyebrow { margin-bottom: 8px; }
.registration-modern.signup-step-plan .signup-title h1 { font-size: clamp(29px, 3vw, 38px); margin-bottom: 12px; }
.registration-modern.signup-step-plan .signup-title p:not(.signup-eyebrow) { font-size: 15px; line-height: 1.65; }

/* Keep security / completion states compact and form controls familiar. */
.registration-modern .signup-verify,
.registration-modern .signup-checkout,
.registration-modern .signup-finish { background: var(--qh-soft); }
.registration-modern .signup-verify { max-width: 480px; }
.registration-modern .signup-checkout { max-width: 620px; }
.registration-modern .signup-finish { max-width: 640px; margin: 24px auto; padding: 48px; }
.registration-modern .signup-finish .signup-eyebrow { font-size: 12px; }
.registration-modern .signup-consent input { accent-color: var(--qh-blue); }
.registration-modern .signup-consent a { color: var(--qh-blue-dark); }
.registration-modern .signup-renewal { background: #fff; border: 1px solid var(--qh-border); border-radius: 8px; }
.registration-modern .signup-seats { background: #fff; border-color: var(--qh-border); border-radius: 8px; padding: 20px; }
.registration-modern .signup-seats-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.registration-modern .signup-seats-heading h2 { font-size: 18px; }
.registration-modern .signup-seats-heading .signup-eyebrow { font-size: 11px; margin-bottom: 6px; }
.registration-modern .signup-seats-badge { font-size: 11px; }
.registration-modern .signup-seat-choice { gap: 20px; }
.registration-modern .signup-seat-stepper { max-width: 184px; }
.registration-modern .signup-seat-stepper button { border-radius: 7px; }
.registration-modern .signup-practice-account { margin-bottom: 24px; }
.registration-modern .signup-practice-account strong { font-weight: 600; }
.registration-modern .signup-checkout-order { background: var(--qh-soft); }
.registration-modern .signup-card-entry h2 { font-size: 20px; }
.registration-modern .signup-checkout-order h2 { font-size: 19px; }
.registration-modern .signup-secure-title { margin-bottom: 32px; }
.registration-modern .signup-secure-layout { gap: 28px; }
.registration-modern .signup-payment-note, .registration-modern .signup-rate-source { color: var(--qh-muted); }
.registration-modern .signup-access { max-width: 760px; padding-top: 72px; }
.registration-modern .signup-coming-soon { padding: 0; }
.registration-modern .signup-coming-soon h1 { max-width: 660px; }
.registration-modern .signup-preview-access { max-width: 480px; padding-top: 16px; border-top: 1px solid var(--qh-border); }
.registration-modern .signup-preview-access > summary { color: var(--qh-ink); font-weight: 700; }
.registration-modern .signup-preview-access > summary span { color: var(--qh-muted); font-weight: 400; }
.registration-modern .signup-policy { max-width: 820px; }
.registration-modern .signup-policy > .signup-text-button { margin-bottom: 24px; padding-left: 0; }
.registration-modern .signup-policy .signup-card { padding: 0; border: 0; }
.registration-modern .signup-policy h1 { font-size: clamp(30px, 3.5vw, 42px); letter-spacing: -.04em; }
.registration-modern .signup-policy section { padding-block: 26px; border-top: 1px solid var(--qh-border); }
.registration-modern .signup-policy h2 { font-size: 19px; margin: 0 0 12px; }
.registration-modern .signup-policy section p { font-size: 15px; margin: 0; }
.registration-modern .signup-footer { padding: 0; margin-top: auto; border-top: 1px solid var(--qh-border); background: var(--qh-soft); }
.registration-modern .signup-footer-inner { min-height: 90px; padding-block: 20px; }
.registration-modern .signup-footer p { display: flex; align-items: center; gap: 12px; font-size: 12px; margin: 0; text-align: left; }
.registration-modern .signup-footer strong { color: var(--qh-ink); font-size: 14px; font-weight: 800; }
.registration-modern .signup-footer nav { gap: 4px 20px; }
.registration-modern .signup-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--qh-muted); text-decoration: none; }
.registration-modern .signup-footer nav a:hover { color: var(--qh-blue); text-decoration: underline; }

@media (max-width: 900px) {
    .registration-modern .signup-plan-controls { flex-direction: column; align-items: stretch; }
    .registration-modern .signup-currency-picker { max-width: none; justify-content: center; }
    .registration-modern .signup-currency-picker p { text-align: center; }
    .registration-modern .signup-footer-inner { flex-direction: column; gap: 10px; }
}
@media (max-width: 620px) {
    .registration-modern .signup-header-inner,
    .registration-modern .signup-footer-inner { width: calc(100% - 40px); }
    .registration-modern .signup-header-inner { min-height: 70px; gap: 16px; }
    .registration-modern .signup-brand img { width: 112px; }
    .registration-modern .signup-header-actions { gap: 18px; }
    .registration-modern .signup-help, .registration-modern .signup-signin { font-size: 12px; }
    .registration-modern .signup-shell { width: calc(100% - 40px); padding-top: 28px; padding-bottom: 40px; }
    .registration-modern .signup-progress { margin-bottom: 32px; }
    .registration-modern .signup-progress li { font-size: 11px; gap: 7px; }
    .registration-modern .signup-progress li > span[aria-hidden] { width: 28px; height: 28px; }
    .registration-modern .signup-title { margin-bottom: 26px; }
    .registration-modern .signup-title h1, .registration-modern .signup-finish h1 { font-size: 29px; line-height: 1.25; margin-bottom: 14px; }
    .registration-modern .signup-title p { font-size: 14px; line-height: 1.75; }
    .registration-modern .signup-title .signup-eyebrow { font-size: 11px; margin-bottom: 12px; }
    .registration-modern .signup-card { padding: 24px 20px; border-radius: 10px; }
    .registration-modern .signup-fields { gap: 18px; }
    .registration-modern .signup-plan-controls { padding: 18px 16px; gap: 18px; margin-bottom: 20px; }
    .registration-modern .signup-currency-picker { gap: 10px; }
    .registration-modern .signup-currency-picker label { flex-basis: 100%; text-align: center; }
    .registration-modern .signup-currency-picker select { width: 100%; max-width: none; }
    .registration-modern .signup-billing-toggle [role=group] { width: 100%; }
    .registration-modern .signup-billing-toggle button { flex: 1; padding: 11px 9px; }
    .registration-modern .signup-plan h2 { font-size: 22px; }
    .registration-modern .signup-price { margin-top: 20px; }
    .registration-modern .signup-price strong { font-size: 34px; }
    .registration-modern .signup-plan ul { margin-top: 20px; padding-top: 20px; }
    .registration-modern .signup-launch-notice strong, .registration-modern .signup-launch-notice span { display: block; margin: 0; }
    .registration-modern .signup-launch-notice { padding: 12px; }
    .registration-modern .signup-seats { padding: 18px 14px; }
    .registration-modern .signup-seats-heading { flex-direction: column; }
    .registration-modern .signup-seats-heading h2 { font-size: 17px; }
    .registration-modern .signup-finish { margin: 0 auto; padding: 32px 22px; }
    .registration-modern .signup-access { padding-top: 48px; }
    .registration-modern .signup-coming-soon h1 { font-size: 32px; }
    .registration-modern .signup-preview-access { margin-top: 30px; }
    .registration-modern .signup-footer-inner { padding-block: 22px 16px; }
    .registration-modern .signup-footer nav { gap: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .registration-modern *, .registration-modern *::before, .registration-modern *::after { scroll-behavior: auto; transition: none; }
}