:root {
  /* Canonical brand indigo */
  --bs-primary: #8540f5;
  --bs-primary-rgb: 133, 64, 245;

  /* Links */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #6f28f2; /* slightly darker indigo */
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);

  /* Project tokens */
  --ptg-hero-overlay: rgba(0, 0, 0, 0.30);
  --ptg-steps-gradient: linear-gradient(90deg, #6f42c1 0%, #d63384 45%, #fd7e14 100%);
  
   --ptg-whatsapp: #25d366;
  --ptg-whatsapp-hover: #1fb85a;
  --ptg-whatsapp-text: #fff;

  /* add this */
  --ptg-whatsapp-rgb: 37, 211, 102;
}
/* Ensure Bootstrap color mode doesn't reset brand inside themed areas */
[data-bs-theme="light"] {
  --bs-primary: #8540f5;
}

/* Feature icon badge (global) 
.ptg-icon-badge {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
}

.ptg-icon-badge .bi {
  font-size: 1.1rem;
  line-height: 1;
}*/

.ptg-icon-badge {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
}

.ptg-icon-badge > i {
  font-size: 1.1rem;
  line-height: 1;
}

.ptg-icon-badge > img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  object-fit: contain;
}
/* Small caps utility */
.ptg-smallcaps {
  font-variant-caps: small-caps;
  font-variant: small-caps; /* fallback */
  letter-spacing: 0.04em;   /* optional: helps readability */
}

/* Small caps utility */
.ptg-smallcaps--fake {
  text-transform: uppercase;
  font-size: 0.82em;
  letter-spacing: 0.06em;
}

/* Specificity bump for steps text */
.steps-text.ptg-smallcaps--fake {
  text-transform: uppercase;
  font-size: 0.82em;
  letter-spacing: 0.06em;
}
/* Gradient card accent (ties cards to the steps band) */
.ptg-card-accent {
  position: relative;
  overflow: hidden; /* keeps the top bar corners clean */
}

.ptg-card-accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ptg-steps-gradient);
  border-radius: 0.9rem 0.9rem 0 0; /* matches your card rounding vibe */
  opacity: 0.95;
}

/* Optional: slightly richer hover (still subtle) */
.ptg-card-accent:hover {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(133, 64, 245, 0.10);
}
.ptg-cta-accent {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--ptg-steps-gradient) border-box;
}
/*Border-gradient*/
.border-gradient {
  border-color: transparent !important;
  background:
    linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box,
    var(--ptg-steps-gradient) border-box;
}

/* =========================================================
   INFO / CALLOUT BOX (reusable across all pages)
   - "At a glance", "How pricing works", buying tips, trial note
   ========================================================= */
.ptg-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: rgba(var(--bs-primary-rgb), 0.06);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

.ptg-callout-label {
  display: block;
  color: var(--bs-primary);
  text-transform: uppercase;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

/* =========================================================
   HERO EYEBROW (the small uppercase label in hero sections)
   ========================================================= */
.ptg-hero-eyebrow {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* =========================================================
   HERO SUBTEXT (slightly dimmed paragraph in hero)
   ========================================================= */
.ptg-hero-subtext {
  opacity: 0.9;
}

/* =========================================================
   SECTION LABEL (uppercase small text above H2s)
   ========================================================= */
.ptg-section-label {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =========================================================
   PULL QUOTE (blockquote with brand left border)
   ========================================================= */
.ptg-pull-quote {
  border-left: 4px solid var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.05);
}

/* =========================================================
   GRADIENT PILL BADGE (e.g. "Most chosen" on pricing)
   ========================================================= */
.ptg-badge-gradient {
  background: var(--ptg-steps-gradient);
  color: #fff;
}

/* =========================================================
   PORTRAIT IMAGE (round teacher photos, constrained width)
   ========================================================= */
.ptg-portrait-lg {
  max-width: 280px;
}

.ptg-portrait-md {
  max-width: 240px;
}

/* =========================================================
   MAP (contact page)
   ========================================================= */
.ptg-map {
  aspect-ratio: 16 / 9;
}

.ptg-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}