/* =============================================================
   WEKID™ ROI Calculator — light theme, site-matched
   Everything is scoped under .roi-app so it inherits the global
   WEKID tokens (--text, --muted, --accent, --line, --shadow)
   but never collides with the global .panel / .btn / .eyebrow.
   ============================================================= */

.roi-app{
  /* Local fallbacks mirror the patterns used across the WEKID pages,
     so the tool looks right even if a global token is missing. */
  --roi-card:#ffffff;
  --roi-border:rgba(176,141,42,.28);
  --roi-border-strong:rgba(176,141,42,.45);
  --roi-gold:rgba(212,175,55,1);
  --roi-gold-soft:rgba(212,175,55,.14);
  --roi-grad-a:#E8C060;
  --roi-grad-b:#C99940;
  --roi-shadow:0 18px 40px rgba(0,0,0,.14);
  --roi-shadow-sm:0 6px 18px rgba(0,0,0,.08);
  --roi-text:var(--text,#1a1409);
  --roi-muted:var(--muted,#6b6256);
  --roi-accent:var(--accent,#b08d2a);

  color:var(--roi-text);
}

.roi-app .container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---- intro band ------------------------------------------------ */
.roi-app .intro-band{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;margin:8px 0 24px;
}

/* ---- generic card / panel ------------------------------------- */
.roi-app .intro-card,
.roi-app .panel,
.roi-app .kpi{
  background:var(--roi-card);
  border:1px solid var(--roi-border);
  border-radius:20px;
  box-shadow:var(--roi-shadow-sm);
}
.roi-app .intro-card{padding:24px}
.roi-app .panel{padding:24px}
.roi-app .intro-card h2,
.roi-app .panel h3,
.roi-app .results-shell h2{margin-top:0;color:var(--roi-text)}
.roi-app .intro-card ul,
.roi-app .deployment-list{
  margin:0;padding-left:20px;color:var(--roi-muted);line-height:1.75;
}

/* ---- eyebrow / pills ------------------------------------------ */
.roi-app .eyebrow{
  display:inline-block;padding:7px 12px;border-radius:999px;
  background:var(--roi-gold-soft);border:1px solid var(--roi-border);
  color:var(--roi-accent);font-size:.8rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px;
}
.roi-app .eyebrow.small{font-size:.74rem;margin-bottom:8px}
.roi-app .pill,
.roi-app .results-badge{
  display:inline-block;padding:8px 13px;border-radius:999px;
  background:var(--roi-gold-soft);border:1px solid var(--roi-border);
  color:var(--roi-accent);font-size:.82rem;font-weight:700;
}

/* ---- control bar (scenarios + actions) ------------------------ */
.roi-app .control-bar{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  align-items:center;margin-bottom:22px;padding:16px 18px;
  border:1px solid var(--roi-border);border-radius:18px;
  background:var(--roi-card);box-shadow:var(--roi-shadow-sm);
}
.roi-app .scenario-group,
.roi-app .action-group,
.roi-app .form-actions,
.roi-app .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.roi-app .label{color:var(--roi-muted);font-size:.9rem;margin-right:6px;font-weight:600}

/* ---- buttons (calculator uses hyphenated names) --------------- */
.roi-app .btn{
  appearance:none;border:none;border-radius:12px;padding:12px 16px;
  font:inherit;font-weight:700;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.roi-app .btn:hover{transform:translateY(-1px)}
.roi-app .btn-primary{
  background:linear-gradient(135deg,var(--roi-grad-a) 0%,var(--roi-grad-b) 100%);
  color:#1a1409;border:1px solid rgba(232,192,96,.5);
  box-shadow:0 6px 20px rgba(232,192,96,.25);
}
.roi-app .btn-primary:hover{box-shadow:0 10px 28px rgba(232,192,96,.35);filter:brightness(1.04)}
.roi-app .btn-secondary{
  background:var(--roi-card);color:var(--roi-text);
  border:1px solid var(--roi-border);
}
.roi-app .btn-secondary:hover{border-color:var(--roi-accent);color:var(--roi-accent)}
.roi-app .btn-ghost{
  background:transparent;border:1px dashed var(--roi-border);color:var(--roi-muted);
}
.roi-app .btn-ghost:hover{border-color:var(--roi-accent);color:var(--roi-accent)}
.roi-app .btn-small{padding:10px 14px;font-size:.92rem}

/* ---- input panels --------------------------------------------- */
.roi-app .calculator-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
.roi-app .full-span{grid-column:1/-1}
.roi-app .panel-head,
.roi-app .results-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.roi-app .field-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.roi-app .three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.roi-app label{
  display:flex;flex-direction:column;gap:8px;
  color:var(--roi-muted);font-size:.93rem;font-weight:600;line-height:1.4;
}
.roi-app input,
.roi-app textarea,
.roi-app select{
  width:100%;padding:12px 13px;border-radius:12px;
  border:1px solid var(--roi-border);background:#fffdf8;
  color:var(--roi-text);font:inherit;font-size:1rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.roi-app input:focus,
.roi-app textarea:focus,
.roi-app select:focus{
  outline:none;border-color:var(--roi-accent);
  box-shadow:0 0 0 3px var(--roi-gold-soft);
}
.roi-app textarea{resize:vertical}
.roi-app .full-row{grid-column:1/-1}
.roi-app .fine-print{color:var(--roi-muted);line-height:1.65;font-size:.92rem}

/* ---- results -------------------------------------------------- */
.roi-app .results-shell{margin-top:30px}
.roi-app .kpi-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin:20px 0;
}
.roi-app .kpi{padding:20px}
.roi-app .kpi span{display:block;color:var(--roi-muted);font-size:.9rem;margin-bottom:8px}
.roi-app .kpi strong{font-size:1.7rem;line-height:1.15;color:var(--roi-text)}
.roi-app .results-grid,
.roi-app .lead-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}

/* benefit bars */
.roi-app .bars{display:grid;gap:12px}
.roi-app .bar-row{
  display:grid;grid-template-columns:220px 1fr 140px;gap:14px;align-items:center;
  color:var(--roi-text);font-size:.94rem;
}
.roi-app .bar-track{
  height:14px;background:#f3eedd;border:1px solid var(--roi-border);
  border-radius:999px;overflow:hidden;
}
.roi-app .bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--roi-grad-b),var(--roi-grad-a));
}

