/* PP&G invoice payment page — Zelle first, 2026-10-08. */
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope.woff2') format('woff2');font-display:swap}
@font-face{font-family:Cormorant;src:url('/assets/fonts/cormorant-garamond.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--navy:#102541;--ink:#162947;--muted:#52637b;--line:#dbe4ed;--pink:#ac2866;--purple:#6c25cd;--background:#f4f6f9;font-family:Manrope,Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(ellipse at 15% -5%,#e2eef6,transparent 44%),var(--background);line-height:1.55}
a{color:#9c225e}a:focus-visible{outline:3px solid #8724d4;outline-offset:4px}
.site-wrap{max-width:1100px;margin:0 auto;padding:22px 24px 26px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 48px}
.site-brand img{display:block;width:min(296px,56vw);height:auto}
.header-phone{color:#52637b;text-decoration:none;font-size:.81rem}.header-phone strong{display:block;color:var(--navy);font-size:1rem;white-space:nowrap}
.intro-wrap{margin:0 0 35px;max-width:850px}
.overline{font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:var(--pink);margin:0 0 8px}
h1,h2,p{margin-top:0}
h1{font-family:Cormorant,Georgia,serif;font-size:clamp(3.3rem,7vw,5.4rem);font-weight:600;letter-spacing:-.035em;line-height:1.03;margin:0 0 12px;color:#0d203a}
h1 .accent{color:var(--pink)}
.intro{color:var(--muted);font-size:1.05rem;line-height:1.75;max-width:700px;margin:0}
.payment-option{overflow:hidden;background:white;border-radius:22px;border:1px solid var(--line);box-shadow:0 16px 55px rgba(16,37,65,.055);margin-bottom:22px}
.zelle-card{border-color:#dfd1f4;box-shadow:0 18px 54px rgba(73,40,114,.075)}
.option-topline{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;padding:15px 27px;background:#f5eefc;border-bottom:1px solid #e8def5}
.option-number{color:#5a239c;font-size:.75rem;letter-spacing:.12em;font-weight:900}.option-number span{color:#ad99c8;padding:0 4px}
.preferred-label{font-size:.74rem;font-weight:800;color:#5b278d;background:white;padding:6px 12px;border:1px solid #dcc8f2;border-radius:100px}
.zelle-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);gap:clamp(30px,5vw,58px);align-items:center;padding:38px 42px 28px}
h2{font-family:Cormorant,Georgia,serif;font-weight:600;letter-spacing:-.03em;font-size:clamp(2.6rem,4.3vw,3.65rem);line-height:1.05;margin:0 0 17px;color:var(--navy)}
.zelle-mark{font-family:Arial,sans-serif;font-size:.35em;vertical-align:super;letter-spacing:0;color:var(--purple)}
.option-lead{font-size:1.02rem;line-height:1.72;color:#465870;margin:0 0 24px;max-width:520px}.option-lead strong{color:#203652}
.zelle-instructions-title{font-weight:800;font-size:.86rem;margin:0 0 11px;color:var(--navy)}
.pay-steps{counter-reset:steps;list-style:none;margin:0;padding:0;display:grid;gap:13px}
.pay-steps li{counter-increment:steps;display:grid;grid-template-columns:26px 1fr;gap:12px;line-height:1.55;font-size:.88rem;color:#465870}
.pay-steps li:before{content:counter(steps);display:flex;align-items:center;justify-content:center;border-radius:50%;width:25px;height:25px;background:#f1e7fc;color:#5b278d;font-size:.73rem;font-weight:900}
.pay-steps strong{color:var(--ink)}
.small-notice{border-left:3px solid #d4b8ec;padding:9px 0 9px 13px;margin-top:25px;font-size:.82rem;color:#5b6175;line-height:1.65}
.qr-column{text-align:center}
.qr-frame{background:#fff;padding:12px;border:1px solid #e2d7f1;border-radius:13px;box-shadow:0 9px 25px rgba(27,38,59,.065);max-width:360px;margin:0 auto}
.qr-frame img{display:block;width:100%;height:auto;image-rendering:auto}
.qr-caption{font-size:.78rem;color:#6d597e;margin:14px 0 0;font-weight:800;letter-spacing:.02em}
.zelle-footnote{border-top:1px solid #eee6f6;padding:14px 41px;margin:0;color:#6e6980;font-size:.73rem;line-height:1.65;background:#fefcff}
.card-topline{background:#f1f5f8;border-bottom:1px solid #e0e8ef}
.card-topline .option-number{color:#3e526e}.card-topline .option-number span{color:#9cabb9}
.card-method-label{font-size:.74rem;font-weight:700;color:#53657c}
.card-layout{padding:32px 42px 36px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:45px;align-items:center}
.card-layout h2{font-size:clamp(2.2rem,4vw,3.1rem);margin:0 0 15px}
.card-copy p{font-size:.89rem;line-height:1.75;color:#4d5e73;margin:0 0 12px}.card-copy p strong{color:#213652}
.card-copy .security-note{font-size:.79rem;color:#718094;margin:16px 0 0}
.card-action{text-align:center}
.card-button{display:flex;justify-content:space-between;align-items:center;gap:14px;text-decoration:none;font-weight:800;background:var(--navy);color:white!important;padding:18px 20px;border-radius:9px;text-align:left;font-size:.88rem;line-height:1.45;box-shadow:0 10px 20px rgba(16,37,65,.12);transition:background .17s,transform .17s}
.card-button:hover{background:#214978;transform:translateY(-1px)}.card-button span{font-size:1.45rem;font-weight:400}
.action-caption{color:#718094;font-size:.72rem;margin:13px 0 0;line-height:1.6}
.payment-unavailable{border:1px solid #ecc6cd;background:#fff5f6;padding:16px;border-radius:8px;font-size:.85rem;color:#883347}
.site-footer{text-align:center;padding:11px 0 20px;color:#67768b;font-size:.8rem;line-height:1.7}
.site-footer p{margin:0 0 9px}.site-footer p+p{font-size:.71rem;color:#8792a1}
/* Zelle payment deep link: mobile-first CTA, hidden on desktop where QR scan works best. */
.zelle-mobile-payment{display:none}
.zelle-scan-mobile{display:none}
.zelle-mobile-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:17px 20px;border-radius:11px;background:#6c25cd;color:#fff!important;font-weight:850;font-size:.96rem;line-height:1.35;text-decoration:none;box-shadow:0 9px 24px rgba(92,32,163,.16);transition:background .17s,transform .17s}
.zelle-mobile-button:hover{background:#561aa8;transform:translateY(-1px)}
.zelle-mobile-button:focus-visible{outline:3px solid #b88cf6;outline-offset:4px}
.zelle-mobile-button span{font-size:1.4rem;font-weight:400}
.zelle-mobile-caption{margin:8px 2px 0;color:#667184;font-size:.77rem;line-height:1.55}
@media(max-width:780px){.zelle-mobile-payment{display:block;margin:4px 0 24px}.zelle-scan-desktop{display:none}.zelle-scan-mobile{display:inline}.site-header{padding-bottom:38px}.zelle-layout{grid-template-columns:1fr;gap:32px;padding:30px 29px}.qr-frame{width:min(360px,100%)}.card-layout{grid-template-columns:1fr;gap:23px;padding:29px}.card-action{max-width:420px}.zelle-footnote{padding:14px 29px}}
@media(max-width:490px){.site-wrap{padding:12px 13px 20px}.site-header{padding:9px 0 32px;align-items:flex-start;gap:9px}.site-brand img{width:min(225px,51vw)}.header-phone{font-size:.64rem}.header-phone strong{font-size:.74rem}.intro-wrap{margin-bottom:25px}h1{font-size:clamp(3rem,12vw,4rem)}.intro{font-size:.94rem}.payment-option{border-radius:15px}.option-topline{padding:13px 16px}.preferred-label,.card-method-label{font-size:.64rem}.zelle-layout{padding:25px 19px}.zelle-footnote{padding:13px 19px}.card-layout{padding:24px 19px}.qr-frame{max-width:330px;padding:9px}h2{font-size:2.6rem}.pay-steps li{font-size:.83rem}}
@media print{body{background:white}.site-wrap{max-width:100%;padding:0}.payment-option{box-shadow:none;break-inside:avoid}.card-button{background:#ddd!important;color:#111!important}.site-header{padding-bottom:20px}}