/* Header — desktop (Frame 1597884534, Figma 46:15)
   Механика: docs/header-behavior.md (fixed + spacer + pointer-events) */

html[data-layout="desktop"] .page-index::before {
  content: "";
  display: block;
  height: calc(22rem + 52rem);
}

html[data-layout="desktop"] .header {
  position: absolute;
  top: 22rem;
  left: 0;
  right: 0;
  z-index: 100;
  width: calc(var(--design-w, 1920) * 1rem);
  max-width: 100%;
  margin-inline: auto;
  pointer-events: none;
}

html[data-layout="desktop"] .header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1083rem;
  height: 52rem;
  margin: 0 auto;
  padding: 0 42rem 0 22rem;
  box-sizing: border-box;
  border-radius: 39rem;
  background: var(--color-header-bg);
  box-shadow: 0 0 4rem var(--color-header-shadow);
  pointer-events: none;
}

html[data-layout="desktop"] .header__logo {
  display: block;
  flex-shrink: 0;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="desktop"] .header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-layout="desktop"] .header__actions {
  display: flex;
  align-items: center;
  gap: 32rem;
  flex-shrink: 0;
}

html[data-layout="desktop"] .header__rustore {
  display: block;
  flex-shrink: 0;
  width: 126rem;
  height: 38rem;
  border-radius: 35rem;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="desktop"] .header__rustore img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-layout="desktop"] .header__menu {
  display: block;
  flex-shrink: 0;
  width: 21rem;
  height: 8rem;
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="desktop"] .header__menu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Header — mobile: fixed (sticky при scroll), как Kutukov; blur не нужен — bg непрозрачный */

html[data-layout="mobile"] .page-index::before {
  content: "";
  display: block;
  height: calc(22rem + 52rem);
}

html[data-layout="mobile"] .header {
  position: fixed;
  top: 22rem;
  left: 0;
  right: 0;
  z-index: 100;
  width: calc(var(--design-w, 440) * 1rem);
  max-width: 100%;
  margin-inline: auto;
  pointer-events: none;
}

html[data-layout="mobile"] .header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 396rem;
  height: 52rem;
  margin: 0 auto;
  padding: 0 22rem 0 12rem;
  box-sizing: border-box;
  border-radius: 39rem;
  background: var(--color-header-bg);
  box-shadow: 0 0 4rem var(--color-header-shadow);
  pointer-events: none;
}

html[data-layout="mobile"] .header__logo {
  display: block;
  flex-shrink: 0;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="mobile"] .header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-layout="mobile"] .header__actions {
  display: flex;
  align-items: center;
  gap: 20rem;
  flex-shrink: 0;
}

html[data-layout="mobile"] .header__rustore {
  display: block;
  flex-shrink: 0;
  width: 126rem;
  height: 38rem;
  border-radius: 35rem;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="mobile"] .header__rustore img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-layout="mobile"] .header__menu {
  display: block;
  flex-shrink: 0;
  width: 21rem;
  height: 8rem;
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="mobile"] .header__menu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Brand / left card — desktop only (Frame 1597884529, Figma 3:126) */

html[data-layout="desktop"] .hero-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 22rem;
  width: 1083rem;
  margin: 32rem auto 0;
}

html[data-layout="desktop"] .brand {
  flex-shrink: 0;
  width: 389rem;
  margin: 0;
}

