/*
 * GSP_TECHNICAL_CUSTOMER_LANDING_CSS_V1
 */

.technical-customer-page {
  background: #f4f6f8;
}

.tc-main {
  overflow: hidden;
  color: var(--text);
}


/* HERO */

.tc-hero {
  position: relative;
  padding: 76px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #f3f6f9 100%
    );
}

.tc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(
      rgba(38, 63, 84, .035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(38, 63, 84, .035) 1px,
      transparent 1px
    );
  background-size: 48px 48px;
  mask-image:
    linear-gradient(
      #000 0%,
      transparent 82%
    );
}

.tc-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(390px, .9fr);
  gap: 64px;
  align-items: center;
}

.tc-hero-copy {
  padding: 44px 0 70px;
}

.tc-eyebrow,
.tc-control-kicker {
  color: var(--blue);
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tc-title {
  max-width: 840px;
  margin: 22px 0 0;
  color: #14191d;
  font-size:
    clamp(
      54px,
      5.65vw,
      82px
    );
  font-weight: 760;
  line-height: .94;
  letter-spacing: -.055em;
}

.tc-title span {
  display: block;
  color: var(--blue);
}

.tc-lead {
  max-width: 670px;
  margin: 30px 0 0;
  color: #65717a;
  font-size: 15px;
  line-height: 1.68;
}

.tc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.tc-actions .btn {
  min-height: 50px;
  padding-left: 20px;
  padding-right: 20px;
}

.tc-hero-note {
  margin-top: 18px;
  color: #90999f;
  font-size: 11px;
  line-height: 1.5;
}


/* CONTROL PANEL */

.tc-control {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(27, 49, 68, .12);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow:
    0 28px 80px
    rgba(31, 49, 64, .08);
  backdrop-filter: blur(16px);
}

.tc-control::after {
  content: "";
  position: absolute;
  top: -130px;
  right: -100px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(48, 92, 255, .11);
  filter: blur(36px);
}

.tc-control-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-bottom: 1px solid var(--border);
}

.tc-control-title {
  margin-top: 7px;
  color: #171d21;
  font-size: 24px;
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.tc-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #68747c;
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.tc-live span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #31cf82;
  box-shadow:
    0 0 0 5px
    rgba(49,207,130,.1);
}

.tc-control-body {
  position: relative;
  z-index: 1;
}

.tc-control-row {
  min-height: 76px;
  display: grid;
  grid-template-columns:
    34px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
}

.tc-control-row:hover {
  background: #f8faff;
}

.tc-index {
  color: #a5aeb5;
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 9px;
}

.tc-control-row strong {
  color: #20282d;
  font-size: 14px;
  font-weight: 650;
}

.tc-status {
  padding: 6px 9px;
  border: 1px solid #dce2e7;
  border-radius: 999px;
  color: #6c777f;
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.tc-control-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  background: #18212b;
}

.tc-control-footer > div {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 14px 17px;
  border-right:
    1px solid
    rgba(255,255,255,.1);
  color: #eef3f6;
  font-size: 10px;
  line-height: 1.35;
}

.tc-control-footer > div:last-child {
  border-right: 0;
}

.tc-control-footer span {
  color: #7897ff;
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 8px;
}


/* PROOF STRIP */

.tc-proof-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--border);
}

.tc-proof-strip > div {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-right: 1px solid var(--border);
  color: #4f5b63;
  font-size: 10px;
  font-weight: 620;
}

.tc-proof-strip > div:last-child {
  border-right: 0;
}

.tc-proof-strip span {
  color: #a0a9af;
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 8px;
}


/* SECTION */

.tc-section {
  padding: 96px 0;
  background: #fff;
}

.tc-section-head {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,420px);
  align-items: end;
  gap: 64px;
  margin-bottom: 48px;
}

.tc-section-head h2 {
  max-width: 760px;
  margin: 15px 0 0;
  color: #151b1f;
  font-size:
    clamp(
      38px,
      4.2vw,
      58px
    );
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.045em;
}

.tc-section-head > p {
  margin: 0;
  color: #748088;
  font-size: 12px;
  line-height: 1.65;
}


/* PAIN CARDS */

.tc-pain-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  gap: 12px;
}

