/* =========================================================================
   Pearl Island — Guest Code
   A soft tinted band with the shared Section Heading over a two-column
   list of numbered rules. The band background is controllable from the
   Style tab. Scoped under .pi-widget; colors reuse the brand tokens.
   ========================================================================= */
.pi-widget .pgc {
  background: linear-gradient(180deg, #f2f6f7, #e9f1f1);
  padding: 92px 0;
  border-radius: 24px;
}
@media (max-width: 700px) { .pi-widget .pgc { padding: 60px 0; } }

.pi-widget .pgc-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 48px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 640px) { .pi-widget .pgc-rules { grid-template-columns: 1fr; } }

.pi-widget .pgc-rule {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(59, 95, 95, .12);
}
.pi-widget .pgc-rule .pgc-n {
  font-family: var(--hx-serif, serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--pi-num, var(--tuerkis, #77C3DB));
  line-height: 1;
  width: 34px;
}
.pi-widget .pgc-rule b {
  display: block;
  font-family: var(--hx-serif, serif);
  font-size: 1.16rem;
  color: var(--pi-heading, var(--smaragd, #3B5F5F));
  margin-bottom: 3px;
}
.pi-widget .pgc-rule span {
  font-size: .94rem;
  color: var(--pi-text, var(--hx-body, #5a6372));
  line-height: 1.5;
}