/* Лендинг Envoy v4: панель организатора, как мы работаем и вопросы (один экран), подвал. */

/* Панель организатора: факты слева и есть вкладки; справа экран админки кропом 1:1, экраны в одной ячейке */
.desk-grid { align-items: start; }
.facts { grid-column: 1 / 5; display: grid; gap: 4px; }
.fact {
  position: relative; display: grid; gap: 4px; width: 100%; padding: 16px 20px 16px 24px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--hall-muted); text-align: left; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.fact::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 2px; border-radius: 1px; background: var(--stub); transform: scaleY(0); transition: transform var(--t-state) var(--ease); }
.fact b { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--hall-text); }
.fact span { font-size: 16px; line-height: 1.5; }
.fact[aria-selected="true"] { background: var(--hall-2); color: var(--hall-small); }
.fact[aria-selected="true"]::before { transform: none; }
@media (hover: hover) and (pointer: fine) { .fact[aria-selected="false"]:hover { background: color-mix(in srgb, var(--hall-2) 60%, transparent); } }
.desk-view {
  grid-column: 5 / 13; position: relative; display: grid; aspect-ratio: 845 / 520; overflow: hidden;
  border-radius: var(--r-shot); background: #141415; box-shadow: inset 0 0 0 1px var(--hall-line);
}
.panel { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 0ms linear var(--t-state); }
.panel.on { opacity: 1; z-index: 2; transition: opacity var(--t-state) var(--ease) 0ms; }
.panel.prev { z-index: 1; }
.panel img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.desk-view::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hall-line); pointer-events: none; }
@media (max-width: 1023px) {
  .facts { grid-column: 1 / -1; order: 2; margin-top: 24px; }
  .desk-view { grid-column: 1 / -1; aspect-ratio: 845 / 520; height: auto; }
  .panel img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
}
@media (prefers-reduced-motion: reduce) { .panel, .panel.on, .fact::before { transition: none; } }

/* Как мы работаем: пять шагов в ряд, кружки 01–05 одинаковые, между ними линия */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
.how-steps li { position: relative; padding-right: 8px; }
.how-steps li:not(:last-child)::before { content: ""; position: absolute; left: 46px; right: calc(-1 * var(--gap) + 12px); top: 16.25px; height: 1.5px; background: var(--paper-line); }
.how-steps .num { font-size: 16px; font-weight: 650; }
.how-steps .h3 { margin-top: 16px; }
.how-steps p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
@media (max-width: 1023px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .how-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 0; }
  .how-steps li:not(:last-child)::before { left: 16.25px; right: auto; top: 42px; bottom: -18px; width: 1.5px; height: auto; }
  .how-steps .h3 { margin-top: 4px; grid-column: 2; }
  .how-steps p { grid-column: 2; }
}

/* Вопросы: на всю ширину контейнера в две колонки, значок у правого края */
.faq-wrap { margin-top: 48px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
.faq-col { border-top: 1px solid var(--paper-line); }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: var(--r-md);
  min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none;
  font-size: 20px; line-height: 1.35; font-weight: 600;
}
.faq summary:focus-visible { outline-offset: -6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--t-state) var(--ease);
}
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq .ans { overflow: hidden; min-height: 0; }
.faq .ans p { padding-bottom: 24px; max-width: 33em; color: var(--graphite); }
.faq details::details-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-move) var(--ease), content-visibility var(--t-move) allow-discrete;
}
.faq details[open]::details-content { grid-template-rows: 1fr; }
@media (max-width: 1023px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq-col + .faq-col { border-top: 0; } }
@media (max-width: 767px) { .faq summary { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } .faq summary::after { transition: none; } }

/* Подвал: знак и строка о компании; реквизиты (слот), авторы фото одной строкой */
/* Подвал: бренд с кнопкой, разделы, услуги, контакты; внизу права и документы. Разделителей нет, только воздух */
.foot { padding-block: 72px 40px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.foot .logo { color: var(--hall-text); }
.foot-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.foot-brand p { max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--hall-small); }
.foot-cta { margin-top: 8px; min-height: 44px; padding: 0 18px; font-size: 15px; background: #FFFFFF; color: #1D1D1F; }
@media (hover: hover) and (pointer: fine) { .foot-cta:hover { background: #E9E6DF; } }
.foot-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.foot-h { margin: 0 0 6px; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hall-small); }
.foot-col a, .foot-col p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hall-text); text-decoration: none; text-underline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { text-decoration: underline; } }
.foot-col p { color: var(--hall-small); }
.foot-col .foot-tel { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.foot-social { display: flex; gap: 10px; margin-top: 6px; }
.foot-col .soc { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hall-3); color: #FFFFFF; transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.soc svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { a.soc:hover { background: #FFFFFF; color: #1D1D1F; text-decoration: none; } }
a.soc:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 64px; }
.foot-bottom p, .foot-legal a { margin: 0; font-size: 14px; line-height: 1.45; color: var(--hall-small); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-legal a { text-underline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .foot-legal a:hover { color: var(--hall-text); } }
@media (max-width: 1023px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 500px) { .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-bottom { margin-top: 40px; } }

/* на телефоне внизу закреплена кнопка «Запросить смету»: подвал не прячется под ней */
@media (max-width: 767px) { .foot { padding-bottom: calc(40px + 80px); } }