/*
 * /stom-marketing/ — страница «Маркетинг для стоматологий» в дизайн-коде главной («Плакатная редакция»).
 * Подключается ПОСЛЕ /home-poster.css: токены, шрифты, кнопки, шапка, меню, стикеры, плакаты, подвал и mbar берутся оттуда.
 * Здесь — только блоки, которых нет на главной (квиз, дорожная карта, фильтр, воронка, лента логотипов, подписка),
 * адаптация компонентов главной под разметку стома и состояния, которые переключают скрипты страницы
 * (legacy-interactions.js и editorial-stom.js рассчитаны на Tailwind-классы hidden / opacity-0 / scale-95 / modal.active).
 * Новых цветов нет: только --paper --sheet --ink --lime --blue --muted --on-ink --on-ink-soft и --err формы.
 */

/* ================= 1. states used by the page scripts ================= */
.hidden{display:none!important}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
em{font-style:normal}
dl,dd,figure,blockquote{margin:0}
h4{margin:0}
textarea,select{font:inherit;color:inherit}
.stom-poster{--err:#B42318}

/* a number that counts up keeps its width */
[data-count-up]{font-variant-numeric:tabular-nums lining-nums}

/* ================= 2. header deltas ================= */
.top__reach{display:flex;align-items:center;gap:16px;justify-self:end}
.top__tel{position:relative;z-index:0;font:800 21px/1 var(--display);letter-spacing:.01em;white-space:nowrap;text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 70%/0 .5em no-repeat;transition:background-size .25s}
.top__tel:hover{background-size:100% .5em}
.top .top__tg{width:44px;height:44px}
.top .top__tg .icon{font-size:20px}
.dd__panel{width:470px}
.dd__list a{font-size:27px;min-height:50px}
@media (min-width:1181px) and (max-width:1320px){
  .top{gap:20px}
  .nav{gap:14px;font-size:14px}
  .top__tg{display:none!important}
  .top__tel{font-size:19px}
}
@media (max-width:980px){
  .top__reach{display:none}
}

/* phone menu: the brand on the ink foot, the «+» of «Услуги» turns into a cross */
.menu__plus{flex:none;display:inline-grid;place-items:center;font:900 1em/1 var(--display);font-style:normal;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.menu__link--group[aria-expanded="true"] .menu__plus{transform:rotate(45deg)}
.menu__brand{display:inline-flex;align-items:center;min-height:40px;justify-self:start}
.menu__brand img{height:28px;width:auto}
.menu__reach a{font-size:clamp(26px,7.4vw,40px)}

/* ================= 3. shared section grammar ================= */
.shead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(40px,4.4vw,72px)}
.shead .lead{padding-bottom:6px}
/* accents inside the uppercase headings: a lime band on paper, lime text on ink, plates on blue and on lime */
.mk{background:linear-gradient(var(--lime),var(--lime)) 0 90%/100% .62em no-repeat;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-lime{color:var(--lime)}
/* лаймовая плашка — ровной полосой по буквам на каждой строке (как в заголовке квиза): сплошной фон строки был «жирным» и налезал на соседние строки */
.lime-plate{padding:0 .08em;background:linear-gradient(var(--lime),var(--lime)) 0 .16em/100% .84em no-repeat;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the poster .h2 is set at .86; here almost every heading carries a plate (.mk/.lime-plate/.ink-plate),
   and at .86 the plates of the lines collide — the leading is loosened for the whole page */
.h2{line-height:.96}
.ink-plate{background:var(--ink);color:var(--lime);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tag{display:inline-block;padding:7px 11px 6px;font:700 12px/1.2 var(--text);text-transform:uppercase;letter-spacing:.08em}
.tag--ink{background:var(--ink);color:var(--lime);transform:rotate(-1.5deg)}
/* a photo in the round avatar of the quotes */
.ava--img{position:relative;overflow:hidden;background:var(--lime)}
/* photo in a round avatar: the face sits in the upper third of the shot, so the crop is taken from the top edge */
.ava--img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% var(--ay,7%)}

/* ================= 4. breadcrumbs ================= */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-top:18px;font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 80%/0 .55em no-repeat;transition:background-size .2s,color .2s}
.crumbs a:hover{color:var(--ink);background-size:100% .55em}
.crumbs > span:last-child{color:var(--ink)}

/* ================= 5. hero ================= */
.hero--stom{min-height:clamp(680px,calc(100svh - var(--header) - 34px),860px)}
.hero--stom .hero__head{grid-area:title;position:relative;z-index:3;align-self:start}
.hero--stom .hero__head .tag{margin-bottom:clamp(16px,2vw,26px)}
.hero--stom .hero__title{grid-area:auto;font-size:clamp(52px,8.4vw,128px)}
.hero--stom .hero__body{max-width:600px}
.hero__lede b{display:block;margin-bottom:6px;font:800 clamp(24px,2vw,30px)/1.02 var(--display);text-transform:uppercase;letter-spacing:.005em}
.hero__acts{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,34px) 22px;margin-top:clamp(30px,3.4vw,44px)}
/* стикер теста стоит отдельно от кнопки кейсов: у него своя тень и наклон */
.hero--stom .hero__acts .quizbtn{margin-top:0;margin-bottom:4px}
.hero__acts .btn{min-height:54px;padding-inline:26px;font-size:17px}
.js .hero--stom .hero__head .tag{opacity:0;transform:translateY(10px) rotate(-1.5deg)}
.js .hero--stom.is-go .hero__head .tag{opacity:1;transform:rotate(-1.5deg);transition:opacity .4s ease-out,transform .6s cubic-bezier(.16,1,.3,1)}

/* the dashboard is a report sheet standing on the blue plane */
/* за карточкой ничего нет: она стоит на бумаге со своей черной тенью */
.report__dl dt{font-size:15px;font-weight:500}
.report__dl dd{display:flex;align-items:baseline;gap:10px;font:800 clamp(30px,2.6vw,40px)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.report__dl small{font:700 14px/1 var(--text);padding:5px 7px 4px;position:relative;top:-3px}
.report__dl .is-positive{background:var(--lime);color:var(--ink)}
.report__dl .is-negative{background:var(--blue);color:#fff}
/* «Окупаемость 750%» is a small sticker inside the card: it counts up and slaps down into the free
   top-left corner of the chart, where the curve still runs low */
/* «✓ Новая заявка» is the ink sticker on the upper right corner */

/* ================= 6. trust rail ================= */
.trust{padding-block:clamp(28px,3vw,44px) 0}
.trust__strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;border-block:2px solid var(--ink);background:var(--sheet)}
.trust__intro{display:flex;align-items:center;padding:0 clamp(18px,2vw,32px);background:var(--ink);color:var(--lime)}
.trust__intro h2{font:900 clamp(30px,2.6vw,42px)/.9 var(--display);text-transform:uppercase;white-space:nowrap;letter-spacing:.005em}
.sd-trust__viewport{min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;overflow-anchor:none;scroll-behavior:auto;scrollbar-width:none}
.sd-trust__viewport::-webkit-scrollbar{display:none}
.sd-trust__viewport:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.sd-trust__logos{display:flex;margin:0;padding:0}
.sd-trust__logo{flex:0 0 clamp(170px,14vw,210px);display:flex;align-items:center;justify-content:center;height:clamp(92px,7.4vw,108px);padding:0 22px;border-right:2px solid var(--ink);user-select:none;transition:background-color .2s}
.sd-trust__logo-art{display:block;width:100%;max-width:150px;height:50px;overflow:hidden;pointer-events:none;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;transition:filter .2s}
img.sd-trust__logo-art{object-fit:contain}
.sd-trust__logo:hover .sd-trust__logo-art{filter:none}
.sd-trust__logo:has(.sd-trust__logo-art--white){background:var(--ink)}
.sd-trust__logo .sd-trust__logo-art--white{mix-blend-mode:normal;filter:grayscale(1) brightness(1.2)}

/* ================= 7. about (ink) ================= */
.about{padding-block:var(--sec)}
.about .shead .lead{color:var(--on-ink-soft);max-width:48ch}
.about__copy{display:grid;gap:14px}
.about__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px);align-items:center}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--on-ink)}
.facts > div{padding:clamp(20px,2vw,30px) clamp(12px,1.6vw,28px) clamp(22px,2.2vw,32px) 0;border-bottom:2px solid rgba(244,243,238,.28)}
.facts > div:nth-child(even){padding-left:clamp(16px,2vw,32px);border-left:2px solid rgba(244,243,238,.28)}
.facts dt{display:flex;align-items:baseline;gap:.12em;white-space:nowrap}
.facts strong{font:900 clamp(84px,8.6vw,150px)/.8 var(--display);color:var(--lime);letter-spacing:-.02em}
.facts dt span{font:800 clamp(28px,2.6vw,42px)/1 var(--display);text-transform:uppercase;color:var(--on-ink)}
.facts dd{margin-top:14px;font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em;color:var(--on-ink-soft)}
/* the review wall of the home page places .say--card by :nth-child — this one stands in its own grid cell */
.say--card.say--about{grid-column:auto;grid-row:auto;--r:1.6deg;--sh:var(--lime);margin:24px 12px 0 0}
.say figcaption{order:3}
.say .qm{order:1}
.say blockquote{order:2}
.say--about blockquote p,.say--cases blockquote p{font:700 clamp(24px,2vw,30px)/1.06 var(--display);letter-spacing:.002em}
.say--about .qm{width:104px;height:82px;left:-22px;top:-46px}
.say--about .ava,.say--cases .ava{width:56px;height:56px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}

