/* Spectra: reach (js/reach.js). The visitor and social numbers, on the landing (after the finale mark, before the FAQ)
   and on About (after the facts). Type and hairlines, no cards. On first view each hairline draws in the spectrum,
   then settles grey, while its number counts up. The numbers in the HTML are the final values (no-JS, SEO, reduced motion). */
.rc{max-width:var(--wrap);margin:0 auto;padding:clamp(72px,11vh,120px) calc(var(--gut) + var(--sar)) clamp(24px,4vh,48px) calc(var(--gut) + var(--sal))}
.rc-h{margin:0;max-width:18ch;font-family:var(--sans);font-weight:300;font-size:var(--fs-2);line-height:1.02;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rc-h b{font-weight:600;font-variant-numeric:tabular-nums}
.rc-sub{margin:clamp(14px,2.2vh,22px) 0 0;color:var(--soft);font-size:clamp(17px,1.5vw,20px);line-height:1.45}
.rc-list{list-style:none;margin:clamp(40px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vh,48px) clamp(20px,3vw,48px)}
.rc-i{position:relative;padding-top:clamp(18px,2.6vh,26px)}
.rc-i::before,.rc-i::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;transform-origin:left}
.rc-i::before{background:var(--line)}
.rc-i::after{background:var(--spectrum);opacity:0}
.rc-n{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(52px,7.4vw,124px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.rc-u{font-size:.4em;font-weight:400;letter-spacing:0;margin-left:.1em;color:var(--soft)}
.rc-t{margin:12px 0 0;max-width:24ch;color:var(--soft);font-size:clamp(16px,1.25vw,18px);line-height:1.45}
.rc-end{margin:clamp(48px,8vh,80px) 0 0;padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--line);max-width:34ch;
  font-family:var(--sans);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.3;color:var(--ink);text-wrap:balance}
.rc-end span{color:var(--soft)}
@media (max-width:640px){.rc-list{grid-template-columns:1fr}.rc-n{font-size:clamp(52px,17vw,76px)}}
@media (prefers-reduced-motion:no-preference){
  .rc.arm .rc-i::before{transform:scaleX(0)}
  .rc.arm .rc-n,.rc.arm .rc-t{opacity:0;transform:translateY(14px)}
  .rc.arm .rc-i.on::before{transform:scaleX(1);transition:transform 1s var(--ease) .5s}
  .rc.arm .rc-i.on::after{animation:rc-ray 1.5s var(--ease) both}
  .rc.arm .rc-i.on .rc-n,.rc.arm .rc-i.on .rc-t{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease)}
  .rc.arm .rc-i.on .rc-t{transition-delay:.15s}
  @keyframes rc-ray{0%{opacity:1;transform:scaleX(0)}55%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
}
/* hover: a band of the spectrum passes through the digits and they settle white again; the stat's hairline lights up */
.rc-h b,.rc-n [data-n]{background:linear-gradient(100deg,var(--ink) 0 38%,#3045e0 44%,#9c92f2 47%,#cf99d3 50%,#fce3a3 53%,#fe9a04 56%,var(--ink) 62% 100%);
  background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rc-i::before{transition:background-color .3s var(--ease)}
@media (hover:hover){
  .rc-h:hover b,.rc-i:hover [data-n]{animation:rc-sweep 1.1s cubic-bezier(.45,.05,.25,1) both}
  .rc-i:hover::before{background:var(--spectrum)}
  .rc-i:hover .rc-u{color:var(--ink);transition:color .4s var(--ease)}
}
@keyframes rc-sweep{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.rc-h b,.rc-n [data-n]{animation:none!important}}