/* Стили лендинга wordspost.com — один файл на четыре языка.
 *
 * До 2026-09-12 всё это лежало внутри каждой из четырёх страниц вместе со
 * шрифтами в base64: по 126 КБ на страницу, из них контента 25. Теперь стили
 * здесь, шрифты рядом в fonts/, страницы — только разметка и текст.
 *
 * Поменял файл — подними версию в ссылке <link rel="stylesheet"> во всех
 * четырёх страницах (?v=…): Cloudflare и браузеры кэшируют CSS надолго,
 * без новой версии правка останется невидимой.
 */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/unbounded-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/unbounded-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/unbounded-700-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-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;
}

/* ──────────────────────────────────────────────────────────────
   Tokens. Light ("morning") is the base; dark ("night") overrides
   only the token values, never the component rules.
   ────────────────────────────────────────────────────────────── */
:root {
  --bg:        #eef0f4;
  --bg-2:      #ffffff;
  --edge:      #d5dae3;
  --text:      #10151f;
  --muted:     #59637a;
  --lamp:      #b26c07;   /* amber, darkened for contrast on paper */
  --lamp-ink:  #ffffff;
  --glow:      rgba(178,108,7,.14);

  /* The night panel keeps its own palette in both themes: it depicts night. */
  --n-bg:      #0a0e1a;
  --n-bg-2:    #121829;
  --n-edge:    #232c45;
  --n-text:    #ece7dc;
  --n-muted:   #a8b3cc;
  --n-lamp:    #f2a93b;

  --display: "Unbounded", "Trebuchet MS", system-ui, sans-serif;
  --body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
          Georgia, "DejaVu Serif", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1120px;
  --r: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0e1a; --bg-2: #121829; --edge: #232c45;
    --text: #ece7dc; --muted: #a8b3cc;
    --lamp: #f2a93b; --lamp-ink: #1a1206; --glow: rgba(242,169,59,.16);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0e1a; --bg-2: #121829; --edge: #232c45;
  --text: #ece7dc; --muted: #a8b3cc;
  --lamp: #f2a93b; --lamp-ink: #1a1206; --glow: rgba(242,169,59,.16);
}
:root[data-theme="light"] {
  --bg: #eef0f4; --bg-2: #ffffff; --edge: #d5dae3;
  --text: #10151f; --muted: #59637a;
  --lamp: #b26c07; --lamp-ink: #ffffff; --glow: rgba(178,108,7,.14);
}

/* ── base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 4.1rem); letter-spacing: -.035em; }
/* Вторая строка героя («За вашим розкладом») — не главная мысль, а уточнение:
   заметно мельче, обычным начертанием и приглушённым цветом. */
h1 .sub {
  display: block;
  margin-top: .3em;
  font-size: .38em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.06rem; letter-spacing: -.01em; line-height: 1.25; }
p  { margin: 0; }
a  { color: inherit; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lamp);
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

