/* Doxymed — «печатный отчёт»: бумага больничной карты и зелень хирургической формы, два цвета, ось по 5-й колонке */

/* Onest с нашего сервера: сайт не обращается к ресурсам за рубежом */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #e6eeeb;
  --surface: #d7e3de;
  --surface-2: #c7d7d1;
  --ink: #0d3a33;
  --muted: #3a5a53;
  --accent: #0d3a33;
  --accent-ink: #e6eeeb;
  --field: #0d3a33;
  --field-ink: #e6eeeb;
  --field-muted: #a9c4bc;

  --font: "Onest", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3.4rem, 0.4rem + 8.6vw, 9rem);

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7.5rem, 12vw, 13rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-field :focus-visible, .field-page :focus-visible { outline-color: var(--field-ink); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 0.95; text-wrap: balance; }
p { max-width: 54ch; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: calc(var(--section) / 2); }
.head { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.lead { font-size: var(--step-lead); line-height: 1.35; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius); font-weight: 500; text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #164f46; }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- hero: узкая колонка речи, широкий заголовок ---------- */
.hero { position: relative; z-index: 2; background: var(--bg); min-height: 100svh; overflow: clip; }
main { position: relative; z-index: 2; background: var(--bg); }
.hero-grid { min-height: 100svh; align-content: start; }
.hero-left { grid-column: 1 / 5; display: flex; flex-direction: column; padding-top: 1.6rem; }
.wordmark { font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.03em; text-decoration: none; }
.hero-talk { margin-top: 26svh; font-size: var(--step-lead); line-height: 1.35; max-width: 27ch; }
.hero-talk + .button { margin-top: 2rem; align-self: flex-start; }
.hero-right { grid-column: 5 / 13; padding-top: 1.6rem; }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); font-size: var(--step-small); font-weight: 500; }
.nav a { text-decoration: none; }
.nav .nav-login { margin-left: auto; }
.hero h1 { margin-top: 12svh; font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.045em; }
.hero-figure { position: absolute; left: calc(var(--margin) + (100% - 2 * var(--margin) - 11 * var(--gutter)) / 12 * 4 + 4 * var(--gutter)); right: var(--margin); top: 68svh; height: 60svh; margin: 0; }
.hero-photo { position: absolute; inset: 0; overflow: clip; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }
.hero-badge { position: absolute; left: 0; top: 0; transform: translateY(-50%); width: 16.25rem; padding: 1.1rem 1.25rem 1.25rem; background: var(--field); color: var(--field-ink); z-index: 1; }
.hero-badge strong { display: block; font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.hero-badge span { display: block; margin-top: 0.5rem; font-size: var(--step-body); line-height: 1.35; }

/* ---------- showcase: одна страница истории болезни, разрезанная на плитки ---------- */
.board { --cols: 6; --gap: 8px; --t: calc((100vw - 2 * var(--margin) - (var(--cols) - 1) * var(--gap)) / var(--cols)); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.board > :not(.sr-only) { aspect-ratio: 1; position: relative; overflow: clip; }
.tile-pic { --bw: calc(var(--cols) * var(--t) + (var(--cols) - 1) * var(--gap)); background-image: url("assets/medical-case-book.jpg"); background-size: calc(var(--bw) * 1.12) auto; background-position: calc(var(--c) * -1 * (var(--t) + var(--gap)) - var(--bw) * 0.04) calc(var(--r) * -1 * (var(--t) + var(--gap)) - var(--bw) * 0.3); filter: grayscale(1) contrast(1.05); transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tile-pic:hover { transform: scale(1.08); z-index: 1; } }
.board-narrow { display: none; }
.board-narrow { --cols: 3; --gap: 6px; --bh: calc(6 * var(--t) + 5 * var(--gap)); --xoff: calc((var(--bh) * 0.7878 - (3 * var(--t) + 2 * var(--gap))) / 2); }
.board-narrow .tile-pic { background-size: auto var(--bh); background-position: calc(var(--c) * -1 * (var(--t) + var(--gap)) - var(--xoff)) calc(var(--r) * -1 * (var(--t) + var(--gap))); }
.how-body { display: contents; }
.tile-c { background: var(--surface-2); padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; }
.tile-c.on-field { background: var(--field); color: var(--field-ink); }
.tile-c h2 { font-size: var(--step-lead); line-height: 1; letter-spacing: -0.03em; }
.tile-c p { font-size: var(--step-body); line-height: 1.3; font-weight: 500; }
.tile-c a { font-size: var(--step-body); font-weight: 500; }

/* ---------- how-it-works: много в одно ---------- */
.how-head { grid-column: 1 / 5; }
.how-head h2 { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.035em; }
.how-head p { margin-top: 1.25rem; font-size: var(--step-body); }
.how-diagram { grid-column: 1 / 13; margin-top: clamp(3rem, 6vw, 5rem); }
.how-diagram svg { width: 100%; height: auto; }
.how-diagram .v { display: none; }
.how-steps { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); margin-top: 2rem; }
.how-steps h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
.how-steps p { margin-top: 0.5rem; font-size: var(--step-body); max-width: 34ch; }

/* ---------- proof: названия КР в колонках + живой поиск ---------- */
.kr { padding-block: calc(var(--section) / 2); }
.kr-head { grid-column: 1 / 5; }
.kr-head h2 { font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; }
.kr-head p { margin-top: 1rem; font-size: var(--step-body); max-width: 34ch; }
.kr-search { margin-top: 1.75rem; }
.kr-search label { display: block; font-weight: 500; font-size: var(--step-body); }
.kr-search input { margin-top: 0.5rem; width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: var(--step-body); }
.kr-search input::placeholder { color: var(--muted); }
.kr-count { margin-top: 0.75rem; font-size: var(--step-body); color: var(--muted); min-height: 1.5em; }
.kr-names { grid-column: 5 / 13; columns: 4; column-gap: 2rem; font-size: var(--step-body); line-height: 1.5; }
.kr-names li { break-inside: avoid; }
.kr-names .kind { color: var(--muted); break-before: column; }
.kr-names .kind:first-child { break-before: auto; }
.kr-names a { text-decoration: none; }
.kr-results { grid-column: 5 / 13; columns: 2; column-gap: 2.5rem; }
.kr-results[hidden] { display: none; }
.kr-results li { break-inside: avoid; padding-bottom: 0.9rem; font-size: var(--step-body); line-height: 1.35; }
.kr-results a { text-decoration: none; font-weight: 500; }
.kr-results span { display: block; color: var(--muted); font-size: var(--step-body); }
@media (hover: hover) and (pointer: fine) { .kr-names a:hover, .kr-results a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

/* ---------- features: мозаика разных плиток ---------- */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 8px; }
.mosaic > * { padding: 1.5rem; overflow: clip; }
.m-ui { grid-column: 1 / 7; grid-row: 1 / 6; background: var(--surface-2); padding: clamp(1rem, 2vw, 1.75rem); }
.m-head { grid-column: 7 / 13; grid-row: 1 / 4; background: var(--field); color: var(--field-ink); }
.m-head h2 { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.035em; }
.m-fig { grid-column: 7 / 10; grid-row: 4 / 6; background: var(--surface); }
.m-fig strong { display: block; font-size: var(--step-head); line-height: 0.9; letter-spacing: -0.04em; }
.m-fig p { margin-top: 0.6rem; font-size: var(--step-body); line-height: 1.35; }
.m-list { grid-column: 10 / 13; grid-row: 4 / 6; background: var(--surface-2); }
.m-list li { font-size: var(--step-body); line-height: 1.5; font-weight: 500; }
.m-photo { grid-column: 1 / 7; grid-row: 6 / 9; padding: 0; background: #fff; }
.m-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 900ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .m-photo:hover img { transform: scale(1.04); } }
.m-say { background: var(--surface); }
.m-say.on-field { background: var(--field); color: var(--field-ink); }
.m-say p { font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.m-say-1 { grid-column: 7 / 10; grid-row: 6 / 9; }
.m-say-2 { grid-column: 10 / 13; grid-row: 6 / 9; }

/* фрагмент интерфейса: расшифровка и запись с пометками на полях */
[data-ui] { font-size: var(--step-small); line-height: 1.45; color: var(--ink); height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 0.9rem; }
[data-ui] .ui-bar { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-small); color: var(--muted); }
[data-ui] .ui-bar b { color: var(--ink); font-weight: 500; }
[data-ui] .ui-body { display: grid; grid-template-columns: 1fr 1.35fr; gap: 0.75rem; min-height: 0; }
[data-ui] .ui-talk, [data-ui] .ui-rec { background: var(--bg); padding: 0.9rem 1rem; overflow: clip; }
[data-ui] .ui-talk p { font-size: var(--step-small); max-width: none; }
[data-ui] .ui-talk p + p { margin-top: 0.6rem; }
[data-ui] .ui-talk .who { display: block; font-weight: 500; font-size: var(--step-small); color: var(--muted); }
[data-ui] .ui-rec dl { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
[data-ui] .ui-rec dt { font-weight: 500; font-size: var(--step-small); color: var(--muted); }
[data-ui] .ui-rec dd { font-size: var(--step-small); }
[data-ui] .ui-rec .code { display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.4rem; background: var(--field); color: var(--field-ink); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
[data-ui] .ui-rec .ref { display: block; margin-top: 0.25rem; font-size: var(--step-small); color: var(--muted); }
[data-ui] .ui-rec .ref.is-on { color: var(--ink); background: var(--surface); padding: 0.15rem 0.35rem; margin-inline: -0.35rem; }

/* ---------- about: данные пациентов ---------- */
.data { background: var(--surface); }
.data-row { row-gap: 2rem; }
.data-facts { grid-column: 1 / 4; display: grid; gap: 1.25rem; align-content: start; font-size: var(--step-small); }
.data-facts dt { color: var(--muted); }
.data-facts dd { font-weight: 500; }
.data-main { grid-column: 5 / 12; }
.data-main h2 { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.data-main p { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.38; max-width: 46ch; }
.data-rec { margin-top: 7.5rem; }
.data-rec-word { grid-column: 1 / 4; font-size: var(--step-small); font-weight: 500; }
.data-lists { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); column-gap: 4rem; row-gap: 2rem; }
.data-lists h3 { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; line-height: 1.45; margin-bottom: 0.6rem; }
.data-lists li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-small); line-height: 1.4; padding-bottom: 0.6rem; }
.data-lists li span:last-child { color: var(--muted); text-align: right; }

/* ---------- faq: ответы как текст для чтения ---------- */
.faq-head { grid-column: 1 / 5; }
.faq-head h2 { font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.02em; }
.faq-text { grid-column: 5 / 13; columns: 2; column-gap: 3.5rem; }
.faq-text p { break-inside: avoid; margin-bottom: 1.25rem; font-size: var(--step-body); line-height: 1.55; max-width: 38ch; }
.faq-text b { font-weight: 500; }

/* ---------- cta: три изображения, затем поле ---------- */
.cta { position: relative; z-index: 2; background: var(--bg); }
.cta-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.cta-strip img { width: 100%; height: 40svh; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.cta-band { min-height: 44svh; background: var(--field); color: var(--field-ink); padding-block: clamp(3rem, 6vw, 5rem); }
.cta-band .cta-text { grid-column: 1 / 9; }
.cta-band .statement { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; max-width: 40ch; }
.cta-band .statement a { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; transition: text-underline-offset var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta-band .statement a:hover { text-underline-offset: 9px; } }
.cta-band .cta-note { margin-top: 2rem; font-size: var(--step-body); }
.cta-band .cta-note a { text-decoration: none; }
.cta-band .cta-side { grid-column: 9 / 13; align-self: end; justify-self: end; width: min(100%, 22rem); }
.cta-band .cta-side img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; filter: grayscale(1) invert(0.9) contrast(1.1); background: transparent; }

/* ---------- footer: колонки сверху, знак снизу ---------- */
.footer { position: sticky; bottom: 0; z-index: 1; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--field); color: var(--field-ink); padding-block: 2.5rem 1.25rem; }
.foot-cols { row-gap: 2rem; }
.foot-cols > div { grid-column: span 3; font-size: var(--step-small); line-height: 1.6; }
.foot-cols h2 { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; line-height: 1.6; }
.foot-cols li, .foot-cols p { color: var(--field-muted); }
.foot-cols a { text-decoration: none; color: var(--field-ink); }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.foot-mark { align-self: end; }
.foot-mark svg { width: 100%; height: auto; fill: var(--field-ink); }
.foot-legal { margin-top: 1.25rem; font-size: var(--step-small); line-height: 1.5; color: var(--field-muted); max-width: 56ch; }
.foot-legal a { color: var(--field-ink); }

