/*
 * Clever Prep — Style Guide page
 * Visual reference of every design-system token.
 */

/* Page header */
.brxe-section.cp-sg-header {
  align-items: stretch !important;
  width: 100%;
  padding: 140px 0 80px;
  background: var(--cp-cream-bg);
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-container.cp-sg-header__inner {
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px;
}
.cp-sg-header__eyebrow { color: var(--cp-orange); letter-spacing: .14em; }
.cp-sg-header__title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--cp-text-headline);
  margin: 0;
}
.cp-sg-header__body {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body-lg);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 8px 0 0;
  max-width: 60ch;
}

/* Generic section frame */
.brxe-section.cp-sg-section {
  align-items: stretch !important;
  width: 100%;
  padding: 96px 0;
  background: var(--cp-cream-bg);
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-section.cp-sg-section:nth-of-type(even) { background: #fff; }
.brxe-container.cp-sg-section__inner {
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 40px;
}

/* Section heading */
.brxe-block.cp-sg-section__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px;
  width: auto !important;
  max-width: 720px;
}
.cp-sg-section__eyebrow {
  color: var(--cp-orange);
  letter-spacing: .14em;
}
.cp-sg-section__title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--cp-text-headline);
  margin: 0;
}
.cp-sg-section__blurb {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body);
  line-height: var(--cp-leading-body);
  color: var(--cp-text-secondary);
  margin: 0;
  max-width: 60ch;
}


/* ─── Colors ─── */
.brxe-block.cp-sg-colors__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 36px;
  width: 100% !important;
}
.brxe-block.cp-sg-colors__group {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
  width: 100% !important;
  align-items: flex-start !important;
}
.cp-sg-colors__group-title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h5);
  color: var(--cp-text-headline);
  margin: 0;
}
.brxe-block.cp-sg-colors__row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  width: 100% !important;
}
.brxe-block.cp-sg-swatch {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 160px;
  border-radius: 14px;
  border: 1px solid var(--cp-border-card);
  overflow: hidden;
  padding: 0 !important;
}
.brxe-block.cp-sg-swatch__meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
  width: 100% !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,.95);
  border-top: 1px solid rgba(15,18,23,.06);
}
.cp-sg-swatch--dark .cp-sg-swatch__meta { background: rgba(255,255,255,.95); }
.cp-sg-swatch--light .cp-sg-swatch__meta { background: rgba(255,255,255,.95); }
.cp-sg-swatch__var {
  font-family: var(--cp-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--cp-text-headline);
  letter-spacing: -.005em;
}
.cp-sg-swatch__hex {
  font-family: var(--cp-font-mono);
  font-size: 11px;
  color: var(--cp-text-meta);
}
.cp-sg-swatch__use {
  font-family: var(--cp-font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--cp-text-secondary);
  margin-top: 4px;
}


