/**
 * @file
 * Getting Started Step — numbered sequence row.
 *
 * Desktop Figma 28963:66800 — 24px row gap, 195.52px lockup, 182×76 STEP art,
 * 12px lockup gap, 1px vertical rule, 12px copy gap, H4 22px / body 20px.
 * Mobile — column stack, centered STEP art, hidden vertical rule, bottom divider.
 */

.layout-container {

  .getting-started-step {
    display: flex;
    align-items: center;
    gap: var(--gap-size-lg);
    width: 100%;
  }

  .getting-started-step__lockup {
    display: flex;
    flex: none;
    align-self: stretch;
    align-items: flex-start;
    gap: var(--var-sds-size-space-300);
    width: 12.22rem;
  }

  .getting-started-step__image {
    flex: none;
    width: 11.375rem;
    height: 4.75rem;
    object-fit: contain;
    object-position: left center;
  }

  .getting-started-step__rule {
    flex: none;
    align-self: stretch;
    width: var(--stroke-1);
    margin-inline-start: auto;
    background: var(--color-charcoal);
  }

  .getting-started-step__copy {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--var-sds-size-space-300);
    min-width: 0;
  }

  .getting-started-step__title,
  .getting-started-step__body,
  .getting-started-step__body p {
    margin: 0;
    color: var(--color-charcoal);
    font-family: var(--font-agenda);
    line-height: normal;
    font-feature-settings: "liga" 0;
  }

  .getting-started-step__title {
    font-size: var(--fs-22);
    font-weight: var(--font-weight-bold);
  }

  .getting-started-step--step-title-paragraph-layout .getting-started-step__title {
    max-width: 850px;
  }

  .getting-started-step__title a,
  .getting-started-step__body a {
    color: var(--color-dark-coral);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  .getting-started-step__body {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-normal);
  }

  .getting-started-step__body p {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-normal);
  }

  .getting-started-step__body sup {
    position: relative;
    top: 0.1em;
    font-size: 0.55em;
    line-height: 0;
    vertical-align: super;
  }

  .getting-started-step--divider {
    position: relative;
  }

  @media (max-width: 767px) {

    .getting-started-step {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--var-sds-size-space-300);
    }

    .getting-started-step__lockup {
      align-self: center;
      width: auto;
    }

    .getting-started-step__rule {
      display: none;
    }

    .getting-started-step__title {
      font-size: var(--fs-20);
    }

    .getting-started-step--divider {
      padding-bottom: var(--gap-size-md);
      margin-bottom: var(--gap-size-md);
    }

    .getting-started-step--divider::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: var(--stroke-1);
      background: rgba(81, 88, 97, 0.5);
    }
  }

}