/* desktop-scale:native-start */
/* Approved account layout: native viewport geometry, scoped to the auth route. */
@font-face {
  font-family: "Inter Account";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/inter-variable-latin-ext-20261014.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter Account";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter/inter-variable-latin-20261014.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) {
  --psv-font-sans: "Inter Account", sans-serif;
  --psv-font-display: "Inter Account", sans-serif;
  --psv-font-hero: "Inter Account", sans-serif;
  --psv-font-editorial: "Inter Account", sans-serif;
  --psv-font-body: "Inter Account", sans-serif;
  --psv-font-heading: "Inter Account", sans-serif;
  --psv-font-mono: "Inter Account", sans-serif;
  --psv-bg-rgb: 255 255 255;
  --psv-text-rgb: 24 34 48;
  --psv-muted-rgb: 94 106 123;
  --psv-line-rgb: 229 234 240;
  --psv-text: #182230;
  --psv-muted: #5e6a7b;
  --psv-line: #e5eaf0;
  --psv-accent: #173f7b;
  --psv-focus: #173f7b;
  --psv-page-ground: #fff;
  --psv-page-grid: none;
  --psv-page-veil: none;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  height: auto;
  overflow: visible;
  background: #fff;
  color: #182230;
  color-scheme: light;
  font-family: "Inter Account", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"])::before,
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"])::after { display: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) :is(input,select,option,button,a,label,h1,p,span,strong,summary) { font-family: inherit; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) :is(a,button,input,select,summary):focus-visible { outline: 2px solid #3769a9; outline-offset: 3px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .account-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 20px;
  width: 100%;
  padding: 27px 42px;
  border: 0;
  background: #fff;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-brand { display: flex; flex: 0 0 auto; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-brand img { width: 142px; height: 32px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-header__actions { display: flex; align-items: center; gap: 24px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-back { color: #5e6a7b; font-size: 13px; text-decoration: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-back:hover { color: #173f7b; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .language-picker { display: block; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .lang-toggle { display: flex; gap: 6px; width: auto; min-width: 44px; height: 40px; padding: 0 4px; color: #5e6a7b; font-size: 12px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .language-globe { width: 17px; height: 17px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .language-menu { background: #fff; border: 1px solid #e5eaf0; color: #182230; border-radius: 8px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .language-option { font-size: 14px; color: #182230; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .language-option:hover,
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .language-option[aria-checked="true"] { background: #f1f5fa; color: #173f7b; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content {
  display: block;
  flex: 1 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 24px 56px;
  overflow: visible;
  background: #fff;
}
body[data-page="auth"] #main-content .auth-scene {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .auth-shell {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0;
  width: 100%;
  margin: 30px auto 43px;
  padding: 0;
  border: 0;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #697586;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li::after { display: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 23px);
  right: calc(-50% + 23px);
  height: 1px;
  background: #e5eaf0;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress__number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid #e5eaf0;
  border-radius: 50%;
  background: #fff;
  color: #697586;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li:first-child .purchase-progress__number { background: #eef4fb; border-color: #eef4fb; color: #173f7b; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li[aria-current="step"] { color: #182230; font-weight: 500; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li[aria-current="step"] .purchase-progress__number { background: #173f7b; border-color: #173f7b; color: #fff; }
body[data-page="auth"] #main-content .auth-scene :is(.account-centre,.auth-stage) { display: block; width: 100%; max-width: 400px; min-height: 0; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-page="auth"] #main-content .auth-scene :is(.auth-brief,.auth-intro,.account-gate,.auth-state-stack,.auth-state) { display: block; width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body[data-page="auth"] #main-content .auth-scene .auth-state[hidden] { display: none; }
body[data-page="auth"] #main-content .auth-scene :is(.auth-assurance,[data-auth-eyebrow]) { display: none; }
body[data-page="auth"] #main-content .auth-scene #auth-heading {
  max-width: none;
  margin: 0 0 10px;
  color: #182230;
  -webkit-text-fill-color: #182230;
  font-family: "Inter Account", sans-serif;
  background: none;
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -.035em;
  text-transform: none;
  text-align: left;
}
body[data-page="auth"] #main-content .auth-scene [data-auth-copy] { display: block; max-width: none; margin: 0 0 25px; color: #5e6a7b; font-size: 14px; line-height: 22px; letter-spacing: 0; text-align: left; }
body[data-page="auth"] #main-content .auth-scene .auth-form { display: grid; gap: 19px; margin: 0; padding: 0; }
body[data-page="auth"] #main-content .auth-scene .auth-verified-summary { margin: 0 0 3px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-summary summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 13px; color: #5e6a7b; font-size: 12px; line-height: 18px; cursor: pointer; list-style: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-summary summary::-webkit-details-marker { display: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-summary svg { flex: 0 0 auto; width: 16px; height: 16px; color: #348572; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-summary .summary-chevron { margin-left: auto; color: #7c8998; transition: transform .15s; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-summary[open] .summary-chevron { transform: rotate(180deg); }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-details { padding: 0 13px 12px 38px; display: grid; gap: 9px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-details > div { display: grid; gap: 2px; font-size: 12px; color: #5e6a7b; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-details strong { color: #182230; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
body[data-page="auth"] #main-content .auth-scene .account-card .field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; min-width: 0; margin: 0; padding: 0; }
body[data-page="auth"] #main-content .auth-scene .account-card .field > label { grid-column: 1; grid-row: 1; margin: 0; color: #182230; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-transform: none; }
body[data-page="auth"] #main-content .auth-scene .account-card .field :is(input,select) { width: 100%; min-width: 0; height: 50px; min-height: 50px; padding: 0 13px; border: 1px solid #d8dfe8; border-radius: 7px; background: #fff; color: #182230; box-shadow: 0 1px 2px #18223004; font-size: 16px; font-weight: 400; letter-spacing: 0; }
body[data-page="auth"] #main-content .auth-scene .account-card .field :is(input,select):focus-visible { outline: none; border-color: #5279aa; box-shadow: 0 0 0 3px #173f7b12; }
body[data-page="auth"] #main-content .auth-scene .account-card .field input[aria-invalid="true"] { border-color: #b54748; }
body[data-page="auth"] #main-content .auth-scene .account-card .field input::placeholder { color: #99a3af; font-size: 14px; opacity: 1; }
body[data-page="auth"] #main-content .auth-scene .account-card .field > :is(input,select,.password-control,.phone-control) { grid-column: 1 / -1; grid-row: 2; }
body[data-page="auth"] #main-content .auth-scene .account-card .password-control { position: relative; display: block; width: 100%; }
body[data-page="auth"] #main-content .auth-scene .account-card .password-control input { padding-inline-end: 48px; }
body[data-page="auth"] #main-content .auth-scene .password-toggle { position: absolute; inset: 3px 3px 3px auto; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #748193; }
body[data-page="auth"] #main-content .auth-scene .password-toggle:hover { background: #f4f6f9; color: #173f7b; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .password-toggle svg { width: 18px; height: 18px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .password-toggle .eye-slash { opacity: 0; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .password-toggle[aria-pressed="true"] .eye-slash { opacity: 1; }
body[data-page="auth"] #main-content .auth-scene .account-card .field > .field-aside { grid-column: 1 / -1; grid-row: auto; display: flex; flex-direction: column; gap: 0; min-height: 0; margin: 0; }
body[data-page="auth"] #main-content .auth-scene :is(.field-hint,.field-message) { display: block; margin: 0; color: #697586; font-size: 12px; line-height: 18px; letter-spacing: 0; text-transform: none; }
body[data-page="auth"] #main-content .auth-scene .field-message:empty { display: none; }
body[data-page="auth"] #main-content .auth-scene .field-message,
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .field-hint[data-match="mismatch"] { color: #b54748; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .field-hint[data-match="match"] { color: #287761; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .field.has-field-message .field-hint { display: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .btn { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 49px; height: auto; margin: 2px 0 0; padding: 13px 16px; border: 1px solid #173f7b; border-radius: 7px; background: #173f7b; color: #fff; box-shadow: 0 1px 2px #18223014; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0; text-transform: none; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .btn:hover { background: #12356a; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
body[data-page="auth"] #main-content .auth-scene .auth-legal-note { order: initial; width: 100%; max-width: none; margin: -5px 0 0; padding: 0; border: 0; color: #697586; font-size: 12px; line-height: 19px; text-align: center; letter-spacing: 0; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .auth-legal-note a { color: #5e6a7b; text-decoration-color: #b2bbc6; text-underline-offset: 3px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) :is(.auth-route-switch,.text-action,.reserved-status,.verification-preview,.auth-verified-line) { color: #5e6a7b; font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; }
body[data-page="auth"] #main-content .auth-scene .auth-route-switch { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .text-action { color: #173f7b; font-weight: 500; }
/* A label and its value have separate rows in every account step. */
body[data-page="auth"] #main-content .auth-scene .auth-verified-line {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 3px 12px;
  padding: 12px 14px;
  border: 1px solid #e5eaf0;
  border-radius: 7px;
  background: #f7f9fc;
}
body[data-page="auth"] #main-content .auth-scene .auth-verified-line > span:first-child {
  grid-column: 1;
  grid-row: 1;
  color: #5e6a7b;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}
