/* Source style section 14 */

/* hero stat captions type themselves in */
.hero .stats .stat > span {
  display: block;
  min-height: 1.2em;
  contain: layout style;
}
.hero .stats .stat b {
  min-height: 1.15em;
}
.hero .stats .stat.typing > span::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--orange);
  animation: statCaret 0.7s steps(1) infinite;
}
@keyframes statCaret {
  50% {
    opacity: 0;
  }
}

/* ---- mobile hardening: layered blurs are the main memory cost on a phone ---- */
@media (max-width: 820px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  nav {
    background: rgba(22, 12, 13, 0.96) !important;
  }
  .plexus {
    display: none !important;
  }
}
@media (max-width: 820px) {
  .rv,
  .sec-head {
    will-change: auto !important;
  }
}

.globe-flat {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 0.5px solid rgba(226, 59, 46, 0.22);
  background: #140a0b;
  text-decoration: none;
}
.globe-flat img {
  display: block;
  width: 100%;
  height: auto;
}
.globe-flat span {
  display: block;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 0.5px solid rgba(226, 59, 46, 0.16);
}

/* Source style section 15 */

/* =============================================================
   Mobile guard, part 2
   No visual change on desktop. On phones: removes backdrop filters,
   permanent layer promotion and off-screen rendering.
   ============================================================= */
@media (max-width: 900px), (pointer: coarse) {
  /* backdrop-filter is expensive; panels keep their translucency without
     sampling the background. */
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* No permanent layer promotion; let the browser decide. */
  * {
    will-change: auto !important;
  }

  /* Every one of these rasterises its subtree a second time, at full
     device pixel ratio, purely for decoration. */
  .heromap svg,
  .rv-b,
  .orb,
  .glow,
  .halo {
    filter: none !important;
  }

  /* Sections render normally (no content-visibility:auto): a skipped one
     is only drawn once scrolled to, so the layer browser and the footer
     would pop in. */

  /* On phones the reveal is disabled: content is simply there. */
  .rv,
  .rv-b,
  .sec-head,
  .wsplit > i {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  nav {
    background: rgba(20, 11, 12, 0.96) !important;
  }

  /* Smooth scrolling on a long document costs a frame budget the phone
     does not have while the globe is live. */
  html {
    scroll-behavior: auto !important;
  }
}

/* Source style section 16 */

/* phones: headings, intros, section labels and footer centred; forms, tables
   and panel content stay left-aligned */
@media (max-width: 760px) {
  .ah,
  .vw-head,
  .ed-gate > .kicker,
  .ed-gate > h1,
  .ed-gate > p {
    text-align: center;
  }
  .ah > h1,
  .ah > p,
  .vw-head > h1,
  .vw-head > p,
  .ed-gate > h1,
  .ed-gate > p {
    margin-inline: auto;
  }
  .vw-jumps {
    justify-content: center;
  }
  .ah-stats .stat {
    text-align: center;
  }
  .sec-t {
    justify-content: center;
  }
  .sec-t::before {
    content: '';
    flex: 1;
    height: 0.5px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
  }
  .sec-t.in::before {
    transform: scaleX(1);
  }
  footer .f-top {
    text-align: center;
  }
  footer .brand,
  footer .f-logos {
    justify-content: center;
  }
  footer .brand-logo {
    margin-left: auto;
    margin-right: auto;
  }
  footer p {
    margin-inline: auto;
  }
  footer .f-bottom {
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 760px) {
  .ah-stats {
    margin-inline: auto;
  }
  .ah-stats .stat,
  .ah-stats .stat:first-child,
  .ah-stats .stat:nth-child(odd) {
    align-items: center;
    padding: 0 12px;
  }
  .perm {
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .sec-t::before {
    transform: none;
    transition: none;
  }
}

/* Source style section 17 */

/* phones: the four figures as one slim instrument strip, hairline above and
   below, short dividers between */
@media (max-width: 760px) {
  .hero.hb .hb-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 400px;
    margin: 34px auto 0;
    gap: 0;
    padding: 15px 0 14px;
  }
  .hero.hb .hb-facts::before,
  .hero.hb .hb-facts::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    transform: scaleX(0);
    animation: hbLn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--d, 0.9s) + 0.1s);
  }
  .hero.hb .hb-facts::before {
    top: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 150, 110, 0.22) 18%,
      rgba(255, 176, 140, 0.55) 50%,
      rgba(255, 150, 110, 0.22) 82%,
      transparent
    );
  }
  .hero.hb .hb-facts::after {
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 150, 110, 0.14) 25%,
      rgba(255, 150, 110, 0.14) 75%,
      transparent
    );
  }
  .hero.hb .hb-f,
  .hero.hb .hb-f:first-child,
  .hero.hb .hb-f:last-child {
    width: auto;
    margin: 0;
    padding: 0 4px;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
  }
  .hero.hb .hb-f + .hb-f::before {
    display: block;
    top: 3px;
    bottom: 3px;
    background: linear-gradient(180deg, transparent, rgba(255, 150, 110, 0.28), transparent);
  }
  .hero.hb .hb-f b {
    font-size: 18px;
  }
  .hero.hb .hb-f b i {
    font-size: 10px;
    margin-left: 2px;
    color: #e8a896;
  }
  .hero.hb .hb-f > span {
    font-size: 8px;
    letter-spacing: 0.12em;
  }
}
@media (max-width: 360px) {
  .hero.hb .hb-f b {
    font-size: 16px;
  }
  .hero.hb .hb-f > span {
    font-size: 7.5px;
    letter-spacing: 0.07em;
  }
}
@keyframes hbLn {
  to {
    transform: none;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hero.hb .hb-facts::before,
  .hero.hb .hb-facts::after {
    animation: none;
    transform: none;
  }
}

/* Source style section 18 */

/* page scrollbar drawn over the page: the native one is hidden (desktop only, set by
   the script below), so no strip is reserved beside the content */
html.pgsb {
  scrollbar-width: none;
}
html.pgsb::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#pgSb {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 2147483000;
  pointer-events: none;
}
#pgSb i {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  height: 40px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  pointer-events: auto;
  cursor: default;
  will-change: transform;
  transition:
    opacity 0.45s ease,
    width 0.2s ease,
    right 0.2s ease,
    background-color 0.2s ease;
}
#pgSb.on i {
  opacity: 1;
  transition-duration: 0.18s, 0.2s, 0.2s, 0.2s;
}
#pgSb i:hover,
#pgSb.drag i {
  width: 8px;
  right: 2px;
  background: rgba(255, 255, 255, 0.32);
}
#pgSb.off {
  display: none;
}
html.pgsb-drag,
html.pgsb-drag * {
  user-select: none !important;
  -webkit-user-select: none !important;
}