/* Section styles. Desktop (1440) is the base; mobile (390) lives in the
   `max-width: 767px` block at the bottom of each section's rules.
   Side gutter: whatever is left beside the 1140px content column — 150px at
   1440, growing past it on wider screens, and shrinking to a 24px floor once the
   column no longer fits. No horizontal scroll at any width. */
.section {
  --gutter: max(var(--gutter-mobile), calc((100% - var(--content-max)) / 2));
}

/* ===== NAV ===== */

#nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--dark-bg);
}

.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 22px var(--gutter);
}

.nav__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: fit-content;
  flex-shrink: 0;
}

.nav__mark {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  object-fit: cover;
  flex-shrink: 0;
}

.nav__wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.nav__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 34px;
  width: fit-content;
  flex-shrink: 0;
}

.nav__link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  white-space: nowrap;
}

.nav__divider {
  width: 1px;
  height: 22px;
  border-radius: 1px;
  background-color: var(--dark-border);
  flex-shrink: 0;
}

/* Nav variant of the hero CTA: same accent pill, sized down to sit in the nav bar. */
.nav__cta {
  padding: 9px 18px;
  border-radius: 10px;
}

.nav__cta .hero__cta-label {
  font-size: 15px;
}

/* Burger is mobile-only; the panel it opens is `.nav__right` itself. */
.nav__burger {
  display: none;
  /* 26px glyph, 34x34 touch target: the negative margin keeps the icon on the
     gutter and the nav at 66px. */
  padding: 4px;
  margin: -4px;
  color: var(--dark-text-primary);
}

@media (max-width: 767px) {
  .nav {
    padding: 16px var(--gutter-mobile);
  }

  .nav__burger {
    display: block;
  }

  /* Dropdown panel: fixed so `.page { overflow: hidden }` cannot clip it and
     so it never contributes to the height of the `#nav` section. */
  .nav__right {
    position: fixed;
    z-index: 50;
    top: 66px;
    left: var(--gutter-mobile);
    right: var(--gutter-mobile);
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    width: auto;
    padding: 8px;
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    background-color: var(--dark-surface);
    box-shadow: 0 24px 48px -12px #00000066;
  }

  .nav--open .nav__right {
    display: flex;
  }

  .nav__link {
    padding: 11px 12px;
    border-radius: 10px;
  }

  .nav__divider {
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
}

/* ===== HERO ===== */

.hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 56px;
  padding: 70px var(--gutter) 90px;
  background-image: linear-gradient(180deg, var(--dark-bg-grad-top) 0%, var(--dark-bg) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 26px;
  width: 560px;
  flex-shrink: 0;
}

/* On desktop the CTA and the store line are simply two more items of
   HeroCopy's 26px stack; on mobile they become their own 12px group. */
.hero__cta-group {
  display: contents;
}

.hero__eyebrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
  margin: 0;
}

.hero__eyebrow-line {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--dark-accent);
  flex-shrink: 0;
}

.hero__eyebrow-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2px;
  color: var(--dark-accent);
  white-space: nowrap;
}

.hero__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 700;
  line-height: 63px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: left;
}

.hero__sub {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: left;
}

.hero__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
  flex-shrink: 0;
  padding: 15px 28px;
  border-radius: 14px;
  background-color: var(--dark-accent);
  color: var(--dark-on-accent);
}

.hero__cta-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
}

.hero__trust {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-muted);
  white-space: nowrap;
  text-align: left;
}

.hero__visual {
  flex: 1 1 0;
  height: 700px;
  position: relative;
}

/* PhoneMockup component (shared by Hero / Showcase / Gallery). */
.phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 7px;
  border-radius: 44px;
  background-color: var(--dark-surface-2);
  /* Same half-pixel hairline trick as `.lang`, then the mockup drop shadow
     (last in the list, so it paints behind both rings). */
  box-shadow:
    0 0 0 0.5px var(--dark-border-strong),
    inset 0 0 0 0.5px var(--dark-border-strong),
    0 30px 60px -10px #00000066;
}