/* ─── Typography ─── */
.brxe-block.cp-sg-type__row {
  display: grid !important;
  grid-template-columns: 160px 1fr 280px;
  align-items: baseline !important;
  gap: 32px;
  width: 100% !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-block.cp-sg-type__row:last-child { border-bottom: none; }
.cp-sg-type__label { color: var(--cp-text-meta); }
.cp-sg-type__display {
  font-family: var(--cp-font-heading); font-weight: 400;
  font-size: var(--cp-text-display); line-height: var(--cp-leading-display);
  letter-spacing: var(--cp-tracking-display); color: var(--cp-text-headline);
  margin: 0;
}
.cp-sg-type__h2 { font-family: var(--cp-font-heading); font-weight: 400; font-size: var(--cp-text-h2);  line-height: var(--cp-leading-h2);  letter-spacing: var(--cp-tracking-h2);  color: var(--cp-text-headline); margin: 0; }
.cp-sg-type__h3 { font-family: var(--cp-font-heading); font-weight: 400; font-size: var(--cp-text-h3);  line-height: var(--cp-leading-h3);  letter-spacing: var(--cp-tracking-h3);  color: var(--cp-text-headline); margin: 0; }
.cp-sg-type__h4 { font-family: var(--cp-font-heading); font-weight: 400; font-size: var(--cp-text-h4);  line-height: var(--cp-leading-h4);  letter-spacing: var(--cp-tracking-h4);  color: var(--cp-text-headline); margin: 0; }
.cp-sg-type__h5 { font-family: var(--cp-font-heading); font-weight: 400; font-size: var(--cp-text-h5);  letter-spacing: var(--cp-tracking-h5);  color: var(--cp-text-headline); margin: 0; }
.cp-sg-type__body-lg { font-family: var(--cp-font-body); font-weight: 300; font-size: var(--cp-text-body-lg); line-height: var(--cp-leading-body); color: var(--cp-text-secondary); margin: 0; }
.cp-sg-type__body    { font-family: var(--cp-font-body); font-weight: 400; font-size: var(--cp-text-body);    line-height: var(--cp-leading-body); color: var(--cp-text-secondary); margin: 0; }
.cp-sg-type__small   { font-family: var(--cp-font-body); font-weight: 400; font-size: var(--cp-text-small);   line-height: 1.5; color: var(--cp-text-meta); margin: 0; }
.cp-sg-type__mono    { color: var(--cp-orange); }
.cp-sg-type__meta {
  font-family: var(--cp-font-mono);
  font-size: 12px;
  color: var(--cp-text-meta);
  text-align: right;
}


/* ─── Buttons ─── */
.brxe-block.cp-sg-btn-row {
  display: grid !important;
  grid-template-columns: 160px auto 1fr;
  align-items: center !important;
  gap: 32px;
  width: 100% !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-block.cp-sg-btn-row:last-child { border-bottom: none; }
.cp-sg-btn-row__label { color: var(--cp-text-meta); }
.cp-sg-btn-row__hint {
  font-family: var(--cp-font-mono);
  font-size: 12px;
  color: var(--cp-text-meta);
}
.cp-sg-btn-sample {
  padding: 14px 28px !important;
  border-radius: var(--cp-radius-lg) !important;
  font-family: var(--cp-font-body);
  font-weight: 500;
  font-size: 15px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cp-btn--primary.cp-sg-btn-sample {
  background: var(--cp-orange) !important;
  color: #fff !important;
  border: 1px solid var(--cp-orange-border) !important;
}
.cp-btn--ghost.cp-sg-btn-sample {
  background: transparent !important;
  color: var(--cp-text-headline) !important;
  border: 1px solid var(--cp-border-input) !important;
}
.cp-btn--secondary.cp-sg-btn-sample {
  background: var(--cp-text-headline) !important;
  color: #fff !important;
  border: 1px solid var(--cp-text-headline) !important;
}
.cp-btn--text.cp-sg-btn-sample {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  color: var(--cp-text-headline) !important;
}


/* ─── Cards ─── */
.brxe-block.cp-sg-cards__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  width: 100% !important;
}
.brxe-block.cp-sg-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px;
  width: 100% !important;
  padding: 28px !important;
  border-radius: var(--cp-radius-2xl, 20px);
  border: 1px solid var(--cp-border-card);
}
.cp-sg-card--orange { background: var(--cp-orange); border-color: var(--cp-orange-border); color: #fff; }
.cp-sg-card--orange .cp-sg-card__title,
.cp-sg-card--orange .cp-sg-card__body { color: #fff !important; }
.cp-sg-card--navy { background: var(--cp-text-headline); color: #fff; border-color: transparent; }
.cp-sg-card--navy .cp-sg-card__title,
.cp-sg-card--navy .cp-sg-card__body { color: #fff !important; }
.cp-sg-card--cream { background: #fff; }
.cp-sg-card--pastel { background: var(--cp-bg-pastel-blue); border-color: transparent; }
.cp-sg-card__title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h4);
  letter-spacing: var(--cp-tracking-h4);
  color: var(--cp-text-headline);
  margin: 0;
}
.cp-sg-card__body {
  font-family: var(--cp-font-body);
  font-weight: 300;
  font-size: var(--cp-text-body);
  color: var(--cp-text-secondary);
  margin: 0;
  flex: 1 1 auto;
}
.cp-sg-card__cta {
  margin-top: auto;
  padding: 12px 22px !important;
  border-radius: var(--cp-radius-lg) !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  font-weight: 500;
  font-size: 14px;
}
.cp-sg-card--cream .cp-sg-card__cta,
.cp-sg-card--pastel .cp-sg-card__cta {
  background: var(--cp-text-headline) !important;
  color: #fff !important;
  border-color: var(--cp-text-headline) !important;
}


/* ─── Radii ─── */
.brxe-block.cp-sg-radii__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  width: 100% !important;
}
.brxe-block.cp-sg-radii__cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  width: 100% !important;
}
.brxe-block.cp-sg-radii__chip {
  width: 100% !important;
  height: 110px;
  background: linear-gradient(135deg, var(--cp-orange) 0%, var(--cp-orange-grad-to, rgba(234,139,63,.4)) 100%);
  border: 1px solid var(--cp-orange-border);
}


/* ─── Spacing ─── */
.brxe-block.cp-sg-spacing__row {
  display: grid !important;
  grid-template-columns: 200px 1fr 80px;
  align-items: center !important;
  gap: 24px;
  width: 100% !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--cp-border-soft);
}
.brxe-block.cp-sg-spacing__row:last-child { border-bottom: none; }
.cp-sg-spacing__var {
  font-family: var(--cp-font-mono);
  font-size: 12px;
  color: var(--cp-text-headline);
}
.brxe-block.cp-sg-spacing__bar {
  height: 14px;
  background: var(--cp-text-headline);
  border-radius: 4px;
  margin: 0 !important;
}
.cp-sg-spacing__size {
  font-family: var(--cp-font-mono);
  font-size: 12px;
  color: var(--cp-text-meta);
  text-align: right;
}


/* ─── Inputs ─── */
.brxe-block.cp-sg-inputs__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  width: 100% !important;
}
.brxe-block.cp-sg-inputs__field {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  width: 100% !important;
}
.brxe-block.cp-sg-inputs__demo {
  width: 100% !important;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cp-border-input);
  padding: 14px 16px !important;
}
.cp-sg-inputs__demo--input { height: 50px; display: flex !important; align-items: center !important; }
.cp-sg-inputs__demo--area  { height: 110px; display: flex !important; align-items: flex-start !important; }
.cp-sg-inputs__demo--select { height: 50px; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.cp-sg-inputs__demo.is-focused {
  border-color: var(--cp-orange);
  box-shadow: 0 0 0 3px rgba(237,134,60,.18);
}
.cp-sg-inputs__placeholder {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  color: var(--cp-text-muted);
}
.cp-sg-inputs__hint {
  font-family: var(--cp-font-mono);
  font-size: 11px;
  color: var(--cp-text-meta);
}


@media (max-width: 720px) {
  .brxe-block.cp-sg-type__row,
  .brxe-block.cp-sg-btn-row,
  .brxe-block.cp-sg-spacing__row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cp-sg-type__meta,
  .cp-sg-spacing__size { text-align: left; }
}


/* ─── Form components (v2 — replaces simple input demos) ─── */
.brxe-block.cp-sg-form__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px;
  width: 100% !important;
  padding: 28px 0 !important;
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-block.cp-sg-form__group:last-child { border-bottom: none; }
.cp-sg-form__group-title {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h5);
  color: var(--cp-text-headline);
  margin: 0;
}

