#example { scroll-margin-top: 76px; }
.example-photo { margin: 28px 0 0; }
.example-photo img { display: block; width: 100%; height: auto; border: 1px solid #416575; border-radius: 7px; }
.example-photo figcaption { margin-top: 9px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.steel-cost-card .cost-eyebrow { margin: 0; color: var(--mint); font: 700 .75rem 'Space Grotesk', sans-serif; letter-spacing: .13em; }
.steel-cost-card .cost-price { margin: 12px 0 0; color: var(--text); font: 700 clamp(2.5rem, 4.5vw, 4.1rem) 'Space Grotesk', sans-serif; line-height: 1.05; }
.steel-cost-card .cost-price span { display: block; margin-top: 7px; color: var(--muted); font: 500 .9rem 'DM Sans', sans-serif; }
.steel-cost-card .cost-material { margin: 18px 0 20px; font-size: .9rem; }
.steel-cost-card .cost-value { margin: 24px 0 0; padding: 18px 20px; background: #123c3c; border-left: 4px solid var(--mint); }
.steel-cost-card .cost-value strong { display: block; color: #8cf5c8; font: 700 2.15rem 'Space Grotesk', sans-serif; }
.steel-cost-card .cost-value span { display: block; margin-top: 3px; color: #c4d6d5; font-size: .84rem; }
.steel-cost-card .cost-clarifier { margin-top: 16px; font-size: .83rem; line-height: 1.55; }
[data-theme="light"] .example-photo img { border-color: #b4d0dd; }
[data-theme="light"] .steel-cost-card .cost-value { background: #e3f5f0; }
[data-theme="light"] .steel-cost-card .cost-value strong { color: #13664e; }
[data-theme="light"] .steel-cost-card .cost-value span { color: #3f5d68; }
@media (max-width: 720px) {
  .steel-cost-card .metric-card dd, .steel-cost-card dd { white-space: normal; }
  .steel-cost-card .cost-value strong { font-size: 1.9rem; }
}

.steel-cost-card dl div { flex-wrap: wrap; }
.steel-cost-card dd { font-size: clamp(.94rem, 1.45vw, 1.15rem); }
.steel-cost-card .paired-area { white-space: nowrap; }