.phone__screen {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  border-radius: 38px;
  object-fit: cover;
}

.hero__phone {
  position: absolute;
}

.hero__phone--back {
  left: 20px;
  top: 150px;
  width: 230px;
  height: 490px;
  z-index: 0;
}

.hero__phone--front {
  left: 210px;
  top: 45px;
  width: 290px;
  height: 616px;
  z-index: 1;
}

/* 768-1187: below 1188px the gutter is still pinned to its 24px floor
   ((100% - 1140px) / 2 reaches 24px only at 1188px), so the content column is
   `vw - 48`, not the 1140px the pixel geometry was drawn against. The fixed
   desktop layout needs a visual of at least 500px (--front: left 210 + width
   290), i.e. a column of 1116px, which only exists from 1164px up. Until the
   column is really 1140px wide, HeroVisual drops its fixed 524x700 box for a
   proportional one and both phones scale with it instead of bleeding off the
   page. Every value is the desktop geometry expressed as a percentage of
   524x700, so >=1188px is bit-identical. */
@media (min-width: 768px) and (max-width: 1187px) {
  /* The row keeps the macro's own proportions: the 1140px column is split
     560 : 56 : 524, so the two grow factors are the design widths themselves.
     At a 1140px column that yields exactly 560px and 524px, which is why the
     fluid range meets the fixed geometry at 1188px with no step. */
  .hero__copy {
    width: auto;
    min-width: 0;
    flex: 560 1 0;
  }

  .hero__visual {
    height: auto;
    aspect-ratio: 524 / 700;
    flex: 524 1 0;
    container-type: inline-size;
  }

  /* Radius and padding are part of the mockup's shape, so they scale with it
     too: 44/524, 7/524 and 38/524 of the visual's width. */
  .hero__phone {
    border-radius: 8.397cqw;
    padding: 1.336cqw;
  }

  .hero__phone .phone__screen {
    border-radius: 7.252cqw;
  }

  .hero__phone--back {
    left: 3.817%;
    top: 21.429%;
    width: 43.893%;
    height: 70%;
  }

  .hero__phone--front {
    left: 40.076%;
    top: 6.429%;
    width: 55.344%;
    height: 88%;
  }
}

@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 36px var(--gutter-mobile) 44px;
  }

  /* The desktop wrappers dissolve so every block is a direct child of the
     20px column stack — same DOM, different flow. */
  .hero__copy,
  .hero__visual {
    display: contents;
  }

  .hero__title-br {
    display: none;
  }

  .hero__title {
    font-size: 34px;
    line-height: 38px;
    text-align: center;
  }

  .hero__sub {
    font-size: 16px;
    line-height: 25px;
    text-align: center;
  }

  .hero__cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    flex-shrink: 0;
  }

  .hero__cta {
    padding: 15px 30px;
  }

  .hero__trust {
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .hero__phone--back {
    display: none;
  }

  .hero__phone--front {
    position: static;
    width: 250px;
    height: 530px;
    flex-shrink: 0;
  }
}

/* ===== SHARED: eyebrow (Pillars / Showcase) ===== */

.eyebrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
  flex-shrink: 0;
  margin: 0;
}

.eyebrow__line {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--dark-accent);
  flex-shrink: 0;
}

.eyebrow__label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2px;
  color: var(--dark-accent);
  white-space: nowrap;
}

.eyebrow--lavender .eyebrow__line {
  background-color: var(--dark-lavender);
}

.eyebrow--lavender .eyebrow__label {
  color: var(--dark-lavender);
}

/* ===== PILLARS ===== */

.pillars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 52px;
  padding: 92px var(--gutter);
  background-color: var(--dark-bg);
}

.pillars__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 720px;
  max-width: 100%;
  flex-shrink: 0;
}

.pillars__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: center;
}

