/* An extension of the Local, High-End and Product landing-page language.
   Only .sd and its content: the shared header, contact and footer own themselves. */
.sd {
  --sd-muted: #acaeb6;
  --sd-copy: #c6c7cd;
  --sd-rule: #3d3e44;
  --sd-section: clamp(72px, 7.5vw, 136px);
  color: var(--ink);
  overflow-wrap: break-word;
}
.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }
.sd :is(h1,h2,h3,p,figure) { margin: 0; }
.sd :is(h1,h2,h3) { font-weight: 400; letter-spacing: -.04em; text-wrap: balance; }
.sd h2 { font: 400 var(--sd-h2, clamp(34px, 3vw, 64px))/1.1 "Inter", sans-serif; letter-spacing: -.04em; }
.sd h3 { font: 400 var(--sd-h3, clamp(22px, 1.8vw, 36px))/1.2 "Inter", sans-serif; letter-spacing: -.03em; }
.sd :is(h1,h2,h3) > span { color: var(--sd-muted); }
.sd p:where(:not(.cmp *)) { color: var(--sd-copy); font: 300 var(--sd-p, clamp(16px, 1.22vw, 20px))/1.6 "Inter", sans-serif; text-wrap: pretty; }
.sd p.sd-lead { font: 300 var(--sd-lead, clamp(18px, 1.35vw, 25px))/1.5 "Inter", sans-serif; color: var(--ink); }
.sd :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.sd ::selection { background: #e4e5e6; color: #171719; }
/* main.sp carries the catalogue header and ribbon (build.mjs servicePage);
   the story below starts where the catalogue's example frames did: 40px under
   the ribbon, 32px on the phone — the same spacing as .spv in lab.css. */
.sp > .sd { margin-top: 40px; }
.sd-hero { padding: 0 var(--g, 24px) 24px; }
.sd-hero h2 { font-size: var(--sd-slogan, clamp(40px, 4.2vw, 76px)); line-height: 1.06; }
.sd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.sd-hero-copy { padding-block: 8px 32px; min-width: 0; }
/* Intro variants (Astra's review 23.10, her hand decides): "columns" — text
   beside the visual on one top line; "stack" — one centred thesis above the
   demonstration. data-intro on .sd-hero; the tuner knob switches it live. */
.sd-hero[data-intro="stack"] .sd-hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 48px); justify-items: center; text-align: center; }
.sd-hero[data-intro="stack"] .sd-hero-copy { max-width: 880px; padding-block: 8px 0; }
.sd-hero[data-intro="stack"] .sd-hero-copy .sd-lead { margin-inline: auto; max-width: 52ch; }
.sd-hero[data-intro="stack"] .sd-actions { justify-content: center; }
.sd-hero[data-intro="stack"] .sd-hero-media { width: 100%; }
.sd-hero[data-intro="stack"] .sd-build-visual, .sd-hero[data-intro="stack"] .sd-app-visual { min-height: 0; }
.sd-hero[data-intro="stack"] .sd-app-stage { height: clamp(560px, 46vw, 760px); }
.sd-hero-copy .sd-lead { max-width: 40ch; margin-top: 28px; font-size: var(--sd-lead, clamp(18px, 1.35vw, 24px)); }
.sd-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; margin-top: 36px; }
/* Columns intro: heading and lead on the visual's top edge, the actions on
   its bottom edge (Alexa, 23.10.2026). Below 761px the columns stack. */
