:root {



--navy: #0b1f45;



--navy-2: #123d72;



--blue: #1767d8;



--blue-2: #2f83ea;



--cyan: #55d1e8;



--text: #304866;



--muted: #61748a;



--line: #d9e6f1;



--surface: #ffffff;



--soft: #f2f8fd;



--soft-blue: #e7f3ff;



--green: #12a66b;



--green-soft: #dff8ec;



--yellow: #f2ab18;



--yellow-soft: #fff4cf;



--purple: #7446d8;



--shadow: 0 10px 28px rgba(26, 72, 112, 0.075);



--shadow-sm: 0 5px 16px rgba(26, 72, 112, 0.06);



--radius: 16px;



--max: 1300px;



}



* {



box-sizing: border-box;



margin: 0;



padding: 0;



}



html {



scroll-behavior: smooth;



}



body {



font-family:



Inter,



Arial,



sans-serif;



color: var(--text);



background:



linear-gradient(



180deg,



#ffffff 0%,



#f5faff 44%,



#ffffff 100%



);



line-height: 1.6;



overflow-x: hidden;



}



a {



color: inherit;



}



img {



max-width: 100%;



display: block;



}



.section-shell {



width: min(



calc(100% - 48px),



var(--max)



);



margin-inline: auto;



}



/* =========================================================



HEADER



========================================================= */



.site-header {



position: sticky;



top: 0;



z-index: 100;



height: 78px;



background: rgba(255, 255, 255, 0.96);



backdrop-filter: blur(14px);



border-bottom:



1px solid #dfeaf4;



}



.header-inner {



width:



min(



calc(100% - 48px),



1400px



);



height: 100%;



margin: auto;



display: flex;



align-items: center;



justify-content: space-between;



}



.brand {



display: flex;



align-items: center;



gap: 11px;



text-decoration: none;



color: #0d1015;



}



.brand-mark {



width: 43px;



height: 43px;



border-radius: 12px;



background: #1763d4;



color: #fff;



display: grid;



place-items: center;



font-size: 21px;



box-shadow:



0 6px 18px



rgba(22, 95, 208, 0.22);



}



.brand-copy {



display: flex;



flex-direction: column;



line-height: 1;



}



.brand-copy strong {



font-size: 22px;



letter-spacing: -0.6px;



}



.brand-copy small {



font-size: 9px;



letter-spacing: 1.8px;



font-weight: 700;



margin-top: 5px;



}



.main-nav {



display: flex;



gap: 34px;



align-items: center;



}



.main-nav a {



text-decoration: none;



font-size: 16px;



font-weight: 600;



color: #152941;



}



.main-nav a:hover {



color: var(--blue);



}



/* =========================================================



GUIDE TABLE OF CONTENTS



========================================================= */



.guide-toc {



position: sticky;



top: 78px;



z-index: 90;



width: 100%;



background: rgba(255, 255, 255, 0.98);



backdrop-filter: blur(14px);



border-bottom: 1px solid #dfeaf4;



box-shadow: 0 4px 14px rgba(26, 72, 112, 0.04);



}



.guide-toc-inner {



min-height: 62px;



display: flex;



align-items: center;



}



.guide-toc-desktop {



width: 100%;



display: flex;



align-items: center;



gap: 24px;



min-width: 0;



}



.guide-toc-label {



display: inline-flex;



align-items: center;



gap: 10px;



flex: 0 0 auto;



color: #173b68;



font-size: 11px;



line-height: 1;



font-weight: 800;



letter-spacing: 1.4px;



text-transform: uppercase;



white-space: nowrap;



}



.guide-toc-line {



width: 28px;



height: 3px;



flex: 0 0 28px;



border-radius: 999px;



background: linear-gradient(90deg, #1767d8 0%, #55d1e8 100%);



}



.guide-toc-links {



flex: 1 1 auto;



display: flex;



align-items: center;



gap: 8px;



min-width: 0;



overflow-x: scroll;



overflow-y: hidden;



padding: 0;



scrollbar-width: auto;



scrollbar-color: #9fc9ee #edf5fc;



scrollbar-gutter: stable;



}



.guide-toc-links::-webkit-scrollbar {



height: 10px;



}



.guide-toc-links::-webkit-scrollbar-track {



background: #edf5fc;



border-radius: 999px;



}



.guide-toc-links::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 1px solid #edf5fc;



}



.guide-toc-links a {



flex: 0 0 auto;



padding: 9px 12px;



border: 1px solid transparent;



border-radius: 999px;



color: #425873;



font-size: 13px;



line-height: 1.2;



font-weight: 650;



text-decoration: none;



white-space: nowrap;



transition:



background 0.18s ease,



color 0.18s ease,



border-color 0.18s ease;



}



.guide-toc-links a:hover,



.guide-toc-links a:focus-visible,



.guide-toc-links a.is-active {



color: var(--blue);



}



.guide-toc-mobile {



display: none;



width: 100%;



}



.guide-toc-mobile-toggle {



appearance: none;



-webkit-appearance: none;



border: 0;



background: transparent;



padding: 0;



cursor: pointer;



display: flex;



align-items: center;



justify-content: space-between;



width: 100%;



min-height: 56px;



color: #173b68;



font: inherit;



font-size: 14px;



font-weight: 800;



letter-spacing: 0.2px;



text-align: left;



}



.guide-toc-mobile-toggle {



list-style: none;



}



.guide-toc-mobile-toggle::marker {



content: "";



}



.guide-toc-mobile-toggle::-webkit-details-marker {



display: none;



}



.guide-toc-chevron {



color: var(--blue);



font-size: 20px;



line-height: 1;



transition: transform 0.18s ease;



}



.guide-toc-mobile[open] .guide-toc-chevron {



transform: rotate(180deg);



}



.guide-toc-mobile-links {



height: 260px;



max-height: 260px;



overflow-x: hidden;



overflow-y: auto;



display: grid;



align-content: start;



gap: 6px;



padding: 10px 0 12px;



scrollbar-width: auto;



scrollbar-color: #9fc9ee #edf5fc;



}



.guide-toc-mobile-links::-webkit-scrollbar {



width: 8px;



}



.guide-toc-mobile-links::-webkit-scrollbar-track {



background: #edf5fc;



border-radius: 999px;



}



.guide-toc-mobile-links::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 1px solid #edf5fc;



}



.guide-toc-mobile-links::-webkit-scrollbar-thumb:hover {



background: #7fb7e6;



}



.guide-toc-mobile-links a {



display: block;



padding: 10px 12px;



border: 1px solid #dbe8f2;



border-radius: 10px;



background: #f8fbfe;



color: #425873;



font-size: 14px;



line-height: 1.35;



font-weight: 650;



text-decoration: none;



}



.guide-toc-mobile-links a:active,



.guide-toc-mobile-links a:focus-visible,



.guide-toc-mobile-links a.is-active {



color: var(--blue);



background: transparent;



border-color: transparent;



outline: none;



}



.content-heading-section {



scroll-margin-top: 150px;



}



/* =========================================================



HERO



========================================================= */



.hero {



position: relative;



overflow: hidden;



isolation: isolate;



background: #f7fbff;



border-bottom: 1px solid #dce9f4;



padding: 95px 0 18px;



}



.hero::before,



.hero::after {



content: none;



}



.hero-inner {



position: relative;



z-index: 1;



display: grid;



grid-template-columns: 1.08fr .92fr;



align-items: center;



gap: 38px;



min-height: 0;



}



.hero-copy {



max-width: 850px;



padding-left: 10px;



padding-top: 25px;



align-self: start;



}



.hero .eyebrow,



.eyebrow {



display: flex;



align-items: center;



gap: 12px;



color: #718096;



font-size: 12px;



line-height: 1;



font-weight: 900;



letter-spacing: 1.8px;



text-transform: uppercase;



margin-bottom: 0;



}



.hero .eyebrow-line,



.eyebrow > span {



width: 42px;



height: 3px;



flex: 0 0 42px;



border-radius: 999px;



background: linear-gradient(



90deg,



#1767d8 0%,



#55d1e8 100%



);



}



.hero h1 {



color: #0b1f45;



font-size: clamp(54px, 5.5vw, 58px);



line-height: 1.01;



letter-spacing: -2.5px;



font-weight: 600;



font-variation-settings: "wght" 600;



margin: 20px 0 26px;



}



