/*
 * SOPHRA INNOVA Apartment Wi-Fi
 * User Guide — Professional Documentation UI
 *
 * Fresh presentation layer.
 *
 * Design principles:
 * - documentation first
 * - quiet visual hierarchy
 * - high information density without crowding
 * - readable line lengths
 * - consistent typographic rhythm
 * - restrained brand accents
 * - no decorative card overload
 * - desktop browser only
 *
 * Existing PWA/mobile presentation remains untouched.
 */


@media
(display-mode: browser)
and (min-width: 900px) {

    :root {
        --guide-pro-bg: #f6f7f9;
        --guide-pro-surface: #ffffff;
        --guide-pro-surface-soft: #fafbfc;

        --guide-pro-text: #303846;
        --guide-pro-heading: #111827;
        --guide-pro-muted: #697586;

        --guide-pro-line: #e2e6eb;
        --guide-pro-line-strong: #d5dae1;

        --guide-pro-orange: #e66f2d;
        --guide-pro-orange-deep: #a94b1d;
        --guide-pro-orange-soft: #fff4ed;

        --guide-pro-radius: 12px;

        --guide-pro-content: 760px;

        --guide-pro-progress: 0;
    }


    html {
        background: var(--guide-pro-bg);
    }


    body {
        color: var(--guide-pro-text);

        background:
            linear-gradient(
                180deg,
                #ffffff 0,
                #ffffff 250px,
                var(--guide-pro-bg) 520px
            );

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif;

        font-size: 16px;
        font-weight: 400;
        line-height: 1.65;

        letter-spacing: -0.006em;

        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }


    /*
     * Thin reading-progress indicator.
     */
    body::before {
        position: fixed;

        top: 0;
        left: 0;

        z-index: 10000;

        width: 100%;
        height: 2px;

        content: "";

        background:
            linear-gradient(
                90deg,
                #ef8a49,
                #df6327
            );

        transform:
            scaleX(
                var(
                    --guide-pro-progress,
                    0
                )
            );

        transform-origin:
            left center;

        pointer-events: none;
    }


    /* ========================================================
       TOP BAR
       ======================================================== */

    .help-topbar {
        position: sticky;

        top: 0;
        z-index: 100;

        min-height: 64px;

        padding:
            10px
            clamp(28px, 4vw, 56px);

        background:
            rgba(
                255,
                255,
                255,
                0.94
            );

        border-bottom:
            1px solid
            rgba(
                226,
                230,
                235,
                0.92
            );

        box-shadow: none;

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .help-brand {
        gap: 0;
    }


    .help-brand strong {
        color: #252c36;

        font-size: 0.72rem;
        font-weight: 750;

        line-height: 1;

        letter-spacing: 0.115em;
    }


    .help-back-link {
        min-height: 40px;

        padding: 7px 8px;

        color: #596273;
        background: transparent;

        border: 0;
        border-radius: 8px;

        font-size: 0.84rem;
        font-weight: 600;

        transition:
            color 150ms ease,
            background 150ms ease;
    }


    .help-back-link::before {
        margin-right: 7px;

        content: "←";

        color: #8a94a3;
    }


    .help-back-link:hover {
        color:
            var(--guide-pro-orange-deep);

        background:
            var(--guide-pro-orange-soft);

        transform: none;
    }


    .help-back-link:focus-visible {
        outline:
            3px solid
            rgba(
                230,
                111,
                45,
                0.17
            );

        outline-offset: 2px;
    }


    /* ========================================================
       DOCUMENT FRAME
       ======================================================== */

    .help-shell {
        width:
            min(
                1180px,
                calc(100% - 64px)
            );

        margin: 0 auto;

        display: grid;

        grid-template-columns:
            220px
            minmax(
                0,
                var(--guide-pro-content)
            );

        column-gap:
            clamp(
                42px,
                5vw,
                72px
            );

        justify-content: center;

        padding:
            54px
            0
            104px;
    }


    /* ========================================================
       HERO / DOCUMENT INTRO
       ======================================================== */

    .help-hero {
        grid-column: 2;

        width: 100%;
        max-width: none;

        margin: 0 0 24px;
    }


    .help-eyebrow {
        display: block;

        margin: 0 0 11px;

        color:
            var(--guide-pro-orange-deep);

        font-size: 0.69rem;
        font-weight: 750;

        line-height: 1.3;

        letter-spacing: 0.115em;
    }


    .help-hero h1 {
        max-width: 720px;

        margin: 0;

        color:
            var(--guide-pro-heading);

        font-size:
            clamp(
                2.35rem,
                4vw,
                3.35rem
            );

        font-weight: 700;
        line-height: 1.05;

        letter-spacing: -0.046em;

        text-wrap: balance;
    }


    .help-hero > p {
        max-width: 680px;

        margin:
            18px
            0
            0;

        color:
            #586475;

        font-size: 1.04rem;
        font-weight: 400;
        line-height: 1.72;

        letter-spacing: -0.008em;
    }


    /* ========================================================
       SEARCH
       ======================================================== */

    .help-search {
        grid-column: 2;

        width: 100%;
        max-width: none;

        margin:
            0
            0
            42px;

        padding: 0;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }


    .help-search label {
        display: block;

        margin:
            0
            0
            7px;

        color: #657081;

        font-size: 0.72rem;
        font-weight: 650;

        letter-spacing: 0.035em;
    }


    .help-search-control {
        gap: 6px;

        min-height: 52px;

        padding: 4px;

        background:
            var(--guide-pro-surface);

        border:
            1px solid
            var(--guide-pro-line-strong);

        border-radius:
            var(--guide-pro-radius);

        box-shadow:
            0 2px 5px
            rgba(
                15,
                23,
                42,
                0.025
            );

        transition:
            border-color 150ms ease,
            box-shadow 150ms ease;
    }


    .help-search-control:focus-within {
        border-color:
            rgba(
                230,
                111,
                45,
                0.64
            );

        box-shadow:
            0 0 0 3px
            rgba(
                230,
                111,
                45,
                0.075
            );
    }


    .help-search-input {
        min-height: 44px;

        padding:
            10px
            12px;

        color:
            var(--guide-pro-heading);

        background: transparent;

        border: 0;

        font-size: 0.96rem;
        font-weight: 400;
    }


    .help-search-input:focus {
        border: 0;
        box-shadow: none;
        outline: 0;
    }


    .help-search-input::placeholder {
        color: #939dab;
    }


    .help-search-clear {
        min-width: 66px;

        min-height: 40px;

        padding:
            7px
            11px;

        color:
            var(--guide-pro-orange-deep);

        background:
            var(--guide-pro-orange-soft);

        border: 0;
        border-radius: 8px;

        font-size: 0.78rem;
        font-weight: 650;
    }


    .help-search-status {
        min-height: 18px;

        margin:
            7px
            2px
            0;

        color:
            var(--guide-pro-muted);

        font-size: 0.79rem;
        font-weight: 450;
    }


    /* ========================================================
       LEFT DOCUMENT NAVIGATION
       ======================================================== */

    .help-quick-grid {
        grid-column: 1;

        position: sticky;

        top: 90px;

        align-self: start;

        display: block;

        margin: 0;
        padding:
            0
            12px
            0
            0;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .help-quick-grid::before {
        display: block;

        margin:
            0
            0
            12px
            12px;

        content: "ON THIS PAGE";

        color: #8a94a3;

        font-size: 0.65rem;
        font-weight: 700;

        letter-spacing: 0.095em;
    }


    .help-quick-grid a {
        position: relative;

        min-height: 0;

        display: grid;

        grid-template-columns:
            22px
            minmax(0, 1fr);

        grid-template-rows:
            auto;

        align-items: center;

        gap: 8px;

        margin-bottom: 2px;

        padding:
            9px
            10px
            9px
            12px;

        color: #667182;
        background: transparent;

        border: 0;
        border-radius: 8px;

        box-shadow: none;

        text-decoration: none;

        transition:
            color 140ms ease,
            background 140ms ease;
    }


    .help-quick-grid a::before {
        position: absolute;

        top: 8px;
        bottom: 8px;
        left: 0;

        width: 2px;

        content: "";

        background: transparent;

        border-radius: 999px;
    }


    .help-quick-grid a:hover {
        color: #303947;

        background: #eef1f4;

        transform: none;
    }


    .help-quick-grid a[aria-current="location"] {
        color:
            var(--guide-pro-orange-deep);

        background:
            var(--guide-pro-orange-soft);
    }


    .help-quick-grid
    a[aria-current="location"]::before {
        background:
            var(--guide-pro-orange);
    }


    .help-quick-grid span {
        grid-row: auto;

        align-self: center;

        margin: 0;

        color: #a0a8b4;

        font-size: 0.66rem;
        font-weight: 700;

        line-height: 1;
    }


    .help-quick-grid
    a[aria-current="location"]
    span {
        color:
            var(--guide-pro-orange);
    }


    .help-quick-grid strong {
        font-size: 0.84rem;
        font-weight: 600;

        line-height: 1.3;

        white-space: normal;
    }


    .help-quick-grid small {
        display: none;
    }


    /* ========================================================
       DOCUMENT SECTIONS
       ======================================================== */

    .help-category {
        grid-column: 2;

        width: 100%;

        margin: 0;

        padding:
            46px
            0
            4px;

        border-top:
            1px solid
            var(--guide-pro-line);

        scroll-margin-top: 92px;
    }


    .help-category:first-of-type {
        padding-top: 0;

        border-top: 0;
    }


    .help-category-heading {
        display: grid;

        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 14px;

        align-items: start;

        margin-bottom: 20px;
    }


    .help-category-heading > span {
        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        color:
            var(--guide-pro-orange-deep);

        background:
            var(--guide-pro-orange-soft);

        border:
            1px solid
            rgba(
                230,
                111,
                45,
                0.15
            );

        border-radius: 10px;

        box-shadow: none;

        font-size: 0.68rem;
        font-weight: 750;
    }


    .help-category-heading p {
        margin:
            1px
            0
            4px;

        color:
            var(--guide-pro-orange-deep);

        font-size: 0.66rem;
        font-weight: 700;

        line-height: 1.3;

        letter-spacing: 0.09em;
    }


    .help-category-heading h2 {
        max-width: 650px;

        margin: 0;

        color:
            var(--guide-pro-heading);

        font-size:
            clamp(
                1.42rem,
                2vw,
                1.72rem
            );

        font-weight: 660;
        line-height: 1.18;

        letter-spacing: -0.028em;
    }


    /* ========================================================
       ACCORDIONS
       ======================================================== */

    .help-article {
        overflow: hidden;

        margin-bottom: 8px;

        background:
            var(--guide-pro-surface);

        border:
            1px solid
            var(--guide-pro-line);

        border-radius:
            var(--guide-pro-radius);

        box-shadow: none;

        transition:
            border-color 150ms ease,
            background 150ms ease;
    }


    .help-article:hover {
        border-color:
            var(--guide-pro-line-strong);
    }


    .help-article[open] {
        border-color:
            rgba(
                230,
                111,
                45,
                0.28
            );

        background: #fff;
    }


    .help-article summary {
        min-height: 58px;

        display: flex;
        align-items: center;

        padding:
            16px
            52px
            16px
            17px;

        color: #28313f;

        font-size: 0.94rem;
        font-weight: 600;

        line-height: 1.42;

        letter-spacing: -0.008em;
    }


    .help-article summary::after {
        right: 15px;

        width: 26px;
        height: 26px;

        display: grid;
        place-items: center;

        color: #758091;
        background: #f3f5f7;

        border:
            1px solid
            #e4e7eb;

        border-radius: 8px;

        font-size: 0.94rem;
        font-weight: 500;
    }


    .help-article[open]
    summary {
        color:
            var(--guide-pro-heading);
    }


    .help-article[open]
    summary::after {
        color:
            var(--guide-pro-orange-deep);

        background:
            var(--guide-pro-orange-soft);

        border-color:
            rgba(
                230,
                111,
                45,
                0.15
            );
    }


    .help-article-body {
        padding:
            0
            17px
            20px;

        color:
            var(--guide-pro-text);

        font-size: 0.92rem;
        line-height: 1.7;
    }


    .help-article-body strong {
        color: #343d49;

        font-weight: 620;
    }


    /* ========================================================
       PROCEDURES / LISTS
       ======================================================== */

    .help-steps {
        padding: 0;

        list-style: none;

        counter-reset:
            guide-pro-step;
    }


    .help-steps li {
        position: relative;

        min-height: 28px;

        margin-bottom: 11px;

        padding-left: 37px;

        counter-increment:
            guide-pro-step;
    }


    .help-steps li::before {
        position: absolute;

        top: 1px;
        left: 0;

        width: 25px;
        height: 25px;

        display: grid;
        place-items: center;

        content:
            counter(
                guide-pro-step
            );

        color:
            var(--guide-pro-orange-deep);

        background:
            var(--guide-pro-orange-soft);

        border-radius: 7px;

        font-size: 0.68rem;
        font-weight: 700;
    }


    .help-list {
        padding-left: 1.15rem;
    }


    .help-list li {
        margin-bottom: 8px;

        padding-left: 3px;
    }


    .help-list li::marker {
        color:
            var(--guide-pro-orange);
    }


    /* ========================================================
       NOTICES
       ======================================================== */

    .help-notice,
    .help-warning {
        margin:
            16px
            0;

        padding:
            12px
            14px;

        border-radius: 9px;

        font-size: 0.87rem;
        font-weight: 450;
        line-height: 1.58;
    }


    .help-notice {
        color: #69432b;
        background: #fff9f5;

        border:
            1px solid
            #f5dfcf;
    }


    .help-warning {
        color: #743f3f;
        background: #fff7f7;

        border:
            1px solid
            #efd8d8;
    }


    /* ========================================================
       ACTION BUTTONS
       ======================================================== */

    .help-action {
        min-height: 40px;

        padding:
            8px
            14px;

        border-radius: 9px;

        font-size: 0.83rem;
        font-weight: 600;
    }


    .help-action.primary {
        background:
            var(--guide-pro-orange);

        box-shadow: none;
    }


    .help-action.primary:hover {
        background:
            #d96024;
    }


    .help-action.secondary {
        color: #4f5a69;

        background: #ffffff;

        border:
            1px solid
            var(--guide-pro-line-strong);
    }


    .help-action.secondary:hover {
        color:
            var(--guide-pro-orange-deep);

        border-color:
            rgba(
                230,
                111,
                45,
                0.35
            );
    }


    /* ========================================================
       PLAN TABLE
       ======================================================== */

    .help-plan-table-wrapper {
        overflow: hidden;

        margin:
            0
            0
            16px;

        background:
            var(--guide-pro-surface);

        border:
            1px solid
            var(--guide-pro-line);

        border-radius:
            var(--guide-pro-radius);

        box-shadow: none;
    }


    .help-plan-table th,
    .help-plan-table td {
        padding:
            12px
            14px;

        border-bottom:
            1px solid
            #edf0f3;
    }


    .help-plan-table th {
        color: #697586;

        background: #f8f9fa;

        font-size: 0.67rem;
        font-weight: 700;

        letter-spacing: 0.05em;
    }


    .help-plan-table td {
        color: #465161;

        font-size: 0.87rem;
    }


    .help-plan-table td strong {
        color:
            var(--guide-pro-heading);

        font-weight: 620;
    }


    /* ========================================================
       SUPPORT — FRESH, NO NESTED CONTACT CARD
       ======================================================== */

    .help-support-panel {
        grid-column: 2;

        margin-top: 58px;

        padding:
            30px
            0
            0;

        color:
            var(--guide-pro-text);

        background: transparent;

        border:
            0;

        border-top:
            1px solid
            var(--guide-pro-line);

        border-radius: 0;

        box-shadow: none;

        scroll-margin-top: 92px;
    }


    .help-support-panel > span {
        display: block;

        margin:
            0
            0
            8px;

        color:
            var(--guide-pro-orange-deep);

        font-size: 0.67rem;
        font-weight: 700;

        letter-spacing: 0.09em;
    }


    .help-support-panel h2 {
        max-width: 620px;

        margin: 0;

        color:
            var(--guide-pro-heading);

        font-size:
            clamp(
                1.35rem,
                2vw,
                1.65rem
            );

        font-weight: 660;
        line-height: 1.2;

        letter-spacing: -0.026em;
    }


    .help-support-panel p {
        max-width: 620px;

        margin:
            12px
            0
            0;

        color: #667182;

        font-size: 0.91rem;
        font-weight: 400;
        line-height: 1.65;
    }


    /*
     * Flatten the old enclosing Admin Contacts card.
     * Its two phone links become independent actions.
     */
    .help-support-contacts {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 9px;

        margin-top: 22px;
    }


    .help-contact-admin {
        display: contents;
    }


    .help-contact-admin > span {
        display: none;
    }


    .help-contact-list {
        display: contents;
    }


    .help-contact-line,
    .help-contact-email {
        min-width: 0;
        min-height: 74px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: 3px;

        padding:
            13px
            14px;

        color:
            var(--guide-pro-heading);

        background:
            var(--guide-pro-surface);

        border:
            1px solid
            var(--guide-pro-line);

        border-radius:
            var(--guide-pro-radius);

        box-shadow: none;

        text-decoration: none;

        transition:
            border-color 150ms ease,
            background 150ms ease,
            transform 150ms ease;
    }


    .help-contact-line
    + .help-contact-line {
        border-top:
            1px solid
            var(--guide-pro-line);
    }


    .help-contact-line::before {
        content: "Phone";

        color:
            var(--guide-pro-muted);

        font-size: 0.65rem;
        font-weight: 650;

        letter-spacing: 0.045em;

        text-transform: uppercase;
    }


    .help-contact-email > span {
        display: block;

        margin: 0;

        color:
            var(--guide-pro-muted);

        font-size: 0.65rem;
        font-weight: 650;

        letter-spacing: 0.045em;

        text-transform: uppercase;
    }


    .help-contact-line strong,
    .help-contact-email strong {
        color:
            var(--guide-pro-heading);

        font-size: 0.86rem;
        font-weight: 620;

        line-height: 1.3;

        overflow-wrap: anywhere;
    }


    .help-contact-line small,
    .help-contact-email small {
        color: #8993a1;

        font-size: 0.70rem;
        font-weight: 450;
    }


    .help-contact-line:hover,
    .help-contact-email:hover {
        color:
            var(--guide-pro-orange-deep);

        background:
            #fffdfb;

        border-color:
            rgba(
                230,
                111,
                45,
                0.38
            );

        transform:
            translateY(-1px);
    }


    .help-contact-line:focus-visible,
    .help-contact-email:focus-visible {
        outline:
            3px solid
            rgba(
                230,
                111,
                45,
                0.14
            );

        outline-offset: 2px;
    }


    .help-support-actions {
        margin-top: 14px;
    }


    .help-support-panel
    .help-action.secondary {
        color: #586272;

        background: transparent;

        border:
            1px solid
            var(--guide-pro-line-strong);
    }


    /* ========================================================
       FOOTER
       ======================================================== */

    .help-footer {
        padding:
            22px
            clamp(
                28px,
                4vw,
                56px
            );

        color: #818b99;

        background:
            var(--guide-pro-bg);

        border-top:
            1px solid
            var(--guide-pro-line);

        font-size: 0.74rem;
        font-weight: 450;
    }


    /* ========================================================
       ACCESSIBILITY / REDUCED MOTION
       ======================================================== */

    @media
    (prefers-reduced-motion: reduce) {

        .help-back-link,
        .help-quick-grid a,
        .help-article,
        .help-contact-line,
        .help-contact-email,
        .help-action {
            transition: none !important;
        }
    }
}


/*
 * Between 900px and 1060px, reduce the left rail slightly
 * while retaining the desktop documentation model.
 */
@media
(display-mode: browser)
and (min-width: 900px)
and (max-width: 1060px) {

    .help-shell {
        width:
            min(
                100% - 40px,
                960px
            );

        grid-template-columns:
            180px
            minmax(0, 1fr);

        column-gap: 32px;
    }


    .help-quick-grid {
        padding-right: 4px;
    }


    .help-support-contacts {
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   SOPHRA_PRO_RESPONSIVE_PWA_MOBILE_V1

   Shared professional User Guide presentation for:
   - mobile browser
   - tablet browser below desktop breakpoint
   - installed standalone PWA

   Desktop >= 900px retains the documentation rail layout above.
   ============================================================ */

@media
(display-mode: browser) and (max-width: 899px),
(display-mode: standalone) {

    :root {
        --guide-pro-mobile-bg: #f6f7f9;
        --guide-pro-mobile-surface: #ffffff;

        --guide-pro-mobile-heading: #111827;
        --guide-pro-mobile-text: #475569;
        --guide-pro-mobile-muted: #748091;

        --guide-pro-mobile-line: #e2e6eb;

        --guide-pro-mobile-orange: #e66f2d;
        --guide-pro-mobile-orange-deep: #a94b1d;
        --guide-pro-mobile-orange-soft: #fff4ed;

        --guide-pro-progress: 0;
    }


    html {
        background:
            var(--guide-pro-mobile-bg);
    }


    body {
        color:
            var(--guide-pro-mobile-text);

        background:
            linear-gradient(
                180deg,
                #ffffff 0,
                #ffffff 210px,
                var(--guide-pro-mobile-bg) 430px
            );

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif;

        font-size: 16px;
        font-weight: 400;
        line-height: 1.62;

        letter-spacing: -0.004em;

        -webkit-font-smoothing:
            antialiased;

        text-rendering:
            optimizeLegibility;
    }


    /*
     * Same restrained reading progress used on desktop.
     */
    body::before {
        position: fixed;

        top: 0;
        left: 0;

        z-index: 10000;

        width: 100%;
        height: 2px;

        content: "";

        background:
            linear-gradient(
                90deg,
                #ef8a49,
                #df6327
            );

        transform:
            scaleX(
                var(
                    --guide-pro-progress,
                    0
                )
            );

        transform-origin:
            left center;

        pointer-events: none;
    }


    /* ========================================================
       TOP BAR
       ======================================================== */

    .help-topbar {
        position: sticky;

        top: 0;
        z-index: 100;

        min-height: 60px;

        padding:
            max(
                9px,
                env(safe-area-inset-top)
            )
            16px
            9px;

        background:
            rgba(
                255,
                255,
                255,
                0.95
            );

        border-bottom:
            1px solid
            rgba(
                226,
                230,
                235,
                0.92
            );

        box-shadow: none;

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }


    .help-brand {
        gap: 0;
    }


    .help-brand strong {
        color: #272f3a;

        font-size: 0.69rem;
        font-weight: 750;

        letter-spacing: 0.105em;
    }


    .help-back-link {
        min-height: 38px;

        padding: 6px 5px;

        color: #596475;
        background: transparent;

        border: 0;
        border-radius: 8px;

        font-size: 0.80rem;
        font-weight: 600;
    }


    .help-back-link::before {
        margin-right: 6px;

        content: "←";

        color: #8c95a2;
    }


    .help-back-link:active {
        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        background:
            var(
                --guide-pro-mobile-orange-soft
            );
    }


    /* ========================================================
       DOCUMENT FRAME
       ======================================================== */

    .help-shell {
        width:
            calc(
                100% - 28px
            );

        max-width: 720px;

        margin: 0 auto;

        display: block;

        padding:
            32px
            0
            calc(
                78px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }


    /* ========================================================
       HERO
       ======================================================== */

    .help-hero {
        width: 100%;
        max-width: none;

        margin:
            0
            0
            22px;
    }


    .help-eyebrow {
        display: block;

        margin:
            0
            0
            9px;

        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        font-size: 0.66rem;
        font-weight: 720;

        line-height: 1.3;

        letter-spacing: 0.095em;
    }


    .help-hero h1 {
        max-width: 620px;

        margin: 0;

        color:
            var(
                --guide-pro-mobile-heading
            );

        font-size:
            clamp(
                2rem,
                9.5vw,
                2.8rem
            );

        font-weight: 700;
        line-height: 1.055;

        letter-spacing: -0.043em;

        text-wrap: balance;
    }


    .help-hero > p {
        max-width: 620px;

        margin:
            16px
            0
            0;

        color: #5b6676;

        font-size: 0.96rem;
        font-weight: 400;
        line-height: 1.67;
    }


    /* ========================================================
       SEARCH
       ======================================================== */

    .help-search {
        width: 100%;
        max-width: none;

        margin:
            0
            0
            22px;

        padding: 0;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }


    .help-search label {
        display: block;

        margin:
            0
            0
            7px;

        color: #687486;

        font-size: 0.69rem;
        font-weight: 650;

        letter-spacing: 0.025em;
    }


    .help-search-control {
        min-height: 50px;

        gap: 5px;

        padding: 4px;

        background:
            var(
                --guide-pro-mobile-surface
            );

        border:
            1px solid
            #d8dde4;

        border-radius: 11px;

        box-shadow:
            0 2px 5px
            rgba(
                15,
                23,
                42,
                0.025
            );
    }


    .help-search-control:focus-within {
        border-color:
            rgba(
                230,
                111,
                45,
                0.62
            );

        box-shadow:
            0 0 0 3px
            rgba(
                230,
                111,
                45,
                0.075
            );
    }


    .help-search-input {
        min-width: 0;
        min-height: 42px;

        padding:
            9px
            10px;

        color:
            var(
                --guide-pro-mobile-heading
            );

        background: transparent;

        border: 0;

        font-size: 16px;
        font-weight: 400;
    }


    .help-search-input:focus {
        border: 0;
        outline: 0;
        box-shadow: none;
    }


    .help-search-input::placeholder {
        color: #949da9;
    }


    .help-search-clear {
        min-width: 61px;
        min-height: 38px;

        padding:
            7px
            9px;

        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        background:
            var(
                --guide-pro-mobile-orange-soft
            );

        border: 0;
        border-radius: 8px;

        font-size: 0.75rem;
        font-weight: 650;
    }


    .help-search-status {
        min-height: 17px;

        margin:
            6px
            2px
            0;

        color:
            var(
                --guide-pro-mobile-muted
            );

        font-size: 0.77rem;
        font-weight: 450;
    }


    /* ========================================================
       MOBILE / PWA SECTION NAVIGATION
       ======================================================== */

    .help-quick-grid {
        position: sticky;

        top:
            calc(
                60px +
                env(
                    safe-area-inset-top,
                    0px
                )
            );

        z-index: 70;

        width:
            calc(
                100% + 28px
            );

        margin:
            0
            0
            34px
            -14px;

        padding:
            7px
            14px;

        display: flex;

        gap: 6px;

        overflow-x: auto;
        overflow-y: hidden;

        overscroll-behavior-x:
            contain;

        scroll-snap-type:
            x proximity;

        scrollbar-width: none;

        background:
            rgba(
                246,
                247,
                249,
                0.95
            );

        border-top:
            1px solid
            rgba(
                226,
                230,
                235,
                0.8
            );

        border-bottom:
            1px solid
            rgba(
                226,
                230,
                235,
                0.95
            );

        border-radius: 0;

        box-shadow: none;

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

        -webkit-overflow-scrolling:
            touch;
    }


    .help-quick-grid::-webkit-scrollbar {
        display: none;
    }


    .help-quick-grid::before {
        display: none;
    }


    .help-quick-grid a {
        flex:
            0
            0
            auto;

        min-height: 38px;

        display: inline-flex;

        align-items: center;

        gap: 6px;

        padding:
            8px
            10px;

        color: #657182;

        background:
            #ffffff;

        border:
            1px solid
            #e1e5ea;

        border-radius: 9px;

        box-shadow: none;

        text-decoration: none;

        scroll-snap-align: start;

        -webkit-tap-highlight-color:
            transparent;
    }


    .help-quick-grid a::before {
        display: none;
    }


    .help-quick-grid
    a[aria-current="location"] {
        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        background:
            var(
                --guide-pro-mobile-orange-soft
            );

        border-color:
            rgba(
                230,
                111,
                45,
                0.23
            );
    }


    .help-quick-grid span {
        margin: 0;

        color: #98a1ad;

        font-size: 0.64rem;
        font-weight: 700;

        line-height: 1;
    }


    .help-quick-grid
    a[aria-current="location"]
    span {
        color:
            var(
                --guide-pro-mobile-orange
            );
    }


    .help-quick-grid strong {
        font-size: 0.79rem;
        font-weight: 600;

        line-height: 1.2;

        white-space: nowrap;
    }


    .help-quick-grid small {
        display: none;
    }


    /* ========================================================
       GUIDE SECTIONS
       ======================================================== */

    .help-category {
        width: 100%;

        margin: 0;

        padding:
            38px
            0
            3px;

        border-top:
            1px solid
            var(
                --guide-pro-mobile-line
            );

        scroll-margin-top: 126px;
    }


    .help-category:first-of-type {
        padding-top: 0;

        border-top: 0;
    }


    .help-category-heading {
        display: grid;

        grid-template-columns:
            39px
            minmax(0, 1fr);

        gap: 12px;

        align-items: start;

        margin-bottom: 17px;
    }


    .help-category-heading > span {
        width: 36px;
        height: 36px;

        display: grid;
        place-items: center;

        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        background:
            var(
                --guide-pro-mobile-orange-soft
            );

        border:
            1px solid
            rgba(
                230,
                111,
                45,
                0.15
            );

        border-radius: 9px;

        box-shadow: none;

        font-size: 0.66rem;
        font-weight: 730;
    }


    .help-category-heading p {
        margin:
            0
            0
            4px;

        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        font-size: 0.64rem;
        font-weight: 700;

        letter-spacing: 0.08em;
    }


    .help-category-heading h2 {
        margin: 0;

        color:
            var(
                --guide-pro-mobile-heading
            );

        font-size:
            clamp(
                1.28rem,
                5.8vw,
                1.55rem
            );

        font-weight: 660;
        line-height: 1.18;

        letter-spacing: -0.026em;
    }


    /* ========================================================
       ACCORDIONS
       ======================================================== */

    .help-article {
        overflow: hidden;

        margin-bottom: 8px;

        background:
            var(
                --guide-pro-mobile-surface
            );

        border:
            1px solid
            var(
                --guide-pro-mobile-line
            );

        border-radius: 11px;

        box-shadow: none;
    }


    .help-article[open] {
        border-color:
            rgba(
                230,
                111,
                45,
                0.27
            );
    }


    .help-article summary {
        min-height: 55px;

        display: flex;
        align-items: center;

        padding:
            15px
            48px
            15px
            15px;

        color: #2c3542;

        font-size: 0.90rem;
        font-weight: 600;

        line-height: 1.4;

        letter-spacing: -0.006em;
    }


    .help-article summary::after {
        right: 13px;

        width: 25px;
        height: 25px;

        display: grid;
        place-items: center;

        color: #778292;
        background: #f3f5f7;

        border:
            1px solid
            #e3e7eb;

        border-radius: 8px;

        font-size: 0.91rem;
        font-weight: 500;
    }


    .help-article[open]
    summary::after {
        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        background:
            var(
                --guide-pro-mobile-orange-soft
            );

        border-color:
            rgba(
                230,
                111,
                45,
                0.15
            );
    }


    .help-article-body {
        padding:
            0
            15px
            18px;

        color:
            var(
                --guide-pro-mobile-text
            );

        font-size: 0.90rem;
        font-weight: 400;
        line-height: 1.68;
    }


    .help-article-body strong {
        color: #353e4b;

        font-weight: 620;
    }


    /* ========================================================
       STEPS / LISTS
       ======================================================== */

    .help-steps {
        padding: 0;

        list-style: none;

        counter-reset:
            guide-mobile-step;
    }


    .help-steps li {
        position: relative;

        min-height: 27px;

        margin-bottom: 10px;

        padding-left: 36px;

        counter-increment:
            guide-mobile-step;
    }


    .help-steps li::before {
        position: absolute;

        top: 1px;
        left: 0;

        width: 24px;
        height: 24px;

        display: grid;
        place-items: center;

        content:
            counter(
                guide-mobile-step
            );

        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        background:
            var(
                --guide-pro-mobile-orange-soft
            );

        border-radius: 7px;

        font-size: 0.67rem;
        font-weight: 700;
    }


    .help-list {
        padding-left: 1.05rem;
    }


    .help-list li {
        margin-bottom: 8px;

        padding-left: 2px;
    }


    .help-list li::marker {
        color:
            var(
                --guide-pro-mobile-orange
            );
    }


    /* ========================================================
       NOTICES
       ======================================================== */

    .help-notice,
    .help-warning {
        margin:
            14px
            0;

        padding:
            11px
            12px;

        border-radius: 9px;

        font-size: 0.85rem;
        font-weight: 450;
        line-height: 1.55;
    }


    .help-notice {
        color: #6b452d;

        background: #fff9f5;

        border:
            1px solid
            #f2dfd1;
    }


    .help-warning {
        color: #744242;

        background: #fff7f7;

        border:
            1px solid
            #efdada;
    }


    /* ========================================================
       PLAN TABLE
       ======================================================== */

    .help-plan-table-wrapper {
        overflow-x: auto;

        margin:
            0
            0
            15px;

        background:
            var(
                --guide-pro-mobile-surface
            );

        border:
            1px solid
            var(
                --guide-pro-mobile-line
            );

        border-radius: 11px;

        box-shadow: none;

        -webkit-overflow-scrolling:
            touch;
    }


    .help-plan-table {
        min-width: 620px;
    }


    .help-plan-table th,
    .help-plan-table td {
        padding:
            11px
            12px;

        border-bottom:
            1px solid
            #edf0f3;
    }


    .help-plan-table th {
        color: #697586;

        background: #f8f9fa;

        font-size: 0.65rem;
        font-weight: 700;

        letter-spacing: 0.045em;
    }


    .help-plan-table td {
        color: #465161;

        font-size: 0.84rem;
    }


    /* ========================================================
       SUPPORT
       ======================================================== */

    .help-support-panel {
        margin-top: 48px;

        padding:
            28px
            0
            0;

        color:
            var(
                --guide-pro-mobile-text
            );

        background: transparent;

        border: 0;

        border-top:
            1px solid
            var(
                --guide-pro-mobile-line
            );

        border-radius: 0;

        box-shadow: none;

        scroll-margin-top: 126px;
    }


    .help-support-panel > span {
        display: block;

        margin:
            0
            0
            7px;

        color:
            var(
                --guide-pro-mobile-orange-deep
            );

        font-size: 0.65rem;
        font-weight: 700;

        letter-spacing: 0.08em;
    }


    .help-support-panel h2 {
        margin: 0;

        color:
            var(
                --guide-pro-mobile-heading
            );

        font-size:
            clamp(
                1.28rem,
                6vw,
                1.55rem
            );

        font-weight: 660;
        line-height: 1.2;

        letter-spacing: -0.025em;
    }


    .help-support-panel p {
        margin:
            11px
            0
            0;

        color: #657182;

        font-size: 0.89rem;
        line-height: 1.62;
    }


    /*
     * Same flattened three-action support model as desktop,
     * stacked for comfortable touch use.
     */
    .help-support-contacts {
        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 20px;
    }


    .help-contact-admin {
        display: contents;
    }


    .help-contact-admin > span {
        display: none;
    }


    .help-contact-list {
        display: contents;
    }


    .help-contact-line,
    .help-contact-email {
        min-width: 0;
        min-height: 68px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        gap: 2px;

        padding:
            12px
            13px;

        color:
            var(
                --guide-pro-mobile-heading
            );

        background:
            var(
                --guide-pro-mobile-surface
            );

        border:
            1px solid
            var(
                --guide-pro-mobile-line
            );

        border-radius: 11px;

        box-shadow: none;

        text-decoration: none;

        -webkit-tap-highlight-color:
            transparent;
    }


    .help-contact-line
    + .help-contact-line {
        border-top:
            1px solid
            var(
                --guide-pro-mobile-line
            );
    }


    .help-contact-line::before {
        content: "Phone";

        color:
            var(
                --guide-pro-mobile-muted
            );

        font-size: 0.63rem;
        font-weight: 650;

        letter-spacing: 0.04em;

        text-transform: uppercase;
    }


    .help-contact-email > span {
        display: block;

        margin: 0;

        color:
            var(
                --guide-pro-mobile-muted
            );

        font-size: 0.63rem;
        font-weight: 650;

        letter-spacing: 0.04em;

        text-transform: uppercase;
    }


    .help-contact-line strong,
    .help-contact-email strong {
        color:
            var(
                --guide-pro-mobile-heading
            );

        font-size: 0.88rem;
        font-weight: 620;

        line-height: 1.3;

        overflow-wrap: anywhere;
    }


    .help-contact-line small,
    .help-contact-email small {
        color: #8993a1;

        font-size: 0.69rem;
        font-weight: 450;
    }


    .help-contact-line:active,
    .help-contact-email:active {
        background: #fffaf6;

        border-color:
            rgba(
                230,
                111,
                45,
                0.32
            );
    }


    .help-support-actions {
        margin-top: 13px;
    }


    .help-action {
        min-height: 42px;

        padding:
            9px
            13px;

        border-radius: 9px;

        font-size: 0.81rem;
        font-weight: 600;
    }


    .help-support-panel
    .help-action.secondary {
        color: #576272;

        background: transparent;

        border:
            1px solid
            #d7dce2;
    }


    /* ========================================================
       FOOTER
       ======================================================== */

    .help-footer {
        padding:
            20px
            16px
            calc(
                20px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        color: #838d9b;

        background:
            var(
                --guide-pro-mobile-bg
            );

        border-top:
            1px solid
            var(
                --guide-pro-mobile-line
            );

        font-size: 0.73rem;
        font-weight: 450;
    }


    /* ========================================================
       REDUCED MOTION
       ======================================================== */

    @media
    (prefers-reduced-motion: reduce) {

        .help-quick-grid a,
        .help-article,
        .help-contact-line,
        .help-contact-email,
        .help-action {
            transition: none !important;
        }
    }
}


/*
 * Narrow phones.
 */
@media
(display-mode: browser) and (max-width: 380px),
(display-mode: standalone) and (max-width: 380px) {

    .help-shell {
        width:
            calc(
                100% - 22px
            );
    }


    .help-quick-grid {
        width:
            calc(
                100% + 22px
            );

        margin-left: -11px;

        padding-left: 11px;
        padding-right: 11px;
    }


    .help-hero h1 {
        font-size:
            clamp(
                1.86rem,
                10vw,
                2.3rem
            );
    }


    .help-category-heading {
        grid-template-columns:
            35px
            minmax(0, 1fr);

        gap: 10px;
    }


    .help-category-heading > span {
        width: 33px;
        height: 33px;
    }


    .help-article summary {
        padding-left: 13px;
    }
}