section { padding-block: clamp(56px, 8vw, 104px); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Language is no longer switched in the browser: the build emits one file per
   language, so each page carries its own text, its own card and its own URL. */

/* ── header ───────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.top .wrap {
  display: flex; align-items: center; gap: 20px;
  padding-block: 14px;
}

/* The mark's viewBox is cropped to the drawing itself, so its box bottom IS the
   bottom of the page — baseline alignment then needs no nudge at all. */
.brand { display: flex; align-items: baseline; gap: 11px; text-decoration: none; }
/* The mark takes its page colour from the surrounding text, so it follows the
   theme without a second set of tokens. */
/* 23.38 x 22.31 keeps the drawing at exactly the size it had inside the old
   64x64 box — only the empty margin around it is gone. */
.mark { width: 23.38px; height: 22.31px; flex: none; display: block; color: var(--text); }
.brand b {
  font-family: var(--display);
  font-size: 1.06rem;
  line-height: 1;
  letter-spacing: -.03em;
}

.top nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* On a phone the header CTA crowds the brand and the language switch, and the
   same call sits in the hero one screen below anyway. */
@media (max-width: 660px) {
  .top nav .btn { display: none; }
}

.switch { display: flex; border: 1px solid var(--edge); border-radius: 999px; overflow: hidden; }
.switch a {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em;
  padding: 6px 11px;
  color: var(--muted); text-decoration: none;
}
.switch a:hover { color: var(--text); }
.switch a[aria-current="page"] { background: var(--lamp); color: var(--lamp-ink); }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .02em;
  padding: 11px 19px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-primary { background: var(--lamp); color: var(--lamp-ink); }
.btn-ghost { border-color: var(--edge); color: var(--text); }
.btn:hover { transform: translateY(-1px); }
.btn-ghost:hover { border-color: var(--lamp); color: var(--lamp); }

/* ── hero ─────────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 88px) clamp(30px, 4vw, 44px); }
.hero-grid { display: grid; gap: clamp(22px, 3vw, 34px); max-width: 46rem; }
.hero p.lede { font-size: clamp(1.02rem, 1.7vw, 1.24rem); color: var(--muted); max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── the night band ───────────────────────────────────────────── */
.night {
  background: var(--n-bg);
  color: var(--n-text);
  border: 1px solid var(--n-edge);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 34px);
  overflow: hidden;
  position: relative;
}
.night::before {
  content: "";
  position: absolute; inset: -40% 55% 40% -10%;
  background: radial-gradient(closest-side, rgba(242,169,59,.13), transparent);
  pointer-events: none;
}
.night-head {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 26px; position: relative;
}
.night-head .eyebrow { color: var(--n-lamp); }
.clock {
  font-family: var(--mono); font-size: .78rem; color: var(--n-muted);
  font-variant-numeric: tabular-nums;
}
.clock b { color: var(--n-text); font-weight: 500; }

.band { position: relative; }
.rule { position: relative; height: 1px; background: var(--n-edge); }
.hours { display: flex; justify-content: space-between; margin-top: 12px; }
.hours span {
  font-family: var(--mono); font-size: .68rem; color: var(--n-muted);
  font-variant-numeric: tabular-nums;
}

/* Events of one night cluster into half an hour, so a centred label per point
   would collide. Each gets its own lane instead, rising in time order. */
.evt { position: absolute; top: 0; width: 0; }
.evt i {
  position: absolute; left: -4.5px; top: -4.5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--n-lamp);
  box-shadow: 0 0 0 4px rgba(242,169,59,.14);
  opacity: 0; transform: scale(.2);
  animation: pop .5s cubic-bezier(.2,.9,.3,1.4) forwards;
  animation-delay: var(--d);
}
.evt .stem {
  position: absolute; left: 0; bottom: 5px; width: 1px;
  height: var(--stem);
  background: linear-gradient(to top, var(--n-edge), transparent);
  opacity: 0; animation: fade .5s ease forwards; animation-delay: var(--d);
}
.evt .lbl {
  position: absolute; left: 9px; bottom: calc(var(--stem) - 2px);
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
  opacity: 0; animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: var(--d);
}
/* Events in the right half grow their label inwards, or a long label (Ukrainian
   runs noticeably longer than English) pushes past the edge and forces a scrollbar. */
.evt.flip .lbl { left: auto; right: 9px; flex-direction: row-reverse; }
.evt .tm {
  font-family: var(--mono); font-size: .66rem; color: var(--n-lamp);
  font-variant-numeric: tabular-nums;
}
.evt .txt { font-size: .84rem; line-height: 1.2; color: var(--n-text); }

@keyframes pop  { to { opacity: 1; transform: scale(1); } }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { transform: translateY(5px); } to { opacity: 1; transform: none; } }

.now {
  position: absolute; top: -190px; height: 196px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--n-lamp));
  opacity: 0; transition: opacity .4s ease;
}
/* Label sits above the marker: below the rule it would land on the hour scale. */
.now::after {
  content: attr(data-label);
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  color: var(--n-lamp); white-space: nowrap;
}

.band-scroll { overflow-x: auto; padding: 214px 0 34px; }
.band-inner { min-width: 760px; }

/* A timeline needs 760px to keep its labels apart. Below that the band would
   scroll sideways inside the page, which on a phone reads as a bug — so the
   night becomes a plain vertical list instead, in the same time order. */
