/* COM only: a clear daylight surface around the graphite product UI. */
/* S-FONT (D139, owner 17.10): font set 1. Geologica in thin weights for headings (its faces are
   shared with RU in site.css, and only they are preloaded: the hero heading), Onest for text,
   JetBrains Mono for «/ …» labels, numbers and key caps. Own files in /assets/fonts, OFL licences
   next to them (OFL.txt is Geologica's), font-display: swap; nothing from other hosts (CSP
   font-src 'self'). The browser fetches a subset only when the page uses its characters. The app
   panel mockups keep the app's system fonts (D135): see .market-com .panel below. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body.market-com,
.market-com [data-tone],
.market-com .tone-light,
.market-com .tone-dark {
  --bg: #F8FAFD;
  --fg: #182338;
  --fg-2: #5C677B;
  --fg-3: #5C677B;
  --accent: #315FD5;
  --hair: #DEE5F0;
  --card: #EEF3FC;
  --panel-bg: #20232B;
  --panel-recess: #20232B;
  --panel-accent: #A9BDF2;
  --panel-muted: #B8C1D4;
  color: var(--fg);
  background: var(--bg);
}
.market-com {
  --max: 1120px;
  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --app-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-head: "Geologica", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
/* Set 1 on the page: thin Geologica headings (250 display, 300 sections), Onest text, mono captions.
   The wordmark keeps Geologica, as before. */
