/* --- Minimal stepper styling (Bootstrap-friendly, dark-mode aware) --- */
    .stepper {
      --step-size: 44px;
      --line-thickness: 2px;
      --step-bg: var(--bs-body-bg);
      --step-fg: var(--bs-body-color);
      --step-accent: var(--bs-success);
      --line-color: var(--bs-border-color);
    }
    .stepper .step {
      position: relative;
      text-align: center;
    }
    .stepper .step__circle {
      width: var(--step-size);
      height: var(--step-size);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line-color);
      background: var(--step-bg);
      color: var(--step-fg);
      font-weight: 600;
    }
    .stepper .step__title {
      font-weight: 600;
      margin-top: .75rem;
      margin-bottom: .25rem;
    }
    .stepper .step__desc {
      font-size: .9375rem;
      color: var(--bs-secondary-color);
      max-width: 22rem;
      margin: 0 auto;
    }
    /* connector line for md+ (horizontal) */
    @media (min-width: 768px) {
      .stepper .step::after {
        content: "";
        position: absolute;
        top: calc(var(--step-size)/2);
        left: 50%;
        right: -50%;
        height: var(--line-thickness);
        background: linear-gradient(to right, var(--line-color), var(--line-color));
        transform: translateY(-50%);
        z-index: 0;
      }
      .stepper .step:last-child::after { display: none; }
    }
    /* vertical spacing for mobile (stacked) */
    @media (max-width: 767.98px) {
      .stepper .step { padding-bottom: 1rem; }
      .stepper .step:not(:last-child)::after {
        content: "";
        display: block;
        width: var(--line-thickness);
        height: 1.5rem;
        background: var(--line-color);
        margin: .5rem auto 0;
      }
    }
    /* highlight first-time flow (all steps shown as planned); 
       if you want to mark “completed”, swap number for the check svg below */
    .stepper .step--accent .step__circle {
      border-color: var(--step-accent);
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--step-accent) 12%, transparent);
    }
    .why-box {
      border: 1px dashed var(--bs-border-color);
      border-radius: .75rem;
      padding: .75rem 1rem;
      background: color-mix(in oklab, var(--bs-success) 6%, transparent);
    }