/* Companion Guide - Dark Professional Design */
:root {
    /* Dark Color Palette (inspired by hammerai.com & caveduck.io) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #262626;
    --bg-surface: #1f1f1f;
    --bg-elevated: #2a2a2a;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --text-dim: #525252;
    
    /* Accent Colors */
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    
    /* Border Colors */
    --border-primary: #404040;
    --border-secondary: #262626;
    --border-accent: #3b82f6;
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-7: 1.75rem;
    --space-9: 2.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    position: relative;
    /* Fixed nav is 80px tall; tighter clearance under it */
    padding-top: 90px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: 2.25rem; margin-bottom: var(--space-6); }
h2 { font-size: 1.875rem; margin-bottom: var(--space-4); }
h3 { font-size: 1.125rem; margin-bottom: var(--space-3); }
h4 { font-size: 1.25rem; margin-bottom: var(--space-3); }

p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--text-primary);
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    overflow-x: hidden;
}

/* Header - Force visibility */
header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 80px !important;
    z-index: 999999 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

header nav,
header nav.container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 2rem !important;
    visibility: visible !important;
    height: 80px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

header nav h1,
header nav .site-logo {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
}

header nav h1 a,
header nav .site-logo a {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: white !important;
    text-decoration: none !important;
    visibility: visible !important;
    transition: color 0.2s ease;
}

header nav h1 a:hover,
header nav .site-logo a:hover {
    color: var(--accent-blue);
}

header .nav-menu {
    display: flex !important;
    list-style: none !important;
    gap: 0.9rem !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: nowrap !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

/* Desktop category dropdown */
header .nav-menu li.has-dropdown {
    position: relative;
}

header .nav-menu li.has-dropdown > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 4px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

header .nav-menu li.has-dropdown:hover > a::after {
    transform: rotate(180deg);
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 0.35rem 0;
    width: max-content;
    min-width: 0;
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    list-style: none;
}

header .nav-menu li.has-dropdown:hover .nav-dropdown {
    display: block;
}

.nav-dropdown li {
    margin: 0 !important;
    width: 100% !important;
}

.nav-dropdown li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.45rem 1.5rem !important;
    color: #ccc !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
    transition: all 0.15s ease !important;
}

.nav-dropdown li a:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
}

.nav-dropdown li.nav-dropdown-all {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 0.25rem !important;
    padding-top: 0.25rem;
}

.nav-dropdown li.nav-dropdown-all a {
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

/* On mobile, override the desktop nav-menu styling */
@media (max-width: 768px) {
    /* Make nav container wrap properly */
    header nav,
    header nav.container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem 1.5rem !important;
    }

    /* Make logo smaller on mobile */
    header nav h1,
    header nav .site-logo {
        font-size: 1.1rem !important;
        order: 1;
        flex: 0 0 auto;
    }

    header nav h1 a,
    header nav .site-logo a {
        gap: 0.35rem !important;
    }

    header nav h1 img,
    header nav h1 svg,
    header nav .site-logo img,
    header nav .site-logo svg {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }

    header .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important;
        transition: left 0.3s ease !important;
        z-index: 999998 !important;
        padding-top: var(--space-12) !important;
    }

    header .nav-menu.active {
        left: 0 !important;
    }

    header .nav-menu li {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        width: 100% !important;
    }

    header .nav-menu li a {
        font-size: 1.55rem !important;
        padding: 0.75rem 1.25rem !important;
        font-weight: 500 !important;
        color: white !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

    header .nav-menu li a:hover,
    header .nav-menu li a.active {
        background-color: rgba(59, 130, 246, 0.2) !important;
        color: #3b82f6 !important;
    }

    /* Mobile dropdown toggle arrow */
    header .nav-menu li.has-dropdown > a::after {
        content: '' !important;
        display: inline-block !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 5px solid transparent !important;
        border-right: 5px solid transparent !important;
        border-top: 5px solid currentColor !important;
        margin-left: 8px !important;
        vertical-align: middle !important;
        transition: transform 0.2s ease !important;
        transform: rotate(0deg) !important;
    }

    header .nav-menu li.has-dropdown.dropdown-open > a::after {
        transform: rotate(180deg) !important;
    }

    /* Only the open dropdown parent gets blue highlight */
    header .nav-menu li.has-dropdown.dropdown-open > a {
        background-color: rgba(59, 130, 246, 0.2) !important;
        color: #3b82f6 !important;
    }

    /* Non-open dropdown parents stay white */
    header .nav-menu li.has-dropdown:not(.dropdown-open) > a {
        background-color: transparent !important;
        color: white !important;
    }

    /* Mobile dropdown - collapsible */
    header .nav-menu .nav-dropdown {
        display: block !important;
        position: static !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        text-align: center !important;
    }

    header .nav-menu li.has-dropdown.dropdown-open .nav-dropdown {
        max-height: 800px !important;
        padding: 0.25rem 0 !important;
    }

    header .nav-menu .nav-dropdown li {
        margin: 0 !important;
        width: 100% !important;
    }

    header .nav-menu .nav-dropdown li a {
        font-size: 1.15rem !important;
        padding: 0.55rem 1rem !important;
        color: rgba(255,255,255,0.75) !important;
        font-weight: 400 !important;
    }

    header .nav-menu .nav-dropdown li a:hover {
        color: #3b82f6 !important;
        background-color: rgba(59, 130, 246, 0.1) !important;
    }

    header .nav-menu .nav-dropdown li.nav-dropdown-all {
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        margin-top: 0.15rem !important;
        padding-top: 0.15rem !important;
    }

    header .nav-menu .nav-dropdown li.nav-dropdown-all a {
        color: #3b82f6 !important;
        font-weight: 600 !important;
        font-size: 1.05rem !important;
    }

    /* Show hamburger on mobile */
    .hamburger {
        display: flex !important;
        flex-direction: column !important;
        order: 3 !important;
        margin-left: var(--space-3) !important;
        cursor: pointer !important;
        padding: var(--space-2) !important;
        z-index: 10000 !important;
    }

    .hamburger span {
        width: 24px !important;
        height: 2px !important;
        background-color: var(--text-primary) !important;
        margin: 2px 0 !important;
        transition: 0.3s !important;
        border-radius: 2px !important;
        display: block !important;
    }
}

/* Hide mobile menu elements on desktop */
.mobile-menu-logo {
    display: none;
}

/* Ensure hamburger is hidden on desktop only */
@media (min-width: 769px) {
    .hamburger {
        display: none !important;
    }
}

/* Companion of the Month Award Card */
.cotm-award-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1.5px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 1rem 1rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: visible;
    text-align: center;
}

/* Laurel wreaths on sides */
.cotm-laurel-left,
.cotm-laurel-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 30px;
    color: rgba(59, 130, 246, 0.35);
    opacity: 0.7;
}

.cotm-laurel-left {
    left: 2px;
}

.cotm-laurel-right {
    right: 2px;
}

.cotm-discount-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    white-space: nowrap;
}

.laurel-svg {
    width: 100%;
    height: 100%;
}

/* Award content */
.cotm-award-content {
    position: relative;
    z-index: 1;
}

.cotm-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding: 0 0.65rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
}

/* Companion logo */
.cotm-logo-link {
    display: inline-block;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.cotm-logo-link:hover {
    opacity: 0.8;
}

.cotm-companion-logo {
    height: 68px;
    width: auto;
    max-width: 150px;
    border-radius: 6px;
    object-fit: contain;
    border: none;
    box-shadow: none;
    display: block;
}

.cotm-rating-container {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.cotm-review-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.cotm-stars {
    color: var(--accent-orange);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.1rem;
}

.cotm-stars .star-filled {
    color: var(--accent-orange);
}

.cotm-stars .star-empty {
    color: rgba(255, 140, 0, 0.3);
}

.cotm-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    text-transform: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.cotm-title .icon {
    width: 1.4em;
    height: 1.4em;
    color: #f59e0b;
}

.cotm-rating {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
}

.cotm-rating-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.cotm-rating-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.cotm-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.cotm-website-button,
.cotm-review-button {
    flex: 1;
    display: inline-block;
    padding: 0.5rem 0.75rem;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cotm-website-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.cotm-website-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.cotm-review-button {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.cotm-review-button:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Newsletter Signup Card */
.newsletter-signup-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1.5px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    text-align: center;
}

.newsletter-icon {
    margin-bottom: 0.5rem;
    color: #3b82f6;
}

.newsletter-icon .icon {
    width: 32px;
    height: 32px;
}

.newsletter-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.newsletter-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.newsletter-input {
    flex: 1;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.newsletter-input::placeholder {
    color: var(--text-muted);
}

.newsletter-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.newsletter-button {
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.newsletter-button:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.newsletter-button:disabled {
    background: #6b7280;
    cursor: not-allowed;
    transform: none;
}

.newsletter-privacy {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

/* Newsletter visibility - mobile only version hidden on desktop */
.newsletter-mobile-only {
    display: none;
}

/* Categories grid - 2 columns on mobile */
@media (max-width: 768px) {
    .newsletter-mobile-only {
        display: block;
        margin-top: 1.5rem;
    }

    .newsletter-desktop-only {
        display: none;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .category-card {
        padding: 0.75rem !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .category-card h3 {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin-top: 0.5rem !important;
    }

    .category-card p {
        display: none;
    }

    .category-card .category-stats {
        font-size: 0.7rem !important;
        margin-top: auto !important;
    }

    .category-icon {
        width: 36px !important;
        height: 36px !important;
        margin: 0 auto !important;
    }

    .category-icon .icon {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Mobile: More compact */
@media (max-width: 768px) {
    .cotm-award-card {
        padding: 0.85rem 0.75rem;
    }

    .cotm-laurel-left,
    .cotm-laurel-right {
        width: 24px;
        opacity: 0.5;
    }

    .cotm-header-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
        padding: 0 0.5rem;
    }

    .cotm-companion-logo {
        height: 54px;
        max-width: 120px;
    }

    .cotm-rating-container {
        gap: 0.4rem;
        flex: 0 0 auto;
    }

    .cotm-stars {
        font-size: 0.9rem;
        letter-spacing: 0.05rem;
    }

    .cotm-title {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }
    /* Mobile: float the flank-card title into a compact gold top-right badge to save vertical space */
    .hero-flank-card { position: relative; }
    .hero-flank-card .cotm-title {
        position: absolute;
        top: 7px;
        right: 8px;
        margin: 0;
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1;
        padding: 4px 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        z-index: 2;
    }
    .hero-flank-card .cotm-title .icon { width: 12px; height: 12px; color: #fff; }
    /* pull logo/name/rating hard to the left so the bigger badge has room top-right
       (higher specificity than `.hero-flank .hero-flank-card { padding:10px 14px }`) */
    .hero-flank .hero-flank-card.cotm-award-card { padding-left: 0.35rem; padding-right: 0.5rem; }
    .hero-flank .hero-flank-card .cotm-header-row {
        justify-content: flex-start;
        text-align: left;
        gap: 0.55rem;
        padding: 22px 0 0 0;
    }
    .hero-flank .hero-flank-card .promo-meta { text-align: left; }

    .cotm-rating-score {
        font-size: 1rem;
    }

    .cotm-rating-label {
        font-size: 0.75rem;
    }

    .cotm-buttons {
        gap: 0.4rem;
        margin-top: 0.5rem;
    }

    .cotm-website-button,
    .cotm-review-button {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    /* Newsletter mobile */
    .newsletter-signup-card {
        padding: 1rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-button {
        width: 100%;
    }
}

header nav a:not(h1 a):not(.site-logo a):not(.nav-menu a):not(.nav-dropdown a) {
    color: #ccc !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 0.35rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    display: inline-block !important;
    visibility: visible !important;
    white-space: nowrap !important;
}

header nav a:not(h1 a):not(.site-logo a):not(.nav-menu a):not(.nav-dropdown a):hover {
    color: white !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* Desktop nav-menu styling (was masked by the :not() rule above) */
@media (min-width: 769px) {
    header nav .nav-menu > li > a {
        color: #ccc !important;
        font-weight: 500 !important;
        padding: 0.5rem 0.35rem !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }

    header nav .nav-menu > li > a:hover {
        color: white !important;
        background-color: rgba(255,255,255,0.1) !important;
    }
}

header nav a.active {
    color: #4f9eff !important;
}

/* Main content positioning */
main {
    position: relative;
    z-index: 1;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: var(--space-4) 0 var(--space-3) 0;
    background-color: var(--bg-secondary);
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.hero p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 100%;
    margin: 0 auto var(--space-3);
    line-height: 1.7;
}

@media (min-width: 1024px) {
    .hero p {
        max-width: 900px;
    }
}

/* Category Tags Section */
.category-tags-section {
    margin: var(--space-2) 0;
}

.category-tags-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
}

.companion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
}

.category-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    background-color: var(--accent-blue);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.68rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tag:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Category Directory Section (Desktop index) */
.category-directory-section {
    margin-bottom: var(--space-6);
}

.category-directory {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.category-directory-column h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.category-directory-column h4 a {
    color: inherit;
    text-decoration: none;
}

.category-directory-column h4 a:hover {
    color: var(--accent-primary);
}

.category-directory-desc {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
}

.category-directory-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) transparent;
}

.category-directory-list::-webkit-scrollbar {
    width: 4px;
}

.category-directory-list::-webkit-scrollbar-track {
    background: transparent;
}

.category-directory-list::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 2px;
}

.category-directory-list li {
    counter-increment: dir-counter;
}

.category-directory-list li a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.category-directory-list li a:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.category-directory-list .dir-rank {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    min-width: 18px;
    text-align: right;
    font-weight: 500;
}

.category-directory-list .dir-favicon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.category-directory-list .dir-name {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-directory-list .dir-rating {
    font-size: 0.7rem;
    color: var(--accent-primary);
    font-weight: 600;
    flex-shrink: 0;
}

.category-directory-list .dir-loading {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    padding: 8px;
}

.category-directory-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

/* Mobile: hide directory, show tags */
.category-tags-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .category-directory-section {
        display: none;
    }
    .category-tags-mobile {
        display: block;
    }
}

/* Category Tags Row (for category pages) */
.category-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    justify-content: flex-start;
}

/* Desktop: show max 8 tags in a single row (CSS fallback, JS randomizes) */
.category-tags-row .category-tag-sm:nth-child(n+9) {
    display: none;
}

/* Mobile: show max 4 tags in a single row */
@media (max-width: 768px) {
    .category-tags-row {
        flex-wrap: nowrap;
    }
    .category-tags-row .category-tag-sm {
        flex-shrink: 0;
    }
    .category-tags-row .category-tag-sm:nth-child(n+5) {
        display: none;
    }
}

.category-tag-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background-color: #0a0a0a;
    border: 2px solid var(--accent-blue);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-tag-sm:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    transform: translateY(-1px);
}

.category-tag-sm .icon-xs {
    width: 12px;
    height: 12px;
}

.featured-companion-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    background-color: #0a0a0a;
    color: white;
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.72rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.featured-companion-tag .rating-score {
    color: var(--accent-blue);
}

.featured-companion-tag:hover {
    background-color: var(--accent-blue);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.featured-companion-tag:hover .rating-score {
    color: white;
}

/* A-Z Index */
.az-index {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin: var(--space-8) 0;
}

.az-index h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-6);
    text-align: center;
    color: var(--text-primary);
}

.az-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
}

.az-column h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: var(--space-2);
}

.az-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.az-column li {
    margin-bottom: var(--space-2);
}

.az-column a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.az-column a:hover {
    color: var(--accent-blue);
}

/* Featured companions in A-Z List */
.az-column li.featured-companion {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: var(--radius-md);
    margin: var(--space-1) 0;
}

.az-column li.featured-companion a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
}

.az-column .featured-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.5rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
}

/* Advertisement in A-Z List */
.az-column .advertisement-item {
    margin: var(--space-4) 0;
}

.az-column .advertisement-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    position: relative;
    overflow: visible;
}

.az-column .advertisement-card .ad-label {
    position: absolute;
    top: -10px;
    right: 12px;
    background: var(--bg-primary, #0f0f0f);
    border: 1.5px solid var(--accent-blue, #3b82f6);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    z-index: 2;
}

.az-column .advertisement-card .ad-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.az-column .advertisement-card .ad-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
}

.az-column .advertisement-card .ad-info {
    flex: 1;
}

.az-column .advertisement-card .ad-companion-name {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.az-column .advertisement-card .ad-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.az-column .advertisement-card .stars {
    color: #fbbf24;
}

.az-column .advertisement-card .rating-value {
    font-weight: 600;
}

.az-column .advertisement-card .ad-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
}

.az-column .advertisement-card .ad-buttons {
    display: flex;
    gap: var(--space-2);
}

.az-column .advertisement-card .ad-btn-primary {
    flex: 1;
    padding: 8px 12px;
    background: var(--accent-blue);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
}

.az-column .advertisement-card .ad-btn-primary:hover {
    background: var(--accent-blue-hover);
    transform: translateY(-1px);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.cta-button {
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

/* Main Layout */
.main-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-12);
    margin: var(--space-16) 0;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* Section Headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-primary);
}

.section-header h2 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.section-header p {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: var(--space-3) 0 0 0;
}

.view-all-link {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 1.125rem;
    padding: var(--space-3);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
}

.view-all-link:hover {
    background-color: var(--accent-blue);
    color: white;
}

/* Companion Cards */
main .companions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 companions per row */
    gap: var(--space-6);
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    min-height: auto;
    position: relative;
}

.companions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 companions per row (category-style cards) */
    gap: var(--space-6);
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    margin-top: var(--space-6);
}

.companion-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.companion-card .card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.companion-card .logo-link {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.companion-card .logo-link:hover {
    transform: scale(1.02);
}

.companion-card .logo {
    width: 140px;
    height: 100px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    object-fit: contain;
    background-color: var(--bg-tertiary);
    padding: var(--space-3);
    flex-shrink: 0;
}

.companion-card .title-section {
    flex: 1;
}

.companion-card .title-section h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.companion-card .title-section h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.companion-card .rating-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.companion-card .stars {
    color: var(--accent-orange);
}

.companion-card .rating-score {
    font-weight: 700;
    color: var(--text-primary);
}

.companion-card .review-count {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.companion-card .description {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.companion-card .feature-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.companion-card .feature-highlights.has-preview {
    grid-template-columns: repeat(3, 1fr);
}

.companion-card .feature-preview {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.companion-card .feature-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.companion-card .feature-preview:hover img {
    transform: scale(1.05);
}

.companion-card .feature-preview.nsfw-blur {
    position: relative;
}

.companion-card .feature-preview.nsfw-blur img {
    filter: blur(12px);
    transform: scale(1.1);
}

.companion-card .feature-preview.nsfw-blur:hover img {
    filter: blur(12px);
    transform: scale(1.15);
}

.companion-card .feature-preview .nsfw-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.companion-card .feature-preview .nsfw-icon {
    width: 28px;
    height: 28px;
    stroke: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.companion-card .feature-preview .nsfw-overlay span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.companion-card .feature-item {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    text-align: center;
}

.companion-card .feature-icon {
    font-size: 1.125rem;
    margin-bottom: var(--space-2);
}

.companion-card .feature-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.companion-card .feature-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

/* Combined benefits block (3rd column in card) */
.companion-card .feature-benefits-combined {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-3);
}

.companion-card .feature-benefits-combined .benefit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.companion-card .feature-benefits-combined .benefit-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.companion-card .feature-benefits-combined .benefit-text {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.companion-card .pricing-section {
    display: none;
}

.companion-card .price-main {
    display: none;
}

.companion-card .price-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin-top: 0.25rem;
}

.product-price-badge {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin-top: 0.25rem;
}

.product-pricing {
    display: none;
}

.companion-card .price-note {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.companion-card .best-for-section {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--accent-blue);
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.companion-card .best-for-label {
    font-weight: 600;
    color: var(--accent-blue);
}

.companion-card .card-actions {
    display: flex;
    gap: var(--space-4);
}

.companion-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.companion-card.featured {
    border-color: var(--accent-blue);
    background-color: rgba(59, 130, 246, 0.05);
}

.rank {
    background-color: var(--accent-blue);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.companion-card.featured .rank {
    background-color: var(--accent-purple);
}

.logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    flex-shrink: 0;
    object-fit: contain;
    background-color: var(--bg-tertiary);
    padding: var(--space-2);
}

.content {
    flex: 1;
    min-width: 0;
}

.content h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.content h3 a {
    color: var(--text-primary);
}

.content h3 a:hover {
    color: var(--accent-blue);
}

.rating {
    font-size: 0.8rem;
    color: var(--accent-orange);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.rating .rating-score {
    color: var(--text-primary);
    font-weight: 700;
}

.rating .review-count {
    color: var(--text-muted);
    font-weight: 500;
}

.content p {
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: var(--space-1);
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.features span {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.pricing {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0;
    padding: var(--space-1) 0;
    line-height: 1.2;
}

.platform-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
    padding-top: 0;
}

.platform-info-link {
    color: var(--accent-blue);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: var(--space-2) 0;
}

.platform-info-link:hover {
    color: var(--text-primary);
}

.platform-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-width: 120px;
    justify-content: center;
}

.platform-btn::after,
.pricing-cta::after,
.cotm-website-button::after,
.btn-primary[target="_blank"]::after {
    content: " ↗";
}

.platform-btn.secondary::after,
.platform-btn.no-arrow::after,
.btn-primary.no-arrow::after {
    content: none;
}

.platform-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Companion Detail Pages */
.companion-hero {
    background-color: var(--bg-secondary);
    padding: var(--space-16) 0;
    margin-bottom: var(--space-8);
    border-radius: var(--radius-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 800px;
    margin: 0 auto;
}

.companion-logo {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-primary);
    object-fit: contain;
    background-color: var(--bg-tertiary);
    padding: var(--space-2);
    flex-shrink: 0;
}

.header-gallery-link {
    flex-shrink: 1;
    margin-left: var(--space-8);
    margin-right: -80px;
    position: relative;
    min-width: 280px;
    max-width: 380px;
}

.header-gallery-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/8;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-primary);
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-gallery-link:hover .header-gallery-image:not(.header-gallery-blurred) {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Header Gallery 18+ Blur */
.header-gallery-blurred {
    filter: blur(20px);
    transition: filter 0.3s ease;
}

.header-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    z-index: 10;
}

.header-blur-reveal-btn {
    padding: var(--space-3) var(--space-6);
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-blur-reveal-btn:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    white-space: nowrap;
}

.hero-text .rating {
    font-size: 1rem;
    color: var(--accent-orange);
    margin-bottom: var(--space-3);
}

.hero-text .tagline {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

/* Pricing hook, best-for, badge in hero - hidden on desktop (shown in quick-facts instead) */
.hero-pricing-hook {
    display: none;
}

.hero-best-for {
    display: none;
}

.hero-badge {
    display: none;
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.platform-btn.secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.platform-btn.secondary:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-accent);
}

.quick-facts {
    margin: var(--space-12) 0;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
}

.fact {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}

@media (max-width: 768px) {
    .quick-facts {
        margin: var(--space-6) 0;
    }
    .fact-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        min-width: 0;
    }
    .fact {
        padding: var(--space-3);
        border-radius: var(--radius-md);
        min-width: 0;
        overflow: hidden;
    }
    .fact h3 {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }
    .fact p {
        font-size: 0.8rem;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }
    /* Show only first 2 facts (Pricing & Best For) on mobile */
    .fact:nth-child(n+3) {
        display: none;
    }
}

/* Mobile Top Alternatives - hidden on desktop */
.mobile-top-alternatives {
    display: none;
}

@media (max-width: 768px) {
    .mobile-top-alternatives {
        display: block;
        margin-top: var(--space-2);
        background-color: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-3) var(--space-3) var(--space-2);
    }

    .mobile-top-alternatives h4 {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--text-muted);
        margin: 0 0 var(--space-2) 0;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-align: center;
    }

    .mobile-alt-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-3);
    }

    .mobile-alt-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: var(--space-2) var(--space-1);
        text-decoration: none;
        min-width: 0;
        border-bottom: 1px solid var(--border-secondary);
    }

    /* Remove border on last items in each column */
    .mobile-alt-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .mobile-alt-num {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-muted);
        min-width: 18px;
        flex-shrink: 0;
    }

    .mobile-alt-item img {
        width: 24px;
        height: 24px;
        border-radius: var(--radius-sm);
        object-fit: contain;
        flex-shrink: 0;
        background-color: var(--bg-tertiary);
    }

    .mobile-alt-name {
        font-size: 0.8rem;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .mobile-alt-item:active {
        background: var(--bg-tertiary);
        border-radius: var(--radius-sm);
    }
}

