/* Shared base for every SocialPost Updated Pricing module. */
.up-plans { font-family: 'Inter', -apple-system, system-ui, sans-serif; color: var(--up-body, #646669); }
.up-plans *, .up-plans *::before, .up-plans *::after { box-sizing: border-box; }
/* :where() keeps this at zero specificity for the inner selectors, so a
   component rule further down always wins instead of fighting this one. */
.up-plans :where(h1, h2, h3, h4, h5, h6, .up-plan-name) {
  font-family: 'Outfit', -apple-system, system-ui, sans-serif;
  font-weight: 700; color: var(--up-ink, #030303); margin: 0; }
.up-plans p { margin: 0; }
.up-plans .up-accent, .up-plans :where(h1, h2, h3) span { color: var(--up-accent, #3D3DF5); }
.up-plans .up-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.up-plans .up-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 13px 30px; border-radius: 10px;
  background: var(--up-button, #6366F1); color: #fff; font-size: 15px; font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer; text-align: center; }
.up-plans .up-btn:hover { filter: brightness(0.94); color: #fff; }
.up-plans .up-btn--ghost { background: #fff; color: var(--up-ink, #030303); border: 1px solid #C3C9F5; }
.up-plans .up-notice {
  background: #FFF6E5; border: 1px solid #E8C98C; border-radius: 10px;
  padding: 12px 16px; font-size: 13px; line-height: 1.5; color: #7A5410; }
.up-plans.up-bg-gradient { background: linear-gradient(to right, var(--up-grad-a, #F1EEFA), var(--up-grad-b, #FEFEFF)); }
.up-plans.up-bg-light { background: #F7F8FC; }
.up-plans.up-bg-navy { background: var(--up-navy, #2A2E52); }
.up-plans.up-bg-navy h1, .up-plans.up-bg-navy h2, .up-plans.up-bg-navy h3 { color: #fff; }
@media (max-width: 767px) { .up-plans .up-wrap { padding-left: 18px; padding-right: 18px; } }

.up-plans .up-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.up-plans__toggle { display: inline-flex; background: #E8ECF5; border-radius: 50px; padding: 5px; gap: 4px; }
.up-plans__tgl { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; padding: 9px 26px;
  border-radius: 50px; border: 0; background: transparent; color: var(--up-body, #646669); cursor: pointer;
  min-height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.up-plans__tgl.is-active { background: var(--up-accent-deep, #2F56D5); color: #fff; font-weight: 600; }
.up-plans__save { background: #D8DCE6; color: #5A5F70; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 50px; }
.up-plans__tgl.is-active .up-plans__save { background: var(--up-save); color: #fff; }
.up-plans__grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; align-items: stretch; }
.up-plans__grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.up-plans__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-plans__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.up-plans__card { position: relative; border-radius: 20px; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: #fff; }
/* Subgrid makes the head / feature list / footer rows line up ACROSS the three
   cards, so the prices, the dividers and the buttons all sit on the same line.
   Without subgrid support the cards are still equal height, just not row-locked. */
@supports (grid-template-rows: subgrid) {
  .up-plans__grid { grid-template-rows: auto auto auto; }
  .up-plans__card { grid-row: span 3; grid-template-rows: subgrid; }
}
.up-plans__card--light { background: #FFFFFF; border: 1px solid #E8EBF3; }
.up-plans__card--light .up-plans__head { background: var(--up-light, #F7F8FB); }
.up-plans__card--tint .up-plans__head { background: var(--up-tint); }
.up-plans__card--solid .up-plans__head { background: var(--up-solid); }
.up-plans__card--solid .up-plan-name,
.up-plans__card--solid .up-plans__amount { color: #fff; }
.up-plans__card--solid .up-plans__icon { color: #fff; }
.up-plans__card--solid .up-plans__suffix,
.up-plans__card--solid .up-plans__note,
.up-plans__card--solid .up-plans__eyebrow { color: #C6D3F8; }
.up-plans__card--solid .up-plans__tagline { color: #E6ECFD; }
.up-plans__ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--up-ribbon-bg, #F0BC55); color: var(--up-ribbon-text, #2A1A00);
  font-family: 'Outfit', sans-serif; font-size: 12.5px;
  font-weight: 700; letter-spacing: 0.6px; padding: 7px 22px; border-radius: 0 0 12px 12px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(15, 23, 60, 0.18); }
.up-plans__head { padding: 36px 34px 30px; display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center; }
.up-plans__card.has-ribbon .up-plans__head { padding-top: 50px; }
/* Equal-height cards: the head block is one row, the body fills the rest and
   pins its button to the bottom, so every card ends on the same line. */
.up-plans__tagline { min-height: 48px; display: flex; align-items: center; }
.up-plans__name-row { display: flex; align-items: center; gap: 9px; }
.up-plans__icon { width: 20px; height: 20px; color: var(--up-accent-deep, #2F56D5); flex-shrink: 0; }
.up-plan-name { font-size: 25px; }
.up-plans__price { display: flex; align-items: baseline; gap: 4px; }
.up-plans__amount { font-family: 'Inter', sans-serif; font-size: 55px; font-weight: 600; color: #000; line-height: 1; }
.up-plans__suffix { font-size: 19px; color: var(--up-body, #646669); }
.up-plans__note { font-size: 12px; color: #6B7280; }
.up-plans__eyebrow { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.96px; text-transform: uppercase; color: var(--up-accent-deep, #2F56D5); margin-top: 4px; }
.up-plans__tagline { font-size: 15px; line-height: 1.6; }
.up-plans__body { background: #fff; padding: 26px 34px 6px; display: flex; flex-direction: column; }
.up-plans__foot { background: #fff; padding: 18px 34px 30px; display: flex; flex-direction: column; gap: 12px;
  justify-content: flex-start; }
.up-plans__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.up-plans__list li { display: flex; gap: 11px; font-size: 15px; line-height: 1.45; }
.up-plans .up-ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; fill: var(--up-accent, #3D3DF5); }
.up-plans__micro { font-size: 11px; color: #9A9CA0; text-align: center; }

.up-plans__guidance { font-family: 'Outfit', -apple-system, system-ui, sans-serif; font-size: 18px;
  font-weight: 600; line-height: 1.5; color: #1B1D2A; text-align: center; max-width: 720px;
  margin-bottom: 4px; }
.up-plans__quote { margin: 0; padding: 14px 0 0; border-top: 1px solid #EDF0F7; }
.up-plans__quote blockquote { margin: 0; font-size: 13.5px; line-height: 1.55; font-style: italic;
  color: #1B1D2A; }
.up-plans__quote figcaption { margin-top: 6px; font-size: 12px; color: #8A8C99; }
.up-plans__media { width: 100%; max-width: 860px; margin-top: 30px; display: flex;
  flex-direction: column; align-items: center; gap: 12px; }
.up-plans__media-head { font-family: 'Outfit', -apple-system, system-ui, sans-serif; font-size: 21px;
  font-weight: 700; color: var(--up-ink, #030303); }
.up-plans__media-frame { width: 100%; border-radius: 16px; overflow: hidden;
  border: 1px solid #E1E5F0; background: #FFFFFF; line-height: 0; }
.up-plans__media-frame iframe, .up-plans__media-frame video, .up-plans__media-frame img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.up-plans__media-cap { font-size: 13px; color: #8A8C99; text-align: center; }
.up-plans__guarantee { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  background: #EAF1FB; border: 1px solid #C9D8F0; border-radius: 50px; padding: 12px 24px;
  font-family: 'Outfit', -apple-system, system-ui, sans-serif; font-size: 17px; font-weight: 700;
  color: var(--up-accent-deep, #2F56D5); text-align: center; }
.up-plans__guarantee svg { width: 21px; height: 21px; flex-shrink: 0; }
.up-plans__footnote { margin-top: 14px; font-size: 13px; line-height: 1.5;
  color: #8A8C99; text-align: center; max-width: 760px; }
.up-plans__trust { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px 12px; }
.up-plans__trust li { display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid #E1E5F0; border-radius: 50px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: #1B1D2A; }
.up-plans__trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--up-accent, #3D3DF5); flex-shrink: 0; }
@media (max-width: 1199px) {
  .up-plans__head, .up-plans__body, .up-plans__foot { padding-left: 24px; padding-right: 24px; }
  .up-plans__list li { font-size: 14px; }
}
@media (max-width: 991px) {
  /* Stacked on phones and small tablets: equal height stops mattering, so the
     head min-heights are released and each card sizes to its own content. */
  .up-plans__grid, .up-plans__grid--1, .up-plans__grid--2, .up-plans__grid--4 {
    grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
  .up-plans__card { height: auto; }
  .up-plans__tagline { min-height: 0; display: block; }
  .up-plans__amount { font-size: 46px; }
  .up-plans__head, .up-plans__body, .up-plans__foot { padding-left: 22px; padding-right: 22px; }
  .up-plans__toggle { width: 100%; max-width: 460px; }
  .up-plans__guarantee { font-size: 15px; padding: 11px 18px; gap: 8px; margin-top: 24px; }
  .up-plans__guarantee svg { width: 18px; height: 18px; }
  .up-plans__trust { gap: 8px; }
  .up-plans__trust li { font-size: 12.5px; padding: 8px 14px; }
  .up-plans__guidance { font-size: 16px; }
  .up-plans__media-head { font-size: 18px; }
  .up-plans__tgl { flex: 1 1 0; justify-content: center; padding: 9px 12px; }
}