/* ===========================================================================
   Страница услуги «Мегатираж» — приведение к брендбуку.

   Шаблон достался от донора (KD Bureau): классы bb-*, заголовки набраны
   IBM Plex Sans Condensed, блоков-схем нет. Здесь мы не переписываем шаблон,
   а перекрываем его визуальный слой той же editorial-системой, что уже стоит
   на прайсе, вопросах и территориях: сериф в заголовках, mono в кикерах,
   золото как единственный акцент.

   Файл подключается ПОСЛЕ kd-service.css, поэтому переопределяет его.
   =========================================================================== */

.bb-wrap{
  --mtc-navy:#0F1B3D; --mtc-navy-deep:#08122B; --mtc-gold:#B89254;
  --mtc-gold-dark:#8F6E3C; --mtc-gold-soft:#D9BD8D; --mtc-gold-bg:#F6EFE2;
  --mtc-cream:#F7F4EE; --mtc-line:#E3E0D8; --mtc-ink:#141A2A; --mtc-muted:#5C6478;
  --mtc-serif:"Source Serif 4","Playfair Display",Georgia,serif;
  --mtc-body:Manrope,"Segoe UI",sans-serif;
  --mtc-mono:"IBM Plex Mono","SFMono-Regular",monospace;
}

/* ---------- Типографика: сериф вместо донорского Condensed ---------- */
.bb-wrap h1,
.bb-wrap h2,
.cert-prose h2,
.bb-wrap .mtc-h{
  font-family:var(--mtc-serif)!important;
  font-weight:700;
  letter-spacing:-.022em;
  color:var(--mtc-navy);
  text-wrap:balance;
}
.cert-prose h2{font-size:clamp(26px,3vw,36px)!important;line-height:1.12!important;margin:46px 0 16px!important}
.cert-prose h3{font-family:var(--mtc-serif)!important;font-size:21px!important;font-weight:700;color:var(--mtc-navy)}
.cert-prose p{font-size:16px;line-height:1.78;color:#33405A}
.cert-prose li{font-size:15.5px;line-height:1.72}
.cert-prose li::marker{color:var(--mtc-gold)}

/* ---------- Таблицы: editorial вместо серых полос ---------- */
.cert-prose table{
  width:100%;margin:26px 0 30px;border-collapse:collapse;font-size:14.5px;
  border:1px solid var(--mtc-line);background:#fff;
}
.cert-prose thead th{
  padding:13px 16px;text-align:left;vertical-align:bottom;
  color:var(--mtc-navy);background:var(--mtc-gold-bg);
  border-bottom:2px solid var(--mtc-gold);
  font:700 11px/1.35 var(--mtc-mono);letter-spacing:.06em;text-transform:uppercase;
}
.cert-prose tbody td{padding:13px 16px;border-top:1px solid var(--mtc-line);line-height:1.6;color:#33405A}
.cert-prose tbody tr:nth-child(even){background:#FCFBF8}
.cert-prose tbody tr:hover{background:var(--mtc-gold-bg)}
.cert-prose tbody td:first-child{font-weight:600;color:var(--mtc-navy)}

/* ---------- Блок-схема этапов работы ---------- */
.mtc-flow{margin:44px 0 8px}
.mtc-flow__head{margin-bottom:26px}
.mtc-flow__kicker{display:block;margin-bottom:9px;color:var(--mtc-gold-dark);font:700 11px/1.4 var(--mtc-mono);letter-spacing:.14em;text-transform:uppercase}
.mtc-flow__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;border:1px solid var(--mtc-line);background:#fff}
.mtc-step{position:relative;padding:26px 22px 24px;border-right:1px solid var(--mtc-line)}
.mtc-step:last-child{border-right:0}
/* Стрелка перехода между шагами — рисуем, а не картинкой */
.mtc-step:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-7px;z-index:2;
  width:12px;height:12px;margin-top:-6px;background:#fff;
  border-top:1.6px solid var(--mtc-gold);border-right:1.6px solid var(--mtc-gold);
  transform:rotate(45deg);
}
.mtc-step__no{
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;
  color:var(--mtc-navy-deep);background:var(--mtc-gold);
  font:700 13px/1 var(--mtc-mono);
}
.mtc-step__title{margin:0 0 7px;color:var(--mtc-navy);font:700 16px/1.3 var(--mtc-serif)}
.mtc-step__text{margin:0;color:var(--mtc-muted);font-size:13.5px;line-height:1.6}
.mtc-step__meta{display:block;margin-top:11px;color:var(--mtc-gold-dark);font:600 10.5px/1.4 var(--mtc-mono);letter-spacing:.05em;text-transform:uppercase}

/* ---------- Как считается цена: наглядная формула ---------- */
.mtc-calc{margin:44px 0;padding:30px 32px;color:#fff;background:var(--mtc-navy-deep);position:relative;overflow:hidden}
.mtc-calc::before{content:"";position:absolute;inset:12px;border:1px solid rgba(217,189,141,.16);pointer-events:none}
.mtc-calc__kicker{position:relative;z-index:2;display:block;margin-bottom:8px;color:var(--mtc-gold-soft);font:700 11px/1.4 var(--mtc-mono);letter-spacing:.14em;text-transform:uppercase}
.mtc-calc h2{position:relative;z-index:2;margin:0 0 20px!important;color:#fff!important;font-size:clamp(22px,2.4vw,30px)!important}
.mtc-calc__formula{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.mtc-calc__cell{display:flex;min-width:120px;flex-direction:column;justify-content:center;padding:14px 16px;border:1px solid rgba(255,255,255,.2)}
.mtc-calc__cell b{margin-bottom:5px;color:var(--mtc-gold-soft);font:700 9px/1 var(--mtc-mono);letter-spacing:.1em;text-transform:uppercase}
.mtc-calc__cell span{font:700 15px/1.3 var(--mtc-body)}
.mtc-calc__op{display:grid;place-items:center;padding:0 4px;color:var(--mtc-gold-soft);font:400 22px/1 var(--mtc-serif)}
.mtc-calc__result{background:var(--mtc-gold-bg);border-color:var(--mtc-gold)}
.mtc-calc__result b{color:var(--mtc-gold-dark)}
.mtc-calc__result span{color:var(--mtc-navy)}
.mtc-calc__note{position:relative;z-index:2;max-width:70ch;margin:18px 0 0;color:rgba(255,255,255,.66);font-size:13px;line-height:1.65}

/* ---------- Диаграмма: доля времени по зонам ---------- */
.mtc-chart{margin:40px 0;padding:28px 30px;background:var(--mtc-cream);border:1px solid var(--mtc-line)}
.mtc-chart__kicker{display:block;margin-bottom:8px;color:var(--mtc-gold-dark);font:700 11px/1.4 var(--mtc-mono);letter-spacing:.14em;text-transform:uppercase}
.mtc-chart h2{margin:0 0 22px!important;font-size:clamp(20px,2.2vw,26px)!important}
.mtc-bar{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;align-items:center;gap:14px;margin-bottom:12px}
.mtc-bar__label{color:var(--mtc-navy);font-size:14px;font-weight:600}
.mtc-bar__track{position:relative;height:26px;background:#fff;border:1px solid var(--mtc-line);overflow:hidden}
.mtc-bar__fill{height:100%;background:linear-gradient(90deg,var(--mtc-navy),var(--mtc-gold));width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1)}
.mtc-bar__val{min-width:44px;text-align:right;color:var(--mtc-gold-dark);font:700 12px/1 var(--mtc-mono)}
.mtc-chart__note{margin:16px 0 0;color:var(--mtc-muted);font-size:12.5px;line-height:1.6}

/* ---------- Вопросы и ответы ---------- */
.mtc-faq{margin-top:52px}
.mtc-faq__head{margin-bottom:24px}
.mtc-faq__kicker{display:block;margin-bottom:9px;color:var(--mtc-gold-dark);font:700 11px/1.4 var(--mtc-mono);letter-spacing:.14em;text-transform:uppercase}
.mtc-faq h2{margin:0 0 10px!important}
.mtc-faq__lead{margin:0;color:var(--mtc-muted);font-size:14.5px;line-height:1.65}
.mtc-faq__items{border-top:1px solid var(--mtc-line)}
.mtc-faq details{background:#fff;border:1px solid var(--mtc-line);border-top:0}
.mtc-faq details:first-child{border-top:1px solid var(--mtc-line)}
.mtc-faq summary{display:flex;align-items:flex-start;gap:15px;padding:19px 22px;cursor:pointer;list-style:none;transition:background-color .2s ease}
.mtc-faq summary:hover{background:var(--mtc-gold-bg)}
.mtc-faq details[open] summary{background:var(--mtc-gold-bg)}
.mtc-faq__no{flex-shrink:0;padding-top:3px;color:var(--mtc-gold-dark);font:700 10px/1.4 var(--mtc-mono);letter-spacing:.06em}
.mtc-faq__q{flex:1;color:var(--mtc-navy);font:600 16.5px/1.45 var(--mtc-serif)}
.mtc-faq__chev{flex-shrink:0;width:11px;height:11px;margin-top:7px;border-right:1.8px solid var(--mtc-gold-dark);border-bottom:1.8px solid var(--mtc-gold-dark);transform:rotate(45deg);transition:transform .25s ease}
.mtc-faq details[open] .mtc-faq__chev{transform:rotate(-135deg);margin-top:11px}
.mtc-faq__a{padding:0 22px 21px 58px;border-top:1px solid var(--mtc-line)}
.mtc-faq__a p{margin:0;padding-top:16px;color:#33405A;font-size:14.5px;line-height:1.75}

/* ---------- Появление секций при прокрутке ---------- */
.mtc-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.mtc-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mtc-reveal{opacity:1;transform:none;transition:none}
  .mtc-bar__fill{transition:none}
}

@media (max-width:900px){
  .mtc-step{border-right:0;border-bottom:1px solid var(--mtc-line)}
  .mtc-step:last-child{border-bottom:0}
  .mtc-step:not(:last-child)::after{top:auto;right:50%;bottom:-7px;margin:0 -6px 0 0;transform:rotate(135deg)}
  .mtc-calc,.mtc-chart{padding:24px 20px}
  .mtc-bar{grid-template-columns:1fr;gap:6px}
  .mtc-bar__val{text-align:left}
  .mtc-faq__a{padding-left:22px}
}