/* Главная (прототип _dev/design/index.html, style.css): листы «Проект в комплекте»; бланк — mrlexndr:site.lead. */


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

.frame { height: 100%; }

.sheet h2 { max-width: 26ch; margin-bottom: 36px; }

/* ---------- Лист 1: первый экран ---------- */
.sheet--hero .frame { --hx: 28px; --hb: 28px; flex: 1; padding: 30px var(--hx) var(--hb) 34px; display: flex; }

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 470px;
  grid-template-rows: auto auto 1fr;
  column-gap: 36px;
}

.hero__text { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 32px; padding: 22px 0 0; }
.hero h1 {
  grid-column: 1 / 3; grid-row: 1;
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -.015em;
  padding-top: 4px;
}
.hero__lead { grid-column: 1 / 3; grid-row: 2; font-size: var(--fs-article); line-height: 1.4; max-width: 58ch; margin-top: 16px; }
.hero__more { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-annotation); }
.hero__more a { color: var(--ink); padding: 4px 0; }
.hero__more a:hover { color: var(--blue); }
.proof { margin-top: auto; padding-bottom: 6px; }
.proof__fact { font-size: 23px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; text-wrap: balance; }
/* размерная линия под доказательством: стрелки на концах, выносные по краям */
.proof__ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 0; font-size: var(--fs-small); color: var(--blue); }

.hero__view { grid-column: 2; grid-row: 3; align-self: end; margin: -10px 0 0 -40px; display: flex; justify-content: center; }
.hero__view .axo { width: 100%; max-height: max(320px, calc(100vh - 410px)); }
/* аксонометрия 1:1 не помещается — подписи слоёв уходят в спецификацию под рисунком, на рисунке остаются номера */
.hero__view { container: axo / inline-size; }
@container sheet (width < 1200px) {
  @container axo (width < 560px) {
    .callout__t { display: none; }
    .callout__n { font-size: 44px; }
  }
}
.hero__side { grid-column: 3; grid-row: 1 / 4; display: flex; flex-direction: column; gap: 18px; margin-right: calc(-1 * var(--hx)); margin-bottom: calc(-1 * var(--hb)); }
.hero__side .spec { width: calc(100% - var(--hx)); margin-right: var(--hx); }
.hero__side .stamp { margin-top: auto; border-bottom: 0; }

/* ---------- Аксонометрия ---------- */

.axo { width: 100%; height: auto; overflow: visible; display: block; font-family: var(--sans); }
.axo .axis { stroke: var(--thin); stroke-width: 1; stroke-dasharray: 22 5 3 5; }
.axo .dimension line { stroke: var(--ink); stroke-width: 1; }
.axo .dimension .ext { stroke: var(--thin); }
.axo .dimension text { font-weight: 600; font-size: 27px; fill: var(--ink); }
.axo marker path, .axo marker circle, .node marker circle { fill: var(--ink); }

