/* ═══ Внутрішні сторінки ═══════════════════════════════════════════════
   Лендинг розкладений по координатах фрейму 1920 - тут це не працює:
   Privacy й Terms це довгі документи, висоту яких ніхто наперед не знає.
   Тому сторінки мають власну розкладку в потоці, але ділять із лендингом
   токени, шрифт і той самий масштаб (1rem = 10 px макета через --vw).

   Шапка й підвал тут повторюють лендинг візуально, а не структурно: на
   лендингу вони прибиті абсолютно всередині своїх секцій.
   ══════════════════════════════════════════════════════════════════════ */

.doc {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--po-color-bg-canvas);
}

.doc__inner {
  width: 100%;
  max-width: 172rem;
  margin-inline: auto;
}

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

/* Шапка НЕ липка - вона просто верхній блок сторінки і зникає при
   прокрутці, як на лендінгу. Так однаково на всіх пʼяти сторінках.
   Липкою вона тут була, а на лендінгу ні, і ця різниця не давала нічого,
   крім розбіжності: у меню один пункт і одна кнопка, тримати їх постійно
   на екрані нема потреби, а на телефоні смуга просто зʼїдала висоту.

   Ніякої горизонтальної лінії під шапкою - ні тут, ні на лендінгу.
   Фон суцільно білий (як і в компонента PAGE / Header). Напівпрозорий
   фон із блюром цього не давав: текст просвічував плямою, і лінія
   потрібна була лише щоб цю пляму відсікти. */
.doc-header {
  background: var(--po-color-bg-canvas);
}
.doc-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  height: 11rem;
}
.doc-header__brand img { display: block; width: 29.2429rem; height: 6.7938rem; }
.doc-header__brand { transition: opacity 0.18s ease; }
.doc-header__brand:hover { opacity: 0.76; }

.doc-nav {
  display: flex;
  align-items: center;
  gap: 5.6rem;
}
.doc-nav__link {
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.6rem;
  color: var(--po-color-text-default);
  text-decoration: none;
  transition: color 0.18s ease;
}
.doc-nav__link:hover,
.doc-nav__link:focus-visible { color: var(--po-color-text-brand); }
.doc-nav__link[aria-current="page"] { color: var(--po-color-text-brand); }

/* Телефон - дія, тому кнопка, а не ще один пункт меню */
.doc-nav__cta {
  padding: 1.6rem 3.2rem;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-bg-brand-soft);
  color: var(--po-color-text-brand);
  font-weight: var(--po-weight-semibold);
  font-size: 2.8rem;
  line-height: 3.6rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}
.doc-nav__cta:hover { background: var(--po-color-bg-brand-soft-hover); transform: translateY(-0.2rem); }

/* ── Тіло документа ────────────────────────────────────────────────── */

/* Одна верхня й одна нижня межа на всі чотири сторінки. Раніше кожна мала
   свою: Contacts починався на 20px вище за сусідів, а проміжок до футера
   був 80 / 190 / 252 / 252 - при переході між сторінками вміст стрибав. */
.doc__main { flex: 1 0 auto; padding-block: 11rem 12rem; }

.doc__eyebrow {
  font-weight: var(--po-weight-semibold);
  font-size: 2.6rem;
  line-height: 3.4rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}
/* Заголовок і лід однакові на всіх чотирьох сторінках: різні кеглі на
   сусідніх сторінках читались як недбалість, а не як ієрархія. */
.doc__title {
  margin-top: 2.4rem;
  font-weight: var(--po-weight-regular);
  font-size: 7.6rem;
  line-height: 8.4rem;
  letter-spacing: -0.1rem;
  color: var(--po-color-text-default);
}
.doc__title em { font-style: normal; color: var(--po-color-text-brand); }
.doc__lede {
  margin-top: 2.4rem;
  font-size: 3rem;
  line-height: 4.2rem;
  color: var(--po-color-text-secondary);
}

/* ── Legal pages ──────────────────────────────────────────────────────
   Privacy і Terms - не «стіна тексту», а одна редакційна система:
   короткий контекст зліва, сам документ у читабельній колонці справа. */

