/* Лёгкий набор компонентов дизайн-системы «Город у океана» для контентных страниц (продукты, страницы).
   Без глобальных правил (body, a, img): только классы .w-*. Полная версия — claude-design-system.css.
   Токены (--paper, --card, --line, --ink, --accent …) уже есть на странице. */
.w-wrap{max-width:var(--maxw,1280px);margin:0 auto;padding:0 var(--gut,clamp(22px,4vw,56px))}
.w-sec{padding:var(--sec-pad,64px) 0 0}
.w-lede{font:400 18px/1.6 var(--font);color:var(--mid);max-width:60ch;margin:0}
.w-body{font:400 16px/1.65 var(--font);color:var(--mid);margin:0}
.w-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden}
.w-card.is-flat{background:var(--sunk);box-shadow:none}
.w-card.is-warm{background:var(--warmth);box-shadow:none}
.w-band{position:relative;background:var(--paper);padding:clamp(58px,7.6vw,104px) 0;overflow:hidden}
.w-band h2{margin:18px 0 0;max-width:20ch}
.w-band p{font:400 18px/1.6 var(--font);color:var(--mid);max-width:46ch;margin:0}
/* === Сетка плиток и контентные блоки (04.11.2026, Маша) ===
   .w-grid: число колонок выбирает модификатор is-2…is-6; колонки делят ВСЮ ширину контейнера поровну.
   На узких экранах колонки сворачиваются сами: 6→3→2→1, 5→3→2→1, 4→2→1, 3→2→1, 2→1.
   is-auto — число колонок подбирается по ширине (плитка не уже 260px); is-fill — неполный последний ряд растягивается. */
.w-grid{--cols:3;--gap:16px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.w-grid>*{min-width:0}
.w-grid.is-1{--cols:1}.w-grid.is-2{--cols:2}.w-grid.is-3{--cols:3}.w-grid.is-4{--cols:4}.w-grid.is-5{--cols:5}.w-grid.is-6{--cols:6}
.w-grid.is-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.w-grid.is-fill{display:flex;flex-wrap:wrap}
.w-grid.is-fill>*{flex:1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
@media (max-width:1360px){.w-grid.is-6{--cols:3}}
@media (max-width:1180px){.w-grid.is-5{--cols:3}}
@media (max-width:960px){.w-grid.is-6,.w-grid.is-5,.w-grid.is-4,.w-grid.is-3{--cols:2}}
@media (max-width:600px){.w-grid,.w-grid.is-2,.w-grid.is-3,.w-grid.is-4,.w-grid.is-5,.w-grid.is-6{--cols:1}}
/* Отступ до плиток: блок плиток сразу после подводящего текста — секция .w-sec.is-tight (48px вместо полного отступа секции) */
.w-sec.is-tight{padding-top:48px}
.w-card__pad{padding:22px 24px 24px}
.w-card__pad h3{margin:0 0 8px;font-size:21px;font-weight:600;line-height:1.26;color:var(--ink)}
.w-card__pad p:not(.eyebrow){margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.w-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:960px){.w-split{grid-template-columns:minmax(0,1fr);gap:32px}}
.w-plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);padding:48px}
.w-plan.is-featured{background:var(--warmth);border-color:transparent}
.w-plan__tier{display:flex;margin:0 0 14px}
.w-plan__tier span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);border-radius:4.5px;padding:6px 10px}
.w-plan h3{margin:0 0 16px;font-size:28px;font-weight:400;line-height:1.2;color:var(--ink)}
.w-plan .desc{margin:0 0 32px;font-size:17px;line-height:1.55;color:var(--mid)}
.w-plan ul{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:13px;flex:1}
.w-plan li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink);margin:0}
.w-plan li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--accent)}
.w-plan .w-btn{width:100%;justify-content:center;padding:15px 24px;font-size:16px}
@media (max-width:991px){.w-plan{padding:24px}}
.w-code{border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-card)}
.w-code__head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.w-code__dot{width:10px;height:10px;border-radius:50%;flex:none}
.w-code__dot.r{background:#FF5F57}.w-code__dot.y{background:#FEBC2E}.w-code__dot.g{background:#28C840}
.w-code__label{margin-left:8px;font-size:11px;color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-code pre{margin:0;padding:22px;font-family:var(--mono);font-size:14px;line-height:1.7;overflow-x:auto;white-space:pre;color:var(--ink);background:none;border-radius:0}
.w-code .cm{color:var(--faint)}.w-code .kw{color:var(--blue)}.w-code .st{color:var(--accent-2)}.w-code .ac{color:var(--accent)}
[data-theme="night"] .w-code{background:var(--raise);box-shadow:none}
.w-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.w-pills span{font-size:15px;color:var(--mid);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;white-space:nowrap}