/* ============================================================================
   Integrations hub + CRM detail pages - shared hero styling.
   ============================================================================ */
/* Hero photo: Jack's "Data Photo In Motion" shot (4K source cut to 1600w / 2560w WebP;
   the 11 MB SVG wrapper is never served). Same treatment as the guide heroes: dark base,
   cover image, left-to-right scrim so the copy stays legible. */
.landlord-hero.landlord-hero--image {
    background-color: #1c1c1c;
    background-image:
        linear-gradient(to right, rgba(28,28,28,0.90) 0%, rgba(28,28,28,0.70) 42%, rgba(28,28,28,0.28) 68%, rgba(28,28,28,0.06) 100%),
        url('/assets-v2/images/integrations-hero-data-motion-1600.webp');
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
}
@media (min-width: 1600px) {
    .landlord-hero.landlord-hero--image {
        background-image:
            linear-gradient(to right, rgba(28,28,28,0.90) 0%, rgba(28,28,28,0.70) 42%, rgba(28,28,28,0.28) 68%, rgba(28,28,28,0.06) 100%),
            url('/assets-v2/images/integrations-hero-data-motion-2560.webp');
    }
}
.landlord-hero--image .landlord-hero-proof { margin: 0 0 22px; }

/* Hero primary CTA: white button with orange arrow block (ported from /how-it-works) - reads better on the photo */
.about-btn-secondary { display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--dark); position: relative; padding: 16px 96px 16px 46px; font-family: var(--font-primary); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 0.16px; text-decoration: none; transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out; width: fit-content; min-height: 48px; box-sizing: border-box; }
.about-btn-secondary .arrow { padding: 14px; background: var(--primary); position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease-in-out; }
.about-btn-secondary .arrow img { filter: brightness(0) invert(1); transform: rotate(45deg); transition: all 0.4s ease-in-out; }
.about-btn-secondary:hover, .about-btn-secondary:focus, .about-btn-secondary:focus-visible { background: var(--primary); color: var(--white); }
.about-btn-secondary:hover .arrow, .about-btn-secondary:focus .arrow { background: var(--white); }
.about-btn-secondary:hover .arrow img, .about-btn-secondary:focus .arrow img { filter: none; transform: rotate(0deg); }
@media (max-width: 767px) { .landlord-hero-ctas .about-btn-secondary { width: 100%; justify-content: center; } }

/* ---- CRM detail: "How the integration works" - left-aligned header + numbered list in the
   style of the /list-your-property "Why use Boxpod" feature list (numbers instead of ticks).
   Header on top, list underneath, all left aligned. ---- */
.integration-how--list { padding: 56px 0; background: var(--white); }
.integration-how--list .integration-how-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.integration-how--list .integration-how-head h2 { max-width: 760px; }
.integration-how--list .integration-how-head .common-small-tag-mark { margin-bottom: 18px; }
.integration-how--list .integration-how-head h2 { font-family: var(--font-primary); font-size: 28px; line-height: 115%; font-weight: var(--fw-500); color: var(--dark); margin: 0; letter-spacing: -0.01em; }
.integration-how--list .integration-steps { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-direction: column; gap: 14px; }
.integration-how--list .integration-step { display: flex; align-items: flex-start; gap: 14px; background: none; padding: 0; border: 0; }
.integration-how--list .integration-step-num { flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; background: var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-primary); font-weight: var(--fw-700); font-size: 13px; line-height: 1; }
.integration-how--list .integration-step-text { font-family: var(--font-primary); font-size: 16px; font-weight: 500; line-height: 145%; color: var(--dark); }
@media (min-width: 768px) {
    .integration-how--list { padding: 72px 0; }
    .integration-how--list .integration-how-head h2 { font-size: 34px; }
    .integration-how--list .integration-step-text { font-size: 18px; line-height: 140%; }
    .integration-how--list .integration-step-num { width: 28px; height: 28px; font-size: 14px; margin-top: 0; }
    .integration-how--list .integration-steps { gap: 16px; }
}
@media (min-width: 992px) {
    .integration-how--list { padding: 90px 0; }
    .integration-how--list .integration-how-grid { gap: 40px; }
    .integration-how--list .integration-how-head h2 { font-size: 40px; line-height: 110%; }
    .integration-how--list .integration-steps { max-width: 760px; }
}
.integration-how--list .integration-how-note { font-family: var(--font-primary); font-size: 16px; font-weight: 500; line-height: 145%; color: var(--dark); margin: 28px 0 0; max-width: 760px; }
@media (min-width: 768px) { .integration-how--list .integration-how-note { font-size: 18px; line-height: 140%; } }
.integration-how--list .integration-how-note a { color: var(--primary); font-weight: 600; text-decoration: none; }
.integration-how--list .integration-how-note a:hover { text-decoration: underline; }

/* Pricing shelf on the integrations pages: tighter than the standalone /pricing page */
.license-free-section { padding: 56px 0 64px; }
.license-free-section .license-free-main-title { margin-bottom: 36px; }
@media (min-width: 768px) {
    .license-free-section { padding: 72px 0 80px; }
    .license-free-section .license-free-main-title { margin-bottom: 44px; }
}