@charset "utf-8";
/* CSS Document */
  .blue { color: #1f2533 }
  .feature-links a { color: #143A4D; text-decoration: none; }
  .feature-links a:hover { text-decoration: underline; }

  /* -------- FREE / AD TIER (6-col) -------- */
  .responsive-margin {
    text-align: left;
    margin-left: 20px;
    margin-top: 20px;
    font-size: 16px;
  }
  .responsive-margin > div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .responsive-margin img { height: 40px; flex-shrink: 0; }
  .responsive-margin a { text-decoration: none; color: #000; flex: 1; min-width: 0; }

  /* -------- PREMIUM / AD-FREE (12-col) -------- */
  .responsive-margin-free {
    text-align: left;              /* keep link text readable */
    margin-left: 180px;            /* desktop offset */
    margin-top: 0;
    font-size: 18px;
  }
  .responsive-margin-free > div {
    display: flex;
    align-items: center;
    gap: 12px;                     /* requested larger gap */
    margin-bottom: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;   /* will center on mobile below */
  }
  .responsive-margin-free img { height: 40px; flex-shrink: 0; }

  /* -------- TRUST FEATURES (unchanged) -------- */
  .trust-features {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 20px; max-width: 1000px; margin: 0 auto; text-align: center;
    padding: 10px 0;
  }
  .trust-features > div { flex: 1 1 150px; max-width: 180px; min-width: 140px; }

  /* ===== MOBILE FIXES =====
     Remove big left margins and make content visible/centered on small screens. */
 /* ---- MOBILE FIXES (<=768px) ---- */
@media (max-width: 768px){

  /* remove big left offsets on phones */
      .responsive-margin,
      .responsive-margin-free{
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        font-size: 14px;
  }

  /* keep icon + text on ONE line */
  .responsive-margin > div,
  .responsive-margin-free > div{
    flex-wrap: nowrap;          /* <- no wrapping between icon and link */
    gap: 10px;  /* a bit tighter on small screens */
    margin-left:5px;
  }

  /* alignment per tier */
  .responsive-margin > div{      /* ad tier (free) */
    justify-content: flex-start;
  }
  .responsive-margin-free > div{ /* premium (ad-free) */
    justify-content: center;     /* pair is centered as a unit */
  }

  /* smaller icons on phones */
  .responsive-margin img,
  .responsive-margin-free img{
    height: 28px;
  }

  /* let the link take remaining width and wrap its text */
  .responsive-margin a,
  .responsive-margin-free a{
    flex: 1 1 0;                /* grow/shrink next to icon */
    min-width: 0;               /* allow shrinking without overflow */
    white-space: normal;        /* text can wrap */
    text-align: left;           /* readable text */
    line-height: 1.35;
  }
}

  /* ===== DESKTOP RULES ===== */
  @media (min-width: 992px) {
    .responsive-margin {           /* free/ad tier desktop offset */
      margin-left: 180px;
      font-size: 16px;
    }
     .responsive-margin-free {           /* free/ad tier desktop offset */     
      font-size: 16px;
    }
    /* premium stays at 650px per your spec (already set above) */
  }


