/* Quota rules page extras, loaded after pages.css */
.qr-kicker { margin: 0 auto 18px; font-family: var(--mono); font-size: 13px; color: var(--mint); }
.qr-hero-shot { max-width: 820px; }
.qr-hero-shot img { -webkit-mask-image: none; mask-image: none; border-radius: 14px; }
.qr-ic { display: block; width: 53px; height: 53px; margin-bottom: 26px; border-radius: 12px; }
.frame video { aspect-ratio: auto; background: var(--bg-1); }
.final .fine { text-align: center; }
/* statement banners: "Enforced at ingestion" and the TCO Optimizer pairing */
.qr-statement { max-width: 860px; margin: 0 auto; text-align: center; }
.qr-statement h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 560; }
.qr-statement p { max-width: 720px; margin: 26px auto 0; font-size: 18px; line-height: 1.7; color: var(--fg-2); }
.qr-callout { padding: 64px 56px; border-color: rgba(19,233,137,.28); background: radial-gradient(80% 120% at 0% 0%, rgba(19,233,137,.09), transparent 60%), linear-gradient(180deg, var(--card-a), var(--card-b)); }
.qr-callout .qr-statement { max-width: 780px; }
.qr-callout h2 { font-size: clamp(28px, 3.4vw, 44px); }
.qr-callout .eyebrow { display: inline-block; margin-bottom: 20px; }
/* final CTA stats: the number leads, the label follows */
.qr-facts span { font-family: inherit; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; text-transform: none; color: var(--accent); }
.qr-facts b { margin-top: 12px; font-size: 15px; color: var(--fg-2); }
@media (max-width: 960px) {
  .qr-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
}
@media (max-width: 560px) {
  .qr-callout { padding: 40px 24px; }
  .qr-statement p { font-size: 16.5px; }
  .qr-facts { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
  .qr-hero-shot img { border-radius: 10px; }
  .qr-kicker { font-size: 11.5px; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] /* final CTA stats: the number leads,
:root[data-theme="light"] the label follows */
.qr-facts span { color: var(--mint); }