/* ==========================================================================
   "Start your own photo booth business" section — the ONE business block used
   site-wide (_BizSection). Hoisted out of home-extra.css to a global file so it
   renders IDENTICALLY on the homepage AND every software landing (AIPB loads its
   own stylesheet, not home-extra — this guarantees parity). Values mirror the
   homepage original exactly. .hx-h2 / .hx-btn-* come from aurora-typography.
   ========================================================================== */
.hx-biz { padding: clamp(80px, 9vw, 128px) 0; background: #fff; }
/* Ghost CTA ("Chat with us") — light-section style. AIPB doesn't load
   home-extra.css, so the bare .hx-btn-outline rendered unstyled; define it here
   (global) to match the coral primary's height. */
.hx-biz .hx-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 14px 28px;
    border-radius: 12px;
    font-family: var(--font-display, 'Inter', sans-serif); font-size: 16px; font-weight: 700;
    color: var(--color-text, #101828);
    background: #fff;
    border: 1.5px solid var(--gray-300, #D0D5DD);
    text-decoration: none; cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.hx-biz .hx-btn-outline:hover {
    border-color: var(--hue-accent, #7F56D9);
    color: var(--hue-accent, #7F56D9);
    background: #fff;
}
.hx-biz-w {
    max-width: var(--hdr-container-max, 1280px);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
.hx-biz-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hue-accent, #7F56D9); margin-bottom: 14px; }
.hx-biz-text .hx-h2 { text-align: left; margin: 0 0 16px; }
.hx-biz-sub { font-size: 16px; line-height: 1.65; color: #667085; margin: 0 0 28px; max-width: 52ch; }
.hx-biz-feats { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.hx-biz-feat { display: flex; gap: 14px; align-items: flex-start; }
.hx-biz-feat-ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #7F56D9; background: color-mix(in srgb, #7F56D9 12%, #fff); }
.hx-biz-feat-ic.is-purple { color: #7F56D9; background: color-mix(in srgb, #7F56D9 12%, #fff); }
.hx-biz-feat-ic.is-green { color: #0E9F6E; background: color-mix(in srgb, #12B76A 14%, #fff); }
.hx-biz-feat-ic.is-coral { color: #F43F5E; background: color-mix(in srgb, #F43F5E 12%, #fff); }
.hx-biz-feat-ic.is-blue { color: #1E90C8; background: color-mix(in srgb, #2EAEEA 16%, #fff); }
.hx-biz-feat-ic svg { width: 19px; height: 19px; }
.hx-biz-feat-t { font-size: 16px; font-weight: 700; color: #101828; margin: 0 0 3px; letter-spacing: -.01em; }
.hx-biz-feat-d { font-size: 14.5px; line-height: 1.55; color: #667085; margin: 0; }
.hx-biz-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hx-biz-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hx-biz-cell { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #ece9f5, #f6f4fb); box-shadow: 0 18px 44px -22px rgba(16,24,40,.3); }
.hx-biz-cell:nth-child(odd) { transform: translateY(32px); }
.hx-biz-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.hx-biz-cell:hover img { transform: scale(1.04); }

@media (max-width: 991px) {
    .hx-biz { padding-top: clamp(56px, 8vw, 80px) !important; padding-bottom: clamp(56px, 8vw, 80px) !important; }
    .hx-biz-w { grid-template-columns: 1fr; gap: 40px; }
    .hx-biz-text .hx-h2 { text-align: center; }
    .hx-biz-sub { margin-inline: auto; text-align: center; }
    .hx-biz-feats { max-width: 460px; margin-inline: auto; }
    .hx-biz-cta { justify-content: center; }
}
/* Mobile: collage becomes a horizontal scroll rail (keeps page short, room for
   hover shadow). Section text left-aligns to the gutter (Stripe/Linear). */
@media (max-width: 768px) {
    .hx-biz-text, .hx-biz-text .hx-h2, .hx-biz-sub { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
    .hx-biz-feats { margin-inline: 0 !important; }
    .hx-biz-cta { justify-content: flex-start !important; }
}
@media (max-width: 640px) {
    .hx-biz { padding-top: 52px !important; padding-bottom: 52px !important; }
    .hx-biz-collage {
        display: flex !important; grid-template-columns: none !important; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
        margin-inline: calc(-1 * var(--hdr-mobile-px, 16px)); padding: 8px var(--hdr-mobile-px, 16px) 26px;
    }
    .hx-biz-collage::-webkit-scrollbar { display: none; }
    .hx-biz-cell { flex: 0 0 56%; scroll-snap-align: start; }
    .hx-biz-cell:nth-child(odd) { transform: none; }
}
@media (max-width: 520px) { .hx-biz-cell:nth-child(odd) { transform: none; } }