/* Onboarding: small pieces of the Merchant Portal onboarding UI, shared by every variant of the section
   (fields, business-type choice, document uploads, the signature, the Sandbox/Live switch, the first live payment).
   Illustrative data only. Every class starts with "onboarding-". */

.onboarding-ui {
  --ob-app: var(--surface-2);
  --ob-card: var(--surface);
  --ob-sel: color-mix(in srgb, var(--surface-3) 75%, var(--surface-2));
  --ob-glow: linear-gradient(100deg, rgba(var(--violet-1), 1), rgba(var(--violet-2), 1) 52%, rgba(var(--violet-3), 1));
  --ob-glow-soft: linear-gradient(100deg, rgba(var(--violet-1), .24), rgba(var(--violet-2), .22) 52%, rgba(var(--violet-3), .26));
  color: var(--text);
  font: 400 13px/1.35 var(--font);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.onboarding-ui { --ob-app: #18191b; --ob-sel: #2e2f33; }
.onboarding-ui svg { display: block; }
.onboarding-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-mono { font-family: var(--code); letter-spacing: .02em; }

.onboarding-cap { font: 500 10.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.onboarding-title { margin-top: 7px; font: 400 22px/1.12 var(--font); letter-spacing: -.03em; }
.onboarding-sub { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* fields */
.onboarding-field { display: grid; gap: 5px; }
.onboarding-field > span { font: 600 11.5px/1 var(--font); }
.onboarding-input { position: relative; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--ob-card); font-size: 13px; white-space: nowrap; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.onboarding-input[data-st="focus"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.onboarding-input em { font-style: normal; color: var(--text-2); }
.onboarding-caret { display: inline-block; width: 1.5px; height: 15px; margin-left: -8px; background: var(--text); opacity: 0; }
.onboarding-input[data-st="focus"] .onboarding-caret { opacity: 1; animation: onboarding-blink 1s steps(1) infinite; }
@keyframes onboarding-blink { 50% { opacity: 0; } }
.onboarding-flag { width: 20px; height: 14px; flex: none; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.onboarding-flag svg { width: 100%; height: 100%; }

/* business type: two choices */
.onboarding-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onboarding-opt { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 3px 10px; align-items: start; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--ob-card); transition: border-color .35s, box-shadow .35s, background-color .35s; }
.onboarding-opt > i { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--ob-sel); color: var(--text); }
.onboarding-opt b { font: 600 12.5px/1.2 var(--font); }
.onboarding-opt span { font-size: 11px; line-height: 1.35; color: var(--text-2); }
.onboarding-opt::after { content: ""; position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border-color .3s, background-color .3s, box-shadow .3s; }
.onboarding-opt[data-st="on"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.onboarding-opt[data-st="on"]::after { border: 4px solid var(--text); background: var(--ob-card); }

/* buttons and badges */
.onboarding-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 8px; white-space: nowrap;
  font: 600 12.5px/1 var(--font); background: var(--brand); color: var(--on-brand); }
.onboarding-btn .onboarding-ico { width: 14px; height: 14px; stroke-width: 2; }
.onboarding-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font: 600 10.5px/1.2 var(--font); white-space: nowrap; }
.onboarding-st--ok { color: var(--ok-fg); background: var(--ok-bg); }
.onboarding-st--wait { color: var(--text-2); background: var(--ob-sel); }
.onboarding-st--sbx { color: var(--text); background: var(--ob-glow-soft), var(--ob-card); box-shadow: inset 0 0 0 1px rgba(var(--violet-2), .4); }
.onboarding-st--sbx::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-glow); }
.onboarding-spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: onboarding-spin .8s linear infinite; }
@keyframes onboarding-spin { to { transform: rotate(360deg); } }
.onboarding-flip { display: inline-grid; }
.onboarding-flip > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: opacity .3s, transform .35s var(--ease-out); }
.onboarding-flip > [data-v="1"], [data-st="done"] .onboarding-flip > [data-v="0"], .onboarding-flip[data-st="done"] > [data-v="0"] { opacity: 0; transform: translateY(4px); }
[data-st="done"] .onboarding-flip > [data-v="1"], .onboarding-flip[data-st="done"] > [data-v="1"] { opacity: 1; transform: none; }

