/* Phones. Layout only: the motion, tokens and copy are shared with desktop. */
@media (max-width: 767px) {
  /* Everything stays in one row: the type and gaps shrink with the screen, and the links keep a tall tap area. */
  .nav {
    top: 12px;
    left: var(--gutter);
    right: var(--gutter);
    transform: none;
    justify-content: space-between;
    gap: 2vw;
    padding-left: 10px;
    font-size: clamp(11px, 3.3vw, 14px);
  }
  .nav__mark img { height: 32px; }
  .nav__links { gap: min(2.9vw, 28px); font-size: inherit; }
  .nav__links a { padding: 14px 0; }
  .nav .nav__cta { height: 40px; padding: 0 min(3vw, 18px); font-size: inherit; }

  .two-tone { font-size: clamp(30px, 9.2vw, 44px); }

  /* OFF / STARS, stacked. */
  .display-title { font-size: 17.5vw; line-height: 1.02; text-align: center; }

  .hero { height: 155vh; }
  .hero__center { gap: 20px; }

  /* Team: a row that js/swipe.js moves, with the cards either side peeking in. It stays one screen of scrolling. */
  .team {
    --card-w: 80vw;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-x: clip;
  }
  .team__inner { width: 100%; min-width: 0; }
  .team__head { margin-bottom: 0; padding: 0 var(--gutter); }
  /* The vertical padding leaves room for the near edge of a card as it flips. */
  .team__row {
    gap: 12px;
    padding: 28px 0 56px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
  }
  .team__slot { position: relative; }
  .team__shade {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: var(--canvas);
    pointer-events: none;
  }
  .card__facts { font-size: clamp(15px, 2vh, 18px); }

  .story { padding: var(--section-top) var(--gutter); }
  .story__lines { max-width: none; font-size: 7.6vw; gap: 4vh; }

  /* Marketing: heading, constellation, curve (js/market.js), closing lines, top to bottom. */
  .market__head { right: var(--gutter); }
  .point { left: var(--mx); top: var(--my); }
  .point__label { font-size: 14px; gap: 6px; }
  .point__label img { width: 16px; height: 16px; }
  .market__close { top: 80vh; right: var(--gutter); font-size: 5vw; gap: 4px; }

  /* Pipeline: a vertical route down the left, unpinned. js/pipeline.js sets the route's top and length. */
  .pipeline { height: auto; }
  .pipeline__stage {
    position: relative;
    height: auto;
    overflow: visible;
    padding: var(--section-top) var(--gutter) 8vh;
  }
  .pipeline__head { position: relative; top: 0; left: 0; margin-bottom: 40px; }
  .pipeline__sky { border-bottom: 1px solid var(--hairline-strong); }
  .route, .route__lit { left: calc(var(--gutter) + 12px); right: auto; width: 1px; height: auto; }
  .route__lit { transform-origin: 50% 0; transform: scaleY(0); }
  .stops { display: flex; flex-direction: column; gap: 36px; }
  .stop { position: relative; padding-left: 44px; }
  .stop__node { left: 12px; top: 14px; }
  .stop__name, .stop__body { position: static; }
  .stop__body { margin-top: 10px; gap: 14px; }
  .stop__num { font-size: 13vw; }
  .stop__checks { max-width: none; font-size: 15px; }

  /* Games: one column, live games first. */
  .games { padding: var(--section-top) var(--gutter) 10vh; }
  .games__grid { flex-direction: column; align-items: stretch; gap: 48px; width: 100%; max-width: none; }
  .games__col { display: contents; }
  .games__head { order: -1; margin-bottom: -16px; }
  .tile[aria-label="Cliff Heroes"] { order: 0; }
  .tile[aria-label="MicroRacer.io"] { order: 1; }
  .tile[aria-label="Combine Hit"] { order: 2; }
  .tile[aria-label="ClawVaganza"] { order: 3; }
  .tile__meta { margin-top: 16px; }
  .tile__icon { font-size: 24vw; }
  .tile__about { padding: 6.5vw; font-size: 6.6vw; }

  .end__center { gap: 28px; }
  .end__foot { bottom: 20px; }
}

/* Only a real line break on phones. */
.title-break { display: none; }
@media (max-width: 767px) {
  .title-break { display: inline; }
}

/* No hover to light them, so icons rest at full brightness on touch screens. */
@media (hover: none) {
  .tile__dim { opacity: 0; }
}