.face-t, .face-l, .face-r { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; transition: fill .35s, stroke .35s; }
.face-t { fill: var(--paper); }
.face-l { fill: var(--side-l); }
.face-r { fill: var(--side-r); }
.ink * { fill: none; stroke: var(--graphite); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .35s; }
.ink .ax { stroke: var(--thin); stroke-dasharray: 12 3 2 3; }
.ink .thin { stroke: var(--thin); }
.ink .mark { stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.layer { transition: transform .55s var(--ease); }
.layer.is-on { transform: translate(-30px, -17px); }
.layer.is-on .face-t { fill: var(--blue-tint); stroke: var(--blue); }
.layer.is-on .face-l { fill: var(--blue-side-l); stroke: var(--blue); }
.layer.is-on .face-r { fill: var(--blue-side-r); stroke: var(--blue); }
.layer.is-on .ink * { stroke: var(--blue); }

.callout polyline { fill: none; stroke: var(--ink); stroke-width: 1; transition: stroke .3s; }
.callout text { transition: fill .3s; }
.callout__n { font: 600 26px var(--sans); fill: var(--ink); }
.callout__t { font: italic 25px var(--sans); fill: var(--graphite); }
.layer.is-on .callout polyline { stroke: var(--blue); }
.layer.is-on .callout text { fill: var(--blue); }

.explode { animation: explode 1.3s var(--ease) .25s both; }
#ex-6 { --lift: 320px; } #ex-5 { --lift: 256px; } #ex-4 { --lift: 192px; }
#ex-3 { --lift: 128px; } #ex-2 { --lift: 64px; } #ex-1 { --lift: 0px; }
.explode .callout { animation: fade .6s ease-out 1.15s both; }
@keyframes explode { from { transform: translateY(var(--lift)); }
}
@keyframes fade { from { opacity: 0; }
}

/* ---------- Спецификация ---------- */

.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-annotation); }
.spec caption { text-align: left; font-weight: 600; font-size: var(--fs-article); padding-bottom: 8px; }
.spec th, .spec td { border: 1px solid var(--ink); padding: 5px 10px; text-align: left; vertical-align: baseline; }
.spec thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); border-bottom-width: 2px; }
.spec table, .spec { border: var(--frame) solid var(--ink); }
.spec .c-pos { width: 46px; } .spec .c-who { width: 160px; }
.spec td.num { text-align: center; font-size: var(--fs-label); }
.spec .who { font-style: italic; }
.spec__group td { font-weight: 600; font-size: var(--fs-label); border-bottom-color: var(--hair); }
.spec__group td:first-child { border-right-color: var(--ink); }
.spec tbody tr[data-pos] { transition: background .25s, color .25s; }
.spec tbody tr[data-pos].is-on td.num { background: var(--blue); color: #fff; }
.spec tbody tr[data-pos].is-on { background: var(--blue-tint); color: var(--blue-ink); }
.spec__guard td, .spec__none td { font-size: var(--fs-label); line-height: 1.35; }
.spec__guard td { border-top-width: 2px; }
.spec__guard b { font-weight: 600; }
.spec__none { color: var(--graphite); }
.spec__none td { font-size: var(--fs-label); }
.spec__none s { text-decoration: line-through 1px var(--graphite); }
#handover:target td { background: var(--blue-tint); box-shadow: inset 0 0 0 2px var(--blue); transition: background .4s; }

.spec--plain { border-width: var(--frame); }
.spec--plain td.num { width: 56px; }

/* ---------- Основная надпись первого листа ---------- */

.stamp { --stamp-photo: 150px; --stamp-who-fs: 26px; grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "photo who" "cta cta" "facts facts"; }
.stamp > * { border-right: 1px solid var(--ink); }
.stamp__who { padding: 16px 18px; }
.stamp__who strong { line-height: 1.1; }
.stamp .stamp__cta { border-right: 0; }
.stamp__facts { padding: 0 8px 4px 0; border-bottom: 0; }

/* финальный штамп: согласование с заказчиком */
.stamp--final {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "parties" "cta" "facts" "sheet";
  position: relative;
  --stamp-seal-room: 20px;
}
/* печать в покое увеличена (scale 1.5): в графе подписи остаётся, ширины окну не даёт */
.stamp__sign dd { position: relative; overflow: clip; overflow-clip-margin: 8px; min-height: 64px; font-family: var(--sans); font-style: italic; font-size: 24px; color: var(--blue-ink); }
.stamp__parties div { padding-right: 8px; }
.stamp__parties div:last-child { padding-bottom: 4px; }
.stamp__parties dd { font-size: var(--fs-article); font-style: italic; }
.stamp__parties dd[data-client].is-empty { color: var(--graphite); }
.stamp__sheet { border-top: 1px solid var(--ink); }
/* финальная печать — в графе подписи; ставится при отправке заявки и проступает при наведении на кнопку штампа */
.stamp--final .seal--blue { right: 14px; top: auto; bottom: 18px; margin-top: 0; }
.stamp--final:has(.stamp__cta:hover) .seal--blue,
.stamp--final:has(.stamp__cta:focus-visible) .seal--blue { opacity: .92; transform: rotate(-9deg) scale(1); }

/* ---------- Лист 2: Минпань ---------- */

.flag { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.view-label { font-weight: 600; font-size: var(--fs-article); margin-bottom: 10px; display: flex; gap: 14px; align-items: baseline; }
.view-label span { font-size: var(--fs-small); color: var(--graphite); }
.flag__view { margin: 0; }
.shot { display: block; border: 1px solid var(--ink); padding: 8px; background: #fff; }
.shot img { border: 1px solid var(--hair); aspect-ratio: 1440 / 770; object-fit: cover; object-position: top; }
.flag__text h2 { max-width: 18ch; }
.flag__text .spec { margin-bottom: 28px; }
.flag__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }

.dim { --dim-fs: 19px; margin-top: 4px; padding: 0 12px; }
.dim::before { top: 30px; }
.dim::after { top: 26px; }

/* ---------- Лист 3: ведомость кейсов ---------- */

.ledger { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); }
.ledger th, .ledger td { border: 1px solid var(--ink); padding: 14px 16px; text-align: left; vertical-align: top; }
.ledger thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); padding: 6px 16px; border-bottom-width: 2px; }
.ledger__note { margin-top: 14px; font-size: var(--fs-small); color: var(--graphite); max-width: 80ch; }
.ledger tbody th { width: 330px; font-weight: 400; }
.ledger__gain { font-size: var(--fs-body); line-height: 1.45; }
.ledger__acts { width: 210px; }
.ledger__acts .btn, .ledger__acts .out { display: flex; width: fit-content; }
.ledger__acts .out { margin-top: 10px; }
.ledger tbody th b { display: block; font-size: 25px; font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.ledger tbody th span { display: block; color: var(--graphite); font-size: var(--fs-small); }
.out { margin-top: 12px; }
.ledger tbody td { font-size: var(--fs-annotation); }
.ledger__nums { width: 290px; }
.ledger__nums > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--thin); }
.ledger__nums > span:last-child { border-bottom: 0; }
.ledger__nums i { font-size: var(--fs-label); color: var(--graphite); }
.ledger__nums b { font-size: var(--fs-figure); white-space: nowrap; font-weight: 400; }

