/* ============================================================================
 * Лендинг для новых MC authority — /service/new-authority-owner-operator-jobs/
 * Спека: aramis/specs/porthos-ej-new-mc-landing-2026-08-18.md
 *
 * Источник — CSS макета Елены (source-elena-dm6452.html, sha256 d91b068c…).
 * Значения перенесены как есть; изменено ровно три вещи:
 *   1) весь файл заведён под .ej-newmc — макет писался как standalone и его
 *      body/section/h2/.btn затоптали бы шапку и подвал темы (D1);
 *   2) добавлены .snap-grid и .t-grid в @media (max-width:820px) — дефект
 *      макета, scrollWidth 485 при вьюпорте 430/390/360 (D3);
 *   3) scroll-margin-top у #how-it-works — в макете липкой шапки нет (D5).
 * Плюс блок для Select2: селекты темы переводит в свой виджет штатный
 * form-scripts.js (jQuery('select:visible')), поэтому закрытый контрол
 * приводится к виду из макета.
 *
 * Файл ставится в очередь ТОЛЬКО на этом шаблоне (mu-plugins/ej-new-mc-landing.php).
 * ========================================================================== */

.ej-newmc{
  --navy:#151B63;
  --navy-deep:#151B63;
  --red:#D62839;
  --red-dark:#A81E2C;
  --bg:#F6F5F1;
  --white:#FFFFFF;
  --ink:#1B2430;
  --slate:#5B6472;
  --line:#E4E2DA;
  --font-display:'Instrument Sans',sans-serif;
  --font-body:'Instrument Sans',sans-serif;
  font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6;
}
.ej-newmc *{box-sizing:border-box; margin:0; padding:0;}
.ej-newmc img{max-width:100%; display:block;}
.ej-newmc .wrap{max-width:90rem; margin:0 auto; padding:0 24px;}
@media (min-width:1281px){ .ej-newmc .wrap{ padding:0 4.375rem; } }
.ej-newmc h1,.ej-newmc h2,.ej-newmc h3{font-family:var(--font-display); text-transform:none; letter-spacing:0; line-height:1.2; font-weight:bold;}  /* тема ставит 600, на макете дефолтный bold; капс снят 29.08 — спека v2 §14 (DM 8010) */
.ej-newmc a{color:inherit;}
.ej-newmc .btn{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:0.04em; font-weight:600; font-size:15px; padding:16px 32px;
  border-radius:2px; cursor:pointer; border:none; text-align:center; text-decoration:none;
  line-height:1.47; /* было normal. 1.47 — это собственная normal-пропорция Oswald
                       (замер: 1.4667 при 15px, 1.4706 при 17px), то есть ровно то число,
                       которое даёт сегодняшние 54 / 61 / 65. У Instrument Sans normal
                       короче, и без пина ВСЕ кнопки страницы теряют по 5px, включая
                       согласованную с Леной кнопку 54px (§16). */
}
.ej-newmc .btn-red{background:var(--red); color:var(--white);}
.ej-newmc .btn-red:hover{background:var(--red-dark);}
.ej-newmc .btn-outline{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.4);}
.ej-newmc .btn-call{
  display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,0.4); font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:0.04em; font-weight:600; font-size:15px; padding:16px 28px; border-radius:2px;
  text-decoration:none; min-height:44px; box-sizing:border-box;
}
.ej-newmc .btn-call:hover{border-color:rgba(255,255,255,0.7);}
.ej-newmc .btn-call .ico{width:16px; height:16px; flex-shrink:0;}

/* ===== HERO ===== */
.ej-newmc .hero{background:var(--navy); color:var(--white); padding:72px 0 0;}
.ej-newmc .hero-inner{display:grid; grid-template-columns:1fr; gap:20px; padding-bottom:56px;}
.ej-newmc .eyebrow{font-family:var(--font-display); font-size:13px; letter-spacing:0.14em; color:var(--red); text-transform:uppercase; margin-bottom:18px;}
.ej-newmc .hero h1{font-size:44px; max-width:760px; margin-bottom:24px;} /* 24, не 20: инлайновая .hl выступает под бокс h1 на 10.81px (padding-bottom 7 + inset-тень 6), при 20 зазор до p.sub был 9.19 при норме >12 — приёмка Aramis 29.08, п.21 */
.ej-newmc .hero h1 .hl{color:var(--red);}
.ej-newmc .hero p.sub{font-family:var(--font-body); font-size:18px; color:rgba(255,255,255,0.78); max-width:560px; margin-bottom:32px; text-transform:none; letter-spacing:normal;}
.ej-newmc .hero-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.ej-newmc .link{display:inline-block; font-size:14px; color:rgba(255,255,255,0.65); text-decoration:underline; text-underline-offset:3px;}

.ej-newmc .stat-bar{background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08);}
.ej-newmc .stat-bar .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:28px 24px;}
.ej-newmc .stat{text-align:center; border-left:1px solid rgba(255,255,255,0.1);}
.ej-newmc .stat:first-child{border-left:none;}
.ej-newmc .stat .num{font-family:var(--font-display); font-size:26px; color:var(--white); font-weight:600;}
/* тема стилизует .label как пилюлю (рамка/радиус/вес) — на макете это простая подпись */
.ej-newmc .label{border:0; border-radius:0; font-weight:400; background:none;}
/* тема глобально апперкейсит .label — на макете подписи строчные */
.ej-newmc .stat .label{font-size:12px; color:rgba(255,255,255,0.55); margin-top:4px; letter-spacing:0.03em; text-transform:none;}

/* ===== LEAD FORM CARD (floats over hero on desktop concept, stacked here) ===== */
.ej-newmc .lead-card{background:var(--white); color:var(--ink); border-radius:6px; padding:28px; max-width:420px; box-shadow:0 18px 40px rgba(0,0,0,0.25); margin-top:-1px;}
.ej-newmc .lead-card{scroll-margin-top:110px;}
.ej-newmc .lead-card h3{font-size:16px; margin-bottom:16px; color:var(--navy);}
.ej-newmc .lead-card select, .ej-newmc .lead-card input[type="text"], .ej-newmc .lead-card input[type="tel"], .ej-newmc .lead-card input[type="email"]{
  width:100%; padding:12px 14px; margin-bottom:10px; border:1px solid var(--line);
  border-radius:4px; font-family:var(--font-body); font-size:14px; background:var(--bg);
  color:var(--ink);
}
.ej-newmc .lead-card .btn{width:100%;}

/* generic section spacing */
.ej-newmc section{padding:64px 0;}
.ej-newmc .section-head{max-width:640px; margin-bottom:36px;}
.ej-newmc .section-head h2{font-size:28px; color:var(--navy); margin-bottom:12px;}
.ej-newmc .section-head p{color:var(--slate); font-size:15px; text-transform:none; font-family:var(--font-body); letter-spacing:normal;}

/* ===== SOUND FAMILIAR ===== */
.ej-newmc .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ej-newmc .quote-card{background:var(--white); border-left:3px solid var(--red); padding:20px 22px; border-radius:2px;}
.ej-newmc .quote-card p{font-size:15px; font-style:italic; color:var(--ink);}
.ej-newmc .quote-card .who{font-size:12px; color:var(--slate); margin-top:10px; text-transform:uppercase; letter-spacing:0.05em; font-style:normal;}
.ej-newmc .bridge{margin-top:32px; font-size:16px; color:var(--navy); font-weight:500; max-width:600px;}

/* ===== WHY THIS HAPPENS ===== */
.ej-newmc .why{background:var(--white);}
.ej-newmc .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.ej-newmc .why-list{list-style:none;}
.ej-newmc .why-list li{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px;}
.ej-newmc .why-list li:last-child{border-bottom:none;}
.ej-newmc .why-list .x{color:var(--red); font-family:var(--font-display); font-weight:700; flex-shrink:0;}
.ej-newmc .why-copy p{color:var(--slate); font-size:15px; margin-bottom:14px;}
.ej-newmc .why-copy strong{color:var(--ink);}

/* ===== SIGNATURE: BROKER CLOCK ===== */
.ej-newmc .clock-section{background:var(--navy); color:var(--white);}
.ej-newmc .clock-section .section-head h2{color:var(--white);}
.ej-newmc .clock-section .section-head p{color:rgba(255,255,255,0.65);}
.ej-newmc .clock{position:relative; padding:36px 0 8px;}
.ej-newmc .clock-line{position:relative; height:2px; background:rgba(255,255,255,0.15); margin:0 10px;}
.ej-newmc .clock-marks{display:flex; justify-content:space-between; position:relative; top:-1px;}
.ej-newmc .mark{width:2px; height:14px; background:rgba(255,255,255,0.3);}
.ej-newmc .clock-labels{display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:rgba(255,255,255,0.5); font-family:var(--font-display); letter-spacing:0.04em;}
.ej-newmc .clock-labels .them{color:rgba(255,255,255,0.5);}
.ej-newmc .ej-marker{
  position:absolute; left:0; top:-42px; display:flex; flex-direction:column; align-items:center;
}
.ej-newmc .ej-pill{background:var(--red); color:var(--white); font-family:var(--font-display); font-size:12px; padding:6px 12px; border-radius:20px; white-space:nowrap; letter-spacing:0.03em;}
.ej-newmc .ej-dot{width:12px; height:12px; border-radius:50%; background:var(--red); margin-top:6px; box-shadow:0 0 0 4px rgba(214,40,57,0.25);}
.ej-newmc .clock-caption{margin-top:44px; font-size:14px; color:rgba(255,255,255,0.7); max-width:520px;}

/* ===== OFFER ===== */
.ej-newmc .offer{background:var(--bg);}
.ej-newmc .offer-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.ej-newmc .offer-card{background:var(--white); padding:26px; border-radius:6px; border:1px solid var(--line);}
.ej-newmc .offer-card .tag{font-family:var(--font-display); font-size:12px; color:var(--red); letter-spacing:0.05em; margin-bottom:10px;}
.ej-newmc .offer-card h4{font-family:var(--font-body); font-weight:600; font-size:16px; text-transform:none; letter-spacing:normal; color:var(--navy); margin-bottom:8px;}
.ej-newmc .offer-card p{font-size:14px; color:var(--slate);}
.ej-newmc .offer-cta{margin-top:32px;}

