/* Product presentation: shared measurements, centered reading areas and clear choices. */
.vg-product {
  --vp-space: clamp(3.5rem, 6vw, 6rem);
  --vp-tint: color-mix(in srgb, var(--dv) 8%, #fff);
  --vp-tint-light: color-mix(in srgb, var(--dv) 3%, #fff);
  --vp-tint-border: color-mix(in srgb, var(--dv) 28%, var(--hair));
}
.vg-product :is(.vp-hero__grid, .vp-overview, .vp-benefits, .vp-details, .vp-models, .vp-retrofit, .vp-specifications, .vp-related) > * { min-width: 0; }
.vg-product :is(.vp-planning__grid, .vg-faq__a) a { text-decoration: underline; text-underline-offset: .18em; }
.vg-product figure { margin: 0; overflow: hidden; }
.vg-product figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-product :is(.vp-hero__image, .vp-how__image, .vp-model figure, .vp-retrofit__image) > :is(.vp-photo--portrait, .vp-photo--square) { object-fit: contain; background: var(--vp-tint-light); }
.vg-product :is(.vp-hero__image, .vp-how__image):has(> .vp-photo--portrait) { aspect-ratio: 4/5; max-height: 620px; }
.vg-product :is(.vp-hero__image, .vp-how__image):has(> .vp-photo--square) { aspect-ratio: 1; max-height: 620px; }
.vg-product .vp-section { padding-block: 0 var(--vp-space); }
.vg-product .vp-section:first-of-type { padding-top: var(--vp-space); }
.vg-product .vp-hero { padding: 1rem 0 2.5rem; }
.vp-hero__grid { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.vg-product .vp-hero h1 { font-size: clamp(2.5rem, 4.8vw, 4.5rem); margin: 1.4rem 0 1rem; overflow-wrap: anywhere; text-wrap: balance; }
.vp-hero__grid--text { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin-inline: auto; text-align: center; }
.vp-hero__grid--text :is(.vg-label, .vg-btns, .vp-hero__highlights) { justify-content: center; }
.vp-hero__grid--text :is(.vp-hero__promise, .lede) { margin-inline: auto; }
.vg-product .vp-hero__promise { color: var(--t0); font-family: var(--font-head); font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.25; letter-spacing: -.025em; max-width: 25ch; margin-bottom: 1.2rem; text-wrap: balance; }
.vp-hero__highlights { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; font-size: .875rem; }
.vp-hero__highlights li { display: flex; align-items: center; gap: .4rem; }
.vp-hero .vg-btns { margin-top: 1.8rem; }
.vp-hero__highlights svg { width: 16px; height: 16px; fill: none; stroke: var(--dv-dark); stroke-width: 2; }
.vp-hero__visual { background: #fff; padding: .6rem; border: 1px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow-2); }
.vp-hero__image { aspect-ratio: 4/3; border-radius: 15px; }
.vp-hero__caption { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; padding: 1rem .55rem .55rem; font-size: .75rem; }
.vp-hero__caption a { font-weight: 600; color: var(--dv-dark); }
.vp-stats { display: grid; grid-template-columns: repeat(var(--vp-stat-columns, 4), minmax(0,1fr)); margin: 2.5rem 0 0; background: #fff; border: 1px solid var(--hair); border-radius: 14px; }
.vp-stats--count-1 { --vp-stat-columns: 1; max-width: 420px; margin-inline: auto; }
.vp-stats--count-2 { --vp-stat-columns: 2; max-width: 800px; margin-inline: auto; }
.vp-stats--count-3 { --vp-stat-columns: 3; }
.vp-stats--count-5 { --vp-stat-columns: 5; }
.vp-stats--count-6 { --vp-stat-columns: 6; }
.vp-stats > div { display: flex; flex-direction: column; padding: 1.25rem 1.5rem; gap: .4rem; }
.vp-stats > div + div { border-left: 1px solid var(--hair); }
.vp-stats dt { font-size: .8125rem; line-height: 1.5; }
.vp-stats dd { order: -1; margin: 0; font: 600 clamp(1.15rem, 1.7vw, 1.5rem)/1.3 var(--font-head); color: var(--dv-dark); overflow-wrap: anywhere; }
.vg-product .vp-subnav { margin-bottom: var(--vp-space); }
.vp-subnav > .vg-shell { display: flex; align-items: center; gap: 1.5rem; }
.vp-subnav ul { min-width: 0; flex: 1; }
.vg-product .vp-subnav__contact { flex: none; font-size: .8125rem; font-weight: 600; color: var(--t0); border: 0; border-radius: 999px; background: var(--gold); padding: .65rem 1rem; }
.vg-product .vp-subnav__contact:hover { background: #ffe272; }
.vp-heading { max-width: 760px; text-align: center; margin: 0 auto 2.25rem; }
.vp-heading .vg-label { justify-content: center; }
.vg-product .vp-heading h2 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); margin: .9rem auto 1rem; max-width: 25ch; text-wrap: balance; }
.vp-heading .lede { margin-inline: auto; max-width: 60ch; }
.vp-overview { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: stretch; }
.vp-overview--text { grid-template-columns: minmax(0, 1fr); }
.vp-overview--text .vp-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vp-overview--text .vp-benefits:where(:has(> article:first-child:last-child)) { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
.vp-overview--text .vp-benefits:where(:has(> article:nth-child(2):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
.vp-overview--text .vp-benefits:where(:has(> article:nth-child(3):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-overview--text .vp-benefits--count-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vp-overview--text .vp-benefits--count-5 > article { grid-column: span 2; }
.vp-overview--text .vp-benefits--count-5 > article:where(:nth-last-child(-n+2)) { grid-column: span 3; }
.vp-overview--text .vp-benefits--count-7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.vp-overview--text .vp-benefits--count-7 > article { grid-column: span 3; }
.vp-overview--text .vp-benefits--count-7 > article:where(:nth-last-child(-n+3)) { grid-column: span 4; }
.vp-overview__image { border-radius: 18px; min-height: 400px; }
.vp-overview__image img { object-position: 50% 50%; }
.vp-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; align-content: center; padding-block: .5rem; }
.vp-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--dv-dark); background: var(--vp-tint); border-radius: 10px; margin-bottom: .9rem; }
.vp-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.vg-product .vp-benefits h3, .vg-product .vp-details h3 { font-size: 1.125rem; line-height: 1.3; margin-bottom: .65rem; }
.vp-benefits p, .vp-details p { font-size: .9375rem; line-height: 1.65; }
.vp-details { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; border-top: 1px solid var(--hair-2); margin-top: 2.5rem; padding-top: 2rem; }
.vp-details:empty { display: none; }
.vp-details:where(:has(> article:first-child:last-child)) { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.vp-details:where(:has(> article:nth-child(2):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-details:where(:has(> article:nth-child(3):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-details .vp-icon { background: transparent; width: auto; height: 26px; justify-content: flex-start; margin-bottom: .75rem; }
.vp-applications { margin-top: clamp(3rem, 5vw, 4.5rem); }
.vp-applications .vp-details { border-top: 0; margin-top: 0; padding-top: 0; }
.vp-how { border: 1px solid var(--hair); border-radius: 22px; background: #fff; padding: clamp(1.5rem, 4vw, 3rem); }
.vp-how__body { max-width: 960px; margin-inline: auto; }
.vp-how__body--media { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 3rem); max-width: none; align-items: start; }
.vp-how__body--media > * { min-width: 0; }
.vp-how__image { aspect-ratio: 4/3; border-radius: 14px; }
.vp-how__content .prose { font-size: .9375rem; line-height: 1.7; }
.vp-how__content .prose > :first-child { margin-top: 0; }
.vp-how__body--media .vp-steps--list { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: 1.5rem; }
.vp-steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; }
.vp-steps--count-1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
.vp-steps--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
.vp-steps--count-3, .vp-steps--count-5, .vp-steps--count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-steps > li { min-width: 0; }
.vp-steps > li > span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1.25rem; background: var(--vp-tint); color: var(--dv-dark); border-radius: 50%; font: 500 1.1rem/1 var(--font-head); }
.vp-steps--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-steps--list > li { display: block; position: relative; padding-left: 1.2rem; }
.vp-steps--list > li::before { content: ""; position: absolute; top: .7rem; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--dv-dark); }
.vp-steps--list > li:has(> span) { display: flex; gap: 1rem; padding-left: 0; align-items: flex-start; }
.vp-steps--list > li:has(> span)::before { display: none; }
.vp-steps--list > li > span { flex: none; width: 30px; height: 30px; margin: 0; font-size: .875rem; }
.vp-steps--list > li > span svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.vp-steps--list > li > p { margin: .15rem 0 0; }
.vg-product .vp-steps h3 { font-size: 1.15rem; line-height: 1.3; margin-bottom: .65rem; }
.vp-steps p { font-size: .9375rem; line-height: 1.65; }
.vg-product .vp-how__platform { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); font-size: .875rem; text-align: center; }
.vp-how__platform a { color: var(--dv-dark); font-weight: 600; }
.vp-models { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
.vp-models--count-1 { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
.vp-models--count-2, .vp-models:where(:has(> .vp-model:nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-models--count-2 { max-width: 1000px; margin-inline: auto; }
.vp-model { border: 1px solid var(--hair); border-radius: 18px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.vp-models--count-1 .vp-model:has(> figure) { display: grid; grid-template-columns: 1fr 1fr; }
.vp-models--count-1 .vp-model figure { aspect-ratio: auto; margin: .5rem; }
.vp-model--text, .vp-model:not(:has(> figure)) { border-top: 4px solid var(--vp-tint-border); }
.vp-model figure { aspect-ratio: 3/2; margin: .5rem .5rem 0; border-radius: 12px; }
.vp-model__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.vg-product .vp-model h3 { font-size: 1.35rem; margin-bottom: .85rem; }
.vp-model p, .vp-model .vg-ticks { font-size: .9375rem; line-height: 1.65; }
.vp-model .vg-ticks { margin-block: 1rem 1.5rem; }
.vp-model .vg-link { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hair); justify-content: space-between; }
.vp-retrofit { margin-top: 2rem; padding: 2rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; background: var(--vp-tint); border-radius: 18px; }
#integration .vp-retrofit { margin-top: 0; }
.vp-retrofit > div:only-child { grid-column: 1 / -1; max-width: 850px; margin-inline: auto; }
.vp-retrofit--media { align-items: center; }
.vp-retrofit--media figure { min-height: 280px; aspect-ratio: 4/3; border-radius: 12px; }
.vp-retrofit--media > .vg-ticks { grid-column: 1 / -1; columns: 2; column-gap: 3rem; }
.vp-retrofit--media > .vg-ticks li { break-inside: avoid; }
.vg-product .vp-retrofit :is(h2, h3) { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; margin: 1rem 0; max-width: 28ch; }
.vp-retrofit p, .vp-retrofit .vg-ticks { font-size: .9375rem; line-height: 1.65; }
.vp-retrofit .prose { margin-block: .8rem 1rem; }
.vp-retrofit .vg-ticks { align-self: center; margin: 0; }
.vp-retrofit--media .vg-ticks { margin-top: 1.25rem; }
.vp-integration__actions { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.vp-integration__actions:empty { display: none; }
.vp-specifications { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; align-items: start; }
.vp-specifications--wide { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.vp-specifications--wide .vp-specifications__intro { max-width: 760px; }
.vp-specifications--wide .vp-specifications__intro h2 { max-width: none; }
.vg-product .vp-specifications h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 1rem 0; max-width: 18ch; }
.vp-specifications__intro > p:not(.vg-label) { font-size: .9375rem; line-height: 1.7; margin-bottom: 1.2rem; }
.vp-specifications .vp-note { color: var(--t2); }
.vp-specifications .vg-tblwrap { background: #fff; max-width: 100%; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--dv-dark) var(--vp-tint); }
.vp-specifications .vg-tbl { min-width: 0; }
.vp-specifications--wide .vg-tbl { min-width: max(40rem, calc(var(--vp-table-columns, 4) * 10rem)); }
.vp-specifications .vg-tbl th, .vp-specifications .vg-tbl td { padding: .9rem 1.15rem; font-size: .875rem; }
.vp-specifications .vg-tbl tbody th { color: var(--t0); font-weight: 500; text-align: left; width: 34%; }
.vp-specifications .vg-tbl th, .vp-specifications .vg-tbl td { vertical-align: top; overflow-wrap: break-word; }
.vp-specifications .vg-tbl tbody tr:last-child th { border-bottom: 0; }
.vp-specifications--wide .vg-tbl tbody th { width: auto; min-width: 11rem; }
.vp-specifications .vg-tbl tbody tr:hover { background: var(--vp-tint); }
.vp-specifications .vg-tblwrap:focus-visible { outline: 3px solid var(--dv-dark); outline-offset: 4px; }
.vp-documents { padding: 1.25rem 0 0; }
.vg-product .vp-documents h3 { font-size: .9375rem; margin-bottom: .65rem; }
.vp-documents ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.vp-documents a { color: var(--dv-dark); font-size: .8125rem; }
.vp-documents--standalone { padding: 1.5rem 1.75rem; max-width: 900px; margin-inline: auto; border: 1px solid var(--hair); border-radius: 16px; background: #fff; }
.vg-product .vp-documents--standalone h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.vp-planning { margin-top: 4rem; }
.vp-planning--standalone { margin-top: 0; }
.vp-planning__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
.vp-planning__grid--count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-planning__grid--count-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vp-planning__grid--count-5 > article { grid-column: span 2; }
.vp-planning__grid--count-5 > article:nth-last-child(-n+2) { grid-column: span 3; }
.vp-planning__grid article { padding: 1.5rem 0 0; border-top: 1px solid var(--hair-2); }
.vp-planning__grid article > span { color: var(--dv-dark); font-size: .8125rem; font-weight: 600; display: block; margin-bottom: .8rem; }
.vg-product .vp-planning__grid h3 { font-size: 1.125rem; margin-bottom: .8rem; }
.vp-planning__grid p { font-size: .9375rem; line-height: 1.7; }
.vg-product .vp-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.vg-product .vp-gallery:where(:has(> figure:first-child:last-child)) { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; }
.vg-product .vp-gallery:where(:has(> figure:nth-child(2):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
.vg-product .vp-gallery:where(:has(> figure:nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-product .vp-gallery .vg-frame { grid-column: auto; aspect-ratio: 3/2; min-height: 0; }
.vg-product .vp-questions > .vg-shell { max-width: 860px; }
.vp-questions .vg-faq { max-width: none; margin-inline: auto; }
.vp-questions .vg-faq details { background: #fff; border: 1px solid var(--hair-2); border-radius: 12px; margin-bottom: .65rem; overflow: hidden; }
.vp-questions .vg-faq summary { padding: 1.2rem 3.1rem 1.2rem 1.4rem; font-size: 1rem; line-height: 1.5; }
.vp-questions .vg-faq summary::after { right: 1.25rem; }
.vp-questions .vg-faq details[open] { border-color: var(--vp-tint-border); background: var(--vp-tint-light); }
.vp-questions .vg-faq__a { padding: 0 1.4rem 1.3rem; font-size: .9375rem; line-height: 1.7; }
.vp-questions__contact { display: flex; gap: .7rem 1.5rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1.75rem; font-size: .9375rem; }
.vp-related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
.vp-related--count-1 { grid-template-columns: minmax(0, 1fr); max-width: 500px; margin-inline: auto; }
.vp-related--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
.vp-related__card { color: inherit; background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: .5rem; transition: box-shadow .2s, border-color .2s; }
.vp-related__card:hover { text-decoration: none; box-shadow: var(--shadow-2); border-color: var(--vp-tint-border); }
.vp-related__card:focus-visible { outline: 3px solid var(--dv-dark); outline-offset: 4px; }
.vp-related__card--text, .vp-related__card:not(:has(> figure)) { border-top: 4px solid var(--vp-tint-border); }
.vp-related__card figure { aspect-ratio: 3/2; border-radius: 10px; }
.vp-related__card > div { padding: 1.25rem .75rem .75rem; }
.vp-related__card > div > span { font-size: .75rem; color: var(--t2); }
.vg-product .vp-related__card h3 { font-size: 1.3rem; margin: .45rem 0 1rem; }
.vp-related__card p { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 600; color: var(--dv-dark); }
.vp-contact { text-align: center; background: radial-gradient(ellipse at 50% 0, #fff6d2, transparent 70%), #fff; border: 1px solid #ebe4cc; border-radius: 24px; padding: clamp(2rem, 5vw, 4rem) 1.5rem; }
.vp-contact__symbol { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gold); border-radius: 14px; margin: 0 auto 1.5rem; }
.vp-contact__symbol svg { width: 25px; height: 25px; fill: none; stroke: var(--t0); stroke-width: 1.6; }
.vg-product .vp-contact h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 22ch; margin: 1rem auto; text-wrap: balance; }
.vp-contact .lede { margin-inline: auto; max-width: 62ch; }
.vp-contact .vg-btns { justify-content: center; margin-top: 1.8rem; }
@media (max-width: 1050px) {
  .vp-overview { gap: 2rem; grid-template-columns: .8fr 1.2fr; }
  .vp-benefits { gap: 1.5rem; }
  .vp-details { gap: 1.5rem; }
  .vg-product .vp-subnav__contact { display: none; }
  .vp-specifications { gap: 2rem; }
  .vp-stats--count-5, .vp-stats--count-6 { --vp-stat-columns: 3; }
  :is(.vp-stats--count-5, .vp-stats--count-6) > div:nth-child(4) { border-left: 0; }
  :is(.vp-stats--count-5, .vp-stats--count-6) > div:nth-child(n+4) { border-top: 1px solid var(--hair); }
  .vp-stats--count-5 > div:last-child { grid-column: span 2; }
}
@media (max-width: 940px) {
  .vp-hero__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .vp-hero__grid--text { grid-template-columns: minmax(0, 1fr); }
  .vp-hero__visual { padding: .4rem; }
  .vp-hero__image { aspect-ratio: 4/5; }
  .vp-hero__caption { font-size: .6875rem; }
  .vp-overview { grid-template-columns: 1fr; }
  .vp-overview--text .vp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-overview--text .vp-benefits > article { grid-column: auto; }
  .vp-overview--text :is(.vp-benefits--count-5, .vp-benefits--count-7) > article:where(:last-child) { grid-column: 1 / -1; }
  .vp-overview__image { min-height: 0; aspect-ratio: 16/7; }
  .vp-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vp-details:where(:has(> article:first-child:last-child)) { grid-template-columns: minmax(0, 1fr); }
  .vp-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vp-steps--count-1 { grid-template-columns: minmax(0, 1fr); }
  .vp-how__body--media { grid-template-columns: minmax(0, 1fr); }
  .vp-how__image { aspect-ratio: 16/9; }
  .vp-how__body--media .vp-steps--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-models { grid-template-columns: 1fr; }
  .vp-model { display: grid; grid-template-columns: .8fr 1.2fr; }
  .vp-model--text, .vp-model:not(:has(> figure)) { display: flex; }
  .vp-model figure { margin: .5rem; aspect-ratio: auto; }
  .vp-model__body { padding: 1.5rem; }
  .vp-retrofit { gap: 2rem; }
  .vp-retrofit--media { grid-template-columns: minmax(0, 1fr); }
  .vp-retrofit--media figure { min-height: 0; aspect-ratio: 16/9; }
  .vp-specifications { grid-template-columns: 1fr; }
  .vp-specifications__intro { max-width: 680px; }
  .vp-planning__grid { gap: 1.5rem; }
  .vp-planning__grid--count-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-planning__grid--count-5 > article, .vp-planning__grid--count-5 > article:nth-last-child(-n+2) { grid-column: auto; }
  .vp-planning__grid--count-5 > article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vg-product { --vp-space: 3.5rem; }
  .vg-product .vp-hero { padding-top: .5rem; }
  .vp-hero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .vg-product .vp-hero h1 { margin-top: 1.2rem; font-size: clamp(2.25rem, 10.5vw, 2.75rem); }
  .vp-hero__image { aspect-ratio: 4/3; }
  .vp-hero__caption { font-size: .75rem; }
  .vp-stats { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 1.5rem; }
  .vp-stats--count-1 { grid-template-columns: minmax(0, 1fr); }
  .vp-stats > div { padding: 1rem; }
  .vp-stats > div:nth-child(odd) { border-left: 0; }
  .vp-stats > div:nth-child(even) { border-left: 1px solid var(--hair); }
  .vp-stats > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  :is(.vp-stats--count-5, .vp-stats--count-6) > div:nth-child(4) { border-left: 1px solid var(--hair); }
  :is(.vp-stats--count-3, .vp-stats--count-5) > div:last-child { grid-column: span 2; }
  .vp-heading { margin-bottom: 1.75rem; }
  .vp-heading .vg-label { font-size: .6875rem; }
  .vp-overview__image { aspect-ratio: 16/10; }
  .vp-benefits, .vp-overview--text .vp-benefits { grid-template-columns: 1fr; gap: 1.4rem; }
  .vp-overview--text :is(.vp-benefits--count-5, .vp-benefits--count-7) > article:where(:last-child) { grid-column: auto; }
  .vp-benefits article { padding-left: 3.25rem; position: relative; }
  .vp-benefits .vp-icon { position: absolute; top: 0; left: 0; }
  .vp-details { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .vp-details article { padding-left: 3.25rem; position: relative; }
  .vp-details .vp-icon { position: absolute; top: 0; left: 0; width: 38px; height: 38px; justify-content: center; }
  .vp-details p { font-size: .9375rem; }
  .vg-product .vp-details h3 { font-size: 1.125rem; }
  .vp-steps { grid-template-columns: 1fr; margin-top: 1.75rem; gap: 1.5rem; }
  .vp-steps > li { padding-left: 3.6rem; position: relative; }
  .vp-steps > li > span { position: absolute; top: 0; left: 0; width: 40px; height: 40px; font-size: .9375rem; }
  .vp-how__body--media .vp-steps--list { grid-template-columns: minmax(0, 1fr); }
  .vp-steps--list > li { padding-left: 1.2rem; }
  .vp-steps--list > li > span { position: static; width: 30px; height: 30px; }
  .vp-model { display: flex; }
  .vp-models--count-1 .vp-model:has(> figure) { display: flex; }
  .vp-model figure { aspect-ratio: 3/2; margin: .5rem .5rem 0; }
  .vp-models--count-1 .vp-model figure { aspect-ratio: 3/2; margin: .5rem .5rem 0; }
  .vp-retrofit { grid-template-columns: 1fr; padding: 1.5rem; gap: 1rem; }
  .vp-retrofit--media > .vg-ticks { columns: 1; }
  .vp-specifications .vg-tbl th, .vp-specifications .vg-tbl td { padding: .85rem; font-size: .8125rem; }
  .vp-specifications .vg-tbl { min-width: 0; }
  .vp-specifications--wide .vg-tbl { min-width: max(40rem, calc(var(--vp-table-columns, 4) * 10rem)); }
  .vp-planning__grid { grid-template-columns: 1fr; }
  .vp-planning__grid--count-5 > article, .vp-planning__grid--count-5 > article:nth-last-child(-n+2), .vp-planning__grid--count-5 > article:last-child { grid-column: auto; }
  .vp-planning { margin-top: 3rem; }
  .vp-planning--standalone { margin-top: 0; }
  .vg-product .vp-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
  .vg-product .vp-gallery:where(:has(> figure:first-child:last-child)) { grid-template-columns: minmax(0, 1fr); }
  .vg-product .vp-gallery .vg-frame { aspect-ratio: 4/3; }
  .vp-questions .vg-faq summary { padding-left: 1rem; padding-block: 1rem; font-size: .9375rem; }
  .vp-questions .vg-faq__a { padding-inline: 1rem; }
  .vp-related { grid-template-columns: 1fr; }
  .vp-related__card { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: .5rem; }
  .vp-related__card--text, .vp-related__card:not(:has(> figure)) { display: block; }
  .vp-related__card figure { height: 100%; aspect-ratio: 4/5; }
  .vg-product .vp-related__card h3 { font-size: 1.15rem; }
  .vp-related__card > div { padding: .75rem; }
  .vp-contact .vg-btns { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-related__card { transition: none; }
}