/* maya.my signup - styles. Tokens match the homepage (index.php): primary #081c46, accent #1b66d1, cyan #17b9d6, gold #f4bb2a. */
.su-page {
    --su-primary: #081c46; --su-accent: #1b66d1; --su-cyan: #17b9d6; --su-gold: #f4bb2a;
    --su-ink: #1f2733; --su-muted: #4a5568; --su-line: #d5dbe5; --su-bg: #f5f7fa; --su-danger: #b3261e; --su-ok: #16794c;
    font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--su-ink); background: var(--su-bg); font-size: 1rem; line-height: 1.5;
}
.su-page h1, .su-page h2, .su-page h3 { color: var(--su-primary); font-weight: 700; }
.su-hero {
    padding: 7.5rem 0 2.6rem; color: #fff;
    background: linear-gradient(150deg, var(--su-primary) 0%, var(--su-accent) 68%, var(--su-cyan) 100%);
}
.su-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 .5rem; }
.su-lead { color: rgba(255,255,255,.9); margin: 0; max-width: 40rem; font-size: 1.05rem; }
.su-hero-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.su-lang { color: #fff; padding-top: .35rem; }
.su-lang a { color: #fff !important; }
.su-body { padding: 2rem 0 4rem; margin-top: -1.4rem; }
.su-narrow { max-width: 640px; margin: 0 auto; }

.su-card {
    background: #fff; border: 1px solid #e3e8ef; border-radius: .9rem; padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(8,28,70,.07);
}
@media (min-width: 576px) { .su-card { padding: 1.75rem; } }

/* plan summary */
.su-plan-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.su-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--su-accent); }
.su-badge { background: rgba(244,187,42,.2); color: #7a5600; border-radius: 99px; padding: .15rem .65rem; font-size: .8rem; font-weight: 700; }
.su-plan-name { font-size: 1.6rem; margin: .35rem 0 .1rem; }
.su-amt { font-size: 2rem; font-weight: 700; color: var(--su-primary); }
.su-per { color: var(--su-muted); margin-left: .35rem; }
.su-plan-limit { font-weight: 600; margin: .25rem 0 .75rem; }
.su-checks { list-style: none; padding: 0; margin: 0 0 1rem; }
.su-checks li { position: relative; padding-left: 1.6rem; margin: .35rem 0; color: var(--su-muted); }
.su-checks li::before { content: ""; position: absolute; left: .1rem; top: .45rem; width: .7rem; height: .4rem; border-left: 2px solid var(--su-ok); border-bottom: 2px solid var(--su-ok); transform: rotate(-45deg); }
.su-note { background: #eef4fd; border-left: 3px solid var(--su-accent); border-radius: .4rem; padding: .7rem .9rem; font-size: .92rem; color: var(--su-ink); }
.su-plan-switch { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.su-plan-switch-l { font-size: .85rem; color: var(--su-muted); margin-right: .25rem; }
.su-pill { border: 1px solid var(--su-line); border-radius: 99px; padding: .25rem .8rem; font-size: .88rem; color: var(--su-primary); text-decoration: none; background: #fff; }
.su-pill:hover, .su-pill:focus-visible { border-color: var(--su-accent); }
.su-pill.is-on { background: var(--su-primary); color: #fff; border-color: var(--su-primary); }
@media (min-width: 992px) { .su-plan { position: sticky; top: 6rem; } }

/* form */
.su-fs { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.su-fs legend { font-size: 1.05rem; font-weight: 700; color: var(--su-primary); padding: 0; margin-bottom: .75rem; width: 100%; border-bottom: 1px solid var(--su-line); padding-bottom: .4rem; float: none; }
.su-field { margin-bottom: 1rem; }
.su-cols > [class*="col-"] { padding-right: 0; }
@media (min-width: 768px) { .su-cols > .col-md-6:first-child { padding-right: .75rem; } }
.su-field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; color: var(--su-ink); }
.su-req { color: var(--su-danger); }
.su-opt { font-weight: 400; color: var(--su-muted); font-size: .82rem; }
.su-input {
    display: block; width: 100%; min-height: 2.9rem; padding: .6rem .8rem; font-size: 1rem; /* 16px: no iOS zoom */
    border: 1px solid #aeb7c5; border-radius: .5rem; background: #fff; color: var(--su-ink); box-shadow: none; appearance: auto;
}
.su-input:focus { outline: 3px solid rgba(27,102,209,.35); outline-offset: 0; border-color: var(--su-accent); }
.has-error .su-input, .su-input[aria-invalid="true"] { border-color: var(--su-danger); background: #fff8f7; }
.su-hint { font-size: .82rem; color: var(--su-muted); margin-top: .25rem; }
.su-err { font-size: .86rem; color: var(--su-danger); margin-top: .25rem; font-weight: 500; }
.su-err[hidden] { display: none; }
.su-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.su-check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.su-check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--su-accent); }
.su-terms.has-error .su-check { color: var(--su-danger); }

.su-submit { width: 100%; border: 0; cursor: pointer; font-size: 1.05rem; padding: .95rem 1.2rem; margin-top: .5rem; text-align: center; }
.su-submit[disabled] { opacity: .65; cursor: progress; }
.su-btn-sm { padding: .55rem 1.1rem; font-size: .95rem; }
.su-fine { font-size: .85rem; color: var(--su-muted); margin: .75rem 0 0; text-align: center; }
.su-link { background: none; border: 0; padding: 0; color: var(--su-accent); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* buttons: same look as the homepage ones, in case this page loads without index.php's inline CSS */
.su-page .maya-btn { display: inline-block; padding: .85rem 1.6rem; border-radius: .5rem; font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: background-color .15s, color .15s; }
.su-page .maya-btn-accent { background: var(--su-accent); color: #fff; }
.su-page .maya-btn-accent:hover, .su-page .maya-btn-accent:focus-visible { background: var(--su-primary); color: #fff; }
.su-page .maya-btn-outline { background: #fff; color: var(--su-primary); border-color: var(--su-line); }
.su-page .maya-btn-outline:hover { border-color: var(--su-accent); }

/* alerts */
.su-alert { border-radius: .5rem; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid; font-size: .95rem; }
.su-alert-danger { background: #fdecea; border-color: #f2b8b5; color: #7a1712; }
.su-alert-warning { background: #fff6e0; border-color: #f0d28a; color: #6b4a00; }
.su-alert-success { background: #e8f6ee; border-color: #a8d9bd; color: #0f5a39; }
.su-alert-info { background: #eef4fd; border-color: #b9d1f5; color: #0d3a78; }
.su-errsum { background: #fdecea; border: 1px solid #f2b8b5; color: #7a1712; border-radius: .5rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.su-errsum[hidden] { display: none; }
.su-errsum ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.su-errsum a { color: inherit; text-decoration: underline; }
.su-login-link { margin: -.25rem 0 1rem; }

/* google */
.su-google { margin-bottom: 1.25rem; }
.su-google-btn { min-height: 44px; display: flex; justify-content: center; }
.su-or { display: flex; align-items: center; gap: .75rem; color: var(--su-muted); font-size: .85rem; margin-top: 1rem; }
.su-or::before, .su-or::after { content: ""; flex: 1; border-top: 1px solid var(--su-line); }
.su-chip { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; align-items: center; background: #e8f6ee; border: 1px solid #a8d9bd; border-radius: .5rem; padding: .65rem .9rem; margin-bottom: 1.25rem; font-size: .92rem; }
.su-chip[hidden], .su-google[hidden] { display: none; }

/* state cards (check email / errors / done) */
.su-state { text-align: center; padding: 2rem 1.25rem; }
@media (min-width: 576px) { .su-state { padding: 2.5rem 2.25rem; } }
.su-state h2 { font-size: 1.5rem; margin: .5rem 0 .75rem; }
.su-state-ico { width: 4rem; height: 4rem; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: #eef4fd; color: var(--su-accent); }
.su-state-success .su-state-ico { background: #e8f6ee; color: var(--su-ok); }
.su-state-danger .su-state-ico { background: #fdecea; color: var(--su-danger); }
.su-state-warning .su-state-ico { background: #fff6e0; color: #8a5d00; }
.su-state-body { color: var(--su-muted); text-align: left; }
.su-state-body p { margin: 0 0 .8rem; }
.su-state-body .su-center { text-align: center; }
.su-actions { margin-top: 1.25rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.su-email-big { font-weight: 700; color: var(--su-primary); word-break: break-all; }
.su-resend { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--su-line); text-align: center; }
.su-resend .maya-btn[disabled] { opacity: .55; cursor: not-allowed; }
.su-dev { margin-top: 1.25rem; border: 2px dashed #c9a227; background: #fffbea; border-radius: .5rem; padding: .75rem 1rem; text-align: left; font-size: .85rem; word-break: break-all; }
.su-steps { text-align: left; counter-reset: s; list-style: none; padding: 0; margin: 1rem 0 0; }
.su-steps li { counter-increment: s; position: relative; padding: .55rem 0 .55rem 2.6rem; border-bottom: 1px solid #eef1f6; }
.su-steps li:last-child { border-bottom: 0; }
.su-steps li::before { content: counter(s); position: absolute; left: 0; top: .5rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--su-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.su-steps strong { color: var(--su-primary); display: block; }

/* password */
.su-pw-wrap { position: relative; }
.su-pw-wrap .su-input { padding-right: 4.5rem; }
.su-pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--su-accent); font-weight: 600; font-size: .85rem; padding: .5rem .6rem; cursor: pointer; border-radius: .35rem; }
.su-pw-toggle:focus-visible { outline: 3px solid rgba(27,102,209,.35); }
.su-meter { height: .45rem; background: #e6eaf1; border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.su-meter > i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--su-danger); transition: width .2s, background-color .2s; }
.su-meter-l { font-size: .82rem; color: var(--su-muted); margin-top: .25rem; min-height: 1.2em; }
.su-rules { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .86rem; color: var(--su-muted); }
.su-rules li { padding-left: 1.4rem; position: relative; margin: .15rem 0; }
.su-rules li::before { content: "\25CB"; position: absolute; left: 0; color: #94a0b4; }
.su-rules li.ok { color: var(--su-ok); }
.su-rules li.ok::before { content: "\2713"; color: var(--su-ok); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .su-meter > i { transition: none; } }