:root {
            --primary: #ff385c;
            --primary-hover: #d90b34;
            --text-dark: #0f172a;
            --text-muted: #64748b;
            --bg-page: #f8fafc;
            --border: #e2e8f0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-page);
            color: var(--text-dark);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Hero / Search Area */
        #hero {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            background: linear-gradient(to bottom, #ffffff, #f8fafc);
            border-bottom: 1px solid transparent;
            z-index: 10;
        }

        .hero-initial {
            height: 100vh;
            padding-bottom: 10vh;
        }

        .hero-active {
            height: auto;
            padding: 1.5rem;
            border-bottom-color: var(--border);
            background: #ffffff;
            position: sticky;
            top: 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .brand-logo {
            font-size: 1.5rem; font-weight: 800; color: var(--primary);
            letter-spacing: -0.02em; margin-bottom: 1.5rem; transition: all 0.3s ease;
            text-decoration: none;
        }
        .hero-active .brand-logo { font-size: 1.15rem; margin-bottom: 1rem; }

        .hero-text {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        .hero-active .hero-text { display: none; }
        .hero-text h1 { font-size: 3rem; margin: 0 0 1rem; letter-spacing: -0.02em; }
        .hero-text p { font-size: 1.25rem; color: var(--text-muted); margin: 0; }

        /* Main Search Bar */
        .search-bar {
            display: flex;
            align-items: center;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 9999px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
            padding: 8px 8px 8px 32px;
            width: 100%;
            max-width: 800px;
        }
        .search-input-group { display: flex; flex-direction: column; flex: 1; padding-right: 16px; position: relative; }
        .search-input-group label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--text-dark); margin-bottom: 4px; }
        .search-input-group input { border: none; outline: none; background: transparent; font-size: 1rem; width: 100%; }

        /* Shared typeahead dropdown, used by the Activity field (known-category
           prefix match) and the Where field (address suggestions). */
        .field-suggestions {
            display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
            background: #ffffff; border: 1px solid var(--border); border-radius: 16px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); padding: 6px; z-index: 20;
            max-height: 260px; overflow-y: auto; min-width: 180px;
        }
        .field-suggestions.visible { display: block; }
        .field-suggestion {
            padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; color: var(--text-dark);
            min-height: 40px; box-sizing: border-box; display: flex; align-items: center;
        }
        .field-suggestion + .field-suggestion { margin-top: 2px; }
        .field-suggestion:hover, .field-suggestion.active { background: var(--bg-page); }
        .field-suggestion mark { background: none; color: var(--primary); font-weight: 700; }
        .search-input-group select {
            border: none; outline: none; background: transparent; font-size: 1rem; width: 100%;
            appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; color: var(--text-dark);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right center; background-size: 14px; padding-right: 18px;
        }
        .search-divider { width: 1px; height: 40px; background-color: var(--border); margin: 0 24px 0 8px; }
        .search-btn {
            background-color: var(--primary); color: white; border: none; border-radius: 50%;
            width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
        }
        .search-btn svg { width: 22px; height: 22px; }
        .near-me-btn {
            background: none; border: none; cursor: pointer; color: #94a3b8; padding: 4px;
            display: flex; align-items: center; justify-content: center; transition: color 0.2s;
        }
        .near-me-btn:hover { color: var(--primary); }

        /* Mobile-only shortcut between the results list and the map (which the
           results/map columns stack into, map last) -- see the 968px breakpoint
           below and the IntersectionObserver in index.html that flips its label. */
        .mobile-map-fab {
            display: none; position: fixed; bottom: 20px; right: 20px; z-index: 500;
            background-color: var(--primary); color: white; border: none; border-radius: 9999px;
            padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 700; cursor: pointer;
            align-items: center; gap: 6px; box-shadow: 0 8px 20px rgba(15,23,42,0.25);
        }

        /* Split Layout for Main Content */
        #main-content { display: none; flex-grow: 1; max-width: 1600px; margin: 0 auto; width: 100%; }
        #main-content.visible { display: flex; }

        /* Left Column: Results */
        .results-column { width: 55%; padding: 2rem; box-sizing: border-box; display: flex; flex-direction: column; }

        /* Granular Filter Bar */
        .filter-bar {
            display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.5rem;
            padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
        }

        .filter-select {
            appearance: none; background: #ffffff; border: 1px solid var(--border); border-radius: 9999px;
            padding: 0.6rem 2.5rem 0.6rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--text-dark);
            cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; transition: border-color 0.2s;
        }
        .filter-select:hover { border-color: var(--text-dark); }

        .toggle-label {
            display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600;
            cursor: pointer; padding: 0.6rem 1.25rem; border: 1px solid var(--border); border-radius: 9999px;
            background: #ffffff; transition: all 0.2s;
        }
        .toggle-label:hover { border-color: var(--text-dark); }
        .toggle-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

        .clear-filters-btn {
            background: #ffffff; border: 1px solid var(--border); border-radius: 9999px;
            padding: 0.6rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
            cursor: pointer; transition: all 0.2s; flex-shrink: 0;
        }
        .clear-filters-btn:hover { border-color: var(--text-dark); color: var(--text-dark); }

        /* Right Column: Map */
        .map-column { width: 45%; position: sticky; top: 90px; height: calc(100vh - 90px); background: #e2e8f0; }
        #map { width: 100%; height: 100%; }

        #result-meta { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; }

        /* Grid inside Results */
        #directory-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; align-items: start; }

        /* Cards */
        .class-card {
            background: #ffffff; border-radius: 16px; overflow: hidden; border: 2px solid var(--border);
            display: flex; flex-direction: column; position: relative; cursor: pointer;
            transition: border-color 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }
        .class-card.expanded { border-color: var(--text-dark); box-shadow: 0 8px 20px rgba(15,23,42,0.12); }
        .class-card.expanded .description { -webkit-line-clamp: unset; }

        /* Loading placeholders shown by showResultsSkeleton() while a search is
           waiting on data (initial fetch and/or geocoding). */
        .skeleton-card { cursor: default; }
        .skeleton-card .card-content { gap: 10px; display: flex; flex-direction: column; }
        .skeleton-line { height: 12px; border-radius: 4px; }
        .skeleton-shimmer {
            background: linear-gradient(90deg, #eef1f4 25%, #e2e8f0 37%, #eef1f4 63%);
            background-size: 400% 100%;
            animation: skeleton-shimmer 1.4s ease infinite;
        }
        @keyframes skeleton-shimmer {
            0% { background-position: 100% 50%; }
            100% { background-position: 0 50%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .skeleton-shimmer { animation: none; }
        }

        .expand-toggle {
            background: none; border: none; color: var(--text-muted); font-size: 0.8rem; font-weight: 700;
            cursor: pointer; padding: 0.4rem 0; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 4px;
        }
        .expand-toggle:hover { color: var(--text-dark); }
        .expand-toggle svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
        .class-card.expanded .expand-toggle svg { transform: rotate(180deg); }
        .expand-toggle .show-less-text { display: none; }
        .class-card.expanded .expand-toggle .show-more-text { display: none; }
        .class-card.expanded .expand-toggle .show-less-text { display: inline; }

        .card-details {
            max-height: 0; overflow: hidden; opacity: 0;
            transition: max-height 0.35s ease, opacity 0.25s ease;
        }
        .class-card.expanded .card-details { max-height: 900px; opacity: 1; margin-bottom: 1rem; }

        .detail-row { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.5rem; color: var(--text-dark); }
        .detail-row strong { color: var(--text-muted); font-weight: 700; }
        .detail-row a { color: var(--primary); font-weight: 600; text-decoration: none; }
        .detail-row a:hover { text-decoration: underline; }
        .facility-chip {
            display: inline-block; background: #f1f5f9; color: #475569; padding: 0.15rem 0.55rem;
            border-radius: 6px; font-size: 0.7rem; font-weight: 600; margin: 2px 4px 2px 0;
        }
        .verified-badge {
            display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem;
            color: #166534; font-weight: 700; margin-bottom: 0.5rem;
        }
        .verified-badge svg { width: 14px; height: 14px; }
        .card-image {
            position: relative; width: 100%; height: 180px;
            background: linear-gradient(135deg, #e2e8f0, #cbd5e1); overflow: hidden;
        }
        .card-image .banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .card-image .logo-badge {
            position: absolute; left: 10px; bottom: 10px; width: 48px; height: 48px;
            object-fit: contain; background: #ffffff; border-radius: 8px; padding: 5px;
            box-shadow: 0 1px 4px rgba(15,23,42,0.2);
        }
        .card-content { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
        .card-content h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
        .tag-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
        .tag { background: #f1f5f9; color: #475569; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
        .distance-badge {
            display: inline-flex; align-items: center; gap: 3px; background: #eff6ff; color: #1d4ed8;
            padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
        }
        .distance-badge svg { flex-shrink: 0; }

        .favorite-btn {
            position: absolute; top: 12px; right: 12px; z-index: 2;
            width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
            background: rgba(255,255,255,0.92); color: #64748b;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 1px 4px rgba(15,23,42,0.2); transition: color 0.2s, transform 0.15s;
        }
        .favorite-btn:hover { transform: scale(1.08); }
        .favorite-btn.active { color: var(--primary); }

        /* Star ratings */
        .rating-summary { display: flex; align-items: center; gap: 6px; margin-bottom: 0.5rem; }
        .rating-summary .star-icon { width: 15px; height: 15px; color: #cbd5e1; }
        .rating-summary .star-icon.filled { color: #f59e0b; }
        .rating-summary .rating-text { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }

        .rate-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; }
        .rate-row .rate-label { font-size: 0.75rem; color: var(--text-muted); }
        .star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
        .star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
        .star-input label { cursor: pointer; display: flex; }
        .star-input label .star-icon { width: 18px; height: 18px; color: #cbd5e1; transition: color 0.15s; }
        .star-input label:hover .star-icon,
        .star-input label:hover ~ label .star-icon,
        .star-input input:checked ~ label .star-icon { color: #f59e0b; }
        
        .description {
            font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;
            flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
            overflow: hidden; text-overflow: ellipsis;
        }

        .meta-info { font-size: 0.85rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
        .button { display: block; text-align: center; background: var(--text-dark); color: white; text-decoration: none; padding: 0.75rem; border-radius: 8px; margin-top: 1rem; font-weight: 600; }
        
        .claim-btn {
            background: none; border: none; color: var(--text-muted); font-size: 0.8rem;
            cursor: pointer; padding: 0.5rem; margin-top: 0.5rem; text-decoration: underline; text-align: center;
        }
        .claim-btn:hover { color: var(--text-dark); }

        /* Pagination */
        .pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; padding-bottom: 2rem; }
        .page-button { border: 1px solid var(--text-dark); background: #ffffff; border-radius: 8px; padding: 0.5rem 1rem; cursor: pointer; font-weight: 600; }

        /* Mobile progressive-loading sentinel/status (replaces prev/next pagination
           inside the same #pagination-controls element -- see setupInfiniteScroll). */
        .load-more-status { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; margin: 0; }

        /* Responsive */
        @media (max-width: 968px) {
            /* Show the results list before the map — parents scan classes first,
               the map is a secondary reference, not the primary task on a small screen. */
            #main-content.visible { flex-direction: column; }
            .results-column { width: 100%; padding: 1.25rem; }
            .map-column { width: 100%; height: 280px; position: relative; top: 0; }

            /* Filter pills: one scrollable row instead of wrapping into a tall stack
               that pushes results far down the page. The scrollbar is kept visible
               (instead of hidden) and the trailing edge fades out so it's obvious
               there are more filters off-screen to scroll to. */
            .filter-bar-wrap { position: relative; margin: 0 -1.25rem 1.5rem; }
            .filter-bar {
                flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0 1.25rem 0.75rem 1.25rem;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin; scrollbar-color: var(--border) transparent;
            }
            .filter-bar::-webkit-scrollbar { height: 6px; }
            .filter-bar::-webkit-scrollbar-track { background: transparent; }
            .filter-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
            .filter-bar::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
            .filter-select, .toggle-label, .clear-filters-btn { flex-shrink: 0; }
            /* Trailing fade hints that more filters sit off-screen to the right.
               No matching fade on the left — nothing is hidden there at rest. */
            .filter-bar-wrap::after {
                content: ''; position: absolute; top: 0; right: 0; bottom: 0.75rem; width: 28px;
                pointer-events: none; z-index: 1; background: linear-gradient(to left, var(--bg-page), transparent);
            }

            .mobile-map-fab.visible { display: flex; }
        }

        @media (max-width: 640px) {
            .hero-text h1 { font-size: 2rem; }
            .hero-text p { font-size: 1rem; }
            .hero-initial { padding-bottom: 4vh; }

            /* Stack the search bar: Activity, then Where (+ near-me), then a full-width
               search button — the single-row layout doesn't fit a phone viewport and was
               pushing the search button off-screen entirely. */
            .search-bar { flex-wrap: wrap; border-radius: 24px; padding: 16px; gap: 12px; }
            .search-input-group { flex: 1 1 100%; padding-right: 0; }
            .search-divider { display: none; }
            .search-btn { width: 100%; border-radius: 12px; order: 3; }

            /* Once a search has run, the header goes sticky (.hero-active) and stays
               pinned while the results scroll -- so on mobile the stacked, full-height
               search form above would otherwise eat a large chunk of the screen for the
               entire scroll session. Collapse it to a single compact row instead. Only
               Activity + Where live here (Age moved to the filter bar below), and both
               share the row's width via flex: 1 1 0 rather than sizing to content, so
               the row always fits the viewport with no side-scrolling needed. */
            .hero-active { padding: 0.75rem 1rem; }
            .hero-active .search-bar {
                flex-wrap: nowrap; border-radius: 9999px; padding: 6px 6px 6px 16px; gap: 4px;
            }
            .hero-active .search-input-group {
                flex: 1 1 0; width: auto; min-width: 0; padding-right: 8px;
            }
            /* Visually hidden, not display:none -- keeps the label in the
               accessibility tree for screen readers even though placeholders
               carry the visible hint in this compact layout. */
            .hero-active .search-input-group label {
                position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
            }
            .hero-active .search-input-group input,
            .hero-active .search-input-group select { font-size: 0.85rem; min-width: 0; }
            .hero-active .near-me-btn { padding: 4px 0 4px 4px; flex-shrink: 0; }
            .hero-active .near-me-btn svg { width: 16px; height: 16px; }
            .hero-active .search-divider { display: block; height: 28px; margin: 0 4px 0 0; flex-shrink: 0; }
            .hero-active .search-btn { width: 40px; height: 40px; border-radius: 50%; order: 0; flex-shrink: 0; }
            .hero-active .search-btn svg { width: 18px; height: 18px; }

            /* Bigger tap targets for the suggestion list, and more breathing room
               between rows so adjacent options aren't a mis-tap away from each other. */
            .field-suggestion { padding: 13px 14px; font-size: 1rem; min-height: 46px; }
            .field-suggestion + .field-suggestion { margin-top: 4px; }

            /* In the compact .hero-active bar both fields are squeezed to roughly
               half the pill's width -- anchoring a dropdown to that narrow box
               would squeeze the suggestions with it. Detach it from the parent's
               width and size it off the viewport instead. Left-anchored (Activity,
               the first field) grows rightward; the second field (Where) would
               overflow the screen doing that, so it grows leftward instead. */
            .hero-active .field-suggestions {
                left: -8px; right: auto; width: min(300px, calc(100vw - 48px));
            }
            .hero-active #location-suggestions {
                left: auto; right: -8px;
            }
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
            display: none; justify-content: center; align-items: center; z-index: 1000;
        }
        .modal-overlay.active { display: flex; }
        .modal {
            background: #ffffff; padding: 2.5rem; border-radius: 16px; width: 90%; max-width: 450px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            position: relative;
        }
        .close-modal {
            position: absolute; top: 1rem; right: 1rem; background: none; border: none;
            font-size: 1.5rem; cursor: pointer; color: var(--text-muted);
        }
        .close-modal:hover { color: var(--text-dark); }
        .modal h3 { margin-top: 0; color: var(--text-dark); font-size: 1.5rem; margin-bottom: 0.5rem; }
        .modal p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; line-height: 1.5; }
        
        .form-group { margin-bottom: 1.25rem; }
        .form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); }
        .form-group input {
            width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 8px;
            font-size: 1rem; box-sizing: border-box; background: #f8fafc; color: var(--text-dark);
        }
        .form-group input:focus { outline: none; border-color: var(--primary); background: #ffffff; }
        
        .submit-btn {
            width: 100%; background: var(--primary); color: white; border: none; padding: 0.85rem;
            border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 1rem; margin-top: 0.5rem; transition: background 0.2s;
        }
        .submit-btn:hover { background: var(--primary-hover); }
        .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }

        /* Business detail pages (business/*.html, generated by
           scripts/generate_business_pages.py) -- reuses card/tag/detail-row/
           facility-chip/verified-badge styles above, adds page-level chrome. */
        .business-page { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
        .breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
        .breadcrumb a { color: var(--text-muted); text-decoration: none; }
        .breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
        .business-card {
            background: #ffffff; border-radius: 16px; overflow: hidden; border: 2px solid var(--border);
        }
        .business-card .card-image { height: 280px; }
        .business-card .card-content h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
        .business-address { font-size: 0.9rem; margin: 1rem 0; }
        .business-address a { color: var(--primary); font-weight: 600; text-decoration: none; }
        .business-address a:hover { text-decoration: underline; }
        .business-map { width: 100%; height: 260px; border-radius: 8px; margin-bottom: 1rem; }
        .business-backlinks {
            display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
            margin-top: 1.5rem; font-size: 0.9rem;
        }
        .business-backlinks a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
        .business-backlinks a:hover { color: var(--primary); }
        @media (max-width: 640px) {
            .business-page { padding: 1.5rem 1rem 3rem; }
        }

        /* Category/county/combo landing pages (classes/*.html, generated by
           scripts/generate_landing_pages.py) -- reuses .breadcrumb/.brand-logo/
           .tag/.description/.button/.business-backlinks from above. */
        .landing-page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
        .landing-page h1 { font-size: 2.2rem; margin: 0 0 1rem; letter-spacing: -0.02em; }
        .landing-intro { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; max-width: 760px; margin-bottom: 1.5rem; }

        .landing-crosslinks { margin-bottom: 2rem; }
        .landing-crosslinks h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
        .crosslink-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
        .crosslink-list a {
            background: #f1f5f9; color: var(--text-dark); text-decoration: none; font-weight: 600;
            font-size: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 999px; transition: background 0.2s;
        }
        .crosslink-list a:hover { background: #e2e8f0; }

        .landing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; align-items: start; }
        .landing-card {
            background: #ffffff; border-radius: 16px; overflow: hidden; border: 2px solid var(--border);
            display: flex; flex-direction: column;
        }
        .landing-card .card-image { height: 160px; }
        .landing-card .card-content { padding: 1.1rem; display: flex; flex-direction: column; flex-grow: 1; }
        .landing-card h3 { margin: 0 0 0.4rem; font-size: 1rem; }
        .landing-card .description { -webkit-line-clamp: 2; margin-bottom: 0.5rem; }
        .landing-card-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }
        .landing-card .button { margin-top: auto; padding: 0.6rem; font-size: 0.85rem; }

        .site-footer {
            text-align: center; padding: 2rem 1.5rem; font-size: 0.85rem;
        }
        .site-footer a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
        .site-footer a:hover { color: var(--primary); }

        @media (max-width: 640px) {
            .landing-page { padding: 1.5rem 1rem 3rem; }
            .landing-page h1 { font-size: 1.6rem; }
        }