.v-application { background: transparent !important; }

        [v-cloak] { display: none !important; }

        /* Warm cream-to-mint hero backdrop, echoes the mobile app palette */
        .help-hero {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(1200px 480px at 80% -10%, rgba(233, 180, 76, 0.22), transparent 60%),
                radial-gradient(900px 420px at 10% 120%, rgba(95, 167, 119, 0.20), transparent 60%),
                linear-gradient(180deg, #FBF5E9 0%, #F1E6CF 100%);
        }
        .help-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 0, rgba(30, 111, 123, 0.08), transparent 50%);
            pointer-events: none;
        }

        .help-search-card {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(10px);
            border-radius: 22px;
            border: 1px solid rgba(120, 86, 50, 0.12);
            box-shadow:
                0 18px 48px rgba(30, 60, 60, 0.10),
                0 2px 6px rgba(30, 60, 60, 0.05);
        }

        .category-card {
            border-radius: 20px;
            border: 1px solid rgba(30, 111, 123, 0.10);
            background: #FFFFFF;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
            cursor: pointer;
            height: 100%;
        }
        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 32px rgba(30, 111, 123, 0.12);
            border-color: rgba(30, 111, 123, 0.28);
        }
        .category-card.active {
            border-color: var(--primary-base);
            box-shadow: 0 16px 32px rgba(30, 111, 123, 0.18);
        }
        .category-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
        }

        /* Scroll target for topic/search filtering. The app bar is fixed, so
           without this margin the results heading lands underneath it. */
        #faq-results {
            scroll-margin-top: 88px;
        }

        .faq-card {
            border-radius: 20px;
            background: #FFFFFF;
            border: 1px solid rgba(30, 60, 60, 0.06);
            box-shadow: 0 12px 36px rgba(30, 60, 60, 0.06);
        }

        /* Vuetify expansion panel polish so the FAQ list feels modern */
        .faq-panel .v-expansion-panel-title {
            padding: 18px 22px;
            font-weight: 600;
            font-size: 16px;
            color: var(--ink);
        }
        .faq-panel .v-expansion-panel-text__wrapper {
            padding: 4px 22px 22px 22px;
            color: var(--muted);
            line-height: 1.65;
            font-size: 15px;
        }
        .faq-panel .v-expansion-panel--active > .v-expansion-panel-title {
            color: var(--primary-base);
        }
        .faq-tag {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 2px 10px;
            border-radius: 999px;
            background: var(--primary-soft);
            color: var(--primary-base);
            font-weight: 700;
        }

        .contact-card {
            border-radius: 22px;
            border: 1px solid rgba(30, 111, 123, 0.14);
        }

        .empty-state {
            border-radius: 20px;
            border: 1px dashed rgba(30, 111, 123, 0.28);
            background: rgba(214, 238, 232, 0.30);
            padding: 36px 24px;
            text-align: center;
            color: var(--muted);
        }

        .section-eyebrow {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--primary-base);
            margin-bottom: 8px;
        }