/* ---------- вход ---------- */
.login-page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.login-top { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1.6rem; }
.login-top a:not(.wordmark) { font-size: var(--step-small); font-weight: 500; text-decoration: none; }
.login-grid { align-items: stretch; }
.login-form { grid-column: 1 / 6; align-self: center; padding-block: 3rem; }
.login-form h1 { font-size: var(--step-head); line-height: 0.9; letter-spacing: -0.04em; }
.login-form > p { margin-top: 1.25rem; font-size: var(--step-body); max-width: 34ch; }
.login-form form { margin-top: 2.25rem; display: grid; gap: 1.1rem; max-width: 26rem; }
.login-form label { font-weight: 500; font-size: var(--step-body); }
.login-form input { display: block; margin-top: 0.45rem; width: 100%; min-height: 3.25rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: var(--step-body); }
.login-form .button { margin-top: 0.4rem; justify-self: start; }
.login-msg { min-height: 1.5em; font-size: var(--step-body); }
.login-pic { grid-column: 7 / 13; position: relative; min-height: 60svh; margin: 0; }
.login-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: grayscale(1) contrast(1.05); }
.login-foot { background: var(--field); color: var(--field-ink); padding-block: 2rem 1.5rem; }
.login-foot .grid { row-gap: 1.25rem; }
.login-foot .grid > div { grid-column: span 4; font-size: var(--step-small); line-height: 1.6; color: var(--field-muted); }
.login-foot b { color: var(--field-ink); font-weight: 500; }
.login-foot a { color: var(--field-ink); text-decoration: none; }

