/* Figurome product page, site version 0.6. The one per-product file a product page may add (see DESIGN-v0.6.md).
   Everything shared lives in /assets/site.css; this file only tunes the Figurome page. */
[data-product="figurome"] .phero{background:var(--fg-band);padding-bottom:0}
[data-product="figurome"] .phero .keypts{margin-bottom:0;border-bottom:0}
[data-product="figurome"] .phero+.sect{padding-top:64px}
[data-product="figurome"] .phero .callout{margin-top:20px}

/* 2b, base: the template preview from the CD19 box down to the step legend (1600 x 2286 still; y 918 to 1630).
   It stops above the preview caption and the starting parameters so the lens, which sits just below it, never hides their labels;
   the parameters are quoted as live text on phones. The lens crops themselves (card, domains, inspector,
   colours) are cut by scripts/media/build-media.mjs. */
.zoom-base.fg-c-params{overflow:hidden;aspect-ratio:1600/712}
.zoom-base.fg-c-params>img{display:block;max-width:none;width:100%;margin-top:-57.375%}

/* Desktop: these crops are small, so show them near 1:1 rather than at the shared 86% / 80% lens width */
@media (min-width:720px){
  .zoom.has-lens .zoom-lens.fg-domains{width:58%;margin-top:-2%}
  .zoom.has-lens .zoom-lens.fg-inspector{width:54%}
  .zoom.has-lens .zoom-lens.fg-colours{width:40%}
}

/* 2b: the starting parameters as live text under the lens, on every width */
.zoom.fg-params .quote{margin-top:16px}

/* 2e: the Figure 1 loop (620 x 496) in a plate */
.media.fg-loop{aspect-ratio:5/4}

/* Phones: drop the chip in the hero clip's browser bar so "Figurome pre-release build" is not cut short
   (the kicker above already carries the Invite-only beta chip) */
@media (max-width:519px){[data-product="figurome"] .phero .browser-bar .status{display:none}}