/* ================= 8. quiz (blue) ================= */
section.quiz{padding-block:var(--sec);position:relative}
.quiz__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head card" "aside card";column-gap:clamp(32px,5vw,88px);row-gap:clamp(28px,3vw,48px);align-items:start}
.quiz__head{grid-area:head}
.quiz__title{font:900 clamp(48px,5.3vw,84px)/.96 var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance}
/* лаймовая плашка — ровной полосой на каждой строке: сплошной фон строки при межстрочном .96 выше букв и налезал на соседнюю строку ступенькой */
.quiz__title span{padding:0 .08em;background:linear-gradient(var(--lime),var(--lime)) 0 .16em/100% .84em no-repeat;color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.quiz__lead{margin-top:22px;font-size:clamp(18px,1.4vw,21px);line-height:1.45;max-width:40ch}
/* карточка квиза стоит по центру блока, а не вровень с заголовком */
@media (min-width:981px){.quiz-card{align-self:center}}
.quiz-card{grid-area:card;position:relative;display:flex;flex-direction:column;min-height:clamp(560px,46vw,640px);background:var(--sheet);color:var(--ink);border:3px solid var(--ink);box-shadow:16px 16px 0 var(--ink);padding:clamp(22px,3vw,44px);--ring:var(--blue)}
.quiz-card :focus-visible{outline-color:var(--blue)}
.quiz-progress{height:16px;border:2px solid var(--ink);background:#fff;margin-bottom:clamp(24px,2.6vw,36px)}
#progress-bar{height:100%;background:var(--lime);box-shadow:inset -2px 0 0 var(--ink);transition:width .5s cubic-bezier(.16,1,.3,1)}
#quiz-content{flex:1 1 auto}
#quiz-content h3{margin-bottom:24px;font:900 clamp(32px,3vw,48px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.002em;text-wrap:balance}
#quiz-content h3:focus{outline:none}
#quiz-content [role="radiogroup"]{display:grid;gap:10px}
#quiz-content label{position:relative;display:block;cursor:pointer}
#quiz-content .quiz-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#quiz-content .quiz-radio + div{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:16px;min-height:60px;padding:12px 18px;border:2px solid var(--ink);background:var(--sheet);color:var(--ink);font:600 17px/1.3 var(--text);transition:background-color .15s,color .15s,transform .2s var(--ease),box-shadow .2s var(--ease)}
#quiz-content .radio-circle{width:28px;height:28px;border:3px solid var(--ink);background:#fff;transition:background-color .15s}
@media (hover:hover){
  #quiz-content label:hover .quiz-radio:not(:checked) + div{background:var(--lime);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
}
/* the chosen answer stays ink with paper text, also while the pointer is still over it (300 ms before the next step) */
#quiz-content label .quiz-radio:checked + div,#quiz-content label:hover .quiz-radio:checked + div{background:var(--ink);color:var(--paper);transform:none;box-shadow:none}
#quiz-content .quiz-radio:checked + div .radio-circle{border-color:var(--lime);background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0F0C' stroke-width='3.6' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/18px no-repeat}
#quiz-content .quiz-radio:focus-visible + div{outline:3px solid var(--blue);outline-offset:3px}
.quiz-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(24px,2.6vw,36px);padding-top:18px;border-top:2px solid var(--ink)}
.quiz-nav__step{font:800 20px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
#next-btn:not([hidden]){display:inline-flex!important}
#next-btn{min-width:170px;min-height:54px;font-size:17px;letter-spacing:.04em}
#next-btn:disabled{--face:var(--sheet);--fg:var(--muted);--edge:rgba(14,15,12,.35);--pl:rgba(14,15,12,.18);transform:none;cursor:not-allowed}
/* the final step: the contact form of the quiz */
#quiz-content form{display:grid;gap:14px}
#quiz-content form + p,#quiz-content h3 + p{margin:-12px 0 20px;font-size:16px;color:var(--muted)}
#quiz-content form label{display:block;margin-bottom:8px;font:700 14px/1 var(--text);cursor:default}
#quiz-content form input[type="text"],#quiz-content form input[type="tel"],.msheet .field input{width:100%;height:58px;padding:0 16px;border:2px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:400 17px/1 var(--text);transition:box-shadow .2s,border-color .2s}
#quiz-content form input::placeholder{color:#6A6B63}
#quiz-content form input[type="text"]:focus,#quiz-content form input[type="tel"]:focus,.msheet .field input:focus{outline:none;box-shadow:6px 6px 0 var(--blue)}
#quiz-content form button[type="submit"]{--face:var(--lime);--fg:var(--ink);--edge:transparent;--off:4px;--pl:var(--ink);--r:-.55deg;position:relative;display:flex;align-items:center;justify-content:center;width:calc(100% - 4px);min-height:60px;margin-top:10px;padding:12px 22px;border:0;border-radius:0;background:var(--face);color:var(--fg);font:700 18px/1.1 var(--text);letter-spacing:.03em;cursor:pointer;box-shadow:inset 0 0 0 1px var(--edge),var(--off) var(--off) 0 var(--pl);transform:rotate(var(--r));transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s,color .2s}
@media (hover:hover){#quiz-content form button[type="submit"]:hover{transform:translate(-2px,-2px) rotate(0deg);box-shadow:6px 6px 0 var(--pl)}}
#quiz-content form button[type="submit"]:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--pl);transition-duration:.08s}
#quiz-content form > div:has(> img){display:flex;align-items:center;gap:12px;font:600 14px/1.3 var(--text)}
#quiz-content form > div:has(> img) img{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--lime);object-fit:cover;object-position:50% 8%;box-shadow:3px 3px 0 var(--ink)}
#quiz-content form > p{font-size:14px;color:var(--muted)}
#quiz-content form > div:last-child{margin-top:2px}
/* consent line: the same box as the request form on the home page, the text stays after the button as in the original */
.sd-form-consent{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font:500 13px/1.45 var(--text);color:var(--ink);cursor:pointer}
.sd-form-consent input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin:0;border:2px solid var(--ink);border-radius:0;background:#fff;cursor:pointer;transition:background-color .15s}
.sd-form-consent input[type="checkbox"]:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4FF2E' stroke-width='3.6' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/17px no-repeat}
.sd-form-consent input[type="checkbox"]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sd-form-consent a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.sd-form-consent span{display:block}
/* a phone that did not pass the check */
input.\!border-red-500{border-color:var(--err)!important;box-shadow:6px 6px 0 var(--err)!important}
/* while sending, the request button stays pressed into its plate */
.stom-poster form button[type="submit"]:disabled{--face:var(--ink);--fg:var(--lime);background:var(--ink)!important;color:var(--lime)!important;cursor:progress;transform:translate(4px,4px) rotate(0deg)!important;box-shadow:0 0 0 var(--ink)!important}
/* the side column on blue */
.quiz-aside{grid-area:aside;color:#fff}
.quiz-aside h3{font:900 clamp(30px,2.6vw,42px)/.92 var(--display);text-transform:uppercase}
.checks{margin-top:18px;border-bottom:2px solid rgba(255,255,255,.45)}
.checks li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:14px;padding:12px 0;border-top:2px solid rgba(255,255,255,.45);font:600 17px/1.3 var(--text)}
.checks__box{display:grid;place-items:center;width:30px;height:30px;background:var(--lime);color:var(--ink);border:2px solid var(--ink)}
.checks__box .icon{font-size:20px;stroke-width:3.2}
.quiz-aside__card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin:32px 12px 0 0;padding:18px 20px;background:var(--sheet);color:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.quiz-aside__pic{position:relative;width:76px;height:76px}
.quiz-aside__ava{position:absolute;inset:0;overflow:hidden;border-radius:50%;border:3px solid var(--ink);background:var(--lime)}
.quiz-aside__ava img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 7%}
.quiz-aside__online{position:absolute;right:-2px;bottom:2px;width:20px;height:20px;border-radius:50%;background:var(--lime);border:3px solid var(--ink)}
.quiz-aside__online::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ink);opacity:0;animation:stom-ping 1.8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes stom-ping{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.3)}}
.quiz-aside__name{font:900 28px/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.quiz-aside__role{margin-top:4px;font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.quiz-aside__exp{display:inline-block;margin-top:10px;padding:5px 10px 4px;background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 13px/1.2 var(--text);transform:rotate(2.5deg)}
.quiz-aside__note{display:flex;align-items:flex-start;gap:10px;margin-top:22px;font:600 14px/1.4 var(--text);color:#fff;max-width:38ch}
.quiz-aside__note .icon{flex:none;font-size:22px;color:var(--lime)}

/* ================= 9. roadmap (paper) ================= */
@media (hover:hover){.sd-system-tab[aria-selected="false"]:hover strong::before{transform:skewX(-9deg) rotate(-1.4deg) scaleX(1)}}

/* ================= 10. strategy (ink) ================= */
.strategy{padding-block:var(--sec)}
.strategy__sum{display:grid;gap:14px;padding-bottom:6px}
.strategy__sum strong{display:block;font:800 clamp(24px,2vw,32px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--on-ink)}
.strategy__sum p + p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--on-ink-soft);max-width:52ch}
.sd-funnel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;border-top:2px solid var(--on-ink)}
.sd-funnel article{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px clamp(12px,1.4vw,22px) 26px;border-bottom:2px solid rgba(244,243,238,.28)}
.sd-funnel article + article{border-left:2px solid rgba(244,243,238,.28)}
.sd-funnel span{font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.07em;color:var(--on-ink-soft)}
.sd-funnel strong{margin-top:8px;font:900 clamp(40px,3.8vw,64px)/.88 var(--display);letter-spacing:-.01em;white-space:nowrap}
.sd-funnel small{font:600 14px/1.3 var(--text);color:var(--on-ink-soft)}
.sd-funnel article:not(.sd-funnel__result)::after{content:"";display:block;width:var(--w,100%);height:12px;margin-top:auto;background:var(--lime)}
.sd-funnel article:not(.sd-funnel__result) small{margin-bottom:14px}
.sd-funnel article:not(.sd-funnel__result) strong{margin-bottom:14px}
.sd-funnel__result.sticker{align-self:center;margin:-18px -6px -18px 14px;padding:18px 18px 20px;border:3px solid var(--ink)!important;background:var(--lime);color:var(--ink);box-shadow:8px 8px 0 var(--paper);--r:3deg}
.sd-funnel__result span,.sd-funnel__result small{color:var(--ink)}
.sd-funnel__result strong{font-size:clamp(44px,4vw,68px)}
.sd-funnel__result small{font-weight:700}
.strategy__act{display:flex;justify-content:flex-start;margin-top:clamp(40px,4vw,64px)}
.strategy__act .btn{min-height:56px;padding-inline:30px;font-size:17px}

