/* Ecru landing — plain CSS, no build step, mobile first.
   Верстка йде за макетом Claude Design «Ecru Landing»: артборд 1440 (desktop)
   і 390 (phone). Проміжні значення — clamp() між цими двома точками, тому
   між 390 і 1440 сторінка тягнеться рівно так, як задумано в макеті.

   Усе локальне: шрифти лежать у assets/fonts, з мережі не тягнеться нічого.
   Це не педантизм — сторінка обіцяє «нічого не йде на сервер», і запит до
   fonts.gstatic.com на першому ж екрані був би тією самою обіцянкою навпаки. */

/* ── шрифти ──────────────────────────────────────────────────────────── */

/* IBM Plex Sans з Google Fonts — варіативний: один файл на підмножину
   покриває всю вагу 100–700, тому окремих файлів на 500 і 600 немає. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Кирилиця тут заради одного рядка в підвалі — «Українська». */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* IBM Plex Mono — статичний, і лише 400: жирного моноширинного в макеті немає. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}




/* Instrument Serif — тільки заголовки, тільки латиниця. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* У Instrument Serif кирилиці немає зовсім — не підмножини бракує, а самих
   гліфів. Без цього всі заголовки українською тихо падали б у Georgia, і
   титульне обличчя сторінки на /uk/ було б чужим. Беремо IBM Plex Serif:
   родина Plex уже на сторінці, тож шрифтова система лишається однією.
   Діапазон — тільки кирилиця, тому en, pl і de не змінюються ні на піксель. */
