/* One static phone, with the merchant among the customer's familiar contacts. */
.brand-contact { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; align-items: center; gap: 40px; padding-block: 80px 100px; scroll-margin-top: 0; }
.brand-contact-copy { max-width: 720px; margin-inline: auto; text-align: center; }
.brand-contact-copy h2 { font: 550 clamp(38px, 3.6vw, 50px)/1.1 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.brand-contact-copy h2 span { display: block; text-wrap: balance; }
.brand-contact-visual { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; padding: 16px; }
.brand-contact-phone { position: relative; width: 344px; max-width: 100%; padding: 6px; border: 1px solid #dedce1; border-radius: 49px; background: #f0eff1; box-shadow: 2px 4px 5px #28233208, 12px 26px 42px -20px #33244729, inset 0 0 0 2px #fafafa; transform: rotate(-4deg); }
.brand-contact-screen { position: relative; min-height: 566px; overflow: hidden; padding: 0 20px 80px; border: 1px solid #e5e3e6; border-radius: 42px; background: #fff; color: #18181b; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; letter-spacing: -.025em; }
.brand-phone-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 47px; padding-inline: 12px 5px; font-size: 12px; font-weight: 600; }
.brand-phone-status > svg { width: 48px; height: 12px; }
.brand-phone-island { position: absolute; top: 10px; left: 50%; width: 87px; height: 25px; border-radius: 20px; background: #18181b; transform: translateX(-50%); }
.brand-phone-tools { display: flex; align-items: center; justify-content: space-between; height: 33px; color: #007aff; font-size: 15px; }
.brand-phone-tools > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-phone-title { margin-top: 6px; font-size: 31px; line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
.brand-phone-toolbar { position: absolute; bottom: 27px; left: 20px; right: 20px; display: flex; align-items: center; gap: 8px; }
.brand-phone-search { display: flex; flex: 1; min-width: 0; align-items: center; gap: 7px; height: 38px; padding-inline: 12px; border: 1px solid #e8e8ed; border-radius: 999px; background: #f3f3f5; color: #8d8d93; font-size: 14px; }
.brand-phone-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #77777f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-phone-search .brand-phone-mic { margin-left: auto; }
.brand-phone-compose { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid #e8e8ed; border-radius: 50%; background: #f3f3f5; color: #55555d; }
.brand-phone-compose svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-message-list { margin-top: 15px; }
.brand-message-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; }
.brand-message-content { min-width: 0; min-height: 79px; padding-block: 15px; border-bottom: 1px solid #eeeef0; }
.brand-message-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
.brand-message-heading strong { font-size: 16px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.brand-message-heading > span { display: flex; align-items: center; gap: 5px; color: #98989e; font-size: 11px; white-space: nowrap; }
.brand-message-heading svg { width: 5px; height: 9px; fill: none; stroke: #b8b8bd; stroke-width: 2; }
.brand-message-content p { color: #85858b; font-size: 13px; line-height: 1.35; letter-spacing: -.01em; }
.brand-message-logo { display: grid; place-content: center; width: 48px; height: 48px; border-radius: 50%; background: #72619b; color: #fff; text-align: center; font: italic 19px/.9 var(--serif); letter-spacing: -.02em; }
body[data-world='food-suppliers'] .brand-message-logo, body[data-world='sports-clubs'] .brand-message-logo { background: var(--world-accent); }
.brand-message-logo.is-branded { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--world-soft); }
.brand-message-logo.is-branded img { width: 100%; height: 100%; object-fit: contain; }
.brand-message-unread { position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #007aff; transform: translateY(-50%); }
.brand-message-merchant .brand-message-heading strong { color: #17151b; }
.brand-message-merchant .brand-message-content p { color: #5e5a65; }
.brand-message-portrait { width: 46px; height: 46px; border-radius: 50%; background: url('/teammates/assets/campaign-customers-v1.png') var(--portrait-x) var(--portrait-y) / 400% 400%; filter: saturate(.55); }
.brand-message-personal { opacity: .64; }
.brand-message-personal:last-child .brand-message-content { border-bottom: 0; }
.brand-phone-home { position: absolute; bottom: 10px; left: 50%; width: 100px; height: 4px; border-radius: 3px; background: #252528; transform: translateX(-50%); }
@media (max-width:850px) {
 .brand-contact { gap: 32px; padding-block: 65px 75px; }
 .brand-contact-copy h2 { font-size: 40px; }
 .brand-contact-phone { width: 320px; }
 .brand-contact-screen { min-height: 530px; padding-bottom: 80px; }
}
@media (max-width:450px) {
 .brand-contact { gap: 28px; padding-block: 42px 62px; }
 .brand-contact-copy h2 { font-size: 34px; }
 .brand-contact-visual { padding: 10px 0; }
 .brand-contact-phone { width: 292px; border-radius: 43px; transform: rotate(-3deg); }
 .brand-contact-screen { min-height: 490px; padding: 0 17px 80px; border-radius: 36px; }
 .brand-phone-status { padding-inline: 8px 0; }
 .brand-phone-island { width: 76px; height: 23px; }
 .brand-phone-title { font-size: 29px; }
 .brand-phone-toolbar { left: 17px; right: 17px; }
 .brand-message-row { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; }
 .brand-message-logo, .brand-message-portrait { width: 42px; height: 42px; }
 .brand-message-logo { font-size: 17px; }
 .brand-message-content { min-height: 71px; padding-block: 12px; }
 .brand-message-heading strong { font-size: 15px; }
 .brand-message-content p { font-size: 12px; }
 .brand-message-heading > span { font-size: 10px; }
 .brand-message-unread { left: -10px; width: 5px; height: 5px; }
}