/* ================= 11. fit (paper) ================= */
.fit{padding-block:var(--sec)}
.sd-fit__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px)}
.sd-fit__grid article{border-top:10px solid var(--ink)}
.sd-fit__yes{border-top-color:var(--lime)!important;box-shadow:0 -2px 0 var(--ink)}
.sd-fit__grid h3{padding:22px 0 18px;border-bottom:3px solid var(--ink);font:900 clamp(40px,4vw,64px)/.88 var(--display);text-transform:uppercase}
.sd-fit__grid li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;align-items:start;padding:18px 0;border-bottom:2px solid var(--ink);font:600 clamp(17px,1.3vw,20px)/1.35 var(--text)}
.sd-fit__grid li::before{content:"";width:34px;height:34px;margin-top:-4px;border:3px solid var(--ink);background:var(--sheet)}
.sd-fit__yes li::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4FF2E' stroke-width='3.6' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/22px no-repeat}
.sd-fit__no li::before{background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0F0C' stroke-width='3.6' stroke-linecap='square'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/20px no-repeat}
.sd-fit__no li{color:var(--muted)}
.sd-fit__footer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(48px,5vw,80px)}
.sd-fit__callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(22px,2.6vw,36px);background:var(--ink);color:var(--paper);box-shadow:12px 12px 0 var(--lime);--plate:var(--lime);--lime-plate:var(--paper);--ring:var(--lime)}
.sd-fit__callout p{flex:1 1 320px;font-size:17px;line-height:1.45;color:var(--on-ink-soft)}
.sd-fit__callout strong{display:block;margin-bottom:6px;font:800 clamp(28px,2.6vw,40px)/.95 var(--display);text-transform:uppercase;color:var(--lime)}
.sd-fit__callout .btn{min-height:54px;padding-inline:28px;font-size:17px}
.sd-fit__note{padding-top:16px;border-top:2px solid var(--ink);font-size:16px;line-height:1.5;color:var(--muted);max-width:60ch}

/* ================= 12. cases ================= */
.cases__intro .h2{text-wrap:balance}
.case-nav .sd-case-tab{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:56px;margin:0;padding:2px 12px 0;border:0;border-left:2px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:800 19px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.case-nav .sd-case-tab:last-child{border-right:2px solid var(--ink)}
.case-nav .sd-case-tab:hover{background:var(--lime)}
.case-nav .sd-case-tab.is-active{background:var(--ink);color:var(--lime)}
.case-nav .sd-case-tab:focus-visible{outline:3px solid var(--blue);outline-offset:-6px}
.case-nav .sd-case-tab.is-active:focus-visible{outline-color:var(--lime)}
@media (min-width:981px) and (max-width:1439px){
  .case-nav .sd-case-tab{padding-inline:var(--tp);letter-spacing:0;font-size:clamp(15px,calc((100vw - 2 * var(--g) - 40px - 22 * var(--tp)) / 40),19px)}
}
.cases__body{row-gap:0}
.sd-case-panel{grid-column:1/-1;touch-action:pan-y}
.sd-case-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end}
.sd-case-card > *{animation:case-in .55s cubic-bezier(.16,1,.3,1) both}
.sd-case-card > :nth-child(2){animation-delay:.04s}
.sd-case-card > :nth-child(3){animation-delay:.08s}
.sd-case-card > :nth-child(n+4){animation-delay:.12s}
.sd-case-card__top{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-bottom:18px;border-bottom:2px solid currentColor;font:700 14px/1.3 var(--text);text-transform:uppercase;letter-spacing:.06em}
.sd-case-card__top > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.sd-case-card__top > div span{color:var(--on-ink-soft)}
.sd-case-card__top strong{font:900 clamp(30px,2.6vw,40px)/.9 var(--display);letter-spacing:.01em;color:var(--on-ink)}
.sd-case-card__top > span{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 5px;background:var(--lime);color:var(--ink);font-size:12px}
.sd-case-card__top > span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);animation:stom-blink 1.4s steps(2,jump-none) infinite}
@keyframes stom-blink{50%{opacity:.15}}
.sd-case-card__result{grid-column:1/8;grid-row:2/4;align-self:start;display:flex;flex-direction:column;padding-top:clamp(28px,3vw,44px)}
.sd-case-card__result > span{order:2;margin-top:16px;font:800 clamp(28px,2.8vw,44px)/1 var(--display);text-transform:uppercase;color:var(--on-ink)}
.sd-case-card__result strong{order:1;display:flex;align-items:flex-end;gap:.06em;font:900 clamp(132px,19vw,320px)/.8 var(--display);letter-spacing:-.02em;color:var(--lime);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.sd-case-card__result strong small{font-size:.3em;line-height:.9;padding-bottom:.08em;color:var(--on-ink);word-spacing:.14em;letter-spacing:0}
.sd-case-card dl{grid-column:9/13;grid-row:2;align-self:end;margin:0;padding-top:clamp(28px,3vw,44px)}
.sd-case-card dl > div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid rgba(244,243,238,.28)}
.sd-case-card dl > div:last-child{border-bottom:0}
.sd-case-card dt{font:800 clamp(40px,3.8vw,60px)/.95 var(--display);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--on-ink)}
.sd-case-card dd{margin:0;font-size:15px;line-height:1.3;color:var(--on-ink-soft)}
.sd-case-card > button{grid-column:9/13;grid-row:3;justify-self:start;align-self:start;--face:var(--lime);--fg:var(--ink);--edge:transparent;--off:4px;--pl:var(--paper);--r:-1.5deg;position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;margin-top:22px;padding:12px 22px 12px 24px;border:0;border-radius:0;background:var(--face);color:var(--fg);font:700 17px/1.1 var(--text);cursor:pointer;box-shadow:var(--off) var(--off) 0 var(--pl);transform:rotate(var(--r));transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sd-case-card > button::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
@media (hover:hover){
  .sd-case-card > button:hover{transform:translate(-2px,-2px) rotate(0deg);box-shadow:6px 6px 0 var(--pl)}
  .sd-case-card > button:hover::after{transform:translateX(3px)}
}
.sd-case-card > button:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--pl);transition-duration:.08s}
.sd-case-card > button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.say--case.say--cases{grid-column:6/13;margin-top:clamp(56px,5vw,84px);margin-right:10px;--r:-1.2deg}
.say--cases .qm{width:104px;height:82px;left:-22px;top:-46px}

/* ================= 13. team (lime) ================= */
.team__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.team__side{display:grid;gap:22px}
.sd-team__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink)}
.sd-team__stats > div{padding:14px 16px 0 0}
.sd-team__stats > div + div{padding-left:18px;border-left:2px solid var(--ink)}
.sd-team__stats dt{font:900 clamp(60px,6vw,96px)/.84 var(--display);letter-spacing:-.01em}
.sd-team__stats dd{margin-top:8px;font:700 13px/1.3 var(--text);text-transform:uppercase;letter-spacing:.08em}
.sd-team-carousel{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4.6fr);grid-template-rows:auto 1fr;grid-template-areas:"people slides" "status slides";column-gap:clamp(28px,3.4vw,64px);align-items:start}
/* the stage: cut-out portraits standing on an ink rule. Each button is one narrow slot (so the photos may overlap
   while every slot stays clickable), the photo inside it is drawn wider than the slot and ignores the pointer */
