/* Local Raleway avoids the original host's cross-origin font dependencies. */
@font-face {
  font-family: Raleway;
  src: url('/assets/fonts/raleway-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url('/assets/fonts/raleway-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
body, button, input, textarea, select, #root * {
  font-family: Raleway, Arial, sans-serif !important;
}

/* The builder uses OpenSans on structural text blocks and Raleway on the
   visible inline text. Preserve those original line-box metrics: forcing
   Raleway on the paragraphs compressed a normal desktop line from 22px to
   19px. Restoring the block font also preserves its mobile scaling, explicit
   line-height settings, empty paragraphs and list spacing. */
@font-face {
  font-family: OpenSans;
  src: url('/assets/fonts/open-sans-spacing.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
#root .text-root:not(.heading-root),
#root .text-root:not(.heading-root) :is(div, p, ul, ol, li) {
  font-family: var(--font-family, Raleway), Arial, sans-serif !important;
}

/* Shared columns align every amount, including when a mobile label wraps. */
#root .nb-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: 1rem;
  width: 100%;
  text-align: left;
}
#root .nb-price-label { min-width: 0; }
#root .nb-price-amount {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Reserve a real 16:9 box for YouTube on both mobile and desktop. */
#root .video-module-root.nb-about-video {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding: 0 0 56.25% !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}
#root .nb-about-video > iframe {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}