/* ═══════════════════════════════════════════════════════════════════════
   CoreWeave — GPU Compute
   Figma: CW / node 5176:8227 "GPU Compute" (1440 wide)

   Loaded after styles.css, form.css, home.css and motion.css. The frame is
   drawn in the landing page's system, so home.css is the stylesheet — type,
   eyebrows, the header block, buttons, arrows, the carousel, the "Ready to
   scale?" band, the footer and the whole hover language — and this file adds
   only the sections it has no class for. Everything new is prefixed `gp-`.

   Two things this page does differently from the landing, on purpose:
   · no seams. Sections meet on a flat edge and each keeps
     --hp-section-air at both ends;
   · every hover is behind (hover: hover) and min-width 721, as on the
     landing, so a phone never gets a stuck state.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --gp-rule:   rgba(2, 3, 11, .20);   /* the frame's cell and list rules */
  --gp-fs-lg:  clamp(34px, 4.445vw, 64px);   /* Headline 2 — 64 / 62 */
  --gp-fs-sub: clamp(18px, 1.667vw, 24px);   /* Paragraph L — 24 / 34 */
  --gp-shot:   min(650px, 45.14vw);          /* the frame's 650 pictures */
}

.gp-h-lg, .gp-sub { text-box: trim-both cap alphabetic; }

.gp-h-lg {
  display: block;
  margin: 0;
  font-weight: 500;
  font-size: var(--gp-fs-lg);
  line-height: .969;
  letter-spacing: -.03em;
  color: var(--hp-ink);
}
.gp-sub {
  margin: 0;
  font-size: var(--gp-fs-sub);
  line-height: 1.417;
  letter-spacing: -.02em;
  color: var(--hp-ink);
  max-width: 984px;
}
/* Mono XXS — the 12/18 eyebrow the frame puts inside a cell */
.gp-eyebrow--xs .hp-eyebrow__text { font-size: 12px; line-height: 1.5; }

/* ── sections: flat grounds, the landing page's air at both ends ────── */
.gp-sec { padding: var(--hp-section-air) 0; }
.gp-sec--white { background: var(--hp-white); }
.gp-sec--grey  { background: var(--hp-grey); }
/* the header block brings its own top edge; the section's air replaces it */
.gp-sec > .hp-head:first-child { padding-top: 0; }
/* two white sections running on read as one: the air between them is one air */
.gp-sec--white + .gp-sec--white { padding-top: 0; }

/* ═════════════════════════════════════════ 1 — hero (5176:8228) ═════
   500 of copy over a 500 band. The bar is fixed and 108 tall, so the copy
   half grows by it — the same trade the landing and the PDP make. */
.gp-hero { position: relative; background: var(--hp-white); }
.gp-hero__lead {
  min-height: calc(clamp(360px, 34.723vw, 500px) + var(--nav-h));
  padding: calc(var(--nav-h) + var(--hp-g60)) var(--hp-gutter) var(--hp-g60);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--hp-g60);
}
.gp-hero .hp-h1 { font-size: clamp(40px, 5.834vw, 84px); line-height: .953; }
.gp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hp-g40);
}
.gp-crumb a { color: inherit; transition: color .2s var(--hp-ease); }
@media (hover: hover) and (min-width: 721px) {
  .gp-crumb a:hover { color: var(--hp-blue); }
}

/* The canvas is drawn by patterns.js (key gpuband), which also paints the
   host's ground from the same config — so the two cannot disagree. The
   fallback here is that same sage. */
.gp-band {
  position: relative;
  height: clamp(240px, 34.723vw, 500px);
  background: #aacdad;
  overflow: hidden;
}
.gp-band canvas { display: block; width: 100%; height: 100%; }

/* ═════════════════════════ 2 — highly performant GPUs (5176:8241) ═══
   A ruled cell on the left, the 650 picture on the right, 20 apart. */
.gp-split {
  padding: 0 var(--hp-gutter);
  display: flex;
  align-items: stretch;
  gap: var(--hp-g20);
}
.gp-split__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--hp-g40);
  border-top: 1px solid var(--gp-rule);
  border-bottom: 1px solid var(--gp-rule);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hp-g40);
  color: inherit;
}
.gp-split__cell .gp-h-lg { transition: color .25s var(--e-out); }

/* A picture that plays a film: the photograph fills the box on the
   frame's black and the white disc sits in its foot, 30 in. */