@media (max-width: 900px) {
  .band-scroll { overflow-x: visible; padding: 4px 0 0; }
  .band-inner { min-width: 0; }
  .hours, .now, .evt .stem { display: none; }

  .rule { height: auto; background: none; display: grid; gap: 14px; }
  .evt {
    position: static; width: auto;
    display: grid; grid-template-columns: 9px 1fr; gap: 12px; align-items: baseline;
  }
  .evt i { position: static; }
  .evt .lbl { position: static; }
  .evt.flip .lbl { flex-direction: row; }
}

/* ── morning: the telegram note ───────────────────────────────── */
.morning { display: grid; gap: clamp(26px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .morning { grid-template-columns: 1fr 1fr; align-items: center; } }

.chat {
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 18px;
  display: grid; gap: 12px;
  box-shadow: 0 18px 40px -30px rgba(10,14,26,.5);
}
.chat-top {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--edge);
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
}
.chat-top i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lamp); flex: none;
}
.bubble {
  background: var(--glow);
  border: 1px solid color-mix(in srgb, var(--lamp) 30%, transparent);
  border-radius: 12px 12px 12px 4px;
  padding: 13px 15px;
  font-size: .92rem;
  display: grid; gap: 7px;
}
.bubble .t { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.bubble strong { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--mono); font-size: .68rem;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--edge); color: var(--muted);
}
/* Иконки сетей в плашках: посетитель должен увидеть, куда пойдёт анонс,
   ещё до того, как прочтёт названия. Иконка берёт цвет текста плашки. */
.chip { display: inline-flex; align-items: center; gap: .55em; font-size: .82rem; padding: 8px 14px; color: var(--text); }
/* Цвет каждой иконки — фирменный, задан прямо на svg в разметке; Threads чёрный
   по бренду и на тёмном фоне пропал бы — он берёт цвет текста. */
.chip svg { width: 1.6em; height: 1.6em; fill: currentColor; flex: none; }

/* ── capability grid ──────────────────────────────────────────── */
.grid {
  display: grid; gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
/* Четыре карточки в блоке «навіщо це потрібно»: три колонки оставили бы
   четвёртую сиротой в отдельном ряду, поэтому здесь сетка 2×2. */
.grid.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.grid--2 { grid-template-columns: 1fr 1fr; } }

.cell {
  background: var(--bg);
  padding: clamp(20px, 2.6vw, 30px);
  display: grid; gap: 9px; align-content: start;
}
.cell .k {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lamp);
}
.cell p { color: var(--muted); font-size: .95rem; }

/* ── process rail ─────────────────────────────────────────────── */
.rail { display: grid; gap: 0; margin-top: 34px; }
.step {
  display: grid; grid-template-columns: 54px 1fr; gap: clamp(14px, 2vw, 26px);
  padding-block: 20px;
  border-top: 1px solid var(--edge);
}
.step:last-child { border-bottom: 1px solid var(--edge); }
.step .n {
  font-family: var(--mono); font-size: .78rem; color: var(--lamp);
  font-variant-numeric: tabular-nums; padding-top: .2em;
}
.step .b { display: grid; gap: 6px; }
.step p { color: var(--muted); font-size: .95rem; }

/* ── pricing ──────────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }

.plan {
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(22px, 3vw, 32px);
  display: grid; gap: 12px; align-content: start;
  position: relative;
}
.plan.hl { border-color: var(--lamp); background: var(--glow); }

.plan .cadence { font-family: var(--display); font-size: 1.3rem; letter-spacing: -.02em; }
.plan .price { display: flex; align-items: baseline; gap: 9px; }
.plan .price b {
  font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: -.04em; line-height: 1;
}
.plan .price span { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.plan .per { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.plan p { color: var(--muted); font-size: .95rem; }

.tag-best {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lamp);
  border: 1px solid var(--lamp); border-radius: 999px; padding: 3px 9px;
}

.plans-note {
  margin-top: 18px; color: var(--muted); font-size: .93rem; max-width: 46em;
}
.plans-note.footnote { margin-top: 10px; font-size: .87rem; }
.plans-note.footnote b { color: var(--lamp); font-weight: 500; }
.star { color: var(--lamp); font-size: .8em; }

/* ── closing call ─────────────────────────────────────────────── */
.close {
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: clamp(28px, 5vw, 56px);
  display: grid; gap: 20px; justify-items: start;
}
.close p { color: var(--muted); max-width: 40em; }

