/* ─────────────────────────────────────────────────────────────
   /css/funnel.css
   THE SHARED LAYER for the commercial funnel: pricing, checkout, booking and
   settings. One implementation of the button, the input, the outlined pane, the
   note, the step rail and the dev state switcher.

   WHY THIS FILE EXISTS AT ALL.
   The four prototypes each declare their own .btn, .inp, .pane and .note, with
   the same values, because each was authored as a standalone page. Ported
   literally that would be four copies of one design system, and the lesson from
   August 7 is on record: "six copies of a shared layer is how it stops being
   shared." Everything that is genuinely common lives here. Everything that
   belongs to one surface lives in that surface's own stylesheet.

   Auth is deliberately NOT served by this file. It carries the live signup
   page's coral/navy language rather than the funnel's teal, so it has its own
   stylesheet and its own --auth-* tokens. See the note in tokens.css.

   NAMING. Every class is `acct-` prefixed, matching the per-surface convention
   already used by --loc-/--adm-/--atl-/--mk-/--fn-. Nothing here is a bare
   element or generic class name, because this stylesheet is loaded alongside
   components.css on pages that also render shared chrome.

   ── THE RESET TRAP, WHICH THIS REPO HAS NOW HIT TWICE ──
   1. The reset is wrapped in :where() so it has ZERO specificity. Written as
      `.acct-page button` it would be (0,1,1) and would out-rank every
      single-class component rule in this very file. That is CSS-RESET-ROOT's
      sibling trap, and it silently stripped borders off Atlas buttons in
      August.
   2. The reset selector INCLUDES `.acct-page` itself, not only its
      descendants. `:where(.acct-page) :where(*)` is a descendant selector and
      leaves the root with whatever box-sizing the host page supplies, so a
      surface that owns its own gutters overflows its container by exactly the
      sum of its horizontal padding the moment it is loaded anywhere else.
      Found on the Admit panel in a bare harness, invisible inside the product.

   ── THE CLIPPING TRAP ──
   .acct-page is position:relative. A page root that clips must also be
   positioned, or an absolutely-positioned descendant resolves its containing
   block to the INITIAL one and escapes every overflow:hidden above it. That
   cost the homepage 619px of horizontal scroll at 390px in August, invisible
   at desktop width.

   Depends on: tokens.css (every value below resolves to an --acct-* token).
   Used by: pricing.html, checkout.html, book.html, settings.html.
   ───────────────────────────────────────────────────────────── */

/* ── Scoped reset ─────────────────────────────────────────────
   Zero-specificity, and covering the root itself. See the trap notes above. */
:where(.acct-page, .acct-page *, .acct-page *::before, .acct-page *::after) {
  box-sizing: border-box;
}
:where(.acct-page h1, .acct-page h2, .acct-page h3, .acct-page p) {
  margin: 0;
}
:where(.acct-page button) {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  text-align: left;
}

/* ── Page ground ──────────────────────────────────────────────
   position:relative is the containment backstop, not decoration. */
.acct-page {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--acct-sans);
  font-size: 16px;
  color: var(--acct-ink);
  background: var(--acct-bg);
  -webkit-font-smoothing: antialiased;
}

/* Links get an explicit colour. Undefined links render browser-default blue,
   which is the one colour nowhere in this palette.

   ⚠ THE :where() HERE IS LOAD-BEARING AND WAS LEARNED THE HARD WAY, AGAIN.
   Written as `.acct-page a` this rule is specificity (0,1,1) — one class plus
   one element — which OUT-RANKS every single-class component rule in this
   file. The header CTA (.acct-site-cta) is (0,1,0), so it lost, and the button
   rendered teal text on its own teal fill: a solid pill with an invisible
   label. The brand lettering went teal instead of ink for the same reason.
   Both were caught on screen, not by reading, which is the third time this
   exact specificity trap has bitten this repo: `.atl-app button` stripped the
   borders off Atlas in August, and panel-location.css had documented it before
   that. :where() makes this (0,0,1) so any component class wins.
   Pinned by a test in tests/funnel-css.test.js. */
