/* ============================================================
   Salary to Hourly Calculator — Calculator Widget Styles
   Companion to /css/style.css. Loaded only on pages with an
   interactive calculator widget.

   Each migrated widget keeps its ORIGINAL namespaced selector
   (e.g. #scw2, .tc) so scoped blocks never collide. Widget-
   specific blocks are appended below as each tool page is built
   in Step 3. This file holds shared calculator primitives that
   every widget can reuse.
   ============================================================ */

/* ── Shared calculator shell ── */
.calc {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calc-head {
  background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 50%, var(--color-primary) 100%);
  color: #fff;
  padding: var(--sp-8);
}
.calc-head h2 { color: #fff; font-size: var(--fs-xl); }
.calc-head p { color: rgba(255,255,255,.9); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.calc-body { padding: var(--sp-8); }

/* ── Input rows ── */
.calc-field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.calc-field label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.calc-field input,
.calc-field select {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); font-variant-numeric: tabular-nums;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.calc-field input:focus,
.calc-field select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-mid);
}
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

/* ── Segmented toggle (e.g. hourly / annual) ── */
.calc-toggle { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px; gap: 4px; }
.calc-toggle button { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-2); min-height: 40px; }
.calc-toggle button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }

/* ── Result panel ── */
.calc-result {
  margin-top: var(--sp-6); padding: var(--sp-6);
  background: var(--color-primary-light); border: 1px solid var(--color-primary-mid);
  border-radius: var(--radius);
}
.calc-result-value { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-primary-darker); font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc-result-label { font-size: var(--fs-sm); color: var(--color-text-2); margin-bottom: var(--sp-2); }
.calc-breakdown { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.calc-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-top: 1px dashed var(--color-primary-mid); font-size: var(--fs-sm); }
.calc-breakdown-row .val { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--color-text); }

@media (max-width: 768px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-head, .calc-body { padding: var(--sp-6); }
  .calc-result-value { font-size: var(--fs-2xl); }
}

/* ============================================================
   WIDGET-SPECIFIC BLOCKS (appended per tool page in Step 3)
   ------------------------------------------------------------
   /            → #scw2   (homepage salary⇄hourly)   ⬜
   /take-home-pay-calculator/ → .thp                 ⬜
   /tip-calculator/           → .tc                  ⬜
   /boiler-feed-pump-calculation/ → .bfp             ⬜
   ============================================================ */


/* ============================================================
   WIDGET: Homepage salary⇄hourly calculator (#scw2)
   Ported verbatim from source; scoped to #scw2 (no collisions).
   ============================================================ */
