/* LP colour preview: retain the existing layout and full-colour photography. */
:root {
    --primary-orange: #171717;
    --brand-blue: #171717;
    --bg-surface: #f6f6f6;
}

.hero,
.problems,
.before-after,
.cta {
    background: #fff;
}

.hero-bg::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 30%, rgba(255, 255, 255, 0.56) 48%, rgba(255, 255, 255, 0.16) 66%, transparent 100%);
}

.hero-title-accent::after,
.feature-accent::after,
.hero-brand-sub::after {
    background: rgba(0, 0, 0, 0.09);
}

.marker {
    background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.12) 60%);
}

.problem-list li::before,
.col-sphoto,
.comparison .sphoto-cell,
.ba-box,
.ba-copy-label {
    background: #f3f3f3;
}

.comparison th:not(.col-sphoto) {
    background: #fafafa;
}

.comparison .sphoto-cell {
    border-left-color: #ddd;
    border-right-color: #ddd;
}

.ba-slide,
.price-box {
    border-color: #e4e4e4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.ba-after,
.ba-arrow {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ba-before .ba-label {
    background: rgba(80, 80, 80, 0.86);
}

.ba-copy-label {
    color: #666;
}

.ba-copy-label-after {
    color: #171717;
    background: #eaeaea;
}

.solution-main span,
.price-number {
    text-shadow: none;
}

.cta::before {
    background: none;
}

.header-btn,
.btn-lrg {
    background: #171717;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.header-btn:hover,
.btn-lrg:hover {
    background: #333;
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.header-btn:active,
.btn-lrg:active {
    transform: translateY(0);
}

.header-btn:focus-visible,
.btn-lrg:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.btn-lrg::after {
    display: none;
}

.seo-guide-link a {
    color: #333;
}

.seo-guide-link a:hover {
    color: #000;
}

.seo-guide-link a:focus-visible {
    outline-color: #171717;
}

@media (max-width: 767px) {
    .hero-bg::after {
        background: linear-gradient(180deg, transparent calc(104vw - 36px), #fff calc(104vw + 16px));
    }

    .hero-title .hero-title-line .hero-title-accent::after {
        background: rgba(0, 0, 0, 0.09);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-btn,
    .btn-lrg {
        transition: none;
    }

    .header-btn:hover,
    .btn-lrg:hover {
        transform: none;
    }
}