/* Page-level styles. */
.hero { padding: calc(var(--sp)*16) 0 calc(var(--sp)*10); }
.hero .grid { align-items: center; }
.hero pre { margin: 0; font-size: .85rem; }
.pricing-card .price { font-size: 2.25rem; font-weight: 500; }
.pricing-card .price small { font-size: .9rem; font-weight: 400; color: var(--md-sys-color-on-surface-variant); }
.pricing-card ul { padding-left: 18px; margin: 12px 0; }
.builder { display: grid; grid-template-columns: 1fr 340px; gap: calc(var(--sp)*8); }
@media (max-width: 860px) { .builder { grid-template-columns: 1fr; } }
.builder-summary { position: sticky; top: 88px; align-self: start; }
.builder-summary .num { font-size: 2.5rem; font-weight: 500; }
.doc-body h2 { margin-top: calc(var(--sp)*10); }
.doc-body h3 { margin-top: calc(var(--sp)*6); }
.doc-body table code { white-space: nowrap; }
.usage-bars { display: flex; gap: 3px; align-items: flex-end; height: 80px; }
.usage-bars span { flex: 1; background: var(--md-sys-color-primary-container); border-radius: 2px 2px 0 0; min-height: 2px; }
.endpoint { font-family: var(--md-sys-typescale-mono); font-size: .95rem; }
.endpoint .m { color: var(--md-sys-color-tertiary); font-weight: 600; margin-right: 8px; }
.stepper { display: flex; gap: 8px; align-items: center; margin-bottom: calc(var(--sp)*6); }
.stepper span { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-surface-container-highest); font-weight: 500; }
.stepper span.active { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

.art { width: 100%; height: auto; display: block; border-radius: 0; mix-blend-mode: multiply; }
.art-banner { max-height: 360px; object-fit: cover; object-position: right center; }
.hero-art-wrap { background: transparent; }