/* PURPOSE: ChinaToday home page design system — tokens, primitives, components, page sections and
   responsive rules for design-new/index.html (Figma frame 31:2, desktop 1920 reference).
   GREP_SUMMARY: design tokens, --fs- type scale, .btn, .chip, .pill, .card, .panel, .section-head,
   .site-header (sticky two-row: .site-utility, .site-rate, .site-msg, .site-header__actions),
   .hero, .calc, .stages, .process, .routes, .tariff, .services, .account, .warehouse, .cases,
   .reviews, .faq, .consult, .resources, .site-footer, .offer-card, .promo-banner (floating
   deferment banner) and .promo-mini (its collapsed pill), breakpoints 640/1024/1200/1500.
   STRUCTURE: tokens -> reset -> primitives -> components -> sections (document order) -> media queries. */

/* ==========================================================================
   1. Design tokens
   Raw palette values come from the Figma file; everything below the palette is semantic and is the
   only layer components are allowed to reference.
   ========================================================================== */
:root {
  --rating-purple: #965EEB;
  --rating-green: #64C846;
  --rating-red: #F34D58;
  --rating-wine: #8D263A;
  /* Shared homepage enhancement tokens from design-new/styles.css. */
  --space-em-0-15: 0.15em;
  --fw-bold: 700;
  --support-card-padding: clamp(1.5rem, 1.2rem + 1.6vw, 3rem);
  --fw-medium: 500;

  /* Raw palette (Figma 31:2) */
  --ct-ink: #333333;
  --ct-black: #000000;
  --ct-white: #FFFFFF;
  --ct-paper: #FDFDFD;
  --ct-sky: #D7F7FF;
  --ct-sky-deep: #BDE9F3;
  --ct-sky-line: #B2D5DE;
  --ct-cyan: #39C9EC;
  /* Deeper messenger accents keep white control text above 4.5:1 contrast. */
  --ct-ocean: #087B9C;
  --ct-blue: #0875BE;
  --ct-royal: #2754CE;
  --ct-link: #4FA5E3;
  --ct-orange: #FF7B4F;
  --ct-orange-deep: #FF621E;
  /* Светлый край оранжевого градиента: нужен только баннеру услуги в рейке материала. */
  --ct-orange-soft: #FF9A6B;
  /* Подложка промо-слоёв: темнее --ct-ink, чтобы слой читался поверх страницы, а не как её часть. */
  --ct-ink-deep: #15171E;
  --ct-ink-edge: #1F222C;
  --ct-sand: #F8F3ED;
  --ct-sand-line: #D9CFC2;
  --ct-line: #DDDDDD;
  --ct-line-soft: #EBEBEB;
  --ct-line-faint: #E3E3E3;
  --ct-chip-gray: #EDEDED;
  --ct-chip-purple: #EBC3EF;
  --ct-chip-green: #C7EFC3;
  --ct-chip-yellow: #FAF7D7;
  --ct-star-gold: #FFCC00;

  /* Editorial notes: soft surfaces for callouts inside article text */
  --ct-warn: #FFF1EA;
  --ct-warn-line: #FFC3A8;
  --ct-success: #E8F7E5;
  --ct-success-line: #A8DCA1;
  --ct-tip-line: #E3DA93;

  /* Semantic colors */
--color-text: var(--ct-ink);
--color-text-strong: var(--ct-black);
--color-text-inverse: var(--ct-white);
--color-text-faint: var(--ct-line-soft);
--color-text-placeholder: rgba(0, 0, 0, 0.35);
--color-link: var(--ct-link);
  --color-brand: var(--ct-cyan);
  --color-danger: var(--rating-red);
  --color-accent: var(--ct-orange);
  --color-accent-hover: var(--ct-orange-deep);
  --color-star: var(--ct-star-gold);
  --surface-page: var(--ct-white);
  --surface-card: var(--ct-white);
  --surface-paper: var(--ct-paper);
  --surface-sky: var(--ct-sky);
  --surface-sky-deep: var(--ct-sky-deep);
  --surface-sand: var(--ct-sand);
  --surface-dark: var(--ct-ink);
  /* Hairlines and tints over --surface-dark panels. */
  --surface-on-dark: rgb(255 255 255 / 0.04);
  --border-on-dark: rgb(255 255 255 / 0.12);
  --line-on-dark: rgb(255 255 255 / 0.3);
  --surface-brand-soft: rgb(57 201 236 / 0.16);
  --border-default: var(--ct-line);
  --border-soft: var(--ct-line-soft);
  --border-sand: var(--ct-sand-line);
  --border-sky: var(--ct-sky-line);
  --border-strong: var(--ct-ink);
  --chip-default: var(--ct-sky);
  --chip-gray: var(--ct-chip-gray);
  --chip-purple: var(--ct-chip-purple);
  --chip-green: var(--ct-chip-green);
  --chip-yellow: var(--ct-chip-yellow);
  --surface-note-info: var(--ct-sky);
  --border-note-info: var(--ct-sky-line);
  --surface-note-warn: var(--ct-warn);
  --border-note-warn: var(--ct-warn-line);
  --surface-note-success: var(--ct-success);
  --border-note-success: var(--ct-success-line);
  --surface-note-tip: var(--ct-chip-yellow);
  --border-note-tip: var(--ct-tip-line);
  --icon-muted-opacity: 0.22;
  --texture-dark: url("../icons/noise.svg");
  --texture-light: url("../icons/noise-light.svg");

  /* Typography */
  --font-body: 'HelveticaNeueCyr', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Cuprum', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --tracking: -0.04em;
  --lh-display: 0.95;
  --lh-tight: 1.1;
  --lh-body: 1.3;
  /* Fluid scale: value at 1920 -> value at 375, linear in between */
  --fs-display-xl: clamp(3.25rem, 2.28rem + 4.14vw, 7.25rem);  /* 116 -> 52  */
  --fs-display-lg: clamp(2.5rem, 1.9rem + 2.59vw, 5rem);       /* 80  -> 40  */
  --fs-display-md: clamp(2.125rem, 1.73rem + 1.68vw, 3.75rem); /* 60  -> 34  */
  --fs-display-sm: clamp(1.625rem, 1.41rem + 0.9vw, 2.5rem);   /* 40  -> 26  */
  --fs-stat: clamp(1.875rem, 1.66rem + 0.9vw, 2.75rem);        /* 44  -> 30  */
  --fs-h2: clamp(1.625rem, 1.475rem + 0.65vw, 2.25rem);        /* 36  -> 26  */
  --fs-h3: clamp(1.5rem, 1.35rem + 0.65vw, 2.125rem);          /* 34  -> 24  */
  --fs-h4: clamp(1.25rem, 1.16rem + 0.39vw, 1.625rem);         /* 26  -> 20  */
  --fs-lead: clamp(1.125rem, 1rem + 0.52vw, 1.625rem);         /* 26  -> 18  */
  --fs-phone: clamp(1.25rem, 1.1rem + 0.6vw, 1.875rem);        /* 30  -> 20  */
  --fs-body-lg: 1.125rem;  /* 18 */
  --fs-body: 1rem;         /* 16 */
  --fs-sm: 0.9375rem;      /* 15 */
  --fs-caption: 0.875rem;  /* 14 */
  --fs-xs: 0.75rem;        /* 12 */
  --fs-btn-lg: 1.1875rem;  /* 19 */
  --fs-btn: 1rem;          /* 16 */
  --fs-btn-sm: 0.75rem;    /* 12 */

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --section-gap: clamp(2.5rem, 1.74rem + 3.24vw, 5.625rem);  /* 90px @1920 */
  --head-gap: clamp(1.75rem, 1.2rem + 2.3vw, 4.75rem);        /* 76px @1920 */
  --section-head-gap: clamp(1.25rem, 1rem + 1vw, 2.25rem);    /* 36px @1920 */
  --panel-pad-x: clamp(1.5rem, 1rem + 6vw, 9.25rem);          /* 148px @1920 */
  --panel-pad-y: clamp(2rem, 1.5rem + 3.6vw, 6.5rem);         /* 104px @1920 */
  --card-pad: clamp(1.25rem, 0.6rem + 2.4vw, 4.7rem);         /* 75px @1920 */
  --grid-gap: clamp(1rem, 0.5rem + 0.9vw, 1.7rem);            /* 27px @1920 */
  --grid-gap-lg: clamp(1rem, 0.6rem + 2vw, 3.7rem);           /* 59px @1920 */

  /* Layout */
  --gutter: clamp(1rem, 3.54vw, 4.25rem);                     /* 68px @1920 */
  --container-max: 1785px;
  --content-max: 1528px;
  /* Article page: reading column plus a sticky rail with the table of contents */
  --article-rail: 22rem;
  /* Reading width: the grid is narrower than the 1785px shell — a 1300px line is unreadable. */
  --article-max: 72rem;
  --article-gap: clamp(1.5rem, 0.6rem + 3vw, 4.5rem);
  --article-measure: 74ch;
  /* Compacted header is 56px tall: the sticky rail hangs 16px below it. */
  --sticky-top: 4.5rem;
  /* Anchor offset is larger than the rail offset on purpose: the header compacts while the jump
     is in flight and gives the document back its own height, pulling the target up by the
     heading margin. Measured on a live article, the heading lands ~25px under the header. */
  --anchor-offset: 7rem;

  /* Radii */
  --radius-xl: clamp(1.25rem, 1rem + 0.6vw, 2rem);  /* 32 */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  /* Controls */
  --control-h-lg: clamp(3.5rem, 3rem + 1.1vw, 4.375rem); /* 70 */
  --control-h-md: clamp(3.25rem, 3rem + 0.5vw, 3.7rem);  /* 59 */
  --control-h-sm: 2.625rem;                              /* 42 */
  --control-h-xs: 2.4375rem;                             /* 39 */

  /* Messenger disclosure */
  --fs-widget-title: 1.375rem;
  --surface-messenger-trigger: linear-gradient(115deg, var(--ct-ocean) 0%, var(--ct-blue) 48%, var(--ct-royal) 100%);
  --color-messenger-detail: var(--ct-blue);
  --surface-messenger-consultant: color-mix(in srgb, var(--surface-sky) 42%, var(--surface-card));
  --color-messenger-halo: rgba(8, 117, 190, 0.36);
  --border-messenger-trigger: rgba(255, 255, 255, 0.24);
  --shadow-messenger-trigger: 0 2px 8px rgba(15, 23, 42, 0.28), 0 6px 18px rgba(8, 117, 190, 0.24), 0 2px 5px rgba(8, 65, 115, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --shadow-messenger-trigger-hover: 0 3px 10px rgba(15, 23, 42, 0.32), 0 10px 26px rgba(8, 117, 190, 0.34), 0 3px 8px rgba(8, 65, 115, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --surface-messenger-badge: var(--ct-orange);
  --shadow-messenger-badge: 0 1px 4px rgba(15, 23, 42, 0.3);
  --ring-messenger-mobile: 0 0 0 6px rgba(8, 117, 190, 0.12);
  --duration-messenger-attention: 8s;
  --duration-messenger-panel: 320ms;
  --shadow-messenger-panel: 0 16px 50px rgba(23, 55, 67, 0.14), 0 3px 10px rgba(23, 55, 67, 0.08);
  /* Lifted white card on a tinted panel (handoff scheme). */
  --shadow-card-soft: 0 18px 44px rgba(51, 51, 51, 0.08), 0 2px 6px rgba(51, 51, 51, 0.05);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;

  /* Height of the expanded bottom promo banner, written by initPromoBanner (app.js): floating
     controls sit above it and the footer ends above it instead of under it. 0 when collapsed. */
  --promo-space: 0px;
}
/* Phone: the fluid panel padding still reserves ~40px per side at 375px (1rem + 6vw), which leaves
   a panel's copy a ~265px column. Phones get a fixed 20px so text keeps the width. */
@media (max-width: 640px) {
  :root {
    --panel-pad-x: var(--sp-5);
    --panel-pad-y: var(--sp-8);
  }
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Переход по якорю оставляет заголовок ниже липкой шапки, а не под ней. */
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
strong, b { font-weight: 700; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

/* Icon sprite. It must stay in the render tree: `display: none` on the sprite root — which the
   [hidden] rule above would force — makes Chrome drop the paint servers defined inside it, and
   every gradient-filled symbol (i-max) then paints nothing while still reporting a correct bbox.
   Zero-sized and clipped hides it just as well and keeps the gradients alive. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xs);
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); }

/* ==========================================================================
   3. Primitives: layout, typography, icons, textures
   ========================================================================== */
.container {
  width: min(100% - var(--gutter) * 2, var(--container-max));
  margin-inline: auto;
}

.section-inner {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.section { margin-top: var(--section-gap); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking);
}
.display--xl { font-size: var(--fs-display-xl); }
.display--lg { font-size: var(--fs-display-lg); }
.display--md { font-size: var(--fs-display-md); }
.display--sm { font-size: var(--fs-display-sm); line-height: var(--lh-tight); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
}

.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  color: inherit;
}
.icon--muted { opacity: var(--icon-muted-opacity); }

.texture-dark { background-image: var(--texture-dark); }
.texture-light { background-image: var(--texture-light); }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* Buttons ------------------------------------------------------------------ */
/* HelveticaNeueCyr ink sits slightly above a flex-centered line box. Move the
   text down by half this padding; lift direct icons back to geometric center. */
.btn {
  --btn-optical-pad: 0.1em;
  --btn-icon-lift: -0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--control-h-md);
  padding: 0 clamp(1.25rem, 1rem + 0.9vw, 2.125rem);
  padding-block: var(--btn-optical-pad) 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.btn .icon { width: 0.85em; height: 0.85em; }
.btn > .icon,
.btn > .btn__icon-badge { translate: 0 var(--btn-icon-lift); }
.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--color-accent-hover); color: var(--color-text-inverse); }
.btn--accent:hover { background: var(--color-accent); }

.btn--brand { background: var(--color-brand); color: var(--color-text-inverse); }
.btn--brand:hover { background: var(--ct-orange); }

/* Светлая кнопка на цветной подложке: контур здесь неразличим, нужна заливка. Подпись тёмная,
   а не оранжевая: оранжевый на белом даёт 3.4:1 и не проходит по контрасту для мелкого текста. */
.btn--light { background: var(--surface-card); color: var(--color-text-strong); }
.btn--light:hover { background: var(--surface-sand); }

.btn--outline {
  background: transparent;
  color: var(--color-text-strong);
  border-color: var(--border-strong);
}
.btn--outline:hover { background: var(--surface-dark); color: var(--color-text-inverse); }

/* Вторичная кнопка звонка «Позвонить» рядом с основной: на мобильной ширине прячем,
   а не переносим на новую строку — телефон остаётся доступен в шапке (номер до 640px,
   иконка телефона ниже 640px). */
@media (max-width: 719px) {
  .btn--call { display: none; }
}

.btn--lg {
  --btn-optical-pad: 0.05em;
  --btn-icon-lift: -0.025em;
  min-height: var(--control-h-lg);
  font-size: var(--fs-btn-lg);
  padding-inline: clamp(1.5rem, 1rem + 1.2vw, 2.5rem);
}
/* 12px label: bold plus the inherited body tracking (-0.64px, sized for 16px text)
   packed the letters together. Medium weight with slight positive tracking reads cleaner. */
.btn--sm {
  --btn-optical-pad: 0;
  --btn-icon-lift: 0;
  min-height: var(--control-h-sm);
  font-size: var(--fs-btn-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-inline: var(--sp-6);
  border-radius: var(--radius-xs);
  gap: var(--sp-8);
}
.btn--sm .icon { width: 0.7rem; height: 0.7rem; }
.btn--xs {
  --btn-optical-pad: 0;
  --btn-icon-lift: 0;
  min-height: var(--control-h-xs);
  font-size: var(--fs-btn-sm);
  padding-inline: var(--sp-5);
  border-radius: 5px;
  gap: var(--sp-4);
}
.btn--block { width: 100%; }

/* Cabinet button: 377×81 accent block in the Figma priorities/account rows */
.btn--cabinet {
  min-height: clamp(3.5rem, 3rem + 1.6vw, 5.0625rem);
  padding-inline: clamp(1.5rem, 1rem + 1.4vw, 2.75rem);
  border-radius: var(--radius-md);
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
}
.btn--cabinet .icon { width: 1.4rem; height: 1.4rem; }

/* Chips -------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.3125rem;
  padding: 0.55em 1.05em;
  border-radius: var(--radius-pill);
  background: var(--chip-default);
  font-size: var(--fs-sm);
  line-height: 1.1;
  white-space: nowrap;
}
.chip--gray { background: var(--chip-gray); }
.chip--purple { background: var(--chip-purple); }
.chip--green { background: var(--chip-green); }
.chip--yellow { background: var(--chip-yellow); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

/* Pills: outlined value badges (route time, price, reviewer) -------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: clamp(3.25rem, 3rem + 0.8vw, 4.4375rem);
  padding: 0.3em 0.85em 0.3em 0.75em;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
  white-space: nowrap;
}
.pill .icon { width: 0.5em; height: 0.5em; opacity: var(--icon-muted-opacity); }
.pill--sand { border-color: var(--border-sand); }
.pill--sm {
  min-height: 3.0625rem;
  padding: 0.35em 1.1em 0.35em 1em;
  font-size: 1.25rem;
}
.pill--sm .icon { width: 0.75em; height: 0.75em; }

/* Cards -------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}
.card--sand { background: var(--surface-sand); background-image: var(--texture-dark); border-color: transparent; }
.card--paper { background: var(--surface-paper); background-image: var(--texture-dark); border-color: transparent; }
.card__arrow {
  position: absolute;
  right: var(--card-pad);
  bottom: var(--card-pad);
  width: 0.75rem;
  height: 0.75rem;
  opacity: var(--icon-muted-opacity);
}
.card__ghost {
  position: absolute;
  top: var(--card-pad);
  right: var(--card-pad);
  width: clamp(5rem, 4rem + 2.2vw, 8.2rem);
  height: auto;
  opacity: 0.2;
}

/* Panels: full-width rounded surfaces -------------------------------------- */
.panel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.panel--sky { background: var(--surface-sky); background-image: var(--texture-dark); }
.panel--sand { background: var(--surface-sand); background-image: var(--texture-dark); }
.panel--outline { border: 1px solid var(--border-default); background: var(--surface-card); }

/* Section head: brand mark + h2 ------------------------------------------- */
.section-head { display: grid; gap: var(--section-head-gap); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text);
}
.brand-mark__spark { width: 1rem; height: 1rem; }
.brand-mark__logo { width: 2.5rem; height: auto; opacity: 0.4; }

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  max-width: 20em;
  text-wrap: balance;
}

/* Form fields ---------------------------------------------------------------- */
.field { display: grid; gap: 0.5rem; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.1;
}
.field__control {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h-lg);
  padding: 0 clamp(1rem, 0.8rem + 0.9vw, 2.5rem);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-strong);
  font-size: var(--fs-btn-lg);
  transition: border-color var(--duration) var(--ease);
}
.field__control:focus-within { border-color: var(--color-brand); }
.field__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  font-size: inherit;
}
.field__input::placeholder { color: var(--color-text-placeholder); }
.field__hint { font-size: var(--fs-btn-lg); opacity: 0.3; }
.field__flag { width: 2.375rem; height: auto; border-radius: 2px; }
.field__control--area { align-items: flex-start; padding-block: var(--sp-6); }
.field__control--area .field__input { resize: vertical; min-height: 5.5rem; }
.has-validation-error .field__control {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.form-field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.25;
}
.form-field-error::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.2em;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.form-submit-error {
  grid-column: 1 / -1;
  width: 100%;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--color-text-strong);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}
.form-submit-error:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.stepper { display: inline-flex; gap: var(--sp-4); }
.stepper__btn { display: inline-flex; width: 1.125rem; height: 1.125rem; color: var(--color-text-strong); }
.stepper__btn .icon { width: 100%; height: 100%; }
.stepper__btn:hover { color: var(--color-accent); }

/* City autocomplete (calculator) ---------------------------------------- */
.field--city { position: relative; }
.field__clear {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.field__clear .icon { width: 100%; height: 100%; }
.field__clear:hover { color: var(--color-accent); }
.suggest {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  font-size: var(--fs-btn-lg);
  color: var(--color-text-strong);
}
.suggest__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: calc(var(--radius-sm) - 0.25rem);
  cursor: pointer;
}
.suggest__item:hover,
.suggest__item--active { background: rgba(21, 145, 255, 0.1); }
.suggest__code { font-size: var(--fs-xs); opacity: 0.45; }
.suggest__empty { padding: 0.625rem 0.875rem; opacity: 0.5; cursor: default; }
.suggest__item--ai { align-items: center; font-weight: 700; }
.suggest__item--ai .icon { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--color-accent); }

/* Hint pill (calculator note, consent) ----------------------------------- */
.note-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h-lg);
  padding: var(--sp-3) clamp(1rem, 0.8rem + 0.9vw, 2rem);
  border: 1px solid var(--border-sky);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1.2;
}
.note-pill .icon { width: 1.125rem; height: 1.125rem; opacity: 0.35; }
.note-pill--check {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.note-pill--check input {
  appearance: none;
  display: grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1px solid var(--border-sky);
  border-radius: var(--sp-1);
  background: var(--surface-card);
  color: var(--color-text-strong);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.note-pill--check input::before {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.1rem) rotate(45deg);
  visibility: hidden;
}
.note-pill--check input:checked {
  border-color: var(--color-brand);
  background: var(--color-brand);
}
.note-pill--check input:checked::before { visibility: visible; }
.note-pill--check input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}
.note-pill--check input[aria-invalid="true"] { border-color: var(--color-accent); }
.note-pill--check a { color: inherit; }
.note-pill.has-validation-error {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.note-pill.has-validation-error .form-field-error {
  grid-column: 1 / -1;
  justify-self: center;
  justify-content: center;
  text-align: center;
}

/* Примечание под таблицей или списком на узком экране переносится на пять-шесть строк.
   Радиус пилюли в 999px превращает такой блок в овал: углы срезаются, текст прижимается
   к сужающимся краям. Ниже 720px это прямоугольник со скруглением секции, иконка — у
   первой строки, а не по центру многострочного текста. */
@media (max-width: 719px) {
  .note-pill:not(.note-pill--check) {
    align-items: flex-start;
    border-radius: var(--radius-lg);
  }

  .note-pill .icon { margin-top: 0.1rem; }
}

/* ==========================================================================
   5. Header
   Two rows. The utility row (descriptor, rates, messengers, cabinet) scrolls away; the main row
   (logo, nav, phone, primary CTA) stays. The whole header is sticky, pulled up by exactly the
   height of the utility row: a sticky element is confined to its own parent's box, so sticking the
   inner row instead would unstick it after ~44px.
   Row width is declared here instead of reusing the shared .container class. The header is the one
   block whose alignment must survive a plugin stylesheet redefining a name as generic as
   .container — that is what pulled the row full-bleed while the page content stayed inset.
   ========================================================================== */
/* 70 SEO pages carry the old theme's style_new.css in their text; its bare `header { display: none;
   padding: 8px 0; box-shadow: … }` hid the whole site header on desktop. The component states its
   own box, so a type selector from legacy CSS cannot switch it off.
   A sticky header still takes its height in the flow. app.js reserves the height of the expanded
   state here (--ct-header-h), so the compact state repaints inside the same box and never moves the
   page: a box that shrank at the compact threshold moved everything below it, Chrome's scroll
   anchoring moved scrollY back by as much, and the header flipped again — the page jittered near
   the top by itself. The rows carry the background; what the compact rows leave of the box is
   see-through and lets clicks through, and a compact row taller than the box overflows it. */
.site-header {
  display: block;
  padding: 0;
  box-shadow: none;
  --utility-h: 2.75rem;
  position: sticky;
  top: calc(-1 * var(--utility-h) - 1px);
  z-index: 30;
  height: var(--ct-header-h, auto);
  overflow: visible;
  background: none;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
/* app.js measures the expanded state in one task; nothing may animate into it or back. */
.site-header[data-measure],
.site-header[data-measure] * { transition: none !important; }
.site-header__row {
  width: min(100% - var(--gutter) * 2, var(--container-max));
  margin-inline: auto;
}

/* Utility row -------------------------------------------------------------- */
.site-utility {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  line-height: 1.1;
  letter-spacing: 0;
}
/* The row must stay exactly one line tall: its height is what the negative `top` above cancels
   out, and a wrapped second line would leave part of it stuck on screen. */
.site-utility__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 0.5rem + 1.4vw, 2rem);
  min-height: var(--utility-h);
}
/* Группа прижата вправо своим margin, а не только `justify-content: space-between` у строки:
   ниже 1500 дескриптор скрывается, группа остаётся единственным потомком, и space-between
   уводит её к левому краю. */
