/* Compute landing only (scripts/build_compute.py). Not part of css/site.css, so the site-wide cache hash stays put. */
.cmp-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:4px 0 8px}
.cmp-kicker{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--font-grey,#6e6f79)}
.cmp-px{margin-top:4px;font-size:56px;font-weight:650;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--font-grey-dk,#36363c)}
.cmp-px small{display:block;margin-top:8px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--font-grey,#6e6f79)}
.cmp-hero-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font-size:15px;font-variant-numeric:tabular-nums}
.cmp-hero-meta .k,.cmp-spark .k{margin-right:8px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--font-grey,#6e6f79)}
.cmp-spark{flex:none;text-align:right}
.cmp-spark svg{display:block;width:240px;height:64px}
.cmp-na{color:var(--lt-grey,#b5b6bd)}
table.cmp-rates{width:100%}
table.cmp-rates td,table.cmp-rates th{font-variant-numeric:tabular-nums}
table.cmp-rates td.num,table.cmp-rates th.num{text-align:right}
table.cmp-rates a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border,#e4e4ea)}
table.cmp-rates a:hover{color:var(--ts-blue,#8c1d40);border-bottom-color:currentColor}
.cmp-gpu{border-top:1px solid var(--border,#e6e6eb);padding:10px 0}
.cmp-gpu:last-child{border-bottom:1px solid var(--border,#e6e6eb)}
.cmp-gpu>summary{cursor:pointer;font-weight:600;font-size:14px}
.cmp-gpu h3{margin:16px 0 8px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--font-grey,#6e6f79)}
.cmp-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--font-grey,#6e6f79)}
.cmp-foot{max-width:68ch}
@media (max-width:640px){
  .cmp-hero{flex-direction:column;align-items:stretch;gap:16px}
  .cmp-px{font-size:40px}
  .cmp-spark{text-align:left}
  .cmp-spark svg{width:100%;height:56px}
}

/* IG.H100-SXM.HYP.OD headline and segment switcher (scripts/gpu_headline.py, #375), on the hub (#h100) and the GPU index page
   (#headline). One line-height token for headline and body text; every gap is --section-gap at 1/2, 1 or 1.5, no other scale. */
:root{--lh-relaxed:1.6}
:is(#headline,#h100).gh-head{display:block;padding:0}
:is(#headline,#h100).gh-head .cmp-kicker,:is(#headline,#h100).gh-head .cmp-px small,:is(#headline,#h100).gh-head .gh-settle,
:is(#headline,#h100).gh-head .cmp-hero-meta,.gh-sec .gh-cap,.gh-sec .gh-level,.gh-sec .method{line-height:var(--lh-relaxed)}
:is(#headline,#h100).gh-head .cmp-px{margin-top:var(--section-gap)}
:is(#headline,#h100).gh-head .cmp-px small{margin-top:var(--section-gap)}
:is(#headline,#h100).gh-head .gh-settle{display:flex;flex-wrap:wrap;gap:calc(var(--section-gap) / 2) calc(var(--section-gap) * 1.5);margin-top:var(--section-gap);font-variant-numeric:tabular-nums}
:is(#headline,#h100).gh-head .cmp-hero-meta{margin-top:calc(var(--section-gap) * 1.5);gap:calc(var(--section-gap) / 2) calc(var(--section-gap) * 1.5)}
.gh-head .gh-settle .k{margin-right:8px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--font-grey,#6e6f79)}
.gh-head .gh-when{color:var(--font-grey,#6e6f79);font-size:13px}
.gh-head .gh-empty{font-size:16px;letter-spacing:0;line-height:var(--lh-relaxed)}
.gh-head .gh-flag{font-size:14px;letter-spacing:0;vertical-align:middle}
.gh-head .gh-quotes a{white-space:nowrap}
.gh-tabs[hidden],.gh-panel[hidden]{display:none}
.gh-tabs{display:flex;flex-wrap:wrap;gap:calc(var(--section-gap) / 2);margin-bottom:var(--section-gap)}
.gh-tabs button{font:600 13px/1.2 Inter,sans-serif;padding:calc(var(--section-gap) / 2) var(--section-gap);border:1px solid var(--border,#e4e4ea);border-radius:999px;background:transparent;color:var(--font-grey,#6e6f79);cursor:pointer}
.gh-tabs button[aria-selected="true"]{color:var(--font,#1a1817);border-color:currentColor}
.gh-panel+.gh-panel{margin-top:calc(var(--section-gap) * 1.5)}
.gh-js .gh-panel+.gh-panel{margin-top:0}
.gh-cap{margin:0;font-size:14px;font-weight:600}
.gh-level{margin:calc(var(--section-gap) / 2) 0 var(--section-gap);font-variant-numeric:tabular-nums}
.gh-level .gh-lvl{font-weight:650}
.gh-chart .sec-head{margin-bottom:calc(var(--section-gap) * 1.5)}
.gh-chart .chart-legend{margin-bottom:var(--section-gap)}
@media (min-width:641px){
  table.gh-prov thead th{padding-bottom:calc(var(--section-gap) / 2)}
  table.gh-prov tbody td{padding-top:calc(var(--section-gap) / 2);padding-bottom:calc(var(--section-gap) / 2);line-height:var(--lh-relaxed)}
}
@media (max-width:640px){
  .gh-tabs{display:grid;grid-template-columns:1fr 1fr}
  .gh-tabs[hidden]{display:none}
  .gh-prov.cmp-tbl.stack tr{padding:var(--section-gap) 0}
  .gh-prov.cmp-tbl.stack tbody tr:first-child{padding-top:0}
  .gh-prov.cmp-tbl.stack td{padding:calc(var(--section-gap) / 2) 0;line-height:var(--lh-relaxed)}
  .gh-prov.cmp-tbl.stack td:first-child{padding-bottom:calc(var(--section-gap) / 2)}
}
/* #377: links under the hub headline (GPU index, suppliers), no figures. */
.cmp-next .cmp-next-main{font-weight:600}
.cmp-next{display:flex;flex-wrap:wrap;gap:calc(var(--section-gap) / 2) calc(var(--section-gap) * 1.5);margin:var(--section-gap) 0 calc(var(--section-gap) * 1.5);line-height:var(--lh-relaxed)}

/* Compute hub headline (gpu_headline.hub_headline_html): one large figure, a short stat row, the index ID, settlement line and
   methodology in a closed Cite · Methodology disclosure. Gaps stay on --section-gap at 1/2, 1, 1.5 or 2. */
#h100 .gh-hub{background:var(--white,#fff);border:1px solid var(--border,#e6e6eb);border-radius:var(--radius,12px);box-shadow:var(--card-shadow);padding:calc(var(--section-gap) * 1.5) calc(var(--section-gap) * 2)}
#h100 .gh-q{margin:calc(var(--section-gap) / 2) 0 0;font-family:var(--font-serif);font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--font-grey-dk,#36363c)}
#h100.gh-head .gh-big{font-size:72px;line-height:1}
#h100 .gh-unit{margin-left:10px;font:500 16px/1 Inter,sans-serif;letter-spacing:0;color:var(--font-grey,#6e6f79)}
#h100.gh-head .gh-big.gh-empty{font-size:20px;line-height:var(--lh-relaxed)}
#h100 .gh-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:calc(var(--section-gap) / 2) calc(var(--section-gap) * 2);margin-top:calc(var(--section-gap) * 1.5);padding-top:var(--section-gap);border-top:1px solid var(--border,#e6e6eb)}
#h100 .gh-stat .k{display:block;margin-bottom:4px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--font-grey,#6e6f79)}
#h100 .gh-stat .v{font-size:15px;line-height:var(--lh-relaxed);font-variant-numeric:tabular-nums;color:var(--font-grey-dk,#36363c)}
#h100 .gh-stat .gh-quotes a,#h100 .gh-stat .v a{white-space:nowrap}
#h100 .gh-stat .gh-fresh{font-size:13px;color:var(--font-grey,#6e6f79)}
#h100 .gh-paren{font-size:13px;color:var(--font-grey,#6e6f79)}
#h100 .gh-hub-note{margin:var(--section-gap) 0 0;font-size:13px;line-height:var(--lh-relaxed);color:var(--font-grey,#6e6f79)}
#h100 .gh-cite{margin-top:var(--section-gap);font-size:13px;line-height:var(--lh-relaxed);color:var(--font-grey,#6e6f79)}
#h100 .gh-cite>summary{cursor:pointer;width:max-content;font:600 11px/1.6 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
#h100 .gh-cite .mono{margin:calc(var(--section-gap) / 2) 0 0}
#h100 .gh-cite .gh-settle{margin-top:calc(var(--section-gap) / 2)}
#h100 .gh-cite .sec-link{display:inline-block;margin-top:calc(var(--section-gap) / 2)}
@media (max-width:640px){
  #h100 .gh-hub{padding:var(--section-gap)}
  #h100 .gh-q{font-size:19px}
  #h100.gh-head .gh-big{font-size:46px}
  #h100 .gh-unit{display:block;margin:8px 0 0}
  #h100 .gh-stats{gap:calc(var(--section-gap) / 2) calc(var(--section-gap) * 1.5)}
}

/* Compute hub (build_compute.landing + gpu_board, Mason's Nov 3 mockup): title, 'GPU cloud prices · N GPUs tracked ⓘ', the H100
   headline, two links and the GPU price board. Provenance only behind the ⓘ (<details>, opens on tap). Generous spacing. */
.cx-header h1{font-size:52px;line-height:1.1}
.cx-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cx-info{position:relative;display:inline-block;vertical-align:middle}
.cx-info>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.3px solid var(--font-grey,#6e6f79);border-radius:50%;font:italic 600 11px/1 Georgia,serif;color:var(--font-grey,#6e6f79);cursor:pointer}
.cx-info>summary::-webkit-details-marker{display:none}
.cx-info>summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cx-pop{position:absolute;z-index:30;top:calc(100% + 8px);left:-8px;width:min(340px,80vw);padding:12px 14px;background:var(--card-bg,#fff);color:var(--font,#16161a);border:1px solid var(--border,#e4e4ea);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);font-size:13px;font-weight:400;line-height:var(--lh-relaxed,1.6);text-transform:none;letter-spacing:0;white-space:normal}
.cx-board{width:100%}
.cx-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cx-tbl th,.cx-tbl td{padding:0 8px;height:56px;border-bottom:1px solid var(--border,#e6e6eb);text-align:left;font-weight:400}
.cx-tbl thead th{height:auto;padding-bottom:10px;border-bottom:1px solid var(--font,#16161a);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--font-grey,#6e6f79);white-space:nowrap}
.cx-tbl .cx-g{font-size:15.5px;font-weight:500}
.cx-tbl .cx-g a{color:inherit;text-decoration:none}
.cx-tbl .cx-g a:hover{text-decoration:underline}
.cx-tbl .cx-sp{width:110px}
.cx-tbl .cx-px,.cx-tbl .cx-chg{text-align:right}
.cx-tbl td.cx-px{width:130px;font-family:var(--font-serif);font-size:21px}
.cx-tbl td.cx-chg{width:90px;font-size:14.5px;font-weight:500}
.cx-spark{display:block}
.cx-spark polyline{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke:var(--font-grey,#6e6f79)}
.cx-spark.cx-up polyline{stroke:var(--green,#0b7348)}
.cx-spark.cx-dn polyline{stroke:var(--red,#b3261e)}
.cx-spark.cx-none line{stroke:var(--border,#e6e6eb);stroke-width:1.5;stroke-dasharray:3 4}
.cx-chg .cx-up{color:var(--green,#0b7348)}
.cx-chg .cx-dn{color:var(--red,#b3261e)}
.cx-chg .cx-flat,.cx-chg .cmp-na{color:var(--font-grey,#6e6f79)}
.cx-compare{margin-bottom:calc(var(--section-gap) * 1.5);padding:20px 22px 16px;border:1px solid var(--border,#e6e6eb);border-radius:6px;background:var(--card-bg,#fff)}
.cx-compare>summary{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;font-weight:500;cursor:pointer}
.cx-compare text{font:11px Inter,sans-serif;fill:var(--font-grey,#6e6f79)}
.cx-compare .cx-zero{stroke:var(--border,#e6e6eb)}
.cx-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:12.5px;color:var(--font-grey,#6e6f79)}
.cx-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}
body:has(#gpu-board) .cmp-next{gap:calc(var(--section-gap) * .75) calc(var(--section-gap) * 1.5);padding-top:calc(var(--section-gap) * 1.5);border-top:1px solid var(--border,#e6e6eb)}
body:has(#gpu-board) main.page>#gpu-board,body:has(#gpu-board) main.page>.cmp-next{margin-top:calc(var(--section-gap) * 2.5)!important}
@media (max-width:640px){
  .cx-header h1{font-size:42px}
  .cx-tbl th,.cx-tbl td{padding:0 4px;height:50px}
  .cx-tbl .cx-g{font-size:14.5px}
  .cx-tbl .cx-sp{width:60px}
  .cx-tbl thead .cx-sp{font-size:0}
  .cx-spark{width:56px}
  .cx-tbl td.cx-px{width:auto;font-size:18px}
  .cx-tbl td.cx-chg{width:62px;font-size:13.5px}
  .cx-tbl thead th{font-size:11px;letter-spacing:.03em}
  .cx-sub,#h100 .gh-q,.cx-head-label{position:relative}
  .cx-info{position:static}
  .cx-pop{left:0;right:0;width:auto}   /* anchored to the subtitle, so it stays on screen */
}


/* Hub freshness (build_compute.landing): the 'Updated ~N ago' badge is hidden while fresh (its text is in the subtitle (i),
   .cx-updated); js/freshness.js sets data-state="stale-badge" past the 4.5 h threshold and the 'Delayed' badge shows as on every page. */
.cx-asof:not([data-state="stale-badge"]){display:none}
.cx-pop .cx-updated{margin:8px 0 0}

/* Hub H100 headline (gpu_headline.hub_headline_html with info=): the (i) sits after the question; its popover holds the index ID,
   live-print time, settlement line and methodology link. */
#h100 .gh-q .cx-info{margin-left:6px}
.cx-pop{font-family:Inter,sans-serif}
.cx-pop>p{margin:6px 0 0}
.cx-pop>p:first-child{margin-top:0}
.cx-pop .mono{font-size:12px}

/* Hub lead (gpu_board.head_html, Nov 3): the market-level median of the board's prices, its GPU count and fixed-basket 7-day change. */
main.page>.cx-head{margin-top:calc(var(--section-gap) * 1.5)!important}
.cx-head-label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--font-grey-dk,#36363c)}
.cx-head-px{margin:10px 0 0;font-family:var(--font-serif);font-size:72px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cx-head-meta{display:flex;flex-wrap:wrap;gap:6px 28px;margin:14px 0 0;font-size:14.5px;color:var(--font-grey,#6e6f79)}
.cx-head-chg .k{margin-right:6px}
.cx-head-chg .cx-up,.cx-head-chg .cx-dn{font-weight:500}
.cx-tbl .cx-pv{width:90px;text-align:right}
.cx-tbl td.cx-pv{color:var(--font-grey,#6e6f79);font-size:14px}
@media (max-width:640px){
  .cx-tbl .cx-pv{width:40px}
  .cx-tbl td.cx-pv{font-size:13px}
  .cx-tbl thead .cx-pv{font-size:0}
  .cx-tbl thead .cx-pv::after{content:'#';font-size:11px}
  .cx-head-px{font-size:56px}
}