/* Marketing Check-up. Режим брендбука B2B Offer: Concrete ~60%, Cream ~30%, Red Silk до 10%.
   Поверх /assets/seo-pages.css, общий файл не меняем. */

.cu-accent{color:var(--red)}
.cu-nb{white-space:nowrap}
.cu-num,.cu-facts strong,.cu-stat strong,.cu-price__sum{font-family:'Anybody','Unbounded',sans-serif;font-weight:900;line-height:1;letter-spacing:-.01em}

/* Секции */
.cu-section{padding:var(--space-xl) 0}
.cu-section--dark{background:var(--dark);color:var(--cream)}
.cu-section--dark .label{color:var(--gold)}
.cu-head{margin-bottom:var(--space-lg)}
.cu-head h2{max-width:20ch;margin-bottom:0}

/* Кнопка: острый срез, фокус внутренней рамкой (clip-path режет outline) */
.cu-cta{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:3.25rem;padding:1em 2.2em 1em 1.8em;background:var(--red);color:var(--cream);font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--text-sm);letter-spacing:.02em;line-height:1.2;text-transform:uppercase;text-decoration:none;text-align:center;clip-path:polygon(0 0,100% 0,100% 82%,88% 100%,0 100%);transition:background .2s,transform .15s}
.cu-cta::after{content:'→';font-family:'Fragment Mono',monospace;font-weight:400}
.cu-cta:hover{background:var(--red-hover);transform:translateY(-1px)}
.cu-cta:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--gold)}
.cu-note{margin-top:.8rem;font-family:'Fragment Mono',monospace;font-size:var(--text-xs);color:rgba(245,240,230,.62)}
.cu-note--credit{margin-top:.35rem;color:var(--gold)}
.cu-jump{display:flex;flex-wrap:wrap;gap:.35rem 1.75rem;margin-top:1.35rem;font-family:'Fragment Mono',monospace;font-size:var(--text-xs)}
.cu-jump a{color:rgba(245,240,230,.7);text-decoration:none;border-bottom:1px solid rgba(245,240,230,.28);padding-bottom:.15rem}
.cu-jump a:hover{color:var(--cream);border-bottom-color:var(--red)}
.cu-section,.cu-hero{scroll-margin-top:5rem}

/* 1. Hero: type-only manifesto */
.cu-hero{padding:clamp(3rem,2rem + 5vw,7rem) 0 clamp(3rem,2rem + 4vw,6rem)}
.cu-hero h1{font-weight:900;font-size:clamp(2.1rem,1rem + 4.7vw,5.4rem);line-height:1.04;max-width:17ch;margin-bottom:var(--space-lg)}
.cu-hero__row{display:grid;gap:var(--space-lg)}
.cu-hero .lead{color:rgba(245,240,230,.82);max-width:36rem}
.cu-facts{list-style:none;border-top:1px solid rgba(245,240,230,.16)}
.cu-facts li{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;align-items:baseline;gap:1.25rem;padding:1rem 0;border-bottom:1px solid rgba(245,240,230,.16)}
.cu-facts strong{font-size:clamp(1.65rem,1.2rem + 1.5vw,2.6rem);color:var(--cream);white-space:nowrap}
.cu-facts li:nth-child(1) strong{font-stretch:115%}
.cu-facts li:nth-child(2) strong{font-stretch:80%}
.cu-facts li:nth-child(3) strong{font-stretch:125%;color:var(--red)}
.cu-facts li > span{font-family:'Fragment Mono',monospace;font-size:var(--text-xs);color:rgba(245,240,230,.7)}
.cu-by{margin-top:var(--space-md);font-family:'Fragment Mono',monospace;font-size:var(--text-xs);color:rgba(245,240,230,.58)}
.cu-by::before{content:'// '}
@media (min-width:880px){.cu-hero__row{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;column-gap:clamp(3rem,6vw,7rem)}}

/* 2. Боли: карта ситуаций, вторая колонка смещена */
.cu-pains{list-style:none;display:grid;gap:var(--space-lg)}
.cu-pain{border-top:3px solid var(--dark);padding-top:var(--space-sm)}
.cu-pain h3{font-size:var(--text-xl);font-weight:700;max-width:14ch;margin-bottom:.7rem}
.cu-pain p{color:var(--grey);max-width:30rem}
.cu-why{margin-top:1rem;font-family:'Fragment Mono',monospace;font-size:var(--text-xs);line-height:1.55;color:var(--red);max-width:30rem}
.cu-why::before{content:'// '}
@media (min-width:800px){.cu-pains{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,6vw,6rem)}.cu-pain:nth-child(even){margin-top:var(--space-lg)}}