.site-utility__group {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.2rem + 0.8vw, 1.25rem);
  margin-left: auto;
}
.site-utility__cabinet {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-utility__cabinet .icon { width: 0.9rem; height: 0.9rem; }
.site-utility__cabinet:hover { color: var(--color-link); }

/* Exchange rates: a trust signal in this niche, so the block names its source and date instead of
   floating as two bare numbers. Rendered only when a rate source is present. */
.site-rate {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  white-space: nowrap;
}
.site-rate__source { opacity: 0.55; }
.site-rate__value { font-weight: 700; }

/* Messenger links ---------------------------------------------------------- */
.site-msg {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.site-msg__title { opacity: 0.55; margin-right: var(--sp-1); white-space: nowrap; }
.site-msg__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  /* 36px in the slim utility row: above the WCAG 2.5.8 minimum of 24px. The copies inside the
     mobile panel restore the 44px comfort target. */
  min-height: 2.25rem;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-xs);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.site-msg__link .icon { width: 1.25rem; height: 1.25rem; }
.site-msg__link:hover { background: var(--surface-sky); color: var(--color-text-strong); }
.site-msg__link--primary { background: var(--surface-sky); font-weight: 700; }
.site-msg__link--primary:hover { background: var(--surface-sky-deep); }
/* Floating messenger disclosure -------------------------------------------
   Shared with chinatoday-ds/assets/css/ds.css. Native details stays usable without JavaScript. */
.messenger-widget {
  --messenger-edge: var(--sp-6);
  --messenger-size: 3.5rem;
  --messenger-gap: var(--sp-3);
  position: fixed;
  right: max(var(--messenger-edge), env(safe-area-inset-right));
  bottom: max(var(--messenger-edge), env(safe-area-inset-bottom));
  z-index: 40;
  width: min(19.75rem, calc(100% - 2 * var(--messenger-edge) - env(safe-area-inset-left) - env(safe-area-inset-right)));
  pointer-events: none;
}
.messenger-widget__trigger {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: max-content;
  min-width: 9.75rem;
  margin-left: auto;
  pointer-events: auto;
  height: var(--messenger-size);
  padding: 0 var(--sp-5);
  border: 1px solid var(--border-messenger-trigger);
  border-radius: var(--radius-sm);
  background: var(--surface-messenger-trigger);
  background-size: 150% 100%;
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-messenger-trigger);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-position var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.messenger-widget__trigger::-webkit-details-marker { display: none; }
.messenger-widget__trigger::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 2px solid var(--color-messenger-halo);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.messenger-widget__trigger::after {
  /* Hover shine sweep. Confined to the pill by border-radius, so no overflow clipping
     is needed and the expanding halo in ::before stays visible. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
  transition: background-position 0.6s var(--ease);
}
.messenger-widget__trigger:focus-visible {
  /* White inner ring + blue outer ring: readable on the blue gradient. */
  outline: 2px solid var(--ct-white);
  outline-offset: 2px;
  box-shadow: var(--shadow-messenger-trigger), 0 0 0 6px rgba(8, 117, 190, 0.5);
}
.messenger-widget__arrow { display: none; }
.messenger-widget__badge {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  display: grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.3rem;
  border: 2px solid var(--ct-white);
  border-radius: var(--radius-pill);
  background: var(--surface-messenger-badge);
  box-shadow: var(--shadow-messenger-badge);
  color: var(--ct-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
/* Badge is revealed by JS (data-badge-visible) after 15 s on the page. */
.messenger-widget:not([data-badge-visible]) .messenger-widget__badge { display: none; }
.messenger-widget__trigger .icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; }
.messenger-widget__trigger .messenger-widget__close { width: 1.5rem; height: 1.5rem; }
.messenger-widget__dot { fill: var(--color-messenger-detail); transform-box: fill-box; transform-origin: center; }
.messenger-widget__close,
.messenger-widget__label--open { display: none; }
.messenger-widget[open]:not([data-preview="true"]) .messenger-widget__chat,
.messenger-widget[open]:not([data-preview="true"]) .messenger-widget__label--closed { display: none; }
.messenger-widget[open]:not([data-preview="true"]) .messenger-widget__close,
.messenger-widget[open]:not([data-preview="true"]) .messenger-widget__label--open { display: block; }
.messenger-widget[open]:not([data-preview="true"]) .messenger-widget__trigger {
  /* Pinned open state reads as "close": neutral card surface instead of the call-to-action
     gradient. Scoped to non-preview: the hover preview keeps the trigger unchanged, because
     a gradient->card repaint cannot transition and flashed 150 ms after every pointerenter. */
  background: var(--surface-card);
  border-color: var(--border-soft);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-messenger-panel);
}
.messenger-widget[open] .messenger-widget__badge { display: none; }
.messenger-widget[open]::before {
  /* Keep the pointer inside the disclosure across the gap, even when the panel scrolls. */
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 100%;
  height: var(--messenger-gap);
  pointer-events: auto;
}
.messenger-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--messenger-gap));
  width: 100%;
  pointer-events: auto;
  max-height: calc(100vh - var(--messenger-size) - 2 * var(--messenger-edge) - var(--messenger-gap) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  max-height: calc(100dvh - var(--messenger-size) - 2 * var(--messenger-edge) - var(--messenger-gap) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-6) var(--sp-3) var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--color-text);
  box-shadow: var(--shadow-messenger-panel);
  transform-origin: bottom right;
}
.messenger-widget[open] .messenger-widget__panel { animation: messenger-reveal var(--duration-messenger-panel) var(--ease); }
.messenger-widget__intro { padding: 0 var(--sp-2) var(--sp-4); }
.messenger-widget__brand,
.messenger-widget__hint { color: var(--color-text); font-weight: 400; }
.messenger-widget__brand { margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
.messenger-widget__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-widget-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
}
.messenger-widget__hint { font-size: var(--fs-caption); }
.site-msg--widget { display: grid; gap: var(--sp-1); }
.site-msg--widget .site-msg__link {
  display: flex;
  width: 100%;
  min-height: 3.625rem;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 500;
}
.site-msg--widget .site-msg__link .icon { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; }
.site-msg--widget .site-msg__link::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  margin-left: auto;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
body:has(.site-header[data-open="true"]) .messenger-widget,
body:has(dialog[open]) .messenger-widget,
html.modal-lock .messenger-widget { visibility: hidden; pointer-events: none; }
/* The expanded deferment card owns the bottom edge: the widget is out until the card is closed,
   then appears collapsed and starts its attention cycle (app.js, CONV-29). display: none, not
   visibility, so the halo restarts on reveal. Only a card JavaScript can close is marked
   (parts/promo-banner.php): without it the card stays and the widget must stay reachable. */
body:has([data-promo-banner][data-promo-closable]:not([hidden])) .messenger-widget { display: none; }
@keyframes messenger-reveal {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes messenger-collapse {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}
@keyframes messenger-halo {
  0%, 18%, 100% { opacity: 0; transform: scale(1); }
  2% { opacity: 0.8; transform: scale(1); }
  16% { opacity: 0; transform: scale(1.12, 1.35); }
}
@keyframes messenger-dot-pulse {
  0%, 20%, 100% { transform: scale(1); opacity: 0.6; }
  6% { transform: scale(1.4); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* A short invitation, followed by a long pause. Interaction cancels it immediately. */
  .messenger-widget:not([open]):not(:hover):not(:focus-within) .messenger-widget__trigger::before {
    animation: messenger-halo var(--duration-messenger-attention) var(--ease) infinite;
  }
  /* Dots pulse in sequence within the same invitation window as the halo. */
  .messenger-widget:not([open]):not(:hover):not(:focus-within) .messenger-widget__trigger .messenger-widget__dot {
    animation: messenger-dot-pulse var(--duration-messenger-attention) var(--ease) infinite;
  }
  .messenger-widget__trigger .messenger-widget__dot:nth-of-type(2) { animation-delay: 0.12s; }
  .messenger-widget__trigger .messenger-widget__dot:nth-of-type(3) { animation-delay: 0.24s; }
}
@media (hover: hover) and (pointer: fine) {
  .messenger-widget__trigger:hover {
    background-position: 100% 50%;
    box-shadow: var(--shadow-messenger-trigger-hover);
    /* Scale only: a uniform grow keeps every hovered point inside the pill, while a
       translateY lift would move the pill out from under a low cursor and start a
       hover-loss/re-entry flicker loop. */
    transform: scale(1.03);
  }
  .messenger-widget__trigger:hover::after { background-position: -130% 0; }
  /* No chat->arrow hover morph: the JS hover preview opens the disclosure 150 ms
     after pointerenter, so a display-swapped icon flashed and flipped back, reading
     as a flicker before the panel appeared. */
}
@media (max-width: 640px) {
  .messenger-widget { --messenger-edge: var(--sp-4); }
  .messenger-widget__trigger { min-width: 0; width: var(--messenger-size); padding: 0; box-shadow: var(--shadow-messenger-trigger), var(--ring-messenger-mobile); }
  .messenger-widget .messenger-widget__label { display: none !important; }
}
@media (hover: none) and (max-width: 640px) {
  body:has(input:focus, textarea:focus, select:focus) .messenger-widget { visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .messenger-widget[open] .messenger-widget__panel { animation: none; }
  .messenger-widget__trigger,
  .site-msg--widget .site-msg__link { transition: none; }
}

/* Compact links keep their text available to screen readers. */
.site-msg--sticky { display: none; flex-shrink: 0; margin-left: auto; }
.site-msg--sticky .site-msg__link {
  justify-content: center;
  width: 2.25rem;
  padding: 0;
  gap: 0;
}
.site-header[data-stuck="true"] .site-msg--sticky { display: flex; }
.site-header--messengers[data-stuck="true"] .site-header__actions { margin-left: 0; }
.site-header--messengers[data-stuck="true"] .site-header__msg-max { display: none; }
/* Consultant messenger variant — shared with chinatoday-ds. */
.messenger-widget--consultant {
  --duration-messenger-attention: 6s;
  width: min(37.5rem, calc(100% - 2 * var(--messenger-edge) - env(safe-area-inset-left) - env(safe-area-inset-right)));
}
.messenger-widget--consultant .messenger-widget__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  padding: 0;
}
.messenger-widget__consultant {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-right: 1px solid var(--border-soft);
  background: var(--surface-messenger-consultant);
}
.messenger-widget__person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
}
.messenger-widget__portrait {
  flex: 0 0 6rem;
  width: 6rem;
  height: 7.5rem;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-md);
}
.messenger-widget__identity { min-width: 0; }
.messenger-widget__logo { display: block; width: 5.5rem; height: auto; }
.messenger-widget__name {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.25;
}
.messenger-widget__role { margin: 0; font-size: var(--fs-caption); line-height: 1.4; }
.messenger-widget--consultant .messenger-widget__intro { padding: 0; }
.messenger-widget--consultant .messenger-widget__title { max-width: 12em; }
.messenger-widget--consultant .messenger-widget__hint { max-width: 15em; line-height: 1.4; }
.messenger-widget--consultant .site-msg--widget {
  align-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.messenger-widget--consultant .site-msg--widget .site-msg__link { min-height: 3.875rem; }
@media (max-width: 640px) {
  .messenger-widget--consultant {
    width: min(23rem, calc(100% - 2 * var(--messenger-edge) - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  .messenger-widget--consultant .messenger-widget__panel { grid-template-columns: minmax(0, 1fr); }
  .messenger-widget__consultant {
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .messenger-widget__portrait { flex-basis: 4.5rem; width: 4.5rem; height: 5rem; }
  .messenger-widget__logo { width: 4.5rem; }
  .messenger-widget--consultant .messenger-widget__title,
  .messenger-widget--consultant .messenger-widget__hint { max-width: none; }
  .messenger-widget--consultant .site-msg--widget { gap: var(--sp-1); padding: var(--sp-3); }
  .messenger-widget--consultant .site-msg--widget .site-msg__link { min-height: 3.625rem; }
}
/* Main row ----------------------------------------------------------------- */
/* Positioned: the phone menu panel hangs from this row, not from the reserved header box, which the
   compact row with its own messenger line outgrows below 640px. */
.site-header__main {
  position: relative;
  background: var(--surface-page);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.site-header[data-stuck="true"] .site-header__main {
  border-bottom-color: var(--border-soft);
  box-shadow: 0 12px 24px -20px rgba(0, 0, 0, 0.35);
}
/* One flexible gap, not four: the actions group is pushed right and everything else hugs the logo.
   Spreading each control across its own grid track is what made the row read as loose islands on
   wide screens. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.75rem);
  padding-block: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem);
  transition: padding-block var(--duration) var(--ease);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
  margin-left: auto;
}
.site-header[data-stuck="true"] .site-header__inner { padding-block: var(--sp-2); }

.site-logo { display: block; color: var(--color-text); }
.site-logo .icon {
  width: clamp(7.5rem, 5rem + 4.4vw, 10.3rem);
  height: auto;
  transition: width var(--duration) var(--ease);
}
.site-header[data-stuck="true"] .site-logo .icon { width: clamp(6rem, 4.5rem + 2.4vw, 8rem); }
/* Logo symbol re-used at many sizes: the outer <svg> carries no viewBox, so fix its aspect here */
.site-logo .icon, .brand-mark__logo, .card__ghost, .benefit__logo, .faq-item__ghost, .hero__watermark, .warehouse__watermark, .footer__logo { aspect-ratio: 165 / 56; height: auto; }
.site-note {
  font-size: inherit;
  line-height: 1.1;
  letter-spacing: 0;
}
.site-note__flag { display: inline-block; width: 0.8125rem; height: 0.5rem; vertical-align: -1px; border-radius: 1px; }
.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem clamp(0.75rem, 0.4rem + 1.2vw, 1.75rem);
  justify-content: flex-start;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-link);
  font-size: var(--fs-caption);
  line-height: 1.1;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  padding: 0.35rem 0;
}
.site-nav__link:hover { color: var(--color-text); }
.site-nav__link[aria-current="page"] { color: var(--color-text); text-decoration: none; }
.site-phone {
  font-size: var(--fs-phone);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: font-size var(--duration) var(--ease);
}
.site-phone:hover { color: var(--color-link); }
.site-header[data-stuck="true"] .site-phone { font-size: var(--fs-body-lg); }
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  color: var(--color-text);
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon--close { display: none; }
.site-header[data-open="true"] .nav-toggle .icon--menu { display: none; }
.site-header[data-open="true"] .nav-toggle .icon--close { display: block; }

/* Второй уровень меню ------------------------------------------------------ */
.site-nav__item { position: relative; display: flex; align-items: center; }
/* Каретка обозначает вложенность на десктопе; кнопка-контрол появляется только ниже 1024. */
.site-nav__item--has-children > .site-nav__link::after {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}
.site-nav__toggle { display: none; }
.site-nav__sub {
  position: absolute;
  top: 100%;
  left: -0.6rem;
  z-index: 40;
  display: none;
  min-width: 15rem;
  padding: var(--sp-2);
  background: var(--surface-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 32px -20px rgba(0, 0, 0, 0.35);
}
/* Единственное min-width правило в файле: на тач-экране hover залипает, и подменю осталось бы
   открытым после ухода пальца, поэтому раскрытие по наведению живёт только на десктопе. */
@media (min-width: 1025px) {
  .site-nav__item--has-children:hover > .site-nav__sub,
  .site-nav__item--has-children:focus-within > .site-nav__sub { display: block; }
}
.site-nav__sublink {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  font-size: var(--fs-caption);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__sublink:hover { background: var(--surface-sky); color: var(--color-text-strong); }
.site-nav__sublink[aria-current="page"] { font-weight: 700; }

/* Only the accent item keeps an underline; ordinary navigation links have none.
   The second selector supports the nav-accent class on a WordPress menu item. */
.site-nav__link--accent,
.site-nav__list .nav-accent > .site-nav__link {
  gap: 0.35rem;
  padding-inline: 0;
  font-weight: 500;
  text-decoration: underline;
}
.site-nav__link--accent .icon,
.site-nav__list .nav-accent > .site-nav__link .icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-accent);
}

/* Controls that only exist below 1024, and panel-only copies of the utility content. */
.site-nav__cabinet,
.site-header__msg-max,
.site-header__phone-icon,
.site-msg--panel,
.site-msg__title--panel,
.site-nav__panel-rate { display: none; }

/* Landing pages render the main row only, so there is no utility row to pull up. */
.site-header--landing { --utility-h: 0rem; top: 0; }

/* Anchors must clear the sticky bar; without this every in-page link lands under it. */
:target { scroll-margin-top: 5.5rem; }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero { border: 1px solid var(--border-default); background: var(--surface-card); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  min-height: clamp(30rem, 20rem + 26vw, 50.3rem);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 1.3vw, 2.5rem);
  padding: var(--panel-pad-y) clamp(1.5rem, 1rem + 3.2vw, 5rem) var(--panel-pad-y) var(--panel-pad-x);
}
.kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: var(--fs-caption);
  line-height: 1.1;
}
.kicker__brand { color: var(--color-link); }
.kicker__spark { width: 1rem; height: 1rem; }
.page-hero__crumbs-row { display: flex; align-items: center; gap: 0.35rem; }
.kicker__line { position: relative; width: 3rem; height: 1px; background: currentColor; opacity: 0.6; }
.kicker__line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
/* Title size follows the headline length: --ct-title-len is the character count
   printed by blocks/hero.php, so a long headline shrinks instead of stacking lines. */
.hero__title {
  max-width: calc(0.21em * var(--ct-title-len, 24));
  font-size: clamp(2.75rem, calc(185vw / var(--ct-title-len, 24)), 5.75rem); /* 92 max, 44 min */
  text-wrap: balance;
}
.hero__lead { max-width: 15.5em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.hero__cta, .hero__consult { width: min(100%, 21rem); }
/* Secondary button: light card fill, icon badge on the left, no arrow. Reused wherever
   a lower-emphasis action needs to sit next to a primary (usually .btn--accent) button. */
.btn--secondary {
  justify-content: flex-start;
  gap: var(--sp-3);
  padding-left: var(--sp-2);
  background: var(--surface-card);
  color: var(--color-text-strong);
  font-weight: 400;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.09), 0 2px 4px rgba(15, 23, 42, 0.05);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}
.btn--secondary:hover {
  background: var(--surface-card);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16), 0 8px 16px -6px rgba(15, 23, 42, 0.12);
}
.btn__icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--surface-sky);
  color: var(--color-link);
}
.btn__icon-badge .icon { width: 1.25rem; height: 1.25rem; }
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  padding: clamp(2rem, 1rem + 3vw, 4rem) clamp(1rem, 0.5rem + 2vw, 3.5rem);
  background: var(--surface-sky-deep);
  background-image: var(--texture-dark);
}
.route-caption {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 3.6rem);
  font-size: var(--fs-xs);
  line-height: 1.1;
}
.route-caption__point { display: inline-flex; align-items: center; gap: 0.6rem; }
.route-caption__flag { width: 2.375rem; height: auto; border-radius: 2px; }
.route-caption__line { flex: 0 0 auto; width: clamp(3rem, 2rem + 4vw, 9.5rem); }
.route-caption__line::after { top: -3px; }
.hero__image {
  width: min(100%, 60rem);
  height: auto;
}
.hero__watermark { width: clamp(8rem, 6rem + 3vw, 12.7rem); height: auto; color: var(--color-text); }

/* ==========================================================================
   7. Priorities (numbered list)
   ========================================================================== */
.priority-list { margin-top: var(--head-gap); }
.priority-item {
  display: grid;
  grid-template-columns: clamp(3rem, 2rem + 2.5vw, 5.9rem) 1fr minmax(0, 23.6rem);
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding-block: clamp(1.25rem, 1rem + 1.2vw, 2.5rem);
  border-bottom: 1px solid var(--border-soft);
}
.priority-item:first-child { border-top: 1px solid var(--border-soft); }
.priority-item__num {
  font-size: var(--fs-display-sm);
  color: var(--color-text-faint);
  letter-spacing: -0.06em;
  line-height: 1;
}
.priority-item__text { font-size: var(--fs-display-sm); line-height: var(--lh-tight); }
.priority-item__media {
  width: 100%;
  aspect-ratio: 377 / 81;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.priority-item__aside { justify-self: end; width: 100%; }

/* ==========================================================================
   8. Calculator panel
   ========================================================================== */
.calc { padding: var(--panel-pad-y) var(--panel-pad-x); }
.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: center;
}
.calc__copy { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2.4rem); }
.calc__title { max-width: 7em; }
.calc__lead { max-width: 17em; }
.calc__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.75rem + 0.9vw, 1.7rem) clamp(1rem, 0.5rem + 2vw, 3.8rem);
}
.calc__form .btn { justify-self: stretch; }

/* Two-step form: without JS both steps are visible and the submit is the only button;
   the calc--stepped class appears only after the script takes over. */
.calc__progress {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  opacity: 0.65;
}
/* Segment bars mirror the step counter; they are decorative, so the markup keeps them
   aria-hidden and the script only toggles the active segment. */
.calc__bars { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.calc__bar {
  flex: 1 1 0;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  opacity: 0.25;
}
.calc__bar--active { background: var(--color-brand); opacity: 1; }
.calc__step {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: inherit;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.calc__step .field--wide,
.calc__step .calc__miss { grid-column: 1 / -1; }
/* Contacts step subheading: reads as the panel lead, not as a caption note. */
.calc__subtitle {
  grid-column: 1 / -1;
  margin: 0;
  max-width: 24em;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
}
.calc__rates,
.calc__checks { grid-column: 1 / -1; display: grid; gap: inherit; }
.calc__rates { grid-template-columns: 2fr 1fr 1fr; }
.calc__checks { grid-template-columns: 1fr 1fr; }
/* Channel picker: the quiz option pattern (quiz__option) with a channel icon; the checked state
   uses the same brand outline so both pickers read as one control family. */
.calc__channels {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
}
.calc__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h-md);
  padding: 0 var(--sp-3);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  cursor: pointer;
}
.calc__channel:hover { border-color: var(--color-brand); }
.calc__channel:has(input:checked) { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.calc__channel input { margin: 0; accent-color: var(--color-brand); }
.calc__channel .icon { display: block; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }
.calc__channel span { line-height: 1.1; }
/* Readonly rate inputs stay on the card surface: a colored strip inside the
   pill-shaped control reads as a glitch, not as a state. */
.calc__form .field__input[readonly] { background: transparent; }
.field--suggest { position: relative; }
.calc__miss {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  min-height: var(--control-h-lg);
  padding: var(--sp-3) clamp(1rem, 0.8rem + 0.9vw, 2rem);
  border-radius: var(--radius-pill);
  background: var(--chip-yellow);
  font-size: var(--fs-xs);
  line-height: 1.2;
}
.calc__miss[hidden] { display: none; }
.calc__miss .icon { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; opacity: 0.35; }
.calc__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
/* Icon-only prev keeps the lg row height of next/submit: a square button as tall as they are. */
.calc__nav .calc__prev {
  flex: 0 0 auto;
  width: var(--control-h-lg);
  min-height: var(--control-h-lg);
  padding: 0;
  justify-content: center;
}
.calc__nav .calc__prev .icon { width: 1.25rem; height: 1.25rem; }
/* Same flip as the carousel prev button: the sprite has only the forward arrow. */
.calc__prev .icon { transform: scaleX(-1); }
.calc__nav .calc__submit { flex: 1 1 auto; }
.calc:not(.calc--stepped) .calc__next,
.calc:not(.calc--stepped) .calc__prev { display: none; }

/* ==========================================================================
   9. Stages (buyout / white delivery cards)
   ========================================================================== */
.stages__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
  margin-top: var(--head-gap);
}
.stage-card { padding: var(--card-pad) 0 var(--card-pad); gap: 0; }
.stage-card__top {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2.5rem);
  padding-inline: var(--card-pad) var(--card-pad);
  padding-bottom: var(--sp-8);
}
.stage-card__illustration {
  width: clamp(12rem, 10rem + 8vw, 24.3rem);
  height: auto;
  margin-left: calc(-1 * var(--sp-8));
}
.stage-card__text { max-width: 35em; }
.stage-card__includes {
  display: grid;
  gap: var(--sp-4);
  padding: 0 var(--card-pad) 0;
}
.stage-card__includes h4 { font-size: var(--fs-body); }
.check-list { display: grid; gap: 0.6rem; max-width: 36em; }
.check-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.check-list .icon { width: 0.7rem; height: 0.7rem; margin-top: 0.3rem; opacity: var(--icon-muted-opacity); }
/* Label centered, arrow pinned to the right edge: on a wide stretched CTA
   space-between read as two detached elements instead of one button. */
.stage-card__cta {
  position: relative;
  justify-content: center;
  margin-top: var(--sp-8);
  align-self: flex-start;
}
.stage-card__cta .icon { position: absolute; right: var(--sp-6); }
.stage-card .card__ghost { top: var(--card-pad); }
/* Share each top-section track so illustration proportions and wrapped copy
   cannot shift headings or chips between cards. Keep includes and CTAs aligned.
   Stacked cards retain independent rows. */
@media (min-width: 1025px) {
  @supports (grid-template-rows: subgrid) {
    .stage-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
    .stage-card__top {
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
    .stage-card__top > * { align-self: start; }
    .stage-card__includes { grid-template-rows: auto 1fr auto; }
  }
}

/* ==========================================================================
   10. Routes
   ========================================================================== */
.routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
}
.routes__lead { margin-top: var(--section-head-gap); }
.routes__lead + .routes__grid { margin-top: var(--sp-4); }
.route-card { padding-top: clamp(1rem, 0.5rem + 1vw, 1.5rem); gap: var(--sp-4); }
.route-card__illustration {
  width: 90%;
  height: auto;
  margin: 0 auto var(--sp-4);
}
.route-card__title {
  font-size: var(--fs-display-md);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.route-card__link { text-decoration: none; }
.route-card__link:hover { color: var(--color-accent); }
.route-card__text { max-width: 17em; padding-bottom: var(--sp-6); }
.routes__cta {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 3.5rem);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
}
.routes__cta-line {
  position: relative;
  height: 1px;
  min-width: 1.5rem;
  background: var(--color-text);
  opacity: 0.6;
}
.routes__cta-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
/* Reveal left-to-right on scroll (added by app.js; visible without JS) */
.routes__cta-line.js-reveal {
  clip-path: inset(-6px 100% -6px 0);
  transition: clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.routes__cta-line.js-reveal.is-visible { clip-path: inset(-6px -6px -6px 0); }
@media (prefers-reduced-motion: reduce) {
  .routes__cta-line.js-reveal { transition: none; }
}

/* ==========================================================================
   10a. Route map: полоса остановок и схема маршрута во всю ширину
   ========================================================================== */
.route-map {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--section-head-gap);
}
.route-map__stops {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-inline: auto;
}
.route-map__stop {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
  font-weight: 700;
  white-space: nowrap;
}
.route-map__pin {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  line-height: 1;
}
/* Конечная остановка отмечена акцентом, как пункт назначения на самой схеме. */
.route-map__stop--last .route-map__pin { background: var(--color-accent); }
/* Соединитель — пунктир цвета маршрута на схеме; растягивается между пилюлями. */
.route-map__link {
  flex: 1;
  min-width: 2rem;
  border-top: 2px dashed var(--color-accent);
  opacity: 0.55;
}
.route-map__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-paper);
  box-shadow: var(--shadow-card-soft);
}
.route-map__image { width: 100%; height: auto; }


