/* A compact deck opens into the three steps without extending the mobile page. */
.mobile-hero-stack { display: none; }

@media (max-width: 700px) {
  .home #start.chapter { min-height: 0; padding-top: 88px; padding-bottom: 40px; align-items: start; }
  .home #start .copy { position: relative; top: auto; }
  .home #start .copy h1 { font-size: clamp(43px, 11.8vw, 60px); line-height: 1; margin-bottom: 0; }
  .home #start .lead { max-width: 33ch; margin: 16px 0 5px; font-size: 13px; line-height: 1.55; }
  .home #start .actions { margin-top: 10px; }
  .home #start .actions .text-link,
  .home #start .hero-proof,
  .home #start .hero-home-cta { display: none; }
  .home #start .cta { margin-top: 0; min-height: 46px; }
  .mobile-hero-stack {
    display: block;
    position: relative;
    height: 308px;
    margin: 22px 0 0;
    isolation: isolate;
  }
  .mobile-stack-card {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 88px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    gap: 4px 14px;
    padding: 13px 18px;
    border: 1px solid #8399a5;
    border-left: 4px solid #ef4b8b;
    border-radius: 5px;
    background: #193244;
    box-shadow: 5px 6px 0 #071521;
    color: #edf0e9;
    transition: transform .12s linear;
    will-change: transform;
  }
  .mobile-stack-card small { grid-column: 1; font: 9px/1.3 monospace; letter-spacing: .1em; color: #b6cbd2; }
  .mobile-stack-card strong { grid-column: 1; font-size: 17px; line-height: 1.2; font-weight: 600; }
  .mobile-stack-card > span { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 26px; font-weight: 400; color: #ff9ac1; }
  .mobile-stack-card:nth-of-type(1) { z-index: 3; transform: rotate(-1deg); }
  .mobile-stack-card:nth-of-type(2) { z-index: 2; transform: translate(5px, calc(62px + var(--mobile-stack-spread, 0px))) rotate(1deg); }
  .mobile-stack-card:nth-of-type(3) { z-index: 1; transform: translate(10px, calc(124px + var(--mobile-stack-spread, 0px) + var(--mobile-stack-spread, 0px))) rotate(2deg); }
  .mobile-stack-card:nth-of-type(3) { background: #e9e9e2; color: #0d1b2a; }
  .mobile-stack-card:nth-of-type(3) small { color: #536b78; }
  .mobile-stack-card:nth-of-type(3) > span { color: #a82059; }

  html.mobile-motion-ready:not(.mobile-motion-paused) .home .mobile-panel {
    opacity: .72;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
  }
  html.mobile-motion-ready:not(.mobile-motion-paused) .home .mobile-panel[data-mobile-visible="true"] {
    opacity: 1;
    transform: translateY(0);
  }
  html.mobile-motion-ready:not(.mobile-motion-paused) .home .mobile-panel[data-mobile-visible="true"] .journey-track i {
    animation: mobile-track-draw .9s ease-out both;
  }
  html.mobile-motion-ready:not(.mobile-motion-paused) .home .mobile-panel[data-mobile-visible="true"] .grow-card-chart i {
    animation: mobile-chart-rise .7s ease-out both;
    animation-delay: calc(var(--bar-index, 0) * 90ms);
  }
  .home .mobile-panel .grow-card-chart i:nth-child(2) { --bar-index: 1; }
  .home .mobile-panel .grow-card-chart i:nth-child(3) { --bar-index: 2; }
  .home .mobile-panel .grow-card-chart i:nth-child(4) { --bar-index: 3; }
  .home .mobile-panel .grow-card-chart i:nth-child(5) { --bar-index: 4; }
  .home .mobile-panel .grow-card-chart i:nth-child(6) { --bar-index: 5; }
  @keyframes mobile-track-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes mobile-chart-rise { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
}

@media (max-width: 360px) {
  .home #start .copy h1 { font-size: 41px; }
  .mobile-hero-stack { height: 286px; }
  .mobile-stack-card { height: 82px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mobile-stack-card { will-change: auto; transition: none; }
}
body.motion-off .mobile-stack-card { will-change: auto; transition: none; }