/* ═══════════════════════════════════════════════════════════════════════════
   auth.css — register / login / forgot-password
   Loaded AFTER styles.css. Everything here is additive and namespaced `au-`.
   No token from styles.css is redefined; the handful of values declared below
   are new ones this page family needs (control borders, danger, dark-panel
   text) and they are scoped to .au-page so they cannot leak.
   ═══════════════════════════════════════════════════════════════════════════ */

.au-page{
  /* Form-control border. 1px of --line (#E5EDF5) is 1.15:1 on white — an input
     edge you cannot see is an input you cannot find. #8293A8 is 3.14:1, which
     clears WCAG 1.4.11 for non-text UI boundaries with a little margin. */
  --au-bd:#8293A8;
  --au-bd-soft:#C6D2E0;          /* decorative rules only, never a control edge */

  /* Danger. --ruby (#EA2261) is 4.29:1 on white — just under AA for 13px help
     text, so error copy uses this darker cut (6.20:1) instead. */
  --au-danger:#C01048;
  --au-danger-bg:#FEF2F5;

  --au-ok:var(--green-deep);     /* #006F3A — 6.8:1 on white */

  /* Dark proof panel. Contrast against the #0A2540→#0F2E4E field:
     #FFFFFF 13.8:1 · --au-p-dim 7.5:1 · --au-p-mute 5.5:1 · --au-p-accent 7.4:1 */
  --au-p-dim:#AFC2D8;
  --au-p-mute:#93A8C1;
  --au-p-accent:#B9B9F9;
  --au-p-line:rgba(255,255,255,.11);
  --au-p-fill:rgba(255,255,255,.05);

  --au-top-h:66px;

  background:#fff;
}

/* ─────────────────────────────── header ──────────────────────────────────
   Deliberately minimal: a wordmark home link and the one link the visitor is
   most likely to actually want (the opposite page). No nav, no menu — every
   extra exit on a signup page is a leak. */
