/* ══ HeyPM shared shell ══════════════════════════════════════════════════
   Tokens, reset, nav, buttons and footer — everything that is the same on
   every page. Pages keep their own section CSS inline; this file is the
   part that must never drift between them, which is exactly what happened
   when it was copied by hand.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#1D1F45; --body:#45496B; --muted:#676C8A; --line:#EDEEF4; --paper:#FFFFFF;
  --wash:#FAFAFC; --edge:#E3E4EE;
  --sun:#FFD43B; --sunbg:#FFF6DE; --suni:#4A3200;
  --grn:#0C854A; --grnbg:#E9F9F0; --grni:#0A6B3C; --grns:#2C6547;
  --amb:#B85C08; --ambbg:#FFF4E3; --ambi:#8C4606; --ambs:#7A4A10;
  --red:#D92C2C; --redbg:#FDECEC; --redi:#A81F1F;
  --vio:#5B4BE1; --viobg:#F3F1FE; --violn:#DCD6FF; --vioi:#3A2CA8;
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--body);
  font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
::selection{background:var(--sun); color:var(--ink)}
:focus-visible{outline:3px solid var(--vio); outline-offset:3px; border-radius:8px}
p{margin:0} svg{display:block}

.nav{height:70px; display:flex; align-items:center; gap:20px;
  max-width:1180px; margin:0 auto; padding:0 26px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.mark{width:36px; height:36px; border-radius:12px; background:var(--sun); color:var(--suni);
  display:grid; place-items:center; font-family:Gabarito,sans-serif; font-weight:800; font-size:17px}
.brand b{font-family:Gabarito,sans-serif; font-size:19px; font-weight:700;
  letter-spacing:-.03em; color:var(--ink)}
.nav a.l{text-decoration:none; font-size:15.5px; font-weight:600; color:var(--body)}
.nav a.l:hover{color:var(--ink)}
/* The demo is the one link we would rather they took than any other. */
.nav a.l.try{display:inline-flex; align-items:center; gap:8px; color:var(--ink);
  font-weight:700; border:1.5px solid var(--edge); border-radius:99px; padding:7px 14px;
  transition:border-color .18s ease}
.nav a.l.try:hover{border-color:var(--ink)}
.nav a.l.try i{width:7px; height:7px; border-radius:99px; background:var(--grn);
  animation:navbeat 1.9s ease-in-out infinite}
@keyframes navbeat{0%,100%{opacity:1} 50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .nav a.l.try i{animation:none} }
@media (max-width:720px){ .nav a.l{display:none} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:Gabarito,sans-serif; font-weight:700; font-size:16.5px; text-decoration:none;
  border-radius:13px; padding:14px 24px; border:1.5px solid var(--ink);
  background:var(--ink); color:#fff; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(29,31,69,.7)}
.btn.soft{background:var(--viobg); border-color:var(--viobg); color:var(--vioi)}
.nbtn{margin-left:4px; text-decoration:none; font-family:Gabarito,sans-serif; font-size:15px;
  font-weight:700; color:#fff; background:var(--ink); border-radius:11px; padding:10px 17px;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease}
.nbtn:hover{transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(29,31,69,.8)}

/* ── the footer ─────────────────────────────────────────────────────────
   Every link goes somewhere that exists today. Anything unbuilt is marked
   and unclickable rather than quietly dead.
   -------------------------------------------------------------------- */
.sitefoot{margin-top:118px; border-top:1px solid var(--line); background:var(--wash)}
.finner{max-width:1240px; margin:0 auto; padding:60px 26px 44px;
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,.9fr));
  gap:40px 38px}
.fbrand .brand{margin-bottom:18px}
.fbrand p{max-width:38ch; font-size:15.5px; line-height:1.55; color:var(--body); font-weight:500}
.fdata{display:block; margin-top:16px; font-size:14px; line-height:1.5; color:var(--muted);
  font-weight:600}
.fme{margin-top:20px; display:flex; align-items:center; gap:14px}
.fpic{width:52px; height:52px; border-radius:99px; flex:0 0 auto; object-fit:cover;
  border:2px solid #fff; box-shadow:0 6px 16px -8px rgba(29,31,69,.5)}
.fpic.ini{background:var(--sun); color:var(--suni); display:grid; place-items:center;
  font-family:Gabarito,sans-serif; font-weight:800; font-size:17px; letter-spacing:-.02em}
.fmet b{display:block; font-size:15px; font-weight:700; color:var(--ink)}
.fmet em{display:block; margin-top:3px; font-style:normal; font-size:13.5px; line-height:1.45;
  font-weight:500; color:var(--muted)}
.fcol{display:flex; flex-direction:column; gap:11px}
.fcol b{font-family:Gabarito,sans-serif; font-size:15px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:3px}
.fcol a{text-decoration:none; font-size:15px; font-weight:500; color:var(--body);
  transition:color .18s ease}
.fcol a:hover{color:var(--vio)}
.fcol a[aria-current]{color:var(--ink); font-weight:700}
.fcol a.soon{display:flex; align-items:center; gap:8px; color:var(--muted); cursor:default}
.fcol a.soon:hover{color:var(--muted)}
.fcol a.soon i{font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#9498B4; background:var(--wash); border:1px solid var(--edge);
  border-radius:99px; padding:2px 7px}
.fbase{max-width:1240px; margin:0 auto; padding:20px 26px 30px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:500; color:var(--muted)}
.flinks{display:flex; gap:22px}
.flinks a{text-decoration:none; color:var(--muted); transition:color .18s ease}
.flinks a:hover{color:var(--ink)}

@media (max-width:1000px){
  .finner{grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px}
  .fbrand{grid-column:1/-1}
}
@media (max-width:620px){
  .sitefoot{margin-top:76px}
  .finner{grid-template-columns:1fr; gap:30px; padding:44px 26px 34px}
  .fbase{flex-direction:column; align-items:flex-start; gap:10px}
}

/* ── the version pill ───────────────────────────────────────────────────
   A live product says its version out loud. It sits in the footer rather
   than the nav because it is reassurance, not navigation: the people who
   look for it are looking down the page, not across the top.
   -------------------------------------------------------------------- */
.fver{display:inline-flex; align-items:center; gap:10px; margin-top:18px; text-decoration:none;
  background:#fff; border:1px solid var(--edge); border-radius:99px; padding:8px 15px 8px 13px;
  transition:border-color .2s ease, transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease}
.fver:hover{border-color:var(--vio); transform:translateY(-2px);
  box-shadow:0 12px 22px -14px rgba(91,75,225,.6)}
.fvd{width:8px; height:8px; border-radius:99px; background:var(--grn); flex:0 0 auto;
  animation:fvp 2.2s ease-in-out infinite}
@keyframes fvp{0%,100%{opacity:1} 50%{opacity:.2}}
.fver b{font-family:Gabarito,sans-serif; font-size:15px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums}
.fver em{font-style:normal; font-size:14px; font-weight:600; color:var(--muted)}
.fver svg{color:var(--muted); transition:transform .2s ease}
.fver:hover svg{transform:translateX(2px); color:var(--vio)}
@media (prefers-reduced-motion:reduce){ .fvd{animation:none} }