Loan Calculator | Cornerstone Commercial Capital<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Libre+Baskerville:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --slate-900: #1e293b;\n --slate-800: #1e3042;\n --slate-700: #334155;\n --slate-600: #475569;\n --slate-500: #64748b;\n --slate-400: #94a3b8;\n --slate-300: #cbd5e1;\n --slate-200: #e2e8f0;\n --slate-100: #f1f5f9;\n --slate-50: #f8fafc;\n --sand-700: #92744e;\n --sand-600: #a68558;\n --sand-500: #b8976a;\n --sand-400: #c9ad82;\n --sand-300: #d9c4a0;\n --sand-200: #e8dbc3;\n --sand-100: #f3ede2;\n --sand-50: #faf7f2;\n --white: #ffffff;\n --radius: 10px;\n --shadow-sm: 0 1px 3px rgba(30,41,59,0.06);\n --shadow-md: 0 4px 16px rgba(30,41,59,0.08);\n --shadow-lg: 0 12px 40px rgba(30,41,59,0.12);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n\n .calculator {\n width: 100%;\n max-width: 960px;\n background: var(--white);\n border-radius: 16px;\n box-shadow: var(--shadow-lg);\n overflow: hidden;\n }\n\n \/* Header *\/\n .calc-header {\n background: var(--slate-900);\n padding: 28px 36px;\n display: flex;\n align-items: center;\n gap: 16px;\n position: relative;\n overflow: hidden;\n }\n .calc-header::before {\n content: '';\n position: absolute;\n top: -40px; right: -40px;\n width: 180px; height: 180px;\n background: radial-gradient(circle, var(--sand-600) 0%, transparent 70%);\n opacity: 0.12;\n }\n .header-icon {\n width: 44px; height: 44px;\n background: var(--sand-600);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .header-icon svg { width: 24px; height: 24px; fill: var(--white); }\n .header-text h1 {\n font-family: 'Libre Baskerville', serif;\n font-size: 20px;\n font-weight: 700;\n color: var(--white);\n letter-spacing: -0.01em;\n }\n .header-text p {\n font-size: 13px;\n color: var(--slate-400);\n margin-top: 2px;\n }\n\n \/* Tabs *\/\n .tabs {\n display: flex;\n background: var(--slate-100);\n padding: 4px;\n margin: 24px 36px 0;\n border-radius: 8px;\n gap: 4px;\n }\n .tab {\n flex: 1;\n padding: 11px 16px;\n font-size: 14px;\n font-weight: 600;\n color: var(--slate-500);\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n font-family: 'DM Sans', sans-serif;\n }\n .tab:hover { color: var(--slate-700); }\n .tab.active {\n background: var(--white);\n color: var(--slate-900);\n box-shadow: var(--shadow-sm);\n }\n\n \/* Body *\/\n .calc-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0;\n padding: 28px 36px 36px;\n }\n @media (max-width: 680px) {\n .calc-body { grid-template-columns: 1fr; }\n .calc-header { padding: 22px 20px; }\n .tabs { margin: 20px 20px 0; }\n .calc-body { padding: 22px 20px 28px; }\n .results { border-left: none !important; border-top: 1px solid var(--slate-200); padding-left: 0 !important; padding-top: 28px !important; margin-top: 8px; }\n }\n\n \/* Inputs side *\/\n .inputs { padding-right: 32px; display: flex; flex-direction: column; gap: 20px; }\n\n .field label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--slate-500);\n margin-bottom: 7px;\n }\n .field input, .field select {\n width: 100%;\n padding: 12px 14px;\n font-size: 16px;\n font-family: 'DM Sans', sans-serif;\n font-weight: 500;\n border: 1.5px solid var(--slate-200);\n border-radius: 8px;\n color: var(--slate-800);\n background: var(--slate-50);\n transition: border-color 0.2s;\n outline: none;\n }\n .field input:focus, .field select:focus {\n border-color: var(--sand-500);\n background: var(--white);\n }\n .field .input-with-prefix {\n position: relative;\n }\n .field .input-with-prefix .prefix {\n position: absolute;\n left: 14px; top: 50%; transform: translateY(-50%);\n font-size: 16px; font-weight: 500; color: var(--slate-400);\n pointer-events: none;\n }\n .field .input-with-prefix input { padding-left: 28px; }\n .field .input-with-suffix {\n position: relative;\n }\n .field .input-with-suffix .suffix {\n position: absolute;\n right: 14px; top: 50%; transform: translateY(-50%);\n font-size: 14px; font-weight: 500; color: var(--slate-400);\n pointer-events: none;\n }\n .field .input-with-suffix input { padding-right: 48px; }\n\n .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n\n \/* Results side *\/\n .results {\n padding-left: 32px;\n border-left: 1px solid var(--slate-200);\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .result-primary {\n text-align: center;\n padding: 20px 0 24px;\n }\n .result-primary .label {\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--slate-500);\n margin-bottom: 6px;\n }\n .result-primary .value {\n font-family: 'Libre Baskerville', serif;\n font-size: 42px;\n font-weight: 700;\n color: var(--slate-900);\n letter-spacing: -0.02em;\n line-height: 1.1;\n }\n .result-primary .per-month {\n font-size: 14px;\n color: var(--slate-500);\n margin-top: 4px;\n }\n\n .result-details {\n display: flex;\n flex-direction: column;\n gap: 0;\n background: var(--sand-50);\n border-radius: var(--radius);\n border: 1px solid var(--sand-200);\n overflow: hidden;\n }\n .result-row {\n display: flex;\n justify-content: space-between;\n padding: 13px 18px;\n font-size: 14px;\n border-bottom: 1px solid var(--sand-200);\n }\n .result-row:last-child { border-bottom: none; }\n .result-row .rlabel { color: var(--slate-600); }\n .result-row .rvalue { font-weight: 600; color: var(--slate-900); }\n .result-row.highlight {\n background: var(--slate-900);\n }\n .result-row.highlight .rlabel { color: var(--slate-400); }\n .result-row.highlight .rvalue { color: var(--sand-400); font-weight: 700; }\n\n \/* Disclaimer *\/\n .disclaimer {\n padding: 16px 36px 22px;\n font-size: 11px;\n color: var(--slate-400);\n line-height: 1.5;\n border-top: 1px solid var(--slate-100);\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"calculator\">\n <div class=\"calc-header\">\n <div class=\"header-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 13h1v7c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-7h1a1 1 0 0 0 .7-1.7l-9-9a1 1 0 0 0-1.4 0l-9 9A1 1 0 0 0 3 13zm7 7v-5h4v5h-4zm2-15.6 7 7V20h-3v-5c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v5H6v-8.6l6-6z\"\/><\/svg>\n <\/div>\n <div class=\"header-text\">\n <h1>Loan Calculator<\/h1>\n <p>Cornerstone Commercial Capital<\/p>\n <\/div>\n <\/div>\n\n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"switchTab('bridge')\">Bridge \/ Hard Money<\/button>\n <button class=\"tab\" onclick=\"switchTab('conventional')\">Conventional Mortgage<\/button>\n <\/div>\n\n <div class=\"calc-body\">\n <div class=\"inputs\" id=\"inputs\"><\/div>\n <div class=\"results\" id=\"results\"><\/div>\n <\/div>\n\n <div class=\"disclaimer\">\n For estimation purposes only. Actual terms, rates, and fees may vary. Does not include taxes, insurance, or other costs. Contact Cornerstone Commercial Capital for a formal quote.\n <\/div>\n<\/div>\n\n<script>\n let currentTab = 'bridge';\n\n function switchTab(tab) {\n currentTab = tab;\n document.querySelectorAll('.tab').forEach((t, i) => {\n t.classList.toggle('active', (i === 0 && tab === 'bridge') || (i === 1 && tab === 'conventional'));\n });\n renderInputs();\n calculate();\n }\n\n function renderInputs() {\n const el = document.getElementById('inputs');\n if (currentTab === 'bridge') {\n el.innerHTML = `\n <div class=\"field\">\n <label>Loan Amount<\/label>\n <div class=\"input-with-prefix\">\n <span class=\"prefix\">$<\/span>\n <input type=\"text\" id=\"loanAmount\" value=\"500,000\" oninput=\"formatAndCalc(this)\" \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div class=\"field\">\n <label>Interest Rate<\/label>\n <div class=\"input-with-suffix\">\n <input type=\"number\" id=\"rate\" value=\"12\" step=\"0.25\" min=\"0\" oninput=\"calculate()\" \/>\n <span class=\"suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Term (Months)<\/label>\n <input type=\"number\" id=\"term\" value=\"12\" min=\"1\" max=\"60\" oninput=\"calculate()\" \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div class=\"field\">\n <label>Origination Fee<\/label>\n <div class=\"input-with-suffix\">\n <input type=\"number\" id=\"origFee\" value=\"1\" step=\"0.25\" min=\"0\" oninput=\"calculate()\" \/>\n <span class=\"suffix\">pts<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Payment Type<\/label>\n <select id=\"payType\" onchange=\"calculate()\">\n <option value=\"io\" selected>Interest Only<\/option>\n <option value=\"amort\">Amortizing<\/option>\n <\/select>\n <\/div>\n <\/div>\n `;\n } else {\n el.innerHTML = `\n <div class=\"field\">\n <label>Loan Amount<\/label>\n <div class=\"input-with-prefix\">\n <span class=\"prefix\">$<\/span>\n <input type=\"text\" id=\"loanAmount\" value=\"350,000\" oninput=\"formatAndCalc(this)\" \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div class=\"field\">\n <label>Interest Rate<\/label>\n <div class=\"input-with-suffix\">\n <input type=\"number\" id=\"rate\" value=\"7.0\" step=\"0.125\" min=\"0\" oninput=\"calculate()\" \/>\n <span class=\"suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Term (Years)<\/label>\n <select id=\"termYears\" onchange=\"calculate()\">\n <option value=\"15\">15 Years<\/option>\n <option value=\"20\">20 Years<\/option>\n <option value=\"25\">25 Years<\/option>\n <option value=\"30\" selected>30 Years<\/option>\n <\/select>\n <\/div>\n <\/div>\n `;\n }\n }\n\n function formatAndCalc(input) {\n let v = input.value.replace(\/[^0-9]\/g, '');\n if (v) input.value = Number(v).toLocaleString('en-US');\n calculate();\n }\n\n function parseCurrency(str) {\n return Number(String(str).replace(\/[^0-9.]\/g, '')) || 0;\n }\n\n function fmt(n) {\n return n.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });\n }\n function fmt2(n) {\n return n.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 });\n }\n\n function calculate() {\n const res = document.getElementById('results');\n const loan = parseCurrency(document.getElementById('loanAmount')?.value);\n\n if (currentTab === 'bridge') {\n const rate = parseFloat(document.getElementById('rate')?.value) || 0;\n const term = parseInt(document.getElementById('term')?.value) || 1;\n const origPts = parseFloat(document.getElementById('origFee')?.value) || 0;\n const payType = document.getElementById('payType')?.value || 'io';\n const monthlyRate = rate \/ 100 \/ 12;\n const origFee = loan * (origPts \/ 100);\n\n let monthlyPayment;\n if (payType === 'io') {\n monthlyPayment = loan * monthlyRate;\n } else {\n if (monthlyRate === 0) {\n monthlyPayment = loan \/ term;\n } else {\n monthlyPayment = loan * (monthlyRate * Math.pow(1 + monthlyRate, term)) \/ (Math.pow(1 + monthlyRate, term) - 1);\n }\n }\n\n const totalInterest = payType === 'io' ? monthlyPayment * term : (monthlyPayment * term) - loan;\n const totalCost = totalInterest + origFee;\n\n res.innerHTML = `\n <div class=\"result-primary\">\n <div class=\"label\">Monthly Payment<\/div>\n <div class=\"value\">${fmt(monthlyPayment)}<\/div>\n <div class=\"per-month\">${payType === 'io' ? 'Interest only' : 'Principal & interest'}<\/div>\n <\/div>\n <div class=\"result-details\">\n <div class=\"result-row\">\n <span class=\"rlabel\">Loan Amount<\/span>\n <span class=\"rvalue\">${fmt(loan)}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"rlabel\">Origination Fee (${origPts} pts)<\/span>\n <span class=\"rvalue\">${fmt(origFee)}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"rlabel\">Total Interest (${term} mo)<\/span>\n <span class=\"rvalue\">${fmt(totalInterest)}<\/span>\n <\/div>\n <div class=\"result-row highlight\">\n <span class=\"rlabel\">Total Loan Cost<\/span>\n <span class=\"rvalue\">${fmt(totalCost)}<\/span>\n <\/div>\n <\/div>\n `;\n } else {\n const rate = parseFloat(document.getElementById('rate')?.value) || 0;\n const years = parseInt(document.getElementById('termYears')?.value) || 30;\n const months = years * 12;\n const monthlyRate = rate \/ 100 \/ 12;\n\n let monthlyPayment;\n if (monthlyRate === 0) {\n monthlyPayment = loan \/ months;\n } else {\n monthlyPayment = loan * (monthlyRate * Math.pow(1 + monthlyRate, months)) \/ (Math.pow(1 + monthlyRate, months) - 1);\n }\n\n const totalPaid = monthlyPayment * months;\n const totalInterest = totalPaid - loan;\n\n res.innerHTML = `\n <div class=\"result-primary\">\n <div class=\"label\">Monthly Payment<\/div>\n <div class=\"value\">${fmt(monthlyPayment)}<\/div>\n <div class=\"per-month\">Principal & interest<\/div>\n <\/div>\n <div class=\"result-details\">\n <div class=\"result-row\">\n <span class=\"rlabel\">Loan Amount<\/span>\n <span class=\"rvalue\">${fmt(loan)}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"rlabel\">Total Interest (${years} yr)<\/span>\n <span class=\"rvalue\">${fmt(totalInterest)}<\/span>\n <\/div>\n <div class=\"result-row highlight\">\n <span class=\"rlabel\">Total Paid<\/span>\n <span class=\"rvalue\">${fmt(totalPaid)}<\/span>\n <\/div>\n <\/div>\n `;\n }\n }\n\n renderInputs();\n calculate();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loan Calculator | Cornerstone Commercial Capital Loan Calculator Cornerstone Commercial Capital Bridge \/ Hard Money Conventional Mortgage For estimation purposes only. Actual terms, rates, and fees may vary. Does not include taxes, insurance, or other costs. Contact Cornerstone Commercial Capital for a formal quote.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1442","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages\/1442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/comments?post=1442"}],"version-history":[{"count":16,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages\/1442\/revisions"}],"predecessor-version":[{"id":1461,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages\/1442\/revisions\/1461"}],"wp:attachment":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/media?parent=1442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\nLoan Calculator | Cornerstone Commercial Capital<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Libre+Baskerville:wght@400;700&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --slate-900: #1e293b;\n --slate-800: #1e3042;\n --slate-700: #334155;\n --slate-600: #475569;\n --slate-500: #64748b;\n --slate-400: #94a3b8;\n --slate-300: #cbd5e1;\n --slate-200: #e2e8f0;\n --slate-100: #f1f5f9;\n --slate-50: #f8fafc;\n --sand-700: #92744e;\n --sand-600: #a68558;\n --sand-500: #b8976a;\n --sand-400: #c9ad82;\n --sand-300: #d9c4a0;\n --sand-200: #e8dbc3;\n --sand-100: #f3ede2;\n --sand-50: #faf7f2;\n --white: #ffffff;\n --radius: 10px;\n --shadow-sm: 0 1px 3px rgba(30,41,59,0.06);\n --shadow-md: 0 4px 16px rgba(30,41,59,0.08);\n --shadow-lg: 0 12px 40px rgba(30,41,59,0.12);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n\n .calculator {\n width: 100%;\n max-width: 960px;\n background: var(--white);\n border-radius: 16px;\n box-shadow: var(--shadow-lg);\n overflow: hidden;\n }\n\n \/* Header *\/\n .calc-header {\n background: var(--slate-900);\n padding: 28px 36px;\n display: flex;\n align-items: center;\n gap: 16px;\n position: relative;\n overflow: hidden;\n }\n .calc-header::before {\n content: '';\n position: absolute;\n top: -40px; right: -40px;\n width: 180px; height: 180px;\n background: radial-gradient(circle, var(--sand-600) 0%, transparent 70%);\n opacity: 0.12;\n }\n .header-icon {\n width: 44px; height: 44px;\n background: var(--sand-600);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .header-icon svg { width: 24px; height: 24px; fill: var(--white); }\n .header-text h1 {\n font-family: 'Libre Baskerville', serif;\n font-size: 20px;\n font-weight: 700;\n color: var(--white);\n letter-spacing: -0.01em;\n }\n .header-text p {\n font-size: 13px;\n color: var(--slate-400);\n margin-top: 2px;\n }\n\n \/* Tabs *\/\n .tabs {\n display: flex;\n background: var(--slate-100);\n padding: 4px;\n margin: 24px 36px 0;\n border-radius: 8px;\n gap: 4px;\n }\n .tab {\n flex: 1;\n padding: 11px 16px;\n font-size: 14px;\n font-weight: 600;\n color: var(--slate-500);\n background: transparent;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n font-family: 'DM Sans', sans-serif;\n }\n .tab:hover { color: var(--slate-700); }\n .tab.active {\n background: var(--white);\n color: var(--slate-900);\n box-shadow: var(--shadow-sm);\n }\n\n \/* Body *\/\n .calc-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0;\n padding: 28px 36px 36px;\n }\n @media (max-width: 680px) {\n .calc-body { grid-template-columns: 1fr; }\n .calc-header { padding: 22px 20px; }\n .tabs { margin: 20px 20px 0; }\n .calc-body { padding: 22px 20px 28px; }\n .results { border-left: none !important; border-top: 1px solid var(--slate-200); padding-left: 0 !important; padding-top: 28px !important; margin-top: 8px; }\n }\n\n \/* Inputs side *\/\n .inputs { padding-right: 32px; display: flex; flex-direction: column; gap: 20px; }\n\n .field label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--slate-500);\n margin-bottom: 7px;\n }\n .field input, .field select {\n width: 100%;\n padding: 12px 14px;\n font-size: 16px;\n font-family: 'DM Sans', sans-serif;\n font-weight: 500;\n border: 1.5px solid var(--slate-200);\n border-radius: 8px;\n color: var(--slate-800);\n background: var(--slate-50);\n transition: border-color 0.2s;\n outline: none;\n }\n .field input:focus, .field select:focus {\n border-color: var(--sand-500);\n background: var(--white);\n }\n .field .input-with-prefix {\n position: relative;\n }\n .field .input-with-prefix .prefix {\n position: absolute;\n left: 14px; top: 50%; transform: translateY(-50%);\n font-size: 16px; font-weight: 500; color: var(--slate-400);\n pointer-events: none;\n }\n .field .input-with-prefix input { padding-left: 28px; }\n .field .input-with-suffix {\n position: relative;\n }\n .field .input-with-suffix .suffix {\n position: absolute;\n right: 14px; top: 50%; transform: translateY(-50%);\n font-size: 14px; font-weight: 500; color: var(--slate-400);\n pointer-events: none;\n }\n .field .input-with-suffix input { padding-right: 48px; }\n\n .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n\n \/* Results side *\/\n .results {\n padding-left: 32px;\n border-left: 1px solid var(--slate-200);\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .result-primary {\n text-align: center;\n padding: 20px 0 24px;\n }\n .result-primary .label {\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--slate-500);\n margin-bottom: 6px;\n }\n .result-primary .value {\n font-family: 'Libre Baskerville', serif;\n font-size: 42px;\n font-weight: 700;\n color: var(--slate-900);\n letter-spacing: -0.02em;\n line-height: 1.1;\n }\n .result-primary .per-month {\n font-size: 14px;\n color: var(--slate-500);\n margin-top: 4px;\n }\n\n .result-details {\n display: flex;\n flex-direction: column;\n gap: 0;\n background: var(--sand-50);\n border-radius: var(--radius);\n border: 1px solid var(--sand-200);\n overflow: hidden;\n }\n .result-row {\n display: flex;\n justify-content: space-between;\n padding: 13px 18px;\n font-size: 14px;\n border-bottom: 1px solid var(--sand-200);\n }\n .result-row:last-child { border-bottom: none; }\n .result-row .rlabel { color: var(--slate-600); }\n .result-row .rvalue { font-weight: 600; color: var(--slate-900); }\n .result-row.highlight {\n background: var(--slate-900);\n }\n .result-row.highlight .rlabel { color: var(--slate-400); }\n .result-row.highlight .rvalue { color: var(--sand-400); font-weight: 700; }\n\n \/* Disclaimer *\/\n .disclaimer {\n padding: 16px 36px 22px;\n font-size: 11px;\n color: var(--slate-400);\n line-height: 1.5;\n border-top: 1px solid var(--slate-100);\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"calculator\">\n <div class=\"calc-header\">\n <div class=\"header-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 13h1v7c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-7h1a1 1 0 0 0 .7-1.7l-9-9a1 1 0 0 0-1.4 0l-9 9A1 1 0 0 0 3 13zm7 7v-5h4v5h-4zm2-15.6 7 7V20h-3v-5c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v5H6v-8.6l6-6z\"\/><\/svg>\n <\/div>\n <div class=\"header-text\">\n <h1>Loan Calculator<\/h1>\n <p>Cornerstone Commercial Capital<\/p>\n <\/div>\n <\/div>\n\n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"switchTab('bridge')\">Bridge \/ Hard Money<\/button>\n <button class=\"tab\" onclick=\"switchTab('conventional')\">Conventional Mortgage<\/button>\n <\/div>\n\n <div class=\"calc-body\">\n <div class=\"inputs\" id=\"inputs\"><\/div>\n <div class=\"results\" id=\"results\"><\/div>\n <\/div>\n\n <div class=\"disclaimer\">\n For estimation purposes only. Actual terms, rates, and fees may vary. Does not include taxes, insurance, or other costs. Contact Cornerstone Commercial Capital for a formal quote.\n <\/div>\n<\/div>\n\n<script>\n let currentTab = 'bridge';\n\n function switchTab(tab) {\n currentTab = tab;\n document.querySelectorAll('.tab').forEach((t, i) => {\n t.classList.toggle('active', (i === 0 && tab === 'bridge') || (i === 1 && tab === 'conventional'));\n });\n renderInputs();\n calculate();\n }\n\n function renderInputs() {\n const el = document.getElementById('inputs');\n if (currentTab === 'bridge') {\n el.innerHTML = `\n <div class=\"field\">\n <label>Loan Amount<\/label>\n <div class=\"input-with-prefix\">\n <span class=\"prefix\">$<\/span>\n <input type=\"text\" id=\"loanAmount\" value=\"500,000\" oninput=\"formatAndCalc(this)\" \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div class=\"field\">\n <label>Interest Rate<\/label>\n <div class=\"input-with-suffix\">\n <input type=\"number\" id=\"rate\" value=\"12\" step=\"0.25\" min=\"0\" oninput=\"calculate()\" \/>\n <span class=\"suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Term (Months)<\/label>\n <input type=\"number\" id=\"term\" value=\"12\" min=\"1\" max=\"60\" oninput=\"calculate()\" \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div class=\"field\">\n <label>Origination Fee<\/label>\n <div class=\"input-with-suffix\">\n <input type=\"number\" id=\"origFee\" value=\"1\" step=\"0.25\" min=\"0\" oninput=\"calculate()\" \/>\n <span class=\"suffix\">pts<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Payment Type<\/label>\n <select id=\"payType\" onchange=\"calculate()\">\n <option value=\"io\" selected>Interest Only<\/option>\n <option value=\"amort\">Amortizing<\/option>\n <\/select>\n <\/div>\n <\/div>\n `;\n } else {\n el.innerHTML = `\n <div class=\"field\">\n <label>Loan Amount<\/label>\n <div class=\"input-with-prefix\">\n <span class=\"prefix\">$<\/span>\n <input type=\"text\" id=\"loanAmount\" value=\"350,000\" oninput=\"formatAndCalc(this)\" \/>\n <\/div>\n <\/div>\n <div class=\"row\">\n <div class=\"field\">\n <label>Interest Rate<\/label>\n <div class=\"input-with-suffix\">\n <input type=\"number\" id=\"rate\" value=\"7.0\" step=\"0.125\" min=\"0\" oninput=\"calculate()\" \/>\n <span class=\"suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Term (Years)<\/label>\n <select id=\"termYears\" onchange=\"calculate()\">\n <option value=\"15\">15 Years<\/option>\n <option value=\"20\">20 Years<\/option>\n <option value=\"25\">25 Years<\/option>\n <option value=\"30\" selected>30 Years<\/option>\n <\/select>\n <\/div>\n <\/div>\n `;\n }\n }\n\n function formatAndCalc(input) {\n let v = input.value.replace(\/[^0-9]\/g, '');\n if (v) input.value = Number(v).toLocaleString('en-US');\n calculate();\n }\n\n function parseCurrency(str) {\n return Number(String(str).replace(\/[^0-9.]\/g, '')) || 0;\n }\n\n function fmt(n) {\n return n.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });\n }\n function fmt2(n) {\n return n.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 });\n }\n\n function calculate() {\n const res = document.getElementById('results');\n const loan = parseCurrency(document.getElementById('loanAmount')?.value);\n\n if (currentTab === 'bridge') {\n const rate = parseFloat(document.getElementById('rate')?.value) || 0;\n const term = parseInt(document.getElementById('term')?.value) || 1;\n const origPts = parseFloat(document.getElementById('origFee')?.value) || 0;\n const payType = document.getElementById('payType')?.value || 'io';\n const monthlyRate = rate \/ 100 \/ 12;\n const origFee = loan * (origPts \/ 100);\n\n let monthlyPayment;\n if (payType === 'io') {\n monthlyPayment = loan * monthlyRate;\n } else {\n if (monthlyRate === 0) {\n monthlyPayment = loan \/ term;\n } else {\n monthlyPayment = loan * (monthlyRate * Math.pow(1 + monthlyRate, term)) \/ (Math.pow(1 + monthlyRate, term) - 1);\n }\n }\n\n const totalInterest = payType === 'io' ? monthlyPayment * term : (monthlyPayment * term) - loan;\n const totalCost = totalInterest + origFee;\n\n res.innerHTML = `\n <div class=\"result-primary\">\n <div class=\"label\">Monthly Payment<\/div>\n <div class=\"value\">${fmt(monthlyPayment)}<\/div>\n <div class=\"per-month\">${payType === 'io' ? 'Interest only' : 'Principal & interest'}<\/div>\n <\/div>\n <div class=\"result-details\">\n <div class=\"result-row\">\n <span class=\"rlabel\">Loan Amount<\/span>\n <span class=\"rvalue\">${fmt(loan)}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"rlabel\">Origination Fee (${origPts} pts)<\/span>\n <span class=\"rvalue\">${fmt(origFee)}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"rlabel\">Total Interest (${term} mo)<\/span>\n <span class=\"rvalue\">${fmt(totalInterest)}<\/span>\n <\/div>\n <div class=\"result-row highlight\">\n <span class=\"rlabel\">Total Loan Cost<\/span>\n <span class=\"rvalue\">${fmt(totalCost)}<\/span>\n <\/div>\n <\/div>\n `;\n } else {\n const rate = parseFloat(document.getElementById('rate')?.value) || 0;\n const years = parseInt(document.getElementById('termYears')?.value) || 30;\n const months = years * 12;\n const monthlyRate = rate \/ 100 \/ 12;\n\n let monthlyPayment;\n if (monthlyRate === 0) {\n monthlyPayment = loan \/ months;\n } else {\n monthlyPayment = loan * (monthlyRate * Math.pow(1 + monthlyRate, months)) \/ (Math.pow(1 + monthlyRate, months) - 1);\n }\n\n const totalPaid = monthlyPayment * months;\n const totalInterest = totalPaid - loan;\n\n res.innerHTML = `\n <div class=\"result-primary\">\n <div class=\"label\">Monthly Payment<\/div>\n <div class=\"value\">${fmt(monthlyPayment)}<\/div>\n <div class=\"per-month\">Principal & interest<\/div>\n <\/div>\n <div class=\"result-details\">\n <div class=\"result-row\">\n <span class=\"rlabel\">Loan Amount<\/span>\n <span class=\"rvalue\">${fmt(loan)}<\/span>\n <\/div>\n <div class=\"result-row\">\n <span class=\"rlabel\">Total Interest (${years} yr)<\/span>\n <span class=\"rvalue\">${fmt(totalInterest)}<\/span>\n <\/div>\n <div class=\"result-row highlight\">\n <span class=\"rlabel\">Total Paid<\/span>\n <span class=\"rvalue\">${fmt(totalPaid)}<\/span>\n <\/div>\n <\/div>\n `;\n }\n }\n\n renderInputs();\n calculate();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loan Calculator | Cornerstone Commercial Capital Loan Calculator Cornerstone Commercial Capital Bridge \/ Hard Money Conventional Mortgage For estimation purposes only. Actual terms, rates, and fees may vary. Does not include taxes, insurance, or other costs. Contact Cornerstone Commercial Capital for a formal quote.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1442","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages\/1442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/comments?post=1442"}],"version-history":[{"count":16,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages\/1442\/revisions"}],"predecessor-version":[{"id":1461,"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/pages\/1442\/revisions\/1461"}],"wp:attachment":[{"href":"https:\/\/cornerstonecomcap.com\/index.php\/wp-json\/wp\/v2\/media?parent=1442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}