/**
 * Greenfield canonical: Pricing Tiers
 * v3.21.19
 */

.ssla-section.ssla-g-pricing-tiers {
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-pricing-tiers-fg);
  padding: var(--g-pricing-tiers-section-padding);
}
.ssla-g-pricing-tiers-inner {
  max-width: var(--g-pricing-tiers-content-max-width);
  margin: 0 auto;
  padding: var(--paint-section-padding, 80px) 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ssla-g-pricing-tiers-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.ssla-g-pricing-tiers-eyebrow {
  font: 600 12px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-pricing-tiers-eyebrow);
}
.ssla-g-pricing-tiers-heading {
  font: 700 var(--g-pricing-tiers-heading-size, clamp(26px, 3.5vw, 40px))/1.2 var(--g-pricing-tiers-heading-family, var(--shell-hf, system-ui));
  color: var(--g-pricing-tiers-heading);
  margin: 0;
}
.ssla-g-pricing-tiers-lede {
  font: 400 var(--g-pricing-tiers-body-size, 18px)/1.55 var(--g-pricing-tiers-body-family, var(--shell-bf, system-ui));
  color: var(--g-pricing-tiers-body);
  margin: 0;
}

/* Billing toggle control (hidden unless billing_toggle variant on) */
.ssla-g-pricing-tiers-billing {
  display: none;
  gap: 0;
  margin-top: 4px;
  border: 1px solid var(--g-pricing-tiers-tier-border);
}
.ssla-g-pricing-tiers-billing-opt {
  font: 600 13px/1 var(--shell-bf, system-ui);
  padding: 10px 18px;
  background: transparent;
  color: var(--g-pricing-tiers-body);
  border: 0;
  cursor: pointer;
}
.ssla-g-pricing-tiers-billing-opt.is-active {
  background: var(--g-pricing-tiers-featured-accent, var(--brand-accent));
  color: var(--g-pricing-tiers-bg, #fff);
}

/* Grid + tier card */
.ssla-g-pricing-tiers-grid {
  display: grid;
  gap: var(--g-pricing-tiers-gap, 24px);
  align-items: start;
}
.ssla-g-pricing-tiers-tier {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--g-pricing-tiers-tier-padding, 32px);
  background: var(--g-pricing-tiers-tier-bg, transparent);
  border: 1px solid var(--g-pricing-tiers-tier-border, transparent);
}
.ssla-g-pricing-tiers-tier-name {
  font: 600 13px/1.2 var(--shell-bf, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-pricing-tiers-eyebrow);
}
.ssla-g-pricing-tiers-tier-pricewrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ssla-g-pricing-tiers-tier-price {
  font: 700 var(--g-pricing-tiers-heading-size, clamp(28px, 3vw, 44px))/1 var(--g-pricing-tiers-heading-family, var(--shell-hf, system-ui));
  color: var(--g-pricing-tiers-heading);
}
.ssla-g-pricing-tiers-tier-price.ssla-is-annual { display: none; }
.ssla-g-pricing-tiers-tier-period {
  font: 400 15px/1 var(--g-pricing-tiers-body-family, var(--shell-bf, system-ui));
  color: var(--g-pricing-tiers-body);
}
.ssla-g-pricing-tiers-tier-features {
  font: 400 15px/1.7 var(--g-pricing-tiers-body-family, var(--shell-bf, system-ui));
  color: var(--g-pricing-tiers-body);
  margin: 0;
}
.ssla-g-pricing-tiers-tier-features ul { margin: 0; padding-left: 18px; }
.ssla-g-pricing-tiers-tier-features li { margin: 0 0 6px; }
.ssla-g-pricing-tiers-tier-cta {
  margin-top: auto;
  font: 600 14px/1 var(--shell-bf, system-ui);
  color: var(--g-pricing-tiers-heading);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 2px;
}

/* Count */
.ssla-g-pricing-tiers--count-one .ssla-g-pricing-tiers-grid   { grid-template-columns: minmax(0, 420px); justify-content: center; }
.ssla-g-pricing-tiers--count-two .ssla-g-pricing-tiers-grid   { grid-template-columns: repeat(2, 1fr); }
.ssla-g-pricing-tiers--count-three .ssla-g-pricing-tiers-grid { grid-template-columns: repeat(3, 1fr); }
.ssla-g-pricing-tiers--count-four .ssla-g-pricing-tiers-grid  { grid-template-columns: repeat(4, 1fr); }

