/**
 * Closo Wholesale — referral program page (/wholesale/refer, stream C
 * 2026-08-19). `wref-` prefix, loaded ONLY by that document, AFTER
 * wholesale-market-landing.css, via the chrome's meta['css'] hook.
 *
 * This sheet is deliberately SMALL. The page wears the approved landing
 * vocabulary (`wml-` hero, stats strip, 64px hairline sections, split panels,
 * numbered timeline, icon-chip columns, FAQ accordion, brand closing band) —
 * same tokens, same type scale, same rhythm: #452B90 accent · #1A202C ink ·
 * #556070 muted · #E4E2EE hairlines · #FAFAFC panel bg · Poppins display /
 * Inter text / JetBrains Mono numbers. Everything here is the delta the
 * program page needs and no sibling has: the amount-free terms block and the
 * ceiling caveat.
 *
 * ⛔ LINK COLOURS RIDE :where(), ALWAYS. A page-level `a { color: inherit }`
 * at ordinary specificity has already beaten .wm-btn-solid's white once on
 * this surface and left CTA text invisible until hover. :where() contributes
 * ZERO specificity, so component colours always win. The standalone suite
 * resolves the cascade for the real CTA element and turns red the moment a
 * rule in here outranks it.
 *
 * Layout rule: every grid track is minmax(0, 1fr) and the page body must never
 * scroll horizontally — wide content wraps or stacks (360px-first).
 */

/* [hidden] must beat any display the classes below set (the surface's known
 * display-beats-hidden defect class — the .wmb-suggest lesson). */
.wref [hidden] { display: none !important; }

:where(.wref) a { color: inherit; } /* zero specificity — see the ⛔ note above */

/* ── the ceiling caveat — muted, but not fine print ─────────────────────── */
.wml .wref-ceiling {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px solid #452B90;
  border-radius: 0 10px 10px 0;
  background: #FAFAFC;
  font-size: 14.5px;
  line-height: 1.6;
  color: #1A202C;
}

/* ── terms — amount-free clauses, numbered like a contract ──────────────── */
.wref-terms-list {
  counter-reset: wref-clause;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.wref-terms-list > li {
  counter-increment: wref-clause;
  position: relative;
  background: #fff;
  border: 1px solid #E4E2EE;
  border-radius: 14px;
  padding: 22px 24px 22px 62px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
.wref-terms-list > li::before {
  content: counter(wref-clause, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 22px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  color: #452B90;
}
.wref-terms-list h3 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  margin: 0 0 7px;
  color: #1A202C;
}
.wref-terms-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #556070;
  max-width: none;
}

/* ── responsive: 360px-first, no horizontal scroll ──────────────────────── */
@media (max-width: 860px) {
  .wref-terms-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .wml .wref-ceiling { padding: 12px 14px; font-size: 13.5px; }
  .wref-terms-list { margin-top: 20px; }
  .wref-terms-list > li { padding: 18px 18px 18px 18px; border-radius: 12px; }
  .wref-terms-list > li::before { position: static; display: block; margin-bottom: 8px; }
}