#scw2 *{box-sizing:border-box;margin:0;padding:0;}
#scw2{
  --blue:#059669; --blue-light:#ECFDF5; --blue-mid:#D1FAE5;
  --text:#0F172A; --text-2:#475569; --text-3:#94A3B8;
  --border:#E2E8F0; --bg:#FFFFFF; --bg-2:#F8FAFC;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  font-family:'DM Sans',sans-serif;
}
#scw2 .mono{ font-family:'IBM Plex Mono',monospace; }
/* HERO */
#scw2 .hero{
  background:linear-gradient(135deg,#065F46 0%,#047857 50%,#059669 100%);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:28px 28px 32px; color:#fff; position:relative; overflow:hidden;
}
#scw2 .hero::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:rgba(255,255,255,.06);border-radius:50%;}
#scw2 .hero::after{content:'';position:absolute;bottom:-60px;left:-20px;width:220px;height:220px;background:rgba(255,255,255,.04);border-radius:50%;}
#scw2 .hero-label{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;opacity:.7;margin-bottom:6px;}
#scw2 .hero-value{font-size:52px;font-weight:300;letter-spacing:-1px;line-height:1;margin-bottom:4px;min-height:56px;}
#scw2 .hero-sub{font-size:13px;opacity:.65;}
#scw2 .hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px;position:relative;z-index:1;}
#scw2 .hero-card{background:rgba(255,255,255,.12);border-radius:8px;padding:10px 8px;text-align:center;backdrop-filter:blur(4px);}
#scw2 .hero-card-label{font-size:10px;opacity:.65;font-weight:500;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
#scw2 .hero-card-val{font-size:14px;font-weight:600;letter-spacing:-.3px;}
/* TABS */
#scw2 .tabs{display:flex;background:var(--bg-2);border-bottom:1px solid var(--border);}
#scw2 .tab-btn{flex:1;padding:14px 12px;font-size:13px;font-weight:500;color:var(--text-3);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;}
#scw2 .tab-btn:hover{color:var(--text-2);}
#scw2 .tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--bg);}
#scw2 .tab-dot{width:6px;height:6px;background:currentColor;border-radius:50%;opacity:.5;}
#scw2 .tab-btn.active .tab-dot{opacity:1;}
/* BODY */
#scw2 .body{background:var(--bg);padding:24px;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);}
#scw2 .tab-pane{display:none;} #scw2 .tab-pane.active{display:block;}
#scw2 .field{margin-bottom:16px;}
#scw2 .field-label{display:block;font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.4px;text-transform:uppercase;margin-bottom:7px;}
#scw2 .input-wrap{position:relative;}
#scw2 .prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px;font-weight:500;pointer-events:none;}
#scw2 input[type=number]{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:15px;color:var(--text);background:var(--bg);font-weight:400;-moz-appearance:textfield;}
#scw2 input[type=number]::-webkit-inner-spin-button,#scw2 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}
#scw2 input.with-prefix{padding-left:28px;}
#scw2 input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(5,150,105,.1);}
#scw2 .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* ADVANCED */
#scw2 .adv-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--bg-2);border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;margin-top:4px;font-family:inherit;}
#scw2 .adv-toggle:hover{border-color:#6EE7B7;color:var(--blue);background:var(--blue-light);}
#scw2 .adv-chevron{font-size:10px;transition:transform .25s;}
#scw2 .adv-chevron.open{transform:rotate(180deg);}
#scw2 .adv-body{display:none;margin-top:12px;}
#scw2 .adv-body.open{display:block;}
#scw2 .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-2);border-radius:8px;margin-bottom:12px;}
#scw2 .toggle-label{font-size:13px;font-weight:500;color:var(--text-2);}
#scw2 .switch{position:relative;display:inline-block;width:42px;height:23px;}
#scw2 .switch input{opacity:0;width:0;height:0;}
#scw2 .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#CBD5E1;border-radius:23px;transition:.25s;}
#scw2 .slider:before{content:'';position:absolute;height:17px;width:17px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
#scw2 .switch input:checked + .slider{background:var(--blue);}
#scw2 .switch input:checked + .slider:before{transform:translateX(19px);}
#scw2 .ot-section{display:none;background:var(--blue-light);border:1px solid var(--blue-mid);border-radius:8px;padding:14px;margin-bottom:12px;}
#scw2 .ot-section.show{display:block;}
#scw2 .hint{font-size:11px;color:var(--text-3);margin-top:5px;}
/* CHART */
#scw2 .chart-card{margin-top:24px;border:1px solid var(--border);border-radius:12px;padding:18px 18px 8px;}
#scw2 .chart-title{font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:2px;}
#scw2 .chart-sub{font-size:12px;color:var(--text-3);margin-bottom:10px;}
#scw2 .chart-card svg{width:100%;height:auto;display:block;}
#scw2 .chart-axis-label{font-size:9px;fill:var(--text-3);font-family:'IBM Plex Mono',monospace;}
#scw2 .chart-bubble-text{font-size:11px;font-weight:700;fill:#fff;font-family:'IBM Plex Mono',monospace;}
/* TABLE */
#scw2 .table-card{margin-top:20px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
#scw2 .table-card table{width:100%;border-collapse:collapse;}
#scw2 .table-card thead th{background:var(--bg-2);text-align:left;font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;}
#scw2 .table-card thead th:last-child{text-align:right;}
#scw2 .table-card tbody td{padding:11px 16px;font-size:14px;color:var(--text);border-top:1px solid var(--border);}
#scw2 .table-card tbody td:last-child{text-align:right;font-weight:600;}
#scw2 .table-card tbody tr.hl td{background:var(--blue-light);font-weight:700;color:#047857;}
/* SHOW WORK */
#scw2 .work-card{margin-top:20px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:18px;}
#scw2 .work-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
#scw2 .work-title{font-size:12px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;}
#scw2 .copy-btn{font-size:12px;font-weight:600;color:var(--blue);background:var(--bg);border:1px solid #6EE7B7;border-radius:7px;padding:6px 12px;cursor:pointer;font-family:inherit;}
#scw2 .copy-btn:hover{background:var(--blue-light);}
#scw2 .work-steps{list-style:decimal;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-2);}
#scw2 .work-steps b{color:var(--text);}
/* SHARE BAR */
#scw2 .share-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;}
#scw2 .share-label{font-size:13px;color:var(--text-3);margin-right:4px;}
#scw2 .share-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background:transparent;cursor:pointer;color:var(--text-2);}
#scw2 .share-btn:hover{background:var(--bg-2);}
#scw2 .share-btn.whatsapp{color:#25D366;} #scw2 .share-btn.whatsapp:hover{color:#1DA851;}
#scw2 .share-btn.x:hover{color:#000;}
#scw2 .share-btn.copy:hover{color:var(--blue);}
#scw2 .share-btn.email:hover{color:var(--blue);}
#scw2 .share-tip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#0F172A;color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;}
#scw2 .share-tip.show{opacity:1;}
@media(max-width:640px){
  #scw2{max-width:100%!important;}
  #scw2 .hero{border-radius:0;padding:24px 18px 26px;}
  #scw2 .hero-value{font-size:38px;}
  #scw2 .hero-grid{gap:6px;}
  #scw2 .hero-card{padding:8px 4px;} #scw2 .hero-card-label{font-size:9px;} #scw2 .hero-card-val{font-size:12px;}
  #scw2 .body{border-radius:0;padding:18px 16px;box-shadow:none;}
  #scw2 .row{grid-template-columns:1fr;gap:10px;}
  #scw2 .tab-btn{padding:12px 8px;font-size:12px;}
}

