/* ── spruce-up layer ── */
.hx-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--doc, 0)); }


.section-rule { transform-origin: 0 50%; }
.reveal .section-rule, .section-hed.reveal .section-rule { transform: scaleX(0); transition: transform 1s var(--ease-out) .25s; }
.reveal.in-view .section-rule { transform: scaleX(1); }

.tl .tl-prog { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tp, 0)); }
.tl .tl-dot { fill: var(--paper); transition: fill .4s ease, r .4s ease; }
.tl .tl-dot.on { fill: #c9a227; }

.g-slots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; max-width: 520px; margin: 1.4rem auto 1.2rem; }
.g-slots i { aspect-ratio: 1; border: 1.5px solid var(--gold); background: transparent; transform: scale(.85); }
.promise-inner.in-view .g-slots i { animation: gFill .35s var(--ease-out) forwards; animation-delay: calc(var(--i) * .09s + .5s); }
@keyframes gFill { to { background: var(--gold); transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .section-rule { transform: none !important; }
  .tl .tl-prog { stroke-dashoffset: 0; } .tl .tl-dot { fill: #c9a227; }
  .g-slots i { background: var(--gold); transform: none; animation: none !important; }
}