/* ═══════════════════════════════════════════════════
   SECTION: coming-soon — a route that exists but is not written yet

   Deliberately close to the 404 in shape: one centred column, generous height
   so the footer does not ride up a nearly empty page. The two are cousins —
   both explain an absence — and looking alike is honest rather than lazy.

   The difference is the tone. A 404 says nothing is here. This says something
   is here, it is just not written down yet, and here is a person who can tell
   you about it.
═══════════════════════════════════════════════════ */

#coming-soon {
  min-height: 100vh;
  /* Mobile browsers measure vh against the viewport with the address bar
     hidden, so 100vh is taller than what is actually on screen and the last
     line sits under the chrome. dvh measures what is really visible; the vh
     line above stays as the fallback for anything that does not know it. */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-section) 0;
}

.cs-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cs-h1 {
  max-width: 20ch;
  font-family: var(--f-display);
  font-size: var(--fs-700);
  font-weight: var(--fw-black);
  letter-spacing: -.045em;
  line-height: 1.05;
  color: var(--c-text-1);
  text-wrap: balance;
}

.cs-intro {
  max-width: 52ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-300);
  line-height: 1.75;
  color: var(--c-text-2);
}

.cs-body {
  max-width: 52ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-300);
  line-height: 1.75;
  color: var(--c-text-3);
}

.cs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

@media (max-width: 640px) {
  .cs-inner { padding: 0 var(--sp-6) }
  .cs-actions { margin-top: var(--sp-8); width: 100% }
  .cs-actions .btn-p, .cs-actions .btn-g { flex: 1 1 100%; justify-content: center }
}