/* Первый экран: на телефоне фото Илоны во весь экран, на десктопе арка с фото у вывески */
.hero { position: relative; isolation: isolate; display: grid; gap: 14px; align-content: end; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-block: var(--sp-3) calc(var(--sticky-h) + var(--sp-3)); color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 26, .15) 0%, rgba(20, 22, 26, 0) 32%, rgba(20, 22, 26, .4) 48%, rgba(20, 22, 26, .78) 60%, rgba(20, 22, 26, .92) 100%); }
.hero__play { position: absolute; top: 16px; right: var(--gutter); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(25, 27, 30, .6); color: #fff; font-size: 12px; letter-spacing: .04em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero__play::before { content: "▶"; font-size: 10px; }
.hero__text { display: grid; gap: 12px; }
.hero .hero__pill, .hero .stats, .hero .hero__media { display: none; }
.hero h1 { font-size: 36px; line-height: 1.02; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.hero__em { font-style: italic; color: var(--c-neon); }
.hero__lead { color: rgba(255, 255, 255, .9); font-size: var(--fs-body); max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__cta .btn--dark { background: #fff; color: var(--c-ink); }
.hero__cta .btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }

/* Плашка факта, цифры, подпись под портретом */
.pill { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 14px 8px 10px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; font-size: var(--fs-small); color: var(--c-muted); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 3px rgba(30, 111, 168, .15); }
.pill b { color: var(--c-ink); font-weight: 500; }
.stats { list-style: none; margin: 8px 0 0; padding: 0; grid-template-columns: repeat(3, minmax(0, auto)); gap: 0 32px; }
.stats li { padding-left: 18px; border-left: 1px solid var(--c-line); }
.stats__n { display: block; font-family: var(--f-display); font-size: 44px; line-height: 1; letter-spacing: -.01em; }
.stats__n i { font-style: normal; color: var(--c-accent); }
.stats__l { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--c-muted); max-width: 16ch; }
.hero__name { position: absolute; left: 50%; bottom: -18px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-ink); font-size: var(--fs-small); white-space: nowrap; box-shadow: var(--shadow-float); }
.hero__name::before { content: "▶"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: 9px; }
.hero__name b { font-weight: 500; }
.hero__name span { color: var(--c-muted); }
.hero__name:hover { border-color: var(--c-ink); }

@media (min-width: 768px) {
  .hero { min-height: 0; align-content: start; padding-block: var(--sp-4) var(--sp-6); gap: var(--sp-5); color: var(--c-ink); }
  .hero__bg, .hero__play { display: none; }
  .hero .hero__pill { display: inline-flex; }
  .hero .stats { display: grid; }
  .hero__text { gap: 20px; }
  .hero h1 { font-size: 48px; text-shadow: none; max-width: 18ch; }
  .hero__em { color: var(--c-accent); }
  .hero__lead { color: var(--c-muted); font-size: 17px; }
  .hero__cta .btn--dark { background: var(--c-ink); color: #fff; }
  .hero__cta .btn--ghost { border-color: var(--c-line); color: var(--c-ink); }
  .hero .hero__media { display: block; position: relative; justify-self: center; }
  .hero__arch { position: relative; width: 400px; height: 520px; }
  .hero__arch::after { content: ""; position: absolute; inset: -14px; border-radius: 214px 214px 34px 34px; border: 1px solid var(--c-neon); opacity: .7; pointer-events: none; }
  .hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 200px 200px 24px 24px; }
}
@media (min-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 96px; align-items: center; padding-block: var(--sp-5) var(--sp-6); min-height: min(calc(100vh - 76px), 820px); }
  .hero__text { gap: 22px; }
  .hero h1 { font-size: 60px; max-width: 16ch; }
  .hero__media { justify-self: center; }
  .hero__arch { width: 460px; height: 600px; }
  .hero__arch::after { border-radius: 244px 244px 34px 34px; }
  .hero__arch img { border-radius: 230px 230px 24px 24px; }
  .stats { gap: 0 40px; }
}

/* Первый экран A */
.hero-a { position: relative; height: 560px; color: #fff; isolation: isolate; }
.hero-a picture img, .hero-a video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -2; }
.hero-a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 22, 26, .45) 0%, rgba(20, 22, 26, 0) 55%), linear-gradient(180deg, rgba(20, 22, 26, .30) 0%, rgba(20, 22, 26, .55) 45%, rgba(20, 22, 26, .85) 100%); }
.hero-a__in { position: absolute; left: 0; right: 0; bottom: 28px; display: grid; gap: 14px; }
.hero-a p { color: #fff; max-width: 48ch; }
.hero-a h1, .hero-a p { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
@media (min-width: 768px) { .hero-a { height: 640px; } }
@media (min-width: 1200px) { .hero-a { height: 720px; } .hero-a__in { bottom: 64px; } .hero-a h1 { max-width: 14ch; } }

/* Блок динамики: варианты «Ползунок» и «Лента» (переключатель только для прототипа) */
.tag { position: absolute; left: 8px; bottom: 8px; background: rgba(25, 27, 30, .78); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); color: var(--c-muted); }
.meta span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); margin-right: 8px; vertical-align: 2px; }
.note { font-size: 12px; color: var(--c-muted); border-left: 2px solid var(--c-line); padding-left: 12px; max-width: 52ch; margin-top: var(--sp-2); }
.cmpwrap { display: grid; gap: var(--sp-3); }
.cmp { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: #e7e5df; touch-action: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp__before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.cmp__knob { position: absolute; top: 50%; left: var(--x); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-float); display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--c-ink); pointer-events: none; }
.cmp__l { position: absolute; top: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(25, 27, 30, .78); color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cmp__l--a { left: 12px; } .cmp__l--b { right: 12px; }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.cmp__hint { font-size: 12px; color: var(--c-muted); text-align: center; margin-top: 10px; }
.clist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
.clist button { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 0; border: 0; border-bottom: 1px solid var(--c-line); background: none; font: inherit; color: var(--c-ink); cursor: pointer; }
.clist img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
.clist b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 20px; line-height: 1.1; }
.clist small { font-size: 12px; color: var(--c-muted); }
.clist button[aria-pressed="true"] b { color: var(--c-accent); }
.clist button[aria-pressed="true"] img { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 6px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.tile { flex: 0 0 84%; scroll-snap-align: start; display: grid; gap: 12px; grid-template-rows: auto auto 1fr; }
.tile .meta { align-self: end; }
.tile h3 { font-size: 20px; line-height: 1.1; }
.fuse { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; position: relative; background: #e7e5df; }
.fuse figure { margin: 0; position: relative; }
.fuse img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.fuse::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--c-accent); transform: translateX(-1px); }
.strip__foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-muted); }
@media (min-width: 768px) { .cmpwrap { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); align-items: start; } .tile { flex-basis: 46%; } }
@media (min-width: 1200px) { .cmpwrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--sp-7); } .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; overflow: visible; margin-inline: 0; padding-inline: 0; } .tile { flex-basis: auto; } }

/* Блок безопасности: варианты «Путь инструмента», «Три фото», «Вопрос-ответ» (переключатель только для прототипа) */
.doc { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; font-size: var(--fs-small); color: var(--c-muted); width: fit-content; max-width: 100%; }
.doc::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px rgba(30, 111, 168, .14); flex: none; }
.doc b { color: var(--c-ink); font-weight: 500; }
.doc a, .qa .a a { display: inline-block; padding: 3px 0; margin-left: 4px; white-space: nowrap; }
.s1 { display: grid; gap: var(--sp-4); }
.s1__ph { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: #e7e5df; }
.s1__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s1__ph figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); font-size: 12px; color: var(--c-ink); }
.s1__eyebrow { margin-bottom: 12px; }
.chain { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; }
.chain li { counter-increment: c; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--c-line); align-items: baseline; }
.chain li::before { content: counter(c, decimal-leading-zero); font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--c-accent); }
.chain li:last-child { border-bottom: 1px solid var(--c-line); }
.chain b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.1; }
.chain span { display: block; font-size: var(--fs-small); color: var(--c-muted); margin-top: 4px; max-width: 44ch; }
.s1__more { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.s1__more .fact { padding: 0; }
.s1__more .fact h3 { font-size: 18px; }
.s1__doc { margin-top: var(--sp-3); }
.s2 { display: grid; gap: var(--sp-3); }
.s2__doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 22px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-bg-alt); }
.s2__doc b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.1; display: block; }
.s2__doc span { font-size: var(--fs-small); color: var(--c-muted); }
.s2__doc .btn { background: #fff; }
.pcards { display: grid; gap: var(--sp-2); }
.pcard { display: grid; gap: 12px; }
.pcard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); display: block; background: #e7e5df; }
.pcard h3 { font-size: 22px; line-height: 1.1; }
.pcard p { font-size: var(--fs-small); color: var(--c-muted); margin-top: 4px; max-width: 36ch; }
.s3 { display: grid; gap: var(--sp-4); }
.qa { list-style: none; margin: 0; padding: 0; display: grid; }
.qa li { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--c-line); }
.qa li:last-child { border-bottom: 1px solid var(--c-line); }
.qa .q { font-family: var(--f-display); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--c-ink); }
.qa .a { font-size: 15px; color: var(--c-muted); max-width: 48ch; }
.qa .a b { color: var(--c-ink); font-weight: 500; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; background: #e7e5df; }
.mosaic .m1 { grid-row: span 2; aspect-ratio: 3 / 4; }
.mosaic .m2, .mosaic .m3 { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  .s1 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .s1__more { grid-template-columns: 1fr 1fr; }
  .pcards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .s3 { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); align-items: start; }
}
@media (min-width: 1200px) {
  .s1 { column-gap: var(--sp-7); }
  .s1__ph { position: sticky; top: 96px; }
  .pcard img { aspect-ratio: 1; }
  .s2__doc { padding: 22px 28px; }
  .s3 { column-gap: var(--sp-7); }
  .qa .q { font-size: 30px; }
}

