/* =====================================================================
   VEXORAHOST — PÁGINAS DE PRODUCTO
   (API de WhatsApp, API de Telegram, Hosting web)
   Usa los tokens de style.css.
===================================================================== */

.pp-page {

  padding: 72px 0 40px;

}

.pp-section {

  margin-top: 120px;

}

.pp-gradient {

  background:
    linear-gradient(100deg, #ffffff 0%, #d8b4fe 45%, #8b5cf6 100%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}


/* =========================================
   HERO
========================================= */

.pp-hero {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  align-items: center;

  gap: 64px;

  min-height: 560px;

}

.pp-hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 7px 13px;

  border: 1px solid rgba(168,85,247,.22);

  border-radius: 999px;

  background: rgba(124,58,237,.07);

  color: #cbbbe8;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;

}

.pp-hero h1 {

  margin-top: 22px;

  font-size: clamp(40px, 5.3vw, 66px);

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.055em;

}

.pp-hero h1 span {

  display: block;

}

.pp-hero-description {

  max-width: 560px;

  margin-top: 24px;

  color: #b3acc0;

  font-size: 18px;

  line-height: 1.7;

}

.pp-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 32px;

}

.pp-trust {

  display: flex;

  flex-wrap: wrap;

  gap: 10px 22px;

  margin-top: 30px;

}

.pp-trust span {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #968ea3;

  font-size: 13.5px;

}

.pp-trust span::before {

  content: "✓";

  color: var(--primary-soft);

  font-weight: 800;

}


/* ---------- Visual del hero: chat ---------- */

.pp-hero-visual {

  position: relative;

  display: flex;

  justify-content: center;

}

.pp-hero-visual::before {

  content: "";

  position: absolute;

  inset: 10% 8%;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(124,58,237,.28), transparent 70%);

  filter: blur(40px);

  pointer-events: none;

}

.pp-device {

  position: relative;

  width: min(100%, 420px);

  padding: 18px;

  border: 1px solid rgba(168,85,247,.22);

  border-radius: 24px;

  background:
    linear-gradient(160deg, rgba(30,22,47,.96), rgba(11,9,17,.98));

  box-shadow:
    0 40px 90px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.03) inset;

}

.pp-device-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding-bottom: 14px;

  border-bottom: 1px solid rgba(255,255,255,.06);

}

.pp-avatar {

  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  color: #fff;

  font-size: 12px;

  font-weight: 800;

}

.pp-device-header strong {

  display: block;

  color: #f4f0fa;

  font-size: 14.5px;

}

.pp-device-header small {

  display: flex;

  align-items: center;

  gap: 6px;

  color: #79d99a;

  font-size: 12px;

}

.pp-device-header small::before {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--success);

  box-shadow: 0 0 8px var(--success);

}

.pp-chat {

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 18px 2px 6px;

}

.pp-bubble {

  max-width: 84%;

  padding: 10px 13px;

  border-radius: 14px;

  font-size: 13.5px;

  line-height: 1.5;

}

.pp-bubble small {

  display: block;

  margin-top: 4px;

  color: rgba(255,255,255,.45);

  font-size: 11px;

  text-align: right;

}

.pp-bubble-in {

  align-self: flex-start;

  border: 1px solid rgba(255,255,255,.06);

  border-bottom-left-radius: 4px;

  background: rgba(255,255,255,.04);

  color: #ddd6e8;

}

.pp-bubble-out {

  align-self: flex-end;

  border-bottom-right-radius: 4px;

  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(109,40,217,.85));

  color: #fff;

}

.pp-code {

  margin-top: 14px;

  padding: 14px;

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 14px;

  background: rgba(5,4,9,.85);

  color: #b9b1c6;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 12px;

  line-height: 1.7;

  white-space: pre;

  overflow: hidden;

  text-overflow: ellipsis;

}

.pp-code .k { color: var(--primary-soft); }

