/* Lead Bird for Support (/solutions/support). Loads after solution.css. */

.sup .t-ink { fill: var(--s-ink); }
.sup .t-white { fill: var(--brand-white); stroke: var(--s-ink); stroke-width: 2.5; }

/* Hero */
.sup .sol-hero { padding: 64px 0 40px; overflow: hidden; }
.sup .sol-shout {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 1rem;
    border-radius: 7px;
    background: var(--s-blue-bg);
    font-size: 26px;
    font-weight: 700;
}
.sup .sol-hero h1 { font-size: 42px; line-height: 52px; margin: 10px 0; text-wrap: balance; }
.sup .sol-hero .sol-p { font-weight: 300; padding-right: 3rem; padding-bottom: 10px; margin: 0 0 20px !important; }

.sup-hero-img svg { display: block; width: 100%; height: auto; max-width: 560px; margin-left: auto; }
.sup-hero-img .h-cloud-s { fill: var(--s-pink); }
.sup-hero-img .h-cloud { fill: var(--s-blue-bg); }
.sup-hero-img .h-cloud-line { stroke: var(--s-pink); }
.sup-hero-img .h-surface { fill: var(--brand-surface); }
.sup-hero-img .h-ink { fill: var(--s-ink); }
.sup-hero-img .h-ink-line { stroke: var(--s-ink); }
.sup-hero-img .h-white { fill: var(--brand-white); }
.sup-hero-img .h-white-line { stroke: var(--brand-white); }
.sup-hero-img .h-blue { fill: var(--brand-blue); }
.sup-hero-img .h-lime { fill: var(--brand-lime); }
.sup-hero-img .h-lime-soft { fill: var(--s-green-bg); }
.sup-hero-img .h-wa { fill: var(--brand-whatsapp); }
.sup-hero-img .h-text { font-family: var(--brand-font-heading); font-weight: 900; font-size: 38px; }

/* Channels strip */
.sup .sol-clients { margin-top: 20px; padding: 40px 0; }
.sup .sol-clients-h { margin-bottom: 2.2rem !important; font-weight: 500; }

/* Blue boxed sections */
.sup-box-sec { padding: 40px 0 0; }
.sup-box { padding: 24px 40px 40px; border-radius: 20px; background: var(--s-blue-bg); border-right: 5px solid var(--brand-blue); border-bottom: 5px solid var(--brand-blue); }
.sup-box .sol-h2 { max-width: 900px; margin: 10px auto 6px !important; }
.sup-sub { max-width: 860px; margin: 0 auto !important; font-size: 20px; line-height: 1.4; }

