/* ==========================================================================
   Page: packages  (site/modules/packages/index)
   --------------------------------------------------------------------------
   «How packages work» — three numbered steps joined by the seven-line rule
   — then the cards (css/components/package-card.css) and the payment note.
   ========================================================================== */

.pkg-how { padding-block: var(--space-12) 0; text-align: center; }
.pkg-how__eyebrow { justify-content: center; }
.pkg-how__title { margin-top: var(--space-2); font-size: var(--fs-2xl); }
.pkg-how__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
    counter-reset: step;
}
.pkg-how__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pkg-how__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--second-tint);
    box-shadow: 0 0 0 5px var(--paper), 0 0 0 6.5px var(--second);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
}
.pkg-how__step-title { font-size: var(--fs-lg); }
.pkg-how__step p { max-width: 30ch; margin: var(--space-1) auto 0; color: var(--ink-soft); line-height: 1.8; }

@media (min-width: 760px) {
    .pkg-how__step:not(:last-child)::after {      /* the line joining the steps */
        content: "";
        position: absolute;
        top: 26px;
        inset-inline-start: calc(50% + 40px);
        width: calc(100% - 80px + var(--space-6));
        border-top: 2px dashed var(--line-strong);
    }
}

.pkg-section { padding-top: var(--space-12); }
.pkg-section .pkg-grid { padding-top: var(--space-3); }   /* room for the featured badge */
.pkg-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); color: var(--ink-soft); font-size: var(--fs-sm); text-align: center; }