:root{
  /* Layout */
  --ft-breakpoint: 900px;
  --ft-feature-col: 320px;
  --ft-row-min: 44px;

  /* Spacing */
  --ft-gap: 14px;
  --ft-pad-sm: 10px;
  --ft-pad: 12px;
  --ft-pad-lg: 16px;

  /* Radius */
  --ft-radius: 5px;

  /* Typography */
  --ft-font-size: 1rem;
  --ft-w-head: 600;
  --ft-w-cat: 600;
  --ft-w-val: 600;

  /* Colours */
  --ft-border: #dddddd;
  --ft-bg: #fff;
  --ft-bg-soft: #f9fafb;
  --ft-bg-muted: #f3f4f6;
  --ft-brdr-stroke: 1px;
  --ft-header-bg: #ececef;
  --ft-header-bg-alt: var(--mist);
  --ft-header-text: #fff;
  --ft-icon-tick: #222;
  --ft-icon-cross: #dc2626;
  --ft-no: rgb(0 0 0 / 30%);
  --ft-chevron: #222;
  --ft-error-border: #fecaca;
  --ft-error-bg: #fef2f2;
  --ft-error-text: #7f1d1d;

  /* Icons / misc */
  --ft-icon-size: 16px;
  --ft-icon-col-min: 28px;
  --ft-transition: transform .15s ease;
}



/* Wrapper / breakpoint */
.ft-wrap { --ft-breakpoint: var(--ft-breakpoint); }

/* Visibility */
.ft-desktop { display:block; }
.ft-mobile  { display:none; }
@media (max-width: 900px){
  .ft-desktop { display:none; }
  .ft-mobile  { display:grid; gap:var(--ft-gap); }
}

/* Let shortcode attribute override breakpoint */
@media (max-width: 9999px){
  .ft-wrap { }
}
@media (max-width: 9999px){
  /* noop: breakpoint is handled by the default rule above; if you need per-instance breakpoints,
     we can implement a small inline style block that uses the instance's --ft-breakpoint. */
}


/* Desktop grid */
.ft-grid{
  /* border:var(--ft-brdr-stroke) solid var(--ft-border); */
  border-bottom:var(--ft-brdr-stroke) solid var(--ft-border);
  border-radius:var(--ft-radius);

  background:var(--bg);
}
.ft-row{
  display:grid;
  grid-template-columns: var(--ft-feature-col) repeat(5, 1fr);
  min-height:var(--ft-row-min);
}
.ft-cell{
  padding:var(--ft-pad);
  border-top:1px solid var(--ft-border);
  /* border-right:1px solid var(--ft-border); */
  font-size:var(--ft-font-size);
  display:flex;
  align-items:center;
}
.ft-row .ft-cell:last-child{ border-right:none; }

.ft-row--head .ft-cell{
  border-top:none;
  background:var(--ft-bg);
  color:var(--ink);
  font-weight:var(--ft-w-head);
  justify-content:center;
  text-align:center;
}
.ft-row--head .ft-cell--featureHead{
  justify-content:flex-start;
  background: var(--ghost);
}
.ft-row--cat .ft-cell{
  background: var(--mist);
  font-weight:var(
  --ft-w-cat);
  border-right:none;
}
.ft-cell--feature{
  background: var(--ghost);
}
.ft-cell--tier{
  justify-content:center;
  text-align:center;
}

/* SVG icons (THEMABLE) */
.ft-icon{
  width:var(--ft-icon-size);
  height:var(--ft-icon-size);
  display:inline-block;
  color: currentColor; /* inherits from parent */
}
.ft-iconWrap{ display:inline-flex; }

.ft-icon--tick  { color:var(--ink); }
.ft-icon--cross { color:var(--ink); }
.ft-no { font-size:inherit; color:var(--ft-no); }

/* Mobile stacked plans */
.ft-planCard{
  border:1px solid var(--ft-border);
  border-radius:var(--ft-radius);
  background:var(--ft-bg);

}
.ft-planHead{
  padding:var(--ft-pad-lg);
  background: #ececef;
  color: var(--ink);
}
.ft-planHead h2{font-size: var(--ft-font-size);margin:0;}

.ft-acc{ border-top:1px solid var(--ft-border); }
.ft-sum{
  list-style:none;
  cursor:pointer;
  padding:var(--ft-gap) var(--ft-pad-lg); /* 14px 16px */
  font-weight:var(--ft-w-cat);
  background:var(--ft-bg-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ft-sum::-webkit-details-marker{ display:none; }
.ft-chev{
  width:10px; height:10px;
  border-right:2px solid var(--ft-chevron);
  border-bottom:2px solid var(--ft-chevron);
  transform:rotate(-45deg);
  transition:var(--ft-transition);
}
details[open] .ft-chev{ transform:rotate(45deg); }

.ft-featList{
  padding:var(--ft-pad) var(--ft-pad-lg); /* 12px 16px */
  display:grid;
  gap:10px;
}
.ft-feat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ft-pad); /* 12px */
  border:1px solid var(--ft-border);
  border-radius:var(--ft-radius);
  padding:var(--ft-pad-sm);
  background:var(--ft-bg);
}
.ft-name{
  margin:0;
  font-weight:var(--ft-w-cat);
}
.ft-val{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:var(--ft-icon-col-min);
  font-weight:var(--ft-w-val);
}

/* Screen-reader only */
.ft-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.ft-error{
  border:1px solid var(--ft-error-border);
  background:var(--ft-error-bg);
  color:var(--ft-error-text);
  padding:var(--ft-pad);
  border-radius:var(--ft-radius);
}

/* 1) Allow sticky to work */
@media (min-width: 901px){
  .ft-row--head .ft-cell{
    z-index: 50;
    background: white;
    font-size: 1.2rem;
  }
  .ft-row--head .ft-cell--featureHead{
    z-index: 60;
  }
.ft-grid .ft-sticky {
  position: sticky;
  top: 68px;
  z-index: 20;
  background: #fff;
  transition: top 0.5s ease;
}

.ft-grid .ft-sticky.ft-scrolling-up {
  top: 108px;
}

}