/* ===== HOW IT WORKS ===== */
.ej-newmc #how-it-works{scroll-margin-top:110px;} /* D5 — липкая шапка темы */
.ej-newmc .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step;}
.ej-newmc .step{position:relative; padding-top:8px;}
.ej-newmc .step .n{font-family:var(--font-display); font-size:44px; color:var(--red); opacity:0.35; line-height:1; margin-bottom:8px;}
.ej-newmc .step h4{font-family:var(--font-body); font-weight:600; font-size:16px; text-transform:none; letter-spacing:normal; color:var(--navy); margin-bottom:6px;}
.ej-newmc .step p{font-size:14px; color:var(--slate);}

/* ===== FAQ ===== */
.ej-newmc .faq{background:var(--white);}
.ej-newmc .faq-item{border-bottom:1px solid var(--line);}
.ej-newmc .faq-q{
  width:100%; text-align:left; background:none; border:none; padding:18px 4px;
  font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.ej-newmc .faq-q .plus{font-size:18px; color:var(--red); font-family:var(--font-display); transition:transform .15s ease;}
.ej-newmc .faq-a{max-height:0; overflow:hidden; transition:max-height .2s ease;}
.ej-newmc .faq-a p{font-size:14px; color:var(--slate); padding:0 4px 18px;}
.ej-newmc .faq-item.open .faq-a{max-height:200px;}
.ej-newmc .faq-item.open .plus{transform:rotate(45deg);}

/* ===== TRUST / SHIPPER-FUNDED ADDITIONS ===== */
.ej-newmc .trust-line{font-size:14px; color:rgba(255,255,255,0.75); margin-top:4px; margin-bottom:20px; max-width:520px;}
.ej-newmc .trust-line strong{color:var(--white);}
.ej-newmc .badge-chip{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); font-size:12px;
  font-family:var(--font-body); padding:6px 14px; border-radius:20px; margin-bottom:24px;
}
.ej-newmc .badge-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0;}
.ej-newmc .callout{background:var(--bg); border-left:3px solid var(--red); padding:22px 24px; border-radius:2px; margin-top:28px;}
.ej-newmc .callout h4{font-family:var(--font-body); font-weight:600; font-size:15px; text-transform:none; letter-spacing:normal; color:var(--navy); margin-bottom:8px;}
.ej-newmc .callout p{font-size:14px; color:var(--slate);}
.ej-newmc .doc-check{background:var(--bg); border-radius:6px; padding:22px 26px; margin-top:36px;}
.ej-newmc .doc-check h4{font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--navy); margin-bottom:12px;}
.ej-newmc .doc-check ul{list-style:none; display:flex; gap:22px; flex-wrap:wrap;}
.ej-newmc .doc-check li{font-size:14px; color:var(--slate); display:flex; align-items:center; gap:8px;}
.ej-newmc .doc-check li::before{content:"\2713"; color:var(--red); font-weight:700;}

/* ===== FREIGHT SNAPSHOT ===== */
.ej-newmc .snapshot{background:var(--white);}
.ej-newmc .snap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ej-newmc .snap-card{background:var(--bg); border-radius:6px; padding:20px 22px;}
.ej-newmc .snap-card .label{font-family:var(--font-display); font-size:12px; color:var(--red); letter-spacing:0.05em; margin-bottom:8px; text-transform:none; font-weight:400;}
.ej-newmc .snap-card .val{font-family:var(--font-display); font-size:20px; color:var(--navy);}
.ej-newmc .snap-card .sub{font-size:13px; color:var(--slate); margin-top:4px;}

/* ===== REVIEWS ===== */
.ej-newmc .reviews{background:var(--bg);}

/* ===== TESTIMONIALS ===== */
.ej-newmc .testimonials{background:var(--bg);}
.ej-newmc .testimonials .section-head{margin-bottom:12px;}
.ej-newmc .placeholder-flag{
  display:inline-block; background:#FFF3D6; color:#7A5B00; font-family:var(--font-body);
  font-size:12px; font-weight:600; letter-spacing:0.02em; padding:5px 12px; border-radius:20px; margin-bottom:24px;
}
.ej-newmc .t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ej-newmc .t-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:22px;}
.ej-newmc .t-card p.quote{font-size:15px; color:var(--ink); margin-bottom:16px;}
.ej-newmc .t-card .who{display:flex; align-items:center; gap:10px;}
.ej-newmc .t-avatar{width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--white); font-family:var(--font-display); font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ej-newmc .t-name{font-size:13px; font-weight:600; color:var(--ink);}
.ej-newmc .t-co{font-size:12px; color:var(--slate);}

/* ===== FINAL CTA ===== */
.ej-newmc .final{background:var(--navy-deep); color:var(--white); text-align:center;}
.ej-newmc .final h2{color:var(--white); font-size:30px; margin-bottom:10px;}
.ej-newmc .final p{color:rgba(255,255,255,0.65); font-size:16px; margin-bottom:28px; text-transform:none; font-family:var(--font-body);}
.ej-newmc .final-form{display:flex; gap:10px; justify-content:center; max-width:560px; margin:0 auto; flex-wrap:wrap;}
.ej-newmc .final-form select, .ej-newmc .final-form input[type="text"], .ej-newmc .final-form input[type="tel"]{
  flex:1; min-width:160px; padding:14px; border:1px solid rgba(255,255,255,0.2);
  border-radius:4px; background:rgba(255,255,255,0.06); color:var(--white); font-family:var(--font-body); font-size:14px;
}
.ej-newmc .final-form select option{color:#000;}
.ej-newmc .final-form input::placeholder{color:rgba(255,255,255,0.55);}

/* ============================================================================
 * Форма: обвязка живой машинерии темы (.contact-form, .form-group,
 * .form-checkbox-*, .error-message, .submit-btn, Turnstile) под вид макета.
 * ========================================================================== */
.ej-newmc .contact-form{width:100%;}
.ej-newmc .form-group{position:relative;}
.ej-newmc .error-message{font-size:12px; color:var(--red); margin:-4px 0 8px; font-family:var(--font-body); text-align:left;}
.ej-newmc .form-group--checkbox{margin-bottom:10px; text-align:left;}
.ej-newmc .form-checkbox-label{display:flex; gap:8px; align-items:flex-start; cursor:pointer;}
.ej-newmc .form-checkbox{width:16px; height:16px; flex-shrink:0; margin-top:2px; accent-color:var(--red);}
.ej-newmc .form-checkbox-text{font-size:11px; line-height:1.45; color:var(--slate); font-family:var(--font-body);}
.ej-newmc .form-checkbox-text p{font-size:11px; line-height:1.45; margin:0;}
.ej-newmc .form-checkbox-text a{text-decoration:underline;}
.ej-newmc .form-checkbox-text__toggle{display:inline-block; margin-top:2px; color:var(--red); cursor:pointer; font-weight:600;}
.ej-newmc .ej-newmc-cap{margin:10px 0;}
.ej-newmc .submit-btn{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:0.04em; font-weight:600; font-size:15px; padding:16px 32px;
  border-radius:2px; cursor:pointer; border:none; text-align:center;
  background:var(--red); color:var(--white);
}
.ej-newmc .submit-btn:hover{background:var(--red-dark);}
.ej-newmc .lead-card .submit-btn{width:100%;}
.ej-newmc .final-form .submit-btn{flex:0 0 auto;}
.ej-newmc .final .form-checkbox-text{color:rgba(255,255,255,0.6);}
.ej-newmc .final .error-message{color:#FF8A93;}
.ej-newmc .final-consent{flex:0 0 100%; max-width:560px; margin:14px auto 0; text-align:left;}
.ej-newmc .final-form .form-group{flex:1; min-width:160px; margin-bottom:0;}
.ej-newmc .final-form .form-group input:not([type=checkbox]):not([type=radio]), .ej-newmc .final-form .form-group select{width:100%;}
.ej-newmc .final-form .ej-newmc-cap{flex:0 0 100%; display:flex; justify-content:center;}
.ej-newmc .lead-card .form-group input:not([type=checkbox]):not([type=radio]), .ej-newmc .lead-card .form-group select{width:100%;}
/* чекбокс согласия остаётся квадратиком, иначе width:100% раздувает его и строку уносит вбок */
.ej-newmc .form-checkbox{width:auto; flex:0 0 auto;}
.ej-newmc .form-checkbox-text{min-width:0;}

/* Select2: закрытый контрол приводим к полю из макета */
.ej-newmc .select2-container{width:100% !important; margin-bottom:10px;}
.ej-newmc .select2-container--default .select2-selection--single{
  height:auto; padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  background:var(--bg); font-family:var(--font-body); font-size:14px;
}
.ej-newmc .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink); line-height:1.4; padding:0; font-size:14px;
}
.ej-newmc .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%; right:10px;}
.ej-newmc .final .select2-container--default .select2-selection--single{
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2);
}
.ej-newmc .final .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--white);}
.ej-newmc .final-form .select2-container{flex:1; min-width:160px; margin-bottom:0;}

@media (max-width:820px){
  .ej-newmc .hero{padding-top:40px;}
  .ej-newmc .hero h1{font-size:30px;}
  .ej-newmc .eyebrow{margin-bottom:12px;}
  .ej-newmc .hero p.sub{font-size:16px; margin-bottom:24px;}
  .ej-newmc .lead-card{margin-top:8px; max-width:none;}
  .ej-newmc .stat-bar .wrap{grid-template-columns:repeat(2,1fr); row-gap:20px;}
  .ej-newmc .quotes{grid-template-columns:1fr;}
  .ej-newmc .why-grid{grid-template-columns:1fr;}
  .ej-newmc .offer-grid{grid-template-columns:1fr;}
  .ej-newmc .steps{grid-template-columns:1fr;}
  .ej-newmc .clock-labels span{font-size:10px;}
  .ej-newmc .ej-marker{left:0;}
  .ej-newmc .snap-grid{grid-template-columns:1fr;} /* D3 */
  .ej-newmc .t-grid{grid-template-columns:1fr;}    /* D3 */
}

