/* THEME VARIABLES */
    :root{ 
      --teal:#008070; 
      --teal-dark:#006c60; 
      --bg-body:#dcdcdc; 
      --bg-card:#f8f8ff; 
      --text:#111; 
      --border:#ccc;
      --radius:4px; 
    }

    body{ margin:0; font-family:Arial, sans-serif; background:var(--bg-body); color:var(--text); line-height:1.5; }

    /* HEADER */
    .band{ width:100%; background:var(--teal); color:var(--bg-card); padding:0.8rem 0; text-align:center; font-size:0.95rem; }
    .band a { color:var(--bg-card); text-decoration:none; font-weight:bold; }

    .page-wrapper {
      min-height: calc(100vh - 50px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .split-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 1100px;
      width: 100%;
      background: var(--bg-card);
      box-shadow: 0 10px 40px rgba(0,0,0,0.15);
      border-radius: var(--radius);
      overflow: hidden;
    }

    /* VISUAL SIDE (Now on Right via HTML order) */
    .visual-side {
      background: var(--teal);
      color: white;
      padding: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* CONTENT SIDE (Now on Left via HTML order) */
    .content-side { 
      padding: 4rem; 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
    }

    /* IMAGE PLACEHOLDER */
    .book-cover {
      width: 350px;
      height: 350px;
      background: #222; /* Darker for Server hardware vibe */
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: rgba(255,255,255,0.8);
      margin-bottom: 2rem;
      border: 1px solid rgba(255,255,255,0.1);
      flex-direction: column;
      gap: 10px;
    }
    
    .server-icon {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    /* TYPOGRAPHY */
    h1 { margin: 0 0 1rem; font-size: 2.5rem; line-height: 1.1; color: var(--text); }
    .sub { font-size: 1.1rem; color: #555; margin-bottom: 2rem; }

    /* LIST */
    .benefits { list-style: none; padding: 0; margin-bottom: 2rem; }
    .benefits li { margin-bottom: 0.8rem; padding-left: 1.5rem; position: relative; }
    .benefits li::before { content: "✓"; color: var(--teal); font-weight: bold; position: absolute; left: 0; }

    /* BUTTON */
    .btn-download {
      background: var(--teal);
      color: white;
      border: none;
      padding: 1rem 2rem;
      font-size: 1.1rem;
      font-weight: bold;
      border-radius: var(--radius);
      cursor: pointer;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-decoration: none; /* Link fix */
      text-align: center;
      display: inline-block;
      box-sizing: border-box;
    }
    .btn-download:hover { background: var(--teal-dark); }

    .meta { font-size: 0.8rem; color: #888; text-align: center; margin-top: 1rem; }

    /* RESPONSIVE */
    @media (max-width: 900px) { 
        .split-card { grid-template-columns: 1fr; } 
        .visual-side { padding: 3rem 1rem; order: 2; /* Keep Image below text on mobile */ } 
        .content-side { padding: 3rem 1.5rem; order: 1; } 
    }