html[data-layout="desktop"] .brand__card {
  position: relative;
  width: 389rem;
  height: 555rem;
  box-sizing: border-box;
  overflow: hidden;
  border: 1rem solid var(--color-brand-card-border);
  border-radius: 35rem;
  background: var(--color-brand-card-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="desktop"] .brand__title,
html[data-layout="mobile"] .brand__title {
  position: absolute;
  left: 36rem;
  top: 36rem;
  z-index: 2;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 52rem;
  font-weight: 600;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

html[data-layout="desktop"] .brand__subtitle,
html[data-layout="mobile"] .brand__subtitle {
  position: absolute;
  left: 36rem;
  top: 111rem;
  z-index: 2;
  width: 317rem;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 16rem;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text-muted);
}

html[data-layout="desktop"] .brand__art,
html[data-layout="mobile"] .brand__art {
  position: absolute;
  left: 62rem;
  top: 216rem;
  z-index: 1;
  width: 417rem;
  height: 364rem;
  pointer-events: none;
}

html[data-layout="desktop"] .brand__art img,
html[data-layout="mobile"] .brand__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

html[data-layout="desktop"] .brand__slider,
html[data-layout="mobile"] .brand__slider {
  position: absolute;
  left: 15rem;
  top: 464rem;
  z-index: 3;
  width: 359rem;
  height: 76rem;
  box-sizing: border-box;
  border-radius: 55rem;
  background: var(--color-brand-slider-bg);
  box-shadow: 0 0 4rem var(--color-brand-slider-shadow);
  backdrop-filter: blur(17.5rem);
  -webkit-backdrop-filter: blur(17.5rem);
  touch-action: none;
  user-select: none;
  --mask-x: 39rem;
  --mask-r: 37rem;
}

/* Текст на месте; круг — ластик с мягким краем (mask), без каши из наслоения */
html[data-layout="desktop"] .brand__slider-label-wrap,
html[data-layout="mobile"] .brand__slider-label-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24rem 0 84rem;
  box-sizing: border-box;
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(
      circle at var(--mask-x) 50%,
      transparent 0,
      transparent calc(var(--mask-r) * 0.78),
      rgba(0, 0, 0, 0.35) calc(var(--mask-r) * 0.92),
      #000 var(--mask-r)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent max(0px, calc(var(--mask-x) - var(--mask-r) + 8px)),
      #000 max(0px, calc(var(--mask-x) - var(--mask-r) + 8px))
    );
  mask-image:
    radial-gradient(
      circle at var(--mask-x) 50%,
      transparent 0,
      transparent calc(var(--mask-r) * 0.78),
      rgba(0, 0, 0, 0.35) calc(var(--mask-r) * 0.92),
      #000 var(--mask-r)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent max(0px, calc(var(--mask-x) - var(--mask-r) + 8px)),
      #000 max(0px, calc(var(--mask-x) - var(--mask-r) + 8px))
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

html[data-layout="desktop"] .brand__slider-label,
html[data-layout="mobile"] .brand__slider-label {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 24rem;
  font-weight: 500;
  line-height: normal;
  color: #ffffff;
  white-space: nowrap;
  text-align: center;
}

html[data-layout="desktop"] .brand__slider-knob,
html[data-layout="mobile"] .brand__slider-knob {
  position: absolute;
  left: 6rem;
  top: 5rem;
  z-index: 1;
  width: 66rem;
  height: 66rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

html[data-layout="desktop"] .brand__slider-knob:active,
html[data-layout="mobile"] .brand__slider-knob:active {
  cursor: grabbing;
}

html[data-layout="desktop"] .brand__slider-knob img,
html[data-layout="mobile"] .brand__slider-knob img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Featured carousel — desktop (Figma 1:29 + 41:131/141/151)
   Layered Mask Shift: рамка + dots статичны; copy/media dual-slot */

html[data-layout="desktop"] .featured {
  flex-shrink: 0;
  width: 672rem;
}

html[data-layout="desktop"] .featured {
  cursor: pointer;
}

html[data-layout="desktop"] .featured__card {
  position: relative;
  width: 672rem;
  height: 555rem;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 35rem;
  background: var(--color-featured-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="desktop"] .featured__stage,
html[data-layout="mobile"] .featured__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

html[data-layout="desktop"] .featured__copy,
html[data-layout="mobile"] .featured__copy {
  position: absolute;
  left: 36rem;
  top: 36rem;
  bottom: 52rem;
  width: 296rem;
  z-index: 2;
}

html[data-layout="desktop"] .featured__copy-slot,
html[data-layout="mobile"] .featured__copy-slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

html[data-layout="desktop"] .featured__copy-slot.is-active,
html[data-layout="mobile"] .featured__copy-slot.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

html[data-layout="desktop"] .featured__copy-slot.is-animating,
html[data-layout="mobile"] .featured__copy-slot.is-animating {
  visibility: visible;
  transition: none;
}

html[data-layout="desktop"] .featured__copy-slot.is-enter,
html[data-layout="desktop"] .featured__copy-slot.is-exit,
html[data-layout="mobile"] .featured__copy-slot.is-enter,
html[data-layout="mobile"] .featured__copy-slot.is-exit {
  visibility: visible;
}

html[data-layout="desktop"] .featured__copy-slot.is-enter-from-right,
html[data-layout="mobile"] .featured__copy-slot.is-enter-from-right {
  opacity: 0;
  visibility: visible;
  transform: translate3d(36rem, 0, 0);
  transition: none;
}

html[data-layout="desktop"] .featured__copy-slot.is-enter-from-left,
html[data-layout="mobile"] .featured__copy-slot.is-enter-from-left {
  opacity: 0;
  visibility: visible;
  transform: translate3d(-36rem, 0, 0);
  transition: none;
}

html[data-layout="desktop"] .featured__copy-slot.is-exit-left,
html[data-layout="mobile"] .featured__copy-slot.is-exit-left {
  opacity: 0;
  transform: translate3d(-36rem, 0, 0);
}

html[data-layout="desktop"] .featured__copy-slot.is-exit-right,
html[data-layout="mobile"] .featured__copy-slot.is-exit-right {
  opacity: 0;
  transform: translate3d(36rem, 0, 0);
}

html[data-layout="desktop"] .featured__title,
html[data-layout="mobile"] .featured__title {
  margin: 0;
  max-width: 263rem;
  font-family: var(--font-family-base);
  font-size: 32rem;
  font-weight: 600;
  line-height: normal;
  color: #ffffff;
  text-transform: uppercase;
}

html[data-layout="desktop"] .featured__quote,
html[data-layout="mobile"] .featured__quote {
  margin: 0 0 8rem;
  max-width: 296rem;
  font-family: var(--font-family-base);
  font-size: 14rem;
  font-weight: 500;
  line-height: normal;
  color: var(--color-featured-quote);
}

html[data-layout="desktop"] .featured__media,
html[data-layout="mobile"] .featured__media {
  position: absolute;
  left: 357rem;
  top: 28rem;
  width: 287rem;
  height: 499rem;
  z-index: 1;
  border-radius: 25rem;
  overflow: hidden;
}

html[data-layout="desktop"] .featured__media-slot,
html[data-layout="mobile"] .featured__media-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

html[data-layout="desktop"] .featured__media-slot.is-active,
html[data-layout="mobile"] .featured__media-slot.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

html[data-layout="desktop"] .featured__media-slot.is-animating,
html[data-layout="mobile"] .featured__media-slot.is-animating {
  visibility: visible;
  transition: none;
}

html[data-layout="desktop"] .featured__media-slot.is-enter,
html[data-layout="desktop"] .featured__media-slot.is-exit,
html[data-layout="mobile"] .featured__media-slot.is-enter,
html[data-layout="mobile"] .featured__media-slot.is-exit {
  visibility: visible;
}

html[data-layout="desktop"] .featured__media-slot.is-enter-from-right,
html[data-layout="mobile"] .featured__media-slot.is-enter-from-right {
  opacity: 0;
  visibility: visible;
  transform: translate3d(40rem, 0, 0);
  transition: none;
}

html[data-layout="desktop"] .featured__media-slot.is-enter-from-left,
html[data-layout="mobile"] .featured__media-slot.is-enter-from-left {
  opacity: 0;
  visibility: visible;
  transform: translate3d(-40rem, 0, 0);
  transition: none;
}

html[data-layout="desktop"] .featured__media-slot.is-exit-left,
html[data-layout="mobile"] .featured__media-slot.is-exit-left {
  opacity: 0;
  transform: translate3d(-40rem, 0, 0);
}

html[data-layout="desktop"] .featured__media-slot.is-exit-right,
html[data-layout="mobile"] .featured__media-slot.is-exit-right {
  opacity: 0;
  transform: translate3d(40rem, 0, 0);
}

html[data-layout="desktop"] .featured__media-slot img,
html[data-layout="mobile"] .featured__media-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25rem;
}

html[data-layout="desktop"] .featured__dots,
html[data-layout="mobile"] .featured__dots {
  position: absolute;
  left: 36rem;
  top: 511rem;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6rem;
  width: 170rem;
  height: 8rem;
}

/* Серая подложка; белый fill — scaleX 0→1 за время автосмены (JS) */
html[data-layout="desktop"] .featured__dot,
html[data-layout="mobile"] .featured__dot {
  position: relative;
  flex-shrink: 0;
  width: 38rem;
  height: 8rem;
  padding: 0;
  border: none;
  border-radius: 15rem;
  background: var(--color-featured-dot);
  overflow: hidden;
  cursor: pointer;
}

html[data-layout="desktop"] .featured__dot-fill,
html[data-layout="mobile"] .featured__dot-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 15rem;
  background: var(--color-featured-dot-active);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

html[data-layout="desktop"] .featured__dot:focus-visible,
html[data-layout="mobile"] .featured__dot:focus-visible {
  outline: 2rem solid #ffffff;
  outline-offset: 2rem;
}

/* Subscribe — desktop (Frame 55:70)
   hero ends 661; block top 692 → margin 31 */

html[data-layout="desktop"] .subscribe {
  width: 1083rem;
  margin: 31rem auto 0;
}

html[data-layout="desktop"] .subscribe__card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  width: 1083rem;
  height: 217rem;
  padding: 20rem 52rem 21rem 36rem;
  border: 1rem solid var(--color-subscribe-border);
  border-radius: 35rem;
  background: var(--color-subscribe-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="desktop"] .subscribe__left {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 410rem;
}

html[data-layout="desktop"] .subscribe__title {
  margin: 16rem 0 0;
  font-family: var(--font-family-base);
  font-size: 32rem;
  font-weight: 600;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

html[data-layout="desktop"] .subscribe__features {
  display: flex;
  flex-direction: column;
  gap: 21rem;
  margin: 22rem 0 0;
  padding: 0;
  list-style: none;
}

html[data-layout="desktop"] .subscribe__feature {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12rem;
}

html[data-layout="desktop"] .subscribe__feature-icon {
  flex-shrink: 0;
  width: 36rem;
  height: 36rem;
}

html[data-layout="desktop"] .subscribe__feature-text {
  margin: 0;
  max-width: 290rem;
  font-family: var(--font-family-base);
  font-size: 14rem;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text);
}

html[data-layout="desktop"] .subscribe__right {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8rem;
  width: 466rem;
  margin-top: 0;
}

html[data-layout="desktop"] .subscribe__price {
  box-sizing: border-box;
  width: 466rem;
  height: 106rem;
  padding: 22rem 22rem 0;
  border-radius: 25rem;
  background: linear-gradient(
    90deg,
    var(--color-subscribe-price-from) 0%,
    var(--color-subscribe-price-to) 87.5%
  );
  box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.05);
}

html[data-layout="desktop"] .subscribe__price-value {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 32rem;
  font-weight: 500;
  line-height: normal;
  color: #ffffff;
  white-space: nowrap;
}

html[data-layout="desktop"] .subscribe__price-note {
  margin: 6rem 0 0;
  font-family: var(--font-family-base);
  font-size: 14rem;
  font-weight: 400;
  line-height: normal;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

html[data-layout="desktop"] .subscribe__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 466rem;
  height: 62rem;
  border-radius: 20rem;
  background: var(--color-subscribe-cta);
  box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.05);
  font-family: var(--font-family-base);
  font-size: 18rem;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

html[data-layout="desktop"] .subscribe__cta-main {
  color: #ffffff;
}

html[data-layout="desktop"] .subscribe__cta-free {
  margin-left: 0.3em;
  color: var(--color-subscribe-cta-muted);
}

/* Footer — desktop (Frame 38:17)
   subscribe ends 692+217=909; footer top 949 → margin 40 */

html[data-layout="desktop"] .footer {
  width: 1083rem;
  margin: 40rem auto 0;
}

html[data-layout="desktop"] .footer__card {
  position: relative;
  box-sizing: border-box;
  width: 1083rem;
  height: auto;
  min-height: 95rem;
  padding: 22rem 0;
  border: 1rem solid var(--color-footer-border);
  border-radius: 25rem;
  background: var(--color-footer-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="desktop"] .footer__company {
  position: absolute;
  left: 42rem;
  top: 22rem;
}

html[data-layout="desktop"] .footer__company-name {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 22rem;
  font-weight: 600;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

html[data-layout="desktop"] .footer__company-meta {
  margin: 4rem 0 0;
  font-family: var(--font-family-base);
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: normal;
}

html[data-layout="desktop"] .footer__company-meta a {
  color: inherit;
  text-decoration: none;
}

html[data-layout="desktop"] .footer__company-meta a:hover,
html[data-layout="desktop"] .footer__company-meta a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

html[data-layout="desktop"] .footer__legal {
  position: absolute;
  left: 459rem;
  top: 22rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  max-width: 510rem;
}

html[data-layout="desktop"] .footer__legal-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family-base);
  font-size: 16rem;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text-muted);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

html[data-layout="desktop"] .footer__legal-line {
  display: block;
}

html[data-layout="desktop"] .footer__legal-link:hover,
html[data-layout="desktop"] .footer__legal-link:focus-visible {
  color: var(--color-text);
}

html[data-layout="desktop"] .footer__legal-link:focus-visible {
  outline: 2rem solid var(--color-text);
  outline-offset: 2rem;
}

html[data-layout="desktop"] .footer__rustore {
  position: absolute;
  left: 989rem;
  top: 22rem;
  display: block;
  width: 52rem;
  height: 52rem;
  overflow: hidden;
  border-radius: 30rem;
  box-shadow: 0 0 4rem rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  cursor: pointer;
}

html[data-layout="desktop"] .footer__rustore img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile layout без макета: колонка 396, стек Brand → Featured → Subscribe → Footer */

html[data-layout="mobile"] .page-index {
  padding-bottom: 40rem;
}

html[data-layout="mobile"] .hero-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22rem;
  width: 396rem;
  margin: 24rem auto 0;
}

html[data-layout="mobile"] .brand {
  flex-shrink: 0;
  width: 396rem;
  margin: 0;
}

html[data-layout="mobile"] .brand__card {
  position: relative;
  width: 396rem;
  height: 555rem;
  box-sizing: border-box;
  overflow: hidden;
  border: 1rem solid var(--color-brand-card-border);
  border-radius: 35rem;
  background: var(--color-brand-card-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="mobile"] .brand__subtitle {
  width: 324rem;
}

html[data-layout="mobile"] .brand__slider {
  width: 366rem;
}

/* Featured: desktop-композиция через zoom (не transform:scale — иначе
   ломаются CSS-transition у слотов и hit-testing в Chrome). */
html[data-layout="mobile"] .featured {
  position: relative;
  flex-shrink: 0;
  width: 396rem;
  height: calc(555rem * 396 / 672);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

html[data-layout="mobile"] .featured__card {
  position: relative;
  width: 672rem;
  height: 555rem;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 35rem;
  background: var(--color-featured-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
  transform: scale(calc(396 / 672));
  transform-origin: top left;
}

@supports (zoom: 1) {
  html[data-layout="mobile"] .featured__card {
    transform: none;
    zoom: calc(396 / 672);
  }
}

/* Прозрачный слой жестов над карточкой; снизу щель под dots */
html[data-layout="desktop"] .featured__swipe {
  display: none;
}

html[data-layout="mobile"] .featured__swipe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 36rem;
  z-index: 5;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

html[data-layout="mobile"] .featured__dots {
  z-index: 6;
}

/* Subscribe — вертикальный стек: features → price → CTA */
html[data-layout="mobile"] .subscribe {
  width: 396rem;
  margin: 22rem auto 0;
}

html[data-layout="mobile"] .subscribe__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20rem;
  box-sizing: border-box;
  width: 396rem;
  height: auto;
  padding: 24rem 22rem;
  border: 1rem solid var(--color-subscribe-border);
  border-radius: 35rem;
  background: var(--color-subscribe-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="mobile"] .subscribe__left {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
}

html[data-layout="mobile"] .subscribe__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 28rem;
  font-weight: 600;
  line-height: normal;
  color: var(--color-text);
  white-space: normal;
}

html[data-layout="mobile"] .subscribe__features {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  margin: 18rem 0 0;
  padding: 0;
  list-style: none;
}

html[data-layout="mobile"] .subscribe__feature {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12rem;
}

html[data-layout="mobile"] .subscribe__feature-icon {
  flex-shrink: 0;
  width: 36rem;
  height: 36rem;
}

html[data-layout="mobile"] .subscribe__feature-text {
  margin: 0;
  max-width: none;
  font-family: var(--font-family-base);
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
}

html[data-layout="mobile"] .subscribe__right {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8rem;
  width: 100%;
  margin-top: 0;
}

html[data-layout="mobile"] .subscribe__price {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 106rem;
  padding: 22rem;
  border-radius: 25rem;
  background: linear-gradient(
    90deg,
    var(--color-subscribe-price-from) 0%,
    var(--color-subscribe-price-to) 87.5%
  );
  box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.05);
}

html[data-layout="mobile"] .subscribe__price-value {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 32rem;
  font-weight: 500;
  line-height: normal;
  color: #ffffff;
  white-space: nowrap;
}

html[data-layout="mobile"] .subscribe__price-note {
  margin: 6rem 0 0;
  font-family: var(--font-family-base);
  font-size: 14rem;
  font-weight: 400;
  line-height: normal;
  color: rgba(255, 255, 255, 0.6);
  white-space: normal;
}

html[data-layout="mobile"] .subscribe__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  min-height: 62rem;
  padding: 14rem 16rem;
  border-radius: 20rem;
  background: var(--color-subscribe-cta);
  box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.05);
  font-family: var(--font-family-base);
  font-size: 18rem;
  font-weight: 500;
  line-height: normal;
  white-space: normal;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

html[data-layout="mobile"] .subscribe__cta-main {
  color: #ffffff;
}

html[data-layout="mobile"] .subscribe__cta-free {
  margin-left: 0.3em;
  color: var(--color-subscribe-cta-muted);
}

/* Footer — mobile: company + RuStore в ряд, политика в 2 строки ниже */
html[data-layout="mobile"] .footer {
  width: 396rem;
  margin: 22rem auto 0;
}

html[data-layout="mobile"] .footer__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "company rustore"
    "legal legal";
  column-gap: 16rem;
  row-gap: 14rem;
  align-items: center;
  box-sizing: border-box;
  width: 396rem;
  height: auto;
  padding: 20rem 22rem;
  border: 1rem solid var(--color-footer-border);
  border-radius: 25rem;
  background: var(--color-footer-bg);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

html[data-layout="mobile"] .footer__company {
  position: static;
  grid-area: company;
  min-width: 0;
}

html[data-layout="mobile"] .footer__company-name {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 18rem;
  font-weight: 600;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

html[data-layout="mobile"] .footer__company-meta {
  margin: 4rem 0 0;
  font-family: var(--font-family-base);
  font-size: 13rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: normal;
}

html[data-layout="mobile"] .footer__company-meta a {
  color: inherit;
  text-decoration: none;
}

html[data-layout="mobile"] .footer__company-meta a:hover,
html[data-layout="mobile"] .footer__company-meta a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

html[data-layout="mobile"] .footer__legal {
  position: static;
  grid-area: legal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  max-width: 100%;
}

html[data-layout="mobile"] .footer__legal-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-family-base);
  font-size: 14rem;
  font-weight: 500;
  line-height: normal;
  color: var(--color-text-muted);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

html[data-layout="mobile"] .footer__legal-line {
  display: block;
}

html[data-layout="mobile"] .footer__legal-link:hover,
html[data-layout="mobile"] .footer__legal-link:focus-visible {
  color: var(--color-text);
}

html[data-layout="mobile"] .footer__legal-link:focus-visible {
  outline: 2rem solid var(--color-text);
  outline-offset: 2rem;
}

/* Legal modal — вне .page, fixed к viewport; скролл только у body модалки */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
}

