*{box-sizing:border-box}
body{margin:0;background:#C8202A}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
button{cursor:pointer}

/* Page: 390 x 844 phone layout */
.page{
  position:relative;overflow:hidden;
  width:100%;max-width:390px;min-height:844px;margin:0 auto;
  display:flex;flex-direction:column;
  font-family:'DM Sans',sans-serif;color:#FFFFFF;
  background-color:#C8202A;
  background-image:repeating-linear-gradient(-28deg,rgba(0,0,0,0) 0 38px,rgba(0,0,0,.05) 38px 76px);
}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 0}
.back{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.16)}
.wordmark{height:60px;width:auto;display:block}

/* Amount */
.amount{padding:6px 24px 22px;display:flex;flex-direction:column;gap:6px}
.amount-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFD66B}
.amount-label{font-size:15px;color:#FFE9E3}
.amount-value{font-family:'Bowlby One',sans-serif;font-size:52px;line-height:1.05;text-shadow:4px 4px 0 #7E1119}

/* White sheet */
.sheet{
  flex:1;background:#FFFFFF;border-radius:28px 28px 0 0;padding:22px 20px 24px;color:#2B0F12;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 -10px 30px rgba(0,0,0,.18);
}
.step{display:flex;align-items:center;gap:10px}
.step-2{margin-top:4px}
.step-num{width:26px;height:26px;border-radius:50%;background:#C8202A;color:#FFFFFF;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.step-title{font-weight:700;font-size:18px}

/* Account card */
.account{background:#FFF6D9;border:2px dashed #E2B04A;border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.account-row{display:flex;justify-content:space-between;font-size:14px}
.account-row span:first-child{color:#6B4A3A}
.account-row span:last-child{font-weight:700}
.account-divider{height:1px;background:#E8D6A6}
.account-number-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.account-number-wrap{display:flex;flex-direction:column}
.account-number-label{font-size:12px;color:#6B4A3A}
.account-number{font-weight:700;font-size:26px;letter-spacing:.08em}
.copy{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:#C8202A;color:#FFFFFF;font-weight:700;font-size:15px}

/* Form */
.label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#6B4A3A}
.field{height:52px;width:100%;border-radius:16px;border:1.5px solid #E6D5D5;background:#F7EFEF;padding:0 16px;font-size:16px;color:#2B0F12;outline:none}
.field::placeholder{color:#9A8580}
.field:focus{border-color:#C8202A;background:#FFFFFF}
.spacer{flex:1}
.error{margin:0;text-align:center;font-size:14px;font-weight:700;color:#C8202A}
.error[hidden]{display:none}
.cta{border:0;width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#C8202A;color:#FFFFFF;font-weight:700;font-size:19px}

/* Claim pop-up */
.overlay{position:fixed;inset:0;z-index:10;display:none;align-items:flex-end;justify-content:center;background:rgba(43,15,18,.62)}
.overlay.open{display:flex}
.dialog{
  position:relative;width:100%;max-width:390px;max-height:92vh;overflow:auto;
  background:#FFFFFF;color:#2B0F12;border-radius:28px 28px 0 0;padding:28px 20px 24px;
  display:flex;flex-direction:column;gap:14px;animation:rise .25s ease-out;
}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dialog{animation:none}}
.dialog-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:#F7EFEF;color:#2B0F12;font-size:22px;line-height:1}
.gift{width:64px;height:64px;border-radius:50%;background:#FFD66B;display:flex;align-items:center;justify-content:center;align-self:center}
.dialog-title{margin:0;text-align:center;font-family:'Bowlby One',sans-serif;font-weight:400;font-size:28px;line-height:1.1;color:#C8202A}
.dialog-sub{margin:0;text-align:center;font-size:16px;color:#6B4A3A}
.dialog-form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.later{min-height:44px;border:0;background:none;color:#6B4A3A;font-weight:700;font-size:15px}
.thanks{display:none;flex-direction:column;gap:14px;align-items:center;text-align:center}
.dialog.done .dialog-form,.dialog.done .dialog-sub{display:none}
.dialog.done .thanks{display:flex}