:root {
  color-scheme: light;
  --paper: #f7f8f2;
  --surface: #fffefa;
  --sage: #e5ecdf;
  --soft: #eff3e9;
  --ink: #20352b;
  --muted: #58675b;
  --accent: #356344;
  --accent-hover: #254d32;
  --border: #c9d2c3;
  --focus: #275c85;
  --warning: #f2eddd;
  --on-accent: #fffefa;
  --scene: #cdd5b9;
  --selection: #ccdfbd;
  --rule: #b9c6b3;
  --highlight: #c7dabb;
  --shadow: #0000001a;
  --film: #203d30;
  --film-hover: #31563f;
  --film-active: #142b20;
  --film-ink: #fffefa;
  --film-muted: #d4dfce;
  --photo-filter: none;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lead: 1.1875rem;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: .75rem;
  --max-width: 1200px;
}
/* Тёмная тема: по системной настройке или по переключателю в шапке. Разметка у тем общая. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1512;
    --surface: #18211c;
    --sage: #1c2922;
    --soft: #16201a;
    --ink: #e6eee7;
    --muted: #a1afa4;
    --accent: #8bc99a;
    --accent-hover: #a9dbb4;
    --border: #2f3d34;
    --focus: #8cc0e8;
    --warning: #2b2818;
    --on-accent: #0f1a14;
    --scene: #222b1d;
    --selection: #2f5a3c;
    --rule: #34443a;
    --highlight: #2c4a35;
    --shadow: #00000066;
    --film: #0b120e;
    --film-hover: #1d3a2a;
    --film-active: #07100b;
    --film-ink: #eef4ee;
    --film-muted: #b7c6b2;
    --photo-filter: brightness(.45) saturate(.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1512;
  --surface: #18211c;
  --sage: #1c2922;
  --soft: #16201a;
  --ink: #e6eee7;
  --muted: #a1afa4;
  --accent: #8bc99a;
  --accent-hover: #a9dbb4;
  --border: #2f3d34;
  --focus: #8cc0e8;
  --warning: #2b2818;
  --on-accent: #0f1a14;
  --scene: #222b1d;
  --selection: #2f5a3c;
  --rule: #34443a;
  --highlight: #2c4a35;
  --shadow: #00000066;
  --film: #0b120e;
  --film-hover: #1d3a2a;
  --film-active: #07100b;
  --film-ink: #eef4ee;
  --film-muted: #b7c6b2;
  --photo-filter: brightness(.45) saturate(.8);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
a:active { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
::selection { background: var(--selection); color: var(--ink); }
p, h1, h2, h3, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-inline-size: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; overflow-wrap: anywhere; }
h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; }
.wrap { width: min(100% - 64px, var(--max-width)); margin-inline: auto; }
.sr-only, .choice-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 8px; left: 8px; padding: 12px 20px; background: var(--surface); transform: translateY(-160%); z-index: 20; }
.skip-link:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--border); }
.header-inner { display: flex; justify-content: space-between; align-items: center; min-height: 88px; gap: var(--space-3); }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--serif); font-size: 1.5rem; text-decoration: none; letter-spacing: -.03em; }
.mark { display: inline-flex; gap: 5px; align-items: center; justify-content: center; width: 44px; height: 34px; background: var(--accent); border-radius: 12px; }
.mark i { width: 5px; height: 5px; background: var(--on-accent); border-radius: 50%; }
nav { display: flex; align-items: center; gap: 36px; font-size: var(--text-sm); }
nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; gap: 12px; }
nav a:hover { text-decoration: underline; }
.site-header nav a:last-child { font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--soft); }
.theme-toggle:active { background: var(--sage); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}
.hero { padding-block: 68px 72px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
h1 { font-size: clamp(2.75rem, 4.7vw, 4.25rem); }
.hero-lead { margin-block: 26px 30px; max-width: 440px; font-size: var(--text-lead); line-height: 1.6; color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 32px; min-height: 52px; padding: 13px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-base); text-decoration: none; line-height: 1.4; transition: background-color .15s; }
.primary { background: var(--accent); color: var(--on-accent); }
.primary:hover { color: var(--on-accent); background: var(--accent-hover); }
.primary:active { background: var(--ink); }
.hero-note { margin-top: 12px; color: var(--muted); font-size: var(--text-sm); }
.hero-note:empty { display: none; }
.text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: var(--text-sm); }
.hero-more { margin-top: 12px; }
.product-scene { position: relative; isolation: isolate; padding: 38px 30px 24px; min-width: 0; border-radius: var(--radius-md); background: var(--scene); }
.scene-photo { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: var(--photo-filter); }
.demo { position: relative; min-width: 0; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .75rem; margin-bottom: 10px; background: var(--surface); border-radius: var(--radius-sm); padding: 8px 14px; width: fit-content; max-width: 100%; }
.incoming { max-width: 88%; background: var(--surface); border-radius: 3px 16px 16px 16px; padding: 14px 18px; font-size: 1rem; line-height: 1.5; margin-bottom: 22px;  }
.ghost-demo { position: relative; background: var(--surface); border-radius: var(--radius-sm); padding: 18px; box-shadow: 0 8px 16px var(--shadow); }
.mini-mark { color: var(--accent); letter-spacing: 3px; font-family: var(--sans); font-weight: 700; }
.ghost-field { display: flex; align-items: center; min-height: 64px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9375rem; line-height: 1.45; }
.ghost-caret { flex-shrink: 0; align-self: center; width: 1px; height: 1.3em; margin-right: 2px; background: var(--ink); }
.ghost-text { color: var(--muted); transition: color .2s; }
.ghost-key { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; font-size: var(--text-sm); color: var(--muted); cursor: pointer; }
.ghost-key:hover { color: var(--accent-hover); }
.ghost-key-on, #ghost-accept:checked ~ .ghost-key .ghost-key-off { display: none; }
#ghost-accept:checked ~ .ghost-key .ghost-key-on { display: inline; }
#ghost-accept:checked ~ .ghost-field .ghost-text { color: var(--ink); }
#ghost-accept:checked ~ .ghost-field .ghost-caret { order: 1; margin: 0 0 0 2px; }
.choice-input:focus-visible + label, #ghost-accept:focus-visible ~ .ghost-key { outline: 3px solid var(--focus); outline-offset: 3px; }
.demo-caption { font-size: .6875rem; color: var(--muted); text-align: center; margin: 14px auto 0; width: fit-content; max-width: 100%; background: var(--surface); border-radius: 6px; padding: 3px 8px; }
.section { padding-block: var(--space-6); }
.how { border-top: 1px solid var(--border); }
.how .section-heading { margin-bottom: 32px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 0; list-style: none; margin: 0; }
.steps li { padding-top: 18px; border-top: 1px solid var(--border); }
.step-number { font-size: var(--text-sm); color: var(--accent); display: block; margin-bottom: 20px; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--muted); font-size: .9375rem; }
.section-footnote { font-size: var(--text-sm); line-height: 1.6; color: var(--muted); margin-top: 28px; }
.play-small { font-size: .75rem; }
.film { margin: 0 0 42px; padding: 16px; background: var(--film); border-radius: var(--radius-md); color: var(--film-ink); }
.film-heading { display: flex; align-items: center; gap: 12px; padding: 0 8px 14px; font-size: .875rem; }
.film-duration { margin-left: auto; font-size: .75rem; color: var(--film-muted); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: var(--radius-sm); background: var(--scene); }
.film-screen { position: relative; }
.film-play { position: absolute; inset: 0; margin: auto; width: max-content; max-width: calc(100% - 24px); height: max-content; display: flex; align-items: center; gap: 15px; border: 1px solid var(--film-ink); border-radius: var(--radius-sm); padding: 14px 25px 14px 16px; background: var(--film); color: var(--film-ink); font: 600 1rem/1.35 var(--sans); text-align: left; cursor: pointer;  transition: background-color .2s; }
.film-play:hover { background: var(--film-hover); }
.film-play:active { background: var(--film-active); }
.film-play:focus-visible { outline-color: var(--film-ink); }
.film-play small { display: block; margin-top: 2px; font-size: .75rem; font-weight: 400; color: var(--film-muted); }
.film-play-icon { font-size: 1rem; padding-inline: 8px; flex-shrink: 0; }
.film-play[hidden], .film-error[hidden] { display: none; }
.film-error { padding: 14px 8px 0; font-size: .875rem; }
.film figcaption { font-size: .75rem; color: var(--film-muted); padding: 14px 8px 0; max-width: 850px; }
.step-picture { height: 160px; margin-bottom: 24px; border-radius: var(--radius-sm); background: var(--soft); position: relative; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.steps li { border: 0; padding-top: 0; }
.visual-message { font-size: .8125rem; line-height: 1.5; padding: 10px 12px; background: var(--highlight); border-radius: 4px; max-width: 225px; }
.cursor { position: absolute; width: 27px; height: 32px; bottom: 28px; right: 44px; fill: var(--ink); stroke: var(--surface); stroke-width: 2px; }
.options-picture { flex-direction: column; align-items: stretch; gap: 7px; }
.options-picture span { background: var(--surface); border: 1px solid transparent; border-radius: 5px; padding: 5px 8px; font-size: .625rem; }
.options-picture span:first-child { border-color: var(--accent); background: var(--soft); }
.options-picture b { float: right; color: var(--accent); }
.compose-picture { gap: 18px; }
.compose-picture > span:first-child { flex: 1; font-size: .8125rem; line-height: 1.8; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--surface);  }
.compose-picture i { display: inline-block; margin-left: 3px; width: 1px; height: 1em; background: var(--accent); vertical-align: middle; }
.visual-send { background: var(--accent); color: var(--on-accent); width: 28px; height: 28px; border-radius: 50%; text-align: center; font-size: 1rem; }
.situations { background: var(--sage); }
.situations-grid, .faq-grid, .install-grid { display: grid; grid-template-columns: .9fr 1.2fr; gap: 100px; align-items: start; }
.situations-heading .section-lead { max-width: 480px; }
.section-lead { margin-top: 22px; font-size: 1.0625rem; color: var(--muted); max-width: 380px; }
.example + .example { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.example-label { font-size: .75rem; color: var(--muted); margin-bottom: 10px; }
.example h3 { font-weight: 500; font-size: 1.0625rem; margin-bottom: 14px; }
.example-answer { font-size: 1.125rem; line-height: 1.6; }
.examples .section-footnote { font-size: .75rem; }
.examples .text-link { padding-block: 6px; }
.trust-note { display: flex; gap: 10px; align-items: center; margin-top: 24px; font-size: var(--text-sm); }
details { border-bottom: 1px solid var(--border); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding-block: 18px; list-style: none; font-size: 1rem; font-weight: 500; cursor: pointer; line-height: 1.45; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; color: var(--accent); flex-shrink: 0; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; }
details[open] > summary::after { background-size: 100% 1px, 0 0; }
summary:hover { color: var(--accent-hover); }
summary:active { background: var(--soft); }
.questions { border-top: 1px solid var(--border); }
.answer { padding-bottom: 22px; color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.answer p + p { margin-top: 12px; }
.install { background: var(--soft); border-top: 1px solid var(--border); }
.platform-picker { position: relative; display: flex; flex-wrap: wrap; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.platform-tab { flex: 1 0 5rem; padding: 12px 8px; min-height: 48px; text-align: center; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.choice-input:checked + .platform-tab { background: var(--sage); color: var(--ink); }
.platform-tab:hover { background: var(--soft); }
.platform-tab:active { background: var(--border); }
.platform-panels { flex-basis: 100%; min-width: 0; padding: 26px 20px 0; }
.platform-panel { display: none; }
#platform-mac:checked ~ .platform-panels #install-mac, #platform-windows:checked ~ .platform-panels #install-windows, #platform-browser:checked ~ .platform-panels #install-browser, #platform-ios:checked ~ .platform-panels #install-ios, #platform-android:checked ~ .platform-panels #install-android { display: block; }
.platform-meta { font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.platform-panel h3 { font-family: var(--serif); font-size: 1.75rem; font-weight: 400; margin-bottom: 12px; }
.platform-panel > p:not(.platform-meta) { font-size: .9375rem; color: var(--muted); }
.platform-panel > p:last-child { padding-bottom: 20px; }
.platform-panel > p + p:not(.install-warning) { margin-top: 10px; }
.install-trust { margin-block: 20px; padding: 12px 14px; border-radius: var(--radius-sm); line-height: 1.55; border: 1px solid var(--border); background: var(--soft); }
.install-trust strong { color: var(--ink); font-weight: 600; }
.install-warning { margin-block: 20px; background: var(--warning); padding: 12px 14px; border-radius: var(--radius-sm); line-height: 1.55; }
.install-warning strong { color: var(--ink); font-weight: 600; }
.platform-panel > .install-warning { font-size: .9375rem; color: var(--muted); }
.install-warning ol { margin: 8px 0 0; padding-left: 20px; }
.install-warning li + li { margin-top: 6px; }
.install-warning ol + p { margin-top: 8px; }
.send-link { font-size: .9375rem; color: var(--muted); }
.send-link[hidden], .send-link [hidden] { display: none; }
.send-link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.secondary { flex: 1 1 auto; min-height: 48px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; }
.secondary:hover { background: var(--soft); color: var(--ink); }
.secondary:active { background: var(--sage); }
.send-link-status { margin-top: 10px; font-size: var(--text-sm); }
.send-link-status:empty { display: none; }
.platform-panel .button { width: 100%; justify-content: space-between; gap: 12px; }
.file-type { font-size: .75rem; font-weight: 500; white-space: nowrap; }
.install-details { margin-top: 12px; border: 0; }
.install-details summary { font-size: var(--text-sm); min-height: 52px; }
.install-help { flex-basis: 100%; padding: 4px 20px 20px; font-size: var(--text-sm); color: var(--muted); }
#platform-ios:checked ~ .install-help { display: none; }
.answer ol { margin: 0 0 14px; padding-left: 20px; }
.answer li + li { margin-top: 10px; }
kbd, code { font-family: var(--sans); font-size: .875em; overflow-wrap: anywhere; }
kbd { background: var(--soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; }
footer { padding-block: 26px; border-top: 1px solid var(--border); }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; font-size: .75rem; color: var(--muted); }
.footer-inner .logo { font-size: 1.25rem; color: var(--ink); }
.footer-links { margin-left: auto; display: flex; flex-wrap: wrap; column-gap: 24px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 860px) { .footer-links { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 1050px) {
  .hero-grid { gap: 36px; }
  .hero { padding-block: 44px; }
  .situations-grid, .faq-grid, .install-grid { gap: 48px; }
  .steps { gap: 28px; }
}
@media (max-width: 800px) {
  .wrap { width: min(100% - 48px, 680px); }
  .header-inner { min-height: 76px; }
  nav { gap: 20px; }
  .site-header nav .nav-md { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  h1 { font-size: clamp(2.75rem, 7vw, 3.75rem); }
  .hero-copy { max-width: 570px; }
  .hero-lead { max-width: 550px; margin-block: 18px 22px; }
  .hero-more { margin-top: 8px; }
  .product-scene { max-width: 600px; width: 100%; justify-self: center; }
  .demo { max-width: 560px; width: 100%; margin-inline: auto; }
  .section { padding-block: 56px; }
  .how .section-heading { display: block; margin-bottom: 30px; }
  .steps { gap: 20px; }
  .steps h3 { font-size: 1rem; }
  .step-picture { height: 140px; padding: 14px; }
  .compose-picture { gap: 6px; }
  .compose-picture > span:first-child { padding: 8px; }
  .visual-send { flex-shrink: 0; }
  .film-heading { flex-wrap: wrap; }
  .film-duration { margin-left: 0; }
  .situations-grid, .faq-grid, .install-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .section-lead { max-width: 540px; }
}
@media (max-width: 480px) {
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 68px; gap: 8px 12px; flex-wrap: wrap; padding-block: 12px; }
  .logo { font-size: 1.25rem; gap: 8px; }
  .mark { width: 36px; height: 30px; gap: 4px; }
  nav { gap: 16px; }
  .site-header nav .nav-sm { display: none; }
  nav a { font-size: .8125rem; gap: 6px; }
  .header-actions { gap: 12px; }
  .theme-toggle { width: 40px; height: 40px; }
  .hero { padding-block: 30px 40px; }
  h1 { font-size: clamp(2.4rem, 10.7vw, 3rem); line-height: 1.03; }
  .hero-lead { font-size: 1rem; line-height: 1.55; margin-block: 18px 20px; }
  .hero .button { min-height: 48px; }
  .hero-note { font-size: .75rem; margin-top: 10px; }
  .hero-more { display: none; }
  .hero-grid { gap: 22px; }
  .product-scene { padding: 16px 12px 12px; border-radius: var(--radius-md); }
  .ghost-demo { padding: 14px 12px; border-radius: 12px; }
  .demo-top { margin-bottom: 12px; font-size: .6875rem; }
  .incoming { font-size: .875rem; padding: 12px 14px; margin-bottom: 16px; }
  .ghost-field { font-size: .875rem; padding: 10px; min-height: 60px; }
  .demo-caption { font-size: .625rem; }
  .section { padding-block: 44px; }
  h2 { font-size: 2rem; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .film { padding: 10px; border-radius: var(--radius-md); margin-bottom: 30px; }
  .film-heading { font-size: .75rem; gap: 6px 10px; padding: 2px 4px 12px; }
  .film-duration { flex-basis: 100%; padding-left: 29px; font-size: .6875rem; }
  .film figcaption { font-size: .6875rem; padding-inline: 4px; }
  .film-play { padding: 9px 15px 9px 10px; gap: 10px; font-size: .8125rem; }
  .film-play-icon { font-size: .875rem; padding-inline: 4px; }
  .steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 14px; padding-top: 18px; }
  .step-picture { grid-column: 1 / -1; height: 150px; margin-bottom: 18px; padding: 24px; }
  .options-picture { padding-inline: 42px; }
  .step-number { grid-row: 2 / 4; margin: 0; }
  .steps h3 { margin-bottom: 7px; }
  .steps p { grid-column: 2; }
  .section-lead { font-size: 1rem; margin-top: 18px; }
  .example-answer { font-size: 1rem; }
  .trust-note { font-size: .8125rem; }
  summary { font-size: .9375rem; min-height: 64px; }
  .answer { font-size: .875rem; }
  .platform-panels { padding: 22px 10px 0; }
  .platform-tab { padding-inline: 4px; }
  .platform-panel h3 { font-size: 1.5rem; }
  .platform-panel .button { font-size: .875rem; padding-inline: 14px; }
  .install-help { padding-inline: 10px; }
  .footer-inner { column-gap: 12px; }
  .footer-links { column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.inline { border-top: 1px solid var(--border); }
.inline-grid { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 80px; align-items: center; }
.inline-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 4px 10px; border-radius: 999px; background: var(--sage); color: var(--accent); font-size: var(--text-sm); }
.inline .section-lead { max-width: 460px; }
.inline-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.inline-points li { padding-left: 22px; position: relative; }
.inline-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.inline-points kbd { font: 600 .8125rem/1 var(--sans); padding: 3px 7px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.inline-film { margin: 0; padding: 12px; background: var(--film); border-radius: var(--radius-md); }
.inline-film video { display: block; width: 100%; height: auto; aspect-ratio: 4/5; border-radius: var(--radius-sm); background: var(--film-active); }
/* Горизонтальная запись экрана: во всю ширину под текстом, иначе в колонке 420 px не прочитать переписку */
.inline-film-wide { grid-column: 1 / -1; max-width: 960px; width: 100%; justify-self: center; }
.inline-film-wide video { aspect-ratio: 2 / 1; }
.inline-film figcaption { font-size: .75rem; color: var(--film-muted); padding: 12px 4px 2px; }
@media (max-width: 800px) {
  .inline-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .inline-film { max-width: 420px; }
  .inline-film-wide { max-width: none; }
}

