/* ==========================================================================
   pricing.css: sections used only on the pricing page
   Loads after core.css. Uses tokens and the shared components from core.css
   (.btn, .pill, .faq, .caret, icons). Class names follow the hp26 BEM style.
   Two proposed additions to core.css are marked "CORE CANDIDATE" below.
   ========================================================================== */

html { background: #fff; color-scheme: light; }
body { background: #fff; color: var(--color-text); font-family: var(--font-body); }

/* --- CORE CANDIDATE: button variants used by the pricing page --- */
.btn--accent { background: var(--color-accent-default); color: #fff; }
.btn--accent:hover { background: var(--color-accent-600); color: #fff; }
.btn--light { background: #fff; color: var(--color-core-700); }
.btn--light:hover { background: var(--color-core-neutral-100); color: var(--color-core-700); }
.btn--block { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
.btn.btn--accent, .btn.btn--light { text-decoration: none; box-shadow: none; }

/* --- CORE CANDIDATE: section title, same spec as .leaders__title --- */
.pricing__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.12px;
  color: var(--color-core-neutral-800);
  text-align: center;
}

.pricing__container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   Page-views slider
   ========================================================================== */
.pricing-calc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 32px;
  padding: 12px 24px;
  margin: 40px 0 28px;
  border: var(--border-default);
  border-radius: var(--radius-xl);
  background: #fff;
}
.pricing-calc__label {
  flex: 0 1 340px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--color-core-700);
}
.pricing-calc__track { flex: 1 1 320px; min-width: 0; }

.pricing-calc__ticks {
  position: relative;
  height: 16px;
  margin-top: 2px;
  font-size: var(--text-caption-size);
  line-height: 16px;
  color: var(--color-text-muted);
}
.pricing-calc__ticks span {
  position: absolute;
  top: 0;
  left: calc(10px + (100% - 20px) * var(--i, 0) / var(--n, 1));
  transform: translateX(-50%);
  white-space: nowrap;
  transition: color .15s ease;
}
.pricing-calc__ticks .is-active { font-weight: 600; color: var(--color-core-700); }

/* ==========================================================================
   Billing switch
   ========================================================================== */
.pricing-billing { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.pricing-billing__group {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--color-core-neutral-100);
}
.pricing-billing__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.308px;
  color: var(--color-core-neutral-600);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pricing-billing__btn[aria-pressed="true"] { background: #fff; color: var(--color-core-neutral-950); outline: 1px solid var(--color-core-neutral-200); }
.pricing-billing__btn:focus-visible { outline: 2px solid var(--color-core-700); outline-offset: 2px; }
.pricing-billing__save {
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-caption-size);
}

/* ==========================================================================
   Plan cards
   ========================================================================== */
.pricing-plans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  padding-top: 14px; /* room for the tag that overlaps the card border */
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  box-sizing: border-box;
  border: var(--border-default);
  border-radius: var(--radius-xl);
  background: #fff;
  transition: border-color .2s ease;
}
.plan--selected {
  border-color: var(--color-core-700);
  background: #fff;
}
.plan__tag {
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--color-core-neutral-100);
  border: 1px solid var(--color-core-neutral-200);
  color: var(--color-core-neutral-600);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  white-space: nowrap;
}
.plan--selected .plan__tag { background: var(--color-core-neutral-950); border-color: var(--color-core-neutral-950); color: #fff; }
.plan__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--color-text);
}
.plan__price {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--color-text);
}
.plan__period {
  margin: 2px 0 0;
  min-height: 40px;
  font-size: var(--text-body-sm-size);
  line-height: 20px;
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-muted);
}
.plan__cta { margin-top: 0; }
.plan__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: var(--border-default);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text);
}
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-core-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%235C04B4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.plan__list .is-off { color: var(--color-core-neutral-500); }
.plan__list .is-off::before {
  width: 18px;
  height: 18px;
  margin: 1px;
  border-radius: 0;
  background-image: none;
  background-color: var(--color-core-neutral-400);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 12h12" stroke="black" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 12h12" stroke="black" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>') no-repeat center / contain;
}