body[data-page="auth"] #main-content .auth-scene .auth-verified-line strong {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  color: #182230;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
body[data-page="auth"] #main-content .auth-scene .auth-verified-line > :is(.auth-verified-mark,button) {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
  font-family: "Inter Account", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}
body[data-page="auth"] #main-content .auth-scene .auth-verified-mark { color: #287761; }
body[data-page="auth"] #main-content .auth-scene .account-card .field > select {
  appearance: none;
  padding-inline-end: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23697586' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 16px 16px;
}
body[data-page="auth"] #main-content .auth-scene .account-card .field select option {
  color: #182230;
  background: #fff;
  font-family: "Inter Account", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
/* One telephone control: code and number share a height, border and typeface. */
body[data-page="auth"] #main-content .auth-scene .phone-control {
  display: flex;
  gap: 0;
  width: 100%;
  height: 50px;
  min-height: 50px;
  border: 1px solid #d8dfe8;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px #18223004;
}
body[data-page="auth"] #main-content .auth-scene .phone-control:focus-within {
  border-color: #5279aa;
  box-shadow: 0 0 0 3px #173f7b12;
}
body[data-page="auth"] #main-content .auth-scene .phone-control:has([aria-invalid="true"]) { border-color: #b54748; }
body[data-page="auth"] #main-content .auth-scene .phone-dial {
  position: relative;
  display: block;
  width: 112px;
  min-width: 112px;
  flex: 0 0 112px;
  height: 48px;
  color: #182230;
}
body[data-page="auth"] #main-content .auth-scene .phone-dial::after {
  content: "";
  position: absolute;
  inset: 12px 0 12px auto;
  width: 1px;
  background: #e5eaf0;
  pointer-events: none;
}
body[data-page="auth"] #main-content .auth-scene .phone-dial-face {
  display: flex;
  align-items: center;
  width: 100%;
  min-inline-size: 0;
  height: 48px;
  min-block-size: 0;
  padding: 0 30px 0 13px;
  border: 0;
  border-radius: 6px 0 0 6px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23697586' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 14px;
  box-shadow: none;
  color: #182230;
  font-family: "Inter Account", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
