/*
 * Marketing site styles — D-41 wordmark + D-44 tagline ported to plain HTML+CSS.
 *
 * Hand-port references:
 *   - Logo wordmark + dot constants: apps/demo/components/ui/logo.tsx (D-41 amended Apr 30, 2026).
 *   - Splash composition + tagline period CSS: apps/demo/app/page.tsx (D-44 amended Apr 30, 2026).
 *
 * Em-relative dot constants are the canonical D-41 values. If you tune them in
 * either surface, mirror to the other.
 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 3rem 2rem;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  gap: 2rem; /* looser body rhythm; the title/tagline lockup is internally tight */
  max-width: 36rem;
  margin: 0 auto;
}

/* ---- Title + tagline lockup ---- */

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* tight title -> tagline; reads as one brand unit */
}

/* ---- Wordmark (D-41) ---- */

.logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 2.5rem; /* one step up from demo splash text-3xl; marketing hero needs more weight */
  font-weight: 500;
  letter-spacing: -0.04em; /* tracking-tighter */
  color: var(--color-navy-800);
}

.logo-i {
  position: relative;
  display: inline-block;
}

.logo-tittle {
  position: absolute;
  left: 50%;
  top: 0.18em;
  width: 0.20em;
  height: 0.20em;
  border-radius: 50%;
  background: var(--color-amber-600);
  /* Halo blends into navy-50 page surface so the dot reads as replacing the
     i-tittle, not overlapping it. Mirrors logo.tsx light-mode shadow. */
  box-shadow: 0 0 0 0.10em #F5F7FA;
  transform: translateX(calc(-50% + 0.03em));
}

.logo-suffix {
  font-weight: 400;
  letter-spacing: normal; /* tracking-normal */
  color: var(--color-navy-500);
}

/* ---- Tagline (D-44) ---- */

.tagline {
  margin: 0;
  font-size: 0.875rem; /* text-sm — back to demo-splash size per user pref */
  font-weight: 400;
  color: var(--color-navy-500);
}

.tagline-period {
  font-size: 1.5em;
  font-weight: 500;
  color: var(--color-amber-600);
}

.tagline-tm {
  font-size: 0.75rem; /* absolute — matches footer 12px regardless of tagline size */
  vertical-align: super;
  margin-left: 0.05em;
  color: var(--color-navy-400);
  font-weight: 400;
}

/* ---- Positioning paragraphs ---- */

.positioning {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-navy-500);
  font-weight: 400;
}

/* ---- Contact line ---- */

/* Plain text + envelope icon + mailto link. Reads as body copy
   (selectable, copy-paste friendly), but the email is a link so
   prospects with a working mailto handler get a one-click compose. */
.contact {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-navy-500);
  font-weight: 400;
}

.contact-icon {
  display: inline-block;
  margin-right: 0.4em;
  vertical-align: -0.15em;
  color: var(--color-navy-400);
}

.contact a {
  color: var(--color-navy-700);
  text-decoration: underline;
  text-decoration-color: var(--color-navy-200);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.contact a:hover {
  color: var(--color-amber-600);
  text-decoration-color: var(--color-amber-400);
}

/* ---- Footer ---- */

.site-footer {
  padding-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-navy-500);
}