/* ==========================================================================
   11. Tariff panel
   ========================================================================== */
.tariff { padding: var(--panel-pad-y) var(--panel-pad-x); }
.tariff__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 35.6rem);
  gap: clamp(2rem, 1rem + 3vw, 6rem);
  align-items: start;
}
.tariff__copy { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2.4rem); }
.tariff__title { max-width: 10.1em; }
.tariff__text { font-size: var(--fs-body-lg); max-width: 43em; }
.tariff__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
  margin-top: var(--sp-4);
}
.tariff__actions .btn { min-width: min(100%, 32rem); }
.tariff__hint {
  display: flex;
  gap: var(--sp-4);
  max-width: 16rem;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.tariff__hint .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; opacity: 0.3; }
/* Proof element: real commercial proposal in the right column + compact
   checkmark list (hero__benefit style). The doc opens full-size in a lightbox. */
.tariff__side {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  /* Top edge of the proposal lines up with the brand mark above the h2. */
  margin-top: 0;
}
.tariff__proof-doc {
  position: relative;
  width: clamp(14rem, 11rem + 6vw, 19rem);
  padding: 0;
  border: 0;
  background: var(--surface-card);
  border-radius: var(--radius-md, 0.75rem);
  box-shadow: 0 1rem 3rem rgba(19, 41, 53, 0.18);
  transform: rotate(2deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: zoom-in;
}
.tariff__proof-doc:hover,
.tariff__proof-doc:focus-visible {
  transform: rotate(0deg) translateY(-0.25rem);
  box-shadow: 0 1.5rem 4rem rgba(19, 41, 53, 0.26);
}
.tariff__proof-doc:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tariff__proof-doc img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.tariff__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) clamp(1rem, 0.5rem + 2vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body);
}
.tariff__checks li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.tariff__checks .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  flex: 0 0 auto;
  color: var(--color-brand);
}
/* Lightbox: full-size КП on click */
.tariff-kp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(19, 41, 53, 0.55);
  backdrop-filter: blur(4px);
}
.tariff-kp-lightbox[hidden] { display: none; }
.tariff-kp-lightbox__img {
  max-width: min(28rem, 92vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35);
  cursor: zoom-out;
}
.benefit-list { display: grid; gap: var(--sp-5); }
.benefit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.8rem);
  min-height: 8.25rem;
  padding: var(--sp-8) clamp(1.25rem, 1rem + 1.2vw, 2.5rem);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
}
.benefit__icon { width: 1.875rem; height: 1.875rem; opacity: 0.08; }
.benefit__text { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.5rem); font-weight: 700; line-height: var(--lh-body); max-width: 14em; }
.benefit__logo { width: 4.6rem; height: auto; opacity: 0.2; }

/* ==========================================================================
   12. Services
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
}
.service-card { gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.35rem); }
/* «Похожие услуги»: ссылка на весь каталог справа от заголовка, как «Больше кейсов» у .cases__head. */
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-8) var(--grid-gap-lg);
}
.services__cta { justify-self: end; margin-top: calc(1rem + var(--section-head-gap)); }
@media (max-width: 1024px) {
  /* One row of three stays one row: a two-column grid would leave the third card alone. */
  .services__grid[data-related] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .services__head { grid-template-columns: 1fr; gap: var(--sp-4); }
  .services__cta { justify-self: start; margin-top: 0; }
  /* On a phone the related row scrolls sideways instead of stacking three tall cards. */
  .services__grid[data-related] {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--sp-2);
  }
  .services__grid[data-related] > .service-card { flex: 0 0 82%; scroll-snap-align: start; }
}
.service-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.service-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(51, 51, 51, 0.5);
}
.service-card__title a:hover { text-decoration-color: currentColor; }
.service-card .pill { align-self: flex-start; max-width: 100%; }
/* Pill font tracks the card width, not the viewport, so short prices stay on
   one line at any column count. Wrapping stays allowed: /uslugi/ carries
   prices like "300 $ в день + оплата перелёта и проживания", and a nowrap pill
   pushed the card and the page past the viewport (114px scroll at 375px). */
.service-card .pill { white-space: normal; text-wrap: balance; line-height: 1.1; }
@supports (container-type: inline-size) {
  .service-card { container-type: inline-size; }
  .service-card .pill { font-size: clamp(1.125rem, 8cqw, 2.5rem); }
}
.service-card__text { max-width: 17em; }
.service-card__text--wide { max-width: 20em; }
/* Features stack below the text on their own full-width row (subgrid row 5),
   never beside it: text and list side by side came from both sharing grid-row 4,
   which pushed the list into an implicit second column. */
.service-card__features { margin: 0; max-width: none; }
/* A lone last card of an unfiltered three-column grid spans the row instead of leaving two
   empty slots; its feature list flows into two columns to use the width. */
@media (min-width: 1025px) {
  .services__grid:not([data-service-grid]) > .service-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .services__grid:not([data-service-grid]) > .service-card:last-child:nth-child(3n + 1) .service-card__features { columns: 2; column-gap: var(--grid-gap); }
}
.service-card__when { margin-top: var(--sp-3); }
.service-card__when > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  color: var(--color-link);
  font-size: 0.9em;
}
.service-card__when > summary::-webkit-details-marker { display: none; }
.service-card__when > summary .icon { width: 0.9rem; height: 0.9rem; transition: transform var(--duration) var(--ease); }
.service-card__when[open] > summary .icon { transform: rotate(180deg); }
.service-card__when .check-list { margin-top: var(--sp-3); max-width: 22em; }

/* ==========================================================================
   13. Account (личный кабинет)
   ========================================================================== */
.account__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-8) var(--grid-gap-lg);
}
.account__head .section-head { max-width: 46rem; }
/* Align the CTA top edge with the section title, not the brand mark above it
   (brand-mark row height = 1rem spark + section-head gap) */
.account__head .btn { margin-top: calc(1rem + var(--section-head-gap)); }
.account__lead { max-width: 28em; margin-top: var(--sp-6); }
.account__checks { margin-top: var(--sp-6); gap: var(--sp-4); }
.account__checks .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--color-brand); opacity: 1; }
.account__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-lg);
  margin-top: var(--head-gap);
}
.account-card { gap: var(--sp-4); min-height: clamp(12rem, 8rem + 6vw, 15.25rem); }
.account-card__shot {
  width: min(100%, 36rem);
  margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 3.5rem);
  padding: var(--sp-5) var(--sp-8);
  background: var(--surface-card);
  border-radius: var(--radius-md);
}
.account-card__shot img { width: 100%; height: auto; }
.account-card__title { font-size: var(--fs-display-sm); line-height: var(--lh-display); text-wrap: balance; }
.account-card__text { max-width: 18em; }
.account-card__text--wide { max-width: 30em; }

/* ==========================================================================
   14. Warehouse panel
   ========================================================================== */
.warehouse__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(26rem, 16rem + 22vw, 45.25rem);
}
.warehouse__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 1.6vw, 3.2rem);
  padding: var(--panel-pad-y) clamp(1.5rem, 1rem + 2vw, 3.5rem) var(--panel-pad-y) var(--panel-pad-x);
}
.warehouse__title { max-width: 5.6em; }
.warehouse__lead { max-width: 32em; }
.warehouse__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}
.stat { display: grid; gap: var(--sp-3); align-content: start; }
.stat .icon { width: 1.5rem; height: 1.5rem; opacity: 0.11; }
.stat__value {
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.stat__caption { font-size: var(--fs-body); line-height: 1.2; max-width: 11.5em; }

/* Полоса чисел блока stats (blocks/stats.php): раньше блоком никто не пользовался, поэтому
   у него не было собственной сетки — .stat выпадал в столбец по умолчанию — и своего отступа:
   как самостоятельная панель верхнего уровня (а не вложенный .warehouse__copy) она печаталась
   без padding, и текст первого .stat упирался в край панели. */
.stats-panel { padding: var(--panel-pad-y) var(--panel-pad-x); display: grid; gap: var(--sp-6); }
.prose-panel { padding: var(--panel-pad-y) var(--panel-pad-x); }
.stats-panel__kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.stats-panel__kicker::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}
.stats-panel__text { max-width: 42em; }
.stats-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
/* Число колонок равно data-columns (число items блока, максимум 4), поэтому элементы
   делят панель поровну и на всю ширину: три показателя занимают по 1/3 ряда, а не 3/4. */
.stats-panel__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-panel__grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-panel__grid[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1024px) {
  .stats-panel__grid[data-columns="3"],
  .stats-panel__grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stats-panel__grid[data-columns] { grid-template-columns: minmax(0, 1fr); }
}

/* Deferment commission calculator ----------------------------------------- */
.deferment-calc {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
}
.deferment-calc__title { max-width: 24em; }
.deferment-calc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 1.5vw, 3rem) clamp(1rem, 0.5rem + 2vw, 3.8rem);
  align-items: end;
}
.deferment-calc__grid select.field__input { color: inherit; }
.deferment-calc__result {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-soft);
}
.deferment-calc__result:focus-within { border-color: var(--color-accent-hover); }
.deferment-calc__result .field__input {
  color: var(--color-text-inverse);
  -webkit-text-fill-color: var(--color-text-inverse);
  font-weight: 700;
}
.deferment-calc__action { display: grid; gap: 0.5rem; align-self: end; }
.deferment-calc__hint {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.1;
}
.deferment-calc__submit { width: 100%; justify-self: stretch; }
@media (max-width: 640px) {
  .deferment-calc__grid { grid-template-columns: minmax(0, 1fr); }
}
.warehouse__media { position: relative; min-height: 18rem; }
.warehouse__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.warehouse__watermark {
  position: absolute;
  right: clamp(1.5rem, 1rem + 4vw, 8.2rem);
  bottom: clamp(1.5rem, 1rem + 2.5vw, 5.4rem);
  width: clamp(8rem, 6rem + 3vw, 12.7rem);
  height: auto;
  color: var(--color-text-inverse);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}
.warehouse__media--composed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-3);
  background: var(--surface-card);
}
.warehouse__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.warehouse__gallery-photo {
  width: 100%;
  aspect-ratio: 337 / 225;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.warehouse__video { position: relative; flex: 1; min-height: 12rem; border-radius: var(--radius-sm); overflow: hidden; }
.warehouse__video-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.warehouse__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.warehouse__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-text-inverse);
  color: var(--color-brand, var(--color-text));
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease;
}
.warehouse__video-play:hover,
.warehouse__video-play:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.warehouse__video-play-icon { margin-left: 0.2rem; }
.warehouse__video.is-revealed .warehouse__video-poster,
.warehouse__video.is-revealed .warehouse__video-play {
  display: none;
}

/* ==========================================================================
   15. Cases
   ========================================================================== */
.cases__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-8) var(--grid-gap-lg);
}
/* Align the CTA top edge with the section title, not the brand mark above it
   (brand-mark row height = 1rem spark + section-head gap). */
.cases__cta {
  justify-self: end;
  margin-top: calc(1rem + var(--section-head-gap));
}
/* The optional lead sits under the title across the row: in the auto column it squeezed the title. */
.cases__text { grid-column: 1 / -1; grid-row: 2; max-width: 48rem; margin: 0; }
.cases__head .cases__cta { grid-column: 2; grid-row: 1; }
.cases__actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-5);
  margin-top: calc(1rem + var(--section-head-gap));
}
.cases__actions .cases__cta { margin-top: 0; }
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
}
.cases__grid.cases__grid--single-row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 32%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: var(--sp-3);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--border-default) transparent;
  scrollbar-width: thin;
}
.cases__grid--single-row::-webkit-scrollbar { height: 0.5rem; }
.cases__grid--single-row::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-pill);
}
.cases__grid--single-row > .case-card { min-width: 0; scroll-snap-align: start; }
.cases__grid.cases__grid--carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cases__grid--carousel::-webkit-scrollbar { display: none; }
.cases__grid--carousel > .case-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(18rem, 0.88fr);
  grid-template-areas: "body media";
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
}
.cases__grid--carousel .case-card__body { grid-area: body; }
.cases__grid--carousel .case-card__media {
  grid-area: media;
  min-width: 0;
  aspect-ratio: auto;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.cases__grid--carousel .case-card__title,
.cases__grid--carousel .case-card__text,
.cases__grid--carousel .case-card__list { max-width: none; }
/* Four cases read as a 2×2 grid rather than a row of three with one left over. */
@media (min-width: 1025px) {
  .cases__grid:not(.cases__grid--single-row):not(.cases__grid--carousel):has(> .case-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.case-card { padding: 0; }
/* The illustration is absolutely positioned: percentage heights of in-flow children do not resolve
   against an aspect-ratio box in every engine (Safari inflated the box to the image's intrinsic
   height), while an absolutely positioned child always measures against the laid-out box. */
.case-card__media {
  position: relative;
  aspect-ratio: 491 / 285;
  overflow: hidden;
  background: var(--surface-sky);
  background-image: var(--texture-dark);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.case-card__media img {
  position: absolute;
  inset: 4% 8%;
  width: 84%;
  height: 92%;
  object-fit: contain;
  object-position: center;
}
.case-card__media--wide img { inset: 10% 10%; width: 80%; height: 80%; }
.case-card__media--photo { background: var(--surface-sand); }
.case-card__media--photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Seven or more cases: a lone last card spans the row as a horizontal card, not an orphan tile. */
@media (min-width: 1025px) {
  .cases__grid:not(.cases__grid--single-row):not(.cases__grid--carousel) > .case-card:nth-child(n + 7):last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .cases__grid:not(.cases__grid--single-row):not(.cases__grid--carousel) > .case-card:nth-child(n + 7):last-child:nth-child(3n + 1) .case-card__media {
    aspect-ratio: auto;
    min-height: 100%;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }
  .cases__grid:not(.cases__grid--single-row):not(.cases__grid--carousel) > .case-card:nth-child(n + 7):last-child:nth-child(3n + 1) .case-card__body { grid-column: span 2; }
}
.case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(1rem, 0.75rem + 0.9vw, 1.6rem);
  padding: clamp(1.5rem, 1rem + 1.2vw, 2rem) calc(var(--card-pad) * 0.7) var(--card-pad) var(--card-pad);
}
.case-card__body .chip { align-self: flex-start; }
.case-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-tight); max-width: 13em; text-wrap: balance; }
.case-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(51, 51, 51, 0.5);
}
.case-card__title a:hover { text-decoration-color: currentColor; }
.case-card__text { max-width: 23em; }
.case-card__list-title { font-size: var(--fs-sm); font-weight: 700; }
.case-card__list { max-width: 23em; }
.case-card__cta {
  position: relative;
  align-self: stretch;
  justify-content: center;
  margin-top: auto;
}
.case-card__cta .icon { position: absolute; right: clamp(1.25rem, 1rem + 0.9vw, 2.125rem); }

/* ==========================================================================
   16. Reviews carousel
   ========================================================================== */
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
}
.carousel-controls { display: flex; gap: var(--sp-5); }
.carousel-btn {
  width: 2.125rem;
  height: 2.125rem;
  color: var(--color-text);
  transition: color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.carousel-btn .icon { width: 100%; height: 100%; }
.carousel-btn:hover { color: var(--color-accent); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.carousel-btn--prev .icon { transform: scaleX(-1); }
.reviews__track {
  display: flex;
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 calc((100% - var(--grid-gap) * 2) / 3);
  gap: clamp(1rem, 0.75rem + 0.9vw, 1.6rem);
  min-height: clamp(20rem, 15rem + 8vw, 29.8rem);
  scroll-snap-align: start;
}
.review-card--course {
  align-self: flex-start;
  min-height: 0;
}
.review-card__author {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "photo identity" "photo stars";
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  align-items: center;
}
.review-card__photo {
  grid-area: photo;
  width: clamp(2.75rem, 2.2rem + 1vw, 3.5rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.review-card__photo--monogram {
  display: grid;
  place-items: center;
  background: var(--surface-sky);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--color-text-strong);
}
.review-card__identity { grid-area: identity; display: grid; gap: 0.125rem; }
.review-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}
.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  opacity: 0.65;
}
.review-card__ya {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.review-card__stars {
  grid-area: stars;
  display: inline-flex;
  gap: 0.15rem;
  color: var(--color-star);
}
.review-card__stars .icon { width: 1rem; height: 1rem; }
.review-card__quote { font-size: var(--fs-body-lg); max-width: 19em; }
.review-card__toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.review-card__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.review-card__photos { display: flex; gap: var(--sp-3); }
.review-card__photos img {
  width: clamp(5rem, 4rem + 3vw, 7.5rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  object-fit: cover;
}
.review-card__cta { align-self: stretch; justify-content: center; margin-top: auto; width: 100%; }

.reviews__ratings {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--sp-4);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.75rem);
}
.reviews__ratings-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  grid-column: 1 / -1;
}
.rating-badge {
  display: flex;
  min-height: 6.5rem;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-sand);
  border-radius: 1rem;
  background: var(--surface-card);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease);
}
.rating-badge:hover { border-color: var(--color-accent); }
.rating-badge__name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: var(--lh-tight);
}
.rating-badge__logo { width: auto; height: 1.375rem; max-width: 7rem; object-fit: contain; }
.rating-badge__logo--yandex { width: 1.375rem; }
.rating-badge__meta { display: flex; align-items: center; gap: var(--sp-3); }
.rating-badge__stars {
  position: relative;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--ct-sand-line);
}
.rating-badge__stars::before { content: "★★★★★"; }
.rating-badge__stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-star);
}
.rating-badge__stars-fill--90 { width: 90%; }
.rating-badge__stars-fill--94 { width: 94%; }
.rating-badge__stars-fill--100 { width: 100%; }
.rating-badge__count { font-size: var(--fs-caption); opacity: 0.65; text-decoration: none; }

@media (max-width: 1199px) {
  .reviews__ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews__ratings-title { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
  .reviews__ratings { grid-template-columns: 1fr; }
  .reviews__ratings-title { grid-column: auto; }
}

/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq__list { margin-top: var(--head-gap); }
.faq-item {
  --faq-x: clamp(1rem, 0.5rem + 1.2vw, 2rem);
  --faq-gap: clamp(1rem, 0.5rem + 2.7vw, 4.4rem);
  border-bottom: 1px solid var(--border-soft);
}
.faq-item__summary {
  display: grid;
  grid-template-columns: 1.5rem 1fr 1.8125rem;
  align-items: center;
  gap: var(--faq-gap);
  padding: clamp(1.5rem, 1rem + 1.6vw, 3.5rem) var(--faq-x);
  cursor: pointer;
}
.faq-item__summary .icon { width: 100%; height: auto; aspect-ratio: 1; opacity: 0.2; }
.faq-item__question {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-tight);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(51, 51, 51, 0.5);
}
.faq-item__summary:hover .faq-item__question { text-decoration-color: currentColor; }
.faq-item__chevron { transition: transform var(--duration) var(--ease); opacity: 1 !important; }
.faq-item[open] {
  position: relative;
  background: var(--surface-paper);
  background-image: var(--texture-dark);
  border-radius: var(--radius-xl);
  border-bottom-color: transparent;
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); opacity: 0.2 !important; }
.faq-item[open] .faq-item__question { text-decoration: none; }
.faq-item__body {
  padding: 0 calc(var(--faq-x) + 1.8125rem + var(--faq-gap)) clamp(1.5rem, 1rem + 1.6vw, 3.5rem) calc(var(--faq-x) + 1.5rem + var(--faq-gap));
  margin-top: calc(-1 * clamp(0.5rem, 0.25rem + 0.6vw, 1.2rem));
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  max-width: 66em;
}
.faq-item__body p + p { margin-top: var(--sp-3); }
.faq-item__body ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-left: 1.2em; list-style: disc; }
.faq-item__ghost {
  position: absolute;
  top: clamp(1.5rem, 1rem + 1.6vw, 3.5rem);
  right: calc(var(--faq-x) + 1.8125rem + var(--faq-gap) + 5rem);
  width: 8.2rem;
  height: auto;
  opacity: 0.2;
  pointer-events: none;
}

/* ==========================================================================
   18. Consultation panel
   ========================================================================== */
.consult__grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}
.consult__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 1rem + 1vw, 2.4rem);
  padding: var(--panel-pad-y) clamp(1.5rem, 1rem + 2vw, 3.5rem) var(--panel-pad-y) var(--panel-pad-x);
}
.consult__title { max-width: 12em; }
.consult__badge { align-self: flex-start; font-family: var(--font-body); }
.consult__text { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.375rem); }
.consult__text a[href^="tel:"] { white-space: nowrap; text-decoration: none; }
.consult .site-msg.consult__msg {
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: calc(var(--sp-1) * -1);
}
.consult .site-msg.consult__msg li { flex: 1 1 0; }
.consult .site-msg.consult__msg .site-msg__link {
  background: var(--surface-card);
  min-height: 2.75rem;
  width: 100%;
  justify-content: center;
}
.consult .site-msg.consult__msg .site-msg__link:hover { background: var(--surface-sky-deep); }
.consult__form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 0.75rem + 0.9vw, 1.5rem);
  padding: var(--panel-pad-y) clamp(1.5rem, 1rem + 2vw, 4rem) var(--panel-pad-y) clamp(1.5rem, 1rem + 2.5vw, 5rem);
  background: var(--surface-sky);
  background-image: var(--texture-dark);
}
.consult__form-title {
  font-size: var(--fs-h4);
  font-weight: 700;
}
.consult__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.75rem + 0.9vw, 1.7rem) clamp(1rem, 0.5rem + 1.5vw, 2.7rem);
  width: 100%;
}
.consult__form .field--wide { grid-column: 1 / -1; }
.consult__form .btn { grid-column: 1 / -1; justify-self: stretch; padding-inline: var(--sp-5); }
.consult__privacy { grid-column: 1 / -1; }
.form-status { grid-column: 1 / -1; font-size: var(--fs-caption); }
.form-status:empty { display: none; }

/* Пример расчёта: форма остаётся в консульт__copy слева, справа — крупный пример
   коммерческого предложения (blocks/lead-form.php, аргумент 'example'). */
.consult--example .consult__copy { justify-content: flex-start; gap: clamp(1rem, 0.8rem + 0.9vw, 1.5rem); }
.consult__example { align-items: center; justify-content: center; }
.consult--visual .consult__copy { justify-content: flex-start; }
.consult__visual { overflow: hidden; padding: 0; }
.consult__visual-image {
  width: 100%;
  height: 100%;
  min-height: clamp(24rem, 38vw, 38rem);
  object-fit: cover;
}

.offer-preview {
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: var(--fs-caption);
}
.offer-preview__doc-title { font-size: var(--fs-body); font-weight: 700; }
.offer-preview__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  padding-bottom: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  border-bottom: 1px solid var(--border-soft);
}
.offer-preview__rates { display: grid; gap: 0.35rem; align-content: start; }
.offer-preview__brand { display: grid; gap: 0.35rem; justify-items: end; text-align: right; align-content: start; }
.offer-preview__logo { color: var(--color-text); opacity: 0.6; }
.offer-preview__contact { color: inherit; text-decoration: none; }
.offer-preview__contact:hover { text-decoration: underline; }
.offer-preview__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 1rem;
}
.offer-preview__row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.offer-preview__row > :last-child { text-align: right; white-space: nowrap; }
.offer-preview__row--strong { font-weight: 700; }
.offer-preview__section { display: grid; gap: 0.4rem; }
.offer-preview__section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--surface-sand);
  margin: 0 calc(-1 * clamp(1.25rem, 1rem + 1vw, 1.75rem));
  padding: 0.4rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.offer-preview__grand-total {
  font-size: var(--fs-body);
  font-weight: 700;
  padding-top: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  border-top: 1px solid var(--border-soft);
}
.offer-preview__meta { color: var(--color-text); opacity: 0.65; }
/* Phone: rates and the contact block no longer share a row — side by side they left each a
   ~120px column and the phone number ran over the dollar rate. */
@media (max-width: 640px) {
  .offer-preview__header { grid-template-columns: minmax(0, 1fr); }
  .offer-preview__brand { grid-row: 1; justify-items: start; text-align: left; }
}

/* ==========================================================================
   19. Resources
   ========================================================================== */
.resources__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.2vw, 2.2rem);
  margin-top: var(--head-gap);
}
.resources__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resource-card { gap: clamp(1rem, 0.75rem + 0.9vw, 1.6rem); min-height: clamp(18rem, 14rem + 6vw, 25rem); padding-right: calc(var(--card-pad) * 0.6); transition: background-color 0.25s ease, border-color 0.25s ease; }
.resource-card:hover { background: var(--surface-sand); background-image: var(--texture-dark); border-color: transparent; }
.resource-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-body); max-width: 8em; text-wrap: balance; }
.resource-card__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(51, 51, 51, 0.5);
}
.resource-card__title a:hover { text-decoration-color: currentColor; }
.resource-card__text { max-width: 16em; }
/* Label centered, arrow pinned to the right edge like on stage and case cards:
   short CTA labels («Справочник», «Курс») with the centered label+arrow group
   read as an arrow lost mid-button instead of sitting at the right side. */
.resource-card__cta { position: relative; align-self: stretch; justify-content: center; margin-top: auto; width: 100%; }
.resource-card__cta .icon { position: absolute; right: var(--sp-6); }

/* ==========================================================================
   20. Footer
   ========================================================================== */
