/* ==========================================================================
   REVVARO — /for-dealers
   Rides on style.css for the header, hero, section titles, step cards,
   feature cards, FAQ, signup band and footer. This file only carries what is
   genuinely unique to the trade page: the proof strip, the dark statement
   band and the pricing table. Everything else deliberately reuses the
   homepage's components so the two pages read as one site.
   ========================================================================== */

.dealers-page { background: #fff; }

/* --------------------------------------------------------------------------
   Hero — the shared .hero-section handles the image, overlay and typography.
   Only the button spacing is page-specific, because the homepage hero has no
   button under its subtext.
   -------------------------------------------------------------------------- */
.dealers-page .hero-content .hero-cta { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Proof strip — sits directly under the hero on the dark heading color, the
   same value the homepage uses for its footer, so it reads as part of the
   same palette rather than a new one.
   -------------------------------------------------------------------------- */
.d-strip {
    background: var(--color-text-heading, #1A202C);
    padding: 32px 0;
}
.d-strip-grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    text-align: center;
}
.d-strip-grid div { display: flex; flex-direction: column; gap: 6px; }
.d-strip-grid strong {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.02em;
    line-height: 1.15;
}
.d-strip-grid span {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 13.5px; line-height: 1.5; color: #A9B6C4;
}

/* --------------------------------------------------------------------------
   Feature cards — .feature-card is absolutely positioned on the homepage
   because it lives in a 3D carousel. Here the same card sits in an ordinary
   grid, so the positioning and fixed size are unwound and the visual
   treatment (radius, shadow, icon bubble) is inherited untouched.
   -------------------------------------------------------------------------- */
.d-cards {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    margin-top: 44px;
}
.d-cards .feature-card {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    padding: 34px 28px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.d-cards .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(0, 90, 156, .20);
}
.d-cards .feature-card .card-icon { width: 66px; height: 66px; margin-bottom: 20px; }
.d-cards .feature-card i { font-size: 28px; }
.d-cards .feature-card h3 { font-size: 20px; margin-bottom: 12px; }
.d-cards .feature-card p { font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Dark statement band — mirrors the homepage's dark showcase section in
   color and weight, minus the pinned scroll animation.
   -------------------------------------------------------------------------- */
.d-statement {
    background: #000;
    padding: 92px 0;
    text-align: center;
}
.d-statement h2 {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: clamp(26px, 3.8vw, 40px);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: #fff;
    max-width: 860px;
    margin: 0 auto 22px;
}
.d-statement p {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 17px;
    line-height: 1.75;
    color: #A9B6C4;
    max-width: 720px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.d-pricing-section { background: var(--color-background-light, #F7FAFC); }

.d-pricing {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    margin-top: 44px;
}
.d-plan {
    position: relative;
    background: var(--color-background-white, #fff);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 24px;      /* matches .feature-card on the homepage */
    padding: 34px 28px 28px;
    text-align: left;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 90, 156, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}
.d-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(0, 90, 156, .16);
}
.d-plan-featured {
    border: 2px solid var(--color-primary, #005A9C);
    box-shadow: 0 24px 56px rgba(0, 90, 156, .22);
}
.d-badge {
    position: absolute; top: -13px; left: 28px;
    background: var(--color-primary, #005A9C); color: #fff;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
}
.d-plan h3 {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 21px; font-weight: 900; letter-spacing: -.015em;
    color: var(--color-text-heading, #1A202C); margin: 0 0 8px;
}
.d-price {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 44px; font-weight: 900; letter-spacing: -.035em;
    color: var(--color-text-heading, #1A202C); line-height: 1;
}
.d-price span { font-size: 16px; font-weight: 700; color: #718096; letter-spacing: 0; }
.d-plan-for {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 13.5px; color: #718096; margin: 10px 0 22px;
}
.d-plan ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.d-plan li {
    position: relative; padding-left: 26px; margin-bottom: 12px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 15px; line-height: 1.5; color: var(--color-text-body, #4A5568);
}
.d-plan li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 2px;
    font-size: 12px; color: #38A169;
}
.d-plan li strong { color: var(--color-text-heading, #1A202C); font-weight: 700; }
.d-plan-cta { width: 100%; text-align: center; }
.d-plan:not(.d-plan-featured) .d-plan-cta {
    background: transparent;
    color: var(--color-primary, #005A9C);
    border: 2px solid var(--color-primary, #005A9C);
}
.d-plan:not(.d-plan-featured) .d-plan-cta:hover {
    background: var(--color-primary, #005A9C);
    color: #fff;
}

.d-consumer-note {
    text-align: center; margin-top: 34px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 15px; color: #718096;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .d-strip { padding: 26px 0; }
    .d-strip-grid { gap: 20px; }
    .d-strip-grid strong { font-size: 22px; }
    .d-statement { padding: 62px 0; }
    .d-statement p { font-size: 15.5px; }
    .d-cards { gap: 16px; margin-top: 32px; }
    .d-cards .feature-card { padding: 26px 22px; }
    .d-pricing { gap: 20px; margin-top: 34px; }
    .d-plan { padding: 30px 22px 24px; }
}