/* =========================================================
   RETACH — DIRECT CALC V3
   PHASE 1
========================================================= */

#calc-v3-main{
  --c3-ink:#171720;
  --c3-muted:#697086;
  --c3-line:rgba(105,79,218,.15);

  --c3-violet:#5d45ff;
  --c3-violet2:#8b5bed;
  --c3-pink:#ed5dab;

  --c3-green:#16a34a;
  --c3-red:#dc2626;
  --c3-amber:#a16207;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color:var(--c3-ink);

  background:
    radial-gradient(
      circle at 89% 7%,
      rgba(186,157,255,.28),
      transparent 24%
    ),
    radial-gradient(
      circle at 7% 19%,
      rgba(255,201,235,.26),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #fcfbff 0%,
      #f8f7ff 48%,
      #fff 100%
    );

  overflow:hidden;
}

#calc-v3-main *,
#calc-v3-main *::before,
#calc-v3-main *::after{
  box-sizing:border-box;
}

#calc-v3-main button,
#calc-v3-main input,
#calc-v3-main select{
  font:inherit;
}

.c3-shell{
  width:min(1480px, calc(100% - 64px));
  margin:0 auto;
}

.c3-gradient{
  background:
    linear-gradient(
      95deg,
      #5147ff 0%,
      #8b53ec 45%,
      #ed5dac 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;
}


/* =========================================================
   HERO
========================================================= */

.c3-hero{
  position:relative;

  min-height:760px;

  display:flex;
  align-items:center;

  padding:
    clamp(54px,5vw,82px)
    0
    clamp(62px,5.5vw,92px);

  background:
    radial-gradient(
      circle at 84% 38%,
      rgba(188,154,255,.20),
      transparent 31%
    ),
    radial-gradient(
      circle at 12% 70%,
      rgba(255,208,239,.16),
      transparent 27%
    );
}

.c3-hero__grid{
  display:grid;

  grid-template-columns:
    minmax(0,.90fr)
    minmax(520px,1.10fr);

  gap:
    clamp(24px,3vw,58px);

  align-items:center;
}

.c3-hero__content{
  position:relative;
  z-index:2;

  padding-left:
    clamp(0px,1vw,16px);
}

.c3-eyebrow{
  width:max-content;
  max-width:100%;

  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-bottom:27px;

  padding:10px 18px;

  border-radius:999px;

  border:
    1px solid rgba(103,77,229,.21);

  background:
    rgba(248,245,255,.72);

  color:#6550e5;

  font-size:15px;
  font-weight:750;
}

.c3-eyebrow__icon{
  display:grid;
  place-items:center;

  width:23px;
  height:23px;

  color:#6246f4;

  font-size:18px;
}

.c3-hero h1{
  max-width:690px;

  margin:0;

  color:#111118;

  font-size:
    clamp(50px,4.65vw,76px);

  line-height:1.045;

  letter-spacing:-.047em;

  font-weight:850;
}

.c3-hero h1 span{
  display:block;

  margin:
    .10em 0
    .12em;
}

.c3-hero__lead{
  max-width:620px;

  margin:
    27px 0 0;

  color:#515970;

  font-size:
    clamp(17px,1.18vw,20px);

  line-height:1.58;
}

.c3-flow{
  display:flex;
  align-items:center;

  max-width:630px;

  margin-top:31px;
}

.c3-flow__item{
  display:flex;
  align-items:center;
  gap:10px;

  min-width:0;

  color:#171720;

  font-size:14px;
  font-weight:720;

  line-height:1.15;
}

.c3-flow__icon{
  flex:0 0 44px;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.86);

  border:
    1px solid rgba(102,76,224,.15);

  color:#694ef0;

  box-shadow:
    0 9px 22px rgba(84,55,190,.08);

  font-size:19px;
}

.c3-flow__arrow{
  flex:0 0 50px;

  color:#7458ed;

  text-align:center;

  font-size:26px;
  font-weight:400;
}

.c3-actions{
  display:flex;
  flex-wrap:wrap;

  gap:16px;

  margin-top:35px;
}

.c3-btn{
  min-height:57px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  padding:
    0 26px;

  border-radius:18px;

  font-size:16px;
  font-weight:750;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.c3-btn:hover{
  transform:translateY(-1px);
}

.c3-btn--primary{
  min-width:285px;

  border:0;

  color:#fff;

  background:
    linear-gradient(
      100deg,
      #5646ff 0%,
      #8653ed 51%,
      #ed5ca8 100%
    );

  box-shadow:
    0 16px 34px
    rgba(97,66,237,.22);
}

.c3-btn--secondary{
  min-width:285px;

  color:#6049df;

  background:
    rgba(255,255,255,.54);

  border:
    1px solid rgba(99,73,221,.21);
}

.c3-btn__calc-icon{
  font-size:19px;
}

.c3-btn__arrow{
  margin-left:auto;

  font-size:23px;
  line-height:1;
}

.c3-hero__trust{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;

  margin-top:23px;

  color:#656c80;

  font-size:13px;
  font-weight:550;
}

.c3-hero__trust-icon{
  color:#644bf0;

  font-size:18px;
}

.c3-hero__trust-dot{
  color:#7564c9;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.c3-hero__visual{
  position:relative;

  min-width:0;

  display:flex;
  justify-content:flex-end;
  align-items:center;

  margin:
    -35px
    -34px
    -45px
    -30px;

  pointer-events:none;
}

.c3-hero__visual::before{
  content:"";

  position:absolute;

  width:76%;
  aspect-ratio:1;

  right:5%;
  top:17%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(188,149,255,.21) 0%,
      rgba(226,204,255,.10) 44%,
      transparent 71%
    );

  filter:blur(12px);
}

.c3-hero__visual img{
  position:relative;
  z-index:1;

  display:block;

  width:
    min(100%,730px);

  height:auto;

  object-fit:contain;

  filter:
  
      0 26px 42px
      rgba(88,48,179,.10)
    );
}


/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media (max-width:1280px){

  .c3-hero{
    min-height:auto;
  }

  .c3-hero__grid{
    grid-template-columns:
      minmax(0,.95fr)
      minmax(430px,1.05fr);
  }

  .c3-hero__visual{
    margin:
      -10px
      -35px
      -20px
      -35px;
  }

  .c3-hero__visual img{
    width:min(100%,620px);
  }

}


@media (max-width:980px){

  .c3-hero{
    padding:
      54px 0 65px;
  }

  .c3-hero__grid{
    grid-template-columns:1fr;
  }

  .c3-hero__content{
    padding-left:0;
  }

  .c3-hero h1{
    max-width:720px;
  }

  .c3-hero__visual{
    justify-content:center;

    max-width:670px;

    margin:
      15px auto
      -40px;
  }

  .c3-hero__visual img{
    width:
      min(100%,610px);
  }

}


@media (max-width:640px){

  .c3-hero{
    padding:
      36px 0 52px;
  }

  .c3-eyebrow{
    margin-bottom:20px;

    padding:9px 13px;

    font-size:13px;
  }

  .c3-hero h1{
    font-size:
      clamp(39px,12vw,53px);

    line-height:1.02;
  }

  .c3-
    margin-top:21px;

    font-size:16px;
  }

  .c3-flow{
    display:grid;

    grid-template-columns:
      1fr;

    gap:8px;

    margin-top:25px;
  }

  .c3-flow__arrow{
    width:44px;

    transform:rotate(90deg);

    font-size:19px;
  }

  .c3-actions{
    display:grid;

    grid-template-columns:1fr;

    gap:11px;

    margin-top:27px;
  }

  .c3-btn,
  .c3-btn--primary,
  .c3-btn--secondary{
    width:100%;
    min-width:0;
  }

  .c3-hero__trust{
    margin-top:18px;

    gap:7px;

    font-size:12px;
  }

  .c3-hero__visual{
    width:calc(100% + 18px);

    margin:
      16px -9px
      -25px;
  }

  .c3-hero__visual img{
    width:100%;
  }

}

/* =========================================================
   ECONOMICS
========================================================= */

.c3-economics{
  padding:
    80px 0
    105px;
}

.c3-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:24px;

  margin-bottom:26px;
}

.c3-section-head h2{
  margin:0;

  font-size:
    clamp(31px,3vw,45px);

  line-height:1.05;

  letter-spacing:-.035em;

  font-weight:850;
}

.c3-section-head p{
  margin:9px 0 0;

  color:var(--c3-muted);

  font-size:15px;
}

.c3-mode{
  display:flex;

  padding:4px;

  border-radius:14px;

  background:#f0edff;

  border:
    1px solid rgba(104,74,237,.10);
}

.c3-mode button{
  min-height:40px;

  padding:0 15px;

  border:0;
  border-radius:10px;

  cursor:pointer;

  background:transparent;

  color:#555b70;

  font-size:13px;
  font-weight:700;
}

.c3-mode button.is-active{
  color:#fff;

  background:
    linear-gradient(
      100deg,
      #5d44fa,
      #8158ed
    );
}

.c3-workspace{
  display:grid;

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

  gap:18px;
}

.c3-panel{
  min-w

  border-radius:26px;

  border:
    1px solid rgba(110,89,213,.13);

  background:
    rgba(255,255,255,.86);

  box-shadow:
    0 18px 45px rgba(54,41,108,.07);
}

.c3-input-panel,
.c3-result-panel{
  padding:27px;
}

.c3-panel h3{
  margin:0 0 20px;

  font-size:20px;

  letter-spacing:-.02em;

  font-weight:820;
}

.c3-fields{
  display:grid;

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

  gap:15px;
}

.c3-field label{
  display:block;

  margin-bottom:7px;

  color:#606578;

  font-size:12px;
  line-height:1.3;

  font-weight:700;
}

.c3-control{
  position:relative;
}

.c3-control input{
  width:100%;
  height:50px;

  padding:
    0 55px
    0 14px;

  border-radius:13px;

  border:
    1px solid rgba(105,82,218,.17);

  outline:0;

  background:
    rgba(255,255,255,.88);

  color:#171720;

  font-size:16px;
  font-weight:750;
}

.c3-control input:focus{
  border-color:
    rgba(102,72,235,.60);

  box-shadow:
    0 0 0 4px
    rgba(102,72,235,.08);
}

.c3-unit{
  position:absolute;

  top:50%;
  right:13px;

  transform:translateY(-50%);

  color:#777c8e;

  pointer-events:none;

  font-size:12px;
  font-weight:700;
}

.c3-hint{
  margin-top:7px;

  color:#898e9f;

  font-size:11px;
  line-height:1.4;
}

.c3-note{
  display:flex;
  gap:9px;

  margin-top:19px;

  padding:13px 14px;

  border-radius:14px;

  background:#f8f6ff;

  color:#69677c;

  font-size:12px;
  line-height:1.45;
}


/* =========================================================
   RESULTS
========================================================= */

.c3-status{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:18px;

  margin-bottom:19px;
  padding-bottom:19px;

  border-bottom:
    1px solid rgba(105,87,184,.11);
}

.c3-status__small{
  color:#777d91;

  font-size:12px;
  font-weight:700;
}

.c3-status__title{
  margin-top:5px;

  font-size:
    clamp(25px,2.2vw,33px);

  line-height:1.08;

  letter-spacing:-.035em;

  font-weight:850;
}

.c3-status__title.is-positive{
  color:var(--c3-green);
}

.c3-status__title.is-negative{
  color:var(--c3-red);
}

.c3-status__title.is-neutral{
  color:var(--c3-amber);
}

.c3-status__profit{
  text-align:right;
}

.c3-status__profit small{
  display:block;

  color:#7b8091;

  font-size:11px;
}

.c3-status__profit strong{
  display:block;

  margin-top:4px;

  font-size:22px;
  font-weight:850;
}

.c3-kpis{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));
}

.c3-kpi{
  min-height:112px;

  padding:16px;

  border-right:
    1px solid rgba(110,91,187,.10);

  border-bottom:
    1px solid rgba(110,91,187,.10);
}

.c3-kpi:nth-child(4n){
  border-right:0;
}

.c3-kpi:nth-last-child(-n+4){
  border-bottom:0;
}

.c3-kpi__label{
  min-height:31px;

  color:#6d7284;

  font-size:11px;
  line-height:1.3;

  font-weight:650;
}

.c3-kpi__value{
  margin-top:8px;

  font-size:
    clamp(17px,1.45vw,23px);

  line-height:1;

  letter-spacing:-.025em;

  font-weight:820;
}


/* =========================================================
   BREAK EVEN
========================================================= */

.c3-break{
  margin-top:18px;

  padding:27px;

  border-radius:26px;

  border:
    1px solid rgba(108,82,216,.13);

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 18px 45px rgba(55,42,110,.06);
}

.c3-break h3{
  margin:0;

  font-size:
    clamp(24px,2vw,31px);

  letter-spacing:-.025em;

  font-weight:840;
}

.c3-break__lead{
  margin:7px 0 19px;

  color:#74798b;

  font-size:13px;
}

.c3-break__grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr))
    minmax(230px,.9fr);

  gap:12px;
}

.c3-break-card{
  padding:18px;

  border-radius:18px;

  border:
    1px solid rgba(106,83,206,.11);

  background:#fff;
}

.c3-break-card__label{
  min-height:31px;

  color:#6c7181;

  font-size:11px;
  line-height:1.35;

  font-weight:650;
}

.c3-break-card__value{
  margin-top:8px;

  font-size:
    clamp(21px,2vw,29px);

  line-height:1;

  letter-spacing:-.035em;

  font-weight:850;
}

