/* RAPID MARKETING HUB — PRICING PAGE
   Reuses existing tokens (--fs-*, --space-section, --radius-*, --shadow-*,
   brand colors) and the same hero/eyebrow/breadcrumb pattern already used
   on contact.html/team.html, so this page reads as part of the same
   system rather than a bolted-on design. */

.pricing-container{
  max-width:1200px;
  margin:auto;
}

/* .section-tag's default color is set !important elsewhere in style.css
   for its light-background use everywhere else on the site -- this
   final CTA sits on the same dark gradient as the homepage's Process
   section, so it needs the same higher-specificity !important override
   used there to actually win the color back to white. */
.cta-section .pricing-cta-tag{
  color:#fff !important;
}

.pricing-cta-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:8px;
}

/* ---------- HERO (same construction as .contact-hero) ---------- */
.pricing-hero{
  position:relative;
  min-height:380px;
  padding:110px 7% 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 26%,rgba(109,40,255,.18),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(255,0,212,.13),transparent 30%),
    linear-gradient(135deg,#F2E8FF,#FAF6FF);
}

.pricing-hero-shape{
  position:absolute;
  inset:0;
  opacity:.45;
  background:
    radial-gradient(ellipse at 20% 78%,transparent 0 30%,rgba(109,40,255,.18) 31%,transparent 32%),
    radial-gradient(ellipse at 75% 62%,transparent 0 37%,rgba(109,40,255,.20) 38%,transparent 39%);
}

.pricing-hero-content{
  position:relative;
  z-index:2;
  max-width:820px;
}

.pricing-tag{
  display:inline-block;
  color:#FF00D4;
  font-size:var(--fs-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.pricing-hero h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);
  color:#6D28FF;
  font-weight:var(--fw-display);
  margin:18px 0;
}

.pricing-hero p{
  color:#1F2937;
  font-size:var(--fs-body);
  line-height:1.8;
  max-width:var(--measure-hero);
  margin:0 auto 26px;
}

.pricing-breadcrumb{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-weight:600;
  margin-top:22px;
  font-size:var(--fs-small);
}

