/* The confirmation that replaces a form once it has actually been sent.
   Two skins, because the forms sit on both the dark and the light surfaces. */
.fsent{
  display:grid; justify-items:center; text-align:center; gap:10px;
  padding:clamp(22px,3vh,34px) clamp(20px,2vw,32px);
  border-radius:16px; background:rgba(110,60,240,.10); border:1px solid rgba(160,130,255,.35);
  animation:fsentIn .3s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes fsentIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.fsent__ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  background:linear-gradient(112deg,#5130EC,#8747ED); color:#fff; }
.fsent__ic svg{ width:22px; height:22px; }
.fsent__t{ margin:0; font-size:18px; font-weight:600; color:#F2EFF6; }
.fsent__s{ margin:0; font-size:15px; color:rgba(242,239,246,.72); }
.fsent--bad{ background:rgba(255,120,120,.10); border-color:rgba(255,140,140,.4); }
.fsent--bad .fsent__ic{ background:#B3365A; }

/* on the light paper (contact card, careers sheet, briefing band) */
.fpaper .fsent, .bf .fsent{ background:#EEE7FF; border-color:#C9BDF3; }
.fpaper .fsent__t, .bf .fsent__t{ color:#150C2E; }
.fpaper .fsent__s, .bf .fsent__s{ color:#4A4066; }