/* Playful storefront direction for the existing local Shital application flow.
   Presentation only. The SF logo, card artwork and application behavior stay native. */
body:not([data-page="index"]) {
  --sf-flow-ink: #202023;
  --sf-flow-muted: #60616c;
  --sf-flow-line: #e3e3e9;
  --sf-flow-paper: #fcfcfe;
  --sf-flow-lavender: #e9e4ff;
  --sf-flow-blush: #fff0f2;
  --sf-flow-mint: #e5f3ed;
  --forest: #202023;
  --forest-hover: #37373d;
  --ink: #202023;
  --muted: #60616c;
  --line: #e3e3e9;
  --surface: #f5f5f8;
  color: var(--sf-flow-ink);
  background: var(--sf-flow-paper);
  font-family: "Instrument Sans", sans-serif;
}

body:not([data-page="index"]) > .onboarding-header {
  min-height: 96px;
  background: #fff;
  border-color: var(--sf-flow-line);
}

body:not([data-page="index"]) .onboarding-home {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--sf-flow-line);
  border-radius: 999px;
  color: var(--sf-flow-ink);
  background: #fff;
}

body:not([data-page="index"]) .onboarding-home:hover {
  border-color: var(--sf-flow-ink);
  background: #f6f5fb;
}

body:not([data-page="index"]) > main {
  padding-top: 40px;
  padding-bottom: 64px;
}

body:not([data-page="index"]) .application-page-heading {
  padding-bottom: 30px;
}

