/* One transparent knight/64/board master. Alpha masking replaces the padded
   opaque raster and the different 124% / 205% cropping on individual pages. */
body .mark {
  flex: none;
  display: block;
  background-color: currentColor !important;
  -webkit-mask: url('/assets/brand/mark.svg') center / contain no-repeat !important;
  mask: url('/assets/brand/mark.svg') center / contain no-repeat !important;
  mask-mode: alpha !important;
}
body :is(#nav, .pg-nav, .dash-brand, .library-top, .auth-main, .signup-form-panel, .con-top) :is(.brand, .auth-brand) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 22px/1 'PP Neue Montreal', Arial, sans-serif;
  letter-spacing: -.025em;
  white-space: nowrap;
}
body :is(#nav, .pg-nav, .dash-brand, .library-top, .auth-main, .signup-form-panel, .con-top) :is(.brand, .auth-brand) .mark {
  width: 36px;
  height: 36px;
}
body :is(#nav, .pg-nav, .dash-brand, .library-top, .auth-main, .signup-form-panel, .con-top) :is(.brand, .auth-brand) .word {
  font: inherit;
  letter-spacing: inherit;
}
body.teach #t-top .t-back {
  font: 700 20px/1 'PP Neue Montreal', Arial, sans-serif;
  letter-spacing: -.025em;
  gap: 9px;
}
body.teach #t-top .t-back .mark { width: 36px; height: 36px; }

/* Native font proportions, with the same kerning and tracking as the master. */
body :is(.brand, .auth-brand, .t-back) .word {
  --brand-cap: 20px;
  display: block;
  flex: none;
  width: calc(var(--brand-cap) * 5.227273);
  height: var(--brand-cap);
  font-size: 0 !important;
  background-color: currentColor;
  -webkit-mask: url('/assets/brand/wordmark.svg') center / contain no-repeat;
  mask: url('/assets/brand/wordmark.svg') center / contain no-repeat;
  mask-mode: alpha;
}
body :is(.footer-brand, .pg-foot-brand) .word { --brand-cap: 26px; }
body :is(.footer-brand, .pg-foot-brand) .mark { width: 48px; height: 48px; }
@media (max-width: 380px) {
  body :is(.footer-brand, .pg-foot-brand) .word { --brand-cap: 24px; }
}

/* The loading artwork includes the same outlined bold wordmark. It has no
   background, autoplay API or video request; the SVG honours reduced motion. */
body .brand-loader {
  display: block;
  width: min(52vw, 240px);
  height: auto;
  aspect-ratio: 344 / 228;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  mix-blend-mode: normal;
}
body .checkout-loading-film { width: 180px; }
body.teach[data-teach-design='sample'][data-teach-theme='light'] .t-load-film {
  filter: brightness(0);
}
body .brand-loader[hidden],
body .t-load-state:not([data-state='loading']) .brand-loader { display: none !important; }