/*
  Сайт AlarmStreak: главная, политика конфиденциальности, условия использования.

  Палитра повторяет приложение (ТЗ/AlarmStreak_Design_Brief.md): тема одна,
  тёмная; три уровня поверхностей — фон #000000, карточка #1C1C1E, элемент
  внутри карточки #2C2C2E; акцент — системный оранжевый тёмной ветки #FF9F0A.
  Контраст на чёрном: основной текст 21:1, вторичный #98989F — 7,3:1 (на карточке — 5,9:1),
  акцент — 10,2:1.
*/

:root {
  color-scheme: dark;

  --canvas: #000000;
  --card: #1c1c1e;
  --raised: #2c2c2e;
  --separator: #38383a;
  --text: #ffffff;
  --text-secondary: #98989f;
  --accent: #ff9f0a;

  --radius-card: 20px;
  --radius-icon: 22.37%;
  --gutter: 16px;
  --measure: 720px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Кривые движения на главной: выход с долгим торможением, симметричная
     и пружина с небольшим перелётом. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Начало строки для transform-origin, у которого нет логических значений,
   и знак направления строки: 1 — слева направо, −1 — справа налево. Им
   переворачивается поворот телефона в пути. */
:root {
  --edge-start: left;
  --dir: 1;
}

[dir="rtl"] {
  --edge-start: right;
  --dir: -1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

img {
  max-width: 100%;
  display: block;
}

/* ── Шапка ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}

.topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 17px;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-icon);
  box-shadow: 0 0 0 1px var(--raised);
}

/* Меню языков — <details> со ссылками: открывается и работает без
   JavaScript. У каждого языка своя страница (Tools/Site/build.py). */
.lang-menu {
  position: relative;
}

.lang-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--card);
  border-radius: 9px;
  color: var(--text);
  font: 600 13px/1 var(--font);
  cursor: pointer;
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

/* Открытое меню держит кнопку подсвеченной — видно, откуда список. */
.lang-menu[open] summary {
  background: var(--raised);
}

@media (hover: hover) and (pointer: fine) {
  .lang-menu summary:hover {
    background: var(--raised);
  }
}

.lang-menu summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.6;
}

.lang-menu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 190px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--raised);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}

.lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text);
  font-size: 15px;
}

.lang-menu a:hover {
  background: var(--raised);
  text-decoration: none;
}

.lang-menu a[aria-current="page"] {
  color: var(--accent);
}

/* ── Главная: hero ─────────────────────────────────────────────────── */

/* Свечение за телефоном шире экрана. clip, а не hidden: hidden
   превращает overflow-y в auto, и main стал бы прокручиваемым блоком. */
main {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  main {
    overflow-x: hidden;
  }
}

/* Порядок в разметке — порядок на телефоне. С 880 px grid переносит
   телефон в правую колонку на всю высоту, текст встаёт по его центру. */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px var(--gutter) 48px;
}

.hero__title {
  margin: 0 0 16px;
  font-size: clamp(34px, 3vw + 24px, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

/* Вторая фраза — с новой строки и акцентом. Без курсива: синтетический
   наклон портит китайский и арабское письмо. */
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--accent);
}

/* Слово крупного заголовка (а в названии — буква): встаёт отдельно, поэтому
   inline-block — transform у строчного элемента не работает. Всегда, а не
   только при движении: перенос строк не должен зависеть от настроек.
   anywhere — длинное слово уже экрана переносится внутри себя, как прежде:
   break-word не уменьшает минимальную ширину inline-block. */
.piece {
  display: inline-block;
  overflow-wrap: anywhere;
}

.hero__lead {
  margin: 0 0 24px;
  max-width: 34em;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* «Скоро в App Store» — подпись, а не кнопка: без рамки и фона, чтобы не
   обещать нажатия. Когда приложение выйдет, здесь встанет значок App Store. */
.store {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.store img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-icon);
  box-shadow: 0 0 0 1px var(--raised);
}

.store__name,
.store__soon {
  display: block;
}

.store__name {
  font-size: 17px;
  line-height: 1.25;
}

.store__soon {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.3;
}

.hero__visual,
.chapter__visual {
  position: relative;
  max-width: 400px;
  margin: 48px auto 16px;
}

/* Восход за телефоном: плотная середина спрятана за корпусом, по краям
   видна кайма. Это тот же акцент с прозрачностью — нового цвета нет. */
.hero__glow,
.chapter__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgb(255 159 10 / 0.42),
      rgb(255 159 10 / 0.32) 40%,
      rgb(255 159 10 / 0.16) 62%,
      rgb(255 159 10 / 0.05) 82%,
      rgb(255 159 10 / 0));
  pointer-events: none;
}

