/* ============================================================
   HOME USAGE AREAS — Apple-glass accordion
   Replaces the flat white rows with translucent, blur-backed
   cards while keeping the native <details> behaviour.
   ============================================================ */

/* The global canvas provides the soft backdrop; the section itself stays
   transparent so the areas blend into the neighbouring sections. */
.rh-areas {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: transparent !important;
}

.rh-areas__wrap {
    position: relative;
    z-index: 1;
}

/* Glass card. */
body .rh-areas .rh-areas__entry,
body .rh-areas .rh-areas__entry:nth-child(n) {
    --ra-bg: transparent;
    --ra-accent: #0a84ff;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow:
        0 20px 45px -32px rgba(10, 37, 64, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    overflow: hidden;
    transition: background-color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
    body .rh-areas .rh-areas__entry:hover {
        background: rgba(255, 255, 255, 0.64) !important;
        border-color: rgba(255, 255, 255, 0.92) !important;
        box-shadow:
            0 28px 55px -30px rgba(10, 37, 64, 0.5),
            inset 0 1px 0 #ffffff !important;
        transform: translateY(-2px) !important;
    }
}

body .rh-areas .rh-areas__entry[open] {
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        0 32px 66px -34px rgba(10, 37, 64, 0.52),
        inset 0 1px 0 #ffffff !important;
}

/* ---------- Desktop / tablet layout ---------- */
@media (min-width: 701px) {
    body .rh-areas .rh-areas__directory {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        scroll-snap-type: none !important;
    }

    body .rh-areas .rh-areas__entry {
        align-self: stretch !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    body .rh-areas .rh-areas__entry summary {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 20px !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 0 !important;
        padding: 17px 20px !important;
        list-style: none !important;
        color: #1d1d1f !important;
        cursor: pointer !important;
    }

    body .rh-areas .rh-areas__entry summary::-webkit-details-marker { display: none !important; }

    body .rh-areas .rh-areas__entry summary::after {
        content: '';
        justify-self: end;
        width: 9px;
        height: 9px;
        margin-inline-end: 4px;
        border-right: 1.7px solid #86868b;
        border-bottom: 1.7px solid #86868b;
        transform: rotate(45deg);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
    }

    body .rh-areas .rh-areas__entry[open] summary::after {
        transform: rotate(-135deg);
        border-color: #0a2540;
    }

    body .rh-areas .rh-areas__number {
        display: grid !important;
        place-items: center;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 12px !important;
        background: rgba(10, 37, 64, 0.06) !important;
        color: #425466 !important;
        font: 600 11px/1 Inter, "SF Pro Text", sans-serif !important;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.04em;
        transition: background-color 0.24s ease, color 0.24s ease;
    }

    body .rh-areas .rh-areas__entry[open] .rh-areas__number {
        background: #0a2540 !important;
        color: #ffffff !important;
    }

    body .rh-areas .rh-areas__name {
        color: #1d1d1f !important;
        font: 600 16px/1.35 "Plus Jakarta Sans", "SF Pro Text", Inter, sans-serif !important;
        letter-spacing: -0.018em !important;
    }

    body .rh-areas .rh-areas__entry summary:hover .rh-areas__name { color: #0a2540 !important; }

    body .rh-areas .rh-areas__reveal {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 18px 20px 20px !important;
        border-top: 1px solid rgba(10, 37, 64, 0.08) !important;
        background: transparent !important;
        animation: ac-areas-reveal 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .rh-areas .rh-areas__illustration {
        display: grid !important;
        place-items: center;
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.85) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #0a84ff !important;
        box-shadow:
            0 14px 28px -20px rgba(10, 37, 64, 0.5),
            inset 0 1px 0 #ffffff !important;
        overflow: visible !important;
    }

    body .rh-areas .rh-areas__illustration::before { content: none !important; }

    body .rh-areas .rh-areas__illustration svg {
        width: 30px !important;
        height: 30px !important;
        opacity: 1 !important;
        stroke-width: 1.3;
    }

    body .rh-areas .rh-areas__detail {
        align-self: center !important;
        min-width: 0;
    }

    body .rh-areas .rh-areas__detail p {
        margin: 0 0 14px !important;
        color: #5f6b76 !important;
        font: 13.5px/1.75 Inter, "SF Pro Text", sans-serif !important;
        max-width: 62ch;
    }

    body .rh-areas .rh-areas__detail a {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 9px 16px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #0071e3 !important;
        color: #ffffff !important;
        font: 600 12px/1.2 Inter, "SF Pro Text", sans-serif !important;
        text-decoration: none !important;
        box-shadow: 0 10px 22px -12px rgba(0, 113, 227, 0.8);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    body .rh-areas .rh-areas__detail a:hover {
        background: #0060c0 !important;
        transform: translateY(-1px);
    }
}

@keyframes ac-areas-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Dark appearance ---------- */
html.ac-access-dark:not(.ac-access-contrast) .rh-areas {
    background: transparent !important;
}

html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry,
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry:nth-child(n) {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(28, 28, 30, 0.6) !important;
    box-shadow:
        0 24px 50px -30px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry[open] {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(36, 36, 38, 0.78) !important;
}

html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry summary { color: #f5f5f7 !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__name { color: #f5f5f7 !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry summary:hover .rh-areas__name { color: #ffffff !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry summary::after { border-color: #98989d; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry[open] summary::after { border-color: #f5f5f7; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__number { background: rgba(255, 255, 255, 0.1) !important; color: #d1d1d6 !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__entry[open] .rh-areas__number { background: #0a84ff !important; color: #ffffff !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__reveal { border-top-color: rgba(255, 255, 255, 0.12) !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__detail p { color: #98989d !important; }
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__illustration {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #0a84ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__detail a:not([data-ac-dark-keep]) {
    background: #0a84ff !important;
    color: #ffffff !important;
}

html.ac-access-dark:not(.ac-access-contrast) body .rh-areas .rh-areas__detail a:not([data-ac-dark-keep]):hover {
    background: #0071e3 !important;
    color: #ffffff !important;
}

/* ---------- Forced contrast ---------- */
html.ac-access-contrast .rh-areas {
    background: #ffffff !important;
}

html.ac-access-contrast body .rh-areas .rh-areas__entry,
html.ac-access-contrast body .rh-areas .rh-areas__entry[open],
html.ac-access-contrast body .rh-areas .rh-areas__entry:nth-child(n) {
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
}

html.ac-access-contrast body .rh-areas .rh-areas__name,
html.ac-access-contrast body .rh-areas .rh-areas__entry summary { color: #000000 !important; }
html.ac-access-contrast body .rh-areas .rh-areas__number { background: #000000 !important; color: #ffffff !important; border-radius: 0 !important; }
html.ac-access-contrast body .rh-areas .rh-areas__reveal { border-top: 2px solid #000000 !important; }
html.ac-access-contrast body .rh-areas .rh-areas__detail p { color: #000000 !important; }
html.ac-access-contrast body .rh-areas .rh-areas__illustration { border: 2px solid #000000 !important; border-radius: 0 !important; background: #ffffff !important; color: #000000 !important; box-shadow: none !important; }
html.ac-access-contrast body .rh-areas .rh-areas__detail a { background: #000000 !important; color: #ffffff !important; border-radius: 0 !important; box-shadow: none !important; }
html.ac-access-contrast body .rh-areas .rh-areas__entry summary::after { border-color: #000000 !important; }

html.ac-access-contrast.ac-access-dark .rh-areas { background: #000000 !important; }
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__entry,
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__entry[open],
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__entry:nth-child(n) {
    background: #000000 !important;
    border-color: #ffffff !important;
}
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__name,
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__entry summary { color: #ffffff !important; }
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__number { background: #ffffff !important; color: #000000 !important; }
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__reveal,
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__entry summary::after { border-color: #ffffff !important; }
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__detail p { color: #ffffff !important; }
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__illustration { border-color: #ffffff !important; background: #000000 !important; color: #ffffff !important; }
html.ac-access-contrast.ac-access-dark body .rh-areas .rh-areas__detail a { background: #ffffff !important; color: #000000 !important; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    body .rh-areas .rh-areas__entry,
    body .rh-areas .rh-areas__entry summary::after,
    body .rh-areas .rh-areas__detail a { transition: none !important; }
    body .rh-areas .rh-areas__reveal { animation: none !important; }
}

html.ac-access-motion body .rh-areas .rh-areas__entry,
html.ac-access-motion body .rh-areas .rh-areas__entry summary::after,
html.ac-access-motion body .rh-areas .rh-areas__detail a { transition: none !important; }
html.ac-access-motion body .rh-areas .rh-areas__reveal { animation: none !important; }