.market-com .wordmark { font-family: var(--font-head); }
.market-com .display,
.market-com .h2,
.market-com .h3,
.market-com .page-head h1,
.market-com .prose h2,
.market-com .prose h3,
.market-com .access-plan .plan-price { font-family: var(--font-head); font-weight: 300; }
.market-com .display,
.market-com .access-plan .plan-price { font-weight: 250; letter-spacing: -.025em; }
.market-com .prose h3 { font-weight: 400; letter-spacing: -.015em; }
.market-com .micro,
.market-com .example-caption { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.market-com .stage-floor,
.market-com .glow,
.market-com .scroll-cue { display: none; }
/* S10-1 (M1): scroll progress in the page tone's accent; decorative, never takes clicks. */
.market-com .progress { height: 2px; background: var(--accent); pointer-events: none; }
body.market-com[data-tone="dark"] .progress { background: #A9BDF2; }
@media print { .market-com .progress { display: none; } }
/* S9-3 (M2): the header is opaque over the light sky and follows the scene tone (below). */
.market-com .nav,
.market-com .nav.is-solid {
  color: #182338;
  background: #F8FAFD;
  border-bottom-color: #E7ECF5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.market-com .nav .wrap { height: 72px; gap: 26px; }
.market-com .nav nav { gap: 24px; }
.market-com .nav nav a { font-size: 14px; }
.market-com .wordmark { color: #182338; }
.market-com .btn-primary { background: #315FD5; color: #FFFFFF; box-shadow: 0 5px 15px rgba(49,95,213,.16); }
.market-com .btn-primary:hover { background: #244FBF; box-shadow: 0 6px 20px rgba(49,95,213,.23); }
.market-com .btn-ghost { background: #FFFFFF; border-color: #D6DFEF; color: #46536D; }
.market-com .btn { border-radius: 14px; min-height: 48px; }
.market-com .btn-small { min-height: 40px; border-radius: 12px; }
.market-com .download-soon:disabled {
  background: #FFFFFF;
  border: 1px solid #D6DFEF;
  color: #5C677B;
  cursor: default;
  opacity: 1;
  box-shadow: none;
  transform: none;
}
/* S-F1 (owner 16.10, D135) and D138 (owner 17.10): every panel mockup repeats the app's panel in
   «Графит», the default dark palette (PanelTheme tokens from the palette page P-PALETTE): text
   #ECEDEF / #C2C5CC / #A3A7AF; accent #A8C2F0 with ink #101521, its text on soft fills #C3D6FA;
   hairlines, fields and key caps in white at 10 / 7 / 12 %, the edge at 14 %; the app's system font.
   Zoning (D138): one even surface #2F3135 (the palette's paper) for the header, the paper and the
   bottom bar, divided by thin hairlines instead of different fills. Header: «Начать слушать ⌥⌘L» (in
   a meeting «Слушаю 18:06» and «Завершить»), the drag area, the mode, the eye chip «За кадром», ⋯, ×.
   Paper: «На вопрос: «…»» (or «По разговору»), the answer, then «По: …» and «Скопировать ответ ⌘C».
   Bottom bar: «Уточнить…», «Экран», «Подсказать ⌘↵». No quote, no notes: the app shows neither.
   Narrow, the header gives way as in the app: key captions, then the mode, then the chip's label.
   Every text pair is 4.5:1 or more (test_com_panel_mockups_repeat_the_app_graphite_panel). */
.market-com .panel {
  --font: var(--app-font);
  --mono: var(--app-mono);
  --bg: #2F3135;
  --fg: #ECEDEF;
  --fg-2: #C2C5CC;
  --fg-3: #A3A7AF;
  --accent: #A8C2F0;
  --hair: rgba(255,255,255,.10);
  --card: rgba(255,255,255,.07);
  font: 400 15px/1.45 var(--app-font);
  color: #ECEDEF;
  background: #2F3135;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 28px 60px -26px rgba(11,18,32,.55), 0 4px 14px rgba(11,18,32,.12);
}
.market-com .panel .bar { height: 48px; gap: 4px; padding: 0 8px; color: #C2C5CC; border-bottom-color: rgba(255,255,255,.10); font-size: 13px; }
.market-com .panel .bar > span { flex: none; display: inline-flex; align-items: center; height: 28px; }
.market-com .panel .bar .drag { flex: 1 1 auto; min-width: 0; }
.market-com .panel kbd { font: 500 12px/1 var(--app-font); padding: 3px 6px; border: 0; border-radius: 5px; color: inherit; background: rgba(255,255,255,.12); }
.market-com .panel .listen-start { gap: 7px; padding: 0 10px; border-radius: 14px; color: #C3D6FA; font-weight: 600; background: rgba(168,194,240,.10); box-shadow: inset 0 0 0 1px rgba(168,194,240,.45); }
.market-com .panel .dot { width: 8px; height: 8px; border-radius: 50%; background: #A8C2F0; }
.market-com .panel .mode { gap: 6px; padding: 0 8px; color: #ECEDEF; font-weight: 500; }
.market-com .panel .chev { flex: none; width: 10px; height: 10px; color: #C2C5CC; }
.market-com .panel .frame-state { margin-left: 0; gap: 5px; padding: 0 10px; border-radius: 14px; color: #C2C5CC; font-size: 12px; font-weight: 500; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.market-com .frame-state svg { flex: none; width: 14px; height: 14px; }
.market-com .panel .more,
.market-com .panel .close { justify-content: center; width: 28px; color: #C2C5CC; letter-spacing: 0; }
.market-com .panel .more svg,
.market-com .panel .close svg { width: 15px; height: 15px; }
.market-com .panel .pill { gap: 7px; height: 28px; padding: 0 10px; border: 0; border-radius: 14px; color: #ECEDEF; background: rgba(168,194,240,.10); font-weight: 500; }
.market-com .panel .pill b { font: 400 13px/1 var(--app-font); font-variant-numeric: tabular-nums; color: #C2C5CC; }
.market-com .panel .levels { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; }
.market-com .panel .levels i { --lv: .66; width: 2px; height: 12px; border-radius: 1px; background: #A8C2F0; transform-origin: 50% 100%; transform: scaleY(var(--lv)); }
.market-com .panel .levels i + i { --lv: .42; }
.market-com .panel .end-btn { padding: 0 10px; border-radius: 14px; color: #ECEDEF; font-weight: 500; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.market-com .panel .body { min-height: 0; padding: 18px 24px 20px; background: #2F3135; }
.market-com .panel .heard { margin: 0 0 12px; color: #A3A7AF; font-size: 13px; line-height: 1.4; }
.market-com .panel .lead { margin: 0; color: #ECEDEF; font-size: 20px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; min-height: 0; }
.market-com .panel .lead .caret { background: #A8C2F0; }
.market-com .panel .thinkbar::after { background: linear-gradient(90deg, transparent, #A8C2F0, transparent); }
.market-com .panel .meta { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 24px; border-top: 1px solid rgba(255,255,255,.10); background: #2F3135; color: #A3A7AF; font-size: 12px; white-space: nowrap; }
.market-com .panel .meta .sources { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.market-com .panel .meta .sources span,
.market-com .panel .meta .copy { color: #C2C5CC; }
.market-com .panel .meta .copy { flex: none; margin-left: auto; }
.market-com .panel .foot { align-items: center; gap: 8px; padding: 10px; border-top-color: rgba(255,255,255,.10); background: #2F3135; }
.market-com .panel .input { display: block; min-height: 36px; padding: 0 12px; border-radius: 10px; border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.07); color: #C2C5CC; font-size: 14px; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-com .panel .screen-btn { display: flex; flex: none; gap: 6px; min-height: 36px; padding: 0 11px; border-radius: 10px; color: #C2C5CC; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); font-size: 13px; font-weight: 500; }
.market-com .panel .screen-btn svg { flex: none; width: 15px; height: 15px; }
.market-com .panel .hint-btn { flex: none; gap: 8px; min-height: 36px; padding: 0 8px 0 14px; border-radius: 10px; color: #101521; background: #A8C2F0; font: 600 13px/1 var(--app-font); }
.market-com .panel .hint-btn kbd { background: rgba(16,21,33,.12); }
.market-com .panel .hint-btn.press { box-shadow: 0 0 0 6px rgba(168,194,240,.2); }
/* S9-2 (M5, M10): «Слушаю» of a running meeting pulses only while the demo runs, three rings
   (3.9 s), never in a loop. S-F1: the demo carries no quote any more, so the answer is the end of
   the show. No JS / reduced motion: no .typing, everything stands in place. */
.market-com .panel.typing .pill .dot { animation: listen-pulse 1.3s var(--ease) 3; }
@keyframes listen-pulse {
  0% { box-shadow: 0 0 0 0 rgba(168,194,240,.55); }
  70% { box-shadow: 0 0 0 8px rgba(168,194,240,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,194,240,0); }
}
.market-com .pad { padding-block: clamp(64px,8vw,100px); }
.market-com .h2 { font-size: clamp(30px,4vw,54px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.market-com .h3 { font-size: clamp(24px,2.4vw,30px); line-height: 1.12; letter-spacing: -.02em; }
/* S10-5 (M16, В11): section labels are mono «/ …» again, as on the previous Turboffer. The slash
   takes the label's colour without transparency (it keeps the label's own contrast) and is not
   read aloud where generated content takes alt text. Graphite scenes recolour it (S9-3 below). */
.market-com .label { font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #315FD5; }
.market-com .label::before { content: "/ "; content: "/ " / ""; opacity: 1; }
.market-com .label + .h2 { margin-top: 12px; }
.market-com .example-caption { font-size: 12px; }
.market-com .more-link { color: #315FD5; font-size: 16px; }
.market-com .blog-preview .head { margin-bottom: 32px; }
.market-com .blog-preview .posts { gap: 22px; }
.market-com .blog-preview .posts li { border: 1px solid #DEE5F0; border-radius: 20px; padding: 24px; background: #FFFFFF; }
.market-com .blog-preview .posts a { padding-top: 0; gap: 14px; }
.market-com .blog-preview .posts .post-title { font-size: 22px; line-height: 1.35; }
.market-com .blog-preview .posts .post-lede { font-size: 15px; line-height: 1.55; }
.market-com .post-date { color: #5C677B; font: 400 12px/1.5 var(--font); letter-spacing: 0; text-transform: none; }
.market-com .faq .list { margin-top: 32px; }
.market-com .faq summary { padding-block: 22px; font-size: 19px; }
.market-com .faq summary::after {
  content: "";
  width: 16px;
  height: 16px;
  align-self: center;
  background: linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat,
              linear-gradient(currentColor,currentColor) center / 2px 100% no-repeat;
}
.market-com .faq details[open] summary::after {
  background: linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat;
  transform: none;
}
.market-com .faq .a { font-size: 16px; line-height: 1.65; }
.market-com .notfound .display { font-size: clamp(36px,5vw,64px); line-height: 1.06; }
/* S-F1 (owner 16.10, (9)): the footer spreads over the whole container — the brand on the left,
   «Продукт» and «Поддержка» towards the right edge — with more air and © on its own line. */
.market-com footer { background: #F8FAFD; padding-block: 72px 40px; color: #5C677B; }
.market-com footer .wrap { gap: 48px; }
.market-com footer .footer-main { grid-template-columns: minmax(0,1fr) auto auto; column-gap: clamp(64px,10vw,144px); row-gap: 40px; align-items: start; }
.market-com footer p { max-width: 34em; }
.market-com footer .footer-brand p { max-width: 30em; margin-top: 18px; }
.market-com footer .links { gap: 6px; }
.market-com footer .links b { margin-bottom: 6px; }
.market-com footer .links a { min-height: 36px; }
.market-com footer .footer-base { display: block; margin-top: 64px; padding-top: 24px; border-top: 1px solid #DEE5F0; }
.market-com footer .footer-base p { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .market-com footer .footer-main { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .market-com footer .footer-brand { grid-column: 1 / -1; }
}
.market-com .page-head { padding: 128px 0 48px; }
.market-com .page-head h1 { font-size: clamp(36px,5vw,58px); line-height: 1.08; letter-spacing: -.02em; max-width: 16em; }
.market-com .page-head .lede { font-size: 18px; max-width: 38em; }
.market-com .crumbs { color: #5C677B; font: 400 12px/1.5 var(--font); letter-spacing: 0; text-transform: none; }
.market-com .prose { line-height: 1.7; }
.market-com .prose h2 { font-size: clamp(26px,3vw,36px); line-height: 1.25; }
.market-com .prose h3 { font-size: 22px; line-height: 1.35; }
.market-com table.data { color: #182338; }
.market-com table.data th { color: #5C677B; }
.market-com table.data td { border-color: #DEE5F0; }
.market-com .story-code pre { background: #EEF3FC; color: #182338; border-color: #DEE5F0; }
.market-com .story-answer { background: #EAF0FF; }
.market-com .access-plan { background: #FFFFFF; border-color: #DEE5F0; padding: 30px; }
.market-com .access-plan h3 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.market-com .access-plan.featured { border-color: #315FD5; background: #F0F4FF; box-shadow: 0 12px 32px -18px rgba(49,95,213,.2); }
.market-com .access-plan .plan-purpose,
.market-com .access-plan .plan-period { color: #5C677B; }
.market-com .access-plan .plan-price { color: #182338; font-size: clamp(40px,4.4vw,52px); line-height: 1.04; }
.market-com .access-plan li { color: #46536D; }
.market-com .access-plan li::before { color: #315FD5; }
.market-com .access-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.market-com .access-plan { padding: 24px 20px; }
.market-com .access-plan .plan-heading { min-height: 54px; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.market-com .access-plan .plan-purpose { min-height: 3em; margin: 8px 0 20px; line-height: 1.5; }
.market-com .access-plan .plan-price { font-size: clamp(30px, 3vw, 42px); white-space: nowrap; }
.market-com .access-plan ul { min-height: 108px; margin-bottom: 20px; font-size: 14px; }
.market-com .access-plan li { gap: 7px; margin: 10px 0; }
.market-com .access-plan li strong { font-weight: 600; }
.market-com .plan-badge { align-self: start; padding: 3px 8px; border-radius: 20px; background: #315FD5; color: #fff; font-size: 10px; font-weight: 600; line-height: 1.5; }
.market-com .plan-footnote-mark { margin-left: 3px; font-size: 12px; vertical-align: super; text-decoration: none; }
.market-com .plan-shared { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); }
.market-com .plan-shared-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.market-com .plan-shared-features { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.market-com .plan-shared-features li { margin: 0; }
.market-com .plan-offscreen { color: #315FD5; font-weight: 600; }
.market-com .plan-shared-help,.market-com .plan-footnote { max-width: 80em; margin: 10px 0 0; font-size: 12px; line-height: 1.6; }
.market-com .plan-footnote a { text-underline-offset: 3px; }
@media (max-width: 1050px) { .market-com .access-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .market-com .access-plans { grid-template-columns: minmax(0, 1fr); } .market-com .access-plan .plan-heading { min-height: 0; } .market-com .access-plan .plan-purpose { min-height: 0; } .market-com .access-plan ul { min-height: 0; } }
.market-com .access-plan .plan-soon,
.market-com .access-plan.featured .plan-soon { background: #EDF2FB; color: #5C677B; border-color: #D6DFEF; box-shadow: none; }
@media (max-width: 900px) {
  .market-com .nav { position: relative; }
  .market-com .nav .wrap { display: block; height: auto; min-height: 64px; }
  .market-com .nav .wordmark { min-height: 44px; }
  .market-com .page-head { padding: 44px 0 36px; }
  .market-com .access-plan { padding: 28px; }
}
@media (max-width: 560px) {
  .market-com .panel { border-radius: 16px; }
  .market-com .panel .bar { height: 44px; padding-inline: 6px; gap: 2px; font-size: 12px; }
  .market-com .panel .bar kbd,
  .market-com .panel .bar .mode { display: none; }
  .market-com .panel .listen-start { gap: 6px; padding-inline: 9px; }
  .market-com .panel .frame-state { font-size: 11px; gap: 4px; padding-inline: 8px; }
  .market-com .panel .more,
  .market-com .panel .close { width: 26px; }
  .market-com .panel .body { padding: 16px 18px 18px; }
  .market-com .panel .heard { font-size: 12px; }
  .market-com .panel .lead { font-size: 17px; line-height: 1.5; }
  .market-com .panel .meta { gap: 10px; padding-inline: 18px; }
  .market-com .panel .foot { gap: 6px; padding: 8px; }
  .market-com .panel .input { font-size: 13px; padding-inline: 10px; }
  .market-com .panel .screen-btn { gap: 5px; padding-inline: 9px; font-size: 12px; }
  .market-com .panel .screen-btn svg { width: 14px; height: 14px; }
  .market-com .panel .hint-btn { gap: 6px; padding-left: 11px; font-size: 12px; }
  .market-com .panel .hint-btn kbd { font-size: 11px; }
  .market-com .pad { padding-block: 56px; }
  .market-com .faq summary { font-size: 17px; gap: 16px; }
  .market-com .page-head h1 { font-size: clamp(30px,8vw,42px); }
  .market-com .blog-preview .posts li { padding: 22px; }
  .market-com footer { padding-block: 56px 32px; }
  .market-com footer .wrap { gap: 28px; }
  .market-com footer .footer-main { grid-template-columns: minmax(0,1fr); }
  .market-com footer .footer-base { margin-top: 40px; }
}
/* S-F1: on the narrowest phones the panel gives way as the app's narrowest header does: the key
   caption of «Подсказать» goes, and the chip keeps the eye alone (its state stays in the icon). */
@media (max-width: 360px) {
  .market-com .panel .frame-state { gap: 0; padding-inline: 7px; font-size: 0; }
  .market-com .panel .hint-btn kbd { display: none; }
  .market-com .panel .hint-btn { padding-right: 11px; }
  .market-com .panel .input { padding-inline: 9px; font-size: 12px; }
  .market-com .panel .screen-btn { padding-inline: 8px; }
}

/* The public COM product is one landing; secondary proof stays inline. */
.market-com .pricing .head { text-align: center; margin-bottom: 36px; }
.market-com .pricing .head .lede { max-width: 600px; margin-inline: auto; }
/* S6: agreed payment and refund terms, built only when checkout is ready. */
.market-com .checkout-terms { max-width: 860px; margin: 28px auto 0; padding: 22px 26px; border: 1px solid #DEE5F0; border-radius: 16px; background: #FFFFFF; }
.market-com .checkout-terms-title { margin: 0 0 10px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; color: #182338; }
.market-com .checkout-terms ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.55; color: #46536D; }
.market-com .checkout-terms li + li { margin-top: 8px; }
.market-com .checkout-terms a { color: #315FD5; }
@media (max-width: 560px) { .market-com .checkout-terms { padding: 18px; } }
.market-com #pricing, .market-com #faq, .market-com #compatibility { scroll-margin-top: 92px; }
/* The tested compatibility of «За кадром» (Terms 6.3 links to it): a table in the FAQ answer, readable on a phone. */
.market-com .compatibility { margin: 6px 0 18px; }
.market-com .compatibility table.data { font-size: 14px; min-width: 490px; }
.market-com .compatibility-status { color: var(--accent); }
@media (max-width: 600px) {
  .market-com .compatibility table.data { min-width: 0; width: 100%; table-layout: fixed; font-size: 13px; }
  .market-com .compatibility table.data caption { width: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
  .market-com .compatibility table.data th,
  .market-com .compatibility table.data td { white-space: normal; overflow-wrap: anywhere; padding-right: 8px; }
  .market-com .compatibility table.data th { font: 500 11px/1.4 var(--font); letter-spacing: 0; text-transform: none; }
  .market-com .compatibility table.data th:first-child { width: 40%; }
  .market-com .compatibility table.data th:nth-child(2) { width: 42%; }
  .market-com .compatibility table.data th:last-child { width: 18%; }
  .market-com .compatibility table.data th:last-child,
  .market-com .compatibility table.data td:last-child { padding-right: 0; text-align: center; }
  .market-com .compatibility-status { font-size: 18px; }
  .market-com .compatibility-status-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* P-LAPTOP: #how, the demo of the first screen. No JS: lands on the page top (margin clamped). With JS
   the stage is sticky, so laptop.js takes every link to #how (goToDemo). */
.market-com #how { scroll-margin-top: 100vh; }

/* Keep purchase focus stable while the server prepares the owned checkout. */
.market-com .access-plan .plan-action[aria-disabled="true"] { opacity: .65; cursor: wait; }
.market-com #checkout-launch-status:not(.visually-hidden) { margin: 24px auto 0; max-width: 40em; }

/* S9-3 (M2, M6, M10): graphite scenes between the light ones. A dark section carries its own
   graphite tokens, so its text and buttons are in their final colours from the first frame and
   always stand on its .scene stage. Only decoration changes with the scene (site.js sets
   body[data-tone] from the section at mid-screen): the stage opens from an inset card to the full
   section and the page backdrop around it turns graphite, both within 0.6 s; no text stands on
   either while they change. The header switches tone in one frame, background and text together.
   S-F1 (owner 16.10): no perspective grid, the final scene too. No JS: the stage stays an inset card. */
.market-com { --stage-x: calc(var(--gutter) / 2); --stage-y: 12px; --stage-r: 28px; }
body.market-com { transition: background-color .6s var(--ease); }
body.market-com[data-tone="dark"],
.market-com section[data-tone="dark"] {
  --bg: #14171D;
  --fg: #F4F6FC;
  --fg-2: #B8C1D4;
  --fg-3: #B8C1D4;
  --accent: #A9BDF2;
  --hair: rgba(255,255,255,.12);
  --card: rgba(255,255,255,.05);
}
.market-com section[data-tone="dark"] { isolation: isolate; background: transparent; }
.market-com .scene { display: none; }
.market-com section[data-tone="dark"] > .scene {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  clip-path: inset(var(--stage-y) var(--stage-x) round var(--stage-r));
  transition: clip-path .6s var(--ease);
}
body.market-com[data-tone="dark"] section[data-tone="dark"] > .scene { clip-path: inset(0 0 round 0); }
body.market-com[data-tone="dark"] .nav { color: #F4F6FC; background: #14171D; border-bottom-color: #2A303B; }
body.market-com[data-tone="dark"] .nav .wordmark { color: #F4F6FC; }
.market-com [data-tone="dark"] .label { color: var(--accent); }
.market-com [data-tone="dark"] table.data { color: #F4F6FC; }
.market-com [data-tone="dark"] table.data th { color: #B8C1D4; }
.market-com [data-tone="dark"] table.data td { border-color: #2C3340; }
.market-com [data-tone="dark"] .download-soon:disabled { background: transparent; border-color: #3A4252; color: #B8C1D4; }
@media (min-width: 1360px) { .market-com { --stage-x: 64px; } }
@media (max-width: 560px) { .market-com { --stage-y: 8px; --stage-r: 20px; } }
/* Print: light text needs its graphite stage, so dark scenes and the header keep their colours. */
@media print {
  body.market-com,
  .market-com section[data-tone="dark"] > .scene { transition: none; }
  .market-com .nav,
  .market-com section[data-tone="dark"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* S10-3 (M9): blocks below the first screen rise into place with the d1…d9 step, never from
   transparency (11.10: ordinary blocks stay readable from the start). A shown block never moves
   down: site.js lowers only blocks that have not been on screen yet (.wait = the first keyframe)
   and leaves blocks already on screen in place, so adding .in and its delay change nothing.
   Nested blocks add 8 px: 24 px at most. Blocks with focusable controls get
   no .reveal (test), so focus never replays a rise; :focus-within is the safety net. */
.market-com .reveal.wait { transform: translateY(16px); }                                /* 0,3,0 */
.market-com .reveal .reveal.wait { transform: translateY(8px); }                         /* 0,4,0 */
.market-com .reveal.in { animation: reveal-in .8s var(--ease) var(--d, 0s) both; }      /* 0,3,0 */
.market-com .reveal .reveal.in { animation-name: reveal-in-nested; }                     /* 0,4,0 */
@keyframes reveal-in-nested { from { transform: translateY(8px); } to { transform: none; } }
.market-com .reveal.in:focus-within,                                                     /* 0,4,0 */
.market-com .reveal .reveal.in:focus-within { animation: none; }                         /* 0,5,0 */
.no-js .market-com .reveal.wait,
.no-js .market-com .reveal .reveal.wait { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .market-com .reveal.wait,
  .market-com .reveal .reveal.wait { transform: none; }
}
@media print {
  .market-com .reveal.in,
  .market-com .reveal .reveal.in { animation: none; }
  .market-com .reveal.wait,
  .market-com .reveal .reveal.wait { transform: none; }
}

/* S10-4 (M11, M13): micro-transitions of the previous Turboffer, adapted. The «думаю» bar sweeps
   only in the thinking state (two passes, never in a loop). Buttons change their fill smoothly,
   text colour switches at once; ghost buttons get a hover shadow. The FAQ plus turns into a
   minus: its upright bar shrinks while the icon turns half a revolution. The turbine of the logo
   turns 30° on hover and keyboard focus. Focus rings never animate; reduced motion stops all of
   it (site.css, !important). Anchors of the header (M14): scroll-margin in the rule above. */
.market-com .panel .thinkbar::after { animation: none; }
.market-com .panel[data-state="thinking"] .thinkbar::after { animation: think 1.1s linear 2; }
.market-com .btn { transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .3s, box-shadow .3s; }
.market-com .faq summary::after { transition: background-size .4s var(--ease), transform .4s var(--ease); }
.market-com .faq details[open] summary::after {
  background: linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat,
              linear-gradient(currentColor,currentColor) center / 2px 0% no-repeat;
  transform: rotate(180deg);
}
.market-com .wordmark .turbine-o { transition: transform .4s var(--ease); }
.market-com .wordmark:focus-visible .turbine-o { transform: rotate(30deg); }
@media (hover: hover) {
  .market-com .wordmark:hover .turbine-o { transform: rotate(30deg); }
  .market-com .btn-ghost:not(:disabled):hover { border-color: #B4C2DC; box-shadow: 0 6px 18px -10px rgba(31,52,98,.35); }
}

/* S-HDR (D143, D144; owner 17.10). Under 900 px the header keeps its demo button, next to «Меню»;
   on a phone it says just «Демо» (D143). The logo never wraps (the rule below): checked
   at 320, 375, 414, 768 and 1440 px. The logo turbine takes the app's accent (D144): on the
   graphite header the light blue of the wheel in «Графит» (8.6:1), on the light header #2563EB, as
   in «Платина». #2563EB is 4.9:1 on #F8FAFD and 3:1 against the letters #182338, so the turbine
   still reads as the accent; the deeper #1A3E9C is 9.1:1 on the background but only 1.7:1 against
   the letters. The footer logo is still an <img> of turbine.svg, shared with RU: it takes this
   colour with the footer's own change. */
.market-com .nav .cta-short { display: none; }
/* The header logo never wraps (the S-OPEN prototype's broke into three lines on a narrow screen). */
.market-com .wordmark,
.market-com .wordmark .brand-name { flex: none; white-space: nowrap; overflow-wrap: normal; }
/* Without JS the opening of the home page (P-LAPTOP) stands on its dark picture, so the header takes the graphite tone there. */
.no-js .market-com:has(.lt) .nav { --fg: #F4F6FC; --fg-2: #B8C1D4; --fg-3: #B8C1D4; --accent: #A9BDF2; --hair: rgba(255,255,255,.12); color: #F4F6FC; background: #14171D; border-bottom-color: #2A303B; }
.no-js .market-com:has(.lt) .nav .wordmark { color: #F4F6FC; }
.market-com .wordmark .turbine-o { color: #2563EB; }
body.market-com[data-tone="dark"] .nav .wordmark .turbine-o,
.no-js .market-com:has(.lt) .nav .wordmark .turbine-o { color: #8AB4FF; }
@media (max-width: 900px) {
  .market-com .nav > .wrap > .demo-launch { display: inline-flex; position: absolute; top: 10px; right: 88px; }
}
@media (max-width: 560px) {
  .market-com .nav .cta-long { display: none; }
  .market-com .nav .cta-short { display: inline; }
}