/* ===== MOBILE FIXES (Applied to all pages) ===== */

/* Pha 1: Fix Core Grids and Forms */
.frm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}
@media (max-width: 760px) {
    .frm {
        grid-template-columns: 1fr;
    }
}

/* Stack3 / Stack4 definitions for cards */
.stack3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.stack4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .stack4 { grid-template-columns: repeat(2, 1fr); }
    .stack3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stack4 { grid-template-columns: 1fr; }
    .stack3 { grid-template-columns: 1fr; }
}

/* st3card */
.st3card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 22px;
    transition: border-color 0.3s;
}
.st3card:hover {
    border-color: rgba(255, 255, 255, 0.25);
}
.stn {
    color: var(--term, #2E9EFF);
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}
.st3card h3 {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 700;
}
.st3card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
}

/* Pha 2: Carousels and Narrow Grids */
@media (max-width: 480px) {
    .kt-grid {
        grid-template-columns: 1fr !important;
    }
    .kt-cell {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    .kt-cell:last-child {
        border-bottom: none !important;
    }
    .steps4 {
        grid-template-columns: 1fr !important;
    }
    .outs {
        gap: 12px !important;
    }
}

/* Fix ledger rows */
@media (max-width: 640px) {
    .ledger-row {
        gap: 8px !important;
        padding: 16px !important;
    }
}

/* Ensure Carousel can be swiped easily */
.car-track {
    padding-bottom: 14px !important;
    margin-bottom: -10px !important;
}

/* Pha 3: Typography and Spacing */
@media (max-width: 640px) {
    .sec {
        padding: 40px 0 !important;
    }
    .hero {
        padding: 60px 0 40px !important;
    }
    .hero h1 {
        font-size: clamp(26px, 8vw, 36px) !important;
    }
    h2.h {
        font-size: clamp(24px, 7vw, 30px) !important;
    }
    .readout {
        flex-direction: column;
    }
    .readout .cell {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .readout .cell:last-child {
        border-bottom: none !important;
    }
}