/* Главная RESI — этап B дизайн-системы (файл 55, разделы 4, 5, 8; эталон screens/design_1D_home.html).
   Цвета, шрифты, кнопки, знак — tokens.css и components.css. Здесь раскладка. Правило: линии, а не карточки. */
html{scroll-behavior:smooth}
body{margin:0;font-size:17px;line-height:1.55}
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--sp-8)}
h1,h2,h3{font-family:var(--font-ui);color:var(--navy);font-weight:600;margin:0}
h1{font-size:56px;line-height:1.06;letter-spacing:-.03em;margin:0 0 var(--sp-8)}
h2{font-size:36px;line-height:1.15;letter-spacing:-.01em;margin:0 0 var(--sp-6)}
h3{font-size:21px;line-height:1.3;margin:0 0 var(--sp-2)}
p{margin:0 0 var(--sp-4)}
.muted{color:var(--muted)}
.nw{white-space:nowrap}
small,.small{font-size:14px}
/* раздел: линия сверху 1 px navy, текст на фоне страницы, без подложек */
section{border-top:1px solid var(--navy);padding:var(--sp-8) 0 var(--sp-16)}
.lead{font-size:19px;line-height:1.55;color:var(--muted);max-width:520px}

/* шапка */
.top{display:flex;justify-content:space-between;align-items:center;height:72px}
.top a.link{font-size:15px;font-weight:500;text-decoration:none}
.top a.link:hover{text-decoration:underline}

/* первый экран */
.hero{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;padding:var(--sp-12) 0 80px}
.hero-text{flex:1 1 460px;min-width:0;padding-top:var(--sp-2)}
.kicker{margin-bottom:28px}
.cta-row{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin:var(--sp-8) 0 var(--sp-4)}
.facts{font-size:14px;color:var(--muted);margin:0}
.facts span+span::before{content:" · "}
.byline{display:flex;gap:14px;align-items:center;margin-top:var(--sp-8);padding-top:20px;border-top:1px solid var(--line);max-width:520px;font-size:14px;line-height:1.4}
.byline img{width:56px;height:56px;object-fit:cover;object-position:50% 18%;flex:none}
.byline b{color:var(--ink)}

/* лист-пример (белая подложка допустима: лист отчёта) */
.sheet-wrap{flex:1 1 420px;min-width:0;max-width:520px}
.sheet-cap{font-size:14px;color:var(--muted);margin:0 0 var(--sp-2)}
.sheet{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--navy);border-radius:var(--radius);padding:20px 22px}
.sheet-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);margin-bottom:var(--sp-4)}
.sheet-brand{font-weight:700;color:var(--navy);letter-spacing:.02em}
.sheet h3{font-size:18px;margin-bottom:var(--sp-2)}
.sheet-rows{list-style:none;margin:0;padding:0}
.sheet-rows li{display:grid;grid-template-columns:1fr 150px;gap:var(--sp-3);align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.35}
.sheet-rows .nm{font-weight:500;color:var(--ink)}
.sheet-insert{font-size:14px;margin:var(--sp-3) 0 var(--sp-2)}
.sheet-note{font-size:14px;color:var(--muted);margin:0}

