.bandwidth-panel { display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid #5774a5; border-radius: 20px; background: #ffffff08; color: #e3ecfb; }
.bandwidth-panel strong { display: block; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.1; color: #fff; }
.bandwidth-panel small { font-size: .4em; }.bandwidth-panel hr { margin: 8px 0; opacity: .35; }
.bandwidth-config { height: 100%; }.bandwidth-specs { margin: 16px 0 24px; }
.bandwidth-specs > div { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--cera-line, #dfe6f0); }
.bandwidth-specs dt { font-weight: 600; }.bandwidth-specs dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575px) { .bandwidth-specs > div { grid-template-columns: 1fr; gap: 4px; }.bandwidth-panel { padding: 24px; } }

/* B31 layout balance: configuration rows share intrinsic heights across both cards. */
@media(min-width:992px){
 @supports(grid-template-rows:subgrid){
  .row:has(>div>.bandwidth-config){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:0;margin:0}
  .row:has(>div>.bandwidth-config)>div{display:grid;grid-template-rows:subgrid;grid-row:span 10;row-gap:0;width:auto;padding:0;margin:0 0 24px;min-width:0}
  .row>div>.bandwidth-config{display:grid;grid-template-rows:subgrid;grid-row:span 10;row-gap:0;height:auto}
  .bandwidth-config>.eyebrow{grid-row:1;align-self:start}
  .bandwidth-config>h3{grid-row:2;align-self:start}
  .bandwidth-config>.bandwidth-specs{display:grid;grid-template-rows:subgrid;grid-row:3 / span 7;row-gap:0}
  .bandwidth-config>.btn{grid-row:10;margin-top:auto;align-self:end}
 }
}