:root{
  --pink:       #d97706;
  --pink-dark:  #b45309;
  --green:      #78350f;
  --green-light:#fef3c7;
  --cream:      #fffbeb;
  --text:       #292524;
  --muted:      #78716c;
  --line:       #e7e5e4;
}
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:var(--cream);
    color:var(--text);
    line-height:1.45;
    font-size:clamp(.875rem,2.5vw,1rem);
    -webkit-font-smoothing:antialiased;
    word-wrap:break-word;
    overflow-wrap:break-word;
  }
  img{max-width:100%;height:auto;display:block}
  button{font-family:inherit}

  .wrap{max-width:460px;margin:0 auto;padding:clamp(14px,4vw,22px) clamp(12px,3vw,18px) clamp(28px,8vw,40px)}

  header{text-align:center;margin-bottom:clamp(12px,3vw,18px)}
  .eyebrow{
    display:inline-block;background:var(--green-light);color:var(--green);
    font-size:clamp(.65rem,2vw,.75rem);font-weight:700;padding:clamp(3px,1vw,5px) clamp(9px,2.5vw,13px);border-radius:100px;
  }
  h1{font-size:clamp(1.3rem,5vw,1.875rem);line-height:1.15;margin:clamp(8px,2vw,12px) 0 clamp(6px,1.5vw,8px)}
  h1 span{color:var(--pink)}
  .lede{color:var(--muted);font-size:clamp(.8rem,2.5vw,.906rem)}

  .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(3px,1vw,6px);margin-top:clamp(10px,2.5vw,14px)}
  .pill{
    font-size:clamp(.65rem,2vw,.72rem);font-weight:600;color:var(--green);background:#fff;
    border:1px solid var(--line);padding:clamp(3px,1vw,5px) clamp(7px,2vw,10px);border-radius:100px;
  }

  .card{background:#fff;border:1px solid var(--line);border-radius:clamp(10px,2.5vw,14px);padding:clamp(12px,3vw,16px);margin-top:clamp(10px,2.5vw,14px)}
  .card h2{font-size:clamp(.9rem,2.8vw,1rem);margin-bottom:clamp(6px,1.5vw,8px)}

  .chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1vw,6px)}
  .chip{background:var(--green-light);border-radius:clamp(7px,1.5vw,9px);padding:clamp(6px,1.5vw,8px) clamp(7px,2vw,10px);font-size:clamp(.7rem,2.2vw,.78rem);color:var(--text)}
  .chip b{color:var(--green);display:block;font-size:clamp(.75rem,2.3vw,.81rem)}

  .bonus-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,1vw,6px);margin-top:2px}
  .bonus{font-size:clamp(.7rem,2vw,.75rem);color:var(--text);display:flex;gap:clamp(3px,1vw,6px);align-items:flex-start}
  .bonus::before{content:"✓";color:var(--pink);font-weight:800;flex:none}

  .value-box{
    background:#fff;border:2px solid var(--pink);border-radius:clamp(10px,2.5vw,14px);
    padding:clamp(12px,3vw,16px);text-align:center;margin-top:clamp(12px,3vw,16px);
  }
  .value-box .label{font-size:clamp(.6rem,1.8vw,.69rem);font-weight:700;color:var(--pink);text-transform:uppercase}
  .price{font-size:clamp(1.6rem,6vw,1.875rem);font-weight:800;margin:2px 0}
  .price small{font-size:clamp(.75rem,2.3vw,.81rem);font-weight:600;color:var(--muted)}
  .value-box p{color:var(--muted);font-size:clamp(.7rem,2.2vw,.78rem)}

  .payment-box{
    background:var(--green-light);border:2px dashed var(--green);border-radius:clamp(10px,2.5vw,14px);
    padding:clamp(10px,2.5vw,14px);text-align:center;margin-top:clamp(9px,2.2vw,12px);
  }
  .payment-title{color:var(--green);font-size:clamp(.65rem,2vw,.72rem);font-weight:700;text-transform:uppercase;margin-bottom:clamp(6px,1.5vw,8px)}
  .payment-logos{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,12px);margin-bottom:clamp(6px,1.5vw,8px)}
  .payment-method{display:flex;align-items:center}
  .payment-method img{width:clamp(48px,12vw,60px);height:auto}
  .payment-divider{color:var(--muted);font-weight:800;font-size:clamp(.8rem,2.5vw,.95rem)}
  .account-container{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.5vw,8px);margin:4px 0}
  .account-number{font-size:clamp(1.1rem,4vw,1.25rem);font-weight:800;letter-spacing:.5px;word-break:break-all}
  .copy-btn{background:var(--text);color:#fff;border:none;padding:clamp(4px,1.2vw,6px) clamp(8px,2vw,11px);border-radius:clamp(5px,1.2vw,7px);cursor:pointer;font-size:clamp(.7rem,2vw,.75rem);font-weight:600}
  .holder{color:var(--muted);font-size:clamp(.7rem,2vw,.75rem)}

  .btn-download{
    display:block;width:100%;background:var(--pink);color:#fff;border:none;
    padding:clamp(12px,3vw,16px) 0;border-radius:clamp(10px,2.5vw,13px);font-size:clamp(.9rem,3vw,1.03rem);font-weight:800;
    cursor:pointer;margin-top:clamp(12px,3vw,16px);
  }
  .btn-download:active{background:var(--pink-dark)}
  .microcopy{text-align:center;color:var(--muted);font-size:clamp(.65rem,2vw,.75rem);margin-top:clamp(6px,1.5vw,8px)}

  .preview{text-align:center}
  .preview h2{margin-bottom:clamp(8px,2vw,12px)}
  .preview-cover{margin-bottom:0;position:relative;cursor:pointer;border-radius:clamp(8px,2vw,12px);overflow:hidden}
  .preview-cover img{width:100%;border-radius:clamp(8px,2vw,12px);border:1px solid var(--line);display:block;transition:transform .2s ease}
  .preview-cover:hover img{transform:scale(1.02)}
  .preview-cover:active img{transform:scale(.99)}
  .preview-cover-hint{position:absolute;left:50%;bottom:clamp(10px,2.5vw,14px);transform:translateX(-50%);
    background:rgba(20,18,15,.7);color:#fff;font-size:clamp(.7rem,2vw,.8rem);font-weight:700;
    padding:clamp(4px,1vw,6px) clamp(10px,2.5vw,14px);border-radius:100px;letter-spacing:.3px;pointer-events:none}

  footer{text-align:center;color:var(--muted);font-size:clamp(.65rem,2vw,.75rem);margin-top:clamp(16px,4vw,22px)}

  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,18,15,.6);z-index:999;justify-content:center;align-items:center;padding:clamp(12px,3vw,18px);overflow-y:auto}
  .modal-content{background:#fff;max-width:380px;width:100%;border-radius:clamp(14px,3.5vw,18px);padding:clamp(18px,5vw,24px) clamp(14px,4vw,20px);text-align:center;max-height:90vh;overflow-y:auto;position:relative}
  .modal-close{position:absolute;top:clamp(8px,2vw,12px);right:clamp(8px,2vw,12px);background:none;border:none;font-size:clamp(1.2rem,3.5vw,1.5rem);color:var(--muted);cursor:pointer;line-height:1;padding:0}
  .modal-icon{font-size:clamp(1.8rem,6vw,2.125rem);margin-bottom:clamp(4px,1vw,6px)}
  .modal-title{font-size:clamp(1rem,3.2vw,1.06rem);font-weight:800;margin-bottom:clamp(4px,1vw,6px)}
  .modal-text{color:var(--muted);font-size:clamp(.75rem,2.3vw,.81rem);margin-bottom:clamp(12px,3vw,18px)}
  .modal-payments{background:var(--green-light);border:2px dashed var(--green);border-radius:clamp(10px,2.5vw,14px);padding:clamp(10px,2.5vw,14px);margin-bottom:clamp(12px,3vw,16px)}
  .modal-payments-title{color:var(--green);font-size:clamp(.65rem,2vw,.72rem);font-weight:700;text-transform:uppercase;margin-bottom:clamp(6px,1.5vw,8px)}
  .modal-payments .payment-logos{margin-bottom:clamp(6px,1.5vw,8px)}
  .modal-payments .account-container{width:100%}
  .modal-payments .account-number{font-size:clamp(1rem,4vw,1.15rem)}
  .btn-modal-confirm{display:block;width:100%;background:var(--green);color:#fff;text-decoration:none;padding:clamp(10px,2.5vw,13px) 0;border-radius:clamp(8px,2vw,11px);font-weight:700;font-size:clamp(.8rem,2.5vw,.88rem);margin-bottom:clamp(6px,1.5vw,8px)}
  .btn-modal-later{display:block;width:100%;background:transparent;color:var(--muted);border:2px solid var(--line);padding:clamp(9px,2.2vw,12px) 0;border-radius:clamp(8px,2vw,11px);font-weight:700;font-size:clamp(.8rem,2.5vw,.88rem);cursor:pointer;text-decoration:none}
  .phone-form{margin-bottom:clamp(6px,1.5vw,8px)}
  .phone-form-title{color:var(--text);font-size:clamp(.75rem,2.3vw,.81rem);font-weight:700;margin-bottom:clamp(6px,1.5vw,8px)}
  .phone-input-wrap{display:flex;align-items:center;border:2px solid var(--line);border-radius:clamp(8px,2vw,11px);overflow:hidden;margin-bottom:clamp(8px,2vw,10px);background:#fff}
  .phone-prefix{flex:none;background:var(--green-light);color:var(--green);font-weight:800;padding:clamp(9px,2.2vw,11px) clamp(8px,2vw,12px);font-size:clamp(.85rem,2.6vw,.95rem);border-right:2px solid var(--line)}
  .phone-input{flex:1;border:none;outline:none;padding:clamp(9px,2.2vw,11px) clamp(8px,2vw,12px);font-size:clamp(.85rem,2.6vw,.95rem);background:#fff;color:var(--text);min-width:0}
  .send-status{font-size:clamp(.7rem,2vw,.78rem);margin-top:clamp(4px,1vw,6px);text-align:center;font-weight:600}
  .send-status.ok{color:var(--green)}
  .send-status.error{color:var(--pink)}

  @media(max-width:340px){
    .chip-grid,.bonus-grid{grid-template-columns:1fr}
  }

  @media(prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
  }

  @media(max-width:280px){
    .pills{gap:4px}
    .pill{padding:3px 6px}
    .account-container{flex-direction:column;gap:4px}
  }