/* =========================================================================
   CPU Compute — page-specific styles
   Figma: CW / node 31:693 (1440 × 10969)

   Loads on top of styles.css, which already carries the tokens, the nav, the
   footer, the carousel and the primitives (.eyebrow / .btn / .arrow / .band).
   Only this page's palette and sections live here.
   ========================================================================= */

:root {
  /* this page's palette — the cool counterpart to the home page's */
  --brick:      #b2e0fe;   /* hero */
  --cream:      #b2e0fe;   /* light panels, stat cards */
  --row-tint:   #d8ffff;   /* ecosystem row highlight — a lighter tint */
  --espresso:   #060d2d;   /* configurations */
  --code-bg:    #040505;   /* code and chart cards */
  --sand:       #060d2d;   /* case studies */
  --accent:     #44a7e7;   /* ornament diamonds */
  --accent-soft:#e9f6ff;   /* ornament ground */
  --required:   #bb1818;
  --field:      #e3e3e3;

  --brick-line: rgba(203, 224, 208, .2);
  --brick-ring: rgba(3, 6, 22, .3);   /* neutral grey ring on the CTA arrows */
  --ink-20:     rgba(3, 6, 22, .2);
  --espresso-40: rgba(6, 13, 45, .4);

  /* sizes this page adds on top of the shared scale */
  --fs-h0:      clamp(34px, 4.445vw, 64px);    /*  64 */
  --fs-sub:     clamp(20px, 1.945vw, 28px);    /*  28 */
  --fs-stat-xl: clamp(84px, 15.14vw, 218px);   /* 218 */
  --fs-stat:    clamp(48px, 6.112vw, 88px);    /*  88 */
  --fs-config:  clamp(24px, 2.223vw, 32px);    /*  32 */
  --fs-row:     clamp(28px, 2.778vw, 40px);    /*  40 */
  --fs-code:    clamp(12px, 1.106vw, 15.924px);

  --toc-h: 80px;          /* the "on this page" bar — part of the first screen */
  --band-ratio: 43.478%;  /* 400 / 920 */
}

.band--espresso { background: var(--espresso); }


/* trim these the way Figma measures them */
.cpu-hero__title, .cpu-hero__sub, .cpu-hero__crumb,
.cpu-perf__title, .cpu-stat__num, .cpu-stat__label,
.cpu-split__title, .cpu-split__body, .cpu-split__cap,
.cpu-conf__title, .cpu-conf__lede, .cpu-feat__name, .cpu-feat__desc,
.cpu-eco__name, .cpu-eco__lede, .cpu-item__name, .cpu-item__desc,
.cpu-contact__lede, .cpu-form__req, .cpu-field label,
.cpu-trusted__label, .btn--learn, .cpu-form__submit {
  text-box: trim-both cap alphabetic;
}

/* =================================================================== hero = */
/* The hero, the ornament band inside it and the "on this page" bar together
   fill exactly one screen: the bar is a fixed 80px, the hero takes the rest.
   At a 1000px-tall window that lands on the frame's own 920 + 80. */
.cpu-hero {
  position: relative;
  height: calc(100vh - var(--toc-h));
  height: calc(100svh - var(--toc-h));
  min-height: 620px;
  overflow: clip;
  background: var(--brick);
}

/* the diamond band across the bottom — rhombi travelling along a sine wave,
   drawn by ornament.js. The background colour doubles as the still fallback. */
.cpu-hero__band {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--band-ratio);
  overflow: hidden;
  background: var(--accent-soft);
}
.cpu-hero__band canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* the hero is white now, so the dark grid the brick used to carry is gone */
.cpu-hero__grid { display: none; }

/* pinned 124 from the top and 40 above the ornament — at the frame's height
   that is exactly the 356px block the design draws */
