.pill-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                 /* ~gap-2 */
  padding: 1rem 2rem;          /* ~py-4 px-8 */
  border-radius: 1.5rem;       /* ~rounded-3xl */
  font-size: 1.125rem;         /* ~text-lg */
  font-weight: 600;            /* font-semibold */
  border: 2px solid #cbd5e1;   /* ~border-2 border-slate-300 */
  background: #ffffff;         /* bg-white */
  color: #0f172a;              /* text-slate-900 */
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08); /* ~shadow-md */
  transition:
    transform 150ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.pill-tabs [role="tab"]:not([data-active]):hover {
  background: #eef2ff;         /* ~hover:bg-indigo-50 */
  transform: translateY(-2px); /* ~hover:-translate-y-0.5 */
}

.pill-tabs [role="tab"][data-active] {
  background: #001048;
  color: #ffffff;
  border-color: transparent;
  /*box-shadow:0 0 0 6px rgba(99, 102, 241, 0.25),0 2px 10px rgba(2, 6, 23, 0.12);*/
}

@media (min-width: 768px) {
  .pill-tabs [role="tab"] {
    font-size: 1.25rem;
  }
}

.pill-tabs [role="tab"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.35),
    0 2px 10px rgba(2, 6, 23, 0.12);
}

.button-tab.mantine-Button-root {
  /* kill Mantine’s fixed sizing so padding defines height */
  --button-height: auto;
  --button-padding-x: 2rem;   /* px-8 */
  --button-fz: 1.125rem;      /* text-lg */
  --button-radius: 1.5rem;    /* rounded-3xl */

  height: auto;
  min-height: 0;              /* avoid enforced min-height */
  padding: 1rem 2rem;         /* py-4 px-8 */
  border-radius: 1.5rem;
  margin-right: 0.75rem;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                /* gap-2 */

  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;             /* ensures tight vertical rhythm like tabs */

  background: #ffffff;
  color: #0f172a;
  border: 2px solid #cbd5e1;  /* match tabs: 2px */
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08);

  transition:
    transform 150ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

/* normalize inner wrappers so they don't reintroduce height */
.button-tab.mantine-Button-root .mantine-Button-inner {
  height: auto;
}

.button-tab.mantine-Button-root{
  line-height: normal;
  overflow: visible;
  font-weight: 600;
  padding-block: 1rem;
}

.button-tab.mantine-Button-root .mantine-Button-label {
  line-height: 1.2;
}

/* Hover/focus to match your tabs */
.button-tab.mantine-Button-root:hover {
  background: #eef2ff;
  transform: translateY(-2px);
}
.button-tab.mantine-Button-root:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.35),
    0 2px 10px rgba(2, 6, 23, 0.12);
}

/* Optional: responsive font bump like your tabs */
@media (min-width: 768px) {
  .button-tab.mantine-Button-root { font-size: 1.25rem; }
}