.pillars__sub {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: center;
}

/* Card heights are never hard-coded: `stretch` levels the row to the tallest
   card, so RU (4-line copy) simply comes out taller than EN (3-line). */
.pillars__cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillars__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  padding: 28px;
  border-radius: 20px;
  background-color: var(--dark-surface);
  /* Pencil's `outline-offset: -0.5px` straddles the card edge (half in, half
     out). Chrome rounds a fractional outline offset to a whole pixel and would
     pull the hairline fully inside, so the two halves are drawn explicitly. */
  box-shadow:
    0 0 0 0.5px var(--dark-border),
    inset 0 0 0 0.5px var(--dark-border);
}

.pillars__card-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background-color: var(--dark-accent-soft);
  color: var(--dark-accent);
}

.pillars__card-glyph {
  width: 28px;
  height: 28px;
}

/* The macro says `line-height: normal`, i.e. 1.3 x font-size = 26px. Chrome
   rounds IBM Plex Sans' ascent/descent separately and lands on 27px at this
   size, so the 26px is spelled out to keep the card box on the reference. */
.pillars__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.pillars__card-desc {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: left;
}

@media (max-width: 767px) {
  .pillars {
    gap: 28px;
    padding: 56px var(--gutter-mobile);
  }

  .pillars__header {
    width: 100%;
    gap: 12px;
  }

  .pillars__title {
    font-size: 28px;
    line-height: 32px;
  }

  /* The mobile frame drops the sub-headline entirely. */
  .pillars__sub {
    display: none;
  }

  .pillars__cards {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .pillars__card {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ===== SHOWCASE ===== */

.showcase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 96px;
  padding: 80px var(--gutter) 92px;
  background-color: var(--dark-surface);
}

.showcase__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 88px;
  width: 100%;
  flex-shrink: 0;
}

/* Meditations sits visual-first on desktop; the DOM stays copy-first so the
   mobile stack (copy, then phone) needs no reordering. */
.showcase__row--reverse {
  flex-direction: row-reverse;
}

.showcase__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
  flex: 1 1 0;
  min-width: 0;
}

.showcase__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 41px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: left;
}

.showcase__desc {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: left;
}

/* The mobile frame shortens every paragraph; the trimmed clauses live in
   these spans so both breakpoints share one DOM. */
.showcase__wide-only {
  display: inline;
}

.showcase__bullets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: fit-content;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}

.showcase__bullet {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
  flex-shrink: 0;
}

.showcase__bullet-dot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--dark-accent-soft);
  color: var(--dark-accent);
}

.showcase__bullet-glyph {
  width: 14px;
  height: 14px;
}

/* Only the tick turns lavender — the badge keeps the accent wash. */
.showcase__row--lavender .showcase__bullet-dot {
  color: var(--dark-lavender);
}

.showcase__bullet-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.showcase__visual {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  width: 460px;
  flex-shrink: 0;
}

.showcase__phone {
  width: 296px;
  height: 628px;
}

/* 768–1187: the 1140px column no longer fits, so the fixed-width visual and
   the two `nowrap` runs give way instead of forcing a horizontal scrollbar. */
