/* VRPE — VR Porn Expert — Static Site Styles */
/* Mobile-first, clean, minimal */

:root {
    --ac: #be2edd;         /* accent purple — matches Mercury theme */
    --ac-hover: #a020c0;
    --cta: #2ecc71;        /* green CTA — matches Mercury */
    --cta-hover: #27ae60;
    --bg: #f5f6fa;
    --bg-card: #fff;
    --text: #2d3436;
    --text-light: #636e72;
    --text-muted: #b2bec3;
    --border: #dfe6e9;
    --star: #f39c12;
    --star-empty: #dfe6e9;
    --pro: #2ecc71;
    --con: #e74c3c;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --max-w: 1100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--ac-hover); }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.3; margin-bottom: .5em; }
h1 { font-size: 1.8rem; font-weight: 900; }
h2 { font-size: 1.4rem; font-weight: 700; margin-top: 1.5em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin-bottom: 1em; }
ul, ol { margin: 0 0 1em 1.5em; }
table { width: 100%; border-collapse: collapse; margin: 1em 0; }
th, td { padding: .6em .8em; border: 1px solid var(--border); text-align: left; font-size: .95rem; }
th { background: var(--bg); font-weight: 700; }

.wrapper { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; }

/* --- Buttons --- */
.btn {
    display: inline-block; padding: .6em 1.4em; border-radius: var(--radius);
    font-weight: 700; font-size: .95rem; text-align: center;
    transition: box-shadow .2s, transform .15s;
}
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { color: #fff; box-shadow: 0 4px 15px rgba(46,204,113,.45); transform: translateY(-1px); }
.btn--secondary { background: var(--text-muted); color: #fff; }
.btn--secondary:hover { color: #fff; background: #7f8c8d; }
.btn--large { padding: .8em 2em; font-size: 1.05rem; }

/* --- Header --- */
.site-header {
    background: #fff; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.site-header .wrapper {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
}
.site-logo {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 900; font-size: 1.1rem; color: var(--text);
}
.site-logo:hover { color: var(--ac); }
.site-logo img { width: 36px; height: 36px; border-radius: 4px; }

.nav-list { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; }
.nav-item > a {
    color: var(--text); font-weight: 700; font-size: .95rem;
    padding: .5rem 1rem; display: flex; align-items: center; gap: .4rem;
    height: 60px; line-height: 60px; border-bottom: 3px solid transparent;
    transition: border-color .2s, color .2s;
}
.nav-item > a:hover { color: var(--ac); border-bottom-color: var(--ac); }
.nav-item__icon { font-size: 1rem; line-height: 1; }
.nav-item.has-dropdown { position: relative; }
.nav-item.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: .3rem; vertical-align: middle; }
.dropdown {
    display: none; position: absolute; top: 100%; left: 0; min-width: 240px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12); list-style: none; padding: .5rem 0; z-index: 200;
}
.dropdown li a { display: block; padding: .5rem 1rem; color: var(--text); font-size: .9rem; transition: background .15s, color .15s; }
.dropdown li a:hover { background: var(--bg); color: var(--ac); }
.nav-item.has-dropdown:hover .dropdown { display: block; }

.burger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.burger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: .3s; }

@media (max-width: 768px) {
    .burger { display: block; }
    .site-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 1rem; }
    .site-nav.open { display: block; }
    .nav-list { flex-direction: column; gap: .5rem; }
    .dropdown { position: static; display: none; box-shadow: none; border: none; padding-left: 1rem; }
    .nav-item.has-dropdown:hover .dropdown,
    .nav-item.has-dropdown > a:focus + .dropdown { display: block; }
}