.fact h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.fact p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.intro-section {
    margin: var(--space-12) 0;
    background-color: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--border-secondary);
}

.intro-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-8);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    .intro-highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .intro-highlights {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        margin-top: var(--space-4);
    }
    .highlight-item {
        padding: var(--space-3);
        gap: var(--space-1);
    }
    .highlight-item strong {
        font-size: 0.8rem;
    }
    .highlight-item span {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}

.highlight-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    text-align: center;
    align-items: center;
}

.highlight-item:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.highlight-item strong {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 600;
    display: block;
    width: 100%;
}

.highlight-item span {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
}

.features-list ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.features-list li {
    background-color: var(--bg-surface);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.features-list li:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.features-list li strong {
    color: var(--text-primary);
    font-weight: 600;
}

.overview {
    margin: var(--space-12) 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.feature {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.feature:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.feature h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.feature p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.pros-cons {
    margin: var(--space-12) 0;
    background-color: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--border-secondary);
}

.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.pros, .cons {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.pros:hover, .cons:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.pros h3, .cons h3 {
    margin-bottom: var(--space-4);
    font-size: 1.125rem;
}

.pros ul, .cons ul {
    list-style: none;
    padding: 0;
}

.pros li, .cons li {
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pricing {
    margin: var(--space-12) 0;
    background-color: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--border-secondary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.pricing-tier {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    transition: all 0.2s ease;
}

.pricing-tier:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.pricing-tier.featured {
    border-color: var(--accent-blue);
    background-color: rgba(59, 130, 246, 0.08);
    transform: scale(1.02);
}

.pricing-tier h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
}

.pricing-tier .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: var(--space-6);
}

.pricing-tier ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.pricing-tier li {
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.6;
}

.pricing-tier li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.1em;
    color: var(--accent-green);
    font-weight: 700;
    font-size: 1.1em;
}

.pricing-tier li.feature-excluded::before {
    content: "✗";
    color: var(--accent-red);
}

.pricing-tier li.feature-excluded {
    color: var(--text-muted);
    text-decoration: line-through;
}

.pricing-cta {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    background: none;
    padding: 0;
}

.pricing-cta:hover {
    color: #2563eb;
    text-decoration: underline;
}

.pricing-tier .original-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-left: var(--space-2);
}

.pricing-tier .plan-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    font-style: italic;
}

/* Editor's review (my_review) — static section near the top of translated pages */
.my-review-static {
    margin: var(--space-8) 0;
    padding: var(--space-6) var(--space-7);
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
}
.my-review-static h2 {
    font-size: 1.5rem;
    margin: 0 0 var(--space-4);
    color: var(--text-primary);
}
.my-review-static-body p,
.my-review-static-body h3 {
    margin: 0 0 var(--space-3);
    line-height: 1.65;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.my-review-static-body h3 {
    color: var(--text-primary);
    font-size: 1.125rem;
    margin-top: var(--space-5);
}
.my-review-static-body p:last-child,
.my-review-static-body h3:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .my-review-static {
        padding: var(--space-4);
        margin: var(--space-6) 0;
    }
    .my-review-static h2 { font-size: 1.25rem; }
    .my-review-static-body p,
    .my-review-static-body h3 { font-size: 0.9rem; }
}

.verdict {
    margin: var(--space-12) 0;
}

.verdict-score {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-blue);
    text-align: center;
    min-width: 100px;
    flex-shrink: 0;
}

.verdict-text h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

/* Verdict Read More functionality */
.verdict-collapsed-wrapper {
    display: none;
}

.verdict-collapsed-wrapper.expanded {
    display: block;
}

.verdict-read-more {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-6) auto;
    padding: var(--space-3) var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 10;
}

.verdict-read-more:hover {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.verdict-read-more .read-more-icon {
    transition: transform 0.2s ease;
}

.verdict-read-more.expanded .read-more-icon {
    transform: rotate(180deg);
}

/* Sticky "Show less" button when expanded */
.verdict-read-more.expanded {
    position: sticky;
    bottom: var(--space-6);
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    z-index: 100;
}

.verdict-read-more.expanded:hover {
    background: var(--bg-surface);
    color: var(--accent-blue);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

/* Hero Mega — desktop: [info|review|image] over [pricing|review|bestfor] / mobile: stacked */
.hero-mega {
    position: relative;
    margin: var(--space-6) 0 var(--space-12);
}
.hero-mega-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 769px) {
    /* Companion review pages: header height (80px) only — breadcrumb sits in a tight gap */
    body.companion-review-page {
        padding-top: 80px;
    }
    /* Allow nav dropdown to escape clipping caused by nav.container's overflow-x: hidden */
    header,
    header nav.container {
        overflow: visible !important;
    }
    /* Strip top whitespace on hero — hero opens immediately below breadcrumb */
    body.companion-review-page .companion-hero {
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: var(--space-6);
        background: transparent !important;
        border-radius: 0;
    }
    /* Breadcrumb: fixed-height row, text optically centered between nav and components */
    body.companion-review-page main.container > .category-breadcrumb {
        margin: 0;
        padding: 0;
        height: 32px;
        font-size: 0.8125rem;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    /* Hide old hero pieces on desktop — .hero-mega replaces them */
    .companion-hero > .hero-deal-tag,
    .companion-hero > .hero-byline,
    .companion-hero > .hero-content {
        display: none !important;
    }
    /* Deal tag at breadcrumb level — negative top pushes it above .companion-hero */
    .companion-hero .hero-deal-tag {
        top: calc(-1 * var(--space-8));
        right: 0;
    }
    /* Hide the standalone byline on desktop — moved into review column */
    .companion-hero > .hero-byline {
        display: none;
    }

    /* Grid row — middle column drives row height, leftcol/alts stretch to match */
    .hero-mega {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr) minmax(0, 1.15fr);
        grid-template-areas: "leftcol middle alts";
        column-gap: var(--space-6);
        row-gap: 0;
        align-items: stretch;
        margin-top: 0;
    }
    .hero-mega-leftcol {
        grid-area: leftcol;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        min-width: 0;
        min-height: 0;
    }
    .hero-mega-middle {
        grid-area: middle;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
    }
    .hero-mega-alternatives {
        grid-area: alts;
        min-width: 0;
    }
    /* Image column removed from hero — images shown in .companion-gallery section below */
    .hero-mega-image {
        display: none !important;
    }

    /* Info card: logo + name side-by-side at top, then rating, tagline, button stacked below */
    .hero-mega-info {
        display: grid;
        grid-template-columns: 72px 1fr;
        column-gap: var(--space-4);
        row-gap: var(--space-3);
        padding: var(--space-6);
        flex-shrink: 0;
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        align-self: start; /* don't stretch to image-stack height — keeps button above fold */
        align-content: start;
    }
    .hero-mega-info .companion-logo {
        grid-row: 1;
        grid-column: 1;
        width: 72px;
        height: 72px;
        margin: 0;
        align-self: center;
    }
    .hero-mega-info h1 {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
        font-size: 1.25rem;
        margin: 0;
        line-height: 1.25;
    }
    .hero-mega-info .rating,
    .hero-mega-info .tagline,
    .hero-mega-info .platform-info {
        grid-column: 1 / -1;
    }
    .hero-mega-info .rating {
        margin: 0;
        font-size: 1rem;
    }
    .hero-mega-info .tagline {
        font-size: 0.9rem;
        margin: 0;
        color: var(--text-secondary);
        line-height: 1.5;
    }
    .hero-mega-info .platform-info {
        margin-top: var(--space-2);
        width: 100%;
    }
    .hero-mega-info .platform-btn {
        width: 100%;
        text-align: center;
        padding: var(--space-3) var(--space-4);
        font-size: 0.95rem;
    }
    /* Hero screenshot inside info card, below the Visit Website button */
    .hero-mega-info-image {
        position: relative;
        grid-column: 1 / -1;
        display: block;
        margin-top: var(--space-2);
        border-radius: var(--radius-md);
        overflow: hidden;
        line-height: 0;
        aspect-ratio: 16 / 10;
        background: rgba(255, 255, 255, 0.03);
    }
    .hero-mega-info-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    .hero-mega-info-image:hover img {
        transform: scale(1.03);
    }
    /* Diagonal arrow indicator (matches alternatives' alt-out arrow) */
    .hero-mega-info-image::after {
        content: '';
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background-color: rgba(0, 0, 0, 0.55);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M17 7H8M17 7V16'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px 14px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .hero-mega-info-image:hover::after {
        background-color: var(--accent-blue);
        transform: translate(-1px, 1px);
    }
    /* NSFW blur for is_uncensored companions (matches existing .header-gallery-blurred pattern) */
    .hero-mega-info-image.is-nsfw-blur img {
        filter: blur(20px);
        transform: scale(1.08); /* slight zoom so blurred edges don't show */
    }
    .hero-mega-info-image-badge {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 999px;
        letter-spacing: 0.04em;
        z-index: 2;
        pointer-events: none;
    }

    /* Image column — ONE large hero image filling the column. Image is absolutely
       positioned to make its natural intrinsic size irrelevant to grid sizing. */
    .hero-mega-image {
        position: relative;
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        overflow: hidden !important;
        contain: strict;
        align-self: stretch;
        justify-self: stretch;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        min-height: 200px; /* fallback if grid stretch produces zero height */
    }
    /* Only the first link is visible — others hidden but kept in DOM for future use */
    .hero-mega-image .header-gallery-link {
        position: absolute;
        inset: 0;
        display: block;
        text-decoration: none;
        overflow: hidden;
    }
    .hero-mega-image .header-gallery-link:nth-of-type(n+2) {
        display: none;
    }
    .hero-mega-image .header-gallery-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }
    .hero-mega-image .header-gallery-link::after {
        content: '';
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M17 7H8M17 7V16'/></svg>");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px;
        backdrop-filter: blur(4px);
        transition: transform 0.2s ease;
        z-index: 2;
    }
    .hero-mega-image .header-gallery-link:hover::after {
        transform: scale(1.1);
    }
    .hero-mega-image .header-gallery-link:hover .header-gallery-image {
        transform: scale(1.04);
    }

    /* Review: scrollable column with mask-image fade — fades earlier (380px) so specs row shifts up */
    .hero-mega-review {
        position: relative;
        padding: var(--space-7) var(--space-7);
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        overflow-y: auto;
        max-height: 380px;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: var(--border-secondary) transparent;
        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    }
    .hero-mega-review::-webkit-scrollbar {
        width: 6px;
    }
    .hero-mega-review::-webkit-scrollbar-thumb {
        background: var(--border-secondary);
        border-radius: 3px;
    }
    .hero-mega-byline {
        font-size: 0.8125rem;
        color: var(--text-muted);
        margin: 0 0 var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-secondary);
    }
    .hero-mega-byline a {
        color: var(--text-secondary);
        text-decoration: none;
    }
    .hero-mega-byline a:hover {
        color: var(--accent-blue);
    }
    .hero-mega-review > p,
    .hero-mega-review > h3 {
        margin: 0 0 var(--space-3);
        line-height: 1.65;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }
    .hero-mega-review > h3 {
        color: var(--text-primary);
        font-size: 1.05rem;
        margin-top: var(--space-4);
    }
    .hero-mega-review > .hero-mega-byline + p,
    .hero-mega-review > .hero-mega-byline + h3 {
        margin-top: 0;
    }
    /* Alternatives sidebar list under info card — full-width entries to match info card line */
    /* Alternatives sidebar (right column) — full grid-row stretch, scroll inside */
    .hero-mega-alternatives {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-4);
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    .hero-mega-alternatives-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        font-weight: 600;
        flex-shrink: 0;
    }
    .hero-mega-alternatives-list {
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: alt-counter;
        flex: 1 1 0; /* basis 0 so content doesn't push column taller — scroll instead */
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-secondary) transparent;
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .hero-mega-alternatives-list::-webkit-scrollbar {
        width: 4px;
    }
    .hero-mega-alternatives-list::-webkit-scrollbar-thumb {
        background: var(--border-secondary);
        border-radius: 2px;
    }
    .hero-mega-alternatives-list li {
        counter-increment: alt-counter;
        display: grid;
        grid-template-columns: 18px 1fr 28px;
        align-items: center;
        gap: var(--space-2);
    }
    .hero-mega-alternatives-list li::before {
        content: counter(alt-counter);
        font-size: 0.75rem;
        color: var(--text-muted);
        text-align: center;
        font-weight: 600;
    }
    .hero-mega-alternatives-list .alt-link {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-primary);
        transition: background 0.15s ease;
        min-width: 0;
    }
    .hero-mega-alternatives-list .alt-link:hover {
        background: var(--bg-secondary);
    }
    .hero-mega-alternatives-list img {
        width: 44px;
        height: 26px;
        border-radius: var(--radius-sm);
        object-fit: contain;
        background: rgba(255, 255, 255, 0.04);
        padding: 2px;
    }
    .hero-mega-alternatives-list .alt-out {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-md);
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.15s ease, background 0.15s ease;
    }
    .hero-mega-alternatives-list .alt-out:hover {
        color: var(--accent-blue);
        background: var(--bg-secondary);
    }
    .hero-mega-alternatives-list .alt-out svg {
        width: 14px;
        height: 14px;
    }
    .hero-mega-alternatives-list .alt-name {
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-mega-alternatives-list .alt-rating {
        font-size: 0.75rem;
        color: var(--accent-blue);
        font-weight: 600;
    }

    /* Categories card inside leftcol — fills all remaining vertical space below info card */
    .hero-mega-categories {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        align-self: stretch;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    .hero-mega-categories-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        font-weight: 600;
        flex-shrink: 0;
    }
    .hero-mega-categories-list {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1 1 0; /* basis 0 so content doesn't push column taller — scroll instead */
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-secondary) transparent;
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .hero-mega-categories-list::-webkit-scrollbar {
        width: 4px;
    }
    .hero-mega-categories-list::-webkit-scrollbar-thumb {
        background: var(--border-secondary);
        border-radius: 2px;
    }
    .hero-mega-categories-list li {
        margin: 0;
    }
    .hero-mega-categories-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-2);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 500;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .hero-mega-categories-list a:hover {
        background: var(--bg-secondary);
        color: var(--accent-blue);
    }
    .hero-mega-categories-list a::after {
        content: '';
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.7;
    }

    /* Hide on desktop: pricing/bestfor moved into hero-mega columns. Stats-bar removed.
       Original .score-breakdown moved into the grid (.hero-mega-ratings). */
    .hero-mega-pricing,
    .hero-mega-bestfor,
    .hero-stats-bar,
    .companion-hero ~ .score-breakdown {
        display: none;
    }
}

/* Always-on (mobile + desktop) — hide redundant sections on the new companion-review-page layout */
body.companion-review-page main.container > section.verdict,
body.companion-review-page main.container > section.overview {
    display: none !important;
}

@media (min-width: 769px) {
    /* Pricing | Best For row 1, Platform | Content Policy row 2 — under review */
    .hero-mega-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        margin-bottom: var(--space-3); /* match the internal row gap, before ratings */
    }
    .hero-mega-specs > .fact {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5);
    }
    .hero-mega-specs > .fact h3 {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-2);
        font-weight: 600;
    }
    .hero-mega-specs > .fact p {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.4;
    }

    /* Rating breakdown — bars layout with title, in col 2 row 3 */
    .hero-mega-ratings {
        align-self: stretch;
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5);
    }
    .hero-mega-ratings-title {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        font-weight: 600;
    }
    .hero-mega-ratings-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-5);
        row-gap: var(--space-2);
    }
    .hero-mega-rating-cell {
        display: grid;
        grid-template-columns: minmax(70px, auto) 1fr 28px;
        align-items: center;
        gap: var(--space-3);
    }
    .hero-mega-rating-cell-label {
        font-size: 0.78rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-mega-rating-cell-bar {
        height: 5px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 3px;
        overflow: hidden;
    }
    .hero-mega-rating-cell-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-blue) 0%, #6366f1 100%);
        border-radius: 3px;
    }
    .hero-mega-rating-cell-value {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--accent-blue);
        text-align: right;
    }

    /* Original .hero-deal-tag hidden on desktop — replaced by .hero-mega-deal-tag inside review */
    .companion-hero > .hero-deal-tag {
        display: none;
    }
    /* Deal tag — overlaps the review's top edge (sits half above, half on the border) */
    .hero-mega-deal-tag {
        position: absolute;
        top: -14px; /* half of the tag's ~28px height — sits centered on the review's top border */
        right: var(--space-3);
        z-index: 10;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 4px var(--space-3);
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: white;
        border-radius: var(--radius-full);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
        white-space: nowrap;
    }
    .hero-mega-deal-tag .deal-icon {
        font-size: 0.8rem;
    }
    .hero-mega-deal-tag .deal-timer {
        font-size: 0.7rem;
        padding-left: var(--space-2);
        margin-left: 2px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Hide mobile-only readmore controls on desktop */
    .hero-mega-readmore {
        display: none;
    }

    /* Hide the original .companion-hero header content on desktop (replaced by .hero-mega) */
    .companion-hero > .hero-content {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Mobile: keep the original .companion-hero. From hero-mega we re-use only:
       review (with fade), top alternatives, and rating breakdown —
       in that order, immediately after the Visit Website button.
       Everything else inside hero-mega stays hidden on mobile. */
    .hero-mega-info,
    .hero-mega-info-image,
    .hero-mega-image,
    .hero-mega-deal-tag,
    .hero-mega-pricing,
    .hero-mega-bestfor,
    .hero-mega-readmore,
    .hero-stats-bar {
        display: none !important;
    }
    /* Place hero-mega right after .companion-hero (order 2) inside main.container's flex,
       and use it as a flex column itself so review/alternatives/ratings stack in the order below.
       Match companion-hero's order so DOM order resolves: companion-hero first, then hero-mega. */
    .hero-mega {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        margin: var(--space-4) 0;
    }
    /* Hide the duplicate score-breakdown card row — hero-mega-ratings replaces it on mobile */
    main.container > .score-breakdown { display: none; }
    .hero-mega-leftcol,
    .hero-mega-middle {
        display: contents;
    }
    /* Inner order inside hero-mega: review → specs → alternatives → ratings → categories */
    .hero-mega-review { order: 1; }
    .hero-mega-specs { order: 2; }
    .hero-mega-alternatives { order: 3; }
    .hero-mega-ratings { order: 4; }
    .hero-mega-categories { order: 5; }

    /* --- Review: capped height, scroll inside with fade-out at bottom --- */
    .hero-mega-review {
        position: relative;
        max-height: 220px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    }
    .hero-mega-review::-webkit-scrollbar { width: 4px; }
    .hero-mega-review::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 2px; }
    .hero-mega-review > p,
    .hero-mega-review > h3 {
        margin: 0 0 var(--space-3);
        line-height: 1.6;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }
    .hero-mega-review > h3 { color: var(--text-primary); font-size: 1.05rem; }
    .hero-mega-byline {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border-secondary);
    }
    .hero-mega-byline a { color: var(--text-secondary); text-decoration: none; }

    /* --- Top Alternatives: scrollable list with item styling --- */
    .hero-mega-alternatives {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        max-height: 260px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .hero-mega-alternatives-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        font-weight: 600;
        flex-shrink: 0;
    }
    .hero-mega-alternatives-list {
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: alt-counter;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .hero-mega-alternatives-list li {
        counter-increment: alt-counter;
        display: grid;
        grid-template-columns: 18px 1fr 28px;
        align-items: center;
        gap: var(--space-2);
    }
    .hero-mega-alternatives-list li::before {
        content: counter(alt-counter);
        font-size: 0.75rem;
        color: var(--text-muted);
        text-align: center;
        font-weight: 600;
    }
    .hero-mega-alternatives-list .alt-link {
        display: grid;
        grid-template-columns: 36px 1fr auto;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-primary);
        min-width: 0;
    }
    .hero-mega-alternatives-list img {
        width: 36px;
        height: 22px;
        border-radius: var(--radius-sm);
        object-fit: contain;
        background: rgba(255, 255, 255, 0.04);
        padding: 2px;
    }
    .hero-mega-alternatives-list .alt-name {
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-mega-alternatives-list .alt-rating {
        font-size: 0.75rem;
        color: var(--accent-blue);
        font-weight: 600;
    }
    .hero-mega-alternatives-list .alt-out {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-md);
        color: var(--text-muted);
        text-decoration: none;
    }
    .hero-mega-alternatives-list .alt-out svg { width: 14px; height: 14px; }

    /* --- Rating Breakdown: 2-col grid with bars --- */
    .hero-mega-ratings {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
    }
    .hero-mega-ratings-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        font-weight: 600;
    }
    .hero-mega-ratings-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-4);
        row-gap: var(--space-2);
    }
    .hero-mega-rating-cell {
        display: grid;
        grid-template-columns: minmax(60px, auto) 1fr 28px;
        align-items: center;
        gap: var(--space-2);
    }
    .hero-mega-rating-cell-label {
        font-size: 0.72rem;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-mega-rating-cell-bar {
        height: 4px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 3px;
        overflow: hidden;
    }
    .hero-mega-rating-cell-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-blue) 0%, #6366f1 100%);
        border-radius: 3px;
    }
    .hero-mega-rating-cell-value {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--accent-blue);
        text-align: right;
    }

    /* --- Specs: 2x2 grid (Pricing / Best For / Platform / Content Policy) --- */
    .hero-mega-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    .hero-mega-specs > .fact {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-md);
        padding: var(--space-3);
    }
    .hero-mega-specs > .fact h3 {
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-1);
        font-weight: 600;
    }
    .hero-mega-specs > .fact p {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.4;
    }

    /* --- Categories: scrollable list under Rating Breakdown --- */
    .hero-mega-categories {
        background: var(--bg-surface);
        border: 1px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        max-height: 240px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .hero-mega-categories-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 0 0 var(--space-3);
        font-weight: 600;
        flex-shrink: 0;
    }
    .hero-mega-categories-list {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-2);
        row-gap: 0;
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
    }
    .hero-mega-categories-list li {
        padding: 0;
        min-width: 0;
    }
    .hero-mega-categories-list a {
        color: var(--text-primary);
        text-decoration: none;
        font-size: 0.875rem;
        display: block;
        padding: var(--space-2);
        border-radius: var(--radius-md);
    }
    /* Belt-and-braces: force horizontal overflow clipping on mobile */
    html, body, main, main.container, .companion-hero {
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Breadcrumb: allow wrapping so long titles don't push the page wide */
    .category-breadcrumb {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.alternatives {
    margin: var(--space-12) 0;
}

.alternatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.alternative {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    display: block;
}

.alternative:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.alternative img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    object-fit: contain;
    background-color: var(--bg-tertiary);
    padding: var(--space-3);
}

.alternative h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.alternative p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cta-section {
    text-align: center;
    margin: var(--space-20) 0;
    padding: var(--space-16) 0;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-2xl);
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: var(--space-4);
}

.cta-section p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== NEW COMPANION PAGE COMPONENTS ===== */

/* Score Breakdown */
.score-breakdown {
    margin: var(--space-8) 0;
}

.score-breakdown h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
}

.score-breakdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.score-breakdown-card {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
}

.score-breakdown-card-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.score-breakdown-card-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Hero Byline (author + date) */
.hero-byline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--text-muted);
    position: absolute;
    top: var(--space-4);
    left: var(--space-6);
}

@media (max-width: 768px) {
    .hero-byline {
        position: static;
        padding: var(--space-2) var(--space-4);
        margin-bottom: var(--space-3);
        font-size: 0.75rem;
    }
}

.hero-byline a {
    color: var(--text-secondary);
    text-decoration: none;
}

.hero-byline a:hover {
    color: var(--accent-blue);
}

.hero-byline-sep {
    color: var(--border-primary);
}

.hero-byline time {
    color: var(--text-muted);
}

/* (Author box removed - author now inline in hero byline) */

/* Best For Section */
.best-for-section {
    margin: var(--space-12) 0;
}

.best-for-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.best-for-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.best-for-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.best-for-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: var(--space-3);
}

.best-for-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.best-for-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.best-for-not {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--accent-orange);
}

.best-for-not h3 {
    font-size: 0.875rem;
    color: var(--accent-orange);
    margin-bottom: var(--space-3);
}

.best-for-not ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.best-for-not li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: var(--space-1) 0;
    line-height: 1.5;
}

.best-for-not li::before {
    content: "- ";
    color: var(--text-muted);
}

/* Comparison Table */
.comparison-table-section {
    margin: var(--space-12) 0;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-secondary);
}

.comparison-table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-table td {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table td:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

/* Glance table (hardcoded SEO table) */
.glance-section {
    margin-bottom: var(--space-8);
}

.glance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.glance-table th,
.glance-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-secondary);
}

.glance-table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glance-table td {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
}

.glance-table tr:last-child td {
    border-bottom: none;
}

.glance-table td:first-child {
    font-weight: 600;
    color: var(--text-primary);
    width: 2rem;
}

.glance-table a {
    color: var(--accent-blue);
    text-decoration: none;
}

.glance-table a:hover {
    text-decoration: underline;
}

.comparison-highlight {
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-left: 2px solid var(--accent-blue);
}

.comparison-table th.comparison-highlight {
    color: var(--accent-blue);
}

.comparison-table th a {
    color: inherit;
    text-decoration: none;
}

.comparison-table th a:hover {
    color: var(--accent-blue);
    text-decoration: underline;
}

/* How to Get Started */
.how-to-section {
    margin: var(--space-12) 0;
}

.how-to-steps {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.how-to-step {
    display: flex;
    gap: var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.how-to-step:hover {
    border-color: var(--border-accent);
}

.how-to-step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    color: white;
    flex-shrink: 0;
}

.how-to-step-content h3 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.how-to-step-content p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Trust & Safety */
.trust-safety-section {
    margin: var(--space-12) 0;
}

.trust-safety-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.trust-safety-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.trust-safety-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: var(--space-3);
}

.trust-safety-item h3 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.trust-safety-item p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* (Review update log removed - freshness date now in hero byline) */

/* People Also Ask */
.people-also-ask {
    margin: var(--space-12) auto;
    max-width: 900px;
    padding: 0 var(--space-4);
}

.people-also-ask h2 {
    margin-bottom: var(--space-6);
}

.paa-container {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.paa-item {
    border-bottom: 1px solid var(--border-secondary);
}

.paa-item:last-child {
    border-bottom: none;
}

.paa-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--bg-surface);
    border: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
    font-family: var(--font-sans);
}

.paa-question:hover {
    background: var(--bg-tertiary);
}

.paa-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

.paa-item.active .paa-chevron {
    transform: rotate(180deg);
}

.paa-answer {
    display: none;
    padding: 0 var(--space-6) var(--space-4);
    background: var(--bg-surface);
}

.paa-item.active .paa-answer {
    display: block;
}

.paa-answer p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.paa-answer a {
    color: var(--accent-blue);
    text-decoration: none;
}

.paa-answer a:hover {
    text-decoration: underline;
}

/* Mobile ordering for new sections (integrated with main ordering in @media max-width:768px below line ~8220) */
@media (max-width: 768px) {

    .best-for-grid {
        grid-template-columns: 1fr;
    }
    .trust-safety-grid {
        grid-template-columns: 1fr 1fr;
    }
    .comparison-table {
        font-size: 0.8125rem;
    }
    .comparison-table th,
    .comparison-table td {
        padding: var(--space-2) var(--space-3);
    }
}

@media (max-width: 480px) {
    .trust-safety-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== END NEW COMPANION PAGE COMPONENTS ===== */

/* Topics Section */
.topics-list,
.news-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.topic-card,
.news-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
    position: relative;
}

.topic-card:hover,
.news-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

/* Native Ads within topics section */
.topics-section ins[class*="eas6a97888e20"] {
    display: block;
    margin-top: var(--space-6);
    max-width: 100%;
    overflow: visible;
}

.topics-section ins[class*="eas6a97888e20"] > * {
    max-width: 100%;
}

.topic-badge,
.news-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background-color: var(--accent-blue);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.topic-card.featured,
.news-card.featured {
    border-color: var(--accent-purple);
    background-color: rgba(139, 92, 246, 0.05);
}

.topic-card.featured .topic-badge,
.news-card.featured .news-badge {
    background-color: var(--accent-purple);
}

.topic-card h3,
.news-card h3 {
    margin: 0 0 var(--space-3) 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    padding-right: var(--space-12);
}

.topic-card h3 a,
.news-card h3 a {
    color: var(--text-primary);
}

.topic-card h3 a:hover,
.news-card h3 a:hover {
    color: var(--accent-blue);
}

.topic-card p,
.news-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.topic-meta,
.news-meta {
    display: flex;
    gap: var(--space-4);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.topic-meta .category,
.news-meta .category {
    background-color: var(--bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.news-source {
    color: var(--accent-blue);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

/* News Pagination */
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding: var(--space-4) 0;
}

.news-pagination .pagination-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.news-pagination .pagination-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.news-pagination .pagination-btn.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.news-pagination .pagination-pages {
    display: flex;
    gap: var(--space-1);
}

.news-pagination .pagination-num {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-pagination .pagination-num:hover {
    background: var(--bg-surface);
    color: var(--accent-blue);
}

.news-pagination .pagination-num.active {
    background: var(--accent-blue);
    color: white;
    font-weight: 600;
}

@media (max-width: 768px) {
    .news-pagination {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .news-pagination .pagination-btn {
        font-size: 0.8rem;
        padding: var(--space-2) var(--space-3);
    }
    .news-pagination .pagination-num {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Author info in news cards */
.news-meta .author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-meta .author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.news-meta .author-name {
    font-weight: 500;
    color: var(--text-secondary);
}

/* Mobile: author on separate line below date */
@media (max-width: 768px) {
    .news-meta {
        flex-wrap: wrap;
    }

    .news-meta .author {
        order: 3;
        width: 100%;
        margin-top: 6px;
    }
}

.topics-cta {
    margin-top: var(--space-8);
    text-align: center;
}

/* Categories Section */
.categories-overview {
    margin: var(--space-12) 0;
    padding: var(--space-6) 0;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-2xl);
}

.categories-overview .section-header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    border-bottom: none;
    margin-bottom: var(--space-12);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.category-card {
    display: block;
    text-align: center;
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.category-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.category-icon {
    margin-bottom: var(--space-4);
    color: var(--accent-blue);
}

.category-icon .icon {
    width: 2.5rem;
    height: 2.5rem;
}

.category-card h3 {
    margin-bottom: var(--space-3);
    font-size: 1.125rem;
}

.category-card h3 a {
    color: var(--text-primary);
}

.category-card h3 a:hover {
    color: var(--accent-blue);
}

.category-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.category-stats {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

/* Category Ad Card - spans 2 columns, vertical card layout */
.category-ad-card {
    grid-column: span 2;
    background-color: var(--bg-surface);
    border: 2px solid var(--border-accent);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    position: relative;
}

.category-ad-card .category-ad-actions {
    margin-top: auto;
    padding-top: var(--space-3);
}

.category-ad-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-ad-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.category-ad-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.category-ad-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-ad-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.category-ad-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-ad-stars {
    color: #fbbf24;
    font-size: 0.875rem;
}

.category-ad-score {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.category-ad-video-wrapper {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.category-ad-video-wrapper.ad-video-18plus {
    cursor: pointer;
}

/* Companion card video (in grid) - no aspect ratio, full width */
.companion-ad-video-wrapper {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-3);
}

.companion-ad-video-wrapper.ad-video-18plus {
    cursor: pointer;
}

.companion-ad-video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 950 / 300;
    object-fit: contain;
    background: #1a1a2e;
}

.companion-ad-video-wrapper.ad-video-18plus .companion-ad-video {
    filter: blur(20px);
    transition: filter 0.3s ease;
}

.companion-ad-video-wrapper.ad-video-18plus[data-revealed="true"] .companion-ad-video {
    filter: none;
}

.companion-ad-video-wrapper.ad-video-18plus[data-revealed="true"] .ad-video-blur-overlay {
    opacity: 0;
    pointer-events: none;
}

.category-ad-video {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* The OurDream banner on /categories is 950x250 and carries "ourdream.ai" across
   its bottom fifth, directly under the card's own OurDream logo and name. Showing
   only the top 78% (950/195) drops that line while the headline stays whole;
   anchoring to the top is what makes the crop come off the bottom. The ID beats
   the mobile override below, so the crop holds at every width. */
#category-ad-ourdream .category-ad-video {
    aspect-ratio: 950 / 195;
    object-fit: cover;
    object-position: center top;
}

.category-ad-video-wrapper.ad-video-18plus .category-ad-video {
    filter: blur(20px);
    transition: filter 0.3s ease;
}

.category-ad-video-wrapper.ad-video-18plus[data-revealed="true"] .category-ad-video {
    filter: none;
}

.category-ad-video-wrapper.ad-video-18plus[data-revealed="true"] .ad-video-blur-overlay {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .category-ad-video {
        aspect-ratio: 16 / 9;
        object-fit: contain;
        background: #000;
    }
}

.category-ad-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.category-ad-btn-primary,
.category-ad-btn-secondary {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    display: block;
}

.category-ad-btn-primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
    border: none;
}

.category-ad-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.category-ad-btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.category-ad-btn-secondary:hover {
    border-color: var(--border-accent);
    background-color: var(--bg-tertiary);
}

/* Category Ad Card - Mobile responsive */
@media (max-width: 768px) {
    .category-ad-card {
        /* Takes full width on mobile like other cards */
    }
}

/* News Advertisement Card */
.news-ad-card {
    border: 1px solid var(--border-primary);
    background-color: var(--bg-surface);
}

.news-ad-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.news-ad-card .spotlight-badge {
    background: white;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.ad-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.ad-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.ad-title-section h3 {
    margin: 0 0 var(--space-1) 0;
    font-size: 1.125rem;
}

.ad-companion-name {
    color: var(--text-primary);
    text-decoration: none;
}

.ad-companion-name:hover {
    color: var(--accent-blue);
}

.ad-rating-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
}

.ad-stars {
    color: #fbbf24;
}

.ad-rating-score {
    color: var(--text-secondary);
    font-weight: 600;
}

.ad-video-link {
    display: block;
    width: 100%;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-tertiary);
}

.ad-video-news {
    width: 100%;
    height: auto;
    aspect-ratio: 950 / 250;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.4);
    transform-origin: center top;
    display: block;
}

/* Square video variant for portrait/square videos */
.ad-video-news.ad-video-square {
    aspect-ratio: 1 / 1;
    max-height: 280px;
    object-fit: cover;
}

/* 18+ blur overlay for adult content */
.ad-video-18plus {
    position: relative;
    display: block;
}

.ad-video-18plus .ad-video-news {
    filter: blur(20px);
    transition: filter 0.3s ease;
}

.ad-video-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.ad-video-18plus:hover .ad-video-blur-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.ad-video-18plus-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 4px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ad-video-play-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ad-video-play-icon svg {
    width: 28px;
    height: 28px;
    color: #1a1a1a;
    margin-left: 3px;
}

.ad-video-18plus:hover .ad-video-play-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

/* Revealed state - blur removed */
.ad-video-18plus[data-revealed="true"] .ad-video-news {
    filter: none;
}

.ad-video-18plus[data-revealed="true"] .ad-video-blur-overlay {
    opacity: 0;
    pointer-events: none;
}

.ad-video-18plus {
    cursor: pointer;
}

/* ==========================================
   Video Ad Card - Better 18+ Design
   ========================================== */
.video-ad-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-primary);
    transition: all 0.3s ease;
}

.video-ad-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

.video-ad-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.video-ad-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease;
}

/* Blurred state */
.video-ad-card:not([data-revealed="true"]) .video-ad-player {
    filter: blur(25px);
    transform: scale(1.1);
}

.video-ad-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.video-ad-card[data-revealed="true"] .video-ad-blur-overlay {
    opacity: 0;
    pointer-events: none;
}

.video-ad-blur-content {
    text-align: center;
    padding: var(--space-6);
}

.video-ad-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 8px 20px;
    border-radius: 8px;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.video-ad-warning {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    margin-bottom: var(--space-4);
}

.video-ad-reveal-btn {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.video-ad-reveal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.video-ad-info {
    padding: var(--space-4);
}

.video-ad-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.video-ad-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.video-ad-title h3 {
    margin: 0;
    font-size: 1.125rem;
}

.video-ad-title h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.video-ad-title h3 a:hover {
    color: var(--accent-blue);
}

.video-ad-tagline {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.video-ad-actions {
    display: flex;
    gap: var(--space-2);
}

.video-ad-btn-primary,
.video-ad-btn-secondary {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.video-ad-btn-primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
}

.video-ad-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.video-ad-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.video-ad-btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
}

/* Video ad in news grid */
.video-ad-news {
    position: relative;
}

.video-ad-news .spotlight-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 5;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .video-ad-wrapper {
        aspect-ratio: 4 / 3;
    }

    .video-ad-actions {
        flex-direction: column;
    }

    .video-ad-badge {
        font-size: 1rem;
        padding: 6px 16px;
    }

    .video-ad-reveal-btn {
        padding: 10px 20px;
        font-size: 0.9375rem;
    }
}

.ad-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.ad-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: auto;
}

.ad-btn-primary,
.ad-btn-secondary {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.ad-btn-primary {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    color: white;
    border: none;
}

.ad-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.ad-btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.ad-btn-secondary:hover {
    border-color: var(--border-accent);
    background-color: var(--bg-tertiary);
}

/* Smaller buttons for news-ad-card to fit translated text */
.news-ad-card .ad-btn-primary,
.news-ad-card .ad-btn-secondary {
    font-size: 0.8125rem;
    padding: 0.625rem 0.875rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ad-video-news {
        aspect-ratio: 950 / 250;
    }

    .ad-video-news.ad-video-square {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .ad-actions {
        flex-direction: column;
    }

    .ad-btn-primary,
    .ad-btn-secondary {
        width: 100%;
    }

    .news-ad-card .ad-btn-primary,
    .news-ad-card .ad-btn-secondary {
        font-size: 0.85rem;
        padding: 0.65rem 0.75rem;
        white-space: nowrap;
    }

    .news-ad-card .spotlight-badge,
    .advertisement-card .spotlight-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* Best For Ad Section */
.best-for-ad-section {
    margin: var(--space-8) 0;
}

.best-for-ad-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    transition: all 0.2s ease;
}

.best-for-ad-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.best-for-ad-card .ad-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.best-for-ad-card .spotlight-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.ad-video-bestfor {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
    .best-for-ad-card {
        padding: var(--space-4);
    }

    .ad-video-bestfor {
        aspect-ratio: 4 / 1;
        object-fit: contain;
        background: #000;
    }
}

/* SEO Guide Sections */
.guide-section {
    margin: var(--space-12) 0;
    padding: var(--space-8);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
}

.guide-section h2 {
    margin-bottom: var(--space-6);
    font-size: 1.75rem;
}

.guide-section h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    font-size: 1.25rem;
    color: var(--text-primary);
}

.guide-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.guide-section ul {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.guide-section ul li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}

.choice-factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.factor-card {
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    text-align: center;
}

.factor-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.factor-card h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 1rem;
    color: var(--text-primary);
}

.factor-card h4 .icon {
    color: var(--accent-blue);
    flex-shrink: 0;
}

.factor-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.archetype-item {
    padding: var(--space-4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

.archetype-item strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--accent-blue);
}

.archetype-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Key Takeaways Section */
.key-takeaways-section {
    margin: var(--space-12) 0;
    padding: var(--space-8);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-xl);
}

.key-takeaways-section h2 {
    margin-bottom: var(--space-6);
}

.takeaways-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .takeaways-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .takeaways-grid {
        grid-template-columns: 1fr;
    }
}

.takeaway-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    background-color: var(--bg-surface);
    border-radius: var(--radius-md);
}

