/* Account pages: sign in, create account, the provider callback and the
   completion page. One shell, one card, the site's button language and the
   crew that peeks over Try Sumlino, so arriving here still feels like Sumlino. */
/* Inter 4, self-hosted like the website (site-assets/fonts/Inter-OFL.txt). */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: optional; src: url("site-assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* iOS enlarges body text unevenly in landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root { --blue: #075cff; --blue-hover: #1467ff; --ink: #15233b; --muted: #65748c; --line: #dfe7f3; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100dvh; background: #f6f8fc; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #0a2a63; outline-offset: 3px; }

/* Shell: a soft light behind the card and the site's rings, fixed so the
   phone keyboard and short screens never move them. */
.auth-shell { position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center; align-items: start; gap: 22px; min-height: 100dvh; padding: 104px 24px 36px; overflow: hidden; background: radial-gradient(ellipse at 50% 12%, #ffffff 0, #f6f8fc 42%, #eef3fd 100%); }
.auth-shell::before { content: ""; position: fixed; z-index: -1; left: 50%; top: -340px; width: 520px; height: 520px; margin-left: -260px; border: 1px solid #d9e4f8; border-radius: 50%; box-shadow: 0 0 0 70px #e8efff80, 0 0 0 140px #f0f4fc70; }
.auth-shell::after { content: ""; position: fixed; z-index: -1; left: 50%; bottom: -230px; width: min(960px, 120vw); height: 360px; border-radius: 50%; background: #dfe9ff; opacity: .6; transform: translateX(-50%) rotate(-5deg); }
.auth-brand { position: absolute; top: 26px; left: 32px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blue); font-size: 26px; font-weight: 750; letter-spacing: -1.3px; text-decoration: none; }
.auth-brand img { width: 30px; height: auto; }
.auth-brand:focus-visible { border-radius: 10px; }

/* The card. */
.auth-card { position: relative; width: min(440px, 100%); padding: 36px 36px 30px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 30px 80px #163c7b14, 0 2px 8px #1722380a; animation: card-in var(--duration-slow) var(--ease-smooth-out) both; }
.t-resize { transition: width var(--resize-dur) var(--resize-ease), height var(--resize-dur) var(--resize-ease); will-change: width, height; }
.auth-greeting { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border: 1px solid #dfe9fc; border-radius: 26px; background: linear-gradient(145deg, #fff, #eef4ff); box-shadow: 0 14px 34px #075cff14, inset 0 1px #fff; }
.auth-greeting [data-sumlino-character] { --character-size: 60px; width: 60px; }

/* Sign in | Create account. Sign in always comes first; the current mode is
   the raised segment, the other is a link to the same flow in that mode.
   Hovering the other mode only darkens its label on a faint tint, so the
   raised segment stays the one that reads as chosen. Pressing it slides the
   raised segment across before the page changes (auth-switch.js), and the
   new page arrives with everything in place: only the words change. */
.auth-modes { position: relative; isolation: isolate; display: flex; padding: 4px; margin: 0 0 22px; border: 1px solid #e3eaf5; border-radius: 999px; background: #eef3fb; }
.auth-modes::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px #1734541a, 0 8px 18px -10px #17345459; opacity: 0; }
.auth-mode { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; color: #5a6b86; font-size: 13.5px; font-weight: 650; text-decoration: none; transition: color var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out), transform 160ms var(--ease-smooth-out); }
.auth-mode.is-current { background: #fff; color: #0b2a5c; box-shadow: 0 1px 2px #1734541a, 0 8px 18px -10px #17345459; }
@media (hover: hover) and (pointer: fine) { a.auth-mode:hover { color: #34476a; background-color: #e6edf7; } }
a.auth-mode:active { transform: scale(.97); }
a.auth-mode:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; color: #34476a; }
.auth-modes.is-switching::before { opacity: 1; animation: auth-thumb-right var(--duration-fast) var(--ease-smooth-out) both; }
.auth-modes.is-switching.to-left::before { animation-name: auth-thumb-left; }
.auth-modes.is-switching .auth-mode { background: transparent; box-shadow: none; transform: none; }
.auth-modes.is-switching .auth-mode.is-current { color: #5a6b86; }
.auth-modes.is-switching a.auth-mode { color: #0b2a5c; }
@keyframes auth-thumb-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes auth-thumb-left { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* Arriving through the switch: the card, the crew, the greeting and the tabs
   stay put; the heading and the line under it fade in. */
.is-mode-switch :is(.auth-card, .auth-crew svg, .auth-greeting, .auth-choice, .auth-choice > *, .provider-list > .provider-button) { animation: none; }
.is-mode-switch .auth-choice > :is(h1, .auth-copy) { animation: auth-words-in var(--duration-fast) var(--ease-smooth-out) both; }
@keyframes auth-words-in { from { opacity: 0; filter: blur(var(--blur-small)); } to { opacity: 1; filter: blur(0); } }
.auth-card[data-mode="sign-in"] #switch-link { order: 1; }

.beta-pill { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #5e6a80; font-size: 11px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; }
.beta-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #e8f0ff; }
h1 { margin: 12px 0 8px; font-size: clamp(28px, 7vw, 34px); line-height: 1.12; letter-spacing: -1.3px; }
.auth-copy { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* Why they are here, when the Team plan sent them: one line, no promise of a plan. */
.auth-intent { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #eef4ff; color: #1c304d; font-size: 13px; line-height: 1.5; }
.auth-intent[hidden] { display: none; }
.auth-intent svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Provider buttons share the site's quiet pill. */
.provider-list { display: grid; gap: 10px; margin-top: 26px; }
#clerk-captcha { margin-top: 12px; }
#clerk-captcha:empty { display: none; }
.provider-button { position: relative; isolation: isolate; display: grid; grid-template-columns: 26px 1fr 30px; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 10px 8px 18px; overflow: hidden; border: 1px solid #d3dff0; border-radius: 999px; background: #ffffffe0; color: #1b3354; text-align: left; box-shadow: inset 0 1px 0 #fff, 0 1px 2px #1734540f, 0 10px 22px -14px #17345447; transition: transform var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-smooth-out); }
.provider-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 25%, #edf3ff 50%, transparent 75%); transform: translateX(-110%); transition: transform var(--duration-slow) var(--ease-smooth-out); }
.provider-button:is(:hover, :focus-visible) { border-color: #b6cbed; background-color: #fff; color: #0b3f99; box-shadow: inset 0 1px 0 #fff, 0 2px 4px #1734540f, 0 14px 26px -14px #17345452; transform: translateY(-1px); }
.provider-button:is(:hover, :focus-visible)::before { transform: translateX(110%); }
.provider-button:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.provider-button[disabled] { cursor: wait; opacity: .5; transform: none; }
.provider-button.is-active { border-color: #8eb2f8; opacity: 1; }
.provider-icon { display: grid; place-items: center; width: 26px; height: 26px; }
.provider-icon svg { display: block; }
.provider-label { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.provider-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--blue); background: #eef3ff; transition: background var(--duration-quick) var(--ease-smooth-out); }
.cta-arrow { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.provider-button:is(:hover, :focus-visible) .provider-arrow { background: #e3ecff; }
.provider-button:is(:hover, :focus-visible) .cta-arrow { transform: translateX(3px); }
.auth-status { min-height: 21px; margin: 14px 0 0; color: #b43a42; font-size: 12.5px; line-height: 1.5; text-align: center; }
.auth-status:empty { display: none; }
.auth-terms { margin: 20px 0 0; color: #6d7583; font-size: 12px; line-height: 1.55; text-align: center; }
.auth-terms a { color: #5a6b86; font-weight: 600; text-decoration: none; }
.auth-terms a:is(:hover, :focus-visible) { color: var(--blue); }
.auth-footnote { margin: 0; color: #6d7583; font-size: 12px; text-align: center; }
.auth-footnote a { color: #65748c; text-decoration: none; }
.auth-footnote a:is(:hover, :focus-visible) { color: var(--blue); }

/* The choice enters in order under the card: switch, title, copy, providers. */
.auth-choice { animation: auth-progress-in var(--duration-slow) var(--ease-smooth-out) both; }
.auth-choice > * { animation: auth-line-in var(--duration-very-slow) var(--ease-smooth-out) both; animation-delay: calc(var(--duration-micro) + var(--i, 0) * 55ms); }
.auth-choice > .auth-modes { --i: 0; }
.auth-choice > .beta-pill { --i: 1; }
.auth-choice > h1 { --i: 2; }
.auth-choice > .auth-copy { --i: 3; }
.auth-choice > .auth-intent { --i: 3; }
.auth-choice > .provider-list { --i: 4; }
.auth-choice > .auth-terms { --i: 5; }
.auth-choice > .auth-status { animation: none; }
.provider-list > .provider-button { animation: auth-line-in var(--duration-very-slow) var(--ease-smooth-out) both; animation-delay: calc(var(--duration-micro) + 4 * 55ms + var(--j, 0) * 70ms); }
.provider-list > .provider-button:nth-child(2) { --j: 1; }

/* Connecting: the character unfolds while the provider page opens. */
.auth-card.is-connecting { text-align: center; }
.auth-card.is-connecting .auth-greeting { box-shadow: 0 18px 48px #075cff1c; animation: auth-mark-float 2800ms var(--ease-in-out) infinite; }
.auth-progress { text-align: center; animation: auth-progress-in var(--duration-slow) var(--ease-smooth-out) both; }
.auth-progress h2, .status-card h1 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -1px; }
.auth-progress p { margin: 10px auto 0; max-width: 300px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.auth-progress-track { width: 112px; height: 3px; margin: 26px auto 0; overflow: hidden; border-radius: 99px; background: #e2e9f5; }
.auth-progress-track span { display: block; width: 52%; height: 100%; border-radius: inherit; background: var(--blue); animation: loader-pass 1200ms var(--ease-smooth-out) infinite; }
.auth-card.is-stalled .auth-progress-track { display: none; }
.quiet-link { display: inline-block; margin-top: 22px; color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; }
.qbo-connection [hidden] { display: none !important; }
.qbo-batch { width: min(880px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.qbo-batch h2 { font-size: 25px; line-height: 1.25; margin: 0 0 12px; }
.qbo-batch .primary-action { width: auto; padding-inline: 24px; }
.qbo-batch select { display: block; width: 100%; padding: 12px; margin: 10px 0 18px; border: 1px solid var(--line); border-radius: 10px; background: white; color: inherit; font: inherit; }
.qbo-batch label[for="batch-target"] { display: block; margin-top: 14px; }
.qbo-batch #batch-reason { display: block; width: 100%; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.qbo-batch .batch-warning { padding: 14px; border: 1px solid #efd3b6; border-radius: 12px; color: #794d26; background: #fff8ed; font-size: 14px; line-height: 1.5; }
.batch-expenses { display: grid; gap: 8px; margin-bottom: 18px; max-height: 340px; overflow-y: auto; padding: 4px; }
.batch-expense { display: flex; gap: 12px; padding: 14px; background: #f6f8fc; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; overflow-wrap: anywhere; }
.batch-expense input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: #075cff; }
.batch-expense small { display: block; margin-top: 5px; color: var(--muted); }
.batch-preview-row { padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; overflow-wrap: anywhere; }
.batch-preview-row p, .batch-preview-row li { font-size: 14px; line-height: 1.5; }
.batch-preview-row header, .line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.result-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.status-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #eef1f6; color: #4b5a70; font-size: 12px; font-weight: 600; }
.status-pill[data-state="ok"] { background: #e8f6ef; color: #1c7c52; } .status-pill[data-state="warn"] { background: #fff5e4; color: #9a5b0b; } .status-pill[data-state="bad"] { background: #fdecec; color: #b3261e; }
.line-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; } .line { padding: 6px 9px; border-radius: 8px; background: #f6f8fc; font-size: 13px; }
.change-arrow { display: inline-flex; align-items: center; gap: 6px; } .change-arrow i { font-style: normal; color: #7a879b; }
.batch-expense .cell { display: inline-flex; gap: 4px; align-items: baseline; } .batch-expense .cell-payee { display: inline-grid; } .batch-expense .cell-actions { margin-left: auto; }
.notes-button { display: inline-flex; align-items: center; gap: 6px; } .notes-button svg { width: 16px; height: 16px; }
.selection-bar, .result-actions, .confirm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.qbo-batch :focus-visible { outline: 3px solid #075cff; outline-offset: 3px; }
@media (max-width: 480px) { .qbo-batch { padding: 20px 16px; } .qbo-batch .primary-action { width: 100%; } }
.qbo-connection .primary-action { justify-content: center; }
.qbo-connection .complete-actions { display: flex; flex-direction: column; gap: 12px; }
.qbo-connection .quiet-link { margin-top: 0; padding: 10px; border: 0; background: transparent; text-align: center; cursor: pointer; }
.qbo-connection .auth-footnote { margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quiet-link:is(:hover, :focus-visible) { color: #0040c4; }

/* Provider callback. */
.auth-shell--status { padding-top: 104px; }
.status-card { text-align: center; }
.status-card .auth-copy { margin-top: 10px; }
.status-card .auth-progress-track { margin-top: 24px; }
.status-card .quiet-link { margin-top: 20px; }

/* Completion: the account is confirmed in three readable beats, then the
   welcome lands with the crew and a small burst, the way a save celebrates in
   the extension. Error and unavailable states skip straight to their text. */
.complete-card { text-align: center; }
.complete-mark { overflow: visible; }
.complete-mark [data-sumlino-character] { position: relative; z-index: 1; }
.complete-content { text-align: center; }
.complete-status { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; color: #53627a; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.complete-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #e7efff; }
.complete-card h1 { margin: 12px 0 8px; }
.complete-card .auth-copy { max-width: 320px; margin-inline: auto; }
.complete-steps { display: grid; gap: 8px; width: min(300px, 100%); margin: 22px auto 0; padding: 0; list-style: none; text-align: left; }
.complete-steps li { display: flex; align-items: center; gap: 10px; min-height: 22px; color: #6c7582; font-size: 13px; font-weight: 600; transition: color var(--duration-fast) var(--ease-smooth-out); }
.complete-steps li i { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid #cfdaeb; border-radius: 50%; background: #fff; transition: border-color var(--duration-fast) var(--ease-smooth-out), background var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-bounce); }
.complete-steps li i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.complete-steps li[data-state="active"] { color: #1b3354; }
.complete-steps li[data-state="active"] i { border-color: #b6cbed; }
.complete-steps li[data-state="active"] i::before { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid transparent; border-top-color: var(--blue); border-radius: 50%; animation: step-spin 900ms linear infinite; }
.complete-steps li[data-state="active"] span { background: linear-gradient(90deg, #1b3354 0 35%, #7f93b4 50%, #1b3354 65% 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: step-shimmer 1.6s linear infinite; }
.complete-steps li[data-state="done"] { color: #1b3354; }
.complete-steps li[data-state="done"] i { border-color: #269366; background: #269366; animation: step-pop var(--duration-fast) var(--ease-bounce) both; }
.complete-steps li[data-state="done"] i svg { animation: step-draw var(--duration-fast) var(--ease-smooth-out) 60ms forwards; }
.complete-actions { margin-top: 26px; }
.primary-action { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; margin: 0; padding: 8px 10px 8px 22px; border: 1px solid #0657f0; border-radius: 999px; background: var(--blue) linear-gradient(180deg, #ffffff24, #ffffff00 62%); color: #fff; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; box-shadow: inset 0 1px 0 #ffffff47, inset 0 -1px 0 #00287a33, 0 1px 2px #063ea533, 0 10px 22px -10px #075cffb3; transition: transform var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-smooth-out); }
.primary-action:not(:disabled):is(:hover, :focus-visible) { background-color: var(--blue-hover); box-shadow: inset 0 1px 0 #ffffff52, inset 0 -1px 0 #00287a33, 0 2px 4px #063ea533, 0 16px 30px -12px #075cffcc; transform: translateY(-1px); }
.primary-action:not(:disabled):active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.primary-action:disabled { cursor: wait; opacity: .6; }
.primary-action:focus-visible { outline: 2px solid #0a2a63; outline-offset: 3px; }
.action-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff1f; transition: background var(--duration-quick) var(--ease-smooth-out); }
.primary-action:not(:disabled):is(:hover, :focus-visible) .action-arrow { background: #ffffff2e; }
.primary-action:not(:disabled):is(:hover, :focus-visible) .cta-arrow { transform: translateX(3px); }
.complete-card .quiet-link { display: inline-block; margin-top: 11px; padding-block: 5px; color: #6a758c; font-size: 12.5px; font-weight: 650; }
.complete-card .quiet-link:is(:hover, :focus-visible) { color: var(--blue); }
.auth-shell--complete .t-stagger-line { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-medium)); transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out), filter var(--duration-very-slow) var(--ease-smooth-out); will-change: transform, opacity, filter; }
.auth-shell--complete .t-stagger-line--2 { transition-delay: var(--duration-stagger); }
.auth-shell--complete .t-stagger-line--3 { transition-delay: calc(var(--duration-stagger) * 2); }
.auth-shell--complete .t-stagger-line--4 { transition-delay: calc(var(--duration-stagger) * 3); }
.auth-shell--complete .t-stagger-line--5 { transition-delay: calc(var(--duration-stagger) * 4); }
.auth-shell--complete .t-stagger.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.auth-shell--complete .t-stagger.is-hiding .t-stagger-line { opacity: 0; transform: translateY(0); filter: blur(0); transition: opacity var(--duration-quick) var(--ease-in-out); transition-delay: 0s; }
.auth-shell--complete .complete-content.is-immediate .t-stagger-line { transition: none; }
.auth-shell--complete[data-account-state="connecting"] .complete-status span { animation: account-pulse 1200ms var(--ease-in-out) infinite; }
.auth-shell--complete[data-account-state="connecting"] .complete-mark { animation: auth-mark-float 2800ms var(--ease-in-out) infinite; }
.auth-shell--complete:not([data-account-state="connecting"]) .complete-steps { display: none; }
.auth-shell--complete[data-account-state="connected"] .complete-status { color: #236344; }
.auth-shell--complete[data-account-state="connected"] .complete-status span { background: #269366; box-shadow: 0 0 0 4px #e7f5ee; }
.auth-shell--complete[data-account-state="connected"] .complete-mark { box-shadow: 0 18px 48px #075cff24; animation: mark-land var(--duration-very-slow) var(--ease-bounce) both; }
.auth-shell--complete[data-account-state="error"] .complete-status { color: #b43a42; }
.auth-shell--complete[data-account-state="error"] .complete-status span { background: #d9534f; box-shadow: 0 0 0 4px #fbe9e9; }

/* The crew peeks over the account card the way it does over Try Sumlino: it
   rises just after the card, then bobs gently out of step. On the completion
   page it waits below the edge and rises when the account connects. */
.auth-crew { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 46px; overflow: hidden; pointer-events: none; }
.auth-crew svg { position: absolute; bottom: -15px; width: 54px; height: auto; overflow: visible; filter: drop-shadow(0 6px 8px #17345420); animation: crew-rise 620ms cubic-bezier(.34,1.4,.64,1) both, crew-bob 3.2s ease-in-out; }
.auth-crew svg:nth-child(2) { left: 13%; color: #df6355; rotate: -10deg; animation-delay: 420ms, 1.2s; }
.auth-crew svg:nth-child(3) { left: 27%; width: 44px; color: #23856d; rotate: 6deg; animation-delay: 510ms, 1.7s; }
.auth-crew svg:nth-child(4) { right: 14%; color: #c88a12; rotate: 9deg; animation-delay: 470ms, .4s; }
.auth-crew--waiting svg { translate: 0 56px; animation: none; }
.auth-shell--complete[data-account-state="connected"] .auth-crew--waiting svg { animation: crew-rise 620ms cubic-bezier(.34,1.4,.64,1) both, crew-bob 3.2s ease-in-out; }
.auth-shell--complete[data-account-state="connected"] .auth-crew--waiting svg:nth-child(2) { animation-delay: 120ms, 1.2s; }
.auth-shell--complete[data-account-state="connected"] .auth-crew--waiting svg:nth-child(3) { animation-delay: 210ms, 1.7s; }
.auth-shell--complete[data-account-state="connected"] .auth-crew--waiting svg:nth-child(4) { animation-delay: 170ms, .4s; }
.auth-crew-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A small burst of capsules in the crew's colours when the account connects. */
.mark-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.mark-burst i { position: absolute; left: -7px; top: -4px; width: 14px; height: 8px; border-radius: 99px; background: var(--piece, var(--blue)); opacity: 0; transform: rotate(var(--angle)) translateX(0) scale(.4); }
.mark-burst i:nth-child(1) { --angle: -90deg; --piece: #075cff; }
.mark-burst i:nth-child(2) { --angle: -45deg; --piece: #df6355; }
.mark-burst i:nth-child(3) { --angle: 0deg; --piece: #23856d; }
.mark-burst i:nth-child(4) { --angle: 45deg; --piece: #c88a12; }
.mark-burst i:nth-child(5) { --angle: 90deg; --piece: #8960c9; }
.mark-burst i:nth-child(6) { --angle: 135deg; --piece: #17899b; }
.mark-burst i:nth-child(7) { --angle: 180deg; --piece: #c65c87; }
.mark-burst i:nth-child(8) { --angle: 225deg; --piece: #075cff; }
.auth-shell--complete[data-account-state="connected"] .mark-burst i { animation: burst-piece 820ms cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--duration-micro) + var(--k, 0) * 18ms); }
.mark-burst i:nth-child(2n) { --k: 1; }
.mark-burst i:nth-child(3n) { --k: 2; }

@keyframes card-in { from { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes auth-progress-in { from { opacity: 0; transform: translateY(var(--distance-base)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes auth-line-in { from { opacity: 0; transform: translateY(var(--distance-medium)); filter: blur(var(--blur-medium)); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes loader-pass { from { transform: translateX(-110%); } to { transform: translateX(210%); } }
@keyframes auth-mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes account-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes step-spin { to { transform: rotate(360deg); } }
@keyframes step-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes step-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes step-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-land { 0% { transform: translateY(-6px) scale(1.04); } 100% { transform: translateY(0) scale(1); } }
@keyframes crew-rise { from { translate: 0 56px; } to { translate: 0 0; } }
@keyframes crew-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes burst-piece { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(18px) scale(.4); } 35% { opacity: 1; transform: rotate(var(--angle)) translateX(54px) scale(1); } 100% { opacity: 0; transform: rotate(var(--angle)) translateX(74px) scale(.7); } }

@media (max-width: 560px) {
  .auth-shell { padding: 92px 16px 28px; gap: 18px; }
  .auth-brand { top: 20px; left: 20px; font-size: 24px; }
  .auth-card { padding: 30px 22px 24px; border-radius: 24px; }
  .auth-greeting { width: 80px; height: 80px; margin-bottom: 18px; }
  .auth-greeting [data-sumlino-character] { --character-size: 54px; width: 54px; }
  .provider-button { padding-left: 16px; }
  .complete-steps { width: min(280px, 100%); }
}
@media (max-width: 420px) { .auth-crew svg { width: 44px; bottom: -13px; } .auth-crew svg:nth-child(3) { width: 36px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .auth-choice > *, .provider-list > .provider-button, .auth-shell--complete .t-stagger-line { opacity: 1; transform: none; filter: none; }
  .complete-steps li[data-state="done"] i svg { stroke-dashoffset: 0; }
  .complete-steps li[data-state="active"] span { background: none; color: inherit; }
  .complete-steps li[data-state="active"] i::before { display: none; }
  .auth-crew--waiting svg { translate: 0 56px; }
  .auth-shell--complete[data-account-state="connected"] .auth-crew--waiting svg { translate: 0 0; }
  .mark-burst { display: none; }
}