@media (min-width: 768px) and (max-width: 1187px) {
  .pillars__card-title {
    white-space: normal;
  }

  /* Linear in the content column C (= vw - 2*gutter, so 720px at a 768px
     viewport and 1140px from 1188px up). Percentages in `gap` and in the
     visual's `width` both resolve against C, so the macro's two endpoints
     interpolate directly:
       gap    40px @ C=720 -> 88px  @ C=1140  =>  48/420*C - 42.286
       visual 340px @ C=720 -> 460px @ C=1140  =>  120/420*C + 134.286
     At C=1140 both land within 0.0001px of the fixed 88px / 460px, so the
     fluid range meets the base geometry at 1188px with no step — measured
     87.875 -> 88.000 and 459.703 -> 460.000 across 1187 -> 1188. */
  .showcase__row {
    gap: calc(11.4286% - 42.286px);
  }

  .showcase__visual {
    width: calc(28.5714% + 134.286px);
  }

  .showcase__bullet-text {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .showcase {
    gap: 48px;
    padding: 56px var(--gutter-mobile);
  }

  /* The row becomes the mobile block: the copy wrapper dissolves so eyebrow,
     title, copy, bullets and the phone all share one 18px column. */
  .showcase__row,
  .showcase__row--reverse {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .showcase__copy {
    display: contents;
  }

  .showcase__title {
    font-size: 25px;
    line-height: 30px;
  }

  .showcase__desc {
    font-size: 16px;
    line-height: 26px;
  }

  .showcase__wide-only {
    display: none;
  }

  .showcase__bullets {
    gap: 10px;
    padding-top: 0;
  }

  .showcase__bullet-dot {
    width: 22px;
    height: 22px;
    border-radius: 11px;
  }

  .showcase__bullet-glyph {
    width: 13px;
    height: 13px;
  }

  .showcase__bullet-text {
    font-size: 14px;
  }

  .showcase__visual {
    width: 100%;
    padding-top: 8px;
  }

  .showcase__phone {
    width: 244px;
    height: 518px;
  }
}

/* ===== PROGRESS ===== */

/* The frame puts the mockup first and the copy second. The DOM keeps the copy
   first (that is the mobile order, and the reading order), so the desktop row
   is reversed instead of re-ordering the markup — same trick as Showcase. */
.progress {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 88px;
  padding: 92px var(--gutter);
  background-color: var(--dark-bg);
}

.progress__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
  flex: 1 1 0;
  min-width: 0;
}

.progress__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 41px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: left;
}

.progress__desc {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: left;
}

/* The mobile frame shortens the paragraph and swaps one noun; both wordings
   live in the same DOM and only one of them is ever rendered. */
.progress__wide-only {
  display: inline;
}

.progress__narrow-only {
  display: none;
}

.progress__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}

.progress__stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  flex-shrink: 0;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--dark-surface);
  /* Same half-pixel hairline as `.pillars__card`: Pencil's `outline-offset:
     -0.5px` straddles the edge, Blink would round it fully inside. */
  box-shadow:
    0 0 0 0.5px var(--dark-border),
    inset 0 0 0 0.5px var(--dark-border);
}

.progress__stat-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--dark-accent-soft);
  color: var(--dark-accent);
}

.progress__stat-glyph {
  width: 22px;
  height: 22px;
}

.progress__stat-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
  width: fit-content;
  min-width: 0;
  flex-shrink: 0;
}

.progress__stat-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.progress__stat-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  white-space: nowrap;
}

.progress__visual {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  width: 460px;
  flex-shrink: 0;
}

.progress__phone {
  width: 296px;
  height: 628px;
}

/* 768-1187: the 1140px content column no longer fits, so the fixed visual and
   the 88px gap give way before the 36px headline starts to overflow. Mirrors
   the Showcase rule for the same row-with-a-296px-mockup shape. */
@media (min-width: 768px) and (max-width: 1187px) {
  /* Linear in the content column C (= vw - 2*gutter, so 720px at a 768px
     viewport and 1140px from 1188px up). Percentages in `gap` and in the
     visual's `width` both resolve against C, so the macro's two endpoints
     interpolate directly:
       gap    40px @ C=720 -> 88px  @ C=1140  =>  48/420*C - 42.286
       visual 340px @ C=720 -> 460px @ C=1140  =>  120/420*C + 134.286
     At C=1140 both land within 0.0001px of the fixed 88px / 460px, so the
     fluid range meets the base geometry at 1188px with no step — measured
     87.875 -> 88.000 and 459.703 -> 460.000 across 1187 -> 1188. */
  .progress {
    gap: calc(11.4286% - 42.286px);
  }

  .progress__visual {
    width: calc(28.5714% + 134.286px);
  }
}