/* --- #scw2 helper classes (replace former inline styles) --- */
#scw2{width:100%;max-width:640px;margin-left:auto;margin-right:auto;display:block;}
#scw2 .hero-inner{position:relative;z-index:1;}
/* widget sub-line: force white (global .hero-sub is dark slate and would leak in) */
#scw2 .hero-sub{color:#fff;opacity:.82;}
/* keep every result fully contained — borders/margins never stretch */
#scw2 .hero-value{font-size:clamp(28px,5.5vw,46px);overflow-wrap:anywhere;}
#scw2 .hero-card{min-width:0;}
#scw2 .hero-card-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#scw2 .table-card table{table-layout:fixed;}
#scw2 .table-card td,#scw2 .table-card th{overflow-wrap:anywhere;}
#scw2 .work-steps li{overflow-wrap:anywhere;}
#scw2 .adv-gap{height:12px;}
#scw2 .scw-note{margin-top:14px;font-size:11px;color:var(--text-3);}


/* ============================================================
   WIDGET: Take-Home Pay Calculator (.thp)
   Ported from source; scoped under .thp, adapted to the site's
   design tokens (emerald + DM Sans) — no second font, no collisions.
   ============================================================ */
.thp { width: 100%; max-width: 560px; margin-inline: auto; }
.thp .result-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius); padding: 28px 24px 24px; color: #fff;
  margin-bottom: var(--sp-2); position: relative; overflow: hidden;
}
.thp .result-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.06); }
.thp .result-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; position: relative; z-index: 1; }
.thp .result-amount { font-size: clamp(30px, 6vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-bottom: 6px; overflow-wrap: anywhere; position: relative; z-index: 1; }
.thp .result-subtitle { font-size: .8rem; opacity: .8; margin-bottom: 20px; position: relative; z-index: 1; }
.thp .result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; z-index: 1; }
.thp .result-box { background: rgba(0,0,0,.18); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; min-width: 0; }
.thp .result-box-label { font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 4px; }
.thp .result-box-value { font-size: .95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tabs */
.thp .tabs { display: flex; background: var(--color-bg); border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--color-border); border-top: none; margin-bottom: 20px; overflow: hidden; }
.thp .tab-btn { flex: 1; padding: 13px 10px; background: none; border: none; cursor: pointer; font-size: .85rem; font-weight: 500; color: var(--color-text-3); display: flex; align-items: center; justify-content: center; gap: 6px; transition: color var(--transition); min-height: 44px; }
.thp .tab-btn.active { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); font-weight: 600; }
.thp .tab-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Form */
.thp .form-card { background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); padding: 24px; margin-bottom: var(--sp-3); }
.thp .field-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-2); margin-bottom: 8px; display: block; }
.thp .input-wrapper { position: relative; margin-bottom: 18px; }
.thp .input-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-3); font-size: .95rem; font-weight: 500; }
.thp .input-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-3); font-size: .85rem; }
.thp input[type="number"], .thp select { width: 100%; padding: 12px 14px 12px 30px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; color: var(--color-text); outline: none; transition: border-color var(--transition), box-shadow var(--transition); appearance: none; background: var(--color-bg); min-height: 46px; }
.thp input[type="number"]:focus, .thp select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-mid); }
.thp input.no-prefix, .thp select.no-prefix { padding-left: 14px; }
.thp .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Status + frequency buttons */
.thp .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.thp .freq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.thp .status-btn, .thp .freq-btn { padding: 10px 8px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font-size: .78rem; font-weight: 500; color: var(--color-text-2); cursor: pointer; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition); font-family: inherit; min-height: 44px; }
.thp .freq-btn { font-size: .75rem; padding: 10px 4px; }
.thp .status-btn.active, .thp .freq-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
/* Advanced */
.thp .advanced-toggle { width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font-size: .85rem; font-weight: 500; color: var(--color-text-2); cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; font-family: inherit; transition: border-color var(--transition); min-height: 44px; }
.thp .advanced-toggle:hover { border-color: var(--color-primary); }
.thp .advanced-content { display: none; padding-top: 16px; }
.thp .advanced-content.open { display: block; }
.thp .section-title { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-3); margin: 18px 0 10px; }
/* Breakdown */
.thp .breakdown-card { background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); padding: 22px 24px; margin-bottom: var(--sp-3); }
.thp .breakdown-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-2); margin-bottom: 14px; }
.thp .breakdown-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.thp .breakdown-row:last-child { border-bottom: none; }
.thp .breakdown-row.total { font-weight: 700; font-size: 1rem; color: var(--color-primary); padding-top: 12px; }
.thp .breakdown-row .deduction { color: var(--color-danger); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.thp .breakdown-row .income { color: var(--color-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Calculate button */
.thp .calc-btn { width: 100%; margin-top: 20px; padding: 15px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: opacity var(--transition), transform var(--transition); min-height: 52px; }
.thp .calc-btn:hover { opacity: .93; }
.thp .calc-btn:active { transform: scale(.99); }
@media (max-width: 480px) {
  .thp .result-grid { grid-template-columns: repeat(2, 1fr); }
  .thp .freq-grid { grid-template-columns: repeat(2, 1fr); }
  .thp .result-amount { font-size: clamp(28px, 8vw, 40px); }
}

/* Result highlight when the Calculate button is pressed */
.thp .result-card.pulse { animation: thpPulse .8s ease; }
@keyframes thpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.45); }
  60%  { box-shadow: 0 0 0 10px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
@media (prefers-reduced-motion: reduce) { .thp .result-card.pulse { animation: none; } }


/* ============================================================
   WIDGET: Tip Calculator (.tc)
   Ported from source; fully scoped under .tc (self-contained tokens).
   Font mapped to site --font-body; inline styles replaced by classes.
   ============================================================ */
/* ── RESET & TOKENS ── */
.tc *,
.tc *::before,
.tc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tc {
  --green-dark:   #064d3b;
  --green-mid:    #057454;
  --green-main:   #05815d;
  --green-bright: #069265;
  --green-light:  #e6f7f1;
  --green-xlight: #f0fcf8;
  --navy:         #161e31;
  --navy-2:       #1b2640;
  --text:         #111827;
  --text-mid:     #374151;
  --text-muted:   #6b7280;
  --border:       #d1e8e0;
  --card-bg:      #ffffff;
  --page-bg:      #f0fcf8;
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --shadow-sm:    0 1px 3px rgba(5,129,93,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow:       0 4px 16px rgba(5,129,93,.10), 0 1px 4px rgba(0,0,0,.06);
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

/* ── GOOGLE FONT ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── HERO ── */
.tc-hero {
  background: linear-gradient(160deg, #043d2e 0%, #064d3b 50%, #076b52 100%);
  padding: 56px 24px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(6,146,101,.35) 0%, transparent 65%);
  pointer-events: none;
}
.tc-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 40px;
  background: var(--page-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.tc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6,146,101,.25);
  border: 1px solid rgba(6,146,101,.5);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 4px 14px;
  color: #6ee7b7;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.tc-hero h1 {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: -.5px;
}
.tc-hero p {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.tc-hero-pills {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tc-pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  color: rgba(255,255,255,.85);
}

/* ── WRAP ── */
.tc-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 36px 20px 70px;
}

/* ── CARD ── */
.tc-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 28px;
}
.tc-card-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--green-xlight);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tc-card-icon {
  width: 30px; height: 30px;
  background: var(--green-main);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.tc-card-head span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--green-mid);
}
.tc-card-body { padding: 26px; }