/* ============================================================================
 * EJ New MC landing — добавка v2.2 к assets/css/new-mc-landing.css
 * Приложить В КОНЕЦ файла: половина правил здесь выигрывает у темы только
 * порядком при равной специфичности.
 *
 * v2.1 (Елена, DM 7911/7912 27.08): форма в hero, снятие полосы Cost+.
 * v2.2 (Елена, DM 7925-7932 27.08): ритм фонов (кремовый / белый / navy),
 *      CTA-биты по секциям, доминанта NEW MC ACCEPTED, читаемый FAQ,
 *      финальный блок без второй формы, мотив статуса authority.
 * ========================================================================== */

/* --- 0. Палитра ритма ------------------------------------------------------
   Претензия Елены (DM 7931): «one enormous beige canvas… I would make white
   actually white. Right now the differences between some section/card surfaces
   are so subtle that they disappear visually.»
   Тема даёт --bg #F6F5F1 против --white #FFFFFF — ΔL* ≈ 2, на печати и на
   среднем мониторе это один цвет. Кремовый углубляется до #F1EDE3, белый
   остаётся #FFFFFF, третий фон — navy. Больше трёх фонов не вводится. */
/* 09.09 (v2.30). Кремовый #F1EDE3 снят по просьбе Елены (DM 9652): «this light
   light brownish bg is not the most appealing». Взамен бледно-синий #EDF2FC —
   тот же тинт, что уже стоит на страницах штатов (.ej-state-hstep.is-hot).
   Выбран из четырёх кадров, отрисованных на живой странице; номер Елена назвала
   явно (DM 9664). Светлота почти не изменилась, разделение держится оттенком:
   ΔE76 от белого 8.17 у крема против 7.09 у тинта, тогда как «нейтральные»
   кандидаты давали 4.1–4.3 и возвращали претензию из DM 7931 выше.
   Контраст #151B63 по #EDF2FC = 13.67:1, было 13.12:1 по крему. */
.ej-newmc{ --cream:#EDF2FC;
/* --- 0.1 EJ blue вместо моего navy ----------------------------------------
   DM 7938: «the dark blue — let's make it ej blue instead».
   Цвет взят не на глаз, а из живой темы (main.min.css, скачан 27.08 → 200,
   255885 б) — иначе на странице будет «какой-то синий», а не фирменный:
     #151B63 — тёмная поверхность самого EJ: .header.active,
               .page-template-jobs .header, .single-company .header;
     #0E1245 — глубокий конец фирменного градиента героя темы
               .hero .hero__video:before → rgba(14,18,69,.9) → rgba(27,37,146,.9).
   Знак несёт #007DFE (logo-new.svg), но это акцент логотипа: заливкой на всю
   ширину он выжигает белый текст, поэтому в фон глав не идёт.
   Обе подмены делаются переменными: hero, proof bar, плашка-панчлайн,
   финальный блок и цвет всех H2 ходят через var(--navy)/var(--navy-deep),
   ни одного захардкоженного #0B1F3A в макете нет (проверено грепом 27.08). */
/* --- 0.2 DM 7989 (28.08): «light blue EJ branding color should replace the dark
   blue everywhere on the page». Обе тёмные переменные темы сводятся к фирменному
   синему — hero, proof bar, финальный блок, плашка-панчлайн и цвет всех
   заголовков ходят через них, поэтому одна правка меняет страницу целиком,
   без единого захардкоженного синего. Замеры контраста после свопа — в §2.1. */
/* --- 0.3 DM 7997/8002/8005 (28.08). «Too light — EJ blue is not that light»,
   дальше скриншот живой главной с подписью «this is the blue». Сэмплировал
   пиксели присланного кадра — синих там два, а не один:
     #151B63 — поле героя под заголовком (и кнопка Owner Operators, темнее);
     #3647F6 — пузырь чата и кнопка Carrier Partners.
   Сходится с частотой в теме (main.min.css, 255885 б, скачан 28.08): #3647F6 —
   151 вхождение (ссылки, ::marker, hover карточки блога, .pagination a.prev/.next),
   #151B63 — 69 (.header.active, .page-template-jobs .header). Прежний мой #007DFE
   встречается 3 раза, все в .ceo .ceo-item__title, — это акцент логотипа, а не
   цвет бренда; отсюда и «слишком светло».
   Показал оба варианта кадром A/B, DM 8005: «the one darker looks better overall,
   do not use light version» → поверхности идут на #151B63.
   Акцентная переменная --ej-blue не красит ничего: панчлайн-плашки нет, а левый
   бордюр и заголовок врезки .mc-note идут навью #151B63. Объявление снято 09.09
   (v2.31), хекс #3647F6 оставлен в комментарии. Заливок его на странице ноль — проверено
   перебором getComputedStyle по всем узлам .ej-newmc (28.08).
   Контраст (WCAG 2.x, пары из отгружаемых значений): белый на #151B63 = 15.34:1,
   белый на #3647F6 = 6.20:1, #151B63 по тинту #EDF2FC = 13.67:1. Прежний
   #007DFE давал 3.91 и 3.35 — оба открытых разрыва закрыты сменой оттенка. */
  --navy:#151B63; --navy-deep:#151B63; }
.ej-newmc .ch-white{ background:var(--white); }
.ej-newmc .ch-cream{ background:var(--cream); }
/* карточка на белой главе не может быть белой — на кремовой главе наоборот */
.ej-newmc .ch-white .card-surface{ background:var(--cream); border:1px solid var(--line); }
.ej-newmc .ch-cream .card-surface{ background:var(--white); border:1px solid var(--line); }
/* Исключение из инверсии выше: карточка требований на белой главе идёт белой.
   Причина не вкусовая — #what-you-need это белая глава сразу после кремовой
   #how-it-works, и кремовая карточка внутри неё давала «крем, белая полоса 64px,
   снова крем». Замер 09.09: how-it-works 2453-2787, what-you-need 2787-3444,
   .req-card начинается на 2851. Одобрено Леной по кадру (DM 9645).
   У самой .req-card border:0 (правило .req-split .req-card), а тень 0 1px 3px
   висит на .req-split — на белом фоне одной тени не хватает, поэтому рамка
   ставится на .req-split тем же var(--line), что у остальных card-surface. */
.ej-newmc .req-card.card-surface{ background:var(--white); }
.ej-newmc .req-split{ border:1px solid var(--line); }

/* --- 1. Hero --------------------------------------------------------------
   Собственное правило темы прибивает hero к высоте вьюпорта; в v1 это было
   не видно, потому что hero заполняла .lead-card. Плюс шапка темы fixed и
   прозрачная: её отрисованный низ 141px на 1440 и 66px на 430 — без явного
   отступа логотип печатается поверх eyebrow. Числа даны ПОСЛЕ снятия .hot-offer
   (полоса занимала 61px в потоке). */
.ej-newmc .hero{ height:auto; min-height:0; padding-top:158px; }
/* .hero-inner в теме одноколоночная (new-mc-landing.css:58), а в файле только
   один брейкпоинт (max-width:820px) — десктопный разворот добавляется здесь. */
@media (min-width:900px){
  .ej-newmc .hero-inner{ grid-template-columns:minmax(0,1fr) 460px; gap:48px; align-items:center; }
}
/* Полоса «Cost+ Model» — общесайтовая, рендерится в <body> до .page__wrapper,
   вне <main>. Селектор обязан нести оба класса: в main.min.css лежит
   .hot-offer.flex{display:flex} (0,2,0), голый .hot-offer (0,1,0) ей проигрывает.
   new-mc-landing.css подключается после main.min.css → равная специфичность
   выигрывает. Правило намеренно без префикса .ej-newmc: этот файл ставится
   в очередь только на post 11044 и до других шаблонов не достаёт. */
.hot-offer.flex{ display:none; }

/* --- 2. Proof bar: тёмная полоса, замыкающая вступительную главу -----------
   DM 7931: «Proof bar: dark navy. Already works beautifully as a hard visual stop.» */
.ej-newmc .proof{ background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08); padding:44px 0; }
.ej-newmc .num-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.ej-newmc .num-card{ text-align:center; padding:6px 18px; border-left:1px solid rgba(255,255,255,0.1); }
.ej-newmc .num-card:first-child{ border-left:none; }
.ej-newmc .num-card .n{ font-family:var(--font-display); font-size:40px; line-height:1; color:var(--white); font-weight:bold; }
.ej-newmc .num-card .c{ margin-top:8px; font-size:13px; color:rgba(255,255,255,0.55); line-height:1.45; }
/* 28.08, DM 7988: «reads like a disclaimer… this is a major selling point».
   .num-note снят из разметки, правило держим на случай, если тема выведет его
   где-то ещё, но на этой странице узла больше нет.
   Ярлык у 100%: сплошная белая плашка с тёмно-синим текстом. Контраст текста
   к плашке 17.4:1, самой плашки к фону полосы — максимум, доступный на этой
   поверхности. Красный сюда не идёт: на странице он закреплён за CTA-кнопками,
   и ярлык-не-кнопка в том же красном читался бы как кликабельный. */
.ej-newmc .num-note{ display:none; }
.ej-newmc .num-card .num-tag{
  display:inline-block; margin-top:12px; padding:6px 11px 5px;
  background:var(--white); color:var(--ink); border-radius:3px;
  font-family:var(--font-display); font-size:11px; font-weight:bold;
  letter-spacing:0.07em; text-transform:uppercase; line-height:1.15;
}

/* --- 3. Карточка формы в hero --------------------------------------------- */
.ej-newmc .lead-card{ max-width:460px; padding:26px; }
.ej-newmc .lead-card h3{ font-size:17px; line-height:1.35; margin:0 0 6px; }
.ej-newmc .lead-card .form-group{ margin-bottom:12px; }
.ej-newmc .lead-card .form-checkbox-text,
.ej-newmc .lead-card .form-checkbox-text p{ font-size:12px; }
/* (порт 29.08) Блок e-mail из макета сюда НЕ копируется: в бою тип email дописан
   в родной селектор new-mc-landing.css:80 — одна коробка на все поля карточки. */
.ej-newmc .q-label{ font-family:var(--font-display); font-size:15px; color:var(--navy); margin:0 0 12px; }
/* .q-label был <p> и блочным по умолчанию; став <label>, он строчный, и его
   margin-bottom перестал бы работать по вертикали. */
