/* ============================================================
 * Reset (Shadow DOM isolation means the site's global reset,
 * including *{box-sizing:border-box}, does NOT apply here --
 * without this, width:100% + padding overflows past the parent)
 * ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*laki test*/
/*laki test*/
/* ============================================================
 * Reconstructed global classes (Shadow DOM isolation means
 * classes from the site's global stylesheet do NOT apply here
 * -- only CSS custom properties inherit through. So typography,
 * badge, and button classes are redefined locally, referencing
 * the same design-token variables used site-wide.)
 * ============================================================ */

.text {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: var(--_typography---font-size--text-main, 1rem);
  line-height: var(--_typography---line-height--md, 1.5rem);
  font-weight: var(--_typography---font--primary-regular, 400);
  color: inherit;
}

.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);
}

.heading-style-h3 {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: var(--_typography---font-size--h3, 2.25rem);
  line-height: var(--_typography---line-height--display-md, 2.75rem);
  font-weight: var(--_typography---font--primary-medium, 500);
}

.heading-style-h4 {
  font-family: var(--_typography---font--primary-family, Satoshi, Arial, sans-serif);
  font-size: var(--_typography---font-size--h4, 1.875rem);
  line-height: var(--_typography---line-height--display-sm, 2.375rem);
  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);
  font-weight: var(--_typography---font--primary-regular, 400);
}

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

.color-text-neutral {
  color: var(--_default---swatch--neutral, #fff);
}

.text-block {
  display: block;
}

.weight-medium {
  font-weight: var(--_typography---font--primary-medium, 500);
}

/* ============================================================
 * Button (reconstructed -- primary/secondary/ghost variants)
 * ============================================================ */
.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);
  font-weight: var(--_typography---font--primary-regular, 400);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05),
    inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
/* Hover skips disabled buttons (the "Get started" of an unavailable plan), in
 * every variant: a colour change there reads as clickable. Only <button>s can
 * match :disabled, so the <a> CTAs are unaffected. */
.button:hover:not(:disabled) {
  background-color: var(--_theme---button-primary--background-hover, #803bbf);
  color: var(--_theme---button-primary--text-hover, #fff);
}

.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);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
}
.button.variant-secondary:hover:not(:disabled) {
  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);
}