.hero h1 span {



color: #1767d8;



}



.hero-intro {



max-width: 790px;



font-size: 18px;



line-height: 1.62;



color: #40566d;



}



.hero-intro p {



margin: 0;



}



.feature-strip {



display: grid;



grid-template-columns: repeat(4, 1fr);



gap: 18px;



margin-top: 36px;



padding-bottom: 25px;



}



.feature {



display: grid;



grid-template-columns: 42px 1fr;



column-gap: 10px;



align-items: center;



font-size: 14px;



line-height: 1.15;



}



.feature span {



grid-row: span 2;



width: 42px;



height: 42px;



border-radius: 50%;



display: grid;



place-items: center;



background: #dcecff;



color: #1559bd;



font-size: 22px;



}



.feature span svg {



width: 30px;



height: 30px;



display: block;



}



.feature b {



color: #172f4a;



}



.feature small {



color: #50657b;



}



.hero-actions {



display: flex;



gap: 12px;



margin-top: 28px;



}



.hero-visual {



position: relative;



min-height: 0;



align-self: stretch;



display: flex;



align-items: center;



justify-content: center;



overflow: visible;



}



.hero-graphic {



position: absolute;



inset: 0;



z-index: 0;



pointer-events: none;



}



.hero-circle {



position: absolute;



width: 500px;



height: 500px;



right: -10px;



top: 42%;



transform: translateY(-50%);



border-radius: 50%;



background: rgba(201,228,249,.50);



z-index: 1;



}



.hero-diagonal-strips {



position: absolute;



top: -35px;



bottom: -18px;



left: 0;



right: -400px;



width: auto;



height: auto;



overflow: hidden;



z-index: 0;



pointer-events: none;



}



.hero-diagonal-strips svg {



display: none;



}



.hero-diagonal-strips::before,



.hero-diagonal-strips::after {



content: "";



position: absolute;



right: 0;



width: 1500px;



transform-origin: top right;



transform: rotate(-45deg);



}



.hero-diagonal-strips::before {



top: -385px;



height: 131px;



background:



linear-gradient(



to left,



rgba(181, 209, 237, 0.25) 560px,



rgba(215, 230, 245, 0.02) 1300px



);



}



.hero-diagonal-strips::after {



top: -103px;



height: 75px;



background:



linear-gradient(



to left,



rgba(181, 209, 237, 0.25) 560px,



rgba(215, 230, 245, 0.02) 1300px



);



}



.hero-engine {



width: min(100%, 540px);



position: relative;



z-index: 2;



transform: translateX(-0px);



filter: drop-shadow(0 25px 35px rgba(11, 28, 45, .18));



}



.hero-engine-image {



width: 100%;



height: auto;



display: block;



}



/* =========================================================



BUTTONS



========================================================= */



.button {



display: inline-flex;



align-items: center;



justify-content: center;



min-height: 46px;



padding: 0 22px;



border-radius: 10px;



text-decoration: none;



font-weight: 700;



}



.button-primary {



color: #fff;



background: var(--blue);



}



.button-secondary {



color: var(--blue);



background: #fff;



border: 1px solid #c8dcec;



}



/* =========================================================



CONTENT / GUIDE SECTIONS



========================================================= */



.guide-content {



padding: 0;



}



.guide-section {



width: 100%;



padding: 32px 0;



}



.guide-section-white {



background: #ffffff;



}



.guide-section-grey {



background: #f7fafc;



}



.guide-section-inner {



width: min(



calc(100% - 48px),



var(--max)



);



margin-inline: auto;



}



/* Consistent section heading spacing */



.content-heading-section {



padding: 0 0 18px;



margin: 0;



border: 0;



border-radius: 0;



background: transparent;



}



.content-heading-section:nth-of-type(even) {



background: transparent;



}



.section-heading {



margin: 0 0 18px;



}



.section-heading h2 {



color: var(--navy);



font-size: clamp(30px, 4.2vw, 40px);



line-height: 1.05;



letter-spacing: -2.0px;



font-weight: 550;



margin: 14px 0 0;



text-wrap: balance;



font-family: "Inter", sans-serif;



font-optical-sizing: auto;





}



.section-heading h2 span {



color: #1767d8;



}



.content-h3 {



color: #173b68;



font-size: 27px;



line-height: 1.22;



letter-spacing: -0.35px;



font-weight: 450;



margin-top: 26px;



margin-bottom: 12px;



text-wrap: balance;



font-family: Inter, Arial, sans-serif;



font-optical-sizing: auto;



}



.content-paragraph {



max-width: 1150px;



font-size: 16px;



color: #425873;



margin-bottom: 16px;



}



.content-link {



color: var(--blue);



font-weight: 600;



}



.inline-code {



background: #edf4fc;



border: 1px solid #d9e6f1;



border-radius: 5px;



padding: 2px 6px;



color: #174a93;



font-size: 0.9em;



}



/* =========================================================



GENERIC BLOCKS



========================================================= */



.content-block {



margin: 26px 0 30px;



}



.block-title h3 {



color: var(--navy);



font-size: 28px;



line-height: 1.2;



letter-spacing: -0.35px;



font-weight: 700;



margin-bottom: 8px;



}



.block-lead {



max-width: 1100px;



color: var(--muted);



font-size: 17px;



margin-bottom: 16px;



}



/* =========================================================



TABLE



========================================================= */



.data-card {



background: #fff;



border: 1px solid #dbe8f2;



border-radius: var(--radius);



box-shadow: var(--shadow);



overflow: hidden;



}



.table-wrap {



overflow-x: auto;



}



.data-table {



width: 100%;



border-collapse: collapse;



min-width: 760px;



}



.data-table th {



background: #1c4e7d;



color: #fff;



text-align: left;



padding: 14px 18px;



font-size: 15px;



font-weight: 700;



white-space: nowrap;



border-bottom: 1px solid rgba(217, 230, 241, 0.38);



}



.data-table td {



padding: 13px 18px;



border-bottom: 1px solid rgba(217, 230, 241, 0.70);



background: #fff;



vertical-align: top;



}



.data-table tbody tr:nth-child(even) td {



background: #f8fbfe;



}



.data-table tbody tr:last-child td {



border-bottom: 0;



}



.table-title-cell {



color: #174a93;



font-weight: 700;



}



/* =========================================================



ENGINE TABLE ROW ICON



========================================================= */



.engine-table-cell {



display: flex;



align-items: center;



gap: 10px;



min-width: 0;



}



.engine-table-icon {



width: 30px;



height: 30px;



flex: 0 0 30px;



border-radius: 50%;



display: inline-grid;



place-items: center;



background: #dcecff;



color: #1559bd;



}



.engine-table-icon svg {



width: 18px;



height: 18px;



display: block;



}



.engine-table-value {



min-width: 0;



display: block;



overflow-wrap: anywhere;



}





/* Smaller table text on phone screens */

@media (max-width: 767px) {

  .data-table td {

    font-size: 15px;

    line-height: 1.55;

    padding: 7px 10px;

  }

}





/* =========================================================



GENERATION / CHRONOLOGY CARDS



========================================================= */



.card-carousel {



position: relative;



display: flex;



flex-direction: column;



gap: 12px;



}



.card-carousel-navigation {



display: flex;



align-items: center;



justify-content: center;



gap: 14px;



margin-top: 4px;



}



.card-carousel-button {



position: relative;



width: 38px;



height: 38px;



border: 1px solid #d2e5f7;



border-radius: 50%;



background: #fff;



color: var(--blue);



font-size: 22px;



line-height: 1;



cursor: pointer;



box-shadow: var(--shadow-sm);



pointer-events: auto;



transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;



}



.card-carousel-button:hover:not(:disabled),

.card-carousel-button:focus-visible:not(:disabled) {



transform: translateY(-1px);



border-color: #9ec7f2;



background: #f3f9ff;



}



.card-carousel-button:disabled {



opacity: 0.45;



cursor: not-allowed;



}



.card-carousel-dots {



display: flex;



align-items: center;



justify-content: center;



gap: 8px;



margin: 0;



}



.card-carousel-dot {



width: 10px;



height: 10px;



padding: 0;



border: 0;



border-radius: 999px;



background: #dfeaf6;



cursor: pointer;



transition: width 0.18s ease, background 0.18s ease;



}



