@font-face {
  font-family: 'Clientora Inter';
  src: url('./brand/InterVariable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: 'Clientora Inter', Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.brand.brandLockup { display: flex; flex-shrink: 0; gap: 0; line-height: 1; }
.brand.brandLockup img { display: block; width: 174px; height: auto; max-width: 100%; }
.brand.brand--pro img { width: 216px; }
.boot .brandLockup { margin: 24px; }
.mobileBrand { display: none; }
.landingFooter .brandLockup img { width: 160px; }
.phoneScreen { padding-left: 13px; padding-right: 13px; }
.phoneScreen .brandLockup { margin-bottom: 20px; }

body[data-brand='pro'] .primary { background: #152b50; border-color: #152b50; color: #fff; }
body[data-brand='pro'] .primary:hover { background: #0e203d; }
body[data-brand='pro'] .nav button.active,
body[data-brand='pro'] .bottomNav button.active { background: #fff6e8; color: #152b50; }
body[data-brand='pro'] .avatar { background: #fff6e8; color: #152b50; }
body[data-brand='pro'] .orderCard { border-left-color: #f59e0b; }
body[data-brand='pro'] input[type='checkbox'] { accent-color: #152b50; }

@media (min-width: 768px) {
  body[data-brand='pro'] .shell { grid-template-columns: 264px minmax(0, 1fr); }
  body[data-brand='pro'] .sidebar { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .sidebar .brand--core img { width: 160px; }
}

@media (max-width: 767px) {
  .topbar { flex-wrap: wrap; }
  .mobileBrand { display: flex; width: 100%; padding: 4px 0 10px; }
  .topbar > .caption { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .landingNav .brandLockup img { width: 160px; }
}