/* TripScan C — «вход и приложение»: холодный светлый инструментальный вид.
   Фон #F4F5F3 · поверхность #FCFCFB · чернила #212623 · вторичный #59615C
   Волосяные #CFD2CC · интерактивные границы #737A75 (4.03:1) · акцент #157A3E.
   Контраст (проверен): чернила/фон 14.06 · вторичный/фон 5.84 · зелёный/фон 4.94
   · зелёный/поверхность 5.27 · белый/зелёный 5.41 · граница/фон 4.03 (UI ≥3:1).
   Радиус ≤3px · вместо теней — плоская кромка 1px. */

:root {
  --bg: #F4F5F3;
  --surface: #FCFCFB;
  --ink: #212623;
  --sec: #59615C;
  --hair: #CFD2CC;
  --line: #737A75;
  --green: #157A3E;
  --green-deep: #0F6B34;
  --green-tint: #EAF3ED;
  --font-display: 'Geologica', 'IBM Plex Sans', sans-serif;
  --font-body: 'IBM Plex Sans', 'Geologica', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --wrap: 1180px;
}

/* ————— база ————— */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.nw { white-space: nowrap; }
.sep { opacity: .55; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 60;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 10px 16px; font-size: 15px; line-height: 1.3;
  transition: top .15s ease-out;
}
.skip-link:focus { top: 12px; }

/* ————— кнопки ————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.2;
  border-radius: 3px; border: 1px solid transparent;
  padding: 12px 22px; min-height: 44px;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--green); color: #FCFCFB; }
.btn-primary:hover { background: var(--green-deep); color: #FCFCFB; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-mock { pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ————— шапка ————— */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
}
.sh-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px;
  min-height: 62px;
}
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  color: var(--ink); text-decoration: none; letter-spacing: .01em;
}
.logo:hover { color: var(--ink); }
.logo-mark { display: block; }

.sh-nav { margin-left: auto; display: none; }
.sh-nav a {
  font-size: 15.5px; font-weight: 500; color: var(--sec);
  text-decoration: none; padding: 10px 12px; border-radius: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.sh-nav a:hover { color: var(--ink); background: var(--green-tint); }

.btn-login { display: none; }

.burger {
  margin-left: auto; width: 44px; height: 44px; flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.burger-bar { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s ease; }
.burger:hover .burger-bar { background: var(--green-deep); }
.burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.site-header.menu-open .burger-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.menu-open .burger-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* мобильная панель навигации */
.sh-panel { display: none; }
.site-header.menu-open .sh-panel {
  display: block; border-top: 1px solid var(--hair);
}
.sh-panel-inner { max-width: var(--wrap); margin: 0 auto; padding: 6px 20px 14px; }
.sh-panel a {
  display: flex; align-items: center; min-height: 46px;
  font-size: 17px; font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--hair);
}
.sh-panel a:hover { color: var(--green-deep); }
.sh-panel a:first-child {
  font-weight: 600; color: var(--green-deep);
}

@media (min-width: 480px) {
  .btn-login { display: inline-flex; margin-left: auto; padding: 9px 18px; }
  .burger { margin-left: 0; }
}

@media (min-width: 761px) {
  .burger { display: none; }
  .sh-panel, .site-header.menu-open .sh-panel { display: none; }
  .sh-nav { display: flex; align-items: center; gap: 2px; }
  .btn-login { display: inline-flex; margin-left: 6px; padding: 9px 20px; }
}

/* ————— hero ————— */
.hero { background: var(--bg); }
.hero-grid { padding: 34px 20px 44px; }
.hero-copy { max-width: 560px; }

@media (min-width: 1080px) {
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 460px;
    gap: 56px; align-items: start; padding-top: 48px; padding-bottom: 56px;
  }
  .hero-copy { max-width: none; }
}

.eyebrow {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sec); margin-bottom: 20px;
}

h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 7.6vw, 44px); line-height: 1.14;
  letter-spacing: -0.01em; margin-bottom: 16px;
}

.lead { font-size: 18px; line-height: 1.58; color: var(--ink); max-width: 33em; margin-bottom: 18px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.micro {
  font-family: var(--font-mono); font-size: 13px; color: var(--sec);
}

/* ————— артефакты (общее) ————— */
.app {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 14px 16px 12px;
}
.app-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hair);
}
.app-title { font-family: var(--font-body); font-weight: 600; font-size: 15.5px; }
.app-who { font-family: var(--font-mono); font-size: 13px; color: var(--sec); white-space: nowrap; }
.app-cap {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--sec);
}

/* экран смены */
.hero-artifact { margin-top: 10px; }
.app-shift { border-color: var(--line); }

