/* Screens (Dasha, 21 Oct): a page opts in with class="snap" on <html>; each screen is a <section class="snap-sec">. The page
   scrolls freely (23 Oct: no paged scroll and no settle, assets/snap.js), so no CSS scroll-snap here. */
html.snap .snap-sec { min-height: 100svh; box-sizing: border-box; scroll-margin-top: 0; }
/* a phone scrolls freely (assets/snap.js): a screen is as tall as what it holds, so no empty band under a short one (Dasha, 22 Oct) */
@media (max-width: 860px) { html.snap .snap-sec { min-height: 0; } }
/* the header floats over the screens (out of the flow, so the first screen starts at the top and each screen is whole) */
html.snap .ijh { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 14px; margin-top: 0; }
/* the same height as on the pages that scroll (Dasha, 22 Oct: on the landing it sat lower than on Log in): a fixed bar has its top
   only, not top and the sticky bar's margin added together */
@media (max-width: 640px) { html.snap .ijh { top: 8px; } }
/* more below (assets/snap.js): a round glass arrow at the bottom right, one screen down; on the last screen it points up, to the top */
.snap-more { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 40; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; color: #191826;
  background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .78); box-shadow: 0 10px 30px rgba(64, 44, 140, .14), 0 2px 6px rgba(64, 44, 140, .06);
  transition: opacity .3s, transform .3s, background .2s, color .2s; animation: snap-more-bob 2.4s ease-in-out infinite; }
.snap-more:hover { background: #fff; color: #6E72F2; }
.snap-more:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; }
.snap-more.is-off { opacity: 0; pointer-events: none; transform: translateY(8px); animation: none; }
@keyframes snap-more-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.snap-more svg { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.snap-more.is-up svg { transform: rotate(180deg); }
.snap-more.is-up:not(.is-off) { animation-name: snap-more-bob-up; }
@keyframes snap-more-bob-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media print { .snap-more { display: none; } }
/* a phone or a tablet scrolls by hand, and the arrow sat over content there (a card, a step): it shows only with a mouse (22 Oct) */
@media (hover: none), (max-width: 860px) { .snap-more { display: none; } }