/* --- GRAVITY TABLE STYLES --- */
.gravity-matrix, .gravity-snapshot { 
    width: 100%; 
    border-collapse: collapse; 
    font-family: 'Montserrat', sans-serif; /* Matches your site font */
    margin-bottom: 40px; /* Adds breathing room below every table */
    margin-top: 10px;
}

/* --- HEADER STYLES --- */
.gravity-snapshot th { 
    text-align: left; 
    padding: 15px; 
    border-bottom: 3px solid #333; 
    font-size: 0.9em; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

.gravity-matrix th { 
    background-color: #333; 
    color: white; 
    padding: 15px; 
    text-align: left; 
}

/* --- CELL STYLES --- */
.gravity-matrix td, .gravity-snapshot td { 
    border-bottom: 1px solid #eee; 
    padding: 15px; /* More comfortable padding */
    font-size: 0.95em; 
    line-height: 1.5;
}

.gravity-matrix tr:nth-child(even) { 
    background-color: #f9f9f9; 
}

/* --- TEXT SPACING FIXES --- */
h3 {
    margin-top: 40px !important; /* Forces space above new sections */
    margin-bottom: 20px !important;
}

p {
    margin-bottom: 20px;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 600px) {
  .gravity-matrix th, .gravity-matrix td { display: block; width: 100%; box-sizing: border-box; }
  .gravity-matrix th { display: none; }
  .gravity-matrix td { border: none; position: relative; padding-left: 50%; padding-top: 10px; padding-bottom: 10px;}
  .gravity-matrix td:before { content: attr(data-label); position: absolute; left: 10px; font-weight: bold; top: 10px;}
  
  /* Stack the Snapshot table on mobile too */
  .gravity-snapshot td { display: block; width: 100%; padding-left: 0; }
  .gravity-snapshot td:first-child { font-weight: bold; background: #eee; }
}