/* ==========================================================================
   Afterclick — pages Ressources et calculateurs A/B
   S'appuie sur les tokens et composants de style.css
   ========================================================================== */

.header__nav a.is-active{color:var(--brand-500)}

/* ------------------------------- En-tête d'outil ----------------------------- */
.tool-hero{position:relative;padding:64px 0 56px;background:var(--bg-page)}
.tool-hero__inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.tool-hero--center .tool-hero__inner{align-items:center;text-align:center}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--text-muted)}
.crumbs a{color:var(--text-body);transition:color .15s ease}
.crumbs a:hover{color:var(--brand-500)}
.crumbs span[aria-hidden]{color:#c5ccd6}
.tool-title{font-size:52px;line-height:1.1;letter-spacing:-1.4px;font-weight:800;max-width:860px}
.tool-hero .lead{max-width:760px}

/* --------------------------------- Section outil ----------------------------- */
.tool-section{position:relative;padding:56px 0 104px;background:var(--bg-soft)}
.calc{display:grid;grid-template-columns:400px minmax(0,1fr);gap:30px;align-items:start}

.calc-card{
  position:sticky;top:112px;
  display:flex;flex-direction:column;gap:26px;
  padding:28px;border-radius:20px;
  background:var(--bg-page);border:1px solid var(--border-rule);
  box-shadow:0 10px 24px -6px rgba(31,41,61,.05);
}
.calc-group{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;border:0;min-width:0}
.calc-group__title{
  padding:0;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--brand-500);margin-bottom:14px;
}
.calc-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field__label{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink-900)}
.field__input{position:relative}
.field input{
  width:100%;height:48px;padding:0 14px;
  font:inherit;font-size:16px;font-weight:600;color:var(--ink-900);
  background:var(--bg-page);border:1px solid var(--border-rule);border-radius:12px;
  transition:border-color .15s ease,box-shadow .15s ease;
  -moz-appearance:textfield;
}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-50)}
.field__suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:600;color:var(--text-muted);pointer-events:none}
.field__input--suffix input{padding-right:40px}
.field__hint{font-size:13px;line-height:1.45;color:var(--text-muted);min-height:1em}
.field__hint strong{color:var(--brand-500);font-weight:700}

