/* ---------------------------------------------------------------------------
   Auth refinement — pd.cash login / register
   Added 2026-08-20.

   Three problems this addresses:

   1. The card spanned the full viewport (1376px at 1440). The markup carries
      `max-w-xl`, but an existing `.auth-pdcash.auth-register-page > .w-full`
      rule and the cascade between the prebuilt Tailwind file and the auth
      styles left the constraint not applying. Auth forms should be narrow.
   2. Blue accents (icon tile, plan panel, portal badge) on a site whose brand
      colour is green — the signup page looked like a different product from
      the page that sent the visitor there.
   3. Fields and spacing tuned for a full-width card, so everything read loose.

   Scoped to body.merchant-auth so nothing here can reach the rest of the site.
   Presentation only: no field names, validation, or CSRF handling is touched.
   --------------------------------------------------------------------------- */

body.merchant-auth {
  --auth-green: #36d240;
  --auth-green-soft: rgba(54, 210, 64, 0.10);
  --auth-green-line: rgba(54, 210, 64, 0.28);
  --auth-surface: #0c0d0d;
  --auth-line: #242725;
}

/* 1 — constrain and centre the card ----------------------------------------
   pd-mobile-performance.css deliberately widened this page in three escalating
   steps (940px, then 1240px, then 1480px, each !important and each beating the
   last). The result was a 1376px-wide signup form. Matching that specificity
   here and loading later, rather than adding a fourth round of escalation.   */
/* REGISTER ONLY. The login page is a two-column split (marketing panel beside
   the form) and needs its width — constraining it to 640px crushed the copy. */
/* Register now renders the same two-column split as login, so it needs login's
   width rather than the narrow single-card cap it had before. */
body.auth-pdcash.merchant-auth.auth-register-page > .w-full {
  max-width: 1120px !important;
  margin-inline: auto !important;
  /* Was clamp(32px, 6vh, 72px), which resolved to 54px on a 900px-tall viewport —
     the nav is a FLOATING pill (top:16px, height:64px), so the card slid under it
     and the two overlapped by 26px. Login clears the pill with a flat 96px at the
     same breakpoint (pd-mobile-performance.css:796); match it exactly. */
  padding-top: 96px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 899px) {
  /* Below the split-layout breakpoint the pill is still floating, just shorter. */
  body.auth-pdcash.merchant-auth.auth-register-page > .w-full {
    padding-top: 88px !important;
  }
}

body.auth-pdcash.merchant-auth.auth-register-page .auth-shell {
  max-width: 1120px !important;
  margin-inline: auto !important;
}

body.auth-pdcash.merchant-auth.auth-register-page #registerForm {
  max-width: none !important;   /* fills the now-narrow card */
  width: 100% !important;
}

/* Header parity ------------------------------------------------------------
   /login rendered a floating 960px pill (radius 14, rgba(7,12,9,.92)) while
   /register rendered a full-width bar (radius 0, rgba(5,8,6,.96)). Same links,
   two different chrome treatments, so moving between them felt like moving
   between two products. Register now matches login.                          */
