/* Лендинг curatum.video — «Паспорт». Токены, шрифты, кнопки, поля, cookie, каркас разделов (.sec), факты (.facts), тёмная «серверная» (.sec--night),
   первый экран (.hero) и полоса .strip, нумерованные шаги (.steps) и подвал — в assets/lp.css (общая основа лендингов Curatum, копия эталона из sites/health).
   Здесь только то, что нужно этой странице. Размеры в rem, поэтому работает общий масштаб шрифта; все цвета — токены, поэтому тёмная тема работает сама. */

/* ---- ссылка «К содержанию» для клавиатуры и экранных дикторов ---- */
.skip { position: absolute; z-index: 90; left: 1rem; top: -4rem; padding: 0.625rem 1rem; border-radius: var(--r); background: var(--brand); color: var(--on-brand); font-weight: 500; transition: top var(--t-fast) var(--ease-out); }
.skip:focus { top: 0.75rem; }

/* точечная сетка «чертежа»: на экране врача и на схеме связки */
.stage, .chain {
  --frame: color-mix(in srgb, var(--brand) 55%, var(--line-2));
  background-color: var(--paper-2);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 1.4px); background-size: 16px 16px; background-position: 8px 8px;
}

/* ---- метки записи: те же подписи, что на экране звонка ---- */
.rb { display: inline-flex; align-items: center; gap: 0.4375rem; width: fit-content; padding: 0.3125rem 0.625rem; border: 1px solid; border-radius: var(--r-s); font: 500 0.75rem/1.2 var(--f-body); }
.rb i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--danger); }
.rb--rec { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-wash); color: var(--danger-ink); }
.rb--pause, .rb--wait { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-wash); color: var(--amber-ink); }
@media (prefers-reduced-motion: no-preference) { .rb i { animation: lp-blink 2.4s ease-in-out infinite; } }

/* ---- первый экран: пример экрана врача во время приёма (демонстрационные данные) ---- */
@media (max-width: 64rem) { .room { max-width: 40rem; } }
.room { position: relative; min-width: 0; padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--sheet); box-shadow: var(--sh-2); }
.room-head { display: flex; flex-direction: column; gap: 0.375rem; padding-bottom: 1.125rem; border-bottom: 1px solid var(--line-2); }
.room-head b { font: 500 1.625rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.room-sub { color: var(--ink-3); font-size: 0.875rem; }

.stage { position: relative; margin-top: 1.125rem; aspect-ratio: 16 / 10; overflow: hidden; border: 1.5px dashed var(--frame); border-radius: var(--r); }
.stage__bar { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--sheet) 82%, transparent); color: var(--ink-2); font: 500 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.stage__net { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ok-ink); }
.stage__net i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--led); }
.stage__rec { position: absolute; z-index: 2; left: 0.875rem; top: 3.25rem; background: var(--sheet); }
.stage__who { position: absolute; left: 50%; bottom: -1px; width: 46%; max-width: 15rem; transform: translateX(-50%); color: var(--brand); fill: var(--wash); }
.stage__self { position: absolute; z-index: 2; right: 0.875rem; bottom: 0.875rem; width: 27%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); }
.stage__self svg { position: absolute; left: 50%; bottom: -1px; width: 72%; transform: translateX(-50%); color: var(--ink-3); fill: var(--paper-2); }

.room-ctl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.125rem; }
.room-ctl li { display: grid; justify-items: center; align-content: start; gap: 0.4375rem; min-width: 0; text-align: center; }
.ctl { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); color: var(--ink); }
.ctl svg { width: 1.125rem; height: 1.125rem; }
.ctl--on { border-color: var(--brand); background: var(--wash); color: var(--wash-ink); }
.ctl--end { border-color: var(--danger); background: var(--danger); color: #fff; }
.room-ctl b { color: var(--ink-3); font: 500 0.625rem/1.3 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }

.room-hints { margin-top: 1.125rem; }
.room-hints .ag-alert { padding: 0.75rem 1rem; }
.room-hints__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.125rem; }
.ticks { display: inline-flex; gap: 3px; }
.ticks i { width: 1.125rem; height: 0.375rem; border-radius: 1px; background: var(--line-2); }
.ticks i.on { background: var(--brand); }
.room-note { margin-top: 1rem; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.45; }