.cpu-hero__inner {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 124px;
  bottom: calc(var(--band-ratio) + 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  max-width: 859px;
  color: var(--ink);
}
.cpu-hero__crumb {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cpu-hero__head { display: flex; flex-direction: column; gap: 40px; }
.cpu-hero__title {
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: .942;      /* 113 / 120 */
  letter-spacing: -.03em;
}
.cpu-hero__sub {
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: 1.25;      /* 35 / 28 */
}

/* ============================================================ on this page = */
.cpu-toc {
  display: flex;
  height: var(--toc-h);
  background: var(--white);
  box-shadow: inset 0 1px 0 var(--ink-30), inset 0 -1px 0 var(--ink-30);
}
.cpu-toc > * {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 14px 42px;
  box-shadow: inset -1px 0 0 var(--ink-30);
  text-align: center;
}
.cpu-toc__label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .6;
}
.cpu-toc a {
  font-weight: 700;
  font-size: var(--fs-nav);
  line-height: 1;
  transition: background-color .25s ease;
}
.cpu-toc a:hover { background: var(--cream); }

/* ============================================================ performance = */
.cpu-perf {
  display: flex;
  flex-direction: column;
  gap: 72px;
  background: var(--white);
  overflow: clip;
}
.cpu-perf__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 38px var(--gutter) 0;
}
.cpu-perf__title {
  max-width: 846px;
  font-weight: 600;
  font-size: var(--fs-h0);
  line-height: 1.125;     /* 72 / 64 */
  letter-spacing: -.01em;
}

/* the stat row is 1/2 + 1/4 + 1/4 */
.cpu-stats { display: grid; grid-template-columns: 2fr 1fr 1fr; min-height: 470px; }
.cpu-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
  padding: var(--pad-48);
  background: var(--cream);
}
.cpu-stat + .cpu-stat { border-left: 5px solid var(--white); }
.cpu-stat__num {
  font-weight: 400;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.cpu-stat--wide .cpu-stat__num { font-size: var(--fs-stat-xl); }
.cpu-stat__num span { color: var(--ink-20); }
.cpu-stat__foot { display: flex; flex-direction: column; gap: 24px; }
.cpu-stat__label {
  font-weight: 600;
  font-size: var(--fs-lede);
  line-height: 1.13;
}

/* ============================================================== trusted by = */
.cpu-trusted {
  display: flex;
  align-items: center;
  gap: clamp(24px, 8.264vw, 119px);
  min-height: 100px;
  padding: 0 var(--gutter);
  background: var(--white);
}
.cpu-trusted__label {
  flex: none;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #363636;
}
.cpu-trusted img { flex: 1 1 auto; min-width: 0; height: auto; }

/* ============================================================ how it works = */
/* the copy half is white, the media half carries the light panel */
.cpu-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--white);
}
.cpu-split--flip .cpu-split__panel { grid-column: 2; grid-row: 1; }
.cpu-split--flip .cpu-split__text { grid-column: 1; grid-row: 1; }

.cpu-split__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  min-height: 760px;
  padding: var(--pad-80);
  overflow: hidden;
  background: var(--cream);
}
/* the texture ships as white lines — inverted so they read on the light panel */
.cpu-split__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background: url("assets/cpu-panel-texture.png") center / cover no-repeat;
  filter: invert(1);
}
.cpu-split__cap {
  position: relative;
  max-width: 450px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1.43;
  text-align: center;
  color: var(--ink);
}
/* the frame leaves two of the three captions set in near-black on the dark
   panel, where they're invisible — kept white here, which is plainly intended */

.cpu-split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: var(--gutter);
}
.cpu-split__title {
  max-width: 587px;
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.084;     /* 52 / 48 */
  letter-spacing: -.005em;
}
.cpu-split__body {
  max-width: 504px;
  font-weight: 500;
  font-size: var(--fs-lede);
  line-height: 1.4;
}
.btn--learn {
  display: inline-block;
  padding: 12px 16px;
  box-shadow: inset 0 0 0 1px var(--espresso-40);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
}
.btn--learn:hover { box-shadow: inset 0 0 0 1px var(--espresso); background: rgba(30, 13, 8, .05); }