@font-face {
  font-family: 'Ecru Display Cyrillic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-serif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── токени ──────────────────────────────────────────────────────────── */

:root {
  /* Ecru — небілений льон. Три тони паперу: полотно, смуга секції, смуга шапки. */
  --paper: #f5f1e8;
  --paper-band: #ede7d9;
  --paper-bar: #f0ebdf;
  --surface: #ffffff;

  --ink: #14110e;
  --prose: #4a4239;
  --muted: #6e6355;
  --muted-bar: #6b6257;

  --rule: #e4dccb;
  --rule-card: #e0d7c5;
  --rule-shot: #ded6c6;
  --rule-faq: #dfd5c1;

  /* Палена глина — єдиний акцент. 4.6:1 на паперовому тлі і 5.2:1 білим
     по акценту, тобто AA і для тексту посилань, і для напису на кнопці. */
  --accent: #c2410c;
  --accent-hover: #8f2f09;

  /* Темна секція — маніфест і картка «що каже Ecru». */
  --on-dark: #f5f1e8;
  --on-dark-prose: #c6bcac;
  --on-dark-muted: #9a8f7e;

  /* Вердикти примірочної. Кожен перевірений на білому: 5.0, 5.4 і 6.6:1. */
  --yes: #2e7d4f;
  --yes-rule: #cfe0d3;
  --maybe: #8a6508;
  --maybe-rule: #e5dbc0;
  --no: #a33a2e;
  --no-rule: #e8d2ce;

  --display: 'Instrument Serif', 'Ecru Display Cyrillic', 'Iowan Old Style', Georgia, serif;
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Вертикаль секції та горизонтальні поля — між 390 і 1440 тягнуться лінійно. */
  --section-y: clamp(3.25rem, 1.7179rem + 6.2857vw, 7.375rem);
  --pad-x: clamp(1.375rem, 0.7714rem + 2.4762vw, 3rem);

  --shot-radius: clamp(1rem, 0.7143rem + 0.7619vw, 1.5rem);
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

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

/* <picture> тут лише носій webp-джерела. display:contents прибирає його
   з дерева розкладки, щоб елементом сітки лишався сам <img> — інакше
   класи на картинці (.hero__shot і решта) втратили б свого батька. */
picture { display: contents; }

/* display:contents піднімає дітей <picture> у сітку — а <source> у Chrome
   не має display:none за замовчуванням і сам стає елементом сітки, з'їдаючи
   колонку і зіштовхуючи картинку в наступний рядок. */
picture > source { display: none; }

/* Без text-wrap: balance — у макеті заголовки ламаються жадібно, і
   балансування зсуває їх на інші рядки, ніж намальовано. */
h1, h2, h3 {
  margin: 0;
  font-weight: 400;
}

p { margin: 0; }

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

a:hover { color: var(--accent-hover); }

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

/* ── каркас ──────────────────────────────────────────────────────────── */

.wrap {
  max-width: 70rem;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Смуги, якими макет ділить сторінку на такти. */
.band {
  background: var(--paper-band);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.dark {
  background: var(--ink);
  color: var(--on-dark);
}

.dark .eyebrow { color: var(--on-dark-muted); }

/* ── типографіка ─────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.6875rem, 0.6503rem + 0.0952vw, 0.75rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.h-section {
  font-size: clamp(2.125rem, 1.7071rem + 1.7143vw, 3.25rem);
  margin-top: 0.75rem;
}

.h-wide {
  font-size: clamp(2.125rem, 1.5679rem + 2.2857vw, 3.625rem);
  margin-top: 0.75rem;
}

/* Plex Serif має довші виносні елементи й більший x-height за Instrument
   Serif, тож на line-height 1.06 українські рядки сходяться: хвіст «р»
   впирається у наступний рядок, а крапки «ї» — у «д» над ними. Правка
   тільки для української — латинські сторінки лишаються такими, як у
   канвасі. Трекінг не чіпаємо: letter-spacing: 0 розводить рядки ще на
   один і лишає «неї.» саме, а тіснота була вертикальна, не горизонтальна. */
:lang(uk) .display {
  line-height: 1.1;
}

.lede {
  font-size: clamp(1rem, 0.9071rem + 0.381vw, 1.25rem);
  line-height: 1.6;
  color: var(--prose);
  text-wrap: pretty;
}

.prose {
  font-size: clamp(1rem, 0.9536rem + 0.1905vw, 1.0625rem);
  line-height: 1.64;
  color: var(--prose);
  text-wrap: pretty;
}

.prose strong,
.lede strong {
  color: var(--ink);
  font-weight: 500;
}

.fineprint {
  font-family: var(--mono);
  font-size: clamp(0.71875rem, 0.6816rem + 0.0952vw, 0.78125rem);
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ── шапка ───────────────────────────────────────────────────────────── */

.nav {
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: clamp(3.75rem, 3.1548rem + 2.4381vw, 4.75rem);
}

.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink);
}

.nav__brand:hover { color: var(--ink); }

.nav__wordmark {
  font-size: clamp(1.4375rem, 1.3446rem + 0.381vw, 1.6875rem);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav__links a {
  display: none;
  color: var(--prose);
  font-size: 0.9375rem;
}

.nav__links a:hover { color: var(--accent); }

/* Перемикача мов немає в жодному артборді канваса — це третій свідомий
   відступ від макета. Тримаємо його максимально тихим: моно, дрібно, тим
   самим кольором, що й посилання навігації. */
.langs {
  position: relative;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.langs > summary {
  cursor: pointer;
  color: var(--ink);
  list-style: none;
}

/* Обидва рядки потрібні: перший — для Safari, другий — для решти. */
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary::marker { content: ''; }

.langs > summary::after {
  content: '';
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-left: 0.4375rem;
  vertical-align: 0.125rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.langs[open] > summary::after { transform: rotate(-135deg); }

.langs > summary:hover { color: var(--accent); }

/* Абсолютно, щоб відкритий список не розсовував шапку і підвал. */
.langs > ul {
  position: absolute;
  z-index: 10;
  min-width: 100%;
  list-style: none;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0.375rem;
  text-align: left;
  white-space: nowrap;
}

.langs > ul a {
  display: block;
  padding: 0.3125rem 0.875rem;
  color: var(--prose);
  font-size: inherit;
}

.langs > ul a:hover { color: var(--accent); }

/* У шапці список падає вниз від правого краю, у підвалі — вгору: під
   підвалом місця немає, і випадне меню поїхало б за край сторінки. */
.nav__links .langs > ul { right: 0; }

.site-footer__right .langs > ul {
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.nav__links .langs { display: none; }

@media (min-width: 64rem) {
  .nav__links .langs { display: block; }
}

@media (min-width: 64rem) {
  .nav__links a { display: inline; }
}

/* ── знімки ──────────────────────────────────────────────────────────── */

/* Знімки телефона — 540×1200. Без стелі на ширину вони роздуваються
   більше за натуральний розмір і починають муляти пікселями. */
.shot {
  width: 100%;
  max-width: 21.25rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--shot-radius);
  border: 1px solid var(--rule-shot);
  box-shadow: 0 18px 40px -18px rgba(20, 17, 14, 0.32);
}

.shot--lift {
  box-shadow: 0 30px 60px -24px rgba(20, 17, 14, 0.42);
}

/* ── кнопка магазину ─────────────────────────────────────────────────── */

/* Тут стояла форма очікування. Заклик тепер один — завантажити, — тож на
   її місці кнопка магазину і рядок під нею. Логотип інлайновий: офіційний
   бейдж Apple — растрова картинка, а на цій сторінці з мережі не тягнеться
   нічого і решта графіки векторна. */
.get {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.625rem;
}

.appstore {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  padding: 0.6875rem 1.375rem;
  text-decoration: none;
}

/* Чорна кнопка — єдина темна пляма на паперовому тлі, тож наведення не
   світлішає, а трохи відпускає: акцент на ній читався б гірше за паперовий
   білий, а глиняний по чорному не проходить AA. */
.appstore:hover {
  background: #2c2620;
  color: var(--paper);
}

.appstore__logo {
  flex: none;
  /* Яблуко оптично сидить вище за середину рядка, як і в бейджі Apple. */
  margin-top: -0.125rem;
}

.appstore__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.appstore__pre {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-prose);
}

.appstore__name {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.get + .fineprint { margin-top: 1rem; }

/* Від планшета кнопка в герої тримається лівого краю. Без flex-start
   вона розтягнулась би на всю ширину колонки: align-items: center у
   .get тягне єдину дитину, а не центрує її. */
@media (min-width: 34rem) {
  .get {
    flex-direction: row;
    align-items: center;
  }

  .get--bare { justify-content: flex-start; }
}

/* ── 1 · герой ───────────────────────────────────────────────────────── */

.hero__title {
  font-size: clamp(2.75rem, 2.2857rem + 1.9048vw, 4rem);
  margin-top: 0.875rem;
}

.hero__lede {
  margin-top: 1.125rem;
  max-width: 32.5rem;
}

.hero__shot { margin-top: 2rem; }

@media (min-width: 64rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    align-items: center;
  }

  /* У макеті заголовок розбито жорсткими <br> на три рядки — так він
     тримає висоту поряд з вертикальним знімком телефона. Тут те саме
     робить стеля ширини в 512px: перенос падає сам, і на вужчому екрані
     рядки перебудуються без окремої правки. */
  .hero__title {
    margin-top: 1.375rem;
    max-width: 32rem;
  }

  .hero__lede { margin-top: 1.875rem; }
  .get { margin-top: 2.375rem; }

  .hero__shot {
    margin: 0 0 0 auto;
    max-width: 21.25rem;
  }
}

/* ── 2 · смуга довіри ────────────────────────────────────────────────── */

.trust {
  background: var(--paper-bar);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.trust__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  padding-top: 1.625rem;
  padding-bottom: 1.625rem;
  list-style: none;
  /* Саме auto, а не 0: `.wrap` центрує смугу через margin: 0 auto,
     і `margin: 0` — поставлений, щоб зняти власний відступ <dl> — цю
     авто-центрацію скасовував. Смуга стояла притиснутою до лівого краю. */
  margin: 0 auto;
  text-align: center;
}

/* Стовпчики тримаються купи посередині смуги, а не розтягуються на всю
   ширину .wrap: чотири короткі підписи, розігнані по 70rem, знову
   читалися б як щось окреме одне від одного. */
.trust__inner > div {
  max-width: 15rem;
  margin: 0 auto;
}

.trust dt {
  font-size: clamp(0.875rem, 0.8378rem + 0.0952vw, 1rem);
  font-weight: 600;
}

.trust dd {
  margin: 0.3125rem 0 0;
  font-size: clamp(0.8125rem, 0.7753rem + 0.0952vw, 0.875rem);
  line-height: 1.45;
  color: var(--muted-bar);
}

@media (min-width: 48rem) {
  .trust__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    padding-top: 2.125rem;
    padding-bottom: 2.125rem;
  }
}

/* ── 3 · знати, що маєш ──────────────────────────────────────────────── */

/* Перший h3 у цій секції — підблок про виправлення кольору. Розміри ті
   самі, що в .faq h3: обидва підписують абзац усередині довшого тексту. */
.own h3 {
  margin-top: 1.75rem;
  font-size: clamp(1rem, 0.9628rem + 0.1905vw, 1.1875rem);
  font-weight: 600;
}

.own h3 + .prose { margin-top: 0.5rem; }

.own__shots {
  display: grid;
  gap: 1.125rem;
  margin-top: 1.625rem;
}

@media (min-width: 64rem) {
  .own {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    align-items: center;
  }

  .own__shots {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }

  .own__shots .shot { max-width: 24rem; }
}

/* ── 4 · число проти причини ─────────────────────────────────────────── */

.wedge__body {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.score-card {
  border: 1px solid var(--rule-card);
  border-radius: 18px;
  padding: 1.25rem 1.25rem;
}

.score-card__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.75rem;
}

/* Раніше тут був сірий #8a8073 — 3.9:1 на білому, тобто нижче за 4.5, і
   через це число мусило лишатися великим. Чорнилом по смузі це 12:1, тож
   обмеження на розмір більше нічим не тримається. */
.score-card__number {
  font-family: var(--mono);
  font-size: clamp(2.125rem, 1.9018rem + 0.5714vw, 2.875rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.score-card__note {
  font-size: clamp(0.875rem, 0.8378rem + 0.0952vw, 1rem);
  line-height: 1.5;
  color: var(--ink);
}

.reason-card {
  background: var(--surface);
  border: 1px solid var(--rule-card);
  border-radius: 18px;
  padding: 1.25rem;
}

.reason-card ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6875rem;
}

.reason-card li {
  font-size: clamp(0.9375rem, 0.9003rem + 0.1905vw, 1.125rem);
  line-height: 1.5;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .score-card { padding: 1.875rem 2rem; }
  .score-card__row { gap: 1.25rem; margin-top: 1.125rem; }
  .reason-card { padding: 1.875rem 2rem; }
  .reason-card .eyebrow { color: var(--on-dark-muted); }

.reason-card ul { gap: 0.8125rem; margin-top: 1.125rem; }
}

@media (min-width: 64rem) {
  .wedge__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    align-items: center;
    margin-top: 3.5rem;
  }

  .wedge__body { margin-top: 0; }
  .wedge__shot { max-width: 20rem; }
}

/* ── 5 · попросити або зібрати ───────────────────────────────────────── */

.ask {
  display: grid;
  gap: 2.5rem;
  margin-top: 1.625rem;
}

.ask h3 {
  font-size: clamp(1.125rem, 1.0507rem + 0.381vw, 1.375rem);
  font-weight: 600;
  margin-top: 1rem;
}

.ask p { margin-top: 0.5rem; }

/* Підпис під знімком центрований, а не по лівому краю.

   Знімок займає всю ширину колонки, і текст, притиснутий ліворуч, читався
   як початок нового блоку під картинкою, а не як її підпис. Абзац обмежений
   по ширині й стоїть по центру колонки: центрований текст на всю колонку
   рвав би рядки в різних місцях і читався б гірше, ніж вирівняний. */
.ask h3,
.ask p {
  text-align: center;
}

.ask p {
  margin-left: auto;
  margin-right: auto;
  max-width: 30rem;
}

@media (min-width: 48rem) {
  .ask {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
    margin-top: 3.25rem;
  }
}

/* ── 6 · календар ────────────────────────────────────────────────────── */

.calendar__shot { margin-top: 1.5rem; }

@media (min-width: 64rem) {
  .calendar {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
  }

  /* У макеті знімок стоїть ліворуч, але в потоці розмітки текст іде першим —
     інакше на телефоні читання починалося б із картинки. */
  .calendar__shot {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto 0 0;
    max-width: 20rem;
  }

  .calendar__text {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ── 7 · колірний тип ────────────────────────────────────────────────── */

.points {
  display: grid;
  gap: 1.125rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}

.points li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.points__n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--accent);
  padding-top: 0.3125rem;
  flex: none;
}

.colortype__shot { margin-top: 1.5rem; }

@media (min-width: 64rem) {
  .colortype {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    align-items: center;
  }

  .points { margin-top: 2rem; }

  .colortype__shot {
    margin: 0 0 0 auto;
    max-width: 20.625rem;
  }
}

/* ── 8 · примірочна ──────────────────────────────────────────────────── */

.shop__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.shop__notes {
  display: grid;
  gap: 1.625rem;
}

.shop__notes h3 {
  font-size: clamp(1rem, 0.9628rem + 0.1905vw, 1.1875rem);
  font-weight: 600;
}

.shop__notes p { margin-top: 0.5rem; }

.verdicts {
  display: grid;
  gap: 0.5625rem;
  margin-top: 1.375rem;
  list-style: none;
  padding: 0;
}

.verdicts li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.6875rem 1.25rem;
  font-size: clamp(0.9375rem, 0.9003rem + 0.0952vw, 1rem);
  font-weight: 500;
  text-align: center;
}

.verdicts .yes { color: var(--yes); border-color: var(--yes-rule); }
.verdicts .maybe { color: var(--maybe); border-color: var(--maybe-rule); }
.verdicts .no { color: var(--no); border-color: var(--no-rule); }

@media (min-width: 48rem) {
  .verdicts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.75rem;
  }

  .verdicts li {
    padding: 0.75rem 1.5rem;
    text-align: left;
  }
}

@media (min-width: 64rem) {
  .shop__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem;
    align-items: center;
    margin-top: 3.5rem;
  }

  .shop__grid .shot { max-width: 18.75rem; }
}

/* ── 9 · маніфест ────────────────────────────────────────────────────── */

.manifesto__title {
  font-size: clamp(2.375rem, 1.8179rem + 2.2857vw, 3.875rem);
  margin-top: 0.875rem;
  color: var(--on-dark);
}

.manifesto__cols {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.manifesto h3 {
  font-size: clamp(1.5625rem, 1.4rem + 0.6667vw, 2rem);
  color: var(--on-dark);
}

.manifesto p {
  font-size: clamp(0.9375rem, 0.9003rem + 0.1905vw, 1.0625rem);
  line-height: 1.7;
  color: var(--on-dark-prose);
  margin-top: 0.625rem;
}

.manifesto__coda {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--on-dark-muted);
  margin-top: 2.5rem;
  letter-spacing: 0.02em;
}

@media (min-width: 64rem) {
  .manifesto__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    margin-top: 3.5rem;
  }

  .manifesto p { margin-top: 1rem; }
  .manifesto__coda { margin-top: 3.5rem; }
}

