/*-- -------------------------- -->
<---           Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-5127 {
    padding: var(--sectionPadding);
    background-color: var(--cream);
  }
  #pricing-5127 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #pricing-5127 .cs-content {
    width: 100%;
    max-width: 40rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Short accent rule above the eyebrow (centred) -- same pattern as
     Services/Getting Started */
  #pricing-5127 .cs-topper {
    margin: 0 0 1rem;
    padding-top: 1rem;
    color: var(--accentText);
    position: relative;
  }
  #pricing-5127 .cs-topper:before {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: var(--accentText);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  #pricing-5127 .cs-title {
    font-weight: 400;
    margin: 0 0 1rem;
    color: var(--navy);
  }
  #pricing-5127 .cs-text {
    margin: 0;
  }
  #pricing-5127 .cs-price-group {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* Card. The featured plan (.cs-price-featured) reuses this as its base
     and layers on the accent border + badge below -- keeps the two in
     sync instead of duplicating the whole card ruleset. */
  #pricing-5127 .cs-price-item {
    padding: clamp(2rem, 4vw, 2.5rem);
    background-color: #fff;
    border: 1px solid rgba(104, 115, 107, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  #pricing-5127 .cs-price-item:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.75rem 3rem rgba(34, 58, 77, 0.14);
    border-color: var(--accentText);
  }
  /* Featured plan: accent border always on (not just hover), small badge
     pinned to the top edge */
  #pricing-5127 .cs-price-featured {
    border-color: var(--accentText);
    border-width: 2px;
  }
  #pricing-5127 .cs-price-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.375rem 1rem;
    background-color: var(--accentText);
    color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  #pricing-5127 .cs-price-name {
    font-family: var(--headingFont);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.3em;
    margin: 0 0 0.75rem;
    color: var(--navy);
  }
  #pricing-5127 .cs-price-amount {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1rem;
  }
  #pricing-5127 .cs-price-number {
    font-family: var(--headingFont);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1em;
    color: var(--navy);
  }
  #pricing-5127 .cs-price-period {
    font-family: var(--bodyFont);
    font-size: 0.9375rem;
    color: rgba(34, 58, 77, 0.6);
  }
  #pricing-5127 .cs-price-desc {
    font-family: var(--bodyFont);
    font-size: 0.9375rem;
    line-height: 1.4em;
    margin: 0 0 1.5rem;
    color: rgba(34, 58, 77, 0.7);
  }
  #pricing-5127 .cs-price-features {
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
  }
  #pricing-5127 .cs-price-feature {
    font-family: var(--bodyFont);
    font-size: 0.9375rem;
    line-height: 1.4em;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--navy);
  }
  #pricing-5127 .cs-price-feature-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    margin-top: 0.0625rem;
    color: var(--accentText);
  }
  #pricing-5127 .cs-price-item .cs-button-solid,
  #pricing-5127 .cs-price-item .cs-button-outline {
    width: 100%;
    margin-top: auto;
  }
  /* .cs-button-outline has no border at rest (by design, elsewhere it
     relies on a contrasting section background) -- these cards are white
     too, so it'd be invisible without an explicit border here. */
  #pricing-5127 .cs-price-item .cs-button-outline {
    border-color: rgba(34, 58, 77, 0.3);
  }
  #pricing-5127 .cs-price-note {
    font-family: var(--bodyFont);
    font-size: 0.875rem;
    color: rgba(34, 58, 77, 0.6);
    margin: 0;
  }
}

/* Tablet - 768px: 3 across, same width the whole way up */
@media only screen and (min-width: 48rem) {
  #pricing-5127 .cs-price-group {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
  }
}

/* Desktop - 64rem */
@media only screen and (min-width: 64rem) {
  #pricing-5127 .cs-price-group {
    gap: 2rem;
  }
  #pricing-5127 .cs-price-item {
    padding: 3rem 2.5rem;
  }
}