/* DDR-P03-YANDEX — section composition per width (design v4.1, Fable visual pass).
   Grid: ≥1280 gutters 64 (container capped at 1312 and centred above 1440); 1000–1279 gutters 44 (1024 → 936);
   600–999 a centred 680 column; <600 gutters 22. Desktop (≥1000) and Mobile (<1000) are two independent compositions;
   between the reference widths the columns are fluid with bounded sizes. Scene labels, the depicted CTA texts and the
   connectors are DOM/SVG layers positioned at fractions of their art box, so they travel with the picture while the
   type keeps its size (as in the design exports). All numbers come from work/geometry/layout-<w>.txt. */

:root { --pad: max(64px, calc((100% - 1312px) / 2)); }
@media (max-width: 1279.98px) { :root { --pad: 44px; } }
@media (min-width: 600px) and (max-width: 999.98px) { :root { --pad: max(44px, calc((100% - 680px) / 2)); } }
@media (max-width: 599.98px) { :root { --pad: 22px; } }

.p03-section { position: relative; padding-left: var(--pad); padding-right: var(--pad); }
.p03-section--line { border-top: 1px solid var(--line-2); }
.p03-dark { background: var(--dark); color: #fff; overflow: hidden; }
.p03-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; z-index: 0; }
.p03-dark > :not(.p03-backdrop) { position: relative; z-index: 1; }

/* ---------- shared scene layers ---------- */
.p03-scene-flow, .p03-scene-ui { position: absolute; inset: 0; pointer-events: none; }
:where(.p03-scene-label, .p03-scene-ui > span, .p03-scene-ui.p03-hero__d-cta, .p03-scene-arrow) { position: absolute; white-space: nowrap; line-height: 1.3; }
.p03-scene-label { font-weight: 700; color: var(--ink); }
.p03-scene-arrow { display: block; color: #e90827; pointer-events: none; }
.p03-scene-arrow .p03-icon { display: block; }

/* ---------- section heads ---------- */
.p03-section-head { display: block; }
.p03-section-head .p03-h2 { margin-top: 20px; }
.p03-section-head .p03-lead { margin-top: 13px; }
.p03-lead--xl { font-size: 20px; line-height: 29px; }

/* ---------- hero text column (both compositions) ---------- */
.p03-hero__title { margin-top: 23px; font-weight: 800; letter-spacing: -.01em; }
.p03-hero__title-black { display: block; margin-bottom: 3px; }
.p03-hero__lead { margin-top: 22px; color: var(--ink-2); }
.p03-hero__channels { margin-top: 14px; font-size: 17px; line-height: 25px; font-weight: 500; }
.p03-hero__actions { margin-top: 22px; display: grid; justify-items: start; }
.p03-hero__intro { font-size: 16px; line-height: 23px; color: var(--ink-2); }
.p03-hero__art { position: relative; }
.p03-hero__img { width: 100%; }
.p03-hero__caption { position: relative; margin-top: -10px; } /* paints over the positioned art box it overlaps */

/* ---------- formats (both) ---------- */
.p03-format__title { font-size: 28px; line-height: 34px; font-weight: 700; }
.p03-format__situation { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--ink-2); }
.p03-format__body { font-size: 18px; line-height: 27px; color: var(--ink); }
.p03-format__result { position: relative; }
.p03-format__result::before { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--red); }
.p03-format__result-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.p03-format__result-text { margin-top: 8px; font-size: 20px; line-height: 27px; font-weight: 600; }
.p03-management { border-radius: 10px; background: var(--light); }
.p03-management__title { font-weight: 700; }
.p03-management__body { color: var(--ink-2); }

