/* Generated by tools/generate_global_css.py - do not edit directly */
:root {
  --ds-conventions-actionlocatorprefix: action-;
  --ds-conventions-elementmetadata: ['id', 'class', 'name', 'data-locator'];
  --ds-conventions-noinlinestyles: True;
  --ds-conventions-structlocatorprefix: locator-;
  --ds-conventions-themeclassonbody: True;
  --ds-conventions-themeclasses: ['theme--dark', 'theme--light'];
  --ds-layout-columns: 2;
  --ds-layout-gutters: lg;
  --ds-layout-maxwidth: 1100;
  --ds-tokens-colors-accent: #4fb0ff;
  --ds-tokens-colors-accent2: #7b61ff;
  --ds-tokens-colors-bg: #0f1113;
  --ds-tokens-colors-bgalt: #0b0c0d;
  --ds-tokens-colors-border: #1f2225;
  --ds-tokens-colors-card: #141618;
  --ds-tokens-colors-muted: #9aa0a6;
  --ds-tokens-colors-text: #e6e7e8;
  --ds-tokens-spacing-lg: 24;
  --ds-tokens-spacing-md: 16;
  --ds-tokens-spacing-sm: 8;
  --ds-tokens-spacing-xl: 40;
  --ds-tokens-spacing-xs: 4;
  --ds-tokens-typography-base: 16;
  --ds-tokens-typography-fontstack: ['Lexend', 'Segoe UI', 'Helvetica Neue', 'Arial', 'sans-serif'];
  --ds-tokens-typography-scale: [0.875, 1, 1.125, 1.25];
}

/* ========================================================================
   Canonical interactive control styles (single source of truth)
   Apply only to legacy controls outside the shared brand shell.
   Brand-shell components are owned by components.css and load later.
   ======================================================================== */
:root {
  /* ensure tokens exist (fallbacks are defined earlier) */
  --ds-button-height: 40px;
  --ds-button-min-width: 120px;
  --ds-button-font-size: 14px;
  --ds-button-padding-x: 12px;
  --ds-button-radius: 8px;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive,
  .btn-primary,
  .btn-outline,
  .btn-secondary,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn,
  .language-selector .cmp-a,
  .language-selector .cmp-button,
  .bottom-menu .cmp-a,
  .bottom-menu .cmp-button,
  .hero-cta .cmp-a,
  .hero-cta .cmp-button,
  .hero-cta .btn-primary,
  .hero-cta .btn-outline,
  .hero-cta .btn-secondary
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--ds-button-height) !important;
  min-width: var(--ds-button-min-width) !important;
  padding: 0 var(--ds-button-padding-x) !important;
  font-size: var(--ds-button-font-size) !important;
  line-height: 1 !important;
  border-radius: var(--ds-button-radius) !important;
  box-sizing: border-box !important;
  background-color: var(--ds-action-green) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-secondary:hover,
  .cmp-button:hover,
  .cmp-a:hover,
  .nav-button:hover,
  .tablink:hover,
  .theme-btn:hover
) {
  background-color: rgba(var(--ds-action-green-rgb), 0.98) !important;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive:focus,
  .beastest-interactive:focus-visible,
  .btn-primary:focus,
  .btn-primary:focus-visible,
  .btn-outline:focus,
  .btn-outline:focus-visible,
  .btn-secondary:focus,
  .btn-secondary:focus-visible,
  .cmp-button:focus,
  .cmp-button:focus-visible,
  .cmp-a:focus,
  .cmp-a:focus-visible,
  .nav-button:focus,
  .nav-button:focus-visible,
  .tablink:focus,
  .tablink:focus-visible,
  .theme-btn:focus,
  .theme-btn:focus-visible
) {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--ds-action-green-rgb), 0.16) !important;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive.active,
  .beastest-interactive[data-active="true"],
  .btn-primary.active,
  .btn-primary[data-active="true"],
  .btn-outline.active,
  .btn-outline[data-active="true"],
  .btn-secondary.active,
  .btn-secondary[data-active="true"],
  .cmp-button.active,
  .cmp-button[data-active="true"],
  .cmp-a.active,
  .cmp-a[data-active="true"],
  .nav-button.active,
  .nav-button[data-active="true"],
  .tablink.active,
  .tablink[data-active="true"],
  .theme-btn.active,
  .theme-btn[data-active="true"]
) {
  cursor: default !important;
  background-color: var(--ds-menu-active-bg, rgba(0,0,0,0.35)) !important;
  color: #ffffff !important;
}