.brxe-block.cp-sg-form__states-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  width: 100% !important;
}
.brxe-block.cp-sg-form__state-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
  width: 100% !important;
}
.cp-sg-form__state-label { color: var(--cp-text-meta); font-size: 11px; }

.brxe-block.cp-sg-form__demo,
.brxe-block.cp-sg-form__input,
.brxe-block.cp-sg-form__textarea,
.brxe-block.cp-sg-form__select {
  width: 100% !important;
  border-radius: var(--cp-radius-lg);
  background: #fff;
  border: 1px solid var(--cp-border-input);
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .15s, box-shadow .15s;
}
.brxe-block.cp-sg-form__input { height: 50px; }
.brxe-block.cp-sg-form__textarea { height: 110px; align-items: flex-start !important; }
.brxe-block.cp-sg-form__select { height: 50px; justify-content: space-between !important; }

.cp-sg-form__input.is-focused {
  border-color: var(--cp-orange);
  box-shadow: 0 0 0 3px rgba(237,134,60,.18);
}
.cp-sg-form__input.is-filled {
  border-color: var(--cp-text-headline);
  background: #fff;
}
.cp-sg-form__input.is-filled .cp-sg-form__placeholder {
  color: var(--cp-text-headline);
}
.cp-sg-form__input.is-error {
  border-color: var(--cp-pill-red);
  box-shadow: 0 0 0 3px rgba(235,78,83,.18);
}
.cp-sg-form__input.is-error .cp-sg-form__placeholder {
  color: var(--cp-text-headline);
}
.cp-sg-form__input.is-disabled {
  background: rgba(15,18,23,.04);
  border-color: var(--cp-border-soft);
  cursor: not-allowed;
  opacity: .8;
}
.cp-sg-form__input.is-disabled .cp-sg-form__placeholder {
  color: var(--cp-text-muted);
}

