/* Chathood homepage final correction layer — 2026-09-11 */

/* 1) TRUSTED BUSINESS MARQUEE — two identical fixed-width sets, one exact loop distance. */
.trust-logos{position:relative!important;display:block!important;width:100%!important;height:88px!important;overflow:hidden!important;margin-top:24px!important}
.trust-logos:before,.trust-logos:after{display:none!important;content:none!important;background:none!important;animation:none!important}
.trust-marquee-track{display:flex!important;align-items:center!important;gap:0!important;width:3938px!important;max-width:none!important;height:100%!important;will-change:transform!important;animation:chathoodTrustExactLoop 15s linear infinite!important;animation-play-state:running!important;transform:translate3d(0,0,0)}
.trust-marquee-set{display:flex!important;align-items:center!important;flex:0 0 1969px!important;width:1969px!important;min-width:1969px!important;gap:18px!important;padding-right:18px!important;box-sizing:border-box!important}
.trust-marquee-item{display:inline-flex!important;flex:0 0 145px!important;width:145px!important;min-width:145px!important;align-items:center!important;justify-content:center!important;height:54px!important;padding:0 10px!important;box-sizing:border-box!important;gap:8px!important;white-space:nowrap!important;visibility:visible!important;opacity:1!important}
.trust-marquee-item.google-cloud{flex-basis:158px!important;width:158px!important;min-width:158px!important}
.trust-logo-mark{display:block!important;visibility:visible!important;opacity:1!important;width:26px!important;height:26px!important;flex:0 0 26px!important}
@keyframes chathoodTrustExactLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1969px,0,0)}}

/* 2) HERO CONNECTED CHANNELS — equal cells and equal visual distance for all twelve logos. */
.channel-pill>span:nth-child(2){display:grid!important;grid-template-columns:repeat(12,22px)!important;grid-auto-rows:22px!important;align-items:center!important;justify-content:start!important;column-gap:6px!important;row-gap:0!important}
.channel-pill>span:nth-child(2) img{margin:0!important;display:block!important;position:static!important;flex:0 0 22px!important;width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;object-fit:contain!important}
.channel-pill>span:nth-child(2) img[alt="WhatsApp"]{grid-column:1!important}.channel-pill>span:nth-child(2) img[alt="Telegram"]{grid-column:2!important}.channel-pill>span:nth-child(2) img[alt="Facebook"]{grid-column:3!important}.channel-pill>span:nth-child(2) img[alt="Instagram"]{grid-column:4!important}.channel-pill>span:nth-child(2) img[alt="Email"]{grid-column:5!important}.channel-pill>span:nth-child(2) img[alt="SMS"]{grid-column:6!important}.channel-pill>span:nth-child(2) img[alt="LINE"]{grid-column:7!important}.channel-pill>span:nth-child(2) img[alt="Website Chat"]{grid-column:8!important}.channel-pill>span:nth-child(2) img[alt="LinkedIn"]{grid-column:9!important}.channel-pill>span:nth-child(2) img[alt="X"]{grid-column:10!important;width:22px!important;height:22px!important;margin:0!important;display:block!important}.channel-pill>span:nth-child(2) img[alt="API"]{grid-column:11!important;margin:0!important}.channel-pill>span:nth-child(2) img[alt="TikTok"]{grid-column:12!important;width:22px!important;height:22px!important;margin:0!important;display:block!important}.channel-pill:after{display:none!important;content:none!important}

/* 3) CHANNEL RAIL — one uniform gap from the first channel through the last; remove legacy extra margins. */
.channel-rail-inner{display:flex!important;align-items:center!important;justify-content:center!important;gap:24px!important;white-space:nowrap!important}
.channel-rail .channel{order:initial!important;margin-left:0!important;margin-right:0!important;display:flex!important;align-items:center!important;gap:8px!important}
.channel-rail .channel:has(img[src*="whatsapp.svg"]),.channel-rail .channel:has(img[src*="telegram.svg"]),.channel-rail .channel:has(img[src*="email.svg"]),.channel-rail .channel:has(img[src*="linkedin.svg"]),.channel-rail .channel:has(img[src*="facebook.svg"]),.channel-rail .channel:has(img[src*="line.svg"]),.channel-rail .channel:has(img[src*="instagram.svg"]),.channel-rail .channel:has(img[src*="sms.svg"]),.channel-rail .channel:has(img[src*="x.svg"]),.channel-rail .channel:has(img[src*="chat.svg"]),.channel-rail .channel:has(img[src*="api.svg"]),.channel-rail .channel:has(img[src*="tiktok.svg"]){order:initial!important;margin-left:0!important;margin-right:0!important}
.channel-rail .channel img{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;object-fit:contain!important}.channel-rail .channel:has(img[src*="whatsapp.svg"]) img{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important}

/* 4) WHATSAPP — local self-contained SVG only; no remote asset dependency. */
.channel-pill img[alt="WhatsApp"],.channel-rail img[src*="whatsapp.svg"]{content:url('/assets/icons/whatsapp.svg?v=20260911')!important;display:block!important;visibility:visible!important;opacity:1!important;object-fit:contain!important}.channel-pill img[alt="WhatsApp"]{width:22px!important;height:22px!important}

/* Keep homepage integration catalogue as the real DOM card grid. */
.logo-showcase{display:grid!important;visibility:visible!important;opacity:1!important;background-image:none!important}.logo-showcase>.logo-tile{display:flex!important;visibility:visible!important;opacity:1!important}.logo-showcase>.logo-tile img{display:block!important;visibility:visible!important;opacity:1!important}.logo-showcase .logo-tile img[alt="Slack"]{content:url('/assets/icons/slack.svg?v=20260911')!important}

/* 5) HERO PRODUCT — force the same current asset used when opened directly. */
.hero-grid{grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr)!important;gap:44px!important}.hero .hero-product{width:100%!important;max-width:720px!important;margin:0 auto!important;transform:none!important}.hero .hero-illustration{content:url('/assets/illustrations/chathood-inbox-panel-vintage.svg?v=20260917')!important;display:block!important;width:100%!important;height:auto!important;max-width:none!important;object-fit:contain!important;filter:none!important;image-rendering:auto!important;opacity:1!important;transform:none!important}

@media(max-width:1300px){.channel-rail-inner{gap:20px!important}.hero-grid{grid-template-columns:minmax(0,.8fr) minmax(500px,1.2fr)!important;gap:32px!important}}
@media(max-width:980px){.channel-rail-inner{justify-content:flex-start!important;overflow-x:auto!important}.channel-pill{overflow-x:auto!important}.hero-grid{grid-template-columns:1fr!important}.hero .hero-product{max-width:900px!important}.channel-pill>span:nth-child(2){grid-template-columns:repeat(12,20px)!important;column-gap:5px!important}.channel-pill>span:nth-child(2) img{width:20px!important;height:20px!important;max-width:20px!important;max-height:20px!important}}
@media(max-width:700px){.trust-logos{height:78px!important}.trust-marquee-track{animation-duration:11s!important}.channel-rail-inner{gap:18px!important}.hero .hero-product{max-width:100%!important}.channel-pill>span:nth-child(2){grid-template-columns:repeat(12,20px)!important;column-gap:5px!important}}

/* FINAL 2026-09-17 — exact homepage asset and exact twelve-logo spacing */
.hero img[src*="chathood-inbox-panel-vintage.svg"]{content:url('/assets/illustrations/chathood-inbox-panel-vintage.svg?v=20260917')!important}
.channel-pill>span:nth-child(2){justify-content:start!important;column-gap:6px!important}
.channel-pill>span:nth-child(2) img{margin:0!important}