html,body {
  background: var(--ds-color-background, transparent);
  color: var(--ds-color-text, #e6eef6);
  font-family: var(--ds-font-base, system-ui, Arial, sans-serif);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body:not(.beastest-brand-shell) .btn-primary {
  background: var(--ds-color-primary, #4f46e5);
  color: var(--ds-color-text, #e6eef6);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

/* Dark/light theme toggle via [data-theme] attribute */
[data-theme=light] { --ds-color-background: #ffffff; --ds-color-text: #0f1720; }

/* Utility visibility classes used by JS helpers (prefer classes over inline styles) */
.is-hidden { display: none !important; opacity: 0; pointer-events: none; }
.is-visible { display: block !important; opacity: 1; pointer-events: auto; }

/* Backwards-compatible helper: some templates toggle `hidden` class */
.hidden { display: none !important; }

/* For inline elements that shouldn't become block-level, allow an override */
.is-visible-inline { display: inline !important; }

/* Smooth fades for UI elements */
.fade-transition { transition: opacity 160ms ease-in-out; }

/* `cmp-div` is used as a generic instrumentation class across many layout blocks.
   Never treat it as a fullscreen backdrop or it will freeze normal page interactivity. */
.cmp-div {
  background-color: transparent;
}

/* Background container used as canvas/backdrop for the landing page only. */
#particles-js {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgb(20, 20, 20);
}

/* Ensure interactive areas accept pointer events (fix: clicks not reaching UI) */
html, body, #main, #content-container, #menu-container, #onepager, #promo-header {
  pointer-events: auto !important;
}
/* Ensure decorative/backdrop layers never capture pointer events */
#particles-js {
  pointer-events: none !important;
}

/* Dark-mode specific adjustments: make page background transparent so
   `.cmp-div` becomes the visible backdrop. Tweak alpha values for
   translucency to preserve legibility of UI elements. */
:root[data-theme="dark"], [data-theme="dark"] {
  /* dark theme token overrides */
  --ds-color-text: #ffffff;
  --ds-color-primary: #4fb0ff;
  --ds-color-background: rgba(0,0,0,0.0);
}

[data-theme="dark"] body {
  background-color: transparent !important;
}

/* Ensure button and interactive control text is legible in dark mode */
:root[data-theme="dark"] body:not(.beastest-brand-shell) :where(
  .btn-primary,
  .btn-outline,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn
),
html[data-theme="dark"] body:not(.beastest-brand-shell) :where(
  .btn-primary,
  .btn-outline,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn
),
body[data-theme="dark"]:not(.beastest-brand-shell) :where(
  .btn-primary,
  .btn-outline,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn
) {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.06);
}

:root[data-theme="dark"] body:not(.beastest-brand-shell) .btn-primary,
html[data-theme="dark"] body:not(.beastest-brand-shell) .btn-primary,
body[data-theme="dark"]:not(.beastest-brand-shell) .btn-primary {
  /* keep the primary background but ensure contrast for text */
  color: #ffffff !important;
}

/* Light-mode variant: use a light background for the same element. */
[data-theme="light"] .cmp-div {
  background-color: white;
  backdrop-filter: none;
}

/* NOTE: Achieving the desired visual effect will require tuning the
   transparency and blur on `.cmp-div` and any overlaid UI panels.
   If panels use semi-transparent backgrounds, adjust their alpha or add
   stronger backdrop blur to avoid visual conflicts. */

/* --- Page layout: full-height + two-column (panel left, content right) --- */
html, body {
  height: 100%;
}

/* Particles / canvas background sits behind everything */
#particles-js {
  position: fixed;
  inset: 0;
  /* keep particles behind the backdrop */
  z-index: -1; /* behind .cmp-div (0) */
  pointer-events: none;
}

/* Main container (holds left menu and right content) */
#main { width: 100%; }

/* Left menu - column panel (the highest 'header' - vertical) */
#menu-container {
  --menu-width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--menu-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 12px 8px;
  overflow: hidden; /* prevent internal scrolling; children must adapt */
  background-color: transparent !Important;
  border-right: 1px solid rgba(255,255,255,0.03);
  z-index: 12;
}

/* Right content area - sits to the right of the menu */
#content-container {
  margin-left: var(--menu-width, 260px); /* match menu width */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent !Important;
  position: relative;
  z-index: 1; /* ensure content sits above the backdrop */
}

/* Promo header: fixed to top of viewport so it remains visible while scrolling.
   Left offset prevents overlap with the fixed sidebar; responsive rules
   ensure full-width behavior on small screens. */
#promo-header {
  position: fixed;
  top: 0;
  left: var(--menu-width, 260px);
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  /*background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));*/
  border-bottom: 1px solid rgba(255,255,255,0.03);
  z-index: 1000;
  /* remove `filter: blur()` here because it also blurs children (buttons/icons)
     Use `backdrop-filter` on a semi-transparent background instead so only the
     backdrop is blurred while content remains sharp */
}

/* Scrollable content area below promo header */
#onepager {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Subtle boxed background for all section containers matching "-section".
   Uses the action-green token at 10% alpha to match button color subtly. */
#onepager [class*="-section"] {
  background: rgba(var(--ds-action-green-rgb), 0.10) !important;
  border: 1px solid rgba(var(--ds-action-green-rgb), 0.12) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
  margin-right: 10px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset !important;
}

@media (max-width: 900px) {
  #onepager [class*="-section"] { padding: 12px !important; margin-bottom: 12px !important; margin-right: 5px !important; }
}

/* Make promo header darker and keep a subtle backdrop blur for legibility */
#promo-header {
  /* use a darker translucent background so header reads as 'dark' while
     still allowing the page backdrop to show through */
  background-color: rgba(20,22,24,0.62) !important; /* darker, ~62% */
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  z-index: 9999 !important;
}

/* Ensure header content (buttons, links, icons) renders above the translucent backdrop
   and is not visually blurred or occluded by the header background */
#promo-header .promo-content:not([data-beastest-promo-content]) { padding: 8px 16px; background: transparent !important; width: 100%; position: relative; z-index: 2; }

#promo-header .promo-content:not([data-beastest-promo-content]) :where(a, button, .beastest-interactive) {
  position: relative; z-index: 3; /* keep interactive controls above the header backdrop */
}