/* ── FIELDS ── */
.tc-field { margin-bottom: 22px; }
.tc-field label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.tc-input-wrap { position: relative; }
.tc-pfx {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px; font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}
.tc-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 30px;
  background: #fff;
  border: 1.5px solid #c7ddd5;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  transition: border-color .2s, box-shadow .2s;
}
.tc-input-wrap.np input { padding-left: 14px; }
.tc-input-wrap input::placeholder { color: #aab8b3; }
.tc-input-wrap input:focus {
  outline: none;
  border-color: var(--green-main);
  box-shadow: 0 0 0 3px rgba(5,129,93,.14);
}

/* ── TIP PRESET BUTTONS ── */
.tc-tip-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.tc-tbtn {
  padding: 11px 4px;
  background: #fff;
  border: 1.5px solid #c7ddd5;
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s;
}
.tc-tbtn:hover {
  border-color: var(--green-main);
  color: var(--green-main);
  background: var(--green-xlight);
}
.tc-tbtn.active {
  background: var(--green-main);
  border-color: var(--green-main);
  color: #fff;
}

/* ── RESULTS GRID ── */
.tc-results {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 10px;
}
.tc-rbox {
  background: var(--green-xlight);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 10px;
  text-align: center;
  transition: box-shadow .2s;
}
.tc-rbox.tc-main {
  background: var(--green-main);
  border-color: var(--green-bright);
  box-shadow: 0 4px 16px rgba(5,129,93,.28);
}
.tc-rlabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.tc-rbox.tc-main .tc-rlabel { color: rgba(255,255,255,.75); }
.tc-rval {
  font-size: 22px;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1;
}
.tc-rbox.tc-main .tc-rval { color: #fff; }
.tc-rsub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.tc-rbox.tc-main .tc-rsub { color: rgba(255,255,255,.65); }

/* ── INFO BAR ── */
.tc-info {
  margin-top: 18px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  font-size: 12.5px;
  color: #92400e;
  line-height: 1.5;
}

/* ── CONTENT SECTIONS ── */
.tc-section { margin-bottom: 44px; }
.tc-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green-main);
  margin-bottom: 8px;
}
.tc-section h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.3;
  letter-spacing: -.2px;
}
.tc-section p {
  font-size: 15px;
  color: var(--text-mid);
  margin-bottom: 14px;
  line-height: 1.8;
}
.tc-section p strong { color: var(--text); }
.tc-section a {
  color: var(--green-main);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(5,129,93,.3);
  transition: border-color .2s;
}
.tc-section a:hover { border-color: var(--green-main); }

