.how-it-works-panel {
      width: min(960px, calc(100% - 32px));
      max-width: none;
      max-height: calc(100dvh - 32px);
      margin: auto;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--fg);
      background: var(--bg-deep);
      box-shadow: 0 32px 110px oklch(0% 0 0 / 0.58), inset 0 1px 0 oklch(100% 0 0 / 0.05);
      overflow: hidden;
    }
    .how-it-works-panel::backdrop {
      background: oklch(7% 0.025 291.3 / 0.76);
      backdrop-filter: blur(10px);
    }
    .how-modal-shell {
      position: relative;
      max-height: calc(100dvh - 34px);
      padding: 30px;
      overflow: auto;
      overscroll-behavior: contain;
    }
    .how-modal-close {
      position: sticky;
      z-index: 4;
      top: 0;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin: 0 0 -44px auto;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--muted-strong);
      background: oklch(14.5% 0.043 291.3 / 0.9);
      box-shadow: 0 12px 28px oklch(0% 0 0 / 0.28);
      backdrop-filter: blur(14px);
      cursor: pointer;
      transition: color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .how-modal-close svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
    }
    .how-modal-close:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    .how-modal-close:active {
      transform: scale(0.97);
    }
    @media (hover: hover) and (pointer: fine) {
      .how-modal-close:hover {
        color: var(--fg);
        border-color: var(--border-strong);
      }
    }
    .how-panel-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr);
      gap: 48px;
      align-items: end;
      padding-bottom: 28px;
      padding-right: 58px;
    }
    .how-panel-header .section-kicker {
      margin-bottom: 12px;
    }
    .how-panel-header h3 {
      max-width: 16ch;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(32px, 4.5vw, 54px);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.025em;
    }
    .how-panel-header h3:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 8px;
      border-radius: 2px;
    }
    .how-panel-header > p,
    .how-panel-footer p,
    .step-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.58;
    }
    .how-flow {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .how-step {
      min-height: 154px;
      display: grid;
      grid-template-columns: 56px minmax(200px, 0.72fr) minmax(300px, 1fr);
      gap: 24px;
      align-items: center;
      padding: 22px 0;
    }
    .how-step + .how-step {
      border-top: 1px solid var(--border);
    }
    .step-number {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--muted-strong);
      background: oklch(100% 0 0 / 0.035);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
    }
    .is-decision .step-number {
      color: var(--fg);
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      box-shadow: 0 12px 30px oklch(60.56% 0.2189 292.72 / 0.24);
    }
    .step-copy h4 {
      margin: 0 0 8px;
      font-family: var(--font-display);
      font-size: 21px;
      line-height: 1.2;
      letter-spacing: -0.012em;
    }
    .step-demo {
      min-width: 0;
      min-height: 112px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: oklch(9% 0.035 291.3 / 0.5);
      box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
    }
    .tap-demo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 16px;
    }
    .nfc-card {
      width: 142px;
      height: 76px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 11px;
      border: 1px solid var(--border-strong);
      border-radius: 5px;
      background: var(--surface-strong);
      transform: rotate(-2deg);
    }
    .nfc-card span,
    .nfc-card b,
    .phone-demo b {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.08em;
    }
    .nfc-card b {
      align-self: flex-end;
      color: var(--muted);
    }
    .tap-demo > svg {
      width: 30px;
      stroke: var(--muted-strong);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
    }
    .phone-demo {
      width: 54px;
      height: 88px;
      display: grid;
      place-items: center;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: oklch(100% 0 0 / 0.055);
    }
    .phone-demo span {
      position: absolute;
      width: 18px;
      height: 3px;
      align-self: start;
      margin-top: 6px;
      border-radius: 999px;
      background: var(--border-strong);
    }
    .rating-demo {
      display: grid;
      align-content: center;
      gap: 13px;
      padding: 18px 22px;
    }
    .rating-demo > span:first-child {
      color: var(--muted-strong);
      font-size: 13px;
      letter-spacing: 0.01em;
    }
    .rating-stars {
      display: flex;
      gap: 8px;
    }
    .rating-stars svg {
      width: 24px;
      height: 24px;
      stroke: var(--muted-strong);
      stroke-width: 1.4;
      fill: oklch(100% 0 0 / 0.07);
    }
    .comment-line {
      width: min(100%, 280px);
      height: 8px;
      border-radius: 999px;
      background: var(--border);
    }
    .route-demo {
      display: grid;
      gap: 8px;
      padding: 14px;
    }
    .route-demo > div {
      min-width: 0;
      min-height: 38px;
      display: grid;
      grid-template-columns: minmax(92px, 0.62fr) 24px minmax(120px, 1fr);
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: oklch(100% 0 0 / 0.035);
    }
    .route-demo b,
    .route-demo small {
      overflow-wrap: anywhere;
      font-size: 12px;
      font-weight: 600;
    }
    .route-demo span {
      color: var(--muted);
      text-align: center;
    }
    .route-demo small {
      color: var(--muted-strong);
    }
    .feedback-demo {
      display: grid;
      align-content: center;
      gap: 9px;
      padding: 14px;
    }
    .feedback-demo > div {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      padding: 9px 11px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: oklch(100% 0 0 / 0.035);
    }
    .feedback-demo > div > span {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--success);
    }
    .feedback-demo p {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex: 1;
      margin: 0;
    }
    .feedback-demo b,
    .feedback-demo small {
      font-size: 12px;
      font-weight: 600;
    }
    .feedback-demo small {
      color: var(--muted);
    }
    .how-panel-footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
      padding-top: 28px;
    }
    .how-panel-footer p {
      max-width: 60ch;
      color: var(--muted-strong);
      font-size: 17px;
    }