/* GenesysLabs.ai — main.css
   Dark premium (master v4 §6.0). Fonts: Inter 400/500/600 + IBM Plex Mono 400/500 only (D13).
   Motion: 150ms colour/background/border/opacity on hover/focus (§6.5) plus the opt-in motion layer at the end of this file (D24).
   Layers: reset, tokens, base, components, pages, motion. */
@layer reset, tokens, base, components, pages, motion;

/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  /* Browser defaults are 700. Nothing may exceed 600. */
  h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: var(--w-600); }
  table { border-collapse: collapse; border-spacing: 0; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* surfaces (master 6.0) */
    --c-ink: #000000;          /* page background */
    --c-ink-soft: #000000;     /* raised surface: pure black, set apart by a hairline (obsidian, D38) */
    --c-surface-dark: #000000; /* footer, CTA band: pure black, hairline above */
    --c-fill: rgb(240 240 250 / 0.05);      /* table headers, key rows, callouts: a tint of the ink, never a grey */
    --c-fill-card: rgb(240 240 250 / 0.03); /* cards at rest; 0.06 on hover */
    --c-paper: #ffffff;        /* text */
    --c-muted: #818181;        /* captions, meta; only on --c-ink and --c-ink-soft */

    /* text on dark */
    --fg: #ffffff;
    --fg-soft: #f0f0fa;
    --a1: 0.72; --a2: 0.64; --a3: 0.4;  /* ink alpha tiers: body, secondary, dimmed (dimmed is never used for text that must be read) */
    --ink-82: rgb(240 240 250 / var(--a1));
    --ink-72: rgb(240 240 250 / var(--a1));
    --ink-64: rgb(240 240 250 / var(--a2)); /* floor for any text */

    /* rules on dark */
    --rule: rgb(240 240 250 / 0.16);
    --rule-strong: rgb(240 240 250 / 0.42);

    /* tier fills */
    --c-tier-pro: #000000;
    --c-tier-ent: #5b3e8f;
    --c-nvidia: #4a4a4c;
    --c-nvidia-row: #6b6b6d;

    /* category bands: light tint, black text */
    --c-band-ai: #d6eaf8;
    --c-band-hpc: #d9ead3;
    --c-band-pro: #fce5cd;
    --c-band-eng: #e6d6f2;
    --c-band-xr: #fbd6e3;
    --c-band-services: #fdebd0;
    --c-band-tech: #d9d9f2;
    --c-band-neutral: #f2f2f2;

    --c-error: #ff8a9b;

    /* type */
    --f-sans: "Inter", "Inter Fallback", system-ui, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, monospace;
    --w-400: 400;
    --w-500: 500;
    --w-600: 600;
    --fs-display: clamp(2.75rem, 6vw, 5.5rem);
    --fs-h1: clamp(2.25rem, 4.4vw, 3.75rem);
    --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
    --fs-h3: 1.375rem;
    --fs-h4: 1.0625rem;
    --fs-lead: clamp(1.0625rem, 1.25vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;
    --track-eyebrow: 0.14em;

    /* layout */
    --container-max: 1280px;
    --container-pad: 24px;
    --section-y: 96px;
    --block-gap: 32px;
    --prose-max: 72ch;
    --hdr-h: 72px;

    /* motion */
    --t: 150ms ease-out;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* stacking */
    --z-header: 60;
    --z-skip: 70;
  }
  @media (max-width: 1023px) { :root { --section-y: 64px; } }
  @media (max-width: 767px) {
    :root { --container-pad: 16px; --section-y: 48px; --hdr-h: 56px; }
  }
  @media (prefers-contrast: more) {
    :root { --ink-82: #f0f0fa; --ink-72: #f0f0fa; --ink-64: #e0e0ea; --rule: rgb(255 255 255 / 0.5); --rule-strong: rgb(255 255 255 / 0.7); --c-muted: #b5b5b5; }
  }
}

/* ---------- base ---------- */
@layer base {
  html { background: var(--c-ink); color: var(--ink-82); }
  body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--c-ink);
    font-family: var(--f-sans);
    font-weight: var(--w-400);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-synthesis: none;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  main { flex: 1 0 auto; }
  ::selection { background: var(--fg); color: var(--c-ink); }

  h1, h2, h3, h4 { color: var(--fg); font-family: var(--f-sans); text-wrap: balance; }
  h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.025em; }
  h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; }
  h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
  h4 { font-size: var(--fs-h4); line-height: 1.35; }
  p, li { text-wrap: pretty; }
  strong, b { color: var(--fg); }
  em { font-style: italic; }
  code, .mono { font-family: var(--f-mono); font-size: 0.875em; font-weight: var(--w-400); }

  a:where(.prose a, .text-link, .spec a, .lead a, .lane a, .callout a, .note a, .card p a) {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--t);
  }
  a:where(.prose a, .text-link, .spec a, .lead a, .lane a, .callout a, .note a, .card p a):hover { text-decoration-color: var(--fg); }

  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* anchors must clear the sticky header */
  [id] { scroll-margin-top: calc(var(--hdr-h) + 24px); }

  .skip {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: var(--z-skip);
    padding: 12px 16px;
    background: var(--fg);
    color: var(--c-ink);
    font-size: var(--fs-small);
    font-weight: var(--w-600);
    transform: translateY(-200%);
  }
  .skip:focus { transform: none; }

  .vh {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }

  .container { max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto; padding-inline: var(--container-pad); }
  .section { padding-block: var(--section-y); }
  .section--raised { background: var(--c-ink-soft); border-block: 1px solid var(--rule); }
  .section--rule { border-top: 1px solid var(--rule); }
  .prose { max-width: var(--prose-max); }
  .prose > * + * { margin-top: 1em; }
  .stack > * + * { margin-top: var(--block-gap); }
  .stack-s > * + * { margin-top: 16px; }

  .label, .eyebrow {
    font-family: var(--f-mono);
    font-weight: var(--w-500);
    font-size: var(--fs-label);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    line-height: 1.4;
  }
  .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-82); max-width: var(--prose-max); }
  .tagline { font-size: 0.9375rem; line-height: 1.4; font-weight: var(--w-600); font-style: italic; color: var(--fg-soft); }
  .small { font-size: var(--fs-small); line-height: 1.55; }
  .muted { color: var(--c-muted); }
  .page-head { padding-block: calc(var(--section-y) * 0.6) 24px; }
  .page-head + .section { padding-top: calc(var(--section-y) * 0.5); }
  .page-head .tagline, .page-head .lead { margin-top: 16px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
  }
  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
  }
}

