.fq-capacity {
    --capacity-accent: #a77f35;
    --capacity-paper: #f4efe5;
    --capacity-ink: #302d26;
    display: grid;
    grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(22px, 5vw, 80px);
    padding: clamp(28px, 4vw, 58px) clamp(22px, 6vw, 100px);
    border-block: 1px solid #b7a98c66;
    background: var(--capacity-paper);
    color: var(--capacity-ink);
}
.fq-capacity-mesele { --capacity-accent: #a36047; --capacity-paper: #f0e5d5; }
.fq-capacity-fiqron { --capacity-accent: #397958; --capacity-paper: #e9eee7; }
.fq-capacity .fq-capacity-kicker { font: 550 11px/1.4 var(--mono); letter-spacing: .055em; }
.fq-capacity .fq-capacity-percent { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; color: var(--capacity-accent); }
.fq-capacity-percent > span { font: 400 26px/1 var(--serif); }
.fq-capacity-percent > strong { font: 400 clamp(54px, 6.2vw, 90px)/.95 var(--serif); letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.fq-capacity-percent > small { font: 400 13px/1.4 var(--sans); margin-left: 5px; color: var(--capacity-ink); }
.fq-capacity-metrics, .fq-capacity-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 22px; }
.fq-capacity-metrics { font: 400 14px/1.5 var(--sans); }
.fq-capacity-metrics b { font-size: 23px; font-weight: 550; font-variant-numeric: tabular-nums; }
.fq-capacity-track { height: 26px; margin: 18px 0 14px; background: #8d877326; overflow: hidden; mask-image: repeating-linear-gradient(90deg,#000 0 calc(2.5% - 3px),transparent calc(2.5% - 3px) 2.5%); }
.fq-capacity-track i { display: block; width: 100%; height: 100%; background: var(--capacity-accent); transform-origin: left; transform: scaleX(var(--capacity-ratio)); }
.fq-capacity.is-waiting .fq-capacity-track i { transform: scaleX(0); }
.fq-capacity.is-counting .fq-capacity-track i { transition: transform 1.15s cubic-bezier(.16,.75,.25,1); }
.fq-capacity-caption { font: 400 13px/1.5 var(--sans); }
.fq-capacity-caption b { font-weight: 650; }
.fq-capacity-caption small { font-size: 10px; opacity: .75; }
.folio-body > .fq-capacity { margin-bottom: 48px; }
@media(max-width:600px) {
    .fq-capacity { grid-template-columns: 1fr; gap: 22px; }
    .fq-capacity-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .fq-capacity .fq-capacity-percent { margin-top: 0; }
    .fq-capacity-percent > strong { font-size: 50px; }
    .fq-capacity-percent > span { font-size: 20px; }
    .fq-capacity-metrics { font-size: 12px; }
    .fq-capacity-metrics b { font-size: 20px; }
}
@media(prefers-reduced-motion:reduce) {
    .fq-capacity .fq-capacity-track i { transition: none !important; transform: scaleX(var(--capacity-ratio)) !important; }
}