/* ---------- Лист 4: модули ---------- */

.modules__head { display: grid; grid-template-columns: auto minmax(0, 36ch); gap: 64px; align-items: end; margin-bottom: 20px; }
.modules__head h2 { margin-bottom: 0; }
.modules__head p { color: var(--graphite); font-size: var(--fs-body); }

.node-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
  grid-template-rows: 230px 150px;
  column-gap: 0;
  margin-bottom: 30px;
}
.node-wrap__svg { grid-column: 2; grid-row: 1 / 3; }
.node { width: 520px; height: 380px; display: block; overflow: visible; font-family: var(--sans); }
.node .lead { fill: none; stroke: var(--ink); stroke-width: 1; transition: stroke .3s; }
.node .ink .ax { stroke: var(--thin); }
.node__cap { font-style: italic; font-size: 19px; fill: var(--graphite); }

.mod-note { padding-top: 34px; max-width: 360px; }
.mod-note--tl { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.mod-note--bl { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; }
.mod-note--tr { grid-column: 3; grid-row: 1; }
.mod-note--br { grid-column: 3; grid-row: 2; }
.mod-note h3 .num { font-size: var(--fs-small); color: var(--graphite); margin: 0 10px; }
.mod__n { font: 600 var(--fs-body) var(--mono); fill: var(--ink); }
.mod-note h3 { font-size: 26px; line-height: 1.1; padding: 0 2px 4px; border-bottom: 1px solid var(--ink); margin-bottom: 6px; }
.mod-note .out { margin-top: 8px; }
.mod-note p { font-size: var(--fs-annotation); margin-top: 6px; }

/* ---------- Лист 5: процесс ---------- */

.process__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; margin-bottom: 40px; }
.process__head h2 { margin-bottom: 0; }
.process__head .chain { padding-top: 6px; justify-items: end; }
.route-map { position: relative; padding-top: 44px; margin-bottom: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 230px; }
.route-map__dim {
  grid-column: 1 / 6; position: absolute; left: 0; right: 230px; top: 0; height: 30px;
  border-left: 1px solid var(--thin); border-right: 1px solid var(--thin);
}
.route-map__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; border-top: 1px solid var(--ink); }
.route-map__dim::after {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5 14 0v9z' fill='%231d2229'/%3E%3C/svg%3E") left center / 14px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M14 4.5 0 0v9z' fill='%231d2229'/%3E%3C/svg%3E") right center / 14px 9px no-repeat;
}
.route-map__dim span { position: absolute; left: 50%; top: 4px; z-index: 1; transform: translateX(-50%); padding: 0 12px; background: var(--sheet, var(--paper)); font: 600 var(--fs-annotation)/22px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.route-map__steps { grid-column: 1 / 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: var(--frame) solid var(--ink); border-right: 0; }
.route-map__steps li { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 22px 20px; border-right: 1px solid var(--ink); }
.route-map__steps li + li::before { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.route-map__n { font-size: var(--fs-caption); color: var(--graphite); }
.route-map__steps b { font-size: var(--fs-title); font-weight: 600; line-height: 1.15; }
.route-map__steps li > span:last-child { font-size: var(--fs-annotation); color: var(--graphite); }
.route-map__end { grid-column: 6; margin: 0; display: grid; align-content: center; gap: 4px; padding: 16px 20px; border: var(--frame) solid var(--ink); background: var(--blue-tint); }
.route-map__end span { font-size: var(--fs-label); color: var(--graphite); }
.route-map__end b { font-size: var(--fs-title); font-weight: 600; color: var(--blue-ink); }

.chain { display: grid; gap: 14px; }
.chain__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--fs-title); }
.chain__row--off { color: var(--graphite); font-size: 19px; }
.chain__cut { position: relative; display: inline-flex; align-items: center; gap: 12px; }
.chain__cut::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--graphite); transform: rotate(-2deg); }
.chain__row:not(.chain__row--off) { font-size: var(--fs-chapter); font-weight: 600; color: var(--blue); }
.chain__row:not(.chain__row--off) .ic--arrow { width: 40px; height: 20px; }

