/* ==========================================================================
   reputation-software.css — /reputation-management-software (the category
   page). Loads after feature-v2, feature-v3, show.css and home.css.
   Four blocks: the hero moment (the text, the review it earned, the scorecard
   chip), the needs picker (checkboxes beside one plan panel, four panels
   stacked in one grid cell), the two ported screens, and the section rhythm.
   Nothing in a mock is under 13px. Muted text is #5b6076 or darker on a tint
   and #6b7088 or darker on white.
   ========================================================================== */

/* ---------- section rhythm ---------- */
.rs-page .rs-sec-pick { padding-top: 0; padding-bottom: clamp(56px, 6vw, 80px); }
.rs-page .rs-sec-plan, .rs-page .rs-sec-ways { padding-top: clamp(44px, 4.5vw, 64px); }
.rs-page .rs-sec-cards { padding-top: clamp(36px, 4vw, 52px); }
.rs-page .rs-sec-faq { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.rs-page .tq-section { padding: clamp(44px, 4.5vw, 68px) 0; }
.rs-page .tq blockquote { margin: 0; }
.rs-page .closing { padding-top: clamp(20px, 2.5vw, 36px); }
.rs-page .rs-head { max-width: 760px; margin: 0 0 36px; }
.rs-page .rs-head .sub { margin-inline: 0; }
.rs-page .ways { margin-top: 0; }
.rs-page .plan { margin-top: 0; }

/* ---------- shared atoms ---------- */
.rs-avv { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #5a49d6, #6a5ae0); color: #fff; font: 700 13px/1 var(--font-display); letter-spacing: .01em; }
.rs-stars { display: inline-flex; gap: 1px; vertical-align: -1px; font-size: 13px; line-height: 1; }
.rs-stars i { font-style: normal; color: #e2951f; }
.rs-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f1f2f7; color: #5c6178; font: 600 13px/1.35 var(--font-display); font-style: normal; white-space: nowrap; }
.rs-pill.is-ok { background: #e9f4ec; color: #226b3c; }
.rs-pill.is-crit { background: #ffe9ef; color: #b0143c; }

/* ---------- hero: the text, the review, the chip ---------- */
.rs-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.rs-page .hero-moment .moment { max-width: 440px; gap: 14px; }
.rs-page .m-from { font-size: 13px; }
.rs-page .m-sms p { font: 400 15.5px/1.55 var(--font-body); color: var(--ink); }
.rs-link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.rs-rev-h { display: flex; align-items: center; gap: 10px; }
.rs-rev-h > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.rs-rev-h b { font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.rs-rev blockquote { margin: 10px 0 0; font: 400 15.5px/1.55 var(--font-body); color: var(--ink); }
.rs-draft { display: inline-block; margin-top: 12px; padding: 6px 10px; border-radius: 8px; background: #eef2ff; color: var(--blue); font: 600 13px/1.3 var(--font-display); }
.rs-page .m-chip { font-weight: 600; }
@media (min-width: 992px) {
  .rs-page .pp--tl { left: -13%; top: -6%; }
  .rs-page .pp--br { right: -12%; bottom: -5%; }
}

/* ---------- the needs picker ---------- */
.rs-pick { display: grid; grid-template-columns: minmax(320px, 1.25fr) minmax(260px, .75fr); gap: 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); padding: 20px; }
.rs-needs { display: grid; gap: 6px; align-content: start; }
.rs-need { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); cursor: pointer; transition: box-shadow .22s var(--ease-out), background-color .22s var(--ease-out); }
.rs-need:hover { box-shadow: inset 0 0 0 1px #b9bfd2; }
.rs-need.is-on { background: #f0f4ff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.rs-need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rs-need:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.no-motion .rs-need { transition: none; }
.rs-box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #b9bfd2; color: #fff; font: 700 12px/1 var(--font-display); }
.rs-need.is-on .rs-box { background: var(--blue); box-shadow: none; }
.rs-need.is-on .rs-box::after { content: '✓'; }
.rs-need-t { display: grid; gap: 1px; min-width: 0; }
.rs-need-t b { font: 600 14px/1.4 var(--font-display); color: var(--ink); }
.rs-need-t span { font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.rs-tier { font: 600 13px/1.3 var(--font-display); font-style: normal; color: #5b6076; white-space: nowrap; }
.rs-need.is-on .rs-tier { color: var(--blue); }
.rs-out { display: grid; align-self: start; position: sticky; top: 88px; align-content: start; gap: 10px; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: #fff; }
.rs-out-l { font: 600 13px/1.4 var(--font-display); color: rgba(255, 255, 255, .72); }
.rs-out > .rs-plan { grid-row: 2; grid-column: 1; visibility: hidden; opacity: 0; transition: opacity .28s var(--ease-out); }
.rs-out > .rs-plan.is-on { visibility: visible; opacity: 1; }
.no-motion .rs-plan { transition: none; }
.rs-plan b { display: block; font: 500 clamp(30px, 3vw, 40px)/1.05 var(--font-serif); letter-spacing: -.015em; color: #fff; }
.rs-price { display: block; margin-top: 10px; font: 600 22px/1.2 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.rs-price small { font: 400 14px/1.4 var(--font-body); color: rgba(255, 255, 255, .78); }
.rs-price--ent { font-size: 18px; }
.rs-plan p { margin: 10px 0 0; max-width: 30ch; font: 400 14.5px/1.55 var(--font-body); color: rgba(255, 255, 255, .82); }
.rs-out-note { grid-row: 3; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font: 400 13px/1.5 var(--font-body); color: rgba(255, 255, 255, .72); }
.rs-out-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the two screens ---------- */
.rs-page .card > p a, .rs-more a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rs-page .card > p a:hover, .rs-more a:hover { color: var(--ink); }
.rs-page .card > p a { white-space: nowrap; }
.rs-shot { padding: 14px 14px 18px; }
.rs-shot-t { margin: 0 0 10px; font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }
.rs-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--v2-card); }
.rs-row + .rs-row { margin-top: 6px; }
.rs-row-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.rs-row-t b { font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }
.rs-row-t span { font: 400 13px/1.35 var(--font-body); color: #5b6076; }
.rs-loc { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--v2-card); font: 500 13.5px/1.3 var(--font-display); color: var(--ink); }
.rs-loc + .rs-loc { margin-top: 6px; }
.rs-loc > b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); font: 700 13px/1 var(--font-display); color: #4a5065; }
.rs-loc-n { flex: 1; font-weight: 600; }
.rs-loc-r, .rs-loc-c { font-variant-numeric: tabular-nums; color: #4a5065; }
.rs-loc-r i { font-style: normal; font-weight: 700; font-size: 13px; }
.rs-loc-r i.is-up { color: #226b3c; }
.rs-loc-r i.is-down { color: #b0143c; }
.rs-more { margin-top: 26px; max-width: 78ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .rs-page .hero-moment { justify-content: center; }
  .rs-pick { grid-template-columns: 1fr; }
  .rs-page .plan { grid-template-columns: 1fr 1fr; }
  .rs-page .plan::before { display: none; }
}
@media (max-width: 760px) {
  .rs-page .cards, .rs-page .plan { grid-template-columns: 1fr; }
  .rs-page .ways { grid-template-columns: 1fr; }
  .rs-page .way + .way { border-left: 0; border-top: 1px solid var(--v2-line); }
  .rs-need { grid-template-columns: 22px 1fr; }
  .rs-tier { grid-column: 2; justify-self: start; }
  .rs-loc-c { display: none; }
}