/* Лендинг «Чашковые пакеты» (этап 25). Только эта страница: в стили первого экрана сайта не входит.
   Всё под .cp — шапка и подвал сайта не задеты. Шрифт: data-font="own" — Manrope (заголовки) + Inter (текст),
   data-font="site" — шрифт сайта IBM Plex Sans. Движение — только при prefers-reduced-motion: no-preference
   и только когда скрипт поставил .cp-js (без скрипта всё видно сразу). */

@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700-cyrillic.e58febde317b.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700-latin.938c6e8019b6.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/manrope-800-cyrillic.e58febde317b.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/manrope-800-latin.938c6e8019b6.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-cyrillic.de93fdc85e3d.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin.260c81a4759b.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-cyrillic.de93fdc85e3d.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin.260c81a4759b.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

.cp {
  --abyss: #062B45;      /* глубина: тёмные полосы (первый экран, подборщик, заявка) */
  --deep: #0B3F86;
  --liner: #1673D0;      /* синий ПВХ пакета */
  --site: #014CE4;       /* синий сайта: ссылки и «В корзину» — как в каталоге */
  --caustic: #9DEBF3;    /* свет на воде */
  --sun: #FFC44D;        /* солнце: главная кнопка и цены на тёмном */
  --foam: #F0F6F8;       /* фон светлых секций */
  --paper: #FFFFFF;
  --ink: #0C2233;
  --muted: #4E6474;
  --line: #D3E2E9;
  --steel: #B8C4CA;
  --red: #E5484D;
  --green: #138A52;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-water: cubic-bezier(.45, 0, .2, 1);
  --display: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif;
  --text: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -.035em;
  color: var(--ink);
  background: var(--foam);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}
.cp[data-font="site"] { --display: 'IBM Plex Sans', system-ui, sans-serif; --text: 'IBM Plex Sans', system-ui, sans-serif; --display-weight: 700; --display-track: -.03em; }
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
:where(.cp) p { margin: 0 0 1em; }
:where(.cp) a { color: var(--site); }
.cp-main { background: var(--foam); }
.cp-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .cp-wrap { padding: 0 32px; } }

.cp-crumbs { padding-top: 14px; padding-bottom: 6px; }
.cp-crumbs .breadcrumb { margin: 0; }

/* ── типографика ── */
.cp-h2 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: clamp(32px, 4.6vw, 62px); line-height: 1.02; margin: 0 0 .5em; max-width: 18ch; text-wrap: balance; }
.cp-h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2; margin: 0 0 .6em; text-wrap: balance; }
.cp-intro { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); max-width: 60ch; }
.cp-sec { padding: clamp(64px, 9vw, 128px) 0; }
.cp-head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cp-link { font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* ── кнопки ── */
.cp-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0; font: 700 17px/1 var(--text); text-decoration: none;
  cursor: pointer; isolation: isolate; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s; }