/* checks: a row that turns verified */
.onboarding-checks { display: grid; gap: 8px; }
.onboarding-check { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--ob-card); }
.onboarding-check > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--ob-sel); }
.onboarding-check b { display: block; font: 600 12.5px/1.2 var(--font); }
.onboarding-check small { font-size: 11px; color: var(--text-2); }

/* document uploads */
.onboarding-files { display: grid; gap: 9px; }
.onboarding-file { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; column-gap: 10px; row-gap: 6px; }
.onboarding-file > i { grid-row: span 2; width: 28px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--ob-sel); color: var(--text-2); }
.onboarding-file > i .onboarding-ico { width: 14px; height: 14px; }
.onboarding-file b { font: 500 12px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-file em { font: 500 10.5px/1 var(--font); font-style: normal; color: var(--text-2); justify-self: end; }
.onboarding-file .onboarding-bar { grid-column: 2 / -1; }
.onboarding-bar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.onboarding-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left center; }
.onboarding-file[data-st="done"] .onboarding-bar i { background: var(--ok); }
.onboarding-drop { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 11px; border: 1.5px dashed var(--line-2); font-size: 12px; color: var(--text-2); }
.onboarding-drop b { color: var(--link); font-weight: 600; }

/* the agreement and its signature */
.onboarding-doc { position: relative; display: grid; gap: 7px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--ob-card); }
.onboarding-doc__head { display: flex; align-items: center; gap: 10px; }
.onboarding-doc__head > i { width: 30px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.onboarding-doc__head b { display: block; font: 600 13px/1.2 var(--font); }
.onboarding-doc__head small { font-size: 11px; color: var(--text-2); }
.onboarding-lines { display: grid; gap: 6px; margin-top: 4px; }
.onboarding-lines i { display: block; height: 6px; border-radius: 3px; background: var(--ob-sel); }
.onboarding-sign { position: relative; padding: 8px 12px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--ob-card)); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.onboarding-sign__label { position: absolute; left: 12px; top: 8px; font: 600 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.onboarding-sign svg { width: 100%; height: auto; overflow: visible; }
.onboarding-sign__ink { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-sign__base { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; stroke-dasharray: 4 4; }
.onboarding-sign__pen { fill: var(--accent); opacity: 0; }
.onboarding-sign__who { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-2); }
.onboarding-sign__who b { color: var(--text); font-weight: 600; }

/* Sandbox / Live switch */
.onboarding-env { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-control); border: 1px solid var(--line-2); background: var(--ob-app); }
.onboarding-env__knob { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 8px; background: var(--ob-card);
  box-shadow: 0 2px 6px rgb(0 20 50 / .16), inset 0 0 0 1px var(--line); }
.onboarding-env__knob { background: #323336; box-shadow: 0 2px 8px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(255 255 255 / .08); }
.onboarding-env > span:not(.onboarding-env__knob) { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 32px; font: 600 12.5px/1 var(--font); color: var(--text-2); transition: color .35s; }
.onboarding-env i { width: 8px; height: 8px; border-radius: 50%; }
.onboarding-env[data-st="live"] .onboarding-env__knob { transform: translateX(100%); }
.onboarding-env__sbx i { background: var(--ob-glow); box-shadow: 0 0 0 3px rgba(var(--violet-2), .2); }
.onboarding-env__live i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.onboarding-env[data-st="sbx"] .onboarding-env__sbx, .onboarding-env[data-st="live"] .onboarding-env__live { color: var(--text); }
.onboarding-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--ob-card); }
.onboarding-key small { display: block; font: 500 11px/1.2 var(--font); color: var(--text-2); margin-bottom: 4px; }
.onboarding-key code { font: 500 12px/1 var(--code); letter-spacing: .04em; }

/* the first live payment */
.onboarding-toast { display: flex; align-items: center; gap: 11px; padding: 10px 15px 10px 10px; border-radius: 14px; background: var(--toast-bg); color: var(--toast-fg);
  font: 500 12.5px/1.3 var(--font); white-space: nowrap; box-shadow: 0 22px 44px -14px rgb(0 20 50 / .55), 0 0 0 6px color-mix(in srgb, var(--ok) 14%, transparent); }
