/* Sign up, sign in, password reset and welcome: one family with the owner's
   desk. Blue-white-blue, like the desk: a navy rail with the brand, a white
   page for the form, and Ava's navy panel. Phones stack the same three: a
   navy bar, the white form, then Ava's card.

   Loaded after /css/aestar.css on /onboarding (site/signup.mjs) and after
   /assets/product-tokens.css on login.html, reset.html and welcome.html.
   Every rule is scoped to body.au, so the marketing pages never see it. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

/* Colours are the desk's own (light, "blue-white-blue"). */
.au {
  --au-canvas: #fafaf9;
  --au-ink: #09090b;
  --au-body-ink: #3f3f46;
  --au-muted: #71717a;
  --au-line: #e4e4e7;
  --au-line-strong: #d4d4d8;
  --au-orange: #c94f0c; /* white on it is 4.56:1 (was #ea580c, 3.56:1) */
  --au-orange-hover: #c2410c;
  --au-orange-soft: #fff7ed;
  --au-navy: #0b1f3a;
  --au-navy-deep: #0a1128;
  --au-navy-line: #143056;
  --au-navy-line-2: #1b3c68;
  --au-on-navy: #f4f7fb;
  --au-on-navy-2: #c9d6e6;
  --au-on-navy-mute: #9aacbf;
  --au-amber: #fb923c;
  --au-amber-soft: #fdba74;
  --au-ok: #16a34a;
  --au-display: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --au-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --au-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --au-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.12);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--au-canvas);
  color: var(--au-ink);
  font: 400 15px/1.5 var(--au-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}
/* Resets carry no weight (:where), so every component class below wins. */
:where(.au) *, :where(.au) *::before, :where(.au) *::after { box-sizing: border-box; }
:where(.au) :where(h1, h2, h3, p, ol, ul, figure) { margin: 0; }
:where(.au) img { display: block; max-width: 100%; height: auto; }
:where(.au) :where(button, input, select) { font: inherit; color: inherit; }
:where(.au) :focus-visible { outline: 2px solid var(--au-orange); outline-offset: 2px; border-radius: 8px; }
:where(.au) [tabindex="-1"]:focus { outline: none; }
.au [hidden] { display: none !important; }
.au .nowrap { white-space: nowrap; }
.au .au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.au .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #fff; color: var(--au-ink); }
.au .skip:focus { left: 12px; }

/* The frame: rail | page | Ava, 12px apart on the desk's canvas. */
.au-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 404px;
  gap: 12px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 12px;
}
.au-rail {
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 18px 14px 16px;
  border-radius: 16px;
  background: var(--au-navy);
  color: var(--au-on-navy);
  box-shadow: var(--au-lift);
  scrollbar-width: none;
}
.au-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 5.5vh, 64px) clamp(24px, 4.5vw, 64px) 32px;
  border: 1px solid var(--au-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--au-lift);
}
/* Ava's panel grows with what she shows, so nothing in it is ever cut off. */
.au-ava {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--au-amber);
  border-radius: 16px;
  background: var(--au-navy);
  color: var(--au-on-navy);
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1);
}
.au-foot { display: none; }

/* Rail */
.au-logo { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 4px 6px; border-radius: 8px; color: #fff; text-decoration: none; font: 800 15px/1 var(--au-body); letter-spacing: 0.14em; }
.au-logo img { width: 22px; height: 22px; flex: none; }
.au-rail-mid { display: grid; gap: 26px; }
.au-group { margin: 0 8px 8px; font: 700 10px/1.2 var(--au-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--au-on-navy-mute); }
.au-steps { list-style: none; padding: 0; display: grid; gap: 2px; }
.au-steps li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 12px; font: 600 13.5px/1.25 var(--au-body); color: var(--au-on-navy-2); }
.au-steps .n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--au-navy-line); color: var(--au-on-navy-2); font: 700 11.5px/1 var(--au-body); }
.au-steps .n svg { width: 12px; height: 12px; }
.au-steps li[aria-current="step"] { background: #36343a; color: var(--au-amber); box-shadow: 0 8px 18px -12px rgba(78, 125, 255, 0.7); }
.au-steps li[aria-current="step"] .n { background: var(--au-amber); color: var(--au-navy-deep); }
.au-steps li.is-done { color: var(--au-on-navy); }
.au-steps li.is-done .n { background: var(--au-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; color: transparent; }
.au-list { list-style: none; padding: 0 8px; display: grid; gap: 10px; }
.au-list li { position: relative; padding-left: 25px; font-size: 13px; line-height: 1.45; color: var(--au-on-navy-2); text-wrap: balance; }
.au-list li::before { content: ""; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: rgba(22, 163, 74, 0.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat; }
.au-promise { padding: 0 8px; font: 800 24px/1.18 var(--au-display); letter-spacing: -0.025em; color: #fff; }
.au-rail-foot { display: grid; gap: 16px; margin-top: auto; padding: 0 6px; }
.au-rail-q { font-size: 13px; line-height: 1.4; color: var(--au-on-navy-mute); }
.au-rail-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--au-navy-line-2); border-radius: 999px; background: var(--au-navy-deep); color: var(--au-on-navy); font: 650 14px/1 var(--au-body); text-decoration: none; white-space: nowrap; }
.au-rail-cta.is-orange { border-color: var(--au-orange); background: var(--au-orange); color: #fff; }
.au-rail-q + .au-rail-cta { margin-top: -8px; }
.au-rail-cta + .au-rail-cta { margin-top: -6px; }
/* Signup, once the account exists: no "Already have an account?" any more. */
.au.is-done .au-rail-q, .au.is-done .au-rail-cta { display: none; }
.au-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.au-legal a { color: var(--au-on-navy-mute); text-decoration: none; }

/* The white page */
.au-form { width: 100%; max-width: 560px; margin: 0 auto; }
.au-card { width: 100%; max-width: 420px; margin: auto; }
.au-h1 { font: 800 34px/1.12 var(--au-display); letter-spacing: -0.03em; color: var(--au-ink); text-wrap: balance; }
.au-sub { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--au-muted); text-wrap: pretty; }
.au-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--au-orange-soft); color: var(--au-orange-hover); font: 650 12.5px/1.2 var(--au-body); }
.au-kicker svg { width: 14px; height: 14px; flex: none; }
.au-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font: 600 13px/1 var(--au-body); color: var(--au-muted); }
.au-progress-bars { display: flex; gap: 6px; margin-left: auto; }
.au-progress-bars i { display: block; width: 34px; height: 5px; border-radius: 99px; background: var(--au-line); }
.au-progress-bars i.on { background: var(--au-orange); }