.sd-team-carousel__people{--sh:clamp(158px,14.4vw,205px);grid-area:people;position:relative;height:var(--sh);margin:clamp(52px,5vw,80px) 12px 0 0;clip-path:inset(-90px -60px 0 -60px)}
/* линия-«пол» под людьми начинается ровно у края первого портрета, а не у края колонки */
.sd-team-carousel__people::after{content:"";position:absolute;z-index:11;left:2.6%;right:0;bottom:0;height:6px;background:var(--ink)}
.sd-team-carousel__person{position:absolute;top:-70px;bottom:0;left:calc(15.5% + var(--i) * 14.4%);width:14%;translate:-50% 0;z-index:calc(6 - var(--i));margin:0;padding:0;border:0;background:transparent;cursor:pointer;filter:grayscale(1) contrast(1.06) brightness(1.02);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .35s ease;-webkit-tap-highlight-color:transparent}
.sd-team-carousel__person:nth-child(4),.sd-team-carousel__person:nth-child(5){z-index:4}
.sd-team-carousel__person img{position:absolute;left:50%;bottom:0;height:min(282px,calc(var(--sh) * var(--hh) * 1.38));width:auto;max-width:none;aspect-ratio:var(--ar);translate:-50% 20%;object-fit:contain;object-position:50% 100%;pointer-events:none;-webkit-user-drag:none;user-select:none}
@media (hover:hover){.sd-team-carousel__person:hover{filter:grayscale(0) contrast(1.04)}}
.sd-team-carousel__person[aria-pressed="true"]{z-index:10;transform:scale(1.03);filter:grayscale(0) contrast(1.04) drop-shadow(9px 0 0 var(--ink))}
.sd-team-carousel__person:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
/* the counter is only for screen readers — nothing is counted on screen */
.sd-team-carousel__status{grid-area:status;position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sd-team-carousel__slides{grid-area:slides;position:relative;z-index:12;isolation:isolate;margin:clamp(28px,2.6vw,44px) 12px 12px 0;padding:clamp(22px,2vw,30px) clamp(20px,2vw,32px) clamp(24px,2vw,30px)}
.sd-team-carousel__slides::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sheet);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);transform:rotate(-.5deg)}
.sd-team-slide:not([hidden]){animation:panel-in .4s cubic-bezier(.16,1,.3,1)}
.sd-team-slide__portrait{display:none}
.sd-team-slide__role{display:inline-block;padding:6px 10px 5px;background:var(--lime);border:2px solid var(--ink);font:700 12px/1.25 var(--text);text-transform:uppercase;letter-spacing:.07em;transform:rotate(-1.5deg)}
.sd-team-slide h3{margin-top:16px;font:900 clamp(40px,3.6vw,58px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance}
.sd-team-slide__focus{margin-top:16px;padding-top:12px;border-top:2px solid var(--ink);font:800 clamp(22px,1.8vw,28px)/1.02 var(--display);text-transform:uppercase}
.sd-team-slide__description{margin-top:9px;font-size:16px;line-height:1.5;color:var(--muted);max-width:40ch}

/* ================= 14. comment (paper) ================= */
.comment{padding-block:var(--sec) 0}
.say--lead.say--paper{max-width:1180px;color:var(--ink);padding:0}
.say--paper .qm{fill:var(--lime);stroke:var(--ink);stroke-width:5}
.say--paper blockquote p{font:700 clamp(36px,4vw,64px)/1 var(--display);letter-spacing:-.004em;text-wrap:balance}
.say--paper mark{background:var(--lime);color:var(--ink);padding:0 .08em}
.say--paper .ava{width:60px;height:60px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.say--paper .say__id b{color:var(--ink);font-size:26px}
.say--paper .say__id span{color:var(--muted);font-size:14px}

/* ================= 15. offer (blue) ================= */
.offer{padding-block:var(--sec);margin-top:var(--sec)}
.offer__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:end}
.offer__copy .h2{font-size:clamp(48px,5.2vw,84px)}
.offer__copy .lead{margin-top:24px;color:#fff}
/* what goes into the offer: rows with rules and lime numbers — the .commit list of the home page on blue */
.sd-offer__benefits{counter-reset:offer;display:grid;grid-template-columns:1fr;border-top:2px solid rgba(255,255,255,.45)}
.sd-offer__benefits li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(14px,1.8vw,28px);padding:clamp(15px,1.7vw,24px) 0;border-bottom:2px solid rgba(255,255,255,.45)}
.sd-offer__benefits li::before{counter-increment:offer;content:counter(offer,decimal-leading-zero);font:900 clamp(28px,2.6vw,40px)/1 var(--display);color:var(--lime);font-variant-numeric:tabular-nums}
.sd-offer__benefits span{font:900 clamp(24px,2.2vw,34px)/.98 var(--display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.sd-offer__bar{margin-top:clamp(40px,4.4vw,72px)}
.sd-offer__action{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.sd-offer__action .btn{min-height:58px;padding-inline:30px;font-size:18px}
.sd-offer__action small{font-size:14px;color:var(--on-ink-soft)}

/* ================= 16. subscribe (paper) ================= */
.subscribe{padding-block:var(--sec)}
.subscribe__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center}
.sd-subscribe__action{position:relative;display:grid;justify-items:start;gap:14px;margin-right:14px;padding:clamp(26px,2.8vw,40px);background:var(--sheet);border:3px solid var(--ink);box-shadow:14px 14px 0 var(--blue)}
.sd-subscribe__action p{max-width:34ch;padding-right:64px;font-size:17px;line-height:1.45}
.sd-subscribe__action strong{font:900 clamp(64px,7vw,112px)/.84 var(--display);letter-spacing:-.01em}
.sd-subscribe__action .btn{margin-top:8px;min-height:56px;padding-inline:28px;font-size:17px}
.sd-subscribe__action .btn .icon{font-size:20px}
.subscribe__tg{position:absolute;top:-30px;right:-24px;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--blue);color:#fff;box-shadow:6px 6px 0 var(--ink);--r:-8deg}
.subscribe__tg .icon{font-size:42px}

/* ================= 17. footer + phone bar ================= */
.foot__grid--stom{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr)}
.foot__brand img{height:40px;width:auto}
.foot .foot__h{margin-bottom:14px}
.foot__list li{display:flex;align-items:flex-start;gap:10px}
.foot__list .icon{flex:none;margin-top:.1em;font-size:18px;color:var(--lime)}
@media (min-width:981px){
  .foot__legal{padding-right:max(0px,calc(104px - var(--g)))}
}

/* ================= 18. popups: offer, audit, exit, rate limit ================= */
.modal{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;padding:clamp(20px,5vh,56px) var(--g);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transition:opacity .22s ease-out,visibility 0s .22s}
.modal.active{opacity:1;visibility:visible;transition:opacity .22s ease-out,visibility 0s}
.modal__dim{position:fixed;inset:0;background:rgba(14,15,12,.74)}
.modal-content.msheet{position:relative;flex:none;width:min(100%,560px);margin:auto;padding:clamp(28px,3vw,40px) clamp(22px,3vw,40px) clamp(22px,2.4vw,32px);background:var(--sheet);color:var(--ink);border:3px solid var(--ink);box-shadow:14px 14px 0 var(--lime);--ring:var(--blue)}
.modal.active .modal-content{animation:pop-in .5s cubic-bezier(.16,1,.3,1)}
.msheet__head{padding-right:52px}
.msheet__title{font:900 clamp(46px,4.6vw,66px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.004em;text-wrap:balance}
.msheet__lead{margin-top:14px;font-size:16px;line-height:1.45;color:var(--muted);max-width:44ch}
.msheet__badge{display:inline-block;margin-top:16px;padding:7px 11px 6px;background:var(--lime);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 13px/1.25 var(--text);transform:rotate(-1.5deg)}
.msheet__form{display:grid}
.msheet .field{margin-top:18px}
.msheet .btn--lime{width:calc(100% - 4px);min-height:60px;margin-top:22px;font-size:18px;--r:-.6deg}
.msheet__note{display:flex;align-items:center;gap:8px;margin-top:14px;font:600 13px/1.35 var(--text);color:var(--muted)}
.msheet__note .icon{flex:none;font-size:18px;color:var(--ink)}
.msheet .sd-form-consent{margin-top:16px}
.rl{margin-top:22px;border-top:2px solid var(--ink)}
.rl__h{padding:14px 0 10px;font:600 14px/1.4 var(--text)}
.rl__list{border-bottom:2px solid var(--ink)}
.rl__link{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(14,15,12,.22);color:var(--ink);text-decoration:none}
.rl__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--ink);transition:background-color .2s}
.rl__ico .icon{font-size:20px}
.rl__link:hover .rl__ico{background:var(--lime)}
.rl__txt b{display:block;font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.rl__txt span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.rl__ok{width:calc(100% - 4px);margin-top:22px;min-height:54px;font-size:17px}

/* ================= 19. case modal and lightbox ================= */
.cmodal{position:fixed;inset:0;z-index:110}
.cmodal__dim{position:absolute;inset:0;background:rgba(14,15,12,.8);transition:opacity .3s}
.cmodal__scroll{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cmodal__center{display:flex;min-height:100%;align-items:center;justify-content:center;padding:clamp(20px,4vh,48px) var(--g)}
.cm{position:relative;width:min(100%,1120px);background:var(--sheet);color:var(--ink);border:3px solid var(--ink);box-shadow:14px 14px 0 var(--lime);transition:opacity .3s,transform .3s;--ring:var(--blue)}
#modal-backdrop.opacity-0,#modal-panel.opacity-0,#lightbox-modal.opacity-0{opacity:0}
#modal-panel.scale-95{transform:translateY(24px) rotate(-1.4deg) scale(.985)}
#modal-panel.animate-scale-up{animation:pop-in .5s cubic-bezier(.16,1,.3,1)}
.cm__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,40px) 20px;border-bottom:3px solid var(--ink)}
#modal-title{font:900 clamp(42px,4.6vw,76px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.004em}
#modal-subtitle{display:inline-block;margin-top:12px;padding:6px 10px 5px;background:var(--ink);color:var(--lime);font:700 13px/1.2 var(--text);text-transform:uppercase;letter-spacing:.06em}
.cm__x.pop__x{position:absolute;z-index:3;top:clamp(18px,2.2vw,30px);right:clamp(18px,2.2vw,30px)}
.cm__head{padding-right:96px}
.cm__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);padding:clamp(22px,2.6vw,36px) clamp(22px,2.6vw,40px)}
.cm__text{display:grid;gap:26px;align-content:start}
.cm__block h4,.cm__gallery h4{display:flex;align-items:center;gap:10px;margin-bottom:10px;font:800 20px/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.cm__block h4::before,.cm__gallery h4::before{content:"";width:12px;height:12px;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.cm__block p{font-size:16px;line-height:1.65;max-width:70ch}
.cm__block--result #modal-result-text{padding:12px 14px;background:var(--lime);color:var(--ink);font:600 17px/1.55 var(--text)}
.cm__more:empty{display:none}
.cm__gallery{align-self:start;position:sticky;top:0}
.cm__gallery .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:4px 6px 6px 0}
#modal-gallery.case-gallery--empty > .grid{display:none}
.cm__shot{position:relative;aspect-ratio:16/9;overflow:hidden;border:2px solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink);cursor:zoom-in;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cm__shot--wide{grid-column:1/-1;aspect-ratio:3/1}
.cm__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cm__zoom{position:absolute;inset:0;display:grid;place-items:center;background:rgba(196,255,46,.28);opacity:0;transition:opacity .2s}
.cm__zoom .icon{width:48px;height:48px;padding:11px;border-radius:50%;background:var(--ink);color:var(--lime);stroke-width:2.2}
@media (hover:hover){.cm__shot:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}.cm__shot:hover .cm__zoom{opacity:1}}
.cm__shot:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.cm__shot:focus-visible .cm__zoom{opacity:1}
.cm__empty{padding:16px;border:2px dashed var(--ink);font-size:15px;line-height:1.5;color:var(--muted)}
.cm__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px clamp(22px,2.6vw,40px) 22px;border-top:2px solid var(--ink)}
.cm__foot span{font-size:13px;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:clamp(56px,6vw,80px) clamp(12px,3vw,48px) clamp(20px,3vw,40px);background:rgba(14,15,12,.94);transition:opacity .3s}
.case-lightbox__close.pop__x{position:absolute;top:18px;right:18px;width:52px;height:52px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--lime)}
.case-lightbox__close.pop__x::before,.case-lightbox__close.pop__x::after{left:15px;top:25px;width:22px}
.case-lightbox__frame{position:relative;display:grid;place-items:center;min-width:min(320px,90vw);min-height:180px;max-width:min(calc(100vw - 160px),1600px);border:3px solid var(--paper);background:var(--ink);box-shadow:10px 10px 0 var(--lime)}
.case-lightbox__image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 150px);opacity:0;transition:opacity .2s}
.case-lightbox__image.is-ready{opacity:1}
.case-lightbox__status{position:absolute;inset:auto 16px;text-align:center;font:800 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--lime)}
.case-lightbox__status.is-error{inset:auto 16px;padding:12px 14px;background:var(--err);color:#fff}

/* ================= 20. widgets ================= */

/* ================= 21. responsive ================= */
@media (max-width:1439px){
  .sd-funnel strong{font-size:clamp(34px,3.6vw,52px)}
}
@media (max-width:1240px) and (min-width:981px){
  .quiz__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .sd-funnel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sd-funnel article:nth-child(4){border-left:0}
  .sd-funnel__result.sticker{margin:18px 0 0 14px}
}
@media (max-width:1180px){
  .top__reach{justify-self:end}
}
@media (max-width:980px){
  .hero--stom{grid-template-areas:"title" "body" "stage";min-height:0}
  .hero--stom .hero__head{padding-top:clamp(16px,4vw,32px)}
  .hero--stom .hero__head .tag{margin-bottom:14px}
  .hero--stom .hero__title{padding-top:0;font-size:clamp(46px,13vw,104px)}
  .hero--stom .hero__body{padding-top:22px;padding-bottom:0}
  .hero__lede b{font-size:clamp(22px,6vw,30px)}
  .hero--stom .hero__acts{row-gap:36px}
  .hero__acts .btn{flex:1 1 auto;min-width:0}
  .hero__acts .btn--lime{--r:-1deg}

  .trust__strip{grid-template-columns:1fr}
  .trust__intro{padding:10px var(--g);margin-inline:calc(var(--g) * -1)}
  .trust__intro h2{font-size:28px}
  .trust .wrap{padding-inline:0}
  .trust__strip{border-inline:0}
  .sd-trust__logo{flex-basis:clamp(140px,38vw,180px);height:84px;padding:0 16px}
  .sd-trust__logo-art{height:44px;max-width:130px}
  .trust__intro{margin-inline:0;padding-inline:var(--g)}

  .shead,.quiz__grid,.about__grid,.offer__grid,.subscribe__grid,.sd-fit__footer{grid-template-columns:1fr;gap:18px}
  .shead{margin-bottom:36px}
  .about__grid{gap:48px}
  .say--card.say--about{margin:40px 10px 0 16px;--r:1deg}
  .say--about .qm,.say--cases .qm{width:84px;height:66px;left:-16px;top:-38px}

  .quiz__grid{grid-template-areas:"head" "aside" "card";row-gap:32px}
  .quiz-card{min-height:0;box-shadow:10px 10px 0 var(--ink);margin-right:10px}
  #next-btn{--r:-1deg}


  .sd-funnel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-funnel article + article{border-left:0}
  .sd-funnel article:nth-child(even){border-left:2px solid rgba(244,243,238,.28)}
  .sd-funnel article:nth-child(4){border-left:2px solid rgba(244,243,238,.28)}
  .sd-funnel__result.sticker{margin:16px 6px 10px 12px}
  .strategy__act .btn{width:calc(100% - 4px);--r:-.8deg}

  .sd-fit__grid{grid-template-columns:1fr;gap:48px}
  .sd-fit__callout{box-shadow:8px 8px 0 var(--lime);margin-right:8px}
  .sd-fit__callout .btn{width:calc(100% - 4px);--r:-.8deg}

  .case-nav .sd-case-tab{flex:none;min-height:50px;padding-inline:14px}
  .sd-case-card{grid-template-columns:1fr}
  .sd-case-card > *{grid-column:1/-1!important;grid-row:auto!important}
  .sd-case-card__result strong{font-size:clamp(110px,34vw,220px)}
  .sd-case-card dl{padding-top:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .sd-case-card dl > div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0 6px;border-bottom:0;border-top:1px solid rgba(244,243,238,.28)}
  .sd-case-card dt{font-size:clamp(34px,10vw,54px)}
  .sd-case-card dd{font-size:14px}
  .sd-case-card > button{justify-self:stretch;justify-content:center;width:calc(100% - 4px);margin-top:26px;--r:-.8deg}
  .cases__body{grid-template-columns:1fr}
  .say--case.say--cases{grid-column:1/-1;margin:72px 10px 0 16px;--r:1deg}

  .team__head{grid-template-columns:1fr}
  /* the carousel is a desktop component; on phones the team is the deck slider of the home page (.crew-m in /home-poster.css) */
  .sd-team-carousel{display:none}
  .deck__txt{margin:10px 0 0;padding-top:8px;border-top:2px solid var(--ink);font:500 13px/1.4 var(--text);color:#3B3C35}
  .deck__zone b{font-size:23px}

  .comment{padding-top:calc(var(--sec) * .8)}
  .say--paper blockquote p{font-size:clamp(32px,8.6vw,48px);line-height:1.02}
  .offer{margin-top:calc(var(--sec) * .8)}
  /* на телефоне команда лаймовая: отступ перед синим блоком показывал между ними полосу бумаги */
  .team + .offer{margin-top:0}
  .sd-offer__action{align-items:stretch;text-align:left}
  .sd-offer__action .btn{width:calc(100% - 4px);--r:-.8deg}
  .sd-subscribe__action{margin:30px 10px 0 0;box-shadow:10px 10px 0 var(--blue)}
  .sd-subscribe__action .btn{width:calc(100% - 4px);--r:-.8deg}

  .foot__grid--stom{grid-template-columns:repeat(2,minmax(0,1fr))}

  .cm__body{grid-template-columns:1fr}
  .cm__gallery{position:static}

  /* the chat button stays on phones (WhatsApp and MAX live only there): it stands above the phone bar
     and, as on wide screens, waits until the first screen is scrolled away */
  /* …and it leaves together with the phone bar: while the quiz card is on screen (its answers, «Далее», the final form
     and its consent line stay uncovered). An opened list of contacts is never pulled away from under the finger */
}
@media (max-width:720px){
  .modal{padding:28px 0 0}
  .modal-content.msheet{width:100%;margin:auto 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));border-width:3px 0 0;box-shadow:0 -8px 0 var(--lime)}
  .modal.active .modal-content{animation:pop-up .42s cubic-bezier(.16,1,.3,1)}
  .msheet .pop__x{position:sticky;top:10px;z-index:3;display:grid;margin:0 -2px -34px auto;box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--ink),0 0 0 6px var(--sheet)}
  .msheet__head{padding-right:56px}
  .msheet__title{margin-top:8px;font-size:clamp(42px,12.4vw,56px)}
  .msheet .field{margin-top:12px}
  .msheet .field input{height:52px}
  .msheet .btn--lime{min-height:54px;margin-top:16px;font-size:17px}
  .cmodal__center{padding:24px 0 0;align-items:flex-end}
  .cm{width:100%;border-width:3px 0 0;box-shadow:0 -8px 0 var(--lime)}
  .cm__x.pop__x{position:sticky;top:10px;right:auto;display:grid;margin:14px 14px -58px auto;box-shadow:inset 0 0 0 1px var(--ink),3px 3px 0 var(--ink),0 0 0 6px var(--sheet)}
  .cm__head{padding-right:72px}
  .cm__foot .btn{width:calc(100% - 4px)}
  .case-lightbox__frame{max-width:min(94vw,1600px)}
  .foot__grid--stom{grid-template-columns:1fr}
  /* «Активно» (владелец, 19.09.2026): рядом с длинным городом плашка уезжала на отдельную строку, теперь она стоит справа над большой цифрой.
     В разметке плашка остается в верхней строке карточки, меняется только положение, поэтому редактировать editorial-stom.js не нужно */
  .sd-case-card__top{position:relative;z-index:1}
  .sd-case-card__top > span{position:absolute;top:calc(100% + 16px);right:0}
  .sd-case-card__result{padding-top:52px}
}
@media (max-width:600px){
  .hero__acts{display:grid;grid-template-columns:1fr;gap:14px}
  .hero__acts .btn{width:calc(100% - 4px)}
  .hero__acts .btn--lime{--r:-.8deg}
  .facts strong{font-size:clamp(64px,19vw,96px)}
  .facts dt span{font-size:24px}
  .facts > div{padding-right:10px}
  .facts > div:nth-child(even){padding-left:14px}
  .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;border-bottom:0}
  .checks li{font-size:15px;grid-template-columns:26px minmax(0,1fr);gap:10px;border-bottom:0}
  .checks__box{width:26px;height:26px}
  #quiz-content .quiz-radio + div{min-height:54px;padding:10px 14px;font-size:16px}
  .quiz-nav{flex-wrap:nowrap}
  #next-btn{min-width:0;flex:0 1 auto}
  .sd-offer__benefits li{gap:14px;padding:13px 0}
  .sd-offer__benefits li::before{font-size:26px}
  .sd-offer__benefits span{font-size:23px}
  .subscribe__tg{width:72px;height:72px;top:-26px;right:-8px}
  .subscribe__tg .icon{font-size:32px}
  .sd-subscribe__action strong{font-size:clamp(56px,17vw,80px)}
  .cm__head{padding-right:72px}
  #modal-title{font-size:clamp(38px,11vw,52px)}
}
/* the side card of the quiz is hidden on phones, as in the original */
@media (max-width:767px){
  .quiz-aside__card,.quiz-aside__note{display:none}
}
@media (max-width:420px){
  .sd-case-card__top strong{font-size:28px}
  .report__dl dd{font-size:28px}
  .report__dl dt{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .quiz-aside__online::after,.sd-case-card__top > span::before{animation:none!important}
  .sd-case-card > button,#quiz-content form button[type="submit"]{--r:0deg!important;transition:none!important}
}

/* ---------- «Система, которая приводит пациентов»: собран по присланному макету —
 * заголовок с двумя маркерными плашками, фото врача справа, три этапа с номером,
 * наклонной табличкой и своей картинкой ---------- */
.sys{position:relative;isolation:isolate;padding:clamp(30px,3.2vw,52px) 0 clamp(40px,4vw,64px);overflow-x:clip}
/* едва заметная печатная фактура поверх бумаги */
.sys::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
.sys__in{max-width:1536px;margin-inline:auto;padding-inline:var(--g)}

/* ---------- шапка: заголовок на две колонки, лид под его первой строкой, фото справа ---------- */
.sys__head{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,22fr) minmax(0,37fr);column-gap:clamp(18px,2.6vw,48px);align-items:start}
.br-m{display:none}
.sys__h{grid-area:1/1/2/3;margin:0;font:900 clamp(50px,7vw,108px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.014em}
@media (min-width:981px){.sys__h{white-space:nowrap}}
.sys__mk{position:relative;z-index:0;display:inline-block}
.sys__mk::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.1em;top:.14em;bottom:.02em;background:var(--lime);transform:skewX(-2deg) rotate(-.7deg)}
.sys__mk--2::before{left:-.05em;right:-.14em;top:.12em;transform:skewX(-2deg) rotate(.5deg)}
.sys__intro{grid-area:1/2/2/3;align-self:end;padding-bottom:clamp(20px,2.8vw,44px)}
.sys__lead{margin:0;font-size:clamp(14px,1.16vw,18px);line-height:1.5}
.sys__kicker{margin:clamp(14px,1.6vw,26px) 0 0;padding-top:clamp(12px,1.3vw,20px);border-top:1.5px solid var(--ink);font:700 clamp(10px,.8vw,12.5px)/1.55 var(--text);letter-spacing:.24em;text-transform:uppercase}
.sys__photo{grid-area:1/3/2/4;justify-self:end;width:100%;height:auto;margin-top:clamp(-44px,-3vw,-14px)}