.site-footer {
  margin-top: clamp(3rem, 2rem + 4vw, 7.5rem);
  padding-block: clamp(3rem, 2rem + 3.5vw, 6.5rem) clamp(1.5rem, 1rem + 1.6vw, 3rem);
  background: var(--surface-dark);
  background-image: var(--texture-light);
  color: var(--color-text-inverse);
}
.site-footer a { color: var(--color-link); text-decoration: none; }
.site-footer a:hover { color: var(--color-text-inverse); text-decoration: underline; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
  gap: var(--sp-10) clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
.footer__brand { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2.2rem); align-content: start; }
.footer__logo { width: clamp(11rem, 9rem + 4vw, 20.2rem); height: auto; color: var(--color-text-inverse); }
.footer__tagline { max-width: 24em; }
.footer__brand .btn { justify-self: start; color: var(--color-text-inverse); }
.footer__brand .btn:hover { color: var(--color-text-inverse); text-decoration: none; }
.footer__col { display: grid; gap: var(--sp-4); align-content: start; }
.footer__heading { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-2); }
.footer__col a { font-size: var(--fs-caption); line-height: 1.2; }
.footer__phone { font-size: var(--fs-phone); line-height: 1; color: var(--color-text-inverse) !important; }
.footer__address { font-size: var(--fs-caption); max-width: 15em; }
.footer__legal { font-size: var(--fs-xs); max-width: 20em; opacity: 0.85; }
.footer__cabinet { display: grid; gap: var(--sp-4); max-width: 11rem; align-content: start; }
.footer__cabinet .btn { color: var(--color-text-inverse); }
.footer__cabinet .btn:hover { text-decoration: none; }
.footer__cabinet p { font-size: var(--fs-xs); line-height: 1.25; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-8);
  margin-top: clamp(2.5rem, 2rem + 3vw, 6rem);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
}
.footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

/* ==========================================================================
   21. Responsive rules
   Breakpoints: 1500 (descriptor drops out of the utility row), 1200, 1024 (two-column collapse
   and the mobile header), 640 (single column, phone becomes an icon).
   ========================================================================== */
/* Below 1500 the descriptor no longer fits next to rates, messengers and the cabinet without
   pushing the utility row onto a second line, and that row's height has to stay predictable —
   it is what the header's negative `top` cancels out. */
@media (max-width: 1500px) {
  .site-note { display: none; }
}

@media (min-width: 1201px) {
  /* Doc sits a bit lower; the checklist's bottom edge lines up with the CTA button's bottom edge. */
  .tariff__grid { align-items: stretch; }
  .tariff__copy { align-content: start; }
  .tariff__side { align-content: space-between; padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
}

@media (max-width: 1200px) {
  .resources__grid, .resources__grid[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tariff__grid { grid-template-columns: 1fr; }
  .tariff__side { margin-top: 0; }
  .benefit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefit { min-height: 0; }
}

@media (max-width: 1024px) {
  /* No utility row here, so there is nothing to pull up: the header pins at the very top. */
  .site-header { --utility-h: 0rem; top: 0; }
  .site-utility { display: none; }
  .site-msg--sticky .site-msg__link { width: 2.75rem; min-height: 2.75rem; }
  .nav-toggle { display: inline-flex; }
  /* Hangs from .site-header__main: +1px clears the row's bottom border, as when the header box was
     the containing block. */
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-8);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.2);
  }
  .site-header[data-open="true"] .site-nav { display: block; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .site-nav__link { font-size: var(--fs-body-lg); padding: var(--sp-2) 0; }
  .site-nav__cabinet { display: inline-flex; margin-top: var(--sp-4); }
  .site-header__cta { display: none; }
  /* Второй уровень: аккордеон вместо выпадающей панели. */
  /* Ряд занимает всю ширину панели, поэтому кнопки выстраиваются в один столбец справа,
     а не по ragged-краю подписей разной длины. */
  .site-nav__item--has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
  }
  .site-nav__item--has-children > .site-nav__link::after { display: none; }
  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: calc(var(--sp-2) * -1);
    border: 0;
    background: none;
    color: var(--color-text);
  }
  .site-nav__toggle .icon { width: 1.5rem; height: 1.5rem; transition: transform var(--duration) var(--ease); }
  .site-nav__item[data-open="true"] > .site-nav__toggle .icon { transform: rotate(180deg); }
  .site-nav__sub {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    padding: 0 0 var(--sp-2) var(--sp-4);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-nav__item[data-open="true"] > .site-nav__sub { display: block; }
  .site-nav__sublink { font-size: var(--fs-body); padding: var(--sp-2) 0; white-space: normal; }
  .site-phone { font-size: var(--fs-body-lg); }

  /* Three actions in the mobile row: phone, MAX, menu. */
  .site-header__msg-max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xs);
    background: var(--surface-sky);
    color: var(--color-text-strong);
  }
  .site-header__msg-max .icon { width: 1.5rem; height: 1.5rem; }

  /* Utility content that has nowhere else to go moves into the open panel. */
  .site-msg__title--panel {
    display: block;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-xs);
    opacity: 0.55;
  }
  .site-msg--panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    font-size: var(--fs-body);
  }
  .site-msg--panel .site-msg__link { min-height: 2.75rem; padding-inline: var(--sp-3); }
  .site-nav__panel-rate { display: block; margin-top: var(--sp-4); font-size: var(--fs-xs); opacity: 0.7; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: var(--panel-pad-y) var(--panel-pad-x); }
  .calc__grid { grid-template-columns: 1fr; }
  .stages__grid { grid-template-columns: 1fr; }
  .routes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account__head { grid-template-columns: 1fr; }
  .cases__head { grid-template-columns: 1fr; }
  .cases__cta { margin-top: 0; justify-self: start; }
  .cases__head .cases__cta { grid-column: 1; grid-row: auto; }
  .cases__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 0; }
  .cases__text { grid-row: auto; }
  .warehouse__grid { grid-template-columns: 1fr; }
  .warehouse__media { min-height: 22rem; }
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases__grid.cases__grid--single-row { grid-template-columns: none; grid-auto-columns: 48%; }
  .cases__grid:not(.cases__grid--single-row):not(.cases__grid--carousel) > .case-card:nth-child(n + 7):last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .review-card { flex-basis: calc((100% - var(--grid-gap)) / 2); }
  .consult__grid { grid-template-columns: 1fr; }
  .consult__copy { padding: var(--panel-pad-y) var(--panel-pad-x); }
  .consult__form-wrap { padding: var(--panel-pad-y) var(--panel-pad-x); }
  .consult__visual { padding: 0; }
  .consult__visual-image { min-height: 22rem; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cabinet { max-width: none; }
  .priority-item { grid-template-columns: clamp(3rem, 2rem + 2.5vw, 5.9rem) 1fr; }
  .priority-item__aside, .priority-item__media { grid-column: 2; }
  .priority-item__media { max-width: 30rem; }
}

@media (max-width: 768px) {
  .routes__grid { grid-template-columns: 1fr; }
  .routes__cta { grid-template-columns: 1fr; }
  .routes__cta-line { display: none; }
  .routes__cta .btn { justify-self: stretch; }
  .cases__grid { grid-template-columns: 1fr; }
  .cases__grid.cases__grid--single-row { grid-template-columns: none; grid-auto-columns: 86%; }
  .cases__grid--carousel > .case-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "body";
  }
  .cases__grid--carousel .case-card__media {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .account__grid { grid-template-columns: 1fr; }
  .benefit-list { grid-template-columns: 1fr; }
  .warehouse__stats { grid-template-columns: 1fr; gap: var(--sp-5); }
  .stat { grid-template-columns: 1.5rem auto 1fr; align-items: baseline; gap: var(--sp-3) var(--sp-4); }
  .stat .icon { align-self: center; }
  .faq-item__summary { grid-template-columns: 1.25rem 1fr 1.5rem; }
  .faq-item__ghost { display: none; }
  .faq-item__body { padding-left: calc(var(--faq-x) + 1.25rem + var(--faq-gap)); padding-right: var(--faq-x); }
}

@media (max-width: 640px) {
  .consult__visual-image { min-height: 16rem; }

  /* FAQ: the question in a 26px display face beside a decorative chat icon took three to four
     lines per item and the list ran three screens. The icon column goes, the question drops to
     the lead size, the answer starts at the question's left edge. */
  .faq-item { --faq-x: var(--sp-4); --faq-gap: var(--sp-3); }
  .faq-item__summary { grid-template-columns: minmax(0, 1fr) 1.5rem; padding-block: var(--sp-4); }
  .faq-item__summary > .icon:first-child { display: none; }
  .faq-item__question { font-size: 1.25rem; }
  .faq-item__body { margin-top: 0; padding: 0 var(--faq-x) var(--sp-5); font-size: var(--fs-body); }

  /* Service catalogue: a price pill sized by the card width (8cqw ≈ 26px) and card padding of
     the desktop grid made eight services three screens. Smaller pill and padding, same content. */
  .services__grid { gap: var(--sp-3); }
  .service-card { gap: var(--sp-3); padding: var(--sp-5); }
  .service-card__title { font-size: 1.25rem; }
  .service-card .pill { min-height: 2.25rem; padding: 0.35em 0.85em; font-size: 1.125rem; }
  .service-card__text,
  .service-card__text--wide { max-width: none; }

  /* Section heads with a button: the button's desktop offset (it lines up with the h2 beside it)
     left a 70px hole under the lead once the head is one column. */
  .account__head,
  .cases__head { gap: var(--sp-5); }
  .account__head .btn { margin-top: 0; }

  /* Account: the interface thumbnails are unreadable at phone width and each took ~130px; the
     four cards keep title and text. */
  .account__grid { gap: var(--sp-3); }
  .account-card { gap: var(--sp-2); min-height: 0; padding: var(--sp-5); }
  .account-card__shot { display: none; }
  .account-card__title { font-size: 1.375rem; }
  .account-card__text,
  .account-card__text--wide { max-width: none; }

  /* Routes: the vehicle art moves beside the term and the title instead of a 200px stage above. */
  .routes__grid { gap: var(--sp-3); }
  .route-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-5);
  }
  .route-card > * { grid-column: 1; }
  .route-card > .route-card__illustration { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
  .route-card > .pill { justify-self: start; }
  .route-card__title { font-size: 1.75rem; }
  .route-card > .route-card__text { grid-column: 1 / -1; max-width: none; padding-bottom: 0; }

  /* Numbers (warehouse, stats-panel): value and caption share a line while they fit, otherwise
     the caption wraps under the value. The fixed three-track row (icon, auto, 1fr) gave a long
     value like «до 7 дней» the width and pushed the caption 30–40px out of the panel at 320px. */
  .stat {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem var(--sp-3);
    padding-left: 2.25rem;
  }
  .stat .icon { position: absolute; top: 0.4em; left: 0; }
  .stat__caption { flex: 1 1 9rem; max-width: none; }

  /* Tariff inclusions: two columns of ~110px broke words at 320px. */
  .tariff__checks { grid-template-columns: minmax(0, 1fr); }

  /* Display headings: a single long word («конфиденциальности» at 40px) is wider than a 320px
     screen. Words of ten letters and more may hyphenate, and any word still too long breaks
     instead of running out of the panel. */
  .display,
  h1,
  h2 {
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }

  /* Resources and press: an 8em title column and an 18rem minimum height turned each card into a
     six-line title over empty space. */
  .resources__grid,
  .resources__grid[data-columns="3"] { gap: var(--sp-3); }
  .resource-card { gap: var(--sp-3); min-height: 0; padding: var(--sp-5); }
  .resource-card__title,
  .resource-card__text { max-width: none; }

  /* Cases: a 3:1 illustration strip instead of a 190px stage; the story text is the content. */
  .cases__grid { gap: var(--sp-3); }
  .case-card__media { aspect-ratio: 3 / 1; }
  .case-card__body { gap: var(--sp-3); padding: var(--sp-5); }
  .case-card__title { max-width: none; }
  .case-card__text,
  .case-card__list { max-width: none; }

  /* Give all channels a separate compact row without squeezing the phone and menu targets. */
  .site-header--messengers[data-stuck="true"] .site-header__inner { flex-wrap: wrap; gap: var(--sp-1); }
  .site-header--messengers[data-stuck="true"] .site-header__actions { margin-left: auto; }
  .site-msg--sticky { order: 1; flex-basis: 100%; justify-content: flex-end; }
  :target { scroll-margin-top: 8rem; }
  /* Below 640 the number does not fit next to logo, MAX and the burger, so the phone becomes an
     icon and keeps the number as its accessible name. */
  .site-phone { display: none; }
  .site-header__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-default);
    color: var(--color-text);
  }
  .site-header__phone-icon .icon { width: 1.4rem; height: 1.4rem; }
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__cabinet { display: none; }
  .site-phone { font-size: 1.125rem; }
  .btn { white-space: normal; text-align: left; }
  .services__grid { grid-template-columns: 1fr; }
  .resources__grid, .resources__grid[data-columns="3"] { grid-template-columns: 1fr; }
  .warehouse__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .calc__form { grid-template-columns: 1fr; }
  .calc__step { grid-template-columns: 1fr; }
  .calc__rates, .calc__checks { grid-template-columns: 1fr; }
  .calc__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consult__form { grid-template-columns: 1fr; }
  .lead-form--grid { grid-template-columns: 1fr; }
  .review-card { flex-basis: 85%; }
  /* Two short link lists share a row; brand, contacts and cabinet keep the full width. */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-5); }
  .footer__brand,
  .footer__col:not(nav),
  .footer__cabinet { grid-column: 1 / -1; }
  .footer__col { gap: var(--sp-1); }
  .footer__col a,
  .footer__bottom-links a { padding-block: 0.3rem; }
  .priority-item { grid-template-columns: 1fr; }
  .priority-item__aside, .priority-item__media { grid-column: 1; }
  .priority-item__media { max-width: none; }
  .priority-item__num { font-size: var(--fs-body-lg); }
  .hero__cta, .hero__consult, .tariff__actions .btn { min-width: 0; width: 100%; }
  .route-caption { font-size: var(--fs-xs); }
  .hero__watermark { display: none; }
  .stage-card__illustration { margin-left: 0; }
  .chips { gap: var(--sp-2); }
  .chip { white-space: normal; }
  .pill { white-space: normal; }
  /* Полоса остановок превращается в вертикальный маршрут: пилюли столбиком,
     пунктир — короткой вертикальной чертой под пином остановки. */
  .route-map { gap: var(--sp-4); }
  .route-map__stops {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-inline: 0;
  }
  .route-map__link {
    flex: none;
    width: 0;
    height: 0.8rem;
    min-width: 0;
    border-top: 0;
    border-left: 2px dashed var(--color-accent);
    margin-left: 2.05rem;
  }
}

/* Card titles: while cards sit side by side, the title row of each card band
   shares the height of its tallest title via subgrid — a two-line title lifts
   only its own band, bands where every title fits one line stay single-line.
   Descriptions then start on one line across the band. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    .account-card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
    .account-card__shot { grid-row: 1; }
    .account-card__title { grid-row: 2; }
    .account-card__text { grid-row: 3; }
  }
  @media (min-width: 641px) {
    .service-card {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
    }
    .service-card .chip { grid-row: 1; justify-self: start; }
    .service-card__title { grid-row: 2; }
    .service-card .pill { grid-row: 3; justify-self: start; }
    .service-card__text { grid-row: 4; }
    /* Features get their own row below the text: sharing a row with the text
       placed the list in an implicit second column beside it. */
    .service-card__features { grid-row: 5; }
    .service-card__when { grid-row: 6; }
    .service-card__cta { grid-row: 7; justify-self: start; align-self: end; }
  }
}
/* Nested body / pinned CTA do not map onto subgrid rows: keep a two-line
   reserve for these titles instead. */
@media (min-width: 769px) {
  .case-card__title { min-height: 2lh; }
}
@media (min-width: 641px) {
  .resource-card__title { min-height: 2lh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .carousel-controls { display: none; }
  .panel, .card { break-inside: avoid; }
}

/* ==========================================================================
   22. Диагностика темы
   Плашки видимого сбоя: пустая выборка и не найденный блок не должны выглядеть
   как «так и задумано» (правило CONV-1).
   ========================================================================== */
.ct-fail,
.ct-empty {
  margin: var(--sp-4) auto;
  padding: var(--sp-4) var(--sp-5);
  width: min(100%, var(--content-max));
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.ct-fail {
  border: 1px solid var(--color-accent);
  background: var(--ct-white);
  color: var(--color-accent-hover);
}
.ct-empty {
  border: 1px dashed var(--border-default);
  color: var(--color-text);
}

/* ==========================================================================
   23. Первый экран внутренней страницы
   ========================================================================== */
.section--flush { margin-top: var(--sp-6); }

/* Contact route: all direct channels and self-service action above the fold. */
.contact-hero { padding: clamp(1.5rem, 3vw, 3rem); }
.contact-hero > h1 { margin-block: 1.75rem 2rem; }
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.contact-hero__details { display: grid; justify-items: start; gap: 1.5rem; min-width: 0; }
.contact-hero__phone { font-family: var(--font-display); font-size: clamp(2rem, 3.7vw, 3.75rem); line-height: 1.1; color: var(--color-text-strong); }
.contact-hero__hours { font-size: var(--fs-body-lg); line-height: 1.6; }
.contact-hero__email { font-size: clamp(1.25rem, 2vw, 1.875rem); color: var(--color-text-strong); overflow-wrap: anywhere; }
.contact-hero__phone:hover, .contact-hero__email:hover { text-decoration: underline; text-underline-offset: 0.15em; }
/* Ряд кнопок мессенджеров: сетка 2×2 равной ширины, а не ширина по тексту — «WhatsApp»
   и «MAX» в одном столбце деталей выглядят разнобоем. Базис 50% минус половина gap
   позволяет паре не влезть в узкий экран: лишняя кнопка переносится и растягивается. */
.contact-hero .contact-hero__messengers { flex-wrap: wrap; gap: 0.75rem; justify-self: stretch; }
.contact-hero__messengers li { flex: 1 1 calc(50% - 0.375rem); }
.contact-hero__messengers .site-msg__link { background: var(--surface-card); min-height: 3rem; padding: 0.75rem 1rem; width: 100%; justify-content: center; }
.contact-hero__messengers .site-msg__link:hover { background: var(--surface-sky-deep); }
.contact-hero__calculator { display: grid; justify-items: start; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--radius-lg); background: var(--surface-card); }
.contact-hero__calculator-icon { width: 2.5rem; height: 2.5rem; }
.contact-hero__calculator .btn { max-width: 100%; }
@media (max-width: 900px) {
  .contact-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

.page-hero { padding: var(--panel-pad-y) var(--panel-pad-x); }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--grid-gap-lg);
  align-items: center;
}
.page-hero--plain .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
/* Bounded track: an implicit `auto` column grows to the max-content of the one-line crumbs on
   phones and pushes them past the panel. */
.page-hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 1.3vw, 2.5rem); justify-items: start; }
.page-hero__title { max-width: 16em; text-wrap: balance; }
.page-hero__lead { max-width: 46em; }
.page-hero__lead > :first-child { margin-top: 0; }
.page-hero__lead > :last-child { margin-bottom: 0; }
.page-hero__meta {
  font-size: var(--fs-caption);
  color: var(--color-text);
  opacity: 0.7;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.page-hero__visual { position: relative; min-width: 0; }
.page-hero__image { width: 100%; height: auto; border-radius: var(--radius-lg); }
.page-hero__visual--collage { padding-bottom: var(--sp-10); }
.page-hero__inset {
  position: absolute;
  right: var(--sp-4);
  bottom: 0;
  width: 54%;
  height: auto;
  border: var(--sp-2) solid var(--surface-card);
  border-radius: var(--radius-md);
}
.rate-comparison__weight { max-width: 24rem; }
.rate-comparison .stat__value { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); }
@media (max-width: 640px) {
  .page-hero__visual--collage { padding-bottom: var(--sp-6); }
  .rate-comparison .stat { display: grid; gap: var(--sp-2); }
}
.ct-layout-spravochnik-obuchaushih-materialov .page-hero__image {
  width: 80%;
  margin-inline: auto;
}
.page-hero__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-sand);
}
/* Match the reference book scale without changing the square source assets. */
@media (min-width: 1025px) {
  .ct-layout-book .page-hero__copy { align-self: start; }
  .ct-layout-book .page-hero__visual { margin-block-start: -2rem; }
  .ct-layout-book .page-hero__image {
    width: 75%;
    margin-inline: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
}
@media (max-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   24. Хлебные крошки
   ========================================================================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}
.breadcrumbs a { color: var(--color-link); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs__logo { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.breadcrumbs__sep { opacity: 0.45; }
.breadcrumbs [aria-current="page"] { opacity: 0.65; }
/* Phone: one line. Long crumbs (a parent titled «Доставка товаров и грузов из Китая — тарифы
   и…») wrapped the trail to three lines above the h1. The home crumb keeps its name, the current
   page — which the h1 right below repeats — gives up its width first, parents after it; each cut
   crumb ends with an ellipsis (CONV-14: shortened, not removed). */
@media (max-width: 640px) {
  .breadcrumbs { flex-wrap: nowrap; max-width: 100%; min-width: 0; white-space: nowrap; }
  .page-hero__crumbs-row { max-width: 100%; }
  .breadcrumbs > :not(img):not(.breadcrumbs__sep):not(.bread_separator) {
    flex: 0 3 auto;
    min-width: 2.5em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .breadcrumbs > img + :not(.breadcrumbs__sep):not(.bread_separator) { flex-shrink: 0; }
  .breadcrumbs > :last-child:not(img):not(.breadcrumbs__sep) { flex-shrink: 8; }
  .breadcrumbs > .breadcrumbs__sep,
  .breadcrumbs > .bread_separator { flex: none; }
}

/* ==========================================================================
   25. Редакторский контент
   Типографика для the_content(): страницы и записи, которые ведут через админку. Та же
   типографика обслуживает текст статьи блога, поэтому заголовки несут scroll-margin —
   переход по якорю из оглавления не должен прятать заголовок под липкой шапкой.
   ========================================================================== */
.prose {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  max-width: var(--article-measure);
}
.prose--narrow { max-width: 62ch; }
.prose > * + * { margin-top: 1em; }
.prose h2,
.prose h3,
.prose h4 { scroll-margin-top: var(--anchor-offset); }
.prose h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
  margin-top: 1.8em;
  padding-top: var(--sp-5);
}
/* A hairline above every h2 turns a long read into visible chapters without extra markup. */
.prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--color-accent);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin-top: 1.6em;
}
.prose h4 {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  margin-top: 1.3em;
}
.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover { color: var(--color-accent-hover); }
.prose strong { font-weight: 700; }
.prose ul,
.prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 0.5em; }
.prose li > ul,
.prose li > ol { margin-top: 0.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--color-brand); font-weight: 700; }
.prose img,
.prose video { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
/* Embeds pasted into posts carry fixed width/height attributes (640×360 players): they shrink to
   the column and keep the 16:9 frame instead of pushing the page sideways on a phone. */
.prose iframe,
.prose embed,
.prose object { max-width: 100%; }
.prose iframe[src*="youtube"],
.prose iframe[src*="youtu.be"],
.prose iframe[src*="rutube"],
.prose iframe[src*="vk.com/video"],
.prose iframe[src*="vkvideo"],
.prose iframe[src*="kinescope"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose blockquote {
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--color-brand);
  background: var(--surface-sand);
  border-radius: var(--radius-md);
}
.prose blockquote > :first-child { margin-top: 0; }
.prose figure { margin: 0; }
.prose figcaption {
  font-size: var(--fs-caption);
  opacity: 0.7;
  margin-top: 0.5em;
}
.prose code,
.prose kbd {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--surface-sand);
  font-size: 0.9em;
}
.prose pre {
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--surface-sand);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.prose pre code { padding: 0; background: none; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose th,
.prose td {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--surface-sand); font-weight: 700; }
.prose hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin-block: var(--sp-8);
}
/* Wide tables get a horizontal scroller from app.js; without it the table simply keeps its own
   width, so the content is never lost — only the page can scroll sideways. */
.prose__scroller { overflow-x: auto; }
.prose__scroller table { min-width: 34rem; }

/* Anchor beside a heading: visible on hover and for keyboard focus, never in the way. */
.heading-anchor {
  margin-left: 0.4em;
  color: var(--color-link);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
.heading-anchor__icon { width: 0.55em; height: 0.55em; }
.prose h2:hover > .heading-anchor,
.prose h3:hover > .heading-anchor,
.heading-anchor:focus-visible { opacity: 0.65; }

/* ==========================================================================
   26. Лента записей
   ========================================================================== */
.posts__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--head-gap);
}
.posts__grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.posts__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.post-card { gap: var(--sp-4); padding-bottom: calc(var(--card-pad) + 1rem); }
/* Стрелка в card__arrow стоит от нижнего края карты (position: absolute), а дата — обычный
   строчный элемент: их края расходятся ровно на добавленный выше padding-bottom. */
.post-card .card__arrow { bottom: calc(var(--card-pad) + 1rem); }
/* Обложка есть у каждой карточки и держит одно соотношение сторон: иначе высота карточек
   в ряду расходится по размеру картинки, а запись без миниатюры поднимает заголовок выше
   соседей. Запись без миниатюры получает заглушку со знаком бренда. */
.post-card__media {
  display: block;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__cover--fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--surface-sky);
  background-image: var(--texture-light);
}
.post-card__ghost {
  width: 45%;
  height: auto;
  aspect-ratio: 203 / 68;
  color: var(--color-brand);
  opacity: 0.65;
}
.post-card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.post-card__date { margin-top: auto; font-size: var(--fs-xs); opacity: 0.6; }
.post-card .chip { align-self: start; }

.posts__cta { display: flex; justify-content: center; margin-top: var(--head-gap); }

/* Выбор темы. Список тегов стоит перед лентой на каждой странице блога и раскрывается
   нативным <details>: без JavaScript, каждый пункт — обычная ссылка на архив тега.
   Выбранная тема читается в самом контроле. */
