.the-method { --space-the-method-sticky-top: calc(var(--size-header-compact) + 20px + var(--wp-admin--admin-bar--height, 0px)); }
.the-method__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-section-heading); margin-block-end: var(--space-section-content); }
.the-method__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 862px); gap: var(--space-method-columns); align-items: start; }
.the-method__layout--no-steps { grid-template-columns: minmax(0, 1fr); }
.the-method__steps { position: sticky; inset-block-start: var(--space-the-method-sticky-top); display: flex; flex-direction: column; gap: var(--space-method-steps); padding: 0; margin: 0; list-style: none; }
.the-method__step { display: flex; flex-direction: column; gap: var(--space-method-step-copy); padding-inline-start: var(--space-section-heading); border-inline-start: 2px solid transparent; }
.the-method__step--current { border-color: var(--color-trusted); }
.the-method__step-label { margin: 0; color: var(--color-method-muted); font-size: var(--fs-method-step); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.the-method__step--current .the-method__step-label { color: var(--color-trusted); }
.the-method__step-description { margin: 0; font-size: var(--fs-method-description); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.the-method__diagrams { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--space-method-cards); }
.the-method__diagram-group { display: contents; }
.the-method__mobile-step { display: none; }

/* The existing project switches to its mobile layout at 1024px. */
@media (max-width: 1023px) {
  .the-method__heading { align-items: center; text-align: center; }
  .the-method__highlight { display: block; }
  .the-method__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-method-cards); }
  .the-method__steps { display: none; }
  .the-method__diagrams { gap: var(--space-section-content); }
  .the-method__diagram-group { display: flex; min-inline-size: 0; flex-direction: column; gap: var(--space-method-cards); }
  .the-method__mobile-step { display: flex; }
  .the-method__step { align-items: center; padding-inline: 0; border: 0; text-align: center; }
}