/* ── 10 · чого не робить ─────────────────────────────────────────────── */

/* Розділ був суцільним текстом. Тепер два знімки стоять в одному ряду
   з карточками — тим самим рядом, що й у розділі 06: там пара знімків
   так само ділить рядок із текстовою колонкою. Самі по собі на всю
   ширину два портретні знімки дали б 700px висоти ні під що. */
.limits__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.limits {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.limits li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.125rem 1.25rem;
}

.limits h3 {
  font-size: clamp(1rem, 0.9628rem + 0.1905vw, 1.125rem);
  font-weight: 600;
}

.limits p {
  font-size: clamp(0.9375rem, 0.9003rem + 0.0952vw, 1rem);
  line-height: 1.55;
  color: var(--prose);
  margin-top: 0.375rem;
}

@media (min-width: 48rem) {
  /* До широкого екрана знімки стають парою, а карточки — під ними. */
  .limits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

@media (min-width: 64rem) {
  .limits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem;
    align-items: center;
    margin-top: 3.5rem;
  }

  .limits__grid .shot { max-width: 18.75rem; }

  /* У третій колонці карточки стають стовпчиком — як .shop__notes. */
  .limits {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .limits li { padding: 1.25rem 1.375rem; }
}

/* ── 11 · питання ────────────────────────────────────────────────────── */

.faq__title {
  font-size: clamp(2.125rem, 1.8464rem + 1.1429vw, 2.875rem);
  margin-top: 0.75rem;
}

.faq__list {
  display: grid;
  gap: 1.375rem;
  margin-top: 1.5rem;
}

.faq__list > div {
  border-bottom: 1px solid var(--rule-faq);
  padding-bottom: 1.375rem;
}

.faq__list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.faq h3 {
  font-size: clamp(1rem, 0.9628rem + 0.1905vw, 1.1875rem);
  font-weight: 600;
}

.faq p { margin-top: 0.5rem; }

@media (min-width: 64rem) {
  .faq {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 3rem;
  }

  .faq__list {
    gap: 1.625rem;
    margin-top: 0;
  }

  .faq__list > div { padding-bottom: 1.625rem; }
}

/* ── 12 · фінальний заклик ───────────────────────────────────────────── */

.finale {
  text-align: center;
}

.finale__inner {
  max-width: 48.75rem;
  margin: 0 auto;
}

.finale h2 {
  font-size: clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem);
}