.tag-filter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.tag-filter__menu { position: relative; }
.tag-filter__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: var(--fs-btn);
  line-height: var(--lh-body);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.tag-filter__summary::-webkit-details-marker { display: none; }
.tag-filter__summary:hover { border-color: var(--border-strong); }
.tag-filter__menu[open] .tag-filter__summary { border-color: var(--border-strong); }
.tag-filter__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.tag-filter__label { opacity: 0.6; }
.tag-filter__value { font-weight: var(--fw-bold); }
.tag-filter__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-left: var(--sp-1);
  transition: transform var(--duration) var(--ease);
}
.tag-filter__menu[open] .tag-filter__chevron { transform: rotate(180deg); }
.tag-filter__list {
  position: absolute;
  z-index: 3;
  display: grid;
  min-width: 20rem;
  max-width: min(32rem, 90vw);
  max-height: 22rem;
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: 0 16px 40px rgba(23, 55, 67, 0.14);
}
.tag-filter__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.tag-filter__item:hover { background: var(--surface-sand); }
.tag-filter__item[aria-current="page"] { background: var(--surface-sky); font-weight: var(--fw-bold); }
.tag-filter__count { font-size: var(--fs-xs); opacity: 0.6; }

/* В ленте тематика стоит между поисковым полем и submit. Все три контрола используют
   единый высокий токен; нижнее выравнивание учитывает подпись над полем. */
.search-form--with-filter .tag-filter {
  flex: 0 0 auto;
  min-width: 0;
}
.tag-filter--inline .tag-filter__summary {
  min-height: var(--control-h-lg);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Complete tag directory below the blog pagination. */
.blog-tags__list {
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  gap: var(--sp-3);
}
.blog-tags__list li { max-width: 100%; }
.blog-tags__link {
  max-width: 100%;
  min-height: var(--control-h-sm);
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration) var(--ease);
}
.blog-tags__link:hover { background: var(--surface-sand); }
.blog-tags__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.blog-tags__toggle {
  justify-content: center;
  min-width: 12rem;
  margin-top: var(--sp-5);
}

.post-cover { margin: 0; }
.post-cover img { width: 100%; height: auto; border-radius: var(--radius-xl); }

@media (max-width: 1024px) {
  .posts__grid,
  .posts__grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .posts__grid,
  .posts__grid[data-columns="2"],
  .posts__grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); }

  /* Лента на телефоне — список, а не стопка плакатов: обложка 4:3 уходит вправо миниатюрой
     рядом с заголовком, описание — под ними на всю ширину. Карточка ~200px вместо ~560px:
     на экране помещается три-четыре материала, а не один (PREF-5: обложка остаётся у каждой). */
  .post-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    align-content: start;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }
  .post-card__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
    border-radius: var(--radius-sm);
  }
  .post-card > .chip,
  .post-card__title { grid-column: 1; }
  .post-card > .chip { min-height: 1.75rem; padding: 0.3em 0.75em; font-size: var(--fs-xs); }
  .post-card__title { font-size: 1.0625rem; }
  .post-card__text,
  .post-card__date { grid-column: 1 / -1; }
  .post-card__text { -webkit-line-clamp: 2; }
  .post-card .card__arrow { display: none; }

  /* Каталог всех тегов под лентой: плотные чипы вместо пилюль высотой 42px — список
     занимает около экрана, а не четыре. */
  .blog-tags__list { gap: var(--sp-2); }
  .blog-tags__link { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: var(--fs-caption); }

  /* На узком экране раскрытый список толкает ленту вниз, а не перекрывает её краем окна. */
  .tag-filter__menu { width: 100%; }
  .tag-filter__summary { width: 100%; }
  .tag-filter__list { position: static; min-width: 0; max-width: none; }
}

/* ==========================================================================
   27. Преимущества
   ========================================================================== */
.features__grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--head-gap);
}
.features__grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features__grid[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.features__text + .features__grid { margin-top: var(--sp-8); }
/* Примечание после сетки карт отделяется от плашек тем же шагом, что текст над сеткой:
   без отступа пилюля прилипала к последнему ряду карточек (контейнерная страница, #documents-maybe). */
.features__grid + .note-pill { margin-top: var(--sp-8); }

/* Карточки #documents-maybe (контейнерная страница) приходят без title: текст в них —
   основной контент карточки, а не подпись к жирному заголовку. Базовый .feature__text
   уменьшен до fs-sm ради контраста с заголовком, здесь это читается как мелкий шрифт.
   Кегль основной, как у текстовых карточек process-варианта и пунктов check-list. */
#documents-maybe .feature__text { font-size: var(--fs-body); }

.features__text { margin-top: var(--head-gap); max-width: 46em; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.feature { gap: var(--sp-4); }
.feature__icon { width: 1.75rem; height: 1.75rem; color: var(--color-brand); }
#legal .feature__icon { color: var(--color-danger); }
.feature__title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-tight); }
.feature__text { font-size: var(--fs-sm); line-height: var(--lh-body); }
.feature--cta { justify-content: space-between; }
.feature--cta .btn { align-self: flex-start; max-width: 100%; margin-top: var(--sp-2); white-space: normal; text-align: left; }
.feature__link { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--color-link); text-decoration: none; }
.feature__link:hover { text-decoration: underline; }
.feature__link-icon { width: 0.7rem; height: 0.7rem; }

@media (max-width: 1024px) {
  .features__grid,
  .features__grid[data-columns="4"],
  .features__grid[data-columns="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .features__grid,
  .features__grid[data-columns="2"],
  .features__grid[data-columns="4"],
  .features__grid[data-columns="5"] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  /* One column of icon-on-top cards ran three screens for nine short benefits: the icon moves
     beside the title, text and link align under the title. */
  .feature {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-content: start;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-5);
  }
  .feature > * { grid-column: 2; }
  .feature > .feature__icon { grid-column: 1; grid-row: 1; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; }
  .feature__title { font-size: 1.125rem; }
  .feature--cta > * { grid-column: 1 / -1; }
}

.features__actions { display: flex; justify-content: center; margin-top: var(--head-gap); }

/* Process variant keeps connectors between cards in reading order. */
.features--process .section-inner {
  padding: clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--surface-sky);
}
.features--process .features__grid { gap: 2.5rem; }
.features--process .feature { position: relative; background: var(--surface-card); }
.features--process .feature__text { font-size: var(--fs-body); }
.features--process .feature:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -2rem;
  width: 1.5rem;
  height: 1rem;
  background: var(--color-accent);
  clip-path: polygon(0 35%, 65% 35%, 65% 0, 100% 50%, 65% 100%, 65% 65%, 0 65%);
}
@media (max-width: 1024px) {
  .features--process .features__grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); }
  .features--process .feature:not(:last-child)::after {
    top: auto;
    bottom: -1.75rem;
    right: calc(50% - 0.75rem);
    transform: rotate(90deg);
  }
}

/* The book's promise is a statement, separate from the risk cards. */
.ct-layout-book #risks .note-pill {
  display: block;
  margin-top: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-sky);
  color: var(--color-text);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
}
.ct-layout-book #risks .note-pill > .icon { display: none; }
.ct-layout-book #risks .note-pill > span { display: block; max-width: 34em; }
.ct-layout-book #risks .note-pill strong { color: var(--ct-blue); font-weight: 800; }

/* ==========================================================================
   28. Шаги процесса
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--head-gap);
  list-style: none;
  counter-reset: none;
}
.steps[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.steps__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--head-gap); }
/* A lone last step of a two- or three-column grid spans the row instead of leaving empty slots. */
@media (min-width: 1025px) {
  .steps[data-columns="2"] > .step:last-child:nth-child(odd),
  .steps[data-columns="3"] > .step:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

.step { gap: var(--sp-3); }
.step--cta { justify-content: space-between; }
.step--cta .btn { align-self: flex-start; max-width: 100%; margin-top: var(--sp-2); white-space: normal; text-align: left; }
.step__num {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--color-brand);
}
.step__title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-tight); }
.step__text { font-size: var(--fs-sm); line-height: var(--lh-body); }
.step__list { font-size: var(--fs-sm); }
.step__image { width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Производство товара: компактные карточки 3+2 и единый кадр для разнородных исходников. */
.ct-layout-otdel-zakupok-v-kitae #process .steps {
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
.ct-layout-otdel-zakupok-v-kitae #process .step {
  gap: var(--sp-3);
  padding: clamp(1.25rem, 1rem + 0.8vw, 2rem);
}
.ct-layout-otdel-zakupok-v-kitae #process .step__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: auto;
  object-fit: contain;
  object-position: center;
  background: var(--surface-paper);
  border: 1px solid var(--border-soft);
}

@media (min-width: 1025px) {
  .ct-layout-otdel-zakupok-v-kitae #process .steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .ct-layout-otdel-zakupok-v-kitae #process .step { grid-column: span 2; }
  .ct-layout-otdel-zakupok-v-kitae #process .step:nth-last-child(2) { grid-column: 2 / span 2; }
}

@media (max-width: 1024px) {
  .steps,
  .steps[data-columns="3"],
  .steps[data-columns="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .steps,
  .steps[data-columns="2"],
  .steps[data-columns="3"],
  .steps[data-columns="5"] { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  /* The number stands left of the step, as in a numbered list, instead of taking its own row. */
  .step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-content: start;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-5);
  }
  .step > * { grid-column: 2; }
  .step > .step__num { grid-column: 1; grid-row: 1 / span 2; font-size: 1.625rem; }
  .step > .step__image { grid-column: 1 / -1; }
  .step--cta > * { grid-column: 1 / -1; }
  .step__title { font-size: 1.125rem; }
}

/* Unified /testirovanie/ process: media belongs to its step instead of a separate section. */
.testing-process__steps {
  margin-top: var(--head-gap);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  list-style: none;
}
.testing-process__step {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-8);
}
.testing-process__step + .testing-process__step { border-top: 1px solid var(--border-soft); }
.testing-process__step--copy-only { grid-template-columns: minmax(0, 1fr); }
.testing-process__step--copy-only .testing-process__copy { max-width: 64rem; }
.testing-process__copy {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sp-4);
  min-width: 0;
}
.testing-process__num {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--color-brand);
}
.testing-process__body { display: grid; gap: var(--sp-3); }
.testing-process__title { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); }
.testing-process__text { margin: 0; line-height: var(--lh-body); }
.testing-process__list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  line-height: var(--lh-body);
}
.testing-process__list li::marker { color: var(--color-brand); }
.testing-process__media { min-width: 0; }
.testing-process__media-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-strong);
}
.testing-process__figure,
.testing-process__gallery figure { display: grid; gap: var(--sp-2); margin: 0; }
.testing-process__figure img,
.testing-process__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.testing-process__figure figcaption,
.testing-process__gallery figcaption { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--color-text-muted); }
.testing-process__video { margin-top: 0; }
.testing-process__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  list-style: none;
}

@media (max-width: 1024px) {
  .testing-process__step { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .testing-process__step { gap: var(--sp-5); padding: var(--sp-5); }
  .testing-process__copy { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-3); }
  .testing-process__num { font-size: 1.625rem; }
  .testing-process__title { font-size: var(--fs-h4); }
  .testing-process__gallery { grid-template-columns: minmax(0, 1fr); }
}

/* Процесс по этапам: тёмная панель, три фазы со сквозной нумерацией шагов, итог с документами. */
.process__panel {
  display: grid;
  gap: var(--head-gap);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  background: var(--surface-dark);
  background-image: var(--texture-light);
  color: var(--color-text-inverse);
  isolation: isolate;
}
.process__ghost {
  position: absolute;
  top: calc(var(--panel-pad-y) * -0.2);
  right: calc(var(--panel-pad-x) * -0.3);
  z-index: -1;
  width: clamp(16rem, 10rem + 30vw, 46rem);
  height: auto;
  aspect-ratio: 3 / 1;
  color: var(--color-text-inverse);
  opacity: 0.05;
}
.process .brand-mark { color: var(--color-text-inverse); }
.process .brand-mark__logo { opacity: 0.6; }

.process__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: end;
}
.process__intro { display: grid; gap: var(--section-head-gap); }
.process__title { max-width: 10em; }
.process__lead {
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  opacity: 0.8;
}

.process__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.process__fact {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--color-brand);
}
.process__fact-value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--color-brand);
  white-space: nowrap;
}
.process__fact-caption { font-size: var(--fs-caption); line-height: var(--lh-body); opacity: 0.75; }

.process__phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  list-style: none;
}
.process-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2.5rem);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xl);
  background: var(--surface-on-dark);
}
.process-phase + .process-phase::before {
  content: "";
  position: absolute;
  top: clamp(2rem, 1.5rem + 1.6vw, 3.4rem);
  left: calc(var(--grid-gap) * -1 - 0.1rem);
  width: calc(var(--grid-gap) + 0.2rem);
  height: 2px;
  background: var(--color-accent);
}
.process-phase__head { display: grid; gap: var(--sp-3); justify-items: start; }
.process-phase__tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.process-phase__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
}
.process-phase__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
  opacity: 0.7;
}

.process-phase__steps { display: grid; gap: var(--sp-5); list-style: none; }
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sp-4);
}
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: calc(var(--sp-5) * -1);
  left: 1.5rem;
  border-left: 1px dashed var(--line-on-dark);
}
.process-step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-brand);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-brand);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.process-step:hover .process-step__num { background: var(--color-brand); color: var(--surface-dark); }
.process-step__body { display: grid; gap: var(--sp-1); align-content: start; padding-top: 0.55rem; }
.process-step__title { font-size: var(--fs-body-lg); font-weight: 700; line-height: var(--lh-tight); }
.ct-layout-belaya #how .process-step__title { font-weight: var(--fw-medium); }
.process-step__text { font-size: var(--fs-sm); line-height: var(--lh-body); opacity: 0.75; }
.process-step__badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.4em;
  margin-top: var(--sp-2);
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--color-brand);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.process__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--grid-gap);
  align-items: center;
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface-sky);
  background-image: var(--texture-dark);
  color: var(--color-text);
}
.process__result-copy { display: grid; gap: var(--sp-3); }
.process__result-title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tracking); }
.process__result-text { font-size: var(--fs-sm); line-height: var(--lh-body); }
.process__docs { list-style: none; }
.process__docs .chip { background: var(--surface-card); }

@media (max-width: 1200px) {
  .process__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .process__phases { grid-template-columns: minmax(0, 1fr); }
  .process-phase + .process-phase::before {
    top: calc(var(--grid-gap) * -1 - 0.1rem);
    left: clamp(2rem, 1.5rem + 1.6vw, 3.4rem);
    width: 2px;
    height: calc(var(--grid-gap) + 0.2rem);
  }
  .process-phase__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); }
  .process-step::after { display: none; }
  .process__result { grid-template-columns: minmax(0, 1fr); }
  .process__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .process__facts { grid-template-columns: minmax(0, 1fr); }
  .process__fact { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--sp-4); }
  .process-phase__steps { grid-template-columns: minmax(0, 1fr); }
  .process__result { grid-template-columns: minmax(0, 1fr); }
  .process__cta { justify-self: stretch; }
}

/* Светлый тон process (tone 'sand' | 'sky', сейчас — #how на /dostavka-iz-kitaya/belaya/): та же
   структура в языке handoff и cta-panel — тонированная панель, белые приподнятые карточки этапов,
   номера шагов залиты фирменным голубым, факты собраны в белую карточку-сводку, итог — белая карточка. */
.process__panel.panel--sand { background: var(--surface-sand); background-image: var(--texture-dark); }
.process__panel.panel--sky { background: var(--surface-sky); background-image: var(--texture-dark); }
.process--light .process__panel { color: var(--color-text); }
.process--light .process__ghost { color: var(--color-text-strong); opacity: 0.035; }
/* Логотип-водяной знак на светлой панели #how создаёт визуальный шум на фоне текста —
   жалоба ограничена /dostavka-iz-kitaya/belaya/ (body.ct-layout-belaya), другие страницы
   process не трогаем, чтобы не расширять правку сверх запроса. */
.ct-layout-belaya .process__ghost { display: none; }
.process--light .brand-mark { color: var(--color-text); }
.process--light .brand-mark__logo { opacity: 0.4; }
.process--light .process__head { align-items: center; }
.process--light .process__title { color: var(--color-text-strong); text-wrap: balance; }
.process--light .process__lead { opacity: 0.85; }

.process--light .process__facts {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--sp-6);
  padding: var(--sp-2) clamp(1.25rem, 0.8rem + 1.2vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
}
.process--light .process__fact {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: inherit;
  padding: var(--sp-5) 0;
  border-top: 0;
}
.process--light .process__fact + .process__fact { border-top: 1px solid var(--border-default); }
.process--light .process__fact-value { position: relative; padding-left: var(--sp-5); color: var(--color-text-strong); }
.process--light .process__fact-value::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-brand);
  transform: translateY(-50%);
}
.process--light .process__fact-caption { font-size: var(--fs-sm); opacity: 0.75; }

/* process--facts-inline: факты одной строкой под заголовком вместо карточки-плашки. */
.process--facts-inline .process__head { grid-template-columns: minmax(0, 1fr); }
.process--facts-inline .process__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-6);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.process--facts-inline .process__fact {
  grid-column: auto;
  grid-template-columns: none;
  display: grid;
  align-content: start;
  gap: var(--space-em-0-15);
  padding: 0;
  border-top: 0;
}
.process--facts-inline .process__fact + .process__fact { border-top: 0; }
.process--facts-inline .process__fact-value {
  padding-left: 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.process--facts-inline .process__fact-value::before { display: none; }
.process--facts-inline .process__fact-caption { font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .process--facts-inline .process__facts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .process--facts-inline .process__fact-value { white-space: normal; }
}

.process--light .process-phase {
  border: 0;
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
}
.process--light .process-phase + .process-phase::before { background: var(--color-brand); }
.process--light .process-phase__tag { background: var(--surface-brand-soft); color: var(--color-text-strong); }
.process--light .process-phase__title { color: var(--color-text-strong); }
.process--light .process-phase__meta { opacity: 1; }
.process--light .process-phase__meta .icon { color: var(--color-brand); }
.process--light .process-phase__meta span { opacity: 0.75; }
.process--light .process-phase__head { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border-default); }

.process--light .process-step:not(:last-child)::after { border-left: 2px dashed var(--border-sand); left: calc(1.5rem - 1px); }
.process--light .process-step__num { border: 0; background: var(--surface-sky); color: var(--color-text-strong); }
.process--light .process-step:hover .process-step__num { background: var(--color-text-strong); color: var(--color-text-inverse); }
.process--light .process-step__title { color: var(--color-text-strong); }
.process--light .process-step__badge { color: var(--color-text-strong); }
.process--light .process-step__badge .icon { color: var(--color-brand); }

.process--light .process__result {
  background: var(--surface-sky-deep);
  background-image: none;
  box-shadow: var(--shadow-card-soft);
}
.process--light .process__result-title { color: var(--color-text-strong); }
/* Плашки документов на светлой панели — голубые, как чипы первого экрана; панель темнее (sky-deep), поэтому не сливаются. */
.process--light .process__docs .chip { background: var(--chip-default); }

/* The summary-card facts only: the inline variant (#how on /dostavka-iz-kitaya/belaya/) keeps its
   own one-column list — the subgrid here gave it a 308px + 0px track pair on phones, and the
   captions ran 80px past the panel. */
@media (max-width: 640px) {
  .process--light:not(.process--facts-inline) .process__facts { grid-template-columns: max-content minmax(0, 1fr); }
  .process--light:not(.process--facts-inline) .process__fact { grid-template-columns: subgrid; align-items: center; gap: inherit; }
  .process--light:not(.process--facts-inline) .process__fact-value { font-size: var(--fs-h3); }
}

/* ==========================================================================
   29. Пары «риск — решение»
   ========================================================================== */
.compare {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
  list-style: none;
}
.compare__row {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.compare__cell { gap: var(--sp-4); }
.compare__cell .pill { align-self: start; }
.compare__text { font-size: var(--fs-sm); line-height: var(--lh-body); }
.compare__text > * + * { margin-top: 0.6em; }
.compare__text strong { display: block; font-size: var(--fs-body-lg); }
.compare__cell--plus { border-color: var(--color-brand); }

/* Compact opt-in table: headers name each column once instead of repeating labels in every row. */
.compare-table-wrap {
  margin-top: var(--section-head-gap);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare-table__head {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-align: left;
}
.compare-table__head--task {
  width: 38%;
  border-right: 1px solid var(--line-on-dark);
}
.compare-table__heading {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.compare-table__heading .icon {
  width: 1.25em;
  height: 1.25em;
  color: var(--color-brand);
}
.compare-table__row + .compare-table__row { border-top: 1px solid var(--border-default); }
.compare-table__cell {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.compare-table__cell--task {
  border-right: 1px solid var(--border-sand);
  background: var(--surface-sand);
  color: var(--color-text-strong);
  font-weight: 700;
}
.compare-table__cell--solution { background: var(--surface-card); }

@media (max-width: 768px) {
  .compare__row { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: risk and answer read as one joined pair, with a small label instead of a 49px pill. */
@media (max-width: 640px) {
  .compare { gap: var(--sp-4); }
  .compare__row { gap: 0; }
  .compare__cell { gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
  .compare__cell--minus { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .compare__cell--plus { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .compare__cell .pill { min-height: 1.75rem; padding: 0.2em 0.75em; font-size: var(--fs-caption); }

  .compare-table__head,
  .compare-table__cell { padding: var(--sp-3) var(--sp-4); }
  .compare-table__head { font-size: var(--fs-body-lg); }
  .compare-table__head--task { width: 42%; }
  .compare-table__heading { gap: var(--sp-2); }
  .compare-table__cell { font-size: var(--fs-caption); }
}

/* ==========================================================================
   30. Панель призыва
   ========================================================================== */
.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap-lg);
  padding: var(--panel-pad-y) var(--panel-pad-x);
}
.cta-panel__copy { display: grid; gap: var(--sp-4); max-width: 44em; }
.cta-panel__text { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cta-panel__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.cta-panel__price-value {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking);
}
.cta-panel__price-unit { font-size: var(--fs-body-lg); font-weight: 700; }

/* Opt-in proposal composition keeps existing CTA panels unchanged. */
.cta-panel--decor-proposal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 35.6rem);
  align-items: start;
  gap: clamp(2rem, 1rem + 3vw, 6rem);
}
.cta-panel--decor-proposal .cta-panel__stack { display: grid; gap: var(--sp-8); }
.cta-panel--decor-proposal .tariff__side { padding-top: 0; align-content: start; }
@media (max-width: 1200px) {
  .cta-panel--decor-proposal { grid-template-columns: minmax(0, 1fr); }
}

/* Акцентный вариант с макетом книги: выбивается из остального дизайна страницы */
.section:has(> .cta-panel--book) {
  overflow: clip;
}
.cta-panel--book {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
}
.cta-panel--book::before,
.cta-panel--book::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
}
.cta-panel--book::before {
  width: clamp(14rem, 10rem + 14vw, 22rem);
  height: clamp(14rem, 10rem + 14vw, 22rem);
  right: -6rem;
  top: -5rem;
  background: var(--ct-orange-soft);
  opacity: 0.55;
}
.cta-panel--book::after {
  width: clamp(10rem, 7rem + 10vw, 16rem);
  height: clamp(10rem, 7rem + 10vw, 16rem);
  right: 4rem;
  bottom: -4rem;
  background: var(--ct-cyan);
  opacity: 0.45;
}
.cta-panel--book .cta-panel__copy { position: relative; z-index: 1; }
.cta-panel__mockup {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-inline: auto;
}
.cta-panel__book {
  display: block;
  width: clamp(11rem, 8rem + 12vw, 16rem);
  height: auto;
  transform: rotate(-3deg);
  border-radius: var(--radius-md);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22), 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .cta-panel--book::before { right: -5rem; top: -4rem; }
  .cta-panel--book::after { right: 1rem; bottom: -3rem; }
}

/* Panel призыва с фото и контактами личного менеджера --------------------- */
.manager-help {
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--grid-gap-lg);
  padding: var(--panel-pad-y) var(--panel-pad-x);
}
.manager-help__person { margin: 0; display: grid; justify-items: center; gap: var(--sp-3); }
.manager-help__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--radius-lg);
}
.manager-help__identity { text-align: center; }
.manager-help__name { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-tight); }
.manager-help__role { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); line-height: var(--lh-body); opacity: 0.7; }
.manager-help__copy { display: grid; gap: var(--sp-4); align-content: space-between; }
.manager-help__text { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.manager-help__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.manager-help__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.manager-help .site-msg.manager-help__msg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 0;
}
/* auto basis (not 0): never shrinks a badge below its icon+label content, so wide labels
   like "WhatsApp" wrap onto a new row instead of getting clipped by .panel's overflow: hidden. */
.manager-help .site-msg.manager-help__msg li { flex: 1 1 auto; min-width: 8rem; }
.manager-help .site-msg.manager-help__msg .site-msg__link {
  background: var(--surface-card);
  min-height: var(--control-h-lg);
  width: 100%;
  padding-inline: var(--sp-3);
  justify-content: center;
}
.manager-help .site-msg.manager-help__msg .site-msg__link:hover { background: var(--surface-sky-deep); }

