/* Keep the three-step guide in its compact, single-column layout on tablets. */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .how-modern .how-modern-step {
    display: block;
    padding: 34px 0 42px;
  }

  .how-modern .how-modern-num {
    font-size: clamp(110px, 30vw, 170px);
    line-height: .72;
    margin-bottom: 38px;
    padding: 0;
  }

  .how-modern .how-modern-step h3 {
    font-size: 30px;
    margin-bottom: 14px;
  }

  .how-modern .how-modern-step p {
    font-size: 18px;
    line-height: 1.55;
  }

  .how-modern .how-visual {
    width: 100%;
    margin-top: 36px;
  }

  .how-modern .how-plan-visual > div {
    padding: 14px 0;
  }

  .how-modern .how-plan-visual .active {
    padding: 14px 8px;
  }

  /* The order cards must also stack before the desktop three-column layout
     can make the whole page wider than the screen. */
  .checkout .plans.screen-plans {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 16px;
  }

  .checkout .plan {
    display: block;
    min-height: 0;
    border: 2px solid #e2e5eb !important;
    border-radius: 22px;
  }

  .checkout .plan.selected {
    border-color: #0869e8 !important;
  }

  .checkout .plan-toggle {
    padding: 24px 22px 10px;
    pointer-events: auto;
    cursor: pointer;
  }

  .checkout .plan-toggle i {
    display: block;
  }

  .checkout .plan-preview {
    display: block;
    padding: 10px 22px 24px;
  }

  .checkout .plan-details {
    display: none !important;
  }

  .checkout .plan.expanded .plan-details {
    display: block !important;
    padding: 0 22px 20px !important;
  }
}