.c3-break-card__formula{
  margin-top:9px;

  color:#898e9d;

  font-size:11px;
}

.c3-break-card--reserve{
  border:
    1px solid rgba(104,73,227,.25);

  background:
    linear-gradient(
      150deg,
      #faf8ff,
      #f5f0ff
    );
}

.c3-reserve{
  color:var(--c3-green);
}

.c3-reserve.is-negative{
  color:var(--c3-red);
}

.c3-break__note{
  margin-top:12px;

  padding:12px 15px;

  border-radius:13px;

  background:#f1edff;

  color:#625886;

  font-size:12px;
  line-height:1.45;
}


/* =========================================================
   NEXT PHASE
========================================================= */

.c3-next{
  padding:
    0 0 105px;
}

.c3-next__box{
  padding:32px;

  text-align:center;

  border-radius:23px;

  border:
    1px dashed rgba(101,76,219,.24);

  background:
    rgba(255,255,255,.43);

  color:#74798b;
}

.c3-next__box strong{
  display:block;

  margin-bottom:5px;

  color:#393749;

  font-size:18px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1280px){



  .c3-kpis{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .c3-kpi{
    border-right:
      1px solid rgba(110,91,187,.10) !important;

    border-bottom:
      1px solid rgba(110,91,187,.10) !important;
  }

  .c3-kpi:nth-child(2n){
    border-right:0 !important;
  }

  .c3-kpi:nth-last-child(-n+2){
    border-bottom:0 !important;
  }

}


@media (max-width:980px){

  .c3-shell{
    width:min(
      calc(100% - 36px),
      760px
    );
  }




  .c3-workspace{
    grid-template-columns:1fr;
  }

  .c3-section-head{
    display:block;
  }

  .c3-mode{
    width:max-content;
    max-width:100%;

    margin-top:19px;
  }

  .c3-break__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media (max-width:640px){

  .c3-shell{
    width:
      calc(100% - 28px);
  }











  .c3-economics{
    padding:
      55px 0 75px;
  }

  .c3-section-head h2{
    font-size:31px;
  }

  .c3-mode{
    width:100%;
  }

  .c3-mode button{
    flex:1;

    padding:0 8px;

    font-size:11px;
  }

  .c3-input-panel,
  .c3-result-panel,
  .c3-break{
    padding:18px;
  }

  .c3-fields{
    grid-template-columns:1fr;
  }

  .c3-status{
    display:block;
  }

  .c3-status__profit{
    margin-top:14px;
    text-align:left;
  }

  .c3-kpis{
    grid-template-columns:1fr;
  }

  .c3-kpi{
    min-height:auto;

    border-right:0 !important;
    border-bottom:
      1px solid rgba(110,91,187,.10) !important;
  }

  .c3-kpi:last-child{
    border-bottom:0 !important;
  }

  .c3-kpi__label{
    min-height:0;
  }

  .c3-break__grid{
    grid-template-columns:1fr;
  }

  .c3-break-card__label{
    min-height:0;
  }

}

@media (prefers-reduced-motion:reduce){

  #calc-v3-main *,
  #calc-v3-main *::before,
  #calc-v3-main *::after{
    transition:none !important;
    scroll-behavior:auto !important;
  }

}

/* C3 HERO DESKTOP COMPOSITION START */

/*
 * Финальная композиция под референс:
 *
 * Бюджет → Стоимость заявки → Экономика рекламы
 * [Рассчитать бесплатно] [Посмотреть пример]
 * Без регистрации · без телефона · результат сразу
 */

/* Не даём левой колонке становиться слишком узкой */
.c3-hero__grid{
  grid-template-columns:
    minmax(570px,.94fr)
    minmax(0,1.06fr);

  gap:clamp(18px,2vw,34px);
}


/* ---------------------------------------------------------
   СХЕМА — СТРОГО ОДНА СТРОКА
--------------------------------------------------------- */

.c3-flow{
  display:grid;

  grid-template-columns:
    max-content
    38px
    max-content
    38px
    max-content;

  align-items:center;

  gap:0;

  width:max-content;
  max-width:100%;

  margin-top:31px;
}

.c3-flow__item{
  display:flex;

  align-items:center;

  gap:10px;

  min-width:0;

  white-space:nowrap;
}

.c3-flow__item span:last-child{
  white-space:normal;
}

.c3-flow__arrow{
  width:auto;

  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#7257ef;

  font-size:25px;
  line-height:1;

  transform:none;
}


/* ---------------------------------------------------------
   CTA — ДВЕ КНОПКИ В ОДНУ СТРОКУ
--------------------------------------------------------- */

.c3-actions{
  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(0,.92fr);

  gap:14px;

  width:min(100%,610px);

  margin-top:35px;
}

.c3-btn,
.c3-btn--primary,
.c3-btn--secondary{
  width:100%;
  min-width:0;

  padding-left:22px;
  padding-right:20px;
}

.c3-btn--primary{
  white-space:nowrap;
}

.c3-btn--secondary{
  white-space:nowrap;
}


/* ---------------------------------------------------------
   СТРОКА ПОД КНОПКАМИ
--------------------------------------------------------- */

.c3-hero__trust{
  width:min(100%,610px);

  margin-top:20px;

  display:flex;
  align-items:center;
  flex-wrap:nowrap;

  gap:8px;

  white-space:nowrap;
}


/* ---------------------------------------------------------
   TABLET
   Всё ещё сохраняем горизонтальную механику.
--------------------------------------------------------- */

@media (max-width:1180px){

  .c3-hero__grid{
    grid-template-columns:
      minmax(515px,.96fr)
      minmax(0,1.04fr);

    gap:14px;
  }

  .c3-flow{
    grid-template-columns:
      max-content
      28px
      max-content
      28px
      max-content;
  }

  .c3-actions{
    gap:10px;
  }

  .c3-btn{
    padding-left:16px;
    padding-right:15px;

    font-size:14px;
  }

  .c3-hero__trust{
    font-size:12px;
  }

}


/* ---------------------------------------------------------
   Только на настоящей узкой мобильной версии
   перестраиваем интерфейс.
--------------------------------------------------------- */

@media (max-width:700px){

  .c3-hero__grid{
    grid-template-columns:1fr;
  }

  .c3-flow{
    display:grid;

    grid-template-columns:
      1fr;

    width:100%;

    gap:8px;
  }

  .c3-flow__arrow{
    width:44px;

    transform:rotate(90deg);
  }

  .c3-actions{
    grid-template-columns:1fr;

    width:100%;

    gap:11px;
  }

  .c3-btn{
    min-height:54px;

    font-size:16px;
  }

  .c3-hero__trust{
    width:100%;

    flex-wrap:wrap;

    white-space:normal;
  }

}

/* C3 HERO DESKTOP COMPOSITION END */

/* C3 POLISHED ICON SYSTEM START */

.c3-svg-icon{
  display:block;

  width:22px;
  height:22px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.c3-eyebrow__icon .c3-svg-icon{
  width:20px;
  height:20px;
}


/* Белые круглые иконки схемы */
.c3-flow__icon{
  position:relative;

  width:46px;
  height:46px;

  flex:0 0 46px;

  display:grid;
  place-items:center;

  color:#6549f5;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(250,248,255,.92)
    );

  border:
    1px solid rgba(103,76,231,.14);

  box-shadow:
    0 8px 24px rgba(91,62,204,.09),
    inset 0 0 0 1px rgba(255,255,255,.72);
}

.c3-flow__icon::after{
  content:"";

  position:absolute;
  inset:6px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(117,83,255,.08),
      transparent 72%
    );

  pointer-events:none;
}

.c3-flow__icon .c3-svg-icon{
  position:relative;
  z-index:1;

  width:21px;
  height:21px;

  stroke-width:1.9;
}