.card-carousel-dot.is-active {



width: 26px;



background: linear-gradient(90deg, #1767d8 0%, #55d1e8 100%);



}



.generation-cards-section {



width: 100%;



max-width: 1300px;



margin: 24px auto 16px;



}



.generation-cards-grid {



display: flex;



flex-wrap: nowrap;



gap: 20px;



width: 100%;



overflow-x: auto;



overflow-y: hidden;



padding: 0 0 6px;



scrollbar-width: thin;



scrollbar-color: #9fc9ee transparent;



-webkit-overflow-scrolling: touch;



}



.generation-cards-grid::-webkit-scrollbar {



height: 8px;



}



.generation-cards-grid::-webkit-scrollbar-track {



background: transparent;



}



.generation-cards-grid::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 0;



}



.generation-cards-grid::-webkit-scrollbar-thumb:hover {



background: #7fb7e6;



}



.generation-card {



position: relative;



min-width: 0;



flex: 0 0 calc((100% - 60px) / 4);



width: calc((100% - 60px) / 4);



overflow: hidden;



background: #fff;



border: 1px solid #d9e6f1;



border-radius: 20px;



box-shadow:



0 18px 42px rgba(26,72,112,.09),



0 5px 16px rgba(26,72,112,.055);



}



.generation-card-accent {



position: absolute;



inset: 0 0 auto;



z-index: 2;



height: 4px;



background: linear-gradient(



90deg,



#1767d8 0%,



#2f83ea 58%,



#55d1e8 100%



);



}



.generation-card-header {



display: flex;



align-items: center;



gap: 12px;



padding: 20px 20px 6px;



}



.generation-card-number {



width: 48px;



height: 48px;



flex: 0 0 48px;



display: grid;



place-items: center;



border-radius: 14px;



background: linear-gradient(145deg, #dff0ff 0%, #cbe3ff 100%);



border: 1px solid #bfdcff;



color: #1767d8;



font-size: 17px;



line-height: 1;



font-weight: 800;



}



.generation-card-kicker {



color: #718096;



font-size: 10px;



line-height: 1.2;



letter-spacing: 1.6px;



text-transform: uppercase;



font-weight: 800;



}



.generation-card-image-wrap {



height: 150px;



margin: 0px 0px 0;



display: flex;



align-items: center;



justify-content: center;



padding: 5px 5px;



border-radius: 16px;



background:



radial-gradient(



circle at 50% 48%,



rgba(231,243,255,.96) 0%,



rgba(231,243,255,0) 68%



),



linear-gradient(180deg, #f8fbff 0%, #f3f8fd 100%);



}



.generation-card-image {



width: 100%;



height: 100%;



object-fit: contain;



filter: drop-shadow(0 12px 18px rgba(11,28,45,.12));



}



.generation-card-body {



padding: 17px 20px 20px;



}



.generation-card-body h3 {



margin: 0;



color: #173b68;



font-size: 18px;



line-height: 1.16;



letter-spacing: -.35px;



font-weight: 500;



}



.generation-card-divider {



width: 74px;



height: 2px;



margin: 14px 0 13px;



border-radius: 999px;



background: #d4e6f7;



}



.generation-card-description {



position: relative;



height: 96px;



max-height: 96px;



overflow-y: scroll;



overflow-x: hidden;



padding-right: 10px;



font-size: 14px;



line-height: 1.62;



scrollbar-width: thin;



scrollbar-color: #9fc9ee #edf5fc;



}



.generation-card-description::-webkit-scrollbar {



width: 7px;



height: 7px;



}



.generation-card-description::-webkit-scrollbar-track {



background: #edf5fc;



border-radius: 999px;



}



.generation-card-description::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 1px solid #edf5fc;



}



.generation-card-description::-webkit-scrollbar-thumb:hover {



background: #7fb7e6;



}



.generation-card-body p {



color: #53677c;



font-size: inherit;



line-height: inherit;



margin: 0;



}



.generation-card-footer {



display: flex;



align-items: center;



gap: 10px;



margin-top: 18px;



color: #173b68;



font-size: 11px;



line-height: 1.25;



font-weight: 700;



}



.generation-card-footer .engine-table-icon {



width: 34px;



height: 34px;



flex-basis: 34px;



}



.generation-card-footer .engine-table-icon svg {



width: 20px;



height: 20px;



}



/* =========================================================



CARDS



========================================================= */



.content-cards {



display: grid;



grid-template-columns:



repeat(



auto-fit,



minmax(280px, 1fr)



);



gap: 22px;



}



.content-card {



background: #fff;



border: 1px solid #e0eaf3;



border-radius: 16px;



box-shadow: var(--shadow);



overflow: hidden;



}



.content-card-image {



height: 220px;



display: flex;



align-items: center;



justify-content: center;



padding: 20px;



}



.content-card-image img {



width: 100%;



height: 100%;



object-fit: contain;



}



.content-card-body {



padding: 25px;



}



.content-card-body h3 {



color: #173b68;



font-size: 25px;



margin-bottom: 9px;



}



.content-card-body p {



color: #53677c;



}



/* =========================================================



LIST



========================================================= */



.content-list {



max-width: 1100px;



padding-left: 28px;



margin: 20px 0 30px;



color: #425873;



font-size: 17px;



}



.content-list li {



margin-bottom: 10px;



}



/* =========================================================



PROS / CONS



========================================================= */



.pros-cons-grid {



display: grid;



grid-template-columns:



repeat(2, 1fr);



gap: 22px;



margin: 30px 0;



}



.pros-card,



.cons-card {



padding: 28px;



border-radius: 16px;



border: 1px solid #dbe8f2;



background: #fff;



box-shadow: var(--shadow);



}



.pros-card {



border-top: 4px solid var(--green);



}



.cons-card {



border-top: 4px solid var(--yellow);



}



.pros-card h3,



.cons-card h3 {



color: var(--navy);



font-size: 24px;



margin-bottom: 15px;



}



.pros-card ul,



.cons-card ul {



padding-left: 22px;



}



.pros-card li,



.cons-card li {



margin-bottom: 9px;



}



/* =========================================================



RANKED LIST



========================================================= */



.ranked-list {



display: grid;



gap: 14px;



margin: 28px 0;



}



.ranked-item {



display: grid;



grid-template-columns: 55px 1fr;



gap: 18px;



padding: 20px;



background: #fff;



border: 1px solid #dbe8f2;



border-radius: 14px;



box-shadow: var(--shadow-sm);



}



.rank-number {



width: 44px;



height: 44px;



border-radius: 50%;



display: grid;



place-items: center;



background: #e3efff;



color: #174e9d;



font-weight: 800;



}



.ranked-item h3 {



color: var(--navy);



margin-bottom: 5px;



}



.ranked-item p {



color: var(--muted);



}



/* =========================================================



STEPS



========================================================= */



.steps-list {



display: block;



margin-top: 22px;



}



.steps-flow-canvas {



position: relative;



width: min(100%, 1314px);



min-height: 0;



height: auto;



margin: 4px auto 0;



}



.steps-flow-connectors {



display: none !important;



}



.steps-flow-cards {



position: relative;



z-index: 1;



display: flex;



flex-wrap: nowrap;



align-items: stretch;



gap: 28px;



width: 100%;



height: auto;



min-height: 0;



overflow-x: auto;



overflow-y: hidden;



padding: 0 0 6px;



-webkit-overflow-scrolling: touch;



scrollbar-width: thin;



scrollbar-color: #9fc9ee transparent;



}



.steps-flow-cards::-webkit-scrollbar {



height: 8px;



}



.steps-flow-cards::-webkit-scrollbar-track {



background: transparent;



}



.steps-flow-cards::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 0;



}



.steps-flow-cards::-webkit-scrollbar-thumb:hover {



background: #7fb7e6;



}



.steps-flow-card {



position: relative !important;



inset: auto !important;



flex: 0 0 calc((100% - 112px) / 5);



width: calc((100% - 112px) / 5) !important;



height: 150px !important;



min-width: 0;



box-sizing: border-box;



padding: 0 !important;



border: 1px solid #dbe7f2;



border-radius: 12px;



background: #fff;



box-shadow: 0 5px 16px rgba(26,72,112,.06);



overflow: visible;



}



