/*
 * Mobile fidelity layer for the preserved v74 visual.
 *
 * The desktop source deliberately stays untouched. On small screens we draw
 * glass panels and controls at their final CSS size instead of shrinking the
 * large Figma SVGs. This avoids fractional transforms, fuzzy one-pixel lines
 * and clipped content in iOS/Telegram webviews.
 */
@media (max-width: 560px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
  }

  img,
  svg {
    max-width: 100%;
  }

  .shell {
    width: 100%;
    max-width: 100%;
  }

  /* The hidden per-section headers must not reserve vertical space. */
  .page .nav:not(.nav--floating) {
    display: none;
  }

  /* Render the floating glass header natively at its final size. */
  .nav--floating {
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    height: 64px;
    min-height: 64px;
    padding: 0 15px;
    margin: 0;
    gap: 10px;
    flex-flow: row nowrap;
    transform: none;
    border-radius: 20px;
    isolation: isolate;
  }

  .nav--floating .nav-bg {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: inherit;
    background: rgba(18, 18, 20, 0.72);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    backdrop-filter: blur(12px) saturate(115%);
    overflow: hidden;
  }

  .nav--floating .nav-bg svg {
    display: none;
  }

  .nav--floating .brand {
    min-width: 0;
    margin: 0 auto 0 0;
    gap: 7px;
    font-size: 12px;
    line-height: 1;
    transform: none;
  }

  .nav--floating .brand-logo {
    width: 38px;
    height: 19px;
    top: -2px;
  }

  .nav--floating .nav-links {
    min-width: 0;
    margin: 0;
    gap: clamp(9px, 2.8vw, 13px);
    flex-flow: row nowrap;
  }

  .nav--floating .nav-links a {
    height: auto;
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1;
  }

  /* Crisp shared glass buttons. Their labels remain real HTML text. */
  .cta {
    width: 100%;
    max-width: 390px;
    height: 58px;
    min-width: 0;
    padding: 0 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
    backdrop-filter: blur(10px) saturate(110%);
  }

  .cta > svg {
    display: none;
  }

  .cta > span {
    position: static;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    align-items: center;
    justify-content: center;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.1;
  }

  /* Landing page: final-size layout, no whole-component scaling. */
  .site-stack > .page {
    max-width: 100%;
  }

  .site-stack > .page > .shell {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page:first-of-type {
    min-height: 760px;
  }

  .page:first-of-type .shell {
    min-height: 760px;
    padding-top: 96px;
    padding-bottom: 54px;
  }

  .page:first-of-type .hero {
    min-height: 430px;
    padding-top: 118px;
  }

  .page:first-of-type h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(20px, 5.8vw, 23px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }

  .page:first-of-type .subtext {
    width: 100%;
    max-width: 335px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.42;
  }

  .page:first-of-type .cta {
    margin-top: 32px;
  }

  /* Rebuild the two download groups with native CSS pills. The old 581 px
     illustration became visibly blurred when compressed to phone width. */
  .page:first-of-type .downloads {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-rows: repeat(2, 44px);
    gap: 8px;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 54px auto 0;
  }

  .page:first-of-type .downloads > svg {
    display: none;
  }

  .page:first-of-type .downloads-hotspot {
    position: static;
    width: auto;
    height: 44px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: #fff;
    color: #0d0d0d;
    font-family: 'CYNTHONEXT-MEDIUM', 'CYNTHONEXT-LIGHT', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1;
    display: grid;
    place-items: center;
  }

  .page:first-of-type .downloads-hotspot::before {
    display: block;
    color: #080808;
    font: 500 12px/1 'CYNTHONEXT-MEDIUM', 'CYNTHONEXT-LIGHT', system-ui, sans-serif;
    white-space: nowrap;
  }

  .page:first-of-type .downloads-hotspot--pc::before {
    content: 'Скачать для ПК';
  }

  .page:first-of-type .downloads-hotspot--install::before {
    content: 'Установить приложение';
  }

  .page:first-of-type .downloads-hotspot--apple-left::before,
  .page:first-of-type .downloads-hotspot--apple-right::before {
    content: '';
    width: 23px;
    height: 27px;
    background: url('/assets/images/apple-platform.svg') center / contain no-repeat;
  }

  .page:first-of-type .downloads-hotspot--windows::before {
    content: '';
    width: 24px;
    height: 26px;
    background: url('/assets/images/windows-platform.svg') center / contain no-repeat;
  }

  .page:first-of-type .downloads-hotspot--android::before {
    content: '';
  }

  .page:first-of-type .downloads-hotspot--pc { grid-column: 1; grid-row: 1; }
  .page:first-of-type .downloads-hotspot--apple-left { grid-column: 2; grid-row: 1; }
  .page:first-of-type .downloads-hotspot--windows { grid-column: 3; grid-row: 1; }
  .page:first-of-type .downloads-hotspot--install { grid-column: 1; grid-row: 2; }
  .page:first-of-type .downloads-hotspot--apple-right { grid-column: 2; grid-row: 2; }
  .page:first-of-type .downloads-hotspot--android { grid-column: 3; grid-row: 2; }

  .page:first-of-type .downloads-android-fix {
    grid-column: 3;
    grid-row: 2;
    position: relative;
    left: auto;
    top: auto;
    place-self: center;
    width: 19px;
    height: 25px;
    z-index: 3;
  }

  .page:nth-of-type(2) .shell,
  .page:nth-of-type(4) .shell {
    padding-top: 132px;
    padding-bottom: 64px;
  }

  .page:nth-of-type(2) h1,
  .page:nth-of-type(4) h1 {
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.05;
  }

  .page:nth-of-type(2) .feature-card,
  .page:nth-of-type(2) .feature-card--right,
  .page:nth-of-type(2) .feature-card--bottom-left,
  .page:nth-of-type(2) .feature-card--bottom-right {
    min-height: 190px;
    height: auto;
    padding: 28px 17px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    background: rgba(18, 18, 20, 0.76);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
    backdrop-filter: blur(10px) saturate(110%);
  }

  .page:nth-of-type(2) .feature-card > svg {
    display: none;
  }

  .page:nth-of-type(2) .feature-card-text,
  .page:nth-of-type(2) .feature-card-text--bottom-custom {
    position: relative;
    inset: auto;
    top: auto !important;
    left: auto;
    width: 100%;
    transform: none;
  }

  .page:nth-of-type(2) .feature-card--bottom-left .feature-card-text {
    width: 100%;
  }

  .page:nth-of-type(2) .feature-card-title {
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.35;
  }

  .page:nth-of-type(2) .feature-card-body,
  .page:nth-of-type(2) .feature-card--bottom-left .feature-card-body {
    position: static;
    width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
  }

  .page:nth-of-type(2) .cta {
    margin-top: 20px;
  }

  .page:nth-of-type(3) {
    min-height: auto;
  }

  .page:nth-of-type(3) .shell {
    min-height: auto;
    padding-top: 132px;
    padding-bottom: 72px;
  }

  .page:nth-of-type(3) .hero {
    min-height: 690px;
    padding-top: 44px;
  }

  .page:nth-of-type(3) h1 {
    font-size: clamp(27px, 7.8vw, 31px);
    line-height: 1.08;
  }

  .page:nth-of-type(3) .subtext,
  .page:nth-of-type(3) .subtext--extended {
    max-width: 350px;
    font-size: 14px;
    line-height: 1.48;
  }

  .page:nth-of-type(3) .globe-asset {
    top: 390px;
    opacity: .4;
  }

  .page:nth-of-type(4) .tariff-card,
  .page:nth-of-type(4) .tariff-card--left,
  .page:nth-of-type(4) .tariff-card--right,
  .page:nth-of-type(4) .tariff-bottom-card {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(14, 14, 16, 0.8);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    backdrop-filter: blur(8px) saturate(110%);
  }

  .page:nth-of-type(4) .tariff-card > svg,
  .page:nth-of-type(4) .tariff-bottom-card > svg {
    display: none;
  }

  /* A tap must expose the same white-list explanation as desktop hover. */
  .page:nth-of-type(4) .tariff-card--left {
    overflow: visible;
    z-index: 3;
  }

  .page:nth-of-type(4) .tariff-inline-help {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .page:nth-of-type(4) .tariff-inline-help-tooltip {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    width: min(210px, calc(100vw - 82px));
    transform: translateY(-50%);
    background: rgba(10, 10, 11, .94);
    color: rgba(255, 255, 255, .9);
    z-index: 8;
  }

  .page:nth-of-type(4) .tariff-bottom-card-title {
    color: #fff;
    -webkit-animation: tariffTitlePulseMobile 1.9s ease-in-out infinite;
    animation: tariffTitlePulseMobile 1.9s ease-in-out infinite;
    will-change: opacity, text-shadow;
  }

  @-webkit-keyframes tariffTitlePulseMobile {
    0%, 100% {
      opacity: .94;
      text-shadow: 0 0 9px rgba(255, 81, 0, .42), 0 0 20px rgba(255, 81, 0, .24);
    }
    50% {
      opacity: 1;
      text-shadow: 0 0 18px rgba(255, 81, 0, .95), 0 0 38px rgba(255, 81, 0, .62);
    }
  }

  @keyframes tariffTitlePulseMobile {
    0%, 100% {
      opacity: .94;
      text-shadow: 0 0 9px rgba(255, 81, 0, .42), 0 0 20px rgba(255, 81, 0, .24);
    }
    50% {
      opacity: 1;
      text-shadow: 0 0 18px rgba(255, 81, 0, .95), 0 0 38px rgba(255, 81, 0, .62);
    }
  }

  .page:nth-of-type(4) .cta,
  .page:nth-of-type(4) .cta--secondary {
    left: auto;
    top: auto;
  }

  .page:nth-of-type(5) .shell {
    padding-top: 132px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .page:nth-of-type(5) .hero {
    padding-top: 74px;
  }

  .page:nth-of-type(5) .about-heading {
    max-width: 100%;
    font-size: clamp(48px, 14vw, 58px);
  }

  .page:nth-of-type(5) .about-text {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.55;
  }

  /* Login and registration use the same v74 composition, but controls are
     painted at phone size so input text and borders remain crisp on iOS. */
  body:not(:has(.downloads)) .page:first-of-type {
    min-height: max(100svh, 820px);
  }

  body:not(:has(.downloads)) .page:first-of-type .shell {
    min-height: max(100svh, 820px);
    padding: 0 18px calc(48px + env(safe-area-inset-bottom));
  }

  body:not(:has(.downloads)) .page:first-of-type .hero {
    min-height: auto;
    padding-top: 132px;
  }

  body:not(:has(.downloads)) .page:first-of-type h1 {
    font-size: clamp(31px, 9vw, 38px);
    line-height: 1.05;
    overflow-wrap: normal;
  }

  body:not(:has(.downloads)) .page:first-of-type .subtext {
    max-width: 340px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.42;
  }

  body:not(:has(.downloads)) .auth-caption {
    margin-top: 50px;
    font-size: 23px;
    line-height: 1.3;
  }

  body:not(:has(.downloads)) .auth-panel {
    width: 100%;
    max-width: 360px;
    height: 64px;
    margin-top: 20px;
    transform: none;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.065);
    -webkit-backdrop-filter: blur(8px) saturate(108%);
    backdrop-filter: blur(8px) saturate(108%);
  }

  body:not(:has(.downloads)) .auth-panel--secondary {
    margin-top: 14px;
  }

  body:not(:has(.downloads)) .auth-panel > svg {
    display: none;
  }

  body:not(:has(.downloads)) .auth-panel-label,
  body:not(:has(.downloads)) .auth-panel--secondary .auth-panel-label,
  body:not(:has(.downloads)) .auth-panel-label--password,
  body:not(:has(.downloads)) .auth-panel-label--repeat-password {
    left: 26px;
    top: 50%;
    transform: translateY(-50%) !important;
    font-size: 16px;
    line-height: 1;
    text-align: left;
  }

  body:not(:has(.downloads)) .auth-panel-input {
    font-size: 16px;
    line-height: 1.2;
    padding: 0 26px;
  }

  body:not(:has(.downloads)) .auth-panel-input--password {
    padding-right: 64px;
  }

  body:not(:has(.downloads)) .password-toggle {
    right: 14px;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
  }

  body:not(:has(.downloads)) .password-toggle:active {
    transform: translateY(-50%) scale(.97);
  }

  body:not(:has(.downloads)) .password-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  body:not(:has(.downloads)) .forgot-password {
    margin-top: 8px;
    font-size: 13px;
  }

  body:not(:has(.downloads)) .auth-panel--solid {
    margin-top: 18px;
    border-color: rgba(255, 255, 255, 0.82);
    background: #fff;
  }

  body:not(:has(.downloads)) .auth-panel--solid + .auth-panel--solid {
    margin-top: 14px;
  }

  body:not(:has(.downloads)) .auth-panel-solid-label {
    font-size: 18px;
    line-height: 1;
  }

  body:not(:has(.downloads)) .auth-divider-bottom {
    margin-top: 14px;
    font-size: 13px;
  }

  body:not(:has(.downloads)) .auth-panel--telegram {
    margin-top: 12px;
    border-color: rgba(90, 197, 255, 0.75);
    background: #2aabee;
  }

  body:not(:has(.downloads)) .auth-panel-telegram-label {
    width: calc(100% - 30px);
    font-size: clamp(15px, 4.5vw, 18px);
    line-height: 1.1;
  }

  body:not(:has(.downloads)) .legacy-status {
    max-width: 360px;
    font-size: 13px;
  }

  /* Extra specificity over the preserved compact-desktop breakpoint. */
  .legacy-auth-page .page:first-of-type .auth-caption {
    margin-top: 50px;
    font-size: 23px;
    line-height: 1.3;
  }

  .legacy-auth-page .page:first-of-type .auth-panel {
    width: calc(100vw - 36px);
    max-width: 360px;
    height: 64px;
    align-self: center;
    transform: none;
  }

  .legacy-auth-page .page:first-of-type .auth-panel-label,
  .legacy-auth-page .page:first-of-type .auth-panel--secondary .auth-panel-label {
    left: 26px;
    transform: translateY(-50%) !important;
  }

  .legacy-auth-page .page:first-of-type .auth-panel-input {
    font-size: 16px;
    line-height: 1.2;
    padding: 0 26px;
  }

  .legacy-auth-page .page:first-of-type .auth-panel-input--password {
    padding-right: 64px;
  }

  .legacy-auth-page .page:first-of-type .auth-panel-solid-label,
  .legacy-auth-page .page:first-of-type .auth-panel-telegram-label {
    font-size: 18px;
    line-height: 1.1;
  }
}

@media (max-width: 350px) {
  .nav--floating {
    left: 10px;
    right: 10px;
    padding: 0 11px;
  }

  .nav--floating .brand {
    font-size: 11px;
  }

  .nav--floating .brand-logo {
    width: 34px;
  }

  .nav--floating .nav-links {
    gap: 7px;
  }

  .nav--floating .nav-links a {
    font-size: 10px;
  }

  .page:first-of-type .downloads {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    gap: 6px;
  }
}