/* Reuse the homepage handset and SMS components at the audience-page size. */
.audience-phone-example { width: 100%; max-width: 356px; min-width: 0; margin: 0; justify-self: center; }
.audience-phone { width: 100%; border-radius: 44px; padding: 7px; }
.audience-phone .phone-screen { display: flex; flex-direction: column; min-height: 620px; border-radius: 35px; padding: 12px 12px 13px; }
.audience-phone .phone-status { flex: 0 0 27px; height: 27px; padding-inline: 6px; font-size: 11px; }
.audience-phone .phone-island { width: 85px; height: 23px; }
.audience-phone .phone-island::after { width: 8px; height: 8px; top: 7px; right: 8px; }
.audience-phone .sms-contact { flex: 0 0 auto; gap: 8px; padding: 14px 0 20px; }
.audience-phone .sms-back { top: 22px; width: 22px; height: 22px; }
.audience-phone .contact-avatar { width: 46px; height: 46px; }
.audience-phone .drivepay-symbol { width: 25px; height: 20px; background-size: 721px 478px; background-position: -32px -19px; }
.audience-phone .rental-sender-icon { width: 26px; height: 26px; filter: invert(38%) sepia(75%) saturate(1110%) hue-rotate(109deg); }
.audience-phone .contact-name { gap: 3px; font-size: 15px; }
.audience-phone .sms-message { flex: 0 0 auto; padding: 14px; font-size: 15px; line-height: 1.4; }
.audience-phone .sms-message p { margin: 0; color: inherit; font: inherit; }
.audience-phone .sms-message p + p { margin-top: 16px; }
.audience-phone .sms-reply { align-self: flex-end; width: fit-content; margin: 12px 0; padding: 9px 18px; border-radius: 16px; background: #008b3b; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.4; }
.audience-phone .sms-delivery-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; color: #08743b; font-size: 13px; line-height: 1.5; }
.audience-phone .sms-delivery-note img { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px; }
.audience-phone .sms-composer { flex: 0 0 auto; margin-top: auto; padding-top: 22px; font-size: 11px; }
.audience-phone .home-indicator { flex: 0 0 4px; margin-bottom: 0; }
.audience-phone-example figcaption { margin-top: 22px; color: #62686f; font-size: 13px; line-height: 1.5; text-align: center; }

@media (max-width: 800px) {
  .audience-phone-section { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 360px) {
  .audience-phone .phone-screen { padding-inline: 10px; }
  .audience-phone .phone-status { padding-inline: 3px; }
  .audience-phone .phone-island { width: 78px; }
  .audience-phone .sms-message { padding: 12px; }
  .audience-phone .contact-name { font-size: 14px; }
}