.ccf-v21{
  --ccf-blue:#0969F9;
  --ccf-blue-dark:#0757D1;
  --ccf-blue-soft:#EEF6FF;
  --ccf-green:#22B566;
  --ccf-green-soft:#ECF9F1;
  --ccf-navy:#071A36;
  --ccf-text:#17243A;
  --ccf-muted:#667792;
  --ccf-border:#DCE5F0;
  --ccf-border-strong:#C8D5E5;
  --ccf-surface:#FFFFFF;
  --ccf-soft:#F8FAFD;
  margin:0 0 40px;
  color:var(--ccf-text);
  font-family:inherit;
}
.ccf-v21,.ccf-v21 *{box-sizing:border-box}

/* ---------- Calculator heading ---------- */
.ccf-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin:0 0 18px;
}
.ccf-topbar-copy{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}
.ccf-tool-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--ccf-blue-soft);
  color:var(--ccf-blue);
}
.ccf-tool-icon svg{display:block}
.ccf-topbar h1{
  margin:0;
  color:var(--ccf-navy);
  font-size:29px;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:850;
}
.ccf-topbar p{
  max-width:690px;
  margin:5px 0 0;
  color:var(--ccf-muted);
  font-size:12px;
  line-height:1.45;
}
.ccf-eyebrow{display:none}
.ccf-currency{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.ccf-currency>span{
  font-size:11px;
  font-weight:800;
  color:#42536C;
}
.ccf-currency select{
  width:auto;
  min-width:122px;
  height:42px;
  margin:0;
  padding:0 32px 0 11px;
  border:1px solid var(--ccf-border-strong);
  border-radius:9px;
  background:#fff;
  color:var(--ccf-navy);
  font:700 12.5px/1 inherit;
}

/* ---------- Main 2-panel calculator ---------- */
.ccf-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.ccf-input-panel,
.ccf-result-panel{
  min-width:0;
  align-self:start;
  padding:22px;
  border:1px solid var(--ccf-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 20px rgba(15,35,65,.025);
}
.ccf-result-panel{background:#FBFCFE}

/* ---------- Section headers ---------- */
.ccf-panel-header{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:52px;
  margin:0 0 18px;
}
.ccf-input-panel .ccf-panel-header{
  grid-template-columns:42px minmax(0,1fr);
}
.ccf-panel-badge{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
.ccf-panel-badge svg{display:block}
.ccf-panel-badge-blue{background:var(--ccf-blue);color:#fff}
.ccf-panel-badge-green{background:var(--ccf-green);color:#fff}
.ccf-panel-header h3{
  margin:0;
  color:var(--ccf-navy);
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}
.ccf-panel-header p{
  margin:3px 0 0;
  color:var(--ccf-muted);
  font-size:11px;
  line-height:1.42;
}
.ccf-result-status{
  align-self:start;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border:1px solid #BDE8CE;
  border-radius:999px;
  background:var(--ccf-green-soft);
  color:#16864A;
  font-size:10px;
  font-weight:800;
}

/* ---------- Inputs ---------- */
.ccf-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 14px;
}
.ccf-field{
  min-width:0;
  display:grid;
  grid-template-rows:34px 44px 12px;
}
.ccf-label-row{
  height:34px;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.ccf-label-row label{
  min-width:0;
  padding-top:1px;
  color:#1B2C47;
  font-size:12.5px;
  line-height:1.25;
  font-weight:800;
}
.ccf-info{
  position:relative;
  flex:0 0 17px!important;
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  min-height:17px!important;
  margin:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #AFC1D8!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#5B7190!important;
  box-shadow:none!important;
  font-size:0!important;
  line-height:1!important;
  cursor:pointer;
}
.ccf-info::before{
  content:"i";
  display:block;
  margin:0;
  padding:0;
  color:currentColor;
  font:800 10px/1 Arial,sans-serif;
}
.ccf-info:hover,
.ccf-info[aria-expanded="true"]{
  border-color:var(--ccf-blue)!important;
  background:var(--ccf-blue-soft)!important;
  color:var(--ccf-blue)!important;
}
.ccf-tooltip{
  display:none;
  position:absolute;
  z-index:9999;
  left:24px;
  top:-7px;
  width:255px;
  padding:10px 11px;
  border-radius:9px;
  background:#0E1D33;
  color:#fff;
  box-shadow:0 12px 30px rgba(5,20,45,.24);
  font:500 11.5px/1.48 system-ui,sans-serif;
  text-align:left;
  white-space:normal;
}
.ccf-info:hover .ccf-tooltip,
.ccf-info[aria-expanded="true"] .ccf-tooltip{display:block}

.ccf-input-group{
  width:100%;
  height:44px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--ccf-border-strong);
  border-radius:9px;
  background:#fff;
}
.ccf-input-group:focus-within{
  border-color:var(--ccf-blue);
  box-shadow:0 0 0 3px rgba(9,105,249,.09);
}
.ccf-affix{
  flex:0 0 auto;
  min-width:40px;
  height:42px;
  padding:0 10px;
  display:none;
  align-items:center;
  justify-content:center;
  margin:0;
  background:#F7F9FC;
  color:#607491;
  font-size:12px;
  line-height:1;
  font-weight:800;
}
.ccf-input-group.has-prefix .ccf-prefix{
  display:flex;
  border-right:1px solid var(--ccf-border);
}
.ccf-input-group .ccf-suffix{
  display:flex;
  min-width:48px;
  border-left:1px solid var(--ccf-border);
}
.ccf-input-group input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:42px!important;
  margin:0!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#fff!important;
  color:#101D32!important;
  font:600 15px/42px inherit!important;
  appearance:textfield;
}
.ccf-input-group input::-webkit-outer-spin-button,
.ccf-input-group input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ccf-input-group:has(input.ccf-invalid){border-color:#DC2626}
.ccf-error{
  display:block;
  height:12px;
  margin:0;
  color:#C62828;
  font-size:10px;
  line-height:12px;
}

/* ---------- Primary calculate button ---------- */
.ccf-calculate{
  width:100%!important;
  height:47px!important;
  min-height:47px!important;
  margin:16px 0 0!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,var(--ccf-blue),#0B7BFF)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(9,105,249,.14)!important;
  font:800 13px/1 inherit!important;
  text-decoration:none!important;
  cursor:pointer;
}
.ccf-calculate:hover{
  background:linear-gradient(135deg,var(--ccf-blue-dark),#0969F9)!important;
}
.ccf-button-icon,
.ccf-button-icon svg{
  display:block;
  flex:0 0 auto;
}

/* ---------- Reset / Save / Share ----------
   Explicit flex-basis prevents the 2+1 broken row seen in the screenshot. */
.ccf-actions{
  width:100%;
  display:flex!important;
  align-items:stretch!important;
  gap:8px!important;
  margin:9px 0 0!important;
}
.ccf-actions button{
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid var(--ccf-border-strong)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#415473!important;
  box-shadow:none!important;
  font:750 11.5px/1 inherit!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  overflow:hidden!important;
  cursor:pointer;
}
.ccf-actions button:hover{
  border-color:#AFC5E4!important;
  background:#F9FBFE!important;
  color:var(--ccf-blue)!important;
}
.ccf-actions button svg{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.ccf-actions button span{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
  line-height:1!important;
}

/* ---------- Help ---------- */
.ccf-help-strip{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:12px;
  padding:10px 11px;
  border:1px solid #C9DFFF;
  border-radius:9px;
  background:#F5F9FF;
}
.ccf-help-icon{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#E4F0FF;
  color:var(--ccf-blue);
  font:850 11px/1 Arial,sans-serif;
}
.ccf-help-strip strong{display:block;margin:0;color:#17315A;font-size:11.5px}
.ccf-help-strip p{margin:1px 0 0;color:#68809F;font-size:10px;line-height:1.4}

/* ---------- Results ---------- */
.ccf-primary-result{
  min-height:116px;
  margin-bottom:12px;
  padding:17px;
  border:1px solid #B9D6FF;
  border-radius:12px;
  background:linear-gradient(135deg,#F5FAFF,#EDF6FF);
}
.ccf-primary-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
}
.ccf-primary-copy>span{
  display:block;
  margin-bottom:6px;
  color:#1C3153;
  font-size:11.5px;
  font-weight:800;
}
.ccf-primary-copy strong{
  display:block;
  color:var(--ccf-blue);
  font-size:31px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.ccf-primary-copy p{
  margin:8px 0 0;
  max-width:360px;
  color:#697E9C;
  font-size:10.5px;
  line-height:1.45;
}
.ccf-primary-ring{
  --a:70%;--b:15%;--c:10%;--d:5%;
  width:86px;
  height:86px;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:50%;
  background:conic-gradient(
    #0969F9 0 var(--a),
    #22B566 var(--a) calc(var(--a) + var(--b)),
    #F59E0B calc(var(--a) + var(--b)) calc(var(--a) + var(--b) + var(--c)),
    #EC4899 calc(var(--a) + var(--b) + var(--c)) 100%
  );
}
.ccf-primary-ring::after{
  content:"";
  position:absolute;
  inset:11px;
  border-radius:50%;
  background:#fff;
}
.ccf-primary-ring span{
  position:relative;
  z-index:1;
  color:var(--ccf-navy);
  font-size:9px;
  line-height:1.25;
  font-weight:800;
  text-align:center;
}
.ccf-result-card,
.ccf-breakdown,
.ccf-scenario-panel{
  margin-top:11px;
  padding:13px 14px;
  border:1px solid var(--ccf-border);
  border-radius:11px;
  background:#fff;
}
.ccf-result-card-head,
.ccf-breakdown-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.ccf-result-card-head>div,
.ccf-breakdown-head>div{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.ccf-result-card-head strong,
.ccf-breakdown-head strong{color:#1A2C49;font-size:12.5px}
.ccf-result-card-head span,
.ccf-breakdown-head span{color:#7A8CA6;font-size:9.5px}
.ccf-result-list{display:block}
.ccf-result{
  min-height:52px;
  padding:8px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(92px,auto);
  gap:16px;
  align-items:center;
  border-top:1px solid #E7EDF5;
}
.ccf-result:first-child{border-top:0}
.ccf-result>div{min-width:0}
.ccf-result span{display:block;color:#1E314F;font-size:12px;font-weight:800}
.ccf-result small{display:block;margin-top:2px;color:#7B8DA5;font-size:9.8px;line-height:1.3}
.ccf-result strong{
  color:#071A36;
  font-size:13.5px;
  line-height:1.2;
  font-weight:850;
  text-align:right;
  white-space:nowrap;
}
.ccf-summary-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:11px;
}
.ccf-summary-card{
  min-width:0;
  padding:10px;
  border:1px solid var(--ccf-border);
  border-radius:10px;
  background:#fff;
}
.ccf-summary-card span{display:block;color:#7B8DA5;font-size:9px;line-height:1.25}
.ccf-summary-card strong{display:block;margin-top:3px;color:#0B2142;font-size:13.5px;line-height:1.2;font-weight:850;overflow-wrap:anywhere}
.ccf-bars{display:grid;gap:8px}
.ccf-bar-row{margin:0}
.ccf-bar-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:3px;color:#536986;font-size:10px}
.ccf-bar-label strong{color:#29405F}
.ccf-bar-track{height:6px;border-radius:99px;background:#EDF2F8;overflow:hidden}
.ccf-bar-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0969F9,#55A6FF)}
.ccf-compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ccf-compare-grid>div{padding:9px;border-radius:8px;background:#F7F9FC}
.ccf-compare-grid span{display:block;color:#7A8CA6;font-size:9px}
.ccf-compare-grid strong{display:block;margin-top:3px;color:#0C2242;font-size:12px}
.ccf-clear-scenario{border:0;background:none;color:var(--ccf-blue);font-weight:800;font-size:10px;cursor:pointer}
.ccf-formula{
  margin-top:11px;
  padding:12px 13px;
  border:1px solid var(--ccf-border);
  border-radius:10px;
  background:#fff;
}
.ccf-formula summary{cursor:pointer;color:#263C5D;font-size:11.5px;font-weight:800}
.ccf-formula p{margin:8px 0 5px;color:#5E718C;font-size:11px;line-height:1.5}
.ccf-formula small{color:#8494AA;font-size:9px}
.ccf-message{padding:11px;border:1px solid #FED7AA;border-radius:8px;background:#FFF7ED;color:#9A3412;font-size:11px}
.ccf-muted{margin:0;color:#7A8CA6;font-size:10px}
.ccf-disclaimer{
  margin-top:10px;
  padding:9px 12px;
  border-left:3px solid #C9D5E4;
  border-radius:4px 8px 8px 4px;
  background:#F8FAFC;
  color:#6C7D94;
  font-size:10px;
  line-height:1.45;
}
.ccf-disclaimer strong{color:#4A5C74}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .ccf-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .ccf-topbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:start;
  }
  .ccf-currency{
    width:100%;
    justify-content:space-between;
  }
  .ccf-fields{
    grid-template-columns:1fr;
    row-gap:9px;
  }
  .ccf-field{
    grid-template-rows:auto 44px 12px;
  }
  .ccf-label-row{
    height:auto;
    min-height:24px;
    align-items:center;
    margin-bottom:5px;
  }
  .ccf-summary-cards{grid-template-columns:1fr}
  .ccf-tooltip{
    position:fixed;
    left:14px;
    right:14px;
    top:auto;
    bottom:14px;
    width:auto;
    z-index:999999;
    font-size:12px;
  }
}
@media(max-width:430px){
  .ccf-topbar h1{font-size:24px}
  .ccf-input-panel,.ccf-result-panel{padding:15px}
  .ccf-actions{
    gap:6px!important;
  }
  .ccf-actions button{
    padding:0 5px!important;
    font-size:11px!important;
  }
  .ccf-actions button svg{
    width:14px!important;
    height:14px!important;
    flex-basis:14px!important;
  }
  .ccf-primary-shell{grid-template-columns:1fr}
  .ccf-primary-ring{display:none}
  .ccf-result{grid-template-columns:1fr;gap:4px}
  .ccf-result strong{text-align:left}
}


/* v2.7 button polish — compact, balanced and perfectly aligned */
.ccf-v21 .ccf-calculate{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr) 24px!important;
  align-items:center!important;
  justify-items:center!important;
  column-gap:8px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 16px!important;
  font-size:13px!important;
}
.ccf-v21 .ccf-button-icon,
.ccf-v21 .ccf-calculate-arrow{
  width:24px!important;
  height:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.ccf-v21 .ccf-calculate-label{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.ccf-v21 .ccf-calculate-arrow{
  font-size:19px!important;
  font-weight:600!important;
  transform:translateY(-1px)!important;
}

/* Secondary actions should read as utilities, not compete with the main CTA. */
.ccf-v21 .ccf-actions{
  gap:8px!important;
}
.ccf-v21 .ccf-actions button{
  height:36px!important;
  min-height:36px!important;
  border-radius:8px!important;
  font-size:11.5px!important;
  font-weight:700!important;
  color:#42536C!important;
  background:#fff!important;
  border-color:#D5DFEC!important;
}
.ccf-v21 .ccf-actions button svg{
  width:14px!important;
  height:14px!important;
  flex-basis:14px!important;
  stroke-width:1.9!important;
}
.ccf-v21 .ccf-actions button:hover{
  background:#F7FAFF!important;
  border-color:#B8CBE5!important;
  color:var(--ccf-blue)!important;
}

/* Prevent any theme pseudo-icon or text decoration from being injected into calculator buttons. */
.ccf-v21 .ccf-calculate::before,
.ccf-v21 .ccf-calculate::after,
.ccf-v21 .ccf-actions button::before,
.ccf-v21 .ccf-actions button::after{
  content:none!important;
  display:none!important;
}


/* =========================================================
   v2.8 FINAL PRIMARY CTA FIX
   Direct SVG + plain text. No nested spans, no arrow.
   This prevents GeneratePress/global span rules from separating
   the icon and label.
   ========================================================= */
.ccf-v21 button.ccf-calculate{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  margin:16px 0 0!important;
  padding:0 18px!important;

  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;

  position:relative!important;
  inset:auto!important;
  transform:none!important;

  border:0!important;
  border-radius:9px!important;
  background:#0969F9!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(9,105,249,.14)!important;

  font-family:inherit!important;
  font-size:13px!important;
  font-weight:800!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-indent:0!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  overflow:hidden!important;
  vertical-align:middle!important;
  cursor:pointer!important;
}
.ccf-v21 button.ccf-calculate:hover,
.ccf-v21 button.ccf-calculate:focus{
  background:#0757D1!important;
  color:#fff!important;
}
.ccf-v21 button.ccf-calculate .ccf-calculate-icon{
  display:block!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;

  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  max-width:17px!important;
  flex:0 0 17px!important;

  margin:0!important;
  padding:0!important;
  overflow:visible!important;

  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vertical-align:middle!important;
}
/* Remove obsolete nested CTA elements from old cached/theme rules. */
.ccf-v21 .ccf-button-icon,
.ccf-v21 .ccf-calculate-label,
.ccf-v21 .ccf-calculate-arrow{
  display:none!important;
}
.ccf-v21 button.ccf-calculate::before,
.ccf-v21 button.ccf-calculate::after{
  content:none!important;
  display:none!important;
}


/* =========================================================
   v2.9 PRIMARY CTA — FIXED FROM DEVTOOLS EVIDENCE
   The previous display:grid rule was the bug.
   This button is FLEX only. No grid properties are used.
   ========================================================= */
.ccf-v21 button.ccf-calculate{
  -webkit-appearance:none!important;
  appearance:none!important;

  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;

  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  margin:16px 0 0!important;
  padding:0 18px!important;

  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;

  border:0!important;
  border-radius:9px!important;
  background:#0969F9!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(9,105,249,.14)!important;

  font-family:inherit!important;
  font-size:13px!important;
  font-weight:800!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-indent:0!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  overflow:hidden!important;
  cursor:pointer!important;

  /* Explicitly neutralize every old grid declaration */
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  justify-items:normal!important;
}
.ccf-v21 button.ccf-calculate:hover,
.ccf-v21 button.ccf-calculate:focus{
  background:#0757D1!important;
  color:#fff!important;
}

.ccf-v21 button.ccf-calculate > svg{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;

  display:block!important;
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  max-width:17px!important;
  flex:0 0 17px!important;

  margin:0!important;
  padding:0!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.ccf-v21 button.ccf-calculate .ccf-calculate-text{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;

  display:block!important;
  flex:0 1 auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;

  color:inherit!important;
  font:inherit!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-align:center!important;
}

.ccf-v21 button.ccf-calculate::before,
.ccf-v21 button.ccf-calculate::after,
.ccf-v21 button.ccf-calculate .ccf-calculate-text::before,
.ccf-v21 button.ccf-calculate .ccf-calculate-text::after{
  content:none!important;
  display:none!important;
}

/* old experimental CTA wrappers must never participate */
.ccf-v21 .ccf-button-icon,
.ccf-v21 .ccf-calculate-label,
.ccf-v21 .ccf-calculate-arrow{
  display:none!important;
}

/* Mobile keeps the same single-line centered CTA */
@media(max-width:430px){
  .ccf-v21 button.ccf-calculate{
    gap:9px!important;
    padding:0 12px!important;
    font-size:12px!important;
  }
  .ccf-v21 button.ccf-calculate > svg{
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    flex-basis:16px!important;
  }
}


/* v3.0 Advanced-analysis UI */
.ccf-analysis-panel{
  margin-top:11px;
  padding:13px 14px;
  border:1px solid var(--ccf-border);
  border-radius:11px;
  background:#fff;
}
.ccf-analysis-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.ccf-analysis-head>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ccf-analysis-head strong{
  color:#1A2C49;
  font-size:12.5px;
}
.ccf-analysis-head span{
  color:#7A8CA6;
  font-size:9.5px;
}
.ccf-analysis-content{
  display:grid;
  gap:9px;
}
.ccf-analysis-intro{
  padding:10px 11px;
  border-radius:9px;
  background:#F7FAFE;
}
.ccf-analysis-intro strong{
  display:block;
  color:#183153;
  font-size:11.5px;
}
.ccf-analysis-intro p{
  margin:2px 0 0;
  color:#71839B;
  font-size:10px;
  line-height:1.4;
}
.ccf-analysis-band{
  padding:11px 12px;
  border:1px solid #E1E8F1;
  border-left-width:3px;
  border-radius:8px;
  background:#FAFCFE;
}
.ccf-analysis-band>span{
  display:block;
  margin-bottom:2px;
  color:#71839B;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
}
.ccf-analysis-band>strong{
  display:block;
  color:#132945;
  font-size:13px;
}
.ccf-analysis-band>p{
  margin:3px 0 0;
  color:#6A7E98;
  font-size:10px;
  line-height:1.45;
}
.ccf-tone-good{border-left-color:#22B566;background:#F7FCF9}
.ccf-tone-warn{border-left-color:#F59E0B;background:#FFFCF5}
.ccf-tone-risk{border-left-color:#DC2626;background:#FFF8F8}
.ccf-tone-neutral{border-left-color:#7CAFFB}
.ccf-table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid #E2E9F2;
  border-radius:9px;
  -webkit-overflow-scrolling:touch;
}
.ccf-analysis-table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  background:#fff;
  margin:0!important;
  font-size:10px;
}
.ccf-analysis-table th,
.ccf-analysis-table td{
  padding:8px 9px;
  border-bottom:1px solid #EDF1F6;
  text-align:right;
  white-space:nowrap;
}
.ccf-analysis-table th:first-child,
.ccf-analysis-table td:first-child{
  text-align:left;
}
.ccf-analysis-table th{
  background:#F7F9FC;
  color:#536982;
  font-weight:800;
}
.ccf-analysis-table td{
  color:#263B58;
}
.ccf-analysis-table tbody tr:last-child td{
  border-bottom:0;
}
@media(max-width:680px){
  .ccf-analysis-panel{padding:12px}
  .ccf-analysis-table{font-size:9.5px}
}


/* =========================================================
   HOME & CONSTRUCTION v1.1
   Uses the approved Finance v3.0 visual system intentionally.
   Only category-specific controls/results are added below.
   ========================================================= */
.ccf-v21 .ccf-selectors{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.ccf-v21 .ccf-selectors label{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.ccf-v21 .ccf-selectors label>span{
  font-size:11px;
  font-weight:800;
  color:#42536C;
}
.ccf-v21 .ccf-selectors select{
  width:auto;
  min-width:108px;
  height:42px;
  margin:0;
  padding:0 30px 0 11px;
  border:1px solid var(--ccf-border-strong);
  border-radius:9px;
  background:#fff;
  color:var(--ccf-navy);
  font:700 12.5px/1 inherit;
}
.ccf-v21 .ccf-input-group .ccf-prefix:empty,
.ccf-v21 .ccf-input-group .ccf-suffix:empty{display:none}
.ccf-v21 .ccf-input-group .ccf-prefix:not(:empty){
  display:flex;
  border-right:1px solid var(--ccf-border);
}
.ccf-v21 .ccf-primary-result>span{
  display:block;
  margin-bottom:6px;
  color:#1C3153;
  font-size:11.5px;
  font-weight:800;
}
.ccf-v21 .ccf-primary-result>strong{
  display:block;
  color:var(--ccf-blue);
  font-size:31px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.03em;
}
.ccf-v21 .ccf-primary-result>small{
  display:block;
  margin-top:8px;
  color:#697E9C;
  font-size:10.5px;
  line-height:1.45;
}
.ccf-v21 .ccf-result-list>div{
  min-height:52px;
  padding:8px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(92px,auto);
  gap:16px;
  align-items:center;
  border-bottom:1px solid #EDF1F6;
}
.ccf-v21 .ccf-result-list>div:last-child{border-bottom:0}
.ccf-v21 .ccf-result-list>div span{color:#60748F;font-size:11px}
.ccf-v21 .ccf-result-list>div strong{color:#152A47;font-size:12px;text-align:right}
.ccf-v21 .ccf-analysis-panel{
  margin-top:11px;
  padding:13px 14px;
  border:1px solid var(--ccf-border);
  border-radius:11px;
  background:#fff;
}
.ccf-v21 .ccf-analysis-panel>.ccf-result-card-head{margin-bottom:10px}
.ccf-v21 .ccf-scenario-panel{margin-top:11px}
.ccf-v21 .ccf-scenario-content>div{
  padding:8px 0;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  border-bottom:1px solid #EDF1F6;
}
.ccf-v21 .ccf-scenario-content span,
.ccf-v21 .ccf-scenario-content em,
.ccf-v21 .ccf-scenario-content strong{font-size:10px;font-style:normal}
.ccf-v21 .ccf-scenario-content strong{text-align:right}
.ccf-v21 .ccf-calculate-icon,
.ccf-v21 .ccf-calculate-next{
  width:18px!important;height:18px!important;display:block!important;flex:0 0 18px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
.ccf-v21 .ccf-calculate-text{
  display:block!important;min-width:0!important;margin:0!important;padding:0!important;
  position:static!important;transform:none!important;line-height:1!important;text-align:center!important;
}
@media(max-width:680px){
  .ccf-v21 .ccf-selectors{width:100%}
  .ccf-v21 .ccf-selectors label{flex:1 1 145px;justify-content:space-between}
  .ccf-v21 .ccf-selectors select{min-width:96px}
}
@media(max-width:430px){
  .ccf-v21 .ccf-result-list>div{grid-template-columns:1fr;gap:4px}
  .ccf-v21 .ccf-result-list>div strong{text-align:left}
}