.siw-main-view {
  .oie-enroll-webauthn,
  .oie-verify-webauthn {
    .uv-required-callout {
      margin: 20px 0;
      // TODO - clean up after OKTA-303528
      /* stylelint-disable declaration-no-important */
      padding: 7px 9px 7px 20px !important;
      /* stylelint-enable declaration-no-important */
      border: none;
      &:before {
        width: 10px;
      }
    }

    .okta-waiting-spinner {
      display: none;
    }

    .idx-webauthn-verify-text,
    .idx-webauthn-enroll-text {
      margin-bottom: 20px;
    }

    .setup-webauthn-residentkey-text {
      margin-bottom: 25px;
      .setup-webauthn-residentkey-link {
        color: $link-text-color;
      }
    }
  }
  .oie-webauthn-additional-instructions {
    .additional-instructions-title {
      margin-bottom: 24px;
      font-weight: bold;
    }
    .additional-instructions-callout {
      margin-bottom: 24px;
    }
  }

  // Passkey promotion splash: illustration + FAQ. Rendered by EnrollWebauthnView
  // (and reusable elsewhere) when the authenticator displayName is "Passkeys" or
  // a custom value. Scoped by class rather than parent so the splash can be
  // reused outside `.oie-enroll-webauthn` without style loss.
  .oie-passkey-splash-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  // Illustration: inline SVG picks up brand color via `currentColor`.
  // Default color is the widget's primary color; ColorsUtil overrides via
  // `#okta-sign-in.auth-container .passkey-promotion-illustration { color: ${colors.brand}; }`
  // when the customer sets `colors.brand`.
  .passkey-promotion-illustration {
    display: flex;
    justify-content: center;
    margin: 4px 0 24px;
    color: $primary-color;

    svg {
      width: 100%;
      // Natural viewBox width — caps upscaling beyond the design's intrinsic size.
      max-width: 350px;
      height: auto;
    }
  }

  .passkey-promotion-faq {
    margin-bottom: 16px;
  }

  .passkey-promotion-faq-title {
    margin: 16px 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    &:first-child {
      margin-top: 0;
    }
  }

  .passkey-promotion-faq-description {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.4;
  }
}