/* =========================================================
   FreeWPHosts - Main Stylesheet (BEM & Responsive Design System)
   Palette: Blue primary, Orange accent, clean white
   ========================================================= */

:root {
  /* Colors */
  --primary:        #0284c7; /* Blue primary */
  --secondary:      #ea580c; /* Orange accent */
  --tertiary:       #0369a1; /* Blue dark */
  --bg-body:        #ffffff;
  --bg-surface:     #f8fafc;
  --text-body:      #334155;
  --text-title:     #0f172a;
  --border-primary: #e2e8f0;
  --shadow-primary: 0 0.4rem 0.6rem rgba(0,0,0,.07), 0 0.2rem 0.4rem rgba(0,0,0,.06);

  /* Helper Colors (from original design) */
  --green:          #16a34a;
  --red:            #dc2626;
  --blue-light:     #e0f2fe;
  --gray-100:       #f1f5f9;
  --gray-200:       #e2e8f0;
  --gray-500:       #64748b;
  
  --font:           'Nunito', system-ui, sans-serif;
  --radius:         0.8rem; /* 8px equivalent */

  /* Typography variables (Clamped responsive text sizes) */
  --text-xs:        clamp(1.0rem, 0.95rem + 0.25vw, 1.2rem);  /* ~10px-12px */
  --text-s:         clamp(1.2rem, 1.15rem + 0.25vw, 1.4rem);  /* ~12px-14px */
  --text-m:         clamp(1.4rem, 1.35rem + 0.25vw, 1.6rem);  /* ~14px-16px */
  --text-l:         clamp(1.6rem, 1.5rem + 0.5vw, 2.0rem);    /* ~16px-20px */
  --text-xl:        clamp(2.0rem, 1.85rem + 0.75vw, 2.6rem);  /* ~20px-26px */
  --text-2xl:       clamp(2.6rem, 2.4rem + 1.0vw, 3.4rem);    /* ~26px-34px */
  --text-3xl:       clamp(3.4rem, 3.0rem + 1.5vw, 4.6rem);    /* ~34px-46px */

  /* Space variables (Clamped responsive padding/margin) */
  --space-xs:       clamp(0.4rem, 0.35rem + 0.2vw, 0.6rem);   /* ~4px-6px */
  --space-s:        clamp(0.8rem, 0.75rem + 0.25vw, 1.0rem);  /* ~8px-10px */
  --space-m:        clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);    /* ~12px-16px */
  --space-l:        clamp(2.0rem, 1.8rem + 1.0vw, 2.8rem);    /* ~20px-28px */
  --space-xl:       clamp(3.2rem, 2.8rem + 1.5vw, 4.4rem);    /* ~32px-44px */
  --space-2xl:      clamp(4.8rem, 4.2rem + 2.0vw, 6.4rem);    /* ~48px-64px */
  --space-3xl:      clamp(6.4rem, 5.6rem + 3.0vw, 8.8rem);    /* ~64px-88px */

  /* Gap variables (Clamped responsive flex/grid gaps) */
  --gap-xs:         clamp(0.4rem, 0.35rem + 0.2vw, 0.6rem);
  --gap-s:          clamp(0.8rem, 0.75rem + 0.25vw, 1.0rem);
  --gap-m:          clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);
  --gap-l:          clamp(2.0rem, 1.8rem + 1.0vw, 2.8rem);
  --gap-xl:         clamp(3.2rem, 2.8rem + 1.5vw, 4.4rem);
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 62.5%; /* 1rem = 10px base */
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  font-size: var(--text-m);
  line-height: 1.7;
  color: var(--text-body);
  background: var(--bg-body);
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* Screen-reader only */
.c-sr-only, .sr-only {
  position: absolute; width: 0.1rem; height: 0.1rem;
  padding: 0; margin: -0.1rem; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Layout ---- */
.c-container, .container {
  max-width: 110.0rem;
  margin: 0 auto;
  padding: 0 var(--space-m);
}

.c-section, .section {
  padding: var(--space-2xl) 0;
}

.c-section__intro, .section-intro {
  color: var(--gray-500);
  margin-bottom: var(--space-l);
  max-width: 68.0rem;
  font-size: var(--text-m);
}

/* ---- Header ---- */
.c-header, .site-header {
  background: var(--bg-body);
  border-bottom: 0.1rem solid var(--border-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

.c-header__inner, .site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.4rem;
}

.c-logo, .site-logo {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--text-l);
  font-weight: 800;
  color: var(--text-title);
  text-decoration: none;
}

.c-logo__icon, .site-logo .logo-icon { font-size: var(--text-xl); }
.c-logo__brand, .site-logo strong { color: var(--primary); }

.c-nav, .site-nav { display: flex; gap: var(--gap-m); }
.c-nav__link, .site-nav a {
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  font-size: var(--text-s);
}
.c-nav__link:hover, .site-nav a:hover { color: var(--primary); }

/* ---- Hero ---- */
.c-hero, .hero {
  background: linear-gradient(160deg, #0c4a6e 0%, #0369a1 45%, #0e7490 100%);
  color: #fff;
  padding: var(--space-3xl) 0 var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.c-hero::before {
  content: '';
  position: absolute;
  top: -20rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100rem;
  height: 80rem;
  background: radial-gradient(ellipse, rgba(56,189,248,.2) 0%, transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.c-hero__backdrop {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 4.8rem 4.8rem;
  pointer-events: none;
  z-index: 0;
}

.c-hero__inner { position: relative; z-index: 1; }

.c-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: var(--space-m);
}

.c-hero__eyebrow-badge {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99rem;
  padding: 0.25rem 0.9rem;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}

.c-hero__title, .hero h1 {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--space-s);
}

.c-hero__title-accent {
  color: #7dd3fc;
  display: block;
}

.c-hero__subtitle, .hero-sub {
  font-size: var(--text-l);
  opacity: .9;
  max-width: 62rem;
  margin: 0 auto var(--space-m);
}

.c-hero__stats {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-l) 0;
  flex-wrap: wrap;
}

.c-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0 var(--gap-l);
}

.c-hero__stat + .c-hero__stat {
  border-left: 1px solid rgba(255,255,255,.2);
}

.c-hero__stat-value {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}

.c-hero__stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,.6);
}