.steps-flow-card:not(:last-child)::after {



content: "";



position: absolute;



z-index: 0;



top: 50%;



left: calc(100% + 2px);



width: 24px;



border-top: 3px dotted #86bce9;



transform: translateY(-50%);



pointer-events: none;



}



.steps-flow-card-inner {



position: relative;



z-index: 1;



display: flex;



flex-direction: column;



width: 100%;



height: 100%;



min-height: 0;



padding: 16px 16px 14px !important;



border: 0;



border-radius: 11px;



background: #fff;



box-shadow: none;



}



.steps-flow-pin,



.steps-flow-pin-image {



display: none !important;



}



.steps-flow-number {



flex: 0 0 34px;



width: 34px;



height: 34px;



border-radius: 50%;



display: grid;



place-items: center;



color: #fff;



background: var(--blue);



font-size: 15px;



line-height: 1;



letter-spacing: 0;



font-weight: 800;



}



.steps-flow-card h3 {



flex: 0 0 auto;



margin: 10px 0 5px;



color: #173b68;



font-size: 14px;



line-height: 1.18;



letter-spacing: -.15px;



font-weight: 800;



}



.steps-flow-copy {



position: relative;



flex: 1 1 auto;



min-height: 0;



overflow: hidden;



padding-right: 0;



}



.steps-flow-copy::after {



display: none;



}



.steps-flow-copy p {



height: auto;



overflow: hidden;



padding-right: 0;



color: #53677c;



font-size: 11.5px;



line-height: 1.42;



}



/* =========================================================



TAKEAWAY



========================================================= */





/* =========================================================

   TAKEAWAY / CONCLUSION BOXES

========================================================= */



.takeaway {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin: 28px 0;

  padding: 23px 25px;

  border-radius: 14px;

  background: #f1f3f5;

  border: 1px solid #e1e5e9;

  color: #374151;

}



/* Both green and blue boxes become light grey */



.takeaway-green,

.takeaway-blue {

  background: #f8f9fa;

  border-color: #e1e5e9;

  border-left-color: #d1d5db;

  color: #374151;

}



/* Remove the original coloured icon circles */



.takeaway-icon {

  width: 20px;

  height: 24px;

  flex: 0 0 20px;

  border: 0;

  border-radius: 0;

  background: transparent !important;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  font-size: 22px;

  line-height: 1;

  font-weight: 800;

}



/* Replace the old icon graphics with a simple white exclamation mark */



.takeaway-icon svg {

  display: none !important;

}



.takeaway-icon::before {

  content: "!";

  color: #6b7280;

  font-size: 22px;

  font-weight: 800;

  line-height: 1;

}





/* Keep conclusion text neutral */



.takeaway h3 {

  margin-bottom: 4px;

  color: #263445;

}



.takeaway-green h3,

.takeaway-blue h3 {

  color: #263445;

}



.takeaway-green p,

.takeaway-blue p {

  color: #4b5563;

}





@media (max-width: 767px) {

  .takeaway {

    width: 100vw !important;

    max-width: none !important;



    /* Extend to both edges of the phone screen */

    margin-left: calc(50% - 50vw) !important;

    margin-right: calc(50% - 50vw) !important;



    box-sizing: border-box;

    border-radius: 0;

  }

}





/* =========================================================



IMAGE



========================================================= */



.content-image {



margin: 32px 0;



padding: 25px;



background: #fff;



border: 1px solid #dbe8f2;



border-radius: 16px;



box-shadow: var(--shadow);



}



.content-image img {



width: 100%;



max-height: 650px;



object-fit: contain;



margin-inline: auto;



}



.content-image figcaption {



text-align: center;



color: var(--muted);



font-size: 13px;



margin-top: 12px;



}



/* =========================================================



INFO IMAGE BLOCK



========================================================= */



.info-image-block {



display: flex;



align-items: center;



gap: 16px;



width: 100%;



margin: 28px 0 32px;



padding: 20px 24px;



background: #ffffff;



border: 1px solid #d9e6f1;



border-radius: 16px;



box-shadow:



0 12px 30px rgba(26, 72, 112, 0.08),



0 4px 12px rgba(26, 72, 112, 0.04);



}



.info-image-icon {



width: 46px;



height: 46px;



flex: 0 0 46px;



display: grid;



place-items: center;



border-radius: 50%;



background: #dcecff;



color: #1767d8;



}



.info-image-icon svg {



width: 25px;



height: 25px;



display: block;



}



.info-image-content {



min-width: 0;



flex: 1;



}



.info-image-content p {



margin: 0;



color: #53677c;



font-size: 16px;



line-height: 1.6;



}



/* =========================================================



REGISTRATION CTA



========================================================= */



