/*
  Shared tokens for every code component.

  A site-level CSS *class* never reaches inside a shadow root, but a site-level
  *variable* does (CLAUDE.md section 2) - so this file is where the components
  meet the site's own design system. Each --na-* name below resolves to the real
  Webflow variable first and to the value from the Figma file only as a fallback,
  which means retuning a colour in the Designer moves every block with it, while
  the components still render correctly in the local gallery, in Figma-faithful
  isolation, and on any site that does not define these.

  The Webflow names are the ones the Designer emits for the "Semantic Colors"
  and "Base" collections of the Nebius Academy site; every fallback here was
  checked against the live value and matches it.
*/
/* Both selectors on purpose: the CLI rewrites `:root` to `:host` when it builds
   the shadow-DOM stylesheet (section 2), but the local gallery inlines this file
   as-is, where `:root` matches nothing and every token would silently fall back.
   Naming `:host` as well makes the gallery behave like the real thing. */
:host,
:host {
  --container-max-width: 1280px;

  /* Type. Webflow holds no font-family variables - the faces are set in the
     site's typography settings - so these are ours, with the project's own
     "Inter 28" first and metric-compatible Arial behind it. */
  --na-font-sans: "Inter 28", Arial, sans-serif;
  --na-font-display: "Inter Tight", "Inter 28", Arial, sans-serif;
  --na-font-serif: "Tiempos Text", Georgia, "Times New Roman", serif;

  /* Text */
  --na-content-primary-bold: var(--_semantic-colors---content--primary-bold, #14070f);
  --na-content-primary: var(--_semantic-colors---content--primary, rgba(20, 7, 15, 0.9));
  --na-content-secondary: var(--_semantic-colors---content--secondary, rgba(20, 7, 15, 0.7));
  --na-content-tertiary: var(--_semantic-colors---content--tertiary, rgba(20, 7, 15, 0.5));
  --na-content-inverse-primary-bold: var(--_semantic-colors---content--inverse-primary-bold, #f9f8f6);
  --na-content-inverse-primary: var(--_semantic-colors---content--inverse-primary, rgba(249, 248, 246, 0.9));
  --na-content-inverse-secondary: var(--_semantic-colors---content--inverse-secondary, rgba(249, 248, 246, 0.7));
  --na-content-inverse-tertiary: var(--_semantic-colors---content--inverse-tertiary, rgba(249, 248, 246, 0.5));

  /* Surfaces */
  --na-background-primary: var(--_semantic-colors---background--primary, #f3efe8);
  --na-background-secondary: var(--_semantic-colors---background--secondary, #f9f8f6);
  --na-background-inverse: var(--_semantic-colors---background--inverse, rgba(20, 7, 15, 0.95));
  --na-background-primary-hover-subtle: var(--_semantic-colors---background--primary-hover-subtle, #eae6dc);

  /* Borders */
  --na-border-primary: var(--_semantic-colors---border-stroke--black--primary, rgba(20, 7, 15, 0.2));
  --na-border-secondary: var(--_semantic-colors---border-stroke--black--secondary, rgba(20, 7, 15, 0.1));
  --na-border-inverse-primary: var(--_semantic-colors---border-stroke--white--primary, rgba(249, 248, 246, 0.7));
  --na-color-black-alpha-20-a: var(--black--alpha--20-a, rgba(20, 7, 15, 0.2));

  /* No counterpart in the site's collections, so these stay ours - but they are
     still variables, so a page can retune them.

     Two of them deliberately do NOT use the similarly named Webflow token:
     Background/primary-hover is #ab9c8f there, and primary-hover-subtle is the
     opaque #eae6dc. Both are meant for beige cards. Over the header's glass bar
     a hover has to be a transparent wash or it reads as a solid chip, which is
     what the two "ghost" names below are for. */
  --na-background-primary-subtle: #f3efe8;
  --na-background-white: #fff;
  --na-background-glass: rgba(255, 255, 255, 0.5);
  --na-background-primary-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover: rgba(20, 7, 15, 0.06);
  --na-background-ghost-hover-subtle: rgba(20, 7, 15, 0.04);
  --na-color-white-alpha-70-a: rgba(255, 255, 255, 0.7);
  --na-color-white-alpha-50-a: rgba(255, 255, 255, 0.5);
  --na-color-white-alpha-40-a: rgba(255, 255, 255, 0.4);

  /* The Problem section's "Tint" stat card (Figma node 21245-5945): a solid
     lavender card with a black-fading-to-lavender figure. No counterpart in
     the site's collections, so this stays ours the way the block above does. */
  --na-background-tint-purple: #d3d3fa;
  --na-gradient-stat-fade: linear-gradient(90deg, rgba(20, 7, 15, 0.95) 0%, rgba(20, 7, 15, 0.95) 35%, rgba(211, 211, 250, 0.9) 100%);

  /* The gradient every *emphasis* italic run in a heading is clipped to
     (Figma node 21045-20, the Hero heading). Webflow has no gradient
     variables to bridge to (same reasoning as the fonts above), so this one
     is ours outright - defined once here and referenced by every section's
     .emphasis rule instead of repeating the five stops seven times. */
  --na-gradient-emphasis: linear-gradient(213deg, #b5a9ea 18%, #8873de 54%, #2e2e7d 75%, #43425b 95%);
}

/* The header bar is fixed, but the block itself stays in the flow at exactly
   the bar's height, so dropping it at the top of a page reserves its own space
   and nothing underneath has to know it is there. "Overlay content" collapses
   that to zero for a page whose first section already allows for it. */
.r3HBsAuYbKaSLAUcGirN {
  position: relative;
  display: block;
  width: 100%;
  height: 104px;
}

.UyhoJdIu6Q8RvmIlcL7s {
  height: 0;
}

.LwwffpyVZy_LvFDHKzna {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
}

.zH2BGJJ7Q9SGAQZsAslX {
  box-sizing: border-box;
  width: 100%;
  padding: 20px var(--na-spacing-16, 16px);
}

.AfYJk14IPlJXvXLpvscQ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-max-width, 1280px);
  height: 64px;
  margin-inline: auto;
  /* No padding on the right: the burger is a 40px target around a 20px icon,
     so the icon already sits 10px in from the edge. */
  padding: 12px 0 12px 12px;
  background: var(--na-color-white-alpha-70-a, rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--na-border-radius-8, 8px);
}

.KmtwbG6Xt2tkeuPKmGfL {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.Rcnm0AzfF4tPv72Jny0o {
  display: none;
}

.SqfS1KwviWHwSonFlTCS {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--na-border-radius-8, 8px);
  background: transparent;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

.SqfS1KwviWHwSonFlTCS:hover {
  background: var(--na-background-ghost-hover-subtle, rgba(20, 7, 15, 0.04));
}

/* Figma's Flat/Active state - the nav item whose panel is open. */
.LJCZoubGX2PfwsAExQQu {
  background: var(--na-background-primary-hover, rgba(20, 7, 15, 0.06));
}

.BalQ8EOa230Sk_RkiOHD {
  display: none;
}

.bWFhsGZhaXpvUsOX9D9a {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--na-content-primary-bold, #14070f);
  cursor: pointer;
}

/* No hover wash on the burger: a 40px round target lit up as a grey circle
   around a 20px icon, which read as a stray dot rather than a button. */

.LW9hpBBkeK3_PgrmKVGr {
  display: block;
  width: 20px;
  height: 20px;
}

/* The EN / ES pill sizes itself - see shared/LanguageSwitcher.module.css. This
   only places it. */
.psFha_tmisz98ksO_asm {
  flex: none;
  align-self: flex-start;
}

/* The bar's action row is 40px tall, four short of Figma's drawer pill. */
.BalQ8EOa230Sk_RkiOHD .psFha_tmisz98ksO_asm {
  --switcher-padding-y: 8px;
  align-self: center;
}

.hL2H4_kKd4I7JAcumRXa,
.z9GweubAg8xux7EioDtW {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  text-decoration: none;
  white-space: nowrap;
}

.hL2H4_kKd4I7JAcumRXa {
  border: none;
  border-radius: 12px;
  background: var(--na-content-primary-bold, #14070f);
  color: var(--na-content-inverse-primary, rgba(249, 248, 246, 0.9));
}

.z9GweubAg8xux7EioDtW {
  border: 1px solid var(--na-color-black-alpha-20-a, rgba(20, 7, 15, 0.2));
  border-radius: var(--na-border-radius-10, 10px);
  background: transparent;
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
}

/* The drawer stacks its two buttons full width. */
.ISp17SiCFSk4kba7tnII {
  width: 100%;
}

/* Below 1280 this is the drawer: a full-screen sheet with its own scroll.
   From 1280 up the same element is the dropdown under the bar - see the media
   query at the bottom. Either way it holds ONE copy of the panels, which is
   what keeps the content a designer types in a Menu Panel working in both. */
.arwOtVWpfDSKtCykUoCU {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 901;
  flex-direction: column;
  gap: var(--na-spacing-24, 24px);
  box-sizing: border-box;
  padding: var(--na-spacing-16, 16px);
  background: var(--na-background-secondary, #f9f8f6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Opening has to be animatable, and `display` is not - so the layer is always
     laid out and hidden by opacity instead. It is out of flow in both layouts
     (fixed here, absolute on desktop), so keeping it displayed costs no space.
     `visibility` is what still takes it out of the tab order and off the
     accessibility tree; its transition is delayed so it only flips back to
     hidden once the fade has finished. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 220ms ease-out, visibility 0s linear 220ms;
}

.pRl0mes_vvWYuS81UGBg {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.PDiE9WZyqhk83eRr4cyz {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
}

.KDwDzorTk397Z2iBFbpx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--na-border-radius-8, 8px);
  background: transparent;
  color: var(--na-content-primary-bold, #14070f);
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

.KDwDzorTk397Z2iBFbpx:hover {
  background: var(--na-background-ghost-hover-subtle, rgba(20, 7, 15, 0.04));
}

/* No gap: a collapsed panel is a zero-height grid row, and a gap would leave
   16px of air under every shut accordion. The panel pays for its own spacing
   with a padding-top that animates alongside it. */
.maltpc0Zf7gZB8dE90t2 {
  display: flex;
  flex-direction: column;
}

.E5wFDR0m7vy94ciRkVWY {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--na-spacing-8, 8px);
  box-sizing: border-box;
  width: 100%;
  padding: var(--na-spacing-8, 8px) 0;
  border: none;
  border-radius: var(--na-border-radius-8, 8px);
  background: transparent;
  color: var(--na-content-primary-bold, #14070f);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.xdcBlnpTV5WzlguGtQPT {
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.EMWFkciZ593zA_vAqksN {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 160ms ease-out;
}

._IPHEy2EVNtvinZ0zHi8 {
  transform: rotate(180deg);
}

/* The accordion body. `height: auto` cannot be transitioned, but a grid row
   sized in fr can - so the panel sits in a single row that grows from 0fr to
   1fr. That is what gives a real height animation without measuring anything
   in JavaScript. */
.bmuegcD_VKk1Jijv94Wv {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  opacity: 0;
  transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1), padding-top 280ms
      cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease-out;
}

.DTwG_OTP8uJROzNjFHz1 {
  grid-template-rows: 1fr;
  padding-top: var(--na-spacing-16, 16px);
  opacity: 1;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1), padding-top 320ms
      cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out 60ms;
}

/* Webflow feeds the slot one unclassed wrapper <div> holding the Menu Panel.
   Here that wrapper is wanted rather than collapsed: it is the grid item, and
   `overflow: hidden` on it is what lets the row clip the panel while the row
   is shorter than its contents. `min-height: 0` stops the item from insisting
   on its natural height and defeating the whole thing. */
.bmuegcD_VKk1Jijv94Wv > slot::slotted(*) {
  display: block;
  overflow: hidden;
  min-height: 0;
}

.T1yIiMOA0zy5NXhItcE9 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.OUeHmrwPNnx7PknFnxvf {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .zH2BGJJ7Q9SGAQZsAslX {
    padding: 20px var(--na-spacing-48, 48px);
  }

  /* The tablet bar keeps the language switcher and the primary button next to
     the burger; Log In only comes back with the full desktop nav.

     `margin-left: auto` takes all the free space in the bar, which leaves the
     switcher and the button pinned against the burger instead of floating in
     the middle - with the nav hidden, `space-between` would otherwise spread
     three children across the whole width. */
  .BalQ8EOa230Sk_RkiOHD {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 4px;
  }

  .BalQ8EOa230Sk_RkiOHD .z9GweubAg8xux7EioDtW {
    display: none;
  }
}

@media (min-width: 1280px) {
  .r3HBsAuYbKaSLAUcGirN {
    height: 102px;
  }

  .UyhoJdIu6Q8RvmIlcL7s {
    height: 0;
  }

  .zH2BGJJ7Q9SGAQZsAslX {
    padding: 20px 70px;
  }

  .AfYJk14IPlJXvXLpvscQ {
    height: 62px;
    padding: 11px 24px;
    background: var(--na-background-glass, rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .Rcnm0AzfF4tPv72Jny0o {
    display: flex;
    align-items: center;
    gap: var(--na-spacing-48, 48px);
  }

  /* The nav is back, so the bar spreads logo / nav / actions on its own again
     and the tablet rule that pinned the actions to the burger has to go. */
  .BalQ8EOa230Sk_RkiOHD {
    margin-left: 0;
    margin-right: 0;
  }

  .BalQ8EOa230Sk_RkiOHD .z9GweubAg8xux7EioDtW {
    display: inline-flex;
  }

  .bWFhsGZhaXpvUsOX9D9a {
    display: none;
  }

  /* The dropdown sheet. `top: 100%` is the bottom of the header block, which is
     exactly where Figma starts the panel - no gap. The fade and the lift come
     from the base rules; only the box changes here. */
  .arwOtVWpfDSKtCykUoCU {
    display: block;
    position: absolute;
    inset: auto 0 auto 0;
    top: 100%;
    z-index: auto;
    padding: 0 70px;
    background: none;
    overflow: visible;
  }

  .PDiE9WZyqhk83eRr4cyz,
  .E5wFDR0m7vy94ciRkVWY,
  .T1yIiMOA0zy5NXhItcE9 {
    display: none;
  }

  /* With the accordion rows gone a section has nothing left but its panel, and
     `display: contents` keeps that panel a direct child of the sheet instead of
     wrapping it in an empty flex column. */
  .maltpc0Zf7gZB8dE90t2 {
    display: contents;
  }

  /* No height animation on desktop: the sheet as a whole fades in, and running
     both at once reads as a stutter. Back to a plain swap. */
  .bmuegcD_VKk1Jijv94Wv {
    display: none;
    padding-top: 0;
    opacity: 1;
    transition: none;
  }

  .DTwG_OTP8uJROzNjFHz1 {
    display: block;
    width: 100%;
    max-width: var(--container-max-width, 1280px);
    margin-inline: auto;
  }

  .bmuegcD_VKk1Jijv94Wv > slot::slotted(*) {
    overflow: visible;
  }
}

/* Anyone who has asked for less movement gets the same states without the
   travel - the menu still opens and closes, it just does it at once. */
@media (prefers-reduced-motion: reduce) {
  .arwOtVWpfDSKtCykUoCU,
  .pRl0mes_vvWYuS81UGBg {
    transform: none;
    transition: opacity 1ms linear, visibility 0s;
  }

  .bmuegcD_VKk1Jijv94Wv,
  .DTwG_OTP8uJROzNjFHz1 {
    transition: none;
  }

  .EMWFkciZ593zA_vAqksN {
    transition: none;
  }
}

/* Both lockups are always in the markup and CSS picks one, because the choice
   is a media query and a code component cannot re-render on resize without a
   listener. The hidden one costs nothing: it is a base64 string already in the
   chunk, not a second request. */
.Gpm1_KkR2GbBI1RJmrZt {
  display: block;
  flex: none;
}

/* Below 768 the single-line lockup would be 196px of wordmark in a 288px bar,
   so Figma switches to the stacked mark there. */
.LvFkyRkQscJCtH0WKRYB {
  display: none;
  width: 196px;
  aspect-ratio: 196 / 17.6844;
}

.Itwe8mYJxB5a8hE0rQ4v {
  display: block;
  width: 73.81px;
  aspect-ratio: 73.8274 / 29.312;
}

@media (min-width: 768px) {
  .LvFkyRkQscJCtH0WKRYB {
    display: block;
  }

  .Itwe8mYJxB5a8hE0rQ4v {
    display: none;
  }
}

/* The desktop bar is shorter, and Figma steps the lockup down with it. */
@media (min-width: 1280px) {
  .LvFkyRkQscJCtH0WKRYB {
    width: 174.59px;
  }
}

/* The EN / ES segmented control (Figma node 1996-2904 in the design system
   file). Two links in a pill, the current one lifted out on a light chip. */
.KAK2Gn0pP8yr6DeQ7bia {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--na-border-radius-24, 24px);
  background: var(--na-background-ghost-hover, rgba(20, 7, 15, 0.06));
  overflow: hidden;
}

.oqy3adHpXJYavtLv8PHw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--switcher-padding-y, 10px) 16px;
  border-radius: var(--na-border-radius-24, 24px);
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}

.oqy3adHpXJYavtLv8PHw:hover {
  color: var(--na-content-primary-bold, #14070f);
  background: var(--na-color-white-alpha-50-a, rgba(255, 255, 255, 0.5));
}

.hlqvQZZPmX6znANlE5f_,
.hlqvQZZPmX6znANlE5f_:hover {
  background: var(--na-background-secondary, #f9f8f6);
  color: var(--na-content-primary-bold, #14070f);
}

/* Figma draws the 44px pill for the drawer footer, which is the default here.
   A 40px action row is too short for it, so the bar turns it down through
   `--switcher-padding-y` rather than through a second component. */

@media (prefers-reduced-motion: reduce) {
  .oqy3adHpXJYavtLv8PHw {
    transition: none;
  }
}