.gp-split__shot,
.gp-film {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--hp-g30);
  background: var(--hp-ink);
  border-radius: var(--hp-tile-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(2, 3, 11, 0);
  transition: border-radius var(--t-tap) var(--e-out), box-shadow var(--t-tap) var(--e-out);
}
.gp-split__shot { flex: none; width: var(--gp-shot); min-height: 420px; }
:is(.gp-split__shot, .gp-film) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
:is(.gp-split__shot, .gp-film) .hp-arrow { position: relative; z-index: 1; }
@media (hover: hover) and (min-width: 721px) {
  :is(.gp-split__shot, .gp-film):is(:hover, :focus-visible) { border-radius: 0; box-shadow: 0 0 0 1px rgba(2, 3, 11, .125); }
  :is(.gp-split__shot, .gp-film):hover img { transform: scale(1.04); }
  :is(.gp-split__shot, .gp-film):is(:hover, :focus-visible) .hp-arrow__icon { scale: 1.3; }
  :is(.gp-split__shot, .gp-film):is(:hover, :focus-visible) .hp-arrow__ring { border-color: var(--line-hover); }
  .gp-split__cell:is(:hover, :focus-visible) .gp-h-lg { color: var(--hp-blue); }
}

/* ═════════════════════════════════ 3 — GB200 NVL72 (5176:8248) ══════
   The square picture on the left; on the right the header block over four
   ruled claims, 60 between the two. */
.gp-feature {
  padding: 0 var(--hp-gutter);
  display: flex;
  align-items: flex-start;
  gap: var(--hp-g20);
}
.gp-feature__shot {
  flex: none;
  width: var(--gp-shot);
  aspect-ratio: 1;
  background: var(--hp-ink);
  border-radius: var(--hp-tile-radius);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.gp-feature__shot img { width: 100%; height: 100%; object-fit: cover; }
.gp-feature__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hp-g60);
}
.gp-feature__head {
  padding: 0 var(--hp-g40);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hp-g40);
}
.gp-claims { border-top: 1px solid var(--gp-rule); }
.gp-claim {
  padding: var(--hp-g40);
  border-bottom: 1px solid var(--gp-rule);
  display: flex;
  flex-direction: column;
  gap: var(--hp-g40);
}

/* ═══════════════════════════════ 4 — the GPU families (5176:8269) ════
   Three rows. Each: a ruled column — the linked cell at its head, three
   facts at its foot — beside the 650 square, 60 between rows. */
.gp-models {
  padding: 0 var(--hp-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--hp-g60);
}
.gp-model {
  display: flex;
  align-items: stretch;
  gap: var(--hp-g20);
}
.gp-model__text {
  flex: 1 1 0;
  min-width: 0;
  border-top: 1px solid var(--gp-rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--hp-g40);
}
.gp-model__cell {
  padding: var(--hp-g40);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hp-g40);
  color: inherit;
}
.gp-model__copy { display: flex; flex-direction: column; gap: var(--hp-g40); }
.gp-model__copy > * { display: block; }
.gp-model__title { transition: color .25s var(--e-out); }
@media (hover: hover) and (min-width: 721px) {
  .gp-model__cell:is(:hover, :focus-visible) .gp-model__title { color: var(--hp-blue); }
}

/* three lines of body copy with the frame's hairline between them */
.gp-facts {
  list-style: none;
  margin: 0;
  padding: 0 var(--hp-g40) var(--hp-g40);
  display: flex;
  flex-direction: column;
  gap: var(--hp-g20);
}
.gp-facts li + li { padding-top: var(--hp-g20); border-top: 1px solid var(--gp-rule); }

.gp-model__shot {
  flex: none;
  width: var(--gp-shot);
  aspect-ratio: 1;
  background: var(--hp-ink);
  border-radius: var(--hp-tile-radius);
  overflow: hidden;
}
.gp-model__shot img { width: 100%; height: 100%; object-fit: cover; }
/* the crops the frame gives each product */
.gp-model__shot--h200 img { object-position: 36% 40%; }
.gp-model__shot--h100 img { object-position: 20% 50%; }
.gp-model__shot--l40s img { object-position: 78% 45%; }

/* ═══════════════════════════════ 5 — customer stories (5176:8320) ════
   1120 cards, one to a page, 82 apart (the 1202 step the landing's case
   carousel used). A card is the 520 × 614 photograph beside the quote,
   then the title and the description with its button in a row under it. */
