/* ============================================================
   Landing — the public front door at '/'
   ------------------------------------------------------------
   Everything behind this page is gated, so this is the only
   surface a signed-out visitor sees. It carries the same data
   plate language as the portal, set larger: the portal is a
   working instrument panel, this is the plate riveted to the
   outside of the machine.

   Tokens only — no literal colours, sizes or fonts (01-tokens).
   ============================================================ */

/* --- Public bar ---------------------------------------------
   Not .main-nav: that one carries member destinations and a
   signed-out visitor can reach none of them. */
.landing-bar {
  border-bottom: var(--hairline) solid var(--border);
  background: var(--surface);
  box-shadow: var(--edge-light);
}

.landing-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.landing-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* --- Hero ---------------------------------------------------- */
.landing-hero {
  padding: var(--s8) 0;
  border-bottom: var(--hairline) solid var(--border-faint);
}

/* The amber plate edge that marks a spec plate everywhere else in
   the system, here running down the whole hero block. */
.landing-hero .container {
  border-left: var(--plate-edge) solid var(--amber);
}

.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-plate);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s3);
}

.landing-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.landing-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-dim);
  max-width: 54ch;
  margin: var(--s4) 0 0;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* The hero is the one place these buttons carry the page, so they
   step up a size. Scoped here rather than added as a global
   .btn-lg, which nothing else in the portal asks for yet. */
.landing-cta .btn {
  min-height: 44px;
  padding: var(--s3) var(--s5);
}

@media (max-width: 640px) {
  .landing-hero { padding: var(--s7) 0; }
  .landing-title { font-size: var(--fs-xl); }

  /* Stacked, the bar's two actions need the full width more than
     they need to sit beside the brand. */
  .landing-bar-inner { flex-wrap: wrap; }
  .landing-cta .btn { flex: 1 1 auto; }
}