/* ==========================================================================
   How Jules Works — page-specific overrides only
   All base styles (hero, bento, faq, waveform) come from index.css
   ========================================================================== */

/* Steps grid: 3-column bento so large (span 2) + small (span 1) tile properly */
.how-steps-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Callout grid: 3 equal columns */
.how-callout-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Example call card — the big quote */
.how-example-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.how-example-quote {
    font-family: var(--font-serif);
    font-size: 32px;
    line-height: 1.25;
    color: var(--text-primary);
    margin-top: 8px;
}

/* Mini waveform inside the example card */
.how-mini-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 48px;
    margin-top: 8px;
}

.how-mini-waveform .wave-bar {
    width: 3px;
    opacity: 0.5;
}

.how-mini-waveform .wave-bar:nth-child(1) { height: 12px; animation-duration: 1.1s; animation-delay: -0.2s; }
.how-mini-waveform .wave-bar:nth-child(2) { height: 24px; animation-duration: 1.3s; animation-delay: -0.4s; }
.how-mini-waveform .wave-bar:nth-child(3) { height: 32px; animation-duration: 1.0s; animation-delay: -0.6s; }
.how-mini-waveform .wave-bar:nth-child(4) { height: 18px; animation-duration: 1.4s; animation-delay: -0.3s; }
.how-mini-waveform .wave-bar:nth-child(5) { height: 36px; animation-duration: 1.2s; animation-delay: -0.7s; }
.how-mini-waveform .wave-bar:nth-child(6) { height: 28px; animation-duration: 0.9s; animation-delay: -0.5s; }
.how-mini-waveform .wave-bar:nth-child(7) { height: 20px; animation-duration: 1.5s; animation-delay: -0.2s; }
.how-mini-waveform .wave-bar:nth-child(8) { height: 40px; animation-duration: 1.1s; animation-delay: -0.8s; }
.how-mini-waveform .wave-bar:nth-child(9) { height: 16px; animation-duration: 1.3s; animation-delay: -0.1s; }
.how-mini-waveform .wave-bar:nth-child(10) { height: 30px; animation-duration: 1.0s; animation-delay: -0.4s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .how-steps-grid {
        grid-template-columns: 1fr;
    }

    .how-callout-grid {
        grid-template-columns: 1fr;
    }

    .how-example-quote {
        font-size: 26px;
    }

    .how-example-card {
        max-width: 100% !important;
    }
}