.pp-code .s { color: #86efac; }

.pp-code .c { color: #6f6779; }

.pp-float {

  position: absolute;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 14px;

  border: 1px solid rgba(168,85,247,.25);

  border-radius: 14px;

  background: rgba(16,12,25,.94);

  box-shadow: 0 20px 50px rgba(0,0,0,.45);

  color: #e9e3f3;

  font-size: 13px;

  font-weight: 700;

}

.pp-float small {

  display: block;

  color: #8f879b;

  font-size: 11.5px;

  font-weight: 500;

}

.pp-float-icon {

  display: grid;

  place-items: center;

  width: 30px;

  height: 30px;

  border-radius: 9px;

  background: rgba(124,58,237,.18);

  color: var(--primary-soft);

  font-size: 14px;

}

.pp-float-a {

  left: -34px;

  bottom: -22px;

}

.pp-float-b {

  right: -14px;

  top: 34px;

}


/* ---------- Visual del hero: navegador ---------- */

.pp-browser {

  position: relative;

  width: min(100%, 460px);

  overflow: hidden;

  border: 1px solid rgba(168,85,247,.22);

  border-radius: 20px;

  background: linear-gradient(160deg, rgba(30,22,47,.96), rgba(11,9,17,.98));

  box-shadow: 0 40px 90px rgba(0,0,0,.5);

}

.pp-browser-bar {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 14px;

  border-bottom: 1px solid rgba(255,255,255,.06);

  background: rgba(255,255,255,.02);

}

.pp-browser-dots {

  display: flex;

  gap: 6px;

}

.pp-browser-dots i {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: rgba(255,255,255,.14);

}

.pp-browser-url {

  display: flex;

  align-items: center;

  gap: 7px;

  flex: 1;

  min-width: 0;

  padding: 6px 11px;

  border-radius: 8px;

  background: rgba(0,0,0,.35);

  color: #c9c1d6;

  font-size: 12.5px;

  white-space: nowrap;

  overflow: hidden;

}

.pp-browser-url svg {

  width: 13px;

  height: 13px;

  flex-shrink: 0;

  fill: none;

  stroke: var(--success);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.pp-browser-body {

  padding: 22px;

}

.pp-skel {

  height: 10px;

  border-radius: 6px;

  background: rgba(255,255,255,.07);

}

.pp-skel + .pp-skel {

  margin-top: 9px;

}

.pp-skel-hero {

  height: 110px;

  margin-bottom: 16px;

  border-radius: 12px;

  background:
    linear-gradient(135deg, rgba(124,58,237,.35), rgba(168,85,247,.1)),
    rgba(255,255,255,.03);

}

.pp-skel-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-top: 16px;

}

.pp-skel-row div {

  height: 56px;

  border-radius: 10px;

  background: rgba(255,255,255,.045);

}


/* =========================================
   SECTION HEADER
========================================= */

.pp-section-header {

  max-width: 720px;

  margin: 0 auto 48px;

  text-align: center;

}

.pp-section-header h2 {

  margin-top: 4px;

  color: #f5f1f7;

  font-size: clamp(32px, 4.6vw, 50px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -.05em;

}

.pp-section-header p {

  max-width: 600px;

  margin: 18px auto 0;

  color: #9a92a6;

  font-size: 16px;

  line-height: 1.7;

}


/* =========================================
   BILLING TOGGLE
========================================= */

.pp-billing {

  display: flex;

  justify-content: center;

  margin: -14px 0 36px;

}

.pp-billing-switch {

  display: inline-flex;

  gap: 4px;

  padding: 5px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 14px;

  background: rgba(255,255,255,.025);

}

.pp-billing-option {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 42px;

  padding: 0 20px;

  border: 0;

  border-radius: 10px;

  background: transparent;

  color: #9d95a8;

  font-size: 14px;

  font-weight: 750;

  transition: color var(--transition), background var(--transition), box-shadow var(--transition);

}

.pp-billing-option:hover {

  color: #fff;

}

.pp-billing-option.active {

  background: linear-gradient(135deg, var(--primary), var(--primary-dark));

  box-shadow: 0 8px 25px rgba(124,58,237,.25);

  color: #fff;

}

.pp-billing[hidden],
.pp-billing-option[hidden] {

  display: none;

}

.pp-billing-option em {

  padding: 3px 8px;

  border-radius: 999px;

  background: rgba(34,197,94,.16);

  color: #86efac;

  font-size: 11px;

  font-style: normal;

  font-weight: 800;

}

.pp-billing-option.active em {

  background: rgba(255,255,255,.18);

  color: #fff;

}


/* =========================================
   PLANES
========================================= */

.pp-plans {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 18px;

  max-width: 1080px;

  margin: 0 auto;

}

.pp-plan {

  position: relative;

  display: flex;

  flex-direction: column;

  padding: 30px 26px 26px;

  border: 1px solid var(--card-border, rgba(168,85,247,.14));

  border-radius: 22px;

  background: linear-gradient(150deg, rgba(27,20,42,.94), rgba(10,8,15,.98));

  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;

}

.pp-plan:hover {

  transform: translateY(-4px);

  border-color: rgba(168,85,247,.42);

  box-shadow: 0 26px 60px rgba(0,0,0,.32);

}

.pp-plan.featured {

  border-color: rgba(139,92,246,.6);

  background:
    radial-gradient(400px 200px at 50% 0%, rgba(124,58,237,.18), transparent 70%),
    linear-gradient(150deg, rgba(31,22,50,.96), rgba(10,8,15,.98));

  box-shadow:
    0 0 0 1px rgba(139,92,246,.12),
    0 24px 70px rgba(124,58,237,.18);

}

.pp-plan-badge {

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  padding: 6px 12px;

  border-radius: 999px;

  background: linear-gradient(135deg, #7c3aed, #a855f7);

  box-shadow: 0 8px 22px rgba(124,58,237,.4);

  color: #fff;

  font-size: 10.5px;

  font-weight: 800;

  letter-spacing: .08em;

  white-space: nowrap;

}

.pp-plan-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

}

.pp-plan-kicker {

  color: var(--primary-soft);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;

}

.pp-plan h3 {

  margin-top: 6px;

  color: #f4eff9;

  font-size: 22px;

  letter-spacing: -.03em;

}

.pp-plan-number {

  display: grid;

  place-items: center;

  width: 34px;

  height: 34px;

  flex-shrink: 0;

  border: 1px solid rgba(168,85,247,.2);

  border-radius: 10px;

  background: rgba(124,58,237,.08);

  color: #c9a5fb;

  font-size: 12px;

  font-weight: 800;

}

.pp-plan-description {

  margin-top: 10px;

  min-height: 46px;

  color: #9a92a6;

  font-size: 14px;

  line-height: 1.6;

}

.pp-plan-price {

  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-top: 20px;

}

.pp-plan-price strong {

  color: #fff;

  font-size: 46px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.05em;

}

.pp-plan-price span {

  color: #8f879b;

  font-size: 15px;

}

.pp-plan-note {

  min-height: 22px;

  margin-top: 8px;

  color: #8f879b;

  font-size: 13px;

}

.pp-plan-note b {

  color: #86efac;

  font-weight: 700;

}

.pp-plan-features {

  display: grid;

  gap: 11px;

  margin: 22px 0 26px;

  padding-top: 22px;

  border-top: 1px solid rgba(255,255,255,.06);

  list-style: none;

}

.pp-plan-features li {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: #cdc6d8;

  font-size: 14px;

  line-height: 1.5;

}

.pp-plan-features li::before {

  content: "";

  flex-shrink: 0;

  width: 18px;

  height: 18px;

  margin-top: 1px;

  border-radius: 50%;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b4fe' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat,
    rgba(124,58,237,.18);

}

.pp-plan .button {

  width: 100%;

  margin-top: auto;

}

/* Una sola tarjeta (APIs): formato horizontal */

.pp-plans.single {

  grid-template-columns: minmax(0, 860px);

  justify-content: center;

}

.pp-plans.single .pp-plan {

  display: grid;

  grid-template-columns: 1fr 1fr;

  column-gap: 40px;

  padding: 36px;

}

.pp-plans.single .pp-plan-main {

  display: flex;

  flex-direction: column;

}

.pp-plans.single .pp-plan-features {

  margin: 0;

  padding: 0 0 0 40px;

  border-top: 0;

  border-left: 1px solid rgba(255,255,255,.07);

  align-content: center;

}

.pp-plans.single .pp-plan .button {

  margin-top: 26px;

}


/* ---------- Estados ---------- */

.pp-state {

  grid-column: 1 / -1;

  max-width: 560px;

  margin: 0 auto;

  padding: 44px 28px;

  border: 1px dashed rgba(168,85,247,.25);

  border-radius: 20px;

  background: rgba(124,58,237,.04);

  text-align: center;

}

.pp-state strong {

  display: block;

  color: #f2edf8;

  font-size: 19px;

}

.pp-state p {

  margin-top: 8px;

  color: #9a92a6;

  font-size: 14.5px;

}

.pp-state .button {

  margin-top: 20px;

}

.pp-skeleton-card {

  height: 430px;

  border: 1px solid rgba(255,255,255,.05);

  border-radius: 22px;

  background:
    linear-gradient(100deg, rgba(255,255,255,.02) 20%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.02) 60%) 0 0 / 300% 100%,
    rgba(16,13,24,.7);

  animation: pp-shimmer 1.4s linear infinite;

}

@keyframes pp-shimmer {

  from { background-position: 100% 0, 0 0; }

  to { background-position: -100% 0, 0 0; }

}

.pp-plans-footnote {

  max-width: 760px;

  margin: 24px auto 0;

  color: #7f7790;

  font-size: 13px;

  text-align: center;

}


/* =========================================
   QUÉ INCLUYE
========================================= */

.pp-included {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

}

.pp-included-card {

  padding: 26px 24px;

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 18px;

  background: rgba(255,255,255,.018);

  transition: border-color var(--transition), background var(--transition);

}

.pp-included-card:hover {

  border-color: rgba(168,85,247,.3);

  background: rgba(124,58,237,.045);

}

.pp-icon {

  display: grid;

  place-items: center;

  width: 44px;

  height: 44px;

  margin-bottom: 18px;

  border: 1px solid rgba(168,85,247,.22);

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(168,85,247,.05));

}

.pp-icon svg {

  width: 21px;

  height: 21px;

  fill: none;

  stroke: #c9a5fb;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.pp-included-card h3 {

  color: #f0ebf6;

  font-size: 17px;

  letter-spacing: -.02em;

}

.pp-included-card p {

  margin-top: 8px;

  color: #968ea3;

  font-size: 14px;

  line-height: 1.65;

}


/* =========================================
   CÓMO FUNCIONA
========================================= */

.pp-steps {

  position: relative;

  display: grid;

  grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));

  gap: 18px;

  counter-reset: step;

  list-style: none;

}

