/* PAM marketing landing page (/).

   Layout and resting styles live inline on the markup in landing.html so the
   page reads as one self-contained document, mirroring the original design.
   This file carries only what inline styles can't express: base resets, the
   :hover affordances, and the responsive collapse. Every value is drawn from
   the same Notion-like palette as app.css (see DESIGN.md) — soft grays,
   hairline borders, the single #2383e2 accent, 6px control radius. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Keep section anchors clear of the 52px sticky nav. */
  scroll-padding-top: 52px;
}

body {
  font-family: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               sans-serif;
  color: #37352f;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }

/* ---------------- hover affordances (≤0.12s, soft fills) -------------- */

/* Borderless nav / sign-in links: gray hover fill, text darkens. */
.lp-navlink:hover { background: #efefed; color: #37352f; }

/* Primary action button: the one solid-accent affordance, darkens on hover
   exactly like .btn.primary in app.css. */
.lp-btn-primary:hover { background: #1b75cc; border-color: #1b75cc; }

/* Secondary / ghost button: soft gray hover fill. */
.lp-btn-secondary:hover { background: #efefed; }

/* Report tiles: lift to the sidebar wash on hover. */
.lp-report-card:hover { background: #f7f7f5; }

/* Footer links: faint → soft. */
.lp-footlink:hover { color: #787774; }

/* The parent-company link in the footer "about" line: darken to the accent. */
.lp-vlink:hover { color: #2383e2; }

/* ---------------- responsive collapse --------------------------------
   The resting layout is desktop-first with inline flex/grid. Below ~880px we
   stack the two-column rows, drop the feature grid to one column, and hide the
   secondary nav. !important is needed to win over the inline styles. */

@media (max-width: 880px) {
  .lp-nav-links { display: none !important; }

  .lp-row {
    flex-direction: column !important;
    gap: 48px !important;
  }

  /* Side visuals lose their fixed basis and fill the column. */
  .lp-art {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 480px;
  }

  .lp-grid-3 { grid-template-columns: 1fr !important; }

  .lp-h1 { font-size: 40px !important; }
}

@media (max-width: 560px) {
  /* Trim the generous 40px gutters on phones; longhand !important overrides
     the left/right of the inline `padding` shorthand. */
  .lp-pad {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .lp-h1 { font-size: 34px !important; }
  .lp-h2 { font-size: 28px !important; }
}