.cp a.cp-btn { color: inherit; }
.cp-btn_sun { background: var(--sun); color: var(--abyss) !important; box-shadow: 0 10px 30px -10px rgba(255, 196, 77, .7); }
.cp-btn_sun:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(255, 196, 77, .85); }
.cp-btn_ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.cp-btn_ghost:hover { background: rgba(255, 255, 255, .1); }
.cp-btn_wide { width: 100%; }
.cp-btn_buy { min-height: 46px; width: 100%; padding: 0 16px; border-radius: 12px; font-size: 15px; background: var(--site); color: #fff; }
.cp-btn_buy:hover { background: #003BB5; }
.cp-btn_buy[disabled] { background: #9AA8B2; cursor: default; }
.cp-btn:focus-visible, .cp-chip input:focus-visible + span, .cp-shape input:focus-visible ~ span, .cp a:focus-visible,
.cp summary:focus-visible, .cp input:focus-visible, .cp select:focus-visible, .cp button:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 3px; }
.cp-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: rgba(255, 255, 255, .55);
  transform: scale(0); animation: cp-ripple .7s var(--ease) forwards; }
@keyframes cp-ripple { to { transform: scale(1); opacity: 0; } }

/* ── 1. первый экран ── */
.cp-hero, .cp-picker, .cp-lead { position: relative; color: #E8F4F8; background: radial-gradient(120% 80% at 85% 10%, #0C4F7C 0%, var(--abyss) 55%, #031B2C 100%); isolation: isolate; overflow: hidden; }
:where(.cp-hero, .cp-picker, .cp-lead) a:not(.cp-btn) { color: var(--caustic); }
.cp-hero__light, .cp-picker__light { position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: .35;
  background:
    radial-gradient(closest-side, rgba(157, 235, 243, .28), transparent) 10% 20% / 40% 30% no-repeat,
    radial-gradient(closest-side, rgba(157, 235, 243, .18), transparent) 70% 70% / 50% 40% no-repeat,
    radial-gradient(closest-side, rgba(22, 115, 208, .5), transparent) 40% 90% / 70% 50% no-repeat;
  transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.cp-hero { padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.cp-hero__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .cp-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; } }
.cp-hero__h1 { font: 600 clamp(15px, 1.3vw, 18px)/1.3 var(--text); color: var(--caustic); margin: 0 0 18px; letter-spacing: .01em; }
.cp-hero__display { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-size: clamp(40px, 5vw, 74px); line-height: .98; margin: 0 0 26px; color: #fff; }
.cp-hero__display > span { display: block; }
.cp-hero__display > span:last-child { color: var(--sun); }
.cp-hero__lead { font-size: clamp(17px, 1.45vw, 20px); max-width: 52ch; color: #CFE3EC; }
.cp-hero__live { font-size: clamp(16px, 1.3vw, 18px); max-width: 54ch; padding: 14px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(157, 235, 243, .22); color: #DDEEF4; }
.cp-hero__live b { color: #fff; font-weight: 700; white-space: nowrap; }
.cp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cp-hero__art { margin: 0; position: relative; }
.cp-hero__caption { font-size: 15px; color: #A9C6D3; max-width: 46ch; margin-top: 8px; }
.cp-pool { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 1024px) { .cp-pool { width: 116%; margin-left: -4%; } }
.cp-pool__shadow { fill: rgba(0, 0, 0, .35); }
.cp-pool__notes { font-family: var(--text); font-weight: 600; fill: #DDEEF4; }
.cp-pool__notes path { stroke: var(--caustic); stroke-width: 2; fill: none; stroke-dasharray: 4 5; }
@media (max-width: 719px) { .cp-pool__notes { display: none; } }
.cp-pool__ripples ellipse { fill: none; stroke: #DFFBFF; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.cp-pool__glint { animation: none; }
.cp-pool { cursor: crosshair; }

/* ── 2. беда ── */
.cp-trouble__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 16px 20px; scrollbar-width: none; }
.cp-trouble__rail::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .cp-trouble__rail { grid-auto-flow: row; grid-template-columns: 1.25fr 1fr 1fr; overflow: visible; max-width: 1320px;
  margin: 0 auto; padding: 8px 32px 20px; gap: 20px; align-items: end; } }
.cp-photo { margin: 0; scroll-snap-align: start; position: relative; border-radius: 24px; overflow: hidden; background: var(--abyss); color: #fff; min-height: 380px; display: flex; }
@media (min-width: 720px) { .cp-photo_animal { min-height: 520px; } .cp-photo_winter { min-height: 440px; } .cp-photo_wear { min-height: 470px; } }
.cp-photo picture, .cp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-photo img { transition: transform 1.2s var(--ease); }
.cp-photo:hover img { transform: scale(1.04); }
.cp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(3, 27, 44, .92)); }
.cp-photo figcaption { position: relative; z-index: 1; margin-top: auto; padding: 22px; font-size: 15px; color: #D6E7EE; }
.cp-photo__title { display: block; font: 700 22px/1.15 var(--display); letter-spacing: -.01em; color: #fff; margin-bottom: 6px; }
.cp-good { margin-top: 28px !important; font: 700 clamp(20px, 2.1vw, 28px)/1.3 var(--display); letter-spacing: -.015em; max-width: 34ch; }

/* ── 3. что это ── */
.cp-what { background: var(--paper); }
.cp-what__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .cp-what__grid { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; } }
.cp-what__text > p { max-width: 60ch; }
.cp-aliases { color: var(--muted); font-size: 15px; }
.cp-aliases span { white-space: nowrap; color: var(--ink); }
.cp-kinds__q { font: 700 18px/1.3 var(--display); margin-bottom: 12px !important; }
.cp-kind { border-radius: 20px; background: var(--foam); margin-bottom: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.cp-kind summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: center; padding: 18px 22px; }
.cp-kind summary::-webkit-details-marker { display: none; }
.cp-kind__name { font: 700 19px/1.25 var(--display); }
.cp-kind__verdict { font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.cp-kind_yes .cp-kind__verdict { background: var(--liner); color: #fff; }
.cp-kind_no .cp-kind__verdict { background: #FBE3E4; color: #A3262B; }
.cp-kind_other .cp-kind__verdict { background: #E3EBEF; color: var(--muted); }
.cp-kind_yes { background: #E7F1FC; box-shadow: inset 0 0 0 2px var(--liner); }
.cp-kind__body { padding: 0 22px 18px; font-size: 16px; }
.cp-kind__body ul, .cp-choice__item ul { margin: 0; padding: 0; list-style: none; }
.cp-kind__body li, .cp-choice__item li { position: relative; padding-left: 22px; margin: 6px 0; }
.cp-kind__body li::before, .cp-choice__item li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }

/* ── 4. измерить, правило борта ── */
.cp-measure__grid { display: grid; gap: 32px; align-items: center; margin-bottom: clamp(48px, 7vw, 96px); }
@media (min-width: 900px) { .cp-measure__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cp-measure__list { margin: 0; padding: 0; list-style: none; counter-reset: m; }
.cp-measure__list li { counter-increment: m; position: relative; padding: 0 0 22px 64px; max-width: 54ch; }
.cp-measure__list li::before { content: counter(m); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font: 800 20px/1 var(--display); color: #fff; background: var(--liner); }
.cp-measure__art { width: 100%; height: auto; max-width: 560px; justify-self: center; }
.cp-m-pool { fill: #C3CED4; stroke: #8C9BA3; stroke-width: 2; }
.cp-m-water { fill: #49B7E6; }
.cp-m-wall { fill: #C3CED4; stroke: #8C9BA3; stroke-width: 2; }
.cp-m-ground { stroke: #7E9A64; stroke-width: 4; stroke-linecap: round; }
.cp-m-dim { stroke: var(--ink); stroke-width: 2; fill: none; }
.cp-m-label { font: 600 15px var(--text); fill: var(--ink); }

.cp-rule { display: grid; gap: 24px; padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: var(--paper); box-shadow: 0 30px 60px -40px rgba(6, 43, 69, .45); }
@media (min-width: 900px) { .cp-rule { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }
.cp-rule__controls { display: grid; gap: 18px; margin: 18px 0; }
.cp-rule__range span { display: block; font-weight: 600; margin-bottom: 8px; }
.cp-rule__range output { font: 800 26px/1 var(--display); color: var(--liner); }
.cp-rule__range input { width: 100%; accent-color: var(--liner); height: 32px; }
.cp-rule__depths { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-rule__depths legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.cp-rule__verdict { font: 700 19px/1.35 var(--display); padding: 14px 18px; border-radius: 16px; background: #E4F5EC; color: #0B5C37; transition: background-color .3s, color .3s; }
.cp-rule__verdict.is-bad { background: #FCE6E7; color: #9C1F25; }
.cp-rule__art { width: 100%; height: auto; max-height: 420px; }
.cp-r-ground { stroke: #7E9A64; stroke-width: 4; stroke-linecap: round; }
.cp-r-water { fill: #49B7E6; opacity: .85; }
.cp-r-rail { fill: #E6ECEF; stroke: #8C9BA3; stroke-width: 2; }
.cp-r-liner { fill: none; stroke: var(--liner); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.cp-r-strain { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 6 6; }
.cp-r-tear { stroke: var(--red); stroke-width: 3; fill: none; stroke-linecap: round; opacity: 0; }
.cp-r-tear.is-on { opacity: 1; }
.cp-r-label { font: 700 16px var(--text); fill: var(--ink); }

/* ── чипы и выбор ── */
.cp-chip { position: relative; display: inline-flex; cursor: pointer; }
.cp-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cp-chip span { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; min-width: 64px; padding: 6px 16px;
  border-radius: 14px; font-weight: 600; background: var(--foam); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .2s, box-shadow .2s, color .2s, transform .2s var(--ease); line-height: 1.15; }
.cp-chip span small { font-size: 12px; font-weight: 500; opacity: .7; }
.cp-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--liner); }
.cp-chip input:checked + span { background: var(--liner); color: #fff; box-shadow: none; transform: translateY(-1px); }

/* ── 5. выбор ── */
.cp-choice__grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .cp-choice__grid { grid-template-columns: 1fr 1fr 1.15fr; gap: 20px; align-items: stretch; } }
.cp-choice__item { padding: 28px; border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.cp-choice__item_bad { background: #FFF6F6; }
.cp-choice__item_good { background: var(--liner); color: #fff; box-shadow: 0 30px 60px -30px rgba(22, 115, 208, .7); }
@media (min-width: 900px) { .cp-choice__item_good { transform: translateY(-16px); } }
.cp-choice__verdict { margin-top: auto !important; padding-top: 18px; font-weight: 700; }

/* ── 6. подборщик ── */
.cp-picker { padding: clamp(64px, 9vw, 120px) 0; background: radial-gradient(100% 70% at 15% 0%, #0F5A8E 0%, var(--abyss) 50%, #031B2C 100%); }
.cp-picker .cp-intro { color: #BFD6E0; }
.cp-pk { margin-top: 32px; }
.cp-pk__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; }
.cp-pk__step { position: relative; padding-top: 14px; font-size: 14px; color: #8FB0BF; min-width: 0; }
.cp-pk__step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.cp-pk__step::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; border-radius: 4px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.cp-pk__step.is-done::after, .cp-pk__step.is-current::after { transform: none; }
.cp-pk__step.is-current { color: #fff; }
.cp-pk__step.is-done { color: #DDEEF4; cursor: pointer; }
.cp-pk__step b { display: block; font: 700 15px/1.2 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.cp-pk__stage { position: relative; }
.cp-pk__pane { border: 0; margin: 0; padding: 0; min-width: 0; }
.cp-js .cp-pk__pane:not(.is-current) { display: none; }
.cp:not(.cp-js) .cp-pk__result { display: none; }
.cp-pk__q { font: var(--display-weight) clamp(24px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.02em; color: #fff; margin: 0 0 18px; padding: 0; }
.cp-pk__hint { color: #A9C6D3; font-size: 15px; }
.cp-pk__shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; margin-bottom: 14px; }
.cp-shape { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 14px; border-radius: 24px; cursor: pointer;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(157, 235, 243, .25); transition: background-color .25s, box-shadow .25s, transform .3s var(--ease); }
.cp-shape:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--caustic); }
.cp-shape input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cp-shape svg { width: 120px; height: 80px; }
.cp-shape svg * { fill: rgba(73, 183, 230, .35); stroke: var(--caustic); stroke-width: 3; transition: fill .3s; }
.cp-shape span { font: 700 19px/1.2 var(--display); color: #fff; }
.cp-shape small { color: #A9C6D3; font-size: 14px; }
.cp-shape:has(input:checked) { background: rgba(22, 115, 208, .55); box-shadow: inset 0 0 0 2px var(--sun); }
.cp-shape:has(input:checked) svg * { fill: #49B7E6; }
.cp-picker .cp-chip span { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(157, 235, 243, .25); }
.cp-picker .cp-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--caustic); }
.cp-picker .cp-chip input:checked + span { background: var(--sun); color: var(--abyss); }
.cp-pk__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cp-select { display: grid; gap: 6px; max-width: 420px; font-size: 14px; color: #A9C6D3; }
.cp-select select { min-height: 50px; border-radius: 14px; border: 0; padding: 0 14px; font: 600 16px var(--text); color: var(--ink); background: #fff; }
.cp-pk__back { margin-top: 18px; background: none; border: 0; padding: 6px 0; color: var(--caustic); font: 600 15px var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.cp-pk__summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.cp-pk__summary p { margin: 0; font: 700 clamp(19px, 2vw, 24px)/1.3 var(--display); color: #fff; max-width: 52ch; }
.cp-pk__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 599px) { .cp-pk__cards { grid-template-columns: 1fr 1fr; gap: 10px; } .cp-pk__cards .cp-card__body { padding: 10px 10px 12px; } .cp-pk__cards .cp-card__price { font-size: 18px; } }
.cp-pk__cards.is-loading { opacity: .4; transition: opacity .2s; }
.cp-pk__empty { color: #DDEEF4; background: rgba(255, 255, 255, .06); padding: 20px; border-radius: 18px; grid-column: 1 / -1; }
.cp-pk__noscript { margin-top: 18px; }
.cp-picker__call { margin-top: 32px !important; color: #BFD6E0; }

/* ── карточка пакета ── */
.cp-card { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 22px; overflow: hidden; min-width: 0;
  box-shadow: 0 1px 0 rgba(6, 43, 69, .06), 0 18px 40px -30px rgba(6, 43, 69, .55); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cp-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(6, 43, 69, .06), 0 28px 50px -30px rgba(6, 43, 69, .7); }
.cp-card__photo { position: relative; display: block; aspect-ratio: 1; background: #fff; overflow: hidden; }
.cp-card__photo picture { position: absolute; inset: 0; display: block; }
.cp-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cp-card:hover .cp-card__photo img { transform: scale(1.05); }
.cp-card__hit { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--sun); color: var(--abyss); font: 700 13px/1.3 var(--text); }
.cp-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.cp-card__brand { margin: 0 0 2px !important; font-size: 13px; color: var(--muted); font-weight: 600; }
.cp a.cp-card__name { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp a.cp-card__name:hover { color: var(--site); }
.cp-card__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; padding: 0; }
.cp-card__specs div { display: flex; gap: 4px; padding: 3px 9px; border-radius: 8px; background: var(--foam); font-size: 13px; }
.cp-card__specs dt { color: var(--muted); }
.cp-card__specs dd { margin: 0; font-weight: 600; }
.cp-card__foot { margin-top: auto; display: grid; gap: 10px; }
.cp-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 800 22px/1.1 var(--display); letter-spacing: -.01em; }
.cp-card__ask { font: 600 15px var(--text); color: var(--muted); }
.cp-stock { font: 600 13px/1.3 var(--text); padding: 2px 8px; border-radius: 6px; background: #EEF2F5; color: var(--muted); letter-spacing: 0; }
.cp-stock_in { background: #DDF3E7; color: var(--green); }
.cp-card .buy-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; background: inherit; border-radius: inherit; }
.cp-card .is-added .buy-check { opacity: 1; }

/* ── 7. на складе ── */
.cp-stocknow { padding-bottom: clamp(40px, 6vw, 80px); }
.cp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 18px 2px 24px; scrollbar-width: thin; }
@media (min-width: 1100px) { .cp-strip { grid-auto-columns: calc((100% - 48px) / 4); } }
.cp-strip .cp-card { scroll-snap-align: start; }

/* ── 8. бренды ── */
.cp-brands { background: var(--paper); }
.cp-table { margin-top: 28px; overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.cp-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cp-table th, .cp-table td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cp-table thead th { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--foam); }
.cp-table tbody tr { transition: background-color .2s; }
.cp-table tbody tr:hover { background: #F4F9FB; }
.cp-table tbody tr:last-child > * { border-bottom: 0; }
.cp-brand { display: block; font: 700 18px/1.2 var(--display); }
.cp-table small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 3px; }
.cp-table .cp-stock { display: inline-block; }
.cp-num { font: 800 24px/1 var(--display); color: var(--liner); }
@media (max-width: 819px) {
  .cp-table { box-shadow: none; border-radius: 0; overflow: visible; }
  .cp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cp-table table, .cp-table tbody, .cp-table tr, .cp-table th, .cp-table td { display: block; }
  .cp-table tr { border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 12px; padding: 6px 0; background: var(--paper); }
  .cp-table th, .cp-table td { border: 0; padding: 6px 18px; }
  .cp-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
}
.cp-legacy { margin-top: 20px !important; color: var(--muted); font-size: 15px; max-width: 80ch; }

/* ── 9. цвета, толщина ── */
.cp-colors__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px -16px 0; padding: 0 16px 16px; scrollbar-width: none; }
.cp-colors__grid::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .cp-colors__grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 28px 0 0; padding: 0; overflow: visible; } }
.cp-swatch { margin: 0; scroll-snap-align: start; }
.cp-swatch picture, .cp-swatch__plain { display: block; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #0E2E6B; }
.cp-swatch__plain { background: radial-gradient(80% 80% at 30% 20%, #1D3F86, #0A1F4A); }
.cp-swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.cp-swatch:hover img { transform: scale(1.07) rotate(-1.5deg); }
.cp-swatch figcaption { padding: 12px 4px 0; font-size: 15px; }
.cp-swatch__name { display: block; font: 700 20px/1.2 var(--display); }
.cp-swatch__count { display: block; font-size: 14px; font-weight: 600; color: var(--liner); margin: 2px 0 6px; }
.cp-swatch__text { color: var(--muted); }
.cp-thick { display: grid; gap: 16px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .cp-thick { grid-template-columns: 1fr 1fr; gap: 20px; } }
.cp-thick__item { padding: 28px; border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cp-thick__layer { height: 64px; display: flex; align-items: center; margin-bottom: 18px; }
.cp-thick__layer span { display: block; width: 100%; height: calc(var(--t) * 60px); border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--liner) 0 18px, #1B82E6 18px 36px); transform-origin: left; }
.cp-thick__mm { color: var(--liner); }
.cp-thick__live { font-weight: 600; color: var(--muted); margin: 0 !important; }

/* ── 10. шаги ── */
.cp-steps { background: var(--paper); }
.cp-steps__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .cp-steps__grid { grid-template-columns: .9fr 1.1fr; gap: 72px; } .cp-steps__head { position: sticky; top: 24px; align-self: start; } }
.cp-steps__photo { margin: 24px 0 0; }
.cp-steps__photo img { width: 100%; height: auto; border-radius: 24px; display: block; }
.cp-steps__photo figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.cp-steps__list { --p: 1; position: relative; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.cp-steps__list::before, .cp-steps__list::after { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--line); }
.cp-steps__list::after { background: var(--liner); transform-origin: top; transform: scaleY(var(--p)); }
.cp-step { counter-increment: s; position: relative; padding: 0 0 36px 72px; }
.cp-step::before { content: counter(s); position: absolute; left: 0; top: -6px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font: 800 19px/1 var(--display); background: var(--paper); color: var(--liner); box-shadow: inset 0 0 0 3px var(--liner); transition: background-color .4s, color .4s; }
.cp-step.is-lit::before { background: var(--liner); color: #fff; }
.cp-step__title { font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--display); letter-spacing: -.01em; margin: 0 0 6px; }
.cp-step p { color: var(--muted); max-width: 56ch; margin: 0; }

/* ── 11. вопросы ── */
.cp-faq__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .cp-faq__grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } .cp-faq__head { position: sticky; top: 24px; align-self: start; } }
.cp-faq__search input { width: 100%; min-height: 52px; border-radius: 16px; border: 0; padding: 0 18px; font: 500 16px var(--text); box-shadow: inset 0 0 0 1.5px var(--line); background: var(--paper); }
.cp-faq__empty { margin-top: 14px !important; color: var(--muted); }
.cp-q { border-bottom: 1px solid var(--line); }
.cp-q summary { list-style: none; cursor: pointer; position: relative; padding: 20px 52px 20px 0; font: 700 clamp(17px, 1.4vw, 19px)/1.35 var(--display); }
.cp-q summary::-webkit-details-marker { display: none; }
.cp-q summary::before, .cp-q summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 2.5px; border-radius: 2px; background: var(--liner); transition: transform .35s var(--ease); }
.cp-q summary::after { transform: rotate(90deg); }
.cp-q[open] summary::after { transform: rotate(0); }
.cp-q__a { overflow: hidden; }
.cp-q__a p { color: var(--muted); max-width: 64ch; padding-bottom: 20px; margin: 0; }

/* ── 12. заявка ── */
.cp-lead { padding: clamp(64px, 9vw, 120px) 0; }
.cp-lead_page { min-height: 60vh; }
.cp-lead__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .cp-lead__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.cp-lead .cp-h2 { color: #fff; }
.cp-lead__text p { color: #BFD6E0; font-size: 18px; max-width: 46ch; }
.cp-lead__box { padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(157, 235, 243, .25); backdrop-filter: blur(6px); }
.cp-lead__form { display: grid; gap: 16px; }
.cp-field { display: grid; gap: 6px; }
.cp-field__label { font-size: 14px; font-weight: 600; color: #BFD6E0; }
.cp-field__input { min-height: 54px; border-radius: 14px; border: 0; padding: 0 16px; font: 500 17px var(--text); color: var(--ink); background: #fff; }
.cp-field__input[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--red); }
.cp-field__error, .cp-lead__error { color: #FFB4B7; font-size: 14px; font-weight: 600; }
.cp-check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #A9C6D3; }
.cp-check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--sun); }
.cp-lead__done { text-align: left; outline: none; }
.cp-lead__done-title { font: var(--display-weight) 32px/1.1 var(--display); color: #fff; }
.cp-lead__wave { width: 96px; color: var(--sun); margin-bottom: 14px; }
.cp .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cp-lead_page { color: #E8F4F8; }

/* ════ движение (только при no-preference и с .cp-js) ════ */
@media (prefers-reduced-motion: no-preference) {
  .cp-js [data-cp-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  .cp-js [data-cp-reveal].is-in { opacity: 1; transform: none; }
  .cp-js .cp-table tr[data-cp-reveal] { transform: translate3d(-16px, 0, 0); }

  /* первый экран: одна оркестрованная сцена */
  .cp-js .cp-hero__display > span { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
  .cp-js.is-ready .cp-hero__display > span { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); }
  .cp-js.is-ready .cp-hero__display > span:nth-child(2) { transition-delay: .12s; }
  .cp-js.is-ready .cp-hero__display > span:nth-child(3) { transition-delay: .24s; }
  .cp-js .cp-hero__lead, .cp-js .cp-hero__live, .cp-js .cp-hero__cta { opacity: 0; transform: translateY(16px); }
  .cp-js.is-ready .cp-hero__lead, .cp-js.is-ready .cp-hero__live, .cp-js.is-ready .cp-hero__cta { opacity: 1; transform: none; transition: opacity .8s .45s var(--ease), transform .8s .45s var(--ease); }
  .cp-js.is-ready .cp-hero__live { transition-delay: .55s; }
  .cp-js.is-ready .cp-hero__cta { transition-delay: .65s; }
  .cp-js .cp-pool__liner { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .cp-js.is-ready .cp-pool__liner { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s .2s var(--ease-water); }
  .cp-js .cp-pool__water { transform: translateY(270px); }
  .cp-js.is-ready .cp-pool__water { transform: none; transition: transform 2.2s 1.1s var(--ease-water); }
  .cp-js .cp-pool__rail { transform: translateY(-40px); opacity: 0; }
  .cp-js.is-ready .cp-pool__rail { transform: none; opacity: 1; transition: transform .7s 1.4s cubic-bezier(.3, 1.6, .5, 1), opacity .3s 1.4s; }
  .cp-js .cp-pool__note { opacity: 0; }
  .cp-js.is-ready .cp-pool__note { opacity: 1; transition: opacity .6s 2.6s; }
  .cp-js.is-ready .cp-pool__note[data-n="2"] { transition-delay: 2.9s; }
  .cp-js.is-ready .cp-pool__note[data-n="3"] { transition-delay: 3.2s; }
  .cp-pool__c1 { animation: cp-drift 14s linear infinite; }
  .cp-pool__c2 { animation: cp-drift 19s linear infinite reverse; }
  .cp-is-paused .cp-pool__c1, .cp-is-paused .cp-pool__c2, .cp-is-paused [data-cp-surface] { animation-play-state: paused; }
  [data-cp-surface] { animation: cp-wave 6s ease-in-out infinite alternate; transform-box: fill-box; }
  .cp-hero__light, .cp-picker__light { transition: transform 1.2s var(--ease); }
  .cp-pool__glint { animation: cp-glint 5s ease-in-out infinite alternate; }

  /* схема «как измерить» рисуется при появлении */
  .cp-js [data-cp-draw] .cp-m-dim { stroke-dasharray: 300; stroke-dashoffset: 300; }
  .cp-js [data-cp-draw].is-in .cp-m-dim { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s .3s var(--ease); }
  .cp-js [data-cp-draw] .cp-m-label { opacity: 0; }
  .cp-js [data-cp-draw].is-in .cp-m-label { opacity: 1; transition: opacity .6s 1.2s; }
  .cp-js [data-cp-draw] .cp-m-water { transform: scale(.2); transform-origin: center; transform-box: fill-box; }
  .cp-js [data-cp-draw].is-in .cp-m-water { transform: none; transition: transform 1.2s var(--ease-water); }

  .cp-r-tear.is-on { animation: cp-shake .5s var(--ease) 2; }
  .cp-js .cp-thick__layer span { transform: scaleX(0); }
  .cp-js .cp-thick__item.is-in .cp-thick__layer span { transform: none; transition: transform 1.1s .2s var(--ease-water); }

  .cp-js .cp-pk__pane.is-current { animation: cp-pane .55s var(--ease) both; }
  .cp-js .cp-pk__pane.is-back { animation-name: cp-pane-back; }
  .cp-pk__cards .cp-card { animation: cp-card .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .cp-hero__live b.is-tick { animation: cp-tick .6s var(--ease); }
}
@keyframes cp-drift { from { transform: translateX(0); } to { transform: translateX(-120px); } }
@keyframes cp-wave { from { transform: translateY(0) scaleY(1); } to { transform: translateY(5px) scaleY(.99); } }
@keyframes cp-shake { 0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)); } 25% { transform: translate(calc(var(--tx, 0) - 3px), var(--ty, 0)); } 75% { transform: translate(calc(var(--tx, 0) + 3px), var(--ty, 0)); } }
@keyframes cp-pane { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes cp-pane-back { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes cp-card { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cp-glint { from { opacity: .25; transform: translateX(-8px); } to { opacity: .8; transform: translateX(10px); } }
@keyframes cp-tick { 50% { color: var(--sun); } }
@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::before, .cp *::after { animation: none !important; transition: none !important; }
}

/* ════ Исправления по исследованию 17.10: крепление, замер изнутри, футы, уход, зимовка, гарантия, гид, словарик ════ */

/* словарик: термин с подсказкой при наведении, фокусе и касании */
.cp-term { position: relative; border-bottom: 1.5px dotted currentColor; cursor: help; outline-offset: 2px; }
.cp-term__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: min(280px, 78vw); padding: 10px 14px; border-radius: 12px;
  background: var(--abyss); color: #E8F4F8; font: 500 14px/1.45 var(--text); letter-spacing: 0; text-align: left; white-space: normal; text-decoration: none;
  box-shadow: 0 16px 36px -14px rgba(3, 27, 44, .7); transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  clip-path: inset(50%); transition: opacity .2s, transform .25s var(--ease); }
.cp-term:hover .cp-term__tip, .cp-term:focus .cp-term__tip, .cp-term.is-open .cp-term__tip { opacity: 1; transform: translate(-50%, 0); clip-path: none; }

/* «Для инженеров» — раскрываемый блок */
.cp-eng { margin-top: 28px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); max-width: 880px; color: var(--ink); }
.cp-eng summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 16px 20px; font: 700 16px/1.35 var(--display); }
.cp-eng summary::-webkit-details-marker { display: none; }
.cp-eng__mark { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #E7F1FC; color: var(--liner); font-size: 18px; transition: transform .3s var(--ease); }
.cp-eng[open] .cp-eng__mark { transform: rotate(90deg); }
.cp-eng__body { padding: 0 20px 18px 64px; font-size: 15px; color: var(--muted); }
.cp-eng__body p { max-width: 72ch; }
.cp-eng__src { font-size: 13px; }
@media (max-width: 600px) { .cp-eng__body { padding-left: 20px; } }
.cp-mount .cp-eng, .cp-winter .cp-eng, .cp-steps .cp-eng { background: var(--foam); }

/* крепление */
.cp-mount { background: var(--paper); }
.cp-mount__grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .cp-mount__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.cp-mount__item { padding: 24px; border-radius: 28px; background: var(--foam); box-shadow: inset 0 0 0 1px var(--line); }
.cp-mount__item p { font-size: 15px; }
.cp-mount__art { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto 12px; }
.cp-mount__rule { font-weight: 600; color: var(--ink); padding: 10px 14px; border-radius: 14px; background: #E4F5EC; }
.cp-mount__item_bead .cp-mount__rule { background: #FFF2D6; }
.cp-mount__item_unknown .cp-mount__rule { background: #E7F1FC; }
.cp-mount__who { color: var(--muted); font-size: 14px !important; margin: 0 !important; }
.cp-mt-water { fill: #49B7E6; opacity: .55; }
.cp-mt-ground { stroke: #7E9A64; stroke-width: 3; stroke-linecap: round; }
.cp-mt-wall { fill: #C3CED4; stroke: #8C9BA3; stroke-width: 1.5; }
.cp-mt-rail { fill: #E6ECEF; stroke: #8C9BA3; stroke-width: 1.5; }
.cp-mt-strip { fill: #F7FAFB; stroke: var(--muted); stroke-width: 1.5; }
.cp-mt-liner { fill: none; stroke: var(--liner); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cp-mt-dim { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.cp-mt-label { font: 600 13px var(--text); fill: var(--ink); }
.cp-mt-q { font: 800 64px var(--display); fill: var(--liner); opacity: .7; }

/* замер: новые элементы схемы */
.cp-m-dim_alt { stroke: var(--liner); }
.cp-m-ground_dug { stroke-dasharray: 8 6; }
.cp-m-sand { fill: #E8D9A8; }
.cp-m-rail { fill: #E6ECEF; stroke: #8C9BA3; stroke-width: 2; stroke-dasharray: 4 3; }
.cp-m-note { font: 500 13px var(--text); fill: var(--muted); }

/* футы ⇄ метры */
.cp-conv { display: grid; gap: 20px; padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; }
@media (min-width: 960px) { .cp-conv { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 40px; } }
.cp-conv__field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cp-conv__field input { min-height: 54px; border-radius: 14px; border: 0; padding: 0 16px; font: 600 18px var(--text); color: var(--ink); background: var(--foam); box-shadow: inset 0 0 0 1.5px var(--line); width: 100%; }
.cp-conv__field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--liner); }
.cp-conv__out { margin-top: 14px !important; font: 700 18px/1.4 var(--display); color: var(--liner); min-height: 1.4em; }
.cp-conv__tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cp-conv__t { border-collapse: collapse; font-size: 14px; width: 100%; }
.cp-conv__t caption { text-align: left; font-weight: 700; padding-bottom: 4px; }
.cp-conv__t th, .cp-conv__t td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.cp-conv__t th { color: var(--muted); }

/* правило борта: третий цвет — «встанет, но с подгибом» */
.cp-rule__verdict.is-warn { background: #FFF2D6; color: #7A4B00; }
.cp-rule__mount { margin-bottom: 4px; }

/* подборщик: пять шагов, восьмёрка, крепление */
.cp-pk__steps { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 600px) { .cp-pk__step { font-size: 12px; } .cp-pk__step b { font-size: 13px; } }
.cp-pk__shapes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 820px; }
.cp-shape svg .cp-pk-wall { fill: rgba(195, 206, 212, .5); stroke: var(--caustic); stroke-width: 2; }
.cp-shape svg .cp-pk-liner { fill: none; stroke: var(--sun); stroke-width: 4; stroke-linecap: round; }
.cp-shape svg .cp-pk-q { font: 800 40px var(--display); fill: var(--caustic); stroke: none; }
.cp-pk__note, .cp-pk__warn { color: #FFE7B0; background: rgba(255, 196, 77, .12); padding: 14px 18px; border-radius: 16px; font-size: 15px; max-width: 70ch; }
.cp-pk__note a { color: var(--sun); }
.cp-pk__warn { grid-column: 1 / -1; margin: 0 !important; }
.cp-pk__hint a { color: var(--caustic); }
.cp-card__fit { margin: 8px 0 0 !important; font-size: 13px; font-weight: 600; color: var(--green); }
.cp-card__fit_warn { color: #9A5B00; }
.cp-card__fit_check { color: var(--liner); }

/* уход: карточки-перевёртыши */
.cp-care__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 28px; }
.cp-care__card { position: relative; min-height: 180px; border: 0; padding: 0; border-radius: 24px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: transparent; perspective: 900px; }
.cp-care__front, .cp-care__back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px; border-radius: 24px;
  backface-visibility: hidden; transition: transform .6s var(--ease); }
.cp-care__front { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cp-care__back { background: var(--liner); color: #fff; font-size: 15px; line-height: 1.45; justify-content: center; transform: rotateY(180deg); }
.cp-care__card.is-flipped .cp-care__front { transform: rotateY(-180deg); }
.cp-care__card.is-flipped .cp-care__back { transform: none; }
.cp-care__value { font: 800 clamp(24px, 2.4vw, 30px)/1.1 var(--display); color: var(--liner); letter-spacing: -.02em; }
.cp-care__title { font-weight: 600; color: var(--muted); }
.cp-care__card:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.cp-care__back .cp-term { border-bottom: 0; }
.cp-care__back .cp-term__tip { display: none; }
/* без скрипта карточки не переворачиваются — показываем обе стороны */
.cp:not(.cp-js) .cp-care__card { display: grid; min-height: 0; perspective: none; cursor: default; }
.cp:not(.cp-js) .cp-care__front, .cp:not(.cp-js) .cp-care__back { position: static; transform: none; backface-visibility: visible; }
.cp:not(.cp-js) .cp-care__front { border-radius: 24px 24px 0 0; }
.cp:not(.cp-js) .cp-care__back { border-radius: 0 0 24px 24px; }

/* зимовка и гарантия */
.cp-winter { background: var(--paper); }
.cp-winter__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .cp-winter__grid { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } }
.cp-check-list { list-style: none; margin: 24px 0 0; padding: 0; }
.cp-check-list li { border-bottom: 1px solid var(--line); }
.cp-check-list label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; cursor: pointer; }
.cp-check-list input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--liner); }
.cp-check-list input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(22, 115, 208, .5); }
.cp-winter__note { margin-top: 16px !important; font-size: 15px; color: var(--muted); }
.cp-winter__done { font-weight: 700; color: var(--green); }
.cp-warranty { padding: clamp(22px, 3vw, 32px); border-radius: 28px; background: var(--foam); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.cp-warranty__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.cp-warranty__cols ul { list-style: none; margin: 0; padding: 0; }
.cp-warranty__cols li { position: relative; padding: 6px 0 6px 28px; font-weight: 600; }
.cp-warranty__cols li::before { position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; line-height: 1; color: #fff; }
.cp-warranty__yes li::before { content: "✓"; background: var(--green); }
.cp-warranty__no li::before { content: "×"; background: var(--red); }
.cp-warranty p { color: var(--muted); margin: 0; }

/* гид по подбору */
.cp-guide__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .cp-guide__list { grid-template-columns: 1fr 1fr; gap: 14px 24px; } }
.cp-guide__item { position: relative; padding: 18px 20px 18px 74px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cp-guide__n { position: absolute; left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 800 18px/1 var(--display); background: var(--liner); color: #fff; }
.cp-guide__title { font: 700 18px/1.3 var(--display); margin: 0 0 4px; }
.cp-guide__item p { margin: 0; color: var(--muted); font-size: 15px; }
.cp-guide__cta { margin-top: 28px !important; }

.cp-steps__col { min-width: 0; }

@media (prefers-reduced-motion: no-preference) {
  .cp-js .cp-guide__item[data-cp-reveal] { transform: translate3d(0, 18px, 0) scale(.98); }
  .cp-js .cp-mount__item.is-in .cp-mt-liner { stroke-dasharray: 300; animation: cp-draw 1.4s .2s var(--ease) both; }
}
@keyframes cp-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.cp-shape:has(input:checked) svg .cp-pk-liner { fill: none; } .cp-shape:has(input:checked) svg .cp-pk-q { fill: #fff; stroke: none; }
.cp-conv__tables { align-items: start; } .cp-eng + .cp-rule { margin-top: 40px; }