.app-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 14px;
  background: var(--green-tint); color: var(--green-deep);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
}
.chrome-state { display: inline-flex; align-items: center; gap: 7px; }
.chrome-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--green); animation: chpulse 2.2s ease-in-out infinite;
}
@keyframes chpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.chrome-brand { color: var(--sec); }

.app-progress { padding: 10px 0 2px; }
.app-progress-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: 13.5px; margin-bottom: 7px;
}
.app-progress-num { font-size: 15px; }
.app-progress-note { color: var(--sec); }
.app-progress-bar {
  height: 6px; background: var(--bg); border: 1px solid var(--hair); border-radius: 2px;
  overflow: hidden;
}
.app-progress-fill { display: block; height: 100%; background: var(--green); }

.app-next {
  margin: 10px 0 8px; padding: 10px 12px;
  background: var(--green-tint); border: 1px solid var(--green); border-radius: 3px;
}
.app-next-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--green-deep); margin-bottom: 4px;
}
.app-next-addr { font-weight: 600; font-size: 17px; line-height: 1.3; }
.app-next-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); margin-top: 4px; }

.app-rows { list-style: none; }
.app-row {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 7.5px 0; border-top: 1px solid var(--hair);
  font-size: 15px;
}
.app-row .r-num { font-family: var(--font-mono); font-size: 13px; color: var(--sec); }
.app-row .r-win { font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); white-space: nowrap; }
.app-row .r-client { font-family: var(--font-mono); font-size: 11.5px; color: var(--sec); }
.r-meta { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.r-task {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--sec);
  min-width: 7.8em; text-align: left;
}
.app-row-more .r-addr { color: var(--sec); }
.app-foot {
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--sec);
}

/* экран кода */
.code-phone {
  margin: 12px 0 10px; font-family: var(--font-mono); font-size: 19px; letter-spacing: .03em;
}
.code-boxes { display: flex; gap: 8px; }
.code-box {
  width: 42px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 24px;
  background: var(--bg); border: 1px solid var(--hair); border-radius: 3px;
}
.code-box-active { border-color: var(--green); position: relative; }
.code-caret {
  width: 2px; height: 26px; background: var(--green);
  animation: caret 1.1s steps(2, jump-none) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.code-meta { margin: 10px 0 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); }
.code-btn { margin: 0 0 4px; }
.btn-wait { background: var(--bg); color: var(--sec); border-color: var(--hair); }

/* карточка точки */
.app-badge {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--green-deep); background: var(--green-tint);
  border: 1px solid var(--green); border-radius: 2px;
  padding: 3px 8px; white-space: nowrap; flex: none;
}
.app-card-meta {
  margin: 10px 0 12px; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--sec); line-height: 1.6;
}
.app-comment {
  background: var(--bg); border: 1px solid var(--hair); border-radius: 3px;
  padding: 9px 11px 10px; font-size: 15.5px;
}
.app-comment-label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sec);
}
.app-flow { list-style: none; margin-top: 10px; }
.app-flow li {
  display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: 4px 10px; align-items: center;
  padding: 7px 0; position: relative;
}
.app-flow li + li { border-top: 1px solid var(--hair); }
/* галка состояния живёт в своей строке, а не на волосяной между строк */
.app-flow li::before {
  content: ''; font-family: var(--font-mono); font-size: 11px; line-height: 1;
  color: var(--green-deep);
}
.app-flow li.f-done::before { content: '✓'; }
.app-flow li.f-cur::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: chpulse 2.2s ease-in-out infinite;
}
.f-step {
  font-weight: 600; font-size: 14px; line-height: 1.25;
  padding: 7px 11px; background: var(--bg);
  border: 1px solid var(--hair); border-radius: 3px; white-space: nowrap;
  justify-self: start;
}
.app-flow li.f-cur .f-step { color: var(--green-deep); border-color: var(--green); background: var(--green-tint); }
.f-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--sec); text-align: right; }
.app-flow li.f-cur .f-note { color: var(--green-deep); }
.app-actions { display: flex; gap: 10px; margin-top: 12px; }
.app-actions .btn { padding: 10px 18px; }

/* причины переноса */
.app-reasons { margin-top: 16px; }
.reason-list { list-style: none; }
.reason-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--hair); font-size: 15.5px;
}
.reason-list li::before {
  content: ''; width: 9px; height: 9px; flex: none;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
}
.reason-list li:first-child { border-top: 0; }
.reason-list li.r-on { color: var(--green-deep); }
.reason-list li.r-on::before { border-color: var(--green); background: var(--green); }
.reason-list li.r-on { font-weight: 500; }

