/* =========================================================================
   credibility-bar — LOCKED component. v1.0 base + v1.2 `density` variant.
   Class-based port of CredibilityBar. Sources from webshield-navy.css.

   Shape: prospectus cover line. Big gold numeral, navy label, small muted
   "source" line. Hairline top+bottom rules + between-cell dividers so the
   row reads continuous, not as four cards.

   Variants:
     • .ws-credibility-bar            (regular — v1.0 default, 56/48/48 outer)
     • .ws-credibility-bar--tight     (v1.2 — 40/48/36 outer, 22/24/20 cell,
                                       18px eyebrow gap; for pages where the
                                       §8.12 two-swipe test requires density)

   The home page uses .ws-credibility-bar--tight.

   Usage:
     <section class="ws-credibility-bar ws-credibility-bar--tight">
       <div class="ws-credibility-bar__wrap">
         <div class="ws-credibility-bar__eyebrow">The patent moat, in numbers.</div>
         <div class="ws-credibility-bar__grid">
           <a class="ws-credibility-bar__cell" href="…">
             <div class="ws-credibility-bar__numeral">7</div>
             <div class="ws-credibility-bar__unit">patents</div>
             <div class="ws-credibility-bar__src">patents#portfolio →</div>
           </a>
           <!-- 3 more cells; use .ws-credibility-bar__numeral--tight for the
                long "US 12,316,610 B1" patent-number numeral -->
         </div>
       </div>
     </section>
   ========================================================================= */

.ws-credibility-bar {
  background: var(--ws-surface);
}

.ws-credibility-bar__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px 48px;        /* regular (v1.0) */
}

.ws-credibility-bar--tight .ws-credibility-bar__wrap {
  padding: 40px 48px 36px;        /* tight (v1.2) */
}

.ws-credibility-bar__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-ink-faint);
  font-weight: 500;
  margin-bottom: 28px;            /* regular */
}

.ws-credibility-bar--tight .ws-credibility-bar__eyebrow {
  margin-bottom: 18px;            /* tight */
}

.ws-credibility-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ws-rule);
  border-bottom: 1px solid var(--ws-rule);
}

.ws-credibility-bar__cell {
  display: block;
  padding: 28px 24px 24px;        /* regular */
  border-left: 1px solid var(--ws-rule);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
  font-family: var(--ws-font-body);
}

.ws-credibility-bar--tight .ws-credibility-bar__cell {
  padding: 22px 24px 20px;        /* tight */
}

.ws-credibility-bar__cell:first-child {
  border-left: none;
}

.ws-credibility-bar__cell:hover,
.ws-credibility-bar__cell:focus-visible {
  background: var(--ws-surface-2);
  outline: none;
}

.ws-credibility-bar__numeral {
  font-family: var(--ws-font-display);
  font-size: 52px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ws-accent);
  margin-bottom: 10px;
  font-variant-numeric: lining-nums tabular-nums;
}

/* For long numerals (e.g. a full patent number) — shrinks so the cell
   still balances against the big gold "7" and "1,369" neighbors. */
.ws-credibility-bar__numeral--tight {
  font-size: 26px;
  margin-bottom: 8px;
}

.ws-credibility-bar__unit {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ws-ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.ws-credibility-bar__src {
  font-family: var(--ws-font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ws-credibility-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ws-credibility-bar__cell:nth-child(3) {
    border-left: none;
    border-top: 1px solid var(--ws-rule);
  }
  .ws-credibility-bar__cell:nth-child(4) {
    border-top: 1px solid var(--ws-rule);
  }
}

@media (max-width: 560px) {
  .ws-credibility-bar__grid {
    grid-template-columns: 1fr;
  }
  .ws-credibility-bar__cell {
    border-left: none;
    border-top: 1px solid var(--ws-rule);
  }
  .ws-credibility-bar__cell:first-child {
    border-top: none;
  }
}