/*
Theme Name: Antivirus Select
Theme URI: https://antivirus.select
Author: Antivirus Select Team
Description: Comparison and review theme for antivirus, password manager, secure email, cloud storage, and identity-protection software. Sister theme to custom-affiliate-theme (vpnonline.co.uk), built schema-first for AI search visibility.
Version: 1.0.0
License: Proprietary
Text Domain: antivirus-select
*/

/* =====================================================================
   1. DESIGN TOKENS
   Every color/spacing/radius/shadow used anywhere in this file comes
   from a token defined here. Never hard-code a literal in a component
   rule below — that duplication is exactly what made the old theme's
   CSS hard to maintain.
   ===================================================================== */

:root {
  /* Brand palette: deep trust navy/indigo + emerald action color.
     Deliberately distinct from the VPN sister site's teal/cyan so the
     two sites read as related, not reskinned. */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-400: #6366f1;
  --color-primary-500: #4f46e5;
  --color-primary-600: #4338ca;
  --color-primary-700: #3730a3;
  --color-primary-900: #1e1b4b;

  --color-accent-400: #34d399;
  --color-accent-500: #10b981;
  --color-accent-600: #059669;

  --color-star: #f5b400;
  --color-danger: #dc2626;
  --color-warning: #b45309;
  --color-warning-bg: #fffbeb;

  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e3e6ee;
  --color-border-strong: #cbd2e1;

  --color-text: #12142b;
  --color-text-muted: #565b75;
  --color-text-faint: #8890ac;
  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;

  --font-sans: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif-display: "Sora", var(--font-sans);

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 2.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 20, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(18, 20, 43, 0.08);
  --shadow-lg: 0 12px 32px rgba(18, 20, 43, 0.12);

  --container-max: 1240px;
  --content-max: 780px;

  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);

  --color-band-tint: rgba(255, 255, 255, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d0e1a;
    --color-surface: #15172a;
    --color-surface-raised: #1b1d33;
    --color-border: #262a45;
    --color-border-strong: #363b5e;

    --color-text: #eef0fb;
    --color-text-muted: #b3b8d4;
    --color-text-faint: #7d84a8;

    --color-primary-50: #1b1d3f;
    --color-primary-100: #24275a;
    --color-warning-bg: #2a2210;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

    --color-band-tint: rgba(13, 14, 26, 0.55);
  }
}

/* =====================================================================
   2. RESET & BASE ELEMENTS
   ===================================================================== */

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

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-serif-display); line-height: 1.2; margin: 0 0 var(--space-4); color: var(--color-text); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }

a { color: var(--color-primary-500); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.25em; }

.entry-content p a,
.homepage-intro-desc a,
.homepage-bottom p a {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }

.content-sidebar-wrapper { display: flex; gap: var(--space-6); align-items: flex-start; max-width: var(--container-max); margin: var(--space-6) auto; padding: 0 var(--space-5); }

#main-content.solution-review,
#main-content.standard-post {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Same "content sits on a card" treatment as the review/article pages,
   for pages that are a single bounded reading experience rather than a
   grid to browse (About Us, Our Methodology, Our Team, Contact, policy
   pages) — kept as an explicit modifier rather than baked into
   .page-content, since category/comparison archive pages use that same
   base class for a full-width grid layout that shouldn't be card-wrapped. */
#main-content.page-content--card {
  max-width: var(--container-max);
  margin: var(--space-6) auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) 0;
}

@media (max-width: 900px) {
  #main-content.page-content--card { padding: var(--space-5) 0; }
}

@media (max-width: 900px) {
  .content-sidebar-wrapper { flex-direction: column; padding: 0 var(--space-4); }
  #main-content.solution-review, #main-content.standard-post { padding: var(--space-5); }
}

/* =====================================================================
   4. HEADER & NAVIGATION
   ===================================================================== */

.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

/* padding-block (not the `padding` shorthand) so this never clobbers
   .container's horizontal padding when both classes are on the same
   element — that collision was the exact cause of the header touching
   the viewport edges with no side breathing room. */
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-4); }