:where(.acct-page) a {
  color: var(--acct-teal-d);
  text-decoration: none;
  transition: color var(--acct-tr);
}
:where(.acct-page) a:hover { color: var(--acct-ink); }

/* Focus states. The site-wide gap (Mira C5) is not repeated here: every
   interactive element in the funnel is reachable and visibly focused.
   Also :where()-wrapped, for the same reason as the rule above. */
:where(.acct-page) :focus-visible {
  outline: 2px solid var(--acct-teal-d);
  outline-offset: 2px;
  border-radius: var(--acct-r-sm);
}

/* ── Typography helpers ───────────────────────────────────────
   The eyebrow's leading rule is drawn with ::before rather than a border so it
   sits on the text baseline regardless of the label's length. */
.acct-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acct-teal-d);
  margin-bottom: 12px;
}
.acct-eyebrow::before {
  content: '';
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.acct-eyebrow.green  { color: var(--acct-green-d); }
.acct-eyebrow.blue   { color: var(--acct-blue-d); }
.acct-eyebrow.purple { color: var(--acct-purple-d); }
.acct-eyebrow.coral  { color: var(--acct-coral-d); }

.acct-sec-h {
  font-family: var(--acct-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.028em;
  line-height: 1.08;
  color: var(--acct-ink);
  margin-bottom: 26px;
  text-wrap: balance;
}

/* ── Buttons ──────────────────────────────────────────────────
   min-height is --acct-touch (44px) on the base class, so no variant can drop
   below the touch floor by accident. `.go` is the teal primary; its hover flips
   to black, per the project rule that black means hover/active. */
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--acct-touch);
  padding: 0 22px;
  border-radius: var(--acct-r-pill);
  border: 1.5px solid var(--acct-line-md);
  background: var(--acct-bg-card);
  color: var(--acct-ink);
  font-size: 14.5px;
  font-weight: 700;
  transition: all var(--acct-tr);
}
.acct-btn:hover:not(:disabled):not([aria-disabled='true']) {
  border-color: var(--acct-teal-d);
  color: var(--acct-teal-d);
}
.acct-btn:disabled,
.acct-btn[aria-disabled='true'] {
  opacity: .5;
  cursor: not-allowed;
}
.acct-btn.go {
  background: var(--acct-teal-d);
  border-color: var(--acct-teal-d);
  color: #fff;
}
.acct-btn.go:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--acct-ink);
  border-color: var(--acct-ink);
  color: #fff;
}
.acct-btn.g {
  background: var(--acct-bg-card);
  border-color: var(--acct-line-md);
}
.acct-btn.full { width: 100%; }

.acct-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.acct-btn-row .acct-btn { flex-shrink: 0; }

/* ── Fields ───────────────────────────────────────────────────
   42px is below the 44px touch floor, and that is transcribed from the design
   rather than a slip: a text input is not a tap target in the same sense as a
   button, and the label above it extends the hit area. Buttons stay at 44. */
.acct-fld {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.acct-fld-l {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acct-ink-soft);
}
.acct-fld-h {
  font-size: 12px;
  color: var(--acct-ink-faint);
  line-height: 1.5;
}
.acct-inp {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-md);
  background: var(--acct-bg-card);
  font-family: inherit;
  font-size: 14px;
  color: var(--acct-ink);
  transition: border-color var(--acct-tr);
}
.acct-inp:focus {
  outline: none;
  border-color: var(--acct-teal-d);
  box-shadow: 0 0 0 3px var(--acct-teal-s);
}
.acct-inp::placeholder { color: var(--acct-ink-faint); }

.acct-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-grid3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }

/* ── Panes ────────────────────────────────────────────────────
   PROJECT DESIGN LAW: prominent feature boxes are fully outlined on all four
   sides, never a top-only accent bar. The 2px accent border is that law. The
   `.plain` variant is for secondary boxes and drops to a 1.5px neutral line. */