.takeaway-icon {
    flex-shrink: 0;
    color: var(--accent-green, #22c55e);
}

.takeaway-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.takeaway-item p {
    margin: 0;
    line-height: 1.5;
}

/* Related Categories Section */
.related-categories-section {
    margin: var(--space-12) 0;
}

.related-categories-section > p {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .related-grid .category-card {
        padding: var(--space-4);
    }

    .related-grid .category-card h3 {
        font-size: 0.9rem;
    }

    .related-grid .category-card p {
        font-size: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.related-card {
    display: block;
    padding: var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.related-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.related-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-3);
}

.related-card h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.related-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Related Searches Section */
.related-searches-section {
    margin: var(--space-12) 0;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.search-tag {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-tag:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

/* Last Updated */
.last-updated {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: var(--space-3);
}

@media (max-width: 768px) {
    .guide-section {
        padding: var(--space-5);
    }

    .key-takeaways-section {
        padding: var(--space-5);
    }

    .choice-factors,
    .archetype-grid,
    .takeaways-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer */
footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    padding: var(--space-16) 0 var(--space-8) 0;
    margin-top: var(--space-20);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.footer-content-seo {
    margin-bottom: var(--space-12);
}

/* Desktop footer: alle zes de kolommen op een rij. De footer is teruggebracht
   tot branding + 5 linkkolommen, dus dat past nu op een regel met wat kleiner
   lettertype. Geen nth-child-uitzonderingen meer nodig. */
@media (min-width: 1025px) {
    .footer-content-top,
    .footer-content-seo {
        grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
        gap: var(--space-4);
        align-items: start;
    }

    .footer-section ul li a {
        font-size: 0.68rem;
        line-height: 1.5;
    }

    .footer-section h4 {
        font-size: 0.78rem;
        letter-spacing: 0.02em;
    }

    .footer-section p {
        font-size: 0.72rem;
    }
}

.footer-section h4 {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--space-4);
}

.footer-section p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: var(--space-2);
}

.footer-section ul li a {
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.footer-section ul li a:hover {
    color: var(--accent-blue);
}

.footer-section .reddit-link:hover {
    color: var(--accent-blue);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-primary);
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

/* News Page Styles */
.market-overview {
    margin: var(--space-16) 0;
    padding: var(--space-12) 0;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-2xl);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
}

.stat-card {
    text-align: center;
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.recent-news {
    margin: var(--space-6) 0 var(--space-16) 0;
}

.recent-news .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

.recent-news .news-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.recent-news .news-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.recent-news .news-card.featured {
    border-color: var(--accent-blue);
    background-color: rgba(59, 130, 246, 0.05);
}

.recent-news .news-card.featured .news-badge {
    background-color: var(--accent-purple);
}

.recent-news .news-card h3 {
    font-size: 1.125rem;
    padding-right: var(--space-8);
}

.recent-news .news-card p {
    flex-grow: 1;
}

.recent-news .news-meta {
    margin-top: auto;
    align-items: center;
}

.industry-insights {
    margin: var(--space-16) 0;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.insight-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.insight-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.insight-card h3 {
    margin: 0 0 var(--space-3) 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.insight-card p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

/* Article Page Styles - Restored from Working Version */
.article-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 40px;
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.article-header {
    margin-bottom: var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-primary);
}

.breadcrumb {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.breadcrumb a {
    color: var(--accent-blue);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #60a5fa;
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 var(--space-2);
    color: var(--text-dim);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    font-size: 0.875rem;
}

.article-badge {
    background-color: var(--accent-blue);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.article-meta time {
    color: var(--text-muted);
}

.reading-time {
    color: var(--text-muted);
}

.article-header h1 {
    font-size: 2.25rem;
    line-height: 1.3;
    margin: var(--space-6) 0;
    color: var(--text-primary);
}

.article-summary {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-8);
    font-weight: 500;
}

.article-body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.content-section {
    margin-bottom: var(--space-12);
}

.content-section h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    font-size: 1.5rem;
}

.content-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    font-size: 1.25rem;
}

.content-section p {
    margin-bottom: var(--space-4);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.content-section ul, .content-section ol {
    margin: var(--space-6) 0;
    padding-left: var(--space-8);
}

.content-section li {
    margin-bottom: var(--space-3);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* Custom TOC */
.custom-toc {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    list-style: none;
    margin-bottom: var(--space-8);
}

.custom-toc li {
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
    position: relative;
}

.custom-toc li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

.custom-toc a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.custom-toc a:hover {
    color: var(--accent-blue);
}

/* Highlight boxes */
.highlight-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

.highlight-box h3 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 1.25rem;
}

.highlight-box ul {
    margin: 0;
    padding-left: var(--space-6);
}

.highlight-box li {
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
}

.article-sidebar {
    display: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .article-container {
        padding: 20px 15px 30px;
    }

    .article-content {
        padding: var(--space-4) 0;
    }

    .article-header h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .article-summary {
        font-size: 1rem;
        line-height: 1.6;
    }

    .content-section h2 {
        font-size: 1.25rem;
    }

    .content-section h3 {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .article-container {
        padding: 20px 10px 20px;
    }

    .article-header h1 {
        font-size: 1.5rem;
    }

    .article-summary {
        font-size: 0.95rem;
    }
}.article-body h3:contains("⭐"),
.article-body h3:contains("🚀"),
.article-body h3:contains("💎"),
.article-body h4:contains("#") {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    margin-top: var(--space-16) !important;
    margin-bottom: var(--space-8) !important;
    padding: var(--space-4) 0;
    border-bottom: 2px solid var(--border-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Platform info paragraphs (Price: $x | Best For: x) */
.article-body p:has(strong:contains("Price:")),
.article-body p:has(strong:contains("Best For:")),
.content-section p:has(strong) {
    background-color: var(--bg-surface);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-blue);
    margin-bottom: var(--space-8) !important;
    font-weight: 500;
}

/* Better spacing for platform descriptions */
.article-body p + p {
    margin-top: var(--space-6);
}

/* Key Features sections */
.content-section:has(h3:contains("Key Features")) ul,
.article-body ul:has(li:contains("customization")) {
    background-color: var(--bg-surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
}

.content-section:has(h3:contains("Key Features")) li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-secondary);
}

.guidelines-list {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.guideline-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.guideline-item h3 {
    margin-bottom: var(--space-3);
    color: var(--accent-blue);
}

.implementation-timeline {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    list-style: none;
}

.implementation-timeline li {
    margin-bottom: var(--space-3);
    padding-left: var(--space-6);
    position: relative;
}

.implementation-timeline li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: 700;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.impact-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.impact-card h4 {
    color: var(--accent-blue);
    margin-bottom: var(--space-3);
}

.industry-quote {
    background-color: var(--bg-surface);
    border-left: 4px solid var(--accent-blue);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.industry-quote p {
    font-size: 1.125rem;
    font-style: italic;
    margin-bottom: var(--space-4);
}

.industry-quote cite {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.article-footer {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-primary);
}

.article-tags {
    margin-bottom: var(--space-8);
}

.tag {
    display: inline-block;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    margin-right: var(--space-2);
    margin-bottom: var(--space-2);
}

.article-share h4 {
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.share-buttons {
    display: flex;
    gap: var(--space-4);
}

.share-btn {
    padding: var(--space-3) var(--space-6);
    background-color: var(--accent-blue);
    color: white;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.share-btn:hover {
    background-color: var(--accent-purple);
    transform: translateY(-1px);
}

.related-articles {
    margin-top: var(--space-16);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.related-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.related-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.related-card h3 {
    margin-bottom: var(--space-3);
    font-size: 1.125rem;
}

.related-card h3 a {
    color: var(--text-primary);
}

.related-card h3 a:hover {
    color: var(--accent-blue);
}

/* Related Content Section */
.related-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.related-content h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-8);
    font-size: 1.875rem;
    font-weight: 700;
}

.related-article {
    display: block;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    transition: all 0.2s ease;
    text-decoration: none;
}

.related-article:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.related-article h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-size: 1.125rem;
    font-weight: 600;
}

.related-article p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Category Pages G2-Style */
.category-hero-section {
    padding: var(--space-3) var(--space-6) var(--space-6) 0;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-6);
    text-align: left;
}

.category-hero-section h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: var(--space-4);
    margin-left: 0;
    padding-left: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    text-align: left;
}

.category-hero {
    text-align: left;
    padding: var(--space-8) var(--space-6);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-12);
}

.category-hero h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.category-hero p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0;
    line-height: 1.7;
}

.category-breadcrumb {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.category-breadcrumb a {
    color: var(--accent-blue);
}

.category-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 100%;
    margin-bottom: var(--space-6);
}

.category-stats {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: var(--space-1);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.category-filters {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.results-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.filters-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.filter-pills {
    display: flex;
    gap: var(--space-2);
}

.filter-pill {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill:hover {
    border-color: var(--accent-blue);
}

.filter-pill.active {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.sort-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.sort-select {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.category-layout {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-16);
}

.category-layout .category-grid {
    margin-bottom: 0;
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-16);
    flex: 1;
    min-width: 0;
}

.category-ranking-sidebar {
    width: 260px;
    flex-shrink: 0;
}

.ranking-sidebar-inner {
    position: sticky;
    top: 80px;
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.ranking-sidebar-inner h3 {
    font-size: 1rem;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-secondary);
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ranking;
}

.ranking-list li {
    counter-increment: ranking;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.85rem;
}

.ranking-list li:hover {
    background: var(--bg-tertiary);
}

.ranking-list li.active {
    background: var(--bg-tertiary);
    font-weight: 600;
}

.ranking-list li::before {
    content: counter(ranking) ".";
    font-weight: 700;
    color: var(--text-tertiary);
    min-width: 22px;
    font-size: 0.8rem;
}

.ranking-list li img {
    width: 40px;
    height: 20px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.ranking-list li a {
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-list li a::after {
    content: ' ↗';
    font-size: 0.7rem;
    opacity: 0.5;
}

.ranking-list li a:hover {
    color: var(--accent-primary);
}

.ranking-list li a:hover::after {
    opacity: 1;
}

.companion-product-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s ease;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.companion-product-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.companion-product-card.leader {
    border-color: var(--accent-blue);
}

.companion-product-card.high-performer {
    border-color: var(--accent-purple);
}

.product-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--accent-blue);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0;
    z-index: 1;
    white-space: nowrap;
}

.product-badge.cotm-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Companion of the Month in de #1-sectie zelf. Bewust niet .product-badge:
   die is absolute en ontsnapt naar .container, boven op de spotlight-banner. */
.cotm-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2);
}
.cotm-inline .icon { width: 14px; height: 14px; fill: currentColor; }
/* Eigen regel rechtsboven, boven de titelregel van de #1-sectie */
.platform-review > .cotm-inline { display: flex; width: fit-content; margin: 0 0 var(--space-2) auto; }

/* Extra screenshot uit de gallery, als derde item in het plus/min-raster.
   Desktop: over de volle breedte onder de twee kolommen, dus tussen de
   plus/minpunten en de 'Best for' regel. Mobiel: tussen plus en min. */
.pros-cons-grid .pc-shot { grid-column: 1 / -1; margin: var(--space-2) 0 0; position: relative; border-radius: var(--radius-md); overflow: hidden; }
.pros-cons-grid .pc-shot a { display: block; line-height: 0; }
.pros-cons-grid .pc-shot img { width: 100%; height: auto; display: block; }
.pros-cons-grid .pc-shot.is-blurred img { filter: blur(22px); }
.pros-cons-grid .pc-shot .img-reveal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 900px) {
    /* gestapeld: plus, dan de afbeelding, dan min */
    .platform-review .pros-cons-grid { grid-template-columns: 1fr; }
    .platform-review .pros-cons-grid .pros { order: 1; }
    .platform-review .pros-cons-grid .pc-shot { order: 2; }
    .platform-review .pros-cons-grid .cons { order: 3; }
}

.companion-product-card.high-performer .product-badge {
    background-color: var(--accent-purple);
}

/* Holiday Sale Badge */
.holiday-sale-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
}

/* Position deal badge on left side of companion cards, sitting on border edge */
.companion-card .holiday-sale-badge {
    top: -12px;
    left: var(--space-3);
    right: auto;
    font-size: 0.7rem;
    padding: var(--space-1) var(--space-2);
}

/* Category product cards */
.companion-product-card .holiday-sale-badge {
    top: -12px;
    left: var(--space-4);
    right: auto;
}

/* Hero Deal Tag - Pill Style */
.hero-deal-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
    z-index: 5;
    margin: 0 auto var(--space-4) auto;
}

/* Desktop: Position deal tag in top right of hero section */
@media (min-width: 769px) {
    .companion-hero {
        position: relative;
    }

    .hero-deal-tag {
        position: absolute;
        top: -12px;
        right: var(--space-4);
        margin: 0;
    }
}

.hero-deal-tag .deal-icon {
    font-size: 0.875rem;
}

.hero-deal-tag .deal-text {
    white-space: nowrap;
}

.hero-deal-tag .deal-timer {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.9;
    padding-left: var(--space-2);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
    .hero-deal-tag {
        font-size: 0.75rem;
        padding: var(--space-2) var(--space-3);
    }

    .hero-deal-tag .deal-timer {
        font-size: 0.6875rem;
    }
}

/* Holiday Deal Tag with Timer (Legacy) */
.holiday-deal-tag {
    position: relative;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    z-index: 10;
    min-width: 140px;
    display: inline-block;
    margin: 0 auto var(--space-4) auto;
}

.holiday-deal-tag .deal-title {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.holiday-deal-tag .deal-discount {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.holiday-deal-tag .deal-timer {
    font-size: 0.75rem;
    opacity: 0.9;
    font-family: var(--font-mono, monospace);
}

.holiday-deal-tag .deal-timer-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .companion-hero .hero-content {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.product-header {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    align-items: center;
}

.product-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    object-fit: contain;
    background-color: var(--bg-tertiary);
    padding: var(--space-2);
    flex-shrink: 0;
}

.product-title-section {
    flex: 1;
    padding-right: var(--space-12);
}

.product-title-section h3 {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.product-title-section h3 a {
    color: var(--text-primary);
}

.product-title-section h3 a:hover {
    color: var(--accent-blue);
}

.product-rating {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.stars {
    color: var(--accent-orange);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

/* Half star styling - using gradient for half-filled effect */
.star-half {
    background: linear-gradient(90deg, var(--accent-orange) 50%, rgba(255, 140, 0, 0.3) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.star-filled {
    color: var(--accent-orange);
}

.star-empty {
    color: rgba(255, 140, 0, 0.3);
}

.rating-score {
    font-weight: 700;
    color: var(--text-primary);
}

.rating-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.product-tagline {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.product-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
    .product-description {
        font-size: 1rem;
        line-height: 1.7;
    }

    .product-tagline {
        font-size: 0.95rem;
    }

    .highlight-item p {
        font-size: 0.875rem;
    }

    .product-title-section h3 {
        font-size: 1.25rem;
    }

    .pricing-main {
        font-size: 1.125rem;
    }
}

.product-highlights {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.product-highlights.compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.product-highlights.compact.has-preview {
    grid-template-columns: repeat(4, 1fr);
}

.product-highlights .highlight-preview {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.product-highlights .highlight-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-highlights .highlight-preview:hover img {
    transform: scale(1.05);
}

.product-highlights .highlight-preview.nsfw-blur {
    position: relative;
}

.product-highlights .highlight-preview.nsfw-blur img {
    filter: blur(12px);
    transform: scale(1.1);
}

.product-highlights .highlight-preview .nsfw-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.product-highlights .highlight-preview .nsfw-icon {
    width: 28px;
    height: 28px;
    stroke: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.product-highlights .highlight-preview .nsfw-overlay span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    padding: var(--space-2);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    text-align: center;
    flex-direction: column;
}

.product-highlights.compact .highlight-item {
    padding: var(--space-3);
    gap: var(--space-2);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.highlight-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.highlight-item strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.highlight-item p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.product-pricing {
    margin-bottom: var(--space-6);
}

.pricing-main {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: var(--space-1);
}

.pricing-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.product-actions {
    display: flex;
    gap: var(--space-4);
}

.btn-primary {
    background-color: var(--accent-blue);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-accent);
}

.category-insights {
    margin: var(--space-16) 0;
}

.category-insights .insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-6);
}

@media (max-width: 900px) {
    .category-insights .insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .category-insights .insights-grid {
        grid-template-columns: 1fr;
    }
}

.insight-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.insight-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.insight-card h3 {
    margin: 0 0 var(--space-3) 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.insight-card p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.comparison-table-wrapper .comparison-table {
    margin: 0;
}

.table-container {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-6);
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4) var(--space-6);
    text-align: left;
    border-bottom: 1px solid var(--border-secondary);
}

.comparison-table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.comparison-table td {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.comparison-table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.faq-section {
    margin: var(--space-16) 0;
    background-color: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--border-secondary);
}

.faq-section h2 {
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: 1.75rem;
    color: var(--text-primary);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
}

.faq-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    transition: all 0.2s ease;
}

.faq-item:hover {
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.faq-item h3 {
    margin: 0 0 var(--space-3) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.faq-item p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Mobile Menu Overlay */
.nav-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Desktop Navigation */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 0.6rem !important;
        transition: none !important;
        z-index: auto !important;
        overflow-y: visible !important;
        left: auto !important;
        visibility: visible !important;
    }

    /* Minder items in de nav sinds News, Deals en Compare eruit zijn, dus
       ruimer gezet: groter lettertype en meer lucht tussen de links. */
    .nav-menu li a {
        font-size: 0.95rem !important;
        padding: 0.5rem 0.75rem !important;
        letter-spacing: 0.01em;
    }

    .hamburger {
        display: none !important;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .category-ranking-sidebar {
        display: none;
    }

    .category-layout {
        display: block;
    }

    .main-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* Mobile layout: Categories first, then News */
    body {
        display: flex;
        flex-direction: column;
    }

    .categories-overview {
        order: 1;
    }

    .topics-section {
        order: 2;
    }

    main.container {
        display: flex;
        flex-direction: column;
    }

    /* Ensure companions section comes first */
    .main-layout {
        order: 0;
    }
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--space-2);
    z-index: 10000;
    background: none;
    border: none;
}

.hamburger span {
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    margin: 2px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-4px, 4px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-4px, -4px);
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Contact Page Styles */
.contact-content {
    margin: var(--space-12) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-16);
    align-items: start;
}

.contact-info {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.contact-details {
    margin: var(--space-6) 0;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.contact-icon {
    font-size: 1.125rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.contact-text h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: var(--space-1);
}

.contact-text p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.contact-reasons {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-secondary);
}

.contact-reasons h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.contact-reasons ul {
    list-style: none;
    padding: 0;
}

.contact-reasons li {
    color: var(--text-secondary);
    padding: var(--space-2) 0;
    position: relative;
    padding-left: var(--space-6);
}

.contact-reasons li::before {
    content: "✓";
    color: var(--accent-green);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Press Kit Section */
.press-kit-section {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-secondary);
}

.press-kit-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.press-kit-section p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
}

.press-kit-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.press-kit-link:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.press-kit-icon {
    font-size: 1.125rem;
    filter: grayscale(0.3);
}

.press-kit-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.press-kit-text strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.press-kit-text small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.contact-form-section {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.contact-form-section h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-group select {
    cursor: pointer;
}

.checkbox-group {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
    width: auto;
    flex-shrink: 0;
}

.checkbox-group label {
    font-weight: normal;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}

.form-success,
.form-error {
    text-align: center;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
}

.form-success {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.form-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.success-icon,
.error-icon {
    font-size: 2rem;
    margin-bottom: var(--space-4);
}

.form-success h3 {
    color: var(--accent-green);
    margin-bottom: var(--space-2);
}

.form-error h3 {
    color: var(--accent-red);
    margin-bottom: var(--space-2);
}

.faq-section {
    margin: var(--space-20) 0;
    padding-top: var(--space-12);
    border-top: 1px solid var(--border-primary);
}

.faq-section h2 {
    text-align: center;
    margin-bottom: var(--space-8);
    color: var(--text-primary);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2);
}

.faq-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.faq-item h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-size: 1rem;
}

.faq-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        touch-action: manipulation;
    }

    body {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        min-height: 100vh;
        padding-top: 84px;
    }

    header {
        position: fixed !important;
        top: 0 !important;
        z-index: 9999999 !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: #1a1a1a !important;
        height: 80px !important;
        width: 100vw !important;
    }

    .container {
        padding: 0 var(--space-4);
        max-width: 100%;
        overflow-x: hidden;
    }

    main {
        position: relative !important;
        z-index: 1 !important;
    }
    
    nav {
        position: relative;
    }
    
    .hamburger {
        display: flex !important;
        position: relative;
        z-index: 9999999;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100vw;
        height: 100vh;
        background-color: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        transition: left 0.3s ease;
        z-index: 999999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        will-change: left;
        isolation: isolate;
        padding-top: var(--space-12);
    }
    
    .nav-menu.active {
        left: 0;
    }

    /* Show mobile logo in menu */
    .mobile-menu-logo {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border-primary);
        margin-top: var(--space-4);
    }

    .mobile-menu-logo img {
        width: 28px;
        height: 28px;
    }

    .mobile-menu-logo span {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .nav-menu li a {
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    
    .hero {
        padding: var(--space-2) 0;
    }

    /* Category Tags Mobile */
    .category-tags-section {
        margin: var(--space-6) 0 var(--space-4) 0;
    }

    .category-tags-wrapper {
        flex-direction: column;
        gap: var(--space-3);
    }

    .category-tags,
    .companion-tags {
        gap: var(--space-2);
        padding: 0 var(--space-2);
        justify-content: center;
    }

    .category-tag {
        font-size: 0.7rem;
        padding: var(--space-1) var(--space-3);
    }

    .featured-companion-tag {
        font-size: 0.7rem;
        padding: calc(var(--space-1) - 2px) var(--space-3);
    }

    /* Mobile container override */
    .container {
        padding: 0 var(--space-3);
    }

    /* Deal tag compact on mobile - top right, 2 lines */
    .companion-hero {
        position: relative;
    }

    .hero-deal-tag {
        position: absolute !important;
        top: var(--space-2);
        right: var(--space-3);
        margin: 0 !important;
        font-size: 0.65rem;
        padding: var(--space-1) var(--space-2);
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        max-width: 110px;
        line-height: 1.3;
        z-index: 5;
    }

    .hero-deal-tag .deal-icon {
        font-size: 0.7rem;
    }

    .hero-deal-tag .deal-text {
        white-space: normal;
        text-align: center;
        font-size: 0.6rem;
    }

    .hero-deal-tag .deal-timer {
        border-left: none;
        padding-left: 0;
        font-size: 0.575rem;
        width: 100%;
        text-align: center;
    }

    /* Mobile companion hero optimization - compact conversion layout */
    .companion-hero {
        padding: var(--space-4) 0 var(--space-3) 0;
        margin-bottom: var(--space-3);
        overflow-x: hidden;
        overflow-y: visible;
        width: 100%;
        max-width: 100vw;
        align-items: stretch;
    }

    .hero-content {
        display: grid;
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 0 var(--space-3);
        text-align: left;
        padding: 0 var(--space-4);
        overflow: visible;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
        margin: 0;
    }

    .companion-logo {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        width: 48px;
        height: 48px;
        margin: 0;
        object-fit: contain;
        background-color: var(--bg-tertiary);
        padding: var(--space-1);
    }

    /* Flatten hero-text so its children become grid items of hero-content */
    .hero-text {
        display: contents;
    }

    .hero-text h1,
    .hero-text h2 {
        grid-column: 2;
        grid-row: 1;
        white-space: normal !important;
        font-size: 1.1rem !important;
        padding: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
        margin-bottom: 2px !important;
    }

    .hero-text .rating {
        grid-column: 2;
        grid-row: 2;
        margin-bottom: 2px !important;
        font-size: 0.8rem;
    }

    /* Pricing hook shown inline under rating */
    .hero-pricing-hook {
        grid-column: 2;
        grid-row: 3;
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 0;
        font-weight: 500;
    }

    .platform-info .platform-btn {
        width: 100%;
        margin: 0;
        padding: var(--space-3) var(--space-6);
        font-size: 0.95rem;
        font-weight: 700;
        justify-content: center;
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    /* CTA button: full width below gallery image */
    .platform-info {
        grid-column: 1 / -1;
        grid-row: 5;
        display: flex;
        width: 100%;
        margin-top: var(--space-2);
    }

    .hero-text .platform-info .platform-btn::after {
        content: ' ↗';
        margin-left: var(--space-1);
    }

    .hero-text .tagline {
        display: none;
    }

    .tagline-mobile-moved {
        display: none !important;
    }

    /* Hero badge (Leader, Popular, etc.) - top right of hero */
    .hero-badge {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        background: var(--accent-blue);
        color: white;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: var(--radius-md);
        white-space: nowrap;
    }

    /* When badge is present, shift rows to accommodate badge */
    .hero-content:has(.hero-badge) .hero-badge { grid-row: 1; }
    .hero-content:has(.hero-badge) .companion-logo { grid-row: 2 / 5; }
    .hero-content:has(.hero-badge) h1,
    .hero-content:has(.hero-badge) h2 { grid-row: 2; }
    .hero-content:has(.hero-badge) .rating { grid-row: 3; }
    .hero-content:has(.hero-badge) .hero-pricing-hook { grid-row: 4; }
    .hero-content:has(.hero-badge) .header-gallery-link { grid-row: 5; }
    .hero-content:has(.hero-badge) .platform-info { grid-row: 6; }
    .hero-content:has(.hero-badge) .hero-best-for { grid-row: 7; }

    /* "Best for" text below CTA button */
    .hero-best-for {
        grid-column: 1 / -1;
        grid-row: 6;
        font-size: 0.8rem;
        color: var(--text-secondary);
        line-height: 1.5;
        padding: var(--space-2) var(--space-3);
        background: rgba(59, 130, 246, 0.08);
        border-radius: var(--radius-md);
        text-align: center;
    }

    .hero-best-for-label {
        font-weight: 600;
        color: var(--accent-blue);
    }

    /* Gallery image: full width below logo/title, above CTA button */
    .header-gallery-link {
        grid-column: 1 / -1;
        grid-row: 4;
        display: block;
        width: 100%;
        margin: var(--space-2) 0 0 0;
        margin-left: 0;
        margin-right: 0;
        min-width: unset;
        max-width: 100%;
        border-radius: var(--radius-lg);
        overflow: hidden;
        position: relative;
    }

    .header-gallery-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: unset;
        border-radius: var(--radius-lg);
        border: none;
        object-fit: cover;
        object-position: center;
    }

    /* Mobile responsive companion cards - compact conversion layout */
    .companions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .companion-card {
        flex-direction: column;
        text-align: left;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    /* Reorder card children for conversion: header → image → CTA → best-for → features → description */
    .companion-card .card-header { order: 1; }
    .companion-card .feature-highlights { order: 2; }
    .companion-card .card-actions { order: 3; }
    .companion-card .best-for-section { order: 4; }
    .companion-card .description { order: 5; }
    .companion-card .holiday-sale-badge { order: 0; }

    /* Card header: horizontal layout (logo left, text right) */
    .companion-card .card-header {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: 0;
    }

    .companion-card .logo {
        width: 48px;
        height: 48px;
        margin: 0;
        object-fit: contain;
        background-color: var(--bg-tertiary);
        padding: var(--space-1);
        flex-shrink: 0;
    }

    .product-logo {
        width: 90px !important;
        height: 90px !important;
        object-fit: contain;
        background-color: var(--bg-tertiary);
        padding: var(--space-2);
    }

    /* Fix for small logo files that might distort */
    img[alt*="Charstar"],
    img[alt*="Muah"],
    img[alt*="Sakura"],
    img[alt*="Nomi"] {
        object-fit: contain !important;
        background-color: white;
        border-radius: var(--radius-md);
    }

    .companion-card .title-section {
        text-align: left;
    }

    .companion-card .title-section h3 {
        font-size: 1.05rem;
        margin-bottom: var(--space-1);
    }

    .companion-card .rating-line {
        font-size: 0.8rem;
    }

    /* CTA buttons: side by side on one row */
    .companion-card .card-actions {
        flex-direction: row;
        gap: var(--space-2);
        width: 100%;
    }

    .companion-card .btn-primary {
        flex: 1;
        text-align: center;
        padding: var(--space-2) var(--space-3);
        font-size: 0.85rem;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    .companion-card .btn-primary::after {
        content: ' ↗';
    }

    .companion-card .btn-secondary {
        flex: 1;
        text-align: center;
        padding: var(--space-2) var(--space-3);
        font-size: 0.8rem;
    }

    /* Best-for: compact 1-liner */
    .companion-card .best-for-section {
        font-size: 0.8rem;
        padding: var(--space-2) var(--space-3);
        margin: 0;
        line-height: 1.4;
    }

    /* Features: compact inline tags, max 2 visible */
    .companion-card .feature-highlights {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
        overflow: hidden;
    }

    .companion-card .feature-highlights.has-preview {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-2);
        overflow: hidden;
    }

    .companion-card .feature-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-2);
        font-size: 0.7rem;
        background: var(--bg-tertiary);
        border-radius: var(--radius-md);
        text-align: left;
        border: 1px solid var(--border-secondary);
        flex-shrink: 0;
    }

    .companion-card .feature-item:nth-child(n+4) {
        display: none;
    }

    .companion-card .feature-highlights.has-preview .feature-item:nth-child(n+4) {
        display: none;
    }

    /* Hide combined benefits block on mobile (best-for section covers this) */
    .companion-card .feature-benefits-combined {
        display: none;
    }

    /* On mobile, show only first preview image, hide 2nd and 3rd */
    .companion-card .feature-preview:nth-of-type(n+2) {
        display: none;
    }

    .companion-card .feature-item .feature-icon {
        font-size: 0.75rem;
        margin: 0;
    }

    .companion-card .feature-item .feature-title {
        font-size: 0.7rem;
        font-weight: 600;
    }

    .companion-card .feature-item .feature-desc {
        display: none;
    }

    /* Preview image: full width, taller */
    .companion-card .feature-preview {
        width: 100%;
        height: 150px;
        flex-basis: 100%;
        border-radius: var(--radius-md);
        order: -1;
    }

    /* Description: hidden on mobile (tagline/best-for already covers it) */
    .companion-card .description {
        display: none;
    }

    .companion-card .product-badge {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        margin-bottom: 0;
        font-size: 0.7rem;
        padding: var(--space-1) var(--space-2);
        z-index: 10;
        line-height: 1;
    }
    
    /* Ensure main layout stacks properly on mobile */
    .main-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .companions-section, .topics-section {
        margin-bottom: var(--space-8);
    }
    
    /* Category grid mobile responsiveness */
    .category-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .companion-product-card {
        padding: var(--space-6);
    }
    
    .product-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .product-highlights.compact {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .product-highlights.compact.has-preview {
        grid-template-columns: 1fr 1fr;
    }

    .product-highlights.compact .highlight-preview {
        grid-column: span 2;
        height: 120px;
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .section-header {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .section-header div {
        flex: 1;
    }

    .section-header p {
        max-width: 280px;
        line-height: 1.4;
    }

    .view-all-link {
        flex-shrink: 0;
        margin-top: var(--space-1);
    }
    
    .companion-card {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }
    
    .topic-card h3 {
        padding-right: 0;
    }
    
    .topic-badge {
        position: static;
        display: inline-block;
        margin-bottom: var(--space-2);
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }

    /* Ensure footer is the last element on mobile */
    footer {
        margin-top: var(--space-12);
        margin-bottom: 0;
        order: 999;
    }
    
    /* Category Pages Mobile */
    .category-stats {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }
    
    .sort-group {
        margin-left: 0;
        justify-content: space-between;
    }
    
    .product-header {
        flex-direction: column;
        text-align: center;
    }
    
    .product-title-section {
        padding-right: 0;
        text-align: center;
    }

    .companion-product-card .product-description {
        text-align: center;
    }

    .companion-product-card .product-tagline {
        text-align: center;
    }

    .companion-product-card .product-pricing {
        text-align: center;
    }

    .companion-product-card .product-content {
        text-align: center;
    }

    .companion-product-card .product-rating {
        justify-content: center;
        text-align: center;
    }

    .category-hero-section {
        padding: var(--space-4) 0 var(--space-3) 0;
        margin-bottom: var(--space-3);
    }

    .category-description {
        margin-bottom: var(--space-3);
    }

    .product-highlights {
        flex-direction: column;
    }
    
    .product-highlights.compact {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-highlights.compact .highlight-preview {
        grid-column: span 2;
        height: 120px;
    }

    .product-actions {
        flex-direction: column;
    }

    .insights-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    /* Contact Page Mobile */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .contact-info {
        order: 2;
    }
    
    .contact-form-section {
        order: 1;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Article Mobile Responsiveness */
    .article-container {
        padding: 20px 15px 30px;
    }

    .article-content {
        padding: 20px;
        border-radius: 0;
    }

    .article-sidebar {
        position: static;
        order: 2;
    }

    .article-header {
        margin-bottom: var(--space-8);
        padding-bottom: var(--space-6);
    }

    .article-header h1 {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: var(--space-4);
    }

    .article-summary {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: var(--space-6);
    }

    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-bottom: var(--space-6);
    }

    .article-meta .article-badge {
        margin-bottom: var(--space-2);
    }

    .breadcrumb {
        font-size: 0.875rem;
        margin-bottom: var(--space-4);
    }

    .article-body {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .article-body h2 {
        font-size: 1.125rem;
        margin-top: var(--space-8);
        margin-bottom: var(--space-4);
        line-height: 1.3;
    }

    .article-body h3 {
        font-size: 1.25rem;
        margin-top: var(--space-6);
        margin-bottom: var(--space-3);
        line-height: 1.3;
    }

    .article-body h4 {
        font-size: 1.125rem;
        margin-top: var(--space-4);
        margin-bottom: var(--space-3);
    }

    .article-body p {
        margin-bottom: var(--space-4);
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .article-body img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: var(--space-4) 0 !important;
        border-radius: var(--radius-md) !important;
    }

    .article-body ul, .article-body ol {
        margin-bottom: var(--space-4);
        padding-left: var(--space-6);
    }

    .article-body li {
        margin-bottom: var(--space-2);
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .article-body blockquote {
        margin: var(--space-6) 0;
        padding: var(--space-2);
        font-size: 1.05rem;
        line-height: 1.7;
    }

    /* Article Components Mobile */
    .custom-toc {
        margin: var(--space-6) 0;
        padding: var(--space-2);
        font-size: 0.9rem;
    }

    .custom-toc li {
        margin-bottom: var(--space-2);
        padding: var(--space-2) 0;
    }

    .custom-toc a {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .highlight-box, .pro-tip, .important-note {
        margin: var(--space-6) 0;
        padding: var(--space-2);
        font-size: 1rem;
        line-height: 1.65;
    }

    .highlight-box h3, .pro-tip h4, .important-note h4 {
        font-size: 1.125rem;
        margin-bottom: var(--space-3);
    }

    .example-box {
        margin: var(--space-6) 0;
        padding: var(--space-2);
        font-size: 0.9rem;
    }

    .example-box h4 {
        font-size: 1rem;
        margin-bottom: var(--space-3);
    }

    .example-box p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .verdict-box {
        margin: var(--space-8) 0;
        padding: var(--space-6);
    }

    .verdict-box h3 {
        font-size: 1.25rem;
        margin-bottom: var(--space-4);
    }

    .comparison-table {
        overflow-x: auto;
        margin: var(--space-6) 0;
    }

    .comparison-table table {
        min-width: 600px;
        font-size: 0.875rem;
    }

    .comparison-table th {
        font-size: 0.875rem;
        padding: var(--space-2);
    }

    .comparison-table td {
        font-size: 0.875rem;
        padding: var(--space-2);
    }

    .faq-item {
        margin-bottom: var(--space-6);
        padding: var(--space-2);
    }

    .faq-item h3 {
        font-size: 1.125rem;
        margin-bottom: var(--space-3);
    }

    .faq-item p {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .article-tags {
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: var(--space-6) 0;
    }

    .tag {
        font-size: 0.875rem;
        padding: var(--space-1) var(--space-3);
    }

    .article-navigation {
        flex-direction: column;
        gap: var(--space-4);
        margin-top: var(--space-8);
    }

    .nav-link {
        text-align: center;
        padding: var(--space-3) var(--space-4);
        font-size: 0.95rem;
    }

    .cta-box {
        margin: var(--space-8) 0;
        padding: var(--space-6);
        text-align: center;
    }

    .cta-box h3 {
        font-size: 1.25rem;
        margin-bottom: var(--space-4);
    }

    .cta-box p {
        font-size: 0.95rem;
        margin-bottom: var(--space-6);
    }

    .cta-button {
        display: block;
        width: 100%;
        margin-bottom: var(--space-3);
        padding: var(--space-2);
        font-size: 0.95rem;
        text-align: center;
    }

    .cta-button.secondary {
        margin-bottom: 0;
    }
}

/* Extra Small Mobile Devices (480px and below) */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    body {
        -webkit-overflow-scrolling: touch;
        padding-top: 84px;
    }

    .container {
        padding: 0 var(--space-3);
    }

    .article-container {
        padding: 20px 10px 20px;
    }

    .article-content {
        padding: 20px 15px;
    }

    .article-header h1 {
        font-size: 1.125rem;
        line-height: 1.2;
    }

    .article-body h2 {
        font-size: 1.25rem;
        margin-top: var(--space-6);
    }

    .article-body h3 {
        font-size: 1.125rem;
        margin-top: var(--space-4);
    }

    .article-body p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .custom-toc {
        padding: var(--space-3);
        font-size: 0.875rem;
    }

    .highlight-box, .pro-tip, .important-note {
        padding: var(--space-3);
        margin: var(--space-4) 0;
    }

    .verdict-box {
        padding: var(--space-2);
        margin: var(--space-6) 0;
    }

    .cta-box {
        padding: var(--space-2);
        margin: var(--space-6) 0;
    }

    .comparison-table table {
        min-width: 500px;
        font-size: 0.8rem;
    }

    .nav-menu li a {
        font-size: 1.25rem;
    }
}

/* User Reviews Section */
.user-reviews {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin: var(--space-8) auto;
    border: 1px solid var(--border-primary);
    max-width: 1200px;
    box-sizing: border-box;
}
@media (max-width: 1248px) {
    .user-reviews {
        margin-left: var(--space-6);
        margin-right: var(--space-6);
    }
}
@media (max-width: 768px) {
    .user-reviews {
        margin-left: var(--space-3);
        margin-right: var(--space-3);
        padding: var(--space-4);
    }
}

.user-reviews .section-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.user-reviews h2 {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
}

.user-reviews p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Reviews Container */
.reviews-container {
    margin-bottom: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.reviews-placeholder {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-primary);
}

/* Recent Reviews Section */
.recent-reviews-section {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-primary);
}

.recent-reviews-section h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: var(--space-6);
    text-align: center;
}

.recent-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Individual Review Items */
.review-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.review-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.reviewer-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.reviewer-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.review-rating {
    font-size: 0.9rem;
}

.review-date {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.review-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.review-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
    font-size: 0.9rem;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.usage-duration {
    color: var(--text-muted);
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-secondary);
}

/* Review Form */
.review-form-container {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--border-primary);
}

.review-form-container h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
    text-align: center;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--space-2);
    font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-sans);
}

.char-counter {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-1);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Checkbox styling */
.checkbox-group {
    flex-direction: row;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: normal;
    margin-bottom: 0;
}

.checkbox-label input[type="checkbox"] {
    margin-right: var(--space-2);
    width: 18px;
    height: 18px;
}

/* Submit button */
.submit-review-btn {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    color: white;
    border: none;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--space-2);
}

.submit-review-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.form-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: var(--space-2);
}

/* Mobile responsiveness for review form */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .review-form-container {
        padding: var(--space-2);
    }
    
    .user-reviews {
        padding: var(--space-2);
    }
}

/* Review Success Page */
.success-section {
    text-align: center;
    padding: var(--space-16) 0;
}

.success-content {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-secondary);
    padding: var(--space-12);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-primary);
}

