:root{--br4-navy:#103753;--br4-teal:#087d77;--br4-ink:#182d40;--br4-soft:#f2f8f8;--br4-border:#dfebeb;--br4-amber:#f6a116}
html{scroll-behavior:smooth}body.br4-body{min-height:100vh;margin:0;background:linear-gradient(180deg,#f4fafb 0%,#fff 470px);color:var(--br4-ink);display:flex;flex-direction:column}
.br4-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--br4-border);box-shadow:0 1px 12px #1037530b}
.br4-brand img{max-width:170px;height:48px;object-fit:contain;object-position:left}
.br4-header .nav-link{font-weight:600;color:#395064}.br4-header .nav-link:hover{color:var(--br4-teal)}
.br4-main{flex:1;padding-top:1.8rem}.br4-footer{border-top:1px solid var(--br4-border);padding:1.15rem 0;color:#637588;font-size:.84rem}
.btn-primary{background:var(--br4-teal);border-color:var(--br4-teal)}.btn-primary:hover,.btn-primary:focus{background:#065f5b;border-color:#065f5b}.btn-outline-primary{color:var(--br4-teal);border-color:var(--br4-teal)}.btn-outline-primary:hover{background:var(--br4-teal);border-color:var(--br4-teal)}
.br4-hero{border-radius:24px;background:var(--br4-navy);position:relative;min-height:280px;overflow:hidden;color:#fff;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 16px 36px #10375320}.br4-hero-content{z-index:1;padding:2.5rem;align-self:center}.br4-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.12;margin:.75rem 0}.br4-hero h1 span{color:#73ded0}.br4-hero p{max-width:440px;color:#e3f5f4}.br4-hero-visual{position:relative;min-width:0;min-height:280px;overflow:hidden;background:#b4e5e5}.br4-hero-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 68%}.br4-eyebrow,.br4-month-label{font-size:.73rem;letter-spacing:.12em;font-weight:800;color:var(--br4-teal)}.br4-hero .br4-eyebrow{color:#a6f2e8}
.br4-panel,.br4-stat{border:1px solid var(--br4-border);border-radius:16px;box-shadow:0 3px 13px #10375309}.br4-stat .card-body{padding:1.2rem}.br4-stat-label{color:#657789;font-size:.82rem;font-weight:600;margin-bottom:.65rem}.br4-stat .h3{overflow-wrap:anywhere}.br4-teal{color:var(--br4-teal)!important}.br4-progress{height:12px;border-radius:50px;background:#e2eeee}.br4-progress .progress-bar{background:linear-gradient(90deg,#0e6f6b,#25ad9a);border-radius:50px}
.br4-back{display:inline-block;margin-top:.4rem;color:var(--br4-teal);text-decoration:none;font-weight:600}.br4-back:hover{text-decoration:underline}.br4-history-card .br4-amount{font-size:1.4rem;color:var(--br4-navy);font-weight:800}.br4-history-card .card{transition:transform .18s,box-shadow .18s}.br4-history-card .card:hover{transform:translateY(-2px);box-shadow:0 10px 26px #10375314}.br4-empty{text-align:center;padding:2rem 1rem;background:#fff;border:1px dashed #c7dddd;border-radius:18px}.br4-empty img{max-width:min(100%,340px);max-height:240px;object-fit:contain;margin:0 auto 1rem}.br4-empty p{color:#667889}.br4-paid{background:#d7f7e7;color:#176344}.br4-unpaid{background:#fff0d9;color:#955914}.br4-details .badge{font-size:.8rem;padding:.45rem .65rem}.br4-print-heading{display:none}
@media(max-width:767.98px){.br4-main{padding-top:1rem}.br4-hero{grid-template-columns:1fr;min-height:0}.br4-hero-content{padding:1.6rem 1.4rem}.br4-hero-visual{min-height:205px}.br4-hero-image{object-position:50% 76%}.br4-hero h1{font-size:2.1rem}.br4-stat .card-body{padding:.9rem}.br4-stat .h3{font-size:clamp(1rem,4vw,1.4rem)}.br4-footer .container{justify-content:center!important;text-align:center}.br4-details .br-share-actions .btn{flex:1 1 42%}}
@media print{body.br4-body{display:block;background:#fff!important;margin:0!important}.br4-header,.br4-footer,.br4-screen-only,.br-screen-only,.br-share-actions,#download-png,#share-png,#br4-copy-summary{display:none!important}.br4-main{max-width:100%;padding:0!important}.br4-print-heading{display:block;padding:0 0 1rem;border-bottom:2px solid #103753;margin-bottom:1.5rem}.br4-print-heading img{width:170px;height:auto}.br4-print-heading h1{font-size:1.4rem;margin-top:.6rem}.br4-details .card{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc}.br4-details .table-responsive{overflow:visible!important}.br4-details .badge{border:1px solid #888;background:none!important;color:#333!important}a[href]:after{content:none!important}}

/* Phase 4: responsive hero. Dedicated artwork has no baked-in logo or wordmark. */
@media(max-width:420px){.br4-hero-visual{min-height:185px}.br4-hero-image{object-position:50% 76%}}
@media(max-width:359.98px){.br4-hero-visual{min-height:165px}.br4-hero-content{padding:1.35rem 1.15rem}.br4-hero h1{font-size:1.8rem}}