/* sms-inbox.ru — site styles. Source of truth for values: website-design-v2 (Smsinbox Site.dc.html, Паспорт реализации).
   M3 roles as custom properties; light + dark «Луна». Logical properties only (RTL-ready). */

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 300 500;
  font-display: block;
  src: url(/static/sms/fonts/material-symbols-rounded.woff2) format('woff2');
}

:root {
  --p:#006876; --op:#fff; --pc:#A1EFFF; --opc:#001F25; --sc:#CDE7ED; --osc:#051F23; --tc:#DBE1FF; --otc:#0F1A37;
  --s:#F5FAFC; --s0:#fff; --s1:#EFF4F6; --s2:#E9EFF0; --s3:#E3E9EB; --s4:#DEE3E5; --os:#171D1E; --osv:#3F484A;
  --ol:#6F797A; --olv:#BFC8CA; --page:#E4E9EA; --err:#BA1A1A;
  --r-chip:8px; --r-fab:16px; --r-field:20px; --r-card:24px; --r-surface:28px; --r-pill:999px;
  --ease:cubic-bezier(.2,0,0,1); --lhD:1.08; --ls:-0.02em;
  --font:'Roboto Flex','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --p:#82D3E2; --op:#00363E; --pc:#004F59; --opc:#A1EFFF; --sc:#334A50; --osc:#CDE7ED; --tc:#3C4665; --otc:#DBE1FF;
    --s:#0E1415; --s0:#090F10; --s1:#171D1E; --s2:#1B2122; --s3:#252B2C; --s4:#303637; --os:#DEE3E5; --osv:#BFC8CA;
    --ol:#899294; --olv:#3F484A; --page:#1A1F20; --err:#FFB4AB;
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --p:#82D3E2; --op:#00363E; --pc:#004F59; --opc:#A1EFFF; --sc:#334A50; --osc:#CDE7ED; --tc:#3C4665; --otc:#DBE1FF;
  --s:#0E1415; --s0:#090F10; --s1:#171D1E; --s2:#1B2122; --s3:#252B2C; --s4:#303637; --os:#DEE3E5; --osv:#BFC8CA;
  --ol:#899294; --olv:#3F484A; --page:#1A1F20; --err:#FFB4AB;
  color-scheme: dark;
}
/* Phone mock / theme preview carry their own palette (data-pal) independent of the page theme. */
[data-pal=light] {
  --p:#006876; --op:#fff; --pc:#A1EFFF; --opc:#001F25; --sc:#CDE7ED; --osc:#051F23; --tc:#DBE1FF; --otc:#0F1A37;
  --s:#F5FAFC; --s0:#fff; --s1:#EFF4F6; --s2:#E9EFF0; --s3:#E3E9EB; --s4:#DEE3E5; --os:#171D1E; --osv:#3F484A;
  --ol:#6F797A; --olv:#BFC8CA; --err:#BA1A1A;
}
[data-pal=dark] {
  --p:#82D3E2; --op:#00363E; --pc:#004F59; --opc:#A1EFFF; --sc:#334A50; --osc:#CDE7ED; --tc:#3C4665; --otc:#DBE1FF;
  --s:#0E1415; --s0:#090F10; --s1:#171D1E; --s2:#1B2122; --s3:#252B2C; --s4:#303637; --os:#DEE3E5; --osv:#BFC8CA;
  --ol:#899294; --olv:#3F484A; --err:#FFB4AB;
}
:lang(hi) { --lhD:1.32; --ls:0; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--s); color: var(--os); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; transition: background .3s; }
a { color: var(--p); }
a:hover { color: var(--opc); }
button { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--osv); opacity: .8; }
:focus-visible { outline: 3px solid var(--p); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 20px; background: var(--p); color: var(--op); font-weight: 500; text-decoration: none; }
.skip:focus { top: 8px; color: var(--op); }

/* Material Symbols */
.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; flex: none; user-select: none; }
.ms.fill { font-variation-settings: 'FILL' 1; }
.i13 { font-size: 13px; } .i14 { font-size: 14px; } .i16 { font-size: 16px; } .i18 { font-size: 18px; } .i20 { font-size: 20px; }
.i22 { font-size: 22px; } .i24 { font-size: 24px; } .i26 { font-size: 26px; } .i28 { font-size: 28px; } .i32 { font-size: 32px; }
.i34 { font-size: 34px; } .i52 { font-size: 52px; } .i64 { font-size: 64px; }
:dir(rtl) .flip { transform: scaleX(-1); }

/* Site container: container queries mirror the mockup's cqi-fluid sizes */
.site { container-type: inline-size; background: var(--s); color: var(--os); min-height: 100vh; display: flex; flex-direction: column; transition: background .3s; }
.site > main { flex: 1; }
.wrap { max-width: 1360px; margin: 0 auto; padding-inline: clamp(16px,3cqi,32px); }

/* ---------- Buttons ---------- */
.btn { height: 40px; padding: 0 20px; border: none; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .2s var(--ease), transform .1s; }
.btn:active { transform: scale(.97); }
.btn-filled { background: var(--p); color: var(--op); }
.btn-filled:hover { color: var(--op); }
.btn-tonal { background: var(--sc); color: var(--osc); }
.btn-tonal:hover { background: var(--pc); color: var(--osc); }
.btn-outlined { background: transparent; color: var(--p); border: 1px solid var(--ol); }
.btn-outlined:hover { background: var(--s2); color: var(--p); }
.btn-text { background: transparent; color: var(--p); padding: 0 12px; }
.btn-text:hover { background: var(--s2); color: var(--p); }
.btn.icon-start { padding-inline: 16px 20px; }
.btn.icon-end { padding-inline: 20px 16px; }
.icon-btn { width: 40px; height: 40px; border: none; border-radius: 20px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--os); flex: none; }
.icon-btn:hover { background: var(--s2); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--s); transition: background .3s; }
.hdr-in { max-width: 1360px; margin: 0 auto; height: 72px; display: flex; align-items: center; gap: 4px; padding-inline: clamp(8px,3cqi,32px); }
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 24px; color: var(--os); flex: none; text-decoration: none; }
.logo:hover { background: var(--s2); color: var(--os); }
.logo img { width: 36px; height: 36px; border-radius: 10px; display: block; }
.wordmark { font-size: 22px; line-height: 1; letter-spacing: -.2px; font-family: 'Roboto Flex', sans-serif; }
.wordmark b { font-weight: 600; } .wordmark span { font-weight: 300; }
.nav { display: flex; gap: 2px; margin-inline-start: 12px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.nav a { height: 40px; padding: 0 16px; border-radius: 20px; color: var(--os); font-size: 14px; font-weight: 500; white-space: nowrap;
  display: flex; align-items: center; text-decoration: none; transition: background .2s var(--ease); }
.nav a:hover { background: var(--s3); color: var(--os); }
.nav a[aria-current=page] { background: var(--sc); color: var(--osc); }
.hdr .spacer { flex: 1; }
.lang-menu { position: relative; }
.lang-btn { height: 40px; padding: 0 12px; border: none; border-radius: 20px; background: transparent; display: flex; align-items: center; gap: 6px;
  cursor: pointer; color: var(--os); font-size: 14px; font-weight: 500; }
.lang-btn:hover { background: var(--s2); }
.lang-list { position: absolute; top: 46px; inset-inline-end: 0; width: 248px; padding: 8px 0; margin: 0; list-style: none; border-radius: 16px; background: var(--s2);
  box-shadow: 0 4px 12px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.1); z-index: 40; }
.lang-list a { height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--os); font-size: 14px; text-decoration: none; }
.lang-list a:hover { background: var(--s4); color: var(--os); }
.lang-list a[aria-current=true] { background: var(--s3); }
.lang-list a span { flex: 1; }
.lang-list .ms { color: var(--p); }
.hdr-dl { margin-inline-start: 8px; padding-inline: 16px 20px; }
.menu-btn { width: 48px; height: 48px; border-radius: 24px; }
.hdr .wide-only { display: none; }
@container (min-width: 1100px) {
  .hdr .wide-only { display: flex; }
  .hdr .compact-only { display: none; }
}
@media (min-width: 1100px) { .hdr .wide-only { display: flex; } .hdr .compact-only { display: none; } }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 51; width: min(320px, 86%); background: var(--s1);
  border-start-end-radius: 24px; border-end-end-radius: 24px; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
  transform: translateX(-104%); transition: transform .3s var(--ease); overflow-y: auto; visibility: hidden; }