/* Dark theme variant for promo header */
body[data-theme="dark"] #promo-header,
.theme-dark #promo-header {
  background-color: rgba(8,8,8,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* Hover opacity: legacy controls only, never raw tags on brand-shell pages */
body:not(.beastest-brand-shell) :where(
  .beastest-interactive,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn
) {
  transition: opacity .12s ease, transform .06s ease;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive:hover,
  .beastest-interactive:focus-visible,
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-secondary:hover,
  .btn-secondary:focus-visible,
  .btn-outline:hover,
  .btn-outline:focus-visible,
  .cmp-button:hover,
  .cmp-button:focus-visible,
  .cmp-a:hover,
  .cmp-a:focus-visible,
  .nav-button:hover,
  .nav-button:focus-visible,
  .tablink:hover,
  .tablink:focus-visible,
  .theme-btn:hover,
  .theme-btn:focus-visible
) {
  opacity: 0.9 !important;
}

/* Small screens: collapse menu to top and remove fixed margin */
@media (max-width: 900px) {
  body:not(.beastest-brand-shell) #menu-container { position: relative; width: 100%; height: auto; padding: 8px; }
  body:not(.beastest-brand-shell) #content-container { margin-left: 0; }
}

/* Menu internals: keep layout flexible so items shrink rather than scroll */
body:not(.beastest-brand-shell) #menu-container .top-menu,
body:not(.beastest-brand-shell) #menu-container .bottom-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:not(.beastest-brand-shell) #menu-container .top-menu {
  flex: 1 1 auto; /* grow to occupy available space */
  overflow: hidden; /* do not show scrollbars */
  align-items: stretch; /* ensure children can expand to full height */
}

/* Logo sizing: constrained to 32x32 and aligned with nav buttons */
body:not(.beastest-brand-shell) #menu-container img#logo,
body:not(.beastest-brand-shell) #menu-container .top-menu img#logo {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  object-fit: contain !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

body:not(.beastest-brand-shell) #menu-container .bottom-menu {
  flex: 0 0 auto; /* stick to bottom */
}

/* Make bottom-menu entries match top-menu button dimensions and appearance */
/* Bottom-menu items use canonical interactive styles; keep only size/font adjustments here */
body:not(.beastest-brand-shell) #menu-container .bottom-menu a,
body:not(.beastest-brand-shell) #menu-container .bottom-menu button,
body:not(.beastest-brand-shell) #menu-container .bottom-menu .language-selector > a,
body:not(.beastest-brand-shell) #menu-container .bottom-menu .language-selector > button {
  font-size: clamp(12px, 1.2vw, 14px) !important;
  line-height: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}

/* Ensure the container `.language-selector` does not add its own box or padding
   which can create a double-button appearance. Make the anchor/button the
   single visual surface. */