/* итог смены */
.app-total { border-color: var(--line); }
.app-total-meta {
  margin: 12px 0 4px; font-family: var(--font-mono); font-size: 12.5px; color: var(--sec);
}
.total-rows > div {
  display: grid; grid-template-columns: minmax(9.5em, 38%) 1fr; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--hair);
  font-size: 14.5px; line-height: 1.55;
}
.total-rows dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); }
.total-rows dd { font-family: var(--font-mono); font-size: 13.5px; }
.total-rows .total-sum {
  background: var(--green-tint); border: 1px solid var(--green); border-radius: 3px;
  padding: 10px 12px; margin: 6px 0; border-top: 1px solid var(--green);
}
.total-rows .total-sum dt { color: var(--green-deep); font-weight: 400; }
.total-rows .total-sum dd { font-size: 16.5px; color: var(--green-deep); }

/* ————— секции ————— */
.band { border-top: 1px solid var(--hair); padding: 27px 0 31px; }
.band-last { padding-bottom: 34px; }

.band-head { margin-bottom: 14px; }
.sec-num {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em;
  color: var(--sec); margin-bottom: 10px;
}
h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(25px, 4.6vw, 34px); line-height: 1.16; letter-spacing: -0.008em;
}

.grid-2 { display: grid; gap: 32px; grid-template-columns: 1fr; }
.prose p { margin-bottom: 1em; max-width: 36em; }
.prose p:last-child { margin-bottom: 0; }
.aside { min-width: 0; }

@media (min-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .grid-2-flip .prose { order: 2; }
  .grid-2-flip .aside { order: 1; }
}
@media (min-width: 1240px) {
  .grid-ekran { grid-template-columns: minmax(0, 52%) minmax(0, 1fr) !important; gap: 40px; }
  .aside-stack { display: grid; grid-template-columns: minmax(340px, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .app-reasons { margin-top: 0; }
}

/* секция 01: СМС-карточка заполняет высоту колонки, нижние строки у края */
@media (min-width: 900px) {
  .grid-vhod > .aside { align-self: stretch; display: flex; flex-direction: column; }
  .grid-vhod .app-code { flex: 1; display: flex; flex-direction: column; }
  .grid-vhod .app-code .code-meta { margin-top: auto; }
}

/* блок загрузки */
.download-block {
  margin-top: 24px; padding: 2px 14px 4px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
}
.dl-row {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--hair);
}
.dl-row:first-child { border-top: 0; }
.dl-name { font-weight: 600; font-size: 15.5px; }
.dl-data { font-family: var(--font-mono); font-size: 13px; color: var(--sec); text-align: right; }

/* проза-секция 03 */
.band-prose { background: var(--surface); }
.prose-wide p { font-size: 17.5px; line-height: 1.66; max-width: 42em; }

/* артефакт секции 03: строка с жёлтой пометкой */
.yellow-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 560px; margin: 4px 0 26px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--hair); border-radius: 3px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
}
.yellow-row .yr-num { color: var(--sec); }
.yellow-row .yr-addr { font-weight: 500; }
.yellow-row .yr-flag {
  color: #6B5D00; background: #F2E9BC; border: 1px solid #C9B65A; border-radius: 2px;
  padding: 2px 8px; font-size: 11.5px; letter-spacing: .05em; white-space: nowrap;
}
.yellow-row .yr-note { margin-left: auto; white-space: nowrap; }

.fact-strip {
  list-style: none; margin-top: 18px; max-width: 735px;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--hair); border-radius: 3px; background: var(--bg);
}
.fact-strip li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 14px; border-top: 1px solid var(--hair);
}
.fact-strip li:first-child { border-top: 0; }
.fs-k { font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); }
.fs-v { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
@media (min-width: 761px) {
  .fact-strip { grid-template-columns: repeat(3, 1fr); }
  .fact-strip li { flex-direction: column; gap: 4px; border-top: 0; border-left: 1px solid var(--hair); }
  .fact-strip li:first-child { border-left: 0; }
}

/* тарифы */
.price-block {
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  padding: 6px 18px;
}
.price-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px;
  align-items: start;
  padding: 15px 0 14px; border-top: 1px solid var(--hair);
}
.price-row:first-child { border-top: 0; }
.p-name {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  padding-top: 6px; white-space: nowrap;
}
.p-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.p-fig {
  font-family: var(--font-display); font-weight: 600; font-size: 28px;
  line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap;
}
.p-per { font-size: 14px; color: var(--sec); }
.p-year {
  margin-top: 5px; font-family: var(--font-mono); font-size: 13px; color: var(--sec);
  white-space: nowrap;
}
.p-inc { list-style: none; margin-top: 9px; }
.p-inc li {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--sec);
  line-height: 1.55; padding: 1.5px 0;
}
.p-inc li::before { content: '·\00a0'; color: var(--line); }
.price-foot {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 13px 0; border-top: 1px solid var(--hair);
}
.price-note {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--sec);
  line-height: 1.55;
}
.price-note-end { padding: 9px 0 11px; border-top: 1px solid var(--hair); }

