.mftb-email.mfb-invalid,#mtbx-in.mfb-invalid,#mfnx-in.mfb-invalid{
    border-color:#d64545 !important;background:#fff1ef !important;box-shadow:0 0 0 3px rgba(214,69,69,.20) !important;}
  .mftb-email.mfb-valid,#mtbx-in.mfb-valid,#mfnx-in.mfb-valid{
    border-color:#2e9e57 !important;background:#f2fbf5 !important;box-shadow:0 0 0 3px rgba(46,158,87,.18) !important;}
  /* mf-fix-20260726: the field must AGREE with the message.
     Two independent layers were judging the same input and did not talk to each other:
     #mf-buzz-valid (topbar module) prints "checkmark Looks good" and sets data-mf-ok="1",
     while 482 owns the border and background colours. Result on screen was a red box with
     a green tick and the words "Looks good" underneath.
     Bind the green state to the SAME signal that prints the message, and let it win over
     any red left behind by the other layer. */
  input[type=email][data-mf-ok="1"],
  input[type=email][data-mf-ok="1"].mfb-invalid,
  .mftb-email[data-mf-ok="1"], #mtbx-in[data-mf-ok="1"], #mfnx-in[data-mf-ok="1"],
  #mfg-em[data-mf-ok="1"], #mfg2-em[data-mf-ok="1"], #mfg3-em[data-mf-ok="1"],
  #mfm-em[data-mf-ok="1"],
  .mf-footopt-email[data-mf-ok="1"], .mfsh-email[data-mf-ok="1"]{
    border-color:#2e9e57 !important;
    background:#f2fbf5 !important;
    box-shadow:0 0 0 3px rgba(46,158,87,.18) !important;
  }
  /* and never show the red mark while the message says it is fine */
  input[type=email][data-mf-ok="1"] ~ .mfb-mark.err{opacity:0 !important}
  .mfb-mark{font-weight:700;font-size:13px;pointer-events:none;transition:opacity .15s;opacity:0}
  .mfb-mark.on{opacity:1}.mfb-mark.err{color:#d64545}.mfb-mark.ok{color:#2e9e57}
  /* keep top-bar email + CTA + Google on one line */
  .mftb-fields{flex-wrap:nowrap !important;align-items:center !important}
  .mftb-fields .mfb-mark{margin-left:-30px;margin-right:12px;align-self:center}
  .mfb-or{color:#8f98a8;font-size:12px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
  .mfb-gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#1f2430;
    border:1px solid #dcdfe6;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;
    cursor:pointer;line-height:1;font-family:inherit;white-space:nowrap;transition:box-shadow .15s,transform .05s,background .15s}
  .mfb-gbtn:hover{box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .mfb-gbtn:active{transform:translateY(1px)}
  .mfb-gbtn svg{width:16px;height:16px;flex:0 0 auto}
  /* top-bar Google = SECONDARY to the orange CTA: lighter + smaller so the primary clearly wins */
  .mftb-fields .mfb-gbtn{padding:7px 12px;font-size:12.5px;font-weight:500;color:#3c4043;border-color:#d6dae0}
  /* popup version: full-width pill under the email field (stays prominent there) */
  .mfb-gbtn.mfb-pop{width:100%;padding:11px 14px;font-size:14px;font-weight:600;margin-top:8px}
  .mfb-hide-native{display:none !important}
  /* MOBILE: stack the Google option as a full-width LABELED row under the field (no bare "G") */
  @media(max-width:640px){
    /* bigger, more legible offer text on mobile */
    .mftb-inline .mftb-offer{font-size:16.5px !important;line-height:1.34}
    .mftb-inline .mftb-offer em{font-size:14px !important}
    .mftb-fields{flex-wrap:wrap !important;justify-content:center;row-gap:8px}
    .mftb-fields .mftb-email{flex:1 1 150px;width:auto !important;min-width:0}
    .mftb-fields .mftb-btn{flex:0 0 auto}
    .mftb-fields .mfb-mark{margin-left:-28px;margin-right:10px}
    .mftb-fields .mfb-or{display:none}
    .mftb-fields .mfb-gbtn{flex:1 1 100%;width:100%;padding:11px 14px;font-size:13.5px;font-weight:600}
    .mftb-fields .mfb-gbtn .mfb-glabel{display:inline !important}
  }