.language-selector {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Explicitly reset background on inline children so only the anchor shows the
   button background. This prevents nested spans from showing a second box. */
.language-selector span,
.language-selector .emoji,
.language-selector .nav-text {
  background: transparent !important;
}

/* Language dropdown styles */
.language-dropdown { position: relative; display: inline-block; }
/* Language dropdown menu: always visible above toggle, wide enough, not squished */
.language-dropdown .language-menu {
  display: none;
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% - 8px);
  transform-origin: left bottom;
  background: var(--ds-color-card, #141618);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 0;
  margin-bottom: 8px;
  border-radius: 8px;
  min-width: 180px;
  width: 100%;
  max-width: 260px;
  max-height: 220px;
  overflow: auto;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.language-dropdown .language-menu.show { display: block; }
.language-dropdown .language-menu li { list-style: none; }
/* Language option buttons fill menu width and are not squished */
.language-dropdown .language-menu li button.language-option {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}
.language-dropdown .language-menu li button.language-option:hover { background: rgba(255,255,255,0.03); }

/* Ensure the toggle button aligns with menu and indicates open state */
.language-btn { display: inline-flex; align-items: center; gap: 8px; }
.language-dropdown .caret { margin-left: 6px; opacity: 0.7; }

/* Hide native select while keeping it accessible to scripts; keep focusability off */
.language-select.is-hidden { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* When the menu is near the viewport top, allow it to flip below the toggle (JS handles flip on open) */
.language-menu.flip-below { right: 0; left: auto; bottom: auto; top: 100%; margin-top: 6px; }

/* Ensure language selector/button in bottom menu uses same size */
body:not(.beastest-brand-shell) #menu-container .bottom-menu .cmp-button {
  padding: 8px 12px !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
}

/* Ensure nav button text uses token color; force white in dark theme via token */
/* Top-menu nav items rely on canonical interactive styles; keep layout concerns */
body:not(.beastest-brand-shell) #menu-container .nav-button,
body:not(.beastest-brand-shell) #menu-container .tablink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure active / pressed states keep the action button look (no transparent/black fallback) */
/* Menu active/focus visual handled by canonical `.beastest-interactive.active` */
body:not(.beastest-brand-shell) #menu-container .nav-button.active,
body:not(.beastest-brand-shell) #menu-container .nav-button:active,
body:not(.beastest-brand-shell) #menu-container .nav-button:focus,
body:not(.beastest-brand-shell) #menu-container .nav-button:focus-visible,
body:not(.beastest-brand-shell) #menu-container .tablink:active,
body:not(.beastest-brand-shell) #menu-container .tablink:focus {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Show underline on hover for menu buttons and ensure pointer cursor */
/* Hover behavior handled by canonical `.beastest-interactive:hover` */

/* When there are many items, allow compact mode by shrinking icons/text */
@media (max-height: 700px) {
  body:not(.beastest-brand-shell) #menu-container { padding: 8px 6px; }
  body:not(.beastest-brand-shell) #menu-container .nav-button,
  body:not(.beastest-brand-shell) #menu-container .tablink { padding: 6px 8px; font-size: 12px; }
}

/* Optional: collapse labels to icons-only at very small widths */
@media (max-width: 480px) {
  body:not(.beastest-brand-shell) #menu-container { position: relative; width: 100%; height: auto; }
  body:not(.beastest-brand-shell) #menu-container .nav-text,
  body:not(.beastest-brand-shell) #menu-container .tooltip { display: none; }
  body:not(.beastest-brand-shell) #menu-container .nav-button,
  body:not(.beastest-brand-shell) #menu-container .tablink { justify-content: center; }
}

/* --- Unified action/link/button style: semi-transparent green (76%) --- */
:root {
  /* Reduce yellow further: lower red component, increase blue slightly */
  --ds-action-green-rgb: 40,200,150; /* less yellow, a touch more blue */
  --ds-action-green: rgba(var(--ds-action-green-rgb), 0.60);
}

/* Canonical interactive styles above replace this block. */

/* ========================================================================
   Legacy compatibility outside the shared brand-shell design system.
   The active home/dashboard/practices SPAs use `brand-shell.css` as the
   canonical source of truth for controls and menu states, so these old
   overrides must stay out of `body.beastest-brand-shell` pages.
   ======================================================================== */
body:not(.beastest-brand-shell) :where(
  .beastest-interactive,
  .btn-primary,
  .btn-outline,
  .btn-secondary,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: var(--ds-button-height) !important;
  min-width: var(--ds-button-min-width) !important;
  padding: 0 var(--ds-button-padding-x) !important;
  font-size: var(--ds-button-font-size) !important;
  line-height: 1 !important;
  border-radius: var(--ds-button-radius) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive.active,
  .beastest-interactive[data-active="true"],
  .btn-primary.active,
  .btn-primary[data-active="true"],
  .btn-outline.active,
  .btn-outline[data-active="true"],
  .btn-secondary.active,
  .btn-secondary[data-active="true"],
  .cmp-button.active,
  .cmp-button[data-active="true"],
  .cmp-a.active,
  .cmp-a[data-active="true"],
  .nav-button.active,
  .nav-button[data-active="true"],
  .tablink.active,
  .tablink[data-active="true"],
  .theme-btn.active,
  .theme-btn[data-active="true"]
) {
  cursor: default !important;
  background-color: var(--ds-menu-active-bg, rgba(0,0,0,0.35)) !important;
  color: #ffffff !important;
}

body:not(.beastest-brand-shell) :where(
  .beastest-interactive:focus,
  .beastest-interactive:focus-visible,
  .btn-primary:focus,
  .btn-primary:focus-visible,
  .btn-outline:focus,
  .btn-outline:focus-visible,
  .btn-secondary:focus,
  .btn-secondary:focus-visible,
  .cmp-button:focus,
  .cmp-button:focus-visible,
  .cmp-a:focus,
  .cmp-a:focus-visible,
  .nav-button:focus,
  .nav-button:focus-visible,
  .tablink:focus,
  .tablink:focus-visible,
  .theme-btn:focus,
  .theme-btn:focus-visible
) {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--ds-action-green-rgb), 0.16) !important;
}

body:not(.beastest-brand-shell) #menu-container .bottom-menu :where(
  .beastest-interactive,
  .btn-primary,
  .btn-outline,
  .btn-secondary,
  .cmp-button,
  .cmp-a,
  .nav-button,
  .tablink,
  .theme-btn,
  .language-selector .cmp-a,
  .language-selector .cmp-button
) {
  align-self: stretch !important;
  width: 100% !important;
  justify-content: flex-start !important;
  padding-left: var(--ds-button-padding-x) !important;
  padding-right: var(--ds-button-padding-x) !important;
}

body:not(.beastest-brand-shell) #menu-container .nav-button,
body:not(.beastest-brand-shell) #menu-container .tablink {
  -webkit-font-smoothing: antialiased;
}

html body:not(.beastest-brand-shell) :where(
  .cmp-a,
  .nav-button,
  .tablink,
  .hero-cta .cmp-a,
  .hero-cta .cmp-button,
  .hero-cta .btn-primary,
  .hero-cta .btn-outline,
  .hero-cta .btn-secondary
) {
  justify-content: flex-start !important;
  text-align: left !important;
}

html body:not(.beastest-brand-shell) :where(
  .cmp-a:hover,
  .cmp-a:focus,
  .cmp-a:active,
  .cmp-a:visited,
  .cmp-a:link,
  .beastest-interactive:hover,
  .beastest-interactive:focus,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-outline:hover,
  .btn-outline:focus,
  .btn-secondary:hover,
  .btn-secondary:focus,
  .cmp-button:hover,
  .cmp-button:focus,
  .nav-button:hover,
  .nav-button:focus,
  .tablink:hover,
  .tablink:focus,
  .theme-btn:hover,
  .theme-btn:focus,
  .hero-cta .cmp-a:hover,
  .hero-cta .cmp-button:hover,
  .hero-cta .btn-primary:hover,
  .hero-cta .btn-outline:hover,
  .hero-cta .btn-secondary:hover
) {
  text-decoration: none !important;
  -webkit-text-decoration-skip-ink: auto !important;
  text-decoration-skip-ink: auto !important;
}

