.st-wrapper{ width:100%; display:flex; flex-direction:column; gap:16px; }

.st-grid{
  display:grid; gap:20px;
  grid-template-columns: 1fr;
}
@media (min-width:600px){ .st-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; } }
@media (min-width:900px){ .st-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; } }
/* Large desktop: always 3 columns (3x2 for six items) */
@media (min-width:1200px){ .st-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Variants
   - default: neutral/paper cards
   - action, primary, ghost: token-driven tonal ramps by index
*/

/* No borders for step cards per spec */
.st-wrapper .cardc--step{ border: none; }

/* When steps render bullet points, indent the list slightly */
.st-wrapper .cardc-step-list {
  list-style-type: none;
   }

/* Shared per-index mapping */
.st-wrapper .cardc--step.step-i-1{ background: var(--st-step-bg-1, var(--paper)); }
.st-wrapper .cardc--step.step-i-2{ background: var(--st-step-bg-2, var(--paper)); }
.st-wrapper .cardc--step.step-i-3{ background: var(--st-step-bg-3, var(--paper)); }
.st-wrapper .cardc--step.step-i-4{ background: var(--st-step-bg-4, var(--paper)); }
.st-wrapper .cardc--step.step-i-5{ background: var(--st-step-bg-5, var(--paper)); }
.st-wrapper .cardc--step.step-i-6{ background: var(--st-step-bg-6, var(--paper)); }
.st-wrapper .cardc-step-num{ color: var(--st-num-color, var(--ink)); }

/* DEFAULT (paper) */
.st--default{
  --st-step-bg-1: var(--paper);
  --st-step-bg-2: var(--paper);
  --st-step-bg-3: var(--paper);
  --st-step-bg-4: var(--paper);
  --st-step-bg-5: var(--paper);
  --st-step-bg-6: var(--paper);
  --st-num-fill: var(--primary-super-light);
  --st-num-color: var(--primary-ultra-dark);
}

/* ACTION (1 strongest tint → 6 lightest tint) */
.st--action{
  --st-step-bg-1: var(--action-extra-light);
  --st-step-bg-2: var(--action-ultra-light);
  --st-step-bg-3: var(--action-super-light);
  --st-step-bg-4: var(--action-super-light);
  --st-step-bg-5: var(--paper);
  --st-step-bg-6: var(--paper);
  --st-num-fill: var(--action-super-light);
  --st-num-color: var(--action-ultra-dark);
}

/* PRIMARY (1 strongest tint → 6 lightest tint) */
.st--primary{
  --st-step-bg-1: var(--primary-super-light);
  --st-step-bg-2: var(--primary-super-light);
  --st-step-bg-3: var(--primary-super-light);
  --st-step-bg-4: var(--primary-super-light);
  --st-step-bg-5: var(--primary-super-light);
  --st-step-bg-6: var(--primary-super-light);
  --st-num-fill: var(--primary-ultra-light);
  --st-num-color: var(--primary-dark);
}

/* GHOST (neutral ramp) */
.st--ghost{
  --st-step-bg-1: var(--ghost-super-light);
  --st-step-bg-2: var(--ghost-super-light);
  --st-step-bg-3: var(--ghost-super-light);
  --st-step-bg-4: var(--ghost-super-light);
  --st-step-bg-5: var(--ghost-super-light);
  --st-step-bg-6: var(--ghost-super-light);
  --st-num-fill: var(--ghost-ultra-light);
  --st-num-color: var(--ghost-extra-dark);
}