/* Статичный путь объекта в первом экране. Стили изолированы от демонстраций. */
.p-hero .p-hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.p-hero .p-hero__copy h1,
.p-hero .p-hero__copy .lead { margin-inline: auto; }
.p-hero .p-hero__aside { max-inline-size: 100%; justify-items: center; }
.p-hero .p-hero__aside .btn-row,
.p-hero .p-hero__facts { justify-content: center; }
.hero-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, .8fr) 26px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  max-inline-size: 950px;
  margin: 32px auto 0;
}
.hero-flow__step { min-inline-size: 0; }
.hero-flow .hero-flow__title {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}
.hero-flow__number { display: block; inline-size: max-content; margin: 0 auto 8px; font: 24px/1.2 var(--mono); color: var(--muted); }
.hero-flow__label { display: inline-block; max-inline-size: 100%; }
.hero-flow__window { border: 1px solid var(--line-2); border-radius: 12px; background: #141619; }
.hero-flow__browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 46px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: #181a1d;
}
.hero-flow__dots { display: flex; gap: 5px; flex: 0 0 auto; }
.hero-flow__dots i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #3a3d42; }
.hero-flow__address { flex: 1; min-inline-size: 0; padding: 4px 10px; border-radius: 20px; background: #24272b; color: #a0a3a9; font: 11px/1.5 var(--mono); }
.hero-flow__map, .hero-flow__cad { inline-size: 100%; block-size: auto; aspect-ratio: 28 / 17; }
.hero-flow__map { background: #1b1d20; }
.hero-flow__parcels { stroke: #53504b; fill: #262729; stroke-width: 1; }
.hero-flow__parcels .hero-flow__streets { stroke: #34363a; stroke-width: 14; fill: none; }
.hero-flow__map-labels { fill: #a0a3a9; font: 11px var(--sans); }
.hero-flow__contour { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.3; stroke-linejoin: round; }
.hero-flow .hero-flow__caption { margin: 0; padding: 9px 10px; border-top: 1px solid var(--line); color: #a0a3a9; font-size: 11px; line-height: 1.5; }
.hero-flow__arrow { display: flex; justify-content: center; align-self: center; margin-block-start: 62px; color: rgba(255, 255, 255, .65); }
.hero-flow__arrow svg { inline-size: 30px; max-inline-size: none; block-size: 26px; flex: 0 0 auto; }
.hero-flow__step--convert .hero-flow__title { text-align: center; }
.hero-flow__conversion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-block-size: 244px; text-align: center; }
.hero-flow__conversion-icon { inline-size: 26px; block-size: 26px; margin-block-end: 4px; color: var(--accent); }
.hero-flow .hero-flow__conversion-title { margin: 0; font-size: 15px; color: var(--text); }
.hero-flow .hero-flow__zone { margin: 0; font-size: 11px; color: var(--muted); }
.hero-flow__file { display: inline-block; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 5px; font: 11px/1.5 var(--mono); }
.hero-flow__crs-pair { display: flex; align-items: center; justify-content: center; gap: 7px; max-inline-size: 100%; }
.hero-flow__crs-pair .hero-flow__file { white-space: nowrap; }
.hero-flow__crs-arrow { color: var(--muted); font-size: 16px; }
.hero-flow__msk-digits { display: inline-block; inline-size: 2ch; block-size: 1.5em; vertical-align: bottom; overflow: clip; font-variant-numeric: tabular-nums; }
.hero-flow__msk-reel { display: block; position: relative; block-size: 100%; }
.hero-flow__msk-reel > span { display: block; block-size: 100%; }
.hero-flow__msk-reel > span + span { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; }
.hero-flow__program-bar { display: flex; align-items: center; justify-content: space-between; min-block-size: 26px; padding: 4px 11px; border-radius: 12px 12px 0 0; background: #181a1d; color: #a0a3a9; font-size: 11px; line-height: 18px; }
.hero-flow__program-controls { font-size: 13px; line-height: 18px; }
.hero-flow__drawing-bar { display: flex; min-block-size: 20px; background: #181a1d; }
.hero-flow__drawing-bar > span { display: inline-flex; align-items: center; gap: 18px; padding: 2px 11px; border-inline-end: 1px solid #363b42; background: #2b2f35; font-size: 10px; line-height: 16px; }
.hero-flow__drawing-bar i { color: #a0a3a9; font-style: normal; }
.hero-flow__grid { stroke: #292d32; stroke-width: .7; }
.hero-flow__axes { stroke: #5c626b; stroke-width: 1; fill: none; }
.hero-flow__contour--cad { fill: none; }
.hero-flow__vertices { fill: #141619; stroke: var(--accent); stroke-width: 1.5; }
.hero-flow__cad-labels { fill: #a0a3a9; font: 10px var(--mono); }
@media (min-width: 641px) and (max-width: 850px) {
  .hero-flow { grid-template-columns: minmax(0, 1fr) 22px minmax(174px, .8fr) 22px minmax(0, 1fr); gap: 8px; }
  .hero-flow__label { min-block-size: 3em; }
  .hero-flow__browser-bar { gap: 6px; padding-inline: 8px; }
  .hero-flow__address { padding-inline: 6px; font-size: 9px; }
  .hero-flow__conversion { min-block-size: 210px; }
}
@media (max-width: 640px) {
  .hero-flow { grid-template-columns: minmax(0, 1fr); gap: 12px; max-inline-size: 360px; }
  .hero-flow__arrow { justify-self: center; margin-block-start: 0; transform: rotate(90deg); font-size: 20px; }
  .hero-flow__conversion { min-block-size: 112px; }
  .hero-flow__conversion-icon { display: block; }
}