body:not([data-page="index"]) .application-page-heading h1 {
  max-width: 24ch;
  color: var(--sf-flow-ink);
  font-size: clamp(34px, 3.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -.04em;
  font-weight: 600;
}

body:not([data-page="index"]) .application-page-heading > p {
  max-width: 62ch;
  margin-top: 16px;
  color: var(--sf-flow-muted);
  font-size: 16px;
  line-height: 1.7;
}

body:not([data-page="index"]) .button {
  min-height: 52px;
  padding: 14px 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  gap: 12px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

body:not([data-page="index"]) .button-primary {
  color: #fff;
  border-color: var(--sf-flow-ink);
  background: var(--sf-flow-ink);
}

body:not([data-page="index"]) .button-primary:hover {
  color: #fff;
  border-color: #37373d;
  background: #37373d;
}

body:not([data-page="index"]) .button-secondary {
  color: var(--sf-flow-ink);
  border-color: #d3d2db;
  background: #fff;
}

body:not([data-page="index"]) .button-secondary:hover {
  color: var(--sf-flow-ink);
  border-color: var(--sf-flow-ink);
  background: #f5f3fc;
}

body:not([data-page="index"]) .button:disabled,
body:not([data-page="index"]) .button[aria-disabled="true"] {
  color: #6c6b75;
  border-color: #e1e0e6;
  background: #eeedf2;
  cursor: not-allowed;
}

body:not([data-page="index"]) .application-panel,
body:not([data-page="index"]) .card-page-panel {
  padding: 32px;
  border: 1px solid var(--sf-flow-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

body:not([data-page="index"]) .application-panel h2,
body:not([data-page="index"]) .card-page-panel h2,
body:not([data-page="index"]) .customise-title {
  color: var(--sf-flow-ink);
  font-weight: 600;
  letter-spacing: -.025em;
}

body:not([data-page="index"]) .application-panel h2 {
  font-size: 25px;
  line-height: 1.3;
}

body:not([data-page="index"]) .preview-stepper {
  max-width: 720px;
  padding: 0 0 25px;
  margin-bottom: 32px;
  border-color: var(--sf-flow-line);
}

body:not([data-page="index"]) .preview-stepper li {
  color: var(--sf-flow-muted);
}

body:not([data-page="index"]) .preview-stepper li > span {
  color: var(--sf-flow-ink);
  border-color: #d8d5e6;
  background: #f4f1ff;
}

body:not([data-page="index"]) .preview-stepper li.current > span,
body:not([data-page="index"]) .preview-stepper li[aria-current="step"] > span {
  color: #fff;
  border-color: var(--sf-flow-ink);
  background: var(--sf-flow-ink);
}

body:not([data-page="index"]) .preview-stepper li.complete > span {
  color: #294c3f;
  border-color: #cce1d7;
  background: var(--sf-flow-mint);
}

body:not([data-page="index"]) .decision {
  padding: 28px;
  margin-bottom: 28px;
  border: 0;
  border-radius: 12px;
  background: var(--sf-flow-lavender);
}

body:not([data-page="index"]) .decision-approved {
  background: var(--sf-flow-mint);
}

body:not([data-page="index"]) .decision-declined {
  background: var(--sf-flow-blush);
}

body:not([data-page="index"]) .decision h2 {
  max-width: 33ch;
  margin: 16px 0 12px;
  color: var(--sf-flow-ink);
  font-size: 26px;
  line-height: 1.3;
}

body:not([data-page="index"]) .decision p,
body:not([data-page="index"]) .section-copy,
body:not([data-page="index"]) .terms-inline,
body:not([data-page="index"]) .form-footnote {
  color: var(--sf-flow-muted);
  line-height: 1.75;
}

body:not([data-page="index"]) .status-badge {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--sf-flow-ink);
  background: #f1eef9;
  font-size: 12px;
}

body:not([data-page="index"]) .decision-pending .status-badge {
  color: #403756;
  background: #fff;
}

body:not([data-page="index"]) .decision-approved .status-badge,
body:not([data-page="index"]) .status-approved {
  color: #294c3f;
  background: #fff;
}

body:not([data-page="index"]) .decision-declined .status-badge {
  color: #803b48;
  background: #fff;
}

body:not([data-page="index"]) .review-list > div,
body:not([data-page="index"]) .card-order-review > div {
  padding-block: 17px;
  border-color: var(--sf-flow-line);
  font-size: 14px;
}

body:not([data-page="index"]) .review-list dt,
body:not([data-page="index"]) .card-order-review dt {
  color: var(--sf-flow-muted);
}

body:not([data-page="index"]) .review-list dd,
body:not([data-page="index"]) .card-order-review dd {
  color: var(--sf-flow-ink);
}

body:not([data-page="index"]) .preview-controls {
  padding: 26px;
  border: 0;
  border-radius: 12px;
  background: #f3efff;
}

body:not([data-page="index"]) .preview-controls h2 {
  color: var(--sf-flow-ink);
  font-size: 20px;
}

body:not([data-page="index"]) .preview-controls > p {
  color: var(--sf-flow-muted);
  font-size: 13px;
  line-height: 1.75;
}

body:not([data-page="index"]) .state-button {
  min-height: 48px;
  padding: 12px 17px;
  border: 1px solid #d5cfeb;
  border-radius: 999px;
  color: var(--sf-flow-ink);
  background: #fff;
}

body:not([data-page="index"]) .state-button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--sf-flow-ink);
  background: var(--sf-flow-ink);
}

body:not([data-page="index"]) .demo-note {
  padding: 18px 20px;
  border-left: 3px solid #b8acd9;
  border-radius: 0 8px 8px 0;
  color: #514962;
  background: #f5f2ff;
  font-size: 13px;
  line-height: 1.75;
}

body:not([data-page="index"]) .field label,
body:not([data-page="index"]) .consent-row {
  color: #474751;
}

body:not([data-page="index"]) .field input,
body:not([data-page="index"]) .field select {
  min-height: 52px;
  border: 1px solid #d6d5df;
  border-radius: 10px;
  color: var(--sf-flow-ink);
  background: #fff;
}

body:not([data-page="index"]) .field input[readonly] {
  color: var(--sf-flow-muted);
  border-color: #e4e2ed;
  background: #f7f6fc;
}

body:not([data-page="index"]) .field small {
  color: var(--sf-flow-muted);
}

body:not([data-page="index"]) .sample-address {
  padding: 22px;
  border: 0;
  border-radius: 12px;
  color: #4f615b;
  background: #eff7f2;
}

body:not([data-page="index"]) .sample-address h2,
body:not([data-page="index"]) .sample-address strong {
  color: var(--sf-flow-ink);
  font-size: 17px;
}

body:not([data-page="index"]) .card-page-layout {
  gap: 38px;
}

body:not([data-page="index"]) #live-card {
  padding: 34px 24px;
  border-radius: 14px;
  background: var(--sf-flow-lavender);
}

