/* ============================================================
   "This page is on its way", on the main-direction system (styles.css + nav-a.css).
   One orange field the height of the screen: the sentence in the middle, the legal line at the foot.
   ============================================================ */

[hidden] { display: none !important; }

.soon {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(clamp(40px, 6vw, 72px) + 76px) 0 0;
}
.soon > .wrap { width: 100%; }
.soon-page { color: var(--roast-soft); margin-bottom: var(--s-lg); }
.soon .hero-type { max-width: 12ch; }
.soon .hero-sub { margin-top: var(--s-xl); }

.soon-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-md) var(--s-xl); margin-top: clamp(28px, 4vw, 40px); }
.soon-go { background: var(--roast); color: var(--cream); }
.soon-go:hover { background: var(--roast-soft); }
.soon-ask { padding: 12px 0; font-family: var(--sora); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--roast); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.soon-ask:hover { color: var(--roast-soft); }

/* The sentence takes the middle; the legal line sits at the foot of the field. */
.soon > .wrap:first-child { margin-block: auto; padding-block: var(--s-xxl); }
.soon .soon-foot { align-items: stretch; }
.soon-foot { padding-bottom: max(clamp(28px, 4vw, 40px), env(safe-area-inset-bottom, 0px)); }
.soon-foot .footer-legal a { color: var(--roast); text-decoration: none; }

@media (max-width: 720px) {
  .soon { padding-top: 100px; }
  .soon-actions { flex-direction: column; align-items: stretch; }
  .soon-ask { text-align: center; }
}