.legal-modal[hidden] {
  display: none;
}

.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 44, 44, 0.55);
  cursor: pointer;
}

.legal-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(720rem, 100%);
  max-height: min(80vh, 900rem);
  padding: 36rem 40rem 32rem;
  border: 1rem solid var(--color-subscribe-border);
  border-radius: 35rem;
  background: var(--color-subscribe-bg);
  box-shadow: 0 0 24rem rgba(0, 0, 0, 0.18);
  font-family: var(--font-family-base);
  color: var(--color-text);
}

.legal-modal__close {
  position: absolute;
  top: 18rem;
  right: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 40rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(44, 44, 44, 0.08);
  cursor: pointer;
}

.legal-modal__close:hover,
.legal-modal__close:focus-visible {
  background: rgba(44, 44, 44, 0.14);
}

.legal-modal__close:focus-visible {
  outline: 2rem solid var(--color-text);
  outline-offset: 2rem;
}

.legal-modal__close-icon {
  position: relative;
  display: block;
  width: 16rem;
  height: 16rem;
}

.legal-modal__close-icon::before,
.legal-modal__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 2rem;
  border-radius: 1rem;
  background: var(--color-text);
}

.legal-modal__close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.legal-modal__close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.legal-modal__title {
  margin: 0 48rem 20rem 0;
  flex-shrink: 0;
  font-size: 24rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.legal-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8rem;
  font-size: 15rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  -webkit-overflow-scrolling: touch;
}