.cp-sg-form__placeholder {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  color: var(--cp-text-muted);
}
.cp-sg-form__error {
  font-family: var(--cp-font-body);
  font-size: 12px;
  color: var(--cp-pill-red);
}

.cp-sg-form__select-caret {
  color: var(--cp-text-meta);
  font-size: 14px;
  margin-left: 12px;
}

.brxe-block.cp-sg-form__two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100% !important;
}
@media (max-width: 720px) {
  .brxe-block.cp-sg-form__two-col { grid-template-columns: 1fr !important; }
}

/* Selection controls — checkbox / radio / switch */
.brxe-block.cp-sg-form__toggle-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  width: 100% !important;
}
.brxe-block.cp-sg-form__toggle-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px;
  width: 100% !important;
  padding: 16px;
  border-radius: var(--cp-radius-lg);
  background: #fff;
  border: 1px solid var(--cp-border-soft);
}
.brxe-block.cp-sg-form__toggle-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  width: auto !important;
}
.cp-sg-form__toggle-label {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  color: var(--cp-text-headline);
}

.brxe-block.cp-sg-form__check {
  width: 22px !important;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--cp-border-input);
  background: #fff;
  flex: 0 0 22px;
  position: relative;
  margin: 0 !important;
}
.brxe-block.cp-sg-form__check.is-checked {
  background: var(--cp-orange);
  border-color: var(--cp-orange-border);
}
.brxe-block.cp-sg-form__check.is-checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.brxe-block.cp-sg-form__check.is-disabled {
  background: rgba(15,18,23,.06);
  border-color: var(--cp-border-soft);
}

.brxe-block.cp-sg-form__radio {
  width: 22px !important;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--cp-border-input);
  background: #fff;
  flex: 0 0 22px;
  position: relative;
  margin: 0 !important;
}
.brxe-block.cp-sg-form__radio.is-checked {
  border-color: var(--cp-orange);
}
.brxe-block.cp-sg-form__radio.is-checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--cp-orange);
}

.brxe-block.cp-sg-form__switch {
  width: 42px !important;
  height: 24px;
  border-radius: 999px;
  background: var(--cp-border-input);
  flex: 0 0 42px;
  position: relative;
  margin: 0 !important;
  transition: background .2s;
}
.brxe-block.cp-sg-form__switch-knob {
  position: absolute !important;
  top: 2px; left: 2px;
  width: 20px !important;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,18,23,.18);
  transition: left .2s;
  margin: 0 !important;
}
.brxe-block.cp-sg-form__switch.is-on { background: var(--cp-orange); }
.brxe-block.cp-sg-form__switch.is-on .cp-sg-form__switch-knob { left: 20px; }


/* ─── Badges / pills / ribbons ─── */
.brxe-block.cp-sg-badges__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px;
  width: 100% !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--cp-border-soft);
}
.brxe-block.cp-sg-badges__group:last-child { border-bottom: none; }
.brxe-block.cp-sg-badges__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px;
  width: auto !important;
}

