/* ============================================================
   The 7 R's page — page-specific polish.
   Foundation styles live in css/styles.css; this file only adds
   the intro "quick compare" strip and small meter refinements.
   ============================================================ */

/* Compact quick-compare strip: the 7 Rs at a glance, low → high effort. */
.r-compare{
  list-style:none;
  margin:18px 0 6px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:8px;
}
.r-compare li{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:9px 11px 9px 13px;
  overflow:hidden;
}
/* A subtle "effort ramp" tint from cool/cheap to warm/expensive. */
.r-compare li::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--sky);
}
.r-compare li:nth-child(1)::before{ background:var(--clay); }
.r-compare li:nth-child(2)::before{ background:var(--slate); }
.r-compare li:nth-child(3)::before{ background:var(--sky); }
.r-compare li:nth-child(4)::before{ background:var(--moss); }
.r-compare li:nth-child(5)::before{ background:var(--plum); }
.r-compare li:nth-child(6)::before{ background:var(--sky-deep); }
.r-compare li:nth-child(7)::before{ background:var(--amber); }
.r-compare li b{
  display:block;
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.72rem;
  color:var(--ink);
}
.r-compare li span{
  display:block;
  margin-top:2px;
  font-size:.74rem;
  line-height:1.35;
  color:var(--ink-soft);
}

/* Meter heads: show the effort/payoff rating word beside each bar. */
.r-detail .meter-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.r-detail .meter-head b{
  font-weight:normal;
  font-size:.66rem;
  letter-spacing:.02em;
  color:var(--ink);
}