/* =========================
       Dealer Eligibility – FINAL (Standard + Mobile equal insets)
       Changes in this version:
       1) Guidance is lighter/smaller than Hero (no overpower)
       2) Desktop white panel enlarged (fits “red box” feel)
       3) Spacing between items increased naturally
       4) Mobile overlay card keeps TOP spacing too (matches bottom spacing style)
       ========================= */

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Inter, "Segoe UI", Arial, sans-serif;
    }

    /* ===== Guidance ===== */
    .transition-section{
      width:100%;
      padding:24px 0 10px; /* tighter to previous screen */
      background:#fff;
    }
    .transition-inner{
      max-width:1100px;
      margin:0 auto;
      padding:0 clamp(20px, 4vw, 72px);
      text-align:center; /* desktop centered */
    }
    .transition-text{
      font-size:clamp(24px, 2vw, 26px); /* guidance, not H2 */
      font-weight:650;                  /* not heavier than Hero */
      line-height:1.25;
      letter-spacing:-0.01em;
      color:#1a2530;
      margin:0;
    }

    /* ===== Media container ===== */
    .dealer-bg-container{
      position:relative;
      width:100%;
      max-width:1920px;
      height:520px;               /* content-driven (not Hero-height) */
      margin:0 auto 48px;
      border-radius:12px;
      overflow:hidden;
    }

    .bg-image{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:0;
      display:block;
    }

    /* Overlay equals image height (same container) */
    .dealer-bg-container::before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.10);
      z-index:1;
      pointer-events:none;
    }

    /* ===== Content ===== */
    .dealer-content-wrap{
      position:relative;
      z-index:2;
      height:100%;
      display:flex;
      align-items:center;
    }

    .dealer-content-inner{
      width:min(62vw, 980px);         /* larger panel like your red-box expectation */
      margin-left:clamp(32px, 7vw, 120px);
      padding:64px 72px;

      background:rgba(255,255,255,.88);
      backdrop-filter:saturate(140%) blur(2px);
      border-radius:14px;
      box-shadow:0 12px 34px rgba(0,0,0,.12);
      border:1px solid rgba(238,238,238,0.9);
    }

    /* ===== List ===== */
    .target-list{
      list-style:none;
      margin:0;
      padding:0;
    }

    .target-item{
      display:flex;
      align-items:center;
      gap:18px;
      padding:14px 0;              /* more natural breathing space */
    }
    .target-item:last-child{ padding-bottom:0; }

    .item-icon{
      width:44px;
      height:44px;
      background:#8B5A2B;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:19px;
      flex-shrink:0;
      line-height:1;
    }

    .target-item-text{
      margin:0;
      font-size:17px;
      line-height:1.75;
      color:#495057;
      max-width:72ch;
      font-weight:400;
    }
    .target-item-text strong{
      color:#1a2530;
      font-weight:600;
    }

    /* ===== Mobile ===== */
    @media (max-width:768px){
      .transition-section{
        padding:20px 0 8px;
      }
      .transition-inner{
        text-align:left;          /* mobile read mode */
        padding:0 20px;
      }
      .transition-text{
        font-size:clamp(22px, 5vw, 24px);
      }

      .dealer-bg-container{
        height:460px;
        margin:0 auto 40px;
        border-radius:12px;
      }

      /* Keep overlay card ON IMAGE, and give TOP spacing too */
      .dealer-content-wrap{
        height:100%;
        position:relative;
      }

      .dealer-content-inner{
        position:absolute;

        /* ✅ Key fix: top spacing like bottom spacing */
        top:14px;
        right:14px;
        bottom:14px;
        left:14px;

        width:auto;
        margin:0;
        padding:22px 20px;
        border-radius:12px;

        background:rgba(255,255,255,.88);
        backdrop-filter:saturate(140%) blur(2px);
        border:1px solid rgba(238,238,238,0.9);
        box-shadow:0 10px 30px rgba(0,0,0,.12);
      }

      .target-item{
        gap:12px;
        padding:10px 0;
      }

      .item-icon{
        width:38px;
        height:38px;
        font-size:17px;
      }

      .target-item-text{
        font-size:16.5px;
        line-height:1.7;
        max-width:60ch;
      }
    }