/* ============================================================
 * 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
 * ============================================================ */
.plan_cards_row {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  align-items: stretch;
}

.plan_card_pricing {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  align-self: stretch;
  min-width: 0;
  padding-top: 32px;
  padding-bottom: 40px;
  justify-content: flex-start;
  align-items: flex-start;
  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: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--_theme---border-secondary, #e9e6e9);
  width: 100%;
}

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

.plan_price_sub_row {
  display: flex;
  align-items: flex-end;
  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_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 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
    margin-top: 48px;
    align-items: start;
  }

  .plan_card_pricing {
    padding-left: 24px;
    padding-right: 24px;
    border: 1px solid var(--_theme---border-secondary, #e9e6e9);
    border-radius: 1.5rem;
    align-items: stretch;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.05);
  }
}

@media screen and (max-width: 767px) {
  .plan_cards_row {
    grid-template-columns: 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);
}

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