/* The same DATA identity, now staged in physical space. */
:root {
  --abyss: #071c36;
  --silver: #c9d8eb;
  --lift: 0 30px 75px -35px #061c4266;
  --lift-close: 0 14px 35px -20px #061c4240;
}
.hero {
  background: var(--abyss);
  color: white;
  isolation: isolate;
  min-height: 780px;
  margin: 0 16px;
  border-radius: 20px;
  max-height: 1040px;
  padding-top: 76px;
}
.hero h1 {
  color: #fff;
  font-weight: 600;
  font-size: clamp(72px, 7vw, 108px);
  position: relative;
}
.hero h1 .title-accent {
  color: #91bfff;
}
.hero-description {
  color: #c3d2e6;
  font-weight: 400;
  max-width: 425px;
}
.hero-art {
  right: -8%;
  top: 0;
  width: 90%;
  height: 100%;
  mask-image:
    linear-gradient(90deg, transparent, #000 28%, #000 100%),
    linear-gradient(180deg, #000 80%, transparent);
  mask-composite: intersect;
}
.hero-art img {
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) scale(1.03);
  will-change: transform;
}
.hero-content {
  z-index: 3;
}
.hero-actions .button-primary {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 25px -12px #020e29;
}
.hero-actions .button-primary:hover {
  background: #dbeaff;
}
.hero-actions .text-link {
  color: #d0e2fa;
}
.hero-bottom {
  border-color: #ffffff26;
  color: #bcd0e9;
  z-index: 3;
}
.scroll-arrow {
  border-color: #ffffff40;
}
.hero-orbit-label {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 140px;
  background: #153856ed;
  border: 1px solid #799fc666;
  border-radius: 10px;
  padding: 16px 22px;
  box-shadow: 0 22px 40px -20px #000b;
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  transform: translate3d(var(--label-x, 0px), var(--label-y, 0px), 0);
}
.hero-orbit-label > svg {
  width: 34px;
  height: 34px;
  stroke: #93c3ff;
  stroke-width: 1.1;
}
.hero-orbit-label span {
  font-size: 11px;
  color: #b1c8e1;
  display: block;
}
.hero-orbit-label strong {
  font-size: 14px;
  font-weight: 500;
  display: block;
}
.hero-axis {
  position: absolute;
  left: 52%;
  bottom: 60px;
  right: -20%;
  height: 180px;
  border: 1px solid #90b7e31c;
  border-radius: 50%;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}
.intro {
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
}
.intro h2 {
  font-weight: 550;
}
.intro-copy {
  padding-top: 6px;
}
.system-story {
  background: var(--abyss);
  margin: 0 16px;
  border-radius: 20px;
  color: #fff;
  min-height: 1450px;
  height: 215vh;
}
.system-sticky {
  padding-top: 52px;
}
.system-stage {
  min-height: 350px;
  max-height: 510px;
}
.system-diagram {
  position: relative;
  z-index: 2;
}
.system-node rect {
  fill: #163654;
  stroke: #4f7197;
  filter: drop-shadow(0px 10px 12px #0004);
}
.system-node text {
  font-weight: 450;
  font-size: 18px;
}
.diagram-guides {
  opacity: 0.13;
}
.has-3d .core-node {
  opacity: 0;
}
.assembly-canvas {
  position: absolute;
  z-index: 3;
  width: 42%;
  height: 105%;
  left: 29%;
  top: -7%;
  pointer-events: none;
}
.system-caption {
  position: relative;
  z-index: 4;
}
.system-top h2 {
  font-weight: 500;
}
.story-navigation {
  gap: 24px;
}
.story-step {
  border-top: 1px solid #3a526e;
  padding-top: 18px;
}
.story-step.active {
  color: #b9d7ff;
}
.story-step.active strong {
  color: white;
}
.services {
  padding-top: 125px;
  padding-bottom: 125px;
}
.service {
  padding: 0 24px;
  margin: 0 -24px;
  transition:
    background 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    color 0.3s,
    border-radius 0.3s;
}
.service[open] {
  background: var(--navy);
  color: white;
  border-color: transparent;
  border-radius: 14px;
  box-shadow: var(--lift);
  margin-bottom: 14px;
  margin-top: 10px;
}
.service[open] + .service {
  border-top-color: transparent;
}
.service[open] .service-short,
.service[open] .service-body > p {
  color: #c9d9eb;
}
.service[open] .tag-list li {
  background: #244c73;
  color: #e7f1ff;
}
.service[open] .text-link {
  color: #a6cbff;
}
.service[open] .service-toggle {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.service summary:hover .service-name {
  transform: translateX(5px);
}
.service-name {
  transition: transform 0.45s var(--ease);
}
.bitrix {
  background: #eaf1fa;
  border-radius: 20px;
  margin: 0 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 105px;
}
.bitrix:before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -180px;
  top: 190px;
  border: 70px solid #d9e5f4;
  border-radius: 50%;
  z-index: -1;
  transform: rotateX(60deg) rotateY(-20deg);
}
.bitrix-workspace {
  gap: 9%;
  padding-bottom: 15px;
}
.bitrix-demo {
  position: relative;
  overflow: visible;
  transform: perspective(1300px) rotateX(var(--demo-rx, 5deg))
    rotateY(var(--demo-ry, -9deg));
  box-shadow: 0 55px 70px -38px #1a416d80;
  transition: none;
  transform-style: preserve-3d;
}
.bitrix-demo:before,
.bitrix-demo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #c8d8ed;
  border-radius: 12px;
  z-index: -1;
  transform: translate3d(13px, 15px, -18px);
  box-shadow: 0 20px 35px -30px #0f326a66;
}
.bitrix-demo:after {
  transform: translate3d(26px, 30px, -36px);
  background: #aebfd8;
}
.bitrix-demo:hover {
  transform: perspective(1300px) rotateX(var(--demo-rx, 5deg))
    rotateY(var(--demo-ry, -9deg));
}
.demo-topbar {
  border-radius: 12px 12px 0 0;
}
.demo-content {
  background: #fff;
  border-radius: 0 0 12px 12px;
}
.flow-item {
  box-shadow: 0 4px 9px -7px #123a6059;
  transition: transform 0.45s var(--ease);
}
.flow-item:hover {
  transform: translateX(5px);
}
.bitrix-foot {
  position: relative;
  margin-top: 65px;
}
.approach {
  padding-top: 125px;
  padding-bottom: 125px;
}
.approach-grid {
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #eff4f9;
}
.approach-grid article {
  border: 0;
  padding: 30px 26px 25px;
  position: relative;
  background: #eff4f9;
  transition:
    background 0.35s,
    transform 0.5s var(--ease);
}
.approach-grid article:nth-child(even) {
  background: #e6eef7;
}
.approach-grid article:before {
  display: none;
}
.approach-grid article:hover {
  background: #d9e9fc;
}
.approach-number {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid #abc4df;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 7px 15px -9px #234d7a66;
}
.approach-grid h3 {
  font-size: 22px;
}
.step-deliverable {
  border-color: #b9cde0;
  font-size: 10px;
}
.approach-grid p {
  font-size: 13px;
  min-height: 132px;
}
.team {
  background: var(--abyss);
  margin: 0 16px;
  border-radius: 20px;
  padding-top: 105px;
  padding-bottom: 105px;
  isolation: isolate;
}
.team:before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  right: -220px;
  top: -200px;
  border: 100px solid #12385f;
  transform: rotate(30deg);
  border-radius: 100px;
  z-index: -1;
}
.team-disciplines {
  position: relative;
}
.team-disciplines > div:not(.team-experience) {
  padding: 20px 16px;
  border: 0;
  margin-bottom: 6px;
  background: #193c5ede;
  transform: translateX(var(--discipline-offset, 0));
  border-radius: 5px;
  box-shadow: 0 12px 20px -18px #0009;
}
.team-disciplines > div:nth-child(2) {
  --discipline-offset: 12px;
}
.team-disciplines > div:nth-child(3) {
  --discipline-offset: 24px;
}
.team-disciplines > div:nth-child(4) {
  --discipline-offset: 36px;
}
.team-experience {
  margin-top: 38px;
}
.team-disciplines strong {
  font-size: 22px;
}
.project {
  margin: 0 16px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #124bba;
}
.project:before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  border: 1px solid #79abff70;
  border-radius: 50%;
  left: -35vw;
  top: -30vw;
  z-index: -1;
  box-shadow:
    0 0 0 100px #4081e51f,
    0 0 0 200px #4081e514;
}
.brief-builder {
  background: #0f3f9d;
  padding: 36px;
  border-radius: 14px;
  box-shadow: 0 35px 55px -30px #07245480;
}
.project h2 {
  font-size: clamp(37px, 4.1vw, 63px);
}
.project h2 span {
  font-size: 0.8em;
}
.project-intro {
  padding-top: 10px;
}
.brief-result pre {
  background: #0d3687;
}
.project .service-options input:checked + span {
  color: #124bba;
}
.site-footer {
  margin-top: -20px;
  padding-top: 75px;
  position: relative;
  z-index: -0;
  background: var(--abyss);
}
/* Physical continuity for accordion content; native behavior remains the fallback. */
.mobile-system-labels {
  display: none;
}
@media (max-width: 600px) {
  .has-3d .system-node {
    opacity: 0;
  }
  .mobile-system-labels {
    display: grid;
    position: absolute;
    left: 38px;
    right: 38px;
    top: 20%;
    bottom: 22%;
    grid-template-columns: repeat(3, 1fr);
    align-content: space-between;
    gap: 0 8px;
    z-index: 4;
    pointer-events: none;
  }
  .mobile-system-labels span {
    background: #173957;
    border: 1px solid #4f7197;
    padding: 7px 5px;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
    box-shadow: 0 9px 15px -10px #0009;
  }
  .system-caption {
    font-size: 9px;
  }
  .has-3d .diagram-guides {
    opacity: 0.07;
  }
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  .service::details-content,
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.5s var(--ease),
      content-visibility 0.5s;
    transition-behavior: allow-discrete;
  }
  .service[open]::details-content,
  .faq details[open]::details-content {
    block-size: auto;
  }
}
@media (max-width: 1150px) {
  .hero-art {
    right: -20%;
    width: 104%;
    opacity: 0.9;
  }
  .hero-orbit-label {
    right: 4%;
    bottom: 125px;
  }
  .hero h1 {
    font-size: 80px;
  }
  .approach-grid article {
    padding: 25px 18px;
  }
  .approach-grid h3 {
    font-size: 20px;
  }
  .brief-builder {
    padding: 27px;
  }
  .team-disciplines > div:nth-child(n) {
    --discipline-offset: 0;
  }
  .system-stage {
    min-height: 310px;
  }
  .project {
    gap: 5%;
  }
}
@media (max-width: 900px) {
  .hero {
    padding-top: 62px;
    min-height: 800px;
  }
  .hero h1 {
    font-size: 76px;
  }
  .hero-art {
    right: -38%;
    width: 120%;
    top: 0;
    opacity: 0.7;
    mask-image:
      linear-gradient(90deg, transparent, #000 40%, #000),
      linear-gradient(180deg, #000 80%, transparent);
  }
  .hero-orbit-label {
    bottom: 125px;
    right: 6%;
    padding: 13px 17px;
  }
  .hero-orbit-label strong {
    font-size: 12px;
  }
  .hero-orbit-label span {
    font-size: 10px;
  }
  .hero-orbit-label > svg {
    width: 26px;
    height: 26px;
  }
  .system-stage {
    min-height: 300px;
  }
  .assembly-canvas {
    width: 47%;
    left: 26.5%;
    height: 100%;
    top: -4%;
  }
  .bitrix-demo {
    max-width: 600px;
  }
  .bitrix-workspace {
    padding-bottom: 20px;
  }
  .approach-grid article {
    padding: 30px;
  }
  .approach-grid h3 {
    font-size: 25px;
  }
  .approach-grid p {
    min-height: 90px;
  }
  .team:before {
    right: -120px;
    top: 300px;
  }
  .team-disciplines {
    max-width: 90%;
  }
  .team-disciplines > div:nth-child(2) {
    --discipline-offset: 12px;
  }
  .team-disciplines > div:nth-child(3) {
    --discipline-offset: 24px;
  }
  .team-disciplines > div:nth-child(4) {
    --discipline-offset: 36px;
  }
  .brief-builder {
    padding: 34px;
  }
  .project-intro {
    padding-top: 0;
  }
  .project h2 {
    font-size: 57px;
  }
  .project h2 span {
    font-size: 0.85em;
  }
}
@media (max-width: 600px) {
  .hero,
  .system-story,
  .bitrix,
  .team,
  .project {
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 15px;
  }
  .hero {
    padding-top: 35px;
    min-height: 860px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero h1 {
    font-size: clamp(53px, 12.7vw, 75px);
    font-weight: 600;
  }
  .hero-description {
    font-size: 14px;
    max-width: 300px;
  }
  .hero-art {
    right: -33%;
    bottom: 45px;
    top: auto;
    width: 156%;
    height: 420px;
    opacity: 1;
    mask-image: linear-gradient(
      180deg,
      transparent,
      #000 20%,
      #000 75%,
      transparent
    );
  }
  .hero-art img {
    object-fit: cover;
    object-position: center;
  }
  .hero-bottom {
    left: 20px;
    right: 20px;
  }
  .hero-orbit-label {
    bottom: 99px;
    right: 20px;
    padding: 10px 13px;
    gap: 10px;
  }
  .hero-orbit-label strong {
    font-size: 10px;
  }
  .hero-orbit-label span {
    font-size: 9px;
  }
  .hero-orbit-label > svg {
    width: 22px;
    height: 22px;
  }
  .hero-axis {
    display: none;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding: 14px 15px;
    gap: 14px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 7px;
  }
  .intro {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .intro h2 {
    font-size: 33px;
  }
  .system-story {
    min-height: 1130px;
    height: 180vh;
  }
  .system-sticky {
    padding: 34px 20px 20px;
  }
  .system-top h2 {
    font-size: 28px;
  }
  .system-stage {
    margin: 10px -30px 0;
    min-height: 275px;
  }
  .assembly-canvas {
    width: 53%;
    left: 23.5%;
    height: 100%;
    top: -4%;
  }
  .system-diagram {
    transform: scale(1.05);
  }
  .system-node text {
    font-size: 20px;
  }
  .diagram-guides {
    opacity: 0.09;
  }
  .services {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .service {
    margin: 0 -12px;
    padding: 0 12px;
  }
  .service-name {
    font-size: 21px;
  }
  .service[open] {
    margin-top: 9px;
    margin-bottom: 12px;
  }
  .service-body {
    gap: 15px;
  }
  .bitrix {
    padding-top: 68px;
    padding-bottom: 50px;
  }
  .bitrix:before {
    width: 300px;
    height: 300px;
    right: -180px;
    top: 580px;
    border-width: 45px;
  }
  .bitrix-demo {
    transform: perspective(1000px) rotateX(2deg) rotateY(-3deg);
    width: calc(100% - 12px);
    justify-self: start;
  }
  .bitrix-demo:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-3deg);
  }
  .bitrix-demo:before {
    transform: translate3d(7px, 10px, -18px);
  }
  .bitrix-demo:after {
    transform: translate3d(14px, 20px, -36px);
  }
  .bitrix-foot {
    margin-top: 45px;
  }
  .approach {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .approach-grid {
    gap: 0;
  }
  .approach-grid article {
    padding: 27px 20px;
    grid-template-columns: 34px 1fr;
    gap: 0 14px;
  }
  .approach-number {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
  }
  .approach-grid h3 {
    font-size: 23px;
  }
  .approach-grid p {
    font-size: 13px;
    min-height: 0;
  }
  .step-deliverable {
    font-size: 10px;
    margin-top: 16px;
  }
  .team {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .team-left > p {
    font-size: 14px;
  }
  .team h2 {
    font-size: 32px;
  }
  .team-disciplines {
    max-width: 100%;
  }
  .team-disciplines > div:nth-child(n) {
    --discipline-offset: 0;
    padding: 18px 14px;
  }
  .team-disciplines strong {
    font-size: 20px;
  }
  .team-experience {
    margin-top: 25px;
  }
  .project {
    padding: 58px 20px;
  }
  .project h2 {
    font-size: 43px;
  }
  .brief-builder {
    padding: 25px 18px;
    margin: 0 -5px;
  }
  .brief-builder legend {
    font-size: 14px;
  }
  .service-options label > span {
    font-size: 10px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
  }
  .form-field > label {
    font-size: 11px;
  }
  .form-field input,
  .form-field textarea {
    font-size: 16px;
  }
  .project:before {
    width: 160vw;
    height: 160vw;
    left: -80vw;
    top: -100vw;
  }
  .project-meta {
    font-size: 10px;
  }
  .footer-top {
    gap: 22px;
  }
  .site-footer {
    padding-top: 60px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img {
    transform: none;
    will-change: auto;
  }
  .hero-orbit-label {
    transform: none;
  }
  .bitrix-demo,
  .bitrix-demo:hover {
    transform: none;
  }
  .system-story {
    height: auto;
    min-height: 0;
  }
  .assembly-canvas {
    height: 100%;
  }
  .service-name {
    transform: none !important;
  }
  .system-stage {
    min-height: 330px;
  }
}

/* Readability: consistent body, label and small-print roles at every breakpoint. */
:root {
  --text-body: 1rem;
  --text-label: 0.875rem;
  --text-caption: 0.75rem;
}
.hero-description,
.intro-copy p,
.section-heading > p,
.service-body > p,
.bitrix-heading > p,
#bitrix-panel p,
.approach-grid p,
.team-left > p,
.faq details p,
.project-intro > p,
.brief-result > p {
  font-size: var(--text-body);
  line-height: 1.65;
}
.header-cta,
.hero-actions .button,
.hero-actions .text-link,
.service-short,
.service-body .text-link,
.tag-list li,
#bitrix-panel ul,
.bitrix-tabs button,
.flow-item strong,
.demo-flow-title strong,
.story-step small,
.step-deliverable,
.team-disciplines > div > span,
.team-experience p,
.team-left > .text-link,
.project-meta,
.brief-builder legend,
.service-options label > span,
.form-field > label,
.form-bottom p,
.field-error,
.brief-result pre,
.footer-top > p,
.footer-bottom,
.footer-bottom .text-link,
.back-top,
.privacy-note {
  font-size: var(--text-label);
  line-height: 1.55;
}
.motion-toggle,
.motion-label,
.system-caption,
.diagram-disclaimer,
.story-step > span,
.hero-bottom p,
.hero-orbit-label span,
.demo-topbar,
.demo-mode,
.demo-flow-title small,
.demo-live,
.flow-icon,
.flow-item small,
.demo-note,
.bitrix-foot,
.form-field > label > span {
  font-size: var(--text-caption);
  line-height: 1.5;
}
.hero-orbit-label strong,
.mobile-system-labels span {
  font-size: var(--text-label);
  line-height: 1.4;
}
.form-field input,
.form-field textarea {
  font-size: var(--text-body);
}
.faq summary {
  font-size: 17px;
}
.demo-flow-title > div,
.flow-item > div {
  min-width: 0;
}
.demo-flow-title strong,
.flow-item strong {
  text-wrap: balance;
}
.demo-flow-title small,
.flow-item small {
  margin-top: 5px;
}
.flow-item {
  min-height: 86px;
}
.demo-flow-title {
  align-items: flex-start;
}
.demo-topbar {
  flex-wrap: wrap;
  gap: 8px 14px;
}
.demo-mode {
  margin-left: auto;
}
.demo-note {
  align-items: flex-start;
  text-align: center;
}
.demo-note .status-dot {
  margin-top: 6px;
}
.approach-grid p {
  min-height: 160px;
}
.step-deliverable {
  min-height: 62px;
}
.footer-bottom {
  flex-wrap: wrap;
}
.system-caption {
  min-height: 44px;
}
.mobile-system-labels span {
  padding: 8px 5px;
}

@media (max-width: 900px) {
  .approach-grid p {
    min-height: 0;
  }
  .step-deliverable {
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .hero {
    min-height: 915px;
  }
  .hero-description {
    max-width: 320px;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .hero-actions .button {
    padding: 15px 18px;
  }
  .hero-art {
    height: 385px;
  }
  .hero-orbit-label {
    bottom: 108px;
  }
  .hero-bottom p {
    max-width: 255px;
    letter-spacing: 0.025em;
  }
  .hero-orbit-label strong {
    font-size: 13px;
  }
  .bitrix-tabs {
    gap: 16px;
  }
  .bitrix-controls > .text-link {
    font-size: 15px;
  }
  .demo-content {
    padding: 22px 14px;
  }
  .demo-flow-title {
    gap: 10px;
  }
  .demo-flow-title strong,
  .flow-item strong {
    font-size: 14px;
  }
  .flow-item {
    gap: 9px;
    padding: 14px 10px;
  }
  .flow-icon {
    width: 24px;
    height: 24px;
    flex: none;
  }
  .flow-item > svg {
    width: 14px;
  }
  .story-navigation {
    gap: 12px;
  }
  .story-step strong {
    font-size: 15px;
  }
  .story-step small {
    font-size: 14px;
    line-height: 1.45;
  }
  .system-stage {
    min-height: 250px;
  }
  .system-caption {
    padding: 0 35px;
    margin-top: 5px;
  }
  .system-sticky {
    min-height: 735px;
    overflow: hidden;
  }
  .diagram-disclaimer {
    margin-top: 15px;
  }
  .mobile-system-labels {
    left: 35px;
    right: 35px;
    gap: 0 6px;
  }
  .mobile-system-labels span {
    font-size: 12px;
  }
  .brief-builder legend {
    font-size: 16px;
  }
  .form-field > label {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .form-bottom .button {
    font-size: 15px;
  }
  .footer-bottom {
    align-items: center;
    gap: 12px 24px;
  }
  .footer-bottom .text-link {
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  .header-cta {
    display: none;
  }
  .hero {
    min-height: 990px;
  }
  .hero-description br {
    display: none;
  }
  .hero-actions {
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }
  .bitrix-tabs {
    flex-direction: column;
    gap: 0;
  }
  .bitrix-tabs button {
    font-size: 16px;
    justify-content: space-between;
  }
  .bitrix-tabs button svg {
    display: block;
  }
  .story-navigation {
    gap: 8px;
  }
  .story-step strong {
    font-size: 14px;
  }
  .story-step small {
    font-size: 13px;
  }
}
@media (max-width: 600px) and (max-height: 800px) {
  .system-story {
    height: auto;
    min-height: 0;
  }
  .system-sticky {
    position: relative;
    top: 0;
    height: auto;
    min-height: 0;
  }
  .system-stage {
    height: 320px;
    flex: none;
    margin-top: 22px;
  }
}
.approach-number {
  font-size: var(--text-caption);
}
@media (min-width: 601px) {
  .scroll-link {
    font-size: var(--text-caption);
  }
}