/* ==========================================================================
   Enterprise band
   ========================================================================== */
.pricing-enterprise {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 28px 32px;
  border-radius: var(--radius-xl);
  background: var(--color-core-950);
  color: #fff;
}
.pricing-enterprise.is-selected { outline: 2px solid var(--color-core-400); outline-offset: 3px; }
.pricing-enterprise__tag {
  z-index: 2;
  position: absolute;
  top: -12px;
  left: 28px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--color-core-neutral-950);
  border: 1px solid #fff;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-caption-size);
  line-height: 1.4;
}
.pricing-enterprise__media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; }
.pricing-enterprise__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pricing-enterprise__media.has-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 3, 58, 0.78) 0%, rgba(31, 3, 58, 0.35) 70%, rgba(31, 3, 58, 0.1) 100%); }
.pricing-enterprise__body, .pricing-enterprise > .btn { position: relative; z-index: 1; }
.pricing-enterprise__body { flex: 1 1 420px; min-width: 0; }
.pricing-enterprise__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pricing-enterprise__text {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-tracking);
  color: var(--color-core-200);
}

/* ==========================================================================
   Growth Engine tokens (intro panel + top-up panel)
   ========================================================================== */
.pricing-tokens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
  border: var(--border-default);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #fff;
}
.pricing-tokens__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  background: var(--color-core-neutral-50);
  border-right: var(--border-default);
}
.pricing-tokens__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.308px;
  color: var(--color-accent-700);
}
.pricing-tokens__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--color-accent-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-tokens__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.84px;
  color: var(--color-core-neutral-800);
}
.pricing-tokens__text {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-tracking);
  color: var(--color-text-muted);
}
.pricing-tokens__text p { margin: 0; }
.pricing-tokens__text strong { color: var(--color-text); }
.pricing-tokens__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.308px;
  color: var(--color-core-700);
  text-decoration: none;
}
.pricing-tokens__link:hover { text-decoration: underline; }
.pricing-topup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 40px;
  min-width: 0;
}
.pricing-topup__kicker {
  margin: 0;
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.pricing-topup__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--color-core-neutral-950);
}
.pricing-topup__text {
  margin: 0;
  max-width: 460px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-tracking);
  color: var(--color-text-muted);
}
.pricing-topup__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  font-size: var(--text-body-sm-size);
  line-height: 20px;
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text);
}
.pricing .pricing-topup__points li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; }
.pricing .pricing-topup__points li::before {
  content: "";
  position: static;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%23B14A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  -webkit-mask: none;
  mask: none;
}
.pricing-topup__cta { margin-top: 4px; }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.pricing-compare { padding: 56px 0 24px; }
.pricing-compare__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pricing-compare__head .pricing__title { text-align: left; }
.pricing-compare__scroll {
  margin-top: 24px;
  overflow-x: auto;
  border: var(--border-default);
  border-radius: var(--radius-xl);
}
.pricing-compare__scroll[hidden] { display: none; }
.pricing-compare table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: var(--text-body-sm-size); letter-spacing: var(--text-body-sm-tracking); }
.pricing-compare th, .pricing-compare td { padding: 14px 12px; text-align: left; border-top: var(--border-default); }
.pricing-compare th:first-child, .pricing-compare td:first-child { padding-left: 20px; }
.pricing-compare thead th { border-top: 0; background: var(--color-core-neutral-100); font-family: var(--font-heading); font-weight: 700; padding-top: 16px; padding-bottom: 16px; }
.pricing-compare tbody th { font-weight: 400; }
.pricing-compare .is-group th { background: var(--color-core-neutral-50); font-family: var(--font-heading); font-weight: 700; }
.pricing-compare td { color: var(--color-text-muted); }
.pricing-compare td.is-yes { color: var(--color-core-700); font-weight: 600; }
.pricing-compare th.is-selected, .pricing-compare td.is-selected { background: var(--color-core-neutral-100); }
.pricing-compare .is-group th.is-selected { background: var(--color-core-neutral-200); }

/* ==========================================================================
   Wix + closing CTA
   ========================================================================== */