/* Блок команды: варианты «Выбор» и «Слайдер» (переключатель только для прототипа) */
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li { font-size: 12px; color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 4px 10px; background: #fff; }
.quote { font-family: var(--f-display); font-style: italic; font-size: 18px; line-height: 1.3; color: var(--c-muted); }
.pick { display: grid; gap: var(--sp-3); }
.pick__ph { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: #e7e5df; }
.pick__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.pick__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pick__cap b { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.05; }
.pick__cap span { font-size: 12px; color: var(--c-muted); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
.plist button { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 14px 0; border: 0; border-bottom: 1px solid var(--c-line); background: none; font: inherit; color: var(--c-ink); cursor: pointer; }
.plist img { width: 52px; height: 52px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; display: block; }
.plist b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.05; }
.plist small { display: block; font-size: 12px; color: var(--c-muted); margin-top: 3px; }
.plist button[aria-pressed="true"] b { color: var(--c-accent); }
.plist button[aria-pressed="true"] img { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pick__more { display: grid; gap: 12px; margin-top: var(--sp-2); justify-items: start; }
.tslider__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.tslider__nav { display: flex; gap: 8px; }
.tslider__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font-size: 18px; cursor: pointer; transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.tslider__btn:hover { border-color: var(--c-ink); }
.tslider__btn[disabled] { opacity: .35; cursor: default; }
.tslider { margin-inline: calc(-1 * var(--gutter)); }
.tslider__track { list-style: none; margin: 0; padding: 0 var(--gutter) 6px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.tslider__track::-webkit-scrollbar { display: none; }
.tcard { flex: 0 0 86%; scroll-snap-align: start; display: grid; gap: 14px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; }
.tcard > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; }
.tcard__t { display: grid; gap: 10px; padding: 0 18px 20px; justify-items: start; align-content: start; }
.tcard h3 { font-size: 24px; line-height: 1.05; }
.tcard .role { font-size: var(--fs-small); color: var(--c-muted); }
.tcard .quote { font-size: 16px; }
@media (min-width: 768px) {
  .pick { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--sp-5); align-items: start; }
  .plist b { font-size: 28px; }
  .tslider__track { gap: 20px; }
  .tcard { flex-basis: 560px; grid-template-columns: 240px 1fr; gap: 0; }
  .tcard > img { height: 100%; aspect-ratio: auto; }
  .tcard__t { padding: 22px 22px 22px 20px; }
}
@media (min-width: 1200px) {
  .pick { column-gap: var(--sp-7); }
  .plist button { padding: 20px 0; grid-template-columns: 64px 1fr; }
  .plist img { width: 64px; height: 64px; }
  .plist b { font-size: 32px; }
  .tcard { flex-basis: 600px; grid-template-columns: 260px 1fr; }
  .tcard h3 { font-size: 28px; }
}

/* Блок цен: расчёт по фото слева, ориентиры по прайсу справа */
.photo { display: grid; gap: var(--sp-4); }
.photo__lead { display: grid; gap: 18px; align-content: start; justify-items: start; }
.photo__lead h3 { font-size: 28px; line-height: 1.08; max-width: 26ch; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps3 li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: baseline; font-size: 15px; color: var(--c-muted); }
.steps3 li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-ink); color: #fff; font-size: 13px; font-weight: 500; align-self: start; }
.steps3 b { color: var(--c-ink); font-weight: 500; }
.photo__eyebrow { margin-bottom: 10px; }
.plist2 { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
.plist2 li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.plist2 a { color: var(--c-ink); display: inline-block; padding: 3px 0; }
.sum { font-family: var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plist2 .sum { font-size: 18px; }
.plist2 .sum--fr { color: var(--c-muted); }
.photo__full { margin-top: 16px; }
@media (min-width: 768px) {
  .photo { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--sp-5); align-items: start; }
  .photo__lead h3 { font-size: 32px; }
}
@media (min-width: 1200px) {
  .photo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--sp-7); }
  .photo__lead h3 { font-size: 36px; max-width: none; }
}

/* Отзывы: виджет Яндекс Карт слева, карточки из YCLIENTS справа */
.rv { display: grid; gap: var(--sp-4); align-items: start; }
.rv__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rv__live, .rv__demo { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.rv__live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2e9e5b; margin-right: 6px; vertical-align: 1px; }
.rv__demo { padding: 2px 8px; border: 1px dashed var(--c-line); border-radius: var(--r-pill); }
.rv__frame { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-line); background: #fff; }
.rv__frame iframe { display: block; width: 100%; height: 520px; border: 0; }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-bg); }
.rc__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rc__stars { color: #f0a500; letter-spacing: 2px; font-size: 14px; }
.rc__date { font-size: 12px; color: var(--c-muted); }
.rc__text { font-size: 15px; line-height: 1.5; }
.rc__who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; }
.rc__who b { font-weight: 500; }
.rc__who span { color: var(--c-muted); }
.rv__note { margin-top: 14px; max-width: 60ch; }
@media (min-width: 768px) {
  .rv { grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); }
  .rv__frame iframe { height: 640px; }
}
@media (min-width: 1200px) {
  .rv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-7); }
  .rlist { gap: 14px; }
  .rc { padding: 22px 24px; }
  .rc__text { font-size: 16px; }
}

/* Об Илоне */
.about-ilona { display: grid; gap: var(--sp-3); }
.about-ilona img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); width: 100%; }
@media (min-width: 768px) { .about-ilona { grid-template-columns: 1fr 2fr; align-items: center; } }

/* Об Илоне: варианты «Фото и текст» и «Цитата» */
.about-ilona__h { margin-top: 8px; }
.about-ilona__p { margin-top: 16px; }
.about-ilona__btn { margin-top: 20px; }
.iq { display: grid; gap: 22px; max-width: 60ch; margin-top: 12px; justify-items: start; }
.iq blockquote { margin: 0; font-family: var(--f-display); font-style: italic; font-size: 30px; line-height: 1.15; text-wrap: balance; }
.iq__who { display: flex; align-items: center; gap: 12px; }
.iq__who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.iq__who b { display: block; font-weight: 500; }
.iq__who span { font-size: 12px; color: var(--c-muted); }
.iq p { color: var(--c-muted); }
/* Курсы: вариант «Для мастеров» */
.km { display: grid; gap: var(--sp-3); padding: 28px 24px; border-radius: var(--r-card); background: var(--c-bg); border: 1px solid var(--c-line); }
.km__h { font-size: 28px; line-height: 1.1; margin-top: 8px; }
.km__p { color: var(--c-muted); max-width: 48ch; margin-top: 10px; }
.km__btn { margin-top: 18px; }
.kn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.kn b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 32px; line-height: 1; }
.kn b i { font-style: normal; color: var(--c-accent); }
.kn span { display: block; font-size: 12px; color: var(--c-muted); margin-top: 4px; }
/* Контакты: варианты «Карта во всю ширину», «Табличка», «Заявка» */
.cm { position: relative; border-radius: var(--r-card); overflow: hidden; background: #e7e5df; }
.cm img { width: 100%; height: auto; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.cm__card { display: grid; gap: 12px; padding: 22px; background: #fff; border-top: 1px solid var(--c-line); }
.cm__card h2 { font-size: 26px; line-height: 1.1; }
.cm__card p { font-size: 15px; }
.cm__card .muted { font-size: var(--fs-small); }
.cm__card a { display: inline-block; padding-block: 4px; }
.cm__cta { margin-top: 6px; }
.ct { display: grid; gap: var(--sp-3); }
.dl { display: grid; border-top: 1px solid var(--c-line); margin: 0; }
.dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.dl dt { color: var(--c-muted); font-size: 13px; padding-top: 2px; }
.dl dd { margin: 0; }
.dl a { display: inline-block; padding-block: 4px; }
.ct__cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.ct__map img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.cf { display: grid; gap: var(--sp-3); }
.form { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-bg-alt); }
.form h3 { font-size: 24px; line-height: 1.1; }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); }
.form input { min-height: 48px; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 12px; font: inherit; color: var(--c-ink); background: #fff; }
.form input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.form .chk { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 12px; color: var(--c-muted); }
.form .chk input { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--c-accent); }
.form__or { font-size: 13px; color: var(--c-muted); }
.form__or a { display: inline-block; padding-block: 4px; }
.cf__side { display: grid; gap: 14px; align-content: start; }
.cf__side img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); }
.cf__side a { display: inline-block; padding-block: 5px; }
@media (min-width: 768px) {
  .km { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); padding: 36px 40px; align-items: center; }
  .kn b { font-size: 36px; }
  .cm img { aspect-ratio: 16 / 8; }
  .cm__card { position: absolute; left: 24px; top: 24px; bottom: 24px; width: 380px; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: var(--shadow-float); align-content: start; }
  .ct { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .dl > div { grid-template-columns: 130px 1fr; }
  .cf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
}
@media (min-width: 1200px) {
  .iq blockquote { font-size: 40px; }
  .iq { max-width: 64ch; }
  .km__h { font-size: 32px; }
  .cm img { aspect-ratio: 16 / 7; }
  .cm__card { left: 32px; top: 32px; bottom: auto; width: 420px; padding: 28px; }
  .ct { column-gap: var(--sp-7); }
  .ct__map img { aspect-ratio: 5 / 4; }
  .cf { column-gap: var(--sp-7); }
  .form { padding: 32px; }
}