.registration-cta {



display: grid;



grid-template-columns: 82px minmax(0, 1fr) 1px 290px;



gap: 20px;



align-items: center;



margin: 40px 0;



padding: 24px 28px;



min-height: 118px;



border-radius: 18px;



background: linear-gradient(120deg, #0b1f45, #123d72);



color: #fff;



}



.registration-cta-icon {



width: 82px;



height: 82px;



flex: 0 0 82px;



display: grid;



place-items: center;



border-radius: 16px;



background: #003e7f;



color: #fff;



}



.registration-cta-icon svg {



width: 50px;



height: 50px;



display: block;



}



.registration-cta-copy {



min-width: 0;



}



.registration-cta-copy h2 {



font-size: 29px;



line-height: 1.08;



margin: 9px 0 7px;



}



.registration-cta-copy p {



color: #d5e5f5;



max-width: 760px;



font-size: 15px;



line-height: 1.45;



}



.registration-cta-divider {



width: 1px;



height: 86px;



background: rgba(255, 255, 255, 0.18);



}



.registration-widget {



width: 100%;



padding: 0;



border-radius: 0;



background: transparent;



}



.registration-input {



display: flex;



align-items: center;



gap: 10px;



width: 100%;



height: 46px;



padding: 0 16px;



background: #fff;



color: #475569;



border-radius: 8px;



margin-bottom: 9px;



font-size: 18px;



line-height: 1;



text-align: center;







}



.registration-input input {

    text-align: center;

}



.registration-input input:focus {

    outline: none;

    box-shadow: none;

    border: none;

    text-align: center;

}



.registration-input-flag {



display: inline-flex;



align-items: center;



justify-content: center;



width: 23px;



flex: 0 0 23px;



font-size: 18px;



line-height: 1;



}



.registration-widget button {



display: flex;



align-items: center;



justify-content: center;



gap: 9px;



width: 100%;



height: 46px;



padding: 0 16px;



border: 0;



border-radius: 8px;



background: #2f83ea;



color: #fff;



font-size: 14px;



font-weight: 800;



cursor: pointer;



}



.registration-button-arrow {



font-size: 19px;



line-height: 1;



transform: translateY(-1px);



}



/* =========================================================



FAQ



========================================================= */



.faq-section {



max-width: 1300px;



margin: 0px auto;



}





.faq-list {

    display: grid;

    gap: 12px;



    /* Show approximately 5–6 FAQs at once */

    max-height: 500px;



    /* Enable vertical scrolling for the remaining FAQs */

    overflow-y: auto;

    overflow-x: hidden;



    /* Scrollbar styling */

    padding-right: 8px;

    scrollbar-width: thin;

    scrollbar-color: #9fc9ee #edf5fc;

}



/* Chrome, Edge and Safari scrollbar */

.faq-list::-webkit-scrollbar {

    width: 8px;

}



.faq-list::-webkit-scrollbar-track {

    background: #edf5fc;

    border-radius: 999px;

}



.faq-list::-webkit-scrollbar-thumb {

    background: #9fc9ee;

    border-radius: 999px;

}



.faq-list::-webkit-scrollbar-thumb:hover {

    background: #7fb7e6;

}





.faq-item {



background: #fff;



border: 1px solid #dbe8f2;



border-radius: 12px;



overflow: hidden;



box-shadow: var(--shadow-sm);



}



.faq-item summary {



cursor: pointer;



list-style: none;



padding: 21px 24px;



font-weight: 700;



color: var(--navy);



}



.faq-item summary::-webkit-details-marker {



display: none;



}



.faq-item summary::after {



content: "+";



float: right;



color: var(--blue);



font-size: 22px;



}



.faq-item[open] summary::after {



content: "−";



}



.faq-answer {



padding: 0 24px 23px;



color: var(--muted);



line-height: 1.7;



}



/* =========================================================



SITE OFFER



========================================================= */



.site-offer {



display: flex;



align-items: center;



justify-content: space-between;



gap: 30px;



margin-top: 40px;



padding: 32px;



border-radius: 20px;



background: #edf6ff;



border: 1px solid #cfe2f4;



}



.site-offer h2 {



color: var(--navy);



margin: 10px 0;



}



.site-offer p {



color: var(--muted);



max-width: 850px;



}



/* =========================================================



CATALOG / HOME



========================================================= */



.catalog-page {



min-height: 100vh;



}



.catalog-hero {



padding: 80px 0;



background:



linear-gradient(



110deg,



#f2f8fd,



#e7f3ff



);



}



.catalog-hero h1 {



font-size: clamp(46px, 6vw, 76px);



color: var(--navy);



line-height: 1;



letter-spacing: -4px;



margin: 20px 0;



}



.catalog-hero p {



max-width: 850px;



font-size: 18px;



color: var(--muted);



}



.catalog-count {



margin-top: 20px;



color: var(--blue);



font-weight: 800;



}



.catalog-section {



padding-top: 70px;



padding-bottom: 100px;



}



.catalog-grid {



display: grid;



grid-template-columns:



repeat(



auto-fill,



minmax(300px, 1fr)



);



gap: 22px;



}



.guide-card {



display: flex;



flex-direction: column;



min-height: 245px;



padding: 26px;



background: #fff;



border: 1px solid #dbe8f2;



border-radius: 16px;



box-shadow: var(--shadow-sm);



text-decoration: none;



transition:



transform .2s ease,



box-shadow .2s ease,



border-color .2s ease;



}



.guide-card:hover {



transform: translateY(-4px);



border-color: #b8d3eb;



box-shadow: var(--shadow);



}



.guide-card-top {



display: flex;



justify-content: space-between;



align-items: center;



margin-bottom: 20px;



}



.guide-card-label {



font-size: 11px;



font-weight: 800;



letter-spacing: 1.5px;



color: var(--blue);



}



.guide-card-arrow {



width: 35px;



height: 35px;



border-radius: 50%;



display: grid;



place-items: center;



background: var(--soft-blue);



color: var(--blue);



}



.guide-card h2 {



color: var(--navy);



font-size: 25px;



line-height: 1.2;



margin-bottom: 10px;



}



.guide-card p {



color: var(--muted);



font-size: 15px;



}



.guide-card-footer {



margin-top: auto;



padding-top: 20px;



display: flex;



justify-content: space-between;



gap: 10px;



color: #718398;



font-size: 12px;



}



.guide-card-footer span:last-child {



color: var(--blue);



font-weight: 700;



}



/* =========================================================



NOT FOUND



========================================================= */



.not-found {



padding: 120px 0;



}



.not-found h1 {



color: var(--navy);



margin-bottom: 15px;



}



.not-found p {



color: var(--muted);



}



/* =========================================================



ENGINE FLIP CARDS



========================================================= */



.engine-flip-section {



width: 100%;



max-width: 1300px;



margin: 24px auto 16px;



}



.engine-flip-grid {



display: flex;



flex-wrap: nowrap;



gap: 20px;



width: 100%;



overflow-x: auto;



overflow-y: hidden;



padding: 0 0 6px;



scrollbar-width: thin;



scrollbar-color: #9fc9ee transparent;



-webkit-overflow-scrolling: touch;



}



.engine-flip-grid::-webkit-scrollbar {



height: 8px;



}



.engine-flip-grid::-webkit-scrollbar-track {



background: transparent;



}



.engine-flip-grid::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 0;



}



.engine-flip-grid::-webkit-scrollbar-thumb:hover {



background: #7fb7e6;



}



.engine-flip-card {



position: relative;



min-width: 0;



flex: 0 0 calc((100% - 40px) / 3);



width: calc((100% - 40px) / 3);



height: 178px;



perspective: 1500px;



}



.engine-flip-card-toggle {



position: absolute;



width: 1px;



height: 1px;



opacity: 0;



pointer-events: none;



}



.engine-flip-card-inner {



position: relative;



display: block;



width: 100%;



height: 100%;



cursor: pointer;



transform-style: preserve-3d;



-webkit-transform-style: preserve-3d;



transition: transform .72s cubic-bezier(.2,.75,.2,1);



}



.engine-flip-card-toggle:checked + .engine-flip-card-inner,



.engine-flip-card-toggle:focus-visible + .engine-flip-card-inner {



transform: rotateY(180deg);



}



@media (hover: hover) and (pointer: fine) {



.engine-flip-card:hover .engine-flip-card-inner {



transform: rotateY(180deg);



}



}



.engine-flip-card-face {



position: absolute;



inset: 0;



overflow: hidden;



border-radius: 16px;



backface-visibility: hidden;



-webkit-backface-visibility: hidden;



border: 1px solid #d9e6f1;



box-shadow: none;



}



.engine-flip-card-front {



display: flex;



flex-direction: row;



align-items: center;



background: #fff;



padding: 0 8px 0 8px;



}



.engine-flip-card-front::before {



content: "";



position: absolute;



inset: 0 0 auto;



height: 3px;



z-index: 2;



background: linear-gradient(



90deg,



#1767d8 0%,



#2f83ea 58%,



#55d1e8 100%



);



}



.engine-flip-card-image-wrap {



flex: 0 0 150px;



width: 150px;



height: 150px;



min-height: 0;



padding: 0;



display: flex;



align-items: center;



justify-content: center;



background: transparent;



}



.engine-flip-card-image {



width: 142px;



height: 142px;



max-width: 142px;



max-height: 142px;



object-fit: contain;



filter: drop-shadow(0 9px 14px rgba(11,28,45,.12));



transition: transform .35s ease;



}



.engine-flip-card-front-content {



flex: 1 1 auto;



min-width: 0;



display: flex;



flex-direction: column;



justify-content: center;



padding: 2px 4px 2px 2px;



}



.engine-flip-card-front-title {



flex: 0 0 auto;



padding: 0;



color: var(--navy);



text-align: left;



font-size: 20px;



line-height: 1.14;



letter-spacing: -.3px;



font-weight: 500 !important;



}



.engine-flip-card-front-preview {



margin-top: 4px;



color: #61748a;



font-size: 14px;



line-height: 1.32;



font-weight: 500;



max-height: 37px;



overflow: hidden;



display: -webkit-box;



-webkit-box-orient: vertical;



-webkit-line-clamp: 2;



}



.engine-flip-card-front-preview p {



margin: 0;



}



.engine-flip-card-front-arrow {



flex: 0 0 38px;



width: 38px;



height: 38px;



margin-left: 4px;



border-radius: 50%;



display: grid;



place-items: center;



background: #e8f3ff;



color: #1767d8;



}



.engine-flip-card-front-arrow svg {



width: 21px;



height: 21px;



display: block;



}



.engine-flip-card-back {



transform: rotateY(180deg);



background:



linear-gradient(



145deg,



#0b1f45 0%,



#123d72 72%,



#1767d8 100%



);



color: #fff;



}



.engine-flip-card-back-inner {



position: relative;



z-index: 1;



height: 100%;



display: flex;



flex-direction: column;



padding: 14px 15px 12px;



}



.engine-flip-card-back-label {



margin-bottom: 7px;



color: #8de5f3;



font-size: 8px;



line-height: 1;



letter-spacing: 1.5px;



text-transform: uppercase;



font-weight: 800;



}



.engine-flip-card-back h3 {



margin: 0 0 7px;



color: #fff;



font-size: 17px;



line-height: 1.15;



letter-spacing: -.25px;



font-weight: 800;



}



.engine-flip-card-back-text {



min-height: 0;



overflow-y: auto;



padding-right: 3px;



color: #dce9f5;



font-size: 13px;



line-height: 1.52;



scrollbar-width: thin;



scrollbar-color: #19e6ff #09142e;



}



.engine-flip-card-back-text p {



margin: 0;



}



.engine-flip-card-back-text::-webkit-scrollbar {



width: 7px;



}



