/* Hello Solar — index page styles */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FAF7F2;
    color: #1C1917;
    overflow-x: hidden;
}

/* Universal No Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
}

/* 4K Precision-Blended Edge Mask */
.hero-seamless-mask {
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0.6) 28%, rgba(0, 0, 0, 1) 48%),
        linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.65) 94%, transparent 100%),
        radial-gradient(ellipse 42% 30% at 100% 100%, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.65) 65%, #000 100%);
    -webkit-mask-composite: destination-in, destination-in;
    mask-image:
        linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0.6) 28%, rgba(0, 0, 0, 1) 48%),
        linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.65) 94%, transparent 100%),
        radial-gradient(ellipse 42% 30% at 100% 100%, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.65) 65%, #000 100%);
    mask-composite: intersect, intersect;
}

/* Mobile: let the house show behind the headline. The left-side fade of the mask is dropped and the
   photo is raised 140px; the readability scrim stays exactly as it was. */
@media (max-width: 767.98px) {
    .hero-seamless-mask {
        -webkit-mask-image:
            linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.65) 94%, transparent 100%),
            radial-gradient(ellipse 42% 30% at 100% 100%, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.65) 65%, #000 100%);
        -webkit-mask-composite: destination-in;
        mask-image:
            linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.65) 94%, transparent 100%),
            radial-gradient(ellipse 42% 30% at 100% 100%, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.65) 65%, #000 100%);
        mask-composite: intersect;
    }

    /* Raise the house so the whole house sits behind the headline/stats instead of under the card. */
    .hero-photo-backdrop {
        transform: translateY(-140px);
    }
}

/* Mobile/tablet menu button: 2 lines, no white box. Lines are 8px apart (center to center),
   so each moves 4px to meet in the middle for the 'X'. */
#mobileMenuBtn {
    gap: 6px;
}

/* End the photo fade at the banner's bottom, before the wrapper clips it. */
@media (min-width: 1024px) {
    .hero-photo-backdrop {
        height: 100%;
    }
}

/* Nudge the house photo to the right so it doesn't crowd the headline (tablet and up).
   The hero wrapper clips the overflow, so only a sliver of the trees on the far right is hidden. */
@media (min-width: 768px) {
    .hero-photo-backdrop {
        transform: translateX(4%);
    }
}

@media (min-width: 1024px) {
    .hero-photo-backdrop {
        transform: translateX(6%);
    }
}

/* Hero composition (tablet → desktop, 768–1535px): photo and copy scale together with the viewport,
   so the house stays at the same size/position next to the headline instead of jumping between breakpoints. */
@media (min-width: 768px) and (max-width: 1535.98px) {
    .hero-photo-backdrop.hero-photo-backdrop {
        width: 64%;
        height: 52vw;
    }

    .hero-photo-backdrop.hero-photo-backdrop img {
        object-position: 80% 62%;
    }

    .hero-copy.hero-copy {
        max-width: 50vw;
    }

    .hero-title.hero-title {
        font-size: 4vw;
    }

    .hero-stats.hero-stats {
        max-width: min(480px, 40vw);
        column-gap: clamp(12px, 1.6vw, 24px);
    }

    .hero-stats.hero-stats .hero-stat-value {
        font-size: clamp(22px, 2.2vw, 30px);
    }

    .hero-stats.hero-stats .hero-stat-label {
        font-size: clamp(12px, 1vw, 14px);
        white-space: nowrap;
    }
}

@media (min-width: 1024px) and (max-width: 1535.98px) {
    .hero-photo-backdrop.hero-photo-backdrop {
        width: 68%;
        height: 48vw;
    }

    .hero-title.hero-title {
        font-size: 4.1vw;
    }
}

@media (min-width: 1280px) and (max-width: 1535.98px) {
    .hero-photo-backdrop.hero-photo-backdrop {
        width: 70%;
    }

    .hero-title.hero-title {
        font-size: min(4.3vw, 62px);
    }
}

/* Large screens (1536px+): keep the house at the size and crop it has at 1536px.
   The photo is portrait, so a wider box zooms in and cuts off the roof. Cap the box at its 1536px width
   (72% of 1536 = 1106px); it stays anchored to the right edge. */