/* Контакты */
.contacts { display: grid; gap: var(--sp-3); }
.contacts__map img { border-radius: var(--r-card); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.book__info a { display: inline-block; padding-block: 4px; }
@media (min-width: 768px) { .contacts { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Страница проблемы */
.problem-hero { padding-block: var(--sp-3) var(--sp-4); display: grid; gap: 14px; }
.problem-hero__cta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (min-width: 1200px) { .problem-hero { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--sp-6); padding-block: var(--sp-6); } .problem-hero img { border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } }
.pain { border-left: 2px solid var(--c-accent); padding: 4px 0 4px 16px; margin-top: var(--sp-3); }
.pain p { max-width: 62ch; }
.pending { border: 1px dashed var(--c-line); border-radius: 10px; padding: 14px 16px; font-size: var(--fs-small); color: var(--c-muted); }
.related { display: grid; gap: var(--sp-2); }
.related a { display: block; padding: 16px 18px; border: 1px solid var(--c-line); color: var(--c-ink); font-family: var(--f-display); font-size: 22px; }
.related a:hover { border-color: var(--c-ink); text-decoration: none; }
@media (min-width: 768px) { .related { grid-template-columns: repeat(3, 1fr); } }
.breadcrumbs { font-size: 12px; color: var(--c-muted); padding-top: var(--sp-2); }
.breadcrumbs a { color: var(--c-muted); display: inline-block; padding-block: 4px; }

/* Первый экран страницы проблемы: варианты «Симптомы» и «Вопрос и ответ» (переключатель только для прототипа) */
#phero .proto-switch { margin: var(--sp-2) 0 0; }
.ph1 { display: grid; gap: var(--sp-3); padding-block: var(--sp-3) var(--sp-4); }
.ph1__t { display: grid; gap: 16px; align-content: center; }
.ph1 h1 { font-size: 40px; line-height: 1.02; }
.sym3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sym3 li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; }
.sym3 li::before { content: "\2713"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 12px; margin-top: 1px; }
.sym3__cap { font-size: 12px; color: var(--c-muted); margin-top: 10px; max-width: 52ch; }
.ph1__pic { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: #e7e5df; }
.ph1__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph1__cap { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .92); font-size: 13px; color: var(--c-ink); box-shadow: var(--shadow-float); }
.ph1__cap b { font-weight: 500; }
.ph2 { display: grid; gap: var(--sp-3); padding-block: var(--sp-3) var(--sp-4); }
.ph2__t { display: grid; gap: 18px; align-content: center; justify-items: start; }
.ph2 h1 { font-size: 38px; line-height: 1.04; max-width: 20ch; }
.ph2__lead { color: var(--c-muted); max-width: 52ch; }
.ph2__side { display: grid; gap: 16px; }
.ph2__pic { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; background: #e7e5df; }
.ph2__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.pfacts { list-style: none; margin: 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--c-line); }
.pfacts b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1; }
.pfacts span { display: block; font-size: 12px; color: var(--c-muted); margin-top: 4px; }
.pnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pnav a { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: 13px; color: var(--c-ink); }
.pnav a:hover { border-color: var(--c-ink); text-decoration: none; }
@media (min-width: 768px) {
  .ph1 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--sp-5); align-items: center; }
  .ph2 h1 { font-size: 52px; }
  .pfacts b { font-size: 32px; }
}
@media (min-width: 1200px) {
  .ph1 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-7); padding-block: var(--sp-5) var(--sp-6); }
  .ph1 h1 { font-size: 56px; }
  .ph1__pic { aspect-ratio: 5 / 4; }
  .ph1__cap { left: 16px; bottom: 16px; right: auto; }
  .ph2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-7); padding-block: var(--sp-5) var(--sp-6); align-items: center; }
  .ph2 h1 { font-size: 64px; }
  .ph2__pic { aspect-ratio: 4 / 5; }
  .pnav { grid-column: 1 / -1; }
}

/* Страница проблемы, блок «Что это»: варианты «Причины плитками», «Схема», «Текст с выносом» (переключатель только для прототипа) */
.wc { display: grid; gap: var(--sp-3); }
.wc__lead { max-width: 60ch; }
.causes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.causes li { padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-bg); }
.causes b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.1; }
.causes span { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--c-muted); }
.wc__note { padding: 14px 16px; border-left: 2px solid var(--c-accent); background: var(--c-bg); border-radius: 0 12px 12px 0; max-width: 62ch; }
.wc__note b { font-weight: 500; }
.ws { display: grid; gap: var(--sp-3); align-items: center; }
.ws__t { display: grid; gap: 14px; }
.ws__t .prose { max-width: none; }
.ws__pic { display: grid; place-items: center; padding: 20px; border-radius: var(--r-card); background: var(--c-bg); border: 1px solid var(--c-line); }
.nail { width: 100%; max-width: 320px; height: auto; }
.ws__cap { font-size: 12px; color: var(--c-muted); text-align: center; margin-top: 6px; }
.wt { display: grid; gap: var(--sp-3); }
.wt__t { display: grid; gap: 14px; }
.wt__t .prose { max-width: none; }
.pull { display: grid; gap: 12px; align-content: start; padding-left: 20px; border-left: 2px solid var(--c-accent); }
.pull b { font-family: var(--f-display); font-weight: 500; font-size: 28px; line-height: 1.1; text-wrap: balance; }
.pull span { font-size: var(--fs-small); color: var(--c-muted); }
.tags2 { display: flex; flex-wrap: wrap; gap: 6px; }
.tags2 span { padding: 6px 12px; border: 1px solid var(--c-line); border-radius: var(--r-pill); font-size: 13px; background: var(--c-bg); }
@media (min-width: 768px) {
  .causes { grid-template-columns: repeat(2, 1fr); }
  .ws { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); }
  .wt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); align-items: start; }
}
@media (min-width: 1200px) {
  .causes { grid-template-columns: repeat(4, 1fr); }
  .ws { column-gap: var(--sp-7); }
  .wt { column-gap: var(--sp-7); }
  .pull b { font-size: 32px; }
}

