/* «Нотабене» — общий стиль сайта.
   Цвета, шрифт, скругления и движение — из токенов «Нотабене» (assets/nb-tokens.css,
   копия design/brand/nb-tokens.css: один источник для приложения и сайта).
   Светлая тема, один акцент, тёплый цвет только на фото.
   Сначала телефон, потом шире. */

/* ── шрифты (лежат на нашем сервере): IBM Plex Sans и Mono — как в приложении ── */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plexsans-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plexsans-latin-400.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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexsans-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexsans-latin-500.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}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plexsans-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plexsans-latin-600.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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plexmono-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plexmono-latin-400.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}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexmono-cyrillic-500.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexmono-latin-500.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{
  --ink:var(--nb-ink);          /* основной текст */
  --sub:#4B5565;                /* второстепенный текст (темнее минимума) */
  --mut:var(--nb-muted);        /* подписи — минимум 4,83 : 1 */
  --line:var(--nb-line);        /* разделители (декоративные) */
  --bg:#FBFCFD;                 /* фон страницы */
  --bg-2:var(--nb-surface-soft);/* фон спокойных разделов */
  --card:var(--nb-surface);
  --accent:var(--nb-accent);    /* единственный акцент */
  --accent-ink:var(--nb-accent-hover);
  --accent-soft:var(--nb-accent-soft);
  --warn:var(--nb-amber);       /* только для значений «выше нормы» в примерах */

  --sans:var(--nb-font);
  --mono:var(--nb-font-mono);

  --r:var(--nb-r-lg);           /* карточки */
  --r-sm:var(--nb-r-md);
  --pill:var(--nb-r-full);      /* кнопки */
  --gutter:20px;
  --max:1200px;

  --ease:var(--nb-ease);
  --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);
  --shadow-lg:0 2px 4px rgba(15,23,42,.05),0 24px 60px rgba(15,23,42,.12);

  --z-nav:50;
}

/* ── основа ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.1;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:12px}

/* иконки (Phosphor, вставляются скриптом по data-ic) */
[data-ic]{display:inline-flex;flex:none}
[data-ic] svg{width:1em;height:1em}

/* ── кнопки ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:12px 22px;border-radius:var(--pill);font-weight:600;font-size:16px;line-height:1.2;
  text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s,border-color .2s}
.btn [data-ic]{font-size:19px}
.btn:active{transform:scale(.98)}
.btn-pri{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(26,79,208,.3),0 6px 18px rgba(26,79,208,.22)}
.btn-pri:hover{background:var(--accent-ink)}
.btn-sec{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-sec:hover{border-color:#cbd5e1}
.btn-sm{min-height:40px;padding:8px 16px;font-size:15px}

/* ── шапка ────────────────────────────────────────────────────────────── */
.nav-sentinel{position:absolute;top:0;height:8px;width:1px}
.nav{position:sticky;top:0;z-index:var(--z-nav);transition:background-color .25s,box-shadow .25s}
.nav.scrolled{background:rgba(251,252,253,.82);box-shadow:0 1px 0 var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}
@media (prefers-reduced-transparency:reduce){.nav.scrolled{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav-in{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap;color:var(--accent)}
.logo-full svg{display:block;height:24px;width:auto}
.logo-ic{width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;flex:none}
.logo-ic svg{width:24px;height:24px}
.nav-links{display:none;gap:28px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--sub);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav .btn{margin-left:auto}
@media (min-width:900px){.nav-links{display:flex}.nav .btn{margin-left:0}}

/* ── разделы ──────────────────────────────────────────────────────────── */
.section{padding-block:72px}
.section.calm{background:var(--bg-2)}
.h2{font-size:clamp(30px,6.4vw,46px);max-width:20ch}
.lede{margin-top:16px;font-size:18px;color:var(--sub);max-width:58ch}
@media (min-width:900px){.section{padding-block:112px}}

/* ── первый экран ─────────────────────────────────────────────────────── */
.hero{padding-top:28px;padding-bottom:56px}
.hero-in{display:grid;gap:36px}
.hero h1{font-size:clamp(38px,10vw,68px);line-height:1.04;letter-spacing:-.035em;font-weight:600}
/* слоган — две фразы, каждая со своей строки: «Система помнит.» / «Врач принимает решения» */
.hero h1 .ln{display:block}
.hero h1 .name{position:relative;white-space:nowrap;
  background-image:linear-gradient(var(--accent-soft),var(--accent-soft));
  background-repeat:no-repeat;background-position:0 88%;background-size:100% 38%}
.hero .sub{margin-top:20px;font-size:18px;line-height:1.55;color:var(--sub);max-width:46ch}
.hero-cta{display:flex;flex-direction:column;gap:12px;margin-top:28px}
@media (min-width:480px){.hero-cta{flex-direction:row;flex-wrap:wrap}}
@media (min-width:1000px){
  .hero{padding-top:48px;padding-bottom:96px}
  .hero-in{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center;gap:56px}
  .hero h1{font-size:clamp(46px,4.4vw,64px)}
}
/* маркер в заголовке прорисовывается при загрузке */
@media (prefers-reduced-motion:no-preference){
  .hero h1 .name{animation:marker .9s .35s var(--ease) both}
  @keyframes marker{from{background-size:0 38%}to{background-size:100% 38%}}
}

/* ── место под медиа до съёмки ────────────────────────────────────────── */
.slot{position:relative;border-radius:var(--r);background:
  repeating-linear-gradient(-45deg,transparent 0 10px,rgba(11,27,51,.035) 10px 11px),var(--bg-2);
  border:1px dashed #cbd5e1;display:grid;place-items:center;text-align:center;
  padding:24px;color:var(--mut);font-size:14px;line-height:1.45}
.slot b{display:block;color:var(--sub);font-size:15px;margin-bottom:4px}
.slot-scene{aspect-ratio:4/5}
@media (min-width:1000px){.slot-scene{aspect-ratio:3/2}}
.slot-wide{aspect-ratio:16/10}
.slot-phone{aspect-ratio:9/19;max-width:300px;margin-inline:auto;border-radius:40px}

/* ── каркас разделов (заполняется в задачах 4–6) ──────────────────────── */
.stack{display:grid;gap:24px;margin-top:40px}

/* ── подвал ───────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding-block:40px 48px;font-size:14px;color:var(--mut)}
.footer-in{display:grid;gap:28px}
.footer .logo{font-size:16px;color:var(--ink)}
.footer .logo-ic{width:30px;height:30px;border-radius:9px}
.footer .logo-ic svg{width:21px;height:21px}
.f-notes{display:grid;gap:6px;max-width:62ch}
.f-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.f-links a{color:var(--sub);text-decoration:none;min-height:24px}
.f-links a:hover{color:var(--ink);text-decoration:underline}
@media (min-width:900px){.footer-in{grid-template-columns:auto 1fr auto;align-items:start;gap:40px}}

/* ── юридические страницы ─────────────────────────────────────────────── */
.doc{max-width:72ch;padding-block:40px 80px}
.doc h1{font-size:clamp(32px,7vw,44px)}
.doc h2{font-size:22px;margin:40px 0 12px;letter-spacing:-.015em}
.doc p,.doc li{color:var(--sub);margin-top:10px}
.doc ul{padding-left:22px}
.draft{margin-top:20px;padding:14px 18px;border-radius:var(--r-sm);background:#fff7ed;
  border:1px solid #fed7aa;color:#9a3412;font-size:15px}

/* ── появление разделов ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}

/* ══ СЦЕНА «БУМАГА → КАРТА» ══════════════════════════════════════════════
   Конечные состояния задаёт CSS по data-state (idle / scanning / review /
   confirming / done). Анимации переходов запускает assets/scene.js.

   После съёмки настоящего фото пересчитать только положение листа:
   --pl/--pt/--pw/--ph (в % сцены) и --prot. Строки ПСА и креатинина заданы
   в % самого листа и от фото не зависят. */
.scene{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;isolation:isolate;
  container-type:inline-size;background:#ddd6cb;box-shadow:var(--shadow-lg);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  --pl:5%;--pt:3.5%;--pw:64%;--ph:72.41%;--prot:-3deg;
  --phone-r:4.5%;--phone-b:4%;--phone-w:44%;--phone-pad:1.3cqw;--phone-rad:7cqw}
@media (min-width:1000px){
  .scene{aspect-ratio:3/2;
    --pl:7%;--pt:6%;--pw:38%;--ph:80.61%;--prot:-2.5deg;
    --phone-r:10%;--phone-b:6%;--phone-w:25%;--phone-pad:.75cqw;--phone-rad:4cqw}
}
.scene-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* вспышка затвора */
.scene-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3}

/* лист: рамка, линия сканирования, подсветка строк */
.paper{position:absolute;left:var(--pl);top:var(--pt);width:var(--pw);height:var(--ph);
  transform:rotate(var(--prot));pointer-events:none}
.corner{position:absolute;width:9%;aspect-ratio:1;border:0 solid var(--accent);opacity:0}
.c1{left:-2%;top:-1.4%;border-width:3px 0 0 3px;border-top-left-radius:6px}
.c2{right:-2%;top:-1.4%;border-width:3px 3px 0 0;border-top-right-radius:6px}
.c3{left:-2%;bottom:-1.4%;border-width:0 0 3px 3px;border-bottom-left-radius:6px}
.c4{right:-2%;bottom:-1.4%;border-width:0 3px 3px 0;border-bottom-right-radius:6px}
.scan{position:absolute;inset:0;opacity:0}
.scan::before{content:"";position:absolute;left:-1%;right:-1%;top:0;height:2px;background:var(--accent);
  box-shadow:0 0 0 1px rgba(26,79,208,.15),0 6px 18px 4px rgba(26,79,208,.28)}
.hl{position:absolute;left:8.1%;width:83.81%;border-radius:3px;background:rgba(26,79,208,.2);
  mix-blend-mode:multiply;transform:scaleX(0);transform-origin:left center}
.hl-psa{top:34.18%;height:6.96%}
.hl-creat{top:45.46%;height:5.35%}
.scene[data-state=review] .hl,.scene[data-state=confirming] .hl,.scene[data-state=done] .hl{transform:none}

/* телефон и экраны (настоящие скриншоты после съёмки) */
.phone{position:absolute;right:var(--phone-r);bottom:var(--phone-b);width:var(--phone-w);z-index:2;
  padding:var(--phone-pad);border-radius:var(--phone-rad);background:#0f172a;
  box-shadow:0 2px 4px rgba(15,23,42,.3),0 24px 50px rgba(40,30,20,.35)}
.screen{position:relative;aspect-ratio:390/844;border-radius:calc(var(--phone-rad) - var(--phone-pad));overflow:hidden;background:#f3f6fa}
.s{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s}
.s-empty{opacity:1}
.scene[data-state=review] .s-review,.scene[data-state=confirming] .s-review{opacity:1}
.scene[data-state=done] .s-filled{opacity:1}
/* шторка над графиком: открывается слева направо и «рисует» график.
   Координаты — область графика на скриншоте заполненной карты, в % экрана. */
.chart-cover{position:absolute;left:12.5%;top:48.1%;width:75%;height:9.8%;background:#fff;
  transform-origin:right center;opacity:0}
.scene[data-state=done] .chart-cover{opacity:0}

/* кнопки сцены: одно место для каждого действия — «Снять бланк», «Подтвердить», «Ещё раз» */
.scene-btn{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 16px;border-radius:var(--pill);font-weight:600;font-size:15px;white-space:nowrap;
  transition:opacity .25s,transform .25s var(--ease)}
.scene-btn [data-ic]{font-size:18px}
.scene-shoot{left:5%;bottom:5%;background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(26,79,208,.35)}
.scene-replay{left:5%;bottom:5%;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--shadow)}
.scene-confirm{left:5%;bottom:5%;background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(26,79,208,.35)}
.scene-btn:active{transform:scale(.97)}
.scene-shoot,.scene-confirm,.scene-replay{opacity:0;pointer-events:none;visibility:hidden}
.scene[data-state=idle] .scene-shoot,
.scene[data-state=review] .scene-confirm,
.scene[data-state=done] .scene-replay{opacity:1;pointer-events:auto;visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .scene[data-state=idle] .scene-shoot::after,.scene[data-state=review] .scene-confirm::after{content:"";position:absolute;inset:-4px;border-radius:inherit;
    border:2px solid var(--accent);animation:ring 2.2s var(--ease) infinite}
  @keyframes ring{0%{opacity:.7;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.18)}}
}

/* летящие значения */
.chip{position:absolute;left:0;top:0;z-index:5;padding:6px 11px;border-radius:var(--pill);background:#fff;
  border:1.5px solid var(--accent);color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 20px rgba(11,27,51,.18);opacity:0;pointer-events:none;will-change:transform,opacity}
@media (min-width:1000px){.chip{font-size:14px}}

/* ══ РАЗДЕЛЫ ГЛАВНОЙ ═════════════════════════════════════════════════════ */

/* ── проблема: счётчик стента и потери ────────────────────────────────── */
.problem{display:grid;gap:20px;margin-top:40px}
.stent{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.stent-head{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:15px;font-weight:500}
.stent-head [data-ic]{font-size:20px;color:var(--accent)}
.stent-num{margin-top:10px;font-size:clamp(64px,19vw,96px);font-weight:600;line-height:1;letter-spacing:-.04em}
.stent-unit{font-family:var(--sans);font-size:.3em;font-weight:600;letter-spacing:0;color:var(--sub);margin-left:4px}
.stent-days{display:grid;grid-template-columns:repeat(46,1fr);gap:2px;margin-top:18px}
.stent-days i{height:18px;border-radius:2px;background:var(--line)}
.stent-days i.on{background:var(--accent)}
.stent-days i.on:nth-child(n+41){background:var(--warn)}
.stent-days i:nth-child(n+42):not(.on){background:#fde3c3}
.stent-flag{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 14px;border-radius:var(--pill);
  background:#fff7ed;color:var(--warn);font-weight:600;font-size:15px;transition:opacity .4s,transform .4s var(--ease)}
.stent-flag [data-ic]{font-size:18px}
.stent:not(.reached) .stent-flag{opacity:0;transform:translateY(6px)}
.stent-note{margin-top:14px;color:var(--sub);font-size:15px}
.losses{list-style:none;display:grid;gap:0;align-content:start}
.losses li{padding:16px 0 16px 28px;position:relative;font-size:17px;border-bottom:1px solid var(--line)}
.losses li:last-child{border-bottom:0}
.losses li::before{content:"";position:absolute;left:4px;top:26px;width:10px;height:2px;background:var(--warn);border-radius:2px}
@media (min-width:900px){.problem{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}}

.origin{display:grid;gap:20px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.origin p{color:var(--sub);max-width:58ch}
/* ── «пять инструментов сходятся в один» (эскиз утверждён Mickl 19.10) ──
   Круг ~11,5 с, повторяется, пока блок на экране: пять значков → сходятся →
   из середины общей ноги N и B растёт прямая линия вверх и вниз → из неё
   сразу N влево и B вправо → знак стоит 5 с → буквы уходят в линию, линия
   гаснет к середине → значки разлетаются. Классы ставит sections.js. */
.nb-merge-wrap { display: flex; justify-content: center; padding: 24px 0 }

.nb-merge { position: relative; width: 292px; height: 112px }  /* совпадает с тем, что ставит скрипт */

.nb-merge__tool {
  position: absolute; top: 34px;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid var(--nb-accent-soft, #DCE4F7);
  background: var(--nb-surface, #fff);
  color: var(--nb-accent, #1A4FD0);
  display: flex; align-items: center; justify-content: center;
  /* крайние трогаются первыми, центральный последним (--d ставит скрипт) */
  transition: transform 1.4s cubic-bezier(.5, 0, .25, 1) var(--d, 0s),
              opacity   .5s  ease calc(var(--d, 0s) + .9s);
}
.nb-merge__tool svg { width: 22px; height: 22px }
.nb-merge.merge .nb-merge__tool { transform: translateX(var(--dx)) scale(.3); opacity: 0 }
/* обратный ход: значки проявляются в центре и разлетаются по местам */
.nb-merge.split .nb-merge__tool {
  transition: transform 1.2s cubic-bezier(.3, 0, .2, 1) var(--d, 0s), opacity .35s ease var(--d, 0s);
}

.nb-merge__mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--nb-accent, #1A4FD0);
}
.nb-merge__mark svg { width: 84px; height: 66px; display: block; overflow: visible }
/* Знак проявляется масками: .stem — общая нога (прямая линия, растёт из
   середины), .pen — «перо» по N влево и по чашам B вправо. */
.nb-merge__mark .stem { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0);
  transition: transform .4s cubic-bezier(.5, 0, .75, 0) .4s }
.nb-merge__mark .pen { fill: none; stroke: #fff; stroke-width: 30; stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1;
  transition: stroke-dashoffset .55s cubic-bezier(.5, 0, .75, 0) 0s }
.nb-merge.draw .nb-merge__mark .stem { transform: scaleY(1); transition: transform .6s cubic-bezier(.3, 0, .3, 1) 0s }
.nb-merge.draw .nb-merge__mark .pen  { stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s cubic-bezier(.3, .5, .35, 1) .24s }

/* Движение выключено: блок не схлопывается, а стоит рядом со стрелкой —
   содержание «пять стали одним» должно читаться и без анимации. */
.nb-merge__arrow {
  position: absolute; top: 46px; display: none;
  color: var(--nb-muted, #6B7280);
}
.nb-merge__arrow svg { width: 20px; height: 20px; display: block }

.nb-merge.is-static .nb-merge__tool { transform: none; opacity: 1; transition: none }
.nb-merge.is-static .nb-merge__arrow { display: block }
.nb-merge.is-static .nb-merge__mark {
  left: auto; top: 34px; transform: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--nb-accent, #1A4FD0); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.nb-merge.is-static .nb-merge__mark svg { width: 30px; height: 24px }
.nb-merge.is-static .nb-merge__mark .stem { transform: none; transition: none }
.nb-merge.is-static .nb-merge__mark .pen  { stroke-dashoffset: 0; transition: none }

@media (prefers-reduced-motion: reduce) {
  .nb-merge__tool, .nb-merge__mark .stem, .nb-merge__mark .pen { transition: none }
}

@media (max-width: 560px) {
  .nb-merge { width: 236px; height: 96px }
  .nb-merge__tool { width: 36px; height: 36px; top: 30px; border-radius: 10px }
  .nb-merge__tool svg { width: 18px; height: 18px }
  .nb-merge__mark svg { width: 66px; height: 52px }
}

/* ── память о пациенте: заключение КТ ─────────────────────────────────── */
.memory{display:grid;gap:20px;margin-top:40px}
@media (min-width:1000px){.memory{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}}
.ct{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.ct-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.ct-head [data-ic]{font-size:20px;color:var(--accent)}
.ct-fict{margin-left:auto;font-weight:400;color:var(--mut);font-size:13px}
.ct-text{margin-top:14px;font-size:16px;line-height:1.7;color:var(--sub)}
.ct-text mark{background:transparent;color:inherit;border-radius:4px;padding:1px 2px;
  transition:background-color .35s,color .35s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ct-text mark.on{background:var(--accent-soft);color:var(--ink)}
.ct-finds{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.find{min-height:44px;padding:8px 14px;border-radius:var(--pill);border:1px solid var(--line);background:var(--bg);
  font-size:15px;font-weight:600;transition:background-color .2s,border-color .2s,color .2s}
.find:hover{border-color:#cbd5e1}
.find[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.ct-hint{margin-top:12px;font-size:14px;color:var(--mut)}

/* ── клинические рекомендации ─────────────────────────────────────────── */
.kr-wrap{display:grid;gap:28px;margin-top:40px}
@media (min-width:1000px){.kr-wrap{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}}
.kr{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.kr-meta{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:14px;font-weight:500}
.kr-meta [data-ic]{font-size:20px;color:var(--accent)}
.kr-thesis{margin-top:16px;padding-left:16px;border-left:3px solid var(--accent);font-size:17px;line-height:1.65}
.kr-pending{color:var(--mut);font-style:italic}
.kr-levels{display:flex;gap:8px;margin-top:18px}
.lvl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent-ink);font-weight:600;font-size:15px}
.lvl b{display:grid;place-items:center;min-width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;font-size:14px}
.lvl[aria-expanded=true]{background:var(--accent);color:#fff}
.lvl[aria-expanded=true] b{background:#fff;color:var(--accent)}
.kr-scale{margin-top:14px;padding:16px;border-radius:var(--r-sm);background:var(--bg-2);font-size:15px}
.kr-scale-t{font-weight:600;margin-bottom:6px}
.kr-facts{list-style:none;display:grid;gap:22px}
.kr-facts b{display:block;font-size:28px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.kr-facts li{color:var(--sub);font-size:16px}

/* ── сравнение ────────────────────────────────────────────────────────── */
.cmp{margin-top:36px}
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--pill);
  background:var(--bg-2);border:1px solid var(--line);isolation:isolate}
.seg button{position:relative;z-index:1;min-height:44px;padding:8px 18px;border-radius:var(--pill);font-weight:600;font-size:15px;
  color:var(--sub);transition:color .25s;white-space:nowrap}
.seg button[aria-pressed=true]{color:#fff}
.seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--pill);
  background:var(--ink);transition:transform .35s var(--ease),background-color .35s}
.cmp[data-side=sm] .seg-thumb{transform:translateX(100%);background:var(--accent)}
.cmp-list{list-style:none;counter-reset:c;margin-top:24px;display:grid;gap:10px}
.cmp-list li{display:grid;background:var(--card);border-radius:var(--r-sm);padding:16px 18px;box-shadow:0 1px 2px rgba(11,27,51,.05);
  font-size:17px;min-height:64px;align-items:center}
.cmp-list li>span{grid-area:1/1;transition:opacity .3s,transform .35s var(--ease)}
.cmp[data-side=typ] .c-sm,.cmp[data-side=sm] .c-typ{opacity:0;transform:translateY(6px);visibility:hidden}
.cmp[data-side=typ] .c-typ{color:var(--sub)}
.cmp[data-side=sm] .c-sm{color:var(--ink)}
.cmp-list{max-width:780px}
@media (max-width:420px){.seg button{padding:8px 12px;font-size:14px}}

/* ── безопасность ─────────────────────────────────────────────────────── */
.sec-groups{display:grid;gap:20px;margin-top:40px}
@media (min-width:1000px){.sec-groups{grid-template-columns:repeat(3,1fr);gap:24px}}
.sec-group{background:var(--card);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.sec-group h3{font-size:14px;font-weight:600;color:var(--accent-ink);letter-spacing:0}
.sec-group ul{list-style:none;display:grid;gap:20px;margin-top:16px}
.sec-group li{display:grid;grid-template-columns:auto 1fr;gap:14px}
.sec-ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:21px}
.sec-group h4{font-size:17px;line-height:1.3}
.sec-group p{margin-top:4px;color:var(--sub);font-size:15px;line-height:1.55}

/* ── как начать ───────────────────────────────────────────────────────── */
.start{display:grid;gap:28px;margin-top:40px}
@media (min-width:1000px){.start{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}}
.steps{list-style:none;counter-reset:st;display:grid;gap:0}
.steps li{position:relative;counter-increment:st;padding:0 0 32px 56px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:600;font-family:var(--mono);font-size:15px}
.steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:6px;width:2px;background:var(--line)}
.steps h3{font-size:21px;letter-spacing:-.015em}
.steps p{margin-top:6px;color:var(--sub);max-width:52ch}
.steps .btn{margin-top:16px}
.price{background:var(--bg-2);border-radius:var(--r);padding:24px}
.price-t{font-size:14px;font-weight:600;color:var(--accent-ink)}
.price-main{margin-top:8px;font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.price p:last-child{margin-top:8px;color:var(--sub)}

/* ── вопросы ──────────────────────────────────────────────────────────── */
.faq{margin-top:32px;max-width:820px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:4px 20px}
.qa{border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;
  font-weight:600;font-size:17px;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa-ic{font-size:20px;color:var(--accent);transition:transform .3s var(--ease)}
.qa[open] .qa-ic{transform:rotate(45deg)}
.qa p{padding:0 32px 18px 0;color:var(--sub)}
.memory .slot{aspect-ratio:auto;min-height:320px}
.h2-wide{max-width:24ch}

/* ══ СТРАНИЦА ДЛЯ ИНВЕСТОРОВ ═════════════════════════════════════════════ */

/* стадия: что уже работает — вкладки как в карте пациента, функции нажимаются */
.wk{margin-top:40px}
.w-tabs-wrap{overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.w-tabs-wrap::-webkit-scrollbar{display:none}
.w-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:#e8edf4;white-space:nowrap}
.w-tabs [role=tab]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:10px;
  font-size:15px;font-weight:500;color:var(--sub);transition:background-color .2s,color .2s,box-shadow .2s}
.w-tabs [role=tab]:hover{color:var(--ink)}
.w-tabs [role=tab][aria-selected=true]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(11,27,51,.1)}
.w-n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--mut);background:rgba(11,27,51,.06);border-radius:6px;padding:1px 6px}
.w-tabs [aria-selected=true] .w-n{background:var(--accent-soft);color:var(--accent-ink)}
.w-body{display:grid;gap:16px;margin-top:16px}
@media (min-width:1000px){.w-body{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:stretch}}
.w-panel{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);height:100%}
.w-item{min-height:44px;padding:8px 14px;border-radius:var(--pill);background:var(--bg-2);font-size:15px;font-weight:500;color:var(--ink);
  text-align:left;transition:background-color .2s,color .2s}
.w-item:hover{background:#e3e9f2}
.w-item[aria-pressed=true]{background:var(--accent);color:#fff}
.w-detail{position:relative;background:var(--ink);color:#e8eefb;border-radius:var(--r);padding:24px;min-height:220px;display:flex;flex-direction:column}
.w-d-group{font-size:13px;font-weight:600;color:#93b4f8}
.w-detail h3{margin-top:6px;font-size:clamp(22px,4vw,28px);color:#fff;letter-spacing:-.02em}
.w-d-text{margin-top:10px;color:#c3d0e8;font-size:16px;line-height:1.6;max-width:52ch}
.w-ok{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px;font-size:14px;color:#93b4f8}
.w-ok [data-ic]{font-size:18px}
@media (prefers-reduced-motion:no-preference){
  .w-detail.swap h3,.w-detail.swap .w-d-text{animation:wswap .35s var(--ease)}
  @keyframes wswap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
.works-note{display:flex;align-items:center;gap:10px;margin-top:22px;color:var(--sub)}
.works-note [data-ic]{font-size:20px;color:var(--accent)}
.works-note a{color:var(--accent-ink);font-weight:600}

/* отличие: сравнение + экран блокировки */
.edge{display:grid;gap:32px;margin-top:4px}
.edge .slot-phone{max-width:260px}
@media (min-width:1000px){.edge{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}.edge .slot-phone{margin-top:36px}}

/* модель: путь врача */
.flow{list-style:none;display:grid;gap:12px;margin-top:40px}
.flow li{position:relative;background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.flow-ic{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px}
.flow-t{display:block;margin-top:14px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.flow h3{margin-top:4px;font-size:20px}
.flow p{margin-top:6px;color:var(--sub);font-size:15px}
.flow-next .flow-ic{background:var(--accent-soft);color:var(--accent)}
.flow-later{background:transparent;box-shadow:none;border:1.5px dashed #cbd5e1}
.flow-later .flow-ic{background:var(--bg-2);color:var(--mut)}
.flow-next .flow-t,.flow-later .flow-t{color:var(--mut)}
@media (min-width:1000px){
  .flow{grid-template-columns:repeat(4,1fr);gap:28px}
  .flow li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:43px;width:16px;height:2px;background:#cbd5e1}
}

/* удержание: история одного пациента */
.ret{display:grid;gap:32px;margin-top:40px}
@media (min-width:1000px){.ret{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}}
.timeline{list-style:none;position:relative;display:grid;gap:0}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 22px 36px}
.timeline li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--card);border:3px solid var(--accent)}
.timeline li:last-child::before{background:var(--warn);border-color:var(--warn)}
.tl-d{font-size:14px;color:var(--mut);font-weight:600}
.timeline p{margin-top:2px;font-size:17px}
.ret-side{background:var(--bg-2);border-radius:var(--r);padding:24px}
.ret-big{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.ret-side p+p{margin-top:12px;color:var(--sub)}
.ret-side .ret-fict{font-size:14px;color:var(--mut)}

/* регуляторика: граница */
.bound{display:grid;margin-top:40px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.bound-side{padding:24px}
.bound-side h3{display:flex;align-items:center;gap:10px;font-size:20px}
.bound-side h3 [data-ic]{width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}
.bound-side h3 [data-ic] svg{width:20px;height:20px}
.bound-doc h3 [data-ic]{background:var(--ink)}
.bound-side ul{list-style:none;display:grid;gap:10px;margin-top:16px}
.bound-side li{padding-left:18px;position:relative;color:var(--sub)}
.bound-side li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--accent)}
.bound-doc li::before{background:var(--ink)}
.bound-doc{background:var(--bg-2)}
.bound-line{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px)}
.bound-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 12px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-size:13px;font-weight:600}
@media (min-width:800px){
  .bound{grid-template-columns:1fr 2px 1fr}
  .bound-side{padding:32px}
  .bound-line{height:auto;width:2px;background:repeating-linear-gradient(180deg,var(--ink) 0 8px,transparent 8px 14px)}
  .bound-line span{white-space:nowrap}
}
.reg-facts{list-style:none;display:grid;gap:12px;margin-top:24px}
@media (min-width:800px){.reg-facts{grid-template-columns:repeat(3,1fr)}}
.reg-facts li{display:flex;align-items:center;gap:12px;font-weight:500}
.reg-facts [data-ic]{width:40px;height:40px;flex:none;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:21px}

/* куда растём */
.road{list-style:none;display:grid;gap:0;margin-top:40px;position:relative}
.road li{position:relative;padding:0 0 28px 36px}
.road li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;border:3px solid #cbd5e1;background:var(--bg)}
.road li:not(:last-child)::after{content:"";position:absolute;left:7px;top:24px;bottom:2px;width:2px;background:var(--line)}
.road-now::before{border-color:var(--accent)!important;background:var(--accent)!important}
.road-t{font-size:13px;font-weight:600;color:var(--mut)}
.road-now .road-t{color:var(--accent-ink)}
.road h3{margin-top:2px;font-size:22px}
.road p{margin-top:6px;color:var(--sub);max-width:46ch}
@media (min-width:1000px){
  .road{grid-template-columns:repeat(3,1fr);gap:32px}
  .road li{padding:36px 0 0}
  .road li::before{top:0}
  .road li:not(:last-child)::after{left:24px;right:-24px;top:7px;bottom:auto;width:auto;height:2px}
}
.road-note{margin-top:8px;font-size:14px;color:var(--mut)}

/* подписи пустых рамок до съёмки: номер скрина и что на нём */
.slot>div{max-width:34ch}
.slot ul{list-style:none;display:grid;gap:10px;margin-top:10px;text-align:left}
.slot li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;color:var(--sub)}
.slot .code{font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;background:var(--accent);border-radius:6px;padding:2px 7px}
.slot-phone{aspect-ratio:auto;min-height:420px}
.temp-note{grid-column:1/-1;font-size:14px;color:var(--mut);margin-top:-20px}
@media (min-width:1000px){.temp-note{grid-column:2;margin-top:-40px}}
.slot-wide{aspect-ratio:auto;min-height:280px;max-width:100%}

/* собственный ИИ: параллельная дорожка под этапами роста */
.ai-track{margin-top:36px;padding:24px;border-radius:var(--r);background:var(--ink);color:#e8eefb}
.ai-head{display:flex;align-items:center;gap:14px}
.ai-ic{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:26px;flex:none;
  box-shadow:0 0 0 6px rgba(26,79,208,.18),0 8px 22px rgba(26,79,208,.35)}
.ai-t{font-size:13px;font-weight:600;color:#93b4f8}
.ai-track h3{font-size:24px;color:#fff;margin-top:2px}
.ai-lede{margin-top:16px;color:#c3d0e8;max-width:62ch}
.ai-steps{list-style:none;counter-reset:ai;display:grid;gap:12px;margin-top:22px}
.ai-steps li{counter-increment:ai;position:relative;padding:18px 18px 18px 56px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ai-steps li::before{content:counter(ai);position:absolute;left:18px;top:17px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;font-family:var(--mono);font-weight:600;font-size:13px}
.ai-steps h4{font-size:17px;color:#fff}
.ai-steps p{margin-top:4px;font-size:15px;color:#c3d0e8;line-height:1.55}
.ai-why{list-style:none;display:grid;gap:12px;margin-top:22px}
.ai-why li{display:flex;align-items:center;gap:12px;color:#e8eefb;font-size:15px}
.ai-why [data-ic]{width:36px;height:36px;flex:none;border-radius:10px;background:rgba(255,255,255,.1);color:#93b4f8;display:grid;place-items:center;font-size:19px}
@media (min-width:1000px){
  .ai-track{padding:36px}
  .ai-steps{grid-template-columns:repeat(3,1fr);gap:16px}
  .ai-why{grid-template-columns:repeat(3,1fr);gap:20px}
}
.w-panel[hidden]{display:none}

/* ══ НАСТОЯЩИЕ СКРИНШОТЫ ═════════════════════════════════════════════════ */
.shot{margin:0;min-width:0}
.shot-frame{max-width:280px;padding:6px;border-radius:30px;background:#0f172a;
  box-shadow:0 2px 4px rgba(15,23,42,.18),0 22px 50px rgba(15,23,42,.18)}
.shot-frame img{width:100%;height:auto;border-radius:24px;background:#fff}
.shot figcaption{margin-top:12px;font-size:15px;color:var(--sub);max-width:30ch}

/* система поднимает руку */
.attn{display:grid;gap:28px;margin-top:40px;justify-items:center}
.attn-side{display:grid;gap:20px;width:100%;max-width:520px}
.attn-pop{margin:0}
.attn-pop img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-lg)}
.attn-pop figcaption{margin-top:12px;font-size:15px;color:var(--sub)}
@media (min-width:900px){.attn{grid-template-columns:auto 1fr;gap:56px;align-items:center;justify-items:start}}

/* память о пациенте: карусель экранов */
.shot-slot{min-height:420px;border-radius:30px}
.memory{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.memory{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:start}}

/* КР с настоящим тезисом */
.kr-wrap{grid-template-columns:minmax(0,1fr)}
.kr-main{display:grid;gap:28px;min-width:0}
.kr-meta span:last-child{min-width:0}
.kr-sec{margin-top:14px;font-weight:600}
.kr-strength{margin-top:8px;font-size:14px;font-weight:600;color:var(--accent-ink)}
.kr-thesis{margin-top:8px}
.kr-scale p+p{margin-top:6px}
.kr-src{margin-top:16px;font-size:13px;color:var(--mut)}
.kr-facts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kr-wrap>.shot{justify-self:center}
@media (min-width:1000px){.kr-wrap{grid-template-columns:minmax(0,1fr) 280px;align-items:start}}
.kr-scale-sub{font-size:13px;color:var(--mut)}
.shot-card{align-self:center}
.shot-card img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-lg);background:#fff}
.shot-card figcaption{margin-top:12px;font-size:15px;color:var(--sub)}

/* как это работает: видео в рамке телефона и шаги */
.how{display:grid;gap:32px;margin-top:40px;justify-items:center}
.how-video .shot-frame{max-width:300px}
.how-video video{display:block;width:100%;height:auto;border-radius:24px;background:#f3f6fa}
.how-steps{width:100%;max-width:560px}
@media (min-width:900px){.how{grid-template-columns:auto 1fr;gap:64px;align-items:center;justify-items:start}}
.attn-shots{width:100%}
.attn-side{max-width:640px;min-width:0}
.attn-pop{max-width:460px}
.edge>.shot{justify-self:center}@media (min-width:1000px){.edge>.shot{margin-top:36px}}
/* пока снимок не переснят и скрыт — список на всю ширину */
@media (min-width:1000px){.edge:has(>.shot[hidden]){grid-template-columns:minmax(0,1fr)}.edge:has(>.shot[hidden]) .cmp{max-width:760px}}

/* ленты скриншотов: листаются по целым экранам, ничего не обрезается на краю */
.carousel{min-width:0;width:100%}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding:10px 0 40px;scrollbar-width:none;min-width:0}
.shots::-webkit-scrollbar{display:none}
.shots>*{scroll-snap-align:start;justify-self:center;width:100%;max-width:260px}
.shots>.shot-card{max-width:320px;align-self:center}
.shots .shot-frame{max-width:none}
@media (min-width:560px){.shots{grid-auto-columns:calc((100% - 20px) / 2)}}
.shots-nav{display:flex;gap:10px;justify-content:center;margin-top:-16px}
.shots-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:grid;place-items:center;font-size:18px;box-shadow:var(--shadow);transition:opacity .2s,border-color .2s}
.shots-nav button:hover{border-color:#cbd5e1}
.shots-nav button:disabled{opacity:.35;cursor:default}
.sn-prev [data-ic]{transform:rotate(180deg)}
/* тень рамок не должна упираться в край ленты */
.shots{padding:12px 28px 44px;scroll-padding-inline:28px}
.shots .shot-frame{box-shadow:0 2px 4px rgba(15,23,42,.14),0 12px 26px rgba(15,23,42,.13)}
.shots>.shot-card img{box-shadow:0 2px 4px rgba(15,23,42,.1),0 12px 26px rgba(15,23,42,.12)}
/* промежуток не меньше двух боковых отступов: соседний экран не выглядывает с краю */
.shots{gap:56px}
@media (min-width:560px){.shots{grid-auto-columns:calc((100% - 56px) / 2)}}
/* стрелки и точки: видно, что лента листается, и где вы сейчас */
.shots-nav{align-items:center}
.sn-dots{display:flex;gap:6px;padding-inline:6px}
.sn-dot{width:8px;height:8px;border-radius:999px;background:#cbd5e1;padding:0;transition:width .25s var(--ease),background-color .25s;position:relative}
.sn-dot::after{content:"";position:absolute;inset:-12px -4px}
.sn-dot[aria-current=true]{width:22px;background:var(--accent)}
.carousel.single .shots-nav{display:none}
.shots-nav button.sn-prev,.shots-nav button.sn-next{width:44px;height:44px}
.shots-nav .sn-dot{width:8px;height:8px;border:0;border-radius:999px;box-shadow:none;background:#cbd5e1;display:block}
.shots-nav .sn-dot[aria-current=true]{width:22px;background:var(--accent)}