@media (max-width: 26rem) {
  .room { padding: 1.125rem 1rem 1rem; }
  .room-head b { font-size: 1.5rem; }
  .stage__bar { gap: 0.5rem; padding-inline: 0.625rem; font-size: 0.625rem; letter-spacing: 0.02em; }
  .stage__time { display: none; }
  .stage__rec { left: 0.625rem; }
  .room-ctl { gap: 0.25rem; }
  .room-ctl b { font-size: 0.5625rem; letter-spacing: 0; }
  .room-ctl .more { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .room-head, .stage, .room-ctl, .room-hints { animation: lp-up 700ms var(--ease-out) backwards; }
  .stage { animation-delay: 0.12s; } .room-ctl { animation-delay: 0.24s; } .room-hints { animation-delay: 0.36s; }
  .ticks i.on { animation: lp-in 500ms var(--ease-out) backwards; }
  .ticks i:nth-child(1) { animation-delay: 0.5s; } .ticks i:nth-child(2) { animation-delay: 0.6s; } .ticks i:nth-child(3) { animation-delay: 0.7s; } .ticks i:nth-child(4) { animation-delay: 0.8s; } .ticks i:nth-child(5) { animation-delay: 0.9s; }
}

/* ---- шаги: подпись роли над заголовком ---- */
.facts .lbl { display: block; margin-bottom: 0.75rem; }

/* ---- маркированные пункты: тире виридиан ---- */
.pts { display: grid; gap: 0.75rem; }
.pts li { position: relative; padding-left: 1.375rem; color: var(--ink-2); font-size: 0.96875rem; line-height: 1.5; text-wrap: pretty; }
.pts li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.625rem; height: 1px; background: var(--brand); }