.c-hero__ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--space-l);
  flex-wrap: wrap;
}

.c-btn--lg { padding: 1.1rem 2.6rem; font-size: var(--text-m); }

.c-hero__ghost-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-s);
  padding: 0.9rem 2.0rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.c-hero__ghost-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
  color: #fff;
  text-decoration: none;
}

.c-hero__pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.c-hero__pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 99rem;
  padding: 0.4rem 1.2rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .c-hero__stats { flex-direction: column; gap: var(--gap-m); }
  .c-hero__stat { padding: var(--gap-m) 0 0; }
  .c-hero__stat + .c-hero__stat { border-left: none; border-top: 1px solid rgba(255,255,255,.2); }
}

/* ---- Buttons ---- */
.c-btn, .btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--text-s);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
  border: none;
}

.c-btn--primary, .btn-primary {
  background: var(--secondary);
  color: #fff;
}
.c-btn--primary:hover, .btn-primary:hover {
  background: var(--secondary);
  filter: brightness(0.9);
  text-decoration: none;
  transform: translateY(-0.1rem);
}

.c-btn--sm, .btn-sm {
  padding: 0.5rem 1.2rem;
  font-size: var(--text-xs);
  background: var(--blue-light);
  color: var(--tertiary);
  border-radius: var(--radius);
}
.c-btn--sm:hover, .btn-sm:hover { background: var(--primary); color: #fff; text-decoration: none; }

.c-btn--large, .btn-large { padding: 1.2rem 2.8rem; font-size: var(--text-m); }

.c-btn--promo, .btn-promo {
  background: var(--primary);
  color: #fff;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: auto;
}
.c-btn--promo:hover, .btn-promo:hover { background: var(--tertiary); text-decoration: none; }

/* ---- Comparison Table ---- */
.c-heading-2, h2 {
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-s);
  color: var(--text-title);
}

