/* src/components/Faq/Faq.css */
/* B2C-Home3 «Частые вопросы» and B2C-Pricing «Вопросы об оплате»: a rule
   above every question and one under the list; the question a row with the
   «+» / «−» at its end; the open answer a paragraph under it. */
.oj-faq {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--oj-border);
}

.oj-faq__item {
  border-top: 1px solid var(--oj-border);
}

.oj-faq__question {
  margin: 0;
}

.oj-faq__question button {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--oj-navy);
}

.oj-faq__item.is-open .oj-faq__question button {
  padding-bottom: 12px;
}

.oj-faq__icon::before {
  content: "+";
  display: block;
  text-align: center;
  font-family: var(--oj-font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--oj-blue);
}

.oj-faq__item.is-open .oj-faq__icon::before {
  content: "\2212";
}

/* content-box: the artboards' 900px is the text's own width, padding aside */
.oj-faq__answer p {
  box-sizing: content-box;
  margin: 0;
  max-width: 900px;
  padding: 0 88px 28px 28px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--oj-text-2);
}

/* a link inside an answer (the home FAQ's to /install) */
.oj-faq__link {
  color: var(--oj-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oj-faq__link:hover {
  color: var(--oj-navy);
}

/* an answer not written yet: one empty line where it will go */
.oj-faq__answer .oj-faq__pending {
  min-height: 1.55em;
}

/* Only once client/faq.ts has taken over: without JS every answer shows. */
.oj-faq.is-ready .oj-faq__item:not(.is-open) .oj-faq__answer {
  display: none;
}

@media (max-width: 1279px) {
  .oj-faq__question button {
    padding: 24px 20px;
    font-size: 24px;
    line-height: 1.25;
  }

  .oj-faq__item.is-open .oj-faq__question button {
    padding-bottom: 10px;
  }

  .oj-faq__answer p {
    padding: 0 64px 24px 20px;
    font-size: 18px;
  }
}

@media (max-width: 1023px) {
  .oj-faq__question button {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .oj-faq__question button {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 16px;
    padding: 20px 0;
    font-size: 18px;
  }

  .oj-faq__item.is-open .oj-faq__question button {
    padding-bottom: 10px;
  }

  .oj-faq__icon::before {
    font-size: 26px;
  }

  .oj-faq__answer p {
    padding: 0 32px 20px 0;
    font-size: 16px;
  }
}


/* src/components/home/HomeHero.css */
/* Layout spec §4/§6, `Home2.dc.html`/`Home1024.dc.html`/`HomeMobile.dc.html`.
   `.oj-hero` is its own container (content-box + max-width, see
   ../../styles/base.css's comment on why sections own this shape now that
   `<main>` carries no padding) — position: relative so the desktop tile
   ladder can sit at the same inset as the section's own padding. */
.oj-hero {
  position: relative;
  box-sizing: content-box;
  /* An explicit width, not `auto`: `.oj-hero` is a flex item of `main`
     (column direction) with `margin: 0 auto` for centering past 1320 —
     but per the flexbox spec, an item with an auto cross-axis margin never
     stretches to the container's size, `width: auto` falls back to
     shrink-to-fit instead, and shrink-to-fit's min-content floor is set by
     non-wrapping content deep inside (the tile ladder's mobile row, the
     example-chip strip, item 3) regardless of their own `overflow`. Giving
     `width` a definite value here (available space minus this rule's own
     side padding, capped by `max-width`) sidesteps shrink-to-fit entirely,
     so those strips stay inside their own `overflow-x: auto`/`hidden`
     instead of widening the whole page. Kept in sync with the padding
     this rule and its breakpoints declare below. */
  width: calc(100% - 120px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 60px 112px;
  display: flex;
  flex-direction: column;
}

/* B2C-Biz: above the tagline, in the top padding's band on desktop and
   tablet; in the flow, above the tile row, on a phone */
.oj-hero__badge {
  position: absolute;
  top: 20px;
  left: 60px;
  z-index: 2;
  margin: 0;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--oj-surface);
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--oj-navy);
  white-space: nowrap;
}

.oj-hero__badgeIcon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.oj-hero__tagline {
  position: relative;
  margin: 0;
  max-width: 780px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 96px;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--oj-navy);
}

.oj-hero__tagline-brand {
  font-size: 96px;
}

.oj-hero__taglineLine {
  display: block;
}

/* The real H1 (SEO spec 2.1, DECISIONS.md #6): same spot and size as the
   mockup's own lede paragraph — a heading tag, not a heading-sized font. */
.oj-hero__h1 {
  position: relative;
  margin: 44px 0 0;
  max-width: 540px;
  font-family: var(--oj-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--oj-text);
}

.oj-hero__ctaRow {
  position: relative;
  margin-top: 36px;
}

.oj-hero__cta {
  height: var(--oj-btn-h);
}

.oj-hero__demo {
  position: relative;
  margin-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.oj-hero__examples {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.oj-hero__examplesTitle {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--oj-navy);
}

/* Three equal columns as flex, not grid: WebKit (Safari) does not recompute
   a grid row's height when the window is resized, so a chip kept its old
   height and its text spilled out; flex tracks the width both ways. */
.oj-hero__chips {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* Layout spec §5: a chip's own state carries no goal-worthy animation, so
   `data-goal`/`data-goal-scenario` (contract 6, ../../../AGENTS.md) sit
   right on the button — the delegated listener in
   ../../client/analytics.ts fires `hero_example_click` on a real click only,
   never on the automatic scenario loop (task brief, metrika spec §6 item 8). */
.oj-hero-chip {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  min-height: 72px;
  padding: 16px 20px;
  border-radius: 18px;
  text-align: left;
  font-family: var(--oj-font-body);
  font-size: 17px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  border: 2px solid var(--oj-border);
  background: var(--oj-surface);
  color: var(--oj-text-2);
  font-weight: 600;
}

.oj-hero-chip__icon {
  flex: none;
  margin-top: 4px;
  color: var(--oj-slate-300);
}

/* No bold on the active chip (the owner's call over the mockup): the chat
   loop moves the active chip on its own every few seconds, and a bolder,
   wider label rewrapped the row and made everything below it jump. */
.oj-hero-chip[aria-pressed="true"] {
  border-color: var(--oj-cyan);
  background: var(--oj-cyan-tint);
  color: var(--oj-navy);
}

.oj-hero-chip[aria-pressed="true"] .oj-hero-chip__icon {
  color: var(--oj-cyan);
}

/* ---- the decorative tile ladder (HomeHeroTiles.tsx), aria-hidden ---- */

.oj-hero-tiles--desktop,
.oj-hero-tiles--tablet {
  position: absolute;
  /* above the text blocks, whose full-width boxes would otherwise swallow
     a click on a tile (the Easter egg); the set's own empty area lets
     clicks through, only the tiles take them */
  z-index: 1;
  pointer-events: none;
  right: var(--oj-page-pad-desktop);
  top: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.oj-hero-tiles--tablet,
.oj-hero-tiles--mobile {
  display: none;
}

/* `client/heroTiles.ts` drops a row's leftmost tiles that would come within
   40px of the text (layout spec §4). */
.oj-hero-tile.is-off {
  display: none;
}

.oj-hero-tiles__row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  /* a row whose every tile is off keeps its height, so the rows below stay
     in the bands `client/heroTiles.ts` measured them in */
  min-height: 104px;
}

.oj-hero-tile {
  width: 104px;
  height: 104px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  overflow: hidden;
  background: var(--oj-surface-2);
}

.oj-hero-tile--cyan {
  background: var(--oj-cyan);
}

.oj-hero-tile--navy {
  background: var(--oj-navy);
}

.oj-hero-tile--blue {
  background: var(--oj-blue);
}

/* The rhombus (owner's call, as on `HomeMobile.dc.html`, over the spec's
   "no diamonds"): the tile itself turned 45° and shrunk to 74% of its cell,
   radius 22% — the phone artboard's 46px in 62. `--oj-turn` counts 45° steps;
   the Easter egg (`client/heroTiles.ts`) adds one per change, so a square
   always turns into a rhombus and back the same way round. The rhombus's
   own square colour is its tone class (navy for the one it starts with).
   The colour switches fast, so the turn never shows a muddy in-between. */
.oj-hero-tile {
  --oj-turn: 0;
  transform: rotate(calc(var(--oj-turn) * 45deg));
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    border-radius 520ms ease;
  /* no hand cursor: an Easter egg is not announced (owner's call, the one
     exception to "everything clickable shows a hand") */
  cursor: default;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

.oj-hero-tile.is-rhombus {
  --oj-turn: 1;
  transform: rotate(calc(var(--oj-turn) * 45deg)) scale(0.74);
  border-radius: 22%;
  background: var(--oj-amber);
}

.oj-hero-tile > * {
  transition: opacity 260ms ease;
}

.oj-hero-tile.is-rhombus > * {
  opacity: 0;
}

.oj-hero-tile--white {
  background: var(--oj-surface);
}

.oj-hero-tile__lines {
  width: 62px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oj-hero-tile__line {
  display: block;
  width: 92%;
  height: 7px;
  border-radius: 4px;
  background: var(--oj-slate-200);
}

.oj-hero-tile__line--dark {
  width: 70%;
  background: var(--oj-navy);
}

.oj-hero-tile__line--short {
  width: 80%;
}

.oj-hero-tile__bar {
  display: block;
  width: 5px;
  height: var(--oj-bar-h);
  border-radius: 999px;
  background: #fff;
}

/* Below 1280 the tablet artboard's own set (2/1/3/4) replaces the desktop
   one. Without JS nothing measures the text, so each set holds a fixed
   approximation of the 40px rule for its range; `client/heroTiles.ts`
   marks the set `is-measured` and these give way to the exact count. */
@media (max-width: 1279px) {
  .oj-hero {
    padding-bottom: 96px;
  }

  .oj-hero-tiles--desktop {
    display: none;
  }

  .oj-hero-tiles--tablet {
    display: flex;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .oj-hero-tiles--desktop:not(.is-measured)
    .oj-hero-tiles__row:nth-child(1)
    .oj-hero-tile:nth-child(1),
  .oj-hero-tiles--desktop:not(.is-measured)
    .oj-hero-tiles__row:nth-child(2)
    .oj-hero-tile:nth-child(1),
  .oj-hero-tiles--desktop:not(.is-measured)
    .oj-hero-tiles__row:nth-child(3)
    .oj-hero-tile:nth-child(1) {
    display: none;
  }
}

/* 1024-1279: "Команда говорит." reaches the top row's first tile */
@media (min-width: 1024px) and (max-width: 1279px) {
  .oj-hero-tiles--tablet:not(.is-measured)
    .oj-hero-tiles__row:nth-child(1)
    .oj-hero-tile:nth-child(1) {
    display: none;
  }
}

/* 768-1023: the fewest tiles the measured ladder keeps anywhere in the range */
@media (max-width: 1023px) {
  .oj-hero-tiles--tablet:not(.is-measured) .oj-hero-tiles__row:nth-child(-n + 3) .oj-hero-tile,
  .oj-hero-tiles--tablet:not(.is-measured)
    .oj-hero-tiles__row:nth-child(4)
    .oj-hero-tile:nth-child(-n + 3) {
    display: none;
  }
}

@media (max-width: 1023px) {
  .oj-hero {
    padding-left: 40px;
    padding-right: 40px;
    width: calc(100% - 80px);
  }

  .oj-hero__badge {
    left: 40px;
  }

  /* Below the 1024 artboard three columns only squeeze the chips into five-
     and six-line boxes; they become the mobile scheme's swipeable strip
     instead, a chip's width following the viewport smoothly (no step at
     any breakpoint), every chip the same height. */
  .oj-hero__chips {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 -40px;
    padding: 2px 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 40px;
  }

  .oj-hero-chip {
    width: auto;
    flex: 0 0 clamp(260px, 34vw, 300px);
    min-height: 44px;
    padding: 10px 16px;
    font-size: 16px;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .oj-hero {
    padding: 24px 20px 56px;
    width: calc(100% - 40px);
  }

  .oj-hero-tiles--tablet {
    display: none;
  }

  .oj-hero__badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 16px;
    height: 36px;
    padding: 0 14px 0 11px;
    font-size: 14px;
  }

  .oj-hero__badgeIcon {
    width: 16px;
    height: 16px;
  }

  /* B2C-BizMobile: the rows stay inside the page's 20px margins and show
     only whole tiles, as many as fit — five at 390 (5 x 62 + 4 x 10 = 350,
     the content width), four at 320, ten at 767 (owner's reports, 22.10:
     the row used to run to the screen's edge and cut its last tile, then
     left an empty stretch on the right of a wider phone). */
  .oj-hero-tiles--mobile {
    position: relative;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }

  /* A tile that does not fit whole wraps to a second line, which the row
     clips: one tile's height, plus 13px above and below (taken back by the
     margin) so a tile turning for the Easter egg — 88px on the diagonal —
     is never cut. */
  .oj-hero-tiles--mobile .oj-hero-tiles__row {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px 10px;
    box-sizing: content-box;
    height: 62px;
    min-height: 0;
    margin: -13px 0;
    padding: 13px 0;
    overflow: hidden;
  }

  .oj-hero-tiles--mobile .oj-hero-tile {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    gap: 3px;
  }

  .oj-hero-tiles--mobile .oj-hero-tile.is-rhombus {
    border-radius: 22%;
  }

  .oj-hero-tiles--mobile .oj-hero-tile__lines {
    width: 38px;
    gap: 5px;
  }

  .oj-hero-tiles--mobile .oj-hero-tile__line {
    height: 5px;
  }

  .oj-hero-tiles--mobile .oj-hero-tile__bar {
    width: 3px;
    height: calc(var(--oj-bar-h) * 0.58);
  }

  /* B2C-BizMobile: 41px keeps "Команда говорит." on one line at 390 */
  .oj-hero__tagline,
  .oj-hero__tagline-brand {
    font-size: 41px;
  }

  .oj-hero__tagline {
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .oj-hero__h1 {
    margin-top: 20px;
    max-width: none;
    font-size: 19px;
  }

  .oj-hero__ctaRow {
    margin-top: 24px;
  }

  .oj-hero__cta {
    width: 100%;
  }

  .oj-hero__demo {
    margin-top: 48px;
    gap: 14px;
  }

  .oj-hero__examplesTitle {
    font-size: 30px;
  }

  .oj-hero__chips {
    margin: 0 -20px;
    padding: 2px 20px;
    scroll-padding-left: 20px;
  }

  .oj-hero-chip {
    flex-basis: min(270px, 72vw);
  }
}

/* ---- the chat window (HomeHeroChat.tsx) ---- */

/* `overflow-anchor: none`: Chrome's scroll anchoring would otherwise pick a
   bubble as the page's anchor while the card sits at the top of the screen,
   and every time the conversation moves the bubble inside the clipped log,
   scroll the whole page after it — on a phone the page crept away by itself
   every few seconds (owner's report, 2026-09-29). The card never changes its
   own height, so nothing needs anchoring inside it. */
.oj-hero-chat {
  overflow-anchor: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 28px;
  background: var(--oj-surface);
  border: 1px solid var(--oj-border-3);
  box-shadow: 0 40px 80px -48px rgba(28, 44, 90, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.oj-hero-chat__header {
  box-sizing: border-box;
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--oj-surface-3);
}

.oj-hero-chat__brand {
  font-size: 17px;
}

/* `hidden` must win over every `display` a chat part sets for itself — the
   answers of the other scenarios and the idle thinking row sit in the DOM
   hidden, and a class's own `display` would otherwise put them back on
   screen, where they push the live exchange out of the fixed-height log. */
.oj-hero-chat [hidden] {
  display: none !important;
}

.oj-hero-chat__log {
  box-sizing: border-box;
  position: relative;
  height: 396px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* The FLIP target (`HomeHeroChat.tsx`'s comment, `client/heroChat.ts`): its
   own height is intrinsic (the bubbles stack top-down inside it), `.oj-hero-
   chat__log` above bottom-anchors *this one child* and clips whatever
   scrolls past its own top. `position: relative` gives the thinking row a
   containing block while it is frozen `position: absolute` mid cross-fade
   (`freezeThinking` in heroChat.ts) so it can hold its exact spot without
   counting toward this element's height. */
.oj-hero-chat__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

.oj-hero-chat__bubble {
  font-size: 17px;
  line-height: 1.45;
}

/* A bubble's entrance (task brief "smooth entries"): starts faded and offset
   below its resting spot, then rises into place while `client/heroChat.ts`
   glides `.oj-hero-chat__track` by the same delta — both transitions share
   the one forced-reflow tick `flipTrack` (heroChat.ts) triggers, so they run
   in lockstep. `--active` must be a second class, not the same one changing
   value, or there is nothing to transition *from*. `prefers-reduced-motion`
   never reaches this: `wireReducedMotion` (heroChat.ts) swaps exchanges
   outright and never adds either class. */
.oj-hero-chat__bubble--enter {
  opacity: 0;
  transform: translateY(14px);
}

.oj-hero-chat__bubble--enter-active {
  transition:
    opacity 280ms ease-out,
    transform 280ms ease-out;
  opacity: 1;
  transform: translateY(0);
}

/* The thinking row's own exit (task brief "the thinking row fades while the
   answer fades/rises in"): only opacity — position/top/left/width are frozen
   inline by `freezeThinking` (heroChat.ts) at the same instant, taking it out
   of `.oj-hero-chat__track`'s flow so the row's height collapses into the
   very same glide the answer's entrance triggers, instead of a second, later
   jump. 300ms below is kept in sync with `THINKING_FADE_MS` in heroChat.ts. */
.oj-hero-chat__thinking--leaving {
  transition: opacity 300ms ease-in;
  opacity: 0;
}

.oj-hero-chat__bubble--user {
  align-self: flex-end;
  max-width: 620px;
  padding: 12px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--oj-navy);
  color: #fff;
}

.oj-hero-chat__bubble--bot {
  align-self: flex-start;
  box-sizing: border-box;
  max-width: 720px;
  padding: 12px 16px;
  border-radius: 6px 20px 20px 20px;
  background: var(--oj-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.5;
  color: var(--oj-text);
}

.oj-hero-chat__list {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oj-hero-chat__link {
  color: var(--oj-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oj-hero-chat__note {
  font-style: italic;
  color: var(--oj-text-2);
}

.oj-hero-chat__underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oj-hero-chat__quote {
  position: relative;
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--oj-blue);
  background: rgba(27, 107, 147, 0.1);
}

.oj-hero-chat__thinking {
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: 6px 20px 20px 20px;
  background: var(--oj-bg);
  font-size: 17px;
  color: var(--oj-text-2);
  display: flex;
  gap: 8px;
}

.oj-hero-chat__thinking span[data-js="hero-chat-counter"] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--oj-blue);
}

/* `Home2.dc.html`'s own "thinking" pulse (layout spec §5's "первый экран"),
   copied verbatim — 1.2s ease-in-out, opacity 1 -> .35 and back. */
@keyframes oj-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.oj-hero-chat__thinkingLabel {
  animation: oj-pulse 1.2s ease-in-out infinite;
}

.oj-hero-chat__inputRow {
  box-sizing: border-box;
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oj-hero-chat__input {
  box-sizing: border-box;
  flex-grow: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: var(--oj-bg);
  font-size: 17px;
  color: var(--oj-text);
  white-space: nowrap;
  overflow: hidden;
}

.oj-hero-chat__placeholder {
  color: var(--oj-muted);
}

/* Shows the END of the typed line once it outgrows the field, not the start
   with "…" (owner's call, 2026-09-30). `is-clipped` is set by
   `client/heroChat.ts` only while the text overflows, so a short line keeps
   its first letters unfaded. The text sits flush right in a flex box, so
   what doesn't fit spills out of the LEFT edge; the direction stays
   left-to-right — `direction: rtl` would do the same but move a trailing «,
   comma or space to the start of the line while it is the last character
   typed. The fade on the left edge is a stylesheet rule (CSP, contract 10). */
.oj-hero-chat__typed {
  overflow: hidden;
}

.oj-hero-chat__typed.is-clipped {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, #000 24px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
}

/* The typing caret (`Home2.dc.html`'s own `oj-caret`, copied verbatim) —
   `hidden` (not CSS opacity) outside the typing phase, per contract 5: the
   element simply isn't there rather than being invisibly animated. */
@keyframes oj-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.oj-hero-chat__caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--oj-text);
  animation: oj-caret 1s steps(1) infinite;
  flex: none;
}

/* Off-screen the chat's loops stop (contract 5): `client/heroChat.ts` marks
   the root `data-running="false"` while it is out of the viewport. */
[data-js="hero-chat"][data-running="false"] .oj-hero-chat__caret,
[data-js="hero-chat"][data-running="false"] .oj-hero-chat__thinkingLabel {
  animation-play-state: paused;
}

.oj-hero-chat__iconBtn {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.oj-hero-chat__iconBtn--send {
  background: var(--oj-cyan);
  color: var(--oj-ink);
}

.oj-hero-chat__iconBtn--voice {
  border: 1px solid var(--oj-border-3);
  background: var(--oj-surface);
  color: var(--oj-navy);
}

@media (max-width: 767px) {
  .oj-hero-chat__header {
    padding: 0 16px;
  }

  .oj-hero-chat__log {
    height: 500px;
    padding: 16px 14px;
  }

  .oj-hero-chat__bubble {
    font-size: 16px;
  }

  .oj-hero-chat__bubble--user {
    max-width: 90%;
  }

  .oj-hero-chat__bubble--bot {
    max-width: 94%;
  }

  .oj-hero-chat__input {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oj-hero-tile,
  .oj-hero-tile > * {
    transition: none;
  }
}


/* src/components/home/HomeHeroStats.css */
/* B2C-Biz/Biz1024/BizMobile "stats": a full-bleed band inside `.oj-hero`
   (which caps its own width), the figures in a capped inner column. The
   footnote takes `--oj-muted`, not the artboard's #6F727B: that grey on this
   band is ~4:1, under the 4.5:1 the Lighthouse accessibility target needs. */
.oj-hero-stats {
  position: relative;
  margin: 112px calc(50% - 50vw) 0;
  background: var(--oj-surface-2);
}

.oj-hero-stats__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 60px 88px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.oj-hero-stats__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.oj-hero-stats__item {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 20px 0 40px;
  border-left: 1px solid #d6d3ca;
  display: flex;
  flex-direction: column;
}

.oj-hero-stats__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.oj-hero-stats__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oj-muted);
}

.oj-hero-stats__mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.oj-hero-stats__mark--cyan {
  background: var(--oj-cyan);
}

.oj-hero-stats__mark--navy {
  background: var(--oj-navy);
}

.oj-hero-stats__mark--amber {
  background: var(--oj-amber);
}

.oj-hero-stats__value {
  margin-top: 20px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 128px;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--oj-navy);
  white-space: nowrap;
}

.oj-hero-stats__text {
  margin-top: 40px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-hero-stats__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--oj-muted);
}

@media (max-width: 1279px) {
  .oj-hero-stats__inner {
    padding: 80px 60px 72px;
    gap: 44px;
  }

  .oj-hero-stats__item {
    padding: 0 14px 0 28px;
  }

  .oj-hero-stats__label {
    font-size: 12px;
  }

  .oj-hero-stats__mark {
    width: 9px;
    height: 9px;
  }

  .oj-hero-stats__value {
    margin-top: 16px;
    font-size: 88px;
  }

  .oj-hero-stats__text {
    margin-top: 32px;
    font-size: 19px;
  }

  .oj-hero-stats__note {
    font-size: 13px;
  }
}

@media (max-width: 1023px) {
  .oj-hero-stats__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .oj-hero-stats__value {
    font-size: 72px;
  }
}

@media (max-width: 767px) {
  .oj-hero-stats {
    margin-top: 48px;
  }

  .oj-hero-stats__inner {
    padding: 56px 20px 48px;
    gap: 32px;
  }

  .oj-hero-stats__list {
    flex-direction: column;
    gap: 32px;
  }

  .oj-hero-stats__item,
  .oj-hero-stats__item:first-child {
    padding: 0;
    border-left: 0;
  }

  .oj-hero-stats__item + .oj-hero-stats__item {
    padding-top: 32px;
    border-top: 1px solid #d6d3ca;
  }

  .oj-hero-stats__mark {
    width: 10px;
    height: 10px;
  }

  .oj-hero-stats__value {
    margin-top: 14px;
    font-size: 88px;
    line-height: 0.9;
  }

  .oj-hero-stats__text {
    margin-top: 22px;
    font-size: 20px;
  }

  .oj-hero-stats__note {
    padding-top: 24px;
    border-top: 1px solid #d6d3ca;
  }
}


/* src/components/main/MainChat.css */
/* B2C-Home3 block 3: the chat window (a fixed-height log whose bubbles stack
   from the bottom, so playing the exchange never moves the page) and three
   cards under it — in a row to 1024, one per line with the item on the right
   at 768, stacked on a phone. */
.oj-mchat {
  background: var(--oj-bg);
  padding: 120px 0;
}

.oj-mchat__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

.oj-mchat__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-mchat__demo {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oj-mchat__window {
  box-sizing: border-box;
  border-radius: 28px;
  background: var(--oj-surface);
  border: 1px solid #e4e1da;
  box-shadow: 0 40px 80px -48px rgba(28, 44, 90, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.oj-mchat__head {
  box-sizing: border-box;
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--oj-surface-3);
  color: var(--oj-navy);
}

.oj-mchat__head .oj-logo-mark {
  width: 22px;
  height: 22px;
}

.oj-mchat__head .oj-wordmark {
  font-size: 17px;
}

/* The window is as big as /business's hero chat at every width (owner's
   call, 09.11): 536px from 768 up (60 + 396 + 78 + borders), 640 on a
   phone — the log takes up the difference. */
.oj-mchat__log {
  box-sizing: border-box;
  height: 396px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  overflow: hidden;
}

/* The FLIP target, as `.oj-hero-chat__track` on /business
   (`../home/HomeHero.css`): its height is its own, the log above
   bottom-anchors it; `position: relative` holds the thinking row in place
   while it fades out of the flow (`client/mainChat.ts`). */
.oj-mchat__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

.oj-mchat__bubble {
  margin: 0;
  box-sizing: border-box;
  padding: 12px 16px;
  font-size: 17px;
  line-height: 1.45;
}

.oj-mchat__bubble[hidden] {
  display: none;
}

/* The /business chat's entrance and exit, same timings
   (`../home/HomeHero.css`, `client/heroChat.ts`): a bubble fades and rises
   280ms into place while the track glides up by its height; the thinking row
   fades out over 300ms while the answer comes in. */
.oj-mchat__bubble--enter {
  opacity: 0;
  transform: translateY(14px);
}

.oj-mchat__bubble--enter-active {
  transition:
    opacity 280ms ease-out,
    transform 280ms ease-out;
  opacity: 1;
  transform: translateY(0);
}

.oj-mchat__thinking--leaving {
  transition: opacity 300ms ease-in;
  opacity: 0;
}

.oj-mchat__bubble--user {
  align-self: flex-end;
  max-width: 620px;
  border-radius: 20px 20px 6px 20px;
  background: var(--oj-navy);
  color: #fff;
}

.oj-mchat__bubble--bot {
  align-self: flex-start;
  border-radius: 6px 20px 20px 20px;
  background: var(--oj-bg);
}

.oj-mchat__thinking {
  display: flex;
  gap: 8px;
  color: var(--oj-text-2);
}

.oj-mchat__thinkingLabel {
  animation: oj-mchat-pulse 1.2s ease-in-out infinite;
}

.oj-mchat__counter {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--oj-blue);
}

.oj-mchat__answer {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.5;
  color: var(--oj-text);
}

.oj-mchat__answer p {
  margin: 0;
}

.oj-mchat__answer ul {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oj-mchat__file {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--oj-surface);
  border: 1px solid #e4e1da;
  font-size: 15px;
  font-weight: 700;
  color: var(--oj-navy);
}

.oj-mchat .oj-icon {
  display: block;
  flex: none;
  fill: none;
  stroke: var(--oj-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oj-mchat__file .oj-icon {
  width: 16px;
  height: 16px;
}

.oj-mchat__composer {
  box-sizing: border-box;
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oj-mchat__field {
  box-sizing: border-box;
  flex-grow: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: var(--oj-bg);
  font-size: 17px;
  color: var(--oj-text);
  white-space: nowrap;
  overflow: hidden;
}

.oj-mchat__placeholder {
  color: var(--oj-muted);
}

/* As on /business (owner's call, 30.09): a line longer than the field shows
   its END, its left edge fading out, not its start behind an «…». */
.oj-mchat__typed {
  overflow: hidden;
}

.oj-mchat__typed.is-clipped {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, #000 24px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
}

.oj-mchat__placeholder[hidden] {
  display: none;
}

.oj-mchat__caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--oj-text);
  animation: oj-mchat-caret 1s steps(1) infinite;
  flex: none;
}

.oj-mchat__caret[hidden] {
  display: none;
}

.oj-mchat__send,
.oj-mchat__voice {
  box-sizing: border-box;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oj-mchat__send {
  background: var(--oj-cyan);
}

.oj-mchat__voice {
  border: 1px solid #e4e1da;
  background: var(--oj-surface);
}

.oj-mchat__send .oj-icon,
.oj-mchat__voice .oj-icon {
  width: 20px;
  height: 20px;
}

.oj-mchat__send .oj-icon {
  stroke: var(--oj-ink);
  stroke-width: 2.2;
}

.oj-mchat__voice .oj-icon {
  stroke: var(--oj-navy);
}

.oj-mchat__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.oj-mchat__card {
  box-sizing: border-box;
  min-width: 0;
  padding: 28px;
  border-radius: 28px;
  background: var(--oj-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oj-mchat__cardTitle {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--oj-navy);
}

.oj-mchat__cardTitle::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--oj-amber);
  transform: rotate(45deg);
}

.oj-mchat__cardResult {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--oj-blue);
}

.oj-mchat__cardItem {
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--oj-bg);
}

.oj-mchat__cardItem .oj-icon {
  width: 24px;
  height: 24px;
}

.oj-mchat__cardItemText {
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-mchat__cardItemStack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oj-mchat__cardItemNote {
  font-size: 16px;
  line-height: 1.4;
  color: var(--oj-text-2);
}

@keyframes oj-mchat-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes oj-mchat-caret {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* B2C-Home3-1024: the heading's two lines */
@media (max-width: 1279px) {
  .oj-mchat {
    padding: 96px 0;
  }

  .oj-mchat__titleLine {
    display: block;
  }

  .oj-mchat__card {
    padding: 24px;
    border-radius: 24px;
  }

  .oj-mchat__cardTitle {
    font-size: 30px;
  }

  .oj-mchat__cardResult,
  .oj-mchat__cardItemText {
    font-size: 18px;
  }

  .oj-mchat__cardItem {
    border-radius: 14px;
  }

  .oj-mchat__cardItem .oj-icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 1023px) {
  .oj-mchat {
    padding: 80px 0;
  }

  .oj-mchat__inner {
    padding: 0 40px;
  }

  .oj-mchat__title {
    font-size: 48px;
    line-height: 1.04;
  }

  .oj-mchat__titleLine {
    display: inline;
  }

  .oj-mchat__demo {
    margin-top: 40px;
  }

  .oj-mchat__log {
    padding: 20px;
  }

  .oj-mchat__bubble--user {
    max-width: 82%;
  }

  .oj-mchat__answer {
    max-width: 90%;
  }

  /* B2C-Home3-768: one card per line, the item on the right */
  .oj-mchat__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .oj-mchat__card {
    padding: 20px 20px 20px 24px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 4px;
    align-items: center;
  }

  .oj-mchat__cardTitle {
    font-size: 32px;
  }

  .oj-mchat__cardItem {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 767px) {
  .oj-mchat {
    padding: 72px 0;
  }

  .oj-mchat__inner {
    padding: 0 20px;
  }

  .oj-mchat__title {
    font-size: 34px;
  }

  .oj-mchat__demo {
    margin-top: 28px;
  }

  .oj-mchat__window {
    box-shadow: 0 30px 60px -40px rgba(28, 44, 90, 0.45);
  }

  .oj-mchat__head {
    height: 52px;
    padding: 0 16px;
  }

  .oj-mchat__log {
    /* 640 - 52 (head) - 66 (composer) - 2 (borders) */
    height: 520px;
    padding: 16px 12px;
  }

  .oj-mchat__bubble {
    font-size: 15px;
  }

  .oj-mchat__bubble--user {
    max-width: 90%;
    padding: 10px 14px;
  }

  .oj-mchat__answer {
    max-width: 96%;
    padding: 10px 14px;
  }

  .oj-mchat__composer {
    padding: 10px 10px 12px;
  }

  .oj-mchat__field {
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 15px;
  }

  .oj-mchat__send,
  .oj-mchat__voice {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .oj-mchat__cards {
    gap: 10px;
  }

  .oj-mchat__card {
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: stretch;
    gap: 10px;
  }

  .oj-mchat__cardTitle {
    align-self: flex-start;
  }

  .oj-mchat__cardTitle {
    font-size: 28px;
  }

  .oj-mchat__cardResult,
  .oj-mchat__cardItemText {
    font-size: 17px;
  }

  .oj-mchat__cardItem {
    padding: 14px 16px;
  }

  .oj-mchat__cardItemNote {
    font-size: 15px;
  }
}

/* paused while the window is off-screen (`client/mainChat.ts` sets
   `data-running`), as /business's chat */
[data-js="main-chat"][data-running="false"] .oj-mchat__caret,
[data-js="main-chat"][data-running="false"] .oj-mchat__thinkingLabel {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .oj-mchat__thinkingLabel,
  .oj-mchat__caret {
    animation: none;
  }
}


/* src/components/main/MainExamples.css */
/* B2C-Home3 block 5 (November mobile edits): four columns at 1440, 2 × 2
   from 1279 down, a sideways strip of white cards on a phone. Each column:
   an icon tile and the H3 over a rule, then right-aligned message bubbles. */
.oj-mexamples {
  background: var(--oj-surface-2);
  padding: 120px 0;
}

.oj-mexamples__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

.oj-mexamples__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-mexamples__titleLine {
  display: block;
}

.oj-mexamples__columns {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: 32px;
}

.oj-mexamples__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oj-mexamples__columnTitle {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d6ce;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: normal;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  white-space: nowrap;
}

.oj-mexamples__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oj-mexamples__column--home .oj-mexamples__icon {
  background: var(--oj-amber);
  color: var(--oj-ink);
}

.oj-mexamples__column--health .oj-mexamples__icon {
  background: var(--oj-cyan);
  color: var(--oj-ink);
}

.oj-mexamples__column--plans .oj-mexamples__icon {
  background: var(--oj-blue);
  color: #fff;
}

.oj-mexamples__column--docs .oj-mexamples__icon {
  background: var(--oj-navy);
  color: #fff;
}

.oj-mexamples__icon .oj-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oj-mexamples__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.oj-mexamples__bubble {
  box-sizing: border-box;
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--oj-navy);
  color: #fff;
  font-size: 17px;
  line-height: 1.4;
}

.oj-mexamples__more {
  margin: 56px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}

.oj-mexamples__moreText {
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--oj-text-2);
}

/* Four columns are narrowest from 1280 to 1439, where «Документы и
   картинки» at 22px runs 7px past its column: 21px there (no artboard). */
@media (min-width: 1280px) and (max-width: 1439px) {
  .oj-mexamples__columnTitle {
    font-size: 21px;
  }
}

@media (max-width: 1279px) {
  .oj-mexamples {
    padding: 96px 0;
  }

  .oj-mexamples__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 32px;
  }

  .oj-mexamples__column,
  .oj-mexamples__list {
    gap: 12px;
  }

  .oj-mexamples__bubble {
    font-size: 16px;
  }
}

@media (max-width: 1023px) {
  .oj-mexamples {
    padding: 80px 0;
  }

  .oj-mexamples__inner {
    padding: 0 40px;
  }

  .oj-mexamples__title {
    font-size: 48px;
    line-height: 1.04;
  }

  .oj-mexamples__columns {
    margin-top: 40px;
    gap: 44px 28px;
  }

  .oj-mexamples__bubble {
    max-width: 78%;
    font-size: 17px;
  }

  .oj-mexamples__more {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .oj-mexamples {
    padding: 72px 0;
  }

  .oj-mexamples__inner {
    padding: 0 20px;
  }

  .oj-mexamples__title {
    font-size: 34px;
  }

  .oj-mexamples__titleLine {
    display: inline;
  }

  /* B2C-Home3-Mobile: the four columns as a sideways strip of 300px white
     cards, out to the screen's edges (the section's 20px padding cancelled),
     snapping to 20px from the left; the shared strip module adds the drag. */
  .oj-mexamples__columns {
    margin: 28px -20px 0;
    padding: 0 20px 4px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
  }

  /* the last card's right edge: a flex row drops its end padding when it
     scrolls, so a spacer keeps 20px after it (the mockup's 8px spacer + gap) */
  .oj-mexamples__columns::after {
    content: "";
    flex: 0 0 8px;
  }

  .oj-mexamples__column {
    box-sizing: border-box;
    flex: 0 0 300px;
    scroll-snap-align: start;
    padding: 18px 16px 20px;
    border-radius: 20px;
    background: var(--oj-surface);
  }

  .oj-mexamples__column,
  .oj-mexamples__list {
    gap: 10px;
  }

  /* 19px, not the artboard's 20: «Документы и картинки» stays on one line
     inside the 300px card (at 20 it ran 3px past) */
  .oj-mexamples__columnTitle {
    font-size: 19px;
  }

  .oj-mexamples__bubble {
    max-width: 92%;
    padding: 11px 15px;
    font-size: 15px;
  }

  /* B2C-Home3-Mobile: the text on its own line above the link */
  .oj-mexamples__more {
    margin-top: 28px;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
  }

  .oj-mexamples__moreText,
  .oj-mexamples__more .oj-arrow-link {
    font-size: 17px;
  }
}


/* src/components/main/MainFaq.css */
/* B2C-Home3 «Частые вопросы»: a white band; the list itself is `../Faq/Faq.css`. */
.oj-mfaq {
  background: var(--oj-surface);
  padding: 120px 0;
}

.oj-mfaq__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

.oj-mfaq__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-mfaq__list {
  margin-top: 56px;
}

@media (max-width: 1279px) {
  .oj-mfaq {
    padding: 96px 0;
  }
}

@media (max-width: 1023px) {
  .oj-mfaq {
    padding: 80px 0;
  }

  .oj-mfaq__inner {
    padding: 0 40px;
  }

  .oj-mfaq__title {
    font-size: 48px;
    line-height: 1.04;
  }

  .oj-mfaq__list {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .oj-mfaq {
    padding: 72px 0;
  }

  .oj-mfaq__inner {
    padding: 0 20px;
  }

  .oj-mfaq__title {
    font-size: 34px;
  }

  .oj-mfaq__list {
    margin-top: 28px;
  }
}


/* src/components/main/MainHero.css */
/* B2C-Home3 first screen. 1440 and 1024: `/business`'s tile ladder in the
   top-right corner, stepping back from the text (client/heroTiles.ts); 768
   and 390: two rows above the slogan, whole tiles only. The «Работает без
   VPN» pill (`/business`'s `.oj-hero__badge`, owner's call 10.11) sits in
   the space above, as there: 20px under the header from 768 up, in the flow
   above the tiles on a phone. Badges: 3 in a row, a column from 1023 down. */
.oj-mhero {
  background: var(--oj-bg);
  padding: 72px 0 96px;
}

.oj-mhero__inner {
  position: relative;
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

/* `/business`'s tile sets (HomeHero.css), placed in this hero's inner box:
   the desktop set level with the slogan's top, the 1024 one 8px higher. */
.oj-mhero .oj-hero-tiles--desktop,
.oj-mhero .oj-hero-tiles--tablet {
  top: 0;
}

.oj-mhero .oj-hero-tiles--tablet {
  top: -8px;
}

/* `/business` places its pill 20px from the top of a 72px gap: the same
   here, measured from this box, which starts 72px down */
.oj-mhero .oj-hero__badge {
  top: -52px;
  left: var(--oj-page-pad-desktop);
}

.oj-mhero__text {
  position: relative;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oj-mhero__tagline {
  margin: 0;
  max-width: 780px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 96px;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--oj-navy);
}

.oj-mhero__taglineLine {
  display: block;
}

/* The H1 is the lede's sentence (SEO spec §1): body type, not a heading's. */
.oj-mhero__h1 {
  margin: 40px 0 0;
  max-width: 580px;
  font-family: var(--oj-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--oj-text);
}

.oj-mhero__h1 strong {
  font-weight: 700;
}

.oj-mhero__actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 36px;
}

/* «Решения для бизнеса →» and its twin under the examples (MainExamples) */
.oj-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  white-space: nowrap;
  text-decoration: none;
}

.oj-arrow-link__text {
  border-bottom: 2px solid var(--oj-cyan);
  padding-bottom: 2px;
}

.oj-arrow-link:hover .oj-arrow-link__text {
  border-bottom-color: var(--oj-navy);
}

.oj-arrow-link .oj-icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oj-mhero__badges {
  position: relative;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* every row as tall as the tallest one: in two columns a badge that wraps
     to two lines must not leave the other row shorter (owner, 07.11) */
  grid-auto-rows: 1fr;
  gap: 16px;
}

.oj-mhero__badge {
  box-sizing: border-box;
  padding: 24px 26px;
  border-radius: 28px;
  background: var(--oj-surface);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-mhero__check {
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
}

.oj-mhero__check circle {
  fill: var(--oj-cyan);
}

.oj-mhero__check path {
  fill: none;
  stroke: var(--oj-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1439px) {
  .oj-mhero__h1 {
    margin-top: 44px;
    max-width: 540px;
  }

  .oj-mhero__actions {
    margin-top: 32px;
    gap: 32px;
  }
}

@media (max-width: 1279px) {
  .oj-mhero__badges {
    gap: 12px;
  }

  .oj-mhero__badge {
    padding: 20px 22px;
    border-radius: 24px;
    gap: 14px;
    font-size: 20px;
  }
}

@media (max-width: 1023px) {
  /* 72px on top, not the artboard's 40: the pill needs the gap it has on
     /business (owner's call, 10.11) */
  .oj-mhero {
    padding: 72px 0 80px;
  }

  .oj-mhero .oj-hero__badge {
    left: 40px;
  }

  .oj-mhero__inner {
    padding: 0 40px;
  }

  /* B2C-Home3-768: the phone's rows, above the slogan, 80px tiles */
  .oj-mhero .oj-hero-tiles--tablet {
    display: none;
  }

  .oj-mhero .oj-hero-tiles--mobile {
    --oj-mtile: 80px;
    --oj-mtile-gap: 12px;
    position: relative;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: var(--oj-mtile-gap);
    overflow: hidden;
  }

  /* only whole tiles, as on `/business`'s phone (HomeHero.css) */
  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tiles__row {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px var(--oj-mtile-gap);
    box-sizing: content-box;
    height: var(--oj-mtile);
    min-height: 0;
    margin: -17px 0;
    padding: 17px 0;
    overflow: hidden;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile {
    width: var(--oj-mtile);
    height: var(--oj-mtile);
    border-radius: 23px;
    gap: 4px;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile.is-rhombus {
    border-radius: 22%;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile__lines {
    width: 48px;
    gap: 6px;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile__line {
    height: 5px;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile__bar {
    width: 4px;
    height: calc(var(--oj-bar-h) * 0.77);
  }

  .oj-mhero__tagline {
    font-size: 72px;
  }

  .oj-mhero__h1 {
    margin-top: 32px;
    max-width: 580px;
    font-size: 21px;
  }

  /* three across leave 221px each at 768, the text in five lines: a column
     here as on a phone */
  .oj-mhero__badges {
    margin-top: 56px;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

@media (max-width: 767px) {
  .oj-mhero {
    padding: 24px 0 56px;
  }

  .oj-mhero__inner {
    padding: 0 20px;
  }

  .oj-mhero .oj-hero-tiles--mobile {
    --oj-mtile: 62px;
    --oj-mtile-gap: 10px;
    margin-bottom: 28px;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tiles__row {
    margin: -13px 0;
    padding: 13px 0;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile {
    border-radius: 18px;
    gap: 3px;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile__lines {
    width: 38px;
    gap: 5px;
  }

  .oj-mhero .oj-hero-tiles--mobile .oj-hero-tile__bar {
    width: 3px;
    height: calc(var(--oj-bar-h) * 0.58);
  }

  .oj-mhero__tagline {
    font-size: 41px;
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .oj-mhero__h1 {
    margin-top: 20px;
    font-size: 19px;
  }

  .oj-mhero__actions {
    margin-top: 28px;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .oj-mhero__cta {
    padding: 0 24px;
  }

  .oj-mhero__actions .oj-arrow-link {
    align-self: center;
    font-size: 17px;
  }

  .oj-mhero__badges {
    margin-top: 40px;
    grid-template-columns: minmax(0, 1fr);
    /* one column: each badge keeps its own height */
    grid-auto-rows: auto;
    gap: 8px;
  }

  .oj-mhero__badge {
    padding: 16px 18px;
    border-radius: 18px;
    gap: 12px;
    font-size: 17px;
  }

  .oj-mhero__check {
    width: 24px;
    height: 24px;
  }
}


/* src/components/main/MainMemory.css */
/* B2C-Home3 block 2: a white band, the three parts in one size — grey,
   grey, navy. Both wrap by the window, only between phrases: the heading's
   `<nb>` phrases never split (`.oj-nowrap`), the grey `<unit>`s hold from
   600px up and wrap freely on a phone, where one is wider than the screen. */
.oj-mmemory {
  background: var(--oj-surface);
  padding: 120px 0;
}

.oj-mmemory__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

.oj-mmemory__line,
.oj-mmemory__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

.oj-mmemory__line {
  color: var(--oj-slate-500);
}

.oj-mmemory__title {
  color: var(--oj-navy);
}

.oj-mmemory__underline {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--oj-cyan);
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
}

.oj-mmemory__unit {
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .oj-mmemory {
    padding: 96px 0;
  }

  .oj-mmemory__line,
  .oj-mmemory__title {
    font-size: 44px;
    letter-spacing: -0.04em;
  }
}

@media (max-width: 1023px) {
  .oj-mmemory {
    padding: 80px 0;
  }

  .oj-mmemory__inner {
    padding: 0 40px;
  }

  .oj-mmemory__line,
  .oj-mmemory__title {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -0.045em;
  }

  .oj-mmemory__title {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .oj-mmemory {
    padding: 72px 0;
  }

  .oj-mmemory__inner {
    padding: 0 20px;
  }

  .oj-mmemory__line,
  .oj-mmemory__title {
    font-size: 28px;
  }

  .oj-mmemory__title {
    margin-top: 16px;
  }

  .oj-mmemory__underline {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
}

@media (max-width: 599px) {
  .oj-mmemory__unit {
    white-space: normal;
  }
}

/* Below 360 «и не попросит повторять», a phrase that never splits, is wider
   than the screen at 28px: the block shrinks with the screen there (7.8vw is
   28px at 359), the three parts still one size. */
@media (max-width: 359px) {
  .oj-mmemory__line,
  .oj-mmemory__title {
    font-size: 7.8vw;
  }
}


/* src/components/main/MainSafety.css */
/* B2C-Home3 block 6: four grey cards on a white band. */
.oj-msafety {
  background: var(--oj-surface);
  padding: 120px 0;
}

.oj-msafety__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

.oj-msafety__title {
  margin: 0;
  max-width: 1000px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-msafety__cards {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.oj-msafety__card {
  box-sizing: border-box;
  padding: 28px;
  border-radius: 28px;
  background: var(--oj-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oj-msafety__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--oj-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oj-blue);
}

.oj-msafety__icon .oj-icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oj-msafety__cardTitle {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--oj-navy);
}

.oj-msafety__cardText {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--oj-text-2);
}

@media (max-width: 1279px) {
  .oj-msafety {
    padding: 96px 0;
  }

  .oj-msafety__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .oj-msafety__card {
    padding: 24px;
    border-radius: 24px;
  }

  .oj-msafety__cardTitle {
    font-size: 22px;
    line-height: 1.2;
  }

  .oj-msafety__cardText {
    font-size: 17px;
    line-height: 1.5;
  }
}

@media (max-width: 1023px) {
  .oj-msafety {
    padding: 80px 0;
  }

  .oj-msafety__inner {
    padding: 0 40px;
  }

  .oj-msafety__title {
    font-size: 48px;
    line-height: 1.04;
  }

  .oj-msafety__cards {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .oj-msafety {
    padding: 72px 0;
  }

  .oj-msafety__inner {
    padding: 0 20px;
  }

  .oj-msafety__title {
    font-size: 34px;
  }

  .oj-msafety__cards {
    margin-top: 28px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* Compact cards (November mobile edits, 09.11): the icon on the left
     across both rows, the title and the text beside it. */
  .oj-msafety__card {
    padding: 16px 16px 18px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
  }

  .oj-msafety__icon {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    border-radius: 12px;
  }

  .oj-msafety__icon .oj-icon {
    width: 22px;
    height: 22px;
  }

  /* 9px down: the title's first line sits level with the icon's centre */
  .oj-msafety__cardTitle {
    padding-top: 9px;
    font-size: 19px;
    line-height: 1.2;
  }

  .oj-msafety__cardText {
    font-size: 16px;
    line-height: 1.5;
  }
}


/* src/components/main/MainScheme.css */
/* B2C-Home3 block 4. From 1024: messages | curves | hub | curves | services
   (1440: 1fr 150 auto 150 380; 1024: 1fr 80 auto 80 300). 768: one row per
   message — message | line, small hub, line | service. 390: the message on
   a line of its own, then small hub, line, service. */
.oj-mscheme {
  background: var(--oj-surface);
  padding: 120px 0;
}

.oj-mscheme__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
}

.oj-mscheme__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-mscheme__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto 150px 380px;
  align-items: center;
}

.oj-mscheme__prompts,
.oj-mscheme__services {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.oj-mscheme__prompts {
  gap: 38px;
}

.oj-mscheme__prompt {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.oj-mscheme__bubble {
  align-self: flex-end;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--oj-navy);
  color: #fff;
  font-size: 17px;
  line-height: 1.4;
}

.oj-mscheme__curves {
  display: block;
  width: 150px;
  height: 300px;
  overflow: visible;
}

.oj-mscheme__hub {
  box-sizing: border-box;
  width: 128px;
  height: 128px;
  border-radius: 28%;
  background: var(--oj-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.oj-mscheme__hub .oj-logo-mark {
  width: 55%;
  height: 55%;
}

.oj-mscheme__mini {
  display: none;
}

.oj-mscheme__services {
  gap: 50px;
}

.oj-mscheme__service {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.oj-mscheme__serviceIcon {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.oj-mscheme__service--files .oj-mscheme__serviceIcon {
  background: var(--oj-blue);
}

.oj-mscheme__service--calendar .oj-mscheme__serviceIcon {
  background: var(--oj-cyan);
  color: var(--oj-ink);
}

.oj-mscheme__service--mail .oj-mscheme__serviceIcon {
  background: var(--oj-navy);
}

.oj-mscheme__serviceIcon .oj-icon {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oj-mscheme__serviceText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.oj-mscheme__serviceTitle {
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-mscheme__serviceList {
  font-size: 15px;
  color: var(--oj-muted);
}

.oj-mscheme__serviceLine {
  display: block;
}

/* The lines: drawn in once the block is in view (`client/reveal.ts`), then
   dashes run along them. */
.oj-mscheme__line,
.oj-mscheme__run {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.oj-mscheme__line {
  stroke: var(--oj-cyan);
  stroke-width: 1.5;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.oj-mscheme.is-in-view .oj-mscheme__line,
.oj-mscheme:not([data-reveal]) .oj-mscheme__line {
  stroke-dashoffset: 0;
}

.oj-mscheme.is-in-view .oj-mscheme__line {
  animation: oj-mscheme-draw 1.4s ease-out backwards;
}

.oj-mscheme__run {
  stroke: var(--oj-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 210;
  visibility: hidden;
}

.oj-mscheme.is-in-view .oj-mscheme__run {
  visibility: visible;
  animation: oj-mscheme-run 3s linear infinite;
}

.oj-mscheme.is-in-view .oj-mscheme__run--back {
  animation-direction: reverse;
}

.oj-mscheme__run--short {
  stroke-dasharray: 6 58;
}

.oj-mscheme.is-in-view .oj-mscheme__run--short {
  animation-name: oj-mscheme-run-short;
  animation-duration: 2.2s;
}

@keyframes oj-mscheme-draw {
  from {
    stroke-dashoffset: 900;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes oj-mscheme-run {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -220;
  }
}

@keyframes oj-mscheme-run-short {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -64;
  }
}

@media (max-width: 1279px) {
  .oj-mscheme {
    padding: 96px 0;
  }

  .oj-mscheme__grid {
    margin-top: 48px;
    grid-template-columns: minmax(0, 1fr) 80px auto 80px 300px;
  }

  .oj-mscheme__curves {
    width: 80px;
  }

  .oj-mscheme__bubble {
    font-size: 16px;
  }

  .oj-mscheme__hub {
    width: 104px;
    height: 104px;
    border-radius: 30px;
  }

  .oj-mscheme__serviceIcon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .oj-mscheme__serviceIcon .oj-icon {
    width: 24px;
    height: 24px;
  }

  .oj-mscheme__serviceTitle {
    font-size: 22px;
  }

  .oj-mscheme__serviceList {
    font-size: 14px;
  }
}

/* B2C-Home3-768: a row per message */
@media (max-width: 1023px) {
  .oj-mscheme {
    padding: 80px 0;
  }

  .oj-mscheme__inner {
    padding: 0 40px;
  }

  .oj-mscheme__title {
    font-size: 48px;
    line-height: 1.04;
  }

  .oj-mscheme__grid {
    margin-top: 40px;
    padding-top: 12px;
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    row-gap: 24px;
  }

  .oj-mscheme__prompts,
  .oj-mscheme__services {
    display: contents;
  }

  .oj-mscheme__curves,
  .oj-mscheme__grid > .oj-mscheme__hub {
    display: none;
  }

  .oj-mscheme__prompt {
    grid-column: 1;
    min-height: 0;
  }

  .oj-mscheme__mini {
    grid-column: 2;
    display: flex;
    align-items: center;
  }

  .oj-mscheme__service {
    grid-column: 3;
    gap: 12px;
  }

  .oj-mscheme__row1 {
    grid-row: 1;
  }

  .oj-mscheme__row2 {
    grid-row: 2;
  }

  .oj-mscheme__row3 {
    grid-row: 3;
  }

  .oj-mscheme__link {
    display: block;
    flex: none;
    width: 48px;
    height: 4px;
    overflow: visible;
  }

  .oj-mscheme__hub--small {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .oj-mscheme__serviceIcon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .oj-mscheme__serviceIcon .oj-icon {
    width: 22px;
    height: 22px;
  }

  .oj-mscheme__serviceTitle {
    font-size: 20px;
  }

  .oj-mscheme__serviceList {
    font-size: 13px;
    white-space: nowrap;
  }
}

/* B2C-Home3-Mobile: the message above its row */
@media (max-width: 767px) {
  .oj-mscheme {
    padding: 72px 0;
  }

  .oj-mscheme__inner {
    padding: 0 20px;
  }

  .oj-mscheme__title {
    font-size: 34px;
  }

  .oj-mscheme__grid {
    margin-top: 28px;
    padding-top: 8px;
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: 10px;
  }

  .oj-mscheme__prompt {
    grid-column: 1 / -1;
  }

  .oj-mscheme__bubble {
    max-width: 92%;
    font-size: 15px;
  }

  .oj-mscheme__mini {
    grid-column: 1;
  }

  .oj-mscheme__service {
    grid-column: 2;
    gap: 10px;
  }

  .oj-mscheme__prompt.oj-mscheme__row1 {
    grid-row: 1;
  }

  .oj-mscheme__row1:not(.oj-mscheme__prompt) {
    grid-row: 2;
  }

  .oj-mscheme__prompt.oj-mscheme__row2 {
    grid-row: 3;
    margin-top: 18px;
  }

  .oj-mscheme__row2:not(.oj-mscheme__prompt) {
    grid-row: 4;
  }

  .oj-mscheme__prompt.oj-mscheme__row3 {
    grid-row: 5;
    margin-top: 18px;
  }

  .oj-mscheme__row3:not(.oj-mscheme__prompt) {
    grid-row: 6;
  }

  .oj-mscheme__link--in {
    display: none;
  }

  .oj-mscheme__link {
    width: 44px;
  }

  .oj-mscheme__hub--small {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .oj-mscheme__serviceIcon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .oj-mscheme__serviceIcon .oj-icon {
    width: 18px;
    height: 18px;
  }

  .oj-mscheme__serviceTitle {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oj-mscheme .oj-mscheme__line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .oj-mscheme .oj-mscheme__run {
    visibility: hidden;
    animation: none;
  }
}

/* The plans line under the scheme (November edits §1): styled like the
   examples' «А ещё — рабочие задачи» line, but inline — the text wraps and
   «Сравнить тарифы →» follows its last word, whole (`.oj-arrow-link` does
   not wrap). 56 / 56 / 40 / 28 px below the scheme. */
.oj-mscheme__plans {
  margin: 56px 0 0;
  font-family: var(--oj-font-display);
  font-size: 18px;
  line-height: 1.6;
}

.oj-mscheme__plansText {
  font-weight: 600;
  color: var(--oj-text-2);
}

.oj-mscheme__plans .oj-arrow-link {
  min-height: 0;
  margin-left: 8px;
  vertical-align: baseline;
}

@media (max-width: 1023px) {
  .oj-mscheme__plans {
    margin-top: 40px;
  }
}

/* B2C-Home3-Mobile: the text on its own line above the link */
@media (max-width: 767px) {
  .oj-mscheme__plans {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
    font-size: 17px;
    line-height: 1.45;
  }

  .oj-mscheme__plans .oj-arrow-link {
    min-height: 44px;
    margin-left: 0;
    font-size: 17px;
  }
}


/* src/components/main/MainSeoText.css */
/* B2C-Home3 text above the footer, on the page background. Collapsed: the
   first paragraph, two lines; expanded: all three. */
.oj-mseo {
  padding: 64px 0 56px;
}

.oj-mseo__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oj-mseo__title {
  margin: 0 0 8px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--oj-text-2);
}

.oj-mseo__body p {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--oj-muted);
}

.oj-mseo__body p:first-child {
  margin-top: 0;
}

.oj-mseo__body:not([data-expanded="true"]) p:first-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.oj-mseo__body:not([data-expanded="true"]) p:not(:first-child) {
  display: none;
}

.oj-mseo__toggle {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--oj-font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--oj-blue);
}

@media (max-width: 1023px) {
  .oj-mseo {
    padding: 56px 0 48px;
  }

  .oj-mseo__inner {
    padding: 0 40px;
  }
}

@media (max-width: 767px) {
  .oj-mseo {
    padding: 40px 0;
  }

  .oj-mseo__inner {
    padding: 0 20px;
  }

  .oj-mseo__title {
    font-size: 19px;
  }

  .oj-mseo__body p {
    font-size: 15px;
  }
}


/* src/components/main/MainTrial.css */
/* B2C-Home3 yellow block: amber band with faint rounded tiles fading in on
   the right (a repeating SVG behind a gradient, as in the artboard). */
.oj-mtrial {
  padding: 96px 0;
  background-color: var(--oj-amber);
  background-image:
    linear-gradient(90deg, var(--oj-amber) 42%, rgba(240, 180, 65, 0) 78%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Crect width='112' height='112' rx='32' fill='rgba(15,18,51,0.05)'/%3E%3C/svg%3E");
  background-size:
    auto,
    130px 130px;
  background-position:
    0 0,
    right -10px top 22px;
}

.oj-mtrial__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--oj-page-pad-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

.oj-mtrial__text {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.oj-mtrial__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-ink);
}

.oj-mtrial__lede {
  margin: 0;
  max-width: 640px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--oj-ink);
}

.oj-mtrial__cta {
  margin-top: 12px;
  background: var(--oj-ink);
  color: #fff;
}

.oj-mtrial__cta:hover {
  background: var(--oj-navy);
  color: #fff;
}

.oj-mtrial__days {
  margin: 0;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  color: var(--oj-ink);
}

.oj-mtrial__number {
  font-size: 300px;
  line-height: 0.8;
  letter-spacing: -0.07em;
}

.oj-mtrial__daysLabel {
  font-size: 34px;
  letter-spacing: -0.03em;
}

@media (max-width: 1279px) {
  .oj-mtrial__inner {
    gap: 40px;
  }

  .oj-mtrial__title {
    font-size: 64px;
  }

  .oj-mtrial__lede {
    font-size: 20px;
  }

  .oj-mtrial__number {
    font-size: 200px;
  }

  .oj-mtrial__daysLabel {
    font-size: 28px;
  }
}

/* B2C-Home3-768: «10 дней бесплатно» above the heading */
@media (max-width: 1023px) {
  .oj-mtrial {
    padding: 80px 0;
    background-image:
      linear-gradient(90deg, var(--oj-amber) 55%, rgba(240, 180, 65, 0) 100%),
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Crect width='112' height='112' rx='32' fill='rgba(15,18,51,0.05)'/%3E%3C/svg%3E");
    background-position:
      0 0,
      right -40px top 22px;
  }

  .oj-mtrial__inner {
    padding: 0 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .oj-mtrial__days {
    order: -1;
    gap: 12px;
  }

  .oj-mtrial__title {
    font-size: 56px;
    line-height: 1.04;
  }

  .oj-mtrial__number {
    font-size: 180px;
  }
}

@media (max-width: 767px) {
  .oj-mtrial {
    padding: 56px 0;
  }

  .oj-mtrial__inner {
    padding: 0 20px;
  }

  .oj-mtrial__text {
    align-self: stretch;
    align-items: stretch;
    gap: 18px;
  }

  .oj-mtrial__title {
    font-size: 36px;
  }

  .oj-mtrial__lede {
    font-size: 18px;
  }

  .oj-mtrial__cta {
    margin-top: 6px;
    padding: 0 24px;
  }

  .oj-mtrial__number {
    font-size: 128px;
  }

  .oj-mtrial__daysLabel {
    font-size: 22px;
  }
}


/* the page's own style attributes, moved here by scripts/build/inlineStyles.mjs */

.oj-s-027eb14c89.oj-s-027eb14c89.oj-s-027eb14c89{animation-delay:1s}
.oj-s-0decdc15ee.oj-s-0decdc15ee.oj-s-0decdc15ee{--oj-bar-h:44px}
.oj-s-0e72498a4c.oj-s-0e72498a4c.oj-s-0e72498a4c{animation-delay:0.12s}
.oj-s-19b88f8208.oj-s-19b88f8208.oj-s-19b88f8208{--oj-bar-h:29px}
.oj-s-257d839abc.oj-s-257d839abc.oj-s-257d839abc{animation-delay:1.3s}
.oj-s-26f7511012.oj-s-26f7511012.oj-s-26f7511012{--oj-bar-h:50px}
.oj-s-3d612c25b0.oj-s-3d612c25b0.oj-s-3d612c25b0{animation-delay:0s}
.oj-s-3da2188717.oj-s-3da2188717.oj-s-3da2188717{--oj-bar-h:15px}
.oj-s-3f3ae82b3d.oj-s-3f3ae82b3d.oj-s-3f3ae82b3d{animation-delay:1.1s}
.oj-s-45c6a68007.oj-s-45c6a68007.oj-s-45c6a68007{animation-delay:1.7000000000000002s}
.oj-s-49a49dc7e8.oj-s-49a49dc7e8.oj-s-49a49dc7e8{animation-delay:0.5s}
.oj-s-4eb5a10ef0.oj-s-4eb5a10ef0.oj-s-4eb5a10ef0{--oj-bar-h:23px}
.oj-s-6631d6c2e0.oj-s-6631d6c2e0.oj-s-6631d6c2e0{animation-delay:2.1s}
.oj-s-6ac60ebc6b.oj-s-6ac60ebc6b.oj-s-6ac60ebc6b{animation-duration:2.6s;animation-delay:0s}
.oj-s-6bd7c3d06f.oj-s-6bd7c3d06f.oj-s-6bd7c3d06f{animation-delay:1.5s}
.oj-s-735b322f9d.oj-s-735b322f9d.oj-s-735b322f9d{animation-duration:3.2s;animation-delay:1s}
.oj-s-7df6d2cd72.oj-s-7df6d2cd72.oj-s-7df6d2cd72{--oj-bar-h:33px}
.oj-s-817efae0d0.oj-s-817efae0d0.oj-s-817efae0d0{animation-delay:0.24s}
.oj-s-9686ab565b.oj-s-9686ab565b.oj-s-9686ab565b{animation-delay:0.2s}
.oj-s-a612390a84.oj-s-a612390a84.oj-s-a612390a84{animation-duration:3s;animation-delay:1.2s}
.oj-s-a7db3ce89b.oj-s-a7db3ce89b.oj-s-a7db3ce89b{--oj-bar-h:17px}
.oj-s-a8d9481c57.oj-s-a8d9481c57.oj-s-a8d9481c57{animation-delay:0.8s}
.oj-s-afc694c3a6.oj-s-afc694c3a6.oj-s-afc694c3a6{animation-delay:0.6000000000000001s}
.oj-s-be318404b9.oj-s-be318404b9.oj-s-be318404b9{animation-delay:1.9000000000000001s}
.oj-s-cc7a024f58.oj-s-cc7a024f58.oj-s-cc7a024f58{animation-duration:2.9s;animation-delay:0.5s}
.oj-s-df69981804.oj-s-df69981804.oj-s-df69981804{animation-delay:0.4s}
.oj-s-e5c331834d.oj-s-e5c331834d.oj-s-e5c331834d{animation-duration:3.3s;animation-delay:1.7s}
.oj-s-e6a050db5b.oj-s-e6a050db5b.oj-s-e6a050db5b{animation-delay:0.74s}
.oj-s-fb4704e5a4.oj-s-fb4704e5a4.oj-s-fb4704e5a4{animation-duration:3.6s;animation-delay:2.2s}
.oj-s-fe8108c465.oj-s-fe8108c465.oj-s-fe8108c465{animation-delay:0.62s}