/* V58 — Communication Hub phone correction patch */
.page-communication-hub .commhub-phone-demo-section{
  max-width:1320px;
  margin:0 auto;
  padding:56px 24px 28px;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:38px;
  align-items:center;
}
.page-communication-hub .commhub-copy .lead{max-width:560px;margin-bottom:24px;}
.page-communication-hub .commhub-demo-right{
  display:grid;
  grid-template-columns:minmax(0,390px) minmax(280px,330px);
  gap:22px;
  align-items:stretch;
}
.page-communication-hub .commhub-phone-stage{display:flex;justify-content:center;align-items:center;}
.page-communication-hub .hub-phone-frame{
  position:relative;
  width:min(100%,390px);
  aspect-ratio:390 / 790;
  border-radius:48px;
  padding:14px;
  background:linear-gradient(180deg,#0d1627 0%,#08101d 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.page-communication-hub .hub-phone-frame:before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:46px;
  padding:1px;
  background:linear-gradient(135deg,rgba(30,231,255,.35),rgba(163,86,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.6;
  pointer-events:none;
}
.page-communication-hub .hub-phone-notch{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:128px;
  height:26px;
  border-radius:0 0 18px 18px;
  background:#060c17;
  z-index:4;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.page-communication-hub .hub-phone-screen{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  bottom:12px;
  border-radius:36px;
  overflow:hidden;
  background:#071328;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.page-communication-hub .phone-replica-shell{
  height:100%;
  grid-template-columns:52px minmax(0,1fr);
  border-radius:36px;
  overflow:hidden;
}
.page-communication-hub .phone-replica-shell .replica-avatar-rail{padding:18px 6px 12px;gap:8px;}
.page-communication-hub .phone-replica-shell .replica-menu-dot{width:34px;height:34px;margin-bottom:2px;}
.page-communication-hub .phone-replica-shell .replica-avatar{width:36px;height:36px;}
.page-communication-hub .phone-replica-shell .replica-avatar small{display:none;}
.page-communication-hub .phone-replica-shell .replica-hub-topbar{
  height:auto;
  min-height:66px;
  padding:14px 14px 12px;
  align-items:flex-start;
}
.page-communication-hub .phone-replica-shell .replica-kicker{font-size:8px;margin-bottom:3px;}
.page-communication-hub .phone-replica-shell .replica-hub-topbar h3{font-size:16px;}
.page-communication-hub .phone-replica-shell .replica-utility-pills{gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.page-communication-hub .phone-replica-shell .replica-utility-pills span{font-size:10px;padding:6px 8px;}
.page-communication-hub .phone-replica-shell .replica-chat-scroll{
  padding:14px 12px 8px;
  gap:10px;
}
.page-communication-hub .phone-replica-shell .replica-chat-row.row-user{padding-left:0;}
.page-communication-hub .phone-replica-shell .replica-mini-avatar{width:24px;height:24px;flex-basis:24px;font-size:10px;margin-left:0;}
.page-communication-hub .phone-replica-shell .replica-bubble{max-width:92%;padding:11px 12px;font-size:12px;line-height:1.36;}
.page-communication-hub .phone-replica-shell .replica-bubble-head strong{font-size:12px;}
.page-communication-hub .phone-replica-shell .replica-bubble-head span{font-size:9px;}
.page-communication-hub .phone-replica-shell .replica-action-row{gap:6px;}
.page-communication-hub .phone-replica-shell .replica-action-row button,
.page-communication-hub .phone-replica-shell .replica-action-row a{padding:7px 9px;font-size:10px;}
.page-communication-hub .phone-replica-shell .replica-composer-shell{padding:0 10px 12px;}
.page-communication-hub .phone-replica-shell .replica-owner-pill{right:14px;bottom:66px;font-size:10px;padding:7px 10px;gap:6px;}
.page-communication-hub .phone-replica-shell .replica-composer{padding:7px;gap:6px;}
.page-communication-hub .phone-replica-shell .replica-composer input{font-size:12px!important;padding:10px 11px!important;}
.page-communication-hub .phone-replica-shell .replica-composer button{padding:10px 12px;font-size:12px;}
.page-communication-hub .phone-pack-panel{min-height:730px;}
.page-communication-hub .phone-pack-panel .placeholder-chip,
.page-communication-hub .phone-pack-panel .placeholder-staff{opacity:.7;}
.page-communication-hub .phone-pack-panel .placeholder-chip{font-weight:700;line-height:1.45;}
.page-communication-hub .phone-pack-panel .placeholder-staff{font-size:11px;}
@media (max-width:1150px){
  .page-communication-hub .commhub-phone-demo-section{grid-template-columns:1fr;gap:26px;}
  .page-communication-hub .commhub-copy{text-align:left;}
  .page-communication-hub .commhub-demo-right{grid-template-columns:1fr;max-width:760px;margin:0 auto;}
  .page-communication-hub .phone-pack-panel{min-height:auto;}
}
@media (max-width:640px){
  .page-communication-hub .commhub-phone-demo-section{padding:34px 18px 18px;}
  .page-communication-hub .hub-phone-frame{width:min(100%,360px);} 
}