/* page-contact.php — the contact details list. Tokens from site.css only. */
.contact-list{list-style:none;display:grid;gap:10px;max-width:560px;margin:30px auto 0;text-align:left}
.contact-list li{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow)}
.contact-list b{font:600 13.5px var(--text);color:var(--olive)}
.contact-list .fill{white-space:normal}

/* Hero product window: sample message thread + reply timeline (.ct-). */
.ct-mock{max-width:980px}
.ct-thread h3{overflow-wrap:anywhere}
.ct-msg{border:1px solid var(--line);border-radius:14px;padding:14px 16px;max-width:88%;margin-top:12px}
.ct-msg small{display:block;font:500 13px var(--text);color:var(--muted);margin-bottom:6px}
.ct-msg p{font-size:15px;line-height:1.55;color:var(--body)}
.ct-msg b{font:600 14px var(--text);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-in{background:#FAFBF7;border-bottom-left-radius:4px}
.ct-out{background:var(--lime-soft);border-color:#DCEFAE;margin-left:auto;border-bottom-right-radius:4px}
.ct-out small{color:var(--olive)}
.ct-tl li{align-items:center}
.ct-tl li>span:first-child{min-width:0}
.ct-tl .fill{white-space:normal}
.ct-next{font:600 12.5px var(--text);color:var(--olive);background:var(--lime-soft);border-radius:6px;padding:3px 7px;white-space:nowrap}
@media (max-width:560px){
  .ct-msg{max-width:100%;padding:12px}
  .ct-msg p{font-size:14px}
  .ct-tl{padding:14px}
}

.contact-list a{display:inline-flex;align-items:center;min-height:44px}