:root {
  color-scheme: light;
  --ink: #241311;
  --brown: #824c30;
  --brown-dark: #71391f;
  --cream: #fbeee5;
  --surface: #fffaf7;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 280px;
  background: #eee4df;
  color: var(--ink);
}
a { color: inherit; }
.page {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(162deg, #fffaf8 0%, #fffdfb 46%, #fff6f1 79%, #f3e8e2 100%);
  position: relative;
  padding-bottom: 96px;
}

/* Шапка */
.header {
  height: 58px;
  padding: 6px 11px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; }
.brand__logo { width: 43px; height: 33px; object-fit: contain; display:block; background: transparent; filter: none; }
.brand__name { font-size: 21px; font-weight: 800; letter-spacing: -1.1px; }
/* Верхнее меню: скрыто на мобильных, открывается на ПК */
.nav { display: none; position: relative; }
.nav__toggle {
  appearance: none;
  display: flex;
  width: 50px;
  height: 50px;
  padding: 13px 12px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  border: 1px solid #ebd9ce;
  border-radius: 15px;
  background: #fff8f4;
  box-shadow: 0 4px 18px #512a1b0c;
}
.nav__bar { width: 24px; height: 2.6px; background: #62341f; border-radius: 3px; transition: transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] .nav__bar:first-child { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__bar:last-child { transform: translateY(-7px) rotate(-45deg); }
.nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  width: 216px;
  padding: 8px;
  background: #fffaf6;
  border: 1px solid #ead3c6;
  border-radius: 18px;
  box-shadow: 0 18px 50px #512a1b28;
}
.nav__panel[hidden] { display: none; }
.nav__link { padding: 13px 16px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 600; }
.nav__link:hover, .nav__link:focus-visible { background: #f8e9df; }
.nav__link--active { background: #f5e4d8; color: #7c442b; }

/* Первый экран с котиком */
.hero { height: 225px; position: relative; isolation: isolate; }
.hero__content { position: relative; z-index: 2; padding: 11px 11px 0; }
.hero h1 {
  margin: 0;
  font-size: 23.7px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -1.05px;
  white-space: nowrap;
}
.hero__line { display: block; }
.hero__pill {
  display: inline-block;
  color: #fff;
  padding: 0 10px 1px;
  margin-right: 1px;
  border-radius: 14px;
  background: #864c30;
  line-height: 1.12;
  letter-spacing: -.55px;
}
.hero__description {
  margin: 10px 0 0;
  color: #454344;
  font-size: 13.6px;
  line-height: 18px;
  letter-spacing: -.12px;
}
.hero__waves { display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 72px; z-index: 0; }
.hero__cat {
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 1px;
  right: -30px;
  width: 240px;
  height: auto;
  max-width: none;
  pointer-events: none;
}

/* Основной CTA */
.cta { padding: 8px 10px 0; }
.cta__button {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 15px;
  background: #854b30;
  box-shadow: inset 0 1px 2px #fff5, 0 1px 2px #612e1621;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, transform .15s ease;
}
.cta__button:hover { filter: brightness(1.06); }
.cta__button:active { transform: translateY(1px); }
.cta__button svg { flex: 0 0 20px; }

.cta__note {
  margin: 9px 0 0;
  text-align: center;
  color: #90796c;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -.1px;
}

/* Три преимущества */
.features { padding: 0 11px; margin-top: 17px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature {
  min-width: 0;
  height: 64px;
  padding: 7px 3px 5px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(150deg, #fdf2eb 0%, #f9ebe2 100%);
  color: #854a2b;
}
.feature__icon { width: 27px; height: 30px; flex: 0 0 30px; }
.feature__icon--bolt { width: 25px; }
.feature__icon--infinity { width: 34px; }
.feature span { color: #251a17; font-size: 12.5px; line-height: 15px; white-space: nowrap; }

/* Тарифы — настоящая горизонтальная прокрутка без JavaScript */
.pricing { padding: 0 0 0 9px; margin-top: 17px; }
.pricing h2 { margin: 0 9px 13px 2px; font-size: 20px; letter-spacing: -.6px; line-height: 24px; font-weight: 800; }
.plans-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1px;
  padding: 9px 10px 9px 1px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.plans-scroll::-webkit-scrollbar { display: none; }
.plan {
  position: relative;
  flex: 0 0 83%;
  min-width: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 8px 8px 8px 11px;
  border-radius: 17px;
  border: 1px solid #e6c5b2;
  background: linear-gradient(110deg, #fff7f1 0%, #fff1e7 100%);
  box-shadow: 0 2px 4px #63351e20;
  scroll-snap-align: start;
}
.plan__text { min-width: 0; }
.plan__text h3 { font-size: 15px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.55px; white-space: nowrap; }
.plan__text p { font-size: 10.5px; margin: 0; white-space: nowrap; color: #3d3431; }
.plan__price {
  flex: 0 0 auto;
  padding: 7px 8px;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 20px;
  background: #985c3b;
}

/* Нижнее меню, как в присланном примере */
.bottom-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(9px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(410px, calc(100% - 18px));
  height: 66px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid #f2e2d9;
  border-radius: 24px;
  background: rgba(255, 250, 247, .96);
  box-shadow: 0 4px 25px rgba(106, 62, 41, .12);
  backdrop-filter: blur(12px);
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-width: 0;
  border-radius: 20px;
  font-size: 11px;
  line-height: 13px;
  text-decoration: none;
  color: #3f221b;
}
.bottom-nav__item svg { width: 23px; height: 23px; }
.bottom-nav__item--active {
  background: #874c2f;
  box-shadow: inset 0 2px 2px #ffffff30;
  color: #fff;
}

:focus-visible { outline: 2px solid #b9794e; outline-offset: 3px; }
@media (min-width: 360px) {
  .header { height: 65px; padding: 9px 18px 0; }
  .brand__logo { width: 48px; height: 36px; }
  .brand__name { font-size: 23px; }
  .hero { height: 260px; }
  .hero__content { padding: 15px 18px 0; }
  .hero h1 { font-size: clamp(27px, 7vw, 31px); line-height: 1.2; }
  .hero__description { margin-top: 14px; font-size: 15px; line-height: 20px; }
  .hero__waves { height: 96px; }
  .hero__cat { width: 310px; right: -30px; bottom: 2px; }
  .cta { padding: 10px 17px 0; }
  .cta__button { height: 49px; font-size: 16px; border-radius: 17px; }
  .features { margin-top: 20px; padding: 0 18px; gap: 19px; }
  .feature { height: 77px; gap: 6px; }
  .feature__icon { width: 30px; height: 32px; flex-basis: 32px; }
  .feature__icon--infinity { width: 37px; }
  .feature span { font-size: 13.5px; }
  .pricing { margin-top: 22px; padding-left: 17px; }
  .pricing h2 { font-size: 23px; margin-bottom: 16px; }
  .plan { height: 69px; flex-basis: 82%; padding-left: 15px; padding-right: 11px; }
  .plan__text h3 { font-size: 17px; }
  .plan__text p { font-size: 12.3px; }
  .plan__price { font-size: 13.5px; padding: 7px 10px; }
}
/* Полноценная десктопная версия: верхнее меню + все тарифы одновременно */
@media (min-width: 768px) {
  body { padding: 0; background: #fffaf7; }
  .page {
    max-width: none;
    min-height: 100dvh;
    padding: 0 0 78px;
    overflow: clip;
    border-radius: 0;
    box-shadow: none;
    background:
      radial-gradient(ellipse 45% 33% at 85% 12%, #fff1e6 0%, transparent 100%),
      linear-gradient(180deg, #fffaf8 0%, #fffefc 62%, #fff5ef 100%);
  }
  .header {
    max-width: 1240px;
    height: 104px;
    padding: 24px 30px 0;
    align-items: center;
    margin: 0 auto;
  }
  .brand { gap: 12px; }
  .brand__logo { width: 59px; height: 44px; }
  .brand__name { font-size: 29px; letter-spacing: -1.3px; }
  .nav { display: block; }
  main { max-width: 1240px; margin: 0 auto; padding: 16px 30px 0; }
  .hero {
    height: 465px;
    border: 1px solid #f5dfd0;
    border-radius: 34px;
    background: linear-gradient(125deg, #fff8f4 0%, #fffbf8 40%, #fff0e4 100%);
    overflow: hidden;
  }
  .hero__content { padding: 68px 44px 0; }
  .hero h1 { font-size: clamp(37px, 4.2vw, 55px); line-height: 1.19; letter-spacing: -2.3px; }
  .hero__pill { padding: 0 15px 3px; border-radius: 18px; }
  .hero__description { margin-top: 25px; font-size: 20px; line-height: 28px; color: #5c504c; }
  .hero__waves { height: 142px; opacity: .92; }
  .hero__cat { width: clamp(370px, 42vw, 550px); right: -18px; bottom: -4px; }
  .cta {
    position: relative;
    z-index: 3;
    margin: -120px 0 0 44px;
    padding: 0;
    width: 250px;
  }
  .cta__button { height: 56px; font-size: 17px; border-radius: 17px; }
  .features { margin: 119px 0 0; padding: 0; gap: 20px; }
  .feature {
    height: 112px;
    gap: 18px;
    padding: 18px;
    flex-direction: row;
    background: linear-gradient(120deg, #fcf1e9, #fff6f0);
    border: 1px solid #f3e3d7;
    border-radius: 22px;
  }
  .feature__icon { width: 39px; height: 41px; flex: 0 0 41px; }
  .feature__icon--infinity { width: 45px; }
  .feature span { font-size: 19px; font-weight: 600; }
  .pricing { margin: 46px 0 0; padding: 0; }
  .pricing h2 { margin: 0 0 21px; font-size: 31px; line-height: 38px; letter-spacing: -1px; }
  .plans-scroll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding: 9px 0 0;
    scroll-snap-type: none;
  }
  .plan {
    min-width: 0;
    height: 147px;
    flex: initial;
    padding: 20px 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 22px;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .plan:hover { transform: translateY(-3px); box-shadow: 0 9px 28px #63351e23; }
  .plan__text h3 { font-size: 21px; margin: 0 0 8px; }
  .plan__text p { font-size: 14px; }
  .plan__price { padding: 8px 13px; font-size: 15px; line-height: 20px; }
    .bottom-nav { display: none; }
}
@media (min-width: 1100px) {
  .plans-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { height: 160px; }
  .hero__content { padding-left: 54px; }
  .cta { margin-left: 54px; }
}
@media (min-width: 768px) and (max-width: 960px) {
  .hero h1 { font-size: clamp(32px, 4.2vw, 40px); letter-spacing: -1.5px; }
  .hero__cat { width: clamp(335px, 43vw, 400px); right: -55px; }
  .hero__content { padding: 82px 30px 0; }
  .cta { margin-left: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---- Единая мобильная композиция (обновлённая версия) ---- */
@media (max-width: 767px) {
  :root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --ink: #2b1912;
  }
  body { background: #fffaf7; }
  .page {
    max-width: 500px;
    min-height: 100dvh;
    padding-bottom: calc(105px + env(safe-area-inset-bottom));
    background: #fffcfa;
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
  }
  .page::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; left: 0; right: 0;
    height: 390px;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 46% at 95% 56%, rgba(250,213,185,.38), transparent 95%),
      linear-gradient(180deg, #fff7f2 0%, #fffaf7 62%, #fffcfa 100%);
  }
  .header {
    height: 74px;
    padding: 17px 20px 0;
    margin: 0;
    align-items: center;
    position: relative;
    z-index: 12;
  }
  .brand { gap: 9px; }
  .brand__logo { width: 41px; height: 31px; }
  .brand__name { font-size: 22px; font-weight: 800; letter-spacing: -.9px; }
  .hero {
    height: 272px;
    background: transparent;
    isolation: isolate;
  }
  .hero__content { padding: 13px 20px 0; }
  .hero h1 {
    font-weight: 800;
    font-size: clamp(23.2px, 7.25vw, 30px);
    letter-spacing: -1.18px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .hero__pill {
    padding: 0 11px 2px;
    border-radius: 12px;
    background: #864c30;
    font-size: .94em;
    line-height: 1.11;
    vertical-align: 1px;
  }
  .hero__description {
    max-width: 210px;
    margin-top: 17px;
    color: #6b5c55;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -.16px;
  }
  .hero__waves {
    height: 99px;
    bottom: 0;
    opacity: .67;
  }
  .hero__cat {
    width: 278px;
    right: -17px;
    bottom: 0;
    filter: drop-shadow(0 9px 12px rgba(99,51,28,.06));
  }
  .cta { padding: 2px 20px 0; position: relative; z-index: 3; }
  .cta__button {
    height: 54px;
    border-radius: 17px;
    font-size: 16px;
    font-weight: 750;
    gap: 9px;
    background: #854b30;
    box-shadow: 0 8px 16px rgba(124,68,43,.12), inset 0 1px 0 #ffffff35;
  }
  .features {
    margin: 18px 20px 0;
    padding: 5px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 0;
    border: 1px solid #f0e2d9;
    background: #fff8f3;
    border-radius: 22px;
    box-shadow: 0 5px 22px rgba(92,49,26,.025);
  }
  .feature {
    position: relative;
    height: 76px;
    border-radius: 0;
    padding: 7px 0 4px;
    gap: 5px;
    background: transparent;
    justify-content: center;
  }
  .feature + .feature::before {
    content: "";
    position: absolute;
    top: 19px; bottom: 19px; left: 0;
    width: 1px;
    background: #ead7ca;
  }
  .feature__icon { width: 27px; height: 29px; flex-basis: 29px; }
  .feature__icon--infinity { width: 34px; }
  .feature span { font-size: 12px; font-weight: 650; color: #5b3524; }
  .pricing { margin-top: 28px; padding: 0 0 0 20px; }
  .pricing h2 {
    margin: 0 20px 12px 0;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -.9px;
    font-weight: 800;
  }
  .plans-scroll {
    padding: 5px 20px 16px 0;
    gap: 12px;
    scroll-padding-left: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .plan {
    flex: 0 0 79%;
    height: 94px;
    border: 1px solid #eac8b3;
    border-radius: 20px;
    padding: 17px 14px 14px 16px;
    background: linear-gradient(125deg, #fff9f5, #fff0e6);
    box-shadow: 0 4px 12px rgba(122,69,43,.07);
    scroll-snap-align: start;
  }
  .plan__text h3 { font-size: 17px; line-height: 21px; margin: 0 0 6px; letter-spacing: -.55px; }
  .plan__text p { font-size: 11px; line-height: 16px; color: #786155; }
  .plan__price {
    font-size: 12px;
    line-height: 15px;
    padding: 9px 10px;
    background: #985c3b;
  }
    .bottom-nav {
    width: min(440px, calc(100% - 28px));
    height: 70px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    border: 1px solid rgba(231,207,192,.87);
    border-radius: 23px;
    padding: 6px;
    gap: 5px;
    background: rgba(255,250,247,.95);
    box-shadow: 0 10px 30px rgba(97,58,37,.13);
  }
  .bottom-nav__item { border-radius: 17px; font-size: 11px; font-weight: 600; gap: 5px; }
  .bottom-nav__item svg { width: 22px; height: 22px; }
  .bottom-nav__item--active {
    background: #874c2f;
    box-shadow: 0 3px 7px rgba(102,57,31,.15);
    color: #fff;
  }
}
@media (max-width: 350px) {
  .header { padding-left: 15px; padding-right: 15px; height: 66px; }
  .brand__logo { width: 35px; height: 27px; }
  .brand__name { font-size: 19px; }
  .hero { height: 244px; }
  .hero__content { padding: 10px 15px 0; }
  .hero h1 { font-size: clamp(21.8px, 7.9vw, 25px); letter-spacing: -1.15px; }
  .hero__description { max-width: 165px; font-size: 12.4px; line-height: 18px; margin-top: 12px; }
  .hero__cat { width: 243px; right: -18px; }
  .hero__waves { height: 80px; }
  .cta { padding-left: 15px; padding-right: 15px; }
  .cta__button { height: 50px; }
  .features { margin-left: 15px; margin-right: 15px; margin-top: 16px; }
  .feature { height: 69px; }
  .pricing { padding-left: 15px; margin-top: 23px; }
  .pricing h2 { font-size: 22px; }
  .plan { flex-basis: 85%; padding: 12px 10px 12px 13px; height: 88px; }
  .plan__text h3 { font-size: 15px; }
  .plan__text p { font-size: 10px; }
  .plan__price { font-size: 11px; padding: 8px 8px; }
  .bottom-nav { width: calc(100% - 20px); height: 66px; }
}

/* Информационный футер — в потоке страницы, всегда выше мобильной панели. */
.site-footer {
  width: calc(100% - 40px);
  max-width: 1180px;
  margin: 25px auto 0;
  padding: 18px 0 6px;
  border-top: 1px solid #eadbd1;
}
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}
.site-footer__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 12px;
  color: #765d50;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  background: #f8ebe3;
  color: #71391f;
}
@media (min-width: 768px) {
  .page { display: flex; flex-direction: column; }
  main { flex: 1 0 auto; width: 100%; }
  .site-footer {
    width: calc(100% - 60px);
    margin-top: 62px;
    padding: 25px 0 31px;
  }
  .site-footer__links {
    display: flex;
    justify-content: center;
    gap: clamp(18px, 4vw, 54px);
  }
  .site-footer__links a { font-size: 14px; min-height: 42px; padding: 0 13px; }
}
@media (max-width: 350px) {
  .site-footer { width: calc(100% - 30px); margin-top: 15px; }
  .site-footer__links { column-gap: 3px; }
  .site-footer__links a { font-size: 12px; }
}

/* Подпись под кнопкой для обоих размеров экрана */
@media (max-width: 350px) {
  .cta__note { font-size: 10.5px; line-height: 16px; }
}
@media (min-width: 768px) {
  .cta__note { text-align: left; font-size: 13px; margin: 12px 0 0 4px; }
}

/* 2026-11-11 — шапка на ПК, карточки без промо-плашек и финальный футер */
.plan__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.plan__price:hover { filter: brightness(1.12); transform: translateY(-1px); }
@media (min-width: 768px) {
  .header { width: 100%; justify-content: space-between; }
  /* Список тарифов сразу под основной композицией */
  .pricing { margin-top: 142px; }
  .page { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .page {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  main { flex: 1 0 auto; }
  .pricing { margin-top: 25px; }
  /* Навигация идет ДО футера в обычном потоке страницы */
  .bottom-nav {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 26px auto 0;
    flex: 0 0 auto;
  }
  .site-footer {
    margin: 19px auto 0;
    padding: 15px 0 calc(20px + env(safe-area-inset-bottom));
  }
}

/* 2026-11-11: гость видит только «Главная» и «Кабинет»; после входа — все три. */
.auth-only { display: none !important; }
.is-authenticated .nav__panel .nav__link.auth-only { display: block !important; }
.is-authenticated .bottom-nav .bottom-nav__item.auth-only { display: flex !important; }
@media (max-width: 767px) {
  .bottom-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-authenticated .bottom-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  /* Убираем пустоту между баннером и блоком тарифов. */
  .pricing { margin-top: 76px; }
}

/* Нижняя навигация — часть страницы, не закрепляется за экраном.
   За навигацией идёт футер, который завершает документ. */
@media (max-width: 767px) {
  .page, .page.page--inner {
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: clip;
  }
  .page main,
  .page.page--inner main.inner-main {
    flex: 0 0 auto; /* перекрывает стили внутренних страниц */
  }
  .page .bottom-nav {
    position: static;
    inset: auto;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 24px auto 0;
    flex-shrink: 0;
  }
  .page .site-footer {
    margin: 18px auto 0;
    padding: 16px 0 calc(20px + env(safe-area-inset-bottom));
    flex-shrink: 0;
  }
}

/* Закреплённая нижняя навигация: одно положение на всех мобильных страницах. */
@media (max-width: 767px) {
  .page,
  .page.page--inner {
    /* Не обрезаем фиксированную панель родительским контейнером. */
    overflow: visible;
    padding-bottom: 0;
  }

  .page .bottom-nav,
  .page.page--inner .bottom-nav {
    position: fixed;
    z-index: 1000;
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(440px, calc(100% - 28px));
    height: 70px;
    margin: 0;
    flex-shrink: 0;
  }

  /* Когда пользователь долистает до конца, ссылки футера видны над панелью. */
  .page .site-footer,
  .page.page--inner .site-footer {
    margin-top: 18px;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 350px) {
  .page .bottom-nav,
  .page.page--inner .bottom-nav {
    width: calc(100% - 20px);
    height: 66px;
  }
}