.ej-newmc .q-label{ display:block; }
/* Сворачивание геройской формы — контракт assets/js/state-hero.js.
   Эталон: state-pages.css, строки 287-291. Здесь нужны только два правила из пяти:
   вся скрываемая часть лежит в одном .ej-state-hmore, отдельных .ej-state-hgrp и
   .ej-state-hhint в этой разметке нет. */
.ej-newmc .ej-state-fold .ej-state-hmore{ display:none; }
.ej-newmc .ej-state-fold.is-open .ej-state-hmore{ display:block; }
/* цель скролла всех CTA — карточка не должна вставать под липкую шапку */
.ej-newmc .lead-card{ scroll-margin-top:150px; }

/* --- 4. CTA-биты ----------------------------------------------------------
   DM 7932: шесть точек на страницу, разные формулировки, ВСЕ ведут в одну
   форму в hero. «I would not center every mid-page CTA underneath the section.
   For left-aligned copy sections, keep the button left-aligned with the text.» */
.ej-newmc .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:30px; }
.ej-newmc .cta-row--center{ justify-content:center; }
.ej-newmc .cta-note{ font-size:13px; color:var(--slate); }

/* --- 5. «Not another load board»: доминанта вместо четырёх равных карточек --
   DM 7925: «Four equal white cards read as a logistics website template.» */
.ej-newmc .offer{ padding:64px 0; }
.ej-newmc .offer-lead{ display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:stretch; }
.ej-newmc .offer-hero{ background:var(--white); border:1px solid var(--line); border-top:4px solid var(--red); border-radius:6px; padding:32px 34px; }
.ej-newmc .offer-hero h3{ font-size:34px; color:var(--navy); margin:14px 0 10px; line-height:1.1; }
.ej-newmc .offer-hero p{ font-size:16px; color:var(--slate); max-width:420px; }
.ej-newmc .offer-side{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.ej-newmc .offer-side li{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:16px 18px; flex:1; }
.ej-newmc .offer-side b{ display:block; font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--navy); margin-bottom:3px; }
.ej-newmc .offer-side span{ font-size:13px; color:var(--slate); }

/* --- 6. Мотив статуса authority -------------------------------------------
   DM 7929: «Add a very subtle MC/authority-status visual motif rather than
   generic trucking imagery.» Мотив ровно один и повторяется дважды: шкала
   возраста authority, где приняты все четыре отрезка, и та же шкала свёрнутая
   в чип. Ни одной фотографии грузовика. */
.ej-newmc .mc-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px; }
.ej-newmc .mc-track .seg{ border-top:3px solid var(--red); background:var(--bg); padding:8px 6px 9px; text-align:center; }
.ej-newmc .mc-track .seg .d{ font-family:var(--font-display); font-size:13px; letter-spacing:0.04em; color:var(--navy); }
.ej-newmc .mc-track .seg .s{ display:block; font-size:11px; color:var(--slate); letter-spacing:0.06em; text-transform:uppercase; margin-top:2px; }
.ej-newmc .mc-track-note{ font-size:12px; color:var(--slate); margin-top:10px; letter-spacing:0.02em; }
.ej-newmc .mc-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--white);
  border:1px solid var(--line); color:var(--navy); font-family:var(--font-display);
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:7px 14px; border-radius:20px; margin-bottom:16px;
}
.ej-newmc .mc-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); flex-shrink:0; }

/* --- 7. How it works: связка 01 → 02 → 03 ---------------------------------
   DM 7926: «add a subtle visual connector… Nothing fancy. No trucks driving
   across maps.» Линия рисуется от карточки к карточке на уровне цифры. */
.ej-newmc .steps{ position:relative; }
.ej-newmc .step{ position:relative; }
/* колонка .steps: 3 x 328px, column-gap 24px (замер 27.08).
   Здесь была горизонтальная чёрточка, и после отрисовки PDF она всё ещё читалась
   как знак минуса: «-02», «-03». Причина не в зазоре, а в высоте — цифра .n это
   44px Oswald при line-height:1 и padding-top:8px, то есть минус в этом кегле
   стоял бы ровно на y≈28, куда я чёрточку и поставил. Развожу не отступом, а
   формой: шеврон из двух бордеров нельзя прочитать как знак, и он вдобавок
   называет направление 01 → 02 → 03, ради которого коннектор и нужен.
   Габарит после поворота ≈12.7px в зазоре 24px — по 6px клиренса с каждой стороны. */
.ej-newmc .step::after{
  content:""; position:absolute; top:21px; left:calc(100% + 6px); width:9px; height:9px;
  border-top:2px solid rgba(214,40,57,0.40);
  border-right:2px solid rgba(214,40,57,0.40);
  transform:rotate(45deg);
}
.ej-newmc .step:last-child::after{ content:none; }

/* --- 8. Requirements: две панели по макету Елены (DM 8019) -----------------
   Было: белая карточка на всю ширину + синий панчлайн-блок под списком.
   Стало: карточка и фотопанель встык, 56/44, как в присланном растре.
   Все размеры — замер с растра (контент 1248) x 0.828 под нашу .wrap (1032).
   Регистр в макете строчный, но это КОПИЯ, а не text-transform: «MC», «I'm»
   и подписи предложениями остаются как есть, поэтому transform не ставлю.
   28.08: заголовок карточки по просьбе Елены (DM 8041) с заглавной —
   «What you need to apply»; правка в тексте, не в CSS.
   28.08 (DM 8056): пять пунктов списка и две подписи <em> тоже переведены в
   sentence case — снова копией; text-transform здесь не появляется намеренно,
   иначе «MC» и «MCs» превратятся в «Mc».
   Цвет заголовка и названий строк — var(--navy) #151B63, а не почти-чёрный
   #0A1024 из растра: на странице все H2/H3 уже ходят через --navy, ради одного
   блока систему не разламываю (ΔL* к растру ≈ 4, на глаз неразличимо).
   Панчлайн-блок и класс .doc-check из этого блока ушли — их правила удалены,
   а не оставлены висеть мёртвыми. */
.ej-newmc .req-split{
  display:grid; grid-template-columns:1fr; align-items:stretch;
  margin-top:0; border-radius:10px; overflow:hidden;
  box-shadow:0 1px 3px rgba(20,20,20,0.07);
}
.ej-newmc .req-split .req-card{
  border-radius:0; border:0; padding:44px 48px; margin:0;
  display:flex; flex-direction:column;
}
.ej-newmc .req-card h2{
  font-family:var(--font-display); font-weight:700; font-size:28px; line-height:1.2;
  letter-spacing:normal; color:var(--navy); margin:0 0 12px; max-width:none;
}
.ej-newmc .req-rule{ display:block; width:56px; height:5px; background:var(--red); border-radius:2px; }
.ej-newmc .req-card .req-sub{ font-size:14px; line-height:1.5; color:rgba(20,20,20,0.62); margin:14px 0 12px; }

.ej-newmc .req-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column;
  grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,auto);
  column-gap:56px;
}
.ej-newmc .req-list li{
  display:flex; align-items:center; gap:25px; padding:14px 0;
  border-top:1px solid #EDEDED;
}
.ej-newmc .req-list li:first-child{ border-top:0; }
.ej-newmc .req-list li:nth-child(3){ border-top:0; }
.ej-newmc .req-list .tick{
  flex:0 0 43px; width:43px; height:43px; border-radius:50%; background:#F7F1F1;
  position:relative;
}
/* галочка нарисована рамкой, а не глифом: шрифтового ✓ нужной толщины в теме нет,
   а иконочный шрифт ради одного знака — лишний запрос. */
.ej-newmc .req-list .tick::after{
  content:""; position:absolute; left:15px; top:11px; width:8px; height:16px;
  border-right:3.5px solid var(--red); border-bottom:3.5px solid var(--red);
  transform:rotate(42deg);
}
.ej-newmc .req-list .rq{ display:block; }
.ej-newmc .req-list .rq b{
  display:block; font-family:var(--font-body); font-weight:700; font-size:17px;
  line-height:1.3; color:var(--navy);
}
.ej-newmc .req-list .rq em{
  display:block; font-style:normal; font-size:14px; line-height:1.4;
  color:rgba(20,20,20,0.62); margin-top:3px;
}

.ej-newmc .mc-note{
  display:flex; align-items:center; gap:16px; margin-top:25px;
  background:var(--cream); border-left:4px solid var(--navy);
  border-radius:0 4px 4px 0; padding:16px 20px;
}
.ej-newmc .mc-note .mc-shield{ flex:0 0 44px; line-height:0; }
/* Щит нарисован инлайновым svg в шаблоне с захардкоженными #3647F6 в stroke и
   fill. Это presentation-атрибуты, css их перебивает — шаблон править не нужно. */
.ej-newmc .mc-note .mc-shield svg path{ stroke:var(--navy); }
.ej-newmc .mc-note .mc-shield svg text{ fill:var(--navy); }
.ej-newmc .mc-note-text b{
  display:block; font-family:var(--font-body); font-weight:700; font-size:18px;
  line-height:1.3; color:var(--navy);
}
.ej-newmc .mc-note-text p{ font-size:15px; line-height:1.4; color:var(--ink); margin:4px 0 0; }

.ej-newmc .req-cta{ margin-top:18px; }
.ej-newmc .req-cta .btn{ font-size:16px; padding:16px 26px; }