/* --- Language select: lightweight 'lite' dropdown styling --- */
.language-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--ds-color-card, #141618) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--ds-color-text, #e6eef6) !important;
  padding: 6px 36px 6px 12px !important; /* room for caret */
  height: var(--ds-button-height) !important;
  min-width: calc(var(--ds-button-min-width) - 8px) !important;
  border-radius: var(--ds-button-radius) !important;
  font-size: var(--ds-button-font-size) !important;
  cursor: pointer !important; /* finger cursor for interactivity */
  text-align: left !important;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.language-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--ds-action-green-rgb), 0.12) !important;
}

/* Options show pointer by default; selected/current option uses default cursor where supported */
.language-select option { cursor: pointer; background-color: var(--ds-color-card, #141618); color: var(--ds-color-text, #e6eef6); }
.language-select option:hover { background-color: rgba(255,255,255,0.04); color: #ffffff; }
.language-select option[selected], .language-select option:checked { cursor: default; font-weight: 600; background-color: var(--ds-menu-active-bg, rgba(0,0,0,0.45)); color: #ffffff; }

@media (max-width: 480px) {
  .language-select { min-width: 88px !important; height: 36px !important; }
}

/* Theme switch styling: looks like a light switch */
.theme-toggle-container:not(.beastest-theme-toggle-switch) { display: inline-flex; align-items: center; }
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-toggle-input { position: absolute !important; left: -9999px; }
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-toggle-label {
  display: inline-block;
  position: relative;
  width: 72px; /* larger switch */
  height: 40px; /* larger switch */
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  border: 2px solid rgba(var(--ds-action-green-rgb), 0.60); /* green border */
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-track { position: absolute; inset: 0; border-radius: 999px; }
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-thumb {
  position: absolute;
  top: 4px; /* center vertically for larger track */
  left: 4px;
  width: 32px; /* larger thumb */
  height: 32px;
  background: var(--ds-action-green) !important; /* match buttons (uses token with alpha) */
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 160ms ease, box-shadow 160ms ease;
  z-index: 3; /* keep thumb above icons */
}
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-icons { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; z-index: 1; }
/* Keep both icons rendered under the thumb and use opacity to reveal the active one
   This allows the semi-transparent thumb to show the icon behind it. */
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-icons .sun,
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-icons .moon {
  display: inline-block;
  opacity: 0.35; /* dim by default so thumb remains primary */
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Checked = light mode (thumb moves right, track brightens) */
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-toggle-input:checked + .theme-toggle-label { background: rgba(255,255,255,0.12); }
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-toggle-input:checked + .theme-toggle-label .theme-thumb { transform: translateX(34px); }

/* Make site emojis slightly larger and aligned */
.emoji { font-size: 20px !important; line-height: 1 !important; display: inline-block; vertical-align: middle; }

/* Ensure theme icons (sun/moon) match emoji sizing */
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-icons .sun, .theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-icons .moon { font-size: 18px; line-height: 1; }
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-toggle-input:checked + .theme-toggle-label .theme-icons .sun { opacity: 1; }
.theme-toggle-container:not(.beastest-theme-toggle-switch) .theme-toggle-input:not(:checked) + .theme-toggle-label .theme-icons .moon { opacity: 1; }

/* Add top padding to the content area so it is not hidden behind fixed header */
#content-container { padding-top: 64px; }

/* Ensure promo header remains visually separate; keep content transparent so
  interactive controls render above the header backdrop */
#promo-header .promo-content:not([data-beastest-promo-content]) { padding: 8px 16px; background: transparent !important; width: 100%; position: relative; z-index: 2; }

/* Small screens: menu collapses, header should span full width */
@media (max-width: 900px) {
  #promo-header { left: 0; right: 0; }
  #content-container { padding-top: 64px; margin-left: 0; }
}

/* Modal / dialog helpers (ensure login modal and other dialogs render above the header) */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10002; /* above header (9999) and promo header */
  pointer-events: auto;
}

.modal.active {
  display: flex !important;
}

.modal .modal-content {
  max-width: 520px;
  width: 92%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(20,20,22,0.96);
  color: #ffffff;
  box-shadow: 0 12px 40px rgba(2,6,23,0.6);
}

.modal .modal-content.modal-content--dark {
  background-color: rgba(12,12,14,0.98);
}

.auth-modal {
  --login-ink: #f8fbff;
  --login-muted: rgba(223, 232, 244, 0.74);
  --login-line: rgba(154, 175, 197, 0.18);
  --login-panel: rgba(9, 14, 24, 0.96);
  --login-panel-soft: rgba(15, 24, 38, 0.78);
  --login-accent: #79dbc9;
  --login-accent-strong: #f2a65a;
  --login-shadow: 0 24px 80px rgba(2, 10, 20, 0.45);
  background:
    radial-gradient(circle at 18% 18%, rgba(121, 219, 201, 0.18), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(242, 166, 90, 0.16), transparent 26%),
    rgba(4, 9, 16, 0.74);
  backdrop-filter: blur(18px);
  padding: 28px;
  overflow-y: auto;
}

.auth-modal .modal-content {
  width: min(1080px, 96vw);
  max-width: 1080px;
  max-height: min(90vh, 860px);
  padding: 0;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(164, 182, 203, 0.18);
  background:
    linear-gradient(145deg, rgba(10, 15, 23, 0.94), rgba(7, 11, 19, 0.98)),
    rgba(12, 12, 14, 0.98);
  box-shadow: var(--login-shadow);
  position: relative;
}

.auth-modal .modal-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(300deg, rgba(121, 219, 201, 0.08), transparent 32%);
  pointer-events: none;
}

.auth-modal .login-modal-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(290px, 0.95fr) minmax(0, 1.05fr);
  min-height: 680px;
}

.auth-modal .login-modal-showcase,
.auth-modal .login-modal-panel {
  position: relative;
  z-index: 1;
}

.auth-modal .login-modal-showcase {
  padding: 42px 38px;
  background:
    radial-gradient(circle at top left, rgba(121, 219, 201, 0.24), transparent 32%),
    linear-gradient(160deg, #07141f 0%, #0d2230 56%, #123131 100%);
  border-right: 1px solid rgba(154, 175, 197, 0.12);
}

.auth-modal .login-modal-showcase::after {
  content: '';
  position: absolute;
  right: -84px;
  bottom: -84px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 166, 90, 0.34), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

.auth-modal .login-modal-panel {
  padding: 42px 38px 36px;
  background:
    linear-gradient(180deg, rgba(10, 15, 25, 0.94), rgba(7, 11, 19, 0.98)),
    var(--login-panel);
}

.auth-modal .login-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(227, 234, 244, 0.16);
  background: rgba(9, 14, 24, 0.68);
  color: var(--login-ink);
  font-size: 1.65rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
  z-index: 2;
}

.auth-modal .login-modal-close:hover,
.auth-modal .login-modal-close:focus-visible {
  transform: translateY(-1px);
  background: rgba(20, 29, 44, 0.96);
  border-color: rgba(242, 166, 90, 0.45);
  outline: none;
}

.auth-modal .login-modal-eyebrow,
.auth-modal .login-modal-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 248, 252, 0.9);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.auth-modal .modal-title {
  margin: 18px 0 12px;
  color: var(--login-ink);
  font-family: var(--beastest-shell-font);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.auth-modal .login-modal-lead,
.auth-modal .login-modal-panel__head p,
.auth-modal .login-modal-point p,
.auth-modal .login-signup-note {
  margin: 0;
  color: var(--login-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.auth-modal .login-modal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 28px;
}

.auth-modal .login-modal-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(5, 13, 20, 0.32);
  border: 1px solid rgba(187, 207, 226, 0.15);
  color: rgba(240, 246, 252, 0.88);
  font-size: 0.84rem;
  font-weight: 600;
}

.auth-modal .login-modal-points {
  display: grid;
  gap: 14px;
}

.auth-modal .login-modal-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(6, 14, 22, 0.26);
  border: 1px solid rgba(187, 207, 226, 0.12);
  backdrop-filter: blur(8px);
}

.auth-modal .login-modal-point strong {
  display: block;
  margin-bottom: 4px;
  color: var(--login-ink);
  font-size: 0.98rem;
}

.auth-modal .login-modal-point__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(121, 219, 201, 0.28), rgba(242, 166, 90, 0.22));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.auth-modal .login-modal-panel__head {
  margin-bottom: 26px;
}

.auth-modal .login-modal-panel__head h3 {
  margin: 18px 0 10px;
  color: var(--login-ink);
  font-size: clamp(1.55rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}

.auth-modal .login-tab-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(164, 182, 203, 0.12);
  margin-bottom: 24px;
}

.auth-modal .login-tab-button {
  border: 0;
  border-radius: 16px;
  padding: 13px 16px;
  background: transparent;
  color: rgba(223, 232, 244, 0.78);
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.auth-modal .login-tab-button:hover,
.auth-modal .login-tab-button:focus-visible {
  color: var(--login-ink);
  outline: none;
}

.auth-modal .login-tab-button.active {
  color: #041018;
  background: linear-gradient(135deg, var(--login-accent), #92f0e0 55%, #f3c184 100%);
  box-shadow: 0 12px 26px rgba(121, 219, 201, 0.18);
}

.auth-modal .login-tab-content {
  display: none;
}

.auth-modal .login-tab-content.active {
  display: block;
}

.auth-modal .login-form-stack {
  display: grid;
  gap: 16px;
}

.auth-modal .login-field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(230, 238, 247, 0.86);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.auth-modal .login-input-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid var(--login-line);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.auth-modal .login-input-shell:focus-within {
  border-color: rgba(121, 219, 201, 0.5);
  box-shadow: 0 0 0 4px rgba(121, 219, 201, 0.12);
  transform: translateY(-1px);
}

.auth-modal .login-input-shell--password {
  grid-template-columns: auto 1fr auto;
}

.auth-modal .login-input-icon {
  color: rgba(121, 219, 201, 0.9);
  font-size: 0.94rem;
}

.auth-modal .login-input-shell .cmp-input {
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: transparent;
  color: var(--login-ink);
  box-shadow: none;
  font-size: 1rem;
}

.auth-modal .login-input-shell .cmp-input:focus {
  outline: none;
}

.auth-modal .login-input-shell .cmp-input::placeholder {
  color: rgba(190, 203, 220, 0.42);
}

.auth-modal .login-password-toggle {
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(233, 241, 250, 0.74);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.auth-modal .login-password-toggle:hover,
.auth-modal .login-password-toggle:focus-visible {
  background: rgba(121, 219, 201, 0.16);
  color: var(--login-ink);
  outline: none;
}

.auth-modal .login-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -2px;
}

.auth-modal .login-inline-link {
  color: rgba(213, 225, 239, 0.82);
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.auth-modal .login-inline-link:hover,
.auth-modal .login-inline-link:focus-visible {
  color: #fff;
  border-color: rgba(121, 219, 201, 0.5);
  outline: none;
}

.auth-modal .login-error {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 126, 126, 0.32);
  background: rgba(124, 24, 24, 0.18);
  color: #ffe2e2;
  font-size: 0.92rem;
}

.auth-modal .login-error--success {
  border-color: rgba(121, 219, 201, 0.34);
  background: rgba(20, 84, 66, 0.2);
  color: #dffcf6;
}

.auth-modal .login-submit-button {
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--login-accent) 0%, #79a9ff 56%, var(--login-accent-strong) 100%);
  color: #041018;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(61, 121, 214, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.auth-modal .login-submit-button:hover,
.auth-modal .login-submit-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px rgba(61, 121, 214, 0.28);
  filter: saturate(1.04);
  outline: none;
}

.auth-modal .login-submit-button.is-loading,
.auth-modal .login-submit-button:disabled {
  opacity: 0.84;
  cursor: wait;
  transform: none;
}

.auth-modal .login-submit-button--secondary {
  background: linear-gradient(135deg, rgba(121, 219, 201, 0.96), rgba(242, 166, 90, 0.92));
}

.auth-modal .login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: rgba(200, 212, 227, 0.5);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-modal .login-divider::before,
.auth-modal .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 182, 203, 0.2), transparent);
}

