:root {
  --paragraph-size: 18px;
}

p {
  font-size: var(--paragraph-size) !important;
}

h1 {
  font-weight: 600 !important;
}

.brand img,
.og-brand img,
.brand-logo {
  transform: translateY(3px) !important;
}

.og-nav a,
.og-drop button,
.nav a,
.drop button,
.trainer-nav a,
.site-header nav a {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
}

.og-eyebrow,
.eyebrow,
.key-label {
  margin: 0 !important;
  color: var(--purple, #9c7cff) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.text-link,
.theory-page a:not(.button),
.content a:not(.button),
.note a {
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
}

.text-link:hover,
.theory-page a:not(.button):hover,
.content a:not(.button):hover,
.note a:hover {
  color: #fff !important;
  text-decoration-thickness: 2px !important;
}

.site-header,
.og-header,
.header {
  min-height: 80px !important;
}

.site-header nav a[aria-current="page"],
.trainer-nav a[aria-current="page"] {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.site-menu-toggle {
  display: none;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-menu-toggle span {
  display: block;
  width: 23px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #f4f5f6;
}

@media (max-width: 640px) {
  .og-hub,
  .site-header,
  .og-header,
  .header,
  .subdomain-title,
  .hero,
  .theory-page,
  .trainer-shell,
  .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-header,
  .og-header,
  .header {
    position: relative;
    min-height: 64px !important;
    height: 64px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    align-items: center !important;
  }

  .site-menu-toggle { display: block; }

  .site-header nav,
  .og-header > .og-nav,
  .header > .nav {
    display: none;
    position: absolute;
    z-index: 30;
    top: 56px;
    right: 12px;
    width: 190px;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid #303642;
    border-radius: 12px;
    background: #1b1f27;
    box-shadow: 0 16px 35px #0007;
  }

  .site-header nav.is-open,
  .og-header > .og-nav.is-open,
  .header > .nav.is-open { display: flex; }

  .site-header nav a,
  .og-nav > a,
  .og-drop > button,
  .nav > a,
  .drop > button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    text-align: left;
    border-radius: 8px;
  }

  .og-drop-menu,
  .drop-menu {
    position: static !important;
    width: 100%;
    box-shadow: none !important;
  }
}