/* Телефон с настоящим экраном приложения — скриншот вкладки «Серия» с
   симулятора, свой для каждого языка. Корпус нарисован стилями, а не взят
   из рамок Apple: их изображения нельзя наклонять и анимировать (правила
   App Store Marketing), а здесь телефон поднимается с наклоном.
   Пропорции iPhone 17 Pro: экран 402 × 874 pt, рамка по 16 pt — корпус
   434 × 906, скругления экрана 62 pt, корпуса 78 pt. Проценты у
   border-radius — от своей стороны: отсюда пары.
   Высота и рамка считаются от --phone-w явно, без aspect-ratio и процентов
   у padding: проценты padding берутся от ширины колонки, а не телефона, а
   Safari с aspect-ratio раздувал высоту — экран выходил уже скриншота, и
   тот обрезался по бокам. Ширину задаёт --phone-w, у узкого и широкого
   экрана она своя. */
.phone {
  --phone-w: min(300px, 76vw);
  position: relative;
  width: var(--phone-w);
  height: calc(var(--phone-w) * 906 / 434);
  margin: 0 auto;
  padding: calc(var(--phone-w) * 16 / 434);
  border-radius: 17.97% / 8.61%;
  background: #050506;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 0 0 1.5px #48484a,
    0 0 0 3px #2c2c2e;
}

/* Кнопки на торцах. Слева — Action и громкость, справа — боковая и
   Camera Control; места — доли высоты корпуса. Физические left/right:
   в RTL телефон не зеркалится. */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 1.5px;
}