@media (max-width:900px){
  .ej-newmc .req-split{ grid-template-columns:1fr; }
  .ej-newmc .req-split .req-card{ padding:28px 22px; }
  .ej-newmc .req-list{ display:block; }
  .ej-newmc .req-list li:nth-child(3){ border-top:1px solid #EDEDED; }
  .ej-newmc .req-list li{ gap:16px; padding:12px 0; }
  .ej-newmc .req-list .tick{ flex:0 0 36px; width:36px; height:36px; }
  .ej-newmc .req-list .tick::after{ left:12px; top:9px; width:7px; height:14px; border-width:3px; }
  .ej-newmc .req-list .rq b{ font-size:16px; }
  .ej-newmc .mc-note{ gap:12px; padding:14px 16px; }
  .ej-newmc .mc-note-text b{ font-size:16px; }
  .ej-newmc .req-cta .btn{ width:100%; justify-content:center; }
}


/* --- 9. Отзыв: одна панель поверх фото (v2.19-v2.21, §7b) ------------------
   Стена из десяти карточек отменена: Елена прислала ОДИН живой отзыв
   (DM 8454-8458 от 31.08.2026), подпись `Mike Reynolds` (DM 8473), технику
   `Box truck` (DM 8487). Вся арифметика стены (пять колонок, span 2/3, дыра в
   последнем ряду, оформление малых карточек #F5F5F9, navy-градиент большой
   панели и её белые/#AAB4E8 цвета, пересчёты span на 1100/820/560) удалена
   целиком, а не оставлена висеть: мёртвые правила поймали бы новую разметку.
   Класса `.review-wall` в разметке больше нет.

   Размеры внутри панели заданы в `cqw` от самой панели (`container-type:
   inline-size`), а не в px и не в vw. Причина: приёмка §7b читает ДОЛИ
   (ширина панели / ширина медиаблока, line-height / ширина панели, свуш /
   ширина панели, высота кнопки / высота панели). В cqw эти доли не зависят от
   ширины экрана и держатся на всех широких брейкпоинтах одним набором чисел.

   Верхний отступ панели взят равным нижнему (3.41% высоты медиаблока = 21px в
   кадре): верхняя граница панели в кадре NOT_CHECKED, светлое небо от заливки
   по яркости не отделяется. Указание Aramis, §7b.

   Красный везде свой, `var(--red)` #D62839. Красный с кадра (rgb(196,21,34))
   НЕ берём: DM 8473 «keep our page colors». */

.ej-newmc .rv-single{ position:relative; }
.ej-newmc .rv-media{ margin:0; border-radius:14px; overflow:hidden; line-height:0; }
.ej-newmc .rv-media img{ display:block; width:100%; height:auto; }

.ej-newmc .rv-panel{
  position:absolute; top:3.41%; bottom:3.41%; right:1.9%; width:43.8%;
  container-type:inline-size;
  border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,0.70);
  -webkit-backdrop-filter:blur(20px) saturate(0.92);
  backdrop-filter:blur(20px) saturate(0.92);
}
/* Без backdrop-filter полупрозрачная заливка легла бы прямо на резкое фото и
   съела бы читаемость цитаты. Там, где фильтра нет, поднимаем непрозрачность. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ej-newmc .rv-panel{ background:rgba(255,255,255,0.93); }
}

.ej-newmc .rv-body{
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:10.9cqw 17.3cqw 6.6cqw 20.3cqw;
}

/* Звёзды и знак кавычки выходят ЛЕВЕЕ контентной колонки (в кадре на 51 и 72px
   при ширине панели 543), поэтому вынос отрицательным отступом, а не padding. */
.ej-newmc .rv-stars{
  color:var(--red); font-size:4.6cqw; line-height:1; letter-spacing:1.6cqw;
  margin-left:-9.4cqw;
}
.ej-newmc .rv-star{ color:var(--red); }

.ej-newmc .rv-quote{
  position:relative; margin:4.4cqw 0 0; color:var(--navy);
  font-family:var(--font-body); font-weight:600;
  font-size:4.4cqw; line-height:6.4cqw; letter-spacing:-0.005em;
}
/* Декоративный знак: псевдоэлемент, а не текст. В innerText секции его быть не
   должно (правило v2.14, приёмка §7b п. 11). Кавычки вокруг самой цитаты - тоже
   псевдоэлементы по той же причине: в кадре они видны, в innerText их нет. */
.ej-newmc .rv-quote::before{
  content:"\201C"; position:absolute; left:-13.3cqw; top:-1.2cqw;
  font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:19cqw; line-height:1; color:rgba(21,27,99,0.16);
  pointer-events:none; user-select:none;
}
.ej-newmc .rv-qt::before{ content:"\201C"; }
.ej-newmc .rv-qt::after{ content:"\201D"; }

.ej-newmc .rv-swoosh{
  display:block; width:20cqw; height:1.9cqw; margin-top:3.6cqw;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='109' height='10'%3E%3Cpath d='M2 8C22 2.5 66 1.5 107 4.5' fill='none' stroke='%23D62839' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% auto;
}

/* Подпись: имя и техника в два ряда, одна колонка. Кружка с инициалами тут
   больше нет (v2.22): дорожка `av` и column-gap ушли вместе с ним, иначе
   пустая колонка осталась бы в сетке и увела имя вправо на 3.3cqw. */
.ej-newmc .rv-who{
  display:grid; grid-template-areas:"nm" "rl";
  margin-top:3.3cqw;
}
.ej-newmc .rv-nm{
  grid-area:nm; color:var(--navy);
  font-family:var(--font-display); font-size:3.3cqw; line-height:1.25;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.ej-newmc .rv-role{
  grid-area:rl; color:#7E869B;
  font-size:2.7cqw; line-height:1.5; text-transform:none; letter-spacing:normal;
}

/* Волосяной разделитель: отдельный узел в 1px по ширине контентной колонки.
   Не border у чипа - приёмка §7b п. 7 читает именно узел. */
.ej-newmc .rv-div{
  display:block; width:100%; height:1px; margin-top:3.9cqw;
  background:rgba(21,27,99,0.10);
}

.ej-newmc .rv-chip{
  display:flex; align-items:center; gap:2.2cqw; margin-top:3.1cqw;
  color:var(--navy); font-size:2.7cqw; line-height:1.4;
}
.ej-newmc .rv-shield{ flex:0 0 auto; width:4.6cqw; height:5.2cqw; color:var(--red); }

/* Кнопка прижата к нижнему краю контентной колонки: весь запас высоты панели
   уходит наверх, поэтому отбивка над кнопкой не пересчитывается при смене
   числа строк цитаты. Высота задана явно - её доля от высоты панели проверяется
   приёмкой (§7b п. 8). Регистр задан копией в разметке: на странице `.btn` стоит
   `text-transform:none`, так что CSS его не переписывает (v2.22 - капс снят). */
.ej-newmc .rv-btn{
  align-self:flex-start; margin-top:auto;
  height:11cqw; padding:0 6.2cqw; font-size:3.1cqw; gap:1.3em;
  min-height:0; letter-spacing:.02em;
}
.ej-newmc .rv-btn .arw{ width:1.55em; height:1.05em; }

/* Одна колонка: панель уходит ПОД фото, а не поверх - иначе на узком экране
   она легла бы на фигуру человека (приёмка §7b п. 9 проверяет непересечение).
   Внутри панели cqw больше не годятся: контейнер стал во всю ширину секции, и
   4.4cqw дали бы цитату в 40px. Поэтому в этом блоке все размеры в px. */
@media (max-width:1000px){
  .ej-newmc .rv-panel{
    position:static; width:auto; container-type:normal;
    margin-top:14px; border-radius:14px;
    background:var(--white); border:1px solid var(--line);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .ej-newmc .rv-body{ height:auto; padding:30px 32px 32px; }
  .ej-newmc .rv-stars{ font-size:22px; letter-spacing:7px; margin-left:0; }
  /* Знак кавычки в одну колонку уходит в левый жёлоб цитаты, а не за её правый
     край: справа он ложился прямо на текст первой строки (замер 430 и 820). */
  .ej-newmc .rv-quote{ margin-top:18px; font-size:20px; line-height:30px; padding-left:38px; }
  .ej-newmc .rv-quote::before{
    left:0; top:-14px; font-size:72px; }
  .ej-newmc .rv-swoosh{ width:100px; height:10px; margin-top:18px; }
  .ej-newmc .rv-who{ margin-top:16px; }
  .ej-newmc .rv-nm{ font-size:17px; }
  .ej-newmc .rv-role{ font-size:14px; }
  .ej-newmc .rv-div{ margin-top:20px; }
  .ej-newmc .rv-chip{ gap:11px; margin-top:16px; font-size:14px; }
  .ej-newmc .rv-shield{ width:22px; height:25px; }
  .ej-newmc .rv-btn{ margin-top:24px; height:54px; padding:0 28px; font-size:15px; }
  .ej-newmc .rv-btn .arw{ width:1.05em; height:.8em; }
}
@media (max-width:560px){
  .ej-newmc .reviews .wrap{ padding-left:20px; padding-right:20px; }
  .ej-newmc .rv-body{ padding:24px 20px 26px; }
  .ej-newmc .rv-quote{ font-size:18px; line-height:27px; padding-left:30px; }
  .ej-newmc .rv-quote::before{ font-size:60px; top:-12px; }
  .ej-newmc .rv-btn{ width:100%; justify-content:center; }
}

/* --- 10. FAQ: читаемый ----------------------------------------------------
   DM 7926: «extremely thin and almost disappears». Растут кегль вопроса,
   вертикальные отступы, разделители, аффорданс плюса и ширина контейнера. */
.ej-newmc .faq-wrap{ max-width:860px; }
.ej-newmc .faq-item{ border-bottom:1px solid var(--line); }
.ej-newmc .faq-item:first-of-type{ border-top:1px solid var(--line); }
.ej-newmc .faq-q{ font-size:18px; font-weight:600; color:var(--navy); padding:22px 4px; gap:20px; }
.ej-newmc .faq-q .plus{
  flex-shrink:0; width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--white);
}
.ej-newmc .faq-a p{ font-size:15px; line-height:1.65; color:var(--slate); padding:0 60px 24px 4px; }
/* потолок анимации в теме 200px; с новым кеглем самые длинные ответы (о load
   board и о гарантии фрахта) в него не влезают и обрезаются на середине. */
.ej-newmc .faq-item.open .faq-a{ max-height:520px; }

/* --- 11. Финальный блок ---------------------------------------------------
   DM 7927: вторая форма снята, кнопка скроллит к форме в hero.
   DM 7931: «Put that on navy… Then the page visually says we're done.» */
.ej-newmc .final{ background:var(--navy-deep); padding:76px 0; }
.ej-newmc .final h2{ font-size:34px; }
.ej-newmc .final p{ margin-bottom:0; }
.ej-newmc .final .cta-row{ margin-top:30px; }
.ej-newmc .final .btn-call{ color:var(--white); }
.ej-newmc .final-phone{ margin-top:20px; font-size:15px; color:rgba(255,255,255,0.65); }
.ej-newmc .final-phone a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }

