/* Coming-soon page. Only the design's tokens and component classes are used here: no colour is written in
   this file (build.mjs refuses a colour literal). tokens.css and components.css are copied in by build.mjs
   from site/src/design, the one place the site reads the design from. */

body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* First visit follows the device: the bundle swaps the logo only under [data-theme='dark'], and this page has
   no theme switch, so a dark device must still show the reversed logo (same rule as site/src/app/globals.css). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .iz-only-light { display: none !important; }
  :root:not([data-theme='light']) .iz-only-dark { display: inline-block !important; }
}

.cs { flex: 1; display: grid; place-items: center; padding: var(--space-8) var(--space-5) var(--space-7); }
.cs__inner { box-sizing: border-box; width: 100%; max-width: var(--prose-max); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }

.cs__logo { height: auto; margin-bottom: var(--space-4); }

.cs .iz-eyebrow, .cs .iz-display, .cs .iz-lead { margin: 0; }
/* Each line of the lead is its own block, so each balances on its own and no word is left alone on a phone. */
.cs .iz-lead span { display: block; text-wrap: balance; }

.cs__note { margin: 0; max-width: 34em; font-size: 15px; line-height: 26px; color: var(--ink-muted); text-wrap: balance; }

.cs__contact { justify-content: center; align-items: center; margin-top: var(--space-4); }

.cs__foot { padding: var(--space-5) var(--space-5) var(--space-6); text-align: center; font-size: 12px; line-height: 18px; letter-spacing: .04em; color: var(--ink-muted); }

@media (max-width: 640px) {
  .cs { padding-top: var(--space-7); }
  /* Primary buttons go full width on phones (brand book: Space and layout). */
  .cs__contact { flex-direction: column; align-items: stretch; width: 100%; }
  /* The text link keeps its own width: stretched, its underline would run edge to edge. */
  .cs__contact .iz-btn--link { align-self: center; }
}