/* Coming soon landing page (option C, "Braces").
   Loaded after site.css, which supplies the tokens. */
.landing {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--space-5);
  background: var(--tint-teal);
  color: var(--ink);
}
.landing .brace {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 700 900px/1 var(--font-display);
  color: var(--brand-teal);
  pointer-events: none;
  user-select: none;
}
.landing .brace-open { left: -150px; }
.landing .brace-close { right: -150px; }

.landing main {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.landing h1 { margin: 0; line-height: 0; width: 100%; }
.landing h1 img { display: block; width: 100%; max-width: 520px; margin: 0 auto; }
.landing .tagline { margin: 0; max-width: 440px; font: 600 22px/30px var(--font-display); color: var(--ink); }
.landing .status { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--surface-brand); color: var(--on-brand); font: 600 14px/20px var(--font-display); }

@media (max-width: 640px) {
  .landing { padding: var(--space-8) var(--space-4); }
  .landing .tagline { font-size: 20px; line-height: 28px; }
}

@media (max-width: 640px) {
  .landing .brace { font-size: 420px; opacity: 1; }
  .landing .brace-open { left: -120px; }
  .landing .brace-close { right: -120px; }
}