/* Products pages only (Products hub, Base, Chat, Desk, Knowledge, Social, A.C.T.), scoped by body[data-area=products]. Shared CSS stays untouched. */

/* Hub: Base and A.C.T. side by side, then the four apps in one row. Replaces the shared "featured card spans two rows" layout, which left Social alone on the last row. */
@media(min-width:1101px){
 [data-area=products][data-template=hub] #layers .detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:24px}
 [data-area=products][data-template=hub] #layers .detail-grid>article{grid-row:auto!important}
 [data-area=products][data-template=hub] #layers .detail-grid>article:nth-child(-n+2){grid-column:span 2}
}
@media(min-width:801px) and (max-width:1100px){
 [data-area=products][data-template=hub] #layers .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 [data-area=products][data-template=hub] #layers .detail-grid>article{grid-row:auto!important}
}
@media(min-width:801px){
 [data-area=products][data-template=hub] #layers .detail-grid>article:nth-child(-n+2) h3{font-size:clamp(24px,2.2vw,30px)}
}

/* Hub FAQ: the "+" sat halfway across the row; keep it on the right edge like the other product pages. */
[data-area=products] .detail-faq summary{max-width:none}

/* Hub comparison table: on phones each app becomes its own card instead of a five-column table you scroll sideways. */
@media(max-width:800px){
 [data-area=products] #compare .table-wrap{overflow:visible}
 [data-area=products] #compare :is(table,tbody,tr,th,td){display:block;width:auto;min-width:0}
 [data-area=products] #compare caption{display:block;text-align:left;padding:0 0 14px}
 [data-area=products] #compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 [data-area=products] #compare tr{border:1px solid var(--rule,#ffffff25);border-radius:16px;padding:18px 20px;margin:0 0 12px}
 [data-area=products] #compare th[scope=row]{padding:0 0 10px;border:0;font-size:18px}
 [data-area=products] #compare td{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:8px 0;border:0;border-top:1px solid var(--rule,#ffffff18)}
 [data-area=products] #compare td:before{content:attr(data-label);font:11px/1.6 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#92929e)}
}

/* Related cards: fill the row whether there are three or four, instead of leaving an empty fourth slot. */
@media(min-width:901px){
 [data-area=products] .xd-related .detail-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
}

/* Long hero eyebrows (Social, A.C.T.) wrapped onto a second line. */
[data-area=products] .detail-hero .eyebrow{max-width:none}