/* GPUwerk content template: /dgx-spark/ guides and comparisons, /gpus/ tier
 * subpages. Loaded only on those pages, before design.css (sync-nav.py moves
 * design.css to the end of <head>), so every rule here is scoped tightly
 * enough to win where it has to. Shared article components (tables, FAQ,
 * callouts, verdict, doc-steps, code) live in design.css. */

/* ---- step guides: the first numbered step carries the accent ----
 * design.css uses :first-of-type, which misses step 01 when an unnumbered
 * intro h2 (class no-step) comes first. */
.article.doc-steps > h2:not(.no-step)::before { -webkit-text-stroke-color:var(--accent); }
.article.doc-steps > h2:not(.no-step) ~ h2:not(.no-step)::before { -webkit-text-stroke-color:var(--border-hi); }

/* ---- tables: keep the sr-only "(advantage)" text inside the scroller ----
 * .sr-only is position:absolute; without a positioned ancestor inside the
 * overflow:auto wrapper it escapes the scroll clip and widens the page on
 * phones (tco, vs/rtx-5090: 4-column tables). Shared fix belongs in design.css. */
.article .compare-table, .article .bench-table { position:relative; }

/* ---- rent-vs-buy calculator result: a result, not a note ---- */
.article #rvb-result { border-left-color:var(--accent); color:var(--text); font-size:16px; }
.article #rvb-result b { color:var(--text); }

/* ---- /gpus/ tier subpages: lx- landing parts ---- */
.gx-hero.lx-hero { padding-bottom:72px; }
.gx-hero .lx-sub { max-width:62ch; }
.gx-hero .callout.warn { max-width:62ch; margin:28px 0 0; font-size:15.5px; color:var(--text-dim); }

/* key/value spec tables (same as .lx-spec-table on the /dgx-spark/ hub) */
.lx-band .lx-spec-table { width:100%; border-top:1px solid var(--border-hi); }
.lx-band .lx-spec-table caption { text-align:left; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); padding-bottom:14px; }
.lx-band .lx-spec-table th { color:var(--text-dim); font-weight:500; width:40%; }
.lx-band .lx-spec-table td { color:var(--text); font-weight:600; }
.lx-band .lx-split .lx-fine { margin-top:20px; padding-top:0; border-top:0; }
.lx-band .lx-split-head .lx-lede { margin-bottom:0; }

/* "What would you run on it?": two-column hairline rows, no meta column */
.lx-band .gx-rows { margin-top:8px; }
.lx-band .gx-rows .lx-row { grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); }

/* servers: two offers as oversized figures with their terms below */
.lx-band .gx-offer { margin-top:56px; }
.lx-band .gx-offer .lx-figure b { font-size:clamp(44px,5.6vw,80px); }
.lx-band .gx-offer .lx-figure h3 { margin-bottom:22px; color:var(--text-dim); font-weight:500; }
.lx-band .gx-offer .lx-spec-table th, .lx-band .gx-offer .lx-spec-table td { font-size:14.5px; }
.lx-band .gx-offer + .lx-fine { margin-top:48px; }

@media (max-width:960px) {
  .lx-band .gx-rows .lx-row { grid-template-columns:1fr; }
  .lx-band .gx-offer { row-gap:56px; }
}
@media (max-width:560px) {
  .gx-hero.lx-hero { padding-bottom:56px; }
  .lx-band .lx-spec-table th { width:42%; padding-right:12px; }
  .lx-band .gx-offer .lx-figure { padding:0; border-left:0; }
}