html:has(.auth-site:not([hidden])),
body:has(.auth-site:not([hidden])) {
  background: var(--mf-auth-page-start);
  color-scheme: light;
}

.auth-site {
  --auth-accent: var(--mf-auth-accent);
  --auth-accent-soft: rgb(0 113 227 / 10%);
  --auth-border: rgb(0 0 0 / 9%);
  --auth-ink: var(--mf-auth-ink);
  --auth-muted: var(--mf-auth-muted);
  --auth-surface: rgb(255 255 255 / 94%);
  --mf-surface-card-shadow: var(--mf-marketing-card-shadow);

  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100svh;
  place-items: center;
  overflow: hidden auto;
  padding: var(--mf-space-section) var(--mf-space-section);
  color: var(--auth-ink);
  background: linear-gradient(180deg, var(--mf-auth-page-start), var(--mf-auth-page) 56%, var(--mf-auth-page-end));
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

/* Access fields keep the public palette within the shared field recipe. */
.auth-site .mf-field,
.auth-site .mf-search-field {
  --mf-color-panel: var(--auth-surface);
  --mf-color-text: var(--auth-ink);
  --mf-color-muted: var(--auth-muted);
  --mf-color-subtle: var(--auth-muted);
}

.auth-site :where(svg.mf-icon) {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.auth-site :where(a, button, input) {
  -webkit-tap-highlight-color: transparent;
}

.auth-brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-self: center;
  gap: var(--mf-space-inline);
  padding: 0;
  color: var(--auth-ink);
  text-decoration: none;
  background: transparent;
  border: 0;
}

.auth-brand svg {
  color: var(--mf-marketing-accent);
  width: 24px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.auth-stage {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 34rem);
  gap: var(--mf-space-group);
}

.auth-page {
  width: 100%;
}

.auth-form,
.auth-form-actions {
  display: grid;
  gap: var(--mf-space-group);
}

.auth-form-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mf-space-inline);
  margin-top: 0;
  padding-top: var(--mf-space-surface);
  border-top: var(--mf-divider-rule);
}

.auth-form-actions .mf-button-secondary {
  justify-self: stretch;
  max-width: none;
}

.auth-inline-note,
.auth-form > p {
  color: var(--auth-muted);
}

.auth-site:has(.paywall) {
  display: block;
  overflow: visible;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--mf-auth-page);
}

.auth-stage:has(.paywall) {
  width: 100%;
  gap: 0;
}

.auth-stage:has(.paywall) > .auth-brand {
  position: absolute;
  top: var(--mf-space-5);
  left: max(var(--mf-space-6), calc((100% - 1280px) / 2));
  z-index: 2;
}

.paywall {
  --mf-color-bg-elevated: var(--auth-surface);
  --mf-color-panel: var(--auth-surface);
  --mf-color-text: var(--auth-ink);
  --mf-color-muted: var(--auth-muted);
  --mf-color-subtle: var(--auth-muted);
  --mf-color-border-strong: var(--auth-accent);
  --mf-color-accent: var(--auth-accent);
  --mf-color-success: rgb(var(--mf-marketing-success-rgb));
  --mf-color-success-rgb: var(--mf-marketing-success-rgb);
  --mf-segmented-background: var(--mf-auth-page);
  --mf-segmented-border: var(--auth-border);
  --mf-segmented-hover: var(--auth-accent-soft);
  --mf-segmented-text: var(--auth-muted);
  --mf-segmented-selected: var(--auth-surface);
  --mf-segmented-selected-text: var(--auth-ink);

  display: flex;
  min-height: 100svh;
  flex-direction: column;
}

.paywall-topbar {
  display: grid;
  width: min(calc(100% - 48px), 1280px);
  min-height: 88px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--mf-space-section);
  margin-inline: auto;
  border-bottom: var(--mf-border-rule);
}

.paywall-login {
  grid-column: 3;
  justify-self: end;
}

