.te-launch-title { color: #142f49; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.te-launch-coverage { color: #405974; line-height: 1.7; }
.te-message-highlight { display: inline-block; padding: .08em .45em; border-radius: .65em .65em .65em .15em; color: #fff; font-weight: 650; white-space: nowrap; }
.te-sms-highlight { background: #18763b; }
.te-mms-highlight { background: #e4f3e8; color: #155d30; box-shadow: inset 0 0 0 1.5px #18763b; }
.te-message-type-icon { width: .85em; height: .85em; margin-right: .22em; vertical-align: -.06em; }
.te-imessage-highlight { background: #1263ce; }
.te-guideline-label { display: inline-block; padding: .08em .45em; margin-right: .2em; border-radius: .35em; font-weight: 700; white-space: nowrap; }
.te-guideline-ok { color: #155d30; background: #e4f3e8; }
.te-guideline-not-ok { color: #9b1c24; background: #fde8e8; }

/* Extend ribbon ends beyond the card edges; offsets preserve the text position. */
#try > .te-demo-ribbon {
    position: absolute;
    top: 34px;
    right: -96px;
    z-index: 3;
    width: 320px;
    padding: .55rem 0;
    transform: rotate(40deg);
    background: #dcecff;
    border: 1px solid #b6d2ef;
    color: #174d83;
    text-align: center;
    font-size: .95rem;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
}
.te-demo-ribbon span { display: block; font-size: .7rem; font-weight: 600; }
#try > .te-demo-ribbon-left { left: -96px; right: auto; transform: rotate(-40deg); }
#try > .te-demo-ribbon:hover { background: #cce2fb; color: #123d68; }
.te-demo-heading > h2 { padding-inline: 6rem; }
.te-demo-imessage-note { max-width: 720px; padding: .85rem 1rem; border: 1px solid #dce5ee; border-radius: .75rem; background: #f6f9fc; color: #405974; font-size: .95rem; line-height: 1.6; }
.te-demo-imessage-note strong, .te-demo-imessage-note code { color: #144fae; }
.te-demo-imessage-note code { font-size: inherit; overflow-wrap: anywhere; }

.te-demo-ribbon:focus-visible { outline: 3px solid #145a91; outline-offset: 4px; }

@media (max-width: 991.98px) {
    /* Keep the demo heading clear on smaller screens. */
    #try > .te-demo-ribbon { display: none; }
    .te-demo-heading > h2 { padding-inline: 0; }
    #try .te-address-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: clamp(.95rem, 4.4vw, 1.4rem); }
}