[dir=rtl] .drawer { transform: translateX(104%); }
body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { transform: translateX(0); box-shadow: 0 8px 24px rgba(0,0,0,.2); visibility: visible; }
.drawer-head { border-radius: 28px; background: var(--pc); color: var(--opc); padding: 20px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex: none; }
.drawer-head img { width: 48px; height: 48px; border-radius: 14px; }
.drawer-head .wordmark { font-size: 20px; }
.drawer-head small { display: block; font-size: 13px; opacity: .8; }
.drawer a.dl { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px 0 16px; border-radius: 26px; color: var(--osv);
  font-size: 14px; font-weight: 500; text-decoration: none; }
.drawer a.dl:hover { background: var(--s3); color: var(--osv); }
.drawer a.dl[aria-current=page] { background: var(--sc); color: var(--osc); }
.drawer a.dl[aria-current=page] .ms { font-variation-settings: 'FILL' 1; }
.drawer hr { height: 1px; border: 0; background: var(--olv); margin: 8px 16px; flex: none; }
.drawer .lbl { font-size: 14px; font-weight: 500; color: var(--p); padding: 8px 16px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer .lang-chips { padding: 0 16px; }

/* ---------- Chips ---------- */
.chip { height: 32px; padding: 0 16px 0 14px; border-radius: 8px; border: 1px solid var(--olv); background: transparent; color: var(--osv);
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip:hover { color: var(--osv); background: var(--s2); }
.chip[aria-pressed=true], .chip[aria-current=true], .chip.sel { padding-inline-start: 8px; background: var(--sc); color: var(--osc); border-color: transparent; }
.chip .ms { font-size: 18px; display: none; }
.chip[aria-pressed=true] .ms, .chip.sel .ms { display: inline-block; }
.lang-chip { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--olv); background: transparent; color: var(--osv);
  font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; text-decoration: none; }
.lang-chip:hover { color: var(--osv); background: var(--s2); }
.lang-chip[aria-current=true] { background: var(--sc); color: var(--osc); border-color: transparent; }

/* ---------- Typography blocks ---------- */
.sec { max-width: 1360px; margin: 0 auto; padding: clamp(56px,8cqi,112px) clamp(16px,3cqi,32px) 0; }
.sec-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; padding: 0 clamp(0px,1.5cqi,16px); }
.h2 { margin: 0; font-size: clamp(30px,3.4cqi,45px); line-height: 1.15; letter-spacing: var(--ls); font-weight: 450; text-wrap: balance; }
.lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--osv); text-wrap: pretty; }