/* --- Hero --- */
.hero {
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
    color: #fff; padding: 3rem 0; text-align: center;
}
.hero h1 { font-size: 2.2rem; color: #fff; }
.hero__subtitle { color: rgba(255,255,255,.8); max-width: 600px; margin: .5em auto 0; font-size: 1.1rem; }

/* --- Review Cards (Listings) --- */
.rankings-section { padding: 2rem 0; }

.review-card {
    display: grid; grid-template-columns: 50px 100px 1fr auto;
    gap: 1rem; align-items: center;
    background: var(--bg-card); border-radius: var(--radius); padding: 1.2rem;
    margin-bottom: 1rem; box-shadow: var(--shadow);
    transition: box-shadow .2s;
}
.review-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.review-card__rank {
    font-size: 1.5rem; font-weight: 900; color: var(--ac);
    text-align: center;
}
.review-card__logo img { border-radius: var(--radius); width: 80px; height: 80px; object-fit: cover; }
.review-card__title a { color: var(--text); font-size: 1.1rem; }
.review-card__title a:hover { color: var(--ac); }
.review-card__desc { font-size: .9rem; color: var(--text-light); margin: .3em 0; }
.review-card__tagline { font-size: .85rem; color: var(--text-muted); font-style: italic; margin: 0; }

.review-card__rating { font-size: .9rem; margin: .2em 0; }
.star { color: var(--star-empty); font-style: normal; }
.star.full, .star.half { color: var(--star); }
.review-card__score { font-weight: 700; color: var(--ac); margin-left: .3em; }

.review-card__actions { display: flex; flex-direction: column; gap: .5rem; }

@media (max-width: 768px) {
    .review-card {
        grid-template-columns: 40px 70px 1fr;
        grid-template-rows: auto auto;
    }
    .review-card__actions {
        grid-column: 1 / -1;
        flex-direction: row; justify-content: center;
    }
    .review-card__logo img { width: 60px; height: 60px; }
}

/* --- Review Page --- */
.review-page { padding: 2rem 0; }
.review-header {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.review-header__logo { position: relative; flex-shrink: 0; }
.review-header__logo img { width: 120px; height: 120px; border-radius: var(--radius); object-fit: cover; }
.review-header__rating-badge {
    position: absolute; bottom: -8px; right: -8px;
    background: var(--ac); color: #fff; font-weight: 900;
    padding: .2em .5em; border-radius: var(--radius); font-size: .9rem;
}
.review-header__desc { color: var(--text-light); }
.review-header__tagline { font-style: italic; color: var(--text-muted); font-size: .95rem; }

@media (max-width: 768px) {
    .review-header { flex-direction: column; align-items: center; text-align: center; }
}

.review-body {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
    overflow-wrap: break-word;
}
.review-body img { border-radius: var(--radius); margin: 1em auto; max-width: 100%; height: auto; display: block; }
.review-body h2 {
    border-bottom: 2px solid var(--ac); padding-bottom: .3em;
    margin-top: 2em; scroll-margin-top: 90px;
}
.review-body h2:first-child { margin-top: 0; }
.review-body h3 {
    color: var(--ac); margin-top: 1.5em; padding-left: .6rem;
    border-left: 3px solid var(--ac);
}

/* --- Table of Contents (review pages) --- */
.review-toc {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1rem 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.5rem;
    border-left: 4px solid var(--ac);
}
.review-toc__title { margin: 0 0 .5em 0; font-size: 1rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; }
.review-toc__list { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 2rem; }
.review-toc__list li { padding: .15em 0; break-inside: avoid; }
.review-toc__list a { color: var(--text); text-decoration: none; border-bottom: 1px dotted transparent; }
.review-toc__list a:hover { color: var(--ac); border-bottom-color: var(--ac); }

@media (max-width: 600px) {
    .review-toc__list { columns: 1; }
}

/* --- Tables in reviews --- */
.review-body table {
    width: 100%; font-size: .92rem; border-collapse: collapse;
    margin: 1.2em 0; background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.review-body table thead { background: linear-gradient(135deg, #2d3436, #636e72); }
.review-body table thead th { color: #fff; font-weight: 600; padding: .7em .9em; text-align: left; }
.review-body table tbody td { padding: .7em .9em; border-top: 1px solid rgba(0,0,0,.06); }
.review-body table tbody tr:nth-child(even) { background: rgba(0,0,0,.02); }
.review-body table tbody tr:hover { background: rgba(--ac, 0,0,0,.04); }

/* Wrap tables on mobile to avoid overflow */
@media (max-width: 700px) {
    .review-body table { display: block; overflow-x: auto; white-space: nowrap; }
    .review-body table thead th, .review-body table tbody td { white-space: normal; }
}

/* --- FAQ accordion block --- */
.faq-block {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.faq-block > h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin: 0 0 1rem 0; }
.faq-item { border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); margin-bottom: .6rem; background: #fff; }
.faq-item[open] { border-color: var(--ac); }
.faq-item summary {
    padding: .9rem 1.1rem; cursor: pointer; font-weight: 600;
    list-style: none; position: relative; padding-right: 2.5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 1.4rem; color: var(--ac); font-weight: 400; line-height: 1; transition: transform .2s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--ac); }
.faq-item__answer { padding: 0 1.1rem 1rem 1.1rem; color: var(--text); line-height: 1.55; }
.faq-item__answer p:first-child { margin-top: 0; }
.faq-item__answer p:last-child { margin-bottom: 0; }

/* --- Pros/Cons --- */
.pros-cons {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;
}
.pros-cons__col {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.2rem; box-shadow: var(--shadow);
}
.pros-cons__pros h3 { color: var(--pro); }
.pros-cons__cons h3 { color: var(--con); }
.pros-cons__pros li::marker { content: "\2713 "; color: var(--pro); }
.pros-cons__cons li::marker { content: "\2717 "; color: var(--con); }

@media (max-width: 768px) {
    .pros-cons { grid-template-columns: 1fr; }
}

/* --- CTA Box --- */
.review-cta {
    background: linear-gradient(135deg, #2d3436, #636e72); color: #fff;
    border-radius: var(--radius); padding: 1.5rem; text-align: center; margin-bottom: 2rem;
}
.review-cta p { color: rgba(255,255,255,.9); margin-bottom: 1em; }

/* --- Bundle pricing (within Network block) --- */
.bundle-plans {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
    margin: 1.5rem 0 1rem 0;
}
.bundle-plan {
    position: relative; background: #fff; border: 2px solid rgba(0,0,0,.08);
    border-radius: var(--radius); padding: 1.4rem 1.2rem 1.2rem 1.2rem;
    text-align: center;
}
.bundle-plan--popular {
    border-color: var(--ac);
    box-shadow: 0 6px 20px rgba(190, 46, 221, .18);
}
.bundle-plan__badge {
    position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
    background: var(--ac); color: #fff; font-size: .75rem; font-weight: 700;
    padding: .25rem .8rem; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase;
    white-space: nowrap;
}
.bundle-plan__label { margin: 0 0 .5rem 0; font-size: 1.1rem; color: var(--text); border: none; padding: 0; }
.bundle-plan__discount { margin: 0 0 .3rem 0; font-size: .9rem; }
.bundle-plan__strike { color: var(--text-light); text-decoration: line-through; margin-right: .4rem; }
.bundle-plan__discount-tag { background: #ffe2eb; color: #c41e5a; padding: .12rem .55rem; border-radius: 4px; font-weight: 700; font-size: .78rem; }
.bundle-plan__price { margin: 0 0 .2rem 0; font-size: 1rem; }
.bundle-plan__price strong { font-size: 2.2rem; color: var(--text); font-weight: 700; }
.bundle-plan__period { color: var(--text-light); font-size: 1rem; margin-left: .15rem; }
.bundle-plan__billed { margin: 0 0 .6rem 0; font-size: .8rem; color: var(--text-light); }
.bundle-plan__features { list-style: none; padding: 0; margin: .8rem 0 0 0; font-size: .87rem; color: var(--text); }
.bundle-plan__features li { padding: .25rem 0; border-top: 1px dashed rgba(0,0,0,.08); }
.bundle-plan__features li:first-child { border-top: none; }
.bundle-plan__features li::before { content: '✓'; color: var(--ac); margin-right: .35rem; font-weight: 700; }
.bundle-cta-wrap { text-align: center; margin: 1rem 0 1.5rem 0; }

@media (max-width: 700px) {
    .bundle-plans { grid-template-columns: 1fr; }
    .bundle-plan__price strong { font-size: 1.9rem; }
}

.network-block__sites-heading {
    margin: 1.5rem 0 1rem 0; font-size: 1.1rem; color: var(--text);
    border-left: 3px solid var(--ac); padding-left: .6rem;
}

/* --- Sticky CTA bar --- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: linear-gradient(135deg, #2d3436, #636e72);
    border-top: 1px solid rgba(0,0,0,.2);
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    color: #fff;
    animation: stickyCtaIn .25s ease;
}
.sticky-cta[hidden] { display: none; }
.sticky-cta__inner {
    max-width: 1100px; margin: 0 auto; padding: .6rem 1rem;
    display: flex; align-items: center; gap: .8rem;
}
.sticky-cta__logo { border-radius: 6px; flex-shrink: 0; }
.sticky-cta__info { flex: 1; min-width: 0; line-height: 1.2; }
.sticky-cta__brand { display: block; font-size: 1rem; }
.sticky-cta__rating { color: #FFD86B; font-weight: 700; font-size: .85rem; }
.sticky-cta__btn { white-space: nowrap; flex-shrink: 0; }

@keyframes stickyCtaIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 600px) {
    .sticky-cta__inner { padding: .5rem .7rem; gap: .5rem; }
    .sticky-cta__brand { font-size: .9rem; }
    .sticky-cta__rating { font-size: .75rem; }
    .sticky-cta__btn { padding: .5rem .8rem; font-size: .85rem; }
    .sticky-cta__logo { width: 32px; height: 32px; }
}

/* Pad the page bottom on mobile so sticky CTA does not cover footer content */
@media (max-width: 768px) {
    body { padding-bottom: 70px; }
}

/* --- Network Sites Block --- */
.network-block {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.network-block h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin-bottom: 1rem; }
.network-block__intro { color: var(--text); margin-bottom: 1.2rem; }
.network-block__note { margin-top: 1rem; font-size: .9rem; color: var(--text-light); font-style: italic; }
.network-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
}
.network-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .15s ease;
}
.network-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.network-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; }
.network-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.network-card__body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.network-card__title { margin: 0; font-size: 1.1rem; }
.network-card__niche {
    margin: 0; font-size: .85rem; color: var(--ac); font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
}
.network-card__tagline { margin: 0; font-size: .9rem; color: var(--text); line-height: 1.4; }
.network-card__stats {
    display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0;
    font-size: .85rem; color: var(--text-light);
}
.network-card__stats li { padding: 0; }
.network-card__stats li::marker { content: ""; }
.network-card__stats strong { color: var(--text); }
.network-card .btn { margin-top: .3rem; align-self: flex-start; }

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

/* --- Related Reviews --- */
.related-reviews { margin-bottom: 2rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-card {
    display: flex; align-items: center; gap: .8rem;
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow); color: var(--text);
}
.related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.related-card img { width: 50px; height: 50px; border-radius: var(--radius); }
.related-card__score { color: var(--ac); font-weight: 700; display: block; font-size: .9rem; }

.related-reviews__more { margin-top: 1rem; font-size: .9rem; color: var(--text-light); }
.related-reviews__more a { color: var(--ac); }

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

/* --- Category/Guide Page --- */
.page-content {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.page-content h2 {
    border-bottom: 2px solid var(--ac); padding-bottom: .3em;
    margin-top: 2.5em;
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
    margin-top: 1.8em;
    padding-left: .6em;
    border-left: 3px solid var(--ac);
}
.page-content img { border-radius: var(--radius); margin: 1em auto; }

/* Guide tables — striped, accent header */
.page-content table {
    border: none; border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin: 1.5em 0;
}
.page-content th {
    background: #2d3436; color: #fff; border: none;
    font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
}
.page-content td { border: none; border-bottom: 1px solid var(--border); }
.page-content tr:nth-child(even) td { background: var(--bg); }
.page-content tr:hover td { background: #eef0f7; }

/* Guide ordered lists — step cards */
.page-content ol {
    counter-reset: guide-step; list-style: none; padding: 0; margin: 1.2em 0;
}
.page-content ol > li {
    counter-increment: guide-step;
    position: relative; padding: .8em 1em .8em 3.2em;
    margin-bottom: .5em; background: var(--bg); border-radius: var(--radius);
    border-left: 3px solid var(--ac);
}
.page-content ol > li::before {
    content: counter(guide-step);
    position: absolute; left: .7em; top: .7em;
    width: 1.6em; height: 1.6em; line-height: 1.6em;
    background: var(--ac); color: #fff; border-radius: 50%;
    font-weight: 700; font-size: .85rem; text-align: center;
}

/* Guide unordered lists — cleaner bullets */
.page-content ul {
    margin: 1em 0 1em 0; padding: 0; list-style: none;
}
.page-content ul > li {
    position: relative; padding: .4em 0 .4em 1.5em;
}
.page-content ul > li::before {
    content: ""; position: absolute; left: 0; top: .85em;
    width: 8px; height: 8px; background: var(--ac); border-radius: 50%;
}

/* Tip/pro-tip blocks — bold paragraphs starting with Tip:/Pro tip: */
.page-content p > strong:first-child {
    display: inline;
}

/* Guide code inline */
.page-content code {
    background: var(--bg); padding: .15em .4em; border-radius: 3px;
    font-size: .9em; color: var(--ac);
}

/* Responsive table scroll on mobile */
@media (max-width: 768px) {
    .page-content table { display: block; overflow-x: auto; white-space: nowrap; }
    .page-content ol > li { padding-left: 2.8em; }
    .page-content ol > li::before { left: .5em; }
}

/* --- Category & Guide Grids (Homepage) --- */
.categories-section, .guides-section { padding: 2rem 0; }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.category-card, .guide-card {
    background: var(--bg-card); border-radius: var(--radius); padding: 1.5rem;
    box-shadow: var(--shadow); color: var(--text); transition: box-shadow .2s;
}
.category-card:hover, .guide-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); color: var(--text); }
.category-card h3, .guide-card h3 { font-size: 1.1rem; margin-bottom: .3em; }
.category-card p { font-size: .9rem; color: var(--text-light); margin: 0; }
.guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

@media (max-width: 768px) {
    .category-grid, .guides-grid { grid-template-columns: 1fr; }
}

/* --- Breadcrumbs --- */
.breadcrumbs {
    padding: .8rem 0; font-size: .85rem; color: var(--text-muted);
}
.breadcrumbs ol { list-style: none; display: flex; gap: .3rem; margin: 0; padding: 0; flex-wrap: wrap; }
.breadcrumbs li:not(:last-child)::after { content: " / "; margin-left: .3rem; color: var(--text-muted); }
.breadcrumbs a { color: var(--text-light); }
.breadcrumbs a:hover { color: var(--ac); }

/* --- FAQ --- */
.faq-section { padding: 2rem 0; }
.faq-list { max-width: 800px; }
.faq-list dt { font-weight: 700; font-size: 1.05rem; margin: 1.2em 0 .3em; padding-left: 0; }
.faq-list dt::before { content: "Q: "; color: var(--ac); }
.faq-list dd { margin: 0 0 .8em 0; padding-left: 0; line-height: 1.6; color: var(--text-light); }

/* --- Footer --- */
.site-footer { background: #2d3436; color: #b2bec3; padding: 3rem 0 1.5rem; margin-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-col h4 { color: #fff; font-size: .95rem; margin-bottom: .8em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .4em; }
.footer-col a { color: #b2bec3; font-size: .9rem; }
.footer-col a:hover { color: var(--ac); }
.footer-tagline { font-size: .85rem; color: #636e72; font-style: italic; line-height: 1.5; margin: 0; cursor: default; }
.footer-bottom { border-top: 1px solid #636e72; margin-top: 2rem; padding-top: 1rem; text-align: center; font-size: .8rem; }

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

/* --- WP content cleanup --- */
.space-pros, .space-cons { margin-bottom: 0; }
.space-pros-title, .space-cons-title { font-weight: 700; margin-bottom: .5em; }
.space-pros-title { color: var(--pro); }
.space-cons-title { color: var(--con); }
.wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 768px) { .wp-block-columns { grid-template-columns: 1fr; } }

/* Inline pros/cons from WP content (already extracted to JSON but kept for category page embeds) */
.space-pros-ins, .space-cons-ins { padding: 1rem; background: var(--bg); border-radius: var(--radius); }

/* ============================================================
   V2 — VR Experience Lab Review Styles
   ============================================================ */

/* --- V2 Hero --- */
.v2-hero {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.v2-hero__logo { position: relative; flex-shrink: 0; }
.v2-hero__logo img { width: 120px; height: 120px; border-radius: var(--radius); object-fit: cover; }
.v2-hero__badge {
    position: absolute; bottom: -8px; right: -8px;
    background: var(--ac); color: #fff; font-weight: 900;
    padding: .2em .5em; border-radius: var(--radius); font-size: .9rem;
}
.v2-hero__desc { color: var(--text-light); }
.v2-hero__tagline { font-style: italic; color: var(--text-muted); font-size: .95rem; }
.v2-verified {
    display: inline-block; background: #27ae60; color: #fff; font-size: .8rem;
    font-weight: 700; padding: .2em .6em; border-radius: 4px; margin: .3em 0 .8em;
}
@media (max-width: 768px) {
    .v2-hero { flex-direction: column; align-items: center; text-align: center; }
}

/* --- V2 Dashboard (VR Quality Metrics) --- */
.v2-dashboard {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.v2-dashboard h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin-top: 0; }
.v2-dashboard__grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 1rem;
}
.v2-metric {
    text-align: center; padding: .8rem .5rem;
    background: var(--bg); border-radius: var(--radius);
}
.v2-metric__icon { font-size: 1.5rem; display: block; margin-bottom: .3em; }
.v2-metric__value { display: block; font-weight: 900; font-size: 1.1rem; color: var(--ac); }
.v2-metric__label { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .2em; }

@media (max-width: 768px) {
    .v2-dashboard__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .v2-dashboard__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- V2 Score Bars --- */
.v2-scores {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.v2-scores h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin-top: 0; }
.v2-scores__grid { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.v2-score-bar__header { display: flex; justify-content: space-between; margin-bottom: .3em; }
.v2-score-bar__label { font-weight: 700; font-size: .9rem; }
.v2-score-bar__value { font-weight: 900; color: var(--ac); font-size: .9rem; }
.v2-score-bar__track {
    height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden;
}
.v2-score-bar__fill {
    height: 100%; background: linear-gradient(90deg, var(--ac), var(--cta));
    border-radius: 5px; transition: width .6s ease;
}

/* --- V2 Sections --- */
.v2-section {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.v2-section h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin-top: 0; display: flex; justify-content: space-between; align-items: baseline; }
.v2-section__score {
    font-size: .9rem; font-weight: 900; color: var(--ac);
    background: var(--bg); padding: .15em .5em; border-radius: 4px;
}
.v2-section img { border-radius: var(--radius); margin: 1em auto; }

/* --- V2 Stats Row --- */
.v2-stats-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    margin-bottom: 1.5rem;
}
.v2-stat {
    text-align: center; padding: .8rem; background: var(--bg); border-radius: var(--radius);
}
.v2-stat strong { display: block; font-size: 1.3rem; color: var(--ac); }
.v2-stat span { font-size: .8rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .v2-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* --- V2 Device Matrix --- */
.v2-devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.v2-device {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem; background: var(--bg); border-radius: var(--radius);
    border-left: 4px solid var(--border);
}
.v2-device--full   { border-left-color: var(--pro); }
.v2-device--partial { border-left-color: var(--star); }
.v2-device--limited { border-left-color: var(--con); }
.v2-device__status { font-size: 1.2rem; flex-shrink: 0; }
.v2-device__notes { font-size: .8rem; color: var(--text-muted); display: block; }
.v2-device strong { font-size: .9rem; }

@media (max-width: 768px) {
    .v2-devices { grid-template-columns: 1fr; }
}

/* --- V2 Pricing Plans --- */
.v2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.v2-plan {
    text-align: center; padding: 1.2rem; background: var(--bg); border-radius: var(--radius);
    border: 2px solid transparent; position: relative;
}
.v2-plan--best { border-color: var(--ac); }
.v2-plan__tag {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--ac); color: #fff; font-size: .7rem; font-weight: 700;
    padding: .15em .6em; border-radius: 4px; white-space: nowrap;
}
.v2-plan h3 { font-size: 1rem; margin-bottom: .5em; }
.v2-plan__price { font-size: 1.5rem; font-weight: 900; color: var(--ac); }
.v2-plan__price small { display: block; font-size: .8rem; font-weight: 400; color: var(--text-muted); }
.v2-plan__promo { font-size: .85rem; color: var(--pro); font-weight: 700; margin-top: .3em; }
.v2-plan__renew { font-size: .75rem; color: var(--text-muted); }
.v2-plan__once { font-size: .75rem; color: var(--pro); }
.v2-plans__methods { font-size: .85rem; color: var(--text-light); }

@media (max-width: 768px) {
    .v2-plans { grid-template-columns: 1fr; }
}

/* --- V2 Lab Verdict --- */
.v2-verdict {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.v2-verdict h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin-top: 0; }
.v2-verdict__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.v2-verdict__col { padding: 1rem; border-radius: var(--radius); }
.v2-verdict__buy { background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.3); }
.v2-verdict__skip { background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.3); }
.v2-verdict__buy h3 { color: var(--pro); font-size: 1rem; }
.v2-verdict__skip h3 { color: var(--con); font-size: 1rem; }
.v2-verdict__buy li::marker { content: "\2713 "; color: var(--pro); }
.v2-verdict__skip li::marker { content: "\2717 "; color: var(--con); }
.v2-verdict__text { margin-top: 1rem; }

@media (max-width: 768px) {
    .v2-verdict__grid { grid-template-columns: 1fr; }
}

/* --- V2 FAQ Accordion --- */
.v2-faq {
    background: var(--bg-card); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem;
}
.v2-faq h2 { border-bottom: 2px solid var(--ac); padding-bottom: .3em; margin-top: 0; }
.v2-faq__item {
    border-bottom: 1px solid var(--border); padding: .8rem 0;
}
.v2-faq__item:last-child { border-bottom: none; }
.v2-faq__item summary {
    font-weight: 700; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.v2-faq__item summary::after { content: "+"; font-size: 1.3rem; color: var(--ac); }
.v2-faq__item[open] summary::after { content: "\2212"; }
.v2-faq__item summary::-webkit-details-marker { display: none; }
.v2-faq__item p { margin: .5em 0 0; color: var(--text-light); }

/* --- Partners page (uses review-card styles) --- */