body.auth-pdcash.merchant-auth.auth-register-page .nav {
  max-width: 1120px !important;
  margin-inline: auto !important;
  border-radius: 14px !important;
  background: rgba(7, 12, 9, 0.92) !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .nav-container {
  max-width: none !important;
  width: 100% !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .footer-container,
body.auth-pdcash.merchant-auth.auth-login-page .footer-container {
  max-width: 1140px !important;
  width: min(100%, 1140px) !important;
}

body.merchant-auth .auth-card {
  border-radius: 16px;
  border: 1px solid var(--auth-line);
  background: var(--auth-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

body.merchant-auth .auth-card-body { padding: clamp(22px, 4vw, 34px) !important; }

/* 2 — brand consistency: green, not blue ----------------------------------- */
body.merchant-auth .bg-blue-500,
body.merchant-auth [class*="bg-blue-"] { background-color: var(--auth-green-soft) !important; }
body.merchant-auth .text-blue-400,
body.merchant-auth [class*="text-blue-"] { color: var(--auth-green) !important; }
body.merchant-auth .border-blue-500,
body.merchant-auth [class*="border-blue-"] { border-color: var(--auth-green-line) !important; }

/* The header icon tile and the portal badge both rendered blue. */
body.merchant-auth .auth-card-body > div:first-child i,
body.merchant-auth .auth-icon,
body.merchant-auth [class*="rounded"] > i.fas { color: var(--auth-green); }

/* 3 — form rhythm ---------------------------------------------------------- */
body.merchant-auth label { font-size: 13px !important; letter-spacing: .01em; }

body.merchant-auth input[type="text"],
body.merchant-auth input[type="email"],
body.merchant-auth input[type="password"],
body.merchant-auth input[type="tel"],
body.merchant-auth select {
  min-height: 48px;
  border-radius: 10px !important;
  background: #0a0b0b !important;
  border-color: var(--auth-line) !important;
  font-size: 15px !important;
}

body.merchant-auth input:focus-visible,
body.merchant-auth select:focus-visible {
  outline: 2px solid var(--auth-green);
  outline-offset: 1px;
  border-color: transparent !important;
}

body.merchant-auth button[type="submit"] {
  min-height: 52px;
  border-radius: 10px !important;
  font-size: 15px !important;
  letter-spacing: -0.005em;
}

/* Helper text sat as loud as the labels. */
body.merchant-auth .text-xs { font-size: 12px !important; line-height: 1.5; }

/* The heading ran at hero scale on a form page. */
body.merchant-auth h1,
body.merchant-auth .auth-card-body h2 {
  font-size: clamp(22px, 3vw, 27px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Two-column field rows are cramped below 560px. */
@media (max-width: 560px) {
  body.merchant-auth .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
  body.merchant-auth .auth-shell { padding-inline: 14px !important; }
}

/* 4 — remove the blue -------------------------------------------------------
   Three separate sources, all reading as "different product" next to a green
   brand:
     .auth-icon-bg              solid light blue (#68c8ef)
     .auth-context-badge        light blue tint
     Tailwind's gray-900        oklch(0.21 0.034 264.665) — a blue-hued gray,
                                which is why the plan panel looked navy
   --------------------------------------------------------------------------- */
/* pd-mobile-performance.css sets this with body.auth-pdcash.merchant-auth,
   so match that specificity rather than lose to it. */
body.auth-pdcash.merchant-auth .auth-icon-bg,
body.merchant-auth .auth-icon-bg {
  background: var(--auth-green-soft) !important;
  border: 1px solid var(--auth-green-line) !important;
}
body.auth-pdcash.merchant-auth .auth-icon-bg i,
body.auth-pdcash.merchant-auth .auth-icon-bg svg,
body.merchant-auth .auth-icon-bg i,
body.merchant-auth .auth-icon-bg svg { color: var(--auth-green) !important; }

body.merchant-auth .auth-context-badge,
body.merchant-auth .auth-context-badge--merchant {
  background: var(--auth-green-soft) !important;
  border-color: var(--auth-green-line) !important;
  color: var(--auth-green) !important;
}
body.merchant-auth .auth-context-badge i { color: var(--auth-green) !important; }

/* Neutral surface instead of the blue-hued gray ramp. */
body.merchant-auth .bg-gray-900,
body.merchant-auth .bg-gray-800 { background-color: #0f1110 !important; }

/* 5 — login panel spacing ---------------------------------------------------
   .auth-hero is a flex column with justify-content: space-between at 722px.
   Its content is shorter than that, so the browser spread brand / body / foot
   apart, leaving two large voids. Let the content sit together instead.
   --------------------------------------------------------------------------- */
body.merchant-auth .auth-hero {
  justify-content: flex-start !important;
  gap: 22px !important;
  padding: 30px 30px 26px !important;
}

/* Push only the footer strip down, so the panel still fills its column. */
body.merchant-auth .auth-hero__foot { margin-top: auto !important; padding-top: 22px; }

/* The demo card's meta row squeezed two labels into one line each and both
   wrapped. Give them their own rows below 1180px. */
body.merchant-auth .lg-demo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
}
body.merchant-auth .lg-demo__meta > span { white-space: nowrap; font-size: 12.5px; }
@media (max-width: 1180px) {
  body.merchant-auth .lg-demo__meta > span { flex: 1 1 100%; white-space: normal; }
}

/* The right column had the same spread problem. */
body.merchant-auth .auth-shell-body,
body.merchant-auth .auth-card-body { justify-content: flex-start !important; }


/* Both auth pages run the same two-column split; give it room. 960px squeezed
   the form column until the plan panel wrapped one word per line. */
body.auth-pdcash.merchant-auth .auth-shell.auth-has-hero { max-width: 1120px !important; }
body.auth-pdcash.merchant-auth .auth-hero { flex: 1 1 46%; min-width: 0; }
body.auth-pdcash.merchant-auth .auth-card { flex: 1 1 54%; min-width: 0; }

/* ---------------------------------------------------------------------------
   Register carries auth-login-page so the split-layout CSS applies to it.
   Three rules keyed to that class then fire on the wrong page.
   --------------------------------------------------------------------------- */

/* 1 — the nav prompt read "New merchant?" on the register page. Both source
   rules sit at 4 classes; register adds a 5th so intent wins on either page. */
body.auth-pdcash.merchant-auth.auth-register-page.auth-login-page .nav-cta::before {
  content: "Already a merchant?";
}

/* 2 — pd-mobile-performance.css hides .btn-primary for register and .btn-ghost
   for login. Matching both classes hid both buttons, leaving a prompt with
   nothing to click. Register keeps the sign-in link. */
body.auth-pdcash.merchant-auth.auth-register-page.auth-login-page .nav-cta .btn-ghost {
  display: inline-flex !important;
}
body.auth-pdcash.merchant-auth.auth-register-page.auth-login-page .nav-cta .btn-primary {
  display: none !important;
}

/* 3 — an inline rule pins .nav to width:min(100% - 32px, 960px) on the
   login-page class. A max-width cannot widen a set width, so the nav pill sat
   160px narrower than the 1120px card beneath it on both auth pages. */
body.auth-pdcash.merchant-auth .nav {
  width: min(100% - 32px, 1120px) !important;
  margin-inline: auto !important;
}
@media (max-width: 719px) {
  body.auth-pdcash.merchant-auth .nav { width: calc(100% - 24px) !important; }
}

/* The plan panel is a justify-between row. That works in a full-width card, but
   the form column is 435px in the split layout, so both halves competed for one
   line and "Free Plan - $0 security deposit; live routes require approval"
   broke across three. Stack them: the note reads as a footnote, not a column. */
body.merchant-auth #registerForm > .flex.items-center.justify-between {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding-block: 12px !important;
}
body.merchant-auth #registerForm > .flex.items-center.justify-between > * {
  text-align: left !important;
}

/* ===========================================================================
   CONTROL PARITY — /login vs /register            (added 2026-08-20)

   Both URLs are the same file (login.php, ?mode=register) inside the same
   auth_layout, so every difference below was drift, not design. Each one had
   been "fixed" before by appending a more specific !important override to
   pd-mobile-performance.css — five escalating rules for the shell padding,
   five for the card radius, five for the icon tile, eleven for the card
   padding. Rather than add a sixth round of escalation there, register is
   pinned to LOGIN's values here, in the layer that loads last.

   Login is the reference because the split-hero layout was designed for it.
   Measured at 1440x900 before/after; see the review that prompted this.
   =========================================================================== */

/* 1 — Card corners. The hero keeps 14px 0 0 14px on both pages, but register's
   card was a fully-rounded 20px, so the two halves stopped reading as one slab
   and showed a seam down the middle. */
@media (min-width: 900px) {
  body.auth-pdcash.merchant-auth.auth-register-page .auth-has-hero .auth-card {
    border-radius: 0 14px 14px 0 !important;
  }
}

/* 2 — Form column geometry. Register's card padding was 36px 48px 38px against
   login's 34px 32px, which pushed the column 16px right and made it 32px
   narrower — the plan panel then had to wrap. */
@media (min-width: 900px) {
  /* .auth-card itself has padding:0 on both pages — the inset lives on the body
     element. Padding both would double it. */
  body.auth-pdcash.merchant-auth.auth-register-page .auth-has-hero .auth-card-body {
    padding: 34px 32px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* 3 — Header icon tile: 56x56 r12 on register vs 44x44 r8 on login. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-card-body .auth-heading .auth-icon-bg,
body.auth-pdcash.merchant-auth.auth-register-page .auth-card-body .auth-icon-bg,
body.auth-pdcash.merchant-auth.auth-register-page .auth-icon-bg {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
}

/* 4 — Field height: register's inputs were 56px, login's 50px. */
body.auth-pdcash.merchant-auth.auth-register-page #registerForm input,
body.auth-pdcash.merchant-auth.auth-register-page .auth-card input {
  min-height: 50px !important;
}

/* 5 — Primary button. Register was 56px / weight 600 / gradient (ui-polish.css
   paints a gradient onto anything carrying .bg-primary-500); login is 52px /
   weight 700 / flat fill. Flat wins — the gradient only appears on one page. */
body.auth-pdcash.merchant-auth.auth-register-page #registerSubmitBtn,
body.auth-pdcash.merchant-auth.auth-register-page .auth-card button[type="submit"] {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 24px !important;
  font-weight: 700 !important;
  background-image: none !important;
}

/* 6 — Password reveal. Login puts the toggle inside the field; register shipped
   a flex sibling with a half-rounded input, so the same control looked like two
   different widgets. Restyled, not re-marked-up: the form DOM is untouched. */
body.auth-pdcash.merchant-auth.auth-register-page #registerForm .flex:has(> #password) {
  position: relative !important;
  display: block !important;
}
body.auth-pdcash.merchant-auth.auth-register-page #password {
  width: 100% !important;
  /* Radius is deliberately NOT set: the shared auth-input rule already gives both
     pages 14px. Only the half-rounded `rounded-l-lg` from the flex pairing had to
     go, and full width restores it. */
  padding-right: 52px !important;
}
body.auth-pdcash.merchant-auth.auth-register-page #password ~ button {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 38px !important;
  min-height: 0 !important;
  border-radius: 6px !important;
  border-left: 0 !important;
}

/* 7 — Required markers. Register starred every field in red — the only red on
   an otherwise green/white page — while login starred nothing, though both
   forms are entirely required. Drop the asterisk to match login; the `required`
   attribute and its assistive-tech semantics are untouched. */
body.auth-pdcash.merchant-auth.auth-register-page #registerForm label .text-red-400,
body.auth-pdcash.merchant-auth.auth-register-page #registerForm label .text-red-500,
body.auth-pdcash.merchant-auth.auth-register-page #registerForm label span[aria-hidden="true"] {
  display: none !important;
}

/* 8 — Submit-button icon contrast.
   The brand-green sweep above ("[class*=rounded] > i.fas") also catches the
   primary submit button, which carries `rounded-lg`. That painted the icon
   #36d240 on a #00d632 button — green on green, invisible, which is what made
   the Create-account glyph look like an empty box even after the missing
   fa-user-plus was swapped for a real one. Icons in a filled button follow the
   button's own text colour. */
body.merchant-auth .auth-card button[type="submit"] i.fas,
body.merchant-auth .auth-card button[type="submit"] i,
body.merchant-auth .auth-card button[type="submit"] svg {
  color: inherit !important;
}

/* 9 — Page background.
   This is the difference you actually SEE from across the room. Login paints a
   four-layer ambience on <body> — two green radial glows plus a 54px grid — from
   an inline rule `body.auth-pdcash.auth-login-page`. Register carries that class
   too, so it should have inherited it, but pd-mobile-performance.css also matches
   it with `body.auth-pdcash.auth-register-page` at the SAME specificity (0,2,1)
   and a two-glow, no-grid stack. The page's inline <style> is emitted BEFORE the
   stylesheet links, so on register the external rule is later and wins: no grid,
   different glow positions, flatter page.

   Restated here (loads last) so both pages share one background. Values copied
   from login's computed style verbatim. */
body.auth-pdcash.merchant-auth.auth-register-page {
  background-color: #000 !important;
  background-image:
    radial-gradient(52% 42% at 16% 10%, rgba(0, 214, 50, 0.075), rgba(0, 0, 0, 0) 70%),
    radial-gradient(42% 38% at 88% 86%, rgba(0, 214, 50, 0.05), rgba(0, 0, 0, 0) 72%),
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px) !important;
  background-size: auto, auto, 54px 54px, 54px 54px !important;
  background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0% !important;
  background-repeat: repeat, repeat, repeat, repeat !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

/* 10 — Nav pill radius. Login's pill drops to 12px under the mobile breakpoint;
   the register override above pinned 14px at every width. */
@media (max-width: 719px) {
  body.auth-pdcash.merchant-auth.auth-register-page .nav {
    border-radius: 12px !important;
  }
}

/* ===========================================================================
   PARITY ROUND 2 — everything still visibly different after round 1.
   Found by diffing computed styles role-by-role (card, heading, h1, subtitle,
   icon tile, label, input, submit) rather than by the property list I picked
   the first time. Login stays the reference on every one.
   =========================================================================== */

/* 11 — Card elevation. Register floated on a much heavier shadow. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-card {
  box-shadow: rgba(0, 0, 0, 0.34) 0 18px 54px 0 !important;
}

/* 12 — Card header. Register drew a divider under the heading that login has no
   trace of — and drew it in #68c8ef, the legacy merchant blue this file exists
   to remove. Also 24px/20px of extra spacing and a wider icon-to-text gap. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-heading {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 0 18px !important;
  gap: normal 12px !important;
}

/* 13 — Header type. The subtitle ran 15.2px on register against 12.48px on
   login — the single most visible text difference between the two pages. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-heading h1 {
  line-height: 30px !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .auth-heading p {
  font-size: 12.48px !important;
  line-height: 16.224px !important;
  margin: 2px 0 0 !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .auth-icon-bg {
  font-size: 16px !important;
  line-height: 25.6px !important;
}

/* 14 — Submit button. Register carried an inset highlight + green glow that
   login does not, and laid out as a block so the icon and label lost their gap. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-card button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8.8px !important;
  box-shadow: none !important;
}

/* 15 — Field glyphs. login.php's v2 pass put a mail/lock outline inside each
   input; register's fields had none, so the same form control looked different
   on the two pages. Same data-URIs, same 15px at 13.6px inset. These need
   !important: a shorthand `background` rule elsewhere resets background-image to
   none on .auth-card inputs and wins without it (documented in login.php's own
   notes). The username field gets a matching user outline in the same stroke. */
body.auth-pdcash.merchant-auth.auth-register-page #username,
body.auth-pdcash.merchant-auth.auth-register-page #email,
body.auth-pdcash.merchant-auth.auth-register-page #password {
  background-repeat: no-repeat !important;
  background-size: 15px !important;
  background-position: 13.6px 50% !important;
  padding-left: 40.8px !important;
}
body.auth-pdcash.merchant-auth.auth-register-page #username {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.38)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
body.auth-pdcash.merchant-auth.auth-register-page #email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.38)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}
body.auth-pdcash.merchant-auth.auth-register-page #password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.38)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E") !important;
}