/* Страница проблемы, блок «Как проходит приём»: варианты «Зависит от случая» и «До, на приёме, после» (переключатель только для прототипа) */
.cases { display: grid; gap: 12px; }
.case { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-bg); align-content: start; }
.case h3 { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.1; }
.case p { font-size: var(--fs-small); color: var(--c-muted); }
.case__arrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.case ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--c-line); display: grid; gap: 6px; }
.case li { font-size: 13px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.case li a { color: var(--c-ink); display: inline-block; padding-block: 4px; }
.case li span { color: var(--c-muted); white-space: nowrap; }
.cases__note { font-size: 12px; color: var(--c-muted); max-width: 60ch; margin-top: 14px; }
.dna { display: grid; gap: 14px; }
.dna__col { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--r-card); background: var(--c-bg-alt); }
.dna__col h3 { font-size: 22px; line-height: 1.1; }
.dna__col h3 small { display: block; font-family: var(--f-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 6px; }
.dna__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dna__col li { position: relative; padding-left: 18px; font-size: var(--fs-small); color: var(--c-muted); }
.dna__col li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--c-accent); }
.dna__col li b { color: var(--c-ink); font-weight: 500; }
@media (min-width: 768px) {
  .cases { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .dna { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* Страница проблемы, блок «Сколько визитов»: таблица по случаям, на телефоне строки карточками; .ph – заглушка данных заказчика */
.ph { display: inline-block; padding: 2px 10px; border: 1px dashed var(--c-accent); border-radius: 8px; color: var(--c-accent); font-family: var(--f-body); font-size: 13px; font-style: normal; font-weight: 400; vertical-align: middle; }
.vt { width: 100%; border-collapse: collapse; font-size: 14px; }
.vt thead { display: none; }
.vt tbody, .vt tr, .vt td { display: block; }
.vt tr { padding: 14px 0; border-top: 1px solid var(--c-line); display: grid; gap: 8px; }
.vt tr:first-child { border-top-color: var(--c-ink); }
.vt td:first-child { font-family: var(--f-display); font-size: 22px; line-height: 1.1; }
.vt td .d { display: block; font-family: var(--f-body); font-size: 12px; color: var(--c-muted); margin-top: 4px; }
.vt td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vt td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--c-muted); }
.vt__note { font-size: 12px; color: var(--c-muted); margin-top: 12px; max-width: 60ch; }
@media (min-width: 768px) {
  .vt thead { display: table-header-group; }
  .vt tbody { display: table-row-group; }
  .vt tr { display: table-row; }
  .vt td, .vt th { display: table-cell; text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
  .vt th { font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); border-bottom-color: var(--c-ink); }
  .vt td:first-child { font-size: 20px; }
  .vt td[data-label] { display: table-cell; }
  .vt td[data-label]::before { content: none; }
}

/* Страница проблемы, блок «До и после»: два ползунка сравнения */
.cmp2 { display: grid; gap: 18px; }
.cmp2 .cmp { aspect-ratio: 1; }
.cmp2__cap { font-size: 13px; color: var(--c-muted); margin-top: 8px; }
.cmp2__cap b { color: var(--c-ink); font-weight: 500; }
.ba__note { font-size: 12px; color: var(--c-muted); max-width: 60ch; margin-top: 14px; }
@media (min-width: 768px) { .cmp2 { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* Страница проблемы, блок «Цены»: три варианта */
.pr .sum { font-size: 20px; }
.pr__lnk { font-size: var(--fs-small); display: inline-block; padding-block: 4px; }
.pr__foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-muted); }
/* «Меню по группам» */
.pm { display: grid; gap: var(--sp-4); }
.pm__list { display: grid; gap: var(--sp-4); }
.pm__grp { display: grid; gap: 4px; }
.pm__grp h3 { font-size: 22px; line-height: 1.1; }
.pm__grp > p { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: 8px; }
.pm__grp ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.pm__grp li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.pm__grp li span:first-child { font-weight: 500; grid-column: 1; grid-row: 1; }
.pm__grp li small { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--c-muted); }
.pm__grp li .sum { grid-column: 2; grid-row: 1 / 3; }
.pm__side { align-self: start; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 12px; }
.pm__side h3 { font-size: 22px; line-height: 1.1; }
.pm__side p { font-size: var(--fs-small); color: var(--c-muted); }
/* «Из чего складывается» */
.pf { display: grid; gap: var(--sp-4); }
.pf__top { display: grid; gap: var(--sp-3); }
.pf__fac { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pf__fac li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.pf__fac li i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-line); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.pf__fac li b { font-weight: 500; display: block; }
.pf__fac li span { font-size: var(--fs-small); color: var(--c-muted); }
.pf__ex { background: var(--c-ink); color: #fff; border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-self: start; }
.pf__ex h3 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; opacity: .7; }
.pf__ex dl { margin: 0; display: grid; gap: 8px; }
.pf__ex dl div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); }
.pf__ex dl div.t { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 10px; font-size: 16px; }
.pf__ex dd { margin: 0; font-variant-numeric: tabular-nums; }
.pf__ex p { font-size: 12px; opacity: .7; }
.pf__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--c-line); }
.pf__list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.pf__list li .sum { font-size: 18px; }
/* «Таблица» */
.pt { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pt th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); padding: 0 0 10px; border-bottom: 1px solid var(--c-ink); }
.pt th:last-child, .pt td:last-child { text-align: right; }
.pt td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.pt td:last-child { padding-right: 0; }
.pt td:first-child { font-weight: 500; }
.pt td.d { color: var(--c-muted); }
.pt tr.g td { text-align: left; padding-top: 22px; padding-bottom: 6px; border-bottom: 0; font-family: var(--f-display); font-size: 20px; font-weight: 400; color: var(--c-ink); }
.pt tr.g td span { display: block; font-family: var(--f-text); font-size: 13px; color: var(--c-muted); margin-top: 2px; }
@media (max-width: 767px) {
  .pt thead { display: none; }
  .pt tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .pt td { display: block; padding: 0; border: 0; }
  .pt td:first-child { grid-column: 1; grid-row: 1; }
  .pt td.d { grid-column: 1; grid-row: 2; }
  .pt td:last-child { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .pt tr.g { display: block; border: 0; padding: 22px 0 6px; }
  .pt tr.g td { padding: 0; }
}
@media (min-width: 768px) {
  .pm { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); align-items: start; }
  .pm__side { position: sticky; top: 90px; }
  .pf__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); }
  .pf__list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
}
@media (min-width: 1200px) { .pm { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--sp-7); } }

