/* "How we build your drive" section: pinned 3D stage, captions, legend and step cards. */
#s-build { display: block; min-height: auto; padding-bottom: 24px; }
#s-build .lead { margin-bottom: 14px; }

/* Tall track; the stage inside sticks for the whole scroll. */
.build-track { position: relative; height: calc(var(--steps, 8) * var(--per-step, .75) * 100svh + 100svh); margin: 0 -16px; }
.build-stage { position: sticky; top: var(--stage-top, 0px); height: 100svh; overflow: hidden; background: var(--bg); }
.build-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 760px) {
  .build-track { margin: 0; }
  .build-stage { height: min(100svh, 820px); border-radius: 22px; box-shadow: 0 10px 40px rgba(0,0,0,.06); }
}

/* Loading hint until Three.js has drawn its first frame. */
.build-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; transition: opacity .4s var(--ease); pointer-events: none; }
.build-stage.ready .build-loading { opacity: 0; }

/* Captions pinned to the bottom of the stage, clear of the fixed price bar. */
.build-captions { position: absolute; inset: 0; pointer-events: none; }
.build-caption { position: absolute; left: 20px; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom)); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.build-caption.top { bottom: auto; top: 48px; transform: translateY(-14px); }
.build-caption.on { opacity: 1; transform: none; }
.build-caption .card { pointer-events: auto; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); max-width: 560px; margin: 0 auto; }
.build-caption .kicker { margin-bottom: 4px; font-size: 12px; }
.build-caption h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; line-height: 1.1; }
.build-caption p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.build-caption .spec { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.build-caption .spec span { font-size: 12px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff); border-radius: 999px; padding: 3px 9px; }

/* Step pips down the right edge. */
.build-pips { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.build-pips i { display: block; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: transform .3s var(--ease), background .3s var(--ease); }
.build-pips i.on { background: var(--brand); transform: scale(1.5); }
.build-hint { position: absolute; top: 14px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 13px; transition: opacity .5s var(--ease); }
.build-stage.scrolled .build-hint { opacity: 0; }

/* Cross-section legend, shown to everyone. */
.build-legend { margin-top: 18px; }
.build-legend svg { display: block; width: 100%; height: auto; }
.build-legend .cap { fill: var(--cap, #b98b4f); }
.build-legend text { font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: var(--ink); }
.build-legend text.mm { fill: var(--muted); font-weight: 500; font-size: 13px; }
.build-legend text.on-dark { fill: #fff; }

/* Step cards (static mode shows them open; 3D mode tucks them under "Read the steps"). */
.build-more { margin-top: 14px; }
.build-more summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 10px 0; list-style: none; }
.build-more summary::-webkit-details-marker { display: none; }
.build-more summary::after { content: " ›"; display: inline-block; transition: transform .2s; }
.build-more[open] summary::after { transform: rotate(90deg); }
.build-steps { display: grid; gap: 12px; margin-top: 8px; }
.build-step { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.build-step.noimg { grid-template-columns: 1fr; }
.build-step.noimg .img { display: none; }
.build-step .img { width: 96px; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg,#e9e9ee,#f6f6f8); background-size: cover; background-position: center; }
.build-step .kicker { margin-bottom: 2px; font-size: 11px; }
.build-step h4 { margin: 0 0 4px; font-size: 16px; }
.build-step p { margin: 0; color: var(--muted); font-size: 14px; }
.build-step a { color: var(--brand); font-weight: 600; font-size: 13px; }
.build-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.build-docs a { font-size: 13px; font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.build--static .build-track { display: none; }

@media (prefers-reduced-motion: reduce) {
  .build-caption, .build-pips i, .build-hint { transition: none; }
}