* { box-sizing: border-box; }
  .flow-wrap {
    padding: 1.5rem 0.5rem 1rem;
    font-family: var(--font-sans, sans-serif);
    overflow-x: auto;
  }

  /* ── Steps row ── */
  .steps-row {
    display: flex;
    align-items: center;
    min-width: 700px;
  }
  
  .steps-row.filtered {
    min-width: 450px;
  }
  
  .step { flex: 1; min-width: 0; }
  .step-box {
    width: 100%;
    background: #1b2d49;
    color: #e7edec;
    border-radius: 6px;
    padding: 10px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 76px;
    justify-content: center;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
    text-decoration: none;
    transition: filter .15s;
  }
  .step-box:hover { filter: brightness(1.2);color:#fff; }
  .step-box.first  { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
  .step-box.last   { background:#1a6b55; color:#e7edec; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,10px 50%); }
  .step-box.both   { clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
  .step-letter { font-size:13px; font-weight:600; opacity:.7; margin-bottom:2px; }
  .step-label  { font-size:11px; line-height:1.3; }
   
  /* bg colors steps */ 
  .step-box.gold {background: #d1b738; color:#232323;} 
  .step-box.lightblue {background: #3a6e8a;}  
  .step-box.blue {background: #1b2d49;}  
  .step-box.green {background: #1a6b55;}  

  /* ── Groups row (desktop) ── */
  .groups-row {
    position: relative;
    min-width: 700px;
    height: 28px;
    margin-top: 8px;
  }
  .groups-row.filtered {
    min-width: 450px;
  }
  
  
  .group-item {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .group-line { height: 6px; border-radius: 5px; }
  .group-label {
    font-size: 11px;
    color: #666;
    /*white-space: nowrap; */
    text-decoration: none;
  }
  .group-label:hover { text-decoration: underline; }

  /* ── Mobile ── */
  @media (max-width: 850px) {
    .flow-wrap { overflow-x: visible; padding: .75rem .25rem .75rem; }
    .steps-row { flex-direction: column; align-items: stretch; min-width: 0; gap: 2px; }
    .groups-row { display: none; }

    .step-box, .step-box.first, .step-box.last, .step-box.both {
      clip-path: none !important;
      border-radius: 6px;
      min-height: 48px;
      padding: 8px 12px;
      flex-direction: row;
      text-align: left;
      gap: 10px;
    }
    .step-letter { opacity:.85; font-size:14px; margin-bottom:0; flex-shrink:0; }
    .step-label  { font-size:12px; }

    /* Group headings on mobile */
    .mobile-group-heading {
      display: block;
      font-size: 11px;
      font-weight: 600;
      padding: 10px 4px 3px;
      text-decoration: none;
    }
    .mobile-group-heading:hover { text-decoration: underline; }
    .mobile-group-heading.first-group { padding-top: 0; }
  }

  @media (min-width: 851px) {
    .mobile-group-heading { display: none; }
  }