/* Цены (прототип _dev/design/prices/): лист цен, оплата и документы, вопросы. Перенос _dev/design/prices/style.css. */

/* ---------- Лист ---------- */

/* размерная линия: засечки по краям, стрелки, подпись по центру */
/* здесь подпись лежит на линии, разрывая её, — низкая линия */
.dim { --dim-h: 34px; --dim-fs: var(--fs-annotation); }
.dim::before { top: 17px; }
.dim::after { top: 13px; }
.dim__text { top: 5px; padding: 0 12px; line-height: 24px; }

/* ---------- Лист 1: цены ---------- */

.frame--prices { --frame-t: 30px; --frame-b: 64px; }

.prices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 56px; margin-bottom: 22px; }
.prices__head h1 { font-size: var(--fs-headline); line-height: 1.04; white-space: nowrap; }
/* условие оплаты коротко; подробно — в разделе «Как платится и оформляется» */
.pay-line { font-size: var(--fs-annotation); line-height: 1.4; color: var(--graphite); padding-bottom: 6px; }
.pay-line b { font-weight: 600; color: var(--ink); }
.prices__jump { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--ink); font-weight: 600; }

/* ведомость позиций: главная крупно, две соседние помельче */
.offer { display: grid; grid-template-columns: minmax(0, 1fr) 352px; border: var(--frame) solid var(--ink); }

.main-pos { display: grid; grid-template-columns: 480px minmax(0, 1fr); border-right: 1.5px solid var(--ink); }
.main-pos__price { padding: 26px 28px 28px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.main-pos__price h2 { font-size: var(--fs-chapter); line-height: 1.1; }
.price-wrap { width: fit-content; margin-top: 14px; }
.price { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.price__from { font-style: italic; font-size: var(--fs-title); color: var(--graphite); }
.price__sum { font-size: var(--fs-display); line-height: .98; }
.price .num { font-weight: 400; letter-spacing: -.04em; }
/* знак рубля — Fira, без моноширинной клетки */
.price__cur { margin-left: .08em; font-family: var(--sans); font-weight: 400; }
.price-wrap .dim { margin-top: 12px; }
/* доказательство срока — под пояснением к сроку, до кнопки */
.proof { margin-top: 10px; font-size: var(--fs-small); line-height: 1.4; color: var(--graphite); max-width: 44ch; }
.proof b { font-weight: 600; color: var(--ink); }
.proof .link { padding: 2px 0; gap: 4px; white-space: nowrap; color: var(--ink); }
/* от чего зависит итог — под размерной линией, Body small графитом */
.nobr { white-space: nowrap; }
.price-note { margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--graphite); }
.ic--ext { width: 12px; height: 12px; vertical-align: 1px; }
.main-pos__act { margin-top: auto; padding-top: 18px; }
.main-pos__btns { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.main-pos__form { --btn-pad: 12px 14px; --btn-fs: var(--fs-label); }
.main-pos__note { margin-top: 8px; font-size: var(--fs-label); color: var(--graphite); }

.spec.main-pos__spec { margin: 0; width: 100%; border: 0; }
.main-pos__spec caption { padding: 18px 24px 8px; }
.main-pos__spec thead th { border-top: 0; }
.main-pos__spec th:first-child, .main-pos__spec td:first-child { border-left: 0; }
.main-pos__spec th:last-child, .main-pos__spec td:last-child { border-right: 0; }
.spec { border-collapse: collapse; font-size: var(--fs-annotation); border: var(--frame) solid var(--ink); }
.spec caption { text-align: left; font-weight: 600; font-size: var(--fs-body); line-height: 1.3; padding-bottom: 8px; }
.spec th, .spec td { border: 1px solid var(--ink); padding: 7px 12px; text-align: left; vertical-align: baseline; line-height: 1.35; }
/* строки сметы делят высоту ведомости поровну: текст по центру графы */
.main-pos__spec tbody td { vertical-align: baseline; }
.spec thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); border-bottom-width: 2px; padding-top: 4px; padding-bottom: 4px; }
.spec td.num { width: 46px; text-align: center; font-size: var(--fs-label); }
.spec__guard td { border-top-width: 2px; font-size: var(--fs-label); }
.spec__guard b { font-weight: 600; }