/* Particle canvas sits behind the branding/nav within the header row;
   pointer-events:none so it never blocks clicks — mouse position is read
   from a listener on .header-inner itself, not the canvas. It disables
   itself in JS below 700px, so the extra breathing room below is only
   added where the effect actually shows. */
.header-particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.site-branding, .main-nav { position: relative; z-index: 1; }

@media (min-width: 700px) {
  .header-inner { padding-block: var(--space-6); }
}

.site-branding a { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-serif-display); font-weight: 700; font-size: var(--text-md); color: var(--color-text); }

.nav-list { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-5); margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav-list::-webkit-scrollbar { display: none; }
.nav-list li a { color: var(--color-text-muted); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.nav-list li a:hover { color: var(--color-primary-500); text-decoration: none; }

@media (max-width: 800px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* =====================================================================
   5. BUTTONS
   ===================================================================== */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.85em 1.9em; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-sm); border: none; cursor: pointer; text-decoration: none !important; line-height: 1.2; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-1px); }

.cta-button, .btn-primary { background: var(--color-accent-500); color: var(--color-on-accent) !important; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35); }
.cta-button:hover, .btn-primary:hover { background: var(--color-accent-600); }

.visit-button, .btn-secondary { background: var(--color-primary-50); color: var(--color-primary-700) !important; border: 1px solid var(--color-primary-100); }
.visit-button:hover, .btn-secondary:hover { background: var(--color-primary-100); }

.btn-ghost { background: transparent; color: var(--color-primary-500) !important; border: 1px solid var(--color-border-strong); }

.cta-subtext { display: block; font-size: var(--text-xs); font-weight: 500; opacity: 0.85; }

/* =====================================================================
   6. PILLS & BADGES (specs, features, price freshness)
   ===================================================================== */

.solution-metrics-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.solution-pill { display: inline-flex; align-items: center; gap: 0.4em; background: var(--color-primary-50); color: var(--color-primary-700); border-radius: var(--radius-pill); padding: 0.4em 0.9em; font-size: var(--text-xs); font-weight: 600; }
.solution-pill .pill-label { color: var(--color-text-muted); font-weight: 600; }
.solution-pill .pill-value { color: var(--color-text); font-weight: 700; }

.feature-pill { display: inline-block; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: var(--radius-pill); padding: 0.35em 0.9em; font-size: var(--text-xs); font-weight: 600; }
.feature-pill:hover { border-color: var(--color-primary-400); color: var(--color-primary-600); text-decoration: none; }

.price-freshness { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); color: var(--color-text-faint); }
.price-freshness::before { content: "\25CF"; color: var(--color-accent-500); font-size: 0.6em; }

.promo-badge { display: inline-block; background: var(--color-warning-bg); color: var(--color-warning); border-radius: var(--radius-sm); padding: 0.3em 0.7em; font-size: var(--text-xs); font-weight: 700; }

/* =====================================================================
   7. CARDS (solution + post)
   ===================================================================== */

.solution-grid, .article-grid-home, .author-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }

.solution-card, .post-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.solution-card:hover, .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.card-image { display: flex; justify-content: center; align-items: center; padding: var(--space-5) var(--space-5) 0; }
.card-image img { border-radius: var(--radius-sm); }
.card-content { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card-title { font-size: var(--text-md); margin: 0; }
.card-rating { font-size: var(--text-sm); color: var(--color-text-muted); }
.card-excerpt { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1; }
.card-meta { font-size: var(--text-xs); color: var(--color-text-faint); display: flex; gap: var(--space-2); }
.card-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }

.parent-solution-info { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.parent-solution-logo img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }

/* =====================================================================
   8. QUICK VERDICT BLOCK
   ===================================================================== */