.onboarding-toast > i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ok); }
.onboarding-toast > i svg { width: 14px; height: 14px; fill: none; stroke: var(--on-ok); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-toast small { display: block; margin-bottom: 3px; font: 600 9.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.onboarding-toast .m { --m: .52; }
.onboarding-toast__pm { display: inline-grid; place-items: center; width: 30px; height: 20px; margin: 0 2px 0 6px; border-radius: 4px; background: #fff; vertical-align: middle; box-shadow: inset 0 0 0 1px rgb(0 30 60 / .12); }

/* live payments of a newly live account: empty, then the first payment */
.onboarding-live__list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; min-height: 46px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--ob-card); }
.onboarding-live__list > * { grid-area: 1 / 1; align-self: center; transition: opacity .35s, transform .45s var(--ease-out); }
.onboarding-live__empty { font-size: 12px; color: var(--text-2); }
.onboarding-live__row { min-width: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: 12.5px; opacity: 0; transform: translateY(8px); }
.onboarding-live__row b { font-weight: 600; text-align: right; white-space: nowrap; }
.onboarding-live__row .onboarding-toast__pm { margin: 0; }
.onboarding-live__row .onboarding-mono { white-space: nowrap; }
.onboarding-live__row .m { --m: .52; }
.onboarding-live[data-st="done"] .onboarding-live__empty { opacity: 0; transform: translateY(-8px); }
.onboarding-live[data-st="done"] .onboarding-live__row { opacity: 1; transform: none; }

/* Onboarding · variant a "Pinned stepper".
   Default layout (phones, reduced motion, no script): the steps in a list along a progress line, each followed by its
   onboarding card. On wide screens the script adds .is-pinned: the section holds the page, the list stays on the left
   and one card on the right changes step by step (every step's card is placed over the same frame). */

.onboarding-a { position: relative; padding: clamp(90px, 12vw, 160px) 0; }
.onboarding-a__inner { position: relative; isolation: isolate; }
.onboarding-a__copy { max-width: 720px; }
.onboarding-a__lead { margin-top: 16px; font-size: var(--t-large); color: var(--text-2); max-width: 44ch; }

/* the list and its progress line (drawn as backgrounds of the list, so no box is positioned around the cards) */
.onboarding-a__steps { --p: 1; display: grid; gap: 8px; margin-top: 40px;
  background-image: linear-gradient(var(--ok), var(--ok)), linear-gradient(var(--line-2), var(--line-2));
  background-repeat: no-repeat; background-position: 15px 24px, 15px 24px;
  background-size: 2px calc(var(--rail, 100% - 48px) * var(--p)), 2px var(--rail, calc(100% - 48px)); }
.onboarding-a__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; row-gap: 18px; padding: 8px 0 14px; }
.onboarding-a__dot { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line-2); color: var(--text-2); font: 600 13px/1 var(--font);
  transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s; }
.onboarding-a__dot b { font-weight: 600; transition: opacity .3s; }
.onboarding-a__dot svg { position: absolute; width: 15px; height: 15px; fill: none; stroke: var(--on-ok); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease-out); }
.onboarding-a__step[data-st="now"] .onboarding-a__dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.onboarding-a__step[data-st="done"] .onboarding-a__dot { background: var(--ok); border-color: var(--ok); }
.onboarding-a__step[data-st="done"] .onboarding-a__dot b { opacity: 0; }
.onboarding-a__step[data-st="done"] .onboarding-a__dot svg { opacity: 1; transform: none; }
.onboarding-a__txt { padding-top: 3px; transition: opacity .45s; }
.onboarding-a__txt h3 { font: 600 var(--t-h3)/1.3 var(--font); letter-spacing: -.01em; }
.onboarding-a__txt p { margin-top: 6px; font-size: var(--t-medium); line-height: 1.5; color: var(--text-2); max-width: 46ch; }