/* ---------- Store badges ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.badge { height: 56px; min-width: 180px; padding: 0 18px 0 12px; border: 1px solid #A6A6A6; border-radius: 10px; background: #000; color: #fff;
  display: flex; align-items: center; gap: 12px; text-decoration: none; text-align: start; }
.badge:hover { color: #fff; }
.badge:active { transform: scale(.98); }
.badge .logo-ph { width: 30px; height: 30px; flex: none; border-radius: 6px; border: 1px dashed rgba(255,255,255,.5); display: grid; place-items: center;
  font: 7px/1 ui-monospace,Menlo,monospace; color: rgba(255,255,255,.7); }
.badge .txt { display: flex; flex-direction: column; gap: 2px; }
.badge .top { font-size: 10px; letter-spacing: .6px; }
.badge .name { font-size: 20px; line-height: 1; font-weight: 500; }

/* ---------- Home: hero ---------- */
.hero { max-width: 1360px; margin: 0 auto; padding: clamp(8px,2cqi,24px) clamp(16px,3cqi,32px) 0; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(24px,4cqi,56px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; padding: clamp(8px,3cqi,40px) clamp(0px,1.5cqi,16px); }
.eyebrow { align-self: flex-start; height: 32px; padding: 0 14px 0 10px; border-radius: 8px; background: var(--sc); color: var(--osc); display: flex;
  align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.h1 { margin: 0; font-size: clamp(40px,5.4cqi,72px); line-height: var(--lhD); letter-spacing: var(--ls); font-weight: 450; text-wrap: balance; }
.hero-sub { margin: 0; font-size: clamp(17px,1.5cqi,20px); line-height: 1.5; color: var(--osv); max-width: 560px; text-wrap: pretty; }
.req { font-size: 14px; color: var(--osv); display: flex; align-items: center; gap: 8px; }
.hero-demo { border-radius: 28px; background: var(--s1); padding: clamp(20px,3cqi,40px) 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; transition: background .3s; }
.demo-ctl { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 440px; }
.demo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.demo-actions .btn { padding-inline: 12px 16px; }

/* Segmented button */
.seg { display: flex; height: 40px; border: 1px solid var(--ol); border-radius: 20px; overflow: hidden; }
.seg button { min-width: 104px; padding: 0 14px; border: none; border-inline-start: 1px solid var(--ol); background: transparent; color: var(--os);
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
.seg button:first-child { border-inline-start: none; }
.seg button[aria-pressed=true] { background: var(--sc); color: var(--osc); }
.seg button .ms { font-size: 18px; display: none; }
.seg button[aria-pressed=true] .ms { display: inline-block; }

/* ---------- Phone mock ---------- */
.phone { width: 330px; max-width: calc(100% - 20px); height: 700px; flex: none; box-sizing: content-box; border: 10px solid #111314; border-radius: 46px;
  background: var(--s); color: var(--os); position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
  transition: background .3s; font-size: 15px; }
.ph-status { height: 36px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 24px; font-size: 13px; font-weight: 500; }
.ph-status div { display: flex; gap: 3px; }
.ph-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ph-screen[hidden] { display: none; }
.ph-search { padding: 4px 12px 8px; flex: none; }
.ph-search > div { height: 52px; border-radius: 26px; background: var(--s3); display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; }
.ph-search .ms { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; }
.ph-search .q { flex: 1; font-size: 15px; color: var(--osv); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-search .me { width: 30px; height: 30px; border-radius: 15px; background: var(--p); color: var(--op); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.ph-chips { display: flex; gap: 6px; padding: 2px 12px 6px; flex: none; overflow: hidden; }
.ph-chip { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--olv); background: transparent; color: var(--osv); display: flex; align-items: center;
  gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; flex: none; }
.ph-chip.sel { padding-inline-start: 8px; background: var(--sc); color: var(--osc); border-color: transparent; }
.ph-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 6px; }
.ph-day { font-size: 13px; font-weight: 500; color: var(--p); padding: 12px 14px 6px; }
.ph-row { display: flex; gap: 14px; padding: 10px 12px; border-radius: 24px; align-items: flex-start; }
.av { width: 44px; height: 44px; border-radius: 22px; flex: none; display: grid; place-items: center; font-size: 15px; font-weight: 500; }
.av1 { background: var(--pc); color: var(--opc); } .av2 { background: var(--sc); color: var(--osc); } .av3 { background: var(--tc); color: var(--otc); }
.ph-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ph-row .l1 { display: flex; align-items: baseline; gap: 8px; }
.ph-row .n { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row .t { font-size: 11px; color: var(--osv); flex: none; }
.ph-row .l2 { display: flex; gap: 10px; align-items: flex-start; }
.ph-row .p { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--osv); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ph-row.unread .n, .ph-row.unread .t { font-weight: 700; }
.ph-row.unread .t { color: var(--p); }
.ph-row.unread .p { color: var(--os); }
.ph-row .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--p); color: var(--op); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.ph-fab { position: absolute; inset-inline-end: 14px; bottom: 86px; height: 52px; padding: 0 18px 0 14px; border-radius: 16px; background: var(--pc); color: var(--opc);
  display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; box-shadow: 0 3px 6px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.1); }
.ph-nav { height: 72px; flex: none; background: var(--s2); display: flex; padding: 10px 0 12px; }
.ph-nav > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--osv); }
.ph-nav .ind { width: 60px; height: 30px; border-radius: 15px; display: grid; place-items: center; position: relative; }
.ph-nav .on { color: var(--os); }
.ph-nav .on .ind { background: var(--sc); color: var(--osc); }
.ph-nav .lab { font-size: 11px; font-weight: 500; }
.ph-nav .on .lab { font-weight: 700; }
.ph-nav .badge2 { position: absolute; top: 1px; left: 34px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #BA1A1A; color: #fff;
  font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.ph-chat-top { height: 60px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.ph-chat-top .icon-btn { width: 44px; height: 44px; border-radius: 22px; }
.ph-chat-top .av-s { width: 36px; height: 36px; border-radius: 18px; flex: none; display: grid; place-items: center; background: var(--tc); color: var(--otc); }
.ph-chat-top .who { flex: 1; min-width: 0; padding-inline-start: 8px; }
.ph-chat-top .who div:first-child { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-chat-top .who div:last-child { font-size: 12px; line-height: 16px; color: var(--osv); }
.ph-chat-top > .ms { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; }
.ph-msgs { flex: 1; min-height: 0; padding: 8px 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.ph-date { align-self: center; margin: 0 0 12px; padding: 6px 12px; border-radius: 12px; background: var(--s2); font-size: 12px; font-weight: 500; color: var(--osv); }
.bubble-in { align-self: flex-start; max-width: 84%; padding: 10px 14px 8px; border-radius: 20px 20px 20px 6px; background: var(--s3); color: var(--os); font-size: 15px;
  line-height: 1.4; overflow-wrap: anywhere; }
.bubble-in .lnk { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; color: var(--p); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.bubble-in .tm { float: right; font-size: 11px; line-height: 16px; opacity: .72; margin: 8px 0 -2px 12px; }
.ph-compose { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px 10px; }
.ph-compose > .ms:first-child { width: 40px; height: 48px; display: grid; place-items: center; font-size: 22px; color: var(--osv); }
.ph-compose .fld { flex: 1; min-width: 0; height: 48px; border-radius: 24px; background: var(--s3); display: flex; align-items: center; padding: 0 16px; font-size: 15px; color: var(--osv); }
.ph-compose .snd { width: 48px; height: 48px; border-radius: 24px; background: var(--s3); color: var(--osv); display: grid; place-items: center; flex: none; font-size: 22px; }
.ph-home { height: 18px; flex: none; display: grid; place-items: center; }
.ph-home div { width: 100px; height: 4px; border-radius: 2px; background: var(--os); opacity: .4; }
.ph-notif { position: absolute; left: 10px; right: 10px; top: 40px; border-radius: 24px; background: var(--s3); padding: 14px 14px 12px; display: flex; flex-direction: column;
  gap: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.24); opacity: 0; pointer-events: none; transform: translateY(-24px); transition: opacity .2s, transform .3s var(--ease); }
.phone.notif .ph-notif { opacity: 1; pointer-events: auto; transform: none; }
.app-line { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--osv); }
.app-line img { width: 16px; height: 16px; border-radius: 5px; }
.ph-notif .row { display: flex; gap: 12px; align-items: flex-start; }
.ph-notif .av-nb { width: 36px; height: 36px; border-radius: 18px; background: var(--pc); color: var(--opc); display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none; }
.ph-notif .from { font-size: 14px; line-height: 20px; font-weight: 600; }
.ph-notif .txt { font-size: 14px; line-height: 20px; color: var(--os); text-wrap: pretty; }
.ph-notif .acts { display: flex; gap: 8px; padding-inline-start: 48px; }
.ph-notif .acts button { height: 36px; border: none; border-radius: 18px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ph-notif .copy { padding: 0 14px 0 10px; background: var(--sc); color: var(--osc); }
.ph-notif .copy:active { transform: scale(.96); }
.ph-notif .reply { padding: 0 12px; background: transparent; color: var(--p); }
.ph-dscrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ph-dlg { position: absolute; left: 18px; right: 18px; top: 120px; border-radius: 28px; background: var(--s3); padding: 22px 20px 16px; display: flex; flex-direction: column;
  gap: 12px; opacity: 0; pointer-events: none; transform: scale(.94); transition: opacity .2s, transform .25s var(--ease); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.phone.dlg .ph-dscrim { opacity: 1; pointer-events: auto; }
.phone.dlg .ph-dlg { opacity: 1; pointer-events: auto; transform: none; }
.ph-dlg > .ms { align-self: center; font-size: 26px; color: var(--p); }
.ph-dlg .ttl { font-size: 22px; line-height: 28px; text-align: center; }
.ph-dlg .dom { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--s0); }
.ph-dlg .dom div:first-child { font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.ph-dlg .dom div:last-child { font: 12px/16px ui-monospace,Menlo,monospace; color: var(--osv); overflow-wrap: anywhere; }
.ph-dlg .why { display: flex; gap: 10px; font-size: 13px; line-height: 18px; color: var(--os); }
.ph-dlg .why .ms { font-size: 18px; color: var(--osv); }
.ph-dlg .why.risk .ms { color: var(--err); }
.ph-dlg .adv { font-size: 12px; line-height: 16px; color: var(--osv); text-wrap: pretty; }
.ph-dlg .acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; padding-top: 4px; }
.ph-dlg .acts button { height: 40px; padding: 0 12px; border: none; border-radius: 20px; background: transparent; color: var(--p); font-size: 14px; font-weight: 500; cursor: pointer; }
.ph-dlg .acts button.main { padding: 0 18px; background: var(--p); color: var(--op); }
.ph-snack { position: absolute; left: 14px; right: 14px; bottom: 92px; min-height: 44px; padding: 12px 16px; border-radius: 8px; background: var(--os); color: var(--s); font-size: 14px;
  line-height: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none; }
.phone.snack .ph-snack { opacity: 1; transform: none; }

/* ---------- Home: pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pillar { border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.pillar:nth-child(3n+1) { background: var(--pc); color: var(--opc); }
.pillar:nth-child(3n+2) { background: var(--sc); color: var(--osc); }
.pillar:nth-child(3n+3) { background: var(--tc); color: var(--otc); }
.pillar .ic { width: 56px; height: 56px; border-radius: 28px; background: var(--s0); color: var(--p); display: grid; place-items: center; }
.pillar h3, .pillar .pillar-t { margin: auto 0 0; font-size: 22px; line-height: 28px; font-weight: 500; text-wrap: balance; }
.pillar p { margin: 0; font-size: 16px; line-height: 24px; opacity: .86; text-wrap: pretty; }

/* ---------- Feature cards + mini illustrations ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.feat { border-radius: 24px; background: var(--s1); padding: 8px; display: flex; flex-direction: column; }
.feat .ill { height: 176px; border-radius: 20px; background: var(--s2); display: flex; flex-direction: column; justify-content: center; padding: 16px; overflow: hidden; }
.feat .cap { padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.feat h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.feat p { margin: 0; font-size: 15px; line-height: 22px; color: var(--osv); text-wrap: pretty; }
.ill-list { gap: 10px; padding-inline: 20px !important; }
.ill-list .srch { height: 40px; border-radius: 20px; background: var(--s0); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; }
.ill-list .srch .ms { color: var(--osv); font-size: 20px; }
.ill-list .caret { width: 1px; height: 18px; background: var(--p); }
.ill-list .res { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 20px; background: var(--s0); }
.av36 { width: 36px; height: 36px; border-radius: 18px; background: var(--sc); color: var(--osc); display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none; }
.av32 { width: 32px; height: 32px; border-radius: 16px; background: var(--sc); color: var(--osc); display: grid; place-items: center; font-size: 12px; font-weight: 500; flex: none; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-list .res .n { font-size: 14px; line-height: 20px; }
.ill-list .res .n mark { background: var(--pc); color: var(--opc); border-radius: 4px; padding: 0 2px; }
.ill-list .res .p { font-size: 12px; line-height: 16px; color: var(--osv); }
.ill-sim { gap: 8px; padding-inline: 20px !important; }
.ill-sim .in, .ill-sim .out { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.ill-sim .in { align-self: flex-start; }
.ill-sim .out { align-self: flex-end; align-items: flex-end; }
.sim-tag { align-self: flex-start; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.ill-sim .in .sim-tag { background: var(--tc); color: var(--otc); }
.ill-sim .out .sim-tag { align-self: auto; background: var(--pc); color: var(--opc); }
.ill-sim .in .b { padding: 9px 13px; border-radius: 20px 20px 20px 6px; background: var(--s0); font-size: 14px; line-height: 1.35; }
.ill-sim .out .b { padding: 9px 13px; border-radius: 20px 20px 6px 20px; background: var(--p); color: var(--op); font-size: 14px; line-height: 1.35; }
.mini-card { border-radius: 20px; background: var(--s0); padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ill-qr .who { display: flex; gap: 10px; align-items: center; }
.ill-qr .who .n { font-size: 13px; font-weight: 600; }
.ill-qr .who .p { font-size: 12px; color: var(--osv); }
.ill-qr .rep { display: flex; gap: 6px; align-items: center; }
.ill-qr .rep .f { flex: 1; height: 36px; border-radius: 18px; background: var(--s3); display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: var(--osv); }
.ill-qr .rep .s { width: 36px; height: 36px; border-radius: 18px; background: var(--p); color: var(--op); display: grid; place-items: center; font-size: 18px; }
.ill-otp .mini-card { gap: 8px; }
.ill-otp .app-line img { width: 14px; height: 14px; border-radius: 4px; }
.ill-otp .msg { font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ill-otp .msg b, .mk-demo .msg b { font-weight: 600; }
.copy-chip { align-self: flex-start; height: 32px; padding: 0 12px 0 8px; border-radius: 16px; background: var(--sc); color: var(--osc); display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; }
.copy-chip .ms { font-size: 16px; }
.ill-link .mini-card { padding: 14px; gap: 8px; }
.ill-link .h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.ill-link .h .ms { font-size: 20px; color: var(--p); }
.ill-link .dom { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ill-link .acts { display: flex; justify-content: flex-end; gap: 6px; }
.ill-link .acts span { height: 32px; padding: 0 10px; display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--p); }
.ill-link .acts span.main { padding: 0 14px; border-radius: 16px; background: var(--p); color: var(--op); }
.ill-sched { align-items: flex-end; padding-inline: 20px !important; }
.ill-sched .ghost { max-width: 86%; padding: 10px 14px; border-radius: 20px 20px 6px 20px; border: 1.5px dashed var(--p); color: var(--osv); font-size: 14px; line-height: 20px; }
.ill-sched .ghost div:first-child { display: flex; align-items: center; gap: 6px; color: var(--p); font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.ill-bk { align-items: center; gap: 16px; }
.ill-bk .c { width: 72px; height: 72px; border-radius: 36px; background: var(--pc); color: var(--opc); display: grid; place-items: center; }
.ill-bk .bar { width: 70%; height: 4px; border-radius: 2px; background: var(--s4); overflow: hidden; }
.ill-bk .bar div { width: 68%; height: 100%; background: var(--p); border-radius: 2px; }
.ill-icon { align-items: center; }
.ill-icon .c { width: 72px; height: 72px; border-radius: 36px; background: var(--sc); color: var(--osc); display: grid; place-items: center; }

/* ---------- Theme cards ---------- */
.sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding: 0 clamp(0px,1.5cqi,16px); }
.sec-head-row > div { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding-bottom: 4px; }
@media (max-width: 599px) {
  .theme-grid.scroll { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding-inline: 16px; }
}
.tcard { aspect-ratio: 3 / 4; width: 100%; min-width: 0; padding: 0; border: none; border-radius: 24px; overflow: hidden; cursor: pointer;
  position: relative; display: block; text-align: start; color: #fff; scroll-snap-align: start; outline-offset: -3px; text-decoration: none;
  transition: filter .2s var(--ease); background: var(--fb, var(--s2)); }
.tcard:hover { filter: brightness(1.07) saturate(1.06); color: #fff; }
.tcard.planned { border: 1.5px dashed var(--ol); cursor: default; --fb: var(--s2); }
.tcard.planned:hover { filter: none; }
.tcard[aria-pressed=true], .tcard[aria-current=true] { outline: 3px solid var(--p); }
.tcard .fbi { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 22%; font-size: 64px; color: rgba(255,255,255,.5); }
.tcard.base-light .fbi { color: var(--osv); }
.tcard.planned .fbi { color: var(--ol); }
.tcard picture, .tcard img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tcard img { object-fit: cover; opacity: 0; transition: opacity .3s; }
.tcard img.ok { opacity: 1; }
.tcard .skel { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s3), var(--s4)); }
.tcard .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.25) 55%, rgba(0,0,0,0)); }
.tcard .lab { position: absolute; inset-inline-start: 16px; inset-inline-end: 12px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tcard .tag { font-size: 11px; line-height: 16px; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff; }
.tcard .nm { font-size: 15px; line-height: 20px; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.tcard .selmark { position: absolute; top: 10px; inset-inline-end: 10px; width: 28px; height: 28px; border-radius: 14px; background: var(--p); color: var(--op);
  display: none; place-items: center; font-size: 18px; }
.tcard[aria-pressed=true] .selmark, .tcard[aria-current=true] .selmark { display: grid; }

/* ---------- Home: privacy, markets, steps, CTA ---------- */
.priv-box { border-radius: 28px; background: var(--s1); padding: clamp(24px,4cqi,56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px,4cqi,56px); align-items: center; }
.priv-box .copy { display: flex; flex-direction: column; gap: 16px; }
.priv-box .copy .btn { align-self: flex-start; margin-top: 8px; }
.list-rows { display: flex; flex-direction: column; gap: 2px; border-radius: 24px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.list-row { display: flex; align-items: center; gap: 16px; min-height: 80px; padding: 14px 20px 14px 16px; background: var(--s3); }
.list-row .ic { width: 40px; height: 40px; border-radius: 20px; background: var(--sc); color: var(--osc); display: grid; place-items: center; flex: none; }
.list-row .tx { flex: 1; min-width: 0; }
.list-row .tx div:first-child { font-size: 16px; line-height: 24px; font-weight: 500; }
.list-row .tx div:last-child { font-size: 14px; line-height: 20px; color: var(--osv); text-wrap: pretty; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 0 clamp(0px,1.5cqi,16px); }
.mk-box { border-radius: 28px; background: var(--s1); padding: clamp(20px,3cqi,40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px; align-items: center; }
.mk-pts { display: flex; flex-direction: column; gap: 14px; }
.mk-pts[hidden] { display: none; }
.mk-pt { display: flex; gap: 12px; font-size: 17px; line-height: 26px; align-items: flex-start; }
.mk-pt .ms { width: 28px; height: 28px; border-radius: 14px; flex: none; background: var(--pc); color: var(--opc); display: grid; place-items: center; font-size: 18px; }
.mk-pt span:last-child { text-wrap: pretty; }
.mk-pts .btn-text { align-self: flex-start; margin-top: 6px; padding: 0 12px; gap: 6px; }
.mk-demo { border-radius: 24px; background: var(--s2); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mk-demo .trai { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: var(--s0); }
.mk-demo .trai[hidden] { display: none; }
.mk-demo .trai .code { font-size: 15px; font-weight: 500; font-family: ui-monospace,Menlo,monospace; }
.mk-demo .trai .kind { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--osv); }
.mk-demo .otp { border-radius: 20px; background: var(--s0); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mk-demo .otp .app-line img { width: 14px; height: 14px; border-radius: 4px; }
.mk-demo .msg { font-size: 14px; line-height: 20px; }
.mk-demo .lnk { border-radius: 20px; background: var(--s0); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.mk-demo .lnk .ms { font-size: 20px; color: var(--p); }
.mk-demo .lnk div div:first-child { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mk-demo .lnk div div:last-child { font-size: 12px; color: var(--osv); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.step { border-radius: 24px; background: var(--s2); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.step .num { width: 40px; height: 40px; border-radius: 20px; background: var(--p); color: var(--op); display: grid; place-items: center; font-size: 16px; font-weight: 600; }
.step .t { font-size: 20px; line-height: 28px; font-weight: 500; margin-top: 8px; text-wrap: balance; }
.step .d { font-size: 15px; line-height: 22px; color: var(--osv); text-wrap: pretty; }
.cta-sec { padding-bottom: clamp(56px,8cqi,96px); }
.cta { border-radius: 28px; background: var(--pc); color: var(--opc); padding: clamp(32px,5cqi,72px) clamp(20px,4cqi,56px); display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 16px; }
.cta img { width: 72px; height: 72px; border-radius: 20px; }
.cta h2 { margin: 8px 0 0; font-size: clamp(30px,3.6cqi,48px); line-height: 1.15; letter-spacing: var(--ls); font-weight: 450; max-width: 760px; text-wrap: balance; }
.cta p { margin: 0; font-size: 18px; line-height: 28px; opacity: .86; }
.cta .stores { justify-content: center; margin-top: 8px; }

/* ---------- Footer ---------- */
.ftr { background: var(--s1); border-radius: 28px 28px 0 0; transition: background .3s; }
.ftr-in { max-width: 1360px; margin: 0 auto; padding: clamp(32px,5cqi,56px) clamp(16px,3cqi,32px) 28px; display: flex; flex-direction: column; gap: 32px; }
.ftr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 28px; }
.ftr-brand { display: flex; flex-direction: column; gap: 12px; min-width: 200px; }
.ftr-brand .lg { display: flex; align-items: center; gap: 10px; }
.ftr-brand img { width: 32px; height: 32px; border-radius: 9px; }
.ftr-brand .wordmark { font-size: 20px; }
.ftr-brand .tag { font-size: 14px; line-height: 20px; color: var(--osv); }
.ftr-brand .ru { font-size: 13px; color: var(--osv); }
.ftr-col { display: flex; flex-direction: column; gap: 2px; }
.ftr-col h2 { margin: 0; font-size: 14px; font-weight: 500; color: var(--p); padding: 0 0 8px; }
.ftr-col a, .ftr-col .soon { align-self: flex-start; min-height: 36px; padding: 6px 0; font-size: 14px; line-height: 20px; color: var(--os); text-decoration: none;
  display: flex; gap: 8px; align-items: center; }
.ftr-col a:hover { color: var(--p); }
.note { font-size: 11px; color: var(--osv); border: 1px solid var(--olv); border-radius: 6px; padding: 1px 6px; }
.ftr-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 20px; border-top: 1px solid var(--olv); }
.ftr-bottom > .ms { font-size: 18px; color: var(--osv); }
.ftr-bottom .grow { flex: 1; }
.ftr-bottom .ver { font-size: 13px; color: var(--osv); }

/* ---------- 404 / language choice ---------- */
.nf { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 24px; text-align: center; }
.nf-ic { width: 112px; height: 112px; border-radius: 56px; background: var(--s2); color: var(--p); display: grid; place-items: center; }
.nf-code { font: 500 14px/1 ui-monospace,Menlo,monospace; color: var(--osv); letter-spacing: 2px; }
.nf h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 450; }
.nf p { margin: 0; font-size: 15px; line-height: 22px; color: var(--osv); max-width: 420px; }
.nf-acts { display: flex; gap: 8px; margin-top: 8px; }
.choose { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; }

/* Native name «हिन्दी» in language switchers on non-Hindi pages: tiny subset (only these glyphs). */
@font-face { font-family: 'Sms Deva Name'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/sms/fonts/devanagari-langname.woff2) format('woff2'); unicode-range: U+0900-097F; }
[lang=hi].lang-chip, .lang-list a[lang=hi], .choose a[lang=hi], .chip-flat[lang=hi], .seg a[lang=hi] { font-family: 'Roboto Flex', 'Sms Deva Name', var(--font); }

/* =====================================================================================================
   Inner pages (M3): Возможности, Темы, Приватность, Скачать, Помощь, Что нового, Рынки, Политика, Контакты
   ===================================================================================================== */
html { scroll-padding-top: 140px; }
.pg { margin: 0 auto; padding: clamp(24px,4cqi,56px) clamp(16px,3cqi,32px) clamp(56px,8cqi,96px); display: flex; flex-direction: column; gap: clamp(32px,4cqi,56px); }
.pg-1280 { max-width: 1280px; gap: 28px; } .pg-1200 { max-width: 1200px; } .pg-1100 { max-width: 1100px; } .pg-920 { max-width: 920px; gap: 24px; }
.pg-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.pg-h1 { margin: 0; font-size: clamp(36px,4.4cqi,57px); line-height: var(--lhD); letter-spacing: var(--ls); font-weight: 450; text-wrap: balance; }
.h2s { margin: 0; font-size: clamp(24px,2.4cqi,32px); line-height: 1.25; font-weight: 450; }
.h2m { margin: 0; font-size: clamp(24px,2.6cqi,34px); line-height: 1.25; font-weight: 450; }
.btn-lg { height: 56px; padding-inline: 20px 24px; border-radius: 28px; font-size: 16px; gap: 10px; }
.btn-md { height: 48px; padding-inline: 24px; border-radius: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.notice { display: flex; gap: 16px; padding: 16px 20px; border-radius: 16px; background: var(--s2); color: var(--osv); font-size: 15px; line-height: 22px; }
.notice b { font-weight: 600; color: var(--os); }
.icard { border-radius: 24px; background: var(--s1); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.icard .ic { width: 40px; height: 40px; border-radius: 20px; background: var(--sc); color: var(--osc); display: grid; place-items: center; }
.icard h2, .icard h3 { margin: 6px 0 0; font-size: 20px; line-height: 28px; font-weight: 500; overflow-wrap: anywhere; }
.icard p { margin: 0; font-size: 15px; line-height: 22px; color: var(--osv); text-wrap: pretty; }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.cards4 .icard p { line-height: 23px; }
ol, ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Возможности ---------- */
.anchors { position: sticky; top: 72px; z-index: 10; background: var(--s); margin: -16px 0; padding: 12px 0; display: flex; gap: 8px; overflow-x: auto; transition: background .3s; }
.anchor { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--olv); color: var(--osv); font-size: 14px; font-weight: 500; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; text-decoration: none; }
.anchor:hover { background: var(--s2); color: var(--osv); }
.fgroup { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 140px; }
.fgroup > .h2s { padding: 0 8px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 2px; border-radius: 24px; overflow: hidden; background: var(--s); }
.fitem { display: flex; gap: 16px; padding: 20px; background: var(--s2); align-items: flex-start; }
.fitem .ic { width: 40px; height: 40px; border-radius: 20px; background: var(--sc); color: var(--osc); display: grid; place-items: center; flex: none; }
.fitem .tx { flex: 1; min-width: 0; }
.fitem h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.fitem p { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--osv); text-wrap: pretty; }
.pro { border-radius: 28px; background: var(--tc); color: var(--otc); padding: clamp(24px,4cqi,48px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: center; scroll-margin-top: 140px; }
.pro .copy { display: flex; flex-direction: column; gap: 12px; }
.pro .pro-k { font-size: 14px; font-weight: 500; letter-spacing: .4px; }
.pro h2 { margin: 0; font-size: clamp(26px,2.8cqi,36px); line-height: 1.2; font-weight: 450; }
.pro p { margin: 0; font-size: 16px; line-height: 24px; text-wrap: pretty; }
.pro-soon { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--s0); color: var(--p); font-size: 14px; font-weight: 500; }
.pro pre { margin: 0; border-radius: 20px; background: var(--s0); color: var(--os); padding: 20px; font: 13px/1.6 ui-monospace,Menlo,monospace; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; }

/* ---------- Темы ---------- */
.th-filters { display: flex; flex-direction: column; gap: 12px; }
.frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flbl { font-size: 14px; color: var(--osv); min-width: 64px; }
.th-count { font-size: 13px; line-height: 18px; color: var(--osv); }
.th-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; align-items: start; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 160px), 1fr)); gap: 12px; min-width: 0; }
.th-grid .tcard[aria-current=true] { outline-offset: -3px; }
.pv { border-radius: 28px; background: var(--s1); padding: 20px; display: flex; flex-direction: column; gap: 14px; transition: background .3s; }
.pv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pv-title { flex: 1; min-width: 140px; }
.pv-title .lbl { font-size: 14px; font-weight: 500; color: var(--p); }
.pv-title .nm { font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.seg-sm { height: 36px; border-radius: 18px; }
.seg-sm button, .seg-sm a { min-width: 0; padding: 0 12px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.seg-sm .ms { font-size: 16px; }
.pv-x { display: none; }
.pv-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.32); }
@container (min-width: 840px) {
  .th-layout { grid-template-columns: minmax(0,1fr) minmax(340px, 400px); }
  .pv { position: sticky; top: 96px; }
  .pv-scrim { display: none; }
}
@container (max-width: 839px) {
  .pv { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 90%; overflow-y: auto; border-radius: 28px 28px 0 0; }
  .pv:not(.open) { display: none; }
  .pv-x { display: grid; width: 40px; height: 40px; }
  .pv-x:hover { background: var(--s3); }
}
.pv-phones { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; max-width: 400px; width: 100%; margin: 0 auto;
  --bar: var(--acc, var(--p)); --fab: var(--acc, var(--pc)); --fabFg: #fff; --txt: #fff; --sub: rgba(255,255,255,.85); --div: rgba(255,255,255,.28);
  --pill: color-mix(in oklch, var(--s3) 86%, transparent); --inBg: color-mix(in oklch, var(--s2) 84%, transparent); --scrim: .34; }
.pv-phones.base { --wall: var(--s) !important; --bar: var(--s); --fab: var(--pc); --fabFg: var(--opc); --txt: var(--os); --sub: var(--osv); --div: var(--olv);
  --pill: var(--s3); --inBg: var(--s3); --scrim: 0; }
.pv-phones figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv-phones figcaption { font-size: 13px; font-weight: 500; color: var(--osv); text-align: center; }
.th-page .pv-phones figcaption { color: var(--cap, var(--osv)); }
.pvp { position: relative; aspect-ratio: 9 / 19; border-radius: 26px; overflow: hidden; border: 6px solid #111314; background: var(--wall); color: var(--txt); }
.pvp-chat { color: var(--os); }
.pv-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-fbi { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; color: rgba(255,255,255,.4); }
.pv-scr { position: absolute; inset: 0; background: rgba(0,0,0,var(--scrim)); }
.pv-in { position: relative; height: 100%; display: flex; flex-direction: column; }
.pv-bar { height: 14px; flex: none; background: var(--bar); }
.pv-search { padding: 6px 6px 4px; flex: none; }
.pv-search > div { height: 26px; border-radius: 13px; background: var(--pill); color: var(--osv); display: flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 9px; }
.pv-search .ms { font-size: 13px; }
.pv-search span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-rows { flex: 1; min-height: 0; overflow: hidden; }
.pv-row { display: flex; gap: 7px; padding: 7px 8px; border-bottom: 1px solid var(--div); align-items: center; }
.pv-row .av { width: 22px; height: 22px; border-radius: 11px; font-size: 8px; font-weight: 600; }
.pv-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-row .n { font-size: 9.5px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row .n.u { font-weight: 700; }
.pv-row .p { font-size: 8.5px; line-height: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-fab { position: absolute; inset-inline-end: 8px; bottom: 40px; width: 30px; height: 30px; border-radius: 10px; background: var(--fab); color: var(--fabFg); display: grid; place-items: center; font-size: 16px; }
.pv-nav { height: 30px; flex: none; background: var(--pill); display: flex; align-items: center; justify-content: space-around; color: var(--osv); }
.pv-nav .ms { font-size: 14px; }
.pv-nav .on { color: var(--osc); background: var(--sc); border-radius: 8px; padding: 2px 10px; }
.pv-cbar { flex: none; background: var(--bar); color: var(--txt); padding-top: 14px; height: 44px; box-sizing: content-box; display: flex; align-items: center; gap: 5px; padding-inline: 6px; }
.pv-phones.base .pv-cbar { color: var(--os); }
.pv-cbar .ms { font-size: 14px; }
.pv-cbar .av { width: 18px; height: 18px; border-radius: 9px; background: var(--sc); color: var(--osc); font-size: 7px; font-weight: 600; }
.pv-cbar .n { font-size: 9.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-msgs { flex: 1; min-height: 0; padding: 8px 7px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.pv-msgs .b { max-width: 86%; padding: 6px 8px; font-size: 9px; line-height: 12px; }
.pv-msgs .in { align-self: flex-start; border-radius: 12px 12px 12px 4px; background: var(--inBg); color: var(--os); }
.pv-msgs .out { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--pc); color: var(--opc); }
.pv-compose { flex: none; display: flex; gap: 4px; padding: 5px 6px 8px; align-items: center; }
.pv-compose div { flex: 1; height: 24px; border-radius: 12px; background: var(--pill); color: var(--osv); font-size: 8.5px; display: flex; align-items: center; padding: 0 8px; }
.pv-compose .ms { width: 24px; height: 24px; border-radius: 12px; background: var(--fab); color: var(--fabFg); display: grid; place-items: center; font-size: 12px; }
.pv-noimg { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 18px; color: var(--osv); }

/* ---------- Приватность ---------- */
.facts2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.fact { border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.fact.stays { background: var(--pc); color: var(--opc); }
.fact.leaves { background: var(--s2); }
.fact .fh { display: flex; align-items: center; gap: 12px; }
.fact .fic { width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; flex: none; }
.fact.stays .fic { background: var(--s0); color: var(--p); }
.fact.leaves .fic { background: var(--sc); color: var(--osc); }
.fact h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 450; }
.fact ul { display: flex; flex-direction: column; gap: 16px; }
.fact li { display: flex; gap: 10px; font-size: 16px; line-height: 24px; }
.fact li .ms { line-height: 24px; }
.fact.leaves li .ms { color: var(--p); }
.del { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; align-items: center; }
.del-steps { display: flex; flex-direction: column; gap: 14px; }
.del-steps ol { display: flex; flex-direction: column; gap: 14px; }
.del-steps li { display: flex; gap: 12px; font-size: 16px; line-height: 24px; }
.del-steps .n { width: 28px; height: 28px; border-radius: 14px; flex: none; background: var(--s3); display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.del-steps li > span:last-child { text-wrap: pretty; }
.del .btn { justify-self: start; }

/* ---------- Скачать ---------- */
.scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.scard { border-radius: 28px; background: var(--s1); padding: 28px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.scard.first { background: var(--s2); }
.scard .copy { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.scard .copy img { width: 56px; height: 56px; border-radius: 16px; }
.scard h2 { margin: 4px 0 0; font-size: 28px; line-height: 36px; font-weight: 450; }
.scard p { margin: 0; font-size: 16px; line-height: 24px; color: var(--osv); }
.scard .badge { align-self: flex-start; margin-top: 8px; }
.qr { display: none; flex-direction: column; align-items: center; gap: 8px; }
.qr > span { font-size: 12px; color: var(--osv); }
.qr-ph { width: 132px; height: 132px; border-radius: 16px; background: repeating-linear-gradient(45deg, var(--s0) 0 6px, var(--s3) 6px 12px); display: grid; place-items: center;
  font: 10px/1.3 ui-monospace,Menlo,monospace; color: var(--osv); text-align: center; padding: 8px; }
@container (min-width: 840px) { .qr { display: flex; } }
.def2, .req2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.req2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.def-steps { border-radius: 24px; background: var(--s1); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.def-steps h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 450; }
.def-steps p { margin: 0; font-size: 15px; line-height: 22px; color: var(--osv); }
.def-steps ol { display: flex; flex-direction: column; gap: 16px; }
.def-steps li { display: flex; gap: 12px; align-items: center; font-size: 16px; line-height: 24px; }
.def-steps .n { width: 32px; height: 32px; border-radius: 16px; flex: none; background: var(--p); color: var(--op); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.def-ill { border-radius: 24px; background: var(--s2); padding: 24px; display: grid; place-items: center; }
.sysdlg { width: 100%; max-width: 340px; border-radius: 28px; background: var(--s3); padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.sysdlg .t { font-size: 20px; line-height: 26px; text-wrap: balance; }
.sysdlg .opts { display: flex; flex-direction: column; gap: 4px; }
.sysdlg .opt { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 8px; font-size: 16px; }
.sysdlg .opt.on { border-radius: 16px; background: var(--sc); font-weight: 500; }
.sysdlg .rad { width: 20px; height: 20px; border-radius: 10px; border: 2px solid var(--osv); display: grid; place-items: center; flex: none; }
.sysdlg .on .rad { border-color: var(--p); }
.sysdlg .rad span { width: 10px; height: 10px; border-radius: 5px; background: var(--p); }
.sysdlg .ico { width: 32px; height: 32px; border-radius: 10px; background: var(--s4); flex: none; }
.sysdlg .opt img { width: 32px; height: 32px; border-radius: 10px; }
.sysdlg .ok { display: flex; justify-content: flex-end; }
.sysdlg .ok span { height: 40px; padding: 0 16px; border-radius: 20px; color: var(--p); display: flex; align-items: center; font-size: 14px; font-weight: 500; }
.reqs { border-radius: 24px; background: var(--s1); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.reqs h2, .builds h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.reqs ul { display: flex; flex-direction: column; gap: 12px; }
.reqs li { display: flex; gap: 10px; font-size: 15px; line-height: 22px; }
.reqs li .ms { color: var(--p); line-height: 22px; }
.builds { border-radius: 24px; background: var(--tc); color: var(--otc); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.builds p { margin: 0; font-size: 15px; line-height: 22px; text-wrap: pretty; }
.dl-faq { display: flex; flex-direction: column; gap: 16px; }

/* ---------- FAQ / Помощь ---------- */
.faq { display: flex; flex-direction: column; gap: 2px; border-radius: 24px; overflow: hidden; }
.faq-it { background: var(--s2); }
.faq-it summary { min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 14px 20px; cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 500; list-style: none; }
.faq-it summary::-webkit-details-marker { display: none; }
.faq-it summary:hover { background: var(--s3); }
.faq-it summary:focus-visible { outline-offset: -3px; }
.faq-it summary .q { flex: 1; }
.faq-it summary .ms { color: var(--osv); transition: transform .2s var(--ease); }
.faq-it[open] summary .ms { transform: rotate(180deg); }
.faq-it .a { padding: 0 56px 20px 20px; padding-inline: 20px 56px; font-size: 15px; line-height: 23px; color: var(--osv); text-wrap: pretty; }
.search { height: 56px; border-radius: 28px; background: var(--s3); display: flex; align-items: center; gap: 4px; padding-inline: 16px 6px; color: var(--osv); }
.search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 16px var(--font); color: var(--os); height: 48px; padding: 0 8px; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { outline: 3px solid var(--p); outline-offset: 2px; }
.search .clr { width: 44px; height: 44px; border: none; border-radius: 22px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--os); }
.search .clr:hover { background: var(--s4); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; text-align: center; }
.empty .t { font-size: 24px; line-height: 32px; }
.empty .d { font-size: 14px; line-height: 20px; color: var(--osv); }
.teaser { border-radius: 28px; background: var(--sc); color: var(--osc); padding: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.teaser .tic { width: 56px; height: 56px; border-radius: 28px; background: var(--s0); color: var(--p); display: grid; place-items: center; flex: none; }
.teaser .tx { flex: 1; min-width: 220px; }
.teaser .t { font-size: 20px; line-height: 28px; font-weight: 500; }
.teaser .d { font-size: 15px; line-height: 22px; }

/* ---------- Что нового ---------- */
.rel { border-radius: 28px; background: var(--s1); padding: 8px; }
.rel-h { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.rel-h h2 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 450; }
.rel-h .latest { height: 24px; padding: 0 10px; border-radius: 6px; background: var(--p); color: var(--op); font-size: 12px; font-weight: 500; display: flex; align-items: center; }
.rel-h .date { font-size: 13px; color: var(--osv); }
.rel ul { display: flex; flex-direction: column; gap: 2px; border-radius: 20px; overflow: hidden; }
.rel li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--s2); }
.rel .kind { flex: none; min-width: 84px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.rel .kind.new { background: var(--pc); color: var(--opc); }
.rel .kind.fix { background: var(--tc); color: var(--otc); }
.rel .t { font-size: 15px; line-height: 22px; text-wrap: pretty; }

/* ---------- Рынки ---------- */
.mk-page { padding-top: clamp(16px,3cqi,40px); }
.mk-top { display: flex; flex-direction: column; gap: 12px; }
.mk-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.crumb { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--osv); }
.crumb .cur { color: var(--os); font-weight: 500; }
.seg a { color: var(--os); text-decoration: none; border-inline-start: 1px solid var(--ol); }
.seg a:first-child { border-inline-start: none; }
.seg a[aria-current=true] { background: var(--sc); color: var(--osc); }
.seg-sm a { padding: 0 16px; font-size: 14px; }
.mkt-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.mkt-chips .chip { flex: none; }
.mk-hero { border-radius: 28px; background: var(--pc); color: var(--opc); padding: clamp(28px,5cqi,64px); display: flex; flex-direction: column; gap: 16px; }
.mk-hero h1 { margin: 0; font-size: clamp(36px,4.6cqi,60px); line-height: var(--lhD); letter-spacing: var(--ls); font-weight: 450; max-width: 820px; text-wrap: balance; overflow-wrap: anywhere; }
.mk-hero p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 680px; text-wrap: pretty; }
.mk-hero .stores { margin-top: 8px; }
.trai-box { border-radius: 28px; background: var(--s2); padding: clamp(20px,3cqi,40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: center; }
.trai-box .copy { display: flex; flex-direction: column; gap: 12px; }
.trai-box h2 { margin: 0; font-size: clamp(24px,2.6cqi,34px); line-height: 1.25; font-weight: 450; }
.trai-box p { margin: 0; font-size: 16px; line-height: 25px; color: var(--osv); text-wrap: pretty; }
.trai-list { display: flex; flex-direction: column; gap: 2px; border-radius: 20px; overflow: hidden; }
.trow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--s0); }
.trow .av { width: 36px; height: 36px; border-radius: 18px; background: var(--tc); color: var(--otc); font-size: 12px; font-weight: 600; }
.trow .addr { flex: 1; font: 15px/20px ui-monospace,Menlo,monospace; }
.trow .addr b { color: var(--p); }
.trow .lbl { height: 24px; padding: 0 10px; border-radius: 6px; background: var(--sc); color: var(--osc); font-size: 12px; font-weight: 500; display: flex; align-items: center; }
.mk-themes { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Политика ---------- */
.pol { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; align-items: start; }
.toc { display: none; position: sticky; top: 96px; flex-direction: column; gap: 2px; }
.toc .lbl { font-size: 14px; font-weight: 500; color: var(--p); padding: 0 16px 8px; }
.toc a { min-height: 40px; padding: 8px 16px; border-radius: 20px; font-size: 14px; line-height: 20px; color: var(--osv); text-decoration: none; }
.toc a:hover { background: var(--s2); color: var(--osv); }
@container (min-width: 840px) { .pol { grid-template-columns: 220px minmax(0,1fr); } .toc { display: flex; } }
.pol-body { display: flex; flex-direction: column; gap: 20px; max-width: 760px; min-width: 0; }
.pol-body .path { font: 12px/1 ui-monospace,Menlo,monospace; color: var(--osv); }
.pol-body h1 { margin: 0; font-size: clamp(32px,3.6cqi,45px); line-height: 1.15; font-weight: 450; }
.pol-body .meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--osv); }
.avail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avail > span { font-size: 14px; color: var(--osv); }
.chip-flat { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--olv); color: var(--osv); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; text-decoration: none; }
.chip-flat:hover { background: var(--s2); color: var(--osv); }
.chip-flat[aria-current=true] { background: var(--sc); color: var(--osc); border-color: transparent; }
.pol-sum { border-radius: 24px; background: var(--pc); color: var(--opc); padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.pol-sum h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; }
.pol-sum ul { display: flex; flex-direction: column; gap: 12px; }
.pol-sum li { display: flex; gap: 10px; font-size: 16px; line-height: 24px; }
.pol-sum li .ms { line-height: 24px; }
.pol-en { display: flex; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--tc); color: var(--otc); font-size: 15px; line-height: 22px; }
.pol-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; scroll-margin-top: 96px; }
.pol-sec h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 450; }
.pol-sec p { margin: 0; font-size: 16px; line-height: 26px; text-wrap: pretty; }
.tbl-wrap { overflow-x: auto; border-radius: 20px; }
.pol-sec table { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 14px; line-height: 20px; margin: -2px 0; }
.pol-sec th, .pol-sec td { padding: 12px 18px; text-align: start; vertical-align: top; background: var(--s2); }
.pol-sec th { background: var(--s3); font-weight: 600; }
.pol-sec th:first-child, .pol-sec td:first-child { width: 42%; }

/* ---------- Контакты ---------- */
.ct { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; align-items: start; }
.ct-main { display: flex; flex-direction: column; gap: 20px; }
@container (min-width: 840px) { .ct { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } }
.ct-form { display: flex; flex-direction: column; gap: 16px; }
.topics { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.topics legend { font-size: 14px; font-weight: 500; color: var(--p); padding: 0 4px 8px; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-radio:has(input:checked) { padding-inline-start: 8px; background: var(--sc); color: var(--osc); border-color: transparent; }
.chip-radio:has(input:checked) .ms { display: inline-block; }
.chip-radio:has(input:focus-visible) { outline: 3px solid var(--p); outline-offset: 2px; }
.fld-wrap { display: flex; flex-direction: column; gap: 4px; }
.fld { display: flex; flex-direction: column; gap: 2px; padding: 10px 20px; border-radius: 20px; background: var(--s3); border: 2px solid transparent; }
.fld .fl { font-size: 12px; font-weight: 500; color: var(--p); }
.fld.bad { border-color: var(--err); }
.fld.bad .fl { color: var(--err); }
.fld:focus-within { border-color: var(--p); }
.fld textarea { min-height: 120px; border: none; outline: none; resize: vertical; background: transparent; font: 16px/24px var(--font); color: var(--os); padding: 0; }
.fld input { border: none; outline: none; background: transparent; font: 16px var(--font); color: var(--os); height: 28px; padding: 0; }
.fld2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: start; }
.ferr { font-size: 12px; color: var(--err); padding: 0 20px; }
.cb + .ferr { padding: 0 4px; }
.cb { display: flex; gap: 14px; align-items: flex-start; padding: 8px 4px; cursor: pointer; font-size: 14px; line-height: 20px; position: relative; }
.cb input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.cb .box { width: 20px; height: 20px; flex: none; border-radius: 4px; border: 2px solid var(--osv); color: var(--op); display: grid; place-items: center; }
.cb .box .ms { visibility: hidden; }
.cb input:checked + .box { background: var(--p); border-color: var(--p); }
.cb input:checked + .box .ms { visibility: visible; }
.cb input:focus-visible + .box { outline: 3px solid var(--p); outline-offset: 2px; }
.cb.bad .box { border-color: var(--err); }
.cb .txt { text-wrap: pretty; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-form .btn-lg { align-self: flex-start; padding-inline: 24px 28px; }
.form-err { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: color-mix(in oklch, var(--err) 14%, var(--s)); color: var(--err); font-size: 14px; }
.ct-sent { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; border-radius: 28px; background: var(--s1); text-align: center; }
.ct-sent .ic { width: 112px; height: 112px; border-radius: 56px; background: var(--pc); color: var(--opc); display: grid; place-items: center; }
.ct-sent .t { font-size: 24px; line-height: 32px; }
.ct-sent .d { font-size: 15px; color: var(--osv); }
.ct-side { display: flex; flex-direction: column; gap: 12px; }
.ct-app { border-radius: 24px; background: var(--sc); color: var(--osc); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.ct-app .t { font-size: 18px; line-height: 24px; font-weight: 500; }
.ct-app .d { font-size: 14px; line-height: 20px; }
.ct-legal { border-radius: 24px; background: var(--s1); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.ct-legal .lbl { font-size: 14px; font-weight: 500; color: var(--p); }
.ct-legal .v { font: 14px/22px ui-monospace,Menlo,monospace; color: var(--osv); overflow-wrap: anywhere; }
.pg:has(+ .cta-sec) { padding-bottom: 0; }
@container (max-width: 839px) {
  .pv-title { flex: 1 1 calc(100% - 64px); order: 1; }
  .pv-x { order: 2; }
  .pv-head .seg { order: 3; }
}

/* Long translations (+40 %): buttons wrap instead of overflowing; one-line buttons keep their height. */
.btn { height: auto; min-height: 40px; padding-block: 6px; white-space: normal; text-align: center; max-width: 100%; }
.btn-lg { min-height: 56px; }
.btn-md { min-height: 48px; }
.mk-chips .chip, .chips .chip, .frow .chip { white-space: normal; height: auto; min-height: 32px; padding-block: 4px; text-align: start; max-width: 100%; }

/* Icons: fixed 1em box so the ligature name (e.g. "chevron_right") never takes text width before the icon font loads (CLS). */
:where(.ms) { width: 1em; height: 1em; overflow: hidden; }
.tcard .fbi, .pv-fbi, .pv-nav .on { width: auto; height: auto; }
/* Below-the-fold sections are laid out only when needed (big win for Devanagari text on slow phones). */
main > .sec ~ .sec, .ftr { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Reflow at 320 px (WCAG 1.4.10, 200 % zoom): compact header. */
@container (max-width: 359px) {
  .logo { padding-inline-end: 6px; gap: 6px; }
  .logo img { width: 32px; height: 32px; }
  .wordmark { font-size: 19px; }
  .lang-btn { padding: 0 6px; gap: 2px; }
  .hdr .icon-btn { width: 40px; }
}

/* Store QR codes (dark modules on white in both themes, so phone cameras read them reliably). */
figure.qr { margin: 0; }
.qr img { width: 132px; height: 132px; padding: 8px; border-radius: 16px; background: #fff; display: block; box-shadow: 0 0 0 1px var(--olv); }
.qr figcaption { font-size: 12px; color: var(--osv); }

/* Official store badges (images). Same height for both stores; Google Play is never smaller than other badges. */
.badge-img { display: inline-flex; border-radius: 10px; flex: none; }
.badge-img img { height: 56px; width: auto; display: block; }
.badge-img:active { transform: scale(.98); }
.scard .badge-img { align-self: flex-start; margin-top: 8px; }
.scard .copy .badge-img img { width: auto; height: 56px; border-radius: 0; }

/* ---------- Пересылка SMS (/features/sms-forwarding) ---------- */
.prose { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 26px; text-wrap: pretty; min-width: 0; }
.prose p { margin: 0; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 24px; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose li::marker { color: var(--p); }
.prose h3 { margin: 8px 0 0; font-size: 18px; line-height: 26px; font-weight: 500; scroll-margin-top: 96px; }
.prose code, .faq-it .a code, .fw-tbl code { font: 0.92em/1.4 ui-monospace,Menlo,Consolas,monospace; background: var(--s3); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.prose pre.code { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--s3); overflow-x: auto; }
.prose pre.code code { background: none; padding: 0; white-space: pre; overflow-wrap: normal; }
.prose b { font-weight: 600; }
.fw { gap: clamp(32px,4cqi,48px); }
.fw-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px,4cqi,56px); align-items: center; }
.fw-hero .pg-head { max-width: 640px; }
.fw-hero .prose { color: var(--osv); }
.fw-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; text-decoration: none; width: max-content; }
.fw-demo { border-radius: 28px; background: var(--s1); padding: clamp(20px,3cqi,40px) 16px; display: flex; justify-content: center; }
.fw-phone { width: 300px; max-width: 100%; border-radius: 36px; background: var(--s); color: var(--os); border: 8px solid #1b1f22; padding: 0 0 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.fw-phone .ph-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 4px; font-size: 13px; }
.fw-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; font-size: 20px; line-height: 28px; }
.fw-sec { padding: 8px 20px 4px; font-size: 13px; font-weight: 500; color: var(--p); }
.fw-row { display: flex; align-items: center; gap: 12px; margin: 4px 12px; padding: 10px 12px; border-radius: 16px; background: var(--s2); }
.fw-av { width: 36px; height: 36px; border-radius: 18px; background: var(--sc); color: var(--osc); display: grid; place-items: center; flex: none; }
.fw-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fw-tx .n { font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-tx .s { font-size: 13px; line-height: 18px; color: var(--osv); }
.fw-on { color: var(--p); }
.fw-notif { margin: 16px 12px 12px; padding: 12px 14px; border-radius: 20px; background: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.fw-notif .app-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--osv); margin-bottom: 4px; }
.fw-notif .from { font-size: 14px; font-weight: 600; }
.fw-notif .txt { font-size: 14px; line-height: 20px; }
.fw-phone .ph-home { display: flex; justify-content: center; padding-top: 8px; }
.fw-phone .ph-home > div { width: 96px; height: 4px; border-radius: 2px; background: var(--osv); opacity: .5; }
.fw-sec-b { display: flex; flex-direction: column; gap: 16px; max-width: 880px; scroll-margin-top: 96px; }
.fw-tbl { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 15px; line-height: 22px; margin: -2px 0; }
.fw-tbl th, .fw-tbl td { padding: 14px 18px; text-align: start; vertical-align: top; background: var(--s2); }
.fw-tbl tr:first-child th { background: var(--s3); font-weight: 600; }
.fw-tbl th[scope=row] { font-weight: 500; min-width: 160px; }
.fw-howto, .help-howto { display: flex; flex-direction: column; gap: 16px; }
.ssets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; align-items: start; }
.sset { border-radius: 24px; background: var(--s1); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; scroll-margin-top: 96px; }
.sset h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.sset > ol { display: flex; flex-direction: column; gap: 14px; }
.sset > ol > li { display: flex; gap: 12px; align-items: flex-start; }
.sset .n { width: 28px; height: 28px; border-radius: 14px; flex: none; background: var(--p); color: var(--op); display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 1px; }
.sset .prose { font-size: 15px; line-height: 23px; gap: 8px; }
.fmore { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 500; text-decoration: none; }
.pol-sec .prose { gap: 14px; }
.pol-sec table.grid th:first-child, .pol-sec table.grid td:first-child { width: auto; }