/* ============================================================
   SaleinZ — home-rating.css (main page specific styles)
   ============================================================ */

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--c-divider); }
.hero .hero-inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 2.5rem 1rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .hero .hero-inner { grid-template-columns: 1.1fr .9fr; align-items: center; }
  h1 { font-size: 2.1rem; }
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  color: var(--c-muted);
  font-size: .88rem;
  margin: 1rem 0 1.4rem;
}
.trust-row span { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- Icon trio strip ---------- */
.trio { display: grid; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio .trio-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.trio .icon-lg { color: var(--c-heading); }
.trio strong { color: var(--c-heading); font-size: 1.05rem; }
.trio p { margin: 0; color: var(--c-muted); font-size: .92rem; max-width: 28ch; }

/* ---------- Criteria grid ---------- */
.criteria-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .criteria-grid { grid-template-columns: repeat(2, 1fr); } }
.criterion { display: flex; gap: .9rem; align-items: flex-start; }
.criterion .icon-lg { color: var(--c-accent); width: 30px; height: 30px; margin-top: .15rem; }
.criterion .weight { color: var(--c-accent); font-weight: 800; font-size: .9rem; }
.criterion p { margin: .15rem 0 0; font-size: .9rem; color: var(--c-muted); }

/* ---------- Rating table ---------- */
.rank-col { font-weight: 800; color: var(--c-heading); width: 2.2rem; }
.score { font-weight: 800; color: var(--c-heading); white-space: nowrap; }
.badge {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-white);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 3px;
  padding: .15rem .45rem;
  margin-left: .5rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .03em;
}
tr.winner td { background: #fdf1e8; border-bottom-color: var(--c-accent); }
.methodology-note { font-size: .85rem; color: var(--c-muted); margin-top: .6rem; }

/* ---------- Featured review ---------- */
.score-bars { list-style: none; margin: 1.2rem 0; padding: 0; }
.score-bars li { display: grid; grid-template-columns: 1fr 3rem; align-items: center; gap: .6rem; margin-bottom: .55rem; font-size: .9rem; }
.score-bars .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--c-divider); position: relative; }
.score-bars .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--c-accent); }
.review-cta { margin-top: 1.4rem; }

/* ---------- Category sections ---------- */
.category { border-bottom: 1px solid var(--c-divider); padding: 1.8rem 0; }
.category:last-child { border-bottom: 0; }
.card-grid { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
.app-card h4 { margin-bottom: .35rem; }
.app-card .attr-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  font-size: .82rem;
  color: var(--c-muted);
  margin: .6rem 0 .4rem;
}
.app-card .attr-row span { display: inline-flex; align-items: center; gap: .3rem; }
.app-card .site-link { font-size: .88rem; }

/* ---------- Buyer's guide ---------- */
.guide p strong { color: var(--c-heading); }

/* ---------- Final CTA banner ---------- */
.cta-banner {
  background: var(--c-dark);
  color: var(--c-white);
  text-align: center;
  border-bottom: 0;
  padding: 3rem 0;
}
.cta-banner h2 { color: var(--c-white); font-size: 1.6rem; }
.cta-banner p { color: #c8cdd3; max-width: 46ch; margin: 0 auto 1.4rem; }