/* Step 2 embeds the approved Watch as a complete device, including its own bezel. */
#app.how-scroll .hs-watch-motion {
  position: relative;
  aspect-ratio: 280 / 440;
}
#app.how-scroll .hs-watch-mvp {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 280px;
  max-width: none;
  height: 440px;
  border: 0;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(var(--how-watch-scale));
}
/* Keep both devices together on narrow screens instead of pushing the Watch
   below a full-height phone and outside the initial step-2 view. */
@media (max-width: 820px), (max-height: 599px) {
  #app.how-scroll .hs-panel-curve {
    display: flex;
    flex-direction: column;
    padding: 40px clamp(12px, 3vw, 24px) 20px;
  }
  #app.how-scroll .hs-panel-curve .hs-copy { display: contents; }
  #app.how-scroll .hs-panel-curve h3 { margin-inline: 12px; }
  #app.how-scroll .hs-panel-curve .hs-copy p { order: 2; margin-inline: 12px; }
  #app.how-scroll .hs-curve-slot {
    order: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: min(2%, 8px);
    padding: 0 0 24px;
  }
  #app.how-scroll .hs-curve-slot .hs-phone-layer { width: min(62%, 240px, calc((100svh - 180px) * 1350 / 2760)); margin: 0; }
  #app.how-scroll .hs-curve-slot .hs-watch-layer { position: static; width: min(34%, 135px, 29svh); margin: 0 0 4%; }
}

/* Step 3 uses step 2's device geometry, copy hierarchy and A14.2 care screens.
   The chapter background uses the official purple container and page tones. */
#app.how-scroll .hs-pair-story { position: relative; margin-top: 16px; }
#app.how-scroll .hs-panel-care,
#app.how-scroll .hs-panel-curve {
  background: radial-gradient(ellipse at 78% 40%, var(--c-purple-200), transparent 65%), var(--c-purple-50);
}
#app.how-scroll #share { position: absolute; top: 0; }
@media (max-width: 820px), (max-height: 599px) {
  #app.how-scroll .hs-panel-curve {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-height: calc(100svh - 80px);
    padding-block: 24px 16px;
    position: sticky;
    top: min(80px, calc(100svh - var(--pair-panel-height, 100svh)));
    z-index: 1;
  }
  /* Both chapters share the same grid tracks, including when their copy wraps. */
  #app.how-scroll .hs-panel-curve .hs-copy { display: contents; }
  #app.how-scroll .hs-panel-curve .hs-copy[hidden] > * { visibility: hidden; }
  #app.how-scroll .hs-panel-curve h3 { grid-area: 1 / 1; margin-bottom: 16px; }
  #app.how-scroll .hs-curve-slot { grid-area: 2 / 1; padding-bottom: 16px; }
  #app.how-scroll .hs-panel-curve .hs-description { grid-area: 3 / 1; }
  #app.how-scroll .hs-description p { margin-bottom: 12px; }
  #app.how-scroll .hs-curve-slot .hs-phone-layer { width: min(62%, 240px, 22svh); }
  #app.how-scroll .hs-panel-care { min-height: 100svh; margin-top: 0; }
}

/* Use the same viewport-space feather as step 1 → 2, inside each fixed shell. */
#app.how-scroll .hs-care-reveal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent var(--wipe-start, 100%), black var(--wipe-end, 100%));
}

/* Portrait instructions · the three cards share a title, device, and copy
   grid. Card inset/gap 16, content groups 16, paragraphs 8 (Zoomie spacing).
   Each live example stays inside its own card as the document scrolls. */
@media (max-width: 820px) and (orientation: portrait) {
  #app.how-scroll .hs-panel {
    position: relative;
    top: auto;
    min-height: 0;
    display: grid;
    grid-template: "title" auto "device" auto "copy" auto / minmax(0, 1fr);
    gap: var(--c-space-4);
    padding: var(--c-space-6) var(--c-space-4);
    background: radial-gradient(ellipse at 78% 40%, var(--c-purple-200), transparent 65%), var(--c-purple-50);
  }
  #app.how-scroll .hs-panel .hs-copy { display: contents; }
  #app.how-scroll .hs-panel h3 { grid-area: title; margin: 0; color: var(--c-ink); }
  #app.how-scroll .hs-panel .hs-description { grid-area: copy; display: grid; gap: var(--c-space-2); }
  #app.how-scroll .hs-panel .hs-description :is(p, ul, li) { margin: 0; }
  #app.how-scroll .hs-panel .hs-device-slot {
    grid-area: device; display: flex; align-items: flex-end; justify-content: center;
    gap: var(--c-space-2); padding: 0;
  }
  #app.how-scroll .hs-panel .hs-device-slot .hs-phone-layer {
    width: min(60%, 200px, 26svh); margin: 0;
  }
  #app.how-scroll .hs-care-slot .hs-care-reveal { mask-image: none; }
  #app.how-scroll .hs-panel + .hs-panel { margin-top: var(--c-space-4); }
}