/* ── GUIDE GRID ── */
.tc-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px,1fr));
  gap: 12px;
  margin: 20px 0;
}
.tc-gitem {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--green-main);
  border-radius: var(--radius-sm);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.tc-gpct { font-size: 22px; font-weight: 800; color: var(--green-mid); }
.tc-gitem h3 { font-size: 13px; font-weight: 700; color: var(--text); margin: 5px 0 3px; }
.tc-gitem p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ── FORMULA DARK CARD ── */
.tc-formula-card {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 28px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.tc-formula-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(5,129,93,.3) 0%, transparent 70%);
  pointer-events: none;
}
.tc-formula-label {
  display: inline-block;
  background: rgba(5,129,93,.25);
  border: 1px solid rgba(5,129,93,.4);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #6ee7b7;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.tc-formula-eq {
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
}
.tc-formula-eq span { color: #6ee7b7; }
.tc-formula-example {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.tc-formula-example strong { color: #6ee7b7; }

/* ── FAQ ── */
.tc-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.tc-faq-item:last-child { border: none; }
.tc-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}
.tc-arrow {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--green-xlight);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--green-main);
  transition: transform .22s, background .2s;
}
.tc-faq-item.open .tc-arrow {
  transform: rotate(180deg);
  background: var(--green-main);
  border-color: var(--green-main);
  color: #fff;
}
.tc-faq-a {
  display: none;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-top: 10px;
  padding-right: 36px;
}
.tc-faq-item.open .tc-faq-a { display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .tc-results { grid-template-columns: 1fr 1fr; }
  .tc-tip-grid { grid-template-columns: repeat(3,1fr); }
  .tc-guide { grid-template-columns: 1fr 1fr; }
  .tc-hero { padding: 44px 16px 48px; }
  .tc-card-body { padding: 18px; }
  .tc-wrap { padding: 24px 16px 50px; }
  .tc-formula-eq { font-size: 13px; }
}
@media (max-width: 400px) {
  .tc-results { grid-template-columns: 1fr 1fr; }
  .tc-tip-grid { grid-template-columns: repeat(3,1fr); }
  .tc-guide { grid-template-columns: 1fr; }
}