/* Featured tier — accent border + lift on the nth tier */
.ssla-g-pricing-tiers--featured-tier-one .ssla-g-pricing-tiers-tier:nth-child(1),
.ssla-g-pricing-tiers--featured-tier-two .ssla-g-pricing-tiers-tier:nth-child(2),
.ssla-g-pricing-tiers--featured-tier-three .ssla-g-pricing-tiers-tier:nth-child(3),
.ssla-g-pricing-tiers--featured-tier-four .ssla-g-pricing-tiers-tier:nth-child(4) {
  border-color: var(--g-pricing-tiers-featured-accent, var(--brand-accent));
  border-width: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}

/* Billing toggle — show control + swap monthly/annual price on .ssla-billing-annual */
.ssla-g-pricing-tiers--billing-toggle-monthly-annual .ssla-g-pricing-tiers-billing { display: inline-flex; }
.ssla-g-pricing-tiers--billing-toggle-monthly-annual.ssla-billing-annual .ssla-g-pricing-tiers-tier-price:not(.ssla-is-annual) { display: none; }
.ssla-g-pricing-tiers--billing-toggle-monthly-annual.ssla-billing-annual .ssla-g-pricing-tiers-tier-price.ssla-is-annual { display: inline; }

/* CTA emphasis — strong renders the CTA as a filled button */
.ssla-g-pricing-tiers--cta-emphasis-strong .ssla-g-pricing-tiers-tier-cta {
  background: var(--g-pricing-tiers-featured-accent, var(--brand-accent));
  color: var(--g-pricing-tiers-bg, #fff);
  border-bottom: 0;
  padding: 12px 24px;
  text-align: center;
  align-self: stretch;
}

/* Skeleton */
.ssla-g-pricing-tiers {
  --g-pricing-tiers-fg:                 var(--brand-fg);
  --g-pricing-tiers-eyebrow:            var(--brand-accent);
  --g-pricing-tiers-heading:            var(--brand-fg);
  --g-pricing-tiers-body:               var(--brand-fg);
  --g-pricing-tiers-tier-bg:            transparent;
  --g-pricing-tiers-tier-border:        rgba(0,0,0,0.14);
  --g-pricing-tiers-featured-accent:    var(--brand-accent);
  --g-pricing-tiers-heading-family:     var(--shell-hf, system-ui);
  --g-pricing-tiers-heading-size:       clamp(26px, 3.5vw, 40px);
  --g-pricing-tiers-body-family:        var(--shell-bf, system-ui);
  --g-pricing-tiers-body-size:          18px;
  --g-pricing-tiers-section-padding:    0;
  --g-pricing-tiers-content-max-width:  1200px;
  --g-pricing-tiers-gap:                24px;
  --g-pricing-tiers-tier-padding:       32px;
}

/* Tone */
.ssla-g-pricing-tiers--tone-light {
  --g-pricing-tiers-fg:           #1a1a1a;
  --g-pricing-tiers-heading:      #1a1a1a;
  --g-pricing-tiers-body:         #4a4a4a;
  --g-pricing-tiers-tier-border:  rgba(0,0,0,0.14);
}
.ssla-g-pricing-tiers--tone-dark {
  --g-pricing-tiers-fg:           #f5f5f5;
  --g-pricing-tiers-heading:      #ffffff;
  --g-pricing-tiers-body:         #d0d0d0;
  --g-pricing-tiers-tier-border:  rgba(255,255,255,0.16);
  --g-pricing-tiers-tier-bg:      rgba(255,255,255,0.04);
}
.ssla-g-pricing-tiers--tone-accent {
  --g-pricing-tiers-fg:           var(--preset-accent-fg, #1a1a1a);
  --g-pricing-tiers-heading:      var(--preset-accent-fg, #1a1a1a);
  --g-pricing-tiers-body:         var(--preset-accent-fg, #1a1a1a);
}

@media (max-width: 768px) {
  .ssla-g-pricing-tiers-inner { padding: 40px 16px; gap: 28px; }
  .ssla-g-pricing-tiers-grid { grid-template-columns: 1fr !important; }
  .ssla-g-pricing-tiers-heading { font-size: clamp(22px, 5vw, 30px); }
}