/* Final composition pass: keep the approved Woolly scenes and product intact. */

/* Let the product enter the first desktop viewport a little sooner. */
@media (min-width:801px) {
  .hero { padding-top:calc(var(--nav) + 20px); }
  .hero h1 { margin-block:13px 12px; }
  .hero-actions { margin-top:18px; }
  .reassurance { margin-top:10px; }
}

/* On phones, reclaim vertical space from gaps, not from the message itself. */
@media (max-width:800px) {
  .hero { padding-top:calc(var(--nav) + 16px); }
  .hero h1 { margin-block:15px; }
  .hero-actions { margin-top:17px; }
  .reassurance { margin-top:8px; }
  .wool-stage,
  .scroll-scenes .wool-stage { padding-top:126px; }
}

/* Keep Charlie's face and the wiki link from competing at tablet widths. */
@media (min-width:801px) and (max-width:1100px) {
  .wool-footer.footer-shelter::before {
    background:linear-gradient(90deg,
      #faf9f6 0%,
      #faf9f6 49%,
      #faf9f6f5 60%,
      #faf9f6b8 76%,
      transparent 91%);
  }
}

/* Preserve the illustration on wide screens while giving the content a quiet zone. */
@media (min-width:1101px) {
  .wool-footer.footer-shelter::before {
    background:linear-gradient(90deg,
      #faf9f6 0%,
      #faf9f6f5 44%,
      #faf9f6e8 58%,
      #faf9f67d 72%,
      transparent 88%);
  }
}

.wool-footer.footer-shelter .footer-info { position:relative; z-index:1; }