.vehicle-md-product {
    width: min(70rem, calc(100vw - 3rem));
    margin-inline: calc((100% - min(70rem, calc(100vw - 3rem))) / 2);
    text-align: left;
    --vmd-accent: var(--secondary-color);
}

div.page .vehicle-md-product p { text-align: left; hyphens: none; }
div.page .vehicle-md-product h1, div.page .vehicle-md-product h2 { margin-top: 0; }
.vehicle-md-product .vmd-hero { display: grid; grid-template-columns: 1fr 1.12fr; gap: 2.5rem; align-items: center; padding-block: 1.5rem 4rem; }
.vehicle-md-product .vmd-eyebrow, .vehicle-md-product .vmd-step { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vmd-accent); }
.vehicle-md-product .vmd-badge { display: inline-block; padding: .15rem .65rem; margin-right: .6rem; border: 1px solid var(--vmd-accent); border-radius: 99px; }
.vehicle-md-product .vmd-hero h1 { font-size: clamp(3.4rem, 5.5vw, 4.8rem); color: var(--vmd-accent); line-height: 1.05; margin-bottom: .8rem; }
.vehicle-md-product .vmd-tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.12; margin-block: 0 1.5rem; }
.vehicle-md-product .vmd-lead { font-size: var(--step-1); line-height: 1.5; }
.vehicle-md-product .vmd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.vehicle-md-product .vmd-button { display: inline-block; padding: .65rem 1.2rem; color: var(--paper); background: var(--vmd-accent); border-radius: .6rem; font-weight: 600; text-decoration: none; }
.vehicle-md-product .vmd-button:hover { color: var(--paper); filter: brightness(1.12); }
.vehicle-md-product .vmd-button:focus-visible { outline: 3px solid var(--highlight-color); outline-offset: 4px; }
.vehicle-md-product .vmd-release, .vehicle-md-product .vmd-capture-note { color: var(--ink-muted); font-size: var(--step--1); }
.vehicle-md-product .vmd-hero-shots, .vehicle-md-product .vmd-shot-pair { display: flex; align-items: flex-start; justify-content: center; gap: 1.25rem; min-width: 0; }
.vehicle-md-product .vmd-phone { margin: 0; min-width: 0; flex: 0 1 auto; text-align: center; }
.vehicle-md-product .vmd-phone img { display: block; width: 270px; height: auto; border-radius: 1.8rem; border: 1px solid var(--rule); box-shadow: 0 1.5rem 3rem -1rem color-mix(in srgb, var(--ink) 22%, transparent); }
.vehicle-md-product .vmd-phone figcaption, .vehicle-md-product .vmd-report figcaption { font-size: var(--step--2); line-height: 1.4; color: var(--ink-muted); padding-top: .9rem; text-align: center; }
.vehicle-md-product .vmd-phone-offset { margin-top: 3rem; }
.vehicle-md-product .vmd-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2rem 0; border-block: 1px solid var(--rule); scroll-margin-top: 2rem; }
.vehicle-md-product .vmd-overview h2 { font-size: var(--step-1); margin-block: .6rem .3rem; }
.vehicle-md-product .vmd-overview p { font-size: var(--step--1); margin: 0; }
.vehicle-md-product .vmd-feature { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4rem; padding-block: 5rem; border-bottom: 1px solid var(--rule); }
.vehicle-md-product .vmd-feature-copy { max-width: 28rem; }
.vehicle-md-product .vmd-feature h2, .vehicle-md-product .vmd-report h2, .vehicle-md-product .vmd-get-ready h2 { font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.1; margin-bottom: 1.3rem; }
.vehicle-md-product .vmd-feature-reverse .vmd-feature-copy { grid-column: 2; grid-row: 1; }
.vehicle-md-product .vmd-feature-reverse .vmd-single-shot { grid-column: 1; grid-row: 1; }
.vehicle-md-product .vmd-single-shot { justify-self: center; }
.vehicle-md-product .vmd-single-shot img { width: 300px; }
.vehicle-md-product .vmd-report { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; padding-block: 5rem; }
.vehicle-md-product .vmd-report figure { margin: 0; justify-self: center; }
.vehicle-md-product .vmd-report img { width: 320px; height: auto; border: 1px solid var(--rule); box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--ink) 12%, transparent); }
.vehicle-md-product .vmd-get-ready { padding: 3rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 1.5rem; }
.vehicle-md-product .vmd-get-ready > p:not(.vmd-eyebrow) { max-width: 44rem; }
.vehicle-md-product .vmd-purchase-note { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--vmd-accent); }
.vehicle-md-product .vmd-requirements { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.vehicle-md-product .vmd-requirements h3 { font-size: var(--step-1); margin-top: 0; }
.vehicle-md-product .vmd-requirements p, .vehicle-md-product .vmd-small { font-size: var(--step--1); }
.vehicle-md-product .vmd-capture-note { max-width: 50rem; margin-top: 2rem; }
.vehicle-md-product .vmd-footer-links { margin-block: 2rem; font-size: var(--step--1); }

@media (max-width: 900px) {
    .vehicle-md-product .vmd-hero { grid-template-columns: 1fr; gap: 2rem; }
    .vehicle-md-product .vmd-hero-copy { max-width: 38rem; }
    .vehicle-md-product .vmd-feature { gap: 2rem; }
    .vehicle-md-product .vmd-phone img { max-width: min(270px, 22vw) !important; }
    .vehicle-md-product .vmd-hero-shots .vmd-phone img { max-width: min(270px, 40vw) !important; }
    .vehicle-md-product .vmd-single-shot img { max-width: 300px !important; }
    .vehicle-md-product .vmd-get-ready { padding: 2rem; }
}

@media (max-width: 600px) {
    .vehicle-md-product .vmd-hero { padding-top: .5rem; padding-bottom: 2.5rem; }
    .vehicle-md-product .vmd-hero h1 { font-size: 3.3rem; }
    .vehicle-md-product .vmd-hero-shots, .vehicle-md-product .vmd-shot-pair { gap: .75rem; }
    .vehicle-md-product .vmd-phone img { max-width: 40vw !important; border-radius: 1.1rem; }
    .vehicle-md-product .vmd-phone-offset { margin-top: 2rem; }
    .vehicle-md-product .vmd-overview { grid-template-columns: 1fr; gap: 1.5rem; }
    .vehicle-md-product .vmd-feature, .vehicle-md-product .vmd-report { grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem; }
    .vehicle-md-product .vmd-feature-reverse .vmd-feature-copy, .vehicle-md-product .vmd-feature-reverse .vmd-single-shot { grid-column: auto; grid-row: auto; }
    .vehicle-md-product .vmd-single-shot img { max-width: min(300px, 76vw) !important; }
    .vehicle-md-product .vmd-report img { max-width: 76vw !important; }
    .vehicle-md-product .vmd-get-ready { padding: 1.5rem; }
    .vehicle-md-product .vmd-requirements { grid-template-columns: 1fr; gap: 1.5rem; }
}
