/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./node_modules/@marketforge/ui/src/styles/components/public-plans.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Offer content shared by public pricing and paid signup. Widget owns the surface. */
.public-plan-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* Use the existing choice tint with public palette aliases inside this surface. */
.public-plan-card[aria-current="true"] {
  --mf-color-accent: var(--mf-marketing-accent);
  --mf-color-bg-elevated: var(--mf-marketing-card-background);
}

.public-plan-card > .mf-widget-content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: var(--mf-space-section);
}

.public-plan-card-summary > .mf-widget-content {
  gap: var(--mf-space-group);
}

.public-plan-card-summary ul {
  gap: var(--mf-space-inline);
}

.public-plan-name {
  margin: 0;
  color: var(--mf-marketing-ink);
  overflow-wrap: anywhere;
}

.public-plan-price {
  display: grid;
  gap: var(--mf-space-text);
}

.public-plan-price strong {
  color: var(--mf-marketing-ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.public-plan-price span,
.public-plan-card > .mf-widget-content > p {
  margin: 0;
  color: var(--mf-marketing-muted);
}

.public-plan-card ul {
  display: grid;
  flex: 1 1;
  align-content: start;
  gap: var(--mf-space-group);
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-plan-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--mf-space-inline);
  color: var(--mf-marketing-muted);
}

.public-plan-card li svg {
  flex: 0 0 auto;
  margin-top: var(--mf-space-text);
  color: var(--mf-marketing-accent);
}

.public-plan-annual-details {
  display: grid;
  gap: var(--mf-space-inline);
  color: var(--mf-marketing-muted);
}

.public-plan-annual-details p {
  margin: 0;
}

.public-plan-saving {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mf-space-inline);
}

.public-plan-saving-total {
  color: var(--mf-marketing-ink);
}

@layer components {
  .billing-period-selector {
    --mf-segmented-background: #e8e8ed;
    --mf-segmented-border: #c7c7cc;
    --mf-segmented-hover: #dedee3;
    --mf-segmented-text: #515154;
    --mf-segmented-selected: #ffffff;
    --mf-segmented-selected-text: #1d1d1f;
  }

  .billing-period-selector .mf-segmented-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mf-space-inline);
  }

  .billing-period-selector .mf-segmented-button:is(.is-selected, [aria-pressed="true"]) {
    background: var(--mf-segmented-selected);
    color: var(--mf-segmented-selected-text);
  }

  .billing-period-saving {
    align-items: center;
    background: color-mix(in srgb, var(--mf-color-success) 16%, var(--mf-color-panel));
    border-radius: var(--mf-radius-pill);
    color: var(--mf-color-success);
    display: inline-flex;
    gap: var(--mf-space-text);
    padding: var(--mf-space-text) var(--mf-space-text);
    white-space: nowrap;
  }
}

@media (max-width: 760px), (max-width: 1024px) and (max-height: 500px) {
  .billing-period-selector > div {
    align-items: center;
    border-radius: var(--mf-radius-pill);
    box-sizing: border-box;
    gap: var(--mf-space-text);
    height: var(--mf-control-h-mobile, 36px);
    min-height: var(--mf-control-h-mobile, 36px);
    padding: 1px;
  }

  .billing-period-selector .mf-segmented-button {
    border-radius: var(--mf-radius-pill);
    box-sizing: border-box;
    gap: var(--mf-space-text);
    height: calc(var(--mf-control-h-mobile, 36px) - 4px);
    min-height: calc(var(--mf-control-h-mobile, 36px) - 4px);
    padding-inline: var(--mf-segmented-padding-inline);
    position: relative;
  }

  .billing-period-selector .mf-segmented-button::before {
    content: "";
    inset: -6px 0;
    position: absolute;
  }
}