/* Компоненты SEO-секций. Подключаются на всех страницах из Head.astro.
Каталог с разметкой и правилами — docs/seo-sections.md. Новый SEO-текст собирается
только из этих блоков: голые ,
, , в секции не оставлять. */
/* Вводный абзац под заголовком секции. */
.seo-lead{max-width:68ch;margin:16px 0 0;font-size:18px;line-height:1.65;color:var(--muted)}
.seo-lead+*{margin-top:36px}
/* Таблица: карточка с шапкой на светлом фоне. Обёртка — div.seo-table вместо div.table-scroll. */
.seo-table{margin-top:36px;max-width:1040px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius,20px);background:var(--white);-webkit-overflow-scrolling:touch}
.seo-table table{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.seo-table th,.seo-table td{padding:16px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.seo-table thead th{background:var(--paper);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:none;white-space:nowrap}
.seo-table tbody tr:last-child>*{border-bottom:0}
.seo-table tbody th,.seo-table tbody td:first-child{font-weight:600;color:var(--ink)}
.seo-table tbody td{color:var(--ink)}
.seo-table .hl-row>*{background:color-mix(in srgb,var(--cyan) 7%,var(--white));font-weight:600}
.seo-table a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){
.seo-table tbody tr:hover>*{background:var(--paper)}
.seo-table a:hover{color:var(--cyan);text-decoration-color:currentColor}
}
/* Длинная сравнительная таблица на телефоне: первая колонка остаётся на месте. */
@media(max-width:700px){
.seo-table table{min-width:680px}
.seo-table th,.seo-table td{padding:12px 14px;font-size:14px}
.seo-table tbody>tr>:first-child{max-width:132px}
.seo-table thead th:first-child,.seo-table tbody>tr>:first-child{position:sticky;left:0;z-index:1;background:var(--white);box-shadow:1px 0 0 var(--line)}
.seo-table thead th:first-child{background:var(--paper)}
}
/* Таблица цен: цены крупно, колонка с акцентом (.is-accent на th и td) выделена цветом. */
.seo-price-table td{font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.seo-price-table .is-accent{color:var(--cyan)}
.seo-price-table thead .is-accent{background:color-mix(in srgb,var(--cyan) 10%,var(--white));color:var(--cyan)}
.seo-price-table td.is-accent{background:color-mix(in srgb,var(--cyan) 4%,var(--white))}
.seo-price-table thead small{display:block;margin-top:2px;font-weight:400;letter-spacing:0;color:var(--muted)}
/* На телефоне строки цен становятся карточками: название сверху, цены в две колонки. */
@media(max-width:700px){
.seo-price-table{border:0;background:none;overflow:visible}
.seo-price-table table,.seo-price-table tbody{display:block;min-width:0}
.seo-price-table tbody>tr>:first-child{max-width:none}
.seo-price-table thead{display:none}
.seo-price-table tbody tr{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;border:1px solid var(--line);border-radius:var(--ds-radius-small);overflow:hidden;background:var(--white)}
.seo-price-table tbody>tr>*{position:static;box-shadow:none;border:0}
.seo-price-table tbody th{grid-column:1/-1;padding:14px 16px 4px;font-size:16px;background:none}
.seo-price-table tbody td{padding:6px 16px 14px;font-size:18px;background:none}
.seo-price-table tbody td::before{content:attr(data-label);display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}
.seo-price-table tbody td.is-accent{background:none}
}
/* Пояснение под таблицей или блоком. */
.seo-note{max-width:72ch;margin:16px 0 0;padding-left:16px;border-left:2px solid var(--cyan);font-size:15px;line-height:1.7;color:var(--muted)}
.seo-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Шаги процесса: «как купить», «как провести». */
.seo-steps-title{margin:56px 0 0;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.03em}
.seo-steps{list-style:none;counter-reset:seo-step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0 0;padding:0}
.seo-steps>li{counter-increment:seo-step;display:block;padding:24px;border-radius:var(--radius,20px);background:var(--paper);font-size:15px;line-height:1.65;color:var(--muted)}
.seo-steps>li::before{content:counter(seo-step,decimal-leading-zero);display:block;margin-bottom:10px;font-size:14px;font-weight:700;color:var(--cyan)}
.seo-steps>li>strong{display:block;margin-bottom:8px;font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.seo-steps a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){.seo-steps a:hover{color:var(--cyan)}}
/* Список «что входит»: две колонки с галочками. */
.seo-checklist-title{margin:48px 0 0;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.03em}
.seo-checklist{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px 32px;margin:20px 0 0;padding:24px 28px;border-radius:var(--radius,20px);background:var(--paper)}
.seo-checklist li{position:relative;padding-left:32px;font-size:16px;line-height:1.55;color:var(--ink)}
.seo-checklist li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--cyan)}
.seo-checklist li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Призыв в конце секции: короткая фраза и кнопки на одной плашке. */
.seo-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:40px;padding:24px 28px;border-radius:var(--radius,20px);background:var(--ink);color:var(--white)}
.seo-cta p{max-width:56ch;margin:0;font-size:17px;line-height:1.55;color:inherit}
.seo-cta .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0}
.seo-cta .text-link{color:var(--white)}
@media(max-width:700px){.seo-cta{padding:22px 20px}.seo-cta .actions{width:100%}.seo-cta .button{flex:1 1 auto;justify-content:center}}
/* Блок «Как купить» товарных страниц (partials/blocks/product-buy.html):
заголовок над тремя карточками вместо пустой левой колонки. */
.service-grid.buy-grid{grid-template-columns:1fr;gap:36px}
.buy-grid .service-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.buy-grid .service-items article{padding:28px;border-radius:var(--radius,20px);background:var(--white);align-content:start}
.buy-grid .service-items p a{display:inline;padding:0}
@media(max-width:1000px){.buy-grid .service-items{grid-template-columns:1fr}.buy-grid .service-items article{padding:22px}}
/* SEO-абзац под шагами на главной. */
.home-how .seo-note{margin-top:24px}