1  .workflowContainer {
  2    margin: 2rem 0;
  3  }
  4  
  5  .workflowTitle {
  6    font-size: 1.25rem;
  7    margin-bottom: 2rem;
  8    color: var(--ifm-color-emphasis-900);
  9    text-align: center;
 10    font-weight: 600;
 11  }
 12  
 13  /* Layout containers */
 14  .workflowStandalone {
 15    display: block;
 16  }
 17  
 18  .stepsContainer {
 19    display: flex;
 20    flex-direction: column;
 21    gap: 0;
 22    margin: 0 auto;
 23  }
 24  
 25  .screenshotContainer {
 26    display: flex;
 27    justify-content: center;
 28    align-items: flex-start;
 29    padding: 1.5rem;
 30    background: var(--ifm-background-surface-color);
 31    border-radius: 12px;
 32    border: 1px solid var(--ifm-color-emphasis-200);
 33    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 34    margin-bottom: 1rem;
 35    max-width: 900px;
 36    margin-left: auto;
 37    margin-right: auto;
 38  }
 39  
 40  .screenshotImage {
 41    max-width: 100%;
 42    height: auto;
 43    border-radius: 8px;
 44    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 45  }
 46  
 47  .stepItem {
 48    display: flex;
 49    align-items: flex-start;
 50    gap: 1rem;
 51    position: relative;
 52  }
 53  
 54  .stepIndicator {
 55    display: flex;
 56    flex-direction: column;
 57    align-items: center;
 58    flex-shrink: 0;
 59    position: relative;
 60  }
 61  
 62  .stepNumber {
 63    display: flex;
 64    align-items: center;
 65    justify-content: center;
 66    width: 32px;
 67    height: 32px;
 68    border-radius: 50%;
 69    background: #0194e2;
 70    color: white;
 71    font-weight: 600;
 72    font-size: 0.9rem;
 73    margin-bottom: 0.5rem;
 74    z-index: 2;
 75    position: relative;
 76  }
 77  
 78  .stepNumberText {
 79    line-height: 1;
 80  }
 81  
 82  .stepConnector {
 83    width: 2px;
 84    height: 3rem;
 85    background: #b3e0f7;
 86    margin-top: -0.5rem;
 87    margin-bottom: 0.5rem;
 88  }
 89  
 90  .stepContent {
 91    flex: 1;
 92    padding-bottom: 2rem;
 93  }
 94  
 95  .stepTitle {
 96    font-size: 1.1rem;
 97    font-weight: 600;
 98    margin: 0 0 0.5rem 0;
 99    color: var(--ifm-color-emphasis-900);
100    line-height: 1.3;
101  }
102  
103  .stepDescription {
104    color: var(--ifm-color-emphasis-700);
105    font-size: 0.95rem;
106    line-height: 1.6;
107    margin: 0;
108  }
109  
110  /* Remove connector from last step */
111  .stepItem:last-child .stepConnector {
112    display: none;
113  }
114  
115  .stepItem:last-child .stepContent {
116    padding-bottom: 0;
117  }
118  
119  /* Responsive design */
120  @media (max-width: 768px) {
121    .screenshotContainer {
122      padding: 1rem;
123      margin-bottom: 1rem;
124    }
125  
126    .stepsContainer {
127      max-width: 100%;
128      padding: 0 1rem;
129    }
130  
131    .stepContent {
132      padding-bottom: 1.5rem;
133    }
134  
135    .stepNumber {
136      width: 28px;
137      height: 28px;
138      font-size: 0.85rem;
139    }
140  
141    .stepTitle {
142      font-size: 1rem;
143    }
144  
145    .stepDescription {
146      font-size: 0.9rem;
147    }
148  }