@layer psv-page {
  .purchase-scene > .site-shell {
    min-block-size: 0;
  }

  /* The account step is a gate in a flow, not a card on a page. It uses the
     scene's real width: on the left the ledger — where you are and what you
     chose — and on the right the gate itself, divided by the same single rule
     the rest of the site is built from. Nothing here is a filled box. */
  .auth-shell {
    width: var(--psv-shell-wide);
  }

  .scene-shell--account {
    grid-template-rows: minmax(0, 1fr);
  }

  /* The rail states the position, thin, across the top. Beneath it the scene
     holds one thing: the credentials, optically centred. Nothing flanks them. */
  .scene-shell--account {
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(16px, 2.4svh, 32px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .scene-shell--account {
      gap: clamp((16 * var(--psv-u)), (17.52 * var(--psv-u)), (32 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .auth-scene .purchase-progress {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block-end: 1px solid var(--psv-line);
  }

  .auth-scene .purchase-progress li {
    min-block-size: calc(30 * var(--psv-u));
    padding-inline: calc(12 * var(--psv-u));
    gap: calc(8 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .auth-scene .purchase-progress__number {
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .auth-scene .purchase-progress li[aria-current="step"] {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--psv-accent);
  }

  .auth-scene .purchase-progress li[aria-current="step"] .purchase-progress__number {
    color: var(--psv-accent);
  }

  .auth-scene .purchase-progress li[aria-current="step"]::after {
    content: none;
  }

  .account-centre {
    display: grid;
    align-content: start;
    min-block-size: 0;
  }

  /* Keep the form's top anchored while login, registration and errors change
     its height. These routes use natural document scrolling at every size. */
  .auth-scene {
    justify-content: flex-start;
  }

  /* On a scaled desktop the height the canvas does not use is shared above
     and below, as on every scene (site-tokens.css, --psv-canvas-extra); the
     form stays anchored at the top of what remains. */
  @media (min-width: 1051px) {
    .auth-scene::before {
      content: "";
      flex: 0 0 calc(var(--psv-canvas-extra) / 2);
    }
  }

  @media (min-width: 761px) {
    .auth-scene .account-centre {
      padding-block-start: clamp(16px, 3svh, 32px);
    }
    /* desktop-scale:generated */
    @media (min-width: 1051px) {
      .auth-scene .account-centre {
        padding-block-start: clamp((16 * var(--psv-u)), (21.9 * var(--psv-u)), (32 * var(--psv-u)));
      }
    }
    /* desktop-scale:end */
  }

  .account-gate {
    display: grid;
    align-content: start;
    width: 100%;
    min-block-size: 0;
    gap: clamp(14px, 2svh, 24px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .account-gate {
      gap: clamp((14 * var(--psv-u)), (14.6 * var(--psv-u)), (24 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .account-gate > .auth-state-stack {
    order: 1;
  }


  /* The plan travels as one quiet line above the instrument. */







  .account-gate .btn--primary {
    justify-self: end;
    min-block-size: calc(52 * var(--psv-u));
    width: auto;
    margin-block-start: clamp(14px, 2svh, 24px);
    padding-inline: clamp(28px, 3.4vw, 52px);
    color: var(--psv-text);
    background: transparent;
    border: 1px solid var(--psv-line-strong);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .account-gate .btn--primary {
      margin-block-start: clamp((14 * var(--psv-u)), (14.6 * var(--psv-u)), (24 * var(--psv-u)));
      padding-inline: clamp((28 * var(--psv-u)), (52.224 * var(--psv-u)), (52 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  @media (hover: hover) and (pointer: fine) {
    .account-gate .btn--primary:hover {
      color: var(--psv-bg-deep);
      background-color: var(--psv-accent);
      border-color: var(--psv-accent);
    }
  }

  .account-gate .btn--primary:focus-visible,
  .account-gate .btn--primary:active {
    color: var(--psv-bg-deep);
    background-color: var(--psv-accent-pale);
    border-color: var(--psv-accent-pale);
  }

  @media (max-width: 900px) {
    .auth-scene .purchase-progress li {
      padding-inline: 4px;
      gap: 2px;
      font-size: 8px;
    }

    .account-centre {
      align-content: start;
    }
  }

  /* The gate speaks in the same type as Pricing: control text is mono at the
     control scale and tracking, not the body sans. A field holds data, so the
     value it holds is set in mono too. */
  /* Label and value share one size, so the band reads as a single line of the
     same record — and that size is one a person can actually read and type in. */
  .account-gate .field input {
    font-family: var(--psv-font-mono);
    font-size: clamp(11px, .95vw, 13px);
    letter-spacing: var(--psv-track-label);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .account-gate .field input {
      font-size: max(var(--psv-text-floor), clamp((11 * var(--psv-u)), (14.592 * var(--psv-u)), (13 * var(--psv-u))));
    }
  }
  /* desktop-scale:end */

  .account-gate .text-action {
    font-family: var(--psv-font-mono);
    font-size: clamp(9px, .74vw, 11px);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-control);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .account-gate .text-action {
      font-size: max(var(--psv-text-floor), clamp((9 * max(var(--psv-u), var(--psv-label-floor))), (11.3664 * max(var(--psv-u), var(--psv-label-floor))), (11 * max(var(--psv-u), var(--psv-label-floor)))));
    }
  }
  /* desktop-scale:end */

  .account-gate .btn--primary {
    font-family: var(--psv-font-mono);
    font-size: clamp(9px, .74vw, 11px);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-control);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .account-gate .btn--primary {
      font-size: max(var(--psv-text-floor), clamp((9 * max(var(--psv-u), var(--psv-label-floor))), (11.3664 * max(var(--psv-u), var(--psv-label-floor))), (11 * max(var(--psv-u), var(--psv-label-floor)))));
    }
  }
  /* desktop-scale:end */

  .account-gate .auth-tab b {
    font-weight: var(--psv-weight-medium);
  }

  /* Two registers, not two pills. The chosen one is marked by a rule under it
     and by its own weight, never by a filled pill. */
  .auth-tabs {
    display: flex;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    gap: clamp(16px, 2vw, 34px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .auth-tabs {
      gap: clamp((16 * var(--psv-u)), (30.72 * var(--psv-u)), (34 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .auth-tab {
    display: flex;
    align-items: baseline;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(8 * var(--psv-u)) 0;
    gap: calc(8 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-control);
    background: transparent;
    border: 0;
  }

  .auth-tab__index {
    color: var(--psv-line-strong);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-label);
    font-variant-numeric: tabular-nums;
    transition: color .18s ease;
  }

  .auth-tab[aria-selected="true"] .auth-tab__index {
    color: var(--psv-accent);
  }

  .auth-tab[aria-selected="true"] {
    color: var(--psv-text);
    box-shadow: inset 0 -2px var(--psv-accent);
  }

  .auth-state-stack,
  .auth-state {
    min-block-size: 0;
  }

  .auth-state {
    height: 100%;
  }

  /* The bands run the full measure; each band sets its own three columns. */
  .auth-form {
    display: grid;
    align-content: start;
    min-block-size: 0;
    gap: 0;
  }

  /* Each field is a band across the measure: the label in the left margin, the
     value in the reading column, and the row's own note in the right margin —
     a validation message, or for the password, the way to recover it. The link
     belongs to its row, not to the floor of the form. */
  .field {
    display: grid;
    grid-template-columns: minmax(calc(120 * var(--psv-u)), .85fr) minmax(0, 2.4fr) minmax(calc(110 * var(--psv-u)), .8fr);
    align-items: center;
    gap: clamp(16px, 2.2vw, 34px);
    min-block-size: calc(78 * var(--psv-u));
    padding-block: clamp(10px, 1.4svh, 18px);
    border-block-start: 1px solid rgb(var(--psv-line-rgb) / .3);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .field {
      gap: clamp((16 * var(--psv-u)), (33.792 * var(--psv-u)), (34 * var(--psv-u)));
      padding-block: clamp((10 * var(--psv-u)), (10.22 * var(--psv-u)), (18 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .auth-form .field:last-of-type {
    border-block-end: 1px solid rgb(var(--psv-line-rgb) / .3);
  }

  .field-aside {
    display: grid;
    justify-items: end;
    gap: calc(4 * var(--psv-u));
    text-align: end;
  }

  .field label {
    color: var(--psv-line-strong);
    font-family: var(--psv-font-mono);
    font-size: clamp(11px, .95vw, 13px);
    font-weight: var(--psv-weight-medium);
    line-height: 1.25;
    letter-spacing: var(--psv-track-label);
    text-transform: uppercase;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .field label {
      font-size: max(var(--psv-text-floor), clamp((11 * var(--psv-u)), (14.592 * var(--psv-u)), (13 * var(--psv-u))));
    }
  }
  /* desktop-scale:end */

  /* An input is a ruled line, not a filled box. */
  .field input {
    width: 100%;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(4 * var(--psv-u)) 0;
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(15 * var(--psv-u)));
    line-height: 1.2;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .field input:focus-visible {
    border-block-end-color: var(--psv-accent);
    outline: 2px solid var(--psv-accent);
    outline-offset: 3px;
  }

  .field input[aria-invalid="true"] {
    border-block-end-color: var(--psv-danger);
  }

  .field-message {
    color: var(--psv-danger);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.35;
    letter-spacing: .06em;
  }

  .field-message:empty {
    display: none;
  }

  /* The one field message that is not a refusal: a promotion code applied to
     the invoice. Same place, same size, the page's accent instead of danger. */
  .field-message.is-applied {
    color: var(--psv-accent);
  }

  /* A refused sign-in is the only message on this form that is not about one
     field, so it is ruled like the payment failure rather than tucked beside a
     label. It sits directly above the button that produced it. */
  .auth-error {
    margin: 0;
    padding: calc(7 * var(--psv-u)) calc(10 * var(--psv-u));
    border: 1px solid var(--psv-danger);
    border-radius: calc(6 * var(--psv-u));
    color: var(--psv-danger);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.35;
    letter-spacing: .04em;
  }

  .auth-form[data-auth-busy] {
    cursor: progress;
  }

  .auth-form[data-auth-busy] button[type="submit"] {
    opacity: .72;
  }

  .form-links {
    display: flex;
    justify-content: flex-end;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
  }

  .text-action {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: 0;
    color: var(--psv-accent-pale);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    line-height: 1.35;
    text-decoration: underline;
    text-underline-offset: calc(4 * var(--psv-u));
    background: transparent;
    border: 0;
  }

  .text-action--center {
    justify-self: center;
  }

  .reserved-status {
    min-block-size: calc(32 * var(--psv-u));
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.35;
  }

  .auth-success {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: calc(16 * var(--psv-u));
    text-align: center;
  }

  .success-mark {
    display: grid;
    width: calc(56 * var(--psv-u));
    height: calc(56 * var(--psv-u));
    place-items: center;
    color: var(--psv-bg-deep);
    font-size: calc(28 * var(--psv-u));
    background: var(--psv-success);
    border-radius: 50%;
  }

  .auth-success p {
    color: var(--psv-text);
    font-size: calc(18 * var(--psv-u));
  }

  .confirmation-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-block-size: 0;
    gap: calc(12 * var(--psv-u));
  }

  .payment-content,
  .payment-status-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-block-size: 0;
    gap: calc(12 * var(--psv-u));
  }

  .confirmation-content > .missing-plan:not([hidden]),
  .payment-content > .missing-plan:not([hidden]),
  .payment-status-content > .missing-plan:not([hidden]) {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: calc(16 * var(--psv-u));
    background: var(--psv-page-ground);
  }

  .confirmation-content,
  .payment-content,
  .payment-status-content {
    position: relative;
  }

  .confirmation-register {
    grid-row: 2;
  }

  .confirmation-grid {
    display: grid;
    grid-template-columns: 1fr 1.28fr .92fr;
    min-block-size: 0;
  }

  .confirmation-grid > * {
    min-width: 0;
    padding: clamp(18px, 2vw, 28px);
    border-inline-start: 1px solid var(--psv-line);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .confirmation-grid > * {
      padding: clamp((18 * var(--psv-u)), (30.72 * var(--psv-u)), (28 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .confirmation-grid > *:first-child {
    border-inline-start: 0;
  }

  .transaction-kicker {
    display: block;
    margin-bottom: calc(12 * var(--psv-u));
    color: var(--psv-plan-color);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-label);
    text-transform: uppercase;
  }

  .confirmation-plan__identity {
    padding-bottom: calc(18 * var(--psv-u));
  }

  .confirmation-plan__identity .plan-name {
    display: block;
    color: var(--psv-plan-color);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-meta);
  }

  .confirmation-price {
    display: block;
    margin-top: calc(8 * var(--psv-u));
    color: var(--psv-text);
    font-size: clamp(34px, 3.5vw, 48px);
    font-weight: var(--psv-weight-medium);
    line-height: 1;
    letter-spacing: -.045em;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .confirmation-price {
      font-size: clamp((34 * var(--psv-u)), (53.76 * var(--psv-u)), (48 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .confirmation-included .transaction-step-title {
    margin-bottom: calc(18 * var(--psv-u));
  }

  .confirmation-actions {
    display: grid;
    margin-top: calc(18 * var(--psv-u));
    gap: calc(8 * var(--psv-u));
  }

  /* Why the plan cannot continue (for example Trial already used), shown
     under the button that was pressed rather than below the scene. */
  .confirmation-notice {
    margin: 0;
    padding: calc(8 * var(--psv-u)) calc(10 * var(--psv-u));
    border-inline-start: 2px solid var(--psv-accent);
    background: rgb(var(--psv-accent-rgb) / .06);
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    line-height: 1.45;
  }

  .confirmation-notice:empty {
    display: none;
  }

  body[data-plan-missing] [data-continue-payment] {
    display: none;
  }

  .payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(calc(210 * var(--psv-u)), .72fr) minmax(calc(250 * var(--psv-u)), .83fr);
    min-block-size: 0;
  }

  .payment-grid > * {
    min-width: 0;
    padding: clamp(16px, 1.8vw, 24px);
    border-inline-start: 1px solid var(--psv-line);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .payment-grid > * {
      padding: clamp((16 * var(--psv-u)), (27.648 * var(--psv-u)), (24 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .payment-grid > *:first-child {
    border-inline-start: 0;
  }

  .payment-details-step {
    display: grid;
    align-content: start;
    gap: calc(12 * var(--psv-u));
  }

  .payment-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    gap: calc(8 * var(--psv-u));
  }

  .payment-field {
    min-width: 0;
    padding: calc(8 * var(--psv-u)) calc(10 * var(--psv-u));
    border: 1px solid var(--psv-line);
  }

  .payment-operation {
    grid-column: 1 / -1;
  }

  .payment-details dt,
  .status-kicker {
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-control);
    text-transform: uppercase;
  }

  .payment-details dd {
    margin: calc(3 * var(--psv-u)) 0 0;
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
    font-weight: var(--psv-weight-medium);
  }

  .payment-operation dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(10 * var(--psv-u));
  }

  .payment-operation strong {
    font-size: calc(22 * var(--psv-u));
    font-weight: var(--psv-weight-medium);
  }

  .payment-operation code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--psv-accent-pale);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.4;
  }

  .payment-operation .payment-expiry {
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-regular);
    line-height: 1.4;
    text-align: end;
  }

  .payment-operation .payment-expiry[hidden] {
    display: none;
  }

  .qr-payment-step > .payment-amount-note {
    margin: 0;
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.4;
  }

  .network-reference {
    display: flex;
    align-items: center;
    min-block-size: calc(38 * var(--psv-u));
    padding: calc(6 * var(--psv-u)) calc(10 * var(--psv-u));
    gap: calc(10 * var(--psv-u));
    color: var(--psv-accent-pale);
    border: 1px solid var(--psv-line);
  }

  .network-reference span {
    display: grid;
    min-width: calc(48 * var(--psv-u));
    height: calc(22 * var(--psv-u));
    padding-inline: calc(5 * var(--psv-u));
    place-items: center;
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(8 * max(var(--psv-u), var(--psv-label-floor))));
    border: 1px solid currentColor;
  }

  .network-reference strong {
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-control);
  }

  .qr-payment-step {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: calc(10 * var(--psv-u));
    text-align: center;
  }

  .qr-payment-step .transaction-kicker {
    margin-bottom: 0;
  }

  .qr-frame {
    padding: calc(8 * var(--psv-u));
    background: var(--psv-white);
  }

  .qr-frame img {
    width: clamp(150px, 15vw, 190px);
    height: auto;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .qr-frame img {
      width: clamp((150 * var(--psv-u)), (230.4 * var(--psv-u)), (190 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .qr-payment-step > p {
    max-width: 36ch;
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.42;
  }

  .payment-action-step {
    display: grid;
    align-content: center;
    gap: calc(12 * var(--psv-u));
  }

  .payment-action-step .transaction-kicker {
    margin-bottom: 0;
  }

  .payment-action-step > p {
    max-width: 42ch;
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    line-height: 1.48;
  }

  .payment-actions {
    display: grid;
    gap: calc(8 * var(--psv-u));
  }

  /* A promotion code is the exception, not a second way to pay: a quiet line
     under the actions that opens a one-field form. */
  .promo-entry {
    display: grid;
    gap: calc(10 * var(--psv-u));
    margin-block-start: calc(16 * var(--psv-u));
    padding-block-start: calc(14 * var(--psv-u));
    border-block-start: 1px solid var(--psv-line);
  }

  .promo-entry > .text-action {
    justify-self: start;
  }

  .promo-form {
    display: grid;
    gap: calc(10 * var(--psv-u));
  }

  .promo-form[hidden] {
    display: none;
  }

  /* Label, box and message one under the other, the box the full width of the
     column -- the payment card's two-column field rows are for read-only
     figures, not for something typed. */
  .promo-form .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(6 * var(--psv-u));
    padding: 0;
    border: 0;
  }

  .promo-form .field > * {
    grid-column: 1;
  }

  .promo-form input {
    inline-size: 100%;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(8 * var(--psv-u)) calc(12 * var(--psv-u));
    font-size: calc(16 * var(--psv-u));
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgb(var(--psv-panel-deep-rgb) / .42);
    border: 1px solid var(--psv-line);
    border-radius: calc(6 * var(--psv-u));
  }

  .promo-form input[aria-invalid="true"] {
    border-color: var(--psv-danger);
  }

  .promo-form .field-aside {
    text-align: start;
  }

  .payment-status-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    min-block-size: 0;
  }

  .payment-status-grid > * {
    min-width: 0;
    padding: clamp(18px, 2vw, 28px);
    border-inline-start: 1px solid var(--psv-line);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .payment-status-grid > * {
      padding: clamp((18 * var(--psv-u)), (30.72 * var(--psv-u)), (28 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .payment-status-grid > *:first-child {
    border-inline-start: 0;
  }

  .payment-status-overview {
    display: grid;
    align-content: start;
    gap: calc(18 * var(--psv-u));
  }

  .payment-status-step {
    display: grid;
    align-content: center;
    gap: calc(14 * var(--psv-u));
  }

  .payment-status-message {
    min-block-size: calc(92 * var(--psv-u));
    padding-bottom: calc(12 * var(--psv-u));
    border-bottom: 1px solid var(--psv-line);
  }

  .payment-status-message h2 {
    margin-top: calc(7 * var(--psv-u));
    color: var(--psv-text);
    font-size: clamp(22px, 2.3vw, 30px);
    line-height: 1.1;
    letter-spacing: -.025em;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .payment-status-message h2 {
      font-size: clamp((22 * var(--psv-u)), (35.328 * var(--psv-u)), (30 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .payment-status-message p {
    margin-top: calc(7 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    line-height: 1.42;
  }

  .payment-status-reference {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--psv-line);
  }

  .payment-status-reference > div {
    min-width: 0;
    padding: calc(9 * var(--psv-u)) calc(10 * var(--psv-u));
    border-inline-start: 1px solid var(--psv-line);
  }

  .payment-status-reference > div:first-child {
    border-inline-start: 0;
  }

  .payment-status-reference dt {
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-control);
    text-transform: uppercase;
  }

  .payment-status-reference dd {
    margin: calc(4 * var(--psv-u)) 0 0;
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
    font-weight: var(--psv-weight-medium);
  }

  .status-ledger {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--psv-line);
  }

  .status-ledger li {
    display: grid;
    grid-template-columns: calc(32 * var(--psv-u)) minmax(0, 1fr);
    align-items: center;
    min-block-size: calc(36 * var(--psv-u));
    color: var(--psv-muted);
    border-bottom: 1px solid var(--psv-line);
  }

  .status-ledger span {
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .status-ledger b {
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-medium);
  }

  .status-ledger li.is-complete {
    color: var(--psv-success);
  }

  .status-ledger li.is-current {
    color: var(--psv-text);
    background: var(--psv-plan-wash);
    box-shadow: inset calc(3 * var(--psv-u)) 0 var(--psv-plan-color);
  }

  .payment-failure {
    padding: calc(12 * var(--psv-u));
    border: 1px solid var(--psv-danger);
  }

  .payment-failure strong {
    color: var(--psv-danger);
    font-size: calc(16 * var(--psv-u));
  }

  .payment-failure p {
    margin: calc(6 * var(--psv-u)) 0 calc(10 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.4;
  }

  /* The owner's payment review control (decision D-37): a small corner
     toggle and a drawer over the page, both fixed and outside the scene, so
     the customer layout is the same at every width with or without it. The
     build removes it when site.manifest.json turns the review controls off. */
  .owner-review__toggle,
  .owner-review__drawer {
    position: fixed;
    z-index: 120;
    inset-inline-start: calc(12 * var(--psv-u));
    color: var(--psv-text);
    background: var(--psv-white);
    border: 1px dashed var(--psv-accent);
    box-shadow: 0 calc(8 * var(--psv-u)) calc(24 * var(--psv-u)) rgb(var(--psv-brand-rgb) / .16);
  }

  .owner-review__toggle {
    inset-block-end: calc(12 * var(--psv-u));
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding-inline: calc(12 * var(--psv-u));
    color: var(--psv-accent-strong);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-control);
    text-transform: uppercase;
    cursor: pointer;
  }

  .owner-review__toggle[aria-expanded="true"] {
    color: var(--psv-white);
    background: var(--psv-brand);
    border-style: solid;
    border-color: var(--psv-brand);
  }

  .owner-review__drawer {
    inset-block-end: calc(12 * var(--psv-u) + max(44px, calc(44 * var(--psv-u))) + 8 * var(--psv-u));
    display: grid;
    gap: calc(10 * var(--psv-u));
    width: min(calc(460 * var(--psv-u)), calc(100vw - 24px));
    padding: calc(14 * var(--psv-u));
  }

  .owner-review__drawer[hidden] {
    display: none;
  }

  .owner-review__label {
    margin: 0;
    color: var(--psv-accent-strong);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-control);
    text-transform: uppercase;
  }

  .owner-review__note {
    margin: 0;
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.4;
  }

  .owner-review__states {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(6 * var(--psv-u));
  }

  .owner-review__drawer button {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(4 * var(--psv-u)) calc(8 * var(--psv-u));
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    line-height: 1.2;
    text-align: start;
    background: transparent;
    border: 1px solid var(--psv-line-strong);
    cursor: pointer;
  }

  .owner-review__drawer button[aria-pressed="true"] {
    color: var(--psv-white);
    background: var(--psv-brand);
    border-color: var(--psv-brand);
  }

  .owner-review__drawer .owner-review__live {
    text-align: center;
    border-color: var(--psv-accent);
  }

  .owner-review__drawer .owner-review__live:disabled {
    color: var(--psv-muted);
    border-color: var(--psv-line);
    cursor: default;
  }

  .owner-review button:focus-visible {
    outline: 2px solid var(--psv-focus);
    outline-offset: 2px;
  }

  .payment-status-scene[data-payment-failure] .payment-status-step {
    align-content: center;
  }

  .payment-status-scene[data-payment-failure] .payment-status-message,
  .payment-status-scene[data-payment-failure] .status-ledger,
  .payment-status-scene[data-payment-failure] .dashboard-action {
    display: none;
  }

  @media (max-width: 900px), (max-height: 760px) {
    .auth-plan-context .plan-context__label,
    .auth-intro .eyebrow {
      display: none;
    }

    .auth-plan-context {
      min-block-size: calc(46 * var(--psv-u));
      padding-block: calc(5 * var(--psv-u));
    }

    .auth-intro .page-title {
      font-size: calc(30 * var(--psv-u));
    }

    .auth-intro .page-lead {
      margin-top: calc(4 * var(--psv-u));
      font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
      line-height: 1.35;
    }

    .auth-form .btn {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
      padding-block: calc(8 * var(--psv-u));
    }

    .confirmation-content {
      grid-template-rows: auto auto;
      gap: calc(8 * var(--psv-u));
    }

    .payment-content,
    .payment-status-content {
      grid-template-rows: auto minmax(0, 1fr);
      gap: calc(8 * var(--psv-u));
    }

    .confirmation-intro .eyebrow,
    .payment-intro .eyebrow,
    .payment-status-intro .eyebrow {
      display: none;
    }

    .confirmation-intro .page-title,
    .payment-intro .page-title,
    .payment-status-intro .page-title {
      font-size: clamp(28px, 4vw, 34px);
    }

    .confirmation-intro .page-lead,
    .payment-intro .page-lead,
    .payment-status-intro .page-lead {
      margin-top: calc(5 * var(--psv-u));
      font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
      line-height: 1.35;
    }

    .confirmation-grid {
      display: block;
      min-block-size: 0;
      height: 100%;
    }

    .confirmation-grid > * {
      height: 100%;
      padding: calc(16 * var(--psv-u));
      border-inline-start: 0;
    }

    .confirmation-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      height: auto;
    }

    .confirmation-grid > * {
      height: auto;
    }

    .confirmation-included {
      border-inline-start: 1px solid var(--psv-line);
    }

    .confirmation-terms {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr) minmax(calc(220 * var(--psv-u)), .68fr);
      align-items: start;
      column-gap: calc(20 * var(--psv-u));
      border-block-start: 1px solid var(--psv-line);
    }

    .confirmation-terms .transaction-kicker {
      grid-column: 1 / -1;
    }

    .confirmation-terms .confirmation-actions {
      grid-column: 2;
      grid-row: 2;
      margin-top: 0;
    }

    .confirmation-included .capability-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qr-frame img {
      width: min(180px, 32svh);
    }
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .auth-plan-context .plan-context__label,
        .auth-intro .eyebrow {
      display: none;
    }

    .auth-plan-context {
      min-block-size: calc(46 * var(--psv-u));
      padding-block: calc(5 * var(--psv-u));
    }

    .auth-intro .page-title {
      font-size: calc(30 * var(--psv-u));
    }

    .auth-intro .page-lead {
      margin-top: calc(4 * var(--psv-u));
      font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
      line-height: 1.35;
    }

    .auth-form .btn {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
      padding-block: calc(8 * var(--psv-u));
    }

    .confirmation-content {
      grid-template-rows: auto auto;
      gap: calc(8 * var(--psv-u));
    }

    .payment-content,
        .payment-status-content {
      grid-template-rows: auto minmax(0, 1fr);
      gap: calc(8 * var(--psv-u));
    }

    .confirmation-intro .eyebrow,
        .payment-intro .eyebrow,
        .payment-status-intro .eyebrow {
      display: none;
    }

    .confirmation-intro .page-title,
        .payment-intro .page-title,
        .payment-status-intro .page-title {
      font-size: clamp((28 * var(--psv-u)), (61.44 * var(--psv-u)), (34 * var(--psv-u)));
    }

    .confirmation-intro .page-lead,
        .payment-intro .page-lead,
        .payment-status-intro .page-lead {
      margin-top: calc(5 * var(--psv-u));
      font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
      line-height: 1.35;
    }

    .confirmation-grid {
      display: block;
      min-block-size: 0;
      height: 100%;
    }

    .confirmation-grid > * {
      height: 100%;
      padding: calc(16 * var(--psv-u));
      border-inline-start: 0;
    }

    .confirmation-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      height: auto;
    }

    .confirmation-grid > * {
      height: auto;
    }

    .confirmation-included {
      border-inline-start: 1px solid var(--psv-line);
    }

    .confirmation-terms {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr) minmax(calc(220 * var(--psv-u)), .68fr);
      align-items: start;
      column-gap: calc(20 * var(--psv-u));
      border-block-start: 1px solid var(--psv-line);
    }

    .confirmation-terms .transaction-kicker {
      grid-column: 1 / -1;
    }

    .confirmation-terms .confirmation-actions {
      grid-column: 2;
      grid-row: 2;
      margin-top: 0;
    }

    .confirmation-included .capability-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qr-frame img {
      width: min((180 * var(--psv-u)), (233.6 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  @media (max-width: 900px) {
    .payment-grid {
      grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    }

    .payment-action-step {
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
      align-items: center;
      border-block-start: 1px solid var(--psv-line);
      border-inline-start: 0;
    }

    .payment-action-step .transaction-kicker,
    .payment-action-step .transaction-step-title {
      grid-column: 1;
    }

    .payment-action-step > p {
      grid-column: 1;
    }

    .payment-actions {
      grid-column: 2;
      grid-row: 1 / span 3;
    }
  }

  @media (max-width: 760px) {
    .auth-shell {
      width: min(560px, calc(100% - 20px));
    }

    .account-card {
      padding: 14px;
      gap: 8px;
    }

    .auth-intro .eyebrow {
      display: none;
    }

    .auth-intro .page-title {
      font-size: clamp(26px, 7.2vw, 30px);
    }

    .auth-intro .page-lead {
      margin-top: 4px;
      font-size: 14px;
      line-height: 1.35;
    }

    .confirmation-included .capability-list {
      grid-template-columns: 1fr;
    }

    .confirmation-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .confirmation-included {
      border-block-start: 1px solid var(--psv-line);
      border-inline-start: 0;
    }

    .confirmation-terms {
      display: block;
      grid-column: auto;
    }

    .confirmation-grid > *,
    .payment-grid > *,
    .payment-status-grid > * {
      padding: 12px;
    }

    .payment-grid,
    .payment-status-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .payment-grid > *,
    .payment-status-grid > * {
      border-block-start: 1px solid var(--psv-line);
      border-inline-start: 0;
    }

    .payment-grid > *:first-child,
    .payment-status-grid > *:first-child {
      border-block-start: 0;
    }

    .payment-action-step {
      display: grid;
      grid-column: auto;
      grid-template-columns: minmax(0, 1fr);
    }

    .payment-action-step .transaction-kicker,
    .payment-action-step .transaction-step-title,
    .payment-action-step > p,
    .payment-actions {
      grid-column: auto;
      grid-row: auto;
    }

    .transaction-kicker {
      margin-bottom: 7px;
    }

    .confirmation-price {
      font-size: 34px;
    }

    .confirmation-plan__identity {
      padding-bottom: 10px;
    }

    .confirmation-included .transaction-step-title {
      margin-bottom: 8px;
      font-size: 20px;
    }

    .confirmation-actions {
      margin-top: 10px;
    }

    .payment-details-step {
      gap: 8px;
    }

    .payment-details {
      gap: 5px;
    }

    .payment-operation {
      padding: 6px 8px;
    }

    .payment-operation--address dd {
      grid-template-columns: 1fr;
      gap: 5px;
    }

    .payment-operation--address .btn {
      width: 100%;
    }

    .network-reference {
      min-block-size: 32px;
      padding-block: 4px;
    }

    .qr-payment-step {
      gap: 7px;
    }

    .qr-frame {
      padding: 6px;
    }

    .qr-frame img {
      width: min(170px, 26svh);
    }

    .qr-payment-step > p {
      font-size: 11.5px;
      line-height: 1.35;
    }

    .payment-status-step {
      gap: 8px;
    }

    .payment-status-message {
      min-block-size: 74px;
      padding-bottom: 7px;
    }

    .payment-status-message h2 {
      font-size: 22px;
    }

    .status-ledger {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border: 1px solid var(--psv-line);
    }

    .status-ledger li {
      grid-template-columns: 1fr;
      align-content: center;
      justify-items: center;
      min-block-size: 44px;
      padding: 4px 2px;
      text-align: center;
      border-bottom: 0;
      border-inline-start: 1px solid var(--psv-line);
    }

    .status-ledger li:first-child {
      border-inline-start: 0;
    }

    .status-ledger b {
      font-size: 9px;
      line-height: 1.1;
    }

    .status-ledger li.is-current {
      box-shadow: inset 0 3px var(--psv-plan-color);
    }
  }

  @media (max-width: 360px) and (max-height: 620px) {
    .auth-stage {
      gap: 4px;
    }

    .account-card {
      padding: 8px;
      gap: 4px;
    }

    .auth-plan-context {
      min-block-size: 44px;
      padding-block: 3px;
    }

    /* The register state keeps its way back to login at every width: hiding it
       here is what made the two states differ in height and the page jump on a
       narrow screen. */
    .auth-scene[data-auth-current="register-password"] .auth-tabs {
      display: none;
    }

    .auth-intro .page-title {
      font-size: 24px;
    }

    .auth-intro .page-lead {
      margin-top: 2px;
      font-size: 13px;
    }

    .auth-tabs,
    .auth-tab,
    .field input {
      min-block-size: 44px;
    }

    .auth-form {
      gap: 3px;
    }

    .field-message {
      min-block-size: 11px;
      font-size: 9px;
    }

    .field-message:empty {
      display: none;
    }

    .confirmation-intro .page-title,
    .payment-intro .page-title,
    .payment-status-intro .page-title {
      font-size: 24px;
    }

    .confirmation-intro .page-lead,
    .payment-intro .page-lead,
    .payment-status-intro .page-lead {
      font-size: 12.5px;
      line-height: 1.3;
    }

    .confirmation-grid > *,
    .payment-grid > *,
    .payment-status-grid > * {
      padding: 9px;
    }

    .confirmation-included .capability-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 10px;
    }

    .data-ledger > div {
      min-block-size: 36px;
    }

    .capability-list li {
      min-block-size: 31px;
      font-size: 12.5px;
    }

    .payment-plan-context {
      min-block-size: 38px;
    }

    .payment-details-step {
      gap: 5px;
    }

    .payment-details {
      gap: 4px;
    }

    .payment-field {
      padding: 3px 6px;
    }

    .payment-details dt {
      line-height: 1.1;
    }

    .payment-details dd {
      margin-top: 1px;
      line-height: 1.2;
    }

    .payment-operation strong {
      font-size: 19px;
    }

    .payment-operation dd {
      gap: 5px;
    }

    .payment-operation .btn {
      min-block-size: 44px;
    }

    .payment-operation--address code {
      font-size: 11px;
      line-height: 1.2;
    }

    .qr-payment-step {
      align-content: start;
      gap: 4px;
    }

    .qr-frame img {
      width: 140px;
    }

    .qr-payment-step > p {
      font-size: 12px;
      line-height: 1.3;
    }

    .status-ledger li {
      min-block-size: 40px;
    }

    .status-ledger b {
      font-size: 8px;
    }
  }

  @media (forced-colors: active) {
    .account-card,
    .auth-tabs,
    .auth-tab,
    .field input,
    .confirmation-grid,
    .payment-grid,
    .payment-status-grid,
    .payment-operation,
    .payment-field,
    .payment-status-reference,
    .status-ledger {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
    }

    .auth-tab[aria-selected="true"],
    .status-ledger li.is-current {
      color: HighlightText;
      background: Highlight;
      box-shadow: none;
    }
  }

  /* Narrow: a band cannot hold three columns in 320px, so it becomes three
     lines — label, value, note — and the action spans the measure. This block
     sits after the base rule on purpose: same specificity, source order wins. */
  @media (max-width: 900px) {
    .field {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      min-block-size: 0;
      gap: 4px;
      padding-block: clamp(8px, 1.2svh, 14px);
    }

    .field-aside {
      justify-items: start;
      text-align: start;
    }

    .account-gate .btn--primary {
      justify-self: stretch;
      width: 100%;
      min-block-size: 44px;
      margin-block-start: clamp(10px, 1.6svh, 18px);
      padding-inline: 16px;
    }
  }

  /* Account gate v2 — the commercial context and the account action are two
     parts of one instrument. The split preserves Quantsion's ruled, square
     language without leaving a two-field form floating across the viewport. */
  .auth-stage {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(calc(460 * var(--psv-u)), 1.08fr);
    width: min((1160 * var(--psv-u)), 100%);
    min-block-size: min((580 * var(--psv-u)), 100%);
    margin-inline: auto;
    background: rgb(var(--psv-panel-rgb) / .16);
    border-block: 1px solid var(--psv-line);
  }

  .auth-brief {
    display: grid;
    grid-template-rows: auto auto minmax(calc(120 * var(--psv-u)), 1fr);
    align-content: start;
    min-width: 0;
    padding: clamp(28px, 3.2vw, 52px);
    gap: clamp(22px, 3svh, 38px);
    background:
      linear-gradient(145deg, rgb(var(--psv-accent-rgb) / .055), transparent 52%),
      transparent;
    border-inline-end: 1px solid var(--psv-line);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .auth-brief {
      padding: clamp((28 * var(--psv-u)), (49.152 * var(--psv-u)), (52 * var(--psv-u)));
      gap: clamp((22 * var(--psv-u)), (21.9 * var(--psv-u)), (38 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .auth-intro .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: calc(10 * var(--psv-u));
    color: var(--psv-accent);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-label);
    text-transform: uppercase;
  }

  .auth-intro .eyebrow::before {
    width: calc(24 * var(--psv-u));
    height: 2px;
    content: "";
    background: var(--psv-plan-color);
  }

  .auth-intro .page-title {
    max-width: 13ch;
    margin-top: calc(16 * var(--psv-u));
    color: var(--psv-text);
    font-family: var(--psv-font-display);
    font-size: clamp(34px, 3.35vw, 50px);
    font-weight: var(--psv-hero-weight);
    line-height: .98;
    letter-spacing: -.04em;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .auth-intro .page-title {
      font-size: clamp((34 * var(--psv-u)), (51.456 * var(--psv-u)), (50 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .auth-intro .page-title:focus {
    outline: none;
    box-shadow: none;
  }

  .auth-intro .page-lead {
    max-width: 46ch;
    margin-top: calc(16 * var(--psv-u));
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(15 * var(--psv-u)));
    line-height: 1.55;
  }

  .auth-plan-context {
    align-self: start;
    margin: 0;
  }

  .auth-assurance {
    align-self: end;
    padding-top: calc(18 * var(--psv-u));
    border-top: 1px solid var(--psv-line);
  }

  .auth-assurance__label {
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-label);
    text-transform: uppercase;
  }

  .auth-assurance__list {
    display: grid;
    margin: calc(14 * var(--psv-u)) 0 0;
    padding: 0;
    gap: calc(10 * var(--psv-u));
    list-style: none;
  }

  .auth-assurance__list li {
    display: grid;
    grid-template-columns: calc(26 * var(--psv-u)) minmax(0, 1fr);
    align-items: start;
    color: var(--psv-copy);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.45;
  }

  .auth-assurance__list li > span {
    padding-top: calc(2 * var(--psv-u));
    color: var(--psv-accent);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .08em;
  }

  .auth-assurance__list p {
    margin: 0;
  }

  /* One card, optically centred, nothing flanking it -- Stripe's shape, and the
     shape this scene's own note at the top of this file asked for before the
     brief grew a column of its own. The brief becomes the card's head: the step
     named once, small, and the plan it belongs to on one quiet line under it.
     The assurance copy and the lead stand down here; they were reading room for
     a column that no longer exists. Measured heads on the same screens: Stripe
     20px, Mercury 19px, Linear 18px. */
  /* From 761px up the deck runs strict, so the single-card composition starts
     where the deck does. Below that is the reflow band, which is the separate
     mobile pass and is left alone. */
  @media (min-width: 761px) {
    .auth-stage {
      grid-template-columns: minmax(0, 1fr);
      width: min((460 * var(--psv-u)), 100%);
      /* auto, not 0: the 580px floor this had was for the two-column stage, but
         zero let the card shrink under its own content and the card's bottom
         edge ended up above the last button. */
      min-block-size: auto;
      /* Stripe lifts its card with two soft shadows on white, where a shadow is
         the whole separation. On this ground a shadow is invisible: the card at
         full panel opacity still reads only 1.25:1 against the page. So the
         lift is built the other way -- the card holds the light and the field
         around it falls away (see .purchase-scene below). The shadow stays for
         the near edge, the border for the far one. */
      background: var(--psv-panel-solid);
      border: 1px solid rgb(var(--psv-line-strong-rgb) / .22);
      border-radius: calc(8 * var(--psv-u));
      box-shadow: 0 calc(24 * var(--psv-u)) calc(60 * var(--psv-u)) rgb(0 0 0 / .5), 0 calc(6 * var(--psv-u)) calc(18 * var(--psv-u)) rgb(0 0 0 / .32);
    }

    .auth-brief {
      grid-template-rows: auto auto;
      padding: clamp(12px, 1.4svh, 16px) clamp(22px, 2.2vw, 32px) 0;
      gap: calc(8 * var(--psv-u));
      background: none;
      border-inline-end: 0;
    }
    /* desktop-scale:generated */
    @media (min-width: 1051px) {
      .auth-brief {
        padding: clamp((12 * var(--psv-u)), (10.22 * var(--psv-u)), (16 * var(--psv-u))) clamp((22 * var(--psv-u)), (33.792 * var(--psv-u)), (32 * var(--psv-u))) 0;
      }
    }
    /* desktop-scale:end */

    .auth-brief .page-title {
      max-width: none;
      margin-top: 0;
      font-family: var(--psv-font-sans);
      font-size: calc(20 * var(--psv-u));
      font-weight: var(--psv-title-weight);
      line-height: 1.25;
      letter-spacing: normal;
    }

    .auth-brief .eyebrow,
    .auth-brief .page-lead,
    .auth-assurance {
      display: none;
    }

    .account-card {
      padding: clamp(18px, 2.2svh, 26px) clamp(24px, 2.4vw, 36px) clamp(24px, 2.6svh, 34px);
      background: none;
      border: 0;
    }
    /* desktop-scale:generated */
    @media (min-width: 1051px) {
      .account-card {
        padding: clamp((18 * var(--psv-u)), (16.06 * var(--psv-u)), (26 * var(--psv-u))) clamp((24 * var(--psv-u)), (36.864 * var(--psv-u)), (36 * var(--psv-u))) clamp((24 * var(--psv-u)), (18.98 * var(--psv-u)), (34 * var(--psv-u)));
      }
    }
    /* desktop-scale:end */
  }

  .account-card {
    display: grid;
    align-content: start;
    min-width: 0;
    padding: clamp(28px, 3.2vw, 48px);
    gap: clamp(16px, 2.2svh, 24px);
    background: rgb(var(--psv-bg-deep-rgb) / .28);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .account-card {
      padding: clamp((28 * var(--psv-u)), (49.152 * var(--psv-u)), (48 * var(--psv-u)));
      gap: clamp((16 * var(--psv-u)), (16.06 * var(--psv-u)), (24 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .auth-review-bypass {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(7 * var(--psv-u)) calc(10 * var(--psv-u));
    gap: calc(12 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-label);
    text-transform: uppercase;
    border: 1px dashed rgb(var(--psv-accent-rgb) / .48);
  }

  .auth-review-bypass .text-action {
    flex: none;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    color: var(--psv-accent);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .account-card .auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-block-size: calc(48 * var(--psv-u));
    gap: 0;
    border-block: 1px solid var(--psv-line);
  }

  .account-card .auth-tab {
    justify-content: center;
    min-block-size: calc(48 * var(--psv-u));
    padding: calc(10 * var(--psv-u)) calc(14 * var(--psv-u));
    border-inline-start: 1px solid var(--psv-line);
  }

  .account-card .auth-tab:first-child {
    border-inline-start: 0;
  }

  @media (hover: hover) and (pointer: fine) {

  }

  .account-card .auth-state-stack,
  .account-card .auth-state {
    height: auto;
  }

  .account-card .auth-form {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(4 * var(--psv-u));
  }

  .account-card .field {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-block-size: 0;
    padding-block: calc(9 * var(--psv-u));
    gap: calc(7 * var(--psv-u));
    border: 0;
  }

  .account-card .auth-form .field:last-of-type {
    border: 0;
  }

  .account-card .field label {
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .account-card .field input {
    min-block-size: calc(50 * var(--psv-u));
    padding: calc(10 * var(--psv-u)) calc(13 * var(--psv-u));
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    background: rgb(var(--psv-bg-deep-rgb) / .42);
    border: 1px solid var(--psv-line-strong);
  }

  .account-card .field input:focus-visible {
    border-color: var(--psv-accent);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--psv-accent);
  }

  .account-card .field input[aria-invalid="true"] {
    border-color: var(--psv-danger);
  }

  .account-card .field input[aria-invalid="true"]:focus-visible {
    box-shadow: inset 0 0 0 1px var(--psv-danger);
  }

  .account-card .field-aside {
    display: flex;
    align-items: start;
    justify-content: space-between;
    min-block-size: calc(16 * var(--psv-u));
    gap: calc(14 * var(--psv-u));
    text-align: start;
  }

  .account-card .field-aside .text-action {
    flex: none;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    margin-inline-start: auto;
  }

  .account-card .field-message {
    padding-top: calc(3 * var(--psv-u));
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .auth-route-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    margin: calc(2 * var(--psv-u)) 0 0;
    gap: calc(9 * var(--psv-u));
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    text-align: center;
  }

  .auth-route-switch .text-action {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
  }

  .auth-verified-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-block: 1px solid var(--psv-line);
  }

  .auth-verified-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(6 * var(--psv-u)) calc(10 * var(--psv-u));
    gap: calc(12 * var(--psv-u));
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .04em;
    border-block-end: 1px solid var(--psv-line);
  }

  .auth-verified-line:last-child {
    border-block-end: 0;
  }

  .auth-verified-line > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--psv-text);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-medium);
    letter-spacing: 0;
  }

  .auth-verified-line .text-action {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
  }

  .auth-verified-mark {
    color: var(--psv-success);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
  }

  .verification-preview {
    min-block-size: calc(34 * var(--psv-u));
    margin: calc(2 * var(--psv-u)) 0 0;
    color: var(--psv-muted);
    font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.45;
  }

  .password-control {
    position: relative;
    display: block;
    width: 100%;
  }

  .account-card .password-control input {
    padding-inline-end: calc(82 * var(--psv-u));
  }

  .password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    min-inline-size: calc(72 * var(--psv-u));
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding-inline: calc(10 * var(--psv-u));
    color: var(--psv-accent-pale);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-control);
    background: transparent;
    border: 0;
    border-inline-start: 1px solid var(--psv-line);
  }

  .password-toggle:focus-visible {
    outline: 2px solid var(--psv-accent);
    outline-offset: -3px;
    box-shadow: none;
  }

  .account-gate .btn--primary {
    justify-self: stretch;
    width: 100%;
    min-block-size: calc(50 * var(--psv-u));
    margin-block-start: calc(10 * var(--psv-u));
    padding-inline: calc(18 * var(--psv-u));
    color: var(--psv-bg-deep);
    background: var(--psv-accent-pale);
    border-color: var(--psv-accent-pale);
  }

  @media (hover: hover) and (pointer: fine) {
    .account-gate .btn--primary:hover {
      color: var(--psv-bg-deep);
      background: var(--psv-accent);
      border-color: var(--psv-accent);
    }
  }

  @media (max-width: 1050px) {
    .auth-stage {
      /* The narrower desktop used to give the brief a slimmer column beside the
         form. There is no column beside the form any more, so the card keeps
         its single track and only loses a little width. */
      grid-template-columns: minmax(0, 1fr);
      width: min(440px, 100%);
    }

    .auth-brief,
    .account-card {
      padding: 26px;
    }

    .auth-intro .page-title {
      font-size: 38px;
    }
  }

  @media (max-height: 760px) and (min-width: 901px) {
    .scene-shell--account {
      gap: calc(12 * var(--psv-u));
    }

    .confirmation-content {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .confirmation-grid {
      display: grid;
      grid-template-columns: 1fr 1.28fr .92fr;
      height: 100%;
    }

    .confirmation-grid > * {
      height: auto;
      padding: calc(12 * var(--psv-u)) calc(16 * var(--psv-u));
      border-block-start: 0;
      border-inline-start: 1px solid var(--psv-line);
    }

    .confirmation-grid > *:first-child {
      border-inline-start: 0;
    }

    .confirmation-terms {
      display: block;
      grid-column: auto;
    }

    .auth-stage {
      min-block-size: 0;
    }

    .auth-brief,
    .account-card {
      padding: calc(18 * var(--psv-u)) calc(24 * var(--psv-u));
      gap: calc(12 * var(--psv-u));
    }

    .auth-intro .page-title {
      margin-top: calc(10 * var(--psv-u));
      font-size: calc(32 * var(--psv-u));
    }

    .auth-intro .page-lead {
      margin-top: calc(9 * var(--psv-u));
      font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    }

    .auth-assurance {
      padding-top: calc(10 * var(--psv-u));
    }

    .auth-assurance__list {
      margin-top: calc(8 * var(--psv-u));
      gap: calc(5 * var(--psv-u));
    }

    .account-card .auth-tabs,
    .account-card .auth-tab,
    .account-card .field input,
    .account-gate .btn--primary {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
    }

    .account-card .field {
      padding-block: calc(4 * var(--psv-u));
    }

    .account-gate .btn--primary {
      margin-block-start: calc(5 * var(--psv-u));
    }
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .scene-shell--account {
      gap: calc(12 * var(--psv-u));
    }

    .confirmation-content {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .confirmation-grid {
      display: grid;
      grid-template-columns: 1fr 1.28fr .92fr;
      height: 100%;
    }

    .confirmation-grid > * {
      height: auto;
      padding: calc(12 * var(--psv-u)) calc(16 * var(--psv-u));
      border-block-start: 0;
      border-inline-start: 1px solid var(--psv-line);
    }

    .confirmation-grid > *:first-child {
      border-inline-start: 0;
    }

    .confirmation-terms {
      display: block;
      grid-column: auto;
    }

    .auth-stage {
      min-block-size: 0;
    }

    .auth-brief,
        .account-card {
      padding: calc(18 * var(--psv-u)) calc(24 * var(--psv-u));
      gap: calc(12 * var(--psv-u));
    }

    .auth-intro .page-title {
      margin-top: calc(10 * var(--psv-u));
      font-size: calc(32 * var(--psv-u));
    }

    .auth-intro .page-lead {
      margin-top: calc(9 * var(--psv-u));
      font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    }

    .auth-assurance {
      padding-top: calc(10 * var(--psv-u));
    }

    .auth-assurance__list {
      margin-top: calc(8 * var(--psv-u));
      gap: calc(5 * var(--psv-u));
    }

    .account-card .auth-tabs,
        .account-card .auth-tab,
        .account-card .field input,
        .account-gate .btn--primary {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
    }

    .account-card .field {
      padding-block: calc(4 * var(--psv-u));
    }

    .account-gate .btn--primary {
      margin-block-start: calc(5 * var(--psv-u));
    }
  }
  /* desktop-scale:end */

  @media (max-width: 900px) {
    .auth-stage {
      grid-template-columns: minmax(0, 1fr);
      min-block-size: 0;
    }

    .auth-brief {
      grid-template-columns: minmax(0, 1fr) minmax(270px, .95fr);
      grid-template-rows: auto;
      align-items: center;
      padding: 18px 22px;
      gap: 22px;
      border-inline-end: 0;
      border-block-end: 1px solid var(--psv-line);
    }

    .auth-assurance {
      display: none;
    }

    .auth-intro .page-title {
      max-width: 15ch;
      margin-top: 10px;
      font-size: clamp(27px, 4.5vw, 34px);
    }

    .auth-intro .page-lead {
      margin-top: 7px;
      font-size: 13px;
      line-height: 1.35;
    }

    .account-card {
      padding: 18px 22px;
      gap: 12px;
    }
  }

  @media (max-width: 760px) {
    .auth-stage {
      background: transparent;
      border-block-start: 0;
    }

    .auth-brief {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: start;
      padding: 8px 0 12px;
      background: transparent;
      gap: 10px;
    }

    .auth-intro .eyebrow {
      display: none;
    }

    .auth-intro .page-title {
      margin-top: 0;
      font-size: clamp(26px, 7.2vw, 30px);
      line-height: 1.02;
    }

    .auth-intro .page-lead {
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.35;
    }

    .account-card {
      padding: 10px 0 4px;
      gap: 8px;
      background: transparent;
    }

    .auth-review-bypass {
      align-items: flex-start;
      flex-direction: column;
      gap: 2px;
    }

    .account-card .auth-tabs,
    .account-card .auth-tab {
      min-block-size: 44px;
    }

    .account-card .auth-tab {
      padding-inline: 5px;
      font-size: 10px;
    }

    .account-card .field input,
    .account-gate .btn--primary {
      min-block-size: 46px;
    }

    .account-card .field {
      padding-block: 4px;
      gap: 4px;
    }

    .auth-route-switch {
      justify-content: flex-start;
      font-size: 11px;
    }

    .auth-verified-line {
      gap: 8px;
    }

    .verification-preview {
      font-size: 10.5px;
    }

    .account-gate .btn--primary {
      margin-block-start: 4px;
    }
  }

  @media (max-width: 360px) and (max-height: 620px) {
    .auth-brief {
      padding-block: 8px 10px;
      gap: 8px;
    }

    .auth-intro .page-title {
      margin-top: 6px;
      font-size: 24px;
    }

    .auth-intro .page-lead {
      display: none;
    }

    .account-card {
      padding-block-start: 10px;
      gap: 8px;
    }

    .account-card .field {
      padding-block: 4px;
    }
  }

  @media (forced-colors: active) {
    .auth-stage,
    .auth-brief,
    .account-card,
    .account-card .field input {
      color: CanvasText;
      background: Canvas;
      border-color: CanvasText;
    }
  }

  /* ── The commercial flow's own voice ────────────────────────────────────
     Measured off Stripe's sign-in page and matched here: label 14px, field
     16px, button 16px at weight 500, 44px controls, 6px radius on both. The
     argument pages keep the site's mono register -- they are read, not filled.
     A form is filled, and the reference set fills forms in one plain sans at
     reading size. This file is loaded by the four purchase routes only, so
     the change cannot reach System, Technology, Signals or Research. */
  .purchase-scene .field label {
    color: var(--psv-muted);
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
    font-weight: var(--psv-weight-regular);
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
  }

  .purchase-scene .field input {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding: calc(8 * var(--psv-u)) calc(12 * var(--psv-u));
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: calc(16 * var(--psv-u));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    background: rgb(var(--psv-panel-deep-rgb) / .42);
    border: 1px solid var(--psv-line);
    border-radius: calc(6 * var(--psv-u));
  }

  .purchase-scene .field input:focus-visible {
    border-color: var(--psv-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--psv-accent-rgb) / .22);
  }

  .purchase-scene .btn,
  .purchase-scene .account-gate .btn--primary {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    min-height: max(44px, calc(44 * var(--psv-u)));
    padding: calc(10 * var(--psv-u)) calc(16 * var(--psv-u));
    font-family: var(--psv-font-sans);
    font-size: calc(16 * var(--psv-u));
    font-weight: var(--psv-weight-medium);
    line-height: 1.5;
    letter-spacing: normal;
    border-radius: calc(6 * var(--psv-u));
  }

  .purchase-scene .text-action,
  .purchase-scene .field-message,
  .purchase-scene .auth-error,
  .purchase-scene .plan-context__label {
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
    letter-spacing: normal;
    text-transform: none;
  }

  /* Stripe leaves 52px between one field and the next; ours had 92, because the
     row still carried the ruled-list geometry it uses outside the card -- a
     78px floor, block padding and a rule on top. Inside a card a field is just
     its label and its box. */
  .purchase-scene .account-card .field {
    min-block-size: 0;
    padding-block: 0;
    gap: calc(6 * var(--psv-u));
    border-block-start: 0;
  }

  .purchase-scene .auth-form {
    gap: calc(10 * var(--psv-u));
  }

  /* The state stack was 310px tall while the sign-in state inside it was 381:
     the form overran its own container and whatever followed it was drawn
     straight through the last line of the form. In the card the
     stack is only ever showing one state, so it takes that state's height. */
  .purchase-scene .account-card .auth-state-stack,
  .purchase-scene .account-card .auth-state {
    height: auto;
    block-size: auto;
    /* min-block-size:0 elsewhere lets this grid row shrink below its own
       content: the row settled at 310px while the sign-in form inside it was
       381, and what followed was laid out over the form's last line. In the card the row keeps its content floor. */
    min-block-size: auto;
  }

  /* Same content floor for the card and the gate: the last control was
     drawn four pixels past the card's own bottom edge. And the card takes the
     padding this composition asks for -- the wide inset belonged to the two
     column stage, not to a 520px card. */
  .purchase-scene .account-gate {
    min-block-size: auto;
  }

  /* A deck scene fills the viewport under the header, and the footer is then
     added below it -- fine on a page with fifteen scenes, but these four have
     one, so the footer alone put the page 89px into scroll. The scene leaves
     the footer its measured 89px so the whole step stands in one screen. */
  .purchase-scene {
    min-height: calc(100svh - var(--psv-header-height) - (89 * var(--psv-u)));
    /* The scene's own air was written for a full-height two-column stage. A
       520px card needs a fraction of it, and the page has to hold the footer
       inside the same screen. */
    padding-block: clamp(10px, 1.8svh, 22px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene {
      padding-block: clamp((10 * var(--psv-u)), (13.14 * var(--psv-u)), (22 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .purchase-scene .account-card {
    padding: clamp(10px, 1.4svh, 14px) clamp(22px, 2.2vw, 32px) clamp(14px, 1.6svh, 18px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene .account-card {
      padding: clamp((10 * var(--psv-u)), (10.22 * var(--psv-u)), (14 * var(--psv-u))) clamp((22 * var(--psv-u)), (33.792 * var(--psv-u)), (32 * var(--psv-u))) clamp((14 * var(--psv-u)), (11.68 * var(--psv-u)), (18 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* The copy is sentence case in the markup now, so the page title stops
     shouting it back in capitals. */
  .purchase-scene .page-title,
  .purchase-scene .eyebrow {
    text-transform: none;
  }

  /* ── Stripe's own rhythm, read off both of its screens ───────────────────
     sign-in: label 20px then 12px then a 44px field, 16px to the next label,
     16px to the button.
     "Forgot your password?" rides the password label's own line on the right;
     it is a markup move, not a nudge. */
  .purchase-scene .account-card .field {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: calc(12 * var(--psv-u));
    column-gap: calc(12 * var(--psv-u));
  }

  .purchase-scene .account-card .field > label {
    grid-column: 1;
    grid-row: 1;
  }

  .purchase-scene .account-card .field > .field-inline-action {
    grid-column: 2;
    grid-row: 1;
    font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
  }

  /* The link keeps a 44px hit area but stops claiming 44px of the label's row:
     the padding gives the target, the negative margin gives the layout back. */
  @media (min-width: 901px) {
    .purchase-scene .account-card .field > .field-inline-action {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
      padding-block: calc(12 * var(--psv-u));
      margin-block: calc(-12 * var(--psv-u));
    }
  }

  .purchase-scene .account-card .field > input,
  .purchase-scene .account-card .field > .password-control {
    grid-column: 1 / -1;
    grid-row: 2;
    min-inline-size: 0;
  }

  /* Wrapped password inputs use the same full-width row as direct inputs.
     Keep long passwords clear of the visibility button in every locale. */
  .purchase-scene .account-card .password-control input {
    width: 100%;
    padding-inline-end: max(88px, calc(88 * var(--psv-u)));
  }

  .purchase-scene .account-card .field > .field-aside {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-items: start;
    text-align: start;
  }

  .purchase-scene .auth-form {
    gap: calc(16 * var(--psv-u));
  }

  .purchase-scene .btn,
  .purchase-scene .account-gate .btn--primary {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    min-height: max(44px, calc(44 * var(--psv-u)));
  }

  /* An empty message row still claimed 32px between one field and the next, so
     the 16px Stripe leaves there measured 44. It collapses until it has
     something to say. */
  .purchase-scene .account-card .field > .field-aside {
    display: none;
    min-block-size: 0;
    gap: 0;
  }

  .purchase-scene .account-card .field.has-field-message > .field-aside {
    display: grid;
    line-height: 1.4;
  }

  /* Stripe's primary control is 44px; the button's own padding was making it
     taller. */
  .purchase-scene .account-gate .btn--primary {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    min-height: max(44px, calc(44 * var(--psv-u)));
    padding-block: 0;
  }

  /* ── Height, trimmed where Stripe's rhythm is not ─────────────────────────
     The label-to-field, field-to-field and button measures are
     Stripe's and stay exactly where they are. What comes off is ours: the head
     block's air, the plan line's padding, the switch row's tap floor and the
     card's own inset. The card has to end inside the first screen on a laptop
     with a bookmarks bar, not only in a bare 774px viewport. */
  .purchase-scene .auth-brief {
    /* Both edges, not just the top: a short-viewport rule further up sets the
       whole padding to 18px and the bottom half was surviving, which is why the
       card grew 32px as the screen got shorter instead of shrinking. */
    padding-block: clamp(10px, 1.2svh, 14px) 0;
    gap: calc(6 * var(--psv-u));
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene .auth-brief {
      padding-block: clamp((10 * var(--psv-u)), (8.76 * var(--psv-u)), (14 * var(--psv-u))) 0;
    }
  }
  /* desktop-scale:end */

  .purchase-scene .account-gate {
    gap: clamp(10px, 1.4svh, 16px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene .account-gate {
      gap: clamp((10 * var(--psv-u)), (10.22 * var(--psv-u)), (16 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .purchase-scene .auth-plan-context {
    min-block-size: 0;
    padding-block: calc(6 * var(--psv-u));
  }

  .purchase-scene .account-card {
    padding-block: clamp(8px, 1svh, 12px) clamp(12px, 1.4svh, 16px);
    /* One ground, not two: the stage paints the card and the gate inside it was
       painting a second, darker panel over the lower two thirds, which read as
       a band behind the heading. */
    background: transparent;
    border: 0;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene .account-card {
      padding-block: clamp((8 * var(--psv-u)), (7.3 * var(--psv-u)), (12 * var(--psv-u))) clamp((12 * var(--psv-u)), (10.22 * var(--psv-u)), (16 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .purchase-scene .auth-route-switch {
    margin-block-start: 0;
  }

  @media (min-width: 901px) {
    .purchase-scene .auth-route-switch .text-action {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
      padding-block: calc(12 * var(--psv-u));
      margin-block: 0;
    }

    /* The whole hit target occupies its own row instead of overlapping the
       preceding submit button through negative margins. */
    .purchase-scene .auth-route-switch {
      min-block-size: max(44px, calc(44 * var(--psv-u)));
    }
  }

  .purchase-scene {
    padding-block: clamp(8px, 1.2svh, 14px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene {
      padding-block: clamp((8 * var(--psv-u)), (8.76 * var(--psv-u)), (14 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* A short screen -- a 720px laptop with the error showing -- has to hold the
     whole step inside the deck's budget, or the deck drops to reflow and the
     step stops being one screen. Everything here is air, not measure. */
  @media (max-height: 780px) and (min-width: 901px) {
    .purchase-scene .auth-form {
      gap: calc(12 * var(--psv-u));
    }

    .purchase-scene .auth-brief .page-title {
      font-size: calc(18 * var(--psv-u));
    }

    .purchase-scene .account-card {
      padding-block: calc(6 * var(--psv-u)) calc(10 * var(--psv-u));
    }

    .purchase-scene .auth-brief {
      padding-block: calc(8 * var(--psv-u)) 0;
    }
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .purchase-scene .auth-form {
      gap: calc(12 * var(--psv-u));
    }

    .purchase-scene .auth-brief .page-title {
      font-size: calc(18 * var(--psv-u));
    }

    .purchase-scene .account-card {
      padding-block: calc(6 * var(--psv-u)) calc(10 * var(--psv-u));
    }

    .purchase-scene .auth-brief {
      padding-block: calc(8 * var(--psv-u)) 0;
    }
  }
  /* desktop-scale:end */

  /* The field falls away from the card. A vignette, not a blur: blurring the
     ground costs a compositor layer on every scroll and there is nothing behind
     to blur -- the ground is flat colour. Darkening it does the same work for
     nothing. Centre stays at page brightness so the card reads as lit. */
  .purchase-scene {
    background-image:
      radial-gradient(125% 85% at 50% 42%, transparent 30%, rgb(6 20 38 / .10) 100%);
  }

  /* The country field is a select, and every measure the Stripe pass took for
     an input has to hold for it: same height, same box, same focus ring, so the
     two fields on the step do not read as two different kinds of control. The
     native arrow is dropped because the browser paints it in a colour chosen
     for a ground it cannot see; the one here is the site's own, carried in a
     data URI so the field still costs no request. */
  .purchase-scene .field select {
    inline-size: 100%;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding-block: calc(8 * var(--psv-u));
    padding-inline: calc(12 * var(--psv-u)) calc(36 * var(--psv-u));
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: calc(16 * var(--psv-u));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    background-color: rgb(var(--psv-panel-deep-rgb) / .42);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%238ea1b5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(12 * var(--psv-u)) center;
    background-size: calc(10 * var(--psv-u)) calc(6 * var(--psv-u));
    border: 1px solid var(--psv-line);
    border-radius: calc(6 * var(--psv-u));
    -webkit-appearance: none;
    appearance: none;
  }

  /* Nothing chosen yet is a prompt, not an answer, so it is set in the same
     muted grey a placeholder would be. */
  .purchase-scene .field select:has(option[value=""]:checked) {
    color: var(--psv-muted);
  }

  .purchase-scene .field select:focus-visible {
    border-color: var(--psv-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--psv-accent-rgb) / .22);
  }

  .purchase-scene .field select[aria-invalid="true"] {
    border-color: var(--psv-danger);
  }

  /* The mobile number: the calling code and the number side by side, one row,
     one height, one border language. The code is a native select -- the
     keyboard, the screen reader and the phone's own picker all work -- laid
     invisibly over a face that shows only "TR +90"; the full "Türkiye +90"
     list opens on press. The face takes the focus ring the select would. */
  .purchase-scene .phone-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(8 * var(--psv-u));
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .purchase-scene .phone-dial {
    position: relative;
    display: block;
  }

  .purchase-scene .phone-dial-face {
    display: flex;
    align-items: center;
    min-inline-size: calc(104 * var(--psv-u));
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    padding-inline: calc(12 * var(--psv-u)) calc(32 * var(--psv-u));
    color: var(--psv-text);
    font-family: var(--psv-font-sans);
    font-size: calc(16 * var(--psv-u));
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background-color: rgb(var(--psv-panel-deep-rgb) / .42);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1 5 5 9 1' fill='none' stroke='%238ea1b5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(12 * var(--psv-u)) center;
    background-size: calc(10 * var(--psv-u)) calc(6 * var(--psv-u));
    border: 1px solid var(--psv-line);
    border-radius: calc(6 * var(--psv-u));
  }

  .purchase-scene .phone-dial select {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    min-block-size: 0;
    padding: 0;
    font-size: calc(16 * var(--psv-u));
    opacity: 0;
    cursor: pointer;
  }

  .purchase-scene .phone-dial:focus-within .phone-dial-face {
    border-color: var(--psv-accent);
    box-shadow: 0 0 0 3px rgb(var(--psv-accent-rgb) / .22);
  }

  .purchase-scene .phone-dial:has(select[aria-invalid="true"]) .phone-dial-face {
    border-color: var(--psv-danger);
  }

  .purchase-scene .phone-dial:has(option[value=""]:checked) .phone-dial-face {
    color: var(--psv-muted);
  }

  .purchase-scene .phone-control input[aria-invalid="true"] {
    border-color: var(--psv-danger);
  }

  /* The card lays a field out as label, control, message. The control is a
     select here, and it takes the same row the input takes. */
  .purchase-scene .account-card .field > select {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.auth-legal-note {
  margin-block: calc(10 * var(--psv-u));
  color: var(--psv-muted);
  font-size: var(--psv-ui-copy);
  line-height: 1.5;
}

.auth-legal-note a {
  color: var(--psv-brand);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Account card, desktop (8 Oct 2026, owner-approved candidate
   design/candidates/auth-verify). A white sheet with a thin line and a soft
   navy shadow; the record of where a code went as one band; a six-digit code
   shown in six cells over the real one-time-code input; the privacy sentence
   closes the card. Same texts and controls. Unlayered, like the legal note
   above, so it reads after every layered account rule; tablet and phone keep
   their own design. */
@media (min-width: 1051px) {
  .auth-scene {
    background-image: none;
  }

  .auth-scene .auth-stage {
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: calc(14 * var(--psv-u));
    box-shadow: 0 calc(1 * var(--psv-u)) calc(2 * var(--psv-u)) rgba(19, 45, 88, .06),
                0 calc(22 * var(--psv-u)) calc(56 * var(--psv-u)) calc(-20 * var(--psv-u)) rgba(19, 45, 88, .24);
  }

  .auth-scene .auth-brief {
    padding: calc(24 * var(--psv-u)) calc(36 * var(--psv-u)) 0;
  }

  .auth-scene .account-card {
    padding: 0 calc(36 * var(--psv-u)) calc(20 * var(--psv-u));
  }

  .auth-scene #auth-heading {
    font-size: calc(24 * var(--psv-u));
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #132d58;
  }

  .auth-scene .account-gate {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .auth-scene .account-gate > .auth-state-stack {
    order: 1;
  }

  .auth-scene .account-gate > .auth-legal-note {
    order: 2;
    margin: calc(12 * var(--psv-u)) 0 0;
    padding-block-start: calc(12 * var(--psv-u));
    border-top: 1px solid #edf1f6;
    color: #6b7c93;
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.55;
    text-align: center;
  }

  .auth-scene .account-gate > .auth-legal-note a {
    color: #3f5266;
  }

  .auth-scene .account-gate .auth-form {
    gap: 0;
  }

  .auth-scene .account-gate .auth-verified-line {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--psv-u));
    min-block-size: 0;
    block-size: auto;
    margin: calc(14 * var(--psv-u)) 0 0;
    padding: calc(10 * var(--psv-u)) calc(14 * var(--psv-u));
    background: #f4f7fb;
    border: 1px solid #e6ecf3;
    border-radius: calc(8 * var(--psv-u));
    line-height: 1.4;
  }

  .auth-scene .account-gate .auth-verified-stack {
    gap: calc(8 * var(--psv-u));
    margin-block-start: calc(14 * var(--psv-u));
    border-block: 0;
  }

  .auth-scene .account-gate .auth-verified-stack > .auth-verified-line {
    margin: 0;
  }

  .auth-scene .account-gate .auth-verified-line > * {
    min-block-size: 0;
    line-height: 1.4;
  }

  .auth-scene .account-gate .auth-verified-line > span:first-child {
    color: #6b7c93;
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10.5 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .auth-scene .account-gate .auth-verified-line strong {
    flex: 1;
    overflow: hidden;
    color: #132d58;
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(15 * var(--psv-u)));
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-scene .account-gate .auth-verified-line .text-action {
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    color: #1868a8;
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    letter-spacing: 0;
    text-decoration: none;
    border: 0;
  }

  .auth-scene .account-gate .field {
    margin-block-start: calc(18 * var(--psv-u));
    row-gap: calc(8 * var(--psv-u));
  }

  .auth-scene .account-gate .field > label {
    color: #3f5266;
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    font-weight: 500;
  }

  /* The cells draw the code; the real input lies over them, transparent, and
     keeps typing, paste, one-time-code autofill and validation. */
  .auth-scene .account-gate .field > .otp-cells {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: calc(10 * var(--psv-u));
  }

  .auth-scene .account-gate .field > input:has(+ .otp-cells) {
    position: relative;
    z-index: 1;
    align-self: stretch;
    block-size: auto;
    min-block-size: 0;
    opacity: 0;
    cursor: text;
  }

  .auth-scene .otp-cells > span {
    display: grid;
    place-items: center;
    block-size: max(44px, calc(56 * var(--psv-u)));
    background: #ffffff;
    border: 1px solid #cdd7e4;
    border-radius: calc(8 * var(--psv-u));
    color: #132d58;
    font-family: var(--psv-font-mono);
    font-size: calc(26 * var(--psv-u));
    font-weight: 500;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .auth-scene .otp-cells > .is-filled {
    border-color: #9fb1c8;
  }

  .auth-scene .otp-cells > .is-active {
    border-color: #338cff;
    box-shadow: 0 0 0 calc(3 * var(--psv-u)) rgba(51, 140, 255, .16);
  }

  .auth-scene .otp-cells > .is-active:empty::after {
    content: "";
    inline-size: calc(1.5 * var(--psv-u));
    block-size: calc(26 * var(--psv-u));
    background: #338cff;
    animation: otp-caret 1s steps(1) infinite;
  }

  .auth-scene .field:has(> input[aria-invalid="true"]) .otp-cells > span {
    border-color: var(--psv-danger);
  }

  .auth-scene .account-gate .verification-preview {
    min-block-size: 0;
    margin: calc(10 * var(--psv-u)) 0 0;
    color: #5b6e86;
    font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
    line-height: 1.5;
  }

  .auth-scene .account-gate .auth-form .btn--primary {
    min-block-size: max(44px, calc(48 * var(--psv-u)));
    margin-block-start: calc(18 * var(--psv-u));
    border-radius: calc(8 * var(--psv-u));
    font-size: calc(15 * var(--psv-u));
  }

  .auth-scene .account-gate .auth-form .text-action--center {
    min-block-size: max(44px, calc(34 * var(--psv-u)));
    margin-block-start: calc(6 * var(--psv-u));
    font-family: var(--psv-font-sans);
    font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* The phone and password steps carry more rows than a code step; they sit
     closer so every language still fits the canvas. */
  .auth-scene .account-gate:has(> .auth-state-stack > :is([data-auth-state="register-phone"], [data-auth-state="register-password"]):not([hidden])) .field,
  .auth-scene .account-gate:has(> .auth-state-stack > :is([data-auth-state="register-phone"], [data-auth-state="register-password"]):not([hidden])) .auth-form .btn--primary {
    margin-block-start: calc(12 * var(--psv-u));
  }

  .auth-scene .account-gate:has(> .auth-state-stack > [data-auth-state="register-password"]:not([hidden])) .auth-verified-stack > .auth-verified-line {
    padding-block: calc(6 * var(--psv-u));
  }

  .auth-scene .account-gate:has(> .auth-state-stack > [data-auth-state="register-password"]:not([hidden])) .auth-form > .auth-legal-note {
    margin-block: calc(8 * var(--psv-u)) 0;
  }

  .auth-scene .account-gate:has(> .auth-state-stack > [data-auth-state="register-password"]:not([hidden])) > .auth-legal-note {
    margin-block-start: calc(8 * var(--psv-u));
    padding-block-start: calc(8 * var(--psv-u));
  }

  .auth-scene .account-gate .auth-form .text-action--center:disabled {
    color: #6b7c93;
    text-decoration: none;
  }
}

.otp-cells {
  display: none;
}

@keyframes otp-caret {
  50% { opacity: 0; }
}