/* Home · three steps that end in the app (home-steps.js) */
/* the phone: scroll-tied tilt and rise, written per frame, so no transition on the way */
.app-sec.st-on .phone img { transform: perspective(900px) rotateX(var(--rt, 20deg)) translate(var(--px, 0px), calc(var(--rp, 140px) + var(--py, 0px))); transition: none; transform-origin: 50% 100%; will-change: transform; }
/* the strip above the stack */
.st-strip { position: sticky; top: 56px; z-index: 6; display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 0 -40px; pointer-events: none; transition: opacity 300ms var(--ease-out); }
.st-strip.gone { opacity: 0; }
.st-slot { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px dashed rgba(11,36,67,.28); color: var(--navy); background: rgba(245,244,240,.9); transition: background 320ms var(--ease-out), border-color 320ms, color 320ms; }
.st-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; opacity: .45; transition: opacity 320ms; }
[dir="rtl"] .st-tag { letter-spacing: 0; font-size: 12.5px; }
.st-tag svg { width: 13px; height: 13px; }
.st-tick { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 360ms var(--ease-out) 120ms; }
.st-slot.on { background: var(--navy); border-style: solid; border-color: var(--navy); color: #fff; }
.st-slot.on .st-tag { opacity: 1; }
.st-slot.on .st-tick { stroke-dashoffset: 0; }
.st-cnt { margin-inline-start: auto; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--navy); overflow: hidden; height: 20px; line-height: 20px; opacity: 0; transition: opacity 300ms; }
.st-strip.counted .st-cnt { opacity: 1; }
.st-cnt > span { display: inline-block; }
/* the tag on its way */
.st-fly { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(11,36,67,.3); background: #fff; color: var(--navy); font-size: 12px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; transform-origin: 0 0; pointer-events: none; box-shadow: 0 10px 24px -12px rgba(7,26,51,.5); }
[dir="rtl"] .st-fly { letter-spacing: 0; font-size: 13px; transform-origin: 100% 0; }
.st-fly svg { width: 14px; height: 14px; }
.st-fly-strip { position: absolute; z-index: 70; margin: 0; }
/* the strip lands as the app card's eyebrow row */
.st-dock { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; min-height: 28px; opacity: 0; transition: opacity 400ms var(--ease-out); }
.app.st-landed .st-dock { opacity: 1; }
.st-dock .st-slot { height: 28px; padding: 0 10px; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.st-dock .st-tag { font-size: 10px; }
.st-dock .st-slot.on .st-tick { stroke-dashoffset: 0; transition-delay: 300ms; }
@media (max-width: 680px) {
  .st-strip { top: 44px; height: 36px; margin-bottom: -36px; gap: 6px; }
  .st-slot { height: 28px; padding: 0 9px; }
  .st-tag { font-size: 10px; }
  .st-tag svg { display: none; }
  .st-cnt { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .st-strip, .st-fly, .st-fly-strip { display: none; } .st-dock { display: none; } .app-sec.st-on .phone img { transform: none; } }
html.rm .st-strip, html.rm .st-dock { display: none; } html.rm .app-sec.st-on .phone img { transform: none; }