/* --- .tc helper rules (replace former inline styles) + button reset for FAQ --- */
.tc .tc-mt8 { margin-top: 8px; }
.tc .tc-faq-body { padding: 6px 22px; }
.tc button.tc-faq-q { width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer; }


/* ============================================================
   WIDGET: Boiler Feed Pump Calculation (#s2h-bfp)
   Ported from source; scoped to #s2h-bfp. Fonts mapped to site fonts.
   ============================================================ */
#s2h-bfp{
  --green:#10b981; --green-d:#0e9f6e; --green-dd:#0a7d5a;
  --navy:#0b1b2b; --navy2:#0f2a3f;
  --ink:#0f1b2d; --muted:#5b6b7d; --line:#e8eef3; --bg-alt:#f6f9fb;
  --amber:#f59e0b; --blue:#3b82f6;
  font-family:var(--font-body);
  color:var(--ink); line-height:1.65; max-width:860px; margin:0 auto;
  -webkit-font-smoothing:antialiased; font-size:16.5px;
}
#s2h-bfp *{box-sizing:border-box;}
#s2h-bfp h1,#s2h-bfp h2,#s2h-bfp h3{font-family:var(--font-display); color:var(--ink); line-height:1.2; margin:0 0 .5em;}
#s2h-bfp h1{font-size:clamp(28px,5.4vw,40px); font-weight:700; letter-spacing:-.5px;}
#s2h-bfp h2{font-size:clamp(22px,4vw,28px); font-weight:600; margin-top:1.8em;}
#s2h-bfp h3{font-size:18px; font-weight:600; margin-top:1.4em;}
#s2h-bfp p{margin:0 0 1.05em;}
#s2h-bfp a{color:var(--green-d); text-decoration:none; font-weight:600;}
#s2h-bfp a:hover{text-decoration:underline;}
#s2h-bfp .eyebrow{color:var(--green-d); font-weight:700; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:.5em;}
#s2h-bfp .lead{font-size:18px; color:#33414f;}
#s2h-bfp strong{font-weight:600;}

/* ---- calculator ---- */
#s2h-bfp .calc{border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 18px 50px -28px rgba(13,79,60,.45); margin:24px 0 8px;}
#s2h-bfp .calc-top{background:linear-gradient(135deg,var(--green-d),var(--green-dd)); color:#fff; padding:26px 26px 22px;}
#s2h-bfp .calc-top .lbl{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; opacity:.85; font-weight:600;}
#s2h-bfp .big-val{font-family:var(--font-mono); font-size:clamp(38px,8.5vw,54px); font-weight:600; line-height:1; margin:6px 0 4px;}
#s2h-bfp .big-sub{font-size:13.5px; opacity:.9;}
#s2h-bfp .pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
#s2h-bfp .pill{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:9px 13px; min-width:120px;}
#s2h-bfp .pill .k{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; opacity:.85;}
#s2h-bfp .pill .v{font-family:var(--font-mono); font-weight:600; font-size:17px;}
#s2h-bfp .calc-body{background:#fff; padding:24px 26px 28px;}
#s2h-bfp .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
#s2h-bfp .field{margin-bottom:4px;}
#s2h-bfp .field label{display:block; font-size:12.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
#s2h-bfp .field .hint{font-weight:400; text-transform:none; letter-spacing:0; color:#9aa7b4; font-size:12px;}
#s2h-bfp .calc input{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font-size:16px; font-family:var(--font-mono); color:var(--ink); transition:border-color .15s, box-shadow .15s; background:#fff; margin-bottom:14px;}
#s2h-bfp .calc input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(16,185,129,.18);}
#s2h-bfp .btnrow{display:flex; gap:10px; margin-top:4px;}
#s2h-bfp .btn{cursor:pointer; border:none; border-radius:12px; padding:14px; font-family:var(--font-display); font-weight:600; font-size:15px; transition:transform .12s, filter .15s;}
#s2h-bfp .btn-primary{flex:1; background:var(--green); color:#fff;}
#s2h-bfp .btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px);}
#s2h-bfp .btn-ghost{flex:0 0 auto; background:#eef4f1; color:var(--green-dd);}

