/* PUDU Robotics ROI Calculator — brand: FCE / TheSweeper blues. */
.tsc-calc{
  --tsc-blue:#19A9E1; --tsc-blue-lt:#1BA5DD; --tsc-navy:#002636; --tsc-ink:#221E1F;
  --tsc-line:#d9e2ea; --tsc-soft:#eef4f9; --tsc-pos:#0f7b4f; --tsc-neg:#c0392b;
  --tsc-hi:#fff8d6; --tsc-hi-bd:#e8d774;
  max-width:920px; margin:0 auto; color:var(--tsc-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5;
}
.tsc-calc *{box-sizing:border-box;}

/* Header */
.tsc-head{text-align:center; margin-bottom:26px;}
.tsc-kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tsc-blue); margin-bottom:8px;}
.tsc-title{font-size:30px; line-height:1.15; margin:0 0 10px; color:var(--tsc-navy); font-weight:800;}
.tsc-lead{margin:0 auto; max-width:640px; color:#4a5a66;}

/* Steps */
.tsc-step{border:1px solid var(--tsc-line); border-radius:14px; padding:20px 22px; margin:0 0 16px; background:#fff;}
.tsc-step-h{display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:18px; color:var(--tsc-navy); font-weight:700;}
.tsc-step-h span{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; background:var(--tsc-navy); color:#fff; font-size:14px; font-weight:700; flex:0 0 auto;}
.tsc-hint{margin:-4px 0 12px; font-size:13px; color:#6a7885;}

/* Fields */
.tsc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.tsc-grid + .tsc-grid{margin-top:14px;}
.tsc-field{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#42525d;}
.tsc-field small{font-weight:400; color:#8593a0; font-size:11.5px;}
.tsc-field input, .tsc-field select{
  font-size:15px; padding:10px 12px; border:1px solid var(--tsc-line); border-radius:9px;
  background:#fff; color:var(--tsc-ink); font-weight:600; width:100%;
}
/* Editable inputs get the spreadsheet's yellow highlight */
.tsc-field input{background:var(--tsc-hi); border-color:var(--tsc-hi-bd);}
.tsc-field input:focus, .tsc-field select:focus{outline:none; border-color:var(--tsc-blue);
  box-shadow:0 0 0 3px rgba(25,169,225,.22);}

/* Model qty table */
.tsc-models{border:1px solid var(--tsc-line); border-radius:10px; overflow:hidden;}
.tsc-models-head, .tsc-model-row{display:grid; grid-template-columns:2.2fr 1.1fr 1fr 1.1fr .8fr; align-items:center; gap:10px;}
.tsc-models-head{background:var(--tsc-navy); color:#fff; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; padding:10px 14px;}
.tsc-model-row{padding:12px 14px; border-top:1px solid var(--tsc-line); font-size:13.5px; color:#42525d;}
.tsc-model-row:nth-child(odd){background:var(--tsc-soft);}
.tsc-model-name{font-weight:700; color:var(--tsc-navy); font-size:14.5px;}
.tsc-qty input{width:100%; padding:9px 10px; text-align:center; font-size:15px; font-weight:700;
  border:1px solid var(--tsc-hi-bd); border-radius:8px; background:var(--tsc-hi);}
.tsc-qty input:focus{outline:none; border-color:var(--tsc-blue); box-shadow:0 0 0 3px rgba(25,169,225,.22);}

/* Scenario tabs */
.tsc-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.tsc-tab{flex:1 1 auto; min-width:120px; padding:12px 14px; border:1px solid var(--tsc-line);
  background:#fff; color:#5a6873; font-weight:700; font-size:14px; border-radius:10px; cursor:pointer;
  transition:.15s;}
.tsc-tab:hover{border-color:var(--tsc-blue); color:var(--tsc-navy);}
.tsc-tab.is-active{background:linear-gradient(90deg,var(--tsc-blue-lt),var(--tsc-navy)); color:#fff; border-color:transparent;}
.tsc-scn{display:none;} .tsc-scn.is-active{display:block;}

/* CTA */
.tsc-btn{display:block; width:100%; margin-top:18px; padding:15px 24px; border:0; border-radius:50px;
  background:linear-gradient(90deg,var(--tsc-blue-lt),var(--tsc-navy)); color:#fff; font-size:17px;
  font-weight:700; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.28); transition:.15s;}
.tsc-btn:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.32);}

/* Results */
.tsc-results{margin-top:22px;}
.tsc-results:empty{margin-top:0;}
.tsc-loading{text-align:center; color:#6a7885; padding:20px;}
.tsc-err{background:#fdecea; color:var(--tsc-neg); padding:14px 16px; border-radius:10px; font-weight:600;}
.tsc-rh{margin:24px 0 10px; font-size:15px; color:var(--tsc-navy); font-weight:700;}

.tsc-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.tsc-kpi{background:var(--tsc-navy); color:#fff; border-radius:14px; padding:18px 16px; text-align:center;}
.tsc-kpi.tsc-pos{background:linear-gradient(160deg,#0f7b4f,#0a5c3b);}
.tsc-kpi.tsc-neg{background:linear-gradient(160deg,#c0392b,#8e2a20);}
.tsc-kpi-v{display:block; font-size:26px; font-weight:800; line-height:1.1;}
.tsc-kpi-v small{font-size:14px; font-weight:600; opacity:.85;}
.tsc-kpi-l{display:block; margin-top:6px; font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:.04em;}

.tsc-table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:4px;}
.tsc-table th{background:var(--tsc-soft); color:#42525d; text-align:right; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.03em; padding:9px 12px; border-bottom:1px solid var(--tsc-line);}
.tsc-table th:first-child{text-align:left;}
.tsc-table td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--tsc-line);}
.tsc-table td:first-child{text-align:left; font-weight:600; color:#42525d;}
.tsc-table tbody tr:last-child td{border-bottom:0;}
.tsc-tr-tot td{font-weight:800; color:var(--tsc-navy); background:var(--tsc-soft);}
.tsc-pos{color:var(--tsc-pos); font-weight:700;} .tsc-neg{color:var(--tsc-neg); font-weight:700;}
/* On the colored KPI tiles the value/label must stay white (the .tsc-pos/.tsc-neg
   text color would otherwise render green-on-green / red-on-red and be illegible) */
.tsc-kpi.tsc-pos, .tsc-kpi.tsc-neg,
.tsc-kpi.tsc-pos .tsc-kpi-v, .tsc-kpi.tsc-pos .tsc-kpi-l,
.tsc-kpi.tsc-neg .tsc-kpi-v, .tsc-kpi.tsc-neg .tsc-kpi-l,
.tsc-kpi.tsc-pos .tsc-pos, .tsc-kpi.tsc-neg .tsc-neg{color:#fff !important;}
.tsc-contact{background:var(--tsc-soft); border:1px solid var(--tsc-line); border-radius:12px; padding:18px 20px;}
.tsc-contact strong{color:var(--tsc-navy); font-size:16px;}

.tsc-note{margin-top:18px; font-size:11.5px; color:#8593a0; text-align:center; line-height:1.5;}

/* Inline recap (persists after the modal closes) */
.tsc-recap{background:var(--tsc-soft); border:1px solid var(--tsc-line); border-radius:12px;
  padding:14px 18px; font-size:15px; color:var(--tsc-navy);}
.tsc-recap-link{background:none; border:0; padding:0; margin-left:6px; color:var(--tsc-blue);
  font-weight:700; font-size:15px; cursor:pointer; text-decoration:underline;}

/* ---------- Results modal ---------- */
.tsc-modal[hidden]{display:none;}
.tsc-modal{position:fixed; inset:0; z-index:99999; display:flex; align-items:flex-start;
  justify-content:center; padding:5vh 16px; overflow:auto;}
.tsc-modal-back{position:fixed; inset:0; background:rgba(4,20,30,.6); backdrop-filter:blur(2px);}
.tsc-confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:5;}
.tsc-modal-card{position:relative; z-index:3; width:100%; max-width:760px; background:#fff;
  border-radius:18px; box-shadow:0 30px 80px -20px rgba(0,20,30,.55); padding:30px 30px 26px;
  animation:tsc-pop .22s ease;}
.tsc-modal-card:focus{outline:none;}
@keyframes tsc-pop{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.tsc-modal-card{animation:none;}}
.tsc-modal-x{position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%;
  background:var(--tsc-soft); color:#42525d; font-size:22px; line-height:1; cursor:pointer;}
.tsc-modal-x:hover{background:#e2ebf2; color:var(--tsc-navy);}

/* Recommendation banner */
.tsc-rec{text-align:center; max-width:560px; margin:0 auto 20px;}
.tsc-rec-kicker{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tsc-blue); margin-bottom:8px;}
.tsc-rec-h{margin:0 0 8px; font-size:26px; line-height:1.15; font-weight:800; color:var(--tsc-navy);}
.tsc-rec-p{margin:0; color:#4a5a66; font-size:15px; line-height:1.55;}
.tsc-rec-p b{color:var(--tsc-navy);}

/* Option cards */
.tsc-opts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px;}
.tsc-opt{position:relative; text-align:left; border:1.5px solid var(--tsc-line); border-radius:14px;
  background:#fff; padding:16px 16px 14px; cursor:pointer; display:flex; flex-direction:column;
  gap:3px; transition:.15s; font-family:inherit;}
.tsc-opt:hover{border-color:var(--tsc-blue);}
.tsc-opt.is-sel{border-color:var(--tsc-blue); box-shadow:0 0 0 3px rgba(25,169,225,.18);}
.tsc-opt.is-best{border-color:var(--tsc-blue-lt);
  background:linear-gradient(180deg,#f2fbff,#fff);}
.tsc-opt-badge{position:absolute; top:-10px; left:14px; background:linear-gradient(90deg,var(--tsc-blue-lt),var(--tsc-navy));
  color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;}
.tsc-opt-label{font-size:12.5px; font-weight:700; color:#5a6873; text-transform:uppercase; letter-spacing:.03em;}
.tsc-opt-big{font-size:23px; font-weight:800; color:var(--tsc-navy); line-height:1.1;}
.tsc-opt-big small{font-size:13px; font-weight:600; opacity:.8;}
.tsc-opt-sub{font-size:13px; color:var(--tsc-pos); font-weight:700;}
.tsc-opt-tag{font-size:11.5px; color:#8593a0; margin-top:2px;}
/* Neutralize the theme's global button :focus/:active magenta bleed on the option cards */
.tsc-calc .tsc-opt:hover, .tsc-calc .tsc-opt:focus, .tsc-calc .tsc-opt:focus-visible, .tsc-calc .tsc-opt:active{
  background:#fff !important; color:var(--tsc-ink) !important;}
.tsc-calc .tsc-opt.is-best, .tsc-calc .tsc-opt.is-best:hover, .tsc-calc .tsc-opt.is-best:focus,
.tsc-calc .tsc-opt.is-best:focus-visible, .tsc-calc .tsc-opt.is-best:active{
  background:linear-gradient(180deg,#f2fbff,#fff) !important; color:var(--tsc-ink) !important;}
.tsc-calc .tsc-opt-big{color:var(--tsc-navy) !important;}
.tsc-calc .tsc-opt-sub{color:var(--tsc-pos) !important;}
.tsc-calc .tsc-modal-x:hover, .tsc-calc .tsc-modal-x:focus, .tsc-calc .tsc-modal-x:active{
  background:#e2ebf2 !important; color:var(--tsc-navy) !important;}

.tsc-detail-head{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#8593a0; border-top:1px solid var(--tsc-line); padding-top:16px; margin-bottom:6px;}
.tsc-detail .tsc-kpis{margin-top:8px;}
.tsc-taxnote{font-size:11.5px; color:#8593a0; margin:14px 0 0; line-height:1.5;}
.tsc-cta2{display:block; text-align:center; margin-top:14px; padding:14px 24px; border-radius:50px;
  background:linear-gradient(90deg,var(--tsc-blue-lt),var(--tsc-navy)); color:#fff; font-weight:700;
  font-size:16px; text-decoration:none;}
.tsc-cta2:hover{filter:brightness(1.05);}

/* Formal-quote modal (HubSpot FCE - PUDU Form - Default) */
.tsc-quote-card{max-width:560px;}
.tsc-quote-h{font-size:23px; font-weight:800; color:var(--tsc-navy); margin:0 0 6px;}
.tsc-quote-sub{font-size:14px; color:#46606e; line-height:1.5; margin:0 0 18px;}

/* Responsive */
@media (max-width:760px){
  .tsc-title{font-size:24px;}
  .tsc-kpis{grid-template-columns:1fr;}
  .tsc-models-head{display:none;}
  .tsc-model-row{grid-template-columns:1fr 1fr; gap:6px 12px; padding:14px;}
  .tsc-model-name{grid-column:1 / -1; margin-bottom:2px;}
  .tsc-model-row span[data-lbl]::before{content:attr(data-lbl) ": "; color:#8593a0; font-weight:600;}
  .tsc-qty{grid-column:1 / -1; display:flex; align-items:center; gap:10px;}
  .tsc-qty::before{content:"Quantity"; font-weight:700; color:var(--tsc-navy);}
  .tsc-qty input{max-width:90px;}
  .tsc-modal-card{padding:24px 18px 20px;}
  .tsc-rec-h{font-size:22px;}
  .tsc-opts{grid-template-columns:1fr;}
}

/* tsc-calc-anchor-offset — deep-link target (#tsc-calc). The site header is
   position:fixed and 175px tall on desktop, so a raw anchor jump parks the
   calculator title behind it. scroll-margin-top pushes the landing point down.
   Mobile has no fixed header at that scroll depth, so it only needs a small gap. */
#tsc-calc{scroll-margin-top:190px;}
@media (max-width:1024px){ #tsc-calc{scroll-margin-top:120px;} }
@media (max-width:760px){  #tsc-calc{scroll-margin-top:16px;} }