/* Transfer controls must remain reachable in short viewports and long states. */
.transfer-page .transfer-stage {
  height: auto;
  min-height: max(560px, calc(100dvh - 144px));
  grid-template-rows: 52px minmax(min-content, 1fr) 56px;
}

.transfer-page .transfer-console {
  min-width: 0;
  padding-block: 20px 8px;
}

.transfer-page .home-blog {
  padding: 36px 12px 28px;
}

.transfer-page .home-blog .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.transfer-page .home-blog .section-heading h2 {
  font-size: clamp(23px, 4vw, 32px);
  line-height: 1.2;
}

@media (max-width: 640px) {
  .transfer-page .transfer-app {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 58px auto;
  }

  .transfer-page .transfer-layout {
    display: block;
  }

  .transfer-page .transfer-workspace {
    overflow: visible;
    padding: 8px 8px calc(84px + env(safe-area-inset-bottom));
  }

  .transfer-page .transfer-stage {
    min-height: calc(100dvh - 150px - env(safe-area-inset-bottom));
    height: auto;
    grid-template-rows: 48px minmax(min-content, 1fr) 44px;
    border-radius: 16px;
  }

  .transfer-page .transfer-console {
    width: calc(100% - 24px);
    padding-block: 12px 4px;
  }

  .transfer-page .console-heading {
    padding-top: 8px;
  }

  .transfer-page .drop-zone {
    min-height: 180px;
  }

  .transfer-page .primary-button,
  .transfer-page .download-button,
  .transfer-page .secondary-button,
  .transfer-page .share-link {
    min-height: 46px;
  }

  .transfer-page .stage-topline {
    font-size: 11px;
  }

  .transfer-page .stage-footer {
    font-size: 11px;
  }

  .transfer-page .incoming-actions .primary-button {
    width: 100%;
  }

  .transfer-rail,
  .studio-rail {
    gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }

  .transfer-rail a,
  .studio-rail a {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 50px;
    gap: 5px;
  }

  .transfer-rail a > span:last-child,
  .studio-rail .rail-label {
    display: block;
    font-size: 9px;
    line-height: 1;
  }

  .transfer-page .home-blog {
    padding: 32px 4px 8px;
  }

  .transfer-page .home-blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .transfer-page .blog-card h2 {
    font-size: 25px;
    line-height: 1.15;
  }
}