/* ---- кто что видит: три колонки ---- */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.25rem; }
.roles > article { padding-top: 1.25rem; border-top: 2px solid var(--brand); min-width: 0; }
.roles .lbl { display: block; margin-bottom: 0.75rem; }
.roles h3 { margin-bottom: 1rem; font: 500 1.75rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.sec-line { max-width: 52rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 64rem) { .roles { grid-template-columns: 1fr; } .roles > article { max-width: 44rem; } }

/* ---- запись: шаги согласия и метки на экране звонка ---- */
.rec { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.rec > * { min-width: 0; }
.rec .steps { margin-top: 0; }
.rec .steps li:last-child { border-bottom: 1px solid var(--line-2); }
.states { padding: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--sheet); box-shadow: var(--sh-1); }
.states ul { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.states li { display: grid; gap: 0.625rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.states li:first-child { padding-top: 0; border-top: 0; }
.states p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.rec-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line-2); }
.rec-rules li { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.rec-rules b { display: block; margin-bottom: 0.125rem; color: var(--ink); font-weight: 500; }
@media (max-width: 64rem) { .rec { grid-template-columns: 1fr; } .states { max-width: 40rem; } }
@media (max-width: 40rem) { .rec-rules { grid-template-columns: 1fr; } }

/* ---- связка Pro — Video — Live: схема на одном сервере ---- */
.chain { --wire: color-mix(in srgb, var(--brand) 70%, var(--line-2)); position: relative; margin-bottom: clamp(2.5rem, 5vw, 4rem); padding: 2.5rem 1.25rem 1.75rem; border: 1.5px dashed var(--frame); border-radius: var(--r-l); }
.chain__tag { position: absolute; top: -0.8rem; left: 1.25rem; padding: 0.25rem 0.625rem; border: 1.5px solid var(--brand); border-radius: var(--r-s); background: var(--paper); color: var(--brand-ink); font: 600 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.chain__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr); align-items: stretch; }
.nd { position: relative; display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; padding: 0.875rem 1rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); color: var(--ink); box-shadow: 0 1px 0 var(--line); transition: transform var(--t-base) var(--ease-out), border-color var(--t-fast) ease, box-shadow var(--t-base) ease; }
a.nd:active { transform: scale(0.98); }
.nd-name { font: 500 1.75rem/1.1 var(--f-display); letter-spacing: -0.01em; }
.nd-role { flex: 1; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.4; }
.nd-domain { color: var(--ink-3); font: 400 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.02em; }
.nd--here { border-color: var(--brand); background: var(--wash); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
@media (hover: hover) and (pointer: fine) { a.nd:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--sh-1); } }
.chain__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem; min-width: 0; padding-inline: 0.625rem; color: var(--ink-3); font: 500 0.6875rem/1.35 var(--f-mono); letter-spacing: 0.01em; text-align: center; }
.wire { position: relative; display: block; align-self: stretch; height: 2px; margin-inline: 0.25rem; background: repeating-linear-gradient(to right, var(--wire) 0 6px, transparent 6px 10px); background-size: 10px 2px; }
.wire::after { content: ""; position: absolute; right: -2px; top: 50%; margin-top: -0.3125rem; border: 0.3125rem solid transparent; border-left: 0.5rem solid var(--wire); border-right: 0; }
.chain__back { position: relative; display: flex; justify-content: center; height: 3.25rem; margin: 0 10.87%; border: 2px dashed var(--wire); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.chain__back::before { content: ""; position: absolute; left: -0.4375rem; top: -0.375rem; border: 0.4375rem solid transparent; border-top: 0; border-bottom: 0.625rem solid var(--wire); }
.chain__back span { position: absolute; bottom: -0.8rem; padding: 0.3125rem 0.625rem; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--sheet); color: var(--brand-ink); font: 500 0.6875rem/1.2 var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
@keyframes vd-flow { to { background-position-x: 10px; } }
@media (prefers-reduced-motion: no-preference) { .wire { animation: vd-flow 0.9s linear infinite; } .chain__back { padding-bottom: 0; } }
@media (max-width: 56rem) {
  .chain { padding: 2.25rem 1rem 1.5rem; }
  .chain__row { grid-template-columns: 1fr; }
  .chain__link { flex-direction: row-reverse; justify-content: flex-end; gap: 1rem; padding: 0.375rem 0 0.375rem 1.5rem; text-align: left; font-size: 0.75rem; }
  .wire { flex: none; align-self: center; width: 2px; height: 3rem; margin: 0; background: repeating-linear-gradient(to bottom, var(--wire) 0 6px, transparent 6px 10px); background-size: 2px 10px; }
  .wire::after { right: auto; left: 50%; top: auto; bottom: -2px; margin: 0 0 0 -0.3125rem; border: 0.3125rem solid transparent; border-top: 0.5rem solid var(--wire); border-bottom: 0; }
  @keyframes vd-flow { to { background-position-y: 10px; } }
  .chain__back { display: block; height: auto; margin: 1rem 0 0; padding: 0.875rem 1rem; border: 2px dashed var(--wire); border-radius: var(--r); background: var(--sheet); text-align: center; }
  .chain__back::before { display: none; }
  .chain__back span { position: static; padding: 0; border: 0; background: none; }
}

/* ---- Pro и Live: две колонки ---- */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.cols2 > div { min-width: 0; padding-top: 1.25rem; border-top: 2px solid var(--brand); }
.cols2 h3 { margin-bottom: 1rem; font: 500 1.625rem/1.2 var(--f-display); letter-spacing: -0.01em; }
@media (max-width: 60rem) { .cols2 { grid-template-columns: 1fr; } }
.know { max-width: 52rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.25rem 1.5rem 1.5rem; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--r); background: var(--sheet); }
.know h3 { margin-bottom: 0.75rem; color: var(--amber-ink); font: 500 1.375rem/1.2 var(--f-display); letter-spacing: -0.01em; }

