/* ============================================================================
   PMFtracker site theme: applies the homepage design system to every page
   built on the legacy (Webflow + blog.css) chassis. Loaded AFTER the page's
   existing stylesheets; it re-skins markup, it does not re-layout it.
   Canonical reference: /design.md
   ========================================================================== */

:root{
  --ink:#0f172a;
  --body-c:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-2:#c7d2fe;
  --indigo:#4f46e5;
  --indigo-2:#6366f1;
  --indigo-soft:#eef2ff;
  --violet:#818cf8;
  --bg-soft:#f8fafc;
  --grad:linear-gradient(120deg,#4f46e5 0%,#6366f1 55%,#818cf8 110%);
  --grad-deep:linear-gradient(135deg,#0f172a 0%,#312e81 100%);
  --font-ui:'Sora',sans-serif;
  --font-serif:'Instrument Serif',serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Type: Sora everywhere, serif italics for pullquotes ---------- */
body{font-family:var(--font-ui) !important;}
h1,h2,h3,h4,h5,h6,
.heading-style-h1,.heading-style-h2,.heading-style-h3,
.heading-style-h4,.heading-style-h5,.heading-style-h6{
  font-family:var(--font-ui) !important;
  letter-spacing:-.02em;
}
.article-body .pullquote,blockquote{
  font-family:var(--font-serif) !important;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
}

/* mono accents: kickers, tags, eyebrows, chips */
.article-kicker,.blog-card-tag,.blog-eyebrow,.tag-text,
.blog-chip,.blog-chip-n,.blog-count,.pmf-foot-h{
  font-family:var(--font-mono) !important;
  letter-spacing:.14em;
}
::selection{background:rgba(99,102,241,.25)}
section[id],div[id]{scroll-margin-top:5.5rem}

/* ---------- Nav: the shared site chrome (same markup as the homepage) ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.nav.is-stuck{background:rgba(255,255,255,.9);border-bottom-color:var(--line);box-shadow:0 12px 30px -24px rgba(15,23,42,.35)}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:.85rem clamp(1.25rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.nav-logo img{height:28px;width:auto}
.nav-links{display:flex;gap:1.25rem;align-items:center}
.nav-links a{
  font-family:var(--font-ui);font-size:.9rem;font-weight:500;color:var(--muted);
  position:relative;transition:color .2s;text-decoration:none;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* buttons used by the nav (subset of the homepage system) */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-ui);font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:box-shadow .3s,background .3s,border-color .3s,color .3s;
}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff;padding:.6rem 1.15rem;font-size:.85rem;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.btn-ghost:hover{border-color:var(--line-2);color:var(--indigo)}

/* Tools dropdown */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-toggle{
  font-family:var(--font-ui);font-size:.9rem;font-weight:500;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;transition:color .2s;text-decoration:none;
}
.nav-drop-toggle::after{
  content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;transition:transform .15s ease;
}
.nav-drop:hover .nav-drop-toggle,.nav-drop:focus-within .nav-drop-toggle{color:var(--ink)}
.nav-drop:hover .nav-drop-toggle::after,.nav-drop:focus-within .nav-drop-toggle::after{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;min-width:252px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(79,70,229,.4);padding:.5rem;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1000;
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.nav-drop-menu a{
  display:block;padding:.55rem .75rem;border-radius:8px;
  color:var(--ink);font-size:.92rem;font-weight:500;white-space:nowrap;text-decoration:none;
}
.nav-drop-menu a::after{display:none}
.nav-drop-menu a:hover{background:var(--indigo-soft);color:var(--indigo)}

/* hamburger + collapsed panel */
.nav-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:999px;width:42px;height:42px;cursor:pointer;position:relative}
.nav-toggle i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease-out)}
.nav-toggle i:first-child{top:16px}
.nav-toggle i:last-child{bottom:16px}
.nav-toggle[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1080px){
  .nav-toggle{display:block;order:3}
  .nav-cta{order:2;margin-left:auto}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem;
    background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);align-items:stretch;
    max-height:calc(100vh - 70px);overflow-y:auto;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .nav-drop{display:block;width:100%}
  .nav-drop-toggle{width:100%;padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;padding:.25rem 0 .25rem 1rem;min-width:0;
  }
  .nav-drop-menu a{border-bottom:none;padding:.55rem 0}
}
/* the blog index filter bar sticks below the fixed nav */
@media (min-width:992px){.blog-toolbar{top:60px}}

/* ---------- Buttons: gradient pill system ---------- */
.cta-btn,
.lead-submit,.lead-success-close,.lead-request-btn,
.cta-box button.cta-btn{
  font-family:var(--font-ui) !important;
  font-weight:600;
  border-radius:999px !important;
  background:var(--grad) !important;
  color:#fff !important;
  box-shadow:0 10px 30px -10px rgba(79,70,229,.55);
  transition:box-shadow .3s,transform .2s var(--ease-out);
}
.cta-btn:hover,.lead-request-btn:hover{
  box-shadow:0 16px 44px -10px rgba(79,70,229,.7);
  transform:translateY(-1px);
  filter:none;
}

/* ---------- Cards: unified radius, hover lift, indigo glow ---------- */
.blog-card,.stat-card,.problem-card{
  border-radius:18px;
  transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s;
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 22px 50px -20px rgba(79,70,229,.35);
}
.blog-card h2{letter-spacing:-.01em}
.blog-card-meta{font-weight:600}

/* blog filter chips (blog index) */
.blog-chip{font-size:.78rem;letter-spacing:.04em}
.blog-chip.is-active{background:var(--grad);border-color:transparent}

/* ---------- Article chrome ---------- */
.article-kicker{color:var(--indigo);text-transform:uppercase;font-size:.72rem;font-weight:700}
.article-body a{text-decoration-color:rgba(99,102,241,.4);text-underline-offset:2px}
.tldr{border-left:4px solid transparent;border-image:var(--grad) 1;background:var(--bg-soft)}
.tldr h2{font-family:var(--font-mono) !important;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}

/* ---------- Footer: deep navy chrome ---------- */
.footer_component{background:#0b1020 !important}
.footer-link,.footer-mail-text,.footer-text,.footer_credit-text,.rl_footer4_legal-link{
  font-family:var(--font-ui);
}
.pmf-foot-h{letter-spacing:.18em !important;font-size:.7rem !important}
.footer-link{transition:color .2s}
.footer-link:hover{color:#fff !important}

/* ---------- Focus + motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--indigo-2);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .blog-card:hover,.cta-btn:hover{transform:none}
}