.phone::before {
  left: -6px;
  top: 17%;
  height: 22%;
  background: linear-gradient(to bottom,
      #3a3a3c 0 18%, transparent 18% 36%,
      #3a3a3c 36% 64%, transparent 64% 73%,
      #3a3a3c 73% 100%);
}

.phone::after {
  right: -6px;
  top: 27%;
  height: 35%;
  background: linear-gradient(to bottom,
      #3a3a3c 0 28.6%, transparent 28.6% 80%,
      #3a3a3c 80% 100%);
}

/* isolation — чтобы Safari не терял скругление углов, пока у корпуса
   идёт 3D-трансформация. */
.phone__screen {
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  border-radius: 15.42% / 7.09%;
  background: #000;
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Экраны глав в телефоне героя нужны только в пути (переезд по главам):
   без движения их показывают телефоны самих глав. */
.phone__shot--2,
.phone__shot--3 {
  display: none;
}

/* Участок от героя до плиток. Скрипт TOUR меряет места телефонов через
   offsetTop/offsetLeft относительно .tour, поэтому .tour должен быть их
   ближайшим позиционированным предком: героя и главы не позиционировать. */
.tour {
  position: relative;
}

/* Dynamic Island: 126 × 37 pt, 11 pt от верха экрана. */
.phone__island {
  position: absolute;
  top: 1.26%;
  left: 50%;
  width: 31.3%;
  height: 4.23%;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}

/* Заслонка «спящего» экрана. В финальном кадре её нет — анимация
   screen-wake только описывает путь от тёмного экрана к светлому. */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* Отрицательный трекинг рвёт связки арабского письма и деванагари,
   китайским иероглифам он не нужен. У высоких начертаний — больше воздуха. */
[dir="rtl"] :is(.hero__title, .loops__title, .privacy h2, .finale h2),
:lang(hi) :is(.hero__title, .loops__title, .privacy h2, .finale h2),
:lang(bn) :is(.hero__title, .loops__title, .privacy h2, .finale h2),
:lang(zh) :is(.hero__title, .loops__title, .privacy h2, .finale h2) {
  letter-spacing: normal;
}

[dir="rtl"] :is(.hero__title, .loops__title, .privacy h2),
:lang(hi) :is(.hero__title, .loops__title, .privacy h2),
:lang(bn) :is(.hero__title, .loops__title, .privacy h2) {
  line-height: 1.3;
}

:lang(ur) :is(.hero__title, .loops__title, .privacy h2) {
  line-height: 1.6;
}

:lang(ur) :is(.hero__lead, .flow p, .tile p, .privacy p, .finale__lead) {
  line-height: 1.9;
}

@media (min-width: 640px) {
  .hero__lead {
    font-size: 20px;
  }
}

/* В одной колонке круг шириной 150% почти целиком прячется за телефоном —
   вытягиваем его в эллипс по высоте телефона, чтобы ореол был виден сверху
   и снизу. */
@media (max-width: 879px) {
  .hero__glow,
  .chapter__glow {
    aspect-ratio: auto;
    height: 150%;
  }
}

/* Размер телефона на узком экране — от высоты окна, а не от ширины: по
   ширине он выходил 619 px из 844 у iPhone 15, и при прокрутке на экране
   оставался один телефон. Здесь он не выше 60 % видимой высоты, поэтому
   рядом всегда виден текст. svh — высота с открытыми панелями Safari, vh —
   запасной вариант для браузеров без svh: в переменной двойное объявление
   не спасает, поэтому @supports. Телефон целый: обрезка не подошла.
   434 / 906 — пропорции корпуса. Только screen: в печати телефон
   прежний. */
@media screen and (max-width: 879px) {
  .phone {
    --phone-w: min(272px, 70vw, 60vh * 434 / 906);
  }

  @supports (height: 1svh) {
    .phone {
      --phone-w: min(272px, 70vw, 60svh * 434 / 906);
    }
  }

  .hero__visual,
  .chapter__visual {
    margin: 32px auto 0;
  }
}

@media (min-width: 880px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 64px;
    padding-top: 88px;
    padding-bottom: 96px;
  }

  /* Колонка текста при 880 px — около 420 px: кегль от ширины окна дал бы
     там четыре-пять строк заголовка. Здесь он ≈ 0,09 ширины колонки — на
     всех языках не больше трёх строк. */
  .hero__title {
    font-size: clamp(38px, 4.9vw - 4px, 48px);
  }

  .hero__visual,
  .chapter__visual {
    width: 100%;
    margin: 0;
  }

  .phone {
    --phone-w: clamp(240px, 33vh, 300px);
  }
}

/* В режиме высокой контрастности фоны и тени сбрасываются — у корпуса
   пропала бы граница. Системные цвета, заданные явно, сохраняются. */
@media (forced-colors: active) {
  .phone {
    border: 2px solid CanvasText;
  }

  .hero__glow,
  .chapter__glow {
    display: none;
  }
}

@media print {
  .hero__glow,
  .chapter__glow {
    display: none;
  }
}

/* ── Главная: движение ─────────────────────────────────────────────── */

/*
  Статичные стили выше — это финальный кадр. Анимации только описывают путь
  к нему: ключевые кадры задают начальное состояние, конечное берётся из
  статики (backwards держит начальное на время задержки), поэтому в конце
  ничего не прыгает.

  Всё движение объявлено только при screen и no-preference: при «Уменьшить
  движение» и в печати анимаций нет вовсе. Гасить их через animation: none
  ненадёжно — псевдоэлементы (заслонка экрана) двигались бы дальше.

  Текст выплывает сразу при загрузке: заголовок встаёт слово за словом — как
  телефон, поворотом вокруг нижнего края, — подзаголовок проступает из
  размытия. Сцена с телефоном ждёт, пока её увидят:
  класс has-motion (ворота в <head>, build.py) ставит её на паузу через
  --play, скрипт после телефона снимает паузу классом is-playing, а
  «дыхание» свечения идёт, пока телефон на экране (is-glowing). Пауза —
  переменной в каждом шорткате, а не правилом animation-play-state: так её
  не перебьёт более точный селектор и она доходит до псевдоэлементов.
  Без JavaScript has-motion нет — телефон сразу в финальном кадре.
*/

@media screen and (prefers-reduced-motion: no-preference) {
  /* Кнопка меню языков чуть проседает под пальцем. */
  .lang-menu summary {
    transition:
      background-color 150ms ease,
      transform 160ms var(--ease-out);
  }

  .lang-menu summary:active {
    transform: scale(0.97);
  }

  .picker__list a {
    transition: background-color 150ms ease;
  }

  /* Слово за словом, по 70 мс. Второе предложение (em) продолжает счёт —
     заголовок читается одной волной. */
  .hero__title .piece {
    transform-origin: 50% 100%;
    animation: piece-up 800ms var(--ease-out) calc(var(--n) * 70ms) backwards;
  }

  /* Подзаголовок — когда заголовок встал наполовину. */
  .hero__lead,
  .store {
    animation: rise-in 700ms var(--ease-out) 320ms backwards;
  }

  .store {
    animation-delay: 420ms;
  }

  .has-motion .hero__visual {
    --play: paused;
    --glow-play: paused;
  }

  /* Перспектива — у прямого родителя телефона: без неё rotateX подъёма
     выглядит плоским сжатием. Родитель теперь .tour__leg. */
  .has-motion .tour__leg {
    perspective: 1400px;
  }

  .has-motion .hero__visual.is-playing {
    --play: running;
  }

  .has-motion .hero__visual.is-playing.is-glowing {
    --glow-play: running;
  }

  /* 1. Восход, затем медленное «дыхание» */
  .has-motion .hero__glow {
    animation:
      glow-rise 1800ms var(--ease-out) 200ms backwards var(--play),
      glow-breathe 6000ms var(--ease-in-out) 3500ms infinite var(--glow-play);
  }

  /* 2. Телефон берут со стола: он поднимается и выпрямляется, поворачиваясь
     вокруг нижнего края. Без отскока — его ставят, а не бросают. */
  .has-motion .hero__visual .phone {
    transform-origin: 50% 100%;
    animation: phone-rise 1100ms var(--ease-out) 100ms backwards var(--play);
  }

  /* 3. Экран загорается, пока телефон поднимают, — как «Поднятие для
     активации» на iPhone. Иначе чёрный корпус с тёмным экраном на чёрном
     фоне не видно, и подъём с наклоном проходит впустую. */
  .has-motion .hero__visual .phone__screen::after {
    animation: screen-wake 450ms var(--ease-out) 350ms backwards var(--play);
  }
}

/* Проступает из размытия: размытие прячет, что текст ещё не на месте. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }
}

/* Слово лежит, верх отклонён назад, — и встаёт вокруг нижнего края.
   perspective — в обоих кадрах: переход от perspective() к none браузеры
   интерполируют по-разному. Конечный кадр совпадает со статикой. */
@keyframes piece-up {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(70deg);
  }

  to {
    transform: perspective(600px) rotateX(0deg);
  }
}

/* Иконка в финале проступает из восхода. Не из scale(0): она уже там. */
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(12px);
  }
}