/* Страница проблемы, блок «Кто выполняет»: два варианта */
.tw { display: grid; gap: var(--sp-3); }
.tw__card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; padding: 20px; background: var(--c-bg-alt); border-radius: var(--r-card); }
.tw__card img { width: 96px; height: 120px; object-fit: cover; object-position: 50% 20%; border-radius: 12px; display: block; }
.tw__card h3 { font-size: 24px; line-height: 1.05; }
.tw__card .role { font-size: var(--fs-small); color: var(--c-muted); margin-top: 4px; }
.tw__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tw__card li { font-size: 12px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg); }
.tw__card .btn { margin-top: 14px; }
.tw__note { font-size: var(--fs-small); color: var(--c-muted); max-width: 60ch; margin-top: 14px; }
.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.tl li { display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.tl img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; grid-row: 1 / 3; }
.tl b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.05; display: block; }
.tl .role { font-size: var(--fs-small); color: var(--c-muted); }
.tl .exp { font-size: 13px; color: var(--c-muted); grid-column: 2; }
.tl .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
@media (min-width: 768px) {
  .tw { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .tw__card { grid-template-columns: 120px 1fr; padding: 24px; }
  .tw__card img { width: 120px; height: 150px; }
  .tl li { grid-template-columns: 72px 1fr auto auto; gap: 16px 24px; }
  .tl img { width: 72px; height: 72px; grid-row: auto; }
  .tl .exp { grid-column: auto; white-space: nowrap; }
  .tl .btn { grid-column: auto; margin-top: 0; }
}

/* Страница проблемы, блок «Записаться»: два варианта */
#book { background: var(--c-bg-alt); }
.bkv__bar { display: grid; gap: var(--sp-3); }
.bkv__act { display: grid; gap: 8px; justify-items: start; }
.bkv__act .tnum { display: inline-block; padding-block: 4px; }
.bw { background: var(--c-ink); color: #fff; border-radius: var(--r-card); padding: 28px 22px; display: grid; gap: var(--sp-4); }
.bw h2 { color: #fff; }
.bw__l { display: grid; gap: 14px; align-content: start; justify-items: start; }
.bw__l p { opacity: .75; font-size: var(--fs-small); max-width: 40ch; }
.bw__l .messengers .btn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.bw__l .tnum { color: #fff; font-size: 20px; display: inline-block; padding-block: 4px; }
.bw__note { font-size: 12px; opacity: .6; }
.bw__w { background: #fff; color: var(--c-ink); border-radius: 16px; padding: 18px; display: grid; gap: 14px; font-size: var(--fs-small); }
.bw__w h3 { font-size: 16px; font-weight: 500; }
.bw__w .lab { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.bw__w .svc { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; }
.bw__w .svc b { font-weight: 500; }
.bw__w .who { display: flex; flex-wrap: wrap; gap: 8px; }
.bw__w .who span { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--c-line); border-radius: 999px; }
.bw__w .who span.on { border-color: var(--c-ink); }
.bw__w .who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bw__w .slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bw__w .slots span { text-align: center; padding: 8px 0; border: 1px solid var(--c-line); border-radius: 8px; font-variant-numeric: tabular-nums; }
.bw__w .slots span.on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.bw__w .btn { justify-self: start; }
/* Страница проблемы, «Смежные проблемы»: вариант «Плитки» */
.rt { display: grid; gap: var(--sp-2); }
.rt a { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--r-card); color: var(--c-ink); background: var(--c-bg-alt); }
.rt a:hover { text-decoration: none; border-color: var(--c-ink); }
.rt b { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.1; }
.rt small { font-size: var(--fs-small); color: var(--c-muted); }
.rt .arr { color: var(--c-muted); font-size: 20px; margin-top: 4px; }
@media (min-width: 768px) {
  .bkv__bar { grid-template-columns: 1fr auto; align-items: center; }
  .bw { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--sp-6); padding: 40px; }
  .rt { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
}
@media (min-width: 1200px) { .bw { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Внутренние страницы: шапка страницы и общие блоки */
.page-head { padding-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.page-head h1 { max-width: 20ch; }
@media (min-width: 768px) { .page-head { padding-top: var(--sp-4); } }
.pt__note { font-size: 12px; color: var(--c-muted); max-width: 60ch; margin-top: 14px; }
/* Цены: карточка «Почему цена от» рядом с расчётом по фото */
.pt tr.g td a { color: var(--c-ink); }
.pt tr.g td a span { display: inline; font-family: inherit; font-size: inherit; color: inherit; margin: 0; }
.pt tr.g td a:hover { color: var(--c-accent); text-decoration: none; }
/* Цены: что оплачивается онлайн */
.pay { display: grid; gap: var(--sp-3); }
.pay__col { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-content: start; }
.pay__col h3 { font-size: 22px; line-height: 1.1; }
.pay__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.pay__col li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.pay__col li::before { content: "–"; color: var(--c-muted); }
.pay__col p { max-width: 52ch; }
.pay__col--yes { border-color: var(--c-ink); }
.pay__col--yes li::before { content: "+"; color: var(--c-accent); }
/* О центре: документы, оборудование, галерея, ограничения */
.docs { display: grid; gap: var(--sp-3); }
.doc { border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 8px; align-content: start; }
.doc h3 { font-size: 22px; line-height: 1.1; }
.doc p { font-size: var(--fs-small); color: var(--c-muted); }
.doc__lnk { display: inline-block; justify-self: start; padding-block: 5px; font-size: var(--fs-small); }
.eq { display: grid; gap: var(--sp-3); }
.eq__ph { margin: 0; }
.eq__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.eq__ph figcaption { font-size: 12px; color: var(--c-muted); margin-top: 8px; }
.eq__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; align-content: center; }
.eq__list li { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.eq__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.eq__list b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.05; }
.eq__list span { font-size: var(--fs-small); color: var(--c-muted); max-width: 52ch; }
.gal { display: grid; gap: var(--sp-2); }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.gal figcaption { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.lim { display: grid; gap: var(--sp-3); }
.lim__cta { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
/* Контакты: как найти вход */
.enter { display: grid; gap: var(--sp-3); }
.enter figure { margin: 0; }
.enter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.enter figcaption { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
@media (min-width: 768px) {
  .pay { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .docs { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .eq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: center; }
  .gal { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .lim { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); align-items: start; }
  .lim__cta { display: grid; justify-items: start; }
  .enter { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--sp-5); align-items: start; }
}
@media (min-width: 1200px) { .gal { grid-template-columns: repeat(4, 1fr); } }

/* Специалисты: карточки */
.sps { display: grid; gap: var(--sp-3); }
.sp { display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; background: var(--c-bg); }
.sp > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.sp__body { padding: 20px; display: grid; gap: 8px; align-content: start; }
.sp__body h3 { font-size: 26px; line-height: 1.05; }
.sp__role { font-size: var(--fs-small); color: var(--c-muted); }
.sp__q { font-size: var(--fs-small); }
.sp__lab { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-top: 4px; }
.sp__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp__tags li { font-size: 12px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 999px; }
.sp__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.sp__lnk { font-size: var(--fs-small); display: inline-block; padding-block: 4px; }
/* Илона: портрет и лид */
.ib { display: grid; gap: var(--sp-3); }
.ib__ph { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-card); }
.ib__t { display: grid; gap: var(--sp-2); align-content: center; }
.ib__lead { font-family: var(--f-display); font-size: 26px; line-height: 1.25; max-width: 34ch; }
.ib__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Курсы */
.ku { display: grid; gap: var(--sp-3); }
.ku__ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-card); }
.ku__t { display: grid; gap: var(--sp-3); align-content: center; }
.ku__act { display: flex; flex-wrap: wrap; gap: 8px; }
.cf__side p { max-width: 52ch; }
.fit { display: grid; gap: var(--sp-3); }
.fit__col { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-content: start; }
.fit__col h3 { font-size: 22px; line-height: 1.1; }
.fit__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.fit__col li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.fit__col li::before { content: "–"; color: var(--c-muted); }
.fit__col--yes { border-color: var(--c-ink); }
.fit__col--yes li::before { content: "+"; color: var(--c-accent); }
.prog { list-style: none; margin: 0; padding: 0; counter-reset: pg; display: grid; }
.prog li { counter-increment: pg; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.prog li:first-child { border-top: 1px solid var(--c-line); }
.prog li::before { content: counter(pg, decimal-leading-zero); font-family: var(--f-display); font-size: 18px; color: var(--c-accent); }
.prog b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.05; display: block; }
.prog li > div > span { font-size: var(--fs-small); color: var(--c-muted); display: block; margin-top: 3px; max-width: 60ch; }
/* Блог: рубрики и лента */
.bcats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.bcats__lab { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-right: 4px; }
.bcat { display: inline-block; padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; color: var(--c-ink); }
.bcat:hover { border-color: var(--c-ink); text-decoration: none; }
.bcat--on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.bfeed { display: grid; gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); }
.bp { background: var(--c-bg); }
.bp a { display: grid; gap: 6px; padding: 20px; color: var(--c-ink); height: 100%; align-content: start; }
.bp a:hover { text-decoration: none; background: var(--c-bg-alt); }
.bp a:hover h3 { color: var(--c-accent); }
.bp__cat { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.bp h3 { font-size: 22px; line-height: 1.15; max-width: 28ch; }
.bp__meta { font-size: 12px; color: var(--c-muted); margin-top: 4px; }
/* Шаблон статьи */
.art { padding-top: var(--sp-3); display: grid; gap: var(--sp-2); max-width: 760px; }
.art__cat { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.art h1 { max-width: 22ch; }
.art__meta { font-size: 13px; color: var(--c-muted); }
.art__lead { font-family: var(--f-display); font-size: 24px; line-height: 1.3; margin-top: var(--sp-2); }
.art__ph { margin: var(--sp-3) 0 var(--sp-2); }
.art__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.art__ph figcaption { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.art h2 { font-size: 28px; margin-top: var(--sp-3); }
.art p { max-width: 62ch; }
.art__ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 62ch; }
.art__q { margin: var(--sp-3) 0; padding-left: 18px; border-left: 2px solid var(--c-accent); font-family: var(--f-display); font-size: 22px; line-height: 1.3; max-width: 46ch; }
.art__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
@media (min-width: 768px) {
  .sps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .ib { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .ib__lead { font-size: 32px; }
  .ku { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .fit { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .bfeed { grid-template-columns: repeat(2, 1fr); }
  .art h1 { font-size: 48px; }
}
@media (min-width: 1200px) { .bfeed { grid-template-columns: repeat(3, 1fr); } }

/* Внутренние страницы: шапка страницы и общие блоки */
.page-head { padding-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.page-head h1 { max-width: 20ch; }
@media (min-width: 768px) { .page-head { padding-top: var(--sp-4); } }
.pt__note { font-size: 12px; color: var(--c-muted); max-width: 60ch; margin-top: 14px; }
/* Цены: карточка «Почему цена от» рядом с расчётом по фото */
.pt tr.g td a { color: var(--c-ink); }
.pt tr.g td a span { display: inline; font-family: inherit; font-size: inherit; color: inherit; margin: 0; }
.pt tr.g td a:hover { color: var(--c-accent); text-decoration: none; }
/* Цены: что оплачивается онлайн */
.pay { display: grid; gap: var(--sp-3); }
.pay__col { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-content: start; }
.pay__col h3 { font-size: 22px; line-height: 1.1; }
.pay__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.pay__col li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.pay__col li::before { content: "–"; color: var(--c-muted); }
.pay__col p { max-width: 52ch; }
.pay__col--yes { border-color: var(--c-ink); }
.pay__col--yes li::before { content: "+"; color: var(--c-accent); }
/* О центре: документы, оборудование, галерея, ограничения */
.docs { display: grid; gap: var(--sp-3); }
.doc { border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 8px; align-content: start; }
.doc h3 { font-size: 22px; line-height: 1.1; }
.doc p { font-size: var(--fs-small); color: var(--c-muted); }
.doc__lnk { display: inline-block; justify-self: start; padding-block: 5px; font-size: var(--fs-small); }
.eq { display: grid; gap: var(--sp-3); }
.eq__ph { margin: 0; }
.eq__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
.eq__ph figcaption { font-size: 12px; color: var(--c-muted); margin-top: 8px; }
.eq__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; align-content: center; }
.eq__list li { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.eq__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.eq__list b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.05; }
.eq__list span { font-size: var(--fs-small); color: var(--c-muted); max-width: 52ch; }
.gal { display: grid; gap: var(--sp-2); }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.gal figcaption { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.lim { display: grid; gap: var(--sp-3); }
.lim__cta { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
/* Контакты: как найти вход */
.enter { display: grid; gap: var(--sp-3); }
.enter figure { margin: 0; }
.enter img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.enter figcaption { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
@media (min-width: 768px) {
  .pay { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .docs { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .eq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: center; }
  .gal { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .lim { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); align-items: start; }
  .lim__cta { display: grid; justify-items: start; }
  .enter { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--sp-5); align-items: start; }
}
@media (min-width: 1200px) { .gal { grid-template-columns: repeat(4, 1fr); } }

/* Специалисты: карточки */
.sps { display: grid; gap: var(--sp-3); }
.sp { display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; background: var(--c-bg); }
.sp > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.sp__body { padding: 20px; display: grid; gap: 8px; align-content: start; }
.sp__body h3 { font-size: 26px; line-height: 1.05; }
.sp__role { font-size: var(--fs-small); color: var(--c-muted); }
.sp__q { font-size: var(--fs-small); }
.sp__lab { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-top: 4px; }
.sp__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp__tags li { font-size: 12px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 999px; }
.sp__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.sp__lnk { font-size: var(--fs-small); display: inline-block; padding-block: 4px; }
/* Илона: портрет и лид */
.ib { display: grid; gap: var(--sp-3); }
.ib__ph { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-card); }
.ib__t { display: grid; gap: var(--sp-2); align-content: center; }
.ib__lead { font-family: var(--f-display); font-size: 26px; line-height: 1.25; max-width: 34ch; }
.ib__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Курсы */
.ku { display: grid; gap: var(--sp-3); }
.ku__ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-card); }
.ku__t { display: grid; gap: var(--sp-3); align-content: center; }
.ku__act { display: flex; flex-wrap: wrap; gap: 8px; }
.cf__side p { max-width: 52ch; }
.fit { display: grid; gap: var(--sp-3); }
.fit__col { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-content: start; }
.fit__col h3 { font-size: 22px; line-height: 1.1; }
.fit__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.fit__col li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.fit__col li::before { content: "–"; color: var(--c-muted); }
.fit__col--yes { border-color: var(--c-ink); }
.fit__col--yes li::before { content: "+"; color: var(--c-accent); }
.prog { list-style: none; margin: 0; padding: 0; counter-reset: pg; display: grid; }
.prog li { counter-increment: pg; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.prog li:first-child { border-top: 1px solid var(--c-line); }
.prog li::before { content: counter(pg, decimal-leading-zero); font-family: var(--f-display); font-size: 18px; color: var(--c-accent); }
.prog b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.05; display: block; }
.prog li > div > span { font-size: var(--fs-small); color: var(--c-muted); display: block; margin-top: 3px; max-width: 60ch; }
/* Блог: рубрики и лента */
.bcats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.bcats__lab { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-right: 4px; }
.bcat { display: inline-block; padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; color: var(--c-ink); }
.bcat:hover { border-color: var(--c-ink); text-decoration: none; }
.bcat--on { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.bfeed { display: grid; gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); }
.bp { background: var(--c-bg); }
.bp a { display: grid; gap: 6px; padding: 20px; color: var(--c-ink); height: 100%; align-content: start; }
.bp a:hover { text-decoration: none; background: var(--c-bg-alt); }
.bp a:hover h3 { color: var(--c-accent); }
.bp__cat { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.bp h3 { font-size: 22px; line-height: 1.15; max-width: 28ch; }
.bp__meta { font-size: 12px; color: var(--c-muted); margin-top: 4px; }
/* Шаблон статьи */
.art { padding-top: var(--sp-3); display: grid; gap: var(--sp-2); max-width: 760px; }
.art__cat { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.art h1 { max-width: 22ch; }
.art__meta { font-size: 13px; color: var(--c-muted); }
.art__lead { font-family: var(--f-display); font-size: 24px; line-height: 1.3; margin-top: var(--sp-2); }
.art__ph { margin: var(--sp-3) 0 var(--sp-2); }
.art__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.art__ph figcaption { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.art h2 { font-size: 28px; margin-top: var(--sp-3); }
.art p { max-width: 62ch; }
.art__ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 62ch; }
.art__q { margin: var(--sp-3) 0; padding-left: 18px; border-left: 2px solid var(--c-accent); font-family: var(--f-display); font-size: 22px; line-height: 1.3; max-width: 46ch; }
.art__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
@media (min-width: 768px) {
  .sps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .ib { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .ib__lead { font-size: 32px; }
  .ku { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5); align-items: start; }
  .fit { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .bfeed { grid-template-columns: repeat(2, 1fr); }
  .art h1 { font-size: 48px; }
}
@media (min-width: 1200px) { .bfeed { grid-template-columns: repeat(3, 1fr); } }

/* Страницы проблем: заглушка блока «До и после», пока нет фото */
.baph { border: 1px dashed var(--c-line); border-radius: var(--r-card); padding: 28px 22px; display: grid; gap: 10px; justify-items: start; background: var(--c-bg-alt); }
.baph p { max-width: 56ch; }
.baph b { font-weight: 500; }

/* Цены, шапка: варианты «Подбор» и «Прайс сразу» */
.ctop { display: flex; flex-direction: column; }
.ctop > .cswitch { order: 1; padding-top: var(--sp-3); }
.ctop > .chv { order: 2; }
.ctop > .cbar { order: 3; }
.ctop > #photo { order: 4; }
.ctop > #price-list { order: 5; }
.ctop:has(.chv[data-variant="table"]:not([hidden])) > #photo { order: 6; }
.ctop > .cswitch + .chv .page-head { padding-top: var(--sp-2); }
.ctop > .chv[data-variant="pick"] { padding-bottom: var(--sp-5); }

.pk { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.pk__q { font-family: var(--f-display); font-size: 26px; line-height: 1.15; }
.pk__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pk__chips button { min-height: 40px; padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px;
  font-size: 14px; background: var(--c-bg); color: var(--c-ink); text-align: left; }
.pk__chips button:hover { border-color: var(--c-ink); }
.pk__chips button[aria-pressed="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.pk__box { background: var(--c-bg-alt); border-radius: var(--r-card); padding: 24px 22px; align-self: start; }
.pk__panel ul { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--c-line); }
.pk__panel li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: var(--fs-small); }
.pk__panel li + li { border-top: 1px solid var(--c-line); }
.pk__panel .sum { font-size: 17px; white-space: nowrap; }
.pk__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; font-size: var(--fs-small); }
.pk__sum b { font-family: var(--f-display); font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pk__note { font-size: 12px; color: var(--c-muted); margin-top: 8px; max-width: 44ch; }

.chead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-top: var(--sp-2); }
.chead h1 { font-size: 36px; }
.chead span { font-size: var(--fs-small); color: var(--c-muted); }
.cbar { background: var(--c-bg); border-bottom: 1px solid var(--c-line); margin-top: var(--sp-2); }
.cbar__in { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-block: 12px; }
.cbar__t { font-size: 13px; color: var(--c-muted); max-width: 46ch; margin: 0; }
.cbar__t b { color: var(--c-ink); font-weight: 500; }
.cbar .btn { margin-left: auto; }

@media (min-width: 768px) {
  .pk { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); align-items: start; }
  .pk__q { font-size: 32px; }
  .cbar { position: sticky; top: 64px; z-index: 5; }
}
@media (min-width: 1200px) { .chead h1 { font-size: 44px; } }

/* Цены, расчёт по фото: одна колонка, шаги в ряд */
.photo--wide { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .photo--wide { grid-template-columns: 1fr; }
  .photo--wide .steps3 { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-4); align-items: start; }
  .photo--wide .steps3 li { align-content: start; }
}

/* О центре, шапка: текст и показатели */
.abt { padding-top: var(--sp-3); display: grid; gap: var(--sp-4); }
.abt__cols { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.abt__cols p { margin: 0; }
.nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--c-line); border-block: 1px solid var(--c-line); }
.nums li { background: var(--c-bg); padding: 20px 0; display: grid; gap: 4px; }
.nums b { font-family: var(--f-display); font-size: 40px; line-height: 1; font-weight: 500;
  font-variant-numeric: tabular-nums; }
.nums span { font-size: var(--fs-small); color: var(--c-muted); }
.nums b .ph { font-family: var(--f-text); font-size: 13px; }
@media (min-width: 768px) {
  .abt { padding-top: var(--sp-4); }
  .abt__cols { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
  .nums { grid-template-columns: repeat(4, 1fr); }
  .nums li { padding: 22px; }
  .nums li:first-child { padding-left: 0; }
}

/* О центре, шапка: обложка с заголовком на фото */
.aswitch { padding-top: var(--sp-3); }
#ahead .abt { padding-top: var(--sp-2); }
.cv4 { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 340px;
  display: grid; align-items: end; margin-bottom: var(--sp-3); }
.cv4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv4::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25, 27, 30, .92) 0%, rgba(25, 27, 30, .78) 42%, rgba(25, 27, 30, .28) 100%); }
.cv4__t { position: relative; z-index: 1; padding: 26px 22px; display: grid; gap: 8px; }
.cv4__t h1 { color: #fff; }
.cv4__t p { color: rgba(255, 255, 255, .9); max-width: 56ch; margin: 0; }
@media (min-width: 768px) { .cv4 { min-height: 420px; } .cv4__t { padding: 40px 36px; } }

/* О центре: варианты пяти блоков */
.dc2 { list-style: none; margin: 0; padding: 0; display: grid; }
.dc2 li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--c-line); }
.dc2 li:last-child { border-bottom: 1px solid var(--c-line); }
.dc2 b { font-family: var(--f-display); font-size: 22px; font-weight: 400; line-height: 1.15; }
.dc2 .who { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.dc2 a { font-size: var(--fs-small); display: inline-flex; align-items: center; gap: 6px; min-height: 28px; justify-self: start; }

.dc3 { display: grid; gap: var(--sp-3); }
.dc3 article { display: grid; gap: 14px; align-content: start; }
.dc3 h3 { font-size: 20px; line-height: 1.15; }
.dc3 dl { margin: 0; display: grid; gap: 10px; }
.dc3 dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.dc3 dd { margin: 0; font-size: var(--fs-small); max-width: 44ch; }
.dc3 a { font-size: var(--fs-small); display: inline-flex; align-items: center; gap: 6px; min-height: 28px; justify-self: start; }

.eq1 { display: grid; gap: var(--sp-3); }
.eq1 figure { display: grid; gap: 12px; margin: 0; }
.eq1 .ph3 { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--c-bg); }
.eq1 .ph3 img { width: 100%; height: 100%; object-fit: cover; }
.eq1 figcaption { display: grid; gap: 4px; }
.eq1 figcaption b { font-size: 17px; font-weight: 500; }
.eq1 figcaption span { font-size: var(--fs-small); color: var(--c-muted); max-width: 40ch; }

.eq2 { list-style: none; margin: 0; padding: 0; display: grid; }
.eq2 li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--c-line); }
.eq2 li:last-child { border-bottom: 1px solid var(--c-line); }
.eq2 b { font-family: var(--f-display); font-size: 24px; font-weight: 400; line-height: 1.1; }
.eq2 span { font-size: var(--fs-small); color: var(--c-muted); max-width: 52ch; }

.ch1 { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; }
.ch1 li { counter-increment: c; display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--c-line); }
.ch1 li:last-child { border-bottom: 1px solid var(--c-line); }
.ch1 .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.ch1 .n::before { content: "Шаг " counter(c); }
.ch1 b { font-size: 18px; font-weight: 500; }
.ch1 span { font-size: var(--fs-small); color: var(--c-muted); max-width: 50ch; }

.ch2 { display: grid; gap: var(--sp-4); }
.ch2__steps { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; gap: 10px; }
.ch2__steps li { counter-increment: c; display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  align-items: baseline; font-size: var(--fs-small); }
.ch2__steps li::before { content: counter(c); display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--c-ink); color: #fff; font-size: 12px; align-self: start; }
.ch2__steps b { font-weight: 500; color: var(--c-ink); }
.ch2__you { background: var(--c-bg-alt); border-radius: var(--r-card); padding: 26px 22px;
  display: grid; gap: 14px; align-content: start; }
.ch2__you h3 { font-size: 20px; line-height: 1.15; }
.ch2__you ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ch2__you li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: var(--fs-small); }
.ch2__you li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); margin-top: 8px; }
.ch2__you p { font-size: 12px; color: var(--c-muted); margin: 0; max-width: 40ch; }

