/* The page follows the same brief, deliberate movements as the editing UI. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.page-progress {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 100; pointer-events: none;
}
.page-progress__fill {
  display: block; height: 100%; background: var(--cobalt);
  transform: scaleX(0); transform-origin: left;
}
html.js[data-motion="on"] .page-progress { display: block; }
html[data-motion="on"] .tt-reveal {
  transition: opacity 480ms ease-out, transform 560ms cubic-bezier(.2, .7, .2, 1);
}
html[data-motion="on"] .tt-reveal-pending { opacity: 0; transform: translateY(14px); }
.gap__bar { transform-origin: left; }
@keyframes tt-proof-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tt-proof-evidence { from { opacity: 0; } to { opacity: 1; } }
html[data-motion="on"] .gap__chart.tt-revealed .gap__bar { animation: tt-proof-fill 650ms steps(16, end) both; }
html[data-motion="on"] .gap__chart.tt-revealed .gap__row--res .gap__bar { animation-delay: 140ms; }
html[data-motion="on"] .gap__chart.tt-revealed :is(.gap__miss, .gap__whisker) { animation: tt-proof-evidence 240ms 650ms both; }
.btn__arrow { width: 16px; height: 16px; flex: none; margin-left: 12px; }
html[data-motion="on"] :is(.arw, .btn__arrow) { transition: transform 180ms ease-out; }
html[data-motion="on"] a:is(:hover, :focus-visible) :is(.arw, .btn__arrow) { transform: translate(2px, -2px); }
html[data-motion="on"] .offer__mark { transform-origin: left; transition: transform 180ms ease-out; }
html[data-motion="on"] .offer:hover .offer__mark { transform: scaleX(1.16); }
@media (prefers-reduced-motion: reduce) {
  .page-progress { display: none !important; }
  .tt-reveal, .tt-reveal-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  .gap__chart :is(.gap__bar, .gap__miss, .gap__whisker) { animation: none !important; }
  .arw, .btn__arrow, .offer__mark { transform: none !important; transition: none !important; }
}
@media print {
  .page-progress { display: none !important; }
  .tt-reveal-pending { opacity: 1 !important; transform: none !important; }
}