/* Theque landing page.
 *
 * Loaded after app.css and reuses its design tokens (BRAND.md §2), so the landing
 * page cannot drift from the application's palette — change a token once and both
 * follow.
 *
 * BRAND.md §1.5 says "boring on purpose: no decorative gradients, no illustration
 * style, no motion for its own sake". A landing page is the one surface where some
 * visual ambition is warranted, so this bends that rule deliberately and narrowly:
 * the only ornament is a set of horizontal strata, which draws the "bedrock" idea
 * rather than stating it. There is no gradient wash, no illustration, and no
 * animation that conveys information.
 */

.landing {
  min-height: 100vh;
  min-height: 100dvh; /* dvh so mobile browser chrome does not clip the footer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--s8) var(--s6);
  background: var(--bg);
}

/* ---- strata ------------------------------------------------------------- */
/* Layered bands settling toward the bottom of the viewport. Subtle by design:
 * they should register as depth, not as decoration competing with the wordmark. */

.strata {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stratum {
  position: absolute;
  left: -10%;
  width: 120%;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  opacity: 0.55;
}

/* Progressively thicker and more opaque toward the bottom — bedrock beneath
 * looser layers. */
.stratum.s1 { bottom: 34%; height: 1px;   opacity: 0.5; background: none; }
.stratum.s2 { bottom: 24%; height: 8vh;   opacity: 0.35; }
.stratum.s3 { bottom: 12%; height: 12vh;  opacity: 0.5; }
.stratum.s4 { bottom: 0;   height: 12vh;  opacity: 0.75; border-top-color: var(--border-strong); }

/* ---- hero -------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 46rem;
}

.mark {
  color: var(--fg);
  margin-bottom: var(--s6);
}

.mark svg {
  width: clamp(72px, 12vw, 116px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.wordmark {
  font-size: clamp(2.75rem, 9vw, 5rem);
  line-height: 1;
  font-weight: 600;
  /* Tight tracking at display size; the default spacing reads loose above ~40px. */
  letter-spacing: -0.045em;
  margin: 0 0 var(--s4);
  color: var(--fg);
}

.tagline {
  font-size: clamp(1.0625rem, 2.4vw, 1.5rem);
  line-height: 1.35;
  color: var(--fg-muted);
  margin: 0 auto var(--s6);
  max-width: 30ch; /* forces a break that keeps the line readable */
  text-wrap: balance;
}

/* The three-word promise. Letterspaced small caps so it reads as a mark rather
 * than as prose. */
.triad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: 0 0 var(--s8);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.triad .sep { color: var(--border-strong); }

/* ---- actions ----------------------------------------------------------- */

.actions {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s8);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* comfortable touch target */
  padding: 0 var(--s6);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-md);
  text-decoration: none;
  border: 1px solid transparent;
  /* BRAND.md §9: interaction feedback only, 100–150ms. */
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.cta:hover { text-decoration: none; }

.cta-primary {
  background: var(--fg);
  color: var(--bg);
}

.cta-primary:hover { background: var(--fg-muted); }

.cta-secondary {
  border-color: var(--border-strong);
  color: var(--fg);
  background: var(--bg);
}

.cta-secondary:hover { background: var(--bg-inset); }

.sub {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg-subtle);
  margin: 0;
}

/* ---- footer ------------------------------------------------------------ */

.foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: var(--s8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}

.foot a { color: var(--fg-subtle); text-decoration: underline; }
.foot a:hover { color: var(--fg); }
.foot .dot { color: var(--border-strong); }

/* ---- accessibility ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* Dark mode needs no overrides: every colour above is a token, and app.css
 * already redefines the tokens under prefers-color-scheme (BRAND.md §2.3). The
 * strata read as slightly lighter bands on dark, which is the correct inversion. */