/* pc-signup.css: the sign-up / sign-in card (auth.html), sign-up redo v1.
 *
 * The flat app card in place of the neumorphic flip-circles and the Three.js background. Reads the design tokens from
 * assets/pc-shared.css (linked first): --text, --muted, --border, --blue, --orange, --modal-bg, --blue-border,
 * --blue-dim, --radius-*, --shadow-card, including its light-theme AA overrides (--blue #1a6a94, --orange #b23a0a).
 * The few values that are not tokens are the spec's own (section 6): the primary button gradients (white text passes
 * AA on both ends: #1a7aaa 4.76:1, #156590 6.37:1, #1a6a94 5.94:1), the focus ring and the error / success text colours.
 * Every class is namespaced au- so nothing here touches another page.
 */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

.au-body {
  --au-field: rgba(255,255,255,0.05);
  --au-ctl: var(--muted);                 /* control boundary: >= 3:1 against the card in both themes (WCAG 1.4.11) */
  --au-focus: #5cc4ec;
  --au-err: #ff8a65;
  --au-ok: #4ade80;
  --au-info: #5cc4ec;
  --au-step-on: #1a7aaa;                  /* current step number fill: white 12px bold on it is 4.76:1 (--blue #2a93c1 was 3.5:1) */
  --au-btn: linear-gradient(135deg, #1a7aaa 0%, #156590 100%);
  --au-btn-hover: linear-gradient(135deg, #1f86ba 0%, #1a7aaa 100%);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(ellipse at 20% 20%, rgba(42,147,193,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(241,66,11,0.06) 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
[data-theme="light"] .au-body {
  --au-field: #ffffff;
  --au-step-on: #1a6a94;                  /* 5.94:1 with white */
  --au-focus: #1a6a94;
  --au-err: #b42318;
  --au-ok: #166534;
  --au-info: #1a6a94;
  --au-btn: linear-gradient(135deg, #1a6a94 0%, #145778 100%);
  --au-btn-hover: linear-gradient(135deg, #1f7aa8 0%, #1a6a94 100%);
}
.au-body [hidden] { display: none !important; }
.au-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* top bar */
.au-top { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.au-wordmark { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.au-body .au-top .au-wordmark { color: var(--text); }
.au-theme { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.au-theme:hover { background: var(--blue-dim); }
[data-theme="dark"] .au-theme-moon, [data-theme="light"] .au-theme-sun { display: none; }

/* layout */
.au-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 16px 12px 24px; }
.au-card {
  width: 100%; max-width: 440px; box-sizing: border-box;
  padding: 32px 32px 28px;
  background: var(--modal-bg);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.au-intro { flex: 0 1 460px; }
@media (max-width: 899px) { .au-intro { display: none !important; } }
/* With the value panel showing (Create account, desktop), its top lines up with the card's top: the pair stays centred
   on the page as one block, but each column starts at the top of that block (it was centred against the much taller
   card, leaving a gap above the eyebrow). The padding equals the card's top padding + border, so the eyebrow sits level
   with the progress strip. Sticky keeps it in view if the card outgrows the window. Screens without the panel (the other
   steps, phones) keep the plain centred card. */
@media (min-width: 900px) {
  .au-main:has(> .au-intro:not([hidden])) { align-items: flex-start; margin-block: auto; flex-grow: 0; }
  .au-intro { padding-top: 33px; position: sticky; top: 16px; }
}
@media (min-width: 900px) { .au-phone-only { display: none; } }
.au-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.au-intro-title { margin: 0 0 24px; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 44px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.au-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.au-benefits li { position: relative; padding-left: 32px; font-size: 17px; color: var(--text); }
.au-benefits li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-dim); border: 1px solid var(--blue); }
.au-benefits li::after { content: ''; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* progress strip: three equal columns (fits 336px). The current phase is bold, its number is filled, and it carries
   aria-current; done phases show a check (never colour alone). */
.au-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.au-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 10px; border-top: 3px solid var(--border); }
.au-step-n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--au-ctl); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.au-steps li.is-done { border-top-color: var(--blue); }
.au-steps li.is-done .au-step-n { border-color: var(--blue); color: var(--blue); }
.au-steps li[aria-current="step"] { color: var(--text); font-weight: 700; border-top-color: var(--blue); }
.au-steps li[aria-current="step"] .au-step-n { background: var(--au-step-on); border-color: var(--au-step-on); color: #fff; }

/* type */
.au-h { margin: 0 0 6px; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 30px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); }
.au-h:focus, .au-h:focus-visible { outline: none; }   /* a script focus target (tabindex=-1); Tab never reaches it */
.au-sub { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.au-body-text { margin: 0 0 20px; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.au-icon { color: var(--blue); margin-bottom: 8px; }
.au-help { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.au-alt { margin: 18px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.au-note { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--blue-border); background: var(--blue-dim); font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.au-body a { color: var(--orange); font-weight: 600; text-underline-offset: 2px; }
.au-body a:hover { text-decoration-thickness: 2px; }
.au-body .au-btn, .au-body .au-btn:hover { color: #fff; text-decoration: none; }

/* fields */
.au-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.au-field label { font-size: 15px; font-weight: 600; color: var(--text); }
.au-field input[type="email"], .au-field input[type="password"], .au-field input[type="text"] {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--au-field); border: 1px solid var(--au-ctl); border-radius: var(--radius-sm);
}
.au-field input::placeholder { color: var(--muted); opacity: 1; }
.au-field input[aria-invalid="true"] { border-color: var(--au-err); border-width: 2px; }
.au-pw { position: relative; }
.au-pw input { padding-right: 76px !important; }
.au-pw-toggle { position: absolute; top: 2px; right: 2px; height: 44px; min-width: 64px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.au-pw-toggle:hover { background: var(--blue-dim); }
/* Pressed (password visible): the name stays "Show password" and aria-pressed carries the state; sighted members see the
   filled, underlined button AND the plain text in the field. */
.au-pw-toggle[aria-pressed="true"] { background: var(--blue-dim); box-shadow: inset 0 -3px 0 var(--blue); }
.au-hint { margin: 0; font-size: 14px; color: var(--muted); }
.au-error { margin: 0; font-size: 15px; color: var(--au-err); display: flex; gap: 6px; align-items: flex-start; }
.au-error::before { content: '!'; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--au-err); color: var(--modal-bg); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* checkboxes: the whole row is the target, 16px text */
.au-checks { border: 0; margin: 4px 0 12px; padding: 0; min-width: 0; }
.au-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; box-sizing: border-box; font-size: 16px; color: var(--text); cursor: pointer; }
.au-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.au-check-inline { padding: 0; align-items: center; }
.au-check-inline input { margin: 0; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 12px; }
.au-link { display: inline-flex; align-items: center; min-height: 44px; }

/* status + alerts */
.au-alert { font-size: 15px; color: var(--au-err); margin: 0 0 12px; overflow-wrap: anywhere; }
.au-alert:empty { margin: 0; }
.au-status { margin: 0 0 12px; font-size: 15px; color: var(--au-info); overflow-wrap: anywhere; }
.au-status:empty { margin: 0; }
.au-status.ok { color: var(--au-ok); }
.au-status.err { color: var(--au-err); }

/* buttons: one primary everywhere (blue, white text, AA), secondary outlined */
.au-btn {
  width: 100%; min-height: 48px; padding: 0 18px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm);
  background: var(--au-btn); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,122,170,0.25);
}
.au-btn:hover { background: var(--au-btn-hover); }
.au-btn[disabled], .au-btn-2[disabled] { opacity: 0.7; cursor: default; }
.au-btn-2 {
  width: 100%; min-height: 48px; padding: 0 18px; box-sizing: border-box;
  border: 1px solid var(--au-ctl); border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.au-btn-2:hover:not([disabled]) { background: var(--blue-dim); }
.au-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

/* focus: 2px ring, 2px offset, every interactive element */
.au-body a:focus-visible, .au-body button:focus-visible, .au-body input:focus-visible { outline: 2px solid var(--au-focus); outline-offset: 2px; }
.au-check input:focus-visible { outline-offset: 3px; }

.au-foot { padding: 16px 0 24px; display: flex; justify-content: center; opacity: 0.85; }
.au-foot img { height: 32px; width: auto; }

@media (max-width: 480px) {
  .au-top { padding: 0 12px; }
  .au-main { align-items: flex-start; padding-top: 8px; }
  .au-card { padding: 22px 20px 20px; }
  .au-h { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .au-body * { transition: none !important; animation: none !important; } }

/* ── Login splash (redesign 2026-10-23, the product owner's reference) ──────────────────────────────────────────────
 * Applies ONLY while html.au-login is set: pc-auth-page.js showView() adds it for the "login" screen and removes it for
 * every other one (auth.html's head script sets it before first paint when Log in is the likely screen). Nothing above
 * this line changed, so every sign-up screen keeps its flat card.
 * The splash is dark in BOTH themes (a branded screen): the tokens are pinned here, over the light-theme values.
 * Contrast (measured on the card #181d30 / field #0d111d): text 16:1, muted #a3acbd 7.3:1, placeholder 7.4:1, subtitle
 * blue #5fa8d3 6.4:1, "Sign up" orange #ef6a34 5.4:1, errors #ff8a65 7.2:1; control edges (field #6a748e 3.6:1, switch
 * #8a93a8 5.4:1, focus orange #e8622c 4.9:1) clear the 3:1 non-text minimum. */
html.au-login { color-scheme: dark; background: #070a14; }
html.au-login .au-body {
  --bg: #070a14;
  --text: #e8edf5;
  --muted: #a3acbd;
  --border: rgba(255,255,255,0.10);
  --blue: #5fa8d3;
  --orange: #ef6a34;
  --blue-dim: rgba(95,168,211,0.14);
  --blue-border: rgba(95,168,211,0.35);
  --modal-bg: #181d30;
  --au-ctl: #8a93a8;
  --au-field: #0d111d;
  --au-focus: #5cc4ec;
  --au-err: #ff8a65;
  --au-ok: #4ade80;
  --au-info: #5cc4ec;
  --au-step-on: #1a7aaa;
  --au-sp-orange: #e8622c;
  --au-sp-edge: #6a748e;
  --au-d: clamp(560px, calc(100vh - 210px), 640px);
  --au-d: clamp(560px, calc(100dvh - 210px), 640px);
  position: relative;
  overflow-x: hidden;
  color: var(--text);
  /* !important only to beat pc-shared.css's `[data-theme="light"] body { background: ... !important }` */
  background:
    radial-gradient(ellipse 60% 45% at 96% 104%, rgba(232,98,44,0.16) 0%, rgba(232,98,44,0.05) 45%, transparent 75%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40,52,86,0.35) 0%, transparent 70%),
    linear-gradient(180deg, #0a0e1a 0%, #070a14 100%) !important;
  background-attachment: fixed !important;
}
/* the star field: two fixed layers of tiny dots (CSS only), the second one twinkles */
html.au-login .au-body::before,
html.au-login .au-body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
html.au-login .au-body::before {
  background-image:
    radial-gradient(1.8px 1.8px at 23px 41px, rgba(170,200,235,0.8), transparent),
    radial-gradient(1.4px 1.4px at 141px 97px, rgba(170,200,235,0.6), transparent),
    radial-gradient(2.2px 2.2px at 77px 173px, rgba(110,165,220,0.7), transparent),
    radial-gradient(1.6px 1.6px at 197px 13px, rgba(232,98,44,0.6), transparent),
    radial-gradient(1.8px 1.8px at 59px 251px, rgba(200,220,245,0.55), transparent),
    radial-gradient(1.5px 1.5px at 283px 199px, rgba(150,190,230,0.65), transparent);
  background-size: 233px 233px, 317px 317px, 271px 271px, 389px 389px, 307px 307px, 353px 353px;
}
html.au-login .au-body::after {
  background-image:
    radial-gradient(2.4px 2.4px at 37px 61px, rgba(190,215,245,0.9), transparent),
    radial-gradient(2px 2px at 211px 137px, rgba(140,185,230,0.85), transparent),
    radial-gradient(2.2px 2.2px at 113px 293px, rgba(232,98,44,0.65), transparent),
    radial-gradient(3px 3px at 331px 19px, rgba(110,165,220,0.75), transparent);
  background-size: 419px 419px, 461px 461px, 523px 523px, 587px 587px;
  animation: au-twinkle 5s ease-in-out infinite alternate;
}
@keyframes au-twinkle { 0% { opacity: 0.25; } 50% { opacity: 0.9; } 100% { opacity: 0.45; } }
html.au-login .au-top, html.au-login .au-main, html.au-login .au-foot { position: relative; z-index: 1; }

/* wordmark */
html.au-login .au-top { height: auto; justify-content: center; padding: 44px 16px 26px; }
html.au-login .au-theme { display: none; }        /* the splash is dark in both themes: a theme switch here would do nothing */
html.au-login .au-body .au-top .au-wordmark {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: clamp(26px, 4.2vw, 52px); line-height: 1.1; letter-spacing: 0.2em; margin-right: -0.2em;
  color: #f3c8b2;                                   /* fallback where background-clip:text is unsupported */
  background: linear-gradient(90deg, #e8622c 0%, #f08a5a 24%, #fdf3ec 46%, #d7e8f5 62%, #7fb6dc 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* the round glass card */
html.au-login .au-main { padding: 8px 16px 20px; }
html.au-login .au-card {
  width: var(--au-d); max-width: none; min-height: var(--au-d); aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px calc(var(--au-d) * 0.2);
  border-radius: 50%;
  border: 1.5px solid rgba(232,98,44,0.42);
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,0.05) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #1b2036 0%, #181d30 55%, #141828 100%);
  box-shadow:
    0 0 0 1px rgba(232,98,44,0.06),
    0 0 46px rgba(232,98,44,0.12),
    0 34px 90px rgba(0,0,0,0.65),
    inset 0 2px 0 rgba(255,255,255,0.04),
    inset 0 0 70px rgba(0,0,0,0.5);
}
html.au-login .au-view { width: 100%; }
html.au-login .au-login-h {
  margin: 0 0 6px; text-align: center;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: 0; text-transform: none;
  color: #dfeaf6;
  background: linear-gradient(90deg, #f2f6fb 0%, #9cc9e8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.au-login .au-login-sub {
  margin: 0 0 26px; text-align: center; color: #5fa8d3;
  font-size: 13px; font-weight: 600; letter-spacing: 0.32em; margin-right: -0.32em; text-transform: uppercase;
}
html.au-login .au-note { background: rgba(95,168,211,0.12); }

/* pill inputs with an icon; the focused one gets the orange glow */
html.au-login .au-pill { margin-bottom: 16px; gap: 6px; }
html.au-login .au-pill-in { position: relative; border-radius: 999px; }
html.au-login .au-pill-ico { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #8c96ab; pointer-events: none; transition: color .15s; }
html.au-login .au-pill input[type="email"], html.au-login .au-pill input[type="password"], html.au-login .au-pill input[type="text"] {
  height: 54px; padding-left: 52px; padding-right: 20px;
  border-radius: 999px; border: 1px solid var(--au-sp-edge);
  background: var(--au-field); color: var(--text);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45);
  transition: border-color .15s, box-shadow .15s;
}
html.au-login .au-pill input::placeholder { color: #9aa3b8; }
html.au-login .au-pill input:focus, html.au-login .au-pill input:focus-visible {
  outline: none; border-color: var(--au-sp-orange);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px var(--au-sp-orange), 0 0 18px rgba(232,98,44,0.35);
}
html.au-login .au-pill-ico-mail { color: #5fa8d3; }
html.au-login .au-pill-in:focus-within .au-pill-ico { color: #7cbbe2; }
html.au-login .au-pill input[aria-invalid="true"] { border-color: var(--au-err); border-width: 2px; }
html.au-login .au-pill input:-webkit-autofill {
  -webkit-text-fill-color: #e8edf5; caret-color: #e8edf5;
  box-shadow: inset 0 0 0 40px #0d111d; transition: background-color 9999s;
}
html.au-login .au-pill .au-error { padding-left: 18px; }
html.au-login .au-pw-toggle { top: 5px; right: 6px; height: 44px; border-radius: 999px; color: #b8c0d0; font-size: 14px; }

/* Remember me (a real switch: role=switch on the checkbox, the track is drawn by the span after it) + Forgot password */
html.au-login .au-login-row { margin: 0 0 14px; }
html.au-login .au-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; color: var(--text); font-size: 15px; }
html.au-login .au-switch input { position: absolute; left: 0; top: 50%; width: 46px; height: 26px; margin: -13px 0 0; opacity: 0; cursor: pointer; }
html.au-login .au-switch-track {
  position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; box-sizing: border-box;
  background: #252b40; border: 1px solid var(--au-ctl); transition: background .2s, border-color .2s;
}
html.au-login .au-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #c9d1de; box-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: transform .2s, background .2s;
}
html.au-login .au-switch input:checked + .au-switch-track { background: linear-gradient(90deg, #1f6f9c, #2a87bb); border-color: #4aa3d4; }
html.au-login .au-switch input:checked + .au-switch-track::after { transform: translateX(20px); background: #fff; }
html.au-login .au-switch input:focus-visible + .au-switch-track { outline: 2px solid var(--au-focus); outline-offset: 2px; }
html.au-login .au-login-row .au-link { color: #c9d1de; font-weight: 500; font-size: 15px; text-decoration: none; }
html.au-login .au-login-row .au-link:hover { color: #fff; text-decoration: underline; }

/* SIGN IN: a dark pill with a faint warm rim */
html.au-login .au-btn-signin, html.au-login .au-body .au-btn-signin:hover {
  min-height: 56px; border-radius: 999px;
  background: linear-gradient(180deg, #161b2d 0%, #0f1322 100%);
  border: 1px solid rgba(232,98,44,0.32);
  color: #e8edf5; font-size: 16px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color .15s, box-shadow .15s;
}
html.au-login .au-btn-signin:hover:not([disabled]) { border-color: rgba(232,98,44,0.7); box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 16px rgba(232,98,44,0.25), inset 0 1px 0 rgba(255,255,255,0.06); }
html.au-login .au-alt { margin-top: 18px; font-size: 16px; color: #c9d1de; }
html.au-login .au-alt a { color: #ef6a34; font-weight: 700; text-decoration: none; }
html.au-login .au-alt a:hover { text-decoration: underline; }

/* Google / Apple (hidden while their switches are off) */
html.au-login .au-social { display: flex; justify-content: center; gap: 30px; margin-top: 18px; }
html.au-login .au-social-btn {
  width: 56px; height: 56px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #1d2238 0%, #11152a 100%); color: #fff; cursor: pointer;
  border: 1px solid var(--au-sp-edge); box-shadow: 0 8px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
html.au-login .au-social-btn:hover { border-color: rgba(232,98,44,0.6); }

html.au-login .au-foot { opacity: 1; padding: 22px 0 32px; }
html.au-login .au-foot img { height: 56px; }

/* phones and narrow windows: the circle would overflow, so it becomes a rounded glass card */
@media (max-width: 680px) {
  html.au-login .au-top { padding: 28px 12px 18px; }
  html.au-login .au-body .au-top .au-wordmark { font-size: clamp(22px, 7vw, 40px); letter-spacing: 0.14em; margin-right: -0.14em; }
  html.au-login .au-main { align-items: flex-start; padding: 4px 12px 16px; }
  html.au-login .au-card { width: 100%; max-width: 440px; min-height: 0; aspect-ratio: auto; border-radius: 28px; padding: 32px 22px 28px; }
  html.au-login .au-login-h { font-size: 34px; }
  html.au-login .au-login-sub { font-size: 12px; letter-spacing: 0.24em; margin-right: -0.24em; }
  html.au-login .au-foot img { height: 44px; }
}
@media (max-width: 380px) {
  html.au-login .au-card { padding: 28px 16px 24px; }
  html.au-login .au-login-row { gap: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html.au-login .au-body::after { animation: none; opacity: 0.6; }
}