Compound Interest Calculator<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Fira+Code:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }\n\n :root {\n --off-white: #f0ede8;\n --tan: #b5a090;\n --cream: #fdf6dc;\n --green: #2e6b54;\n --navy: #0d1b3e;\n --card: #ffffff;\n --border: #e2ddd5;\n --radius: 12px;\n }\n\n html, body {\n min-height: 100%;\n background: var(--off-white);\n font-family: 'Fira Code', monospace;\n font-size: 14px;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n padding: 28px 16px 48px;\n background-image:\n radial-gradient(ellipse 60% 40% at 10% 0%, rgba(46,107,84,0.07) 0%, transparent 60%),\n radial-gradient(ellipse 50% 40% at 90% 100%, rgba(13,27,62,0.06) 0%, transparent 60%);\n }\n\n .container { max-width: 480px; margin: 0 auto; }\n\n \/* Header *\/\n .header { margin-bottom: 22px; }\n .header h1 {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(28px, 7vw, 36px);\n color: var(--navy);\n line-height: 1.1;\n }\n .header h1 em { font-style: italic; color: var(--green); }\n .header p {\n font-size: 10px;\n color: var(--tan);\n margin-top: 5px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n \/* Card *\/\n .card {\n background: var(--card);\n border-radius: 18px;\n padding: 20px 16px;\n border: 1px solid var(--border);\n box-shadow: 0 4px 24px rgba(13,27,62,0.07);\n }\n\n .section-label {\n font-size: 10px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 12px;\n padding-bottom: 7px;\n border-bottom: 1px solid var(--border);\n }\n\n .field { margin-bottom: 14px; }\n\n .field label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 10px;\n color: var(--tan);\n letter-spacing: 0.06em;\n margin-bottom: 5px;\n }\n\n .tag-linked {\n font-size: 9px;\n padding: 1px 5px;\n border-radius: 20px;\n background: #f5efe6;\n color: var(--tan);\n border: 1px solid rgba(181,160,144,0.35);\n }\n\n .input-wrap {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .input-prefix, .input-suffix {\n position: absolute;\n font-size: 13px;\n color: var(--tan);\n pointer-events: none;\n z-index: 1;\n }\n .input-prefix { left: 11px; }\n .input-suffix { right: 11px; }\n\n \/* Fake input \u2014 prevents ALL native keyboard issues *\/\n .fake-input {\n width: 100%;\n background: var(--cream);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 11px 36px 11px 30px;\n font-family: 'Fira Code', monospace;\n font-size: 15px;\n color: var(--navy);\n cursor: pointer;\n min-height: 44px;\n display: flex;\n align-items: center;\n transition: border-color 0.15s, box-shadow 0.15s;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .fake-input.active {\n border-color: var(--green);\n background: #fff;\n box-shadow: 0 0 0 3px rgba(46,107,84,0.1);\n }\n\n .fake-input.linked.active {\n border-color: var(--tan);\n box-shadow: 0 0 0 3px rgba(181,160,144,0.15);\n }\n\n .fake-input.just-updated {\n animation: flashCream 0.4s ease;\n }\n\n @keyframes flashCream {\n 0% { background: #f5efe6; }\n 100% { background: var(--cream); }\n }\n\n .fake-input span.placeholder { color: #c8c0b5; }\n\n .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .divider {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 16px 0;\n }\n .divider span {\n font-size: 9px;\n color: var(--tan);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n .divider::before, .divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n .link-hint {\n font-size: 9px;\n color: var(--tan);\n margin-top: 3px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .btn-calc {\n width: 100%;\n margin-top: 20px;\n padding: 15px;\n background: var(--navy);\n color: var(--cream);\n border: none;\n border-radius: var(--radius);\n font-family: 'Fira Code', monospace;\n font-size: 13px;\n letter-spacing: 0.12em;\n cursor: pointer;\n text-transform: uppercase;\n min-height: 50px;\n touch-action: manipulation;\n }\n\n .btn-calc:active { opacity: 0.85; }\n\n \/* Results *\/\n .results { margin-top: 18px; display: none; }\n .results.visible { display: block; }\n\n .result-summary {\n background: var(--navy);\n border-radius: 16px;\n padding: 20px 16px;\n }\n\n .results-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(253,246,220,0.4);\n margin-bottom: 14px;\n }\n\n .result-main .label {\n font-size: 10px;\n color: rgba(253,246,220,0.45);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-main .value {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(32px, 8vw, 42px);\n color: var(--cream);\n line-height: 1;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .results-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n }\n\n .result-item {\n background: rgba(253,246,220,0.05);\n border-radius: 10px;\n padding: 10px 12px;\n border: 1px solid rgba(253,246,220,0.07);\n }\n\n .result-item .label {\n font-size: 9px;\n color: rgba(253,246,220,0.4);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-item .value {\n font-size: clamp(13px, 3.5vw, 15px);\n color: var(--cream);\n word-break: break-all;\n }\n\n .result-item .value.hl { color: #a8d5be; }\n\n .progress-bar {\n margin-top: 14px;\n height: 4px;\n background: rgba(253,246,220,0.08);\n border-radius: 99px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--green), #a8d5be);\n border-radius: 99px;\n transition: width 0.9s cubic-bezier(0.22,1,0.36,1);\n width: 0%;\n }\n\n .progress-legend {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n }\n\n .progress-legend span {\n font-size: 9px;\n color: rgba(253,246,220,0.3);\n }\n\n \/* Chart *\/\n .chart-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n padding: 18px 14px;\n border: 1px solid var(--border);\n }\n\n .chart-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--border);\n }\n\n .chart-legend {\n display: flex;\n gap: 12px;\n margin-bottom: 12px;\n flex-wrap: wrap;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 9px;\n color: var(--tan);\n }\n\n .legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .chart-wrap { position: relative; height: 200px; }\n\n \/* Table *\/\n .table-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n border: 1px solid var(--border);\n overflow: hidden;\n }\n\n .table-header {\n padding: 14px 16px 10px;\n border-bottom: 1px solid var(--border);\n }\n\n .table-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n }\n\n .table-scroll {\n overflow-x: auto;\n max-height: 320px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n table { width: 100%; border-collapse: collapse; font-size: 11px; }\n\n thead { position: sticky; top: 0; z-index: 1; }\n\n thead th {\n background: var(--off-white);\n color: var(--tan);\n font-size: 9px;\n font-weight: 500;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n padding: 8px 12px;\n text-align: right;\n white-space: nowrap;\n border-bottom: 1px solid var(--border);\n }\n\n thead th:first-child { text-align: center; }\n\n tbody tr { border-bottom: 1px solid rgba(226,221,213,0.5); }\n tbody tr:last-child { border-bottom: none; }\n tbody tr:hover { background: #faf8f4; }\n tbody tr.year-end { background: rgba(46,107,84,0.04); }\n tbody tr:nth-child(even) { background: rgba(253,246,220,0.2); }\n tbody tr:nth-child(even):hover { background: #faf8f4; }\n tbody tr.year-end:nth-child(even) { background: rgba(46,107,84,0.06); }\n\n tbody td {\n padding: 8px 12px;\n color: var(--navy);\n text-align: right;\n white-space: nowrap;\n }\n\n tbody td:first-child { text-align: center; color: var(--tan); font-size: 10px; }\n tbody td.int-mo { color: var(--green); }\n tbody td.total { font-weight: 500; }\n\n \/* \u2500\u2500 Keypad \u2500\u2500 *\/\n .kp-overlay {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 200;\n }\n\n .kp-overlay.open { display: block; }\n\n .kp-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(13,27,62,0.3);\n }\n\n .kp-sheet {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: #e8e4de;\n border-radius: 20px 20px 0 0;\n padding: 12px 12px max(20px, env(safe-area-inset-bottom)) 12px;\n box-shadow: 0 -6px 32px rgba(13,27,62,0.15);\n }\n\n .kp-label {\n font-size: 10px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--tan);\n text-align: center;\n margin-bottom: 8px;\n }\n\n .kp-display {\n background: var(--navy);\n border-radius: 12px;\n padding: 12px 16px;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n min-height: 56px;\n }\n\n .kp-display .kd-pre {\n font-size: 13px;\n color: rgba(253,246,220,0.4);\n margin-right: 6px;\n flex-shrink: 0;\n }\n\n .kp-display .kd-val {\n font-family: 'Instrument Serif', serif;\n font-size: 30px;\n color: var(--cream);\n flex: 1;\n text-align: right;\n line-height: 1;\n word-break: break-all;\n }\n\n .kp-display .kd-suf {\n font-size: 13px;\n color: rgba(253,246,220,0.4);\n margin-left: 6px;\n flex-shrink: 0;\n }\n\n .kp-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n }\n\n .kb {\n border: none;\n border-radius: 10px;\n height: 54px;\n font-family: 'Fira Code', monospace;\n font-size: 20px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .kb:active { opacity: 0.7; transform: scale(0.94); }\n\n .kb-num {\n background: #fff;\n color: var(--navy);\n box-shadow: 0 2px 0 rgba(13,27,62,0.1);\n }\n\n .kb-dot {\n background: #fff;\n color: var(--navy);\n font-size: 26px;\n font-weight: bold;\n box-shadow: 0 2px 0 rgba(13,27,62,0.1);\n }\n\n .kb-del {\n background: #d4cfc8;\n color: #7a7268;\n font-size: 18px;\n }\n\n .kb-ok {\n grid-column: span 3;\n background: var(--navy);\n color: var(--cream);\n font-size: 13px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n height: 50px;\n border-radius: 10px;\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <div class=\"header\">\n <h1>Compound<br\/><em>Interest<\/em> Calc<\/h1>\n <p>Compound Investment Projection<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"section-label\">Initial capital<\/div>\n\n <div class=\"field\">\n <label>Start Amount<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <div class=\"fake-input\" id=\"fi-startAmount\" onclick=\"openKP(this,'startAmount','$','')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Monthly Additional Contribution<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <div class=\"fake-input\" id=\"fi-monthlyContrib\" onclick=\"openKP(this,'monthlyContrib','$','')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"divider\"><span>Rate of return<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label>Return Rate Monthly <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-rateMonthly\" onclick=\"openKP(this,'rateMonthly','','%')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Return Rate Annually <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-rateAnnual\" onclick=\"openKP(this,'rateAnnual','','%')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill in a field, the other updates automatically<\/div>\n\n <div class=\"divider\"><span>Period<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label>Months <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-months\" onclick=\"openKP(this,'months','','')\"><span class=\"placeholder\">0<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Years <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-years\" onclick=\"openKP(this,'years','','')\"><span class=\"placeholder\">0<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill in a field, the other updates automatically<\/div>\n\n <button class=\"btn-calc\" onclick=\"calculate()\">\u2192 Calculate<\/button>\n\n \n <div class=\"results\" id=\"results\">\n <div class=\"result-summary\">\n <div class=\"results-title\">Resultado da Proje\u00e7\u00e3o<\/div>\n <div class=\"result-main\">\n <div class=\"label\">Total Final<\/div>\n <div class=\"value\" id=\"res-total\">$0.00<\/div>\n <\/div>\n <div class=\"results-grid\">\n <div class=\"result-item\">\n <div class=\"label\">Capital Inicial<\/div>\n <div class=\"value\" id=\"res-principal\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Aportes Totais<\/div>\n <div class=\"value\" id=\"res-contrib\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Juros Ganhos<\/div>\n <div class=\"value hl\" id=\"res-interest\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Retorno Total<\/div>\n <div class=\"value hl\" id=\"res-return\">0.00%<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n <div class=\"progress-legend\">\n <span id=\"leg-invested\">Investido: $0<\/span>\n <span id=\"leg-interest\">Juros: $0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"chart-card\">\n <div class=\"chart-title\">Crescimento M\u00eas a M\u00eas<\/div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#2e6b54\"><\/div>Total<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#b5a090\"><\/div>Investido<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#a8d5be\"><\/div>Juros<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"growthChart\"><\/canvas><\/div>\n <\/div>\n\n <div class=\"table-card\">\n <div class=\"table-header\"><div class=\"table-title\">Detalhamento M\u00eas a M\u00eas<\/div><\/div>\n <div class=\"table-scroll\">\n <table>\n <thead>\n <tr>\n <th>M\u00eas<\/th>\n <th>Contribution<\/th>\n <th>Interest\/Mo<\/th>\n <th>Total Interest<\/th>\n <th>Total<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"kp-overlay\" id=\"kpOverlay\">\n <div class=\"kp-backdrop\" id=\"kpBackdrop\"><\/div>\n <div class=\"kp-sheet\">\n <div class=\"kp-label\" id=\"kpLabel\">Valor<\/div>\n <div class=\"kp-display\">\n <span class=\"kd-pre\" id=\"kdPre\"><\/span>\n <span class=\"kd-val\" id=\"kdVal\">0<\/span>\n <span class=\"kd-suf\" id=\"kdSuf\"><\/span>\n <\/div>\n <div class=\"kp-grid\">\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'7')\">7<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'8')\">8<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'9')\">9<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'4')\">4<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'5')\">5<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'6')\">6<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'1')\">1<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'2')\">2<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'3')\">3<\/button>\n <button class=\"kb kb-dot\" ontouchstart=\"kp(event,'.')\">\u00b7<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'0')\">0<\/button>\n <button class=\"kb kb-del\" ontouchstart=\"kpDel(event)\">\u232b<\/button>\n <button class=\"kb kb-ok\" ontouchstart=\"kpOK(event)\">Confirmar \u2192<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/\/ \u2500\u2500 Data store \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst data = { startAmount:'', monthlyContrib:'', rateMonthly:'', rateAnnual:'', months:'', years:'' };\n\nfunction getVal(k) { return data[k]; }\n\nfunction setVal(k, v, skipLinked) {\n data[k] = v;\n \/\/ update display\n const fi = document.getElementById('fi-'+k);\n if (fi) {\n if (v === '') {\n fi.innerHTML = '<span class=\"placeholder\">' + placeholders[k] + '<\/span>';\n } else {\n fi.textContent = v;\n }\n }\n if (!skipLinked) syncLinked(k, v);\n}\n\nconst placeholders = {\n startAmount: '0.00', monthlyContrib: '0.00',\n rateMonthly: '0.00', rateAnnual: '0.00',\n months: '0', years: '0'\n};\n\nfunction syncLinked(k, v) {\n const n = parseFloat(v);\n if (isNaN(n) || n < 0) return;\n if (k === 'rateMonthly') {\n const a = r4((Math.pow(1 + n\/100, 12) - 1) * 100);\n setVal('rateAnnual', String(a), true);\n flashFI('fi-rateAnnual');\n } else if (k === 'rateAnnual') {\n const m = r4((Math.pow(1 + n\/100, 1\/12) - 1) * 100);\n setVal('rateMonthly', String(m), true);\n flashFI('fi-rateMonthly');\n } else if (k === 'months') {\n setVal('years', r4(n \/ 12), true);\n flashFI('fi-years');\n } else if (k === 'years') {\n setVal('months', String(Math.round(n * 12)), true);\n flashFI('fi-months');\n }\n}\n\nfunction flashFI(id) {\n const el = document.getElementById(id);\n if (!el) return;\n el.classList.remove('just-updated');\n void el.offsetWidth;\n el.classList.add('just-updated');\n}\n\n\/\/ \u2500\u2500 Keypad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet kpTarget = null;\nlet kpValue = '';\n\nfunction openKP(el, key, pre, suf) {\n kpTarget = key;\n kpValue = data[key] || '';\n document.getElementById('kpLabel').textContent = el.closest('.field').querySelector('label').childNodes[0].textContent.trim();\n document.getElementById('kdPre').textContent = pre;\n document.getElementById('kdSuf').textContent = suf;\n updateKPDisplay();\n document.getElementById('kpOverlay').classList.add('open');\n \/\/ Mark active\n document.querySelectorAll('.fake-input').forEach(f => f.classList.remove('active'));\n el.classList.add('active');\n}\n\nfunction updateKPDisplay() {\n document.getElementById('kdVal').textContent = kpValue === '' ? '0' : kpValue;\n}\n\nfunction kp(e, char) {\n e.preventDefault();\n if (char === '.') {\n if (kpValue.includes('.')) return;\n if (kpValue === '') kpValue = '0';\n kpValue += '.';\n } else {\n if (kpValue === '0') kpValue = char;\n else kpValue += char;\n }\n updateKPDisplay();\n}\n\nfunction kpDel(e) {\n e.preventDefault();\n kpValue = kpValue.slice(0, -1);\n updateKPDisplay();\n}\n\nfunction kpOK(e) {\n e.preventDefault();\n if (kpTarget) setVal(kpTarget, kpValue);\n document.querySelectorAll('.fake-input').forEach(f => f.classList.remove('active'));\n document.getElementById('kpOverlay').classList.remove('open');\n kpTarget = null;\n}\n\ndocument.getElementById('kpBackdrop').addEventListener('touchstart', function(e) {\n e.preventDefault();\n kpOK(e);\n});\n\n\/\/ \u2500\u2500 Calculate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet chartInstance = null;\n\nfunction calculate() {\n const P = parseFloat(data.startAmount) || 0;\n const C = parseFloat(data.monthlyContrib) || 0;\n const r = parseFloat(data.rateMonthly) \/ 100 || 0;\n const n = parseInt(data.months) || 0;\n\n if (n === 0) { alert('Informe o per\u00edodo (meses ou anos).'); return; }\n\n const totals = [], invested = [], interests = [], monthlyInt = [];\n let balance = P, prev = P;\n\n for (let i = 1; i <= n; i++) {\n const before = prev * (1 + r);\n balance = before + C;\n const mInt = before - prev;\n const inv = P + C * i;\n const tInt = balance - inv;\n totals.push(+balance.toFixed(2));\n invested.push(+inv.toFixed(2));\n interests.push(+tInt.toFixed(2));\n monthlyInt.push(+mInt.toFixed(2));\n prev = balance;\n }\n\n const total = totals[totals.length - 1];\n const inv = P + C * n;\n const interest = total - inv;\n const retPct = inv > 0 ? (interest \/ inv) * 100 : 0;\n\n document.getElementById('res-total').textContent = fmt(total);\n document.getElementById('res-principal').textContent = fmt(P);\n document.getElementById('res-contrib').textContent = fmt(C * n);\n document.getElementById('res-interest').textContent = fmt(interest);\n document.getElementById('res-return').textContent = r4(retPct) + '%';\n document.getElementById('progress-fill').style.width = Math.min((inv\/total)*100,100) + '%';\n document.getElementById('leg-invested').textContent = 'Investido: ' + fmtS(inv);\n document.getElementById('leg-interest').textContent = 'Juros: ' + fmtS(interest);\n\n const resultsEl = document.getElementById('results');\n resultsEl.classList.add('visible');\n\n \/\/ Chart labels\n const lbls = Array.from({length: n}, (_, i) => {\n const mo = i + 1;\n if (n <= 24) return 'M' + mo;\n if (n <= 60) return mo % 3 === 0 ? 'M' + mo : '';\n return mo % 12 === 0 ? 'Ano ' + (mo\/12) : '';\n });\n\n if (chartInstance) chartInstance.destroy();\n const ctx = document.getElementById('growthChart').getContext('2d');\n const gT = ctx.createLinearGradient(0,0,0,200);\n gT.addColorStop(0,'rgba(46,107,84,0.22)'); gT.addColorStop(1,'rgba(46,107,84,0)');\n const gI = ctx.createLinearGradient(0,0,0,200);\n gI.addColorStop(0,'rgba(181,160,144,0.15)'); gI.addColorStop(1,'rgba(181,160,144,0)');\n\n chartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: lbls,\n datasets: [\n { label:'Total', data:totals, borderColor:'#2e6b54', backgroundColor:gT, borderWidth:2.5, pointRadius:n<=24?3:0, pointHoverRadius:4, fill:true, tension:0.4 },\n { label:'Investido', data:invested, borderColor:'#b5a090', backgroundColor:gI, borderWidth:2, pointRadius:0, pointHoverRadius:3, fill:true, tension:0.4, borderDash:[5,4] },\n { label:'Juros', data:interests, borderColor:'#a8d5be', backgroundColor:'transparent', borderWidth:1.5, pointRadius:0, pointHoverRadius:3, fill:false, tension:0.4 }\n ]\n },\n options: {\n responsive:true, maintainAspectRatio:false,\n interaction:{ mode:'index', intersect:false },\n plugins:{\n legend:{ display:false },\n tooltip:{\n backgroundColor:'#0d1b3e', titleColor:'rgba(253,246,220,0.5)', bodyColor:'#fdf6dc',\n borderColor:'rgba(253,246,220,0.1)', borderWidth:1, padding:10,\n titleFont:{family:'Fira Code',size:9}, bodyFont:{family:'Fira Code',size:11},\n callbacks:{\n title: items => { const i=items[0].dataIndex; return n<=12?`M\u00eas ${i+1}`:(i+1)%12===0?`Ano ${(i+1)\/12} (M${i+1})`:`M\u00eas ${i+1}`; },\n label: item => ` ${item.dataset.label}: ${fmt(item.raw)}`\n }\n }\n },\n scales:{\n x:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',maxRotation:0}, border:{display:false} },\n y:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',callback:v=>fmtS(v)}, border:{display:false} }\n }\n }\n });\n\n \/\/ Table\n const tbody = document.getElementById('tableBody');\n tbody.innerHTML = '';\n const r0 = document.createElement('tr');\n r0.innerHTML = `<td>0<\/td><td>${fmt(P)}<\/td><td>\u2014<\/td><td>\u2014<\/td><td class=\"total\">${fmt(P)}<\/td>`;\n tbody.appendChild(r0);\n for (let i = 0; i < n; i++) {\n const tr = document.createElement('tr');\n if ((i+1) % 12 === 0) tr.classList.add('year-end');\n tr.innerHTML = `<td>${i+1}<\/td><td>${fmt(invested[i])}<\/td><td class=\"int-mo\">${fmt(monthlyInt[i])}<\/td><td>${fmt(interests[i])}<\/td><td class=\"total\">${fmt(totals[i])}<\/td>`;\n tbody.appendChild(tr);\n }\n\n setTimeout(() => resultsEl.scrollIntoView({behavior:'smooth',block:'nearest'}), 80);\n}\n\nfunction fmt(n) { return '$' + n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); }\nfunction fmtS(n) {\n if (n >= 1e6) return '$'+(n\/1e6).toFixed(1)+'M';\n if (n >= 1e3) return '$'+(n\/1e3).toFixed(1)+'K';\n return '$'+n.toFixed(0);\n}\nfunction r4(n) { return Math.round(n*10000)\/10000; }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"960\" height=\"150\" src=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg\" alt=\"\" class=\"wp-image-1569\" srcset=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg 960w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-300x47.jpg 300w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-768x120.jpg 768w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-18x3.jpg 18w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>","protected":false},"excerpt":{"rendered":"<p>Compound Interest Calculator CompoundInterest Calc Compound Investment Projection Initial capital Start Amount $ 0.00 Monthly Additional Contribution $ 0.00 Rate of return Return Rate Monthly \u2194 0.00 % Return Rate Annually \u2194 0.00 % \u2194 Fill in a field, the other updates automatically Period Months \u2194 0 Years \u2194 0 \u2194 Fill in a field, […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1531","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":8,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions\/1571"}],"wp:attachment":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/media?parent=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1531,"date":"2026-06-05T13:51:01","date_gmt":"2026-06-05T13:51:01","guid":{"rendered":"https:\/\/prosocialtrading.com\/?page_id=1531"},"modified":"2026-06-05T19:55:03","modified_gmt":"2026-06-05T19:55:03","slug":"calculator","status":"publish","type":"page","link":"https:\/\/prosocialtrading.com\/pt\/calculator\/","title":{"rendered":"Calculator"},"content":{"rendered":"\n\n \n \n Compound Interest Calculator<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Fira+Code:wght@300;400;500&display=swap\" rel=\"stylesheet\"\/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }\n\n :root {\n --off-white: #f0ede8;\n --tan: #b5a090;\n --cream: #fdf6dc;\n --green: #2e6b54;\n --navy: #0d1b3e;\n --card: #ffffff;\n --border: #e2ddd5;\n --radius: 12px;\n }\n\n html, body {\n min-height: 100%;\n background: var(--off-white);\n font-family: 'Fira Code', monospace;\n font-size: 14px;\n -webkit-text-size-adjust: 100%;\n }\n\n body {\n padding: 28px 16px 48px;\n background-image:\n radial-gradient(ellipse 60% 40% at 10% 0%, rgba(46,107,84,0.07) 0%, transparent 60%),\n radial-gradient(ellipse 50% 40% at 90% 100%, rgba(13,27,62,0.06) 0%, transparent 60%);\n }\n\n .container { max-width: 480px; margin: 0 auto; }\n\n \/* Header *\/\n .header { margin-bottom: 22px; }\n .header h1 {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(28px, 7vw, 36px);\n color: var(--navy);\n line-height: 1.1;\n }\n .header h1 em { font-style: italic; color: var(--green); }\n .header p {\n font-size: 10px;\n color: var(--tan);\n margin-top: 5px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n\n \/* Card *\/\n .card {\n background: var(--card);\n border-radius: 18px;\n padding: 20px 16px;\n border: 1px solid var(--border);\n box-shadow: 0 4px 24px rgba(13,27,62,0.07);\n }\n\n .section-label {\n font-size: 10px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 12px;\n padding-bottom: 7px;\n border-bottom: 1px solid var(--border);\n }\n\n .field { margin-bottom: 14px; }\n\n .field label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 10px;\n color: var(--tan);\n letter-spacing: 0.06em;\n margin-bottom: 5px;\n }\n\n .tag-linked {\n font-size: 9px;\n padding: 1px 5px;\n border-radius: 20px;\n background: #f5efe6;\n color: var(--tan);\n border: 1px solid rgba(181,160,144,0.35);\n }\n\n .input-wrap {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .input-prefix, .input-suffix {\n position: absolute;\n font-size: 13px;\n color: var(--tan);\n pointer-events: none;\n z-index: 1;\n }\n .input-prefix { left: 11px; }\n .input-suffix { right: 11px; }\n\n \/* Fake input \u2014 prevents ALL native keyboard issues *\/\n .fake-input {\n width: 100%;\n background: var(--cream);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 11px 36px 11px 30px;\n font-family: 'Fira Code', monospace;\n font-size: 15px;\n color: var(--navy);\n cursor: pointer;\n min-height: 44px;\n display: flex;\n align-items: center;\n transition: border-color 0.15s, box-shadow 0.15s;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .fake-input.active {\n border-color: var(--green);\n background: #fff;\n box-shadow: 0 0 0 3px rgba(46,107,84,0.1);\n }\n\n .fake-input.linked.active {\n border-color: var(--tan);\n box-shadow: 0 0 0 3px rgba(181,160,144,0.15);\n }\n\n .fake-input.just-updated {\n animation: flashCream 0.4s ease;\n }\n\n @keyframes flashCream {\n 0% { background: #f5efe6; }\n 100% { background: var(--cream); }\n }\n\n .fake-input span.placeholder { color: #c8c0b5; }\n\n .field-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .divider {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 16px 0;\n }\n .divider span {\n font-size: 9px;\n color: var(--tan);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n .divider::before, .divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n .link-hint {\n font-size: 9px;\n color: var(--tan);\n margin-top: 3px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .btn-calc {\n width: 100%;\n margin-top: 20px;\n padding: 15px;\n background: var(--navy);\n color: var(--cream);\n border: none;\n border-radius: var(--radius);\n font-family: 'Fira Code', monospace;\n font-size: 13px;\n letter-spacing: 0.12em;\n cursor: pointer;\n text-transform: uppercase;\n min-height: 50px;\n touch-action: manipulation;\n }\n\n .btn-calc:active { opacity: 0.85; }\n\n \/* Results *\/\n .results { margin-top: 18px; display: none; }\n .results.visible { display: block; }\n\n .result-summary {\n background: var(--navy);\n border-radius: 16px;\n padding: 20px 16px;\n }\n\n .results-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: rgba(253,246,220,0.4);\n margin-bottom: 14px;\n }\n\n .result-main .label {\n font-size: 10px;\n color: rgba(253,246,220,0.45);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-main .value {\n font-family: 'Instrument Serif', serif;\n font-size: clamp(32px, 8vw, 42px);\n color: var(--cream);\n line-height: 1;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .results-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n }\n\n .result-item {\n background: rgba(253,246,220,0.05);\n border-radius: 10px;\n padding: 10px 12px;\n border: 1px solid rgba(253,246,220,0.07);\n }\n\n .result-item .label {\n font-size: 9px;\n color: rgba(253,246,220,0.4);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: 3px;\n }\n\n .result-item .value {\n font-size: clamp(13px, 3.5vw, 15px);\n color: var(--cream);\n word-break: break-all;\n }\n\n .result-item .value.hl { color: #a8d5be; }\n\n .progress-bar {\n margin-top: 14px;\n height: 4px;\n background: rgba(253,246,220,0.08);\n border-radius: 99px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--green), #a8d5be);\n border-radius: 99px;\n transition: width 0.9s cubic-bezier(0.22,1,0.36,1);\n width: 0%;\n }\n\n .progress-legend {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n }\n\n .progress-legend span {\n font-size: 9px;\n color: rgba(253,246,220,0.3);\n }\n\n \/* Chart *\/\n .chart-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n padding: 18px 14px;\n border: 1px solid var(--border);\n }\n\n .chart-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n margin-bottom: 10px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--border);\n }\n\n .chart-legend {\n display: flex;\n gap: 12px;\n margin-bottom: 12px;\n flex-wrap: wrap;\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 9px;\n color: var(--tan);\n }\n\n .legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n .chart-wrap { position: relative; height: 200px; }\n\n \/* Table *\/\n .table-card {\n margin-top: 12px;\n background: var(--card);\n border-radius: 16px;\n border: 1px solid var(--border);\n overflow: hidden;\n }\n\n .table-header {\n padding: 14px 16px 10px;\n border-bottom: 1px solid var(--border);\n }\n\n .table-title {\n font-size: 9px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--tan);\n }\n\n .table-scroll {\n overflow-x: auto;\n max-height: 320px;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n table { width: 100%; border-collapse: collapse; font-size: 11px; }\n\n thead { position: sticky; top: 0; z-index: 1; }\n\n thead th {\n background: var(--off-white);\n color: var(--tan);\n font-size: 9px;\n font-weight: 500;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n padding: 8px 12px;\n text-align: right;\n white-space: nowrap;\n border-bottom: 1px solid var(--border);\n }\n\n thead th:first-child { text-align: center; }\n\n tbody tr { border-bottom: 1px solid rgba(226,221,213,0.5); }\n tbody tr:last-child { border-bottom: none; }\n tbody tr:hover { background: #faf8f4; }\n tbody tr.year-end { background: rgba(46,107,84,0.04); }\n tbody tr:nth-child(even) { background: rgba(253,246,220,0.2); }\n tbody tr:nth-child(even):hover { background: #faf8f4; }\n tbody tr.year-end:nth-child(even) { background: rgba(46,107,84,0.06); }\n\n tbody td {\n padding: 8px 12px;\n color: var(--navy);\n text-align: right;\n white-space: nowrap;\n }\n\n tbody td:first-child { text-align: center; color: var(--tan); font-size: 10px; }\n tbody td.int-mo { color: var(--green); }\n tbody td.total { font-weight: 500; }\n\n \/* \u2500\u2500 Keypad \u2500\u2500 *\/\n .kp-overlay {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 200;\n }\n\n .kp-overlay.open { display: block; }\n\n .kp-backdrop {\n position: absolute;\n inset: 0;\n background: rgba(13,27,62,0.3);\n }\n\n .kp-sheet {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: #e8e4de;\n border-radius: 20px 20px 0 0;\n padding: 12px 12px max(20px, env(safe-area-inset-bottom)) 12px;\n box-shadow: 0 -6px 32px rgba(13,27,62,0.15);\n }\n\n .kp-label {\n font-size: 10px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--tan);\n text-align: center;\n margin-bottom: 8px;\n }\n\n .kp-display {\n background: var(--navy);\n border-radius: 12px;\n padding: 12px 16px;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n min-height: 56px;\n }\n\n .kp-display .kd-pre {\n font-size: 13px;\n color: rgba(253,246,220,0.4);\n margin-right: 6px;\n flex-shrink: 0;\n }\n\n .kp-display .kd-val {\n font-family: 'Instrument Serif', serif;\n font-size: 30px;\n color: var(--cream);\n flex: 1;\n text-align: right;\n line-height: 1;\n word-break: break-all;\n }\n\n .kp-display .kd-suf {\n font-size: 13px;\n color: rgba(253,246,220,0.4);\n margin-left: 6px;\n flex-shrink: 0;\n }\n\n .kp-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n }\n\n .kb {\n border: none;\n border-radius: 10px;\n height: 54px;\n font-family: 'Fira Code', monospace;\n font-size: 20px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .kb:active { opacity: 0.7; transform: scale(0.94); }\n\n .kb-num {\n background: #fff;\n color: var(--navy);\n box-shadow: 0 2px 0 rgba(13,27,62,0.1);\n }\n\n .kb-dot {\n background: #fff;\n color: var(--navy);\n font-size: 26px;\n font-weight: bold;\n box-shadow: 0 2px 0 rgba(13,27,62,0.1);\n }\n\n .kb-del {\n background: #d4cfc8;\n color: #7a7268;\n font-size: 18px;\n }\n\n .kb-ok {\n grid-column: span 3;\n background: var(--navy);\n color: var(--cream);\n font-size: 13px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n height: 50px;\n border-radius: 10px;\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <div class=\"header\">\n <h1>Compound<br\/><em>Interest<\/em> Calc<\/h1>\n <p>Compound Investment Projection<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"section-label\">Initial capital<\/div>\n\n <div class=\"field\">\n <label>Start Amount<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <div class=\"fake-input\" id=\"fi-startAmount\" onclick=\"openKP(this,'startAmount','$','')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Monthly Additional Contribution<\/label>\n <div class=\"input-wrap\">\n <span class=\"input-prefix\">$<\/span>\n <div class=\"fake-input\" id=\"fi-monthlyContrib\" onclick=\"openKP(this,'monthlyContrib','$','')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <\/div>\n <\/div>\n\n <div class=\"divider\"><span>Rate of return<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label>Return Rate Monthly <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-rateMonthly\" onclick=\"openKP(this,'rateMonthly','','%')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Return Rate Annually <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-rateAnnual\" onclick=\"openKP(this,'rateAnnual','','%')\"><span class=\"placeholder\">0.00<\/span><\/div>\n <span class=\"input-suffix\">%<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill in a field, the other updates automatically<\/div>\n\n <div class=\"divider\"><span>Period<\/span><\/div>\n\n <div class=\"field-row\">\n <div class=\"field\">\n <label>Months <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-months\" onclick=\"openKP(this,'months','','')\"><span class=\"placeholder\">0<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Years <span class=\"tag-linked\">\u2194<\/span><\/label>\n <div class=\"input-wrap\">\n <div class=\"fake-input linked\" id=\"fi-years\" onclick=\"openKP(this,'years','','')\"><span class=\"placeholder\">0<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"link-hint\">\u2194 Fill in a field, the other updates automatically<\/div>\n\n <button class=\"btn-calc\" onclick=\"calculate()\">\u2192 Calculate<\/button>\n\n \n <div class=\"results\" id=\"results\">\n <div class=\"result-summary\">\n <div class=\"results-title\">Resultado da Proje\u00e7\u00e3o<\/div>\n <div class=\"result-main\">\n <div class=\"label\">Total Final<\/div>\n <div class=\"value\" id=\"res-total\">$0.00<\/div>\n <\/div>\n <div class=\"results-grid\">\n <div class=\"result-item\">\n <div class=\"label\">Capital Inicial<\/div>\n <div class=\"value\" id=\"res-principal\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Aportes Totais<\/div>\n <div class=\"value\" id=\"res-contrib\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Juros Ganhos<\/div>\n <div class=\"value hl\" id=\"res-interest\">$0.00<\/div>\n <\/div>\n <div class=\"result-item\">\n <div class=\"label\">Retorno Total<\/div>\n <div class=\"value hl\" id=\"res-return\">0.00%<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"progress-fill\"><\/div><\/div>\n <div class=\"progress-legend\">\n <span id=\"leg-invested\">Investido: $0<\/span>\n <span id=\"leg-interest\">Juros: $0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"chart-card\">\n <div class=\"chart-title\">Crescimento M\u00eas a M\u00eas<\/div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#2e6b54\"><\/div>Total<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#b5a090\"><\/div>Investido<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:#a8d5be\"><\/div>Juros<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"growthChart\"><\/canvas><\/div>\n <\/div>\n\n <div class=\"table-card\">\n <div class=\"table-header\"><div class=\"table-title\">Detalhamento M\u00eas a M\u00eas<\/div><\/div>\n <div class=\"table-scroll\">\n <table>\n <thead>\n <tr>\n <th>M\u00eas<\/th>\n <th>Contribution<\/th>\n <th>Interest\/Mo<\/th>\n <th>Total Interest<\/th>\n <th>Total<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"kp-overlay\" id=\"kpOverlay\">\n <div class=\"kp-backdrop\" id=\"kpBackdrop\"><\/div>\n <div class=\"kp-sheet\">\n <div class=\"kp-label\" id=\"kpLabel\">Valor<\/div>\n <div class=\"kp-display\">\n <span class=\"kd-pre\" id=\"kdPre\"><\/span>\n <span class=\"kd-val\" id=\"kdVal\">0<\/span>\n <span class=\"kd-suf\" id=\"kdSuf\"><\/span>\n <\/div>\n <div class=\"kp-grid\">\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'7')\">7<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'8')\">8<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'9')\">9<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'4')\">4<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'5')\">5<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'6')\">6<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'1')\">1<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'2')\">2<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'3')\">3<\/button>\n <button class=\"kb kb-dot\" ontouchstart=\"kp(event,'.')\">\u00b7<\/button>\n <button class=\"kb kb-num\" ontouchstart=\"kp(event,'0')\">0<\/button>\n <button class=\"kb kb-del\" ontouchstart=\"kpDel(event)\">\u232b<\/button>\n <button class=\"kb kb-ok\" ontouchstart=\"kpOK(event)\">Confirmar \u2192<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/\/ \u2500\u2500 Data store \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst data = { startAmount:'', monthlyContrib:'', rateMonthly:'', rateAnnual:'', months:'', years:'' };\n\nfunction getVal(k) { return data[k]; }\n\nfunction setVal(k, v, skipLinked) {\n data[k] = v;\n \/\/ update display\n const fi = document.getElementById('fi-'+k);\n if (fi) {\n if (v === '') {\n fi.innerHTML = '<span class=\"placeholder\">' + placeholders[k] + '<\/span>';\n } else {\n fi.textContent = v;\n }\n }\n if (!skipLinked) syncLinked(k, v);\n}\n\nconst placeholders = {\n startAmount: '0.00', monthlyContrib: '0.00',\n rateMonthly: '0.00', rateAnnual: '0.00',\n months: '0', years: '0'\n};\n\nfunction syncLinked(k, v) {\n const n = parseFloat(v);\n if (isNaN(n) || n < 0) return;\n if (k === 'rateMonthly') {\n const a = r4((Math.pow(1 + n\/100, 12) - 1) * 100);\n setVal('rateAnnual', String(a), true);\n flashFI('fi-rateAnnual');\n } else if (k === 'rateAnnual') {\n const m = r4((Math.pow(1 + n\/100, 1\/12) - 1) * 100);\n setVal('rateMonthly', String(m), true);\n flashFI('fi-rateMonthly');\n } else if (k === 'months') {\n setVal('years', r4(n \/ 12), true);\n flashFI('fi-years');\n } else if (k === 'years') {\n setVal('months', String(Math.round(n * 12)), true);\n flashFI('fi-months');\n }\n}\n\nfunction flashFI(id) {\n const el = document.getElementById(id);\n if (!el) return;\n el.classList.remove('just-updated');\n void el.offsetWidth;\n el.classList.add('just-updated');\n}\n\n\/\/ \u2500\u2500 Keypad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet kpTarget = null;\nlet kpValue = '';\n\nfunction openKP(el, key, pre, suf) {\n kpTarget = key;\n kpValue = data[key] || '';\n document.getElementById('kpLabel').textContent = el.closest('.field').querySelector('label').childNodes[0].textContent.trim();\n document.getElementById('kdPre').textContent = pre;\n document.getElementById('kdSuf').textContent = suf;\n updateKPDisplay();\n document.getElementById('kpOverlay').classList.add('open');\n \/\/ Mark active\n document.querySelectorAll('.fake-input').forEach(f => f.classList.remove('active'));\n el.classList.add('active');\n}\n\nfunction updateKPDisplay() {\n document.getElementById('kdVal').textContent = kpValue === '' ? '0' : kpValue;\n}\n\nfunction kp(e, char) {\n e.preventDefault();\n if (char === '.') {\n if (kpValue.includes('.')) return;\n if (kpValue === '') kpValue = '0';\n kpValue += '.';\n } else {\n if (kpValue === '0') kpValue = char;\n else kpValue += char;\n }\n updateKPDisplay();\n}\n\nfunction kpDel(e) {\n e.preventDefault();\n kpValue = kpValue.slice(0, -1);\n updateKPDisplay();\n}\n\nfunction kpOK(e) {\n e.preventDefault();\n if (kpTarget) setVal(kpTarget, kpValue);\n document.querySelectorAll('.fake-input').forEach(f => f.classList.remove('active'));\n document.getElementById('kpOverlay').classList.remove('open');\n kpTarget = null;\n}\n\ndocument.getElementById('kpBackdrop').addEventListener('touchstart', function(e) {\n e.preventDefault();\n kpOK(e);\n});\n\n\/\/ \u2500\u2500 Calculate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet chartInstance = null;\n\nfunction calculate() {\n const P = parseFloat(data.startAmount) || 0;\n const C = parseFloat(data.monthlyContrib) || 0;\n const r = parseFloat(data.rateMonthly) \/ 100 || 0;\n const n = parseInt(data.months) || 0;\n\n if (n === 0) { alert('Informe o per\u00edodo (meses ou anos).'); return; }\n\n const totals = [], invested = [], interests = [], monthlyInt = [];\n let balance = P, prev = P;\n\n for (let i = 1; i <= n; i++) {\n const before = prev * (1 + r);\n balance = before + C;\n const mInt = before - prev;\n const inv = P + C * i;\n const tInt = balance - inv;\n totals.push(+balance.toFixed(2));\n invested.push(+inv.toFixed(2));\n interests.push(+tInt.toFixed(2));\n monthlyInt.push(+mInt.toFixed(2));\n prev = balance;\n }\n\n const total = totals[totals.length - 1];\n const inv = P + C * n;\n const interest = total - inv;\n const retPct = inv > 0 ? (interest \/ inv) * 100 : 0;\n\n document.getElementById('res-total').textContent = fmt(total);\n document.getElementById('res-principal').textContent = fmt(P);\n document.getElementById('res-contrib').textContent = fmt(C * n);\n document.getElementById('res-interest').textContent = fmt(interest);\n document.getElementById('res-return').textContent = r4(retPct) + '%';\n document.getElementById('progress-fill').style.width = Math.min((inv\/total)*100,100) + '%';\n document.getElementById('leg-invested').textContent = 'Investido: ' + fmtS(inv);\n document.getElementById('leg-interest').textContent = 'Juros: ' + fmtS(interest);\n\n const resultsEl = document.getElementById('results');\n resultsEl.classList.add('visible');\n\n \/\/ Chart labels\n const lbls = Array.from({length: n}, (_, i) => {\n const mo = i + 1;\n if (n <= 24) return 'M' + mo;\n if (n <= 60) return mo % 3 === 0 ? 'M' + mo : '';\n return mo % 12 === 0 ? 'Ano ' + (mo\/12) : '';\n });\n\n if (chartInstance) chartInstance.destroy();\n const ctx = document.getElementById('growthChart').getContext('2d');\n const gT = ctx.createLinearGradient(0,0,0,200);\n gT.addColorStop(0,'rgba(46,107,84,0.22)'); gT.addColorStop(1,'rgba(46,107,84,0)');\n const gI = ctx.createLinearGradient(0,0,0,200);\n gI.addColorStop(0,'rgba(181,160,144,0.15)'); gI.addColorStop(1,'rgba(181,160,144,0)');\n\n chartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: lbls,\n datasets: [\n { label:'Total', data:totals, borderColor:'#2e6b54', backgroundColor:gT, borderWidth:2.5, pointRadius:n<=24?3:0, pointHoverRadius:4, fill:true, tension:0.4 },\n { label:'Investido', data:invested, borderColor:'#b5a090', backgroundColor:gI, borderWidth:2, pointRadius:0, pointHoverRadius:3, fill:true, tension:0.4, borderDash:[5,4] },\n { label:'Juros', data:interests, borderColor:'#a8d5be', backgroundColor:'transparent', borderWidth:1.5, pointRadius:0, pointHoverRadius:3, fill:false, tension:0.4 }\n ]\n },\n options: {\n responsive:true, maintainAspectRatio:false,\n interaction:{ mode:'index', intersect:false },\n plugins:{\n legend:{ display:false },\n tooltip:{\n backgroundColor:'#0d1b3e', titleColor:'rgba(253,246,220,0.5)', bodyColor:'#fdf6dc',\n borderColor:'rgba(253,246,220,0.1)', borderWidth:1, padding:10,\n titleFont:{family:'Fira Code',size:9}, bodyFont:{family:'Fira Code',size:11},\n callbacks:{\n title: items => { const i=items[0].dataIndex; return n<=12?`M\u00eas ${i+1}`:(i+1)%12===0?`Ano ${(i+1)\/12} (M${i+1})`:`M\u00eas ${i+1}`; },\n label: item => ` ${item.dataset.label}: ${fmt(item.raw)}`\n }\n }\n },\n scales:{\n x:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',maxRotation:0}, border:{display:false} },\n y:{ grid:{color:'rgba(13,27,62,0.04)',drawTicks:false}, ticks:{font:{family:'Fira Code',size:8},color:'#b5a090',callback:v=>fmtS(v)}, border:{display:false} }\n }\n }\n });\n\n \/\/ Table\n const tbody = document.getElementById('tableBody');\n tbody.innerHTML = '';\n const r0 = document.createElement('tr');\n r0.innerHTML = `<td>0<\/td><td>${fmt(P)}<\/td><td>\u2014<\/td><td>\u2014<\/td><td class=\"total\">${fmt(P)}<\/td>`;\n tbody.appendChild(r0);\n for (let i = 0; i < n; i++) {\n const tr = document.createElement('tr');\n if ((i+1) % 12 === 0) tr.classList.add('year-end');\n tr.innerHTML = `<td>${i+1}<\/td><td>${fmt(invested[i])}<\/td><td class=\"int-mo\">${fmt(monthlyInt[i])}<\/td><td>${fmt(interests[i])}<\/td><td class=\"total\">${fmt(totals[i])}<\/td>`;\n tbody.appendChild(tr);\n }\n\n setTimeout(() => resultsEl.scrollIntoView({behavior:'smooth',block:'nearest'}), 80);\n}\n\nfunction fmt(n) { return '$' + n.toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2}); }\nfunction fmtS(n) {\n if (n >= 1e6) return '$'+(n\/1e6).toFixed(1)+'M';\n if (n >= 1e3) return '$'+(n\/1e3).toFixed(1)+'K';\n return '$'+n.toFixed(0);\n}\nfunction r4(n) { return Math.round(n*10000)\/10000; }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"960\" height=\"150\" src=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg\" alt=\"\" class=\"wp-image-1569\" srcset=\"https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025.jpg 960w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-300x47.jpg 300w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-768x120.jpg 768w, https:\/\/prosocialtrading.com\/wp-content\/uploads\/2026\/06\/EN_GLOBAL_C1_PRODUCTSUP_C2_T1_EXECUTION_MORE_T2_PERFORMANCE_D-3-13_STATIC_950x150_Q4_2025-18x3.jpg 18w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>","protected":false},"excerpt":{"rendered":"<p>Compound Interest Calculator CompoundInterest Calc Compound Investment Projection Initial capital Start Amount $ 0.00 Monthly Additional Contribution $ 0.00 Rate of return Return Rate Monthly \u2194 0.00 % Return Rate Annually \u2194 0.00 % \u2194 Fill in a field, the other updates automatically Period Months \u2194 0 Years \u2194 0 \u2194 Fill in a field, […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1531","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/comments?post=1531"}],"version-history":[{"count":8,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/pages\/1531\/revisions\/1571"}],"wp:attachment":[{"href":"https:\/\/prosocialtrading.com\/pt\/wp-json\/wp\/v2\/media?parent=1531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}