.quick-verdict { background: linear-gradient(180deg, var(--color-primary-50), var(--color-surface)); border: 1px solid var(--color-primary-100); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-5) 0 var(--space-6); }
.quick-verdict h2 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-600); margin-bottom: var(--space-3); }
.quick-verdict-summary { font-size: var(--text-md); color: var(--color-text); margin-bottom: var(--space-4); }
.quick-verdict-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.quick-verdict-fact { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.quick-verdict-fact .fact-label { display: block; font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.quick-verdict-fact .fact-value { display: block; font-size: var(--text-md); font-weight: 700; }

/* =====================================================================
   9. SPEC TABLE / COMPARISON TABLE
   ===================================================================== */

.spec-table-container, .comparison-table-container { overflow-x: auto; margin: var(--space-5) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.spec-table, .comparison-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); }
.spec-table th, .spec-table td, .comparison-table th, .comparison-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.spec-table thead th, .comparison-table thead th { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: 700; position: sticky; top: 0; }
.spec-table tbody tr:last-child td, .comparison-table tbody tr:last-child td { border-bottom: none; }
/* Sticky first column so the spec label stays visible while a wide
   multi-product comparison table scrolls horizontally on mobile. */
.spec-table th:first-child, .spec-table td:first-child,
.comparison-table th:first-child, .comparison-table td:first-child {
  position: sticky; left: 0; background: inherit; z-index: 1;
}
.spec-table td.is-bool-yes::before, .comparison-table td.is-bool-yes::before { content: "\2713"; color: var(--color-accent-600); font-weight: 700; margin-right: 0.4em; }
.spec-table td.is-bool-no::before, .comparison-table td.is-bool-no::before { content: "\2013"; color: var(--color-text-faint); margin-right: 0.4em; }

/* =====================================================================
   9b. PRICING TABLE (tiers x terms)
   ===================================================================== */

.pricing-table-container { overflow-x: auto; margin: var(--space-5) 0; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.pricing-table th, .pricing-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.pricing-table thead th { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: 700; }
.pricing-tier-header th { background: var(--color-primary-50); color: var(--color-primary-700); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; padding-top: var(--space-3); }
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }

/* =====================================================================
   10. RESULT ROWS (comparison page / finder results)
   ===================================================================== */

.solution-result { display: grid; grid-template-columns: 140px 1fr 220px; gap: var(--space-5); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.solution-result .solution-logo img { max-width: 100%; }
.solution-result .solution-details h2 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.solution-result .solution-cta-column { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }

@media (max-width: 720px) {
  .solution-result { grid-template-columns: 1fr; text-align: center; }
}

/* =====================================================================
   11. FAQ ACCORDION
   ===================================================================== */

/* Native <details>/<summary> disclosure — no JS required, works even if
   scripts fail to load, and the answer text is always in the DOM for
   crawlers regardless of open/closed state. */
.faq-block { margin: var(--space-6) 0; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; background: var(--color-surface); }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); list-style: none; font-weight: 700; font-size: var(--text-base); cursor: pointer; color: var(--color-text); }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; font-size: 1.4em; color: var(--color-primary-500); flex-shrink: 0; }
.faq-item[open] .faq-question::after { content: "\2212"; }
.faq-answer { padding: 0 var(--space-4) var(--space-4); color: var(--color-text-muted); }

/* Visible How-To steps — the same data behind the HowTo schema, so
   structured data reflects what's actually shown on the page. */
.howto-steps { margin: var(--space-6) 0; }
.howto-steps-list { list-style: none; padding: 0; margin: 0; counter-reset: howto-step; }
.howto-steps-list li { position: relative; padding-left: 3.25rem; margin-bottom: var(--space-5); counter-increment: howto-step; }
.howto-steps-list li::before { content: counter(howto-step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-primary-500); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-md); }
.howto-step-title { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.howto-step-description { margin: 0; color: var(--color-text-muted); }

/* =====================================================================
   12. AUTHOR / E-E-A-T
   ===================================================================== */

.author-box { display: flex; gap: var(--space-5); background: var(--color-primary-50); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6); }
.author-box-avatar img { border-radius: 50%; }
.author-box-title { margin-bottom: var(--space-2); }
.author-box-description-wrapper .author-box-description { max-height: 4.8em; overflow: hidden; }
.author-box-description-wrapper .author-box-description.is-expanded { max-height: none; }
.author-box-read-more { background: none; border: none; color: var(--color-primary-500); font-weight: 700; cursor: pointer; padding: 0; margin-top: var(--space-2); }
.author-box-links { margin-top: var(--space-3); display: flex; gap: var(--space-3); }
.author-box-link { font-weight: 600; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.team-member-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; }
.team-member-avatar { border-radius: 50%; margin: 0 auto var(--space-3); }