.auth-modal .social-login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-modal .login-provider-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(164, 182, 203, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--login-ink);
  text-align: left;
  cursor: default;
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.auth-modal .login-provider-button:hover,
.auth-modal .login-provider-button:focus-visible {
  border-color: rgba(121, 219, 201, 0.3);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  outline: none;
}

.auth-modal .login-provider-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(246, 250, 255, 0.92);
}

.auth-modal .login-provider-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.auth-modal .login-provider-copy strong {
  font-size: 0.96rem;
  line-height: 1.1;
}

.auth-modal .login-provider-copy small {
  color: rgba(213, 225, 239, 0.62);
  font-size: 0.76rem;
}

.auth-modal .login-provider-arrow {
  margin-left: auto;
  color: rgba(213, 225, 239, 0.46);
  font-size: 1rem;
}

.auth-modal .login-signup-note {
  margin-bottom: 4px;
}

body[data-theme="light"] .auth-modal {
  --login-ink: #162433;
  --login-muted: rgba(35, 52, 69, 0.74);
  --login-line: rgba(88, 114, 138, 0.16);
  --login-panel: rgba(251, 253, 255, 0.98);
  --login-panel-soft: rgba(238, 244, 249, 0.92);
  background:
    radial-gradient(circle at 18% 18%, rgba(51, 140, 127, 0.15), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(202, 124, 42, 0.14), transparent 24%),
    rgba(235, 240, 245, 0.76);
}

