:root {
  --blue: #004b87;
  --blue-dark: #062f52;
  --red: #cf163f;
  --ink: #142536;
  --muted: #5e6e7d;
  --line: #d8e0e6;
  --soft: #f2f5f7;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }

.serviceBar { background: #152230; color: #d8e0e7; font-size: 14px; }
.serviceBarInner { height: 34px; display: flex; align-items: center; justify-content: space-between; }
.serviceBarInner div { display: flex; gap: 24px; }
.serviceBar a { color: white; font-weight: 700; }
.mainHeader { position: relative; z-index: 30; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 5px 22px rgba(14,39,63,.06); }
.mainHeaderInner { height: 82px; display: flex; align-items: center; gap: 38px; }
.officialLogo { width: 190px; display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; }
.officialLogo img { width: 118px; height: 38px; object-fit: contain; object-position: left center; }
.officialLogo span { margin-top: -2px; padding-left: 2px; color: #647181; font-size: 14px; font-weight: 700; letter-spacing: .2em; }
.primaryNav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 14px; font-weight: 700; }
.primaryNav a { padding: 12px 0; border-bottom: 2px solid transparent; }
.primaryNav a:hover { color: var(--blue); border-bottom-color: var(--red); }
.inquiryButton, .primaryButton { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 0 19px; color: white; background: var(--blue); font-size: 14px; font-weight: 800; }
.inquiryButton:hover, .primaryButton:hover { background: var(--blue-dark); }
.categoryNav { background: var(--blue); color: white; }
.categoryNavInner { height: 46px; display: flex; align-items: center; gap: 34px; overflow-x: auto; white-space: nowrap; font-size: 14px; }
.categoryNavInner > span { color: #a9d1f3; font-weight: 700; }
.categoryNav a { font-weight: 700; }
.categoryNav a:hover { text-decoration: underline; }

.homeLead { position: relative; padding: 24px 0; overflow: hidden; background: linear-gradient(135deg, #eef2f5 0%, #f8fafb 62%, #e7edf2 100%); }
.homeLead:before { content: ""; position: absolute; inset: 0; opacity: .46; pointer-events: none; background-image: linear-gradient(rgba(4,74,145,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(4,74,145,.055) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, #000, transparent 85%); }
.homeLeadGrid { position: relative; }
.homeLeadGrid { display: grid; grid-template-columns: 255px 1fr; gap: 18px; }
.homeCategories { position: relative; z-index: 2; background: white; border: 1px solid #ccd7e1; box-shadow: 0 15px 40px rgba(20,47,73,.08); }
.homeCategories h2 { margin: 0; padding: 17px 17px; color: white; background: linear-gradient(120deg, #173d63, #0c568e); border-left: 4px solid var(--red); font-size: 14px; }
.homeCategories a { min-height: 79px; display: grid; grid-template-columns: 28px 1fr 13px; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--line); transition: background .2s ease, color .2s ease; }
.homeCategories a:last-child { border-bottom: 0; }
.homeCategories a:hover { color: var(--blue); background: #f4f8fb; }
.homeCategories a i { width: 26px; height: 26px; display: grid; place-items: center; color: var(--blue); background: #eaf3fa; border-radius: 50%; font-size: 14px; font-style: normal; font-weight: 900; }
.homeCategories a span { display: flex; flex-direction: column; gap: 5px; }
.homeCategories b { font-size: 14px; }
.homeCategories small { color: var(--muted); font-size: 14px; }
.homeCategories em { color: #9aa8b5; font-size: 14px; font-style: normal; }
.storeHero { min-height: 420px; display: grid; grid-template-columns: 1fr .78fr; overflow: hidden; position: relative; background: linear-gradient(113deg, #052c51 0%, #004c91 59%, #0063ac 100%); color: white; box-shadow: 0 18px 44px rgba(8,43,74,.16); }
.storeHero:before { content: ""; position: absolute; width: 220px; height: 520px; top: -60px; left: 59%; opacity: .18; background: var(--red); transform: skewX(-17deg); }
.storeHero:after { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent 38%, #000); }
.storeHeroCopy { padding: 51px 18px 46px 48px; position: relative; z-index: 3; }
.storeHeroCopy > span, .vtiHomeCopy > span { color: #a7d5f5; font-size: 14px; font-weight: 800; letter-spacing: .14em; }
.heroEyebrow { display: inline-flex; align-items: center; gap: 9px; }
.heroEyebrow b { padding: 6px 8px; color: white; background: var(--red); font-size: 14px; }
.storeHero h1 { max-width: 600px; margin: 15px 0 17px; font-size: clamp(36px, 4.3vw, 57px); line-height: 1.02; letter-spacing: -.035em; }
.storeHero p { max-width: 590px; margin: 0; color: #d6e7f4; font-size: 15px; line-height: 1.65; }
.storeHeroCopy > div:last-child { display: flex; gap: 10px; margin-top: 28px; }
.storeHeroCopy .heroSpecs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.heroSpecs span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.24); color: #ddecf7; background: rgba(0,0,0,.09); font-size: 14px; font-weight: 800; }
.storeHero .primaryButton { background: var(--red); }
.secondaryButton { min-height: 43px; display: inline-flex; align-items: center; padding: 0 19px; border: 1px solid rgba(255,255,255,.48); font-size: 14px; font-weight: 800; }
.storeHeroImage { display: grid; place-items: center; padding: 22px 28px 22px 0; position: relative; z-index: 2; background: radial-gradient(circle at center, rgba(111,198,255,.43), transparent 61%); }
.storeHeroImage img { width: 390px; position: relative; z-index: 2; filter: drop-shadow(0 28px 25px rgba(0,0,0,.3)); }
.heroModel { position: absolute; right: 12px; bottom: -25px; z-index: 0; color: rgba(255,255,255,.07); font-size: 190px; font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.heroImageNote { position: absolute; right: 18px; bottom: 18px; z-index: 4; display: flex; flex-direction: column; padding: 10px 13px; border-left: 3px solid var(--red); background: rgba(4,34,61,.78); backdrop-filter: blur(5px); }
.heroImageNote b { font-size: 14px; }
.heroImageNote span { margin-top: 2px; color: #a9d1f3; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }

.serviceBenefits { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.benefitGrid { display: grid; grid-template-columns: repeat(4,1fr); }
.benefitGrid > div, .benefitGrid > a { min-height: 82px; display: flex; align-items: center; gap: 13px; padding: 0 20px; border-right: 1px solid var(--line); }
.benefitGrid > div:first-child, .benefitGrid > a:first-child { border-left: 1px solid var(--line); }
.benefitGrid i { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--blue); border-radius: 50%; font-size: 14px; font-style: normal; font-weight: 900; }
.benefitGrid span { display: flex; flex-direction: column; }
.benefitGrid strong { font-size: 14px; }
.benefitGrid small { color: var(--muted); margin-top: 4px; font-size: 14px; }

.shopDepartments { padding: 69px 0 23px; }
.departmentGrid { display: grid; grid-template-columns: 1.1fr .9fr .9fr 1.1fr; gap: 14px; }
.departmentCard { min-height: 285px; display: flex; flex-direction: column; overflow: hidden; position: relative; padding: 25px; background: linear-gradient(145deg, #f5f7f9, #e8edf2); border: 1px solid #d6dde4; transition: transform .22s ease, box-shadow .22s ease; }
.departmentCard:before { content: ""; position: absolute; width: 95px; height: 360px; top: -45px; right: -65px; opacity: .12; background: var(--blue); transform: rotate(18deg); }
.departmentCard:hover { transform: translateY(-4px); box-shadow: 0 17px 32px rgba(18,47,74,.12); }
.departmentCard > div { position: relative; z-index: 2; }
.departmentCard small { color: var(--blue); font-size: 14px; font-weight: 900; letter-spacing: .13em; }
.departmentCard h3 { max-width: 190px; margin: 8px 0 7px; font-size: 20px; letter-spacing: -.02em; }
.departmentCard p { max-width: 190px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.departmentCard b { position: absolute; top: 218px; left: 0; font-size: 14px; }
.departmentCard img { width: 72%; height: 140px; margin-top: auto; margin-left: auto; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 13px 11px rgba(21,44,67,.14)); }
.departmentBlue { color: white; background: linear-gradient(140deg, #073866, #0062a8); border-color: #07508a; }
.departmentBlue small, .departmentBlue b { color: #b9dcf6; }
.departmentBlue p { color: #d2e5f2; }
.departmentRed { color: white; background: linear-gradient(140deg, #bb2029, #e7353b); border-color: #c62830; }
.departmentRed small, .departmentRed b { color: white; }
.departmentRed p { color: #ffe6e7; }
.departmentRed:before { background: white; }

.catalogSection, .vehicleSection { padding: 66px 0; }
.vehicleSection { background: var(--soft); }
.sectionTitleRow { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 27px; }
.sectionTitleRow > div > span { color: var(--blue); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.sectionTitleRow h2 { margin: 7px 0 0; font-size: 31px; letter-spacing: -.025em; }
.sectionTitleRow > a { color: var(--blue); font-size: 14px; font-weight: 800; }
.catalogGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.catalogCard { display: flex; flex-direction: column; min-width: 0; position: relative; background: white; border: 1px solid var(--line); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.catalogCard:before { content: ""; height: 3px; position: absolute; top: -1px; left: -1px; right: -1px; z-index: 3; background: linear-gradient(90deg, var(--blue) 0 76%, var(--red) 76%); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.catalogCard:hover { transform: translateY(-4px); border-color: #bdcbd7; box-shadow: 0 16px 33px rgba(18,47,74,.1); }
.catalogCard:hover:before { transform: scaleX(1); }
.catalogImage { height: 228px; display: grid; place-items: center; padding: 18px; position: relative; overflow: hidden; background: radial-gradient(circle at 67% 43%, #fff 0 22%, #edf2f6 72%); }
.catalogImage:after { content: ""; position: absolute; width: 98px; height: 260px; right: -80px; top: -34px; opacity: .08; background: var(--blue); transform: rotate(17deg); }
.catalogImage img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.catalogCard:hover .catalogImage img { transform: scale(1.035); }
.cardBadge { position: absolute; top: 11px; left: 11px; z-index: 2; padding: 6px 8px; color: white; background: var(--red); font-size: 14px; font-weight: 800; }
.catalogBody { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.vehicleLabel { color: var(--blue); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.cardMeta { min-height: 25px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.productCode { flex: 0 0 auto; padding-left: 8px; color: #95a0aa; border-left: 1px solid var(--line); font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.catalogBody h3 { margin: 8px 0 9px; font-size: 17px; line-height: 1.28; }
.catalogBody h3 a:hover { color: var(--blue); }
.catalogBody p { color: var(--muted); min-height: 58px; margin: 0; font-size: 14px; line-height: 1.65; }
.catalogBody ul { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 14px 0 20px; padding: 0; }
.catalogBody li { padding: 5px 7px; background: var(--soft); color: #536170; font-size: 14px; }
.catalogBottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
.catalogBottom > span { font-size: 14px; font-weight: 800; }
.catalogBottom a { color: var(--blue); font-size: 14px; font-weight: 800; }
.catalogBottom a:hover { color: var(--red); }

.catalogPromo { color: white; background: #071f36; overflow: hidden; }
.catalogPromoInner { min-height: 210px; display: grid; grid-template-columns: 155px 1.2fr .85fr auto; align-items: center; gap: 35px; position: relative; }
.catalogPromoInner:before { content: ""; position: absolute; width: 190px; height: 320px; left: 70px; top: -55px; background: var(--blue); opacity: .55; transform: skewX(-18deg); }
.promoMark { height: 128px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; padding-left: 18px; border-left: 5px solid var(--red); }
.promoMark span { color: #86bfe9; font-size: 18px; font-weight: 900; letter-spacing: .18em; }
.promoMark b { font-size: 63px; line-height: .88; letter-spacing: -.07em; }
.promoCopy { position: relative; z-index: 2; }
.promoCopy > span { color: #82bee9; font-size: 14px; font-weight: 900; letter-spacing: .14em; }
.promoCopy h2 { margin: 8px 0; font-size: 30px; letter-spacing: -.025em; }
.promoCopy p { max-width: 520px; margin: 0; color: #aebfd0; font-size: 14px; line-height: 1.65; }
.promoFacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.13); }
.promoFacts div { min-height: 80px; display: flex; flex-direction: column; justify-content: center; padding: 13px; background: rgba(255,255,255,.04); }
.promoFacts b { font-size: 14px; }
.promoFacts span { margin-top: 5px; color: #99aec1; font-size: 14px; line-height: 1.35; }
.catalogPromoInner > a { max-width: 190px; padding: 14px 16px; color: var(--blue-dark); background: white; font-size: 14px; font-weight: 900; line-height: 1.4; text-align: center; }
.compactTitle { margin-bottom: 24px; }
.vehicleGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.vehicleTile { min-height: 235px; display: flex; flex-direction: column; padding: 28px; background: white; border: 1px solid var(--line); }
.vehicleTile small { color: var(--red); font-weight: 800; }
.vehicleTile h3 { margin: 44px 0 9px; font-size: 22px; }
.vehicleTile p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.6; }
.vehicleTile > span { color: var(--blue); margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 800; }
.darkTile { color: white; background: #173d63; border-color: #173d63; }
.darkTile p { color: #c2d4e5; }
.darkTile > span { color: white; }

.vtiHome { padding: 74px 0; }
.vtiHomeGrid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 58px; align-items: center; }
.vtiHomeImage { border: 1px solid var(--line); background: var(--soft); padding: 15px; }
.vtiHomeImage img { width: 100%; aspect-ratio: 1.55; object-fit: cover; object-position: top left; }
.vtiHomeCopy > span { color: var(--blue); }
.vtiHomeCopy h2 { margin: 13px 0 18px; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; }
.vtiHomeCopy p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.vtiHomeCopy ul { margin: 22px 0 26px; padding-left: 18px; color: #435260; font-size: 14px; line-height: 1.9; }
.shopContact { padding: 50px 0; color: white; background: var(--blue); }
.shopContactInner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.shopContact span { color: #aed3ef; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.shopContact h2 { margin: 8px 0 0; font-size: 29px; }
.shopContact a { min-width: 225px; padding: 15px 19px; color: var(--blue); background: white; text-align: center; font-size: 14px; font-weight: 800; }

.pageIntro { padding: 42px 0 39px; position: relative; overflow: hidden; color: white; background: linear-gradient(112deg, #0a3157 0%, #064c86 69%, #0962a7 100%); border-bottom: 4px solid var(--red); }
.pageIntro:before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 25%, #000); }
.pageIntro:after { content: ""; position: absolute; width: 160px; height: 350px; right: 12%; top: -95px; opacity: .32; background: var(--red); transform: skewX(-18deg); }
.pageIntro .container { position: relative; z-index: 2; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px; }
.pageIntro .breadcrumbs { color: #a8c9e2; }
.breadcrumbs b { color: var(--ink); }
.pageIntro .breadcrumbs b { color: white; }
.pageIntro h1 { margin: 18px 0 9px; font-size: 42px; letter-spacing: -.035em; }
.pageIntro p { max-width: 760px; margin: 0; color: #d1e1ed; font-size: 14px; line-height: 1.65; }
.shopLayout { display: grid; grid-template-columns: 235px 1fr; gap: 32px; padding-top: 40px; padding-bottom: 70px; }
.shopSidebar { align-self: start; position: sticky; top: 14px; border: 1px solid var(--line); box-shadow: 0 13px 27px rgba(17,43,67,.07); }
.shopSidebar h2 { margin: 0; padding: 16px; color: white; background: linear-gradient(115deg, #173d63, #07578f); border-left: 4px solid var(--red); font-size: 14px; }
.shopSidebar > a { display: flex; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.shopSidebar > a:hover { color: var(--blue); background: #eef5fa; }
.sidebarHelp { padding: 18px 16px; background: var(--soft); }
.sidebarHelp strong { font-size: 14px; }
.sidebarHelp p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.sidebarHelp a { color: var(--blue); font-size: 14px; font-weight: 800; text-decoration: underline; }
.resultsHeader { height: 48px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 0 16px; border: 1px solid var(--line); border-left: 4px solid var(--blue); background: linear-gradient(90deg, #f3f7fa, #fff); font-size: 14px; }
.resultsHeader span { color: var(--muted); }
.shopGrid { grid-template-columns: repeat(3,1fr); }

.categoryNote, .packageGuide { margin-top: 30px; padding: 24px; border: 1px solid var(--line); background: var(--soft); }
.categoryNote h2, .packageGuide h2 { margin: 0 0 8px; font-size: 19px; }
.categoryNote p { max-width: 760px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.packageGuide > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 18px; background: var(--line); border: 1px solid var(--line); }
.packageGuide article { padding: 18px; background: white; }
.packageGuide b { color: var(--blue); font-size: 14px; }
.packageGuide p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.cableTableSection { margin-top: 46px; }
.tableHeading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 20px; }
.tableHeading span { color: var(--blue); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.tableHeading h2 { margin: 7px 0 0; font-size: 24px; }
.tableHeading p { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.responsiveTable { overflow-x: auto; border: 1px solid var(--line); }
.responsiveTable table { width: 100%; min-width: 660px; border-collapse: collapse; }
.responsiveTable th, .responsiveTable td { padding: 13px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; text-align: left; }
.responsiveTable th { color: white; background: #173d63; }
.responsiveTable tbody tr:nth-child(even) { background: var(--soft); }
.responsiveTable a { color: var(--blue); font-weight: 800; text-decoration: underline; }

.licenceGuide { display: grid; grid-template-columns: .72fr 1.28fr; gap: 42px; margin-top: 34px; padding: 34px; color: white; background: linear-gradient(130deg, #092f53, #045998); }
.licenceGuideLead > span { color: #9bccec; font-size: 14px; font-weight: 900; letter-spacing: .14em; }
.licenceGuideLead h2 { margin: 10px 0 12px; font-size: 27px; line-height: 1.08; }
.licenceGuideLead p { margin: 0; color: #c6dbea; font-size: 14px; line-height: 1.65; }
.licenceRows article { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.16); }
.licenceRows article:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.licenceRows article > b { color: #89c6ed; font-size: 14px; }
.licenceRows h3 { margin: 0 0 5px; font-size: 14px; }
.licenceRows p { margin: 0; color: #bcd2e2; font-size: 14px; line-height: 1.55; }
.softwareCta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; padding: 25px 28px; color: white; background: var(--red); }
.softwareCta span { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.softwareCta h2 { margin: 6px 0 0; font-size: 19px; }
.softwareCta a { flex: 0 0 auto; padding: 13px 18px; color: var(--ink); background: white; font-size: 14px; font-weight: 900; }
.sourceNote { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.sourceNote a { color: var(--blue); font-weight: 800; text-decoration: underline; }

.productBreadcrumbs { display: flex; gap: 8px; padding-top: 24px; padding-bottom: 18px; color: var(--muted); font-size: 14px; }
.productBreadcrumbs b { color: var(--ink); }
.productDetail { display: grid; grid-template-columns: 1.04fr .96fr; gap: 50px; padding-bottom: 60px; }
.productGallery { min-width: 0; }
.mainProductImage { height: 510px; display: grid; place-items: center; padding: 35px; border: 1px solid var(--line); background: var(--soft); }
.mainProductImage img { width: 100%; height: 100%; object-fit: contain; }
.thumbRow { display: grid; grid-template-columns: repeat(2,90px); gap: 10px; margin-top: 10px; }
.thumbRow div { height: 75px; padding: 6px; border: 1px solid var(--line); background: white; }
.thumbRow img { width: 100%; height: 100%; object-fit: contain; }
.productSummary { padding-top: 18px; }
.detailBadge { display: inline-block; padding: 7px 9px; color: white; background: var(--blue); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.productSummary h1 { margin: 16px 0 13px; font-size: 45px; letter-spacing: -.04em; }
.detailLead { color: var(--muted); font-size: 14px; line-height: 1.7; }
.detailStatus { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detailStatus span { color: #2e8559; font-size: 14px; font-weight: 800; }
.detailStatus b { font-size: 16px; }
.detailBullets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0 0 25px; padding: 0; list-style: none; }
.detailBullets li { position: relative; padding-left: 15px; color: #465564; font-size: 14px; line-height: 1.55; }
.detailBullets li:before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--red); }
.detailCta { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; color: white; background: var(--red); font-size: 14px; font-weight: 800; }
.detailCta:hover { background: #ca292f; }
.detailHelp { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding: 15px; background: var(--soft); }
.detailHelp b { font-size: 14px; }
.detailHelp span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.detailNav { position: sticky; top: 0; z-index: 20; color: white; background: #173d63; }
.detailNav .container { height: 49px; display: flex; align-items: center; gap: 34px; }
.detailNav a { font-size: 14px; font-weight: 700; }
.detailNav a:hover { text-decoration: underline; }
.detailSection { padding: 67px 0; }
.graySection { background: var(--soft); }
.subLabel { color: var(--blue); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.detailTwoCol { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.detailTwoCol h2, .detailHeading h2, .packageDetailGrid h2, .vtiDefinition h2, .vtiScreenCopy h2, .vtiHeavyGrid h2, .faqSimpleGrid h2 { margin: 10px 0 0; font-size: 34px; line-height: 1.12; letter-spacing: -.03em; }
.detailTwoCol p { margin: 0 0 15px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.detailHeading { max-width: 640px; margin-bottom: 27px; }
.plainFeatureGrid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.plainFeatureGrid article { min-height: 145px; padding: 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.plainFeatureGrid b { color: var(--blue); font-size: 14px; }
.plainFeatureGrid p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.packageDetailGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.packagePhoto { padding: 15px; border: 1px solid var(--line); background: var(--soft); }
.packagePhoto img { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.packageRows { margin: 24px 0; border-top: 1px solid var(--line); }
.packageRows div { display: flex; flex-direction: column; gap: 5px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.packageRows b { font-size: 14px; }
.packageRows span { color: var(--muted); font-size: 14px; }
.specGrid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); background: white; }
.specGrid div { min-height: 95px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px; border-right: 1px solid var(--line); }
.specGrid div:last-child { border-right: 0; }
.specGrid span { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.specGrid b { font-size: 14px; }
.relatedGrid { grid-template-columns: repeat(3,1fr); }

.vtiHero { padding: 24px 0 55px; color: white; background: #173d63; }
.vtiBreadcrumbs { color: #b8cee1; padding: 0 0 28px; }
.vtiBreadcrumbs b { color: white; }
.vtiHeroGrid { display: grid; grid-template-columns: 1fr .9fr; gap: 55px; align-items: center; }
.vtiHeroCopy > span { color: #8ec8f3; font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.vtiHeroCopy h1 { margin: 14px 0 18px; font-size: 47px; line-height: 1.05; letter-spacing: -.04em; }
.vtiHeroCopy > p { color: #d4e3ef; font-size: 14px; line-height: 1.7; }
.vtiHeroCopy > div { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.redButton { background: var(--red); }
.vtiTextLink { font-size: 14px; font-weight: 800; }
.vtiHeroImage { padding: 13px; background: rgba(255,255,255,.1); }
.vtiHeroImage img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.vtiDefinition, .vtiFeaturesSection, .vtiScreenSection, .vtiPackages, .vtiHeavySection, .vtiFaq { padding: 68px 0; }
.definitionGrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 85px; }
.definitionGrid p { margin: 0 0 15px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.definitionGrid p b { color: var(--ink); }
.definitionNote { display: grid; grid-template-columns: 60px 1fr; gap: 14px; margin-top: 23px; padding: 17px; border-left: 4px solid var(--red); background: var(--soft); }
.definitionNote b { color: var(--blue); font-size: 14px; }
.definitionNote span { color: #526170; font-size: 14px; line-height: 1.55; }
.vtiFeaturesSection, .vtiPackages, .vtiFaq { background: var(--soft); }
.vtiFeatureGrid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.vtiFeatureGrid article { min-height: 195px; padding: 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.vtiFeatureGrid small { color: var(--red); font-size: 14px; font-weight: 800; }
.vtiFeatureGrid h3 { margin: 41px 0 9px; font-size: 15px; }
.vtiFeatureGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.vtiScreenGrid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 55px; align-items: center; }
.vtiScreenCopy p, .vtiHeavyGrid p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.vtiScreenCopy ul { padding-left: 17px; color: #455463; font-size: 14px; line-height: 1.9; }
.vtiScreenImage { border: 1px solid var(--line); }
.vtiScreenImage img { width: 100%; aspect-ratio: 1.55; object-fit: cover; object-position: top left; }
.vtiScreenImage span { display: block; padding: 10px 13px; color: var(--muted); font-size: 14px; }
.headingAside { max-width: 390px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.packageGroupTitle { margin: 5px 0 14px; font-size: 15px; }
.hdTitle { margin-top: 35px; }
.vtiPackageGrid { display: grid; gap: 15px; }
.carPackages { grid-template-columns: repeat(2,1fr); }
.hdPackages { grid-template-columns: repeat(3,1fr); }
.vtiPackageGrid article { padding: 25px; border: 1px solid var(--line); background: white; }
.vtiPackageGrid article > span { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .11em; }
.vtiPackageGrid h4 { margin: 9px 0 12px; font-size: 24px; }
.vtiPackageGrid p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.vtiPackageGrid ul { min-height: 115px; margin: 17px 0; padding-left: 17px; color: #4b5a68; font-size: 14px; line-height: 1.9; }
.vtiPackageGrid small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.recommendedPackage { border-top: 4px solid var(--red) !important; }
.vtiHeavyGrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 55px; align-items: center; }
.vtiHeavyImage { padding: 13px; border: 1px solid var(--line); background: var(--soft); }
.vtiHeavyImage img { width: 100%; aspect-ratio: 1.45; object-fit: cover; object-position: top left; }
.vtiHeavyGrid .primaryButton { margin-top: 10px; }
.faqSimpleGrid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
.faqSimpleGrid details { border-top: 1px solid var(--line); }
.faqSimpleGrid details:last-child { border-bottom: 1px solid var(--line); }
.faqSimpleGrid summary { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; }
.faqSimpleGrid summary::-webkit-details-marker { display: none; }
.faqSimpleGrid summary span { color: var(--red); font-size: 18px; }
.faqSimpleGrid details[open] summary span { transform: rotate(45deg); }
.faqSimpleGrid details p { margin: -4px 0 0; padding: 0 35px 20px 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.siteFooter { padding: 56px 0 22px; color: #dbe5ee; background: #101d2a; }
.footerGrid { display: grid; grid-template-columns: 1.3fr .7fr .7fr; gap: 70px; padding-bottom: 40px; }
.footerLogo img { filter: brightness(0) invert(1); }
.footerLogo span { color: #9db0c2; }
.footerGrid p { max-width: 340px; color: #9db0c2; font-size: 14px; line-height: 1.7; }
.footerGrid h3 { margin: 0 0 15px; color: white; font-size: 14px; }
.footerGrid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.footerGrid a:hover { color: #79bdef; }
.footerGrid span { color: #9db0c2; }
.footerLegal { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.11); color: #71869a; font-size: 14px; }

@media (max-width: 1020px) {
  .primaryNav { gap: 16px; }
  .primaryNav a:nth-last-child(-n+2) { display: none; }
  .homeLeadGrid { grid-template-columns: 220px 1fr; }
  .storeHeroCopy { padding-left: 34px; }
  .departmentGrid { grid-template-columns: 1fr 1fr; }
  .catalogGrid { grid-template-columns: repeat(2,1fr); }
  .shopGrid { grid-template-columns: repeat(2,1fr); }
  .catalogPromoInner { grid-template-columns: 120px 1fr .85fr; }
  .catalogPromoInner > a { grid-column: 2 / -1; margin-top: -25px; margin-bottom: 25px; }
  .productDetail { gap: 30px; }
  .mainProductImage { height: 430px; }
  .vtiFeatureGrid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1220px); }
  .serviceBarInner > span, .serviceBarInner div > span { display: none; }
  .serviceBarInner { justify-content: center; }
  .mainHeaderInner { height: 72px; gap: 12px; }
  .officialLogo { width: auto; flex: 1; }
  .officialLogo img { width: 95px; height: 31px; }
  .officialLogo span { font-size: 14px; }
  .primaryNav { display: none; }
  .inquiryButton { padding: 0 13px; }
  .categoryNavInner { gap: 22px; }
  .categoryNavInner > span { display: none; }
  .homeLead { padding-top: 14px; }
  .homeLeadGrid { grid-template-columns: 1fr; }
  .homeCategories { display: grid; grid-template-columns: 1fr 1fr; }
  .homeCategories h2 { grid-column: 1 / -1; }
  .homeCategories a { padding: 12px; }
  .storeHero { grid-template-columns: 1fr; }
  .storeHeroCopy { padding: 40px 28px 20px; }
  .storeHero h1 { font-size: 39px; }
  .storeHeroImage { min-height: 250px; padding: 0 15px 15px; }
  .storeHeroImage img { width: 300px; }
  .benefitGrid { grid-template-columns: 1fr 1fr; }
  .benefitGrid > div, .benefitGrid > a { border-bottom: 1px solid var(--line); }
  .shopDepartments { padding-top: 48px; }
  .departmentGrid { grid-template-columns: 1fr 1fr; }
  .catalogSection, .vehicleSection { padding: 48px 0; }
  .sectionTitleRow { align-items: flex-start; flex-direction: column; }
  .catalogGrid, .shopGrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .catalogImage { height: 180px; }
  .catalogBody { padding: 14px; }
  .catalogBody p { min-height: 0; }
  .vehicleGrid { grid-template-columns: 1fr; }
  .vehicleTile { min-height: 205px; }
  .vtiHomeGrid { grid-template-columns: 1fr; }
  .vtiHomeCopy h2 { font-size: 32px; }
  .shopContactInner { align-items: flex-start; flex-direction: column; }
  .shopContact a { width: 100%; }
  .shopLayout { grid-template-columns: 1fr; gap: 24px; }
  .shopSidebar { display: grid; grid-template-columns: 1fr 1fr; position: static; }
  .shopSidebar h2, .sidebarHelp { grid-column: 1 / -1; }
  .licenceGuide { grid-template-columns: 1fr; gap: 24px; }
  .softwareCta { align-items: flex-start; flex-direction: column; }
  .catalogPromoInner { grid-template-columns: 100px 1fr; padding-top: 25px; }
  .promoFacts { grid-column: 1 / -1; }
  .catalogPromoInner > a { grid-column: 1 / -1; margin: 0 0 25px; max-width: none; }
  .packageGuide > div { grid-template-columns: 1fr; }
  .tableHeading { align-items: flex-start; flex-direction: column; }
  .productDetail { grid-template-columns: 1fr; }
  .mainProductImage { height: 390px; }
  .productSummary { padding-top: 0; }
  .detailBullets { grid-template-columns: 1fr; }
  .detailNav .container { gap: 22px; overflow-x: auto; white-space: nowrap; }
  .detailTwoCol, .packageDetailGrid, .definitionGrid, .vtiScreenGrid, .vtiHeavyGrid, .faqSimpleGrid { grid-template-columns: 1fr; gap: 35px; }
  .plainFeatureGrid { grid-template-columns: 1fr 1fr; }
  .specGrid { grid-template-columns: 1fr 1fr; }
  .specGrid div { border-bottom: 1px solid var(--line); }
  .relatedGrid { grid-template-columns: 1fr 1fr; }
  .vtiHeroGrid { grid-template-columns: 1fr; }
  .vtiHeroCopy h1 { font-size: 39px; }
  .vtiHeroImage img { max-height: 380px; object-position: top; }
  .vtiFeatureGrid { grid-template-columns: 1fr 1fr; }
  .hdPackages { grid-template-columns: 1fr; }
  .faqSimpleGrid { gap: 25px; }
  .footerGrid { grid-template-columns: 1fr; gap: 30px; }
  .footerLegal { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .catalogGrid, .shopGrid { grid-template-columns: 1fr; }
  .catalogImage { height: 225px; }
  .homeCategories { grid-template-columns: 1fr; }
  .homeCategories h2 { grid-column: auto; }
  .benefitGrid { grid-template-columns: 1fr; }
  .departmentGrid { grid-template-columns: 1fr; }
  .departmentCard { min-height: 255px; }
  .departmentCard b { top: 190px; }
  .catalogPromoInner { grid-template-columns: 1fr; gap: 18px; }
  .promoMark { height: 95px; }
  .promoCopy h2 { font-size: 25px; }
  .promoFacts { grid-column: auto; }
  .pageIntro:after { right: -70px; }
  .storeHeroCopy > div:last-child { align-items: stretch; flex-direction: column; }
  .sectionTitleRow h2 { font-size: 27px; }
  .shopSidebar { grid-template-columns: 1fr; }
  .shopSidebar h2, .sidebarHelp { grid-column: auto; }
  .mainProductImage { height: 310px; padding: 20px; }
  .productSummary h1 { font-size: 37px; }
  .detailStatus { align-items: flex-start; flex-direction: column; }
  .plainFeatureGrid, .specGrid, .relatedGrid, .vtiFeatureGrid, .carPackages { grid-template-columns: 1fr; }
  .vtiHeroCopy > div { align-items: stretch; flex-direction: column; }
  .vtiTextLink { padding: 8px 0; }
  .vtiPackageGrid ul { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Delphi-inspired brand refresh */
.container { width: min(1320px, calc(100% - 48px)); }
.serviceBar { color: #425362; background: #eef2f4; border-top: 4px solid var(--red); }
.serviceBarInner { height: 35px; }
.serviceBar a { color: var(--blue-dark); }
.mainHeader { box-shadow: none; border-bottom: 1px solid #e1e6ea; }
.mainHeaderInner { height: 88px; }
.officialLogo { width: 205px; }
.officialLogo img { width: 132px; height: 41px; }
.officialLogo span { color: #596976; letter-spacing: .17em; }
.primaryNav { gap: 29px; font-size: 14px; text-transform: uppercase; letter-spacing: .035em; }
.primaryNav a { min-height: 88px; display: flex; align-items: center; padding: 0; border-bottom-width: 4px; }
.inquiryButton, .primaryButton { min-height: 48px; padding: 0 24px; background: var(--red); text-transform: uppercase; letter-spacing: .035em; }
.inquiryButton:hover, .primaryButton:hover { background: #aa1034; }
.categoryNav { background: var(--blue-dark); }
.categoryNavInner { height: 50px; gap: 39px; font-size: 14px; text-transform: uppercase; letter-spacing: .035em; }
.categoryNavInner > span { color: #86b8dc; }
.categoryNav a { position: relative; }
.categoryNav a:after { content: ""; width: 0; height: 2px; position: absolute; left: 0; bottom: -8px; background: var(--red); transition: width .2s ease; }
.categoryNav a:hover { text-decoration: none; }
.categoryNav a:hover:after { width: 100%; }

.homeLead { padding: 0 0 55px; background: #fff; }
.homeLead:before { display: none; }
.storeHero { min-height: 535px; grid-template-columns: .92fr 1.08fr; background: var(--blue-dark); box-shadow: none; }
.storeHero:before { width: 160px; height: 720px; top: -85px; left: 43%; z-index: 3; opacity: 1; background: var(--red); transform: skewX(-13deg); }
.storeHero:after { display: none; }
.storeHeroCopy { display: flex; flex-direction: column; justify-content: center; padding: 72px 75px 77px 66px; }
.storeHeroCopy > span { color: #9bc9e7; }
.heroEyebrow { font-size: 14px !important; letter-spacing: .17em !important; }
.storeHero h1 { max-width: 590px; margin: 21px 0 22px; font-size: clamp(48px, 5.2vw, 72px); line-height: .98; letter-spacing: -.045em; }
.storeHero p { max-width: 540px; color: #d5e1e9; font-size: 16px; line-height: 1.65; }
.storeHero p b { color: white; }
.storeHeroCopy .heroSpecs { margin-top: 24px; gap: 9px; }
.heroSpecs span { padding: 7px 10px; color: white; background: transparent; border-color: rgba(255,255,255,.35); }
.storeHeroCopy > div:last-child { margin-top: 32px; }
.storeHero .secondaryButton { min-height: 48px; padding: 0 24px; text-transform: uppercase; letter-spacing: .035em; }
.storeHeroImage { min-width: 0; display: block; padding: 0; overflow: hidden; background: #0e4168; }
.storeHeroImage:after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,47,82,.47), transparent 45%), linear-gradient(0deg, rgba(6,47,82,.44), transparent 50%); }
.storeHeroImage .heroScene { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.04); }
.heroProduct { width: 345px; height: 315px; display: grid; place-items: center; position: absolute; left: 8%; bottom: 18px; z-index: 3; }
.heroProduct:before { content: ""; width: 275px; height: 275px; position: absolute; border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 22px 42px rgba(3,27,47,.28); }
.heroProduct img { width: 290px; position: relative; z-index: 2; filter: drop-shadow(0 20px 14px rgba(0,0,0,.25)); }
.heroModel { right: auto; left: 8px; bottom: -18px; z-index: 1; color: rgba(255,255,255,.14); font-size: 135px; }
.heroImageNote { right: 30px; bottom: 30px; z-index: 4; padding: 14px 17px; border-left-width: 5px; background: rgba(6,47,82,.92); }
.heroImageNote b { font-size: 15px; }
.heroImageNote span { margin-top: 5px; color: #c1daeb; }
.homeCategoryRail { display: grid; grid-template-columns: repeat(4,1fr); position: relative; z-index: 6; width: calc(100% - 80px); margin: -28px auto 0; background: white; box-shadow: 0 15px 38px rgba(13,42,66,.15); }
.homeCategoryRail a { min-height: 106px; display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: 14px; padding: 18px 22px; border-right: 1px solid var(--line); transition: color .2s ease, background .2s ease; }
.homeCategoryRail a:last-child { border-right: 0; }
.homeCategoryRail a:hover { color: var(--blue); background: #f5f8fa; }
.homeCategoryRail > a > span { color: var(--red); font-size: 14px; font-weight: 800; }
.homeCategoryRail a div { display: flex; flex-direction: column; gap: 6px; }
.homeCategoryRail b { font-size: 14px; }
.homeCategoryRail small { color: var(--muted); font-size: 14px; }
.homeCategoryRail em { color: var(--blue); font-size: 16px; font-style: normal; }

.serviceBenefits { background: #f4f6f8; border-color: transparent; }
.benefitGrid > div, .benefitGrid > a { min-height: 96px; border-color: #d8e0e6; }
.benefitGrid i { color: var(--red); background: white; border: 1px solid #d7dfe5; border-radius: 0; }
.benefitGrid strong { color: var(--blue-dark); text-transform: uppercase; letter-spacing: .025em; }

.shopDepartments { padding: 92px 0 36px; }
.sectionTitleRow { margin-bottom: 35px; }
.sectionTitleRow > div > span, .subLabel { color: var(--red); letter-spacing: .16em; }
.sectionTitleRow h2 { max-width: 720px; font-size: 38px; line-height: 1.07; }
.departmentGrid { grid-template-columns: 1fr 1fr; gap: 22px; }
.departmentCard { min-height: 330px; padding: 38px; border: 0; background: #eef2f4; }
.departmentCard:before { width: 125px; right: -55px; opacity: .1; }
.departmentCard h3 { max-width: 290px; margin-top: 12px; font-size: 30px; line-height: 1.05; }
.departmentCard p { max-width: 260px; font-size: 14px; }
.departmentCard b { top: 235px; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; }
.departmentCard img { width: 48%; height: 255px; position: absolute; right: 22px; bottom: 17px; }
.departmentBlue { background: var(--blue-dark); }
.departmentRed { background: var(--red); }
.departmentBlue b, .departmentRed b { color: white; }

.catalogSection { padding: 86px 0; background: #f4f6f8; }
.catalogCard { border: 0; box-shadow: 0 1px 0 #dbe2e7; }
.catalogCard:hover { border-color: transparent; box-shadow: 0 18px 38px rgba(13,42,66,.13); }
.catalogImage { height: 255px; background: white; border-bottom: 1px solid #e0e6ea; }
.catalogBody { padding: 23px; }
.catalogBody h3 { font-size: 19px; }
.cardBadge { padding: 8px 11px; text-transform: uppercase; letter-spacing: .045em; }

.catalogPromo { background: var(--blue-dark); }
.catalogPromoInner { min-height: 235px; }
.catalogPromoInner:before { background: var(--red); opacity: 1; }
.vehicleSection { padding: 86px 0; background: white; }
.vehicleTile { min-height: 270px; padding: 34px; border: 0; background: #eef2f4; }
.vehicleTile h3 { margin-top: 60px; font-size: 27px; }
.darkTile { background: var(--blue); }

.vtiHome { padding: 95px 0; background: #f4f6f8; }
.vtiHomeGrid { gap: 75px; }
.vtiHomeImage { padding: 0; border: 0; box-shadow: 25px 25px 0 var(--blue); }
.vtiHomeCopy h2 { font-size: 44px; }

.delphiDifference { padding: 86px 0 92px; color: white; background: var(--blue-dark); border-top: 8px solid var(--red); }
.differenceHeading { display: grid; grid-template-columns: .7fr 1.1fr .8fr; align-items: end; gap: 45px; margin-bottom: 50px; }
.differenceHeading > span { color: #8bbbd8; font-size: 14px; font-weight: 800; letter-spacing: .16em; }
.differenceHeading h2 { margin: 0; font-size: 39px; line-height: 1.06; letter-spacing: -.03em; }
.differenceHeading p { margin: 0; color: #b6cbd9; font-size: 14px; line-height: 1.65; }
.differenceGrid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.2); }
.differenceGrid article { min-height: 190px; padding: 26px 26px 10px 0; border-right: 1px solid rgba(255,255,255,.16); }
.differenceGrid article + article { padding-left: 26px; }
.differenceGrid article:last-child { border-right: 0; }
.differenceGrid b { color: var(--red); font-size: 14px; }
.differenceGrid h3 { margin: 42px 0 10px; font-size: 16px; }
.differenceGrid p { margin: 0; color: #abc0cf; font-size: 14px; line-height: 1.6; }
.shopContact { padding: 58px 0; background: var(--red); }
.shopContact span { color: #ffe0e7; }
.shopContact a { color: var(--blue-dark); }

.pageIntro { padding: 58px 0 54px; background: var(--blue-dark); border-bottom: 0; }
.pageIntro:before { display: none; }
.pageIntro:after { width: 180px; right: 16%; opacity: 1; background: var(--red); transform: skewX(-13deg); }
.pageIntro h1 { font-size: 50px; }
.shopLayout { gap: 40px; padding-top: 55px; padding-bottom: 90px; }
.shopSidebar { box-shadow: none; border: 0; border-top: 5px solid var(--red); }
.shopSidebar h2 { padding: 19px; border-left: 0; background: var(--blue-dark); text-transform: uppercase; letter-spacing: .04em; }
.shopSidebar > a { padding: 16px 18px; background: #f1f4f6; }
.resultsHeader { height: 54px; border: 0; border-bottom: 2px solid var(--blue); background: white; }
.vtiHero { position: relative; overflow: hidden; padding: 34px 0 72px; background: var(--blue-dark); }
.vtiHero:after { content: ""; width: 170px; height: 760px; position: absolute; right: 42%; top: -120px; z-index: 0; background: var(--red); transform: skewX(-13deg); }
.vtiHero .container { position: relative; z-index: 1; }
.vtiHeroCopy h1 { font-size: 56px; }
.vtiHeroImage { padding: 0; box-shadow: 18px 18px 0 rgba(255,255,255,.13); }
.detailNav { background: var(--blue-dark); }
.detailCta { background: var(--red); text-transform: uppercase; letter-spacing: .04em; }
.siteFooter { padding-top: 70px; background: #041f35; border-top: 1px solid rgba(255,255,255,.08); }

@media (max-width: 1020px) {
  .storeHero { grid-template-columns: 1fr 1fr; }
  .storeHeroCopy { padding: 58px 45px; }
  .storeHero h1 { font-size: 55px; }
  .storeHero:before { left: 47%; }
  .homeCategoryRail { width: calc(100% - 36px); }
  .homeCategoryRail a { padding: 17px 13px; }
  .homeCategoryRail small { display: none; }
  .departmentGrid { grid-template-columns: 1fr 1fr; }
  .differenceHeading { grid-template-columns: .55fr 1fr; }
  .differenceHeading p { grid-column: 2; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1320px); }
  .serviceBar { border-top-width: 3px; }
  .mainHeaderInner { height: 72px; }
  .categoryNavInner { height: 46px; }
  .homeLead { padding-bottom: 38px; }
  .storeHero { min-height: 690px; grid-template-columns: 1fr; }
  .storeHero:before { width: 100px; height: 250px; top: 400px; left: 54%; }
  .storeHeroCopy { min-height: 410px; padding: 48px 31px 42px; }
  .storeHero h1 { font-size: 47px; }
  .storeHero p { font-size: 14px; }
  .storeHeroImage { min-height: 280px; }
  .heroProduct { width: 235px; height: 220px; left: 2%; bottom: 3px; }
  .heroProduct:before { width: 190px; height: 190px; }
  .heroProduct img { width: 205px; }
  .heroModel { font-size: 95px; }
  .heroImageNote { right: 13px; bottom: 18px; }
  .homeCategoryRail { grid-template-columns: 1fr 1fr; width: calc(100% - 22px); margin-top: -17px; }
  .homeCategoryRail a { min-height: 82px; border-bottom: 1px solid var(--line); }
  .shopDepartments, .catalogSection, .vehicleSection, .vtiHome { padding: 65px 0; }
  .departmentGrid { grid-template-columns: 1fr; }
  .departmentCard { min-height: 300px; }
  .differenceHeading { grid-template-columns: 1fr; gap: 15px; }
  .differenceHeading p { grid-column: auto; }
  .differenceGrid { grid-template-columns: 1fr 1fr; }
  .differenceGrid article:nth-child(2) { border-right: 0; }
  .differenceGrid article + article { padding-left: 20px; }
  .differenceGrid article:nth-child(3) { padding-left: 0; }
  .vtiHomeImage { box-shadow: 12px 12px 0 var(--blue); }
  .pageIntro { padding: 48px 0; }
  .pageIntro h1 { font-size: 42px; }
  .shopLayout { padding-top: 38px; }
  .vtiHero:after { right: -85px; }
}

@media (max-width: 480px) {
  .storeHero { min-height: 735px; }
  .storeHeroCopy { min-height: 455px; }
  .storeHero h1 { font-size: 43px; }
  .storeHeroCopy > div:last-child { flex-direction: column; }
  .homeCategoryRail { grid-template-columns: 1fr; }
  .homeCategoryRail a { border-right: 0; }
  .departmentCard { min-height: 320px; padding: 30px; }
  .departmentCard img { width: 55%; height: 175px; }
  .departmentCard b { top: 245px; }
  .differenceGrid { grid-template-columns: 1fr; }
  .differenceGrid article, .differenceGrid article + article, .differenceGrid article:nth-child(3) { min-height: 155px; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .differenceGrid h3 { margin-top: 25px; }
}

/* Exact visual tokens and component language used by delphiautoparts.com */
:root {
  --blue: #005ed2;
  --blue-dark: #201e76;
  --red: #005ed2;
  --ink: #1f1f1f;
  --muted: #4c4c4c;
  --line: #e5e5e5;
  --soft: #f4f4f4;
}

html { font-family: "Lexend Deca", sans-serif; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--ink); letter-spacing: .002em; }
body { font-family: "Lexend Deca", sans-serif; font-weight: 300; color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: "Lexend Deca", sans-serif; font-weight: 500; }
.container { width: min(1314px, calc(100% - 30px)); }

.serviceBar { color: var(--muted); background: white; border: 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.serviceBarInner { height: 40px; }
.serviceBar a { color: var(--ink); font-weight: 400; }
.mainHeader { background: white; border: 0; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.mainHeaderInner { height: 80px; gap: 28px; }
.officialLogo { width: 150px; }
.officialLogo img { width: 105px; height: 34px; }
.officialLogo span { margin-top: 1px; color: var(--blue); font-size: 14px; font-weight: 500; letter-spacing: .16em; }
.primaryNav { gap: 0; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.primaryNav a { min-height: 80px; padding: 0 15px; border: 0; }
.primaryNav a:hover { color: var(--blue); border: 0; }
.inquiryButton, .primaryButton { min-height: 48px; padding: 10px 24px; border-radius: 24px; background: var(--blue); font-size: 15px; font-weight: 500; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.inquiryButton:hover, .primaryButton:hover { background: rgba(0,94,210,.75); }
.secondaryButton { min-height: 48px; padding: 10px 24px; border: 1px solid white; border-radius: 24px; font-size: 15px; font-weight: 500; }

.homeLead { padding: 0 0 40px; background: white; }
.homeLead > .container { width: 100%; max-width: none; }
.storeHero { min-height: 560px; display: block; position: relative; overflow: hidden; background: #111; box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.storeHero:before, .storeHero:after { display: none; }
.storeHeroCopy { width: min(1314px, calc(100% - 30px)); min-height: 560px; display: flex; align-items: flex-start; justify-content: center; margin: 0 auto; padding: 65px 0; position: relative; z-index: 3; }
.storeHeroCopy > span { color: white; font-weight: 500; }
.heroEyebrow { font-size: 14px !important; letter-spacing: .04em !important; }
.storeHero h1 { max-width: 710px; margin: 24px 0 20px; color: white; font-size: clamp(43px, 4.1vw, 55px); font-weight: 300; line-height: 1.14; letter-spacing: 0; }
.storeHero h1 b { font-weight: 600; }
.storeHero p { max-width: 600px; margin: 0; color: white; font-size: 17px; font-weight: 300; line-height: 1.55; }
.storeHeroCopy .heroSpecs { gap: 8px; margin-top: 24px; }
.heroSpecs span { padding: 5px 14px; color: white; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; font-size: 14px; font-weight: 400; }
.storeHeroCopy > div:last-child { margin-top: 32px; }
.storeHero .primaryButton { background: var(--blue); }
.storeHeroImage { position: absolute; inset: 0; z-index: 0; min-height: 0; overflow: hidden; background: #111; }
.storeHeroImage .heroScene { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; filter: none; }
.storeHeroImage:after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90.1deg, rgba(0,0,0,.78) 5%, rgba(0,0,0,.67) 38%, transparent 100%); }
.heroProduct, .heroImageNote { display: none; }

.homeCategoryRail { width: min(1314px, calc(100% - 30px)); grid-template-columns: repeat(4,1fr); gap: 14px; margin: 30px auto 0; background: transparent; box-shadow: none; }
.homeCategoryRail a { min-height: 94px; grid-template-columns: 28px 1fr 18px; gap: 12px; padding: 17px 25px; background: var(--soft); border: 0; border-radius: 48px; font-weight: 500; }
.homeCategoryRail a:hover { color: white; background: var(--blue); }
.homeCategoryRail > a > span, .homeCategoryRail em { color: var(--blue); }
.homeCategoryRail a:hover > span, .homeCategoryRail a:hover em, .homeCategoryRail a:hover small { color: white; }
.homeCategoryRail b { font-size: 14px; font-weight: 600; }
.homeCategoryRail small { color: var(--muted); font-weight: 300; }

.serviceBenefits { background: white; border: 0; }
.benefitGrid { gap: 16px; padding: 15px 0 45px; }
.benefitGrid > div, .benefitGrid > a, .benefitGrid > div:first-child, .benefitGrid > a:first-child { min-height: 85px; gap: 14px; padding: 16px 20px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.benefitGrid i { color: white; background: var(--blue); border: 0; border-radius: 50%; }
.benefitGrid strong { color: var(--ink); font-weight: 500; text-transform: none; letter-spacing: 0; }

.shopDepartments { padding: 55px 0 70px; background: white; }
.sectionTitleRow { align-items: end; margin-bottom: 36px; }
.sectionTitleRow > div > span, .subLabel { color: var(--blue); font-weight: 500; letter-spacing: .03em; }
.sectionTitleRow h2 { margin-top: 9px; color: var(--ink); font-size: 39px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.headingAside { color: var(--muted); font-size: 14px; font-weight: 300; }
.departmentGrid { grid-template-columns: 1fr; gap: 30px; }
.departmentCard, .departmentBlue, .departmentRed { min-height: 300px; display: grid; grid-template-columns: 34% 66%; padding: 0; color: var(--ink); background: white; border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.departmentCard:before { display: none; }
.departmentCard:hover { transform: none; box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.departmentCard > div { grid-column: 2; grid-row: 1; align-self: center; padding: 45px clamp(35px,6vw,80px); }
.departmentCard:nth-child(even) > div { grid-column: 1; }
.departmentCard img { width: 100%; height: 300px; position: static; grid-column: 1; grid-row: 1; margin: 0; padding: 30px; object-fit: contain; object-position: center; background: var(--soft); filter: none; }
.departmentCard:nth-child(even) img { grid-column: 2; }
.departmentCard small { color: var(--blue); font-size: 14px; font-weight: 500; letter-spacing: .03em; }
.departmentCard h3 { max-width: 100%; margin: 10px 0 12px; color: var(--ink); font-size: 36px; font-weight: 500; line-height: 1.22; letter-spacing: 0; }
.departmentCard p { max-width: 620px; color: var(--muted); font-size: 15px; font-weight: 300; line-height: 1.5; }
.departmentCard b { min-height: 48px; display: inline-flex; align-items: center; position: static; margin-top: 25px; padding: 10px 24px; color: var(--blue); border: 1px solid var(--blue); border-radius: 24px; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.departmentCard:hover b { color: white; background: var(--blue); }

.catalogSection { padding: 70px 0; background: var(--soft); }
.catalogCard { overflow: hidden; border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); transition: .3s ease-out; }
.catalogCard:before, .catalogImage:after { display: none; }
.catalogCard:hover { transform: none; box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.catalogImage { height: 255px; background: white; border-bottom: 1px solid var(--line); }
.cardBadge { top: 15px; left: 15px; padding: 6px 12px; color: var(--ink); background: var(--soft); border-radius: 50px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.catalogBody { padding: 25px 22px; }
.vehicleLabel { color: var(--blue); font-weight: 500; letter-spacing: .02em; }
.productCode { font-weight: 400; }
.catalogBody h3 { font-size: 20px; font-weight: 500; line-height: 1.5; }
.catalogBody p { color: var(--muted); font-size: 14px; font-weight: 300; }
.catalogBody li { border-radius: 16px; background: var(--soft); }
.catalogBottom a { min-height: 36px; display: inline-flex; align-items: center; padding: 7px 15px; color: white; background: var(--blue); border-radius: 18px; font-weight: 500; }

.catalogPromo { padding: 55px 15px; background: white; }
.catalogPromoInner { min-height: 225px; padding: 45px 55px; color: white; background: var(--blue); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.catalogPromoInner:before { display: none; }
.promoMark { height: 118px; padding-left: 0; border: 0; }
.promoMark span, .promoCopy > span { color: white; }
.promoCopy h2 { color: white; font-weight: 500; }
.promoCopy p, .promoFacts span { color: rgba(255,255,255,.84); }
.catalogPromoInner > a { padding: 12px 22px; color: var(--ink); background: white; border-radius: 24px; font-size: 14px; font-weight: 500; }

.vehicleSection { padding: 70px 0; background: white; }
.vehicleGrid { gap: 20px; }
.vehicleTile { min-height: 270px; padding: 34px; background: var(--soft); border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); transition: .3s ease-out; }
.vehicleTile:hover { box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.vehicleTile small { color: var(--blue); }
.vehicleTile h3 { color: var(--ink); font-size: 25px; font-weight: 500; }
.vehicleTile p { color: var(--muted); font-size: 14px; }
.vehicleTile > span { color: var(--blue); font-weight: 500; }
.darkTile { color: white; background: var(--blue); }
.darkTile h3 { color: white; }
.darkTile small, .darkTile > span { color: white; }
.darkTile p { color: rgba(255,255,255,.84); }

.vtiHome { padding: 70px 0; background: var(--soft); }
.vtiHomeGrid { gap: 0; overflow: hidden; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.vtiHomeImage { padding: 0; background: var(--soft); border: 0; box-shadow: none; }
.vtiHomeImage img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.vtiHomeCopy { padding: 50px clamp(35px,5vw,70px); }
.vtiHomeCopy > span { color: var(--blue); }
.vtiHomeCopy h2 { color: var(--ink); font-size: 38px; font-weight: 500; line-height: 1.22; letter-spacing: 0; }
.vtiHomeCopy p, .vtiHomeCopy ul { font-weight: 300; }

.delphiDifference { padding: 75px 0; color: white; background: var(--blue); border: 0; }
.differenceHeading > span, .differenceGrid b { color: white; }
.differenceHeading h2 { color: white; font-weight: 500; }
.differenceHeading p, .differenceGrid p { color: rgba(255,255,255,.82); }
.differenceGrid { border-color: rgba(255,255,255,.35); }
.differenceGrid article { border-color: rgba(255,255,255,.28); }
.differenceGrid h3 { color: white; font-weight: 500; }
.shopContact { padding: 55px 0; background: white; }
.shopContactInner { padding: 45px 55px; color: white; background: var(--blue); border-radius: 8px; }
.shopContact span { color: rgba(255,255,255,.8); }
.shopContact h2 { color: white; font-weight: 500; }
.shopContact a { padding: 13px 23px; color: var(--ink); background: white; border-radius: 24px; font-size: 14px; font-weight: 500; }

.pageIntro { padding: 68px 0; color: white; background-image: linear-gradient(90.1deg, rgba(0,0,0,.78) 5%, rgba(0,0,0,.62) 48%, rgba(0,0,0,.12) 100%), var(--delphi-page-intro-image, linear-gradient(#0a5288,#0a5288)); background-position: center; background-size: cover; border: 0; box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.pageIntro:before, .pageIntro:after { display: none; }
.pageIntro h1 { max-width: 760px; color: white; font-size: 49px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.pageIntro p { max-width: 670px; color: white; font-size: 15px; font-weight: 300; }
.pageIntro .breadcrumbs, .pageIntro .breadcrumbs b { color: white; }
.shopLayout { gap: 40px; padding-top: 55px; padding-bottom: 80px; }
.shopSidebar { overflow: hidden; background: white; border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.shopSidebar h2 { padding: 18px 20px; color: white; background: var(--blue); border: 0; font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.shopSidebar > a { padding: 15px 20px; background: white; font-size: 14px; font-weight: 400; }
.shopSidebar > a:hover { color: var(--blue); background: var(--soft); }
.sidebarHelp { background: var(--soft); }
.resultsHeader { height: 52px; padding: 0 18px; background: white; border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); font-size: 14px; }
.categoryNote, .packageGuide, .licenceGuide { border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.licenceGuide { background: var(--blue); }
.softwareCta { background: var(--blue); border-radius: 8px; }
.softwareCta a { border-radius: 24px; }

.mainProductImage, .thumbRow div, .packagePhoto, .vtiScreenImage, .vtiHeavyImage { overflow: hidden; background: var(--soft); border: 0; border-radius: 8px; }
.mainProductImage { box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.detailBadge { color: var(--blue); background: var(--soft); border-radius: 50px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.productSummary h1 { color: var(--ink); font-weight: 500; letter-spacing: 0; }
.detailBullets li:before { background: var(--blue); border-radius: 50%; }
.detailCta { width: auto; min-height: 48px; display: inline-flex; padding: 10px 28px; background: var(--blue); border-radius: 24px; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.detailNav { background: white; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.detailNav a { color: var(--ink); font-weight: 400; }
.graySection, .vtiFeaturesSection, .vtiPackages, .vtiFaq { background: var(--soft); }
.plainFeatureGrid, .vtiFeatureGrid { gap: 18px; border: 0; }
.plainFeatureGrid article, .vtiFeatureGrid article, .vtiPackageGrid article { border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.plainFeatureGrid b, .vtiFeatureGrid small, .vtiPackageGrid article > span { color: var(--blue); }
.recommendedPackage { border: 0 !important; box-shadow: 0 5px 15px rgba(0,94,210,.25) !important; }
.responsiveTable { border: 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.responsiveTable th { background: var(--blue); }
.vtiHero { padding: 35px 0 70px; background: var(--blue); }
.vtiHero:after { display: none; }
.vtiHeroCopy h1 { color: white; font-size: 50px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.vtiHeroCopy > span { color: white; }
.vtiHeroImage { overflow: hidden; border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.15); }
.vtiHero .primaryButton { color: var(--ink); background: white; }

.siteFooter { padding: 55px 0 22px; color: var(--ink); background: var(--soft); border: 0; }
.footerLogo img { filter: none; }
.footerLogo span, .footerGrid p, .footerGrid span { color: var(--muted); }
.footerGrid h3 { color: var(--ink); font-weight: 500; }
.footerGrid a:hover { color: var(--blue); }
.footerLegal { color: var(--muted); border-top-color: var(--line); }

@media (max-width: 1020px) {
  .primaryNav { font-size: 14px; }
  .primaryNav a { padding: 0 10px; }
  .storeHeroCopy { padding-left: 20px; padding-right: 20px; }
  .homeCategoryRail { grid-template-columns: 1fr 1fr; }
  .homeCategoryRail small { display: block; }
  .departmentGrid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 30px, 1314px); }
  .serviceBarInner { height: 36px; }
  .mainHeaderInner { height: 72px; }
  .officialLogo img { width: 92px; }
  .homeLead { padding-bottom: 30px; }
  .storeHero { min-height: 600px; }
  .storeHeroCopy { width: min(100% - 30px, 1314px); min-height: 600px; justify-content: flex-end; padding: 60px 0; }
  .storeHeroImage:after { background: linear-gradient(0deg, rgba(0,0,0,.82) 12%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.1) 100%); }
  .storeHero h1 { font-size: 42px; }
  .homeCategoryRail { grid-template-columns: 1fr 1fr; margin-top: 20px; }
  .homeCategoryRail a { min-height: 88px; border-radius: 8px; }
  .benefitGrid { padding-bottom: 25px; }
  .departmentCard, .departmentBlue, .departmentRed { grid-template-columns: 1fr; }
  .departmentCard > div, .departmentCard:nth-child(even) > div { grid-column: 1; grid-row: 2; padding: 35px 30px; }
  .departmentCard img, .departmentCard:nth-child(even) img { height: 245px; grid-column: 1; grid-row: 1; }
  .departmentCard h3 { font-size: 30px; }
  .catalogPromo { padding: 35px 15px; }
  .catalogPromoInner { padding: 35px 28px; }
  .vtiHomeGrid { grid-template-columns: 1fr; }
  .vtiHomeImage img { height: auto; }
  .shopContact { padding: 35px 15px; }
  .shopContactInner { padding: 35px 28px; }
  .pageIntro { padding: 58px 0; }
  .pageIntro h1 { font-size: 40px; }
  .detailNav { background: white; }
  .differenceGrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .storeHero { min-height: 650px; }
  .storeHeroCopy { min-height: 650px; }
  .storeHero h1 { font-size: 36px; }
  .storeHero p { font-size: 15px; }
  .homeCategoryRail { grid-template-columns: 1fr; }
  .homeCategoryRail a { border-radius: 48px; }
  .departmentCard, .departmentBlue, .departmentRed { min-height: auto; }
  .departmentCard b { margin-top: 22px; }
  .differenceGrid { grid-template-columns: 1fr; }
}

/* Product information, licence continuity and guided enquiry */
.catalogCard { display: flex; flex-direction: column; }
.catalogBody { flex: 1; display: flex; flex-direction: column; }
.catalogBody p { line-height: 1.65; }
.catalogBody ul { margin-bottom: 16px; }
.catalogBottom { margin-top: auto; }
.cardPrice { color: var(--ink); font-size: 16px; font-weight: 600; }
.cardLicenceNote { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 12px; color: var(--blue); background: rgba(0,94,210,.07); border-radius: 8px; }
.cardLicenceNote b { width: 25px; height: 25px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-size: 16px; font-weight: 400; }
.cardLicenceNote span { font-size: 14px; font-weight: 500; line-height: 1.4; }

.licensePromiseSection { padding: 68px 0; background: white; }
.licensePromise { min-height: 190px; display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 30px; padding: 34px 40px; color: white; background: var(--blue-dark); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.licensePromiseMark { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 42px; font-weight: 300; }
.licensePromise span { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.licensePromise h2 { margin: 7px 0 9px; color: white; font-size: 27px; line-height: 1.2; }
.licensePromise p { max-width: 760px; margin: 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.7; }
.licensePromise > a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; color: var(--blue-dark); background: white; border-radius: 24px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.compactPromise { min-height: auto; grid-template-columns: 42px 1fr; gap: 13px; margin-top: 16px; padding: 18px; background: var(--soft); box-shadow: none; color: var(--ink); }
.compactPromise .licensePromiseMark { width: 40px; height: 40px; color: white; background: var(--blue-dark); border: 0; font-size: 23px; }
.compactPromise span { color: var(--blue); font-size: 14px; }
.compactPromise h2 { margin: 4px 0 5px; color: var(--ink); font-size: 14px; }
.compactPromise p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.compactPromise > a { display: none; }

.inquiryHero { padding: 50px 0 58px; color: white; background: var(--blue); }
.inquiryBreadcrumbs { padding: 0 0 34px; color: rgba(255,255,255,.75); }
.inquiryBreadcrumbs b { color: white; }
.inquiryHeroGrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; }
.inquiryHeroGrid > div:first-child > span { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.inquiryHero h1 { max-width: 750px; margin: 14px 0 17px; color: white; font-size: 49px; line-height: 1.15; }
.inquiryHero p { max-width: 690px; margin: 0; color: rgba(255,255,255,.84); font-size: 15px; line-height: 1.7; }
.inquiryProcess { display: grid; gap: 1px; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.24); border-radius: 8px; overflow: hidden; }
.inquiryProcess div { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 13px; min-height: 58px; padding: 12px 18px; background: rgba(255,255,255,.08); }
.inquiryProcess b { width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); background: white; border-radius: 50%; font-size: 14px; }
.inquiryProcess span { font-size: 14px; }
.inquiryPageGrid { display: grid; grid-template-columns: 1fr 300px; gap: 38px; align-items: start; padding-top: 55px; padding-bottom: 85px; }
.inquiryForm { display: grid; gap: 20px; }
.formSection { padding: 30px; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.formStep { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; margin-bottom: 25px; }
.formStep > b { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-size: 14px; }
.formStep span { color: var(--blue); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.formStep h2 { margin: 3px 0 0; font-size: 24px; }
.choiceGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choiceCard { min-height: 110px; display: flex; flex-direction: column; gap: 7px; padding: 18px; position: relative; cursor: pointer; background: var(--soft); border: 1px solid transparent; border-radius: 8px; transition: border-color .2s ease, background .2s ease; }
.choiceCard input { position: absolute; top: 16px; right: 16px; accent-color: var(--blue); }
.choiceCard b { padding-right: 28px; font-size: 14px; font-weight: 500; }
.choiceCard span { color: var(--muted); font-size: 14px; line-height: 1.55; }
.selectedChoice { background: rgba(0,94,210,.07); border-color: var(--blue); }
.fieldGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.fieldGrid label { display: flex; flex-direction: column; gap: 7px; }
.fieldGrid label > span, .vehicleChoices legend { color: var(--ink); font-size: 14px; font-weight: 500; }
.fieldGrid input, .fieldGrid select, .fieldGrid textarea { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--ink); background: white; border: 1px solid #cfd6dc; border-radius: 6px; font: inherit; font-size: 14px; outline: 0; }
.fieldGrid textarea { resize: vertical; }
.fieldGrid input:focus, .fieldGrid select:focus, .fieldGrid textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,94,210,.1); }
.fullField { grid-column: 1 / -1; }
.vehicleChoices { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; border: 0; }
.vehicleChoices legend { width: 100%; margin-bottom: 7px; }
.vehicleChoices label { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; padding: 9px 12px; background: var(--soft); border-radius: 20px; cursor: pointer; }
.vehicleChoices label span { font-size: 14px; }
.vehicleChoices input { width: 14px; min-height: auto; accent-color: var(--blue); }
.consentField { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.consentField input { margin-top: 2px; accent-color: var(--blue); }
.submitInquiry, .inquirySuccess button { min-height: 48px; margin-top: 18px; padding: 10px 24px; color: white; background: var(--blue); border: 0; border-radius: 24px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; }
.submitInquiry:hover, .inquirySuccess button:hover { background: rgba(0,94,210,.78); }
.formAutomationNote { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.inquiryAside { position: sticky; top: 20px; padding: 27px; color: white; background: var(--blue-dark); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.inquiryAside > span { color: rgba(255,255,255,.7); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.inquiryAside h2 { margin: 8px 0 18px; color: white; font-size: 23px; line-height: 1.25; }
.inquiryAside ul { margin: 0 0 24px; padding-left: 18px; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.9; }
.inquiryAside > div { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }
.inquiryAside > div b { font-size: 14px; }
.inquiryAside > div p { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.65; }
.inquirySuccess { min-height: 470px; padding: 45px; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.inquirySuccess > span { color: var(--blue); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.inquirySuccess h2 { max-width: 560px; margin: 10px 0 14px; font-size: 34px; line-height: 1.2; }
.inquirySuccess > p { color: var(--muted); font-size: 14px; }
.formSectionIntro { margin: -8px 0 22px 58px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.recommendationVehicles { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; padding: 14px 17px; background: rgba(0,94,210,.07); border-radius: 8px; }
.recommendationVehicles b { color: var(--blue); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.recommendationVehicles span { color: var(--ink); font-size: 14px; }
.recommendationNote { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; padding: 20px; border-left: 4px solid var(--blue); background: var(--soft); }
.recommendationNote b { font-size: 14px; }
.recommendationNote span { color: var(--muted); font-size: 14px; line-height: 1.65; }

.mobileNav { display: none; position: relative; margin-left: auto; }
.mobileNav > summary { min-width: 75px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 13px; color: var(--blue); background: var(--soft); border-radius: 22px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; }
.mobileNav > summary::-webkit-details-marker { display: none; }
.mobileNav > summary b { font-size: 16px; font-weight: 400; }
.mobileNav nav { width: min(330px, calc(100vw - 30px)); display: flex; flex-direction: column; position: absolute; top: 50px; right: 0; z-index: 100; padding: 10px; background: white; border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.mobileNav nav a { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.mobileNav nav a:last-child { border-bottom: 0; }
.mobileNav .mobileGuideLink { margin-top: 8px; color: white; background: var(--blue); border-radius: 22px; text-align: center; font-weight: 500; }
.mobileMoreNav { border-bottom: 1px solid var(--line); }
.mobileMoreNav > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14px; }
.mobileMoreNav > summary::-webkit-details-marker { display: none; }
.mobileMoreNav > summary b { color: var(--blue); font-size: 18px; font-weight: 400; line-height: 1; transition: transform .18s ease; }
.mobileMoreNav[open] > summary { color: var(--blue); font-weight: 600; }
.mobileMoreNav[open] > summary b { transform: rotate(45deg); }
.mobileMoreNav > div { margin: 0 6px 8px; padding: 4px 8px; background: var(--soft); border-radius: 6px; }
.mobileNav nav .mobileMoreNav a { padding: 10px 9px; font-size: 14px; }

.supportSection, .aboutSection, .blogIndex { padding: 70px 0; }
.supportGrid, .aboutValues { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.supportGrid article, .aboutValues article { min-height: 285px; display: flex; flex-direction: column; padding: 28px; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.supportGrid article > b, .aboutValues article > b { color: var(--blue); font-size: 14px; }
.supportGrid h3, .aboutValues h3 { margin: 45px 0 10px; font-size: 21px; line-height: 1.3; }
.supportGrid p, .aboutValues p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.supportGrid a { margin-top: auto; padding-top: 25px; color: var(--blue); font-size: 14px; font-weight: 500; }
.supportChecklist { padding: 70px 0; background: var(--soft); }
.supportChecklistGrid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.supportChecklist h2 { margin: 10px 0 0; font-size: 35px; line-height: 1.2; }
.supportChecklist ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.supportChecklist li { display: grid; grid-template-columns: 160px 1fr; gap: 25px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.supportChecklist li b { font-size: 14px; }
.supportChecklist li span { color: var(--muted); font-size: 14px; line-height: 1.6; }
.supportContact { padding: 50px 0; }
.supportContactInner, .aboutCtaInner { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 42px 48px; color: white; background: var(--blue); border-radius: 8px; }
.supportContact span, .aboutCta span { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.supportContact h2, .aboutCta h2 { margin: 7px 0; color: white; font-size: 28px; }
.supportContact p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; }
.supportContactInner > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.supportContact a { color: white; font-size: 14px; font-weight: 500; }

.aboutLeadGrid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.aboutLeadGrid h2 { margin: 10px 0 0; font-size: 38px; line-height: 1.2; }
.aboutLeadGrid p { margin: 0 0 17px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.aboutValues { margin-top: 55px; }
.aboutValues article { min-height: 235px; background: var(--soft); box-shadow: none; }
.aboutCta { padding: 0 0 70px; }
.aboutCtaInner a { padding: 13px 22px; color: var(--ink); background: white; border-radius: 24px; font-size: 14px; font-weight: 500; }

.blogIndex { background: var(--soft); }
.blogGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.blogGrid > a { min-height: 330px; display: flex; flex-direction: column; padding: 30px; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); transition: box-shadow .2s ease; }
.blogGrid > a:hover { box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.blogGrid small, .blogArticle > div:first-child span { color: var(--blue); font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.blogGrid h2 { margin: 45px 0 13px; font-size: 22px; line-height: 1.35; }
.blogGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.blogGrid b { margin-top: auto; padding-top: 25px; color: var(--blue); font-size: 14px; }
.blogArticles { background: white; }
.blogArticle { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; padding-top: 75px; padding-bottom: 75px; border-bottom: 1px solid var(--line); scroll-margin-top: 60px; }
.blogArticle h2 { margin: 10px 0 0; font-size: 34px; line-height: 1.25; }
.blogArticle p { margin: 0 0 17px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.blogArticle p b { color: var(--ink); }
.blogArticle a { display: inline-flex; margin-top: 8px; color: var(--blue); font-size: 14px; font-weight: 500; }

@media (max-width: 1020px) {
  .licensePromise { grid-template-columns: 72px 1fr; }
  .licensePromise > a { grid-column: 2; justify-self: start; }
  .inquiryHeroGrid { grid-template-columns: 1fr 340px; gap: 35px; }
  .inquiryPageGrid { grid-template-columns: 1fr 270px; gap: 25px; }
  .supportChecklistGrid, .aboutLeadGrid, .blogArticle { gap: 45px; }
}

@media (max-width: 760px) {
  .inquiryButton { display: none; }
  .mobileNav { display: block; }
  .licensePromise { grid-template-columns: 1fr; gap: 18px; padding: 28px; }
  .licensePromise > a { grid-column: 1; justify-self: start; white-space: normal; }
  .compactPromise { grid-template-columns: 42px 1fr; padding: 16px; }
  .compactPromise > a { display: none; }
  .inquiryHeroGrid, .inquiryPageGrid { grid-template-columns: 1fr; }
  .inquiryHero h1 { font-size: 40px; }
  .inquiryProcess { margin-top: 5px; }
  .inquiryPageGrid { padding-top: 35px; padding-bottom: 60px; }
  .inquiryAside { position: static; grid-row: 1; }
  .choiceGrid, .fieldGrid { grid-template-columns: 1fr; }
  .fullField { grid-column: auto; }
  .formSectionIntro { margin-left: 0; }
  .supportGrid, .aboutValues, .blogGrid { grid-template-columns: 1fr; }
  .supportGrid article, .aboutValues article, .blogGrid > a { min-height: 235px; }
  .supportChecklistGrid, .aboutLeadGrid, .blogArticle { grid-template-columns: 1fr; gap: 30px; }
  .supportContactInner, .aboutCtaInner { align-items: flex-start; flex-direction: column; padding: 34px 28px; }
  .supportContactInner > div:last-child { align-items: flex-start; }
}

@media (max-width: 480px) {
  .licensePromiseSection { padding: 42px 0; }
  .licensePromise h2 { font-size: 23px; }
  .compactPromise h2 { font-size: 14px; }
  .inquiryHero { padding: 35px 0 45px; }
  .inquiryBreadcrumbs { padding-bottom: 25px; }
  .inquiryHero h1 { font-size: 34px; }
  .inquiryHero p { font-size: 14px; }
  .formSection { padding: 23px 18px; }
  .formStep { grid-template-columns: 36px 1fr; gap: 12px; }
  .formStep > b { width: 34px; height: 34px; }
  .formStep h2 { font-size: 20px; }
  .vehicleChoices label { padding: 8px 10px; }
  .inquirySuccess { min-height: 0; padding: 30px 22px; }
  .inquirySuccess h2 { font-size: 28px; }
  .supportSection, .aboutSection, .blogIndex { padding: 48px 0; }
  .supportChecklist { padding: 48px 0; }
  .supportChecklist h2, .aboutLeadGrid h2, .blogArticle h2 { font-size: 29px; }
  .supportChecklist li { grid-template-columns: 1fr; gap: 6px; }
  .blogArticle { padding-top: 50px; padding-bottom: 50px; }
}

/* Product purchase flow */
.productImageCaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 10px; padding: 13px 15px; border: 1px solid var(--line); background: white; }
.productImageCaption span { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.productImageCaption b { font-size: 14px; }
.productLicenceMessage { display: flex; flex-direction: column; gap: 5px; margin: -4px 0 19px; padding: 14px 16px; color: #123b62; border-left: 4px solid var(--blue); background: #eaf5ff; }
.productLicenceMessage b { font-size: 14px; line-height: 1.5; }
.productLicenceMessage span { color: #52697d; font-size: 14px; line-height: 1.5; }
.cartControls { margin-top: 4px; }
.purchaseRow { display: flex; gap: 10px; }
.quantityControl { width: 126px; min-height: 50px; display: grid; grid-template-columns: 36px 1fr 36px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: white; }
.quantityControl button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font: inherit; font-size: 18px; }
.quantityControl input { min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 14px; font-weight: 700; text-align: center; }
.addToCartButton { flex: 1; min-height: 50px; padding: 0 24px; border: 0; border-radius: 25px; color: white; background: var(--blue); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.addToCartButton:hover { background: #004fad; }
.purchaseNote { margin: 10px 3px 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.cartConfirmation { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 13px 15px; color: #226947; border: 1px solid #bfe3d0; border-radius: 8px; background: #effaf4; }
.cartConfirmation b { font-size: 14px; }
.cartConfirmation span { font-size: 14px; }
.productGuideLink { display: block; margin: 14px 0 0; color: var(--blue); font-size: 14px; font-weight: 700; line-height: 1.5; }
.purchaseInfoGrid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
.purchaseInfoGrid h2 { margin: 10px 0 0; font-size: 34px; line-height: 1.15; }
.purchaseInfoGrid > div:last-child { border-top: 1px solid var(--line); }
.purchaseInfoGrid article { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.purchaseInfoGrid article b { color: var(--blue); font-size: 14px; }
.purchaseInfoGrid article span { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Two-question product guide */
.simpleGuide { overflow: hidden; border-radius: 8px; background: white; box-shadow: 0 8px 28px rgba(15,47,76,.1); }
.simpleGuideIntro { padding: 30px 32px 25px; border-bottom: 1px solid var(--line); }
.simpleGuideIntro > span, .guideResultCopy > span { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.simpleGuideIntro h2 { margin: 8px 0 9px; font-size: 26px; line-height: 1.2; }
.simpleGuideIntro p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.simpleQuestion { margin: 0; padding: 27px 32px; border: 0; border-bottom: 1px solid var(--line); }
.simpleQuestion legend { width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 17px; padding: 0; }
.simpleQuestion legend b { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; color: white; border-radius: 50%; background: var(--blue); font-size: 14px; }
.simpleQuestion legend span { font-size: 15px; font-weight: 700; }
.simpleChoiceGrid { display: grid; gap: 10px; }
.vehicleChoiceGrid { grid-template-columns: repeat(3,1fr); }
.needChoiceGrid { grid-template-columns: repeat(2,1fr); }
.simpleChoice { min-height: 91px; display: flex; flex-direction: column; gap: 7px; padding: 17px 17px 14px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.simpleChoice:hover, .selectedSimpleChoice { border-color: var(--blue); background: #f2f8ff; }
.simpleChoice input { width: 15px; height: 15px; margin: 0 0 3px; accent-color: var(--blue); }
.simpleChoice b { font-size: 14px; line-height: 1.35; }
.simpleChoice span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.showRecommendation { width: calc(100% - 64px); min-height: 50px; margin: 25px 32px 30px; padding: 0 25px; border: 0; border-radius: 25px; color: white; background: var(--blue); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.simpleGuideResult { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0; overflow: hidden; border-radius: 8px; background: white; box-shadow: 0 8px 28px rgba(15,47,76,.1); }
.guideResultImage { min-height: 450px; display: grid; place-items: center; padding: 35px; background: var(--soft); }
.guideResultImage img { width: 100%; height: 100%; object-fit: contain; }
.guideResultCopy { padding: 42px 38px; }
.guideResultCopy h2 { margin: 10px 0 13px; font-size: 31px; line-height: 1.15; }
.guideResultCopy > p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.guideResultCopy ul { margin: 20px 0; padding-left: 18px; color: #465564; font-size: 14px; line-height: 1.8; }
.guideResultPrice { padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 17px; }
.guideResultActions { display: flex; align-items: center; gap: 18px; margin-top: 23px; }
.guideResultActions a { display: inline-flex; padding: 13px 20px; color: white; border-radius: 23px; background: var(--blue); font-size: 14px; font-weight: 700; }
.guideResultActions button { padding: 0; border: 0; color: var(--blue); background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }

@media (max-width: 760px) {
  .purchaseInfoGrid { grid-template-columns: 1fr; gap: 28px; }
  .vehicleChoiceGrid { grid-template-columns: 1fr; }
  .simpleGuideResult { grid-template-columns: 1fr; }
  .guideResultImage { min-height: 310px; }
}

@media (max-width: 480px) {
  .mainProductImage { height: 320px; padding: 22px; }
  .productSummary h1 { font-size: 36px; }
  .purchaseRow { align-items: stretch; flex-direction: column; }
  .quantityControl { width: 100%; }
  .needChoiceGrid { grid-template-columns: 1fr; }
  .simpleGuideIntro, .simpleQuestion { padding-left: 20px; padding-right: 20px; }
  .showRecommendation { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; }
  .guideResultImage { min-height: 240px; padding: 24px; }
  .guideResultCopy { padding: 30px 22px; }
  .guideResultCopy h2 { font-size: 26px; }
  .guideResultActions { align-items: flex-start; flex-direction: column; }
}

/* Security Gateway */
.productSgwNote { display: flex; flex-direction: column; gap: 5px; margin: 0 0 17px; padding: 15px 16px; color: #103d66; border: 1px solid #b9d8ee; border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; background: #edf7ff; }
.productSgwNote b { font-size: 14px; }
.productSgwNote span { color: #4d677c; font-size: 14px; line-height: 1.55; }
.productCapabilities article { min-height: 185px; }
.productCapabilities h3 { margin: 24px 0 8px; font-size: 14px; line-height: 1.35; }

.sgwHero { padding: 24px 0 66px; color: white; background: linear-gradient(116deg, #052f57 0%, #005aa4 68%, #0873c3 100%); border-bottom: 5px solid var(--red); }
.sgwBreadcrumbs { padding-bottom: 42px; color: #b9d7ed; }
.sgwBreadcrumbs b { color: white; }
.sgwHeroGrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: center; }
.sgwHeroGrid > div:first-child > span { color: #a8d6f6; font-size: 14px; font-weight: 700; letter-spacing: .13em; }
.sgwHero h1 { max-width: 730px; margin: 14px 0 18px; font-size: clamp(40px, 5vw, 62px); line-height: 1.03; letter-spacing: -.045em; }
.sgwHeroGrid > div:first-child > p { max-width: 720px; margin: 0; color: #d8e8f4; font-size: 14px; line-height: 1.75; }
.sgwHeroActions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.sgwHeroActions .primaryButton { background: var(--red); }
.sgwHeroActions > a:last-child { font-size: 14px; font-weight: 700; }
.sgwLicenseCard { min-height: 330px; display: flex; flex-direction: column; justify-content: center; padding: 39px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; background: rgba(255,255,255,.11); box-shadow: 0 20px 45px rgba(0,25,52,.18); backdrop-filter: blur(5px); }
.sgwLicenseCard:after { content: "SGW"; position: absolute; right: -18px; bottom: -32px; color: rgba(255,255,255,.07); font-size: 110px; font-weight: 700; letter-spacing: -.08em; }
.sgwLicenseCard small { color: #9ed0f2; font-size: 14px; font-weight: 700; letter-spacing: .15em; }
.sgwLicenseCard > b { margin: 15px 0 13px; font-size: 28px; line-height: 1.15; }
.sgwLicenseCard p { margin: 0; color: #d9e9f4; font-size: 14px; line-height: 1.7; }
.sgwLicenseCard > span { margin-top: 25px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); color: #b8d8ec; font-size: 14px; line-height: 1.5; }
.sgwDefinition, .sgwCoverage { padding: 75px 0; }
.sgwDefinition .detailTwoCol h2, .sgwCoverage h2 { margin: 10px 0 0; font-size: 36px; line-height: 1.15; }
.sgwDefinition .detailTwoCol p, .sgwCoverage p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.78; }
.sgwImportant { display: grid; grid-template-columns: 65px 1fr; gap: 15px; margin-top: 23px; padding: 17px; border-left: 4px solid var(--red); background: var(--soft); }
.sgwImportant b { color: var(--blue); font-size: 14px; }
.sgwImportant span { color: #4f6070; font-size: 14px; line-height: 1.65; }
.sgwStepsSection { padding: 70px 0; color: white; background: #112f4b; }
.sgwStepsSection .sectionTitleRow span { color: #99c9eb; }
.sgwSteps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.17); border-left: 1px solid rgba(255,255,255,.17); }
.sgwSteps article { min-height: 220px; padding: 25px; border-right: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.sgwSteps article > b { color: #82c5f3; font-size: 14px; }
.sgwSteps h3 { margin: 48px 0 10px; color: white; font-size: 17px; line-height: 1.3; }
.sgwSteps p { margin: 0; color: #b9ccdc; font-size: 14px; line-height: 1.65; }
.sgwCoverage { background: white; }
.sgwCoverageGrid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 70px; align-items: start; }
.sgwRequirements { padding: 31px; border-radius: 8px; color: white; background: var(--blue); }
.sgwRequirements h3 { margin: 0 0 18px; font-size: 22px; }
.sgwRequirements ul { margin: 0 0 23px; padding-left: 18px; color: #d7e8f4; font-size: 14px; line-height: 2; }
.sgwRequirements a { display: inline-flex; padding: 12px 18px; border-radius: 22px; color: var(--blue); background: white; font-size: 14px; font-weight: 700; }

@media (max-width: 1020px) {
  .sgwHeroGrid { gap: 40px; }
  .sgwSteps { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .sgwHero { padding-bottom: 48px; }
  .sgwBreadcrumbs { padding-bottom: 28px; }
  .sgwHeroGrid, .sgwCoverageGrid { grid-template-columns: 1fr; gap: 35px; }
  .sgwLicenseCard { min-height: 260px; }
  .sgwDefinition, .sgwCoverage { padding: 52px 0; }
  .sgwSteps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .sgwHero h1 { font-size: 38px; }
  .sgwHeroActions { align-items: flex-start; flex-direction: column; }
  .sgwLicenseCard { padding: 28px 24px; }
  .sgwSteps { grid-template-columns: 1fr; }
  .sgwDefinition .detailTwoCol h2, .sgwCoverage h2 { font-size: 30px; }
  .sgwImportant { grid-template-columns: 1fr; gap: 6px; }
}

/* Brochure-led catalog expansion */
.storeHeroCopy { flex-direction: column; }
.heroPrice { display: inline-flex; margin-top: 20px; color: white; font-size: 22px; font-weight: 600; }

.blueTechBand { padding: 72px 0; background: #071f36; color: white; }
.blueTechBand .sectionTitleRow h2 { color: white; }
.blueTechBand .sectionTitleRow > div > span { color: #8fc8ef; }
.blueTechBand .headingAside { color: rgba(255,255,255,.7); }
.blueTechFeatureLayout { display: grid; grid-template-columns: minmax(300px,.82fr) minmax(0,1.45fr); border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
.blueTechDevice { min-width: 0; min-height: 430px; display: grid; grid-template-rows: 1fr auto; margin: 0; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); background: #0a2944; }
.blueTechDevice > div { min-height: 0; display: grid; place-items: center; padding: 24px 34px 10px; overflow: hidden; background: radial-gradient(circle at 48% 46%,rgba(41,120,177,.22),transparent 64%); }
.blueTechDevice img { width: 100%; height: 315px; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(0,0,0,.32)); }
.blueTechDevice figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 1px solid rgba(255,255,255,.14); }
.blueTechDevice strong { color: white; font-size: 14px; }
.blueTechDevice span { max-width: 165px; color: rgba(255,255,255,.63); font-size: 14px; line-height: 1.45; text-align: right; }
.blueTechFeatureList { min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.blueTechFeatureList article { min-width: 0; min-height: 107px; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 15px; padding: 19px 20px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.blueTechFeatureList article > b { padding-top: 2px; color: #8fc8ef; font-size: 14px; font-weight: 600; }
.blueTechFeatureList h3 { margin: 0 0 7px; color: white; font-size: 15px; line-height: 1.25; }
.blueTechFeatureList p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.55; }

.advancedProgram { padding: 70px 0; background: white; }
.advancedProgramGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.advancedProgramCard { min-height: 520px; display: grid; grid-template-rows: 1fr 220px; overflow: hidden; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.advancedProgramCard > div { display: flex; flex-direction: column; padding: 38px; }
.advancedProgramCard span { color: var(--blue); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.advancedProgramCard h2 { margin: 12px 0; font-size: 31px; line-height: 1.2; }
.advancedProgramCard p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.advancedProgramCard a { align-self: flex-start; margin-top: auto; padding-top: 24px; color: var(--blue); font-size: 14px; font-weight: 600; }
.advancedProgramCard img { width: 100%; height: 220px; padding: 24px; background: var(--soft); object-fit: contain; }
.academyProgramCard { background: #f8fafc; }

.shopJumpRail { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.shopJumpRail a { padding: 9px 15px; color: var(--blue); background: rgba(0,94,210,.08); border-radius: 20px; font-size: 14px; font-weight: 500; }
.shopJumpRail a:hover { color: white; background: var(--blue); }
.shopCategoryGroup { margin: 0 0 58px; scroll-margin-top: 70px; }
.shopCategoryGroup:last-child { margin-bottom: 0; }
.shopGroupHeading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.shopGroupHeading span { color: var(--blue); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.shopGroupHeading h2 { margin: 5px 0 0; font-size: 26px; line-height: 1.25; }
.shopGroupHeading > a { color: var(--blue); font-size: 14px; font-weight: 600; }
.shopCategoryGroup .catalogBody p { min-height: 85px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.shopCategoryGroup.singleProductGroup .shopGrid { grid-template-columns: minmax(0,1fr); }
.shopCategoryGroup.singleProductGroup .catalogCard { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.15fr); }
.shopCategoryGroup.singleProductGroup .catalogImage { min-height: 330px; height: 100%; }
.shopCategoryGroup.singleProductGroup .catalogBody p { min-height: 0; }

.productIncluded { margin: 0 0 18px; padding: 16px 18px; background: var(--soft); border-radius: 8px; }
.productIncluded > b { display: block; margin-bottom: 9px; color: var(--blue); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.productIncluded ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.productIncluded li { position: relative; padding-left: 13px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.productIncluded li:before { content: ""; width: 5px; height: 5px; position: absolute; left: 0; top: 5px; border-radius: 50%; background: var(--blue); }

.sgwBrandsSection { padding: 72px 0; background: var(--soft); }
.sgwBrandGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.sgwBrandGrid article { min-height: 215px; padding: 26px; background: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,.08); }
.sgwBrandGrid article > b { color: var(--blue); font-size: 14px; }
.sgwBrandGrid h3 { margin: 35px 0 8px; font-size: 18px; }
.sgwBrandGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

@media (max-width: 1020px) {
  .blueTechFeatureLayout { grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); }
  .blueTechDevice { min-height: 385px; }
  .blueTechDevice img { height: 270px; }
  .blueTechFeatureList article { grid-template-columns: 52px minmax(0,1fr); padding: 17px 16px; }
  .advancedProgramCard { grid-template-rows: 1fr 190px; }
  .advancedProgramCard img { height: 190px; }
  .sgwBrandGrid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .blueTechBand { padding: 52px 0; }
  .blueTechFeatureLayout { grid-template-columns: 1fr; }
  .blueTechDevice { min-height: 280px; grid-template-rows: 220px auto; }
  .blueTechDevice > div { padding: 12px 28px 0; }
  .blueTechDevice img { height: 210px; }
  .advancedProgramGrid { grid-template-columns: 1fr; }
  .shopGroupHeading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .productIncluded ul { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .heroPrice { font-size: 19px; }
  .blueTechDevice { min-height: 245px; grid-template-rows: 185px auto; }
  .blueTechDevice > div { padding: 8px 18px 0; }
  .blueTechDevice img { height: 178px; }
  .blueTechDevice figcaption { align-items: flex-start; flex-direction: column; gap: 4px; padding: 13px 15px; }
  .blueTechDevice span { max-width: none; text-align: left; }
  .blueTechFeatureList article { min-height: 0; grid-template-columns: 1fr; gap: 8px; padding: 14px 12px 15px; }
  .blueTechFeatureList article > b { font-size: 14px; }
  .blueTechFeatureList h3 { margin-bottom: 5px; font-size: 14px; }
  .blueTechFeatureList p { font-size: 14px; line-height: 1.45; }
  .advancedProgramCard { min-height: 0; grid-template-rows: auto 180px; }
  .advancedProgramCard > div { padding: 30px 24px; }
  .advancedProgramCard h2 { font-size: 27px; }
  .advancedProgramCard img { height: 180px; }
  .shopJumpRail { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .shopJumpRail a { flex: 0 0 auto; }
  .sgwBrandGrid { grid-template-columns: 1fr; }
}

/* Product variants, download center and package configurator */
.productPurchasePanel { margin-top: 8px; }
.variantPicker { margin: 18px 0 20px; padding-top: 19px; border-top: 1px solid var(--line); }
.variantHeading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; margin-bottom: 15px; }
.variantHeading span, .decisionGrid article > span, .downloadChecklist > span, .configSummary > span, .configQuestion > span, .homeToolCards span { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .11em; }
.variantHeading h2 { margin: 4px 0 0; font-size: 18px; line-height: 1.2; }
.variantHeading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.variantGrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.variantCard { min-height: 155px; display: flex; flex-direction: column; align-items: flex-start; padding: 15px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; cursor: pointer; text-align: left; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.variantCard:hover, .variantCard.selected { border-color: var(--blue); background: #f2f8ff; box-shadow: 0 5px 16px rgba(0,94,210,.1); }
.variantCard > span { min-height: 15px; color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .09em; }
.variantCard > b { margin: 4px 0 7px; font-size: 14px; line-height: 1.3; }
.variantCard > strong { color: var(--blue); font-size: 15px; }
.variantCard > small { margin-top: 3px; color: #738290; font-size: 14px; }
.variantCard > p { margin: auto 0 0; padding-top: 11px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.selectedVariantSummary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 12px 14px; color: white; border-radius: 7px; background: #0c3558; }
.selectedVariantSummary span, .selectedVariantSummary small { color: #bcd2e3; font-size: 14px; }
.selectedVariantSummary b { font-size: 14px; }
.selectedVariantSummary strong { font-size: 14px; }
.selectedVariantSummary small { grid-column: 2 / 4; }
.productDecisionSection { padding-top: 0; }
.decisionGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.decisionGrid article { min-height: 230px; padding: 31px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.decisionGrid article:last-child { background: var(--soft); }
.decisionGrid h2 { margin: 26px 0 10px; font-size: 23px; }
.decisionGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

.downloadHero { padding: 74px 0; color: white; background: linear-gradient(120deg, #062c51 0%, #005eb8 72%, #0877c8 100%); border-bottom: 5px solid var(--red); }
.downloadHeroGrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }
.downloadHero h1, .configuratorHero h1 { max-width: 760px; margin: 13px 0 18px; color: white; font-size: clamp(42px,5vw,64px); line-height: 1.03; letter-spacing: -.045em; }
.downloadHeroGrid > div > p, .configuratorHero .container > p { max-width: 760px; margin: 0; color: #d6e7f4; font-size: 14px; line-height: 1.75; }
.downloadActions { display: flex; gap: 12px; margin-top: 28px; }
.downloadActions .primaryButton { background: var(--red); }
.downloadHeroGrid > div > small { max-width: 660px; display: block; margin-top: 14px; color: #b8d4e9; font-size: 14px; line-height: 1.6; }
.downloadChecklist { padding: 34px; color: var(--ink); border-radius: 8px; background: white; box-shadow: 0 22px 45px rgba(0,24,50,.2); }
.downloadChecklist h2 { margin: 8px 0 22px; font-size: 26px; }
.downloadChecklist ul { margin: 0; padding: 0; list-style: none; }
.downloadChecklist li { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-top: 1px solid var(--line); }
.downloadChecklist li b { font-size: 14px; }
.downloadChecklist li span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.detailHeading > p { max-width: 760px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.installSteps { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 30px; background: var(--line); border: 1px solid var(--line); }
.installSteps article { min-height: 190px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 27px; background: white; }
.installSteps article > b { color: var(--blue); font-size: 14px; }
.installSteps h3 { margin: 0 0 8px; font-size: 17px; }
.installSteps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.requirementsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.requirementsGrid > article { overflow: hidden; padding: 31px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.requirementsGrid > article > span { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.requirementsGrid h3 { margin: 8px 0 22px; font-size: 24px; }
.requirementsGrid dl { margin: 0; }
.requirementsGrid dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.requirementsGrid dt { color: var(--muted); font-size: 14px; }
.requirementsGrid dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.recommendedRequirement { border-top: 5px solid var(--blue) !important; }
.softwareRequirements, .windowsCta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; padding: 20px 24px; border-left: 4px solid var(--blue); background: white; }
.softwareRequirements b, .windowsCta b { font-size: 14px; }
.softwareRequirements span, .windowsCta span { color: var(--muted); font-size: 14px; line-height: 1.6; }
.windowsCta > div { display: flex; flex-direction: column; gap: 5px; }
.dsWindowsSection { background: #f2f7fb; }
.compactRequirements { margin-top: 25px; }
.compactRequirements > article { padding: 26px; }
.downloadHelp { padding: 55px 0; color: white; background: #0a2f50; }
.downloadHelp .container { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.downloadHelp span { color: #8fc8ef; font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.downloadHelp h2 { margin: 9px 0; color: white; font-size: 30px; }
.downloadHelp p { max-width: 780px; margin: 0; color: #c3d8e7; font-size: 14px; line-height: 1.7; }
.lightButton { flex: 0 0 auto; padding: 13px 21px; color: var(--blue); border-radius: 24px; background: white; font-size: 14px; font-weight: 700; }

.configuratorHero { padding: 72px 0 56px; color: white; background: #0a2f50; border-bottom: 5px solid var(--red); }
.configuratorBenefits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.configuratorBenefits span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.26); border-radius: 20px; color: #d9e9f4; font-size: 14px; }
.configuratorMain { padding: 58px 0 80px; background: var(--soft); }
.configuratorLayout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr); gap: 26px; align-items: start; }
.configuratorChoices { display: flex; flex-direction: column; gap: 18px; }
.configuratorSection { min-width: 0; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px; padding: 29px; overflow: hidden; border-radius: 8px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.06); }
.configuratorSection[hidden] { display: none; }
.configNumber { color: var(--blue); font-size: 14px; font-weight: 700; }
.configQuestion h2 { margin: 6px 0; font-size: 23px; }
.configQuestion p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.configQuestion, .configOptions, .periodOptions, .configToggle { min-width: 0; grid-column: 2; width: 100%; }
.configOptions { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 10px; }
.configOptions.threeOptions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.configOptions button, .periodOptions button, .configToggle { border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; cursor: pointer; font: inherit; text-align: left; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.configOptions button { min-width: 0; max-width: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 17px; overflow: hidden; white-space: normal; overflow-wrap: break-word; word-break: normal; }
.configOptions button:hover, .configOptions button.selected, .periodOptions button.selected, .configToggle.selected { border-color: var(--blue); background: #f1f8ff; box-shadow: 0 5px 15px rgba(0,94,210,.09); }
.configOptions button b { max-width: 100%; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: break-word; }
.configOptions button span { max-width: 100%; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: break-word; }
.configOptions button strong { margin-top: auto; color: var(--blue); font-size: 14px; }
.periodOptions { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 10px; }
.periodOptions button { min-height: 76px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.periodOptions b { color: var(--blue); font-size: 23px; }
.periodOptions span { color: var(--muted); font-size: 14px; }
.compactConfigSection { align-items: center; }
.configToggle { min-height: 52px; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 0 17px; }
.configToggle span { width: 25px; height: 25px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--blue); }
.configToggle b { font-size: 14px; }
.configSummary { position: sticky; top: 25px; padding: 30px; border-radius: 8px; color: white; background: #0a2f50; box-shadow: 0 15px 35px rgba(5,35,62,.2); }
.configSummary > span { color: #8fc8ef; }
.configSummary h2 { margin: 8px 0 22px; color: white; font-size: 26px; }
.configSummaryRows { border-top: 1px solid rgba(255,255,255,.18); }
.configSummaryRows > div { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.configSummaryRows > div > div { display: flex; flex-direction: column; gap: 4px; }
.configSummaryRows a { color: white; font-size: 14px; font-weight: 700; }
.configSummaryRows small { color: #afc9dc; font-size: 14px; line-height: 1.45; }
.configSummaryRows b { color: #cae8fc; font-size: 14px; white-space: nowrap; }
.configTotal { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0 8px; }
.configTotal span { color: #b8d3e5; font-size: 14px; }
.configTotal strong { font-size: 21px; }
.configSummary > p { margin: 4px 0 18px; color: #a8c2d5; font-size: 14px; line-height: 1.55; }
.configSummary .addToCartButton { width: 100%; background: var(--red); }
.configAdded { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding: 13px; color: #1f6543; border-radius: 6px; background: #edfaf3; }
.configAdded b { font-size: 14px; }
.configAdded span { font-size: 14px; line-height: 1.45; }
.configSupportLink { display: block; margin-top: 16px; color: white; font-size: 14px; font-weight: 700; text-align: center; }
.homeToolCards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.homeToolCards > a { min-height: 245px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: white; transition: transform .2s ease, box-shadow .2s ease; }
.homeToolCards > a:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,47,91,.11); }
.homeToolCards h3 { max-width: 540px; margin: 28px 0 9px; font-size: 22px; line-height: 1.3; }
.homeToolCards p { max-width: 560px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.homeToolCards b { margin-top: auto; padding-top: 25px; color: var(--blue); font-size: 14px; }

@media (max-width: 1020px) {
  .downloadHeroGrid { grid-template-columns: 1fr 380px; gap: 35px; }
  .configuratorLayout { grid-template-columns: 1fr 320px; }
  .configOptions.threeOptions { grid-template-columns: 1fr; }
  .configOptions.threeOptions button { min-height: 95px; }
}

@media (max-width: 760px) {
  .variantHeading, .decisionGrid, .downloadHeroGrid, .requirementsGrid, .configuratorLayout, .homeToolCards { grid-template-columns: 1fr; }
  .downloadHero { padding: 52px 0; }
  .downloadChecklist { margin-top: 5px; }
  .installSteps { grid-template-columns: 1fr; }
  .softwareRequirements, .windowsCta, .downloadHelp .container { align-items: flex-start; flex-direction: column; }
  .configSummary { position: static; }
  .configOptions.twoByTwo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .variantGrid { grid-template-columns: 1fr; }
  .variantCard { min-height: 135px; }
  .selectedVariantSummary { grid-template-columns: 1fr auto; }
  .selectedVariantSummary span { grid-column: 1 / 3; }
  .selectedVariantSummary small { grid-column: 1 / 3; }
  .decisionGrid article { min-height: 0; padding: 25px 22px; }
  .downloadHero h1, .configuratorHero h1 { font-size: 38px; }
  .downloadActions { align-items: flex-start; flex-direction: column; }
  .requirementsGrid > article, .downloadChecklist { padding: 24px 20px; }
  .requirementsGrid dl > div { grid-template-columns: 85px 1fr; }
  .installSteps article { grid-template-columns: 36px 1fr; padding: 22px 18px; }
  .configuratorSection { grid-template-columns: 36px 1fr; padding: 23px 18px; }
  .configOptions, .configOptions.twoByTwo { grid-template-columns: 1fr; }
  .periodOptions { grid-template-columns: repeat(2,1fr); }
  .configSummary { padding: 25px 20px; }
  .homeToolCards > a { min-height: 220px; padding: 25px 22px; }
}

/* Progressive configurator */
.progressiveConfigurator .configuratorChoices { gap: 12px; }
.configProgress { display: grid; gap: 13px; margin-bottom: 5px; padding: 21px 24px; border: 1px solid #d9e6f0; border-radius: 8px; background: #f7fbff; }
.configProgress > div:first-child { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.configProgress span { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.configProgress b { color: var(--ink); font-size: 14px; font-weight: 600; }
.configProgressTrack { height: 5px; overflow: hidden; border-radius: 6px; background: #dbe8f1; }
.configProgressTrack i { height: 100%; display: block; border-radius: inherit; background: var(--blue); transition: width .35s ease; }
.activeConfigStep { border-top: 4px solid var(--blue); animation: configReveal .25s ease both; }
@keyframes configReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.configNext { grid-column: 2; justify-self: end; margin-top: 17px; padding: 12px 19px; border: 0; border-radius: 23px; color: white; background: var(--blue); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; transition: opacity .2s ease, transform .2s ease; }
.configNext:hover:not(:disabled) { transform: translateY(-1px); }
.configNext:disabled { cursor: not-allowed; opacity: .35; }
.finishConfig { background: var(--red); }
.completedConfigStep { width: 100%; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px; padding: 16px 29px; border: 1px solid #d7e4ed; border-radius: 8px; color: var(--ink); background: white; cursor: pointer; font: inherit; text-align: left; }
.completedConfigStep > span { color: var(--blue); font-size: 14px; font-weight: 700; }
.completedConfigStep > div { display: flex; flex-direction: column; gap: 3px; }
.completedConfigStep small { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.completedConfigStep b { font-size: 14px; }
.completedConfigStep em { color: var(--blue); font-size: 14px; font-style: normal; font-weight: 700; }
.emptyConfigSummary, .summaryLocked { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(255,255,255,.06); }
.emptyConfigSummary b, .summaryLocked b { color: white; font-size: 14px; }
.emptyConfigSummary span, .summaryLocked span { color: #afc9dc; font-size: 14px; line-height: 1.5; }
.summaryLocked { margin-top: 18px; }
.completedSummary { outline: 2px solid rgba(143,200,239,.28); }

/* On-site Delphi download library */
.downloadCenterSection { scroll-margin-top: 60px; background: #f4f8fb; }
.downloadLibrary { margin-top: 34px; }
.downloadGroup { margin-top: 48px; }
.downloadGroup:first-child { margin-top: 0; }
.downloadGroupHeading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; margin-bottom: 17px; padding-bottom: 15px; border-bottom: 1px solid #cfdce6; }
.downloadGroupHeading h3 { margin: 0; font-size: 22px; }
.downloadGroupHeading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.downloadFileGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.downloadFileCard { min-height: 205px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr auto; gap: 0 16px; padding: 23px; border: 1px solid #d5e0e8; border-radius: 8px; background: white; box-shadow: 0 4px 13px rgba(13,50,78,.04); }
.downloadFileIcon { width: 42px; height: 42px; display: grid; place-items: center; color: white; border-radius: 6px; background: #0a4e82; font-size: 14px; font-weight: 800; letter-spacing: .05em; }
.downloadFileCopy > span { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.downloadFileCopy h4 { margin: 5px 0 8px; font-size: 14px; line-height: 1.3; }
.downloadFileCopy h4 b { color: var(--blue); font-weight: 600; }
.downloadFileCopy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.downloadFileMeta { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 12px; }
.downloadFileMeta span { color: #687b89; font-size: 14px; }
.downloadFileMeta span + span:before { content: "·"; margin-right: 13px; color: #a4b2bd; }
.downloadButton { grid-column: 2; justify-self: start; margin-top: 18px; padding: 9px 17px; border: 1px solid var(--blue); border-radius: 20px; color: var(--blue); background: white; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.downloadButton:hover:not(:disabled) { color: white; background: var(--blue); }
.downloadButton:disabled { cursor: wait; opacity: .55; }
.downloadPageError { margin-top: 18px; padding: 14px 16px; color: #8b2230; border-left: 4px solid var(--red); background: #fff0f1; font-size: 14px; }
.downloadModalBackdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(3,25,43,.72); backdrop-filter: blur(3px); }
.downloadModal { width: min(570px,100%); position: relative; padding: 36px; border-radius: 10px; background: white; box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.downloadModal > span { color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.downloadModal h2 { margin: 8px 35px 11px 0; font-size: 26px; }
.downloadModal > p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.downloadModalClose { width: 34px; height: 34px; position: absolute; top: 18px; right: 18px; border: 0; border-radius: 50%; color: var(--ink); background: #edf3f7; cursor: pointer; font-size: 21px; }
.downloadModal form { display: grid; gap: 14px; }
.downloadModal label { display: flex; flex-direction: column; gap: 4px; }
.downloadModal label b { font-size: 14px; }
.downloadModal label span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.downloadModal input { margin-top: 4px; padding: 12px 13px; border: 1px solid #cbd8e2; border-radius: 6px; color: var(--ink); background: white; font: inherit; font-size: 14px; }
.downloadModal input:focus { border-color: var(--blue); outline: 3px solid rgba(0,94,184,.1); }
.downloadModal form .primaryButton { justify-self: start; border: 0; cursor: pointer; }
.downloadModal form .primaryButton:disabled { cursor: wait; opacity: .55; }
.downloadModalError { padding: 10px 12px; color: #8b2230; border-radius: 5px; background: #fff0f1; font-size: 14px; line-height: 1.5; }
.downloadModal > small { display: block; margin-top: 17px; padding-top: 15px; color: #71818c; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }

/* Rich product usage stories */
.productStorySection { scroll-margin-top: 60px; background: #0a2f50; color: white; }
.productStorySection .detailHeading .subLabel { color: #8fc8ef; }
.productStorySection .detailHeading h2 { color: white; }
.productStorySection .detailHeading p { color: #c4d8e7; }
.productStoryGrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 31px; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.17); }
.productStoryGrid article { min-height: 160px; display: grid; grid-template-columns: 38px 1fr; gap: 16px; padding: 25px; background: #0a2f50; }
.productStoryGrid article > span { color: #8fc8ef; font-size: 14px; font-weight: 700; }
.productStoryGrid h3 { margin: 0 0 8px; color: white; font-size: 16px; }
.productStoryGrid p { margin: 0; color: #bcd2e2; font-size: 14px; line-height: 1.65; }

@media (max-width: 760px) {
  .configProgress > div:first-child, .downloadGroupHeading { align-items: flex-start; grid-template-columns: 1fr; flex-direction: column; gap: 6px; }
  .downloadFileGrid, .productStoryGrid { grid-template-columns: 1fr; }
  .downloadFileCard { min-height: 0; }
}

@media (max-width: 480px) {
  .configNext { grid-column: 1 / 3; width: 100%; }
  .completedConfigStep { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 15px 17px; }
  .configProgress { padding: 17px; }
  .downloadFileCard { grid-template-columns: 36px 1fr; padding: 18px; }
  .downloadFileIcon { width: 36px; height: 36px; }
  .downloadModal { padding: 29px 21px 23px; }
  .downloadModal h2 { font-size: 22px; }
  .productStoryGrid article { min-height: 0; padding: 22px 18px; }
}

/* Clear product structure, ADAS buying guide and direct download states */
.packageGuideNote { margin: 16px 0 0; padding: 14px 16px; color: #27465f; border-left: 4px solid var(--blue); background: #e9f4fc; font-size: 14px; line-height: 1.65; }
.adasBuyingGuide { display: grid; grid-template-columns: .9fr 1.1fr; gap: 35px; margin-bottom: 24px; padding: 31px; color: white; border-radius: 8px; background: linear-gradient(128deg,#082f53,#045f9f); }
.adasBuyingGuide > div > span, .adasCoverageNote span { color: #91c9ee; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.adasBuyingGuide h2 { margin: 9px 0 11px; color: white; font-size: 26px; line-height: 1.15; }
.adasBuyingGuide p { margin: 0; color: #c8ddea; font-size: 14px; line-height: 1.75; }
.adasBuyingGuide ol { margin: 0; padding: 0; list-style: none; }
.adasBuyingGuide li { display: flex; flex-direction: column; gap: 5px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.18); }
.adasBuyingGuide li:first-child { border-top: 0; }
.adasBuyingGuide li b { font-size: 14px; }
.adasBuyingGuide li span { color: #b9d2e3; font-size: 14px; line-height: 1.55; }
.adasCoverageNote { display: grid; grid-template-columns: .75fr 1.25fr; gap: 35px; margin-top: 25px; padding: 27px; border: 1px solid var(--line); background: var(--soft); }
.adasCoverageNote h2 { margin: 8px 0 0; font-size: 23px; }
.adasCoverageNote p { margin: 0 0 11px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.adasCoverageNote a { color: var(--blue); font-size: 14px; font-weight: 800; }
.downloadPending { color: #607585; border-color: #c4d1da; background: #edf3f7; cursor: default; }
.downloadAvailabilityNote { display: flex; align-items: flex-start; gap: 22px; margin-top: 23px; padding: 19px 22px; border-left: 4px solid var(--blue); background: white; }
.downloadAvailabilityNote b { flex: 0 0 210px; font-size: 14px; }
.downloadAvailabilityNote span { color: var(--muted); font-size: 14px; line-height: 1.65; }

/* DS-HUB and Pass-Thru knowledge pages */
.knowledgeHero { padding: 67px 0; overflow: hidden; color: white; background: linear-gradient(120deg,#062d51,#005ea8); border-bottom: 5px solid var(--red); }
.knowledgeHeroGrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.knowledgeHeroGrid > div:first-child > span { color: #9bd0f2; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.knowledgeHero h1 { max-width: 760px; margin: 13px 0 17px; color: white; font-size: clamp(40px,4.8vw,62px); line-height: 1.03; letter-spacing: -.04em; }
.knowledgeHero p { max-width: 720px; margin: 0; color: #d0e4f1; font-size: 14px; line-height: 1.75; }
.knowledgeHeroGrid > div:first-child > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.knowledgeHero .primaryButton { background: var(--red); }
.knowledgeHeroGrid > div:last-child { min-height: 330px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(circle,#207bbb 0,rgba(17,98,157,.25) 46%,rgba(2,35,64,.18) 75%); }
.knowledgeHeroGrid > div:last-child img { width: 86%; max-height: 310px; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(0,0,0,.24)); }
.passThruHero { background: linear-gradient(120deg,#081f38,#0a466f 72%,#075f88); }
.hubToolGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 29px; border: 1px solid var(--line); background: var(--line); }
.hubToolGrid article { min-height: 190px; padding: 25px; background: white; }
.hubToolGrid article > b { color: var(--blue); font-size: 14px; }
.hubToolGrid h3 { margin: 26px 0 8px; font-size: 17px; }
.hubToolGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.compareKnowledgeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.compareKnowledgeGrid article { padding: 31px; border: 1px solid var(--line); border-top: 5px solid var(--blue); background: white; }
.compareKnowledgeGrid article:last-child { color: white; border-color: #0a2f50; border-top-color: var(--red); background: #0a2f50; }
.compareKnowledgeGrid article > span { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.compareKnowledgeGrid article:last-child > span { color: #8fc8ef; }
.compareKnowledgeGrid h3 { margin: 10px 0 19px; font-size: 22px; }
.compareKnowledgeGrid article:last-child h3 { color: white; }
.compareKnowledgeGrid ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 2; }
.compareKnowledgeGrid article:last-child ul { color: #c2d7e6; }

/* Blog and long-form knowledge base */
.blogFeatured { padding: 58px 0; background: #edf3f7; }
.blogFeaturedGrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 45px; align-items: center; }
.blogFeaturedGrid > div:first-child { min-height: 345px; display: grid; place-items: center; overflow: hidden; border: 1px solid #cedbe4; background: white; }
.blogFeaturedGrid img { width: 100%; height: 345px; object-fit: contain; }
.blogFeaturedGrid span { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.blogFeaturedGrid h2 { margin: 12px 0; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; }
.blogFeaturedGrid p { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.richBlogGrid { grid-template-columns: repeat(3,1fr); }
.richBlogGrid > a { padding: 0 22px 24px; overflow: hidden; }
.blogCardImage { height: 170px; margin: 0 -22px 21px; display: grid; place-items: center; overflow: hidden; background: #edf3f7; }
.blogCardImage img { width: 100%; height: 100%; object-fit: contain; }
.richBlogGrid h2 { font-size: 18px; }
.blogPostHero { padding: 31px 0 56px; color: white; background: linear-gradient(120deg,#082d50,#065d9c); border-bottom: 5px solid var(--red); }
.blogBreadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 31px; color: #acd0e7; font-size: 14px; }
.blogBreadcrumbs b { color: white; }
.blogPostHeroGrid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 55px; align-items: center; }
.blogPostHeroGrid > div:first-child > span { color: #9dd0ef; font-size: 14px; font-weight: 800; letter-spacing: .09em; }
.blogPostHero h1 { margin: 13px 0 16px; color: white; font-size: clamp(38px,4.8vw,60px); line-height: 1.04; letter-spacing: -.04em; }
.blogPostHero p { max-width: 720px; margin: 0; color: #d1e4f0; font-size: 14px; line-height: 1.75; }
.blogPostHeroImage { min-height: 320px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.blogPostHeroImage img { width: 100%; height: 320px; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0,0,0,.2)); }
.blogPostLayout { display: grid; grid-template-columns: 245px minmax(0,760px); justify-content: center; gap: 58px; padding-top: 60px; padding-bottom: 76px; }
.blogPostLayout > aside { align-self: start; position: sticky; top: 24px; padding: 22px; border: 1px solid var(--line); background: #f5f8fa; }
.blogPostLayout > aside > span { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.blogPostLayout > aside nav { display: flex; flex-direction: column; margin: 13px 0; border-top: 1px solid var(--line); }
.blogPostLayout > aside nav a { padding: 11px 0; color: #4f6474; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.blogPostLayout > aside > a { color: var(--blue); font-size: 14px; font-weight: 800; }
.blogPostIntro { margin: 0 0 42px; padding: 22px 25px; color: #1e435f; border-left: 5px solid var(--blue); background: #edf6fc; font-size: 14px; font-weight: 600; line-height: 1.75; }
.blogPostBody > section { scroll-margin-top: 30px; margin-top: 45px; }
.blogPostBody > section > span { color: var(--blue); font-size: 14px; font-weight: 800; }
.blogPostBody > section h2 { margin: 8px 0 17px; font-size: 29px; line-height: 1.18; }
.blogPostBody > section p { margin: 0 0 15px; color: #465966; font-size: 14px; line-height: 1.85; }
.blogPostBody > section ul { margin: 20px 0; padding: 19px 24px 19px 40px; background: var(--soft); }
.blogPostBody > section li { margin: 7px 0; color: #384e5e; font-size: 14px; line-height: 1.6; }
.blogPostCta { margin-top: 55px; padding: 33px; color: white; background: linear-gradient(125deg,#0a2f50,#075f9d); }
.blogPostCta > span { color: #91c9ee; font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.blogPostCta h2 { margin: 9px 0; color: white; font-size: 27px; }
.blogPostCta p { margin: 0; color: #c9ddea; font-size: 14px; line-height: 1.65; }
.blogPostCta > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.blogPostCta .primaryButton { background: var(--red); }
.relatedBlogPosts { padding: 65px 0; background: var(--soft); }
.compactBlogGrid { grid-template-columns: repeat(3,1fr); }

/* Knowledge block on the home page */
.homeKnowledgeSection { padding: 70px 0; background: #eef3f7; }
.homeKnowledgeGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.homeKnowledgeGrid > a { display: flex; flex-direction: column; min-height: 390px; padding: 0 24px 24px; overflow: hidden; border: 1px solid var(--line); background: white; transition: transform .2s ease,box-shadow .2s ease; }
.homeKnowledgeGrid > a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12,47,75,.1); }
.homeKnowledgeGrid > a > div { height: 180px; display: grid; place-items: center; margin: 0 -24px 21px; background: #f6f8fa; }
.homeKnowledgeGrid img { width: 100%; height: 100%; object-fit: contain; }
.homeKnowledgeGrid span { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.homeKnowledgeGrid h3 { margin: 9px 0; font-size: 19px; line-height: 1.3; }
.homeKnowledgeGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.homeKnowledgeGrid b { margin-top: auto; padding-top: 20px; color: var(--blue); font-size: 14px; }
.homeKnowledgeTools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.homeKnowledgeTools a { display: flex; flex-direction: column; gap: 5px; padding: 20px 23px; color: white; background: #0a2f50; }
.homeKnowledgeTools a:last-child { background: #075f9d; }
.homeKnowledgeTools b { font-size: 14px; }
.homeKnowledgeTools span { color: #bfd5e5; font-size: 14px; line-height: 1.55; }

@media (max-width: 1020px) {
  .richBlogGrid, .homeKnowledgeGrid { grid-template-columns: repeat(2,1fr); }
  .hubToolGrid { grid-template-columns: repeat(2,1fr); }
  .blogPostLayout { grid-template-columns: 215px minmax(0,1fr); gap: 35px; }
}

@media (max-width: 760px) {
  .adasBuyingGuide, .adasCoverageNote, .knowledgeHeroGrid, .blogFeaturedGrid, .blogPostHeroGrid, .blogPostLayout { grid-template-columns: 1fr; }
  .adasBuyingGuide, .knowledgeHeroGrid, .blogPostHeroGrid { gap: 25px; }
  .knowledgeHero { padding: 50px 0; }
  .knowledgeHeroGrid > div:last-child, .blogPostHeroImage { min-height: 245px; }
  .knowledgeHeroGrid > div:last-child img, .blogPostHeroImage img { max-height: 240px; height: 240px; }
  .hubToolGrid, .compareKnowledgeGrid, .compactBlogGrid, .homeKnowledgeTools { grid-template-columns: 1fr; }
  .blogPostLayout > aside { position: static; }
  .blogPostLayout { padding-top: 38px; }
  .blogFeaturedGrid > div:first-child, .blogFeaturedGrid img { min-height: 260px; height: 260px; }
  .downloadAvailabilityNote { flex-direction: column; gap: 7px; }
  .downloadAvailabilityNote b { flex-basis: auto; }
}

@media (max-width: 520px) {
  .richBlogGrid, .homeKnowledgeGrid { grid-template-columns: 1fr; }
  .adasBuyingGuide { padding: 24px 20px; }
  .knowledgeHero h1, .blogPostHero h1 { font-size: 37px; }
  .knowledgeHeroGrid > div:first-child > div, .blogPostCta > div { align-items: flex-start; flex-direction: column; }
  .hubToolGrid article { min-height: 0; }
  .blogPostBody > section h2 { font-size: 25px; }
  .blogPostCta { padding: 26px 21px; }
  .homeKnowledgeGrid > a { min-height: 350px; }
}

/* Original vs. counterfeit buyer protection */
.authenticityAlert { display: block; color: white; background: #8e102d; border-bottom: 1px solid rgba(255,255,255,.18); }
.authenticityAlert .container { min-height: 38px; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.authenticityAlert b { flex: 0 0 auto; padding: 4px 7px; color: #8e102d; background: white; letter-spacing: .08em; }
.authenticityAlert span { color: #ffe8ed; }
.authenticityAlert em { margin-left: auto; flex: 0 0 auto; color: white; font-style: normal; font-weight: 800; }
.authenticityAlert:hover em { text-decoration: underline; }

.authenticityHero { overflow: hidden; color: white; background: linear-gradient(123deg,#041f35 0%,#063b65 60%,#065992 100%); border-bottom: 7px solid var(--red); }
.authenticityHeroGrid { min-height: 660px; display: grid; grid-template-columns: 1.03fr .67fr; gap: 76px; align-items: center; padding-top: 60px; padding-bottom: 60px; }
.authenticityHeroGrid > div:first-child > span, .counterfeitDamageGrid > div:first-child > span, .originalBlueTechGrid > div:last-child > span { color: #99c9e9; font-size: 14px; font-weight: 900; letter-spacing: .16em; }
.authenticityHero h1 { max-width: 750px; margin: 15px 0 22px; color: white; font-size: clamp(48px,6vw,78px); line-height: .98; letter-spacing: -.05em; }
.authenticityLead { max-width: 715px; margin: 0; color: #d4e4ee; font-size: 16px; line-height: 1.75; }
.authenticityHeroActions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.authenticityHeroActions .secondaryButton, .originalBlueTechGrid .secondaryButton { color: white; }
.authenticityHeroGrid > div:first-child > small { max-width: 700px; display: block; margin-top: 25px; padding: 14px 17px; color: #b9d0df; border-left: 4px solid #8fc7ed; background: rgba(0,0,0,.16); font-size: 14px; line-height: 1.65; }
.authenticityComparisonFigure { margin: 0; overflow: hidden; position: relative; color: var(--ink); background: white; box-shadow: 25px 25px 0 rgba(255,255,255,.11); }
.comparisonLabels { display: grid; grid-template-columns: 1fr 1fr; }
.comparisonLabels b { padding: 11px; color: white; background: var(--blue); font-size: 14px; letter-spacing: .13em; text-align: center; }
.comparisonLabels b:last-child { background: var(--red); }
.authenticityComparisonFigure img { width: 100%; height: 500px; object-fit: cover; object-position: center; }
.authenticityComparisonFigure figcaption { padding: 12px 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.authenticityStatement { color: white; background: var(--red); }
.authenticityStatement .container { min-height: 112px; display: grid; grid-template-columns: 225px 1fr; gap: 40px; align-items: center; }
.authenticityStatement b { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.authenticityStatement p { margin: 0; padding-left: 39px; border-left: 1px solid rgba(255,255,255,.35); font-size: 14px; font-weight: 600; line-height: 1.65; }

.authenticityTable { margin-top: 32px; overflow: hidden; border: 1px solid var(--line); }
.authenticityTableHead, .authenticityTableRow { display: grid; grid-template-columns: .55fr 1.05fr 1.05fr; }
.authenticityTableHead { color: white; background: var(--blue-dark); }
.authenticityTableHead b { padding: 18px 20px; border-right: 1px solid rgba(255,255,255,.14); font-size: 14px; text-transform: uppercase; letter-spacing: .045em; }
.authenticityTableHead b:last-child { background: #7f1730; border-right: 0; }
.authenticityTableRow { border-top: 1px solid var(--line); background: white; }
.authenticityTableRow > * { margin: 0; padding: 18px 20px; border-right: 1px solid var(--line); }
.authenticityTableRow > *:last-child { border-right: 0; background: #fff5f6; }
.authenticityTableRow strong { color: var(--blue-dark); font-size: 14px; }
.authenticityTableRow p { color: #4a5b68; font-size: 14px; line-height: 1.7; }

.counterfeitDamageSection { color: white; background: #071f36; border-top: 8px solid var(--red); }
.counterfeitDamageGrid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 78px; }
.counterfeitDamageGrid h2 { max-width: 600px; margin: 13px 0 20px; color: white; font-size: 43px; line-height: 1.08; letter-spacing: -.035em; }
.counterfeitDamageGrid > div:first-child > p { color: #bdd1df; font-size: 14px; line-height: 1.8; }
.counterfeitDamageGrid blockquote { margin: 27px 0 0; padding: 21px 23px; color: white; border-left: 5px solid var(--red); background: rgba(255,255,255,.07); font-size: 19px; font-weight: 800; line-height: 1.45; }
.counterfeitDamagePoints { border-top: 1px solid rgba(255,255,255,.18); }
.counterfeitDamagePoints article { min-height: 145px; display: grid; grid-template-columns: 42px 1fr; column-gap: 17px; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.counterfeitDamagePoints article > b { grid-row: 1 / 3; color: var(--red); font-size: 14px; }
.counterfeitDamagePoints h3 { margin: 0 0 8px; color: white; font-size: 16px; }
.counterfeitDamagePoints p { margin: 0; color: #aec4d3; font-size: 14px; line-height: 1.7; }

.ds150CheckGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 31px; border: 1px solid var(--line); background: var(--line); }
.ds150CheckGrid article { min-height: 225px; padding: 27px; background: white; }
.ds150CheckGrid article > b { color: var(--red); font-size: 14px; }
.ds150CheckGrid h3 { margin: 46px 0 10px; font-size: 17px; }
.ds150CheckGrid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.officialSourceNote { display: flex; align-items: center; gap: 30px; margin-top: 20px; padding: 20px 23px; border-left: 5px solid var(--blue); background: #e7f1f8; }
.officialSourceNote > div { display: flex; flex-direction: column; gap: 5px; }
.officialSourceNote b { font-size: 14px; }
.officialSourceNote span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.officialSourceNote a { margin-left: auto; flex: 0 0 auto; color: var(--blue); font-size: 14px; font-weight: 900; }

.redFlagLayout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 75px; align-items: start; }
.redFlagLayout h2 { margin: 9px 0 12px; font-size: 39px; }
.redFlagLayout > div > p { margin: 0 0 23px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.redFlagLayout ul { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.redFlagLayout li { display: grid; grid-template-columns: 30px 1fr; gap: 15px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--line); }
.redFlagLayout li span { width: 27px; height: 27px; display: grid; place-items: center; color: white; background: var(--red); font-size: 14px; font-weight: 900; }
.redFlagLayout li p { margin: 2px 0 0; color: #455865; font-size: 14px; line-height: 1.65; }

.originalBlueTechSection { color: white; background: var(--blue); }
.originalBlueTechGrid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
.originalBlueTechGrid > div:first-child { min-height: 410px; display: grid; place-items: center; background: white; }
.originalBlueTechGrid img { width: 86%; max-height: 390px; object-fit: contain; }
.originalBlueTechGrid h2 { margin: 12px 0 17px; color: white; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; }
.originalBlueTechGrid p { color: #d0e2ed; font-size: 14px; line-height: 1.8; }
.originalBlueTechGrid > div:last-child > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.originalBlueTechGrid .primaryButton { background: var(--red); }

.authenticityFaq { max-width: 960px; margin-top: 28px; border-top: 1px solid var(--line); }
.authenticityFaq details { border-bottom: 1px solid var(--line); }
.authenticityFaq summary { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 30px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; }
.authenticityFaq summary::-webkit-details-marker { display: none; }
.authenticityFaq summary span { color: var(--red); font-size: 20px; transition: transform .2s ease; }
.authenticityFaq details[open] summary span { transform: rotate(45deg); }
.authenticityFaq details p { max-width: 830px; margin: -4px 0 0; padding: 0 45px 22px 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

.counterfeitReportSection { padding: 82px 0; color: white; background: #061f35; }
.counterfeitReportForm { padding: 46px; border-top: 7px solid var(--red); background: white; color: var(--ink); box-shadow: 0 25px 55px rgba(0,0,0,.2); }
.reportFormHeading { display: grid; grid-template-columns: .42fr 1.05fr 1fr; gap: 35px; align-items: start; margin-bottom: 34px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.reportFormHeading > span { color: var(--red); font-size: 14px; font-weight: 900; letter-spacing: .15em; }
.reportFormHeading h2 { margin: 0; font-size: 31px; line-height: 1.14; }
.reportFormHeading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.reportFormGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.reportFormGrid label { display: flex; flex-direction: column; gap: 5px; }
.reportFormGrid label > b { font-size: 14px; }
.reportFormGrid label > span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.reportFormGrid input, .reportFormGrid select, .reportFormGrid textarea { width: 100%; margin-top: 5px; padding: 12px 13px; color: var(--ink); background: white; border: 1px solid #c7d3dc; border-radius: 0; font: inherit; font-size: 14px; }
.reportFormGrid textarea { resize: vertical; line-height: 1.6; }
.reportFormGrid input:focus, .reportFormGrid select:focus, .reportFormGrid textarea:focus { border-color: var(--blue); outline: 3px solid rgba(0,75,135,.1); }
.fullField { grid-column: 1 / -1; }
.honeypot { width: 1px !important; height: 1px !important; overflow: hidden !important; position: absolute !important; left: -10000px !important; }
.reportConsent { display: grid !important; grid-template-columns: 18px 1fr; align-items: start; gap: 9px !important; padding: 15px 17px; background: var(--soft); }
.reportConsent input { width: 16px; height: 16px; margin: 1px 0 0; }
.reportConsent span { font-size: 14px !important; line-height: 1.65 !important; }
.reportConsent a { color: var(--blue); font-weight: 800; text-decoration: underline; }
.reportSubmitRow { display: flex; align-items: center; gap: 22px; margin-top: 25px; }
.reportSubmitRow button { border: 0; cursor: pointer; }
.reportSubmitRow button:disabled { cursor: wait; opacity: .6; }
.reportSubmitRow small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.reportMessage { margin-top: 18px; padding: 13px 15px; font-size: 14px; line-height: 1.55; }
.reportMessage.success { color: #146036; background: #e8f7ee; border-left: 4px solid #1c8b4d; }
.reportMessage.error { color: #8b2230; background: #fff0f1; border-left: 4px solid var(--red); }
.legalCopy { max-width: 880px; }
.legalCopy h2 { margin: 36px 0 10px; font-size: 24px; }
.legalCopy h2:first-child { margin-top: 0; }
.legalCopy p { color: var(--muted); font-size: 14px; line-height: 1.85; }
.legalCopy p a { color: var(--blue); font-weight: 800; }
.legalCopy > a { margin-top: 20px; }
.productAuthenticityNote { display: flex; flex-direction: column; gap: 4px; margin: 17px 0; padding: 15px 17px; border-left: 5px solid var(--red); background: #fff1f3; }
.productAuthenticityNote b { color: #8e102d; font-size: 14px; }
.productAuthenticityNote span { color: #5d4a4e; font-size: 14px; line-height: 1.55; }

@media (max-width: 1020px) {
  .authenticityHeroGrid { grid-template-columns: 1fr .7fr; gap: 40px; }
  .authenticityComparisonFigure img { height: 440px; }
  .ds150CheckGrid { grid-template-columns: repeat(2,1fr); }
  .counterfeitDamageGrid, .redFlagLayout, .originalBlueTechGrid { gap: 45px; }
  .reportFormHeading { grid-template-columns: .35fr 1fr 1fr; gap: 24px; }
}

@media (max-width: 760px) {
  .authenticityAlert .container { min-height: 45px; gap: 10px; }
  .authenticityAlert span { display: none; }
  .authenticityAlert em { font-size: 14px; }
  .authenticityHeroGrid, .counterfeitDamageGrid, .redFlagLayout, .originalBlueTechGrid { grid-template-columns: 1fr; }
  .authenticityHeroGrid { gap: 38px; padding-top: 48px; padding-bottom: 48px; }
  .authenticityHero h1 { font-size: 51px; }
  .authenticityComparisonFigure { max-width: 510px; }
  .authenticityComparisonFigure img { height: auto; }
  .authenticityStatement .container { grid-template-columns: 1fr; gap: 10px; padding-top: 24px; padding-bottom: 24px; }
  .authenticityStatement p { padding: 0; border-left: 0; }
  .authenticityTable { overflow-x: auto; }
  .authenticityTableHead, .authenticityTableRow { min-width: 760px; }
  .counterfeitDamageGrid h2, .originalBlueTechGrid h2 { font-size: 36px; }
  .officialSourceNote, .reportSubmitRow { align-items: flex-start; flex-direction: column; }
  .officialSourceNote a { margin-left: 0; }
  .originalBlueTechGrid > div:first-child { min-height: 330px; }
  .reportFormHeading { grid-template-columns: 1fr; gap: 11px; }
  .counterfeitReportForm { padding: 32px 25px; }
}

@media (max-width: 520px) {
  .authenticityAlert b { font-size: 14px; }
  .authenticityAlert em { margin-left: 0; }
  .authenticityHero h1 { font-size: 42px; }
  .authenticityLead { font-size: 14px; }
  .authenticityHeroActions { align-items: stretch; flex-direction: column; }
  .authenticityHeroActions .secondaryButton { justify-content: center; }
  .ds150CheckGrid, .reportFormGrid { grid-template-columns: 1fr; }
  .fullField { grid-column: auto; }
  .ds150CheckGrid article { min-height: 0; }
  .counterfeitDamageGrid blockquote { font-size: 16px; }
  .originalBlueTechGrid > div:first-child { min-height: 270px; }
  .originalBlueTechGrid > div:last-child > div { align-items: stretch; flex-direction: column; }
  .originalBlueTechGrid .secondaryButton { justify-content: center; }
  .counterfeitReportSection { padding: 50px 0; }
  .counterfeitReportForm { padding: 27px 18px; }
  .reportFormHeading h2 { font-size: 27px; }
}

/* Navigation hierarchy and clearer home-page sections */
.primaryNav { position: relative; }
.primaryNav .originalNavLink { color: var(--blue); font-weight: 600; }
.primaryNav .originalNavLink:hover { color: var(--blue-dark); }
.primaryNav .reportCopyNav { min-height: 42px; align-self: center; margin-left: 10px; padding: 0 18px; color: white; background: var(--blue-dark); border-radius: 22px; font-size: 14px; font-weight: 600; }
.primaryNav .reportCopyNav:hover { color: white; background: var(--blue); }
.desktopMoreNav { height: 80px; position: relative; }
.desktopMoreNav > summary { height: 80px; display: flex; align-items: center; gap: 6px; padding: 0 14px; cursor: pointer; list-style: none; font-size: 15px; }
.desktopMoreNav > summary::-webkit-details-marker { display: none; }
.desktopMoreNav > summary span { color: var(--blue); font-size: 14px; transition: transform .2s ease; }
.desktopMoreNav[open] > summary { color: var(--blue); }
.desktopMoreNav[open] > summary span { transform: rotate(180deg); }
.desktopMoreNav > nav { width: 245px; display: flex; flex-direction: column; position: absolute; top: 70px; right: 0; z-index: 200; padding: 9px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 38px rgba(0,0,0,.16); }
.primaryNav .desktopMoreNav nav a { min-height: 0; padding: 12px 14px; border-radius: 5px; font-size: 14px; }
.primaryNav .desktopMoreNav nav a:hover { color: var(--blue); background: var(--soft); }
.mobileNav nav { max-height: min(620px,76vh); overflow-y: auto; }
.mobileNav nav .mobileOriginalLink { color: var(--blue-dark); background: #edf1ff; font-weight: 700; }
.mobileNav nav .mobileReportLink { margin: 6px 0 9px; color: white; background: var(--blue-dark); border: 0; border-radius: 22px; text-align: center; font-weight: 700; }

.reportFormHeading > div { display: flex; flex-direction: column; gap: 12px; }
.reportFormHeading > div p { margin: 0; }
.reportFormHeading > div strong { padding: 10px 12px; color: #8b2230; border-left: 4px solid var(--red); background: #fff0f1; font-size: 14px; line-height: 1.6; }

.productPurchaseMessage { display: flex; flex-direction: column; gap: 5px; color: #704213; border-left: 4px solid #d58a24; background: #fff8e9; }
.productPurchaseMessage { margin: 0 0 18px; padding: 14px 16px; }
.productPurchaseMessage b { font-size: 14px; }
.productPurchaseMessage span { color: #665748; font-size: 14px; line-height: 1.55; }
.optionalField { display: inline-flex; margin-left: 6px; padding: 3px 6px; color: var(--blue); background: #eaf4fb; border-radius: 10px; font-size: 14px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

.licensePromiseSection { padding: 88px 0; background: #e8eff5; }
.licensePromise:not(.compactPromise) { min-height: 350px; grid-template-columns: 360px minmax(0,1fr) auto; gap: 45px; padding: 0 42px 0 0; overflow: hidden; border-radius: 8px; background: var(--blue-dark); box-shadow: 0 18px 46px rgba(21,35,93,.2); }
.licensePromiseVisual { min-height: 350px; display: grid; place-items: center; align-self: stretch; position: relative; overflow: hidden; background: linear-gradient(145deg,#f9fbfd,#dfe8ef); }
.licensePromiseVisual:before { display: none; }
.licensePromiseVisual > img { width: 96%; height: 300px; padding: 15px 18px 45px; position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(18,35,50,.24)); }
.licensePromiseVisual .licensePromiseMark { width: auto; height: auto; display: flex; align-items: center; gap: 8px; position: absolute; left: 23px; bottom: 22px; z-index: 2; padding: 9px 13px; color: white; background: var(--blue); border: 0; border-radius: 4px; }
.licensePromiseVisual .licensePromiseMark b { font-size: 25px; font-weight: 400; line-height: 1; }
.licensePromiseVisual .licensePromiseMark span { color: white; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.licensePromise:not(.compactPromise) > div:nth-child(2) { padding: 44px 0; }
.licensePromise:not(.compactPromise) h2 { max-width: 670px; margin: 9px 0 12px; font-size: 34px; line-height: 1.15; }
.licensePromise:not(.compactPromise) p { max-width: 680px; font-size: 14px; }
.licensePromise:not(.compactPromise) ul { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.licensePromise:not(.compactPromise) li { position: relative; padding-left: 20px; color: #d6e5ef; font-size: 14px; }
.licensePromise:not(.compactPromise) li:before { content: "✓"; position: absolute; left: 0; color: #86c9f7; font-weight: 800; }
.licensePromise:not(.compactPromise) > a { justify-self: end; }

.catalogPromo { padding: 88px 0; background: white; }
.catalogPromoInner { min-height: 500px; grid-template-columns: .9fr 1.1fr; gap: 0; padding: 0; overflow: hidden; color: white; background: var(--blue-dark); border-radius: 8px; box-shadow: 0 18px 46px rgba(21,35,93,.18); }
.promoMedia { min-width: 0; height: 100%; min-height: 500px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#fff,#e9eef4); }
.promoMedia img { width: 90%; height: 440px; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(26,42,58,.18)); }
.catalogPromo .promoCopy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 58px 64px; }
.catalogPromo .promoCopy > span { color: #9fd3f3; font-size: 14px; font-weight: 700; letter-spacing: .13em; }
.catalogPromo .promoCopy h2 { max-width: 650px; margin: 13px 0 16px; color: white; font-size: 42px; line-height: 1.12; }
.catalogPromo .promoCopy > p { max-width: 650px; margin: 0; color: #cedee9; font-size: 14px; line-height: 1.75; }
.catalogPromo .promoFacts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 28px; background: rgba(255,255,255,.2); }
.catalogPromo .promoFacts > div { min-height: 92px; padding: 16px; background: rgba(255,255,255,.06); }
.catalogPromo .promoFacts b { color: white; font-size: 14px; }
.catalogPromo .promoFacts span { margin-top: 6px; color: #bfd3e1; font-size: 14px; line-height: 1.45; }
.catalogPromo .promoCopy > a { align-self: flex-start; margin-top: 28px; color: var(--blue-dark); background: white; }

.delphiDifference { padding: 92px 0; background: var(--blue-dark); }
.differenceHeading { grid-template-columns: .45fr 1.1fr .75fr; margin-bottom: 38px; }
.differenceHeading h2 { font-size: 42px; }
.differenceGrid { grid-template-columns: repeat(3,1fr); gap: 16px; border: 0; }
.differenceGrid article, .differenceGrid article + article { min-height: 245px; padding: 30px; color: var(--ink); background: white; border: 0; border-radius: 8px; }
.differenceGrid b { color: var(--blue); font-size: 14px; }
.differenceGrid h3 { margin: 45px 0 11px; color: var(--ink); font-size: 19px; line-height: 1.35; }
.differenceGrid p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.delphiDifference .homeToolCards { margin-top: 20px; }
.delphiDifference .homeToolCards > a { border: 0; }

.homeKnowledgeSection { padding: 92px 0; background: #dfe9f1; }
.homeKnowledgeHeading { display: grid; grid-template-columns: 1fr auto; gap: 45px; align-items: end; margin-bottom: 22px; padding: 42px 48px; color: white; background: var(--blue-dark); border-radius: 8px; }
.homeKnowledgeHeading span { color: #98c9e9; font-size: 14px; font-weight: 700; letter-spacing: .13em; }
.homeKnowledgeHeading h2 { max-width: 780px; margin: 10px 0 11px; color: white; font-size: 39px; line-height: 1.2; }
.homeKnowledgeHeading p { max-width: 760px; margin: 0; color: #c5d7e4; font-size: 14px; line-height: 1.7; }
.homeKnowledgeHeading > a { padding: 12px 18px; color: var(--blue-dark); background: white; border-radius: 22px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.homeKnowledgeGrid { gap: 22px; }
.homeKnowledgeGrid > a { min-height: 470px; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: white; box-shadow: 0 7px 22px rgba(14,43,65,.1); }
.homeKnowledgeMedia { height: 215px; min-height: 215px; flex: 0 0 215px; overflow: hidden; position: relative; background: #eef3f7; border-bottom: 1px solid var(--line); }
.homeKnowledgeMedia img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.homeKnowledgeBody { min-height: 255px; display: flex; flex: 1; flex-direction: column; padding: 24px; background: white; }
.homeKnowledgeGrid .homeKnowledgeBody h3 { margin: 10px 0 10px; font-size: 20px; line-height: 1.35; }
.homeKnowledgeGrid .homeKnowledgeBody p { font-size: 14px; line-height: 1.7; }
.homeKnowledgeGrid .homeKnowledgeBody b { margin-top: auto; padding-top: 20px; }
.homeKnowledgeTools { gap: 16px; margin-top: 22px; }
.homeKnowledgeTools a { min-height: 92px; justify-content: center; padding: 22px 26px; border-radius: 8px; }

@media (max-width: 1260px) {
  .primaryNav { display: none; }
  .mobileNav { display: block; }
}

@media (max-width: 1020px) {
  .licensePromise:not(.compactPromise) { grid-template-columns: 300px 1fr; padding-right: 34px; }
  .licensePromise:not(.compactPromise) > a { grid-column: 2; justify-self: start; margin-bottom: 35px; }
  .catalogPromoInner { grid-template-columns: .8fr 1.2fr; }
  .catalogPromo .promoCopy { padding: 45px 38px; }
  .promoMedia img { height: 380px; }
  .differenceHeading { grid-template-columns: .4fr 1fr; }
  .differenceHeading p { grid-column: 2; }
  .homeKnowledgeHeading { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .homeKnowledgeHeading > a { justify-self: start; }
}

@media (max-width: 760px) {
  .licensePromiseSection, .catalogPromo, .delphiDifference, .homeKnowledgeSection { padding: 62px 0; }
  .licensePromise:not(.compactPromise), .catalogPromoInner { grid-template-columns: 1fr; }
  .licensePromise:not(.compactPromise) { gap: 0; padding: 0 26px 32px; }
  .licensePromiseVisual { min-height: 285px; margin: 0 -26px; }
  .licensePromiseVisual > img { height: 255px; padding: 12px 22px 42px; }
  .licensePromise:not(.compactPromise) > div:nth-child(2) { padding: 32px 0 22px; }
  .licensePromise:not(.compactPromise) > a { grid-column: 1; margin: 0; }
  .promoMedia { min-height: 310px; }
  .promoMedia img { height: 285px; }
  .catalogPromo .promoCopy { padding: 38px 28px; }
  .catalogPromo .promoCopy h2 { font-size: 35px; }
  .differenceHeading { grid-template-columns: 1fr; }
  .differenceHeading p { grid-column: auto; }
  .differenceGrid { grid-template-columns: 1fr; }
  .differenceGrid article, .differenceGrid article + article { min-height: 0; padding: 27px; }
  .homeKnowledgeHeading { padding: 34px 28px; }
  .homeKnowledgeHeading h2 { font-size: 33px; }
  .homeKnowledgeGrid > a { min-height: 440px; }
}

@media (max-width: 520px) {
  .mobileNav nav { width: min(350px,calc(100vw - 20px)); right: -2px; }
  .licensePromise:not(.compactPromise) h2 { font-size: 28px; }
  .catalogPromo .promoFacts { grid-template-columns: 1fr; }
  .catalogPromo .promoFacts > div { min-height: 70px; }
  .catalogPromo .promoCopy > a { width: 100%; text-align: center; }
  .differenceHeading h2 { font-size: 34px; }
  .homeKnowledgeHeading { padding: 30px 22px; }
  .homeKnowledgeHeading h2 { font-size: 29px; }
  .homeKnowledgeHeading > a { white-space: normal; }
  .homeKnowledgeMedia { height: 200px; min-height: 200px; flex-basis: 200px; }
}

/* August 2026 content polish: imagery, licence clarity and responsive contrast */
.storeHeroImage:after {
  background:
    linear-gradient(90deg, rgba(1,12,24,.99) 0%, rgba(2,18,34,.97) 38%, rgba(2,21,39,.78) 64%, rgba(2,18,33,.35) 100%),
    linear-gradient(0deg, rgba(0,10,20,.42), rgba(0,10,20,.16));
}
.storeHeroImage .heroScene { z-index: 0; }
.storeHeroCopy { text-shadow: 0 2px 16px rgba(0,0,0,.34); }
.storeHeroCopy .heroSpecs span { color: white; border-color: rgba(255,255,255,.46); background: rgba(0,18,34,.55); backdrop-filter: blur(5px); }
.storeHero .secondaryButton { color: white; border-color: rgba(255,255,255,.82); background: rgba(0,12,25,.25); }
.storeHero .secondaryButton:hover { color: var(--blue-dark); background: white; }

.sgwHeroGrid { grid-template-columns: minmax(310px,.68fr) minmax(0,1.32fr); gap: 46px; }
.sgwHero h1 { font-size: clamp(42px,4vw,58px); }
.sgwHeroVisual { height: 450px; margin: 0; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: #082e50; box-shadow: 0 24px 55px rgba(0,23,48,.28); }
.sgwHeroVisual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(2,23,42,.72),transparent 52%); pointer-events: none; }
.sgwHeroVisual > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sgwHeroVisual figcaption { max-width: 590px; display: flex; flex-direction: column; position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; padding: 20px 23px; color: white; border-left: 5px solid var(--red); background: rgba(4,35,61,.92); backdrop-filter: blur(6px); }
.sgwHeroVisual figcaption small { color: #9ed0f2; font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.sgwHeroVisual figcaption b { margin-top: 7px; font-size: 18px; line-height: 1.35; }
.sgwHeroVisual figcaption span { margin-top: 7px; color: #c7ddea; font-size: 14px; line-height: 1.5; }

.aboutStoryGrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: center; }
.aboutStoryGrid figure { min-height: 430px; margin: 0; overflow: hidden; position: relative; border-radius: 9px; background: var(--soft); box-shadow: 0 14px 38px rgba(11,43,68,.13); }
.aboutStoryGrid figure img { width: 100%; height: 430px; object-fit: cover; object-position: center; }
.aboutStoryGrid figcaption { position: absolute; left: 20px; bottom: 20px; padding: 11px 15px; color: white; background: rgba(3,34,57,.9); font-size: 14px; line-height: 1.5; }
.aboutStoryGrid h2 { margin: 10px 0 22px; font-size: 38px; line-height: 1.17; }
.aboutStoryGrid p { margin: 0 0 17px; color: var(--muted); font-size: 14px; line-height: 1.8; }

.supportVisualStory { min-height: 430px; display: grid; grid-template-columns: .82fr 1.18fr; margin-bottom: 68px; overflow: hidden; color: white; border-radius: 9px; background: var(--blue-dark); box-shadow: 0 16px 42px rgba(11,43,68,.16); }
.supportVisualStory > div { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.supportVisualStory > div > span { color: #9bcbea; font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.supportVisualStory h2 { margin: 12px 0 15px; color: white; font-size: 34px; line-height: 1.18; }
.supportVisualStory p { margin: 0; color: #c9dce9; font-size: 14px; line-height: 1.75; }
.supportVisualStory img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; object-position: center; }

.softwareContinuity { display: grid; grid-template-columns: .72fr 1.28fr; gap: 35px; margin-top: 22px; padding: 31px; border-radius: 8px; background: #e9f3fa; }
.softwareContinuity > div > span { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.softwareContinuity h2 { margin: 8px 0 10px; font-size: 27px; line-height: 1.2; }
.softwareContinuity p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.softwareContinuity ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: #cbdce8; }
.softwareContinuity li { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: white; }
.softwareContinuity li b { font-size: 14px; }
.softwareContinuity li span { color: var(--muted); font-size: 14px; line-height: 1.55; }

.softwareKnowledgeCards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.softwareKnowledgeCards > a { min-height: 270px; display: flex; flex-direction: column; padding: 30px; overflow: hidden; position: relative; color: white; border-radius: 8px; background: linear-gradient(135deg,#082f52,#0a558c); box-shadow: 0 10px 28px rgba(8,47,82,.14); }
.softwareKnowledgeCards > a:last-child { background: linear-gradient(135deg,#075c9b,#0877be); }
.softwareKnowledgeCards > a:after { content: ""; }
.softwareKnowledgeCards span { color: #9ed0f2; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.softwareKnowledgeCards h2 { max-width: 430px; margin: 34px 0 11px; color: white; font-size: 23px; line-height: 1.25; }
.softwareKnowledgeCards p { margin: 0; color: #c7dcea; font-size: 14px; line-height: 1.7; }
.softwareKnowledgeCards b { margin-top: auto; padding-top: 22px; color: white; font-size: 14px; }

.licenseAfterExpirySection { background: #082f52; color: white; }
.licenseAfterExpirySection .detailHeading .subLabel { color: #94c9ed; }
.licenseAfterExpirySection .detailHeading h2 { color: white; }
.licenseAfterExpirySection .detailHeading > p { color: #c7dbe9; }
.licenseAfterExpiryGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 30px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.18); }
.licenseAfterExpiryGrid article { min-height: 230px; padding: 27px; background: #082f52; }
.licenseAfterExpiryGrid article > b { color: #8fc9ef; font-size: 14px; }
.licenseAfterExpiryGrid h3 { margin: 45px 0 10px; color: white; font-size: 18px; line-height: 1.35; }
.licenseAfterExpiryGrid p { margin: 0; color: #bed4e3; font-size: 14px; line-height: 1.7; }
.licenseExpiryNote { display: grid; grid-template-columns: 170px 1fr; gap: 25px; margin-top: 18px; padding: 19px 22px; color: var(--ink); background: white; border-left: 5px solid var(--red); }
.licenseExpiryNote b { font-size: 14px; }
.licenseExpiryNote span { color: var(--muted); font-size: 14px; line-height: 1.65; }

.dsLicenseUsage { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 18px; overflow: hidden; border-radius: 8px; background: var(--line); }
.dsLicenseUsage > div { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #eaf4fb; }
.dsLicenseUsage b { color: var(--blue-dark); font-size: 14px; }
.dsLicenseUsage span { color: var(--muted); font-size: 14px; line-height: 1.55; }

@media (max-width: 1020px) {
  .sgwHeroGrid { grid-template-columns: .82fr 1.18fr; gap: 30px; }
  .sgwHeroVisual { height: 390px; }
  .aboutStoryGrid, .supportVisualStory { grid-template-columns: 1fr 1fr; gap: 0; }
  .aboutStoryGrid { gap: 35px; }
  .supportVisualStory > div { padding: 38px; }
  .softwareContinuity { grid-template-columns: 1fr; }
  .licenseAfterExpiryGrid { grid-template-columns: repeat(2,1fr); }
  .licenseAfterExpiryGrid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .serviceBarInner > span { display: none; }
  .serviceBarInner { justify-content: flex-end; }
  .serviceBarInner div { width: 100%; justify-content: space-between; gap: 12px; }
  .storeHeroImage:after { background: linear-gradient(0deg,rgba(1,12,23,.97) 8%,rgba(2,18,33,.91) 57%,rgba(2,20,35,.46) 100%); }
  .storeHeroImage .heroScene { object-position: 64% center; }
  .storeHeroCopy { text-shadow: 0 2px 14px rgba(0,0,0,.52); }
  .sgwHeroGrid, .aboutStoryGrid, .supportVisualStory { grid-template-columns: 1fr; }
  .sgwHeroVisual { height: 330px; }
  .sgwHeroVisual figcaption { left: 14px; right: 14px; bottom: 14px; padding: 16px 18px; }
  .aboutStoryGrid { gap: 28px; }
  .aboutStoryGrid figure, .aboutStoryGrid figure img { min-height: 310px; height: 310px; }
  .aboutStoryGrid > div { grid-row: 1; }
  .supportVisualStory { min-height: 0; margin-bottom: 48px; }
  .supportVisualStory > div { padding: 34px 28px; }
  .supportVisualStory h2 { font-size: 29px; }
  .supportVisualStory img { min-height: 300px; height: 300px; }
  .softwareKnowledgeCards, .licenseAfterExpiryGrid, .dsLicenseUsage { grid-template-columns: 1fr; }
  .softwareKnowledgeCards > a { min-height: 235px; }
  .licenseAfterExpiryGrid article, .licenseAfterExpiryGrid article:last-child { min-height: 0; grid-column: auto; }
  .licenseAfterExpiryGrid h3 { margin-top: 28px; }
  .licenseExpiryNote { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 520px) {
  .storeHero { min-height: 680px; }
  .storeHeroCopy { min-height: 680px; padding: 46px 0; }
  .storeHero h1 { font-size: 34px; }
  .storeHeroCopy > div:last-child { width: 100%; align-items: stretch; flex-direction: column; }
  .storeHero .primaryButton, .storeHero .secondaryButton { width: 100%; justify-content: center; }
  .sgwHero h1 { font-size: 36px; }
  .sgwHeroVisual { height: 300px; }
  .sgwHeroVisual figcaption b { font-size: 15px; }
  .sgwHeroVisual figcaption span { display: none; }
  .aboutStoryGrid h2 { font-size: 30px; }
  .aboutStoryGrid figure, .aboutStoryGrid figure img { min-height: 245px; height: 245px; }
  .supportVisualStory img { min-height: 235px; height: 235px; }
  .softwareContinuity { padding: 25px 20px; }
  .softwareKnowledgeCards > a { padding: 25px 22px; }
  .downloadFileCard { grid-template-columns: 36px minmax(0,1fr); }
  .downloadButton { width: 100%; justify-content: center; text-align: center; }
  .dsLicenseUsage > div { padding: 16px; }

  /* Compact home-page navigation and feature cards on phones. */
  .homeCategoryRail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
  .homeCategoryRail a { min-height: 70px; grid-template-columns: 22px minmax(0,1fr) 14px; gap: 7px; padding: 12px 13px; border-radius: 8px; }
  .homeCategoryRail b { font-size: 14px; line-height: 1.2; }
  .homeCategoryRail small { display: none; }
  .homeCategoryRail em { font-size: 14px; }

  .benefitGrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 8px 0 22px; }
  .benefitGrid > div, .benefitGrid > a, .benefitGrid > div:first-child, .benefitGrid > a:first-child { min-height: 72px; gap: 9px; padding: 11px 12px; }
  .benefitGrid i { width: 28px; height: 28px; font-size: 14px; }
  .benefitGrid strong { font-size: 14px; line-height: 1.25; }
  .benefitGrid small { margin-top: 3px; font-size: 14px; line-height: 1.3; }

  .blueTechBand { padding: 44px 0; }
  .blueTechFeatureList { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Compact Delphi wordmark with the local site descriptor. */
.officialLogo { width: 154px; }
.officialLogo img { width: 138px; height: auto; object-fit: contain; object-position: left center; }
.officialLogo span { margin-top: 3px; padding-left: 1px; color: var(--blue); font-size: 7px; font-weight: 600; line-height: 1; letter-spacing: .27em; white-space: nowrap; }

@media (max-width: 760px) {
  .officialLogo { width: auto; }
  .officialLogo img { width: 124px; height: auto; }
  .officialLogo span { font-size: 6.5px; }
}

/* 3.4 interaction, header and legal refinements */
.serviceBarInner { justify-content: flex-start; }
.configOptions button:hover,
.configOptions button:focus-visible,
.configOptions button.selected,
.periodOptions button:hover,
.periodOptions button:focus-visible,
.periodOptions button.selected,
.configToggle:hover,
.configToggle:focus-visible,
.configToggle.selected,
.completedConfigStep:hover,
.completedConfigStep:focus-visible {
  color: var(--ink) !important;
  border-color: var(--blue) !important;
  background: #f1f8ff !important;
}
.configOptions button:hover b,
.configOptions button:focus-visible b,
.configOptions button.selected b,
.completedConfigStep:hover b,
.completedConfigStep:focus-visible b { color: var(--ink) !important; }
.configOptions button:hover span,
.configOptions button:focus-visible span,
.configOptions button.selected span { color: var(--muted) !important; }
.configOptions button:hover strong,
.configOptions button:focus-visible strong,
.configOptions button.selected strong,
.periodOptions button:hover b,
.periodOptions button:focus-visible b,
.periodOptions button.selected b { color: var(--blue) !important; }
.configNext:hover:not(:disabled),
.configNext:focus-visible:not(:disabled) { color: white !important; background: var(--blue) !important; }
.finishConfig:hover:not(:disabled),
.finishConfig:focus-visible:not(:disabled) { background: var(--red) !important; }
.configSupportLink { padding: 10px 12px; border-radius: 6px; }
.configSupportLink:hover,
.configSupportLink:focus-visible { color: white !important; background: rgba(255,255,255,.12) !important; text-decoration: underline; }
.footerLegal > div { display: flex; flex-direction: column; gap: 9px; }
.footerLegalLinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footerLegalLinks a { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.footerLegalLinks a:hover { color: var(--blue); }
.legalBusinessBlock { margin-bottom: 34px; padding: 24px; border-left: 4px solid var(--blue); background: var(--soft); }
.legalBusinessBlock h2 { margin-top: 0; }
.legalBusinessData { margin: 0; }
.legalBusinessData > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.legalBusinessData > div:last-child { border-bottom: 0; }
.legalBusinessData dt { color: var(--muted); }
.legalBusinessData dd { margin: 0; font-weight: 600; }

@media (max-width: 760px) {
  .serviceBar { display: none; }
  .footerLegal, .footerLegal > div { align-items: flex-start; }
  .footerLegalLinks { gap: 8px 14px; }
  .legalBusinessData > div { grid-template-columns: 1fr; gap: 3px; }
}

/* 3.4.1 mobile catalog containment and compact navigation */
.shopResults { min-width:0; }
@media (max-width:760px) {
  .shopCategoryGroup.singleProductGroup .shopGrid { grid-template-columns:minmax(0,1fr)!important; }
  .shopCategoryGroup.singleProductGroup .catalogCard { display:block; }
  .shopCategoryGroup.singleProductGroup .catalogImage { min-height:0; height:235px; }
}
.cardMeta { flex-wrap: wrap; }
.productCode { min-width: 0; max-width: 100%; flex: 0 1 auto; overflow-wrap: anywhere; word-break: break-word; }
.catalogBody h3, .catalogBody p { overflow-wrap: break-word; }

@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  main, main > section { min-width: 0; max-width: 100%; }
  .shopLayout {
    width: calc(100% - 28px);
    max-width: 1314px;
    display: grid;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 60px;
  }
  .shopLayout > *, .shopResults, .shopCategoryGroup, .shopGrid, .catalogCard, .catalogBody {
    min-width: 0;
    max-width: 100%;
  }
  .shopSidebar {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0 8px;
    position: static;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .shopSidebar h2 { display: none; }
  .shopSidebar > a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 10px 15px;
    border: 0;
    border-radius: 23px;
    color: var(--blue);
    background: #eaf4fc;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  .shopSidebar > a span { display: none; }
  .shopSidebar > a:hover, .shopSidebar > a:focus-visible { color: var(--blue-dark); background: #dceefb; }
  .shopJumpRail { display: none; }
  .resultsHeader { height: auto; min-height: 50px; gap: 12px; margin: 0; padding: 13px 15px; }
  .resultsHeader b { min-width: 0; }
  .resultsHeader span { flex: 0 0 auto; white-space: nowrap; }
  .shopGrid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px; }
  .shopGroupHeading { max-width: 100%; margin-bottom: 17px; }
  .shopGroupHeading > div { min-width: 0; }
  .shopGroupHeading h2 { font-size: 25px; overflow-wrap: break-word; }
  .shopGroupHeading > a { white-space: normal; }
  .catalogCard { width: 100%; overflow: hidden; }
  .catalogImage { width: 100%; }
  .cardMeta { align-items: flex-start; }
  .vehicleLabel { min-width: 0; overflow-wrap: anywhere; }
  .catalogBottom { flex-wrap: wrap; }
  .categoryNote, .packageGuide, .licenceGuide, .responsiveTable { max-width: 100%; }
  .productDetail, .vtiHeroGrid, .downloadHeroGrid, .aboutStoryGrid, .supportVisualStory, .softwareContinuity {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0,1fr) !important;
  }
  .catalogGrid > *, .plainFeatureGrid > *, .vtiFeatureGrid > *, .relatedGrid > *, .configOptions > *, .periodOptions > *, .footerGrid > * { min-width: 0; }
}

@media (max-width: 620px) {
  .container, .shopLayout { width: calc(100% - 24px); }
  .pageIntro { padding: 42px 0; }
  .pageIntro h1 { font-size: 34px; line-height: 1.12; overflow-wrap: break-word; }
  .pageIntro p { font-size: 15px; line-height: 1.55; }
  .shopLayout { gap: 14px; padding-top: 22px; padding-bottom: 52px; }
  .shopSidebar > a { min-height: 40px; padding: 9px 13px; font-size: 13px; }
  .shopGrid { grid-template-columns: minmax(0,1fr) !important; }
  .shopCategoryGroup { margin-bottom: 42px; }
  .shopGroupHeading h2 { font-size: 24px; }
  .catalogImage { height: 235px; }
  .catalogBody { padding: 18px; }
  .catalogBody h3 { font-size: 20px; }
  .resultsHeader { padding: 12px 14px; font-size: 13px; }
}