/* Reuse native card styles. Contain only the consumption form: layout containment
   on the component root would trap the native fixed comparison tray. */
.hp-company-offers[data-hp-company-offers]{
  margin-block:1.5rem 1rem;
  overflow-wrap:anywhere;
}
.hp-company-offers .hp-company-consumption{container:company-offers / inline-size;display:grid;gap:.5rem;margin:0 0 1.25rem;max-width:36rem}
.hp-company-offers .hp-company-consumption label{font-weight:700;line-height:1.3}
.hp-company-offers .hp-company-consumption-controls{display:flex;flex-wrap:wrap;align-items:stretch;gap:.65rem}
.hp-company-offers .hp-company-consumption input[type=number],.hp-company-offers .hp-company-consumption .btn{min-height:48px;box-sizing:border-box}
.hp-company-offers input[type=number]{width:9rem;max-width:100%;flex:1 1 9rem;padding:.5rem .75rem;font-size:1rem;border:1px solid #53625F;border-radius:9px;background:#fff}
.hp-company-offers .hp-company-consumption .btn{background:#fff;border:2px solid #53625F;color:#293A38;box-shadow:none;flex:0 1 auto}
.hp-company-offers .hp-company-consumption .btn:hover,.hp-company-offers .hp-company-consumption .btn:focus,.hp-company-offers .hp-company-consumption .btn:active{background:#fff;border-color:#53625F;color:#293A38;transform:none}
.hp-company-offers .cards{margin-block:1rem}
.hp-company-offers .hp-company-price-notes{margin-top:.2rem;max-inline-size:32ch}
.hp-company-offers .hp-company-price-notes p+p{margin-top:.2rem}
.hp-company-offers .hp-company-assumptions{margin-block:1rem}
@container company-offers (max-width: 24rem){
  .hp-company-offers .hp-company-consumption-controls{display:grid}
  .hp-company-offers .hp-company-consumption input[type=number],.hp-company-offers .hp-company-consumption .btn{width:100%;max-width:none;flex:none}
}