.pp-step {

  position: relative;

  padding: 28px 24px;

  border: 1px solid var(--card-border, rgba(168,85,247,.14));

  border-radius: 20px;

  background: linear-gradient(160deg, rgba(24,18,37,.9), rgba(10,8,15,.95));

}

.pp-step-number {

  display: grid;

  place-items: center;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--primary), var(--primary-light));

  box-shadow: 0 0 0 6px rgba(124,58,237,.12), 0 10px 26px rgba(124,58,237,.35);

  color: #fff;

  font-size: 16px;

  font-weight: 800;

}

.pp-step h3 {

  margin-top: 20px;

  color: #f2edf8;

  font-size: 18px;

  letter-spacing: -.02em;

}

.pp-step p {

  margin-top: 8px;

  color: #968ea3;

  font-size: 14px;

  line-height: 1.65;

}

.pp-step:not(:last-child)::after {

  content: "";

  position: absolute;

  top: 50px;

  right: -18px;

  width: 18px;

  height: 1px;

  background: linear-gradient(90deg, rgba(168,85,247,.6), rgba(168,85,247,.1));

}

.pp-progress {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-top: 30px;

}

.pp-progress span {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 14px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 999px;

  background: rgba(255,255,255,.03);

  color: #c8c0d3;

  font-size: 13px;

  font-weight: 700;

}

.pp-progress span::before {

  content: "";

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: currentColor;

}

.pp-progress .s1 { color: #c4b5fd; }

.pp-progress .s2 { color: #fbbf24; }

.pp-progress .s3 { color: #4ade80; }

.pp-progress i {

  color: #5f5869;

  font-style: normal;

}


/* =========================================
   PANEL (mock del área de cliente)
========================================= */

.pp-control {

  position: relative;

  overflow: hidden;

  padding: 56px;

  border: 1px solid rgba(168,85,247,.16);

  border-radius: 28px;

  background:
    radial-gradient(500px 300px at 100% 0%, rgba(124,58,237,.16), transparent 70%),
    linear-gradient(140deg, rgba(22,16,34,.95), rgba(9,7,14,.98));

}

.pp-control-grid {

  display: grid;

  grid-template-columns: .95fr 1.05fr;

  align-items: center;

  gap: 56px;

}

.pp-control h2 {

  color: #f5f1f7;

  font-size: clamp(30px, 4vw, 46px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -.05em;

}

.pp-control-text > p {

  max-width: 480px;

  margin-top: 18px;

  color: #9a92a6;

  font-size: 15.5px;

  line-height: 1.7;

}

.pp-control-list {

  display: grid;

  gap: 16px;

  margin-top: 28px;

  list-style: none;

}

.pp-control-list li {

  display: flex;

  gap: 14px;

}

.pp-control-list .pp-icon {

  width: 38px;

  height: 38px;

  margin: 0;

  flex-shrink: 0;

}

.pp-control-list .pp-icon svg {

  width: 18px;

  height: 18px;

}

.pp-control-list strong {

  display: block;

  color: #ebe5f3;

  font-size: 15px;

}

.pp-control-list span {

  display: block;

  margin-top: 2px;

  color: #8f879b;

  font-size: 13.5px;

  line-height: 1.55;

}

.pp-panel {

  padding: 24px;

  border: 1px solid rgba(168,85,247,.2);

  border-radius: 22px;

  background: rgba(10,8,15,.88);

  box-shadow: 0 30px 80px rgba(0,0,0,.45);

}

.pp-panel-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding-bottom: 18px;

  border-bottom: 1px solid rgba(255,255,255,.06);

}

.pp-panel-head small {

  color: #7f7790;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .14em;

}

.pp-panel-head h3 {

  margin-top: 4px;

  color: #f4eff8;

  font-size: 19px;

}

.pp-status {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 6px 11px;

  border: 1px solid rgba(34,197,94,.2);

  border-radius: 999px;

  background: rgba(34,197,94,.08);

  color: #79d99a;

  font-size: 12px;

  font-weight: 800;

  white-space: nowrap;

}

.pp-status::before {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--success);

  box-shadow: 0 0 8px var(--success);

}

.pp-access {

  display: grid;

  gap: 1px;

  margin-top: 18px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 14px;

  background: rgba(255,255,255,.06);

}

.pp-access div {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding: 13px 15px;

  background: rgba(12,10,18,.98);

}

.pp-access span {

  color: #857d92;

  font-size: 13px;

}

.pp-access strong {

  min-width: 0;

  color: #e9e3f2;

  font-size: 13.5px;

  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.pp-access .url {

  color: var(--primary-soft);

}

.pp-access .ok {

  color: #79d99a;

}

.pp-panel-actions {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-top: 16px;

}

.pp-panel-actions span {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  min-height: 42px;

  padding: 0 10px;

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 11px;

  background: rgba(255,255,255,.025);

  color: #ddd6e8;

  font-size: 13px;

  font-weight: 700;

  text-align: center;

}

.pp-panel-actions span:first-child {

  border-color: rgba(168,85,247,.4);

  background: rgba(124,58,237,.14);

}

.pp-panel-actions .danger {

  color: #fca5a5;

}


/* =========================================
   FAQ
========================================= */

.pp-faq {

  display: grid;

  grid-template-columns: .8fr 1.2fr;

  gap: 64px;

}

.pp-faq-intro h2 {

  color: #f5f1f7;

  font-size: clamp(32px, 4.4vw, 50px);

  font-weight: 800;

  line-height: 1.04;

  letter-spacing: -.05em;

}

.pp-faq-intro p {

  max-width: 380px;

  margin-top: 18px;

  color: #9a92a6;

  font-size: 15.5px;

  line-height: 1.7;

}

.pp-faq-intro a {

  color: var(--primary-soft);

  font-weight: 700;

}

.pp-faq-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}


/* =========================================
   CTA
========================================= */

.pp-cta {

  position: relative;

  overflow: hidden;

  padding: 64px 32px;

  border: 1px solid rgba(168,85,247,.2);

  border-radius: 28px;

  background:
    radial-gradient(500px 260px at 50% 0%, rgba(124,58,237,.24), transparent 70%),
    linear-gradient(150deg, rgba(25,18,40,.95), rgba(9,7,14,.98));

  text-align: center;

}

.pp-cta h2 {

  max-width: 720px;

  margin: 4px auto 0;

  color: #f6f2fa;

  font-size: clamp(30px, 4.6vw, 50px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -.05em;

}

.pp-cta p {

  max-width: 560px;

  margin: 18px auto 0;

  color: #a69eb2;

  font-size: 16px;

  line-height: 1.7;

}

.pp-cta-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-top: 30px;

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

  .pp-hero {

    grid-template-columns: 1fr;

    gap: 56px;

    min-height: auto;

    padding-top: 20px;

  }

  .pp-hero-content {

    max-width: 680px;

  }

  .pp-included {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .pp-steps {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .pp-step::after {

    display: none;

  }

  .pp-control {

    padding: 40px 32px;

  }

  .pp-control-grid,
  .pp-faq {

    grid-template-columns: 1fr;

    gap: 40px;

  }

}

@media (max-width: 900px) {

  .pp-plans:not(.single) {

    grid-template-columns: minmax(0, 1fr);

    max-width: 480px;

  }

}

@media (max-width: 760px) {

  .pp-page {

    padding-top: 44px;

  }

  .pp-section {

    margin-top: 88px;

  }

  .pp-hero-description {

    font-size: 16.5px;

  }

  .pp-hero-actions .button {

    flex: 1 1 100%;

  }

  .pp-float {

    display: none;

  }

  .pp-included {

    gap: 10px;

  }

  .pp-included-card {

    display: grid;

    grid-template-columns: 40px 1fr;

    column-gap: 14px;

    padding: 18px 16px;

  }

  .pp-included-card .pp-icon {

    grid-row: span 2;

    width: 40px;

    height: 40px;

    margin: 0;

  }

  .pp-included-card p {

    margin-top: 4px;

  }

  .pp-step {

    padding: 22px 20px;

  }

  .pp-plans.single .pp-plan {

    grid-template-columns: 1fr;

    padding: 30px 24px 24px;

  }

  .pp-plans.single .pp-plan-features {

    margin: 22px 0 0;

    padding: 22px 0 0;

    border-left: 0;

    border-top: 1px solid rgba(255,255,255,.07);

  }

  .pp-plans.single .pp-plan-main {

    display: contents;

  }

  .pp-plans.single .pp-plan .button {

    order: 10;

  }

  .pp-included,
  .pp-steps {

    grid-template-columns: 1fr;

  }

  .pp-control {

    padding: 30px 18px;

    border-radius: 22px;

  }

  .pp-panel {

    padding: 18px;

  }

  .pp-panel-actions {

    grid-template-columns: 1fr;

  }

  .pp-cta {

    padding: 48px 20px;

    border-radius: 22px;

  }

  .pp-cta-actions .button {

    flex: 1 1 100%;

  }

  .pp-billing-option {

    padding: 0 14px;

  }

}