/* Grouped mode layout */
                .mode-groups {
                    display: grid;
                    gap: 20px;
                    grid-template-columns: repeat(3, 1fr);
                    align-items: start;
                }

                .mode-container {
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    margin-top: 20px;
                    margin-bottom: 80px;
                }

                @media (max-width: 1200px) {
                    .mode-container {
                        margin-top: 96px;
                    }
                }

                @media (max-width: 820px) {
                    .mode-container {
                        margin-top: 120px;
                    }
                }

                @media (max-width: 1200px) {
                    .mode-groups {
                        grid-template-columns: 1fr 1fr;
                    }

                    /* Center the Study card on its own row while keeping two columns */
                    .mode-group.notes {
                        grid-column: 1 / -1;
                        justify-self: center;
                        max-width: 520px;
                    }
                }

                /* Phones: stack all three cards vertically */
                @media (max-width: 768px) {
                    .mode-groups {
                        grid-template-columns: 1fr;
                    }

                    .mode-group.notes {
                        grid-column: auto;
                        justify-self: stretch;
                        max-width: none;
                    }
                }

                /* Extra safety for large iPhones / portrait */
                @media (max-width: 820px) and (orientation: portrait) {
                    .mode-groups {
                        grid-template-columns: 1fr !important;
                    }

                    .mode-group.notes {
                        grid-column: auto;
                        justify-self: stretch;
                        max-width: none;
                    }
                }

                .mode-group {
                    background: #fff;
                    border: 1px solid #eaeaea;
                    border-radius: 12px;
                    padding: 16px 18px;
                    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
                }

                .mode-group.practice {
                    background: linear-gradient(0deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.12)), #fff;
                }

                /* IACT → blue, slightly deeper than Notes */
                .mode-group.prep {
                    background: linear-gradient(0deg, rgba(52, 152, 219, 0.18), rgba(52, 152, 219, 0.18)), #fff;
                }

                /* Notes → yellow */
                .mode-group.notes {
                    background: linear-gradient(0deg, rgba(241, 196, 15, 0.14), rgba(241, 196, 15, 0.14)), #fff;
                }

                .mode-group__title {
                    margin: 0 0 10px;
                    font-size: 18px;
                    font-weight: 700;
                    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
                }

                .mode-group.practice .mode-group__title {
                    color: #1e7d3d;
                }

                .mode-group.prep .mode-group__title {
                    color: #1f4f8d;
                }

                .mode-group.notes .mode-group__title {
                    color: #1f4f8d;
                }

                .mode-group__subtitle {
                    margin: -6px 0 10px;
                    font-size: 12px;
                    color: #6b7280;
                }

                .mode-group__grid {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(140px, 1fr));
                    gap: 14px;
                    justify-items: center;
                }

                .mode-pill {
                    display: inline-block;
                    margin-top: 8px;
                    padding: 2px 8px;
                    font-size: 11px;
                    border-radius: 999px;
                    background: #eef2f7;
                    color: #334155;
                }

                /* JS-assisted fallback for large phones */
                .mode-groups.single-column {
                    grid-template-columns: 1fr !important;
                }