@media (min-width: 1536px) {
    .hero-photo-backdrop.hero-photo-backdrop {
        max-width: 1106px;
    }
}

/* Big monitors (1728px+, e.g. 1920x1080/1200): show the hero exactly like a 1536px laptop, just scaled up.
   The whole top section (navbar, headline, stats, house, banner card) is zoomed together, so the house
   fits the same way it does on the laptop. The side padding is divided by the zoom so the left/right
   edges still line up with the sections below at 96px. */
@media (min-width: 1728px) {
    .hero-scale {
        zoom: 1.125;
    }

    .hero-scale .max-w-\[2000px\] {
        padding-left: calc(6rem / 1.125);
        padding-right: calc(6rem / 1.125);
        max-width: calc(2000px / 1.125);
    }
}

@media (min-width: 1920px) {
    .hero-scale {
        zoom: 1.25;
    }

    .hero-scale .max-w-\[2000px\] {
        padding-left: calc(6rem / 1.25);
        padding-right: calc(6rem / 1.25);
        max-width: calc(2000px / 1.25);
    }
}

@media (min-width: 2304px) {
    .hero-scale {
        zoom: 1.5;
    }

    .hero-scale .max-w-\[2000px\] {
        padding-left: calc(6rem / 1.5);
        padding-right: calc(6rem / 1.5);
        max-width: calc(2000px / 1.5);
    }
}

.hero-bottom-cloud {
    position: absolute;
    inset: 76% -4% -5% 60%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 100% 100%, #FAF7F2 12%, rgba(250, 247, 242, 0.95) 28%, rgba(250, 247, 242, 0.6) 45%, rgba(250, 247, 242, 0.15) 65%, transparent 80%);
    filter: blur(16px);
}

/* GPU Layer Promotion for Crisp 4K Scaling */
.render-4k {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

/* Option Card Selection Glow & Smooth Transitions */
.option-card {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease, border-color 300ms ease;
    cursor: pointer;
    user-select: none;
}

.option-card:not(.is-selected) {
    border-color: #FCD34D !important;
    border-width: 1.5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(0);
}

.option-card:not(.is-selected):hover {
    transform: translateY(-4px);
    border-color: #F59E0B !important;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.15) !important;
}

.option-card.is-selected {
    border-color: #F59E0B !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22), 0 16px 36px rgba(245, 158, 11, 0.22) !important;
    transform: translateY(-6px);
}

.option-card.is-selected:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28), 0 20px 40px rgba(245, 158, 11, 0.28) !important;
}

/* Carousel Track & Slide Transitions */
.options-carousel-viewport {
    overflow: hidden;
    /* clip: tapping or focusing a card can't scroll the strip out of line (hidden still allows that) */
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.options-carousel-track {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    align-items: stretch;
}

.option-card {
    flex: 0 0 100%;
    min-width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

/* Tablet: two packages per view so prices and specs never get clipped */
@media (min-width: 768px) {
    .option-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
        min-width: calc((100% - 1.5rem) / 2);
        min-height: 440px;
    }
}

@media (min-width: 1024px) {
    .option-card {
        flex: 0 0 calc((100% - 2 * 1.5rem) / 3);
        min-width: calc((100% - 2 * 1.5rem) / 3);
    }
}

@media (min-width: 1536px) {
    .options-carousel-track {
        gap: 2rem;
    }

    .option-card {
        flex: 0 0 calc((100% - 2 * 2rem) / 3);
        min-width: calc((100% - 2 * 2rem) / 3);
        min-height: 490px;
    }
}

/* ── Custom Dropdown Component ── */
.hs-dropdown {
    position: relative;
    width: 100%;
}

.hs-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    border: 1.5px solid #E5E0D8;
    border-radius: 14px;
    padding: 13px 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #1C1917;
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms;
    text-align: left;
    line-height: 1.4;
    gap: 10px;
    min-height: 50px;
}

.hs-dropdown-trigger:hover {
    border-color: #F59E0B;
}

.hs-dropdown-trigger:focus,
.hs-dropdown-trigger.is-open {
    border-color: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    outline: none;
}

.hs-dropdown-trigger .hs-dd-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-dropdown-trigger .hs-dd-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #78716c;
    transition: transform 250ms ease;
}