.acct-pane {
  background: var(--acct-bg-card);
  border: 2px solid var(--acct-teal-m);
  border-radius: var(--acct-r-xl);
  box-shadow: var(--acct-sh-card);
  padding: 24px 24px 22px;
  margin-bottom: 16px;
}
.acct-pane.plain {
  border-color: var(--acct-line-md);
  border-width: 1.5px;
}
.acct-pane-h {
  font-family: var(--acct-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.024em;
  color: var(--acct-ink);
}
.acct-pane-s {
  font-size: 13.5px;
  color: var(--acct-ink-mute);
  line-height: 1.55;
  margin-top: 6px;
  text-wrap: pretty;
}
.acct-pane-bd {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Notes ────────────────────────────────────────────────────
   Blue is neutral information, coral is a problem, yellow is a caution the user
   must read before acting (the India mandate note), gold is a decision they are
   being asked to confirm. */
.acct-note {
  display: flex;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--acct-r-lg);
  border: 1.5px solid var(--acct-blue-m);
  background: var(--acct-blue-t);
  font-size: 13px;
  color: var(--acct-ink-mute);
  line-height: 1.6;
  text-wrap: pretty;
}
.acct-note svg {
  color: var(--acct-blue-d);
  flex-shrink: 0;
  margin-top: 1px;
}
.acct-note strong {
  color: var(--acct-ink);
  display: block;
  margin-bottom: 3px;
}
.acct-note.bad     { border-color: var(--acct-coral-m); background: var(--acct-coral-t); }
.acct-note.bad svg { color: var(--acct-coral-d); }
.acct-note.warn     { border-color: var(--acct-yellow-m); background: var(--acct-yellow-t); }
.acct-note.warn svg { color: var(--acct-yellow-d); }
.acct-note.gold     { border-color: var(--acct-gold-m); background: var(--acct-gold-s); }
.acct-note.gold svg { color: var(--acct-gold-d); }
.acct-note.good     { border-color: var(--acct-green-m); background: var(--acct-green-t); }
.acct-note.good svg { color: var(--acct-green-d); }

/* ── OAuth buttons ────────────────────────────────────────────
   `.big` is the Google button: dark, full width, top of the card. It is the
   primary action, not a pale alternative under a form, and that placement is
   the whole point of the auth redesign. */
.acct-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-md);
  background: var(--acct-bg-card);
  font-size: 14px;
  font-weight: 700;
  color: var(--acct-ink);
  transition: all var(--acct-tr);
}
.acct-oauth:hover {
  border-color: var(--acct-ink);
  background: var(--acct-bg-soft);
}
.acct-oauth.big {
  min-height: 52px;
  font-size: 15.5px;
  background: var(--acct-ink);
  color: #fff;
  border-color: var(--acct-ink);
  gap: 12px;
}
.acct-oauth.big:hover {
  background: #000;
  border-color: #000;
  transform: translateY(-1px);
}
.acct-oauth.big svg {
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
}
.acct-oauth-note {
  font-size: 12.5px;
  color: var(--acct-ink-faint);
  line-height: 1.55;
  text-align: center;
  margin: -4px 0 0;
  text-wrap: pretty;
}

.acct-orsep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acct-ink-faint);
}
.acct-orsep::before,
.acct-orsep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--acct-line-md);
}

/* ── Segmented tabs ───────────────────────────────────────────
   Gold marks the active tab, consistent with every other selection in the
   product. */
.acct-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--acct-bg-hover);
  border: 1.5px solid var(--acct-line-md);
  border-radius: var(--acct-r-pill);
}
.acct-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border-radius: var(--acct-r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--acct-ink-mute);
  border: 1.5px solid transparent;
  transition: all var(--acct-tr);
}
.acct-tab.on {
  background: var(--acct-bg-card);
  border-color: var(--acct-gold);
  color: var(--acct-ink);
}

/* ── Step rail ────────────────────────────────────────────────
   The rail renders only the steps that apply. A signed-in buyer has two steps,
   not three with one greyed out, because a step you can never take is noise.
   Completed steps read green, the current step teal. */