.note {
  margin-top: 14px; font-family: var(--mono); font-size: .7rem;
  color: var(--muted); letter-spacing: .02em;
}

/* ── contact form ─────────────────────────────────────────────── */
.form {
  width: 100%; max-width: 44rem; margin-top: 6px;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .form { grid-template-columns: 1fr 1fr; }
  .form .wide { grid-column: 1 / -1; }
}
.form label {
  display: grid; gap: 6px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.form input, .form textarea {
  font-family: var(--body); font-size: .98rem;
  letter-spacing: 0; text-transform: none;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--edge); border-radius: 10px;
  padding: 11px 13px;
}
.form input:focus, .form textarea:focus { border-color: var(--lamp); outline: none; }
.form textarea { resize: vertical; }

/* Off screen rather than display:none — a bot reads the DOM, not the pixels. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.form-msg { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.form-msg.ok { color: var(--lamp); }
.form-msg.err { color: #e0553f; }

.or {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  font-family: var(--mono); font-size: .74rem; color: var(--muted);
}
.or a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--edge); }
.or a:hover { color: var(--lamp); border-color: var(--lamp); }

footer {
  border-top: 1px solid var(--edge);
  padding-block: 28px;
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
footer .foot-link { color: var(--muted); text-decoration: none; }
footer .foot-link:hover { color: var(--lamp); }
footer .foot-mark {
  margin-left: auto; width: 26px; height: 26px; display: block; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .evt i, .evt .stem, .evt .lbl { opacity: 1; transform: none; }
}

/* ── Страница политики конфиденциальности ─────────────────────
   До 2026-09-12 у неё был свой <style> с копией палитры и своими шрифтами.
   Теперь она на общем файле: палитра, шапка и подвал те же, что у лендинга,
   а здесь только то, чем текстовая страница отличается от него —
   узкая колонка и обычные отступы у абзацев (на лендинге у p margin: 0). */
.policy { padding: 48px 0 72px; }
.policy .wrap { max-width: 760px; }
.policy h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.01em; margin: 0 0 6px; }
.policy h2 { font-size: 1.25rem; margin: 40px 0 12px; }
.policy p  { margin: 0 0 16px; }
.policy ul { margin: 0 0 16px; padding-left: 22px; }
.policy li { margin-bottom: 8px; }
.policy a  { color: var(--lamp); }
.policy .updated { color: var(--muted); font-size: .9rem; margin: 0 0 40px; }
.policy .callout {
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 32px;
  font-size: .95rem;
  color: var(--muted);
}

/* ── Страница цен ─────────────────────────────────────────────── */
.hero--slim { padding-block: clamp(40px, 6vw, 72px) clamp(10px, 2vw, 24px); }
/* На странице цен герой не «витрина», а вступление: прижат к левому краю,
   как и группы тарифов под ним, и заголовок на ступень меньше. */
.hero--slim .hero-grid { max-width: var(--measure); }   /* та же колонка, что у групп тарифов */
.hero--slim h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.pricing .price-groups { padding-block: 0 clamp(24px, 4vw, 48px); }
.price-group { padding-block: clamp(22px, 3.5vw, 40px); }
.price-group h2 { margin: 0; }
.price-group .sub { color: var(--muted); margin-top: 6px; }
.plans--3 { margin-top: 22px; }
@media (min-width: 760px) { .plans.plans--3 { grid-template-columns: repeat(3, 1fr); } }
.plan .cadence small { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); font-weight: 400; margin-left: .3em; }
/* Зачёркнутая сумма двух пакетов у комбинированных: выгода видна без калькулятора. */
.plan .was { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.plan .was s { color: var(--muted); }
.plan .was .instead { margin-left: .2em; }
.price-cta { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 8vw, 96px); }
.price-cta p { color: var(--muted); max-width: 46em; margin-bottom: 18px; }

/* На лендинге вместо блока цен — одна ссылка на страницу цен. */
.pricing-link { padding-block: 0 clamp(40px, 6vw, 72px); }

/* Пункт «Ціни» в шапке — рядом с языками, тем же моноширинным. */
.top nav .nav-link {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  color: var(--muted); text-decoration: none; padding: 0 6px;
}
.top nav .nav-link:hover, .top nav .nav-link[aria-current="page"] { color: var(--lamp); }