.finale .lede { margin-top: 1rem; }

.finale .get {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 64rem) {
  .finale .lede { margin-top: 1.5rem; }
  .finale .get { margin-top: 2.5rem; }
}

/* ── 13 · підвал ─────────────────────────────────────────────────────── */

.site-footer {
  background: var(--paper-bar);
  border-top: 1px solid var(--rule);
}

.site-footer__inner {
  padding-top: 1.625rem;
  padding-bottom: 1.625rem;
  text-align: center;
  display: grid;
  gap: 1.25rem;
}

/* Ліворуч — усе про проєкт, праворуч — усе, що натискається. Загального
   правила на .site-footer p тут немає навмисно: воно перебивало б за
   специфічністью класи нижче, бо .site-footer p — це (0,1,1). */
.site-footer__left {
  display: grid;
  gap: 0.4375rem;
  justify-items: center;
}

.site-footer__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.875rem;
}

.site-footer__wordmark {
  font-size: 1.3125rem;
}

/* Рядок про назву тримається, поки назва Ecru не перевірена на знак. */
.site-footer__note {
  max-width: 34rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Дрібніше за все інше в підвалі: обіцянка про куки й рік — це примітка
   під приміткою, а не рядок, який хтось читає першим. */
.site-footer__fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  font-size: 0.71875rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

@media (min-width: 64rem) {
  .site-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    text-align: left;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .site-footer__left { justify-items: start; }
  .site-footer__fine { justify-content: flex-start; }
  .site-footer__right { justify-content: flex-end; }

  .site-footer__wordmark { font-size: 1.5rem; }
  .site-footer__note { font-size: 0.875rem; }
}

/* ── 14 · політика конфіденційності ──────────────────────────────────── */

/* Єдина сторінка сайту, де текст читають підряд, а не проглядають. Тому
   вужча колонка: .wrap тримає 70rem, і рядок такої довжини очима не
   тримається — на третьому абзаці погляд починає губити початок рядка. */
.legal {
  max-width: 44rem;
}

.legal__updated {
  margin-top: 0.75rem;
}

.legal .lede {
  margin-top: 1.5rem;
}

/* Заголовки розділів однакові й дрібні: у політики немає головного
   розділу, і кегль, який виділяв би один із них, обіцяв би ієрархію,
   якої тут немає. */
.legal__h {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.legal p + p {
  margin-top: 1rem;
}

.legal__list {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.legal__list li + li {
  margin-top: 0.5rem;
}

.legal a {
  color: var(--accent);
}

.legal a:hover {
  color: var(--accent-hover);
}

/* Пошта — моно й на власному рядку: адресу переписують очима, і в
   пропорційному наборі крапка з дефісом у ній зливаються. */
.legal__mail {
  font-family: var(--mono);
  margin-top: 1rem;
}