.x12{--navy:#153953;--blue:#00a3e1;--teal:#008eaa;--ink:#1d2b36;--mut:#5b6b78;--bg:#f2f2f2;--line:#dfe5e9;
	--grid:#9fb1bd;--zebra:#e8eef2;
	font-family:Roboto,Arial,sans-serif;color:var(--ink);font-size:16px;line-height:1.55;overflow-x:clip;background:#fff}
.x12 *,.x12 *::before,.x12 *::after{box-sizing:border-box}
:where(.x12) :where(h1,h2,p,ul,table){margin:0;padding:0}
:where(.x12) ul{list-style:none}
.x12-wrap{max-width:1440px;margin:0 auto;padding-left:15px;padding-right:15px}
.x12-sec{padding:calc(35px + 25*(min(100vw,1440px) - 330px)/1110) 0}
.x12-h2{margin-bottom:28px;line-height:1.2}
.x12-faq details>div>p+p{margin-top:10px}
.x12-sub{max-width:820px;color:var(--mut);font-size:18px;margin:-8px 0 32px}
.x12-note{font-size:13px;color:var(--mut);margin-top:12px;max-width:none}
:where(.x12) p+p{margin-top:14px}
.x12-two{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.x12-two--top{align-items:start;grid-template-columns:1fr 1.3fr}

/* плитки каталога сайта */
.x12-tag{display:block;width:max-content;margin-top:10px;padding:2px 10px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--teal)}

@media (min-width:821px){.x12 .new-catalog__content{grid-template-columns:repeat(4,1fr)}}
@media (min-width:481px) and (max-width:820px){.x12 .new-catalog__content{grid-template-columns:repeat(2,1fr)}}

/* документы */
.x12-docs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.x12-docs li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px;background:#fff;border:1px solid var(--grid)}
.x12-docs svg{grid-row:1/3;width:44px;height:44px;fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;padding:8px;background:#e8f6fb;border-radius:50%}
.x12-docs b{font-size:15px;line-height:1.3;color:var(--navy)}
.x12-docs span{font-size:13px;color:var(--mut)}

/* состав */
.x12-decode{display:grid;gap:12px}
.x12-decode li:not(.x12-decode__note){display:flex;align-items:center;gap:20px;padding:16px 20px;background:#fff;border:1px solid var(--grid);border-left:4px solid var(--teal)}
.x12-decode i{font-style:normal;font-size:30px;font-weight:700;color:var(--navy);min-width:76px}
.x12-decode span{font-size:17px}
.x12-decode__note{color:var(--mut);font-size:14px}
.x12-table{width:100%;border-collapse:collapse;background:#fff;font-size:15px;line-height:1.45;border:2px solid var(--navy)}
.x12-table th{background:var(--navy);color:#fff;text-align:left;font-weight:500;padding:14px 18px;border:1px solid #3d6179}
.x12-table th small{display:block;opacity:.7;font-weight:400}
.x12-table td{padding:14px 18px;border:1px solid var(--grid);vertical-align:top}
.x12-table tbody tr:nth-child(even) td{background:var(--zebra)}
.x12-table td small{display:block;color:var(--mut);font-size:13px}
.x12-comp td:first-child{font-weight:500;width:36%}
.x12-props td:first-child{font-weight:700;color:var(--navy);width:20%}
.x12-props td:nth-child(2){width:36%}


/* механика */
.x12-mech td:first-child,.x12-mech th:first-child{width:46%}
.x12-mech td:not(:first-child){font-weight:500;font-size:17px;color:var(--navy)}
.x12-callout{margin-top:24px;padding:20px 24px;border:1px solid var(--grid);border-left:4px solid var(--blue);background:#fff;max-width:none}

/* сертификаты: сетка вместо слайдера */
.x12-certs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* FAQ */
.x12-faq-wrap{max-width:1000px}
.x12-faq details{background:#fff;margin-bottom:10px;overflow:hidden;border:1px solid var(--grid)}
.x12-faq summary{list-style:none;cursor:pointer;padding:20px 64px 20px 24px;font-size:18px;font-weight:500;color:var(--navy);position:relative}
.x12-faq summary::-webkit-details-marker{display:none}
.x12-faq summary::after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-8px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.x12-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.x12-faq details>div{padding:0 24px 22px;color:#32424e}

@media (max-width:1100px){
	.x12-two--top{grid-template-columns:1fr}
}
@media (max-width:820px){
	.x12-certs__grid{grid-template-columns:1fr 1fr;gap:12px}
	.x12-h2{margin-bottom:20px}
	.x12-two,.x12-two--top{grid-template-columns:1fr;gap:28px}
	.x12-docs{grid-template-columns:1fr}
	.x12-decode i{font-size:24px;min-width:60px}
	.x12-table thead{display:none}
	.x12-props tr,.x12-mech tr,.x12-comp tr{display:block}
	.x12-props tr{margin-bottom:12px;border:2px solid var(--navy);overflow:hidden}
	.x12-props tr:nth-child(even) td:not(:first-child){background:var(--zebra)}
	.x12-props td,.x12-mech td{display:block;width:100%!important;border:0;padding:8px 16px}
	.x12-table tbody tr:nth-child(even) td{background:transparent}
	.x12-table.x12-props tbody tr td:first-child{background:var(--navy);color:#fff;padding:12px 16px}
	.x12-props td[data-l]:not(:first-child)::before,.x12-mech td[data-l]::before{content:attr(data-l);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);font-weight:500}
	.x12-mech td:first-child::before{display:none!important}
	.x12-mech tr{margin-bottom:12px;border:2px solid var(--navy);overflow:hidden}
	.x12-table.x12-mech tbody tr td:first-child{background:var(--zebra);font-weight:500}
	.x12-comp tr{display:table-row}.x12-comp thead{display:table-header-group}
	.x12-comp td{display:table-cell}
	.x12-faq summary{font-size:16px;padding:16px 48px 16px 16px}.x12-faq summary::after{right:16px}
	.x12-faq details>div{padding:0 16px 18px}
}
