/*
 * [mbr_mail_card] (Front\MailCard): the dashboard's newsletter card (member.css .ilb-mail) on
 * other pages. Only what differs: no page frame around it, the narrow-column layout (the card
 * reads its own width, as member.css's phone rules do by the viewport), and the visitor's form.
 */
.mbr-mailcard { container-type: inline-size; }
.mbr-mailcard .ilb-dash { max-width: none; margin: 0; }
.mbr-mailcard .ilb-mail { margin: 0; }
.mbr-mailcard--guest .ilb-mail-pill { display: none; }
@container (max-width: 560px) {
    .mbr-mailcard .ilb-mail { padding: 20px 16px; }
    .mbr-mailcard .ilb-mail-head { gap: 12px; }
    .mbr-mailcard .ilb-mail-badge { width: 50px; height: 50px; }
    .mbr-mailcard .ilb-dash .ilb-mail h2 { font-size: 25px; }
    .mbr-mailcard .ilb-mail-perks { grid-template-columns: 1fr; }
    .mbr-mailcard .ilb-mail-sub, .mbr-mailcard .ilb-mail-go { font-size: 19px; }
}

/* The visitor's form (templates/front/mail-card-form.php) */
.ilb-mail-form { display: grid; gap: 12px; margin: 0; }
.ilb-mail-form[hidden] { display: none; }
.ilb-mail-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ilb-am .ilb-mail-field { display: grid; gap: 5px; margin: 0; }
.ilb-am .ilb-mail-field label { color: var(--ilb-ink); font: 700 15px/1.2 "Open Sans Condensed", sans-serif; letter-spacing: .3px; }
.ilb-am .ilb-mail-field input { display: block; width: 100%; max-width: none; height: auto; margin: 0; padding: 11px 13px; border: 1px solid var(--ilb-line); border-radius: 10px; background: var(--ilb-field); color: #fff; font: 300 17px/1.35 "Open Sans Condensed", sans-serif; box-shadow: none; -webkit-appearance: none; appearance: none; }
.ilb-am .ilb-mail-field input:focus { outline: none; background: var(--ilb-field); color: #fff; border-color: var(--ilb-pink2); box-shadow: 0 0 0 3px rgba(255, 45, 138, .25); }
.ilb-mail-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ilb-am .ilb-mail-go { width: 100%; padding: 15px 24px; font-size: 21px; }
.mbr-mailcard .ilb-mail-msg { margin-top: 10px; }