/* Стрелки между этапами */
.c3-arrow-svg{
  display:block;

  width:25px;
  height:25px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.c3-flow__arrow{
  color:#7559ef;
}

.c3-flow__arrow .c3-arrow-svg{
  width:24px;
  height:24px;
}


/* Иконка калькулятора внутри CTA */
.c3-btn__calc-icon{
  display:grid;
  place-items:center;

  flex:0 0 auto;
}

.c3-btn__calc-icon .c3-svg-icon{
  width:20px;
  height:20px;

  stroke-width:1.9;
}


/* Стрелки CTA */
.c3-btn__arrow{
  display:grid;
  place-items:center;

  margin-left:auto;

  flex:0 0 23px;
}

.c3-btn__arrow .c3-arrow-svg{
  width:22px;
  height:22px;
}


/* Иконка строки доверия */
.c3-hero__trust-icon{
  display:grid;
  place-items:center;

  flex:0 0 22px;

  color:#684df3;
}

.c3-hero__trust-icon .c3-svg-icon{
  width:21px;
  height:21px;

  stroke-width:1.9;
}


/* На мобильном стрелки схемы смотрят вниз */
@media (max-width:700px){

  .c3-flow__arrow .c3-arrow-svg{
    transform:rotate(90deg);
  }

  .c3-flow__arrow{
    transform:none !important;
  }

}

/* C3 POLISHED ICON SYSTEM END */

/* C3 HERO TOP GAP FIX START */

/*
 * Не центрируем левый контент относительно
 * высокой картинки справа.
 * Первый экран начинается сразу после шапки.
 */
.c3-hero{
  padding-top:28px;
}

.c3-hero__grid{
  align-items:start;
}

.c3-hero__content{
  padding-top:0;
}

/* Картинку чуть приподнимаем относительно текста */
.c3-hero__visual{
  margin-top:-24px;
}


/* Планшет */
@media (max-width:1280px){

  .c3-hero{
    padding-top:26px;
  }

  .c3-hero__grid{
    align-items:start;
  }

  .c3-hero__visual{
    margin-top:-18px;
  }

}


/* Телефон */
@media (max-width:700px){

  .c3-hero{
    padding-top:22px;
  }

  .c3-hero__visual{
    margin-top:12px;
  }

}

/* C3 HERO TOP GAP FIX END */

/* C3 HERO SINGLE CTA START */

.c3-actions{
  display:block;

  width:min(100%,340px);

  margin-top:35px;
}

.c3-btn--primary{
  width:100%;
  min-width:0;
}

@media (max-width:700px){

  .c3-actions{
    width:100%;
  }

}

/* C3 HERO SINGLE CTA END */

/* C3 CALCULATOR UI V2 START */

.c3-economics{
  padding-top:62px;
}

.c3-section-head{
  margin-bottom:24px;
}

.c3-section-head h2{
  font-size:clamp(31px,2.7vw,43px);
}

.c3-section-head p{
  color:#747a8e;
}


/* mode */

.c3-mode{
  padding:4px;

  border-radius:12px;

  background:#f1eeff;

  border:
    1px solid rgba(103,78,225,.12);
}

.c3-mode button{
  min-height:40px;

  padding:0 18px;

  border-radius:9px;
}

.c3-mode button.is-active{
  color:#fff;

  background:
    linear-gradient(
      95deg,
      #5b43fb,
      #7c53eb
    );

  box-shadow:
    0 6px 15px rgba(92,65,239,.18);
}


/* stack */

.c3-workspace{
  display:grid;

  grid-template-columns:1fr;

  gap:18px;
}


/* input */

.c3-input-panel{
  padding:30px 34px 22px;

  border-radius:22px;
}

.c3-input-columns{
  display:grid;

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

  gap:0;
}

.c3-input-col{
  min-width:0;

  padding:0 28px;
}

.c3-input-col:first-child{
  padding-left:0;
}

.c3-input-col:last-child{
  padding-right:0;
}

.c3-input-col + .c3-input-col{
  border-left:
    1px solid rgba(111,91,193,.11);
}

.c3-field + .c3-field{
  margin-top:16px;
}

.c3-field label{
  display:block;

  margin-bottom:7px;

  color:#5d6375;

  font-size:12px;
  font-weight:650;
}

.c3-help{
  display:inline-grid;
  place-items:center;

  width:16px;
  height:16px;

  margin-left:3px;

  border-radius:50%;

  color:#fff;
  background:#787d8e;

  font-size:10px;

  cursor:help;
}

.c3-control input{
  width:100%;
  height:52px;

  padding:
    0 58px
    0 14px;

  border-radius:12px;

  border:
    1px solid rgba(98,77,212,.19);

  outline:0;

  background:#fff;

  color:#171720;

  font-size:16px;
  font-weight:700;
}

.c3-control input:focus{
  border-color:
    rgba(99,73,227,.55);

  box-shadow:
    0 0 0 4px rgba(99,73,227,.07);
}

.c3-hint{
  max-width:340px;

  margin-top:9px;

  color:#858a9b;

  font-size:11px;
  line-height:1.4;
}


/* period */

.c3-select-wrap{
  position:relative;
}

.c3-select-wrap select{
  width:100%;
  height:58px;

  appearance:none;
  -webkit-appearance:none;

  padding:
    0 44px
    0 17px;

  border:0;
  border-radius:14px;

  outline:0;

  color:#292934;

  background:
    linear-gradient(
      100deg,
      #f5f2ff,
      #faf8ff
    );

  font-size:14px;
  font-weight:720;

  cursor:pointer;
}

.c3-select-wrap svg{
  position:absolute;

  width:19px;
  height:19px;

  right:15px;
  top:50%;

  transform:translateY(-50%);

  fill:none;

  stroke:#373744;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;

  pointer-events:none;
}


/* bottom form actions */

.c3-form-bottom{
  display:grid;

  grid-template-columns:
    1fr 220px 145px;

  align-items:center;

  gap:15px;

  margin-top:24px;
}

.c3-calculate{
  min-height:48px;

  border:0;
  border-radius:10px;

  color:#fff;

  background:
    linear-gradient(
      95deg,
      #5a43fb,
      #734aed
    );

  box-shadow:
    0 10px 22px rgba(90,64,238,.18);

  cursor:pointer;

  font-size:14px;
  font-weight:750;
}

.c3-reset{
  min-height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  border:0;

  color:#74798b;
  background:transparent;

  cursor:pointer;

  font-size:13px;
  font-weight:650;
}

.c3-reset svg{
  width:17px;
  height:17px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* result */

.c3-result-panel{
  min-height:330px;

  display:grid;

  grid-template-columns:
    minmax(285px,.78fr)
    minmax(0,2.22fr);

  padding:0;

  overflow:hidden;

  border-radius:22px;
}

.c3-status{
  position:relative;

  min-height:330px;

  display:block;

  margin:0;
  padding:30px 30px 24px;

  overflow:hidden;

  border:0;

  background:
    radial-gradient(
      circle at 25% 86%,
      rgba(194,169,255,.22),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #fff,
      #faf8ff
    );
}

.c3-status__content{
  position:relative;
  z-index:2;

  min-height:275px;
}

.c3-status__small{
  color:#24242d;

  font-size:22px;
  font-weight:830;

  letter-spacing:-.025em;
}

.c3-status__title{
  max-width:290px;

  margin-top:3px;

  font-size:clamp(23px,2vw,31px);

  line-height:1.08;
}

.c3-status__copy{
  max-width:260px;

  margin:12px 0 0;

  color:#717789;

  font-size:13px;
  line-height:1.5;
}


/* decorative visual */

.c3-result-decor{
  position:absolute;

  left:-14px;
  right:-10px;
  bottom:-18px;

  height:155px;

  pointer-events:none;
}

.c3-result-ring{
  position:absolute;

  width:215px;
  height:82px;

  left:2px;
  bottom:8px;

  border:
    1px solid rgba(119,90,243,.21);

  border-radius:50%;

  transform:rotate(-10deg);
}

.c3-result-gem{
  position:absolute;

  width:74px;
  height:74px;

  left:136px;
  bottom:49px;

  border-radius:
    28% 45% 31% 49%;

  transform:rotate(24deg);

  background:
    linear-gradient(
      135deg,
      #fff,
      #c0a3ff 44%,
      #7145e2
    );

  box-shadow:
    0 14px 30px rgba(89,53,183,.18);
}

.c3-result-coins{
  position:absolute;

  left:43px;
  bottom:35px;

  width:85px;
  height:49px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#6546e8;

  background:
    linear-gradient(
      180deg,
      #fff,
      #e8deff
    );

  border:
    1px solid rgba(105,77,218,.15);

  box-shadow:
    0 11px 25px rgba(88,55,177,.12);

  font-size:24px;
  font-weight:850
}


/* KPI */

.c3-kpis{
  display:grid;

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

  padding:10px 26px;
}

.c3-kpi{
  min-width:0;
  min-height:100px;

  padding:
    20px 18px 18px;

  border-right:
    1px solid rgba(110,91,187,.10);

  border-bottom:
    1px solid rgba(110,91,187,.10);
}

.c3-kpi:nth-child(3n){
  border-right:0;
}

.c3-kpi:nth-last-child(-n+3){
  border-bottom:0;
}

.c3-kpi__head{
  display:flex;
  align-items:flex-start;

  gap:9px;
}

.c3-kpi__icon{
  flex:0 0 22px;

  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  color:#684cf2;
}

.c3-kpi__icon svg{
  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.c3-kpi__label{
  min-height:29px;

  color:#606678;

  font-size:11px;
  line-height:1.3;

  font-weight:650;
}

.c3-kpi__value{
  margin:
    8px 0 0
    31px;

  font-size:clamp(18px,1.55vw,24px);

  line-height:1;

  font-weight:830;
}

.c3-kpi__sub{
  margin:
    5px 0 0
    31px;

  color:#9296a5;

  font-size:10px;
  line-height:1.35;
}

.c3-kpi.is-positive .c3-kpi__value{
  color:#16a34a;
}

.c3-kpi.is-negative .c3-kpi__value{
  color:#dc2626;
}


/* tablet */

@media (max-width:980px){

  .c3-input-columns{
    grid-template-columns:1fr;
  }

  .c3-input-col{
    padding:20px 0;
  }

  .c3-input-col:first-child{
    padding-top:0;
  }

  .c3-input-col:last-child{
    padding-bottom:0;
  }

  .c3-input-col + .c3-input-col{
    border-left:0;

    border-top:
      1px solid rgba(111,91,193,.11);
  }

  .c3-form-bottom{
    grid-template-columns:
      1fr 190px 130px;
  }

  .c3-result-panel{
    grid-template-columns:1fr;
  }

  .c3-status{
    min-height:230px;
  }

}


/* mobile */

@media (max-width:640px){

  .c3-economics{
    padding-top:48px;
  }

  .c3-section-head h2{
    font-size:30px;
  }

  .c3-input-panel{
    padding:20px 17px;
  }

  .c3-input-col{
    padding:18px 0;
  }

  .c3-form-bottom{
    grid-template-columns:1fr;

    gap:7px;
  }

  .c3-form-bottom > div:first-child{
    display:none;
  }

  .c3-calculate{
    min-height:52px;
  }

  .c3-status{
    min-height:245px;

    padding:24px 20px;
  }

  .c3-status__small{
    font-size:19px;
  }

  .c3-kpis{
    grid-template-columns:1fr;

    padding:8px 18px;
  }

  .c3-kpi{
    min-height:auto;

    padding:16px 4px;

    border-right:0 !important;

    border-bottom:
      1px solid rgba(110,91,187,.10) !important;
  }

  .c3-kpi:last-child{
    border-bottom:0 !important;
  }

  .c3-kpi__label{
    min-height:0;
  }

}

/* C3 CALCULATOR UI V2 END */

/* C3 COMPACT FORM V3 START */

/*
 * Цель:
 * приблизить форму к референсу —
 * меньше высота, плотнее поля,
 * кнопка под средней колонкой,
 * сброс справа.
 */

.c3-input-panel{
  padding:
    24px 30px 18px;

  border-radius:20px;
}


/* ---------------------------------------------------------
   КОЛОНКИ
--------------------------------------------------------- */

.c3-input-columns{
  grid-template-columns:
    repeat(3,minmax(0,1fr));
}

.c3-input-col{
  padding:
    0 26px;
}

.c3-input-col:first-child{
  padding-left:0;
}

.c3-input-col:last-child{
  padding-right:0;
}

.c3-input-col + .c3-input-col{
  border-left:
    1px solid rgba(111,91,193,.11);
}


/* ---------------------------------------------------------
   ПОЛЯ
--------------------------------------------------------- */

.c3-field + .c3-field{
  margin-top:13px;
}

.c3-field label{
  min-height:auto;

  margin-bottom:6px;

  font-size:11px;
  line-height:1.25;

  font-weight:650;
}

.c3-control input{
  height:40px;

  padding:
    0 54px
    0 12px;

  border-radius:9px;

  font-size:14px;
  font-weight:700;
}

.c3-unit{
  right:11px;

  font-size:10px;
}


/* ---------------------------------------------------------
   МАРЖИНАЛЬНОСТЬ / ПОДСКАЗКА
--------------------------------------------------------- */

.c3-help{
  width:14px;
  height:14px;

  font-size:9px;
}

.c3-hint{
  max-width:310px;

  margin-top:7px;

  font-size:10px;
  line-height:1.35;
}


/* ---------------------------------------------------------
   ПЕРИОД
   В референсе он визуально крупнее обычных input.
--------------------------------------------------------- */

.c3-select-wrap select{
  height:58px;

  padding:
    0 40px
    0 14px;

  border-radius:12px;

  font-size:13px;
}

.c3-select-wrap svg{
  width:17px;
  height:17px;

  right:13px;
}


/* ---------------------------------------------------------
   НИЗ ФОРМЫ
   Кнопка — строго под средней колонкой.
   Сброс — справа.
--------------------------------------------------------- */

.c3-form-bottom{
  display:grid;

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

  align-items:center;

  gap:0;

  margin-top:15px;
}

.c3-form-bottom > div:first-child{
  display:block;
}

.c3-calculate{
  justify-self:center;

  width:min(100%,180px);
  min-height:39px;

  border-radius:7px;

  font-size:12px;

  box-shadow:
    0 7px 16px rgba(90,64,238,.16);
}

.c3-reset{
  justify-self:end;

  width:auto;
  min-height:38px;

  padding:0 3px;

  font-size:11px;
}

.c3-reset svg{
  width:15px;
  height:15px;
}


/* ---------------------------------------------------------
   ВЕСЬ БЛОК ЧУТЬ КОМПАКТНЕЕ
--------------------------------------------------------- */

.c3-workspace{
  gap:15px;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width:980px){

  .c3-input-col{
    padding:
      18px 0;
  }

  .c3-form-bottom{
    grid-template-columns:
      1fr 180px 120px;

    gap:12px;
  }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width:640px){

  .c3-input-panel{
    padding:
      18px 16px;
  }

  .c3-field + .c3-field{
    margin-top:14px;
  }

  .c3-control input{
    height:48px;

    font-size:16px;
  }

  .c3-form-bottom{
    grid-template-columns:1fr;

    gap:7px;

    margin-top:18px;
  }

  .c3-form-bottom > div:first-child{
    display:none;
  }

  .c3-calculate{
    width:100%;
    min-height:50px;

    font-size:15px;
  }

  .c3-reset{
    justify-self:center;

    min-height:42px;

    font-size:13px;
  }

}

/* C3 COMPACT FORM V3 END */

/* C3 CURRENT ECONOMICS REAL VISUAL START */


/* Левую часть делаем как в референсе */
.c3-result-panel{
  grid-template-columns:
    minmax(300px,.82fr)
    minmax(0,2.18fr);
}


.c3-status{
  min-height:330px;

  padding:
    28px 28px 20px;

  background:
    radial-gradient(
      circle at 28% 86%,
      rgba(211,192,255,.17),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fbf9ff
    );
}


.c3-status__content{
  position:relative;
  z-index:2;

  min-height:280px;
}


.c3-status__small{
  position:relative;
  z-index:3;
}


.c3-status__title{
  position:relative;
  z-index:3;
}


.c3-status__copy{
  position:relative;
  z-index:3;

  max-width:255px;
}


/* ---------------------------------------------------------
   РЕАЛЬНАЯ КОМПОЗИЦИЯ
--------------------------------------------------------- */

.c3-result-decor{
  position:absolute;

  left:-24px;
  right:-12px;
  bottom:-26px;

  height:205px;

  overflow:visible;

  pointer-events:none;
}


.c3-result-image{
  position:absolute;

  left:-3px;
  bottom:0;

  display:block;

  width:min(118%,355px);
  height:auto;

  object-fit:contain;
  object-position:left bottom;

  filter:
    drop-shadow(
      0 13px 24px
      rgba(87,54,177,.08)
    );
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width:980px){

  .c3-result-panel{
    grid-template-columns:1fr;
  }

  .c3-status{
    min-height:305px;
  }

  .c3-status__content{
    min-height:250px;
  }

  .c3-result-decor{
    left:auto;
    right:0;

    width:340px;
    height:215px;

    bottom:-24px;
  }

  .c3-result-image{
    left:auto;
    right:-20px;

    width:330px;
  }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width:640px){

  .c3-status{
    min-height:330px;

    padding:
      23px 19px 15px;
  }

  .c3-status__copy{
    max-width:235px;
  }

  .c3-result-decor{
    left:-10px;
    right:auto;
    bottom:-15px;

    width:290px;
    height:185px;
  }

  .c3-result-image{
    left:0;
    right:auto;

    width:285px;
  }

}

/* C3 CURRENT ECONOMICS REAL VISUAL END */

/* C3 RESULT NO OVERLAP START */

/*
 * Текст и изображение больше не лежат
 * в одной absolute-зоне.
 *
 * Верх — статус и пояснение.
 * Низ — отдельная зона изображения.
 */

.c3-status{
  padding:
    28px 28px 18px;
}

.c3-status__content{
  display:flex;
  flex-direction:column;

  min-height:284px;
}

.c3-status__small,
.c3-status__title,
.c3-status__copy{
  flex:0 0 auto;
}

.c3-status__copy{
  position:relative;
  z-index:3;

  max-width:255px;

  margin:
    12px 0 0;
}


/* отдельная нижняя зона под картинку */

.c3-result-decor{
  position:relative;

  left:auto;
  right:auto;
  bottom:auto;

  flex:1 1 auto;

  width:auto;
  height:auto;
  min-height:145px;

  margin:
    4px -28px
    -18px -28px;

  overflow:hidden;

  pointer-events:none;
}


/* сама композиция */

.c3-result-image{
  position:absolute;

  left:-4px;
  bottom:-18px;

  width:300px;
  max-width:none;

  height:auto;

  object-fit:contain;
  object-position:left bottom;

  filter:
    drop-shadow(
      0 12px 22px
      rgba(87,54,177,.07)
    );
}


/* планшет */

@media (max-width:980px){

  .c3-status__content{
    min-height:260px;
  }

  .c3-result-decor{
    min-height:150px;

    margin:
      6px -28px
      -18px;
  }

  .c3-result-image{
    left:0;
    right:auto;
    bottom:-18px;

    width:300px;
  }

}


/* мобильный */

@media (max-width:640px){

  .c3-status{
    padding:
      23px 19px 15px;
  }

  .c3-status__content{
    min-height:300px;
  }

  .c3-status__copy{
    max-width:235px;
  }

  .c3-result-decor{
    min-height:170px;

    margin:
      5px -19px
      -15px;
  }

  .c3-result-image{
    left:-3px;
    bottom:-14px;

    width:285px;
  }

}

/* C3 RESULT NO OVERLAP END */

/* C3 FULL RESULT IMAGE START */

/*
 * Полная композиция без crop.
 * Картинка занимает отдельную реальную высоту
 * под текстом, а не вылезает absolute-слоем.
 */

.c3-result-panel{
  min-height:365px;
}

.c3-status{
  min-height:365px;

  overflow:visible;
}

.c3-status__content{
  min-height:310px;

  display:flex;
  flex-direction:column;
}


/* Текст остаётся сверху */

.c3-status__small,
.c3-status__title,
.c3-status__copy{
  flex:0 0 auto;
}


/* Отдельное место для полной картинки */

.c3-result-decor{
  position:relative;

  left:auto;
  right:auto;
  bottom:auto;

  flex:1 0 215px;

  width:calc(100% + 24px);
  height:215px;
  min-height:215px;

  margin:
    5px -12px
    -10px -12px;

  display:flex;
  align-items:flex-end;
  justify-content:flex-start;

  overflow:visible;
}


/* Никакого absolute, bottom:-18px и crop */

.c3-result-image{
  position:relative;

  left:auto;
  right:auto;
  bottom:auto;

  display:block;

  width:300px;
  max-width:100%;

  height:auto;

  object-fit:contain;
  object-position:left bottom;

  flex:0 0 auto;

  filter:
    drop-shadow(
      0 12px 22px
      rgba(87,54,177,.07)
    );
}


/* Планшет */

@media (max-width:980px){

  .c3-result-panel{
    min-height:auto;
  }

  .c3-status{
    min-height:350px;
  }

  .c3-status__content{
    min-height:300px;
  }

  .c3-result-decor{
    flex-basis:205px;

    height:205px;
    min-height:205px;

    width:100%;

    margin:
      7px 0
      -5px;
  }

  .c3-result-image{
    width:290px;
  }

}


/* Телефон */

@media (max-width:640px){

  .c3-status{
    min-height:365px;
  }

  .c3-status__content{
    min-height:315px;
  }

  .c3-result-decor{
    flex-basis:205px;

    height:205px;
    min-height:205px;

    width:100%;

    margin:
      7px 0
      -4px;
  }

  .c3-result-image{
    width:280px;
  }

}

/* C3 FULL RESULT IMAGE END */

/* =========================================================
   C3 DECISION TOOLS V1 START
========================================================= */

.c3-tool-section{
  padding:
    18px 0 42px;
}

.c3-tool-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:24px;

  margin:
    0 0 18px;
}

.c3-tool-head h2{
  margin:0;

  color:#22242d;

  font-size:
    clamp(27px,2.35vw,37px);

  line-height:1.08;

  letter-spacing:-.03em;

  font-weight:840;
}

.c3-tool-head p{
  margin:
    7px 0 0;

  color:#747b90;

  font-size:13px;
  line-height:1.45;
}

.c3-tool-label{
  color:#656b7d;

  font-size:11px;
  line-height:1.3;

  font-weight:650;
}


/* =========================================================
   SCENARIO
========================================================= */

.c3-tool-card{
  overflow:hidden;

  border:
    1px solid rgba(104,83,206,.12);

  border-radius:22px;

  background:
    rgba(255,255,255,.87);

  box-shadow:
    0 17px 42px rgba(58,42,115,.055);
}

.c3-tool-card .c3-tool-head{
  padding:
    24px 25px 0;

  margin-bottom:17px;
}

.c3-scenario-grid{
  display:grid;

  grid-template-columns:
    minmax(180px,.78fr)
    minmax(0,4.22fr);

  min-height:130px;
}

.c3-scenario-budget{
  padding:
    18px 24px 20px;

  border-right:
    1px solid rgba(105,86,186,.10);
}

.c3-scenario-budget__value{
  margin-top:8px;

  color:#1e2028;

  font-size:22px;
  line-height:1;

  font-weight:830;
}

.c3-range{
  --c3-range-progress:25%;

  width:100%;
  height:5px;

  margin-top:24px;

  appearance:none;
  -webkit-appearance:none;

  border-radius:999px;

  outline:0;

  background:
    linear-gradient(
      90deg,
      #6748fb 0%,
      #6748fb var(--c3-range-progress),
      #ddd7ff var(--c3-range-progress),
      #ddd7ff 100%
    );
}

.c3-range::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;

  width:16px;
  height:16px;

  border:3px solid #fff;
  border-radius:50%;

  background:#6548f8;

  box-shadow:
    0 2px 8px rgba(85,56,203,.30);

  cursor:pointer;
}

.c3-range::-moz-range-thumb{
  width:11px;
  height:11px;

  border:3px solid #fff;
  border-radius:50%;

  background:#6548f8;

  box-shadow:
    0 2px 8px rgba(85,56,203,.30);

  cursor:pointer;
}

.c3-scenario-metrics{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));
}