/* --- 12. Прочее ----------------------------------------------------------- */
.ej-newmc .pain-quote{
  border-left:3px solid var(--red); padding:6px 0 6px 20px; margin:22px 0;
  font-family:var(--font-display); font-size:24px; color:var(--navy);
}
.ej-newmc .copy-narrow{ max-width:820px; }
.ej-newmc .why-copy p{ font-size:16px; }

@media (max-width:900px){
  .ej-newmc .offer-lead{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  /* 104 = отрисованный низ фиксированной шапки темы на 430/390/360 (78px, замер 27.08)
     + 26px воздуха. Прежние 84px давали зазор 6px — визуально шапка ложилась на eyebrow. */
  .ej-newmc .hero{ padding-top:104px; }
  .ej-newmc .num-grid{ grid-template-columns:1fr 1fr; row-gap:26px; }
  .ej-newmc .num-card:nth-child(3){ border-left:none; }
  .ej-newmc .step::after{ content:none; }
  .ej-newmc .offer-hero h3{ font-size:27px; }
  .ej-newmc .faq-q{ font-size:16px; }
  .ej-newmc .faq-a p{ padding-right:20px; }
  .ej-newmc .final h2{ font-size:25px; }
}
@media (max-width:560px){
  .ej-newmc .num-grid{ grid-template-columns:1fr; }
  .ej-newmc .num-card{ border-left:none; }
  .ej-newmc .lead-card{ padding:20px; }
  .ej-newmc .pain-quote{ font-size:20px; }
  .ej-newmc .mc-track{ grid-template-columns:repeat(2,1fr); }
}

/* --- 13. Синие поверхности: текст поверх них -------------------------------
   Оттенок прошёл три состояния за день: тёмный navy → #007DFE (DM 7989) →
   #151B63 (DM 8005, §0.3). Правки текста, сделанные под светлый синий, здесь
   пересмотрены под финальный тёмный, чтобы страница не осталась с наследством
   промежуточного варианта. Замеры (пары из отгружаемых значений, 28.08):

     * красный акцент #D62839 на #151B63 = 3.08:1 — как текст не годится
       (на промежуточном #007DFE было ещё хуже, 1.27:1). Поэтому заголовок героя
       «You can apply with us.» и eyebrow держат акцент заливкой, а не цветом
       букв: белый на #D62839 = 4.97:1.
     * полупрозрачные белые остаются сплошными: на #151B63 сплошной белый даёт
       15.34:1, запас есть на любом кегле, дробить его прозрачностью незачем.

   Плашки-панчлайна на светлом #3647F6 в отгруженной версии нет — блок снят при
   перестройке §8 (DM 8019); замер белого на ней 6.20:1 оставлен как история. */
.ej-newmc .hero .eyebrow{ color:var(--white); }
.ej-newmc .hero h1 .hl{
  color:var(--white); background:none;
  box-shadow:inset 0 -10px 0 0 var(--red); padding:0 2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.ej-newmc .hero p.sub,
.ej-newmc .trust-line,
.ej-newmc .final p,
.ej-newmc .final-phone,
.ej-newmc .num-card .c,
.ej-newmc .clock-caption,
.ej-newmc .clock-section .section-head p{ color:var(--white); }
.ej-newmc .link{ color:var(--white); }
.ej-newmc .btn-call{ border-color:rgba(255,255,255,0.75); }
/* линии-разделители внутри синего: 0.1 белого читалось на тёмном, на светлом нет */
.ej-newmc .proof{ border-top:1px solid rgba(255,255,255,0.35); }
.ej-newmc .num-card{ border-left-color:rgba(255,255,255,0.3); }

/* §14. Заголовки — регистр предложения вместо капса (Лена, DM 8010 28.08:
   «let's try not to use all caps in H1, H2 .it's hard to read»).
   В бою это правка строки 36 самой темы (text-transform:none, letter-spacing:0,
   line-height:1.2), а не переопределение здесь — иначе две копии одних значений
   разойдутся при первой же правке общего стиля. Периметр правки — h1–h3; h4 капса
   не несёт, а .pain-quote несла (text-transform:uppercase в своём же правиле выше)
   — снято по приёмке Aramis 29.08, п.20; греп по файлу тогда её пропустил.
   Кнопки — отдельным правилом ниже: у .btn капс задан своим блоком (строка 39). */
/* 28.08, DM 8019: в присланном макете кнопка набрана «I'm ready to apply», а не капсом.
   Тема держит капс на .btn отдельным правилом — §14 его не снимала, она била только
   по заголовкам. Снимаю по всем кнопкам, а не по одной в этом блоке: разный регистр
   у шести CTA на одной странице читается как дефект, а не как акцент. Начертание
   остаётся тематическим (Oswald), меняется только регистр и трекинг. */
.ej-newmc .btn{ text-transform:none; letter-spacing:0.01em; }

/* §14.1. Красная подчёркивающая плашка в H1 после снятия капса.
   Дефект, который §14 внесла: у капса выносных нет, и плашка (inset 0 -10px, то есть
   нижние 10 px строчного бокса) лежала под буквами чисто. На строчных «apply» хвосты p и y
   уходят на ~9 px ниже базовой линии — замер: бокс строки 65 px при кегле 44, хвост
   кончается примерно в 3 px от низа бокса, то есть внутри 10-пиксельной плашки. На снимке
   красная линия шла прямо сквозь p и y, читалось как зачёркивание.
   Чиню геометрией, а не толщиной: плашку увожу под бокс через padding-bottom (inline-padding
   не растит строку), а строке даю воздух, чтобы плашка первой строки не села на вторую. */
.ej-newmc .hero h1{ line-height:1.3; }
.ej-newmc .hero h1 .hl{
  padding:0 2px 7px;
  box-shadow:inset 0 -6px 0 0 var(--red);
}


/* --- 16. Кнопки: скругление и стрелка (28.08, DM 8086/8088/8089) --------------
   Елена утвердила кадр стены отзывов, в котором кнопка «See if you qualify» —
   скруглённая, со стрелкой вправо; на вопрос «менять везде или оставить» ответила
   «the whole page, according to the new mockup». Раскатываю на все восемь .btn и на
   .btn-call, а не на одну кнопку в секции: разный радиус у CTA на одной странице
   читается как дефект (та же логика, что при снятии капса в §14).

   Радиус 6px — замером кадра, не на глаз. У её кнопки высотой 54 px верхний ряд
   красного начинается на 4.5 px правее левой грани, следующий — на 2, третий — на 1,
   четвёртый выходит на грань. Отрендерил свою плашку 281×54 с радиусами 4/6/8 и снял
   тот же профиль: 4px даёт [2,1,0], 8px — [7,4,2,2], 6px ложится в наблюдённое [4.5,2,1,0].

   Стрелка — инлайновый SVG, а не глиф `&rarr;`. Кнопки набраны Oswald (тема), в нём
   стрелки нет: символ уезжает в шрифт подстановки, и начертание пляшет от машины к
   машине. SVG со stroke-ом даёт ровно ту тонкую линию с головкой, что в кадре, и красится
   currentColor — то есть работает и на красной кнопке, и на .btn-call.

   Размер стрелки взят от ВЫСОТЫ ПРОПИСНОЙ, а не от кегля: у неё кнопка набрана шрифтом
   тела (замер: ширина строки 152 px при cap 15 — это Inter ~19px; Oswald той же ширины
   даёт cap 15 при 18px и ширину 126, то есть узкий, он исключён), у нас Oswald 15px.
   Кегли несопоставимы, прописные — сопоставимы. В кадре стрелка 18×14 при cap 15, то есть
   0.93 cap по высоте и 1.29 по ширине; наш cap на Oswald 15px = 13 → 12×15.5 px.
   В em это 0.8em по высоте и 1.05em по ширине — так она переживает и 16px в .req-cta,
   и мобильные кегли. Зазор до текста в кадре — 1.6 cap, у нас 1.3em (≈20 px).

   display:inline-flex нужен ради вертикального центра стрелки по строке: у block-кнопок
   стрелка вставала по базовой линии и висела ниже прописных. Ширины кнопок от этого не
   меняются — они и так шринк-ту-фит внутри флексовых родителей (замер до/после в §8.28). */
.ej-newmc .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1.3em;
  border-radius:6px;
}
.ej-newmc .btn-call{ border-radius:6px; }
.ej-newmc .btn .arw{ flex:0 0 auto; width:.95em; height:.68em; }
.ej-newmc .submit-btn.btn{ width:100%; }

/* --- 17. Капча на узких телефонах (29.08, п. 28 спеки, вариант B) ------------
   Дефект: виджет Turnstile отдаётся ровно 300px и не сжимается. Через
   min-content он задаёт .lead-card 340px, а с паддингами .wrap 24+24 это 364
   при вьюпорте 360. section.hero{overflow-x:hidden} превращает эти 4px в тихую
   обрезку правого скругления карточки, поэтому по документу скролла нет, а
   дефект есть. Замер до правки на 360 CSS-px с подавленным скроллбаром:
   heroScroll 364 при heroClient 360, .lead-card 24..364.

   Решение Богдана (чат -1003702466461, msg 12885): обёртке капчи фиксируем
   270px и уводим виджет в scale(0.90). 300 * 0.90 = 270, то есть отрисованная
   ширина совпадает с шириной коробки ровно, без зазора и без обрезки. Именно
   width на обёртке чинит min-content: у блока с заданной шириной вклад в
   min-content равен этой ширине, а 300px ребёнка наружу больше не проступают.

   transform не трогает раскладку, поэтому лишней высоты правка не добавляет -
   ради этого вариант A с data-size="compact" и отклонён: он давал +92px. На
   360 карточка всё же подрастает с 818.81 до 836.2, но не от scale: она
   сужается на 28px, и абзац SMS-согласия добирает одну строку. На 375 и 390
   высота остаётся 818.81.

   transform-origin именно left top: по умолчанию center вписал бы виджет с
   отступом 13.5px слева, и капча перестала бы совпадать по левому краю с
   полями формы.

   Порог 387, а не 400: контентная коробка карточки = vw - 88 (24+24 у .wrap,
   20+20 у .lead-card на <=560), капче нужно 300, значит дефект живёт при
   vw <= 387. На 390 коробка 302 и капча влезает с зазором 2px - там правка
   только уменьшала бы виджет до 243 и оставляла 59px пустоты, поэтому 390
   (самая ходовая ширина айфона) остаётся нетронутой. На 375 без правки
   карточка 24..364 при вьюпорте 375, вылет 13px - её порог накрывает. */
@media (max-width:387px){
  .ej-newmc .lead-card .ej-newmc-cap{
    width:270px;
    transform:scale(0.90);
    transform-origin:left top;
  }
}
/* §15. Above-the-fold: иерархия вместо пяти одинаково громких блоков.
   Утверждено Леной 09.09.2026 (DM 9699). Правится тон и воздух, не копия.

   15.1 Шапка. `body:has(.hot-offer.flex) .header{padding-top:5.5rem}` в main.min.css
   резервировала 88px под промо-полосу, которую наша же прошлая правка погасила через
   `display:none` (строка 382). `display:none` не выключает `:has()` — класс остаётся
   на узле, селектор продолжает матчиться. Шапка держала 88px пустоты.

   15.2 Серая «пилюля» под меню красится в main.min.css селектором
   `.header .container .header-block .header-wrapper > ul::before` — это (0,4,1).
   Короткий оверрайд (0,2,2) ей проигрывает и молча не работает. Поэтому цепочка темы
   повторена целиком и добавлен `.postid-11044`. `!important` не нужен и не ставится.

   15.3 Все правила шапки скоупятся `.postid-11044`: файл и так подключается mu-plugin'ом
   только на этом посте, но радиус правки должен читаться из самой CSS, а не из PHP.

   15.4 Шкала прозрачностей считана по WCAG к фактическому фону `rgb(21,27,99)`:
   1.00 = 15.34:1 · 0.72 = 8.44:1 · 0.58 = 5.94:1 · 0.55 = 5.47:1. Пол для текста —
   0.50 (4.77:1). 0.10 несёт только разделители и текста под собой не имеет.

   15.5 Список селекторов полей повторяет строку 80 файла (select + text + tel + email)
   намеренно. Короткий `input[type]` кажется тем же самым, но задевает ещё и оба чекбокса
   согласия внутри `.ej-state-hmore`: проверено пробой на живой странице — с ним
   `background-color` чекбокса становится `rgb(255,255,255)` вместо прозрачного, без него
   возвращается. Чекбокс нативный, красится `accent-color:var(--red)`, и трогать его
   заказчик не просил. Блок `.ej-state-hmore` раскрывается только после первого ввода,
   поэтому на утверждённом скриншоте этого не видно. Селектор не сокращать. */

body.postid-11044:has(.hot-offer.flex) .header{ padding-top:2.25rem; }
.postid-11044 header.header .container .header-block .header-wrapper > ul::before{ background:none; backdrop-filter:none; }
.postid-11044 header.header .container .header-block .header-wrapper > ul .divider{ background:rgba(255,255,255,0.18); }
.postid-11044 header.header .header-wrapper > ul li a{ font-weight:400; color:rgba(255,255,255,0.82); }
.postid-11044 header.header .main__button{ background:none; color:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.30); border-radius:6px; font-weight:500; }

