/* Compact phone cards keep the shared timeline and expandable detail drawers.
   The repeated section ID overrides the original theme geometry only here;
   desktop layout, theme surfaces and font families remain in their own files. */
@media (max-width: 600px) {
  html body #how-it-works#how-it-works .process-vertical-roadmap {
    gap: 12px!important;
  }

  html body #how-it-works#how-it-works .process-vertical-step {
    grid-template-columns: 38px minmax(0,1fr)!important;
    min-height: 0!important;
    gap: 10px!important;
  }

  html body #how-it-works#how-it-works .process-vertical-node {
    width: 32px!important;
    height: 32px!important;
  }

  html body #how-it-works#how-it-works .process-vertical-step .process-grid-card {
    display: grid!important;
    grid-column: 2!important;
    grid-row: 1!important;
    grid-template-columns: 36px minmax(0,1fr)!important;
    grid-template-rows: auto auto auto!important;
    align-content: start!important;
    align-items: center!important;
    column-gap: 10px!important;
    row-gap: 0!important;
    width: 100%!important;
    min-width: 0!important;
    min-height: 0!important;
    height: auto!important;
    padding: 14px 14px 8px!important;
    border-radius: 16px!important;
  }

  html body #how-it-works#how-it-works .process-card-top {
    grid-area: 1 / 1!important;
    align-self: center!important;
    margin: 0!important;
    min-width: 0!important;
  }

  html body #how-it-works#how-it-works .process-icon {
    width: 36px!important;
    height: 36px!important;
    border-radius: 10px!important;
  }

  html body #how-it-works#how-it-works .process-icon svg {
    width: 19px!important;
    height: 19px!important;
  }

  html body #how-it-works#how-it-works .process-vertical-step .process-grid-card h3 {
    grid-area: 1 / 2!important;
    min-width: 0!important;
    margin: 0!important;
    font-size: 16px!important;
    line-height: 1.25!important;
    letter-spacing: -.025em!important;
    text-align: left!important;
    overflow-wrap: normal;
  }

  html body #how-it-works#how-it-works .process-drawer-toggle {
    grid-area: 2 / 1 / 3 / -1!important;
    width: 100%!important;
    min-width: 0!important;
    min-height: 44px!important;
    margin: 10px 0 0!important;
    padding: 0!important;
    gap: 8px!important;
    font-size: 9.5px!important;
    line-height: 1.3!important;
    letter-spacing: .08em!important;
  }

  html body #how-it-works#how-it-works .process-drawer-toggle i {
    width: 22px!important;
    height: 22px!important;
    flex-basis: 22px!important;
  }

  html body #how-it-works#how-it-works .process-drawer {
    grid-area: 3 / 1 / 4 / -1!important;
    min-width: 0!important;
  }

  html body #how-it-works#how-it-works .process-drawer-inner p {
    padding: 10px 0 5px!important;
    font-size: 13px!important;
    line-height: 1.6!important;
  }
}