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

/* Sizing lives on `.card`, not on `:host`: Webflow's host is a <code-island>
   that is already `display: contents`, so width or flex set on :host is
   discarded. ProblemSection collapses its slot wrapper the same way, which is
   what makes `.card` a direct flex item of the section's grid - so the widths
   below are the ones that actually lay the row out (CLAUDE.md sections 1 and 3). */
.x_uKDl0mnA8A9gdVY2YR {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 320px;
  padding: var(--na-spacing-24, 24px);
  overflow: hidden;
  border-radius: var(--na-border-radius-20, 20px);
}

.bCJ4FElgzMP5mDw5Mw09 {
  background: var(--na-background-inverse, rgba(20, 7, 15, 0.95));
}

.YuOyYaDH0Y1CAtVWhBvN {
  background: var(--na-background-secondary, #f9f8f6);
}

/* Figma node 21245-5945: a solid lavender card, the figure fading from black
   into the card color rather than sitting flat, and the caption promoted to
   full-strength black instead of the usual secondary grey. */
.nTjXajxfg0b4CiNgYg0a {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
    var(--na-background-tint-purple, #d3d3fa);
}

/* An uploaded image sits behind everything, edge to edge - the tone still
   picks the text colors, so pick an image the chosen tone still reads over. */
.IiD0VPdeVOWLnUAwTSAl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The actual copy. `position: relative` is load-bearing, not decorative: a
   positioned element at z-index 0/auto still paints after ordinary in-flow
   content in the same stacking context, so without this the background image
   - painted later in the DOM - would land on top of the text instead of
   behind it (CSS 2.1 Appendix E). Layout-wise this is just `.card` minus the
   background image. */
.dSoSbxO0itW3BjHUDcFJ {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.NleptiSeyUDkFKa2ic8v {
  margin: 0;
  width: 100%;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: -0.2px;
  overflow-wrap: break-word;
}

.bCJ4FElgzMP5mDw5Mw09 .NleptiSeyUDkFKa2ic8v {
  color: var(--na-content-inverse-tertiary, rgba(249, 248, 246, 0.5));
}

.YuOyYaDH0Y1CAtVWhBvN .NleptiSeyUDkFKa2ic8v {
  color: var(--na-content-tertiary, rgba(20, 7, 15, 0.5));
}

.nTjXajxfg0b4CiNgYg0a .NleptiSeyUDkFKa2ic8v {
  color: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
}

.DaaAyheNl_Ikq80HomM1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--na-spacing-12, 12px);
  width: 100%;
  overflow: hidden;
}

/* Figma's line-height here is deliberately shorter than the type size - it is
   what tucks the numeral down against its caption. */
._ZwH58tfwZffGokIY3Xl {
  margin: 0;
  width: 100%;
  font-family: var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 80px;
  line-height: 58px;
}

.bCJ4FElgzMP5mDw5Mw09 ._ZwH58tfwZffGokIY3Xl {
  color: var(--na-content-inverse-primary, rgba(249, 248, 246, 0.9));
}

.YuOyYaDH0Y1CAtVWhBvN ._ZwH58tfwZffGokIY3Xl {
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
}

.nTjXajxfg0b4CiNgYg0a ._ZwH58tfwZffGokIY3Xl {
  background-image: var(--na-gradient-stat-fade);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.RZP5krs3jOOILfHNIwPW {
  width: 100%;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.2px;
  overflow-wrap: break-word;
}

.bCJ4FElgzMP5mDw5Mw09 .RZP5krs3jOOILfHNIwPW {
  color: var(--na-content-inverse-secondary, rgba(249, 248, 246, 0.7));
}

.YuOyYaDH0Y1CAtVWhBvN .RZP5krs3jOOILfHNIwPW {
  color: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
}

.nTjXajxfg0b4CiNgYg0a .RZP5krs3jOOILfHNIwPW {
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
}

.lw7JzXW170ltm4NunSnS {
  margin: 0;
  width: 100%;
  font-family: var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 38px;
  overflow-wrap: break-word;
}

.bCJ4FElgzMP5mDw5Mw09 .lw7JzXW170ltm4NunSnS {
  color: var(--na-content-inverse-secondary, rgba(249, 248, 246, 0.7));
}

.YuOyYaDH0Y1CAtVWhBvN .lw7JzXW170ltm4NunSnS,
.nTjXajxfg0b4CiNgYg0a .lw7JzXW170ltm4NunSnS {
  color: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
}

.s271JkQqeXsrRhF8TJLs {
  width: 100%;
  font-family: var(--na-font-sans, "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  overflow-wrap: break-word;
}

.bCJ4FElgzMP5mDw5Mw09 .s271JkQqeXsrRhF8TJLs {
  color: var(--na-content-inverse-primary, rgba(249, 248, 246, 0.9));
}

.YuOyYaDH0Y1CAtVWhBvN .s271JkQqeXsrRhF8TJLs,
.nTjXajxfg0b4CiNgYg0a .s271JkQqeXsrRhF8TJLs {
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
}

.RZP5krs3jOOILfHNIwPW p,
.s271JkQqeXsrRhF8TJLs p {
  margin: 0;
}

.RZP5krs3jOOILfHNIwPW p + p,
.s271JkQqeXsrRhF8TJLs p + p {
  margin-top: 0.75em;
}

/* From here the grid is a wrapping row, so each card stops being full width
   and starts claiming a share of it instead. Figma's two widths are 287 and
   526 at a 1280px content box; expressing them as flex basis + grow keeps that
   ratio while letting any number of cards fill the row - which is the point of
   the section (the cards are a slot, so the count is the designer's call). */
@media (min-width: 768px) {
  .ve5AI6REOfRZhW8Wu7YG {
    flex: 1 1 287px;
    width: auto;
  }

  .rocdLCQIMPfeeKSNBNUI {
    flex: 1.83 1 526px;
    width: auto;
  }
}

@media (min-width: 1200px) {
  .x_uKDl0mnA8A9gdVY2YR {
    height: 400px;
  }

  .s271JkQqeXsrRhF8TJLs {
    font-size: 18px;
  }
}

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