@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=Montserrat:wght@300;400;500;600;700&family=Unbounded:wght@700;800&display=swap');

:root {
  color-scheme: dark;
  --color-bg: #0d0f12;
  --color-surface: #15181d;
  --color-text: #f2f0eb;
  --color-muted: #a4a7ad;
  --color-line: rgba(242, 240, 235, 0.16);
  --color-accent: #d8ff57;
  --container: 1240px;
  --space-page: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

.container {
  width: min(100% - (var(--space-page) * 2), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  transform: translateY(-200%);
  background: var(--color-accent);
  color: #10120d;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}

.site-header.is-scrolled {
  border-color: var(--color-line);
  background: rgba(13, 15, 18, 0.76);
  backdrop-filter: blur(18px);
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand__mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  font-size: 0.8rem;
}

.site-nav {
  display: flex;
  gap: clamp(1.2rem, 3vw, 3rem);
  margin-left: auto;
  margin-right: 2rem;
}

.site-nav__link {
  position: relative;
  color: var(--color-muted);
  font-size: 0.82rem;
  transition: color 180ms ease;
}

.site-nav__link::after {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--color-accent);
  content: "";
  transition: transform 240ms var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-text);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menu-toggle__icon {
  display: grid;
  gap: 0.35rem;
}

.menu-toggle__icon span {
  display: block;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
}

.screen,
.section {
  position: relative;
  isolation: isolate;
}

.screen--intro {
  display: grid;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 38%, rgba(216, 255, 87, 0.09), transparent 24rem),
    var(--color-bg);
}

.screen__content {
  position: relative;
  z-index: 1;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.eyebrow {
  margin: 0 0 2rem;
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  max-width: 10ch;
  margin-bottom: 2rem;
  font-size: clamp(3.5rem, 9vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.86;
}

h1 em,
h2 em {
  color: var(--color-accent);
  font-style: normal;
}

.screen__lead {
  max-width: 27rem;
  margin-bottom: 2.5rem;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: 12rem;
  padding: 1rem 1.1rem 1rem 1.2rem;
  border: 1px solid var(--color-line);
  border-radius: 100vmax;
  font-size: 0.84rem;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 200ms var(--ease-out);
}

.button:hover,
.button:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #10120d;
  transform: translateY(-0.2rem);
}

.screen__orb {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(216, 255, 87, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.screen__orb--one {
  width: min(50vw, 45rem);
  aspect-ratio: 1;
  right: -8vw;
  top: 20%;
}

.screen__orb--two {
  width: min(26vw, 22rem);
  aspect-ratio: 1;
  right: 17vw;
  top: 36%;
  border-color: rgba(242, 240, 235, 0.1);
}

.section {
  min-height: 70svh;
  padding: 8rem 0;
  border-top: 1px solid var(--color-line);
}

.section--placeholder {
  display: grid;
  align-items: center;
  background: var(--color-surface);
}

.section--placeholder:nth-of-type(odd) {
  background: var(--color-bg);
}

.site-footer {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.75rem;
}

.site-footer__inner {
  min-height: 5rem;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .site-header__inner {
    min-height: 4.5rem;
  }

  .site-nav {
    position: absolute;
    inset: 4.5rem var(--space-page) auto;
    display: none;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--color-line);
    background: rgba(21, 24, 29, 0.96);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav__link {
    font-size: 1rem;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .screen__content {
    padding-top: 7rem;
  }

  h1,
  h2 {
    font-size: clamp(3.4rem, 17vw, 6rem);
  }

  .screen__orb--one {
    right: -45vw;
    top: 28%;
    width: 125vw;
  }

  .screen__orb--two {
    right: 8vw;
    top: 48%;
    width: 55vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* First screen from docs/1 screen.txt */
body {
  background: #080a0d;
  color: #fffdf4;
  font-family: 'Montserrat', Arial, sans-serif;
}

.hero-header,
.hero__content {
  width: min(calc(100% - 3rem), 1060px);
}

.hero {
  position: relative;
  min-height: 100svh;
  height: clamp(720px, 59.43vw, 832px);
  overflow: hidden;
  background: #05070a url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/UwEK7rYTaEODw112mD2q4g.png') center / cover no-repeat;
}

.hero::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 5, 8, .1), transparent 58%, rgba(4, 4, 6, .18));
  content: '';
  pointer-events: none;
}

.hero-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
}

.brand { display: inline-flex; align-items: center; gap: 1rem; }
.brand__bars { display: flex; align-items: center; gap: 4px; width: 49px; height: 37px; }
.brand__bars i { display: block; width: 3px; border-radius: 9px; background: #fffdf4; }
.brand__bars i:nth-child(1) { height: 9px; }
.brand__bars i:nth-child(2) { height: 22px; }
.brand__bars i:nth-child(3) { height: 32px; }
.brand__bars i:nth-child(4), .brand__bars i:nth-child(5), .brand__bars i:nth-child(6) { background: #ed131c; }
.brand__bars i:nth-child(4) { height: 36px; }
.brand__bars i:nth-child(5) { height: 29px; }
.brand__bars i:nth-child(6) { height: 20px; }
.brand__bars i:nth-child(7) { height: 30px; }
.brand__bars i:nth-child(8) { height: 24px; }
.brand__bars i:nth-child(9) { height: 14px; }
.brand__name { display: grid; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.08; }
.brand__name span:last-child { color: #ed131c; }

.hero-nav { display: flex; gap: 4.2rem; margin-left: 4.8rem; }
.hero-nav a { position: relative; font-size: 14px; transition: color .2s ease; }
.hero-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: #fb1825; content: ''; transform: scaleX(0); transition: transform .25s var(--ease-out); }
.hero-nav a:hover { color: #ff6a6e; }
.hero-nav a:hover::after { transform: scaleX(1); }

.header-cta { display: inline-flex; align-items: center; gap: 1.1rem; padding: 5px 6px 5px 30px; border-radius: 40px; background: #fffdf4; color: #101114; font-size: 16px; font-weight: 600; transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.round-arrow { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #101114; color: #fff; font-family: Arial, sans-serif; font-size: 34px; line-height: 1; transition: transform .25s var(--ease-out), background .25s ease; }
.round-arrow--small { width: 45px; height: 45px; font-size: 25px; }
.cta-arrow { display: block; width: 29px; height: 24px; }
.primary-cta:hover .round-arrow, .header-cta:hover .round-arrow { transform: rotate(-45deg); }

.menu-toggle { display: none; border: 0; background: transparent; cursor: pointer; }
.menu-toggle__label { margin-right: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.menu-toggle__lines { display: inline-grid; gap: 5px; vertical-align: middle; }
.menu-toggle__lines i { display: block; width: 25px; height: 1px; background: currentColor; }
.mobile-menu { display: none; }

.hero__content { position: relative; z-index: 2; height: calc(100% - 86px); padding-top: clamp(2rem, 1.95vw, 27px); }
.hero__copy { width: min(100%, 635px); }
.hero__eyebrow { display: flex; align-items: center; gap: 1.75rem; margin-bottom: 1.55rem; font-size: clamp(17px, 1.57vw, 22px); letter-spacing: .12em; text-transform: uppercase; }
.hero__eyebrow-line { width: 84px; height: 2px; background: #fb1825; }
.hero__title { margin: 0 0 1.3rem; font-family: 'Unbounded', 'Arial Black', sans-serif; font-weight: 800; letter-spacing: -.04em; line-height: .94; text-transform: lowercase; }
.hero__title span { display: block; }
.hero__title-main { font-size: clamp(48px, 6.28vw, 88px); color: #fff; }
.hero__title-accent { margin-left: -2px; font-size: clamp(62px, 8.79vw, 123px); color: #fb1825; }
.hero__description { max-width: 533px; margin: 0 0 2.2rem 8px; color: #cac9d3; font-family: 'Montserrat', Arial, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: -.05em; line-height: 130%; }
.hero__description strong { font-weight: 600; }
.hero__description span { font-weight: 400; }
.primary-cta { display: inline-flex; align-items: center; justify-content: space-between; width: min(405px, 100%); min-height: 86px; padding: 12px 12px 12px 70px; border-radius: 42px; background: linear-gradient(90deg, #fb4241, #fa1926); font-size: 20px; font-weight: 600; letter-spacing: -.05em; transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.primary-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 42px rgba(251, 24, 37, .26); }
.hero__signature { position: absolute; top: 35px; right: 3.2%; margin: 0; color: #fff; font-family: 'Caveat', cursive; font-size: clamp(38px, 4.3vw, 60px); line-height: .92; transform: rotate(-1deg); }
.hero__credentials { position: absolute; top: 170px; right: 2.7%; margin: 0; color: #fff; font-size: 15px; line-height: 1; transform: rotate(-1deg); }
.hero__expert { position: absolute; z-index: 1; right: 1.8%; bottom: -1px; width: min(47vw, 660px); max-height: 91%; object-fit: contain; object-position: bottom center; pointer-events: none; }
.hero__expert--mobile { display: none; }

.hero__benefits { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; column-gap: 14px; align-items: center; width: min(calc(100% - 3rem), 913px); min-height: 82px; padding: 14px 28px; border: 1px solid rgba(89,86,86,.9); border-radius: 20px; background: rgba(10,13,15,.93); }
.benefit { display: flex; align-items: center; gap: 16px; min-width: 0; }
.benefit__icon { display: block; width: 53px; height: 53px; flex: 0 0 auto; color: rgba(89,86,86,.55); }
.benefit__icon svg { width: 100%; height: 100%; }
.benefit__text { display: grid; gap: 2px; min-width: 0; font-size: 14px; letter-spacing: -.05em; line-height: 1.25; }
.benefit__text strong, .benefit__text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benefit__text strong { font-weight: 500; }
.benefit__text span { font-weight: 300; }
.benefit-divider { width: 1px; height: 37px; background: rgba(89,86,86,.9); }
.future-section { display: grid; min-height: 35vh; place-items: center; border-top: 1px solid rgba(255,255,255,.1); background: #080a0d; color: rgba(255,255,255,.35); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .hero-nav { gap: 2rem; margin-left: 2rem; }
  .header-cta { padding-left: 18px; font-size: 13px; }
  .hero__credentials { right: 1.5rem; }
  .hero__signature { right: 2rem; }
  .hero__benefits { width: calc(100% - 3rem); }
}

@media (max-width: 800px) {
  .hero { height: auto; min-height: 100svh; padding-top: 72px; background-position: 58% center; }
  .hero-header {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    width: min(calc(100% - 2rem), 1060px);
    min-height: 72px;
    margin-inline: auto;
    padding-block: .7rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(5, 7, 10, .78);
    backdrop-filter: blur(14px) saturate(.85);
    transition: background-color .3s ease, box-shadow .3s ease;
  }
  .hero-header.is-scrolled {
    background: rgba(5, 7, 10, .94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  }
  .hero-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { position: fixed; z-index: 19; top: 72px; right: 1.5rem; left: 1.5rem; display: grid; gap: 1.15rem; max-height: 0; overflow: hidden; padding: 0 1.25rem; border: 1px solid transparent; background: rgba(8,10,13,.96); transition: max-height .35s var(--ease-out), padding .35s var(--ease-out), border-color .35s ease; }
  .mobile-menu.is-open { max-height: 360px; padding-block: 1.25rem; border-color: rgba(255,255,255,.16); }
  .mobile-menu a { font-size: 15px; }
  .hero__content { height: auto; padding-top: clamp(4rem, 14vw, 8rem); padding-bottom: 180px; }
  .hero__eyebrow { margin-bottom: 1.25rem; }
  .hero__title-main { font-size: clamp(42px, 13vw, 78px); }
  .hero__title-accent { font-size: clamp(58px, 18vw, 104px); }
  .hero__description { margin-left: 0; font-size: 16px; }
  .hero__desktop-break { display: none; }
  .primary-cta { min-height: 72px; padding-left: 1.8rem; font-size: 16px; }
  .round-arrow { width: 52px; height: 52px; font-size: 28px; }
  .hero__signature { top: 38%; right: 1.5rem; font-size: 46px; }
  .hero__credentials { top: 46%; right: 1.5rem; font-size: 12px; }
  .hero__expert--desktop { display: none; }
  .hero__expert {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(100%, 430px);
    height: auto;
    max-height: none;
    margin: -.35rem auto -.15rem;
    object-fit: contain;
    object-position: center bottom;
    opacity: .9;
  }
  .hero__expert--mobile { display: block; }
  .hero__benefits { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; width: calc(100% - 3rem); min-height: 0; margin-bottom: 1.5rem; padding: .7rem 1rem; }
  .benefit { min-height: 70px; }
  .benefit-divider { width: 100%; height: 1px; }
}

@media (max-width: 480px) {
  .container, .hero-header, .hero__content { width: min(calc(100% - 2rem), 1060px); }
  .hero { background-position: 62% center; }
  .hero__eyebrow { gap: .8rem; font-size: 13px; }
  .hero__eyebrow-line { width: 55px; }
  .hero__description { margin-bottom: 1.6rem; line-height: 1.45; }
  .hero__signature, .hero__credentials { display: none; }
  .hero__expert {
    width: calc(100% + 1.5rem);
    max-width: 430px;
    margin: -.15rem -.75rem -.3rem;
    opacity: .84;
  }
  .hero__content { padding-bottom: 5rem; }
  .hero__benefits { width: calc(100% - 2rem); }
  .benefit__text { font-size: 12px; }
}

/* Reference scale: 2006 × 1094 composition */
@media (min-width: 801px) {
  .hero-header {
    display: flex;
    width: calc(100% - 240px);
    max-width: none;
  }

  .hero__content {
    width: 100%;
    height: calc(100% - 86px);
    margin: 0;
    padding: 2.1vw 0 0 8.14vw;
  }

  .hero__copy { width: 45.4vw; }
  .hero__eyebrow { gap: 2.2vw; margin-bottom: 1.4vw; font-size: 1.57vw; }
  .hero__eyebrow-line { width: 6.1vw; }
  .hero__title { margin-bottom: 2.55vw; font-family: 'Unbounded', 'Arial Black', sans-serif; font-weight: 800; line-height: 100%; text-transform: uppercase; }
  .hero__title-main { font-size: 87px; line-height: 100%; color: #fff; }
  .hero__title-accent { font-size: 123px; line-height: 100%; color: #fb1825; }
  .hero__description { max-width: 533px; margin-left: .4vw; margin-bottom: 3vw; font-size: 22px; }
  .primary-cta { width: 28.93vw; min-height: 0; height: 6.15vw; padding: .85vw .85vw .85vw 5vw; font-size: 1.43vw; }
  .primary-cta .round-arrow { width: 4.43vw; height: 4.43vw; font-size: 2.5vw; }
  .hero__signature { top: 3.4vw; right: auto; left: 77.1vw; font-size: 4.3vw; }
  .hero__credentials { top: 12.4vw; right: auto; left: 77.1vw; font-size: 1.06vw; }
  .hero__expert { right: -.4vw; bottom: -.1vw; width: 61.5vw; max-height: none; }
  .hero__benefits { width: 65.2vw; min-height: 82px; padding: 14px 28px; }
  .benefit { gap: 16px; }
  .benefit__icon { width: 53px; height: 53px; }
  .benefit__text { gap: 2px; font-size: 14px; }
  .benefit-divider { height: 37px; }
}

/* Second screen: audience section */
.screen-two {
  position: relative;
  min-height: 948px;
  overflow: hidden;
  background: #010101;
  color: #fffdf4;
}

.screen-two__intro {
  position: absolute;
  z-index: 2;
  top: 58px;
  left: max(calc((100% - 1160px) / 2), 2rem);
}

.screen-two__eyebrow {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0 0 45px;
  color: #fffdf4;
  font-size: 22px;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-two__eyebrow span {
  display: block;
  width: 84px;
  height: 2px;
  background: #fb1825;
}

.screen-two__intro h2 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-two__intro h2 em {
  color: #fb1825;
  font-style: normal;
}

.screen-two__decor {
  position: absolute;
  z-index: 1;
  top: 41px;
  left: calc(50% - 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 592px;
  height: 342px;
  opacity: .95;
}

.screen-two__decor i {
  display: block;
  width: 22px;
  height: 58%;
  border-radius: 999px;
  background: linear-gradient(180deg, #f41c25 0%, rgba(162, 7, 13, .18) 100%);
}

.screen-two__decor i:nth-child(1),
.screen-two__decor i:nth-child(3),
.screen-two__decor i:nth-child(8),
.screen-two__decor i:nth-child(10) { height: 34%; opacity: .4; }
.screen-two__decor i:nth-child(2),
.screen-two__decor i:nth-child(7) { height: 63%; opacity: .72; }
.screen-two__decor i:nth-child(4),
.screen-two__decor i:nth-child(6) { height: 95%; opacity: .9; }
.screen-two__decor i:nth-child(5) { height: 100%; }
.screen-two__decor i:nth-child(9) { height: 70%; opacity: .65; }
.screen-two__decor i:nth-child(11) { height: 23%; opacity: .35; }

.audience-grid {
  position: absolute;
  z-index: 2;
  top: 258px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, 283px);
  gap: 10px;
  width: 1156px;
  transform: translateX(-50%);
}

.audience-card {
  position: relative;
  height: 490px;
  overflow: hidden;
  border-radius: 15px;
  background: #050505 var(--card-image) center / 100% 100% no-repeat;
}

.audience-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, #000 100%);
}

.audience-card__line {
  position: absolute;
  z-index: 1;
  top: 324px;
  left: var(--line-left, 20px);
  width: 106px;
  height: 1px;
  background: linear-gradient(90deg, #fb1825 0%, rgba(251, 24, 37, .06) 100%);
}

.audience-card h3,
.audience-card p { position: absolute; z-index: 1; left: 20px; margin: 0; color: #fffdf4; }
.audience-card h3 { top: 232px; width: 243px; font-size: 25px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.audience-card p { top: 340px; width: 243px; font-size: 16px; font-weight: 300; line-height: normal; }
.audience-card:nth-child(2) h3 { left: 17px; }
.audience-card:nth-child(2) p { left: 18px; }

.age-panel {
  position: absolute;
  z-index: 3;
  top: 767px;
  left: 50%;
  width: 1159px;
  height: 139px;
  overflow: hidden;
  border: 1px solid #595656;
  border-radius: 15px;
  background: #070707;
  transform: translateX(-50%);
}

.age-panel__icon { position: absolute; top: 43px; left: 45px; width: 56px; height: 55px; }
.age-panel__line { position: absolute; top: 23px; left: 30px; width: 1px; height: 97px; background: linear-gradient(0deg, #fb1825 0%, rgba(251, 24, 37, .06) 100%); }
.age-panel__icon svg { width: 100%; height: 100%; }
.age-panel__main { position: absolute; top: 33px; left: 110px; width: 475px; }
.age-panel__heading { display: flex; align-items: baseline; gap: 18px; white-space: nowrap; }
.age-panel__age { margin: 0; color: #f41c25; font-size: 24px; font-weight: 700; line-height: 29px; }
.age-panel__main h3 { margin: 0; color: #fffdf4; font-size: 24px; font-weight: 700; line-height: 29px; }
.age-panel__main > p:last-child { margin: 0; color: #fffdf4; font-size: 17px; font-weight: 300; line-height: 1.25; }
.age-panel__support { position: absolute; top: 46px; left: 663px; width: 152px; margin: 0; color: #fffdf4; font-size: 10px; font-weight: 300; line-height: 1.25; }
.age-panel__photo { position: absolute; top: 1px; left: 815px; width: 207px; height: 138px; object-fit: contain; }
.age-panel__note { position: absolute; top: 18px; left: 1041px; margin: 0; color: #aeaeae; font-family: 'Caveat', cursive; font-size: 19px; line-height: .9; transform: rotate(-6.5deg); }
.screen-two__heart { position: absolute; z-index: 4; top: 812px; left: calc(50% + 22px); display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid #f41c25; border-radius: 50%; color: #f41c25; font-size: 29px; line-height: 1; }

@media (max-width: 800px) {
  .screen-two { min-height: auto; padding: 4rem 1rem 2rem; }
  .screen-two__intro, .audience-grid, .age-panel, .screen-two__decor, .screen-two__heart { position: relative; top: auto; left: auto; transform: none; }
  .screen-two__intro { margin-bottom: 2.5rem; }
  .screen-two__eyebrow { gap: 1rem; margin-bottom: 2rem; font-size: 14px; }
  .screen-two__eyebrow span { width: 55px; }
  .screen-two__intro h2 { max-width: none; font-size: clamp(26px, 8vw, 40px); white-space: normal; }
  .screen-two__decor { display: none; }
  .audience-grid { grid-template-columns: 1fr; width: 100%; }
  .audience-card { width: 100%; max-width: 360px; height: 490px; margin-inline: auto; }
  .age-panel { width: 100%; max-width: 560px; height: auto; min-height: 390px; margin-top: 2rem; padding: 2rem; }
  .age-panel__icon, .age-panel__main, .age-panel__support, .age-panel__photo, .age-panel__note { position: static; }
  .age-panel__icon { display: block; margin-bottom: 1rem; }
  .age-panel__main { width: auto; }
  .age-panel__heading { flex-wrap: wrap; gap: .35rem; white-space: normal; }
  .age-panel__main h3 { font-size: 20px; }
  .age-panel__support { width: auto; margin-top: 1.5rem; font-size: 13px; }
  .age-panel__photo { display: block; width: 220px; max-width: 100%; height: auto; margin: 1rem 0 0 auto; }
  .age-panel__note { position: absolute; right: 1.5rem; bottom: 1.5rem; left: auto; }
  .screen-two__heart { display: none; }
}

/* Third screen: beginner pain points */
.screen-three {
  position: relative;
  min-height: 818px;
  overflow: hidden;
  background: #f5f6f7;
  color: #292929;
}

.screen-three__inner {
  position: relative;
  width: 1400px;
  height: 818px;
  margin-inline: auto;
}

.screen-three__label,
.screen-three__heading,
.screen-three__lead,
.problem-card {
  position: absolute;
  z-index: 4;
}

.screen-three__label {
  top: 50px;
  left: 118px;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 436px;
}

.screen-three__label p {
  width: max-content;
  flex: 0 0 auto;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-three__label span {
  display: block;
  width: 84px;
  height: 2px;
  margin-top: 1px;
  background: #fb1825;
}

.screen-three__heading {
  top: 99px;
  left: 118px;
  width: 900px;
}

.screen-three__heading h2,
.screen-three__heading p {
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-three__heading h2 {
  height: 40px;
  color: #292929;
}

.screen-three__heading p {
  height: 40px;
  margin-top: 12px;
  margin-left: 2px;
  color: #fb1825;
}

.screen-three__lead {
  top: 218px;
  left: 118px;
  width: 656px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.screen-three__lead strong {
  font-weight: 600;
}

.screen-three__lead span {
  font-weight: 400;
}

.screen-three__rings,
.screen-three__round,
.screen-three__headstock,
.screen-three__blur {
  position: absolute;
  pointer-events: none;
}

.screen-three__rings {
  z-index: 1;
  top: 57px;
  left: 817px;
  width: 460px;
  height: 303px;
  background: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/OrnT6z22dE-u23joLmKZDg.png') center / contain no-repeat;
}

.screen-three__round {
  z-index: 1;
  top: 119px;
  left: 861px;
  width: 368px;
  height: 241px;
  background: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/nUiLfo1PDUaccMDa4oLzEg.png') center / contain no-repeat;
}

.screen-three__headstock {
  z-index: 2;
  top: 70px;
  left: 756px;
  width: 523px;
  height: 290px;
  background: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/NMGXy5e9d0qYVdu4rZNgoA.png') center / contain no-repeat;
}

.screen-three__blur {
  z-index: 3;
  width: 77px;
  height: 175px;
  border-radius: 50%;
  background: #fff;
  filter: blur(50px);
  opacity: .88;
  transform-origin: 0 0;
}

.screen-three__blur--right {
  top: 221px;
  left: 1204px;
  transform: rotate(6.82deg);
}

.screen-three__blur--left {
  top: 200px;
  left: 791px;
  transform: rotate(6.82deg);
}

.screen-three__blur--top {
  top: 44px;
  left: 845px;
  filter: blur(30px);
  transform: rotate(49.89deg);
}

.problem-card {
  top: 361px;
  width: 377px;
  height: 409px;
  overflow: hidden;
  border-radius: 20px;
  background: #fbfbf9;
  box-shadow: 1px 7px 17px rgba(201, 201, 201, .1), 6px 30px 30px rgba(201, 201, 201, .09), 13px 67px 41px rgba(201, 201, 201, .05);
}

.problem-card--one { left: 120px; }
.problem-card--two { left: 512px; width: 376px; }
.problem-card--three { left: 903px; width: 377px; }

.problem-card__number {
  position: absolute;
  z-index: 3;
  top: 23px;
  left: 19px;
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border-radius: 50%;
  background: #fb1825;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
}

.problem-card__icon {
  position: absolute;
  z-index: 3;
  top: 179px;
  left: 17px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: #f7e4e1;
  color: #fb1825;
}

.problem-card__icon svg {
  width: 24px;
  height: 24px;
}

.problem-card h3,
.problem-card p {
  position: absolute;
  z-index: 3;
  left: 17px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
}

.problem-card h3 {
  top: 253px;
  width: 319px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.problem-card p {
  top: 284px;
  width: 289px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

.problem-card--two h3 { width: 290px; }
.problem-card--two p { top: 313px; width: 338px; font-weight: 500; }
.problem-card--three h3 { width: 290px; }
.problem-card--three p { top: 313px; width: 290px; font-weight: 500; }

.problem-card__art {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.problem-card__art--sheet {
  top: -1px;
  left: 56px;
  width: 321px;
  height: 225px;
}

.problem-card__art--laptop {
  top: 10px;
  left: 85px;
  width: 278px;
  height: 231px;
}

.problem-card__art--finger {
  top: 11px;
  left: 0;
  width: 377px;
  height: 213px;
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-three__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-three {
    min-height: auto;
    padding: 4.5rem 1rem 4rem;
  }

  .screen-three__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-three__rings,
  .screen-three__round,
  .screen-three__headstock,
  .screen-three__blur {
    display: none;
  }

  .screen-three__label,
  .screen-three__heading,
  .screen-three__lead,
  .problem-card {
    position: relative;
    top: auto;
    left: auto;
  }

  .screen-three__label {
    width: 100%;
    gap: 1rem;
  }

  .screen-three__label p { font-size: 14px; letter-spacing: .1em; }
  .screen-three__label span { width: 55px; }

  .screen-three__heading {
    width: 100%;
    margin-top: 2rem;
  }

  .screen-three__heading h2,
  .screen-three__heading p {
    font-size: clamp(25px, 7.6vw, 40px);
    height: auto;
    line-height: 1.05;
    white-space: normal;
  }

  .screen-three__heading p { margin-top: .7rem; }

  .screen-three__lead {
    width: 100%;
    margin-top: 2rem;
    font-size: 16px;
    line-height: 1.45;
  }

  .screen-three__desktop-break { display: none; }

  .problem-card {
    width: 100%;
    max-width: 377px;
    margin: 2.5rem auto 0;
  }

  .problem-card__art--sheet { left: 15%; width: 85%; }
  .problem-card__art--laptop { left: 24%; width: 74%; }
  .problem-card__art--finger { width: 100%; }
}

/* Fourth screen: why Birma Sound */
.screen-four {
  position: relative;
  min-height: 701px;
  overflow: hidden;
  background: #f5f6f7;
  color: #292929;
}

.screen-four__inner {
  position: relative;
  width: 1400px;
  height: 701px;
  margin-inline: auto;
}

.screen-four__label,
.screen-four__heading,
.screen-four__lead,
.screen-four__card {
  position: absolute;
}

.screen-four__label {
  top: 49px;
  left: 120px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 281px;
}

.screen-four__label p {
  width: 185px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-four__label span {
  display: block;
  width: 82px;
  height: 2px;
  margin-top: 1px;
  background: #fb1825;
}

.screen-four__heading {
  top: 104px;
  left: 119px;
  width: 663px;
}

.screen-four__heading h2,
.screen-four__heading p {
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-four__heading h2 {
  color: #292929;
  font-size: 60px;
}

.screen-four__heading p {
  margin-top: 15px;
  color: #fb1825;
  font-size: 52px;
}

.screen-four__lead {
  top: 106px;
  left: 774px;
  width: 501px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
}

.screen-four__card {
  top: 278px;
  width: 377px;
  height: 375px;
  overflow: visible;
  border-radius: 20px;
  box-shadow: 1px 7px 17px rgba(201, 201, 201, .1), 6px 30px 30px rgba(201, 201, 201, .09), 13px 67px 41px rgba(201, 201, 201, .05);
}

.screen-four__card--one {
  left: 120px;
  background: #f1f1f0;
}

.screen-four__card--two {
  left: 512px;
  background: #e80816;
}

.screen-four__card--three {
  left: 903px;
  height: 375px;
  background: #f2f1f0;
}

.screen-four__card h3,
.screen-four__card > p {
  position: absolute;
  z-index: 3;
  display: block;
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  white-space: pre-wrap;
}

.screen-four__card h3 {
  top: 36px;
  left: 36px;
  width: 280px;
  color: #292929;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.screen-four__card > p:not(.screen-four__note) {
  top: 117px;
  left: 36px;
  width: 190px;
  color: #292929;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.screen-four__card--two h3,
.screen-four__card--two > p:not(.screen-four__note) {
  color: #fffdf4 !important;
}

.screen-four__card--two h3 {
  width: 280px;
}

.screen-four__card--two > p:not(.screen-four__note) {
  top: 108px;
  width: 212px;
}

.screen-four__card--three h3 {
  width: 280px;
}

.screen-four__card--three > p:not(.screen-four__note) {
  top: 119px;
  width: 182px;
}

.screen-four__art {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.screen-four__art--headphones {
  top: 131px;
  left: 114px;
  width: 360px;
  height: 292px;
  object-fit: contain;
}

.screen-four__art--headstock {
  top: 70px;
  left: 6px;
  width: 385px;
  height: 353px;
  object-fit: contain;
}

.screen-four__art--pick {
  top: 265px;
  left: 139px;
  width: 106px;
  height: 110px;
  object-fit: contain;
}

.screen-four__note {
  z-index: 4 !important;
  color: #e80816;
  font-family: 'Caveat', cursive !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  transform-origin: 0 0;
}

.screen-four__note--one {
  top: 274px !important;
  left: 30px !important;
  width: 125px !important;
  transform: rotate(-6.5deg);
}

.screen-four__note--three {
  top: 236px !important;
  left: 37px !important;
  width: 125px !important;
  transform: rotate(-6.5deg);
}

.screen-four__note--two {
  top: 221px !important;
  left: 36px !important;
  width: 155px !important;
  color: #fffdf4 !important;
  transform: rotate(-2.64deg);
}

.screen-four__vector {
  position: absolute;
  z-index: 1;
  top: 123px;
  left: 67px;
  width: 327px;
  height: 300px;
  overflow: visible;
  filter: drop-shadow(-5px 8px 20px rgba(0, 0, 0, .1)) drop-shadow(-20px 30px 37px rgba(0, 0, 0, .09));
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-four__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-four {
    min-height: auto;
    padding: 4rem 1rem;
  }

  .screen-four__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-four__label,
  .screen-four__heading,
  .screen-four__lead,
  .screen-four__card {
    position: relative;
    top: auto;
    left: auto;
  }

  .screen-four__label {
    width: 100%;
    gap: 1rem;
  }

  .screen-four__label p {
    width: auto;
    font-size: 14px;
  }

  .screen-four__label span { width: 55px; }

  .screen-four__heading {
    width: 100%;
    margin-top: 2rem;
  }

  .screen-four__heading h2,
  .screen-four__heading p {
    font-size: clamp(29px, 9vw, 60px);
    white-space: normal;
  }

  .screen-four__heading p {
    margin-top: .35rem;
    font-size: clamp(25px, 8vw, 52px);
  }

  .screen-four__lead {
    width: 100%;
    margin-top: 2rem;
    font-size: 16px;
    line-height: 1.45;
  }

  .screen-four__card {
    width: 100%;
    max-width: 377px;
    margin: 2.5rem auto 0;
  }

  .screen-four__card--three { height: 375px; }
  .screen-four__art--headphones { left: 30%; width: 95%; }
  .screen-four__art--headstock { left: 2%; width: 103%; }
  .screen-four__vector { left: 18%; max-width: 87%; }
}

/* Fifth screen: course program */
.screen-five {
  position: relative;
  min-height: 1024px;
  overflow: hidden;
  background: #f5f6f7;
  color: #292929;
}

.screen-five__inner {
  position: relative;
  width: 1400px;
  height: 1024px;
  margin-inline: auto;
}

.screen-five__label,
.screen-five__heading,
.screen-five__lead,
.screen-five__script,
.screen-five__guitar,
.screen-five__guitar-fade,
.screen-five__glow,
.program-card,
.screen-five__button {
  position: absolute;
}

.screen-five__label {
  top: 40px;
  left: 120px;
  display: flex;
  align-items: center;
  gap: 27px;
  width: 392px;
}

.screen-five__label p {
  width: 283px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-five__label span {
  display: block;
  width: 82px;
  height: 2px;
  background: #fb1825;
}

.screen-five__heading {
  top: 120px;
  left: 119px;
  width: 836px;
}

.screen-five__heading h2,
.screen-five__heading p {
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: .96;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-five__heading h2 {
  margin-left: 6px;
  color: #292929;
  font-size: 48px;
}

.screen-five__heading p {
  margin-top: 10px;
  color: #fb1825;
  font-size: 55px;
}

.screen-five__heading p:last-child {
  margin-top: 10px;
  color: #292929;
}

.screen-five__lead {
  top: 308px;
  left: 119px;
  width: 831px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.screen-five__lead strong {
  font-weight: 700;
}

.screen-five__script {
  z-index: 2;
  top: 46px;
  left: 915px;
  width: 181px;
  color: #292929;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  line-height: .85;
  transform: rotate(-11.78deg);
  transform-origin: 0 0;
}

.screen-five__script span {
  display: block;
}

.screen-five__script span:nth-child(1) { margin-left: 3px; font-size: 55px; }
.screen-five__script span:nth-child(2) { font-size: 45px; }
.screen-five__script span:nth-child(3) { margin-left: 33px; font-size: 45px; }

.screen-five__guitar {
  z-index: 1;
  top: -11px;
  left: 730px;
  width: 766px;
  height: 511px;
  object-fit: contain;
  pointer-events: none;
}

.screen-five__guitar-fade {
  z-index: 2;
  top: 320px;
  left: 900px;
  width: 596px;
  height: 250px;
  background:
    linear-gradient(
      90deg,
      rgba(245, 246, 247, 0) 0%,
      rgba(245, 246, 247, 0) 26%,
      rgba(245, 246, 247, .36) 44%,
      rgba(245, 246, 247, .98) 68%,
      #f5f6f7 80%,
      #f5f6f7 100%
    ),
    linear-gradient(
      180deg,
      rgba(245, 246, 247, 0) 0%,
      rgba(245, 246, 247, .18) 14%,
      rgba(245, 246, 247, .78) 54%,
      #f5f6f7 88%,
      #f5f6f7 100%
    );
  filter: blur(14px);
  pointer-events: none;
}

.screen-five__glow {
  z-index: 0;
  top: 337px;
  left: 1054px;
  width: 183px;
  height: 469px;
  border-radius: 50%;
  background: #f8f8f5;
  filter: blur(64px);
  opacity: .9;
  transform: rotate(49.1deg);
  transform-origin: 0 0;
}

.program-card {
  z-index: 3;
  top: 399px;
  width: 377px;
  height: 484px;
  filter: drop-shadow(1px 7px 17px rgba(201, 201, 201, .1)) drop-shadow(6px 30px 30px rgba(201, 201, 201, .09)) drop-shadow(13px 67px 41px rgba(201, 201, 201, .05));
}

.program-card--base { left: 120px; }
.program-card--musicality { top: 401px; left: 511px; height: 482px; }
.program-card--hits { left: 903px; }

.program-card__surface {
  position: absolute;
  inset: 0 auto auto 0;
  width: 377px;
  height: 453px;
  border: 1px solid #fbf9f5;
  border-radius: 20px;
  background: #fbfaf6;
}

.program-card--musicality .program-card__surface { height: 451px; }
.program-card--hits .program-card__surface { height: 408px; }

.program-card__level {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 19px;
  display: grid;
  width: 112px;
  height: 28px;
  place-items: center;
  border: 1px solid #e6e5e2;
  border-radius: 50px;
  background: #e8e7e6;
}

.program-card__level span,
.program-card__lessons,
.program-card h3,
.program-card__promise,
.program-card__motto,
.program-card__list,
.program-card__result {
  position: absolute;
  z-index: 4;
}

.program-card__level span {
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.program-card__lessons {
  top: 25px;
  left: 152px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.program-card h3 {
  top: 66px;
  left: 19px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.program-card--hits h3 { top: 69px; left: 20px; }

.program-card__promise {
  top: 116px;
  left: 19px;
  width: 170px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.program-card--musicality .program-card__promise { left: 21px; width: 148px; }
.program-card--hits .program-card__promise { top: 145px; left: 19px; width: 217px; }

.program-card__motto {
  top: 142px;
  left: 225px;
  width: 113px;
  margin: 0;
  color: #e80816;
  font-family: 'Caveat', cursive;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.05;
  transform: rotate(-4.88deg);
}

.program-card__art {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.program-card__art--neck {
  top: 15px;
  left: 190px;
  width: 186px;
  height: 139px;
}

.program-card__art--hand {
  top: 103px;
  left: 239px;
  width: 138px;
  height: 91px;
}

.program-card__art--cassettes {
  top: 54px;
  left: 242px;
  width: 134px;
  height: 165px;
}

.program-card__list {
  top: 201px;
  left: 19px;
  display: grid;
  gap: 10px;
  width: 330px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.program-card__list li {
  position: relative;
  min-height: 16px;
  padding-left: 25px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.program-card__list li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #fb1825;
  border-radius: 50%;
  color: #fb1825;
  content: '✓';
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.program-card__result {
  top: 393px;
  left: 0;
  display: grid;
  gap: 6px;
  width: 377px;
  height: 91px;
  padding: 13px 20px;
  border-radius: 20px;
  background: #fb1825;
  color: #fffdf4;
}

.program-card--musicality .program-card__result { top: 391px; }
.program-card--hits .program-card__list { top: 224px; }

.program-card__result strong {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.program-card__result span {
  max-width: 323px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.screen-five__button {
  top: 930px;
  left: 511px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 377px;
  height: 60px;
  padding: 8px 8px 8px 54px;
  border-radius: 40px;
  background: #f20821;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.screen-five__button-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #101114;
}

.screen-five__button-arrow img {
  width: 22px;
  height: auto;
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-five__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-five {
    min-height: auto;
    padding: 4rem 1rem;
  }

  .screen-five__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-five__label,
  .screen-five__heading,
  .screen-five__lead,
  .program-card,
  .screen-five__button {
    position: relative;
    top: auto;
    left: auto;
  }

  .screen-five__label { width: 100%; gap: 1rem; }
  .screen-five__label p { width: auto; font-size: 14px; }
  .screen-five__label span { width: 55px; }

  .screen-five__heading {
    width: 100%;
    margin-top: 2rem;
  }

  .screen-five__heading h2,
  .screen-five__heading p {
    white-space: normal;
  }

  .screen-five__heading h2 { margin-left: 0; font-size: clamp(30px, 9vw, 48px); }
  .screen-five__heading p { margin-top: .4rem; font-size: clamp(29px, 9vw, 55px); }
  .screen-five__heading p:last-child { margin-top: .4rem; }

  .screen-five__desktop-break { display: none; }

  .screen-five__lead {
    width: 100%;
    margin-top: 2rem;
    font-size: 16px;
    line-height: 1.45;
  }

  .screen-five__script,
  .screen-five__guitar,
  .screen-five__guitar-fade,
  .screen-five__glow { display: none; }

  .program-card {
    width: 100%;
    max-width: 377px;
    margin: 2.5rem auto 0;
  }

  .program-card--musicality { top: auto; left: auto; }
  .program-card--hits { top: auto; left: auto; }
  .screen-five__button { width: 100%; max-width: 377px; margin: 2rem auto 0; }
}

/* Sixth screen: learning flow */
.screen-six {
  position: relative;
  min-height: 771px;
  overflow: hidden;
  background: #010101;
  color: #fff;
}

.screen-six__inner {
  position: relative;
  width: 1400px;
  height: 771px;
  margin-inline: auto;
}

.screen-six__label,
.screen-six__heading,
.screen-six__lead,
.flow-card {
  position: absolute;
}

.screen-six__label {
  top: 61px;
  left: 120px;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 324px;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-six__label i {
  display: block;
  width: 84px;
  height: 2px;
  flex: 0 0 auto;
  background: #fb1825;
}

.screen-six__label span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.screen-six__heading {
  top: 121px;
  left: 120px;
  width: 437px;
}

.screen-six__heading h2,
.screen-six__heading p {
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-six__heading h2 {
  width: max-content;
  color: #fff;
  font-size: 42px;
}

.screen-six__heading p {
  margin-top: 8px;
  color: #fb1825;
  font-size: 60.81px;
}

.screen-six__lead {
  top: 264px;
  left: 120px;
  width: 435px;
  margin: 0;
  color: #cac9d3;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.flow-card {
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  color: #fffdf4;
}

.flow-card--one,
.flow-card--two {
  width: 345.28px;
  height: 313px;
  top: 97px;
}

.flow-card--one { left: 580px; }
.flow-card--two { left: 935.28px; }

.flow-card--three,
.flow-card--four,
.flow-card--five {
  top: 420px;
  height: 277px;
}

.flow-card--three { left: 120px; width: 364.74px; }
.flow-card--four { left: 494.74px; width: 386.59px; }
.flow-card--five { left: 891.33px; width: 389.67px; }

.flow-card__image,
.flow-card__shade {
  position: absolute;
  inset: 0;
}

.flow-card__image {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.flow-card__image--one { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/MDBsHWWK7UuYhyjgbyw_RA.png'); }
.flow-card__image--two { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/kxp7bi0Lz0CmJKiO6wNsqw.png'); }
.flow-card__image--three { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/SHUE3u5k2UCr52NS4JT3_A.png'); }
.flow-card__image--four { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/TY3DSrAkoEmh1wOE2Lx1cw.png'); }
.flow-card__image--five { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/eqTECCwKNE6clT6ut5X64A.png'); }

.flow-card__shade {
  z-index: 1;
  border: 1px solid rgba(89, 86, 86, .95);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, #000 100%);
}

.flow-card__number {
  position: absolute;
  z-index: 2;
  top: 19px;
  left: 19px;
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border-radius: 50%;
  background: #fb1825;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 21.5px;
  font-weight: 500;
  line-height: 1;
}

.flow-card h3,
.flow-card p,
.flow-card__line {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.flow-card h3 {
  left: 19px;
  top: 168px;
  color: #fffdf4;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0 .34px #595656;
}

.flow-card__line {
  left: 21px;
  top: 217px;
  width: 130px;
  height: 1px;
  background: rgba(89, 86, 86, .95);
}

.flow-card p {
  left: 19px;
  top: 219px;
  width: calc(100% - 38px);
  color: #fffdf4;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14.15px;
  font-weight: 300;
  line-height: 1.2;
  text-shadow: 0 0 .34px #595656;
}

.flow-card--one h3,
.flow-card--two h3 { top: 199px; left: 21px; }
.flow-card--one .flow-card__line,
.flow-card--two .flow-card__line { top: 247px; left: 21px; }
.flow-card--one p,
.flow-card--two p { top: 250px; left: 21px; width: 309px; }
.flow-card--two .flow-card__number { left: 20px; }
.flow-card--three .flow-card__number { left: 19px; }
.flow-card--four .flow-card__number { left: 19px; }
.flow-card--five .flow-card__number { left: 20px; }
.flow-card--four h3 { left: 19px; }
.flow-card--five h3 { left: 19px; }
.flow-card--three p { top: 219px; }
.flow-card--four p { top: 219px; width: 325px; }
.flow-card--five p { top: 219px; width: 339px; }

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-six__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-six {
    min-height: auto;
    padding: 4rem 1rem 5rem;
  }

  .screen-six__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-six__label,
  .screen-six__heading,
  .screen-six__lead,
  .flow-card {
    position: relative;
    inset: auto;
  }

  .screen-six__label {
    width: 100%;
    gap: 1rem;
    font-size: 14px;
  }

  .screen-six__label i { width: 55px; }

  .screen-six__heading {
    width: 100%;
    margin-top: 2rem;
  }

  .screen-six__heading h2,
  .screen-six__heading p { white-space: normal; }
  .screen-six__heading h2 { width: 100%; }
  .screen-six__heading h2 { font-size: clamp(28px, 8vw, 42px); }
  .screen-six__heading p { margin-top: .45rem; font-size: clamp(36px, 11vw, 60px); }

  .screen-six__lead {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 16px;
    line-height: 1.45;
  }

  .flow-card {
    width: 100%;
    max-width: 390px;
    height: 277px;
    margin: 1.5rem auto 0;
  }

  .flow-card--one,
  .flow-card--two { height: 313px; }
  .flow-card__image { background-size: cover; }
  .flow-card h3 { top: 168px; }
  .flow-card--one h3,
  .flow-card--two h3 { top: 199px; }
}

/* Seventh screen: author's method */
.screen-seven {
  position: relative;
  min-height: 951px;
  overflow: hidden;
  background: #f5f6f7;
  color: #292929;
}

.screen-seven__inner {
  position: relative;
  width: 1400px;
  height: 951px;
  margin-inline: auto;
}

.screen-seven__label,
.screen-seven__heading,
.screen-seven__lead,
.method-card {
  position: absolute;
}

.screen-seven__label {
  top: 58px;
  left: 118px;
  display: flex;
  align-items: center;
  gap: 22px;
  width: 602px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-seven__label span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.screen-seven__label i {
  display: block;
  width: 84px;
  height: 2px;
  flex: 0 0 auto;
  background: #fb1825;
}

.screen-seven__heading {
  top: 106px;
  left: 118px;
  width: 940px;
  margin: 0;
  color: #292929;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 39.29px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.screen-seven__heading-accent {
  color: #fb1825;
}

.screen-seven__heading-line {
  display: inline-block;
  white-space: nowrap;
}

.screen-seven__lead {
  top: 216px;
  left: 120px;
  width: 558px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.method-card {
  overflow: hidden;
  border-radius: 20px;
  filter: drop-shadow(1px 7px 17px rgba(201, 201, 201, .1)) drop-shadow(6px 30px 30px rgba(201, 201, 201, .09));
}

.method-card--arrows,
.method-card--hands,
.method-card--right-hand,
.method-card--chords {
  width: 573px;
  height: 180px;
}

.method-card--arrows { left: 120px; top: 300px; }
.method-card--hands { left: 708px; top: 300px; }
.method-card--right-hand { left: 120px; top: 495px; }
.method-card--chords { left: 708px; top: 495px; }
.method-card--personal { left: 120px; top: 688px; width: 1161px; height: 182px; }

.method-card__surface,
.method-card__image {
  position: absolute;
}

.method-card__surface {
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: #fbfbf9;
}

.method-card--personal .method-card__surface {
  inset: 2px 0 0;
  background: #0f1011;
}

.method-card__image {
  z-index: 1;
  top: 0;
  right: 0;
  width: 236px;
  height: 180px;
  border-radius: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.method-card__image--arrows { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/lCgfjXlGqEir4ph59m4IYQ.png'); }
.method-card__image--hands { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/h12Yp2-_B0OL7xhqhJhkrA.png'); }
.method-card__image--right-hand { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/q4q4UUyJ0keh5P-VgynaxQ.png'); }
.method-card__image--chords { background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/hiM2GKoJk0uTABIJ2qNGdQ.png'); }

.method-card--personal .method-card__image {
  top: 2px;
  right: 0;
  width: 601px;
  background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/TUgoKZoq-0Otx3m5T9nwZg.png');
}

.method-card__number {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border-radius: 50%;
  background: #fb1825;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 21.56px;
  font-weight: 500;
  line-height: 1;
}

.method-card h3,
.method-card p {
  position: absolute;
  z-index: 2;
  left: 80px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
}

.method-card h3 {
  top: 20px;
  width: 242px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.method-card p {
  top: 76px;
  width: 228px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.28;
}

.method-card--hands h3 { width: 212px; }
.method-card--hands p { top: 100px; width: 232px; }
.method-card--personal h3 {
  top: 22px;
  width: 330px;
  color: #fffdf4;
}

.method-card--personal p {
  top: 54px;
  width: 428px;
  color: #fffdf4;
  line-height: 1.25;
}

.method-card--personal p strong {
  font-weight: 700;
}

.method-card__note {
  position: absolute;
  z-index: 3;
  font-family: 'Caveat', cursive;
  font-weight: 400;
  line-height: .92;
  white-space: nowrap;
}

.method-card__note--sound {
  top: 90px;
  left: 470px;
  color: #fffdf4;
  font-size: 23.49px;
  transform: rotate(-11.78deg);
}

.method-card__note--principles {
  top: 114px;
  left: 412px;
  color: #f41c25;
  font-size: 23.49px;
  transform: rotate(-3.87deg);
}

.method-card__note--favorites {
  top: 0;
  left: 1014px;
  color: #fffdf4;
  font-size: 23.49px;
  transform: rotate(-7.43deg);
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-seven__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-seven {
    min-height: auto;
    padding: 4rem 1rem 5rem;
  }

  .screen-seven__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-seven__label,
  .screen-seven__heading,
  .screen-seven__lead,
  .method-card {
    position: relative;
    inset: auto;
  }

  .screen-seven__label {
    width: 100%;
    gap: 1rem;
    font-size: 13px;
    letter-spacing: .08em;
  }

  .screen-seven__label span { white-space: normal; }
  .screen-seven__label i { width: 55px; }

  .screen-seven__heading {
    width: 100%;
    margin-top: 2rem;
    font-size: clamp(26px, 7vw, 39px);
  }

  .screen-seven__heading-line { white-space: normal; }

  .screen-seven__lead {
    width: 100%;
    margin-top: 1.5rem;
    font-size: 16px;
    line-height: 1.45;
  }

  .method-card,
  .method-card--personal {
    width: 100%;
    max-width: 573px;
    height: 220px;
    margin: 1.5rem auto 0;
  }

  .method-card--personal { height: 340px; }
  .method-card__image {
    z-index: 0;
    opacity: .58;
  }
  .method-card--personal .method-card__image { opacity: .5; }
  .method-card__surface {
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(251, 251, 249, .98) 0%,
      rgba(251, 251, 249, .94) 54%,
      rgba(251, 251, 249, .68) 76%,
      rgba(251, 251, 249, 0) 100%
    );
  }
  .method-card--personal .method-card__surface {
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(15, 16, 17, .96) 0%,
      rgba(15, 16, 17, .84) 56%,
      rgba(15, 16, 17, .58) 100%
    );
  }
  .method-card--personal .method-card__image {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: .62;
  }
  .method-card__number,
  .method-card h3,
  .method-card p { z-index: 3; }
  .method-card h3 { max-width: 58%; }
  .method-card p { max-width: 58%; top: 82px; }
  .method-card--hands p { top: 112px; }
  .method-card--personal h3,
  .method-card--personal p { max-width: 58%; }
  .method-card--personal p { top: 88px; line-height: 1.28; }
  .method-card__note { transform: rotate(-8deg) scale(.85); transform-origin: left top; }
}

/* Eighth screen: about the author */
.screen-eight {
  position: relative;
  min-height: 923px;
  overflow: hidden;
  background: #f5f6f7;
  color: #292929;
}

.screen-eight__inner {
  position: relative;
  width: 1400px;
  height: 923px;
  margin-inline: auto;
}

.screen-eight__expert,
.screen-eight__accent,
.screen-eight__label,
.screen-eight__heading,
.screen-eight__lead,
.expert-feature,
.screen-eight__button {
  position: absolute;
}

.screen-eight__expert {
  z-index: 2;
  top: 0;
  left: 0;
  width: 658px;
  height: 923px;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
}

.screen-eight__accent {
  z-index: 0;
  left: -4px;
  top: 168px;
  width: 499px;
  height: 516px;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 38%, #e20f21 38% 63%, transparent 63% 100%);
  opacity: .98;
}

.screen-eight__label {
  top: 48px;
  left: 681px;
  display: flex;
  align-items: center;
  gap: 27px;
  width: 301px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-eight__label i {
  display: block;
  width: 81px;
  height: 2px;
  flex: 0 0 auto;
  order: -1;
  background: #fb1825;
}

.screen-eight__label span {
  white-space: nowrap;
}

.screen-eight__heading {
  top: 105px;
  left: 681px;
  width: 511px;
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.screen-eight__heading span,
.screen-eight__heading strong {
  display: block;
}

.screen-eight__heading span { color: #292929; }
.screen-eight__heading strong { color: #fb1825; font-weight: inherit; }

.screen-eight__lead {
  top: 250px;
  left: 681px;
  width: 550px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.expert-feature {
  left: 681px;
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 46px;
}

.expert-feature--one { top: 325px; width: 546px; }
.expert-feature--two { top: 386px; width: 548px; }
.expert-feature--three { top: 447px; width: 546px; }
.expert-feature--four { top: 508px; width: 515px; }
.expert-feature--five { top: 569px; width: 546px; }
.expert-feature--six { top: 630px; width: 546px; }

.expert-feature__icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #f7e4e1;
}

.expert-feature__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #f41c25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.expert-feature p {
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.screen-eight__button {
  top: 731px;
  left: 680px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 340px;
  height: 80px;
  padding: 5px 5px 5px 65px;
  border-radius: 53px;
  background: #f20821;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 19.92px;
  font-weight: 500;
  line-height: 1;
}

.screen-eight__button-arrow {
  display: grid;
  width: 69px;
  height: 69px;
  place-items: center;
  border-radius: 50%;
  background: #101114;
}

.screen-eight__button-arrow img {
  width: 31px;
  height: auto;
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-eight__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-eight {
    min-height: auto;
    padding: 4rem 1rem 5rem;
  }

  .screen-eight__inner {
    width: 100%;
    height: auto;
    margin: 0;
    padding-top: 0;
  }

  .screen-eight__expert {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: calc(100% + 2rem);
    max-width: none;
    height: auto;
    margin: 1.5rem -1rem 0;
    transform: none;
    object-fit: initial;
    object-position: initial;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, .62) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 78%,
      rgba(0, 0, 0, .62) 90%,
      transparent 100%
    );
    filter: drop-shadow(0 18px 24px rgba(245, 246, 247, .86));
  }

  .screen-eight__accent { display: none; }

  .screen-eight__label,
  .screen-eight__heading,
  .screen-eight__lead,
  .expert-feature,
  .screen-eight__button {
    position: relative;
    inset: auto;
  }

  .screen-eight__label {
    width: 100%;
    gap: 1rem;
    font-size: 14px;
  }

  .screen-eight__label i { width: 55px; }
  .screen-eight__heading { width: 100%; margin-top: 2rem; font-size: clamp(38px, 11vw, 60px); }
  .screen-eight__lead { width: 100%; margin-top: 1.5rem; font-size: 16px; line-height: 1.45; }

  .expert-feature {
    width: 100%;
    margin-top: 1rem;
  }

  .expert-feature p { font-size: 16px; }
  .screen-eight__button { width: 100%; max-width: 340px; margin-top: .75rem; }
}

/* Ninth screen: student reviews */
.screen-nine {
  position: relative;
  min-height: 771px;
  overflow: hidden;
  background: #010101;
  color: #fff;
}

.screen-nine__inner {
  position: relative;
  width: 1400px;
  height: 771px;
  margin-inline: auto;
}

.screen-nine__heading,
.screen-nine__note,
.review-card {
  position: absolute;
}

.screen-nine__heading {
  top: 65px;
  left: 116px;
  width: 500px;
}

.screen-nine__heading h2,
.screen-nine__heading p {
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-nine__heading h2 {
  color: #fff;
  font-size: 80px;
}

.screen-nine__heading p {
  margin: 7px 0 0 4px;
  color: #fff;
  font-size: 36px;
}

.screen-nine__heading p span { color: #fb1825; }

.screen-nine__note {
  top: 78px;
  left: 827px;
  display: flex;
  flex-direction: column;
  color: #525252;
  font-family: 'Caveat', cursive;
  font-size: 46px;
  font-weight: 400;
  line-height: .8;
  transform: rotate(-6.48deg);
  transform-origin: left top;
}

.screen-nine__note::after {
  content: '';
  position: absolute;
  top: 124px;
  left: 15px;
  width: 320px;
  height: 1px;
  background: linear-gradient(90deg, #fb1825, rgba(251, 24, 37, .28));
  transform: rotate(-6.48deg);
  transform-origin: left center;
}

.screen-nine__note span:nth-child(2) { margin-left: 3px; }

.review-card {
  overflow: hidden;
  border: 1px solid #595656;
  border-radius: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.review-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse at 84% 18%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .24) 0%,
      rgba(0, 0, 0, .18) 35%,
      rgba(0, 0, 0, .58) 68%,
      rgba(0, 0, 0, .96) 100%
    );
  pointer-events: none;
}

.review-card--hero {
  left: 120px;
  top: 220px;
  width: 459px;
  height: 500px;
  background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/9uvVqB8J_0mzSW5hnE6svA.png');
}

.review-card--leonid {
  left: 589px;
  top: 220px;
  background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/ZWJCo3zyp0m-h4kaqvLmbg.png');
}

.review-card--igor {
  left: 589px;
  top: 475px;
  background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/ovvZFz8xnUWbWazNczvDdQ.png');
}

.review-card--zoya {
  left: 940px;
  top: 220px;
  background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/b6bzwkN0l0C1BNuE7ffMPQ.png');
}

.review-card--vita {
  left: 940px;
  top: 475px;
  background-image: url('https://con.xl.ru/2mgw9QzXC0q0EaMSXnfsIQ/images/Jaws01gDwE-iRi5LL8E6PA.png');
}

.review-card--small {
  width: 341px;
  height: 245px;
}

.review-card__play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #fb1825;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
}

.review-card__play span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fffdf4;
}

.review-card__quote,
.review-card h3,
.review-card__meta {
  position: absolute;
  z-index: 3;
  margin: 0;
}

.review-card__quote {
  top: 12px;
  right: 12px;
  width: 122px;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}

.review-card__quote::before {
  content: '“';
  display: block;
  margin-bottom: 2px;
  color: #fffdf4;
  font-size: 24px;
  line-height: .55;
}

.review-card__quote--hero {
  top: 37px;
  left: 26px;
  right: auto;
  width: 140px;
  height: 110px;
  overflow: hidden;
  padding: 31px 12px 0;
  border: 1px solid #595656;
  border-radius: 15px;
  font-size: 10px;
  line-height: .98;
}

.review-card__quote--hero::before { position: absolute; top: 9px; left: 9px; }

.review-card h3 {
  left: 18px;
  top: 166px;
  bottom: auto;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.review-card--hero h3 {
  left: 23px;
  top: 387px;
  bottom: auto;
  font-size: 31.69px;
}

.review-card--leonid h3,
.review-card--zoya h3,
.review-card--vita h3 {
  top: 156px;
}

.review-card__meta {
  right: 16px;
  bottom: 13px;
  left: 17px;
  display: grid;
  gap: 8px;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.review-card--hero .review-card__meta {
  left: 26px;
  right: 26px;
  top: 426px;
  bottom: auto;
  gap: 8px;
  width: 380px;
  font-size: 16px;
}

.review-card__meta span {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding-left: 0;
}

.review-card__meta img {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-nine__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-nine {
    min-height: auto;
    padding: 4rem 1rem 5rem;
  }

  .screen-nine__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-nine__heading,
  .screen-nine__note,
  .review-card {
    position: relative;
    inset: auto;
  }

  .screen-nine__heading { width: 100%; }
  .screen-nine__heading h2 { font-size: clamp(48px, 16vw, 80px); }
  .screen-nine__heading p { white-space: normal; font-size: clamp(23px, 8vw, 36px); }

  .screen-nine__note {
    margin: 2rem 0 1rem 55%;
    font-size: 34px;
  }

  .review-card,
  .review-card--hero,
  .review-card--small {
    left: auto;
    top: auto;
    width: 100%;
    max-width: 459px;
    margin: 1.5rem auto 0;
  }

  .review-card--hero { height: 500px; }
  .review-card--small { height: 245px; }
}

/* Tenth screen: pricing */
.screen-ten {
  position: relative;
  min-height: 923px;
  overflow: hidden;
  background: #f5f6f7;
  color: #292929;
}

.screen-ten__inner {
  position: relative;
  width: 1400px;
  height: 923px;
  margin-inline: auto;
}

.screen-ten__label,
.screen-ten__heading,
.pricing-card {
  position: absolute;
}

.screen-ten__label {
  top: 42px;
  left: 119px;
  display: flex;
  align-items: center;
  gap: 27px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.screen-ten__label i {
  display: block;
  width: 81px;
  height: 2px;
  flex: 0 0 auto;
  order: -1;
  background: #fb1825;
}

.screen-ten__label span { white-space: nowrap; }

.screen-ten__heading {
  top: 90px;
  left: 120px;
  width: 1091px;
  margin: 0;
  color: #292929;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-ten__heading span { color: #292929; }
.screen-ten__heading strong { color: #fb1825; font-weight: inherit; }

.pricing-card {
  top: 196px;
  width: 377px;
  height: 682px;
  padding: 27px 30px 0;
  border: 1px solid #999;
  border-radius: 20px;
  background: #f8f7f9;
}

.pricing-card--first { left: 111px; }
.pricing-card--master { left: 911px; }
.pricing-card--hits { left: 511px; border: 2px solid #fb1825; background: #fdf2f2; }

.pricing-card h3,
.pricing-card h4,
.pricing-card p,
.pricing-card ul { margin: 0; }

.pricing-card h3 {
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.pricing-card__intro {
  width: 300px;
  min-height: 32px;
  margin-top: 9px !important;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.08;
}

.pricing-card__intro strong,
.pricing-card__intro em { font-weight: 700; }

.pricing-card__intro em {
  color: #fb1825;
  font-style: normal;
}

.pricing-card--master .pricing-card__intro {
  width: 317px;
  white-space: nowrap;
}

.pricing-card h4 {
  position: absolute;
  top: 227px;
  left: 30px;
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 15px;
}

.pricing-card__feature + .pricing-card__feature { margin-top: 10px; }

.pricing-card__feature-icon {
  display: grid;
  width: 32px;
  height: 33px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: #f7e4e1;
  color: #fb1825;
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1;
}

.pricing-card__feature-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pricing-card__feature p {
  width: 270px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.08;
}

.pricing-card__feature p strong { font-weight: 700; }

.pricing-card--master .pricing-card__feature p { white-space: nowrap; }

.pricing-card__list {
  position: absolute;
  top: 257px;
  left: 30px;
  display: grid;
  gap: 10px;
  width: 310px;
  padding: 0 0 0 20px;
  list-style: none;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.pricing-card__list li {
  position: relative;
}

.pricing-card__list li::before {
  content: '✓';
  position: absolute;
  top: -1px;
  left: -20px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #fb1825;
  color: #fffdf4;
  font-size: 10px;
  font-weight: 700;
}

.pricing-card__price {
  position: absolute;
  top: 476px;
  left: 22px;
  width: 333px;
  height: 156px;
  padding: 19px 26px;
  border-radius: 20px;
  background: #efeff1;
}

.pricing-card__price del {
  display: block;
  color: #aeaeae;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.pricing-card__price strong {
  display: block;
  margin-top: 13px;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.pricing-card__button {
  position: absolute;
  top: 593px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 333px;
  height: 60px;
  padding: 4px 4px 4px 84px;
  border-radius: 40px;
  background: #f20821;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.pricing-card__button > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pricing-card__button > span:last-child {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: #101114;
}

.pricing-card__button img { width: 24px; height: auto; }

.pricing-card--master .pricing-card__button { padding-left: 24px; font-size: 14px; }
.pricing-card--hits .pricing-card__button { padding-left: 44px; font-size: 14px; }

/* The Master plan has the longest benefit description, so its section label
   and list need their own rhythm instead of colliding with the copy above. */
.pricing-card__badge {
  position: absolute;
  z-index: 2;
  top: -16px;
  left: 83px;
  display: grid;
  width: 212px;
  height: 31px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(90deg, #f41c25, #e80f1b);
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.pricing-card--master .pricing-card__list { top: 257px; gap: 8px; }
.pricing-card--hits .pricing-card__list { top: 257px; gap: 8px; }

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-ten__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-ten {
    min-height: auto;
    padding: 4rem 1rem 5rem;
  }

  .screen-ten__inner {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .screen-ten__label,
  .screen-ten__heading,
  .pricing-card {
    position: relative;
    inset: auto;
  }

  .screen-ten__label { width: 100%; gap: 1rem; font-size: 14px; }
  .screen-ten__label i { width: 55px; }
  .screen-ten__heading { width: 100%; margin-top: 2rem; font-size: clamp(31px, 9vw, 60px); white-space: normal; }

  .pricing-card,
  .pricing-card--first,
  .pricing-card--master,
  .pricing-card--hits {
    left: auto;
    top: auto;
    width: 100%;
    max-width: 377px;
    height: 682px;
    margin: 2.5rem auto 0;
  }
}

/* Eleventh screen: installment plan */
.screen-eleven {
  position: relative;
  min-height: 861px;
  overflow: hidden;
  background: #f8f7f7;
  color: #292929;
}

.screen-eleven__inner {
  position: relative;
  width: 1400px;
  height: 861px;
  margin-inline: auto;
}

.screen-eleven__heading,
.screen-eleven__intro,
.installment-benefit,
.screen-eleven__button,
.screen-eleven__art { position: absolute; }

.screen-eleven__heading {
  top: 58px;
  left: 118px;
  display: grid;
  gap: 0;
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.screen-eleven__heading span { color: #292929; }
.screen-eleven__heading strong { color: #fb1825; font-weight: inherit; }

.screen-eleven__intro {
  top: 203px;
  left: 120px;
  width: 550px;
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.installment-benefit {
  left: 118px;
  display: flex;
  align-items: flex-start;
  width: 486px;
}

.installment-benefit--no-fee { top: 284px; }
.installment-benefit--terms { top: 415px; left: 119px; }
.installment-benefit--online { top: 546px; left: 120px; }

.installment-benefit__icon {
  display: grid;
  width: 99px;
  height: 99px;
  flex: 0 0 99px;
  place-items: center;
  border-radius: 50%;
  color: #fb1825;
  background: #f7e4e1;
}

.installment-benefit__icon svg { width: 52px; height: 52px; }
.installment-benefit__icon img { width: 45px; height: 45px; object-fit: contain; }

.installment-benefit > div {
  padding-top: 10px;
  padding-left: 17px;
}

.installment-benefit h3 {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.23;
}

.installment-benefit p {
  width: 370px;
  margin: 15px 0 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.22;
}

.installment-benefit--online h3 { line-height: 1.22; }
.installment-benefit--online p { margin-top: 11px; }

.screen-eleven__button {
  top: 698px;
  left: 117px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 460px;
  height: 79px;
  padding: 7px 7px 7px 105px;
  border-radius: 53px;
  background: #f20821;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.screen-eleven__button > span:first-child { flex: 0 0 auto; }

.screen-eleven__button > span:last-child {
  display: grid;
  width: 65px;
  height: 65px;
  place-items: center;
  border-radius: 50%;
  background: #101114;
}

.screen-eleven__button img { width: 29px; height: auto; }

.screen-eleven__art {
  top: 54px;
  left: 677px;
  width: 603px;
  height: 753px;
  border-radius: 20px;
  object-fit: contain;
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-eleven__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-eleven { min-height: auto; padding: 4rem 1rem 5rem; }
  .screen-eleven__inner { width: 100%; height: auto; margin: 0; }
  .screen-eleven__heading,
  .screen-eleven__intro,
  .installment-benefit,
  .screen-eleven__button,
  .screen-eleven__art { position: relative; inset: auto; }
  .screen-eleven__heading { font-size: clamp(36px, 9vw, 60px); }
  .screen-eleven__intro { width: 100%; margin-top: 2rem; font-size: 18px; }
  .installment-benefit { width: 100%; max-width: 486px; margin-top: 2.5rem; }
  .installment-benefit__icon { width: 74px; height: 74px; flex-basis: 74px; }
  .installment-benefit__icon svg { width: 42px; height: 42px; }
  .installment-benefit > div { padding-top: 3px; padding-left: 14px; }
  .installment-benefit h3 { font-size: 18px; }
  .installment-benefit p { width: auto; font-size: 16px; }
  .screen-eleven__button { width: 100%; max-width: 460px; margin-top: 2.5rem; padding-left: 2rem; font-size: 17px; }
  .screen-eleven__art { display: block; width: 100%; max-width: 603px; height: auto; margin-top: 3rem; }
}

/* Twelfth screen: money-back guarantee */
.screen-twelve {
  position: relative;
  min-height: 495px;
  overflow: hidden;
  background: #fefdfc;
  color: #292929;
}

.screen-twelve__panel {
  position: relative;
  width: 1160px;
  height: 411px;
  margin: 42px auto 0;
  border-radius: 20px;
  background: #fefcfb;
  box-shadow: 0 4px 31px rgba(89, 86, 86, .13);
}

.guarantee-visual {
  position: absolute;
  top: 67px;
  left: 60px;
  display: grid;
  width: 210px;
  height: 210px;
  place-items: center;
  border-radius: 50%;
  color: #fb1825;
  background: #fcf2f3;
}

.guarantee-visual svg { width: 95px; height: 95px; }

.screen-twelve__copy {
  position: absolute;
  top: 67px;
  left: 298px;
  width: 862px;
}

.screen-twelve__copy h2 {
  width: 862px;
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 68.78px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-twelve__copy h2 span,
.screen-twelve__copy h2 strong { display: block; }
.screen-twelve__copy h2 span { color: #292929; }
.screen-twelve__copy h2 strong { color: #fb1825; font-weight: inherit; }

.screen-twelve__copy p {
  width: 798px;
  margin: 14px 0 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.screen-twelve__divider {
  position: absolute;
  top: 331px;
  width: 1px;
  height: 37px;
  background: rgba(89, 86, 86, .55);
}

.screen-twelve__divider--one { left: 355px; }
.screen-twelve__divider--two { left: 769px; }

.guarantee-point {
  position: absolute;
  top: 322px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #fb1825;
}

.guarantee-point svg { width: 54px; height: 54px; flex: 0 0 54px; }

.guarantee-point strong {
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.23;
  white-space: nowrap;
}

.guarantee-point--test { left: 79px; }
.guarantee-point--easy { left: 380px; }
.guarantee-point--safe { left: 794px; }

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-twelve__panel { margin-left: 120px; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-twelve { min-height: auto; padding: 2rem 1rem; }
  .screen-twelve__panel { width: 100%; height: auto; min-height: 720px; margin: 0; padding: 2rem 1.25rem; }
  .guarantee-visual,
  .screen-twelve__copy,
  .screen-twelve__divider,
  .guarantee-point { position: relative; inset: auto; }
  .guarantee-visual { width: 150px; height: 150px; margin: 0 auto; }
  .guarantee-visual svg { width: 72px; height: 72px; }
  .screen-twelve__copy { width: 100%; margin-top: 2rem; }
  .screen-twelve__copy h2 { width: 100%; font-size: clamp(32px, 8vw, 56px); white-space: normal; }
  .screen-twelve__copy p { width: 100%; margin-top: 1.5rem; font-size: 18px; }
  .screen-twelve__divider { display: none; }
  .guarantee-point { margin-top: 2rem; }
  .guarantee-point strong { font-size: 17px; white-space: normal; }
}

/* Thirteenth screen: FAQ accordion */
.screen-thirteen {
  position: relative;
  min-height: 1162px;
  overflow: hidden;
  background: #fefdfc;
  color: #292929;
}

.screen-thirteen__inner {
  position: relative;
  width: 1400px;
  min-height: 1162px;
  margin-inline: auto;
}

.screen-thirteen h2 {
  position: absolute;
  top: 60px;
  left: 118px;
  width: 862px;
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: 68.78px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen-thirteen__intro {
  position: absolute;
  top: 143px;
  left: 120px;
  width: 860px;
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.faq-list {
  position: absolute;
  top: 193px;
  left: 118px;
  width: 1160px;
}

.faq-item {
  position: relative;
  width: 1121px;
  height: 35px;
  margin-left: 27px;
}

.faq-item:not(.is-open)::after {
  content: '';
  position: absolute;
  right: -12px;
  bottom: -15px;
  left: -27px;
  height: 1px;
  background: #cac9d3;
}

.faq-item + .faq-item { margin-top: 30px; }
.faq-item.is-open + .faq-item { margin-top: 17px; }

.faq-item.is-open {
  width: 1160px;
  height: auto;
  min-height: 153px;
  margin-left: 0;
  border: 0;
  border-radius: 20px;
  background: #fefcfb;
  box-shadow: 0 4px 12px rgba(89, 86, 86, .07);
}

.faq-item__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 35px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #292929;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-item.is-open .faq-item__trigger { height: 61px; padding-left: 27px; }

.faq-item__number {
  width: 23px;
  flex: 0 0 23px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.faq-item.is-open .faq-item__number { color: #fb1825; font-weight: 600; }

.faq-item__divider {
  width: 1px;
  height: 23px;
  flex: 0 0 1px;
  margin-left: 21px;
  margin-right: 26px;
  background: #cac9d3;
}

.faq-item__question {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.faq-item__toggle {
  position: absolute;
  right: 0;
  display: block;
  width: 35px;
  height: 35px;
  box-sizing: border-box;
  flex: 0 0 35px;
  padding: 0;
  border: 1px solid #cac9d3;
  border-radius: 50%;
}

.faq-item.is-open .faq-item__toggle { right: 12px; border: 0; background: #ffe6e6; }

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: '';
  position: absolute;
  display: block;
  top: 17px;
  left: 10px;
  width: 15px;
  height: 1px;
  background: #292929;
}

.faq-item.is-open .faq-item__toggle::before { background: #fb1825; }
.faq-item.is-open .faq-item__toggle::after { display: none; }

.faq-item__toggle::after {
  transform: rotate(90deg);
}

.faq-item__answer {
  display: none;
  padding: 0 118px 28px 98px;
}

.faq-item.is-open .faq-item__answer { display: block; }

.faq-item__answer p {
  margin: 0;
  color: #292929;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

@media (max-width: 1400px) and (min-width: 801px) {
  .screen-thirteen__inner { margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px) {
  .screen-thirteen { min-height: auto; padding: 3rem 1rem 5rem; }
  .screen-thirteen__inner { width: 100%; min-height: auto; }
  .screen-thirteen h2,
  .screen-thirteen__intro,
  .faq-list { position: relative; inset: auto; width: 100%; }
  .screen-thirteen h2 { font-size: clamp(34px, 9vw, 60px); white-space: normal; }
  .screen-thirteen__intro { margin-top: 1.5rem; font-size: 18px; }
  .faq-list { margin-top: 2.5rem; }
  .faq-item,
  .faq-item.is-open { width: 100%; height: auto; min-height: 48px; margin-left: 0; border-radius: 16px; }
  .faq-item:not(.is-open)::after { right: 0; bottom: -0.75rem; left: 0; }
  .faq-item + .faq-item,
  .faq-item.is-open + .faq-item { margin-top: .75rem; }
  .faq-item__trigger,
  .faq-item.is-open .faq-item__trigger { min-height: 48px; height: auto; padding: .75rem 3.5rem .75rem 1rem; }
  .faq-item__number { width: 24px; flex-basis: 24px; font-size: 15px; }
  .faq-item__divider { display: none; }
  .faq-item__question { font-size: 15px; }
  .faq-item__toggle,
  .faq-item.is-open .faq-item__toggle { right: .75rem; top: .75rem; }
  .faq-item__answer { padding: 0 1rem 1rem; }
  .faq-item__answer p { font-size: 15px; }
}

/* Final screen: footer */
.site-footer {
  position: relative;
  min-height: 295px;
  overflow: hidden;
  border-top: 0;
  background: #010101;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
}

.site-footer__inner {
  position: relative;
  width: min(100%, 1401px);
  height: 295px;
  min-height: 0;
  margin: 0 auto;
}

.site-footer__socials {
  position: absolute;
  top: 54px;
  left: 121px;
  display: flex;
  gap: 13px;
}

.site-footer__social-link {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #fb1825;
  transition: transform 180ms ease, filter 180ms ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.site-footer__social-link svg,
.site-footer__social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  fill: #fff;
  stroke: #fff;
  stroke-width: 1.6;
}

.site-footer__columns {
  position: absolute;
  top: 54px;
  left: 371px;
  display: grid;
  grid-template-columns: 110px 122px 150px;
  column-gap: 50px;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.site-footer__column h2 {
  width: max-content;
  max-width: none;
  margin: 0 0 6px;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  text-transform: uppercase;
}

.site-footer__column a {
  color: #aeaeae;
  font-size: 12px;
  font-weight: 300;
  line-height: 12px;
  white-space: nowrap;
  transition: color 180ms ease;
}

.site-footer__column a:hover,
.site-footer__column a:focus-visible {
  color: #fff;
}

.site-footer__cta {
  position: absolute;
  top: 54px;
  left: 886px;
  display: inline-flex;
  width: max-content;
  height: 55px;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1rem;
  padding: 5px 6px 5px 30px;
  border-radius: 40px;
  background: #fffdf4;
  color: #101114;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}

.site-footer__cta:hover,
.site-footer__cta:focus-visible {
  background: #fffdf4;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.site-footer__cta-arrow {
  margin-right: 0;
}

.site-footer__cta-arrow img {
  width: 29px;
  height: 24px;
}

.site-footer__bottom {
  position: absolute;
  right: 100px;
  top: 253px;
  left: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-footer__bottom p {
  margin: 0;
  color: rgba(217, 217, 217, .42);
  font-size: 12px;
  font-weight: 300;
  line-height: 24px;
  white-space: nowrap;
}

.site-footer__bottom a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: #fffdf4;
}

.site-footer__bottom p:last-child {
  color: rgba(174, 174, 174, .42);
  font-size: 10px;
  line-height: 12px;
  transform: translateY(7px);
}

.site-footer__bottom span {
  margin: 0 .35rem;
}

.site-footer__top {
  position: absolute;
  top: 54px;
  right: 80px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #fb1825;
  transition: transform 180ms ease, filter 180ms ease;
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.site-footer__top img {
  width: 13px;
  height: 7px;
}

@media (max-width: 1200px) and (min-width: 801px) {
  .site-footer__inner { width: 100%; }
  .site-footer__socials { left: 6vw; }
  .site-footer__columns { left: 27vw; column-gap: 3vw; }
  .site-footer__cta { left: auto; right: 8vw; width: max-content; }
  .site-footer__top { right: 2.5vw; }
  .site-footer__bottom { right: 6vw; left: 6vw; }
  .site-footer__bottom p:first-child { font-size: 10px; }
}

@media (max-width: 800px) {
  .site-footer { min-height: 0; }
  .site-footer__inner {
    display: grid;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 2.75rem 1.25rem 1.75rem;
  }
  .site-footer__socials,
  .site-footer__columns,
  .site-footer__cta,
  .site-footer__bottom,
  .site-footer__top {
    position: static;
  }
  .site-footer__socials { margin-bottom: 2rem; }
  .site-footer__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.25rem;
    margin-bottom: 2rem;
  }
  .site-footer__column { gap: .7rem; }
  .site-footer__column h2 { margin-bottom: .35rem; font-size: 14px; }
  .site-footer__column a { font-size: 11px; white-space: normal; }
  .site-footer__cta { width: min(100%, 340px); gap: 12px; padding-left: 24px; margin-bottom: 2rem; }
  .site-footer__bottom {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
  }
  .site-footer__bottom p { font-size: 10px; line-height: 1.5; white-space: normal; }
  .site-footer__bottom p:last-child { font-size: 9px; }
  .site-footer__top { position: absolute; top: 2.75rem; right: 1.25rem; }
}

@media (max-width: 480px) {
  .site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__columns .site-footer__column:last-child { grid-column: 1 / -1; }
}

/* Mobile reflow for cards that still contain desktop offsets. */
@media (max-width: 800px) {
  .method-card--personal h3,
  .method-card--personal p {
    width: calc(100% - 112px);
    max-width: none;
  }

  .method-card--personal p {
    top: 132px;
  }

  .program-card__surface,
  .program-card__result {
    width: 100%;
  }

  .program-card__list {
    width: calc(100% - 38px);
  }

  .program-card__result span {
    max-width: 100%;
  }

  .pricing-card,
  .pricing-card--first,
  .pricing-card--master,
  .pricing-card--hits {
    height: auto;
    min-height: 0;
    padding: 24px 20px 20px;
  }

  .pricing-card__intro,
  .pricing-card--master .pricing-card__intro {
    width: 100%;
    min-height: 0;
    white-space: normal;
  }

  .pricing-card__feature p,
  .pricing-card--master .pricing-card__feature p {
    width: calc(100% - 44px);
    white-space: normal;
  }

  .pricing-card h4 {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 1.5rem;
  }

  .pricing-card--first h4 {
    margin-top: 2.25rem;
  }

  .pricing-card--master h4,
  .pricing-card--hits h4 {
    margin-top: 2rem;
  }

  .pricing-card__list,
  .pricing-card--master .pricing-card__list,
  .pricing-card--hits .pricing-card__list {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 1.5rem;
    padding-top: .5rem;
  }

  .pricing-card__price {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 1.5rem;
  }

  .pricing-card__button,
  .pricing-card--master .pricing-card__button,
  .pricing-card--hits .pricing-card__button {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 12px;
  }

  .flow-card--three,
  .flow-card--four,
  .flow-card--five {
    height: 300px;
  }

  .flow-card--four .flow-card__line { top: 238px; }
  .flow-card--four p { top: 241px; }

  .screen-five__button,
  .screen-eight__button,
  .pricing-card__button,
  .screen-eleven__button,
  .site-footer__cta {
    justify-content: space-between;
  }

  .screen-five__button > span:first-child,
  .screen-eight__button > span:first-child,
  .pricing-card__button > span:first-child,
  .screen-eleven__button > span:first-child,
  .site-footer__cta > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
  }

  .pricing-card__button > span:last-child,
  .screen-five__button-arrow,
  .screen-eight__button-arrow,
  .screen-eleven__button > span:last-child,
  .site-footer__cta-arrow {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .site-footer__cta {
    padding-right: 6px;
  }

  .review-card--hero .review-card__meta {
    top: auto;
    right: 20px;
    bottom: 18px;
    left: 20px;
    width: auto;
    font-size: 14px;
    line-height: 1.15;
  }
}

/* Fine-tuning for narrow phones (up to 480px) */
@media (max-width: 480px) {
  .screen-five,
  .screen-ten,
  .screen-eleven,
  .screen-twelve,
  .screen-thirteen {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  /* Keep program cards inside the narrow viewport. */
  .program-card__surface,
  .program-card__result {
    width: 100%;
  }

  .program-card__list {
    width: calc(100% - 38px);
  }

  .program-card__result span {
    max-width: 100%;
  }

  .flow-card--three,
  .flow-card--four,
  .flow-card--five {
    height: 300px;
  }

  .flow-card--four .flow-card__line {
    top: 238px;
  }

  .flow-card--four p {
    top: 241px;
  }

  /* The long fifth method card needs a real text column on phones. */
  .method-card h3,
  .method-card p {
    max-width: calc(100% - 98px);
  }

  .method-card--personal {
    height: 390px;
  }

  .method-card--personal h3 {
    max-width: calc(100% - 32px);
  }

  .method-card--personal p {
    top: 132px;
    max-width: calc(100% - 32px);
    line-height: 1.28;
  }

  /* Reflow pricing cards instead of keeping desktop absolute offsets. */
  .screen-ten {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }

  .screen-ten__heading {
    font-size: clamp(30px, 8.6vw, 60px);
    line-height: .98;
  }

  .pricing-card,
  .pricing-card--first,
  .pricing-card--master,
  .pricing-card--hits {
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 2.25rem;
    padding: 24px 20px 20px;
  }

  .pricing-card h3 {
    font-size: 28px;
    line-height: 1.05;
  }

  .pricing-card__intro,
  .pricing-card--master .pricing-card__intro {
    width: 100%;
    min-height: 0;
    margin-top: 12px !important;
    line-height: 1.25;
    white-space: normal;
  }

  .pricing-card__feature {
    gap: 12px;
    margin-top: 18px;
  }

  .pricing-card__feature + .pricing-card__feature {
    margin-top: 16px;
  }

  .pricing-card__feature p,
  .pricing-card--master .pricing-card__feature p {
    width: calc(100% - 44px);
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
  }

  .pricing-card h4 {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 1.5rem;
    font-size: 14px;
  }

  .pricing-card--first h4 {
    margin-top: 2.25rem;
  }

  .pricing-card--master h4,
  .pricing-card--hits h4 {
    margin-top: 2rem;
  }

  .pricing-card__list,
  .pricing-card--master .pricing-card__list,
  .pricing-card--hits .pricing-card__list {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    gap: 10px;
    margin-top: 1.5rem;
    padding-left: 21px;
    font-size: 13px;
    line-height: 1.25;
  }

  .pricing-card__price {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 118px;
    margin-top: 1.5rem;
    padding: 18px 20px;
  }

  .pricing-card__price del { font-size: 24px; }
  .pricing-card__price strong { font-size: 36px; }

  .pricing-card__button,
  .pricing-card--master .pricing-card__button,
  .pricing-card--hits .pricing-card__button {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 58px;
    margin-top: 12px;
    padding: 5px 5px 5px 16px;
    font-size: 12px;
  }

  .pricing-card__button > span:last-child {
    width: 48px;
    height: 48px;
  }

  .pricing-card--master .pricing-card__button,
  .pricing-card--hits .pricing-card__button {
    padding-left: 16px;
    font-size: 12px;
  }

  .pricing-card__badge {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Give narrow review cards enough room for readable metadata. */
  .review-card--small .review-card__quote {
    width: 145px;
    font-size: 12px;
    line-height: 1.08;
  }

  .review-card--small .review-card__meta {
    right: 14px;
    left: 14px;
    gap: 7px;
    font-size: 11px;
    line-height: 1.12;
  }

  .screen-eleven__button {
    padding-left: 1.25rem;
    font-size: 15px;
  }

  .guarantee-point strong {
    font-size: 16px;
  }

  .faq-item__question {
    font-size: 14px;
    line-height: 1.2;
  }
}

@media (max-width: 800px) {
  /* One consistent gap between the tariff section label and its checklist. */
  .pricing-card h4 {
    margin-bottom: 1rem !important;
  }

  .pricing-card__list,
  .pricing-card--master .pricing-card__list,
  .pricing-card--hits .pricing-card__list {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Premium motion system */
@keyframes hero-reveal {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-image-reveal {
  from { opacity: 0; transform: translate3d(24px, 0, 0) scale(1.025); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.hero-header,
.hero__copy,
.hero__benefits {
  animation: hero-reveal .9s var(--ease-out) both;
}

.hero__copy { animation-delay: .08s; }
.hero__benefits { animation-delay: .24s; }
.hero__expert { animation: hero-image-reveal 1.15s var(--ease-out) .16s both; }

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta) {
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
  transform: translate3d(var(--button-x, 0px), var(--button-y, 0px), 0);
  transition: transform .42s var(--ease-out), box-shadow .42s ease, filter .42s ease;
}

.header-cta,
.primary-cta {
  position: relative;
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta)::before {
  position: absolute;
  z-index: 0;
  inset: -120% -35%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  content: '';
  pointer-events: none;
  transform: translate3d(-70%, 0, 0) rotate(8deg);
  transition: transform .85s var(--ease-out);
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta):hover,
:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta):focus-visible {
  transform: translate3d(var(--button-x, 0px), calc(var(--button-y, 0px) - 4px), 0) scale(1.012);
  box-shadow: 0 15px 34px rgba(251, 24, 37, .2);
  filter: saturate(1.06);
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta):hover::before,
:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta):focus-visible::before {
  transform: translate3d(70%, 0, 0) rotate(8deg);
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta) > * {
  position: relative;
  z-index: 1;
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta) .round-arrow,
:is(.screen-five__button, .screen-eight__button) .screen-five__button-arrow,
:is(.screen-five__button, .screen-eight__button) .screen-eight__button-arrow,
.pricing-card__button > span:last-child,
.screen-eleven__button > span:last-child,
.site-footer__cta-arrow {
  transition: transform .48s var(--ease-out), background-color .3s ease;
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta):hover .round-arrow,
:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta):focus-visible .round-arrow,
:is(.screen-five__button, .screen-eight__button):hover .screen-five__button-arrow,
:is(.screen-five__button, .screen-eight__button):focus-visible .screen-five__button-arrow,
:is(.screen-five__button, .screen-eight__button):hover .screen-eight__button-arrow,
:is(.screen-five__button, .screen-eight__button):focus-visible .screen-eight__button-arrow,
.pricing-card__button:hover > span:last-child,
.pricing-card__button:focus-visible > span:last-child,
.screen-eleven__button:hover > span:last-child,
.screen-eleven__button:focus-visible > span:last-child,
.site-footer__cta:hover .site-footer__cta-arrow,
.site-footer__cta:focus-visible .site-footer__cta-arrow {
  transform: rotate(-45deg) scale(1.06);
}

:is(.program-card, .method-card, .pricing-card, .review-card, .problem-card) {
  transition: transform .65s var(--ease-out), box-shadow .65s ease;
}

:is(.program-card, .method-card, .pricing-card, .review-card, .problem-card):hover {
  z-index: 3;
  transform: translateY(-7px);
  box-shadow: 0 22px 42px rgba(18, 20, 25, .14);
}

.faq-item__trigger,
.site-footer__column a,
.site-footer__social-link,
.site-footer__top {
  transition: color .3s ease, transform .35s var(--ease-out), background-color .3s ease, border-color .3s ease;
}

.faq-item__trigger:hover .faq-item__question,
.faq-item__trigger:focus-visible .faq-item__question {
  color: #fb1825;
}

/* Scroll-reveal system: restrained movement, soft focus and intentional rhythm. */
.js .scroll-reveal {
  --reveal-y: 24px;
  --reveal-scale: .988;
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, var(--reveal-y), 0) scale(var(--reveal-scale));
  transition:
    opacity .85s cubic-bezier(.22, 1, .36, 1),
    filter .85s cubic-bezier(.22, 1, .36, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}

.js .scroll-reveal--card {
  --reveal-y: 34px;
  --reveal-scale: .975;
  transition-duration: 1s, 1s, 1.15s;
}

.js .scroll-reveal--cta {
  --reveal-y: 18px;
  --reveal-scale: .985;
}

.js .scroll-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 800px) {
  .js .scroll-reveal {
    --reveal-y: 18px;
  }

  .js .scroll-reveal--card {
    --reveal-y: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .scroll-reveal,
  .js .scroll-reveal.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media (hover: hover) {
  :is(.program-card, .method-card, .pricing-card, .review-card, .problem-card).scroll-reveal.is-visible:hover {
    transform: translateY(-7px);
  }

  :is(.screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta).scroll-reveal.is-visible:hover,
  :is(.screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta).scroll-reveal.is-visible:focus-visible {
    transform: translate3d(var(--button-x, 0px), calc(var(--button-y, 0px) - 4px), 0) scale(1.012);
  }
}

/* Review video modal */
.review-card[data-video-src] {
  cursor: pointer;
}

.review-card[data-video-src]:focus-visible {
  outline: 2px solid #fb1825;
  outline-offset: 8px;
}

.review-card[data-video-src] .review-card__play {
  transition: transform .55s var(--ease-out), background-color .3s ease, box-shadow .55s ease;
}

.review-card[data-video-src]:hover .review-card__play,
.review-card[data-video-src]:focus-visible .review-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fb1825;
  box-shadow: 0 0 0 10px rgba(251, 24, 37, .14);
}

body.video-modal-open {
  overflow: hidden;
}

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

.video-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 6, .82);
  backdrop-filter: blur(16px) saturate(.8);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  padding: clamp(.55rem, 1.1vw, .85rem);
  border: 1px solid rgba(255, 253, 244, .2);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(28, 30, 35, .98), rgba(10, 11, 14, .98));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(251, 24, 37, .08);
  transform: translateY(24px) scale(.97);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
}

.video-modal.is-open .video-modal__dialog {
  transform: translateY(0) scale(1);
}

.video-modal__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 21px;
  background: #05070a;
}

.video-modal__frame::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(255, 253, 244, .1);
  border-radius: inherit;
  content: '';
  pointer-events: none;
}

.video-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -18px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 253, 244, .28);
  border-radius: 50%;
  background: #fb1825;
  cursor: pointer;
  transition: transform .35s var(--ease-out), background-color .25s ease;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: #ff3340;
  outline: none;
  transform: rotate(90deg) scale(1.06);
}

.video-modal__close span {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fffdf4;
}

.video-modal__close span:first-child { transform: rotate(45deg); }
.video-modal__close span:last-child { transform: rotate(-45deg); }

.video-modal__caption {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: 1.15rem .45rem .35rem;
  color: #fffdf4;
}

.video-modal__eyebrow {
  color: #fb1825;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.video-modal__caption h2 {
  margin: 0;
  font-family: 'Unbounded', 'Arial Black', sans-serif;
  font-size: clamp(1.1rem, 2.3vw, 1.65rem);
  letter-spacing: -.04em;
}

@media (max-width: 600px) {
  .video-modal {
    padding: .8rem;
  }

  .video-modal__dialog {
    padding: .45rem;
    border-radius: 22px;
  }

  .video-modal__frame {
    border-radius: 16px;
  }

  .video-modal__close {
    top: -13px;
    right: -6px;
    width: 42px;
    height: 42px;
  }

  .video-modal__caption {
    display: grid;
    gap: .35rem;
    padding: .9rem .35rem .25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-modal,
  .video-modal__dialog,
  .video-modal__close,
  .review-card[data-video-src] .review-card__play {
    transition: none;
  }
}

/* Pricing widget modal */
body.pricing-modal-open {
  overflow: hidden;
}

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

.pricing-modal {
  position: fixed;
  z-index: 101;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}

.pricing-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* During widget loading, remove the light checkout shell so the branded loader
   fills the modal without a distracting white frame. */
.pricing-modal.is-loading .pricing-modal__dialog {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.pricing-modal.is-loading .pricing-modal__widget {
  min-height: 420px;
  padding: 0;
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
}

.pricing-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 6, .84);
  backdrop-filter: blur(16px) saturate(.8);
}

.pricing-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(880px, calc(100svh - 2rem));
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(251, 24, 37, .28);
  border-radius: 28px;
  background: #fffdf4;
  color: #101114;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 253, 244, .08);
  transform: translateY(24px) scale(.97);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
}

.pricing-modal.is-open .pricing-modal__dialog {
  transform: translateY(0) scale(1);
}

.pricing-modal__widget {
  position: relative;
  min-height: 260px;
  overflow: auto;
  padding: clamp(.85rem, 2vw, 1.25rem);
  border-radius: 19px;
  background: #f1f0ed;
  box-shadow: inset 0 0 0 1px rgba(16, 17, 20, .08);
  scrollbar-color: #fb1825 transparent;
  scrollbar-width: thin;
}

.pricing-widget-loader {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(251, 24, 37, .16), transparent 12rem),
    linear-gradient(135deg, #07090c, #130b10 72%, #260d15);
  color: #fffdf4;
  opacity: 1;
  visibility: visible;
  transition: opacity .42s var(--ease-out), visibility .42s ease;
}

.pricing-widget-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pricing-widget-loader.is-error .pricing-widget-loader__track span { background: #9da3ad; box-shadow: none; }

.pricing-widget-loader::before {
  position: absolute;
  top: -55%;
  right: -22%;
  width: 88%;
  aspect-ratio: 1;
  border: 1px solid rgba(251, 24, 37, .3);
  border-radius: 50%;
  content: '';
  animation: pricing-loader-orbit 14s linear infinite;
}

.pricing-widget-loader::after {
  position: absolute;
  right: 10%;
  bottom: 14%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 24, 37, .55), transparent);
  content: '';
}

.pricing-widget-loader__glow {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fb1825;
  box-shadow: 0 0 0 5px rgba(251, 24, 37, .1), 0 0 22px rgba(251, 24, 37, .8);
  animation: pricing-loader-pulse 1.8s ease-in-out infinite;
}

.pricing-widget-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(280px, calc(100% - 2rem));
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pricing-widget-loader__eyebrow {
  color: rgba(255, 253, 244, .5);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.pricing-widget-loader__logo {
  width: min(170px, 62vw);
  height: auto;
  margin: 1rem auto .8rem;
  filter: drop-shadow(0 0 18px rgba(251, 24, 37, .2));
  animation: pricing-loader-logo 2.8s ease-in-out infinite;
}

.pricing-widget-loader__signal {
  display: flex;
  height: 21px;
  align-items: center;
  gap: 4px;
  margin-bottom: .75rem;
}

.pricing-widget-loader__signal i {
  display: block;
  width: 2px;
  height: 9px;
  border-radius: 99px;
  background: rgba(255, 253, 244, .72);
  animation: pricing-loader-signal 1.1s var(--ease-out) infinite;
}

.pricing-widget-loader__signal i:nth-child(2),
.pricing-widget-loader__signal i:nth-child(8) { height: 15px; animation-delay: -.75s; }
.pricing-widget-loader__signal i:nth-child(3),
.pricing-widget-loader__signal i:nth-child(7) { height: 21px; background: #fb1825; animation-delay: -.55s; }
.pricing-widget-loader__signal i:nth-child(4),
.pricing-widget-loader__signal i:nth-child(6) { height: 13px; animation-delay: -.35s; }
.pricing-widget-loader__signal i:nth-child(5) { height: 25px; background: #fb1825; animation-delay: -.15s; }

.pricing-widget-loader__content strong {
  color: #fffdf4;
  font-family: Unbounded, 'Arial Black', sans-serif;
  font-size: clamp(.7rem, 2vw, .84rem);
  letter-spacing: -.04em;
  line-height: 1.2;
}

.pricing-widget-loader__hint {
  margin-top: .45rem;
  color: rgba(255, 253, 244, .55);
  font-family: Montserrat, Arial, sans-serif;
  font-size: .68rem;
}

.pricing-widget-loader__track {
  width: min(190px, 100%);
  height: 2px;
  margin-top: 1rem;
  overflow: hidden;
  background: rgba(255, 253, 244, .16);
}

.pricing-widget-loader__track span {
  display: block;
  width: 42%;
  height: 100%;
  background: #fb1825;
  box-shadow: 0 0 14px rgba(251, 24, 37, .8);
  animation: pricing-loader-progress 1.35s ease-in-out infinite;
}

@keyframes pricing-loader-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pricing-loader-pulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes pricing-loader-signal { 0%, 100% { opacity: .5; transform: scaleY(.68); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes pricing-loader-progress { 0% { transform: translateX(-130%); } 100% { transform: translateX(340%); } }
@keyframes pricing-loader-orbit { to { transform: rotate(360deg); } }

.pricing-modal__close {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -18px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 253, 244, .28);
  border-radius: 50%;
  background: #fb1825;
  cursor: pointer;
  transition: transform .35s var(--ease-out), background-color .25s ease;
}

.pricing-modal__close:hover,
.pricing-modal__close:focus-visible {
  background: #ff3340;
  outline: none;
  transform: rotate(90deg) scale(1.06);
}

.pricing-modal__close span {
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fffdf4;
}

.pricing-modal__close span:first-child { transform: rotate(45deg); }
.pricing-modal__close span:last-child { transform: rotate(-45deg); }

@media (max-width: 600px) {
  .pricing-modal {
    padding: .8rem;
  }

  .pricing-modal__dialog {
    max-height: calc(100svh - 1.6rem);
    padding: 1rem;
    border-radius: 22px;
  }

  .pricing-modal__widget {
    min-height: 220px;
    padding: .7rem;
    border-radius: 15px;
  }

  .pricing-modal.is-loading .pricing-modal__widget {
    min-height: 300px;
    border-radius: 22px;
  }

  .pricing-widget-loader__content { width: min(245px, calc(100% - 1.5rem)); }
  .pricing-widget-loader__logo { width: 145px; }
  .pricing-widget-loader__hint { font-size: .6rem; }

  .pricing-modal__close {
    top: -13px;
    right: -6px;
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-modal,
  .pricing-modal__dialog,
  .pricing-modal__close {
    transition: none;
  }

  .pricing-widget-loader::before,
  .pricing-widget-loader__glow,
  .pricing-widget-loader__logo,
  .pricing-widget-loader__signal i,
  .pricing-widget-loader__track span { animation: none; }
}

/* Hero photo: only one version is visible on narrow screens. */
@media (max-width: 900px) {
  .hero__expert--desktop {
    display: none !important;
  }

  .hero__expert--mobile {
    position: relative;
    right: auto;
    bottom: auto;
    display: block !important;
    width: min(100%, 430px);
    height: auto;
    max-height: none;
    margin: -.35rem auto -.15rem;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (min-width: 901px) {
  .hero__expert--mobile {
    display: none !important;
  }

  .hero__expert--desktop {
    display: block !important;
  }
}

@media (max-width: 800px) {
  /* The fixed mobile header should align with the viewport, not the content container. */
  .hero-header {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 1rem;
    border-radius: 0;
  }
}

@media (max-width: 800px) {
  /* The legal pages use the same mobile header and menu as the home page. */
  .legal-top,
  .privacy-top,
  .consent-top {
    padding-top: 72px;
  }

  .legal-site-header,
  .privacy-site-header,
  .consent-site-header {
    position: fixed !important;
    z-index: 20;
    inset: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 72px;
    margin: 0;
    padding-inline: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(5, 7, 10, .9);
    backdrop-filter: blur(14px) saturate(.85);
  }

  .legal-top .mobile-menu,
  .privacy-top .mobile-menu,
  .consent-top .mobile-menu {
    position: fixed !important;
    z-index: 19;
    top: 72px;
    right: 1.5rem;
    left: 1.5rem;
  }
}

/* Keep CTA labels optically centered in the space before their arrow circle. */
:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta) {
  justify-content: flex-start;
  gap: 0;
}

:is(.header-cta, .primary-cta, .screen-five__button, .screen-eight__button, .pricing-card__button, .screen-eleven__button, .site-footer__cta) > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

.header-cta { padding-left: 6px; }
.primary-cta { padding-left: 12px; }
.screen-five__button { padding-left: 8px; }
.screen-eight__button { padding-left: 5px; }
.pricing-card__button { padding-left: 4px; }
.screen-eleven__button { padding-left: 7px; }
.site-footer__cta { padding-left: 6px; }

/* Header and footer CTAs are content-sized, so keep their text and arrow
   separated instead of applying the fixed-width button layout. */
.header-cta,
.site-footer__cta {
  justify-content: flex-start;
  gap: 1.1rem;
  padding-left: 30px;
}

.header-cta > span:first-child,
.site-footer__cta > span:first-child {
  min-width: auto;
  flex: 0 0 auto;
  text-align: left;
}

@media (max-width: 800px) {
  .site-footer__cta {
    gap: 12px;
    padding-left: 24px;
  }

  .site-footer__cta > span:first-child {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Premium first-load experience */
body.preloader-active { overflow: hidden; }

.site-preloader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(251, 24, 37, .1), transparent 24rem),
    linear-gradient(135deg, #050609 0%, #090b0f 54%, #1d0a12 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .75s var(--ease-out), visibility .75s ease;
}

.site-preloader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-preloader::before,
.site-preloader::after {
  position: absolute;
  border: 1px solid rgba(251, 24, 37, .24);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.site-preloader::before {
  top: -32vw;
  right: -16vw;
  width: 72vw;
  height: 72vw;
  min-width: 420px;
  min-height: 420px;
  animation: preloader-orbit 12s linear infinite;
}

.site-preloader::after {
  bottom: -44vw;
  left: -26vw;
  width: 78vw;
  height: 78vw;
  min-width: 460px;
  min-height: 460px;
  opacity: .5;
  animation: preloader-orbit 18s linear infinite reverse;
}

.site-preloader__grid {
  position: absolute;
  inset: -20%;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 68%);
  opacity: .22;
  transform: perspective(700px) rotateX(62deg) translateY(16%);
  transform-origin: center bottom;
  animation: preloader-grid 7s ease-in-out infinite alternate;
}

.site-preloader__orb {
  position: absolute;
  border: 1px solid rgba(251, 24, 37, .4);
  border-radius: 50%;
  pointer-events: none;
}

.site-preloader__orb--one { top: 18%; right: 21%; width: 8px; height: 8px; background: #fb1825; box-shadow: 0 0 0 5px rgba(251, 24, 37, .1), 0 0 24px rgba(251, 24, 37, .7); }
.site-preloader__orb--two { bottom: 21%; left: 18%; width: 5px; height: 5px; background: #fb1825; box-shadow: 0 0 18px rgba(251, 24, 37, .65); }

.site-preloader__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(450px, calc(100% - 2.5rem));
  flex-direction: column;
  align-items: center;
}

.site-preloader__eyebrow,
.site-preloader__meta,
.site-preloader__footer {
  font-family: Montserrat, Arial, sans-serif;
  text-transform: uppercase;
}

.site-preloader__eyebrow {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .85rem;
  color: rgba(255, 253, 244, .65);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
}

.site-preloader__eyebrow i {
  width: 42px;
  height: 1px;
  flex: 0 0 auto;
  background: #fb1825;
}

.site-preloader__eyebrow span:last-child { margin-left: auto; color: #fb1825; }

.site-preloader__logo {
  display: block;
  width: min(310px, 72vw);
  height: auto;
  margin: 2.15rem auto 1.7rem;
  filter: drop-shadow(0 0 28px rgba(251, 24, 37, .16));
  animation: preloader-logo 3.2s ease-in-out infinite;
}

.site-preloader__signal {
  display: flex;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 1.8rem;
}

.site-preloader__signal span {
  display: block;
  width: 2px;
  height: 12px;
  border-radius: 99px;
  background: rgba(255, 253, 244, .75);
  animation: preloader-signal 1.25s var(--ease-out) infinite;
}

.site-preloader__signal span:nth-child(2),
.site-preloader__signal span:nth-child(8) { height: 20px; animation-delay: -.9s; }
.site-preloader__signal span:nth-child(3),
.site-preloader__signal span:nth-child(7) { height: 28px; background: #fb1825; animation-delay: -.7s; }
.site-preloader__signal span:nth-child(4),
.site-preloader__signal span:nth-child(6) { height: 18px; animation-delay: -.45s; }
.site-preloader__signal span:nth-child(5) { height: 34px; background: #fb1825; animation-delay: -.2s; }

.site-preloader__meta {
  display: flex;
  width: min(300px, 100%);
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
  color: rgba(255, 253, 244, .52);
  font-size: 9px;
  letter-spacing: .18em;
}

.site-preloader__meta strong { color: #fffdf4; font-size: 11px; font-weight: 600; }
.site-preloader__meta b { color: #fb1825; font-weight: 600; }

.site-preloader__track {
  position: relative;
  width: min(300px, 100%);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 253, 244, .16);
}

.site-preloader__track::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  content: '';
  transform: translateX(-100%);
  animation: preloader-shimmer 1.8s ease-in-out infinite;
}

.site-preloader__track > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #fb1825, #ff5961);
  box-shadow: 0 0 16px rgba(251, 24, 37, .75);
  transition: width .18s ease-out;
}

.site-preloader__footer {
  position: absolute;
  right: 2rem;
  bottom: 1.8rem;
  left: 2rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 253, 244, .34);
  font-size: 8px;
  letter-spacing: .2em;
}

.site-preloader__footer span:last-child { color: #fb1825; }

@keyframes preloader-logo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes preloader-signal {
  0%, 100% { opacity: .55; transform: scaleY(.7); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes preloader-grid {
  from { transform: perspective(700px) rotateX(62deg) translate3d(0, 16%, 0); }
  to { transform: perspective(700px) rotateX(62deg) translate3d(0, 11%, 0); }
}

@keyframes preloader-orbit {
  to { transform: rotate(360deg); }
}

@keyframes preloader-shimmer {
  to { transform: translateX(100%); }
}

@media (max-width: 800px) {
  .site-preloader__content { width: min(360px, calc(100% - 2rem)); }
  .site-preloader__eyebrow { gap: .55rem; font-size: 7px; letter-spacing: .16em; }
  .site-preloader__eyebrow i { width: 26px; }
  .site-preloader__logo { width: min(260px, 76vw); margin-top: 1.8rem; }
  .site-preloader__footer { right: 1rem; bottom: 1.25rem; left: 1rem; font-size: 7px; }
  .site-preloader__grid { background-size: 54px 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader,
  .site-preloader__logo,
  .site-preloader__signal span,
  .site-preloader__grid,
  .site-preloader::before,
  .site-preloader::after,
  .site-preloader__track::after { animation: none; transition: none; }
}

/* The checkout widget uses the whole dialog surface. Keep the close control
   floating above it, without an extra cream frame or inset gray panel. */
.pricing-modal__dialog {
  width: min(680px, 100%);
  max-height: min(760px, calc(100svh - 3rem));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pricing-modal__widget {
  height: auto;
  min-height: 260px;
  max-height: min(720px, calc(100svh - 4rem));
  padding: 0;
  border-radius: 28px;
  background: #f1f0ed;
  box-shadow: none;
}

.pricing-widget-loader { border-radius: inherit; }

@media (max-width: 600px) {
  .pricing-modal { padding: .55rem; }

  .pricing-modal__dialog {
    max-height: calc(100svh - 2rem);
    border-radius: 22px;
  }

  .pricing-modal__widget {
    height: auto;
    min-height: 220px;
    max-height: calc(100svh - 3rem);
    border-radius: 22px;
  }
}

/* Tablet composition: keep the desktop and phone layouts independent, while
   giving 801–1200px screens their own readable rhythm and compact navigation. */
@media (min-width: 801px) and (max-width: 1200px) {
  .hero-header,
  .program-header,
  .legal-site-header,
  .privacy-site-header,
  .consent-site-header {
    position: fixed !important;
    z-index: 20;
    inset: 0 0 auto;
    width: 100% !important;
    max-width: none;
    min-height: 76px;
    margin: 0;
    padding: .7rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(5, 7, 10, .82);
    backdrop-filter: blur(14px) saturate(.9);
  }

  .hero-header.is-scrolled {
    background: rgba(5, 7, 10, .96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  }

  .hero-nav,
  .header-cta {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    padding: .6rem 0;
  }

  .menu-toggle__label { font-size: 12px; }
  .menu-toggle__lines i { width: 30px; }

  .mobile-menu {
    position: fixed;
    z-index: 19 !important;
    top: 76px;
    right: 1.5rem;
    left: 1.5rem;
    display: grid;
    gap: 1.15rem;
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    background: rgba(8, 10, 13, .97);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
    transition: max-height .35s var(--ease-out), padding .35s var(--ease-out), border-color .35s ease;
  }

  .mobile-menu.is-open {
    max-height: 360px;
    padding-block: 1.25rem;
    border-color: rgba(255, 255, 255, .16);
  }

  .mobile-menu a { font-size: 16px; }

  /* Home hero: a calm two-stage reading order instead of overlapping desktop art. */
  .hero {
    height: auto;
    min-height: 100svh;
    padding-top: 76px;
    background-position: 58% center;
  }

  .hero__content {
    width: min(calc(100% - 3rem), 720px);
    height: auto;
    margin-inline: auto;
    padding: 3rem 0 3.5rem;
  }

  .hero__copy { width: 100%; }

  .hero__eyebrow {
    gap: 1rem;
    margin-bottom: 1.2rem;
    font-size: clamp(14px, 2vw, 18px);
  }

  .hero__eyebrow-line { width: clamp(52px, 8vw, 70px); }

  .hero__title { margin-bottom: 1.5rem; }
  .hero__title-main { font-size: clamp(56px, 9vw, 76px); }
  .hero__title-accent { font-size: clamp(74px, 12vw, 104px); }

  .hero__description {
    max-width: 570px;
    margin-left: 0;
    margin-bottom: 1.8rem;
    font-size: clamp(18px, 2.3vw, 22px);
    line-height: 1.4;
  }

  .primary-cta {
    width: min(390px, 100%);
    min-height: 72px;
    height: auto;
    padding: 7px;
    font-size: 18px;
  }

  .primary-cta .round-arrow { width: 58px; height: 58px; font-size: 30px; }

  .hero__signature,
  .hero__credentials {
    display: none;
  }

  .hero__expert--desktop { display: none !important; }

  .hero__expert--mobile {
    position: relative;
    right: auto;
    bottom: auto;
    display: block !important;
    width: min(100%, 500px);
    height: auto;
    max-height: none;
    margin: .25rem auto .25rem;
    object-fit: contain;
    object-position: center bottom;
    opacity: .92;
  }

  .hero__benefits {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr;
    gap: 0;
    width: min(calc(100% - 3rem), 720px);
    min-height: 0;
    margin: 0 auto 1.5rem;
    padding: .7rem 1rem;
  }

  .benefit { min-height: 70px; }
  .benefit-divider { width: 100%; height: 1px; }

  /* Fixed tablet headers need a matching content offset on inner pages. */
  .program-page { padding-top: 76px; }
  .legal-top,
  .privacy-top,
  .consent-top { padding-top: 76px; }

  .legal-site-header,
  .privacy-site-header,
  .consent-site-header { border-radius: 0; }
}

/* Full tablet reflow for the long homepage sections. The desktop artwork uses
   a 1400px editorial canvas; tablets need a real layout instead of a cropped
   slice of that canvas. */
@media (min-width: 801px) and (max-width: 1200px) {
  .screen-two,
  .screen-three,
  .screen-four,
  .screen-five,
  .screen-six,
  .screen-seven,
  .screen-eight,
  .screen-nine,
  .screen-ten,
  .screen-eleven,
  .screen-twelve,
  .screen-thirteen {
    min-height: 0;
  }

  /* Audience */
  .screen-two {
    padding: 5rem 1.5rem 4rem;
  }

  .screen-two__intro,
  .audience-grid,
  .age-panel,
  .screen-two__decor,
  .screen-two__heart {
    position: relative;
    inset: auto;
    transform: none;
  }

  .screen-two__intro,
  .audience-grid,
  .age-panel {
    width: min(100%, 900px);
    margin-inline: auto;
  }

  .screen-two__intro { margin-bottom: 2.5rem; }
  .screen-two__eyebrow { gap: 1rem; margin-bottom: 1.8rem; font-size: 16px; }
  .screen-two__eyebrow span { width: 64px; }
  .screen-two__intro h2 { font-size: clamp(30px, 5vw, 46px); white-space: normal; }
  .screen-two__decor,
  .screen-two__heart { display: none; }

  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .audience-card {
    width: auto;
    height: 430px;
  }

  .audience-card__line { top: 278px; }
  .audience-card h3 { top: 198px; width: calc(100% - 40px); font-size: clamp(21px, 2.4vw, 25px); }
  .audience-card p { top: 294px; width: calc(100% - 40px); font-size: 15px; line-height: 1.28; }
  .audience-card:nth-child(2) h3,
  .audience-card:nth-child(2) p { left: 20px; }

  .age-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(130px, .42fr);
    gap: 1rem;
    align-items: center;
    height: auto;
    min-height: 170px;
    margin-top: 2rem;
    padding: 1.3rem 1.5rem;
  }

  .age-panel__line { display: none; }
  .age-panel__icon,
  .age-panel__main,
  .age-panel__support,
  .age-panel__photo { position: static; }
  .age-panel__icon { width: 48px; height: 48px; }
  .age-panel__main { width: auto; }
  .age-panel__heading { flex-wrap: wrap; gap: .35rem .8rem; white-space: normal; }
  .age-panel__age,
  .age-panel__main h3 { font-size: 20px; }
  .age-panel__main > p:last-child { font-size: 14px; }
  .age-panel__support { width: auto; font-size: 11px; }
  .age-panel__photo { width: 138px; height: auto; }
  .age-panel__note { display: none; }

  /* Beginner problems */
  .screen-three,
  .screen-four,
  .screen-five,
  .screen-six,
  .screen-seven,
  .screen-nine,
  .screen-ten,
  .screen-eleven {
    padding: 5rem 1.5rem;
  }

  .screen-three__inner,
  .screen-four__inner,
  .screen-five__inner,
  .screen-six__inner,
  .screen-seven__inner,
  .screen-eight__inner,
  .screen-nine__inner,
  .screen-ten__inner,
  .screen-eleven__inner,
  .screen-thirteen__inner {
    width: min(100%, 900px);
    height: auto;
    min-height: 0;
    margin-inline: auto;
  }

  .screen-three__inner,
  .screen-four__inner,
  .screen-five__inner,
  .screen-six__inner,
  .screen-seven__inner,
  .screen-nine__inner,
  .screen-ten__inner,
  .screen-eleven__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .screen-three__label,
  .screen-three__heading,
  .screen-three__lead,
  .screen-four__label,
  .screen-four__heading,
  .screen-four__lead,
  .screen-five__label,
  .screen-five__heading,
  .screen-five__lead,
  .screen-six__label,
  .screen-six__heading,
  .screen-six__lead,
  .screen-seven__label,
  .screen-seven__heading,
  .screen-seven__lead,
  .screen-nine__heading,
  .screen-nine__note,
  .screen-ten__label,
  .screen-ten__heading,
  .screen-eleven__heading,
  .screen-eleven__intro,
  .problem-card,
  .screen-four__card,
  .program-card,
  .flow-card,
  .method-card,
  .review-card,
  .pricing-card,
  .installment-benefit,
  .screen-five__button,
  .screen-eight__button,
  .screen-eleven__button,
  .screen-eleven__art {
    position: relative;
    inset: auto;
  }

  .screen-three__rings,
  .screen-three__round,
  .screen-three__headstock,
  .screen-three__blur,
  .screen-four__vector,
  .screen-five__script,
  .screen-five__guitar,
  .screen-five__guitar-fade,
  .screen-five__glow,
  .screen-nine__note { display: none; }

  .screen-three__label,
  .screen-three__heading,
  .screen-three__lead,
  .screen-four__label,
  .screen-four__heading,
  .screen-four__lead,
  .screen-five__label,
  .screen-five__heading,
  .screen-five__lead,
  .screen-six__label,
  .screen-six__heading,
  .screen-six__lead,
  .screen-seven__label,
  .screen-seven__heading,
  .screen-seven__lead,
  .screen-nine__heading,
  .screen-ten__label,
  .screen-ten__heading,
  .screen-eleven__heading,
  .screen-eleven__intro {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  .screen-three__label,
  .screen-four__label,
  .screen-five__label,
  .screen-six__label,
  .screen-seven__label,
  .screen-ten__label {
    gap: 1rem;
    font-size: 16px;
  }

  .screen-three__label span,
  .screen-four__label span,
  .screen-five__label span,
  .screen-six__label i,
  .screen-seven__label i,
  .screen-ten__label i { width: 64px; }

  .screen-three__heading,
  .screen-four__heading,
  .screen-five__heading,
  .screen-six__heading,
  .screen-seven__heading,
  .screen-nine__heading,
  .screen-ten__heading,
  .screen-eleven__heading {
    margin-top: 1.25rem;
    white-space: normal;
  }

  .screen-three__heading h2,
  .screen-three__heading p,
  .screen-four__heading h2,
  .screen-four__heading p,
  .screen-five__heading h2,
  .screen-five__heading p,
  .screen-six__heading h2,
  .screen-six__heading p,
  .screen-seven__heading,
  .screen-nine__heading h2,
  .screen-nine__heading p,
  .screen-ten__heading,
  .screen-eleven__heading {
    width: 100%;
    height: auto;
    white-space: normal;
  }

  .screen-three__heading h2,
  .screen-three__heading p { font-size: clamp(30px, 5.3vw, 48px); line-height: 1.04; }
  .screen-three__heading p { margin-top: .5rem; }
  .screen-three__lead,
  .screen-four__lead,
  .screen-five__lead,
  .screen-six__lead,
  .screen-seven__lead,
  .screen-eight__lead,
  .screen-eleven__intro { margin-top: 1.4rem; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.4; }
  .screen-three__desktop-break,
  .screen-five__desktop-break { display: none; }

  .problem-card,
  .screen-four__card,
  .program-card,
  .flow-card,
  .method-card,
  .review-card,
  .pricing-card {
    width: auto;
    margin: 0;
  }

  /* Problem cards */
  .screen-three__inner { row-gap: 1.25rem; }
  .problem-card { height: 400px; }
  .problem-card--three { grid-column: 1 / -1; width: min(100%, 377px); justify-self: center; }
  .problem-card h3,
  .problem-card p { width: calc(100% - 34px); }
  .problem-card h3 { top: 250px; font-size: 21px; }
  .problem-card p { top: 310px; font-size: 13px; }
  .problem-card--two p,
  .problem-card--three p { top: 310px; width: calc(100% - 34px); }

  /* Why us cards */
  .screen-four__inner { row-gap: 1.25rem; }
  .screen-four__heading h2 { font-size: clamp(34px, 5.5vw, 60px); }
  .screen-four__heading p { margin-top: .35rem; font-size: clamp(30px, 4.8vw, 52px); }
  .screen-four__card { height: 390px; }
  .screen-four__card--three { grid-column: 1 / -1; width: min(100%, 377px); justify-self: center; height: 390px; }

  /* Program cards */
  .screen-five__inner { row-gap: 1.25rem; }
  .screen-five__heading h2 { font-size: clamp(32px, 4.6vw, 48px); }
  .screen-five__heading p { margin-top: .35rem; font-size: clamp(34px, 5.4vw, 55px); }
  .screen-five__heading p:last-child { margin-top: .35rem; }
  .program-card,
  .program-card--musicality,
  .program-card--hits { height: 484px; }
  .program-card--hits { grid-column: 1 / -1; width: min(100%, 377px); justify-self: center; }
  .program-card__surface,
  .program-card__result { width: 100%; }
  .program-card__list { width: calc(100% - 38px); }
  .screen-five__button { grid-column: 1 / -1; width: min(100%, 377px); justify-self: center; }

  /* Learning flow */
  .screen-six__inner { row-gap: 1.25rem; }
  .screen-six__heading h2 { width: 100%; font-size: clamp(30px, 4.8vw, 42px); }
  .screen-six__heading p { margin-top: .4rem; font-size: clamp(40px, 6.5vw, 60px); }
  .flow-card { width: auto; height: 300px; }
  .flow-card--one,
  .flow-card--two,
  .flow-card--three,
  .flow-card--four,
  .flow-card--five { top: auto; left: auto; }
  .flow-card--five { grid-column: 1 / -1; width: min(100%, 390px); justify-self: center; }
  .flow-card h3 { top: 168px; font-size: 20px; }
  .flow-card--one h3,
  .flow-card--two h3 { top: 190px; }
  .flow-card--one p,
  .flow-card--two p { top: 238px; width: calc(100% - 38px); }
  .flow-card--three p,
  .flow-card--four p,
  .flow-card--five p { top: 220px; width: calc(100% - 38px); }

  /* Author method */
  .screen-seven__inner { row-gap: 1.25rem; }
  .method-card { height: 220px; }
  .method-card--personal { grid-column: 1 / -1; width: 100%; height: 260px; }
  .method-card__image { width: 42%; }
  .method-card--personal .method-card__image { width: 52%; height: 260px; }
  .method-card h3,
  .method-card p { max-width: calc(58% - 30px); }
  .method-card--personal h3,
  .method-card--personal p { width: calc(52% - 90px); max-width: none; }
  .method-card--personal p { top: 62px; }
  .method-card__note { display: none; }

  /* About the author */
  .screen-eight { padding: 5rem 1.5rem; }
  .screen-eight__inner { display: flex; flex-direction: column; gap: 0; }
  .screen-eight__expert {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 520px);
    height: auto;
    margin: 0 auto 1.5rem;
    object-fit: contain;
  }
  .screen-eight__accent { display: none; }
  .screen-eight__label,
  .screen-eight__heading,
  .screen-eight__lead,
  .expert-feature,
  .screen-eight__button { position: relative; inset: auto; width: 100%; }
  .screen-eight__label { gap: 1rem; font-size: 16px; }
  .screen-eight__label i { width: 64px; }
  .screen-eight__heading { margin-top: 1.25rem; font-size: clamp(38px, 5.8vw, 60px); line-height: 1; }
  .expert-feature { margin-top: 1rem; }
  .expert-feature p { font-size: 17px; }
  .screen-eight__button { width: min(100%, 360px); margin-top: 1.5rem; }

  /* Reviews */
  .screen-nine__inner { row-gap: 1rem; }
  .screen-nine__heading h2 { font-size: clamp(50px, 8vw, 80px); }
  .screen-nine__heading p { margin-top: .35rem; font-size: clamp(25px, 4vw, 36px); }
  .review-card,
  .review-card--hero,
  .review-card--small { left: auto; top: auto; }
  .review-card--hero { grid-column: 1 / -1; width: 100%; height: 440px; }
  .review-card--small { width: auto; height: 240px; }
  .review-card--hero h3 { top: 330px; font-size: 28px; }
  .review-card--hero .review-card__meta { top: 374px; width: calc(100% - 52px); font-size: 14px; }
  .review-card--leonid h3,
  .review-card--zoya h3,
  .review-card--vita h3 { top: 150px; }

  /* Pricing */
  .screen-ten__inner { row-gap: 1rem; }
  .screen-ten__heading { font-size: clamp(40px, 6vw, 60px); }
  .pricing-card,
  .pricing-card--first,
  .pricing-card--master,
  .pricing-card--hits { top: auto; left: auto; height: 682px; padding-inline: 20px; }
  .pricing-card--master { grid-column: 1 / -1; width: min(100%, 377px); justify-self: center; }
  .pricing-card__intro,
  .pricing-card--master .pricing-card__intro { width: 100%; white-space: normal; }
  .pricing-card h4 { left: 20px; }
  .pricing-card__feature p,
  .pricing-card--master .pricing-card__feature p { width: calc(100% - 46px); white-space: normal; }
  .pricing-card__list { left: 20px; width: calc(100% - 40px); }
  .pricing-card__price,
  .pricing-card__button { left: 20px; width: calc(100% - 40px); }
  .pricing-card__badge { left: 50%; transform: translateX(-50%); }

  /* Installments */
  .screen-eleven__inner { row-gap: 1.25rem; }
  .screen-eleven__heading { font-size: clamp(38px, 5.8vw, 60px); }
  .installment-benefit { width: 100%; }
  .installment-benefit__icon { width: 78px; height: 78px; flex-basis: 78px; }
  .installment-benefit__icon svg { width: 42px; height: 42px; }
  .installment-benefit > div { padding-top: 3px; padding-left: 14px; }
  .installment-benefit h3 { font-size: 18px; }
  .installment-benefit p { width: auto; font-size: 16px; }
  .screen-eleven__button { grid-column: 1 / -1; width: min(100%, 460px); justify-self: center; padding-left: 2rem; font-size: 17px; }
  .screen-eleven__art { grid-column: 1 / -1; display: block; width: min(100%, 560px); height: auto; margin: 1rem auto 0; }

  /* Guarantee */
  .screen-twelve { padding: 2rem 1.5rem 4rem; }
  .screen-twelve__panel {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1.5rem;
    width: min(100%, 900px);
    height: auto;
    min-height: 390px;
    margin: 0 auto;
    padding: 2rem;
  }
  .guarantee-visual,
  .screen-twelve__copy,
  .screen-twelve__divider,
  .guarantee-point { position: relative; inset: auto; }
  .guarantee-visual { width: 150px; height: 150px; }
  .guarantee-visual svg { width: 72px; height: 72px; }
  .screen-twelve__copy { width: auto; align-self: center; }
  .screen-twelve__copy h2 { width: 100%; font-size: clamp(34px, 5.6vw, 58px); white-space: normal; }
  .screen-twelve__copy p { width: 100%; margin-top: 1rem; font-size: 18px; }
  .screen-twelve__divider { display: none; }
  .guarantee-point { display: flex; min-width: 0; margin-top: 1.5rem; }
  .guarantee-point--test { grid-column: 1; }
  .guarantee-point--easy { grid-column: 2; }
  .guarantee-point--safe { grid-column: 1 / -1; justify-self: center; }
  .guarantee-point svg { width: 44px; height: 44px; flex-basis: 44px; }
  .guarantee-point strong { font-size: 17px; white-space: normal; }

  /* FAQ */
  .screen-thirteen { padding: 4rem 1.5rem 5rem; }
  .screen-thirteen__inner { width: min(100%, 900px); }
  .screen-thirteen h2,
  .screen-thirteen__intro,
  .faq-list { position: relative; inset: auto; width: 100%; }
  .screen-thirteen h2 { font-size: clamp(42px, 6.5vw, 68px); white-space: normal; }
  .screen-thirteen__intro { margin-top: 1rem; font-size: 18px; }
  .faq-list { margin-top: 2.5rem; }
  .faq-item,
  .faq-item.is-open { width: 100%; height: auto; min-height: 52px; margin-left: 0; border-radius: 16px; }
  .faq-item + .faq-item,
  .faq-item.is-open + .faq-item { margin-top: .85rem; }
  .faq-item__trigger,
  .faq-item.is-open .faq-item__trigger { min-height: 52px; height: auto; padding: .85rem 3.5rem .85rem 1rem; }
  .faq-item__number { width: 26px; flex-basis: 26px; font-size: 15px; }
  .faq-item__divider { display: none; }
  .faq-item__question { font-size: 16px; line-height: 1.25; }
  .faq-item__toggle,
  .faq-item.is-open .faq-item__toggle { top: .85rem; right: .85rem; }
  .faq-item__answer { padding: 0 1rem 1.15rem; }
  .faq-item__answer p { font-size: 15px; line-height: 1.45; }

  /* Footer */
  .site-footer { min-height: 0; }
  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 2rem;
    width: min(calc(100% - 3rem), 900px);
    height: auto;
    min-height: 0;
    margin-inline: auto;
    padding: 3rem 0 1.5rem;
  }
  .site-footer__socials,
  .site-footer__columns,
  .site-footer__cta,
  .site-footer__bottom { position: static; }
  .site-footer__socials { align-self: start; }
  .site-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; }
  .site-footer__column { gap: .7rem; }
  .site-footer__column h2 { font-size: 14px; }
  .site-footer__column a { font-size: 11px; white-space: normal; }
  .site-footer__cta { width: min(100%, 340px); align-self: start; gap: 12px; padding-left: 24px; }
  .site-footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .65rem 2rem; }
  .site-footer__bottom p { font-size: 10px; line-height: 1.5; white-space: normal; }
  .site-footer__bottom p:last-child { font-size: 9px; }
  .site-footer__top { top: 3rem; right: 1.5rem; }
}

/* Center the tablet hero as one balanced composition. */
@media (min-width: 801px) and (max-width: 1200px) {
  .hero__copy {
    width: min(100%, 620px);
    margin-inline: auto;
    text-align: center;
  }

  .hero__eyebrow { justify-content: center; }

  .hero__description {
    max-width: 570px;
    margin-right: auto;
    margin-left: auto;
  }

  .primary-cta { margin-inline: auto; }
}

/* Tablet readability for the author's method cards. */
@media (min-width: 801px) and (max-width: 1200px) {
  .method-card__image {
    z-index: 0;
    width: 48%;
    background-size: cover;
    background-position: center;
    opacity: .42;
  }

  .method-card--personal .method-card__image {
    z-index: 0;
    width: 52%;
    opacity: .58;
  }

  .method-card__surface {
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(251, 251, 249, .99) 0%,
      rgba(251, 251, 249, .96) 48%,
      rgba(251, 251, 249, .76) 72%,
      rgba(251, 251, 249, .08) 100%
    );
  }

  .method-card--personal .method-card__surface {
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(15, 16, 17, .98) 0%,
      rgba(15, 16, 17, .92) 48%,
      rgba(15, 16, 17, .66) 78%,
      rgba(15, 16, 17, .2) 100%
    );
  }

  .method-card__number,
  .method-card h3,
  .method-card p { z-index: 3; }

  .method-card h3,
  .method-card p {
    width: calc(100% - 120px);
    max-width: none;
  }

  .method-card h3 { font-size: 18px; line-height: 1.08; }
  .method-card p { top: 78px; font-size: 13px; line-height: 1.28; }
  .method-card--hands p { top: 104px; }

  .method-card--personal h3 {
    width: calc(100% - 70px);
    max-width: none;
    font-size: 20px;
  }

  .method-card--personal p {
    top: 64px;
    width: calc(52% - 45px);
    max-width: none;
    font-size: 13px;
    line-height: 1.3;
  }
}

/* Keep method-card copy in a natural flow so every heading gets the same
   breathing room before its description, regardless of line count. */
@media (min-width: 801px) and (max-width: 1200px) {
  .method-card h3,
  .method-card p {
    position: relative;
    top: auto;
    left: 80px;
    margin-right: 0;
  }

  .method-card h3 {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .method-card p {
    margin-top: .7rem;
  }

  .method-card--hands p,
  .method-card--personal p { top: auto; }
}

/* Let the expert portrait dissolve into the tablet section background instead
   of ending as a hard rectangular cutout. */
@media (min-width: 801px) and (max-width: 1200px) {
  .screen-thirteen h2 {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(34px, 5.5vw, 56px);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
  }
}

/* Tablet footer: replace the desktop absolute canvas with a real layout so
   the back-to-top control never overlaps the contact links. */
@media (min-width: 801px) and (max-width: 1200px) {
  .site-footer {
    min-height: 0;
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 42px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "social columns top"
      "cta columns top"
      "bottom bottom bottom";
    gap: 2rem 1.25rem;
    width: min(calc(100% - 3rem), 900px);
    height: auto;
    min-height: 0;
    margin-inline: auto;
    padding: 2.75rem 1.5rem 1.5rem;
    box-sizing: border-box;
  }

  .site-footer__socials,
  .site-footer__columns,
  .site-footer__cta,
  .site-footer__bottom,
  .site-footer__top {
    position: static;
  }

  .site-footer__socials {
    grid-area: social;
    align-self: start;
    flex-wrap: wrap;
  }

  .site-footer__columns {
    grid-area: columns;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-self: start;
    min-width: 0;
  }

  .site-footer__column {
    min-width: 0;
    gap: .7rem;
  }

  .site-footer__column h2 {
    font-size: 14px;
    line-height: 1;
  }

  .site-footer__column a {
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }

  .site-footer__cta {
    grid-area: cta;
    align-self: end;
    width: 230px;
    height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: 4px 4px 4px 14px;
    font-size: 11px;
  }

  .site-footer__cta > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
  }

  .site-footer__cta-arrow {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin: 0;
  }

  .site-footer__top {
    grid-area: top;
    align-self: start;
    justify-self: end;
    width: 36px;
    height: 36px;
  }

  .site-footer__bottom {
    grid-area: bottom;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    width: 100%;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .site-footer__bottom p {
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
  }

  .site-footer__bottom p:last-child {
    flex: 0 0 auto;
    font-size: 9px;
    transform: none;
  }
}

@media (min-width: 801px) and (max-width: 1200px) {
  /* Keep the tablet pricing section editorial and centered: one readable
     card column is more reliable than squeezing three desktop cards into
     half-width grid tracks. */
  .screen-ten__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-ten__heading {
    position: relative !important;
    top: auto;
    right: auto;
    bottom: auto;
    left: 0 !important;
    width: max-content !important;
    max-width: 100%;
    grid-column: 1 / -1 !important;
    justify-self: center;
    margin-inline: auto !important;
    transform: none !important;
    font-size: clamp(42px, 6.4vw, 60px);
    line-height: .98;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
  }

  .screen-ten__label {
    width: 100%;
    justify-self: stretch;
    justify-content: center;
  }

  .screen-ten__heading span,
  .screen-ten__heading strong {
    display: block;
    white-space: nowrap;
  }

  .pricing-card,
  .pricing-card--first,
  .pricing-card--master,
  .pricing-card--hits {
    grid-column: 1;
    justify-self: center;
    width: min(100%, 377px);
  }

  .pricing-card--first { order: 1; }
  .pricing-card--hits { order: 2; }
  .pricing-card--master { order: 3; }

  .screen-eight__expert {
    width: min(100%, 560px);
    margin: 0 auto -0.75rem;
    -webkit-mask-image: radial-gradient(
      ellipse 72% 62% at 50% 33%,
      #000 42%,
      rgba(0, 0, 0, .9) 58%,
      transparent 93%
    );
    mask-image: radial-gradient(
      ellipse 72% 62% at 50% 33%,
      #000 42%,
      rgba(0, 0, 0, .9) 58%,
      transparent 93%
    );
  }

  .screen-eight__button {
    align-self: center;
    margin-inline: auto;
    margin-top: 0;
    position: relative;
    z-index: 1;
  }
}