.success-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.success-content h1 {
    color: var(--accent-green);
    font-size: 2rem;
    margin-bottom: var(--space-4);
}

.success-message {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--space-8);
}

.next-steps {
    text-align: left;
    background: var(--bg-tertiary);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    margin-bottom: var(--space-8);
}

.next-steps h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.next-steps ul {
    list-style: none;
    padding: 0;
}

.next-steps li {
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-left: 0;
}

.actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}

@media (max-width: 768px) {
    .success-content {
        padding: var(--space-8);
    }
    
    .actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Market Guide Specific Styles */
.market-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
}

.stat-item {
    text-align: center;
    padding: var(--space-2);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-secondary);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-blue);
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.takeaway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.takeaway-item {
    padding: var(--space-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
}

.takeaway-item h4 {
    color: var(--accent-green);
    margin-bottom: var(--space-3);
    font-size: 1.1rem;
}

.takeaway-item p {
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .market-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        padding: var(--space-2);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .takeaway-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* Table of Contents Styles */
.table-of-contents {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    padding: var(--space-8);
    margin-bottom: var(--space-12);
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.toc-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-column li {
    margin-bottom: var(--space-3);
}

.toc-column a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    display: block;
    transition: all 0.2s ease;
}

.toc-column a:hover {
    color: var(--accent-blue);
    background: var(--bg-tertiary);
}

/* Market Images */
.market-image {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    margin: var(--space-6) 0;
}

/* Competitive Analysis Styles */
.competitor-tier {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.competitor-tier h4 {
    color: var(--accent-blue);
    margin-bottom: var(--space-4);
}

.market-insight {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    position: relative;
}

.market-insight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Funding and Investment Styles */
.funding-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.funding-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    padding: var(--space-6);
}

.funding-item h4 {
    color: var(--accent-green);
    margin-bottom: var(--space-4);
    font-size: 1.2rem;
}

.acquisition-trends {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.acquirer-type {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
    padding: var(--space-6);
}

.acquirer-type h4 {
    color: var(--accent-orange);
    margin-bottom: var(--space-3);
}

.investor-quote {
    background: var(--bg-tertiary);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    font-style: italic;
}

.investor-quote p {
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
}

.investor-quote cite {
    color: var(--text-muted);
    font-style: normal;
    font-weight: 600;
}

/* Engagement Metrics Styles */
.engagement-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.metric-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    padding: var(--space-6);
}

.metric-item h4 {
    color: var(--accent-purple);
    margin-bottom: var(--space-4);
    font-size: 1.1rem;
}

.metric-item ul {
    list-style: none;
    padding: 0;
}

.metric-item li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-secondary);
    color: var(--text-secondary);
}

.metric-item li:last-child {
    border-bottom: none;
}

/* Platform Highlights */
.emerging-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.platform-highlight {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    padding: var(--space-6);
}

.platform-highlight h4 {
    color: var(--accent-green);
    margin-bottom: var(--space-4);
}

.platform-highlight h4 a {
    color: var(--accent-green);
    text-decoration: none;
}

.platform-highlight h4 a:hover {
    color: var(--accent-blue);
}

/* Segment Analysis */
.segment-analysis {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
    padding: var(--space-6);
    margin: var(--space-6) 0;
}

.segment-analysis h4 {
    color: var(--accent-orange);
    margin-bottom: var(--space-3);
}

@media (max-width: 768px) {
    .toc-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .funding-highlights {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .acquisition-trends {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .engagement-metrics {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .emerging-platforms {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* Mobile font improvements - Sept 18, 2025 */
@media (max-width: 768px) {
    p { font-size: 1.05rem; }
    .article-body p { font-size: 1.05rem; }
    .section-header p { font-size: 0.95rem; }

    /* Mobile section ordering: companions → categories → news */
    main.container {
        display: flex;
        flex-direction: column;
    }

    /* Mobile layout order */
    main.container {
        display: flex;
        flex-direction: column;
    }

    /* Order sections in main container (hero stays at default order: 0 so it always appears first) */
    .category-tags-section { order: 1; }
    .main-layout { order: 2; }

    .main-layout {
        display: flex;
        flex-direction: column;
    }

    /* Remove grid structure, make all children direct flex items */
    .left-column,
    .topics-section {
        display: contents;
    }

    /* Order everything in the main-layout */
    .cotm-award-card { order: 1; }
    .companions-section { order: 2; }
    .categories-overview { order: 3; }

    /* All news items come after */
    .topics-section > *:not(.cotm-award-card) {
        order: 4;
    }

    /* CTA button should be last */
    .topics-cta {
        order: 5 !important;
    }

    /* Companion page: move gallery between quick-facts and overview */
    .category-breadcrumb { order: 1; }
    .companion-hero { order: 2; }
    .score-breakdown { order: 3; }
    .quick-facts { order: 4; }
    .video-review { order: 4; }
    .companion-gallery { order: 5; }
    .overview { order: 6; }
    .pricing { order: 7; }
    .pros-cons { order: 8; }
    .best-for-section { order: 9; }
    .alternatives { order: 10; }
    .comparison-table-section { order: 11; }
    .related-searches-section { order: 12; }
    .verdict { order: 13; }
    .how-to-section { order: 14; }
    .user-reviews { order: 15; }
    .trust-safety-section { order: 16; }
    .related-content { order: 17; }
    .cta-section { order: 18; }
    .faq-section { order: 19; }
    #faq { order: 19; }
    .people-also-ask { order: 20; }
}

@media (max-width: 480px) {
    p { font-size: 1rem; }
    .article-body p { font-size: 1rem; }
    .section-header p { font-size: 0.9rem; }
}

/* Coming Soon Section */
.coming-soon-section {
    padding: var(--space-16) 0;
    background-color: var(--bg-primary);
}

.coming-soon-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border-primary);
    padding: var(--space-12);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.coming-soon-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.coming-soon-card > p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.coming-soon-description p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

.coming-soon-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.coming-soon-actions .btn-secondary {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.coming-soon-actions .btn-secondary:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-accent);
}

.coming-soon-actions .btn-primary {
    background: var(--accent-blue);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.coming-soon-actions .btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .coming-soon-section {
        padding: var(--space-12) 0;
    }

    .coming-soon-card {
        padding: var(--space-8);
        margin: 0 var(--space-4);
    }

    .coming-soon-card h2 {
        font-size: 1.75rem;
    }

    .coming-soon-actions {
        flex-direction: column;
        align-items: center;
    }

    .coming-soon-actions .btn-secondary,
    .coming-soon-actions .btn-primary {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
}

/* A-Z Companions Page Styles */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-20) var(--space-4);
    text-align: center;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-secondary);
    border-top: 3px solid var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-4);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.az-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 1024px) {
    .az-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .az-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .az-grid {
        grid-template-columns: 1fr;
    }
}

.az-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all 0.2s ease;
}

.az-column:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}

.az-column h3 {
    color: var(--accent-blue);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-secondary);
    text-align: center;
}

.az-column ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.az-column li {
    position: relative;
}

.az-column a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.az-column a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    transition: width 0.3s ease;
    z-index: 1;
}

.az-column a:hover:before {
    width: 4px;
}

.az-column a:hover {
    background: var(--bg-surface);
    border-color: var(--border-accent);
    transform: translateX(4px);
    color: var(--text-primary);
}

.az-column a:after {
    content: '→';
    color: var(--text-muted);
    font-size: 1rem;
    transition: all 0.2s ease;
    z-index: 2;
    position: relative;
}

.az-column a:hover:after {
    color: var(--accent-blue);
    transform: translateX(4px);
}

.az-companion-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
    position: relative;
}

.az-companion-logo {
    width: 28px;
    height: 16px;
    min-width: 28px;
    border-radius: 3px;
    object-fit: contain;
    flex-shrink: 0;
}


.no-results {
    text-align: center;
    padding: var(--space-20) var(--space-4);
    color: var(--text-secondary);
}

.no-results-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-results h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.no-results p {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .az-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {

    .az-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-3);
    }

    .az-column {
        padding: var(--space-3);
    }

    .az-column h3 {
        font-size: 1.125rem;
    }

    /* Pricing grid mobile spacing */
    .pricing-grid {
        gap: var(--space-6);
    }

    /* Benefits section centered and narrower on mobile */
    .intro-highlights {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Image Gallery title left-aligned on mobile */
    section.companion-gallery h2 {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .az-column a {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
    }
}

/* Category Dynamic Styles */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.loading-row {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
}

.loading-row .loading-spinner {
    margin: 0 auto var(--space-4) auto;
    width: 24px;
    height: 24px;
    border-width: 2px;
}

/* Icon System */
.icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm {
    width: 1em;
    height: 1em;
}

.icon-xs {
    width: 0.75em;
    height: 0.75em;
}

.icon-md {
    width: 1.5em;
    height: 1.5em;
}

.icon-lg {
    width: 2em;
    height: 2em;
}

.icon-xl {
    width: 2.5em;
    height: 2.5em;
}

/* Category icon colors */
.category-icon .icon {
    color: var(--accent-blue);
    width: 1.5em;
    height: 1.5em;
}

.feature-icon .icon {
    color: var(--accent-blue);
    width: 1.25em;
    height: 1.25em;
}

.product-badge .icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.product-badge.cotm-badge .icon {
    width: 1.8em;
    height: 1.8em;
}

/* =============================================================================
   LANGUAGE SWITCHER
   ============================================================================= */

.language-switcher {
    position: relative;
    display: inline-block;
    margin-left: 0.75rem;
    z-index: 1001;
}

.lang-current {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.lang-current:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    min-width: 60px;
    z-index: 1000000;
    overflow: hidden;
}

.lang-option {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-secondary);
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-option:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.lang-option.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    font-weight: 600;
}

/* Show language switcher */
.language-switcher {
    display: inline-block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .language-switcher {
        display: inline-block !important;
        order: 2 !important;
        margin-left: auto !important;
    }

    header,
    header nav,
    header nav.container {
        overflow: visible !important;
    }

    .lang-current {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
        min-width: auto;
        z-index: 10000000 !important;
        position: relative !important;
    }

    .hamburger {
        order: 3;
        margin-left: var(--space-3);
        z-index: 9999999 !important;
    }

    .lang-dropdown {
        right: 0 !important;
        left: auto !important;
        min-width: 50px !important;
        z-index: 10000001 !important;
        position: absolute !important;
        top: calc(100% + 4px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .lang-dropdown[style*="display: none"] {
        display: none !important;
    }

    .lang-option {
        display: block !important;
        padding: var(--space-2) var(--space-3) !important;
        font-size: 1rem;
        text-align: center;
    }
}

/* Last Updated Section */
.last-updated {
    text-align: center;
    padding: var(--space-3) 0;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    border-top: 1px solid var(--border-primary);
}

.last-updated p {
    color: var(--text-dim);
    font-size: 0.875rem;
    margin: 0;
    text-align: center;
}

.last-updated #last-updated-date {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Force Netlify Deploy Sun Sep 29 12:40:00 CEST 2025 */

/* Advertisement Card Styles */
.advertisement-card {
    border: 1px solid var(--border-primary);
}

.advertisement-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.advertisement-card .spotlight-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.advertisement-card .card-actions {
    margin-top: var(--space-3);
}

.advertisement-card .ad-video-container {
    width: 100%;
    aspect-ratio: 950 / 250;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    background-color: var(--bg-tertiary);
    position: relative;
}

.advertisement-card .ad-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.advertisement-card .ad-video-container {
    display: block;
    cursor: pointer;
}

/* Mobile optimization for ad video */
@media (max-width: 768px) {
    .advertisement-card .ad-video-container {
        aspect-ratio: 950 / 250;
        height: auto;
    }

    .advertisement-card .ad-video {
        object-fit: contain;
    }
}

/* Category Extra Content Section (between comparison table and FAQ) */
.category-extra-content {
    margin: var(--space-16) 0;
    padding: var(--space-8);
    background-color: var(--bg-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-secondary);
}

.category-extra-content h2 {
    margin-bottom: var(--space-6);
    color: var(--text-primary);
    font-size: 1.5rem;
}

.category-extra-content .extra-content-body p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.category-extra-content .extra-content-body p:last-child {
    margin-bottom: 0;
}

.category-extra-content .extra-content-body a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
}

.category-extra-content .extra-content-body a:hover {
    text-decoration-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .category-extra-content {
        padding: var(--space-6);
        margin: var(--space-10) 0;
    }

    .category-extra-content h2 {
        font-size: 1.25rem;
    }
}

/* ===== TABLET RESPONSIVE (769px – 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Category directory: 2 columns instead of hiding entirely */
    .category-directory-section {
        display: block;
    }
    .category-tags-mobile {
        display: none;
    }
    .category-directory {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature highlights: 2 columns instead of 3 */
    .companion-card .feature-highlights,
    .companion-card .feature-highlights.has-preview {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Companion card logo: slightly smaller */
    .companion-card .logo {
        width: 110px;
        height: 80px;
    }

    /* Comparison table: smaller font and padding for fit */
    .comparison-table {
        font-size: 0.8125rem;
    }
    .comparison-table th,
    .comparison-table td {
        padding: var(--space-2) var(--space-3);
    }

    /* Footer: 3 columns instead of 5 */
    .footer-content-top,
    .footer-content-seo {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-content-top > .footer-section:nth-child(4n+6),
    .footer-content-seo > .footer-section:nth-child(4n+1) {
        grid-column-start: auto;
    }

    /* Related articles grid: 2 columns */
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Best-for grid: 2 columns */
    .best-for-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Video Review Section (lazy-loaded YouTube facade) */
.video-review {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
    text-align: center;
}
.video-review h2 {
    margin-bottom: 1.5rem;
}
.video-facade {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.video-facade:hover {
    transform: translateY(-2px);
}
.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-facade .video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.video-facade:hover .video-play-btn {
    filter: brightness(1.15);
}
.video-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Compact 18+ Age Restriction Banner */
.age-restriction-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(238, 90, 36, 0.08);
    border: 1px solid rgba(238, 90, 36, 0.3);
    border-radius: 8px;
    padding: 0.65rem 1.1rem;
    margin: 1.25rem auto;
    font-size: 0.9rem;
    color: #f5a78a;
}
.age-restriction-banner .age-badge {
    background: #ee5a24;
    color: white;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}


/* ============================================================
   Category hero (split) + below-hero layout (links | grid)
   Test layout on /categories/adult-image-generation-companions
   ============================================================ */

/* Hero: full-width title/description on top, then #1 | #2 | review */
.category-hero-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-6) var(--space-6);
}

/* Title + description: top row, spanning the two left columns */
.category-hero-split .category-hero-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.category-hero-split .category-hero-main .category-description {
    max-width: 900px;
    margin-bottom: 0;
    /* Show ~3 lines, fade out the rest, but allow scrolling to read more */
     /* 3 lines at line-height 1.6 */
    overflow-y: auto;
    scrollbar-width: none;
    
    
 max-height: 11em; overflow-y: auto;}
/* De datums staan in de HTML nu direct onder de byline (zodat ze op mobiel
   met de auteur meelopen). Op desktop horen ze onder de omschrijving. */
.category-hero-split .category-hero-main .category-description { order: 1; }
.category-hero-split .category-hero-main .review-dates { order: 2; }
.category-hero-split .category-hero-main .category-description::-webkit-scrollbar {
    display: none;
}
/* Smaller title so it stays on one line */
.category-hero-split .category-hero-main h1 {
    font-size: clamp(1.3rem, 2vw, 1.85rem);
    line-height: 1.2;
}

/* Review: right column, spanning both rows and stretching down to the
   bottom of the #1/#2 cards */
.category-hero-split .category-hero-review {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: stretch;
}

/* #1 and #2 picks, shown as cards (columns 1 and 2) */
.category-hero-pick {
    min-width: 0;
    display: flex;
}
.category-hero-pick .companion-card {
    width: 100%;
    margin: 0;
}

/* Right column: first-person review card */
.category-hero-review {
    min-width: 0;
    display: flex;
}

.category-review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.category-review-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.category-review-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary);
}

