/*
 * Steesto landing look (steesto.eu before the builder release): logo sky blue (--main-color-one) and navy
 * (--main-color-three), heavy headings with a highlighted word ({h}word{/h} → .color), a doodle above section titles,
 * blue square icons, a light-blue box, FAQ cards with +/−, a blue call to action.
 * Scoped to the section classes that landlord:seed-pages sets (stl-*); the owner can reuse them in the editor
 * (section → Advanced → CSS classes).
 */

.js-pb-section[class*="stl-"] .color { color: var(--main-color-one); }

/* Section titles: heavy, with the vendor's doodle (tittleShape2.svg) at the top left */
.stl-hero h1,
.stl-features h2,
.stl-steps h2,
.stl-faq h2,
.stl-page-head h1 {
    position: relative;
    display: inline-block;
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.stl-hero h1::before,
.stl-features h2::before,
.stl-steps h2::before,
.stl-faq h2::before {
    content: "";
    position: absolute;
    top: -18px;
    left: -34px;
    width: 30px;
    height: 30px;
    background: url(../img/icon/tittleShape2.svg) no-repeat 0 0 / contain;
}
.stl-features h2, .stl-steps h2, .stl-faq h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; }

/* Buttons in the brand colours */
.js-pb-section[class*="stl-"] .btn { border-radius: 6px; font-weight: 500; padding: 13px 28px; font-size: 16px; transition: background-color .2s, color .2s, border-color .2s; }
.js-pb-section[class*="stl-"] .btn-primary { background-color: var(--main-color-one); border-color: var(--main-color-one); color: #fff; }
.js-pb-section[class*="stl-"] .btn-primary:hover,
.js-pb-section[class*="stl-"] .btn-primary:focus { background-color: var(--main-color-three); border-color: var(--main-color-three); color: #fff; }
.js-pb-section[class*="stl-"] .btn-outline-secondary,
.js-pb-section[class*="stl-"] .btn-outline-dark { background: transparent; border: 1px solid var(--main-color-three); color: var(--main-color-three); }
.js-pb-section[class*="stl-"] .btn-outline-secondary:hover,
.js-pb-section[class*="stl-"] .btn-outline-dark:hover { background: var(--main-color-three); color: #fff; }

/* Hero: text left, the owner's illustration right, the sparkle under the text */
.stl-hero .js-pb-hero { padding: 24px 0 !important; }
.stl-hero h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.15; margin-bottom: 24px !important; }
.stl-hero .lead { color: var(--paragraph-color) !important; font-size: 17px; line-height: 1.7; max-width: 540px; }
.stl-hero .js-pb-hero .col-lg-6:first-child { position: relative; padding-bottom: 56px; }
.stl-hero .js-pb-hero .col-lg-6:first-child::after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: url(../../uploads/media-uploader/title-shape-uorkshop1764837228.png) no-repeat center / contain;
}
.stl-hero .js-pb-hero__highlights { color: var(--paragraph-color); font-size: 14px; margin-top: 20px; }
.stl-hero .js-pb-hero__highlights i { color: var(--main-color-one); }
.stl-hero .js-pb-hero__media img { border-radius: 0 !important; max-height: 520px; width: auto; }

/* "Why Steesto": white cards, blue square icons */
.stl-features .js-pb-features > .container > .text-center p { color: var(--paragraph-color) !important; font-size: 16px; }
.stl-features .js-pb-feature {
    background: #fff;
    border: 1px solid #edf2f5 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    transition: box-shadow .25s, transform .25s;
}
.stl-features .js-pb-feature:hover { box-shadow: 0 14px 40px rgba(0, 57, 79, .08); transform: translateY(-2px); }
.stl-features .js-pb-feature__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
    background: var(--main-color-one) !important;
    color: #fff !important;
    font-size: 20px;
}
.stl-features .js-pb-feature h3 { color: var(--heading-color); font-family: var(--heading-font); font-size: 19px; font-weight: 700 !important; }
.stl-features .js-pb-feature p { color: var(--paragraph-color) !important; font-size: 14px; }

/* "Select. Build. Launch!": the light-blue box */
.stl-steps .js-pb-features { background: var(--bg-light-one, #f2fcff); border-radius: 16px; padding: 64px 24px !important; }
.stl-steps .js-pb-features > .container > .text-center p { color: var(--paragraph-color) !important; }
.stl-steps .js-pb-feature { border: 0 !important; background: transparent; }
.stl-steps .js-pb-feature__icon {
    width: 64px !important;
    height: 64px !important;
    background: #fff !important;
    color: var(--main-color-one) !important;
    font-size: 24px;
    box-shadow: 0 10px 30px rgba(83, 200, 233, .25);
}
.stl-steps .js-pb-feature h3 { color: var(--heading-color); font-family: var(--heading-font); font-size: 20px; font-weight: 800 !important; }
.stl-steps .js-pb-feature p { color: var(--paragraph-color) !important; font-size: 15px; }

/* FAQ: illustration left, title and cards right */
.stl-faq .js-pb-image { max-width: 100%; max-height: 460px; }
.stl-faq .js-pb-faq { padding: 0 !important; }
.stl-faq .js-pb-faq .row { justify-content: flex-start !important; }
.stl-faq .js-pb-faq .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
.stl-faq .js-pb-faq .text-center { text-align: left !important; margin-bottom: 28px !important; }
.stl-faq .accordion-item { border: 1px solid #edf2f5 !important; border-radius: 10px !important; margin-bottom: 14px; overflow: hidden; background: #fff; }
.stl-faq .accordion-button {
    background: #fff !important;
    color: var(--heading-color) !important;
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 700;
    padding: 20px 22px;
    box-shadow: none !important;
}
.stl-faq .accordion-button::after {
    content: "+";
    background: none !important;
    width: auto;
    height: auto;
    transform: none !important;
    margin-left: auto;
    padding-left: 16px;
    color: var(--main-color-one);
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
}
.stl-faq .accordion-button:not(.collapsed)::after { content: "−"; }
.stl-faq .accordion-body { color: var(--paragraph-color); font-size: 14px; line-height: 1.7; padding: 0 22px 20px; }

/* Call to action: the blue box with white text */
.stl-cta .js-pb-cta { border-radius: 16px !important; padding: 64px 24px !important; margin: 0 !important; }
.stl-cta .js-pb-cta h2 { color: #fff; font-family: var(--heading-font); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); }
.stl-cta .js-pb-cta p { color: #fff; opacity: .92 !important; font-size: 16px; }
.js-pb-section.stl-cta .js-pb-cta .btn-primary { background: #fff; border-color: #fff; color: var(--main-color-three); font-weight: 600; }
.js-pb-section.stl-cta .js-pb-cta .btn-primary:hover { background: var(--main-color-three); border-color: var(--main-color-three); color: #fff; }

/* Inner pages: the page title */
.stl-page-head h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.2; }
.stl-page-head .js-pb-heading[style*="center"] { display: block; }
.stl-page-head .js-pb-text { color: var(--paragraph-color); }

@media (max-width: 991.98px) {
    .stl-hero .js-pb-hero__media img { max-height: 380px; }
    .stl-faq .js-pb-image { max-height: 300px; margin-bottom: 8px; }
}
@media (max-width: 575.98px) {
    .stl-hero h1::before, .stl-features h2::before, .stl-steps h2::before, .stl-faq h2::before { left: -8px; top: -24px; width: 22px; height: 22px; }
    .stl-steps .js-pb-features, .stl-cta .js-pb-cta { padding: 44px 16px !important; }
}