/* Стили главной. Остальные страницы используют styles.css. */

@font-face { font-family: "TG Sans"; src: url("media/fonts/opensans-400.v1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TG Sans"; src: url("media/fonts/opensans-600.v1.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #ffffff;
  --soft: #f4f7f4;
  --memory: #eaf3eb;
  --space-section: clamp(56px, 6vw, 88px);
  --radius-control: 10px;
  --radius-window: 16px;
  --surface: #ffffff;
  --ink: #111512;
  --ink-2: #4a524c;
  --ghost: #646c66;
  --line: #d5dad4;
  --leaf: #21a038;
  --leaf-ink: #16772e;
  --btn: #17803a;
  --btn-hover: #136d31;
  --btn-text: #ffffff;
  --amber: #e0a800;
  --amber-fill: rgba(255, 205, 40, .28);
  --hatch: rgba(74, 82, 76, .22);
  --key-edge: rgba(17, 21, 18, .16);
  --win-shadow: 0 0 0 1px var(--line), 0 6px 18px -8px rgba(0, 0, 0, .18);

  --tg-side: #ffffff;
  --tg-line: #e7e8ea;
  --tg-text: #000000;
  --tg-sub: #707579;
  --tg-ico: #8b959e;
  --tg-sel: #2878b0;
  --tg-search: #f1f2f4;
  --tg-in: #ffffff;
  --tg-out: #effdde;
  --tg-time-in: #66727e;
  --tg-time-out: #3f7d38;
  --tg-tick: #3f9b3a;
  --tg-typing: #1479b8;
  --tg-ghost: #767676;
  --tg-pill: rgba(40, 62, 36, .66);
  --tg-badge: #348534;
  --tg-send: #3390ec;
  --tg-wall: radial-gradient(120% 90% at 0% 0%, #dbddbb 0%, transparent 60%), radial-gradient(110% 90% at 100% 10%, #8fbf8f 0%, transparent 62%), radial-gradient(120% 100% at 0% 100%, #d5d88d 0%, transparent 60%), radial-gradient(110% 110% at 100% 100%, #88b884 0%, transparent 65%), #b9cf9f;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tg-font: "TG Sans", "Open Sans", var(--sans);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.2, 0, 0, 1);
}
/* Тёмная тема: по системной настройке или по переключателю в шапке. Значения в двух блоках одинаковые. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101612;
  --soft: #17201a;
  --memory: #1c2b21;
  --surface: #161a17;
  --ink: #eaede9;
  --ink-2: #a7afa9;
  --ghost: #868e88;
  --line: #272d29;
  --leaf: #34b455;
  --leaf-ink: #5bc777;
  --amber: #f2c14e;
  --amber-fill: rgba(242, 193, 78, .2);
  --hatch: rgba(167, 175, 169, .26);
  --key-edge: rgba(0, 0, 0, .55);
  --win-shadow: 0 0 0 1px var(--line), 0 6px 18px -8px rgba(0, 0, 0, .18);
  --tg-side: #17212b;
  --tg-line: #0e1621;
  --tg-text: #f5f5f5;
  --tg-sub: #8193a3;
  --tg-ico: #6c7883;
  --tg-sel: #2b5278;
  --tg-search: #242f3d;
  --tg-in: #182533;
  --tg-out: #2b5278;
  --tg-time-in: #8394a5;
  --tg-time-out: #b4d3f2;
  --tg-tick: #b4d3f2;
  --tg-typing: #5ea9e6;
  --tg-ghost: #8996a3;
  --tg-pill: rgba(24, 37, 51, .9);
  --tg-badge: #3e6a91;
  --tg-send: #5ea9e6;
  --tg-wall: radial-gradient(100% 80% at 80% 0%, #15202c 0%, transparent 70%), #0e1621;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #101612;
  --soft: #17201a;
  --memory: #1c2b21;
    --surface: #161a17;
    --ink: #eaede9;
    --ink-2: #a7afa9;
    --ghost: #868e88;
    --line: #272d29;
    --leaf: #34b455;
    --leaf-ink: #5bc777;
    --amber: #f2c14e;
    --amber-fill: rgba(242, 193, 78, .2);
    --hatch: rgba(167, 175, 169, .26);
    --key-edge: rgba(0, 0, 0, .55);
    --win-shadow: 0 0 0 1px var(--line), 0 6px 18px -8px rgba(0, 0, 0, .18);
    --tg-side: #17212b;
    --tg-line: #0e1621;
    --tg-text: #f5f5f5;
    --tg-sub: #8193a3;
    --tg-ico: #6c7883;
    --tg-sel: #2b5278;
    --tg-search: #242f3d;
    --tg-in: #182533;
    --tg-out: #2b5278;
    --tg-time-in: #8394a5;
    --tg-time-out: #b4d3f2;
    --tg-tick: #b4d3f2;
    --tg-typing: #5ea9e6;
    --tg-ghost: #8996a3;
    --tg-pill: rgba(24, 37, 51, .9);
    --tg-badge: #3e6a91;
    --tg-send: #5ea9e6;
    --tg-wall: radial-gradient(100% 80% at 80% 0%, #15202c 0%, transparent 70%), #0e1621;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ul, ol, dl, dd, figure, pre, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
svg { display: block; }
kbd { font: inherit; }
code { font-family: var(--mono); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), 1248px); margin-inline: auto; }
.section, .content-section { padding-block: var(--space-section); }
/* Стрелка у раскрывающихся блоков вместо системного треугольника */
:is(.why, .request, .faq details, .install-details) > summary { list-style: none; }
:is(.why, .request, .faq details, .install-details) > summary::-webkit-details-marker { display: none; }
:is(.why, .request, .faq details, .install-details) > summary::after { content: ""; flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .15s var(--ease); }
:is(.why, .request, .faq details, .install-details)[open] > summary::after { rotate: -135deg; translate: 0 2px; }

.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 72px; padding-block: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.mark { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 28px; height: 28px; border-radius: 8px; background: #21a038; }
.mark i { width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 15px; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav .nav-get { padding: 8px 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; }
.nav .nav-get:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.theme-toggle { flex-shrink: 0; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .i-sun, :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
}
@media (max-width: 719px) {
  .top-in { min-height: 64px; padding-block: 10px; }
  .nav { gap: 12px; }
  .nav-wide { display: none; }
}

.hero { padding: clamp(24px, 4vw, 56px) 0 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "get" "scene" "trust"; }
.hero-title { grid-area: title; font-weight: 400; }
.h1-hook { display: block; font: 600 clamp(40px, 4.75vw, 68px)/1.03 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.lead { grid-area: lead; max-width: 30em; margin-top: 24px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.get { grid-area: get; margin-top: clamp(20px, 2.2vw, 32px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: var(--radius-control); font: 600 17px/1 var(--sans); text-decoration: none; cursor: pointer; transition-property: background-color, box-shadow; transition-duration: .16s; transition-timing-function: var(--ease); }
.btn:active { background: var(--btn-hover); }
.btn-main { min-height: 56px; padding: 0 18px 0 24px; background: var(--btn); color: var(--btn-text); }
.btn-main:hover { background: var(--btn-hover); }
.btn-wide { width: 100%; padding: 0 20px; }
.btn-file { padding: 4px 7px; border-radius: 6px; font-size: 12px; letter-spacing: .05em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.get-meta { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.get-other { margin-top: 6px; font-size: 15px; }
.get-status { min-height: 1.4em; margin-top: 4px; font-size: 14px; color: var(--leaf-ink); }
.get-status:empty { display: none; }
/* Без скрипта платформу угадывает медиазапрос, со скриптом решает install.js. На телефоне ссылка о данных стоит у кнопки. */
.get-phone { display: none; }
@media (hover: none) and (pointer: coarse) {
  .get-desk, .trust-privacy { display: none; }
  .get-phone { display: block; }
}
:root.is-phone .get-desk, :root.is-phone .trust-privacy { display: none; }
:root.is-phone .get-phone { display: block; }
:root.is-desk .get-desk, :root.is-desk .trust-privacy { display: block; }
:root.is-desk .get-phone { display: none; }
.trust { grid-area: trust; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); align-self: start; }
.trust li { position: relative; padding-left: 13px; }
.trust li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--leaf); }
@media (max-width: 719px) {
  .hero { padding-top: 8px; }
  .lead { margin-top: 14px; }
  .get { margin-top: 16px; }
  .get-meta { margin-top: 8px; }
  .btn-wide { font-size: 16px; padding-inline: 12px; line-height: 1.2; }
}
@media (max-width: 400px) {
  .h1-hook { display: block; font: 600 clamp(40px, 4.75vw, 68px)/1.03 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
  .lead { font-size: 16px; }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "title scene" "lead scene" "get scene" "trust scene"; grid-template-rows: auto auto auto 1fr; column-gap: clamp(32px, 4vw, 64px); }
  .hero-title { padding-top: 24px; }
}

.scene { grid-area: scene; position: relative; min-width: 0; margin-top: 32px; }
.tg { --tg-h: 340px; height: var(--tg-h); display: grid; grid-template-rows: 28px minmax(0, 1fr); border-radius: 12px; overflow: hidden; background: var(--tg-side); color: var(--tg-text); box-shadow: var(--win-shadow); font: 14px/1.38 var(--tg-font); }
.tg-title { position: relative; display: grid; place-items: center; border-bottom: 1px solid var(--tg-line); font: 600 13px/1 var(--sans); color: var(--tg-sub); }
.tl { position: absolute; left: 12px; top: 8px; display: flex; gap: 8px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.tl i:nth-child(2) { background: #febc2e; }
.tl i:nth-child(3) { background: #28c840; }
.tg-body { display: grid; min-height: 0; }
.tg-scene { display: none; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.scene:has(#chat-1:checked) [data-scene="1"],
.scene:has(#chat-2:checked) [data-scene="2"] { display: grid; animation: swap .18s var(--ease); }
.tg-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--tg-ico); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tg-list { display: none; position: relative; border-right: 1px solid var(--tg-line); overflow: hidden; }
.tg-list::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 8px); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.tg-search { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 14px; }
.tg-search-field { display: flex; flex: 1; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--tg-search); color: var(--tg-sub); font-size: 14px; }
.tg-search-field svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tg-chat { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px; height: 62px; padding: 0 10px; }
.tg-chat.is-active { background: var(--tg-sel); }
.tg-chat.is-active, .tg-chat.is-active * { color: #fff; }
.tg-chat-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; min-width: 0; }
.tg-chat-main b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tg-chat-main time { padding-left: 8px; font-size: 12.5px; color: var(--tg-sub); }
.tg-chat-prev { overflow: hidden; color: var(--tg-sub); white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
.tg-chat-typing { display: none; color: var(--tg-typing); font-size: 13.5px; }
.tg-scene:has([data-state="typing"]) .is-active .tg-chat-prev { display: none; }
.tg-scene:has([data-state="typing"]) .is-active .tg-chat-typing { display: block; }
.tg-badge { justify-self: end; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--tg-badge); color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.ava { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 600; background: linear-gradient(#ffa85c, #ff7d4a); }
.ava svg { width: 22px; height: 22px; fill: #fff; }
.ava-violet { background: linear-gradient(#a695e7, #7b6be0); }
.ava-cyan { background: linear-gradient(#5fc6f5, #2a9ef1); }
.ava-green { background: linear-gradient(#9ad164, #5fb945); }
.ava-red { background: linear-gradient(#ff8a80, #f2575d); }
.ava-saved { background: linear-gradient(#72d5fd, #2a9ef1); }

.tg-pane { display: grid; grid-template-rows: 52px minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.tg-head { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--tg-line); }
.tg-head-main { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.tg-head-main b { font-weight: 600; }
.tg-status { font-size: 13px; color: var(--tg-sub); }
.st-typing { display: none; color: var(--tg-typing); }
.tg-head-icons { display: flex; gap: 18px; }
.tg-head-icons svg { width: 21px; height: 21px; fill: none; stroke: var(--tg-ico); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tg-head-icons .i-more { fill: var(--tg-ico); stroke: none; }
.tg-history { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; padding: 10px 14px; background: var(--tg-wall); }
.tg-msgs { display: flex; flex-direction: column; gap: 4px; }
.tg-day { align-self: center; margin-bottom: 8px; }
.tg-day span { display: inline-block; padding: 2px 10px; border-radius: 11px; background: var(--tg-pill); color: #fff; font-size: 13px; font-weight: 600; }
.msg { position: relative; max-width: min(82%, 440px); padding: 6px 10px 6px 11px; border-radius: 15px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); transition: box-shadow .2s var(--ease); }
.msg p { display: inline; overflow-wrap: anywhere; }
.msg time { float: right; margin: 8px -2px -6px 12px; font-size: 12px; line-height: 12px; color: var(--tg-time-in); }
.msg.in { align-self: flex-start; background: var(--tg-in); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; margin-block: 6px; background: var(--tg-out); border-bottom-right-radius: 4px; }
.msg.out time { margin-right: 20px; color: var(--tg-time-out); }
.msg.in::before, .msg.out::before { content: ""; position: absolute; bottom: 0; width: 8px; height: 13px; }
.msg.in::before { left: -7px; background: var(--tg-in); -webkit-mask: radial-gradient(8px 13px at 0 0, transparent 98%, #000 100%); mask: radial-gradient(8px 13px at 0 0, transparent 98%, #000 100%); }
.msg.out::before { right: -7px; background: var(--tg-out); -webkit-mask: radial-gradient(8px 13px at 100% 0, transparent 98%, #000 100%); mask: radial-gradient(8px 13px at 100% 0, transparent 98%, #000 100%); }
.ticks {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l3.2 3.2L11 2.2M7.8 8.8l.4.4L15 2.2'/%3E%3C/svg%3E");
  position: absolute;
  right: 9px;
  bottom: 7px;
  width: 16px;
  height: 10px;
  background: var(--tg-tick);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}
.msg-last, .msg-sent { transition: opacity .32s var(--ease), translate .32s var(--ease), box-shadow .2s var(--ease); }
.msg-sent { display: none; }
.tg-pane[data-state="sent"] .msg-sent { display: block; animation: arrive .24s var(--ease); }

.tg-compose { display: flex; align-items: flex-end; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--tg-line); background: var(--tg-side); transition: box-shadow .2s var(--ease); }
.tg-compose:focus-within { box-shadow: inset 0 0 0 2px var(--tg-typing); }
.tg-compose > .tg-ico { margin-bottom: 6px; }
.tg-field { position: relative; display: grid; flex: 1; min-width: 0; min-height: 36px; padding: 8px 0; font-size: 14.5px; line-height: 1.4; cursor: default; }
.tg-field > .tg-preview, .tg-field > .ghost { grid-area: 1 / 1; }
.tg-preview { width: 100%; min-height: 20px; margin: 0; padding: 0; border: 0; outline: 0; overflow-wrap: anywhere; white-space: pre-wrap; background: transparent; color: var(--tg-text); font: inherit; }
.tg-preview:focus-visible { outline: none; }
.tg-preview:empty::before { content: attr(data-placeholder); color: transparent; }
.ghost { position: relative; color: var(--tg-ghost); pointer-events: none; }
.ghost-wait { display: none; }
.ghost-line { display: block; }
.ghost-tab { display: inline-block; margin-left: 7px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px currentColor; font-size: 11px; font-weight: 600; line-height: 16px; vertical-align: 1px; pointer-events: auto; cursor: pointer; }
.from-mem { text-decoration: underline 2px transparent; text-underline-offset: 4px; transition: text-decoration-color .2s var(--ease); }
.ghost-check:checked ~ .ghost .ghost-text { color: var(--tg-text); }
.ghost-check:checked ~ .ghost .ghost-tab { display: none; }
.tg-act { position: relative; flex: none; width: 24px; height: 24px; margin-bottom: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.tg-act::after { content: ""; position: absolute; inset: -10px; }
.tg-act:disabled { cursor: default; }
.tg-act svg { position: absolute; inset: 0; transition-property: opacity, scale, filter; transition-duration: .3s; transition-timing-function: var(--ease); }
.tg-act .i-send { opacity: 0; scale: .25; filter: blur(4px); fill: var(--tg-send); stroke: none; }
.tg-compose:has(.ghost-check:checked) .i-mic, .tg-pane[data-state="accepted"] .i-mic { opacity: 0; scale: .25; filter: blur(4px); }
.tg-compose:has(.ghost-check:checked) .i-send, .tg-pane[data-state="accepted"] .i-send { opacity: 1; scale: 1; filter: none; }

/* Состояния сцены. Без JS остаётся конечное состояние: ответ серым в поле */
.tg-pane[data-state="typing"] .msg-last { opacity: 0; translate: 0 8px; }
.tg-pane[data-state="typing"] .st-typing { display: inline; }
.tg-pane[data-state="typing"] .st-seen { display: none; }
.tg-pane:is([data-state="typing"], [data-state="incoming"], [data-state="dismissed"], [data-state="sent"]) .ghost { display: none; }
.tg-pane:is([data-state="typing"], [data-state="incoming"], [data-state="dismissed"], [data-state="sent"]) .tg-preview:empty::before { color: var(--tg-ghost); }
.tg-pane[data-state="preparing"] .ghost-wait { display: inline; }
.tg-pane[data-state="preparing"] .ghost-line { display: none; }
.tg-pane[data-state="ghost"] .ghost-line { animation: emerge .62s var(--ease) both; }
.scene[data-first-view] .ghost-line { animation-duration: 150ms; }
.tg-pane[data-state="accepted"] .ghost-tab { display: none; }
.tg-pane[data-state="accepted"] .ghost { visibility: hidden; }
.gdots, .tdots { display: inline-flex; gap: 2px; }
.gdots { margin-left: 2px; }
.tdots { margin-left: 3px; vertical-align: 1px; }
.gdots i, .tdots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: typing 1.2s ease-in-out infinite; }
.gdots i:nth-child(2), .tdots i:nth-child(2) { animation-delay: .16s; }
.gdots i:nth-child(3), .tdots i:nth-child(3) { animation-delay: .32s; }

/* Слой «Почему такой ответ»: жёлтым прочитанное, зелёным поле, штриховкой то, что не читается */
.scene:has(.why[open]) .tg-list::after { opacity: 1; }
.scene:has(.why[open]) .msg[data-read] { box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--amber-fill), 0 0 0 3.5px var(--amber); }
.scene:has(.why[open]) .msg[data-read]:nth-last-child(3) { transition-delay: .07s; }
.scene:has(.why[open]) .msg[data-read]:nth-last-child(4) { transition-delay: .14s; }
.scene:has(.why[open]) .msg[data-read]:nth-last-child(5) { transition-delay: .21s; }
.scene:has(.why[open]) .tg-compose { box-shadow: inset 0 0 0 2px var(--leaf); }
.scene:has(.why[open]) .from-mem { text-decoration-color: var(--leaf); }

.scene-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 18px; }
.keys { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; }
.key { display: none; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene:has(#chat-1:checked) [data-key="1"], .scene:has(#chat-2:checked) [data-key="2"] { display: inline-flex; }
.key kbd { display: inline-grid; place-items: center; min-width: 64px; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 15px/1 var(--sans); box-shadow: 0 0 0 1px var(--line), inset 0 -3px 0 var(--key-edge), 0 1px 2px rgba(0, 0, 0, .06); transition-property: translate, box-shadow, background-color, color; transition-duration: .12s; }
.key:hover kbd { box-shadow: 0 0 0 1px var(--ink-2), inset 0 -3px 0 var(--key-edge), 0 1px 2px rgba(0, 0, 0, .06); }
.key:active kbd, .scene.is-pressed .key kbd { translate: 0 2px; box-shadow: 0 0 0 1px var(--line), inset 0 -1px 0 var(--key-edge); }
.key .k-done, .key .k-sent { display: none; color: var(--leaf-ink); }
.scene:is([data-accepted], [data-sent]) .key kbd,
.scene:has(#ghost-accept:checked) [data-key="1"] kbd,
.scene:has(#ghost-accept-2:checked) [data-key="2"] kbd { background: var(--btn); color: #fff; box-shadow: 0 0 0 1px var(--btn), inset 0 -1px 0 rgba(0, 0, 0, .2); translate: 0 2px; }
.scene[data-accepted] .key .k-do,
.scene:has(#ghost-accept:checked) [data-key="1"] .k-do,
.scene:has(#ghost-accept-2:checked) [data-key="2"] .k-do { display: none; }
.scene[data-accepted] .key .k-done,
.scene:has(#ghost-accept:checked):not([data-sent]) [data-key="1"] .k-done,
.scene:has(#ghost-accept-2:checked):not([data-sent]) [data-key="2"] .k-done { display: inline; }
.scene[data-sent] .key .k-do, .scene[data-sent] .key .k-done { display: none; }
.scene[data-sent] .key .k-sent { display: inline; }
/* Кнопка для клавиатуры и экранного диктора: видна, только когда на ней фокус */
#scene-accept { border: 0; border-radius: 10px; background: var(--btn); color: white; padding: 10px 14px; min-height: 44px; cursor: pointer; }
#scene-accept:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#scene-accept:focus-visible { position: absolute; left: 0; top: 0; z-index: 2; }
.again { position: relative; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.again:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); cursor: pointer; transition: box-shadow .15s, color .15s, background-color .15s; }
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.chips input:checked + .chip { background: var(--ink); color: var(--paper); box-shadow: none; }
.chips input:focus-visible + .chip { outline: 3px solid var(--leaf); outline-offset: 2px; }
/* Невидимая область касания до 44 px у мелких кнопок */
.chip::after, .again::after, .why summary::before { content: ""; position: absolute; inset: -4px 0; }
/* Строка факта под клавишей Tab: на широком экране под рядом «Tab и переписки», на телефоне сразу под Tab */
.demo-static, .scene-fact { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.scene-foot > noscript, .scene-fact { order: 1; flex-basis: 100%; }
.scene-fact { display: none; }
.scene:has(#chat-1:checked) .scene-fact-1, .scene:has(#chat-2:checked) .scene-fact-2 { display: block; }
.why { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.why summary { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }
.why summary:hover { color: var(--ink); text-decoration-color: currentColor; }
.why-card { margin-top: 8px; padding: 16px 18px 14px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
.why-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.why-key > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.sw-read { background: var(--amber-fill); box-shadow: inset 0 0 0 1.5px var(--amber); }
.sw-write { box-shadow: inset 0 0 0 1.5px var(--leaf); }
.sw-off { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1.2px, transparent 1.2px 3.6px); opacity: .7; }
.sw-mem { height: 2px; border-radius: 1px; background: var(--leaf); align-self: center; }
.why-list { display: none; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.scene:has(#chat-1:checked) [data-why-for="1"], .scene:has(#chat-2:checked) [data-why-for="2"] { display: grid; }
.why-list div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; }
.why-list dt { color: var(--ink-2); }
.why-more { margin-top: 12px; font-size: 14px; }

/* Сцена на телефоне: без заголовка окна и списка чатов */
@media (max-width: 719px) {
  .scene { margin-top: 16px; }
  .tg { --tg-h: 300px; grid-template-rows: minmax(0, 1fr); border-radius: 14px; box-shadow: 0 0 0 .5px var(--line), 0 10px 26px -14px #0005; }
  .tg-title { display: none; }
  .tg-pane { background: var(--tg-wall); }
  .tg-head { padding: 0 12px 0 16px; background: var(--tg-side); }
  .tg-head-icons svg:not(.i-more) { display: none; }
  .tg-history { padding-inline: 10px; background: none; -webkit-mask: linear-gradient(transparent, #000 32px); mask: linear-gradient(transparent, #000 32px); }
  .tg-day { display: none; }
  .tg-compose { gap: 10px; padding-inline: 10px; }
  .tg-preview, .tg-field { font-size: 14px; }
  .scene-foot { gap: 8px 12px; margin-top: 10px; }
  .keys { width: 100%; }
  .key { flex: 1; }
  .key kbd { flex: none; }
  .scene-foot > noscript, .scene-fact { order: 0; }
  .chips { width: 100%; flex-wrap: wrap; gap: 4px; }
  .chip { min-height: 40px; padding: 0 11px; font-size: 13.5px; white-space: nowrap; }
  .why-list div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* В «Почему такой ответ» переписка видна целиком */
  .scene:has(.why[open]) .tg { height: auto; min-height: 0; }
  .scene:has(.why[open]) .tg-pane { grid-template-rows: 54px auto auto; }
  .scene:has(.why[open]) .tg-history { overflow: visible; mask: none; -webkit-mask: none; }
  .scene:has(.why[open]) .tg-msgs { padding-top: 14px; }
}
@media (max-width: 400px) {
  .tg { --tg-h: 268px; }
  .tg-compose .tg-smile { display: none; }
  .chip { padding: 0 9px; font-size: 13px; }
}
@media (max-width: 370px) {
  .chips { flex-wrap: wrap; }
}
@media (min-width: 720px) {
  .tg { --tg-h: 520px; }
  .tg-scene { grid-template-columns: 72px minmax(0, 1fr); }
  .tg-list { display: block; }
}
@media (min-width: 960px) {
  .scene { margin-top: 0; }
  .tg { --tg-h: 430px; min-height: 430px; }
}
/* На узком десктопе сцена в правой колонке: от списка чатов остаются аватары */
@media (min-width: 720px) {
  .tg-scene { grid-template-columns: 72px minmax(0, 1fr); }
  .tg-search { justify-content: center; padding: 0; }
  .tg-search-field, .tg-chat-main { display: none; }
  .tg-chat { grid-template-columns: 46px; justify-content: center; padding: 0; }
}
@media (forced-colors: active) {
  .scene:has(.why[open]) .msg[data-read] { outline: 2px solid CanvasText; }
}

.sec-head { max-width: 48rem; margin-bottom: clamp(24px, 3.4vw, 44px); }
.sec-head h2 { font: 600 clamp(30px, 3.1vw, 44px)/1.12 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.sec-lead { max-width: 34em; margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); text-wrap: pretty; }
.sec-more { margin-top: 28px; font-size: 16px; }
.suggest-window, .voice-chat, .settings-window, .menu-sample { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fineprint { max-width: 44em; margin-top: 28px; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.request { margin-top: 20px; }
.request summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .25em; }


.boundary-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.boundary-flow li { position: relative; border-top: 2px solid var(--leaf); padding-top: 18px; }
.boundary-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -28px; top: 14px; color: var(--leaf-ink); }
.boundary-flow h3 { font-size: 18px; margin-bottom: 10px; }
.boundary-flow p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 719px) {
  .boundary-flow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .boundary-flow li:not(:last-child)::after { display: none; }
}

.case-feature { display: grid; gap: 32px; }
.case-meta { font-size: 14px; color: var(--ink-2); }
.case-caption { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.case-thread { display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.case-thread b { color: var(--ink); font-weight: 600; }
.case-context .case-thread { margin-block: 20px; }
.case-quote { font: 600 clamp(22px, 2.2vw, 30px)/1.3 var(--sans); letter-spacing: -.01em; text-wrap: balance; margin-block: 18px; }
.case-result { min-width: 0; }
.suggest-target { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-list { padding: 6px; }
.suggest-option { display: flex; gap: 12px; padding: 12px 10px; border-radius: 8px; font: 16px/1.4 ui-serif, "New York", Georgia, serif; }
.suggest-option kbd, .suggest-own kbd { font: 12px/1.8 var(--sans); color: var(--ink-2); flex-shrink: 0; }
.suggest-option.is-selected { background: color-mix(in srgb, var(--leaf) 12%, var(--surface)); }
.suggest-own { padding: 8px 16px; font-size: 14px; }
.suggest-own kbd { margin-right: 12px; }
.suggest-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.sample-field { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--tg-side); color: var(--tg-ghost); font: 15px/1.5 var(--tg-font); margin-top: 12px; }
.case-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.sample-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; cursor: pointer; }
.sample-tab kbd { padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }
.continuation .after { display: none; }
.continuation:has(:checked) .before { display: none; }
.continuation:has(:checked) .after { display: inline; }
.continuation:has(:checked) .sample-field { color: var(--tg-text); }
.continuation:has(:focus-visible) .sample-tab { outline: 3px solid var(--leaf); outline-offset: 2px; }
@media (min-width: 720px) {
  .case-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
}

.voice-layout { display: grid; gap: 32px; }
.voice-chat { padding: 22px; }
.voice-chat-head { font-weight: 650; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
.voice-profile h3 { font-size: 18px; }
.voice-profile dl { margin-top: 20px; }
.voice-profile dt { font-weight: 600; margin-top: 16px; }
.voice-profile dd { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.memory-match { text-decoration: underline 2px var(--leaf); text-underline-offset: 4px; }
.voice-notes { display: grid; gap: 18px; margin-top: 32px; color: var(--ink-2); font-size: 16px; }
@media (max-width: 719px) {
  .voice-chat { padding: 16px; }
}
@media (min-width: 720px) {
  .voice-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
  .voice-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

.rail { position: relative; display: grid; }
.rail::before { content: ""; position: absolute; left: 5px; top: 30px; bottom: 30px; width: 2px; background: var(--line); }
.step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding-block: 20px; border-top: 1px solid var(--line); }
.step::before { content: ""; grid-row: 1 / span 2; position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--leaf); }
.step-limit { grid-column: 2; font: 400 14px/1.6 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.step h3 { grid-column: 2; font: 600 clamp(22px, 2vw, 28px)/1.2 var(--sans); letter-spacing: -.01em; }
.step-text { grid-column: 2; display: grid; gap: 8px; max-width: 40em; margin-top: 6px; color: var(--ink-2); text-wrap: pretty; }
.step-note { font-size: 15px; }
.engineering h3 { font-size: 18px; margin-bottom: 12px; }
.engineering-body { display: grid; gap: 24px; padding-top: 20px; font-size: 16px; color: var(--ink-2); }
.engineering-columns { display: grid; gap: 32px; }
.engineering-notes { display: grid; gap: 12px; }
.pixel-results { font-size: 14px; margin-top: 14px; font-variant-numeric: tabular-nums; }
.pixel-results > div { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pixel-fail { font-weight: 600; color: var(--ink); }
.command-line { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.command-line code { font: 12px/1.6 var(--mono); overflow-wrap: anywhere; }
.copy-command { display: none; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12px; cursor: pointer; }
.home-ready .copy-command { display: inline-flex; align-items: center; }
@media (min-width: 720px) {
  .step { grid-template-columns: 24px minmax(120px, 2fr) minmax(0, 3fr) minmax(0, 6fr); column-gap: 24px; padding-block: 24px; }
  .step::before { grid-row: 1; margin-top: 10px; }
  .step > .step-limit, .step > h3, .step > .step-text { grid-column: auto; margin-top: 0; }
  .step-limit { padding-top: 6px; }
  .rail::before { top: 34px; bottom: 34px; }
  .engineering-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

.nots { display: grid; gap: 22px 32px; }
.nots h3 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.nots p { margin-top: 6px; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.privacy-note { margin-top: 20px; max-width: 60em; font-size: 15px; color: var(--ink-2); }
.privacy-layout { display: grid; gap: 32px; margin-top: 36px; }
.settings-title { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.traffic { display: flex; gap: 5px; }
.traffic i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.traffic i + i { background: #febc2e; }
.traffic i + i + i { background: #28c840; }
.settings-caption { padding: 16px 20px 0; font-size: 12px; color: var(--ink-2); }
.settings-group { padding: 14px 20px 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.setting-row { margin-inline: 20px; padding-block: 8px 14px; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-row label { display: flex; align-items: center; gap: 16px; min-height: 44px; cursor: pointer; }
.setting-row label > span:first-child { flex: 1; min-width: 0; }
.setting-row b { font-size: 14px; font-weight: 600; display: block; }
.setting-row small { font-size: 12px; color: var(--ink-2); display: block; }
.setting-switch { width: 34px; height: 20px; border-radius: 99px; background: var(--ink-2); padding: 2px; flex-shrink: 0; }
.setting-switch::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
:checked + .setting-switch { background: var(--leaf); }
:checked + .setting-switch::before { transform: translateX(14px); }
:focus-visible + .setting-switch { outline: 3px solid var(--leaf); outline-offset: 4px; }
.setting-row > p { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin-top: 8px; }
.setting-on { display: none; }
.setting-row:has(:checked) .setting-on { display: block; }
.setting-row:has(:checked) .setting-off { display: none; }
.privacy-side h3 { font-size: 18px; }
.privacy-side > h3:not(:first-child) { margin-top: 28px; }
.privacy-side > p { font-size: 15px; margin-top: 14px; color: var(--ink-2); }
.permission-list { margin-top: 20px; }
.permission-list dt { font-weight: 600; margin-top: 16px; }
.permission-list dd { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.menu-sample { padding: 12px 16px; margin-top: 16px; }
.menu-sample > p { margin: 0; padding-block: 6px; font-size: 13px; }
.menu-sample kbd { float: right; padding-left: 12px; font-size: 12px; }
.request-sheet { margin-top: 10px; padding: 18px 20px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.request-head { font: 13px/1.5 var(--mono); color: var(--ink-2); }
.request-head b { color: var(--ink); font-weight: 600; }
.json { margin-top: 12px; overflow-x: auto; font: 13px/1.6 var(--mono); color: var(--ink); tab-size: 2; }
.json mark { padding: 0 1px; border-radius: 2px; background: var(--amber-fill); box-shadow: 0 0 0 1px var(--amber); color: inherit; }
.json mark.mem { background: none; box-shadow: none; text-decoration: underline 2px var(--leaf); text-underline-offset: 3px; }
.request-foot { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
@media (min-width: 720px) {
  .nots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
  .settings-window { align-self: start; }
}
@media (min-width: 960px) {
  .nots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.where-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.where h3 { font-size: 18px; margin-bottom: 10px; }
.where-grid p { font-size: 16px; color: var(--ink-2); }
.where-grid p + p { margin-top: 12px; }
@media (max-width: 719px) {
  .where-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.platform-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-tab, .platform-choices label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--ink-2); cursor: pointer; }
.platform-picker > input:checked + label { background: var(--ink); color: var(--paper); box-shadow: none; }
.platform-picker > input:focus-visible + label { outline: 3px solid var(--leaf); outline-offset: 2px; }
.platform-panels { width: 100%; }
.platform-panel { display: none; max-width: 48em; margin-top: 28px; }
.platforms:has(#platform-mac:checked) #install-mac,
.platforms:has(#platform-windows:checked) #install-windows,
.platforms:has(#platform-browser:checked) #install-browser,
.platforms:has(#platform-android:checked) #install-android,
.platforms:has(#platform-ios:checked) #install-ios { display: block; }
.platform-panel h3 { font: 600 clamp(22px, 2vw, 28px)/1.2 var(--sans); }
.platform-panel p { margin-top: 10px; color: var(--ink-2); text-wrap: pretty; }
.platform-panel .btn { margin-top: 20px; }
.platform-meta { font-size: 14px; }
.platform-panel .install-warning { max-width: 40em; }
.install-short { font-size: 15px; max-width: 40em; }
.platform-panel .install-short { margin-top: 16px; }
.install-trust, .release-line { font-size: 14px; }
.platform-panel .install-trust, .platform-panel .release-line { margin-top: 4px; }
.release-line { font-variant-numeric: tabular-nums; }
.install-details { margin-top: 24px; }
.install-details summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; font-weight: 600; }
.install-details .answer { padding-block: 12px; }
.install-details ol { list-style: decimal; padding-left: 24px; }
.install-details li + li { margin-top: 12px; }
.install-details p { font-size: 15px; }
.platform-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.install-help { width: 100%; margin-top: 28px; font-size: 15px; color: var(--ink-2); }
/* На широком экране заголовок слева, выбор платформы и установка справа */
@media (min-width: 960px) {
  .install-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .platform-panel { margin-top: 24px; }
}

.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; cursor: pointer; }
.faq summary::after { margin-right: 6px; color: var(--ink-2); }
.faq summary:hover, .faq summary:hover::after { color: var(--leaf-ink); }
.faq details > p { max-width: 48em; padding: 8px 0 12px; color: var(--ink-2); }

.foot { margin-top: clamp(24px, 3vw, 40px); padding-block: 28px 40px; border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.foot-links a { display: inline-block; padding-block: 4px; color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-guides { width: 100%; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.foot-guides a { display: inline-block; padding-block: 4px; }
.foot-small { width: 100%; font-size: 14px; color: var(--ink-2); }

@keyframes typing { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
@keyframes emerge { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes arrive { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes swap { from { opacity: .4; } to { opacity: 1; } }

/* Композиция главной: переписка, действия, примеры, память, данные, установка. */
.logo { font-size: 20px; letter-spacing: -.025em; }
.top-in { min-height: 80px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-title { max-width: none; }
.lead { max-width: 26em; }
.get-meta { font-size: 13px; }
.get-other a { display: inline-flex; align-items: center; min-height: 44px; }
.trust { margin-top: 18px; padding-top: 0; border-top: 0; gap: 4px 18px; }
.trust-privacy { width: 100%; }
.trust-privacy::before { display: none; }
.trust li.trust-privacy { padding-left: 0; }
.trust-privacy a { display: inline-flex; align-items: center; min-height: 36px; }
.scene-toolbar { margin-bottom: 16px; }
.scene-title { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.scene-toolbar .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr)); width: 100%; gap: 12px; margin-top: 12px; }
.scene-toolbar .chip { display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 12px; min-height: 76px; padding: 14px 16px; font-size: 16px; line-height: 1.4; font-weight: 500; white-space: normal; color: var(--ink); background: var(--paper); }
.scene-toolbar .chip .ui-icon { color: var(--ink-2); }
.scene-toolbar .chips input:checked + .chip { background: var(--memory); color: var(--ink); box-shadow: inset 0 0 0 2px var(--leaf-ink); }
.scene-toolbar .chips input:checked + .chip .ui-icon { color: var(--leaf-ink); }
.scenario-indicator { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink-2); border-radius: 50%; }
.chips input:checked + .chip .scenario-indicator { border-color: var(--leaf-ink); background: var(--leaf-ink); }
.chips input:checked + .chip .scenario-indicator::after { content: ""; width: 5px; height: 9px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.scene-foot { margin-top: 16px; }
.demo-note { margin-bottom: 18px; font-size: 16px; line-height: 1.5; }
.why-card .scene-fact { margin-bottom: 14px; }
.why { margin-top: 4px; }
.why > summary { min-height: 44px; font-size: 16px; font-weight: 500; color: var(--ink); }
.tg { border-radius: var(--radius-window); }
.where { padding-block: 30px; background: var(--soft); }
.where-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.where-intro > div { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 32px; }
.where h2 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.where-intro > div > p { max-width: 48em; font-size: 15px; color: var(--ink-2); }
.compatibility-details { margin-top: 0; }
.compatibility-details > summary { font-size: 14px; font-weight: 400; }
.compatibility-details[open] { padding-top: 12px; }
.compatibility-details[open] > summary { margin-bottom: 20px; }
.workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-block: 40px 24px; }
.workflow li { max-width: 25em; }
.workflow-key { display: inline-grid; place-items: center; min-width: 72px; height: 56px; padding: 0 14px; margin-bottom: 24px; border-radius: 12px; background: var(--soft); box-shadow: inset 0 -3px 0 var(--line); color: var(--ink); font-size: 18px; font-weight: 500; }
.workflow-key svg { width: 28px; height: 28px; }
.workflow h3 { margin-bottom: 12px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.workflow p { color: var(--ink-2); font-size: 16px; }
.mechanism, .engineering { margin-top: 0; font-size: 14px; }
.mechanism > summary, .engineering > summary { font-weight: 400; }
.mechanism .rail { margin-block: 20px; }
#cases { background: var(--soft); }
.case-picker { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.case-tab { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 2px solid transparent; font-size: 16px; color: var(--ink-2); cursor: pointer; }
.case-tab:hover { color: var(--ink); }
.case-picker > input:checked + label { border-bottom-color: var(--btn); color: var(--ink); font-weight: 600; }
.case-picker > input:focus-visible + label { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 3px; }
.case-panels { width: 100%; padding-top: 32px; }
.case-panel { display: none; }
.case-picker:has(#case-deadline:checked) [data-case="1"], .case-picker:has(#case-payment:checked) [data-case="2"], .case-picker:has(#case-continue:checked) [data-case="3"] { display: block; }
.case-feature { align-items: start; }
.case-context { max-width: 29em; }
.case-context .case-quote { margin-top: 24px; }
.case-history { margin-bottom: 16px; }
.case-result > .sample-field:not(.sample-placeholder), .case-result > .continuation { margin-top: 36px; }
.case-result > .sample-field:not(.sample-placeholder), .case-result .continuation > .sample-field { font-size: 20px; padding: 24px; }
.case-links a { display: inline-flex; min-height: 44px; align-items: center; }
.memory-section { background: var(--memory); }
.memory-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 24px 72px; align-items: start; }
.memory-grid > .sec-head { margin-bottom: 0; }
.memory-grid .sec-lead { max-width: 26em; }
.memory-grid .voice-layout { display: flex; flex-direction: column-reverse; gap: 24px; grid-column: 2; grid-row: 1 / span 3; }
.voice-profile { padding-inline: 24px; }
.voice-profile h3 { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.voice-profile dl { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px 16px; margin-top: 16px; font-size: 14px; }
.voice-profile dt, .voice-profile dd { margin: 0; font-size: 14px; }
.voice-profile .case-caption { display: none; }
.voice-chat { box-shadow: 0 8px 28px -20px #0006; }
.voice-chat .sample-field { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.memory-disclosure { grid-column: 1; font-size: 14px; color: var(--ink-2); max-width: 31em; }
.memory-details { grid-column: 1; margin-top: 0; font-size: 14px; }
.memory-details > summary { font-weight: 400; }
.voice-notes { grid-template-columns: 1fr; font-size: 14px; margin-top: 16px; }
.boundary-flow { gap: 32px; }
.boundary-flow li { border-top: 1px solid var(--line); padding-top: 20px; }
.boundary-flow h3 { font-size: 20px; }
.boundary-flow p { font-size: 16px; }
.privacy-detail-body { padding-top: 24px; }
.privacy-details { padding-top: 12px; }
.privacy-details > summary { font-weight: 500; }
#privacy .fineprint { max-width: 60em; }
.faq { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
.faq details { padding-block: 10px; }
.faq summary { font-weight: 500; font-size: 17px; }
.faq details > p { font-size: 16px; }
.team { padding-top: 0; }
.team-intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 48px; padding-top: var(--space-section); border-top: 1px solid var(--line); }
.team-intro .sec-head { margin-bottom: 0; }
.team-intro h2 { max-width: 10em; }
.team-note { max-width: 32em; color: var(--ink-2); font-size: 17px; }
.team-contact { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; text-underline-offset: 4px; }
.team-contact span { text-decoration: none; }
.team-portraits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 36px 0 0; list-style: none; }
.team-portraits figure { margin: 0; }
.team-portraits img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--soft); }
.team-portraits figcaption { margin-top: 16px; font-size: 22px; font-weight: 500; line-height: 1.3; }
.install { background: var(--soft); }
.install-grid { column-gap: 72px; }
.install .sec-lead { font-size: 17px; max-width: 25em; }
.install .sec-head h2 { max-width: 11em; }
.platform-picker { gap: 8px; width: 100%; }
.platform-tab { padding-inline: 14px; background: var(--paper); border-radius: var(--radius-control); }
.platform-tab:hover { background: var(--paper); color: var(--ink); }
.platform-panel { min-height: 300px; }
.platform-panel h3 { margin-top: 28px; }
.platform-panel .btn { margin-top: 24px; }
.foot { margin-top: 0; }
.foot-links a, .foot-guides a { min-height: 44px; display: inline-flex; align-items: center; }
a, button, summary, label { touch-action: manipulation; }
@media (max-width: 959px) {
  .hero-title { max-width: 650px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "title title" "lead get" "scene scene" "trust trust"; column-gap: 32px; }
  .get { margin-top: 24px; }
  .memory-grid { gap: 24px 40px; }
  .install-grid { display: grid; gap: 20px; }
}
@media (max-width: 719px) {
  .top-in { min-height: 64px; }
  .nav .nav-wide { display: none; }
  .logo { font-size: 18px; }
  .hero { padding-top: 24px; padding-bottom: 32px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "get" "scene" "trust"; }
  .hero-title { max-width: 10em; }
  .h1-hook { font-size: clamp(38px, 9.5vw, 56px); }
  .lead { margin-top: 18px; font-size: 17px; max-width: 32em; }
  .get { margin-top: 20px; }
  .scene { margin-top: 24px; }
  .scene-toolbar { margin-bottom: 12px; }
  .scene-toolbar .chips { gap: 8px; }
  .scene-toolbar .chip { grid-template-columns: minmax(0, 1fr) 20px; gap: 10px; padding: 14px; align-content: start; }
  .scene-toolbar .chip .ui-icon { grid-column: 1; grid-row: 1; }
  .scenario-indicator { grid-column: 2; grid-row: 1; }
  .scenario-name { grid-column: 1 / -1; grid-row: 2; }
  .tg { --tg-h: 300px; }
  .scene-foot { margin-top: 12px; }
  .key { font-size: 14px; }
  .trust { margin-top: 24px; font-size: 13px; }
  .where-intro > div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .where { padding-block: 24px; }
  .workflow { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
  .workflow li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 20px; max-width: none; }
  .workflow-key { grid-row: 1 / span 2; min-width: 0; height: 48px; margin: 0; padding-inline: 6px; font-size: 14px; border-radius: 10px; }
  .workflow h3 { margin: 0; font-size: 20px; }
  .workflow p { grid-column: 2; font-size: 15px; }
  .case-picker { gap: 0 20px; }
  .case-tab { font-size: 14px; }
  .case-context .case-thread { font-size: 14px; }
  .case-panels { padding-top: 24px; }
  .case-result > .sample-field, .case-result > .continuation { margin-top: 0; }
  .memory-grid, .faq-grid, .team-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .team-intro h2 { max-width: 13em; }
  .team-portraits { gap: 20px; }
  .memory-grid .voice-layout, .memory-disclosure, .memory-details { grid-column: 1; grid-row: auto; }
  .memory-grid .voice-layout { gap: 24px; }
  .voice-profile { padding-inline: 0; }
  .voice-profile dl { grid-template-columns: 6.5em minmax(0, 1fr); }
  .voice-chat .sample-field { font-size: 17px; }
  .boundary-flow { gap: 24px; }
  .faq-grid .sec-head { margin-bottom: 0; }
  .platform-picker { border: 0; padding: 0; gap: 4px; }
  .platform-tab { padding-inline: 10px; font-size: 14px; }
  .platform-panel { min-height: 0; }
  .platform-panel h3 { margin-top: 0; }
  .install-grid { gap: 0; }
  .install .sec-head h2 { max-width: 13em; }
}

@media (max-width: 599px) {
  .team-portraits { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .team-portraits figure { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; }
  .team-portraits figcaption { margin-top: 0; }
}

/* Снимки состояний через ?state= */
.is-frozen *, .is-frozen *::before, .is-frozen *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .gdots i, .tdots i { opacity: .7; }
}