/* ---------- Пара листов: аудит A4 + цены ---------- */

.frame--split { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 0; align-items: start; padding-left: 0; padding-right: 0; }
.split__audit { padding: 0 var(--pad); border-right: 1px solid var(--ink); align-self: stretch; }
.split__prices { padding: 0 var(--pad); }
.split__audit h2 { margin-bottom: 14px; }
.audit__lead { color: var(--graphite); margin-bottom: 26px; }
.audit__tab { margin-bottom: 30px; }
.audit__tab th { font-weight: 400; font-style: italic; width: 92px; color: var(--graphite); vertical-align: top; }
.tbd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.variants { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); margin-bottom: 30px; }
.variants th, .variants td { border: 1px solid var(--ink); padding: 16px 18px; text-align: left; vertical-align: top; }
.variants thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); padding: 6px 18px; border-bottom-width: 2px; }
.variants tbody th { font-weight: 400; }
.variants tbody th b { display: block; font-size: 27px; font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.variants tbody th span { font-size: var(--fs-annotation); color: var(--graphite); display: block; max-width: 52ch; }
.variants__val { width: 220px; white-space: nowrap; }
.variants__val[colspan] { width: auto; }
.variants__val span { font-style: italic; font-size: var(--fs-body); color: var(--graphite); }
.variants__val b { font-size: 24px; font-weight: 600; }
.variants__val b.num, .variants__val .num { font-family: var(--mono); font-weight: 500; letter-spacing: -.03em; }
.variants__void .variants__val b { font-size: 20px; }
.variants__why { display: block; margin-top: 10px; font-size: var(--fs-label); line-height: 1.35; color: var(--graphite); white-space: normal; }
.variants__void th, .variants__void td { color: var(--graphite); }
.variants__void th b { color: var(--graphite); }
.variants__void s { text-decoration-thickness: 1.5px; }
.assure { font-size: 21px; font-weight: 600; margin-bottom: 18px; padding-left: 30px; position: relative; }
.assure::before { content: ""; position: absolute; left: 2px; top: .3em; width: 14px; height: 8px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.prices__act { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.prices__act .link { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; }

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

.articles__head { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; margin-bottom: 28px; }
.articles__head h2 { margin-bottom: 0; }
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border: var(--frame) solid var(--ink); }
.doc { padding: 22px 28px 26px; display: grid; gap: 10px; align-content: start; }
.doc + .doc { border-left: 1px solid var(--ink); }
.doc__meta { display: flex; align-items: center; gap: 14px; font-size: var(--fs-label); color: var(--graphite); padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.doc__n { font-size: var(--fs-caption); color: var(--ink); padding-right: 14px; border-right: 1px solid var(--hair); }
.doc__meta time { font-variant-numeric: tabular-nums; }
.doc h3 { font-size: 26px; line-height: 1.15; }
.doc h3 a { text-decoration: none; }
.doc h3 a:hover { text-decoration: underline; }
.doc > p:last-child { font-size: var(--fs-annotation); color: var(--graphite); max-width: 60ch; }

.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.faq__aside { font-size: 19px; padding-top: 16px; display: grid; gap: 6px; justify-items: start; }
.faq { --faq-q-fs: var(--fs-article); max-width: 900px; }
.faq summary { gap: 0; }
.faq details p { font-size: var(--fs-body); }

/* ---------- Лист 9: заявка ---------- */

.frame--order { padding-bottom: 0; padding-right: 0; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) 470px; column-gap: 64px; align-items: start; }
.blank__calm { margin-top: 10px; font-size: var(--fs-small); color: var(--ink); }
.blank__status ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink); }
.order > h2 { grid-column: 1 / -1; }
.order__main { padding-bottom: 44px; }
.order > h2 { font-size: var(--fs-final); line-height: .98; max-width: 20ch; margin-bottom: 28px; }
.blank { border: var(--frame) solid var(--ink); padding: 22px 28px 26px; }
.blank h3 { font-size: 24px; margin-bottom: 16px; }
.seg { margin: 0 0 22px; }