.button.variant-ghost {
  border-color: transparent;
  background-color: transparent;
  color: var(--_theme---button-secondary--text, #58475a);
  box-shadow: none;
}
.button.variant-ghost:hover:not(:disabled) {
  background-color: var(--_theme---button-secondary--background-hover, #fafafa);
}

/* ============================================================
 * Layout wrappers
 * ============================================================ */
.hero_controls_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.credits_label_wrap {
  display: block;
}

.credits_question_row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.credits_value_text {
  margin-top: 4px;
}

.info_tooltip_wrap {
  position: relative;
  display: inline-flex;
  cursor: help;
}

.tooltip_text {
  width: 17.5rem;
  padding: 12px;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  background-color: var(--_default---swatch--gray-950, #030712);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 2;
}

@media (max-width: 479px) {
  .tooltip_text {
    width: auto;
    max-width: min(280px, calc(100vw - 32px));
    left: auto;
    right: 0;
  }
}

.info_tooltip_wrap:hover .tooltip_text {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Two equal grid columns, not flex items: with nowrap labels, flex let
 * "Monthly billing" grow wider than "Annual billing", so no single thumb
 * width could fit either option and the thumb sat off-centre. The thumb's
 * inset, width and slide distance all come from the two values below, which
 * is what keeps its gap to the track the same on every side in both states. */
.billing_toggle_wrap {
  --billing-inset: var(--_spacing---space--4, 0.25rem);
  --billing-gap: var(--_spacing---space--4, 0.25rem);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--billing-gap);
  padding: var(--billing-inset);
  border: 1px solid var(--_theme---border-secondary, #e9e6e9);
  background-color: var(--_theme---background-2, #fafafa);
  border-radius: 0.75rem;
}

.billing_thumb {
  position: absolute;
  top: var(--billing-inset);
  bottom: var(--billing-inset);
  left: var(--billing-inset);
  /* one column: half the padding box, less one inset and half the gap */
  width: calc(50% - var(--billing-inset) - var(--billing-gap) / 2);
  background-color: var(--_theme---button-secondary--background, #fff);
  border: 0.094rem solid var(--_theme---button-secondary--border, #dad4da);
  border-radius: var(--_default---radius--small, 0.5rem);
  transition: transform 0.25s ease;
  z-index: 0;
}

/* One column plus the gap between the columns. A bare translateX(100%)
 * falls one gap short and leaves the right inset wider than the left. */
.billing_thumb.is-annual {
  transform: translateX(calc(100% + var(--billing-gap)));
}

.billing_tab_monthly,
.billing_tab_annual {
  position: relative;
  z-index: 1;
}

.billing_toggle_button {
  position: relative;
  width: 100%;
  padding: 0.656rem 1.125rem;
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  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: var(--_theme---text-secondary, #69586c);
  transition: color 0.25s ease;
}

.billing_toggle_button.is-active {
  color: var(--_theme---button-secondary--text, #58475a);
}

/* ============================================================
 * Slider
 * ============================================================ */
.slider_wrap {
  margin-top: 32px;
}

.credit_range_slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
}

.credit_range_slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    var(--_default---swatch--brand-600, #8f4bd2) var(--pct),
    var(--_default---swatch--neutral-200, #e9e6e9) var(--pct)
  );
}

.credit_range_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--_default---swatch--brand-600, #8f4bd2);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

.credit_range_slider::-moz-range-track {
  height: 8px;
  border-radius: 9999px;
  background: var(--_default---swatch--neutral-200, #e9e6e9);
}

.credit_range_slider::-moz-range-progress {
  height: 8px;
  border-radius: 9999px;
  background: var(--_default---swatch--brand-600, #8f4bd2);
}

.credit_range_slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--_default---swatch--brand-600, #8f4bd2);
  cursor: grab;
}

/* ============================================================
 * Plan cards row
 * ============================================================ */
/* Cards share row tracks through subgrid: each card spans three rows (title
   block, price + CTA, features), so those line up across the cards in the
   server-rendered HTML, before any script runs. This was a JS min-height pass
   after hydration, which made cards with a shorter description jump on load. */
.plan_cards_row {
  /* A popular card's column, 48px wider than the rest (see below). */
  --plan-popular-col: calc((100% - 4 * 32px - 48px) / 5 + 48px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 0;
  margin-top: 32px;
}

/* The popular card has 24px side padding for its shaded box. Its column is 48px
   wider so every card's text keeps the same width, as the old flex row did;
   equal columns made Pro's badges and description wrap and stretched the row.
   Which card is popular changes (Pro, or Enterprise on the slider's "+" step). */
@media screen and (min-width: 992px) {
  .plan_cards_row {
    transition: grid-template-columns 0.3s ease;
  }

  .plan_cards_row:has(> .plan_card_pricing.is_popular:nth-child(1)) {
    grid-template-columns: var(--plan-popular-col) repeat(4, minmax(0, 1fr));
  }

  .plan_cards_row:has(> .plan_card_pricing.is_popular:nth-child(2)) {
    grid-template-columns: minmax(0, 1fr) var(--plan-popular-col) repeat(3, minmax(0, 1fr));
  }

  .plan_cards_row:has(> .plan_card_pricing.is_popular:nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) var(--plan-popular-col) repeat(2, minmax(0, 1fr));
  }

  .plan_cards_row:has(> .plan_card_pricing.is_popular:nth-child(4)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) var(--plan-popular-col) minmax(0, 1fr);
  }

  .plan_cards_row:has(> .plan_card_pricing.is_popular:nth-child(5)) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) var(--plan-popular-col);
  }

  /* The one-plan lineup: Free, Make Plan, Enterprise. */
  .plan_cards_row.is-one-plan {
    --plan-popular-col: calc((100% - 2 * 32px - 48px) / 3 + 48px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan_cards_row.is-one-plan:has(> .plan_card_pricing.is_popular:nth-child(1)) {
    grid-template-columns: var(--plan-popular-col) repeat(2, minmax(0, 1fr));
  }

  .plan_cards_row.is-one-plan:has(> .plan_card_pricing.is_popular:nth-child(2)) {
    grid-template-columns: minmax(0, 1fr) var(--plan-popular-col) minmax(0, 1fr);
  }

  .plan_cards_row.is-one-plan:has(> .plan_card_pricing.is_popular:nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) var(--plan-popular-col);
  }
}

.plan_card_pricing {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  min-width: 0;
  padding-top: 32px;
  padding-bottom: 40px;
  transition: opacity 0.3s ease, padding 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}

.plan_card_pricing.is_popular {
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 1.5rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.1);
}

.plan_cta_button {
  width: 100%;
  margin-top: 32px;
}

.plan_cta_button .button {
  width: 100%;
}

.plan_header_wrap {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding-top: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--_theme---border-secondary, #e9e6e9);
}

/* Bottom of the shared track, so a card without the "$x /1,000 credits" line
   (Free, Enterprise, or an unavailable plan) keeps its CTA level with the rest. */
.plan_bottom_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.plan_heading_wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plan_title_wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plan_name_row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.plan_name_text {
  font-weight: var(--_typography---font--primary-medium, 500);
}

.plan_name_text,
.plan_save_badge,
.plan_popular_badge {
  white-space: nowrap;
  flex-shrink: 0;
}

.plan_save_badge {
  padding: 4px 12px;
  border: 1px solid var(--_default---swatch--green-200, #bbf7d0);
  border-radius: 9999px;
  background-color: var(--_default---swatch--green-50, #f0fdf4);
  color: var(--_default---swatch--green-700, #15803d);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  word-break: keep-all;
}

.plan_popular_badge {
  padding: 4px 12px;
  border: 1px solid var(--_default---swatch--brand-200, #e9dcfb);
  border-radius: 9999px;
  background-color: var(--_default---swatch--brand-50, #faf7fe);
  color: var(--_default---swatch--brand-700, #803bbf);
  font-size: var(--_typography---font-size--text-small, 0.875rem);
  line-height: var(--_typography---line-height--small, 1.25rem);
  word-break: keep-all;
}

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

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

.plan_desc_text {
  line-height: 1.5rem;
  margin-top: 32px;
  margin-bottom: 0;
}

/* Baseline, not flex-end: the price and label have different line heights,
   so bottom-aligning their boxes left the label's text 2px below the price's. */
.plan_price_sub_row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 32px;
  min-height: 1.25rem; /* keeps the row's height even when text is hidden */
}

@media screen and (max-width: 767px) {
  .plan_price_sub_row:empty {
    min-height: 0;
    margin-top: 0;
  }
}

.plan_price_per_credits_text {
  font-size: var(--_typography---font-size--h6, 1.25rem);
  font-weight: var(--_typography---font--primary-medium, 500);
}

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

.plan_features_wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  padding: 32px 0 0;
}

.plan_features_title_text {
  color: var(--_theme---text-secondary, #69586c);
  font-weight: var(--_typography---font--primary-semibold, 600);
}

.plan_bl ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  color: var(--_theme---text-secondary);
}

.plan_bl ul li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

.plan_bl ul li::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z%27 fill=%27%23DCFCE7%27/%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M17.096 7.38967L9.93602 14.2997L8.03602 12.2697C7.68602 11.9397 7.13602 11.9197 6.73602 12.1997C6.34602 12.4897 6.23602 12.9997 6.47602 13.4097L8.72602 17.0697C8.94602 17.4097 9.32601 17.6197 9.75601 17.6197C10.166 17.6197 10.556 17.4097 10.776 17.0697C11.136 16.5997 18.006 8.40967 18.006 8.40967C18.906 7.48967 17.816 6.67967 17.096 7.37967V7.38967Z%27 fill=%27%2316A34A%27/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@container theme-scope style(--_theme---theme: 2) {
  .plan_bl ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z%27 fill=%27%2316A34A%27/%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M17.096 7.38967L9.93602 14.2997L8.03602 12.2697C7.68602 11.9397 7.13602 11.9197 6.73602 12.1997C6.34602 12.4897 6.23602 12.9997 6.47602 13.4097L8.72602 17.0697C8.94602 17.4097 9.32601 17.6197 9.75601 17.6197C10.166 17.6197 10.556 17.4097 10.776 17.0697C11.136 16.5997 18.006 8.40967 18.006 8.40967C18.906 7.48967 17.816 6.67967 17.096 7.37967V7.38967Z%27 fill=%27%23BBF7D0%27/%3E%3C/svg%3E");
  }
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media screen and (max-width: 991px) {
  .plan_cards_row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }

  /* The space between rows of cards is the cards' bottom margin, not row-gap:
     a card's rows are subgrid tracks, so row-gap would also open inside it. */
  .plan_card_pricing {
    margin-bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid var(--_theme---border-secondary, #e9e6e9);
    border-radius: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.05);
  }

  .plan_card_pricing:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .plan_cards_row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero_controls_row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .billing_toggle_wrap {
    margin-bottom: 48px;
    order: -9999;
  }
}

@media screen and (max-width: 479px) {
  .billing_toggle_wrap {
    width: 100%;
  }
}

/* ============================================================
 * Unavailable plan state (price is null at the selected tier)
 * ============================================================ */
.plan_card_pricing.is_unavailable {
  opacity: 0.6;
}

.plan_card_pricing .plan_cta_button .button {
  transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.plan_card_pricing.is_unavailable .plan_cta_button .button {
  cursor: not-allowed;
  opacity: 0.5;
}

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

/* Visually hidden text, 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;
}

/* Info icon is now a <button>: strip all button styling so it looks
   exactly like the plain icon did */
.info_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 0;
  cursor: inherit;
  border-radius: 9999px;
}

/* Tooltip also opens on keyboard focus (Esc hides it again) */
.info_tooltip_wrap:not(.is-dismissed):has(.info_button:focus-visible) .tooltip_text {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Purple double focus ring -- same as the rest of the site. Keyboard only
   (:focus-visible). Each keeps the element's own shadows after the ring.
   The colour fallbacks matter: one undefined variable voids the whole
   box-shadow, so without them the ring vanished wherever a variable was
   missing (the local dev page lacks brand-500-main). */
.info_button:focus-visible,
.billing_toggle_button:focus-visible,
.button:focus-visible {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px var(--_theme---background, #fff),
    0 0 0 4px var(--_default---swatch--brand-500-main, #a66ee2);
}

.billing_toggle_button:focus-visible {
  border-radius: var(--_default---radius--small, 0.5rem);
}

.button:focus-visible {
  box-shadow:
    0 0 0 2px var(--_theme---background, #fff),
    0 0 0 4px var(--_default---swatch--brand-500-main, #a66ee2),
    0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05),
    inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.button.variant-secondary:focus-visible {
  box-shadow:
    0 0 0 2px var(--_theme---background, #fff),
    0 0 0 4px var(--_default---swatch--brand-500-main, #a66ee2),
    0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
}

.button.variant-ghost:focus-visible {
  box-shadow:
    0 0 0 2px var(--_theme---background, #fff),
    0 0 0 4px var(--_default---swatch--brand-500-main, #a66ee2);
}

/* Slider: ring on the thumb */
.credit_range_slider:focus-visible {
  outline: 2px solid transparent;
}

.credit_range_slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px var(--_theme---background, #fff),
    0 0 0 4px var(--_default---swatch--brand-500-main, #a66ee2),
    0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.credit_range_slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 2px var(--_theme---background, #fff),
    0 0 0 4px var(--_default---swatch--brand-500-main, #a66ee2);
}

/* ============================================================
 * Loading: while the visitor's lineup is looked up, the /pricing head
 * code (webflow-embeds/pricing-loading) sets --pricing-pending-visibility
 * and --pricing-pending-block on <html>; they inherit into this shadow
 * root. The default slider and cards keep their place (and stay in the
 * HTML Webflow publishes) under one grey block. Without the head code,
 * with JavaScript off, or after its 20 s backstop, both are undefined
 * and nothing is hidden. See pricing-shared/pricingVariant.ts.
 * ============================================================ */
.hero_plans {
  position: relative;
}

.hero_plans > .hero_controls_row,
.hero_plans > .slider_wrap {
  visibility: var(--pricing-pending-visibility, visible);
}

.pricing_loading_block {
  display: var(--pricing-pending-block, none);
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    var(--_default---swatch--neutral-100, #f4f2f4) 0%,
    var(--_default---swatch--neutral-50, #faf9fa) 50%,
    var(--_default---swatch--neutral-100, #f4f2f4) 100%
  );
  background-size: 200% 100%;
  animation: pricing-loading-shimmer 1.6s ease-in-out infinite;
}

@keyframes pricing-loading-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing_loading_block {
    animation: none;
  }
}

/* ============================================================
 * 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;
}