.coming-soon-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 18%, rgba(219, 190, 148, .22), transparent 24rem),
    radial-gradient(circle at 88% 74%, rgba(194, 157, 111, .14), transparent 25rem),
    var(--storefront-ivory);
}
.coming-soon-main { display: grid; place-items: center; min-height: 67vh; padding: 80px 6vw 110px; }
.coming-soon-card {
  width: min(700px, 100%);
  padding: clamp(36px, 7vw, 78px) clamp(24px, 7vw, 74px);
  border: 1px solid rgba(173, 139, 93, .35);
  background: rgba(255, 253, 249, .8);
  box-shadow: 0 24px 60px rgba(52, 43, 37, .1);
  text-align: center;
}
.coming-soon-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 24px; border: 1px solid var(--storefront-gold); border-radius: 50%; color: var(--storefront-gold-dark); font-size: 23px; }
.coming-soon-card h1 { max-width: 590px; margin: 14px auto 18px; color: var(--storefront-brown); font: 500 clamp(43px, 6vw, 74px)/.95 var(--storefront-heading); letter-spacing: -.025em; }
.coming-soon-card > p:not(.storefront-eyebrow):not(.coming-soon-note) { max-width: 500px; margin: 0 auto; color: var(--storefront-muted); font: 18px/1.6 var(--storefront-heading); }
.coming-soon-note { max-width: 480px; margin: 22px auto 0; color: var(--storefront-muted); font-size: 12px; line-height: 1.7; }
.coming-soon-card .storefront-dark-button { margin-top: 30px; }
@media (max-width: 600px) {
  .coming-soon-main { min-height: 62vh; padding-top: 52px; }
  .coming-soon-card { padding: 38px 22px 44px; }
  .coming-soon-card h1 { font-size: 46px; }
}