body:not([data-page="index"]) .card-demo-caption {
  color: var(--sf-flow-muted);
  font-size: 12px;
  line-height: 1.65;
}

body:not([data-page="index"]) .emi-design-options legend {
  color: var(--sf-flow-ink);
  font-size: 14px;
}

body:not([data-page="index"]) .emi-design-choice > span {
  min-height: 52px;
  border-color: #d6d3e4;
  border-radius: 999px;
  color: var(--sf-flow-ink);
  background: #fff;
}

body:not([data-page="index"]) .emi-design-choice > input:checked + span {
  color: var(--sf-flow-ink);
  border-color: var(--sf-flow-ink);
  background: var(--sf-flow-lavender);
}

body:not([data-page="index"]) .demo-fees {
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: #f3efff;
}

body:not([data-page="index"]) .demo-fees h2 {
  margin-bottom: 16px;
  color: var(--sf-flow-ink);
  font-size: 21px;
}

body:not([data-page="index"]) .demo-fees dt,
body:not([data-page="index"]) .demo-fees dd {
  color: #494451;
}

body:not([data-page="index"]) .demo-fees dl > div {
  border-color: #ded7ed;
}

body:not([data-page="index"]) .demo-fees .application-fees-total,
body:not([data-page="index"]) .demo-fees .application-fees-total :is(dt, dd) {
  color: var(--sf-flow-ink);
  border-color: #ccc2df;
}

body:not([data-page="index"]) .demo-order-actions {
  gap: 16px;
}

body:not([data-page="index"]) .demo-order-actions > .button {
  min-height: 78px;
  padding: 16px 22px;
  border-radius: 999px;
}

body:not([data-page="index"]) .policy-content {
  max-width: 860px;
  padding: 38px;
}

body:not([data-page="index"]) .policy-content > h2 {
  margin: 36px 0 14px;
  color: var(--sf-flow-ink);
  font-size: 27px;
}

body:not([data-page="index"]) .policy-content > h2:first-child {
  margin-top: 0;
}

body:not([data-page="index"]) .policy-content > p {
  color: var(--sf-flow-muted);
  font-size: 15px;
  line-height: 1.85;
}

body:not([data-page="index"]) .policy-content .demo-fees {
  max-width: 560px;
  padding: 24px;
  background: var(--sf-flow-lavender);
}

body:not([data-page="index"]) .policy-links {
  padding: 20px 22px 20px 40px;
  border-radius: 12px;
  background: #eff7f2;
}

body:not([data-page="index"]) .policy-links a,
body:not([data-page="index"]) .text-link,
body:not([data-page="index"]) .terms-inline a {
  color: var(--sf-flow-ink);
}

body:not([data-page="index"]) > .preview-footer {
  padding-block: 26px;
  border-color: var(--sf-flow-line);
  color: var(--sf-flow-muted);
  background: transparent;
}

body:not([data-page="index"]) .preview-footer a,
body:not([data-page="index"]) .preview-footer button {
  color: var(--sf-flow-ink);
}

/* The staged application retains its existing panels and step transitions. */
body.sf-card-onboarding:not([data-page="index"]) {
  --sfob-navy: #202023;
  --sfob-ink: #202023;
  --sfob-muted: #60616c;
  --sfob-blue: #202023;
  --sfob-line: #e3e3e9;
  --sfob-surface: #f5f3fb;
  background: var(--sf-flow-paper);
}