.engine-flip-card-back-text::-webkit-scrollbar-track {



background: #09142e;



border-radius: 999px;



}



.engine-flip-card-back-text::-webkit-scrollbar-thumb {



background:



linear-gradient(



180deg,



#19e6ff 0%,



#1d7bff 100%



);



border-radius: 999px;



border: 1px solid #09142e;



}



.engine-flip-card-back-hint {



margin-top: auto;



padding-top: 7px;



color: rgba(255,255,255,.62);



font-size: 7px;



line-height: 1.2;



letter-spacing: 1px;



text-transform: uppercase;



font-weight: 800;



}



/* =========================================================



VEHICLE / MODEL SHOWCASE CARDS



========================================================= */



.vehicle-showcase-section {



width: 100%;



max-width: 1300px;



margin: 24px auto 16px;



}



.vehicle-showcase-grid {



display: flex;



flex-wrap: nowrap;



gap: 24px;



width: 100%;



overflow-x: auto;



overflow-y: hidden;



padding: 0 0 6px;



scrollbar-width: thin;



scrollbar-color: #9fc9ee transparent;



-webkit-overflow-scrolling: touch;



}



.vehicle-showcase-grid::-webkit-scrollbar {



height: 8px;



}



.vehicle-showcase-grid::-webkit-scrollbar-track {



background: transparent;



}



.vehicle-showcase-grid::-webkit-scrollbar-thumb {



background: #9fc9ee;



border-radius: 999px;



border: 0;



}



.vehicle-showcase-grid::-webkit-scrollbar-thumb:hover {



background: #7fb7e6;



}



.vehicle-showcase-card {



min-width: 0;



flex: 0 0 calc((100% - 72px) / 4);



width: calc((100% - 72px) / 4);



overflow: hidden;



background: #fff;



border: 1px solid #d9e6f1;



border-radius: 20px;



box-shadow:



0 18px 42px rgba(26,72,112,.10),



0 5px 16px rgba(26,72,112,.06);



}



.vehicle-showcase-image-wrap {



height: 220px;



display: flex;



align-items: center;



justify-content: center;



padding: 24px 22px 12px;



background:



radial-gradient(



circle at 50% 45%,



rgba(231,243,255,.9) 0%,



rgba(231,243,255,0) 64%



),



linear-gradient(180deg,#f7fbff 0%,#fff 100%);



border-bottom: 1px solid #e7eff6;



}



.vehicle-showcase-image {



width: 100%;



height: 100%;



object-fit: contain;



filter: drop-shadow(0 18px 24px rgba(11,28,45,.14));



}



.vehicle-showcase-body {



padding: 21px 22px 23px;



}



.vehicle-showcase-label {



margin-bottom: 9px;



color: #1767d8;



font-size: 10px;



line-height: 1;



letter-spacing: 1.7px;



text-transform: uppercase;



font-weight: 800;



}



.vehicle-showcase-body h3 {



margin: 0 0 11px;



color: #173b68;



font-size: 18px;



line-height: 1.18;



letter-spacing: -.3px;



font-weight: 500;



}



.vehicle-showcase-toggle {



position: absolute;



width: 1px;



height: 1px;



opacity: 0;



pointer-events: none;



}



.vehicle-showcase-text {



color: #53677c;



font-size: 15px;



line-height: 1.62;



max-height: 2.45em;



overflow: hidden;



position: relative;



}



.vehicle-showcase-text::after {



content: "";



position: absolute;



right: 0;



bottom: 0;



width: 42%;



height: 1.55em;



background:



linear-gradient(



90deg,



rgba(255,255,255,0),



#fff 72%



);



pointer-events: none;



}



.vehicle-showcase-more {



display: inline-flex;



align-items: center;



margin-top: 10px;



color: var(--blue);



font-size: 13px;



line-height: 1.2;



font-weight: 800;



cursor: pointer;



user-select: none;



}



.vehicle-showcase-more-close {



display: none;



}



.vehicle-showcase-toggle:checked ~ .vehicle-showcase-text {



max-height: none;



overflow: visible;



}



.vehicle-showcase-toggle:checked ~ .vehicle-showcase-text::after {



display: none;



}



.vehicle-showcase-toggle:checked ~ .vehicle-showcase-more .vehicle-showcase-more-open {



display: none;



}



.vehicle-showcase-toggle:checked ~ .vehicle-showcase-more .vehicle-showcase-more-close {



display: inline;



}



/* =========================================================



FLOATING GET QUOTE BUTTON + CENTERED QUOTE POPUP



========================================================= */



.sr-only {



position: absolute;



width: 1px;



height: 1px;



padding: 0;



margin: -1px;



overflow: hidden;



clip: rect(0, 0, 0, 0);



white-space: nowrap;



border: 0;



}



.quote-fab {



position: fixed;



right: 24px;



bottom: 24px;



z-index: 1200;



display: inline-flex;



align-items: center;



justify-content: center;



gap: 10px;



min-width: 182px;



height: 52px;



padding: 0 20px;



border: 0;



border-radius: 12px;



background: linear-gradient(



180deg,



#2f5db8 0%,



#173a83 100%



);



color: #fff;



box-shadow: 0 10px 28px rgba(17, 45, 105, 0.28);



font: inherit;



font-size: 15px;



font-weight: 800;



cursor: pointer;



transition:



transform 0.18s ease,



box-shadow 0.18s ease;



}



.quote-fab:hover {



transform: translateY(-2px);



box-shadow: 0 14px 32px rgba(17, 45, 105, 0.34);



}



.quote-fab:focus-visible {



outline: 3px solid rgba(47, 131, 234, 0.24);



outline-offset: 3px;



}



.quote-fab-arrow {



font-size: 23px;



line-height: 1;



margin-top: -2px;



}



.quote-modal[hidden] {



display: none !important;



}



.quote-modal {



position: fixed;



inset: 0;



z-index: 1300;



display: grid;



place-items: center;



padding: 24px;



}



.quote-modal-backdrop {



position: absolute;



inset: 0;



background: rgba(11, 31, 69, 0.22);



backdrop-filter: blur(3px);



}



.quote-modal-card {



position: relative;



z-index: 1;



width: min(100%, 540px);



max-height: calc(100vh - 28px);



overflow-y: auto;



padding: 28px 30px 24px;



border: 2px solid #d9dceb;



border-radius: 15px;



background:



linear-gradient(



135deg,



#eef0f9 0%,



#f8f4f8 100%



);



box-shadow:



0 28px 70px rgba(11, 31, 69, 0.22),



0 8px 24px rgba(11, 31, 69, 0.10);



}



.quote-modal-close {



position: absolute;



top: 10px;



right: 12px;



width: 34px;



height: 34px;



border: 0;



border-radius: 50%;



background: transparent;



color: #4b5e77;



font-size: 27px;



line-height: 1;



cursor: pointer;



}



.quote-modal-close:hover,



.quote-modal-close:focus-visible {



background: rgba(23, 103, 216, 0.08);



color: var(--blue);



outline: none;



}



.quote-modal-heading {



text-align: center;



padding: 0 34px 22px;



}



.quote-modal-heading h2 {



margin: 0;



color: #0e1117;



font-size: 25px;



line-height: 1.16;



font-weight: 800;



letter-spacing: -0.45px;



}



.quote-modal-heading p {



margin: 5px 0 0;



color: #5d6d88;



font-size: 16px;



line-height: 1.35;



}



.quote-form {



display: flex;



flex-direction: column;



align-items: stretch;



}



.quote-registration-plate {



display: grid;



grid-template-columns: 40px 1fr;



width: 100%;



height: 80px;



overflow: hidden;



border: 3px solid #111;



border-radius: 6px;



background: #ffd34b;



box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);



}



.quote-uk-panel {



display: flex;



flex-direction: column;



align-items: center;



justify-content: center;



gap: 1px;



background: #1763d4;



color: #fff;



line-height: 1;



}



.quote-uk-flag {



display: block;



font-size: 16px;



line-height: 1;



}



.quote-uk-panel strong {



font-size: 17px;



font-weight: 800;



}



.quote-registration-plate input {



width: 100%;



height: 100%;



padding: 0 12px;



border: 0;



outline: none;



background: transparent;



color: #0c0c0c;



text-align: center;



font: inherit;



font-size: 42px;



line-height: 1;



font-weight: 900;



letter-spacing: -1.2px;



text-transform: uppercase;



}