/* the code card */
.cpu-code {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 522px;
  min-height: 346px;
  overflow: clip;
  border-radius: 4px;
  background: var(--code-bg);
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-code);
  line-height: 1;
}
.cpu-code__top { display: flex; align-items: center; gap: 21px; padding: 21px; }
.cpu-code__top img { width: 26.54px; height: 26.54px; flex: none; }
.cpu-code__top span { color: var(--white); white-space: nowrap; }
.cpu-code__body { display: flex; gap: 20px; padding: 23px; color: #ebeef2; }
.cpu-code__gutter { flex: none; white-space: pre; opacity: .9; }
.cpu-code pre { margin: 0; font: inherit; white-space: pre-wrap; }
.tok-kw  { color: #cc99cd; }
.tok-com { color: #95999e; }
.tok-op  { color: #67cdcc; }
.tok-str { color: #7ec699; }
.tok-num { color: #f08d49; }

.cpu-chart { position: relative; width: 100%; max-width: 520px; border-radius: 4px; }

/* =========================================================== configurations = */
.cpu-conf {
  display: flex;
  flex-direction: column;
  gap: var(--band);
  background: var(--espresso);
}
.cpu-conf__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: var(--gutter);
  color: var(--white);
}
.cpu-conf__lede { max-width: 583px; font-weight: 500; font-size: var(--fs-lede); line-height: 1.4; }

.cpu-conf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cpu-conf__panel {
  position: relative;
  min-height: 1070px;
  padding: 39px 40px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--brick-line);
}
.cpu-conf__panel + .cpu-conf__panel { box-shadow: inset 0 1px 0 var(--brick-line), inset 1px 0 0 var(--brick-line); }
/* the hardware shots sit in a plus-lighter layer, as in the frame, so the
   panel colour shows through their black surround instead of being baked in.
   The blend is on the image only — the gradient above it composites normally. */
.cpu-conf__photo {
  position: absolute;
  right: -10px;          /* anchored to the panel's right edge */
  top: 316px;
  width: 710px;
  height: 806px;
  overflow: hidden;
  pointer-events: none;
}
.cpu-conf__photo img { position: absolute; max-width: none; mix-blend-mode: plus-lighter; }
.cpu-conf__photo--amd img   { left: -25.45%; top: 12.41%; width: 151.87%; height: 75.14%; }
/* The chip sat 118px higher than the board inside its own frame. Matching
   their top edges wants 12.14%, matching their centres of mass wants 8.28%;
   10.2% splits the difference, which is what reads as level. */
.cpu-conf__photo--intel img { left: -5.24%;  top: 10.2%;  width: 150.44%; height: 74.61%; }
.cpu-conf__photo--intel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(151.924deg, rgba(6, 13, 45, .2) 22.347%, rgb(6, 13, 45) 69.404%);
}
.cpu-conf__title {
  position: relative;
  font-weight: 900;
  font-size: var(--fs-config);
  line-height: 1.094;     /* 35 / 32 */
  color: var(--white);
}

/* the 2 × 2 feature grid inside each panel */
/* the frame pins these at x = 40 / 353 and y = 117 / 263 inside the panel */
.cpu-feats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 233px));
  grid-template-rows: 146px auto;
  column-gap: 80px;
  margin-top: 55px;
}
.cpu-feat { display: flex; flex-direction: column; gap: 16px; }
/* the glyph ships as a tall diamond; turned on its side here */
.cpu-feat img { width: 10px; height: 19px; transform: rotate(90deg); }
.cpu-feat__name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.3;
  color: var(--white);
}
.cpu-feat__desc {
  font-family: var(--mono);
  font-weight: 300;
  font-size: var(--fs-label);
  line-height: 1.667;     /* 20 / 12 */
  color: var(--white);
}

/* ============================================================== ecosystem = */
.cpu-eco { background: var(--white); }
.cpu-eco__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: var(--gutter) var(--gutter) 0;
}
.cpu-eco__lede { max-width: 583px; font-weight: 500; font-size: var(--fs-lede); line-height: 1.4; }

/* the frame puts the first row at y=390 — 155 below the intro block */
.cpu-eco__rows { display: flex; flex-direction: column; margin-top: clamp(48px, 10.764vw, 155px); }
.cpu-eco__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: var(--gutter);
  box-shadow: inset 0 1px 0 var(--ink-20), inset 0 -1px 0 var(--ink-20);
}
/* rules run the full width — no side borders on any row */
.cpu-eco__name {
  flex: none;
  width: 220px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-row);
  line-height: 1.25;
}
.cpu-eco__list { flex: 1 1 932px; max-width: 932px; display: flex; flex-direction: column; }

.cpu-item {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 25px 20px;
  box-shadow: inset 0 -1px 0 var(--ink-20);
  transition: background-color .25s ease;
}
.cpu-item:first-child { box-shadow: inset 0 1px 0 var(--ink-20), inset 0 -1px 0 var(--ink-20); }
/* the frame paints one row in each group cream — that's the hover state shown
   at rest, so it lives on :hover here and nowhere else */
.cpu-item:hover { background: var(--row-tint); }
.cpu-item__check { flex: none; width: 24px; height: 24px; }
.cpu-item__name {
  flex: none;
  width: 260px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
}
.cpu-item__desc {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1.43;
}
.cpu-item .arrow { --ring: var(--brick-ring); margin-left: auto; }