body.sf-card-onboarding:not([data-page="index"]) > main {
  padding: 32px 40px 48px;
  background: var(--sf-flow-paper);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-layout {
  max-width: 1280px;
  margin-inline: auto;
  grid-template-columns: minmax(280px, .38fr) minmax(0, .62fr);
  gap: 32px;
  align-items: stretch;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-card-summary {
  padding: 36px 28px;
  border-radius: 18px;
  color: var(--sf-flow-ink);
  background: var(--sf-flow-lavender);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-brand-message h2 {
  max-width: 14ch;
  color: var(--sf-flow-ink);
  font-size: clamp(31px, 3vw, 41px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.04em;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-brand-message > p {
  margin-block: 22px 32px;
  color: #5d576b;
  font-size: 15px;
  line-height: 1.75;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-selected-card {
  padding: 0;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-selected-card .card-demo-caption {
  margin-top: 16px;
  color: #5d576b;
  font-size: 12px;
  line-height: 1.65;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title {
  margin-top: 30px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title h3 {
  color: var(--sf-flow-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.025em;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title p,
body.sf-card-onboarding:not([data-page="index"]) .sfob-side-note p {
  color: #5d576b;
  font-size: 12px;
  line-height: 1.8;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-side-links {
  margin-top: 22px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-side-links a,
body.sf-card-onboarding:not([data-page="index"]) .sfob-side-links button {
  min-height: 48px;
  color: var(--sf-flow-ink);
  font-size: 14px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-side-note {
  margin-top: 28px;
  padding-top: 24px;
  border-color: #d0c6e8;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-side-note > .sfob-icon {
  color: #686075;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-workspace {
  border: 1px solid var(--sf-flow-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome {
  padding: 50px 34px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome h1 {
  color: var(--sf-flow-ink);
  font-size: clamp(35px, 3.5vw, 47px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.045em;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome-intro > p {
  margin-top: 20px;
  color: var(--sf-flow-muted);
  font-size: 16px;
  line-height: 1.75;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tiles {
  gap: 14px;
  margin-top: 36px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile {
  min-height: 225px;
  padding: 22px 18px;
  border-radius: 12px;
  color: var(--sf-flow-ink);
  background: var(--sf-flow-lavender);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-1 {
  background: var(--sf-flow-blush);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-2 {
  background: var(--sf-flow-mint);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile:not(:disabled):hover {
  background: #ddd5fa;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile:disabled {
  color: #696373;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-top,
body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-copy,
body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-link {
  color: inherit;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile > strong {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.025em;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-copy {
  font-size: 12px;
  line-height: 1.75;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome-note {
  max-width: 52ch;
  color: var(--sf-flow-muted);
  font-size: 12px;
  line-height: 1.8;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-panel {
  padding: 24px 36px 0;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-screen-count {
  color: var(--sf-flow-ink);
  font-size: 12px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-screen-count > span {
  color: var(--sf-flow-muted);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-close {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  color: var(--sf-flow-ink);
  background: #f4f1fc;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-close:hover {
  background: var(--sf-flow-lavender);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading {
  margin: 32px auto 38px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading h1 {
  color: var(--sf-flow-ink);
  font-size: clamp(31px, 2.8vw, 40px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.04em;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading > p {
  margin-top: 17px;
  color: var(--sf-flow-muted);
  font-size: 14px;
  line-height: 1.8;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-group-label,
body.sf-card-onboarding:not([data-page="index"]) .sfob-mobile-field > label,
body.sf-card-onboarding:not([data-page="index"]) .sfob-occupations legend {
  color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-field > label,
body.sf-card-onboarding:not([data-page="index"]) .sfob-field small,
body.sf-card-onboarding:not([data-page="index"]) .sfob-field-note,
body.sf-card-onboarding:not([data-page="index"]) .sfob-consent,
body.sf-card-onboarding:not([data-page="index"]) .sfob-save-note {
  color: var(--sf-flow-muted);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-field input,
body.sf-card-onboarding:not([data-page="index"]) .sfob-field select {
  min-height: 52px;
  border-bottom-color: #d2cddf;
  color: var(--sf-flow-ink);
  background: #fff;
  font-size: 16px;
  caret-color: var(--sf-flow-ink);
  accent-color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-field input[readonly] {
  color: #60616c;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-phone {
  border-color: #d2cddf;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-phone > span {
  color: var(--sf-flow-muted);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-consent > input,
body.sf-card-onboarding:not([data-page="index"]) .sfob-occupations input {
  accent-color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-inline-reference a,
body.sf-card-onboarding:not([data-page="index"]) .sfob-consent a,
body.sf-card-onboarding:not([data-page="index"]) .sfob-text-button,
body.sf-card-onboarding:not([data-page="index"]) .sfob-back,
body.sf-card-onboarding:not([data-page="index"]) .sfob-review-tools > button {
  color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-form-actions {
  margin-top: 30px;
  padding-top: 24px;
  border-color: var(--sf-flow-line);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-form-actions > .button {
  min-height: 52px;
  padding: 14px 25px;
  border-radius: 999px;
  font-size: 14px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-save-note {
  margin-block: 20px 28px;
  font-size: 11px;
  line-height: 1.75;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-code-destination {
  color: var(--sf-flow-muted);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-code-destination > strong {
  color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-field .sfob-otp {
  font-size: 28px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-fact {
  padding: 20px;
  border-radius: 12px;
  color: var(--sf-flow-ink);
  background: #f3efff;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-fact p {
  color: #5d576b;
  font-size: 13px;
  line-height: 1.75;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-occupations label {
  min-height: 60px;
  padding: 16px;
  border: 1px solid #ddd8e9;
  border-radius: 12px;
  color: var(--sf-flow-ink);
  background: #fff;
  font-size: 14px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-occupations label:has(input:checked) {
  border-color: var(--sf-flow-ink);
  background: var(--sf-flow-lavender);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-identity-placeholder {
  padding: 22px;
  border: 0;
  border-radius: 12px;
  background: var(--sf-flow-blush);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-identity-placeholder > .sfob-icon,
body.sf-card-onboarding:not([data-page="index"]) .sfob-identity-placeholder strong {
  color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-identity-placeholder p {
  color: #705b64;
  font-size: 13px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-review > div {
  padding-block: 15px;
  border-color: var(--sf-flow-line);
  font-size: 14px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-review dt {
  color: var(--sf-flow-muted);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-review dd {
  color: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-progress {
  padding: 20px;
  border-top: 1px solid var(--sf-flow-line);
  background: #faf9fd;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-progress > ol {
  gap: 10px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-progress button {
  min-height: 54px;
  padding: 13px 15px;
  border-radius: 999px;
  color: #66616f;
  background: #eeeaf6;
  font-size: 12px;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-progress button:disabled {
  color: #76717d;
  background: #f0edf5;
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-progress .sfob-current button {
  color: #fff;
  background: var(--sf-flow-ink);
}

body.sf-card-onboarding:not([data-page="index"]) .sfob-progress .sfob-done button {
  color: #345345;
  background: var(--sf-flow-mint);
}

body:not([data-page="index"]) :is(a, button, input, select):focus-visible,
body.sf-card-onboarding:not([data-page="index"]) :is(a, button, input, select):focus-visible,
body.sf-card-onboarding:not([data-page="index"]) .sfob-card-summary :is(a, button):focus-visible {
  outline: 2px solid var(--sf-flow-ink);
  outline-offset: 4px;
}

/* Underlined form fields keep a line-based focus state instead of a box. */
.demo-applicant-note {
  display: block;
  margin-top: 4px;
  color: #60616c;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
}

body.playful-storefront.sf-card-onboarding:not([data-page="index"]) .sfob-field :is(input, select):focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom: 2px solid var(--sf-flow-ink, #202023);
}

body.playful-storefront.sf-card-onboarding:not([data-page="index"]) .sfob-phone:focus-within {
  border-bottom: 2px solid var(--sf-flow-ink, #202023);
}

body.playful-storefront.sf-card-onboarding:not([data-page="index"]) .sfob-phone input:focus-visible {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  body.sf-card-onboarding:not([data-page="index"]) .sfob-layout {
    grid-template-columns: minmax(230px, .34fr) minmax(0, .66fr);
    gap: 24px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-summary {
    padding: 30px 24px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-panel {
    padding-inline: 28px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome {
    padding-inline: 28px;
  }
}

@media (max-width: 900px) {
  body.sf-card-onboarding:not([data-page="index"]) > main {
    padding-inline: 24px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 20px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-summary {
    padding: 28px 20px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-brand-message h2 {
    font-size: 31px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title h3 {
    font-size: 18px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile {
    min-height: 116px;
    padding: 18px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile > strong {
    font-size: 17px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading h1 {
    font-size: 31px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-progress {
    padding: 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-progress button {
    padding-inline: 11px;
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  body:not([data-page="index"]) > main {
    padding-top: 28px;
    padding-bottom: 40px;
  }

  body:not([data-page="index"]) .application-page-heading h1 {
    font-size: 34px !important;
  }

  body:not([data-page="index"]) .application-page-heading > p {
    font-size: 15px;
  }

  body:not([data-page="index"]) .decision {
    padding: 22px;
  }

  body:not([data-page="index"]) .decision h2 {
    font-size: 24px;
  }

  body:not([data-page="index"]) .policy-content > h2 {
    font-size: 25px;
  }

  body:not([data-page="index"]) #live-card {
    padding: 28px 20px;
  }

  body.sf-card-onboarding:not([data-page="index"]) > .onboarding-header {
    min-height: 82px;
    padding-inline: 20px;
  }

  body.sf-card-onboarding:not([data-page="index"]) > main {
    padding: 0 0 32px;
    background: var(--sf-flow-paper);
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-summary {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px 20px;
    padding: 26px 20px;
    border-radius: 0;
    background: var(--sf-flow-lavender);
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title {
    margin-top: 0;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title h3 {
    font-size: 19px;
    line-height: 1.3;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title p {
    margin-top: 6px;
    font-size: 11px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-side-links {
    margin-top: 0;
    gap: 4px 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-side-links a,
  body.sf-card-onboarding:not([data-page="index"]) .sfob-side-links button {
    min-height: 44px;
    font-size: 12px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-workspace {
    margin-inline: 20px;
    border-radius: 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome {
    min-height: 0;
    padding: 38px 24px 32px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome h1 {
    font-size: 36px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome-intro > p {
    font-size: 15px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tiles {
    gap: 12px;
    margin-top: 30px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-stage-tile {
    min-height: 124px;
    padding: 20px 18px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-tile-link {
    padding-top: 6px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-panel {
    padding: 18px 22px 0;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading {
    margin: 27px 0 32px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading h1 {
    font-size: 32px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading > p {
    margin-top: 16px;
    font-size: 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-field {
    margin-bottom: 25px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-name-grid {
    column-gap: 16px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-consent {
    font-size: 12px;
    line-height: 1.85;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-actions {
    gap: 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-actions > .button {
    min-width: 150px;
    max-width: 78%;
    padding: 14px 20px;
    font-size: 13px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-review > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 12px;
    font-size: 13px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-progress {
    padding: 16px 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-progress > ol {
    gap: 8px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-progress button {
    min-height: 80px;
    padding: 14px 11px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.5;
  }

  body.sf-card-onboarding:not([data-page="index"]) > .preview-footer {
    width: calc(100% - 40px);
    padding-block: 18px;
    background: transparent;
  }
}

@media (max-width: 420px) {
  body:not([data-page="index"]) .demo-fees {
    padding: 20px;
  }

  body:not([data-page="index"]) .demo-fees dl > div {
    font-size: 13px;
  }

  body:not([data-page="index"]) .demo-order-actions > .button {
    padding-inline: 18px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-actions {
    flex-wrap: wrap;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-actions > .button {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-progress button {
    padding-inline: 8px;
  }
}

@media (max-width: 360px) {
  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-summary {
    grid-template-columns: 94px minmax(0, 1fr);
    padding-inline: 16px;
    column-gap: 14px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-card-title h3 {
    font-size: 17px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-workspace {
    margin-inline: 16px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-panel,
  body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome {
    padding-inline: 20px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-welcome h1 {
    font-size: 32px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-form-heading h1 {
    font-size: 29px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-name-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-review > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  body.sf-card-onboarding:not([data-page="index"]) .sfob-review dd {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-page="index"]) *,
  body:not([data-page="index"]) *::before,
  body:not([data-page="index"]) *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}