.c-table-wrap, .table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-primary);
}

.c-table, .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
  background: #fff;
}

.c-table__head, .comparison-table thead {
  background: var(--primary);
  color: #fff;
}

.c-table__th, .comparison-table th {
  padding: 1.2rem 1.6rem;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.c-table__td, .comparison-table td {
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--border-primary);
  vertical-align: middle;
}

.c-table tbody tr:last-child td, .comparison-table tbody tr:last-child td { border-bottom: none; }
.c-table tbody tr:nth-child(odd), .comparison-table tbody tr:nth-child(odd) { background: var(--bg-surface); }
.c-table tbody tr:hover, .comparison-table tbody tr:hover { background: var(--blue-light); }

.c-table__host-link, .host-name a {
  font-weight: 700;
  color: var(--primary);
  display: block;
}

/* ---- Table section header ---- */
.c-table-section__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  flex-wrap: wrap;
  margin-bottom: var(--space-m);
}

.c-table-section__stamp {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-100);
  border: 1px solid var(--border-primary);
  border-radius: 99rem;
  padding: 0.35rem 1.1rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Filter pills ---- */
.c-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin-bottom: var(--space-m);
}

.c-filter-btn {
  background: #fff;
  border: 1.5px solid var(--border-primary);
  border-radius: 99rem;
  padding: 0.5rem 1.4rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-body);
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}

.c-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.c-filter-btn--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---- Top-pick row ---- */
.c-table__row--top { background: #f0f9ff !important; }
.c-table__row--top:hover { background: var(--blue-light) !important; }
.c-table__row--top .c-table__td:first-child { border-left: 3px solid var(--primary); }

.c-table__top-badge {
  display: inline-block;
  background: var(--secondary);
  color: #fff;
  font-size: calc(var(--text-xs) * 0.9);
  font-weight: 700;
  padding: 0.15rem 0.7rem;
  border-radius: 99rem;
  margin-bottom: 0.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* ---- Table cell enhancements ---- */
.c-table__th--c { text-align: center; }

.c-table__td--host { min-width: 20rem; }

.c-table__tagline {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 400;
  margin-top: 0.25rem;
  line-height: 1.4;
}

.c-table__td--c { text-align: center; }

.c-table__td--rating { white-space: nowrap; }

.c-table__rating-num {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 600;
  margin-top: 0.1rem;
}

.c-table__td--cta { white-space: nowrap; }

/* Review button */
.c-btn--review {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.55rem 1.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.c-btn--review:hover { background: var(--tertiary); color: #fff; text-decoration: none; }

/* Table footnote */
.c-table-section__note {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: var(--space-m);
  line-height: 1.5;
}

/* ---- Stars ---- */
.c-stars, .stars { display: inline-flex; gap: 0.1rem; }
.c-stars__star, .star { font-size: var(--text-l); }
.c-stars__star--full, .star.full  { color: #f59e0b; }
.c-stars__star--half, .star.half  { color: #f59e0b; opacity: .6; }
.c-stars__star--empty, .star.empty { color: var(--border-primary); }

/* ---- Badges ---- */
.c-badge, .badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 99.9rem;
  font-size: var(--text-xs);
  font-weight: 700;
}
.c-badge--yes, .badge-yes { background: #dcfce7; color: var(--green); }
.c-badge--no, .badge-no  { background: #fee2e2; color: var(--red); }

/* ---- Promo Cards ---- */
.c-section--promo, .section-promo {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.c-promo__hd {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.c-promo__label, .promo-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--space-s);
}

.c-promo__heading {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-s);
  line-height: 1.2;
}

.c-promo__intro {
  font-size: var(--text-m);
  color: rgba(255,255,255,.65);
  max-width: 56rem;
  margin: 0 auto;
  line-height: 1.6;
}

.c-promo__grid, .promo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: var(--gap-m);
}

.c-promo-card, .promo-card {
  background: #fff;
  border: none;
  border-top: 4px solid var(--border-primary);
  border-radius: var(--radius);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}

.c-promo-card:hover, .promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

.c-promo-card--featured, .promo-card.featured {
  border-top-color: var(--secondary);
}

.c-promo-card__hd { margin-bottom: 0.2rem; }

.c-promo-card__title, .promo-card h3 {
  font-size: var(--text-l);
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 0.2rem;
}

.c-promo-card__sub {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.c-promo-card__features {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.c-promo-card__features li {
  font-size: var(--text-s);
  color: var(--text-body);
  padding-left: 1.8rem;
  position: relative;
  line-height: 1.4;
}

.c-promo-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}

.c-promo-card__badge, .promo-badge {
  display: inline-block;
  background: var(--secondary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: 99rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.c-btn--promo, .btn-promo {
  background: var(--primary);
  color: #fff;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: auto;
  padding: 1rem 2rem;
  font-size: var(--text-s);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  transition: filter .15s;
}

.c-btn--promo:hover, .btn-promo:hover {
  filter: brightness(0.88);
  text-decoration: none;
  color: #fff;
}

.c-btn--promo-featured {
  background: var(--secondary);
}

/* ---- FAQ ---- */
.c-section--faq { background: var(--bg-surface); }

.c-faq__wrap { max-width: 72rem; }

.c-faq, .faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin-top: var(--space-l);
}

.c-faq-item, .faq-item {
  border: 0.1rem solid var(--border-primary);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: border-color .15s;
}

.c-faq-item[open], .faq-item[open] {
  border-color: var(--primary);
}

.c-faq-item__summary, .faq-item summary {
  padding: var(--space-m) var(--space-l);
  font-weight: 700;
  font-size: var(--text-m);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-m);
  background: #fff;
  transition: background .15s, color .15s;
}

.c-faq-item[open] .c-faq-item__summary, .faq-item[open] summary {
  background: var(--blue-light);
  color: var(--primary);
}

.c-faq-item__summary::after, .faq-item summary::after {
  content: '▾';
  font-size: var(--text-m);
  color: var(--primary);
  flex-shrink: 0;
  display: inline-block;
  transition: transform .2s;
}

.c-faq-item[open] .c-faq-item__summary::after, .faq-item[open] summary::after {
  transform: rotate(180deg);
}

.c-faq-item__text, .faq-item p {
  padding: var(--space-m) var(--space-l);
  color: var(--text-body);
  font-size: var(--text-s);
  border-top: 1px solid var(--border-primary);
  line-height: 1.7;
}

/* ---- Host Review Page ---- */
.c-review, .host-review { padding: var(--space-l) 0 var(--space-xl); }

.c-breadcrumb, .breadcrumb {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: var(--space-m);
}
.c-breadcrumb a, .breadcrumb a { color: var(--primary); }

.c-review-header, .review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-l);
  flex-wrap: wrap;
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 0.1rem solid var(--border-primary);
}

.c-review-header__title, .review-header-main h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-xs);
}

.c-review-header__tagline, .review-tagline {
  color: var(--gray-500);
  margin-bottom: var(--space-s);
}

.c-review-header__rating, .review-rating {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.c-review-header__rating-number, .rating-number {
  font-weight: 700;
  color: var(--text-body);
}

.c-review-header__cta, .review-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  text-align: center;
}

.c-review-header__cta-note, .cta-note {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

/* Quick Stats */
.c-quick-stats, .quick-stats {
  background: var(--blue-light);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
}

.c-quick-stats__grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.0rem, 1fr));
  gap: var(--gap-s);
}

