Pages Medium
Dental — Insurance Financing
A trust-first dental insurance and financing page: a grid of accepted insurer badges with verification chips, three side-by-side 0% APR financing tiers with feature checklists, and a live monthly payment calculator that turns treatment cost and term length into a clear per-month estimate with a running amortization summary and toast confirmations.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--blue: #2563eb;
--blue-d: #1d4ed8;
--blue-50: #eff5ff;
--mint: #34d399;
--mint-50: #e8fbf3;
--ink: #0f2740;
--ink-2: #3a5169;
--muted: #6b7c90;
--bg: #f3f8ff;
--white: #fff;
--line: rgba(15, 39, 64, 0.10);
--line-2: rgba(15, 39, 64, 0.18);
--ok: #22b07d;
--warn: #d98a2b;
--danger: #e05252;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--sh-sm: 0 1px 2px rgba(15, 39, 64, 0.06), 0 1px 3px rgba(15, 39, 64, 0.05);
--sh-md: 0 6px 18px rgba(15, 39, 64, 0.08);
--sh-lg: 0 18px 44px rgba(37, 99, 235, 0.14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
line-height: 1.5;
color: var(--ink);
background:
radial-gradient(1100px 480px at 82% -6%, var(--blue-50), transparent 60%),
radial-gradient(760px 420px at -8% 8%, var(--mint-50), transparent 62%),
var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
.page { max-width: 1040px; margin: 0 auto; padding: 40px 22px 72px; }
h1, h2 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
/* HERO */
.hero { text-align: center; padding: 20px 0 40px; }
.eyebrow {
display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--blue-d);
background: var(--white); border: 1px solid var(--line);
padding: 6px 14px; border-radius: 999px; box-shadow: var(--sh-sm);
}
.hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; margin: 18px 0 12px; }
.lede { max-width: 620px; margin: 0 auto; color: var(--ink-2); font-size: 1.06rem; }
.hero-trust { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.trust-pill {
display: inline-flex; align-items: center; gap: 8px;
font-size: .84rem; font-weight: 600; color: var(--ink-2);
background: var(--white); border: 1px solid var(--line);
padding: 8px 14px; border-radius: 999px; box-shadow: var(--sh-sm);
}
.trust-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-50); }
/* BLOCK */
.block { margin-top: 30px; }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.block-head h2 { font-size: 1.4rem; font-weight: 700; }
.sub { color: var(--muted); font-size: .95rem; margin-top: 4px; max-width: 560px; }
.counter {
font-size: .8rem; font-weight: 600; color: var(--blue-d);
background: var(--blue-50); border: 1px solid var(--line);
padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
/* INSURERS */
.insurer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.insurer {
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 16px; box-shadow: var(--sh-sm);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
display: flex; flex-direction: column; gap: 12px;
}
.insurer:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.insurer .logo {
width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
font-weight: 800; color: var(--white); font-size: 1.05rem; letter-spacing: -0.02em;
}
.insurer .name { font-weight: 700; font-size: .96rem; line-height: 1.25; }
.insurer .chip {
display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
font-size: .72rem; font-weight: 600; color: var(--ok);
background: var(--mint-50); border: 1px solid rgba(34, 176, 125, .22);
padding: 4px 9px; border-radius: 999px;
}
.insurer .chip svg { width: 12px; height: 12px; }
/* PLANS */
.plan-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan {
position: relative; background: var(--white); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--sh-sm);
display: flex; flex-direction: column; gap: 14px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.plan.featured { border-color: var(--blue); box-shadow: var(--sh-lg); }
.plan .ribbon {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--blue); color: var(--white); font-size: .72rem; font-weight: 700;
padding: 5px 14px; border-radius: 999px; letter-spacing: .02em; box-shadow: var(--sh-md);
}
.plan .term-name { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-d); }
.plan .apr { display: flex; align-items: baseline; gap: 6px; }
.plan .apr b { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; }
.plan .apr span { color: var(--muted); font-size: .9rem; }
.plan .months { color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plan li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.plan li svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 2px; }
.plan .btn-plan {
margin-top: auto; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
padding: 11px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
background: var(--white); color: var(--ink); transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.plan .btn-plan:hover { background: var(--blue-50); border-color: var(--blue); color: var(--blue-d); }
.plan.featured .btn-plan { background: var(--blue); border-color: var(--blue); color: var(--white); }
.plan.featured .btn-plan:hover { background: var(--blue-d); }
/* CALCULATOR */
.calc-block { margin-top: 34px; }
.calc {
display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px;
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 26px; box-shadow: var(--sh-md);
}
.calc-controls { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-top label { font-weight: 700; font-size: .96rem; }
.field-top .opt { font-weight: 500; color: var(--muted); font-size: .82rem; }
.money-input {
display: inline-flex; align-items: center; gap: 4px;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
padding: 6px 12px; background: var(--white); transition: border-color .16s ease, box-shadow .16s ease;
}
.money-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.money-input span { color: var(--muted); font-weight: 600; }
.money-input input {
border: 0; outline: none; font: inherit; font-weight: 700; font-size: 1rem;
width: 84px; text-align: right; color: var(--ink); background: transparent;
}
.help { color: var(--muted); font-size: .82rem; }
input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%; height: 6px;
border-radius: 999px; background: var(--blue-50); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--white); border: 3px solid var(--blue); box-shadow: var(--sh-sm); cursor: grab;
transition: transform .12s ease;
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%; background: var(--white);
border: 3px solid var(--blue); box-shadow: var(--sh-sm); cursor: grab;
}
input[type="range"]:focus-visible { box-shadow: 0 0 0 3px var(--blue-50); }
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--blue-50); padding: 5px; border-radius: var(--r-sm); }
.segmented button {
font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; padding: 9px 6px;
border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.segmented button:hover { color: var(--blue-d); }
.segmented button[aria-checked="true"] { background: var(--white); color: var(--blue-d); box-shadow: var(--sh-sm); }
/* RESULT */
.calc-result {
background: linear-gradient(160deg, #0f2740, #16375a);
color: var(--white); border-radius: var(--r-lg); padding: 26px 24px;
display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sh-md);
}
.result-label { font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .7); letter-spacing: .02em; }
.result-amount { display: flex; align-items: baseline; gap: 3px; }
.result-amount .cur { font-size: 1.3rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
.result-amount #monthly { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; }
.result-amount .per { font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, .65); }
.apr-badge {
align-self: flex-start; font-size: .74rem; font-weight: 700; color: #062a1e;
background: var(--mint); padding: 5px 11px; border-radius: 999px; margin-top: 2px;
}
.breakdown { display: flex; flex-direction: column; gap: 0; margin: 16px 0 6px; }
.breakdown div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.breakdown div:last-child { border-bottom: 0; }
.breakdown dt { color: rgba(255, 255, 255, .7); font-size: .88rem; }
.breakdown dd { margin: 0; font-weight: 700; font-size: .95rem; }
.breakdown div:last-child dd { color: var(--mint); }
.btn-primary {
margin-top: 10px; font: inherit; font-weight: 700; font-size: .96rem; cursor: pointer;
padding: 13px 18px; border-radius: var(--r-sm); border: 0; color: var(--white);
background: var(--blue); box-shadow: 0 6px 16px rgba(37, 99, 235, .4);
transition: transform .12s ease, background .16s ease;
}
.btn-primary:hover { background: var(--blue-d); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.fineprint { font-size: .74rem; color: rgba(255, 255, 255, .55); text-align: center; margin-top: 4px; }
/* FOCUS */
:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; border-radius: 6px; }
/* TOAST */
.toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
background: var(--ink); color: var(--white); font-weight: 600; font-size: .9rem;
padding: 12px 20px; border-radius: 999px; box-shadow: var(--sh-lg);
opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* RESPONSIVE */
@media (max-width: 860px) {
.insurer-grid { grid-template-columns: repeat(3, 1fr); }
.plan-row { grid-template-columns: 1fr; }
.plan.featured { order: -1; }
.calc { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.page { padding: 28px 15px 60px; }
.block-head { flex-direction: column; align-items: flex-start; }
.insurer-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
.insurer { padding: 13px; }
.calc { padding: 18px; }
.calc-result { padding: 22px 18px; }
.result-amount #monthly { font-size: 2.5rem; }
.segmented button { font-size: .82rem; padding: 9px 3px; }
.money-input input { width: 68px; }
.hero h1 { font-size: 1.9rem; }
}(function () {
"use strict";
/* ---------- Data ---------- */
var INSURERS = [
{ name: "Delta Meridian", short: "DM", color: "#2563eb" },
{ name: "Cigna Rowan", short: "CR", color: "#0ea5a3" },
{ name: "Aetna Bluepeak", short: "AB", color: "#7c3aed" },
{ name: "MetLife Grove", short: "MG", color: "#16a34a" },
{ name: "Guardian Vale", short: "GV", color: "#db2777" },
{ name: "Humana Crest", short: "HC", color: "#ea580c" },
{ name: "United Harbor", short: "UH", color: "#0284c7" },
{ name: "Principal Oak", short: "PO", color: "#4f46e5" }
];
var PLANS = [
{
term: "Short term", months: 6, featured: false,
perks: ["0% APR for 6 months", "No prepayment penalty", "Decision in minutes"]
},
{
term: "Balanced", months: 12, featured: true,
perks: ["0% APR for 12 months", "Lower monthly payments", "Covers most treatment plans", "Autopay reminders"]
},
{
term: "Extended", months: 24, featured: false,
perks: ["0% APR for 24 months", "Smallest monthly payment", "Great for full-mouth care"]
}
];
/* ---------- Helpers ---------- */
function $(id) { return document.getElementById(id); }
function money(n) {
return "$" + Math.round(n).toLocaleString("en-US");
}
var checkSVG = '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10.5l4 4 8-9" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
var toastEl = $("toast");
var toastTimer;
function toast(msg) {
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toastEl.classList.remove("show"); }, 2400);
}
/* ---------- Render insurers ---------- */
var grid = $("insurerGrid");
INSURERS.forEach(function (ins) {
var card = document.createElement("div");
card.className = "insurer";
card.innerHTML =
'<div class="logo" style="background:' + ins.color + '">' + ins.short + '</div>' +
'<div class="name">' + ins.name + '</div>' +
'<span class="chip">' + checkSVG + ' In-network</span>';
grid.appendChild(card);
});
$("insCount").textContent = INSURERS.length + " plans in-network";
/* ---------- Render plans ---------- */
var planRow = $("planRow");
PLANS.forEach(function (p) {
var el = document.createElement("div");
el.className = "plan" + (p.featured ? " featured" : "");
el.setAttribute("role", "listitem");
var lis = p.perks.map(function (t) { return "<li>" + checkSVG + "<span>" + t + "</span></li>"; }).join("");
el.innerHTML =
(p.featured ? '<span class="ribbon">Most chosen</span>' : "") +
'<span class="term-name">' + p.term + '</span>' +
'<div class="apr"><b>0%</b><span>APR</span></div>' +
'<div class="months">Pay over ' + p.months + ' months</div>' +
'<ul>' + lis + '</ul>' +
'<button type="button" class="btn-plan" data-months="' + p.months + '">Use this plan</button>';
planRow.appendChild(el);
});
planRow.addEventListener("click", function (e) {
var btn = e.target.closest(".btn-plan");
if (!btn) return;
var m = parseInt(btn.getAttribute("data-months"), 10);
setTerm(m);
compute();
$("costInput").focus({ preventScroll: true });
document.querySelector(".calc-block").scrollIntoView({ behavior: "smooth", block: "start" });
toast(m + "-month plan loaded into the calculator");
});
/* ---------- Calculator ---------- */
var costInput = $("costInput");
var costRange = $("costRange");
var downInput = $("downInput");
var downRange = $("downRange");
var termGroup = $("termGroup");
var monthlyEl = $("monthly");
var months = 12;
function clamp(v, min, max) { return Math.min(max, Math.max(min, v)); }
function setTerm(m) {
months = m;
Array.prototype.forEach.call(termGroup.children, function (b) {
var on = parseInt(b.getAttribute("data-months"), 10) === m;
b.setAttribute("aria-checked", on ? "true" : "false");
});
}
// animate the monthly number
var animFrom = 0, animRAF;
function animateMonthly(to) {
cancelAnimationFrame(animRAF);
var from = animFrom, start = null, dur = 380;
function step(ts) {
if (start === null) start = ts;
var t = Math.min(1, (ts - start) / dur);
var eased = 1 - Math.pow(1 - t, 3);
var val = from + (to - from) * eased;
monthlyEl.textContent = Math.round(val).toLocaleString("en-US");
if (t < 1) { animRAF = requestAnimationFrame(step); } else { animFrom = to; }
}
animRAF = requestAnimationFrame(step);
}
function compute() {
var cost = clamp(parseFloat(costInput.value) || 0, 250, 25000);
var down = clamp(parseFloat(downInput.value) || 0, 0, cost);
var financed = Math.max(0, cost - down);
var monthly = months > 0 ? financed / months : 0;
animateMonthly(monthly);
$("financed").textContent = money(financed);
$("payments").textContent = months + " payments";
$("downOut").textContent = money(down);
$("total").textContent = money(cost);
}
// keep slider + number field in sync
function bindPair(numEl, rangeEl, max) {
numEl.addEventListener("input", function () {
var v = clamp(parseFloat(numEl.value) || 0, parseFloat(numEl.min), parseFloat(numEl.max));
if (parseFloat(rangeEl.value) !== v) rangeEl.value = Math.min(v, parseFloat(rangeEl.max));
compute();
});
rangeEl.addEventListener("input", function () {
numEl.value = rangeEl.value;
compute();
});
numEl.addEventListener("blur", function () {
var v = clamp(parseFloat(numEl.value) || parseFloat(numEl.min), parseFloat(numEl.min), parseFloat(numEl.max));
numEl.value = v;
compute();
});
}
bindPair(costInput, costRange);
bindPair(downInput, downRange);
// segmented term control (mouse + keyboard)
termGroup.addEventListener("click", function (e) {
var b = e.target.closest("button");
if (!b) return;
setTerm(parseInt(b.getAttribute("data-months"), 10));
compute();
});
termGroup.addEventListener("keydown", function (e) {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
var btns = Array.prototype.slice.call(termGroup.children);
var i = btns.findIndex(function (b) { return b.getAttribute("aria-checked") === "true"; });
i = e.key === "ArrowRight" ? (i + 1) % btns.length : (i - 1 + btns.length) % btns.length;
var next = btns[i];
setTerm(parseInt(next.getAttribute("data-months"), 10));
next.focus();
compute();
});
$("calcForm").addEventListener("submit", function (e) { e.preventDefault(); });
$("applyBtn").addEventListener("click", function () {
toast("Pre-qualification started — this won't affect your credit score");
});
// init
setTerm(12);
compute();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Insurance & Financing — Brightleaf Dental</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page">
<header class="hero">
<span class="eyebrow">Brightleaf Dental • Payments</span>
<h1>Insurance & financing made simple</h1>
<p class="lede">
We work with most major plans and offer 0% APR payment options so you can start
treatment today and spread the cost over time — no surprises.
</p>
<div class="hero-trust" role="list">
<span role="listitem" class="trust-pill"><span class="dot"></span> No hidden fees</span>
<span role="listitem" class="trust-pill"><span class="dot"></span> Soft credit check</span>
<span role="listitem" class="trust-pill"><span class="dot"></span> Instant estimate</span>
</div>
</header>
<!-- INSURERS -->
<section class="block" aria-labelledby="ins-h">
<div class="block-head">
<div>
<h2 id="ins-h">Accepted insurance</h2>
<p class="sub">We're in-network with these providers. Don't see yours? We'll still file your claim.</p>
</div>
<span class="counter" id="insCount" aria-live="polite"></span>
</div>
<div class="insurer-grid" id="insurerGrid"></div>
</section>
<!-- FINANCING PLANS -->
<section class="block" aria-labelledby="plan-h">
<div class="block-head">
<div>
<h2 id="plan-h">Financing plans</h2>
<p class="sub">Interest-free tiers backed by our care-credit partner. Choose a term to load it into the calculator.</p>
</div>
</div>
<div class="plan-row" id="planRow" role="list"></div>
</section>
<!-- CALCULATOR -->
<section class="block calc-block" aria-labelledby="calc-h">
<div class="block-head">
<div>
<h2 id="calc-h">Monthly payment calculator</h2>
<p class="sub">Estimate your monthly payment. Adjust the treatment cost, term and any down payment.</p>
</div>
</div>
<div class="calc">
<form class="calc-controls" id="calcForm" novalidate>
<div class="field">
<div class="field-top">
<label for="costInput">Treatment cost</label>
<div class="money-input">
<span aria-hidden="true">$</span>
<input type="number" id="costInput" min="250" max="25000" step="50" value="3200"
inputmode="numeric" aria-describedby="costHelp" />
</div>
</div>
<input type="range" id="costRange" min="250" max="25000" step="50" value="3200"
aria-label="Treatment cost slider" />
<p class="help" id="costHelp">Typical range for crowns, aligners or implants.</p>
</div>
<div class="field">
<div class="field-top">
<label id="termLabel">Financing term</label>
</div>
<div class="segmented" role="radiogroup" aria-labelledby="termLabel" id="termGroup">
<button type="button" role="radio" data-months="6" aria-checked="false">6 mo</button>
<button type="button" role="radio" data-months="12" aria-checked="true">12 mo</button>
<button type="button" role="radio" data-months="18" aria-checked="false">18 mo</button>
<button type="button" role="radio" data-months="24" aria-checked="false">24 mo</button>
</div>
<p class="help">All listed terms are 0% APR for qualified patients.</p>
</div>
<div class="field">
<div class="field-top">
<label for="downInput">Down payment <span class="opt">(optional)</span></label>
<div class="money-input">
<span aria-hidden="true">$</span>
<input type="number" id="downInput" min="0" max="25000" step="50" value="0" inputmode="numeric" />
</div>
</div>
<input type="range" id="downRange" min="0" max="10000" step="50" value="0" aria-label="Down payment slider" />
<p class="help">Paying some upfront lowers each monthly installment.</p>
</div>
</form>
<aside class="calc-result" aria-live="polite">
<p class="result-label">Estimated monthly payment</p>
<p class="result-amount"><span class="cur">$</span><span id="monthly">0</span><span class="per">/mo</span></p>
<span class="apr-badge">0% APR</span>
<dl class="breakdown">
<div><dt>Financed amount</dt><dd id="financed">$0</dd></div>
<div><dt>Number of payments</dt><dd id="payments">0</dd></div>
<div><dt>Down payment</dt><dd id="downOut">$0</dd></div>
<div><dt>Total paid</dt><dd id="total">$0</dd></div>
</dl>
<button type="button" class="btn-primary" id="applyBtn">Pre-qualify in 60 seconds</button>
<p class="fineprint">Estimate only. Final terms depend on approval and treatment plan.</p>
</aside>
</div>
</section>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>A reassuring, clinical-light landing block that helps patients understand how they can pay for care. The top section shows a responsive grid of accepted insurers rendered as soft rounded badges, each carrying an “In-network” verification chip so patients can scan for their plan at a glance. Below it, three financing plans sit in a comparison row — a short-term 0% APR tier, a popular mid-term plan flagged with a “Most chosen” ribbon, and a longer extended-term option — each with a checklist of benefits and a call-to-action.
The centrepiece is a live monthly payment calculator. A treatment-cost slider and number input stay in sync, a segmented control picks the financing term (6, 12, 18 or 24 months), and an optional down-payment field reduces the financed amount. As the patient adjusts any control, the estimated monthly payment animates to its new value and a small breakdown updates the financed total, number of payments and 0% APR note. Selecting a plan tier pre-fills the calculator term, and every meaningful action fires an accessible toast so the interaction always feels acknowledged.
Everything is keyboard-usable with visible focus rings, scales cleanly down to a single column on narrow screens, and uses only fictional insurer names and illustrative rates.
Illustrative UI only — not intended for real medical use.