.legal-hero { max-width: 124rem; }
.legal-hero .doc__lede { max-width: 118rem; }
.legal-hero__updated {
  margin-top: 2.4rem;
  font-weight: var(--po-weight-medium);
  font-size: 1.8rem;
  line-height: 2.8rem;
  color: var(--po-color-text-brand);
}

.legal-layout {
  display: grid;
  grid-template-columns: 42rem minmax(0, 118rem);
  column-gap: 12rem;
  align-items: start;
  margin-top: 11.2rem;
}
.legal-aside,
.legal-section__body { overflow-wrap: anywhere; }
.legal-aside__title {
  font-weight: var(--po-weight-semibold);
  font-size: 3rem;
  line-height: 3.8rem;
  color: var(--po-color-text-default);
}
.legal-aside__list {
  margin-top: 3.6rem;
  list-style: none;
}
.legal-aside__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 2.1rem;
  line-height: 3.4rem;
  color: var(--po-color-text-secondary);
}
.legal-aside__list li::before {
  content: "•";
  position: absolute;
  left: 0;
}
.legal-company {
  margin-top: 3.6rem;
  font-weight: var(--po-weight-medium);
  font-size: 1.9rem;
  line-height: 3rem;
  color: var(--po-color-text-default);
}
.legal-company p + p { margin-top: 3rem; }
.legal-company__label {
  font-weight: var(--po-weight-semibold);
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}
.legal-company a,
.legal-section a { color: var(--po-color-text-brand); }
.legal-note {
  margin-top: 3.6rem;
  padding: 2.8rem;
  border-radius: var(--po-radius-panel);
  background: var(--po-color-bg-tint);
}
.legal-note h3 {
  font-weight: var(--po-weight-semibold);
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--po-color-text-brand);
}
.legal-note p {
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 2.8rem;
  color: var(--po-color-text-default);
}

.legal-sections {
  display: flex;
  flex-direction: column;
  gap: 7.6rem;
}
.legal-section h2 {
  font-weight: var(--po-weight-semibold);
  font-size: 3.2rem;
  line-height: 4rem;
  color: var(--po-color-text-default);
}
/* Фіксована ширина й табличні цифри: інакше «05» ширше за «11», і колонка
   з дванадцяти заголовків стоїть рваним краєм. */
.legal-section h2 span {
  display: inline-block;
  min-width: 4.3rem;
  margin-right: 1.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--po-color-text-brand);
}
.legal-section__body {
  max-width: 110rem;
  margin-top: 1.8rem;
}
.legal-section__body p,
.legal-section__body li {
  font-size: 2.2rem;
  line-height: 3.6rem;
  color: var(--po-color-text-secondary);
}
.legal-section__body p + p,
.legal-section__body p + ul,
.legal-section__body ul + p { margin-top: 3.6rem; }
.legal-section__body ul { padding-left: 2.4rem; list-style: disc; }
/* Реєстраційний номер і НДС: не розриваються посеред числа. */
.legal-id { white-space: nowrap; }

/* ── Блоки сторінок About / Contacts ───────────────────────────────── */

/* Мітка над значенням: EMAIL, PHONE. Заголовок сторінки - окремий
   рівень (2.6rem), ця мітка живе всередині вмісту й на крок менша. */
.doc__fact-label {
  font-weight: var(--po-weight-semibold);
  font-size: 2.2rem;
  line-height: 3rem;
  text-transform: uppercase;
  color: var(--po-color-text-brand);
}

/* ── About ─────────────────────────────────────────────────────────── */


.about-hero { min-height: 0; }
.about-hero .doc__lede { max-width: 140rem; }

