/* micantes holding page.
 *
 * Token values mirror src/app/globals.css from the product app so the
 * brand reads continuous if a visitor later sees both surfaces. If the
 * product palette evolves, update this :root block to match. Inter is
 * loaded via Google Fonts in index.html.
 */

:root {
  --color-bg: #fbfbfa;
  --color-fg: #1a1d24;
  --color-heading: #1d2c4f;
  --color-muted: #6b6f77;
  --color-hairline: #e5e2da;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* The main content (brand zone + middle text) sits centred horizontally
 * in a single column, capped at 560px so it doesn't stretch awkwardly on
 * laptop and above. Vertical centring within the viewport gives the
 * holding page a deliberate composition: brand mark roughly mid-screen,
 * footer pinned below, generous air on every side. clamp() drives the
 * vertical paddings and gaps so the page reflows smoothly between phone
 * and desktop without media queries. */
.content {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 144px) clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(48px, 8vh, 96px);
}

.brand {
  display: flex;
  flex-direction: column;
}

.wordmark {
  font-weight: 500;
  font-size: clamp(44px, 6vw, 72px);
  letter-spacing: -0.02em;
  color: var(--color-heading);
  line-height: 1;
}

.divider {
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin-top: 32px;
}

.middle {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vh, 96px);
}

.holding {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--color-fg);
}

.contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 12px;
  color: var(--color-muted);
}

.email a {
  font-size: 12px;
  color: var(--color-fg);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-hairline);
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
}

.email a:hover,
.email a:focus-visible {
  text-decoration-color: var(--color-muted);
  outline: none;
}

.legal {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 clamp(28px, 4vw, 48px) clamp(24px, 4vh, 48px);
}

.legal p {
  font-size: 11px;
  color: var(--color-muted);
  opacity: 0.75;
}