/* ============================================================================
   MediByte — Credibility layer
   rating · social proof · comparison matrix · testimonials · FAQ
   (Quotes / ratings / counts are PLACEHOLDERS — replace with real data.)
   ========================================================================== */

/* ---- stars ---- */
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 1em; height: 1em; }

/* ---- inline rating chip (hero) ---- */
.ratingchip { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink-2); }
.ratingchip b { color: var(--ink); font-weight: 600; }
.ratingchip .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* ============================================================================
   SOCIAL PROOF BAND
   ========================================================================== */
.proof { background: linear-gradient(180deg, var(--surface-2), transparent); border-block: 1px solid var(--line); }
.proof__inner { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: clamp(20px,3vw,40px); align-items: center; }
.proof__rate { display: flex; flex-direction: column; gap: 8px; }
.proof__rate .stars { font-size: 1.25rem; }
.proof__rate b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -.03em; }
.proof__rate span { font-size: .86rem; color: var(--ink-3); }
.proof__stat { text-align: left; }
.proof__stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem,2.8vw,2.4rem); letter-spacing: -.04em; line-height: 1; color: var(--blue-deep); }
.proof__stat span { font-size: .86rem; color: var(--ink-3); margin-top: 6px; display: block; }
@media (max-width: 800px) { .proof__inner { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* ============================================================================
   COMPARISON MATRIX
   ========================================================================== */
.cmp { max-width: 940px; margin: clamp(34px,5vw,52px) auto 0; }
.cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp__table th, .cmp__table td { padding: 16px clamp(14px,2vw,22px); text-align: left; vertical-align: middle; }
.cmp__table thead th { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.cmp__table thead th:nth-child(2) { text-align: center; }
.cmp__table thead th:nth-child(3) { text-align: center; color: var(--blue-deep); }
.cmp__feat { font-weight: 500; color: var(--ink); font-size: .98rem; }
.cmp__cell { text-align: center; }
.cmp__table tbody tr { border-radius: 10px; }
.cmp__table tbody td { border-top: 1px solid var(--line); }
/* highlighted MediByte column */
.cmp__me { position: relative; }
.cmp__table thead .cmp__me, .cmp__table tbody .cmp__me {
  background: linear-gradient(180deg, rgba(26,91,255,.06), rgba(26,91,255,.03));
}
.cmp__table thead .cmp__me { border-radius: 14px 14px 0 0; box-shadow: inset 0 0 0 1px rgba(26,91,255,.16); }
.cmp__table thead .cmp__me b { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.02em; color: var(--blue-deep); text-transform: none; }
.cmp__table tbody tr:last-child .cmp__me { border-radius: 0 0 14px 14px; }
.cmp__yes { color: var(--green); }
.cmp__no { color: var(--ink-4); }
.cmp__partial { color: var(--gold); }
.cmp__ico { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.cmp__note { margin-top: 18px; text-align: center; font-size: .86rem; color: var(--ink-3); }
.cmp__note b { color: var(--ink); }
@media (max-width: 680px) {
  .cmp__table th, .cmp__table td { padding: 12px 8px; }
  .cmp__feat { font-size: .9rem; }
  .cmp__table thead th { font-size: .64rem; }
}

/* ============================================================================
   TESTIMONIALS
   ========================================================================== */
.tm__wall { columns: 3 300px; column-gap: clamp(14px,1.8vw,20px); margin-top: clamp(34px,5vw,52px); }
.tm {
  break-inside: avoid;
  margin-bottom: clamp(14px,1.8vw,20px);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(20px,2.4vw,28px);
  box-shadow: var(--sh-sm), var(--ring-hair);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.tm:hover { transform: translateY(-4px); box-shadow: var(--sh-lg), var(--ring-hair); }
.tm .stars { font-size: 1rem; margin-bottom: 14px; }
.tm__quote { font-size: 1.02rem; line-height: 1.55; color: var(--ink); letter-spacing: -.01em; }
.tm__quote b { font-weight: 600; }
.tm__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.tm__av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .95rem; font-family: var(--font-display); }
.tm__name { font-weight: 600; font-size: .94rem; line-height: 1.2; }
.tm__role { font-size: .82rem; color: var(--ink-3); }
.tm--feature { background: linear-gradient(160deg, var(--blue), var(--blue-deep)); color: #fff; }
.tm--feature .tm__quote { color: #fff; font-size: 1.18rem; line-height: 1.5; }
.tm--feature .tm__role { color: rgba(255,255,255,.78); }
.tm--feature .stars { color: #fff; }
.tm--feature .tm__av { background: rgba(255,255,255,.2) !important; }
@media (max-width: 680px) { .tm__wall { columns: 1; } }

/* ============================================================================
   FAQ (native <details>, no JS)
   ========================================================================== */
.faq { max-width: 800px; margin: clamp(30px,4vw,46px) auto 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(18px,2.4vw,24px) 44px clamp(18px,2.4vw,24px) 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem,1.5vw,1.22rem);
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blue-deep); }
.faq__item summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .35s var(--ease-out);
}
.faq__item[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.faq__item[open] summary { color: var(--blue-deep); }
.faq__a { padding: 0 44px clamp(20px,2.4vw,24px) 0; color: var(--ink-2); line-height: 1.65; font-size: 1rem; max-width: 64ch; }
.faq__a b { color: var(--ink); font-weight: 600; }
.faq__item[open] .faq__a { animation: faqIn .4s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .faq__a { animation: none; } }
.faq__more { text-align: center; margin-top: clamp(28px,4vw,40px); color: var(--ink-3); font-size: .95rem; }