/* MD3 checkbox */
.cb { margin: 4px 0 20px; }

.blank__draft { font-size: var(--fs-caption); color: var(--graphite); margin: -6px 0 14px; }
.blank .btn { margin-top: 6px; }
.blank__status { font-size: var(--fs-label); margin-top: 8px; color: var(--red); }
.blank__status.is-ok { color: var(--blue); }

/* плавное появление поля адреса сайта */
.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease-out; }
.reveal.is-open { grid-template-rows: 1fr; }
.reveal__in { overflow: hidden; min-height: 0; }
.reveal.is-open .reveal__in { overflow: visible; }
.reveal .tf { margin-top: 10px; }

@media (min-height: 821px) and (min-width: 1180px) {
  .spec th, .spec td { padding-top: 4px; padding-bottom: 4px; }
  .stamp__photo { min-height: 0; height: 132px; }
  .stamp__who { padding: 10px 18px; }
}

@media (max-height: 820px) and (min-width: 1180px) {
  .sheet--hero .frame { --hb: 22px; padding-top: 22px; }
  .hero__side { gap: 14px; }
  .hero h1 { font-size: 52px; }
  .hero__lead { margin-top: 10px; font-size: 19px; }
  .hero__text { gap: 16px; padding-top: 14px; }
  .proof__fact { font-size: 21px; }
  .spec th, .spec td { padding: 2px 10px; }
  .spec caption { padding-bottom: 4px; font-size: var(--fs-body); }
  .stamp { grid-template-columns: 104px minmax(0, 1fr); }
  .stamp__photo { min-height: 0; height: 104px; }
  .stamp__who { padding: 6px 18px; }
  .stamp__who strong { font-size: 22px; }
  .stamp__who span { font-size: var(--fs-label); }
  .hero .stamp .stamp__cta { padding-top: 9px; padding-bottom: 9px; }
  .stamp__facts li { padding: 3px 18px; font-size: var(--fs-label); }
}