/* 3. Что разбираем: пять шагов */
.cu-intro{max-width:46rem;margin-bottom:var(--space-lg)}
.cu-intro p{color:rgba(245,240,230,.78);font-size:var(--text-lg);margin-bottom:1rem}
.cu-intro p:first-child{color:var(--cream);font-weight:400;font-size:var(--text-xl);line-height:1.45;border-left:4px solid var(--red);padding-left:1.1rem}
.cu-steps{list-style:none;border-top:1px solid rgba(245,240,230,.16)}
.cu-step{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.35rem 1.1rem;padding:1.4rem 0;border-bottom:1px solid rgba(245,240,230,.16)}
.cu-step .cu-num{grid-row:span 2;font-size:clamp(2.2rem,1.6rem + 2vw,3.6rem);color:var(--red)}
.cu-step:nth-child(odd) .cu-num{font-stretch:125%}
.cu-step:nth-child(even) .cu-num{font-stretch:80%}
.cu-step h3{font-size:var(--text-lg);margin:0;align-self:end}
.cu-step p{grid-column:2;color:rgba(245,240,230,.75)}
.cu-total{margin-top:var(--space-md);max-width:46rem;font-family:'Fragment Mono',monospace;font-size:var(--text-sm);line-height:1.6;color:var(--gold)}
@media (min-width:800px){.cu-step{grid-template-columns:7.5rem minmax(0,.9fr) minmax(0,1.3fr);align-items:baseline;column-gap:2rem}.cu-step .cu-num{grid-row:auto}.cu-step h3{align-self:baseline}.cu-step p{grid-column:3}}

/* 4. Как проходит: лента шагов */
.cu-timeline{list-style:none;display:grid;gap:var(--space-md)}
.cu-tl{position:relative;padding-left:2.3rem}
.cu-tl::before{content:'';position:absolute;left:.45rem;top:1.2rem;bottom:calc(-1 * var(--space-md));width:2px;background:rgba(26,26,26,.16)}
.cu-tl:last-child::before{display:none}
.cu-tl::after{content:'';position:absolute;left:0;top:.2rem;width:1rem;height:1rem;background:var(--red);clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
.cu-tl__label{font-family:'Fragment Mono',monospace;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.cu-tl h3{font-size:var(--text-lg);margin:.35rem 0 .55rem}
.cu-tl p{color:var(--grey)}
.cu-aside{margin-top:.9rem;padding:.7rem .85rem;background:rgba(212,165,116,.24);font-family:'Fragment Mono',monospace;font-size:var(--text-xs);line-height:1.55;color:var(--dark)}
@media (min-width:980px){.cu-timeline{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2rem}.cu-tl{padding:2.2rem 0 0}.cu-tl::before{left:1.4rem;right:-2rem;top:.45rem;bottom:auto;width:auto;height:2px}.cu-tl:last-child::before{display:block;right:0}.cu-tl::after{top:0}}

/* 5. Кто проводит */
.cu-kto{display:grid;gap:var(--space-lg)}
.cu-photo{display:block;max-width:24rem}
.cu-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;filter:contrast(1.05)}
.cu-kto h2{max-width:18ch}
.cu-kto p{color:rgba(245,240,230,.8);max-width:40rem;margin-bottom:1rem}
.cu-stats{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1.6rem 1.25rem;margin:var(--space-md) 0;padding-top:var(--space-md);border-top:1px solid rgba(245,240,230,.16)}
.cu-stat strong{display:block;font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);color:var(--cream);margin-bottom:.4rem;font-stretch:100%}
.cu-stat:nth-child(2) strong{font-stretch:110%;color:var(--red)}
.cu-stat:nth-child(4) strong{font-stretch:90%}
.cu-stat span{display:block;font-family:'Fragment Mono',monospace;font-size:var(--text-xs);line-height:1.5;color:rgba(245,240,230,.66)}
.cu-more{font-family:'Fragment Mono',monospace;font-size:var(--text-sm);color:var(--gold);text-decoration:none}
.cu-more::after{content:' →'}
.cu-more:hover{text-decoration:underline;text-underline-offset:.2em}
@media (min-width:880px){.cu-kto{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start;column-gap:clamp(3rem,6vw,6rem)}.cu-photo{max-width:none;position:sticky;top:6rem}.cu-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-stat strong{font-size:clamp(1.5rem,.9rem + .9vw,2rem)}}

