/* Rolling "Impact" stats strip, inserted by impact.js in place of the stats grid. */
/* Hide the original grid with CSS only, so React's hydrated DOM is never touched. */
section:has(> .grid .num-sheen):not(.impact-strip) { display: none; }
.impact-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.impact-track {
  display: flex;
  width: max-content;
  animation: impact-roll 20s linear infinite;
}
.impact-strip:hover .impact-track { animation-play-state: paused; }
.impact-group { display: flex; flex-shrink: 0; }
.impact-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 32px;
  margin-right: 24px;
  min-width: 240px;
}
.impact-item .corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--color-border-default);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.impact-item .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.impact-item .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.impact-item .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.impact-item .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.impact-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.impact-value {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.impact-value .plus {
  display: inline-block;
  vertical-align: top;
  margin-left: 0.14em;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  -webkit-text-fill-color: var(--color-primary);
}
@keyframes impact-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Desktop: fit the hero and the strip on the first screen. The hero image is a
   square, so capping its size to the viewport height shrinks the whole hero. */
@media (min-width: 768px) {
  div.flex.flex-col.gap-page.items-stretch.pb-page { padding-top: 12px; }
  /* The globe is drawn 1.275x the size of its layout slot (--globe), overlapping the
     space around it, so the hero keeps its height and the strip stays on screen. */
  div.aspect-square.max-w-\[960px\] {
    --globe: min(100%, max(300px, min(960px, calc(100svh - 300px))));
    width: calc(1.275 * var(--globe));
    max-width: none;
    max-height: none;
    margin: calc(-0.1375 * var(--globe)) 0 calc(-0.1375 * var(--globe)) calc((100% - 1.275 * var(--globe)) / 2);
    /* Clip the overflow above and below back to the slot (0.1375 / 1.275 of the box
       each way) so the canvas never covers the top bar or the strip. */
    clip-path: inset(10.784% -50% 10.784% -50%);
  }
  .impact-strip { margin-top: -36px; padding: 0; }
  .impact-item { padding: 16px 28px; gap: 10px; }
}
@media (max-width: 767px) {
  .impact-item { min-width: 190px; padding: 18px 22px; margin-right: 14px; }
  .impact-value { font-size: 2.25rem; }
  .impact-track { animation-duration: 15s; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-strip { overflow-x: auto; }
  .impact-track { animation: none; }
  .impact-group[aria-hidden="true"] { display: none; }
}