/* The platform front page: the company lockup, one heading, one card per
   product. Loaded AFTER shared-copies/tokens.css (Alex's board, byte-for-byte)
   and the two wordmark copies, so every colour here is a token.

   Each card wears its own product's ground. Alex's wordmark is drawn for the
   dark board; Anna's (deep teal to violet) is drawn for her light ground and
   would sink into the board. So the Anna card re-declares the few tokens it
   uses with Anna's light values (the anna-theme.css palette) - the wordmark
   copies themselves are never edited. Class names are namespaced (fcw-). */

.fcw-landing {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 20px 48px;
}

.fcw-lockup { display: block; margin: 0 0 28px; }
.fcw-lockup img { display: block; width: min(320px, 72vw); height: auto; }

.fcw-landing h1 {
  margin: 0 0 32px; font-size: 28px; line-height: 1.2; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); text-align: center;
}

.fcw-products {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 760px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}

.fcw-product {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 22px 22px 20px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink-body); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.fcw-product:hover, .fcw-product:focus-visible { border-color: var(--teal); transform: translateY(-2px); }
.fcw-product:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.fcw-product-name { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.fcw-product-name .alex-mark, .fcw-product-name .anna-mark { font-size: 30px; line-height: 1.1; }
.fcw-product p { margin: 0; font-size: 15px; color: var(--ink-2); }
.fcw-product-host {
  margin-top: auto; padding-top: 6px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-2);
}

/* The Anna card: Anna's light ground (values from frontend-anna's theme). */
.fcw-product-anna {
  --card: #FFFFFF; --line: #D6E1E7; --ink: #12222B; --ink-body: #22343E;
  --ink-2: #3D525D; --teal: #14788F; --teal-2: #136F8A;
  --shadow: 0 1px 2px rgba(18, 34, 43, .08), 0 8px 20px -12px rgba(18, 34, 43, .25);
}

@media (max-width: 640px) {
  .fcw-landing { padding: 36px 16px 40px; }
  .fcw-landing h1 { font-size: 24px; margin-bottom: 24px; }
  .fcw-products { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion removes the movement, not the meaning: no lift, but the
   border still answers a hover or focus. */
@media (prefers-reduced-motion: reduce) {
  .fcw-product { transition: none; }
  .fcw-product:hover, .fcw-product:focus-visible { transform: none; }
}