@keyframes glow-rise {
  from {
    opacity: 0;
    transform: translateY(30%) scale(0.85);
  }
}

@keyframes glow-breathe {
  50% {
    opacity: 0.72;
  }
}

@keyframes bell-ring {
  15% {
    transform: rotate(-14deg);
  }

  30% {
    transform: rotate(12deg);
  }

  45% {
    transform: rotate(-9deg);
  }

  60% {
    transform: rotate(6deg);
  }

  75% {
    transform: rotate(-3deg);
  }
}

/* Начало подъёма: ниже, верх отклонён назад, чуть меньше. Не scale(0) и
   не из пустоты: телефон уже есть, его поднимают. */
@keyframes phone-rise {
  from {
    opacity: 0;
    transform: translateY(10%) rotateX(16deg) scale(0.96);
  }
}

@keyframes screen-wake {
  from {
    opacity: 1;
  }
}

/* ── Главная: главы ────────────────────────────────────────────────── */

/* Глава — текст и телефон со своим экраном приложения. На телефоне всё
   столбиком, текст первым, как в герое. С 880 px — две колонки, как у
   героя, и телефон чередует стороны: у героя он справа, у шагов слева, у
   плиток снова справа (в RTL зеркально — grid разворачивается сам).
   Колонка телефона везде 1fr против 1.15fr у текста, поэтому телефоны
   одного размера и стоят на одной вертикали. */
.chapter {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px var(--gutter) 64px;
}

/* После плиток идёт блок приватности со своим отступом сверху. */
.chapter.loops {
  padding-bottom: 0;
}

@media (min-width: 880px) {
  .chapter {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 64px;
    padding-top: 48px;
    padding-bottom: 96px;
  }

  .chapter--start {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .chapter--start .chapter__visual {
    grid-column: 1;
    grid-row: 1;
  }

  .chapter--start .chapter__body {
    grid-column: 2;
    grid-row: 1;
  }

  /* Столбик плиток выше телефона: телефон встаёт у заголовка, а не
     посередине, напротив пустого места между плитками. */
  .loops .chapter__visual {
    align-self: start;
  }
}

/* ── Главная: шаги утра ────────────────────────────────────────────── */

/* Контурные значки блоков ниже героя: акцентный контур толщиной 2. */
.flow__node svg,
.chip svg,
.privacy__icon svg {
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Звонок → движение → серия. Линия ведёт от значка к значку вниз. */
.flow__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 28px;
}

/* align-content: start — текст шага прижат к верху, к своему значку. */
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  align-content: start;
}

.flow__node {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--card);
}

.flow__node svg {
  width: 24px;
  height: 24px;
}

.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 23px;
  top: 58px;
  bottom: -18px;
  width: 2px;
  border-radius: 1px;
  background: var(--separator);
}

/* Первая строка заголовка — по центру значка. */
.flow p {
  margin: 0;
  padding-top: 11px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Начало пункта — его заголовок. */
.flow strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Главная: плитки ───────────────────────────────────────────────── */

.loops__title {
  margin: 0 0 24px;
  font-size: clamp(30px, 2.5vw + 20px, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

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

/* Плитка: сверху углубление со схемой — тёмное, как экран внутри
   карточки, — под ним текст. Радиус углубления — радиус плитки минус
   отступ, чтобы углы шли параллельно. */
.tile {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--card);
  border-radius: var(--radius-card);
}

/* Высота углубления одна на все плитки ряда: иначе плитка с коротким
   текстом получала бы углубление выше, и заголовки соседей стояли бы на
   разной высоте. Разница в длине текста уходит вниз плитки. */
.tile__well {
  display: grid;
  place-items: center;
  height: 184px;
  padding: 28px 16px;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.42);
  overflow: hidden;
}

.tile__body {
  flex: 1;
  padding: 18px 14px 14px;
}

.tile h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
}

.tile p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  text-wrap: pretty;
}

