/* WebwinkelKeur Badge Styling */
    .webwinkelkeur-badge {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 1000000;
      transition: transform 0.3s ease;
      display: block;
    }

    .webwinkelkeur-badge img {
      width: 120px;
      height: auto;
      display: block;
    }

    .webwinkelkeur-badge:hover {
      transform: scale(1.1);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .webwinkelkeur-badge {
        bottom: 70px;
        left: 15px;
      }

      .webwinkelkeur-badge img {
        width: 90px;
      }
    }

    /* Extra spacing below navbar */
    main {
      padding-top: 32px;
    }

    /* Feature items */
    .feature-item {
      margin-bottom: 2rem;
    }

    .feature-item h3 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }

    /* Timeline / checklist */
    .timeline-list {
      display: table;
      border-spacing: 0 0.4rem;
    }

    .timeline-item {
      display: table-row;
      font-size: 1.05rem;
    }

    .timeline-label {
      display: table-cell;
      white-space: nowrap;
      padding-right: 1rem;
      vertical-align: top;
    }

    .timeline-label strong {
      color: #165df5;
    }

    .timeline-desc {
      display: table-cell;
      vertical-align: top;
    }

    /* Quote block */
    .quote-block {
      border-left: 4px solid #165df5;
      padding: 1.5rem 2rem;
      margin: 2rem 0;
      font-style: italic;
      font-size: 1.2rem;
    }

    @media (max-width: 768px) {
      .quote-block {
        padding: 1rem 1.25rem;
        font-size: 1.05rem;
      }
    }

    /* SIM packages (CONCEPT / pending legal review) */
    .sim-pkg-card {
      background: #111;
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      padding: 1.5rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s, border-color 0.3s;
    }

    .sim-pkg-card:hover {
      transform: translateY(-3px);
      border-color: #165df5;
    }

    .sim-pkg-card h3 {
      font-size: 1.2rem;
      margin-bottom: 0.25rem;
    }

    .sim-pkg-spec {
      font-size: 0.9rem;
      opacity: 0.8;
      margin-bottom: 1rem;
    }

    .sim-pkg-term-label {
      display: block;
      font-size: 0.85rem;
      opacity: 0.8;
      margin-bottom: 0.25rem;
    }

    .sim-term-selector {
      margin-bottom: 1rem;
    }

    .sim-pkg-total {
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.1;
    }

    /* Per-month unit ("/ maand") appended to the headline price. */
    .sim-pkg-permonth {
      font-size: 0.9rem;
      font-weight: 400;
      opacity: 0.8;
    }

    /* Term total line, e.g. "€ 228,- voor 12 maanden, vooruit betaald". */
    .sim-pkg-term-detail {
      font-size: 0.9rem;
      margin-top: 0.35rem;
    }

    /* Savings line for 1- and 2-year terms. */
    .sim-pkg-savings {
      font-size: 0.85rem;
      font-weight: 600;
      margin-top: 0.25rem;
    }

    .sim-pkg-setup {
      font-size: 0.8rem;
      opacity: 0.8;
      margin-top: 0.25rem;
    }

    .sim-pkg-vat {
      font-size: 0.75rem;
      opacity: 0.6;
      margin-top: 0.25rem;
      margin-bottom: 1rem;
    }

    .btn-sim-add {
      margin-top: auto;
      width: 100%;
      background: #165df5;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 0.75rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-sim-add:hover {
      background: #1e6fff;
    }

    .btn-sim-add:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Hero: Earth banner bleeding off the right edge, behind the text. */
    .sim-hero {
      position: relative;
      overflow: hidden;
    }
    .sim-hero > .container {
      position: relative;
      z-index: 2;
    }
    .sim-hero-bg {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: auto;
      max-width: none;
      z-index: 1;
      pointer-events: none;
      /* Fade the dark-left of the image into the hero background (no seam). */
      -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
      mask-image: linear-gradient(to right, transparent, #000 30%);
    }
    @media (max-width: 767px) {
      /* Stacked mobile hero: keep the text clean, hide the decorative image. */
      .sim-hero-bg {
        display: none;
      }
    }