/* 16 — Header alignment leftovers. Register's heading markup is a flex row
   (login's is a grid) and its icon tile kept a 16px bottom margin from the old
   stacked layout, pushing the icon off the text's centreline. The remaining
   deltas after this (submit text #020804 vs #000, 5.6px of input padding-right)
   are below visibility and structural, and are left alone deliberately. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-heading {
  align-items: center !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .auth-heading .auth-icon-bg {
  margin: 0 !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .auth-heading p {
  margin-top: 2px !important;
}

/* 17 — Header metrics, at the specificity that actually wins.
   pd-mobile-performance.css targets these as
   `body.auth-pdcash.merchant-auth.auth-register-page .auth-card-body > .auth-heading`
   — (0,5,1), one class above my earlier `.auth-heading` rules, which is why they
   lost. Adding .text-center takes it to (0,6,1). line-height is set unitless to
   match login's 1.25 so it tracks the clamped heading size instead of pinning a
   px value measured at one viewport. */
body.auth-pdcash.merchant-auth.auth-register-page .auth-card-body > .auth-heading.text-center {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .auth-card-body > .auth-heading.text-center h1 {
  line-height: 1.25 !important;
}
body.auth-pdcash.merchant-auth.auth-register-page .auth-card-body > .auth-heading.text-center p {
  margin: 2px 0 0 !important;
}

/* ---------------------------------------------------------------------------
   Canonical brand mark: bolt in a CIRCLE, matching favicon.png / logo.png.
   The glyph was never the issue. A green ROUNDED SQUARE holding one white
   glyph is the construction of Cash App's own icon, so only the container
   changed. Done in CSS so the three separate markup sites stay untouched.
   --------------------------------------------------------------------------- */
body.merchant-auth .nav-logo-icon,
body.merchant-auth .auth-hero__logo {
  border-radius: 50% !important;
  background: var(--auth-green) !important;
  color: #061008 !important;
}
/* Bolt kept — only the container changed from rounded square to circle. */

/* ============================================================
   pd-polish 2026-08-23 — 44px touch targets on auth surfaces
   Additive, presentation-only. Removing this block restores
   the prior look. Selectors match the existing 38px rules'
   specificity so these win by cascade order.
   ============================================================ */
.auth-pdcash .nav-cta .btn {
  min-height: 44px;
}
.auth-pdcash .auth-pd-support-link {
  min-height: 44px;
}
a.btn {
  min-height: 44px;
}
.lg-pass-toggle {
  min-width: 44px;
  min-height: 44px;
}
.lg-newmerch a,
a.text-primary-500 {
  padding-block: 14px;
  margin-block: -14px;
}

/* register password toggle - its tailwind min-h[44px] utility is not in the
   compiled sheet, so the 44px floor must come from here. */
#togglePassword {
  min-height: 44px;
}
/* inline prose links need a slightly deeper padding to clear 44px */
.lg-newmerch a,
a.text-primary-500 {
  padding-block: 15px;
  margin-block: -15px;
}