.apex-auth,
.apex-auth * {
  box-sizing: border-box !important;
}

.apex-auth {
  --apex-navy: #07152f;
  --apex-ink: #101b33;
  --apex-muted: #60708c;
  --apex-blue: #1689ff;
  --apex-blue-deep: #0872e6;
  --apex-line: #dce5f1;
  --apex-soft: #f4f8fd;
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 780px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 88px 24px 104px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 160, 255, 0.18), transparent 27%),
    radial-gradient(circle at 88% 82%, rgba(93, 102, 255, 0.14), transparent 30%),
    linear-gradient(135deg, #f2f9ff 0%, #f8fbff 42%, #eef5ff 100%) !important;
  color: var(--apex-ink) !important;
  font-family: Rubik, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.apex-auth::before {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  content: "" !important;
  opacity: 0.55 !important;
  background-image:
    linear-gradient(rgba(74, 130, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 130, 184, 0.08) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent) !important;
}

.apex-auth-orb {
  position: absolute !important;
  z-index: -1 !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  filter: blur(2px) !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
  animation: apex-auth-float 9s ease-in-out infinite !important;
}

.apex-auth-orb--one {
  top: 11% !important;
  left: -112px !important;
  background: radial-gradient(circle, rgba(42, 166, 255, 0.26), rgba(42, 166, 255, 0)) !important;
}

.apex-auth-orb--two {
  right: -96px !important;
  bottom: 4% !important;
  background: radial-gradient(circle, rgba(93, 99, 255, 0.2), rgba(93, 99, 255, 0)) !important;
  animation-delay: -4.5s !important;
}

@keyframes apex-auth-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -18px, 0) scale(1.04); }
}

.apex-auth-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr) !important;
  width: min(1120px, 100%) !important;
  min-height: 670px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(133, 158, 193, 0.3) !important;
  border-radius: 32px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 34px 90px rgba(30, 66, 110, 0.17),
    0 4px 16px rgba(30, 66, 110, 0.08) !important;
  backdrop-filter: blur(18px) !important;
}

.apex-auth-story {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  padding: 44px !important;
  overflow: hidden !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 85% 18%, rgba(52, 174, 255, 0.36), transparent 28%),
    linear-gradient(155deg, #0a1a39 0%, #092b59 52%, #0759a9 100%) !important;
}

