.page {
  overflow-x: clip;
  overflow-wrap: anywhere;
}

body.page {
  font-size: max(11px, var(--fs-base, 1rem));
}

img,
video,
canvas,
iframe,
svg,
table {
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: var(--container-max, 1680px);
  margin-inline: auto;
  padding-inline: 4px;
}

.grid > *,
.grid--cards > *,
.grid--videos > *,
.hub__grid > *,
.hub__main > *,
.hub__head > *,
.hub__intro > *,
.hub__meta,
.hub__meta > *,
.hub__actions > *,
.section__head > *,
.page-head > *,
.lead-block > *,
.lead-block__text > *,
.product-hero > *,
.product-hero__body > *,
.product-details > *,
.details-grid > *,
.contacts > *,
.steps > *,
.promises > *,
.benefits > *,
.playlist__list > li,
.endscreen__grid > *,
.testimonial__head > *,
.breadcrumbs > * {
  min-width: 0;
}

h1,
h2,
h3,
h4,
.hub__title,
.hub__video-title,
.section__title,
.page-head__title,
.product-hero__title,
.product-details__summary-title,
.lead-block__title,
.lead-form__title,
.cta__title,
.video-about__title,
.video-product__title,
.empty__title,
.thanks__title,
.error-page__title,
.faq__question-text,
.playlist__title,
.step__title {
  overflow-wrap: anywhere;
}

.hub__note,
.section__subtitle,
.page-head__text,
.product-hero__lead,
.product-hero__audience,
.product-details__summary-hint,
.lead-block__lead,
.cta__text,
.video-product__price,
.video-product__price-label,
.video-next,
.contact-card__value,
.contact-card__link,
.contact-card__note,
.thanks__text,
.thanks__note,
.error-page__text,
.empty__text,
.step__text,
.promise__text,
.benefit__text,
.details-block__text,
.testimonial__text,
.testimonial__author,
.testimonial__role,
.prose p,
.prose li {
  overflow-wrap: anywhere;
}

.benefit,
.promise,
.step,
.contact-card,
.testimonial__head,
.faq__question,
.product-details__summary,
.hub__actions,
.product-hero__actions,
.cta__actions,
.thanks__actions,
.error-page__actions,
.empty__actions {
  flex-wrap: wrap;
}

.page .badge,
.page .chip,
.product-hero__cat,
.video-product__label {
  flex-wrap: wrap;
}

.video-product__price > *,
.video-product__price-label {
  flex-shrink: 1;
  min-width: 0;
}

.page .btn {
  font-size: max(11px, var(--fs-sm, .9rem));
  white-space: normal;
  overflow-wrap: anywhere;
}

.page .btn--sm {
  font-size: max(11px, var(--fs-xs, .8125rem));
}

.page .btn--lg {
  font-size: max(11px, var(--fs-base, 1rem));
}

.page .eyebrow,
.page .badge,
.page .chip,
.page .breadcrumbs,
.page .field__hint,
.page .field__error,
.page .field__counter,
.page .product-card__cat,
.page .product-card__text,
.page .video-card__title,
.page .video-card__cat,
.page .site-footer__links,
.page .site-footer__bottom {
  font-size: max(11px, var(--fs-xs, .8125rem));
}

.site-header .site-header__inner {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding-block: 6px;
}

.site-header .site-header__actions {
  width: 100%;
  justify-content: center;
}

.site-header .site-header__actions .btn {
  width: 100%;
}

.site-header .mobile-nav,
.modal .modal__dialog,
.modal .modal__dialog--wide {
  max-width: 100%;
}

.site-header .nav,
.site-header .site-header__phone,
.site-header .burger,
.logo .logo__text,
.player .player__badges,
.player .player__time,
.player .player__volume,
.player .player__btn--text,
.player__bar [data-next],
.playlist .playlist__head,
.playlist-item .playlist-item__thumb,
.hub__grid .playlist,
.hub .hub__note,
.section .breadcrumbs,
.testimonial .testimonial__rating {
  display: none;
}

.hub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.hub__grid > * {
  min-width: 0;
}

.grid--cards,
.grid.grid--cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.playlist .playlist__list {
  max-height: none;
  padding-right: 0;
}

.playlist--scroll .playlist__list {
  flex-direction: column;
  padding-bottom: 0;
  overflow-x: hidden;
}

.playlist--scroll .playlist__list > li {
  width: auto;
}

.playlist .playlist-item {
  gap: 6px;
  padding: 6px;
}

.playlist .playlist-item__thumb {
  width: clamp(44px, 32%, 118px);
}

.field .field__counter,
.field .field__hint {
  white-space: normal;
  overflow-wrap: anywhere;
}

.prose table,
.prose pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 299.98px) {
  .page :where(p, span, a, li, dt, dd, td, th, label, button, summary, strong, em, div) {
    overflow-wrap: anywhere;
    hyphens: none;
  }

  .page .btn {
    padding-inline: .7em;
  }

  .page .badge,
  .page .chip,
  .product-hero__cat,
  .product-details__summary-hint {
    padding-inline: .6em;
  }

  .hub__meta {
    padding: var(--sp-3);
  }

  .product-details__summary {
    padding-inline: var(--sp-3);
    padding-inline-end: calc(var(--sp-3) + 2.4em);
  }

  .product-hero__cover,
  .product-card__media,
  .video-card__media {
    border-radius: var(--r-sm);
  }
}