.gp-cases .hp-carousel__track { gap: min(82px, 5.7vw); }
.gp-case {
  width: min(1120px, calc(100vw - 2 * var(--hp-gutter) - 60px));
  background: var(--hp-white);
  border-radius: var(--hp-tile-radius);
  padding: var(--hp-g80) 0;
  display: flex;
  flex-direction: column;
  gap: var(--hp-g60);
  overflow: hidden;
  transition: opacity .6s var(--hp-ease);
}
/* gpu.js marks the page on screen; the neighbour waits at the frame's 20% */
.gp-cases.is-live .gp-case:not(.is-current) { opacity: .2; }

.gp-case__top { display: grid; grid-template-columns: 520fr 600fr; align-items: start; }
.gp-case__photo { aspect-ratio: 520 / 614; overflow: hidden; }
.gp-case__photo img { width: 100%; height: 100%; object-fit: cover; }
.gp-case__quote {
  padding: 0 var(--hp-g80);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--hp-g60);
  align-self: stretch;
}
.gp-case__logo { width: auto; height: clamp(24px, 2.223vw, 32px); align-self: flex-start; }
.gp-case__said { margin: 0; display: flex; flex-direction: column; gap: var(--hp-g40); }
/* the opening quote hangs in the margin, as the frame sets it */
.gp-case__said .hp-h2 { text-indent: -.45em; }
.gp-case__said footer { display: block; }

.gp-case__foot { display: grid; grid-template-columns: 520fr 600fr; align-items: start; }
.gp-case__title { padding: 0 var(--hp-g80); max-width: 546px; }
.gp-case__more {
  padding: 0 var(--hp-g80);
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hp-g30);
}

/* ═══════════════════════════════ 6 — the AI data center (5176:8362) ══ */
.gp-film {
  width: calc(100% - 2 * var(--hp-gutter));
  margin: 0 var(--hp-gutter);
  aspect-ratio: 16 / 9;
}

/* ═════════════════════════════════════ 7 — Ready to scale? (5176:8368) ═
   home.css's band, unchanged; it only takes the gutter from the section. */
.gp-close { padding-bottom: var(--hp-edge); }
.gp-close .hp-band { padding-block: 0; }

/* ═══════════════════════════════════════════════════ responsive ═════ */
@media (max-width: 1023px) {
  .gp-split, .gp-feature, .gp-model { flex-direction: column; }
  .gp-split__shot, .gp-feature__shot, .gp-model__shot { width: 100%; }
  .gp-split__shot { min-height: 0; aspect-ratio: 16 / 9; }
  .gp-feature__shot, .gp-model__shot { aspect-ratio: 16 / 10; }
  .gp-feature__head { padding: 0; }
  /* the picture leads the row once they stack, as in the GB200 block */
  .gp-model__shot { order: -1; }

  .gp-case { padding: 0 0 var(--hp-g40); }
  .gp-case__top, .gp-case__foot { grid-template-columns: minmax(0, 1fr); gap: var(--hp-g40); }
  .gp-case__photo { aspect-ratio: 16 / 10; }
  .gp-case__quote, .gp-case__title, .gp-case__more { padding: 0 var(--hp-g40); max-width: none; }
}

@media (max-width: 720px) {
  .gp-hero .hp-h1 { font-size: 44px; line-height: 1.045; }
  .gp-hero__lead { padding-top: 110px; min-height: 0; gap: 60px; }
  .gp-h-lg { font-size: 36px; }
  .gp-split__cell, .gp-model__cell, .gp-claim { padding: 30px 0; }
  .gp-facts { padding: 0 0 30px; }
  .gp-case { width: calc(100vw - 60px); }
  .gp-case__quote, .gp-case__title, .gp-case__more { padding: 0 30px; }
  .gp-case__said .hp-h2 { font-size: 26px; line-height: 1.1; }
  .gp-model__shot, .gp-feature__shot { aspect-ratio: 1; }
  .hp-band__inner { padding: 30px; }
}

/* past 1440 the page is the 1440 frame in the middle of the window */
@media (min-width: 1441px) {
  :root { --gp-shot: 650px; }
  .gp-case { width: 1120px; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-case, :is(.gp-split__shot, .gp-film) img { transition: none; }
}