@media (min-width: 761px) {
  .sd-hero:not([data-intro="stack"]) .sd-hero-grid { align-items: stretch; }
  .sd-hero:not([data-intro="stack"]) .sd-hero-copy { display: flex; flex-direction: column; padding-bottom: 0; }
  .sd-hero:not([data-intro="stack"]) .sd-actions { margin-top: auto; padding-top: 36px; }
  .sd-hero:not([data-intro="stack"]) .sd-hero-media { display: grid; }
}
.sd-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font: 400 15px/1.5 "Inter",sans-serif; text-decoration: underline; text-decoration-color: #898c96; text-underline-offset: 5px; transition: text-decoration-color 160ms ease; }
.sd-link:hover { text-decoration-color: currentColor; }
.sd-hero-media { min-width: 0; }
.sd-build-visual, .sd-app-visual { position: relative; overflow: hidden; border-radius: 16px; background: #e4e5e6; color: #171719; }
.sd-build-visual { display: flex; flex-direction: column; justify-content: center; min-height: clamp(540px, 45vw, 740px); padding: clamp(20px, 2.2vw, 40px); gap: 40px; }
.sd-browser { display: block; overflow: hidden; border-radius: 10px; background: #f8f6f2; color: #414145; text-decoration: none; box-shadow: 0 16px 32px #1717191a; }
.sd-browser-bar { height: 36px; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 0 14px; font: 400 10px/1.4 "Inter",sans-serif; }
.sd-browser-dots { display: flex; gap: 4px; }
.sd-browser-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #b6b5b3; }
.sd-browser img { display: block; width: 100%; height: auto; }
.sd-build-caption { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.sd-build-caption > span { font: 400 clamp(24px, 2.4vw, 40px)/1.12 "Inter",sans-serif; letter-spacing: -.04em; color: #62656f; }
.sd-build-caption strong { font-weight: 400; color: #171719; }
.sd-build-caption .sd-link { flex-shrink: 0; }
.sd-app-stage { position: relative; height: clamp(530px, 43vw, 720px); }
.sd-app-stage .product-demo-phone { --demo-scale: .58; }
.sd-visual-caption { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 0 24px; font: 400 12px/1.5 "Inter",sans-serif; }
.sd-demo-fallback { display: block; width: fit-content; margin: 12px 24px 22px; min-height: 24px; font: 400 12px/1.5 "Inter",sans-serif; color: #424650; text-decoration: underline; text-underline-offset: 3px; }
.sd-section { padding: var(--sd-section) var(--g, 24px); scroll-margin-top: 40px; }
.sd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); }
/* A heading with its lead in one column (the process block on every page):
   the lead stands a line below the heading, not glued to it — Alexa, 23.10. */
.sd-split > div > h2 + .sd-lead { margin-top: 24px; max-width: 40ch; }
.sd-split > div > h2 + .sd-lead + * { margin-top: 24px; }
.sd-copy > p + p { margin-top: 24px; }
.sd-copy > p:first-child { font-size: clamp(19px, 1.4vw, 26px); line-height: 1.5; color: var(--ink); }
.sd-light { margin-inline: var(--g, 24px); padding-inline: clamp(24px, 3.2vw, 56px); background: #e4e5e6; border-radius: 16px; color: #171719; --ink: #171719; --sd-muted: #62656f; --sd-copy: #424650; --sd-rule: #b9bbc1; }
.sd-light ::selection { color: #e4e5e6; background: #171719; }
.sd-section-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: end; margin-bottom: 56px; }
.sd-section-head .sd-lead { max-width: 34ch; }
.sd-work-list article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); padding-block: 30px; border-top: 1px solid var(--sd-rule); }
.sd-work-list article:last-child { padding-bottom: 0; }
.sd-work-list p { max-width: 60ch; }
.sd-work-list .sd-outcome { margin-top: 16px; color: var(--ink); }
.sd-case { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.sd-case-image { display: block; border-radius: 16px; overflow: hidden; background: #e4e5e6; }
.sd-case-image img { display: block; width: 100%; height: auto; }
.sd-case-copy p { margin-top: 24px; }
.sd-case-copy .lab-btn { margin-top: 28px; }
.sd-app-icon { display: block; width: 64px; height: 64px; margin-bottom: 24px; border-radius: 14px; }
.sd-case--app { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.sd-case--app .sd-case-image { padding-block: 80px; background: #252529; }
.sd-step { border-top: 1px solid var(--sd-rule); scroll-margin-top: 40px; }
.sd-step:last-child { border-bottom: 1px solid var(--sd-rule); }
/* Steps are always open: no accordion and no +/− (Alexa, 23.10.2026). */
.sd-step-head { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; gap: 16px; padding-block: 24px; }
.sd-step h3 { font-size: clamp(20px, 1.5vw, 28px); }
.sd-step-number { color: var(--sd-muted); font: 400 13px/1.5 "Inter",sans-serif; font-variant-numeric: tabular-nums; }
.sd-step-body { padding: 0 36px 28px 40px; }
.sd-step-body p { font-size: 16px; }
/* One offer block: Compare carries the three rings of the former "Depth of
   project development" block (sections/11-pricing.html, assets/prc-ring*.svg)
   above a centred heading and lead; each price head carries the tier's thesis.
   No "Compare the options" heading and no aside beside it (Alexa, 23.10.2026). */
.sd .cmp > .lab-sechead { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: center; align-items: start; text-align: center; }
.sd .cmp > .lab-sechead > div { display: grid; justify-items: center; }
.sd-rings { position: relative; width: 162px; height: 80px; margin-bottom: 36px; }
.sd-ring { position: absolute; top: 0; left: 0; height: 100%; width: 50%; }
.sd-ring img { display: block; width: 100%; height: 100%; }
.sd-ring--l { transform: translateX(0); animation: sd-swap-l 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
.sd-ring--c { transform: translateX(50%); }
.sd-ring--r { transform: translateX(100%); animation: sd-swap-r 4.8s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes sd-swap-l { 0%, 10% { transform: translateX(0); } 45%, 55% { transform: translateX(100%); } 90%, 100% { transform: translateX(0); } }
@keyframes sd-swap-r { 0%, 10% { transform: translateX(100%); } 45%, 55% { transform: translateX(0); } 90%, 100% { transform: translateX(100%); } }
.sd .cmp-thesis { display: block; margin-top: 12px; font: 400 clamp(18px, 1.35vw, 23px)/1.25 "Inter", sans-serif; letter-spacing: -.02em; text-transform: none; color: var(--ink); text-wrap: balance; }
.sd .cmp { margin-top: 0; padding-top: var(--sd-offer-gap, clamp(56px, 6vw, 112px)); scroll-margin-top: 28px; }
.sd .cmp h2 { font: 400 var(--sd-h2, clamp(34px, 3vw, 64px))/1.1 "Inter", sans-serif; letter-spacing: -.04em; }
.sd .cmp .lab-lead { margin-top: 20px; max-width: 54ch; }
.sd .cmp-wrap { margin-top: 40px; }
.sd .cmp-prose { max-width: 46ch; }
/* The `.sd p` reset zeroed the caption under Buy; it keeps the block's own 10px (lab.css), as on every other page. */
.sd .cmp-test { margin-top: 10px; }
/* FAQ «Before we start» — вопросы в белых плашках, последняя плашка —
   «Still have questions?» с кнопкой (Alexa, 23.10.2026: вариант 10 стенда
   new-home/preview/faq-variants/). Блок «What does … explain?» под FAQ снят.
   Плашка с кнопкой той же высоты, что вопрос: кнопка 56px стоит внутри с
   одинаковым полем сверху, справа и снизу (--sd-faq-ring). Где строка
   «текст + кнопка» не помещается, текст встаёт сверху, кнопка — во всю ширину. */
.sd-split:has(> .sd-faq) {
  --sd-faq-gap: 8px;
  --sd-faq-r: 16px;
  --sd-faq-pad-y: 24px;
  --sd-faq-pad-x: 28px;
  --sd-faq-q: clamp(18px, 1.26vw, 23px);
  --sd-faq-ring: max(6px, calc((var(--sd-faq-pad-y) * 2 + var(--sd-faq-q) * 1.4 - 56px) / 2));
  grid-template-areas: "head list" "head more";
  row-gap: var(--sd-faq-gap);
  align-items: start;
}
/* Вертикальный ритм симметричен (Alexa, 23.10.2026, «где-то на 120»): 120px
   от низа Compare до блока и от нижней плашки до начала Let's talk. Let's talk
   сам отступает на --ltk-top (css/contact.css; на высоком планшете 720–1024 —
   64px на .ltk, повторено ниже), main.sp на этих страницах снизу своих 96px
   больше не добавляет. */
.sd-section:has(> .sd-split > .sd-faq) {
  --sd-faq-rhythm: 120px;
  --sd-faq-next: var(--ltk-top, 48px);
  padding-block: var(--sd-faq-rhythm) calc(var(--sd-faq-rhythm) - var(--sd-faq-next));
}
@media (min-width: 720px) and (max-width: 1024px) and (min-height: 900px) {
  .sd-section:has(> .sd-split > .sd-faq) { --sd-faq-next: 64px; }
}
.sp:has(.sd-faq) { padding-bottom: 0; }
/* Левый край плашек — на линии белой карточки Let's talk и колонки SKARR в
   Compare (Alexa, 23.10.2026): колонки и зазор те же, что у .ltk-grid
   (css/contact.css). Ниже 1025px Let's talk встаёт в одну колонку — линии нет. */
@media (min-width: 1025px) {
  .sd-split:has(> .sd-faq) { grid-template-columns: minmax(0, 6.6fr) minmax(0, 8.4fr); column-gap: var(--ltk-gap, 80px); }
}
.sd-split:has(> .sd-faq) > h2 { grid-area: head; }
.sd-faq { grid-area: list; display: flex; flex-direction: column; gap: var(--sd-faq-gap); min-width: 0; }
.sd-faq details { border-radius: var(--sd-faq-r); background: var(--ww, #f7f7f7); color: #171719; interpolate-size: allow-keywords; transition: background-color 200ms ease; }
.sd-faq summary { position: relative; padding: var(--sd-faq-pad-y) calc(var(--sd-faq-pad-x) + 30px) var(--sd-faq-pad-y) var(--sd-faq-pad-x); border-radius: inherit; font: 400 var(--sd-faq-q)/1.4 "Inter",sans-serif; letter-spacing: -.01em; list-style: none; cursor: pointer; }
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::before, .sd-faq summary::after { content: ''; position: absolute; right: calc(var(--sd-faq-pad-x) + 3px); top: calc(50% - .75px); width: 14px; height: 1.5px; background: currentColor; transition: transform 300ms var(--lab-ease, ease); }
.sd-faq summary::after { transform: rotate(90deg); }
.sd-faq details[open] summary::after { transform: rotate(0); }
.sd-faq summary:focus-visible { outline-offset: 3px; }
.sd .sd-faq p { max-width: 62ch; padding: 0 var(--sd-faq-pad-x) var(--sd-faq-pad-y); color: #4a4d57; font: 400 16px/1.6 "Inter",sans-serif; }
.sd-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 360ms var(--lab-ease, ease), content-visibility 360ms allow-discrete; }
.sd-faq details[open]::details-content { block-size: auto; }
@media (hover: hover) { .sd-faq details:not([open]):hover { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .sd-faq details::details-content, .sd-faq summary::before, .sd-faq summary::after { transition: none; } }
.sd-faq-more { grid-area: more; container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; padding: var(--sd-faq-ring); border-radius: var(--sd-faq-r); background: #232428; }
.sd .sd-faq-more p { padding-left: calc(var(--sd-faq-pad-x) - var(--sd-faq-ring)); color: var(--ink); font: 400 var(--sd-faq-q)/1.4 "Inter",sans-serif; letter-spacing: -.01em; }
.sd-faq-more .lab-btn { flex: none; }
@container (max-width: 619.98px) {
  .sd .sd-faq-more p { flex: 1 1 100%; padding: calc(var(--sd-faq-pad-y) - var(--sd-faq-ring)) calc(var(--sd-faq-pad-x) - var(--sd-faq-ring)); }
  .sd-faq-more .lab-btn { display: flex; flex: 1 1 100%; }
}
@media (min-width: 1920px) {
  .sd { --sd-section: 144px; }
  .sd-hero-grid { gap: 88px; }
  .sd-hero-copy { max-width: 920px; }
  .sd-hero h2 { font-size: var(--sd-slogan, 84px); }
  .sd-build-visual { min-height: 800px; }
  .sd-app-stage { height: 800px; }
}
@media (max-width: 1100px) {
  .sd-hero-grid { gap: 32px; }
  .sd-hero h2 { font-size: var(--sd-slogan, clamp(40px, 4.8vw, 56px)); }
  .sd-build-visual { min-height: 510px; padding: 20px; gap: 32px; }
  .sd-build-caption { display: block; }
  .sd-build-caption .sd-link { margin-top: 20px; }
  .sd-section-head { grid-template-columns: 1fr; gap: 24px; }
  .sd-section-head .sd-lead { max-width: 50ch; }
  .sd-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .sd-case--app .sd-case-image { padding-block: 64px; }
}
@media (max-width: 760px) {
  .sp > .sd { margin-top: 32px; }
  .sd-hero h2 { font-size: var(--sd-slogan, clamp(38px, 8vw, 54px)); }
  .sd-hero-grid, .sd-split, .sd-case, .sd-work-list article { grid-template-columns: minmax(0, 1fr); }
  .sd-hero-copy { padding-block: 0 16px; }
  .sd-hero-grid { align-items: stretch; }
  .sd h2 { font-size: var(--sd-h2, clamp(34px, 7vw, 48px)); }
  .sd h3 { font-size: var(--sd-h3, 26px); }
  .sd-hero-copy .sd-lead { max-width: 43ch; margin-top: 22px; }
  .sd-actions { gap: 16px 24px; margin-top: 26px; }
  .sd-build-visual { min-height: 0; padding: 24px; gap: 28px; }
  .sd-build-caption { display: flex; }
  .sd-build-caption > span { font-size: 28px; }
  .sd-build-caption .sd-link { margin-top: 0; font-size: 13px; }
  .sd-app-stage { height: 610px; }
  .sd-app-stage .product-demo-phone { position: absolute; left: 50%; top: 50%; width: 417px; height: 876px; padding: 12px; border-radius: 62px; transform: translate(-50%, -50%) scale(var(--demo-scale, .55)); box-shadow: 0 0 0 2px #2b2b2f, 0 0 0 3px #4a4a50, 0 0 0 5px #2b2b2f, 0 20px 36px #14141e29; }
  .sd-app-stage .product-demo-screen { --demo-screen-radius: 50px; width: 393px; height: 852px; }
  .sd-app-stage iframe { top: 54px; height: calc(100% - 54px); }
  .sd-app-stage .product-demo-status { display: flex; }
  .sd-app-stage .product-demo-home, .sd-app-stage .product-demo-island { display: block; }
  .sd-visual-caption { display: grid; gap: 4px; }
  .sd-light { padding-inline: 24px; }
  .sd-work-list article { gap: 18px; padding-block: 26px; }
  .sd-section-head { margin-bottom: 36px; }
  .sd-case--app .sd-case-image { padding-block: 48px; }
  .sd-case-copy p { margin-top: 20px; }
  .sd-step h3 { font-size: 22px; }
  .sd-step-body { padding: 0 0 24px; }
  .sd-step-head { gap: 12px; }
  .sd-rings { width: 113px; height: 56px; margin-bottom: 28px; }
  .sd-hero[data-intro="stack"] .sd-app-stage { height: 610px; }
  .sd-split:has(> .sd-faq) { grid-template-areas: "head" "list" "more"; }
  .sd-split:has(> .sd-faq) > h2 { margin-bottom: 24px; }
}
@media (max-width: 390px) {
  .sd h2 { font-size: var(--sd-h2, 32px); }
  .sd-hero h2 { font-size: var(--sd-slogan, 38px); }
  .sd-build-visual { padding: 16px; }
  .sd-build-caption { display: block; }
  .sd-build-caption .sd-link { margin-top: 16px; }
  .sd-app-stage { height: 550px; }
  .sd-light { padding-inline: 20px; }
  .sd-step-head { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sd .sd-link { transition: none; } .sd-ring--l, .sd-ring--r { animation: none; } }

/* Steps panel (#process): an editorial left column — heading at the top, lead
   at the bottom — inside a panel padded equally on every side; heading and
   lead in the section-head type of the homepage and Special Offers
   (48 / 18 px, 32 / 16 on the phone). Alexa, 23.10.2026. */
.sd-light:has(> .sd-split) { padding-block: clamp(24px, 3.2vw, 56px); }
.sd-light > .sd-split > div:first-child { display: flex; flex-direction: column; justify-content: space-between; overflow-anchor: none; }
.sd-light > .sd-split > div > h2 { font-size: var(--sd-h2, clamp(34px, 3.2vw, 48px)); line-height: 1.12; letter-spacing: -.035em; text-box: trim-start cap alphabetic; }
.sd-light > .sd-split > div > .sd-lead { font: 300 18px/26px "Inter", sans-serif; color: var(--sd-copy); max-width: 56ch; text-wrap: balance; text-box: trim-end text alphabetic; }
/* A step stays under the pointer while its content changes the page height
   (as on High-End), and one press never selects a word of its title. */
html:has(.sd details:focus-within) { overflow-anchor: none; }
.sd :is(.sd-step, .sd-faq details) > summary { -webkit-user-select: none; user-select: none; }
@media (max-width: 760px) {
  .sd-light:has(> .sd-split) { padding-block: 24px; }
  .sd-light > .sd-split > div > h2 { font-size: var(--sd-h2, 32px); }
  .sd-light > .sd-split > div > .sd-lead { font-size: 16px; line-height: 24px; }
}
@media (max-width: 390px) { .sd-light:has(> .sd-split) { padding-block: 20px; } }

/* A two-sentence lead under a heading: each sentence starts its own line
   (Alexa, 23.10.2026: «разрезать на две строки нормальный абзац»), so a line
   never ends on the «We» of the next sentence. Where a sentence is wider than
   the column, it wraps inside itself into balanced lines. */
.sd-lead-line { display: block; text-wrap: balance; }
.sd-light > .sd-split > div > .sd-lead:has(> .sd-lead-line) { max-width: none; }

/* Steps without the outer rules: only the lines between steps stay. The first
   title starts on the heading's top line, the last text ends on the lead's
   bottom line (Alexa, 23.10.2026). */
.sd-step:first-child { border-top: 0; }
.sd-step:first-child > .sd-step-head { padding-top: 0; }
.sd-step:first-child h3 { text-box: trim-start cap alphabetic; }
.sd-step:last-child { border-bottom: 0; }
.sd-step:last-child > .sd-step-body { padding-bottom: 0; }
.sd-step:last-child > .sd-step-body > p:last-child { text-box: trim-end text alphabetic; }

/* Step numbers in the size of the step titles (Alexa, 23.10.2026). The number
   column and the text indent are set in the title's em, so the text stays
   under the title at every width. */
.sd-step { --sd-num: 1.3em; font-size: clamp(20px, 1.5vw, 28px); }
.sd-step-head { grid-template-columns: var(--sd-num) minmax(0, 1fr); }
.sd-step-number { font: 400 1em/1.2 "Inter", sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sd-step:first-child .sd-step-number { text-box: trim-start cap alphabetic; }
.sd-step-body { padding-left: calc(var(--sd-num) + 16px); }
@media (max-width: 760px) {
  .sd-step { font-size: 22px; }
  .sd-step-body { padding-left: 0; }
}

/* Result above the white steps panel, prices right after it (Alexa, 23.10.2026:
   «блок A working page на один вверх… после него круглый белый блок, а потом
   цены»). Two dark sections now meet (example → result): they share one gap
   instead of stacking both paddings. Compare after the white panel keeps the
   pause it had after the dark result block. */
.sd-section:not(.sd-light) + .sd-section:not(.sd-light) { padding-top: 0; }
.sd .sd-light + .cmp { padding-top: calc(var(--sd-section) + var(--sd-offer-gap, clamp(56px, 6vw, 112px))); }

/* UX/UI paragraph measures (Alexa's marked screenshot, 23.10.2026).
   Text stops before the edge of a wide grid column; the panel and rules keep
   their width. The two authored lead sentences retain their own lines. */
.sd--uxui [aria-labelledby="sd-result-title"] .sd-copy > p { max-inline-size: 37em; }
.sd--uxui [aria-labelledby="sd-result-title"] .sd-copy > p:first-child { max-inline-size: 32em; text-wrap: balance; }
.sd--uxui #example .sd-case-copy > p { max-inline-size: 38em; }
.sd--uxui #process .sd-step-body p { max-inline-size: 40em; }
.sd--uxui #process .sd-lead:has(> .sd-lead-line) { max-width: 18em; max-inline-size: 18em; }
/* Three more paragraph edges marked by Alexa on UX/UI, 23.10.2026.
   Limit the copy itself, preserving the section grid and natural wrapping. */
.sd--uxui .sd-hero-copy > .sd-lead { max-inline-size: 38ch; }
.sd--uxui [aria-labelledby="sd-approach-title"] .sd-copy > p:nth-child(2) { max-inline-size: 54em; }
.sd--uxui #example .sd-section-head > .sd-lead { max-inline-size: 32ch; }
@media (max-width: 760px) {
  .sd--uxui #process .sd-step:nth-child(2) .sd-step-body p { text-wrap: balance; }
}

/* The same pause from the three-ring offer intro to the tiers on all six
   service pages (Alexa's clarification, 23.10.2026). Phone rhythm stays put. */
@media (min-width: 761px) {
  .sd .cmp-wrap { margin-top: clamp(64px, 3.75vw, 96px); }
}
/* More vertical room in the UX/UI process panel on 2K, from her screenshots.
   Ordinary desktop panel fields stay put. */
@media (min-width: 1920px) {
  .sd--uxui #process { padding-block: clamp(56px, calc(6.25vw - 64px), 96px); }
}

/* Product Design: paragraph edges and phrase wraps marked by Alexa,
   23.10.2026. The copy has its own measure inside the existing grid. */
.sd--product #example .sd-case-copy > p { max-inline-size: 44em; }
.sd--product #process .sd-step-body p { max-inline-size: 64em; }
.sd--product .cmp .lab-lead { text-wrap: balance; }

/* Frontend Development: the four marked step descriptions use a short
   reading column; approach and example paragraphs retain their own measures.
   Alexa's four screenshots, 23.10.2026. */
.sd--frontend [aria-labelledby="sd-approach-title"] .sd-copy > p { max-inline-size: 43em; }
.sd--frontend [aria-labelledby="sd-approach-title"] .sd-copy > p:first-child { max-inline-size: 40em; text-wrap: balance; }
.sd--frontend #example .sd-case-copy > p { max-inline-size: 37em; }
.sd--frontend #example .sd-case-copy > p:first-of-type { max-inline-size: 33em; text-wrap: balance; }
.sd--frontend #process .sd-step-body p { max-inline-size: 36em; }
.sd--frontend .cmp .lab-lead { text-wrap: balance; }
/* The remaining three paragraph edges marked by Alexa, 23.10.2026.
   Result copy keeps its own reading width inside the unchanged split grid. */
.sd--frontend [aria-labelledby="sd-result-title"] .sd-copy > p { max-inline-size: 32em; }
.sd--frontend [aria-labelledby="sd-result-title"] .sd-copy > p:first-child { max-inline-size: 30em; }
@media (max-width: 760px) {
  .sd--frontend #process .sd-step:last-child .sd-step-body p { text-wrap: balance; }
}