/* ============================================================
 * Reset (Shadow DOM isolation -- see PricingHero.css)
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================
 * Reconstructed global classes (same tokens as PricingHero.css)
 * ============================================================ */
.xlarge-style-text {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: var(--_typography---font-size--text-xlarge, 1.25rem);
  line-height: var(--_typography---line-height--xl, 1.875rem);
  font-weight: var(--_typography---font--primary-medium, 500);
}

.small-style-text {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
}

.color-text-secondary {
  color: var(--_theme---text-secondary, #69586c);
}

.text-block {
  display: block;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.656rem 1.125rem;
  border-radius: var(--_default---radius--small, 0.5rem);
  border: 0.094rem solid var(--_theme---button-primary--border, #8f4bd2);
  background-color: var(--_theme---button-primary--background, #8f4bd2);
  color: var(--_theme---button-primary--text, #fff);
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.button:hover {
  background-color: var(--_theme---button-primary--background-hover, #803bbf);
}

.button.variant-secondary {
  border-color: var(--_theme---button-secondary--border, #dad4da);
  background-color: var(--_theme---button-secondary--background, #fff);
  color: var(--_theme---button-secondary--text, #58475a);
}
.button.variant-secondary:hover {
  border-color: var(--_theme---button-secondary--border-hover, #dad4da);
  background-color: var(--_theme---button-secondary--background-hover, #fafafa);
  color: var(--_theme---button-secondary--text-hover, #3d2f40);
}

@media screen and (max-width: 767px) {
  .compare_plan_cta_button,
  .compare_plan_cta_button .button {
    width: 100%;
  }
}

.container {
  position: relative;
}

/* ===== Comparison table grid layout (original, verbatim structure) ===== */
.compare_header_grid,
.compare_desc_grid,
.compare_section_group {
  display: grid;
  grid-template-columns: 17.5rem repeat(var(--compare-cols, 5), 1fr);
  column-gap: 24px;
}

.compare_category_title {
  grid-column: 1 / -1;
  padding-top: clamp(1.25rem, ((1 - ((1.25) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.25) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 2.5rem);
  padding-right: clamp(1rem, ((1 - ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1.5rem);
  padding-bottom: clamp(0.75rem, ((0.75 - ((1 - 0.75) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1 - 0.75) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1rem);
  padding-left: clamp(1rem, ((1 - ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1.5rem);
  position: sticky;
  top: var(--category-sticky-top, 140px);
  z-index: 2;
  background: #fff;
  color: var(--_default---swatch--brand-500-main, #a66ee2);
  border-bottom: 1px solid var(--_default---swatch--neutral-200, #e9e6e9);
}

.compare_section_group {
  margin-top: 0;
}

.compare_row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 17.5rem repeat(var(--compare-cols, 5), 1fr);
  column-gap: 24px;
}

.compare_row_striped {
  background-color: var(--_theme---background-2, #fafafa);
}

.compare_head_cell,
.compare_desc_cell,
.compare_value_cell,
.compare_label_cell {
  min-width: 0;
}

.compare_head_cell,
.compare_desc_cell,
.compare_value_cell {
  padding: 16px 12px;
}

.compare_desc_cell {
  padding-left: clamp(1rem, ((1 - ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1.5rem);
  padding-right: clamp(1rem, ((1 - ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1.5rem);
}

.compare_head_cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.compare_value_cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.compare_label_cell {
  padding-top: clamp(0.75rem, ((0.75 - ((1 - 0.75) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1 - 0.75) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1rem);
  padding-bottom: clamp(0.75rem, ((0.75 - ((1 - 0.75) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1 - 0.75) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1rem);
  padding-left: clamp(1rem, ((1 - ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1.5rem);
  padding-right: clamp(1rem, ((1 - ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((1.5 - 1) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1.5rem);
}

.compare_plan_desc_clone {
  display: none;
  color: var(--_theme---text-secondary, #69586c);
}

.compare_plan_title_text {
  margin: 0;
}

.compare_plan_desc_text,
.compare_row_desc_text {
  color: var(--_theme---text-secondary, #69586c);
  margin: 4px 0 0;
}

.compare_plan_desc_text {
  line-height: 1.5em;
}

.compare_row_name_text {
  font-weight: var(--_typography---font--primary-medium, 500);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
}

.compare_value_icon {
  width: 24px;
  height: 24px;
}
.compare_value_icon.is_true {
  color: var(--_default---swatch--green-600, #16a34a);
}
.compare_value_icon.is_false {
  color: var(--_default---swatch--neutral-300, #dad4da);
}

/* ===== Sticky header (desktop only) ===== */
.compare_header_grid {
  position: sticky;
  top: calc(var(--header-offset, 76px) + 24px);
  z-index: 3;
  background: #fff;
}

/* Stuck, the header sits 24px below the nav. This strip fills that gap with
   white, so the header still reads as attached to the nav and no rows show
   through above it. Before it sticks, it only covers the blank section spacer
   above the table. */
.compare_header_grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 24px;
  background: #fff;
}

/* ===== Highlighted column outline ===== */
[data-highlighted="true"].compare_head_cell,
[data-highlighted="true"].compare_desc_cell,
[data-highlighted="true"].compare_value_cell {
  border-left: 2px solid var(--_default---swatch--brand-600, #8f4bd2);
  border-right: 2px solid var(--_default---swatch--brand-600, #8f4bd2);
  transition: border-color 0.25s ease;
}

.compare_head_cell.is-pro-first {
  border-top: 2px solid var(--_default---swatch--brand-600, #8f4bd2);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.compare_value_cell.is-pro-last {
  border-bottom: 2px solid var(--_default---swatch--brand-600, #8f4bd2);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.compare_category_title::before,
.compare_category_title::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--_default---swatch--brand-600, #8f4bd2);
  transition: opacity 0.25s ease;
}
.compare_category_title::before {
  left: var(--pro-left, -9999px);
}
.compare_category_title::after {
  left: calc(var(--pro-left, -9999px) + var(--pro-width, 0px) - 2px);
}

.compare-pro-fade [data-highlighted="true"].compare_head_cell,
.compare-pro-fade [data-highlighted="true"].compare_desc_cell,
.compare-pro-fade [data-highlighted="true"].compare_value_cell {
  border-color: transparent;
}
.compare-pro-fade .compare_category_title::before,
.compare-pro-fade .compare_category_title::after {
  opacity: 0;
}

/* ===== Tier dropdown (hidden on desktop, shown from tablet down) ===== */
.compare_tier_select_wrap {
  display: none;
  margin-bottom: 32px;
}


#compareTierSelect {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 0.094rem solid var(--_theme---button-secondary--border, #dad4da);
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fff;
  appearance: none;
}

/* ===== Tablet and below: dropdown mode ===== */
@media screen and (max-width: 991px) {
  .compare_header_grid {
    position: static;
    display: block;
  }
  .compare_header_grid::before {
    content: none;
  }
  .compare_desc_grid {
    display: none;
  }
  .compare_plan_desc_clone {
    display: block;
  }
  .compare_section_group {
    display: block;
  }

  .compare_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .compare_head_cell:not([data-plan]) {
    display: none;
  }

  .compare_category_title {
    position: static;
    padding-bottom: clamp(0.75rem, ((1 - ((0.25) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((0.25) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1rem);
    padding-left: clamp(0.5rem, ((1 - ((0.5) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((0.5) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1rem);
    padding-right: clamp(0.5rem, ((1 - ((0.5) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320)) * var(--_default---site--viewport-min, 320))) * 1rem + ((0.5) / (var(--_default---site--viewport-max, 1280) - var(--_default---site--viewport-min, 320))) * 100vw), 1rem);
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .compare_row_desc_text {
    display: none;
  }

  .compare_row_name_text,
  .compare_value_cell_text {
    font-size: var(--_typography---font-size--text-small, 0.875rem);
    line-height: var(--_typography---line-height--small, 1.25rem);
  }

  .compare_head_cell {
    align-items: flex-start;
    text-align: left;
    padding: 0 0 32px;
  }

  .compare_value_cell {
    justify-content: flex-end;
  }

  .compare_label_cell,
  .compare_row .compare_value_cell {
    padding-left: 0;
    padding-right: 0;
  }

  .compare_value_cell_text {
    text-align: right;
  }

  [data-highlighted="true"].compare_head_cell,
  [data-highlighted="true"].compare_desc_cell,
  [data-highlighted="true"].compare_value_cell {
    border: none !important;
  }

  .compare_category_title::before,
  .compare_category_title::after {
    display: none;
  }

  /* Sticks under the fixed nav while the visitor scrolls the table, and
     scrolls away with the table's end. --header-offset is the nav's height
     with the promo banner (Navigation publishes it and updates it when the
     banner closes), so the dropdown follows the nav. The white padding keeps
     it off the nav and gives rows a band to scroll under; the negative
     margins stretch that band to the rows' edges, which bleed 1rem past the
     container. 16px padding + 16px margin keep the old 32px gap to the plan
     header below. (The top padding used to be the nav's full height, for an
     in-page "Learn more" link; the nav's useWebflowScrollOffset covers that.) */
  .compare_tier_select_wrap {
    display: block;
    position: sticky;
    top: var(--header-offset, 76px);
    z-index: 4;
    margin: 0 -1rem 16px;
    padding: 16px 1rem;
    background: #fff;
  }

  /* Rows fade into the band instead of stopping at a hard edge. Over the
     white page it is invisible until rows scroll under it. */
  .compare_tier_select_wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(#fff, rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  .compare_cell_hidden {
    display: none !important;
  }
}

/* ============================================================
 * Row name badge (e.g. "Beta") -- extracted from a trailing
 * "(beta)" in the title text itself, not a separate Contentful
 * field. Values from the real min.css: spacing-4 (4px) gap,
 * spacing-6 (6px) horizontal padding, text-xsmall (0.75rem /
 * 1.125rem).
 * ============================================================ */
.xsmall-style-text {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.compare_row_name_row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.compare_row_badge {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--_default---swatch--brand-200, #e9dcfb);
  border-radius: var(--_default---radius--small, 0.5rem);
  background-color: var(--_default---swatch--brand-50, #faf7fe);
  color: var(--_default---swatch--brand-700, #803bbf);
  font-size: 0.75rem;
  line-height: 1.125rem;
  white-space: nowrap;
}

.compare_desc_cell {
  text-align: center;
}

/* ============================================================
 * Accessibility (keyboard focus + screen readers)
 * Nothing here changes how the table looks with a mouse.
 * ============================================================ */

/* Visually hidden text ("Included", "Not included", "Feature"), still read
   by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Purple double focus ring -- same as the rest of the site, keyboard only */
.button:focus-visible,
#compareTierSelect:focus-visible {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px var(--_theme---background),
    0 0 0 4px var(--_default---swatch--brand-500-main);
}

/* ============================================================
 * Loading: while the visitor's lineup is looked up, the /pricing head
 * code (webflow-embeds/pricing-loading) hides this table's section,
 * but that alone doesn't hide the table: the :host reveal below sets
 * visibility: visible !important on this island, which overrides the
 * hidden it would inherit from the section. So the table hides itself
 * through the custom property the head code sets on <html>, which
 * inherits into this shadow root, the same contract as the Pricing
 * Hero. Without the head code it is unset and nothing is hidden.
 * See pricing-shared/pricingVariant.ts.
 * ============================================================ */
.container {
  visibility: var(--pricing-pending-visibility, visible);
}

/* ============================================================
 * Reveal (keep this last). The site head hides every code-island
 * until its stylesheet has loaded: Safari and Firefox paint the
 * shadow DOM before this file arrives, which flashed the component
 * unstyled. Important declarations inside a shadow tree beat the
 * outer document's, so this undoes the head rule the moment this
 * file applies. See AGENTS.md, "Set up in Webflow, not in git".
 * ============================================================ */
:host {
  display: contents !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}