@media (max-width: 460px) {
  .price-row { grid-template-columns: minmax(0, 1fr); }
  .p-name { padding-top: 0; }
}

/* вопросы */
.q { border-bottom: 1px solid var(--hair); }
.q:first-of-type { border-top: 1px solid var(--hair); }
.q summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 3.4em 1fr auto; gap: 10px; align-items: baseline;
  padding: 11px 2px; min-height: 44px;
  font-weight: 500; font-size: 16.5px; line-height: 1.45;
}
.q summary::-webkit-details-marker { display: none; }
.q summary:hover .q-t { color: var(--green-deep); }
.q-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); }
.q-mark {
  font-family: var(--font-mono); font-size: 18px; color: var(--line); font-weight: 400;
  transition: transform .18s ease;
}
.q[open] .q-mark { transform: rotate(45deg); }
.q p {
  padding: 0 2px 14px; margin-left: 3.4em; max-width: 36em;
  color: var(--ink); font-size: 16px; line-height: 1.6;
}
.q summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 3px; }

@media (max-width: 560px) {
  .q p { margin-left: 0; }
}

/* финальная полоса */
.band-close { background: var(--surface); }
.close-head { margin-bottom: 16px; }
.close-fact {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 13px; color: var(--sec);
}
.close-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 14px;
}
.close-note {
  font-family: var(--font-mono); font-size: 13px; color: var(--sec);
}

/* ————— подвал ————— */
.site-footer { border-top: 1px solid var(--hair); background: var(--surface); }
.sf-grid {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  padding: 24px 0 16px;
}
.sf-desc { margin-top: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--sec); }
.sf-req p { font-size: 14.5px; line-height: 1.7; color: var(--sec); }
.sf-req a { color: var(--sec); }
.sf-req a:hover { color: var(--green-deep); }
.sf-docs a { color: var(--ink); text-decoration-color: var(--line); }
.sf-fact {
  border-top: 1px solid var(--hair);
  padding: 12px 0 15px;
  font-family: var(--font-mono); font-size: 13px; color: var(--sec);
}
@media (min-width: 761px) {
  .sf-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ————— страница правовой информации ————— */
.legal { padding: 46px 0 70px; }
.legal .btn-login { display: inline-flex; margin-left: auto; padding: 9px 18px; }
.legal-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 5.4vw, 38px); line-height: 1.15;
  margin-bottom: 26px;
}
.legal-block { border-top: 1px solid var(--hair); padding: 28px 0 10px; }
.legal-block h2 {
  font-size: 20px; font-weight: 600; margin-bottom: 14px;
}
.legal-block p { margin-bottom: 1.05em; max-width: 42em; font-size: 16px; line-height: 1.65; }
.legal-back { margin-top: 30px; }

/* ————— появление при прокрутке ————— */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); }
html.js [data-reveal].revealed {
  opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .code-caret, .chrome-dot, .app-flow li.f-cur::before { animation: none; }
  .btn, .q-mark { transition: none; }
}

/* узкие экраны: итог смены — узкая колонка меток, числа справа */
@media (max-width: 560px) {
  .total-rows > div { grid-template-columns: minmax(9.5em, auto) minmax(0, 1fr); }
  .total-rows dd { text-align: right; }
  .total-rows .total-sum { gap: 4px; }
  .total-rows .total-sum dd { margin-right: -13px; }
  .q p { margin-left: 0; }
}

/* узкие экраны: значения итога ложатся под свою метку целиком
   (до 460 — ниже двухколоночная раскладка не вмещает строки переносов) */
@media (max-width: 460px) {
  .total-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .total-rows dt { margin-top: 3px; }
  .total-rows dd { text-align: left; }
  .total-rows .total-sum dd { margin-right: 0; }
}

/* ————— мелкие экраны ————— */
@media (max-width: 420px) {
  body { font-size: 16px; }
  .hero-grid { padding-top: 36px; padding-bottom: 44px; }
  .app { padding: 15px 14px 13px; }
  .code-box { width: 38px; height: 42px; }
  .app-row { grid-template-columns: 2.7em minmax(0, 1fr); row-gap: 3px; }
  .app-row .r-meta { grid-column: 2; flex-wrap: wrap; white-space: normal; gap: 2px 10px; justify-content: space-between; }
  .app-row .r-task { min-width: 0; }
  .app-row .r-win { font-size: 11.5px; }
  .app-row .r-win::before { content: 'окно\00a0'; }
  /* ник клиента уходит на свою правую строку и не склеивается с адресом */
  .app-row .r-client { display: block; text-align: right; margin-top: 2px; }
}