/* Instruction 0009: the comparison is a measured visual, not two unrelated poses. */
.hero-panel.ratio-primary-active .result-stage { display: grid; }
.result-stage { min-height: 294px; }
.scale-visual { align-items: stretch; gap: 0; min-height: 294px; padding: 40px 34px 18px; }
.visual-heading { color: var(--muted); left: 30px; position: absolute; right: 20px; text-align: center; top: 13px; z-index: 1; }
.visual-heading .eyebrow { font-size: 10px; }
.visual-heading small { color: var(--soft); display: block; font-size: 11px; margin-top: 2px; }
.comparison-baseline { border-bottom: 1px solid rgba(211,169,95,.72); bottom: 28px; left: 28px; position: absolute; right: 28px; }
.axis-centerline .comparison-baseline { bottom: 50%; }
.silhouette-wrap { align-items: center; height: 100%; justify-content: flex-end; padding-bottom: 31px; width: auto; }
.silhouette-name { align-items: center; display: flex; flex-direction: column; font-size: 15px; gap: 1px; margin-bottom: 8px; position: static; z-index: 1; }
.silhouette-name span { color: var(--brass); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .11em; }
.silhouette-name b { color: var(--text); font-size: 15px; font-weight: 700; }
.figure,
.source-silhouette .figure,
.target-silhouette .figure { display: block; flex: none; height: var(--figure-height, 112px); margin: 0 0 5px; width: var(--figure-width, 55px); }
.dimension-line { color: var(--text); font-size: 13px; gap: 6px; margin-top: 0; }
.dimension-line i { width: 17px; }
.arrow-mark { align-self: flex-end; font-size: 30px; margin: 0 11px 106px; }
.axis-centerline .silhouette-wrap { min-width: var(--figure-width, 90px); padding-bottom: 0; position: relative; }
.axis-centerline .silhouette-name { left: 50%; margin: 0; position: absolute; top: calc(50% - (var(--figure-height, 72px) / 2) - 38px); transform: translateX(-50%); }
.axis-centerline .figure { left: 50%; margin: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.axis-centerline .dimension-line { left: 50%; margin: 0; position: absolute; top: calc(50% + (var(--figure-height, 72px) / 2) + 6px); transform: translateX(-50%); }
.hero-panel.ratio-primary-active .result-copy { align-content: center; }
.hero-panel.ratio-primary-active .result-caveat { color: var(--brass-bright); }

@media (max-width: 680px) {
  .hero-panel.ratio-primary-active .result-stage { display: block; }
  .result-stage { min-height: 0; }
  .scale-visual { min-height: 244px; padding: 42px 18px 11px; }
  .visual-heading { left: 16px; right: 16px; top: 12px; }
  .visual-heading small { font-size: 10px; }
  .comparison-baseline { bottom: 20px; left: 14px; right: 14px; }
  .axis-centerline .comparison-baseline { bottom: 49%; }
  .silhouette-wrap { padding-bottom: 22px; }
  .silhouette-name { margin-bottom: 5px; }
  .silhouette-name span { font-size: 9px; }
  .silhouette-name b { font-size: 14px; }
  .dimension-line { font-size: 13px; }
  .arrow-mark { font-size: 24px; margin: 0 7px 82px; }
  .axis-centerline .silhouette-name { top: calc(50% - (var(--figure-height, 72px) / 2) - 31px); }
  .axis-centerline .dimension-line { top: calc(50% + (var(--figure-height, 72px) / 2) + 4px); }
}

@media (max-width: 390px) {
  .scale-visual { min-height: 226px; padding-left: 11px; padding-right: 11px; }
  .visual-heading small { font-size: 9px; }
  .silhouette-name b { font-size: 14px; }
  .dimension-line { font-size: 12px; }
  .arrow-mark { margin-left: 4px; margin-right: 4px; }
}