/* ---- generic blocks ---- */
#s2h-bfp .panel{background:var(--navy); background-image:radial-gradient(120% 120% at 100% 0,rgba(16,185,129,.22),transparent 55%); color:#dbe7f0; border-radius:18px; padding:26px 28px; margin:22px 0;}
#s2h-bfp .panel .eyebrow{color:#5fe3b4;}
#s2h-bfp .formula{font-family:var(--font-mono); font-size:clamp(14px,3.2vw,18px); color:#fff; margin:.35em 0;}
#s2h-bfp .formula .g{color:#5fe3b4;}
#s2h-bfp .cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0;}
#s2h-bfp .card{border:1px solid var(--line); border-radius:16px; padding:20px; background:#fff; position:relative;}
#s2h-bfp .card::before{content:""; position:absolute; left:20px; right:20px; top:0; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--green),var(--blue));}
#s2h-bfp .card h3{margin-top:6px;}
#s2h-bfp .card p{margin:0; font-size:15px; color:var(--muted);}
#s2h-bfp .alt{background:var(--bg-alt); border-radius:18px; padding:24px 26px; margin:22px 0;}
#s2h-bfp table{width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:15px;}
#s2h-bfp th{text-align:left; background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:600; padding:12px 14px; font-size:13.5px;}
#s2h-bfp th:first-child{border-radius:10px 0 0 0;} #s2h-bfp th:last-child{border-radius:0 10px 0 0; text-align:right;}
#s2h-bfp td{padding:11px 14px; border-bottom:1px solid var(--line);}
#s2h-bfp td:last-child{text-align:right; font-family:var(--font-mono); color:var(--green-dd); font-weight:600;}
#s2h-bfp .note{border-left:4px solid var(--amber); background:#fffaf0; border-radius:0 12px 12px 0; padding:14px 18px; font-size:14.5px; color:#7a5b16; margin:18px 0;}
#s2h-bfp .faq details{border:1px solid var(--line); border-radius:14px; padding:2px 18px; margin-bottom:12px; background:#fff;}
#s2h-bfp .faq summary{cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:16px; padding:15px 0; list-style:none; display:flex; justify-content:space-between; align-items:center;}
#s2h-bfp .faq summary::-webkit-details-marker{display:none;}
#s2h-bfp .faq summary::after{content:"+"; color:var(--green); font-size:22px; font-weight:400;}
#s2h-bfp .faq details[open] summary::after{content:"\2212";}
#s2h-bfp .faq p{padding:0 0 16px; margin:0; color:#33414f; font-size:15.5px;}
#s2h-bfp .src{font-size:13px; color:#9aa7b4; margin-top:24px;}

@media(max-width:560px){
  #s2h-bfp .grid2{grid-template-columns:1fr;}
  #s2h-bfp .cards{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){#s2h-bfp *{transition:none!important;}}

/* --- #s2h-bfp helper classes (replace former inline styles) --- */
#s2h-bfp .pills[hidden]{display:none;}
#s2h-bfp .bfp-cap{font-size:13px;color:#9aa7b4;margin-top:6px;}
#s2h-bfp .bfp-mt{margin-top:1.2em;}
#s2h-bfp .bfp-foot{font-size:12.5px;opacity:.8;margin:1em 0 0;}