.hs-dropdown-trigger.is-open .hs-dd-chevron {
    transform: rotate(180deg);
}

/* Dropdown Panel (Desktop / Tablet: Floating) */
.hs-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 999;
    background: #FCFAF8;
    border: 1.5px solid #E5E0D8;
    border-radius: 16px;
    box-shadow: 0 16px 48px -12px rgba(28, 25, 23, 0.18), 0 4px 12px rgba(28, 25, 23, 0.06);
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.hs-dropdown-panel.is-visible {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.hs-dropdown-panel::-webkit-scrollbar {
    width: 6px;
}

.hs-dropdown-panel::-webkit-scrollbar-track {
    background: transparent;
}

.hs-dropdown-panel::-webkit-scrollbar-thumb {
    background: #d6d3d1;
    border-radius: 8px;
}

/* Dropdown Option Item */
.hs-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 11px;
    border: none;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #44403c;
    cursor: pointer;
    transition: background 150ms, color 150ms;
    text-align: left;
    line-height: 1.4;
}

.hs-dropdown-option:hover {
    background: #FFF7ED;
    color: #1C1917;
}

.hs-dropdown-option.is-active {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400e;
    font-weight: 800;
}

.hs-dropdown-option .hs-dd-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d6d3d1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
}

.hs-dropdown-option.is-active .hs-dd-check {
    background: #F59E0B;
    border-color: #F59E0B;
}

.hs-dropdown-option .hs-dd-check svg {
    width: 10px;
    height: 10px;
    stroke: white;
    stroke-width: 3;
    opacity: 0;
    transition: opacity 200ms;
}

.hs-dropdown-option.is-active .hs-dd-check svg {
    opacity: 1;
}

/* Dropdown Option: Two-line layout */
.hs-dd-opt-main {
    font-weight: 800;
    color: #1C1917;
    font-size: 13.5px;
}

.hs-dd-opt-sub {
    font-weight: 600;
    color: #78716c;
    font-size: 11.5px;
    margin-top: 1px;
}

.hs-dropdown-option.is-active .hs-dd-opt-main {
    color: #92400e;
}

.hs-dropdown-option.is-active .hs-dd-opt-sub {
    color: #b45309;
}

/* Mobile Bottom Sheet Overlay */
.hs-dropdown-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.hs-dropdown-overlay.is-visible {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
}

/* Mobile: Convert panel to bottom sheet */
@media (max-width: 639px) {
    .hs-dropdown-trigger {
        font-size: 13.5px;
        padding: 14px 16px;
        min-height: 52px;
        border-radius: 14px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .hs-dropdown-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        border-radius: 24px 24px 0 0;
        max-height: 70vh;
        padding: 8px 8px 24px;
        transform: translateY(100%);
        box-shadow: 0 -12px 48px -12px rgba(28, 25, 23, 0.2);
    }

    .hs-dropdown-panel.is-visible {
        transform: translateY(0);
    }

    .hs-dropdown-panel .hs-dd-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 10px 10px;
        border-bottom: 1px solid #E7E2D7;
        margin-bottom: 6px;
    }

    .hs-dropdown-option {
        padding: 14px 14px;
        font-size: 14px;
        border-radius: 12px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .hs-dd-opt-main {
        font-size: 14px;
    }

    .hs-dd-opt-sub {
        font-size: 12px;
        margin-top: 2px;
    }
}

@media (min-width: 640px) {
    .hs-dropdown-overlay {
        display: none !important;
        pointer-events: none !important;
    }

    .hs-dropdown-trigger {
        font-size: 14px;
        padding: 14px 18px;
    }

    .hs-dropdown-option {
        font-size: 13.5px;
        padding: 11px 14px;
    }

    .hs-dd-opt-main {
        font-size: 14px;
    }

    .hs-dd-opt-sub {
        font-size: 12px;
    }

    .hs-dropdown-panel .hs-dd-sheet-header {
        display: none;
    }
}

@media (min-width: 1536px) {
    .hs-dropdown-trigger {
        font-size: 15px;
        padding: 16px 20px;
    }

    .hs-dropdown-option {
        font-size: 14.5px;
        padding: 13px 16px;
    }
}

/* ── Inquiry form: consistent labels, inputs, validation and payment choice ── */
.lead-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #44403c;
}

