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

.W8tL9yTskOwEdF9QF4rS {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(
    to bottom,
    var(--na-background-secondary, #f9f8f6),
    var(--na-background-primary-subtle, #f3efe8)
  );
  border-radius: var(--na-border-radius-24, 24px);
  padding: var(--na-spacing-56, 56px) var(--na-spacing-16, 16px);
}

.ugcsHUNkzcyYmQczUU_A {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--na-spacing-64, 64px);
  width: 100%;
  max-width: var(--container-max-width, 1280px);
  margin-inline: auto;
}

._IzHirqSEqMskQQBviVn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--na-spacing-20, 20px);
  width: 100%;
}

.FbGbJblvgWhABykL5ftl {
  margin: 0;
  max-width: 945px;
  font-family: var(--na-font-display, "Inter Tight", "Inter 28", Arial, sans-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--na-content-primary, rgba(20, 7, 15, 0.9));
}

.E5ezcY4OuRrsvsYFw6q5 {
  font-family: var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif);
  font-style: italic;
  letter-spacing: -0.6px;
  /* Clipped to the shared purple gradient (globals.css) rather than a
     flat color - see CLAUDE.md section 10. */
  background-image: var(--na-gradient-emphasis, linear-gradient(213deg, #b5a9ea 18%, #8873de 54%, #2e2e7d 75%, #43425b 95%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Same italic serif run, without the gradient clip - for headings that should
   read as plain text emphasis (`emphasisGradient: false`). */
.iH5zybSBe2uDcJp8pxX8 {
  font-family: var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif);
  font-style: italic;
  letter-spacing: -0.6px;
  color: inherit;
}

/* On mobile the two halves run inline, as in the mobile frame. formatHeading
   puts a space in front of the break, so hiding it here still leaves the words
   apart. */
.ROb1OPTh4xkqdsB3GFh9 {
  display: none;
}

.tK2WgYcGJftGs7KByqtB {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--na-spacing-12, 10px);
  width: 100%;
}

/* `cards` is a props.Slot, and Webflow renders it as a native <slot> fed by a
   single unclassed wrapper <div> that holds every card - so the real DOM here
   is `.grid > slot > div > code-island x N`, not `.grid > card`. Left alone
   that wrapper is one flex item and every card collapses into a single column
   at every breakpoint.

   Collapsing the wrapper with `display: contents` removes it from layout, and
   since Webflow's own <code-island> host is already `display: contents` too,
   each card's `.card` box becomes a direct flex item of `.grid`. That is what
   makes the flex basis in ProblemCard.module.css the thing that actually sizes
   the row. `::slotted()` is the only selector that reaches projected content
   from inside a shadow tree (CLAUDE.md section 3). */
.tK2WgYcGJftGs7KByqtB > slot::slotted(*) {
  display: contents;
}

/* Tablet and up: the stack becomes a wrapping row. Wrapping - rather than a
   fixed column count - is what lets the section take "any number of them",
   which is the annotation on the Figma frame. */
@media (min-width: 768px) {
  .W8tL9yTskOwEdF9QF4rS {
    padding: var(--na-spacing-56, 56px) var(--na-spacing-48, 48px);
  }

  .FbGbJblvgWhABykL5ftl {
    font-size: 42px;
    line-height: 52px;
  }

  .E5ezcY4OuRrsvsYFw6q5 {
    letter-spacing: 0;
  }

  /* Figma sets the two halves as separate lines from tablet up, so the break
     after "training." is deliberate rather than whatever the measure happens
     to produce. */
  .ROb1OPTh4xkqdsB3GFh9 {
    display: inline;
  }

  .tK2WgYcGJftGs7KByqtB {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* Step the shared tag up to Figma's M size - see shared/Tag.module.css. */
@media (min-width: 992px) {
  .YwxkRgwXH7HEoNgnkmB3 {
    --tag-gap: 10px;
    --tag-dot-size: 10px;
    --tag-dot-radius: 3px;
    --tag-font-size: 20px;
    --tag-line-height: 28px;
    --tag-letter-spacing: -0.4px;
  }
}

@media (min-width: 1200px) {
  .W8tL9yTskOwEdF9QF4rS {
    padding: var(--na-spacing-80, 96px) var(--na-spacing-80, 80px);
  }
}

/* Eyebrow tag (Figma "Tag Serif"): a small square dot next to an italic serif
   label. Figma ships it at two sizes, S and M.

   The size is driven by custom properties rather than a React prop, because
   every section so far switches between S and M at its *own* breakpoint
   (Outcomes at 992px, Ecosystem at 1200px) — something a JS prop cannot do.
   Defaults below are size S. A section moves to size M by passing `className`
   to <Tag> and setting these inside its own media query:

     @media (min-width: 992px) {
       .sectionTag {
         --tag-gap: 10px;
         --tag-dot-size: 10px;
         --tag-dot-radius: 3px;
         --tag-font-size: 20px;
         --tag-line-height: 28px;
         --tag-letter-spacing: -0.4px;
       }
     }

   The label is serif italic by default ("Tag Serif"). Figma also uses the same
   tag with a plain sans label inside cards - that is --tag-font-family and
   --tag-font-style, set the same way (see StepCard).

   Note the S values live in the var() fallbacks and are deliberately NOT
   declared on .tag itself — a declaration here would beat an override coming
   from the same element or an ancestor, and the switch would silently do
   nothing. */

._ieooqJhlujimY9scWb3 {
  display: flex;
  align-items: center;
  gap: var(--tag-gap, 8px);
}

.sA2Swnt2I2f1v55bsc1M {
  flex-shrink: 0;
  width: var(--tag-dot-size, 7px);
  height: var(--tag-dot-size, 7px);
  border-radius: var(--tag-dot-radius, 1.5px);
  background: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
}

.wmvIIAw52vFHDRm9ZsjP {
  margin: 0;
  font-family: var(--tag-font-family, var(--na-font-serif, "Tiempos Text", Georgia, "Times New Roman", serif));
  font-style: var(--tag-font-style, italic);
  font-size: var(--tag-font-size, 14px);
  line-height: var(--tag-line-height, 20px);
  letter-spacing: var(--tag-letter-spacing, -0.2px);
  color: var(--na-content-secondary, rgba(20, 7, 15, 0.7));
  white-space: nowrap;
}