/* Шрифты лежат на своём сервере — внешних подключений у сайта нет.
   Onest и IBM Plex распространяются по SIL Open Font License 1.1, self-hosting разрешён.
   Файлы .woff2 кладутся в /assets/fonts/. */
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("/assets/fonts/onest-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  color-scheme: light;
  --blue:#1A8AD8;
  --blue-deep:#0F6FAF;
  --blue-night:#0A4E7C;
  --blue-wash:#EAF3FB;
  --blue-mist:#F4F9FD;
  --green:#6BAE00;         /* ярче, ближе к фирменному #78C400 */
  --green-dark:#5C9600;
  --on-green:#FFFFFF;
  --sky:#A9D6F3;           /* надзаголовки на синем вместо зелёного */
  --ink:#16202A;
  --ink-2:#4C5A63;
  --ink-3:#7A8894;
  --paper:#FFFFFF;
  --ground:#F6FAFD;
  --line:#DDE5ED;
  --line-soft:#EDF3F8;
  --lift-1:0 1px 2px rgba(12,48,76,.05), 0 4px 10px -6px rgba(12,48,76,.25);
  --lift-2:0 2px 6px rgba(12,48,76,.06), 0 18px 40px -22px rgba(12,48,76,.55);
  --lift-3:0 8px 20px rgba(9,42,68,.10), 0 44px 80px -40px rgba(9,42,68,.75);
  --display:"Onest","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}
a{color:var(--blue-deep); text-underline-offset:3px}
button,a,input,label{touch-action:manipulation}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.025em}
p{margin:0}
.wrap{max-width:1260px; margin:0 auto; padding-inline:clamp(16px,4vw,44px); position:relative; z-index:2}
.skip{position:absolute; left:-9999px; top:0; background:var(--paper); padding:10px 16px; z-index:200}
.skip:focus{left:12px; top:12px}

/* ============ фирменный знак ============ */
/* цвета логотипа передаются переменными — они, в отличие от классов,
   наследуются внутрь shadow-дерева <use> */