/* Время в схемах — плашки, как строки будильников в приложении. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  padding-inline-start: 10px;
  border-radius: 12px;
  background: var(--raised);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chip svg {
  width: 20px;
  height: 20px;
}

/* На экране 320 px полоса «2:30 AM — 6:30 AM» не помещалась в плитку. */
@media (max-width: 359px) {
  .tile__well {
    padding-inline: 12px;
  }

  .chip {
    gap: 6px;
    padding-inline: 8px 10px;
    font-size: 15px;
  }

  .chip svg {
    width: 18px;
    height: 18px;
  }
}

/* Первый звонок и три повтора через минуту — столбик, связанный линией.
   Снизу — тот же восход, что за телефоном в герое. */
.tile--wide .tile__well {
  height: auto;
  min-height: 236px;
  background:
    radial-gradient(70% 90% at 50% 125%, rgb(255 159 10 / 0.24), rgb(255 159 10 / 0) 70%),
    rgb(0 0 0 / 0.42);
}

.again {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.again::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: 19px;
  top: 19px;
  bottom: 19px;
  width: 2px;
  background: var(--separator);
}

/* Закрепление: с 2:30 до звонка в 6:30 будильник не изменить — полоса между
   ними заштрихована, как закрытая зона. */
.lock {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lock__bar {
  flex: 1;
  min-width: 20px;
  height: 8px;
  background: var(--raised);
}

.lock__fill {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(-45deg,
      var(--accent) 0 5px,
      rgb(255 159 10 / 0.4) 5px 10px);
}

/* Звонит в беззвучном: колокольчик на акцентной заливке, как кнопка
   миссии в приложении, и круги звука вокруг. */
.ripple {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  aspect-ratio: 1;
}

.ripple::before,
.ripple::after {
  content: "";
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.ripple::before {
  inset: 22px;
  opacity: 0.4;
}

.ripple::after {
  inset: 0;
  opacity: 0.16;
}

.ripple svg {
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: 50%;
  background: var(--accent);
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Первая плитка — во всю ширину: текст сбоку от схемы. */
  .tile--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "body well";
  }

  .tile--wide .tile__well {
    grid-area: well;
  }

  .tile--wide .tile__body {
    grid-area: body;
    align-self: center;
    padding: 24px 28px;
  }
}

@media (min-width: 880px) {
  /* С 880 px плитки стоят в колонке рядом с телефоном (420–530 px):
     столбиком, как на узком экране, и у первой схема тоже сверху. */
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile--wide {
    display: flex;
  }

  .tile--wide .tile__body {
    align-self: stretch;
    padding: 18px 14px 14px;
  }
}

/* ── Главная: приватность и финал ──────────────────────────────────── */

.privacy {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px var(--gutter);
  display: grid;
  gap: 20px;
  justify-items: start;
}

.privacy__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--card);
}

.privacy__icon svg {
  width: 28px;
  height: 28px;
}

.privacy h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 2vw + 20px, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

.privacy p {
  margin: 0;
  max-width: 36em;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .privacy {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 24px;
  }

  .privacy p {
    font-size: 20px;
  }
}

@media (min-width: 880px) {
  .privacy {
    padding-block: 104px;
  }
}

/* Иконка на том же восходе, что в герое: страница начинается и кончается
   рассветом. Под краем иконки прозрачность ≤ 0,2 — вторичный текст рядом
   держит контраст выше 5:1. */
.finale {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.finale__mark {
  position: relative;
  margin-bottom: 28px;
}

.finale__mark img {
  width: 104px;
  height: 104px;
  border-radius: var(--radius-icon);
  box-shadow: 0 0 0 1px var(--raised);
}

.finale__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 440px;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgb(255 159 10 / 0.36),
      rgb(255 159 10 / 0.2) 35%,
      rgb(255 159 10 / 0.07) 65%,
      rgb(255 159 10 / 0));
  pointer-events: none;
}