.paywall-progress {
  display: flex;
  grid-column: 2;
  justify-content: center;
  gap: var(--mf-space-section);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paywall-progress li {
  display: flex;
  align-items: center;
  gap: var(--mf-space-inline);
  color: var(--auth-muted);
}

.paywall-progress li > span {
  display: grid;
  flex: 0 0 var(--mf-space-8);
  width: var(--mf-space-8);
  height: var(--mf-space-8);
  place-items: center;
  border: var(--mf-border-rule);
  border-radius: var(--mf-radius-pill);
  transition:
    background-color 180ms ease-out,
    color 180ms ease-out;
}

.paywall-progress li[aria-current],
.paywall-progress li[data-complete="true"] {
  color: var(--auth-ink);
}

.paywall-progress li[aria-current] > span,
.paywall-progress li[data-complete="true"] > span {
  color: white;
  background: var(--auth-accent);
  border-color: var(--mf-color-border);
}

.paywall-step {
  display: grid;
  width: min(calc(100% - 48px), 1280px);
  min-width: 0;
  flex: 1;
  align-content: start;
  gap: var(--mf-space-display);
  margin-inline: auto;
  padding-block: var(--mf-space-surface);
}

.paywall-step[data-direction]:not([data-direction="0"]) {
  animation: paywall-enter 240ms var(--mf-ease-out) both;
}

.paywall-step[data-direction="-1"] {
  --paywall-enter-x: -16px;
}

.paywall-step-heading {
  text-align: center;
}

.paywall-step-heading h1 {
  margin: 0 0 var(--mf-space-section);
  text-wrap: balance;
  scroll-margin-top: var(--mf-space-6);
}

.paywall-step-heading h1 span {
  color: var(--mf-marketing-accent);
}

@media (forced-colors: active) {
  .paywall-step-heading h1 span {
    color: CanvasText;
    background: none;
  }
}

.paywall-step-heading :is(p, output) {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--auth-muted);
}

.paywall-plan-controls {
  display: grid;
  justify-items: center;
  gap: var(--mf-space-group);
}

.paywall-plan-controls p,
.paywall-status {
  margin: 0;
  color: var(--auth-muted);
  text-align: center;
}

.paywall-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
  gap: var(--mf-space-section);
}

.paywall-details {
  display: grid;
  width: min(100%, 1040px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: var(--mf-space-group);
  margin-inline: auto;
}

.paywall-form-panel {
  grid-area: 1 / 2;
  margin-top: var(--mf-space-display);
}

.paywall-selected-plan {
  min-width: 0;
  grid-area: 1 / 1;
}

.paywall-selection-label {
  margin: 0 0 var(--mf-space-group);
  color: var(--auth-muted);
}

.paywall-details[data-complete="true"] {
  max-width: 36rem;
  grid-template-columns: minmax(0, 1fr);
}

.paywall-details[data-complete="true"] > .paywall-form-panel {
  grid-area: auto;
}

.paywall-footer {
  display: flex;
  justify-content: center;
  gap: var(--mf-space-section);
  padding: var(--mf-space-section) var(--mf-space-section) calc(var(--mf-space-section) + env(safe-area-inset-bottom));
}

.paywall-footer a {
  color: var(--auth-muted);
  text-underline-offset: var(--mf-space-1);
}

@media (max-width: 800px) {
  .paywall-details {
    max-width: 36rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .paywall-details > .paywall-form-panel {
    grid-area: 1 / 1;
    margin-top: 0;
  }

  .paywall-selected-plan {
    grid-area: 2 / 1;
  }
}

@media (max-width: 700px) {
  .paywall-topbar {
    min-height: 140px;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--mf-space-section);
  }

  .paywall-progress {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--mf-space-inline);
  }

  .paywall-login {
    grid-column: 1;
    grid-row: 1;
    position: static;
  }

  .paywall-step-heading h1 span {
    display: block;
  }
}

.paywall-summary {
  display: grid;
  gap: var(--mf-space-group);
  margin: 0;
}

.paywall-summary > div,
.paywall-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mf-space-group);
}

.paywall-summary dt {
  color: var(--auth-muted);
}

.paywall-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.paywall-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--mf-space-inline);
}

.paywall-discount {
  display: flex;
  align-items: center;
  gap: var(--mf-space-inline);
  margin: 0;
  color: var(--auth-accent);
}

.paywall-total {
  padding-top: var(--mf-space-surface);
  border-top: var(--mf-divider-rule);
}

.paywall-total strong {
  font-variant-numeric: tabular-nums;
  animation: paywall-enter 200ms ease-out both;
}

@keyframes paywall-enter {
  from {
    opacity: 0;
    transform: translateX(var(--paywall-enter-x, 16px));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 560px) {
  .auth-site {
    min-height: 100dvh;
    align-items: start;
    padding: calc(var(--mf-space-surface) + env(safe-area-inset-top)) max(var(--mf-space-surface), env(safe-area-inset-right)) calc(var(--mf-space-surface) + env(safe-area-inset-bottom))
      max(var(--mf-space-surface), env(safe-area-inset-left));
  }

  .auth-brand {
    min-height: 40px;
  }

  .auth-stage {
    width: 100%;
    min-height: 0;
    gap: var(--mf-space-group);
  }

  .auth-form-links {
    gap: var(--mf-space-text);
  }
}

@media (max-width: 360px) {
  .auth-form-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .paywall-progress li {
    flex-direction: column;
    gap: var(--mf-space-text);
  }

}

@media (prefers-reduced-motion: reduce) {
  .auth-site *,
  .auth-site *::before,
  .auth-site *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}