.quote-registration-plate input::placeholder {



color: #0c0c0c;



opacity: 1;



}



.quote-registration-plate input:focus {



box-shadow: none;



}



.quote-submit {



display: inline-flex;



align-items: center;



justify-content: center;



gap: 10px;



width: min(100%, 285px);



height: 45px;



margin: 15px auto 0;



border: 0;



border-radius: 9px;



background: linear-gradient(



180deg,



#2f58ad 0%,



#17377d 100%



);



color: #fff;



box-shadow:



0 6px 13px rgba(17, 49, 113, 0.30),



inset 0 1px 0 rgba(255, 255, 255, 0.12);



font: inherit;



font-size: 16px;



font-weight: 800;



cursor: pointer;



}



.quote-submit:hover {



transform: translateY(-1px);



}



.quote-submit:focus-visible {



outline: 3px solid rgba(47, 131, 234, 0.24);



outline-offset: 3px;



}



.quote-submit span:last-child {



font-size: 23px;



line-height: 1;



margin-top: -2px;



}



.quote-benefits {



display: grid;



grid-template-columns: repeat(3, minmax(0, 1fr));



gap: 12px;



margin-top: 27px;



color: #202a3a;



}



.quote-benefits span {



display: inline-flex;



align-items: center;



justify-content: center;



gap: 7px;



min-width: 0;



text-align: center;



}



.quote-benefits i {



flex: 0 0 auto;



color: var(--blue);



font-size: 15px;



line-height: 1;



font-style: normal;



}



.quote-benefits b {



font-size: 12px;



line-height: 1.25;



font-weight: 750;



}



.quote-secure {



display: flex;



align-items: center;



justify-content: center;



gap: 8px;



margin-top: 24px;



color: #475a78;



font-size: 13px;



line-height: 1.4;



text-align: center;



}



.quote-secure > span:first-child {



color: #1c54b3;



font-size: 16px;



line-height: 1;



}



body.quote-modal-open {



overflow: hidden;



}



/* =========================================================



RESPONSIVE



========================================================= */



@media (max-width: 1100px) {



.generation-cards-grid {



gap: 18px;



}



.generation-card {



flex-basis: calc((100% - 36px) / 3);



width: calc((100% - 36px) / 3);



}



.engine-flip-grid {



gap: 18px;



}



.engine-flip-card {



flex-basis: calc((100% - 18px) / 2);



width: calc((100% - 18px) / 2);



height: 178px;



}



.engine-flip-card-image-wrap {



flex-basis: 150px;



width: 150px;



height: 150px;



}



.engine-flip-card-image {



width: 142px;



height: 142px;



max-width: 142px;



max-height: 142px;



}



.engine-flip-card-front-title {



font-size: 20px;



}



.engine-flip-card-front-preview {



font-size: 14px;



}



.vehicle-showcase-grid {



gap: 20px;



}



.vehicle-showcase-card {



flex-basis: calc((100% - 40px) / 3);



width: calc((100% - 40px) / 3);



}



.steps-flow-cards {



gap: 20px;



}



.steps-flow-card {



flex-basis: calc((100% - 40px) / 3);



width: calc((100% - 40px) / 3) !important;



height: 160px !important;



}



.steps-flow-card:not(:last-child)::after {



width: 16px;



}



}



@media (max-width: 900px) {



.guide-toc-desktop {



display: none;



}



.guide-toc-mobile {



display: block;



}



.guide-toc-inner {



min-height: 56px;



}



.main-nav {



display: none;



}



.hero-inner {



grid-template-columns: 1fr;



min-height: auto;



}



.hero-copy {



max-width: none;



padding-left: 0;



padding-top: 0;



}



.hero-visual {



min-height: 0;



}



.hero-engine {



width: min(100%, 520px);

margin-top: -15px !important;



}



.pros-cons-grid {



grid-template-columns: 1fr;



}



.registration-cta {



grid-template-columns: 68px minmax(0, 1fr);



gap: 16px;



padding: 22px;



}



.registration-cta-icon {



width: 68px;



height: 68px;



flex-basis: 68px;



border-radius: 14px;



}



.registration-cta-icon svg {



width: 43px;



height: 43px;



}



.registration-cta-divider {



display: none;



}



.registration-widget {



grid-column: 1 / -1;



}



.site-offer {



flex-direction: column;



align-items: flex-start;



}



}



/* =========================================================



MOBILE



========================================================= */



