
    body { font-family:'Open Sans', sans-serif; background:linear-gradient(135deg,#e0f7fa 0%,#b2ebf2 46%,#fff3e0 100%); }
    h1,h2,h3,.font-heading { font-family:'Montserrat', sans-serif; }
    .card-shadow { box-shadow:0 18px 45px rgba(15,23,42,.12); }
    .glass { background:rgba(255,255,255,.9); backdrop-filter:blur(14px); }
    .hero-mask { background:linear-gradient(90deg,rgba(0,119,190,.94),rgba(0,168,150,.82),rgba(247,127,0,.44)); }
  
        .category-logo-picture { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
        @media (max-width: 640px) {
            .category-logo-picture .category-tab-logo { width: 1.35rem; height: 1.35rem; }
            .category-logo-picture .category-card-logo { width: 4rem; height: 4rem; }
            .category-logo-picture .category-intro-logo { width: 3.9rem; height: 3.9rem; }
            .category-intro-logo-wrap { width: 4.75rem !important; height: 4.75rem !important; border-radius: 1rem !important; }
            .category-intro-content { gap: .9rem !important; align-items: flex-start !important; }
            .guide-hero-logo, .guides-hero-logo, .category-guides-logo { max-width: 4.75rem !important; max-height: 4.75rem !important; }
        }
        @media (max-width: 430px) {
            .category-intro-content { flex-direction: row !important; }
            .category-intro-copy h1, .category-intro-copy h2 { font-size: 1.35rem !important; line-height: 1.15 !important; }
            .category-intro-copy p { font-size: .9rem !important; }
        }

    
        .affiliate-disclosure-note { font-size: .78rem; color: #64748b; line-height: 1.45; }
        .affiliate-cta-card { background: linear-gradient(135deg, rgba(0,119,190,.08), rgba(0,194,203,.10), rgba(255,209,102,.16)); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
        .affiliate-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .85rem; background: #0077be; color: #fff; font-weight: 800; padding: .8rem 1.2rem; box-shadow: 0 10px 22px rgba(0,119,190,.22); transition: transform .18s ease, background .18s ease; }
        .affiliate-cta-button:hover { transform: translateY(-1px); background: #005f99; }
        @media print { .affiliate-cta-card, .affiliate-cta-button { display: none !important; } }

    

                /* v20 premium surface system - one consistent surface + hairline border + accent bar, color used sparingly */
        :root {
            --ink: #15303D;
            --ink-soft: #4B6270;
            --hairline: rgba(21,48,61,.14);
            --hairline-strong: rgba(21,48,61,.22);
            --surface-glass: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,251,242,.68));
            --shadow-soft: 0 1px 2px rgba(21,48,61,.05), 0 14px 30px rgba(21,48,61,.09);
            --shadow-lift: 0 2px 4px rgba(21,48,61,.06), 0 22px 40px rgba(21,48,61,.13);
            --accent-1: #0077be;
            --accent-2: #20B2AA;
            --accent-3: #FF7F50;
            --accent-4: #C9A227;
            --glow-1: rgba(0,119,190,.16);
            --glow-2: rgba(32,178,170,.16);
            --glow-3: rgba(255,127,80,.16);
            --glow-4: rgba(201,162,39,.18);
        }
        .glass-panel,
        .travel-card,
        .map-section-card,
        .booking-link-card,
        .airport-card,
        .travel-info-card,
        .affiliate-cta-card,
        .bg-white,
        .bg-white\/90,
        .bg-white\/95,
        .bg-white\/80,
        .bg-white\/70,
        .bg-white\/60,
        article.bg-white,
        section.bg-white,
        div.bg-white {
            position: relative !important;
            background: var(--surface-glass) !important;
            backdrop-filter: blur(16px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
            border: 1px solid var(--hairline) !important;
            box-shadow: var(--shadow-soft) !important;
            transition: box-shadow .18s ease, transform .18s ease;
        }
        .glass-panel::before,
        .travel-card::before,
        .map-section-card::before,
        .booking-link-card::before,
        .airport-card::before,
        .travel-info-card::before,
        .rounded-2xl.bg-white::before,
        .rounded-3xl.bg-white::before,
        .rounded-2xl.bg-white\/90::before,
        .rounded-3xl.bg-white\/90::before,
        .rounded-2xl.bg-white\/95::before,
        .rounded-3xl.bg-white\/95::before,
        .rounded-2xl.bg-white\/80::before,
        .rounded-3xl.bg-white\/80::before,
        .rounded-2xl.bg-white\/70::before,
        .rounded-3xl.bg-white\/70::before,
        .rounded-2xl.bg-white\/60::before,
        .rounded-3xl.bg-white\/60::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: var(--accent-1);
            border-radius: inherit;
            pointer-events: none;
        }
        .grid > .bg-white:nth-child(4n+1)::before,
        .grid > article:nth-child(4n+1)::before,
        .grid > a:nth-child(4n+1)::before,
        .map-section-card:nth-of-type(4n+1)::before,
        .travel-info-card:nth-child(4n+1)::before,
        .booking-link-card:nth-child(4n+1)::before { background: var(--accent-1); }
        .grid > .bg-white:nth-child(4n+1),
        .grid > article:nth-child(4n+1),
        .grid > a:nth-child(4n+1),
        .map-section-card:nth-of-type(4n+1),
        .travel-info-card:nth-child(4n+1),
        .booking-link-card:nth-child(4n+1) { box-shadow: var(--shadow-soft), 0 18px 34px -18px var(--glow-1) !important; }
        .grid > .bg-white:nth-child(4n+2)::before,
        .grid > article:nth-child(4n+2)::before,
        .grid > a:nth-child(4n+2)::before,
        .map-section-card:nth-of-type(4n+2)::before,
        .travel-info-card:nth-child(4n+2)::before,
        .booking-link-card:nth-child(4n+2)::before { background: var(--accent-2); }
        .grid > .bg-white:nth-child(4n+2),
        .grid > article:nth-child(4n+2),
        .grid > a:nth-child(4n+2),
        .map-section-card:nth-of-type(4n+2),
        .travel-info-card:nth-child(4n+2),
        .booking-link-card:nth-child(4n+2) { box-shadow: var(--shadow-soft), 0 18px 34px -18px var(--glow-2) !important; }
        .grid > .bg-white:nth-child(4n+3)::before,
        .grid > article:nth-child(4n+3)::before,
        .grid > a:nth-child(4n+3)::before,
        .map-section-card:nth-of-type(4n+3)::before,
        .travel-info-card:nth-child(4n+3)::before,
        .booking-link-card:nth-child(4n+3)::before { background: var(--accent-3); }
        .grid > .bg-white:nth-child(4n+3),
        .grid > article:nth-child(4n+3),
        .grid > a:nth-child(4n+3),
        .map-section-card:nth-of-type(4n+3),
        .travel-info-card:nth-child(4n+3),
        .booking-link-card:nth-child(4n+3) { box-shadow: var(--shadow-soft), 0 18px 34px -18px var(--glow-3) !important; }
        .grid > .bg-white:nth-child(4n+4)::before,
        .grid > article:nth-child(4n+4)::before,
        .grid > a:nth-child(4n+4)::before,
        .map-section-card:nth-of-type(4n+4)::before,
        .travel-info-card:nth-child(4n+4)::before,
        .booking-link-card:nth-child(4n+4)::before { background: var(--accent-4); }
        .grid > .bg-white:nth-child(4n+4),
        .grid > article:nth-child(4n+4),
        .grid > a:nth-child(4n+4),
        .map-section-card:nth-of-type(4n+4),
        .travel-info-card:nth-child(4n+4),
        .booking-link-card:nth-child(4n+4) { box-shadow: var(--shadow-soft), 0 18px 34px -18px var(--glow-4) !important; }
        a.bg-white:hover,
        a.bg-white\/90:hover,
        a.bg-white\/95:hover,
        .grid > a:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lift) !important;
        }
        .mobile-search-panel,
        .rounded-2xl.bg-white,
        .rounded-3xl.bg-white,
        .shadow-xl.bg-white,
        .card-shadow.bg-white {
            background: var(--surface-glass) !important;
            border: 1px solid var(--hairline) !important;
            backdrop-filter: blur(16px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
            box-shadow: var(--shadow-soft) !important;
        }
        input,
        select,
        textarea {
            background: rgba(255,255,255,.9) !important;
            border: 1px solid var(--hairline) !important;
        }
        .category-map,
        #airport-route-map,
        .leaflet-container {
            background: var(--surface-glass) !important;
            border: 1px solid var(--hairline) !important;
        }
        .map-count-pill,
        .airport-code,
        .travel-stat,
        .subtype-bubble,
        .tag-pill {
            border-color: var(--hairline-strong) !important;
        }
        .map-main .travel-card,
        .map-main .map-section-card,
        .map-main .airport-card,
        .map-main .travel-info-card,
        .map-main .booking-link-card {
            background: var(--surface-glass) !important;
            border: 1px solid var(--hairline) !important;
        }
        .category-map-shell.map-panel-food::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent-1); }
        .category-map-shell.map-panel-lodging::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent-2); }
        .category-map-shell.map-panel-attractions::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent-3); }
        .category-map-shell.map-panel-shopping::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent-4); }
        .category-map-shell { position:relative; background: var(--surface-glass) !important; border: 1px solid var(--hairline) !important; }
        @media print {
            .glass-panel,
            .travel-card,
            .map-section-card,
            .booking-link-card,
            .airport-card,
            .travel-info-card,
            .affiliate-cta-card,
            .bg-white,
            .bg-white\/90,
            .bg-white\/95,
            .bg-white\/80,
            .bg-white\/70,
            .bg-white\/60 {
                background: #fff !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
            }
            .glass-panel::before, .travel-card::before, .map-section-card::before,
            .bg-white::before, .bg-white\/90::before, .bg-white\/95::before { display: none !important; }
        }
        @supports not (backdrop-filter: blur(1px)) {
            .glass-panel, .travel-card, .map-section-card, .booking-link-card, .airport-card,
            .travel-info-card, .affiliate-cta-card, .bg-white, .bg-white\/90, .bg-white\/95,
            .bg-white\/80, .bg-white\/70, .bg-white\/60 {
                background: rgba(255,253,248,.96) !important;
            }
        }
        /* v20 premium treatment for the listing-detail fact boxes (Category / Phone / Address / Map coordinates) */
        .rounded-2xl.bg-sky-50,
        .rounded-2xl.bg-teal-50,
        .rounded-2xl.bg-orange-50,
        .rounded-2xl.bg-amber-50 {
            position: relative;
            background: rgba(255,255,255,.6) !important;
            border: 1px solid var(--hairline) !important;
            box-shadow: 0 1px 2px rgba(21,48,61,.04) !important;
        }
        .rounded-2xl.bg-sky-50::before,
        .rounded-2xl.bg-teal-50::before,
        .rounded-2xl.bg-orange-50::before,
        .rounded-2xl.bg-amber-50::before {
            content: '';
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 3px;
            border-radius: inherit;
        }
        .rounded-2xl.bg-sky-50::before { background: var(--accent-1); }
        .rounded-2xl.bg-teal-50::before { background: var(--accent-2); }
        .rounded-2xl.bg-orange-50::before { background: var(--accent-3); }
        .rounded-2xl.bg-amber-50::before { background: var(--accent-4); }


    