/* R22: visible, consistent hosting and domain-cost disclosures. */
.cost-transparency-note,
.hosting-domain-callout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.35rem .8rem;
  align-items:start;
  margin:1.15rem 0 0;
  padding:.9rem 1rem;
  border:1px solid rgba(112,70,151,.22);
  border-left:4px solid #7450a4;
  border-radius:12px;
  background:linear-gradient(135deg,#faf7ff 0%,#f4fbfa 100%);
  color:#342543;
  box-shadow:0 10px 24px rgba(58,32,84,.07);
}

.cost-transparency-note b,
.hosting-domain-callout b{
  color:#4f2b73;
  white-space:nowrap;
}

.cost-transparency-note span,
.hosting-domain-callout p{
  margin:0;
  line-height:1.55;
}

.cost-transparency-note--compact{
  max-width:44rem;
  font-size:.93rem;
}

.package-required-cost{
  display:flex;
  flex-wrap:wrap;
  gap:.22rem .45rem;
  align-items:baseline;
  margin:.75rem 0 .9rem;
  padding:.65rem .75rem;
  border:1px solid rgba(112,70,151,.2);
  border-radius:10px;
  background:linear-gradient(135deg,#f8f2ff 0%,#f5fbfa 100%);
  color:#3d2a4e;
  font-size:.87rem;
  line-height:1.35;
}

.package-required-cost b{
  color:#4f2b73;
}

.package-required-cost strong{
  color:#0c716d;
  font-size:1rem;
}

.package-required-cost span{
  flex-basis:100%;
  color:#665b6f;
  font-size:.79rem;
}

.tier-complete .package-required-cost{
  border-color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.13);
  color:#fff;
}

.tier-complete .package-required-cost b,
.tier-complete .package-required-cost span{
  color:#fff;
}

.tier-complete .package-required-cost strong{
  color:#9ff2e6;
}

.brief-domain-line,
.selected-package-costs{
  margin-top:.55rem;
  color:#5f5368;
  font-size:.9rem;
  line-height:1.5;
}

.selected-package-costs{
  display:grid;
  gap:.35rem;
  padding:.85rem 1rem;
  border:1px solid rgba(112,70,151,.19);
  border-radius:12px;
  background:#faf7ff;
}

.selected-package-costs p{
  margin:0;
}

.fixed-hosting-price{
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
  color:#0c716d;
}

.fixed-hosting-price strong{
  font-size:1.45rem;
}

.care-plan-card .fixed-fee-note{
  display:block;
  margin-top:.25rem;
  color:#0c716d;
  font-weight:700;
}

.r8-policy-note .domain-ownership-line{
  display:block;
  margin-top:.55rem;
  font-weight:700;
  color:#4f2b73;
}

@media (max-width:720px){
  .cost-transparency-note,
  .hosting-domain-callout{
    grid-template-columns:1fr;
    gap:.28rem;
    padding:.8rem .85rem;
  }

  .cost-transparency-note b,
  .hosting-domain-callout b{
    white-space:normal;
  }

  .package-required-cost{
    margin-top:.65rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .cost-transparency-note,
  .hosting-domain-callout,
  .package-required-cost{
    scroll-behavior:auto;
  }
}