.lead-input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    background: #fff;
    border: 1.5px solid #E5E0D8;
    border-radius: 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1C1917;
    transition: border-color 200ms, box-shadow 200ms;
}

.lead-input::placeholder {
    color: #a8a29e;
    font-weight: 500;
}

.lead-input:hover {
    border-color: #d6d0c5;
}

.lead-input:focus {
    outline: none;
    border-color: #F59E0B;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.lead-input.is-invalid,
.lead-input.is-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Field messages float under the field as a small bubble, so the form layout never shifts */
div:has(> .lead-error) {
    position: relative;
}

.lead-error {
    position: absolute;
    top: calc(100% + 4px);
    left: 10px;
    z-index: 30;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 5px 9px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #b91c1c;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(28, 25, 23, 0.12);
    pointer-events: none;
}

.lead-error::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 14px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-left: 1px solid #fecaca;
    border-top: 1px solid #fecaca;
    transform: rotate(45deg);
}

#leadForm .hs-dropdown-trigger {
    min-height: 50px;
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
}

.pay-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    text-align: left;
    background: #fff;
    border: 1.5px solid #E5E0D8;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.pay-option:hover {
    border-color: #F59E0B;
}

.pay-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.pay-option.is-active {
    border-color: #F59E0B;
    background: #FFFBEB;
    box-shadow: 0 0 0 1px #F59E0B inset;
}

.pay-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.pay-option-title {
    font-size: 13px;
    font-weight: 900;
    color: #1C1917;
}

.pay-option-dot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 2px solid #d6d3d1;
    background: #fff;
    transition: all 200ms;
}

.pay-option.is-active .pay-option-dot {
    border: 5px solid #F59E0B;
}

.pay-option-price {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #b45309;
    line-height: 1.2;
}

.pay-option-price small {
    font-size: 12px;
    font-weight: 700;
    color: #78716c;
}

.pay-option-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: #78716c;
    line-height: 1.35;
}

.pay-option-sub strong {
    font-weight: 800;
    color: #1C1917;
}

.lead-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    padding: 0 16px;
    border-radius: 14px;
    background: linear-gradient(to right, #f59e0b, #d97706);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 200ms, box-shadow 200ms;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.lead-submit:hover {
    filter: brightness(0.95);
    box-shadow: 0 6px 16px -6px rgba(217, 119, 6, 0.5);
}

.lead-submit:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Terms & Conditions: agree row in the forms + list in the Terms modal ── */
.hs-agree {
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid #E5E0D8;
    border-radius: 14px;
}

.hs-agree.is-invalid {
    border-color: #dc2626;
}

.hs-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1C1917;
    cursor: pointer;
}

.hs-check input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: #F59E0B;
    cursor: pointer;
}

.hs-terms-link {
    padding: 0;
    font: inherit;
    font-weight: 900;
    color: #b45309;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    cursor: pointer;
}

.hs-terms-link:hover {
    color: #92400e;
}

.hs-terms-list {
    margin: 0 0 8px;
    padding-left: 20px;
    list-style: decimal;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: #57534e;
}

.hs-terms-list li + li {
    margin-top: 8px;
}

.hs-terms-list strong {
    color: #1C1917;
}

/* ── Payment modal ── */
.hs-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #FFFBEB, #FFF4E0);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
}

.hs-amount-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #78716c;
}

.hs-amount-sub {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: #1C1917;
}

.hs-amount-value {
    font-size: 26px;
    font-weight: 900;
    color: #b45309;
    white-space: nowrap;
}

.hs-bank {
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid #E5E0D8;
    border-radius: 16px;
}

.hs-bank-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #44403c;
}

.hs-bank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
}

.hs-bank-row + .hs-bank-row {
    border-top: 1px solid #F0EBE3;
}

.hs-bank-row > span:first-child {
    font-weight: 700;
    color: #78716c;
}

.hs-bank-row strong {
    font-weight: 900;
    color: #1C1917;
    text-align: right;
}

.hs-bank-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hs-copy {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    color: #b45309;
    background: #FFFBEB;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 9999px;
    cursor: pointer;
}

.hs-copy:hover {
    background: #FEF3C7;
}

.hs-bank-note {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #78716c;
}