.acct-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.acct-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--acct-r-pill);
  border: 1.5px solid var(--acct-line-md);
  background: var(--acct-bg-card);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acct-ink-faint);
  transition: all var(--acct-tr);
}
.acct-step.on {
  border-color: var(--acct-teal-d);
  color: var(--acct-teal-d);
  background: var(--acct-teal-t);
}
.acct-step.did {
  border-color: var(--acct-green-m);
  color: var(--acct-green-d);
  background: var(--acct-green-t);
}
.acct-step-n {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--acct-bg-hover);
  color: var(--acct-ink-faint);
  flex-shrink: 0;
}
.acct-step.on .acct-step-n  { background: var(--acct-teal-d); color: #fff; }
.acct-step.did .acct-step-n { background: var(--acct-green-d); color: #fff; }
.acct-step-sep {
  width: 14px;
  height: 1.5px;
  background: var(--acct-line-md);
  flex-shrink: 0;
}

/* ── Consent block ────────────────────────────────────────────
   A button rather than a real checkbox because the whole block is the target;
   aria-checked and role are set in markup so it still announces as a checkbox. */
.acct-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--acct-yellow-m);
  background: var(--acct-yellow-t);
  border-radius: var(--acct-r-lg);
  width: 100%;
}
.acct-consent.plain {
  border-color: var(--acct-line-md);
  background: var(--acct-bg-soft);
}
.acct-cbx {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--acct-line-md);
  background: var(--acct-bg-card);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.acct-cbx.on {
  background: var(--acct-green-d);
  border-color: var(--acct-green-d);
}
.acct-consent-t {
  font-size: 13px;
  color: var(--acct-ink-soft);
  line-height: 1.6;
  text-wrap: pretty;
}
.acct-consent-t strong { color: var(--acct-ink); }

/* ── Centred status block (confirming, success, empty) ────────
   The spinner is decorative; the copy beside it carries the meaning, so it is
   aria-hidden and the status text is a live region in markup. */
.acct-mid {
  text-align: center;
  padding: 28px 10px;
}
.acct-spin {
  width: 38px;
  height: 38px;
  border: 3px solid var(--acct-teal-s);
  border-top-color: var(--acct-teal-d);
  border-radius: 50%;
  animation: acct-sp .8s linear infinite;
  margin: 0 auto;
}
@keyframes acct-sp { to { transform: rotate(360deg); } }

/* Respect a user who has asked for less motion. The spinner still reads as a
   busy indicator because the copy under it says so. */
@media (prefers-reduced-motion: reduce) {
  .acct-spin { animation-duration: 3s; }
  /* :where()-scoped for the same reason as the link rules above: a page-scoped
     selector must never contribute specificity, even when !important would
     have carried it anyway. Consistency here is what makes the rule scannable. */
  :where(.acct-page) * { transition-duration: .01ms !important; }
}

.acct-mid-h {
  font-family: var(--acct-serif);
  font-size: 26px;
  letter-spacing: -.026em;
  color: var(--acct-ink);
  margin-top: 18px;
}
.acct-mid-s {
  font-size: 14px;
  color: var(--acct-ink-mute);
  line-height: 1.6;
  margin: 9px auto 0;
  max-width: 400px;
  text-wrap: pretty;
}