@media (max-width: 640px) {



.guide-toc-inner {



width: min(



calc(100% - 30px),



var(--max)



);



}



.section-shell {



width: min(



calc(100% - 30px),



var(--max)



);



}



.hero {



padding: 100px 0 14px;



}



.hero-inner {



gap: 12px;



}



.hero-circle {



width: 340px;



height: 340px;



right: -2px;



top: 44%;



}



.hero-diagonal-strips {



width: 320px;



height: 610px;



right: -102px;



top: 0;



transform: scale(.86);



transform-origin: top right;



}



.hero-engine {



width: min(100%, 430px);



transform: translateX(0);



padding-top: 10px;



}



.hero h1 {



font-size: 45px;



letter-spacing: -2.0px;



}



.hero-intro {



font-size: 17px;



}



.feature-strip {



grid-template-columns: 1fr 1fr;



gap: 18px;



margin-top: 30px;



}



.catalog-hero {



padding: 55px 0;



}



.catalog-hero h1 {



font-size: 48px;



letter-spacing: -2.5px;



}



.guide-content {



padding: 0;



}



.guide-section {



padding: 26px 0 28px;



}



.guide-section-inner {



width: min(



calc(100% - 30px),



var(--max)



);



}



.content-heading-section {



padding: 0 0 14px;



margin: 0;



}



.section-heading {



margin-bottom: 14px;



}



.section-heading h2 {



letter-spacing: -1.8px;



font-weight: 650;



margin-top: 12px;



}



.content-h3 {



font-size: 23px;



line-height: 1.24;



letter-spacing: -0.2px;



font-weight: 450;



margin-top: 22px;



margin-bottom: 9px;



}



.content-paragraph {



margin-bottom: 14px;



}



.content-block {



margin: 20px 0 26px;



}



.data-table {



min-width: 650px;



}



.engine-table-cell {



gap: 8px;



}



.engine-table-icon {



width: 28px;



height: 28px;



flex-basis: 28px;



}



.engine-table-icon svg {



width: 17px;



height: 17px;



}



/* Generation cards */



.generation-cards-section {



margin: 22px auto 14px;



}



.generation-cards-grid {



gap: 16px;



}



.generation-card {



flex-basis: 100%;



width: 100%;



}



.generation-card-header {



padding: 18px 18px 5px;



}



.generation-card-image-wrap {



height: 170px;



margin-inline: 12px;



}



.generation-card-body {



padding: 16px 18px 19px;



}



.generation-card-body h3 {



font-size: 16px;



}



.generation-card-description {



height: 92px;



max-height: 92px;



font-size: 14px;



line-height: 1.58;



padding-right: 15px;



}



/* Content cards */



.content-cards {



gap: 18px;



}



.content-card-body {



padding: 21px;



}



/* Lists */



.content-list {



margin: 18px 0 26px;



}



/* Pros / cons */



.pros-cons-grid {



gap: 18px;



margin: 24px 0;



}



.pros-card,



.cons-card {



padding: 22px;



}



/* Ranked */



.ranked-list {



margin: 24px 0;



}



.ranked-item {



gap: 14px;



padding: 17px;



}



/* Steps */



.steps-flow-cards {



gap: 16px;



}



.steps-flow-card {



flex-basis: 100%;



width: 100% !important;



height: 152px !important;



}



.steps-flow-card:not(:last-child)::after {



width: 12px;



}



.steps-flow-card-inner {



padding: 14px 14px 13px !important;



}



.steps-flow-number {



flex-basis: 32px;



width: 32px;



height: 32px;



font-size: 14px;



}



.steps-flow-card h3 {



margin-top: 9px;



font-size: 15px;



}



.steps-flow-copy p {



font-size: 12px;



line-height: 1.45;



}



/* Takeaways */



.takeaway {



padding: 12px;



margin: 22px 0;



gap: 12px;



}



/* Image blocks */



.content-image {



margin: 26px 0;



padding: 18px;



}



.info-image-block {



gap: 12px;



margin: 22px 0 28px;



padding: 18px;



}



.info-image-icon {



width: 42px;



height: 42px;



flex-basis: 42px;



}



.info-image-icon svg {



width: 23px;



height: 23px;



}



.info-image-content p {



font-size: 15px;



line-height: 1.58;



}



/* Vehicle cards */



.vehicle-showcase-section {



margin: 22px auto 14px;



}



.vehicle-showcase-grid {



gap: 18px;



}



.vehicle-showcase-card {



flex-basis: 100%;



width: 100%;



}



.vehicle-showcase-image-wrap {



height: 210px;



padding: 24px 22px 12px;



}



.vehicle-showcase-body {



padding: 20px 20px 22px;



}



.vehicle-showcase-body h3 {



font-size: 16px;



}



.vehicle-showcase-text {



font-size: 14px;



line-height: 1.58;



max-height: 2.38em;



}



/* Registration CTA */



.registration-cta {



grid-template-columns: 56px minmax(0, 1fr);



gap: 12px;



margin: 32px 0;



padding: 18px;



border-radius: 16px;



}



.registration-cta-icon {



width: 56px;



height: 56px;



flex-basis: 56px;



border-radius: 13px;



}



.registration-cta-icon svg {



width: 37px;



height: 37px;



}



.registration-cta-copy h2 {



font-size: 23px;



line-height: 1.08;



margin: 5px 0 6px;



}



.registration-cta-copy p {



font-size: 13px;



line-height: 1.45;



}



.registration-widget {



grid-column: 1 / -1;



}



.registration-input,



.registration-widget button {



height: 46px;



}



/* FAQ */





.faq-item summary {



padding: 10px;



display: flex;



align-items: center;



gap: 14px;



font-size: 15px;



}



.faq-item summary::after {



float: none;



margin-left: auto;



flex: 0 0 auto;



}



.faq-answer {



padding: 0 10px 10px;



font-size: 14px;



line-height: 1.6;



}



/* Site offer */



.site-offer {



margin-top: 30px;



padding: 24px;



}



/* Quote */



.quote-fab {



right: 14px;



bottom: 14px;



min-width: 160px;



height: 48px;



padding: 0 17px;



font-size: 14px;



}



.quote-modal {



padding: 14px;



}



.quote-modal-card {



padding: 24px 16px 18px;



border-radius: 14px;



}



.quote-modal-heading {



padding: 2px 24px 18px;



}



.quote-modal-heading h2 {



font-size: 21px;



}



.quote-modal-heading p {



font-size: 14px;



}



.quote-registration-plate {



height: 66px;



}



.quote-registration-plate input {



font-size: 31px;



letter-spacing: -0.7px;



}



.quote-benefits {



grid-template-columns: 1fr;



gap: 9px;



margin-top: 22px;



}



.quote-benefits span {



justify-content: flex-start;



text-align: left;



}



.quote-secure {



margin-top: 18px;



font-size: 12px;



}



/* Engine cards */



.engine-flip-grid {



gap: 16px;



}



.engine-flip-card {



flex-basis: 100%;



width: 100%;



height: 142px;



}



.engine-flip-card-front {



padding: 0 7px 0 6px;



}



.engine-flip-card-image-wrap {



flex-basis: 128px;



width: 128px;



height: 128px;



}



.engine-flip-card-image {



width: 122px;



height: 122px;



max-width: 122px;



max-height: 122px;



}



.engine-flip-card-front-content {



padding: 2px 3px 2px 2px;



}



.engine-flip-card-front-title {



font-size: 16px;



line-height: 1.13;



}



.engine-flip-card-front-preview {



font-size: 13.5px;



line-height: 1.30;



max-height: 36px;



}



.engine-flip-card-front-arrow {



flex-basis: 35px;



width: 35px;



height: 35px;



margin-left: 3px;



}



.engine-flip-card-front-arrow svg {



width: 20px;



height: 20px;



}



}



/* =========================================================



   MOBILE HERO — KEEP BACKGROUND PATTERNS BELOW BADGES



   This override intentionally changes only the mobile hero.



   ========================================================= */



@media (max-width: 640px) {



  .hero-copy {



    position: relative;



    z-index: 2;



    min-width: 0;



  }



  .hero-visual {



    position: relative;



    z-index: 1;



    width: 100%;



    min-width: 0;



    min-height: clamp(240px, 65vw, 360px);



    overflow: hidden;



    margin-top: 12px;



  }



  .hero-graphic {



    position: absolute;



    inset: 0;



    overflow: hidden;



    pointer-events: none;



  }



  .hero-circle {



    width: min(86vw, 340px);



    height: min(86vw, 340px);



    max-width: 100%;



    right: 0;



    top: 50%;



    transform: translateY(-50%);



  }



  /* Hide the diagonal bar patterns on phones; keep the circle */



  .hero-diagonal-strips {



    display: none !important;



  }



  .hero-engine {



    position: relative;



    z-index: 2;



    width: min(100%, 430px);



    max-width: 100%;



    padding-top: 10px;



    transform: none;



  }



  .hero-engine-image {



    display: block;



    width: 100%;



    max-width: 100%;



    height: auto;



    object-fit: contain;



  }



}



/* =========================================================



   TABLET HERO — KEEP BACKGROUND ART BELOW FEATURE BADGES



   Applies only to screens from 641px to 900px.



   ========================================================= */



@media (min-width: 641px) and (max-width: 900px) {



  .hero-inner {



    grid-template-columns: minmax(0, 1fr);



    gap: 16px;



  }



  .hero-copy {



    position: relative;



    z-index: 2;



    min-width: 0;



  }



  .hero-visual {



    position: relative;



    z-index: 1;



    width: 100%;



    min-width: 0;



    min-height: clamp(320px, 52vw, 440px);



    margin-top: 12px;



    overflow: hidden;



  }



  .hero-graphic {



    position: absolute;



    inset: 0;



    overflow: hidden;



    pointer-events: none;



  }



  .hero-circle {



    width: min(64vw, 440px);



    height: min(64vw, 440px);



    right: 0;



    top: 50%;



    transform: translateY(-50%);



  }



  .hero-diagonal-strips {



    top: 0;



    bottom: 0;



    left: 0;



    right: 0;



    width: 100%;



    height: 100%;



    overflow: hidden;



  }



  .hero-engine {



    width: min(100%, 520px);



    max-width: 100%;



    transform: none;



  }



  .hero-engine-image {



    width: 100%;



    max-width: 100%;



    height: auto;



    object-fit: contain;



  }



}



/* Vehicle Identification separator: keep it centered between copy and form on desktop. */

@media (min-width: 769px) {

  .registration-cta {

    /* Allocate a responsive track to the form so the divider sits nearer

       the true midpoint between the copy and the form, not at the far right. */

    grid-template-columns: 82px minmax(0, 1fr) 1px clamp(280px, 25vw, 310px);

    column-gap: 24px;

  }



  .registration-cta-divider {

    display: block;

    align-self: center;

    justify-self: center;

    width: 1px;

    height: 100px;

    margin: 0;

    transform: none;

  }



  .registration-widget {

    width: 100%;

    max-width: 290px;

    justify-self: end;

  }

}


/* Vehicle model cards: match generation-card paragraph scrolling */
.vehicle-showcase-text.generation-card-description {
  position: relative;
  height: 96px;
  max-height: 96px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 10px;
  font-size: 14px;
  line-height: 1.62;
  scrollbar-width: thin;
  scrollbar-color: #9fc9ee #edf5fc;
}

.vehicle-showcase-text.generation-card-description::after {
  display: none;
}

.vehicle-showcase-text.generation-card-description::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.vehicle-showcase-text.generation-card-description::-webkit-scrollbar-track {
  background: #edf5fc;
  border-radius: 999px;
}

.vehicle-showcase-text.generation-card-description::-webkit-scrollbar-thumb {
  background: #9fc9ee;
  border-radius: 999px;
  border: 1px solid #edf5fc;
}

.vehicle-showcase-text.generation-card-description::-webkit-scrollbar-thumb:hover {
  background: #7fb7e6;
}