.hs-notice {
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #57534e;
    background: #F8F6F2;
    border-left: 3px solid #F59E0B;
    border-radius: 10px;
}

.hs-notice strong {
    color: #1C1917;
}

.hs-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 14px;
    text-align: center;
    background: #fff;
    border: 1.5px dashed #d6d0c5;
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 200ms, background-color 200ms;
}

.hs-upload:hover,
.hs-upload:focus-within {
    border-color: #F59E0B;
    background: #FFFDF7;
}

.hs-upload.is-invalid {
    border-color: #dc2626;
}

.hs-upload.has-file {
    border-style: solid;
    border-color: #F59E0B;
}

.hs-upload-empty {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #78716c;
}

.hs-upload-empty strong {
    font-size: 14px;
    font-weight: 900;
    color: #b45309;
}

.hs-upload-file {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
}

.hs-upload-file img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #E5E0D8;
}

.hs-upload-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    color: #1C1917;
}

.hs-upload-change {
    font-size: 12px;
    font-weight: 800;
    color: #b45309;
}

.hs-pay-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

.hs-btn-secondary {
    height: 52px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 800;
    color: #44403c;
    background: #fff;
    border: 1.5px solid #E5E0D8;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 200ms, background-color 200ms;
}

.hs-pay-actions .lead-submit {
    margin-top: 0;
}

.hs-btn-secondary:hover {
    border-color: #F59E0B;
    background: #FFFBEB;
}

/* ── Location pickers (real PH city / municipality and barangay) ── */
.hs-combo {
    position: relative;
}

.hs-combo .lead-input {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.hs-combo .lead-input:disabled {
    background-color: #F5F3EF;
    cursor: not-allowed;
}

.hs-combo-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #E5E0D8;
    border-radius: 14px;
    box-shadow: 0 12px 28px -12px rgba(28, 25, 23, 0.25);
}

.hs-combo-list li {
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #1C1917;
    border-radius: 10px;
    cursor: pointer;
}

.hs-combo-list li small {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #78716c;
}

.hs-combo-list li.is-active,
.hs-combo-list li:hover {
    background: #FFFBEB;
}

.hs-combo-list li.hs-combo-empty {
    font-weight: 600;
    color: #78716c;
    cursor: default;
    background: none;
}

