/* A concrete four-step explanation of the brand system. */
body .qm-brand-system {
  padding: clamp(56px, 6vw, 96px) 0;
  border-top: 1px solid #e4e7eb;
  background: #fff;
  color: #1d232a;
}
.qm-brand-system, .qm-brand-system * { box-sizing: border-box; }
.qm-brand-system .qm-system-wrap { width: min(calc(100% - 96px), 1440px); margin: 0 auto; }
.qm-brand-system .qm-system-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: end; margin-bottom: 36px; }
.qm-brand-system .qm-system-eyebrow { margin: 0 0 16px; color: #636c75; font-size: 11px; letter-spacing: .1em; line-height: 1.6; }
.qm-brand-system h2 { margin: 0; color: inherit; font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; line-height: 1.35; letter-spacing: -.025em; }
.qm-brand-system .qm-system-heading > p { margin: 0 0 4px; max-width: 450px; color: #626970; font-size: 16px; line-height: 1.85; }
.qm-brand-system .qm-system-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.qm-brand-system .qm-system-steps > li { min-width: 0; padding: 24px 0 0; border-top: 2px solid #293e54; margin: 0; }
.qm-brand-system .qm-system-step-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #667584; font-size: 12px; line-height: 1.5; }
.qm-brand-system .qm-system-step-head svg { width: 20px; height: 20px; flex-shrink: 0; color: #8a98a6; }
.qm-brand-system h3 { margin: 20px 0 14px; color: #1d232a; font-size: 25px; font-weight: 500; line-height: 1.4; }
.qm-brand-system .qm-system-steps p { margin: 0; color: #606972; font-size: 14px; line-height: 1.85; }
.qm-brand-system .qm-system-delivery { display: block; margin-top: 22px; color: #263e57; font-size: 12px; line-height: 1.8; }
.qm-brand-system .qm-system-support { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 40px; padding: 24px 28px; background: #f2f5f8; }
.qm-brand-system .qm-system-support p { margin: 0; max-width: 800px; color: #5b6671; font-size: 14px; line-height: 1.85; }
.qm-brand-system .qm-system-support strong { color: #233c55; font-weight: 500; }
.qm-brand-system .qm-system-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; flex-shrink: 0; border-bottom: 1px solid #8a9caf; color: #233c55; font-size: 14px; line-height: 1.6; text-decoration: none; }
.qm-brand-system .qm-system-link:hover { color: #1b6db3; border-bottom-color: #1b6db3; }
.qm-brand-system .qm-system-link:focus-visible { outline: 2px solid #287ad2; outline-offset: 5px; }
@media (max-width: 1024px) {
  .qm-brand-system .qm-system-heading { grid-template-columns: 1fr; gap: 20px; }
  .qm-brand-system .qm-system-heading > p { max-width: 720px; }
  .qm-brand-system .qm-system-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .qm-brand-system .qm-system-support { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (max-width: 600px) {
  .qm-brand-system .qm-system-wrap { width: calc(100% - 40px); }
  .qm-brand-system .qm-system-heading > p { font-size: 14px; }
  .qm-brand-system .qm-system-steps { gap: 28px 20px; }
  .qm-brand-system h3 { font-size: 22px; }
  .qm-brand-system .qm-system-steps p { font-size: 13px; }
  .qm-brand-system .qm-system-delivery { margin-top: 16px; font-size: 11px; }
  .qm-brand-system .qm-system-support { margin-top: 32px; padding: 24px; }
}
@media (max-width: 420px) {
  .qm-brand-system .qm-system-steps { grid-template-columns: 1fr; }
  .qm-brand-system .qm-system-steps > li { padding-top: 20px; }
  .qm-brand-system h3 { margin-top: 14px; }
}