/* Phone purchase path (13 Oct 2026): Account, Review, Payment and Payment status in
   the phone pages' language. The pages keep their markup, forms and payment logic; on
   phones the site's own colour tokens are set to the phone navy, so every field,
   ledger and rule follows, and the header, buttons and footer take the phone pages'
   forms. No text under 10 px. Desktop is unchanged. */
@media (max-width: 760px) {
  /* a window wider than the phone column (481–760 px, a narrow desktop window or a tablet): the navy runs to both edges, the scrollbar gutter included */
  /* loaded by the four purchase pages alone: the root painted directly, no :has() */
  html { background-color: #132d58; }
  body:is([data-page="auth"], [data-page="confirmation"], [data-page="payment"], [data-page="payment-status"]) {
    --psv-header-height: 58px;
    --psv-bg-rgb: 19 45 88;
    --psv-bg-deep-rgb: 13 31 61;
    --psv-bg-alt: #163567;
    --psv-bg-raised: #1b3d72;
    --psv-panel-rgb: 22 53 103;
    --psv-panel-deep-rgb: 22 53 103;
    --psv-panel-solid: #163567;
    --psv-text-rgb: 230 237 245;
    --psv-copy: #c0cfe3;
    --psv-muted: #a9b8c8;
    --psv-line-rgb: 145 184 216;
    --psv-line-strong-rgb: 151 196 230;
    --psv-accent-rgb: 51 140 255;
    --psv-accent-pale-rgb: 139 188 255;
    --psv-accent-bright-rgb: 77 160 255;
    --psv-accent-tint-rgb: 104 170 255;
    --psv-mist-rgb: 169 184 200;
    --psv-danger-rgb: 255 128 128;
    --psv-warning-rgb: 240 190 96;
    --psv-success: #5ccf95;
    --psv-focus: #8bbcff;
    --psv-on-light: #e6edf5;
    --psv-heading-gradient: #f3f7fe;
    --psv-page-ground: #132d58;
    --psv-page-veil: none;
    --psv-page-grid: none;
    --psv-text-floor: 10px;
    /* the derived tokens are resolved where they are declared, so they are declared
       again here, over the navy values above */
    --psv-bg: rgb(var(--psv-bg-rgb));
    --psv-bg-deep: rgb(var(--psv-bg-deep-rgb));
    --psv-panel: rgb(var(--psv-panel-rgb) / .76);
    --psv-panel-soft: rgb(var(--psv-panel-rgb) / .48);
    --psv-panel-quiet: rgb(var(--psv-panel-deep-rgb) / .58);
    --psv-text: rgb(var(--psv-text-rgb));
    --psv-accent: rgb(var(--psv-accent-rgb));
    --psv-accent-pale: rgb(var(--psv-accent-pale-rgb));
    --psv-accent-bright: rgb(var(--psv-accent-bright-rgb));
    --psv-accent-tint: rgb(var(--psv-accent-tint-rgb));
    --psv-warning: rgb(var(--psv-warning-rgb));
    --psv-danger: rgb(var(--psv-danger-rgb));
    --psv-line: rgb(var(--psv-line-rgb) / .18);
    --psv-line-strong: rgb(var(--psv-line-strong-rgb) / .34);
    --psv-line-faint: rgb(var(--psv-line-strong-rgb) / .035);
    --psv-accent-line: rgb(var(--psv-accent-rgb) / .14);
    --psv-accent-line-strong: rgb(var(--psv-accent-rgb) / .25);
    --psv-accent-wash: rgb(var(--psv-accent-rgb) / .08);
    --psv-accent-ghost: rgb(var(--psv-accent-rgb) / .055);
    --psv-brand: #8bbcff;
    background: #132d58;
    color: #e6edf5;
  }

  /* The legal links and copyright under the page, as on the phone home page. */
  body:is([data-page="auth"], [data-page="confirmation"], [data-page="payment"], [data-page="payment-status"]) > .site-footer { display: block; padding-block: 22px 32px; background: #132d58; border-top: 1px solid rgb(145 184 216 / .18); color: #7f93a8; }
  body:is([data-page="auth"], [data-page="confirmation"], [data-page="payment"], [data-page="payment-status"]) > .site-footer .footer-inner { flex-direction: column-reverse; align-items: flex-start; gap: 14px; width: 100%; max-width: 480px; margin-inline: auto; padding-inline: 26px; box-sizing: border-box; }
  body:is([data-page="auth"], [data-page="confirmation"], [data-page="payment"], [data-page="payment-status"]) > .site-footer .footer-links { flex-wrap: wrap; gap: 10px 20px; padding-top: 18px; border-top: 1px solid rgb(145 184 216 / .18); width: 100%; }
  body:is([data-page="auth"], [data-page="confirmation"], [data-page="payment"], [data-page="payment-status"]) > .site-footer .footer-links a { color: #a9b8c8; text-decoration: none; }

  /* The step rail: the number of every step, the name of the current one. */
  body[data-scene-contract="purchase"] .purchase-progress li { font-size: 0; }
  body[data-scene-contract="purchase"] .purchase-progress__number { font-size: 10px; }
  body[data-scene-contract="purchase"] .purchase-progress li[aria-current="step"] { gap: 5px; color: #f3f7fe; font-size: 10px; }
  body[data-scene-contract="purchase"] .purchase-progress li[aria-current="step"]::after { background: #338cff; }

  /* The payment status ledger as a list, its first form: five columns left a long
     state name no room at the phone floor ("Doğrulanıyor", "Ausstehend"). */
  body[data-page="payment-status"] .status-ledger { grid-template-columns: 1fr; border: 0; border-top: 1px solid var(--psv-line); }
  body[data-page="payment-status"] .status-ledger li { grid-template-columns: 34px minmax(0, 1fr); justify-items: start; align-content: center; min-block-size: 38px; padding: 0 0 0 12px; text-align: left; border-inline-start: 0; border-bottom: 1px solid var(--psv-line); }
  body[data-page="payment-status"] .status-ledger li span { font-size: 10px; }
  body[data-page="payment-status"] .status-ledger li b { font-size: 14px; line-height: 1.3; }
  body[data-page="payment-status"] .status-ledger li.is-current { box-shadow: inset 3px 0 #338cff; }

  /* The page title in the phone pages' heading face. */
  body[data-scene-contract="purchase"] .page-title { color: #f3f7fe; font-family: var(--psv-font-hero); font-weight: 800; letter-spacing: -.035em; }
  body[data-scene-contract="purchase"] .page-lead { color: #c0cfe3; }

  /* Buttons as on the phone pages: the action blue, and the quiet outline. */
  body[data-scene-contract="purchase"] .btn--primary,
  body[data-scene-contract="purchase"] .btn--primary:focus-visible { color: #fff; background: #174c91; border-color: #5686bf; }
  body[data-scene-contract="purchase"] .btn--secondary,
  body[data-scene-contract="purchase"] .btn--secondary:focus-visible { color: #e6edf5; background: none; border-color: rgb(151 196 230 / .34); }
  body[data-scene-contract="purchase"] .text-action,
  body[data-scene-contract="purchase"] main a:not(.btn) { color: #8bbcff; }
  /* the payment QR keeps its white ground: a scanner needs it */
}