.vp-how {
    --purple: #453685;
    --purple-mid: #5a4a9e;
    --purple-dark: #2c2358;
    --ink: #201a3c;
    --gray: #6b6680;
    --line: #e5e1f0;
    --soft: #f6f4fb;

    font-family: 'Roboto', sans-serif;
    padding: 0;
  }

  .vp-how * {
    box-sizing: border-box;
  }

  .vp-how__inner {
    max-width: 1120px;
    margin: 0 auto;
  }

  .vp-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    position: relative;
  }

  .vp-phase {
    --phase-color: var(--purple);
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 26px 24px 24px;
    box-shadow: 0 18px 42px rgba(69,54,133,.09);
    overflow: hidden;
  }

  .vp-phase::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 4px solid var(--phase-color);
    pointer-events: none;
  }

  .vp-phase::after {
    content: "";
    position: absolute;
    right: -54px;
    top: -54px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, color-mix(in srgb, var(--phase-color) 18%, transparent), transparent 70%);
    pointer-events: none;
  }

  .vp-phase__top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
  }

  .vp-phase__dot {
    width: 54px;
    height: 54px;
    background: var(--phase-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: rotate(45deg);
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(69,54,133,.24);
  }

  .vp-phase__dot span {
    transform: rotate(-45deg);
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    font-size: 24px;
  }

  .vp-phase__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .vp-phase__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--phase-color);
  }

  .vp-phase__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 1.1;
    color: var(--ink);
  }

  .vp-phase__items {
    display: flex;
    flex-direction: column;
    gap: 11px;
    position: relative;
    z-index: 1;
  }

  .vp-phase__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(69,54,133,.1);
    border-radius: 16px;
    background: rgba(69,54,133,.035);
  }

  .vp-phase__item-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #fff;
    color: var(--phase-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 14px rgba(69,54,133,.08);
  }

  .vp-phase__item-icon svg {
    width: 15px;
    height: 15px;
  }

  .vp-phase__item-text {
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--ink);
  }

  .vp-phase--pre {
    --phase-color: var(--purple-mid);
  }

  .vp-phase--live {
    --phase-color: var(--purple);
  }

  .vp-phase--post {
    --phase-color: var(--purple-dark);
  }

  @media (min-width: 861px) {
    .vp-phase:not(:last-child)::marker {
      content: "";
    }

    .vp-phase:not(:last-child) .vp-phase__connector {
      position: absolute;
      top: 52px;
      right: -24px;
      width: 30px;
      height: 2px;
      background: var(--line);
      z-index: 4;
    }

    .vp-phase:not(:last-child) .vp-phase__connector::after {
      content: "";
      position: absolute;
      right: -4px;
      top: -4px;
      width: 10px;
      height: 10px;
      border-top: 2px solid var(--line);
      border-right: 2px solid var(--line);
      transform: rotate(45deg);
      background: transparent;
    }
  }

  @media (max-width: 860px) {
    .vp-phases {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }

  @media (max-width: 520px) {
    .vp-phase {
      padding: 24px 20px 22px;
      border-radius: 22px;
    }

    .vp-phase__title {
      font-size: 21px;
    }
  }