.brxe-block.cp-sg-pill {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px;
  width: auto !important;
  padding: 5px 12px 5px 9px !important;
  border-radius: 999px;
  font-family: var(--cp-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  border: 1px solid transparent;
}
.cp-sg-pill__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.cp-sg-pill--success { background: rgba(111,191,138,.16); color: #2f8c52; border-color: rgba(111,191,138,.45); }
.cp-sg-pill--success .cp-sg-pill__glyph { background: #6fbf8a; color: #fff; }
.cp-sg-pill--warning { background: rgba(201,162,77,.18); color: #8a6516; border-color: rgba(201,162,77,.45); }
.cp-sg-pill--warning .cp-sg-pill__glyph { background: #c9a24d; color: #fff; }
.cp-sg-pill--error   { background: rgba(235,78,83,.14);  color: #a83139; border-color: rgba(235,78,83,.40); }
.cp-sg-pill--error   .cp-sg-pill__glyph { background: var(--cp-pill-red); color: #fff; }
.cp-sg-pill--info    { background: rgba(74,102,214,.12); color: #2c3d99; border-color: rgba(74,102,214,.35); }
.cp-sg-pill--info    .cp-sg-pill__glyph { background: #4a66d6; color: #fff; }
.cp-sg-pill--neutral { background: rgba(15,18,23,.06); color: var(--cp-text-headline); border-color: var(--cp-border-soft); }
.cp-sg-pill--neutral .cp-sg-pill__glyph { background: var(--cp-text-headline); color: #fff; }

.cp-sg-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--cp-radius-lg);
  background: #fff;
  border: 1px solid var(--cp-border-soft);
  font-family: var(--cp-font-body);
  font-size: 13px;
  color: var(--cp-text-headline);
}

.cp-sg-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cp-orange);
  color: #fff;
  font-family: var(--cp-font-heading);
  font-size: 14px;
  letter-spacing: -.01em;
  border: 1px solid var(--cp-orange-border);
}
.cp-sg-score-pill--lift {
  background: rgba(237,134,60,.14);
  color: var(--cp-orange-border);
  border-color: rgba(237,134,60,.45);
  font-family: var(--cp-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}
.cp-sg-ribbon {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--cp-orange);
  color: #fff;
  font-family: var(--cp-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.cp-sg-ribbon::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background:
    linear-gradient(135deg, var(--cp-orange) 50%, transparent 50%) left / 12px 100%,
    linear-gradient(45deg,  var(--cp-orange) 50%, transparent 50%) right / 12px 100%;
  background-repeat: no-repeat;
}


/* ─── Shadows / elevation ─── */
.brxe-block.cp-sg-shadows__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  width: 100% !important;
}
.brxe-block.cp-sg-shadow {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  width: 100% !important;
  padding: 22px 20px !important;
  border-radius: var(--cp-radius-2xl);
  background: #fff;
  border: 1px solid rgba(15,18,23,.04);
  min-height: 160px;
}
.cp-sg-shadow--0 { box-shadow: none; border-color: var(--cp-border-soft); }
.cp-sg-shadow--1 { box-shadow: 0 1px 2px rgba(15,18,23,.08); }
.cp-sg-shadow--2 { box-shadow: 0 8px 24px rgba(15,18,23,.10), 0 2px 4px rgba(15,18,23,.06); }
.cp-sg-shadow--3 { box-shadow: 0 24px 60px rgba(15,18,23,.18), 0 6px 14px rgba(15,18,23,.08); }
.cp-sg-shadow__name {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: var(--cp-text-h5);
  color: var(--cp-text-headline);
}
.cp-sg-shadow__value {
  font-family: var(--cp-font-mono);
  font-size: 11px;
  color: var(--cp-text-meta);
  line-height: 1.45;
}
.cp-sg-shadow__use {
  font-family: var(--cp-font-body);
  font-size: 13px;
  color: var(--cp-text-secondary);
  margin-top: auto;
}


/* ─── Icons ─── */
.brxe-block.cp-sg-icons__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100% !important;
}
.brxe-block.cp-sg-icons__cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
  width: 100% !important;
  padding: 24px 12px !important;
  border-radius: var(--cp-radius-lg);
  background: #fff;
  border: 1px solid var(--cp-border-soft);
  color: var(--cp-text-headline);
  transition: border-color .15s, transform .15s;
}
.brxe-block.cp-sg-icons__cell:hover {
  border-color: var(--cp-text-headline);
  transform: translateY(-1px);
}
.brxe-block.cp-sg-icons__glyph {
  width: 32px !important;
  height: 32px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.cp-sg-icons__glyph svg {
  width: 100%; height: 100%; display: block;
}
.cp-sg-icons__name {
  font-family: var(--cp-font-mono);
  font-size: 11px;
  color: var(--cp-text-meta);
  letter-spacing: -.005em;
}


/* ─── Component patterns ─── */
.brxe-block.cp-sg-patterns__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  width: 100% !important;
}
.brxe-block.cp-sg-pattern {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px;
  width: 100% !important;
  padding: 28px !important;
  border-radius: var(--cp-radius-2xl);
  background: #fff;
  border: 1px solid var(--cp-border-soft);
  min-height: 240px;
}
.cp-sg-pattern__eyebrow {
  letter-spacing: .14em;
  color: var(--cp-orange);
  font-size: 10px;
}

/* Stat */
.cp-sg-pattern__big {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 72px);
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--cp-text-headline);
  margin: 0;
}
.cp-sg-pattern__sub {
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-body);
  color: var(--cp-text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Avatars */
.cp-sg-pattern--avatars { gap: 16px; }
.brxe-block.cp-sg-avatars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.brxe-image.cp-sg-avatars__img {
  width: 44px !important;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 3px rgba(15,18,23,.10);
  margin-left: -10px;
  overflow: hidden;
}
.brxe-image.cp-sg-avatars__img:first-child { margin-left: 0; }
.brxe-image.cp-sg-avatars__img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Testimonial */
.cp-sg-pattern--testimonial { background: var(--cp-cream-bg); }
.cp-sg-pattern__quote {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--cp-text-headline);
  margin: 0;
}
.brxe-block.cp-sg-pattern__person {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  width: auto !important;
  margin-top: auto;
}
.cp-sg-pattern__name { font-family: var(--cp-font-heading); font-size: 14px; color: var(--cp-text-headline); }
.cp-sg-pattern__divider { color: var(--cp-text-muted); }
.cp-sg-pattern__org { font-family: var(--cp-font-body); font-size: 13px; color: var(--cp-text-secondary); }

/* Pricing */
.cp-sg-pattern--pricing { background: var(--cp-text-headline); color: #fff; border-color: transparent; }
.cp-sg-pattern--pricing .cp-sg-pattern__eyebrow,
.cp-sg-pattern--pricing .cp-sg-pattern__sub { color: rgba(255,255,255,.7); }
.cp-sg-pattern__tier {
  font-family: var(--cp-font-body);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
}
.brxe-block.cp-sg-pattern__price-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px;
  width: auto !important;
  margin: 0 !important;
}
.cp-sg-pattern__amount {
  font-family: var(--cp-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  margin: 0;
}
.cp-sg-pattern__period {
  font-family: var(--cp-font-body);
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.cp-sg-pattern__cta { margin-top: auto; }

/* Accordion */
.cp-sg-pattern--accordion { padding: 0 !important; gap: 0; min-height: 280px; }
.cp-sg-pattern--accordion .cp-sg-pattern__eyebrow {
  padding: 22px 24px 0 !important;
}
.brxe-block.cp-sg-accordion__item {
  width: 100% !important;
  padding: 18px 24px !important;
  border-top: 1px solid var(--cp-border-soft);
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  align-items: stretch !important;
}
.brxe-block.cp-sg-accordion__item:first-of-type { border-top: 1px solid var(--cp-border-soft); margin-top: 16px; }
.brxe-block.cp-sg-accordion__head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  cursor: default;
  margin: 0 !important;
}
.cp-sg-accordion__q {
  font-family: var(--cp-font-heading);
  font-size: 15px;
  color: var(--cp-text-headline);
}
.cp-sg-accordion__caret {
  font-family: var(--cp-font-body);
  font-size: 18px;
  color: var(--cp-text-meta);
  transition: transform .2s;
}
.cp-sg-accordion__item.is-open .cp-sg-accordion__caret { transform: rotate(45deg); color: var(--cp-orange); }
.cp-sg-accordion__a {
  font-family: var(--cp-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cp-text-secondary);
  margin: 0;
}

/* ─── Icon mask shapes (auto-generated) ─── */
.cp-sg-icon {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.cp-sg-icon--arrow-right {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--arrow-up-right {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017%2017%207M9%207h8v8%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2017%2017%207M9%207h8v8%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--chevron-down {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--check {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%205%205L20%206%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%205%205L20%206%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--close {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M6%2018%2018%206%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--plus {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--minus {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--search {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--menu {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--user {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--book {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h13a3%203%200%200%201%203%203v13H7a3%203%200%200%201-3-3V4zM4%2017a3%203%200%200%201%203-3h13%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h13a3%203%200%200%201%203%203v13H7a3%203%200%200%201-3-3V4zM4%2017a3%203%200%200%201%203-3h13%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--calendar {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2010h16M9%203v4M15%203v4%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2010h16M9%203v4M15%203v4%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--clock {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--star {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.7%206.1%206.6.6-5%204.5%201.5%206.5L12%2017.4%206.2%2020.7l1.5-6.5-5-4.5%206.6-.6L12%203z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.7%206.1%206.6.6-5%204.5%201.5%206.5L12%2017.4%206.2%2020.7l1.5-6.5-5-4.5%206.6-.6L12%203z%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--mail {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E");
}
.cp-sg-icon--chat {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-11.5%207.2L4%2021l1.8-5.5A8%208%200%201%201%2021%2012z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-11.5%207.2L4%2021l1.8-5.5A8%208%200%201%201%2021%2012z%22%2F%3E%3C%2Fsvg%3E");
}