/* Our Methodology page — was plain headings/paragraphs with no visual
   treatment; this reuses the same card-grid + circular-icon-badge
   language already established elsewhere on the site. */
.methodology-intro, .methodology-principles { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.methodology-intro { text-align: center; margin-bottom: var(--space-6); }
.methodology-subtitle { font-size: var(--text-md); color: var(--color-primary-600); font-weight: 600; margin-bottom: var(--space-4); }
.methodology-quote { position: relative; background: var(--color-primary-50); border-left: 4px solid var(--color-primary-500); border-radius: var(--radius-md); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); margin: var(--space-5) 0; font-size: var(--text-md); font-style: italic; color: var(--color-primary-700); }
.methodology-quote p { margin: 0; }
.methodology-criteria { margin-top: var(--space-7); }
.methodology-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.methodology-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: center; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.methodology-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.methodology-card-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-primary-50); font-size: 1.4rem; margin: 0 auto var(--space-3); }
.methodology-card h3 { margin-bottom: var(--space-2); font-size: var(--text-md); }
.methodology-card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.entry-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); margin-bottom: var(--space-5); }
.entry-meta img { border-radius: 50%; }

/* Author archive page header (author.php) — was previously unstyled,
   leaving the avatar to render as a raw, unformatted <img>. */
.author-header { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7) var(--space-6); margin-bottom: var(--space-7); }
.author-avatar { margin-bottom: var(--space-4); }
.author-avatar img { display: block; margin: 0 auto; border-radius: 50%; width: 120px; height: 120px; object-fit: cover; border: 4px solid var(--color-primary-50); box-shadow: var(--shadow-md); }
.author-expertise { display: inline-block; background: var(--color-primary-50); color: var(--color-primary-700); border-radius: var(--radius-pill); padding: 0.35em 1.1em; font-size: var(--text-sm); font-weight: 600; margin: var(--space-2) 0 var(--space-4); }
.author-linkedin-link { margin-top: var(--space-1); }

/* =====================================================================
   13. FINDER / FILTER TOOL
   ===================================================================== */

.finder-intro { color: var(--color-text-muted); max-width: var(--content-max); }
.filter-controls-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.filter-group label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-group select { width: 100%; padding: 0.6em 0.8em; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); }

/* =====================================================================
   14. SIDEBAR
   ===================================================================== */

.sidebar-solutions { flex: 0 0 300px; }
.sidebar-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.sidebar-heading { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); margin-bottom: var(--space-3); }
.sidebar-solution-list, .sidebar-category-list, .sidebar-comparison-list { list-style: none; margin: 0; padding: 0; }
.nav-solution-item > a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; color: var(--color-text); font-weight: 600; }
.nav-solution-item > a::after { content: "\2039"; margin-left: auto; color: var(--color-primary-500); font-weight: 700; }
.nav-solution-icon img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.nav-solution-supporting { list-style: none; padding-left: var(--space-6); margin: 0 0 var(--space-2); }
.nav-solution-supporting a { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 900px) {
  .sidebar-solutions { flex: auto; max-width: 100%; }
}

/* =====================================================================
   15. COMMENTS / RATINGS
   ===================================================================== */

