/* rozmir — планшет (761–1100) и ПК (> 1100): разворот «текст + коробка на мате», примерка, лист во всю ширину */
.W .w-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1280px;margin:0 auto;padding:8px 32px 0}
.W .w-top-r{display:flex;align-items:center;gap:14px}
.W .w-host{font-size:13px;color:var(--ink2)}
.W main{max-width:1280px;margin:0 auto;padding:0 32px}
.W section{padding:72px 0 24px}
.W h1{font:800 clamp(44px,5.4vw,76px)/1.02 var(--sans);letter-spacing:-.025em;margin:.2em 0 .5em}
.W h2{font:800 clamp(28px,3vw,40px)/1.1 var(--sans);letter-spacing:-.015em;margin:0 0 .45em}
.W h3{font:700 14px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--line);margin:0 0 12px}

.W .w-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-top:40px}
.W .w-lead{font-size:18px;max-width:52ch;margin:0 0 26px}
.W .w-stage .eyebrow{margin:0 0 10px}
.W .w-frame{height:min(52vh,500px);min-height:360px}

.W .w-fit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.W .w-fit .fit-sum{margin-top:0}
.W .w-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.W .w-fit .cta{margin-top:6px}

.W .w-file-head{max-width:760px}
.W .w-file .sheet{margin:6px 0 28px}
.W .w-file-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}

.W .w-how-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;font-size:17px}
.W .w-how-grid>div{background:rgba(0,0,0,.18);border-radius:12px;padding:22px 26px 10px;box-shadow:inset 0 0 0 1px rgba(232,244,214,.14)}
.W ol{padding-left:1.3em;margin:0}

.W .w-film{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center}
.W .w-vid{aspect-ratio:16/9}
.W .w-final{text-align:center;padding:96px 0 40px}
.W .w-final p{margin:0 auto 22px;max-width:56ch}
.W .w-final .note{margin-top:12px}

/* планшет: те же блоки, но в столбик там, где двум колонкам тесно */
html[data-layout=tablet] .W main,html[data-layout=tablet] .W .w-top{padding-left:28px;padding-right:28px}
html[data-layout=tablet] .W .w-hero{grid-template-columns:1fr;gap:28px}
html[data-layout=tablet] .W .w-frame{height:min(48vh,460px)}
html[data-layout=tablet] .W .w-fit{grid-template-columns:1fr;gap:20px}
html[data-layout=tablet] .W .w-chips{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
html[data-layout=tablet] .W .w-film{grid-template-columns:1fr;gap:20px}
html[data-layout=tablet] .W .w-file-grid{grid-template-columns:1fr;gap:24px}
html[data-layout=tablet] .W section{padding-top:56px}

@media (hover:hover){
  .W .chip:hover{border-color:var(--line)}
  .W .states button:hover{border-color:var(--line)}
}