/* =====================================================================
   CALM: the same site, quieter. Loaded after style.css, scene.css and hero.css.
   What it takes away: the dot grid, mono type (except table digits), "fx A1"
   labels, glow, counters, tags and extra pills, big outline numerals, the
   decorative wordmark. What it adds: air. The scene and the scroll
   choreography (js/) are untouched.
   ===================================================================== */

:root {
  --mono: var(--sans);
  --num: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sec-y: 88px;
}
@media (min-width: 700px) { :root { --sec-y: 120px; } }
@media (min-width: 1000px) { :root { --sec-y: 168px; } }

/* ---------- 1. No dots, no grid, no glow, no blinking ---------- */
.hero::before, .final::before { display: none; }
.hero__gl { display: none; }
html.motion #checkForm .check__caret { display: none; }
.mbeam::before { box-shadow: none; }
.mbeam::after { display: none; }
.mbeam.is-idle { animation: none; }
.chip-f { box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.25); }
.check__row:focus-within { box-shadow: none; }

/* ---------- 2. Mono type only for the digits of the tables ---------- */
.c--price, .c--sku, .grow__row:not(.grow__row--head) .b:nth-child(3), .dt__p, .dt__was { font-family: var(--num); }

/* ---------- 3. Less furniture: labels, tags, counters, decoration ---------- */
.fx { display: none; }
.fx ~ .h2 { margin-top: 0; }
.tcard__tab, .sym__n, .step__meta,       /* sheet tabs, small numerals, big outline numerals */
.cells2__sel, .foot__brand, .foot__desc,
.site__dots, .site__promo, .card__buy,   /* the schematic supplier page keeps only its goods */
.sheet__upd, .top__tg, .final__remark { display: none; }
/* "How a page becomes a table 1/4" and the progress line: stronger than the .is-live rule in scene.css */
.hscene .hscene__title, .hscene .hscene__bar, .hscene.is-live .hscene__bar { display: none !important; }
.tag, .dt__cap { height: auto; padding: 0; border: 0; color: var(--muted); font: 400 12px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.pc__k, .foot__h, .modal__src span { letter-spacing: 0; text-transform: none; }
.pc__k { color: var(--muted); font: 500 16px/1 var(--sans); }
.foot__h { font: 500 13px/1 var(--sans); }

/* ---------- 4. Quieter type ---------- */
.hero__title, .h2, .final__h { font-weight: 560; }
.h2 { max-width: 18ch; font-size: clamp(30px, 5.4vw + 6px, 52px); }
.lead { max-width: 44ch; }

/* ---------- 5. The first screen: title, one line, field, button ---------- */
.hero__side { gap: 18px; }
.hero__act { gap: 14px; }
.hero__lead { max-width: none; font-size: 18px; line-height: 1.4; }
.hero__title { font-size: clamp(34px, 8.6vw + 4px, 66px); line-height: 1.04; }
@media (min-width: 1000px) {
  .hero__title { font-size: clamp(40px, 2.4vw + 14px, 56px); }
  .hero__lead { font-size: 19px; }
  .hero__act { max-width: 560px; }
}
.check__alt .linkbtn { font-size: 13px; }
.lang--hero { height: 30px; margin-top: -4px; margin-bottom: -6px; }
/* The field and the button stack, so the whole placeholder is readable */
.hero .check__row { flex-wrap: wrap; }
.hero .check__input { flex: 1 1 100%; }
.hero .check__btn { flex: 1 1 100%; min-height: 50px; }
@media (min-width: 1000px) {
  /* With little text the left column sits level with the middle of the scene */
  .hero__side { padding-top: 150px; }
}

/* ---------- 5b. Breathing ----------
   Air comes from fewer things and one rhythm, not from gaps in single places:
   wider margins on phones, a header with only the logo and the language,
   the field and the button as two plain shapes instead of a framed box,
   the title and its line kept close and the action set apart, and on phones
   the first screen holds only that, with the scene starting below it. */
@media (max-width: 699px) { :root { --gutter: 24px; } }

/* The header: the logo and the language; the form is the call to action */
.lang { height: auto; padding: 0; gap: 14px; border: 0; background: none; font: 500 13px/1 var(--sans); letter-spacing: 0.02em; }
.lang__opt { min-width: 0; padding: 4px 0; border-radius: 0; background: none; color: var(--night-faint); }
a.lang__opt:hover { background: none; color: var(--night-ink); }
.lang__opt[aria-current] { background: none; box-shadow: inset 0 -1.5px 0 var(--lime); color: var(--night-ink); }
.lang--hero { display: none !important; }
@media (max-width: 999px) {
  .top__cta { display: none; }
  .lang--top { display: inline-flex !important; }
}

/* The title and its line belong together; the action stands apart */
.hero__copy { display: block !important; }
.hero__title { letter-spacing: -0.032em; line-height: 1.06; }
.hero__side { gap: 12px; }
.hero__act { gap: 0; }
.hero__lead { margin: 0 0 40px; }
.check { gap: 0; }
.check__alt { margin-top: 18px; }
.check__alt .linkbtn { font-size: 14px; color: var(--night-faint); }

/* The field and the button: two plain shapes, no frame around them */
.check__row, .hero .check__row { flex-wrap: wrap; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
.check__row:focus-within { border: 0; box-shadow: none; }
.check__input {
  flex: 1 1 100% !important;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--night-line);
  border-radius: 14px;
  background: var(--night-2);
  font: 400 16px/1 var(--sans);
  transition: border-color 0.2s ease;
}
.check__input:focus { border-color: rgb(var(--lime-rgb) / 0.7); }
.check.is-bad .check__input { border-color: var(--no-night); }
.check__btn, .hero .check__btn { flex: 1 1 100% !important; min-height: 56px; border-radius: 14px; }

/* Phones: the first screen is the message and the action, vertically centred; the scene
   begins below and only its first line shows at the bottom edge */
@media (max-width: 999px) {
  .hero__title { font-size: clamp(30px, 8vw + 4px, 44px); }
  .hero__lead { font-size: 18px; }
  .check__input { padding: 0 16px; font-size: 15px; }
  /* Optical centre: a little above the middle */
  .hero__side { min-height: calc(100svh - var(--top-h) - 72px); justify-content: center; padding-bottom: 72px; }
  .hero__grid { gap: 0; }
}
/* Phones: "Ціни постачальника" fits one line, so plain wrapping gives two calm lines (balance
   would leave "Ціни" alone) */
@media (max-width: 699px) {
  /* The size follows the width of the screen less the margins, so the first line keeps
     "Ціни постачальника" whole down to 320px */
  .hero__title { font-size: clamp(26px, 10.3vw - 5px, 44px); text-wrap: wrap; }
}
/* The narrowest phones: "Отримати таблицю в Telegram" keeps one line inside the margins */
@media (max-width: 359px) { .check__btn, .hero .check__btn { padding: 0 12px; gap: 7px; font-size: 14.5px; } }
/* Beside the scene the column is narrow: the title scales with it, so "Ціни постачальника" keeps
   one line and the title stays two lines at every width */
@media (min-width: 1000px) { .hero__title { font-size: clamp(34px, 3.3vw, 48px); } }

/* The field and the button share one line wherever the form is wide enough for the whole
   placeholder and the button side by side (the first screen on tablets, the final form) */
.check { container-type: inline-size; }
@container (min-width: 600px) {
  .check__row, .hero .check__row { flex-wrap: nowrap; }
  .check__input { flex: 1 1 auto !important; }
  .check__btn, .hero .check__btn { flex: none !important; padding: 0 26px; }
}

/* The scene: only the step line above the frame */
.hscene__cap { margin-bottom: 14px; }

/* ---------- 6. Cards, price, final, footer ---------- */
.tcard, .tcard:first-child, .tcard:not(:first-child) { border-radius: var(--r); }
.tabs { margin-top: 48px; }
.tcard__art--code { background: var(--paper-2); color: var(--ink); font: 400 14px/1.9 var(--sans); }
.tcard__art--code b { color: var(--ink); font-weight: 600; }
.tcard__art--code p { color: var(--ink) !important; }
.tcard__art--log { font: 400 14px/1.3 var(--sans); }
.chip--mono { font-family: var(--sans); }
.price__notes { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .price__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.final__h { max-width: 16ch; font-size: clamp(32px, 6vw + 6px, 64px); }
.final__more .btn--ghost { display: none; }
html[data-telegram="off"] .final__more .btn--ghost { display: inline-flex; }
.foot { padding: 72px 0 48px; }
.foot__copy { margin-top: 40px; }

/* ---------- 7. Details ---------- */
/* The final form stays on one row on desktop, wide enough for the whole placeholder */
.check--final, .final__in > .go, .final__more { max-width: 720px; }
/* The open question is a plain minus in a square, not a turned diamond */
.qa[open] .qa__ic { transform: none; }
.qa[open] .qa__ic::after { transform: none; }

/* On phones the pinned scene gets the height of the screen instead of a fixed 470px, so it is not
   left floating above an empty half screen (the script reads the real height back) */
@media (max-width: 999px) {
  .hscene { --mh: min(620px, calc(100svh - var(--top-h) - 130px)) !important; }
}

/* =====================================================================
   CALM DARK: the same dark workspace, a notch softer (lifted charcoal with a
   green cast instead of near-black), lime kept as the accent.
   The default theme: <html data-theme="dark">, and the page without JavaScript.
   ===================================================================== */
:root {
  --night: #111713;
  --night-2: #171e1a;
  --night-3: #1e2622;
  --night-line: #27312b;
  --night-muted: #a7b2aa;
  --night-faint: #87938b;
}
.top::before { background: rgb(17 23 19 / 0.92); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .top::before { background: rgb(17 23 19 / 0.88); }
}

/* =====================================================================
   CALM LIGHT: the dark sections become warm paper, text is graphite, lime stays
   the accent. Done by flipping the "night" tokens, then fixing the few places
   that had dark colours written in.
   <html data-theme="light">, set before the first paint by the script in <head>.
   The tokens take html[data-theme] to outrank :root above. The rules are wrapped
   in :where(), which adds no specificity: they beat the dark rules before them
   and still give way to the rules after them, exactly as in the light design.
   ===================================================================== */
html[data-theme="light"] {
  --night: #f6f1e5;
  --night-2: #ffffff;
  --night-3: #ece5d5;
  --night-line: #e3dac6;
  --night-ink: #0c120f;
  --night-muted: #62594b;
  --night-faint: #7d7566;
  --ok-night: #17824a;
  --no-night: #b5321e;
  --chg-night: #c98a0a;

  --paper: #fbf9f3;
  --paper-2: #efe8d8;
  --line: #e6dece;
  --line-2: #d4cab4;
  --muted: #5f574a;
  --ink-2: #37332b;
}
:where(html[data-theme="light"]) :focus-visible { outline-color: var(--sel); }

/* Header and language switch. The switch stays plain text as in the dark theme (5b); the current
   language is marked with the darker lime, which shows on paper where lime itself does not. */
:where(html[data-theme="light"]) .top::before { background: rgb(246 241 229 / 0.92); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :where(html[data-theme="light"]) .top::before { background: rgb(246 241 229 / 0.88); }
}
:where(html[data-theme="light"]) .lang__opt[aria-current] { box-shadow: inset 0 -1.5px 0 var(--sel); }
:where(html[data-theme="light"]) .top__cta { background: transparent; }
@media (min-width: 1000px) { :where(html[data-theme="light"]) .top__cta { background: var(--lime); } }

/* The Telegram summary card and the pipeline marks */
:where(html[data-theme="light"]) .toast { box-shadow: 0 14px 32px -14px rgb(60 50 20 / 0.25); }
:where(html[data-theme="light"]) .toast__ava { background: var(--night-3); }
:where(html[data-theme="light"]) .toast__ava rect:first-child { stroke: var(--ink); }
:where(html[data-theme="light"]) .toast__ava rect:last-child { stroke: var(--night-3); }
:where(html[data-theme="light"]) .pipe__ok { background: var(--ink); }
:where(html[data-theme="light"]) .pipe__fill, :where(html[data-theme="light"]) .pipe__runs i { box-shadow: inset 0 0 0 1.5px var(--sel); }

/* Lime as text must become the darker family on light */
:where(html[data-theme="light"]) .qa[open] { border-color: var(--line-2); }
:where(html[data-theme="light"]) .qa__a a, :where(html[data-theme="light"]) .nojs a { color: var(--lime-ink); }

/* Cool greys of the tables become warm */
:where(html[data-theme="light"]) .sheet__letters,
:where(html[data-theme="light"]) .c--i,
:where(html[data-theme="light"]) .sheet__tabs,
:where(html[data-theme="light"]) .grow__row > span:first-child,
:where(html[data-theme="light"]) .grow__row--letters > span { background: #f3ede0; }
:where(html[data-theme="light"]) .sheet__head { background: #fbf8f1; }
:where(html[data-theme="light"]) .dt__days { background: #f6f1e5; }

/* =====================================================================
   8. PASS 2: the rest of the page, by the same rules as the first screen.
   One idea per section (title and one picture, or title and three short
   points), groups instead of gaps, one rhythm, fewer frames. The scroll
   scripts are untouched: what they animate is still in the page, the parts
   that repeated the picture are only not shown.
   ===================================================================== */

/* ---------- One rhythm ---------- */
:root { --sec-y: 72px; --head-gap: 32px; }
@media (min-width: 700px) { :root { --sec-y: 96px; --head-gap: 44px; } }
@media (min-width: 1000px) { :root { --sec-y: 128px; --head-gap: 56px; } }
.h2 { margin-top: 0; }
.h2 + .lead { max-width: none; margin-top: 14px; }
/* the content of every section starts the same distance below its title */
.drift, .grow, .tabs, .cells2 { margin-top: var(--head-gap); }
.how__head { margin-bottom: var(--head-gap); }
.check--final { margin-top: var(--head-gap); }
.faq { padding-bottom: 0; }
.faq__grid { gap: var(--head-gap) 64px; }

/* small text stays readable on phones (table data excepted) */
.tag, .dt__cap { font-size: 14px; }
.toast, .toast__from { font-size: 14px; }
.foot__copy { font-size: 14px; }

/* ---------- Changes: the title and one picture (the table and its summary) ---------- */
.syms { display: none !important; }
.drift__in { grid-template-columns: minmax(0, 1fr) !important; }
.dt-wrap { width: 100%; max-width: 820px; }
@media (max-width: 999px) { .drift.is-pinned .drift__in { justify-content: center; } }
/* the title lives inside the pinned stage now: it stays with the table, one title-to-content gap */
.drift { margin-top: 0; }
#changes { padding-top: max(0px, calc(var(--sec-y) - 64px)); }
.drift__in { gap: 0 !important; }
.drift__in > .h2 { margin-bottom: var(--head-gap); }

/* ---------- How: one picture, the timeline carries its own labels ---------- */
.steps { display: none !important; }
.pipe { --id: 0px; }
.pipe__row, .how .pipe__row, .how.is-pinned .pipe__row { display: block; height: auto; padding-top: 14px; }
.pipe__id, .how.is-live .pipe__row.is-now .pipe__id, .how.is-live .pipe__row.is-done .pipe__id {
  display: block;
  margin-bottom: 8px;
  color: var(--night-muted);
  font: 500 17px/1.3 var(--sans);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.how.is-live .pipe__row.is-now .pipe__id, .how.is-live .pipe__row.is-done .pipe__id { color: var(--night-ink); }
.pipe__lane { display: block; height: 34px; }
.how.is-live .pipe__fill { background: rgb(var(--lime-rgb) / 0.5); }
.how.is-live .pipe__row.is-done .pipe__fill { background: var(--lime); }
@media (max-width: 999px) {
  .how.is-pinned .how__in { justify-content: center; }
  .pipe__id, .how.is-live .pipe__row.is-now .pipe__id, .how.is-live .pipe__row.is-done .pipe__id { font-size: 16px; }
  /* the scroll marker passes behind the labels instead of through the words */
  .pipe__id, .how.is-live .pipe__row.is-now .pipe__id, .how.is-live .pipe__row.is-done .pipe__id { position: relative; z-index: 1; display: inline-block; padding-right: 10px; background: var(--night); }
}
@media (min-width: 1000px) {
  .pipe { --id: 380px; }
  .pipe__row, .how .pipe__row, .how.is-pinned .pipe__row { display: grid; grid-template-columns: var(--id) minmax(0, 1fr); align-items: center; height: 64px; padding-top: 0; }
  .pipe__id, .how.is-live .pipe__row.is-now .pipe__id, .how.is-live .pipe__row.is-done .pipe__id { margin-bottom: 0; font-size: 19px; }
  .pipe__lane { height: 100%; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .pipe__row, .how .pipe__row, .how.is-pinned .pipe__row { height: 52px; }
}

/* ---------- Table: the title, one line, and the sheet that grows ---------- */
.scope__cols { display: none !important; }

/* ---------- Why: three plain points, no cards, no pictures ---------- */
.tcard__art { display: none !important; }
.tabs, .tabs.is-live { gap: 32px; }
.tcard, .tcard:first-child, .tcard:not(:first-child), .tabs.is-live .tcard {
  position: static;
  min-height: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--night-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}
.tcard__shade { display: none !important; }
.tcard .h3 { margin-bottom: 8px; font-size: 22px; }
.tcard p:not(.tcard__tab) { color: var(--night-muted); font-size: 16.5px; line-height: 1.5; }
@media (min-width: 1000px) { .tabs, .tabs.is-live { gap: 48px; } }

/* ---------- Price: two numbers, open, without a box ---------- */
.cells2 { border: 0; border-radius: 0; background: none; gap: 32px 48px; }
.cells2__sel, .cells2.is-live .cells2__sel { display: none !important; }
.pc, .pc + .pc { padding: 20px 0 0; border: 0; border-top: 1px solid var(--line-2); }
.pc__v { margin: 12px 0 10px; }
.price__notes, .price__cta { display: none; }

/* ---------- Questions: plain rows with hairlines ---------- */
.qas { gap: 0; }
.qa, .qa[open] { border: 0; border-top: 1px solid var(--night-line); border-radius: 0; background: none; }
.qas .qa:last-child { border-bottom: 1px solid var(--night-line); }
.qa summary { min-height: 0; padding: 22px 0; font-size: 17px; }
.qa__a p { padding: 0 0 22px; }
.qa__ic, .qa[open] .qa__ic, .qa.is-closing .qa__ic { width: 20px; height: 20px; border: 0; border-radius: 0; background: none; }
.qa__ic::before, .qa__ic::after, .qa[open] .qa__ic::before, .qa[open] .qa__ic::after, .qa.is-closing .qa__ic::before, .qa.is-closing .qa__ic::after { width: 14px; margin-left: -7px; background: var(--night-ink); }

/* ---------- Footer: the logo and the three contacts ---------- */
.foot { padding: 48px 0 40px; }
.foot__row { align-items: start; gap: 28px; }
@media (min-width: 700px) { .foot__row { grid-template-columns: 1fr auto; } }
.foot__col { display: flex; flex-direction: column; gap: 2px; }
.foot__copy { margin-top: 32px; }

/* =====================================================================
   9. THEME SWITCH: a sun or a moon beside the languages, as quiet as they are.
   The icon and the label name the theme a click switches to (js/theme.js);
   without JavaScript there is no switch and the page stays dark.
   ===================================================================== */
.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--night-faint);
  transition: color 0.2s ease;
}
.theme:hover { color: var(--night-ink); }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme__moon, html[data-theme="light"] .theme__sun { display: none; }
html[data-theme="light"] .theme__moon { display: block; }
html:not(.js) .theme { display: none; }

/* While the theme changes nothing fades: every colour switches in the same frame */
html.theme-switch *, html.theme-switch *::before, html.theme-switch *::after { transition: none !important; }