/* The acknowledgement email, reproduced on /how-it-works.

   The page claims the email quotes the same live figure as the homepage card,
   so the two numbers in here are fed from the same endpoint rather than typed
   in -- see the [data-stat] hooks in the markup. Everything else follows the
   real template in srOS (service_desk_settings.py): the same order, the same
   blocks, the same words. */

.x-mailproof {
  margin: 2rem 0 0;
}

.x-mailproof__frame {
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 22, 34, 0.1);
}

.x-mailproof__hdr {
  background: #f2f5fb;
  border-bottom: 1px solid #dfe3e8;
  padding: 12px 18px;
}

.x-mailproof__from,
.x-mailproof__subj {
  display: block;
  color: #0c2d6b;
  font-size: 13px;
  line-height: 1.5;
}

.x-mailproof__from {
  font-weight: 700;
}

.x-mailproof__subj {
  color: #55606d;
}

.x-mailproof__body {
  padding: 18px;
  color: #333;
  font-size: 14px;
  line-height: 1.65;
}

.x-mailproof__body p {
  margin: 0 0 12px;
  color: #333;
  font-size: 14px;
}

/* The "Response Time" cell: the one block the whole page is about. */
.x-mailproof__stat {
  background: #f2f5fb;
  border-left: 6px solid #0c2d6b;
  padding: 16px 18px;
  margin: 16px 0 6px;
}

.x-mailproof__statlabel {
  font-weight: 700;
  color: #0c2d6b;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.x-mailproof__stattext {
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}

.x-mailproof__meas {
  color: #6b7280;
  font-size: 12px;
}

.x-mailproof__quote {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 3px solid #2563eb;
  background: #f6f8fa;
  color: #333;
  font-size: 14px;
}

.x-mailproof__urgent {
  background: #fff4f4;
  border-left: 6px solid #c62828;
  padding: 16px 18px;
  margin: 16px 0 6px;
}

.x-mailproof__urgentttl {
  font-weight: 700;
  color: #c62828;
  font-size: 15px;
  margin-bottom: 8px;
}

.x-mailproof__urgent p {
  font-size: 13px;
  margin-bottom: 8px;
}

.x-mailproof__phone {
  font-size: 16px;
  font-weight: 700;
  color: #0c2d6b;
}

.x-mailproof__foot {
  color: #888;
  font-size: 11px;
  margin: 14px 0 0;
}

/* The caption is ours, not the email's -- it says plainly which parts of the
   sample are illustrative, so nobody reads the ticket number as a real one. */
.x-mailproof__cap {
  color: #6b7280;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 10px 2px 0;
}

@media (max-width: 640px) {
  .x-mailproof__body,
  .x-mailproof__stat,
  .x-mailproof__urgent {
    padding: 14px;
  }
}