/* /contact page: 4 contact cards (4-up, 2 x 2 on tablet, stacked on phones; .ccards in site.css)
   and the message form beside its intro. Uses site.css tokens only. */
.cc4 .ccard p a{color:var(--indigo);font-weight:600;white-space:nowrap}
/* "Questions about a shipment?" checklist: bold label on its own line above the description, never one word per line */
.msg .checks li{font-weight:600}
.msg .checks li span{margin-top:2px}

.msg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:stretch}
.msg>*{min-width:0}
.msg .stack a:not(.btn){color:var(--indigo);font-weight:500}
.msg .formcard{border-radius:var(--r-card);box-shadow:none;padding:40px}
.msg .fc-h{font-size:24px;font-weight:600;color:var(--indigo);letter-spacing:-.02em;line-height:1.2}
.msg .fc-p{font-size:14px;color:var(--muted);margin:6px 0 18px}
.msg .fine{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}
.msg .f-ok .tick{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--indigo);display:grid;place-items:center;margin:0 auto 12px}
.msg .f-ok h3{font-size:20px;font-weight:600;color:var(--indigo)}
.msg .f-ok p{font-size:14px;color:var(--muted);margin-top:6px}

@media (max-width:1100px){
  .msg{grid-template-columns:1fr}
}
@media (max-width:760px){
  .msg .formcard{padding:22px}
}