/* compare-b.css
   Hammer & Pixel, comparison pages B (freelancer, Revampify).
   Everything is scoped under body.compare-page-b so it cannot leak.

   The shared .cmp-* classes (.cmp-table, .cmp-row, .cmp-verdict, .cmp-pro,
   .cmp-con) belong to compare.css. The fallbacks below are written inside
   :where(), which has zero specificity, so if compare.css defines the same
   class its rules win outright and these only apply when it does not.

   British English. No long dashes in this file. */

/* ---------- tokens, local ---------- */

body.compare-page-b {
  --cb-ground: #f3f3f1;
  --cb-ground-alt: #eceae6;
  --cb-card: #fcfcfb;
  --cb-ink: #181818;
  --cb-muted: #54524e;
  --cb-line: #e0ddd7;
  --cb-yellow: #f5c842;
  --cb-accent: #8a5200;
}

/* ---------- fallbacks for the shared compare classes ---------- */

body.compare-page-b :where(.cmp-table) {
  width: 100%;
  border-collapse: collapse;
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}

body.compare-page-b :where(.cmp-table th),
body.compare-page-b :where(.cmp-table td) {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cb-line);
  vertical-align: top;
  color: var(--cb-ink);
}

body.compare-page-b :where(.cmp-table th) {
  font-weight: 650;
  background: var(--cb-ground-alt);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

body.compare-page-b :where(.cmp-row:last-child td) { border-bottom: 0; }

body.compare-page-b :where(.cmp-verdict) {
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  border-left: 4px solid var(--cb-yellow);
  border-radius: 14px;
  padding: 22px 24px;
}

body.compare-page-b :where(.cmp-pro),
body.compare-page-b :where(.cmp-con) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

body.compare-page-b :where(.cmp-pro) { color: #1f6b3a; }
body.compare-page-b :where(.cmp-con) { color: #8a3a1f; }

/* ---------- things compare.css does not carry ---------- */

/* The table needs to survive a 375px phone. One scroll container, and the
   first column stays readable. */
body.compare-page-b .cb-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  margin-top: 20px;
}

body.compare-page-b .cb-scroll .cmp-table { min-width: 620px; }

body.compare-page-b .cb-scroll .cmp-table th:first-child,
body.compare-page-b .cb-scroll .cmp-table td:first-child {
  width: 34%;
  font-weight: 600;
}

body.compare-page-b .cb-note {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cb-muted);
}

/* Verdict card internals. */
body.compare-page-b .cmp-verdict h3 {
  margin: 0 0 10px;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--cb-ink);
}

body.compare-page-b .cmp-verdict p {
  margin: 0 0 12px;
  color: var(--cb-muted);
  line-height: 1.7;
}

body.compare-page-b .cmp-verdict p:last-child { margin-bottom: 0; }

body.compare-page-b .cb-verdicts {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 22px;
}

/* The side by side "ahead" columns. */
body.compare-page-b .cb-two {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 22px;
}

body.compare-page-b .cb-panel {
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  padding: 22px 24px;
}

body.compare-page-b .cb-panel h3 {
  margin: 0 0 6px;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--cb-ink);
}

body.compare-page-b .cb-panel .cb-who {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cb-accent);
}

body.compare-page-b .cb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.compare-page-b .cb-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 12px;
  line-height: 1.65;
  color: var(--cb-muted);
}

body.compare-page-b .cb-list li:last-child { margin-bottom: 0; }

body.compare-page-b .cb-list li svg {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  color: var(--cb-accent);
}

body.compare-page-b .cb-list li strong { color: var(--cb-ink); }

/* Questions to ask, numbered. */
body.compare-page-b .cb-asks {
  counter-reset: cb;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

body.compare-page-b .cb-asks li {
  counter-increment: cb;
  position: relative;
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  padding: 16px 18px 16px 50px;
  line-height: 1.6;
  color: var(--cb-ink);
}

body.compare-page-b .cb-asks li::before {
  content: counter(cb);
  position: absolute;
  left: 16px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--cb-yellow);
  color: #181818;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Sources block. Every third party fact on these pages links out from here. */
body.compare-page-b .cb-sources {
  margin-top: 26px;
  background: var(--cb-ground-alt);
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  padding: 20px 22px;
}

body.compare-page-b .cb-sources h3 {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

body.compare-page-b .cb-sources ol {
  margin: 12px 0 0;
  padding-left: 20px;
}

body.compare-page-b .cb-sources li {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cb-muted);
  word-break: break-word;
}

body.compare-page-b .cb-sources li:last-child { margin-bottom: 0; }

body.compare-page-b .cb-sources a { color: var(--cb-accent); }

/* FAQ. */
body.compare-page-b .cb-faq { margin-top: 22px; }

body.compare-page-b .cb-faq details {
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

body.compare-page-b .cb-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 18px;
  position: relative;
  font-weight: 600;
  color: var(--cb-ink);
  line-height: 1.5;
  min-height: 24px;
}

body.compare-page-b .cb-faq summary::-webkit-details-marker { display: none; }

body.compare-page-b .cb-faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cb-accent);
  border-bottom: 2px solid var(--cb-accent);
  transform: rotate(45deg);
  transition: transform .18s ease;
}

body.compare-page-b .cb-faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 26px;
}

body.compare-page-b .cb-faq .cb-a {
  padding: 0 18px 18px;
  color: var(--cb-muted);
  line-height: 1.7;
}

body.compare-page-b .cb-faq .cb-a p { margin: 0 0 10px; }
body.compare-page-b .cb-faq .cb-a p:last-child { margin-bottom: 0; }

/* Offer block. */
body.compare-page-b .cb-offer {
  margin-top: 22px;
  background: var(--cb-card);
  border: 1px solid var(--cb-line);
  border-radius: 16px;
  padding: 26px 24px;
}

body.compare-page-b .cb-offer h2 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -.015em;
}

body.compare-page-b .cb-offer .cb-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 20px;
}

body.compare-page-b .cb-offer .cb-grid div {
  background: var(--cb-ground);
  border: 1px solid var(--cb-line);
  border-radius: 12px;
  padding: 16px 18px;
}

body.compare-page-b .cb-offer .cb-grid b {
  display: block;
  margin-bottom: 4px;
  color: var(--cb-ink);
  font-size: 15px;
}

body.compare-page-b .cb-offer .cb-grid span {
  color: var(--cb-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Breadcrumb line back to the comparison index. */
body.compare-page-b .cb-crumb {
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
}

body.compare-page-b .cb-crumb a { color: var(--cb-yellow); }

@media (max-width: 640px) {
  body.compare-page-b .cb-offer,
  body.compare-page-b .cb-panel,
  body.compare-page-b .cmp-verdict,
  body.compare-page-b .cb-sources { padding: 18px 16px; }

  body.compare-page-b .cb-offer h2 { font-size: 21px; }
}

/* The header screenshot beside the words. Added with the image wiring,
   15 September 2026. */
.compare-page-b .phead-two{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:1.8rem;align-items:center;
}
.compare-page-b .phead-words{min-width:0}
.compare-page-b .phead-shot{
  margin:0;border-radius:14px;overflow:hidden;background:#111;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 40px rgba(0,0,0,.34);
}
.compare-page-b .phead-shot img{display:block;width:100%;height:auto}
@media (max-width:860px){
  .compare-page-b .phead-two{grid-template-columns:1fr;gap:1.1rem}
  .compare-page-b .phead-shot{max-width:28rem}
}