/* ---- «где работает»: тёмная «серверная» (.sec--night — в lp.css) ---- */
.where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.where > div { padding-top: 1.25rem; border-top: 1px solid var(--night-brand); }
.where h3 { margin-bottom: 0.875rem; font: 500 1.625rem/1.2 var(--f-display); letter-spacing: -0.01em; }
.where p { margin-bottom: 0.875rem; max-width: 36rem; color: var(--ink-2); font-size: 0.96875rem; line-height: 1.6; text-wrap: pretty; }
.where p b { color: var(--ink); font-weight: 500; }
@media (max-width: 60rem) { .where { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- частые вопросы: details без скриптов ---- */
.faq { max-width: 56rem; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font: 500 1.25rem/1.3 var(--f-display); letter-spacing: -0.005em; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin: 0.375rem 0.25rem 0 0; border-right: 1.5px solid var(--brand-ink); border-bottom: 1.5px solid var(--brand-ink); transform: rotate(45deg); transition: transform var(--t-base) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(0.25rem) rotate(-135deg); }
.faq summary:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--brand-ink); } }
.faq__a { max-width: 46rem; padding: 0 2rem 1.5rem 0; color: var(--ink-2); font-size: 0.96875rem; line-height: 1.6; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .faq__a { animation: lp-up 360ms var(--ease-out) backwards; } }

/* ---- заявка: полоса на всю ширину; слева призыв и кнопка, справа шаги от заявки до установки ---- */
.band { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--paper-2); border-block: 1px solid var(--line); }
.request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.request > * { min-width: 0; }
.request-intro .h2 { margin: 1rem 0; }
.request-cta { margin-top: 2rem; }
.request-hint { max-width: 30rem; margin-top: 1.25rem; color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.vcard { position: relative; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--sheet); box-shadow: var(--sh-1); }
.vcard .steps { margin-top: 0; }
.vcard .steps li:first-child { border-top: 0; }
.steps-note { padding-top: 1rem; border-top: 1px solid var(--line-2); color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.vprod { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-2); }
.vprod__logo { flex: none; width: 5rem; height: 5rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.vprod__logo img { width: 100%; height: 100%; object-fit: cover; }
.vprod__name { font: 500 1.875rem/1.1 var(--f-display); letter-spacing: -0.01em; }
.vprod__tag { margin-top: 0.375rem; color: var(--brand-ink); font: italic 500 1.0625rem/1.3 var(--f-display); text-wrap: balance; }
@media (max-width: 60rem) { .request { grid-template-columns: 1fr; gap: 2.5rem; } }
.vprod > div:last-child { min-width: 0; }
@media (max-width: 26rem) { .vprod { gap: 1rem; } .vprod__logo { width: 4rem; height: 4rem; } .vprod__name { font-size: 1.625rem; } }
@media (max-width: 23rem) { .vprod__name { font-size: 1.375rem; } }

/* ---- экосистема: ссылки только на публичные сайты соседних продуктов ---- */
.eco { padding-block: clamp(2.5rem, 5vw, 4rem); }
.eco .lbl { margin-bottom: 1.25rem; }
.eco ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.eco li + li { border-left: 1px solid var(--line); }
.eco a { display: grid; align-content: start; gap: 0.25rem; height: 100%; padding: 1.125rem 1.25rem 1.25rem; }
.eco li:first-child a { padding-left: 0; }
.eco b { font: 500 1.375rem/1.15 var(--f-display); letter-spacing: -0.01em; transition: color var(--t-fast) ease; }
.eco span { color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; }
.eco i { margin-top: 0.25rem; color: var(--ink-3); font: normal 400 0.6875rem/1.3 var(--f-mono); letter-spacing: 0.02em; }
@media (hover: hover) and (pointer: fine) { .eco a:hover b { color: var(--brand-ink); } }
@media (max-width: 64rem) {
  .eco ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco li { border-bottom: 1px solid var(--line); }
  .eco li + li { border-left: 0; }
  .eco li:nth-child(even) { border-left: 1px solid var(--line); }
  .eco li:first-child a, .eco a { padding-left: 0; }
  .eco li:nth-child(even) a { padding-left: 1.25rem; }
}