.c-quick-stats__item, .stat {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.c-quick-stats__label, .stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500);
}

/* Pros & Cons */
.c-pros-cons, .pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-m);
  margin-bottom: var(--space-l);
}

.c-pros-cons__pros, .c-pros-cons__cons, .pros, .cons {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: var(--space-m);
}

.c-pros-cons__title, .pros h3, .cons h3 {
  font-size: var(--text-s);
  margin-bottom: var(--space-s);
}

.c-pros-cons__item, .pros li, .cons li {
  font-size: var(--text-s);
  padding: 0.5rem 0;
  color: var(--text-body);
  border-bottom: 0.1rem solid var(--border-primary);
}
.c-pros-cons__item:last-child, .pros li:last-child, .cons li:last-child { border-bottom: none; }

/* Best For */
.c-best-for, .best-for {
  background: var(--blue-light);
  border-left: 0.4rem solid var(--primary);
  padding: var(--space-m) var(--space-l);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: var(--space-l);
}

.c-best-for__title, .best-for h3 { font-size: var(--text-s); margin-bottom: var(--space-xs); }

/* Review Hero Layout */
.c-review-hero, .review-hero-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gap-l);
  margin-bottom: var(--space-l);
  align-items: start;
}
.c-review-hero--no-screenshot, .review-hero-layout.no-screenshot {
  grid-template-columns: 1fr;
}
.c-review-hero__info, .review-hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}
.c-review-hero__info .c-quick-stats, .review-hero-info .quick-stats,
.c-review-hero__info .c-best-for, .review-hero-info .best-for {
  margin-bottom: 0;
}

/* Browser Mockup Screenshot */
.c-browser-mockup, .browser-mockup {
  border: 0.1rem solid var(--border-primary);
  border-radius: 1.2rem;
  box-shadow: 0 1.0rem 3.0rem rgba(0, 0, 0, 0.08), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.c-browser-mockup:hover, .browser-mockup:hover {
  transform: translateY(-0.4rem) scale(1.01);
  box-shadow: 0 2.0rem 4.0rem rgba(2, 132, 199, 0.12), 0 0.1rem 0.5rem rgba(2, 132, 199, 0.05);
}
.c-browser-bar, .browser-bar {
  background: var(--gray-100);
  padding: 1.0rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 0.1rem solid var(--border-primary);
  user-select: none;
}
.c-browser-dot, .browser-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  display: inline-block;
}
.c-browser-dot--red, .browser-dot.red { background: #ff5f56; }
.c-browser-dot--yellow, .browser-dot.yellow { background: #ffbd2e; }
.c-browser-dot--green, .browser-dot.green { background: #27c93f; }
.c-browser-address, .browser-address {
  background: #fff;
  border-radius: 0.6rem;
  padding: 0.2rem 1.6rem;
  font-size: var(--text-xs);
  color: var(--gray-500);
  flex-grow: 1;
  max-width: 28.0rem;
  margin: 0 auto;
  text-align: center;
  border: 0.1rem solid var(--border-primary);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-browser-content, .browser-content {
  max-height: 34.0rem;
  overflow: hidden;
  position: relative;
  background: var(--bg-surface);
}
.c-browser-content::after, .browser-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4.0rem;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  pointer-events: none;
}
.c-browser-content img, .browser-content img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top;
}

.c-review__cta-bottom, .review-cta-bottom { text-align: center; margin-bottom: var(--space-l); }

.c-review__back-link, .back-link { font-size: var(--text-s); margin-top: var(--space-m); }

/* Review Content prose */
.c-review-content, .review-content {
  margin-bottom: var(--space-l);
}

.c-review-content h2, .review-content h2 {
  font-size: var(--text-l);
  margin: var(--space-l) 0 var(--space-xs);
}

.c-review-content p, .review-content p {
  color: var(--text-body);
  margin-bottom: var(--space-m);
}

/* About / prose pages */
.c-prose h1, .prose h1 { font-size: var(--text-2xl); margin-bottom: var(--space-m); }
.c-prose h2, .prose h2 { font-size: var(--text-l); margin: var(--space-l) 0 var(--space-xs); }
.c-prose p, .prose p  { color: var(--text-body); margin-bottom: var(--space-m); }

/* ---- Footer ---- */
.c-footer, .site-footer {
  background: var(--text-title);
  color: var(--border-primary);
  padding: var(--space-xl) 0 var(--space-m);
}

.c-footer__cols, .footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gap-m);
  margin-bottom: var(--space-l);
}

