/* Hero: Signal full stop and the faint ring field behind it (hero-fx.js). */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-rings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 78%); }

.stop { display: inline-block; width: .36em; height: .18em; margin-left: .04em; position: relative; vertical-align: baseline; }
.stop i { position: absolute; left: 0; bottom: 0; width: .36em; height: .18em; border-radius: .36em .36em 0 0; background: var(--adaptum-signal);
  transform: translate(var(--px, 0), var(--py, .3em)) scale(var(--ps, .4)); transform-origin: 50% 100%; opacity: var(--po, 0); box-shadow: 0 -.05em .4em rgb(255 90 31 / .35); }