/* a card (each step's own on phones and the static page) */
.onboarding-a__pane { grid-column: 2; position: relative; padding: 22px 22px 24px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.onboarding-a__block { margin-top: 16px; }
.onboarding-a__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.onboarding-a__wide { grid-column: 1 / -1; }
.onboarding-a__label { margin: 16px 0 10px; font: 600 11.5px/1 var(--font); }
.onboarding-a__drop { margin-top: 12px; }
.onboarding-a__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.onboarding-a__note { font-size: 12px; color: var(--text-2); }
.onboarding-a .onboarding-sign { margin-top: 12px; }
.onboarding-a .onboarding-key { margin-top: 12px; }
.onboarding-a__toast { margin-top: 16px; width: fit-content; max-width: 100%; white-space: normal; }
.onboarding-a__frame { display: none; }

@media (max-width: 560px) {
  .onboarding-a__pane { padding: 18px 16px 20px; border-radius: 20px; }
  .onboarding-a__fields { grid-template-columns: 1fr; }
  .onboarding-opts { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .onboarding-a:not(.is-pinned) .onboarding-a__copy { max-width: none; }
  .onboarding-a:not(.is-pinned) .onboarding-a__step { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 520px); column-gap: clamp(20px, 3vw, 48px); padding-bottom: 40px; }
  .onboarding-a:not(.is-pinned) .onboarding-a__pane { grid-column: 3; grid-row: 1; }
  .onboarding-a:not(.is-pinned) .onboarding-a__steps { margin-top: 56px; }
}

/* ---------- pinned stepper (wide screens with motion) ----------
   The heading and the lead form a row on top; below it the step list and the card sit side by side, centred on one axis.
   The script moves the four cards into the frame, where they stack in one grid cell: the frame is as tall as the tallest
   card and stays still, and only the content inside changes from step to step. The whole composition is centred. */
.onboarding-a.is-pinned { padding: 0; --ob-w: clamp(420px, 40vw, 540px); --ob-gap: clamp(28px, 5.5vh, 60px); }
.is-pinned .onboarding-a__stage { height: min(100svh, 4000px); display: flex; align-items: center; padding: 96px 0 20px; } /* centred below the 76px header */
.is-pinned .onboarding-a__inner { display: grid; grid-template-columns: minmax(0, 1fr) var(--ob-w); grid-template-areas: "pill lead" "title lead" "list card";
  column-gap: clamp(40px, 5vw, 80px); align-items: center; }
.is-pinned .onboarding-a__copy { display: contents; }
.is-pinned .onboarding-a__copy > .pill { grid-area: pill; justify-self: start; }
.is-pinned .h2 { grid-area: title; }
.is-pinned .onboarding-a__lead { grid-area: lead; align-self: end; margin: 0; }
.is-pinned .onboarding-a__steps { grid-area: list; margin-top: var(--ob-gap); gap: clamp(14px, 2.6vh, 26px); }
.is-pinned .onboarding-a__step { padding: 8px 0 10px; }
.is-pinned .onboarding-a__step:not([data-st="now"]) .onboarding-a__txt { opacity: .55; }
.is-pinned .onboarding-a__txt p { margin-top: 4px; max-width: none; }
.is-pinned .onboarding-a__frame { grid-area: card; display: grid; position: relative; margin-top: var(--ob-gap); z-index: 1;
  border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.is-pinned .onboarding-a__frame { box-shadow: var(--shadow-card); }
.onboarding-a__prog { position: absolute; z-index: 1; left: 26px; right: 26px; top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.onboarding-a__prog i { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.onboarding-a__prog i::after { content: ""; display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); transform-origin: left center; transform: scaleX(var(--f, 1)); }
.is-pinned .onboarding-a__frame > .onboarding-a__pane { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; padding: 44px 26px 24px;
  background: none; border: 0; border-radius: 0; box-shadow: none; }
.is-pinned .onboarding-a__foot { margin-top: auto; padding-top: 14px; }
.is-pinned .onboarding-live { margin-top: 4px; }
.is-pinned .onboarding-a__drop { margin-top: auto; }
.is-pinned .onboarding-a__toast { position: absolute; margin: 0; right: -34px; bottom: 30px; white-space: nowrap; }