.family-showcase{
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);
  gap:48px;
  align-items:center;
  margin:0 0 76px;
  padding:34px;
  color:#fff;
  background:
    radial-gradient(circle at 10% 5%,rgba(228,173,77,.18),transparent 18rem),
    linear-gradient(135deg,#0b3049,#020912 74%);
  border:1px solid rgba(228,173,77,.3);
  border-top:3px solid #e4ad4d;
  box-shadow:0 24px 70px rgba(1,10,20,.22);
}
.family-product-visual{
  min-height:470px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(rgba(12,46,64,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,46,64,.05) 1px,transparent 1px),
    linear-gradient(145deg,#fff,#eef3f1);
  background-size:42px 42px,42px 42px,auto;
  border:1px solid rgba(228,173,77,.24);
}
.family-product-visual picture{display:grid;place-items:center;width:100%;height:100%}
.family-product-visual img{
  display:block;
  width:min(76%,360px);
  max-height:430px;
  object-fit:contain;
  filter:drop-shadow(0 28px 24px rgba(4,23,34,.2));
}
.family-product-summary .eyebrow{color:#f3d492}
.family-product-summary h2{margin:15px 0 18px;color:#fff}
.family-product-summary>p{max-width:640px;color:#c3d1d8;line-height:1.75}
.family-quickfacts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:26px 0;
}
.family-quickfact{
  min-height:92px;
  padding:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(228,173,77,.2);
}
.family-quickfact strong{display:block;color:#fff;font-size:15px;line-height:1.25}
.family-quickfact span{display:block;margin-top:7px;color:#9fb1bd;font-size:10px;line-height:1.45}
.family-scope-note{
  margin:0 0 24px;
  padding:15px 17px;
  color:#d8e3e7;
  background:rgba(2,9,18,.6);
  border-left:3px solid #e4ad4d;
  font-size:12px;
  line-height:1.65;
}
html[dir="rtl"] .family-scope-note{border-left:0;border-right:3px solid #e4ad4d}
@media(max-width:860px){
  .family-showcase{grid-template-columns:1fr;gap:28px}
  .family-product-visual{min-height:390px}
}
@media(max-width:760px){
  .family-showcase{margin-bottom:54px;padding:20px}
  .family-product-visual{min-height:290px}
  .family-product-visual img{max-height:270px}
  .family-product-summary h2{font-size:30px}
  .family-quickfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .family-quickfact{min-height:82px;padding:13px}
}