.pricing-notice-wrap { padding: 24px 0; }
.pricing-notice {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
  padding: 32px 40px;
  border-radius: var(--radius-2xl);
  background: var(--color-core-neutral-50);
  border: var(--border-default);
  color: var(--color-core-neutral-800);
  overflow: hidden;
}
.pricing-notice.is-light { background: var(--color-core-950); border-color: 0; color: #fff; }
.pricing-notice__media { position: absolute; inset: 0; z-index: 0; }
.pricing-notice__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pricing-notice > :not(.pricing-notice__media) { position: relative; z-index: 1; }
.pricing-notice__logo { display: inline-flex; align-items: center; flex: none; }
.pricing-notice__logo img { display: block; height: 36px; width: auto; max-width: 180px; }
.pricing-notice__text {
  flex: 1 1 320px; min-width: 0; max-width: 640px; margin: 0;
  font-size: var(--text-body-size); line-height: var(--text-body-line-height); letter-spacing: var(--text-body-tracking);
  color: inherit;
}
.pricing-notice.is-light .pricing-notice__text { color: rgba(255, 255, 255, 0.92); }
.pricing-notice > .btn { flex: none; margin-left: auto; }

.pricing-faq-wrap { padding-top: 40px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  /* Plans become a swipeable row, like the leaders row on the homepage */
  .pricing-plans {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-top: 20px;
    padding-bottom: 12px;
    margin: 0 -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .pricing-plans::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .pricing-tokens { grid-template-columns: 1fr; }
  .pricing-tokens__intro { border-right: 0; border-bottom: var(--border-default); }
}
@media (max-width: 768px) {
  .pricing__title { font-size: 32px; letter-spacing: -0.9px; }
  .pricing-calc { padding-inline: 16px; }
  .pricing-tokens__intro, .pricing-topup { padding: 28px 20px; }
  .pricing-billing { justify-content: center; }
  .pricing-enterprise { padding: 24px 20px; }
  .pricing-notice { padding: 24px 20px; }
  .pricing-notice > .btn { margin-left: 0; }
}
.plan__tag[hidden], .pricing-enterprise__tag[hidden] { display: none; }

/* Comparison table checkmark: same circle tick as the feature pages */
.pricing-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-core-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%235C04B4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Pricing page only: balance the hero headline so it doesn't leave one word alone */
.hero__heading { text-wrap: balance; }
.hero__subhead { text-wrap: balance; }

/* Sliders: light track, colored fill, round white thumb. --p is set by pricing.js */
.pricing input[type="range"] {
  --c: var(--color-core-700);
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pricing input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--c) var(--p), var(--color-core-neutral-200) var(--p));
}
.pricing input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid var(--c);
  background: #fff;
}
.pricing input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--color-core-neutral-200); }
.pricing input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--c); }
.pricing input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c); background: #fff; }
.pricing input[type="range"]:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; border-radius: 4px; }

/* Comparison table: unavailable items get a quiet dash; slightly deeper on the highlighted column */
.pricing-dash { color: var(--color-core-neutral-400); }
.pricing-compare td.is-selected .pricing-dash { color: color-mix(in srgb, var(--color-core-neutral-400) 75%, var(--color-core-neutral-500)); }


/* ==========================================================================
   Hardening against legacy theme styles (DEV/LIVE load Bootstrap + old theme)
   ========================================================================== */
.pricing .pricing-calc input[type="range"],
.pricing .pricing-calc input[type="range"]:focus,
.pricing .pricing-calc input[type="range"]:focus-visible,
.pricing .pricing-calc input[type="range"]:focus-visible::-webkit-slider-thumb,
.pricing .pricing-calc input[type="range"]:focus-visible::-moz-range-thumb,
.pricing .pricing-calc input[type="range"]::-webkit-slider-thumb,
.pricing-calc__track { align-self: center; }
.pricing-calc__label { align-self: center; margin: 0; }