/* ---------- case (both) ---------- */
.p03-case .p03-h2 { text-wrap: balance; } /* «Реклама и путь / к обращению»: the preposition never hangs at a line end */
.p03-case__label { font-size: 16px; line-height: 22px; font-weight: 600; color: #f0f3f6; }
.p03-case__text { margin-top: 8px; color: var(--on-dark-2); }
.p03-case__caption { font-size: 14px; line-height: 21px; color: var(--on-dark-3); }

/* ---------- diagnostics (both) ---------- */
.p03-diagnostics__art { position: relative; }
.p03-diagnostics__img { width: 100%; }

/* ---------- funnel (both) ---------- */
.p03-funnel__website-title { font-weight: 600; color: var(--ink); }
.p03-funnel__website--pending { font-size: 17px; line-height: 23px; }
.p03-funnel__website--pending .p03-funnel__website-note { display: block; margin-top: 6px; font-size: 16px; line-height: 23px; font-weight: 400; color: var(--ink-2); }
.p03-funnel__note .p03-h3 { font-weight: 700; }

/* ---------- process / report (both) ---------- */
.p03-process .p03-h2 { text-wrap: pretty; } /* no one-word last line («шаг.») when the title wraps */
.p03-report__title { letter-spacing: -.01em; }

/* ---------- conditions (both) ---------- */
.p03-conditions__title { text-wrap: balance; } /* two lines = «Стоимость — после / обсуждения задачи.», never «задачи.» alone */

/* ---------- footer (both) ---------- */
.p03-footer__text { text-wrap: balance; } /* two lines break before «под задачу бизнеса.», not after the preposition */

/* =====================================================================================================================
   DESKTOP (≥ 1000)
   ================================================================================================================== */
@media (min-width: 1000px) {
  /* ----- hero: text 43 % left, tall material scene right (+28 px into the gutter), data line across ----- */
  .p03-hero { padding-top: 42px; padding-bottom: 52px; display: grid; grid-template-columns: 43% minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 18px; }
  .p03-hero__text { grid-area: 1 / 1 / 2 / 2; }
  .p03-hero__intro { grid-area: 2 / 1 / 3 / 2; align-self: start; margin-top: 9px; }
  .p03-hero__scene { grid-area: 1 / 2 / 3 / 3; align-self: start; height: 0; margin: 4px -28px 0 0; }
  .p03-hero__data { grid-area: 3 / 1 / 4 / 3; margin-top: 23px; }
  .p03-hero__title { font-size: clamp(43px, calc(43px + (100vw - 1024px) * 0.043), 60px); line-height: calc(1em + 5px); }
  .p03-hero__lead { font-size: 20px; line-height: 29px; }
  .p03-hero__cta { width: 300px; }
  .p03-hero__secondary { width: 300px; margin-top: 7px; }
  .p03-hero__caption { padding-left: 20px; }
  .p03-hero__data { display: flex; align-items: flex-start; gap: 22px; font-size: 18px; line-height: 27px; }
  .p03-hero__data .p03-rule { flex: none; width: 40px; height: 3px; margin-top: 7px; border-radius: 2px; background: var(--red); }
  /* scene labels: centres at fractions of the 758×568 art box (identical fractions at 1280 and 1024) */
  .p03-hero__l-ad, .p03-hero__l-landing, .p03-hero__l-enquiry { transform: translate(-50%, -50%); font-size: 17px; line-height: 22px; }
  .p03-hero__l-ad { left: 18.4%; top: 34.5%; }
  .p03-hero__l-landing { left: 53.63%; top: 12.68%; }
  .p03-hero__l-enquiry { left: 86.08%; top: 39.96%; }
  .p03-hero__d-cta { left: 51.65%; top: 76.5%; transform: translate(-50%, -50%); font-size: 16px; line-height: 20.8px; font-weight: 600; color: #fff; inset: auto; }
  .p03-hero__d-cta.p03-scene-ui { left: 51.65%; top: 76.5%; }
  .p03-hero__d-arrow-1 { left: 31.57%; top: 62.94%; transform: translate(-50%, -50%); }
  .p03-hero__d-arrow-2 { left: 72.31%; top: 62.94%; transform: translate(-50%, -50%); }

  /* ----- formats: three open columns sharing the result and CTA axes; details open full-width; management zone ----- */
  .p03-formats { padding-bottom: 42px; }
  .p03-formats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; margin-top: 28px; }
  .p03-format { display: contents; }
  .p03-format[data-format="audit"] > * { grid-column: 1; }
  .p03-format[data-format="fixes"] > * { grid-column: 2; }
  .p03-format[data-format="launch"] > * { grid-column: 3; }
  .p03-format__scene { grid-row: 1; width: calc(100% + 24px); max-width: none; height: 260px; margin: 0 -12px; object-fit: contain; }
  .p03-format__text { grid-row: 2; }
  .p03-format__title { margin-top: 13px; }
  .p03-format__situation { margin-top: 9px; }
  .p03-format__body { margin-top: 16px; }
  .p03-format__result { grid-row: 3; margin-top: 16px; }
  .p03-format__cta { grid-row: 4; margin-top: 24px; width: 100%; }
  .p03-format__toggle { grid-row: 5; margin-top: 11px; }
  .p03-format > .p03-format__detail { grid-column: 1 / -1; grid-row: auto; margin-bottom: 9px; padding: 20px 22px; border-radius: 10px; background: var(--light); }
  .p03-format__detail p { font-size: 18px; line-height: 27px; color: var(--ink); }
  .p03-format__result-label { margin-top: 11px; }
  .p03-management { margin: 9px -14px 0; padding: 24px 36px 27px; display: grid; grid-template-columns: minmax(0, 1fr) 305px; column-gap: 71px; align-items: start; }
  .p03-management__cta { margin-top: 18px; width: 305px; }
  .p03-management__title { font-size: 28px; line-height: 34px; }
  .p03-management__body { margin-top: 11px; font-size: 18px; line-height: 27px; }

  /* ----- case: story 34 % left, one main frame right, caption under the gallery ----- */
  .p03-case { padding-top: 58px; padding-bottom: 58px; }
  .p03-case__inner { display: grid; grid-template-columns: 34% minmax(0, 1fr); column-gap: 52px; align-items: start; }
  .p03-case__head .p03-h2 { margin-top: 24px; }
  .p03-case__task { margin-top: 30px; }
  .p03-case__facts { margin-top: 24px; display: grid; gap: 24px; }
  .p03-case__text { font-size: 18px; line-height: 27px; }
  .p03-case__cta { margin-top: 34px; width: 100%; }
  .p03-case__caption { margin-top: 22px; }
  .p03-gallery__stage { margin-top: 24px; }
  .p03-gallery__thumbs { margin-top: 14px; }
  .p03-gallery__controls { margin-top: 16px; }
  .p03-gallery__caption { margin-top: 16px; }

  /* ----- diagnostics: scene + head left 47 %, four explanations right with red rules ----- */
  .p03-diagnostics { padding-top: 62px; padding-bottom: 52px; display: grid; grid-template-columns: 47% minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .p03-diagnostics .p03-section-head .p03-lead { margin-top: 20px; }
  .p03-diagnostics__title-black { display: block; }
  .p03-diagnostics__scene { margin-top: 28px; }
  .p03-diagnostics__art { margin: 0 -14px; }
  .p03-diagnostics__scene .p03-caption { margin-top: -1px; }
  .p03-diagnostics__items { margin-top: 5px; }
  .p03-diag-item { position: relative; padding-left: 38.4px; }
  .p03-diag-item + .p03-diag-item { margin-top: 30px; }
  .p03-diag-item::before { content: ""; position: absolute; left: 0; top: 12px; width: 23px; height: 3px; border-radius: 2px; background: var(--red); }
  .p03-diag-item__title { font-size: 25px; line-height: 31px; font-weight: 700; }
  .p03-diag-item__body { margin-top: 12px; font-size: 18px; line-height: 27px; color: var(--ink-2); }
  .p03-diag-item .p03-link-arrow { margin-top: 5px; width: 100%; }
  .p03-diag__d-0, .p03-diag__d-1, .p03-diag__d-2 { left: 21.2%; font-size: 15px; line-height: 20px; font-weight: 600; }
  .p03-diag__d-0 { top: 24.6%; }
  .p03-diag__d-1 { top: 47.4%; }
  .p03-diag__d-2 { top: 70.9%; }
  .p03-diag__d-3 { left: 55.6%; top: 61.9%; transform: translateX(-50%); font-size: 17px; line-height: 22px; }
  .p03-diag__d-4 { left: 82.7%; top: 85.7%; transform: translateX(-50%); max-width: 22%; white-space: normal; text-align: center; font-size: 16px; line-height: 20.8px; font-weight: 600; }

  /* ----- funnel: head, CTA row, panorama with six labelled parts, feedback arc, two notes with a divider ----- */
  .p03-funnel { padding-top: 44px; padding-bottom: 58px; }
  .p03-funnel .p03-section-head .p03-lead { margin-top: 16px; max-width: 76%; }
  .p03-funnel__title-red { white-space: nowrap; }
  .p03-funnel__actions { margin-top: 25px; display: flex; align-items: flex-start; gap: 35px; }
  .p03-funnel__cta { min-width: 304px; }
  .p03-funnel__website { width: 400px; }
  .p03-funnel__website--pending { display: block; flex: 1 1 auto; width: auto; max-width: 760px; margin-top: 2px; }
  .p03-funnel__scheme { margin-top: 10px; }
  .p03-funnel__panorama-box { position: relative; }
  .p03-funnel__panorama { width: 100%; }
  .p03-funnel__arrow { top: 57%; transform: translate(-50%, -50%); }
  .p03-funnel__arrow-1 { left: 17.43%; }
  .p03-funnel__arrow-2 { left: 34.27%; }
  .p03-funnel__arrow-3 { left: 50.58%; }
  .p03-funnel__arrow-4 { left: 66.08%; }
  .p03-funnel__arrow-5 { left: 82.32%; }
  /* the node row reserves the tallest exported text column (two-line title + four body lines = 148.8 px, the 1024 export);
     the feedback arc hangs 18.4 px INTO that reserve, so its ends sit 130.4 px under the title top at every width (all
     three exports: 1440 130.3, 1280 129.6, 1024 129.5) — right under the fourth body line of «Реклама» / «Аналитика» —
     and the dip passes 13.6 px under a two-line-title column; a column that wraps longer than the export pushes the
     whole arc down with it, keeping that clearance */
  .p03-funnel__nodes { margin-top: 2px; display: grid; grid-template-columns: 1743fr 1684fr 1631fr 1550fr 1623fr 1768fr; min-height: 148.8px; container-type: inline-size; }
  .p03-node { padding: 0 4px; text-align: center; }
  .p03-node__title { font-size: 18px; line-height: 23.4px; font-weight: 700; }
  .p03-node__body { width: calc(100cqw / 6 - 20px); max-width: 100%; margin: 10px auto 0; text-align: left; font-size: 16px; line-height: 23px; color: var(--ink-2); }
  .p03-funnel__arc { position: relative; display: block; width: 65.09%; height: 32px; margin: -18.4px 0 0 25.88%; border: 1.5px solid var(--red); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
  .p03-funnel__arc::before { content: ""; position: absolute; left: -6.75px; top: -1px; width: 12px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 9l5-8 5 8' fill='none' stroke='%23ec0929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat; }
  .p03-funnel__feedback { margin-top: 20px; text-align: center; font-size: 16px; line-height: 20.8px; font-weight: 500; color: var(--ink-2); }
  .p03-funnel__caption { margin-top: 12px; }
  .p03-funnel__notes { margin-top: 29px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 66px; }
  .p03-funnel__note { position: relative; }
  .p03-funnel__note + .p03-funnel__note::before { content: ""; position: absolute; left: -33px; top: 8px; bottom: 0; width: 1px; background: var(--line); }
  .p03-funnel__note p { margin-top: 13px; font-size: 18px; line-height: 27px; color: var(--ink-2); }

  /* ----- process: five stages on a dot/line timeline, then the weekly-report panel ----- */
  .p03-process { padding-top: 42px; padding-bottom: 48px; }
  .p03-process .p03-section-head .p03-lead { margin-top: 14px; }
  .p03-steps { margin-top: 33px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
  .p03-step { position: relative; padding-top: 27px; }
  .p03-step::before { content: ""; position: absolute; left: 2px; top: 0; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--red); background: #fff; }
  .p03-step:first-child::before { background: var(--red); }
  .p03-step::after { content: ""; position: absolute; left: 17px; right: -16px; top: 4px; height: 2px; background: #b8c3ce; }
  .p03-step:last-child::after { display: none; }
  .p03-step__title { font-size: 20px; line-height: 27px; font-weight: 700; }
  .p03-step__body { margin-top: 12px; font-size: 17px; line-height: 25px; color: var(--ink-2); }
  .p03-report { margin: 35px -14px 0; padding: 28px 23px 31px; border-radius: 12px; background: var(--light); }
  .p03-report__title { margin-top: 17px; font-size: 36px; line-height: 41px; font-weight: 800; }
  .p03-report__items { margin-top: 25px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 15px; }
  .p03-report__item-title { font-size: 21px; line-height: 28px; font-weight: 700; }
  .p03-report__item p { margin-top: 11px; font-size: 17px; line-height: 25px; color: var(--ink-2); }

  /* ----- conditions: large title + red accent, 2×2 open explanations with red rules ----- */
  .p03-conditions { padding-bottom: 55px; }
  .p03-conditions__title { font-size: 40px; line-height: 46px; font-weight: 800; }
  .p03-conditions__accent { margin-top: 7px; font-size: 32px; line-height: 39px; font-weight: 700; color: var(--red); }
  .p03-conditions__list { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 32px; }
  .p03-condition { position: relative; padding-top: 15px; }
  .p03-condition::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 3px; border-radius: 2px; background: var(--red); }
  .p03-condition__title { font-size: 24px; line-height: 31px; font-weight: 700; }
  .p03-condition p { margin-top: 13px; font-size: 18px; line-height: 27px; color: var(--ink-2); }

  /* ----- FAQ: wide, title column left (32 %), list right ----- */
  .p03-faq { padding-top: 40px; padding-bottom: 54px; display: grid; grid-template-columns: 32% minmax(0, 1fr); column-gap: 70px; align-items: start; }

  /* ----- contact: intro 31 % left, white form card right ----- */
  .p03-contact { padding-top: 55px; padding-bottom: 55px; }
  .p03-contact__inner { display: grid; grid-template-columns: 31% minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .p03-contact__intro .p03-h2 { margin-top: 24px; }
  .p03-contact__lead { margin-top: 25px; font-size: 21px; line-height: 31px; color: #cbd6df; }

  /* ----- footer: logo · text · product link right; copyright below ----- */
  .p03-footer { padding: 28px var(--pad) 27px; }
  .p03-footer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 43px; }
  .p03-footer__brand { grid-area: 1 / 1; margin-left: -8px; }
  .p03-footer__brand .p03-brand__logo { width: 180px; height: auto; }
  .p03-footer__text { grid-area: 1 / 2; font-size: 16px; line-height: 23px; color: var(--ink-2); max-width: 500px; }
  .p03-footer__product { grid-area: 1 / 3; width: 345px; }
  .p03-footer__copy { grid-area: 2 / 1 / 3 / 4; margin-top: 18px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .p03-hero { padding-top: 56px; }
  .p03-process .p03-h2 { max-width: 900px; } /* «Понятная работа. Понятный / следующий шаг.» as in the 1024 export (647 < 900 < 927 px), never «шаг.» alone */
}
@media (min-width: 1200px) {
  /* «План действий» on one line as in the 1280/1440 exports: the absolute box otherwise shrinks to the space right of
     its 82.7 % anchor (111 px at 1440, less than the 119 px label); the 1024 export keeps the two-line label */
  .p03-diag__d-4 { width: max-content; max-width: none; }
}
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .p03-hero__lead { font-size: 18px; line-height: 26px; }
  /* pending website note (P04 route not connected): beside the CTA the explanation runs on from the title as one
     paragraph (two 23 px lines inside the 54 px CTA row), so the scheme starts where the export places it */
  .p03-funnel__website--pending { text-wrap: balance; } /* keeps the «—» inside a line, never at a line start */
  .p03-funnel__website--pending .p03-funnel__website-note { display: inline; margin: 0; }
  .p03-diagnostics .p03-h2 { max-width: 430px; }
  .p03-diag__d-0, .p03-diag__d-1, .p03-diag__d-2 { font-size: 14px; }
  .p03-step__title { font-size: 18px; }
}

/* =====================================================================================================================
   MOBILE (< 1000): independent single-column composition
   ================================================================================================================== */
@media (max-width: 999.98px) {
  .p03-section-head .p03-lead, .p03-lead--xl { font-size: 18px; line-height: 26px; }

  /* ----- hero: CTA before the scene; vertical scene with its own labels; caption, data, intro ----- */
  .p03-hero { padding-top: 32px; padding-bottom: 42px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .p03-hero__text { order: 1; }
  .p03-hero__scene { order: 2; margin-top: 12px; }
  .p03-hero__data { order: 3; margin-top: 22px; font-size: 17px; line-height: 25px; color: var(--ink-2); }
  .p03-hero__data .p03-rule { display: none; }
  .p03-hero__intro { order: 4; margin-top: 18px; }
  .p03-hero__title { font-size: 39px; line-height: 42px; }
  .p03-hero__lead { font-size: 18px; line-height: 26px; }
  .p03-hero__cta { width: 100%; }
  .p03-hero__secondary { width: 100%; margin-top: 12px; }
  .p03-hero__art { max-width: 430px; margin: 0 auto; }
  .p03-hero__caption { margin-top: 4px; }
  /* scene labels: left/top at fractions of the 390×442 art box (same fractions at 768/430/360) */
  .p03-hero__m-ad { left: 17.95%; top: 5.2%; font-size: 14px; line-height: 17.2px; }
  .p03-hero__m-offer { left: 17.18%; top: 21.72%; font-size: 16px; line-height: 19.7px; font-weight: 700; color: var(--ink); }
  .p03-hero__m-audience { left: 17.18%; top: 26.02%; font-size: 14px; line-height: 17.2px; color: var(--ink-2); }
  .p03-hero__m-landing { left: 39.74%; top: 33.94%; font-size: 14px; line-height: 17.2px; }
  .p03-hero__m-reason { left: 23.33%; top: 40.27%; font-size: 20px; line-height: 24.6px; font-weight: 800; color: var(--ink); }
  .p03-hero__m-row { left: 33.59%; font-size: 16px; line-height: 19.7px; color: var(--ink); }
  .p03-hero__m-row-1 { top: 45.02%; }
  .p03-hero__m-row-2 { top: 50.45%; }
  .p03-hero__m-row-3 { top: 55.88%; }
  .p03-hero__m-cta { left: 54.7%; top: 63.1%; transform: translateX(-50%); font-size: 15px; line-height: 18.45px; font-weight: 600; color: #fff; }
  .p03-hero__m-enquiry { left: 61.03%; top: 72.62%; font-size: 14px; line-height: 17.2px; }
  .p03-hero__m-action { left: 48.97%; top: 82.58%; font-size: 15px; line-height: 18.45px; font-weight: 700; color: #fff; }
  .p03-hero__m-sub { left: 48.97%; top: 87.78%; font-size: 14px; line-height: 17.2px; color: #fff; }

  /* ----- formats: title/situation → scene → body → result → CTA → details; then the management panel ----- */
  .p03-formats { padding-bottom: 42px; }
  .p03-formats__list { margin-top: 28px; }
  .p03-format { display: grid; grid-template-columns: minmax(0, 1fr); }
  .p03-format__text { display: contents; }
  .p03-format__title { order: 1; }
  .p03-format__situation { order: 2; }
  .p03-format__scene { order: 3; }
  .p03-format__body { order: 4; }
  .p03-format__result { order: 5; }
  .p03-format__cta { order: 6; }
  .p03-format__toggle { order: 7; }
  .p03-format__detail { order: 8; }
  .p03-format + .p03-format { margin-top: 25px; }
  .p03-format__title { font-size: 28px; line-height: 33px; }
  .p03-format__situation { margin-top: 8px; }
  .p03-format__scene { margin: 4px -8px 0; width: calc(100% + 16px); max-width: none; height: 203px; object-fit: contain; }
  .p03-format__body { margin-top: 4px; font-size: 18px; line-height: 26px; }
  .p03-format__result { margin-top: 17px; }
  .p03-format__result::before { width: 28px; }
  .p03-format__result-label { margin-top: 9px; }
  .p03-format__result-text { margin-top: 6px; font-size: 19px; line-height: 26px; }
  .p03-format__cta { margin-top: 19px; width: 100%; }
  .p03-format__toggle { margin-top: 8px; }
  .p03-format__detail { margin-top: 16px; }
  .p03-format__detail p { font-size: 18px; line-height: 26px; color: var(--ink-2); }
  .p03-management { margin: 25px -14px 0; padding: 24px 19px 26px; }
  .p03-management__title { font-size: 27px; line-height: 32px; }
  .p03-management__body { margin-top: 13px; font-size: 18px; line-height: 26px; }
  .p03-management__cta { margin-top: 18px; width: 100%; }

  /* ----- case: head → task → gallery → facts → caption → CTA ----- */
  .p03-case { padding-top: 40px; padding-bottom: 40px; }
  .p03-case__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
  .p03-case__story, .p03-case__media { display: contents; }
  .p03-case__head { order: 1; }
  .p03-case__head .p03-h2 { margin-top: 22px; }
  .p03-case__task { order: 2; margin-top: 21px; }
  .p03-case__task.p03-case__fact .p03-case__text { margin-top: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #fff; }
  .p03-gallery { order: 3; margin-top: 18px; }
  .p03-case__facts { order: 4; margin-top: 22px; display: grid; gap: 20px; }
  .p03-case__fact .p03-case__label { color: #fff; }
  .p03-case__fact .p03-case__text { margin-top: 7px; font-size: 18px; line-height: 26px; }
  .p03-case__caption { order: 5; margin-top: 23px; }
  .p03-case__cta { order: 6; margin-top: 23px; width: 100%; }
  .p03-gallery__title { font-size: 18px; line-height: 24px; }
  .p03-gallery__stage { margin-top: 38px; }
  .p03-gallery__thumbs { margin-top: 14px; }
  .p03-gallery__controls { margin-top: 16px; }
  .p03-gallery__caption { margin-top: 16px; }
  .p03-gallery__hint { margin-top: 10px; }

  /* ----- diagnostics: head → scene → caption → items ----- */
  .p03-diagnostics { padding-top: 44px; padding-bottom: 26px; }
  .p03-diagnostics .p03-section-head .p03-lead { margin-top: 17px; }
  .p03-diagnostics__title-black { display: block; }
  .p03-diagnostics__scene { margin-top: 16px; }
  .p03-diagnostics__art { margin: 0 -8px; }
  .p03-diagnostics__items { margin-top: 25px; }
  .p03-diag-item { position: relative; padding-top: 14px; }
  .p03-diag-item + .p03-diag-item { margin-top: 26px; }
  .p03-diag-item::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--red); }
  .p03-diag-item__title { font-size: 24px; line-height: 29px; font-weight: 700; }
  .p03-diag-item__body { margin-top: 11px; font-size: 18px; line-height: 26px; color: var(--ink-2); }
  .p03-diag-item .p03-link-arrow { margin-top: 6px; width: 100%; }
  .p03-diag__m-0, .p03-diag__m-1, .p03-diag__m-2 { top: 34%; transform: translateX(-50%); font-size: 14px; line-height: 18.2px; font-weight: 600; }
  .p03-diag__m-0 { left: 18.8%; }
  .p03-diag__m-1 { left: 50.4%; }
  .p03-diag__m-2 { left: 81.9%; }
  .p03-diag__m-3 { left: 51.8%; top: 70.8%; transform: translateX(-50%); font-size: 17px; line-height: 22.1px; }

  /* ----- funnel: head → three connected pairs → feedback → caption → CTA + website line → notes ----- */
  .p03-funnel { padding-top: 44px; padding-bottom: 41px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .p03-funnel .p03-section-head { order: 1; }
  .p03-funnel .p03-section-head .p03-lead { margin-top: 16px; }
  .p03-funnel__title-black { display: block; text-wrap: wrap; } /* the black block keeps the export breaks … */
  .p03-funnel .p03-h2 { text-wrap: balance; } /* … the red «и работу с клиентами» breaks before «с», not after it */
  .p03-funnel__scheme { order: 2; margin-top: 25px; }
  .p03-funnel__actions { order: 3; margin-top: 29px; }
  .p03-funnel__notes { order: 4; margin-top: 26px; }
  .p03-funnel__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 60px; }
  .p03-node { position: relative; text-align: center; }
  /* the part-slices are portrait (390×514 with the object in the middle band); the export stretched them to fill the
     166 px boxes — here they are covered (objects at the export size, undistorted) below 600 and contained in the 680 column */
  .p03-node__img { width: 100%; height: 166px; object-fit: cover; object-position: center; }
  .p03-node__title { margin-top: 2px; font-size: 17px; line-height: 22.1px; font-weight: 700; }
  .p03-node__body { margin-top: 7px; text-align: left; font-size: 16px; line-height: 22px; color: var(--ink-2); }
  /* arrow inside each pair (in the 30 px gap, at the image centre) */
  .p03-node:nth-child(even)::before { content: ""; position: absolute; left: -25px; top: 81px; width: 20px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23e90827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 14px no-repeat; }
  /* elbow connector from the right part of a pair to the left part of the next one (drawn in the 60 px row gap: 7 below the
     tallest body, 14 down, across to the left column centre, 35 down to the arrow tip, 4 above the next picture) */
  .p03-node:nth-child(3)::after, .p03-node:nth-child(5)::after { content: ""; position: absolute; left: 50%; top: -53px; width: calc(100% + 30px); height: 14px; border-right: 1.5px solid var(--red); border-bottom: 1.5px solid var(--red); pointer-events: none; }
  .p03-node:nth-child(3)::before, .p03-node:nth-child(5)::before { content: ""; position: absolute; left: 50%; top: -39px; width: 12px; height: 35px; transform: translateX(-50%); background: linear-gradient(var(--red), var(--red)) center top / 1.5px calc(100% - 7px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 1l5 7 5-7' fill='none' stroke='%23ec0929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 12px 9px no-repeat; }
  .p03-funnel__feedback { margin-top: 28px; font-size: 16px; line-height: 23px; color: var(--ink-2); }
  .p03-funnel__caption { margin-top: 18px; }
  .p03-funnel__cta { width: 100%; }
  .p03-funnel__website { margin-top: 13px; width: 100%; }
  .p03-funnel__website--pending { display: block; }
  .p03-funnel__website-note, .p03-funnel__website--pending .p03-funnel__website-note { display: block; margin-top: 16px; font-size: 17px; line-height: 25px; font-weight: 400; color: var(--ink-2); }
  .p03-funnel__website--pending .p03-funnel__website-note { margin-top: 12px; text-wrap: pretty; } /* no one-word last line («решения.») */
  .p03-funnel__note + .p03-funnel__note { margin-top: 29px; }
  .p03-funnel__note .p03-h3 { font-size: 24px; line-height: 29px; }
  .p03-funnel__note p { margin-top: 12px; font-size: 18px; line-height: 26px; color: var(--ink-2); }

  /* ----- process: vertical timeline, then the report panel 2×2 ----- */
  .p03-process { padding-top: 42px; padding-bottom: 48px; }
  .p03-process .p03-section-head .p03-lead { margin-top: 18px; }
  .p03-steps { margin-top: 29px; }
  .p03-step { position: relative; padding-left: 30px; }
  .p03-step + .p03-step { margin-top: 22px; }
  .p03-step::before { content: ""; position: absolute; left: 1px; top: 6px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--red); background: #fff; }
  .p03-step:first-child::before { background: var(--red); }
  .p03-step::after { content: ""; position: absolute; left: 5.25px; top: 20px; bottom: -19px; width: 1.5px; background: #c4ced7; }
  .p03-step:last-child::after { display: none; }
  .p03-step__title { font-size: 22px; line-height: 28px; font-weight: 700; }
  .p03-step__body { margin-top: 8px; font-size: 18px; line-height: 26px; color: var(--ink-2); }
  .p03-report { margin: 34px -14px 0; padding: 28px 23px 29px; border-radius: 12px; background: var(--light); }
  .p03-report__title { margin-top: 17px; font-size: 30px; line-height: 35px; font-weight: 800; }
  .p03-report__items { margin-top: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 24px; }
  .p03-report__item-title { font-size: 19px; line-height: 25px; font-weight: 700; }
  .p03-report__item p { margin-top: 8px; font-size: 17px; line-height: 25px; color: var(--ink-2); }

  /* ----- conditions: sequential, no rules ----- */
  .p03-conditions { padding-bottom: 39px; }
  .p03-conditions__title { font-size: 30px; line-height: 35px; font-weight: 800; }
  .p03-conditions__accent { margin-top: 8px; font-size: 28px; line-height: 34px; font-weight: 700; color: var(--red); }
  .p03-conditions__list { margin-top: 28px; }
  .p03-condition + .p03-condition { margin-top: 27px; }
  .p03-condition__title { font-size: 22px; line-height: 28px; font-weight: 700; }
  .p03-condition p { margin-top: 11px; font-size: 18px; line-height: 26px; color: var(--ink-2); }

  /* ----- FAQ: title, then the list ----- */
  .p03-faq { padding-top: 40px; padding-bottom: 54px; }
  .p03-faq__list { margin-top: 22px; }

  /* ----- contact: intro, then the card 8 px wider than the text container on each side ----- */
  .p03-contact { padding-top: 42px; padding-bottom: 42px; }
  .p03-contact__intro .p03-h2 { margin-top: 21px; }
  .p03-contact__lead { margin-top: 18px; font-size: 18px; line-height: 26px; color: #cbd6df; }
  .p03-form-card { margin: 27px -8px 0; }

  /* ----- footer: stacked ----- */
  .p03-footer { padding: 28px var(--pad) 29px; }
  .p03-footer__inner { display: grid; justify-items: start; }
  .p03-footer__brand { margin-left: -8px; }
  .p03-footer__brand .p03-brand__logo { width: 150px; height: auto; }
  .p03-footer__text { margin-top: 15px; font-size: 16px; line-height: 23px; color: var(--ink-2); }
  .p03-footer__product { margin-top: 12px; width: 100%; justify-self: stretch; }
  .p03-footer__copy { margin-top: 15px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .p03-diagnostics__title-black { display: inline; }
  .p03-node__img { object-fit: contain; }
}
@media (max-width: 599.98px) {
  .p03-hero__art { max-width: none; margin: 0 calc(-1 * var(--pad)); }
}
@media (max-width: 377.98px) { /* 375–377 (iPhone SE / mini width) at 39 px would leave «для» alone on a line */
  .p03-hero__title { font-size: 36px; line-height: 40px; }
}