.au-field { display: grid; gap: 7px; margin-top: 16px; min-width: 0; }
.au-label { display: block; font: 600 14px/1.3 var(--au-body); color: var(--au-ink); }
.au-label em { font-style: normal; font-weight: 500; color: var(--au-muted); }
.au-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-hint { font-size: 13px; line-height: 1.45; color: var(--au-muted); }
/* On phones Ava's panel is below the form, so the greeting shows here too. */
.au-greet { display: none; }
.au-greet [data-ava-shop] { color: var(--au-ink); font-weight: 600; }
.au-input, .au-select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--au-line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--au-ink);
  font: 500 16px/1.3 var(--au-body);
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.au-input::placeholder { color: #a1a1aa; opacity: 1; }
.au-input:focus, .au-select:focus { border-color: var(--au-orange); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18); }
.au-input:focus-visible, .au-select:focus-visible { outline: none; }
.au-input.bad, .au-input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.au-select { appearance: none; -webkit-appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat; cursor: pointer; }
.au-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.au-row.is-city { grid-template-columns: minmax(0, 1fr) 96px; }
.au-row.is-tight .au-field { margin-top: 10px; }
.au-pw { position: relative; }
.au-pw .au-input { padding-right: 52px; }
.au-eye { position: absolute; top: 50%; right: 4px; display: grid; place-items: center; width: 44px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--au-muted); transform: translateY(-50%); cursor: pointer; }
.au-eye svg { width: 20px; height: 20px; }
.au-eye .off, .au-eye[aria-pressed="true"] .on { display: none; }
.au-eye[aria-pressed="true"] .off { display: block; }
.au-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.au-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--au-line-strong); border-radius: 999px; background: #fff; color: var(--au-body-ink); font: 600 15px/1 var(--au-body); cursor: pointer; transition: background-color 0.14s, border-color 0.14s, color 0.14s; }
.au-chip[aria-checked="true"] { border-color: var(--au-navy); background: var(--au-navy); color: #fff; }
.au-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 20px; font-size: 14.5px; line-height: 1.45; color: var(--au-body-ink); cursor: pointer; }
.au-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--au-orange); cursor: pointer; }
.au-link { color: var(--au-orange-hover); font-weight: 650; text-decoration: none; }
button.au-link { padding: 0; border: 0; background: none; font-size: 13.5px; cursor: pointer; }

.au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--au-orange);
  color: #fff;
  font: 650 16px/1 var(--au-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(234, 88, 12, 0.45);
  transition: background-color 0.15s, border-color 0.15s;
}
.au-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.au-btn.is-wide { width: 100%; margin-top: 24px; }
.au-btn-line { border: 1px solid var(--au-line-strong); background: #fff; color: var(--au-ink); box-shadow: none; }
.au-back { padding: 12px 10px; border: 0; border-radius: 10px; background: none; color: #52525b; font: 600 15px/1 var(--au-body); cursor: pointer; }
.au-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.au-actions .au-btn { min-width: 180px; }
.au-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 2px; border: 0; background: none; color: var(--au-orange-hover); font: 650 15px/1 var(--au-body); cursor: pointer; }
.au-fine { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--au-muted); text-wrap: pretty; }
.au-error { margin-top: 16px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 12px; background: #fef2f2; color: #991b1b; font-size: 14.5px; line-height: 1.45; }
.au-error a { color: #991b1b; font-weight: 700; }
/* Login keeps its alert box in the page; empty, it takes no room. */
.au-error:empty { margin: 0; padding: 0; border: 0; }
.au-spin { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: au-spin 0.8s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }

/* Signup: service and price rows (built by js/signup.js) */
.au-price-head { margin-top: 22px; font: 600 12.5px/1.2 var(--au-body); color: var(--au-muted); }
.au-prices { display: grid; gap: 10px; margin-top: 22px; }
.au-price-head + .au-prices { margin-top: 8px; }
.au-price { display: grid; grid-template-columns: 22px minmax(0, 1fr) 124px; gap: 10px; align-items: center; transition: opacity 0.15s; }
.au-price.is-off { opacity: 0.5; }
.au-price input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--au-orange); cursor: pointer; }
.au-money { position: relative; }
.au-money .au-input { padding-left: 28px; }
.au-money.is-hour .au-input { padding-right: 42px; }
.au-money span { position: absolute; top: 50%; transform: translateY(-50%); color: var(--au-muted); pointer-events: none; }
.au-money .cur { left: 13px; }
.au-money .per { right: 12px; font-size: 14px; }

/* Signup: the done screen */
.au-done { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 22px; }
.au-done li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--au-line); border-radius: 14px; background: var(--au-canvas); }
.au-done .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--au-orange-soft); color: var(--au-orange-hover); font: 800 14px/1 var(--au-display); }
.au-done b { display: block; font-size: 15.5px; line-height: 1.35; }
.au-done span:not(.n) { display: block; margin-top: 3px; color: var(--au-muted); font-size: 14px; line-height: 1.5; }

/* Sign in: Google / Apple (shown only when switched on), and forgot password */
.au-sso { display: grid; gap: 10px; margin-top: 24px; }
.au-sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--au-line-strong); border-radius: 999px; background: #fff; color: var(--au-ink); font: 600 15px/1 var(--au-body); text-decoration: none; }
.au-sso-btn svg { width: 18px; height: 18px; flex: none; }
.au-or { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--au-muted); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }
.au-forgot { margin-top: 12px; padding: 14px; border: 1px solid var(--au-line); border-radius: 14px; background: var(--au-canvas); font-size: 14px; line-height: 1.5; color: var(--au-muted); }
.au-forgot .done { color: var(--au-ink); }
.au-forgot-row { display: flex; gap: 8px; margin-top: 10px; }
.au-forgot-row .au-input { min-width: 0; min-height: 44px; font-size: 16px; }
.au-btn-sm { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--au-orange); color: #fff; font: 650 14px/1 var(--au-body); cursor: pointer; }
.au-btn-sm[disabled] { opacity: 0.55; cursor: not-allowed; }
.au-forgot-alt { margin-top: 8px; }
.au-new { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--au-line); text-align: center; font-size: 13.5px; color: var(--au-muted); text-wrap: balance; }

/* Sign in: "Email me a sign-in link" first, the password one tap away;
   then "Check your email", and the page the emailed link opens. */
.au-h1:focus { outline: none; }
.au-link-note { text-align: center; }
.au-switch { margin-top: 10px; text-align: center; }
.au-switch button.au-link { min-height: 44px; padding: 0 8px; font-size: 15px; }
.au-sent, .au-land { margin-top: 22px; }
.au-mailnote { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--au-line); border-radius: 14px; background: var(--au-canvas); font-size: 15px; line-height: 1.5; color: var(--au-ink); }
.au-mailnote-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--au-orange-soft); color: var(--au-orange-hover); }
.au-mailnote-ico svg { width: 20px; height: 20px; }
.au-sent .au-btn.is-wide { margin-top: 14px; }
.au-status:empty { display: none; }
.au-land .au-btn.is-wide { margin-top: 0; }
.au-land .au-btn + .au-error:empty + .au-btn { margin-top: 12px; }