.c-footer__col .site-logo, .footer-col .site-logo { color: #fff; margin-bottom: var(--space-s); display: inline-flex; }
.c-footer__text, .footer-col p { font-size: var(--text-s); color: var(--gray-500); }

.c-footer__title, .footer-col h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: var(--space-s);
}

.c-footer__item, .footer-col ul li { margin-bottom: var(--space-xs); }
.c-footer__link, .footer-col ul li a {
  color: var(--border-primary);
  font-size: var(--text-s);
}
.c-footer__link:hover, .footer-col ul li a:hover { color: #fff; }

.c-footer__bottom, .footer-bottom {
  border-top: 0.1rem solid #1e293b;
  padding-top: var(--space-m);
}

.c-footer__bottom-text, .footer-bottom p {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: var(--space-xs);
}
.c-footer__bottom-text a, .footer-bottom p a {
  color: inherit;
  text-decoration: underline;
  transition: color var(--transition-base, 0.2s ease);
}
.c-footer__bottom-text a:hover, .footer-bottom p a:hover {
  color: #fff;
}

.c-footer__disclosure, .disclosure { font-style: italic; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .c-footer__cols, .footer-cols { grid-template-columns: 1fr 1fr; }
  .c-pros-cons, .pros-cons   { grid-template-columns: 1fr; }
  .c-review-header, .review-header { flex-direction: column; }
  .c-review-header__cta, .review-cta { align-items: flex-start; }
  .c-review-hero, .review-hero-layout { grid-template-columns: 1fr; gap: var(--gap-m); }
}

@media (max-width: 500px) {
  .c-footer__cols, .footer-cols { grid-template-columns: 1fr; }
  .c-nav, .site-nav { gap: var(--gap-s); }
}

/* ---- Section header (split: heading+intro left, CTA right) ---- */
.c-section__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  flex-wrap: wrap;
  margin-bottom: var(--space-l);
}

.c-section__hd .c-heading-2 { margin-bottom: var(--space-xs); }

.c-section__intro--flush { margin-bottom: 0; }

/* ---- Blog Section ---- */
.c-blog-grid, .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: var(--gap-m);
}

.c-blog-card, .blog-card {
  background: #fff;
  border: 0.1rem solid var(--border-primary);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  box-shadow: var(--shadow-primary);
  transition: transform .2s, box-shadow .2s;
}

.c-blog-card:hover, .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.c-blog-card__meta, .blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--gray-500);
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.c-blog-card__category, .blog-category {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.05em;
}

.c-blog-card__meta-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.c-blog-card__read-time {
  font-weight: 600;
}

.c-blog-card__read-time::after {
  content: '·';
  margin-left: 0.6rem;
  opacity: .5;
}

.c-blog-card__date, .blog-date-time { opacity: 0.85; }

.c-blog-card__title, .blog-card-title {
  font-size: var(--text-l);
  font-weight: 800;
  line-height: 1.3;
  margin: 0.25rem 0;
}

.c-blog-card__title a, .blog-card-title a {
  color: var(--text-title);
  text-decoration: none;
}

.c-blog-card__title a:hover, .blog-card-title a:hover { color: var(--primary); }

.c-blog-card__excerpt, .blog-card-excerpt {
  color: var(--text-body);
  font-size: var(--text-s);
  line-height: 1.6;
  flex-grow: 1;
}