.c3-scenario-metric{
  min-width:0;

  padding:
    18px 16px;

  border-right:
    1px solid rgba(105,86,186,.10);
}

.c3-scenario-metric:last-child{
  border-right:0;
}

.c3-scenario-metric__delta{
  margin-top:8px;

  color:#6548f8;

  font-size:
    clamp(18px,1.45vw,23px);

  font-weight:830;
}

.c3-scenario-metric.is-positive
.c3-scenario-metric__delta{
  color:#16a34a;
}

.c3-scenario-metric__total{
  margin-top:3px;

  color:#818698;

  font-size:10px;
}

.c3-tool-note{
  min-height:34px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:
    8px 16px;

  color:#75718e;

  background:#f4f0ff;

  font-size:10px;
  line-height:1.4;
}

.c3-tool-note__icon{
  flex:0 0 16px;

  width:16px;
  height:16px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(99,73,228,.33);

  border-radius:50%;

  color:#6448ec;

  font-size:9px;
  font-weight:800;
}


/* =========================================================
   LEVERS
========================================================= */

.c3-levers{
  padding-top:6px;
}

.c3-levers-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(215px,.25fr);

  gap:12px;
}

.c3-lever-grid{
  display:grid;

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

  overflow:hidden;

  border:
    1px solid rgba(105,84,202,.11);

  border-radius:18px;

  background:
    rgba(255,255,255,.84);
}

.c3-lever{
  min-width:0;

  padding:
    17px 17px 18px;

  border-right:
    1px solid rgba(105,84,202,.10);
}

.c3-lever:last-child{
  border-right:0;
}

.c3-lever__change{
  margin-top:7px;

  color:#674bfa;

  font-size:12px;
  font-weight:750;
}

.c3-lever__bar{
  height:7px;

  margin-top:17px;

  overflow:hidden;

  border-radius:999px;

  background:#e7e2ff;
}

.c3-lever__bar span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #5942fa,
      #8556ed
    );
}

.c3-lever__effect{
  margin-top:6px;

  text-align:right;

  color:#6347ec;

  font-size:11px;
  font-weight:800;
}

.c3-lever-winner{
  padding:
    18px 18px;

  border:
    1px solid rgba(103,76,231,.27);

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      #fbf9ff,
      #f6f1ff
    );
}

.c3-lever-winner__label{
  color:#6548f0;

  font-size:10px;
  font-weight:700;
}

.c3-lever-winner strong{
  display:block;

  margin-top:5px;

  color:#6546ed;

  font-size:13px;
  line-height:1.35;
}

.c3-lever-winner p{
  margin:
    11px 0 0;

  color:#74798b;

  font-size:10px;
  line-height:1.4;
}


/* =========================================================
   FINANCIAL GOAL
========================================================= */

.c3-goal{
  padding-top:10px;
  padding-bottom:90px;
}

.c3-goal-card{
  display:grid;

  grid-template-columns:
    minmax(185px,.85fr)
    minmax(0,4.15fr);

  overflow:hidden;

  border:
    1px solid rgba(105,84,202,.11);

  border-radius:18px;

  background:
    rgba(255,255,255,.87);
}

.c3-goal-input{
  display:block;

  padding:
    17px 17px;

  border-right:
    1px solid rgba(105,84,202,.10);
}

.c3-goal-input__control{
  position:relative;

  display:block;

  margin-top:7px;
}

.c3-goal-input input{
  width:100%;
  height:40px;

  padding:
    0 35px
    0 10px;

  border:
    1px solid rgba(101,77,213,.17);

  border-radius:9px;

  outline:0;

  background:#fff;

  color:#1d1f27;

  font-size:13px;
  font-weight:750;
}

.c3-goal-input input:focus{
  border-color:
    rgba(99,73,227,.50);

  box-shadow:
    0 0 0 4px rgba(99,73,227,.07);
}

.c3-goal-input__control > span{
  position:absolute;

  right:11px;
  top:50%;

  transform:translateY(-50%);

  color:#787d8e;

  font-size:10px;
}

.c3-goal-metrics{
  display:grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));
}

.c3-goal-metric{
  min-width:0;

  padding:
    17px 15px;

  border-right:
    1px solid rgba(105,84,202,.10);
}

.c3-goal-metric:last-child{
  border-right:0;
}

.c3-goal-metric__value{
  margin-top:7px;

  color:#1e2028;

  font-size:
    clamp(16px,1.35vw,21px);

  font-weight:830;
}

.c3-goal-metric__sub{
  margin-top:4px;

  color:#858a9a;

  font-size:9px;
  line-height:1.35;
}

.c3-goal-metric.is-positive{
  background:
    linear-gradient(
      145deg,
      #fbfff9,
      #effbea
    );
}

.c3-goal-metric.is-positive
.c3-goal-metric__value{
  color:#16a34a;
}

