@media all {
  /* A few drifting highlights in the mountain sky, behind all hero content. */
  .hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(circle at 17% 19%, #fff9 1px, transparent 2px),
      radial-gradient(circle at 47% 29%, #fff7 1px, transparent 2px),
      radial-gradient(circle at 64% 15%, #fffb 1px, transparent 2px),
      radial-gradient(circle at 73% 43%, #fff6 1px, transparent 2px),
      radial-gradient(circle at 89% 23%, #fff9 1px, transparent 2px);
    animation: sky-drift 9s ease-in-out infinite alternate;
  }
  .section-head.in h2 {
    animation: heading-in .68s var(--ease) both;
  }
  .section-head.in .label::after {
    transform-origin: left;
    animation: rule-in .9s var(--ease) both;
  }
  .screen .media-video { animation: film-in .36s ease-out; }
  .faq details[open] p { animation: heading-in .3s var(--ease); }
  .cta.in .cta-mark { animation: stamp-in 1.1s var(--ease) both; }

  @keyframes sky-drift {
    from { opacity: .32; transform: translate(-8px, 7px); }
    to { opacity: .8; transform: translate(12px, -6px); }
  }
  @keyframes heading-in {
    from { opacity: .25; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rule-in { from { transform: scaleX(.06); } to { transform: scaleX(1); } }
  @keyframes film-in { from { opacity: .5; } to { opacity: 1; } }
  @keyframes stamp-in {
    from { transform: translateY(24px) rotate(-5deg); }
    to { transform: none; }
  }
}

@media (hover: hover) and (pointer: fine) {
  .tool-id::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(180px at var(--spot-x, 50%) var(--spot-y, 50%), #ffffff26, transparent);
    opacity: 0;
    transition: opacity .28s ease;
  }
  .tool-id:hover::before { opacity: 1; }
  .btn-solid {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn-solid::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -55%;
    width: 36%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #80808033, transparent);
    transform: skewX(-18deg);
  }
  .btn-solid:is(:hover, :focus-visible)::after { animation: button-sweep .65s ease-out; }
  @keyframes button-sweep { to { transform: translateX(490%) skewX(-18deg); } }
}


.section-head.in .label::after {
  background:linear-gradient(90deg,transparent 25%,#f2f2ee 49%,transparent 73%) -25% center / 28% 100% no-repeat,
    linear-gradient(90deg,var(--trim),transparent);
  animation: rule-in .85s var(--ease) both, trace-pass 4.8s ease-in-out infinite;
}
@keyframes trace-pass { 0%,12% {background-position:-40% center,center} 75%,100% {background-position:150% center,center} }
.tool:hover .tool-id::after { transform: translateX(6px) scale(1.04); }
.tool-id::after { transition: transform .65s var(--ease); }
.review-nav button:hover {background:var(--paper);color:var(--ink)}
.sector-bar a {position:relative}
.sector-bar a::after {content:"";position:absolute;inset:auto 14% 0 0;height:2px;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.sector-bar a:is(:hover,:focus-visible)::after {transform:scaleX(1)}