.tc-pain-card {
  min-width: 0;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fafbfc;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.tc-pain-card:hover {
  transform: translateY(-3px);
  border-color: #c3cdd5;
  box-shadow:
    0 18px 36px
    rgba(30, 47, 62, .06);
}

.tc-pain-number {
  color: var(--blue);
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 9px;
  font-weight: 700;
}

.tc-pain-card h3 {
  max-width: 330px;
  margin: 44px 0 0;
  color: #171d21;
  font-size: 25px;
  font-weight: 710;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.tc-pain-card p {
  margin: 18px 0 28px;
  color: #778188;
  font-size: 11px;
  line-height: 1.65;
}

.tc-pain-result {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: #35424a;
  font-size: 10px;
  font-weight: 650;
}


/* RESPONSIVE */

@media (max-width: 980px) {

  .tc-hero {
    padding-top: 46px;
  }

  .tc-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tc-hero-copy {
    padding-bottom: 8px;
  }

  .tc-control {
    max-width: 720px;
  }

  .tc-proof-strip {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .tc-proof-strip > div:nth-child(2) {
    border-right: 0;
  }

  .tc-proof-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  .tc-section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tc-pain-grid {
    grid-template-columns: 1fr;
  }

  .tc-pain-card {
    min-height: 250px;
  }

}


@media (max-width: 620px) {

  .tc-hero {
    padding-top: 24px;
  }

  .tc-title {
    font-size:
      clamp(
        42px,
        13vw,
        58px
      );
  }

  .tc-lead {
    font-size: 13px;
  }

  .tc-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tc-actions .btn {
    width: 100%;
  }

  .tc-control {
    border-radius: 16px;
  }

  .tc-control-head,
  .tc-control-row {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tc-control-footer {
    grid-template-columns: 1fr;
  }

  .tc-control-footer > div {
    min-height: 60px;
    border-right: 0;
    border-bottom:
      1px solid
      rgba(255,255,255,.1);
  }

  .tc-control-footer > div:last-child {
    border-bottom: 0;
  }

  .tc-proof-strip {
    grid-template-columns: 1fr;
  }

  .tc-proof-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .tc-proof-strip > div:last-child {
    border-bottom: 0;
  }

  .tc-section {
    padding: 70px 0;
  }

  .tc-section-head {
    margin-bottom: 32px;
  }

  .tc-section-head h2 {
    font-size: 40px;
  }

  .tc-pain-card {
    padding: 22px;
    border-radius: 14px;
  }

  .tc-pain-card h3 {
    margin-top: 30px;
    font-size: 23px;
  }

}


/* =========================================
   GSP_TECHNICAL_CUSTOMER_HERO_COMPACT_V2
   ========================================= */

@media (min-width: 981px) {

  .tc-hero {
    padding-top:
      34px;
  }


  .tc-hero-grid {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(390px, .95fr);

    gap:
      54px;
  }


  .tc-hero-copy {
    padding:
      28px 0 42px;
  }


  .tc-title {
    max-width:
      760px;

    margin-top:
      18px;

    font-size:
      clamp(
        50px,
        4.6vw,
        68px
      );

    line-height:
      .96;
  }


  .tc-lead {
    max-width:
      650px;

    margin-top:
      22px;

    font-size:
      14px;

    line-height:
      1.58;
  }


  .tc-actions {
    margin-top:
      24px;
  }


  .tc-hero-note {
    margin-top:
      14px;
  }


  .tc-control-head {
    padding:
      22px 24px;
  }


  .tc-control-title {
    font-size:
      22px;
  }


  .tc-control-row {
    min-height:
      62px;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding:
      0 24px;
  }

}


/*
 * Цифровая нумерация была чрезмерной:
 * убираем её из hero и problem cards.
 */

.tc-index,
.tc-pain-number {
  display:
    none;
}


/*
 * Нижние цифровые полосы hero
 * дублировали смысл основного блока.
 */

.tc-control-footer,
.tc-proof-strip {
  display:
    none;
}


.tc-pain-card h3 {
  margin-top:
    14px;
}


/*
 * Второй экран тоже делаем компактнее.
 */

.tc-section {
  padding:
    78px 0;
}


.tc-section-head {
  margin-bottom:
    38px;
}


.tc-pain-card {
  min-height:
    290px;
}


@media (max-width: 620px) {

  .tc-title {
    font-size:
      clamp(
        39px,
        11.5vw,
        52px
      );
  }


  .tc-hero-copy {
    padding:
      14px 0 20px;
  }


  .tc-control-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }


  .tc-section {
    padding:
      60px 0;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_HERO_COMPACT_V2
   ========================================= */

@media (min-width: 981px) {

  .tc-hero {
    padding-top:
      34px;
  }


  .tc-hero-grid {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(390px, .95fr);

    gap:
      54px;
  }


  .tc-hero-copy {
    padding:
      28px 0 42px;
  }


  .tc-title {
    max-width:
      760px;

    margin-top:
      18px;

    font-size:
      clamp(
        50px,
        4.6vw,
        68px
      );

    line-height:
      .96;
  }


  .tc-lead {
    max-width:
      650px;

    margin-top:
      22px;

    font-size:
      14px;

    line-height:
      1.58;
  }


  .tc-actions {
    margin-top:
      24px;
  }


  .tc-hero-note {
    margin-top:
      14px;
  }


  .tc-control-head {
    padding:
      22px 24px;
  }


  .tc-control-title {
    font-size:
      22px;
  }


  .tc-control-row {
    min-height:
      62px;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding:
      0 24px;
  }

}


/*
 * Цифровая нумерация была чрезмерной:
 * убираем её из hero и problem cards.
 */

.tc-index,
.tc-pain-number {
  display:
    none;
}


/*
 * Нижние цифровые полосы hero
 * дублировали смысл основного блока.
 */

.tc-control-footer,
.tc-proof-strip {
  display:
    none;
}


.tc-pain-card h3 {
  margin-top:
    14px;
}


/*
 * Второй экран тоже делаем компактнее.
 */

.tc-section {
  padding:
    78px 0;
}


.tc-section-head {
  margin-bottom:
    38px;
}


.tc-pain-card {
  min-height:
    290px;
}


@media (max-width: 620px) {

  .tc-title {
    font-size:
      clamp(
        39px,
        11.5vw,
        52px
      );
  }


  .tc-hero-copy {
    padding:
      14px 0 20px;
  }


  .tc-control-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }


  .tc-section {
    padding:
      60px 0;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_SCOPE_CSS_V1
   ========================================= */

.tc-scope {
  position: relative;
  padding: 100px 0;
  background: #151d26;
  color: #fff;
}


.tc-scope-layout {
  display: grid;
  grid-template-columns:
    minmax(300px, .72fr)
    minmax(0, 1.28fr);
  gap: 72px;
  align-items: start;
}


.tc-scope-intro {
  position: sticky;
  top: 110px;
}


.tc-scope-intro .tc-eyebrow {
  color: #7c9aff;
}


.tc-scope-intro h2 {
  max-width: 520px;
  margin: 18px 0 0;
  color: #fff;
  font-size:
    clamp(
      40px,
      4.4vw,
      62px
    );
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.05em;
}


.tc-scope-intro > p {
  max-width: 470px;
  margin: 26px 0 0;
  color: #aeb8c0;
  font-size: 13px;
  line-height: 1.7;
}


.tc-scope-cta {
  margin-top: 30px;
}


.tc-scope-board {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  border:
    1px solid
    rgba(255,255,255,.13);
  border-radius:
    28px;
  overflow:
    hidden;
  background:
    rgba(255,255,255,.012);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02);
}


.tc-scope-item {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-right:
    1px solid
    rgba(255,255,255,.13);
  border-bottom:
    1px solid
    rgba(255,255,255,.13);
  background:
    rgba(255,255,255,.018);
  transition:
    background .18s ease;
}


.tc-scope-item:hover {
  background:
    rgba(255,255,255,.045);
}


.tc-scope-meta {
  color: #7895ff;
  font-family:
    "IBM Plex Mono",
    monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
}


.tc-scope-item h3 {
  max-width: 340px;
  margin: 38px 0 0;
  color: #f7f9fb;
  font-size: 24px;
  font-weight: 690;
  line-height: 1.05;
  letter-spacing: -.035em;
}


.tc-scope-item p {
  max-width: 370px;
  margin: 16px 0 0;
  color: #9ca8b1;
  font-size: 11px;
  line-height: 1.68;
}


.tc-scope-item.is-accent {
  position: relative;
  background:
    linear-gradient(
      145deg,
      rgba(54, 91, 255, .24),
      rgba(35, 58, 132, .18)
    );
}


.tc-scope-item.is-accent h3 {
  font-size: 27px;
}


.tc-scope-accent-line {
  position: relative;
  margin-top: auto;
  padding-top: 18px;
  border-top:
    1px solid
    rgba(255,255,255,.16);
  color: #e6ecff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .01em;
}

.tc-scope-accent-line::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: #7c9aff;
  box-shadow:
    0 0 0 4px
    rgba(124,154,255,.10);
  vertical-align: 1px;
}


@media (max-width: 980px) {

  .tc-scope-layout {
    grid-template-columns: 1fr;
    gap: 46px;
  }


  .tc-scope-intro {
    position: static;
  }

}


@media (max-width: 620px) {

  .tc-scope {
    padding: 68px 0;
  }


  .tc-scope-intro h2 {
    font-size: 40px;
  }


  .tc-scope-board {
    grid-template-columns: 1fr;
  }


  .tc-scope-item {
    min-height: 220px;
    padding: 23px;
  }


  .tc-scope-item h3 {
    margin-top: 28px;
    font-size: 22px;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_PROCESS_CSS_V1
   ========================================= */

.tc-process {
  padding:
    100px 0 108px;

  background:
    #f6f8fa;

  border-top:
    1px solid
    var(--border);
}


.tc-process-head {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 410px);

  align-items:
    end;

  gap:
    70px;

  margin-bottom:
    62px;
}


.tc-process-head h2 {
  max-width:
    760px;

  margin:
    16px 0 0;

  color:
    #151b1f;

  font-size:
    clamp(
      40px,
      4.2vw,
      60px
    );

  font-weight:
    750;

  line-height:
    .98;

  letter-spacing:
    -.05em;
}


.tc-process-head > p {
  margin:
    0;

  color:
    #748088;

  font-size:
    12px;

  line-height:
    1.7;
}


/* layout */

.tc-process-layout {
  display:
    grid;

  grid-template-columns:
    minmax(280px, .72fr)
    minmax(0, 1.28fr);

  gap:
    76px;

  align-items:
    start;
}


/* left */

.tc-process-side {
  padding-top:
    4px;
}


.tc-process-side-label,
.tc-process-meta {
  color:
    var(--blue);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.35;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.tc-process-side-title {
  max-width:
    440px;

  margin-top:
    18px;

  color:
    #1b2227;

  font-size:
    30px;

  font-weight:
    710;

  line-height:
    1.04;

  letter-spacing:
    -.04em;
}


.tc-process-side > p {
  max-width:
    430px;

  margin:
    20px 0 0;

  color:
    #77828a;

  font-size:
    12px;

  line-height:
    1.7;
}


.tc-process-side-note {
  max-width:
    430px;

  margin-top:
    32px;

  padding:
    18px 0;

  border-top:
    1px solid
    #d8dee3;

  border-bottom:
    1px solid
    #d8dee3;

  color:
    #3f4b53;

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.55;
}


/* rail */

.tc-process-rail {
  position:
    relative;

  padding-left:
    34px;
}


.tc-process-rail::before {
  content:
    "";

  position:
    absolute;

  top:
    14px;

  bottom:
    14px;

  left:
    7px;

  width:
    1px;

  background:
    #cfd7dd;
}


.tc-process-step {
  position:
    relative;

  min-height:
    148px;

  padding:
    0 0 34px;

  margin-bottom:
    34px;

  border-bottom:
    1px solid
    #dce2e6;
}


.tc-process-step:last-child {
  margin-bottom:
    0;

  padding-bottom:
    0;

  border-bottom:
    0;
}


/* GSP_TC_PROCESS_CENTER_MARKERS_V1 */

.tc-process-marker {
  position:
    absolute;

  top:
    50%;

  left:
    -33px;

  width:
    14px;

  height:
    14px;

  transform:
    translateY(-50%);

  border:
    4px solid
    #f6f8fa;

  border-radius:
    50%;

  background:
    #3157f6;

  box-shadow:
    0 0 0 1px
    rgba(49,87,246,.18);
}


.tc-process-step.is-final
.tc-process-marker {
  background:
    #15202a;

  box-shadow:
    0 0 0 1px
    rgba(21,32,42,.18);
}


.tc-process-step-content h3 {
  max-width:
    620px;

  margin:
    11px 0 0;

  color:
    #1a2126;

  font-size:
    25px;

  font-weight:
    700;

  line-height:
    1.06;

  letter-spacing:
    -.035em;
}


.tc-process-step-content p {
  max-width:
    650px;

  margin:
    13px 0 0;

  color:
    #77828a;

  font-size:
    11px;

  line-height:
    1.7;
}


.tc-process-step.is-final {
  padding:
    27px 30px 30px;

  margin-left:
    -30px;

  border:
    1px solid
    #d5dce2;

  border-radius:
    18px;

  background:
    #fff;

  box-shadow:
    0 14px 36px
    rgba(31,47,59,.055);
}


.tc-process-step.is-final
.tc-process-marker {
  top:
    50%;

  left:
    -4px;

  transform:
    translateY(-50%);
}


@media (max-width: 980px) {

  .tc-process-head {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .tc-process-layout {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }

}


@media (max-width: 620px) {

  .tc-process {
    padding:
      68px 0 74px;
  }


  .tc-process-head {
    margin-bottom:
      44px;
  }


  .tc-process-head h2 {
    font-size:
      40px;
  }


  .tc-process-side-title {
    font-size:
      26px;
  }


  .tc-process-rail {
    padding-left:
      27px;
  }


  .tc-process-rail::before {
    left:
      6px;
  }


  .tc-process-marker {
    left:
      -27px;

    transform:
      translateY(-50%);
  }


  .tc-process-step {
    min-height:
      0;

    margin-bottom:
      28px;

    padding-bottom:
      28px;
  }


  .tc-process-step-content h3 {
    font-size:
      22px;
  }


  .tc-process-step.is-final {
    margin-left:
      -20px;

    padding:
      24px;
  }


  .tc-process-step.is-final
  .tc-process-marker {
    left:
      -4px;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_OUTCOME_CSS_V1
   ========================================= */

.tc-outcome {
  padding:
    108px 0;

  background:
    #ffffff;

  border-top:
    1px solid
    var(--border);
}


.tc-outcome-head {
  max-width:
    1040px;

  margin-bottom:
    58px;
}


.tc-outcome-head h2 {
  max-width:
    940px;

  margin:
    17px 0 0;

  color:
    #151b1f;

  font-size:
    clamp(
      44px,
      5vw,
      70px
    );

  font-weight:
    750;

  line-height:
    .96;

  letter-spacing:
    -.052em;
}


.tc-outcome-head h2 span {
  display:
    block;

  color:
    var(--blue);
}


.tc-outcome-head > p {
  max-width:
    660px;

  margin:
    26px 0 0;

  color:
    #758088;

  font-size:
    13px;

  line-height:
    1.7;
}


/* main surface */

.tc-outcome-surface {
  display:
    grid;

  grid-template-columns:
    minmax(320px, .82fr)
    minmax(0, 1.18fr);

  border:
    1px solid
    #d8dfe4;

  border-radius:
    26px;

  overflow:
    hidden;

  background:
    #f8fafb;
}


/* summary */

.tc-outcome-summary {
  min-height:
    580px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  padding:
    38px;

  border-right:
    1px solid
    #d8dfe4;

  background:
    #17202a;

  color:
    #fff;
}


.tc-outcome-summary-label {
  margin-bottom:
    auto;

  color:
    #7d9aff;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


.tc-outcome-summary-title {
  max-width:
    480px;

  color:
    #f8fafc;

  font-size:
    clamp(
      30px,
      3.2vw,
      44px
    );

  font-weight:
    720;

  line-height:
    1.02;

  letter-spacing:
    -.045em;
}


.tc-outcome-summary-text {
  max-width:
    410px;

  margin-top:
    22px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(255,255,255,.14);

  color:
    #aab5bd;

  font-size:
    11px;

  line-height:
    1.65;
}


/* list */

.tc-outcome-list {
  min-width:
    0;

  background:
    #fff;
}


.tc-outcome-row {
  min-height:
    96px;

  display:
    grid;

  grid-template-columns:
    minmax(210px, .78fr)
    minmax(0, 1.22fr);

  align-items:
    center;

  gap:
    34px;

  padding:
    22px 30px;

  border-bottom:
    1px solid
    #e0e5e9;

  transition:
    background .16s ease;
}


.tc-outcome-row:last-child {
  border-bottom:
    0;
}


.tc-outcome-row:hover {
  background:
    #f8faff;
}


.tc-outcome-name {
  color:
    #1e262b;

  font-size:
    15px;

  font-weight:
    680;

  line-height:
    1.3;
}


.tc-outcome-description {
  max-width:
    470px;

  color:
    #78838b;

  font-size:
    11px;

  line-height:
    1.62;
}


.tc-outcome-row.is-key {
  position:
    relative;

  background:
    #f1f4ff;
}


.tc-outcome-row.is-key::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  bottom:
    0;

  width:
    3px;

  background:
    var(--blue);
}


.tc-outcome-row.is-key
.tc-outcome-name {
  color:
    var(--blue);
}


@media (max-width: 980px) {

  .tc-outcome-surface {
    grid-template-columns:
      1fr;
  }


  .tc-outcome-summary {
    min-height:
      390px;

    border-right:
      0;

    border-bottom:
      1px solid
      #d8dfe4;
  }

}


@media (max-width: 620px) {

  .tc-outcome {
    padding:
      70px 0;
  }


  .tc-outcome-head {
    margin-bottom:
      38px;
  }


  .tc-outcome-head h2 {
    font-size:
      40px;
  }


  .tc-outcome-surface {
    border-radius:
      18px;
  }


  .tc-outcome-summary {
    min-height:
      330px;

    padding:
      26px;
  }


  .tc-outcome-row {
    grid-template-columns:
      1fr;

    gap:
      8px;

    padding:
      22px;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_CLARITY_CSS_V1
   ========================================= */

.tc-clarity {
  padding:
    108px 0;

  background:
    #f5f7f9;

  border-top:
    1px solid
    var(--border);
}


.tc-clarity-layout {
  display:
    grid;

  grid-template-columns:
    minmax(300px, .76fr)
    minmax(0, 1.24fr);

  gap:
    78px;

  align-items:
    start;
}


/* intro */

.tc-clarity-intro {
  padding-top:
    22px;
}


.tc-clarity-intro h2 {
  max-width:
    560px;

  margin:
    18px 0 0;

  color:
    #151b1f;

  font-size:
    clamp(
      42px,
      4.5vw,
      64px
    );

  font-weight:
    750;

  line-height:
    .97;

  letter-spacing:
    -.05em;
}


.tc-clarity-intro > p {
  max-width:
    470px;

  margin:
    26px 0 0;

  color:
    #748088;

  font-size:
    13px;

  line-height:
    1.7;
}


/* sheet */

.tc-clarity-sheet {
  overflow:
    hidden;

  border:
    1px solid
    #d7dee3;

  border-radius:
    24px;

  background:
    #fff;

  box-shadow:
    0 20px 54px
    rgba(31, 48, 61, .05);
}


.tc-clarity-sheet-head {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    0 28px;

  border-bottom:
    1px solid
    #dfe5e9;

  background:
    #f8fafb;

  color:
    #8a959d;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    8px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    .08em;
}


.tc-clarity-row {
  min-height:
    132px;

  display:
    grid;

  grid-template-columns:
    minmax(190px, .72fr)
    minmax(0, 1.28fr);

  align-items:
    center;

  gap:
    40px;

  padding:
    26px 30px;

  border-bottom:
    1px solid
    #e1e6ea;

  transition:
    background .16s ease;
}


.tc-clarity-row:hover {
  background:
    #fafbfc;
}


.tc-clarity-name {
  color:
    #1d252a;

  font-size:
    17px;

  font-weight:
    690;

  line-height:
    1.25;

  letter-spacing:
    -.02em;
}


.tc-clarity-copy {
  max-width:
    470px;

  color:
    #78838b;

  font-size:
    11px;

  line-height:
    1.68;
}


.tc-clarity-row.is-result {
  background:
    #f2f5ff;
}


.tc-clarity-row.is-result
.tc-clarity-name {
  color:
    var(--blue);
}


/* footer */

.tc-clarity-footer {
  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    0 30px;

  background:
    #17202a;

  color:
    #edf2f5;

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.5;
}


.tc-clarity-footer-mark {
  width:
    8px;

  height:
    8px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    #7190ff;

  box-shadow:
    0 0 0 5px
    rgba(113,144,255,.10);
}


@media (max-width: 980px) {

  .tc-clarity-layout {
    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  .tc-clarity-intro {
    padding-top:
      0;
  }

}


@media (max-width: 620px) {

  .tc-clarity {
    padding:
      70px 0;
  }


  .tc-clarity-intro h2 {
    font-size:
      40px;
  }


  .tc-clarity-sheet {
    border-radius:
      18px;
  }


  .tc-clarity-sheet-head {
    padding:
      0 20px;
  }


  .tc-clarity-row {
    min-height:
      0;

    grid-template-columns:
      1fr;

    gap:
      10px;

    padding:
      24px 22px;
  }


  .tc-clarity-footer {
    padding:
      20px 22px;
  }

}



/* =========================================
   GSP_TC_SPACING_TUNE_V1
   ========================================= */

/*
 * Hero: даём первому экрану чуть больше воздуха
 * по нижней части, не раздувая сам заголовок.
 */

@media (min-width: 981px) {

  .tc-hero-copy {
    padding-bottom:
      66px;
  }

}


/*
 * Clarity: увеличиваем расстояние
 * между крупным заголовком и пояснением.
 */

.tc-clarity-intro > p {
  margin-top:
    38px;
}


@media (max-width: 620px) {

  .tc-clarity-intro > p {
    margin-top:
      28px;
  }

}



/* =========================================
   GSP_TC_LAYOUT_FIX_V2
   ========================================= */


/*
 * 1. ОБЛОЖКА
 * Увеличиваем высоту всего hero-блока,
 * а не только внутренний отступ текста.
 */

@media (min-width: 981px) {

  .tc-hero {
    padding-bottom:
      42px;
  }

}


/*
 * 2. БЛОК "ДО СТАРТА"
 * Возвращаем нормальный отступ абзаца.
 * Проблема была не здесь.
 */

.tc-clarity-intro > p {
  margin-top:
    26px;
}


/*
 * Увеличиваем именно расстояние
 * между крупным левым заголовком
 * и таблицей справа.
 */

@media (min-width: 981px) {

  .tc-clarity-layout {
    gap:
      118px;
  }

}


@media (max-width: 620px) {

  .tc-hero {
    padding-bottom:
      22px;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_FAQ_CSS_V1
   ========================================= */

.tc-faq {
  padding:
    108px 0;

  background:
    #fff;

  border-top:
    1px solid
    var(--border);
}


.tc-faq-layout {
  display:
    grid;

  grid-template-columns:
    minmax(300px, .72fr)
    minmax(0, 1.28fr);

  gap:
    92px;

  align-items:
    start;
}


/* intro */

.tc-faq-intro {
  position:
    sticky;

  top:
    110px;
}


.tc-faq-intro h2 {
  max-width:
    520px;

  margin:
    18px 0 0;

  color:
    #151b1f;

  font-size:
    clamp(
      42px,
      4.5vw,
      64px
    );

  font-weight:
    750;

  line-height:
    .97;

  letter-spacing:
    -.05em;
}


.tc-faq-intro > p {
  max-width:
    430px;

  margin:
    28px 0 0;

  color:
    #748088;

  font-size:
    13px;

  line-height:
    1.7;
}


/* list */

.tc-faq-list {
  border-top:
    1px solid
    #dbe1e5;
}


.tc-faq-item {
  border-bottom:
    1px solid
    #dbe1e5;
}


.tc-faq-item summary {
  position:
    relative;

  min-height:
    94px;

  display:
    flex;

  align-items:
    center;

  padding:
    24px 58px 24px 0;

  color:
    #1b2227;

  font-size:
    20px;

  font-weight:
    690;

  line-height:
    1.25;

  letter-spacing:
    -.025em;

  cursor:
    pointer;

  list-style:
    none;
}


.tc-faq-item summary::-webkit-details-marker {
  display:
    none;
}


.tc-faq-item summary::before,
.tc-faq-item summary::after {
  content:
    "";

  position:
    absolute;

  right:
    4px;

  top:
    50%;

  width:
    18px;

  height:
    1px;

  background:
    #7c8790;

  transition:
    transform .18s ease;
}


.tc-faq-item summary::after {
  transform:
    rotate(90deg);
}


.tc-faq-item[open]
summary::after {
  transform:
    rotate(0);
}


.tc-faq-item[open]
summary {
  color:
    var(--blue);
}


.tc-faq-answer {
  overflow:
    hidden;
}


.tc-faq-answer p {
  max-width:
    690px;

  margin:
    -4px 0 30px;

  color:
    #738088;

  font-size:
    12px;

  line-height:
    1.75;
}


@media (max-width: 980px) {

  .tc-faq-layout {
    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  .tc-faq-intro {
    position:
      static;
  }

}


@media (max-width: 620px) {

  .tc-faq {
    padding:
      70px 0;
  }


  .tc-faq-intro h2 {
    font-size:
      40px;
  }


  .tc-faq-item summary {
    min-height:
      82px;

    padding-right:
      42px;

    font-size:
      18px;
  }

}



/* =========================================
   GSP_TECHNICAL_CUSTOMER_FINAL_LEAD_CSS_V1
   ========================================= */

.tc-final {
  padding:
    108px 0;

  background:
    #151d26;

  border-top:
    1px solid
    rgba(255,255,255,.08);
}


.tc-final-shell {
  display:
    grid;

  grid-template-columns:
    minmax(0, .88fr)
    minmax(430px, 1.12fr);

  gap:
    92px;

  align-items:
    start;
}


/* copy */

.tc-final-copy {
  padding-top:
    18px;

  color:
    #fff;
}


.tc-final-kicker {
  color:
    #7897ff;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.tc-final-copy h2 {
  max-width:
    650px;

  margin:
    20px 0 0;

  color:
    #fff;

  font-size:
    clamp(
      46px,
      5vw,
      72px
    );

  font-weight:
    750;

  line-height:
    .96;

  letter-spacing:
    -.052em;
}


.tc-final-copy > p {
  max-width:
    520px;

  margin:
    28px 0 0;

  color:
    #aab5bd;

  font-size:
    13px;

  line-height:
    1.72;
}


.tc-final-points {
  max-width:
    520px;

  display:
    grid;

  gap:
    0;

  margin-top:
    42px;

  border-top:
    1px solid
    rgba(255,255,255,.12);
}


.tc-final-points > div {
  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.12);

  color:
    #dce3e8;

  font-size:
    11px;

  font-weight:
    620;

  line-height:
    1.45;
}


.tc-final-points span {
  width:
    7px;

  height:
    7px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    #7190ff;
}


/* form surface */

.tc-final-form-wrap {
  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:
    26px;

  background:
    #fff;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.16);
}


.tc-final-form-head {
  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    22px 28px;

  border-bottom:
    1px solid
    #dfe4e8;

  background:
    #f7f9fb;
}


.tc-final-form-label {
  color:
    var(--blue);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


.tc-final-form-title {
  margin-top:
    5px;

  color:
    #171e23;

  font-size:
    21px;

  font-weight:
    720;

  letter-spacing:
    -.03em;
}


.tc-final-form-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #7a858d;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    8px;

  text-transform:
    uppercase;
}


.tc-final-form-status span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #34cf84;

  box-shadow:
    0 0 0 5px
    rgba(52,207,132,.10);
}


.tc-final-form {
  width:
    auto;

  max-width:
    none;

  margin:
    0;

  padding:
    28px;
}


/* fixed service */

.tc-final-service {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  min-height:
    58px;

  margin-bottom:
    18px;

  padding:
    0 15px;

  border:
    1px solid
    #dce2e6;

  border-radius:
    8px;

  background:
    #f8fafb;
}


.tc-final-service > span {
  color:
    #858f96;

  font-size:
    10px;

  font-weight:
    620;
}


.tc-final-service > strong {
  color:
    #20282d;

  font-size:
    12px;

  font-weight:
    680;
}


.tc-final-service-hidden {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(0,0,0,0);

  white-space:
    nowrap;

  border:
    0;
}


.tc-final-form
.home-quick-submit {
  width:
    100%;

  min-height:
    52px;
}


@media (max-width: 980px) {

  .tc-final-shell {
    grid-template-columns:
      1fr;

    gap:
      52px;
  }


  .tc-final-form-wrap {
    max-width:
      720px;
  }

}


@media (max-width: 620px) {

  .tc-final {
    padding:
      70px 0;
  }


  .tc-final-copy h2 {
    font-size:
      42px;
  }


  .tc-final-form-wrap {
    border-radius:
      18px;
  }


  .tc-final-form-head {
    min-height:
      82px;

    padding:
      18px 20px;
  }


  .tc-final-form-status {
    display:
      none;
  }


  .tc-final-form {
    padding:
      22px;
  }


  .tc-final-service {
    align-items:
      flex-start;

    flex-direction:
      column;

    justify-content:
      center;

    gap:
      4px;

    padding:
      12px 14px;
  }

}



/* =========================================
   GSP_TC_FINAL_FORM_SPACING_V2
   ========================================= */

.tc-final-form {
  display:
    grid;

  gap:
    20px;
}


/*
 * Убираем старые локальные отступы:
 * расстояние между блоками теперь задаёт
 * только grid-gap формы.
 */

.tc-final-form
> .home-quick-field,

.tc-final-form
> .tc-final-service,

.tc-final-form
> .home-quick-consent,

.tc-final-form
> .home-quick-submit,

.tc-final-form
> .home-quick-message {
  margin-top:
    0;

  margin-bottom:
    0;
}


.tc-final-form
.home-quick-field {
  min-width:
    0;
}


/*
 * Label → input оставляем компактными,
 * а сами поля друг от друга отделяем сильнее.
 */

.tc-final-form
.home-quick-label {
  display:
    block;

  margin-bottom:
    9px;
}


.tc-final-service {
  margin:
    0;
}


.tc-final-form
.home-quick-consent {
  margin-top:
    2px;
}


.tc-final-form
.home-quick-submit {
  margin-top:
    2px;
}


@media (max-width: 620px) {

  .tc-final-form {
    gap:
      17px;
  }

}



/* =========================================
   GSP_TC_FINAL_TYPOGRAPHY_V2
   ========================================= */

@media (min-width: 981px) {

  .tc-final-copy h2 {
    max-width:
      760px;

    font-size:
      clamp(
        46px,
        4.35vw,
        64px
      );

    line-height:
      .97;

    letter-spacing:
      -.045em;
  }


  .tc-final-copy > p {
    max-width:
      640px;

    margin-top:
      30px;

    font-size:
      13px;

    line-height:
      1.68;
  }

}


@media (max-width: 620px) {

  .tc-final-copy h2 {
    font-size:
      40px;
  }

}