/* Ava's panel */
.au-ava-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--au-navy-line); }
.au-mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--au-amber); color: var(--au-navy-deep); font: 800 12.5px/1 var(--au-body); }
.au-ava-head b { font-size: 15px; font-weight: 700; }
.au-state { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--au-amber-soft); white-space: nowrap; }
.au-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--au-amber); box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.22); }
.au-state.is-ok { color: #86efac; }
.au-state.is-ok::before { background: var(--au-ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22); }
.au-ava-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 18px; }
.au-say { padding: 11px 13px; border: 1px solid var(--au-navy-line-2); border-radius: 4px 14px 14px 14px; background: #14233d; font-size: 14px; line-height: 1.5; color: var(--au-on-navy); text-wrap: pretty; }
.au-say b { color: #fff; }
.au-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font: 700 10.5px/1.2 var(--au-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--au-on-navy-mute); }
.au-ex { padding: 3px 8px; border: 1px solid var(--au-navy-line-2); border-radius: 999px; font: 600 11px/1.2 var(--au-body); letter-spacing: 0; text-transform: none; color: var(--au-on-navy-mute); }

/* How Ava answers: the same call card as the homepage's desk. */
.au-call { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--au-navy-line-2); border-radius: 14px; background: var(--au-navy-deep); }
.au-call-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.au-call-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--au-navy-line-2); color: #fff; }
.au-call-av svg { width: 16px; height: 16px; }
.au-call-top b { display: block; font-size: 14px; line-height: 1.3; }
.au-call-top small { display: block; font-size: 12px; line-height: 1.35; color: var(--au-on-navy-mute); }
.au-clock { font: 600 12.5px/1 var(--au-body); font-variant-numeric: tabular-nums; color: var(--au-amber-soft); }
.au-bars { grid-column: 1 / -1; display: flex; align-items: end; gap: 3px; height: 16px; }
.au-bars i { flex: 1; min-height: 3px; border-radius: 2px; background: var(--au-amber); opacity: 0.85; }
.au-line { padding: 8px 11px; border: 1px solid var(--au-navy-line-2); border-radius: 11px; background: #14233d; font-size: 13px; line-height: 1.45; color: #e6edf6; overflow-wrap: anywhere; }
.au-line.is-ava { border-color: #9a4a12; background: #3d2914; }
.au-line > b:first-child { display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--au-on-navy-mute); }
.au-line.is-ava > b:first-child { color: var(--au-amber-soft); }
.au-line [data-ava-shop], .au-line [data-ava-price] { color: #fff; font-weight: 650; }

/* A small piece of the real desk: Needs you, the way the owner sees it. */
.au-desk { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; color: var(--au-ink); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7); }
.au-desk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.au-desk-head b { font: 700 14.5px/1.2 var(--au-body); }
.au-desk-head span { font-size: 12px; color: var(--au-muted); }
.au-desk-sub { padding: 4px 2px 0; font: 700 13px/1.2 var(--au-body); color: var(--au-ink); }
.au-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.au-kpi { min-width: 0; padding: 8px 9px 9px; border: 1px solid var(--au-line); border-radius: 10px; background: var(--au-canvas); }
.au-kpi span { display: block; font: 600 9.5px/1.2 var(--au-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--au-muted); white-space: nowrap; }
.au-kpi b { display: block; margin-top: 4px; font: 700 18px/1.1 var(--au-body); color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-desk-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--au-line); border-radius: 12px; background: var(--au-canvas); }
.au-desk-row p { font-size: 12.5px; line-height: 1.38; color: var(--au-ink); }
.au-desk-row small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--au-muted); }
.au-tag { display: grid; place-items: center; width: 32px; height: 30px; border-radius: 9px; font: 700 9.5px/1 var(--au-body); letter-spacing: 0.04em; }
.au-tag.is-job { background: #dbeafe; color: #1d4ed8; }
.au-tag.is-est { background: #fff7ed; color: #c2410c; }
.au-tag.is-msg { background: #dcfce7; color: #15803d; }
.au-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--au-orange); color: #fff; font: 650 11.5px/1 var(--au-body); white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(234, 88, 12, 0.55); }
.au-ava-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--au-navy-line); border-radius: 0 0 15px 15px; color: var(--au-on-navy); text-decoration: none; }
.au-ava-foot .ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--au-orange); color: #fff; }
.au-ava-foot .ico svg { width: 16px; height: 16px; }
.au-ava-foot small { display: block; font-size: 12px; line-height: 1.3; color: var(--au-on-navy-mute); }
.au-ava-foot b { display: block; font: 700 15px/1.3 var(--au-mono); letter-spacing: -0.01em; }
.au-ava-foot .go { margin-left: auto; color: var(--au-amber-soft); font-size: 18px; line-height: 1; }
/* Sign in, reset, welcome: what Ava shows never changes, so it sits in the middle. */
.au-ava.is-still .au-ava-body { margin-block: auto; }
.au-ava.is-still .au-ava-foot { margin-top: 0; }