.c3-goal-note{
  min-height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    7px 15px;

  border-radius:
    0 0 14px 14px;

  background:#f5f2ff;

  color:#858097;

  font-size:9px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:980px){

  .c3-scenario-grid,
  .c3-goal-card{
    grid-template-columns:1fr;
  }

  .c3-scenario-budget,
  .c3-goal-input{
    border-right:0;

    border-bottom:
      1px solid rgba(105,86,186,.10);
  }

  .c3-scenario-metrics{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .c3-scenario-metric{
    border-bottom:
      1px solid rgba(105,86,186,.10);
  }

  .c3-levers-layout{
    grid-template-columns:1fr;
  }

  .c3-lever-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .c3-lever:nth-child(2n){
    border-right:0;
  }

  .c3-lever:nth-child(-n+2){
    border-bottom:
      1px solid rgba(105,84,202,.10);
  }

  .c3-goal-metrics{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media (max-width:640px){

  .c3-tool-section{
    padding:
      12px 0 34px;
  }

  .c3-tool-head h2{
    font-size:27px;
  }

  .c3-scenario-metrics,
  .c3-goal-metrics,
  .c3-lever-grid{
    grid-template-columns:1fr;
  }

  .c3-scenario-metric,
  .c3-goal-metric,
  .c3-lever{
    border-right:0 !important;

    border-bottom:
      1px solid rgba(105,86,186,.10);
  }

  .c3-scenario-metric:last-child,
  .c3-goal-metric:last-child,
  .c3-lever:last-child{
    border-bottom:0;
  }

  .c3-goal{
    padding-bottom:65px;
  }

}

/* C3 DECISION TOOLS V1 END */

/* C3 SCENARIO SLIDER FINAL START */

.c3-scenario-budget{
  padding:
    18px 24px 22px;
}

.c3-range{
  --c3-range-progress:25%;

  display:block;

  width:100%;
  height:4px;

  margin:
    22px 0 4px;

  padding:0;

  appearance:none;
  -webkit-appearance:none;

  border:0;
  border-radius:999px;

  outline:none;

  background:
    linear-gradient(
      90deg,
      #6044fa 0%,
      #714cf8 var(--c3-range-progress),
      #dcd6ff var(--c3-range-progress),
      #dcd6ff 100%
    );

  box-shadow:none;

  cursor:pointer;
}


/* Chrome / Яндекс.Браузер / Edge */

.c3-range::-webkit-slider-runnable-track{
  height:4px;

  border:0;
  border-radius:999px;

  background:transparent;
}

.c3-range::-webkit-slider-thumb{
  width:14px;
  height:14px;

  margin-top:-5px;

  appearance:none;
  -webkit-appearance:none;

  border:3px solid #fff;
  border-radius:50%;

  background:#6848f7;

  box-shadow:
    0 1px 4px rgba(79,50,190,.28);

  cursor:grab;
}

.c3-range::-webkit-slider-thumb:active{
  cursor:grabbing;

  transform:scale(1.06);
}


/* Firefox */

.c3-range::-moz-range-track{
  height:4px;

  border:0;
  border-radius:999px;

  background:#dcd6ff;
}

.c3-range::-moz-range-progress{
  height:4px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #6044fa,
      #714cf8
    );
}

.c3-range::-moz-range-thumb{
  width:9px;
  height:9px;

  border:3px solid #fff;
  border-radius:50%;

  background:#6848f7;

  box-shadow:
    0 1px 4px rgba(79,50,190,.28);

  cursor:pointer;
}


/* Focus — без огромного стандартного кольца */

.c3-range:focus-visible{
  outline:none;
}

.c3-range:focus-visible::-webkit-slider-thumb{
  box-shadow:
    0 0 0 3px rgba(103,72,247,.12),
    0 1px 4px rgba(79,50,190,.28);
}


/* На телефоне точка чуть крупнее для пальца */

@media (max-width:640px){

  .c3-range{
    height:5px;

    margin-top:20px;
  }

  .c3-range::-webkit-slider-runnable-track{
    height:5px;
  }

  .c3-range::-webkit-slider-thumb{
    width:18px;
    height:18px;

    margin-top:-6.5px;
  }

}

/* C3 SCENARIO SLIDER FINAL END */

/* C3 DECISION TYPOGRAPHY NORMALIZATION START */

/*
 * Единая типографика для всех блоков после
 * "Сколько вы можете платить за результат".
 *
 * Больше не уменьшаем шрифт от блока к блоку.
 */


/* =========================================================
   ЗАГОЛОВКИ БЛОКОВ
========================================================= */

.c3-tool-head h2{
  font-size:
    clamp(29px,2.4vw,36px);

  line-height:1.08;

  letter-spacing:-.03em;
}

.c3-tool-head p{
  margin-top:8px;

  font-size:15px;
  line-height:1.45;
}


/* =========================================================
   БАЗОВЫЕ ПОДПИСИ
========================================================= */

.c3-tool-label{
  font-size:13px;
  line-height:1.3;

  font-weight:650;
}


/* =========================================================
   СЦЕНАРИЙ
========================================================= */

.c3-scenario-budget__value{
  font-size:24px;
}

.c3-scenario-metric__delta{
  font-size:
    clamp(20px,1.55vw,24px);

  line-height:1.1;
}

.c3-scenario-metric__total{
  margin-top:5px;

  font-size:12px;
  line-height:1.35;
}

.c3-tool-note{
  min-height:40px;

  padding:
    9px 18px;

  font-size:12px;
  line-height:1.4;
}

.c3-tool-note__icon{
  width:18px;
  height:18px;

  flex-basis:18px;

  font-size:11px;
}


/* =========================================================
   РЫЧАГИ ПРИБЫЛИ
========================================================= */

.c3-lever{
  padding:
    18px 18px 19px;
}

.c3-lever .c3-tool-label{
  font-size:13px;
}

.c3-lever__change{
  margin-top:8px;

  font-size:14px;
}

.c3-lever__effect{
  margin-top:7px;

  font-size:13px;
}

.c3-lever-winner{
  padding:
    19px 18px;
}

.c3-lever-winner__label{
  font-size:12px;
}

.c3-lever-winner strong{
  margin-top:7px;

  font-size:16px;
  line-height:1.35;
}

.c3-lever-winner p{
  margin-top:12px;

  font-size:13px;
  line-height:1.45;
}


/* =========================================================
   ФИНАНСОВАЯ ЦЕЛЬ
========================================================= */

.c3-goal-input{
  padding:
    18px 18px;
}

.c3-goal-input input{
  height:44px;

  font-size:15px;
}

.c3-goal-input__control > span{
  font-size:12px;
}

.c3-goal-metric{
  padding:
    18px 16px;
}

.c3-goal-metric .c3-tool-label{
  font-size:13px;
}

.c3-goal-metric__value{
  margin-top:8px;

  font-size:
    clamp(19px,1.45vw,23px);

  line-height:1.1;
}

.c3-goal-metric__sub{
  margin-top:6px;

  font-size:12px;
  line-height:1.35;
}

.c3-goal-note{
  min-height:38px;

  padding:
    9px 17px;

  font-size:12px;
  line-height:1.4;
}


/* =========================================================
   MOBILE
   На телефоне текст НЕ уменьшаем ещё сильнее.
========================================================= */

@media (max-width:640px){

  .c3-tool-head h2{
    font-size:28px;
  }

  .c3-tool-head p{
    font-size:14px;
  }

  .c3-tool-label{
    font-size:13px;
  }

  .c3-scenario-metric__delta{
    font-size:22px;
  }

  .c3-scenario-metric__total,
  .c3-goal-metric__sub,
  .c3-tool-note,
  .c3-goal-note{
    font-size:12px;
  }

  .c3-lever-winner strong{
    font-size:16px;
  }

  .c3-lever-winner p{
    font-size:13px;
  }

  .c3-goal-input input{
    font-size:16px;
  }

}

/* C3 DECISION TYPOGRAPHY NORMALIZATION END */

/* C3 FINANCIAL GOAL V2 START */


/* =========================================================
   SECTION
========================================================= */

.c3-goal-v2{
  padding:
    24px 0
    92px;
}

.c3-goal-v2__layout{
  display:grid;

  grid-template-columns:
    minmax(410px,.84fr)
    minmax(0,1.26fr);

  gap:
    clamp(30px,4vw,56px);

  align-items:start;
}


/* =========================================================
   LEFT — GOAL FORM
========================================================= */

.c3-goal-v2__form{
  min-width:0;

  padding:
    8px 0 0
    12px;
}

.c3-goal-v2__head h2{
  margin:0;

  color:#171923;

  font-size:
    clamp(31px,2.7vw,42px);

  line-height:1.08;

  letter-spacing:-.035em;

  font-weight:850;
}

.c3-goal-v2__head p{
  max-width:610px;

  margin:
    12px 0 0;

  color:#596078;

  font-size:16px;
  line-height:1.55;
}

.c3-goal-v2__fields{
  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(0,.95fr)
    62px;

  gap:18px;

  align-items:end;

  margin-top:28px;
}

.c3-goal-v2__field{
  display:block;

  min-width:0;
}

.c3-goal-v2__field > span{
  display:block;

  margin-bottom:8px;

  color:#565d73;

  font-size:14px;
  line-height:1.3;

  font-weight:650;
}

.c3-goal-v2__control,
.c3-goal-v2__select{
  position:relative;
}

.c3-goal-v2__control input,
.c3-goal-v2__select select{
  width:100%;
  height:52px;

  border:
    1px solid rgba(103,81,211,.19);

  border-radius:11px;

  outline:0;

  color:#171923;

  background:
    rgba(255,255,255,.92);

  font-size:17px;
  font-weight:720;
}

.c3-goal-v2__control input{
  padding:
    0 42px
    0 14px;
}

.c3-goal-v2__control b{
  position:absolute;

  right:14px;
  top:50%;

  transform:translateY(-50%);

  color:#555d72;

  font-size:13px;
}

.c3-goal-v2__select select{
  appearance:none;
  -webkit-appearance:none;

  padding:
    0 44px
    0 14px;

  cursor:pointer;
}

.c3-goal-v2__select svg{
  position:absolute;

  width:19px;
  height:19px;

  right:14px;
  top:50%;

  transform:translateY(-50%);

  fill:none;

  stroke:#252733;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;

  pointer-events:none;
}

.c3-goal-v2__control input:focus,
.c3-goal-v2__select select:focus{
  border-color:
    rgba(99,72,230,.54);

  box-shadow:
    0 0 0 4px
    rgba(99,72,230,.07);
}


/* =========================================================
   ROUND ARROW
========================================================= */

.c3-goal-v2__arrow{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(104,78,226,.15);

  border-radius:50%;

  color:#6247f2;

  background:#fff;

  box-shadow:
    0 10px 25px
    rgba(85,55,191,.08);

  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.c3-goal-v2__arrow:hover{
  transform:translateX(2px);

  box-shadow:
    0 13px 28px
    rgba(85,55,191,.13);
}

.c3-goal-v2__arrow svg{
  width:27px;
  height:27px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   INFO
========================================================= */

.c3-goal-v2__info{
  min-height:52px;

  display:flex;
  align-items:center;
  gap:11px;

  margin-top:20px;

  padding:
    10px 16px;

  border-radius:11px;

  color:#60677d;

  background:
    linear-gradient(
      100deg,
      #f4f0ff,
      #f7f4ff
    );

  font-size:14px;
  line-height:1.4;
}

.c3-goal-v2__info-icon{
  flex:0 0 22px;

  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;
  background:#6950f5;

  font-size:13px;
  font-weight:800;
}


/* =========================================================
   CALCULATE BUTTON
========================================================= */

.c3-goal-v2__calculate{
  width:min(100%,310px);
  min-height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:12px;

  margin:
    28px auto 0;

  border:0;
  border-radius:10px;

  color:#fff;

  background:
    linear-gradient(
      95deg,
      #5942fb,
      #7649ee
    );

  box-shadow:
    0 11px 25px
    rgba(91,63,237,.20);

  cursor:pointer;

  font-size:16px;
  font-weight:750;
}

.c3-goal-v2__calculate svg{
  width:20px;
  height:20px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   RIGHT — RESULT CARD
========================================================= */

.c3-goal-v2__result{
  position:relative;

  min-width:0;

  overflow:visible;

  padding:
    25px 25px 17px;

  border:
    1px solid rgba(106,82,214,.16);

  border-radius:23px;

  background:
    rgba(255,255,255,.90);

  box-shadow:
    0 20px 48px
    rgba(61,43,122,.07);
}

.c3-goal-v2__result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
}

.c3-goal-v2__result-head h3{
  margin:0;

  color:#20222b;

  font-size:21px;
  font-weight:820;

  letter-spacing:-.02em;
}


/* target badge */

.c3-goal-v2__target{
  position:absolute;

  width:92px;
  height:92px;

  right:-15px;
  top:-18px;

  display:grid;
  place-items:center;

  border:
    8px solid rgba(255,255,255,.92);

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #9d86ff,
      #7255f2
    );

  box-shadow:
    0 13px 28px
    rgba(94,63,208,.18);
}

.c3-goal-v2__target svg{
  width:49px;
  height:49px;

  fill:none;

  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   METRICS
========================================================= */

.c3-goal-v2__metrics{
  display:grid;

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

  margin-top:28px;

  border-top:
    1px solid rgba(106,88,183,.09);

  border-bottom:
    1px solid rgba(106,88,183,.09);
}

.c3-goal-v2__metric{
  min-width:0;

  padding:
    20px 17px 18px;

  border-right:
    1px solid rgba(106,88,183,.11);
}

.c3-goal-v2__metric:last-child{
  border-right:0;
}

.c3-goal-v2__metric-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  margin-bottom:15px;

  color:#6548f4;
}

.c3-goal-v2__metric-icon svg{
  width:35px;
  height:35px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.c3-goal-v2__metric-label{
  min-height:38px;

  color:#5d6479;

  font-size:14px;
  line-height:1.35;

  font-weight:600;
}

.c3-goal-v2__metric-value{
  margin-top:9px;

  color:#171923;

  font-size:
    clamp(22px,1.75vw,28px);

  line-height:1;

  font-weight:840;

  letter-spacing:-.02em;
}

.c3-goal-v2__metric-value small{
  margin-left:3px;

  color:#656b7b;

  font-size:12px;
  font-weight:650;
}

.c3-goal-v2__metric.is-positive
.c3-goal-v2__metric-value{
  color:#129b45;
}


/* =========================================================
   SUMMARY
========================================================= */

.c3-goal-v2__summary{
  position:relative;

  min-height:72px;

  display:flex;
  align-items:center;

  margin-top:18px;

  padding:
    14px 18px
    14px 72px;

  border-radius:12px;

  color:#555d75;

  background:
    linear-gradient(
      100deg,
      #f6f2ff,
      #faf8ff
    );

  font-size:14px;
  line-height:1.45;
}

.c3-goal-v2__summary::before{
  content:"↗";

  position:absolute;

  left:17px;
  top:50%;

  transform:translateY(-50%);

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#674bf4;

  background:#fff;

  box-shadow:
    0 6px 15px
    rgba(91,61,190,.08);

  font-size:21px;
  font-weight:750;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.c3-goal-v2__disclaimer{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  margin-top:15px;

  color:#73798d;

  font-size:12px;
  line-height:1.4;
}

.c3-goal-v2__disclaimer > span{
  flex:0 0 18px;

  width:18px;
  height:18px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(99,73,227,.45);

  border-radius:50%;

  color:#6448ee;

  font-size:10px;
  font-weight:800;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

  .c3-goal-v2__layout{
    grid-template-columns:1fr;

    gap:30px;
  }

  .c3-goal-v2__form{
    padding-left:0;
  }

  .c3-goal-v2__result{
    margin-top:5px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

  .c3-goal-v2{
    padding:
      18px 0
      65px;
  }

  .c3-goal-v2__head h2{
    font-size:29px;
  }

  .c3-goal-v2__head p{
    font-size:15px;
  }

  .c3-goal-v2__fields{
    grid-template-columns:1fr;

    gap:15px;
  }

  .c3-goal-v2__field > span{
    font-size:14px;
  }

  .c3-goal-v2__control input,
  .c3-goal-v2__select select{
    height:52px;

    font-size:16px;
  }

  .c3-goal-v2__arrow{
    display:none;
  }

  .c3-goal-v2__calculate{
    width:100%;
  }

  .c3-goal-v2__result{
    padding:
      22px 16px 16px;
  }

  .c3-goal-v2__target{
    width:72px;
    height:72px;

    right:-5px;
    top:-14px;

    border-width:6px;
  }

  .c3-goal-v2__target svg{
    width:38px;
    height:38px;
  }

  .c3-goal-v2__metrics{
    grid-template-columns:1fr;

    margin-top:25px;
  }

  .c3-goal-v2__metric{
    display:grid;

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

    align-items:center;

    gap:10px;

    padding:
      14px 3px;

    border-right:0;

    border-bottom:
      1px solid rgba(106,88,183,.10);
  }

  .c3-goal-v2__metric:last-child{
    border-bottom:0;
  }

  .c3-goal-v2__metric-icon{
    width:40px;
    height:40px;

    margin:0;
  }

  .c3-goal-v2__metric-label{
    min-height:0;

    font-size:14px;
  }

  .c3-goal-v2__metric-value{
    margin:0;

    text-align:right;

    font-size:21px;
  }

  .c3-goal-v2__summary{
    padding:
      14px 14px
      14px 62px;

    font-size:13px;
  }

}

/* C3 FINANCIAL GOAL V2 END */

/* C3 GOAL V2 LAYOUT POLISH START */


/* =========================================================
   ОБЩАЯ ПРОПОРЦИЯ
========================================================= */

.c3-goal-v2__layout{
  grid-template-columns:
    minmax(400px,.72fr)
    minmax(0,1.38fr);

  gap:
    clamp(34px,3.5vw,54px);
}


/* =========================================================
   ПРАВАЯ КАРТОЧКА
========================================================= */

.c3-goal-v2__result{
  padding:
    25px 25px 18px;

  border-radius:22px;
}

.c3-goal-v2__result-head h3{
  font-size:22px;
}


/* =========================================================
   5 КОЛОНОК
   Бюджету и маржинальной прибыли даём больше места.
========================================================= */

.c3-goal-v2__metrics{
  grid-template-columns:
    .82fr
    .82fr
    1.20fr
    1.30fr
    1.08fr;

  margin-top:28px;
}

.c3-goal-v2__metric{
  padding:
    20px 13px 18px;
}

.c3-goal-v2__metric-icon{
  width:38px;
  height:38px;

  margin-bottom:14px;
}

.c3-goal-v2__metric-label{
  min-height:40px;

  font-size:13px;
  line-height:1.3;

  font-weight:620;
}


/* =========================================================
   СУММЫ НЕ ЛОМАЕМ НА ДВЕ СТРОКИ
========================================================= */

.c3-goal-v2__metric-value{
  margin-top:8px;

  font-size:
    clamp(20px,1.55vw,25px);

  line-height:1.08;

  white-space:nowrap;

  letter-spacing:-.025em;
}

.c3-goal-v2__metric-value small{
  display:inline;

  margin-left:3px;

  font-size:12px;

  white-space:nowrap;
}


/* =========================================================
   ИТОГОВАЯ ПЛАШКА
========================================================= */

.c3-goal-v2__summary{
  min-height:76px;

  margin-top:18px;

  padding:
    15px 20px
    15px 72px;

  align-items:center;

  font-size:14px;
  line-height:1.5;

  white-space:normal;
}

.c3-goal-v2__summary strong{
  white-space:nowrap;

  color:#303343;

  font-weight:780;
}

.c3-goal-v2__summary::before{
  left:17px;

  width:40px;
  height:40px;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.c3-goal-v2__disclaimer{
  margin-top:15px;

  padding:0 4px;

  font-size:12px;
  line-height:1.4;
}


/* =========================================================
   ЧУТЬ БОЛЬШЕ ВОЗДУХА МЕЖДУ РЕЗУЛЬТАТАМИ
========================================================= */

.c3-goal-v2__result-head{
  min-height:34px;
}


/* =========================================================
   ПРИ СРЕДНЕЙ ШИРИНЕ
   Не складываем весь блок слишком рано.
========================================================= */

@media (max-width:1180px) and (min-width:981px){

  .c3-goal-v2__layout{
    grid-template-columns:
      minmax(360px,.67fr)
      minmax(0,1.43fr);

    gap:28px;
  }

  .c3-goal-v2__metric{
    padding-left:10px;
    padding-right:10px;
  }

  .c3-goal-v2__metric-label{
    font-size:13px;
  }

  .c3-goal-v2__metric-value{
    font-size:
      clamp(19px,1.65vw,23px);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:980px){

  .c3-goal-v2__layout{
    grid-template-columns:1fr;

    gap:30px;
  }

  .c3-goal-v2__metrics{
    grid-template-columns:
      repeat(5,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

  .c3-goal-v2__metrics{
    grid-template-columns:1fr;
  }

  .c3-goal-v2__metric-value{
    white-space:normal;
  }

  .c3-goal-v2__summary{
    padding:
      14px 14px
      14px 62px;

    font-size:13px;
  }

}

/* C3 GOAL V2 LAYOUT POLISH END */

/* C3 GOAL ICON POLISH START */

/* Правая карточка должна быть точкой привязки */
.c3-goal-v2__result{
  position: relative;
  overflow: visible;
}

/* Круглая иконка цели */
.c3-goal-v2__target-badge,
.c3-goal-v2__badge,
.c3-goal-badge{
  position: absolute;
  top: -22px;
  right: -22px;

  width: 76px;
  height: 76px;

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      180deg,
      #8f79ff 0%,
      #6d4dff 100%
    );

  border: 6px solid #f5f1ff;

  box-shadow:
    0 10px 24px rgba(109, 77, 255, .18),
    0 2px 0 rgba(255,255,255,.7) inset;

  z-index: 3;
}

/* svg / img внутри */
.c3-goal-v2__target-badge svg,
.c3-goal-v2__target-badge img,
.c3-goal-v2__badge svg,
.c3-goal-v2__badge img,
.c3-goal-badge svg,
.c3-goal-badge img{
  width: 34px;
  height: 34px;
  display: block;
}

/* если иконка рисуется псевдоэлементом */
.c3-goal-v2__target-badge::before,
.c3-goal-v2__badge::before,
.c3-goal-badge::before{
  font-size: 34px;
  line-height: 1;
}

/* планшет */
@media (max-width: 980px){
  .c3-goal-v2__target-badge,
  .c3-goal-v2__badge,
  .c3-goal-badge{
    top: -18px;
    right: -18px;
    width: 68px;
    height: 68px;
    border-width: 5px;
  }

  .c3-goal-v2__target-badge svg,
  .c3-goal-v2__target-badge img,
  .c3-goal-v2__badge svg,
  .c3-goal-v2__badge img,
  .c3-goal-badge svg,
  .c3-goal-badge img{
    width: 30px;
    height: 30px;
  }
}

/* мобилка */
@media (max-width: 700px){
  .c3-goal-v2__target-badge,
  .c3-goal-v2__badge,
  .c3-goal-badge{
    top: 16px;
    right: 16px;
    width: 58px;
    height: 58px;
    border-width: 4px;
  }

  .c3-goal-v2__target-badge svg,
  .c3-goal-v2__target-badge img,
  .c3-goal-v2__badge svg,
  .c3-goal-v2__badge img,
  .c3-goal-badge svg,
  .c3-goal-badge img{
    width: 26px;
    height: 26px;
  }
}

/* C3 GOAL ICON POLISH END */

/* C3 REAL GOAL TARGET ICON START */

/*
 * Реальный элемент:
 * .c3-goal-v2__target
 */

.c3-goal-v2__target{
  top:-13px;
  right:-10px;

  width:82px;
  height:82px;

  border-width:7px;

  background:
    linear-gradient(
      145deg,
      #9c86ff 0%,
      #7558f3 55%,
      #6849ef 100%
    );

  box-shadow:
    0 11px 25px rgba(93,62,207,.16),
    0 0 0 1px rgba(111,83,233,.06);
}


/* Сам рисунок цели внутри круга */

.c3-goal-v2__target svg{
  width:42px;
  height:42px;

  stroke-width:1.8;
}


/* Планшет */

@media (max-width:1100px){

  .c3-goal-v2__target{
    top:-12px;
    right:-8px;

    width:76px;
    height:76px;

    border-width:6px;
  }

  .c3-goal-v2__target svg{
    width:38px;
    height:38px;
  }

}


/* Телефон */

@media (max-width:700px){

  .c3-goal-v2__target{
    top:14px;
    right:14px;

    width:62px;
    height:62px;

    border-width:5px;
  }

  .c3-goal-v2__target svg{
    width:31px;
    height:31px;
  }

}

/* C3 REAL GOAL TARGET ICON END */

/* =========================================================
   C3 SCENARIO LAB V1 START
========================================================= */

.c3-slab{
  padding:
    6px 0 82px;
}

.c3-slab__card{
  display:grid;

  grid-template-columns:
    minmax(350px,.86fr)
    minmax(470px,1.42fr)
    minmax(230px,.55fr);

  overflow:hidden;

  border:
    1px solid rgba(104,82,208,.14);

  border-radius:23px;

  background:
    rgba(255,255,255,.90);

  box-shadow:
    0 18px 46px
    rgba(58,42,115,.06);
}


/* LEFT */

.c3-slab__controls{
  padding:
    27px 24px 26px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fbf9ff
    );
}

.c3-slab__head{
  margin-bottom:25px;
}

.c3-slab__head h2{
  margin:0;

  color:#20222b;

  font-size:
    clamp(28px,2.25vw,35px);

  line-height:1.08;

  letter-spacing:-.03em;

  font-weight:850;
}

.c3-slab__head p{
  margin:
    8px 0 0;

  color:#626a80;

  font-size:15px;
  line-height:1.45;
}

.c3-slab__control + .c3-slab__control{
  margin-top:20px;
}

.c3-slab__control-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-bottom:10px;
}

.c3-slab__control-head span{
  color:#535b72;

  font-size:13px;
  line-height:1.3;

  font-weight:630;
}

.c3-slab__control-head strong{
  color:#242630;

  font-size:14px;

  font-weight:770;

  white-space:nowrap;
}

.c3-slab__control-row{
  display:grid;

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

  align-items:center;

  gap:15px;
}

.c3-slab__chip{
  min-height:35px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    0 8px;

  border:
    1px solid rgba(103,80,219,.18);

  border-radius:8px;

  color:#6248ef;

  background:#fff;

  font-size:12px;
  font-weight:730;

  white-space:nowrap;
}


/* RANGES */

.c3-slab__range{
  --slab-progress:25%;

  width:100%;
  height:5px;

  margin:0;
  padding:0;

  appearance:none;
  -webkit-appearance:none;

  border:0;
  border-radius:999px;

  outline:0;

  background:
    linear-gradient(
      90deg,
      #6748fa 0%,
      #7652f7 var(--slab-progress),
      #e4e0f9 var(--slab-progress),
      #e4e0f9 100%
    );

  cursor:pointer;
}

.c3-slab__range::-webkit-slider-runnable-track{
  height:5px;

  background:transparent;
}

.c3-slab__range::-webkit-slider-thumb{
  width:16px;
  height:16px;

  margin-top:-5.5px;

  appearance:none;
  -webkit-appearance:none;

  border:0;
  border-radius:50%;

  background:#6849f8;

  box-shadow:
    0 2px 7px
    rgba(84,55,194,.25);

  cursor:grab;
}

.c3-slab__range::-moz-range-track{
  height:5px;

  border-radius:999px;

  background:#e4e0f9;
}

.c3-slab__range::-moz-range-progress{
  height:5px;

  border-radius:999px;

  background:#6849f8;
}

.c3-slab__range::-moz-range-thumb{
  width:16px;
  height:16px;

  border:0;
  border-radius:50%;

  background:#6849f8;
}


/* TABLE */

.c3-slab__table-wrap{
  min-width:0;

  padding:
    28px 24px 25px;

  border-left:
    1px solid rgba(104,85,190,.10);
}

.c3-slab__table-head,
.c3-slab__row{
  display:grid;

  grid-template-columns:
    minmax(125px,1.15fr)
    minmax(110px,.92fr)
    30px
    minmax(110px,.92fr)
    minmax(110px,.92fr);

  column-gap:9px;

  align-items:center;
}

.c3-slab__table-head{
  min-height:38px;

  color:#656c80;

  text-align:center;

  font-size:12px;
  line-height:1.3;

  font-weight:650;
}

.c3-slab__row{
  min-height:59px;

  border-bottom:
    1px solid rgba(105,86,186,.10);

  color:#20232d;

  font-size:14px;
}

.c3-slab__row:first-child{
  border-top:
    1px solid rgba(105,86,186,.10);
}

.c3-slab__row-label{
  padding-left:15px;

  color:#41485d;

  font-size:13px;
  line-height:1.3;

  font-weight:630;
}

.c3-slab__row-current,
.c3-slab__row-after{
  text-align:center;

  font-weight:720;

  white-space:nowrap;
}

.c3-slab__row-arrow{
  color:#8c92a5;

  text-align:center;

  font-size:20px;
}

.c3-slab__row-change{
  color:#129748;

  text-align:center;

  font-weight:770;

  white-space:nowrap;
}

.c3-slab__row-change.is-negative{
  color:#d44343;
}


/* WINNER */

.c3-slab__winner{
  min-width:0;

  margin:
    21px 20px
    21px 0;

  padding:
    21px 18px;

  border:
    1px solid rgba(104,78,227,.27);

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #fbf9ff,
      #f6f2ff
    );
}

.c3-slab__winner h3{
  margin:0;

  color:#6247f0;

  font-size:18px;
  line-height:1.25;

  font-weight:820;
}

.c3-slab__award{
  width:132px;
  height:144px;

  margin:
    12px auto 1px;
}

.c3-slab__award svg{
  width:100%;
  height:100%;
}

.c3-sla
.c3-slab__award-ribbon,
.c3-slab__award-outer,
.c3-slab__award-inner{
  fill:none;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.c3-slab__award-rays{
  stroke:#b4a2ff;
  stroke-width:5;
}

.c3-slab__award-ribbon{
  stroke:#6849ed;
  stroke-width:9;
}

.c3-slab__award-outer{
  fill:#9983ff;

  stroke:#6546e8;
  stroke-width:5;
}

.c3-slab__award-inner{
  fill:#f3efff;

  stroke:#fff;
  stroke-width:4;
}

.c3-slab__award-star{
  fill:#6646ec;
}

.c3-slab__winner > strong{
  display:block;

  color:#1e2029;

  text-align:center;

  font-size:17px;
  line-height:1.35;

  font-weight:820;
}

.c3-slab__winner > p{
  margin:
    9px 0 0;

  color:#6c7285;

  text-align:center;

  font-size:13px;
  line-height:1.4;
}

.c3-slab__winner-line{
  height:1px;

  margin:
    19px 4px 17px;

  background:
    rgba(103,79,210,.14);
}

.c3-slab__winner-effect{
  color:#6246ed;

  text-align:center;

  font-size:
    clamp(26px,2.15vw,34px);

  line-height:1;

  font-weight:860;

  w
}

.c3-slab__winner small{
  display:block;

  margin-top:7px;

  color:#697085;

  text-align:center;

  font-size:12px;
}


/* NOTE */

.c3-slab__note{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  min-height:40px;

  margin-top:12px;

  padding:
    8px 18px;

  color:#74798d;

  font-size:12px;
  line-height:1.4;
}

.c3-slab__note span{
  flex:0 0 18px;

  width:18px;
  height:18px;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(99,73,227,.42);

  border-radius:50%;

  color:#6549ee;

  font-size:10px;
  font-weight:800;
}


/* RESPONSIVE */

@media (max-width:1180px){

  .c3-slab__card{
    grid-template-columns:
      minmax(310px,.8fr)
      minmax(440px,1.2fr);
  }

  .c3-slab__winner{
    grid-column:
      1 / -1;

    margin:
      0 20px 20px;
  }

}


@media (max-width:820px){

  .c3-slab__card{
    grid-template-columns:1fr;
  }

  .c3-slab__table-wrap{
    border-left:0;

    border-top:
      1px solid rgba(104,85,190,.10);
  }

  .c3-slab__winner{
    grid-column:auto;

    margin:
      0 16px 16px;
  }

}


@media (max-width:640px){

  .c3-slab{
    padding-bottom:60px;
  }

  .c3-slab__controls,
  .c3-slab__table-wrap{
    padding:
      22px 16px;
  }

  .c3-slab__head h2{
    font-size:28px;
  }

  .c3-slab__head p{
    font-size:14px;
  }

  .c3-slab__table-wrap{
    overflow-x:auto;
  }

  .c3-slab__table-head,
  .c3-slab__row{
    min-width:620px;
  }

}

/* C3 SCENARIO LAB V1 END */

/* C3 SCENARIO LAB VISUAL V2 START */


/* =========================================================
   ОБЩАЯ ГЕОМЕТРИЯ — БЛИЖЕ К РЕФЕРЕНСУ
========================================================= */

.c3-slab{
  padding:
    4px 0 72px;
}

.c3-slab__card{
  grid-template-columns:
    minmax(320px,31%)
    minmax(520px,49%)
    minmax(220px,20%);

  align-items:stretch;

  overflow:hidden;

  border-radius:20px;
}


/* =========================================================
   ЛЕВАЯ ЧАСТЬ
========================================================= */

.c3-slab__controls{
  padding:
    25px 24px 23px;
}

.c3-slab__head{
  margin-bottom:23px;
}

.c3-slab__head h2{
  max-width:none;

  margin:0;

  font-size:
    clamp(24px,1.85vw,30px);

  line-height:1.08;

  letter-spacing:-.025em;
}

.c3-slab__head p{
  margin-top:7px;

  font-size:14px;
  line-height:1.42;
}


/* Чуть плотнее сами параметры */

.c3-slab__control + .c3-slab__control{
  margin-top:16px;
}

.c3-slab__control-head{
  margin-bottom:8px;
}

.c3-slab__control-head span{
  font-size:12.5px;
}

.c3-slab__control-head strong{
  font-size:13.5px;
}

.c3-slab__control-row{
  grid-template-columns:
    minmax(0,1fr)
    59px;

  gap:13px;
}

.c3-slab__chip{
  min-height:32px;

  padding:
    0 7px;

  font-size:11.5px;
}


/* Ползунок тоньше, как в референсе */

.c3-slab__range{
  height:4px;
}

.c3-slab__range::-webkit-slider-runnable-track{
  height:4px;
}

.c3-slab__range::-webkit-slider-thumb{
  width:15px;
  height:15px;

  margin-top:-5.5px;
}

.c3-slab__range::-moz-range-track,
.c3-slab__range::-moz-range-progress{
  height:4px;
}

.c3-slab__range::-moz-range-thumb{
  width:15px;
  height:15px;
}


/* =========================================================
   ЦЕНТРАЛЬНАЯ ТАБЛИЦА
========================================================= */

.c3-slab__table-wrap{
  padding:
    25px 20px 21px;
}


/*
 * Отдаём больше ширины колонкам с цифрами,
 * чтобы рубли и штуки не переносились.
 */

.c3-slab__table-head,
.c3-slab__row{
  grid-template-columns:
    minmax(128px,1.05fr)
    minmax(115px,.96fr)
    24px
    minmax(125px,1.02fr)
    minmax(120px,.97fr);

  column-gap:8px;
}

.c3-slab__table-head{
  min-height:34px;

  font-size:11.5px;
  line-height:1.25;
}

.c3-slab__row{
  min-height:54px;

  font-size:13px;
}

.c3-slab__row-label{
  padding-left:13px;

  font-size:12px;
  line-height:1.25;
}

.c3-slab__row-current,
.c3-slab__row-after,
.c3-slab__row-change{
  font-size:13px;
  line-height:1.15;

  white-space:nowrap;
}

.c3-slab__row-arrow{
  font-size:17px;
}


/* =========================================================
   КАРТОЧКА ГЛАВНОГО РЫЧАГА
========================================================= */

.c3-slab__winner{
  margin:
    20px 18px
    20px 0;

  padding:
    20px 16px 18px;

  border-radius:16px;
}

.c3-slab__winner h3{
  font-size:16px;
  line-height:1.2;
}

.c3-slab__award{
  width:112px;
  height:123px;

  margin:
    8px auto 1px;
}

.c3-slab__winner > strong{
  margin-top:1px;

  font-size:15px;
  line-height:1.32;
}

.c3-slab__winner > p{
  margin-top:7px;

  font-size:12px;
  line-height:1.35;
}

.c3-slab__winner-line{
  margin:
    15px 2px 14px;
}

.c3-slab__winner-effect{
  font-size:
    clamp(25px,2vw,31px);
}

.c3-slab__winner small{
  margin-top:6px;

  font-size:11px;
}


/* =========================================================
   ПРИМЕЧАНИЕ
========================================================= */

.c3-slab__note{
  margin-top:8px;

  min-height:34px;

  font-size:11.5px;
}


/* =========================================================
   1280–1440: ОСНОВНОЙ ДЕСКТОПНЫЙ РЕЖИМ
========================================================= */

@media
  (min-width:1181px)
  and (max-width:1450px){

  .c3-slab__card{
    grid-template-columns:
      minmax(320px,30%)
      minmax(500px,50%)
      minmax(210px,20%);
  }

  .c3-slab__controls{
    padding-left:22px;
    padding-right:22px;
  }

  .c3-slab__table-wrap{
    padding-left:18px;
    padding-right:18px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1180px){

  .c3-slab__card{
    grid-template-columns:
      minmax(310px,.72fr)
      minmax(480px,1.28fr);
  }

  .c3-slab__winner{
    grid-column:
      1 / -1;

    margin:
      0 18px 18px;

    min-height:auto;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:820px){

  .c3-slab__card{
    grid-template-columns:1fr;
  }

  .c3-slab__controls{
    padding:
      22px 18px;
  }

  .c3-slab__head h2{
    font-size:27px;
  }

  .c3-slab__table-wrap{
    padding:
      22px 16px;

    overflow-x:auto;
  }

  .c3-slab__winner{
    grid-column:auto;

    margin:
      0 16px 16px;
  }

}


/* C3 SCENARIO LAB VISUAL V2 END */

/* C3 SCENARIO TABLE ALIGN V3 START */


/* =========================================================
   DESKTOP PROPORTIONS
========================================================= */

@media (min-width:1181px){

  .c3-slab__card{
    grid-template-columns:
      minmax(330px,29.5%)
      minmax(560px,51.5%)
      minmax(210px,19%);
  }

}


/* =========================================================
   TABLE — HEADER AND ROWS MUST USE SAME GRID
========================================================= */

.c3-slab__table-head,
.c3-slab__row{
  grid-template-columns:
    minmax(118px,1.05fr)
    minmax(118px,.94fr)
    28px
    minmax(135px,1.08fr)
    minmax(135px,1.08fr) !important;

  column-gap:8px;

  width:100%;
}


/* Every cell stays inside its own grid column */

.c3-slab__table-head > *,
.c3-slab__row > *{
  min-width:0;
}


/* =========================================================
   RESTORE ARROW COLUMN
   It was collapsing, shifting the last two columns left.
========================================================= */

.c3-slab__row-arrow{
  display:flex !important;

  align-items:center;
  justify-content:center;

  width:auto !important;

  color:#969bad;

  font-size:17px;
  line-height:1;
}


/* =========================================================
   HEADER ALIGNMENT
========================================================= */

.c3-slab__table-head > span{
  display:flex;

  align-items:center;
  justify-content:center;

  min-width:0;

  text-align:center;
}

.c3-slab__table-head > span:first-child{
  justify-content:flex-start;
}


/* =========================================================
   VALUES — NEVER THROW ₽ OR units TO NEXT LINE
========================================================= */

.c3-slab__row-current,
.c3-slab__row-after,
.c3-slab__row-change{
  display:flex;

  align-items:center;
  justify-content:center;

  min-width:0;

  white-space:nowrap !important;

  word-break:keep-all !important;

  overflow-wrap:normal !important;

  font-size:13px;
  line-height:1.15;
}


/* The label may use two lines where it makes sense */

.c3-slab__row-label{
  white-space:normal;

  word-break:normal;

  overflow-wrap:normal;
}


/* =========================================================
   GIVE THE TABLE A LITTLE MORE REAL SPACE
========================================================= */

.c3-slab__table-wrap{
  min-width:0;

  padding-left:18px;
  padding-right:18px;
}


/* =========================================================
   TABLET
========================================================= */

@media
  (max-width:1180px)
  and (min-width:821px){

  .c3-slab__table-head,
  .c3-slab__row{
    grid-template-columns:
      minmax(118px,1.05fr)
      minmax(112px,.94fr)
      26px
      minmax(125px,1.06fr)
      minmax(125px,1.06fr) !important;
  }

}


/* C3 SCENARIO TABLE ALIGN V3 END */

/* C3 SCENARIO REAL TABLE V4 START */


/* =========================================================
   MAIN 3-COLUMN PROPORTION
========================================================= */

@media (min-width:1181px){

  .c3-slab__card{
    grid-template-columns:
      minmax(330px,30%)
      minmax(0,51%)
      minmax(215px,19%) !important;
  }

}


/* =========================================================
   REAL TABLE
========================================================= */

.c3-slab__table-wrap{
  min-width:0;

  padding:
    24px 20px 22px !important;

  overflow:visible !important;
}


.c3-slab__real-table{
  width:100%;

  table-layout:fixed;

  border-collapse:separate;
  border-spacing:0;

  color:#262936;
}


.c3-slab__real-table
.c3-slab__col-metric{
  width:24%;
}

.c3-slab__real-table
.c3-slab__col-current{
  width:20%;
}

.c3-slab__real-table
.c3-slab__col-arrow{
  width:6%;
}

.c3-slab__real-table
.c3-slab__col-after{
  width:25%;
}

.c3-slab__real-table
.c3-slab__col-change{
  width:25%;
}


/* =========================================================
   HEADER
========================================================= */

.c3-slab__real-table thead th{
  height:45px;

  padding:
    0 7px 10px;

  border:0;

  color:#676e82;

  font-size:12px;
  line-height:1.25;

  font-weight:680;

  text-align:center;

  vertical-align:bottom;

  white-space:normal;
}


.c3-slab__real-table thead th:first-child{
  text-align:left;
}


/* =========================================================
   ROWS
========================================================= */

/*
 * Old Scenario Lab CSS used display:grid on .c3-slab__row.
 * A real <tr> must explicitly win over those old rules.
 */

.c3-slab__real-table
tr.c3-slab__row{
  display:table-row !important;

  height:58px !important;

  border:0 !important;
}


.c3-slab__real-table
tr.c3-slab__row:first-child,
.c3-slab__real-table
tr.c3-slab__row:last-child{
  border-radius:0 !important;
}


.c3-slab__real-table
tr.c3-slab__row
> th,

.c3-slab__real-table
tr.c3-slab__row
> td{
  display:table-cell !important;

  min-width:0 !important;

  height:58px;

  padding:
    0 7px;

  border:0;
  border-top:
    1px solid rgba(105,86,186,.11);

  vertical-align:middle;

  box-sizing:border-box;
}


.c3-slab__real-table
tr.c3-slab__row:last-child
> th,

.c3-slab__real-table
tr.c3-slab__row:last-child
> td{
  border-bottom:
    1px solid rgba(105,86,186,.11);
}


/* =========================================================
   LABEL
========================================================= */

.c3-slab__real-table
.c3-slab__row-label{
  padding-left:12px !important;

  color:#42495d;

  font-size:13px;
  line-height:1.28;

  font-weight:650;

  text-align:left;

  white-space:normal !important;

  word-break:normal !important;

  overflow-wrap:normal !important;
}


/* =========================================================
   VALUES
========================================================= */

.c3-slab__real-table
.c3-slab__row-current,

.c3-slab__real-table
.c3-slab__row-after,

.c3-slab__real-table
.c3-slab__row-change{
  color:#252834;

  font-size:13.5px;
  line-height:1;

  font-weight:730;

  text-align:center;

  white-space:nowrap !important;

  word-break:keep-all !important;

  overflow-wrap:normal !important;
}


.c3-slab__real-table
.c3-slab__row-change{
  color:#13964a;

  font-weight:780;
}


.c3-slab__real-table
.c3-slab__row-change.is-negative{
  color:#d14343;
}


/* =========================================================
   ARROW
========================================================= */

.c3-slab__real-table
.c3-slab__row-arrow{
  display:table-cell !important;

  color:#9399ad;

  font-size:18px;
  line-height:1;

  font-weight:500;

  text-align:center;

  white-space:nowrap;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.c3-slab__winner{
  overflow:hidden;
}


.c3-slab__award{
  width:
    min(172px,90%);

  height:auto !important;

  margin:
    10px auto 5px !important;
}


.c3-slab__award img{
  display:block;

  width:100%;
  height:auto;

  margin:0 auto;

  object-fit:contain;
}


/* =========================================================
   DESKTOP NARROW
========================================================= */

@media
  (max-width:1280px)
  and (min-width:1181px){

  .c3-slab__real-table thead th{
    padding-left:4px;
    padding-right:4px;

    font-size:11.5px;
  }


  .c3-slab__real-table
  tr.c3-slab__row
  > th,

  .c3-slab__real-table
  tr.c3-slab__row
  > td{
    padding-left:4px;
    padding-right:4px;
  }


  .c3-slab__real-table
  .c3-slab__row-current,

  .c3-slab__real-table
  .c3-slab__row-after,

  .c3-slab__real-table
  .c3-slab__row-change{
    font-size:12.5px;
  }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width:820px){

  .c3-slab__table-wrap{
    overflow-x:auto !important;
  }


  .c3-slab__real-table{
    min-width:690px;
  }

}


/* C3 SCENARIO REAL TABLE V4 END */

/* C3 FINAL CTA V1 START */


.c3-final-cta{
  padding:
    0 0 92px;
}


.c3-final-cta__card{
  position:relative;

  min-height:150px;

  display:grid;

  grid-template-columns:
    190px
    minmax(330px,1.25fr)
    minmax(370px,.95fr)
    250px;

  align-items:center;

  gap:24px;

  overflow:hidden;

  padding:
    22px 26px 22px 18px;

  border:
    1px solid rgba(100,80,190,.14);

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.98),
      rgba(250,248,255,.96)
    );

  box-shadow:
    0 18px 44px
    rgba(65,47,130,.055);
}


/* =========================================================
   CRYSTALS
========================================================= */

.c3-final-cta__visual{
  position:relative;

  align-self:stretch;

  display:flex;
  align-items:flex-end;

  min-width:0;
}


.c3-final-cta__crystals{
  position:absolute;

  left:-7px;
  bottom:-24px;

  width:220px;
  height:auto;

  overflow:visible;

  filter:
    drop-shadow(
      0 14px 18px
      rgba(88,60,210,.15)
    );
}


/* =========================================================
   COPY
========================================================= */

.c3-final-cta__copy{
  min-width:0;
}


.c3-final-cta__copy h2{
  margin:0;

  color:#171922;

  font-size:
    clamp(21px,1.7vw,27px);

  line-height:1.15;

  letter-spacing:-.025em;

  font-weight:850;
}


.c3-final-cta__copy p{
  max-width:520px;

  margin:
    10px 0 0;

  color:#656c80;

  font-size:14px;
  line-height:1.5;
}


/* =========================================================
   BUTTONS
========================================================= */

.c3-final-cta__actions{
  display:grid;

  grid-template-columns:
    minmax(190px,1fr)
    minmax(160px,.78fr);

  gap:13px;

  align-items:center;
}


.c3-final-cta__button{
  min-height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:11px;

  padding:
    0 18px;

  border-radius:10px;

  font-size:13px;
  line-height:1;

  font-weight:750;

  text-decoration:none;

  white-space:nowrap;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.c3-final-cta__button:hover{
  transform:
    translateY(-1px);
}


.c3-final-cta__button svg{
  flex:0 0 19px;

  width:19px;
  height:19px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.c3-final-cta__button--primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #6245f3,
      #7747f7
    );

  box-shadow:
    0 9px 22px
    rgba(95,63,225,.21);
}


.c3-final-cta__button--primary:hover{
  box-shadow:
  
    rgba(95,63,225,.27);
}


.c3-final-cta__button--secondary{
  color:#6648ed;

  border:
    1px solid rgba(104,75,235,.52);

  background:
    rgba(255,255,255,.85);
}


/* =========================================================
   TRUST
========================================================= */

.c3-final-cta__trust{
  min-width:0;

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:9px;
}


.c3-final-cta__avatars{
  display:flex;

  justify-content:center;

  padding-left:18px;
}


.c3-final-cta__avatar{
  position:relative;

  width:48px;
  height:48px;

  margin-left:-12px;

  overflow:hidden;

  border:
    3px solid #fff;

  border-radius:50%;

  background:#f1edff;

  box-shadow:
    0 2px 7px
    rgba(50,37,100,.13);
}


.c3-final-cta__avatar svg{
  display:block;

  width:100%;
  height:100%;
}


.c3-final-cta__rating{
  text-align:center;
}


.c3-final-c
  color:#674af2;

  font-size:13px;

  letter-spacing:2px;

  line-height:1;
}


.c3-final-cta__trust-copy{
  margin-top:5px;

  color:#777d91;

  font-size:10.5px;
  line-height:1.3;

  white-space:nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1180px){

  .c3-final-cta__card{
    grid-template-columns:
      150px
      minmax(300px,1fr)
      minmax(320px,1fr);

    gap:20px;
  }


  .c3-final-cta__trust{
    grid-column:
      2 / -1;

    flex-direction:row;

    justify-content:flex-end;

    padding-top:4px;
  }


  .c3-final-cta__crystals{
    width:190px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:820px){

  .c3-final-cta{
    padding-bottom:64px;
  }


  .c3-final-cta__card{
    grid-template-columns:1fr;

    gap:22px;

    padding:
      26px 20px 24px;
  }


  .c3-final-cta__visual{
    min-height:105px;
  }


  .c3-final-cta__crystals{
    left:50%;
    bottom:-28px;

    width:185px;

    transform:
      translateX(-50%);
  }


  .c3-final-cta__copy{
    text-align:center;
  }


  .c3-final-cta__copy h2{
    font-size:25px;
  }


  .c3-final-cta__copy p{
    margin-left:auto;
    margin-right:auto;

    font-size:14px;
  }


  .c3-final-cta__actions{
    grid-template-columns:1fr;

    width:100%;
  }


  .c3-final-cta__button{
    min-height:52px;
  }


  .c3-final-cta__trust{
    grid-column:auto;

    flex-direction:column;

    justify-content:center;
  }

}


/* C3 FINAL CTA V1 END */

/* C3 FINAL CTA REAL IMAGE V2 START */


/* =========================================================
   REAL USER IMAGE
========================================================= */

.c3-final-cta__visual{
  position:relative;

  align-self:stretch;

  min-width:0;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  overflow:visible;
}


.c3-final-cta__image{
  display:block;

  width:auto;
  height:178px;

  max-width:100%;

  margin:
    0 auto -23px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 14px 19px
      rgba(88,60,210,.14)
    );
}


/*
 * Old generated SVG is gone,
 * but explicitly neutralise its old selector.
 */

.c3-final-cta__crystals{
  display:none !important;
}


/* =========================================================
   CASES COPY
========================================================= */

.c3-final-cta__trust-copy{
  color:#6650dd;

  font-size:12px;

  line-height:1.3;

  font-weight:720;

  white-space:nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1180px){

  .c3-final-cta__image{
    height:160px;

    margin-bottom:-21px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:820px){

  .c3-final-cta__visual{
    min-height:120px;
  }


  .c3-final-cta__image{
    height:155px;

    margin-bottom:-26px;
  }

}


/* C3 FINAL CTA REAL IMAGE V2 END */

/* C3 FINAL CTA IMAGE OUTSIDE V3 START */


/* В референсе изображение выходит за границы карточки */
.c3-final-cta__card{
  overflow:visible !important;
}


/* Левая зона специально разрешает вынос картинки */
.c3-final-cta__visual{
  position:relative;

  overflow:visible !important;

  z-index:2;
}


/* Сама картинка крупнее и выступает наружу */
.c3-final-cta__image{
  position:absolute;

  left:-48px;
  bottom:-42px;

  width:245px;
  height:auto;

  max-width:none !important;

  margin:0 !important;

  object-fit:contain;

  filter:
    drop-shadow(
      0 16px 22px
      rgba(83,55,196,.16)
    );
}


/* Контент остаётся поверх и не конфликтует с изображением */
.c3-final-cta__copy,
.c3-final-cta__actions,
.c3-final-cta__trust{
  position:relative;

  z-index:3;
}


/* Средний десктоп */
@media
  (max-width:1280px)
  and (min-width:821px){

  .c3-final-cta__image{
    left:-36px;
    bottom:-36px;

    width:220px;
  }

}


/* На телефоне вынос оставляем, но мягче */
@media (max-width:820px){

  .c3-final-cta__visual{
    min-height:125px;
  }

  .c3-final-cta__image{
    left:50%;
    bottom:-42px;

    width:205px;

    transform:
      translateX(-50%);
  }

}


/* C3 FINAL CTA IMAGE OUTSIDE V3 END */


/* DIRECT-CALC-V3-GOAL-LARGE-NUMBERS-FIX
   Prevent large financial values from breaking the result grid.
   Keep values readable without changing calculator logic.
*/

.c3-goal-v2__metric {
  min-width: 0;
  container-type: inline-size;
}

.c3-goal-v2__metric-label {
  min-width: 0;
  overflow-wrap: break-word;
}

.c3-goal-v2__metric-value {
  min-width: 0;
  max-width: 100%;

  font-size: clamp(
    17px,
    1.55vw,
    24px
  );

  line-height: 1.08;
  letter-spacing: -0.025em;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}

.c3-goal-v2__metric-value small {
  white-space: nowrap;
}


/*
 * Summary must behave as normal inline text.
 * Otherwise strong fragments can be distributed
 * as separate flex/grid items and visually collide.
 */
.c3-goal-v2__summary {
  display: block !important;

  min-width: 0;

  white-space: normal !important;
  word-spacing: normal;

  line-height: 1.45;
}

.c3-goal-v2__summary strong {
  display: inline !important;
  white-space: nowrap;
}


/*
 * Desktop result card:
 * minmax(0, 1fr) is important here.
 * Plain 1fr allows long content to enlarge a column.
 */
@media (min-width: 901px) {

  .c3-goal-v2__metrics {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }

}


/*
 * Container-relative fallback for especially
 * narrow metric cells.
 */
@supports (font-size: 1cqi) {

  .c3-goal-v2__metric-value {
    font-size: clamp(
      16px,
      12.5cqi,
      24px
    );
  }

}



/* DIRECT-CALC-V3-LEVER-DETAILS-BELOW */

#c3Levers .c3-lever-details {
  width: 100%;

  margin-top: 18px;

  border:
    1px solid
    rgba(91, 70, 255, 0.16);

  border-radius: 18px;

  background:
    rgba(248, 246, 255, 0.78);

  overflow: hidden;
}

#c3Levers .c3-lever-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  width: 100%;

  padding:
    17px
    20px;

  box-sizing: border-box;

  cursor: pointer;
  list-style: none;
  user-select: none;

  font-weight: 700;
  line-height: 1.3;
}

#c3Levers
.c3-lever-details__summary::-webkit-details-marker {
  display: none;
}

#c3Levers .c3-lever-details__icon {
  position: relative;

  flex: 0 0 auto;

  width: 30px;
  height: 30px;

  border:
    1px solid
    rgba(91, 70, 255, 0.24);

  border-radius: 50%;
}

#c3Levers .c3-lever-details__icon::before,
#c3Levers .c3-lever-details__icon::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 12px;
  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transform:
    translate(-50%, -50%);
}

#c3Levers .c3-lever-details__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

#c3Levers
.c3-lever-details[open]
.c3-lever-details__icon::after {
  display: none;
}

#c3Levers
.c3-lever-details[open]
.c3-lever-details__summary {
  border-bottom:
    1px solid
    rgba(91, 70, 255, 0.12);
}

#c3Levers .c3-lever-details__body {
  padding:
    20px
    22px
    22px;

  line-height: 1.55;
}

#c3Levers .c3-lever-details__body p {
  margin:
    0
    0
    14px;
}

#c3Levers .c3-lever-details__body p:last-child {
  margin-bottom: 0;
}

#c3Levers .c3-lever-details__note {
  opacity: 0.72;

  font-size: 0.92em;
}


@media (max-width: 700px) {

  #c3Levers .c3-lever-details {
    margin-top: 14px;

    border-radius: 16px;
  }

  #c3Levers .c3-lever-details__summary {
    padding:
      15px
      16px;

    font-size: 14px;
  }

  #c3Levers .c3-lever-details__body {
    padding:
      17px
      16px
      18px;
  }

}