/* ═══════════════════════════════════════════════════════════════════════════ /test4 — кандидат страницы «Тарифы» ВСЯ СТРАНИЦА ОБЁРНУТА В .p-tarify, И КАЖДЫЙ СЕЛЕКТОР НИЖЕ НАЧИНАЕТСЯ С НЕГО. Это не стиль оформления, а способ разобраться с коллизиями имён — и здесь он другой, чем на /test3. Почему не восстановление значений последним словом, как там. Живая страница /tarify уже есть, и landing.css несёт для неё ПОЛНЫЙ словарь тарифов: .plan, .plan-name, .plan-price, .impl, .impl-price, .yes, .no. Макет называет свои блоки ровно так же, но рисует другое. Пересечений четырнадцать, и сайт задаёт в них 47 свойств, которых у макета нет: .nav 9 position, background, backdrop-filter, border-bottom, … .btn 6 font-family, font-size, line-height, text-align, flex, margin .plan-price 5 align-items, font-weight, gap, letter-spacing, margin .yes / .no 3 height, width, vertical-align (на svg) .section-head 3 text-align, margin-left, margin-top ещё девять 2–3 каждая 47 объявлений в ручном восстановлении — уже не поддерживается. И главное: восстановление закрывает только то, что сайт объявляет СЕГОДНЯ. Добавят свойство в landing.css .plan через месяц — оно молча протечёт на страницу, которую никто не смотрит. Ровно так .statement-text отдал белый текст на белом фоне: правило существовало всегда, увидели его через два дня. Обёртка поднимает специфичность один раз для всего файла: (0,2,0) против (0,1,0) у сайта. Разметку макета переименовывать не пришлось. ЧТО ВЫНЕСЕНО ИЗ ГЛОБАЛЬНОГО В ОБЁРТКУ отдельно: :root макета (его --bg совпадает по имени с токеном сайта) и правило body — оно задавало font-family, кегль, интерлиньяж и цвет всему документу, а настоящий подвал лежит ЗА обёрткой и должен остаться сайтовым. Глобальным оставлено одно правило: html{scroll-behavior:smooth}. Нарисованного интерфейса продукта на этой странице нет — карточки, таблица сравнения и текст, — поэтому product-ui.css здесь не подключается. ═══════════════════════════════════════════════════════════════════════════ */ /* Токены — в candidate.css на .p-cand (класс на ). Собственного блока у страницы больше нет: он затенял бы общий словарь. Обёртка .p-tarify остаётся — она нужна против занятых сайтом имён, а не ради токенов. */ .p-tarify .btn{font-family: inherit; font-size: inherit; line-height: inherit; white-space: inherit} .p-tarify .hero{overflow: initial; position: initial} .p-tarify .impl{transition: initial} .p-tarify .impl-price{color: inherit; margin-top: initial} .p-tarify .plan{transition: initial} .p-tarify .plan-name{color: inherit; font-size: inherit} .p-tarify .plan-price{align-items: initial; gap: initial; margin: initial} .p-tarify .section-head{margin: initial; max-width: initial; text-align: inherit} .p-tarify, .p-tarify *{box-sizing:border-box} html{scroll-behavior:smooth} .p-tarify{margin:0;background:#fff;color:var(--c-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:var(--c-fs-body);line-height:1.55;-webkit-font-smoothing:antialiased} .p-tarify a{text-decoration:none;color:inherit} .p-tarify button{font:inherit} .p-tarify svg{display:block} .p-tarify .soft{background:var(--c-soft)} .p-tarify .btn{height:50px;border-radius:var(--c-r-control);border:1px solid #d8d1c8;background:#fff;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;gap:8px;cursor:pointer;transition:.2s} .p-tarify .btn-orange{background:var(--c-accent);border-color:var(--c-accent);color:#fff} .p-tarify .btn:hover{transform:translateY(-1px)} .p-tarify .crumbs{font-size:14px;color:#8a837c;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .p-tarify .crumbs a{color:#645e57} .p-tarify .crumbs i{font-style:normal;color:#b7b0a8} .p-tarify .hero{padding:58px 0 48px} .p-tarify .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:end} .p-tarify .hero h1{font-size:var(--c-fs-h1);line-height:var(--c-lh-h1);letter-spacing:var(--c-ls-h1);font-weight:600;margin:28px 0 20px;max-width:900px} .p-tarify .hero p{font-size:18px;line-height:1.6;color:var(--c-muted);max-width:760px;margin:0} .p-tarify .hero-side{display:none} .p-tarify .billing{margin-top:34px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .p-tarify .billing-switch{display:inline-flex;align-items:center;gap:10px} .p-tarify .billing-label{border:0;background:transparent;padding:0;cursor:pointer;color:#8b847d;font-weight:500} .p-tarify .billing-label.active{color:var(--c-ink);font-weight:600} .p-tarify .billing-toggle{width:42px;height:24px;border:0;border-radius:999px;background:var(--c-soft-2);padding:3px;cursor:pointer;transition:.2s;position:relative} .p-tarify .billing-toggle span{display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:.2s} .p-tarify .billing-toggle.year{background:var(--c-accent)} .p-tarify .billing-toggle.year span{transform:translateX(18px)} .p-tarify .gift{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:var(--c-green-soft);color:#197a5c;font-size:12px;font-weight:600} .p-tarify .gift:before{content:none} .p-tarify .pricing-wrap{padding:28px 0 92px} .p-tarify .pricing-hint{margin:22px 0 0;max-width:940px;color:var(--c-muted);font-size:16px;line-height:1.6} .p-tarify .pricing-hint strong{color:var(--c-ink);font-weight:600} .p-tarify .pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch} .p-tarify .plan{border:1px solid var(--c-line);border-radius:var(--c-r-card);padding:26px;display:flex;flex-direction:column;min-height:560px;background:#fff;position:relative} .p-tarify .plan.popular{border:2px solid var(--c-accent);padding:25px} .p-tarify .popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--c-accent);color:#fff;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap} .p-tarify .plan h3{font-size:var(--c-fs-h3);line-height:var(--c-lh-h3);letter-spacing:var(--c-ls-h3);margin:0 0 18px} .p-tarify .price{font-size:42px;line-height:.98;letter-spacing:-.05em;font-weight:600} .p-tarify .price small{font-size:18px;letter-spacing:-.02em} .p-tarify .price-note{color:var(--c-muted);font-size:13px;min-height:42px;margin-top:8px} .p-tarify .plan .btn{margin-top:20px;width:100%} .p-tarify .plan ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px} .p-tarify .plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px} .p-tarify .plan li:before{content:"✓";width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent);font-size:12px;font-weight:700} .p-tarify .plan-foot{margin-top:auto;padding-top:22px} .p-tarify .plan-foot a{color:var(--c-accent);font-weight:600} .p-tarify .corporate{margin-top:16px;background:#171717;color:#fff;border-radius:var(--c-r-panel);padding:28px 30px;display:grid;grid-template-columns:1.1fr 1fr auto;gap:34px;align-items:center} .p-tarify .corporate h3{font-size:var(--c-fs-h3);line-height:var(--c-lh-h3);letter-spacing:var(--c-ls-h3);margin:0 0 8px} .p-tarify .corporate p{margin:0;color:#c9c4bd} .p-tarify .corp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 18px} .p-tarify .corp-list span{font-size:14px;color:#ece9e5} .p-tarify .corp-list span:before{content:"✓";color:#ff6c31;margin-right:8px} .p-tarify .corporate .btn{white-space:nowrap} .p-tarify .section-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--c-head-gap);align-items:start;margin-bottom:54px} .p-tarify .section-head h2{font-size:var(--c-fs-h2);line-height:var(--c-lh-h2);letter-spacing:var(--c-ls-h2);margin:0;font-weight:600;max-width:760px} .p-tarify .section-head p{font-size:18px;line-height:1.62;color:var(--c-muted);margin:0;padding-top:38px} .p-tarify .compare-shell{border:1px solid var(--c-line);border-radius:var(--c-r-panel);overflow:auto;background:#fff} .p-tarify .compare{width:100%;border-collapse:collapse;min-width:980px} .p-tarify .compare th, .p-tarify .compare td{padding:15px 18px;border-bottom:1px solid var(--c-line);text-align:center;font-size:14px} .p-tarify .compare th:first-child, .p-tarify .compare td:first-child{text-align:left} .p-tarify .compare thead th{position:sticky;top:0;background:#fff;z-index:1} .p-tarify .compare thead th{font-size:15px} .p-tarify .compare .group td{background:var(--c-soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#6e675f} .p-tarify .yes{color:var(--c-green);font-weight:700} .p-tarify .no{color:#b4ada5} .p-tarify .plan-name{display:block;font-weight:700} .p-tarify .plan-price{display:block;font-size:12px;color:var(--c-muted);margin-top:2px} .p-tarify .launch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .p-tarify .launch-step{padding:28px;border:1px solid var(--c-line);border-radius:var(--c-r-card);background:#fff;min-height:210px} .p-tarify .launch-num{font-size:12px;color:var(--c-accent);font-weight:700;letter-spacing:.12em} .p-tarify .launch-step h3{font-size:var(--c-fs-h4);line-height:var(--c-lh-h4);letter-spacing:var(--c-ls-h4);margin:12px 0 8px} .p-tarify .launch-step p{margin:0;color:var(--c-muted)} .p-tarify .launch-cta{margin-top:26px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .p-tarify .launch-cta span{color:var(--c-muted)} .p-tarify .launch-cta a{color:var(--c-accent);font-weight:600} .p-tarify .implementation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .p-tarify .impl{border:1px solid var(--c-line);border-radius:var(--c-r-card);padding:32px 28px 28px;display:flex;flex-direction:column;min-height:500px;background:#fff;position:relative} .p-tarify .impl.recommended{border:2px solid var(--c-accent);padding:31px 27px 27px;box-shadow:0 18px 52px rgba(252,64,0,.06)} .p-tarify .impl-tag{display:none} .p-tarify .impl.recommended .impl-tag{display:block;position:absolute;top:-12px;left:28px;background:var(--c-accent);color:#fff;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;line-height:1;white-space:nowrap} .p-tarify .impl h3{font-size:var(--c-fs-h3);line-height:var(--c-lh-h3);letter-spacing:var(--c-ls-h3);margin:0 0 6px} .p-tarify .impl-price{font-size:30px;font-weight:600;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .p-tarify .impl-price .old-price{font-size:18px;color:var(--c-muted-2);font-weight:500;text-decoration:line-through;text-decoration-thickness:1.5px} .p-tarify .impl-price .free-price{color:var(--c-green)} .p-tarify .impl-offer{display:inline-flex;align-items:center;width:max-content;margin-top:10px;padding:6px 10px;border-radius:999px;background:var(--c-green-soft);color:#197a5c;font-size:12px;font-weight:600} .p-tarify .impl p{color:var(--c-muted);margin:12px 0 0} .p-tarify .impl ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:10px} .p-tarify .impl li{font-size:14px} .p-tarify .impl li:before{content:"✓";color:var(--c-accent);margin-right:8px} .p-tarify .impl .btn{margin-top:auto;width:max-content} .p-tarify .faq-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:90px;align-items:start} .p-tarify .faq-left h2{font-size:var(--c-fs-h2);line-height:var(--c-lh-h2);letter-spacing:var(--c-ls-h2);margin:0} .p-tarify .faq-left>p{font-size:18px;color:var(--c-muted);max-width:430px} .p-tarify .faq-list details{border-bottom:1px solid var(--c-line);padding:22px 0} .p-tarify .faq-list summary{cursor:pointer;font-size:21px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px} .p-tarify .faq-list summary:after{content:"+";font-size:23px;font-weight:400} .p-tarify .faq-list details[open] summary:after{content:"−"} .p-tarify .faq-list p{font-size:16px;color:var(--c-muted);max-width:780px;margin:14px 0 0} .p-tarify .faq-help{margin-top:30px;padding:24px;background:var(--c-soft);border-radius:var(--c-r-card)} .p-tarify .faq-help h3{font-size:var(--c-fs-h4);line-height:var(--c-lh-h4);letter-spacing:var(--c-ls-h4);margin:0 0 7px} .p-tarify .faq-help p{margin:0;color:var(--c-muted)} .p-tarify .faq-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .p-tarify .final{padding:var(--c-section) 0;text-align:center} .p-tarify .final h2{font-size:var(--c-fs-h2);line-height:var(--c-lh-h2);letter-spacing:var(--c-ls-h2);max-width:920px;margin:0 auto} .p-tarify .final p{font-size:18px;color:var(--c-muted);margin:20px auto 0} .p-tarify .final-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px} @media (max-width:1180px){ .p-tarify .pricing-grid{grid-template-columns:repeat(2,1fr)} .p-tarify .corporate{grid-template-columns:1fr} .p-tarify .launch-grid{grid-template-columns:repeat(2,1fr)} .p-tarify .implementation-grid{grid-template-columns:1fr 1fr} .p-tarify .hero-grid, .p-tarify .section-head, .p-tarify .faq-grid{grid-template-columns:1fr;gap:30px} .p-tarify .section-head p{padding-top:0} .p-tarify .hero-side{padding-bottom:0} } @media (max-width:900px){ .p-tarify .hero{padding:36px 0 34px} .p-tarify .hero h1{margin-top:22px} .p-tarify .hero p, .p-tarify .hero-side p{font-size:16px} .p-tarify .pricing-wrap{padding-top:16px} .p-tarify .pricing-grid{grid-template-columns:1fr} .p-tarify .plan{min-height:auto} .p-tarify .corporate{padding:24px} .p-tarify .corp-list{grid-template-columns:1fr} .p-tarify .section-head{margin-bottom:36px} .p-tarify .launch-grid, .p-tarify .implementation-grid{grid-template-columns:1fr} .p-tarify .launch-step{border-left:1px solid var(--c-line);border-right:1px solid var(--c-line)} .p-tarify .compare-shell{margin-right:-12px} .p-tarify .faq-list summary{font-size:18px} } @media (max-width:480px){ .p-tarify .billing{align-items:flex-start} .p-tarify .billing-switch{width:100%;justify-content:flex-start} .p-tarify .gift{width:max-content} .p-tarify .price{font-size:38px} } @media (max-width:640px){ .p-tarify .crumbs a, .p-tarify .launch-cta a, .p-tarify .pricing-hint a, .p-tarify .corp-list a{display: inline-flex; align-items: center; min-height: 44px} } .p-tarify .section-head > *, .p-tarify .hero-grid > *, .p-tarify .pricing-grid > *, .p-tarify .implementation-grid > *, .p-tarify .launch-grid > *, .p-tarify .faq-grid > *{min-width: 0} @media (max-width:640px){ .p-tarify .billing-label{display: inline-flex; align-items: center; min-height: 44px} } @media (max-width:480px){ .p-tarify .impl-price{white-space: normal; overflow-wrap: anywhere} } /* ── Связи с другими функциями ──────────────────────────────────────────── Восстанавливает содержательный блок, который был на живом /tarify (xlink- grid: шесть карточек к соседним функциям) и отсутствовал у кандидата — единственная причина, по которой /test4 короче страницы, которую заменяет. Стиль — по образцу уже существующего .launch-step, а не новый язык. */ .p-tarify .xlink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px} .p-tarify .xlink-card{padding:24px;border:1px solid var(--c-line);border-radius:var(--c-r-card);background:#fff;display:flex;flex-direction:column;min-height:150px} .p-tarify .xlink-card h3{font-size:var(--c-fs-h4);line-height:var(--c-lh-h4);letter-spacing:var(--c-ls-h4);margin:0 0 8px} .p-tarify .xlink-card p{margin:0;color:var(--c-muted);font-size:15px;line-height:1.55} .p-tarify .xlink-more{margin-top:auto;padding-top:14px;color:var(--c-accent);font-weight:600;font-size:15px} @media (max-width:1180px){.p-tarify .xlink-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.p-tarify .xlink-grid{grid-template-columns:1fr}.p-tarify .xlink-more{display:inline-flex;align-items:center;min-height:44px}}