.finale h2 {
  margin: 0 0 10px;
  font-size: clamp(32px, 2.5vw + 22px, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.finale__lead {
  margin: 0 0 18px;
  max-width: 30em;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: balance;
}

.finale__soon {
  margin: 0;
  font-weight: 600;
}

@media (min-width: 880px) {
  .finale {
    padding-bottom: 128px;
  }

  .finale__lead {
    font-size: 20px;
  }
}

@media (prefers-contrast: more) {
  .flow__step::after,
  .again::before {
    background: rgb(255 255 255 / 0.36);
  }
}

@media (forced-colors: active) {
  .flow__node,
  .tile,
  .chip,
  .privacy__icon {
    border: 1px solid CanvasText;
  }

  .lock__fill,
  .ripple svg {
    background: Highlight;
  }

  .ripple svg {
    stroke: Canvas;
  }

  .ripple::before,
  .ripple::after {
    border-color: Highlight;
  }

  .finale__glow {
    display: none;
  }
}

@media print {
  .finale__glow {
    display: none;
  }
}

/* ── Главная: движение ниже героя ──────────────────────────────────── */

/*
  Блоки ниже героя всплывают, когда до них доходит прокрутка: класс is-in
  ставит скрипт в конце main (build.py, REVEAL). Внутри плиток схема
  проигрывает то, о чём текст: звонок повторяется, полоса закрепления
  заполняется, колокольчик звенит. Финальный кадр — статичные стили выше,
  как и у телефона в герое.

  reveal--blur — блок ещё и проступает из размытия. reveal--parts — блок
  стоит на месте, а появляются его части: слова заголовка, иконка и
  название в финале.
*/

@media screen and (prefers-reduced-motion: no-preference) {
  .has-motion .reveal {
    transition:
      opacity 700ms var(--ease-out) calc(var(--i, 0) * 90ms),
      transform 700ms var(--ease-out) calc(var(--i, 0) * 90ms),
      filter 700ms var(--ease-out) calc(var(--i, 0) * 90ms);
  }

  .has-motion .reveal:not(.is-in, .reveal--parts) {
    opacity: 0;
    transform: translateY(24px);
  }

  .has-motion .reveal--blur:not(.is-in) {
    filter: blur(8px);
  }

  .has-motion .reveal--parts:not(.is-in) :is(.piece, .finale__glow, .finale__mark img, .finale__lead, .finale__soon) {
    opacity: 0;
  }

  .has-motion .loops__title.is-in .piece {
    transform-origin: 50% 100%;
    animation: piece-up 800ms var(--ease-out) calc(var(--n) * 70ms) backwards;
  }

  /* Финал: иконка проступает из восхода, название встаёт по буквам — по
     40 мс, букв больше, чем слов, — за ним подпись. */
  .has-motion .finale.is-in .finale__mark img {
    animation: zoom-in 900ms var(--ease-out) backwards;
  }

  .has-motion .finale.is-in .piece {
    transform-origin: 50% 100%;
    animation: piece-up 700ms var(--ease-out) calc(200ms + var(--n) * 40ms) backwards;
  }

  .has-motion .finale.is-in .finale__lead {
    animation: rise-in 700ms var(--ease-out) 650ms backwards;
  }

  .has-motion .finale.is-in .finale__soon {
    animation: rise-in 700ms var(--ease-out) 750ms backwards;
  }

  /* Линия шага дорисовывается к следующему значку. */
  .has-motion .flow__step::after {
    transform-origin: top;
    transition: transform 600ms var(--ease-in-out) calc(var(--i, 0) * 90ms + 350ms);
  }

  .has-motion .flow__step:not(.is-in)::after {
    transform: scaleY(0);
  }

  /* Звонок, затем повтор за повтором — раз в 380 мс. Линия тянется за ними. */
  .has-motion .is-in .again .chip {
    animation: chip-in 460ms var(--ease-spring) calc(450ms + var(--i) * 380ms) backwards;
  }

  .has-motion .is-in .again::before {
    transform-origin: top;
    animation: grow-y 1140ms linear 600ms backwards;
  }

  .has-motion .is-in .lock__fill {
    animation: grow-x 1200ms var(--ease-in-out) calc(var(--i, 0) * 90ms + 500ms) backwards;
  }

  .has-motion .is-in .ripple svg {
    animation: bell-ring 800ms cubic-bezier(0.36, 0.07, 0.19, 0.97) calc(var(--i, 0) * 90ms + 500ms) backwards;
  }

  .has-motion .is-in .ripple::before {
    animation: ripple 1100ms var(--ease-out) calc(var(--i, 0) * 90ms + 550ms) backwards;
  }

  .has-motion .is-in .ripple::after {
    animation: ripple 1100ms var(--ease-out) calc(var(--i, 0) * 90ms + 750ms) backwards;
  }

  .has-motion .finale.is-in .finale__glow {
    animation: glow-rise 1600ms var(--ease-out) 150ms backwards;
  }
}

/* Полоса закрепления заполняется от 2:30 к 6:30 — в RTL справа налево. */
.lock__fill {
  transform-origin: var(--edge-start);
}

@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.92);
  }
}

@keyframes grow-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes ripple {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  35% {
    opacity: 0.9;
  }
}

/* ── Главная: переезд телефона ─────────────────────────────────────── */