.hero-category { display: block; margin: 0 0 .75rem; color: var(--accent); font-family: var(--sans); font-size: var(--text-sm); font-weight: 650; letter-spacing: normal; line-height: 1.6; }
.document-page { max-width: 900px; padding-block: 40px 64px; }
.document-page h1 { margin-block: 24px; }
.document-page section { margin-top: 48px; }
.document-page section h2 { margin-bottom: 20px; }
.document-page p + p { margin-top: 16px; }
.document-page li + li { margin-top: 10px; }
.compatibility-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.compatibility-table caption { text-align: left; margin-bottom: 12px; color: var(--muted); }
.compatibility-table th, .compatibility-table td { border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; padding: 16px 12px; }
.compatibility-table th { font-weight: 600; }
.compatibility-table th:first-child { width: 25%; }
.article-page h1 { font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1.12; }
.article-meta { color: var(--muted); font-size: var(--text-sm); margin-block: 20px 12px; }
.article-toc { display: block; padding: 20px 24px; margin-block: 32px; background: var(--soft); border-radius: var(--radius-md); }
.article-toc p { font-weight: 600; }
.article-toc ol { padding-left: 20px; margin-bottom: 0; }
.article-toc a { min-height: 44px; font-size: 1rem; font-weight: 400; }
.article-body { font-size: 1.0625rem; line-height: 1.75; }
.article-body h2 { font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1.18; }
.article-body h3 { margin-bottom: 12px; }
.article-body li + li { margin-top: 10px; }
.article-body blockquote { margin: 20px 0; padding: 18px 22px; background: var(--soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.article-example { margin-block: 28px; }
.article-definitions dt { font-weight: 600; margin-top: 20px; }
.article-definitions dd { margin: 6px 0 0; }
.article-cta, .article-related { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 28px; }
.article-cta h2, .article-related h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.article-cta .button { margin-top: 20px; }
.article-cta .button + p { margin-top: 12px; }
.article-related a { display: block; padding-block: 10px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 40px; }
.guide-card { border: 1px solid var(--border); padding: 24px; border-radius: var(--radius-md); background: var(--surface); }
.guide-card h2 { font-size: 1.55rem; line-height: 1.2; margin-bottom: 16px; }
@media (max-width: 800px) { .guide-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .compatibility-table th, .compatibility-table td { padding-inline: 8px; }
  .compatibility-table th:first-child { width: 36%; }
}