/* ==========================================================================
   5000 WORDS — landing page styles

   Sizing: every dimension is written as calc(N * var(--u)), where N is the
   pixel value from the design mockups.
   · Desktop (≥ 1024px): 1440px mockup, 1200px content stage.
     --u = 1px from ~1250px wide and shrinks proportionally below that.
     The final call-to-action block scales against the full 1440px width,
     because its decorations spread across the whole screen.
   · Mobile (< 1024px): 390px mockup. --u scales the 390px layout to the
     screen width (capped at a 460px-wide column on tablets).
   ========================================================================== */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/onest-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest-cyrillic-500.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/onest-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest-cyrillic-600.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/onest-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/onest-cyrillic-700.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/onest-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/onest-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/onest-cyrillic-800.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/onest-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/onest-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pt-serif-cyrillic-400.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pt-serif-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/pt-serif-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/pt-serif-cyrillic-700.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/pt-serif-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/pt-serif-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root { --u: 1px; }
@media (max-width: 1023.98px) { :root { --u: calc(min(100vw, 460px) / 390); } }
@media (min-width: 1024px) { :root { --u: min(1px, calc((100vw - 64px) / 1200)); } }
@supports (width: 1cqw) {
  @media (max-width: 1023.98px) { .page { --u: calc(min(100cqw, 460px) / 390); } }
  @media (min-width: 1024px) {
    .page { --u: min(1px, calc((100cqw - 48px) / 1200)); }
    .page .cta { --u: min(1px, calc(100cqw / 1440)); }
  }
}
@media (min-width: 1024px) { .cta { --u: min(1px, calc(100vw / 1440)); } }


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ffffff;
  color: #111318;
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page { container-type: inline-size; overflow: hidden; }
img, svg { display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
s { text-decoration-color: #E5484D; }
.serif { font-family: 'PT Serif', Georgia, 'Times New Roman', serif; }
.sec { position: relative; overflow: hidden; }
.wrap { position: relative; margin: 0 auto; height: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid #3F4CF5; outline-offset: 3px; }
.hero :focus-visible, .cta :focus-visible { outline-color: #FFE14D; }

/* ---------- Phone frame ---------- */
.phone { position: absolute; background: #15161A; }
.phone img { position: absolute; display: block; object-fit: cover; background: #ffffff; }
.phone::after { content: ""; position: absolute; left: 50%; border-radius: calc(20 * var(--u)); background: #000000; }

/* ---------- Store badges ---------- */
.stores { display: flex; align-items: center; }
.store {
  display: inline-flex; align-items: center;
  background: #000000; color: #ffffff;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.store__txt { display: flex; flex-direction: column; line-height: 1.05; }
.store__txt b { font-weight: 600; }
.store--as, .store--gp { transition: transform 0.15s ease; }
.store--as:hover, .store--gp:hover { transform: translateY(calc(-2 * var(--u))); }

/* ---------- Rating ---------- */
.rating { display: flex; align-items: center; }
.laurel { width: auto; }
.rating__value { font-family: 'PT Serif', Georgia, serif; font-weight: 700; line-height: 1; }
.rating__col { display: flex; flex-direction: column; }
.stars { display: flex; }
.st {
  display: block; flex-shrink: 0;
  -webkit-mask: url(../images/star.svg) center / contain no-repeat;
  mask: url(../images/star.svg) center / contain no-repeat;
  background:
    linear-gradient(90deg, transparent var(--f, 100%), var(--st-off, #D9DCE3) var(--f, 100%)),
    var(--st-on, #FFC21A);
}
.rating--hero { --st-off: rgba(255, 255, 255, 0.3); }
.rating--hero .rating__value { color: #ffffff; }
.rating--hero .rating__count { color: rgba(255, 255, 255, 0.75); }
.rating--big { --st-on: linear-gradient(180deg, #FFD35C, #FF9F0A); --st-off: #D9DCE3; }
.rating--big .rating__col { align-items: center; }
.rating--big .rating__value { color: #111318; }
.rating--big .rating__count { font-weight: 600; color: #5C616B; }

/* ---------- Level chips ---------- */
.c-a1 { background: #E4F6EB; color: #12713A; --dot: #22B35E; }
.c-a2 { background: #E0F2FB; color: #0B6690; --dot: #1C9FD6; }
.c-b1 { background: #EFE8FE; color: #5528BF; --dot: #8B5CF6; }
.c-b2 { background: #FFEBDD; color: #A3450B; --dot: #F2792B; }
.c-c1 { background: #FDE6E6; color: #A51D23; --dot: #E5484D; }
.lvl {
  height: calc(24 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u));
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  font-size: calc(13 * var(--u)); font-weight: 700; white-space: nowrap;
}
.lvl::before { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--dot); }
.lvl--all { background: #3F4CF5; color: #ffffff; }
.lvl--all::before { display: none; }

/* ---------- Word card ---------- */
.wcard {
  position: absolute; padding: calc(10 * var(--u)); border-radius: calc(24 * var(--u)); background: #ffffff;
  box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(17, 19, 24, 0.22);
}
.wcard img { width: 100%; object-fit: cover; border-radius: calc(16 * var(--u)); }
.wcard__body { padding: calc(10 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.wcard__row { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.wcard__word { font-family: 'PT Serif', Georgia, serif; font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.1; color: #111318; }
.wcard__tr { font-size: calc(15 * var(--u)); color: #5C616B; }
.wcard--big .wcard__word { font-size: calc(30 * var(--u)); }
.wcard--big .wcard__tr { font-size: calc(17 * var(--u)); }
.wcard__check {
  position: absolute; right: calc(-14 * var(--u)); top: calc(-14 * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(23 * var(--u));
  background: #22B35E; border: calc(4 * var(--u)) solid #ffffff;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(34, 179, 94, 0.35);
  display: flex; align-items: center; justify-content: center;
}
.wcard__check svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ipa { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); color: #2A3FB8; }
.ipa__t { height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: #EAF0FF; display: inline-flex; align-items: center; }
.ipa__btn { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); background: #D3DEFF; display: inline-flex; align-items: center; justify-content: center; }
.ipa__btn svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ---------- Header ---------- */
.top { position: absolute; display: flex; align-items: center; justify-content: space-between; z-index: 10; }
.logo { display: block; flex-shrink: 0; }
.lang { display: flex; background: rgba(255, 255, 255, 0.16); }
.lang a { display: flex; align-items: center; font-weight: 700; color: #ffffff; }
.lang a[aria-current] { background: #ffffff; color: #3F4CF5; }

/* ---------- Hero ---------- */
.hero { background: url(../images/stars.svg) 0 0 / calc(600 * var(--u)) calc(600 * var(--u)), linear-gradient(160deg, #4B57FF 0%, #3F4CF5 48%, #2A33C4 100%); }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.bubble { position: relative; background: #ffffff; font-weight: 600; color: #111318; transform: rotate(-1.5deg); }
/* speech tail at the bottom left */
.bubble::after {
  content: ""; position: absolute; top: calc(100% - 1px); background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M7 0H26C22 9 13 16 0 20C5 14 8 7 7 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M7 0H26C22 9 13 16 0 20C5 14 8 7 7 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.bubble span { font-weight: 500; font-style: italic; color: #8A8FA0; }
.hero h1 { font-weight: 700; color: #ffffff; }
.hero__sub { color: rgba(255, 255, 255, 0.88); }

/* ---------- Section heads ---------- */
.sec-head { text-align: center; }
.sec-head h2, .test__head h2, .prog__head h2, .dark__head h2, .srs__text h2, .cta__in h2 { font-weight: 700; color: #111318; }
.sec-head p, .test__head p, .prog__head p, .srs__text p { color: #5C616B; }

/* ---------- Anatomy ---------- */
.anat { background: linear-gradient(180deg, #FFF4C7 0%, #FFFAE6 60%, #FFFDF4 100%); }
.feat__ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--fg); }
.feat__ico b { font-weight: 800; }
.feat__ico b.serif { font-weight: 700; }
.feat__txt { display: flex; flex-direction: column; }
.feat__txt b { font-weight: 700; color: #111318; }
.feat__txt span { color: #5C616B; }

/* ---------- Why 5000 ---------- */
.why { background: #ffffff; }
.step { background: #EEF0FF; display: flex; flex-direction: column; }
.step__n { align-self: flex-start; display: inline-flex; align-items: center; background: #3F4CF5; color: #ffffff; font-weight: 700; }
.step h3 { font-family: 'PT Serif', Georgia, serif; font-weight: 700; line-height: 1.2; color: #111318; }
.step p { color: #5C616B; }
.src-tags, .xchips { display: flex; flex-wrap: wrap; }
.src-tag { display: inline-flex; align-items: center; background: #3F4CF5; color: #ffffff; font-weight: 600; }
.xchip { display: inline-flex; align-items: center; background: #ffffff; color: #8A8FA0; font-weight: 700; }
.xrows { display: flex; flex-direction: column; align-items: flex-start; }
.xrow { display: flex; align-items: center; background: #ffffff; color: #8A8FA0; }
.xrow .serif { font-weight: 700; }
/* thin diagonal strike, corner to corner: one per chip, one per whole row */
.xchip, .xrow { position: relative; text-decoration: none; }
.xchip::after, .xrow::after {
  content: ""; position: absolute; pointer-events: none;
  background: linear-gradient(to bottom right,
    transparent calc(50% - 1.25 * var(--u)), #E5484D calc(50% - 0.75 * var(--u)),
    #E5484D calc(50% + 0.75 * var(--u)), transparent calc(50% + 1.25 * var(--u)));
}
.xchip::after { inset: calc(9 * var(--u)) calc(7 * var(--u)); }
.xrow::after { inset: calc(7 * var(--u)) calc(8 * var(--u)); }
.why__arrow {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: #ffffff; color: #3F4CF5;
}
.why__res { text-align: center; font-weight: 700; color: #111318; }
.mark { background: linear-gradient(transparent 56%, #FFE14D 56%, #FFE14D 90%, transparent 90%); white-space: nowrap; }

/* ---------- Exercises ---------- */
.ex { background: linear-gradient(180deg, #E2F5EA 0%, #F1FAF4 60%, #ffffff 100%); }
.ex__item figcaption { display: flex; align-items: flex-start; }
.dot { flex-shrink: 0; border-radius: 50%; background: var(--c); }
.ex__cap { display: flex; flex-direction: column; }
.ex__cap b { font-weight: 700; color: #111318; }
.ex__cap span { color: #5C616B; }

/* ---------- Spaced repetition ---------- */
.srs { background: linear-gradient(180deg, #E9ECFF 0%, #F3F4FF 100%); }
.srs__text { display: flex; flex-direction: column; }
.checks { display: flex; flex-direction: column; }
.checks li { display: flex; align-items: center; font-weight: 700; color: #111318; }
.ok { flex-shrink: 0; border-radius: 50%; background: #22B35E; display: flex; align-items: center; justify-content: center; }
.srs__card { background: #ffffff; display: flex; flex-direction: column; align-items: center; }
.legend { display: flex; font-weight: 700; }
.legend span { display: flex; align-items: center; }
.lg-with { color: #3F4CF5; }
.lg-with i { display: block; background: #3F4CF5; }
.lg-without { color: #E5484D; }
.lg-without i { display: block; border-top-style: dashed; border-top-color: #E5484D; }

/* ---------- Test ---------- */
.test { background: linear-gradient(180deg, #ffffff 0%, #EEF0FF 100%); }
.tsteps { display: flex; flex-direction: column; }
.tsteps li { display: flex; align-items: flex-start; }
.tsteps__n { flex-shrink: 0; border-radius: 50%; background: #3F4CF5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tsteps__body { display: flex; flex-direction: column; }
.tsteps__body > b { font-weight: 700; color: #111318; }
.tsteps__body > span { color: #5C616B; }
.lvls, .rules { display: flex; flex-wrap: wrap; }
.rule { display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; }
.rule b { font-weight: 800; }
.rule--ok { background: #E4F6EB; color: #12713A; }
.rule--bad { background: #FDE6E6; color: #A51D23; }
.rule--dk { background: #ECEDF0; color: #3A3F47; }
.test__chip {
  position: absolute; z-index: 5; display: flex; align-items: center;
  background: #22B35E; color: #ffffff; font-weight: 800; white-space: nowrap;
  transform: rotate(6deg);
}

/* ---------- Progress ---------- */
.prog { background: linear-gradient(180deg, #FFF4C7 0%, #FFFAE6 60%, #ffffff 100%); }
.prog__head { display: flex; flex-direction: column; }
.pos { position: absolute; background: #ffffff; display: flex; flex-direction: column; }
.pos h3 { font-family: 'PT Serif', Georgia, serif; font-weight: 700; color: #111318; }
.pos__row { display: flex; flex-direction: column; }
.pos__lbl { display: flex; justify-content: space-between; font-weight: 600; color: #111318; }
.pos__lbl span + span { color: #5C616B; }
.bar { display: flex; background: #EEF0F3; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; }
.streak-chip { position: absolute; z-index: 4; display: flex; align-items: center; background: #ffffff; font-weight: 700; color: #111318; white-space: nowrap; }
.streak-chip__ico { flex-shrink: 0; border-radius: 50%; background: #FFE8D6; display: flex; align-items: center; justify-content: center; }

/* ---------- Dark theme ---------- */
.dark { background: url(../images/stars.svg) 0 0 / calc(600 * var(--u)) calc(600 * var(--u)), linear-gradient(180deg, #0A1634 0%, #06122A 55%, #04101F 100%); }
.moon { position: absolute; }
.dark__head { display: flex; flex-direction: column; }
.dark__head h2 { color: #F5F7FA; }
.dark__head p { color: #97A3B6; }

/* ---------- Reviews ---------- */
.reviews { background: #F6F7F9; }
.rv-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv { flex-shrink: 0; scroll-snap-align: start; background: #ffffff; display: flex; flex-direction: column; }
.rv__stars { display: flex; gap: calc(2 * var(--u)); }
.rv__stars svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: #DDE0E6; }
.rv__stars svg.on { fill: #FFC21A; }
.rv__title {
  font-family: 'PT Serif', Georgia, serif; font-weight: 700; line-height: 1.25; color: #111318;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.rv__text {
  line-height: 1.5; color: #3A3F47;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.rv__author { margin-top: auto; font-weight: 700; color: #111318; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-nav { display: flex; align-items: center; justify-content: center; }
.rv-nav[hidden], .carousel.is-static .rv-btn { display: none; }
.rv-btn { border: 0; padding: 0; background: #ffffff; color: #111318; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rv-btn:disabled { opacity: 0.4; cursor: default; }
.rv-dots { display: flex; align-items: center; }
.rv-dot { border: 0; padding: 0; background: #C9CDD6; cursor: pointer; transition: width 0.3s ease, background-color 0.3s ease; }
.rv-dot[aria-current="true"] { background: #3F4CF5; }

/* ---------- Final CTA ---------- */
.cta { background: url(../images/stars.svg) 0 0 / calc(600 * var(--u)) calc(600 * var(--u)), linear-gradient(160deg, #4B57FF 0%, #3F4CF5 50%, #2A33C4 100%); }
.cta__decor { position: absolute; top: 0; pointer-events: none; }
.cta__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta__in h2 { color: #ffffff; }
.cta__in p { color: rgba(255, 255, 255, 0.86); }
.fl { position: absolute; transform-origin: 0 0; z-index: 2; }
.sh { box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(10, 14, 90, 0.32); }
.e-tr {
  height: calc(60 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(16 * var(--u)); border-radius: calc(30 * var(--u)); background: #22B35E; color: #ffffff;
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; white-space: nowrap;
}
.e-tr__ok { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(15 * var(--u)); background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; }
.e-tr__ok svg, .e-laurel__ok svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.e-mic { display: flex; flex-direction: column; align-items: center; gap: calc(34 * var(--u)); }
.e-mic__ring { position: relative; width: calc(104 * var(--u)); height: calc(104 * var(--u)); }
.e-mic__ring span { position: absolute; inset: 0; border-radius: calc(52 * var(--u)); background: #ffffff; display: flex; align-items: center; justify-content: center; }
.e-mic__ring span:nth-child(1) { transform: scale(1.5); opacity: 0.1; }
.e-mic__ring span:nth-child(2) { transform: scale(1.25); opacity: 0.16; }
.e-mic__ring svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.e-pill { height: calc(52 * var(--u)); padding: 0 calc(22 * var(--u)); border-radius: calc(26 * var(--u)); background: #ffffff; color: #3F4CF5; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; white-space: nowrap; }
.e-timer { display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); }
.e-timer__box { width: calc(250 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(20 * var(--u)); background: #ffffff; display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; color: #111318; }
.e-timer__bar { flex: 1; height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: #E4E6EA; overflow: hidden; }
.e-timer__bar i { display: block; width: 90%; height: 100%; border-radius: calc(5 * var(--u)); background: #3F4CF5; }
.e-plus { height: calc(48 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(24 * var(--u)); background: #E4F6EB; color: #12713A; display: inline-flex; align-items: center; font-size: calc(21 * var(--u)); font-weight: 700; white-space: nowrap; }
.e-laurel { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.e-laurel > svg { width: calc(120 * var(--u)); height: calc(120 * var(--u)); overflow: visible; }
.e-laurel__chip { height: calc(58 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(14 * var(--u)); border-radius: calc(29 * var(--u)); background: #E4F6EB; color: #12713A; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(23 * var(--u)); font-weight: 700; white-space: nowrap; }
.e-laurel__ok { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(15 * var(--u)); background: #22B35E; display: flex; align-items: center; justify-content: center; }
.e-ipa, .e-peek { display: flex; flex-direction: column; align-items: flex-start; }
.e-ipa { gap: calc(16 * var(--u)); }
.e-peek { gap: calc(14 * var(--u)); }
.e-ipa__pill { height: calc(60 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(30 * var(--u)); background: #ffffff; color: #111318; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; font-size: calc(26 * var(--u)); font-weight: 700; }
.e-ipa__spk { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(17 * var(--u)); background: #EEF0FF; display: flex; align-items: center; justify-content: center; }
.e-ipa__spk svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.e-peek .e-pill { height: calc(56 * var(--u)); border-radius: calc(28 * var(--u)); }
.e-peek .e-pill svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.lchips { display: flex; gap: calc(10 * var(--u)); }
.lchip { height: calc(50 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: calc(25 * var(--u)); display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; white-space: nowrap; }
.lchip::before { content: ""; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--dot); }
.e-prog { width: calc(352 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border-radius: calc(22 * var(--u)); background: #ffffff; }
.e-prog__top { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.e-prog__n { font-family: 'PT Serif', Georgia, serif; font-size: calc(34 * var(--u)); font-weight: 700; color: #111318; }
.e-prog__l { font-size: calc(19 * var(--u)); color: #5C616B; }
.e-prog__bar { margin-top: calc(12 * var(--u)); display: flex; border-radius: calc(6 * var(--u)); overflow: hidden; }
.e-prog__bar i { display: block; height: calc(12 * var(--u)); }
.e-streak { padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: #ffffff; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.e-streak b { font-size: calc(18 * var(--u)); font-weight: 700; color: #111318; }
.e-streak__days { display: flex; gap: calc(6 * var(--u)); }
.e-streak__days i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(13 * var(--u)); display: flex; align-items: center; justify-content: center; }
.e-streak__days i.on { background: #3F4CF5; }
.e-streak__days i.off { background: #ffffff; border: calc(1.5 * var(--u)) solid #E3E5E9; }
.e-streak__days svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.e-grid { padding: calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: #ffffff; display: grid; grid-template-columns: repeat(8, calc(18 * var(--u))); gap: calc(5 * var(--u)); }
.e-grid i { display: block; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(4 * var(--u)); }

/* ---------- Footer ---------- */
.foot { background: #ffffff; }
.foot__copy { color: #6B7079; }
.foot__links { display: flex; }
.foot__links a { color: #3A3F47; font-weight: 600; }
.foot__links a:hover { color: #3F4CF5; }
.foot__made { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); color: #6B7079; }
.foot__brand { display: block; transition: opacity 0.15s ease; }
.foot__brand:hover { opacity: 0.8; }
.foot__brand img { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .store--as, .store--gp, .rv-dot { transition: none; }
}

/* ==========================================================================
   Desktop — calc(1440 * var(--u)) mockup
   ========================================================================== */
@media (min-width: 1024px) {
  .wrap { width: calc(1200 * var(--u)); }

  /* header */
  .top { left: 0; right: 0; top: 0; height: calc(116 * var(--u)); }
  .logo img { width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(19 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(10, 14, 90, 0.32); }
  .lang { padding: calc(3 * var(--u)); border-radius: calc(13 * var(--u)); gap: calc(2 * var(--u)); }
  .lang a { height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }

  /* store badges */
  .stores { gap: calc(12 * var(--u)); }
  .store { height: calc(58 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(16 * var(--u)); border-radius: calc(14 * var(--u)); gap: calc(10 * var(--u)); }
  .store__txt small { font-size: calc(11 * var(--u)); }
  .store__txt b { font-size: calc(20 * var(--u)); }
  .store svg.apple { width: calc(22 * var(--u)); height: calc(26 * var(--u)); }
  .store svg.gplay { width: calc(24 * var(--u)); height: calc(26 * var(--u)); }

  /* hero */
  .hero { height: calc(840 * var(--u)); }
  .hero__glow {
    position: absolute; left: calc(890 * var(--u)); top: calc(60 * var(--u)); width: calc(560 * var(--u)); height: calc(560 * var(--u)); border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 225, 77, 0.28) 0%, rgba(255, 225, 77, 0) 68%);
  }
  .hero__text { position: absolute; left: 0; top: calc(150 * var(--u)); width: calc(640 * var(--u)); z-index: 5; }
  .bubble { max-width: calc(540 * var(--u)); padding: calc(18 * var(--u)) calc(24 * var(--u)); border-radius: calc(26 * var(--u)); filter: drop-shadow(0 calc(18 * var(--u)) calc(20 * var(--u)) rgba(20, 24, 120, 0.28)); font-size: calc(24 * var(--u)); }
  .bubble::after { left: calc(20 * var(--u)); width: calc(30 * var(--u)); height: calc(22 * var(--u)); }
  .hero h1 { margin-top: calc(34 * var(--u)); font-size: calc(62 * var(--u)); line-height: 1.06; letter-spacing: calc(-1.2 * var(--u)); }
  .hero__sub { margin-top: calc(22 * var(--u)); max-width: calc(560 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.55; }
  .hero .stores { margin-top: calc(34 * var(--u)); }
  .rating--hero { margin-top: calc(30 * var(--u)); gap: calc(10 * var(--u)); }
  .rating--hero .laurel { height: calc(50 * var(--u)); }
  .rating--hero .rating__value { font-size: calc(36 * var(--u)); }
  .rating--hero .rating__col { gap: calc(2 * var(--u)); }
  .rating--hero .stars { gap: calc(2 * var(--u)); }
  .rating--hero .st { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .rating--hero .rating__count { font-size: calc(14 * var(--u)); }
  .wc-hero { left: calc(680 * var(--u)); top: calc(410 * var(--u)); width: calc(300 * var(--u)); transform: rotate(-4deg); z-index: 4; }
  .wc-hero img { height: calc(174 * var(--u)); }
  .hero__arrow { position: absolute; left: calc(500 * var(--u)); top: calc(150 * var(--u)); width: calc(300 * var(--u)); height: calc(300 * var(--u)); z-index: 6; overflow: visible; }

  /* section heads */
  .sec-head { position: absolute; left: 0; right: 0; top: calc(80 * var(--u)); }
  .sec-head h2 { font-size: calc(52 * var(--u)); line-height: 1.2; letter-spacing: calc(-1 * var(--u)); }
  .sec-head p { margin-top: calc(14 * var(--u)); font-size: calc(20 * var(--u)); }

  /* anatomy */
  .anat { height: calc(1000 * var(--u)); }
  .anat__lines { position: absolute; left: 0; top: 0; width: calc(1200 * var(--u)); height: calc(1000 * var(--u)); z-index: 3; overflow: visible; }
  .feat { position: absolute; width: calc(310 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); z-index: 4; }
  .feat__ico { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(16 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(17, 19, 24, 0.08); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) color-mix(in srgb, var(--fg) 26%, transparent); }
  .feat__ico svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .feat__ico b { font-size: calc(17 * var(--u)); }
  .feat__ico b.serif { font-size: calc(18 * var(--u)); }
  .feat__txt { gap: calc(3 * var(--u)); }
  .feat__txt b { font-size: calc(20 * var(--u)); }
  .feat__txt span { font-size: calc(16 * var(--u)); line-height: 1.35; }
  .f-lvl, .f-pos, .f-img { left: 0; flex-direction: row-reverse; text-align: right; }
  .f-lvl .feat__txt, .f-pos .feat__txt, .f-img .feat__txt { align-items: flex-end; }
  .f-ipa, .f-aud, .f-ex { left: calc(890 * var(--u)); }
  .f-lvl, .f-ipa { top: calc(260 * var(--u)); }
  .f-pos, .f-aud { top: calc(430 * var(--u)); }
  .f-img { top: calc(590 * var(--u)); }
  .f-ex { top: calc(670 * var(--u)); }

  /* why */
  .why { height: calc(760 * var(--u)); }
  .why__steps { position: absolute; left: 0; top: calc(220 * var(--u)); width: calc(1200 * var(--u)); display: flex; gap: calc(60 * var(--u)); }
  .step { width: calc(360 * var(--u)); height: calc(370 * var(--u)); padding: calc(30 * var(--u)) calc(28 * var(--u)); border-radius: calc(30 * var(--u)); }
  .step__n { height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(15 * var(--u)); font-size: calc(15 * var(--u)); }
  .step h3 { margin-top: calc(18 * var(--u)); font-size: calc(26 * var(--u)); }
  .step p { margin-top: calc(8 * var(--u)); font-size: calc(17 * var(--u)); }
  .step__vis { margin-top: auto; }
  .src-tags { gap: calc(6 * var(--u)); }
  .src-tag { height: calc(32 * var(--u)); padding: 0 calc(11 * var(--u)) 0 calc(9 * var(--u)); border-radius: calc(16 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(14 * var(--u)); }
  .src-tag svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
  .xchips { gap: calc(8 * var(--u)); }
  .xchip { height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(18 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(17, 19, 24, 0.06); }
  .xrows { gap: calc(8 * var(--u)); }
  .xrow { height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(12 * var(--u)); gap: calc(10 * var(--u)); font-size: calc(17 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(17, 19, 24, 0.06); }
  .why__arrow { top: calc(163 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(22 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 19, 24, 0.12); }
  .why__arrow svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .why__arrow--1 { left: calc(368 * var(--u)); }
  .why__arrow--2 { left: calc(788 * var(--u)); }
  .why__res { position: absolute; left: 0; right: 0; top: calc(640 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.3; letter-spacing: calc(-0.5 * var(--u)); }
  .why__res .mark { font-size: calc(60 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); padding: 0 calc(6 * var(--u)); }

  /* exercises */
  .ex { height: calc(960 * var(--u)); }
  .ex__list { position: absolute; left: 0; top: calc(220 * var(--u)); display: flex; gap: calc(20 * var(--u)); }
  .ex__item { width: calc(285 * var(--u)); }
  .ex__item .phone { position: relative; }
  .ex__item figcaption { margin-top: calc(30 * var(--u)); padding-left: calc(6 * var(--u)); gap: calc(12 * var(--u)); }
  .ex__item .dot { margin-top: calc(4 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .ex__cap { gap: calc(4 * var(--u)); }
  .ex__cap b { font-size: calc(21 * var(--u)); }
  .ex__cap span { font-size: calc(16 * var(--u)); }

  /* spaced repetition */
  .srs { height: calc(680 * var(--u)); }
  .srs__text { position: absolute; left: 0; top: calc(130 * var(--u)); width: calc(500 * var(--u)); gap: calc(20 * var(--u)); }
  .srs__text h2 { font-size: calc(48 * var(--u)); line-height: 1.12; letter-spacing: calc(-1 * var(--u)); }
  .srs__text p { font-size: calc(20 * var(--u)); line-height: 1.55; }
  .checks { margin-top: calc(10 * var(--u)); gap: calc(14 * var(--u)); }
  .checks li { gap: calc(14 * var(--u)); font-size: calc(19 * var(--u)); }
  .ok { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .ok svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .srs__card { position: absolute; left: calc(580 * var(--u)); top: calc(70 * var(--u)); width: calc(620 * var(--u)); height: calc(540 * var(--u)); padding: calc(40 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); border-radius: calc(34 * var(--u)); box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(63, 76, 245, 0.14); }
  .curve { width: calc(560 * var(--u)); height: calc(398 * var(--u)); }
  .legend { margin-top: calc(18 * var(--u)); gap: calc(26 * var(--u)); font-size: calc(17 * var(--u)); }
  .legend span { gap: calc(8 * var(--u)); }
  .lg-with i { width: calc(26 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); }
  .lg-without i { width: calc(26 * var(--u)); border-top-width: calc(3 * var(--u)); }

  /* test */
  .test { height: calc(820 * var(--u)); }
  .test__head { position: absolute; left: 0; top: calc(90 * var(--u)); width: calc(520 * var(--u)); }
  .test__head h2 { font-size: calc(46 * var(--u)); line-height: 1.1; letter-spacing: calc(-1 * var(--u)); }
  .test__head p { margin-top: calc(14 * var(--u)); font-size: calc(20 * var(--u)); }
  .tsteps { position: absolute; left: 0; top: calc(330 * var(--u)); width: calc(560 * var(--u)); gap: calc(22 * var(--u)); }
  .tsteps li { gap: calc(16 * var(--u)); }
  .tsteps__n { width: calc(36 * var(--u)); height: calc(36 * var(--u)); font-size: calc(17 * var(--u)); }
  .tsteps__body { gap: calc(4 * var(--u)); padding-top: calc(4 * var(--u)); }
  .tsteps__body > b { font-size: calc(20 * var(--u)); }
  .tsteps__body > span { font-size: calc(16 * var(--u)); line-height: 1.4; }
  .lvls { margin-top: calc(8 * var(--u)); gap: calc(6 * var(--u)); }
  .lvls .lvl--all { padding: 0 calc(9 * var(--u)); }
  .rules { margin-top: calc(10 * var(--u)); gap: calc(8 * var(--u)); }
  .rule { height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(17 * var(--u)); gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); }
  .test__chip { left: calc(1140 * var(--u)); top: calc(430 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); border-radius: calc(26 * var(--u)); font-size: calc(19 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(34, 179, 94, 0.35); }

  /* progress */
  .prog { height: calc(860 * var(--u)); }
  .prog__head { position: absolute; left: calc(580 * var(--u)); top: calc(120 * var(--u)); width: calc(560 * var(--u)); gap: calc(18 * var(--u)); }
  .prog__head h2 { font-size: calc(52 * var(--u)); line-height: 1.15; letter-spacing: calc(-1 * var(--u)); }
  .prog__head p { font-size: calc(20 * var(--u)); line-height: 1.55; }
  .pos { left: calc(580 * var(--u)); top: calc(360 * var(--u)); width: calc(460 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)); border-radius: calc(28 * var(--u)); gap: calc(16 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(150, 90, 0, 0.14); }
  .pos h3 { font-size: calc(22 * var(--u)); }
  .pos__row { gap: calc(7 * var(--u)); }
  .pos__lbl { font-size: calc(16 * var(--u)); }
  .bar { height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); }
  .streak-chip { left: calc(940 * var(--u)); top: calc(640 * var(--u)); height: calc(64 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(32 * var(--u)); gap: calc(12 * var(--u)); font-size: calc(19 * var(--u)); box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(150, 90, 0, 0.18); transform: rotate(4deg); }
  .streak-chip__ico { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  .streak-chip__ico svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

  /* dark */
  .dark { height: calc(820 * var(--u)); }
  .moon { left: calc(-10 * var(--u)); top: calc(110 * var(--u)); width: calc(130 * var(--u)); height: calc(130 * var(--u)); }
  .dark__head { position: absolute; left: 0; top: calc(270 * var(--u)); width: calc(520 * var(--u)); gap: calc(18 * var(--u)); }
  .dark__head h2 { font-size: calc(56 * var(--u)); line-height: 1.08; letter-spacing: calc(-1 * var(--u)); }
  .dark__head p { font-size: calc(21 * var(--u)); line-height: 1.5; }

  /* reviews: cards take the height of the longest review; arrows sit at the sides,
     and the track's padding leaves room for the card shadows */
  .reviews .wrap { padding: calc(50 * var(--u)) 0 calc(56 * var(--u)); }
  .rating--big { justify-content: center; gap: calc(12 * var(--u)); }
  .rating--big .laurel { height: calc(150 * var(--u)); }
  .rating--big .rating__col { gap: calc(8 * var(--u)); }
  .rating--big .rating__value { font-size: calc(80 * var(--u)); }
  .rating--big .stars { gap: calc(3 * var(--u)); }
  .rating--big .st { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .rating--big .rating__count { font-size: calc(17 * var(--u)); }
  .carousel { margin-top: calc(20 * var(--u)); display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) calc(48 * var(--u)); align-items: center; }
  .rv-track { grid-column: 2; grid-row: 1; padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(44 * var(--u)); gap: calc(24 * var(--u)); scroll-padding: 0 calc(24 * var(--u)); }
  /* fade the side padding so a neighbouring card's shadow never ends in a hard line */
  .rv-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(24 * var(--u)), #000 calc(100% - 24 * var(--u)), transparent); mask-image: linear-gradient(90deg, transparent, #000 calc(24 * var(--u)), #000 calc(100% - 24 * var(--u)), transparent); }
  .rv { width: calc(336 * var(--u)); padding: calc(28 * var(--u)); border-radius: calc(26 * var(--u)); gap: calc(10 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(17, 19, 24, 0.06); }
  .rv__title { font-size: calc(21 * var(--u)); }
  .rv__text { font-size: calc(16 * var(--u)); -webkit-line-clamp: 10; }
  .rv__author { font-size: calc(15 * var(--u)); }
  .rv-nav { grid-column: 1 / -1; grid-row: 2; }
  .rv-btn { grid-row: 1; position: relative; top: calc(-12 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(24 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(17, 19, 24, 0.10); }
  .rv-btn--prev { grid-column: 1; }
  .rv-btn--next { grid-column: 3; }
  .rv-btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .rv-dots { gap: calc(8 * var(--u)); }
  .rv-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); }
  .rv-dot[aria-current="true"] { width: calc(26 * var(--u)); }
  .carousel.is-static .rv-track { justify-content: center; }

  /* final CTA */
  .cta { height: calc(600 * var(--u)); }
  .cta__decor { left: 50%; width: calc(1440 * var(--u)); height: calc(600 * var(--u)); margin-left: calc(-720 * var(--u)); }
  .cta__in { position: absolute; left: calc(280 * var(--u)); top: calc(216 * var(--u)); width: calc(640 * var(--u)); z-index: 4; }
  .cta__in h2 { font-size: calc(56 * var(--u)); line-height: 1.08; letter-spacing: calc(-1 * var(--u)); }
  .cta__in p { margin-top: calc(18 * var(--u)); font-size: calc(20 * var(--u)); }
  .cta .stores { margin-top: calc(34 * var(--u)); justify-content: center; }
  .cta-award { left: calc(50 * var(--u)); top: calc(40 * var(--u)); width: calc(190 * var(--u)); transform: rotate(-6deg); z-index: 2; }
  .cta-award img { height: calc(105 * var(--u)); }
  .cta-root { left: calc(46 * var(--u)); top: calc(420 * var(--u)); width: calc(160 * var(--u)); transform: rotate(-4deg); z-index: 2; }
  .cta-root img { height: calc(87 * var(--u)); }
  .cta-race { left: calc(1250 * var(--u)); top: calc(36 * var(--u)); width: calc(170 * var(--u)); transform: rotate(6deg); z-index: 2; }
  .cta-race img { height: calc(93 * var(--u)); }
  .fl-tr { left: calc(262 * var(--u)); top: calc(104 * var(--u)); transform: rotate(-3deg) scale(0.8); }
  .fl-prog { left: calc(40 * var(--u)); top: calc(300 * var(--u)); transform: rotate(3deg) scale(0.8); }
  .fl-laurel { left: calc(270 * var(--u)); top: calc(392 * var(--u)); transform: rotate(3deg) scale(0.78); }
  .fl-grid { left: calc(470 * var(--u)); top: calc(40 * var(--u)); transform: rotate(-5deg) scale(0.72); }
  .fl-peek { left: calc(800 * var(--u)); top: calc(56 * var(--u)); transform: rotate(3deg) scale(0.74); }
  .fl-mic { left: calc(1086 * var(--u)); top: calc(36 * var(--u)); transform: scale(0.72); }
  .fl-timer { left: calc(1066 * var(--u)); top: calc(262 * var(--u)); transform: rotate(4deg) scale(0.8); }
  .fl-ipa { left: calc(1170 * var(--u)); top: calc(392 * var(--u)); transform: rotate(-4deg) scale(0.76); }
  .fl-streak { left: calc(1120 * var(--u)); top: calc(512 * var(--u)); transform: rotate(-3deg) scale(0.82); }

  /* footer */
  .foot__in { height: calc(80 * var(--u)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(30 * var(--u)); font-size: calc(16 * var(--u)); }
  .foot__copy { justify-self: start; }
  .foot__links { gap: calc(32 * var(--u)); }
  .foot__made { justify-self: end; }
  .foot__made svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .foot__brand img { height: calc(24 * var(--u)); margin-top: calc(-3 * var(--u)); }

  /* phones */
  .ph-hero { left: calc(810 * var(--u)); top: calc(108 * var(--u)); width: calc(371 * var(--u)); height: calc(780 * var(--u)); border-radius: calc(55 * var(--u)); transform: rotate(4deg); z-index: 2; box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(17, 19, 24, 0.28), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-hero img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(351 * var(--u)); height: calc(760 * var(--u)); border-radius: calc(45 * var(--u)); }
  .ph-hero::after { top: calc(18 * var(--u)); width: calc(94 * var(--u)); height: calc(27 * var(--u)); margin-left: calc(-47 * var(--u)); }
  .ph-anat { left: calc(415 * var(--u)); top: calc(200 * var(--u)); width: calc(371 * var(--u)); height: calc(780 * var(--u)); border-radius: calc(55 * var(--u)); transform: rotate(0deg); z-index: 2; box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(150, 90, 0, 0.32), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-anat img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(351 * var(--u)); height: calc(760 * var(--u)); border-radius: calc(45 * var(--u)); }
  .ph-anat::after { top: calc(18 * var(--u)); width: calc(94 * var(--u)); height: calc(27 * var(--u)); margin-left: calc(-47 * var(--u)); }
  .ph-ex { width: calc(285 * var(--u)); height: calc(594 * var(--u)); border-radius: calc(44 * var(--u)); transform: rotate(0deg); z-index: 2; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(17, 19, 24, 0.20), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-ex img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(265 * var(--u)); height: calc(574 * var(--u)); border-radius: calc(34 * var(--u)); }
  .ph-ex::after { top: calc(14 * var(--u)); width: calc(71 * var(--u)); height: calc(20 * var(--u)); margin-left: calc(-35 * var(--u)); }
  .ph-thome { left: calc(610 * var(--u)); top: calc(70 * var(--u)); width: calc(324 * var(--u)); height: calc(678 * var(--u)); border-radius: calc(49 * var(--u)); transform: rotate(-4deg); z-index: 3; box-shadow: 0 calc(34 * var(--u)) calc(70 * var(--u)) rgba(17, 19, 24, 0.24), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-thome img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(304 * var(--u)); height: calc(658 * var(--u)); border-radius: calc(39 * var(--u)); }
  .ph-thome::after { top: calc(16 * var(--u)); width: calc(81 * var(--u)); height: calc(23 * var(--u)); margin-left: calc(-40 * var(--u)); }
  .ph-trun { left: calc(920 * var(--u)); top: calc(110 * var(--u)); width: calc(324 * var(--u)); height: calc(678 * var(--u)); border-radius: calc(49 * var(--u)); transform: rotate(4deg); z-index: 2; box-shadow: 0 calc(34 * var(--u)) calc(70 * var(--u)) rgba(17, 19, 24, 0.24), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-trun img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(304 * var(--u)); height: calc(658 * var(--u)); border-radius: calc(39 * var(--u)); }
  .ph-trun::after { top: calc(16 * var(--u)); width: calc(81 * var(--u)); height: calc(23 * var(--u)); margin-left: calc(-40 * var(--u)); }
  .ph-stats { left: calc(100 * var(--u)); top: calc(76 * var(--u)); width: calc(340 * var(--u)); height: calc(712 * var(--u)); border-radius: calc(51 * var(--u)); transform: rotate(-3deg); z-index: 2; box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(150, 90, 0, 0.32), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-stats img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(320 * var(--u)); height: calc(692 * var(--u)); border-radius: calc(41 * var(--u)); }
  .ph-stats::after { top: calc(16 * var(--u)); width: calc(86 * var(--u)); height: calc(25 * var(--u)); margin-left: calc(-43 * var(--u)); }
  .ph-dcard { left: calc(600 * var(--u)); top: calc(80 * var(--u)); width: calc(316 * var(--u)); height: calc(661 * var(--u)); border-radius: calc(48 * var(--u)); transform: rotate(-4deg); z-index: 3; box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-dcard img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(296 * var(--u)); height: calc(641 * var(--u)); border-radius: calc(38 * var(--u)); }
  .ph-dcard::after { top: calc(15 * var(--u)); width: calc(79 * var(--u)); height: calc(23 * var(--u)); margin-left: calc(-39 * var(--u)); }
  .ph-dstats { left: calc(890 * var(--u)); top: calc(130 * var(--u)); width: calc(316 * var(--u)); height: calc(661 * var(--u)); border-radius: calc(48 * var(--u)); transform: rotate(4deg); z-index: 2; box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-dstats img { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(296 * var(--u)); height: calc(641 * var(--u)); border-radius: calc(38 * var(--u)); }
  .ph-dstats::after { top: calc(15 * var(--u)); width: calc(79 * var(--u)); height: calc(23 * var(--u)); margin-left: calc(-39 * var(--u)); }
}

/* ==========================================================================
   Mobile — calc(390 * var(--u)) mockup
   ========================================================================== */
@media (max-width: 1023.98px) {
  .wrap { width: calc(390 * var(--u)); }
  .hero__glow, .hero__arrow, .anat__lines, .why__arrow, .rv-nav, .rv-btn,
  .fl-grid, .fl-peek, .fl-mic, .cta-race, .wc-hero .ipa { display: none; }

  /* header */
  .top { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(16 * var(--u)); height: calc(64 * var(--u)); }
  .logo img { width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(13.5 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(10, 14, 90, 0.32); }
  .lang { padding: calc(3 * var(--u)); border-radius: calc(12 * var(--u)); gap: calc(2 * var(--u)); }
  .lang a { height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(13 * var(--u)); }

  /* store badges */
  .stores { gap: calc(10 * var(--u)); }
  .store { height: calc(50 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); gap: calc(8 * var(--u)); }
  .store__txt small { font-size: calc(10 * var(--u)); }
  .store__txt b { font-size: calc(17 * var(--u)); }
  .store svg.apple { width: calc(22 * var(--u)); height: calc(26 * var(--u)); }
  .store svg.gplay { width: calc(24 * var(--u)); height: calc(26 * var(--u)); }

  /* hero */
  .hero { height: calc(1190 * var(--u)); }
  .hero .wrap { padding: 0 calc(20 * var(--u)); }
  .hero__text { position: relative; padding-top: calc(100 * var(--u)); z-index: 5; }
  .bubble { max-width: calc(330 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); border-radius: calc(22 * var(--u)); filter: drop-shadow(0 calc(14 * var(--u)) calc(15 * var(--u)) rgba(20, 24, 120, 0.28)); font-size: calc(18 * var(--u)); line-height: 1.35; }
  .bubble::after { left: calc(16 * var(--u)); width: calc(24 * var(--u)); height: calc(18 * var(--u)); }
  .hero h1 { margin-top: calc(24 * var(--u)); font-size: calc(34 * var(--u)); line-height: 1.08; letter-spacing: calc(-0.8 * var(--u)); }
  .hero__sub { margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; }
  .hero .stores { margin-top: calc(22 * var(--u)); }
  .rating--hero { margin-top: calc(20 * var(--u)); gap: calc(8 * var(--u)); }
  .rating--hero .laurel { height: calc(40 * var(--u)); }
  .rating--hero .rating__value { font-size: calc(28 * var(--u)); }
  .rating--hero .rating__col { gap: calc(2 * var(--u)); }
  .rating--hero .stars { gap: calc(1 * var(--u)); }
  .rating--hero .st { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .rating--hero .rating__count { font-size: calc(12 * var(--u)); }
  .hero__visual { position: relative; margin-top: calc(26 * var(--u)); display: flex; justify-content: center; padding-left: calc(54 * var(--u)); }
  .hero__visual .phone { position: relative; flex-shrink: 0; }
  .wc-hero { left: calc(-8 * var(--u)); top: calc(236 * var(--u)); width: calc(148 * var(--u)); transform: rotate(-4deg); z-index: 4; }
  .wc-hero img { height: calc(79 * var(--u)); }

  /* section heads */
  .sec-head { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(56 * var(--u)); }
  .sec-head h2, .test__head h2, .prog__head h2, .dark__head h2, .srs__text h2 { font-size: calc(30 * var(--u)); line-height: 1.1; letter-spacing: calc(-0.5 * var(--u)); }
  .sec-head p, .test__head p, .prog__head p, .dark__head p, .srs__text p { font-size: calc(16 * var(--u)); line-height: 1.5; }
  .sec-head p, .test__head p { margin-top: calc(10 * var(--u)); }

  /* anatomy */
  .anat { height: calc(1080 * var(--u)); }
  .feats { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(730 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
  .feat { display: flex; align-items: center; gap: calc(14 * var(--u)); }
  .feat__ico { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(13 * var(--u)); }
  .feat__ico svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .feat__ico b { font-size: calc(14 * var(--u)); }
  .feat__ico b.serif { font-size: calc(15 * var(--u)); }
  .feat__txt { gap: calc(1 * var(--u)); }
  .feat__txt b { font-size: calc(16 * var(--u)); }
  .feat__txt span { font-size: calc(14 * var(--u)); }

  /* why */
  .why .wrap { padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(72 * var(--u)); }
  .why .sec-head { position: static; }
  .why__steps { margin-top: calc(44 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
  .step { padding: calc(20 * var(--u)); border-radius: calc(24 * var(--u)); }
  .step__n { height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)); border-radius: calc(13 * var(--u)); font-size: calc(13 * var(--u)); }
  .step h3 { margin-top: calc(10 * var(--u)); font-size: calc(19 * var(--u)); }
  .step p { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); }
  .step__vis { margin-top: calc(12 * var(--u)); }
  .src-tags { gap: calc(6 * var(--u)); }
  .src-tag { height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(15 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
  .src-tag svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .xchips { gap: calc(6 * var(--u)); }
  .xchip { height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(16 * var(--u)); }
  .xrows { gap: calc(6 * var(--u)); }
  .xrow { height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); }
  .why__res { margin-top: calc(26 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.35; }
  .why__res .mark { font-size: calc(42 * var(--u)); letter-spacing: calc(-1 * var(--u)); padding: 0 calc(4 * var(--u)); }

  /* exercises */
  .ex { height: calc(830 * var(--u)); }
  .ex__list {
    position: absolute; left: 0; right: 0; top: calc(206 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
    display: flex; gap: calc(14 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(20 * var(--u));
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ex__list::-webkit-scrollbar { display: none; }
  .ex__list::after { content: ""; flex: 0 0 calc(6 * var(--u)); }
  .ex__item { flex-shrink: 0; width: calc(248 * var(--u)); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; }
  .ex__item .phone { position: relative; }
  .ex__item figcaption { margin-top: calc(16 * var(--u)); width: calc(238 * var(--u)); gap: calc(10 * var(--u)); }
  .ex__item .dot { margin-top: calc(5 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
  .ex__cap { gap: calc(2 * var(--u)); }
  .ex__cap b { font-size: calc(17 * var(--u)); }
  .ex__cap span { font-size: calc(14 * var(--u)); }

  /* spaced repetition */
  .srs .wrap { padding: calc(56 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)); }
  .srs__text { gap: calc(14 * var(--u)); }
  .checks { margin-top: calc(4 * var(--u)); gap: calc(10 * var(--u)); }
  .checks li { gap: calc(12 * var(--u)); font-size: calc(16 * var(--u)); }
  .ok { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .ok svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .srs__card { margin-top: calc(64 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(26 * var(--u)); box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(63, 76, 245, 0.14); }
  .curve { width: calc(314 * var(--u)); height: calc(223 * var(--u)); }
  .legend { margin-top: calc(12 * var(--u)); gap: calc(18 * var(--u)); font-size: calc(14 * var(--u)); }
  .legend span { gap: calc(6 * var(--u)); }
  .lg-with i { width: calc(20 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); }
  .lg-without i { width: calc(20 * var(--u)); border-top-width: calc(3 * var(--u)); }

  /* test */
  .test { height: calc(1100 * var(--u)); }
  .test__head { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(56 * var(--u)); }
  .test__chip { left: calc(286 * var(--u)); top: calc(470 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(20 * var(--u)); font-size: calc(16 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(34, 179, 94, 0.35); }
  .tsteps { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(666 * var(--u)); gap: calc(18 * var(--u)); }
  .tsteps li { gap: calc(14 * var(--u)); }
  .tsteps__n { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); }
  .tsteps__body { gap: calc(3 * var(--u)); padding-top: calc(3 * var(--u)); }
  .tsteps__body > b { font-size: calc(17 * var(--u)); }
  .tsteps__body > span { font-size: calc(14 * var(--u)); line-height: 1.4; }
  .lvls { margin-top: calc(8 * var(--u)); gap: calc(5 * var(--u)); }
  .lvls .lvl { font-size: calc(12 * var(--u)); }
  .lvls .lvl--all { height: calc(22 * var(--u)); border-radius: calc(7 * var(--u)); }
  .rules { margin-top: calc(8 * var(--u)); gap: calc(6 * var(--u)); }
  .rule { height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(15 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }

  /* progress */
  .prog { height: calc(960 * var(--u)); }
  .prog__head { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(56 * var(--u)); gap: calc(10 * var(--u)); }
  .pos { left: calc(120 * var(--u)); top: calc(600 * var(--u)); width: calc(250 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border-radius: calc(22 * var(--u)); gap: calc(12 * var(--u)); box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(150, 90, 0, 0.16); z-index: 3; }
  .pos h3 { font-size: calc(18 * var(--u)); }
  .pos__row { gap: calc(6 * var(--u)); }
  .pos__lbl { font-size: calc(14 * var(--u)); }
  .bar { height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); }
  .streak-chip { left: calc(24 * var(--u)); top: calc(866 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(26 * var(--u)); gap: calc(10 * var(--u)); font-size: calc(16 * var(--u)); box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(150, 90, 0, 0.18); transform: rotate(-3deg); }
  .streak-chip__ico { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .streak-chip__ico svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

  /* dark */
  .dark { height: calc(720 * var(--u)); }
  .moon { right: calc(18 * var(--u)); top: calc(40 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
  .dark__head { position: absolute; left: calc(20 * var(--u)); top: calc(70 * var(--u)); width: calc(270 * var(--u)); gap: calc(10 * var(--u)); }

  /* reviews */
  .reviews .wrap { padding: calc(40 * var(--u)) 0 calc(36 * var(--u)); }
  .rating--big { justify-content: center; gap: calc(8 * var(--u)); }
  .rating--big .laurel { height: calc(96 * var(--u)); }
  .rating--big .rating__col { gap: calc(6 * var(--u)); }
  .rating--big .rating__value { font-size: calc(52 * var(--u)); }
  .rating--big .stars { gap: calc(2 * var(--u)); }
  .rating--big .st { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .rating--big .rating__count { font-size: calc(13 * var(--u)); }
  .rv-track { margin-top: calc(30 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u)); gap: calc(12 * var(--u)); scroll-padding-left: calc(20 * var(--u)); }
  .rv-track::after { content: ""; flex: 0 0 calc(8 * var(--u)); }
  .rv { width: calc(300 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(24 * var(--u)); gap: calc(8 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(17, 19, 24, 0.07); }
  .rv__title { font-size: calc(19 * var(--u)); }
  .rv__text { font-size: calc(15 * var(--u)); -webkit-line-clamp: 12; }
  .rv__author { font-size: calc(14 * var(--u)); }

  /* final CTA */
  .cta { height: calc(700 * var(--u)); }
  .cta__decor { left: 0; right: 0; width: calc(390 * var(--u)); height: calc(700 * var(--u)); margin: 0 auto; }
  .cta__in { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(478 * var(--u)); z-index: 4; }
  .cta__in h2 { font-size: calc(32 * var(--u)); line-height: 1.1; letter-spacing: calc(-0.5 * var(--u)); }
  .cta__in p { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); }
  .cta .stores { margin-top: calc(22 * var(--u)); justify-content: center; }
  .cta-award { left: calc(14 * var(--u)); top: calc(24 * var(--u)); width: calc(150 * var(--u)); transform: rotate(-6deg); z-index: 2; }
  .cta-award img { height: calc(81 * var(--u)); }
  .cta-root { left: calc(22 * var(--u)); top: calc(296 * var(--u)); width: calc(132 * var(--u)); transform: rotate(-4deg); z-index: 2; }
  .cta-root img { height: calc(69 * var(--u)); }
  .fl-tr { left: calc(186 * var(--u)); top: calc(30 * var(--u)); transform: rotate(-3deg) scale(0.62); }
  .fl-timer { left: calc(196 * var(--u)); top: calc(92 * var(--u)); transform: rotate(4deg) scale(0.62); }
  .fl-prog { left: calc(20 * var(--u)); top: calc(206 * var(--u)); transform: rotate(3deg) scale(0.62); }
  .fl-laurel { left: calc(272 * var(--u)); top: calc(190 * var(--u)); transform: rotate(3deg) scale(0.5); }
  .fl-ipa { left: calc(180 * var(--u)); top: calc(306 * var(--u)); transform: rotate(-4deg) scale(0.5); }
  .fl-streak { left: calc(180 * var(--u)); top: calc(392 * var(--u)); transform: rotate(-3deg) scale(0.6); }

  /* footer */
  .foot__in { min-height: calc(150 * var(--u)); padding: calc(26 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
  .foot__links { order: 1; gap: calc(28 * var(--u)); }
  .foot__made { order: 2; font-size: calc(14 * var(--u)); }
  .foot__made svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .foot__brand img { height: calc(22 * var(--u)); margin-top: calc(-3 * var(--u)); }
  .foot__copy { order: 3; font-size: calc(13 * var(--u)); color: #8A8FA0; }

  /* phones */
  .ph-hero { width: calc(260 * var(--u)); height: calc(541 * var(--u)); border-radius: calc(40 * var(--u)); transform: rotate(3deg); z-index: 2; box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(17, 19, 24, 0.26), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-hero img { left: calc(9 * var(--u)); top: calc(9 * var(--u)); width: calc(242 * var(--u)); height: calc(523 * var(--u)); border-radius: calc(31 * var(--u)); }
  .ph-hero::after { top: calc(11 * var(--u)); width: calc(65 * var(--u)); height: calc(19 * var(--u)); margin-left: calc(-32 * var(--u)); }
  .ph-anat { left: calc(76 * var(--u)); top: calc(206 * var(--u)); width: calc(234 * var(--u)); height: calc(489 * var(--u)); border-radius: calc(36 * var(--u)); transform: rotate(0deg); z-index: 2; box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(150, 90, 0, 0.30), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-anat img { left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(218 * var(--u)); height: calc(473 * var(--u)); border-radius: calc(28 * var(--u)); }
  .ph-anat::after { top: calc(9 * var(--u)); width: calc(58 * var(--u)); height: calc(17 * var(--u)); margin-left: calc(-29 * var(--u)); }
  .ph-ex { width: calc(234 * var(--u)); height: calc(489 * var(--u)); border-radius: calc(36 * var(--u)); transform: rotate(0deg); z-index: 2; box-shadow: 0 calc(18 * var(--u)) calc(36 * var(--u)) rgba(17, 19, 24, 0.18), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-ex img { left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(218 * var(--u)); height: calc(473 * var(--u)); border-radius: calc(28 * var(--u)); }
  .ph-ex::after { top: calc(9 * var(--u)); width: calc(58 * var(--u)); height: calc(17 * var(--u)); margin-left: calc(-29 * var(--u)); }
  .ph-thome { left: calc(20 * var(--u)); top: calc(214 * var(--u)); width: calc(184 * var(--u)); height: calc(383 * var(--u)); border-radius: calc(28 * var(--u)); transform: rotate(-4deg); z-index: 3; box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(17, 19, 24, 0.26), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-thome img { left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(172 * var(--u)); height: calc(371 * var(--u)); border-radius: calc(22 * var(--u)); }
  .ph-thome::after { top: calc(5 * var(--u)); width: calc(46 * var(--u)); height: calc(13 * var(--u)); margin-left: calc(-23 * var(--u)); }
  .ph-trun { left: calc(178 * var(--u)); top: calc(236 * var(--u)); width: calc(184 * var(--u)); height: calc(383 * var(--u)); border-radius: calc(28 * var(--u)); transform: rotate(4deg); z-index: 2; box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(17, 19, 24, 0.26), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-trun img { left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(172 * var(--u)); height: calc(371 * var(--u)); border-radius: calc(22 * var(--u)); }
  .ph-trun::after { top: calc(5 * var(--u)); width: calc(46 * var(--u)); height: calc(13 * var(--u)); margin-left: calc(-23 * var(--u)); }
  .ph-stats { left: calc(24 * var(--u)); top: calc(210 * var(--u)); width: calc(234 * var(--u)); height: calc(489 * var(--u)); border-radius: calc(36 * var(--u)); transform: rotate(-3deg); z-index: 2; box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(150, 90, 0, 0.30), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-stats img { left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(218 * var(--u)); height: calc(473 * var(--u)); border-radius: calc(28 * var(--u)); }
  .ph-stats::after { top: calc(9 * var(--u)); width: calc(58 * var(--u)); height: calc(17 * var(--u)); margin-left: calc(-29 * var(--u)); }
  .ph-dcard { left: calc(22 * var(--u)); top: calc(236 * var(--u)); width: calc(193 * var(--u)); height: calc(402 * var(--u)); border-radius: calc(30 * var(--u)); transform: rotate(-4deg); z-index: 3; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-dcard img { left: calc(7 * var(--u)); top: calc(7 * var(--u)); width: calc(179 * var(--u)); height: calc(388 * var(--u)); border-radius: calc(23 * var(--u)); }
  .ph-dcard::after { top: calc(6 * var(--u)); width: calc(48 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(-24 * var(--u)); }
  .ph-dstats { left: calc(172 * var(--u)); top: calc(268 * var(--u)); width: calc(193 * var(--u)); height: calc(402 * var(--u)); border-radius: calc(30 * var(--u)); transform: rotate(4deg); z-index: 2; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.55), inset 0 0 0 calc(2 * var(--u)) #3A3D45; }
  .ph-dstats img { left: calc(7 * var(--u)); top: calc(7 * var(--u)); width: calc(179 * var(--u)); height: calc(388 * var(--u)); border-radius: calc(23 * var(--u)); }
  .ph-dstats::after { top: calc(6 * var(--u)); width: calc(48 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(-24 * var(--u)); }
}