/* ---------- три этапа ---------- */
.sys__steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(28px,3.4vw,56px) 0 0;padding:0}
.stage{position:relative;padding:0 clamp(14px,1.7vw,28px)}
.stage:first-child{padding-left:0}
.stage:last-child{padding-right:0}
.stage + .stage{border-left:1.5px solid var(--ink)}
.stage__top{position:relative;display:flex;align-items:center;gap:clamp(10px,1.1vw,18px);min-height:clamp(70px,6.6vw,110px)}
.stage__n{font:900 clamp(64px,6.6vw,108px)/.8 var(--display);letter-spacing:-.02em;font-variant-numeric:lining-nums}
/* наклонные таблички: черная, белая с тенью, синяя на черной подложке */
.stage__tag{position:relative;z-index:1;display:inline-block;padding:.16em .4em .12em;font:900 clamp(26px,2.9vw,48px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.stage__tag--ink{background:var(--ink);color:var(--lime);rotate:-3.5deg}
.stage__tag--sheet{background:var(--sheet);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);rotate:2.6deg}
.stage__tag--blue{background:var(--blue);color:var(--lime);box-shadow:7px 7px 0 var(--ink);rotate:-2.4deg}
.stage__art{position:absolute;z-index:0;height:auto;pointer-events:none}
/* картинки стоят в свободном поле справа от заголовка этапа, верхом под своей табличкой */
.stage__art--lens{right:-1%;top:132%;width:clamp(100px,9.4vw,152px);rotate:6deg}
.stage__art--laptop{right:-7%;top:112%;width:clamp(138px,12.4vw,202px)}
.stage__art--horn{right:-4%;top:118%;width:clamp(122px,11.8vw,192px)}
.stage__ticks{position:absolute;z-index:1;left:calc(50% + clamp(60px,6.6vw,110px));top:-14%;width:clamp(24px,2.4vw,38px);height:auto;stroke:var(--blue);stroke-width:4.5;stroke-linecap:round;fill:none;rotate:12deg}
.stage__h{margin:clamp(14px,1.6vw,26px) 0 0;font:900 clamp(34px,3.1vw,50px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.006em}
.stage__txt{margin:clamp(10px,1vw,16px) 0 0;max-width:min(40ch,62%);font-size:clamp(14px,1.06vw,17px);line-height:1.5}
.stage__list{list-style:none;margin:clamp(16px,1.9vw,30px) 0 0;padding:0;border-bottom:1.5px solid var(--ink)}
.stage__list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,1.2vw,20px);padding:clamp(11px,1.1vw,17px) 0;border-top:1.5px solid var(--ink)}
.stage__list li::before{content:"";grid-row:1/3;width:clamp(14px,1.05vw,17px);aspect-ratio:1;margin-top:.2em;background:var(--lime);border:2px solid var(--ink)}
.stage__list b{grid-column:2;display:block;font:800 clamp(17px,1.3vw,21px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em}
.stage__list span{grid-column:2;display:block;margin-top:5px;font-size:clamp(12.5px,.94vw,14.5px);line-height:1.4;color:var(--muted)}

/* ---------- телефон и планшет: заголовок в четыре строки, фото справа, этапы столбиком ---------- */
@media (max-width:980px){
  .sys{padding-top:22px}
  .br-m{display:inline}
  /* фото крупное, верхом вровень с заголовком, левым краем заходит под плашку «пациентов.»; лид и подпись — под ними */
  .sys__head{grid-template-columns:minmax(0,52fr) minmax(0,48fr);grid-template-areas:"h photo" "intro photo";column-gap:clamp(8px,2.4vw,20px)}
  .sys__h{grid-area:h;position:relative;z-index:1;white-space:nowrap;font-size:clamp(34px,10.5vw,86px)}
  .sys__intro{grid-area:intro;position:relative;z-index:1;align-self:start;padding:0;margin-top:clamp(12px,3.4vw,26px);max-width:88%}
  .sys__lead{font-size:clamp(12.5px,3.3vw,17px);line-height:1.45}
  .sys__kicker{margin-top:clamp(12px,3.4vw,24px);padding-top:clamp(10px,2.6vw,18px);font-size:clamp(9.5px,2.6vw,12px);letter-spacing:.2em}
  .sys__photo{grid-area:photo;z-index:0;align-self:center;justify-self:end;width:min(calc(63px + 51vw),531px);max-width:none;margin:0 clamp(-16px,-4vw,-8px) 0 0}

  .sys__steps{grid-template-columns:1fr;row-gap:clamp(30px,8vw,56px);margin-top:clamp(28px,7vw,52px)}
  .stage,.stage:first-child,.stage:last-child{padding:0}
  .stage + .stage{border-left:0}
  .stage__top{min-height:0;gap:clamp(8px,2.4vw,16px)}
  .stage__n{font-size:clamp(56px,17vw,96px)}
  .stage__tag{font-size:clamp(22px,7vw,44px)}
  .stage__art--lens{right:-1%;top:-8%;width:clamp(112px,calc(63px + 22vw),258px)}
  .stage__art--laptop{right:4%;top:8%;width:clamp(134px,calc(88px + 29.5vw),268px)}
  .stage__art--horn{right:5%;top:-4%;width:clamp(140px,calc(92px + 17vw),290px)}
  /* на телефоне синюю стрелку несет сама картинка ноутбука */
  .stage__ticks{display:none}
  /* как в макете: текст этапа стоит чуть правее номера */
  .stage__h,.stage__txt,.stage__list{margin-left:clamp(16px,4.6vw,40px)}
  .stage__h{margin-top:clamp(12px,3.6vw,24px);font-size:clamp(30px,8.6vw,56px)}
  .stage__txt{max-width:min(40ch,64%);font-size:clamp(12.5px,3.4vw,17px)}
  .stage__list{margin-top:clamp(14px,4vw,26px)}
  .stage__list li{padding:clamp(10px,2.8vw,16px) 0}
  .stage__list b{font-size:clamp(16px,4.6vw,22px)}
  .stage__list span{font-size:clamp(12px,3.2vw,14.5px)}
}

@media (max-width:520px){
  /* на узком телефоне заголовок этапа занимает почти всю строку — картинки поднимаются к своей табличке */
  .stage__art--laptop{top:-4%;right:0}
  .stage__art--horn{top:-24%;right:0;width:clamp(116px,40vw,166px)}
}

/* ---------- первый экран с коллажем вместо карточки статистики (по присланному референсу) ---------- */
/* коллажу разрешено выйти за колонку в поле страницы, горизонтальную прокрутку держит body */
.hero--art{align-items:start;overflow:visible}
.hero--art .hero__stage{display:block;margin-right:0;pointer-events:none;clip-path:none}

/* коллаж прижат к правому краю, низом встает вровень с кнопками */
.hero--art .hero__art{position:absolute;z-index:1;right:calc(-1 * (min(160px, max(0px, (100vw - 1536px) / 2)) + var(--g)));bottom:clamp(40px,7vh,72px);width:min(47vw,764px);max-width:none;height:auto}

/* рукописная сноска — левее коллажа, на уровне двух нижних строк заголовка */

@media (max-width:1180px){
  .hero--art .hero__art{width:min(47vw,600px)}
}

/* ---------- телефон и планшет — по референсу: коллаж в правой половине от самого верха до подзаголовка,
 * уходит за правый край; заголовок в четыре строки и подзаголовок — в левой колонке, лид и кнопки под ними ---------- */
@media (max-width:980px){
  .hero--art{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "body";grid-template-rows:auto auto;overflow:visible}
  .hero--art .hero__head{padding-top:clamp(14px,3.6vw,30px);padding-right:0;min-height:0}
  .hero--art .hero__head .tag{margin-bottom:clamp(10px,3vw,20px)}
  .hero--art .hero__title{font-size:clamp(36px,10.6vw,96px);line-height:.93}
  .hero--art .hl{white-space:normal}
  .hero--art .hl--1{display:block;max-width:5.2em}
  .hero--art .hero__body{padding-top:clamp(16px,4.4vw,30px);padding-bottom:0;max-width:none;position:relative;z-index:3}
  /* подзаголовок и лид — в левой колонке, как в референсе: справа от них еще идет коллаж */
  .hero--art .hero__lede{padding-right:40%;font-size:clamp(16px,1.42vw,22px)}
  .hero--art .hero__lede b{font-size:clamp(21px,5.8vw,30px)}
  .hero--art .hero__acts{flex-direction:column;align-items:stretch;row-gap:clamp(20px,5vw,30px);margin-top:clamp(26px,6vw,40px)}
  .hero--art .hero__acts .quizbtn,.hero--art .hero__acts .btn{width:100%}

  /* коллаж: абсолютный слой, крупнее видимой половины — правым краем уходит за экран, как в референсе */
  /* общий .hero__stage режется clip-path по своей высоте — здесь он нулевой, коллажу это мешает */
  .hero--art .hero__stage{position:absolute;inset:0 calc(var(--g) * -1) auto 0;margin:0;padding:0;min-height:0;height:auto;pointer-events:none;overflow:visible;clip-path:none}
  .hero--art .hero__stage::after{display:none}
  .hero--art .hero__art{position:absolute;right:calc(-1 * min(33vw, 160px));bottom:auto;top:clamp(-8px,-1.4vw,0px);width:min(82vw,440px);max-width:none;margin:0}
}

/* ---------- «К нам приходят, когда…» по присланному референсу: на десктопе секция во всю ширину,
 * контент в колонке 17,5–83,5 %, справа телефон и снимок с выходом за край; на телефоне —
 * базовая верстка плюс синий штрих под «когда…» ---------- */
@media (min-width:981px){
  .pains--ref{position:relative;overflow:visible;padding:3vw 0 calc(var(--sec) * .8);max-width:none}
  .pains--ref > .wrap{padding-inline:var(--g)}
  .pains--ref .pains__in{width:66vw;margin-left:17.5vw}

  /* шапка: заголовок в две строки, лид справа, низом вровень */
  .pains--ref .pains__head{grid-template-columns:37.5vw minmax(0,1fr);gap:0 .8vw;align-items:end;margin-bottom:2.5vw}
  .pains--ref .h2{position:relative;font-size:7.3vw;line-height:.82;letter-spacing:-.012em;white-space:nowrap}
  .pains--ref .lead{font-size:1vw;line-height:1.5;max-width:26vw;padding-bottom:.4vw}
  /* синий штрих под «когда…» */
  .pains__stroke{position:absolute;z-index:-1;left:29%;bottom:-1.1vw;width:16vw;height:auto;pointer-events:none}

  /* список: тонкие линейки, чекбокс — заголовок — что делаем */
  .pains--ref .pains__list{border-bottom:1px solid var(--ink)}
  .pains--ref .pain{grid-template-columns:2.5vw 27.5vw minmax(0,1fr);column-gap:2.5vw;padding:1.7vw 0 1.6vw;border-top:1px solid var(--ink)}
  .pains--ref .pain__box{width:2.5vw;height:2.5vw;border-width:.15vw;margin-top:.35vw}
  .pains--ref .pain__box .icon{font-size:1.5vw}
  .pains--ref .pain__title{font-size:2.35vw;line-height:.9}
  .pains--ref .pain__fix{margin-left:2.75vw;padding-top:.35vw}
  .pains--ref .pain__fix b{font-size:1.1vw;margin-bottom:.5vw}
  .pains--ref .pain__fix p{font-size:.85vw;line-height:1.5}

  /* низ: вопрос слева, кнопка справа */
  .pains--ref .pains__foot{position:relative;padding-top:2vw;gap:1vw 2vw}
  .pains--ref .pains__foot p{font-size:1vw;max-width:33vw}
  .pains--ref .pains__foot .btn{min-height:3vw;padding-inline:1.6vw;font-size:.9vw}


  /* картинки по референсу: телефон и снимок справа за краем */
  .pains__deco{position:absolute;height:auto;pointer-events:none}
  .pains__deco--phone{left:82.5vw;top:-3vw;width:20vw;z-index:2}
  .pains__deco--xray{left:91vw;top:22vw;width:9.5vw;z-index:1}
}

/* ---------- телефон и планшет: блок остается в базовой мобильной верстке, из нового — только синий штрих под «когда…» ---------- */
@media (max-width:980px){
  .pains__deco{display:none}
  .pains--ref .h2{position:relative}
  .pains__stroke{position:absolute;z-index:-1;left:1.43em;bottom:-.15em;width:2.1em;height:auto;pointer-events:none}
}

/* ---------- «Проверенная стратегия»: коллаж в правом верхнем углу, по присланному макету (десктоп) ---------- */
.strategy .wrap{position:relative}
.strategy__art{display:none}
/* телефон: коллаж уходит в фон за заголовок, в правый верхний угол, приглушенный */
@media (max-width:980px){
  .strategy .shead{position:relative}
  .strategy .shead > *{position:relative;z-index:1}
  .strategy__art{display:block;position:absolute;z-index:0;right:-6vw;top:-10vw;width:66vw;height:auto;opacity:.38;pointer-events:none}
}
@media (min-width:981px){
  /* текст-резюме стоит вплотную к заголовку, как в макете, и не уходит под коллаж */
  .strategy .shead{grid-template-columns:minmax(0,41.3%) minmax(0,33.5%);column-gap:0}
  /* коллаж выходит за контейнер вправо, как в макете; на узком десктопе край режется вьюпортом */
  .strategy__art{display:block;position:absolute;z-index:1;right:-2.1%;top:calc(var(--sec) * -.2);width:31.25%;height:auto;pointer-events:none}
}

/* ---------- «Команда» по присланному референсу (десктоп): бумажная секция во всю ширину, заголовок
 * в три строки с лаймом на черной плашке, два счетчика-стикера, ряд сотрудников на лаймовой рваной
 * подложке со срезом снизу, карточка со скотчем. Разметка и скрипты карусели те же; на телефоне —
 * прежняя лаймовая верстка с колодой карточек ---------- */
.sd-team-carousel__tape{display:none}

@media (min-width:981px){
  .team--ref{--wide:var(--display);position:relative;isolation:isolate;height:56.5vw;padding:0;background:var(--paper);color:var(--ink);overflow:hidden}
  /* едва заметная печатная фактура */
  .team--ref::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
  .team--ref .wrap{position:static;max-width:none;padding:0}


  /* заголовок: три строки, плашка только на последней */
  .team--ref .team__head{display:block;margin:0}
  .team--ref .h2{position:absolute;left:3.75vw;top:5.1vw;margin:0;font:900 8.1vw/.92 var(--wide);letter-spacing:.012em;text-transform:uppercase;text-wrap:initial;white-space:nowrap}
  /* последняя строка — лайм на черной плашке во всю ширину заголовка, как в макете */
  .team--ref .h2 .ink-plate{display:block;margin-top:.06em;padding:.02em .2em .04em .24em}
  /* печатная фактура на буквах и плашке */
  .team--ref .h2::after{content:"";position:absolute;inset:-.1em -.2em;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

  /* лид и счетчики справа */
  .team--ref .team__side{position:absolute;left:60.4vw;top:7.2vw;width:31.2vw;display:block}
  .team--ref .lead{margin:0;max-width:none;font-size:1.3vw;line-height:1.5}
  .team--ref .sd-team__stats{position:absolute;left:0;top:8.3vw;display:flex;gap:1.25vw;margin:0;border:0}
  .team--ref .sd-team__stats > div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:15.75vw;height:12.25vw;margin:0;padding:1.1vw 1.3vw 1.1vw;border:0;background:var(--lime);rotate:-1deg}
  .team--ref .sd-team__stats > div + div{width:14.25vw;padding-left:1.4vw;border:.12vw solid var(--ink);background:var(--sheet);rotate:1deg}
  .team--ref .sd-team__stats dt{font:900 9.4vw/.78 var(--wide);letter-spacing:-.01em}
  .team--ref .sd-team__stats dd{margin-top:.8vw;padding-top:.55vw;border-top:.1vw solid var(--ink);font:800 1.05vw/1.2 var(--text);letter-spacing:.02em;text-transform:uppercase}

  /* сцена: лаймовая подложка с зубцами над головами, ряд сотрудников; вся группа срезана снизу косой линией, как в макете */
  .team--ref .sd-team-carousel{position:absolute;left:0;right:0;top:29vw;height:23.5vw;display:block;margin:0}
  .team--ref .sd-team-carousel__people{position:absolute;left:0;top:0;width:70vw;height:23.5vw;margin:0;overflow:visible;clip-path:polygon(-2vw -6vw,102% -6vw,100% 91%,0 78%)}
  .team--ref .sd-team-carousel__people::before{content:"";position:absolute;z-index:0;left:1.4%;top:.5vw;width:98.6%;height:23vw;background:var(--lime);clip-path:polygon(0 24%,7% 13%,14.6% 0,22% 13%,30% 0,38% 13%,45.6% 0,53% 13%,61% 0,69% 13%,76.6% 0,84% 13%,92% 0,100% 11%,100% 100%,0 100%)}
  .team--ref .sd-team-carousel__people::after{display:none}
  .team--ref .sd-team-carousel__person{top:auto;bottom:0;left:calc(10.25vw + var(--i) * 10.85vw);width:13vw;height:23.5vw;translate:-50% 0;transform:none;z-index:calc(6 - var(--i));filter:grayscale(1) contrast(1.05) drop-shadow(.16vw 0 0 #fff) drop-shadow(-.16vw 0 0 #fff) drop-shadow(0 .16vw 0 #fff) drop-shadow(0 -.16vw 0 #fff);transition:filter .3s ease}
  .team--ref .sd-team-carousel__person:nth-child(4),.team--ref .sd-team-carousel__person:nth-child(5){z-index:4}
  .team--ref .sd-team-carousel__person::before,.team--ref .sd-team-carousel__person::after{display:none}
  /* портреты одного роста: головы у верха подложки, низ уходит под срез */
  .team--ref .sd-team-carousel__person img{height:21vw;max-height:none;bottom:.6vw;translate:-50% 0}
  @media (hover:hover){.team--ref .sd-team-carousel__person:hover{filter:grayscale(0) contrast(1.02) drop-shadow(.16vw 0 0 #fff) drop-shadow(-.16vw 0 0 #fff) drop-shadow(0 .16vw 0 #fff) drop-shadow(0 -.16vw 0 #fff)}}
  .team--ref .sd-team-carousel__person[aria-pressed="true"]{z-index:10;transform:none;filter:grayscale(0) contrast(1.02) drop-shadow(.16vw 0 0 #fff) drop-shadow(-.16vw 0 0 #fff) drop-shadow(0 .16vw 0 #fff) drop-shadow(0 -.16vw 0 #fff)}

  .team--ref .sd-team-carousel__slides{position:absolute;left:70vw;top:3vw;width:28vw;min-height:18vw;margin:0;padding:2.2vw 1.9vw 2vw;z-index:12;rotate:-1.5deg}
  .team--ref .sd-team-carousel__slides::before{transform:none;border-width:.12vw;box-shadow:.55vw .55vw 0 var(--ink)}
  /* скотч — присланная картинка поверх верхнего края карточки */
  .team--ref .sd-team-carousel__tape{display:block;position:absolute;z-index:2;left:4.2vw;top:-1.3vw;width:7.2vw;height:auto;pointer-events:none}
  .team--ref .sd-team-slide__role{padding:.5vw .8vw .45vw;border-width:.1vw;font-size:.85vw;letter-spacing:.06em;transform:none}
  /* имя в одну строку: при 3.15vw самое длинное («Максим Раззоренов») влезает в поля карточки (28vw − 2×1.9vw);
     высота строки 3.15vw — та же, что была при 3.5vw/.9, поэтому остальное в карточке не сдвигается */
  .team--ref .sd-team-slide h3{margin-top:1.4vw;font:900 3.15vw/1 var(--wide);letter-spacing:0;text-wrap:initial;white-space:nowrap}
  .team--ref .sd-team-slide__focus{margin-top:1.3vw;padding-top:1vw;border-top-width:.1vw;font:800 1.55vw/1 var(--wide)}
  .team--ref .sd-team-slide__description{margin-top:.7vw;font-size:1vw;line-height:1.5;max-width:none}
}

/* ===== SEO-правки страницы 22.09.2026 (согласованы владельцем): блок цен, FAQ, «Читать кейс» ссылкой на страницу кейса ===== */
/* ---------- «Сколько стоит маркетинг стоматологии»: компонент .svc с VK и Директа, третья колонка — цена ---------- */
.svc-stom .svc{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr)}
.svc-stom .svc__works a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.svc-stom .svc__works a:hover{color:var(--lime)}
.svc__cost{margin:0;justify-self:end;text-align:right}
.svc__cost b{display:block;font:900 clamp(40px,4vw,64px)/.9 var(--display);color:var(--lime);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc__cost span{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:var(--on-ink-soft)}
.svc-stom__act{display:flex;align-items:center;gap:28px;margin-top:clamp(36px,4vw,56px)}
.svc-stom__act p{margin:0;max-width:52ch;font-size:15px;line-height:1.5;color:var(--on-ink-soft)}
@media (max-width:980px){
  .svc-stom .svc{grid-template-columns:minmax(0,1fr)}
  .svc__cost{justify-self:start;text-align:left;margin-top:6px}
  .svc-stom__act{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ---------- FAQ: компонент .faq с главной, здесь на бумаге перед предложением ---------- */
.faq details p a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.faq__side p a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
/* у .offer свой верхний отступ под лаймовую «Команду»; после FAQ на бумаге он лишний */
.faq + .offer{margin-top:0}

/* ---------- «Читать кейс» в карточке кейса: теперь ссылка на страницу кейса (/cases/…), а не кнопка всплывающего окна.
   Правила .sd-case-card > button из stom-poster.css продублированы для ссылки; при публикации — дописать селектор туда ---------- */
.sd-case-card > a.sd-case-card__read{grid-column:9/13;grid-row:3;justify-self:start;align-self:start;--face:var(--lime);--fg:var(--ink);--edge:transparent;--off:4px;--pl:var(--paper);--r:-1.5deg;position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;margin-top:22px;padding:12px 22px 12px 24px;border:0;border-radius:0;background:var(--face);color:var(--fg);font:700 17px/1.1 var(--text);text-decoration:none;cursor:pointer;box-shadow:var(--off) var(--off) 0 var(--pl);transform:rotate(var(--r));transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sd-case-card > a.sd-case-card__read::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
@media (hover:hover){
  .sd-case-card > a.sd-case-card__read:hover{transform:translate(-2px,-2px) rotate(0deg);box-shadow:6px 6px 0 var(--pl)}
  .sd-case-card > a.sd-case-card__read:hover::after{transform:translateX(3px)}
}
.sd-case-card > a.sd-case-card__read:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--pl);transition-duration:.08s}
.sd-case-card > a.sd-case-card__read:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media (max-width:980px){
  .sd-case-card > a.sd-case-card__read{justify-self:stretch;justify-content:center;width:calc(100% - 4px);margin-top:26px;--r:-.8deg}
}
@media (prefers-reduced-motion:reduce){
  .sd-case-card > a.sd-case-card__read{--r:0deg!important;transition:none!important}
}

/* Метка «новый кейс» в шапке карточки кейса (28.09.2026). Лайм тут занят плашкой «Активно»,
   поэтому билет синий с лаймовой датой, контур и тень — бумагой, как у кнопок в темной секции. */
.sd-case-card__top .ncase{--nc-face:var(--blue);--nc-fg:#fff;--nc-alt:var(--lime);--nc-alt-fg:var(--ink);--nc-line:var(--paper);--nc-sh:var(--paper);--nc-r:-2.5deg;
  display:inline-flex;align-items:stretch;flex:none;max-width:100%;margin-left:4px;border:2px solid var(--nc-line);box-shadow:4px 4px 0 var(--nc-sh);
  rotate:var(--nc-r);font-style:normal;white-space:nowrap;text-transform:none;letter-spacing:normal}
.sd-case-card__top .ncase b{padding:5px 9px 6px;background:var(--nc-face);color:var(--nc-fg);font:900 15px/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.sd-case-card__top .ncase time{display:flex;align-items:center;padding:0 9px 1px;background:var(--nc-alt);color:var(--nc-alt-fg);font:700 11px/1 var(--text);letter-spacing:.07em}
@media (max-width:720px){
  .sd-case-card__top > div{row-gap:8px}
  .sd-case-card__top .ncase{margin-left:0}
  .sd-case-card__top .ncase b{font-size:13px;padding:4px 8px 5px}
  .sd-case-card__top .ncase time{font-size:10px;padding-inline:8px}
}