/* Eight lessons gather a loose sketch into a page. Scoped to this hero only. */
.landing-page .hero--assembly .hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(20px, 3vw, 46px); }
.landing-page .hero--assembly .hero-content { z-index: 2; }
.landing-page .hero--assembly .hero-actions { gap: 12px; }
.landing-page .hero--assembly .hero-action-note { max-width: 350px; line-height: 1.5; }
.landing-page .hero--assembly .hero-assembly { min-width: 0; margin: 0; position: relative; align-self: center; }
.landing-page .hero--assembly .hero-assembly-art { position: relative; }
.landing-page .hero--assembly .ha-scene { display: block; width: 118%; max-width: none; margin-left: -8%; overflow: visible; font-family: var(--brand-font); }
.landing-page .hero--assembly .ha-field { opacity: .13; }
.landing-page .hero--assembly .ha-paths { opacity: .6; }
.landing-page .hero--assembly .ha-paths path { vector-effect: non-scaling-stroke; }
.landing-page .hero--assembly .ha-finish { opacity: 1; transition: opacity .8s ease; }
.landing-page .hero--assembly .ha-scene.is-assembling .ha-finish { opacity: 0; }
.landing-page .hero--assembly .ha-caption { display: flex; align-items: center; gap: 11px; margin: -18px 0 0 6%; color: #e1ecff; font-size: .71rem; }
.landing-page .hero--assembly .ha-caption-line { width: 25px; height: 1px; background: #b5eddf; }
.landing-page .hero--assembly .ha-caption-count { margin-left: auto; padding-right: 13%; color: #d7e2ff; }
.landing-page .hero--assembly .hero-assembly figcaption { margin: 28px 0 0 6%; color: #d7e2ff; font-size: .72rem; }
.landing-page .hero--assembly .hero-example-link { font-size: .8rem; }
.landing-page .hero--assembly .hero-example-note { margin-top: 4px; }
@media (max-width: 900px) {
  .landing-page .hero--assembly .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .landing-page .hero--assembly .ha-scene { width: 135%; margin-left: -15%; }
  .landing-page .hero--assembly .ha-caption { flex-wrap: wrap; margin-top: 0; }
  .landing-page .hero--assembly .ha-caption-count { margin-left: 0; }
}
@media (max-width: 700px) {
  .landing-page .hero--assembly .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 33px 28px; min-height: 0; }
  .landing-page .hero--assembly .hero-content { display: block; }
  .landing-page .hero--assembly .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
  .landing-page .hero--assembly .hero-actions .button { flex: 1 0 100%; min-height: 55px; }
  .landing-page .hero--assembly .hero-action-note { flex: 1 0 100%; max-width: 100%; font-size: .73rem; }
  .landing-page .hero--assembly .hero-actions .text-button { margin: 0; font-size: .84rem; }
  .landing-page .hero--assembly .hero-footnote { margin-top: 23px; }
  .landing-page .hero--assembly .hero-assembly { width: 100%; order: 2; }
  .landing-page .hero--assembly .hero-assembly-art { max-width: 345px; margin: auto; }
  .landing-page .hero--assembly .ha-scene { width: 100%; height: 280px; margin: 0; }
  .landing-page .hero--assembly .ha-caption { justify-content: center; margin: 6px 0 0; font-size: .66rem; }
  .landing-page .hero--assembly .ha-caption-count { padding: 0; margin-left: 5px; }
  .landing-page .hero--assembly .hero-assembly figcaption { margin: 17px 0 0; text-align: center; font-size: .67rem; }
  .landing-page .hero--assembly .hero-example-link { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .hero--assembly .ha-finish { opacity: 1!important; transition: none; }
}
@media print { .landing-page .hero--assembly .hero-assembly { display: none; } }