.c-blog-card__link, .blog-card-link {
  font-weight: 700;
  font-size: var(--text-s);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  margin-top: auto;
}

.c-blog-card__link:hover, .blog-card-link:hover {
  text-decoration: none;
  color: var(--tertiary);
}

/* ---- Sidebar Layout ---- */
.l-sidebar-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30rem;
  max-width: 140rem;
  margin: 0 auto;
  align-items: start;
}

.l-sidebar-content {
  min-width: 0; /* prevents grid blowout */
}

.l-sidebar {
  padding: var(--space-l) var(--space-m) var(--space-l) var(--space-s);
  position: sticky;
  top: 6.4rem; /* matches sticky header height */
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Sidebar Widgets */
.c-sidebar-widget {
  background: var(--bg-surface);
  border: 0.1rem solid var(--border-primary);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-bottom: var(--gap-m);
}

.c-sidebar-widget__title {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: var(--space-s);
}

.c-sidebar-widget__cta-link {
  display: block;
  text-align: center;
  margin-top: var(--space-s);
}

/* Upgrade CTA widget */
.c-sidebar-widget--cta {
  background: var(--blue-light);
  border-color: var(--primary);
}

.c-sidebar-widget__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: var(--space-xs);
}

.c-sidebar-widget__cta-title {
  font-size: var(--text-m);
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: var(--space-xs);
}

.c-sidebar-widget__cta-text {
  font-size: var(--text-s);
  color: var(--gray-500);
  margin-bottom: var(--space-s);
  line-height: 1.5;
}

.c-sidebar-widget__cta-btn {
  width: 100%;
  text-align: center;
  display: block;
}

/* Host list */
.c-sidebar-hosts {
  list-style: none;
  margin-bottom: 0;
}

.c-sidebar-hosts__item {
  border-bottom: 0.1rem solid var(--border-primary);
}

.c-sidebar-hosts__item:last-child { border-bottom: none; }

.c-sidebar-hosts__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  color: var(--text-body);
  text-decoration: none;
  transition: color 0.15s;
}

.c-sidebar-hosts__link:hover { color: var(--primary); text-decoration: none; }

.c-sidebar-hosts__name {
  font-size: var(--text-s);
  font-weight: 700;
}

.c-sidebar-hosts__rating .c-stars__star { font-size: 1.2rem; }

/* Articles list */
.c-sidebar-articles {
  list-style: none;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.c-sidebar-articles__item {
  border-bottom: 0.1rem solid var(--border-primary);
  padding-bottom: var(--gap-s);
}

.c-sidebar-articles__item:last-child { border-bottom: none; padding-bottom: 0; }

.c-sidebar-articles__link {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-title);
  line-height: 1.4;
  display: block;
  margin-bottom: 0.3rem;
  text-decoration: none;
}

.c-sidebar-articles__link:hover { color: var(--primary); }

.c-sidebar-articles__meta {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

/* Responsive: stack sidebar below content on narrow screens */
@media (max-width: 960px) {
  .l-sidebar-wrap {
    grid-template-columns: 1fr;
  }

  .l-sidebar {
    position: static;
    max-height: none;
    padding: var(--space-s) var(--space-m) var(--space-l);
    overflow-y: visible;
  }
}

/* Prose and Review Content lists alignment fix */
.c-prose ul, .prose ul, .c-review-content ul, .review-content ul,
.c-prose ol, .prose ol, .c-review-content ol, .review-content ol {
  margin-bottom: var(--space-m);
  padding-left: var(--space-l);
}
.c-prose ul, .prose ul, .c-review-content ul, .review-content ul {
  list-style-type: disc;
}
.c-prose ol, .prose ol, .c-review-content ol, .review-content ol {
  list-style-type: decimal;
}
.c-prose li, .prose li, .c-review-content li, .review-content li {
  margin-bottom: var(--space-xs);
  color: var(--text-body);
}