/* =====================================================================
   Wellfit SalesIQ — Shared Base Styles
   Used by every page: CSS variables, reset, header/nav/logo.
   Page-specific styles live in /css/<page>.css and are loaded
   alongside this file.
   ===================================================================== */


  :root{
    --wf-blue:#007CBC;
    --wf-blue-dark:#00618f;
    --wf-green:#5FA845;
    --wf-green-dark:#4c8637;
    --wf-ink:#4E5859;
    --wf-ink-soft:#7c8687;
    --wf-bg:#F7F9FA;
    --wf-card:#FFFFFF;
    --wf-line:#E4E9EA;
    --map-fill:#EAF2F7;
    --map-stroke:#C3D6E0;
    --radius:16px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--wf-bg);
    color:var(--wf-ink);
    line-height:1.4;
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }
  h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;}

  header.site{
    background:#fff;
    border-bottom:1px solid var(--wf-line);
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:100;
  }
  .header-inner{
    max-width:1200px;
    margin:0 auto;
    padding:10px 28px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
  }
  .logo-mark{display:flex;align-items:center;gap:9px; justify-self:start;}
  .logo-mark img{height:24px;width:auto;display:block;}

  .top-nav{
    display:flex;
    align-items:center;
    gap:26px;
    justify-self:center;
  }
  .top-nav a{
    font-size:13.5px;
    font-weight:600;
    color:var(--wf-ink-soft);
    text-decoration:none;
    padding:6px 1px;
    border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  .top-nav a:hover{ color:var(--wf-ink); }
  .top-nav a.active{ color:var(--wf-blue-dark); border-bottom-color:var(--wf-blue); }
  @media (max-width:700px){
    .top-nav{ gap:14px; }
    .top-nav a{ font-size:12px; }
  }