/* ============================================================ case studies = */
.cases--sand { background: var(--sand); }
.cases--sand .cases__title { font-size: var(--fs-h0); line-height: 1.125; }
.cases--sand .case { border-radius: 2px; }

/* ================================================================ contact = */
.cpu-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 732px;
  background: var(--white);
}
.cpu-contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: var(--gutter);
}
.cpu-contact__lede { max-width: 583px; font-weight: 500; font-size: var(--fs-lede); line-height: 1.4; }

.cpu-form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 52px;
  padding: clamp(28px, 6.39vw, 92px);
  border-left: 1px solid rgba(0, 0, 0, .2);
}
.cpu-form__req {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--required);
}
.cpu-form__fields { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.cpu-form__pair { display: flex; gap: 30px; width: 100%; }
.cpu-form__pair > * { flex: 1 1 0; min-width: 0; }

.cpu-field { display: flex; flex-direction: column; gap: 3px; }
.cpu-field label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cpu-field label i { font-style: normal; color: var(--required); }
.cpu-field input,
.cpu-field select,
.cpu-field textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--field);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: box-shadow .2s ease;
}
.cpu-field textarea { height: 120px; padding: 12px; resize: vertical; }
.cpu-field input:focus,
.cpu-field select:focus,
.cpu-field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.cpu-field select {
  appearance: none;
  background-image: url("assets/cpu-caret.svg");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 6.72px 12px;
}
.cpu-form__submit {
  align-self: flex-start;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .25s ease;
}
.cpu-form__submit:hover { background: var(--brick); }

/* ========================================================================= */
/*                              responsive                                   */
/* ========================================================================= */

@media (max-width: 1180px) {
  /* keep the bar one row — the first screen's height depends on it */
  .cpu-toc > * { padding: 14px 12px; }

  .cpu-eco__row { flex-wrap: wrap; }
  .cpu-eco__name { width: 100%; }
  .cpu-eco__list { flex: 1 1 100%; max-width: none; }
  .cpu-item__name { width: 200px; }
}

@media (max-width: 1024px) {
  /* the bar stays one row and scrolls sideways, so hero + bar is still one
     screen on a phone */
  .cpu-toc { overflow-x: auto; scrollbar-width: none; }
  .cpu-toc::-webkit-scrollbar { display: none; }
  .cpu-toc > * { flex: 0 0 auto; padding: 14px 22px; }

  .cpu-hero { height: auto; min-height: calc(100svh - var(--toc-h)); }
  .cpu-hero__inner {
    position: static;
    max-width: none;
    padding: 148px var(--gutter) calc(clamp(180px, 30vw, 400px) + 40px);
  }
  .cpu-hero__band { height: clamp(180px, 30vw, 400px); }

  .cpu-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cpu-stat--wide { grid-column: 1 / -1; }
  .cpu-stat--wide + .cpu-stat { border-left: 0; border-top: 5px solid var(--white); }

  .cpu-split, .cpu-conf__grid, .cpu-contact { grid-template-columns: 1fr; }
  .cpu-split--flip .cpu-split__panel,
  .cpu-split--flip .cpu-split__text { grid-column: 1; grid-row: auto; }
  .cpu-split__panel { min-height: 0; padding: var(--pad-80) var(--gutter); }

  .cpu-conf__panel { min-height: 0; padding-bottom: 420px; }
  .cpu-conf__panel + .cpu-conf__panel { box-shadow: inset 0 1px 0 var(--brick-line); }
  .cpu-conf__photo { right: -10px; top: auto; bottom: -40px; width: 640px; height: 726px; }
  .cpu-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 40px 32px; }

  .cpu-form { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .2); }
}

@media (max-width: 700px) {
  .cpu-stats { grid-template-columns: 1fr; }
  .cpu-stat + .cpu-stat { border-left: 0; border-top: 5px solid var(--white); }

  .cpu-trusted { flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 var(--gutter); }

  .cpu-item { flex-wrap: wrap; gap: 12px 16px; padding: 20px; }
  .cpu-item__name, .cpu-item__desc { width: auto; flex: 1 1 auto; }

  .cpu-feats { grid-template-columns: 1fr; }
  .cpu-conf__photo { width: 460px; height: 522px; }
  .cpu-conf__panel { padding-bottom: 300px; }

  .cpu-form__pair { flex-direction: column; gap: 40px; }
}