:root { --fg: #1b1b1b; --bg: #fff; --accent: #2563eb; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--fg); background: var(--bg); margin: 0; line-height: 1.6; }
header, footer { padding: 1rem; background: #f6f7fb; }
nav ul { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; }
a { color: var(--accent); text-decoration: none; }
main { max-width: 920px; margin: 2rem auto; padding: 0 1rem; }
h1, h2 { line-height: 1.2; }
.brand { display:flex; align-items:center; gap:1rem; }
.tagline-primary { font-weight:600; color:#1E3A8A; }
.tagline-secondary { color:#10B981; }
/* Breadcrumbs list styling */
.breadcrumbs ol { list-style:none; padding:0; margin:0 0 .5rem 0; display:flex; gap:.25rem; flex-wrap:wrap; }
.breadcrumbs li+li::before { content:"›"; margin:0 .25rem; color:#555; }

    :root { --focus: #111; }
/* Visually hidden but accessible */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; border:2px solid var(--focus); z-index:9999; }
/* Focus outlines */
a:focus, button:focus { outline:2px solid var(--focus); outline-offset:2px; }
/* Table caption visually hidden (announce to SRs) */
.comparison caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

    
      .product img { max-width: 100%; height: auto; border-radius: .5rem; display:block; }
.product-section { margin-top: 2rem; }
.comparison { width: 100%; border-collapse: collapse; }
.comparison th, .comparison td { border: 1px solid #e5e7eb; padding: .5rem; text-align: left; }
.pros-cons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.faq dt { margin-top:.75rem; font-weight:700; }
.faq dd { margin:.25rem 0 0 0; }

/*****  STAR RATING  *****/
/* Star rating (CSS-only) */
.rating-wrap {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.rating {
  --stars: "★★★★★";
  --star-size: 1.25rem;      /* tweak star size */
  --star-gap: 0.1em;         /* spacing between stars */
  --star-empty: #e5e7eb;     /* gray (empty) */
  --star-fill:  #f59e0b;     /* amber (filled) */
  --rating: 0;               /* 0–5 (set inline) */
  position: relative;
  display: inline-block;
  font-size: var(--star-size);
  line-height: 1;
  letter-spacing: var(--star-gap);
}

/* base (empty) stars */
.rating::before {
  content: var(--stars);
  color: var(--star-empty);
}

/* filled overlay, clipped by percentage from --rating (0–5) */
.rating::after {
  content: var(--stars);
  color: var(--star-fill);
  position: absolute;
  left: 0;
  top: 0;
  width: calc((var(--rating) / 5) * 100%);
  overflow: hidden;
  white-space: nowrap;
}

/* smaller, de-emphasized numeric label next to stars */
.rating-number {
  font-size: .875rem;
  color: #6b7280; /* neutral-500 */
}