@media (max-width: 768px) {
  .manager-help { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .manager-help__person { width: 9rem; }
  .manager-help__copy { text-align: left; }
  .manager-help__cta { flex-direction: column; align-items: stretch; }
  .manager-help .site-msg.manager-help__msg { flex-wrap: wrap; }
  .manager-help .site-msg.manager-help__msg .site-msg__link { flex: 1 1 9rem; }
}

/* Consolidation decor: opt-in via decor="consolidation" (only /dostavka-iz-kitaya/belaya/#volume).
   Two columns: copy + actions on the left, a groupage-container cutaway on the right. Grid areas
   keep the shared markup order (copy, actions, visual) while the actions sit under the copy. */
.cta-panel--decor-consolidation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "copy visual" "actions visual";
  grid-template-rows: auto 1fr;
  column-gap: var(--grid-gap-lg);
  row-gap: var(--sp-8);
  align-items: start;
}
.cta-panel--decor-consolidation .cta-panel__copy { grid-area: copy; gap: var(--sp-5); }
.cta-panel--decor-consolidation .cta-panel__actions { grid-area: actions; }
.cta-panel--decor-consolidation .cta-panel__title { text-wrap: balance; }
.cta-panel__eyebrow {
  justify-self: start;
  min-height: 0;
  padding: 0.45em 0.95em;
  background: var(--surface-card);
  border: 1px solid var(--border-sky);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: var(--fs-caption);
}
.cta-panel--decor-offer .cta-panel__eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem 0.55rem 0.65rem;
  overflow: hidden;
  color: var(--color-text-strong);
  background: linear-gradient(135deg, var(--ct-orange-soft), var(--color-accent) 62%, var(--ct-star-gold));
  border-color: rgb(21 23 30 / 0.18);
  border-radius: var(--radius-sm);
  box-shadow: 0 0.75rem 1.5rem -1rem rgb(21 23 30 / 0.7);
  transform: rotate(-1deg);
}
.cta-panel--decor-offer .cta-panel__eyebrow::before {
  content: "%";
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.7rem;
  aspect-ratio: 1;
  color: var(--color-text-inverse);
  background: var(--surface-dark);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: 1;
}
.cta-panel--decor-offer .cta-panel__eyebrow::after {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border: 1px dashed rgb(21 23 30 / 0.3);
  border-radius: calc(var(--radius-sm) - 0.25rem);
  pointer-events: none;
}
.cta-panel__points { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.cta-panel__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.cta-panel__point-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: var(--color-accent); }

.cta-panel__visual {
  grid-area: visual;
  align-self: center;
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  border: 1px solid var(--border-sky);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(21 23 30 / 0.25);
}
.cta-panel__container { display: block; width: 100%; height: auto; overflow: visible; }
.cta-panel__container-body { fill: var(--surface-sky); stroke: var(--border-strong); stroke-width: 2.5; }
.cta-panel__container-hold { fill: var(--surface-card); stroke: var(--border-sky); stroke-width: 1.5; }
.cta-panel__container-rib { fill: none; stroke: var(--border-sky); stroke-width: 2; stroke-linecap: round; }
.cta-panel__container-corner { fill: var(--border-strong); }
/* Finished state (whole hold tiled, no gaps, all cargo highlighted) is the
   default, so the illustration reads correctly without JS. */
.cta-panel__cargo-box { fill: var(--color-accent); stroke: var(--border-default); stroke-width: 1.5; }
/* Reveal on scroll: ".js-reveal"/".is-visible" are added by app.js once the
   IntersectionObserver fires — every box but the highlighted one starts gray
   and lights up in sequence via --i (set inline per box in blocks/cta-panel.php)
   only after the figure is actually on screen, not on page load. */
.cta-panel__visual.js-reveal .cta-panel__cargo-box:not(.cta-panel__cargo-box--own) {
  fill: var(--chip-gray);
}
.cta-panel__visual.js-reveal.is-visible .cta-panel__cargo-box:not(.cta-panel__cargo-box--own) {
  animation: cta-cargo-fill 0.8s ease forwards;
  /* Hold the single highlighted box first (1.2s pause), then fill the rest
     slowly: each box starts 0.25s after the previous one. */
  animation-delay: calc(1.2s + var(--i, 0) * 0.25s);
}
@keyframes cta-cargo-fill {
  to { fill: var(--color-accent); }
}
.cta-panel__scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}
.cta-panel__scale-item:last-child { text-align: right; }
.cta-panel__scale-item strong { display: block; font-size: var(--fs-body); color: var(--color-text-strong); }
.cta-panel__scale-line {
  width: clamp(2.5rem, 1rem + 4vw, 5rem);
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-brand));
  border-radius: 2px;
}
/* Reveals once every box in the container has lit up: 14 non-highlighted
   boxes finish at 1.2s + 13 * 0.25s + 0.8s = 5.25s. */
.cta-panel__visual.js-reveal .cta-panel__scale-item--reveal { opacity: 0.4; }
.cta-panel__visual.js-reveal.is-visible .cta-panel__scale-item--reveal {
  animation: cta-scale-reveal 0.4s ease forwards;
  animation-delay: 5.35s;
}
@keyframes cta-scale-reveal {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* Skip the staggered build-up: once the figure is visible, snap straight to
     the finished state (all cargo highlighted, caption fully opaque). */
  .cta-panel__visual.js-reveal.is-visible .cta-panel__cargo-box:not(.cta-panel__cargo-box--own) {
    animation: none;
    fill: var(--color-accent);
  }
  .cta-panel__visual.js-reveal.is-visible .cta-panel__scale-item--reveal {
    animation: none;
    opacity: 1;
  }
}

/* Image decor: opt-in via decor="image" (only /dostavka-iz-kitaya/belaya/#predictable).
   Copy + actions on the left, a generated isometric diorama on the right, set straight on the
   panel like the other diorama illustrations of the page (no card frame). */
.cta-panel--decor-image {
  display: grid;
  /* The visual column takes X/(1+X) of the row, so a 15% wider picture needs
     X/(1+X) = 1.15 * 0.5/1.5, i.e. X = 0.6216 — not 0.5 * 1.15. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6216fr);
  grid-template-areas: "stack visual";
  column-gap: var(--grid-gap-lg);
  align-items: center;
}
/* Copy + actions behave as one vertically centered group: the wrapper keeps
   the tall figure from inflating the left rows and pushing the button away. */
.cta-panel--decor-image .cta-panel__stack { grid-area: stack; display: grid; gap: var(--sp-4); max-width: 44em; }
.cta-panel--decor-image .cta-panel__title { text-wrap: balance; }
.cta-panel--decor-image .cta-panel__actions { margin-top: var(--sp-4); }
/* Scoped to the modifier: the figure is printed only in the decor="image" branch of
   blocks/cta-panel.php, so nothing outside #predictable can pick up this sizing. */
.cta-panel--decor-image .cta-panel__figure {
  grid-area: visual;
  align-self: center;
  margin: 0;
}
/* The diorama is rendered on white: multiply drops that white into the panel tone. */
.cta-panel__picture { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

@media (max-width: 900px) {
  .cta-panel--decor-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stack" "visual";
  }
  .cta-panel--decor-image .cta-panel__figure { width: 100%; max-width: 26.5rem; justify-self: center; }
}

@media (max-width: 900px) {
  .cta-panel--decor-consolidation {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "visual" "actions";
    grid-template-rows: auto;
  }
  .cta-panel__visual { width: 100%; max-width: 36rem; }
}
@media (max-width: 480px) {
  .cta-panel__scale { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .cta-panel__scale-item:last-child { text-align: left; }
  .cta-panel__scale-line { display: none; }
  .cta-panel__visual { padding: var(--sp-4); }
}

/* ==========================================================================
   31. Контакты
   ========================================================================== */
.contacts__grid {
  display: grid;
  gap: var(--grid-gap-lg);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  margin-top: var(--head-gap);
  /* One shared row height: the office card and the map are equal height and
     aligned along both top and bottom edges. */
  align-items: stretch;
}
.contacts__list { display: grid; gap: var(--sp-5); }
.contacts__row { display: grid; gap: 0.25rem; }
.contacts__label { font-size: var(--fs-xs); letter-spacing: 0.04em; opacity: 0.6; }
.contacts__value { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.contacts__value a { color: var(--color-link); }
/* Padding comes from the shared .card (--card-pad), the same inset other cards
   use; a local padding override here once referenced an undefined --sp-7 token,
   which collapsed the padding to zero and pinned the content to the card edges. */
.contacts__office { gap: var(--sp-5); }
.contacts__office-title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); }
.contacts__description { display: block; font-size: var(--fs-body); }
/* Auto margin pins the action button to the card bottom when the map is taller. */
.contacts__action { margin-top: auto; padding-top: var(--sp-2); }
/* The shared .embed owns a head-gap for standalone blocks; inside the contacts
   grid that spacing belongs to the grid itself, otherwise the map hangs below
   the office card. Same override pattern as .checklist-panel__embed .embed. */
.contacts__map.embed { margin-top: 0; }

@media (min-width: 1025px) {
  /* Two-column desktop row: stretch the map to the row height instead of its
     own 16/9 ratio, so the card and the map match heights exactly. */
  .contacts__map.embed { display: flex; }
  .contacts__map.embed iframe { flex: 1 1 auto; aspect-ratio: auto; min-height: 24rem; }
}

@media (max-width: 1024px) {
  .contacts__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   32. Таблицы тарифов и встраивания
   ========================================================================== */
.table-wrap {
  margin-top: var(--head-gap);
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
/* Feature-local spacing for the audit offer intro. Other price tables keep
   their existing rhythm because this anchor exists only on /audit-fabrics/. */
#service-tiers > .section-inner > .section-head + .lead {
  margin-top: var(--section-head-gap);
}
.price-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.price-table th,
.price-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.price-table thead th { background: var(--surface-sand); font-weight: 700; }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-8) var(--grid-gap-lg);
}
.price-table__toggle {
  margin-top: calc(1rem + var(--section-head-gap));
}
.price-table__toggle .icon { transition: transform var(--duration) var(--ease); }
.price-table__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* A lettered price list: one captioned table per group, balanced into two columns. */
.price-groups {
  columns: 2;
  column-gap: var(--grid-gap);
  margin-top: var(--head-gap);
}
.price-groups .table-wrap {
  break-inside: avoid;
  margin: 0 0 var(--grid-gap);
}
.price-groups .price-table { min-width: 0; }
.price-groups .price-table td:last-child { white-space: nowrap; text-align: right; }
.price-groups--collapsed { columns: 1; }
.price-groups--collapsed .table-wrap:not(:first-child) { display: none; }
.price-groups--collapsed .table-wrap:first-child {
  position: relative;
  overflow: hidden;
}
.price-groups--collapsed .table-wrap:first-child::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5rem;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--surface-card));
  pointer-events: none;
}
.price-table__caption {
  padding: 1.1rem 1rem 0.9rem;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-align: left;
  background: var(--surface-sky);
}
.price-table__statement {
  margin-top: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface-sky);
  color: var(--color-text);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
}
.price-table__statement > span { display: block; max-width: 34em; }
.price-table__statement strong { color: var(--ct-blue); font-weight: 800; }
@media (max-width: 1024px) {
  .price-groups { columns: 1; }
}
@media (max-width: 640px) {
  .price-table__head { grid-template-columns: 1fr; gap: var(--sp-5); }
  .price-table__toggle { width: 100%; margin-top: 0; }
}

.embed {
  margin-top: var(--head-gap);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sand);
}
.embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: var(--embed-ratio, 16 / 9);
  height: auto;
  border: 0;
}

/* Review cards are separate from the shared embed block. */
.video-reviews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--head-gap);
}
.video-review {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.video-review__preview,
.video-review__frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: var(--surface-sand);
}
.video-review__preview img { width: 100%; height: 100%; object-fit: cover; }
.video-review__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-dark);
  color: var(--color-text-inverse);
  font-size: 0;
  line-height: 0;
}
.video-review__play::before {
  content: "";
  width: 0;
  height: 0;
  border-block: 9px solid transparent;
  border-left: 15px solid currentColor;
  transform: translateX(2px);
}
.video-review__preview:hover .video-review__play { background: var(--color-text-strong); }
.video-review__preview:focus-visible { outline: 3px solid var(--color-text-strong); outline-offset: -4px; }
.video-review__unavailable {
  position: absolute;
  inset: var(--sp-3) var(--sp-2) auto;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.video-review__caption { padding: var(--sp-4); }
.video-review__caption h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.video-review__caption a { font-size: var(--fs-sm); text-decoration: underline; }
@media (max-width: 1023px) {
  .video-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .video-reviews { grid-template-columns: minmax(0, 1fr); }
}

/* Ratings belong to the reviews page, beside its live reviews widget. */
#yandex-widget .embed { background: transparent; overflow: visible; margin-top: 0; }
.otzyvy-layout {
  display: grid;
  /* Yandex caps the white reviews badge at 760px; a wider iframe exposes its beige body. */
  grid-template-columns: minmax(0, 47.5rem) 22rem;
  gap: var(--sp-6);
  justify-content: space-between;
  align-items: start;
}
.otzyvy-layout > iframe { height: 720px; aspect-ratio: auto; border-radius: var(--radius-lg); }
.otzyvy-ratings { display: grid; gap: var(--sp-4); }
.otzyvy-rating {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--border-sand);
  border-radius: 1.25rem;
  background: var(--surface-card);
}
.otzyvy-rating__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--ct-white);
  font-size: 2rem;
  font-weight: 700;
}
.otzyvy-rating__icon--irecommend { border-radius: 0.75rem; }
.otzyvy-rating__icon--otzovik { background: var(--rating-wine); font-size: 1.25rem; }
.otzyvy-rating__icon--avito { grid-template-columns: repeat(2, 1fr); gap: 0.25rem; background: transparent; }
.otzyvy-rating__icon--avito span { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--ct-blue); }
.otzyvy-rating__icon--avito span:nth-child(2) { background: var(--rating-red); }
.otzyvy-rating__icon--avito span:nth-child(3) { background: var(--rating-purple); }
.otzyvy-rating__icon--avito span:nth-child(4) { background: var(--rating-green); }
.otzyvy-rating__body { display: grid; gap: var(--sp-2); }
.otzyvy-rating__stars { color: var(--color-accent); font-size: 1.25rem; letter-spacing: 0.08em; line-height: 1; }
.otzyvy-rating__score { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; white-space: nowrap; }
.otzyvy-rating__score strong { font-family: var(--font-display); font-size: 2rem; line-height: 1.2; }
.otzyvy-rating__score span { font-size: var(--fs-caption); color: var(--color-text); }
.otzyvy-rating__link { color: var(--color-accent); font-size: var(--fs-sm); text-decoration: none; }
.otzyvy-rating__link:hover { text-decoration: underline; }
@media (max-width: 959px) {
  .otzyvy-layout { grid-template-columns: minmax(0, 1fr); }
  .otzyvy-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .otzyvy-ratings { grid-template-columns: minmax(0, 1fr); }
  .otzyvy-layout > iframe { height: 600px; }
}

/* ==========================================================================
   33. Постраничная навигация и поиск
   ========================================================================== */
.pagination__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding-inline: var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.pagination .current { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); }

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-4);
}
.search-form .field { flex: 1 1 18rem; }
.search-form--with-filter { flex-wrap: nowrap; }
.search-form--with-filter > .btn {
  /* HelveticaNeueCyr keeps the visible glyphs above the line-box centre. Asymmetric block
     padding optically centres the archive-search label without shifting every DS button. */
  padding-block: 0.2rem 0;
}

@media (max-width: 800px) {
  .search-form--with-filter { flex-wrap: wrap; }
  .search-form--with-filter .field,
  .search-form--with-filter .tag-filter { flex: 1 1 100%; }
  .search-form--with-filter .tag-filter__summary,
  .search-form--with-filter > .btn { width: 100%; }
}

/* ==========================================================================
   34. Разметка, приходящая из полей CFS
   Поля городских страниц несут собственный HTML: заголовок пункта обёрнут в <strong>,
   а лид — маркированным списком. Правила ниже возвращают им читаемую структуру,
   не требуя правки данных.
   ========================================================================== */
.feature__text strong,
.step__text strong { display: block; margin-bottom: 0.25em; font-size: var(--fs-body-lg); }

.page-hero__lead ul,
.page-hero__lead ol { padding-left: 1.2em; }
.page-hero__lead ul { list-style: disc; }
.page-hero__lead ol { list-style: decimal; }
.page-hero__lead li + li { margin-top: 0.3em; }
.page-hero__lead p + p { margin-top: 0.6em; }

.compare__cell--plus .compare__text { min-height: 100%; }

/* ==========================================================================
   35. Список ссылок раздела
   ========================================================================== */
.link-list {
  display: grid;
  gap: 0.35rem var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--head-gap);
  list-style: none;
}
.link-list[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-list__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  color: inherit;
  text-decoration: none;
}
.link-list__item a:hover { color: var(--color-link); }
.link-list__source { display: flex; align-items: center; gap: var(--sp-3); }
.link-list__logo {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
}
.link-list__logo img { width: 2rem; height: 2rem; object-fit: contain; border-radius: 0.375rem; }
.link-list__arrow { width: 0.7rem; height: 0.7rem; opacity: var(--icon-muted-opacity); }

@media (max-width: 1024px) {
  .link-list,
  .link-list[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .link-list,
  .link-list[data-columns="2"],
  .link-list[data-columns="3"] { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   36. Лендинг-режим
   Шапка без навигации и подвал без колонок: лендинг живёт одной целью, и меню из девяти
   пунктов с неё уводит. Режим включает раскладка страницы, а не отдельная пара header/footer.
   ========================================================================== */
.site-header--landing .site-header__inner { justify-content: space-between; }
.site-header--landing .site-phone { margin-left: auto; }

.footer__landing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.footer__landing-contacts { display: grid; gap: 0.35rem; text-align: right; }
.footer__landing-contacts a { color: inherit; }

@media (max-width: 640px) {
  .footer__landing { justify-content: flex-start; }
  .footer__landing-contacts { text-align: left; }
}

/* ==========================================================================
   37. Оффер лендинга
   ========================================================================== */
.offer { padding: var(--panel-pad-y) var(--panel-pad-x); }
.offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--grid-gap-lg);
  align-items: start;
}
.offer__copy { display: grid; gap: var(--sp-5); justify-items: start; }
.offer__title { max-width: 15em; text-wrap: balance; }
.offer__lead { max-width: 40em; }
.offer__lead > :first-child { margin-top: 0; }
.offer__lead > :last-child { margin-bottom: 0; }
.offer__bullets { max-width: 40em; font-size: var(--fs-body-lg); }
.offer__image { width: 100%; height: auto; border-radius: var(--radius-lg); }

.offer__form {
  display: grid;
  gap: var(--sp-5);
  padding: var(--card-pad);
  background: var(--surface-card);
  border-radius: var(--radius-xl);
}
.offer__form-title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.lead-form { display: grid; gap: var(--sp-4); }
.lead-form .field--wide { grid-column: 1 / -1; }
/* Две колонки полей, как в панели consultation (имя и телефон в одну строку); включает раскладка
   через аргумент class формы. Кнопка и согласие остаются на всю ширину. */
.lead-form--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 2.7rem);
}
.lead-form--grid .btn,
.lead-form--grid .note-pill { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .offer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   38. Экран благодарности
   ========================================================================== */
.thanks { padding: var(--panel-pad-y) var(--panel-pad-x); }
.thanks__inner {
  display: grid;
  gap: var(--sp-6);
  justify-items: start;
  max-width: 46em;
}
.thanks__mark { width: 3rem; height: 3rem; color: var(--color-brand); }
.thanks__title { text-wrap: balance; }
.thanks__lead > :first-child { margin-top: 0; }
.thanks__lead > :last-child { margin-bottom: 0; }
.thanks__steps { display: grid; gap: var(--sp-4); list-style: none; }
.thanks__steps li { display: flex; gap: var(--sp-4); align-items: baseline; font-size: var(--fs-body-lg); }
.thanks__num {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking);
  color: var(--color-brand);
}
.thanks__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================================================================
   39. Квиз
   Без JS все шаги видны сразу и форма отправляется одной кнопкой; класс quiz--stepped
   появляется только после успешного включения скрипта.
   ========================================================================== */
.quiz { padding: var(--panel-pad-y) var(--panel-pad-x); }
.quiz__head { display: grid; gap: var(--sp-4); justify-items: start; }
.quiz__title { max-width: 18em; text-wrap: balance; }
.quiz__lead { max-width: 44em; }
.quiz__progress {
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.quiz__form { display: grid; gap: var(--sp-8); margin-top: var(--head-gap); }
.quiz__step { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.quiz__question {
  padding: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.quiz__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.quiz__option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h-md);
  padding: 0 var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  cursor: pointer;
}
.quiz__option:hover { border-color: var(--color-brand); }
.quiz__option:has(input:checked) { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.quiz__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.quiz__fields .field--wide { grid-column: 1 / -1; }
.quiz__nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
/* Кнопки шагов существуют только для скрипта: без него их не показываем. */
.quiz:not(.quiz--stepped) .quiz__next,
.quiz:not(.quiz--stepped) .quiz__prev { display: none; }

@media (max-width: 768px) {
  .quiz__options,
  .quiz__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   40. Программа
   ========================================================================== */
.program { display: grid; gap: var(--sp-4); margin-top: var(--head-gap); list-style: none; }
.program__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border-soft);
}
.program__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--color-brand);
}
.program__body { display: grid; gap: 0.35rem; }
.program__title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-tight); }
.program__text { font-size: var(--fs-sm); line-height: var(--lh-body); }

.ct-layout-kurs-chinatoday #program .program {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ct-layout-kurs-chinatoday #program .program__item {
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--sp-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-paper);
}
.ct-layout-kurs-chinatoday #program .program__body { gap: var(--sp-3); }