.g1 { display: grid; gap: 10px; }
.g1 figure { margin: 0; border-radius: var(--r-card); overflow: hidden; position: relative;
  aspect-ratio: 4 / 3; background: var(--c-bg); }
.g1 img { width: 100%; height: 100%; object-fit: cover; }
.g1 figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(25, 27, 30, .72);
  color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 999px; }

.g2 { display: grid; gap: 12px; }
.g2__row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.g2__row figure { margin: 0; scroll-snap-align: start; display: grid; gap: 10px; }
.g2__row .ph4 { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--c-bg); }
.g2__row img { width: 100%; height: 100%; object-fit: cover; }
.g2__row figcaption { display: grid; gap: 3px; }
.g2__row figcaption b { font-size: 15px; font-weight: 500; }
.g2__row figcaption span { font-size: 13px; color: var(--c-muted); }

.lm1 { display: grid; gap: var(--sp-3); }
.lm1__c { display: grid; gap: 12px; align-content: start; }
.lm1__c h3 { font-size: 20px; line-height: 1.15; }
.lm1__c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lm1__c li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: var(--fs-small); }
.lm1__c li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); margin-top: 8px; }
.lm1__c--no li::before { background: var(--c-line); border-radius: 1px; height: 2px; width: 10px; margin-top: 11px; }
.lm1__c--no li { color: var(--c-muted); }
.lm1__c p { font-size: 13px; color: var(--c-muted); margin: 0; max-width: 42ch; }

