/* ============================================================
   McKenna Consultants — AI Maturity Assessment
   Mobile / Responsive overrides
   ============================================================ */

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    /* ---- Nav ---- */

    .nav {
        padding: 0 1rem;
        height: 100px;
    }

    .nav-logo img {
        height: 70px;
        width: auto;
    }

    .nav-cta {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    /* ---- Hero ---- */

    .hero {
        padding: 2.5rem 1.25rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* ---- Main ---- */

    .main {
        padding: 0 1rem 1.5rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.35rem;
        margin: 1.75rem 0 0.75rem;
    }

    /* ---- Scoring Scale ---- */

    .scoring-scale {
        gap: 0.35rem;
    }

    .scoring-scale li {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* ---- Questions ---- */

    .question {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .question-text {
        width: 100%;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .question-scores {
        width: 100%;
    }

    .question-notes {
        width: 100%;
    }

    .question-notes > textarea {
        min-height: 60px;
    }

    /* ---- Section Headings ---- */

    .section-heading {
        margin: 1.5rem 0 1rem;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* ---- Buttons ---- */

    .actions-wrapper > button,
    .btn-primary {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }

    /* ---- Results ---- */

    .results-header {
        padding: 1.5rem;
    }

    .pyramid-level-callout {
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }

    .pyramid-level-badge {
        width: 64px;
        height: 64px;
    }

    .pyramid-level-number {
        font-size: 2rem;
    }

    .pyramid-visual {
        padding: 1.25rem;
    }

    .pyramid-bar {
        padding: 0.5rem 0.75rem;
    }

    .pyramid-bar-number {
        font-size: 1.1rem;
    }

    .pyramid-bar-label {
        font-size: 0.75rem;
    }

    .overall-score-callout {
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }

    .score-circle {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }

    .chart-and-data-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.25rem;
    }

    .chart-wrapper {
        width: 100%;
    }

    .data-wrapper {
        width: 100%;
    }

    table th,
    table td {
        padding: 0.5rem 0.65rem;
        font-size: 0.8rem;
    }

    .recommendation {
        padding: 0.875rem 1rem;
    }

    /* ---- Email / Send ---- */

    .send-to-email {
        padding: 1.25rem;
    }

    .email-address-wrapper input[type=text] {
        max-width: 100%;
    }

    /* ---- Landing Layout ---- */

    .landing-layout {
        flex-direction: column;
        padding: 1.5rem 1.25rem 2rem;
        gap: 1.5rem;
    }

    .landing-form {
        flex: none;
        width: 100%;
        position: static;
    }

    /* ---- Contact Gate ---- */

    .gate-page {
        padding: 1.5rem 1rem;
    }

    .gate-card {
        padding: 2rem 1.5rem;
    }

    .gate-card h1 {
        font-size: 1.4rem;
    }

    /* ---- Confirmation ---- */

    .confirmation-page {
        padding: 2.5rem 1rem;
    }

    .confirmation-page h1 {
        font-size: 1.5rem;
    }

    /* ---- Stepper ---- */

    .stepper-header {
        top: 100px; /* mobile nav height */
    }

    .stepper-labels {
        display: none;
    }

    .stepper-nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .stepper-btn {
        width: 100%;
        justify-content: center;
    }

    .stepper-btn-next,
    .stepper-btn-submit {
        margin-left: 0;
    }

    /* ---- Pyramid Checklist ---- */

    .indicator-level-header {
        padding: 0.75rem 1rem;
    }

    .indicator-level-number {
        font-size: 1.2rem;
    }

    .indicator-level-title {
        font-size: 0.9rem;
    }

    .indicator-list {
        padding: 0.5rem 0.75rem;
    }

    .indicator-text {
        font-size: 0.85rem;
    }

    /* ---- Footer ---- */

    .footer-inner {
        padding: 0 1.25rem;
    }

    .footer-top {
        flex-direction: column;
        gap: 2rem;
        padding: 2.5rem 0 2rem;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-contact {
        min-width: unset;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.25rem 0;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* ---- About ---- */

    .about-section {
        padding: 1.25rem;
        margin: 1.5rem 0 0.5rem;
    }
}