/* =========================================================================
   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 */
  --panel:      #b2e0fe;   /* the how-it-works media panels */
  --cream:      #d8ffff;   /* stat cards, ecosystem row hover */
  --espresso:   #060d2d;   /* configurations */
  --sand:       #060d2d;   /* case studies */
  --code-bg:    #0c1444;   /* code and chart cards, and the footer */
  --accent:     #44a7e7;   /* ornament diamonds */
  --accent-soft:#e9f6ff;   /* ornament ground */
  --required:   #bb1818;
  --field:      #e3e3e3;

  /* Text and rules on this page are a blue-navy, not the near-black the home
     page uses — so --ink is overridden here along with every tint derived
     from it. cpu.css only loads on this page, so the home page is untouched. */
  --ink:        #223992;
  --ink-20:     rgba(34, 57, 146, .2);
  --ink-30:     rgba(34, 57, 146, .3);
  --ink-40:     rgba(34, 57, 146, .4);
  --ink-50:     rgba(34, 57, 146, .5);

  --brick-line: rgba(203, 224, 208, .2);
  --brick-ring: rgba(34, 57, 146, .3);
  --espresso-40: rgba(34, 57, 146, .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 */
}

/* The header is the same on both pages, colour included — this page's
   blue-navy stops at it. Redefining the ink tokens on .nav rather than on each
   part covers the links, the Log In pill, the search field, the burger and the
   dropdown menus in one go, since every one of them is written in terms of
   --ink. The shell of the dropdown card is a child of .nav, so it inherits too. */
.nav {
  --ink:    #030616;
  --ink-20: rgba(3, 6, 22, .2);
  --ink-30: rgba(3, 6, 22, .3);
  --ink-40: rgba(3, 6, 22, .4);
  --ink-50: rgba(3, 6, 22, .5);
  color: var(--ink);
}

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

/* this page's footer is the navy of the code cards, not the home page's black */
.footer { background: var(--code-bg); }


/* 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(--panel);
}
/* 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); }
/* The heading takes a third of the row and the list the other two — exact
   thirds, so there is no column gap to eat into them; the headings are short
   enough that their own column provides the separation. */
.cpu-eco__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  column-gap: 0;
  row-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 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-row);
  line-height: 1.25;
}
.cpu-eco__list { 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(--cream); }
.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; }

  /* a third of a narrow row isn't a column, it's a margin — stack instead */
  .cpu-eco__row { grid-template-columns: 1fr; }
  .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; }
}