/* Vehicle Model Page Styles */
.vm-page { font-family: 'GEICO Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.vm-page * { box-sizing: border-box; }

/* Hero Section (Figma: node 3261:9814) */
.vm-hero-section { 
    background-color: #f0f4fb; 
    padding: 64px 0; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
@media (max-width: 900px) {
    .vm-hero-section {
        padding: 32px 0;
    }
}
.vm-hero-container { 
    max-width: 920px; 
    width: 100%;
    margin: 0 auto; 
    padding: 0; 
}
.vm-hero-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    line-height: 1.2;
    width: 100%;
}
.vm-hero-title { 
    font-size: 43.2px; 
    font-weight: 700; 
    color: #000000; 
    margin: 0;
    line-height: 1.2; 
    width: 100%;
}
@media (max-width: 768px) { .vm-hero-title { font-size: 36px; } }
.vm-hero-subtitle { 
    font-size: 21.6px; 
    font-weight: 700; 
    color: #1c1c1e; 
    margin: 0;
    line-height: 1.2;
    width: 100%;
}
.vm-hero-desc { 
    color: #1c1c1e; 
    font-size: 16px; 
    line-height: 1.2; 
    margin: 0;
    width: 100%;
}

/* Hero ZIP quote form (matches vehicle make page vmk-quote-form) */
.vm-page .vmk-quote-form {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.vm-page .vmk-quote-form > * {
    margin-bottom: 0 !important;
}

.vm-page .vmk-zip-input {
    width: 335px;
    max-width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin: 0;
    border: 1px solid #878787;
    border-radius: 8px;
    background: white;
    font-family: 'GEICO Roobert', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1c1c1e;
    box-sizing: border-box;
}

.vm-page .vmk-zip-input::placeholder {
    color: #878787;
}

.vm-page .vmk-zip-input:focus {
    outline: none;
    border-color: #004b9b;
    box-shadow: 0 0 0 2px rgba(0, 75, 155, 0.2);
}

.vm-page .vmk-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 48px;
    padding: 0 24px;
    margin: 0;
    background-color: #004b9b;
    border: 2px solid #004b9b;
    border-radius: 100px;
    font-family: 'GEICO Roobert', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: #fafafa;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
    box-sizing: border-box;
}

.vm-page .vmk-btn-primary:visited {
    color: #fafafa;
}

.vm-page .vmk-btn-primary:hover {
    background-color: #003d7a;
    border-color: #003d7a;
}

.vm-page .vmk-btn-primary:active {
    background-color: #003060;
    border-color: #003060;
}

.vm-page .vmk-disclaimer {
    font-family: 'GEICO Roobert', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #1c1c1e;
    margin: 0;
}

/* Section Styles */
.vm-section { padding: 3rem 0; }
.vm-section-white { background: white; }
.vm-section-gray { background: #f9fafb; }
.vm-container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.vm-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.vm-section-icon { padding: 0.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.vm-section-icon-blue { background: #dbeafe; color: #1d4ed8; }
.vm-section-icon-green { background: #dcfce7; color: #15803d; }
.vm-section-icon-indigo { background: #e0e7ff; color: #4338ca; }
.vm-section-icon-purple { background: #f3e8ff; color: #7c3aed; }
.vm-section-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0; }

/* Affects Section (Figma: node 5151:4244) */
.vm-affects-section { 
    background: #fafafa; 
    padding: 64px 0; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-affects-container { 
    max-width: 920px; 
    width: 100%;
    margin: 0 auto; 
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.vm-affects-title { 
    font-size: 33.6px; 
    font-weight: 700; 
    color: #000000; 
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
@media (max-width: 768px) { .vm-affects-title { font-size: 28px; } }
.vm-affects-desc { 
    font-size: 16px; 
    color: #1c1c1e; 
    line-height: 1.2;
    width: 100%;
    margin: 0;
}

/* Stat Cards Row */
.vm-affects-stats-row {
    display: flex;
    gap: 35px;
    width: 100%;
    min-height: 107px;
    align-items: center;
}
@media (max-width: 768px) { 
    .vm-affects-stats-row { 
        flex-wrap: wrap;
        min-height: 0;
        gap: 16px;
    }
    .vm-affects-stat-card {
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
    }
}
@media (max-width: 500px) {
    .vm-affects-stats-row {
        flex-direction: column;
    }
    .vm-affects-stat-card {
        flex: 1 1 100%;
        min-width: 100%;
    }
}
.vm-affects-stat-card {
    flex: 1;
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    min-height: 107px;
    display: flex;
    align-items: center;
    padding: 29px 20px;
    gap: 8px;
}
@media (max-width: 768px) { 
    .vm-affects-stat-card { 
        min-height: 0;
        padding: 20px;
    }
}
.vm-affects-stat-icon {
    width: 49px;
    height: 49px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-affects-stat-icon svg {
    width: 32px;
    height: 32px;
}
.vm-affects-stat-icon-safety svg { width: 49px; height: 49px; }
.vm-affects-stat-icon-cost svg { width: 49px; height: 49px; }
.vm-affects-stat-icon-mpg svg { width: 49px; height: 49px; }
.vm-affects-stat-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vm-affects-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 24px;
}
.vm-affects-stat-label {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.2;
}

/* Highlight Messaging Box */
.vm-highlight-box {
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.vm-highlight-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #004b9b;
}
.vm-highlight-icon svg {
    width: 32px;
    height: 32px;
}
.vm-highlight-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vm-highlight-title {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.5;
    margin: 0;
}
.vm-highlight-text {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.2;
    margin: 0;
}
.vm-highlight-text p {
    margin: 0;
}
.vm-highlight-text p:empty {
    display: none;
}

/* Fuel Economy Section */
.vm-fuel-section-title {
    font-size: 26.4px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
.vm-fuel-cards-row {
    display: flex;
    gap: 30px;
    width: 100%;
}
@media (max-width: 768px) { 
    .vm-fuel-cards-row { 
        flex-wrap: wrap;
        gap: 16px;
    }
    .vm-fuel-cards-row .vm-fuel-card {
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
    }
}
@media (max-width: 480px) { 
    .vm-fuel-cards-row .vm-fuel-card {
        flex: 1 1 100%;
        min-width: 100%;
    }
}
.vm-fuel-card {
    flex: 1;
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vm-fuel-card-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 16px;
    text-align: center;
    width: 100%;
}
.vm-fuel-card-label {
    font-size: 14px;
    color: #1c1c1e;
    line-height: 1.22;
    margin: 0;
}
.vm-fuel-card-value {
    font-size: 36px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.32;
    margin: 0;
}
.vm-fuel-card-divider {
    width: 100%;
    height: 1px;
    background: #ededed;
}
.vm-fuel-card-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: 100%;
}
.vm-fuel-card-subtext {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* Disclaimer Box */
.vm-disclaimer-box {
    background: #ffffff;
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-height: none;
    overflow-y: visible;
}
.vm-disclaimer-text {
    font-size: 12px;
    color: #1c1c1e;
    line-height: 1.5;
    margin: 0;
}

/* Insurance Cost Drivers Card (Figma: static flexible container) */
.vm-cost-drivers-card {
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 24px 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.vm-cost-drivers-title {
    font-size: 21.6px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.2;
    margin: 0;
}
.vm-cost-drivers-body {
    font-size: 16px;
    color: #000000;
    line-height: 1.2;
}
.vm-cost-drivers-body p {
    margin: 0 0 20px 0;
}
.vm-cost-drivers-body p:last-child {
    margin-bottom: 0;
}

/* Accordion Section */
.vm-accordion {
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    width: 100%;
    overflow: hidden;
}
.vm-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    cursor: pointer;
    width: 100%;
    background: inherit;
    border: none;
    text-align: left;
    list-style: none;
    transition: background 0.2s;
}
.vm-accordion-header::-webkit-details-marker {
    display: none;
}
.vm-accordion-header:hover {
    background: #f9f9f9;
}
.dark .vm-page .vm-accordion-header:hover {
    background: #223469;
}
.vm-accordion-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.vm-accordion-title {
    font-size: 21.6px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.2;
    margin: 0;
}
@media (max-width: 768px) { .vm-accordion-title { font-size: 1.25rem; } }
.vm-accordion-subtitle {
    font-size: 14px;
    color: #1c1c1e;
    line-height: 1.2;
    margin: 0;
}
.vm-accordion-icon {
    width: 24px;
    height: 24px;
    color: #004b9b;
    transition: transform 0.3s;
    flex-shrink: 0;
}
.vm-accordion-icon svg {
    width: 24px;
    height: 24px;
}
.vm-accordion[open] .vm-accordion-icon {
    transform: rotate(180deg);
}
.dark .vm-page .vm-accordion-icon {
    color: #8ec5ff;
}
.vm-accordion-content {
    padding: 0 32px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.vm-accordion-text {
    font-size: 16px;
    color: #000000;
    line-height: 1.2;
    margin: 0;
}
.vm-accordion-text p {
    margin: 0 0 20px 0;
}
.vm-accordion-text p:last-child {
    margin-bottom: 0;
}

/* Stats Grid */
.vm-stats-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .vm-stats-grid { grid-template-columns: repeat(3, 1fr); } }
.vm-stat-card { background: white; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; text-align: center; }
.vm-stat-value { font-size: 1.875rem; font-weight: 700; color: #111827; margin-bottom: 0.25rem; }
.vm-stat-label { font-size: 0.875rem; color: #6b7280; font-weight: 500; text-transform: uppercase; }
.vm-stat-sublabel { font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem; }

/* Content Block */
.vm-content-block { background: white; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; }
.vm-content-block p { color: #374151; line-height: 1.75; margin: 0 0 1.5rem; }
.vm-content-block p:last-child { margin-bottom: 0; }

/* Compare Trims Section (Figma: node 3265:11303) */
.vm-compare-section {
    background: #f0f4fb;
    padding: 64px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-compare-container {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.vm-compare-title {
    font-size: 33.6px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
@media (max-width: 768px) { .vm-compare-title { font-size: 28px; } }
.vm-compare-subtitle {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
.vm-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}
.vm-compare-table th {
    background: #dcdcdc;
    padding: 16px 24px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.2;
    border: 1px solid #dcdcdc;
}
@media (max-width: 768px) { .vm-compare-table th { padding: 12px 16px; font-size: 12px; } }
.vm-compare-table td {
    background: white;
    padding: 24px;
    font-size: 14px;
    color: #1c1c1e;
    line-height: 1.2;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}
@media (max-width: 768px) { .vm-compare-table td { padding: 16px; font-size: 13px; } }
.vm-compare-table tbody tr:hover {
    background: #fafafa;
}
.vm-compare-table-wrap {
    width: 100%;
    overflow-x: auto;
}
@media (max-width: 768px) {
    .vm-compare-table {
        min-width: 600px;
    }
}

/* Safety Features Section (Figma: node 3261:9901) */
.vm-safety-section {
    background: #fafafa;
    padding: 64px 0 98px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-safety-container {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.vm-safety-title {
    font-size: 33.6px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
@media (max-width: 768px) { .vm-safety-title { font-size: 28px; } }
.vm-safety-subtitle {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
.vm-safety-grid {
    display: flex;
    gap: 32px;
    width: 100%;
}
@media (max-width: 768px) {
    .vm-safety-grid {
        flex-direction: column;
        gap: 0;
    }
}
.vm-safety-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.vm-safety-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 0;
    border-bottom: 1px solid #dcdcdc;
    min-width: 320px;
}
.vm-safety-item-name {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 24px;
    margin: 0;
}
.vm-safety-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.vm-safety-badge-standard {
    background: #dcfce7;
    color: #15803d;
}
.vm-safety-badge-optional {
    background: #dbeafe;
    color: #1d4ed8;
}
.vm-safety-badge-unavailable {
    background: #ededed;
    color: #6b7280;
}
.vm-safety-disclaimer {
    background: #ededed;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-height: 256px;
    overflow-y: auto;
}
.vm-safety-disclaimer-text {
    font-size: 12px;
    color: #1c1c1e;
    line-height: 1.5;
    margin: 0;
}

/* Get Quote Banner Section (Figma: node 3288:16664) */
.vm-quote-banner {
    background: #005ccc;
    padding: 104px 24px 40px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.vm-quote-banner-gecko {
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #7cb342;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* GDS nav/footer base sets img { max-width: 100%; height: auto; } — override for crop layout.
   Circle stays 150px; scale/position the asset to frame the gecko through overflow:hidden. */
.vm-quote-banner-gecko img {
    display: block;
    width: 376px;
    max-width: none;
    aspect-ratio: 171/166;
    margin-top: 210px;
    transform-origin: 50% 50%;
}
.vm-quote-banner-content {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-quote-banner-title {
    color: #fff;
    text-align: center;
    font-feature-settings: "liga" 0, "clig" 0;
    font-family: 'GEICO Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 132%;
    margin: 0;
}
@media (max-width: 768px) { .vm-quote-banner-title { font-size: 28px; } }
.vm-quote-banner-subtitle {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}
.vm-quote-banner-form {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 0;
}
@media (max-width: 600px) { 
    .vm-quote-banner-form { 
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}
.vm-quote-banner-input {
    width: 143px;
    padding: 12px 16px;
    border: 1px solid #878787;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    background: white;
    margin: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}
@media (max-width: 600px) { .vm-quote-banner-input { width: 100%; max-width: 143px; } }
.vm-quote-banner-input::placeholder {
    color: #878787;
}
/* Figma node 5151:4340 — Primary large on blue banner: white pill, Heritage Blue text, no border */
.vm-quote-banner-btn {
    background: #fff;
    color: #004b9b;
    border: none;
    border-radius: 100px;
    padding: 0 24px;
    height: 48px;
    min-width: 120px;
    font-family: 'GEICO Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vm-quote-banner-btn:hover {
    background: #f0f4fb;
    color: #003d7a;
}
.vm-quote-banner-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.vm-quote-banner-wrapper {
    padding-top: 75px;
    background: #fafafa;
}

/* Why Choose GEICO Section (Figma: node 3272:14318) */
.vm-why-section {
    background: #fafafa;
    padding: 64px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-why-container {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.vm-why-title {
    font-size: 33.6px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
@media (max-width: 768px) { .vm-why-title { font-size: 28px; } }
.vm-why-subtitle {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
.vm-why-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    width: 100%;
}
.vm-why-card {
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.05);
    width: 283px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 400px) { .vm-why-card { width: 100%; } }
.vm-why-card-icon {
    width: 32px;
    height: 32px;
}
.vm-why-card-icon svg {
    width: 32px;
    height: 32px;
}
/* Figma export: document icon uses a white “paper” rect — blend with card in dark mode */
.vm-why-icon-paper {
    fill: #fff;
}
.dark .vm-page .vm-why-icon-paper {
    fill: #1b2a57;
}
/* #004B9B on #1b2a57 is low contrast; match dark-mode accent (e.g. links, coverage CTA) */
.dark .vm-page .vm-why-card-icon svg path {
    fill: #8ec5ff;
}
.vm-why-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-why-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.5;
    margin: 0;
}
.vm-why-card-desc {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.5;
    margin: 0;
}
.vm-why-cta-btn {
    background: #004b9b;
    color: #fafafa;
    border: 2px solid #004b9b;
    border-radius: 100px;
    padding: 0 24px;
    height: 48px;
    min-width: 200px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vm-why-cta-btn:hover {
    background: #003d7a;
    color: #fafafa;
}
.vm-why-disclaimer {
    font-size: 12px;
    color: #878787;
    line-height: 16px;
    margin: 0;
}

/* Coverage Options Section (Figma: node 3261:9831) */
.vm-coverage-options {
    background: #f0f4fb;
    padding: 64px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-coverage-container {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.vm-coverage-title {
    font-size: 33.6px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
@media (max-width: 768px) { .vm-coverage-title { font-size: 28px; } }
.vm-coverage-subtitle {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.2;
    width: 100%;
    margin: 0;
}
.vm-coverage-card {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.vm-coverage-card-header {
    background: #005ccc;
    padding: 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 8px 8px 0 0;
}
.vm-coverage-card-header-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.vm-coverage-card-icon {
    padding-top: 8px;
    color: #fafafa;
}
.vm-coverage-card-icon svg {
    width: 24px;
    height: 24px;
}
.vm-coverage-card-title {
    font-size: 36px;
    font-weight: 700;
    color: #fafafa;
    line-height: 1.32;
    margin: 0;
}
@media (max-width: 768px) { .vm-coverage-card-title { font-size: 24px; } }
.vm-coverage-card-btn {
    background: white;
    color: #295697;
    border: none;
    border-radius: 25px;
    padding: 0 24px;
    height: 48px;
    min-width: 120px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.vm-coverage-card-btn:hover {
    background: #f0f0f0;
}
.vm-coverage-card-body {
    background: white;
    border: 1px solid #ededed;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 24px;
}
.vm-coverage-item {
    display: block;
    padding-bottom: 32px;
    margin-bottom: 0;
}
.vm-coverage-item-last {
    padding-bottom: 16px;
}
.vm-coverage-card-body .vm-coverage-item hr.vm-coverage-divider {
    display: block;
    width: 100%;
    height: 1px;
    background: #ededed;
    border: none;
    border-top: none;
    margin: 16px 0 0 0;
    padding: 0;
}
.vm-coverage-item-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.vm-coverage-item-title {
    font-size: 28px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.22;
    margin: 0;
}
@media (max-width: 768px) { .vm-coverage-item-title { font-size: 20px; } }
.vm-coverage-badge {
    background: #ededed;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 4px;
    white-space: nowrap;
}
.vm-coverage-badge-required {
    background: #fff3e0;
    color: #e65100;
}
.vm-coverage-badge-optional {
    background: #e8f5e9;
    color: #2e7d32;
}
.vm-coverage-badge-varies {
    background: #ededed;
    color: #000000;
}
.vm-coverage-item-desc {
    font-size: 16px;
    color: #1c1c1e;
    line-height: 1.5;
    margin: 0;
}
.vm-coverage-disclaimer {
    font-size: 12px;
    color: #878787;
    line-height: 16px;
    margin: 16px 0 0 0;
}

/* Coverage section mobile responsive */
@media (max-width: 481px) {
    .vm-coverage-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .vm-coverage-card-btn {
        width: 100%;
        text-align: center;
    }
    .vm-coverage-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .vm-coverage-item-title {
        font-size: 18px;
    }
}

/* FAQ Section */
.vm-faq-section {
    background: #fafafa;
    padding: 64px 24px;
}

.vm-faq-container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
}

.vm-faq-header {
    margin-bottom: 32px;
}

.vm-faq-title {
    font-weight: 700;
    font-size: 33.6px;
    line-height: 1.2;
    color: black;
    margin: 0 0 16px 0;
}

@media (max-width: 768px) {
    .vm-faq-title {
        font-size: 28px;
    }
}

.vm-faq-subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #1c1c1e;
    margin: 0;
}

/* FAQ Accordion - GDK Style */
.vm-faq-section .accordion {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vm-faq-section .accordion > li {
    background: white;
    border: 1px solid #ededed;
    border-radius: 16px;
    margin-bottom: 8px;
    overflow: hidden;
}

.vm-faq-section .accordion > li:last-child {
    margin-bottom: 0;
}

.vm-faq-section .accordion .accordion-headline {
    padding: 24px 32px;
    cursor: pointer;
}

.vm-faq-section .accordion .accordion-headline:hover {
    background-color: #f9f9f9;
}

.vm-faq-section .accordion .accordion-headline .heading.h4 {
    font-weight: 700;
    font-size: 21.6px;
    line-height: 1.2;
    color: #1c1c1e;
    margin: 0;
    text-align: left;
}

@media (max-width: 768px) {
    .vm-faq-section .accordion .accordion-headline {
        padding: 20px 24px;
    }
    
    .vm-faq-section .accordion .accordion-headline .heading.h4 {
        font-size: 18px;
    }
}

.vm-faq-section .accordion .accordion-content-container {
    display: none;
}

.vm-faq-section .accordion > li.open .accordion-content-container {
    display: block;
}

.vm-faq-section .accordion .accordion-content {
    padding: 0 32px 24px 32px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #1c1c1e;
}

.vm-faq-section .accordion .accordion-content a {
    color: #0066FF;
    text-decoration: none;
}

.vm-faq-section .accordion .accordion-content a:hover {
    text-decoration: underline;
}

/* Dark mode */
.dark .vm-faq-section {
    background: #0f1838;
}

.dark .vm-faq-title {
    color: #fafafa;
}

.dark .vm-faq-subtitle {
    color: #c8d2ea;
}

.dark .vm-faq-section .accordion > li {
    background: #1b2a57;
    border-color: #2d3f74;
}

.dark .vm-faq-section .accordion .accordion-headline:hover {
    background-color: #223469;
}

.dark .vm-faq-section .accordion .accordion-headline .heading.h4 {
    color: #fafafa;
}

.dark .vm-faq-section .accordion .accordion-content {
    color: #d9e2f5;
}

.dark .vm-faq-section .accordion .accordion-content a {
    color: #8ec5ff;
}

/* Hero: align with compare / alternating section band in dark mode */
.dark .vm-page .vm-hero-section {
    background: #14224a;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .vm-page .vm-affects-section,
.dark .vm-page .vm-safety-section,
.dark .vm-page .vm-why-section,
.dark .vm-page .vm-quote-banner-wrapper {
    background: #0f1838;
}

.dark .vm-page .vm-quote-banner {
    background: #003d8a;
}

.dark .vm-page .vm-quote-banner-input {
    background: #1b2a57;
    border-color: #4a5f94;
    color: #fafafa;
}

.dark .vm-page .vm-quote-banner-input::placeholder {
    color: #8899bb;
}

/* Match .vm-coverage-card-btn dark mode */
.dark .vm-page .vm-quote-banner-btn {
    background: #8ec5ff;
    color: #10214a;
    border: none;
}

.dark .vm-page .vm-quote-banner-btn:hover {
    background: #b8daff;
}

.dark .vm-page .vm-quote-banner-btn:focus-visible {
    outline: 2px solid #10214a;
    outline-offset: 2px;
}

.dark .vm-page .vm-compare-section,
.dark .vm-page .vm-coverage-options {
    background: #14224a;
}

.dark .vm-page .vm-hero-title,
.dark .vm-page .vm-affects-title,
.dark .vm-page .vm-fuel-section-title,
.dark .vm-page .vm-compare-title,
.dark .vm-page .vm-safety-title,
.dark .vm-page .vm-why-title,
.dark .vm-page .vm-coverage-title {
    color: #fafafa;
}

.dark .vm-page .vm-hero-subtitle,
.dark .vm-page .vm-hero-desc,
.dark .vm-page .vm-affects-desc,
.dark .vm-page .vm-compare-subtitle,
.dark .vm-page .vm-safety-subtitle,
.dark .vm-page .vm-why-subtitle,
.dark .vm-page .vm-coverage-subtitle {
    color: #c8d2ea;
}

.dark .vm-page .vmk-disclaimer {
    color: #8a94b5;
}

.dark .vm-page .vm-affects-stat-card,
.dark .vm-page .vm-highlight-box,
.dark .vm-page .vm-fuel-card,
.dark .vm-page .vm-disclaimer-box,
.dark .vm-page .vm-accordion,
.dark .vm-page .vm-cost-drivers-card,
.dark .vm-page .vm-compare-table,
.dark .vm-page .vm-compare-table td,
.dark .vm-page .vm-safety-disclaimer,
.dark .vm-page .vm-why-card,
.dark .vm-page .vm-coverage-card-body {
    background: #1b2a57;
    border-color: #2d3f74;
}

.dark .vm-page .vm-coverage-card-header {
    background: #003d8a;
}

.dark .vm-page .vm-coverage-card-btn {
    background: #8ec5ff;
    color: #10214a;
}

.dark .vm-page .vm-coverage-card-btn:hover {
    background: #b8daff;
}

.dark .vm-page .vm-compare-table th {
    background: #223469;
    border-color: #2d3f74;
    color: #eef3ff;
}

.dark .vm-page .vm-affects-stat-value,
.dark .vm-page .vm-affects-stat-label,
.dark .vm-page .vm-highlight-title,
.dark .vm-page .vm-highlight-text,
.dark .vm-page .vm-fuel-card-label,
.dark .vm-page .vm-fuel-card-value,
.dark .vm-page .vm-fuel-card-subtext,
.dark .vm-page .vm-disclaimer-text,
.dark .vm-page .vm-accordion-title,
.dark .vm-page .vm-cost-drivers-title,
.dark .vm-page .vm-accordion-subtitle,
.dark .vm-page .vm-accordion-text,
.dark .vm-page .vm-cost-drivers-body,
.dark .vm-page .vm-compare-table td,
.dark .vm-page .vm-safety-item-name,
.dark .vm-page .vm-safety-disclaimer-text,
.dark .vm-page .vm-why-card-title,
.dark .vm-page .vm-why-card-desc,
.dark .vm-page .vm-coverage-item-title,
.dark .vm-page .vm-coverage-item-desc,
.dark .vm-page .vm-coverage-disclaimer {
    color: #d9e2f5;
}

.dark .vm-page .vm-fuel-card-divider,
.dark .vm-page .vm-safety-item,
.dark .vm-page .vm-coverage-item {
    border-color: #2d3f74;
}

.dark .vm-page .vm-coverage-card-body .vm-coverage-item hr.vm-coverage-divider {
    background: #2d3f74;
}

.dark .vm-page .vm-why-cta-btn {
    color: #eef3ff;
    border-color: #8ec5ff;
}

.dark .vm-page .vmk-zip-input {
    background: #1b2a57;
    border-color: #4a5a8a;
    color: #fafafa;
}

.dark .vm-page .vmk-zip-input::placeholder {
    color: #8a94b5;
}

.dark .vm-page .vmk-zip-input:focus {
    border-color: #8ec5ff;
    box-shadow: 0 0 0 2px rgba(142, 197, 255, 0.25);
}

.dark .vm-page .vmk-btn-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #fafafa;
}

.dark .vm-page .vmk-btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

@media (max-width: 956px) {
    .vm-hero-container,
    .vm-affects-container,
    .vm-compare-container,
    .vm-safety-container,
    .vm-why-container,
    .vm-coverage-container,
    .vm-faq-container {
        padding: 0 2rem;
    }
}