@media (max-width: 767px) {
  .progress {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 56px var(--gutter-mobile);
  }

  /* Both desktop wrappers dissolve so eyebrow, title, copy, stats and the phone
     become the five items of one 22px column — same DOM, mobile order. */
  .progress__copy,
  .progress__visual {
    display: contents;
  }

  .progress__wide-only {
    display: none;
  }

  .progress__narrow-only {
    display: inline;
  }

  /* The mobile frame goes back to `line-height: normal` (1.3 x 26px in Pencil,
     34px in Chrome) — the desktop 41px must not carry over. */
  .progress__title {
    font-size: 26px;
    line-height: normal;
    text-align: center;
  }

  .progress__desc {
    font-size: 16px;
    line-height: 25px;
    text-align: center;
  }

  .progress__stats {
    gap: 12px;
    padding-top: 4px;
  }

  .progress__stat {
    gap: 12px;
    padding: 14px;
  }

  .progress__stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .progress__stat-glyph {
    width: 20px;
    height: 20px;
  }

  .progress__stat-text {
    gap: 2px;
  }

  .progress__stat-title {
    font-size: 15px;
  }

  .progress__phone {
    width: 244px;
    height: 518px;
  }
}

/* ===== GALLERY ===== */

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 52px;
  /* This frame carries its own 80px gutter, not the page's 150px one, so its
     content column is 1280px at 1440 rather than the page's 1140px. */
  padding: 80px max(80px, calc((100% - 1280px) / 2)) 96px;
  background-color: var(--dark-surface);
}

.gallery__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 760px;
  max-width: 100%;
  flex-shrink: 0;
}

.gallery__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: center;
}

.gallery__screens {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__phone {
  width: 206px;
  height: 440px;
}

/* Five 206px mockups plus four 20px gaps plus the 80px gutters need 1270px.
   Below that the row goes fluid: width, height, bezel and both corner radii are
   the desktop geometry expressed against the row's own width, so >=1270px is
   bit-identical to the fixed values above.
   (5w + 4*20 = C  =>  w = 0.2C - 16; every other value is w x its 206px ratio.) */
@media (min-width: 768px) and (max-width: 1269px) {
  .gallery__screens {
    width: 100%;
    container-type: inline-size;
  }

  .gallery__phone {
    width: calc(20cqw - 16px);
    height: auto;
    aspect-ratio: 206 / 440;
    border-radius: calc(4.2718cqw - 3.4175px);
    padding: calc(0.6796cqw - 0.5437px);
  }

  .gallery__phone .phone__screen {
    border-radius: calc(3.6893cqw - 2.9515px);
  }
}

@media (max-width: 767px) {
  .gallery {
    gap: 26px;
    padding: 56px var(--gutter-mobile);
  }

  /* The mobile frame has no header wrapper: eyebrow and title are two more
     items of the 26px column. */
  .gallery__header {
    display: contents;
  }

  .gallery__title {
    font-size: 25px;
    line-height: 30px;
  }

  .gallery__screens {
    align-items: flex-start;
    gap: 12px;
  }

  /* Three 104px mockups and two 12px gaps need 336px, i.e. a 384px viewport.
     Narrower phones shrink the row, and the aspect ratio keeps the mockups in
     proportion instead of stretching them. At 390 it resolves to exactly 222. */
  .gallery__phone {
    width: 104px;
    height: auto;
    aspect-ratio: 104 / 222;
  }

  /* The mobile frame shows three of the five mockups. The other two stay in the
     DOM (one DOM for both breakpoints) and are hidden. */
  .gallery__phone--wide-only {
    display: none;
  }
}

/* ===== FAQ =====

   Pencil resolves `line-height: normal` as round(1.3 x font-size) for IBM Plex
   Sans and round(1.21 x font-size) for Inter. Chrome rounds the same metrics up
   one pixel at several sizes, so every size where the two disagree is spelled
   out below with the Pencil value. */

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding: 88px var(--gutter);
  background-color: var(--dark-bg);
}