/* Channels to WhatsApp map */
.qmap { position: relative; height: 400px; margin: 60px 0 10px; }
.qmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.qmap-lines path { fill: none; stroke: var(--brand-blue); stroke-width: 3; vector-effect: non-scaling-stroke; }
.qmap-col { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 21%; }
.qmap-col.right { left: auto; right: 0; width: 25.5%; }
.qmap-col.right::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; border-left: 3px solid var(--brand-blue); }
.qmap-src { position: relative; z-index: 1; }
.qmap-node { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; border: 2px solid var(--s-pink); border-radius: 10px; background: var(--brand-white); font-size: 15px; font-weight: 600; white-space: nowrap; }
.qmap-node svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--brand-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qmap-node.ai, .qmap-node.center { justify-content: center; }
.qmap-node .qmap-spark { position: absolute; right: -10px; top: -12px; width: 24px; height: 24px; fill: var(--brand-lime); stroke: var(--s-ink); stroke-width: 1; }
.qmap-src small { position: relative; display: block; margin-top: 6px; padding-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.qmap-col.right .qmap-src small { padding: 0 0 2px; text-align: center; background: var(--s-blue-bg); }
.qmap-hub { position: absolute; left: 39.5%; top: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 17%; padding: 16px 8px; border: 3px solid var(--brand-blue); border-radius: 10px; background: var(--brand-white); text-align: center; transform: translateY(-50%); }
.qmap-hub span { font-size: 15px; font-weight: 500; }
.qmap-hub b { display: flex; align-items: center; gap: 6px; color: var(--brand-whatsapp); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.qmap-hub b svg { width: 30px; height: 30px; }
.qmap-stat { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 14px; border: 4px solid var(--brand-lime); border-radius: 14px; background: var(--s-green-bg); }
.qmap-stat b { font-family: var(--brand-font-heading); font-size: clamp(36px, 4vw, 54px); font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.qmap-stat span { font-size: 14px; line-height: 1.35; white-space: nowrap; }

/* Balance */
.sol .sup-balance { padding-bottom: 20px; }
.sup-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 1000px; margin: 40px auto 30px; font-size: 16px; line-height: 1.55; }
.sup-balance-grid p { margin: 0 0 1.4em !important; }
.sup-balance-grid ul { padding-left: 25px; }
.sup-balance-grid li { list-style: disc; margin-bottom: 4px; }
.sup-learn { min-height: 0; padding: 9px 18px; font-size: 12px; }

/* Questions tree */
.qtree { position: relative; max-width: 900px; margin: 50px auto 0; }
.qtree-root { width: fit-content; margin: 0 auto; padding: 10px 22px; border: 3px solid var(--brand-blue); border-radius: 16px; background: var(--brand-white); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.qtree-lines { display: block; width: 100%; height: 90px; }
.qtree-lines path { fill: none; stroke: var(--brand-blue); stroke-width: 3; vector-effect: non-scaling-stroke; }
.qtree-grid { display: grid; grid-template-columns: 1.1fr 0.95fr 0.95fr 1.1fr; gap: 24px; align-items: start; }
.qtree-col { position: relative; display: flex; flex-direction: column; gap: 26px; margin-top: 44px; }
.qtree-col::before { content: ""; position: absolute; left: 50%; top: -44px; height: 44px; border-left: 3px solid var(--brand-blue); }
.qtree-box { position: relative; padding: 10px 12px; border: 3px solid var(--brand-blue); border-radius: 16px; background: var(--brand-white); font-size: 16px; font-weight: 500; line-height: 1.35; text-align: center; }
.qtree-box + .qtree-box::before { content: ""; position: absolute; left: 50%; top: -29px; height: 26px; border-left: 3px solid var(--brand-blue); }
.qtree-branch { display: flex; flex-direction: column; align-items: center; }
.qtree-tag { position: relative; z-index: 2; padding: 8px 22px 10px; border: 3px solid var(--brand-blue); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--s-blue-bg); font-size: 19px; font-weight: 600; line-height: 1.15; text-align: center; }
.qtree-phone.ph { width: 100%; max-width: 200px; height: 380px; margin-top: -3px; }
.qtree-phone .ph-body { justify-content: flex-start; padding-top: 14px; }
.qtree-phone .ph-btn { padding: 7px 6px; }

/* Inbox */
.sup-inbox { margin-top: 40px; }
.sup-point { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.sup-point svg { flex: none; width: 30px; height: 30px; }
.sup-point svg path { fill: none; stroke: var(--s-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sup-point p { font-size: 16px; line-height: 1.55; }

.ibx { position: relative; container-type: inline-size; aspect-ratio: 1024 / 583; }
.ibx-app { position: absolute; left: 9%; top: 0; width: 81%; height: 97%; overflow: hidden; border: 3px solid var(--s-ink); border-radius: 16px; background: var(--brand-surface); box-shadow: 8px 8px 0 var(--s-ink); }
.ibx-head { display: flex; align-items: center; justify-content: space-between; height: 10%; padding: 0 3.5%; border-bottom: 1px solid var(--s-line); background: var(--brand-white); }
.ibx-logo { display: flex; align-items: center; gap: 0.8cqw; }
.ibx-logo .brand-mark { width: 3cqw; height: 3cqw; }
.ibx-logo b { font-family: var(--brand-font-heading); font-size: 2cqw; font-weight: 900; }
.ibx-user { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--s-line); }
.ibx-chat { position: absolute; inset: 10% 0 0; }
.ibx-bub { position: absolute; left: 3%; height: 7%; border: 1px solid var(--s-line); border-radius: 1cqw; background: var(--brand-white); }
.ibx-bub.g { border-color: var(--brand-lime); background: var(--s-green-bg); }
.ibx-bub.w60 { left: 24%; top: 38%; width: 40%; }
.ibx-bub.w55 { top: 51%; width: 44%; }
.ibx-bub.w80 { top: 64%; width: 62%; }
.ibx-bub.w12 { top: 77%; width: 10%; }
.ibx-pop { position: absolute; z-index: 1; border: 3px solid var(--s-ink); border-radius: 12px; background: var(--brand-white); box-shadow: 6px 6px 0 var(--s-ink); }
.ibx-tabs { left: 5%; top: 11.5%; display: flex; align-items: stretch; width: 56%; height: 10%; overflow: hidden; font-size: 1.65cqw; font-weight: 700; }
.ibx-tabs > * { display: flex; align-items: center; gap: 0.6cqw; padding: 0 1.4cqw; border-right: 1px solid var(--s-line); }
.ibx-tabs > :last-child { border-right: 0; }
.ibx-tabs b { background: var(--brand-surface); }
.ibx-tabs svg { width: 1.7cqw; height: 1.7cqw; }
.ibx-assign { left: 0; top: 26%; width: 17%; padding: 0.9cqw; font-size: 1.6cqw; }
.ibx-assign small { display: block; margin-bottom: 0.6cqw; font-size: 1.15cqw; font-weight: 700; text-transform: uppercase; }
.ibx-assign div { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5cqw; padding: 0.5cqw 0.8cqw; border: 1px solid var(--s-line); border-radius: 0.7cqw; }
.ibx-assign em { font-style: normal; font-size: 0.9cqw; color: var(--s-muted); text-transform: uppercase; }
.ibx-compose { left: 5%; top: 84%; display: flex; align-items: center; gap: 2cqw; width: 53%; height: 9%; padding: 0 1.6cqw; }
.ibx-compose i { width: 2cqw; height: 2cqw; border: 2px solid var(--s-muted); border-radius: 0.5cqw; }
.ibx-compose .ic-bolt { width: 1.2cqw; border-radius: 0; transform: skewX(-15deg); }
.ibx-compose .ic-clip { width: 1.2cqw; border-radius: 1cqw; transform: rotate(35deg); }
.ibx-compose .ic-emoji { border-radius: 50%; }
.ibx-compose span { margin-left: auto; padding: 0.7cqw 1.8cqw; border-radius: 0.7cqw; background: var(--brand-blue); color: var(--brand-white); font-size: 1.6cqw; font-weight: 700; }
.ibx-list { left: 63%; top: 8%; display: flex; flex-direction: column; justify-content: space-around; width: 36%; height: 42%; padding: 1cqw 2cqw; }
.ibx-row { display: flex; align-items: center; gap: 1.6cqw; --tone: var(--s-green-bg); }
.ibx-row.purple { --tone: color-mix(in srgb, var(--brand-instagram-purple) 14%, var(--brand-white)); }
.ibx-row.blue { --tone: var(--s-blue-bg); }
.ibx-ava { position: relative; flex: none; display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--tone); }
.ibx-ava svg { width: 2.2cqw; height: 2.2cqw; }
.ibx-lines { flex: 1; display: flex; flex-direction: column; gap: 0.6cqw; }
.ibx-lines i { height: 1.1cqw; border-radius: 1cqw; background: var(--tone); }
.ibx-lines i:last-child { width: 45%; }
.ibx-hours { left: 63%; top: 56%; width: 37%; padding: 1.4cqw 0 0.6cqw; font-size: 1.75cqw; }
.ibx-hours > b { display: block; padding: 0 1.6cqw 1.2cqw; border-bottom: 1px solid var(--s-line); font-weight: 700; }
.ibx-hours small { display: block; padding: 0.6cqw 1.6cqw 0.4cqw; font-size: 1.35cqw; color: var(--s-muted); }
.ibx-hrow { display: flex; align-items: center; justify-content: space-between; padding: 0.8cqw 1.6cqw; font-weight: 500; }
.ibx-hrow span { display: flex; align-items: center; gap: 0.8cqw; color: var(--s-muted); font-weight: 400; }
.ibx-tg { position: relative; display: inline-block; width: 3.2cqw; height: 1.8cqw; border-radius: 1cqw; background: var(--s-line); }
.ibx-tg::after { content: ""; position: absolute; top: 0.25cqw; left: 0.25cqw; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--brand-white); }
.ibx-tg.on { background: var(--brand-blue); }
.ibx-tg.on::after { left: auto; right: 0.25cqw; }

/* CTA */
.sup-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px 50px; }
.sol .sup-cta h3 { max-width: 560px; font-size: 24px; line-height: 1.45; }
.sup-cta h3 strong { font-weight: 500; }
.sup-cta .sol-btn { flex: none; }

@media (max-width: 991px) {
    .sup .sol-hero h1 { font-size: 34px; line-height: 42px; }
    .sup .sol-hero .sol-p { padding-right: 0; }
    .sup-hero-img svg { margin: 0 auto; }
    .sup-box { padding: 20px 18px 30px; }
    .sup-sub { font-size: 17px; }
    .qmap { display: flex; flex-direction: column; gap: 22px; height: auto; margin-top: 30px; }
    .qmap-lines, .qmap-col.right::before { display: none; }
    .qmap-col, .qmap-col.right, .qmap-hub { position: static; width: auto; transform: none; }
    .qmap-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .qmap-col.right { grid-template-columns: 1fr; width: 100%; max-width: 340px; margin: 0 auto; }
    .qmap-hub { order: -1; width: 220px; margin: 0 auto; }
    .qmap-col:not(.right) { order: -2; }
    .qmap-node { height: auto; min-height: 36px; padding: 6px 10px; white-space: normal; }
    .sup-balance-grid { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
    .qtree-root { font-size: 24px; }
    .qtree-lines { display: none; }
    .qtree-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 24px; }
    .qtree-branch { grid-row: 1; }
    .qtree-col { gap: 14px; margin-top: 0; }
    .qtree-col::before, .qtree-box + .qtree-box::before { display: none; }
    .qtree-box { font-size: 15px; }
    .sup-inbox { gap: 30px; text-align: left; }
    .sup-cta { flex-direction: column; padding: 30px 20px; text-align: center; }
    .sol .sup-cta h3 { font-size: 20px; }
}

@media (max-width: 560px) {
    .qmap-col { grid-template-columns: 1fr; }
    .qtree-grid { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; }
    .qtree-branch { grid-row: auto; }
    .qtree-grid > :nth-child(1) { order: 2; }
    .qtree-grid > :nth-child(2) { order: 1; }
    .qtree-grid > :nth-child(3) { order: 3; margin-top: 16px; }
    .qtree-grid > :nth-child(4) { order: 4; }
    .qtree-tag { font-size: 17px; }
}