/* One compact, readable feature at a time on phones. Without the enhancement
   class, the original document keeps its fully expanded reading order. */
@property --mobile-stage-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@media (max-width: 759px),
  (max-width: 1100px) and (max-height: 679px) and (pointer: coarse) {
  .feature-mobile-ready {
    --mobile-stage-limit: min(780px, calc(100svh - 24px));
    --mobile-stage-height: var(--mobile-stage-limit);
    transition: --mobile-stage-height 240ms cubic-bezier(0.22, 0.7, 0.3, 1);
  }

  .feature-mobile-ready .feature-scroll-runway {
    height: auto;
  }

  .feature-mobile-ready .feature-sticky {
    --mobile-bottom-cut: max(
      0px,
      calc(
        var(--mobile-stage-limit) -
          var(--mobile-stage-height, var(--mobile-stage-limit))
      )
    );
    position: relative;
    display: block;
    top: auto;
    height: var(--mobile-stage-height, var(--mobile-stage-limit));
  }

  /* The bottom-anchored decoration moves as the card resizes. Keep it from
     becoming the browser's page-scroll anchor. */
  .feature-mobile-ready .paddle-transition {
    overflow-anchor: none;
  }

  .feature-mobile-ready .feature-stage {
    position: absolute;
    top: 0;
    left: 12px;
    width: calc(100% - 24px);
    height: var(--mobile-stage-limit);
    max-height: var(--mobile-stage-limit);
    padding: 16px 14px;
    gap: 16px;
    border-radius: 0;
    justify-content: flex-start;
    transform-origin: 50% 0;
    clip-path: inset(0 0 var(--mobile-bottom-cut) 0 round 25px);
    contain: layout paint;
    will-change: clip-path;
  }

  /* Keep the gradient's origin and scale fixed while the bottom edge resizes.
     Percentage-based vertical bounds would repaint the stationary top edge. */
  .feature-mobile-ready .feature-stage::before {
    top: calc(var(--mobile-stage-limit) * -0.3);
    bottom: auto;
    height: calc(var(--mobile-stage-limit) * 1.6);
  }

  .feature-mobile-ready.is-mobile-fitting {
    transition: none;
  }

  .feature-mobile-ready .tour-ball-scene {
    display: none;
  }

  .feature-mobile-ready .feature-nav {
    width: auto;
    max-width: 100%;
    gap: 8px;
  }

  .feature-mobile-ready .feature-nav-item {
    flex: 0 0 60px;
    flex-direction: row;
    gap: 0;
    width: 60px;
    min-height: 48px;
    padding: 11px;
    border-radius: 12px;
    background: #ffffffc7;
    color: #65547f;
  }

  .feature-mobile-ready .feature-nav-icon {
    width: 23px;
    height: 23px;
  }

  .feature-mobile-ready .feature-nav-label,
  .feature-mobile-ready .feature-nav-fill {
    display: none;
  }

  .feature-mobile-ready .feature-nav-item[aria-current="step"],
  .feature-mobile-ready .feature-nav-item[aria-current="true"],
  .feature-mobile-ready .feature-nav-item[aria-selected="true"] {
    background:
      linear-gradient(135deg, #ffffff26, #ffffff00 52%),
      linear-gradient(120deg, #b7a2ff, #a48bdf 50%, #9076c6);
    color: #fff;
    border-color: #fff;
    box-shadow:
      inset 0 1px 0 #ffffff4d,
      0 3px 10px #3521661a;
  }

  .feature-mobile-ready .feature-window {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    overflow-anchor: none;
    background: #fff;
    box-shadow: 0 10px 32px #291a5810;
    clip-path: inset(0 0 var(--mobile-bottom-cut) 0 round 18px);
    will-change: clip-path;
  }

  .feature-mobile-ready.feature-scroll .feature-track {
    /* Animated frame geometry stops here; the detailed feature art stays static. */
    --mobile-stage-height: 0px;
    --mobile-bottom-cut: 0px;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    gap: 0;
    isolation: isolate;
  }

  .feature-mobile-ready.feature-scroll .feature-row {
    --mobile-art-gap: 14px;
    --mobile-art-layout: below;
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: var(--mobile-row-height, 100%);
    padding: 25px 20px 22px;
    border-radius: inherit;
    background: transparent;
    opacity: var(--slide-opacity, 0);
    transform: translate3d(var(--slide-x, 0px), 0, 0);
    pointer-events: none;
  }

  .feature-mobile-ready.feature-scroll .feature-row:not(.is-active) {
    visibility: hidden;
  }

  .feature-mobile-ready.feature-scroll .feature-row.is-active {
    pointer-events: auto;
  }

  .feature-mobile-ready.feature-scroll .feature-row:nth-child(n) .feature-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .feature-mobile-ready.feature-scroll .feature-copy h3 {
    font-size: clamp(25px, 7.1vw, 31px);
    line-height: 1.15;
    letter-spacing: -0.9px;
  }

  .feature-mobile-ready.feature-scroll .feature-copy p {
    max-width: 40ch;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.65;
  }

  /* Fit artwork against the viewport limit, then size the card to that artwork.
     Its scale stays stable while the surrounding panel changes height. */
  .feature-mobile-ready.feature-scroll
    .feature-row:nth-child(n)
    .feature-panel {
    position: absolute;
    top: var(--mobile-art-top, 210px);
    left: var(--mobile-art-left, 50%);
    width: 480px;
    min-width: 480px;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 15px;
    border-radius: 18px;
    background: #f4f1f9;
    box-shadow: none;
    transform: translateX(-50%) scale(var(--mobile-art-scale, 0.58));
    transform-origin: 50% 0;
  }

  .feature-mobile-ready.feature-scroll .trim-art .mini-heading {
    padding: 17px 20px;
    font-size: 17px;
  }

  .feature-mobile-ready .trim-still {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .feature-mobile-ready.feature-scroll .trim-timelines {
    padding: 21px 20px 23px;
    gap: 21px;
  }

  .feature-mobile-ready .trim-track-label {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .feature-mobile-ready .trim-track-label strong {
    font-size: 13px;
  }

  .feature-mobile-ready .trim-original-track,
  .feature-mobile-ready .trim-points-track {
    height: 14px;
  }

  .feature-mobile-ready.feature-scroll .feature-panel.record-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    justify-content: normal;
  }

  .feature-mobile-ready.feature-scroll .match-stats-card,
  .feature-mobile-ready.feature-scroll .shotmap-card {
    min-height: 0;
    padding: 17px 19px;
    border-radius: 13px;
  }

  .feature-mobile-ready.feature-scroll .stats-card-heading,
  .feature-mobile-ready.feature-scroll .shotmap-heading {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
  }

  .feature-mobile-ready.feature-scroll .stats-card-heading h4,
  .feature-mobile-ready.feature-scroll .shotmap-heading h4 {
    font-size: 22px;
    letter-spacing: -0.6px;
  }

  .feature-mobile-ready.feature-scroll .stats-card-heading > span,
  .feature-mobile-ready.feature-scroll .shotmap-heading > span {
    font-size: 11px;
    line-height: 1.3;
  }

  .feature-mobile-ready .match-stats-players {
    margin-top: 12px;
    gap: 16px;
    font-size: 14px;
  }

  .feature-mobile-ready.feature-scroll .match-stats-list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 14px;
    gap: 12px;
  }

  .feature-mobile-ready.feature-scroll .stat-comparison {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    row-gap: 6px;
  }

  .feature-mobile-ready.feature-scroll .stat-comparison dt {
    font-size: 18px;
    line-height: 1.25;
  }

  .feature-mobile-ready.feature-scroll .stats-value {
    font-size: 23px;
    line-height: 1.15;
    gap: 5px;
  }

  .feature-mobile-ready.feature-scroll .stats-value small {
    font-size: 10px;
  }

  .feature-mobile-ready .stats-bars {
    gap: 7px;
  }

  .feature-mobile-ready .stats-track {
    height: 5px;
  }

  .feature-mobile-ready.feature-scroll .shotmap-plot {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: 165px;
    margin-top: 13px;
    border-radius: 9px;
  }

  .feature-mobile-ready .shotmap-court {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 165px;
    height: calc(165px * 261 / 137);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .feature-mobile-ready.feature-scroll .shotmap-legend {
    margin-top: 11px;
    gap: 18px;
    font-size: 13px;
  }

  .feature-mobile-ready .shotmap-legend > span {
    gap: 6px;
  }

  .feature-mobile-ready.feature-scroll .community-art {
    gap: 14px;
  }

  .feature-mobile-ready.feature-scroll .timeline-surface {
    padding: 17px 18px 19px;
    border-radius: 13px;
  }

  .feature-mobile-ready.feature-scroll .timeline-header {
    min-height: 36px;
    gap: 12px;
  }

  .feature-mobile-ready.feature-scroll .timeline-header h4 {
    gap: 5px;
    font-size: 21px;
  }

  .feature-mobile-ready.feature-scroll .timeline-plan-label {
    gap: 7px;
    font-size: 16px;
  }

  .feature-mobile-ready.feature-scroll .timeline-calendar {
    width: 18px;
    height: 18px;
  }

  .feature-mobile-ready .timeline-chevron {
    width: 13px;
    height: 13px;
  }

  .feature-mobile-ready .timeline-days {
    gap: 4px;
    margin-top: 11px;
  }

  .feature-mobile-ready.feature-scroll .timeline-day {
    gap: 6px;
    font-size: 12px;
  }

  .feature-mobile-ready.feature-scroll .timeline-day strong {
    width: 37px;
    height: 37px;
    font-size: 21px;
  }

  .feature-mobile-ready.feature-scroll .timeline-day > small {
    min-height: 14px;
    font-size: 12px;
    line-height: 14px;
  }

  .feature-mobile-ready.feature-scroll .timeline-next {
    grid-template-columns: 27px minmax(0, 1fr) 13px;
    min-height: 43px;
    margin-top: 15px;
    gap: 10px;
  }

  .feature-mobile-ready.feature-scroll .timeline-sport-emoji {
    font-size: 25px;
  }

  .feature-mobile-ready.feature-scroll .timeline-next strong {
    font-size: 16px;
  }

  .feature-mobile-ready.feature-scroll .timeline-next-details > span {
    font-size: 15px;
  }

  .feature-mobile-ready.feature-scroll .timeline-match-details {
    padding: 21px;
    border-radius: 13px;
  }

  .feature-mobile-ready .invite-card-header {
    gap: 12px;
  }

  .feature-mobile-ready .invite-label {
    font-size: 15px;
  }

  .feature-mobile-ready .invite-card-header .match-sport {
    font-size: 10px;
    letter-spacing: 0.8px;
  }

  .feature-mobile-ready.feature-scroll .timeline-match-details h4 {
    margin: 13px 0 8px;
    font-size: 30px;
    line-height: 1.15;
  }

  .feature-mobile-ready .timeline-match-details > p {
    font-size: 15px;
  }

  .feature-mobile-ready.feature-scroll .timeline-match-details .match-going {
    margin-top: 21px;
    gap: 13px;
  }

  .feature-mobile-ready.feature-scroll .timeline-match-details .mini-avatar {
    width: 42px;
    height: 42px;
    font-size: 12px;
  }

  .feature-mobile-ready .timeline-match-details .match-going > span {
    font-size: 13px;
    line-height: 1.6;
  }

  .feature-mobile-ready .timeline-match-details .invite-confirmed {
    width: 27px;
    height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-mobile-ready {
    transition: none;
  }
}

@media (max-width: 759px) and (prefers-reduced-motion: no-preference),
  (max-width: 1100px) and (max-height: 679px) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .feature-mobile-ready.feature-scroll
    .feature-row.feature-reveal-ready
    .feature-panel.feature-reveal-part {
    opacity: 0;
    transform: translateX(-50%) scale(var(--mobile-art-scale, 0.58))
      translateY(var(--feature-distance, 18px));
  }

  .feature-mobile-ready.feature-scroll
    .feature-row.feature-reveal-ready
    .feature-panel.feature-reveal-part.is-revealed {
    animation: feature-mobile-art-in var(--feature-duration, 640ms)
      cubic-bezier(0.22, 0.7, 0.3, 1)
      var(--mobile-art-reveal-delay, var(--feature-delay, 80ms)) both;
  }
}

@keyframes feature-mobile-art-in {
  to {
    opacity: 1;
    transform: translateX(-50%) scale(var(--mobile-art-scale, 0.58))
      translateY(0);
  }
}

@media (max-width: 359px),
  (max-width: 759px) and (max-height: 680px),
  (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) {
  .feature-mobile-ready .feature-stage {
    padding: 12px;
    gap: 12px;
  }

  .feature-mobile-ready .feature-nav-item {
    min-height: 44px;
    padding: 10px;
  }

  .feature-mobile-ready .feature-nav-icon {
    width: 22px;
    height: 22px;
  }

  .feature-mobile-ready.feature-scroll .feature-row {
    padding: 20px 16px 18px;
  }

  .feature-mobile-ready.feature-scroll .feature-copy h3 {
    font-size: 25px;
  }

  .feature-mobile-ready.feature-scroll .feature-copy p {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
  }
}

/* Short phone landscapes use the same card, with copy beside the artwork.
   Both remain visible in one screen rather than compressing into a tall stack. */
@media (max-width: 759px) and (max-height: 600px) and (orientation: landscape),
  (max-width: 1100px) and (max-height: 600px) and (pointer: coarse) and (orientation: landscape) {
  .feature-mobile-ready.feature-scroll .feature-row {
    --mobile-art-layout: side;
    display: flex;
    align-items: center;
    padding: 18px 20px;
  }

  .feature-mobile-ready.feature-scroll .feature-row:nth-child(n) .feature-copy {
    flex: 0 0 44%;
    width: 44%;
    max-width: 340px;
  }

  .feature-mobile-ready.feature-scroll .feature-copy h3 {
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.7px;
  }

  .feature-mobile-ready.feature-scroll .feature-copy p {
    max-width: 37ch;
    margin-top: 11px;
    font-size: 11.5px;
    line-height: 1.6;
  }
}