/* Two-panel section.

   This file was originally the stylesheet for the rotating hero (left-column copy
   carousel, right-column chunk matrix / degree-of-freedom bars / parameter bars, and
   the progress dots at the bottom). That hero has been superseded by landing.css's
   .lp-*, and the corresponding 31 selectors — .hero-* / .vis / .chunk / .dim* /
   .gpu* / .tk / .hdot — no longer appear on any page, so they have been deleted
   wholesale.
   {index.html:35 — TRANSLATED FROM THE CHINESE ORIGINAL: "HOMEPAGE-SPECIFIC: HERO
    SHELL + THE TILES ON BOTH SIDES + THE DOT-MATRIX SPHERE. PLACED AFTER hero.css,
    BECAUSE IT HAS TO OVERRIDE THE OLD RULES FOR THE SAME AREAS IN hero.css."}
   [CONFIDENCE: CONFIRMED 100% — before deleting, a class extraction and comparison was
    run over all HTML (including tools/), and these 31 selectors had zero references;
    the .duo* / .pane* / .ramp that were kept are still used by index.html and
    models/index.html]

   The filename is kept as hero.css: renaming it would mean updating two <link> tags in
   step, and the rename itself deletes nothing, so it is left for whichever change next
   needs to touch those two pages.

   ── What follows is the part still in use ──────────────────────────────
   A full-width statement, then the two things we sell set side by side with
   one of them inverted. Two identical panels read as a list of features;
   one dark and one light reads as a choice between two paths. */

/* ── Two-panel section ───────────────────────────────────────────────
   A full-width statement, then the two things we sell set side by side with
   one of them inverted. Fireworks puts Training against Inference this way and
   the inversion is doing real work: two identical panels read as a list of
   features, one dark and one light reads as a choice between two paths.

   Ours is Serverless against Fine-tuning, because those are the two ways a
   policy is reached — call ours, or make it yours. */
.duo-head{padding:96px 0 56px}
.duo-eyebrow{
  font-family:var(--font-ui);font-size:11.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--signal);margin-bottom:20px;
}
.duo-h{
  font-family:var(--font-display);font-size:clamp(32px,3.6vw,72px);
  line-height:1.06;letter-spacing:-0.022em;font-weight:600;max-width:19ch;
}
.duo-lede{margin-top:26px;max-width:64ch;font-size:clamp(17px,1.1vw,23px);line-height:1.62;
  color:var(--on-ink-muted)}

.duo{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink-line)}
.pane{padding:56px 52px 62px}
/* The inverted pane carries its own foreground colours rather than relying on
   inheritance: half the tokens on this page assume a paper background, and a
   panel that flips the surface has to flip them all or the text disappears. */
.pane.dark{background:var(--on-ink);color:#FFFFFF}
.pane.dark .pane-eyebrow{color:rgba(255,255,255,0.62)}
.pane.dark .pane-h,.pane.dark .pane-li strong{color:#FFFFFF}
.pane.dark .pane-rule{background:rgba(255,255,255,0.28)}
.pane.dark .pane-p,.pane.dark .pane-li{color:rgba(255,255,255,0.78)}
.pane.dark .pane-dot{background:var(--signal)}
.pane.light{border-left:1px solid var(--ink-line)}

.pane-eyebrow{font-family:var(--font-ui);font-size:11px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--signal);margin-bottom:16px}
.pane-h{font-family:var(--font-display);font-size:clamp(26px,2.5vw,52px);
  letter-spacing:-0.022em;font-weight:600;color:var(--on-ink)}
.pane-rule{height:1px;background:var(--ink-line);margin:22px 0 22px}
.pane-p{font-size:clamp(16px,1.02vw,21px);line-height:1.62;color:var(--on-ink-muted);margin-bottom:22px}
.pane-list{list-style:none;display:grid;gap:15px}
.pane-li{display:grid;grid-template-columns:8px 1fr;gap:13px;align-items:start;
  font-size:clamp(15.5px,0.98vw,20px);line-height:1.6;color:var(--on-ink-muted)}
.pane-li strong{color:var(--on-ink);font-weight:500}
.pane-dot{width:5px;height:5px;border-radius:50%;background:var(--signal);margin-top:9px}

@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .pane.light{border-left:0;border-top:1px solid var(--ink-line)}
  .pane{padding:34px 24px 38px}
}


/* The bullet in each pane picks up the pane's own hue rather than amber for
   both — serverless and fine-tuning are two paths, and the dot is the
   cheapest place to say so. */
.pane.dark .pane-dot{background:var(--b2)}
.pane.light .pane-dot{background:var(--b1)}

/* A ramp under each pane heading, the matrix motif at one-row scale. */
.pane .ramp{margin:18px 0 0;opacity:.9}

/* The sub-line under each bar: how many frames that model reads per call, and
   for the one sparse model, why its bar is drawn hollow. Sits in the track
   column so it reads as an annotation on the bar rather than a new row. */
.lat-hw{font-family:var(--font-ui);font-size:10.5px;color:var(--on-ink-dim);
  margin:-3px 0 7px 172px;   /* = name column 156 + gap 16; change the column width and this must change with it */
  letter-spacing:0.045em;text-transform:uppercase}
/* The indent must equal "name column + gap", otherwise the sub-line does not line up with
   the bar it annotates.
   Once the narrow-screen column width became 96px this is 96+16=112; leaving it at the
   previous 120 would be 8px out of alignment. */
@media (max-width:980px){.lat-hw{margin-left:112px}}