@media (max-width: 768px) {
  .ct-layout-kurs-chinatoday #program .program { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .program__item { grid-template-columns: auto minmax(0, 1fr); }
  .program__item .pill { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   41. Спикеры
   ========================================================================== */
.speakers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
  list-style: none;
}
.speakers[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.speakers[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.speaker { gap: var(--sp-4); align-items: start; }
.speaker__photo {
  width: 100%;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}
.speaker__photo img { width: 100%; height: auto; display: block; }
.speaker__name { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-tight); }
.speaker__text { font-size: var(--fs-sm); line-height: var(--lh-body); }

@media (max-width: 1024px) {
  .speakers,
  .speakers[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .speakers,
  .speakers[data-columns="2"],
  .speakers[data-columns="4"] { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   42. Панель «что вы получите»
   ========================================================================== */
.checklist-panel { padding: var(--panel-pad-y) var(--panel-pad-x); display: grid; gap: var(--sp-8); }
.checklist-panel__copy { display: grid; gap: var(--sp-8); min-width: 0; }
.checklist-panel__title { max-width: 18em; text-wrap: balance; }
.checklist-panel__text { margin-top: calc(var(--sp-8) * -1 + var(--sp-4)); max-width: 46em; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.checklist-panel--text-introduces-list .checklist-panel__text {
  margin-top: 0;
  margin-bottom: calc(var(--sp-8) * -1 + var(--sp-4));
}
.checklist-panel__list { max-width: none; }
.checklist-panel__list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist-panel__list[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checklist-panel__list li { font-size: var(--fs-body-lg); }
.checklist-panel__highlight {
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-weight: 600;
}
.checklist-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* The audit closing note is substantive copy, not auxiliary microcopy. Match the checklist
   text size and use card geometry now that the paragraph wraps across several lines. */
.ct-layout-audit-fabrics #why .note-pill {
  align-items: flex-start;
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.ct-layout-audit-fabrics #why .note-pill .icon {
  flex: 0 0 auto;
  margin-top: 0.2em;
}

/* Пара чек-листов в одну строку (блок checklist-pair): карточки по половине ширины контейнера,
   общая сноска note относится к обеим и лежит под ними, а не внутри одной карточки. */
.checklist-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.checklist-pair + .note-pill { margin-top: var(--sp-8); }
.checklist-pair__head .lead { margin-top: var(--head-gap); max-width: 46em; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.checklist-pair__head + .checklist-pair { margin-top: var(--sp-8); }

@media (max-width: 900px) {
  .checklist-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Complete payment-agent scenarios keep comparison facts, audience, and action in one card. */
.scenario-pair__head .lead {
  max-width: 46em;
  margin-top: var(--head-gap);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.scenario-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}
.scenario-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--border-sand);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.scenario-card--sand { background: var(--surface-sand); }
.scenario-card__head { display: grid; gap: var(--sp-3); }
.scenario-card__label {
  color: var(--color-brand);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.scenario-card__kicker {
  width: fit-content;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sky);
  color: var(--color-text-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.scenario-card--sand .scenario-card__kicker { background: var(--surface-card); }
.scenario-card__title { text-wrap: balance; }
.scenario-card__text { line-height: var(--lh-body); }
.scenario-card__facts {
  display: grid;
  margin: 0;
  border-block: 1px solid var(--border-sand);
}
.scenario-card__fact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.scenario-card__fact + .scenario-card__fact { border-top: 1px solid var(--border-sand); }
.scenario-card__fact dt {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.scenario-card__fact dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text-strong);
  font-weight: 700;
}
.scenario-card__fit {
  margin-top: auto;
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--surface-sky);
  line-height: var(--lh-body);
}
.scenario-card--sand .scenario-card__fit { background: var(--surface-card); }
.scenario-card__action { display: flex; flex-wrap: wrap; }

@media (max-width: 900px) {
  .scenario-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .scenario-card__fact { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .scenario-card__action .btn { width: 100%; }
}

#turnkey .checklist-panel__list {
  display: grid;
  counter-reset: turnkey-step;
}
#turnkey .checklist-panel__list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding-block: var(--sp-5);
  counter-increment: turnkey-step;
}
#turnkey .checklist-panel__list li + li { border-top: 1px solid var(--border-sand); }
#turnkey .checklist-panel__list li:first-child { padding-top: 0; }
#turnkey .checklist-panel__list li:last-child { padding-bottom: 0; }
#turnkey .checklist-panel__list .icon { display: none; }
#turnkey .checklist-panel__list li::before {
  content: counter(turnkey-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--surface-sky);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
}
#turnkey .note-pill {
  max-width: 30em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#turnkey .note-pill .icon { color: var(--color-brand); }

.ct-layout-kontejnernye-perevozki #turnkey .note-pill {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* «Важно знать» на /dostavka-iz-kitaya/avtoperevozka-gruzov/ (body.ct-layout-avtoperevozka-gruzov):
   примечание о сборном грузе — текст смысловой, а не служебный, но наследует у note-pill
   --fs-xs (12px) рядом с пунктами списка в --fs-body-lg (18px) и читается как мелкий шрифт.
   Поднимаем до --fs-body (16px) с межстрочным --lh-body; остальные note-pill не трогаем. */
.ct-layout-avtoperevozka-gruzov #important .note-pill {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 640px) {
  #turnkey .checklist-panel__list li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-4); }
  #turnkey .checklist-panel__list li::before { width: 2.25rem; height: 2.25rem; }
}

/* Optional video sits beside the checklist, as on the course contents panel. */
.checklist-panel--embed {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.checklist-panel__embed { min-width: 0; }
.checklist-panel__embed .embed { margin-top: 0; }

@media (max-width: 768px) {
  .checklist-panel__list[data-columns="2"],
  .checklist-panel__list[data-columns="3"] { grid-template-columns: minmax(0, 1fr); }
}

/* Упаковка на /dostavka-iz-kitaya/: обычная секция без панели, чек-лист и фото в одном блоке. */
.packaging { display: grid; gap: var(--sp-8); }
.packaging__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  align-items: center;
  gap: var(--sp-8);
}
.packaging__list { max-width: none; }
.packaging__list li { font-size: var(--fs-body-lg); }
.packaging__image { width: 100%; max-width: 25rem; height: auto; border-radius: var(--radius-lg); }
.packaging__photos { margin-top: 0; }
/* Source photos differ in proportions; one frame keeps the captions of a row on one line. */
.packaging__photos img { aspect-ratio: 331 / 380; object-fit: cover; }

@media (max-width: 900px) {
  .packaging__content { grid-template-columns: minmax(0, 1fr); }
  .packaging__image { order: -1; max-width: 20rem; margin-inline: auto; }
}

/* Checklist decor: opt-in illustration column (`decor` arg), mirrors cta-panel's `decor`. */
.checklist-panel--decor-device {
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: center;
}
.checklist-panel__decor { display: flex; align-items: center; justify-content: center; }
.checklist-panel__device { width: 100%; max-width: 18rem; height: auto; border-radius: var(--radius-lg); }

/* Packaging photo is opt-in for /dostavka-iz-kitaya/. */
.checklist-panel--decor-packaging {
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  align-items: center;
}
.checklist-panel__image { width: 100%; max-width: 25rem; height: auto; border-radius: var(--radius-lg); }

.checklist-panel--decor-contract {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
}
.checklist-panel--decor-contract .checklist-panel__decor { order: -1; }
.checklist-panel__contract { width: 100%; max-width: 28rem; height: auto; border-radius: var(--radius-lg); }

@media (max-width: 900px) {
  .checklist-panel--decor-contract { grid-template-columns: minmax(0, 1fr); }
  .checklist-panel__contract { max-width: 20rem; }
  .checklist-panel--embed { grid-template-columns: minmax(0, 1fr); }
  .checklist-panel--decor-device { grid-template-columns: minmax(0, 1fr); }
  .checklist-panel--decor-device,
  .checklist-panel--decor-packaging { grid-template-columns: minmax(0, 1fr); }
  .checklist-panel--decor-device .checklist-panel__decor,
  .checklist-panel--decor-packaging .checklist-panel__decor { order: -1; }
  .checklist-panel__device { max-width: 14rem; margin-inline: auto; }
  .checklist-panel__image { max-width: 20rem; margin-inline: auto; }
}

/* ==========================================================================
   42a. Trust orbit: blocks/trust-orbit.php — вызовы на /dostavka-iz-kitaya/belaya/ и
   /dostavka-iz-kitaya/avtoperevozka-gruzov/.
   Заголовочная колонка: стандартный бренд-знак ct_brand_mark() над заголовком и lead-подзаголовком
   (grid, как .section-head других блоков), ниже bento-сетка: feature-тезис — тёмная карточка на
   две строки слева (её текст вынесен в lead, поэтому её содержание — крупная цифра сверху
   и колонка facts, прижатая к низу), остальные — светлые карточки 2×2 с крупной цифрой или иконкой вверху и
   текстом внизу (margin-top: auto выравнивает тексты по нижнему краю строки). Фон панели —
   общий panel--sky с noise.svg (--texture-dark); «орбиты» справа сверху — декоративный слой
   этого же блока: концентрические кольца плюс диск --surface-sky-deep с той же текстурой.
   ========================================================================== */
.trust-orbit-panel {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 1.6vw, 3rem);
  /* Contain the negatively offset orbit decor here, not via the shared .panel rules. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.trust-orbit__orbits {
  position: absolute;
  z-index: -1;
  top: clamp(-16rem, -8rem - 8vw, -9rem);
  right: clamp(-16rem, -8rem - 8vw, -9rem);
  width: clamp(22rem, 14rem + 22vw, 38rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background-color: var(--surface-sky-deep);
  background-image:
    repeating-radial-gradient(circle, transparent 0 3.85rem, var(--color-brand) 3.85rem 3.95rem, transparent 3.95rem 4rem),
    var(--texture-dark);
  -webkit-mask-image: radial-gradient(circle, var(--ct-black) 45%, transparent 71%);
  mask-image: radial-gradient(circle, var(--ct-black) 45%, transparent 71%);
  opacity: 0.7;
}

.trust-orbit__header { display: grid; gap: var(--section-head-gap); }
.trust-orbit__title { margin: 0; max-width: none; text-align: left; text-wrap: balance; }
.trust-orbit__lead {
  margin: 0;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  opacity: 0.8;
}

.trust-orbit__list {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-orbit__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-height: 11.5rem;
  padding: clamp(1.25rem, 1rem + 0.6vw, 1.75rem);
  background: var(--surface-card);
  border: 1px solid var(--border-sky);
  border-radius: var(--radius-lg);
  text-align: left;
}
.trust-orbit__item--feature {
  grid-row: span 2;
  justify-content: space-between;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.5rem);
  background: var(--surface-dark);
  background-image: var(--texture-light);
  border-color: var(--surface-dark);
  color: var(--color-text-inverse);
}

.trust-orbit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }

.trust-orbit__stat { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.trust-orbit__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking);
  color: var(--color-text-strong);
}
.trust-orbit__unit { font-size: var(--fs-caption); line-height: var(--lh-tight); color: var(--color-text); }
.trust-orbit__item--feature .trust-orbit__value {
  font-size: clamp(5rem, 3.4rem + 4.4vw, 8.5rem);
  color: var(--color-brand);
}
.trust-orbit__item--feature .trust-orbit__unit { font-size: var(--fs-body-lg); color: var(--color-text-inverse); }

.trust-orbit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface-sky);
  color: var(--color-text-strong);
  font-size: 1.5rem;
}

.trust-orbit__facts {
  display: flex;
  gap: clamp(1.25rem, 0.75rem + 1.4vw, 2.5rem);
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
}
.trust-orbit__fact { display: flex; flex-direction: column; gap: var(--sp-1); }
.trust-orbit__fact-value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking);
}
.trust-orbit__fact-label { margin: 0; font-size: var(--fs-caption); opacity: 0.7; }

/* Feature-карточка без text: цифры занимают всю её высоту — facts становятся колонкой строк
   «значение — подпись» с разделителями, поэтому под главной цифрой не остаётся пустого места. */
.trust-orbit__item--feature .trust-orbit__facts {
  flex-direction: column;
  gap: 0;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}
.trust-orbit__item--feature .trust-orbit__fact {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
  border-top: 1px solid var(--line-on-dark);
}
.trust-orbit__item--feature .trust-orbit__fact:last-child { padding-bottom: 0; }
.trust-orbit__item--feature .trust-orbit__fact-value {
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  color: var(--color-brand);
}
.trust-orbit__item--feature .trust-orbit__fact-label {
  font-size: var(--fs-body-lg);
  text-align: right;
  opacity: 0.75;
}

.trust-orbit__text { margin: 0; margin-top: auto; font-size: var(--fs-body); line-height: var(--lh-body); }
.trust-orbit__text b { color: var(--color-text-strong); }
.trust-orbit__item--feature .trust-orbit__text { max-width: 26rem; font-size: var(--fs-body-lg); }
.trust-orbit__item--feature .trust-orbit__text b { color: var(--color-brand); }

@media (max-width: 1024px) {
  .trust-orbit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-orbit__item--feature { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 768px) {
  .trust-orbit__list { grid-template-columns: minmax(0, 1fr); }
  .trust-orbit__item { min-height: 0; }
  .trust-orbit__orbits { top: -9rem; right: -11rem; width: 22rem; }
}

/* ==========================================================================
   42b. Handoff: blocks/handoff.php — единственный вызов на /dostavka-iz-kitaya/belaya/ (#supplier).
   Слева нумерованные шаги клиента, справа белая карточка-схема: узлы цепочки на пунктирной рейке,
   подписи переходов между узлами; итоговое обещание — под кнопкой, вне карточки. Рейка рисуется ::before узла от центра его
   точки до центра следующей, поэтому схема не зависит от высоты карточек.
   ========================================================================== */
.handoff {
  --handoff-dot: 1.5rem;
  --handoff-dot-top: 1.15rem;
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--grid-gap-lg);
  align-items: center;
}
.handoff__copy { display: grid; gap: var(--sp-8); min-width: 0; }
.handoff__title { max-width: 13em; text-wrap: balance; }

.handoff__steps { display: grid; list-style: none; }
.handoff__step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding-block: var(--sp-5);
}
.handoff__step + .handoff__step { border-top: 1px solid var(--border-sand); }
.handoff__step:first-child { padding-top: 0; }
.handoff__step:last-child { padding-bottom: 0; }
.handoff__step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--surface-sky);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
}
.handoff__step-body { display: grid; gap: var(--sp-2); padding-top: var(--sp-1); }
.handoff__step-title {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
}
#supplier .handoff__step-title { font-weight: var(--fw-medium); }
.handoff__step-text { margin: 0; max-width: 34em; font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.handoff__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.handoff__illustration { width: 100%; max-width: 18rem; height: auto; border-radius: var(--radius-lg); }

.handoff__scheme {
  margin: 0;
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
  min-width: 0;
}
.handoff__scheme-label,
.handoff__node-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}
.handoff__scheme-label { opacity: 0.6; }

.handoff__flow { display: grid; list-style: none; }
.handoff__node {
  position: relative;
  display: grid;
  grid-template-columns: var(--handoff-dot) minmax(0, 1fr);
  column-gap: var(--sp-4);
}
.handoff__node:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--handoff-dot) / 2 - 1px);
  top: calc(var(--handoff-dot-top) + var(--handoff-dot) / 2);
  bottom: calc((var(--handoff-dot-top) + var(--handoff-dot) / 2) * -1);
  border-left: 2px dashed var(--border-sand);
}
.handoff__node-dot {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: var(--handoff-dot);
  height: var(--handoff-dot);
  margin-top: var(--handoff-dot-top);
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface-card);
  animation: handoff-dot-relay 9s ease-in-out infinite;
}
.handoff__flow .handoff__node:nth-child(2) .handoff__node-dot { animation-delay: 3s; }
.handoff__flow .handoff__node:nth-child(3) .handoff__node-dot { animation-delay: 6s; }
.handoff__node-card {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-paper);
  animation: handoff-card-relay 9s ease-in-out infinite;
}
.handoff__flow .handoff__node:nth-child(2) .handoff__node-card { animation-delay: 3s; }
.handoff__flow .handoff__node:nth-child(3) .handoff__node-card { animation-delay: 6s; }
.handoff__node-label { opacity: 0.65; line-height: 1; }
.handoff__node-logo { display: block; width: 4.5rem; height: auto; color: var(--color-text-strong); }
.handoff__node-title { margin: 0; font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); }

.handoff__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); list-style: none; }
.handoff__chip {
  padding: 0.35em 0.85em;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font-size: var(--fs-caption);
  line-height: 1.1;
}

/* Movement cue: each node lights up brand-blue in turn (1 -> 2 -> 3), then the relay repeats.
   Replaces the old permanently-dark 3rd node (--surface-dark + --texture-light), which was the
   only spot in the design using that heavy dark treatment on a small card. */
@keyframes handoff-dot-relay {
  0%, 100% { border-color: var(--border-strong); background: var(--surface-card); box-shadow: none; }
  8%, 27% { border-color: var(--color-brand); background: var(--color-brand); box-shadow: 0 0 0 6px var(--surface-brand-soft); }
  36% { border-color: var(--border-strong); background: var(--surface-card); box-shadow: none; }
}
@keyframes handoff-card-relay {
  0%, 100% { border-color: var(--border-default); background: var(--surface-paper); }
  8%, 27% { border-color: var(--color-brand); background: var(--surface-brand-soft); }
  36% { border-color: var(--border-default); background: var(--surface-paper); }
}

@media (prefers-reduced-motion: reduce) {
  .handoff__node-dot,
  .handoff__node-card { animation: none; }
}

.handoff__via {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
}
.handoff__via span { opacity: 0.75; }
.handoff__via-icon { width: 0.8rem; height: 0.8rem; transform: rotate(90deg); color: var(--color-brand); }

/* Closing promise lives under the CTA, outside the white scheme card: no box, just a brand check. */
.handoff__cta { display: grid; gap: var(--sp-5); justify-items: start; }
.handoff__highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  max-width: 30em;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text-strong);
}
.handoff__highlight strong { font-weight: 500; }
.handoff__highlight-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-brand); }

@media (max-width: 1100px) {
  .handoff { grid-template-columns: minmax(0, 1fr); }
  .handoff__title { max-width: 18em; }
  .handoff__scheme { width: min(100%, 38rem); }
  .handoff__illustration { max-width: 14rem; }
}
@media (max-width: 640px) {
  .handoff__step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--sp-4); }
  .handoff__step-index { width: 2.25rem; height: 2.25rem; }
  /* Narrow screens drop the rail: the dot column would eat a fifth of the card width. */
  .handoff__scheme { padding: var(--sp-4); border-radius: var(--radius-lg); }
  .handoff__node { grid-template-columns: minmax(0, 1fr); }
  .handoff__node:not(:last-child)::before,
  .handoff__node-dot { display: none; }
  .handoff__node-card,
  .handoff__via { grid-column: 1; }
  .handoff__node-card { padding: var(--sp-4); }
  .handoff__via { padding-inline: var(--sp-4); }
  .handoff__cta { justify-items: stretch; }
  .handoff__actions .btn { width: 100%; white-space: normal; }
}

/* ==========================================================================
   42.1. Инструменты для комфортной работы
   ========================================================================== */
.comfort-showcase .section-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 0.9rem + 2.5vw, 4rem);
  border-radius: var(--radius-xl);
  background-color: var(--surface-sky);
  background-image: var(--texture-light);
}
.comfort-showcase .section-head,
.comfort-showcase__grid { position: relative; z-index: 1; }
.comfort-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
  list-style: none;
}
.comfort-showcase__card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--sp-6);
  min-height: 18rem;
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 3rem);
  border: 1px solid var(--border-sky);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
}
.comfort-showcase__card:nth-child(2),
.comfort-showcase__card:nth-child(3) {
  border-color: var(--border-sand);
  background: var(--surface-sand);
}
.comfort-showcase__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.comfort-showcase__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-sky);
  color: var(--color-brand);
}
.comfort-showcase__icon .icon { width: 1.75rem; height: 1.75rem; }
.comfort-showcase__index {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  color: var(--border-sky);
}
.comfort-showcase__card:nth-child(2) .comfort-showcase__index,
.comfort-showcase__card:nth-child(3) .comfort-showcase__index { color: var(--border-sand); }
.comfort-showcase__title {
  max-width: 22ch;
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.comfort-showcase__points {
  display: grid;
  align-content: end;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-lg);
  line-height: 1.4;
}
.comfort-showcase__points li {
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.comfort-showcase__points li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

@media (max-width: 1024px) {
  .comfort-showcase__card { min-height: 16rem; }
  .comfort-showcase__points { font-size: var(--fs-body); }
}
@media (max-width: 640px) {
  .comfort-showcase .section-inner { padding: var(--sp-5); }
  .comfort-showcase__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-8);
  }
  .comfort-showcase__card { min-height: 0; padding: var(--sp-5); gap: var(--sp-5); }
  .comfort-showcase__icon { width: 2.75rem; height: 2.75rem; }
  .comfort-showcase__icon .icon { width: 1.4rem; height: 1.4rem; }
  .comfort-showcase__index { font-size: 2rem; }
  .comfort-showcase__title { font-size: var(--fs-h4); }
  .comfort-showcase__points { align-content: start; }
}

/* ==========================================================================
   43. Галерея
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--head-gap);
  list-style: none;
  counter-reset: gallery-item;
}
.gallery[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery__item { counter-increment: gallery-item; }
.gallery figure { margin: 0; display: grid; gap: var(--sp-3); }
.gallery img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.gallery figcaption {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-strong);
}
.gallery figcaption::before {
  content: counter(gallery-item);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Keep the quality-check explanation visually subordinate to its heading. */
#quality-photos > .section-inner > .lead {
  margin-top: var(--section-head-gap);
  font-size: var(--fs-body-lg);
}

@media (max-width: 1024px) {
  .gallery,
  .gallery[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: a one-column photo stack ran two to four screens for four photos. Photos without
   captions sit two per row; a captioned photo becomes a row — thumbnail left, caption right —
   so the caption, the content of the block, stays next to what it describes. */
@media (max-width: 640px) {
  .gallery,
  .gallery[data-columns="2"],
  .gallery[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .gallery:has(figcaption),
  .gallery[data-columns]:has(figcaption) { grid-template-columns: minmax(0, 1fr); }
  .gallery:has(figcaption) figure { grid-template-columns: 8rem minmax(0, 1fr); align-items: start; }
  .gallery:has(figcaption) img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
}

/* Ряд логотипов (маркетплейсы фулфилмента) — не фотогалерея. Каждый логотип живёт
   в отдельной плашке, остаётся серым в покое и возвращает фирменные цвета при
   наведении. На телефоне ряд остаётся многоколоночным. */
.gallery[data-variant="logos"],
.gallery[data-variant="logos"][data-columns="2"],
.gallery[data-variant="logos"][data-columns="4"] {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  align-items: stretch;
}
.gallery[data-variant="logos"] figure {
  min-height: 6.5rem;
  padding: var(--sp-5);
  place-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.gallery[data-variant="logos"] img {
  width: auto;
  max-width: 100%;
  max-height: 2.25rem;
  border-radius: 0;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .gallery[data-variant="logos"] .gallery__item:hover figure {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-card-soft);
  }
  .gallery[data-variant="logos"] .gallery__item:hover img {
    filter: none;
    opacity: 1;
  }
}

/* Keep low-resolution source review photographs at their natural size. */
.gallery[data-variant="thumbnails"] { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.gallery[data-variant="thumbnails"] figure { justify-items: center; }
.gallery[data-variant="thumbnails"] img { width: auto; max-width: 100%; max-height: 10rem; }
/* Report collages differ in proportions: equal tiles show each one whole instead of a ragged row. */
.gallery[data-variant="tiles"] img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-sand); }

/* START_BLOCK_HOME_FULL */
/* PURPOSE: Blocks that exist on the live chinatoday.ru home page but not in the Figma frame 31:2
   layout — hero benefit list, service category filters, the personal-manager block, the aggregator
   ratings row and the trailing SEO copy. Loaded by the primary design-new/index.html, after
   styles.css, so the shared design system stays untouched.
   All values reference tokens declared in styles.css :root — no literal colours here. */

/* Hero benefit list ------------------------------------------------------ */

.hero__benefits {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-8);
  padding: 0;
  list-style: none;
  max-width: 34em;
}

.hero__benefit {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-body-lg);
}

.hero__benefit .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: var(--space-em-0-15);
  flex: 0 0 auto;
  color: var(--color-brand);
}

.hero__benefit b { font-weight: var(--fw-bold); }

/* Service category filters ----------------------------------------------- */
/* Filters belong to the card grid they control: wide gap above, tight gap below. */
#services .section-head { margin-bottom: var(--sp-4); }

#services .lead { margin-bottom: var(--sp-16); }

.services__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* styles.css gives .services__grid margin-top: var(--head-gap) for the head → grid case;
   with filters in between the gap is owned by .services__filters margin-bottom. */
#services .services__grid { margin-top: 0; }

.services__filter {
  position: relative;
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking);
  border-radius: var(--radius-pill);
  padding: 0.6rem var(--sp-5);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

/* border-color transitions can't run on the compositor thread (Lighthouse: non-composited
   animation). A ring drawn on top and cross-faded via opacity gives the same hover/pressed
   feedback off the main thread instead. */
.services__filter::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--border-strong);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}

.services__filter:hover::after { opacity: 1; }

.services__filter[aria-pressed="true"] {
  background: var(--surface-sky);
}

.services__filter[aria-pressed="true"]::after {
  border-color: var(--border-sky);
  opacity: 1;
}
/* Phone: 64px under the lead and six 44px filters in three rows pushed the first service below
   the screen. Tighter gap, compact filters in two rows. */
@media (max-width: 640px) {
  #services .lead { margin-bottom: var(--sp-6); }
  .services__filters { gap: var(--sp-2); }
  .services__filter { min-height: 2.25rem; padding: 0.35rem 0.85rem; font-size: var(--fs-caption); }
}

/* Without JS every card stays visible: the filter only ever adds the hidden attribute. */
.service-card[hidden] { display: none; }

/* All service cards share the base surface; the sand highlight appears only on hover. */
.service-card { transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease); }

/* Pointer hover only: after a tap on a touch screen :hover sticks and the card stayed sand. */
@media (hover: hover) {
  .service-card:hover {
    background: var(--surface-sand);
    background-image: var(--texture-dark);
    border-color: transparent;
  }
}

/* Personal manager ------------------------------------------------------- */
.support__grid {
  display: grid;
  gap: var(--grid-gap-lg);
  padding: var(--panel-pad-y) var(--panel-pad-x);
}

.support__title { margin: var(--sp-6) 0 var(--sp-5); }

.support__text { font-size: var(--fs-lead); margin: 0; max-width: 24em; }

.support__list { margin: var(--sp-8) 0 0; }

/* Contact card: paper sub-panel with phone and messenger channels -------- */
.support__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--support-card-padding);
  background: var(--surface-paper);
  background-image: var(--texture-dark);
  border-radius: var(--radius-xl);
}

.support__card-label { margin: 0; font-size: var(--fs-body-lg); }

.support__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-phone);
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.support__phone .icon { width: 1em; height: 1em; }

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

.support__channels { display: grid; gap: var(--sp-3); }

.support__channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--control-h-md);
  padding: 0 var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.support__channel > .icon { width: 1.375rem; height: 1.375rem; }

.support__channel .support__channel-arrow {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: auto;
  opacity: var(--icon-muted-opacity);
}

.support__channel:hover,
.support__channel.is-highlighted { background: var(--surface-sky); }

@media (min-width: 1024px) {
  /* Copy children join the panel grid so the card spans title top to last list item bottom. */
  .support__grid { grid-template-columns: 1.1fr 1fr; column-gap: var(--grid-gap-lg); row-gap: 0; align-items: start; }
  .support__copy { display: contents; }
  .support__copy > .brand-mark { grid-column: 1; margin-bottom: var(--sp-6); }
  .support__title { grid-column: 1; margin-top: 0; }
  .support__text,
  .support__list { grid-column: 1; }
  .support__card { grid-column: 2; grid-row: 2 / span 3; align-self: stretch; justify-content: center; }
}

/* Aggregator ratings row ------------------------------------------------- */
.reviews__ratings {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--grid-gap);
}

.reviews__ratings-title {
  font-size: var(--fs-h4);
  font-family: var(--font-display);
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 1199px) {
  .reviews__ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews__ratings-title { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
  .reviews__ratings { grid-template-columns: 1fr; }
  .reviews__ratings-title { grid-column: auto; }
}

/* Trailing SEO copy ------------------------------------------------------ */
.seo-text { display: grid; gap: var(--sp-5); }

.seo-text p { margin: 0; max-width: 68em; }

.seo-text__more { border: 0; padding: 0; }

.seo-text__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-link);
  margin-bottom: var(--sp-5);
}

.seo-text__more > summary::-webkit-details-marker { display: none; }

.seo-text__more[open] > summary { margin-bottom: var(--sp-5); }

.seo-text__more > summary .icon { width: 1.25rem; height: 1.25rem; }

.seo-text__more[open] > summary .icon { transform: rotate(180deg); }

.seo-text__body { display: grid; gap: var(--sp-5); }

/* END_BLOCK_HOME_FULL */

/* Collapsible editorial content (content block, `collapsible` arg) ------- */
.prose__more { border: 0; padding: 0; margin-top: var(--sp-5); }

.prose__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-link);
}

.prose__more > summary::-webkit-details-marker { display: none; }

.prose__more[open] > summary { margin-bottom: var(--sp-5); }

.prose__more > summary .icon { width: 1.25rem; height: 1.25rem; }

.prose__more[open] > summary .icon { transform: rotate(180deg); }

.prose__more-body { display: grid; gap: var(--sp-5); }

/* ==========================================================================
   44. Страница материала: колонка чтения и липкая рейка
   Одна сетка на всю статью: шапка и текст занимают левую колонку, оглавление с карточкой
   автора — правую. На узком экране рейка встаёт между шапкой и текстом, потому что оглавление
   нужно до чтения, а не после него.
   ========================================================================== */
