/* Вставить в Journal 3 → Styles → Custom CSS.
   Если секция выводится с боковыми отступами Journal, назначьте HTML-модулю
   класс module-oc-help-hero и в настройках модуля включите Full Width. */
.oc-help-hero {
  --oc-ink: #111820;
  --oc-paper: #f7f7f5;
  --oc-red: #e6322d;
  --oc-red-deep: #b91620;
  --oc-line: rgba(255,255,255,.13);
  position: relative;
  isolation: isolate;
  min-height: min(760px, 100svh);
  overflow: hidden;
  color: var(--oc-paper);
  background: linear-gradient(112deg, #10171e 0%, #151d25 56%, #0d1319 100%);
  font-family: Manrope, Arial, sans-serif;
}
.oc-help-hero *, .oc-help-hero *::before, .oc-help-hero *::after { box-sizing: border-box; }
.oc-help-hero a { color: inherit; text-decoration: none; }
.oc-help-hero__grid { position: absolute; z-index: -2; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #000 0%, transparent 76%); }
.oc-help-hero__glow { position: absolute; z-index: -1; top: -25rem; right: -11rem; width: 58rem; height: 58rem; border-radius: 50%; background: radial-gradient(circle, rgba(230,50,45,.24), rgba(230,50,45,.04) 42%, transparent 68%); }
.oc-help-hero__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(90px, 16vh, 170px) 0 132px; }
.oc-help-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #b7c0c5; font-family: "PT Mono", monospace; font-size: 11px; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
.oc-help-hero__eyebrow span { width: 25px; height: 1px; background: var(--oc-red); }
.oc-help-hero__title { max-width: 760px; margin: 0; color: var(--oc-paper); font-size: clamp(44px, 5.6vw, 76px); font-weight: 800; line-height: .99; letter-spacing: -.065em; }
.oc-help-hero__title em { position: relative; color: var(--oc-red); font-style: normal; }.oc-help-hero__title em::after { content: ""; position: absolute; right: 0; bottom: -.15em; left: .04em; height: 3px; background: currentColor; transform: rotate(-1.8deg); }
.oc-help-hero__lead { width: min(540px, 100%); margin: 28px 0 35px; color: #acb6bd; font-size: 16px; line-height: 1.7; }
.oc-help-hero__routes { display: flex; flex-wrap: wrap; gap: 13px; max-width: 770px; }
.oc-help-route { display: flex; align-items: center; width: min(100%, 370px); min-height: 88px; padding: 13px 17px; border: 1px solid var(--oc-line); border-radius: 4px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }.oc-help-route:hover { transform: translateY(-3px); }
.oc-help-route--primary { border-color: var(--oc-red); background: var(--oc-red); box-shadow: 0 12px 30px rgba(177,22,32,.25); }.oc-help-route--primary:hover { border-color: var(--oc-red-deep); background: var(--oc-red-deep); }.oc-help-route--secondary { background: rgba(255,255,255,.025); }.oc-help-route--secondary:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.07); }
.oc-help-route__icon { display: grid; flex: 0 0 auto; width: 46px; height: 46px; margin-right: 13px; place-items: center; border-radius: 50%; background: rgba(0,0,0,.17); }.oc-help-route--secondary .oc-help-route__icon { background: rgba(255,255,255,.09); }.oc-help-route__icon svg { width: 22px; height: 22px; }
.oc-help-route__body { display: grid; gap: 5px; }.oc-help-route__body strong { font-size: 14px; line-height: 1; }.oc-help-route__body small { color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.2; }.oc-help-route__arrow { margin-left: auto; color: rgba(255,255,255,.8); font-size: 23px; font-weight: 400; }
.oc-help-hero__proof { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 32px; color: #8e9aa2; font-size: 10px; }.oc-help-hero__proof span { display: flex; align-items: center; gap: 5px; }.oc-help-hero__proof span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--oc-red); }.oc-help-hero__proof b { color: #c3cbd0; font-weight: 700; }
.oc-help-code-card { position: absolute; right: max(4vw, calc((100vw - 1180px) / 2)); bottom: clamp(65px, 12vh, 135px); width: 310px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(8,13,18,.61); box-shadow: -30px 35px 80px rgba(0,0,0,.35); backdrop-filter: blur(14px); transform: rotate(-2.4deg); }.oc-help-code-card__top { display: flex; align-items: center; gap: 5px; height: 35px; padding: 0 13px; border-bottom: 1px solid var(--oc-line); color: #697780; font: 9px "PT Mono", monospace; }.oc-help-code-card__top span { width: 6px; height: 6px; border-radius: 50%; background: #d85550; }.oc-help-code-card__top span:nth-child(2) { background: #d9aa51; }.oc-help-code-card__top span:nth-child(3) { background: #59b77b; }.oc-help-code-card__top b { margin-left: 6px; font-weight: 400; }.oc-help-code-card pre { margin: 0; padding: 24px 25px 17px; color: #cbd6dc; font: 12px/1.9 "PT Mono", monospace; }.oc-help-code-card code i { color: #d35250; font-style: normal; }.oc-help-code-card code b { color: #8ec8ef; font-weight: 400; }.oc-help-code-card code mark { color: #e9866e; background: none; }.oc-help-code-card code u { color: #afce8e; text-decoration: none; }.oc-help-code-card code em { color: #d7bf79; font-style: normal; }.oc-help-code-card__check { display: flex; gap: 8px; align-items: center; padding: 10px 19px; border-top: 1px solid var(--oc-line); color: #8e9da5; font: 10px "PT Mono", monospace; }.oc-help-code-card__check span { color: #66c28b; font-size: 14px; }
@media (max-width: 1050px) { .oc-help-code-card { display: none; } }
@media (max-width: 680px) { .oc-help-hero { min-height: auto; }.oc-help-hero__inner { width: min(100% - 32px, 530px); padding-top: 88px; padding-bottom: 92px; }.oc-help-hero__title { font-size: clamp(39px, 11.7vw, 56px); line-height: 1.02; }.oc-help-hero__lead { margin: 24px 0 29px; font-size: 14px; }.oc-help-hero__routes { display: grid; }.oc-help-route { width: 100%; min-height: 80px; }.oc-help-hero__proof { display: grid; gap: 8px; margin-top: 25px; } }

/* Second screen: category navigation */
.oc-help-categories { --oc-cat-ink: #111820; --oc-cat-red: #e6322d; --oc-cat-line: #dfe3e5; color: var(--oc-cat-ink); background: #f7f7f5; font-family: Manrope, Arial, sans-serif; }
.oc-help-categories *, .oc-help-categories *::before, .oc-help-categories *::after { box-sizing: border-box; }.oc-help-categories a { color: inherit; text-decoration: none; }.oc-help-categories__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(70px, 9vw, 125px) 0; }.oc-help-categories__heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 5vw, 58px); }.oc-help-categories__eyebrow { margin: 0 0 11px; color: var(--oc-cat-red); font: 700 10px/1 "PT Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }.oc-help-categories h2 { margin: 0; color: var(--oc-cat-ink); font-size: clamp(36px, 4.2vw, 57px); font-weight: 800; line-height: 1; letter-spacing: -.06em; }.oc-help-categories__heading > p { width: min(310px, 100%); margin: 0 2px 3px 0; color: #66727a; font-size: 13px; line-height: 1.65; }
.oc-help-categories__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--oc-cat-line); border-left: 1px solid var(--oc-cat-line); }.oc-help-category { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 21px 21px 20px; border-right: 1px solid var(--oc-cat-line); border-bottom: 1px solid var(--oc-cat-line); background: #f7f7f5; transition: color .2s ease, background .2s ease; }.oc-help-category:hover { color: #fff; background: var(--oc-cat-ink); }.oc-help-category__number { color: #a1aaaf; font: 10px/1 "PT Mono", monospace; transition: color .2s ease; }.oc-help-category:hover .oc-help-category__number { color: rgba(255,255,255,.48); }.oc-help-category__icon { display: grid; width: 39px; height: 39px; margin-top: auto; margin-bottom: 15px; place-items: center; color: var(--oc-cat-red); border: 1px solid currentColor; border-radius: 50%; transition: color .2s ease, background .2s ease; }.oc-help-category:hover .oc-help-category__icon { color: #fff; background: var(--oc-cat-red); border-color: var(--oc-cat-red); }.oc-help-category__icon svg { width: 20px; height: 20px; }.oc-help-category__text { display: grid; gap: 7px; max-width: calc(100% - 20px); }.oc-help-category__text strong { font-size: 14px; line-height: 1.22; }.oc-help-category__text small { color: #77828a; font-size: 10px; line-height: 1.4; transition: color .2s ease; }.oc-help-category:hover .oc-help-category__text small { color: rgba(255,255,255,.63); }.oc-help-category__arrow { position: absolute; right: 20px; bottom: 20px; color: #a6afb4; font-size: 19px; transition: color .2s ease, transform .2s ease; }.oc-help-category:hover .oc-help-category__arrow { color: #fff; transform: translate(2px,-2px); }.oc-help-categories__all { display: inline-flex; align-items: center; gap: 11px; margin-top: 30px; padding-bottom: 4px; border-bottom: 1px solid var(--oc-cat-red); color: var(--oc-cat-ink); font-size: 12px; font-weight: 800; }.oc-help-categories__all span { color: var(--oc-cat-red); font-size: 17px; transition: transform .2s ease; }.oc-help-categories__all:hover span { transform: translateX(4px); }
@media (max-width: 900px) { .oc-help-categories__grid { grid-template-columns: repeat(2, 1fr); }.oc-help-category { min-height: 190px; } }
@media (max-width: 680px) { .oc-help-categories__inner { width: min(100% - 32px, 530px); padding: 67px 0 75px; }.oc-help-categories__heading { display: block; margin-bottom: 32px; }.oc-help-categories__heading > p { margin-top: 18px; font-size: 12px; }.oc-help-categories__grid { grid-template-columns: 1fr; }.oc-help-category { min-height: 151px; padding: 18px; }.oc-help-category__icon { position: absolute; top: 18px; right: 18px; width: 35px; height: 35px; margin: 0; }.oc-help-category__text { margin-top: auto; }.oc-help-category__arrow { right: 18px; bottom: 18px; }.oc-help-categories__all { margin-top: 24px; } }
.oc-help-category__promise { display: block; margin-top: 21px; color: #77828a; font-size: 10px; font-weight: 600; line-height: 1.5; transition: color .2s ease; }.oc-help-category:hover .oc-help-category__promise { color: rgba(255,255,255,.72); }
@media (max-width: 680px) { .oc-help-category__promise { display: none; } }

/* Third screen: API and integrations */
.oc-help-integrations { --oc-int-ink: #111820; --oc-int-paper: #f7f7f5; --oc-int-muted: #9da7af; --oc-int-red: #e6322d; position: relative; isolation: isolate; overflow: hidden; color: var(--oc-int-paper); background: linear-gradient(112deg, #10171e 0%, #151d25 58%, #0d1319 100%); font-family: Manrope, Arial, sans-serif; }
.oc-help-integrations *, .oc-help-integrations *::before, .oc-help-integrations *::after { box-sizing: border-box; }.oc-help-integrations__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr); align-items: center; gap: clamp(35px, 6vw, 90px); width: min(1180px, calc(100% - 48px)); min-height: 670px; margin: 0 auto; padding: 88px 0; }.oc-help-integrations__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; color: #b7c0c5; font: 11px/1.3 "PT Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.oc-help-integrations__eyebrow span { width: 25px; height: 1px; background: var(--oc-int-red); }.oc-help-integrations h2 { margin: 0; color: var(--oc-int-paper); font-size: clamp(36px, 4.1vw, 57px); font-weight: 800; line-height: 1.04; letter-spacing: -.06em; }.oc-help-integrations h2 em { color: var(--oc-int-red); font-style: normal; }.oc-help-integrations__lead { max-width: 530px; margin: 25px 0 0; color: #bec6cb; font-size: 15px; line-height: 1.75; }.oc-help-integrations__result { display: flex; gap: 12px; max-width: 500px; margin: 18px 0 0; color: #929fa7; font-size: 12px; line-height: 1.7; }.oc-help-integrations__result > span { flex: 0 0 auto; color: var(--oc-int-red); font-size: 19px; line-height: 1.1; }.oc-help-integrations__cta { display: inline-flex; align-items: center; gap: 25px; margin-top: 29px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: 12px; font-weight: 800; transition: background .2s ease, border-color .2s ease; }.oc-help-integrations__cta span { color: var(--oc-int-red); font-size: 18px; transition: transform .2s ease; }.oc-help-integrations__cta:hover { border-color: var(--oc-int-red); background: var(--oc-int-red); }.oc-help-integrations__cta:hover span { color: #fff; transform: translateX(3px); }
.oc-help-hero a:link, .oc-help-hero a:visited, .oc-help-categories a:link, .oc-help-categories a:visited { color: inherit; }
.oc-help-integrations a.oc-help-integrations__cta:link, .oc-help-integrations a.oc-help-integrations__cta:visited { color: #fff; }
.oc-help-integrations a.oc-help-integrations__cta:visited span { color: var(--oc-int-red); }
.oc-help-integrations a.oc-help-integrations__cta:hover, .oc-help-integrations a.oc-help-integrations__cta:focus-visible { color: #fff; }
.oc-help-integrations__visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; }.oc-help-integrations__orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; transform: translate(-50%,-50%); }.oc-help-integrations__orbit--outer { width: 82%; height: 82%; }.oc-help-integrations__orbit--inner { width: 58%; height: 58%; border-style: dashed; border-color: rgba(255,255,255,.12); }.oc-help-integrations__hub { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 154px; height: 154px; border: 1px solid rgba(230,50,45,.48); border-radius: 50%; background: radial-gradient(circle at 35% 25%, #26313a, #151d25 72%); box-shadow: 0 0 55px rgba(230,50,45,.14), inset 0 0 25px rgba(255,255,255,.035); transform: translate(-50%,-50%); }.oc-help-integrations__hub-icon { display: grid; width: 35px; height: 35px; margin-bottom: 8px; place-items: center; border-radius: 50%; background: var(--oc-int-red); color: #fff; font-size: 22px; }.oc-help-integrations__hub strong { font-size: 13px; }.oc-help-integrations__hub small { margin-top: 5px; color: #a4b0b7; font: 9px "PT Mono", monospace; }.oc-help-tech { position: absolute; z-index: 3; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; background: rgba(21,29,37,.92); box-shadow: 0 8px 20px rgba(0,0,0,.22); color: #d7dfe3; font: 10px "PT Mono", monospace; white-space: nowrap; }.oc-help-tech--1 { top: 10%; left: 35%; border-color: rgba(230,50,45,.65); color: #fff; }.oc-help-tech--2 { top: 20%; right: 8%; }.oc-help-tech--3 { top: 36%; right: 0; }.oc-help-tech--4 { top: 59%; right: 7%; }.oc-help-tech--5 { bottom: 12%; right: 25%; }.oc-help-tech--6 { bottom: 5%; left: 44%; }.oc-help-tech--7 { bottom: 15%; left: 15%; }.oc-help-tech--8 { top: 62%; left: 4%; }.oc-help-tech--9 { top: 38%; left: 0; }.oc-help-tech--10 { top: 18%; left: 11%; }.oc-help-tech--11 { top: 0; right: 30%; }.oc-help-tech--12 { bottom: 0; left: 30%; }.oc-help-tech--13 { bottom: 31%; right: 1%; }.oc-help-integrations__flow { position: absolute; z-index: 1; top: 50%; left: 50%; width: 77%; height: 77%; border: 1px solid transparent; border-top-color: rgba(230,50,45,.75); border-radius: 50%; transform: translate(-50%,-50%) rotate(25deg); mask-image: linear-gradient(90deg, transparent 0 18%, #000 40% 66%, transparent 88%); }.oc-help-integrations__flow--b { width: 64%; height: 64%; border-top-color: rgba(125,183,209,.65); transform: translate(-50%,-50%) rotate(205deg); }
@media (max-width: 980px) { .oc-help-integrations__inner { grid-template-columns: 1fr; gap: 45px; padding: 78px 0; }.oc-help-integrations__copy { max-width: 700px; }.oc-help-integrations__visual { width: min(100%, 500px); } }
@media (max-width: 680px) { .oc-help-integrations__inner { width: min(100% - 32px, 530px); gap: 30px; padding: 68px 0 58px; }.oc-help-integrations h2 { font-size: clamp(33px, 9vw, 46px); }.oc-help-integrations__lead { margin-top: 19px; font-size: 13px; }.oc-help-integrations__result { font-size: 11px; }.oc-help-integrations__visual { width: min(100%, 390px); }.oc-help-integrations__hub { width: 116px; height: 116px; }.oc-help-integrations__hub-icon { width: 29px; height: 29px; font-size: 18px; }.oc-help-integrations__hub strong { font-size: 11px; }.oc-help-integrations__hub small { font-size: 8px; }.oc-help-tech { min-height: 27px; padding: 0 8px; font-size: 8px; }.oc-help-tech--1 { top: 10%; left: 32%; }.oc-help-tech--2 { right: 6%; }.oc-help-tech--3 { right: -2%; }.oc-help-tech--4 { right: 4%; }.oc-help-tech--5 { right: 19%; }.oc-help-tech--6 { left: 42%; }.oc-help-tech--7 { left: 10%; }.oc-help-tech--8 { left: 0; }.oc-help-tech--9 { left: -4%; }.oc-help-tech--10 { left: 6%; }.oc-help-tech--11 { right: 25%; }.oc-help-tech--12 { left: 25%; }.oc-help-tech--13 { right: -4%; } }

/* Fourth screen: connected business systems */
.oc-help-systems { --oc-sys-ink: #111820; --oc-sys-paper: #f7f7f5; --oc-sys-red: #e6322d; --oc-sys-line: #dfe3e5; color: var(--oc-sys-ink); background: var(--oc-sys-paper); font-family: Manrope, Arial, sans-serif; }.oc-help-systems *, .oc-help-systems *::before, .oc-help-systems *::after { box-sizing: border-box; }.oc-help-systems a { color: inherit; text-decoration: none; }.oc-help-systems__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(70px, 8vw, 112px) 0; }.oc-help-systems__heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 42px; }.oc-help-systems__eyebrow { margin: 0 0 13px; color: var(--oc-sys-red); font: 700 10px/1 "PT Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }.oc-help-systems h2 { margin: 0; color: var(--oc-sys-ink); font-size: clamp(36px, 4.2vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; }.oc-help-systems__heading > p { width: min(370px, 100%); margin: 0 0 4px; color: #66727a; font-size: 14px; line-height: 1.7; }.oc-help-systems__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--oc-sys-line); border-left: 1px solid var(--oc-sys-line); }.oc-help-system { position: relative; min-height: 190px; padding: 19px 20px 21px; border-right: 1px solid var(--oc-sys-line); border-bottom: 1px solid var(--oc-sys-line); background: var(--oc-sys-paper); transition: color .2s ease, background .2s ease; }.oc-help-system:hover { color: #fff; background: var(--oc-sys-ink); }.oc-help-system__number { color: #9ba5ab; font: 9px/1 "PT Mono", monospace; letter-spacing: .035em; transition: color .2s ease; }.oc-help-system:hover .oc-help-system__number { color: rgba(255,255,255,.48); }.oc-help-system__symbol { position: absolute; top: 15px; right: 17px; color: var(--oc-sys-red); font-size: 23px; line-height: 1; }.oc-help-system h3 { margin: 48px 0 8px; color: var(--oc-sys-ink); font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; transition: color .2s ease; }.oc-help-system:hover h3 { color: #fff; }.oc-help-system p { max-width: 245px; margin: 0; color: #77828a; font-size: 12px; line-height: 1.55; transition: color .2s ease; }.oc-help-system:hover p { color: rgba(255,255,255,.68); }.oc-help-system--accent { background: #f0efed; }.oc-help-system--accent:hover { background: var(--oc-sys-red); }.oc-help-system--accent:hover .oc-help-system__symbol { color: #fff; }.oc-help-systems__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; }.oc-help-systems__footer > p { margin: 0; color: #66727a; font-size: 13px; line-height: 1.5; }.oc-help-systems__cta { display: inline-flex; align-items: center; gap: 25px; padding: 14px 18px; border: 1px solid var(--oc-sys-ink); color: var(--oc-sys-ink); font-size: 12px; font-weight: 800; transition: color .2s ease, background .2s ease, border-color .2s ease; }.oc-help-systems__cta span { color: var(--oc-sys-red); font-size: 18px; transition: color .2s ease, transform .2s ease; }.oc-help-systems__cta:hover { border-color: var(--oc-sys-red); background: var(--oc-sys-red); color: #fff; }.oc-help-systems__cta:hover span { color: #fff; transform: translateX(3px); }.oc-help-systems a.oc-help-systems__cta:link, .oc-help-systems a.oc-help-systems__cta:visited { color: var(--oc-sys-ink); }.oc-help-systems a.oc-help-systems__cta:hover, .oc-help-systems a.oc-help-systems__cta:focus-visible { color: #fff; }
@media (max-width: 900px) { .oc-help-systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.oc-help-system { min-height: 175px; } }
@media (max-width: 680px) { .oc-help-systems__inner { width: min(100% - 32px, 530px); padding: 66px 0 72px; }.oc-help-systems__heading { display: block; margin-bottom: 30px; }.oc-help-systems h2 { font-size: clamp(34px, 9vw, 46px); }.oc-help-systems__heading > p { margin-top: 18px; font-size: 12px; }.oc-help-systems__grid { grid-template-columns: 1fr; }.oc-help-system { min-height: 142px; padding: 17px; }.oc-help-system h3 { margin-top: 32px; font-size: 16px; }.oc-help-system p { font-size: 12px; }.oc-help-systems__footer { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 23px; }.oc-help-systems__footer > p { font-size: 12px; } }

/* Fourth screen: integration areas as a directory, with one real CTA */
.oc-help-systems__heading { align-items: end; margin-bottom: 52px; }.oc-help-systems__title-wrap { flex: 1 1 auto; }.oc-help-systems__eyebrow { display: flex; align-items: center; gap: 13px; }.oc-help-systems__eyebrow span { padding-left: 13px; border-left: 1px solid #cbd0d2; color: #89949b; font-size: 9px; }.oc-help-systems__intro { display: flex; flex: 0 1 375px; flex-direction: column; align-items: flex-start; gap: 19px; }.oc-help-systems__intro > p { width: auto; margin: 0; color: #66727a; font-size: 14px; line-height: 1.7; }
.oc-help-systems__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 76px); border-top: 1px solid var(--oc-sys-line); }.oc-help-systems .oc-help-system { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 112px; padding: 17px 0; border: 0; border-bottom: 1px solid var(--oc-sys-line); background: transparent; color: var(--oc-sys-ink); transition: none; }.oc-help-systems .oc-help-system--accent { background: transparent; }.oc-help-systems .oc-help-system:hover, .oc-help-systems .oc-help-system--accent:hover { background: transparent; color: var(--oc-sys-ink); }.oc-help-systems .oc-help-system__number { align-self: start; padding-top: 4px; color: var(--oc-sys-red); font: 10px/1 "PT Mono", monospace; }.oc-help-systems .oc-help-system h3 { margin: 0 0 7px; color: var(--oc-sys-ink); font-size: 17px; line-height: 1.2; }.oc-help-systems .oc-help-system:hover h3 { color: var(--oc-sys-ink); }.oc-help-systems .oc-help-system p { max-width: 310px; margin: 0; color: #77828a; font-size: 12px; line-height: 1.55; }.oc-help-systems .oc-help-system:hover p { color: #77828a; }.oc-help-systems .oc-help-system__type { color: #9aa4aa; font: 8px/1.2 "PT Mono", monospace; letter-spacing: .035em; text-align: right; }.oc-help-systems .oc-help-system__symbol { display: none; }
.oc-help-systems__cta { padding: 12px 16px; border-color: var(--oc-sys-ink); font-size: 11px; }.oc-help-systems__cta span { color: var(--oc-sys-red); }.oc-help-systems a.oc-help-systems__cta:link, .oc-help-systems a.oc-help-systems__cta:visited { color: var(--oc-sys-ink); }.oc-help-systems a.oc-help-systems__cta:hover, .oc-help-systems a.oc-help-systems__cta:focus-visible { border-color: var(--oc-sys-red); color: #fff; background: var(--oc-sys-red); }.oc-help-systems__footer { justify-content: flex-start; gap: 12px; margin-top: 24px; }.oc-help-systems__footer-mark { color: var(--oc-sys-red); font-size: 18px; }.oc-help-systems__footer > p { color: #89949b; font-size: 11px; }
@media (max-width: 900px) { .oc-help-systems__heading { align-items: flex-start; gap: 28px; }.oc-help-systems__intro { flex-basis: 320px; }.oc-help-systems__list { column-gap: 30px; }.oc-help-systems .oc-help-system { grid-template-columns: 30px minmax(0, 1fr); min-height: 105px; }.oc-help-systems .oc-help-system__type { grid-column: 2; grid-row: 2; margin-top: 4px; text-align: left; }.oc-help-systems .oc-help-system > div { grid-column: 2; grid-row: 1; }.oc-help-systems .oc-help-system__number { grid-column: 1; grid-row: 1 / span 2; } }
@media (max-width: 680px) { .oc-help-systems__heading { margin-bottom: 32px; }.oc-help-systems__intro { gap: 16px; margin-top: 18px; }.oc-help-systems__intro > p { font-size: 12px; }.oc-help-systems__list { grid-template-columns: 1fr; column-gap: 0; }.oc-help-systems .oc-help-system { min-height: 94px; padding: 15px 0; }.oc-help-systems .oc-help-system h3 { font-size: 16px; }.oc-help-systems .oc-help-system p { font-size: 12px; }.oc-help-systems__footer { flex-direction: row; gap: 10px; margin-top: 20px; }.oc-help-systems__footer > p { font-size: 11px; } }

/* Keep the directory layout above Journal 3's generic article and hover rules. */
.oc-help-systems .oc-help-systems__list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(28px, 5vw, 76px) !important; border-top: 1px solid var(--oc-sys-line) !important; }
.oc-help-systems .oc-help-system, .oc-help-systems .oc-help-system:hover, .oc-help-systems .oc-help-system--accent, .oc-help-systems .oc-help-system--accent:hover { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; min-height: 112px !important; margin: 0 !important; padding: 17px 0 !important; border: 0 !important; border-bottom: 1px solid var(--oc-sys-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--oc-sys-ink) !important; cursor: default !important; }
.oc-help-systems .oc-help-system > div { grid-column: 2 !important; grid-row: 1 !important; }.oc-help-systems .oc-help-system__number { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; padding-top: 4px !important; color: var(--oc-sys-red) !important; font: 10px/1 "PT Mono", monospace !important; }.oc-help-systems .oc-help-system__type { grid-column: 3 !important; grid-row: 1 !important; color: #9aa4aa !important; font: 8px/1.2 "PT Mono", monospace !important; text-align: right !important; }.oc-help-systems .oc-help-system h3, .oc-help-systems .oc-help-system:hover h3 { margin: 0 0 7px !important; color: var(--oc-sys-ink) !important; font-size: 17px !important; line-height: 1.2 !important; }.oc-help-systems .oc-help-system p, .oc-help-systems .oc-help-system:hover p { max-width: 310px !important; margin: 0 !important; color: #77828a !important; font-size: 12px !important; line-height: 1.55 !important; }.oc-help-systems .oc-help-system__symbol { display: none !important; }
@media (max-width: 900px) { .oc-help-systems .oc-help-systems__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 30px !important; }.oc-help-systems .oc-help-system, .oc-help-systems .oc-help-system:hover, .oc-help-systems .oc-help-system--accent, .oc-help-systems .oc-help-system--accent:hover { grid-template-columns: 30px minmax(0, 1fr) !important; min-height: 105px !important; }.oc-help-systems .oc-help-system > div { grid-column: 2 !important; grid-row: 1 !important; }.oc-help-systems .oc-help-system__number { grid-column: 1 !important; grid-row: 1 / span 2 !important; }.oc-help-systems .oc-help-system__type { grid-column: 2 !important; grid-row: 2 !important; margin-top: 4px !important; text-align: left !important; } }
@media (max-width: 680px) { .oc-help-systems .oc-help-systems__list { grid-template-columns: 1fr !important; column-gap: 0 !important; }.oc-help-systems .oc-help-system, .oc-help-systems .oc-help-system:hover, .oc-help-systems .oc-help-system--accent, .oc-help-systems .oc-help-system--accent:hover { min-height: 94px !important; padding: 15px 0 !important; }.oc-help-systems .oc-help-system h3, .oc-help-systems .oc-help-system:hover h3 { font-size: 16px !important; }.oc-help-systems .oc-help-system p, .oc-help-systems .oc-help-system:hover p { font-size: 12px !important; } }

/* Fourth screen, revised to match the supplied composition */
.oc-help-systems { --oc-sys-ink: #111820; --oc-sys-paper: #f7f7f5; --oc-sys-red: #e6322d; --oc-sys-line: rgba(255,255,255,.14); position: relative; isolation: isolate; overflow: hidden; color: var(--oc-sys-paper); background: linear-gradient(112deg, #10171e 0%, #151d25 58%, #0d1319 100%); font-family: Manrope, Arial, sans-serif; }
.oc-help-systems *, .oc-help-systems *::before, .oc-help-systems *::after { box-sizing: border-box; }.oc-help-systems__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(68px, 8vw, 108px) 0 88px; }.oc-help-systems__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #aab5bc; font: 10px/1.3 "PT Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }.oc-help-systems__eyebrow span { width: 24px; height: 1px; background: var(--oc-sys-red); }.oc-help-systems h2 { max-width: 850px; margin: 0; color: var(--oc-sys-paper); font-size: clamp(39px, 5vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; }.oc-help-systems__lead { max-width: 730px; margin: 22px 0 0; color: #aab4bb; font-size: 15px; line-height: 1.7; }
.oc-help-systems__partners { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }.oc-help-systems__partners span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 4px; background: rgba(255,255,255,.025); color: #d1d9de; font: 10px "PT Mono", monospace; white-space: nowrap; }
.oc-help-systems__custom { margin-top: clamp(54px, 7vw, 88px); padding-top: 37px; border-top: 1px solid var(--oc-sys-line); }.oc-help-systems__custom h3 { margin: 0 0 30px; color: var(--oc-sys-paper); font-size: clamp(27px, 3vw, 39px); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; }.oc-help-systems__flow { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr); align-items: center; }.oc-help-systems__node { display: flex; min-height: 83px; flex-direction: column; justify-content: center; gap: 9px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: rgba(255,255,255,.025); }.oc-help-systems__node small { color: #87949d; font: 8px/1.2 "PT Mono", monospace; letter-spacing: .08em; }.oc-help-systems__node strong { color: #e1e6e9; font-size: 13px; font-weight: 700; line-height: 1.3; }.oc-help-systems__node--core { border-color: rgba(230,50,45,.65); background: rgba(230,50,45,.1); }.oc-help-systems__node--core small { color: #e77973; }.oc-help-systems__connector { color: var(--oc-sys-red); font-size: 25px; text-align: center; }.oc-help-systems__cta { display: inline-flex; align-items: center; gap: 25px; margin-top: 28px; padding: 14px 18px; border: 1px solid var(--oc-sys-red); border-radius: 4px; background: var(--oc-sys-red); color: #fff; font-size: 12px; font-weight: 800; transition: background .2s ease, border-color .2s ease; }.oc-help-systems a.oc-help-systems__cta:link, .oc-help-systems a.oc-help-systems__cta:visited { color: #fff; }.oc-help-systems a.oc-help-systems__cta:hover, .oc-help-systems a.oc-help-systems__cta:focus-visible { border-color: #bd2521; background: #bd2521; color: #fff; }.oc-help-systems__cta span { font-size: 17px; }
@media (max-width: 900px) { .oc-help-systems__inner { width: min(100% - 44px, 760px); }.oc-help-systems__flow { grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr); }.oc-help-systems__node { padding: 15px; }.oc-help-systems__node strong { font-size: 12px; } }
@media (max-width: 680px) { .oc-help-systems__inner { width: min(100% - 32px, 530px); padding: 64px 0 68px; }.oc-help-systems h2 { font-size: clamp(35px, 9vw, 47px); }.oc-help-systems__lead { margin-top: 18px; font-size: 13px; }.oc-help-systems__partners { gap: 7px; margin-top: 23px; }.oc-help-systems__partners span { min-height: 30px; padding: 0 9px; font-size: 9px; }.oc-help-systems__custom { margin-top: 49px; padding-top: 27px; }.oc-help-systems__custom h3 { margin-bottom: 23px; font-size: 27px; }.oc-help-systems__flow { grid-template-columns: 1fr; gap: 9px; }.oc-help-systems__node { min-height: 70px; }.oc-help-systems__connector { height: 20px; font-size: 0; line-height: 0; }.oc-help-systems__connector::after { content: "↓"; font-size: 22px; line-height: 20px; }.oc-help-systems__cta { margin-top: 22px; } }

/* Fifth screen: selectable integration pricing */
.oc-help-pricing { --oc-price-ink: #111820; --oc-price-red: #e6322d; --oc-price-blue: #2850f5; --oc-price-line: #e4e6e8; color: var(--oc-price-ink); background: #fff; font-family: Manrope, Arial, sans-serif; }.oc-help-pricing *, .oc-help-pricing *::before, .oc-help-pricing *::after { box-sizing: border-box; }.oc-help-pricing__inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(68px, 8vw, 108px) 0 76px; }.oc-help-pricing__eyebrow { margin: 0 0 17px; color: var(--oc-price-blue); font: 700 10px/1 "PT Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }.oc-help-pricing h2 { margin: 0; color: var(--oc-price-ink); font-size: clamp(38px, 4.4vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; }.oc-help-pricing__lead { max-width: 650px; margin: 18px 0 0; color: #747d84; font-size: 14px; line-height: 1.65; }.oc-help-pricing__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 43px; }.oc-help-plan { position: relative; display: flex; min-height: 245px; flex-direction: column; align-items: flex-start; padding: 25px 22px 23px; border: 1px solid #e7e8ea; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.oc-help-plan:hover { border-color: #b8c3ff; transform: translateY(-2px); }.oc-help-plan:has(input:checked) { border: 2px solid var(--oc-price-blue); padding: 24px 21px 22px; box-shadow: 0 8px 24px rgba(40,80,245,.08); }.oc-help-plan input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }.oc-help-plan:focus-within { outline: 3px solid rgba(40,80,245,.22); outline-offset: 3px; }.oc-help-plan__check { position: absolute; top: 18px; right: 18px; width: 17px; height: 17px; border: 1px solid #cbd0d4; border-radius: 50%; }.oc-help-plan:has(input:checked) .oc-help-plan__check { border: 5px solid var(--oc-price-blue); }.oc-help-plan__name { max-width: calc(100% - 12px); color: var(--oc-price-ink); font-size: 15px; font-weight: 700; line-height: 1.3; }.oc-help-plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; color: var(--oc-price-ink); font-size: clamp(22px, 2vw, 27px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; white-space: nowrap; }.oc-help-plan__price small { color: #68727a; font-size: 13px; font-weight: 600; letter-spacing: 0; }.oc-help-plan__description { margin-top: 17px; color: #747d84; font-size: 12px; line-height: 1.6; }.oc-help-plan__badge { position: absolute; top: -11px; left: 18px; padding: 5px 8px; border-radius: 3px; background: var(--oc-price-blue); color: #fff; font: 8px/1 "PT Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }.oc-help-pricing__footer { display: flex; align-items: center; gap: 21px; margin-top: 27px; }.oc-help-pricing__footer > p { margin: 0; color: #7b848b; font-size: 12px; line-height: 1.5; }.oc-help-pricing__cta { display: inline-flex; align-items: center; gap: 21px; padding: 14px 18px; border: 1px solid var(--oc-price-blue); border-radius: 7px; background: var(--oc-price-blue); color: #fff; font-size: 12px; font-weight: 800; transition: background .18s ease; }.oc-help-pricing a.oc-help-pricing__cta:link, .oc-help-pricing a.oc-help-pricing__cta:visited { color: #fff; }.oc-help-pricing__cta:hover { background: #1e42d4; color: #fff; }.oc-help-pricing__cta span { font-size: 17px; }
@media (max-width: 980px) { .oc-help-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }.oc-help-plan { min-height: 215px; }.oc-help-plan__price { font-size: clamp(23px, 3.3vw, 28px); } }
@media (max-width: 620px) { .oc-help-pricing__inner { width: min(100% - 32px, 530px); padding: 63px 0 66px; }.oc-help-pricing h2 { font-size: clamp(34px, 9vw, 46px); }.oc-help-pricing__lead { font-size: 13px; }.oc-help-pricing__grid { grid-template-columns: 1fr; gap: 13px; margin-top: 31px; }.oc-help-plan { min-height: auto; padding: 20px 18px 19px; }.oc-help-plan:has(input:checked) { padding: 19px 17px 18px; }.oc-help-plan__price { margin-top: 13px; font-size: 25px; }.oc-help-plan__description { margin-top: 11px; font-size: 12px; }.oc-help-pricing__footer { align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 22px; }.oc-help-pricing__footer > p { font-size: 11px; } }

/* Sixth screen: integration inquiry form */
.oc-help-request { --oc-req-bg:#111820; --oc-req-panel:#080f1d; --oc-req-blue:#2850f5; --oc-req-line:#29364a; --oc-req-muted:#aab5c2; background:var(--oc-req-bg); color:#f5f7fb; font-family:Manrope,Arial,sans-serif; }
.oc-help-request *, .oc-help-request *::before, .oc-help-request *::after { box-sizing:border-box; }
.oc-help-request__inner { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:stretch; gap:clamp(40px,6vw,86px); width:min(1280px,calc(100% - 48px)); margin:0 auto; padding:clamp(68px,8vw,100px) 0; }
.oc-help-request__copy { display:flex; flex-direction:column; }
.oc-help-request__eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:#71a8ff; font:700 11px/1.3 "PT Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.oc-help-request__eyebrow::before { width:9px; height:9px; border-radius:50%; background:#3484ff; content:""; }
.oc-help-request h2 { max-width:570px; margin:0; color:#fff; font-size:clamp(37px,4.3vw,58px); font-weight:800; line-height:1.04; letter-spacing:-.055em; }
.oc-help-request__lead { max-width:500px; margin:22px 0 0; color:#c2ccd8; font-size:16px; line-height:1.7; }
.oc-help-request__benefits { display:grid; gap:17px; margin:32px 0 0; padding:0; list-style:none; }
.oc-help-request__benefits li { display:flex; gap:13px; color:#d6deea; font-size:13px; line-height:1.55; }
.oc-help-request__benefits li::before { display:grid; flex:0 0 19px; width:19px; height:19px; border:1px solid #4d9dff; border-radius:50%; color:#65adff; content:"✓"; font-size:12px; place-items:center; }
.oc-help-request__telegram { margin-top:auto; padding-top:38px; }
.oc-help-request__telegram p { margin:0 0 12px; color:#9eabba; font-size:13px; }
.oc-help-request__telegram a { display:inline-flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid #34445c; border-radius:9px; background:#1d2a3d; color:#fff; font-size:13px; font-weight:700; text-decoration:none; }
.oc-help-request__telegram a span { color:#68aaff; font-size:17px; }
.oc-help-request__formbox { padding:clamp(22px,3.2vw,40px); border:1px solid rgba(144,165,195,.12); border-radius:22px; background:var(--oc-req-panel); box-shadow:0 24px 80px rgba(0,0,0,.18); }
.oc-help-request__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.oc-help-request__field { display:flex; min-width:0; flex-direction:column; gap:8px; }
.oc-help-request__field--wide { grid-column:1/-1; }
.oc-help-request__field label { color:#dce4ef; font-size:13px; line-height:1.35; }
.oc-help-request__field label em { color:#ff7777; font-style:normal; }
.oc-help-request__field input, .oc-help-request__field textarea { width:100%; min-height:50px; padding:13px 16px; border:1px solid #344158; border-radius:11px; outline:none; background:#111a2b; color:#f7f9fc; font:14px/1.45 Manrope,Arial,sans-serif; }
.oc-help-request__field textarea { min-height:112px; resize:vertical; }
.oc-help-request__field input::placeholder, .oc-help-request__field textarea::placeholder { color:#718097; opacity:1; }
.oc-help-request__field input:focus, .oc-help-request__field textarea:focus { border-color:#5483ff; box-shadow:0 0 0 3px rgba(40,80,245,.16); }
.oc-help-request__field > input[type="file"] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); }
.oc-help-request__file { display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; padding:10px 13px; border:1px solid #344158; border-radius:9px; background:#1b293d; color:#dce4ef; cursor:pointer; font-size:12px; }
.oc-help-request__file input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); }
.oc-help-request__file:focus-within { outline:2px solid #5483ff; outline-offset:2px; }
.oc-help-request__file-name { overflow:hidden; max-width:320px; color:#92a2b8; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.oc-help-request__consent { display:flex; align-items:flex-start; gap:10px; margin:17px 0 0; color:#aab5c2; font-size:11px; line-height:1.55; }
.oc-help-request__consent input { flex:0 0 auto; width:16px; height:16px; margin:1px 0 0; accent-color:#2850f5; }
.oc-help-request__consent a { color:#c9d7f5; }
.oc-help-request__turnstile { min-height:66px; margin-top:16px; }
.oc-help-request__submit { display:flex; width:100%; min-height:56px; align-items:center; justify-content:center; gap:12px; margin-top:15px; padding:14px 20px; border:0; border-radius:10px; background:#285ff5; color:#fff; cursor:pointer; font:800 14px/1.3 Manrope,Arial,sans-serif; transition:background .18s ease,opacity .18s ease; }
.oc-help-request__submit:hover { background:#194be0; }
.oc-help-request__submit:disabled { cursor:wait; opacity:.65; }
.oc-help-request__note, .oc-help-request__status { margin:12px 0 0; color:#8997ac; font-size:11px; line-height:1.5; text-align:center; }
.oc-help-request__status:not(:empty) { color:#b9d4ff; }
.oc-help-request__status.is-error { color:#ff9e9e; }
.oc-help-request__trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
@media (max-width:900px) { .oc-help-request__inner { grid-template-columns:1fr; gap:36px; width:min(100% - 40px,760px); }.oc-help-request__copy { max-width:680px; }.oc-help-request__telegram { margin-top:28px; padding-top:25px; border-top:1px solid rgba(255,255,255,.12); } }
@media (max-width:600px) { .oc-help-request__inner { width:min(100% - 32px,530px); gap:27px; padding:62px 0; }.oc-help-request h2 { font-size:clamp(34px,9vw,46px); }.oc-help-request__lead { margin-top:17px; font-size:14px; }.oc-help-request__benefits { gap:13px; margin-top:24px; }.oc-help-request__benefits li { font-size:12px; }.oc-help-request__formbox { padding:20px 16px; border-radius:16px; }.oc-help-request__grid { grid-template-columns:1fr; gap:15px; }.oc-help-request__field--wide { grid-column:auto; }.oc-help-request__field input { min-height:48px; }.oc-help-request__field textarea { min-height:104px; }.oc-help-request__submit { min-height:54px; font-size:13px; } }