/*
 * DNS (/modules/dns/): схемы разделов «02 / Проверка результата» и «03 / Размещение DNS-зон» — тем же языком, что
 * схемы «Установки» (Шелест 26.10.2026: «инфографика кардинально отличается… какие-то примитивные блоки»). Правила
 * взяты из module-install.css (сценарии PowerMTA и MailerQ: узел Хаба, провод, плита сервера, части кластера) и
 * перенесены в область .mp--dns; ниже — светлый вариант для раздела на светлом фоне. Файл ведётся руками: конвертер
 * макета его не пересобирает. Подключается после module-dns.css (layout_css в module-pages/dns/seo.ru.json).
 */
.mp.mp--dns .mp-mta-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:75px}
.mp.mp--dns .mp-mta-path{padding-top:24px;border-top:1px solid #b3c4cc24}
.mp.mp--dns .mp-mta-title{display:flex;align-items:center;gap:14px}
.mp.mp--dns .mp-mta-title h3{font-size:var(--t-h3);line-height:1.22;margin:0;font-weight:800;letter-spacing:-.02em}
.mp.mp--dns .mp-mta-title>span{font-size:var(--t-caption);color:#c79873;border:1px solid #9b765d55;border-radius:4px;padding:3px 7px}
.mp.mp--dns .mp-mta-path>p{font-size:var(--t-body);line-height:1.65;color:#9daeb9;max-width:510px;margin:16px 0 20px;min-height:72px}
.mp.mp--dns .mp-pmta-blueprint{display:flex;align-items:center;height:235px;position:relative;padding:20px 18px 24px 0;background:radial-gradient(ellipse at 70% 55%,#99704710,transparent 65%)}
.mp.mp--dns .mp-blueprint-origin{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:85px}
.mp.mp--dns .mp-hub-mark{height:38px;width:38px;border:1px solid #9f7855;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#67452e,#332a23);color:#d2a783;font-size:23px;font-weight:800;box-shadow:0 0 25px #b38a4c10}
.mp.mp--dns .mp-blueprint-origin strong{font-size:var(--t-caption);font-weight:700;color:#9aaeb9}
.mp.mp--dns .mp-blueprint-wire{height:1px;flex:1;background:linear-gradient(90deg,#b7885a,#75604a);position:relative;min-width:35px}
.mp.mp--dns .mp-blueprint-wire:after{content:"";position:absolute;left:0;top:-1px;width:5px;height:3px;background:#e4b88b;border-radius:3px;animation:mp-dns-site-link-flow 5s linear infinite}
.mp.mp--dns .mp-blueprint-wire span{position:absolute;top:-24px;left:40%;font-size:var(--t-label);color:#ab896a}
.mp.mp--dns .mp-server-plate{width:57%;border:1px solid #5b6a6b;border-radius:9px;background:linear-gradient(130deg,#2a363e,#1b262c);padding:21px 20px 16px;box-shadow:10px 12px 0 #202a31,11px 13px 0 #48535766}
.mp.mp--dns .mp-server-lights{float:right;display:flex;gap:4px}
.mp.mp--dns .mp-server-lights i{width:3px;height:3px;border-radius:100%;background:#b18c67}
.mp.mp--dns .mp-server-label{display:block;text-transform:uppercase;letter-spacing:.06em;color:#8198a5;font-size:var(--t-micro);margin-bottom:8px}
.mp.mp--dns .mp-server-plate>strong{font-size:22px;color:#e0d6c8;font-weight:700;letter-spacing:-.02em}
.mp.mp--dns .mp-server-bottom{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-label);color:#859aa8;border-top:1px solid #81939e25;margin-top:20px;padding-top:12px}
.mp.mp--dns .mp-system-tags{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}
.mp.mp--dns .mp-system-tags span{font-size:var(--t-label);color:#8ea3b0;padding:4px 8px;border:1px solid #8499a426;border-radius:4px}
.mp.mp--dns .mp-cluster-toggle{display:flex;gap:17px;margin-top:18px}
.mp.mp--dns .mp-cluster-toggle button{font-size:var(--t-caption);padding:0 0 6px;border-bottom:1px solid transparent;color:#8498a7}
.mp.mp--dns .mp-cluster-toggle button[aria-pressed=true]{color:#d8ad88;border-bottom-color:#b38865}
.mp.mp--dns .mp-cluster-blueprint{height:198px;background:radial-gradient(ellipse at center,#9c704218,transparent 70%);padding-top:17px;animation:mp-dns-site-panel-in .25s ease-out}
.mp.mp--dns .mp-cluster-caption{font-size:var(--t-micro);letter-spacing:.06em;color:#768e9e;text-transform:uppercase;margin-bottom:16px}
.mp.mp--dns .mp-cluster-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mp.mp--dns .mp-cluster-parts>div{border:1px solid #5f6f746e;border-radius:6px;padding:14px 11px;background:linear-gradient(135deg,#2b3840,#202b31);min-width:0}
.mp.mp--dns .mp-cluster-parts>div:first-child{border-color:#ae805d90;background:linear-gradient(135deg,#45372b,#302a25)}
.mp.mp--dns .mp-cluster-parts small{display:block;font-size:var(--t-micro);color:#7e96a4;white-space:nowrap}
.mp.mp--dns .mp-cluster-parts strong{display:block;font-size:var(--t-body);font-weight:700;color:#d3dee3;margin-top:4px}
.mp.mp--dns .mp-cluster-parts>div:first-child small{color:#bd9c7f}
.mp.mp--dns .mp-cluster-parts>div:first-child strong{color:#e1bc9a}
.mp.mp--dns .mp-cluster-bus{height:23px;border:1px solid #a8805c77;border-top:0;border-radius:0 0 7px 7px;margin-inline:16.5%;position:relative}
.mp.mp--dns .mp-cluster-bus:before{content:"";position:absolute;left:50%;top:0;height:100%;border-left:1px solid #a8805c77}
.mp.mp--dns .mp-cluster-blueprint>p{text-align:center;font-size:var(--t-label);color:#8c9eaa;margin:12px 0 0}
.mp.mp--dns .mp-launch-map-header .mp-hub-mark{width:29px;height:29px;font-size:18px;border-radius:8px}
@media(max-width:1200px){
.mp.mp--dns .mp-mta-comparison,.mp.mp--dns .mp-requirements-grid{gap:45px}
.mp.mp--dns .mp-cluster-parts{gap:8px}
.mp.mp--dns .mp-cluster-parts strong{font-size:var(--t-list)}
.mp.mp--dns .mp-cluster-parts>div{padding:12px 8px}
}
@media(max-width:1020px){
.mp.mp--dns .mp-mta-comparison,.mp.mp--dns .mp-requirements-grid{gap:35px}
.mp.mp--dns .mp-cluster-parts small{font-size:9.5px}
.mp.mp--dns .mp-cluster-parts strong{font-size:var(--t-caption)}
.mp.mp--dns .mp-mta-title h3{font-size:var(--t-h3);letter-spacing:-.02em}
.mp.mp--dns .mp-server-plate{padding:17px 15px}
.mp.mp--dns .mp-server-plate>strong{font-size:19px}
}
@media(max-width:900px){
.mp.mp--dns .mp-mta-comparison{gap:30px}
.mp.mp--dns .mp-mta-path>p{min-height:95px;font-size:var(--t-list)}
.mp.mp--dns .mp-cluster-toggle{gap:12px}
.mp.mp--dns .mp-cluster-toggle button{font-size:var(--t-label)}
.mp.mp--dns .mp-cluster-parts{gap:6px}
.mp.mp--dns .mp-cluster-parts strong{font-size:var(--t-caption)}
.mp.mp--dns .mp-pmta-blueprint{height:230px}
.mp.mp--dns .mp-blueprint-origin{min-width:65px}
.mp.mp--dns .mp-server-bottom{font-size:var(--t-micro)}
.mp.mp--dns .mp-system-tags span{font-size:var(--t-micro)}
}
@media(max-width:700px){
.mp.mp--dns .mp-mta-comparison{grid-template-columns:1fr;gap:36px}
.mp.mp--dns .mp-mta-path{padding-top:20px}
.mp.mp--dns .mp-mta-title h3{font-size:var(--t-h3);letter-spacing:-.02em}
.mp.mp--dns .mp-mta-path>p{min-height:0;font-size:var(--t-body);margin:15px 0 10px;max-width:100%}
.mp.mp--dns .mp-pmta-blueprint{height:210px;padding-inline:3px 18px;max-width:480px}
.mp.mp--dns .mp-blueprint-origin{min-width:80px}
.mp.mp--dns .mp-server-plate{width:55%;padding:19px 17px}
.mp.mp--dns .mp-server-plate>strong{font-size:21px}
.mp.mp--dns .mp-server-bottom{font-size:var(--t-label)}
.mp.mp--dns .mp-cluster-toggle{gap:22px;margin-top:22px}
.mp.mp--dns .mp-cluster-toggle button{font-size:var(--t-caption)}
.mp.mp--dns .mp-cluster-blueprint{height:auto;min-height:200px;max-width:490px;padding-top:22px}
.mp.mp--dns .mp-cluster-parts{gap:10px}
.mp.mp--dns .mp-cluster-parts>div{padding:13px 9px}
.mp.mp--dns .mp-cluster-parts strong{font-size:var(--t-small)}
.mp.mp--dns .mp-cluster-parts small{font-size:9.5px}
.mp.mp--dns .mp-cluster-blueprint>p{font-size:var(--t-label)}
.mp.mp--dns .mp-system-tags{margin:17px 0}
.mp.mp--dns .mp-system-tags span{font-size:var(--t-label)}
}
@media(max-width:370px){
.mp.mp--dns .mp-cluster-parts{gap:7px}
.mp.mp--dns .mp-cluster-parts strong{font-size:var(--t-caption)}
}
@media(prefers-reduced-motion:reduce){
.mp.mp--dns .mp-blueprint-wire:after,.mp.mp--dns .mp-hero-screen-panel,.mp.mp--dns .mp-cluster-blueprint,.mp.mp--dns .mp-process-screens>div[role=tabpanel]{animation:none}
}

@keyframes mp-dns-site-link-flow{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:95%;opacity:0}}
@keyframes mp-dns-site-panel-in{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Светлый раздел: те же схемы, цвета — со светлых разделов страницы. */
.mp.mp--dns .mp-light .mp-mta-path{border-top-color:#cfd8de}
.mp.mp--dns .mp-light .mp-mta-title>span{color:#8f5f39;border-color:#c9a88b}
.mp.mp--dns .mp-light .mp-mta-path>p{color:#5f717c}
.mp.mp--dns .mp-light .mp-pmta-blueprint{background:radial-gradient(ellipse at 70% 55%,#c2895714,transparent 65%)}
.mp.mp--dns .mp-light .mp-blueprint-origin strong{color:#5f717c}
.mp.mp--dns .mp-light .mp-blueprint-wire span{color:#9a6c47}
.mp.mp--dns .mp-light .mp-server-plate{border-color:#c6d0d6;background:linear-gradient(130deg,#fff,#eef2f4);box-shadow:10px 12px 0 #e3e9ec,11px 13px 0 #c6d0d666}
.mp.mp--dns .mp-light .mp-server-label{color:#7a8c96}
.mp.mp--dns .mp-light .mp-server-plate>strong{color:#1f2a32}
.mp.mp--dns .mp-light .mp-server-bottom{color:#6b7e89;border-top-color:#d3dbe0}
.mp.mp--dns .mp-light .mp-system-tags span{color:#5f727d;border-color:#c9d3d9}
/* Короткое значение записи в плите — моноширинным, как в интерфейсе. */
.mp.mp--dns .mp-server-plate>strong.mp-dns-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;letter-spacing:0}
.mp.mp--dns .mp-cluster-parts strong.mp-dns-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0}
/* Ссылка под схемой: у макета она под тёмный фон — на светлом цвет ссылок светлых разделов. */
.mp.mp--dns .mp-light .mp-mta-path .mp-method-link{color:#9b5a2c}
/* На телефоне значение записи в узкой ячейке переносится, а не обрезается краем. */
@media(max-width:600px){.mp.mp--dns .mp-cluster-parts strong.mp-dns-value{font-size:var(--t-label);overflow-wrap:anywhere}}