/* ===============================
   Matrix layout (core behavior)
   =============================== */
.price-grid{
  display:flex;
  overflow:auto;
  max-height: 70vh;
  border-radius:1rem 1rem 0 0;
  -webkit-overflow-scrolling:touch;
  position:relative;
  isolation:isolate;
}

/* Prevent column collapse */
.pricing-column,
.pricing-column-features{
  flex:0 0 auto;
}

/* ===============================
   Sticky left feature column
   =============================== */
.pricing-column-features{
  position:sticky; left:0; background:#fff;

  /* one z-index system */
  z-index:1000;

  /* compositor stability (prevents SVGs painting above) */
  transform:translate3d(0,0,0);
  will-change:transform;

  /* DO NOT rely on border-right (it can vanish mid-scroll).
     Use inset shadow divider instead (never disappears). */
  border-right:0 !important;
  box-shadow:inset -1px 0 0 var(--gray200);
}

/* ===============================
   Sticky header cells
   =============================== */
.pricing-top{
  position:sticky;
  top:0;
  background:#fff;

  min-height:70px;
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;

  border-bottom:1px solid var(--gray200);
	border-left:1px solid var(--gray200);

  z-index:900;
  transform:translate3d(0,0,0);
}

.first .pricing-top {border-left:none;}

.pricing-top.features{
  align-items:flex-start;
  padding-left:24px;border-left:none;
}

/* Top-left header cell above all */
.pricing-column-features .pricing-top {z-index:1100; background:#fff;}
.pricing-column-features .pricing-top.features{box-shadow: inset -1px 0 0 var(--gray200);}

/* ===============================
   Row alignment
   =============================== */
.feature-item,
.feature-check{
  height:64px;
  display:flex;
  align-items:center;
}

/* Feature column rows */
.feature-item{
	padding:4px 20px;
	border-bottom:1px solid var(--gray200);
	border-right: 1px solid var(--gray200);
}
.feature-item.end{
  border-bottom:none;
}

/* Plan rows */
.feature-check{
  justify-content:center;
  padding:4px 0;
  border-bottom:1px solid var(--gray200);

  /* keep checks under sidebar */
  position:relative;
  z-index:1;
}
.feature-check.end{
  border-bottom:none;
}

/* ===============================
   Column sizing (critical)
   =============================== */
.feature-grid{
  width:140px;
  display:grid;
  grid-template-columns:1fr;
  grid-column-gap:0;
  grid-row-gap:0;
}

.feature-grid.feature-category{width:200px;}

/* ===============================
   Utility / Webflow remnants
   =============================== */
.feature-text-mobile{ display:none; }
.display-none{ display:none !important; }

/* Optional: first column border cleanup */
.pricing-column.first{ border-left:none; }

/* ===============================
   Headings font size
   =============================== */
.pricing-top .price-type{ font-size:.875rem; text-align: center; }

/* ===============================
   Blue checkmarks (SVG-safe)
   =============================== */
.uui-icon-1x1-xsmall-2{
  width:1.5rem;
  height:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.uui-icon-1x1-xsmall-2 svg{
  width:1.25rem;
  height:1.25rem;
  display:block;
}

/* Outline checks */
.feature-check svg path{
  fill:none;
  stroke:var(--primary700);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.feature-check svg path[fill]:not([fill="none"]){fill:var(--primary700); stroke:none;}
.pricing-column .feature-check{border-left:1px solid var(--gray200);}
.pricing-column.first .feature-check {border-left:none;}
.pricing-column:last-child .feature-check {border-right:1px solid var(--gray200);}


/* Make sure the scroll container is the stacking root */
.price-grid{
  position: relative;
  isolation: isolate;
}

/* Force the sticky sidebar onto its own composited layer */
.pricing-column-features{
  z-index: 99999;
  background: #fff;

  /* compositor hacks that beat the SVG-paints-on-top bug */
  transform: translate3d(0,0,0);
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  isolation: isolate;
}

/* Also force the top-left cell onto that layer */
.pricing-column-features .pricing-top{
  transform: translate3d(0,0,0);
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* Keep plan columns definitely underneath */
.pricing-column{
  position: relative;
  z-index: 1;
}

/* Make sure SVGs don’t get their own higher layer */
.pricing-column .feature-check svg,
.pricing-column .feature-check svg *{
  transform: none !important;
  filter: none !important;
}

/* =========================================================
   B) RIGHT DIVIDER ON TOP-LEFT HEADER CELL
   (left column heading)
   ========================================================= */
.pricing-column-features .pricing-top.features{
  /* draws the missing right line on the header cell */
  box-shadow: inset -1px 0 0 var(--gray200);
}


/* =========================================================
   FIX LEFT STICKY SIDEBAR:
   1) right divider never stops
   2) stop SVG check overlap
   ========================================================= */

/* Make flex items stretch to full height of the scroll area */
.price-grid{
  align-items: stretch;
}

/* Ensure the sticky sidebar actually stretches */
.pricing-column-features{
  align-self: stretch;
  position: sticky;   /* keep (in case theme overrides) */
  left: 0;
  background: #fff;
  z-index: 10000;

  /* IMPORTANT: allow absolute divider positioning */
  position: sticky;
}

/* Use a real full-height divider (borders/shadows can visually drop on sticky+scroll) */
.pricing-column-features::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--gray200);
  pointer-events: none;
  z-index: 10001;
}



/* =========================================================
   FIX: no overlap below the 70vh fold
   ========================================================= */

/* Make the scroll viewport a REAL height (not just max-height) */
.price-grid{
  max-height: 70vh;
  height: min(70vh, max-content);   /* = content height until it hits 70vh */
  overflow: auto;
  align-items: stretch;
}

/* Ensure the sticky sidebar spans the full scroll viewport height */
.pricing-column-features{
  align-self: stretch;
  height: 100%;
  position: sticky;
  left: 0;
}

/* Mask the seam for the FULL height (prevents SVG bleed/overlap) */
.pricing-column-features{
  position: sticky; /* keep sticky */
}
.pricing-column-features::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  background:#fff;
  pointer-events:none;
  z-index:10002;
}

/* Keep your divider line above the mask */
.pricing-column-features::after{
  z-index:10003;
}