.brand{--lm:var(--ink); --lw:var(--ink); display:inline-flex; align-items:center; text-decoration:none}
.brand svg{height:46px; width:auto; display:block}
@media(max-width:620px){.brand svg{height:36px}}
@media(max-width:400px){.brand svg{height:30px}}
.foot .brand{--lm:#fff; --lw:#fff}
.foot .brand svg{height:40px}
.foot .brand{--lm:#fff; --lw:#fff}

/* ============ верхняя панель прототипа ============ */
.proto{background:var(--ink); color:#fff}
.proto .wrap{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding-block:7px}
.proto .lab{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#8FA3B2}
.proto .sp{flex:1}
.toggle{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); padding:5px 11px; border-radius:99px; cursor:pointer; transition:background-color .15s, border-color .15s}
.toggle:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.toggle[aria-pressed="true"]{background:var(--green); border-color:var(--green); color:var(--on-green)}

/* ============ шапка ============ */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:80; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:clamp(10px,2vw,30px); padding-block:13px}
.nav{display:flex; gap:clamp(8px,1.5vw,24px); margin-left:auto; align-items:center}
.nav a{color:var(--ink-2); text-decoration:none; font-size:15.5px; font-weight:500; padding:7px 3px; position:relative}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .22s cubic-bezier(.4,0,.2,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.head-cta{display:flex; align-items:center; gap:10px}
.user{display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:15.5px; color:var(--ink-2); white-space:nowrap}
.user svg{width:18px; height:18px; fill:none; stroke:var(--ink-3); stroke-width:1.9; stroke-linecap:round}
@media(max-width:480px){.user{display:none}}
@media(max-width:1100px){.nav{display:none} .site-head .wrap{justify-content:space-between} .head-cta{margin-left:auto}}
@media(max-width:560px){.head-cta .btn-ghost{display:none}}
@media(max-width:400px){.head-cta .btn-primary{padding:0 13px; font-size:14px}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-weight:700; font-size:17.5px; line-height:1; white-space:nowrap; min-height:54px; padding:0 26px; border-radius:12px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background-color .16s, border-color .16s, box-shadow .16s, transform .12s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green); color:var(--on-green); box-shadow:0 8px 24px -10px rgba(107,174,0,.95), inset 0 -2px 0 rgba(0,0,0,.14)}
.btn-primary:hover{background:var(--green-dark); box-shadow:0 12px 28px -10px rgba(90,150,0,.9)}
.btn-ghost{background:var(--paper); color:var(--ink); border-color:var(--line); box-shadow:var(--lift-1)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-onblue{background:#fff; color:var(--blue-night); border-color:#fff}
.btn-onblue:hover{background:var(--blue-wash); border-color:var(--blue-wash)}
.btn-sm{min-height:44px; padding:0 18px; font-size:15px; border-radius:10px}
@media(max-width:1040px){.btn-sm{padding:0 13px; font-size:14.5px}}

/* ============ фоновая графика ============ */
.amb{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.amb svg{position:absolute; display:block}
.ring{border-radius:50%; position:absolute; border:1.5px solid currentColor; opacity:.3}
.glow{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-16px,0) rotate(3deg)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,14px,0) rotate(-4deg)}}
.float-a{animation:drift 13s ease-in-out infinite}
.float-b{animation:drift2 17s ease-in-out infinite}
.float-c{animation:drift 21s ease-in-out infinite}
.obj{filter:drop-shadow(0 18px 26px rgba(6,40,66,.35))}
.sec .obj{filter:drop-shadow(0 16px 24px rgba(20,90,140,.16))}

/* ============ герой ============ */
.hero{position:relative; overflow:hidden; background:linear-gradient(158deg,var(--blue) 0%, var(--blue-deep) 55%, var(--blue-night) 100%); color:#fff; isolation:isolate}
.hero .amb{color:#fff}
.hero .wrap{padding-block:clamp(44px,6vw,80px) clamp(104px,12vw,168px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(30px,4.5vw,66px); align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr; gap:38px}}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); margin-bottom:18px}
.hero h1{font-size:clamp(31px,4.4vw,56px); line-height:1.04; font-weight:800; color:#fff; max-width:100%; overflow-wrap:break-word}
.rot-line{display:block; font-size:.52em; font-weight:600; line-height:1.3; color:#CDE4F4; margin-top:.5em; letter-spacing:-.01em}
.rot{display:inline-grid; vertical-align:bottom; position:relative; max-width:100%}
.rot > span{grid-area:1/1; white-space:nowrap; color:#fff; opacity:0; transform:translateY(.42em); filter:blur(4px);
  transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1), filter .5s}
.rot > span.on{opacity:1; transform:none; filter:none}
.rot > span.out{opacity:0; transform:translateY(-.42em); filter:blur(4px)}
.rot::after{content:""; position:absolute; left:0; bottom:-.2em; height:4px; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--green),#B7E86A); transform-origin:left; animation:underline 3.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes underline{0%{transform:scaleX(0)}18%{transform:scaleX(1)}82%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.rot::after{animation:none; transform:scaleX(1)} .rot > span{transition:none}}
.hero .lede{margin-top:20px; font-size:clamp(17px,1.5vw,19.5px); color:#D7E8F5; max-width:44ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-note{font-size:14.5px; color:#B9D6EC; margin-top:16px; max-width:42ch}
.hero-note b{color:#fff; font-weight:600}

/* карточка редактора */
.card{background:var(--paper); color:var(--ink); border-radius:18px; box-shadow:var(--lift-3); overflow:hidden}
.card-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--blue-mist); border-bottom:1px solid var(--line)}
.dot{width:9px; height:9px; border-radius:50%; background:#D6DFE7}
.card-bar .path{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:8px}
.card-body{padding:20px}
.flabel{font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--ink); display:block; margin-bottom:7px}
.flabel sup{color:#C0392B}
.subject-wrap{position:relative; display:flex; align-items:center}
#subject{width:100%; font-family:var(--body); font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:13px 46px 13px 14px; transition:border-color .16s, box-shadow .16s}
#subject:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(26,138,216,.14)}
.emoji-btn{position:absolute; right:8px; width:32px; height:32px; border-radius:8px; border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background-color .15s}
.emoji-btn:hover{background:var(--blue-wash)}
.vars{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; align-items:center}
.vars .cap{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em}
.chip{font-family:var(--mono); font-size:12px; border:1px dashed var(--blue); color:var(--blue-deep); background:var(--blue-wash); border-radius:7px; padding:5px 9px; cursor:pointer; transition:background-color .15s, transform .12s}
.chip:hover{background:#DCEBF8}
.chip:active{transform:scale(.96)}
.preview{margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.preview-top{padding:10px 14px; background:var(--blue-mist); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em}
.mail{padding:15px}
.mail .from{display:flex; align-items:center; gap:10px}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--blue-night)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:14px}
.mail .who{font-size:14px; font-weight:600}
.mail .when{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.mail .subj{margin-top:12px; font-family:var(--display); font-weight:700; font-size:17px; min-height:1.4em; word-break:break-word}
.mail .body{margin-top:6px; font-size:14.5px; color:var(--ink-2)}
.send-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; flex-wrap:wrap}
.recipients{font-family:var(--mono); font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ============ клиенты ============ */
.trust{background:var(--paper); border-bottom:1px solid var(--line); position:relative; margin-top:-1px}
.trust .wrap{padding-block:26px; display:flex; align-items:center; gap:clamp(14px,3vw,44px); flex-wrap:wrap}
.trust .cap{font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.logos{display:flex; flex-wrap:wrap; gap:clamp(14px,2.8vw,38px); align-items:center}
.logos span{font-family:var(--display); font-weight:600; font-size:17px; color:#9CAAB6; letter-spacing:-.015em; transition:color .18s}
.logos span:hover{color:var(--ink-2)}

/* ============ секции ============ */
.sec{position:relative; border-bottom:1px solid var(--line); isolation:isolate; overflow:hidden;
  background:linear-gradient(176deg,#EFF7FD 0%, #FBFDFF 46%, #FFFFFF 100%)}
.sec.paper{background:linear-gradient(184deg,#FFFFFF 0%, #F8FCFF 54%, #EFF7FD 100%)}
/* аура за макетом — секция перестаёт быть белым листом */
.art{position:relative}
.art::before{content:""; position:absolute; inset:-18% -14%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(74,167,233,.34), rgba(74,167,233,.10) 58%, rgba(74,167,233,0) 78%)}
.art::after{content:""; position:absolute; right:-6%; bottom:-12%; width:46%; aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(120,196,0,.20), rgba(120,196,0,0) 72%)}
.art > *{position:relative; z-index:1}
/* волны на стыках секций */
.wave{position:absolute; left:0; width:100%; height:clamp(56px,6.5vw,104px); display:block; z-index:3; pointer-events:none}
.wave-b{bottom:-1px}
.wave-t{top:-1px}
.sec .amb{color:var(--blue)}
.sec > .wrap{padding-block:clamp(52px,7vw,96px)}
.grid2{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.24fr); gap:clamp(26px,4vw,58px); align-items:center}
.grid2.flip{grid-template-columns:minmax(0,1.24fr) minmax(0,.88fr)}
.grid2.flip > .art{order:-1}
@media(max-width:880px){.grid2,.grid2.flip{grid-template-columns:1fr; gap:32px} .grid2.flip > .art{order:0}}
.kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:14px; display:flex; align-items:center; gap:9px}
.kicker::before{content:""; width:22px; height:2px; background:var(--green)}
.sec h2{font-size:clamp(26px,3.4vw,40px); font-weight:700; line-height:1.12}
.sec .lede{margin-top:16px; color:var(--ink-2); font-size:17.5px; max-width:54ch}
ul.ticks{margin:24px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.ticks li{display:grid; grid-template-columns:22px 1fr; gap:13px; color:var(--ink-2); font-size:16.5px}
.ticks li::before{content:""; width:22px; height:22px; margin-top:3px; border-radius:7px; border:1px solid #BEDCF2;
  background:var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; margin-top:28px; border-top:1px solid var(--line); padding-top:4px}
.steps div{padding-top:15px}
.steps b{font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.04em; display:block; margin-bottom:6px; line-height:1;
  background:linear-gradient(140deg,#5CB4EE,#0F6FAF 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
.steps p{font-size:15px; color:var(--ink-2); line-height:1.45}
@media(max-width:520px){.steps{grid-template-columns:1fr; gap:0}.steps div{padding-top:13px}}
.more{display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:600; font-size:16.5px; text-decoration:none; color:var(--blue-deep)}
.more span{transition:transform .2s cubic-bezier(.4,0,.2,1)}
.more:hover span{transform:translateX(5px)}

/* макеты */
.art{min-width:0}
.mock{background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--lift-2); overflow:hidden; transition:box-shadow .3s, transform .3s}
.mock:hover{box-shadow:var(--lift-3); transform:translateY(-3px)}
.mock-head{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3); background:var(--blue-mist)}
.mock-head::before{content:""; width:42px; height:10px; flex:0 0 auto;
  background:radial-gradient(circle 5px at 5px 5px,#FF5F57 98%,transparent 100%),
             radial-gradient(circle 5px at 21px 5px,#FEBC2E 98%,transparent 100%),
             radial-gradient(circle 5px at 37px 5px,#28C840 98%,transparent 100%)}
/* рамка под реальный скриншот интерфейса */
.shot{position:relative; border-radius:16px; overflow:hidden; background:var(--paper); border:1px solid var(--line); box-shadow:var(--lift-3)}
.shot img{display:block; width:100%; height:auto}
.shot .crop{position:relative; overflow:hidden}
.shot .crop img{position:relative; display:block; width:100%; height:auto}
.shot figcaption{font-family:var(--mono); font-size:11px; color:var(--ink-3); padding:10px 14px; border-top:1px solid var(--line-soft); background:var(--blue-mist)}
.shot{margin:0}
.call{position:absolute; z-index:4; font-family:var(--body); font-size:13px; font-weight:600; color:#fff;
  background:var(--ink); padding:8px 13px; border-radius:12px; max-width:min(62%, 300px); line-height:1.35;
  box-shadow:0 12px 26px -10px rgba(8,34,54,.85)}
.call::after{content:""; position:absolute; left:20px; bottom:-5px; width:11px; height:11px; background:var(--ink); transform:rotate(45deg); border-radius:2px}
.call.below::after{bottom:auto; top:-5px}
@media(max-width:700px){.call{display:none}}
.mock-body{padding:18px}
.blocks{display:flex; flex-direction:column; gap:9px}
.blk{border:1px solid var(--line); border-radius:9px; padding:12px 13px; background:var(--paper); font-size:14.5px; color:var(--ink-2); display:flex; align-items:center; gap:11px; cursor:grab; transition:border-color .16s, background-color .16s, transform .16s, box-shadow .16s}
.blk:hover{border-color:var(--blue); background:var(--blue-mist); transform:translateX(3px); box-shadow:var(--lift-1)}
.blk.active{border-color:var(--blue); background:var(--blue-wash); color:var(--ink); box-shadow:var(--lift-1)}
.grip{width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); flex:0 0 auto}
.rows{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.row{display:flex; justify-content:space-between; gap:12px; background:var(--paper); padding:12px 14px; font-size:14.5px; transition:background-color .15s}
.row:hover{background:var(--blue-mist)}
.row b{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums}
.row span{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.chart{display:flex; align-items:flex-end; gap:5px; height:120px; padding-top:8px}
.chart i{flex:1; border-radius:4px 4px 0 0; background:#C6DFF2; transition:background-color .18s}
.chart i.peak{background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.chart i:hover{background:var(--blue)}
.chart-x{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:9px}
.field{border:1.5px solid var(--line); border-radius:10px; padding:12px 13px; font-size:15px; color:var(--ink-3); background:var(--paper)}

/* ============ доставляемость ============ */
.band{position:relative; overflow:hidden; background:linear-gradient(150deg,var(--blue-deep),var(--blue-night)); color:#fff; border-bottom:1px solid var(--line); isolation:isolate}
.band .amb{color:#fff}
.band .wrap{padding-block:clamp(86px,10vw,140px) clamp(86px,10vw,140px)}
.band .eyebrow{color:var(--sky)}
.band h2{color:#fff; font-size:clamp(26px,3.4vw,40px); max-width:19ch; font-weight:700; line-height:1.12}
.band .lede{color:#C9E0F1; margin-top:16px; max-width:56ch; font-size:17.5px}
.band-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:38px}
@media(max-width:800px){.band-grid{grid-template-columns:1fr}}
.band-item{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:22px; backdrop-filter:blur(8px); transition:background-color .22s, transform .22s}
.band-item:hover{background:rgba(255,255,255,.13); transform:translateY(-3px)}
.band-item .ico{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; margin-bottom:16px}
.band-item .ico svg{width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.band-item .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--sky); display:block; margin-bottom:12px}
.band-item h3{font-size:19px; color:#fff; font-weight:700}
.band-item p{color:#BFD8EC; font-size:15.5px; margin-top:9px}

/* ============ тарифы ============ */
.periods{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.per{font-family:var(--body); font-size:15px; font-weight:600; color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line); border-radius:12px; padding:12px 18px; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  box-shadow:var(--lift-1); transition:border-color .16s, color .16s, background-color .16s}
.per:hover{border-color:var(--blue); color:var(--ink)}
.per i{font-style:normal; font-family:var(--mono); font-size:11.5px; color:#fff; background:var(--green); border-radius:99px; padding:3px 8px}
.per[aria-pressed="true"]{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
.per[aria-pressed="true"] i{background:rgba(255,255,255,.22)}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:22px}
@media(max-width:880px){.plans{grid-template-columns:1fr}}
.plan{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--lift-1); transition:box-shadow .25s, transform .25s}
.plan:hover{box-shadow:var(--lift-2); transform:translateY(-3px)}
.plan.lead{border-color:var(--blue); box-shadow:var(--lift-2); position:relative}
.plan.lead::before{content:"Оптимальный"; position:absolute; top:-12px; left:26px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; background:var(--blue-deep); color:#fff; padding:5px 11px; border-radius:99px}
.plan h3{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-deep); font-weight:500}
.plan .price{font-family:var(--display); font-size:clamp(30px,3.6vw,40px); font-weight:800; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.plan .price small{font-family:var(--body); font-size:15px; font-weight:400; color:var(--ink-3); letter-spacing:0}
.plan .sub{font-size:14.5px; color:var(--ink-3); margin-top:-6px}
.plan ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; color:var(--ink-2); font-size:15.5px}
.plan ul li{display:grid; grid-template-columns:18px 1fr; gap:10px}
.plan ul li::before{content:""; width:16px; height:16px; margin-top:4px; border-radius:5px; border:1px solid #BEDCF2;
  background:var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.plan .btn{margin-top:auto; width:100%}
/* старший тариф — тёмная карточка, чтобы читался как верхний уровень */
.plan.pro{background:linear-gradient(162deg,#17527E 0%,#0A3355 100%); border-color:#0A3355; box-shadow:var(--lift-3)}
.plan.pro::before{content:"Максимум"; position:absolute; top:-12px; left:26px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; background:var(--green); color:#fff; padding:5px 11px; border-radius:99px}
.plan.pro{position:relative}
.plan.pro h3{color:#8FCDF5}
.plan.pro .price{color:#fff}
.plan.pro .price small{color:#A9C8DE}
.plan.pro .total{color:#A9C8DE}
.plan.pro ul{color:#D3E4F1}
.plan.pro ul li::before{border-color:rgba(255,255,255,.35); background-color:rgba(255,255,255,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.plan.pro .tierpick label{color:#9DBDD4}
.plan.pro .tierpick select{color:#fff; background-color:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFE2F0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.plan.pro .tierpick select option{color:#16202A; background:#fff}
.plan.pro:hover{transform:translateY(-4px)}
.stub{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:18px; display:block}
.plan .total{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:-8px; min-height:1.2em}
.tierpick{display:flex; flex-direction:column; gap:7px}
.tierpick label{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.tierpick select{font-family:var(--body); font-size:15.5px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line);
  border-radius:10px; padding:11px 12px; width:100%; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5A63' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px}
.tierpick select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(26,138,216,.14)}

/* ---- отзывы: лента с прокруткой ---- */
.q-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.q-nav{display:flex; gap:9px}
.q-nav button{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--paper); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--lift-1); transition:border-color .16s, background-color .16s}
.q-nav button:hover{border-color:var(--blue); background:var(--blue-mist)}
.q-nav svg{width:19px; height:19px; stroke:var(--ink-2); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.qrail{display:flex; gap:18px; margin-top:26px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 10px; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch}
.qrail::-webkit-scrollbar{display:none}
.qcard{flex:0 0 clamp(272px, 78vw, 400px); scroll-snap-align:start; background:var(--paper); border:1px solid var(--line);
  border-radius:18px; padding:26px; box-shadow:var(--lift-1); display:flex; flex-direction:column; gap:16px;
  transition:box-shadow .25s, transform .25s}
@media(min-width:900px){.qcard{flex-basis:calc((100% - 36px) / 3)}}
/* сброс общих стилей цитаты внутри карточки */
.qcard blockquote{margin:0; padding:0; border:0; background:none; box-shadow:none; font-size:inherit; transform:none}
.qcard blockquote::before{content:none}
.qcard blockquote:hover{box-shadow:none; transform:none}
.qcard:hover{box-shadow:var(--lift-2); transform:translateY(-3px)}
.qcard .stars{display:flex; gap:3px}
.qcard .stars svg{width:16px; height:16px; fill:#F5B301}
.qcard p{font-size:16px; color:var(--ink); line-height:1.6}
.qwho{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px}
.qav{width:46px; height:46px; border-radius:50%; flex:0 0 46px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--display); font-weight:700; font-size:18px; line-height:1; letter-spacing:0;
  background:linear-gradient(140deg,#5CB4EE,#0F6FAF); box-shadow:inset 0 -2px 6px rgba(0,0,0,.14)}
.qav.c2{background:linear-gradient(140deg,#7FD34B,#3F6A00)}
.qav.c3{background:linear-gradient(140deg,#8FA6FF,#3A4FA8)}
.qav.c4{background:linear-gradient(140deg,#FFC46B,#C77A00)}
.qav.c5{background:linear-gradient(140deg,#6FD9C8,#12786A)}
.qav.c6{background:linear-gradient(140deg,#F49ABF,#A83B6B)}
.qmeta{min-width:0}
.qmeta b{display:block; font-family:var(--display); font-size:15.5px; font-weight:600; color:var(--ink)}
.qmeta i{display:block; font-style:normal; font-size:13.5px; color:var(--ink-3)}
.placeholder-note{font-family:var(--mono); font-size:11.5px; color:#8A6D00; background:#FFF8DE; border:1px solid #E8C84A;
  border-radius:8px; padding:9px 13px; display:inline-block; margin-top:4px}

/* ---- нижний текстовый блок ---- */
.about-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,64px); margin-top:26px; align-items:start}
@media(max-width:880px){.about-grid{grid-template-columns:1fr; gap:30px}}
.about-lead{font-size:clamp(19px,2.1vw,23px); line-height:1.5; color:var(--ink); font-family:var(--display); font-weight:500; letter-spacing:-.015em}
.about-body{margin-top:18px; color:var(--ink-2); font-size:16.5px; display:flex; flex-direction:column; gap:14px}
.about-marks{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.about-marks span{font-family:var(--mono); font-size:12px; color:var(--blue-deep); background:var(--blue-wash);
  border:1px solid #CFE4F5; border-radius:99px; padding:8px 14px}
.faq{background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--lift-2); overflow:hidden}
.faq h3{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding:20px 24px 0; font-weight:500}
.faq details{border-top:1px solid var(--line-soft); margin-top:14px}
.faq details:first-of-type{margin-top:14px}
.faq summary{cursor:pointer; list-style:none; padding:17px 24px; font-family:var(--display); font-weight:600; font-size:16.5px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-deep)}
.faq summary::after{content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{padding:0 24px 20px; color:var(--ink-2); font-size:15.5px}
.calc-top{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.calc-top .n{font-family:var(--display); font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1}
.calc-top .l{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px}
.price-now{text-align:right}
.price-now .n{color:var(--ink)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--line); margin-top:26px; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--paper); border:3px solid var(--green); box-shadow:var(--lift-1); cursor:grab}
input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--paper); border:3px solid var(--green); box-shadow:var(--lift-1); cursor:grab}
.scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:12px; font-variant-numeric:tabular-nums}
.calc-incl{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.calc-incl span{font-size:14.5px; color:var(--ink-2); background:var(--blue-mist); border:1px solid var(--line); border-radius:99px; padding:7px 13px}
.calc-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px}
.stub{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}

/* ============ отзывы ============ */
.quotes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,26px); margin-top:32px}
@media(max-width:780px){.quotes{grid-template-columns:1fr}}
blockquote{margin:0; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--lift-1); font-size:17.5px; position:relative; transition:box-shadow .25s, transform .25s}
blockquote:hover{box-shadow:var(--lift-2); transform:translateY(-2px)}
blockquote::before{content:"„"; font-family:var(--display); font-size:64px; font-weight:800; color:var(--blue-wash); position:absolute; top:6px; right:18px; line-height:1}
blockquote footer{margin-top:14px; font-size:14px; color:var(--ink-3); font-family:var(--mono)}

/* ============ SEO-текст ============ */
.seotext{columns:2; column-gap:48px; color:var(--ink-2); font-size:16.5px; margin-top:22px}
.seotext p{break-inside:avoid; margin-bottom:15px}
@media(max-width:780px){.seotext{columns:1}}

/* ============ футер ============ */
.foot{background:var(--ink); color:#fff; position:relative}
.foot .wrap{padding-block:48px 32px; display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(20px,3vw,36px)}
@media(max-width:820px){.foot .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:470px){.foot .wrap{grid-template-columns:1fr}}
.foot h4{font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:#8FA3B2; margin:0 0 14px}
.foot ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.foot a{color:#C3D0DA; text-decoration:none; font-size:15.5px; transition:color .15s}
.foot a:hover{color:#fff}
.foot .about{color:#93A5B2; font-size:15px; margin-top:14px; max-width:32ch}
.copy{border-top:1px solid #2A3742}
.copy .wrap{display:block; padding-block:18px 28px; font-size:14px; color:#8FA3B2}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ============ страница «Возможности» ============ */
.crumbs{font-family:var(--mono); font-size:12px; color:var(--ink-3); padding-block:20px 0; margin-bottom:26px}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.crumbs li::after{content:"/"; margin-left:8px; color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--blue-deep)}
.crumbs [aria-current]{color:var(--ink-2)}

.hub{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line);
  background:linear-gradient(168deg,#E9F4FC 0%,#F7FBFE 58%,#FFFFFF 100%)}
.hub .amb{color:var(--blue)}
.hub .wrap{padding-block:14px clamp(44px,5.5vw,76px)}
.hub h1{font-size:clamp(30px,4.2vw,52px); line-height:1.06; font-weight:800; max-width:17ch; margin-top:16px}
.hub .lede{margin-top:18px; font-size:clamp(17px,1.5vw,19px); color:var(--ink-2); max-width:58ch}
.hub-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.jump{display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line)}
.jump a{font-family:var(--mono); font-size:12.5px; color:var(--blue-deep); background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:9px 15px; text-decoration:none; box-shadow:var(--lift-1);
  transition:border-color .16s, transform .16s}
.jump a:hover{border-color:var(--blue); transform:translateY(-2px)}

.fgroup{border-bottom:1px solid var(--line); position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(178deg,#FFFFFF 0%,#F7FBFE 100%)}
.fgroup:nth-of-type(even){background:linear-gradient(178deg,#F3F9FD 0%,#FFFFFF 100%)}
.fgroup > .wrap{padding-block:clamp(44px,5.5vw,76px)}
.fgroup h2{font-size:clamp(24px,3vw,34px); font-weight:700; line-height:1.15}
.fgroup .lede{margin-top:12px; color:var(--ink-2); font-size:17px; max-width:60ch}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:clamp(14px,2vw,22px); margin-top:30px}
.fcard{display:flex; flex-direction:column; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:24px; box-shadow:var(--lift-1); text-decoration:none; color:inherit;
  transition:box-shadow .25s, transform .25s, border-color .25s}
.fcard:hover{box-shadow:var(--lift-2); transform:translateY(-3px); border-color:#BEDCF2}
.fviz{position:relative; display:block; height:clamp(128px,15vw,150px); border-radius:13px; overflow:hidden;
  background:linear-gradient(152deg,#EAF4FC 0%,#F8FCFF 100%); border:1px solid #DCEAF6}
.fviz > svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.fcard .ic{position:absolute; left:12px; top:12px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:#fff; border:1px solid #DCEAF6; box-shadow:0 2px 6px rgba(15,60,95,.12)}
.fcard .ic svg{width:18px; height:18px}
/* мини-анимации внутри визуала */
.fviz .a1,.fviz .a2{transition:transform .45s cubic-bezier(.34,1.3,.5,1), opacity .35s}
.fcard:hover .fviz .a1{transform:translateX(7px)}
.fcard:hover .fviz .a2{transform:scaleX(1.22); transform-origin:left}
@keyframes vizpulse{0%,100%{opacity:.85}50%{opacity:.35}}
.fviz circle[opacity="0.2"],.fviz circle[opacity=".2"]{animation:vizpulse 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.fviz .a1,.fviz .a2{transition:none}}
.fcard .ic svg{fill:none; stroke:var(--blue-deep); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.fcard h3{font-size:19px; font-weight:700; line-height:1.28}
.fcard p{font-size:15.5px; color:var(--ink-2); line-height:1.55}
.fcard .go{margin-top:auto; padding-top:6px; font-weight:600; font-size:15.5px; color:var(--blue-deep);
  display:inline-flex; align-items:center; gap:7px}
.fcard .go span{transition:transform .2s}
.fcard[data-after]::after{content:attr(data-after); display:none}
:root[data-seo="on"] .fcard[data-after]::after{display:block; font-family:var(--mono); font-size:10.5px; line-height:1.4;
  background:#FFE24A; color:#332A00; border:1px solid #C9A800; border-radius:5px; padding:4px 7px; margin-top:4px}
.fcard:hover .go span{transform:translateX(5px)}

.allplans{background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--lift-1);
  padding:clamp(20px,3vw,30px); margin-top:34px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(18px,3vw,38px); align-items:center}
@media(max-width:820px){.allplans{grid-template-columns:1fr}}
.allplans h3{font-size:22px; font-weight:700}
.allplans p{margin-top:10px; color:var(--ink-2); font-size:16px}
.allplans ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px 18px}
.allplans li{display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:15.5px; color:var(--ink-2)}
.allplans li::before{content:""; width:20px; height:20px; margin-top:2px; border-radius:6px; border:1px solid #BEDCF2;
  background:var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

.cta-band{background:linear-gradient(150deg,var(--blue-deep),var(--blue-night)); color:#fff; position:relative; overflow:hidden; isolation:isolate}
.cta-band .amb{color:#fff}
.cta-band .wrap{padding-block:clamp(48px,6vw,80px); text-align:center}
.cta-band h2{color:#fff; font-size:clamp(25px,3.2vw,36px); font-weight:700; max-width:22ch; margin:0 auto}
.cta-band p{color:#C9E0F1; margin-top:14px; font-size:17px; max-width:52ch; margin-inline:auto}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}

/* ============ страница функции ============ */
.fhero{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line);
  background:linear-gradient(168deg,#E9F4FC 0%,#F7FBFE 56%,#FFFFFF 100%)}
.fhero .amb{color:var(--blue)}
.fhero .wrap{padding-block:14px clamp(40px,5vw,68px)}
.fhero-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr); gap:clamp(26px,4vw,56px); align-items:center; margin-top:8px}
@media(max-width:940px){.fhero-grid{grid-template-columns:1fr; gap:30px}}
.fhero h1{font-size:clamp(29px,3.9vw,48px); line-height:1.07; font-weight:800; max-width:18ch}
.fhero .lede{margin-top:16px; font-size:clamp(16.5px,1.4vw,18.5px); color:var(--ink-2); max-width:52ch}
.fhero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.spec{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.spec span{font-family:var(--mono); font-size:12px; color:var(--blue-deep); background:var(--paper);
  border:1px solid var(--line); border-radius:99px; padding:8px 13px}

.steps-big{counter-reset:st; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(16px,2.4vw,26px); margin-top:32px; list-style:none; padding:0}
.steps-big li{counter-increment:st; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:24px; box-shadow:var(--lift-1)}
.steps-big li::before{content:counter(st,decimal-leading-zero); display:block; font-family:var(--display); font-size:30px;
  font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:12px;
  background:linear-gradient(140deg,#5CB4EE,#0F6FAF 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
.steps-big h3{font-size:18px; font-weight:700; margin-bottom:7px}
.steps-big p{font-size:15.5px; color:var(--ink-2); line-height:1.55}

.frow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:clamp(26px,4vw,58px); align-items:center}
.frow.flip{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.frow.flip > .art{order:-1}
@media(max-width:880px){.frow,.frow.flip{grid-template-columns:1fr; gap:28px} .frow.flip > .art{order:0}}
.frow h2{font-size:clamp(23px,2.8vw,32px); font-weight:700; line-height:1.18}
.frow .lede{margin-top:14px; color:var(--ink-2); font-size:17px; max-width:54ch}

.panelviz{background:linear-gradient(152deg,#EAF4FC,#F8FCFF); border:1px solid #DCEAF6; border-radius:16px;
  padding:clamp(16px,2.4vw,26px); box-shadow:var(--lift-1)}
.panelviz svg{display:block; width:100%; height:auto}

.near{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px}
@media(max-width:980px){.near{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.near{grid-template-columns:1fr}}
.near a{display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:13px; padding:15px 17px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15.5px;
  box-shadow:var(--lift-1); transition:border-color .16s, transform .16s, box-shadow .16s}
.near a:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--lift-2)}
.near a svg{width:20px; height:20px; flex:0 0 20px; fill:none; stroke:var(--blue-deep); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

/* ============================================================
   Страница «Тарифы» — /tariffs.html
   Блок добавлен в конец общего styles.css. Классы, которые уже есть в общем
   файле (.plan, .per, .tierpick), уточняются только внутри .tarhero —
   блок тарифов на главной от них не меняется.
   ============================================================ */

/* --- первый экран: тарифы видны сразу, без пролистывания --- */
.tarhero .wrap{padding-block:10px clamp(34px,4vw,54px)}
.tarhero h1{font-size:clamp(27px,3.3vw,40px); max-width:none; margin-top:10px; line-height:1.08}
.tarhero .lede{margin-top:12px; max-width:66ch; font-size:clamp(16px,1.35vw,17.5px)}
.tarhero .crumbs{padding-block:16px 0; margin-bottom:14px}
.tarhero .periods{margin-top:20px}
.tarhero .plans{margin-top:16px}
.tarhero .more{margin-top:22px}
@media(max-width:880px){
  .tarhero .lede{font-size:16px}
  .tarhero .per{padding:10px 14px; font-size:14.5px}
  .tarhero .plans{gap:14px}
}

/* --- скидка за период: значение считает скрипт из таблицы цен --- */
.tarhero .per i:empty{display:none}
.perhint{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:10px}

/* --- карточка тарифа: строка «итого за период» --- */
.tarhero .plan .total{font-family:var(--body); font-size:14px; margin-top:-4px; min-height:20px}
.tarhero .tierpick{display:flex; flex-direction:column; gap:7px; margin-top:2px}
.tarhero .tierpick label{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.tarhero .tierpick select{appearance:none; font-family:var(--body); font-size:15.5px; font-weight:600; color:var(--ink);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/15px;
  border:1.5px solid var(--line); border-radius:10px; padding:11px 40px 11px 13px; cursor:pointer;
  transition:border-color .16s, box-shadow .16s}
.tarhero .tierpick select:focus-visible{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,138,216,.18)}

/* --- полная таблица тарифов --- */
.ptable-wrap{margin-top:30px; border:1px solid var(--line); border-radius:16px; background:var(--paper);
  box-shadow:var(--lift-1); overflow:auto; -webkit-overflow-scrolling:touch}
.ptable{border-collapse:collapse; width:100%; min-width:680px; font-variant-numeric:tabular-nums}
.ptable caption{text-align:left; padding:18px 20px 0; font-size:15px; color:var(--ink-3)}
.ptable th,.ptable td{padding:13px 18px; text-align:right; border-bottom:1px solid var(--line-soft); font-size:15.5px; white-space:nowrap}
.ptable thead th{position:sticky; top:0; z-index:1; background:var(--blue-wash); color:var(--blue-night);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid #CFE3F3}
.ptable th[scope="row"],.ptable thead th:first-child,.ptable td:first-of-type{text-align:left}
.ptable th[scope="row"]{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); white-space:nowrap}
.ptable tbody tr:hover{background:#F6FAFD}
.ptable tbody tr:last-child td,.ptable tbody tr:last-child th{border-bottom:0}
.ptable .p{color:var(--ink); font-weight:600}
.ptable .muted{color:var(--ink-3); font-weight:400}
.ptable .freerow td{color:var(--green-dark); font-weight:600}
.ptable [data-months].on{background:#EAF3FB}
.ptable thead th[data-months].on{background:var(--blue-deep); color:#fff; border-bottom-color:var(--blue-deep)}
.ptable .grp th{background:#F4F8FC; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; text-align:left; padding:9px 18px}
.tnote{font-size:14.5px; color:var(--ink-3); margin-top:14px; max-width:70ch}
@media(max-width:760px){.ptable th,.ptable td{padding:11px 13px; font-size:14.5px}}

/* --- «что входит»: ровно 3 × 3 --- */
.incl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px}
@media(max-width:820px){.incl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.incl{grid-template-columns:1fr}}
.incl a{display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:13px; padding:15px 17px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15.5px;
  box-shadow:var(--lift-1); transition:border-color .16s, transform .16s, box-shadow .16s}
.incl a:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--lift-2)}
.incl a svg{width:21px; height:21px; flex:0 0 21px; fill:none; stroke:var(--blue-deep); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

/* --- иллюстрации страницы --- */
.tviz{background:linear-gradient(152deg,#EAF4FC 0%,#F9FCFE 100%); border:1px solid #DCEAF6;
  border-radius:20px; padding:clamp(16px,2.4vw,26px); box-shadow:var(--lift-1)}
.tviz svg{display:block; width:100%; height:auto}

/* --- «как считается цена»: три ступени --- */
.calc{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,20px); margin-top:32px}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc-step{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:22px; box-shadow:var(--lift-1); transition:box-shadow .22s, transform .22s}
.calc-step:hover{box-shadow:var(--lift-2); transform:translateY(-3px)}
.calc-step .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-deep); display:block; margin-bottom:14px}
.calc-step h3{font-size:19px; font-weight:700; margin-bottom:9px}
.calc-step p{color:var(--ink-2); font-size:15.5px}
.calc-step .sv{display:block; height:58px; margin-bottom:16px}
.calc-step .sv svg{display:block; height:100%; width:auto}

/* --- доступность --- */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Названия тарифов в карточках — H2: в первом экране они идут сразу после H1,
   и уровень заголовка не должен перепрыгиваться. Вид тот же, что у .plan h3. */
.tarhero .plan h2{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-deep); font-weight:500; line-height:1.2}
.tarhero .plan.pro h2{color:#8FCDF5}

/* ============================================================
   Страница «Партнёрская программа» — /affiliate/
   Блок добавлен в конец общего styles.css, чужие правила не трогались.
   ============================================================ */

/* --- первый экран: цифры оффера видны сразу --- */
.afhero .wrap{padding-block:10px clamp(34px,4vw,56px)}
.afhero h1{font-size:clamp(27px,3.3vw,42px); max-width:none; margin-top:10px; line-height:1.08}
.afhero .lede{margin-top:12px; max-width:62ch; font-size:clamp(16px,1.35vw,17.5px)}
.afhero .crumbs{padding-block:16px 0; margin-bottom:14px}

.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,20px); margin-top:26px}
@media(max-width:760px){.facts{grid-template-columns:1fr}}
.fact{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px 24px;
  box-shadow:var(--lift-1); transition:box-shadow .22s, transform .22s}
.fact:hover{box-shadow:var(--lift-2); transform:translateY(-3px)}
.fact b{display:block; font-family:var(--display); font-size:clamp(32px,4vw,44px); font-weight:800;
  letter-spacing:-.035em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.fact span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue-deep); margin-bottom:12px}
.fact p{margin-top:10px; color:var(--ink-2); font-size:15px; line-height:1.45}
.fact.accent{background:linear-gradient(162deg,#17527E 0%,#0A3355 100%); border-color:#0A3355; box-shadow:var(--lift-3)}
.fact.accent b{color:#fff}
.fact.accent span{color:#8FCDF5}
.fact.accent p{color:#C3DAEA}
.afhero .hub-actions{margin-top:26px}

/* --- калькулятор комиссии --- */
.pcalc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(18px,3vw,36px);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--lift-2);
  padding:clamp(20px,3vw,32px); margin-top:30px; align-items:center}
@media(max-width:880px){.pcalc{grid-template-columns:1fr; gap:24px}}
.pfield{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.pfield:last-of-type{margin-bottom:0}
.pfield label{font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.pfield select,.pfield input{appearance:none; font-family:var(--body); font-size:16px; font-weight:600; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:11px; padding:13px 14px; width:100%;
  transition:border-color .16s, box-shadow .16s}
.pfield select{padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px}
.pfield select:focus-visible,.pfield input:focus-visible{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,138,216,.18)}
.pfield .hint{font-size:13.5px; color:var(--ink-3)}

.pout{background:linear-gradient(160deg,#EAF4FC 0%,#F8FCFF 100%); border:1px solid #DCEAF6; border-radius:16px; padding:clamp(18px,2.6vw,26px)}
.pout dl{margin:0; display:flex; flex-direction:column; gap:16px}
.pout div{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:16px; border-bottom:1px solid #D8E8F4}
.pout div:last-child{padding-bottom:0; border-bottom:0}
.pout dt{font-size:15.5px; color:var(--ink-2)}
.pout dd{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.pout div.total dd{color:var(--green-dark); font-size:clamp(25px,2.9vw,34px)}
.pnote{font-size:14px; color:var(--ink-3); margin-top:16px; max-width:70ch}

/* --- условия программы --- */
.terms{margin-top:28px; border:1px solid var(--line); border-radius:16px; background:var(--paper);
  box-shadow:var(--lift-1); overflow:hidden}
.terms table{border-collapse:collapse; width:100%}
.terms th,.terms td{padding:16px 22px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:16px; vertical-align:top}
.terms tr:last-child th,.terms tr:last-child td{border-bottom:0}
.terms th{font-family:var(--body); font-weight:600; color:var(--ink-2); width:38%; white-space:normal}
.terms td{font-family:var(--display); font-weight:700; color:var(--ink)}
.terms tr:hover{background:#F6FAFD}
@media(max-width:620px){
  .terms th,.terms td{display:block; width:auto; padding:14px 18px; border-bottom:0}
  .terms th{padding-bottom:4px; font-size:14.5px}
  .terms td{padding-top:0; padding-bottom:16px; border-bottom:1px solid var(--line-soft)}
}

/* --- кому подходит --- */
.whofor{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,2vw,18px); margin-top:30px}
@media(max-width:760px){.whofor{grid-template-columns:1fr}}
.who{display:flex; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:22px; box-shadow:var(--lift-1); transition:border-color .16s, transform .16s, box-shadow .16s}
.who:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--lift-2)}
.who .ic{flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:var(--blue-wash);
  border:1px solid #CFE3F3; display:grid; place-items:center}
.who .ic svg{width:22px; height:22px; fill:none; stroke:var(--blue-deep); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.who h3{font-size:18px; font-weight:700; margin-bottom:7px}
.who p{color:var(--ink-2); font-size:15.5px; line-height:1.5}

/* --- что получает клиент: сетка ссылок 3 × 2 --- */
.gives{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px}
@media(max-width:820px){.gives{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gives{grid-template-columns:1fr}}
.gives a{display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:13px; padding:15px 17px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15.5px;
  box-shadow:var(--lift-1); transition:border-color .16s, transform .16s, box-shadow .16s}
.gives a:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--lift-2)}
.gives a svg{width:21px; height:21px; flex:0 0 21px; fill:none; stroke:var(--blue-deep); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.twolinks{display:flex; flex-wrap:wrap; gap:22px; margin-top:24px}

/* На узком экране плитки оффера становятся компактными строками,
   чтобы все три цифры попадали в первый экран телефона. */
@media(max-width:760px){
  .facts{gap:10px; margin-top:20px}
  .fact{padding:15px 18px; display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:center}
  .fact span{margin-bottom:0; grid-column:1}
  .fact b{grid-column:2; font-size:27px; text-align:right}
  .fact p{grid-column:1 / -1; margin-top:7px; font-size:14px}
}

/* Три шага стоят в узкой колонке — разворачиваем их в вертикальный список,
   иначе текст режется на строки по два слова. Правило привязано к странице. */
#how .steps{grid-template-columns:1fr; gap:0; padding-top:0; margin-top:26px}
#how .steps div{display:grid; grid-template-columns:36px 1fr; gap:16px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--line-soft)}
#how .steps div:last-child{border-bottom:0; padding-bottom:0}
#how .steps b{font-size:27px; margin-bottom:0; line-height:1.05}
#how .steps p{font-size:15.5px; line-height:1.5}

/* ============================================================
   Страница «API» — /api.html
   Блок добавлен в конец общего styles.css, чужие правила не трогались.
   Все классы страницы начинаются с префиксов, которых на сайте ещё нет:
   .api*, .doc*, .toc*, .method*, .code*, .dtable.
   ============================================================ */

/* --- первый экран --- */
.apihero .wrap{padding-block:10px clamp(34px,4vw,56px)}
.apihero .crumbs{padding-block:16px 0; margin-bottom:14px}
.apihero h1{font-size:clamp(28px,3.4vw,44px); max-width:none; margin-top:10px; line-height:1.07}
.apihero .lede{margin-top:14px; max-width:56ch; font-size:clamp(16px,1.35vw,17.5px)}
.apihero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(24px,4vw,56px); align-items:center}
@media(max-width:980px){.apihero-grid{grid-template-columns:1fr}}
.apifacts{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding:0; list-style:none}
.apifacts li{font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--blue-night);
  background:var(--paper); border:1px solid #CFE3F3; border-radius:99px; padding:7px 13px; box-shadow:var(--lift-1)}
.apifacts li b{font-weight:600}
.apifacts a{color:inherit}
.apihero .hub-actions{margin-top:24px}

/* витрина интерфейсов справа */
.apishow{background:linear-gradient(160deg,#123D5E 0%,#0A2740 100%); border:1px solid #0A2740; border-radius:18px;
  box-shadow:var(--lift-3); overflow:hidden; color:#D6E6F2}
.apishow-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.1)}
.apishow-bar i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22)}
.apishow-bar span{margin-left:8px; font-family:var(--mono); font-size:11.5px; color:#8FB3CE}
.apishow ul{list-style:none; margin:0; padding:10px 8px}
.apishow li a{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:9px 12px;
  border-radius:9px; text-decoration:none; color:#E6F0F8; transition:background-color .15s}
.apishow li a:hover{background:rgba(255,255,255,.07)}
.apishow code{font-family:var(--mono); font-size:13.5px; color:#9FD4F7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.apishow code em{font-style:normal; color:#6F93AE}
.apishow small{font-family:var(--mono); font-size:11px; color:#8FB3CE; white-space:nowrap}
@media(max-width:420px){.apishow code{font-size:12.5px}}

/* --- раскладка документации: оглавление + текст --- */
.docs{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start;
  padding-block:clamp(36px,5vw,64px)}
@media(max-width:980px){.docs{grid-template-columns:minmax(0,1fr); gap:20px}}

.docs > nav{position:sticky; top:84px; align-self:start; min-width:0}
@media(max-width:980px){.docs > nav{position:static}}
.toc{max-height:calc(100vh - 104px); overflow:auto; overscroll-behavior:contain;
  background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--lift-1); padding:14px 10px}
.toc > summary{display:none}
.toc ol{list-style:none; margin:0; padding:0}
.toc > ol > li + li{margin-top:2px}
.toc a{display:block; text-decoration:none; color:var(--ink-2); font-size:14.5px; line-height:1.35;
  padding:7px 10px; border-radius:8px; transition:background-color .15s, color .15s}
.toc a:hover{background:var(--blue-wash); color:var(--ink)}
.toc a.on{background:var(--blue-wash); color:var(--blue-deep); font-weight:600}
.toc ol ol{margin:2px 0 6px 10px; padding-left:8px; border-left:1px solid var(--line)}
.toc ol ol a{font-size:13.5px; padding:5px 10px; color:var(--ink-3)}
.toc .tochead{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding:4px 10px 8px}
@media(max-width:980px){
  .toc{max-height:none; padding:0}
  .toc > summary{display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none;
    padding:14px 16px; font-family:var(--display); font-weight:700; font-size:16px}
  .toc > summary::-webkit-details-marker{display:none}
  .toc > summary::after{content:""; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6FAF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .2s}
  .toc[open] > summary::after{transform:rotate(180deg)}
  .toc > ol{padding:0 10px 12px}
  .toc .tochead{display:none}
}

/* --- текст документации --- */
.doc{min-width:0}
.doc > section{scroll-margin-top:84px}
.doc > section + section{margin-top:clamp(44px,5vw,64px); padding-top:clamp(36px,4vw,52px); border-top:1px solid var(--line)}
.doc h2{font-size:clamp(24px,2.8vw,32px); font-weight:700; line-height:1.15}
.doc .lede{margin-top:12px; color:var(--ink-2); font-size:16.5px; max-width:68ch}
.doc p{max-width:72ch}
.doc p + p{margin-top:12px}
.doc h3{font-size:19px; font-weight:700; line-height:1.3}
.doc code{font-family:var(--mono); font-size:.9em; background:var(--blue-wash); color:var(--blue-night);
  border-radius:5px; padding:1px 6px; overflow-wrap:anywhere}

/* адрес интерфейса */
.endpoint{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:12px 14px;
  background:#0E2F4A; border-radius:12px; color:#D6E6F2}
.endpoint span{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8FB3CE}
.endpoint code{background:transparent; color:#9FD4F7; font-size:14.5px; padding:0; flex:1 1 auto; min-width:0}

/* метод */
.method{margin-top:22px; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--lift-1); overflow:hidden; scroll-margin-top:84px}
.method-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px; background:linear-gradient(180deg,#F7FBFE,#FFFFFF); border-bottom:1px solid var(--line-soft)}
.method-head code{background:#EFF9E0; color:#3F6B00; border:1px solid #CDE8A6; font-size:13px; padding:3px 9px}
.method-body{padding:4px 20px 20px}
.method-body .cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:18px 0 8px}
.method-body .note{font-size:14.5px; color:var(--ink-3); margin-top:10px}
@media(max-width:560px){.method-head,.method-body{padding-inline:14px}}

/* таблица параметров */
.dtable-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.dtable{border-collapse:collapse; width:100%; font-size:15px}
.dtable th,.dtable td{text-align:left; vertical-align:top; padding:11px 12px; border-bottom:1px solid var(--line-soft)}
.dtable thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; padding-top:14px}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td:first-child{width:30%; min-width:170px}
.dtable td:first-child code{background:transparent; color:var(--blue-deep); font-weight:600; padding:0; font-size:14px}
.dtable .req{display:inline-block; margin-left:6px; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:#9A3B12; background:#FFF1E8; border:1px solid #F6CFB8; border-radius:5px; padding:1px 5px;
  vertical-align:1px; white-space:nowrap}
.dtable td{color:var(--ink-2); line-height:1.5}
.dtable ul{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.dtable li{padding-left:14px; position:relative}
.dtable li::before{content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:#A9CDE8}
@media(max-width:620px){
  .dtable thead{display:none}
  .dtable tr{display:block; padding:10px 0; border-bottom:1px solid var(--line-soft)}
  .dtable tbody tr:last-child{border-bottom:0}
  .dtable td{display:block; width:auto; min-width:0; border:0; padding:3px 0}
  .dtable td:first-child{width:auto}
}

/* блок кода: полоска с языком и кнопкой копирования, код ниже — ничего не наезжает */
.code{position:relative; margin:0; background:#0E2F4A; border-radius:12px; overflow:hidden; min-width:0}
.code-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px;
  padding:5px 8px 5px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.code-bar span{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#6F93AE}
.code pre{margin:0; padding:14px 16px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  font-family:var(--mono); font-size:13.5px; line-height:1.6; color:#D6E6F2; tab-size:2}
.doc .code code,.code code{background:transparent; color:inherit; padding:0; border-radius:0; font-size:inherit; overflow-wrap:normal}
.code .t{color:#8FCDF5}
.code .a{color:#F2C879}
.code .v{color:#B7E86A}
.code .c{color:#6F93AE}
.copybtn{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#CFE2F0; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:7px; padding:5px 9px; cursor:pointer; transition:background-color .15s}
.copybtn:hover{background:rgba(255,255,255,.16)}
.copybtn:focus-visible{outline:2px solid #8FCDF5; outline-offset:2px}
.copybtn[hidden]{display:none}
.nw{white-space:nowrap}

/* обратные вызовы */
.cbsteps{counter-reset:cb; list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.cbsteps li{counter-increment:cb; position:relative; padding:16px 18px 16px 58px; background:var(--paper);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--lift-1); color:var(--ink-2); line-height:1.55}
.cbsteps li::before{content:counter(cb); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:8px;
  background:var(--blue-deep); color:#fff; font-family:var(--display); font-weight:800; font-size:15px;
  display:grid; place-items:center}
.cbpair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px}
@media(max-width:760px){.cbpair{grid-template-columns:minmax(0,1fr)}}
.cbpair > div{min-width:0}
.cbpair .cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.doc .tablecard{margin-top:16px; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--lift-1); padding:4px 18px 8px}
.doc .sub{margin-top:30px}

/* соседние страницы — один ряд, как на страницах возможностей */
.doc .near{margin-top:18px}

/* ============================================================
   Страница «О сервисе» — /about_us/our_company.html
   Блок добавлен в конец общего styles.css. Страница почти целиком
   собрана из уже существующих классов (.hub, .facts, .who, .incl, .terms);
   ниже — только раскладка первого экрана и текстовый блок.
   ============================================================ */
.abhero .wrap{padding-block:10px clamp(34px,4vw,56px)}
.abhero .crumbs{padding-block:16px 0; margin-bottom:14px}
.abhero h1{font-size:clamp(28px,3.4vw,44px); max-width:none; margin-top:10px; line-height:1.07}
.abhero .lede{margin-top:14px; max-width:62ch; font-size:clamp(16px,1.35vw,17.5px)}
.abhero .hub-actions{margin-top:24px}
.abhero .facts{margin-top:clamp(26px,3vw,40px)}

.prose{margin-top:18px}
.prose p{max-width:70ch; color:var(--ink-2); font-size:17px; line-height:1.65}
.prose p + p{margin-top:14px}
.prose a{color:var(--blue-deep); text-decoration-thickness:1px; text-underline-offset:3px}
.prose a:hover{color:var(--blue-night)}

.doclinks{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none}
.doclinks a{display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line);
  border-radius:99px; padding:9px 15px; text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:500;
  box-shadow:var(--lift-1); transition:border-color .16s, color .16s}
.doclinks a:hover{border-color:var(--blue); color:var(--ink)}
.terms td a{color:var(--blue-deep)}

/* ============================================================
   ШАПКА, ВАРИАНТ B — «ПЛАВАЮЩАЯ КАПСУЛА»
   Блок стоит последним в общем styles.css и переопределяет прежние
   правила шапки (.site-head, .nav, .head-cta, .brand в шапке) на всех
   ширинах экрана. Разметка шапки прежняя: header.site-head > .wrap >
   .brand + nav.nav + div.head-cta — сборщику ничего перестраивать не нужно.
   ============================================================ */

:root{--capsule-gap:12px; --capsule-h:64px; --capsule-offset:88px}   /* offset = gap + высота + gap */

/* Полоса шапки прозрачная и не занимает места в потоке: первый экран
   страницы уходит под неё, и капсула висит поверх героя. */
.site-head{position:sticky; top:0; z-index:80; background:transparent; border-bottom:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  padding:var(--capsule-gap) clamp(8px,2vw,24px); margin-bottom:calc(-1 * var(--capsule-offset));
  pointer-events:none}

.site-head .wrap{pointer-events:auto; box-sizing:border-box; max-width:1200px; height:var(--capsule-h); margin:0 auto;
  padding:0 10px 0 24px; display:flex; align-items:center; justify-content:flex-start; gap:16px;
  border-radius:999px; background:rgba(255,255,255,.92); border:1px solid rgba(221,229,237,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 2px 6px rgba(12,48,76,.06), 0 14px 34px -18px rgba(9,42,68,.5)}

.site-head .brand{flex:0 0 auto}
.site-head .brand svg{height:38px}

/* Меню по центру капсулы, пункты — «таблетки» */
.site-head .nav{margin:0 auto; gap:4px}
.site-head .nav a{display:inline-flex; align-items:center; height:44px; padding:0 16px; border-radius:999px;
  color:var(--ink-2); font-size:15.5px; font-weight:500; text-decoration:none;
  transition:background-color .16s, color .16s}
.site-head .nav a::after{content:none}
.site-head .nav a:hover{background:var(--blue-mist); color:var(--ink)}
.site-head .nav a[aria-current="page"]{background:var(--blue-wash); color:var(--blue-deep); font-weight:600}

/* Кнопки справа */
.site-head .head-cta{flex:0 0 auto; margin-left:0; gap:4px}
.site-head .head-cta .btn{height:44px; min-height:44px; border-radius:999px; font-size:15px}
.site-head .head-cta .btn-ghost{display:inline-flex; padding:0 16px; background:transparent; border-color:transparent; box-shadow:none; color:var(--ink)}
.site-head .head-cta .btn-ghost:hover{background:var(--blue-mist); border-color:transparent; color:var(--ink)}
.site-head .head-cta .btn-primary{padding:0 22px; box-shadow:0 8px 20px -10px rgba(107,174,0,.95), inset 0 -2px 0 rgba(0,0,0,.14)}

.site-head a:focus-visible,.site-head button:focus-visible,.site-head summary:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* Состояние «вошёл»: кружок с инициалом и меню аккаунта на <details>, без скрипта */
.site-head .wrap{position:relative}
.site-head .acct{position:static}
.site-head .acct > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 10px 0 4px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-2)}
.site-head .acct > summary::-webkit-details-marker{display:none}
.site-head .acct[open] > summary{border-color:#B9D9F1; box-shadow:0 0 0 3px rgba(26,138,216,.14)}
.site-head .acct .ava{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:var(--blue-wash); color:var(--blue-deep); font-family:var(--display); font-weight:700; font-size:15px}
.site-head .acct .caret{width:16px; height:16px; transition:transform .2s}
.site-head .acct[open] .caret{transform:rotate(180deg)}
.site-head .acct-menu{position:absolute; right:8px; top:calc(100% + 8px); width:min(264px, calc(100vw - 32px)); box-sizing:border-box; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--lift-2)}
.site-head .acct-menu .acct-name{padding:10px 12px 12px; margin-bottom:6px; border-bottom:1px solid var(--line-soft)}
.site-head .acct-menu .acct-name b{display:block; font-size:15px; font-weight:600; color:var(--ink)}
.site-head .acct-menu .acct-name span{display:block; margin-top:2px; font-size:13px; color:var(--ink-3)}
.site-head .acct-menu a{display:flex; align-items:center; gap:10px; height:44px; padding:0 12px; border-radius:9px;
  color:var(--ink); text-decoration:none; font-size:15px; font-weight:500}
.site-head .acct-menu a:hover{background:var(--blue-mist)}
.site-head .acct-menu hr{border:0; height:1px; margin:6px 4px; background:var(--line-soft)}

/* Первый экран каждой страницы начинается под капсулой. У секций первого
   экрана (.hero, .hub, .fhero) свой отступ стоит на .wrap, у самой секции
   его нет — поэтому правило ничего не перетирает. */
main > :first-child{padding-top:var(--capsule-offset)}

/* ---- 881–1100 px: меню остаётся, всё в капсуле чуть плотнее ----
   В базовом файле меню пряталось уже на 1100 px — для капсулы это рано:
   место есть до 880 px. Правило ниже возвращает меню (display:flex). */
@media(max-width:1100px){
  .site-head .wrap{padding-left:18px; gap:10px}
  .site-head .brand svg{height:34px}
  .site-head .nav{display:flex; gap:2px}
  .site-head .nav a{padding:0 10px; font-size:15px}
  .site-head .head-cta .btn-ghost{padding:0 12px}
  .site-head .head-cta .btn-primary{padding:0 16px}
}
/* ---- 1000 px и уже (05.10.2026: в меню 6 пунктов): меню прячется, в капсуле бургер ---- */
@media(max-width:1000px){
  .site-head .nav{display:none}
  .site-head .head-cta{margin-left:auto}
}

/* ---- телефон ---- */
@media(max-width:560px){
  :root{--capsule-gap:8px; --capsule-h:56px; --capsule-offset:72px}
  .site-head{padding-inline:8px}
  .site-head .wrap{padding:0 6px 0 16px; gap:6px}
  .site-head .brand svg{height:28px}
  .site-head .head-cta{gap:2px}
  .site-head .head-cta .btn{height:44px; min-height:44px; font-size:13.5px}
  .site-head .head-cta .btn-ghost{padding:0 10px; color:var(--blue-deep)}
  .site-head .head-cta .btn-primary{padding:0 14px}
}
@media(max-width:410px){
  .site-head .wrap{padding:0 4px 0 12px; gap:4px}
  .site-head .brand svg{height:23px}
  .site-head .head-cta .btn{height:44px; min-height:44px; font-size:12.5px}
  .site-head .head-cta .btn-ghost{padding:0 8px}
  .site-head .head-cta .btn-primary{padding:0 11px}
}
/* 380 px и уже: в капсуле логотип, «Войти», «Начать бесплатно» и бургер сборщика */
@media(max-width:380px){
  .site-head{padding-inline:6px}
  .site-head .wrap{padding:0 4px 0 10px; gap:2px}
  .site-head .brand svg{height:20px}
  .site-head .head-cta{gap:0}
  .site-head .head-cta .btn{font-size:12px}
  .site-head .head-cta .btn-ghost{padding:0 6px}
  .site-head .head-cta .btn-primary{padding:0 9px}
}
@media (prefers-reduced-motion:reduce){.site-head .nav a,.site-head .acct .caret{transition:none}}

/* ===== Финальный призыв (.cta-band) — карточка на белом, вариант A =====
   Меняет вид блока «Попробуйте…» на всех страницах сразу. Разметка прежняя:
   section.cta-band > .amb + .wrap > h2 + p + .cta-actions.
   Синяя полоса на всю ширину стала скруглённой карточкой с белым полем вокруг,
   поэтому синий больше не стыкуется с тёмным подвалом. */
.cta-band{background:var(--paper); color:var(--ink); overflow:visible; isolation:auto;
  padding:clamp(40px,5vw,64px) clamp(16px,4vw,44px) clamp(56px,7vw,96px)}
.cta-band > .amb{display:none}
.cta-band .wrap{max-width:1172px; margin:0 auto; padding:clamp(32px,4.5vw,56px) clamp(24px,5vw,64px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t a" "d a"; column-gap:48px; align-items:center;
  text-align:left; color:#fff; border-radius:28px; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#1574BA 0%,var(--blue-deep) 55%,#0D5F98 100%);
  box-shadow:0 30px 60px -36px rgba(15,111,175,.75)}
.cta-band .wrap::before,.cta-band .wrap::after{content:""; position:absolute; z-index:-1; border-radius:50%; border:2px solid #fff; pointer-events:none}
.cta-band .wrap::before{width:340px; height:340px; top:-170px; right:-60px; opacity:.14}
.cta-band .wrap::after{width:200px; height:200px; bottom:-120px; right:260px; opacity:.10}
.cta-band h2{grid-area:t; align-self:end; margin:0; max-width:none; color:#fff; letter-spacing:-.01em; line-height:1.15; text-wrap:balance}
.cta-band p{grid-area:d; align-self:start; margin:12px 0 0; max-width:52ch; color:#F2F8FD}
.cta-band .cta-actions{grid-area:a; margin:0; justify-content:flex-end; flex-wrap:nowrap}
.cta-band .btn-primary{box-shadow:0 8px 24px -10px rgba(40,70,0,.8), inset 0 -2px 0 rgba(0,0,0,.14)}
.cta-band .btn-onblue{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); color:#fff}
.cta-band .btn-onblue:hover{background:rgba(255,255,255,.22); border-color:#fff; color:#fff}
.cta-band .btn:focus-visible{outline:3px solid #fff; outline-offset:3px}
@media(max-width:1180px){
  .cta-band .wrap{grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "d" "a"}
  .cta-band .cta-actions{justify-content:flex-start; flex-wrap:wrap; margin-top:24px}
  .cta-band .wrap::after{right:40%}
}
@media(max-width:560px){
  .cta-band .wrap{border-radius:22px}
  .cta-band .cta-actions{flex-direction:column; align-items:stretch}
  .cta-band .cta-actions .btn{width:100%}
  .cta-band .wrap::before{width:220px; height:220px; top:-120px; right:-80px}
  .cta-band .wrap::after{display:none}
}
/* ============================================================
   Страница регистрации — /user/reg.html
   Синий первый экран с заголовком, белая карточка формы по центру
   наезжает на светлую часть, ниже — что входит в Free.
   Все классы с префиксом .reg / .reghero, общие классы сайта не переопределяются.
   ============================================================ */
.reghero{position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background:linear-gradient(158deg,var(--blue) 0%,var(--blue-deep) 55%,var(--blue-night) 100%)}
.reghero .amb{color:#fff}
.reg-head{position:relative; z-index:2; text-align:center; padding-block:clamp(20px,2.6vw,32px) clamp(150px,13vw,186px)}
.reg-head .kicker{justify-content:center; color:#fff; margin-bottom:14px}
.reg-head h1{color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.015em; max-width:none; margin:0}
.reg-sub{margin:12px auto 0; max-width:52ch; text-wrap:balance; color:#EEF6FC; font-size:clamp(16px,1.4vw,18px); line-height:1.5}
.reg-body{position:relative; z-index:2; background:var(--ground); padding-bottom:clamp(56px,7vw,96px)}
.reg-body .wrap{display:flex; flex-direction:column; align-items:center}

.reg-card{width:100%; max-width:520px; margin-top:calc(-1 * clamp(110px,10vw,150px)); position:relative;
  background:var(--paper); border-radius:24px; padding:clamp(24px,3.2vw,40px);
  box-shadow:0 44px 80px -40px rgba(6,40,66,.6), 0 14px 30px -14px rgba(6,40,66,.22)}

.reg-alert{margin:0 0 20px; border:1px solid #F1C0B4; background:#FFF5F2; border-radius:14px; padding:14px 16px; color:#7A2716; font-size:15px; line-height:1.45}
.reg-alert[hidden]{display:none}
.reg-alert:focus{outline:none; box-shadow:0 0 0 4px rgba(200,55,29,.14)}
.reg-alert-t{margin:0 0 6px; font-weight:700}
.reg-alert ul{margin:0; padding-left:18px}
.reg-alert li + li{margin-top:3px}
.reg-alert a{color:#7A2716; text-underline-offset:2px}
.reg-alert.is-ok{border-color:#CFE3B0; background:#F5FAEC; color:#36520A}

.reg-form{margin:0; display:flex; flex-direction:column; gap:16px}
.reg-field label{display:block; font-weight:600; font-size:15px; color:var(--ink); margin-bottom:7px}
.reg-field input{width:100%; height:52px; border:1.5px solid var(--line); border-radius:12px; padding:0 14px; font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  transition:border-color .16s, box-shadow .16s}
.reg-field input::placeholder{color:#9AA8B4}
.reg-field input:hover{border-color:#C3D1DD}
.reg-field input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(26,138,216,.16)}
.reg-field input[aria-invalid="true"]{border-color:#C8371D; box-shadow:0 0 0 4px rgba(200,55,29,.10)}
.reg-hint{margin:6px 0 0; font-size:13.5px; line-height:1.4; color:var(--ink-3)}
.reg-err{margin:6px 0 0; font-size:13.5px; line-height:1.4; color:#B42318; font-weight:500}
.reg-err[hidden]{display:none}

.reg-pass{position:relative}
.reg-pass input{padding-right:54px}
.reg-pass-toggle{position:absolute; right:4px; top:4px; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--ink-3);
  display:grid; place-items:center; cursor:pointer; transition:color .16s, background-color .16s}
.reg-pass-toggle:hover{color:var(--ink); background:var(--blue-mist)}
.reg-pass-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.reg-pass-toggle svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.reg-pass-toggle .ic-hide{display:none}
.reg-pass-toggle[aria-pressed="true"] .ic-show{display:none}
.reg-pass-toggle[aria-pressed="true"] .ic-hide{display:block}

.reg-checks{display:flex; flex-direction:column; gap:12px; margin-top:2px}
.reg-check{position:relative; display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; font-size:15px; line-height:1.45; color:var(--ink-2); cursor:pointer}
.reg-check input{position:absolute; left:0; top:0; z-index:1; width:22px; height:22px; margin:0; opacity:0; cursor:pointer}
.reg-check .box{width:22px; height:22px; border:1.5px solid #B4C3CF; border-radius:6px; background:var(--paper); display:grid; place-items:center; transition:background-color .14s, border-color .14s, box-shadow .14s}
.reg-check .box::after{content:""; width:10px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg); opacity:0}
.reg-check input:checked + .box{background:var(--blue-deep); border-color:var(--blue-deep)}
.reg-check input:checked + .box::after{opacity:1}
.reg-check input:focus-visible + .box{box-shadow:0 0 0 4px rgba(26,138,216,.25)}
.reg-check input[aria-invalid="true"] + .box{border-color:#C8371D; box-shadow:0 0 0 3px rgba(200,55,29,.12)}
.reg-check a{color:var(--blue-deep); text-underline-offset:2px}
.reg-check a:hover{color:var(--blue-night)}

.reg-captcha{min-height:78px}
.reg-submit{width:100%}
.reg-submit[disabled]{opacity:.8; cursor:progress}
.reg-login{margin:20px 0 0; text-align:center; color:var(--ink-2); font-size:15px}
.reg-login a{color:var(--blue-deep); font-weight:600; text-underline-offset:2px}

/* состояние «уже вошёл» — snippets/reg-logged-in.html */
.reg-authed-t{margin:0; font-size:20px; line-height:1.3; font-weight:700; color:var(--ink)}
.reg-authed-p{margin:8px 0 0; color:var(--ink-2); font-size:16px; line-height:1.5}
.reg-authed{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.reg-card .reg-authed .btn-ghost{display:inline-flex}

.reg-perks{width:100%; max-width:780px; margin-top:clamp(40px,4.5vw,60px); text-align:center}
.reg-perks h2{margin:0; font-size:clamp(20px,2vw,24px); line-height:1.25; color:var(--ink)}
.reg-list{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 28px; text-align:left}
.reg-list li{display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; align-items:start; color:var(--ink-2); font-size:15.5px; line-height:1.45}
.reg-list li svg{width:26px; height:26px; border-radius:50%; background:var(--blue-wash); padding:6px; box-sizing:border-box; fill:none; stroke:var(--blue-deep); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.reg-list b{color:var(--ink); font-weight:600}
.reg-links{margin:26px 0 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:8px 24px; font-size:15px; color:var(--ink-2)}
.reg-links a{color:var(--blue-deep); text-underline-offset:2px}
.reg-links > a{font-weight:600; text-decoration:none}
.reg-links > a:hover{color:var(--blue-night)}

@media(max-width:760px){
  .reg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .reg-card{border-radius:20px; padding:24px 18px}
  .reg-head{padding-bottom:132px}
  .reg-card{margin-top:-96px}
  .reg-list{grid-template-columns:minmax(0,1fr); max-width:340px; margin-inline:auto}
}
@media(max-width:350px){
  .reg-captcha{transform:scale(.9); transform-origin:0 0}
}
/* фокус на ошибке не прячется под липкой капсулой шапки */
.reg-alert,.reg-field input,.reg-check input,.reg-captcha{scroll-margin-top:calc(var(--capsule-offset, 88px) + 16px)}
/* ============================================================
   Юридические документы — /support/*.html
   Текст перенесён со старого сайта дословно; здесь только типографика.
   ============================================================ */
.legal-hero .wrap{padding-block:10px clamp(28px,3vw,44px)}
.legal{max-width:78ch}
.legal h2{font-size:clamp(20px,2vw,24px); line-height:1.25; margin:34px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{max-width:none; font-size:16px; line-height:1.7}
.legal ul, .legal ol{margin:10px 0 14px; padding-left:22px; color:var(--ink-2); font-size:16px; line-height:1.65}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li + li{margin-top:6px}
.legal strong{color:var(--ink)}
.legal-sec .doclinks{margin-top:44px}

/* ===== Подвал: ссылки на юридические документы ===== */
.copy .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 28px}
.copy .legal-links{display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 20px; margin:0; padding:0; list-style:none}
.copy .legal-links a{color:#8FA3B2; font-size:13px; text-decoration:none}
.copy .legal-links a:hover{color:#FFFFFF; text-decoration:underline}

/* 05.10.2026: отступ между заголовком отзывов и стрелками */
.q-head{margin-top:22px}

/* 05.10.2026: пункты меню не переносятся */
.nav a{white-space:nowrap}