.about-focus {
  margin-top: 11.2rem;
  display: grid;
  grid-template-columns: 40rem 128rem;
  gap: 4rem;
  align-items: center;
}
.about-focus__metric {
  height: 24rem;
  padding: 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--po-radius-panel);
  background: var(--po-color-bg-tint);
}
.about-focus__number {
  font-size: 8.6rem;
  line-height: 9.2rem;
  letter-spacing: -0.1rem;
  color: var(--po-color-text-brand);
}
.about-focus__label {
  margin-top: 1.2rem;
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.8rem;
  color: var(--po-color-text-default);
}
.about-focus__copy { max-width: 128rem; }
.about-focus__copy h2,
.about-roles h2,
.contacts-layout h2 {
  font-weight: var(--po-weight-medium);
  font-size: 4.6rem;
  line-height: 5.4rem;
  color: var(--po-color-text-default);
}
.about-focus__copy p {
  margin-top: 2rem;
  font-size: 2.8rem;
  line-height: 4.2rem;
  color: var(--po-color-text-secondary);
}

/* Матриця 4x2 з фрейму: заголовок займає першу комірку, далі сім ролей.
   Сітка живе на секції, а список віддає їй свої пункти через
   display: contents - інакше заголовок не може стати коміркою, не
   ламаючи розмітку списку. */
.about-roles {
  margin-top: 11.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 4rem;
  row-gap: 3.2rem;
  align-items: center;
}
.about-roles__grid {
  display: contents;
  list-style: none;
}
/* Іконка і підпис в одному рядку, як у фреймі: плитка 96.

   Проміжок 16, а не 24 з макета, і кегль 26, а не 28. Причина одна:
   макет набраний SF Pro, сайт їде на Geist, і "Instructional
   designers" у Geist просить 301 px там, де комірка дає 280. З цими
   двома правками всі сім підписів лишаються в один рядок, як у фреймі,
   а два рядки в одного з семи - це саме та нерівність, яку тут ловлять
   перевіркою рядків. */
.about-role {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.about-role__icon {
  flex: 0 0 auto;
  width: 9.6rem;
  height: 9.6rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--po-surface-tile-border);
  border-radius: var(--po-radius-tile);
  background: var(--po-surface-tile);
  box-shadow: var(--po-shadow-tile);
}
.about-role__icon img { display: block; width: 6.4rem; height: 6.4rem; }
/* display:block, а не contents: усередині contents тег <source> стає
   другим елементом сітки й зсуває іконку вниз на 7px. */
.about-role__icon picture { display: block; }
.about-role h3 {
  min-width: 0;
  font-weight: var(--po-weight-medium);
  font-size: 2.6rem;
  line-height: 3.4rem;
  color: var(--po-color-text-default);
}

.about-end {
  margin-top: 11.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
}
.about-company,
.about-cta {
  min-width: 0;
  height: 28rem;
  padding: 3.2rem 3.6rem;
  border-radius: var(--po-radius-panel);
  background: var(--po-color-bg-tint);
}
/* Вміст обох карток притиснутий догори, щоб заголовки стояли на одній
   лінії: раніше ліва починалась зверху, а права центрувалась по висоті. */
.about-cta {
  display: grid;
  grid-template-columns: 36rem 36rem;
  gap: 4.8rem;
  align-content: start;
  align-items: center;
}
.about-company h3,
.about-cta h3,
.contacts-company h3 {
  font-weight: var(--po-weight-medium);
  font-size: 3rem;
  line-height: 3.8rem;
  color: var(--po-color-text-default);
}
.about-company p,
.about-cta p {
  margin-top: 1.2rem;
  font-size: 2.4rem;
  line-height: 3.4rem;
  color: var(--po-color-text-secondary);
}
.about-cta p { margin-top: 0.8rem; }
.about-company p:last-child { color: var(--po-color-text-default); }
.about-company strong,
.contacts-company strong {
  font-weight: var(--po-weight-semibold);
  font-size: 2.8rem;
  line-height: 3.8rem;
  color: var(--po-color-text-default);
}
.about-cta a {
  width: 36rem;
  min-height: 7.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.4rem 2.8rem;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-text-brand);
  color: #fff;
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.6rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--po-shadow-cta);
  transition: background 0.18s ease, transform 0.18s ease;
}
.about-cta a:hover { background: var(--po-blue-600); transform: translateY(-0.2rem); }

/* ── Contacts ──────────────────────────────────────────────────────── */