/* шкала: пять равных сегментов, выбран один (amber), ▲ под ним, подпись рядом (файл 55, раздел 5) */
.lvl{display:grid;grid-template-columns:repeat(5,1fr);row-gap:2px}
.lvl-segs{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.lvl-segs i{display:block;height:10px;background:var(--seg)}
.lvl-segs i.on{background:var(--amber)}
.lvl-tri{justify-self:center;line-height:0}
.lvl-p1{grid-column:1}.lvl-p2{grid-column:2}.lvl-p3{grid-column:3}.lvl-p4{grid-column:4}.lvl-p5{grid-column:5}
.lvl-tri .tri{width:10px;height:7px;fill:var(--amber)}
.lvl-label{grid-column:1/-1;font-size:14px;color:var(--ink);line-height:1.3}
@media print{.lvl-segs i,.lvl-tri .tri{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* три шага с крупными mono-цифрами */
.steps3{border-top:0;padding:0 0 var(--sp-16)}
.steps3 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--sp-8)}
.steps3 li{border-top:1px solid var(--navy);padding-top:var(--sp-4)}
.steps3 .num{display:block;font-family:var(--font-mono);font-size:40px;line-height:1;color:var(--navy);margin-bottom:var(--sp-3)}
.steps3 h3{margin:0 0 var(--sp-2);font-size:18px;line-height:1.3;color:var(--navy)}
.steps3 p{margin:0;color:var(--ink)}

/* «Возможно, это знакомо» + иллюстрация (без пузырей-карточек: строки с линией слева) */
.scenes-wrap{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:var(--sp-8);align-items:start}
.scenes-wrap > :not(.say-aside){grid-column:1}
.say-aside{grid-column:2;grid-row:1 / span 3}
.scenes{list-style:none;padding:0;margin:0 0 var(--sp-4)}
.scenes li{border-top:1px solid var(--line);padding:var(--sp-3) 0}
.scenes li:last-child{border-bottom:1px solid var(--line)}
.tag{display:inline-block;font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);margin-bottom:var(--sp-3)}
.say{display:grid;gap:var(--sp-3)}
.bub{border-left:2px solid var(--line-strong);padding:2px 0 2px var(--sp-4)}
.bub.long{border-left-color:var(--navy)}
.bub small{display:block;font-family:var(--font-mono);font-size:13px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.bub p{margin:0}
.bub.long p{font-style:italic}

/* «Что такое RESI»: пять частей строками */
.parts{list-style:none;padding:0;margin:var(--sp-4) 0 0;max-width:var(--w-read)}
.parts li{border-top:1px solid var(--line);padding:var(--sp-3) 0}
.parts li:last-child{border-bottom:1px solid var(--line)}
.parts b{font-weight:600;color:var(--ink)}

/* «Что будет в отчёте»: фрагмент примера — лист (белая подложка допустима) */
.sample{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;max-width:var(--w-read)}
.sample .tag{margin-bottom:var(--sp-2)}
.sample h3{font-size:18px}
#primer .scenes{max-width:var(--w-read);margin-top:var(--sp-6)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin:var(--sp-6) 0;max-width:var(--w-read)}
.thumbs img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}

/* «Кому подходит»: две колонки без рамок */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.box{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.box ul,.fit ul{margin:0;padding-left:20px}
.box li,.fit li{margin-bottom:6px}

/* «Как выбрать занятия» */
.chip{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;color:var(--navy)}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-4)}
.fit .col{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.fit h3{font-size:18px}
.note{font-size:14px;color:var(--muted);margin-top:var(--sp-4);max-width:var(--w-read)}

/* «Об авторе»: фото 180×220 */
.author{display:grid;grid-template-columns:180px 1fr;gap:var(--sp-8);align-items:start;max-width:860px}
.author-photo{display:block;width:180px;height:220px;object-fit:cover;object-position:50% 18%}
.author p:first-child{font-weight:600;color:var(--ink)}
.author p.muted+p.muted{margin-top:var(--sp-2,8px)}
/* «Как выбрать занятия»: первая фраза под заголовком (файл 59) — обычный текст, без плашки */
.lead-line{font-size:18px;line-height:1.5;color:var(--ink);max-width:620px;margin:0 0 12px}

/* тарифы — строки, а не карточки: слева название и цена, по центру состав, справа кнопка (файл 55, раздел 7) */
.tiers{display:block}
.tier{display:grid;grid-template-columns:300px 1fr 200px;grid-template-areas:"name list cta" "sub list cta" "price list cta" "q list cta" "badge list cta";
  grid-template-rows:auto auto auto auto 1fr;gap:var(--sp-2) 40px;padding:28px 0;border-top:1px solid var(--navy);align-items:start}
.tier:last-child{border-bottom:1px solid var(--navy)}
.tier.main{border-top:3px solid var(--navy)}
.tier h3{grid-area:name;font-size:26px;line-height:1.2;margin:0}
.tier .tier-sub{grid-area:sub;margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.tier .price{grid-area:price;font-size:34px;font-weight:700;color:var(--ink);line-height:1.1}
.tier .q{grid-area:q;font-style:italic;color:var(--muted);margin:var(--sp-2) 0 0;font-size:16px}
.tier .badge{grid-area:badge;align-self:start}
.tier ul{grid-area:list;list-style:none;margin:0;padding:0}
.tier li{padding:7px 0;border-bottom:1px solid var(--line);font-size:16px}
.tier .btn{grid-area:cta;width:100%}
.badge{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;color:var(--amber)}
#tarify > p.muted{max-width:var(--w-read);font-size:16px}

/* вопросы и ответы */
details{border-bottom:1px solid var(--line);padding:var(--sp-4) 0;max-width:var(--w-read)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;color:var(--ink)}
details p{margin:var(--sp-3) 0 0;color:var(--muted)}

/* «Честно о границах»: без заливки */
.honest .row{display:flex;gap:var(--sp-4);align-items:flex-start;max-width:var(--w-read)}
.honest svg{flex:none;margin-top:6px}
.honest h2{font-size:24px!important}
.btns{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:var(--sp-4) 0}
/* файл 61: пояснение к листу, тексты под шагами, пример вопроса, ссылка на тарифы, «Что уже сделано», две ссылки в конце */
.sheet-explain{font-size:14px;line-height:1.5;color:var(--ink);margin:0 0 var(--sp-3)}
.steps-notes{margin-top:var(--sp-6);max-width:var(--w-read)}
.steps-notes p{margin:0 0 var(--sp-1,4px);color:var(--muted)}
.q-quote{margin:0 0 var(--sp-3);padding:2px 0 2px var(--sp-4);border-left:2px solid var(--navy);font-size:20px;line-height:1.45;color:var(--ink);max-width:var(--w-read)}
.q-example p,.done-block p{max-width:var(--w-read)}
.to-tiers{margin:var(--sp-4) 0}
.final-links .btns{margin:0}
.fit li{margin-bottom:var(--sp-2,8px)}

footer{border-top:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-12);font-size:14px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) 18px;margin:10px 0}
footer a{color:var(--muted)}

