/* ============================================================================
   /download on the sub page system (9 Oct 2026). Loaded in PageStyles, after sub.css.
   Every rule under .sp, tokens only (no hex outside tos-site.css, canon guard rule 4).
   Mobile first: rules outside media queries are the 390px phone; 600 / 760 / 981 / 1180.

   No instrument: the page's one alive thing is the app itself, the reel, which is the
   header's figure. Its hooks (.site-reel-*, #reelPlay, #scrollCue) are the ones
   global/js/download.js finds; that script fades the cover and the play control with
   inline CSSOM styles and moves the cue with translateX(-50%), so the cue is centred
   with the same transform here.
   ============================================================================ */

/* ---- page header ---- */
.sp .dl-l { display: block; }
.sp .dl-badges .site-store-badges { margin-top: 24px; gap: 10px 14px; }
.sp .dl-badges .site-store-badge { display: block; padding-block: 2px; }
.sp .dl-badges .site-store-badge img { height: 44px; }
.sp .dl-badges .site-store-badge.is-google img { height: 65px; margin: -10.5px -9px; }
.sp .dl-badges .site-store-badge:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }
.sp .dl-head .note { margin-top: 18px; }

/* ---- the reel: a 9:16 frame on the paper, a blurred cover and a play control over it ---- */
.sp .dl-reel { max-width: 100%; }
.sp .site-reel-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--lp-ink); background: var(--lp-paper-2); overflow: hidden; }
.sp .site-reel-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp .site-reel-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.1) brightness(.82); transform: scale(1.18); pointer-events: none; transition: opacity .28s ease; }
.sp .site-reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lp-ink); border-radius: 2px; background: var(--lp-paper); color: var(--lp-accent); transition: opacity .28s ease, background-color .15s ease; }
.sp .site-reel-play svg { width: 30px; height: 30px; margin-inline-start: 3px; fill: currentColor; }
.sp .site-reel-play:hover { background: var(--lp-paper-2); }
.sp .site-reel-play:focus-visible { outline: 2px solid var(--lp-paper); outline-offset: -6px; }
[dir="rtl"] .sp .site-reel-play svg { margin-inline-start: 0; margin-left: 3px; }

/* ---- 01 the two paths, then the badges again ---- */
.sp .dl-paths .card .cta { margin-top: 20px; }
.sp .dl-store-cta .site-store-badges { margin-top: 0; }

/* ---- the scroll cue: phones and tablets only, fixed over the page until the reel shows ---- */
.sp .site-scroll-cue { display: none; }
@media (max-width: 900px) {
  .sp .site-scroll-cue { position: fixed; z-index: 40; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 2px; background: var(--lp-ink); color: var(--lp-paper); font: 600 14px/1.2 var(--tos-font-body); text-decoration: none; white-space: nowrap; }
  .sp .site-scroll-cue-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: dlCueBob 1.9s ease-in-out 2; }
}
@keyframes dlCueBob {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(4px); opacity: 1; }
}

@media (min-width: 1180px) {
  .sp .dl-badges .site-store-badge img { height: 48px; }
  .sp .dl-badges .site-store-badge.is-google img { height: 71px; margin: -11.5px -10px; }
  /* the reel holds the right of the first screen, sized by the screen's height */
  .sp .dl-head > .hd-fig { justify-self: center; }
  .sp .dl-reel { width: calc(min(66vh, 640px) * 9 / 16); }
}