.lm2 { display: grid; gap: 0; }
.lm2 .qa { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--c-line); }
.lm2 .qa:last-child { border-bottom: 1px solid var(--c-line); }
.lm2 .qa b { font-family: var(--f-display); font-size: 22px; font-weight: 400; line-height: 1.15; max-width: 28ch; }
.lm2 .qa p { font-size: var(--fs-small); color: var(--c-muted); margin: 0; max-width: 56ch; }

@media (min-width: 768px) {
  .dc2 li { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
    align-items: baseline; column-gap: var(--sp-4); gap: 0; }
  .dc2 a { justify-self: end; }
  .dc3 { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
  .eq1 { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-3); }
  .eq2 li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--sp-5);
    align-items: baseline; gap: 0; }
  .ch1 li { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr);
    column-gap: var(--sp-4); align-items: baseline; gap: 0; }
  .ch2 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--sp-5); align-items: start; }
  .g1 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .g1 figure { aspect-ratio: auto; height: 100%; }
  .g1 figure:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
  .g1 figure:nth-child(4) { grid-column: 3 / 5; }
  .g2__row { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .lm1 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--sp-6); }
  .lm1__c--no { border-left: 1px solid var(--c-line); padding-left: var(--sp-5); }
  .lm2 .qa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-5);
    align-items: start; gap: 0; }
}
@media (min-width: 1200px) { .g1 { grid-auto-rows: 230px; } }

/* Контакты, шапка: два варианта */
#chead .kh, #chead .k2 { padding-top: var(--sp-2); }
.kh { display: grid; gap: var(--sp-3); }
.kh__t { display: grid; gap: 10px; }
.kh__addr { font-family: var(--f-display); font-size: 26px; line-height: 1.15; margin: 0; }
.kh__meta { font-size: var(--fs-small); color: var(--c-muted); margin: 0; max-width: 62ch; }
.kh__act { display: flex; flex-wrap: wrap; gap: 10px; }
.k2 { display: grid; gap: var(--sp-3); }
.k2__cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--c-line); border-block: 1px solid var(--c-line); }
.k2__cols li { background: var(--c-bg); padding: 20px 0; display: grid; gap: 8px; align-content: start; }
.k2__cols .lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.k2__cols b { font-family: var(--f-display); font-size: 22px; font-weight: 400; line-height: 1.2; }
.k2__cols span { font-size: 13px; color: var(--c-muted); }
.k2__cols a.go { font-size: var(--fs-small); display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; justify-self: start; }
@media (min-width: 768px) {
  .kh__addr { font-size: 32px; }
  .k2__cols { grid-template-columns: repeat(3, 1fr); }
  .k2__cols li { padding: 22px; }
  .k2__cols li:first-child { padding-left: 0; }
}

/* Полный прайс: четыре варианта */
#price-list .proto-switch { margin-bottom: var(--sp-3); }
.pr__head { display: grid; gap: 10px; margin-bottom: var(--sp-3); }
.pr__lead { max-width: 62ch; color: var(--c-muted); font-size: var(--fs-small); margin: 0; }
.pr__notes { display: grid; gap: 8px; margin-top: var(--sp-3); }
.pr__notes p { margin: 0; font-size: 13px; color: var(--c-muted); max-width: 58ch; }