body[data-page="auth"] #main-content .auth-scene .phone-dial:focus-within .phone-dial-face { box-shadow: none; }
body[data-page="auth"] #main-content .auth-scene .account-card .field .phone-dial select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
body[data-page="auth"] #main-content .auth-scene .account-card .field .phone-control input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 13px;
  border: 0;
  border-radius: 0 6px 6px 0;
  outline: none;
  box-shadow: none;
  font-family: "Inter Account", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
body[data-page="auth"] #main-content .auth-scene .account-card .field .phone-control input::placeholder { font-size: 16px; color: #697586; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .text-action { font-family: "Inter Account", sans-serif; text-underline-offset: 3px; }
body[data-page="auth"] #main-content .auth-scene .otp-cells { grid-column: 1 / -1; grid-row: 2; gap: 8px; height: 50px; }
body[data-page="auth"] #main-content .auth-scene .otp-cells span { height: 50px; border-radius: 7px; background: #fff; color: #182230; border-color: #d8dfe8; font-size: 20px; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer { position: static; width: 100%; margin-top: auto; padding: 0 42px; border: 0; background: #fff; color: #697586; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; width: 100%; max-width: none; min-height: 64px; margin: 0; padding: 16px 0; border-top: 1px solid #edf0f4; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer :is(.footer-brand,.footer-links) { display: flex; flex-wrap: wrap; gap: 20px; color: #697586; font-size: 11px; line-height: 18px; letter-spacing: 0; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-links { margin: 0; padding: 0; border: 0; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-links a { color: #697586; text-decoration: none; font-size: inherit; }
body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-social { display: none; }
@media (max-width: 600px) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .account-header { padding: 18px 24px; gap: 12px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-brand img { width: 128px; height: 29px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-header__actions { gap: 12px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-back { font-size: 12px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress { margin: 20px auto 36px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress li { font-size: 10px; }
  body[data-page="auth"] #main-content .auth-scene #auth-heading { font-size: 27px; line-height: 35px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer { padding: 0 24px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-inner { justify-content: center; text-align: center; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-links { justify-content: center; gap: 10px 18px; }
}
@media (max-width: 360px) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .account-header { padding: 16px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content { padding-inline: 20px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-header__actions { gap: 5px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .account-brand img { width: 116px; }
  body[data-page="auth"] #main-content .auth-scene #auth-heading { font-size: 25px; line-height: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) .auth-verified-summary .summary-chevron { transition: none; }
}
body[data-page="auth"] #main-content .auth-scene .auth-review-bypass { display: none; }
/* The purchase steps after the account (owner, 17 Oct 2026: "Onay: bu düzeni İnceleme, Ödeme ve Ödeme
   durumu sayfalarına uygula"): Review, Payment and Payment status in the account page's design. The pages
   keep their markup, their scripts and every hook the purchase reads; only their look follows the account
   page: one centred column of 400 px, the same step indicator, heading, label-and-value rows, fields,
   one primary action, notes under it and the same footer. The wallet address and the order reference keep a
   monospace: they are strings to compare, not text to read. */
/* this sheet is loaded by the account page and the three steps after it alone: their root is the page's white,
   so a bounce at either end of the page or a scrollbar gutter never shows the phone pages' navy */
html { background-color: #fff; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene { display: block; height: auto; min-height: 0; padding: 0; overflow: visible; background: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene > .scene-shell { display: block; width: 100%; max-width: 650px; height: auto; min-height: 0; margin: 0 auto; padding: 0; overflow: visible; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .scene-body { display: block; width: 100%; max-width: 400px; min-height: 0; margin: 0 auto; padding: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .eyebrow { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .page-title { max-width: none; margin: 0 0 10px; color: #182230; -webkit-text-fill-color: #182230; font-family: "Inter Account", sans-serif; background: none; font-size: 30px; font-weight: 600; line-height: 38px; letter-spacing: -.035em; text-transform: none; text-align: left; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .page-lead { display: block; max-width: none; margin: 0 0 25px; color: #5e6a7b; font-size: 14px; line-height: 22px; letter-spacing: 0; text-align: left; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-surface { display: grid; grid-template-columns: minmax(0, 1fr); gap: 19px; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-surface > * { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 19px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.transaction-kicker) { display: block; margin: 6px 0 -11px; padding: 0; border: 0; color: #182230; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-step-title { margin: 0 0 -9px; color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 13px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .missing-plan { display: grid; gap: 14px; margin: 0 0 19px; padding: 14px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; color: #5e6a7b; font-size: 13px; line-height: 20px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .missing-plan[hidden] { display: none; }
/* label-and-value rows, the payment summary's way (Stripe's checkout sets them alike) */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference, .payment-details) { display: grid; gap: 0; margin: 0; padding: 0; border: 0; background: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference) { border-bottom: 1px solid #e5eaf0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference) > div, body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details > .payment-field:not(.payment-operation) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 0; margin: 0; padding: 11px 0; border: 0; border-top: 1px solid #e5eaf0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; line-height: 21px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details > .payment-field:not(.payment-operation) + .payment-field:not(.payment-operation) { border-bottom: 1px solid #e5eaf0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference, .payment-details) dt { margin: 0; padding: 0; color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference, .payment-details) dd { margin: 0; padding: 0; color: #182230; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* Review: the plan, what it includes, the payment summary, one action */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content #confirmation-plan-access > .transaction-kicker { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-plan__identity { display: grid; gap: 2px; margin: 0; padding: 16px 14px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-plan__identity .plan-name { color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .06em; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-plan__identity .confirmation-price { color: #182230; font-family: "Inter Account", sans-serif; font-size: 26px; font-weight: 600; line-height: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .capability-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .capability-list li { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 0; border: 0; background: none; color: #182230; font-family: "Inter Account", sans-serif; font-size: 14px; line-height: 21px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .capability-list li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23348572' stroke-width='1.8'%3E%3Cpath d='M3.5 8.3l3 3 6-6.6'/%3E%3C/svg%3E") center / 16px no-repeat; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-actions, body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-actions { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; border: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-actions [data-continue-payment] { order: 1; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-actions [data-risk-notice] { order: 2; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-actions [data-payment-eligibility] { order: 3; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-actions > .btn--secondary { order: 4; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-notice { margin: -5px 0 0; padding: 0; border: 0; background: none; color: #697586; font-family: "Inter Account", sans-serif; font-size: 12px; line-height: 19px; letter-spacing: 0; text-align: center; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-notice:empty { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-notice a { color: #5e6a7b; text-decoration-color: #b2bbc6; text-underline-offset: 3px; }
/* secondary actions in the account page's way: a link under the primary one; elsewhere an outlined button */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene .btn--secondary { border-color: #d8dfe8; background: #fff; color: #173f7b; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene .btn--secondary:hover { border-color: #b7c3d2; background: #f7f9fc; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene :is(.confirmation-actions, .payment-actions) > .btn--secondary { justify-self: center; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: #173f7b; box-shadow: none; font-size: 13px; font-weight: 500; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; }
/* the plan line, the account page's verified line */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; margin: 0; padding: 12px 14px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context > div { display: grid; gap: 3px; min-width: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context__label { color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context strong { color: #182230; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0; overflow-wrap: anywhere; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context > a { color: #173f7b; font-family: "Inter Account", sans-serif; font-size: 12px; font-weight: 500; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Payment: the amount and the address as the account page's fields, each with its copy action */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details .payment-field--amount { margin-bottom: 19px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-inline: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) > dt { grid-column: 1; grid-row: 1; color: #182230; font-weight: 500; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) > dd { display: contents; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) > dd > :is(strong, code) { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; min-width: 0; min-height: 50px; margin: 0; padding: 0 13px; border: 1px solid #d8dfe8; border-radius: 7px; background: #f7f9fc; color: #182230; font-family: "Inter Account", sans-serif; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: 0; text-align: left; overflow-wrap: anywhere; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details .payment-operation--address > dd > code { padding-block: 13px; font-family: "IBM Plex Mono", monospace; font-size: 13.5px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) > dd > button { grid-column: 2; grid-row: 1; width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #173f7b; font-family: "Inter Account", sans-serif; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details .payment-operation--address { margin-top: 19px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .network-reference { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step { justify-items: center; gap: 6px; padding: 18px 14px 16px; border: 1px solid #e5eaf0; border-radius: 7px; text-align: center; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step .qr-frame { order: 1; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step .qr-frame img { display: block; width: 172px; height: 172px; image-rendering: pixelated; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step > .transaction-kicker { order: 2; margin: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step > p { order: 3; margin: 0; color: #697586; font-family: "Inter Account", sans-serif; font-size: 12px; line-height: 18px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step > .transaction-step-title { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step > p { max-width: none; margin: 0 0 -5px; color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-entry { display: grid; justify-items: center; gap: 14px; margin: 0; padding: 0; border: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-form { display: grid; gap: 14px; width: 100%; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-form[hidden] { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-form .field { display: grid; gap: 8px; margin: 0; padding: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-form .field > label { margin: 0; color: #182230; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-form .field input { width: 100%; height: 50px; padding: 0 13px; border: 1px solid #d8dfe8; border-radius: 7px; background: #fff; color: #182230; font-family: "Inter Account", sans-serif; font-size: 16px; letter-spacing: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content [data-payment-expired], body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content [data-payment-conflict] { display: grid; gap: 14px; width: 100%; max-width: 400px; margin: 19px auto 0; color: #5e6a7b; font-size: 13px; line-height: 20px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is([data-payment-expired], [data-payment-conflict])[hidden] { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content [data-payment-live]:empty { display: none; }
/* Payment status: the current state, the rows, the five steps */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-message { display: grid; gap: 4px; margin: 0; padding: 16px 14px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-message .status-kicker { margin: 0; color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-message h2 { margin: 0; color: #182230; -webkit-text-fill-color: #182230; font-family: "Inter Account", sans-serif; background: none; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-message p { margin: 0; color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-scene:is([data-payment-state="active"], [data-payment-state="paid"]) .payment-status-message { border-color: #cfe5dc; background: #f3faf7; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-scene:is([data-payment-state="active"], [data-payment-state="paid"]) .payment-status-message h2 { color: #287761; -webkit-text-fill-color: #287761; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-failure { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid #ecd2d2; border-radius: 7px; background: #fdf6f6; color: #5e6a7b; font-size: 13px; line-height: 20px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-failure[hidden] { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-failure strong { color: #b54748; font-size: 14px; font-weight: 600; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; list-style: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #697586; font-family: "Inter Account", sans-serif; text-align: left; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 33px; width: 1px; height: 22px; background: #e5eaf0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li > span { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; margin: 0; border: 1px solid #d8dfe8; border-radius: 50%; background: #fff; color: #697586; font-family: "Inter Account", sans-serif; font-size: 11px; font-weight: 500; line-height: 1; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li > b { color: inherit; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li.is-complete { color: #182230; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li.is-complete > span { border-color: #173f7b; background: #173f7b; color: transparent; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li.is-complete > span::after { content: "\2713"; position: absolute; color: #fff; font-size: 12px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li.is-current { color: #182230; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li.is-current > b { font-weight: 500; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li.is-current > span { border: 2px solid #173f7b; color: #173f7b; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li:last-child.is-current > span { border-color: #287761; background: #287761; color: transparent; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .status-ledger li:last-child.is-current > span::after { content: "\2713"; position: absolute; color: #fff; font-size: 12px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-step > .btn { margin-top: 4px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-surface * { grid-column: auto; grid-row: auto; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference, .payment-details, .capability-list, .payment-order > div > dd) { grid-template-columns: minmax(0, 1fr); }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .capability-list { border: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .capability-list li { min-height: 0; min-block-size: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .capability-list li::before { position: static; top: auto; left: auto; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context::before { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step > .payment-amount-note { margin: 0; padding: 12px 14px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; color: #5e6a7b; font-family: "Inter Account", sans-serif; font-size: 12px; line-height: 19px; letter-spacing: 0; text-align: left; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order { display: block; margin: 0; padding: 0; text-align: center; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order > div { display: grid; justify-items: center; gap: 2px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order dt { color: #697586; font-family: "Inter Account", sans-serif; font-size: 12px; line-height: 18px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order dd { display: grid; justify-items: center; gap: 2px; margin: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order code { color: #5e6a7b; font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order .payment-expiry { color: #697586; font-family: "Inter Account", sans-serif; font-size: 12px; line-height: 18px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-order .payment-expiry[hidden] { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-entry > .text-action { justify-self: center; width: auto; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step > .payment-amount-note { width: 100%; max-width: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-plan__identity :is(.plan-name, .confirmation-price) { display: block; margin: 0; padding: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-notice a { text-decoration: underline; }
/* the plan line: its link beside the label, so the plan, price and period keep one line in every language */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label link" "value value"; align-items: baseline; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context > div { display: contents; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context__label { grid-area: label; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context strong { grid-area: value; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context > a { grid-area: link; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context strong { margin: 0; }
/* every link-styled control keeps the site's 44 px tap target; the negative margins keep the drawn rhythm */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene :is(.confirmation-actions, .payment-actions) > .btn--secondary,
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) > dd > button,
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-entry > .text-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-block: -12px; }
/* the last control of a step keeps its tap target inside the step: it gives its lower 12 px to the space below */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-scene :is(.confirmation-actions, .payment-actions) > .btn--secondary:last-child, body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-entry > .text-action { margin-bottom: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .plan-context > a { display: inline-flex; align-items: center; justify-self: end; min-height: 44px; margin-block: -13px; padding-block: 0; }
@media (max-width: 600px) {
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .page-title { font-size: 27px; line-height: 35px; }
}
@media (max-width: 360px) {
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .page-title { font-size: 25px; line-height: 33px; }
}
/* v7 (owner, 17 Oct 2026: "Onay: beş sayfayı telefon ve PC için siteye uygula"), from the approved drafts in
   design/candidates/odeme-akisi-v7: one white column; Review = one box (the plan and what it includes) and the
   summary closing on the total; Payment = amount, asset, network, promotion code, address, the QR code alone in
   its box, the action, its deadline and the order reference, one way back; Status = the current state and its
   steps in one block. One title style, one row height, every text link underlined. */
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-box { display: grid; gap: 12px; padding: 16px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-box > article { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-plan__name { margin: 0; color: #182230; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-box .data-ledger { border-bottom: 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-box .confirmation-included > .transaction-kicker { margin: 0; padding-top: 12px; border-top: 1px solid #e5eaf0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .confirmation-box .capability-list li { background: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .data-ledger > .data-ledger__total :is(dt, dd) { color: #182230; font-size: 16px; font-weight: 600; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address { display: grid; gap: 0; margin: 0; padding: 0; border: 0; background: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address .payment-operation--address { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address .payment-operation--address > dt { grid-column: 1; grid-row: 1; margin: 0; padding: 0; color: #182230; font-family: "Inter Account", sans-serif; font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: 0; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address .payment-operation--address > dd { display: contents; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address .payment-operation--address > dd > code { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; min-width: 0; min-height: 50px; margin: 0; padding: 13px; border: 1px solid #d8dfe8; border-radius: 7px; background: #f7f9fc; color: #182230; font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-weight: 400; line-height: 22px; letter-spacing: 0; overflow-wrap: anywhere; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address .payment-operation--address > dd > button { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; width: auto; min-width: 0; height: auto; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; box-shadow: none; color: #173f7b; font-family: "Inter Account", sans-serif; font-size: 13px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; text-transform: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details-step > .promo-entry { justify-items: start; margin: -7px 0 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details-step > .promo-entry > .text-action { justify-self: start; font-size: 13px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step { justify-items: stretch; gap: 8px; padding: 0; border: 0; border-radius: 0; text-align: center; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step .qr-frame { order: 1; display: grid; justify-items: center; margin: 0; padding: 12px; border: 1px solid #d8dfe8; border-radius: 7px; background: #fff; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step .qr-frame img { width: 164px; height: 164px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step > .transaction-kicker { order: 2; margin: 0; color: #5e6a7b; font-size: 13px; font-weight: 400; line-height: 20px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step .payment-order-meta { margin: 0; color: #697586; font-family: "Inter Account", sans-serif; font-size: 12px; line-height: 18px; text-align: center; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step .payment-order-meta[hidden] { display: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step .payment-order { margin: -10px 0 0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step .payment-order > div { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-action-step .payment-order dd { display: block; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-block { display: grid; gap: 14px; padding: 16px; border: 1px solid #e5eaf0; border-radius: 7px; background: #f7f9fc; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-block > .payment-status-message { padding: 0; border: 0; border-radius: 0; background: none; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-block > .status-ledger { padding-top: 6px; border-top: 1px solid #e5eaf0; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-block > .status-ledger li:not(.is-complete):not(.is-current) > span { background: #fff; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-scene:is([data-payment-state="active"], [data-payment-state="paid"]) .payment-status-block { border-color: #cfe5dc; background: #f3faf7; }
body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-status-scene:is([data-payment-state="active"], [data-payment-state="paid"]) .payment-status-block > .payment-status-message { background: none; }
/* desktop: every step of the purchase uses the same column (owner: "kart büyüklükleri aynı olmalı"; the account
   page too: "aynı yükseklikte ve aynı genişlikte (560 px)"), so the heading stands in the same place on every step */
@media (min-width: 1024px) {
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .scene-body { max-width: 560px; }
  body[data-page="auth"] #main-content .auth-scene :is(.account-centre,.auth-stage) { max-width: 560px; }
}
/* desktop, one screen per step (owner, 17 Oct 2026: "kartlar neden pc de scrolle çalışıyor ... neden tek ekranda
   göremiyorum", then "Evet, bu düzeltmeyi PC'de olduğu gibi siteye uygula"): no fixed area, the content area fills
   the screen so the footer stands at its foot, and the spacing is tighter: step indicator 14 / 24, heading 26 / 32,
   fields and buttons 44, rows 8, blocks 13, the QR code 124 (D-196) */
@media (min-width: 1024px) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content { padding-bottom: 32px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .purchase-progress { margin: 14px auto 24px; }
  body[data-page="auth"] #main-content .auth-scene #auth-heading, body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .page-title { margin-bottom: 6px; font-size: 26px; line-height: 32px; }
  body[data-page="auth"] #main-content .auth-scene [data-auth-copy], body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .purchase-intro .page-lead { margin-bottom: 16px; }
  body[data-page="auth"] #main-content .auth-scene .auth-form { gap: 13px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-surface, body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-surface > * { gap: 13px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-kicker { margin-bottom: -5px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .transaction-step-title { margin-bottom: -3px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.data-ledger, .payment-status-reference) > div, body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details > .payment-field:not(.payment-operation) { padding: 8px 0; }
  body[data-page="auth"] #main-content .auth-scene .account-card .field :is(input,select) { height: 44px; min-height: 44px; }
  body[data-page="auth"] #main-content .auth-scene .otp-cells, body[data-page="auth"] #main-content .auth-scene .otp-cells span { height: 44px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .promo-form .field input { height: 44px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-address .payment-operation--address > dd > code { min-height: 44px; padding: 10px 13px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .payment-details :is(.payment-field--amount, .payment-operation--address) > dd > :is(strong, code) { min-height: 44px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step .qr-frame { padding: 8px; }
  body:is([data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content .qr-payment-step .qr-frame img { width: 124px; height: 124px; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) #main-content :is(.auth-scene,.purchase-scene) .btn { min-height: 44px; padding: 11px 16px; }
  body[data-page="auth"] #main-content .auth-scene .phone-control { height: 44px; min-height: 44px; }
  body[data-page="auth"] #main-content .auth-scene :is(.phone-dial, .phone-dial-face) { height: 42px; }
  body[data-page="auth"] #main-content .auth-scene .account-card .field :is(.phone-control input, .phone-dial select) { height: 42px; min-height: 42px; }
}
/* the new-password rules (D-194): two lines under the field, ticked green when met, red when sent unmet */
body[data-page="auth"] #main-content .auth-scene .password-rules { display: grid; gap: 6px; margin: 2px 0 0; }
body[data-page="auth"] #main-content .auth-scene .password-rules > span { display: flex; align-items: center; gap: 8px; color: #5e6a7b; font-size: 13px; line-height: 20px; }
body[data-page="auth"] #main-content .auth-scene .password-rules > span::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid #c3cdda; border-radius: 50%; }
body[data-page="auth"] #main-content .auth-scene .password-rules > span.is-met { color: #182230; }
body[data-page="auth"] #main-content .auth-scene .password-rules > span.is-met::before { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23287761' stroke-width='2'%3E%3Cpath d='M3.5 8.3l3 3 6-6.6'/%3E%3C/svg%3E") center / 16px no-repeat; }
body[data-page="auth"] #main-content .auth-scene .password-rules > span.is-missing { color: #b54748; }
body[data-page="auth"] #main-content .auth-scene .password-rules > span.is-missing::before { border-color: #b54748; }
body[data-page="auth"] #main-content .auth-scene .field-message.is-rules-message { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the plan step (D-200): a new account chooses its plan on the review page, in the account design */
body[data-page="confirmation"] #main-content .purchase-scene .purchase-progress li.is-done .purchase-progress__number { background: #eef4fb; border-color: #eef4fb; color: #173f7b; }
body[data-page="confirmation"] #main-content [data-transaction-grid][hidden], body[data-page="confirmation"] #main-content .plan-choice[hidden] { display: none; }
body[data-page="confirmation"] #main-content .plan-choice { display: grid; gap: 19px; margin: 0; }
body[data-page="confirmation"] #main-content .plan-choice__list { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
body[data-page="confirmation"] #main-content .plan-choice__legend { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body[data-page="confirmation"] #main-content .plan-choice__options { display: grid; gap: 10px; }
body[data-page="confirmation"] #main-content .plan-choice__option { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 14px 16px; border: 1px solid #d8dfe8; border-radius: 7px; background: #fff; cursor: pointer; }
body[data-page="confirmation"] #main-content .plan-choice__option > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body[data-page="confirmation"] #main-content .plan-choice__option::before { content: ""; grid-column: 1; grid-row: 1 / span 2; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid #c3cdda; border-radius: 50%; background: #fff; }
body[data-page="confirmation"] #main-content .plan-choice__option.is-selected { border-color: #173f7b; box-shadow: inset 0 0 0 1px #173f7b; }
body[data-page="confirmation"] #main-content .plan-choice__option.is-selected::before { border: 5px solid #173f7b; }
body[data-page="confirmation"] #main-content .plan-choice__option:focus-within { box-shadow: 0 0 0 3px #173f7b1f; }
body[data-page="confirmation"] #main-content .plan-choice__option.is-selected:focus-within { box-shadow: inset 0 0 0 1px #173f7b, 0 0 0 3px #173f7b1f; }
body[data-page="confirmation"] #main-content .plan-choice__name { grid-column: 2; color: #182230; font-size: 14px; font-weight: 600; line-height: 20px; }
body[data-page="confirmation"] #main-content .plan-choice__term { grid-column: 2; color: #5e6a7b; font-size: 13px; line-height: 20px; }
body[data-page="confirmation"] #main-content .plan-choice__price { grid-column: 3; grid-row: 1 / span 2; color: #182230; font-size: 16px; font-weight: 600; line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-page="confirmation"] #main-content .plan-choice__trust { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
body[data-page="confirmation"] #main-content .plan-choice__trust li { display: flex; align-items: flex-start; gap: 8px; color: #5e6a7b; font-size: 13px; line-height: 20px; }
body[data-page="confirmation"] #main-content .plan-choice__trust li::before { content: ""; flex: 0 0 16px; height: 16px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23287761' stroke-width='2'%3E%3Cpath d='M3.5 8.3l3 3 6-6.6'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (min-width: 1024px) {
  body[data-page="confirmation"] #main-content .plan-choice { gap: 13px; }
}
/* phone footer: the legal links at the footer's standard size, the company lines' 12 px (owner, 18 Oct 2026, D-208) */
@media (max-width: 760px) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-links a { font-size: 12px; }
}
/* phone footer from 601 to 760 px too: the legal links and the company lines centred, as at 600 px and narrower (owner, 18 Oct 2026, D-212) */
@media (max-width: 760px) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-inner { justify-content: center; text-align: center; }
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-links { justify-content: center; gap: 10px 18px; }
}
/* PC footer: the legal links at the company lines' size, the footer's standard on every other PC page (owner, 18 Oct 2026, D-210) */
@media (min-width: 761px) {
  body:is([data-page="auth"],[data-page="confirmation"],[data-page="payment"],[data-page="payment-status"]) > .site-footer .footer-links a { font-size: var(--psv-ui-chip); }
}
/* desktop-scale:native-end */