/* ================================================================
   SERVICES & PRICING — v4 addon stylesheet
   Loaded after custom-v4.css (selectStylesheet == 10 in __head.php)

   UPDATE REGISTER ================================================
   2026-07-29 - Claude - Created for the Services & Pricing rebuild
   -----------------------------------------------------------------

   Covers components not already provided by custom-v4.css:
     - stats strip below the page-title hero
     - sticky bookmark/anchor nav (Bootstrap Scrollspy target)
     - testimonial band
   Pricing cards, the Compare Plans matrix, and FAQ styling are
   added to this same file in later build steps.
================================================================ */

/* Stats strip ---------------------------------------------------- */
.spa-stats {
  /* Sizing kept in step with the shared .hstat-n / .hstat-l (custom-v4.css) —
     change one, check the other. */
  background: var(--dv);
  padding: 14px 0;
}
.spa-stat {
  text-align: center;
  padding: 0 10px;
}
.spa-stat .n {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ye);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.spa-stat .l {
  font-family: var(--ff-h);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Testimonial -------------------------------------------------------- */
.spa-testimonial {
  background: var(--dv);
  padding: 64px 0;
  text-align: center;
}
.spa-testimonial blockquote {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  color: #fff;
  max-width: 720px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.spa-testimonial cite {
  display: block;
  font-style: normal;
  font-family: var(--ff-h);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.spa-testimonial cite strong {
  display: block;
  color: var(--ye);
  margin-bottom: 4px;
}
.spa-testimonial-tag {
  font-family: var(--ff-h);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 16px;
}
.spa-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.spa-testimonial .carousel-item {
  /* Fixed floor + vertical centering stops the section below jumping up/down
     when testimonials of different lengths rotate in. */
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spa-testimonial .carousel-indicators {
  position: static;
  margin-top: 24px;
  margin-bottom: 0;
}
.spa-testimonial .carousel-control-prev,
.spa-testimonial .carousel-control-next {
  width: 5%;
  opacity: 0.5;
}
.spa-testimonial .carousel-control-prev:hover,
.spa-testimonial .carousel-control-next:hover {
  opacity: 0.9;
}

/* Platform pillars — colour override -------------------------------
   .bcard / .bicon are shared with __home_section_industry.php, so the
   colour is overridden here, scoped to #spa-platform, rather than changed
   globally in custom-v4.css. Icon tile uses a tint rather than a solid
   fill; recipe matches .tier-icon-pill's .tier-platinum variant exactly
   (same var(--gr) token, same soft-badge pattern used elsewhere on this
   page), rather than inventing a new treatment. */
#spa-platform .bcard::before {
  background: var(--gr);
}
#spa-platform .bicon {
  background-color: rgba(197, 220, 100, 0.15);
  color: var(--gr);
}

/* Who we serve — business-type grid ---------------------------------
   Compact icon + label, no card/border, so 10 items in one wrapped row
   don't get visually heavy. Green accent matches the Platform pillars
   above it rather than introducing a third colour on the page. */
.spa-tsp-type {
  width: 104px;
  text-align: center;
  flex-shrink: 0;
}
.spa-tsp-type i {
  font-size: 1.8rem;
  color: var(--gr);
  display: block;
  margin-bottom: 8px;
}
.spa-tsp-type span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Pricing toggle ------------------------------------------------------ */
.spa-toggle-bar {
  display: inline-flex;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 40px;
  padding: 4px;
}
.spa-toggle-btn {
  font-family: var(--ff-h);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 9px 22px;
  border-radius: 36px;
  border: none;
  background: transparent;
  color: var(--mu);
  cursor: pointer;
  transition: all 0.2s;
}
.spa-toggle-btn.active {
  background: var(--dv);
  color: var(--ye);
}

/* Pricing cards --------------------------------------------------- */
.spa-price-card {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--rule);
  box-shadow: 0 2px 16px rgba(35, 15, 66, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.spa-price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(35, 15, 66, 0.14);
}
.spa-price-card.featured {
  border-color: var(--ye);
  border-width: 2px;
}
.spa-popular-badge {
  background: var(--ye);
  color: var(--dv);
  font-family: var(--ff-h);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  padding: 5px 0;
}
.spa-price-card-head {
  padding: 24px 24px 12px;
  text-align: center;
}
.tier-icon-pill {
  margin-bottom: 12px;
}
.spa-tier-name {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--dv);
  margin-bottom: 4px;
}
.spa-tier-desc {
  font-size: 0.82rem;
  color: var(--mu);
  line-height: 1.5;
  min-height: 44px;
}
.spa-price-amount {
  padding: 0 24px 16px;
}
.spa-price-amount .currency {
  font-size: 0.95rem;
  font-weight: 600;
  vertical-align: super;
  color: var(--dv);
  margin-right: 0.5rem;
}
.spa-price-amount .amount {
  font-family: var(--ff-h);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--dv);
  letter-spacing: -0.03em;
}
.spa-price-amount .period {
  font-size: 0.78rem;
  color: var(--mu);
  font-weight: 500;
  margin-left: 4px;
}
.spa-hotel-note {
  font-size: 0.74rem;
  color: var(--mu);
  margin-top: 4px;
  font-style: italic;
}
.spa-quarterly-note {
  font-size: 0.74rem;
  color: var(--mv);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
  line-height: 1.5;
}
.spa-price-features {
  padding: 0 24px 24px;
  flex: 1;
}
.spa-price-features ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spa-price-features li {
  font-size: 0.83rem;
  color: var(--bk);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.spa-price-features li:last-child {
  border-bottom: none;
}
.spa-price-features li i {
  /* var(--gr) is too pale to read reliably as an icon colour on white — same
     underlying issue as the tier-icon-pill contrast fix above. Switched to
     var(--mv) for guaranteed contrast and consistency with the rest of the
     page's icon colour language, trading the literal "green means yes" cue
     for legibility. */
  color: var(--mv);
  font-size: 0.88rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.spa-price-features li i.na {
  color: var(--mu);
  opacity: 0.4;
}
.spa-price-cta {
  padding: 0 24px 24px;
}

/* Compare Plans matrix ------------------------------------------------ */
.spa-matrix-wrap {
  overflow-x: auto;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(35, 15, 66, 0.09);
}
.spa-matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #fff;
}
.spa-matrix thead tr {
  background: var(--dv);
}
.spa-matrix thead th {
  padding: 18px 20px;
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.03em;
}
.spa-matrix thead th.feature-col {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spa-matrix thead th .spa-matrix-price {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.spa-matrix tbody tr {
  border-bottom: 1px solid var(--rule);
}
.spa-matrix tbody tr:last-child {
  border-bottom: none;
}
.spa-matrix tbody tr:nth-child(even) {
  background: var(--wh);
}
.spa-matrix tbody td {
  padding: 12px 20px;
  font-size: 0.86rem;
  text-align: center;
}
.spa-matrix tbody td.feature-name {
  text-align: left;
  font-weight: 600;
  color: var(--dv);
}
.spa-matrix-section-header td {
  background: rgba(89, 45, 140, 0.05) !important;
  font-family: var(--ff-h);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mv) !important;
  text-align: left !important;
  padding: 8px 20px !important;
}
.spa-check-yes {
  color: var(--mv);
  font-size: 1.05rem;
}
.spa-check-no {
  color: var(--rule);
  font-size: 1rem;
}
.spa-check-val {
  font-family: var(--ff-h);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mv);
}

/* FAQ accordion --------------------------------------------------------
   Ported from faqs-addon-v4.css (.faq-item / .faq-q / .faq-a family are
   not in custom-v4.css, and this page cannot load a third stylesheet
   per the two-files-per-page-type rule, so the needed subset is
   duplicated here rather than reinvented). Source: faqs-addon-v4.css,
   sections 05-06. .faq-q-num is omitted — this page's FAQ markup has
   no numbered index badge. */
.faq-item {
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-item:hover {
  border-color: rgba(89, 45, 140, 0.22);
}
.faq-item.faq-open {
  border-color: rgba(89, 45, 140, 0.3);
  box-shadow: 0 2px 14px rgba(35, 15, 66, 0.07);
}
.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
  user-select: none;
  transition: background 0.12s;
  outline: none;
}
.faq-q:focus-visible {
  box-shadow: inset 0 0 0 2px var(--mv);
}
.faq-q:hover {
  background: var(--wh2);
}
.faq-item.faq-open .faq-q {
  background: var(--wh);
}
.faq-q-text {
  font-family: var(--ff-h);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dv);
  flex: 1;
  line-height: 1.45;
}
.faq-q-chevron {
  font-size: 0.8rem;
  color: var(--mu);
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
  margin-top: 3px;
}
.faq-item.faq-open .faq-q-chevron {
  transform: rotate(-180deg);
  color: var(--mv);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.faq-open .faq-a {
  max-height: 1000px;
}
.faq-a-inner {
  padding: 4px 16px 16px 16px;
}
.faq-a-inner p,
.faq-a-inner div {
  font-family: var(--ff-b);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--bk);
  line-height: 1.75;
  margin-bottom: 0.65rem;
}
.faq-a-inner p:last-child,
.faq-a-inner div:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .spa-stat .n {
    font-size: 1.2rem;
  }
}