/* ============================================================================
   ORBIT SCENE — MOBILE COMPOSITION (max-width: 640px only)

   Desktop and tablet are untouched: every rule sits inside the media query.

   The problem on phones: the orbit box is 640px tall in layout no matter how
   far it is scaled down, and the copy was stacked underneath it, so the
   explanation fell below the visible screen.

   The composition on phones is now three bands inside the visible screen:
     top     the problem line, the label and the title
     middle  the orbit, centred, with the cards enlarged (continuous-opening.js)
     bottom  the explanation and the button
   The copy block is laid over the whole stage and split with an auto margin,
   so the script's existing fades and state changes keep working unchanged.
   ============================================================================ */
@media (max-width: 640px) {
  /* The stage is as tall as the screen that is actually visible. 100vh on a
     phone includes the area behind the browser's own bars, which is where the
     bottom of the copy was being lost. */
  .scene-viewport {
    height: calc(100svh - 64px);
    /* Vertical scroll stays with the browser; sideways swipes go to the orbit
       (continuous-opening.js) instead of to the page. */
    touch-action: pan-y;
  }
  /* Services change by swipe and tap on phones, so the scene does not need
     the long scroll that used to step through them. It keeps the distance the
     opening needs, plus a pause on the composition, then hands on to the next
     section. */
  .continuous-scene {
    height: 300svh;
  }

  .solutions-stage {
    padding: 0 18px;
    align-items: stretch;
  }
  .solutions-layout {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* Orbit: its 640px box is centred on the stage rather than taking part in
     the flow, so its unscaled size no longer pushes anything off screen. */
  .solutions-visual {
    position: absolute;
    left: 50%;
    top: calc(50% - 22px);
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
  }

  /* Copy: one layer over the stage, top group and bottom group. */
  .solutions-editorial {
    position: absolute;
    inset: 0;
    z-index: 12;
    max-width: none;
    padding: 14px 0 92px;        /* bottom clears the chat launcher */
    display: flex;
    align-items: stretch;
    pointer-events: none !important;   /* taps reach the cards underneath */
  }
  .editorial-content {
    width: 100%;
    height: 100%;
    align-items: center;
    text-align: center;
  }
  .editorial-problem {
    font-size: 14.5px;
    line-height: 1.38;
    margin: 0 auto 8px;
    max-width: 30ch;
    text-wrap: balance;
  }
  .editorial-eyebrow {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .editorial-title {
    font-size: 30px;
    line-height: 1.04;
    margin-bottom: 0;
  }
  .editorial-title.phrase-title {
    font-size: 22px;
    line-height: 1.16;
    max-width: 16ch;
  }
  /* Everything from here down belongs to the bottom band. */
  .editorial-result {
    margin: auto auto 12px;
    font-size: 15px;
    line-height: 1.42;
    max-width: 32ch;
    text-wrap: balance;
  }
  .editorial-actions {
    justify-content: center;
    pointer-events: auto;
    /* button and cue stack, so the last state can show both */
    flex-direction: column;
    gap: 12px;
  }
  .editorial-cta {
    padding: 11px 22px;
    font-size: 14px;
  }
  .editorial-cue {
    font-size: 10.5px;
  }
}

/* Quicker state changes on phones: the copy swap and the active-card highlight
   keep their motion but finish sooner, so a change of service reads as one
   beat instead of a slow drift. */
@media (max-width: 640px) {
  .editorial-content {
    transition: none;
  }
  .card-inner {
    transition: border-color 90ms ease, background-color 90ms ease, box-shadow 90ms ease, transform 90ms ease;
  }
  .card-video {
    transition: none;
  }
}

@media (max-width: 640px) and (max-height: 620px) {
  .editorial-problem { font-size: 13.5px; margin-bottom: 6px; }
  .editorial-title { font-size: 26px; }
  .editorial-title.phrase-title { font-size: 20px; }
  .editorial-result { font-size: 14px; margin-bottom: 10px; }
  .solutions-editorial { padding-top: 10px; }
}