/*
 * Reversible compact UX pass for the Telegram Mini App.
 * This file intentionally loads after every concept layer and does not affect
 * the public site or CMS.
 */

html[data-route="app"] .app {
  padding-right: 14px;
  padding-left: 14px;
}

html[data-route="app"] .guide-head-shell {
  padding: 6px 0 4px;
}

html[data-route="app"] .topbar {
  min-height: 62px;
  margin-bottom: 6px;
  padding: 8px 11px;
  border-radius: 15px;
}

html[data-route="app"] .mark-img {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

html[data-route="app"] .brand {
  gap: 8px;
  font-size: 17px;
}

html[data-route="app"] .language-select {
  width: 52px;
  min-height: 34px;
}

/* The segmented rail already communicates all five steps. */
html[data-route="app"] .progress-wrap {
  margin: 0 2px;
  padding: 10px 12px 9px;
  border-radius: 14px;
}

html[data-route="app"] .progress-track {
  display: none;
}

html[data-route="app"] .progress-label {
  margin-top: 0;
  font-size: 11.5px;
}

html[data-route="app"] .dots {
  gap: 5px;
  margin-top: 9px;
}

html[data-route="app"] .dots i {
  height: 3px;
}

html[data-route="app"] .stage {
  margin-top: 13px;
}

html[data-route="app"] .app:has(.step[data-step="home"].active) .stage {
  margin-top: 3px;
}

html[data-route="app"] .home {
  padding-top: 4px;
}

html[data-route="app"] .home-hero {
  min-height: 365px;
  padding: 22px 18px 20px;
  background-size: auto, auto 69%;
}

html[data-route="app"] .home-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 15px;
}

html[data-route="app"] .home-logo svg {
  width: 24px;
  height: 24px;
}

html[data-route="app"] .home h1 {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.2;
}

html[data-route="app"] .home .desc {
  font-size: 14px;
  line-height: 1.48;
}

html[data-route="app"] .home-cta {
  min-height: 52px;
  margin-top: 16px;
  padding: 14px 16px;
}

html[data-route="app"] .home-row {
  margin-top: 12px;
}

html[data-route="app"] .home-chip {
  min-height: 54px;
  padding: 10px;
}

html[data-route="app"] #supportChip,
html[data-route="app"] #supportFinal {
  animation: none;
}

html[data-route="app"] .home-foot {
  margin-top: 15px;
  font-size: 10.5px;
  line-height: 1.4;
}

html[data-route="app"] .icon-badge {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 14px;
}

html[data-route="app"] .icon-badge svg {
  width: 23px;
  height: 23px;
}

html[data-route="app"] .eyebrow {
  margin-bottom: 4px;
  font-size: 11px;
}

html[data-route="app"] .step h2 {
  margin-bottom: 11px;
  font-size: 22px;
  line-height: 1.18;
}

html[data-route="app"] .card {
  padding: 15px 14px 4px;
  border-radius: 15px;
}

html[data-route="app"] .card p.lead {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
}

/* Checklist items become scan-friendly rows instead of nested cards. */
html[data-route="app"] .card .bullet,
html[data-route="app"] .card .bullet:first-of-type {
  gap: 10px;
  margin: 0;
  padding: 11px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-route="app"] .card .bullet:first-of-type {
  border-top: 0;
}

html[data-route="app"] .card .bullet::after {
  display: none;
  content: none;
}

html[data-route="app"] .bullet div {
  font-size: 13.5px;
  line-height: 1.42;
}

html[data-route="app"] .card + .card {
  margin-top: 10px;
}

html[data-route="app"] .income-flow {
  margin: 10px 0 8px;
  padding: 10px 8px;
}

html[data-route="app"] .rate-box {
  margin-top: 10px;
  padding: 11px 12px;
}

html[data-route="app"] .pay-grid {
  gap: 7px;
  margin-top: 10px;
}

html[data-route="app"] .pay-chip {
  padding: 10px 8px;
}

html[data-route="app"] .note,
html[data-route="app"] .inline-warning {
  margin-top: 10px;
  padding: 11px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}

html[data-route="app"] .final {
  --final-banner-height: clamp(112px, 28vw, 138px);
  padding-top: calc(var(--final-banner-height) + 14px);
}

html[data-route="app"] .final h2 {
  font-size: 21px;
}

html[data-route="app"] .final p {
  margin-bottom: 16px;
}

html[data-route="app"] #navWrap,
html[data-route="app"] .nav {
  gap: 8px;
  margin-top: 14px;
  padding: 7px;
  border-radius: 14px;
}

html[data-route="app"] .btn {
  min-height: 50px;
  padding: 12px 16px;
}

@media (max-width: 380px) {
  html[data-route="app"] .app {
    padding-right: 12px;
    padding-left: 12px;
  }

  html[data-route="app"] .home-hero {
    min-height: 350px;
    padding-right: 15px;
    padding-left: 15px;
    background-size: auto, auto 66%;
  }

  html[data-route="app"] .home h1 {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-route="app"] #supportChip,
  html[data-route="app"] #supportFinal {
    animation: none !important;
  }
}
/*
 * Entry motion is intentionally one-shot. Once JS removes is-motion-entry,
 * keep WebView compositor layers fully settled during vertical scrolling.
 */
html[data-route="app"] .step.active:not(.is-motion-entry),
html[data-route="app"] .step.active:not(.is-motion-entry) > .icon-badge,
html[data-route="app"] .step.active:not(.is-motion-entry) > .eyebrow,
html[data-route="app"] .step.active:not(.is-motion-entry) > h2,
html[data-route="app"] .step.active:not(.is-motion-entry) > .card,
html[data-route="app"] .step.active:not(.is-motion-entry) > .note,
html[data-route="app"] .step.active:not(.is-motion-entry) > .inline-warning,
html[data-route="app"] .step.active:not(.is-motion-entry) .home-hero,
html[data-route="app"] .step.active:not(.is-motion-entry) .home-point,
html[data-route="app"] .step.active:not(.is-motion-entry) .home-row,
html[data-route="app"] .step.active:not(.is-motion-entry) .bullet,
html[data-route="app"] .step.active:not(.is-motion-entry) .bullet .dot-ico,
html[data-route="app"] .step.active:not(.is-motion-entry) .income-flow-node,
html[data-route="app"] .step.active:not(.is-motion-entry) .income-flow-arrow,
html[data-route="app"] .step.active:not(.is-motion-entry) .pay-chip,
html[data-route="app"] .step.active:not(.is-motion-entry) .final::after,
html[data-route="app"] .step.active:not(.is-motion-entry) .final > .icon-badge,
html[data-route="app"] .step.active:not(.is-motion-entry) .final > h2,
html[data-route="app"] .step.active:not(.is-motion-entry) .final > p,
html[data-route="app"] .step.active:not(.is-motion-entry) .final > .final-home-row {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}