.ag-vgl-section,
.ag-vgl-section * { box-sizing: border-box; }

.ag-vgl-section {
    width: 100%;
    max-width: var(--ag-vgl-max-width, 1780px);
    margin: 0 auto;
    padding: 0 48px;
    background: transparent;
    font-family: Quicksand, Arial, sans-serif;
}

.ag-vgl-card {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid rgba(22, 25, 31, .09);
    border-radius: var(--ag-vgl-radius, 9px);
    box-shadow: 0 6px 20px rgba(19, 23, 29, .055);
    background: #f8f5ef;
    isolation: isolate;
    transition: border-color .28s ease, box-shadow .28s ease;
}

.ag-vgl-card:hover {
    border-color: rgba(219, 142, 1, .30);
    box-shadow: 0 10px 28px rgba(19, 23, 29, .09);
}

.ag-vgl-media {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 0;
    width: 57%;
    height: 100%;
    overflow: hidden;
    background: #efe8dc;
}

.ag-vgl-media::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 24%;
    background: linear-gradient(90deg, #f8f5ef 0%, rgba(248,245,239,.65) 35%, rgba(248,245,239,0) 100%);
    z-index: 2;
    pointer-events: none;
}

.ag-vgl-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(255,255,255,.03) 0%,
      rgba(255,255,255,0) 30%,
      rgba(0,0,0,.02) 100%);
    z-index: 1;
    pointer-events: none;
}

.ag-vgl-media img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    max-width: none;
    max-height: none;
}

/* Align all left-column objects with the content line used by the layout above. */
.ag-vgl-content {
    position: relative;
    z-index: 3;
    width: 50%;
    min-height: 460px;
    padding: 32px 32px 32px 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ag-vgl-eyebrow,
.ag-vgl-title,
.ag-vgl-description,
.ag-vgl-feature-text,
.ag-vgl-button {
    font-family: Quicksand, Arial, sans-serif;
}

.ag-vgl-eyebrow {
    margin: 0 0 13px;
    color: #DB8E01;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ag-vgl-title {
    margin: 0;
    max-width: 100%;
    color: #17191d;
    font-size: clamp(30px, 2.45vw, 42px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.035em;
}

.ag-vgl-description {
    margin: 14px 0 0;
    max-width: 650px;
    color: #626b76;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;
}

.ag-vgl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 218px;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 22px;
    max-width: 100%;
    text-align: center;
    border: 1px solid #DB8E01;
    border-radius: 7px;
    color: #fff !important;
    background: #DB8E01;
    box-shadow: 0 7px 18px rgba(181, 128, 8, .16);
    font-size: 13.2px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ag-vgl-button:hover,
.ag-vgl-button:focus-visible {
    color: #fff !important;
    background: #bd7900;
    border-color: #bd7900;
    box-shadow: 0 9px 22px rgba(181, 128, 8, .22);
}

.ag-vgl-arrow {
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    transition: transform .22s ease;
}

.ag-vgl-button:hover .ag-vgl-arrow,
.ag-vgl-button:focus-visible .ag-vgl-arrow {
    transform: translateX(4px);
}

.ag-vgl-features {
    width: 100%;
    position: relative;
    max-width: 600px;
    margin-top: 22px;
    padding-top: 18px;
    
    gap: 14px 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.ag-vgl-feature-item {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.ag-vgl-feature-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(219, 142, 1, .85);
    background: #fff;
    color: #DB8E01;
    box-shadow: 0 5px 14px rgba(19, 23, 29, .045);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ag-vgl-feature-icon svg {
    width: 27px;
    height: 27px;
}

.ag-vgl-feature-text {
    display: block;
    color: #5a6470;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    font-weight: 600;
}

@media (max-width: 1439px) {
    .ag-vgl-section { padding-left: 42px; padding-right: 42px; }
    .ag-vgl-content { padding: 36px 30px; min-height: 420px; }
    .ag-vgl-card { min-height: 420px; }
    .ag-vgl-description { font-size: 15px; }
    .ag-vgl-feature-icon { flex-basis: 44px; width: 44px; height: 44px; }
    .ag-vgl-feature-text { font-size: 12px; }
    .ag-vgl-title { font-size: 32px; }
}
@media (max-width: 1199px) {
    .ag-vgl-section { padding-left: 34px; padding-right: 34px; }
    .ag-vgl-content { padding: 30px 24px; }
    .ag-vgl-title { font-size: 26px; }
    .ag-vgl-feature-item { gap: 9px; }
}
@media (max-width: 991px) {
    .ag-vgl-section { padding-left: 18px; padding-right: 18px; }
    .ag-vgl-card { display: flex; flex-direction: column; min-height: 0; }
    .ag-vgl-content { width: 100%; min-height: 0; padding: 28px; }
    .ag-vgl-media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 850 / 510; }
    .ag-vgl-media::before {
        inset: auto 0 0; width: 100%; height: 48px;
        background: linear-gradient(0deg, #f8f5ef, rgba(248,245,239,0));
    }
    .ag-vgl-title { font-size: 27px; }
}
@media (max-width: 640px) {
    .ag-vgl-card { border-radius: 8px; }
    .ag-vgl-content { padding: 24px 20px; }
    .ag-vgl-eyebrow { font-size: 11px; margin-bottom: 10px; letter-spacing: .16em; }
    .ag-vgl-title { font-size: 25px; }
    .ag-vgl-description { font-size: 12.5px; }
    .ag-vgl-button { min-width: 190px; min-height: 46px; font-size: 12.8px; padding: 0 18px; }
    .ag-vgl-features { gap: 16px 12px; margin-top: 24px; padding-top: 20px; }
    .ag-vgl-feature-item { gap: 8px; }
    .ag-vgl-feature-icon { flex-basis: 36px; width: 36px; height: 36px; }
    .ag-vgl-feature-icon svg { width: 18px; height: 18px; }
    .ag-vgl-feature-text { font-size: 11px; }
}
@media (max-width: 359px) {
    .ag-vgl-features { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-vgl-card, .ag-vgl-button, .ag-vgl-arrow { transition: none !important; }
}

.ag-vgl-content > * { min-width: 0; overflow-wrap: anywhere; }
.ag-vgl-button:focus-visible { outline: 3px solid #805300; outline-offset: 4px; }

.ag-vgl-features::before { content: ''; position: absolute; top: 0; left: 0; width: 218px; max-width: 100%; height: 1px; background: rgba(23,25,29,.16); }
.ag-vgl-button > span:first-child { padding-block: 12px; }
.ag-vgl-arrow { flex-shrink: 0; }