/* ── Hero stats (₱10,000 · 5 Years · 0%): slightly larger, same amber as the "Start saving" banner ── */
.hero-stats.hero-stats .hero-stat-value {
    font-size: 26px;
    background-image: linear-gradient(to right, #F59E0B, #FBBF24);
}

.hero-stats.hero-stats .hero-stat-label {
    font-size: 13px;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .hero-stats.hero-stats {
        max-width: 500px;
    }

    .hero-stats.hero-stats .hero-stat-value {
        font-size: 32px;
    }

    .hero-stats.hero-stats .hero-stat-label {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    .hero-stats.hero-stats {
        max-width: min(520px, 42vw);
    }

    .hero-stats.hero-stats .hero-stat-value {
        font-size: clamp(28px, 2.5vw, 36px);
    }
}

@media (min-width: 1536px) {
    .hero-stats.hero-stats {
        max-width: 580px;
    }

    .hero-stats.hero-stats .hero-stat-value {
        font-size: 40px;
    }

    .hero-stats.hero-stats .hero-stat-label {
        font-size: 16px;
    }
}

/* Pay Now (Buy Now / Site Assessment forms): shorter, centered button */
.lead-submit.lead-submit--compact {
    width: fit-content;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
}


/* ── Fit-on-one-screen: Recommendation result (wizard step 4) ── */
.rec-result { display: flex; flex-direction: column; gap: 14px; }
.rec-head > * + * { margin-top: 4px; }
.rec-head h3 { line-height: 1.1; }
.rec-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.rec-card > .grid:first-child > div { padding: 9px 8px; }
.rec-fin { padding-top: 10px; }
.rec-why { padding: 12px 16px; }
.rec-why h4 { margin-bottom: 6px; }
.rec-why ul > li + li { margin-top: 4px; }
.rec-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-actions .rec-btn { padding-top: 14px; padding-bottom: 14px; white-space: nowrap; }
.rec-actions .rec-back { grid-column: 1 / -1; padding: 2px 0 0; }
@media (max-width: 639px) {
    .rec-actions { grid-template-columns: 1fr; }
    .rec-actions .rec-btn { white-space: normal; }
}

/* ── Fit-on-one-screen: Buy Now / Reserve Your System form ── */
#leadFormHeader { margin-bottom: 14px; }
#leadForm > * + * { margin-top: 12px; }
#leadForm .lead-label { margin-bottom: 5px; }
#leadForm .pay-option { min-height: 82px; padding: 10px 14px; }
#leadForm .pay-option-price { margin-top: 2px; }
.lead-final-row { display: flex; align-items: center; gap: 12px; }
.lead-final-row .hs-agree { flex: 1; min-width: 0; }
.lead-final-row .lead-submit.lead-submit--compact { margin: 0; flex-shrink: 0; min-width: 170px; padding: 0 28px; }
@media (max-width: 639px) {
    .lead-final-row { flex-direction: column; align-items: stretch; }
    .lead-final-row .lead-submit.lead-submit--compact { margin: 0 auto; min-width: 200px; }
}

/* Short screens (small laptops): trim the modal padding a little more */
@media (min-width: 640px) and (max-height: 760px) {
    #recommendationModal > div, #inquiryModal > div { padding-top: 20px; padding-bottom: 20px; max-height: 96vh; }
    .rec-result { gap: 10px; }
    #leadForm > * + * { margin-top: 10px; }
}

/* ── Installment term switch (Explore other options) ── */
.term-switch-wrap {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

.term-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid #F1E3C8;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.08);
    max-width: 100%;
}

.term-switch-label {
    padding: 0 8px 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #8A817A;
    white-space: nowrap;
}

.term-switch button {
    padding: 8px 16px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #57534E;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms, color 200ms;
}

.term-switch button:hover {
    color: #B45309;
}

.term-switch button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}

.term-switch button.is-active {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}

@media (max-width: 420px) {
    .term-switch-label { display: none; }
    .term-switch button { padding: 8px 13px; font-size: 12.5px; }
}

/* Installment term options in Buy Now: price on the right */
.hs-dropdown-option .hs-dd-term-price {
    margin-left: auto;
    padding-left: 12px;
    font-size: 13px;
    font-weight: 800;
    color: #b45309;
    white-space: nowrap;
}

.hs-dropdown-option .hs-dd-term-price small {
    font-weight: 600;
    color: #78716c;
}

/* Recommendation wizard: room for the round Back button (top left, same size as the close button) */
#recommendationModal .wiz-head { padding-left: 52px; min-height: 44px; }

/* Recommendation card: the "explore other options" button has no text, so don't let it add an empty gap
   under "Choose HS 6 Lite". It shows again automatically if text is ever put back in it. */
#featuredExploreOptionsBtn:empty {
    display: none;
}

/* Recommendation card (mobile/tablet, stacked layout): tighter spacing around the two divider lines
   (specs → price, price → checklist). Was 32px gap + 24px padding on each side of a line; now 16px + 16px. */
@media (max-width: 1023.98px) {
    #featured-recommendation > .grid {
        row-gap: 1rem;
    }

    #featured-recommendation > .grid > div:nth-child(2) {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* "Explore other options" carousel (mobile): less empty space around the card and before "How it works".
   Card → dots was 20px + 24px + 12px; now 8px + 8px. Dots → "How it works" drops the extra 24px so it
   uses the same 48px gap as the other sections. */
@media (max-width: 767.98px) {
    .options-carousel-viewport {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }

    #solar-systems > #optionsPageDots {
        margin-top: 0.5rem;
        padding-top: 0;
    }

    #how-it-works {
        padding-top: 0;
    }
}

/* "Start saving on electricity today" banner (mobile): less empty space above, inside, and below it.
   Above: 48px → 32px. Inside padding: 32px → 24px top/bottom, 20px sides; text → button: 24px → 16px.
   Below (end of page content): 64px → 32px. */
@media (max-width: 767.98px) {
    #how-it-works + section {
        margin-top: 2rem;
        padding: 1.5rem 1.25rem;
        gap: 1rem;
    }

    main.max-w-\[2000px\] {
        padding-bottom: 2rem;
    }
}