.ej-newmc .hero{ padding-top:152px; }
.ej-newmc .hero .eyebrow{ font-size:11px; color:rgba(255,255,255,0.55); margin-bottom:16px; }
.ej-newmc .hero h1{ font-size:36px; margin-bottom:24px; max-width:470px; }
.ej-newmc .hero h1 .hl{ box-shadow:none; padding:0; }
.ej-newmc .hero p.sub{ font-size:17px; color:rgba(255,255,255,0.72); margin-bottom:12px; max-width:450px; }
.ej-newmc .trust-line{ font-size:14px; color:rgba(255,255,255,0.58); margin-top:0; margin-bottom:34px; max-width:450px; }
.ej-newmc .trust-line strong{ font-weight:400; color:rgba(255,255,255,0.58); }
.ej-newmc .hero-actions{ gap:26px; margin-bottom:0; }
.ej-newmc .hero .btn-call{ background:none; border:0; border-radius:0; padding:12px 0;
  color:rgba(255,255,255,0.72); font-weight:500; }
.ej-newmc .lead-card{ padding:24px; max-width:440px; box-shadow:0 10px 24px rgba(0,0,0,0.14); }
.ej-newmc .lead-card h3{ font-size:16px; }
.ej-newmc .lead-card .form-group{ margin-bottom:10px; }
.ej-newmc .lead-card select,
.ej-newmc .lead-card input[type="text"],
.ej-newmc .lead-card input[type="tel"],
.ej-newmc .lead-card input[type="email"]{ background:#fff; border:1px solid #E3E5EE; }
.ej-newmc .proof{ padding:56px 0; border-top:1px solid rgba(255,255,255,0.10); }
.ej-newmc .num-card{ border-left-color:rgba(255,255,255,0.10); }
.ej-newmc .num-card .n{ font-size:24px; }
.ej-newmc .num-card .c{ font-size:12px; color:rgba(255,255,255,0.55); margin-top:6px; }
.ej-newmc .num-card .num-tag{ background:none; color:rgba(255,255,255,0.55); padding:0;
  margin-top:8px; font-size:10px; font-weight:500; letter-spacing:0.08em; }
@media (min-width:900px){
  .ej-newmc .hero-inner{ grid-template-columns:minmax(0,1fr) 440px; gap:80px; align-items:start; }
}

/* ============================================================================
 * §16 (09.09.2026) — секция .drive: копия слева, карточка типов техники справа.
 * Источник: макет Лены DM 9706 (1280×720). Копия не менялась, менялась раскладка.
 * ========================================================================== */
/* Заливка = токен темы --cream #EDF2FC. Пипетка по макету даёт #F7FAFF, но против нашего
   чисто-белого фона секции (#FFFFFF) эта дельта в 8/5/0 не читается как голубая —
   Лена, DM 9751. У .ch-white .card-surface (строка 350) --cream и стоит по умолчанию:
   это и есть тот фон, который §16 раньше затирал белым. --ice-line оставлен. */
.ej-newmc{ --ice:#EDF2FC; --ice-line:#E4EBF5; }
.ej-newmc .drive-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 408px; gap:56px; align-items:start;
}
.ej-newmc .equip-card.card-surface{ background:var(--ice); border-color:var(--ice-line); }
.ej-newmc .equip-card{ border-radius:14px; padding:24px 28px; }
.ej-newmc .equip-card h3{ font-size:19px; color:var(--navy); margin:0 0 10px; }
.ej-newmc .equip-list{ list-style:none; margin:0; padding:0; }
.ej-newmc .equip-list li{
  display:flex; align-items:center; gap:28px;
  padding:8px 0; border-bottom:1px solid var(--ice-line);
}
.ej-newmc .equip-list li:last-child{ border-bottom:none; }
.ej-newmc .equip-list img{ width:170px; height:90px; object-fit:contain; flex-shrink:0;
                           mix-blend-mode:multiply; }
.ej-newmc .equip-text{ display:block; min-width:0; }
.ej-newmc .equip-text b{ display:block; font-size:16px; color:var(--ink); font-weight:600; }
.ej-newmc .equip-text span{ display:block; font-size:13px; color:var(--slate); margin-top:2px; }

/* Кегль снят с макета DM 9745: там H2 в две строки, интерлиньяж 55 при ширине слайда 1280.
   Именно он равняет низ копии с низом карточки. Область действия — только .drive и только
   там, где колонки стоят рядом: глобальный .section-head h2 (строка 90) не трогаем. */
@media (min-width:1120px){
  .ej-newmc .drive .section-head h2{ font-size:48px; line-height:1.15; margin-bottom:20px; }
  .ej-newmc .drive .why-copy p{ font-size:17px; line-height:1.62; margin-bottom:16px; }
  .ej-newmc .drive .cta-row{ margin-top:40px; }
  .ej-newmc .drive .btn{ font-size:17px; padding:20px 32px; }
}

/* Кап держит копию на её нынешнем измерении 568px, поэтому перенос строк не
   меняется, высота колонки остаётся 500 и низ копии по-прежнему на 10px выше
   низа карточки — приёмка 09.09. Контроль: со снятым капом зазор уходит в
   37.6 на 1200..1920 и высота копии падает 500 -> 472. */
@media (min-width:1024px){ .ej-newmc .drive .why-copy{ max-width:568px; } }

@media (max-width:1119px){
  .ej-newmc .drive-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .ej-newmc .equip-list img{ width:120px; height:64px; }
  .ej-newmc .equip-list li{ gap:12px; }
}

.ej-newmc .offer-v2{ position:relative; overflow:hidden; background:var(--white); padding:64px 0 0; }
.ej-newmc .offer-v2 .wrap{ position:relative; z-index:1; }
.ej-newmc .offer-v2 .offer-art{
  position:absolute; right:0; bottom:0; z-index:0;
  width:53.5%; max-width:770px; height:auto; display:block; pointer-events:none;
  /* the art is shorter than the copy column at narrow desktop widths, so its own
     top edge would draw a faint line across the section; fade it into the ground */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 56px);
}
.ej-newmc .offer-v2-copy{ max-width:574px; padding-bottom:64px; }
.ej-newmc .offer-v2 .mc-chip{ margin-bottom:18px; }
.ej-newmc .offer-v2 .section-head{ max-width:none; margin-bottom:0; }
.ej-newmc .offer-v2-lead{ color:var(--slate); font-size:17px; line-height:1.6; margin-top:22px; }
.ej-newmc .offer-v2-feats{ list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ej-newmc .offer-v2-feats li{ margin:0; padding:0; }
.ej-newmc .offer-v2-feats .ic{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; background:var(--ice);
  color:var(--navy); margin-bottom:12px; }
.ej-newmc .offer-v2-feats .ic svg{ width:30px; height:30px; }
.ej-newmc .offer-v2-feats b{ display:block; font-family:var(--font-body); font-weight:600;
  font-size:16px; line-height:1.3; color:var(--navy); margin-bottom:6px; }
.ej-newmc .offer-v2-feats .d{ display:block; font-size:15px; line-height:1.42; color:var(--slate); }
.ej-newmc .offer-v2 .cta-row{ margin-top:30px; }
.ej-newmc .offer-v2 .btn{ font-size:17px; padding:18px 32px; }
.ej-newmc .offer-v2-note{ display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--slate); margin-top:18px; }
.ej-newmc .offer-v2-note svg{ width:15px; height:15px; flex:0 0 auto; }
@media (min-width:1024px){
  /* The section is one fixed composition in the mockup, so copy, type and art
     scale together with the viewport instead of the copy staying pinned. */
  .ej-newmc .offer-v2{ min-height:48.8vw; padding-top:clamp(48px,4.89vw,64px); }
  .ej-newmc .offer-v2-copy{ max-width:min(574px,44vw); padding-bottom:clamp(48px,4.89vw,64px); }
  .ej-newmc .offer-v2 .section-head h2{ font-size:clamp(36px,3.67vw,48px); line-height:1.15; margin:0; }
  .ej-newmc .offer-v2-lead{ font-size:clamp(16px,1.30vw,17px); margin-top:clamp(17px,1.68vw,22px); }
  /* the three titles do not all fit on one line, so let the li dissolve and put
     icon, title and description on shared grid rows; otherwise the descriptions
     start at different heights across the columns */
  .ej-newmc .offer-v2-feats{ margin-top:clamp(22px,2.29vw,30px);
    grid-template-rows:auto auto auto; grid-auto-flow:column;
    row-gap:0; column-gap:clamp(11px,1.07vw,14px); }
  .ej-newmc .offer-v2-feats li{ display:contents; }
  .ej-newmc .offer-v2-feats .ic{ width:clamp(55px,4.89vw,64px); height:clamp(55px,4.89vw,64px);
    margin-bottom:clamp(10px,0.92vw,12px); }
  .ej-newmc .offer-v2-feats .ic svg{ width:clamp(26px,2.29vw,30px); height:clamp(26px,2.29vw,30px); }
  .ej-newmc .offer-v2-feats b{ font-size:clamp(15px,1.22vw,16px); }
  .ej-newmc .offer-v2-feats .d{ font-size:clamp(14px,1.15vw,15px); }
  .ej-newmc .offer-v2 .cta-row{ margin-top:clamp(22px,2.29vw,30px); }
  .ej-newmc .offer-v2 .btn{ font-size:clamp(16px,1.30vw,17px);
    padding:clamp(16px,1.38vw,18px) clamp(27px,2.44vw,32px); }
  .ej-newmc .offer-v2-note{ font-size:clamp(12.5px,0.99vw,13px); margin-top:clamp(14px,1.38vw,18px); }
}
@media (min-width:1441px){ .ej-newmc .offer-v2{ min-height:702px; } }
@media (max-width:1023px){
  /* the art is the first child in source order so it can sit behind the copy on
     desktop; stacked, the section must still open with the heading */
  .ej-newmc .offer-v2{ padding:56px 0 0; display:flex; flex-direction:column; }
  .ej-newmc .offer-v2 .wrap{ order:1; }
  .ej-newmc .offer-v2 .offer-art{ order:2; }
  .ej-newmc .offer-v2-copy{ max-width:none; padding-bottom:32px; }
  .ej-newmc .offer-v2 .offer-art{ position:static; width:100%; max-width:640px; margin:0 auto; }
  .ej-newmc .offer-v2-feats{ grid-template-columns:1fr; gap:22px; }
  .ej-newmc .offer-v2-feats li{ display:grid; grid-template-columns:64px 1fr; column-gap:16px; }
  .ej-newmc .offer-v2-feats .ic{ grid-row:1 / span 2; margin-bottom:0; }
  .ej-newmc .offer-v2-feats b{ align-self:end; }
}