.contacts-hero { min-height: 0; }
.contacts-hero .doc__lede { max-width: 140rem; }
/* stretch, а не start: у фреймі ліва колонка 652, а картка форми 640, і
   ці 12 px різниці читаються як недбалість - обидві закінчуються видимою
   карткою на тінтованому тлі, тільки на різній висоті. Розтягування
   додає формі кілька пікселів порожнечі внизу й вирівнює нижні краї. */
.contacts-layout {
  margin-top: 11.2rem;
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(56rem, 7.2fr);
  gap: 10rem;
  align-items: stretch;
}
.contacts-layout h2 { margin-top: 0; }
.contacts-direct__intro { margin-top: 2.4rem; max-width: 85rem; font-size: 2.6rem; line-height: 3.8rem; color: var(--po-color-text-secondary); }
.contacts-channels { margin-top: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; }
.contacts-channels a {
  margin-top: 0.8rem;
  display: inline-block;
  font-weight: var(--po-weight-medium);
  font-size: 3rem;
  line-height: 4rem;
  color: var(--po-color-text-default);
  text-decoration: none;
}
.contacts-channels a:hover { color: var(--po-color-text-brand); }
.contacts-social { margin-top: 5.5rem; display: flex; align-items: center; gap: 2.4rem; }
.contacts-social > p { font-weight: var(--po-weight-medium); font-size: 2.4rem; line-height: 3.4rem; color: var(--po-color-text-secondary); }
.contacts-social__links { display: flex; align-items: center; gap: 2.4rem; }
.contacts-social__links a { display: block; transition: opacity 0.18s ease, transform 0.18s ease; }
.contacts-social__links a:hover { opacity: 0.72; transform: translateY(-0.2rem); }
.contacts-social__links img {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  filter: brightness(0) saturate(100%) invert(32%) sepia(98%) saturate(2172%) hue-rotate(207deg) brightness(88%) contrast(97%);
}
/* Та сама картка, що й на About: однаковий вміст мусить виглядати
   однаково, а не мати власну шкалу на кожній сторінці. */
.contacts-company {
  margin-top: 2.4rem;
  padding: 3.2rem 3.6rem;
  border-radius: var(--po-radius-panel);
  background: var(--po-color-bg-tint);
}
.contacts-company p { margin-top: 1.2rem; font-size: 2.4rem; line-height: 3.4rem; color: var(--po-color-text-secondary); }
.contacts-company p:last-child { color: var(--po-color-text-default); }
.contacts-form-card {
  min-height: 64rem;
  padding: 5.2rem 5.6rem;
  border: 1px solid var(--po-surface-form-border);
  border-radius: var(--po-radius-card);
  background: var(--po-surface-form);
  box-shadow: var(--po-shadow-form);
}
.contacts-form-card > h2 { font-size: 4rem; line-height: 5.4rem; }
.contacts-form-card.is-done {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contacts-form-card.is-done > h2 { display: none; }
.contacts-form-card.is-done .doc-form { margin-top: 0; }

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

/* Градієнт лендинга починається майже білим, і білий текст у ньому зникає.
   Тому тут той самий прийом, що й у мобільного підвалу: смуга згасання
   зверху на суцільному темному, а вміст стоїть уже нижче неї. */
/* Перехід у підвал бере ту саму рампу, що й лендинг (--po-grad-footer),
   і розтягнутий на 46rem замість колишніх 18. Вісімнадцяти вистачало
   рівно на те, щоб білий став темно-синім за 180 px: поруч із лендингом,
   де те саме відбувається на 920, це читалось як обрив, а не як перехід.
   Верхній відступ іде слідом, щоб вміст підвалу починався там само
   відносно кінця згасання, як і раніше.

   На 390 нічого не міняється: там лендинг і внутрішні сторінки вже мають
   однакове згасання на 17rem. */
.doc-footer {
  flex: none;
  padding-block: 48rem 7rem;
  /* На всю висоту підвалу, без обриву: обмежена смуга давала рівний
     горизонтальний шов там, де градієнт закінчувався і починалась пласка
     заливка. Рампа своя (--po-grad-footer-page), а не лендингова: див.
     коментар у tokens.css - інакше текст стоїть на надто світлому. */
  background: var(--po-grad-footer-page);
  color: #fff;
}
.doc-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
}
.doc-footer__brand img { display: block; width: 30.084rem; height: 7.038rem; }
.doc-footer__brand { transition: opacity 0.18s ease; }
.doc-footer__brand:hover { opacity: 0.78; }
.doc-footer__pages {
  display: flex;
  align-items: center;
  gap: 4.8rem;
  padding-top: 1.8rem;
}
.doc-footer__pages a {
  font-weight: var(--po-weight-medium);
  font-size: 2.6rem;
  line-height: 3.4rem;
  color: #fff;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity 0.18s ease;
}
.doc-footer__pages a:hover { opacity: 1; text-decoration: underline; }