/*
  С 880 px, если браузер умеет анимации от прокрутки, телефон героя один
  ведёт по главам. Он стоит рядом с текстом, на переходе между главами
  переезжает на другую сторону, поворачиваясь и чуть отдаляясь, а экран в
  нём меняется на экран следующей главы. Телефоны глав остаются невидимыми
  местами, куда он приезжает. Прокрутка вверх проигрывает всё назад.

  Отрезки прокрутки и сдвиги меряет скрипт TOUR (build.py) и кладёт в
  переменные .tour: --r1…--r4 — границы отрезков, --ty — на сколько
  телефон опустится за весь путь, --dx2 — сдвиг вбок от героя до шагов,
  --dx3 — от шагов до плиток. Класс is-touring ставится, только когда всё
  измерено; без него — статичная вёрстка: три телефона на своих местах.

  Вниз телефон едет линейно вровень с прокруткой и потому стоит в окне на
  месте. Вбок — с паузами и разгоном. У одного translate одна кривая,
  поэтому вниз едет .hero__visual, вбок — его потомки.

  Каждый переезд вбок — на своём элементе: первый на .tour__fly, второй на
  .tour__leg внутри него, сдвиги складываются. Не две анимации одного
  свойства на одном элементе: Safari 27, пока верхняя из них не началась,
  не проигрывает и нижнюю — первый переезд стоял на месте, а второй шёл.

  animation-timeline и animation-range — после шортката animation: он
  сбрасывает их, и анимация пошла бы по времени.
*/
@media screen and (min-width: 880px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .tour.is-touring .hero__visual {
      animation: tour-y linear both;
      animation-timeline: scroll(root);
      animation-range: var(--r1) var(--r4);
    }

    /* Отдельными свойствами: кривая — переменная, а её в шорткате
       подставляют уже после каскада, и браузеры обходятся с этим по-разному. */
    .tour.is-touring .tour__fly {
      animation-name: tour-x2, tour-turn-2;
      animation-timing-function: var(--ease-in-out);
      animation-fill-mode: both;
      animation-timeline: scroll(root), scroll(root);
      animation-range: var(--r1) var(--r2), var(--r1) var(--r2);
    }

    .tour.is-touring .tour__leg {
      animation-name: tour-x3, tour-turn-3;
      animation-timing-function: var(--ease-in-out);
      animation-fill-mode: both;
      animation-timeline: scroll(root), scroll(root);
      animation-range: var(--r2) var(--r3), var(--r2) var(--r3);
    }

    /* Экраны глав лежат стопкой поверх «Серии» и проявляются на середине
       перехода. Капля Dynamic Island в разметке после них — остаётся сверху. */
    .tour.is-touring .phone__shot--2,
    .tour.is-touring .phone__shot--3 {
      display: block;
      position: absolute;
      inset: 0;
      animation: tour-shot linear both;
      animation-timeline: scroll(root);
    }

    .tour.is-touring .phone__shot--2 {
      animation-range: var(--r1) var(--r2);
    }

    .tour.is-touring .phone__shot--3 {
      animation-range: var(--r2) var(--r3);
    }

    /* Текст уступает дорогу: телефон проезжает через его колонку. */
    .tour.is-touring .hero__text {
      animation: tour-out linear both;
      animation-timeline: scroll(root);
      animation-range: var(--r1) var(--r2);
    }

    /* Шаги проявляются и гаснут на разных элементах — по той же причине,
       что и два переезда телефона. */
    .tour.is-touring .flow .chapter__body {
      animation: tour-in linear both;
      animation-timeline: scroll(root);
      animation-range: var(--r1) var(--r2);
    }

    .tour.is-touring .flow .flow__steps {
      animation: tour-out linear both;
      animation-timeline: scroll(root);
      animation-range: var(--r2) var(--r3);
    }

    .tour.is-touring .loops .chapter__body {
      animation: tour-in linear both;
      animation-timeline: scroll(root);
      animation-range: var(--r2) var(--r3);
    }

    .tour.is-touring .chapter__visual {
      visibility: hidden;
    }

    /* Разбег: перед каждой главой — пустая сцена в 70 % окна, на ней телефон
       и переезжает. Без неё переезд занимал около 280 px прокрутки и при
       быстрой прокрутке проскакивал незаметно. Только в режиме переезда:
       без него пустота между главами ни к чему. */
    .tour.is-touring .chapter {
      margin-top: 70vh;
    }
  }
}

/* Начало от-кадра — статика: translate none. */
@keyframes tour-y {
  to {
    translate: 0 var(--ty);
  }
}

/* Доли — от перехода между главами, вместе с разбегом. Телефон стоит до
   20 %, едет с 20 до 85 %: при быстрой прокрутке переезд всё ещё виден. */
@keyframes tour-x2 {
  0%,
  20% {
    translate: 0 0;
  }

  85%,
  100% {
    translate: var(--dx2) 0;
  }
}

/* Второй переезд — на .tour__leg, поверх уже сдвинутого .tour__fly:
   отсчёт от места шагов. */
@keyframes tour-x3 {
  0%,
  20% {
    translate: 0 0;
  }

  85%,
  100% {
    translate: var(--dx3) 0;
  }
}

/* Передний по ходу край уходит назад, сильнее всего — на середине пути.
   perspective() — в каждом кадре: переход от perspective() к none браузеры
   интерполируют по-разному. */
