/* These refinements apply only to the three public product pages that load this file. */
.professional-hero,
.passport-product-hero,
.garage-app-presentation .garage-solution-hero {
    padding: clamp(48px, 6vw, 88px) 0;
    background: radial-gradient(ellipse at 85% 15%, #123e58 0%, #092b40 45%, #071f32 100%);
}

.professional-hero::after { height: 3px; background: #ffbf00; }
.professional-hero__grid,
.passport-product-hero__grid,
.garage-app-presentation .garage-solution-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
}

.professional-hero h1,
.passport-product-hero h1,
.garage-app-presentation .garage-solution-hero h1 {
    color: #fff;
    font-size: clamp(36px, 4.5vw, 62px);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.professional-hero .professional-hero__lead,
.passport-product-hero .passport-product-hero__lead,
.garage-app-presentation .garage-solution-hero__lead {
    color: #d2e2eb !important;
    font-size: clamp(18px, 1.8vw, 21px) !important;
    line-height: 1.6 !important;
    margin-bottom: 20px;
    max-width: 540px;
}

.professional-hero .feature-audience,
.garage-app-presentation .garage-audience-note,
.passport-product-hero .driver-hero__assurances li {
    color: #c2d7e3;
    font-size: 14px;
}

.passport-product-hero .driver-eyebrow,
.garage-app-presentation .garage-solution-hero .garage-eyebrow { color: #71dce1; }
.passport-product-hero .bmg-mot-check-link { color: #d2e2eb; }
.passport-product-hero .bmg-mot-check-link a { color: #fff; text-decoration: underline; }

/* Keep the established actions prominent without changing their destinations. */
.professional-hero .driver-button--primary,
.passport-product-hero .driver-button--primary,
.garage-app-presentation .garage-solution-hero .garage-button--primary {
    background: #ffbf00;
    color: #09273b !important;
    border-color: #ffbf00;
    box-shadow: none;
}

.professional-hero .driver-button--primary:hover,
.passport-product-hero .driver-button--primary:hover,
.garage-app-presentation .garage-solution-hero .garage-button--primary:hover { background: #ffd04a; }

.professional-hero .driver-button--secondary,
.passport-product-hero .driver-button--secondary,
.garage-app-presentation .garage-solution-hero .garage-button--secondary {
    color: #fff !important;
    background: transparent;
    border-color: #91afc1;
}

.professional-hero .driver-button--secondary:hover,
.passport-product-hero .driver-button--secondary:hover,
.garage-app-presentation .garage-solution-hero .garage-button--secondary:hover {
    background: #fff;
    color: #09273b !important;
    border-color: #fff;
}

.professional-hero .driver-button:focus-visible,
.passport-product-hero .driver-button:focus-visible,
.garage-app-presentation .garage-solution-hero .garage-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.professional-demo,
.passport-product-demo,
.garage-app-presentation .garage-solution-hero__proof {
    min-width: 0;
    width: 100%;
    max-width: 520px;
    justify-self: center;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgb(0 0 0 / 15%);
}

.passport-product-demo { display: block; min-height: 0; }
.passport-product-demo__rail { display: none; }
.passport-product-demo__content { background: #fff; padding: 24px; }
.passport-product-demo__content > header { flex-wrap: wrap; gap: 12px; }
.professional-demo__header small,
.passport-product-demo__content > header small { font-size: 13px; color: #526b7c; }

.feature-preview-items { display: grid; gap: 12px; }
.feature-preview-items article { padding: 18px; background: #f3f8fa; border: 1px solid #e0e9ef; border-radius: 12px; }
.feature-preview-items article > span { display: block; color: #506779; font-size: 13px; margin-bottom: 6px; }
.feature-preview-items strong { display: block; color: #09273b; font-size: 21px; line-height: 1.35; }
.feature-preview-items article p { font-size: 14px; line-height: 1.5; color: #506779; margin: 6px 0 0; }
.feature-preview-tag { display: inline-block; margin-left: 6px; border-radius: 20px; padding: 3px 8px; background: #fff0d4; color: #80500b; font-size: 12px; }
.driver-public-page .feature-preview-note { font-size: 12px; line-height: 1.5; margin: 14px 0 0; color: #526b7c; }
.garage-app-presentation .garage-solution-hero__proof h2 { font-size: 27px; }
.garage-app-presentation .garage-solution-proof-list strong { font-size: 18px; }
.garage-app-presentation .garage-solution-proof-list small { font-size: 14px; line-height: 1.5; }

/* Stack the real layout on phones instead of scaling down a desktop preview. */
@media (max-width: 991px) {
    .professional-hero__grid,
    .passport-product-hero__grid,
    .garage-app-presentation .garage-solution-hero__grid { grid-template-columns: 1fr; gap: 32px; }
    .professional-hero__copy,
    .passport-product-hero__copy { max-width: 640px; }
}

@media (max-width: 575px) {
    .professional-hero,
    .passport-product-hero,
    .garage-app-presentation .garage-solution-hero { padding: 36px 0; }
    .professional-demo,
    .passport-product-demo__content,
    .garage-app-presentation .garage-solution-hero__proof { padding: 18px; }
    .professional-hero .driver-hero__actions,
    .passport-product-hero .driver-hero__actions,
    .garage-app-presentation .garage-hero-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .feature-preview-items article { padding: 14px; }
    .feature-preview-items strong { font-size: 19px; }
}