.category-review-byline {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.category-review-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.category-review-author a {
    color: inherit;
    text-decoration: none;
}
.category-review-author a:hover {
    text-decoration: underline;
}

.category-review-role {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.category-review-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.category-review-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--space-5);
    padding-right: var(--space-2);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.category-review-scroll p {
    margin: 0 0 var(--space-3);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.category-review-scroll p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    /* Flat stack on mobile: no boxed hero, so #1/#2 line up with the grid cards */
    .category-hero-section.category-hero-split {
        grid-template-columns: 1fr;
        background: transparent;
        border-radius: 0;
        padding: var(--space-2) 0 var(--space-4);
        margin-bottom: var(--space-4);
    }
    /* Stack order: titel -> why I rank -> chat -> #1 -> #2.
       De chat heeft van zichzelf order 0 en kwam daardoor boven de h1. */
    .category-hero-split .category-hero-main {
        grid-column: auto;
        grid-row: auto;
        order: 1;
    }
    .category-hero-split .category-hero-review {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        order: 2;
    }
    .category-hero-split .category-hero-chat {
        grid-column: auto;
        grid-row: auto;
        order: 3;
    }
    .category-hero-pick {
        order: 4;
    }
    /* Twee regels omschrijving, gewoon afgekapt. Geen zijwaartse scroll,
       geen scheidingslijnen: die vielen op mobiel midden in de tekst. */
    .category-hero-split .category-hero-main .category-description {
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: none;
        border-top: none;
        border-bottom: none;
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Byline en datums lopen door als een regel tekst, zodat een tweede regel
       gewoon links begint in plaats van in te springen onder 'Published'. */
    .category-hero-split .category-hero-main {
        display: block;
    }
    .category-hero-split .category-hero-main .hero-mega-byline {
        display: inline;
        border-bottom: none;   /* streepje links van de datumregel */
        padding-bottom: 0;
        margin: 0;
        line-height: 1.1;
    }
    .category-hero-split .category-hero-main h1 {
        margin-bottom: var(--space-1);
    }
    .category-hero-split .category-hero-main .review-dates {
        display: inline;
        margin: 0;
        padding-top: 0;
        border-top: none;
        line-height: 1.1;
    }
    .category-hero-split .category-hero-main .review-dates::before {
        content: '\00a0\00b7\00a0';
    }
    .category-hero-split .category-hero-main .category-description {
        margin-top: var(--space-3);
    }
    /* Review: ~3 regels, dan scrollen achter de fade */
    .category-review-scroll {
        flex: none;
        max-height: 66px;
    }
}

/* ---- Below the hero: category links list (left) + grid (right) ---- */
.category-side-links {
    width: 260px;
    flex-shrink: 0;
}
.category-side-links .hero-mega-categories {
    position: sticky;
    top: 80px;
    width: 100%;
}
/* Content-sized scrollable list (reuses .hero-mega-categories visuals) */
.category-side-links .hero-mega-categories-list {
    flex: 0 1 auto;
    max-height: calc(100vh - 160px);
    /* No bottom fade on the category links list */
    mask-image: none;
    -webkit-mask-image: none;
}

/* ---- Companion grid: 2 per row, compact cards ---- */
.category-layout .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Compact card styling shared by the grid cards and the #1 header pick card */
.category-grid .companion-card,
.category-hero-pick .companion-card {
    padding: var(--space-4);
}

/* Bigger, clearly visible logo */
.category-grid .companion-card .logo,
.category-hero-pick .companion-card .logo {
    width: auto;
    height: 60px;
    max-width: 120px;
    padding: var(--space-2);
}

/* Keep 2 preview images, drop the 4-benefits block */
.category-grid .companion-card .feature-highlights.has-preview,
.category-hero-pick .companion-card .feature-highlights.has-preview {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.category-grid .companion-card .feature-benefits-combined,
.category-hero-pick .companion-card .feature-benefits-combined {
    display: none;
}
.category-grid .companion-card .feature-preview img,
.category-hero-pick .companion-card .feature-preview img {
    height: 92px;
}
/* Tighten vertical spacing: images sit close to the "Best for" block */
.category-grid .companion-card .feature-highlights,
.category-hero-pick .companion-card .feature-highlights {
    margin-bottom: var(--space-2);
}
/* Clamp "Best for" to 2 lines so every card is the same height */
.category-grid .companion-card .best-for-section {
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tighter copy */
.category-grid .companion-card .description,
.category-hero-pick .companion-card .description {
    font-size: 0.85rem; line-height: 1.5;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Header pick card: hide description + "Best for" (saves vertical space) and
   keep the product badge fully visible (never clipped) */
.category-hero-pick .companion-card .description { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; line-height: 1.5; }
.category-hero-pick .companion-card .best-for-section { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.category-hero-pick .companion-card {
    overflow: visible;
}
.category-hero-pick .companion-card .product-badge {
    white-space: nowrap;
}

/* Action buttons: pushed to the bottom (aligned across equal-height cards),
   compact height, and stretched to fill the full card width */
.category-grid .companion-card .card-actions,
.category-hero-pick .companion-card .card-actions {
    gap: var(--space-2);
    margin-top: auto;
}
.category-grid .companion-card .card-actions a,
.category-hero-pick .companion-card .card-actions a {
    flex: 1 1 0;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    font-size: 0.8rem;
}

/* Smaller rating line + review count in category cards */
.category-grid .companion-card .rating-line,
.category-hero-pick .companion-card .rating-line {
    gap: var(--space-1);
}
.category-grid .companion-card .stars,
.category-hero-pick .companion-card .stars,
.category-grid .companion-card .rating-score,
.category-hero-pick .companion-card .rating-score,
.category-grid .companion-card .review-count,
.category-hero-pick .companion-card .review-count {
    font-size: 0.72rem;
}

/* Lift the product badge so it straddles the top edge of the card,
   and keep it compact so it never gets clipped on narrow columns */
.category-grid .companion-card .product-badge,
.category-hero-pick .companion-card .product-badge {
    top: -11px;
    font-size: 0.68rem;
    padding: 3px var(--space-2);
}

/* Less space between the title and the description */
.category-hero-split .category-hero-main h1 {
    margin-bottom: var(--space-2);
}

@media (max-width: 1100px) {
    /* Categories list moves below the companion grid */
    .category-layout {
        display: flex;
        flex-direction: column;
    }
    .category-layout .category-grid {
        order: 1;
    }
    .category-side-links {
        order: 2;
        width: 100%;
        margin-top: var(--space-6);
        margin-bottom: 0;
    }
    .category-side-links .hero-mega-categories {
        position: static;
    }
    .category-side-links .hero-mega-categories-list {
        max-height: 240px;
    }
}

@media (max-width: 600px) {
    .category-layout .category-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Mobile-only overrides for category cards (placed last so they
   win over the desktop rules above). Desktop is untouched.
   ============================================================ */
@media (max-width: 900px) {
    /* Show "Best for" (above the buttons) on #1/#2 header cards too */
    .category-hero-pick .companion-card .best-for-section {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 0;
    }
    /* Hide the description in the grid cards on mobile */
    .category-grid .companion-card .description {
        display: none;
    }
    /* Keep the breadcrumb above the title (a global mobile rule pushes it down) */
    .category-hero-main .category-breadcrumb {
        order: -1;
    }

    /* Clean 2-up preview images: no grey padding box above/below the image */
    .category-hero-pick .companion-card .feature-highlights.has-preview,
    .category-grid .companion-card .feature-highlights.has-preview {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        overflow: visible;
    }
    .category-hero-pick .companion-card .feature-preview,
    .category-grid .companion-card .feature-preview {
        display: block; /* keep BOTH images (a global mobile rule hides the 2nd) */
        height: 92px;
        padding: 0;
        background: transparent;
        border: none;
    }
    .category-hero-pick .companion-card .feature-preview img,
    .category-grid .companion-card .feature-preview img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /* A bit more space between cards #1 and #2 */
    .category-hero-pick + .category-hero-pick {
        margin-top: var(--space-3);
    }
    /* Slightly more space between the grid cards too */
    .category-layout .category-grid {
        gap: var(--space-4);
    }
}

/* ===== Homepage above-the-fold directory (dense ranked link columns) ===== */
/* Compact hero on homepage only (reclaims vertical space above the directory) */
.hero-home { padding: var(--space-3) 0 var(--space-2) 0; }
.hero-home h1 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom: var(--space-1); }
.hero-home p { font-size: 0.9rem; margin-bottom: 0; }

.home-directory {
    display: grid;
    /* Fixed 4 columns so the 8 category cards form two even rows of 4.
       minmax(0,1fr) lets columns shrink (never overflows). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-8) 0;
}
@media (max-width: 900px) { .home-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-directory .directory-col {
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.home-directory .directory-col h2 {
    font-size: 0.9rem;
    margin: 0 0 var(--space-2) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-secondary);
}
.home-directory .directory-col h2 a {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-directory .directory-col h2 a:hover { color: var(--accent-primary); }

/* List: show ~8 rows, fade + scroll for the rest */
.home-directory .dir-list-wrap { position: relative; }
.home-directory .ranking-list {
    max-height: 248px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.home-directory .dir-list-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;  /* small fade hint; keeps "See all" close to the list */
    background: linear-gradient(to top, var(--bg-surface) 18%, transparent);
    pointer-events: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* One-line rows */
.home-directory .ranking-list li {
    gap: 5px;
    padding: 4px 2px;
    cursor: default;
    flex-wrap: nowrap;
    font-size: 0.8rem;
}
.home-directory .ranking-list li::before { min-width: 13px; font-size: 0.7rem; }
.home-directory .ranking-list li img { width: 24px; height: 16px; }
.home-directory .ranking-list li img.dir-fav { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; background: #fff; }
.home-directory .ranking-list li .dir-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-directory .ranking-list li .dir-name::after { content: none; }
.home-directory .ranking-list li .rating-score {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-primary);
}
/* favicon links out to the companion's site (outbound) */
.home-directory .ranking-list li .dir-fav-link { flex-shrink: 0; display: inline-flex; line-height: 0; text-decoration: none; }
/* de generieke .ranking-list pijl lekte als een vaag streepje op het logo */
.home-directory .ranking-list li .dir-fav-link::after { content: none; }
/* magnifier -> companion review page (internal), left of the arrow */
.home-directory .ranking-list li .dir-review { flex-shrink: 0; display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.home-directory .ranking-list li .dir-review:hover { opacity: 0.75; }
/* kill the generic .ranking-list li a::after arrow leaking onto the magnifier */
.home-directory .ranking-list li .dir-review::after { content: none; }
.home-directory .ranking-list li .dir-review-ic { width: 14px; height: 14px; display: block; }
/* "Visit" is now just the outbound arrow */
.home-directory .ranking-list li .dir-visit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}
.home-directory .ranking-list li .dir-visit::after { content: '↗'; font-size: 1.1rem; opacity: 1; }
.home-directory .ranking-list li .dir-visit:hover { opacity: 0.75; }
.home-directory .directory-more {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--border-secondary);
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--accent-blue);
    text-decoration: none;
}
.home-directory .directory-more:hover { text-decoration: underline; }
@media (max-width: 600px) { .home-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Smaller buttons on homepage featured companion cards (scoped, not global) */
.companions-section .companion-card .card-actions { gap: var(--space-3); }
.companions-section .companion-card .card-actions .btn-primary,
.companions-section .companion-card .card-actions .btn-secondary {
    padding: var(--space-2) var(--space-4);
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
}
.companions-section .companion-card .card-actions .btn-secondary { border-width: 1px; }

/* Category quick-nav: single row on desktop (scroll if overflow), wrap on mobile.
   Rating pills (.companion-tags) wrap to ~2 rows instead. */
@media (min-width: 1024px) {
    .category-tags {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Pills: allow wrapping to 2 rows and start from the left so #1 is never clipped */
    .companion-tags {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        overflow-x: visible;
        max-width: 100%;
    }
}

/* Directory column header icon */
.home-directory .directory-col h2 a {
    display: flex;
    align-items: center;
    gap: 6px;
}
.home-directory .directory-col h2 .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--accent-primary);
}

/* ===== Hero with flanking ad placements (COTM left · title center · Spotlight right) ===== */
.hero-flank {
    display: flex;
    align-items: stretch;
    gap: 16px;
    text-align: left;
    background: transparent;
    padding: var(--space-3) 0;
}
.hero-flank .hero-flank-card {
    flex: 0 0 320px;
    margin: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-flank .hero-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding-top: var(--space-2);
}
.hero-flank .hero-center h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2.3vw, 1.85rem);
    line-height: 1.2;
}
@media (min-width: 1024px) {
    /* allow wrap so longer-language titles (es/de/nl) don't overflow into the flank cards */
    .hero-flank .hero-center h1 { white-space: normal; text-wrap: balance; }
}
.hero-desc p { margin: 0; }

/* Compact card internals in the flank columns */
/* Desktop only (mobile uses the absolute gold badge); keep the title inside the
   320px ad card in every language (longest is EN/NL/DE/PT "Companion of the Month"). */
@media (min-width: 769px) {
    .hero-flank-card .cotm-title {
        font-size: 0.72rem;
        margin-bottom: var(--space-2);
        max-width: 100%;
        line-height: 1.2;
        overflow-wrap: break-word;
        text-wrap: balance;
    }
    .hero-flank-card .cotm-title .icon { width: 1.05em; height: 1.05em; }
}
.hero-flank-card .cotm-companion-logo { height: 46px; max-width: 96px; }
.hero-flank-card .cotm-buttons { gap: 6px; }
.hero-flank-card .cotm-website-button,
.hero-flank-card .cotm-review-button {
    font-size: 0.72rem;
    padding: 5px 10px;
}
/* Spotlight card: same design, purple accent tag + small name under rating */
.spotlight-card .spotlight-tag {
    position: absolute; top: 8px; right: 8px;
    background: var(--accent-purple, #8b5cf6); color: #fff;
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 4px; display: block;
}
.spotlight-card .spotlight-name a { color: var(--text-secondary, #9ca3af); text-decoration: none; font-size: 0.72rem; }
.spotlight-card .spotlight-name a:hover { color: var(--accent-blue, #3b82f6); }

@media (max-width: 900px) {
    .hero-flank { flex-wrap: wrap; }
    .hero-flank .hero-center { order: -1; flex: 1 1 100%; }
    .hero-flank .hero-flank-card { flex: 1 1 100%; }
}

/* ===== Static flank ad-placement cards (promo-* classes; no JS overrides) ===== */
.hero-flank-card .promo-logo {
    height: 60px;
    max-width: 130px;
    object-fit: contain;
    border-radius: 8px;
}
.hero-flank-card .promo-stars { color: #fbbf24; font-size: 0.85rem; }
.hero-flank-card .promo-rating { color: var(--accent-blue); font-weight: 700; }
.hero-flank-card .cotm-buttons { display: flex; gap: 6px; }
.hero-flank-card .promo-btn-primary,
.hero-flank-card .promo-btn-secondary {
    flex: 1 1 auto;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.hero-flank-card .promo-btn-primary { background: var(--accent-blue); color: #fff; border: none; }
.hero-flank-card .promo-btn-primary:hover { filter: brightness(1.1); }
.hero-flank-card .promo-btn-primary::after { content: ' ↗'; opacity: 0.9; }
.hero-flank-card .promo-btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.25); }
.hero-flank-card .promo-btn-secondary:hover { border-color: var(--accent-blue); }
.spotlight-card .promo-tag.spotlight-tag {
    position: absolute; top: 8px; right: 8px;
    background: var(--accent-purple, #8b5cf6); color: #fff;
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 7px; border-radius: 4px;
}

/* Ad-placement card header: logo left · name above stars+rating */
.hero-flank-card .cotm-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.hero-flank-card .promo-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    min-width: 0;
}
.hero-flank-card .promo-name a {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    white-space: nowrap;
}
.hero-flank-card .promo-name a:hover { color: var(--accent-blue); }
.hero-flank-card .promo-rating-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.hero-flank-card .promo-rating-line .promo-stars { font-size: 0.85rem; }
.hero-flank-card .promo-rating-line .promo-rating { color: var(--text-secondary); font-weight: 700; font-size: 0.88rem; }
.hero-flank-card .promo-rating-line .promo-reviews { color: var(--text-tertiary); font-size: 0.78rem; }
/* Make better use of card width: spread logo + meta, bigger gap */
.hero-flank-card .cotm-header-row { gap: 14px; padding: 4px 0; }
.hero-flank-card .promo-meta { gap: 4px; }
/* Narrower description so the flank cards can be wider */
.hero-flank .hero-desc { max-width: 400px; margin: 0 auto; }

/* Category quick-nav buttons: match the dark outlined pill design (homepage) */
.category-tags-section .category-tag {
    background-color: #0a0a0a;
    border: 1px solid var(--accent-blue);
    color: #fff;
    font-size: 0.66rem;
}
.category-tags-section .category-tag:hover {
    background-color: var(--accent-blue);
    color: #fff;
}

/* Mobile Spotlight placement (static HTML; shown under categories on mobile only) */
.spotlight-mobile { display: none; }
@media (max-width: 900px) {
    .spotlight-mobile { display: block; margin: var(--space-3) 0 var(--space-2); }
    .spotlight-mobile .hero-flank-card { flex: 1 1 100%; }
    .hero-flank .spotlight-card { display: none; } /* hide hero Spotlight on mobile */
}

/* Hero top-3 thumbnails (under the description) */
.hero-thumbs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.hero-thumb {
    position: relative;
    display: block;
    width: 92px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-secondary);
    flex: 0 0 auto;
}
.hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.hero-thumb:hover img { transform: scale(1.06); }
.hero-thumb-rank {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px 1px 3px;
    border-radius: 4px;
    z-index: 1;
}
.hero-thumb-rank .ht-fav {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    object-fit: cover;
    background: #fff;
    flex: 0 0 auto;
}

/* ===== Mobile: tighten above-the-fold vertical spacing ===== */
@media (max-width: 900px) {
    .hero-flank { padding-top: 2px; padding-bottom: 0; gap: 8px; }
    .hero-flank .hero-center { padding-top: 0; }
    .hero-flank .hero-center h1 { margin-bottom: 2px; }
    .category-tags-section { margin: var(--space-2) 0; }
    .category-tags-below { margin: var(--space-1) 0 var(--space-2); }
    .home-directory { margin: var(--space-2) 0; }
    .spotlight-mobile { margin: var(--space-2) 0 !important; }
    .main-layout { margin: var(--space-3) 0; }
    /* Keep all 4 hero thumbnails on one row (was wrapping 3 + 1 on phones) */
    .hero-thumbs { flex-wrap: nowrap; gap: 6px; }
    .hero-thumb { width: auto; height: auto; flex: 1 1 0; max-width: 92px; aspect-ratio: 92 / 54; }
}

/* ===== Anti-FOUC for i18n: hide translatable copy until i18n.js has applied the
   correct language, so pages no longer flash the English data-i18n fallback then
   swap (e.g. on /es/). Revealed by adding .i18n-ready to <html> (see js/i18n.js,
   which also has a 3s failsafe so copy is never stuck hidden).
   Scoped to non-English pages only: English data-i18n fallback IS the final copy,
   so it must never be hidden (some English pages, e.g. /companions and /news, do not
   load i18n.js and would otherwise stay permanently hidden). ===== */
html:not([lang="en"]):not(.i18n-ready) [data-i18n]:not([data-i18n-skip]) { visibility: hidden; }

/* ===== Homepage featured grid (2-per-row): match the clean /categories/ card look —
   drop the benefits list and tighten height. Scoped so category pages are unaffected. ===== */
#featured-companions-container .feature-benefits-combined { display: none; }
#featured-companions-container .companion-card { padding: var(--space-4); }
#featured-companions-container .companion-card .description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-3);
}
#featured-companions-container .feature-highlights { margin: var(--space-2) 0; }

/* Homepage featured grid: single preview image + compact header (rating was overflowing the card border) */
#featured-companions-container .feature-highlights { grid-template-columns: 1fr; }
#featured-companions-container .feature-highlights .feature-preview ~ .feature-preview { display: none; }
#featured-companions-container .feature-preview img { height: 120px; }
#featured-companions-container .companion-card .card-header { gap: var(--space-3); align-items: flex-start; }
#featured-companions-container .companion-card .logo-link .logo { width: 52px; height: 52px; object-fit: contain; }
#featured-companions-container .companion-card .title-section { min-width: 0; flex: 1 1 auto; }
#featured-companions-container .companion-card .title-section h3 { font-size: 1rem; margin-bottom: 2px; }
#featured-companions-container .companion-card .rating-line { flex-wrap: wrap; gap: 2px 6px; font-size: 0.9rem; }
#featured-companions-container .companion-card .review-count { font-size: 0.75rem; }

/* Featured grid card polish: tighter image->Best-for gap; nudge top badges up a touch */
#featured-companions-container .feature-highlights { margin: var(--space-2) 0 var(--space-1); }
#featured-companions-container .companion-card .best-for-section { margin-top: 0; }
#featured-companions-container .companion-card .description { margin-bottom: var(--space-2); }
#featured-companions-container .companion-card .product-badge { top: 10px; }
#featured-companions-container .companion-card .holiday-sale-badge { top: -10px; }

/* Anti-flicker: companions.js re-renders the featured grid at runtime (adds gallery).
   Hide cards until that render adds .cards-rendered, then fade in. 3s animation failsafe
   so cards are never stuck hidden if the script stalls. */
#featured-companions-container:not(.cards-rendered) .companion-card { opacity: 0; }
#featured-companions-container.cards-rendered .companion-card { opacity: 1; transition: opacity 0.25s ease; }
#featured-companions-container .companion-card { animation: featuredCardReveal 0s linear 3s forwards; }
@keyframes featuredCardReveal { to { opacity: 1; } }

/* Spotlight/advertisement card → full-width landscape banner spanning both columns
   (sits between two rows of the 2-per-row featured grid). Video left, info/buttons right. */
#featured-companions-container .advertisement-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
        "video header"
        "video pricing"
        "video actions";
    align-content: center;
    column-gap: var(--space-6);
    row-gap: var(--space-2);
}
#featured-companions-container .advertisement-card .category-ad-video-wrapper {
    grid-area: video;
    align-self: center;
    margin: 0;
    aspect-ratio: 16 / 9;
    max-height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
#featured-companions-container .advertisement-card .category-ad-video { width: 100%; height: 100%; object-fit: cover; }
#featured-companions-container .advertisement-card .card-header { grid-area: header; margin: 0; align-self: end; }
#featured-companions-container .advertisement-card .pricing-section { grid-area: pricing; margin: 0; }
#featured-companions-container .advertisement-card .card-actions { grid-area: actions; margin: 0; align-self: start; }
@media (max-width: 768px) {
    /* stack back to portrait on mobile */
    #featured-companions-container .advertisement-card {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "video" "pricing" "actions";
    }
    #featured-companions-container .advertisement-card .category-ad-video-wrapper { max-height: none; }
}

/* Mobile COTM card — clean redesign: badge on its own line at top, then logo + name/rating,
   then two equal buttons. Vertical stack with generous spacing, inside the card border.
   Uses :is(.hero-flank, .spotlight-mobile) .hero-flank-card (0,3,0) to override the earlier badge/header overrides. */
@media (max-width: 768px) {
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card.cotm-award-card { padding: 0.9rem 1rem; }
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-award-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        padding-top: 0;
    }
    /* Badge: pill in the top-right corner of the card (out of flow → no extra space above) */
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-title {
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        line-height: 1;
        padding: 4px 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
        white-space: nowrap;
        z-index: 2;
    }
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-title .icon { width: 12px; height: 12px; color: #fff; }
    /* Logo + name/rating row (sits to the left of the corner badge) */
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-header-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.85rem;
        padding: 0;
        margin: 0;
    }
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-companion-logo,
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .promo-logo { height: 56px; max-width: 56px; }
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .promo-meta { text-align: left; }
    /* Two equal buttons, full width */
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-buttons {
        display: flex;
        flex-direction: row;
        gap: 0.6rem;
        width: 100%;
        margin: 0;
    }
    :is(.hero-flank, .spotlight-mobile) .hero-flank-card .cotm-buttons a {
        flex: 1 1 0;
        font-size: 0.72rem;
        padding: 6px 12px;
        text-align: center;
        white-space: nowrap;
    }
}

/* Featured grid: 1 card per row on mobile/tablet (matches /categories/ layout; the
   2-per-row was forcing narrow, too-tall cards). Overrides `main .companions-grid`. */
@media (max-width: 900px) {
    main .companions-grid,
    .companions-grid { grid-template-columns: 1fr; }
}

/* Featured card: tighter spacing around the preview image and the description */
#featured-companions-container .feature-highlights { margin: 8px 0; }
#featured-companions-container .companion-card .description { margin: 6px 0 0; }
#featured-companions-container .companion-card { padding-bottom: var(--space-3); }

/* Featured card: even tighter vertical rhythm */
#featured-companions-container .feature-highlights { margin: 4px 0; }
#featured-companions-container .feature-preview img { height: 104px; }
#featured-companions-container .companion-card .card-actions { margin: 6px 0; }
#featured-companions-container .companion-card .best-for-section { margin: 0; padding: 7px 10px; }
#featured-companions-container .companion-card .description { margin: 6px 0 0; }
#featured-companions-container .companion-card .card-header { margin-bottom: 4px; }

/* ===== Featured card: more compact + mobile tweaks (batch) ===== */
/* Tighter vertical rhythm (ID specificity wins over base .companion-card rules) */
#featured-companions-container .companion-card { padding: var(--space-3); }
#featured-companions-container .companion-card .card-header { margin-bottom: 4px; }
#featured-companions-container .feature-highlights { margin: 4px 0 !important; }
#featured-companions-container .feature-preview img { height: 92px; }
#featured-companions-container .companion-card .card-actions { margin: 6px 0 0; }
#featured-companions-container .companion-card .best-for-section { margin: 6px 0 0; padding: 7px 10px; }
#featured-companions-container .companion-card .description { margin: 6px 0 0; }

@media (max-width: 768px) {
    /* Drop the description on mobile cards */
    #featured-companions-container .companion-card .description { display: none; }
    /* Cut the gap between the spotlight card and the pills row */
    .spotlight-mobile { margin: var(--space-2) 0 var(--space-1) !important; }
    .category-tags-below { margin: 4px 0 var(--space-2) !important; }
}

/* Desktop spotlight ad: give the info column room so the corner badge doesn't crowd it */
@media (min-width: 769px) {
    #featured-companions-container .advertisement-card { row-gap: 6px; column-gap: var(--space-5); }
    #featured-companions-container .advertisement-card .card-header { margin: 0; padding-top: 22px; }
}

/* Mobile featured card: the flex-column `gap` (var(--space-3)) was the real source of
   the large uniform spacing between header/image/buttons/best-for. Tighten it. */
@media (max-width: 900px) {
    #featured-companions-container .companion-card { gap: 6px; padding: var(--space-3); }
    #featured-companions-container .companion-card .card-header { margin-bottom: 0; }
    #featured-companions-container .feature-highlights { margin: 0 !important; }
    #featured-companions-container .companion-card .card-actions,
    #featured-companions-container .companion-card .best-for-section { margin: 0; }
}

/* Spotlight ad video: show the whole video (was cropped by object-fit: cover) */
#featured-companions-container .advertisement-card .category-ad-video {
    object-fit: contain;
    background: #000;
}
#featured-companions-container .advertisement-card .category-ad-video-wrapper {
    aspect-ratio: auto;
    max-height: none;
    background: #000;
}

/* Desktop spotlight ad → stacked & left-aligned: logo+rating on top, then the whole
   video (contain), then the buttons at the bottom-left. Overrides the grid layout. */
@media (min-width: 769px) {
    #featured-companions-container .advertisement-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;   /* everything left */
        gap: 12px;
    }
    /* natural source order = header → video → pricing → actions (no order override) */
    #featured-companions-container .advertisement-card .card-header { order: 1; margin: 0; }
    #featured-companions-container .advertisement-card .category-ad-video-wrapper {
        order: 2;
        width: 100%;
        aspect-ratio: auto;
        max-height: 260px;
        background: #000;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    #featured-companions-container .advertisement-card .pricing-section { order: 3; margin: 0; }
    #featured-companions-container .advertisement-card .card-actions {
        order: 4;
        margin: 0;
        justify-content: flex-start;   /* buttons bottom-left, not stretched full width */
        width: auto;
    }
    #featured-companions-container .advertisement-card .category-ad-video { object-fit: contain; width: 100%; height: 100%; }
}

/* FORCE-tight spacing around description + gallery image (beats all base/media rules) */
#featured-companions-container .companion-card .description { margin: 0 0 4px !important; }
#featured-companions-container .companion-card .feature-highlights { margin: 4px 0 !important; }
#featured-companions-container .companion-card .card-header { margin-bottom: 4px !important; }
#featured-companions-container .companion-card .best-for-section { margin: 6px 0 0 !important; }
#featured-companions-container .companion-card .card-actions { margin: 6px 0 0 !important; }

/* Mobile spotlight ad: fit the video tightly (no letterbox black bars) */
@media (max-width: 900px) {
    #featured-companions-container .advertisement-card .category-ad-video-wrapper {
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        background: transparent;
    }
    #featured-companions-container .advertisement-card .category-ad-video {
        height: auto;
        width: 100%;
        display: block;
        object-fit: contain;
    }
}