/* Laptops: the rail becomes a navy bar across the top. */
@media (max-width: 1179px) {
  .au-shell { grid-template-columns: minmax(0, 1fr) 372px; grid-template-rows: auto 1fr; }
  .au-rail { position: static; grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; height: auto; min-height: 60px; padding: 10px 12px 10px 16px; overflow: visible; }
  .au-logo { align-self: center; }
  .au-rail-mid, .au-rail-foot > :not(.au-rail-cta):not(.au-rail-q) { display: none; }
  .au-rail-foot { display: flex; align-items: center; gap: 12px; margin: 0 0 0 auto; padding: 0; }
  .au-rail-q + .au-rail-cta, .au-rail-cta + .au-rail-cta { margin-top: 0; }
}
@media (min-width: 1180px) {
  /* The rail lists the steps, so the page doesn't repeat them. */
  .au-progress { display: none; }
}
/* Your shop: the website first, and Ava fills the fields in from it. */
.au-find { margin-top: 4px; }
.au-find-row { display: flex; gap: 10px; align-items: stretch; }
.au-find-row .au-input { flex: 1; min-width: 0; }
.au-find-row .au-btn { flex: none; min-height: 48px; padding: 0 22px; box-shadow: none; }
.au-find-row.is-name { align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.au-find-alt { display: inline-block; margin-top: 12px; }
.au-find-row .au-find-alt { margin-top: 0; }
.au-row.is-find { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.au-find-skip { margin-top: 18px; }
.au-found-note { margin-top: 20px; padding: 11px 13px; border: 1px solid #fed7aa; border-radius: 12px; background: var(--au-orange-soft); color: var(--au-body-ink); font-size: 14px; line-height: 1.45; }
.au-found-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #166534; font: 650 11.5px/1.4 var(--au-body); vertical-align: 1px; }
.au-field.is-found .au-input, .au-field.is-found .au-select { border-color: #86efac; }
/* Ava's checklist: in her panel on wide screens, in the form on phones. */
.au-scan { display: grid; gap: 10px; }
.au-scan[hidden], .au-scan.is-away, .au-form .au-scan-inline { display: none; }
.au-scan-title { font: 700 10.5px/1.2 var(--au-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--au-on-navy-mute); }
.au-scan-list { display: grid; gap: 6px; margin: 0; padding: 12px; border: 1px solid var(--au-navy-line-2); border-radius: 14px; background: var(--au-navy-deep); list-style: none; }
.au-scan-list li { position: relative; display: grid; gap: 2px; padding-left: 24px; font-size: 13.5px; line-height: 1.4; color: var(--au-on-navy-2); }
.au-scan-list li b { font-weight: 600; color: var(--au-on-navy); }
.au-scan-list li small { font-size: 12.5px; color: var(--au-on-navy-mute); overflow-wrap: anywhere; }
.au-scan-list li::before { content: ""; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border: 2px solid var(--au-navy-line-2); border-radius: 50%; box-sizing: border-box; }
.au-scan-list li.is-doing::before { border-color: var(--au-amber) transparent var(--au-amber) var(--au-amber); animation: au-spin 0.9s linear infinite; }
.au-scan-list li.is-done::before { border-color: var(--au-ok); background: var(--au-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat; }
.au-scan-list li.is-done small { color: #bbf7d0; }
.au-scan-list li.is-missing::before { border-color: var(--au-amber); }
.au-scan-list li.is-missing small { color: var(--au-amber-soft); }
.au-scan-list li.is-wait { opacity: 0.55; }
@keyframes au-spin { to { transform: rotate(360deg); } }

/* Tablets and phones: navy bar, the white form, then Ava's card. */
@media (max-width: 899px) {
  .au { background: #fff; }
  .au-shell { display: block; min-height: 0; padding: 0; }
  /* The phone app draws under the status bar (viewport-fit=cover): the rail starts below it. */
  .au-rail { position: sticky; top: 0; z-index: 20; min-height: calc(60px + env(safe-area-inset-top, 0px)); padding: max(8px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); border-radius: 0; box-shadow: none; }
  .au-rail-q, .au-rail-cta.is-extra { display: none; }
  .au-main { padding: 26px 16px 32px; border: 0; border-radius: 0; box-shadow: none; }
  .au-form, .au-card { max-width: 560px; }
  .au-card { margin: 0 auto; }
  .au-ava { max-width: 560px; margin: 0 16px; }
  .au-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 26px 16px calc(36px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
  .au-foot a { color: var(--au-muted); text-decoration: none; }
  .au-h1 { font-size: 30px; }
  .au-greet { display: block; }
  /* Ava's panel is below the form here, so her checklist shows in the form. */
  .au-form .au-scan-inline:not([hidden]) { display: grid; margin-top: 18px; }
  .au-ava .au-scan-panel { display: none; }
}
@media (min-width: 592px) and (max-width: 899px) {
  .au-ava { margin: 0 auto; }
}
@media (max-width: 560px) {
  .au-find-row:not(.is-name) { flex-direction: column; }
  .au-row.is-find { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .au-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .au-actions .au-btn { width: 100%; min-width: 0; min-height: 52px; }
  .au-actions .au-btn + .au-btn { margin-top: 4px; }
  .au-price { grid-template-columns: 22px minmax(0, 1fr) 108px; gap: 8px; }
}
@media (max-width: 359px) {
  .au-row.is-names { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Phones and tablets (site review, Oct 1: Ava's card and the rail used 9.5 to 12.5px): nothing in them is under 13px, and the links under the page are 14px. */
@media (max-width: 899px) {
  .au-group, .au-steps .n, .au-legal, .au-state, .au-h, .au-ex, .au-call-top small, .au-clock, .au-line, .au-line > b:first-child, .au-desk-head span, .au-desk-row p, .au-desk-row small, .au-kpi span, .au-pill, .au-ava-foot small, .au-scan-title, .au-scan-list li small, .au-found-tag, .au-price-head, .au-mark { font-size: 13px; }
  .au-tag { width: 38px; font-size: 13px; }
  .au-desk-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .au-foot, .au-fine, .au-hint { font-size: 14px; }
}
/* Hover only where there is a mouse, so a tapped button on a phone doesn't stay dark. */
@media (hover: hover) {
  .au-rail-cta:hover { border-color: var(--au-on-navy-mute); }
  .au-rail-cta.is-orange:hover { border-color: var(--au-orange-hover); background: var(--au-orange-hover); }
  .au-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .au-input:hover:not(:focus):not(.bad):not([aria-invalid="true"]), .au-select:hover:not(:focus) { border-color: #a1a1aa; }
  .au-eye:hover { color: var(--au-ink); }
  .au-chip:hover:not([aria-checked="true"]) { border-color: #a1a1aa; }
  .au-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .au-btn:hover { background: var(--au-orange-hover); }
  .au-btn-line:hover { border-color: #a1a1aa; background: var(--au-canvas); }
  .au-back:hover { color: var(--au-ink); }
  .au-sso-btn:hover { border-color: #a1a1aa; background: var(--au-canvas); }
  .au-btn-sm:hover { background: var(--au-orange-hover); }
  .au-ava-foot:hover { background: rgba(255, 255, 255, 0.03); }
  .au-foot a:hover { color: var(--au-ink); text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  .au *, .au *::before, .au *::after { transition: none !important; }
}

/* ===================================================================
   Sign up, phone first (/onboarding, js/signup.js). "You don't set
   anything up. Ava does." One Ava sentence and one primary button lead
   every step, on the app's warm paper with white cards (the S06 to S12
   mockups). Controls are 44px or more, text is 13px or more, and nothing
   moves for anyone who asks for reduced motion.
   =================================================================== */
.signup {
  --su-paper: #f6f5f2;
  --su-surf: #fff;
  --su-raise: #f1efea;
  --su-ink: #0b0f19;
  --su-mut: #5b6272;
  --su-line: #e7e4de;
  --su-soft: #fff3e8;
  --su-softline: #f4cfae;
  --su-acc: #b8460a;
  --su-fill: #c94f0c;
  --su-green: #136f36;
  --su-greens: #e6f5ea;
  --su-shadow: 0 1px 2px rgba(11, 15, 25, 0.05), 0 10px 28px -16px rgba(11, 15, 25, 0.22);
}
.signup .au-main { background: var(--su-paper); }
.su { font-family: var(--au-display); color: var(--su-ink); }
.su :where(p, li, span, b, label, legend, small) { text-wrap: pretty; }
.su .au-btn { min-height: 54px; border-radius: 16px; font: 700 16px/1.2 var(--au-display); white-space: normal; text-align: center; box-shadow: none; background: var(--su-fill); }
.su .au-btn svg { flex: none; }
.su .au-btn-line { border: 1px solid var(--su-line); background: var(--su-surf); color: var(--su-ink); }
.su .au-input, .su .au-select { min-height: 52px; border-color: #cfcbc3; border-radius: 14px; font-size: 17px; }
.su .au-input.su-big { min-height: 58px; font-size: 18px; font-weight: 600; }
.su .au-label { font: 700 14px/1.3 var(--au-display); }
.su .au-hint, .su .au-fine { color: var(--su-mut); font-size: 14px; }
.su .au-fine { text-align: center; text-wrap: balance; }
.su .au-link { color: var(--su-acc); }
.su .au-chip { font-family: var(--au-display); font-weight: 700; }
.su .au-chip[aria-pressed="true"] { border-color: var(--au-navy); background: var(--au-navy); color: #fff; }
.su .au-error { font-size: 15px; }
.su [hidden] { display: none !important; }
.su > section { padding-block: 0; }
.su .nowrap { white-space: nowrap; }
.su-keep { display: block; }

/* Top: back, "Step 2 of 5", the bar */
.su-top { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; }
.su-backbtn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--su-ink); cursor: pointer; }
.su-progress { display: grid; gap: 7px; flex: 1; min-width: 0; }
.su-count-label { font: 700 13px/1 var(--au-display); color: var(--su-mut); }
.su-bar { display: block; height: 8px; border-radius: 4px; background: var(--su-raise); overflow: hidden; }
.su-bar i { display: block; height: 100%; border-radius: 4px; background: var(--su-fill); transition: width 0.3s ease; }
.su-resumed { margin: -6px 0 14px; font-size: 14px; color: var(--su-mut); }
.su-link { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--su-acc); font: 700 14px/1 var(--au-display); cursor: pointer; }

/* Ava's sentence */
.su-ava { display: flex; align-items: flex-start; gap: 12px; }
.su-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-top: 2px; border-radius: 50%; background: #0a1128; box-shadow: 0 0 0 2px var(--su-paper), 0 0 0 3.5px #ff6a1a; }
.su-mark svg { width: 24px; height: 24px; }
.su-bubble { display: grid; gap: 6px; flex: 1; min-width: 0; padding: 12px 15px 13px; border: 1px solid var(--su-line); border-radius: 6px 20px 20px 20px; background: var(--su-surf); box-shadow: var(--su-shadow); }
.su-who { font: 800 13px/1.2 var(--au-display); letter-spacing: 0.09em; text-transform: uppercase; color: var(--su-acc); }
.su-bubble p { font: 600 17px/1.38 var(--au-display); color: var(--su-ink); text-wrap: balance; }
.su-bubble .su-sub { font: 500 14.5px/1.45 var(--au-display); color: var(--su-mut); text-wrap: pretty; }
.su-bubble .su-big-say { font-size: 21px; font-weight: 750; line-height: 1.3; }
.su-ticks { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.su-ticks li { display: flex; align-items: center; gap: 9px; font: 700 14px/1.3 var(--au-display); }
.su-ticks li.is-no { color: var(--su-mut); font-weight: 600; }
.su-tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--su-greens); color: var(--su-green); }
.is-no > .su-tick { background: var(--su-raise); color: var(--su-mut); }

.su-h { margin: 22px 0 6px; font: 800 27px/1.15 var(--au-display); letter-spacing: -0.02em; color: var(--su-ink); text-wrap: balance; }
.su-h:focus { outline: none; }
.su-wide { width: 100%; margin-top: 18px; }
.su-alt { display: block; min-height: 44px; margin: 6px auto 0; padding: 0 6px; border: 0; background: none; color: var(--su-acc); font: 700 15px/1.3 var(--au-display); text-align: center; cursor: pointer; }
.su-eyebrow { font: 800 13px/1.2 var(--au-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--su-mut); }
.su-promise { display: grid; gap: 10px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--su-line); border-radius: 18px; background: var(--su-surf); }
.su-promise ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.su-promise li { position: relative; padding-left: 18px; font: 600 15px/1.35 var(--au-display); }
.su-promise li::before { content: ""; position: absolute; top: 7px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--su-fill); }
.su-saved { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--su-greens); color: var(--su-green); font: 600 15px/1.45 var(--au-display); }

/* What Ava found: reading, then the card */
.su-found-body { margin-top: 16px; }
.su-reading { display: grid; gap: 4px; margin: 0; padding: 10px 14px; border: 1px solid var(--su-line); border-radius: 18px; background: var(--su-surf); list-style: none; }
.su-reading li { display: flex; align-items: center; gap: 10px; min-height: 40px; font: 600 15px/1.35 var(--au-display); }
.su-reading li.is-wait { color: var(--su-mut); }
.su-reading li.is-no { color: var(--su-mut); }
.su-reading li.is-wait .su-tick { background: var(--su-raise); }
.su-reading li.is-doing .su-tick { background: none; border: 3px solid var(--su-softline); border-top-color: var(--su-fill); animation: au-spin 0.9s linear infinite; }
.su-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--su-line); border-radius: 22px; background: var(--su-surf); box-shadow: var(--su-shadow); }
.su-card + .su-card, .su-words + .su-card { margin-top: 12px; }
.su-ava + .su-card { margin-top: 16px; }
.su-card-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.su-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #0a1128; color: #ff6a1a; font: 800 26px/1 var(--au-display); }
.su-card-name { display: grid; gap: 3px; min-width: 0; }
.su-card-name b { font: 800 19px/1.25 var(--au-display); overflow-wrap: anywhere; }
.su-card-sub { font: 600 14px/1.35 var(--au-display); color: var(--su-mut); }
.su-stars { color: var(--su-ink); font-weight: 700; }
.su-star { display: inline-block; color: var(--su-acc); vertical-align: -2px; }
.su-star svg { fill: currentColor; }
.su-card-site { font: 500 13.5px/1.3 var(--au-display); color: var(--su-mut); overflow-wrap: anywhere; }
.su-rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--su-line); }
.su-rows.is-bare { border-top: 0; }
.su-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--su-line); }
.su-rows > .su-row:last-child, .su-rows.is-bare > .su-row { border-bottom: 0; }
.su-row.is-editing { display: block; padding: 14px 0; }
.su-row-ico { padding-top: 2px; color: var(--su-mut); }
.su-row-main { display: grid; gap: 3px; min-width: 0; }
.su-row-label { font: 700 13px/1.3 var(--au-display); color: var(--su-mut); }
.su-row-value { font: 650 16px/1.4 var(--au-display); color: var(--su-ink); overflow-wrap: anywhere; }
.su-row.is-empty .su-row-value { color: var(--su-mut); font-weight: 600; }
.su-src { justify-self: start; margin-top: 3px; padding: 3px 9px; border-radius: 8px; background: var(--su-raise); color: var(--su-mut); font: 650 13px/1.3 var(--au-display); }
.su-row-end { display: flex; align-items: center; gap: 2px; }
.su-ok, .su-ok-big { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--su-greens); color: var(--su-green); }
.su-ok-big { width: 30px; height: 30px; }
.su-edit { min-width: 44px; min-height: 44px; margin: -8px -6px -8px 0; padding: 0 8px; border: 0; border-radius: 12px; background: none; color: var(--su-acc); font: 700 15px/1 var(--au-display); cursor: pointer; }
.su-card-head .su-edit { margin: 0 -6px 0 0; }
.su-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.su-chip { padding: 5px 10px; border-radius: 10px; background: var(--su-raise); font: 650 13.5px/1.3 var(--au-display); color: var(--su-ink); }
.su-chip.is-more { background: none; color: var(--su-acc); }
.su-prices { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.su-prices li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--su-line); font: 600 15px/1.35 var(--au-display); }
.su-prices li:first-child { border-top: 0; }
.su-prices b { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; }

/* Changing it: in words, or a line at a time */
.su-words { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--su-softline); border-radius: 18px; background: var(--su-soft); }
.su-words-row { display: flex; gap: 8px; }
.su-words-row .au-input { flex: 1; min-width: 0; }
.su-btn-sm.au-btn { flex: none; min-height: 52px; padding: 0 18px; border-radius: 14px; font-size: 15px; }
.su-editor { display: grid; gap: 8px; }
.su-editor .au-field { margin-top: 0; }
.su-two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.su-gap { margin-top: 8px; }
.su-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.su-choices.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.su-choices.is-grid .au-chip { justify-content: center; }
/* The trade picker: 46 trades in five groups, with a box to find one. */
.su-trade-groups { display: grid; gap: 14px; margin-top: 12px; }
.su-trade-group[hidden], .su-trade-group .au-chip[hidden] { display: none; }
.su-trade-head { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--au-muted, #57534e); }
.su-now { font: 500 14.5px/1.45 var(--au-display); color: var(--su-mut); }
.su-editor-acts { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.su-editor-acts .au-back { min-height: 44px; }
.su-svc-rows { display: grid; gap: 8px; }
.su-svc { display: grid; grid-template-columns: 24px minmax(0, 1fr) 100px; gap: 8px; align-items: center; }
.su-svc.is-off { opacity: 0.55; }
.su-svc input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--su-fill); }
.su-ask { display: grid; gap: 8px; }
.su-count { font: 700 13px/1.2 var(--au-display); color: var(--su-mut); }
.su-ask .su-acts { margin-top: 8px; }

/* Buttons at the end of a step. On a phone, the read-out's stay in reach. */
.su-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.su-acts .au-btn { width: 100%; }
.su-acts.is-sticky { position: sticky; bottom: 0; z-index: 5; margin: 6px -2px 0; padding: 14px 2px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(246, 245, 242, 0), var(--su-paper) 16px); }

/* Your account */
.su-shopline { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border: 1px solid var(--su-line); border-radius: 16px; background: var(--su-surf); }
.su-shopline b { display: block; font: 750 16px/1.3 var(--au-display); overflow-wrap: anywhere; }
.su-shopline span:not(.su-ok-big) { display: block; font: 500 14px/1.4 var(--au-display); color: var(--su-mut); }
.su-sms { margin-top: 18px; }
.su-sms .su-choice { margin-top: 0; font: 500 15px/1.45 var(--au-display); }
.su-sms .au-field { margin-top: 12px; }
.su-sms .au-hint { display: block; margin-top: 8px; }
.su-terms { margin-top: 18px; font: 500 14.5px/1.5 var(--au-display); color: #3f4654; }

/* Hear Ava */
.su-preview { margin-top: 12px; }
.su-line { padding: 10px 12px; border-radius: 14px; background: var(--su-raise); font: 500 15px/1.45 var(--au-display); }
.su-line > b:first-child { display: block; margin-bottom: 2px; font: 800 13px/1.2 var(--au-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--su-mut); }
.su-line.is-ava { background: var(--su-soft); }
.su-line.is-ava > b:first-child { color: var(--su-acc); }
.su-quote { display: grid; gap: 10px; }
.su-call { display: grid; gap: 6px; margin-top: 12px; padding: 16px; border: 1px solid var(--su-line); border-radius: 20px; background: #0a1128; color: #f4f7fb; text-align: center; }
.su-call-status { font: 700 17px/1.4 var(--au-display); text-wrap: balance; }
.su-call-clock { font: 600 14px/1.3 var(--au-display); color: #c9d6e6; font-variant-numeric: tabular-nums; }
.su-call[data-phase="error"] { background: var(--su-soft); border-color: var(--su-softline); color: var(--su-ink); }
.su-call-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.su-call-controls .au-btn { min-height: 50px; }
.su .su-end { background: #b91c1c; }

/* Go live */
.su-number { margin-top: 4px; font: 500 16px/1.45 var(--au-display); }
.su-number b { font-weight: 800; }
.su-group { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.su-group legend { margin-bottom: 8px; padding: 0; font: 750 16px/1.3 var(--au-display); }
.su-choice { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 14px; border: 1px solid var(--su-line); border-radius: 16px; background: var(--su-surf); cursor: pointer; }
.su-choice input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--su-fill); }
.su-choice b { display: block; font: 750 16px/1.3 var(--au-display); }
.su-choice em { margin-left: 6px; padding: 2px 8px; border-radius: 8px; background: var(--su-soft); color: var(--su-acc); font: 700 13px/1.3 var(--au-display); font-style: normal; white-space: nowrap; }
.su-choice small { display: block; margin-top: 3px; font: 500 14.5px/1.45 var(--au-display); color: var(--su-mut); }
.su-choice.is-on, .su-choice:has(input:checked) { border: 2px solid var(--su-fill); padding: 13px; }
.su-carriers { display: flex; flex-wrap: wrap; gap: 8px; }
.su-carrier { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid #cfcbc3; border-radius: 999px; background: var(--su-surf); font: 700 15px/1.25 var(--au-display); cursor: pointer; }
.su-carrier input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.su-carrier.is-on, .su-carrier:has(input:checked) { border-color: var(--au-navy); background: var(--au-navy); color: #fff; }
.su-carrier:has(input:focus-visible), .su-choice:has(input:focus-visible) { outline: 2px solid var(--su-fill); outline-offset: 2px; }
.su-plan { display: grid; gap: 12px; margin-top: 16px; }
.su-dial { display: grid; gap: 8px; justify-items: center; padding: 16px; border: 1px solid var(--su-line); border-radius: 20px; background: var(--su-surf); box-shadow: var(--su-shadow); text-align: center; }
.su-dial-from { font: 600 14px/1.35 var(--au-display); color: var(--su-mut); }
.su-code { font: 800 25px/1.25 var(--au-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.su-dial-btn.au-btn { width: 100%; }
.su-dial-undo { font: 500 14px/1.4 var(--au-display); color: var(--su-mut); }
.su-steps.is-one { padding-left: 0; list-style: none; }
.su-steps { display: grid; gap: 6px; margin: 0; padding-left: 22px; font: 500 15px/1.5 var(--au-display); }
.su-disclose { margin-top: 18px; font: 500 14.5px/1.5 var(--au-display); color: #3f4654; }

/* Your account: how you'll sign in (shown once links can be emailed) */
.su-signin { margin-top: 20px; }
.su-signin + .au-field { margin-top: 14px; }

/* Go live, second half: the free trial card. $0 today, the charge date,
   cancel any time, in that order and that size. */
.su-golive .su-ava + .su-h { margin-top: 22px; }
.su-trial { gap: 12px; margin-top: 14px; padding: 18px; border: 2px solid var(--su-fill); }
.su-trial-today { display: flex; align-items: baseline; gap: 8px; font: 700 18px/1.2 var(--au-display); color: var(--su-mut); }
.su-trial-today b { font: 800 42px/1 var(--au-display); letter-spacing: -0.03em; color: var(--su-ink); }
.su-trial-terms { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.su-trial-terms li { position: relative; padding-left: 28px; font: 650 17px/1.4 var(--au-display); color: var(--su-ink); }
.su-trial-terms li::before { content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--su-greens) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23136f36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.su-trial-terms b { font-weight: 800; white-space: nowrap; }
.su-trial-more { padding-top: 12px; border-top: 1px solid var(--su-line); font: 500 14.5px/1.5 var(--au-display); color: var(--su-mut); }
.su-trial-off { margin-top: 14px; }
.su-grow { margin-top: 14px; }
.su-grow-lead { margin: 4px 0 0; font: 600 16px/1.45 var(--au-display); color: var(--su-ink); }
.su-grow-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.su-grow-list li { padding-left: 22px; position: relative; font-size: 15px; line-height: 1.5; }
.su-grow-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--su-fill); }
.su-grow-list b { color: var(--su-ink); }
.su-grow-own { margin-top: 8px; }
.su-grow-own summary { cursor: pointer; font-weight: 700; color: var(--su-fill); }
.su-grow-own-row { display: flex; gap: 8px; margin-top: 8px; }
.su-grow-own-row .au-input { flex: 1; min-width: 0; }
.su-grow-own-row .au-btn { min-height: 48px; padding: 0 16px; }
.su-trial-off p:not(.su-eyebrow) { font: 600 16px/1.45 var(--au-display); color: var(--su-ink); }
.su-note { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--su-line); border-radius: 14px; background: var(--su-raise); color: var(--su-ink); font: 600 15px/1.45 var(--au-display); }

/* Phones and tablets: the paper page, no side panel (Ava leads each step). */
@media (max-width: 899px) {
  .signup.au { background: var(--su-paper); }
  .signup .au-main { padding: 18px 16px 28px; background: var(--su-paper); }
  .signup .au-ava { display: none; }
  .signup .au-foot { background: var(--su-paper); }
}
/* Wider screens: the read-out's buttons sit side by side. */
@media (min-width: 600px) {
  .su-acts { flex-direction: row; flex-wrap: wrap; }
  .su-acts .au-btn { flex: 1 1 0; width: auto; }
  .su-acts .su-alt { flex-basis: 100%; }
  .su-acts.is-sticky { position: static; padding: 0; background: none; margin-top: 18px; }
}
@media (max-width: 440px) {
  .su-words-row { flex-direction: column; }
}
@media (max-width: 380px) {
  .su-h { font-size: 24px; }
  .su-bubble p { font-size: 16px; }
  .su-svc { grid-template-columns: 22px minmax(0, 1fr) 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-reading li.is-doing .su-tick { animation: none; border-top-color: var(--su-softline); }
  .su-bar i { transition: none; }
}

/* Hear Ava: her name and voice, picked in sign-up (Tony, Oct 5). */
.su-make { margin-top: 14px; }
.su-make[open] { display: grid; gap: 10px; }
.su-make summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; list-style: none; }
.su-make summary::-webkit-details-marker { display: none; }
.su-make-head { font-weight: 700; color: var(--au-ink); }
.su-make-now { flex: 1; color: var(--au-muted); min-width: 0; }
.su-make-go { color: var(--au-orange); font-weight: 700; }
.su-make[open] .su-make-go { display: none; }
.su-voices { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 340px) { .su-voices { grid-template-columns: 1fr; } }
.su-voice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--au-line); border-radius: 12px; background: #fff; }
.su-voice.is-on { border-color: var(--au-orange); box-shadow: 0 0 0 1px var(--au-orange); }
.su-voice-pick { flex: 1; display: grid; gap: 2px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.su-voice-pick small { color: var(--au-muted); font-size: 13px; }
.su-voice-play { flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--au-line); background: #fff; font: inherit; cursor: pointer; }
.su-voice-play[aria-pressed="true"] { background: var(--au-orange); color: #fff; border-color: transparent; }

/* "Shops near you also offer": a chip the owner taps to add the service. */
.su-chip.is-add { cursor: pointer; font: 650 13.5px/1.3 var(--au-display); color: var(--su-ink); background: #fff; border: 1px dashed var(--au-line-strong); }
.su-chip.is-add:hover, .su-chip.is-add:focus-visible { border-color: var(--au-orange); color: var(--au-orange); }

/* ===================================================================
   Sign up in the approved look (the drawings c-signup and m-signup,
   Oct 11): the site's header, kept to the logo and Sign in; the five
   steps across the top; the page's heading; the step in a white card;
   and beside it how Ava will answer the shop's phone, then the site's
   footer. The steps themselves (.su above) are unchanged, in navy.
   =================================================================== */
.au.su2 { background: var(--bg); color: var(--ink); font-family: var(--body); }
.su2 .site-head { position: sticky; top: 0; z-index: 40; }
.su2 .head-right { display: flex; align-items: center; gap: 16px; }
.su2-q { color: var(--ink-2); font: 500 15px/1.3 var(--body); }
.su2-signin { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 12px; background: var(--navy); color: var(--white); font: 700 15px/1 var(--body); text-decoration: none; white-space: nowrap; }
.su2-signin:hover { background: var(--navy-3); }
.su2-sec .sec-in { gap: 36px; }
.su2-steps { display: flex; gap: 12px; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.su2-steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; color: var(--mute); font: 700 13px/1.3 var(--body); }
.su2-steps i { display: block; height: 5px; border-radius: 3px; background: var(--line); transition: background-color 0.2s; }
.su2-steps li.is-done i, .su2-steps li[aria-current] i { background: var(--navy); }
.su2-steps li[aria-current] { color: var(--ink); }
.su2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "head card" "side card"; align-items: start; gap: 28px 64px; }
.su2-head { grid-area: head; display: flex; flex-direction: column; gap: 16px; align-self: end; }
.su2-card { grid-area: card; min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); --su-paper: #fff; --su-fill: #0a1128; }
.su2-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.su2-ava { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.su2-ava-h { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font: 800 16px/1.3 var(--display); }
.su2-ava-h .star { width: 14px; height: 14px; fill: var(--ember); }
.su2-line { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--o-soft); color: var(--ink); font-size: 15.5px; line-height: 1.55; }
.su2-line.is-caller { background: var(--bg); }
.su2-line b { display: block; margin-bottom: 2px; color: var(--ember); font: 800 13px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.su2-line.is-caller b { color: var(--mute); }
.su2-line [data-ava-shop] { font-weight: 700; }
.su2-hear { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; color: var(--ink-2); font: 500 15px/1.4 var(--body); text-decoration: none; }
.su2-hear svg { flex: none; color: var(--ember); }
.su2-hear b { color: var(--sky); font-weight: 700; }
.su2-hear:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* The step inside the card: navy for the main button and what's picked, as drawn. */
.su2 .su-top { margin: -8px 0 14px; }
.su2 .su-bar { display: none; }
.su2 .su-progress { gap: 0; }
.su2 .su .au-btn:not(.au-btn-line):not(.su-end) { background: var(--navy); }
.su2 .su .au-btn-line { border-color: var(--line-2); }
.su2 .su .au-input, .su2 .su .au-select { border-color: var(--line-2); }
.su2 .su-bubble { box-shadow: none; background: var(--bg); border-color: var(--line); }
.su2 .su-acts.is-sticky { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 16px); }
@media (hover: hover) {
  .su2 .su .au-btn:not(.au-btn-line):not(.su-end):hover { background: var(--navy-3); }
}
/* Tablets and phones (m-signup): one column, the heading, the card, then Ava's card. */
@media (max-width: 960px) {
  .su2-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "side"; gap: 24px; }
  .su2-q { display: none; }
  .su2-card { padding: 22px 18px; border-radius: 20px; }
}
@media (max-width: 760px) {
  .su2-sec .sec-in { gap: 22px; }
  /* Five bars; the step's name is in the card ("Step 2 of 5"). */
  .su2-steps { gap: 6px; }
  .su2-steps span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* After the first step the heading makes room for the step. */
  .su2-sec:has(.su2-steps li[data-for="shop"]:not([aria-current])) .su2-head { display: none; }
  .su2-ava { padding: 18px; }
  .su2-line { font-size: 15px; }
  .su2 .su-acts.is-sticky { margin-inline: -2px; }
}
/* Then, on your desk: the example Needs you list, in the card's paper. */
.su2-ava-h.is-then { justify-content: space-between; margin-top: 6px; }
.su2 .au-desk { padding: 12px; background: var(--bg); box-shadow: none; }
.su2 .au-desk-head b { font-size: 15px; }
.su2 .au-desk-head span { font-size: 13px; }
.su2 .au-desk-row { background: var(--white); }
.su2 .au-desk-row p { font-size: 14px; line-height: 1.45; }
.su2 .au-desk-row small { font-size: 12.5px; }
.su2 .au-tag { font-size: 11px; }
.su2 .au-pill { height: 30px; background: var(--navy); font-size: 13px; box-shadow: none; }
@media (max-width: 899px) {
  .su2 .au-desk-row small { font-size: 13px; }
  .su2 .au-tag { font-size: 13px; }
}

/* ===================================================================
   Sign in and a new password in the approved look (the drawings
   c-login, m-login and c-reset, Oct 11): the logo and the other door on
   paper, the form in a white card, Ava's morning in navy beside it, and
   the legal links under both. CSS only, on body.au-v2: login.html and
   reset.html keep their markup and scripts. welcome.html is unchanged.
   =================================================================== */
.au.au-v2 { --v2-ink: #0c1b2e; --v2-ink-2: #3e4e63; --v2-mute: #56667c; --v2-line: #e1e7ef; --v2-line-2: #cbd4e0; --v2-navy: #0a1128; --v2-sky: #1f5fd6; background: #f4f6fa; color: var(--v2-ink); }
.au-v2 .au-shell { display: grid; grid-template-columns: minmax(16px, 1fr) minmax(0, 545px) minmax(0, 566px) minmax(16px, 1fr); grid-template-areas: "rail rail rail rail" ". main ava ." ". foot foot ."; align-content: start; gap: 24px 48px; min-height: 100vh; min-height: 100dvh; padding: 0; }
.au-v2 .au-rail { grid-area: rail; align-self: stretch; position: static; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; height: auto; min-height: 0; padding: max(20px, env(safe-area-inset-top, 0px)) 40px 0; border-radius: 0; background: none; color: var(--v2-ink); box-shadow: none; overflow: visible; }
.au-v2 .au-logo { align-self: center; min-height: 44px; color: var(--v2-ink); font: 800 16px/1 var(--au-display); }
.au-v2 .au-label-row .au-link { min-height: 44px; margin: -12px 0; }
.au-v2 .au-eye { height: 44px; }
.au-v2 .au-rail-mid, .au-v2 .au-legal, .au-v2 .au-rail-cta.is-extra { display: none; }
.au-v2 .au-rail-foot { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 0; }
.au-v2 .au-rail-q { color: var(--v2-ink-2); font: 500 15px/1.3 var(--au-display); }
.au-v2 .au-rail-cta, .au-v2 .au-rail-cta.is-orange { min-height: 44px; margin: 0; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--v2-sky); font: 700 15px/1 var(--au-display); }
.au-v2 .au-main { grid-area: main; justify-content: center; padding: 40px; border: 1px solid var(--v2-line); border-radius: 22px; background: #fff; box-shadow: none; }
.au-v2 .au-card { max-width: none; margin: 0; }
.au-v2 .au-h1 { color: var(--v2-ink); font-size: 36px; }
.au-v2 .au-sub { color: var(--v2-ink-2); }
.au-v2 .au-label { font: 700 14.5px/1.3 var(--au-display); color: var(--v2-ink); }
.au-v2 .au-input { min-height: 52px; border-color: var(--v2-line-2); }
.au-v2 .au-btn { min-height: 54px; border-radius: 14px; background: var(--v2-navy); box-shadow: none; font: 800 16.5px/1.2 var(--au-display); }
.au-v2 .au-btn-line { border: 1px solid var(--v2-line-2); background: #fff; color: var(--v2-ink); font-weight: 700; }
.au-v2 .au-btn-sm { border-radius: 12px; background: var(--v2-navy); }
.au-v2 .au-sso-btn { min-height: 52px; border-color: var(--v2-line-2); border-radius: 14px; font: 700 16px/1 var(--au-display); }
.au-v2 .au-link { color: var(--v2-sky); }
.au-v2 .au-ava { grid-area: ava; gap: 14px; padding: 28px; border: 0; border-radius: 22px; background: var(--v2-navy); box-shadow: none; }
.au-v2 .au-ava-head { display: none; }
.au-v2 .au-ava-body, .au-v2 .au-ava.is-still .au-ava-body { gap: 14px; margin: 0; padding: 0; }
.au-v2 .au-say { display: flex; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; color: rgba(255, 255, 255, 0.86); font: 500 15.5px/1.55 var(--au-display); }
.au-v2 .au-say::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; background: #ff6a1a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1.2 19.2 12.8 30.8 16 19.2 19.2 16 30.8 12.8 19.2 1.2 16 12.8 12.8 16 1.2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1.2 19.2 12.8 30.8 16 19.2 19.2 16 30.8 12.8 19.2 1.2 16 12.8 12.8 16 1.2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.au-v2 .au-h { margin: 0; color: rgba(255, 255, 255, 0.62); font: 800 13px/1.2 var(--au-display); letter-spacing: 0.06em; }
.au-v2 .au-ex { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font: 700 12px/1 var(--au-display); }
.au-v2 .au-desk { gap: 10px; padding: 0; background: none; box-shadow: none; color: #fff; }
.au-v2 .au-desk-head, .au-v2 .au-desk-sub { display: none; }
.au-v2 .au-kpis { gap: 8px; }
.au-v2 .au-kpi { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: none; }
.au-v2 .au-kpi span { color: rgba(255, 255, 255, 0.7); font: 500 12px/1.3 var(--au-display); letter-spacing: 0; text-transform: none; white-space: normal; }
.au-v2 .au-kpi b { color: #fff; font: 800 20px/1.2 var(--au-display); }
.au-v2 .au-desk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag tag" "words pill"; align-items: end; gap: 4px 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff; color: var(--v2-ink); }
.au-v2 .au-tag, .au-v2 .au-tag.is-job, .au-v2 .au-tag.is-est, .au-v2 .au-tag.is-msg { grid-area: tag; display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--v2-mute); font: 800 11px/1.2 var(--au-display); letter-spacing: 0.06em; }
.au-v2 .au-desk-row p { grid-area: words; color: var(--v2-ink); font: 700 14.5px/1.4 var(--au-display); }
.au-v2 .au-desk-row small { margin-top: 4px; color: var(--v2-mute); font: 500 12.5px/1.4 var(--au-display); }
.au-v2 .au-pill { grid-area: pill; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--v2-navy); box-shadow: none; font: 700 13px/1 var(--au-display); }
.au-v2 .au-ava-foot { margin-top: auto; padding: 0; border: 0; border-radius: 0; color: #fff; }
.au-v2 .au-ava-foot .ico { display: none; }
.au-v2 .au-ava-foot small, .au-v2 .au-ava-foot b { display: inline; color: #fff; font: 700 15px/1.4 var(--au-display); letter-spacing: 0; }
.au-v2 .au-ava-foot small::after { content: "\00a0\00b7\00a0"; }
.au-v2 .au-ava-foot .go { margin-left: 6px; color: #fff; font-size: 15px; }
.au-v2 .au-foot { grid-area: foot; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; padding: 8px 0 24px; background: none; font-size: 14px; }
.au-v2 .au-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--v2-mute); text-decoration: none; }
@media (hover: hover) {
  .au-v2 .au-btn:hover { background: #16284a; }
  .au-v2 .au-btn-line:hover { background: #f4f6fa; }
  .au-v2 .au-rail-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
  .au-v2 .au-foot a:hover { color: var(--v2-ink); }
}
/* Phones and tablets (m-login): the bar, the card, Ava's morning, the links. */
@media (max-width: 899px) {
  .au-v2 .au-shell { display: flex; flex-direction: column; gap: 20px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
  .au-v2 .au-rail { position: static; min-height: 0; padding: max(12px, env(safe-area-inset-top, 0px)) 0 0; }
  .au-v2 .au-rail-q { display: none; }
  .au-v2 .au-main { padding: 24px 20px; border: 1px solid var(--v2-line); border-radius: 22px; }
  .au-v2 .au-h1 { font-size: 30px; }
  .au-v2 .au-ava { max-width: none; margin: 0; padding: 24px 20px; }
  .au-v2 .au-kpi span, .au-v2 .au-tag, .au-v2 .au-tag.is-job, .au-v2 .au-tag.is-est, .au-v2 .au-tag.is-msg, .au-v2 .au-desk-row small, .au-v2 .au-ex, .au-v2 .au-h, .au-v2 .au-pill { font-size: 13px; }
  .au-v2 .au-foot { padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
  .au-v2 .au-desk-row { grid-template-areas: "tag pill" "words words"; align-items: center; gap: 6px 10px; }
}