.apex-auth-story::before,
.apex-auth-story::after {
  position: absolute !important;
  content: "" !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.apex-auth-story::before {
  right: -98px !important;
  bottom: 88px !important;
  width: 250px !important;
  height: 250px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0 0 0 38px rgba(255, 255, 255, 0.035),
    0 0 0 76px rgba(255, 255, 255, 0.025) !important;
}

.apex-auth-story::after {
  top: 132px !important;
  left: -65px !important;
  width: 138px !important;
  height: 138px !important;
  background: rgba(55, 184, 255, 0.1) !important;
  filter: blur(1px) !important;
}

.apex-auth-brand,
.apex-auth-story-copy,
.apex-auth-surfaces {
  position: relative !important;
  z-index: 1 !important;
}

.apex-auth-brand {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

.apex-auth-brand img,
.apex-auth-brand-mark {
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 13px !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 9px 28px rgba(3, 15, 36, 0.22) !important;
  object-fit: cover !important;
}

.apex-auth-brand strong {
  color: #49b5ff !important;
  font-weight: 800 !important;
}

.apex-auth-story-copy {
  max-width: 390px !important;
  padding: 52px 0 44px !important;
}

.apex-auth-story-kicker {
  display: inline-flex !important;
  margin: 0 0 18px !important;
  padding: 7px 11px !important;
  border: 1px solid rgba(151, 218, 255, 0.3) !important;
  border-radius: 999px !important;
  color: #bde8ff !important;
  background: rgba(32, 155, 237, 0.12) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.apex-auth-story h2 {
  max-width: 390px !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: clamp(36px, 4vw, 52px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}

.apex-auth-story-copy > p {
  max-width: 400px !important;
  margin: 0 !important;
  color: rgba(230, 243, 255, 0.78) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.apex-auth-benefits {
  display: grid !important;
  gap: 13px !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.apex-auth-benefits li {
  display: flex !important;
  gap: 11px !important;
  margin: 0 !important;
  align-items: center !important;
  color: rgba(244, 250, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
}

.apex-auth-benefits li > span {
  display: inline-flex !important;
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  border: 1px solid rgba(148, 222, 255, 0.35) !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: rgba(42, 167, 245, 0.2) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.apex-auth-surfaces {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.apex-auth-surfaces span {
  padding: 8px 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 10px !important;
  color: rgba(238, 247, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.025em !important;
}

.apex-auth-card {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 45px 52px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: none !important;
}

.apex-auth-mode-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 0 28px !important;
  padding: 5px !important;
  border: 1px solid #e0e8f3 !important;
  border-radius: 14px !important;
  background: #f2f6fb !important;
}

.apex-auth-mode-switch.is-hidden,
.apex-auth-provider-wrap.is-hidden {
  display: none !important;
}

.apex-auth-mode-tab {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.apex-auth-mode-tab.is-active {
  color: #102344 !important;
  background: #fff !important;
  box-shadow: 0 4px 13px rgba(43, 70, 105, 0.1) !important;
}

.apex-auth-eyebrow {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--apex-blue-deep) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.apex-auth-header h1 {
  margin: 0 0 9px !important;
  color: var(--apex-ink) !important;
  font-size: clamp(28px, 3vw, 37px) !important;
  font-weight: 790 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}

.apex-auth-header p {
  max-width: 450px !important;
  margin: 0 0 24px !important;
  color: var(--apex-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.apex-auth-error {
  display: none !important;
  margin: -6px 0 18px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(220, 38, 38, 0.18) !important;
  border-radius: 12px !important;
  color: #9f1d1d !important;
  background: #fff4f4 !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
}

.apex-auth-error.is-visible {
  display: block !important;
}

.apex-auth-error.is-success {
  border-color: rgba(8, 145, 96, 0.2) !important;
  color: #08714c !important;
  background: #effcf6 !important;
}

/* Routine, non-fatal outcomes: a provider SDK that never arrived, a popup the browser
 * declined, One Tap staying quiet. None of them stops anyone signing in, so none of
 * them gets the red treatment. */
.apex-auth-error.is-notice {
  border-color: rgba(22, 137, 255, 0.22) !important;
  color: #14497f !important;
  background: #f2f8ff !important;
}

.apex-auth-section {
  display: grid !important;
  gap: 11px !important;
  width: 100% !important;
  margin: 0 !important;
  align-items: stretch !important;
}

/* Both provider buttons take their chrome from this one rule, so Google and Apple
 * cannot drift apart in height, radius, or type. */
.apex-auth-provider {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid #ced9e8 !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--apex-ink) !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}

.apex-auth-provider-face {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  /* Clicks must reach the Identity Services overlay stacked above this layer. */
  pointer-events: none !important;
}

.apex-auth-provider-mark {
  display: block !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
}

/* The Apple glyph reads heavier than the G at a matched box, and its artwork sits
 * slightly low in its own viewBox. */
.apex-auth-provider-mark--apple {
  width: 16px !important;
  height: 16px !important;
  transform: translateY(-1px) !important;
}

.apex-auth-provider--google:hover {
  border-color: #a9bed6 !important;
  background: #f6f9fd !important;
}

.apex-auth-provider--apple {
  border-color: #050505 !important;
  color: #fff !important;
  background: #050505 !important;
}

.apex-auth-provider--apple:hover {
  border-color: #1a1a1a !important;
  background: #1a1a1a !important;
}

.apex-auth-provider:focus-visible {
  outline: 2px solid #0d7ff0 !important;
  outline-offset: 2px !important;
}

/* Set by apex-auth.js when a provider SDK never arrives. The Google shell is our own
 * markup under an invisible iframe, so without this it stays a perfectly clickable
 * button that does nothing at all. */
.apex-auth-provider.is-unavailable {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
}

/* Set by apex-auth.js when an auto-start could not open on its own — a popup blocked
 * for want of a user gesture, One Tap suppressed. The flow is fine; it just needs the
 * click it never had. So this points at the button rather than dimming it. */
.apex-auth-provider.is-suggested {
  border-color: var(--apex-blue) !important;
  box-shadow: 0 0 0 3px rgba(22, 137, 255, 0.16) !important;
}

.apex-auth-btn {
  position: relative !important;
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid #ced9e8 !important;
  border-radius: 13px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--apex-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

.apex-auth-btn:hover {
  transform: translateY(-1px) !important;
  border-color: #aac0db !important;
  box-shadow: 0 8px 20px rgba(31, 64, 106, 0.1) !important;
}

.apex-auth-btn:active {
  transform: translateY(0) !important;
}

.apex-auth-btn:disabled,
.apex-auth-btn.is-loading {
  opacity: 0.68 !important;
  cursor: wait !important;
  transform: none !important;
}

.apex-auth-btn-primary {
  overflow: hidden !important;
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0d7ff0 0%, #28a1ff 100%) !important;
  box-shadow: 0 11px 25px rgba(20, 137, 245, 0.24) !important;
}

.apex-auth-btn-primary::before {
  position: absolute !important;
  top: -80% !important;
  left: -35% !important;
  width: 38% !important;
  height: 260% !important;
  content: "" !important;
  opacity: 0 !important;
  background: rgba(255, 255, 255, 0.23) !important;
  transform: rotate(24deg) !important;
  transition: left 420ms ease, opacity 180ms ease !important;
}

.apex-auth-btn-primary:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, #0875e3 0%, #1598fb 100%) !important;
  box-shadow: 0 14px 30px rgba(20, 137, 245, 0.3) !important;
}

.apex-auth-btn-primary:hover::before {
  left: 112% !important;
  opacity: 1 !important;
}

.apex-auth-divider {
  display: flex !important;
  gap: 12px !important;
  margin: 19px 0 !important;
  align-items: center !important;
  color: #91a0b6 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.apex-auth-divider::before,
.apex-auth-divider::after {
  height: 1px !important;
  content: "" !important;
  flex: 1 !important;
  background: #dfe7f1 !important;
}

.apex-auth-form {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}

.apex-auth-form--hidden {
  display: none !important;
}

.apex-auth-field {
  display: block !important;
  margin: 0 !important;
}

.apex-auth-field > span:first-child {
  display: block !important;
  margin: 0 0 7px !important;
  color: #35445c !important;
  font-size: 11px !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
}

.apex-auth-password-wrap {
  position: relative !important;
  display: block !important;
}

.apex-auth-form input {
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 1px solid #cbd7e6 !important;
  border-radius: 12px !important;
  outline: none !important;
  color: #15213a !important;
  background: #fbfdff !important;
  box-shadow: inset 0 1px 1px rgba(9, 30, 66, 0.025) !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

.apex-auth-password-wrap input {
  padding-right: 64px !important;
}

.apex-auth-form input::placeholder {
  color: #9aa8ba !important;
  opacity: 1 !important;
}

.apex-auth-form input:hover {
  border-color: #aebfd4 !important;
}

.apex-auth-form input:focus {
  border-color: var(--apex-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(22, 137, 255, 0.11) !important;
}

.apex-auth-form input.is-match {
  border-color: #22a875 !important;
  box-shadow: 0 0 0 4px rgba(34, 168, 117, 0.09) !important;
}

.apex-auth-form input.is-mismatch {
  border-color: #dc5d5d !important;
  box-shadow: 0 0 0 4px rgba(220, 93, 93, 0.08) !important;
}

.apex-auth-password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #55708e !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
}

.apex-auth-password-toggle:hover {
  color: var(--apex-blue-deep) !important;
  background: #eef6ff !important;
}

.apex-auth-password-match {
  min-height: 15px !important;
  margin: -6px 0 0 !important;
  color: #74849a !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

.apex-auth-password-match.is-match {
  color: #10835a !important;
}

.apex-auth-password-match.is-mismatch {
  color: #b73535 !important;
}

.apex-auth-form-meta {
  display: flex !important;
  margin: -4px 0 -1px !important;
  justify-content: flex-end !important;
}

.apex-auth-link,
.apex-auth-footnote a,
.apex-auth-legal a {
  color: var(--apex-blue-deep) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.apex-auth-link {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.apex-auth-link:hover,
.apex-auth-footnote a:hover,
.apex-auth-legal a:hover {
  color: #045fbd !important;
  text-decoration: underline !important;
}

.apex-auth-forgot-intro {
  margin: -3px 0 3px !important;
  color: #65758d !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.apex-auth-footnote {
  margin: 17px 0 0 !important;
  color: #718097 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.apex-auth-legal {
  margin: -2px 0 0 !important;
  color: #7b899d !important;
  font-size: 9px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

.apex-auth-security-note {
  display: flex !important;
  gap: 7px !important;
  margin: 24px 0 0 !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8190a5 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.apex-auth-security-note span {
  display: inline-flex !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0b8b5e !important;
  background: #e8f8f2 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.apex-auth button:focus-visible,
.apex-auth a:focus-visible,
.apex-auth input:focus-visible {
  outline: 3px solid rgba(22, 137, 255, 0.32) !important;
  outline-offset: 2px !important;
}

/* Identity Services' real button: invisible, but stretched by apex-auth.js to cover
 * the shell exactly so every part of the visible button is clickable. Hit-testing
 * follows the transform, so the click still lands inside Google's own iframe. */
.apex-auth-provider-gsi {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  transform-origin: top left !important;
}

.apex-auth-provider-gsi > div,
.apex-auth-provider-gsi iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.apex-auth-logged-in {
  max-width: 600px !important;
  min-height: 420px !important;
  margin: 0 auto !important;
  padding-top: 150px !important;
  text-align: center !important;
}

.apex-auth-logged-in .apex-auth-btn {
  max-width: 300px !important;
  margin: 18px auto 0 !important;
}

/* Extension handoff (/extension-login/). The page has one job, finishing a connection,
 * so the marketing aside is not rendered at all and the decoration steps back to let
 * the card be the only thing on screen. Scoped to this root: the theme's own header
 * and footer are deliberately left alone, since removing them is a site-wide change. */
/* Doubled class on purpose. The responsive `.apex-auth` rules further down restate
 * padding and min-height at (0,1,0) with !important, so a single `.apex-auth--handoff`
 * ties with them and loses on source order — this block's padding did nothing at all
 * below 980px. (0,2,0) wins outright regardless of where the media queries sit. */
.apex-auth.apex-auth--handoff {
  min-height: 0 !important;
  padding: 56px 20px 72px !important;
}

.apex-auth--handoff::before {
  display: none !important;
}

.apex-auth--handoff .apex-auth-orb {
  display: none !important;
}

.apex-auth--handoff .apex-auth-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(468px, 100%) !important;
  min-height: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow:
    0 22px 60px rgba(30, 66, 110, 0.14),
    0 3px 12px rgba(30, 66, 110, 0.07) !important;
}

.apex-auth--handoff .apex-auth-card {
  padding: 38px 36px 32px !important;
  justify-content: flex-start !important;
  background: #fff !important;
}

.apex-auth--handoff .apex-auth-header h1 {
  font-size: clamp(24px, 4.4vw, 29px) !important;
}

/* The signed-in card is a status panel, not a form: nothing sits under the button. */
.apex-auth--connect .apex-auth-footnote {
  margin-top: 16px !important;
}

@media (max-width: 980px) {
  .apex-auth {
    padding: 64px 20px 84px !important;
  }

  .apex-auth-layout {
    grid-template-columns: 1fr !important;
    width: min(650px, 100%) !important;
  }

  .apex-auth-story {
    min-height: 330px !important;
    padding: 34px 38px !important;
  }

  .apex-auth-story-copy {
    max-width: 540px !important;
    padding: 48px 0 32px !important;
  }

  .apex-auth-story h2 {
    max-width: 520px !important;
    font-size: 42px !important;
  }

  .apex-auth-benefits {
    grid-template-columns: 1fr 1fr !important;
  }

  .apex-auth-benefits li:last-child {
    grid-column: 1 / -1 !important;
  }

  .apex-auth-card {
    padding: 42px 52px 38px !important;
  }
}

@media (max-width: 600px) {
  .apex-auth {
    min-height: 0 !important;
    padding: 30px 12px 58px !important;
  }

  .apex-auth-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 24px !important;
  }

  .apex-auth-story {
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 245px !important;
    padding: 27px 23px !important;
  }

  .apex-auth-brand {
    font-size: 15px !important;
  }

  .apex-auth-brand img,
  .apex-auth-brand-mark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .apex-auth-story-copy {
    padding: 34px 0 20px !important;
  }

  .apex-auth-story-kicker {
    margin-bottom: 13px !important;
    font-size: 9px !important;
  }

  .apex-auth-story h2 {
    margin-bottom: 12px !important;
    font-size: 34px !important;
  }

  .apex-auth-story-copy > p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .apex-auth-benefits {
    display: none !important;
  }

  .apex-auth-surfaces span {
    padding: 6px 8px !important;
    font-size: 8px !important;
  }

  .apex-auth-card {
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 30px 21px 28px !important;
  }

  .apex-auth-mode-switch {
    margin-bottom: 24px !important;
  }

  .apex-auth-header h1 {
    font-size: 29px !important;
  }

  .apex-auth-header p {
    margin-bottom: 21px !important;
    font-size: 12px !important;
  }

  /* Now that the handoff padding actually reaches this width, it needs a phone value
   * of its own: 56/72 was written for the desktop card and would otherwise make the
   * one page whose whole point is being compact the tallest one on a phone. Matches
   * the (0,2,0) above and sits later in source, so it wins. */
  .apex-auth.apex-auth--handoff {
    padding: 34px 14px 44px !important;
  }

  .apex-auth--handoff .apex-auth-card {
    padding: 28px 20px 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apex-auth-orb {
    animation: none !important;
  }

  .apex-auth *,
  .apex-auth *::before,
  .apex-auth *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}