@media (min-width: 300px) {
  .container {
    padding-inline: clamp(10px, 4vw, 20px);
  }

  .site-header .site-header__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 16px);
    padding-block: clamp(8px, 2vw, 14px);
  }

  .site-header .site-header__actions {
    width: auto;
    justify-content: flex-end;
  }

  .site-header .site-header__actions .btn {
    width: auto;
  }

  .site-header .burger {
    display: inline-flex;
  }

  .logo .logo__text {
    display: inline-flex;
  }

  .player .player__badges {
    display: flex;
  }

  .player .player__time {
    display: inline-flex;
  }

  .player .player__volume {
    display: flex;
  }

  .player .player__btn--text {
    display: inline-flex;
  }

  .player__bar [data-next] {
    display: inline-flex;
  }

  .playlist .playlist__head {
    display: flex;
  }

  .playlist-item .playlist-item__thumb {
    display: block;
  }

  .hub__grid .playlist {
    display: flex;
  }

  .hub .hub__note {
    display: block;
  }

  .section .breadcrumbs {
    display: flex;
  }

  .testimonial .testimonial__rating {
    display: inline-flex;
  }

  .field .field__counter {
    white-space: nowrap;
  }

  .playlist .playlist-item {
    gap: clamp(6px, .9vw, 12px);
    padding: clamp(5px, .7vw, 9px);
  }

  .playlist .playlist-item__thumb {
    width: clamp(64px, 32%, 118px);
  }

  .hub__grid {
    gap: clamp(12px, 3vw, 18px);
  }

  .grid--cards,
  .grid.grid--cards {
    gap: clamp(10px, 3vw, 14px);
  }

  .playlist .playlist__list,
  .playlist--scroll .playlist__list {
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: none;
    padding: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }

  .playlist .playlist__list > li,
  .playlist--scroll .playlist__list > li {
    flex: 0 0 auto;
    width: min(76vw, 280px);
    scroll-snap-align: start;
  }

  .playlist .playlist-item {
    height: 100%;
  }
}

@media (min-width: 515px) {
  .page {
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  .hub__title,
  .hub__video-title,
  .section__title,
  .page-head__title,
  .product-hero__title,
  .product-details__summary-title,
  .lead-block__title,
  .lead-form__title,
  .cta__title,
  .video-about__title,
  .video-product__title,
  .empty__title,
  .thanks__title,
  .error-page__title,
  .faq__question-text,
  .playlist__title,
  .step__title,
  .hub__note,
  .section__subtitle,
  .page-head__text,
  .product-hero__lead,
  .product-hero__audience,
  .lead-block__lead,
  .cta__text,
  .empty__text,
  .step__text,
  .promise__text,
  .benefit__text,
  .details-block__text,
  .prose p,
  .prose li {
    overflow-wrap: break-word;
  }

  .video-product__price-label {
    flex-shrink: 0;
  }

  .container {
    padding-inline: clamp(16px, 4vw, 28px);
  }

  .page .btn {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .grid--cards,
  .grid.grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2.4vw, 18px);
  }

  .playlist .playlist__list,
  .playlist--scroll .playlist__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.6vw, 12px);
    max-height: none;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .playlist .playlist__list > li,
  .playlist--scroll .playlist__list > li {
    width: auto;
  }

  .playlist .playlist-item {
    height: 100%;
  }
}

@media (min-width: 920px) {
  .container {
    padding-inline: clamp(24px, 4vw, 44px);
  }

  .site-header .nav {
    display: flex;
  }

  .site-header .site-header__phone {
    display: inline-flex;
  }

  .site-header .burger {
    display: none;
  }

  .site-header .mobile-nav {
    display: none;
  }

  .hub__grid {
    grid-template-columns: minmax(0, 1fr) var(--playlist-w-lg, 320px);
    gap: clamp(16px, 2vw, 24px);
  }

  .grid--cards,
  .grid.grid--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .playlist .playlist__list,
  .playlist--scroll .playlist__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(610px, 68vh);
    padding: 0 4px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .playlist .playlist__list > li,
  .playlist--scroll .playlist__list > li {
    flex: 0 1 auto;
    width: auto;
  }

  .playlist .playlist-item {
    height: auto;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: clamp(32px, 4vw, 64px);
  }

  .hub__grid {
    grid-template-columns: minmax(0, 1fr) var(--playlist-w, 384px);
    gap: 24px;
  }

  .grid--cards,
  .grid.grid--cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .playlist .playlist__list,
  .playlist--scroll .playlist__list {
    max-height: min(610px, 72vh);
  }
}

@media (min-width: 2000px) {
  body.page {
    font-size: max(17px, var(--fs-base, 1rem));
  }

  .container {
    max-width: var(--container-max, 1680px);
    padding-inline: 64px;
  }

  .hub__grid {
    gap: 28px;
  }

  .grid--cards,
  .grid.grid--cards {
    gap: 22px;
  }

  .playlist .playlist__list,
  .playlist--scroll .playlist__list {
    max-height: min(720px, 74vh);
  }

  .playlist .playlist__title {
    font-size: 17px;
  }

  .playlist .playlist-item__title {
    font-size: 14.5px;
  }

  .playlist .playlist-item__cat {
    font-size: 12.5px;
  }
}

@media (min-width: 3000px) {
  body.page {
    font-size: max(19px, var(--fs-base, 1rem));
  }

  .container {
    max-width: var(--container-max, 1680px);
  }

  .playlist .playlist__title {
    font-size: 19px;
  }

  .playlist .playlist-item__title {
    font-size: 16px;
  }

  .playlist .playlist-item__cat {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .playlist .playlist__list,
  .playlist--scroll .playlist__list {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .page .btn,
  .page .chip,
  .page .product-card,
  .page .video-card {
    transition-duration: .01ms;
  }
}