/* Info-bulles */
.field{position:relative}
.field__label{display:inline-flex;align-items:center;gap:7px}
.tip{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;border-radius:50%;flex:none;
  background:var(--brand-50);border:1px solid var(--brand-100);cursor:help;
  transition:background .15s ease,border-color .15s ease;
}
.tip__icon{font-size:11px;font-weight:800;line-height:1;color:var(--brand-500);font-style:normal}
.tip:hover,.tip:focus-visible,.tip.is-open{background:var(--brand-500);border-color:var(--brand-500);outline:none}
.tip:hover .tip__icon,.tip:focus-visible .tip__icon,.tip.is-open .tip__icon{color:#fff}
.tip__bubble{
  position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:20;
  padding:12px 14px;border-radius:12px;
  background:var(--ink-900);color:#fff;
  font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0;text-align:left;text-transform:none;
  box-shadow:0 14px 30px -10px rgba(21,34,56,.45);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
  pointer-events:none;
}
.tip__bubble::after{
  content:"";position:absolute;top:100%;left:var(--ax,20px);margin-left:-7px;
  border:7px solid transparent;border-top-color:var(--ink-900);
}
.tip:hover .tip__bubble,.tip:focus-visible .tip__bubble,.tip.is-open .tip__bubble{
  opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease;
}

/* Contrôle segmenté */
.seg{display:flex;gap:4px;padding:4px;background:var(--bg-soft);border:1px solid var(--border-rule);border-radius:12px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{
  display:flex;align-items:center;justify-content:center;height:36px;padding:0 8px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--text-body);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.seg span:hover{color:var(--ink-900)}
.seg input:checked+span{background:var(--bg-page);color:var(--brand-500);box-shadow:0 2px 6px -2px rgba(31,41,61,.18)}
.seg input:focus-visible+span{box-shadow:0 0 0 3px var(--brand-100)}

.calc-error{
  margin:0;padding:12px 14px;border-radius:12px;
  background:#fff1ec;color:#a02c00;font-size:14px;line-height:1.5;
}

/* -------------------------------- Résultats ---------------------------------- */
.calc-results{
  display:flex;flex-direction:column;gap:22px;min-width:0;
  padding:30px;border-radius:26px;color:var(--on-dark);
  background:linear-gradient(134.87deg,#17212e 0%,#0e1724 34.615%,#0a121c 76.923%);
  box-shadow:0 24px 60px -12px rgba(13,23,38,.28);
  transition:opacity .2s ease;
}
.calc.is-invalid .calc-results{opacity:.35;pointer-events:none}

.verdict{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.verdict__badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;border-radius:999px;
  font-size:14px;font-weight:700;line-height:1.2;
  background:rgba(255,255,255,.08);color:var(--on-dark-mute);
}
.verdict__badge::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.verdict--good .verdict__badge{background:#c9f5dc;color:#0c5132}
.verdict--warn .verdict__badge{background:#ffe8c2;color:#7a4700}
.verdict--bad .verdict__badge{background:#ffd9cf;color:#9a2400}
.verdict__text{font-size:19px;font-weight:600;line-height:1.45;letter-spacing:-.1px;color:var(--on-dark)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpis--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:16px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--border-dark);
}
.kpi__label{font-size:13px;line-height:1.35;color:var(--on-dark-mute)}
.kpi__value{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.6px;color:var(--on-dark)}
.kpi__value.is-up{color:#4ade80}
.kpi__value.is-down{color:#ff7a59}
.kpi__sub{font-size:12.5px;line-height:1.4;color:var(--on-dark-mute)}
.kpi--main{background:rgba(253,69,0,.12);border-color:rgba(253,69,0,.35)}
.kpi--main .kpi__value{color:#ff8a5c}
.kpi--main .kpi__value.is-up{color:#4ade80}
.kpi--main .kpi__value.is-down{color:#ff7a59}
/* Calculateur de profit : le profit par visiteur se lit en vert */
.calc[data-tool="profit"] .kpi--main{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.38)}
.calc[data-tool="profit"] .kpi--main .kpi__value{color:#4ade80}
.calc[data-tool="profit"] .kpi--main .kpi__value.is-down{color:#ff7a59}
.calc[data-tool="profit"] #sim-u{color:#4ade80}
.calc[data-tool="profit"] .kpi__sub{margin-top:4px;font-size:12.5px;color:#9aa7b8}
.calc[data-tool="profit"] .cmp-note{margin-top:14px;font-size:14px;line-height:1.5;color:#e7ecf2}

.panel-block{
  display:flex;flex-direction:column;gap:14px;
  padding:20px;border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid var(--border-dark);
}
.panel-block__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.panel-block__title{font-size:16px;font-weight:700;line-height:1.35;color:var(--on-dark)}
.panel-block__text{font-size:15px;line-height:1.6;color:#c8d1dd}
.legend{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--on-dark-mute)}
.legend__line{width:18px;border-top:2px dashed #ff8a5c}
.legend__dot{width:10px;height:10px;border-radius:3px;background:#4ade80}

/* Graphique MDE */
.mde{position:relative;display:flex;flex-direction:column;gap:9px}
.mde__row{display:grid;grid-template-columns:58px minmax(0,1fr) 108px;align-items:center;gap:12px}
.mde__label{font-size:13px;font-weight:600;color:var(--on-dark-mute)}
.mde__track{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.mde__fill{position:absolute;inset:0 auto 0 0;border-radius:6px;background:#3a4a60;transition:width .35s ease}
.mde__row.is-ok .mde__fill{background:#4ade80}
.mde__value{font-size:13px;font-weight:700;color:var(--on-dark);text-align:right}
.mde__row.is-ok .mde__value{color:#4ade80}
.mde__target{
  position:absolute;top:-6px;bottom:-6px;
  left:calc(70px + (100% - 190px) * var(--x));
  border-left:2px dashed #ff8a5c;pointer-events:none;
}

/* Jauge de confiance */
.gauge{position:relative;height:14px;border-radius:7px;background:rgba(255,255,255,.07);margin-bottom:22px}
.gauge__fill{position:absolute;inset:0 auto 0 0;border-radius:7px;background:#5b6b82;transition:width .35s ease}
.gauge__fill.is-up{background:#4ade80}
.gauge__fill.is-down{background:#ff7a59}
.gauge__mark{position:absolute;top:-5px;bottom:-5px;border-left:2px dashed #ff8a5c}
.gauge__mark span{position:absolute;top:26px;left:0;transform:translateX(-50%);font-size:12px;font-weight:700;color:#ff8a5c;white-space:nowrap}

/* Barres de conversion */
.crbars{display:flex;flex-direction:column;gap:10px}
.crbar{display:grid;grid-template-columns:90px minmax(0,1fr) 70px;align-items:center;gap:12px}
.crbar__label{font-size:13px;font-weight:600;color:var(--on-dark-mute)}
.crbar__track{height:22px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.crbar__fill{display:block;height:100%;border-radius:8px;background:#5b6b82;transition:width .35s ease}
.crbar__fill--b{background:var(--brand-500)}
.crbar__fill--b.is-up{background:#4ade80}
.crbar__fill--b.is-down{background:#ff7a59}
.crbar__value{font-size:14px;font-weight:700;color:var(--on-dark);text-align:right}

/* Intervalle de confiance */
.ci{position:relative;height:64px;margin-top:14px}
.ci__axis{position:absolute;left:0;right:0;top:22px;height:2px;background:rgba(255,255,255,.1)}
.ci__zero{position:absolute;left:50%;top:8px;height:30px;border-left:2px solid rgba(255,255,255,.35)}
.ci__zero span{position:absolute;top:-20px;left:0;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--on-dark-mute)}
.ci__range{position:absolute;top:15px;height:16px;border-radius:8px;background:#5b6b82;transition:left .35s ease,width .35s ease}
.ci__range.is-up{background:#4ade80}
.ci__range.is-down{background:#ff7a59}
.ci__dot{position:absolute;top:13px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff;border:4px solid #0e1724;transition:left .35s ease}
.ci__tick{position:absolute;top:40px;transform:translateX(-50%);font-size:12.5px;font-weight:700;color:var(--on-dark);white-space:nowrap}

/* Impact */
.impact__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.impact__item{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05)}
.impact__value{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.4px;color:var(--on-dark);overflow-wrap:anywhere}
.impact.is-up .impact__value{color:#4ade80}
.impact.is-down .impact__value{color:#ff7a59}
.impact__label{font-size:12.5px;line-height:1.35;color:var(--on-dark-mute)}

.srm{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 18px;border-radius:16px;background:#ffe8c2;color:#5c3500;
  font-size:14px;line-height:1.55;
}
.srm[hidden]{display:none}
.srm strong{display:block;margin-bottom:2px}

.share{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:11px;
  font-size:14px;font-weight:600;color:var(--on-dark);
  background:rgba(255,255,255,.06);border:1px solid var(--border-dark);
  transition:background .15s ease,border-color .15s ease;
}
.share:hover{background:rgba(255,255,255,.1)}
.share.is-done{background:#c9f5dc;border-color:#c9f5dc;color:#0c5132}

/* ------------------------------- Notes et CTA -------------------------------- */
.tool-notes{position:relative;padding:88px 0 104px;background:var(--bg-page)}
.tool-notes__inner{display:flex;flex-direction:column;gap:40px}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.note-card{
  display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:20px;
  background:var(--brand-50);border:1px solid var(--border-rule);
}
.note-card__num{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
  background:var(--bg-page);border:1.5px solid var(--brand-100);
  font-size:16px;font-weight:700;color:var(--brand-500);
}
.method{font-size:14px;line-height:1.6;color:var(--text-muted)}
.tool-cta{width:100%}

/* ---------------------------------- Hub -------------------------------------- */
.res-section{position:relative;padding:8px 0 104px;background:var(--bg-page)}
.res-section__inner{display:flex;flex-direction:column;gap:56px}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.res-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:32px;border-radius:22px;
  background:var(--bg-page);border:1px solid var(--border-rule);
  box-shadow:0 10px 24px -6px rgba(31,41,61,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.res-card:hover{transform:translateY(-3px);border-color:var(--brand-100);box-shadow:0 18px 36px -10px rgba(253,69,0,.16)}
.res-card__tile{display:inline-flex;padding:14px;border-radius:14px;background:var(--brand-50)}
.res-card__tile img{width:26px;height:26px}
.res-card__tag{
  display:inline-flex;padding:6px 12px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--border-rule);
  font-size:13px;font-weight:500;color:var(--text-muted);
}
.res-card__top{display:flex;align-items:center;justify-content:space-between;width:100%}
.res-card__link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:16px;font-weight:700;color:var(--brand-500)}
.res-card__link img{width:18px;height:18px;filter:invert(35%) sepia(97%) saturate(4200%) hue-rotate(4deg) brightness(101%) contrast(104%);transition:transform .2s ease}
.res-card:hover .res-card__link img{transform:translateX(4px)}

/* -------------------------------- Responsive --------------------------------- */
@media (max-width:1180px){
  .calc{grid-template-columns:360px minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .tool-hero{padding:40px 0 36px}
  .tool-title{font-size:32px;line-height:1.15;letter-spacing:-.8px}
  .tool-section{padding:32px 0 64px}
  .calc{grid-template-columns:1fr;gap:20px}
  .calc-card{position:static;padding:22px;gap:22px}
  .calc-results{padding:20px 16px;border-radius:22px;gap:16px}
  .verdict__text{font-size:17px}
  .kpi{padding:14px}
  .kpi__value{font-size:22px}
  .panel-block{padding:16px}
  .mde__row{grid-template-columns:48px minmax(0,1fr) 86px;gap:10px}
  .mde__target{left:calc(58px + (100% - 154px) * var(--x))}
  .crbar{grid-template-columns:72px minmax(0,1fr) 62px;gap:10px}
  .impact__grid{grid-template-columns:1fr}
  .tool-notes{padding:56px 0 64px}
  .notes-grid,.res-grid{grid-template-columns:1fr;gap:16px}
  .note-card,.res-card{padding:24px}
  .res-section{padding:0 0 64px}
  .res-section__inner{gap:40px}
}
@media (max-width:420px){
  .seg span{font-size:13px;padding:0 4px}
  .calc-pair{grid-template-columns:1fr 1fr;gap:10px}
}

/* ==========================================================================
   Calculateur de marge par visiteur
   ========================================================================== */
/* Vue par visiteur */
.pv-head,.pv{display:grid;grid-template-columns:170px minmax(0,1fr) 84px 64px;align-items:center;gap:14px}
.pv-head{font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--on-dark-mute)}
.pv-head span:nth-child(n+3){text-align:right}
.pv-list{display:flex;flex-direction:column;gap:9px}
.pv__label{font-size:14px;font-weight:600;color:var(--on-dark-mute)}
.pv__track{height:14px;border-radius:7px;background:rgba(255,255,255,.06);overflow:hidden}
.pv__fill{display:block;height:100%;border-radius:7px;background:#ff7a59;opacity:.8;transition:width .35s ease}
.pv__value,.pv__pct{font-size:14px;font-weight:700;text-align:right;white-space:nowrap}
.pv__value{color:#ffb39e}
.pv__pct{color:var(--on-dark-mute);font-weight:600}
.pv--base .pv__fill{background:#5b6b82;opacity:1}
.pv--base .pv__label,.pv--base .pv__value{color:var(--on-dark)}
.pv--sub{padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
.pv--sub .pv__fill{background:#7fb3a0;opacity:1}
.pv--sub .pv__label,.pv--sub .pv__value{color:var(--on-dark)}
.pv--total{padding-top:11px;border-top:1px solid rgba(255,255,255,.16)}
.pv--total .pv__fill{background:#4ade80;opacity:1}
.pv--total .pv__label{color:var(--on-dark);font-weight:800}
.pv--total .pv__value{color:#4ade80;font-size:16px;font-weight:800}
.pv--total .pv__pct{color:#4ade80;font-weight:700}
.pv--sub.is-neg .pv__fill,.pv--total.is-neg .pv__fill{background:#ff7a59}
.pv--sub.is-neg .pv__value,.pv--total.is-neg .pv__value,.pv--total.is-neg .pv__pct{color:#ff7a59}

/* Simulateur de leviers */
.levers{display:flex;flex-direction:column;gap:12px}
.lev{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04)}
.lev__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.lev__title{font-size:15px;font-weight:700;color:var(--on-dark)}
.lev__sub{font-size:12.5px;color:var(--on-dark-mute)}
.lev__row{display:grid;grid-template-columns:56px 150px minmax(0,1fr) 150px;align-items:center;gap:12px}
.lev--all .lev__row{grid-template-columns:150px minmax(0,1fr) 150px}
.lev__step{display:inline-flex;justify-content:center;padding:3px 0;border-radius:7px;background:rgba(255,255,255,.08);font-size:13px;font-weight:700;color:var(--on-dark)}
.lev__net{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.lev__net strong{font-size:15px;font-weight:800;color:var(--on-dark)}
.lev__net em{font-style:normal;font-size:12.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:#c9f5dc;color:#0c5132}
.lev__bar{height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.lev__bar span{display:block;height:100%;border-radius:5px;background:#4ade80;transition:width .35s ease}
.lev__gain{font-size:15px;font-weight:800;color:#4ade80;text-align:right;white-space:nowrap}
.lev__gain small{font-size:12px;font-weight:600;color:var(--on-dark-mute)}
.lev--all{background:rgba(253,69,0,.12);border:1px solid rgba(253,69,0,.35)}
.lev--all .lev__bar span{background:var(--brand-500)}
.lev--all .lev__gain{color:#ff8a5c;font-size:17px}

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

@media (max-width:1180px){
  .res-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lev__row{grid-template-columns:52px 130px minmax(0,1fr) 128px}
  .lev--all .lev__row{grid-template-columns:130px minmax(0,1fr) 128px}
}
@media (max-width:980px){
  .pv-head,.pv{grid-template-columns:104px minmax(0,1fr) 64px 50px;gap:8px}
  .pv__label,.pv__value,.pv__pct{font-size:12.5px}
  .pv--total .pv__value{font-size:14px}
  .lev{padding:12px}
  .lev__row,.lev--all .lev__row{grid-template-columns:auto 1fr;gap:6px 10px}
  .lev__step{padding:3px 8px}
  .lev__bar{grid-column:1 / -1;order:3}
  .lev__gain{grid-column:1 / -1;order:4;text-align:left}
  .res-grid--3{grid-template-columns:1fr}
}

/* ------------------------------- Exemple chiffré ----------------------------- */
.tool-example{position:relative;padding:88px 0 0;background:var(--bg-page)}
.tool-example__inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.tool-example .lead{max-width:760px}
.ex-list{display:flex;flex-direction:column;width:100%;border:1px solid var(--border-rule);border-radius:20px;overflow:hidden}
.ex-row{
  display:grid;grid-template-columns:260px 160px minmax(0,1fr);align-items:baseline;gap:8px 24px;
  padding:20px 28px;background:var(--bg-page);border-top:1px solid var(--border-rule);
}
.ex-row:first-child{border-top:0}
.ex-row:last-child{background:var(--brand-50)}
.ex-row__label{font-size:16px;font-weight:700;color:var(--ink-900)}
.ex-row__value{font-size:20px;font-weight:800;color:var(--brand-500);white-space:nowrap}
.ex-row__note{font-size:14.5px;line-height:1.6;color:var(--text-muted)}

@media (max-width:860px){
  .tool-example{padding:56px 0 0}
  .ex-row{grid-template-columns:1fr;gap:4px;padding:18px 20px}
  .ex-row__value{font-size:22px}
}

/* Honoraires : le gain est le chiffre vert, la dépense reste sobre */
.calc[data-tool="fees"] .kpi--main{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.38)}
.calc[data-tool="fees"] .kpi--main .kpi__value{color:#4ade80}