/* =====================================================================
   landing.css -- ONLY what the public page adds.

   The landing page loads /app.css first and this file second. The palette,
   the self-hosted IBM Plex faces, the panel, the tier card, the form and the
   disclaimer rules all come from app.css unchanged, so the public page and
   the authenticated app are visibly one product rather than two that
   resemble each other. Everything here is a surface the app does not have:
   the masthead lede, the three product cards, and the way in for members.

   No external host, no @import, no font declaration of its own.
   ===================================================================== */

/* ---------- masthead ---------- */
.hero{padding:22px 20px 24px}
.hero h1{font-size:30px;font-weight:700;letter-spacing:-.016em;margin-bottom:10px}
.hero .lede{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:74ch}

/* ---------- section heads ---------- */
.sechead{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;
}
main{display:flex;flex-direction:column;gap:26px}
main > section{min-width:0}

/* ---------- the three product categories ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.cat{
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
.cat h3{
  margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  text-wrap:balance;
}
.cat .lede{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.cat ul{
  margin:0;padding-left:18px;font-size:13px;color:var(--ink-2);
  display:flex;flex-direction:column;gap:5px;
}

/* ---------- the masthead sign-in affordance ----------
   `header.site` (app.css) is a flex row with `justify-content:space-between`,
   so a third child lands at the right-hand end by itself -- the place a reader
   already looks for it -- with no absolute positioning to fall out of the flow
   at narrow widths. Nothing here suppresses a focus ring: the border is the
   RESTING state and the UA's own focus indicator still draws over it. */
.topsignin{
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:5px 14px;
}
.topsignin:hover{background:var(--accent);color:var(--on-accent)}

/* ---------- the way in ---------- */
.signin{padding:16px;display:flex;flex-direction:column;gap:8px}
.signin h2{font-size:16px;font-weight:600}
.signin .lede{margin:0;font-size:13px;color:var(--ink-2);max-width:78ch}
.signin .actions{margin:4px 0 0}
.signin a.go{
  display:inline-block;font-size:14px;font-weight:600;text-decoration:none;
  color:var(--accent);background:var(--surface-2);
  border:1px solid var(--accent);border-radius:4px;padding:7px 16px;
}
.signin a.go:hover{background:var(--accent);color:var(--on-accent)}

/* ---------- the tier grid on this page ---------- */
#lpTiers .tier h2{font-size:18px}

@media (max-width:720px){
  .hero h1{font-size:24px}
  .cats{grid-template-columns:1fr}
}