/* summary table */
.roi-app .summary-table{width:100%;border-collapse:collapse}
.roi-app .summary-table td{padding:11px 8px;border-bottom:1px solid var(--roi-border);font-size:.95rem}
.roi-app .summary-table td:first-child{color:var(--roi-muted)}
.roi-app .summary-table td:last-child{color:var(--roi-text);font-weight:600;text-align:right}

.roi-app .narrative{color:var(--roi-muted);line-height:1.75}
.roi-app .narrative strong{color:var(--roi-text)}

/* ---- responsive ----------------------------------------------- */
@media (max-width:1024px){
  .roi-app .calculator-grid,
  .roi-app .kpi-grid,
  .roi-app .results-grid,
  .roi-app .lead-grid,
  .roi-app .intro-band,
  .roi-app .field-grid,
  .roi-app .three-col{grid-template-columns:1fr}
  .roi-app .bar-row{grid-template-columns:1fr;gap:6px}
}

/* ---- print: clean one-pager of the results -------------------- */
@media print{
  .site-header,header,.footer,.site-footer,footer,
  .roi-hero,.roi-app .control-bar,.roi-app .intro-band,
  .roi-app .lead-grid,.roi-app .calculator-grid{display:none !important}
  .roi-app .results-shell{margin-top:0}
  .roi-app .panel,.roi-app .kpi{box-shadow:none;border-color:#ccc}
  body{background:#fff}
}