/* ---------- Ширина рамки: раскладка листов по месту, а не по окну ---------- */

.sheet > .frame { container: sheet / inline-size; }

/* поля первого листа — как у остальных; штамп по-прежнему в правом нижнем углу вплотную */
@media (max-width: 1179px) {
  .sheet--hero .frame { --hx: var(--pad); --hb: 0px; padding-top: var(--pad); padding-left: var(--pad); }
  .frame--order { padding-right: 0; }
  .order > :not(.stamp) { margin-right: var(--pad); }
  /* пара листов «аудит + цены» — друг под другом (сетка на самой рамке, запрос по рамке её не достаёт) */
  .frame--split { grid-template-columns: minmax(0, 1fr); }
  .split__audit { border-right: 0; border-bottom: 1px solid var(--ink); padding-bottom: 32px; margin-bottom: 32px; }
}

/* первый лист в две колонки: слева заголовок, лид, доказательство и рисунок; справа спецификация и штамп */
@container sheet (width < 1200px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "h1 h1" "lead side" "text side" "view side";
    column-gap: 40px;
  }
  .hero h1 { grid-area: h1; }
  .hero__lead { grid-area: lead; }
  .hero__text { grid-area: text; justify-content: flex-start; gap: 18px; }
  .proof { margin-top: 0; }
  .hero__view { grid-area: view; align-self: start; margin: 24px 0 28px; }
  .hero__view .axo { max-width: 620px; max-height: none; }
  .hero__side { grid-area: side; margin-top: 18px; }
}

/* модули: рисунок слева, четыре позиции справа столбцом */
@container sheet (width < 1240px) {
  .modules__head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .node-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; column-gap: 48px; align-items: start; }
  .node-wrap__svg { grid-column: 1; grid-row: 1 / 5; align-self: start; }
  .mod-note { grid-column: 2; grid-row: auto; justify-self: stretch; text-align: left; max-width: none; padding-top: 0; margin-bottom: 22px; }
  .mod-note--tl { order: 1; } .mod-note--tr { order: 2; } .mod-note--bl { order: 3; } .mod-note--br { order: 4; }
  .node { width: 100%; height: auto; }
  .node .lead { display: none; }
}

/* разворот складывается: процесс, аудит и цены, Минпань, заявка — в колонку */
@container sheet (width < 1100px) {
  .process__head { flex-direction: column; gap: 20px; }
  .process__head .chain { justify-items: start; }
  .flag, .order { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* цепочка этапов встаёт вертикально — размерная линия срока идёт вдоль неё слева, подпись повёрнута */
  .route-map { grid-template-columns: 34px minmax(0, 1fr); padding-top: 0; }
  .route-map__dim { position: relative; grid-column: 1; grid-row: 1; left: auto; right: auto; top: auto; height: auto; margin-right: 8px; border: 0; border-top: 1px solid var(--thin); border-bottom: 1px solid var(--thin); }
  .route-map__dim::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--ink); }
  .route-map__dim::after {
    left: calc(50% - 4px); right: auto; top: 0; bottom: 0; width: 9px; height: auto;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M4.5 0 9 14H0z' fill='%231d2229'/%3E%3C/svg%3E") center top / 9px 14px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M4.5 14 9 0H0z' fill='%231d2229'/%3E%3C/svg%3E") center bottom / 9px 14px no-repeat;
  }
  .route-map__dim span { top: 50%; transform: translate(-50%, -50%) rotate(-90deg); padding: 0 10px; }
  .route-map__steps { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); border-right: var(--frame) solid var(--ink); }
  .route-map__steps li { border-right: 0; border-bottom: 1px solid var(--ink); }
  .route-map__steps li:last-child { border-bottom: 0; }
  .route-map__steps li + li::before { display: none; }
  .route-map__end { grid-column: 2; border-top: 0; }
}
/* шаги вертикальной цепочки — по два в строку, пока хватает места */
@container sheet (700px <= width < 1100px) {
  .route-map__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-map__steps li:nth-child(odd) { border-right: 1px solid var(--ink); }
  .route-map__steps li:nth-last-child(-n + 2):nth-child(odd) ~ li,
  .route-map__steps li:nth-last-child(-n + 2):nth-child(odd) { border-bottom: 0; }
}

