.ipwh-whmcs-callout,
.ipwh-whmcs-callout * {
  box-sizing: border-box;
}

.ipwh-whmcs-callout {
  padding: 70px 20px;
  background: #ffffff;
  color: #111827;
  font-family: Arial, sans-serif;
}

.ipwh-whmcs-callout-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 44px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px;
  border: 1px solid #d9e0ea;
  border-radius: 22px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 55%, #fff7f7 100%);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .07);
}

.ipwh-whmcs-callout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: #81221f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ipwh-whmcs-callout-eyebrow::before {
  width: 24px;
  height: 2px;
  background: currentColor;
  content: "";
}

.ipwh-whmcs-callout h2 {
  margin: 0 0 14px;
  color: #111827;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.ipwh-whmcs-callout p {
  margin: 0 0 22px;
  color: #59677f;
  line-height: 1.7;
}

.ipwh-whmcs-callout-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 19px;
  border-radius: 9px;
  background: #81221f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.ipwh-whmcs-callout-panel {
  padding: 26px;
  border-radius: 18px;
  background: #0d192b;
  color: #ffffff;
}

.ipwh-whmcs-callout-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.ipwh-whmcs-callout-brand strong {
  font-size: 26px;
  letter-spacing: -.04em;
}

.ipwh-whmcs-callout-price {
  color: #f3aca7;
  font-size: 15px;
  font-weight: 800;
}

.ipwh-whmcs-callout-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ipwh-whmcs-callout-list li {
  position: relative;
  margin: 10px 0;
  padding-left: 24px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

.ipwh-whmcs-callout-list li::before {
  position: absolute;
  left: 0;
  color: #69e4aa;
  content: "\2713";
  font-weight: 900;
}

.ipwh-whmcs-callout-note {
  display: block;
  margin-top: 16px;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  line-height: 1.5;
}

html[data-ipwh-theme="dark"] body .ipwh-whmcs-callout {
  color: #f3f6fb;
  background: #0b121d;
}

html[data-ipwh-theme="dark"] body .ipwh-whmcs-callout .ipwh-whmcs-callout-inner {
  border-color: #2b3748;
  background: #141e2d;
  box-shadow: none;
}

html[data-ipwh-theme="dark"] body .ipwh-whmcs-callout .ipwh-whmcs-callout-eyebrow {
  color: #efaaa6;
}

html[data-ipwh-theme="dark"] body .ipwh-whmcs-callout .ipwh-whmcs-callout-inner h2 {
  color: #f3f6fb !important;
}

html[data-ipwh-theme="dark"] body .ipwh-whmcs-callout .ipwh-whmcs-callout-inner > div > p {
  color: #b6c0cf;
}

html[data-ipwh-theme="dark"] body .ipwh-whmcs-callout .ipwh-whmcs-callout-panel {
  border: 1px solid #344155;
  background: #101927;
}

@media (max-width: 820px) {
  .ipwh-whmcs-callout-inner {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

@media (max-width: 540px) {
  .ipwh-whmcs-callout {
    padding: 54px 14px;
  }

  .ipwh-whmcs-callout-inner {
    padding: 22px;
  }

  .ipwh-whmcs-callout-link {
    width: 100%;
  }
}