@keyframes tour-turn-2 {
  0%,
  20%,
  85%,
  100% {
    transform: perspective(1400px) rotateY(0deg) scale(1);
  }

  52.5% {
    transform: perspective(1400px) rotateY(calc(-14deg * var(--dir))) scale(0.92);
  }
}

@keyframes tour-turn-3 {
  0%,
  20%,
  85%,
  100% {
    transform: perspective(1400px) rotateY(0deg) scale(1);
  }

  52.5% {
    transform: perspective(1400px) rotateY(calc(14deg * var(--dir))) scale(0.92);
  }
}

/* Новый экран проявляется на середине пути, коротко: чем дольше видны оба
   экрана сразу, тем заметнее двойное изображение. Размытие его прячет. */
@keyframes tour-shot {
  0%,
  48% {
    opacity: 0;
    filter: blur(4px);
  }

  57%,
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* Уходящий текст гаснет, пока телефон ещё стоит, — к его выезду колонка
   пуста. */
@keyframes tour-out {
  0%,
  5% {
    opacity: 1;
    translate: 0 0;
  }

  30%,
  100% {
    opacity: 0;
    translate: 0 -24px;
  }
}

/* Приходящий текст проявляется, когда телефон уже почти на месте. */
@keyframes tour-in {
  0%,
  75% {
    opacity: 0;
    translate: 0 24px;
  }

  95%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

/* На узком экране сбоку места нет: телефоны глав встают из наклона, пока
   их прокручивают в кадр, и ложатся обратно при прокрутке вверх. Шкала —
   место телефона (.chapter__visual), а не сам телефон: его собственный
   transform сдвигал бы точку отсчёта. */
@media screen and (max-width: 879px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .has-motion .chapter__visual {
      view-timeline: --chapter block;
    }

    .has-motion .chapter__visual .phone {
      transform-origin: 50% 100%;
      animation: phone-scrub linear both;
      animation-timeline: --chapter;
      animation-range: entry 10% cover 45%;
    }
  }
}

@keyframes phone-scrub {
  from {
    opacity: 0;
    transform: perspective(1400px) translateY(10%) rotateX(24deg) scale(0.9);
  }

  to {
    transform: perspective(1400px) rotateX(0deg) scale(1);
  }
}

/* ── Документы ─────────────────────────────────────────────────────── */

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
}

.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.doc__meta {
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 15px;
}

.doc h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.doc h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  line-height: 1.35;
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 14px;
}

.doc ul,
.doc ol {
  padding-inline-start: 1.3em;
}

.doc li {
  margin-bottom: 8px;
}

.doc li::marker {
  color: var(--text-secondary);
}

.doc strong {
  font-weight: 650;
}

.summary {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 20px 22px 8px;
  margin: 0 0 8px;
}

.summary h2 {
  margin-top: 0;
}

.callout {
  background: var(--card);
  border-inline-start: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 14px;
}

.callout p:last-child {
  margin-bottom: 0;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 14px;
  border-radius: 14px;
  background: var(--card);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.doc th,
.doc td {
  text-align: start;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--raised);
}

.doc tr:last-child td {
  border-bottom: 0;
}

.doc th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.doc td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .doc td:first-child {
    white-space: normal;
  }
}

/* Незаполненные поля владельца: видны сразу, находятся поиском по
   class="todo". Перед подачей в App Store их не должно остаться. */
mark.todo {
  background: rgba(255, 159, 10, 0.14);
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 0 5px;
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 520px) {
  mark.todo {
    white-space: normal;
  }
}

/* ── Подвал ────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--separator);
}

.footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 15px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer p {
  margin: 0;
}

/* ── 404 ───────────────────────────────────────────────────────────── */

/* Пометка в переводах документов: юридическую силу имеют русский и
   английский тексты. */
.doc__note {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* Выбор языка: страницы-переадресации без JavaScript и страница 404. */
.picker {
  max-width: 420px;
  margin: 0 auto;
  padding: 72px var(--gutter);
  text-align: center;
}

.picker img {
  margin: 0 auto 20px;
  border-radius: var(--radius-icon);
}

.picker h1 {
  margin: 0 0 12px;
  font-size: 34px;
}

.picker p {
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.picker__list a {
  display: block;
  padding: 12px 16px;
  background: var(--card);
  border-radius: 12px;
  color: var(--text);
}

.picker__list a:hover {
  background: var(--raised);
  text-decoration: none;
}

/* На узком экране три колонки не помещаются: строка таблицы становится
   карточкой, подписи колонок переезжают в data-label. */
@media (max-width: 520px) {
  .doc thead {
    display: none;
  }

  .doc tr {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid var(--raised);
  }

  .doc tr:last-child {
    border-bottom: 0;
  }

  .doc td {
    display: block;
    padding: 0;
    border: 0;
  }

  .doc td:first-child {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .doc td[data-label] + td[data-label] {
    margin-top: 8px;
  }

  .doc td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}