





<style>
  /* --- GRAVITY BATTLE PAGE STYLES --- */

  /* 1. Typography & Spacing */
  .gravity-content h1 { 
      text-align: center; 
      margin-bottom: 40px; 
      color: #333; 
      line-height: 1.2; 
  }
  .gravity-content h3 { 
      margin-top: 50px; 
      margin-bottom: 25px; 
      line-height: 1.3; 
      color: #333; 
  }
  .gravity-content p { 
      margin-bottom: 20px; 
      line-height: 1.6; 
      font-size: 1.1em; 
      color: #555; 
  }
  
  /* 2. The Comparison Matrix (Table) */
  .gravity-matrix { 
      width: 100%; 
      border-collapse: collapse; 
      margin-bottom: 50px; 
      font-family: 'Montserrat', sans-serif;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .gravity-matrix th { 
      background-color: #333; 
      color: white; 
      padding: 18px; 
      text-align: left; 
      font-size: 0.95em;
      letter-spacing: 0.5px; 
      text-transform: uppercase;
  }

  .gravity-matrix td { 
      border-bottom: 1px solid #eee; 
      padding: 20px; 
      vertical-align: top;
      font-size: 0.95em; 
      line-height: 1.5; 
      background: white; 
  }

  /* Zebra Striping for readability */
  .gravity-matrix tr:nth-child(even) td { 
      background-color: #f9f9f9; 
  }

  /* 3. Mobile Optimization */
  /* This turns the table rows into stacked "cards" on phones */
  @media (max-width: 768px) {
    .gravity-matrix th { display: none; } 
    
    .gravity-matrix td { 
        display: block; 
        width: 100%; 
        box-sizing: border-box; 
        padding-left: 15px; 
        padding-right: 15px;
        text-align: left;
    }
    
    .gravity-matrix td:before { 
        content: attr(data-label); 
        display: block; 
        font-weight: bold; 
        margin-bottom: 8px; 
        color: #333;
        text-transform: uppercase;
        font-size: 0.85em;
        margin-top: 10px;
    }

    .gravity-matrix tr {
        border-bottom: 4px solid #eee; 
        display: block; 
        margin-bottom: 20px; 
    }
  }
</style>