:root { 
    --teal: #0b8481; 
    --text-soft: #888888; 
}
body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #ffffff; }
.wrapper { display: block; width: 100%; padding: 40px 20px; }

.signature-container { width: 120%; max-width: 650px; margin: 0 auto 35px auto; text-align: left; }
.sig-logo-zone { padding: 5px 30px 5px 5; text-align: left;  }
.sig-logo-zone img { max-width: 120%; height: auto; display: block; }
.sig-info-zone { font-size: 13px; color: #444444; line-height: 1.6; text-align: left; }
.sig-name-row { margin-bottom: 8px; }
.person-name { font-size: 16px; font-weight: bold; color: var(--teal); }
.person-title { font-size: 13px; color: var(--text-soft); margin-left: 8px; }
.info-line { font-size: 13px; color: #333333; margin-bottom: 3px; }
.info-label { color: var(--teal); font-weight: bold; display: inline-block; width: 65px; }
.sig-bottom-row { margin-top: 12px; display: block; }
.brand-subtext { font-size: 11.5px; color: var(--text-soft); display: inline-block; margin-right: 12px; vertical-align: middle; }
.social-row { display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; }
.social-icon { display: inline-block; line-height: 0; text-decoration: none; }

.signature-teal { width: 100%; max-width: 650px; margin: 0 auto; background-color: var(--teal); border-radius: 25px; border-collapse: separate; }
.teal-logo-zone { padding: 18px 0 18px 25px; text-align: left; }
.teal-info-zone { padding: 18px 15px; font-size: 12px; color: #ffffff; line-height: 1.6; text-align: left; }
.teal-name { font-size: 15px; font-weight: bold; color: #ffffff; }
.teal-title { font-size: 12px; color: rgba(255, 255, 255, 0.85); font-weight: normal; }
.teal-line { font-size: 12px; color: rgba(255, 255, 255, 0.95); margin-bottom: 2px; }
.teal-line b { color: #ffffff; font-weight: bold; }
.teal-social-zone { padding: 18px 25px 18px 0; text-align: right; }
.social-row-teal { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; }
.social-icon-teal { display: inline-block; line-height: 0; text-decoration: none; }

@media screen and (max-width: 640px){
    .sig-logo-zone, .sig-info-zone { width: 100% !important; display: block; text-align: center; }
    .sig-logo-zone { padding-right: 0; padding-bottom: 15px; }
    .sig-logo-zone img { margin: 0 auto; }
    .brand-subtext { display: block; margin-right: 0; margin-bottom: 8px; }
    .social-row { justify-content: center; width: 100%; }
    
    .signature-teal td { display: block; width: 100% !important; text-align: center !important; }
    .teal-logo-zone { padding: 20px 0 10px 0; }
    .teal-logo-zone img { margin: 0 auto; }
    .teal-info-zone { padding: 10px 15px; }
    .teal-social-zone { padding: 10px 0 20px 0; }
    .social-row-teal { justify-content: center; width: 100%; }
}