.faq__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 760px;
  max-width: 100%;
  flex-shrink: 0;
}

/* `normal` = 52 in Pencil, 53 in Chrome. */
.faq__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: 820px;
  max-width: 100%;
  flex-shrink: 0;
}

/* One <details> per question: the accordion works with JS disabled and comes
   with keyboard support and the right ARIA semantics for free. */
.faq__item {
  width: 100%;
  padding: 22px 26px;
  border-radius: 16px;
  background-color: var(--dark-surface);
  /* Same half-pixel hairline as `.pillars__card`. */
  box-shadow:
    0 0 0 0.5px var(--dark-border),
    inset 0 0 0 0.5px var(--dark-border);
}

.faq__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  cursor: pointer;
  list-style: none;
}

/* Safari still paints its own marker unless this is spelled out. */
.faq__row::-webkit-details-marker {
  display: none;
}

.faq__row:focus-visible {
  outline: 2px solid var(--dark-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* `normal` = 23 in Pencil, 24 in Chrome — visible on mobile, where four of the
   seven questions wrap to two lines and the card height follows. */
.faq__question {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: left;
}

.faq__icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 16px;
  background-color: var(--dark-accent-soft);
  color: var(--dark-accent);
}

.faq__glyph {
  width: 18px;
  height: 18px;
}

/* plus when closed, minus when open — the frame ships with Q1 already open. */
.faq__glyph--minus {
  display: none;
}

.faq__item[open] .faq__glyph--plus {
  display: none;
}

.faq__item[open] .faq__glyph--minus {
  display: block;
}

/* The 14px gap of the FaqItem stack. Padding, not margin: Chrome wraps open
   content in `::details-content`, through which a top margin would collapse. */
.faq__answer {
  width: 100%;
  margin: 0;
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: left;
}

@media (max-width: 767px) {
  .faq {
    gap: 24px;
    padding: 56px var(--gutter-mobile);
  }

  .faq__header {
    width: 100%;
    gap: 12px;
  }

  .faq__title {
    font-size: 26px;
    line-height: 30px;
  }

  .faq__list {
    width: 100%;
    gap: 12px;
  }
}

/* ===== FINAL CTA ===== */

.finalcta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 36px var(--gutter) 104px;
  background-color: var(--dark-surface);
}

.finalcta__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  flex-shrink: 0;
  padding: 64px 80px;
  border-radius: 32px;
  background-image: linear-gradient(180deg, var(--dark-surface-2) 0%, var(--dark-bg) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Half-pixel hairline, `--dark-border-strong` this time. */
  box-shadow:
    0 0 0 0.5px var(--dark-border-strong),
    inset 0 0 0 0.5px var(--dark-border-strong);
}

.finalcta__mark {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 30px;
  object-fit: cover;
}

/* `normal` = 60 in Pencil, 62 in Chrome. The RU headline takes two lines and
   the EN one takes one, which is the whole 608 vs 548 section-height gap. */
.finalcta__title {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  text-align: center;
}

/* `normal` = 22 in Pencil, 24 in Chrome. */
.finalcta__sub {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: center;
}

.finalcta__badges {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
}

.finalcta__badge {
  display: flex;
  flex-shrink: 0;
}

/* StoreBadge component. */
.store-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  min-width: 240px;
  padding: 10px 24px;
  border-radius: 14px;
  background-color: var(--dark-surface);
  color: var(--dark-text-primary);
  box-shadow:
    0 0 0 0.5px var(--dark-border-strong),
    inset 0 0 0 0.5px var(--dark-border-strong);
}

.store-badge__glyph {
  width: 28px;
  height: 28px;
}

.store-badge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  width: fit-content;
  flex-shrink: 0;
}

/* `normal` = 13 in Pencil, 15 in Chrome. */
.store-badge__line1 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  white-space: nowrap;
}