/* ── Site chrome (pricing, book, settings share this header) ── */
.acct-site {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
  padding: 0 32px;
  /* The translucent sticky ground. The prototype hardcoded rgba(245,250,250,.9),
     which is --acct-bg at 90%; color-mix keeps it derived from the token so a
     palette change carries here too. Same construction atlas.css already uses. */
  background: color-mix(in srgb, var(--acct-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--acct-line);
}
.acct-site-brand {
  font-family: var(--acct-serif);
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--acct-ink);
}
.acct-site-brand:hover { color: var(--acct-teal-d); }
.acct-site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
}
.acct-site-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--acct-ink-mute);
  white-space: nowrap;
}
.acct-site-nav a:hover { color: var(--acct-teal-d); }
.acct-site-nav a.on {
  color: var(--acct-teal-d);
  font-weight: 700;
}
.acct-site-r {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.acct-site-in {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink-mute);
  white-space: nowrap;
}
.acct-site-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-teal-d);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.acct-site-cta:hover { background: var(--acct-ink); color: #fff; }
.acct-site-plan {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--acct-green-d);
  background: var(--acct-green-t);
  border: 1.5px solid var(--acct-green-m);
  border-radius: var(--acct-r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}
.acct-site-plan.gold {
  color: var(--acct-gold-d);
  background: var(--acct-gold-s);
  border-color: var(--acct-gold-m);
}
.acct-site-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--acct-teal-d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.acct-site-av:hover { background: var(--acct-ink); color: #fff; }

.acct-site-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 32px 84px;
  border-top: 1px solid var(--acct-line);
  font-size: 13px;
  color: var(--acct-ink-faint);
}
.acct-site-foot nav { display: flex; gap: 18px; }
.acct-site-foot a { color: var(--acct-ink-faint); }
.acct-site-foot a:hover { color: var(--acct-teal-d); }

/* ── Dev state switcher ───────────────────────────────────────
   The prototypes' black States bar, kept because reproducing a declined 3DS
   payment by hand is miserable and review needs to see every state.

   IT IS NOT SHIPPED. js/lib/acct-devbar.js renders it only when the URL carries
   ?dev=1, and a test asserts no page hardcodes it into markup. The go-live
   checklist's "States bars stripped from all five pages" is satisfied by the
   gate, not by remembering to delete anything.

   The bottom padding on every funnel page assumes this bar may be present. */
.acct-devbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--acct-ink);
  color: #fff;
}
.acct-devbar-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-right: 4px;
}
.acct-devb {
  padding: 6px 12px;
  border-radius: var(--acct-r-pill);
  border: 1.5px solid rgba(255, 255, 255, .22);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  transition: all var(--acct-tr);
}
.acct-devb:hover { border-color: #fff; color: #fff; }
.acct-devb.on {
  background: var(--acct-teal);
  border-color: var(--acct-teal);
  color: #08201F;
}

/* ── Toast ────────────────────────────────────────────────────
   Used where a control is deliberately inert in this build (booking against
   fixture gating, for example) and must say so rather than fail silently. */
.acct-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--acct-sh-hover);
  text-align: center;
}

/* ── Screen-reader-only ───────────────────────────────────────
   Positioned relative to .acct-page, which is why that root is position:
   relative. A visually-hidden absolute element in an all-static ancestor chain
   escapes every clip above it and pushed the homepage 619px wide at 390px. */
.acct-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Mobile ───────────────────────────────────────────────────
   Built alongside desktop, not retro-fitted. Every funnel page is checked at
   390px as a release criterion. */
@media (max-width: 900px) {
  .acct-site-nav { display: none; }
}
@media (max-width: 760px) {
  .acct-site { padding: 0 18px; gap: 14px; }
  .acct-sec-h { font-size: 27px; }
  .acct-site-plan { display: none; }
  .acct-btn-row .acct-btn { width: 100%; }
  .acct-grid2, .acct-grid3 { grid-template-columns: 1fr; }

  /* ── Touch floor, and a deliberate departure from the prototype ──
     Measured at 390px in an iframe harness: the header CTA came out at 38px,
     the avatar at 36px, the brand at 24px and the footer links at 18px. Those
     are the prototype's own values, and all four are below the 44px minimum
     that DESIGN_LAW.md states as a project rule.
     The law wins over the transcription. Desktop keeps the designed sizes,
     where a mouse makes 38px perfectly clickable; only phone width is raised.
     Flagged so nobody "restores" these to match the prototype later. */
  .acct-site-cta { min-height: var(--acct-touch); }
  .acct-site-av {
    width: var(--acct-touch);
    height: var(--acct-touch);
  }
  .acct-site-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--acct-touch);
  }
  .acct-site-foot nav { gap: 4px 18px; flex-wrap: wrap; }
  .acct-site-foot a {
    display: inline-flex;
    align-items: center;
    min-height: var(--acct-touch);
  }
  .acct-pane { padding: 20px 18px; }
  /* The step rail keeps its numbers and drops its labels rather than wrapping
     to two lines, so the user can still see how many steps remain. */
  .acct-step span:not(.acct-step-n) { display: none; }
  .acct-step { padding: 7px; }
}