/* Canonical model/photo stepper. Change this owner and verify both routes together. */
@layer components {
  .fl-workflow-stepper {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch; gap: 28px; width: 100%; max-width: none;
    margin: 0 0 26px; padding: 0 0 24px; border: 0;
    border-bottom: 1px solid var(--fl-color-border); border-radius: 0; background: transparent;
    scroll-margin-top: 108px;
  }
  .fl-workflow-stepper > .fl-workflow-step {
    position: relative; display: flex; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 12px; min-width: 0; min-height: 48px;
    margin: 0; padding: 4px 0; color: var(--fl-color-text-muted); border: 0;
    border-radius: 0; background: transparent; box-shadow: none; font: inherit;
    font-size: 14px; font-weight: 700; line-height: 1.5; white-space: normal; text-align: left; cursor: pointer;
  }
  .fl-workflow-step:not(:last-child)::after {
    content: ""; flex: 1; min-width: 12px; height: 1px; margin-left: 8px;
    background: var(--fl-color-border);
  }
  .fl-workflow-number {
    display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: var(--fl-color-text-muted); background: #e7edf6;
    font-size: 16px; font-weight: 900; line-height: 1.5;
  }
  .fl-workflow-copy { display: grid; align-items: normal; justify-content: normal; gap: 3px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: normal; text-align: left; }
  .fl-workflow-title { display: block; align-items: normal; justify-content: normal; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: inherit; }
  .fl-workflow-help { color: var(--fl-color-text-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
  .fl-workflow-stepper > .fl-workflow-step.is-current { color: var(--fl-color-brand); }
  .fl-workflow-step.is-current .fl-workflow-number { color: #fff; background: var(--fl-color-brand); }
  .fl-workflow-step.is-complete .fl-workflow-number { color: var(--fl-color-brand); background: #e8f1ff; }
  .fl-workflow-stepper > .fl-workflow-step:hover:not(:disabled) { color: var(--fl-color-brand-hover); background: transparent; }
  .fl-workflow-step:focus-visible { outline: 3px solid var(--fl-color-brand); outline-offset: 4px; border-radius: 4px; }
  .fl-workflow-step:disabled { cursor: default; opacity: .6; }
  @media (max-width: 760px) {
    .fl-workflow-stepper { gap: 8px; margin-bottom: 20px; padding-bottom: 16px; }
    .fl-workflow-stepper > .fl-workflow-step { gap: 6px; }
    .fl-workflow-number { flex-basis: 36px; width: 36px; height: 36px; font-size: 14px; }
    .fl-workflow-title { font-size: 11px; }
    .fl-workflow-copy { font-size: 11px; }
    .fl-workflow-help { display: none; }
  }
  @media (max-width: 720px) {
    .fl-workflow-stepper > .fl-workflow-step { flex-direction: column; justify-content: flex-start; text-align: center; }
    .fl-workflow-copy { text-align: center; }
    .fl-workflow-step:not(:last-child)::after {
      position: absolute; top: 22px; left: calc(50% + 24px);
      width: calc(100% - 36px); min-width: 0; margin: 0;
    }
  }
}