.au-top{
  position:relative;z-index:5;
  height:var(--au-top-h);
  display:flex;align-items:center;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.au-top__inner{display:flex;align-items:center;gap:16px;width:100%}
.au-top__alt{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:.875rem;color:var(--slate-400);
}
.au-top__alt span{display:none}
@media (min-width:520px){.au-top__alt span{display:inline}}
.au-top__alt a{
  font-weight:600;color:var(--brand-600);
  padding:6px 10px;margin:-6px -10px;border-radius:var(--r);
  transition:color var(--t),background-color var(--t);
}
.au-top__alt a:hover{color:var(--brand-700);background:rgba(99,91,255,.07)}

/* ─────────────────────────────── layout ────────────────────────────────── */
.au-main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  min-height:calc(100dvh - var(--au-top-h));
}
@media (min-width:1020px){
  .au-main{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
  .au-main--single{grid-template-columns:minmax(0,1fr)}
}

.au-col{
  display:flex;flex-direction:column;justify-content:center;
  padding:40px var(--gut) 64px;
}
@media (min-width:1020px){.au-col{padding:56px 40px 64px}}

.au-form-wrap{width:100%;max-width:432px;margin-inline:auto}
.au-main--single .au-form-wrap{max-width:404px}

/* ─────────────────────────────── heading ───────────────────────────────── */
.au-head{margin-bottom:26px}
.au-head h1{
  margin-top:14px;
  font-size:clamp(1.6rem,1.25rem + 1.3vw,2.125rem);
  letter-spacing:-.032em;line-height:1.1;
}
.au-head p{
  margin-top:10px;max-width:46ch;
  font-size:.9375rem;line-height:1.6;color:var(--slate);
}

/* The signup prompt appears in the header too, but the header version is a
   32px target in the corner — this one is in the reading path. */
.au-signup{margin-top:12px;font-size:.875rem;color:var(--slate)}
.au-signup a{
  font-weight:600;color:var(--brand-600);
  text-decoration:underline;text-underline-offset:2px;
}
.au-signup a:hover{color:var(--brand-700)}

/* trial terms strip — the offer restated where the decision happens */
.au-terms{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.au-terms li{
  display:flex;align-items:center;gap:6px;
  font-size:.8125rem;font-weight:500;color:var(--slate);
}
.au-terms .ico{color:var(--au-ok)}

/* ─────────────────────────────── fields ────────────────────────────────── */
.au-form{display:flex;flex-direction:column;gap:18px}
.au-row{display:grid;gap:18px}
@media (min-width:560px){.au-row--2{grid-template-columns:1fr 1fr}}

.au-fld{display:flex;flex-direction:column;gap:6px;min-width:0}

.au-lab{
  display:flex;align-items:baseline;gap:8px;
  font-size:.8125rem;font-weight:600;letter-spacing:-.004em;color:var(--ink);
}
.au-lab__opt{margin-left:auto;font-weight:500;color:var(--slate-400)}

.au-in{
  width:100%;min-height:44px;
  padding:11px 13px;
  background:#fff;color:var(--ink);
  border:1px solid var(--au-bd);border-radius:var(--r-md);
  font-size:.9375rem;line-height:1.35;letter-spacing:-.006em;
  transition:border-color var(--t),box-shadow var(--t),background-color var(--t);
}
.au-in::placeholder{color:var(--slate-300);opacity:1}
.au-in:hover:not(:disabled){border-color:#5F7591}
/* The global :focus-visible ring (inset, unclippable) does the accessibility
   work; the border swap just stops the ring from fighting a grey edge. */
.au-in:focus{border-color:var(--brand);outline:none}
.au-in:focus-visible{border-color:var(--brand)}
.au-in:disabled{background:var(--bg-subdued);color:var(--slate-400);cursor:not-allowed}

/* select needs its own caret — appearance:none removes the native one */
.au-sel{
  appearance:none;-webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425466' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
}

/* ── international phone control ──────────────────────────────────────────
   A country <select> welded to a number <input>, sharing one border so the
   pair reads as a single field. No third-party widget: intl-tel-input costs
   ~90 KB plus a flag sprite to do what a <select> of 151 options already
   does, and it would be the only runtime dependency on the page.
   The select is deliberately narrow — it shows the flag and the dial code,
   and the country name only inside the open list. */
.au-tel{display:flex;min-width:0}
.au-tel__cc{
  width:auto;flex:none;max-width:36%;
  border-top-right-radius:0;border-bottom-right-radius:0;
  padding-left:11px;padding-right:32px;
  background-position:right 9px center;
  font-variant-numeric:tabular-nums;
}
.au-tel__num{
  flex:1;min-width:0;
  border-top-left-radius:0;border-bottom-left-radius:0;
  margin-left:-1px;
}
/* Whichever half has focus must paint its border over its neighbour's, or the
   shared edge stays grey on one side of the seam. */
.au-tel__cc:focus,.au-tel__num:focus,
.au-tel .au-in[aria-invalid="true"]{position:relative;z-index:1}

/* The E.164 value we will actually submit, echoed back so the visitor can see
   what the country selector did to the digits they typed. */
.au-tel__echo{font-family:var(--ff-m);font-size:.75rem;color:var(--slate-400)}
.au-tel__echo:empty{display:none}

/* ── honeypot ─────────────────────────────────────────────────────────────
   Off-screen rather than display:none, because some bots skip fields that are
   not rendered. aria-hidden + tabindex="-1" keep it away from real people. */
.au-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── error / valid state ──────────────────────────────────────────────────
   Colour is never the only signal: an invalid field also gets aria-invalid,
   a text message, and a warning glyph. */
.au-in[aria-invalid="true"]{
  border-color:var(--au-danger);
  background:var(--au-danger-bg);
}
.au-in[aria-invalid="true"]:focus,
.au-in[aria-invalid="true"]:focus-visible{border-color:var(--au-danger)}

.au-msg{
  display:none;align-items:flex-start;gap:6px;
  font-size:.8125rem;line-height:1.45;color:var(--au-danger);
}
.au-msg .ico{flex:none;margin-top:1px;color:currentColor}
.au-msg.is-on{display:flex}

.au-hint{font-size:.8125rem;line-height:1.45;color:var(--slate-400)}
.au-hint b{font-weight:600;color:var(--slate)}

/* ─────────────────────────── password field ────────────────────────────── */
.au-pw{position:relative;display:flex}
.au-pw .au-in{padding-right:82px}
.au-pw__toggle{
  position:absolute;top:50%;right:5px;transform:translateY(-50%);
  min-height:34px;min-width:44px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);
  font-size:.75rem;font-weight:600;letter-spacing:.01em;
  color:var(--slate);background:transparent;
  transition:color var(--t),background-color var(--t);
}
.au-pw__toggle:hover{color:var(--brand-600);background:rgba(99,91,255,.08)}
@media (pointer:coarse){
  .au-pw__toggle{min-height:44px;min-width:52px}
  .au-pw .au-in{padding-right:92px}
}

/* strength meter — four segments, driven by an entropy estimate, not theatre */
.au-meter{margin-top:2px}
.au-meter__bar{display:flex;gap:4px}
.au-meter__seg{
  height:4px;flex:1;border-radius:var(--r-pill);
  background:var(--line);
  transition:background-color .22s var(--e-io);
}
.au-meter[data-score="1"] .au-meter__seg:nth-child(-n+1){background:#C01048}
.au-meter[data-score="2"] .au-meter__seg:nth-child(-n+2){background:#B4600A}
.au-meter[data-score="3"] .au-meter__seg:nth-child(-n+3){background:#0A7A72}
.au-meter[data-score="4"] .au-meter__seg{background:var(--au-ok)}
.au-meter__row{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:7px;font-size:.8125rem;line-height:1.4;
}
.au-meter__word{font-weight:600;color:var(--slate)}
.au-meter[data-score="1"] .au-meter__word{color:#C01048}
.au-meter[data-score="2"] .au-meter__word{color:#8A4A08}
.au-meter[data-score="3"] .au-meter__word{color:#0A5F59}
.au-meter[data-score="4"] .au-meter__word{color:var(--au-ok)}
.au-meter__bits{
  font-family:var(--ff-m);font-size:.75rem;color:var(--slate-400);
  margin-left:auto;
}

/* ─────────────────────────────── checkbox ──────────────────────────────── */
.au-check{display:flex;align-items:flex-start;gap:11px}
.au-check input{
  appearance:none;-webkit-appearance:none;
  /* 22px box + a label with vertical padding: clicking the label toggles the
     control, so the effective target is their union — comfortably past the
     24x24 floor without a checkbox that visually shouts. */
  flex:none;width:22px;height:22px;margin:1px 0 0;
  border:1px solid var(--au-bd);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;
  transition:background-color var(--t),border-color var(--t);
}
.au-check input:hover{border-color:#5F7591}
.au-check input:checked{
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  border-color:var(--brand);
}
.au-check input:checked:hover{background-color:var(--brand-600);border-color:var(--brand-600)}
.au-check input[aria-invalid="true"]{border-color:var(--au-danger);background-color:var(--au-danger-bg)}
.au-check label{font-size:.8125rem;line-height:1.55;padding-block:3px;color:var(--slate);cursor:pointer}
.au-check a{color:var(--brand-600);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.au-check a:hover{color:var(--brand-700)}
@media (pointer:coarse){
  .au-check input{width:24px;height:24px}
  .au-check label{padding-block:2px}
}

.au-inline{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.au-inline .au-check label{font-size:.875rem}
.au-forgot{
  font-size:.8125rem;font-weight:600;color:var(--brand-600);
  padding:6px 8px;margin:-6px -8px;border-radius:var(--r);
  transition:color var(--t),background-color var(--t);
}
.au-forgot:hover{color:var(--brand-700);background:rgba(99,91,255,.07)}

/* ────────────────────────────── submit ─────────────────────────────────── */
.au-submit{width:100%;margin-top:2px}
.au-submit[aria-disabled="true"]{cursor:progress;background:var(--brand-600);transform:none}
.au-submit[aria-disabled="true"]:hover{transform:none;box-shadow:var(--sh-btn)}
.au-spin{
  width:16px;height:16px;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:au-rot .7s linear infinite;
}
@keyframes au-rot{to{transform:rotate(360deg)}}

.au-legal{
  margin-top:2px;font-size:.75rem;line-height:1.55;color:var(--slate-400);
}

/* Consent is implicit in pressing the button, so the sentence that says so
   has to sit directly above it and be legible — not a footnote. */
.au-consent{
  margin-top:6px;text-align:center;
  font-size:.8125rem;line-height:1.6;color:var(--slate);
}
.au-consent a{
  color:var(--brand-600);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;
}
.au-consent a:hover{color:var(--brand-700)}

/* ── back to login ────────────────────────────────────────────────────── */
.au-back{margin-top:18px;text-align:center;font-size:.875rem}
.au-back a{
  font-weight:600;color:var(--brand-600);
  padding:6px 10px;margin:-6px -10px;border-radius:var(--r);
  transition:color var(--t),background-color var(--t);
}
.au-back a:hover{color:var(--brand-700);background:rgba(99,91,255,.07)}

/* ─────────────────────── form-level alert (login) ──────────────────────── */
.au-alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:var(--r-md);
  border:1px solid #F3C6D2;background:var(--au-danger-bg);
  font-size:.8125rem;line-height:1.5;color:#7A0B2E;
}
.au-alert .ico{flex:none;margin-top:1px;color:var(--au-danger)}
.au-alert b{display:block;color:var(--au-danger);font-weight:600;margin-bottom:2px}
.au-alert[hidden]{display:none}

/* ────────────────────────── social sign-in ─────────────────────────────── */
.au-or{
  display:flex;align-items:center;gap:14px;
  margin:22px 0;
  font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-400);
}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line)}

.au-social{display:grid;gap:10px}
@media (min-width:420px){.au-social{grid-template-columns:1fr 1fr}}
/* Three providers, so three columns — but only once each button can still fit
   its icon and label without wrapping. */
@media (min-width:480px){.au-social--3{grid-template-columns:repeat(3,1fr)}}
.au-social__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:10px 14px;
  border:1px solid var(--au-bd);border-radius:var(--r-md);
  background:#fff;color:var(--ink);
  font-size:.875rem;font-weight:600;letter-spacing:-.006em;
  transition:background-color var(--t),border-color var(--t),box-shadow var(--t);
}
.au-social__btn:hover{background:var(--bg-subdued);border-color:#5F7591;box-shadow:var(--sh-xs)}
.au-social__btn svg{width:18px;height:18px;flex:none}
/* No identity provider is connected yet. A button that looks live and does
   nothing reads as a bug, so these are genuinely disabled and say why on
   hover and to assistive tech — they are not silent no-ops. */
.au-social__btn:disabled{
  cursor:not-allowed;opacity:.55;
  background:var(--bg-subdued);border-color:var(--line);box-shadow:none;
}
.au-social__btn:disabled svg{filter:grayscale(1)}
.au-social__note{
  margin-top:10px;font-size:.8125rem;line-height:1.5;color:var(--slate);
  display:flex;align-items:flex-start;gap:7px;
}
.au-social__note:empty{display:none}
.au-social__note .ico{flex:none;margin-top:2px;color:var(--slate-400)}

/* ────────────────────────── success panel ──────────────────────────────── */
.au-done{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 24px;background:#fff;box-shadow:var(--sh-sm);
}
.au-done[hidden]{display:none}
.au-done__badge{
  width:44px;height:44px;border-radius:var(--r-pill);
  display:grid;place-items:center;margin-bottom:16px;
  background:rgba(0,178,97,.12);color:var(--au-ok);
}
.au-done__badge .ico{width:22px;height:22px;stroke-width:2.2}
/* h1 here, because the page's other h1 is inside the hidden stage by the time
   this shows — `hidden` drops it from the accessibility tree, so exactly one
   h1 is ever exposed and the heading order never skips. */
.au-done h1,.au-done h2{
  font-size:1.375rem;letter-spacing:-.026em;line-height:1.2;
  font-family:var(--ff-d);font-weight:600;color:var(--ink);
}
.au-done p{margin-top:10px;font-size:.9375rem;line-height:1.6;color:var(--slate)}
.au-done p b{color:var(--ink);font-weight:600}
.au-steps{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.au-steps li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.875rem;line-height:1.5;color:var(--slate);
}
.au-steps i{
  flex:none;width:22px;height:22px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--brand-25);color:var(--brand-700);
  font-style:normal;font-size:.6875rem;font-weight:700;
  font-family:var(--ff-m);
}
.au-done__foot{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.au-demo{
  margin-top:20px;padding:11px 13px;border-radius:var(--r);
  background:var(--bg-subdued);border:1px dashed var(--au-bd-soft);
  font-size:.75rem;line-height:1.55;color:var(--slate);
}
.au-demo b{color:var(--ink);font-weight:600}
/* an inline .link inside the note must not out-shout the note itself */
.au-demo .link{font-size:inherit;vertical-align:baseline;text-decoration:underline;text-underline-offset:2px}
[data-stage] > .au-demo{margin-top:24px}

/* ═════════════════════════════ PROOF PANEL ═══════════════════════════════
   The half of a signup page most products waste on a stock illustration.
   This one carries the three things a first-time visitor actually needs:
   what the trial contains, what a row of the export looks like, and what the
   36 columns are. */
.au-proof{
  background:
    radial-gradient(900px 520px at 88% -8%,rgba(99,91,255,.30),transparent 62%),
    radial-gradient(700px 460px at 6% 106%,rgba(0,163,224,.20),transparent 60%),
    linear-gradient(160deg,#0F2E4E 0%,#0A2540 46%,#061B31 100%);
  color:#fff;
  padding:44px var(--gut) 52px;
  display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--line);
}
@media (min-width:1020px){
  .au-proof{padding:56px 44px;border-top:0;border-left:1px solid var(--line)}
}
.au-proof__in{width:100%;max-width:460px;margin-inline:auto;display:grid;gap:26px}
.au-proof h2{
  color:#fff;font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);
  letter-spacing:-.026em;line-height:1.2;margin-top:12px;
}
.au-proof .eyebrow{color:var(--au-p-accent)}
.au-proof__lede{margin-top:9px;font-size:.9375rem;line-height:1.6;color:var(--au-p-dim)}

.au-card{
  border:1px solid var(--au-p-line);border-radius:var(--r-lg);
  background:var(--au-p-fill);
  padding:18px;
}
.au-card__h{
  display:flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--au-p-mute);
}
.au-card__h .ico{width:15px;height:15px;color:var(--au-p-accent)}

/* what the trial includes */
.au-incl{margin-top:14px;display:flex;flex-direction:column;gap:11px}
.au-incl li{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;line-height:1.5;color:var(--au-p-dim)}
.au-incl b{color:#fff;font-weight:600}
.au-incl .ico{flex:none;width:16px;height:16px;margin-top:2px;color:#5BD99B;stroke-width:2.2}

/* miniature of the masked results table.
   table-layout:fixed + ellipsis, so it never introduces horizontal scroll and
   therefore never needs a keyboard-reachable scroll region. */
.au-mini{margin-top:12px;table-layout:fixed;width:100%;font-size:.75rem}
.au-mini caption{
  caption-side:bottom;padding-top:11px;
  font-size:.6875rem;line-height:1.5;color:var(--au-p-mute);text-align:left;
}
.au-mini th{
  text-align:left;font-weight:600;font-size:.625rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--au-p-mute);
  padding:0 8px 8px 0;border-bottom:1px solid var(--au-p-line);
}
.au-mini th:last-child,.au-mini td:last-child{padding-right:0;text-align:right}
.au-mini td{
  padding:9px 8px 9px 0;border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--au-p-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.au-mini tr:last-child td{border-bottom:0;padding-bottom:0}
.au-mini .c-name{color:#fff;font-weight:600}
.au-mini .c-mail{font-family:var(--ff-m);font-size:.6875rem;color:var(--au-p-accent)}
.au-mini .c-rate{font-family:var(--ff-m);color:#F7CE5B}
.au-mini col.w-name{width:44%}
.au-mini col.w-mail{width:36%}
.au-mini col.w-rate{width:20%}

/* 36-column contract, grouped */
.au-cols{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.au-cols li{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--au-p-line);background:rgba(255,255,255,.04);
  font-size:.75rem;color:var(--au-p-dim);
}
.au-cols b{color:#fff;font-weight:600}
.au-cols em{
  font-style:normal;font-family:var(--ff-m);font-size:.6875rem;
  color:var(--au-p-accent);
}
.au-card__foot{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--au-p-line);
  font-size:.75rem;line-height:1.55;color:var(--au-p-mute);
}
.au-card__foot code{font-size:.6875rem;color:var(--au-p-dim)}

/* trust ticker */
.au-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
}
.au-trust li{display:flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--au-p-dim)}
.au-trust b{color:#fff;font-weight:600;font-family:var(--ff-m);font-size:.875rem}
.au-trust .ico{width:15px;height:15px;color:#5BD99B}
.au-trust .au-stars{color:#F7CE5B;letter-spacing:.04em;font-size:.75rem}

.au-quote{
  border-left:2px solid var(--au-p-accent);padding-left:14px;
}
.au-quote p{font-size:.9375rem;line-height:1.6;color:#fff}
.au-quote footer{margin-top:8px;font-size:.75rem;color:var(--au-p-mute)}

/* ─────────────────────────────── footer ────────────────────────────────── */
.au-foot{
  border-top:1px solid var(--line);background:#fff;
  padding:18px 0;
}
.au-foot__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:.75rem;color:var(--slate-400);
}
.au-foot a{color:var(--slate);font-weight:500;padding:4px 0}
.au-foot a:hover{color:var(--brand-600)}
.au-foot__sep{margin-left:auto}

/* ───────────────────────────── 360px floor ─────────────────────────────── */
@media (max-width:400px){
  .au-page{--gut:18px}
  .au-col{padding:32px var(--gut) 48px}
  .au-proof{padding:36px var(--gut) 44px}
  .au-card{padding:15px}
  .au-meter__bits{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .au-spin{animation:none;border-top-color:rgba(255,255,255,.9)}
  .au-meter__seg{transition:none}
}