.side-pos { display: grid; grid-template-rows: auto 1fr; }
.pos { padding: 16px 22px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pos + .pos { border-top: 1px solid var(--ink); }
.pos h2 { font-size: var(--fs-title); line-height: 1.15; }
/* значения позиции — графы «Цена» и «Срок», как в смете */
.pos__terms { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 0 0 2px; }
.pos__terms div { display: flex; align-items: baseline; gap: 10px; }
.pos__terms dt { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.pos__terms dd { margin: 0; font-size: var(--fs-annotation); line-height: 1.3; }
.pos__btn { --btn-pad: 9px 16px; --btn-fs: var(--fs-small); margin-top: 6px; }
.pos__btn .ic { width: 18px; height: 18px; }
.pos__text { font-size: var(--fs-small); color: var(--graphite); }

/* уточнения к цене — строки «название: значение» в две колонки, сетка 1px; снятый тариф — последней строкой */
.clarify { margin-top: 18px; }
.sheet .clarify__title { font-size: var(--fs-body); line-height: 1.3; margin-bottom: 4px; letter-spacing: 0; }
.clarify__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-auto-flow: column; column-gap: 40px; margin: 0; border-top: 1px solid var(--hair); }
.clarify__list > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.clarify__list dt { font-size: var(--fs-small); color: var(--ink); }
.clarify__list dd { margin: 0; font-size: var(--fs-small); }
.clarify__list > div:nth-child(1) { grid-area: 1 / 1; }
.clarify__list > div:nth-child(2) { grid-area: 2 / 1; }
.clarify__list > div:nth-child(3) { grid-area: 1 / 2; }
.clarify__list > div:nth-child(4) { grid-area: 2 / 2; }
/* снятый тариф — последней тихой строкой графитом */
.clarify__list > .clarify__old { grid-area: 3 / 1 / 4 / 3; border-bottom: 0; }
.clarify__old dt, .clarify__old dd { color: var(--graphite); }
.clarify__old s { text-decoration-thickness: 1px; }

/* ---------- Лист 2: как платится и оформляется ---------- */

/* сетка листа: маршрут до договора во всю ширину, этап договора слева, штамп в правом нижнем углу рамки */
.frame--pay { --frame-b: 0px; display: grid; grid-template-columns: minmax(0, 1fr) 392px; column-gap: 44px; }
.frame--pay .pay__head, .route__row--start { grid-column: 1 / -1; }
.route { display: contents; }
.route__row--stage { grid-column: 1; padding-bottom: 40px; display: flex; flex-direction: column; }
/* печати нет: кнопка штампа без места под неё */
.stamp { --stamp-seal-room: 20px; grid-column: 2; align-self: end; margin: 36px -40px 0 0; }
.stamp { grid-template-areas: "title" "parties" "copy" "act" "sheet"; }

.pay__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 36px; }
.pay__head p { max-width: 40ch; font-size: var(--fs-body); color: var(--graphite); }

/* размерная линия над рядом шагов — та же .dim, ниже; вертикальная (.dim--v) — только когда маршрут встаёт столбцом */
.route__row > .dim--v { display: none; }
.route__dim { --dim-h: 30px; margin-bottom: 12px; }
.route__dim::before { top: 15px; }
.route__dim::after { top: 11px; }
.route__dim .dim__text { top: 4px; line-height: 22px; }

