/* ==========================================================================
   Feature walkthrough - screenshot paired with every explanation.
   A feature WITH an image becomes a wide alternating row;
   one without falls back to a compact card so the grid never breaks.
   ========================================================================== */

.cs-flow {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* ---------- wide row: screenshot + explanation ---------- */
.cs-row {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--spacing-xl);
    align-items: center;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}
.cs-row--flip .cs-row-media { order: 2; }

.cs-row-media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    line-height: 0;
}
.cs-row-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- portrait row: phone screenshot ----------
   A phone capture is ~0.46 ratio. Dropped into the wide desktop grid it
   would stretch to ~900px tall, so it becomes a centred device column
   with a bezel instead, and the copy keeps the remaining space.        */
.cs-row--portrait {
    grid-template-columns: 300px 1fr;
    align-items: center;
}
.cs-row--portrait .cs-row-media {
    width: 100%;
    max-width: 300px;
    justify-self: center;
    align-self: center;
    padding: 10px;
    background: #0A1A18;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    box-shadow: 0 20px 44px rgba(4, 26, 24, .30);
}
.cs-row--portrait .cs-row-media img {
    border-radius: 18px;
}

/* ---------- the text half ---------- */
.cs-row-body { min-width: 0; }

.cs-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.cs-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-secondary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
.cs-row-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--color-on-surface);
    margin: 0;
}
.cs-row-desc {
    font-size: 15px;
    line-height: 1.72;
    color: var(--color-on-surface-variant);
    margin: 0;
}
.cs-row-shot {
    display: inline-block;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

/* ---------- compact cards (no screenshot) ---------- */
.cs-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--spacing-md);
}
.cs-compact .cs-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cs-compact .cs-card-num { margin-bottom: 10px; }
.cs-compact .cs-card-desc { font-size: 14.5px; }

/* ---------- legend note ---------- */
.cs-note {
    display: flex;
    gap: 10px;
    padding: 13px var(--spacing-md);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-secondary) 7%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-secondary) 22%, transparent);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-lg);
}
.cs-note strong { color: var(--color-on-surface); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .cs-row,
    .cs-row--flip .cs-row-media { grid-template-columns: 1fr; order: 0; }
    .cs-row { gap: var(--spacing-md); padding: var(--spacing-md); }
    .cs-row-title { font-size: 1.1rem; }

    /* portrait stacks under the copy and stays phone-sized */
    .cs-row--portrait { grid-template-columns: 1fr; }
    .cs-row--portrait .cs-row-media {
        max-width: 240px;
        padding: 7px;
        border-radius: 20px;
    }
    .cs-row--portrait .cs-row-media img { border-radius: 14px; }
}