.legal-modal__body h3 {
  margin: 18rem 0 8rem;
  font-size: 16rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}

.legal-modal__body h3:first-child {
  margin-top: 0;
}

.legal-modal__body p {
  margin: 0 0 12rem;
}

.legal-modal__body ul {
  margin: 0 0 12rem;
  padding-left: 22rem;
}

.legal-modal__body li {
  margin-bottom: 6rem;
}

.legal-modal__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-modal__note {
  margin-top: 16rem;
  color: var(--color-text-muted);
  font-size: 13rem;
}

html.is-legal-modal-open,
html.is-legal-modal-open body {
  overflow: hidden;
}

html[data-layout="mobile"] .legal-modal {
  padding: 16px;
  align-items: flex-end;
}

html[data-layout="mobile"] .legal-modal__dialog {
  width: 100%;
  max-width: 396rem;
  max-height: 88vh;
  padding: 28rem 22rem 24rem;
  border-radius: 28rem;
}

html[data-layout="mobile"] .legal-modal__title {
  margin-right: 44rem;
  font-size: 20rem;
}

html[data-layout="mobile"] .legal-modal__body {
  font-size: 14rem;
}

html[data-layout="mobile"] .legal-modal__close {
  top: 12rem;
  right: 12rem;
  width: 36rem;
  height: 36rem;
}

html[data-layout="mobile"] .footer__rustore {
  position: static;
  grid-area: rustore;
  display: block;
  width: 52rem;
  height: 52rem;
  overflow: hidden;
  border-radius: 30rem;
  box-shadow: 0 0 4rem rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  cursor: pointer;
  justify-self: end;
  align-self: center;
}

html[data-layout="mobile"] .footer__rustore img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}