/*
 * Canonical Hero styles — shared by Compare V3 and Solutions V2 (New-Solutions).
 * Values reconciled from Solutions V2's rules (source of truth per explicit decision,
 * 2026-08-26), which used to be split across css/solutions-landing.css and
 * css/solutions-landing-v2.css with some internally-shadowed/dead duplicates cleaned up here
 * (a duplicate `.hero__subtitle` rule in solutions-landing.css that copied `.hero__title`'s
 * green/uppercase/14px style was shadowed by a higher-specificity nested rule and never
 * actually applied — dropped rather than carried forward). Compare V3's own hero.css is
 * retired; see SECTION_UNIFICATION_PLAYBOOK.md section 6.
 */

/*
 * Compare V3-wide spacing plumbing, not Hero-specific: this used to be the only place in the
 * whole theme declaring ".compare-v3 .new-solutions-component-spacing" (originally in the
 * retired compare-v3-components/hero/hero.css) — every Compare V3 section using that spacing
 * class depends on it, not just Hero. Kept here since Hero's own CSS is guaranteed to load on
 * every real Compare V3 page. Harmless no-op on Solutions V2 pages (the ".compare-v3" ancestor
 * never matches there).
 */
.compare-v3 .new-solutions-component-spacing {
    padding-top: var(--ns-desktop-padding-top, 0);
    padding-bottom: var(--ns-desktop-padding-bottom, 0);
}

@media (max-width: 767px) {
    .compare-v3 .new-solutions-component-spacing {
        padding-top: var(--ns-mobile-padding-top, 0);
        padding-bottom: var(--ns-mobile-padding-bottom, 0);
    }
}

.hero {
    overflow: hidden;
    background-color: #FAF7F5;
    color: var(--Text-Primary, #282828);
}

.hero .hero__wrapper {
    display: grid;
    align-items: center;
    gap: 77px;
    grid-template-columns: 528px minmax(0, 1fr);
}

.hero .content {
    align-self: center;
    width: 528px;
    max-width: 528px;
    text-align: left;
}

.hero .content__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

/* Color/size/weight/uppercase now come from the shared .sd-type-eyebrow token (css/typography.css). */
.hero .hero__title {
    margin: 0;
    text-align: left;
}

/* NEW/Heading/xl */
.hero .hero__subtitle {
    margin: 0;
    color: #262626;
    text-align: left;
    text-transform: initial;
}

.hero .compare-v2-hero__title .compare-v2-hero__underline {
    color: #006746;
    text-decoration-line: underline;
    text-decoration-color: rgba(122, 204, 150, 0.3);
    text-decoration-thickness: 0.35em;
    text-underline-offset: -0.18em;
    text-decoration-skip-ink: none;
}

/* NEW/Body/lg/Regular */
.hero .hero__text {
    width: 528px;
    max-width: 528px;
    margin: 0;
    color: rgba(0, 0, 0, 0.75);
    text-align: left;
}

.hero .hero__picture {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    overflow: visible;
    transform: translateY(4px);
}

.hero .hero__picture img {
    display: block;
    width: calc(50vw + 5px);
    min-width: 948px;
    max-width: 948px;
    max-height: 540px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.hero .hero-reviews {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
}

.hero .hero-reviews__stars {
    display: flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}

/* The shared markup renders stars as inline <svg>, not <img> — solutions-landing.css's old
   rule targeted "img" and never actually matched its own SVG markup (dead selector, sizing
   came from the SVG's own width/height attributes instead). Using the working svg selector. */
.hero .hero-reviews__stars svg {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.hero .hero-reviews__text {
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.hero .hero-reviews__platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hero .hero-reviews__platforms img {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    object-fit: contain;
}

.hero .hero-qb-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    border-radius: 8px;
}

.hero .hero-qb-badge__divider {
    display: block;
    width: 1px;
    height: 16px;
    background: #d9d9d9;
}

.hero .hero-qb-badge__text {
    color: #777;
    white-space: nowrap;
}

.hero .compare-v2-text-width-control[data-compare-width="1"] {
    max-width: var(--compare-v2-max-width) !important;
}

@media (max-width: 1240px) {
    .hero .hero__picture img {
        min-width: calc(50vw + 195px);
    }
}

@media (max-width: 1199px) {
    .hero .hero__wrapper {
        grid-template-columns: minmax(420px, 528px) minmax(0, 1fr);
    }

    .hero .content {
        width: auto;
        max-width: 528px;
    }

    .hero .hero__picture img {
        width: calc(50vw + 5px);
        min-width: calc(50vw + 195px);
        max-width: 948px;
        transform: none;
    }
}

@media (max-width: 767px) {
    .hero {
        overflow: visible;
        padding-top: 32px;
        padding-bottom: 48px;
    }

    .hero .hero__wrapper {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .hero .content {
        width: 100%;
        max-width: 100%;
    }

    .hero .content__inner {
        gap: 16px;
        margin-bottom: 24px;
    }

    .hero .compare-v2-hero__title .compare-v2-hero__underline {
        text-decoration-thickness: 0.28em;
        text-underline-offset: -0.16em;
    }

    .hero .hero__text {
        width: auto;
        max-width: 100%;
    }

    .hero .sd-button {
        width: 100%;
    }

    .hero .hero__picture {
        grid-area: auto;
        width: 100%;
        margin: 24px 0 0;
        transform: none;
        align-self: center;
    }

    .hero .hero__picture img {
        width: 100%;
        min-width: unset;
        max-width: 100%;
        object-position: center;
        transform: none;
    }

    .hero .hero-reviews {
        margin-top: 24px;
    }

    .hero .hero-reviews__text {
        white-space: normal;
    }

    .hero .hero-qb-badge {
        margin-top: 0;
    }

    .hero .compare-v2-text-width-control[data-compare-width="1"] {
        max-width: unset !important;
    }
}