.comments-area { max-width: var(--container-max); margin: var(--space-6) auto; padding: 0 var(--space-5); }
.comment-list { list-style: none; padding: 0; }
.comment-body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.comment-stars { color: var(--color-border-strong); }
.comment-stars .star.filled { color: var(--color-star); }
.commentratingbox label { cursor: pointer; font-size: 1.5em; color: var(--color-border-strong); }
.comment-form-styled .form-error, .form-error { color: var(--color-danger); font-size: var(--text-sm); margin-top: var(--space-1); }

/* =====================================================================
   16. HOMEPAGE HERO / SECTIONS
   ===================================================================== */

/* Ambient background: a few large, soft, blurred gradient blobs that
   drift very slowly, fixed to the viewport behind every page (inserted
   once in header.php, right after <body>, so no per-template markup is
   needed). Pure CSS — no JS, no images, one-time paint + a
   GPU-composited transform animation, so the cost is negligible.
   Position:fixed removes it from layout entirely and anchors it to the
   viewport, not any particular ancestor; with no z-index set anywhere,
   it simply paints first (it's the first thing in the DOM) and every
   later, normal-flow element paints on top of it, so opaque card
   content always stays fully legible regardless of where a blob sits. */
.ambient-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; will-change: transform; }
.ambient-blob--one { top: -8%; left: -10%; width: 480px; height: 480px; background: radial-gradient(circle, var(--color-primary-400), transparent 70%); animation: ambient-drift-1 34s ease-in-out infinite; }
.ambient-blob--two { top: 24%; right: -12%; width: 560px; height: 560px; background: radial-gradient(circle, var(--color-accent-400), transparent 70%); animation: ambient-drift-2 40s ease-in-out infinite; }
.ambient-blob--three { bottom: -10%; left: 22%; width: 420px; height: 420px; background: radial-gradient(circle, var(--color-primary-500), transparent 70%); animation: ambient-drift-3 46s ease-in-out infinite; }

@keyframes ambient-drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, 60px); } }
@keyframes ambient-drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, 40px); } }
@keyframes ambient-drift-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(35px, -45px); } }

@media (prefers-reduced-motion: reduce) {
  .ambient-blob { animation: none; }
}

@media (max-width: 700px) {
  /* Keep mobile lean and avoid blobs crowding narrow layouts. */
  .ambient-background { display: none; }
}