.pricing-breadcrumb a{color:#6D28FF;}
.pricing-breadcrumb span,
.pricing-breadcrumb p{color:#64748B;margin:0;}

/* ---------- CATEGORY NAVIGATION ---------- */
.pricing-category-nav{
  position:relative;
  z-index:3;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.pricing-category-list{
  display:flex;
  gap:10px;
  padding:16px 7%;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.pricing-category-list::-webkit-scrollbar{display:none;}

.pricing-pill{
  flex-shrink:0;
  display:inline-block;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  scroll-snap-align:start;
  transition:.2s ease;
}

.pricing-pill:hover{
  border-color:#6D28FF;
  color:#6D28FF;
  background:rgba(109,40,255,.06);
}

/* ---------- SECTION RHYTHM ---------- */
.pricing-section{
  padding:var(--space-section) 7%;
  background:var(--white);
  scroll-margin-top:90px;
}

.pricing-section.alt{
  background:var(--light);
}

.pricing-section-header{
  text-align:center;
  max-width:var(--measure-intro);
  margin:0 auto 48px;
}

.pricing-section-header h2{
  font-size:var(--fs-h2);
  letter-spacing:var(--ls-h2);
  line-height:1.14;
  color:var(--text);
  margin:14px 0 12px;
  font-weight:var(--fw-heading);
}

.pricing-section-header p{
  color:var(--text-light);
  font-size:var(--fs-body);
  line-height:1.7;
}

.pricing-note{
  text-align:center;
  max-width:var(--measure-intro);
  margin:28px auto 0;
  color:var(--text-light);
  font-size:var(--fs-small);
  font-style:italic;
  line-height:1.6;
}

.pricing-note strong{
  color:var(--text);
  font-style:normal;
}

/* ---------- CARDS ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  align-items:stretch;
}

.pricing-grid--2{
  grid-template-columns:repeat(2,1fr);
}

.pricing-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:34px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(109,40,255,.25);
}

.pricing-card--featured{
  border-color:#6D28FF;
  box-shadow:0 25px 60px rgba(109,40,255,.16);
}

.pricing-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#6D28FF,#FF00D4);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(109,40,255,.28);
}

.pricing-plan-name{
  font-size:var(--fs-h3);
  font-weight:700;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:10px;
}

.pricing-price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:4px;
}

.pricing-price{
  font-size:30px;
  font-weight:800;
  color:#6D28FF;
  line-height:1.1;
}

.pricing-price-suffix{
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--text-light);
}

.pricing-billing{
  display:block;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--text-light);
  margin-bottom:14px;
}

.pricing-desc{
  color:var(--text-light);
  font-size:14px;
  line-height:1.7;
  margin-bottom:18px;
}

.pricing-features{
  list-style:none;
  display:grid;
  gap:11px;
  margin-bottom:26px;
  flex:1;
}

.pricing-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  text-align:left;
}

.pricing-features li i{
  flex-shrink:0;
  margin-top:3px;
  color:#6D28FF;
  font-size:13px;
}

.pricing-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  border:2px solid #6D28FF;
  background:transparent;
  color:#6D28FF;
  padding:12px 20px;
  border-radius:var(--radius-pill);
  font-size:13px;
  font-weight:var(--fw-button);
  text-transform:uppercase;
  letter-spacing:.4px;
  text-align:center;
  transition:.25s ease;
}

.pricing-card-btn:hover{
  background:#6D28FF;
  color:#fff;
  transform:translateY(-2px);
}

.pricing-card--featured .pricing-card-btn{
  border:none;
  background:linear-gradient(135deg,#6D28FF,#FF00D4);
  color:#fff;
  box-shadow:0 18px 35px rgba(255,45,141,.2);
}

.pricing-card--featured .pricing-card-btn:hover{
  background:linear-gradient(135deg,#6D28FF,#FF00D4);
  opacity:.92;
}

/* Quote-only cards (no price, no feature list needed) keep the same
   card shell but center their content vertically for a cleaner look. */
.pricing-card--quote{
  align-items:center;
  text-align:center;
  justify-content:center;
}

.pricing-card--quote .pricing-plan-name{
  margin-bottom:8px;
}

.pricing-card--quote .pricing-desc{
  margin-bottom:22px;
}

/* ---------- DISCLAIMER ---------- */
.pricing-disclaimer{
  padding:36px 7%;
  background:var(--light);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.pricing-disclaimer p{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  color:var(--text-light);
  font-size:13px;
  line-height:1.7;
}

/* ---------- RESPONSIVE ---------- */

/* Centers an incomplete final row (a lone 4th card, or a 4th+5th pair)
   without stretching card width, adding margins/transforms, or touching
   HTML. The grid is doubled to 6 tracks with each card spanning 2 (so 3
   cards still fill exactly one row at the same width as before), then
   only the leftover trailing card(s) are shifted to the tracks that
   center them. Scoped to >=993px so it never applies at the tablet
   2-column or mobile 1-column breakpoints below, which use their own
   grid-template-columns overrides and default (unspanned) card flow. */
@media(min-width:993px){
  .pricing-grid{
    grid-template-columns:repeat(6,1fr);
  }

  .pricing-grid > .pricing-card{
    grid-column:span 2;
  }

  /* Exactly 4 cards in the grid: the 4th card is also the last child --
     center it under row 1 (columns 3-4 of 6). */
  .pricing-grid > .pricing-card:nth-child(4):last-child{
    grid-column:3 / span 2;
  }

  /* Exactly 5 cards: the 4th (with exactly 2 children left after it)
     and 5th (last) form the final row -- center them as a pair
     (columns 2-5 of 6, one empty track free on each side). */
  .pricing-grid > .pricing-card:nth-child(4):nth-last-child(2){
    grid-column:2 / span 2;
  }

  .pricing-grid > .pricing-card:nth-child(5):last-child{
    grid-column:4 / span 2;
  }
}

@media(max-width:992px){
  .pricing-grid,
  .pricing-grid--2{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .pricing-hero{
    padding:60px 22px 56px;
    min-height:auto;
  }

  .pricing-hero p{
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
  }

  .pricing-section{
    padding:56px 22px;
  }

  .pricing-category-list{
    padding:14px 22px;
  }

  .pricing-grid,
  .pricing-grid--2{
    grid-template-columns:1fr;
    gap:22px;
  }

  .pricing-card{
    padding:30px 24px;
  }
}