/* Desktop COTM/Spotlight flank cards: less space above the title and below the buttons */
@media (min-width: 769px) {
    .hero-flank .hero-flank-card { padding-top: 6px; padding-bottom: 6px; }
    .hero-flank-card .cotm-title { margin-bottom: 4px; }
    .hero-flank-card .cotm-header-row { margin-bottom: 4px; }
    .hero-flank-card .cotm-buttons { margin: 4px 0 0; }
}

/* COTM/Spotlight: bigger titles + minimal space below buttons (desktop) */
@media (min-width: 769px) {
    .hero-flank-card .cotm-title { font-size: 0.85rem; }
    .hero-flank-card .cotm-title .icon { width: 1.15em; height: 1.15em; }
    .hero-flank .hero-flank-card { padding-bottom: 2px; }
    .hero-flank-card .cotm-buttons { margin-bottom: 0; }
}
/* Hero header description: clamp to 2 lines in every language, fade out + scroll for the rest */
.hero-flank .hero-desc {
    max-height: 3em;            /* ~2 lines at line-height 1.5 */
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    scrollbar-width: none;
}
.hero-flank .hero-desc::-webkit-scrollbar { display: none; }
.hero-flank .hero-desc p { margin: 0; line-height: 1.5; }

/* Hero thumbnails: a touch bigger on desktop only (mobile keeps its flexible 4-across sizing) */
@media (min-width: 901px) {
    .hero-thumb { width: 112px; height: 66px; }
}

/* COTM/Spotlight: much bigger title, vertically centered content, same outer card */
@media (min-width: 769px) {
    .hero-flank-card .cotm-title { font-size: 1.05rem; margin-bottom: 6px; }
    .hero-flank-card .cotm-title .icon { width: 1.2em; height: 1.2em; }
    .hero-flank .hero-flank-card {
        justify-content: center;      /* center title+logo+buttons vertically */
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* Heavier fade-out on the hero description */
.hero-flank .hero-desc {
    -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
}

/* COTM/Spotlight desktop: center the title in the band above the inner (Ourdream/Darlink)
   box, and cut the space below the buttons. */
@media (min-width: 769px) {
    .hero-flank .hero-flank-card {
        justify-content: center;
        padding-top: 12px;
        padding-bottom: 4px;
    }
    .hero-flank-card .cotm-title { margin: 8px 0 12px; }   /* balanced gap: outer border ↔ title ↔ inner box */
    .hero-flank-card .cotm-buttons { margin-bottom: 0; }
}

/* COTM/Spotlight desktop: equal space above and below the buttons */
@media (min-width: 769px) {
    .hero-flank-card .cotm-header-row { margin-bottom: 0; }
    .hero-flank-card .cotm-buttons { margin-top: 8px; margin-bottom: 0; }
    .hero-flank .hero-flank-card { padding-bottom: 8px; }
}

/* COTM/Spotlight desktop: distribute space evenly so title and buttons have equal
   space above/below (edge ↔ title ↔ inner box ↔ buttons ↔ edge all equal). */
@media (min-width: 769px) {
    .hero-flank .hero-flank-card { justify-content: space-evenly; padding-top: 6px; padding-bottom: 6px; }
    .hero-flank-card .cotm-title { margin: 0; }
    .hero-flank-card .cotm-header-row { margin: 0; }
    .hero-flank-card .cotm-buttons { margin: 0; }
}

/* Directory category headers: higher-contrast names + arrow on the right */
.home-directory .directory-col h2 { font-size: 0.95rem; }
.home-directory .directory-col h2 a { color: #fff; font-weight: 800; letter-spacing: 0.01em; }
.home-directory .directory-col h2 a::after {
    content: '\2192';            /* → */
    margin-left: auto;
    color: var(--accent-primary);
    font-weight: 700;
    transition: transform 0.15s ease;
}
.home-directory .directory-col h2 a:hover { color: #fff; }
.home-directory .directory-col h2 a:hover::after { transform: translateX(3px); }

/* Spotlight ad video: use the video's natural aspect (a ~4:1 banner) instead of a forced
   16:9 box → removes the black letterbox bars AND makes the element much shorter. */
#featured-companions-container .advertisement-card .category-ad-video {
    aspect-ratio: auto !important;
    height: auto !important;
    width: 100%;
    object-fit: contain;
}
#featured-companions-container .advertisement-card .category-ad-video-wrapper {
    aspect-ratio: auto !important;
    max-height: none !important;
    height: auto;
    background: transparent;
}
/* Desktop spotlight ad: logo + rating left-aligned */
@media (min-width: 769px) {
    #featured-companions-container .advertisement-card { align-items: stretch; }
    #featured-companions-container .advertisement-card .card-header { justify-content: flex-start; width: 100%; }
    #featured-companions-container .advertisement-card .card-actions { justify-content: flex-start; }
}

/* COTM/Spotlight desktop: distribute the INNER content (title, inner box, buttons) evenly
   over the full card height. (Previous justify-content was on the card, whose only child is
   .cotm-award-content, so it had no effect on the items.) */
@media (min-width: 769px) {
    .hero-flank .hero-flank-card { justify-content: stretch; }
    .hero-flank-card .cotm-award-content {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: stretch;
        flex: 1 1 auto;
        width: 100%;
        gap: 0;
    }
    .hero-flank-card .cotm-title { margin: 0; }
    .hero-flank-card .cotm-header-row { margin: 0; }
    .hero-flank-card .cotm-buttons { margin: 0; }
}

/* Partner callout (Xavira AI — Best AI Porn API) */
.partner-callout { display: flex; justify-content: center; margin: var(--space-5) 0; }
.partner-callout .partner-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    background: var(--bg-surface);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.partner-callout .partner-link:hover { border-color: var(--accent-blue); transform: translateY(-1px); }
.partner-callout .partner-label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.partner-callout .partner-logo { height: 26px; width: auto; display: block; }


/* Spotlight (Xavira) card: smaller wordmark logo + wrapping name so the long
   "Best-rated AI Porn API" no longer forces the flex card wider than its fixed width. */
.spotlight-card .promo-name a { font-size: 0.82rem; white-space: normal; line-height: 1.2; }
.spotlight-card .promo-logo { height: 32px; max-width: 104px; width: auto; }
.spotlight-card .promo-logo-link { margin-left: 24px; flex-shrink: 0; }
.spotlight-card .promo-meta { min-width: 0; }

/* Spotlight (Xavira): pull the title/stars left toward the logo */
.spotlight-card .cotm-header-row { justify-content: flex-start; gap: 12px; }

/* Spotlight (Xavira): meta flush next to the logo, logo vertically centered in the box */
.spotlight-card .cotm-header-row { justify-content: flex-start !important; align-items: center !important; gap: 14px; }
.spotlight-card .promo-meta { flex: 0 1 auto; text-align: left; }
.spotlight-card .promo-logo-link { align-self: center; margin-top: 0; }

/* Spotlight (Xavira): tighten logo footprint so the name fits on one line, pulled left */
.spotlight-card .promo-logo-link { margin-left: 4px !important; }
.spotlight-card .promo-logo { max-width: 88px; }
.spotlight-card .cotm-header-row { gap: 10px !important; }
.spotlight-card .promo-name a { white-space: nowrap; }
.spotlight-card .promo-meta { flex: 1 1 auto; min-width: 0; }

/* Spotlight (Xavira): logo not flush-left; let the text overlap the logo's right edge slightly */
.spotlight-card .promo-logo-link { margin-left: 22px !important; }
.spotlight-card .cotm-header-row { gap: 0 !important; }
.spotlight-card .promo-meta { margin-left: -10px; }

/* Note: the hero-split template's grid already starts at the real #3 (the hero shows
   #1 + #2 above it, the grid does NOT repeat them), so there is nothing to hide on
   mobile. An earlier rule here hid .category-grid's first two cards on ≤900px on the
   false assumption the grid repeated #1/#2 — that wrongly dropped the real #3 and #4
   (e.g. Ourdream, Soulkyn) on mobile. Removed. */

/* ============================================================
   Author pages and author boxes.

   Every review names who wrote it, and that name resolves to a real
   page rather than an anchor three people share. Uses the existing
   theme tokens throughout: no new palette.
   ============================================================ */

.author-hero { padding: 48px 0 28px; border-bottom: 1px solid var(--border-primary); }
.author-hero-inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.author-hero-avatar {
    width: 120px; height: 120px; border-radius: 50%;
    object-fit: cover; background: var(--bg-surface);
    border: 2px solid var(--border-primary); flex: 0 0 auto;
}
.author-hero h1 { margin: 0 0 6px; }
.author-hero-title { color: var(--accent-blue); font-weight: 600; margin: 0 0 6px; }
.author-hero-covers { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

.author-body { padding: 36px 0; }
.author-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.author-main h2 { font-size: 1.25rem; margin: 28px 0 12px; }
.author-main h2:first-child { margin-top: 0; }
.author-main p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 14px; }

.author-checks { list-style: none; padding: 0; margin: 0 0 14px; }
.author-checks li {
    position: relative; padding-left: 26px; margin: 0 0 10px;
    color: var(--text-secondary); line-height: 1.6;
}
.author-checks li::before {
    content: ""; position: absolute; left: 6px; top: 9px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue);
}

.author-process-note {
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-left: 3px solid var(--accent-blue); border-radius: 0 8px 8px 0;
    padding: 14px 18px; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65;
}

.author-side h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 12px; }
.author-others { list-style: none; padding: 0; margin: 0; }
.author-others li { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; }
.author-others img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-others span { display: flex; flex-direction: column; min-width: 0; }
.author-others small { color: var(--text-muted); font-size: 0.8rem; }

.author-work { padding: 8px 0 48px; }
.author-work h2 { font-size: 1.25rem; margin: 0 0 16px; }
.author-work-list { list-style: none; padding: 0; margin: 0; }
.author-work-list li {
    display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px; align-items: baseline;
    padding: 10px 0; border-bottom: 1px solid var(--border-primary);
}
.aw-kind {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); border: 1px solid var(--border-primary);
    border-radius: 4px; padding: 2px 8px; text-align: center;
}
.author-work-list time { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }
.author-work-more { color: var(--text-muted); font-size: 0.88rem; margin-top: 14px; }

.author-index { list-style: none; padding: 0; margin: 0 0 28px; }
.author-index li { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border-primary); }
.author-index img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-index h2 { margin: 0 0 4px; font-size: 1.15rem; }
.author-index .ai-title { color: var(--accent-blue); font-size: 0.88rem; margin: 0 0 8px; }
.author-index p { color: var(--text-secondary); line-height: 1.65; margin: 0; }

/* ---------- The byline box at the foot of a review ---------- */
.author-box {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: 12px; padding: 20px 22px; margin: 36px 0;
}
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-box-body { min-width: 0; }
.author-box-name { font-weight: 700; margin: 0 0 2px; }
.author-box-name a { color: var(--text-primary); }
.author-box-role { color: var(--accent-blue); font-size: 0.85rem; margin: 0 0 8px; }
.author-box-bio { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; margin: 0 0 10px; }
.author-box-links { font-size: 0.85rem; color: var(--text-muted); }
.author-box-links a { margin-right: 14px; }

@media (max-width: 860px) {
    .author-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .author-hero-avatar { width: 88px; height: 88px; }
    .author-work-list li { grid-template-columns: 1fr; gap: 4px; }
    .aw-kind { justify-self: start; }
    .author-box { flex-direction: column; gap: 12px; }
}

/* ---------- Market research page ---------- */
.mr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 18px; }
.mr-stat {
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: 10px; padding: 16px 18px; margin: 0 0 18px;
}
.mr-grid .mr-stat { margin: 0; }
.mr-stat b { display: block; font-size: 2rem; line-height: 1.1; color: var(--accent-blue); margin-bottom: 6px; }
.mr-stat span { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }

.mr-features { list-style: none; padding: 0; margin: 0 0 18px; }
.mr-features li {
    display: grid; grid-template-columns: minmax(140px, 230px) 1fr 90px;
    gap: 14px; align-items: center; padding: 9px 0;
    border-bottom: 1px solid var(--border-primary);
}
.mr-feature-label { color: var(--text-primary); font-size: 0.92rem; }
.mr-bar { background: var(--bg-tertiary); border-radius: 999px; height: 8px; overflow: hidden; }
.mr-bar span { display: block; height: 100%; background: var(--accent-blue); border-radius: 999px; }
.mr-feature-pct { text-align: right; font-weight: 700; color: var(--text-primary); }
.mr-feature-pct small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 640px) {
    .mr-features li { grid-template-columns: 1fr 70px; }
    .mr-bar { grid-column: 1 / -1; order: 3; }
}


/* Positie in een ranglijst: groot cijfer vóór het logo in de kaartkop */
.card-header { display: flex; align-items: center; gap: var(--space-3); }
.card-rank {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-blue);
    font-variant-numeric: tabular-nums;
    min-width: 2.1rem;
    text-align: right;
    flex-shrink: 0;
    letter-spacing: -0.03em;
}
.card-rank::before { content: "#"; font-size: 0.62em; vertical-align: 0.35em; opacity: 0.55; margin-right: 0.04em; }
.companion-card.featured .card-rank { color: var(--accent-blue); }
@media (max-width: 640px) { .card-rank { font-size: 1.5rem; min-width: 1.7rem; } }


/* Kaartnaam als tekst i.p.v. kop: minder koppen op lijstpaginas */
.companion-card .card-title {font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary);}
.companion-card .card-title a { color: inherit; text-decoration: none; }


/* Contentkolom naast de categoriezijbalk: secties en grid stapelen verticaal */
.category-main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
/* Zijkolom: top-12 boven de categorielijst, niet ernaast */
.category-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-4); }
/* Twee kolommen, met het 13-44 blok als eigen rij zodat het op mobiel apart
   te ordenen is (Browse Categories moet er dan tussen). */
.category-layout--rest {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
}
.category-layout--rest .category-sidebar { grid-column: 1; grid-row: 1 / span 2; }
.category-layout--rest .category-main-column { grid-column: 2; grid-row: 1; }
.category-layout--rest .category-rest { grid-column: 2; grid-row: 2; min-width: 0; }
@media (max-width: 1000px) {
    .category-layout--rest { display: flex; flex-direction: column; align-items: stretch; }
    /* zijkolom lost op, zodat de twee blokken los te ordenen zijn */
    .category-layout--rest .category-sidebar { display: contents; }
    .category-layout--rest .home-directory--single { order: 1; }
    .category-layout--rest .category-main-column { order: 2; }
    .category-layout--rest .category-side-links { order: 3; }
    .category-layout--rest .category-rest { order: 4; }
}
@media (max-width: 1000px) {
    /* gestapeld: geen vaste 260px meer, anders blijft er dode ruimte rechts */
    .category-sidebar,
    .category-sidebar .category-side-links,
    .home-directory--single { width: auto; }
}
.category-sidebar .category-side-links { width: 100%; }
/* Directory-blok van de homepage, maar dan een kolom breed */
.home-directory--single { grid-template-columns: 1fr; margin: 0; }
/* Alle twaalf staan er in een keer op: het is een overzicht, geen scrollbak */
.home-directory--single .ranking-list { max-height: none; overflow-y: visible; }
.home-directory--single .dir-list-wrap::after { content: none; }
.home-directory--single .ranking-list li img.dir-fav { object-fit: contain; padding: 1px; }
.category-main-column .platform-review { width: 100%; }
.rest-of-field-heading { margin-top: var(--space-8); }


/* Posities 13 en verder: compacte kaarten, vier op een rij */
.category-grid.compact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.compact-grid .companion-card { padding: var(--space-4); }
.compact-grid .companion-card .logo { width: 34px; height: 34px; }
.compact-grid .companion-card .card-rank { font-size: 1.3rem; min-width: 1.6rem; }
.compact-grid .companion-card .card-title { font-size: 0.95rem; }
.compact-grid .companion-card .description { font-size: 0.8rem; -webkit-line-clamp: 5; line-clamp: 5; }
.compact-grid .companion-card .card-actions { display: flex; flex-direction: row; gap: var(--space-2); }
@media (max-width: 900px) {
    .compact-grid .companion-card .description { font-size: 0.78rem; }
    .compact-grid .companion-card .card-actions a { font-size: 0.7rem; padding: 6px 4px; }
}
.compact-grid .companion-card .card-actions a { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; font-size: 0.76rem; padding: var(--space-2) var(--space-2); }
.compact-grid .companion-card .card-actions a { font-size: 0.8rem; padding: var(--space-2) var(--space-3); }
@media (max-width: 1100px) { .category-grid.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .category-grid.compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .category-grid.compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }


/* Proefchat: geen signup, cap op vijf beurten */
.cgchat { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; }
.cgchat-log { max-height: 340px; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.cgchat-msg { max-width: 82%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; }
.cgchat-bot { align-self: flex-start; background: var(--bg-tertiary); color: var(--text-primary); }
.cgchat-user { align-self: flex-end; background: var(--accent-blue); color: #fff; }
.cgchat-form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border-secondary); }
.cgchat-input { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border-secondary); background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.92rem; }
.cgchat-input:focus { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.cgchat-input:disabled { opacity: 0.6; }
.cgchat-send { padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); border: none; background: var(--accent-blue); color: #fff; font-weight: 600; cursor: pointer; }
.cgchat-send:disabled { opacity: 0.5; cursor: default; }
.cgchat-meta { margin: 0; padding: 0 var(--space-4) var(--space-3); font-size: 0.78rem; color: var(--text-tertiary); }
.cgchat-handoff { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-tertiary); border: 1px solid var(--accent-blue); }
.cgchat-handoff-text { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-primary); }
.cgchat-handoff-btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--accent-blue); color: #fff; font-weight: 600; text-decoration: none; font-size: 0.88rem; }


/* Logo en screenshot in de volledige secties */
.platform-logo { width: 76px; height: 76px; border-radius: var(--radius-lg); border: 1px solid var(--border-primary); background: var(--bg-tertiary); padding: var(--space-2); object-fit: contain; flex-shrink: 0; }
.platform-image { margin: var(--space-4) 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-secondary); }
.platform-image img { display: block; width: 100%; height: auto; }


/* Plus- en minblokken in de volledige secties */
.platform-review .pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-5) 0; align-items: stretch; }
.platform-review .pros, .platform-review .cons { background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.platform-review .pros { border-left: 3px solid #3f9c54; }
.platform-review .cons { border-left: 3px solid #b4523c; }
.platform-review .pc-label { margin: 0 0 var(--space-3); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.platform-review .pros .pc-label { color: #6bbf7e; }
.platform-review .cons .pc-label { color: #d98771; }
.platform-review .pros ul, .platform-review .cons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.platform-review .pros li, .platform-review .cons li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.platform-review .pros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #6bbf7e; font-weight: 700; }
.platform-review .cons li::before { content: "–"; position: absolute; left: 0; top: 0; color: #d98771; font-weight: 700; }
.platform-bestfor { margin: var(--space-4) 0 var(--space-4); font-size: 0.95rem; }
@media (max-width: 720px) { .platform-review .pros-cons-grid { grid-template-columns: 1fr; } }


/* Screenshots geblurd tot de bezoeker ze zelf opent */
.platform-image { position: relative; }
.platform-image.is-blurred img { filter: blur(22px); transform: scale(1.04); }
.platform-image.is-blurred a { cursor: default; }
.platform-image img { transition: filter 0.25s ease; }
.img-reveal {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.62);
    color: #fff; font-weight: 600; font-size: 0.88rem; cursor: pointer;
    backdrop-filter: blur(2px);
}
.img-reveal:hover { background: rgba(0,0,0,0.78); }
.img-reveal:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.platform-logo-link { display: inline-flex; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .platform-image img { transition: none; } }


/* Compacte kaart: screenshot als vlak, rangnummer en merk eroverheen */
.compact-grid .companion-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* display:flex hierboven wint van de browserregel [hidden]{display:none},
   waardoor de filters wel hidden zetten maar niets verborgen raakte */
.compact-grid .companion-card[hidden] { display: none; }
.cc-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-tertiary); }
.cc-shot { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.25s ease; }
.cc-media.is-blurred .cc-shot { filter: blur(20px); transform: scale(1.06); }
.cc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0) 62%); pointer-events: none; }
.cc-rank { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 2; font-size: 1.3rem; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.8); font-variant-numeric: tabular-nums; }
.cc-brand { position: absolute; left: 3.6rem; bottom: var(--space-3); right: var(--space-2); z-index: 2; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
/* Donkere tegel in plaats van een wit vlak: logo's met transparante achtergrond vielen zo uit de toon */
.cc-logo { width: auto; max-width: 62px; height: 26px; border-radius: var(--radius-sm); background: rgba(20,20,20,0.82); border: 1px solid rgba(255,255,255,0.10); padding: 3px 6px; object-fit: contain; flex-shrink: 0; backdrop-filter: blur(4px); }
.cc-name { font-weight: 700; font-size: 0.88rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.85); line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.cc-media .product-badge { top: var(--space-3); right: var(--space-3); z-index: 3; }
.cc-reveal { z-index: 4; top: 38%; padding: var(--space-2) var(--space-3); font-size: 0.78rem; }
.compact-grid .companion-card .description { padding: var(--space-4) var(--space-4) 0; margin: 0; }
.compact-grid .companion-card .card-actions { padding: var(--space-3) var(--space-4) var(--space-4); margin-top: auto; }


/* Chatblok in de header, in de stijl van de #1 van deze pagina */
.category-hero-chat { min-width: 0; display: flex; }
.category-hero-chat > #cg-chat-mount,
.category-hero-chat > [data-cg-chat] { flex: 1 1 auto; width: 100%; min-width: 0; display: flex; }
.category-hero-chat > #cg-chat-mount > .cgchat { width: 100%; }
.category-hero-chat .cgchat { width: 100%; }
.cgchat-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-secondary); background: var(--bg-tertiary); }
video.cgchat-avatar, video.cgchat-msg-avatar { object-fit: cover; }
.cgchat-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-tertiary); flex-shrink: 0; }
.cgchat-headname { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cgchat-headname strong { font-size: 0.95rem; color: var(--text-primary); }
.cgchat-headsub { font-size: 0.72rem; color: var(--text-tertiary); }
.cgchat-compact .cgchat-log { max-height: 190px; padding: var(--space-3); gap: var(--space-2); }
.cgchat-compact .cgchat-msg { font-size: 0.85rem; padding: var(--space-2) var(--space-3); max-width: 90%; }
.cgchat-compact .cgchat-form { padding: var(--space-2) var(--space-3); }
.cgchat-compact .cgchat-input { padding: var(--space-2) var(--space-3); font-size: 0.85rem; }
.cgchat-compact .cgchat-send { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
.cgchat-compact .cgchat-meta { padding: 0 var(--space-3) var(--space-2); font-size: 0.72rem; }
@media (max-width: 900px) { .category-hero-chat { margin-top: var(--space-4); } }


/* Titelkolom, chat en 'Why I rank' op één rij */
.category-hero-split .category-hero-chat { grid-column: 2; grid-row: 1; min-width: 0; }
.category-hero-split .category-hero-review { grid-column: 3; grid-row: 1; }
@media (max-width: 1000px) {
    .category-hero-split { grid-template-columns: 1fr; }
    .category-hero-split .category-hero-main,
    .category-hero-split .category-hero-chat,
    .category-hero-split .category-hero-review { grid-column: 1; grid-row: auto; }
}

.cgchat-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.cgchat-msg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--bg-tertiary); flex-shrink: 0; margin-top: 2px; }
.cgchat-row .cgchat-msg { max-width: none; }


/* hero: drie kolommen op een rij, titel smaller zodat de chat ernaast past */
.category-hero-split .category-hero-main { grid-column: 1 / 2; }
.category-hero-split .category-hero-chat { grid-column: 2 / 3; grid-row: 1; }
.category-hero-split .category-hero-review { grid-column: 3 / 4; grid-row: 1; }
@media (max-width: 1000px) {
    .category-hero-split .category-hero-main,
    .category-hero-split .category-hero-chat,
    .category-hero-split .category-hero-review { grid-column: 1 / -1; grid-row: auto; }
}


/* Afbeeldingsknop, spinner en foto in de chat */
.cgchat-imgbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-secondary); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; }
.cgchat-imgbtn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent-blue); }
.cgchat-imgbtn:disabled { opacity: 0.4; cursor: default; }
.cgchat-imgbtn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.cgchat-imgmsg { padding: var(--space-2); }
.cgchat-photo { display: block; width: 100%; max-width: 220px; border-radius: var(--radius-md); }

 to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) {  }

/* Chatkolom even hoog als de kolommen ernaast */
.category-hero-split { align-items: stretch; }
.category-hero-split .category-hero-chat { display: flex; }
.category-hero-chat .cgchat { display: flex; flex-direction: column; width: 100%; }
.category-hero-chat .cgchat-log { flex: 1; max-height: none; }


/* Datumregel duidelijk scheiden van de beschrijving */
.review-dates {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-secondary);
    font-size: 0.8rem;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
}
.review-dates a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.review-dates a:hover { color: var(--accent-blue); }
.review-dates time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Breadcrumb compact zodat de titel hoger komt */
.category-hero-main .category-breadcrumb {
    font-size: 0.78rem;
    margin-bottom: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-hero-main h1 { margin-top: 0; }


/* Op desktop groeit de chat niet mee met het aantal berichten: vaste hoogte,
   de berichtenlijst scrollt intern. Anders duwt hij de hele hero-rij uit. */
@media (min-width: 1001px) {
    .category-hero-split .category-hero-chat { height: 340px; }
    .category-hero-chat .cgchat { height: 100%; min-height: 0; }
    .category-hero-chat .cgchat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; }
    .category-hero-chat .cgchat-form,
    .category-hero-chat .cgchat-head,
    .category-hero-chat .cgchat-meta { flex: 0 0 auto; }
}


/* Laadindicator in de huisstijl: accentkleur, zelfde radius als de rest */
.cgchat-loading { display: flex; align-items: center; gap: var(--space-3); width: 200px; height: 150px; justify-content: center; flex-direction: column; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border-secondary); }
.cgchat-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--border-secondary); border-top-color: var(--accent-blue); animation: cgspin 0.75s linear infinite; }
.cgchat-loading-text { font-size: 0.76rem; color: var(--text-tertiary); }
@keyframes cgspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cgchat-spinner { animation-duration: 2.4s; } }

/* Typindicator: drie bolletjes in de bubbel zolang er een bericht aankomt */
.cgchat-typing { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); }
.cgchat-typing-label { font-size: 0.76rem; font-style: italic; }
.cgchat-dots { display: inline-flex; align-items: center; gap: 4px; }
/* currentColor, want een background met een custom property werd hier weggefilterd */
.cgchat-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cgdot 1.2s ease-in-out infinite; }
.cgchat-dot:nth-child(2) { animation-delay: 0.18s; }
.cgchat-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes cgdot { 0%, 60%, 100% { opacity: 0.28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cgchat-dot { animation: none; opacity: 0.5; } }

/* Uitweg naar de aanbieder, naast Send. Omgekeerd: rand in plaats van vlak. */
.cgchat-cta { display: inline-flex; align-items: center; white-space: nowrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.55); background: transparent; color: #fff; font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.cgchat-cta:hover { background: #fff; color: #111; border-color: #fff; }
.cgchat-cta:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.cgchat-compact .cgchat-cta { padding: var(--space-2) var(--space-3); font-size: 0.8rem; }
.cgchat-compact .cgchat-form { flex-wrap: wrap; }  /* smalle hero-kolom: de CTA valt netjes naar de volgende regel */
/* Titel van het chatblok, binnen de kaart zodat de vaste hoogte klopt */
.cgchat-title { margin: 0; padding: var(--space-3) var(--space-4) var(--space-2); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-secondary); }
.cgchat-compact .cgchat-title { padding: var(--space-2) var(--space-3); font-size: 1rem; }
/* Korte omschrijving rechts in de chatheader, vult de lege ruimte naast de naam */
.cgchat-headnote { margin: 0 0 0 auto; padding: 0 var(--space-4); max-width: 52%; min-width: 0; text-align: right; font-size: 0.72rem; line-height: 1.35; color: var(--text-tertiary); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 520px) {
    /* Omschrijving blijft op de regel, tussen leeftijd/land en de knop.
       Twee regels, de rest wordt afgekapt. */
    .cgchat-head { flex-wrap: nowrap; gap: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); }
    .cgchat-headnote { flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 0; padding: 0 var(--space-3); text-align: left; font-size: 0.68rem; }
    .cgchat-head .cgchat-cta { padding: 5px 10px; font-size: 0.7rem; }
}
/* CTA rechtsboven in de chatheader */
.cgchat-head .cgchat-cta { flex: 0 0 auto; margin-left: auto; padding: 5px 12px; font-size: 0.74rem; }

/* Chatblok op de companion-pagina: zelfde kaart als op de categoriepagina,
   in de linkerkolom onder de infokaart. Vaste hoogte zodat de kolom niet
   verspringt zodra er berichten bij komen. */
/* Categorieblok staat onderaan de companion-pagina in plaats van in de hero:
   het is navigatie, geen inleiding. Breed uitgelegd in plaats van een smalle kolom. */
/* <main> is een flexkolom met expliciete order-waarden op de secties; zonder
   eigen order zou dit blok vooraan belanden. */
.companion-categories-bottom { order: 99; margin: var(--space-10) auto var(--space-12); }

/* Homepage: uitgelichte companions in het compacte kaartontwerp van de
   categoriepaginas, over de volle breedte van de container. */
.home-featured-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); width: 100%; }
/* Nieuwskolom rechts is weg: de linkerkolom pakt nu de hele breedte */
.main-layout--single { display: block; }
.main-layout--single .left-column { width: 100%; max-width: none; }
/* Knoptekst kleiner zodat Visit en Read binnen de knop passen */
.home-featured-grid .card-actions a { font-size: 0.72rem; padding: var(--space-2) var(--space-2); letter-spacing: -0.01em; }

/* Rij chatkaarten tussen de eerste en tweede rij van het directory-raster.
   Compacter dan de directory-kolommen ernaast: de video vult de hele kaart,
   de knoppen liggen eroverheen. Na een klik komt de chat in dezelfde ruimte. */
.home-chat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}
.home-chat-card {
    position: relative;
    height: 320px;
    display: block;                 /* geen flex: de video moet de hele kaart vullen */
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
}
/* Beide lagen vullen de kaart volledig; flex-basis op de video liet de kaart
   krimpen naar de breedte van het staande beeld. */
.hcc-media { position: absolute; inset: 0; display: block; }
.hcc-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcc-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 38%, transparent 52%, rgba(0,0,0,0.72) 100%);
    pointer-events: none;
}
.hcc-overlay {
    position: absolute; left: 10px; top: 8px; z-index: 1;
    display: flex; flex-direction: column; line-height: 1.25;
}
.hcc-name { font-weight: 700; color: #fff; font-size: 0.85rem; }
.hcc-sub { font-size: 0.66rem; color: rgba(255,255,255,0.88); }
.hcc-actions {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1;
    display: flex; gap: 6px;
}
.hcc-btn {
    flex: 1 1 0; min-width: 0;
    padding: 6px 8px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    color: #fff; font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
.hcc-btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); }
.hcc-btn:hover { filter: brightness(1.12); }
.hcc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home-chat-card .hcc-chat { position: absolute; inset: 0; display: flex; }
.home-chat-card .hcc-chat > .cgchat { width: 100%; height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.home-chat-card .hcc-chat .cgchat-title { font-size: 0.82rem; padding: 6px 10px; }
.home-chat-card .hcc-chat .cgchat-head { padding: 6px 10px; }
.home-chat-card .hcc-chat .cgchat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; }
.home-chat-card .hcc-chat .cgchat-form { padding: 6px; }
.home-directory--rest { margin-top: 0; }
@media (max-width: 900px) { .home-chat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-chat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-chat-card { height: 260px; } }

@media (max-width: 900px) { .home-featured-grid .card-actions a { font-size: 0.68rem; padding: 6px 4px; } }
@media (max-width: 900px) { .home-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.companions-section { width: 100%; }
/* Categorie-overzicht net zo breed als de rest */
.categories-overview { width: 100%; }
.categories-overview .categories-grid,
.categories-overview .category-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
/* Verdict op mobiel korter, zodat je er langs kunt scrollen */
@media (max-width: 900px) {
    .verdict .verdict-text {
        max-height: 22em;
        overflow-y: auto;
        scrollbar-width: none;
        mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    }
    .verdict .verdict-text::-webkit-scrollbar { display: none; }
}

/* Sterren onder de naam in de desktop-infokaart */
/* Sterren direct onder de naam: rij 2 in kolom 2, want de h1 staat op rij 1
   kolom 2 en de tagline pakt de volle breedte. */
.hero-mega-info .hero-mega-stars { grid-row: 2; grid-column: 2; margin: 2px 0 var(--space-2); color: #f59e0b; font-size: 1rem; letter-spacing: 1px; align-self: start; }
/* My review op desktop iets korter zodat de kolom compacter is */
@media (min-width: 1001px) {
    .hero-mega-review { max-height: 320px; }
}
.companion-categories-bottom .hero-mega-categories { max-height: none; width: 100%; }
.companion-categories-bottom .hero-mega-categories-list {
    max-height: none;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.companion-hero-chat { display: flex; min-width: 0; }
.companion-hero-chat > .cgchat { width: 100%; display: flex; flex-direction: column; }
.companion-hero-chat .cgchat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; }
.companion-hero-chat .cgchat-form,
.companion-hero-chat .cgchat-head,
.companion-hero-chat .cgchat-title,
.companion-hero-chat .cgchat-meta { flex: 0 0 auto; }
@media (min-width: 1001px) {
    .companion-hero-chat { height: 380px; }
    .companion-hero-chat > .cgchat { height: 100%; min-height: 0; }
}
@media (max-width: 1000px) {
    /* vaste hoogte, net als op de categoriepagina: de kaart mag niet groeien
       zodra er berichten bij komen, de log scrollt */
    .companion-hero-chat { height: 300px; }
    .companion-hero-chat > .cgchat { height: 100%; min-height: 0; }

    /* .hero-text stond op display:contents, waardoor de kinderen los in het grid
       van .hero-content vielen en de byline bovenaan belandde. Op mobiel gewoon
       een blok: titelrij, byline, knop, in die volgorde. */
    /* Logo blijft in kolom 1, de tekst ernaast in kolom 2 op dezelfde rijen. */
    .companion-hero .hero-text { display: block; grid-column: 2; grid-row: 2 / 5; }
    .companion-hero .hero-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
    }
    .companion-hero .hero-title-row h2 { margin: 0; min-width: 0; }
    .companion-hero .hero-content .hero-title-row .hero-deal-tag {
        position: static !important;
        top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0 0 0 auto;   /* rechts op de titelregel */
        padding: 4px 10px;
        font-size: 0.66rem;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* Vijf sterren zonder cijfer, met de byline ernaast op dezelfde regel */
    .companion-hero .hero-stars {
        display: inline-block;
        margin: 4px 0 var(--space-2);
        color: #f59e0b;
        font-size: 0.9rem;
        letter-spacing: 1px;
        vertical-align: middle;
    }
    .companion-hero .hero-byline {
        display: inline-block;
        margin: 4px 0 var(--space-2) var(--space-3);
        font-size: 0.72rem;
        line-height: 1.3;
        vertical-align: middle;
    }
    /* Knop over de volle breedte van de tekstkolom */
    .companion-hero .platform-info { display: block; }
    .companion-hero .platform-info .platform-btn {
        display: block;
        width: 100%;
        text-align: center;
    }
    /* My review: ~5 regels, dan scrollen, zodat de chat hoger komt */
    .hero-mega-review .review-text,
    .hero-mega-review > p {
        max-height: 8.5em;
        overflow-y: auto;
        scrollbar-width: none;
        mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    }
}
/* Naam en leeftijd/land blijven op hun eigen breedte en breken niet af;
   de omschrijving vult wat overblijft en duwt de knop naar rechts. */
.cgchat-head .cgchat-headname { flex: 0 0 auto; }
.cgchat-headsub { white-space: nowrap; }
.cgchat-headnote { flex: 1 1 auto; margin-left: auto; -webkit-line-clamp: 2; line-clamp: 2; }
.cgchat-imgicon { width: 18px; height: 18px; display: block; }

@media (max-width: 900px) {
    /* #1, logo en titel horen op een regel te staan, niet onder elkaar */
    .platform-review .platform-header { flex-direction: row; align-items: flex-start; gap: var(--space-3); flex-wrap: nowrap; }
    .platform-review .platform-header .platform-title-section { flex: 1 1 0; min-width: 0; }
    .platform-review .platform-header .platform-rank {
        flex: 0 0 auto;
        /* even hoog als het logo, zodat het cijfer er precies naast gecentreerd staat */
        height: 76px;
        display: flex;
        align-items: center;
    }
    .platform-review .platform-header .platform-logo-link { flex: 0 0 auto; }
    .platform-review .platform-header h2 { font-size: 1.05rem; margin-bottom: var(--space-1); }
    .platform-review .platform-header .platform-rank { font-size: 2.6rem; line-height: 1; }
    .platform-review .platform-header .platform-meta { margin-top: 0; }
}

.compact-grid .companion-card .card-actions { display: flex; flex-direction: row; gap: var(--space-2); }
.compact-grid .companion-card .card-actions a { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; font-size: 0.76rem; padding: var(--space-2); }

/* Kaart zonder screenshot: neutrale tegel, rangnummer en merk blijven staan */
.cc-media--empty { background: linear-gradient(140deg, var(--bg-tertiary), var(--bg-surface)); }
.cc-media--empty::after { background: none; }
.cc-logo-link { display: inline-flex; flex-shrink: 0; }
.compact-grid .companion-card .card-actions a { font-size: 0.72rem; padding: var(--space-2) var(--space-1); letter-spacing: -0.01em; }


/* Filterbalk boven de posities 13 en verder */
.cc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-4); }
.cc-filter { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border-secondary); background: var(--bg-surface); color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.cc-filter:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.cc-filter.is-on { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.cc-filter:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.cc-filter-count { margin-left: auto; font-size: 0.78rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }


/* Sprongenlijst: de top 12 direct aanklikbaar, boven de categorielijst */

/* ── 18+ blur op expliciete afbeeldingen ───────────────────────────────────
   data/image-safety.json houdt per afbeelding bij hoe expliciet hij is. Alles
   op niveau 2 (zichtbare geslachtsdelen of tepels, seksuele handeling) krijgt
   class="nsfw-img" van scripts/apply-image-blur.js.

   De blur zit op de afbeelding zelf, niet op een wrapper: zo verschuift er niets
   in de opmaak en blijft de pagina zonder JavaScript geblurd in plaats van open.
   js/image-reveal.js zet de "Bekijk afbeelding, ik ben 18+" knop er bij het laden
   overheen en haalt na een klik .nsfw-shown op <html>.                         */
img.nsfw-img { filter: blur(20px); transition: filter 0.25s ease; }
.nsfw-shown img.nsfw-img { filter: none; }
/* de knop hangt in de directe ouder van de afbeelding */
.nsfw-reveal-host { position: relative; }
/* kleine beelden: een blur van 20px maakt daar een grijze vlek van */
.hero-thumb img.nsfw-img,
img.nsfw-img[width="92"],
.dir-fav.nsfw-img,
.ht-fav.nsfw-img { filter: blur(7px); }
/* deze regel is specifieker dan .nsfw-shown img.nsfw-img, dus die moet hier apart
   overschreven worden: heeft de bezoeker eenmaal 18+ bevestigd, dan gaat alles open */
.nsfw-shown .hero-thumb img.nsfw-img,
.nsfw-shown img.nsfw-img[width="92"],
.nsfw-shown .dir-fav.nsfw-img,
.nsfw-shown .ht-fav.nsfw-img { filter: none; }
/* de hero-thumbs op de homepage zijn te klein voor een knop: alleen blur */
.hero-thumb .img-reveal { display: none; }
/* de knop mag nooit over drie regels breken in een kleine afbeelding */
.img-reveal { white-space: nowrap; }
.img-reveal-sm { padding: var(--space-2) var(--space-3); font-size: 0.72rem; }
@media (prefers-reduced-motion: reduce) { img.nsfw-img { transition: none; } }