body[data-theme="light"] .auth-modal .modal-content {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.98)),
    rgba(255, 255, 255, 0.98);
  border-color: rgba(88, 114, 138, 0.15);
}

body[data-theme="light"] .auth-modal .login-modal-showcase {
  background:
    radial-gradient(circle at top left, rgba(121, 219, 201, 0.22), transparent 32%),
    linear-gradient(160deg, #d9edf1 0%, #cbe3ef 56%, #e8efe5 100%);
}

body[data-theme="light"] .auth-modal .login-modal-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
}

body[data-theme="light"] .auth-modal .login-modal-close {
  background: rgba(247, 250, 252, 0.92);
  border-color: rgba(88, 114, 138, 0.18);
}

body[data-theme="light"] .auth-modal .login-modal-eyebrow,
body[data-theme="light"] .auth-modal .login-modal-panel__eyebrow,
body[data-theme="light"] .auth-modal .login-modal-chip,
body[data-theme="light"] .auth-modal .login-modal-point,
body[data-theme="light"] .auth-modal .login-tab-container,
body[data-theme="light"] .auth-modal .login-input-shell,
body[data-theme="light"] .auth-modal .login-provider-button,
body[data-theme="light"] .auth-modal .login-password-toggle {
  background: rgba(255, 255, 255, 0.72);
}

.auth-modal .login-modal-layout--simple {
  display: block;
  min-height: 0;
}

.auth-modal .login-modal-panel--simple {
  max-width: 640px;
  margin: 0 auto;
  padding: 52px 40px 40px;
  background: linear-gradient(180deg, rgba(10, 15, 25, 0.96), rgba(7, 11, 19, 0.99));
}

.auth-modal .login-modal-head {
  margin-bottom: 26px;
}

.auth-modal .login-modal-subtitle {
  margin: 0;
  color: var(--login-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.auth-modal .login-terms-row {
  margin-top: -2px;
}

.auth-modal .login-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(230, 238, 247, 0.82);
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-modal .login-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--login-accent);
}

.auth-modal .login-support-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.auth-modal .login-support-actions--single {
  grid-template-columns: 1fr;
}