/* ---------- components ---------- */
@layer components {

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: 44px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.9375rem; line-height: 1.2; font-weight: var(--w-600);
    text-align: center;
    transition: background-color var(--t), color var(--t), border-color var(--t);
  }
  .btn--primary { background: var(--fg); color: var(--c-ink); border-color: var(--fg); }
  .btn--primary:hover { background: var(--fg-soft); border-color: var(--fg-soft); color: var(--c-ink); }
  .btn--secondary { background: transparent; color: var(--fg); border-color: var(--rule-strong); }
  .btn--secondary:hover { background: var(--fg); color: var(--c-ink); border-color: var(--fg); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn--sm { min-block-size: 40px; padding: 8px 16px; font-size: var(--fs-small); }

  /* header: horizontal strip (master 7.1) */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    block-size: var(--hdr-h);
    background: rgb(0 0 0 / 0.92);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(12px);
    border-bottom: 1px solid var(--rule);
  }
  .hdr { display: flex; align-items: center; gap: 24px; block-size: 100%; }
  .brand { display: inline-flex; align-items: center; min-block-size: 44px; flex: none; }
  .brand img { block-size: 28px; inline-size: auto; }
  .nav { margin-inline-start: auto; block-size: 100%; }
  .nav__list { display: flex; align-items: stretch; block-size: 100%; gap: 4px; }
  .nav__item { display: flex; align-items: stretch; position: static; }
  .nav__link {
    position: relative;
    display: inline-flex; align-items: center;
    padding-inline: 12px;
    font-size: var(--fs-small); font-weight: var(--w-500); line-height: 1.2;
    color: var(--ink-82);
    transition: color var(--t);
  }
  .nav__link::after {
    content: ""; position: absolute; inset-inline: 12px; inset-block-end: -1px;
    block-size: 2px; background: transparent;
  }
  .nav__item.is-active > .nav__link { color: var(--fg); }
  .nav__item.is-active > .nav__link::after { background: var(--fg); }
  .nav__item:hover > .nav__link { color: var(--fg); }
  .nav__item.has-panel > .nav__link { padding-inline-end: 4px; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 28px; color: var(--ink-72);
    transition: color var(--t);
  }
  .nav__item:hover > .nav__toggle, .nav__toggle:focus-visible { color: var(--fg); }
  .nav__toggle svg { inline-size: 10px; block-size: 10px; }
  .nav__item.is-open > .nav__toggle svg { transform: rotate(180deg); }
  .nav__cta { display: flex; align-items: center; margin-inline-start: 12px; }

  .nav__panel {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    display: none;
    background: var(--c-ink-soft);
    border-bottom: 1px solid var(--rule-strong);
    padding-block: 32px 40px;
  }
  .nav__item.is-open > .nav__panel { display: block; }
  @media (hover: hover) and (min-width: 768px) {
    .nav__item.has-panel:hover > .nav__panel { display: block; }
  }
  .panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 48px; }
  .panel__group .group-label + ul { margin-top: 12px; }
  .panel__link {
    display: block; padding: 8px 0;
    font-size: 0.9375rem; font-weight: var(--w-500); color: var(--ink-82);
    transition: color var(--t);
  }
  .panel__link:hover, .panel__link:focus-visible { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
  .nav-burger { display: none; }
  @media (min-width: 768px) { .nav__link, .nav__cta .btn { white-space: nowrap; } }

  /* glass dropdowns (D38): the header blur sits on a pseudo-element so the open panel can blur the page behind it,
     and each dropdown link shows its own greyscale photo (assets/img/menu-<key>.webp) behind a dark overlay that keeps labels at 4.5:1 or better. */
  .panel__glass { display: none; }
  @media (min-width: 768px) {
    .site-header { background: rgb(0 0 0 / 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
    .nav__panel { background: rgb(0 0 0 / 0.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
      border-block-end: 1px solid var(--rule-strong); overflow: hidden; isolation: isolate; }
    .nav__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgb(240 240 250 / 0.07), transparent 45%); }
    .panel__glass { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .panel__img { position: absolute; inset: -48px; background-size: cover; background-position: center; filter: blur(9px) brightness(0.95); opacity: 0; transform: scale(1.06);
      transition: opacity 0.55s var(--ease), transform 1.2s var(--ease); }
    .panel__img.is-active { opacity: 0.9; transform: scale(1); }
    .panel__glass::after { content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.88) 49%, rgb(0 0 0 / 0.3) 72%, rgb(0 0 0 / 0.08)), linear-gradient(180deg, rgb(0 0 0 / 0.25), transparent 40%); }
    .panel__grid { position: relative; z-index: 1; }
    .nav__panel .panel__link { transition: color var(--t), opacity 0.35s var(--ease), transform 0.35s var(--ease); }
    .nav__panel[data-active] .panel__link:not(.is-active) { opacity: 0.85; }
    .nav__panel .panel__link.is-active { color: var(--fg); transform: translateX(4px); }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav__panel { background: rgb(0 0 0 / 0.94); } .site-header { background: rgb(0 0 0 / 0.92); } }
  @media (prefers-reduced-transparency: reduce) { .nav__panel { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header { background: #000; } .site-header::before, .panel__glass { display: none !important; } }
  @media (prefers-reduced-motion: reduce) { .panel__img, .nav__panel .panel__link { transition: none; transform: none; } }

  /* 768-1079px: the strip needs ~1030px on one row, so the CTA moves up beside the logo and the links take a second row. No copy changes, nothing hidden. */
  @media (min-width: 768px) and (max-width: 1079px) {
    :root { --hdr-h: 101px; }
    .site-header { block-size: auto; }
    .hdr { flex-wrap: wrap; row-gap: 0; block-size: auto; }
    .brand { min-block-size: 56px; }
    .nav { flex: 1 0 100%; margin-inline-start: 0; block-size: 44px; }
    .nav__list { border-top: 1px solid var(--rule); }
    .nav__item:first-child { margin-inline-start: -12px; }
    .nav__cta { position: absolute; inset-block-start: 8px; inset-inline-end: var(--container-pad); margin: 0; }
  }

  /* collapse to the full-screen overlay at master's 768 breakpoint */
  @media (max-width: 767px) {
    .nav-burger {
      display: inline-flex; align-items: center; justify-content: center;
      inline-size: 44px; block-size: 44px; margin-inline-start: auto;
      color: var(--fg);
    }
    .burger, .burger::before, .burger::after {
      display: block; inline-size: 22px; block-size: 2px; background: currentColor; content: ""; position: relative;
    }
    .burger::before { position: absolute; inset-block-start: -7px; }
    .burger::after { position: absolute; inset-block-start: 7px; }
    .nav-burger[aria-expanded="true"] .burger { background: transparent; }
    .nav-burger[aria-expanded="true"] .burger::before { inset-block-start: 0; transform: rotate(45deg); }
    .nav-burger[aria-expanded="true"] .burger::after { inset-block-start: 0; transform: rotate(-45deg); }

    .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #000; }
    .nav {
      position: fixed; inset: var(--hdr-h) 0 0 0; margin: 0; block-size: auto;
      background: var(--c-ink);
      overflow-y: auto; overscroll-behavior: contain;
      display: none;
      padding: 24px var(--container-pad) 24px;
    }
    html.nav-open { overflow: hidden; }
    html.nav-open .nav { display: flex; flex-direction: column; }
    html:not(.js) .nav { position: static; display: block; padding: 0; background: transparent; }
    html:not(.js) .site-header { block-size: auto; position: static; }
    html:not(.js) .hdr { flex-wrap: wrap; padding-block: 8px; }
    html:not(.js) .nav-burger { display: none; }

    .nav__list { flex-direction: column; block-size: auto; gap: 0; flex: 1 0 auto; }
    .nav__item { flex-direction: column; border-bottom: 1px solid var(--rule); padding-block: 12px; }
    .nav__link { padding: 4px 0; font-size: var(--fs-h4); font-weight: var(--w-600); color: var(--fg); }
    .nav__link::after { display: none; }
    .nav__item.is-active > .nav__link { text-decoration: underline; text-underline-offset: 6px; }
    .nav__toggle { display: none; }
    .nav__panel {
      position: static; display: block; background: transparent; border: 0; padding: 4px 0 0 0;
    }
    .panel__grid { display: block; }
    .panel__group + .panel__group { margin-top: 16px; }
    .panel__link { padding: 8px 0 8px 12px; color: var(--ink-82); }
    .nav__cta { position: sticky; inset-block-end: 0; margin: 24px calc(var(--container-pad) * -1) 0; padding: 16px var(--container-pad) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--c-ink); border-top: 1px solid var(--rule); }
    .nav__cta .btn { inline-size: 100%; }
  }

  /* group label (master 7.6) */
  .group-label {
    display: block;
    font-family: var(--f-mono); font-weight: var(--w-500);
    font-size: var(--fs-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; line-height: 1.4;
    color: var(--c-muted);
    padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong);
  }

  /* tier badge (7.4) and category band (7.5) */
  .tier, .band {
    display: flex; align-items: center;
    min-block-size: 28px; padding: 6px 8px;
    font-family: var(--f-mono); font-weight: var(--w-500);
    font-size: var(--fs-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; line-height: 1.2;
  }
  .tier { color: #fff; }
  .tier--pro { background: var(--c-tier-pro); border: 1px solid var(--rule-strong); }
  .tier--ent { background: var(--c-tier-ent); border: 1px solid var(--c-tier-ent); }
  .band { color: #000; }
  .band--ai { background: var(--c-band-ai); }
  .band--hpc { background: var(--c-band-hpc); }
  .band--pro { background: var(--c-band-pro); }
  .band--eng { background: var(--c-band-eng); }
  .band--xr { background: var(--c-band-xr); }
  .band--services { background: var(--c-band-services); }
  .band--tech { background: var(--c-band-tech); }
  .band--neutral { background: var(--c-band-neutral); }
  .band--industries { background: var(--c-band-neutral); }

  /* link line (7.10) */
  .link-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.9375rem; font-weight: var(--w-600); color: var(--fg); }
  .link-line svg { inline-size: 14px; block-size: 14px; flex: none; align-self: center; }
  .link-line a { color: var(--fg); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--t); }
  .link-line a:hover { text-decoration-color: var(--fg); }
  .link-line .sep { color: var(--c-muted); }

  /* spec table (7.7) */
  .table-wrap { inline-size: 100%; }
  .spec {
    inline-size: 100%;
    border: 1px solid var(--rule-strong);
    font-size: var(--fs-small); line-height: 1.55;
  }
  .spec th, .spec td { text-align: start; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--rule); }
  .spec thead th { background: var(--c-fill); color: var(--fg); border-top: 0; }
  .spec tbody th { color: var(--fg); inline-size: 28%; }
  .spec td { color: var(--ink-82); }
  .spec--3 tbody th { inline-size: 18%; }
  .spec td .mono, .spec td code { color: var(--fg-soft); }
  @media (max-width: 767px) { .spec td:empty::before { content: none !important; } }
  .spec caption { text-align: start; padding-bottom: 8px; color: var(--c-muted); font-size: var(--fs-small); caption-side: top; }
  .spec--tint thead th { background: var(--tint, var(--c-band-neutral)); color: #000; }
  @media (max-width: 767px) {
    .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; inline-size: 100%; }
    .spec thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .spec tbody tr { border-top: 1px solid var(--rule-strong); padding-block: 8px; }
    .spec tbody tr:first-child { border-top: 0; }
    .spec th, .spec td { border: 0; padding: 4px 16px; inline-size: 100%; }
    .spec tbody th { inline-size: 100%; }
    .spec td[data-label]::before {
      content: attr(data-label); display: block;
      font-family: var(--f-mono); font-weight: var(--w-500); font-size: var(--fs-label);
      letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-muted); margin-bottom: 2px;
    }
  }

  /* NVIDIA callout (7.8) */
  .nv-callout { border: 1px solid var(--rule-strong); }
  .nv-callout :is(h3, h4) { padding: 16px 16px 12px; color: var(--fg); font-size: var(--fs-h4); line-height: 1.35; letter-spacing: 0; }
  .nv-callout table { inline-size: 100%; font-size: var(--fs-small); }
  .nv-callout th { background: var(--c-nvidia); color: #fff; text-align: start; padding: 10px 16px; vertical-align: top; inline-size: 28%; border-top: 1px solid rgb(255 255 255 / 0.2); }
  .nv-callout td { background: var(--c-nvidia-row); color: #fff; padding: 10px 16px; vertical-align: top; border-top: 1px solid rgb(255 255 255 / 0.2); }
  @media (max-width: 767px) {
    .nv-callout table, .nv-callout tbody, .nv-callout tr, .nv-callout th, .nv-callout td { display: block; inline-size: 100%; }
    .nv-callout th { border-top: 1px solid rgb(255 255 255 / 0.2); }
    .nv-callout td { border-top: 0; }
  }

  /* lane block (7.9) */
  .lane { padding-block: var(--block-gap); border-top: 1px solid var(--rule); }
  .lane:first-of-type { border-top: 0; }
  .lane > * + * { margin-top: 12px; }
  .lane > :is(h2, h3) { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
  .lane--ruled { padding-inline-start: 20px; border-inline-start: 2px solid var(--lane-rule, var(--rule-strong)); border-top: 0; }
  .lane__built { font-size: var(--fs-small); color: var(--ink-72); }
  .lane__built strong { font-weight: var(--w-600); }
  .lane ul.bullets { margin-top: 8px; }

  /* bullets */
  ul.bullets { list-style: none; }
  ul.bullets > li { position: relative; padding-inline-start: 20px; margin-top: 8px; }
  ul.bullets > li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 0.7em; inline-size: 5px; block-size: 5px; background: var(--ink-72); border-radius: 50%; }
  ol.steps { list-style: none; counter-reset: s; }
  ol.steps > li { counter-increment: s; position: relative; padding-inline-start: 36px; margin-top: 12px; }
  ol.steps > li::before { content: counter(s) "."; position: absolute; inset-inline-start: 0; font-family: var(--f-mono); font-weight: var(--w-500); color: var(--c-muted); }

  /* card grid (7.11) */
  .cards { display: grid; gap: 24px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  @media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 767px) { .cards { grid-template-columns: 1fr; } }
  .card {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 24px; background: var(--c-fill-card);
    border: 1px solid var(--rule);
    transition: border-color var(--t), background-color var(--t);
  }
  .card:hover, .card:focus-within { border-color: var(--rule-strong); background: rgb(240 240 250 / 0.06); }
  .card--static:hover { border-color: var(--rule); background: var(--c-fill-card); }
  .card h3 { font-size: 1.1875rem; }
  .card p { color: var(--ink-82); font-size: 0.9375rem; line-height: 1.55; }
  .card .link-line { margin-top: auto; padding-top: 8px; }
  .card h3 a::after { content: ""; position: absolute; inset: 0; }
  /* platform cards (D36): text-only, two columns on desktop */
  .card--platform { gap: 12px; }
  .card--platform ul.bullets { font-size: 0.9375rem; color: var(--ink-82); }
  .card--platform .group-label { margin-top: 8px; }
  .card--platform .card__img { margin: -24px -24px 8px; background: #000; border-bottom: 1px solid var(--rule); }
  .card--platform .card__img img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; }

  /* CTA band (7.12) */
  .cta-band { background: var(--c-surface-dark); border-block: 1px solid var(--rule); text-align: center; padding-block: 64px; }
  .cta-band .container > * + * { margin-top: 16px; }
  .cta-band p { max-width: 56ch; margin-inline: auto; color: var(--ink-82); }
  .cta-band .btn { margin-top: 8px; }

  /* callout (7.13) / note (7.14) */
  .callout { background: var(--c-fill); font-style: italic; padding: 16px 20px; border-inline-start: 3px solid var(--fg); max-width: var(--prose-max); color: var(--ink-82); }
  .note { font-style: italic; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-64); }

  /* stack table (7.16) and capability tiers (7.17) */
  .stack-table th.layer, .stack-table td.layer { font-family: var(--f-mono); font-weight: var(--w-500); background: var(--c-band-tech); color: #000; inline-size: 12%; }
  .stack-table tr.is-key td, .stack-table tr.is-key th:not(.layer) { background: var(--c-fill); color: var(--fg); }
  .stack-table tr.is-key td.layer { font-weight: var(--w-600); box-shadow: none; border-inline-start: 0; }
  .tiers { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiers__col { border-top: 1px solid var(--rule-strong); padding-top: 16px; }
  .tiers__col:first-child { border-top: 2px solid var(--fg); }
  .tiers__col :is(h3, h4) { font-size: var(--fs-h4); margin-bottom: 8px; }
  @media (max-width: 1023px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 767px) { .tiers { grid-template-columns: 1fr; } }

  /* form (7.15) */
  .form { display: grid; gap: 20px; max-width: 640px; }
  .form--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: 880px; }
  .field--wide { grid-column: 1 / -1; }
  @media (max-width: 767px) { .form--2col { grid-template-columns: 1fr; } }
  .field { display: grid; gap: 6px; }
  .field label, .field legend { font-weight: var(--w-600); color: var(--fg); font-size: var(--fs-small); }
  .field .req { color: var(--ink-72); }
  .field input[type="text"], .field input[type="email"], .field select, .field textarea {
    inline-size: 100%; padding: 12px; background: var(--c-ink-soft); color: var(--fg);
    border: 1px solid var(--rule-strong); border-radius: 4px;
    transition: border-color var(--t);
  }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(255 255 255 / 0.5); }
  .field textarea { min-block-size: 160px; resize: vertical; }
  .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 40px; }
  .field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
  .field--check input { inline-size: 20px; block-size: 20px; margin-top: 2px; accent-color: #fff; }
  .field--check label { font-weight: var(--w-400); color: var(--ink-82); }
  .field.has-error input[type="text"], .field.has-error input[type="email"], .field.has-error select, .field.has-error textarea { border-color: var(--c-error); }
  .field__error { color: var(--c-error); font-size: var(--fs-small); }
  .field--check .field__error { grid-column: 2; }
  .form-hp { position: absolute !important; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  .form-status { padding: 16px 20px; border: 1px solid var(--rule-strong); background: var(--c-fill); max-width: 880px; margin-bottom: 24px; }
  .form-status--error { border-color: var(--c-error); }
  .form-status h2 { font-size: var(--fs-h3); }

  /* footer (7.2) */
  .site-footer { background: var(--c-surface-dark); border-top: 1px solid var(--rule); color: var(--ink-82); margin-top: auto; }
  .footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 64px 40px; }
  .footer__h { font-family: var(--f-mono); font-weight: var(--w-500); font-size: var(--fs-label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg); margin-bottom: 16px; }
  .footer__grid li + li { margin-top: 8px; }
  .footer__grid a, .footer__legal a { color: var(--ink-72); font-size: var(--fs-small); transition: color var(--t); }
  .footer__grid a:hover, .footer__legal a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
  .footer__cert { border-top: 1px solid var(--rule-strong); padding-block: 24px; color: var(--fg-soft); }
  .footer__bottom { border-top: 1px solid var(--rule); padding-block: 24px 40px; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-72); }
  .footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
  .region a[aria-current="true"] { color: var(--fg); font-weight: var(--w-600); }
  @media (max-width: 767px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 48px 32px; } }
  @media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr; } }

  /* trust strip */
  .trust { background: var(--c-ink-soft); border-block: 1px solid var(--rule); padding-block: 24px; text-align: center; color: var(--fg-soft); font-size: var(--fs-small); }

  /* photo band: contained, greyscale render between a paragraph and a table */
  .photo-band { margin-inline: 0; }
  .pi-edge { background-image: url("../img/menu-edge.webp"); }
  .pi-workstations { background-image: url("../img/menu-workstations.webp"); }
  .pi-servers { background-image: url("../img/menu-servers.webp"); }
  .pi-families { background-image: url("../img/menu-families.webp"); }
  .pi-vault { background-image: url("../img/menu-vault.webp"); }
  .pi-hpc { background-image: url("../img/menu-hpc.webp"); }
  .pi-factory { background-image: url("../img/menu-factory.webp"); }
  .pi-ai { background-image: url("../img/menu-ai.webp"); }
  .pi-media { background-image: url("../img/menu-media.webp"); }
  .pi-engineering { background-image: url("../img/menu-engineering.webp"); }
  .pi-build { background-image: url("../img/menu-build.webp"); }

  .photo-band img { inline-size: 100%; block-size: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--c-ink-soft); border: 1px solid var(--rule); border-radius: 4px; }
  .lane > .photo-band { margin-block: 20px; }
  @media (max-width: 767px) { .photo-band img { aspect-ratio: 16 / 10; } }
}

