/*
  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%);
}

/* One component, two layouts - the same split Figma draws as
   `Menu / Section · … Layout = Panel | Drawer`.

   Mobile-first here means the drawer: a cream card stacked in one column, which
   is what the burger menu shows at every width below 1280. From 1280 up the
   same markup becomes the desktop mega-menu: a glass sheet with the columns
   side by side and the banners in a fixed rail on the right.

   The panel never learns which one it is from the Header - it reads the width
   itself. That is what lets the Header keep a single copy of the content in the
   DOM and simply move it (CLAUDE.md section 3: slot children are separate React
   roots, so there is no prop to pass down anyway).

   `.panel` itself is always a column now - the columns-beside-banners split
   lives on `.section` instead, so the trailing links (see below) can sit as a
   second, always-full-width row underneath that split rather than being
   squeezed into the same row as a third flex item. */
.eUWwmKz62Kw9FOEi1aaX {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  box-sizing: border-box;
  width: 100%;
  padding: var(--na-spacing-16, 16px);
  background: var(--na-background-primary, #f3efe8);
  border-radius: var(--na-border-radius-16, 16px);
}

.sBascVgTqLc179ahFzxt {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  width: 100%;
}

/* The optional bottom rows - Figma's "Content Hub" / "About us" links under
   the For Business panel. Same visual language as `.sectionLink` (it is
   `.sectionLink` plus the rule above it), just not nested in a column. */
.cKgSu5Z1vhXD3LHcWPay {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.vUArU6s8lqFBxmnu6aFz {
  display: block;
  margin-inline: -8px;
  padding: var(--na-spacing-8, 8px);
  border-radius: var(--na-border-radius-8, 8px);
  border-top: 1px solid var(--na-border-primary, rgba(20, 7, 15, 0.2));
  font-family: var(--na-font-display, "Inter Tight", "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

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

.m9gW8DPvFwsggLY4jz8d {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  min-width: 0;
}

.MvLZX50GLW3PHufTUQZF {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  min-width: 0;
}

.kkOGb94iPj5UgWeJb2Dw {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  min-width: 0;
}

/* Stacked, the two columns need the rule between them that the side-by-side
   layout gets for free from the gap. */
/* :not(.columnEmpty) on the first column, not just the second - an empty
   column stays in the DOM (see .columnEmpty) so a plain `.column + .column`
   would draw this rule off an invisible sibling. */
.kkOGb94iPj5UgWeJb2Dw:not(.iCioEKJnEzFEFS68h0ZP) + .kkOGb94iPj5UgWeJb2Dw {
  padding-top: var(--na-spacing-16, 16px);
  border-top: 1px solid var(--na-border-secondary, rgba(20, 7, 15, 0.1));
}

/* Kept in the tree - see the comment in MenuPanel.tsx - so a column whose
   links live in the slot can still be found once it fills up. */
.iCioEKJnEzFEFS68h0ZP {
  display: none;
}

.z8dD6UzgUK_DBed2G2xk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The heading of a column or of the whole section. It is a link often enough
   that the hover wash lives here rather than on a modifier. */
.fSgOpt1GqGLuSrxViyZg {
  display: flex;
  align-items: flex-start;
  gap: var(--na-spacing-8, 8px);
  margin-inline: -8px;
  padding: var(--na-spacing-8, 8px);
  border-radius: var(--na-border-radius-8, 8px);
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

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

.jiuCTcvFtlwEkwe83TL4 {
  font-family: var(--na-font-display, "Inter Tight", "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}

.G07EIFuvflhu8WbH6q04 {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

/* The supporting line under a heading. */
.yqkwJHJMQV0AN8McVjLf {
  margin: 0;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}

.CqtVSzYsLCZrvue5vnCq {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  min-width: 0;
}

/* "Products", "Resources" - the small serif-italic label naming a list. */
.ajVbflNIKJgNwcb8xaJ6 {
  margin: 0;
  font-family: var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif);
  font-style: italic;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}

/* Desktop only (see the 1280px block below): 8px on top of the grid's own
   16px row-gap makes 24px, matching `.column`'s heading-to-group gap. Nothing
   below the label needs the same treatment - the group's own 16px gap already
   matches the items grid's row-gap 1:1. */
@media (min-width: 1280px) {
  .ajVbflNIKJgNwcb8xaJ6 {
    margin-top: 8px;
  }
}

/* A column with nothing in it at all - the whole group is dropped rather than
   left to contribute its gap. */
.DZPLzCeo6WOWUTof4AKP {
  display: none;
}

/* The Links slot, when a designer has filled it with Menu Link components
   instead of typing the Links field.

   Below 1280px this is a flex list like `.links` below it, and the "first
   divider" problem - nothing here can select "the first slotted child",
   since the slot's assigned node is the single unclassed wrapper Webflow
   supplies and ::slotted cannot reach past it (CLAUDE.md section 3b) - is
   solved by pulling that wrapper up by exactly one divider plus its space and
   clipping it, so the first rule lands outside the clip.

   From 1280px the desktop block below turns every ancestor down to this
   wrapper into `display: contents` (CLAUDE.md section 3's collapsing trick),
   so each Menu Link becomes a direct child of the `.columns` grid instead -
   which is what lets column 1's row N sit in the same grid row as column 2's
   row N, sized to whichever is taller. Clipping can't reach a Menu Link once
   it's unwrapped like that, so the "first divider" problem gets solved a
   different way there: MenuPanel.tsx's placement effect zeroes
   `--menu-link-divider-width` directly on the first one. */
.uafW_9UBnswYREQ6kKxl {
  --menu-link-space: var(--na-spacing-16, 16px);
  margin-inline: -8px;
  min-width: 0;
  overflow: hidden;
}

.uafW_9UBnswYREQ6kKxl > slot::slotted(*) {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  margin-top: calc(-1px - var(--na-spacing-16, 16px));
}

/* Kept in the tree while empty so useSlotFilled has a slot to watch. */
.UGyIEzaqCkPqDqkCQ00l {
  display: none;
}

.IUr8yGPgxiYelMsWAPGv {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  min-width: 0;
}

/* One row of the list. The negative inline margin is what lets the hover wash
   reach past the text without indenting the column: the wrapper steps 8px out
   and the link gives it straight back as padding.

   The divider lives here rather than on the link itself. Drawn inside the <a>
   it was part of the hover target, so the wash came on while the cursor was
   still on the rule between two items - lines and hoverable items have to be
   separate boxes. */
.MhIniNgHxXrNRil_JHsB {
  margin-inline: -8px;
  min-width: 0;
}

/* Every item but the first carries the rule above it, so adding or removing a
   line in the props never leaves a stray divider at either end. */
.D0OCA4O4gHZKjlzHJAkq {
  padding-top: var(--na-spacing-16, 16px);
  border-top: 1px solid var(--na-border-secondary, rgba(20, 7, 15, 0.1));
}

.BrMmyCiblviKkVJnNmkw {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.h0E5VbhPPyKKZXLS24j7 {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 240px;
  padding: var(--na-spacing-24, 24px);
  border-radius: var(--na-border-radius-16, 16px);
  overflow: hidden;
}

/* The campaign image, when there is one, covers the flat theme colour rather
   than replacing it - so a transparent PNG still lands on the brand fill. */
.JTUGdqf6AeECDsilEBTg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.LepqOnFoR9695cwwFrJp {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--na-spacing-24, 24px);
  min-width: 0;
}

.LNqDMz_MCQEfDxbzHjBQ {
  display: flex;
  flex-direction: column;
  gap: var(--na-spacing-16, 16px);
  min-width: 0;
}

.gxQyf_CE8alXXHlpqU6E {
  margin: 0;
  font-family: var(--na-font-display, "Inter Tight", "Inter 28", Arial, sans-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--na-content-inverse-primary-bold, #f9f8f6);
}

/* The italic half of the title, marked with asterisks in the copy - the same
   convention every section heading uses (CLAUDE.md section 10). */
.DpGzn25UmKGHWh9Tucz7 {
  font-family: var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.4px;
}

.NHlnHTRG9BblHjwZc_qP {
  display: inline;
}

.TIKdcA9O9WxXsb1zufiA {
  margin: 0;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--na-content-inverse-secondary, rgba(249, 248, 246, 0.7));
}

.hiCIOPpBjlXM3Yv9rqmg {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--na-border-radius-10, 10px);
  background: var(--na-background-primary, #f3efe8);
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  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;
}

.BIPm_XtXcZThvHHvOqKl {
  background: var(--brand-nebius-academy-purple, #835fc9);
}

.BWABlmJKirGRiE2JmlJs {
  background: var(--na-content-primary-bold, #14070f);
}

.EzWwSppJJvQnp9wqNimc {
  background: linear-gradient(90deg, #18227c 0%, #514eba 37%, #af6ed7 75%, #f3cff2 100%);
}

/* Tablet - 768 to 1279, the drawer at its two wider sizes. Still the stacked
   drawer everywhere else, but there is room for the banners to sit beside each
   other instead of running one under the other and pushing the CTAs off the
   fold. Closed above 1279 because the desktop rail below stacks them again in
   its 380px column. */
@media (min-width: 768px) and (max-width: 1279px) {
  .BrMmyCiblviKkVJnNmkw {
    flex-direction: row;
  }

  /* Equal halves regardless of how much copy each one carries; `min-width: 0`
     stops a long title from widening its own banner past its share. */
  .h0E5VbhPPyKKZXLS24j7 {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Desktop: the mega-menu sheet. 1280 rather than one of the project's usual
   breakpoints because that is where the header itself swaps the nav for the
   burger, and the two have to change together. */
@media (min-width: 1280px) {
  .eUWwmKz62Kw9FOEi1aaX {
    gap: 24px;
    padding: var(--na-spacing-24, 24px);
    background: var(--na-background-glass, rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: var(--na-border-radius-8, 8px);
    /* A long menu should scroll inside the sheet rather than run off the
       bottom of the screen. 102px is the header block above it. */
    max-height: calc(100vh - 102px);
    overflow-y: auto;
  }

  .sBascVgTqLc179ahFzxt {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }

  .m9gW8DPvFwsggLY4jz8d {
    flex: 1 1 0;
    gap: var(--na-spacing-24, 24px);
  }

  /* A real grid, not just two flex columns side by side - so that column 1's
     row N and column 2's row N can share a grid row and stretch to whichever
     is taller, instead of each column stacking its own rows to whatever
     height its own copy happens to need. Getting there means collapsing
     every box between here and an actual row - `.column`, `.group`, the
     links wrapper - with `display: contents` (CLAUDE.md section 3), so
     their children end up as direct items of *this* grid. Row 1 is each
     column's heading, row 2 its label, row 3 upward its link rows - all
     placed by MenuPanel.tsx via inline `gridColumn`/`gridRow`, since the
     column with more links can't be known at build time and a native
     `<slot>`'s assigned elements are outside React's reach anyway (the
     effect there sets it directly on the DOM). */
  .MvLZX50GLW3PHufTUQZF {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--na-spacing-24, 24px);
    /* Matches `.group` and `.links`' own gap below row 1 - see the 8px added
       to `.groupLabel` above for the one gap that isn't 16px. */
    row-gap: var(--na-spacing-16, 16px);
  }

  .kkOGb94iPj5UgWeJb2Dw:not(.iCioEKJnEzFEFS68h0ZP) {
    display: contents;
  }

  .CqtVSzYsLCZrvue5vnCq {
    display: contents;
  }

  .uafW_9UBnswYREQ6kKxl,
  .uafW_9UBnswYREQ6kKxl > slot::slotted(*),
  .IUr8yGPgxiYelMsWAPGv {
    display: contents;
  }

  /* Replaces the -8px bleed `.linksSlot`'s own margin-inline gave the whole
     list below 1280px - that box is gone up here (CLAUDE.md section 1), so
     MenuLink.module.css's `.row` reads this custom property instead, the
     same way it already reads `--menu-link-space` across the shadow
     boundary. */
  .uafW_9UBnswYREQ6kKxl {
    --menu-link-row-bleed: -8px;
  }

  .BrMmyCiblviKkVJnNmkw {
    flex: none;
    align-self: stretch;
    width: 380px;
  }

  .h0E5VbhPPyKKZXLS24j7 {
    flex: 1 1 0;
  }
}

/* One row of a menu link list, shared by the two panels' own text-driven lists
   and by the `Menu Link` component a designer drops into a Links slot. The
   three used to carry their own copy of these rules; one row looks the same
   wherever it is, so it is defined once and the *spacing between* rows - which
   genuinely differs per panel - stays with each panel instead.

   A shared .module.css is safe here for the same reason NoiseOverlay's is: the
   bundler folds an imported stylesheet into every chunk that imports it, and
   CSS Module names are per-file, so nothing collides. */

.NZJhwBXR2TC751A52xKd {
  display: block;
  padding: var(--na-spacing-8, 8px);
  border-radius: var(--na-border-radius-8, 8px);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

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

.X1nxbB1azdbknBLLGSmA {
  display: flex;
  align-items: center;
  gap: var(--na-spacing-8, 8px);
  min-width: 0;
}

.BeuSX5V5H8XC_VUkqsMr {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--na-content-primary-bold, #14070f);
}

.Hc7nHAJhF14ObP8hlTzg {
  flex: none;
  padding: var(--na-spacing-4, 4px) var(--na-spacing-12, 12px);
  border-radius: 6px;
  background: linear-gradient(90deg, #18227c 0%, #514eba 37%, #af6ed7 75%, #f3cff2 100%);
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -0.2px;
  color: var(--na-content-inverse-primary-bold, #f9f8f6);
  white-space: nowrap;
}

.RpgXiNbspYslT2DUb7Jg {
  display: block;
  margin-top: 4px;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}

/* Three identical tiles stacked - the site's own recipe (see NoiseOverlay.tsx),
   not something to simplify to one: stacking the same tile compounds the
   blend into visible grain, where a single layer reads as almost nothing. */
/* No z-index here on purpose. A positioned element with z-index:0/auto still
   paints after in-flow, non-positioned content in the same stacking context
   (CSS 2.1 Appendix E) - so as long as the real content sitting over this
   overlay is itself `position: relative` (as every card content wrapper in
   this project already is) and comes later in the DOM, tree order alone keeps
   the grain under the copy. A fixed z-index here would instead force the
   overlay in front of any caller that isn't giving its content a *higher*
   one, which is one more number every caller would have to know to match. */
.VjIzBc5zC6slMhcdqEWS {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.YqJvn0ptuHfTjC_wXJLP {
  position: absolute;
  inset: 0;
  background-color: var(--na-background-secondary, #f9f8f6);
  background-image: var(--noise-url);
  background-size: var(--noise-size, 256px);
  mix-blend-mode: color-burn;
}