/* =====================================================================
   AdsDrop — Service Landing pages (scoped to .landing)
   Brand: black #1a1a1a + orange #FF5A24 only. Loaded only on landing pages.
   Matches the homepage's airy, WHITE section language (not a gray canvas):
   full-width light sections, centred underlined titles, and the site's own
   bordered cards. Reuses .btn / .section-title / .why-card / .step-card.
   ===================================================================== */

.landing { display: block; }
.landing .container { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }

/* ---- Hero (matches the homepage hero: near-white, warm radial) ------ */
.landing-hero {
    position: relative;
    padding: 132px 0 72px;
    background:
        radial-gradient(1100px 460px at 85% -10%, rgba(255, 90, 36, .10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
    border-bottom: 1px solid #eef0f3;
    overflow: hidden;
}
.landing-hero::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--secondary-color, #FF5A24), #ff8a4d);
}
.landing-crumbs { font-size: 13px; color: #8a8f98; margin-bottom: 22px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.landing-crumbs a { color: #8a8f98; text-decoration: none; transition: color .2s; }
.landing-crumbs a:hover { color: var(--secondary-color, #FF5A24); }
.landing-crumbs span[aria-hidden] { opacity: .6; }

/* Same split as the homepage hero (1fr 1fr, 4rem gap) so the banner image
   renders at the exact same size, unifying the look across the site. */
.landing-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.landing-hero-inner.no-media { grid-template-columns: 1fr; }
.landing-hero-content { min-width: 0; }

.landing-badge {
    display: inline-block;
    background: rgba(255, 90, 36, .12);
    color: var(--secondary-color, #FF5A24);
    font-weight: 800; font-size: 13.5px;
    padding: 7px 16px; border-radius: 999px;
    letter-spacing: .2px; margin-bottom: 18px;
}
.landing-hero h1 {
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.25; margin: 0 0 18px;
    color: var(--dark-color, #1a1a1a); font-weight: 800;
}
.landing-lead {
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.9; color: #55585f;
    max-width: 640px; margin: 0 0 30px;
}
.landing-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Framed, rounded banner illustration */
.landing-hero-media {
    background: linear-gradient(160deg, #ffffff 0%, #f6f7f9 100%);
    border: 1px solid #eceef2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(20, 24, 31, .10);
}
.landing-hero-media img { width: 100%; height: auto; display: block; }

/* ---- Sections: airy full-width bands like the homepage ------------- */
.landing-section { padding: 74px 0; }
.landing-section .section-title { margin-bottom: 12px; }
.landing-section .section-subtitle { margin-bottom: 6px; }
/* the site alternates white with a whisper-light warm band */
.landing .landing-importance,
.landing .landing-includes {
    background:
        radial-gradient(900px 380px at 50% -20%, rgba(255, 90, 36, .045), transparent 60%),
        #faf9f8;
}

/* ---- Importance checklist (site-style bordered cards) -------------- */
.landing-checklist {
    list-style: none; margin: 44px auto 0; padding: 0;
    max-width: 960px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px;
}
.landing-checklist li {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px; padding: 24px 22px;
    transition: transform .25s, box-shadow .25s;
}
.landing-checklist li:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20, 24, 31, .08); }
.lc-check {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--secondary-color, #FF5A24); color: #fff;
    font-weight: 900; font-size: 15px; line-height: 1;
    box-shadow: 0 4px 12px rgba(255, 90, 36, .35);
}
.lc-body { display: flex; flex-direction: column; gap: 4px; }
.lc-body strong { color: var(--dark-color, #1a1a1a); font-size: 16.5px; }
.lc-body span { color: #5f636b; font-size: 14px; line-height: 1.85; }

/* ---- FAQ accordion (site-style cards) ------------------------------ */
.landing-faq .faq-list { max-width: 860px; margin: 44px auto 0; }
.faq-item {
    background: #fff; border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 16px; margin-bottom: 14px; overflow: hidden;
    transition: box-shadow .25s, border-color .25s;
}
.faq-item[open] { border-color: rgba(255, 90, 36, .45); box-shadow: 0 12px 32px rgba(20, 24, 31, .07); }
.faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; font-weight: 700; font-size: 16px;
    color: var(--dark-color, #1a1a1a);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--secondary-color, #FF5A24); }
.faq-mark {
    flex: 0 0 auto; position: relative; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 90, 36, .12); color: var(--secondary-color, #FF5A24);
    font-size: 0; transition: transform .25s;
}
/* Plus drawn with two centred bars (a text «+» sits off-centre in most fonts). */
.faq-mark::before, .faq-mark::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    background: currentColor; border-radius: 2px;
}
.faq-mark::before { width: 12px; height: 2.5px; transform: translate(-50%, -50%); }
.faq-mark::after  { width: 2.5px; height: 12px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-answer { padding: 0 22px 20px; }
.faq-answer p { margin: 0; color: #55585f; font-size: 14.5px; line-height: 1.95; }

/* ---- Final CTA (rounded band on white, like the homepage bands) ---- */
.landing-cta { padding: 20px 0 78px; }
.landing-cta > .container {
    background:
        radial-gradient(700px 320px at 80% 0%, rgba(255, 90, 36, .24), transparent 60%),
        linear-gradient(135deg, #17181d 0%, #26272e 100%);
    border-radius: 28px;
    padding: clamp(50px, 5vw, 74px) 32px;
    text-align: center;
}
.landing-cta h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 14px; color: #fff; font-weight: 800; }
.landing-cta p { color: #c9ccd3; font-size: 17px; line-height: 1.85; max-width: 620px; margin: 0 auto 28px; }
.landing-cta .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.landing-cta .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .5); }
.landing-cta .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ---- Responsive ---------------------------------------------------- */
/* Match the homepage hero on stacked screens: image ON TOP, content centred. */
@media (max-width: 900px) {
    .landing-hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .landing-hero-media { order: -1; max-width: 440px; margin: 0 auto; }
    .landing-hero-content { text-align: center; }
    .landing-hero .hero-cta { justify-content: center; }
    .landing-lead { margin-inline: auto; }
    .landing-crumbs { justify-content: center; }
}
@media (max-width: 768px) {
    .landing-hero { padding: 108px 0 54px; }
    .landing-section { padding: 54px 0; }
    .landing-cta { padding: 14px 0 46px; }
    .landing .container { padding-inline: 18px; }
    .landing-hero-media { border-radius: 14px; }
}