/* Billing switch: selected state that survives legacy button styles */
.pricing .pricing-billing__group .pricing-billing__btn { box-shadow: none; }
.pricing .pricing-billing__group .pricing-billing__btn.is-active,
.pricing .pricing-billing__group .pricing-billing__btn[aria-pressed="true"] {
  background: #fff;
  color: var(--color-core-neutral-950);
  outline: 1px solid var(--color-core-neutral-200);
}
.pricing .pricing-billing__group .pricing-billing__btn:not(.is-active):not([aria-pressed="true"]) {
  background: transparent;
  color: var(--color-core-neutral-600);
}

/* Plan cards: list rhythm that legacy ul/li rules can't change */
.pricing .plan__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
}
.pricing .plan__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  line-height: 20px;
}
.pricing .plan__list li::marker { content: none; }

/* Comparison: group rows span the full width */
.pricing-compare .is-group th { width: auto; }

/* Links rendered as buttons: keep button look even if the link has no typolink output */
.pricing a.btn { text-decoration: none; }

/* Headline gradient: the clipped background box must cover the full glyph overhang
   (descenders of g/p/y, negative letter-spacing at line ends). Padding grows the paint box,
   the negative margin keeps the layout unchanged. */
.pricing-page .hero__heading,
.hero .hero__heading {
  padding-block: 0.14em 0.3em;
  margin-block: -0.14em -0.3em;
  padding-inline: 0.12em;
  margin-inline: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Card feature list: checkmark is a normal flex item, never absolutely positioned
   (legacy "ul li::before" rules position it over the text) */
.pricing .pricing-plans .plan .plan__list li {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  text-indent: 0;
}
.pricing .pricing-plans .plan .plan__list li::before {
  position: static;
  top: auto;
  left: auto;
  flex: none;
  display: block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  transform: none;
}
.pricing .pricing-plans .plan .plan__list li.is-off::before {
  width: 18px;
  height: 18px;
  margin: 1px;
  border-radius: 0;
}

/* One checkmark everywhere: the table check uses exactly the same circle, size and tick as the cards.
   Higher specificity so legacy span / [role="img"] rules can't change it. */
.pricing .pricing-compare td .pricing-check {
  display: inline-block;
  box-sizing: border-box;
  flex: none;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--color-core-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%235C04B4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  -webkit-mask: none;
  mask: none;
  transform: none;
}
.pricing .pricing-compare td .pricing-check::before,
.pricing .pricing-compare td .pricing-check::after { content: none; }

/* Card checkmark = the new check (same as the comparison table and the feature pages).
   Restates the whole drawing at high specificity and clears any mask the legacy
   "ul li::before" checkmark applies, so the old icon can never show through. */
.pricing .pricing-plans .plan .plan__list li:not(.is-off)::before {
  background: var(--color-core-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14.2 7.4' fill='none' stroke='%235C04B4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  -webkit-mask: none;
  mask: none;
  content: "";
}


/* Info icon + tooltip in the comparison table */
.pricing .pricing-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 0 0 4px;
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--color-core-neutral-400);
  cursor: help;
  transition: color .15s ease;
}
.pricing .pricing-info:hover,
.pricing .pricing-info:focus-visible,
.pricing .pricing-info[aria-expanded="true"] { color: var(--color-core-neutral-600); }
.pricing .pricing-info:focus-visible { outline: 2px solid var(--color-core-700); outline-offset: 1px; }
.pricing-tip {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--color-core-neutral-200);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-core-neutral-800);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.pricing-tip.is-open { opacity: 1; }

/* Page views slider: no frame of any kind around the track, in every state.
   !important is deliberate: the legacy theme styles bare input elements (border, outline,
   box-shadow, focus ring) and must never draw a box around this control. */
.pricing .pricing-calc__track,
.pricing .pricing-calc__track input[type="range"],
.pricing .pricing-calc__track input[type="range"]:hover,
.pricing .pricing-calc__track input[type="range"]:focus,
.pricing .pricing-calc__track input[type="range"]:active,
.pricing .pricing-calc__track input[type="range"]:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}
.pricing .pricing-calc__track input[type="range"]::-moz-focus-outer { border: 0; }

/* Pricing Cards are clickable */

.plan, .pricing-enterprise { cursor: pointer; }