/* === RESET AND BASE STYLES === */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
       
    .ilbody {
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue";
      background: linear-gradient(180deg,#fafbff,#ffffff);
      color: #122;
      line-height: 1.4;
      padding: 24px;
      display: flex;
      justify-content: center;
    }

    .ilwrap {
      width: 100%;
      max-width: 1100px;
    }

    /* === LAYOUT CONTAINER === */
    .ilsplit {
      display: flex;
      gap: 24px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(16,24,40,0.06);
      overflow: hidden;
      align-items: stretch;
    }

    /* === INTRO/TEXT COLUMN STYLES === */
    .ilintro {
      flex: 1 1 50%;
      padding: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 320px;
    }

    .ilintro .ilinner {
      width: 100%;
      max-width: 540px;
    }

    .ilintro h1 {
      font-size: 1.25rem;
      margin-bottom: 10px;
      color: #0b74de;
      letter-spacing: 0.2px;
    }

    .ilintro p.illead {
      font-size: 1.05rem;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .ilintro p.ilcentered {
      font-size: 0.98rem;
      color: #556;
      margin-top: 6px;
    }

    /* === MEDIA/IMAGE COLUMN STYLES === */
    .ilmedia {
      flex: 1 1 50%;
      min-width: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(90deg, rgba(11,116,222,0.06), rgba(11,116,222,0.02));
      padding: 3px; /* Image padding */
    }

    /* Aspect-ratio wrapper: 340:318 */
    .ilmedia .ilframe {
      width: 100%;
      aspect-ratio: 340 / 318;
      max-height: 520px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(8,20,40,0.08);
      background: #e9f2ff;
    }

    .ilmedia .ilframe img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* === LAYOUT VARIATION: TEXT-LEFT (DEFAULT) === */
    /* This is Code 1: Text on left, image on right */
    .illayout-text-left .ilintro {
      order: 1;
    }
    
    .illayout-text-left .ilmedia {
      order: 2;
    }

    /* === LAYOUT VARIATION: IMAGE-LEFT === */
    /* This is Code 2: Image on left, text on right */
    .illayout-image-left .ilmedia {
      order: 1;
    }
    
    .illayout-image-left .ilintro {
      order: 2;
    }

    /* === MOBILE RESPONSIVE STYLES === */
    @media (max-width: 768px) {
      .ilsplit {
        flex-direction: column;
      }
      
      /* Force image to top and text below on mobile */
      .ilmedia {
        order: -1 !important; /* Image always on top */
        padding: 0;
      }
      
      .ilintro {
        order: 0 !important; /* Text below image */
        padding: 20px;
        min-height: unset;
      }
      
      .ilmedia .ilframe {
        border-radius: 0;
        max-height: none;
      }
      
      .ilintro h1 {
        font-size: 1.1rem;
      }
      
      .ilintro p.illead {
        font-size: 1rem;
      }
    }

    @media (max-width: 420px) {
      body {
        padding: 3px; /* Reduce padding on very small screens */
      }
      
      .ilintro {
        padding: 16px;
      }
    }