/* 360–760 px: всё в одну колонку */
@media (max-width:760px){
  .wrap{padding:0 var(--sp-4)}
  h1{font-size:36px;line-height:1.12}
  h2{font-size:28px}
  .hero{gap:var(--sp-8);padding:var(--sp-6) 0 var(--sp-12)}
  .hero-text,.sheet-wrap{flex-basis:100%}
  .sheet-rows li{grid-template-columns:1fr}
  .steps3 ol{grid-template-columns:1fr;gap:var(--sp-6)}
  .scenes-wrap,.cols,.fit{grid-template-columns:1fr}
  .say-aside{grid-column:1;grid-row:auto}
  .author{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"name" "sub" "price" "q" "badge" "list" "cta";gap:var(--sp-2)}
  .tier .btn{margin-top:var(--sp-3)}
  .thumbs{grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2)}
}
@media print{.btns,.btn,.cta-row{display:none}}
/* файл 67: блок «Если кажется, что английского пока мало» — подблок с линией, как .fit и .box, без иконок и акцентов */
.q-enough{border-top:1px solid var(--line);margin-top:var(--sp-6);padding-top:var(--sp-4);max-width:var(--w-read)}
.q-enough h3{margin:0 0 var(--sp-2);font-size:20px;line-height:1.3;color:var(--navy)}
.q-enough p{margin:0}

/* этап I (файлы 63, 66): строка под подзаголовком, строка под листом-примером */
.lead-sub{font-size:17px;line-height:1.5;color:var(--ink);max-width:520px;margin:calc(var(--sp-2) * -1) 0 var(--sp-6)}
.sheet-under{font-size:14px;line-height:1.5;color:var(--muted);margin:var(--sp-3) 0 0}
/* файл 70: «Разные картины» — три карточки рядом, линия сверху, как у .fit; без иконок и акцентов. На телефоне — друг под другом */
.pics-cap{margin:0 0 var(--sp-4);max-width:var(--w-read)}
.pictures{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);margin:0 0 var(--sp-4)}
.pic-card{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.pic-card h3{font-size:18px;line-height:1.3;margin:0 0 var(--sp-2);color:var(--navy)}
.pic-card p{margin:0 0 var(--sp-3);font-size:16px;line-height:1.5}
.pic-card .pic-step{color:var(--ink)}
.pic-card .pic-step b{font-weight:600}
@media (max-width:760px){.pictures{grid-template-columns:1fr;gap:var(--sp-6)}}