@media (max-width: 75em) {
  .kr-head { grid-column: 1 / 7; }
  .kr-names, .kr-results { grid-column: 1 / -1; margin-top: 2.5rem; }
  .kr-names { columns: 3; }
  .kr-names .kind { break-before: auto; margin-top: 1.5rem; }
  .kr-names .kind:first-child { margin-top: 0; }
  .m-say p { font-size: var(--step-body); }
}

/* ---------- телефон ---------- */
@media (max-width: 47.99em) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero { min-height: 0; }
  .hero-grid { min-height: 0; }
  .hero-left, .hero-right { grid-column: 1 / -1; }
  .hero-left { display: contents; }
  .hero-left .wordmark { grid-row: 1; grid-column: 1 / 3; padding-top: 1.25rem; }
  .hero-right { display: contents; }
  .nav { grid-row: 1; grid-column: 3 / -1; padding-top: 1.25rem; }
  .nav { justify-content: flex-end; }
  .nav a:not(.nav-login) { display: none; }
  .hero h1 { grid-row: 2; grid-column: 1 / -1; margin-top: 3.5rem; font-size: 11vw; line-height: 0.9; }
  .hero-talk { grid-row: 3; grid-column: 1 / -1; margin-top: 1.5rem; font-size: var(--step-lead); max-width: none; }
  .hero-talk + .button { grid-row: 4; grid-column: 1 / -1; margin-top: 1.5rem; align-self: auto; width: 100%; }
  .hero-figure { position: relative; left: auto; right: auto; top: auto; height: auto; aspect-ratio: 3 / 2; margin-top: 4.5rem; margin-inline: calc(var(--margin) * -1); }
  .hero-photo img { object-position: 50% 0%; }
  .hero-badge { left: var(--margin); width: 60%; padding: 0.9rem 1rem 1rem; }
  .hero-badge strong { font-size: var(--step-head); }
  .hero-badge span { font-size: var(--step-small); }
  .hero .wrap { padding-bottom: 0; }

  .board-wide { display: none; }
  .board-narrow { display: grid; }
  .board .wide-sm { grid-column: span 2; aspect-ratio: auto; }
  .tile-c h2 { font-size: var(--step-lead); }
  .tile-c p, .tile-c a { font-size: var(--step-small); }

  .how-head, .how-diagram, .how-steps { grid-column: 1 / -1; }
  .how-body { display: grid; grid-template-columns: 1fr 38vw; gap: 1rem; grid-column: 1 / -1; margin-top: 2.5rem; }
  .how-diagram { grid-column: 1; margin-top: 0; }
  .how-diagram .h { display: none; }
  .how-diagram .v { display: block; }
  .how-steps { grid-column: 2; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); margin-top: 0; }
  .how-steps h3 { font-size: var(--step-body); }
  .how-steps p { font-size: var(--step-small); }

  .kr-head, .kr-names, .kr-results { grid-column: 1 / -1; }
  .kr-names, .kr-results { margin-top: 2.5rem; columns: 2; column-gap: 1.25rem; font-size: var(--step-body); }
  .kr-results { columns: 1; }
  .kr-names .kind { break-before: auto; margin-top: 2rem; }
  .kr-names .kind:first-child { margin-top: 0; }

  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; }
  .mosaic > * { grid-column: auto; grid-row: auto; }
  .m-head { grid-column: 1 / -1; order: 1; }
  .m-head h2 { font-size: var(--step-head); }
  .m-ui { grid-column: 1 / -1; order: 2; min-height: 34rem; }
  .m-fig { order: 3; aspect-ratio: 1; }
  .m-list { order: 4; aspect-ratio: 1; }
  .m-list li { font-size: var(--step-body); }
  .m-photo { grid-column: 1 / -1; order: 5; aspect-ratio: 16 / 9; }
  .m-say-1, .m-say-2 { grid-column: 1 / -1; order: 6; }
  [data-ui] .ui-body { grid-template-columns: 1fr; }

  .data-facts, .data-main, .data-rec-word, .data-lists { grid-column: 1 / -1; }
  .data-main { order: -1; }
  .data-facts { grid-template-columns: 1fr 1fr; font-size: var(--step-small); }
  .data-main p { font-size: var(--step-lead); }
  .data-rec { margin-top: 4rem; }
  .data-lists { grid-template-columns: 1fr; }

  .faq-head, .faq-text { grid-column: 1 / -1; }
  .faq-head h2 { font-size: var(--step-lead); }
  .faq-text { columns: 1; margin-top: 1.75rem; }
  .faq-text p { font-size: var(--step-body); margin-bottom: 1.125rem; }

  .cta-strip { grid-template-columns: 1fr 1fr; }
  .cta-strip img { height: auto; aspect-ratio: 4 / 3; }
  .cta-strip img:first-child { grid-column: 1 / -1; }
  .cta-band .cta-text, .cta-band .cta-side { grid-column: 1 / -1; }
  .cta-band .statement { font-size: var(--step-lead); }
  .cta-band .cta-side { margin-top: 2.5rem; width: 60%; }

  .foot-cols > div { grid-column: span 2; }
  .footer { min-height: 100svh; }

  .login-form, .login-pic { grid-column: 1 / -1; }
  .login-pic { min-height: 0; aspect-ratio: 4 / 3; margin-inline: calc(var(--margin) * -1); }
  .login-foot .grid > div { grid-column: 1 / -1; }
}

/* ---------- движение: контент виден и без скрипта ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 600ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .hero-photo img { animation: drift 18s var(--ease-soft) infinite alternate; transform-origin: 40% 40%; }
  [data-ui] .ref.is-on { transition: background-color 400ms ease; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }