/* ==========================================================================
   Section 10: Pricing (Elementor id 4923f12)
   Static section: no scroll trigger, no click state, no entrance animation.
   Desktop 1440x685 / tablet 768x1093 / mobile 390x1748.
   Background photo + dark scrim, three glass plan cards, light closing panel.
   ========================================================================== */

.s-pricing {
  margin-top: 50px;
  padding: 0 5px;
  font-family: var(--f-body);
  font-size: var(--t-body-15);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--c-white);
  background-color: var(--c-black);
  background-image: url(../../../assets/img/2026/02/envato-labs-image-edit-6.jpg);
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Dark scrim over the photo: near-black at the top left, thinning to the
   lower right where the technician stays faintly visible. */
.s-pricing .pr-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.9) 42%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.8) 100%);
}

.s-pricing .pr-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  padding: 75px var(--container-pad) 50px;
}

/* ---- Row: intro + three plan cards --------------------------------------- */

.s-pricing .pr-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

/* ---- Intro column -------------------------------------------------------- */

.s-pricing .pr-intro {
  flex: 0 1 520px;
  align-self: center;
  max-width: 520px;
  min-width: 0;
  padding: 10px 10px 100px;
}

.s-pricing .pr-eyebrow {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: var(--t-body-md);
  font-weight: 400;
  line-height: 1.3em;
  color: var(--c-white);
}

.s-pricing .pr-title {
  margin: 0 0 20px;
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 300;
  line-height: 1.1em;
  color: var(--c-white);
}

.s-pricing .pr-title b {
  font-weight: 700;
}

.s-pricing .pr-lead {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-body-md);
  font-weight: 400;
  line-height: 1.5em;
  color: var(--c-white);
}

.s-pricing .pr-lead--strong {
  margin-top: 22px;
  font-size: var(--t-body-md);
}

.s-pricing .pr-lead b {
  font-weight: 700;
}

/* ---- Plan cards ---------------------------------------------------------- */

.s-pricing .pr-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid var(--c-white-12);
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: rgba(0, 0, 0, 0.78) 0 19px 26px 1px;
  overflow: hidden;
}

.s-pricing .pr-card--grow {
  flex: 0 0 247px;
  width: 247px;
  margin-top: 40px;
}

.s-pricing .pr-card--accelerate {
  flex: 0 0 260px;
  width: 260px;
  margin-bottom: 20px;
  border-color: rgba(255, 255, 255, 0.87);
}

.s-pricing .pr-card--dominate {
  flex: 0 0 247px;
  width: 247px;
  margin-top: 10px;
}

/* Plan name pill */
.s-pricing .pr-card-pill {
  padding: 10px;
  border-radius: 12px;
  background-color: var(--c-white);
}

.s-pricing .pr-plan {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-body-md);
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: var(--c-black);
}

/* Price + qualifier */
.s-pricing .pr-card-head {
  padding: 10px 0 0;
  text-align: center;
}

.s-pricing .pr-price {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2em;
  color: var(--c-white);
}

.s-pricing .pr-price-note {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-body-14);
  font-weight: 400;
  line-height: 1.5em;
  color: var(--c-grey-cc);
}

/* Feature list */
.s-pricing .pr-features {
  margin: 10px 0 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s-pricing .pr-feature {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.s-pricing .pr-feature-icon {
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21px;
}

.s-pricing .pr-feature-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--c-green-light);
}

.s-pricing .pr-feature-text {
  font-family: var(--f-display);
  font-size: var(--t-body-md);
  font-weight: 700;
  line-height: 1.4em;
  color: var(--c-white);
}

/* ---- Closing panel ------------------------------------------------------- */

.s-pricing .pr-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin: 50px 0 -120px;
  padding: 10px;
  border-radius: 12px;
  background-image: linear-gradient(315deg, rgb(255, 255, 255) 25%, rgb(235, 235, 235) 100%);
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 30px 17px;
}

.s-pricing .pr-cta-logo {
  flex: 0 0 104px;
}

.s-pricing .pr-cta-logo img {
  width: 104px;
  height: 104px;
  border-radius: 12px;
  object-fit: cover;
}

.s-pricing .pr-cta-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
}

.s-pricing .pr-cta-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-body-md);
  font-weight: 400;
  line-height: 1.4em;
  color: var(--c-text);
}

.s-pricing .pr-cta-title b {
  font-weight: 700;
}

.s-pricing .pr-cta-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin: 12px -15px 0 0;
  padding: 4px 20px 4px 30px;
  border-radius: 25px 0 0 25px;
  background-image: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(54, 54, 54) 100%);
}

.s-pricing .pr-cta-kicker {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-body-14);
  font-weight: 400;
  line-height: 22px;
  color: var(--c-white);
}

.s-pricing .pr-cta-kicker b {
  font-weight: 700;
}

/* Button. Premium Addons rule: background goes green on hover, all .3s */
.s-pricing .pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--dur);
}

.s-pricing .pr-btn-text {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-white);
}

.s-pricing .pr-btn:hover,
.s-pricing .pr-btn:focus-visible {
  background-color: var(--c-green);
  border-color: var(--c-green);
}

/* ---- Tablet 768 to 1024 ----------------------------------------------------- */

@media (max-width: 1024px) {
  .s-pricing .pr-inner {
    padding: 60px var(--container-pad) 50px;
  }

  /* The target keeps the desktop arrangement here: the intro column and the
     three staggered cards stay on one row and every column shrinks in
     proportion to its basis. Wrapping the intro to full width collapsed the
     card heights and made the section far too short. */
  .s-pricing .pr-grid {
    flex-wrap: nowrap;
  }

  .s-pricing .pr-intro {
    flex: 0 1 520px;
    max-width: 520px;
    padding: 10px 10px 60px;
  }

  .s-pricing .pr-title {
    font-size: var(--t-h2);
  }

  .s-pricing .pr-card--grow,
  .s-pricing .pr-card--dominate {
    flex: 0 1 247px;
    width: auto;
    min-width: 0;
  }

  .s-pricing .pr-card--accelerate {
    flex: 0 1 260px;
    width: auto;
    min-width: 0;
  }

  .s-pricing .pr-card--grow { margin-top: 40px; }
  .s-pricing .pr-card--dominate { margin-top: 10px; }

  /* The narrow columns force the feature copy to wrap hard, exactly as the
     target does; min-width:0 lets each label shrink inside its row. */
  .s-pricing .pr-feature-text {
    min-width: 0;
  }

  .s-pricing .pr-cta {
    margin-bottom: -90px;
  }

  .s-pricing .pr-cta-bar {
    padding-left: 20px;
  }
}

/* ---- Mobile <=767 -------------------------------------------------------- */

@media (max-width: 767px) {
  .s-pricing {
    margin-top: 30px;
    padding: 0;
  }

  .s-pricing .pr-inner {
    padding: 45px var(--container-pad) 40px;
  }

  .s-pricing .pr-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 25px;
  }

  .s-pricing .pr-intro {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0 0 5px;
    text-align: center;
  }

  .s-pricing .pr-title {
    font-size: 26px;
    line-height: 1.25em;
  }

  .s-pricing .pr-lead,
  .s-pricing .pr-lead--strong {
    font-size: var(--t-body-14);
  }

  .s-pricing .pr-card--grow,
  .s-pricing .pr-card--accelerate,
  .s-pricing .pr-card--dominate {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 16px 14px 20px;
  }

  .s-pricing .pr-card-pill {
    width: max-content;
    min-width: 120px;
    margin-inline: auto;
    padding: 6px 18px;
    border-radius: 14px;
  }

  .s-pricing .pr-price {
    font-size: 32px;
  }

  .s-pricing .pr-features {
    padding-left: 6px;
    gap: 10px;
  }

  .s-pricing .pr-feature-text {
    font-size: var(--t-body-14);
    line-height: 1.5em;
  }

  .s-pricing .pr-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 40px 0 -60px;
    padding: 18px;
    text-align: center;
  }

  .s-pricing .pr-cta-logo {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
  }

  .s-pricing .pr-cta-body {
    padding: 0;
  }

  .s-pricing .pr-cta-bar {
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 0;
    padding: 16px 18px;
    border-radius: 16px;
  }
}