/* Steps section, v3 — 2026-08-14 (supersedes steps-polish-20260814b.css;
   that file stays on disk, immutable).

   v2 was rejected on sight: 64px chips floating in a sea of dark with a faint
   dashed line read as sparse, and the step-3 "progress lines" icon collapsed
   into a hamburger-menu glyph at small size.

   v3 gives each step substance and one editorial signature:

   - each step is a real card, the same card language as the rest of the page
     (var(--card), border, radius 18, shadow, the feature-card hover lift);
   - the sequence is carried by a HUGE ghost numeral (۱ ۲ ۳ / 1 2 3 at 120px,
     14% primary) bleeding off the card's top corner — cropped by the card's
     own overflow, painted between the card background and the content via
     isolation + z-index:-1. It replaces both the tiny badge and the dashed
     line: the order is now the loudest quiet thing in the section;
   - chips grow to 72px in the established glass style.

   Figures follow the interface language automatically because the numeral
   comes from the lang file (۱/1). Colour only from theme tokens; color-mix
   fallbacks leave a plain card on old browsers. */

.steps-grid {
    gap: 18px;
}

.step {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 32px 22px 26px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px var(--ring);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
    .step,
    .step:hover {
        transform: none;
        transition: none;
    }
}

.step-ghost {
    position: absolute;
    z-index: -1;
    top: -26px;
    inset-inline-start: 2px;
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--primary) 14%, transparent);
    pointer-events: none;
    user-select: none;
}

.step-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    color: color-mix(in srgb, var(--primary) 62%, var(--fg));
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--primary) 22%, transparent),
            color-mix(in srgb, var(--accent) 9%, transparent)
        ),
        var(--card);
    border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 9%, transparent);
}

.step h3 {
    margin: 18px 0 8px;
}

.step p {
    max-width: 280px;
    margin-inline: auto;
    text-wrap: balance;
}