.hero.homepage-intro {
  position: relative;
  overflow: hidden;
  max-width: var(--container-max);
  margin: var(--space-6) auto var(--space-5);
  background: radial-gradient(120% 140% at 50% -20%, var(--color-primary-100) 0%, var(--color-primary-50) 45%, var(--color-surface) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.homepage-intro-title,
.homepage-intro-desc,
.hero-cta-row {
  opacity: 0;
  animation: hero-fade-up 0.7s ease forwards;
}
.homepage-intro-title { animation-delay: 0.05s; }
.homepage-intro-desc { animation-delay: 0.18s; }
.hero-cta-row { animation-delay: 0.3s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-intro-title, .homepage-intro-desc, .hero-cta-row { opacity: 1; animation: none; }
}

.homepage-intro-title { font-size: clamp(1.6rem, 5vw, var(--text-3xl)); margin-bottom: var(--space-3); }
.homepage-intro-desc { font-size: var(--text-md); color: var(--color-text-muted); max-width: 860px; margin: 0 auto; }

.section-heading { text-align: center; font-weight: 800; font-size: var(--text-2xl); margin: var(--space-7) 0 var(--space-5); position: relative; }
.section-heading::after { content: ""; display: block; width: 90px; height: 5px; border-radius: 3px; background: linear-gradient(120deg, var(--color-primary-500), var(--color-accent-500)); margin: 0.6em auto 0; }

.homepage-bottom { margin: var(--space-7) auto; }
.homepage-bottom ul { padding-left: 1.2em; }
.homepage-process-more { max-width: var(--content-max); margin: var(--space-6) auto 0; }

/* Alternating "frosted glass" tint band — a subtle, semi-transparent
   panel (not a solid color) so the ambient blobs still glow softly
   through it. Gives sections visual rhythm without hiding the dynamic
   background the tint is meant to complement. */
.section-tint {
  background: var(--color-band-tint);
  border-radius: var(--radius-lg);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .section-tint {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

/* Progressive-enhancement scroll reveal, built entirely on the CSS
   scroll-driven-animations spec (animation-timeline: view()) — zero JS.
   Unsupported browsers simply never match the @supports block and show
   the fully opaque, static content below — there is no hidden/JS-gated
   state for crawlers or no-JS visitors to miss. */
.reveal-on-scroll { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(24px);
      animation: reveal-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}
@keyframes reveal-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   17. FOOTER
   ===================================================================== */

.site-footer { border-top: 1px solid var(--color-border); margin-top: var(--space-8); padding: var(--space-6) 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer a { color: var(--color-text-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-3) 0 0; }

/* =====================================================================
   18. UTILITIES
   ===================================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.content-narrow { max-width: var(--content-max); margin: 0 auto; }
.archive-description { max-width: var(--content-max); margin: var(--space-3) auto 0; color: var(--color-text-muted); }

/* Browse/listing pages (category & taxonomy archives, comparison
   listicles, finder) share this header — same gradient-underline accent
   as .section-heading on the homepage, so archive pages don't read as a
   plainer, older part of the site. */
.page-header { margin-bottom: var(--space-6); }
.page-header h1 { position: relative; display: inline-block; }
.page-header h1::after { content: ""; display: block; width: 90px; height: 5px; border-radius: 3px; background: linear-gradient(120deg, var(--color-primary-500), var(--color-accent-500)); margin: 0.5em auto 0; }

.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
}
.form-group textarea { resize: vertical; min-height: 130px; }
.contact-success { background: var(--color-primary-50); border: 1px solid var(--color-accent-400); color: var(--color-accent-600); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-weight: 600; }
.hero-cta-row { display: flex; justify-content: center; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.cta-wrapper { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.solution-card--category { padding: var(--space-5); text-align: center; }
.category-icon-badge { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-primary-50); font-size: 1.4rem; margin: 0 auto var(--space-3); transition: transform 0.15s ease; }
.solution-card--category:hover .category-icon-badge { transform: scale(1.08); }

.solution-rank-badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5em; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; color: #fff; box-shadow: var(--shadow-sm); }
.solution-rank-badge--1 { background: linear-gradient(120deg, #f5b400, #f59e0b); }
.solution-rank-badge--2 { background: linear-gradient(120deg, #94a3b8, #64748b); }
.solution-rank-badge--3 { background: linear-gradient(120deg, #d08a5c, #b5651d); }
.error-404 { padding: var(--space-8) 0; }
.finder-results { margin-top: var(--space-5); }
.avs-finder-spec-group { margin-top: var(--space-4); }
.page-intro-content, .page-conclusion-content { max-width: var(--content-max); margin: 0 auto; }
.page-intro-content { margin-bottom: var(--space-6); }
.page-conclusion-content { margin-top: var(--space-6); }
.author-bio-long { max-width: var(--content-max); margin: var(--space-4) auto 0; text-align: left; }
.promo-banner-link { display: block; text-align: center; padding: 0.6em 1em; background: var(--color-primary-50); border-radius: var(--radius-md); margin-bottom: var(--space-4); font-weight: 600; }
.card-price { font-size: var(--text-sm); color: var(--color-text-muted); }
.solution-features { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.back-to-pillar-container { margin-bottom: var(--space-5); }
.guide-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.4em 1em 0.4em 0.4em; margin: 0 var(--space-2) var(--space-2) 0; text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.guide-pill img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; }
.guide-pill.is-primary { background: var(--color-primary-50); border-color: var(--color-primary-100); }
.related-guides-list { display: flex; flex-wrap: wrap; }
.sources-section ul { padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-text-muted); }
.comparison-results-list { margin: var(--space-5) 0; }
.team-member-bio { font-size: var(--text-sm); }

@media (max-width: 700px) {
  body { font-size: var(--text-sm); }
  .container, .content-sidebar-wrapper { padding: 0 var(--space-4); }
}