/* Builder landing pages. Content and diagrams use the current site tokens. */
.builder-head { padding-bottom: clamp(2rem, 5vw, 4rem); }
.builder-head .builder-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.builder-head .sc-display { max-width: 15ch; font-size: clamp(2.5rem, 4.8vw, 4.6rem); line-height: 1.04; }
.builder-head .sc-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; }
.builder-head .builder-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sc-6); }
.builder-figure { margin: 0; min-width: 0; }
.builder-figure img { display: block; width: 100%; height: auto; }
.builder-figure figcaption { font-size: .85rem; line-height: 1.5; color: var(--sc-ink-soft); margin: .85rem 0 0; max-width: 48ch; }
.builder-crumb { margin-bottom: 2rem; }
.builder-crumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem .65rem; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.builder-crumb li + li::before { content: "/"; margin-right: .65rem; color: var(--sc-ink-soft); }
.builder-crumb a { color: inherit; text-underline-offset: .2em; }
.builder-page .sc-section { padding-block: clamp(2.3rem, 5vw, 4.25rem); }
.builder-page [data-sc-in], .builder-page [data-sc-stagger] > * { opacity: 1; transform: none; transition: none; }
.builder-page .split { gap: clamp(1.5rem, 5vw, 5rem); }
.builder-page .prose { max-width: 65ch; }
.builder-page .prose p + p { margin-top: 1rem; }
.builder-page .card h3 { font-size: 1.12rem; }
.builder-page .card { min-width: 0; }
.builder-page .step code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }
.builder-page a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 5px; }
@media (max-width: 850px) {
  .builder-head .builder-hero { grid-template-columns: 1fr; gap: 2rem; }
  .builder-head .sc-display { max-width: 20ch; font-size: clamp(2.35rem, 6.6vw, 3.7rem); }
  .builder-figure { max-width: 36rem; }
}
@media (max-width: 420px) {
  .builder-head .sc-display { font-size: clamp(2.15rem, 9vw, 2.5rem); }
  .builder-head .builder-actions .cta { padding-inline: 1.05rem; }
  .builder-page .grid--2 { grid-template-columns: 1fr; }
}