.attachment-hero{display:flex;justify-content:space-between;align-items:center;gap:26px;padding:28px 30px;border-radius:20px;background:linear-gradient(135deg,#11335d,#1b527e);color:#fff;box-shadow:0 18px 35px rgba(19,54,93,.16)}
.attachment-hero .eyebrow{color:#bad7f4}.attachment-hero h2{margin:6px 0 8px;font-size:29px}.attachment-hero p:not(.eyebrow){max-width:590px;margin:0;color:#e1edf8;font-size:13px;line-height:1.65}.attachment-amount{min-width:130px;text-align:right}.attachment-amount span,.attachment-amount small{display:block;color:#c8dff3;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.attachment-amount b{display:block;margin:3px 0;font:600 45px/1 'Playfair Display',Georgia,serif;color:#fff}.attachment-actions{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:18px}.attachment-actions h2,.rules h2,.history h2{margin:5px 0 10px}.attachment-actions p{max-width:600px;margin:0;color:#627489;font-size:12px;line-height:1.6}.attachment-actions button{flex:0 0 auto;border:0;padding:15px 18px;background:#173d6e;color:#fff;font:800 12px Manrope,Arial,sans-serif;cursor:pointer}.attachment-actions button span{padding-left:18px;font-size:18px}.rules,.history{margin-top:18px}.rules ol{display:grid;gap:13px;padding-left:20px;color:#586a80;font-size:12px;line-height:1.6}.rules b{color:#163864}.history-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #e4e9ef;font-size:12px;color:#586a80}.history-row:last-child{border-bottom:0}.history-row b{display:block;color:#173861;font-size:13px}.history-state{padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}.history-state.paid{background:#e1f4e7;color:#28764c}.history-state.due{background:#fff0d8;color:#986211}.attachment-hero.is-paid{background:linear-gradient(135deg,#104b42,#287b5d)}.attachment-hero.is-paid .eyebrow,.attachment-hero.is-paid .attachment-amount span,.attachment-hero.is-paid .attachment-amount small{color:#c7ead8}.attachment-hero.is-paid p:not(.eyebrow){color:#e2f5e9}.attachment-actions.is-paid button{background:#316f5a;cursor:default}.attachment-hero.is-suspended{background:linear-gradient(135deg,#652f37,#9a3e47)}
@media(max-width:680px){.attachment-hero,.attachment-actions{align-items:flex-start;flex-direction:column}.attachment-hero{padding:23px}.attachment-amount{text-align:left}.attachment-actions button{width:100%}.attachment-hero h2{font-size:26px}}