/* Desktop: one iPhone, in Apple's frame, stays beside How it works, Home and the steps bank; the scroll moves its
   screens. Each step and section gets the window to itself, so the phone only ever shows what you are reading.
   Measured from Apple's iPhone 17 bezel (1350 x 2760): screen 1206 x 2622 at 72, 69 with a 180 corner;
   Dynamic Island 373 x 108 at 488, 111. On phones each section shows its own picture instead. */
.stage-phone { display: none; }

@media (min-width: 860px) {
  .stage { display: grid; grid-template-columns: 1fr 360px; column-gap: 48px; max-width: 1100px; margin: 0 auto; padding: 14vh var(--gutter) 0; }
  .stage > .sec { grid-column: 1; min-height: 100vh; padding-left: 0; padding-right: 0; display: flex; flex-direction: column; justify-content: center; }
  .stage .frag { display: none; }
  /* The phone stays a little longer after the steps bank, so its Use animation ends on screen. */
  .stage > #bank { padding-bottom: 20vh; }
  /* How it works: the title stays while each step takes the window in turn. */
  .stage > #how { display: block; padding-top: 0; padding-bottom: 0; }
  #how h2 { position: sticky; top: calc(var(--nav-h) + 48px); z-index: 1; padding-top: 48px; }
  #how .steps { gap: 0; margin-top: 0; }
  #how .steps::before { display: none; }
  #how .steps li { min-height: calc(100vh - var(--nav-h)); align-content: center; }
  .stage-phone {
    display: block; grid-column: 2; grid-row: 1 / span 3; align-self: start;
    position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--phone-h)) / 2); margin: 0;
  }
  .device { --w: min(360px, calc((100vh - var(--nav-h) - 48px) * .489)); position: relative; width: var(--w); }
  .stage-phone { --phone-h: calc(min(360px, calc((100vh - var(--nav-h) - 48px) * .489)) * 2.044); }
  .device-frame { width: 100%; height: auto; }
  .device .screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; overflow: hidden; border-radius: 14.93% / 6.865%; background: var(--device-black); isolation: isolate; }
  .screen .layer { position: absolute; inset: 0; will-change: transform; }
  .screen .layer img, .screen .layer video, .screen .live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .screen .dim { background: #000; opacity: .5; will-change: auto; }
  .screen .sheet { top: 10.93%; border-radius: 6.25% 6.25% 0 0 / 3.2% 3.2% 0 0; overflow: hidden; }
  .screen .walk { transform: translateY(100%); }
  .screen .trends { transform: translateX(100%); }
  .screen .home { transform: translateX(-100%); }
  .screen .bank { opacity: 0; will-change: opacity; }
  .live .arc { stroke: var(--accent); }
  .live .halo { stroke: var(--accent); opacity: .16; }
  .live .left { fill: #fff; font: 700 128px ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; letter-spacing: -1px; }
  .device .island { position: absolute; left: 36.15%; top: 4.02%; width: 27.63%; height: 3.91%; border-radius: 999px; background: var(--device-black); }
  .device .home-bar { position: absolute; left: 34.55%; top: 96.09%; width: 30.9%; height: .54%; border-radius: 999px; background: var(--device-white); }
}

/* Reveal once: opacity and a 12 px rise, 400 ms on the shared curve. Only pieces still below the window start hidden. */
html.reveal .pre { opacity: 0; transform: translateY(12px); }
html.reveal :is(.sec-label, .sec h2, .sec-text, .steps li, .frag, .compare, .mplan, .faq details, .final .btn, .final .note) {
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
html.reveal .now { transition: none; }

/* The goal ring fills once, in 700 ms. */
.ring-fill { transition: stroke-dasharray var(--t-slow) var(--ease), stroke var(--t-base) var(--ease); }
.ring.fill-start .ring-fill { stroke-dasharray: 0 1; transition: none; }

/* The steps line draws itself as you scroll past it; without scroll timelines it is simply there. */
@supports (animation-timeline: view()) {
  .steps::before { transform-origin: top; animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
  .statement-text.words span { animation: word linear both; animation-timeline: view(); animation-range: cover calc(25% + var(--w) * 30%) cover calc(35% + var(--w) * 30%); }
}
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes word { from { opacity: .4; } to { opacity: 1; } }

/* Questions: one open at a time; the answer fades in as it opens. */
.faq details[open] .faq-a { animation: answer var(--t-base) var(--ease); }
@keyframes answer { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }