/* Slimmer.pro — canon world: drenched royal blue, rounded display type, line-art, pill controls.
   Craft bar: impilo.health. Seed key ea98dcc8. */

@font-face {
  font-family: 'Onest Variable';
  src: local('Onest'), url('../fonts/Onest-Variable.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root{
  --royal:#4F59C9; --royal-deep:#203C94; --night:#2B2A3C;
  --sky:#97D9FE; --cloud:#E9EAF8; --lime:#C4E21A; --lime-deep:#9DB515;
  --paper:#FFFFFF; --mist:#EFF3F6;
  --ink-1000:#2B2A3C; --ink-900:#2B2A3C; --ink-700:#3C3B50; --ink-500:#667085; --ink-400:#667085;
  --ink-200:#C3CCDB; --ink-100:#E2E8F0;
  --on-blue:#FFFFFF; --on-blue-soft:#E6E9FB; --on-night-soft:#C6CBEA; --foot-dim:#667085; --foot-muted:#90A4B4;
  --font-ui:'Onest Variable',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --r-xs:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:28px; --r-pill:999px;
  --shadow-float:0 30px 70px -20px rgba(43,42,60,.45), 0 8px 24px -8px rgba(43,42,60,.25);
  --shadow-card:0 10px 30px -12px rgba(16,42,102,.14), 0 2px 6px rgba(16,42,102,.06);
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* type roles — one family, six steps; rem so user font settings still work */
  --t-display:clamp(2.125rem,4.4vw,3.75rem);
  --t-h2:clamp(1.875rem,3.6vw,2.875rem);
  --t-h3:clamp(1.625rem,2.8vw,2.25rem);
  --t-h4:1.3125rem;
  --t-lead:1.1875rem;
  --t-lead-sm:1.0625rem;
  --t-body:1rem;
  --t-control:.9375rem;
  --t-meta:.875rem;
  --t-micro:.8125rem;
  --t-label:.75rem;
  --t-numeral:2.75rem;
  /* aliases for inline SVG in markup (dynamics curve) */
  --blue-500:#5E94FF; --blue-300:#97D9FE; --blue-200:#BFE7FE; --spark:var(--lime);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
body{
  margin:0; background:var(--royal); color:var(--ink-900);
  font:400 var(--t-body)/1.65 var(--font-ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--lime); outline-offset:3px; border-radius:var(--r-xs);}
.num{font-variant-numeric:tabular-nums lining-nums;}

/* decorative fixed glows removed in canon world */
.glow{display:none;}

.wrap{position:relative; max-width:1180px; margin:0 auto; padding:0 32px;}

/* ── хлебные крошки ──────────────────────────────────────────────────────
   Второстепенная навигация: спокойный строчный шрифт без капса и разрядки,
   уровни разделены шевроном. Цвет задаётся через --crumb-*, поэтому на
   тёмной полосе героя достаточно переопределить три переменные. */
.crumbs{--crumb-ink:var(--ink-500); --crumb-ink-strong:var(--ink-900); --crumb-sep:var(--ink-400);
  margin:0 0 22px; font:400 14px/1.45 var(--font-ui); letter-spacing:0;}
.crumbs ol{display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:4px;
  margin:0; padding:0; list-style:none;}
.crumbs li{display:flex; align-items:center; gap:8px; color:var(--crumb-ink);}
.crumbs li + li::before{content:""; flex:none; width:5px; height:5px; margin-top:-1px;
  border:solid var(--crumb-sep); border-width:1.2px 1.2px 0 0; transform:rotate(45deg);}
.crumbs a{color:var(--crumb-ink); text-decoration:none; border-radius:4px;
  transition:color 150ms var(--ease-out);}
.crumbs a:hover{color:var(--crumb-ink-strong); text-decoration:underline; text-underline-offset:3px;}
.crumbs a:focus-visible{outline:2px solid currentColor; outline-offset:3px; color:var(--crumb-ink-strong);}
.crumbs [aria-current="page"]{color:var(--crumb-ink);}
/* на синей полосе: светлый приглушённый, контраст к #4F59C9 — 4.8:1 */
.hero .crumbs{--crumb-ink:var(--on-blue-soft); --crumb-ink-strong:#fff;
  --crumb-sep:rgba(255,255,255,.5);}

/* ── сквозная дорожка следов ── */
.paw-route{display:none; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible;
  pointer-events:none; z-index:2;}
.paw-step{position:absolute; width:21px; height:21px; margin:-11px 0 0 -11px;
  transform:rotate(var(--r,0deg));}
.paw-step svg{display:block; width:100%; height:100%; overflow:visible;}
.paw-step use{fill:var(--paw-c,rgba(79,89,201,.3));}
.paw-step.paw-goal use{fill:var(--lime);}
.js .paw-step{opacity:0; transition:opacity .4s var(--ease-out);}
.js .paw-step.on{opacity:1;}
.js .paw-step.on.dim{opacity:.35;}

/* ── nav ── */
header{position:relative; z-index:3;}
nav#nav{position:fixed; top:0; left:0; right:0; z-index:60; transition:background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);}
nav#nav .nav-in{display:flex; align-items:center; justify-content:space-between; height:76px;
  max-width:1180px; margin:0 auto; padding:0 32px;}
nav#nav.scrolled{background:rgba(32,60,148,.94); backdrop-filter:blur(14px); box-shadow:0 8px 30px -12px rgba(43,42,60,.35);}
.brand img{height:26px; width:auto; display:block; filter:brightness(0) invert(1);}
.nav-links{display:flex; gap:30px;}
.nav-links a{font:600 var(--t-control) var(--font-ui); color:var(--on-blue-soft); transition:color 150ms;}
.nav-links a:hover{color:#fff;}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-tg{display:inline-flex; align-items:center; gap:8px; font:600 var(--t-control) var(--font-ui); color:var(--on-blue-soft);}
.nav-tg:hover{color:#fff;}
.nav-tg svg{width:18px; height:18px;}
.nav-demo{background:#fff; color:var(--royal); font:700 var(--t-control) var(--font-ui);
  padding:11px 20px; border-radius:var(--r-md);
  box-shadow:0 2px 10px -4px rgba(43,42,60,.3);
  transition:color 160ms var(--ease-out), transform 160ms var(--ease-out);}
.nav-demo:hover{color:var(--royal-deep); transform:translateY(-1px);}
.burger{display:none; background:none; border:none; cursor:pointer; color:#fff; padding:8px;}
.burger svg{width:26px; height:26px; display:block;}
.burger .bx{display:none;}
nav.open .burger .bo{display:none;}
nav.open .burger .bx{display:block;}
.nav-mobile{display:none;}
nav.open .nav-mobile{display:flex; flex-direction:column; gap:4px; position:fixed; top:76px; left:0; right:0;
  background:var(--royal-deep); padding:18px 24px 26px; z-index:59; box-shadow:0 30px 50px -20px rgba(43,42,60,.5);}
.nav-mobile a{font:600 var(--t-lead-sm) var(--font-ui); color:#fff; padding:12px 4px; border-radius:var(--r-xs);}
.nav-mobile .nav-mobile-cta{margin-top:10px; background:#fff; color:var(--royal); text-align:center;
  padding:14px; border-radius:var(--r-pill); font-weight:700;}

/* ── hero: drenched royal ── */
.hero{display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:center;
  padding-top:170px; padding-bottom:150px; position:relative;}
.hero::before{content:""; position:absolute; inset:-200px 0 0; z-index:-1; background:var(--royal);}
.hero-copy{position:relative; z-index:2;}
h1.headline{margin:0 0 18px; max-width:640px; text-wrap:balance; font:700 var(--t-display)/1.06 var(--font-ui);
  letter-spacing:-.035em; color:#fff;}
/* Accent word in a heading: colour only, upright. */
h1.headline em{font-style:normal; font-weight:800; color:var(--lime);}

/* The brand name echoes the logotype's italic wherever it is written.
   Onest ships no true italic, so the slant is set explicitly rather than
   left to the browser's default synthesis. Stays real, selectable, indexable text. */
h1.headline em.brand,h2 em.brand,em.brand{
  font-style:italic;              /* fallback for engines without the angle syntax */
  font-style:oblique 11deg;
  font-weight:700; letter-spacing:-.005em;}
.sub{margin:0 0 28px; max-width:520px; font:500 var(--t-lead)/1.6 var(--font-ui); color:var(--on-blue-soft);}
.cta{display:flex; gap:16px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font:700 var(--t-control)/1.25 var(--font-ui); padding:15px 26px; border-radius:var(--r-md);
  border:none; transition:all 160ms var(--ease-out); white-space:nowrap;}
.btn svg{width:18px; height:18px; flex-shrink:0;}
.btn-primary{background:#fff; color:var(--royal);
  box-shadow:0 2px 10px -4px rgba(43,42,60,.3);}
.btn-primary:hover{color:var(--royal-deep); transform:translateY(-1px);}
.btn-ghost{background:none; border:none; color:#fff; padding:15px 12px;
  text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(255,255,255,.45);}
.btn-ghost:hover{text-decoration-color:#fff;}

/* line-art field behind hero visual */
.visual{position:relative; width:100%; max-width:640px; justify-self:end;}
.demo-stack{position:relative; padding:0 36px 34px 0;}
.demo-main{display:block; width:100%; height:auto; border-radius:var(--r-lg);
  box-shadow:0 18px 44px -18px rgba(43,42,60,.45);}
.js .demo-main{opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.js .demo-main.in{opacity:1; transform:none;}
.demo-phone{position:absolute; right:0; bottom:0; width:24%; height:auto;
  filter:drop-shadow(0 12px 22px rgba(43,42,60,.35));}
.js .demo-phone{opacity:0; transform:translate(-26px,-20px) scale(.96);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.js .demo-phone.in{opacity:1; transform:none;}

/* Бари умывается у телефона; по прокрутке уходит за него */
.bari-hero{position:absolute; right:19%; bottom:-10px; width:232px; aspect-ratio:1; pointer-events:none;}
.bari-hero img{display:block; width:100%; height:auto;}



/* ── white panel rising over blue ── */
main{position:relative;}
.product{background:var(--paper); border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  padding-top:72px; padding-bottom:88px; max-width:none; margin-top:calc(-1 * var(--r-2xl));}
.product > *{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
section{position:relative;}
/* контент секций над декоративной дорожкой (z2), фоны секций остаются под ней */
section > *{position:relative; z-index:3;}
.prod-head h2{max-width:850px;}
.prod-head{margin-bottom:48px;}
.prod-head h2{margin:0; font:700 var(--t-h2)/1.12 var(--font-ui);
  letter-spacing:-.03em; color:var(--night);}
h2 em{font-style:normal; font-weight:800; color:var(--royal);}
/* numbered typographic sequence — the bar's chapter device, not icon cards */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0 44px; }
.fcard{position:relative; background:none; border:none; border-radius:0;
  border-top:1px solid var(--ink-200); padding:26px 0 0;}
.fcard .ic{display:none;}
.fcard h3{margin:0 0 12px; font:700 var(--t-h4)/1.3 var(--font-ui); letter-spacing:-.02em; color:var(--night);}
.fcard p{margin:0; max-width:34ch; font:400 1.0625rem/1.6 var(--font-ui); color:var(--ink-500);}

/* ── showcase: экраны продукта, одна активная панель ── */
.showcase{background:var(--mist); padding-top:88px; padding-bottom:96px; max-width:none;}
.showcase > *{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
.sc-head{margin-bottom:28px;}
.sc-head h2{margin:0; font:700 var(--t-h2)/1.12 var(--font-ui); letter-spacing:-.03em; color:var(--ink-900);}
.sc-tabs{position:relative; display:flex; gap:26px; margin-bottom:28px; flex-wrap:wrap;}
.sc-ink{position:absolute; left:0; bottom:0; width:1px; height:2px; background:var(--royal);
  transform-origin:left center; transition:transform .2s var(--ease-out);}
.js .sc-tab.is-active{border-bottom-color:transparent;}
.sc-tab{cursor:pointer; background:none; border:none; padding:10px 2px;
  font:600 var(--t-control) var(--font-ui); color:var(--ink-700);
  border-bottom:2px solid transparent; transition:color 150ms var(--ease-out), border-color 150ms var(--ease-out);}
.sc-tab:hover{color:var(--royal);}
.sc-tab.is-active{color:var(--royal); border-bottom-color:var(--royal);}
.sc-tab:focus-visible{outline:2.5px solid var(--royal); outline-offset:3px; border-radius:var(--r-xs);}
.sc-stage{width:100%; display:grid;}
.sc-panel{grid-area:1/1; margin:0; opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease-out), visibility 0s .2s;}
.sc-panel.is-on{opacity:1; visibility:visible; transition:opacity .2s var(--ease-out), visibility 0s;}
html:not(.js) .sc-panel{opacity:1; visibility:visible;}
html:not(.js) .sc-panel:not(:first-of-type){display:none;}
/* высота места под экран задана пропорцией самого высокого скрина — переключение не прыгает */
.sc-panel .sc-zoom{display:block; width:100%; background:none; border:none; padding:0; cursor:zoom-in;}
.sc-crop{display:block; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--ink-100);
  border-radius:var(--r-md); box-shadow:0 6px 18px -10px rgba(43,42,60,.18);}
.sc-crop img{width:100%; height:100%; object-fit:cover; object-position:center;}


.sc-zoom:focus-visible{outline:2.5px solid var(--royal); outline-offset:4px; border-radius:var(--r-md);}
.sc-meta{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 2px 0;}
.sc-panel figcaption{font:500 var(--t-meta)/1.55 var(--font-ui); color:var(--ink-500);}
.sc-enlarge{display:inline-flex; align-items:center; gap:7px; flex-shrink:0; cursor:pointer;
  background:none; border:none; padding:6px 2px;
  font:600 var(--t-meta) var(--font-ui); color:var(--royal);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color .15s var(--ease-out);}
.sc-enlarge:hover{text-decoration-color:currentColor;}
.sc-enlarge svg{width:15px; height:15px;}
.sc-enlarge:focus-visible{outline:2.5px solid var(--royal); outline-offset:3px; border-radius:var(--r-xs);}

/* лайтбокс просмотра экрана */
.sc-lightbox{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:28px;
  visibility:hidden; opacity:0; transition:opacity .2s var(--ease-out), visibility .2s var(--ease-out);}
.sc-lightbox.open{visibility:visible; opacity:1;}
.sc-lightbox-scrim{position:absolute; inset:0; background:rgba(43,42,60,.64); backdrop-filter:blur(3px);}
.sc-lightbox-body{position:relative; z-index:1; margin:0; max-width:min(1240px,94vw);}
.sc-lightbox-body img{display:block; max-width:100%; max-height:82vh; width:auto; height:auto;
  border-radius:var(--r-md); box-shadow:0 30px 80px -20px rgba(43,42,60,.55); background:#fff;}
.sc-lightbox-body figcaption{margin-top:12px; font:500 var(--t-meta) var(--font-ui); color:#fff; text-align:center;}
.sc-lightbox-close{position:absolute; top:18px; right:18px; z-index:2; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:#fff; border:none; border-radius:50%; color:var(--ink-900); box-shadow:var(--shadow-card);}
.sc-lightbox-close svg{width:20px; height:20px;}
.sc-lightbox-close:focus-visible{outline:2.5px solid var(--lime); outline-offset:3px;}

/* ── download: приложение пациента ── */
.download{background:var(--paper); padding-top:88px; padding-bottom:96px; max-width:none;}
.download > *{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
.dl-inner{display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:center;}
.dl-kicker{margin:0 0 10px; font:600 var(--t-control) var(--font-ui); color:var(--royal);}
.dl-copy h2{margin:0 0 14px; max-width:520px; font:700 var(--t-h2)/1.12 var(--font-ui);
  letter-spacing:-.03em; color:var(--ink-900);}
.dl-copy > p{margin:0 0 28px; max-width:480px; font:400 1.125rem/1.6 var(--font-ui); color:var(--ink-500);}
.store-links{display:flex; gap:12px; flex-wrap:wrap;}
.store-btn{display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px;
  background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-md);
  font:600 var(--t-control) var(--font-ui); color:var(--ink-900);
  transition:border-color 150ms var(--ease-out), color 150ms var(--ease-out);}
.store-btn:hover{border-color:var(--royal); color:var(--royal);}
.store-btn:focus-visible{outline:2.5px solid var(--royal); outline-offset:3px;}
.store-btn svg{width:19px; height:19px; flex-shrink:0;}
.qr-row{display:flex; align-items:center; gap:16px; margin-top:20px;}
.qr-row .qr{width:112px; height:112px; flex-shrink:0; background:#fff; border:1px solid var(--ink-100);
  border-radius:var(--r-xs); padding:8px;}
.qr-row .qr svg,.qr-row .qr canvas,.qr-row .qr img{width:100%!important; height:100%!important; display:block;}
.qr-row .qr-txt .t{display:block; font:700 var(--t-meta) var(--font-ui); color:var(--ink-900);}
.qr-row .qr-txt .d{display:block; margin-top:3px; font:500 var(--t-micro)/1.5 var(--font-ui); color:var(--ink-500);}
.dl-mockup{position:relative; display:flex; justify-content:center;}
.dl-mockup img{max-width:300px; width:100%; height:auto; filter:drop-shadow(0 10px 20px rgba(43,42,60,.16));}
.js .dl-mockup img{opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}
.js .dl-mockup.in img{opacity:1; transform:none;}

/* ── материалы: компактные ссылки у футера ── */
.materials{background:var(--mist); padding:56px 0 64px; max-width:none;}
.mat-in{max-width:1180px; margin:0 auto; padding:0 32px;}
.materials h2{margin:0 0 18px; font:700 1.375rem/1.2 var(--font-ui); letter-spacing:-.02em; color:var(--ink-900);}
.mat-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 48px;}
.mat-list a{display:inline-block; padding:4px 0; font:500 var(--t-body)/1.45 var(--font-ui);
  color:var(--ink-700); text-decoration:none; border-bottom:1px solid transparent;}
.mat-list a:hover{color:var(--royal);}
.mat-list a span{color:var(--ink-400); font-weight:400; white-space:nowrap;}

/* ── trust: кому подходит ── */
.trust{background:var(--royal); padding-top:80px; padding-bottom:80px; max-width:none;}
.trust > *{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
.trust-head{margin-bottom:44px;}
.trust-head h2{margin:0; font:700 var(--t-h2)/1.12 var(--font-ui); letter-spacing:-.03em; color:#fff;}
.trust-head h2 em{color:var(--lime);}
.aud-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.aud-kicker{margin:0 0 10px; font:600 var(--t-control) var(--font-ui); color:var(--cloud);}
.aud-title{margin:0 0 12px; max-width:380px; font:700 1.75rem/1.25 var(--font-ui); letter-spacing:-.02em; color:#fff; text-wrap:balance;}
.aud-text{margin:0; max-width:40ch; font:400 1.0625rem/1.6 var(--font-ui); color:var(--on-blue-soft);}
.aud + .aud{border-left:1px solid rgba(255,255,255,.28); padding-left:48px;}
.trust-foot{position:relative; margin-top:52px; padding-top:36px;}
.trust-foot::before{content:""; position:absolute; top:0; left:32px; right:32px; height:1px;
  background:rgba(255,255,255,.28);}
.trust-stat{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.stat-num{font:700 var(--t-numeral)/1 var(--font-ui); letter-spacing:-.03em; color:#fff;}
.stat-num .plus{color:var(--lime);}
.stat-lab{font:500 1.0625rem var(--font-ui); color:var(--on-blue-soft);}
.trust-sec{margin:18px 0 0; font:500 var(--t-meta)/1.55 var(--font-ui); color:var(--on-blue-soft);}

/* ── финал: открытая композиция на белом ── */
.contacts{background:var(--paper); padding-top:88px; padding-bottom:104px; max-width:none;
  position:relative; overflow:hidden;}
.contacts > *{max-width:1180px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px;}
.fin-grid{display:grid; grid-template-columns:58fr 42fr; gap:72px; align-items:stretch;}
.fin-main h2{margin:0 0 14px; max-width:480px; font:700 var(--t-h2)/1.12 var(--font-ui);
  letter-spacing:-.03em; color:var(--ink-900);}
.fin-main .lead{margin:0 0 28px; max-width:460px; font:400 1.0625rem/1.6 var(--font-ui); color:var(--ink-500);}
.demobtn{display:inline-flex; align-items:center; gap:10px;
  background:var(--lime); color:var(--ink-1000); font:700 var(--t-control)/1.25 var(--font-ui);
  padding:15px 26px; border-radius:var(--r-md);
  box-shadow:0 2px 10px -4px rgba(43,42,60,.3); transition:all 160ms var(--ease-out);}
.demobtn:hover{transform:translateY(-1px); filter:brightness(1.03);}
.demobtn svg{width:19px; height:19px; transition:transform .15s var(--ease-out);}
.demobtn:hover svg{transform:translateX(3px);}
.fin-card{position:relative; margin-top:96px; background:rgba(79,89,201,.07);
  border-radius:var(--r-xl); padding:34px; max-width:440px; justify-self:end; width:100%;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.fin-card h3{margin:0 0 6px; font:700 1.625rem/1.2 var(--font-ui); letter-spacing:-.02em; color:var(--ink-900);}
.fin-card > p{margin:0 0 14px; font:400 1.0625rem/1.5 var(--font-ui); color:var(--ink-500);}
.fin-link{display:flex; align-items:center; gap:11px; padding:9px 0;
  font:600 1.125rem var(--font-ui); color:var(--ink-700);
  transition:color .15s var(--ease-out);}
.fin-link:hover{color:var(--royal);}
.fin-link svg{width:18px; height:18px; flex-shrink:0; color:var(--ink-400); transition:color .15s var(--ease-out);}
.fin-link:hover svg{color:var(--royal);}
.fin-cat{position:absolute; top:-134px; right:20px; width:248px; pointer-events:none;}
.fin-cat img{display:block; width:100%; height:auto;}
.fin-blink{position:absolute; transform:translate(-50%,-50%); opacity:0;}
.fin-cat.blinking .fin-blink{opacity:1;}
.js .fin-cat{opacity:0; transform:translateY(10px);
  transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);}
.js .contacts.peek .fin-cat{opacity:1; transform:none;}

/* ── footer: light and quiet, the page exhales ── */
footer{background:var(--paper); color:var(--ink-500); padding:54px 0 52px;
  border-top:1px solid var(--ink-100); position:relative; z-index:2;}
.foot-top{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.foot-mark{height:24px; width:auto; display:block;}
.foot-cr{font:500 var(--t-meta) var(--font-ui); color:var(--ink-400);}
/* Подвал: четыре группы разделов, ниже отдельной полосой документы
   и реквизиты. Раньше внизу были только документы, соцсети и реквизиты —
   входа в разделы сайта не было вовсе. */
.foot-nav{margin-top:34px; padding-top:30px; border-top:1px solid var(--ink-100);
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px 40px;}
.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.foot-col h2{margin:0 0 2px; font:700 var(--t-meta) var(--font-ui); color:var(--ink-900);
  letter-spacing:0;}
.foot-col a{font:400 var(--t-meta) var(--font-ui); color:var(--ink-700); cursor:pointer;
  transition:color 150ms var(--ease-out);}
.foot-col a:hover{color:var(--royal);}
.foot-social{display:flex; gap:10px; margin-top:4px;}
.foot-social a{display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--ink-100); color:var(--ink-700);
  transition:all 150ms var(--ease-out);}
.foot-social a:hover{border-color:var(--royal); color:var(--royal);}
.foot-social svg{width:17px; height:17px;}
.foot-fine{margin-top:36px; padding-top:26px; border-top:1px solid var(--ink-100);}
.foot-docs{display:flex; flex-wrap:wrap; gap:12px 32px;}
.foot-docs a{font:400 var(--t-micro) var(--font-ui); color:var(--ink-400); cursor:pointer;
  transition:color 150ms var(--ease-out);}
.foot-docs a:hover{color:var(--royal);}
.foot-legal{margin-top:22px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px 48px; flex-wrap:wrap;}
.foot-legal .lic{margin:0; font:500 var(--t-micro)/1.65 var(--font-ui); color:var(--ink-400); max-width:460px;}
.foot-legal .lic strong{font-weight:700; color:var(--ink-700);}
.foot-legal .org{margin:0; font:500 var(--t-micro)/1.7 var(--font-ui); color:var(--ink-400); text-align:right;}
.foot-legal .org .row{display:block;}
.foot-legal .org b{font-weight:600; color:var(--ink-700);}

/* ── формы заявок ── */
.lead-modal{position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center;
  padding:24px; visibility:hidden; opacity:0; transition:opacity .2s var(--ease-out), visibility .2s var(--ease-out);}
.lead-modal.open{visibility:visible; opacity:1;}
.lead-scrim{position:absolute; inset:0; background:rgba(43,42,60,.6); backdrop-filter:blur(3px);}
.lead-box{position:relative; z-index:1; width:min(500px,100%); max-height:calc(100vh - 48px);
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-float);
  display:flex; flex-direction:column; overflow:hidden;}
.lead-body{overflow:auto; padding:34px 36px 32px;}
.lead-close{position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--mist); border:none; border-radius:50%; color:var(--ink-700);}
.lead-close svg{width:18px; height:18px;}
.lead-close:focus-visible{outline:2.5px solid var(--royal); outline-offset:3px;}
.lead-body h3{margin:0 0 8px; font:700 1.5rem/1.2 var(--font-ui); letter-spacing:-.02em; color:var(--ink-900); padding-right:36px;}
.lead-sub{margin:0 0 22px; font:400 var(--t-control)/1.5 var(--font-ui); color:var(--ink-500);}
.lf-field{margin:0 0 16px; border:none; padding:0;}
.lf-label{display:block; margin:0 0 6px; font:600 var(--t-meta) var(--font-ui); color:var(--ink-900);}
.lf-opt{font-weight:500; color:var(--ink-400);}
#lead-form input[type="text"],#lead-form input[type="tel"],#lead-form input[type="email"],#lead-form textarea{
  width:100%; min-height:46px; padding:11px 14px; font:400 var(--t-body) var(--font-ui); color:var(--ink-900);
  background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-xs);
  transition:border-color .15s var(--ease-out);}
#lead-form textarea{resize:vertical; min-height:96px;}
#lead-form input:focus-visible,#lead-form textarea:focus-visible{outline:none; border-color:var(--royal); box-shadow:0 0 0 2px rgba(79,89,201,.18);}
#lead-form .invalid{border-color:#C23B3B;}
.lf-radios{display:flex; gap:10px;}
.lf-radio{flex:1; display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer;
  border:1px solid var(--ink-200); border-radius:var(--r-xs); font:500 var(--t-control) var(--font-ui); color:var(--ink-700);}
.lf-radio:has(input:checked){border-color:var(--royal); color:var(--royal); background:rgba(79,89,201,.06);}
.lf-radio input{accent-color:var(--royal);}
.lf-err{margin:6px 0 0; font:500 var(--t-micro) var(--font-ui); color:#C23B3B;}
.lf-server a{color:inherit; text-decoration:underline;}
.lf-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.lf-agree{display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  font:400 var(--t-meta)/1.5 var(--font-ui); color:var(--ink-500);}
.lf-agree input{margin-top:3px; accent-color:var(--royal); flex-shrink:0;}
.lf-agree a{color:var(--royal); text-decoration:underline; text-underline-offset:2px;}
.lead-submit{display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:6px;
  background:var(--royal); color:#fff; font:700 var(--t-control)/1.25 var(--font-ui);
  padding:14px 26px; border:none; border-radius:var(--r-md); cursor:pointer;
  transition:background .15s var(--ease-out);}
.lead-submit:hover{background:var(--royal-deep);}
.lead-submit:disabled{opacity:.7; cursor:default;}
.lead-submit:focus-visible{outline:2.5px solid var(--royal); outline-offset:3px;}
.lead-done{text-align:center;}
.lead-done .ld-cat{display:block; width:128px; height:auto; margin:2px auto 12px;}
.lead-done h3{padding-right:0;}
.lead-done .lead-submit{margin-top:4px;}
.lead-done p{margin:0 0 20px; font:400 var(--t-control)/1.5 var(--font-ui); color:var(--ink-500);}
.fin-ask{align-self:stretch; margin:2px 0 10px; padding:12px 18px; cursor:pointer;
  background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-md);
  font:600 var(--t-control) var(--font-ui); color:var(--royal);
  transition:border-color .15s var(--ease-out);}
.fin-ask:hover{border-color:var(--royal);}
.fin-ask:focus-visible{outline:2.5px solid var(--royal); outline-offset:3px;}

/* ── cookie ── */
.cookie{position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); z-index:80;
  display:flex; align-items:center; gap:18px; width:min(720px,calc(100vw - 32px));
  background:#fff; border-radius:var(--r-pill); padding:14px 16px 14px 20px;
  box-shadow:var(--shadow-float); opacity:0; pointer-events:none;
  transition:all 320ms var(--ease-out);}
.cookie.show{opacity:1; transform:translate(-50%,0); pointer-events:auto;}
.cookie .ck-top{display:flex; align-items:center; gap:14px; flex:1; min-width:0;}
.cookie .ck-ic{width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--mist); border-radius:50%; color:var(--royal);}
.cookie .ck-ic svg{width:22px; height:22px;}
.cookie .ck-txt{flex:1; font:500 var(--t-micro)/1.55 var(--font-ui); color:var(--ink-700);}
.cookie .ck-txt a{color:var(--royal); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.cookie .ck-acts{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.cookie .ck-close{cursor:pointer; border:1.5px solid var(--ink-200); background:#fff; color:var(--ink-900);
  font:600 var(--t-meta) var(--font-ui); padding:10px 18px; border-radius:var(--r-pill); transition:all 150ms var(--ease-out);}
.cookie .ck-close:hover{border-color:var(--ink-500);}
.cookie .ck-ok{cursor:pointer; border:none; background:var(--lime); color:var(--ink-1000);
  font:700 var(--t-meta) var(--font-ui); padding:11px 22px; border-radius:var(--r-pill); transition:all 150ms var(--ease-out);}
.cookie .ck-ok:hover{filter:brightness(.97); transform:translateY(-1px);}

/* ── scroll-to-top: Бари в кольце прогресса, бейдж-стрелка сверху ── */
.totop{position:fixed; right:24px; bottom:24px; z-index:70; width:58px; height:58px;
  border:none; padding:0; cursor:pointer; background:transparent;
  opacity:0; transform:translateY(16px) scale(.92); pointer-events:none;
  transition:opacity .32s var(--ease-out), transform .32s var(--ease-out);}
.totop.show{opacity:1; transform:none; pointer-events:auto;}
.totop:hover{transform:translateY(-3px);}
.totop .ring{position:absolute; inset:0; transform:rotate(-90deg);}
.totop .ring .trk{fill:#fff; stroke:var(--ink-100); stroke-width:3;}
.totop .ring .prg{fill:none; stroke:var(--royal); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:125.6; stroke-dashoffset:125.6; transition:stroke-dashoffset .1s linear;}
.totop .face{position:absolute; left:50%; top:50%; width:40px; height:40px;
  transform:translate(-50%,-50%); border-radius:50%; object-fit:cover; box-shadow:var(--shadow-card);}
.totop .arr{position:absolute; right:-3px; top:-3px; width:21px; height:21px; border-radius:50%;
  background:var(--royal); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card); transition:background .15s var(--ease-out), transform .25s var(--ease-out);}
.totop:hover .arr,.totop:focus-visible .arr{background:var(--royal-deep); transform:translateY(-2px);}
.totop .arr svg{width:12px; height:12px;}

/* ── responsive ── */
@media (max-width:980px){
  .hero{grid-template-columns:1fr; gap:60px; padding-top:140px;}
  .visual{max-width:400px; order:2;}
  .feat-grid{grid-template-columns:1fr; gap:40px;}
  .dl-inner{grid-template-columns:1fr; gap:48px;}
  .cgrid{grid-template-columns:1fr;}

  .nav-links{display:none;}
  .nav-tg{display:none;}
  .nav-demo{display:none;}
  .burger{display:block;}
}
@media (max-width:600px){
  .paw-step{width:17px; height:17px; margin:-9px 0 0 -9px;}
  .wrap,.product > *,.showcase > *,.download > *,.trust > *,.contacts > *{padding-left:20px; padding-right:20px;}
  /* Секции-полосы несут класс wrap и ещё раз добавляют поле внутреннему
     контейнеру. На широком экране поля гасит центрирование, на узком
     складываются — и заголовки разделов стоят на 20px правее остальных. */
  .product,.showcase,.download,.trust,.contacts{padding-left:0; padding-right:0;}
  .mat-in{padding:0 20px;}
  .mat-list{grid-template-columns:1fr;}
  .hero{padding-top:120px; padding-bottom:70px;}
    .cta{flex-direction:column; align-items:stretch;}
  .cta .btn{justify-content:center;}
  /* Поле теперь только у самой полосы, поэтому вылет отрицательными
     margin'ами больше не нужен — с ним лента вылезала за ширину экрана. */
  .sc-tabs{flex-wrap:nowrap; overflow-x:auto; gap:18px;
    margin-left:0; margin-right:0; padding:0 20px; scrollbar-width:none;}
  .sc-tabs::-webkit-scrollbar{display:none;}
  .sc-tab{white-space:nowrap;}
  .sc-crop{aspect-ratio:4/3;}
  .dl-copy > p{font-size:1rem;}
  .sc-meta{flex-direction:column; align-items:flex-start; gap:6px;}
  .store-links{flex-direction:column; align-items:stretch;}
  .store-btn{justify-content:center;}
  .qr-row{display:none;}
  .aud-grid{grid-template-columns:1fr; gap:28px;}
  .trust-foot::before{left:20px; right:20px;}
  .fin-grid{grid-template-columns:1fr; gap:36px;}
  .aud + .aud{border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.28); padding-top:28px;}
  .stat-num{font-size:var(--t-h3);}
  .fin-card{max-width:none; justify-self:stretch; margin-top:84px;}
  .lead-modal{padding:0; align-items:flex-end;}
  .lead-box{width:100%; max-height:92dvh; border-radius:var(--r-xl) var(--r-xl) 0 0;}
  .lead-body{padding:28px 20px calc(24px + env(safe-area-inset-bottom));}
  .lf-radios{flex-direction:column;}
  .fin-cat{width:225px; top:-122px; right:8px;}
  .foot-nav{grid-template-columns:1fr 1fr; gap:26px 24px;}
  .foot-docs{flex-direction:column; gap:12px;}
  .foot-legal{flex-direction:column; gap:16px;}
  .foot-legal .org{text-align:left;}
  .cookie{flex-direction:column; align-items:stretch; gap:12px; border-radius:var(--r-xl); padding:18px 20px;}
  .totop{right:16px; bottom:16px; width:52px; height:52px;}
  .totop .face{width:36px; height:36px;}
}
@media (max-width:390px){
  .visual{max-width:100%;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important;}
    .js .demo-main,.js .demo-phone{opacity:1; transform:none;}
  .js .dl-mockup img{opacity:1; transform:none;}
  .js .fin-cat{opacity:1; transform:none;}
  .js .paw-step{opacity:.5; transition:none;}
}

/* ссылка на страницу возможности из карточки на главной */
.fcard-more { display: inline-block; margin-top: 8px; font-weight: 600; color: #4F59C9; text-decoration: none; }
.fcard-more:hover { text-decoration: underline; }

/* ══ страницы возможностей (/features/<name>/) ══════════════════════════
   Общий шаблон внутренней страницы: первый экран с интерфейсом,
   карточки возможностей, крупная иллюстрация, последовательность шагов,
   вопросы, соседние разделы, приглашение на демо. Сюда вынесено из
   features/scheduling/, чтобы следующие страницы не копировали стили. */
/* Главы-полосы: тот же приём, что на главной — секция со своим материалом,
     внутренности ограничены по ширине. Без этого секция ложится прямо
     на синий фон страницы, и тёмный текст по нему не читается. */
  main { overflow-x: clip; }
  .chapter { max-width: none; padding: 76px 0 84px; }
  /* тот же подвал у секции, что и у глав, — иначе между «Что умеет
     расписание» и следующей главой воздуха на 4px больше остальных */
  .product { padding-bottom: 84px; }
  .chapter-in { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  .chapter-paper { background: var(--paper); }
  .chapter-mist { background: var(--mist); }

  /* Текстовая колонка прижата к верху, по центру выравнивается только
     карточка. Иначе крошки «плавают»: с картинкой в первом экране они
     на 92px ниже, чем на странице без неё, — на каждой странице своя высота. */
  .sub-hero { padding: 104px 32px 84px; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.1fr);
    gap: 44px; align-items: start; }
  .hero-shot { align-self: center; }
  /* Заголовок страницы-возможности меньше, чем на главной: рядом с ним стоит
     интерфейс, и в две строки он помещается только на более плотном кегле. */
  .sub-hero h1 { max-width: none; text-wrap: normal; font-size: clamp(30px, 2.9vw, 40px); line-height: 1.06;
    letter-spacing: -.03em; }
  .sub-hero .lede { max-width: 52ch; margin: 20px 0 30px; color: var(--cloud); font-size: 1.0625rem; line-height: 1.6; }

  /* Заголовки разделов меньше заголовка страницы: на внутренней странице
     h1 должен оставаться самым крупным, иначе шапка раздела перебивает тему. */
  .chapter h2, .prod-head h2 { margin: 0 0 10px; font: 700 clamp(23px, 2.1vw, 30px)/1.16 var(--font-ui);
    letter-spacing: -.025em; color: var(--ink-900); max-width: 24ch; }
  .chapter-in > .lede { max-width: 60ch; margin: 0 0 30px; color: var(--ink-700); }

  /* Экран продукта в первом экране. Картинка одна и та же, что в витрине
     на главной, но обрезана по левому краю: боковое меню кабинета к расписанию
     отношения не имеет, а без обрезки календарь ужимается до нечитаемого. */
  /* Скриншот и подписи к нему — один объект: белая карточка, в ней экран
     и легенда. Раньше подписи висели отдельной строкой прямо на синем фоне
     и читались как не относящийся к картинке текст.
     Карточка упирается в правый край экрана, но не шире 760px: без
     ограничения на широком мониторе она раздувалась до 980px и
     перевешивала текст. */
  /* --bleed: насколько карточка выходит за контейнер вправо. 590px —
     половина контейнера плюс его поле плюс 32px воздуха у края экрана.
     Ширину задаём явно: у grid-элемента отрицательный margin сам по себе
     её не увеличивает. */
  .hero-shot { --bleed: max(0px, calc(50vw - 590px));
    width: calc(100% + var(--bleed)); max-width: 740px;
    margin: 0 calc(-1 * var(--bleed)) 0 auto;
    position: relative; z-index: 2;
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(16, 20, 60, .55); }
  .shot-zoom { display: block; width: 100%; padding: 0; border: 0; background: none;
    cursor: zoom-in; position: relative; text-align: left; }
  /* В кадре только то, о чём подписи: приёмы дня, статусы и уведомления.
     Боковое меню кабинета и пустые вечерние часы обрезаны — без этого
     масштаб расходуется на части интерфейса, к расписанию не относящиеся. */
  .shot-crop { display: block; position: relative; overflow: hidden; background: #fff;
    aspect-ratio: var(--shot-ar, 1.79); }
  .shot-crop img { position: absolute; left: var(--shot-x, -22.6%); top: var(--shot-y, -3.4%);
    width: var(--shot-w, 122.6%); max-width: none; height: auto; }
  .pin { position: absolute; width: 24px; height: 24px; border-radius: 999px;
    display: grid; place-items: center; background: var(--royal); color: #fff;
    font: 700 12px/1 var(--font-ui); font-style: normal;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .92); }
  .pin-1 { left: 34%; top: 52%; }
  .pin-2 { left: 78%; top: 24%; }
  .pin-3 { left: 71%; top: 70%; }
  .shot-more { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center;
    gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .94);
    font: 600 13px/1 var(--font-ui); color: var(--ink-900);
    box-shadow: 0 4px 14px -6px rgba(16, 20, 60, .5); }
  .shot-more svg { width: 15px; height: 15px; }
  .shot-zoom:hover .shot-more { background: #fff; color: var(--royal); }
  .shot-zoom:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }

  .shot-legend { display: grid; gap: 7px; margin: 0; padding: 18px 22px 20px;
    border-top: 1px solid var(--ink-border, #E2E8F0); }
  .shot-legend span { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
    font: 400 13.5px/1.45 var(--font-ui); color: var(--ink-700); }
  .shot-legend i { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
    background: var(--cloud); color: var(--royal); font: 700 11px/1 var(--font-ui); font-style: normal; }

  /* Дорожка пути: четыре шага в ряд со стрелками между ними. Намеренно не
     похожа на карточки выше и на сравнение рядом — одна и та же вертикальная
     плашка третий раз подряд перестаёт читаться как отдельная мысль. */
  .track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
    margin: 0; padding: 0; list-style: none; counter-reset: tr; }
  .track li { counter-increment: tr; position: relative; display: grid;
    align-content: start; gap: 6px; padding-top: 42px; }
  .track li::before { content: counter(tr); position: absolute; top: 0; left: 0;
    width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
    background: var(--royal); color: #fff; font: 700 14px/1 var(--font-ui); }
  .track li:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 38px; right: -22px;
    height: 2px; background: linear-gradient(90deg, var(--cloud), var(--cloud) 60%, transparent); }
  /* Служебная подпись: обычный регистр, без разрядки. Акцент несёт
     название действия, роль только уточняет, кто его выполняет. */
  .tr-who { font: 500 13px/1.3 var(--font-ui); color: var(--ink-500, #667085); }
  .track b { font: 600 1.0625rem/1.3 var(--font-ui); color: var(--ink-900); }
  .tr-what { color: var(--ink-700); line-height: 1.6; font-size: 15px; }
  @media (max-width: 860px) {
    .track { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
    .track li:nth-child(2)::after { display: none; }
  }
  @media (max-width: 560px) {
    .track { grid-template-columns: 1fr; gap: 20px; }
    .track li::after { display: none; }
  }

  .faq-i { border-bottom: 1px solid var(--ink-border, #E2E8F0); padding: 18px 0; }
  .faq-i summary { cursor: pointer; font: 600 1.0625rem/1.4 var(--font-ui);
    color: var(--ink-900); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
  .faq-i summary::-webkit-details-marker { display: none; }
  .faq-i summary::after { content: '+'; color: var(--royal); font-weight: 700; flex: none; }
  .faq-i[open] summary::after { content: '–'; }
  .faq-i p { margin: 10px 0 0; color: var(--ink-700); max-width: 70ch; line-height: 1.65; }

  .next { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .next a { display: block; padding: 20px 22px; border: 1px solid var(--ink-border, #E2E8F0);
    border-radius: 16px; text-decoration: none; color: inherit; background: #fff; }
  .next a:hover { border-color: var(--royal); }
  .next b { display: block; margin-bottom: 4px; color: var(--ink-900);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .next b::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 2px;
    border: solid var(--royal); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
    transition: transform 150ms var(--ease-out); }
  .next a:hover b::after { transform: rotate(45deg) translate(2px, -2px); }
  .next span { color: var(--ink-500, #667085); font-size: 14px; line-height: 1.5; }

  /* Сторона пациента: крупный экран приложения и короткий текст рядом.
     Зеркально первому экрану — там картинка справа, здесь слева. */
  .chapter-side { background: var(--cloud); }
  .side-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
  .side-shot { margin: 0; }
  .side-shot img { display: block; width: 100%; height: auto; }
  .chapter-side p { margin: 0 0 14px; max-width: 46ch; color: var(--ink-700); line-height: 1.65; }
  .chapter-side p:last-child { margin-bottom: 0; }
  @media (max-width: 860px) { .side-in { grid-template-columns: 1fr; gap: 24px; } }

  .chapter-cta { background: var(--night); }
  .chapter-cta h2 { color: #fff; max-width: 16ch; }
  .chapter-cta p { margin: 0; max-width: 46ch; color: var(--on-night-soft); line-height: 1.6; }
  .cta-in { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
  /* Ниже 1080 колонка под интерфейс становится уже 500px, и календарь в ней
     снова нечитаем. Там он уходит под текст и занимает всю ширину. */
  @media (max-width: 1080px) {
    .sub-hero { grid-template-columns: 1fr; gap: 36px; }
    .sub-hero h1 { max-width: 24ch; text-wrap: balance; }
    .hb { display: none; }
    .hero-shot { margin-right: 0; border-radius: 18px; }
  }
  @media (max-width: 860px) {
    .cta-in { grid-template-columns: 1fr; justify-items: start; }
  }

  @media (max-width: 720px) {
    .sub-hero { padding: 100px 20px 48px; }
    .hero-shot { margin-right: 0; border-radius: 14px; }
    .shot-crop { aspect-ratio: 1.2; }
    .pin { display: none; }
    .shot-legend { padding: 16px 18px 18px; }
    .shot-legend span { color: var(--cloud); }
    .chapter { padding: 52px 0 56px; }
    .chapter-in { padding: 0 20px; }
  }