/* ---------- pages ---------- */
@layer pages {
  /* home hero */
  .hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 72% 50%; opacity: 0.8; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0.88) 34%, rgb(0 0 0 / 0.35) 68%, rgb(0 0 0 / 0.1) 100%);
  }
  .hero__inner { padding-block: clamp(96px, 16vw, 200px) clamp(64px, 10vw, 128px); }
  .hero h1 { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.03em; max-width: 12ch; }
  .hero .lead { margin-top: 24px; max-width: 58ch; }
  .hero .btn-row { margin-top: 32px; }
  @media (max-width: 767px) {
    .hero::after { background: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.82) 45%, #000 100%); }
    .hero__media img { object-position: 60% 20%; }
  }

  .section-head { display: grid; gap: 16px; margin-bottom: 40px; }
  .section-head p { max-width: var(--prose-max); color: var(--ink-82); }

  /* two-way delivery block */
  .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
  @media (max-width: 767px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

  /* industries list */
  .industry-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  @media (max-width: 1023px) { .industry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 767px) { .industry-list { grid-template-columns: 1fr; } }

  /* 404 */
  .nf { padding-block: 120px; }
  .nf .btn-row { margin-top: 24px; }
}

/* ---------- motion (D24, master 6.5) ----------
   Enhancement only. Every rule sits behind prefers-reduced-motion: no-preference, and the reduce rule in the base layer
   still wins (!important in an earlier layer beats a later layer). Transform and opacity only, so no layout shift.
   Never applied to: standalone body-copy paragraphs, partner logos, or anything scroll-linked (no parallax, no scroll-jacking). */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* scroll reveals: motion.js adds .rv to blocks that start below the fold, .is-in on entry, then removes both */
    html.js .rv { opacity: 0; transform: translateY(14px); }
    html.js .rv.is-in, html.js .rv:focus-within { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

    /* page head and home hero rise on load; the h1 moves only (no opacity) so it never delays first paint */
    @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
    @keyframes rise-y { from { transform: translateY(10px); } }
    @keyframes fade-in { from { opacity: 0; } }
    @keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } }
    html.js :is(.page-head .container, .hero__inner) > * { animation: rise 0.6s var(--ease) backwards; }
    html.js :is(.page-head .container, .hero__inner) > h1 { animation-name: rise-y; }
    html.js :is(.page-head .container, .hero__inner) > :nth-child(2) { animation-delay: 70ms; }
    html.js :is(.page-head .container, .hero__inner) > :nth-child(3) { animation-delay: 140ms; }
    html.js :is(.page-head .container, .hero__inner) > :nth-child(4) { animation-delay: 210ms; }
    html.js :is(.page-head .container, .hero__inner) > :nth-child(n+5) { animation-delay: 280ms; }

    /* hover and press */
    .card { transition: border-color var(--t), background-color var(--t), transform 0.35s var(--ease); }
    .btn { transition: background-color var(--t), color var(--t), border-color var(--t), transform 0.2s var(--ease); }
    .link-line svg, .nav__toggle svg { transition: transform 0.25s var(--ease); }
    .spec:not(.spec--tint):not(.stack-table) tbody > tr > * { transition: background-color var(--t); }
    @media (hover: hover) {
      .card:not(.card--static):hover { transform: translateY(-3px); }
      .card:not(.card--static):hover .link-line svg, .link-line:hover svg { transform: translateX(4px); }
      .btn:hover { transform: translateY(-1px); }
      .btn:active { transform: none; }
      .spec:not(.spec--tint):not(.stack-table) tbody > tr:hover > * { background-color: rgb(255 255 255 / 0.04); }
    }

    /* desktop dropdown panels ease in */
    @media (min-width: 768px) { .nav__panel { animation: panel-in 0.18s var(--ease) backwards; } }

    /* full-screen mobile menu: panel fades in, items rise in turn */
    @media (max-width: 767px) {
      html.nav-open .nav { animation: fade-in 0.2s ease-out backwards; }
      html.nav-open .nav__item { animation: rise 0.35s var(--ease) backwards; }
      html.nav-open .nav__item:nth-child(1) { animation-delay: 40ms; }
      html.nav-open .nav__item:nth-child(2) { animation-delay: 80ms; }
      html.nav-open .nav__item:nth-child(3) { animation-delay: 120ms; }
      html.nav-open .nav__item:nth-child(4) { animation-delay: 160ms; }
      html.nav-open .nav__item:nth-child(5) { animation-delay: 200ms; }
      html.nav-open .nav__item:nth-child(n+6) { animation-delay: 240ms; }
      html.nav-open .nav__cta { animation: rise 0.35s var(--ease) 280ms backwards; }
    }
  }
  @media print { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }
}

/* page-to-page cross-fade for same-origin navigation (Chromium 126+, Safari 18.2+; ignored elsewhere) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}