.prt { width: 100%; border-collapse: collapse; }
.prt thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted); font-weight: 400; text-align: right; padding: 0 0 10px;
  border-bottom: 1px solid var(--c-line); }
.prt thead th:first-child { text-align: left; }
.prt tbody td { padding: 12px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.prt .g td { padding-top: var(--sp-3); border-bottom: 1px solid var(--c-ink); }
.prt .g a { font-family: var(--f-display); font-size: 22px; display: inline-flex; gap: 8px;
  align-items: center; min-height: 28px; }
.prt .n b { font-weight: 400; display: block; }
.prt .n i { font-style: normal; font-size: 13px; color: var(--c-muted); display: block; margin-top: 2px; }
.prt .t { color: var(--c-muted); font-size: 13px; text-align: right; white-space: nowrap; }
.prt .s { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prt .s.dim { color: var(--c-muted); }

.prtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3); }
.prtabs button { border: 1px solid var(--c-line); background: transparent; border-radius: var(--r-pill);
  padding: 9px 16px; font: inherit; font-size: var(--fs-small); cursor: pointer; min-height: 38px;
  color: inherit; }
.prtabs button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.prtabs button .c { color: var(--c-muted); margin-left: 6px; }
.prtabs button[aria-pressed="true"] .c { color: rgba(252, 252, 251, .6); }

.prl__g { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: var(--sp-3) 0 10px; border-bottom: 1px solid var(--c-ink); }
.prl__g a { font-family: var(--f-display); font-size: 22px; display: inline-flex; gap: 8px;
  align-items: center; min-height: 28px; }
.prl__g span { font-size: 12px; color: var(--c-muted); }
.prl__r { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0;
  border-bottom: 1px solid var(--c-line); }
.prl__r b { font-weight: 400; }
.prl__r i { font-style: normal; font-size: 13px; color: var(--c-muted); }
.prl__r .s { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prl__r .t { grid-column: 1; font-size: 13px; color: var(--c-muted); }

.pra details { border-top: 1px solid var(--c-line); }
.pra details:last-of-type { border-bottom: 1px solid var(--c-line); }
.pra summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px;
  padding: 16px 0; min-height: 28px; }
.pra summary::-webkit-details-marker { display: none; }
.pra summary b { font-family: var(--f-display); font-size: 22px; font-weight: 400; flex: 1; }
.pra summary .c { font-size: 12px; color: var(--c-muted); }
.pra summary .k { width: 14px; height: 14px; position: relative; flex: none; }
.pra summary .k::before, .pra summary .k::after { content: ""; position: absolute;
  background: var(--c-ink); left: 0; top: 6px; width: 14px; height: 1px; }
.pra summary .k::after { transform: rotate(90deg); transition: transform .18s; }
.pra details[open] summary .k::after { transform: rotate(0); }
.pra__b { padding-bottom: var(--sp-3); }
.pra__r { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 16px; padding: 10px 0;
  border-top: 1px solid var(--c-line); }
.pra__r b { font-weight: 400; grid-column: 1; }
.pra__r i { font-style: normal; font-size: 13px; color: var(--c-muted); grid-column: 1; grid-row: 2; }
.pra__r .t { font-size: 13px; color: var(--c-muted); grid-column: 1; }
.pra__r .s { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pra__r .s.dim { color: var(--c-muted); }
.pra__more { font-size: var(--fs-small); display: inline-flex; gap: 8px; align-items: center;
  min-height: 28px; margin-top: 10px; }

@media (max-width: 767px) {
  .prt thead { position: absolute; left: -9999px; }
  .prt tbody td { display: block; border: 0; padding: 0; }
  .prt tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .prt tbody tr.g { padding: var(--sp-3) 0 8px; border-bottom: 1px solid var(--c-ink); }
  .prt .t { text-align: left; margin-top: 4px; }
  .prt .s { text-align: left; display: inline-block; margin-top: 6px; font-size: 15px; }
  .prt .s::before, .pra__r .s::before { content: attr(data-l) " "; font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
  .prt .s + .s { margin-left: 18px; }
  .pra__r { grid-template-columns: 1fr auto; }
  .pra__r .s { grid-column: 2; }
}
@media (min-width: 768px) {
  .prl__r { grid-template-columns: minmax(0, 1fr) 180px auto; align-items: baseline; }
  .prl__r .t { grid-column: 2; text-align: right; }
  .pra__r { grid-template-columns: minmax(0, 1fr) 170px 120px 150px; align-items: baseline; }
  .pra__r i { grid-column: 1; grid-row: 2; }
  .pra__r .t { grid-column: 2; grid-row: 1; text-align: right; }
}

/* Блок проблем: три варианта */
.pv[hidden] { display: none; }

/* Переключатель вариантов (виден только в прототипе) */
.proto-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--sp-4); padding: 6px 6px 6px 12px; border: 1px dashed var(--c-line); border-radius: 999px; width: fit-content; max-width: 100%; font-size: 12px; color: var(--c-muted); }
.proto-switch__label { margin-right: 4px; }
.proto-switch__btn { min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--c-ink); border: 1px solid transparent; }
.proto-switch__btn:hover { border-color: var(--c-line); }
.proto-switch__btn[aria-pressed="true"] { background: var(--c-ink); color: #fff; }

/* Вариант «Карта стопы» */
.map { display: grid; grid-template-columns: 1fr; row-gap: 32px; align-items: start; }
.map__foot { position: static; display: grid; gap: 14px; justify-items: start; }
.map__foot svg { width: 100%; max-width: 200px; height: auto; overflow: visible; }
.foot-line { fill: none; stroke: var(--c-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.foot-glow { fill: none; stroke: var(--c-neon); stroke-width: 7; opacity: .18; stroke-linecap: round; stroke-linejoin: round; }
.zone { fill: var(--c-accent); fill-opacity: .06; stroke: var(--c-accent); stroke-width: 1; stroke-dasharray: 3 4; transition: fill-opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease); }
.zone.on { fill-opacity: .22; stroke-dasharray: none; stroke-width: 1.6; }
.map__label { display: none; min-height: 24px; font-size: var(--fs-small); color: var(--c-muted); text-align: left; }
.map__label b { color: var(--c-ink); font-weight: 600; }
.sym { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-ink); }
.sym a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--c-line); transition: padding-left var(--dur) var(--ease); }
.sym a > .arr { order: -1; }
.sym .q { font-family: var(--f-display); font-style: italic; font-size: 22px; line-height: 1.15; padding-bottom: 2px; display: block; }
.sym .a { display: block; position: relative; padding-left: 26px; margin-top: 6px; font-size: var(--fs-small); color: var(--c-muted); }
.sym .a b { font-weight: 500; color: var(--c-ink); }
.sym .a::before { content: ""; position: absolute; left: 0; top: .75em; width: 18px; height: 1px; background: var(--c-accent); }
.sym .arr { width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 50%; display: grid; place-items: center; font-size: 14px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sym a:hover, .sym a:focus-visible { padding-left: 12px; }
.sym a:hover .arr, .sym a:focus-visible .arr { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.sym a:hover .q { color: var(--c-accent); }
@media (min-width: 768px) {
  .map { grid-template-columns: minmax(240px, 340px) 1fr; column-gap: 40px; row-gap: 0; }
  .map__label { display: block; text-align: center; }
  .sym .q { font-size: 26px; }
}
@media (min-width: 1200px) {
  .map { grid-template-columns: minmax(300px, 420px) 1fr; column-gap: 72px; }
  .map__foot { position: sticky; top: 96px; justify-items: center; }
  .sym .q { font-size: 28px; }
}

/* Вариант «Где беспокоит?» */
.ask h2 { font-size: 40px; line-height: 1; }
.ask .hint { margin-top: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 36px; }
.tab { min-height: 44px; padding: 8px 18px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 15px; font-weight: 500; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.tab:hover { border-color: var(--c-ink); }
.tab[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--c-ink); }
.ans li[hidden] { display: none; }
.ans a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.ans .q { font-family: var(--f-display); font-size: 27px; line-height: 1.1; display: block; }
.ans .a { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--c-muted); }
.ans .arr { width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 50%; display: grid; place-items: center; font-size: 14px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ans a:hover .arr { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ans a:hover .q { color: var(--c-accent); }
@media (min-width: 768px) { .ans { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
@media (min-width: 1200px) { .ask h2 { font-size: 56px; } }

/* Вариант «Плитки»: существующий список проблем, 4 в ряд на десктопе */
@media (min-width: 1200px) {
  .problems--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .problems--4 a { min-height: 200px; padding: 24px 24px 20px; }
  .problems--4 .t { font-size: 26px; }
  .problems--4 .d { font-size: 14px; }
}