/* 6. Что на руках и цена */
.cu-offer{display:grid;gap:var(--space-lg)}
.cu-plan{list-style:none;margin:var(--space-md) 0;border-top:1px solid var(--line)}
.cu-plan li{position:relative;padding:.85rem 0 .85rem 1.9rem;border-bottom:1px solid var(--line)}
.cu-plan li::before{content:'→';position:absolute;left:0;top:.85rem;font-family:'Fragment Mono',monospace;color:var(--red)}
.cu-wink{color:var(--grey);max-width:36rem}
.cu-price{background:var(--dark);color:var(--cream);padding:var(--space-md) var(--space-md) calc(var(--space-md) + 1.75rem);clip-path:polygon(0 0,100% 0,100% calc(100% - 2.75rem),calc(100% - 2.75rem) 100%,0 100%)}
.cu-price__sum{display:block;font-size:clamp(3rem,2.2rem + 3vw,4.8rem);font-stretch:120%;color:var(--cream);margin:.4rem 0 1rem}
.cu-price p{color:rgba(245,240,230,.78);margin-bottom:1rem}
.cu-price .cu-cta{width:100%;margin-top:.5rem}
.cu-layers{list-style:none;margin-top:var(--space-lg);border-top:2px solid var(--dark)}
.cu-layers li{display:grid;gap:.35rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.cu-layers b{font-family:'Fragment Mono',monospace;font-weight:400;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.cu-layers p{color:var(--dark);max-width:48rem}
@media (min-width:880px){.cu-offer{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;column-gap:clamp(3rem,6vw,6rem)}.cu-layers li{grid-template-columns:11rem minmax(0,1fr);align-items:baseline}}

/* 7. Кому не подходит */
.cu-notfor{list-style:none;display:grid;border-top:1px solid rgba(245,240,230,.16)}
.cu-notfor li{position:relative;padding:1.35rem 0 1.35rem 2.2rem;border-bottom:1px solid rgba(245,240,230,.16)}
.cu-notfor li::before{content:'✕';position:absolute;left:0;top:1.3rem;font-family:'Fragment Mono',monospace;color:var(--gold)}
.cu-notfor h3{font-size:var(--text-base);line-height:1.35;margin-bottom:.5rem}
.cu-notfor p{color:rgba(245,240,230,.75)}
.cu-notfor a{display:inline-block;margin-top:.55rem;font-family:'Fragment Mono',monospace;font-size:var(--text-sm);color:var(--gold);text-underline-offset:.2em}
.cu-notfor a::after{content:' →'}
@media (min-width:800px){.cu-notfor{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,6vw,6rem)}}

/* 8. Вопросы */
.cu-faq{max-width:52rem;border-top:2px solid var(--dark)}
.cu-faq details{border-bottom:1px solid var(--line)}
.cu-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:1.25rem;padding:1.2rem 0;cursor:pointer;list-style:none;font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--text-base);line-height:1.35;text-transform:uppercase}
.cu-faq summary::-webkit-details-marker{display:none}
.cu-faq summary::after{content:'↘';flex-shrink:0;font-family:'Fragment Mono',monospace;font-size:1.35em;line-height:1;color:var(--red);transition:transform .2s}
.cu-faq details[open] summary::after{transform:rotate(-90deg)}
.cu-faq summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.cu-faq details p{max-width:44rem;padding:0 0 1.3rem;color:var(--grey)}

/* 9. Финал */
.cu-final h2{max-width:18ch}
.cu-final ol{list-style:none;display:grid;gap:1.1rem;max-width:44rem;margin:var(--space-md) 0 var(--space-lg)}
.cu-final li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;align-items:baseline;color:rgba(245,240,230,.85)}
.cu-final li .cu-num{font-size:2.1rem;color:var(--red)}
.cu-small{margin-top:1rem;font-family:'Fragment Mono',monospace;font-size:var(--text-xs);color:rgba(245,240,230,.6)}

/* Липкая кнопка, только мобильный */
.cu-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;padding:.7rem 5%;background:rgba(26,26,26,.96);border-top:1px solid rgba(245,240,230,.12)}
.cu-sticky .cu-cta{width:100%}
.cu-sticky[hidden]{display:none!important}

/* Уточнения каскада: правила «.блок p» перебивают одиночные классы */
.cu-pain .cu-why{color:var(--red)}
.cu-price .label{color:var(--gold)}
.cu-tl__label::before,.cu-aside::before{content:'// '}
.cu-kto p a,.cu-layers a{color:inherit;text-decoration-color:var(--red);text-underline-offset:.2em}
.cu-kto p a:hover,.cu-layers a:hover{color:var(--red)}

@media (max-width:640px){.cu-hero .cu-cta,.cu-final .cu-cta{width:100%}.cu-hero h1{max-width:none}}
/* Узкий экран: широкие начертания Anybody не помещаются в колонки */
@media (max-width:640px){
.cu-facts li{grid-template-columns:auto minmax(0,1fr);gap:.9rem}
.cu-facts strong{font-size:1.5rem}
.cu-facts li:nth-child(1) strong,.cu-facts li:nth-child(2) strong,.cu-facts li:nth-child(3) strong{font-stretch:100%}
.cu-stats{gap:1.3rem 1rem}
.cu-stat strong{font-size:1.5rem}
.cu-stat:nth-child(2) strong,.cu-stat:nth-child(4) strong{font-stretch:100%}
.cu-step{grid-template-columns:3.4rem minmax(0,1fr);column-gap:.9rem}
.cu-step h3{font-size:var(--text-base)}
.cu-price__sum{font-stretch:100%}
}
@media (min-width:800px){.cu-sticky{display:none!important}}
@media (prefers-reduced-motion:reduce){.cu-cta,.cu-faq summary::after{transition:none}.cu-cta:hover{transform:none}}