.doc-footer__mid {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}
.doc-footer__reach { display: flex; align-items: center; gap: 6rem; }
.doc-footer__reach a {
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.6rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.doc-footer__reach a:hover { text-decoration: underline; }
.doc-footer__social { display: flex; align-items: center; gap: 3.2rem; }
.doc-footer__social-link {
  display: block;
  color: #fff;
  opacity: 0.82;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.doc-footer__social-link img {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  filter: brightness(0) invert(1);
}
.doc-footer__social-link:hover { opacity: 1; transform: translateY(-0.2rem); }

.doc-footer__copyright {
  margin-top: 2rem;
  font-size: 2.6rem;
  line-height: 3.4rem;
  color: #fff;
  opacity: 0.78;
}

/* ══ Вузькі екрани ═══════════════════════════════════════════════════ */

@media (max-width: 1149px) {
  .doc__inner { max-width: 43rem; padding-inline: 2rem; }

  .doc-header__row { height: 7rem; gap: 1.6rem; }
  /* Та сама шапка, що й на лендингу: вордмарк 120 і видима кнопка. */
  .doc-header__brand img { width: 12rem; height: 2.788rem; }
  .doc-nav { gap: 2.2rem; }
  .doc-nav__link { font-size: 1.45rem; line-height: 1.9rem; }
  .doc-nav__cta { padding: 0.8rem 1.6rem; font-size: 1.4rem; line-height: 1.8rem; }

  .doc__main { padding-block: 3.6rem 6rem; }
  .doc__eyebrow { font-size: 1.3rem; line-height: 1.8rem; }
  .doc__title { margin-top: 1.2rem; font-size: 3.2rem; line-height: 3.6rem; letter-spacing: -0.04rem; }
  .doc__lede { margin-top: 1.6rem; max-width: none; font-size: 1.55rem; line-height: 2.2rem; }

  .legal-hero__updated { margin-top: 1.2rem; font-size: 1.35rem; line-height: 1.8rem; }

  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5.2rem;
    margin-top: 4.4rem;
  }
  .legal-aside__title { font-size: 2.2rem; line-height: 2.8rem; }
  .legal-aside__list { margin-top: 2.2rem; }
  .legal-aside__list li { padding-left: 1.2rem; font-size: 1.5rem; line-height: 2.3rem; }
  .legal-company { margin-top: 2.8rem; font-size: 1.4rem; line-height: 2.2rem; }
  .legal-company p + p { margin-top: 2.2rem; }
  .legal-note { margin-top: 2.8rem; padding: 2.2rem; border-radius: var(--po-radius-panel-sm); }
  .legal-note h3 { font-size: 1.7rem; line-height: 2.2rem; }
  .legal-note p { margin-top: 0.8rem; font-size: 1.45rem; line-height: 2.2rem; }

  .legal-sections { gap: 4.4rem; }
  .legal-section h2 { font-size: 2rem; line-height: 2.5rem; }
  .legal-section h2 span { margin-right: 0.7rem; }
  .legal-section__body { margin-top: 1.4rem; }
  .legal-section__body p,
  .legal-section__body li { font-size: 1.5rem; line-height: 2.4rem; }
  .legal-section__body p + p,
  .legal-section__body p + ul,
  .legal-section__body ul + p { margin-top: 1.8rem; }
  .legal-section__body ul { padding-left: 1.8rem; }

  .doc__fact-label { font-size: 1.3rem; line-height: 1.8rem; }

  .about-hero { min-height: 0; }
  .desktop-break { display: none; }
  .about-focus { margin-top: 4.8rem; grid-template-columns: 1fr; gap: 2.4rem; }
  .about-focus__metric { height: auto; min-height: 0; padding: 2.2rem; border-radius: var(--po-radius-panel-sm); }
  .about-focus__number { font-size: 6rem; line-height: 6rem; }
  .about-focus__label { margin-top: 1.2rem; font-size: 1.8rem; line-height: 2.4rem; }
  .about-focus__copy { padding-block: 0; }
  .about-focus__copy h2,
  .about-roles h2,
  .contacts-layout h2 { margin-top: 1rem; font-size: 2.4rem; line-height: 2.9rem; }
  .about-focus__copy p { margin-top: 1.3rem; font-size: 1.5rem; line-height: 2.3rem; }

  /* На 390 матриця 4x2 не поміститься. Сім ролей стають двома колонками,
     іконка над підписом - той самий вигляд, що був тут раніше; заголовок
     займає весь рядок над ними. Мобільного фрейму для About немає. */
  .about-roles {
    min-height: 0;
    margin-top: 4.8rem;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 3rem;
    align-items: start;
  }
  .about-roles h2 { grid-column: 1 / -1; }
  .about-role { flex-direction: column; align-items: flex-start; gap: 1.3rem; }
  .about-role__icon { width: 6.4rem; height: 6.4rem; border-radius: var(--po-radius-tile-sm); }
  .about-role__icon img { width: 4.4rem; height: 4.4rem; }
  .about-role h3 { font-size: 1.65rem; line-height: 2.1rem; }
  .about-roles__locations { margin-top: 3.6rem; display: block; font-size: 1.5rem; line-height: 2.3rem; }
  .about-roles__locations-label,
  .about-roles__locations-list { display: block; }
  .about-roles__locations-list { margin-top: 0.6rem; }

  .about-end { min-height: 0; margin-top: 4.8rem; padding: 0; grid-template-columns: 1fr; gap: 1.4rem; }
  .about-company,
  .about-cta,
  .contacts-company { height: auto; padding: 2.2rem; border-radius: var(--po-radius-panel-sm); }
  .about-cta { grid-template-columns: 1fr; gap: 0; }
  .about-company h3,
  .about-cta h3,
  .contacts-company h3 { font-size: 1.75rem; line-height: 2.3rem; }
  .about-company p,
  .about-cta p,
  .contacts-company p { margin-top: 1.1rem; font-size: 1.35rem; line-height: 2.1rem; }
  .about-company strong,
  .contacts-company strong { font-size: 1.55rem; line-height: 2.1rem; }
  .about-cta a { width: 100%; margin-top: 1.8rem; min-height: 4.8rem; padding: 1.1rem 2rem; font-size: 1.4rem; line-height: 2rem; }

  .contacts-hero { min-height: 0; }
  .contacts-layout { margin-top: 4rem; grid-template-columns: 1fr; gap: 3.2rem; }
  .contacts-direct { padding-top: 0; }
  .contacts-direct__intro { margin-top: 1.3rem; font-size: 1.5rem; line-height: 2.3rem; }
  .contacts-channels { margin-top: 2.4rem; gap: 2rem; }
  .contacts-channels a { margin-top: 0.6rem; font-size: 1.5rem; line-height: 2.2rem; overflow-wrap: anywhere; }
  .contacts-social { margin-top: 2.4rem; gap: 2.4rem; }
  .contacts-social > p { font-size: 1.4rem; line-height: 2rem; }
  .contacts-social__links { gap: 1.8rem; }
  .contacts-social__links img { width: 2.2rem; height: 2.2rem; }
  .contacts-company { margin-top: 2.4rem; }
  .contacts-form-card { min-height: 0; padding: 2.6rem 2.2rem; border-radius: var(--po-radius-card-sm); }
  .contacts-form-card > h2 { font-size: 2.4rem; line-height: 2.9rem; }

  /* Фон задаємо повністю, а не самим background-size. Десктопне правило
     тепер має один шар без no-repeat, і часткове перекриття змушувало
     градієнт повторюватись смугами вниз по підвалу. Тут те саме, що на
     лендингу в мобільній версії: смуга згасання зверху, далі суцільний
     темний. */
  .doc-footer {
    padding-block: 20rem 3rem;
    background: var(--po-grad-footer) top / 100% 17rem no-repeat, #061c6b;
  }
  .doc-footer__top { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .doc-footer__brand img { width: 15rem; height: 3.4848rem; }
  .doc-footer__pages { padding-top: 0; flex-wrap: wrap; gap: 1.6rem 2.2rem; }
  .doc-footer__pages a { font-size: 1.35rem; line-height: 1.8rem; }
  .doc-footer__mid { margin-top: 2.4rem; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .doc-footer__reach { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .doc-footer__reach a { font-size: 1.55rem; line-height: 2.1rem; }
  .doc-footer__social { gap: 2rem; }
  .doc-footer__social-link img { width: 2.2rem; height: 2.2rem; }
  .doc-footer__copyright { margin-top: 2.2rem; font-size: 1.35rem; line-height: 1.8rem; }
}

/* ── Форма на сторінці контактів ────────────────────────────────────── */

.doc-form {
  margin-top: 3.2rem;
  display: flex;
  flex-direction: column;
}
.doc-form__fields { display: flex; flex-direction: column; gap: 2.4rem; }
/* name-row більше нема: одне видиме поле Name (2026-08-26). */
.doc-form__field { position: relative; }
.doc-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.doc-form__field input,
.doc-form__field textarea {
  display: block;
  width: 100%;
  padding: 0 0 1.8rem;
  border: 0;
  border-bottom: 1px solid var(--po-color-border-default);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 2.4rem;
  line-height: 3.6rem;
  color: var(--po-color-text-default);
  transition: border-color 0.18s ease;
}
.doc-form__field textarea {
  min-height: 5.3rem;
  max-height: 16.3rem;
  height: auto;
  resize: none;
  overflow-y: hidden;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 97, 222, 0.38) transparent;
}
.doc-form__field input::placeholder,
.doc-form__field textarea::placeholder { color: var(--po-color-text-secondary); opacity: 1; }
.doc-form__field input:hover,
.doc-form__field textarea:hover { border-bottom-color: rgba(18, 97, 222, 0.36); }
.doc-form__field input:focus,
.doc-form__field textarea:focus { outline: none; border-bottom-color: var(--po-color-text-brand); }

.doc-form__cta {
  align-self: flex-start;
  margin-top: 3.2rem;
  min-height: 7.6rem;
  padding: 2rem 3.2rem;
  border: 0;
  border-radius: var(--po-radius-pill);
  background: var(--po-color-text-brand);
  color: #fff;
  font-family: inherit;
  font-weight: var(--po-weight-medium);
  font-size: 2.8rem;
  line-height: 3.6rem;
  box-shadow: var(--po-shadow-cta);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.doc-form__cta:hover { background: var(--po-blue-600); transform: translateY(-0.2rem); }
.doc-form__cta:disabled { opacity: 0.64; cursor: wait; transform: none; }

@media (max-width: 1149px) {
  .doc-form { margin-top: 2rem; }
  .doc-form__fields { gap: 1rem; }
  .doc-form__field input,
  .doc-form__field textarea { min-height: 4.8rem; padding: 0.8rem 0; font-size: 1.5rem; line-height: 2.1rem; }
  .doc-form__field textarea { min-height: 5.6rem; max-height: 12.2rem; }
  .doc-form__cta { margin-top: 1.6rem; min-height: 4.8rem; padding: 1.1rem 2.1rem; font-size: 1.45rem; line-height: 2rem; }
}