/* Authority-age band. Lives between .offer and .drive: keeps the proof strip the
   replacement mockup dropped, and restores the tinted break between three white
   sections in a row. */
.ej-newmc .offer-mc{ padding:34px 0; }
.ej-newmc .offer-mc-in{ display:grid; grid-template-columns:minmax(260px,1fr) 1.35fr;
  gap:32px; align-items:center; }
.ej-newmc .offer-mc .mc-chip{ margin-bottom:12px; }
.ej-newmc .offer-mc-head h3{ font-size:26px; color:var(--navy); line-height:1.15; margin:0 0 6px; }
.ej-newmc .offer-mc-head p{ font-size:15px; color:var(--slate); margin:0; }
/* the shared .seg sits on --bg, a warm beige that clashes with the cool band */
.ej-newmc .offer-mc .mc-track .seg{ background:var(--white); }
.ej-newmc .offer-mc .mc-track{ margin-top:0; }
.ej-newmc .offer-mc .mc-track-note{ margin-top:10px; }
@media (max-width:1023px){
  .ej-newmc .offer-mc{ padding:28px 0; }
  .ej-newmc .offer-mc-in{ grid-template-columns:1fr; gap:18px; }
  .ej-newmc .offer-mc-head h3{ font-size:23px; }
}
/* ============================================================================
 * §17 (10.09.2026) — композиция страницы: акты вместо чередующихся полос.
 * Источник: Лена, DM 9902 «fix it as one complete page», DM 9909 (карточка
 * техники слева, текст справа), согласие DM 9913.
 * Меняются грунт секций, кегль H2, вертикальный ритм и порядок колонок .drive.
 * Разметка, копия, картинки, скрипты и брейкпоинты темы не трогаются.
 * ========================================================================== */

/* Две секции класса своего не имеют, только .ch-cream / .ch-white, поэтому
   адресуются :not()-цепочками. nth-child не годится: порядок секций меняли
   в августе трижды.
     how it works           = .ej-newmc > .ch-cream:not(.offer-mc):not(.reviews)
     what you need to apply = .ej-newmc > .ch-white:not(.why):not(.offer):not(.drive):not(.faq) */

/* ===== 17.1. ГРУНТЫ: цвет меняется на границе смысловой группы ===== */
.ej-newmc .why.ch-white          { background: var(--ice); }
.ej-newmc .offer-mc.ch-cream     { background: #151B63; color:#fff; }
.ej-newmc .offer-mc h3           { color:#FFFFFF; }
.ej-newmc .offer-mc > .wrap p,
.ej-newmc .offer-mc .offer-mc-head p { color:rgba(255,255,255,.78); }
.ej-newmc .offer-mc .offer-mc-track p,
.ej-newmc .offer-mc .mc-track + p    { color:rgba(255,255,255,.72); }
/* белая пилюля и белые карточки дней остаются белыми: на тёмном они и есть акцент */
.ej-newmc > .ch-cream:not(.offer-mc):not(.reviews) { background: var(--white); }
.ej-newmc > .ch-white:not(.why):not(.offer):not(.drive):not(.faq) { background: var(--ice); }

/* карточка требований: контурная коробка на белом читалась каркасом,
   на голубом становится карточкой */
.ej-newmc .req-split { background: var(--white); border-color:#DDE4F2; }

/* ===== 17.2. ИЕРАРХИЯ ЗАГОЛОВКОВ ===== */
.ej-newmc .why .section-head h2,
.ej-newmc .why h2                                   { font-size:34px; line-height:1.18; }
.ej-newmc > .ch-white:not(.why):not(.offer):not(.drive):not(.faq) h2 { font-size:40px; line-height:1.15; }
.ej-newmc .reviews h2                               { font-size:32px; line-height:1.18; }
.ej-newmc .faq h2                                   { font-size:32px; line-height:1.18; }

/* ===== 17.3. РИТМ: акт 88/88, шов внутри акта 48/48 ===== */
.ej-newmc .why.ch-white   { padding-top:88px; padding-bottom:88px; }
.ej-newmc .offer          { padding-top:88px; padding-bottom:72px; }
.ej-newmc .offer-mc       { padding-top:40px; padding-bottom:40px; }
.ej-newmc .drive          { padding-top:88px; padding-bottom:48px; }
.ej-newmc > .ch-cream:not(.offer-mc):not(.reviews) { padding-top:48px; padding-bottom:88px; }
.ej-newmc > .ch-white:not(.why):not(.offer):not(.drive):not(.faq) { padding-top:88px; padding-bottom:48px; }
.ej-newmc .reviews        { padding-top:48px; padding-bottom:88px; }
.ej-newmc .faq            { padding-top:88px; padding-bottom:88px; }

/* ===== 17.4. .drive: 309px пустоты между колонками + перестановка ===== */
/* порог 1200, не 1024: на 1024 колонка 1fr сжимается до 319px и карточка
   вылезает за вьюпорт (замер: scrollWidth 1035 при clientWidth 1024).
   На 1024..1199 остаётся раскладка §16. */
/* по 9909: карточка с техникой слева, текст справа. Перестановка только
   визуальная, порядок в разметке не трогаем. */
/* Кап .why-copy 568px из §16 НЕ снимать: со снятым высота копии падает
   500 -> 472 и низ колонок расходится на 38px вместо 10 (перепроверено 10.09). */
@media (min-width:1200px){
  .ej-newmc .drive .drive-grid { grid-template-columns:1fr 620px; column-gap:72px; align-items:start; }
  /* колонка текста в этой секции называется .drive-copy, а не .why-copy:
     .why-copy лежит ВНУТРИ .drive-copy и ребёнком грида не является */
  .ej-newmc .drive .equip-card { order:1; }
  .ej-newmc .drive .drive-copy { order:2; max-width:620px; }
}

/* ===== 17.5. Красная марка у «How it works» =====
   в разметке это <span class="req-rule">, у этой секции его нет.
   Марка нужна, потому что шов drive -> how теперь внутриактовый:
   граница должна читаться намеренной, а не пропавшей.
   rgb(214,40,57) == var(--red) #D62839, геометрия скопирована с .req-rule (строка 516). */
.ej-newmc > .ch-cream:not(.offer-mc):not(.reviews) .section-head h2::after{
  content:''; display:block; width:56px; height:5px; border-radius:2px;
  background:rgb(214,40,57); margin-top:14px;
}

/* --- Шапка: фон-видео «дороги», тот же ролик, что на остальном сайте (10.09) --- */
.ej-newmc .hero{ background:transparent; }
.ej-newmc .hero .hero__video{ z-index:0; }
.ej-newmc .hero .hero__video:before{
  background:linear-gradient(180deg, rgba(10,13,48,0.88) 0%, rgba(21,27,99,0.90) 68%, rgba(21,27,99,1) 100%);
}
.ej-newmc .hero .hero-inner{ position:relative; z-index:1; }