.store-badge__line2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .finalcta {
    padding: 16px var(--gutter-mobile) 68px;
  }

  .finalcta__panel {
    gap: 18px;
    padding: 44px 28px;
    border-radius: 28px;
  }

  .finalcta__mark {
    width: 52px;
    height: 52px;
    border-radius: 26px;
  }

  .finalcta__title {
    font-size: 29px;
    line-height: 33px;
  }

  /* `normal` = 19 in Pencil, 21 in Chrome. */
  .finalcta__sub {
    font-size: 16px;
    line-height: 19px;
  }

  /* The three badges stack. */
  .finalcta__badges {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
  }
}

/* ===== FOOTER ===== */

.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 36px;
  /* The frame is 319px tall with a 56px top padding and a 1px stroke that Pencil
     centres on the frame edge — half of it hangs outside the section, which is why
     the exported PNG is one device row taller. Two shadows reproduce that split
     (inner half inside the padding box, outer half above it); a shadow costs no
     layout, so the 56px offset of the content is the design's own and the section
     stays 319px. Drawing the stroke as a CSS border instead puts the whole line
     inside and every row of content half a pixel above the export. */
  padding: 56px var(--gutter) 48px;
  box-shadow: inset 0 0.5px 0 var(--dark-border), 0 -0.5px 0 var(--dark-border);
  background-color: var(--dark-bg);
}

.footer__top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  flex-shrink: 0;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: 320px;
  flex-shrink: 0;
}

.footer__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: fit-content;
  flex-shrink: 0;
}

.footer__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 17px;
  object-fit: cover;
}

/* `normal` = 27 in Pencil, 28 in Chrome (the 34px mark is taller either way,
   but the two must not disagree once the row reflows). */
.footer__wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.footer__tag {
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  text-align: left;
}

.footer__email {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  flex-shrink: 0;
  padding: 4px 0 0;
  color: var(--dark-accent);
}

.footer__email-glyph {
  width: 16px;
  height: 16px;
}

/* `normal` = 18 in Pencil, 19 in Chrome. */
.footer__email-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.footer__links {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 72px;
  width: fit-content;
  flex-shrink: 0;
}

/* Heading and list share one 14px rhythm: the column's own gap sets the
   distance from the heading to the list, the list's gap the one between links. */
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: fit-content;
  flex-shrink: 0;
}

.footer__col-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--dark-text-primary);
  white-space: nowrap;
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: fit-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `normal` = 17 in Pencil, 19 in Chrome. */
.footer__link {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0;
  color: var(--dark-text-secondary);
  white-space: nowrap;
}

/* The mobile frame shortens one Company label; both live in the same DOM. */
.footer__link-wide {
  display: inline;
}

.footer__link-narrow {
  display: none;
}

.footer__divider {
  width: 100%;
  height: 1px;
  flex-shrink: 0;
  background-color: var(--dark-border);
}

.footer__bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  flex-shrink: 0;
}

/* `normal` = 16 in Pencil, 17 in Chrome. */
.footer__copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--dark-text-muted);
  white-space: nowrap;
  text-align: left;
}

@media (max-width: 767px) {
  /* 40px frame padding; the stroke straddles the edge and costs no layout. */
  .footer {
    gap: 28px;
    padding: 40px var(--gutter-mobile);
  }

  /* Brand and links stop sharing a row and become two items of the 28px stack. */
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .footer__brand {
    width: 100%;
    gap: 12px;
  }

  /* 48px column gutter as in the 390 frame; below it the two columns stop
     fitting side by side and wrap instead of being clipped by `.page`. */
  .footer__links {
    width: 100%;
    flex-wrap: wrap;
    gap: 24px 48px;
  }

  .footer__col {
    gap: 12px;
  }

  .footer__col-list {
    gap: 12px;
  }

  .footer__link-wide {
    display: none;
  }

  .footer__link-narrow {
    display: inline;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}