/**
 * Home content mobile repairs.
 *
 * This file intentionally scopes every rule to the redesigned home app. The
 * shared header, footer, drawer and bottom navigation live outside `.site` and
 * must remain controlled by site-shell.css.
 */

@media (max-width: 600px) {
    /* Keep Home controls solid. Late redesign layers previously restored
       translucent gradients and inset highlights on these controls. */
    body.home .site .hero-search,
    body.home .site .quick-access a,
    body.home .site .section-title > a,
    body.home .site .rail-controls > button,
    body.home .site .rail-controls > div,
    body.home .site .article-category-groups,
    body.home .site .article-category-grid > button,
    body.home .site .article-category-grid > button > span,
    body.home .site .book-category-tabs,
    body.home .site .book-category-tabs button,
    body.home .site .test-copy > span,
    body.home .site .request-tabs button,
    body.home .site .request-card,
    body.home .site .request-card input,
    body.home .site .request-card select,
    body.home .site .request-card textarea,
    body.home .site .request-submit,
    body.home .site .newsletter-section input,
    body.home .site .newsletter-section form button {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    body.home .site .hero-search,
    body.home .site .quick-access a,
    body.home .site .section-title > a,
    body.home .site .rail-controls > button,
    body.home .site .rail-controls > div,
    body.home .site .article-category-groups,
    body.home .site .article-category-grid > button,
    body.home .site .article-category-grid > button > span,
    body.home .site .book-category-tabs,
    body.home .site .book-category-tabs button {
        border-color: #c7dee1 !important;
        background-color: #fff !important;
    }

    body.home .site .quick-access a {
        background-color: #f3f8f9 !important;
    }

    body.home .site .hero-search button,
    body.home .site .article-category-grid > button.active,
    body.home .site .book-category-tabs button.active,
    body.home .site .rail-controls > div button.active {
        border-color: #c08a2e !important;
        background: #c08a2e !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    body.home .site .hero-search button,
    body.home .site .newsletter-section form button {
        background: #0a4d56 !important;
        color: #fff !important;
    }

    /* Self-awareness tests: fill the artwork frame, preserve readable copy,
       and keep the call-to-action in view on narrow screens. */
    body.home .site .tests-section,
    body.home .site .tests-section.page-section {
        margin-inline: 0 !important;
        padding: 24px 12px 18px !important;
        border: 1px solid #c7dee1 !important;
        border-radius: 18px !important;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.home .site .tests-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.home .site .test-card,
    body.home .site .test-card.purple {
        min-height: 202px !important;
        grid-template-columns: minmax(0, 1fr) 128px !important;
        align-items: stretch !important;
        border: 1px solid #c7dee1 !important;
        border-radius: 16px !important;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.home .site .test-card::after {
        content: none !important;
    }

    body.home .site .test-card > img {
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        height: 100% !important;
        min-height: 202px !important;
        max-height: none !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        background: #e6f1f2 !important;
    }

    body.home .site .test-copy {
        min-width: 0 !important;
        height: auto !important;
        padding: 15px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        background: #062e33 !important;
        background-image: none !important;
        color: #fff !important;
    }

    body.home .site .test-copy small,
    body.home .site .test-card.purple .test-copy small {
        color: #a7ced3 !important;
        font-size: 8.5px !important;
        line-height: 1.6 !important;
    }

    body.home .site .test-copy strong {
        margin: 5px 0 !important;
        color: #fff !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    body.home .site .test-copy p {
        margin: 0 0 7px !important;
        color: #c7dee1 !important;
        font-size: 8.5px !important;
        line-height: 1.75 !important;
    }

    body.home .site .test-facts {
        margin: 0 0 10px !important;
        gap: 8px !important;
        color: #e6f1f2 !important;
    }

    body.home .site .test-facts li {
        gap: 4px !important;
        font-size: 8px !important;
        line-height: 1.5 !important;
    }

    body.home .site .test-facts svg {
        width: 13px !important;
        height: 13px !important;
        color: #f0ce87 !important;
    }

    body.home .site .test-copy > span,
    body.home .site .test-card.purple .test-copy > span {
        width: max-content !important;
        min-height: 40px !important;
        margin-top: auto !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 1px solid #136b76 !important;
        border-radius: 11px !important;
        background: #0a4d56 !important;
        color: #fff !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.home .site .test-copy > span svg {
        width: 15px !important;
        height: 15px !important;
        color: #f0ce87 !important;
    }

    /* Restore the actual request form on mobile. The compact mail/tel cards
       remain available in markup as a fallback, but no longer replace it. */
    body.home .site .consultation-hub,
    body.home .site .consultation-section {
        margin: 44px 0 0 !important;
        padding: 20px 14px !important;
        border: 1px solid #08404a !important;
        border-radius: 18px !important;
        background: #062e33 !important;
        background-image: none !important;
        box-shadow: none !important;
        color: #fff !important;
        overflow: hidden !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.home .site .consultation-hub::before,
    body.home .site .consultation-section::before {
        content: none !important;
        display: none !important;
    }

    body.home .site .consultation-desktop {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    body.home .site .consultation-mobile {
        display: none !important;
    }

    body.home .site .consultation-intro {
        padding: 0 2px !important;
        display: flex !important;
        align-items: stretch !important;
    }

    body.home .site .consultation-kicker {
        color: #f0ce87 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
    }

    body.home .site .consultation-intro h2 {
        margin: 7px 0 6px !important;
        color: #fff !important;
        font-size: 22px !important;
        line-height: 1.65 !important;
        letter-spacing: -.2px !important;
    }

    body.home .site .consultation-intro > p {
        max-width: none !important;
        margin: 0 0 14px !important;
        color: #c7dee1 !important;
        font-size: 10px !important;
        line-height: 2 !important;
    }

    body.home .site .request-tabs {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 14px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body.home .site .request-tabs button {
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 8px 6px !important;
        border: 1px solid #29535a !important;
        border-radius: 12px !important;
        background: #03191d !important;
        color: #c7dee1 !important;
        font-size: 9.5px !important;
        line-height: 1.55 !important;
    }

    body.home .site .request-tabs button svg {
        width: 17px !important;
        min-width: 17px !important;
        height: 17px !important;
        color: #f0ce87 !important;
    }

    body.home .site .request-tabs button.active {
        border-color: #c08a2e !important;
        background: #c08a2e !important;
        color: #fff !important;
    }

    body.home .site .request-tabs button.active svg {
        color: #fff !important;
    }

    body.home .site .consultation-intro ul {
        width: 100% !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        color: #c7dee1 !important;
        font-size: 9px !important;
    }

    body.home .site .consultation-intro li {
        min-width: 0 !important;
    }

    body.home .site .request-card {
        width: 100% !important;
        padding: 17px 13px !important;
        border: 1px solid #29535a !important;
        border-radius: 16px !important;
        background: #03191d !important;
        overflow: hidden !important;
    }

    body.home .site .request-card-heading {
        margin-bottom: 17px !important;
        gap: 10px !important;
    }

    body.home .site .request-card-heading > span {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border: 1px solid #29535a !important;
        border-radius: 11px !important;
        background: #08404a !important;
        color: #f0ce87 !important;
        box-shadow: none !important;
    }

    body.home .site .request-card-heading > span svg {
        width: 20px !important;
        height: 20px !important;
    }

    body.home .site .request-card-heading strong {
        color: #fff !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    body.home .site .request-card-heading small {
        color: #a7ced3 !important;
        font-size: 8.5px !important;
        line-height: 1.7 !important;
    }

    body.home .site .request-card form {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.home .site .request-card label {
        min-width: 0 !important;
        color: #e6f1f2 !important;
        font-size: 10px !important;
    }

    body.home .site .request-card input,
    body.home .site .request-card select,
    body.home .site .request-card textarea {
        max-width: 100% !important;
        border: 1px solid #29535a !important;
        border-radius: 11px !important;
        background: #062e33 !important;
        color: #fff !important;
        font-size: 11px !important;
    }

    body.home .site .request-card input,
    body.home .site .request-card select {
        height: 48px !important;
    }

    body.home .site .request-card textarea {
        min-height: 112px !important;
    }

    body.home .site .request-card input:focus,
    body.home .site .request-card select:focus,
    body.home .site .request-card textarea:focus {
        border-color: #d49b3a !important;
        box-shadow: 0 0 0 3px rgba(212, 155, 58, .16) !important;
    }

    body.home .site .request-message,
    body.home .site .request-consent,
    body.home .site .request-error,
    body.home .site .request-submit {
        grid-column: 1 !important;
    }

    body.home .site .request-consent {
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 8px !important;
        color: #a7ced3 !important;
        font-size: 9px !important;
        line-height: 1.8 !important;
    }

    body.home .site .request-consent input {
        width: 20px !important;
        height: 20px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        accent-color: #c08a2e !important;
    }

    body.home .site .request-submit {
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        justify-self: stretch !important;
        border: 1px solid #c08a2e !important;
        border-radius: 12px !important;
        background: #c08a2e !important;
        color: #fff !important;
        font-size: 11px !important;
    }

    body.home .site .request-submit svg {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 359px) {
    body.home .site .section-title {
        flex-wrap: wrap !important;
        row-gap: 10px !important;
    }

    body.home .site .section-title > a {
        margin-inline-start: auto !important;
    }

    body.home .site .test-card,
    body.home .site .test-card.purple {
        grid-template-columns: minmax(0, 1fr) 112px !important;
    }

    body.home .site .test-card > img {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
    }

    body.home .site .request-tabs {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Final course-card rule: this must follow the earlier full-artwork mobile
   experiment so the requested portrait presentation wins the cascade. */
@media (max-width: 600px) {
    body.home .site .course-rail .rail {
        grid-auto-columns: 80.5% !important;
        gap: 12px !important;
    }

    body.home .site .course-card {
        width: auto !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    body.home .site .course-poster {
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    body.home .site .course-poster::after {
        content: "" !important;
        display: block !important;
        background: linear-gradient(180deg, rgba(3, 10, 12, .03) 18%, rgba(3, 16, 19, .28) 50%, rgba(3, 16, 19, .96)) !important;
    }

    body.home .site .course-poster > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        filter: grayscale(1) saturate(.16) brightness(.8) contrast(1.06) !important;
        transform: none !important;
    }

    body.home .site .course-card.is-rail-active .course-poster > img,
    body.home .site .course-card:hover .course-poster > img,
    body.home .site .course-card:focus-visible .course-poster > img {
        object-fit: cover !important;
        object-position: center !important;
        filter: none !important;
        transform: scale(1.025) !important;
    }

    body.home .site .course-card-content {
        min-height: 42% !important;
        padding: 18px 16px 16px !important;
        display: flex !important;
    }
}

@media (max-width: 380px) {
    body.home .site .course-rail .rail {
        grid-auto-columns: 86% !important;
    }
}

/* Keep required markers beside their labels on one line. The actual required
   attributes remain on the form controls for validation and accessibility. */
body.home .site .request-card label:not(.request-consent) {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 4px !important;
    row-gap: 7px !important;
}

body.home .site .request-card label:not(.request-consent) > b {
    min-width: 0 !important;
    display: inline !important;
    justify-self: start !important;
    color: #a7ced3 !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

body.home .site .request-card label:not(.request-consent) > b::after {
    content: "(الزامی)" !important;
    font-size: 9px !important;
}

body.home .site .request-card label:not(.request-consent) > input,
body.home .site .request-card label:not(.request-consent) > select,
body.home .site .request-card label:not(.request-consent) > textarea {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

@media (max-width: 600px) {
    body.home .site .newsletter-section form button {
        justify-self: center !important;
        margin-inline: auto !important;
    }
}

/* Portrait course cards, centered founder introduction and an on-demand
   consultation form for the compact mobile experience. */
@media (max-width: 600px) {
    body.home .site .course-rail .rail {
        grid-auto-columns: 80.5% !important;
        gap: 12px !important;
    }

    body.home .site .course-card {
        width: auto !important;
        gap: 0 !important;
    }

    body.home .site .course-poster {
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    body.home .site .course-poster::after {
        content: "" !important;
        display: block !important;
        background: linear-gradient(180deg, rgba(3, 10, 12, .03) 18%, rgba(3, 16, 19, .28) 50%, rgba(3, 16, 19, .96)) !important;
    }

    body.home .site .course-poster > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        filter: grayscale(1) saturate(.16) brightness(.8) contrast(1.06) !important;
        transform: none !important;
    }

    body.home .site .course-card.is-rail-active .course-poster > img,
    body.home .site .course-card:hover .course-poster > img,
    body.home .site .course-card:focus-visible .course-poster > img {
        filter: none !important;
        transform: scale(1.025) !important;
    }

    body.home .site .course-card-content {
        min-height: 42% !important;
        padding: 18px 16px 16px !important;
        display: flex !important;
    }

    body.home .site .bx-fbody .bx-badge {
        width: max-content !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body.home .site .bx-fbody > h2,
    body.home .site .bx-fbody > .bx-role {
        width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.home .site .consultation-hub .consultation-desktop {
        display: block !important;
    }

    body.home .site .consultation-hub .consultation-intro {
        padding: 0 !important;
    }

    body.home .site .consultation-hub .consultation-intro > p,
    body.home .site .consultation-hub .consultation-intro > ul {
        display: none !important;
    }

    body.home .site .consultation-hub .consultation-kicker,
    body.home .site .consultation-hub .consultation-intro > h2 {
        width: 100% !important;
        text-align: center !important;
    }

    body.home .site .consultation-hub .consultation-intro > h2 {
        margin-bottom: 14px !important;
        font-size: 19px !important;
        line-height: 1.7 !important;
    }

    body.home .site .consultation-hub .request-tabs {
        margin-bottom: 0 !important;
    }

    body.home .site .consultation-hub .request-tabs button {
        position: relative !important;
        padding-inline: 8px !important;
    }

    body.home .site .consultation-hub .request-tabs button::after {
        content: "" !important;
        width: 7px !important;
        height: 7px !important;
        margin-inline-start: 2px !important;
        flex: 0 0 7px !important;
        border-left: 1.5px solid currentColor !important;
        border-bottom: 1.5px solid currentColor !important;
        transform: rotate(-45deg) !important;
        transition: transform .2s ease !important;
    }

    body.home .site .consultation-hub[data-mobile-form-open="true"] .request-tabs button[aria-selected="true"]::after {
        transform: rotate(135deg) !important;
    }

    body.home .site .consultation-hub .request-card {
        display: none !important;
        margin-top: 14px !important;
    }

    body.home .site .consultation-hub[data-mobile-form-open="true"] .request-card {
        display: block !important;
        animation: barayand-mobile-form-open .22s ease-out both !important;
    }
}

@media (max-width: 380px) {
    body.home .site .course-rail .rail {
        grid-auto-columns: 86% !important;
    }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
    body.home .site .consultation-hub[data-mobile-form-open="true"] .request-card {
        animation: none !important;
    }
}

@keyframes barayand-mobile-form-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 600px) {
    :root[data-theme="dark"] body.home .site .hero-search,
    :root[data-theme="dark"] body.home .site .quick-access a,
    :root[data-theme="dark"] body.home .site .section-title > a,
    :root[data-theme="dark"] body.home .site .rail-controls > button,
    :root[data-theme="dark"] body.home .site .rail-controls > div,
    :root[data-theme="dark"] body.home .site .article-category-groups,
    :root[data-theme="dark"] body.home .site .article-category-grid > button,
    :root[data-theme="dark"] body.home .site .article-category-grid > button > span,
    :root[data-theme="dark"] body.home .site .book-category-tabs,
    :root[data-theme="dark"] body.home .site .book-category-tabs button,
    :root[data-theme="dark"] body.home .site .tests-section,
    :root[data-theme="dark"] body.home .site .tests-section.page-section,
    :root[data-theme="dark"] body.home .site .test-card,
    :root[data-theme="dark"] body.home .site .test-card.purple {
        border-color: #294753 !important;
        background-color: #062e33 !important;
    }

    :root[data-theme="dark"] body.home .site .quick-access a,
    :root[data-theme="dark"] body.home .site .article-category-grid > button > span,
    :root[data-theme="dark"] body.home .site .rail-controls > div {
        background-color: #08404a !important;
    }

    :root[data-theme="dark"] body.home .site .test-card > img {
        background-color: #08404a !important;
    }
}

/* Match the mobile Home controls to their desktop visual language. Only the
   responsive width and flow are allowed to differ on a narrow screen. */
@media (max-width: 600px) {
    body.home .site .hero-search {
        grid-template-columns: minmax(0, 1fr) 118px !important;
    }

    body.home .site .hero-search button {
        width: 118px !important;
        height: 48px !important;
        padding: 1px 6px !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;
        background: #062e33 !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 21px !important;
    }

    body.home .site .quick-access {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 314px !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain !important;
        scroll-snap-type: inline mandatory !important;
        scrollbar-width: none !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(420px 120px at 82% -30%, rgba(95, 168, 176, .15), transparent 68%),
            linear-gradient(135deg, rgba(8, 64, 74, .984), rgba(3, 25, 29, .99)) !important;
        box-shadow: none !important;
    }

    body.home .site .quick-access::-webkit-scrollbar {
        display: none !important;
    }

    body.home .site .quick-access a,
    body.home .site .quick-access .quick-articles,
    body.home .site .quick-access .quick-books,
    body.home .site .quick-access .quick-courses,
    body.home .site .quick-access .quick-tests {
        width: 314px !important;
        min-width: 314px !important;
        min-height: 138px !important;
        height: 138px !important;
        padding: 16px 18px !important;
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 14px !important;
        scroll-snap-align: start !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 15px !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)) !important;
        color: #f8fafc !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .043) !important;
    }

    body.home .site .quick-access a > span:first-child {
        width: 64px !important;
        min-width: 64px !important;
        height: 72px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(167, 206, 211, .12) !important;
        border-radius: 17px !important;
        background: rgba(167, 206, 211, .08) !important;
        color: #c7dee1 !important;
        box-shadow: none !important;
    }

    body.home .site .quick-access a > span:first-child svg {
        width: 30px !important;
        height: 30px !important;
    }

    body.home .site .quick-access a > div {
        min-width: 0 !important;
        text-align: right !important;
    }

    body.home .site .quick-access strong {
        display: block !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.55 !important;
    }

    body.home .site .quick-access small {
        display: block !important;
        margin-top: 2px !important;
        color: #a7ced3 !important;
        font-size: 9px !important;
        line-height: 1.65 !important;
    }

    body.home .site .quick-access .quick-card-cta {
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(167, 206, 211, .12) !important;
        border-radius: 15px !important;
        background: rgba(167, 206, 211, .08) !important;
        color: #c7dee1 !important;
        box-shadow: none !important;
    }

    body.home .site .quick-access .quick-card-cta svg {
        width: 23px !important;
        height: 23px !important;
    }

    body.home .site .section-title > a {
        min-height: 44px !important;
        height: 48px !important;
        padding: 0 14px !important;
        gap: 7px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #0a4d56 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 19.5px !important;
    }

    body.home .site .section-title > a svg {
        width: 17px !important;
        height: 17px !important;
    }

    body.home .site .rail-controls > button {
        width: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 1px 6px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #0a4d56 !important;
    }

    body.home .site .rail-controls > div {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        align-items: normal !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    body.home .site .article-category-grid > button {
        min-height: 46px !important;
        padding: 7px 11px !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: #e6f1f2 !important;
        color: #0f172a !important;
        box-shadow: none !important;
    }

    body.home .site .article-category-grid > button.active {
        border: 0 !important;
        background: #0a4d56 !important;
        color: #fff !important;
        box-shadow: 0 9px 20px -14px rgba(10, 77, 86, .7) !important;
    }

    body.home .site .book-category-tabs {
        min-height: 54px !important;
        padding: 4px !important;
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        gap: 5px !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 12px !important;
        background: #03191d !important;
        color: #e2e8f0 !important;
    }

    body.home .site .book-category-tabs button {
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 14px !important;
        flex: 1 1 0 !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #c7dee1 !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        line-height: 18.75px !important;
    }

    body.home .site .book-category-tabs button.active {
        background: #c08a2e !important;
        color: #fff !important;
    }

    body.home .site .test-copy > span,
    body.home .site .test-card.purple .test-copy > span {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 22px !important;
        justify-content: normal !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        background: #0a4d56 !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }

    body.home .site .request-tabs button {
        min-height: 50px !important;
        padding: 1px 6px !important;
        gap: 8px !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 13px !important;
        background: #062e33 !important;
        color: #c7dee1 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 16.5px !important;
    }

    body.home .site .request-tabs button.active {
        border-color: #c08a2e !important;
        background: #c08a2e !important;
        color: #fff !important;
    }

    body.home .site .request-submit {
        width: 164px !important;
        min-width: 164px !important;
        height: 49px !important;
        justify-self: end !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: linear-gradient(135deg, #c08a2e, #9a6b1f) !important;
        color: #fff !important;
        box-shadow: 0 15px 30px -12px rgba(192, 138, 46, .55) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    body.home .site .newsletter-section form button {
        width: max-content !important;
        min-width: 152px !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 12px 21.6px !important;
        justify-self: start !important;
        border: 1px solid #c08a2e !important;
        border-radius: 8px !important;
        background: #c08a2e !important;
        color: #fff !important;
        box-shadow: 0 8px 20px rgba(10, 77, 86, .16) !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    body.home .site .hero-primary-action > a {
        min-height: 50px !important;
        height: 50px !important;
        padding: 0 20px !important;
        border: 1px solid #c08a2e !important;
        border-radius: 13px !important;
        background: linear-gradient(135deg, #d49b3a, #9a6b1f) !important;
        color: #fff !important;
        box-shadow: 0 16px 28px -17px rgba(212, 155, 58, .68), inset 0 1px rgba(255, 255, 255, .16) !important;
        font-size: 12px !important;
    }

    body.home .site .discovery-feature-copy > span {
        min-height: 50px !important;
        padding: 0 22px !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        background: #0a4d56 !important;
        color: #fff !important;
        box-shadow: none !important;
        font-size: 13px !important;
    }

    body.home .site .play {
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #c08a2e !important;
        box-shadow: 0 6px 18px rgba(3, 25, 29, .16) !important;
    }
}

@media (max-width: 600px) {
    :root[data-theme="dark"] body.home .site .section-title > a,
    :root[data-theme="dark"] body.home .site .rail-controls > button,
    :root[data-theme="dark"] body.home .site .article-category-grid > button {
        border-color: #294753 !important;
        background: #062e33 !important;
        color: #e2e8f0 !important;
    }

    :root[data-theme="dark"] body.home .site .article-category-grid > button.active {
        border-color: #0a4d56 !important;
        background: #0a4d56 !important;
        color: #fff !important;
    }
}

/* Compact first-look layout requested for mobile: keep all four shortcuts in
   view and show the native 16:9 course artwork without portrait cropping. */
@media (max-width: 600px) {
    body.home .site .quick-access,
    :root[data-theme="dark"] body.home .site .quick-access {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 108px !important;
        height: auto !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        gap: 5px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.home .site .quick-access a,
    body.home .site .quick-access .quick-articles,
    body.home .site .quick-access .quick-books,
    body.home .site .quick-access .quick-courses,
    body.home .site .quick-access .quick-tests,
    :root[data-theme="dark"] body.home .site .quick-access a {
        width: auto !important;
        min-width: 0 !important;
        min-height: 108px !important;
        height: 108px !important;
        padding: 7px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        text-align: center !important;
        border: 1px solid #c7dee1 !important;
        border-radius: 10px !important;
        background: #f3f8f9 !important;
        color: #0f172a !important;
        box-shadow: none !important;
        scroll-snap-align: none !important;
    }

    body.home .site .quick-access a > span:first-child,
    body.home .site .quick-access .blue,
    body.home .site .quick-access .green,
    body.home .site .quick-access .gold,
    body.home .site .quick-access .purple {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        flex: 0 0 34px !important;
        margin: 0 0 5px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid #dce9e7 !important;
        border-radius: 11px !important;
        background: #eef7f6 !important;
        color: #0a5961 !important;
        box-shadow: none !important;
    }

    body.home .site .quick-access a > span:first-child svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 1.75 !important;
    }

    body.home .site .quick-access a > div {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    body.home .site .quick-access strong,
    :root[data-theme="dark"] body.home .site .quick-access strong {
        display: block !important;
        color: #0f172a !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.5 !important;
        white-space: normal !important;
    }

    body.home .site .quick-access small,
    :root[data-theme="dark"] body.home .site .quick-access small {
        display: block !important;
        margin-top: 3px !important;
        color: #64748b !important;
        font-size: 7px !important;
        line-height: 1.45 !important;
        white-space: nowrap !important;
    }

    body.home .site .quick-access .quick-card-cta,
    :root[data-theme="dark"] body.home .site .quick-access .quick-card-cta {
        display: none !important;
    }

    body.home .site .course-rail .rail {
        grid-auto-columns: 100% !important;
        gap: 12px !important;
    }

    body.home .site .course-card {
        width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    body.home .site .course-poster {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px !important;
        background: #03191d !important;
        overflow: hidden !important;
    }

    body.home .site .course-poster::after {
        content: none !important;
        display: none !important;
    }

    body.home .site .course-poster > img,
    body.home .site .course-card.is-rail-active .course-poster > img,
    body.home .site .course-card:hover .course-poster > img,
    body.home .site .course-card:focus-visible .course-poster > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        filter: none !important;
        transform: none !important;
    }

    body.home .site .course-card-content {
        display: none !important;
    }
}

@media (max-width: 359px) {
    body.home .site .quick-access,
    :root[data-theme="dark"] body.home .site .quick-access {
        width: calc(100% - 2px) !important;
        margin-inline: 1px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.home .site .quick-access a,
    :root[data-theme="dark"] body.home .site .quick-access a {
        min-height: 102px !important;
        height: 102px !important;
    }

    body.home .site .quick-access strong,
    :root[data-theme="dark"] body.home .site .quick-access strong {
        font-size: 8px !important;
    }

    body.home .site .quick-access small,
    :root[data-theme="dark"] body.home .site .quick-access small {
        font-size: 6.5px !important;
    }
}

/* Portrait course presentation is the final mobile override. */
@media (max-width: 600px) {
    body.home .site .course-rail .rail {
        grid-auto-columns: 80.5% !important;
        gap: 12px !important;
    }

    body.home .site .course-card {
        width: auto !important;
        min-width: 0 !important;
        gap: 0 !important;
    }

    body.home .site .course-poster {
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    body.home .site .course-poster::after {
        content: "" !important;
        display: block !important;
        background: linear-gradient(180deg, rgba(3, 10, 12, .03) 18%, rgba(3, 16, 19, .28) 50%, rgba(3, 16, 19, .96)) !important;
    }

    body.home .site .course-poster > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        filter: grayscale(1) saturate(.16) brightness(.8) contrast(1.06) !important;
        transform: none !important;
    }

    body.home .site .course-card.is-rail-active .course-poster > img,
    body.home .site .course-card:hover .course-poster > img,
    body.home .site .course-card:focus-visible .course-poster > img {
        object-fit: cover !important;
        object-position: center !important;
        filter: none !important;
        transform: scale(1.025) !important;
    }

    body.home .site .course-card-content {
        min-height: 42% !important;
        padding: 18px 16px 16px !important;
        display: flex !important;
    }
}

@media (max-width: 380px) {
    body.home .site .course-rail .rail {
        grid-auto-columns: 86% !important;
    }
}

/* Final mobile placement for the newsletter action. */
@media (max-width: 600px) {
    body.home .site .newsletter-section form button {
        justify-self: center !important;
        margin-inline: auto !important;
    }
}