/* ведомость кейсов — карточками: в узкой рамке четыре графы не читаются */
@container sheet (width < 1000px) {
  .ledger, .ledger tbody, .ledger tr, .ledger td, .ledger th { display: block; width: auto !important; }
  .ledger thead { display: none; }
  .ledger tr { border-bottom: 2px solid var(--ink); }
  .ledger th, .ledger td { border: 0; padding: 8px 12px; }
}

@container sheet (width < 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* узкая рамка: первый лист одной колонкой, таблицы с текстом складываются в карточки */
@container sheet (width < 700px) {
  .hero { display: flex; flex-direction: column; }
  .hero h1 br { display: none; }
  .hero__lead { margin-top: 14px; }
  .hero__text { padding-top: 22px; gap: 22px; }
  .hero__view { align-self: stretch; margin: 20px 0 24px; }
  /* в одной колонке рисунок — иллюстрация к доказательству, а не главный объект листа: не шире 480, по центру */
  .hero__view .axo { max-width: 480px; }
  .hero__side { margin: 0 calc(-1 * var(--hx)); }
  .hero__side .spec { width: auto; margin: 0 var(--hx); }
  .spec { font-size: var(--fs-label); }
  .spec th, .spec td { padding: 4px 6px; }
  .spec .c-who { width: 120px; }
  .stamp { grid-template-columns: 104px minmax(0, 1fr); }
  .stamp__photo { min-height: 104px; }

  .node-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .node-wrap__svg { grid-row: auto; justify-self: center; width: min(100%, 420px); }
  .mod-note { grid-column: 1; margin-bottom: 0; }

  .variants thead { display: none; }
  .variants, .variants tbody, .variants tr, .variants th, .variants td { display: block; width: auto; }
  .variants__val { white-space: normal; }

  .docs { grid-template-columns: minmax(0, 1fr); }
  .doc + .doc { border-left: 0; border-top: 1px solid var(--ink); }
  .doc { padding: 18px 16px 20px; }

  .dim__text { font-size: var(--fs-label); white-space: normal; text-align: center; width: 100%; }
  .chain__row:not(.chain__row--off) { font-size: 26px; }
  /* зачёркнутая цепочка переносится: зачёркнут каждый участник, а не строка целиком */
  .chain__cut { flex-wrap: wrap; }
  .chain__cut::after { display: none; }
  .chain__cut > span { text-decoration: line-through 1.5px var(--graphite); }

  .blank { padding: 18px 16px; }
  .stamp--final { grid-template-columns: minmax(0, 1fr); }
  .stamp__parties div { grid-template-columns: 104px minmax(0, 1fr); }
  .stamp__parties dt { padding: 8px 12px; }
}
/* ведомость карточками: где хватает места — текст слева, цифры справа */
@container sheet (520px <= width < 1000px) {
  .ledger tr { display: grid; grid-template-columns: minmax(0, 1fr) 15em; column-gap: 24px; }
  .ledger tr > * { grid-column: 1; }
  .ledger .ledger__nums { grid-column: 2; grid-row: 1 / span 3; align-self: start; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
}
.stamp__parties .stamp__sign { align-items: stretch; }
/* графа подписи: чертёжная линия под подпись */
.stamp__sign dd { min-height: 72px; align-items: flex-end; padding-bottom: 12px; background: linear-gradient(var(--thin), var(--thin)) left 16px bottom 12px / calc(100% - 32px) 1px no-repeat; }
.blank__status small { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--graphite); }

/* ---------- Бланк после отправки (mrlexndr:site.lead): сводка вместо полей; в прототипе её не было ---------- */

.done__reply { margin: 14px 0 18px; font-size: var(--fs-small); }
.mod-note .out, .modules__head .link { white-space: nowrap; }