/* ряд шагов */
.route__steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border: var(--frame) solid var(--ink);
}
/* до договора: ровная полоса граф одной высоты в одной рамке, как маршрутная карта главной */
.route__row--start .route__steps { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); align-items: stretch; border: 0; }
/* шаги 1–3 и договор — графы одной высоты; договор — итоговая графа в своей рамке */
.route__row--start .route__steps > li { border: var(--frame) solid var(--ink); border-width: var(--frame) 0; }
.route__row--start .route__steps > li:first-child { border-left-width: var(--frame); }
.route__row--start .route__steps > li + li { border-left: 1px solid var(--ink); }
.route__row--start .route__steps > .route__deal { border: var(--frame) solid var(--ink); }
.route__steps > li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 20px; }
.route__steps > li + li { border-left: 1px solid var(--ink); }
.route__steps > li + li::before { content: ""; position: absolute; left: 0; top: 18px; z-index: 1; width: 14px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.route__n { font-size: var(--fs-label); color: var(--graphite); }
.route__steps > li > b { font-size: var(--fs-title); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.route__steps > li > span:last-child { font-size: var(--fs-small); color: var(--graphite); line-height: 1.4; max-width: 30ch; }
.route__steps .route__time { font: italic 400 var(--fs-annotation)/1.3 var(--sans); color: var(--ink); }
.route__time b { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }

/* договор — итоговая графа маршрута до договора */
.route__steps > .route__deal { background: var(--blue-tint); }
.route__deal dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 4px 0 0; }
.route__deal dl div { padding: 6px 0; border-top: 1px solid rgb(26 49 136 / .25); }
.route__deal dt { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.route__deal dd { margin: 0; font-size: var(--fs-small); line-height: 1.35; }
.route__deal dl div:first-child dd { font-weight: 600; }

.route__row--stage { margin-top: 36px; }

/* цикл этапа договора: четыре графы в одной рамке, внизу — обратная линия «повторяется» */
.cycle { border: var(--frame) solid var(--ink); }
.cycle .route__steps { border: 0; }
.cycle .route__steps > li { padding: 16px 18px 20px; }
/* графы платежей — светло-синим фоном, без вложенной рамки */
.cycle .route__steps > .cycle__pay { background: var(--blue-tint); }
.cycle .route__steps > li > .cycle__sum { display: grid; gap: 4px; margin-top: auto; padding-top: 12px; font-size: var(--fs-label); color: var(--graphite); max-width: none; }
.cycle__pct { font-size: var(--fs-chapter); line-height: .9; color: var(--ink); }
.cycle__pct b { letter-spacing: -.04em; }
/* обратная линия: от последней графы к первой, стрелка вверх у первой, подпись под линией */
.cycle__repeat { position: relative; padding: 36px 18px 14px; border-top: 1px solid var(--ink); text-align: center; font: italic 400 var(--fs-annotation)/24px var(--sans); }
.cycle__repeat::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 0; height: 22px; border: 1.5px solid var(--ink); border-top: 0; }
.cycle__repeat::after { content: ""; position: absolute; left: calc(12.5% - 5.25px); top: 0; width: 12px; height: 10px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* условия расчёта и документов — строка граф под циклом, до низа рамки рядом со штампом */
.pay-docs { display: grid; grid-template-columns: 1fr 1.3fr 2fr; margin: auto 0 0; padding-top: 28px; }
.pay-docs div { padding: 10px 18px 0; border-top: 1px solid var(--ink); }
.pay-docs div + div { border-left: 1px solid var(--hair); }
.pay-docs div:first-child { padding-left: 0; }
.pay-docs dt { font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.pay-docs dd { margin: 2px 0 0; font-size: var(--fs-small); line-height: 1.4; }
.stamp__title { padding: 8px 18px; }
.stamp__parties { padding-bottom: 6px; }
.stamp__parties div { grid-template-columns: 116px minmax(0, 1fr); min-height: 38px; }
.stamp__parties dt { padding: 4px 18px; font-size: var(--fs-label); }
.stamp__parties dd { padding: 4px 16px; font-size: var(--fs-body); font-weight: 600; }
.stamp__parties .stamp__req { font-size: var(--fs-small); font-style: normal; font-variant-numeric: tabular-nums; }
.stamp__req a { display: inline-block; padding: 2px 0; }
.stamp__mini { width: 40px; height: 40px; }
.stamp__copy { grid-area: copy; padding: 10px 18px; }
.stamp__act { grid-area: act; padding: 12px 18px; }
.stamp__act .btn-tg { width: 100%; }
.stamp__sheet > :first-child { flex: 1; color: var(--ink); }

/* ---------- Лист 3: вопросы ---------- */

#faq h2 { margin-bottom: 32px; }
/* «Не нашли ответ?» — графа справа от вопросов, на уровне первого вопроса */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 900px) 340px; justify-content: space-between; gap: 64px; align-items: start; }
.faq__aside { display: grid; gap: 8px; justify-items: start; padding: 18px 22px 22px; border: 1.5px solid var(--ink); }
.faq__aside b { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.faq__aside span { font-size: var(--fs-small); color: var(--graphite); }
.faq__aside .btn { margin-top: 6px; }
.faq { max-width: 900px; }
.faq details p { font-size: var(--fs-body); }

/* ---------- Низкое окно 1440×768: кнопка у цены остаётся на первом экране ---------- */

@media (min-width: 1180px) and (max-height: 820px) {
  .frame--prices { padding-top: 14px; }
  .prices__head { margin-bottom: 12px; }
  .main-pos__price { padding-top: 18px; padding-bottom: 20px; }
  .price-wrap { margin-top: 8px; }
  .price-wrap .dim { margin-top: 8px; }
  .proof { margin-top: 8px; }
  .main-pos__act { padding-top: 14px; }
  .main-pos__note { margin-top: 4px; }
  .main-pos__spec caption { padding-top: 12px; }
  .main-pos__spec th, .main-pos__spec td { padding-top: 5px; padding-bottom: 5px; line-height: 1.3; }
  .spec thead th { padding-top: 2px; padding-bottom: 2px; }
  .pos { padding-top: 16px; padding-bottom: 16px; gap: 6px; }
}

/* ---------- Узкие колонки: по ширине рамки листа ---------- */

/* контейнер — лист: правила меняют и сетку самой рамки (по ширине рамки её не перестроить) */
main > .sheet { container-type: inline-size; }

/* ведомость: соседние позиции — строкой под главной */
@container (width < 1240px) {
  .offer { grid-template-columns: minmax(0, 1fr); }
  .main-pos { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .side-pos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pos + .pos { border-top: 0; border-left: 1px solid var(--ink); }
  .pos__text { flex: 1; }
}
/* главная позиция: цена над сметой */
@container (width < 860px) {
  .main-pos { grid-template-columns: minmax(0, 1fr); }
  .main-pos__price { border-right: 0; border-bottom: 1px solid var(--ink); }
  .prices__head { flex-wrap: wrap; }
  .prices__head h1 { white-space: normal; }
  .clarify__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .clarify__list > div:nth-child(n), .clarify__list > .clarify__old { grid-area: auto; }
  .clarify__list > div:nth-child(4) { border-bottom: 1px solid var(--hair); }
}
/* узкий лист: соседние позиции столбцом, кнопки во всю ширину */
@container (width < 640px) {
  .main-pos__price { padding: 20px 16px 22px; }
  .price { gap: 10px; }
  .main-pos__spec caption { padding: 16px 16px 8px; }
  .main-pos__spec th, .main-pos__spec td { padding-left: 10px; padding-right: 10px; }
  .side-pos { grid-template-columns: minmax(0, 1fr); }
  .pos { padding: 16px; }
  .pos + .pos { border-left: 0; border-top: 1px solid var(--ink); }
  .main-pos__btns .btn-tg, .main-pos__btns .btn { width: 100%; justify-content: center; }
}

/* лист оплаты: штамп — под маршрутом, в правом нижнем углу рамки */
@container (width < 1240px) {
  .frame--pay { grid-template-columns: minmax(0, 1fr); }
  .frame--pay .stamp { grid-column: 1; justify-self: end; width: min(392px, 100% + var(--frame-x)); margin: 36px calc(-1 * var(--frame-x)) 0 0; }
  .route__row--stage { padding-bottom: 0; }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq__aside { max-width: 440px; }
}
/* маршрут столбцом: графы сверху вниз, стрелка на верхней линии графы смотрит вниз */
@container (width < 860px) {
  .pay__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .route__steps, .route__row--start .route__steps { grid-template-columns: minmax(0, 1fr); border: var(--frame) solid var(--ink); }
  .route__row--start .route__steps > li, .route__row--start .route__steps > li:first-child { border: 0; }
  .route__steps > li + li, .route__row--start .route__steps > li + li { border-left: 0; border-top: 1px solid var(--ink); }
  .route__row--start .route__steps > .route__deal { border: 0; border-top: var(--frame) solid var(--ink); }
  .route__steps > li + li::before { left: 18px; top: 0; width: 10px; height: 12px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .route__steps > li > span:last-child { max-width: none; }
  /* размерная линия — вдоль столбца слева, подпись на −90° */
  .route__row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .route__row > .route__dim { display: none; }
  .route__row > .dim--v { display: block; }
  .route__row > .pay-docs { grid-column: 1 / -1; }
  .cycle .route__steps { border: 0; }
  /* обратная линия теряет смысл в столбце — остаётся подпись */
  .cycle__repeat { padding-top: 12px; text-align: left; }
  .cycle__repeat::before, .cycle__repeat::after { display: none; }
  .pay-docs { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .pay-docs div, .pay-docs div:first-child { padding: 10px 0; }
  .pay-docs div + div { border-left: 0; border-top-color: var(--hair); }
}
@container (width < 580px) {
  .route__deal dl { grid-template-columns: minmax(0, 1fr); }
  .stamp__parties div { grid-template-columns: 96px minmax(0, 1fr); }
  .stamp__parties dt { padding: 4px 12px; }
  .stamp__parties dd { padding: 4px 12px; }
  .stamp__title, .stamp__copy, .stamp__act { padding-left: 14px; padding-right: 14px; }
}