.auth-modal .login-support-button {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(164, 182, 203, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--login-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.auth-modal .login-support-button:hover,
.auth-modal .login-support-button:focus-visible {
  border-color: rgba(121, 219, 201, 0.34);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
  outline: none;
}

.auth-modal .login-support-button--primary {
  background: linear-gradient(135deg, rgba(121, 219, 201, 0.16), rgba(242, 166, 90, 0.2));
}

.auth-modal .social-login .login-provider-button[aria-disabled="true"] {
  opacity: 0.92;
}

body[data-theme="light"] .auth-modal .login-modal-panel--simple {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
}

body[data-theme="light"] .auth-modal .login-support-button {
  background: rgba(255, 255, 255, 0.78);
}

@media (max-width: 920px) {
  .auth-modal {
    padding: 18px;
  }

  .auth-modal .modal-content {
    width: min(760px, 100%);
  }

  .auth-modal .login-modal-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-modal .login-modal-showcase,
  .auth-modal .login-modal-panel {
    padding: 34px 28px;
  }

  .auth-modal .login-modal-showcase {
    border-right: 0;
    border-bottom: 1px solid rgba(164, 182, 203, 0.12);
  }
}

@media (max-width: 640px) {
  .auth-modal {
    padding: 12px;
  }

  .auth-modal .modal-content {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 24px;
  }

  .auth-modal .login-modal-showcase,
  .auth-modal .login-modal-panel {
    padding: 28px 20px 24px;
  }

  .auth-modal .login-modal-chip-row,
  .auth-modal .login-form-meta {
    gap: 10px;
  }

  .auth-modal .social-login {
    grid-template-columns: 1fr;
  }

  .auth-modal .login-form-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-modal .login-modal-close {
    top: 12px;
    right: 12px;
  }
}

/* practices.html styles - modern cards grid */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.content-card {
  background: var(--ds-tokens-colors-card, #181c22);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.content-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.16);
}
.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #222;
}
.card-body {
  padding: 18px 16px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-body h3 {
  margin: 0 0 8px 0;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ds-tokens-colors-text, #fff);
}
.card-excerpt {
  flex: 1;
  color: var(--ds-tokens-colors-muted, #b0b8c0);
  font-size: 1rem;
  margin-bottom: 10px;
}
.card-category {
  font-size: 0.92rem;
  color: var(--ds-tokens-colors-accent, #4fb0ff);
  margin-bottom: 10px;
}
.btn.btn-primary {
  align-self: flex-start;
  background: linear-gradient(90deg, var(--ds-tokens-colors-accent, #4fb0ff), var(--ds-tokens-colors-accent2, #7b61ff));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.btn.btn-primary:hover {
  background: linear-gradient(90deg, var(--ds-tokens-colors-accent2, #7b61ff), var(--ds-tokens-colors-accent, #4fb0ff));
}
.category-nav {
  display: flex;
  gap: 12px;
  margin: 24px 0 0 0;
  justify-content: center;
}
.cat-btn {
  background: none;
  border: 1px solid var(--ds-tokens-colors-accent, #4fb0ff);
  color: var(--ds-tokens-colors-accent, #4fb0ff);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cat-btn.active, .cat-btn:hover {
  background: var(--ds-tokens-colors-accent, #4fb0ff);
  color: #fff;
}
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 32px 0 0 0;
}
.page-link {
  background: none;
  border: 1px solid var(--ds-tokens-colors-muted, #9aa0a6);
  color: var(--ds-tokens-colors-muted, #9aa0a6);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.page-link.active, .page-link:hover {
  background: var(--ds-tokens-colors-accent, #4fb0ff);
  color: #fff;
  border-color: var(--ds-tokens-colors-accent, #4fb0ff);
}
@media (max-width: 700px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
  .category-nav {
    flex-wrap: wrap;
    gap: 8px;
  }
}
/* === Typography normalization (titles size cap, scoped to non-cloud pages) === */
body:not(.cloud-shell):not(.beastest-cloud-portal) h1 { font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; line-height: 1.2 !important; }
body:not(.cloud-shell):not(.beastest-cloud-portal) h2 { font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important; line-height: 1.25 !important; }
body:not(.cloud-shell):not(.beastest-cloud-portal) h3 { font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important; line-height: 1.3 !important; }
body:not(.cloud-shell):not(.beastest-cloud-portal) h4 { font-size: 1rem !important; line-height: 1.35 !important; }
/* Stronger overrides for marketing pages with their own scoped rules */
body.home-gold-page .section-header h1,
body.home-gold-page .content-stage-head h1,
body.home-gold-page .about-section > h1 { font-size: clamp(1.4rem, 2.1vw, 1.9rem) !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
body.home-gold-page .section-header h3,
body.home-gold-page .content-stage-head h3,
body.home-gold-page .hero-content h3,
body.home-gold-page .feature-card h3,
body.home-gold-page .pricing-header h3,
body.home-gold-page .practice-card h3,
body.home-gold-page .pathway-step h3,
body.home-gold-page .service-card h3,
body.home-gold-page .standard-item h3,
body.home-gold-page .framework-item h3,
body.home-gold-page .tool-info h4 { font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
@media (max-width: 720px) {
  body:not(.cloud-shell):not(.beastest-cloud-portal) h1 { font-size: 1.4rem !important; }
  body:not(.cloud-shell):not(.beastest-cloud-portal) h2 { font-size: 1.15rem !important; }
  body:not(.cloud-shell):not(.beastest-cloud-portal) h3 { font-size: 1rem !important; }
}