:root{ --teal:#5FB3B0; --divider:#CBD1D6; --outer-pad:28px; --gap:40px; }

.subtrak-roi-card *{box-sizing:border-box}
.subtrak-roi-card {background:#fff;border-radius:20px;padding:24px var(--outer-pad) 18px var(--outer-pad);
  border:1px solid #E4E6E8;box-shadow:0 1px 2px rgba(0,0,0,.03);max-width:1200px;margin:0 auto; line-height:1.3;}
.subtrak-roi-card .subtrak-roi{display:grid;grid-template-columns:2fr 4px 1fr;column-gap:var(--gap);align-items:center}
.subtrak-roi-card .inputs{display:flex;flex-direction:column;gap:26px;position:relative;z-index:1}
.subtrak-roi-card .outputs{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:0}
.subtrak-roi-card .divider{width:100%;background:var(--divider);border-radius:2px;align-self:stretch;position:relative;z-index:0}

/* Inputs */
.subtrak-roi-card .subtrak-row{display:grid;grid-template-columns:32px 1fr 270px;align-items:center;gap:16px}
.subtrak-roi-card .icon{width:32px;height:32px;display:grid;place-items:center;opacity:.95}
.subtrak-roi-card .icon img{width:26px;height:26px;object-fit:contain;image-rendering:-webkit-optimize-contrast}
.subtrak-roi-card .row-label{font-weight:800;font-size:16px;color:#1a1a1a}
.subtrak-roi-card .row-input input{width:100%;padding:12px 14px;border:1px solid #D1D5DB;border-radius:10px;font-size:15px;background:#fff;text-align:center}
.subtrak-roi-card .row-input input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(95,179,176,.15)}

/* Outputs */
.subtrak-roi-card .metrics{display:flex;flex-direction:column;gap:10px;width:100%;max-width:500px}
.subtrak-roi-card .metric{padding:4px 0}
.subtrak-roi-card .metric-kicker{font-weight:900;font-size:18px;color:#1a1a1a}
.subtrak-roi-card .metric-sub{font-size:14px;color:#444;margin-top:2px}
.subtrak-roi-card .metric-sub .value{font-weight:900;font-size:26px;color:#111}
.subtrak-roi-card .total-card{margin-top:6px;background:#CFEDEA;border:1px solid #A9D9D5;border-radius:14px;padding:18px 20px;text-align:center;width:100%;max-width:500px}
.subtrak-roi-card .total-title{font-weight:900;font-size:17px;color:#11403f;letter-spacing:.2px}
.subtrak-roi-card .total-amount{font-weight:900;font-size:38px;color:#0f2f2e;margin-top:6px;}
.subtrak-roi-card .roi-multiple{font-size:13px;font-weight:800;color:#11403f;margin-top:6px}
.subtrak-roi-card .bonus{font-size:15px;color:#4a4f55;font-style:italic;margin-top:12px;max-width:500px}
.subtrak-roi-card .bonus strong{font-weight:800;color:#2a2d31}
.subtrak-roi-card .cta-wrap{margin-top:10px}
.subtrak-roi-card .cta-btn{display:inline-block;padding:14px 22px;border-radius:14px;background:#FF7A3D;color:#fff;text-decoration:none;font-weight:900}
.subtrak-roi-card .cta-btn:hover{background:#333333;color:#ffffff}
.subtrak-roi-card .disclaimer-wrap{display:flex;justify-content:center;margin-top:18px}
.subtrak-roi-card .disclaimer{font-size:11.5px;color:#666;text-align:center;max-width:900px}

/* Mobile */
@media (max-width:980px){
  .subtrak-roi-card .subtrak-roi{grid-template-columns:1fr;column-gap:0}
  .subtrak-roi-card .divider{display:none}
  .subtrak-roi-card .subtrak-row{display:grid;grid-template-columns:28px auto;gap:10px;justify-content:center;width:fit-content;margin:0 auto 18px}
  .subtrak-roi-card .row-label{text-align:left}
  .subtrak-roi-card .icon{justify-self:end}
  .subtrak-roi-card .row-input{grid-column:1 / -1;width:100%;display:flex;justify-content:center}
  .subtrak-roi-card .row-input input{width:100%;max-width:300px}
  .subtrak-roi-card .inputs{margin-bottom:28px}
  .subtrak-roi-card .outputs{align-items:center;text-align:center;padding:0}
  .subtrak-roi-card .metrics,
  .subtrak-roi-card .total-card,
  .subtrak-roi-card .bonus{max-width:none;width:100%}
}