.article__grid {
  width: min(100%, var(--article-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--article-rail);
  grid-template-areas:
    "head rail"
    "body rail";
  column-gap: var(--article-gap);
  row-gap: var(--sp-10);
  align-items: start;
}
.article--solo .article__grid {
  width: min(100%, 46rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "body";
}
.article__head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  justify-items: start;
  min-width: 0;
}
/* align-self: stretch отменяет align-items: start сетки: без полной высоты у липкой рейки нет
   хода прокрутки, и она уезжает вместе с текстом. */
.article__rail { grid-area: rail; min-width: 0; align-self: stretch; }
.article__column { grid-area: body; min-width: 0; }
.article__body { max-width: none; }

.article__rail-inner {
  height: 100%;
}
.article__rail-inner > * + * { margin-top: var(--sp-4); }

/* Оглавление уходит вместе со страницей; контакты и предложение остаются в поле зрения. */
.article__rail-sticky {
  position: sticky;
  top: var(--sticky-top);
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.article__chips { gap: var(--sp-2) var(--sp-3); }
.chip--link { text-decoration: none; color: inherit; transition: background-color var(--duration) var(--ease); }
.chip--link:hover { background: var(--surface-sky-deep); }

.article__title {
  font-size: var(--fs-display-md);
  max-width: 18em;
  text-wrap: balance;
}
.article__lead { max-width: 44em; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  color: var(--color-text);
}
.article-meta__item { display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0.75; }
.article-meta__item a { color: inherit; }
.article-meta__icon { width: 1rem; height: 1rem; }
.article-meta__item--updated { opacity: 0.55; }

.article__cover { width: 100%; margin: var(--sp-3) 0 0; }
.article__cover-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  display: block;
}
.article__cover-credit { font-size: var(--fs-caption); opacity: 0.6; margin-top: var(--sp-3); }

.article__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-6);
  margin-top: var(--section-gap);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--border-sky);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--surface-sky), var(--surface-paper));
}
.article-subscribe__icon { width: 4rem; height: 4rem; }
.article-subscribe__eyebrow { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.article-subscribe__title { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
.article-subscribe__text { margin: var(--sp-4) 0 var(--sp-6); line-height: 1.6; }
.article-subscribe__button { background: var(--color-messenger-detail); color: var(--color-text-inverse); white-space: normal; text-align: center; }
.article-subscribe__button:hover { background: var(--surface-dark); }
@media (max-width: 640px) {
  .article__foot { grid-template-columns: minmax(0, 1fr); }
  .article-subscribe__icon { width: 3rem; height: 3rem; }
  .article-subscribe__button { width: 100%; }
}

.share-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.share-link:hover { background: var(--surface-sky); border-color: var(--border-sky); }
.share-link__icon { width: 1.125rem; height: 1.125rem; }
.share-link__done {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-xs);
  background: var(--surface-dark);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .article__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "rail"
      "body";
  }
  .article__rail-inner { height: auto; }
  .article__rail-sticky { position: static; }
}
/* Phone: only the table of contents stays between the head and the text. The consultation card,
   the deferment offer and the author card of the rail follow the article: above it they pushed
   the first paragraph a screen and a half down. The rail wrappers dissolve so each card becomes
   a flex item of the article and takes its own place in the reading order. */
@media (max-width: 640px) {
  /* stretch, not the grid's `start`: a start-aligned column takes the min-content width of a wide
     table (34rem inside .prose__scroller) and pushes the page sideways. */
  .article__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-8); }
  .article__rail,
  .article__rail-inner,
  .article__rail-sticky { display: contents; }
  .article__rail-inner > * + * { margin-top: 0; }
  .article__head { order: 1; }
  .article__rail-inner > .toc { order: 2; }
  .article__column { order: 3; }
  .article__rail-sticky > *,
  .article__rail-inner > .author-card { order: 4; }
}

/* ==========================================================================
   45. Оглавление материала
   <details open> вместо кнопки: без JavaScript оглавление раскрыто и работает как список
   ссылок. Ниже 1200px его можно свернуть, выше — сворачивание выключено, панель всегда видна.
   ========================================================================== */
.toc__panel {
  padding: var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.toc__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__icon { width: 1.125rem; height: 1.125rem; opacity: 0.5; }
.toc__title { flex: 1 1 auto; }
.toc__chevron { width: 1.125rem; height: 1.125rem; transition: transform var(--duration) var(--ease); }
.toc__panel[open] .toc__chevron { transform: rotate(180deg); }

.toc__list {
  display: grid;
  gap: 0.15rem;
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.toc__sublist {
  display: grid;
  gap: 0.15rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.toc__sublist[hidden] { display: none; }
.toc__link {
  display: block;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--border-soft);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-caption);
  line-height: 1.35;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.toc__link:hover { background: var(--surface-paper); color: var(--color-text-strong); }
.toc__link.is-current {
  border-left-color: var(--color-accent);
  background: var(--surface-sky);
  color: var(--color-text-strong);
  font-weight: 700;
}
.toc__item--h3 .toc__link { padding-left: 1.4rem; opacity: 0.85; }

.toc__progress {
  height: 3px;
  margin-top: var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--border-soft);
  overflow: hidden;
}
.toc__progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
}

@media (min-width: 1200px) {
  /* На широком экране панель — заголовок рейки, а не переключатель. */
  .toc__summary { pointer-events: none; }
  .toc__chevron { display: none; }
}

/* ==========================================================================
   46. Карточка автора
   ========================================================================== */
.article__body .article-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--border-sky);
  border-radius: var(--radius-lg);
  background: var(--surface-sky);
}
.article-author__avatar { flex: 0 0 4rem; }
.article__body .article-author__avatar img {
  width: 4rem;
  height: 4rem;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.article-author__identity { display: grid; gap: var(--sp-1); flex: 1 1 12rem; min-width: 0; }
.article-author__label, .article-author__bio { font-size: var(--fs-caption); line-height: var(--lh-body); }
.article__body a.article-author__name { color: var(--color-text-strong); font-weight: var(--fw-bold); text-decoration: none; }
.article__body a.article-author__link { font-size: var(--fs-caption); color: var(--color-text-strong); text-underline-offset: 0.2em; }
.article__body a.article-author__name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 480px) {
  .article__body .article-author { gap: var(--sp-3); padding: var(--sp-4); }
  .article-author__identity { flex-basis: calc(100% - 5rem); }
  .article-author__action { margin-left: 4.75rem; }
}

.author-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.author-card__kicker { font-size: var(--fs-xs); letter-spacing: 0.08em; opacity: 0.5; }
.author-card__row { display: flex; align-items: center; gap: var(--sp-4); }
.author-card__photo {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.author-card__photo--monogram {
  display: grid;
  place-items: center;
  background: var(--surface-sky);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--tracking);
  color: var(--color-text-strong);
}
.author-card__ident { display: grid; gap: 0.2rem; min-width: 0; }
.author-card__name { font-weight: 700; color: var(--color-text-strong); text-decoration: none; }
.author-card__name:hover { color: var(--color-link); }
.author-card__role { font-size: var(--fs-caption); opacity: 0.7; line-height: var(--lh-body); }
.author-card__bio { font-size: var(--fs-sm); line-height: var(--lh-body); }
.author-card__tg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-caption);
  color: var(--color-link);
  text-decoration: none;
  justify-self: start;
}
.author-card__tg:hover { text-decoration: underline; }
.author-card__tg-icon { width: 1.125rem; height: 1.125rem; }

.author-card--bio {
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--surface-sand);
  background-image: var(--texture-dark);
  border-color: transparent;
}
.author-card--bio .author-card__photo { width: 5.5rem; height: 5.5rem; }
.author-card--bio .author-card__photo--monogram { font-size: 2rem; }
.author-card--bio .author-card__name { font-size: var(--fs-h4); }
.author-card--bio .author-card__bio { font-size: var(--fs-body-lg); max-width: 60ch; }

/* ==========================================================================
   47. Предложение в рейке материала
   ========================================================================== */
.side-cta {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.side-cta--sky { background: var(--surface-sky); background-image: var(--texture-dark); }
.side-cta--sand { background: var(--surface-sand); background-image: var(--texture-dark); }
.side-cta--accent { background: var(--surface-dark); background-image: var(--texture-light); color: var(--color-text-inverse); }
.side-cta__icon { width: 1.5rem; height: 1.5rem; }
.side-cta__title { font-weight: 700; font-size: var(--fs-body-lg); line-height: var(--lh-tight); }
.side-cta__text { font-size: var(--fs-caption); line-height: var(--lh-body); }
.side-cta--accent .side-cta__btn { border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.side-cta__btn { margin-top: var(--sp-2); }
/* justify-items: start сжимает сетку по содержимому — каналам и телефону нужна вся ширина. */
.side-cta .site-msg--rail,
.side-cta__phone { justify-self: stretch; }
.side-cta__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-xs);
  background: var(--surface-sky-deep);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking);
  text-decoration: none;
}
.side-cta__phone:hover { background: var(--surface-card); }
.side-cta__phone-icon { width: 1.375rem; height: 1.375rem; opacity: 0.55; }

/* Каналы в рейке: две колонки, чтобы четыре мессенджера не съели высоту липкой колонки. */
.site-msg--rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
}
/* .site-msg__link — inline-flex по контенту: без width он не растягивается на ширину
   <li>-ячейки грида, и кнопки выходят разной ширины (по длине подписи канала). */
.site-msg--rail .site-msg__link {
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  font-size: var(--fs-caption);
  font-weight: 500;
}
.site-msg--rail .site-msg__link:hover { background: var(--surface-sky-deep); }
.site-msg--rail .site-msg__link .icon { flex: 0 0 1.25rem; }

/* ==========================================================================
   47b. Баннер услуги в рейке материала
   Контраст здесь — назначение блока, а не украшение. Страница материала белая, её карточки
   голубые и песочные, поэтому рекламный блок сделан тёмным: он читается как другой слой, а не
   как ещё одна панель текста. Фирменный цвет живёт в числе и в подсветке, а не в заливке —
   сплошной оранжевый прямоугольник в рейке выглядел баннерной вставкой из чужого макета.
   Липким баннер делает та же рейка, что держит оглавление, отдельного sticky у него нет.
   ========================================================================== */
.offer-card {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--surface-dark);
  background-image: var(--texture-light),
    radial-gradient(120% 90% at 100% 0%, rgba(57, 201, 236, 0.22), rgba(57, 201, 236, 0) 55%),
    radial-gradient(130% 100% at 0% 100%, rgba(255, 98, 30, 0.45), rgba(255, 98, 30, 0) 60%),
    linear-gradient(160deg, var(--ct-ink), var(--ct-black));
  color: var(--color-text-inverse);
  overflow: hidden;
}
.offer-card > * { position: relative; z-index: 1; }

/* Дуга с монетой: деньги уходят позже, чем товар. Декорация конкретного блока, не иконка. */
.offer-card__deco {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  width: 4.75rem;
  height: 4.75rem;
  color: var(--color-brand);
  opacity: 0.75;
  pointer-events: none;
}
/* Дуга наследует цвет бренда от svg, монета — акцент: два тона читаются как движение денег. */
.offer-card__deco-coin { color: var(--color-accent); }

.offer-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  /* Не заезжает под дугу в правом верхнем углу; ниже 0.08em, чтобы уместиться в одну строку. */
  max-width: 68%;
  color: var(--color-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--lh-tight);
}
.offer-card__kicker-icon { flex: 0 0 auto; width: 1rem; height: 1rem; }

/* Число — единственный крупный элемент карточки: перечень условий мелким текстом в рейке
   шириной 22rem не читают. Заливка градиентом, а цветом — запасной вариант для движков без
   background-clip: text и для режима принудительных цветов, где прозрачный текст исчезает. */
.offer-card__value {
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: var(--tracking);
  color: var(--color-brand);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .offer-card__value {
    background-image: linear-gradient(96deg, var(--ct-orange-soft), var(--ct-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .offer-card__value { background-image: none; color: CanvasText; }
}

.offer-card__lead {
  max-width: 16em;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.offer-card__rate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: start;
  margin-top: var(--sp-1);
  padding: 0.3rem var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
}
.offer-card__rate-icon { width: 1rem; height: 1rem; color: var(--color-brand); }
.offer-card__btn { margin-top: var(--sp-2); }
.offer-card__note { font-size: var(--fs-xs); opacity: 0.6; }

/* ==========================================================================
   48. Редакторские компоненты внутри текста
   Врезка, цитата, итоги, шаги, числа, вопросы и призыв. Разметку печатают шорткоды
   inc/editorial.php, поэтому оформление правится здесь один раз для всех статей.
   ========================================================================== */
.callout {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid;
  border-radius: var(--radius-lg);
}
.callout--info { background: var(--surface-note-info); border-color: var(--border-note-info); }
.callout--warn { background: var(--surface-note-warn); border-color: var(--border-note-warn); }
.callout--success { background: var(--surface-note-success); border-color: var(--border-note-success); }
.callout--tip { background: var(--surface-note-tip); border-color: var(--border-note-tip); }
.callout--plain { background: var(--surface-sand); border-color: var(--border-sand); }
.callout__icon { width: 1.375rem; height: 1.375rem; flex: 0 0 auto; margin-top: 0.15em; }
.callout__body { min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.callout__body > * + * { margin-top: 0.6em; }
.callout__title { font-weight: 700; }

.pullquote {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-8);
  border-radius: var(--radius-xl);
  background: var(--surface-sand);
  background-image: var(--texture-dark);
}
.pullquote__mark {
  width: 2rem;
  height: 2rem;
  color: var(--color-brand);
  opacity: 0.45;
}
.prose .pullquote__text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
}
.pullquote__by { display: flex; align-items: center; gap: var(--sp-4); }
.pullquote__photo {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.pullquote__meta { display: grid; gap: 0.15rem; }
.pullquote__author { font-weight: 700; font-size: var(--fs-sm); }
.pullquote__role { font-size: var(--fs-caption); opacity: 0.65; }

.takeaways {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius-xl);
  background: var(--surface-sky);
  background-image: var(--texture-dark);
}
.takeaways__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}
.takeaways__icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.prose .takeaways ul,
.prose .takeaways ol {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--sp-3);
}
.prose .takeaways li {
  position: relative;
  margin: 0;
  padding-left: 2rem;
  line-height: var(--lh-body);
}
.prose .takeaways li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.4em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}
.stat-row__item { display: grid; gap: 0.25rem; align-content: start; }
.stat-row__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--tracking);
}
.stat-row__label { font-size: var(--fs-sm); line-height: var(--lh-body); }
.stat-row__note { font-size: var(--fs-xs); opacity: 0.6; }

.howto { display: grid; gap: var(--sp-5); }
.howto__title { font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-tight); }
.prose .howto__list {
  counter-reset: howto;
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--sp-5);
}
.prose .howto__item {
  counter-increment: howto;
  position: relative;
  margin: 0;
  padding-left: 3.5rem;
  min-height: 2.5rem;
}
.prose .howto__item::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sky);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text-strong);
}
.howto__step-title { font-weight: 700; }
.howto__text > * + * { margin-top: 0.5em; }

.article-faq { display: grid; gap: var(--sp-5); }
.article-faq__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
}

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius-xl);
  background: var(--surface-dark);
  background-image: var(--texture-light);
  color: var(--color-text-inverse);
}
.inline-cta__copy { display: grid; gap: var(--sp-2); max-width: 40em; }
.inline-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking);
}
.inline-cta__text { font-size: var(--fs-body); line-height: var(--lh-body); opacity: 0.85; }

@media (max-width: 719px) {
  .pullquote,
  .takeaways,
  .inline-cta { padding: var(--sp-5); }
  .prose .pullquote__text { font-size: var(--fs-h4); }
  .article__foot { gap: var(--sp-4); }
}

/* Редакторские компоненты дышат шире абзацев: врезка посреди текста — пауза, а не строка. */
.prose > .callout,
.prose > .pullquote,
.prose > .takeaways,
.prose > .stat-row,
.prose > .howto,
.prose > .article-faq,
.prose > .inline-cta { margin-block: var(--sp-10); }

/* Аккордеон вопросов внутри колонки текста: та же механика, меньше масштаб. */
.article-faq .faq__list { margin-top: 0; }
.article-faq .faq-item { --faq-x: var(--sp-4); --faq-gap: var(--sp-4); }
.article-faq .faq-item__summary { padding: var(--sp-5) var(--sp-4); }
.article-faq .faq-item__question {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 700;
}
.article-faq .faq-item__body {
  padding: 0 var(--sp-4) var(--sp-5) calc(var(--sp-4) + 1.5rem + var(--sp-4));
  margin-top: 0;
  font-size: var(--fs-body);
}

/* Кнопка внутри редакторского текста остаётся кнопкой: правило .prose a перекрашивает
   и подчёркивает любую ссылку, включая ту, что несёт класс .btn. */
.prose .btn { text-decoration: none; }
.prose .btn--accent,
.prose .btn--brand { color: var(--color-text-inverse); }
.prose .btn--accent:hover,
.prose .btn--brand:hover { color: var(--color-text-inverse); }
.prose .btn--outline { color: var(--color-text-strong); }


/* ==========================================================================
   49. Промо-баннер отсрочки: плавающая карточка снизу и свёрнутая мини-плашка
   Оффер тот же, что у .offer-card в рейке материала (раздел 47b) и у героя страницы
   /deferment/, но слой другой: карточка висит над страницей на всех разделах, поэтому она
   оранжевая — рекламный слой обязан читаться как отдельный объект, а не как секция страницы.
   Внутри карточки ровно один светлый объект — голубая кнопка: на оранжевом она единственная
   точка клика, а заголовок держит размер, а не цвет.
   Фотография склада срезана большим радиусом со стороны текста: это та же дуга, что у
   .warehouse, и она отделяет визуал от копирайта без линии.
   Закрытие не выключает оффер, а сворачивает его в .promo-mini у левого нижнего угла —
   противоположного виджету мессенджеров (раздел 9), чтобы свёрнутая плашка и плавающая
   кнопка мессенджеров никогда не наезжали друг на друга.
   ========================================================================== */
.promo-banner {
  --promo-ink: var(--ct-orange-deep);
  --promo-tint: rgba(255, 255, 255, 0.16);
  --promo-muted: rgba(255, 255, 255, 0.88);
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  padding: 0 var(--gutter) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  /* Слой перехватывает клики только своей карточкой: полоса вокруг неё остаётся страницей. */
  pointer-events: none;
}
.promo-banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  align-items: stretch;
  width: min(100%, 62rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--promo-ink);
  background-image: var(--texture-light),
    linear-gradient(104deg, var(--ct-orange) 0%, var(--ct-orange) 46%, var(--ct-orange-deep) 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 -4px 12px rgba(51, 51, 51, 0.08), 0 22px 52px rgba(51, 51, 51, 0.28);
  pointer-events: auto;
}
.promo-banner__copy {
  display: grid;
  align-content: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: clamp(1.1rem, 0.85rem + 1vw, 1.75rem) clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem);
}
.promo-banner__kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking);
  color: var(--promo-muted);
}
.promo-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking);
}
.promo-banner__lead {
  max-width: 34ch;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--promo-muted);
}
/* Единственный светлый объект карточки. Ховер уходит в --ct-ocean: штатный ховер .btn--brand
   оранжевый и на оранжевой подложке кнопка бы исчезала. */
.promo-banner__cta {
  justify-self: start;
  margin-top: var(--sp-1);
  box-shadow: 0 10px 24px rgba(51, 51, 51, 0.24);
}
.promo-banner__cta:hover { background: var(--ct-ocean); }
/* The CTA stretches over the whole card: a tap anywhere on it opens the offer page. The close button sits above (z-index: 1). */
.promo-banner__cta::after { content: ""; position: absolute; inset: 0; }
.promo-banner__media { position: relative; min-width: 0; }
/* Фотография вынута из потока: высоту карточки задаёт сообщение, иначе снимок склада 900×730
   растянул бы плавающий слой на треть экрана. */
.promo-banner__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-banner__close {
  position: absolute;
  top: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--promo-tint);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.14);
  color: var(--color-text-inverse);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.promo-banner__close:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0.1875rem 0.625rem rgba(15, 23, 42, 0.18);
}
.promo-banner__close .icon { width: 1rem; height: 1rem; }

/* Свёрнутое состояние: та же ссылка на услугу, но размером с кнопку. */
.promo-mini {
  position: fixed;
  inset-inline-start: max(var(--sp-6), env(safe-area-inset-left));
  bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(22rem, calc(100% - var(--sp-6) * 2));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  background-image: linear-gradient(104deg, var(--ct-orange), var(--ct-orange-deep));
  color: var(--color-text-inverse);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(51, 51, 51, 0.26);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* Свёрнутое состояние выключается атрибутом hidden. Reset темы уже гасит его через
   [hidden] { display: none !important; }, но правило повторено локально: display у .promo-mini
   той же специфичности и стоит ниже, поэтому без !important в reset плашка висела бы поверх
   открытого баннера. Вторая запись делает это независимым от reset. */
.promo-mini[hidden] { display: none; }
.promo-mini__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-mini__icon { flex: 0 0 1rem; width: 1rem; height: 1rem; }
.promo-mini__arrow { flex: 0 0 0.875rem; width: 0.875rem; height: 0.875rem; }

@media (hover: hover) and (pointer: fine) {
  .promo-mini:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(51, 51, 51, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-mini { transition: none; }
  .promo-mini:hover { transform: none; }
}
/* Фотография уходит первой: на узком экране карточка обязана остаться читаемым сообщением,
   а не полоской текста рядом с картинкой. */
@media (max-width: 1024px) {
  .promo-banner__inner { grid-template-columns: minmax(0, 1fr); }
  .promo-banner__media { display: none; }
  .promo-banner__copy { padding-inline-end: 3.5rem; }
}
/* Below 1200px the centred card spans the page end: the footer grows by its height so the last
   links scroll above it. */
@media (max-width: 1199px) {
  .site-footer { padding-bottom: calc(clamp(1.5rem, 1rem + 1.6vw, 3rem) + var(--promo-space)); }
}
/* Phone: the expanded card is a one-row strip — title, arrow, close — about 64px instead of the
   225px card that covered a third of the first screen and the hero button under it. The kicker
   and the lead stay on /deferment/; the whole strip is the link (the CTA stretches over it),
   so the tap target grows while the visible arrow keeps the CTA's accessible name. */
@media (max-width: 640px) {
  .promo-banner { padding: 0 var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); }
  .promo-banner__inner { border-radius: var(--radius-lg); }
  .promo-banner__copy {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 var(--sp-3);
    padding: var(--sp-3) 3.25rem var(--sp-3) var(--sp-4);
  }
  .promo-banner__kicker,
  .promo-banner__lead { display: none; }
  .promo-banner__title { font-size: 1.1875rem; line-height: 1.05; text-wrap: balance; }
  .promo-banner__cta {
    justify-self: end;
    width: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-size: 0;
    box-shadow: none;
  }
  .promo-banner__cta::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    margin-left: -0.2rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .promo-banner__close {
    top: 50%;
    inset-inline-end: var(--sp-2);
    width: 2.25rem;
    height: 2.25rem;
    translate: 0 -50%;
  }
  .promo-mini {
    inset-inline-start: max(var(--sp-3), env(safe-area-inset-left));
    bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    max-width: calc(100% - var(--sp-3) * 2 - 4.5rem);
  }
}

/* ==========================================================================
   Модальная форма заявки (inc/modal.php)
   Оранжевая кнопка открывает форму здесь, а не пролистывает страницу к секции с формой.
   Без JavaScript окно показывается по :target — ссылка кнопки ведёт на его id.
   ========================================================================== */
.ct-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: var(--sp-5);
  overflow-y: auto;
}
.ct-modal:target,
.ct-modal[data-open="true"] { display: grid; }
.ct-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 41, 53, 0.55);
  backdrop-filter: blur(4px);
}
.ct-modal__panel {
  position: relative;
  width: min(32rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-soft);
}
.ct-modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: var(--ct-chip-gray);
}
.ct-modal__title {
  margin: 0 2.5rem 0 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}
.ct-modal__text { margin: var(--sp-3) 0 var(--sp-5); }
.ct-modal__form { margin: 0; }
.ct-modal .calc__channels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.ct-modal-lock { overflow: hidden; overflow-anchor: none; }
/* Служебное окно внутренних отчётов: та же оболочка, операционная форма без контактных полей. */
.ct-tool-form__options {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.ct-tool-form__options[hidden] { display: none; }
.ct-tool-form__legend {
  padding: 0 var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--color-text);
}
.ct-tool-form__option {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-1) 0;
  cursor: pointer;
}
.ct-tool-form__submit { width: 100%; }

/* ==========================================================================
   50. Касание: зона нажатия мелких контролов
   Иконки калькулятора (±, очистить поле) нарисованы 18px и на телефоне попадались через раз;
   раскрывашки «Подробнее», «Читать полностью», «В этой статье» были строкой текста высотой
   20px. На сенсорном экране зона нажатия растёт до ~44px, рисунок и раскладка остаются теми же:
   у иконок — невидимым ::after вокруг, у текстовых раскрывашек — минимальной высотой строки.
   ========================================================================== */
@media (pointer: coarse) {
  .stepper { gap: 1.75rem; }
  .stepper__btn,
  .field__clear { position: relative; }
  .stepper__btn::after,
  .field__clear::after {
    content: "";
    position: absolute;
    inset: -0.8rem;
  }
  .review-card__toggle,
  .prose__more > summary,
  .toc__summary,
  .service-card__when > summary { min-height: 2.75rem; }
  .review-card__toggle { display: inline-flex; align-items: center; }
}

/* ==========================================================================
   51. Длинные списки на телефоне: первые пункты и кнопка «Показать ещё»
   Раздел из 57 городских страниц был колонкой ссылок на три экрана, витрина кейсов — 171
   карточкой на шестьдесят экранов, и отзывы с формой под ней не видел никто. Список с
   data-fold показывает первые пункты, кнопка .fold-more раскрывает следующие (app.js,
   initFolds). Все пункты остаются в разметке; без JavaScript и на широком экране виден
   весь список, а кнопка скрыта.
   ========================================================================== */
@media (max-width: 640px) {
  [data-fold] > .is-folded { display: none; }
  .fold-more { margin-top: var(--sp-5); justify-content: center; gap: var(--sp-3); }
}
@media (min-width: 641px) {
  .fold-more { display: none; }
}