/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Reference: Ephraim Duncan / 21st login-2 & blocks.so. Original Motion X implementation. */
.mx-account-page {margin:0;background:var(--color-paper);color:var(--color-ink)}
.mx-account-header,.mx-account-footer {max-width:1480px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mx-account-brand {display:inline-flex;gap:12px;align-items:center;font-size:18px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.mx-account-brand svg {color:var(--color-accent);flex-shrink:0}
.mx-account-back {display:inline-flex;gap:12px;align-items:center;min-height:44px;font-size:13px;white-space:nowrap;color:var(--color-ink-2)}
.mx-account-layout {max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:12px 40px 24px;min-height:calc(100svh - 184px)}
.mx-account-form-panel {display:grid;align-items:center;padding:30px 0}
.mx-account-form-wrap {width:100%;max-width:400px;margin:auto}
.mx-account-eyebrow {font:10px var(--font-mono);letter-spacing:.14em;color:var(--color-accent-text);margin:0 0 20px}
.mx-account-form-wrap h1 {font:600 clamp(34px,3.5vw,48px)/1.06 var(--font-display);letter-spacing:-.045em;margin:0}
.mx-account-intro {font-size:15px;line-height:1.65;color:var(--color-ink-2);margin:18px 0 30px;max-width:350px}
.mx-account-form {display:grid;gap:20px}
.mx-account-field>label {display:block;margin-bottom:9px;font-size:13px;font-weight:500}
.mx-account-input {position:relative}
.mx-account-input input {width:100%;min-height:52px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-surface)!important;color:var(--color-ink)!important;padding:12px 15px;font:16px var(--font-body);box-shadow:none;transition:border-color .2s,background .2s}
.mx-account-input:has(.mx-password-toggle) input {padding-right:76px}
.mx-account-input input::placeholder {color:var(--color-muted);font-size:14px}
.mx-account-input input:focus {outline:2px solid var(--color-focus);outline-offset:3px;border-color:var(--color-focus);box-shadow:none}
.mx-password-toggle {position:absolute;right:5px;top:4px;min-width:60px;min-height:44px;padding:8px;color:var(--color-accent-text);font:600 12px var(--font-body);border-radius:7px;cursor:pointer}
.mx-password-toggle:hover {background:var(--color-surface-hover)}
.mx-account-options {display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}
.mx-account-options label {display:flex;align-items:center;gap:9px;min-height:44px;color:var(--color-ink-2)}
.mx-account-options input {width:16px;height:16px;accent-color:var(--color-accent)}
.mx-account-options a {color:var(--color-accent-text);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.mx-account-submit {display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--color-accent);border-radius:10px;min-height:52px;padding:14px 20px;background:var(--color-accent);color:var(--color-accent-ink);font:600 14px var(--font-body);box-shadow:0 4px 0 var(--color-button-edge);cursor:pointer;transition:transform .2s,background .2s}
.mx-account-submit:hover {background:var(--color-accent-hover);transform:translateY(-1px)}
.mx-account-submit:active {transform:translateY(2px);box-shadow:0 2px 0 var(--color-button-edge)}
.mx-account-submit svg {transition:translate .2s}.mx-account-submit:hover svg {translate:3px 0}
.mx-account-switch {margin:30px 0 0;padding-top:22px;border-top:1px solid var(--color-rule-soft);font-size:13px;line-height:1.8;color:var(--color-ink-2)}
.mx-account-switch a {display:inline-flex;align-items:center;gap:7px;min-height:44px;white-space:nowrap;color:var(--color-accent-text);font-weight:600}
.mx-account-switch svg {width:14px}
.mx-account-help {font-size:12px;line-height:1.7;margin:8px 0;color:var(--color-muted)}
.mx-account-help a {color:var(--color-accent-text);text-decoration:underline;text-underline-offset:3px}
.mx-account-preview {font-size:10px;color:var(--color-muted);line-height:1.6;margin:18px 0 0}
.mx-account-caps {color:var(--color-warning);font-size:12px;margin:0}
.mx-account-story {border:1px solid var(--color-rule);background:var(--color-accent-soft);border-radius:22px;display:flex;flex-direction:column;justify-content:center;padding:32px;overflow:hidden}
.mx-account-story-top {display:flex;justify-content:space-between;gap:20px;font:9px var(--font-mono);letter-spacing:.1em;color:var(--color-accent-text);margin-bottom:36px}
.mx-account-story-copy h2 {font:500 clamp(40px,4vw,58px)/1.05 var(--font-display);letter-spacing:-.045em;margin:0}
.mx-account-story-copy h2 em {font:600 1.22em/.8 var(--font-outlier);color:var(--color-accent-text);letter-spacing:-.02em}
.mx-account-story-copy>p {font-size:13px;line-height:1.7;color:var(--color-ink-2);max-width:300px;margin:20px 0 26px}
.mx-account-mentor {position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--color-paper)}
.mx-account-mentor>img {display:block;width:100%;height:clamp(190px,24vw,310px);object-fit:cover;object-position:50% 33%}
.mx-account-mentor figcaption {display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;background:var(--color-surface)}
.mx-account-mentor strong {display:block;font-size:13px;font-weight:600}
.mx-account-mentor figcaption>span>span {display:block;margin-top:3px;font-size:10px;color:var(--color-muted)}
.mx-account-mentor a {display:inline-flex;gap:7px;align-items:center;min-height:44px;font-size:11px;white-space:nowrap;color:var(--color-accent-text)}
.mx-account-mentor a svg {width:14px}
.mx-account-path {display:flex;justify-content:space-between;gap:16px;padding-top:24px;margin-top:auto}
.mx-account-path span {font-size:12px;color:var(--color-ink-2);display:flex;align-items:center;gap:10px}
.mx-account-path i {font:9px var(--font-mono);color:var(--color-accent-text);font-style:normal}
.mx-account-footer {font-size:11px;color:var(--color-muted);padding-block:12px}
.mx-account-footer nav {display:flex;gap:24px}.mx-account-footer a {min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.mx-account-page a:hover {color:var(--color-ink)}
.mx-account-page :is(a,button):focus-visible {outline:2px solid var(--color-focus);outline-offset:4px;border-radius:5px}
@media(max-width:999px){.mx-account-layout {grid-template-columns:minmax(0,1fr);max-width:660px;padding:0 24px;min-height:calc(100svh - 170px)}.mx-account-story {display:none}.mx-account-header,.mx-account-footer {padding-inline:24px}.mx-account-form-panel {padding-block:35px}}
@media(max-width:479px){.mx-account-header {padding:20px 16px;gap:12px}.mx-account-brand {font-size:15px;gap:8px}.mx-account-brand svg {width:28px;height:28px}.mx-account-back {font-size:0;gap:0}.mx-account-back svg {width:22px;height:22px}.mx-account-back {min-width:44px;justify-content:center}.mx-account-layout {padding-inline:22px}.mx-account-form-panel {padding-block:25px}.mx-account-footer {padding:12px 22px;flex-wrap:wrap;gap:0}.mx-account-footer>span {display:none}.mx-account-footer nav {width:100%;justify-content:space-between}.mx-account-intro {font-size:14px}}
@media(prefers-reduced-motion:reduce){.mx-account-submit,.mx-account-submit svg,.mx-account-input input {transition:none}.mx-account-submit:hover,.mx-account-submit:active {transform:none}}