/* Theme layer on top of Bootstrap 5.3 — layout, spacing and type come from Bootstrap classes */
.pls {
	--pl-ink: #062D1F;
	--pls-lime: #CCFC00;
	--pls-green: #42DA88;
	--pls-light: #F0FBF4;
	--pls-dur: 7s;                                   /* time per slide */
	--bs-body-color: var(--pls-light);
	--bs-secondary-color: #A9C4B5;
	--bs-border-color: rgba(66, 218, 136, .18);
	--bs-card-bg: transparent;
	--bs-card-cap-bg: transparent;
	--bs-card-border-color: rgba(66, 218, 136, .18);
	color: var(--pls-light);
	background:
		radial-gradient(60% 80% at 78% 40%, rgba(66, 218, 136, .10), transparent 70%),
		radial-gradient(70% 90% at 10% 0%, rgba(204, 252, 0, .05), transparent 60%),
		linear-gradient(160deg, #0b2a1c, #06170f);
}
.pls-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* slides stack in one grid cell, so the hero height never jumps between slides */
.pls-panel { grid-area: 1 / 1; }
.pls-panel:not(.show) { visibility: hidden; }

.pls-count { border: 1px solid var(--pls-lime); color: var(--pls-lime); background: transparent; padding: .45em .9em; letter-spacing: .04em; }
.pls-title { letter-spacing: -.035em; text-wrap: balance; }
.pls-hl { color: var(--pls-lime); }
.pls-desc { color: #cfe3d7; max-width: 34em; text-wrap: pretty; }
.pls-chip { font-size: .85rem; padding: .55em 1em; background: rgba(240, 251, 244, .03); --bs-border-color: rgba(240, 251, 244, .18); }

/* lime button as a Bootstrap button variant */
.pls-cta {
	--bs-btn-bg: var(--pls-lime); --bs-btn-color: var(--pl-ink); --bs-btn-border-color: var(--pls-lime);
	--bs-btn-hover-bg: #d9ff3d; --bs-btn-hover-color: var(--pl-ink); --bs-btn-hover-border-color: #d9ff3d;
	--bs-btn-active-bg: #b8e600; --bs-btn-active-color: var(--pl-ink); --bs-btn-active-border-color: #b8e600;
	--bs-btn-focus-shadow-rgb: 204, 252, 0;
	font-size: 1rem; padding-top: .9rem; padding-bottom: .9rem;
}
.pls-arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.pls a:hover .pls-arrow { transform: translateX(3px); }

.pls-btn { --bs-btn-border-color: rgba(240, 251, 244, .22); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--pls-lime); --bs-btn-hover-border-color: var(--pls-lime);
	width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.pls-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pls-btn .pls-ico-play { fill: currentColor; stroke: none; display: none; }
.pls.is-stopped .pls-ico-pause { display: none; }
.pls.is-stopped .pls-ico-play  { display: block; }

/* ---------- orbit SVG ---------- */
.pls-visual {max-width: 550px;}
.pls-orbit  { display: block; width: 100%; height: auto; overflow: visible; }
.pls-outer  { fill: none; stroke: var(--pls-green); stroke-width: 1.2; stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: .45; }
.pls-stage  { font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-anchor: middle; dominant-baseline: central; }
.pls-spoke  { stroke: var(--pls-green); stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .3; transition: opacity .4s, stroke .4s; }
.pls-spoke.is-active { stroke: var(--pls-lime); opacity: .9; }
.pls-shield    { fill: url(#pls-shield); stroke: url(#pls-edge); stroke-width: 1.6; }
.pls-shield-in { fill: none; stroke: var(--pls-green); stroke-width: 1; opacity: .5; }
.pls-orbit use { fill: currentColor; }
.pls-core-t { fill: var(--pls-light); font-size: 15.5px; font-weight: 700; text-anchor: middle; letter-spacing: -.01em; }
.pls-core-s { fill: var(--pls-green); font-size: 11.5px; font-weight: 500; text-anchor: middle; }
.pls-seg-base { fill: none; stroke: var(--c); stroke-width: 2; opacity: .35; }
.pls-seg-head { fill: var(--c); opacity: .6; }
.pls-seg-prog { fill: none; stroke: var(--pls-lime); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.pls-node { cursor: pointer; color: var(--c); }
.pls-node-in { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.34,1.4,.5,1); }
.pls-node-disc { fill: url(#pls-node); stroke: var(--c); stroke-opacity: .45; stroke-width: 1.4; transition: stroke .3s, stroke-opacity .3s, stroke-width .3s; }
.pls-node-glow { opacity: 0; transition: opacity .5s; }
.pls-node-ring { fill: none; stroke: var(--pls-lime); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; }
.pls-node-n  { fill: #A9C4B5; font-size: 11.5px; font-weight: 700; text-anchor: middle; letter-spacing: .04em; transition: fill .3s; }
.pls-hit     { fill: transparent; }
.pls-node:hover .pls-node-disc { stroke-opacity: 1; }
.pls-node:hover .pls-node-in   { transform: scale(1.06); }
.pls-node.is-active { color: var(--pls-lime); }
.pls-node.is-active .pls-node-in   { transform: scale(1.22); }
.pls-node.is-active .pls-node-disc { stroke: var(--pls-lime); stroke-opacity: 1; stroke-width: 2; }
.pls-node.is-active .pls-node-glow { opacity: 1; }
.pls-node.is-active .pls-node-n    { fill: var(--pls-lime); }
.pls-node.is-active .pls-node-ring { opacity: .9; animation: pls-draw var(--pls-dur) linear forwards; }
.pls-seg.is-next .pls-seg-prog     { animation: pls-draw var(--pls-dur) linear forwards; }


/* ---------- tabs ---------- */
.pls-tabs { --bs-nav-link-color: #A9C4B5; --bs-nav-link-hover-color: var(--pls-light); scrollbar-width: none; scroll-snap-type: x mandatory; }
.pls-tabs::-webkit-scrollbar { display: none; }
.pls .pls-tabs > .pls-tab { flex: 0 0 170px; border-left: 1px solid var(--bs-border-color); scroll-snap-align: start; font-size: .875rem; }
.pls-tab:first-child { border-left: 0; }
.pls-tab:hover { background: rgba(240, 251, 244, .03); }
.pls-tab.active { color: var(--pls-light); background: rgba(204, 252, 0, .04); }
.pls-tab-n { color: var(--c); opacity: .75; letter-spacing: .06em; }
.pls-tab.active .pls-tab-n { color: var(--pls-lime); opacity: 1; }
.pls-bar { height: 2px; background: var(--pls-lime); transform: scaleX(0); transform-origin: left; }
.pls-tab.active .pls-bar { animation: pls-fill var(--pls-dur) linear forwards; }
@media (min-width: 1200px) { .pls .pls-tabs > .pls-tab { flex: 1 1 0; min-width: 0; } }
@media (max-width: 575.98px) {
	.pls-cta { width: 100%; justify-content: center; text-align: center; }
	.pls .pls-tabs > .pls-tab { flex-basis: 150px; }
	.pls-stage { font-size: 15px; }
	.pls-node-n { font-size: 14px; }
}

@keyframes pls-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes pls-draw { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }

/* paused (button, hover, keyboard focus, off-screen) freezes every timer */
.pls.is-paused .pls-bar, .pls.is-paused .pls-node-ring, .pls.is-paused .pls-seg-prog { animation-play-state: paused; }
.pls.is-stopped .pls-tab.active .pls-bar { animation: none; transform: scaleX(1); }
.pls.is-stopped .pls-node.is-active .pls-node-ring { animation: none; stroke-dashoffset: 0; }
.pls.is-stopped .pls-seg.is-next .pls-seg-prog { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.pls-node-in, .pls-arrow { transition: none; }
}

/* =====================================================================
   Self-contained fallbacks
   The live site's theme doesn't provide Bootstrap's component CSS
   (card, btn, nav, badge, display, lead, link utilities), and its own
   h2 / a / button / li styles leak in. Everything below styles the
   component on its own, so it looks the same with or without full
   Bootstrap. Only the grid (.row / .col-lg-6) and spacing classes are
   still taken from Bootstrap.
   ===================================================================== */
.pls { position: relative; margin-left: auto; margin-right: auto;
	border: 1px solid var(--bs-card-border-color);
	/* border-radius: 24px; */
	overflow: hidden;
	font-family: var(--pillar-font, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif); line-height: 1.5; }
.pls *, .pls *::before, .pls *::after { box-sizing: border-box; }

/* slides */
.pls .pls-panels { display: grid; }
.pls .pls-panel { opacity: 0; transition: opacity .4s ease; }
.pls .pls-panel.show { opacity: 1; }

/* meta line */
.pls .pls-count { display: inline-block; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.pls .pls-meta > span:last-child { color: var(--bs-secondary-color); font-weight: 500; font-size: .875rem; }

/* headline + copy: beat theme h2 / p rules */
.pls .pls-title { font-family: inherit; font-weight: 600; line-height: 1.04;
	color: var(--pls-light); text-transform: none; margin: 0 0 1rem; }
.pls p.pls-desc { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.55; margin: 0 0 1.5rem; }

/* chips: no theme bullets or backgrounds */
.pls ul.list-unstyled { list-style: none; padding: 0; margin: 0 0 2rem; }
.pls ul.list-unstyled > li { margin: 0; list-style: none; }
.pls ul.list-unstyled > li::before, .pls ul.list-unstyled > li::after { content: none; display: none; }
.pls li.pls-chip { display: inline-block; border: 1px solid rgba(240, 251, 244, .18); border-radius: 999px;
	color: var(--pls-light); line-height: 1.2; white-space: nowrap; }

/* CTA button */
.pls a.pls-cta { display: inline-flex; align-items: center; gap: .75rem; padding: .95rem 1.6rem; border-radius: 999px;
	background: var(--pls-lime); border: 1px solid var(--pls-lime); color: var(--pl-ink); font-weight: 700; font-size: 1rem; line-height: 1.2;
	text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; }
.pls a.pls-cta:hover { background: #d9ff3d; color: var(--pl-ink); transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(204, 252, 0, .6); }

/* secondary link */
.pls a.pls-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--pls-light); font-weight: 500;
	text-decoration: underline; text-decoration-color: rgba(240, 251, 244, .45); text-underline-offset: .3em; }
.pls a.pls-link:hover { color: var(--pls-lime); text-decoration-color: currentColor; }

/* round control buttons: undo theme button styles */
.pls button { font-family: inherit; }
.pls button.pls-btn { -webkit-appearance: none; appearance: none; border: 1px solid rgba(240, 251, 244, .22); border-radius: 50%;
	background: transparent; color: var(--pls-light); cursor: pointer; box-shadow: none; transition: border-color .2s, color .2s; }
.pls button.pls-btn:hover { border-color: var(--pls-lime); color: var(--pls-lime); background: transparent; }

/* tab strip */
.pls .pls-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0; border-top: 1px solid var(--bs-border-color); }
.pls button.pls-tab { -webkit-appearance: none; appearance: none; position: relative; display: flex; flex-direction: column; justify-content: flex-start;
	align-items: flex-start; text-align: left; margin: 0; padding: 1rem; border: 0; border-left: 1px solid var(--bs-border-color); border-radius: 0;
	background: transparent; color: #A9C4B5; box-shadow: none; cursor: pointer; font-size: .875rem; line-height: 1.3; text-transform: none; letter-spacing: normal; }
.pls button.pls-tab:first-child { border-left: 0; }
.pls button.pls-tab:hover { background: rgba(240, 251, 244, .03); color: var(--pls-light); }
.pls button.pls-tab.active { background: rgba(204, 252, 0, .04); color: var(--pls-light); }
.pls .pls-tab-n { display: block; font-size: .75rem; font-weight: 700; margin-bottom: .25rem; }
.pls .pls-tab-t { display: block; font-weight: 600; }
.pls .pls-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.pls a:focus-visible, .pls button:focus-visible { outline: 2px solid var(--pls-lime); outline-offset: 3px; }
.pls button.pls-tab:focus-visible { outline-offset: -3px; }

/* flex layout + gaps (also covered by Bootstrap utilities when present) */
.pls .pls-meta    { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.pls ul.pls-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pls .pls-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.pls .pls-controls { display: flex; gap: .5rem; margin-top: 1rem; justify-content: center; }
@media (min-width: 992px) { .pls .pls-controls { justify-content: flex-end; } }
.pls .pls-arrow { flex-shrink: 0; }

/* =====================================================================
   Responsive layer
   Works with the current markup (no pls-meta / pls-chips / pls-actions
   classes needed): the slide parts are targeted by their position.
   ===================================================================== */

/* spacing lives on the inner container (.card-body has no padding) */
.pls .card-body {padding: 45px 0px;}
.pls > .container {/* padding: 2.5rem 1.25rem 2rem; */}
@media (min-width: 576px) { .pls > .container {/* padding: 3rem 1.5rem 2.5rem; */} }
@media (min-width: 992px) { .pls > .container {/* padding: 4rem .75rem 3rem; */} }
@media (max-width: 991.98px) { .pls .row { --bs-gutter-y: 2.5rem; } }

.pls .pls-title { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem); letter-spacing: -.03em; }  /* 34px phones, 56px max, per v2 design */

/* meta line / chips / actions, without extra classes */
.pls .pls-panel > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.pls .pls-panel > div:first-child > span:last-child { color: var(--bs-secondary-color); font-weight: 500; font-size: .875rem; }
.pls .pls-panel > ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.pls .pls-panel > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.pls .pls-panel > div:last-child > a:not(.pls-cta) {
	display: inline-flex; align-items: center; gap: .5rem; color: var(--pls-light); font-weight: 500;
	text-decoration: underline; text-decoration-color: rgba(240, 251, 244, .45); text-underline-offset: .3em;
}
.pls .pls-panel > div:last-child > a:not(.pls-cta):hover { color: var(--pls-lime); text-decoration-color: currentColor; }

/* tablets: orbit centred at a comfortable size under the copy */
@media (max-width: 991.98px) {
	.pls .pls-visual { max-width: 520px; }
	.pls p.pls-desc { max-width: 40em; }
}

/* phones */
@media (max-width: 575.98px) {
	.pls .pls-panel > div:first-child { gap: .5rem .75rem; margin-bottom: 1.25rem; }
	.pls .pls-panel > div:first-child > span:last-child { flex-basis: 100%; }   /* pillar name on its own line */
	.pls .pls-title { margin-bottom: .875rem; }
	.pls p.pls-desc { font-size: 1rem; line-height: 1.6; margin-bottom: 1.25rem; }
	.pls .pls-panel > ul { margin-bottom: 1.5rem; }
	.pls li.pls-chip { white-space: normal; text-align: left; font-size: .8125rem; padding: .5em .9em; }
	.pls .pls-panel > div:last-child { align-items: stretch; }
	.pls a.pls-cta { width: 100%; justify-content: center; text-align: center; padding: .9rem 1.25rem; font-size: .9375rem; }
	.pls .pls-panel > div:last-child > a:not(.pls-cta) { align-self: center; margin-left: 0 !important; font-size: .9375rem; }

	/* orbit: full column width, larger type, shield keeps just the title */
	.pls .pls-visual { max-width: 100%; }
	.pls .pls-core-s { display: none; }
	.pls .pls-core-t { font-size: 17px; transform: translateY(12px); }
	.pls .pls-stage  { font-size: 15px; }
	.pls .pls-node-n { font-size: 15px; }

	.pls .pls-controls { margin-top: .75rem; }
	.pls .pls-tabs > .pls-tab {/* flex-basis: 140px; */padding: .875rem 1rem 1rem;}
}

/* very small phones (320px) */
@media (max-width: 359.98px) {
	.pls > .container { padding-left: 1rem; padding-right: 1rem; }
	.pls .pls-tabs > .pls-tab { flex-basis: 128px; }
	.pls .pls-panel > div:last-child > a:not(.pls-cta) { font-size: .875rem; gap: .375rem; }
	.pls a.pls-cta { font-size: .875rem; }
}

/* touch screens: no hover lift that sticks after a tap */
@media (hover: none) {
	.pls a.pls-cta:hover { transform: none; box-shadow: none; }
	.pls .pls-node:hover .pls-node-in { transform: none; }
	.pls .pls-node.is-active .pls-node-in { transform: scale(1.22); }
}


/* =====================================================================
   v2 design: section header, stage strip, "Pillar 01 of 08" pill
   ===================================================================== */
.pls .pls-head {
	padding: 8px 0px;
	border-bottom: 1px solid var(--bs-border-color);
	}
.pls .pls-head-icon {display: block;height: 25px;}
.pls .pls-head-t {
	margin: 0 0 .25rem;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--pls-light);
	text-transform: none;
	margin: 0;
	}
.pls .pls-head-s { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bs-secondary-color); }
.pls a.pls-head-cta { padding: .7rem 1.25rem; border: 1px solid rgba(204, 252, 0, .7); border-radius: 999px; color: var(--pls-lime);
	font-size: .875rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.pls a.pls-head-cta:hover { background: var(--pls-lime); color: var(--pl-ink); }

.pls .pls-stages { margin: 0; border-bottom: 1px solid var(--bs-border-color); }
.pls button.pls-stagebtn { -webkit-appearance: none; appearance: none; position: relative; display: flex; align-items: center; gap: .6rem;
	margin: 0; padding: .9rem 1.5rem; border: 0; border-left: 1px solid var(--bs-border-color); border-radius: 0; background: transparent;
	box-shadow: none; cursor: pointer; text-align: left; font-family: inherit; font-size: .75rem; font-weight: 700; line-height: 1.2;
	letter-spacing: .14em; text-transform: uppercase; color: #6F917F; transition: color .3s, background .3s; }
.pls button.pls-stagebtn:first-child { border-left: 0; }
.pls button.pls-stagebtn:hover { color: var(--pls-light); background: rgba(240, 251, 244, .03); }
.pls .pls-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; transition: box-shadow .3s, opacity .3s; }
.pls button.pls-stagebtn.active { color: var(--c); background: rgba(204, 252, 0, .06); }
.pls button.pls-stagebtn.active .pls-dot { opacity: 1; box-shadow: 0 0 0 3px rgba(204, 252, 0, .18), 0 0 10px var(--c); }
.pls button.pls-stagebtn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c); }
.pls button.pls-stagebtn:focus-visible { outline: 2px solid var(--pls-lime); outline-offset: -3px; }

.pls .pls-count { color: var(--pls-light); border-color: rgba(204, 252, 0, .6); font-weight: 600; font-size: .8125rem; padding: .5em 1em; }
.pls .pls-count b { color: var(--pls-lime); font-weight: 800; }
.pls .pls-panel > div:first-child > span:last-child { color: #cfe3d7; }

/* gaps set here too, in case the theme's Bootstrap build has no gap utilities */
.pls .pls-head { display: flex; gap: 1rem; }
.pls-head a {
    color: var(--secondary-color);
    background-color: transparent !important;
    text-transform: capitalize;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
}
.pls .pls-head > div { display: flex; align-items: center; gap: 1rem; }
.pls a.pls-head-cta { display: inline-flex; align-items: center; gap: .5rem; }
.pls a.pls-cta { gap: .75rem; }
@media (min-width: 768px) { .pls .pls-head { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 767.98px) { .pls .pls-head { flex-direction: column; align-items: flex-start; } }

/* tablets & phones */
@media (max-width: 767.98px) {
	span.d-block.lh-sm.pls-tab-t {
	    font-size: 12px;
	}
	.pls .pls-head {padding:  5px 10px;gap: 5px !important;align-items: center !important;}
	.pls .card-body{
		padding:0 0 30px;
	}
	.pls .pls-head-t {font-size: 14px;}
	.pls a.pls-head-cta { padding: .6rem 1.1rem; }
	.pls button.pls-stagebtn { padding: .8rem 1.25rem; font-size: .6875rem; }
	.pls button.pls-stagebtn:nth-child(odd) { border-left: 0; }
	.pls button.pls-stagebtn:nth-child(n+3) { border-top: 1px solid var(--bs-border-color); }
}
@media (max-width: 575.98px) {
	.pls {/* border-radius: 18px; */}
	.pls .pls-head-icon {width: 20px;height: 20px;}
	.pls .pls-head-s { font-size: .8125rem; }
	.pls .pls-head > div {gap: .75rem;gap: 5px !important;}
	.pls button.pls-stagebtn { padding: .75rem 1rem; letter-spacing: .1em; gap: .5rem; }
	.pls > .container { padding-top: 2rem; }
}
@media (max-width: 359.98px) {
	.pls button.pls-stagebtn { font-size: .625rem; padding: .7rem .75rem; }
}


/* =====================================================================
   Fit the screen height on desktop
   On laptops (and desktops with 125% / 150% Windows scaling) the
   viewport is often only 650–800px tall. The orbit was a fixed 550px
   square, so with the header and tabs the section got taller than the
   screen and the bottom was cut off. From 992px up, the orbit, the
   headline and the vertical spacing now shrink with the screen height,
   so header + slide + tabs fit on one screen.
   --pls-offset = height of the site's top menu bar (gruve.ai: ~78px).
   ===================================================================== */
@media (min-width: 992px) {
	.pls { --pls-offset: 80px; --pls-reserve: 250px; }   /* reserve = header bar + tabs + padding */
	.pls .card-body { padding: clamp(16px, 4.5vh, 45px) 0; }

	/* orbit: never taller than what's left after menu, header, tabs and padding */
	.pls .pls-visual {
		max-width: min(550px, calc(100vh - var(--pls-offset) - var(--pls-reserve)));
		max-width: min(550px, calc(100svh - var(--pls-offset) - var(--pls-reserve)));
	}

	/* headline follows the screen height too, not only the width */
	.pls .pls-title { font-size: clamp(2.25rem, min(1.4rem + 2.2vw, 7.2vh), 3.5rem); }
}

/* short desktop screens (roughly 1366x768, 1536x864 at 125%, 1440x900 with browser bars) */
@media (min-width: 992px) and (max-height: 860px) {
	.pls .pls-head { padding-top: 12px; padding-bottom: 12px; }
	.pls .pls-panel > div:first-child { margin-bottom: 1rem; }
	.pls .pls-title { margin-bottom: .75rem; }
	.pls p.pls-desc { font-size: 1.0625rem; line-height: 1.5; margin-bottom: 1.25rem; }
	.pls .pls-panel > ul { margin-bottom: 1.5rem; }
	.pls a.pls-cta { padding: .8rem 1.4rem; }
	.pls .pls-tabs > .pls-tab { padding-top: .75rem !important; padding-bottom: .8rem !important; }   /* !important: beats Bootstrap's py-3 */
}
@media (min-width: 992px) and (max-height: 760px) {
	.pls .pls-head-s { display: none; }             /* keep just the title line */
	.pls .pls-title { font-size: clamp(2.125rem, 6.2vh, 3rem); }
	.pls p.pls-desc { font-size: 1rem; margin-bottom: 1rem; }
	.pls li.pls-chip { font-size: .8rem; padding: .45em .85em; }
	.pls .pls-panel > ul { margin-bottom: 1.25rem; }
	.pls .pls-tabs > .pls-tab { padding: .55rem .875rem .65rem !important; font-size: .8125rem; }
	.pls .card-body { padding: 16px 0; }
	.pls { --pls-reserve: 205px; }
	.pls .pls-tab-n { margin-bottom: .125rem; }
}


/* Layout 2 */
/* =====================================================================
   Gruve 8 Pillars, layout_2 (white, three columns, animated ring)
   Loaded only when "Select layout" = layout_2.
   Uses the brand vars from the main stylesheet (--text-color,
   --primary-color, --secondary-color, --base-color, --bg-*, --text-*,
   --lime-glow, --green-glow).
   ===================================================================== */

  /* =====================================================================
     Self-contained fallbacks
     The live theme loads Bootstrap's grid/spacing but not its component
     CSS (nav, tab-content, fade, btn, type utilities), and theme h2 / h3 /
     button / li / a styles leak in. These rules make the section look the
     same with or without full Bootstrap. They come first so the
     section rules below win where both set something.
     ===================================================================== */
  #gruve-pillars *, #gruve-pillars *::before, #gruve-pillars *::after{ box-sizing: border-box; }
  #gruve-pillars{ background: #fff; line-height: 1.5; }

  /* headings + text */
  #gruve-pillars h2, #gruve-pillars h3{ font-family: inherit; color: var(--text-color); text-transform: none; letter-spacing: normal; line-height: 1.2; margin-top: 0; }
  #gruve-pillars .fs-2{ font-size: calc(1.325rem + .9vw); }
  @media (min-width: 1200px){ #gruve-pillars .fs-2{ font-size: 2rem; } }
  #gruve-pillars .fs-4{ font-size: calc(1.275rem + .3vw); }
  @media (min-width: 1200px){ #gruve-pillars .fs-4{ font-size: 1.5rem; } }
  #gruve-pillars .fs-6{ font-size: 1rem; }
  #gruve-pillars .fw-normal{ font-weight: 400; }
  #gruve-pillars .small{ font-size: .875em; }
  #gruve-pillars .fw-medium{ font-weight: 500; }
  #gruve-pillars .fw-semibold{ font-weight: 600; }
  #gruve-pillars .fw-bold{ font-weight: 700; }
  #gruve-pillars .fw-bolder{ font-weight: 800; }
  #gruve-pillars .lh-sm{ line-height: 1.25; }
  #gruve-pillars .text-center{ text-align: center; }
  #gruve-pillars .text-start{ text-align: left; }
  #gruve-pillars .text-body{ color: var(--bs-body-color); }
  #gruve-pillars .text-body-secondary{ color: var(--bs-secondary-color); }
  #gruve-pillars .text-success{ color: var(--primary-color); }
  #gruve-pillars .tab-pane h3{ margin: 0 0 1rem; }
  #gruve-pillars .tab-pane p{ margin: 0 0 1.5rem; }

  /* gaps (in case the theme's Bootstrap build has no gap utilities) */
  #gruve-pillars .gap-2{ gap: .5rem; }
  #gruve-pillars .gap-3{ gap: 1rem; }
  #gruve-pillars .position-relative{ position: relative; }

  /* panels fade */
  #gruve-pillars .tab-content > .tab-pane{ opacity: 0; }
  #gruve-pillars .tab-content > .tab-pane.show{ opacity: 1; }

  /* checklist: no theme bullets */
  #gruve-pillars ul.list-unstyled{ list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
  #gruve-pillars ul.list-unstyled > li{ list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; color: var(--text-color); }
  #gruve-pillars ul.list-unstyled > li::before, #gruve-pillars ul.list-unstyled > li::after{ content: none; display: none; }
  #gruve-pillars ul.list-unstyled > li svg{ flex-shrink: 0; margin-top: .25rem; color: var(--primary-color); }

  /* number circle */
  #gruve-pillars [data-num]{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--primary-color); border-radius: 50%; font-weight: 800; }

  /* CTA */
  #gruve-pillars .tab-pane a.btn{
    display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.5rem;
    border: 1px solid var(--text-color); border-radius: 999px; background: var(--text-color); color: #fff;
    font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none;
    box-shadow: none; transition: background .2s, border-color .2s;
  }
  #gruve-pillars .tab-pane a.btn.fw-normal{ font-weight: 400; }
  #gruve-pillars .tab-pane a.btn:hover, #gruve-pillars .tab-pane a.btn:focus-visible{ background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

  /* tab list + tabs: undo theme button styles */
  #gruve-pillars [role="tablist"]{ display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; list-style: none; margin: 0; padding: 0; }
  @media (min-width: 768px){ #gruve-pillars [role="tablist"]{ flex-direction: column; overflow: visible; } }
  #gruve-pillars [role="tab"]{
    -webkit-appearance: none; appearance: none; display: flex; align-items: flex-start; gap: .5rem;
    margin: 0; padding: .5rem 1rem; border-top: 0; border-right: 0; border-bottom: 0;
    background: transparent; color: var(--text-color); box-shadow: none; cursor: pointer;
    font-family: inherit; font-size: 1rem; line-height: 1.3; text-align: left; text-transform: none; letter-spacing: normal;
  }
  #gruve-pillars [role="tab"] > span:nth-child(2){ display: flex; flex-direction: column; }
  #gruve-pillars [role="tab"] > span:nth-child(2) > span:first-child{ font-size: 16px; font-weight: 500; line-height: 1.25; }
  #gruve-pillars [role="tab"] > span:nth-child(2) > span:last-child{ font-size: 14px; color: var(--bs-secondary-color); margin-top: .25rem; }
  #gruve-pillars [data-tabnum]{ font-size: .875rem; font-weight: 800; }
  #gruve-pillars [data-group]{ align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; margin: 1rem 0 .25rem .25rem; }
  #gruve-pillars [data-group]:first-child{ margin-top: 0; }

  /* =========================================================
     8 PILLARS SECTION — scoped to #gruve-pillars
     Layout/typography = Bootstrap classes. Only states Bootstrap
     can't express (SVG, active tab, progress) are styled here,
     using data attributes instead of custom classes.
     ========================================================= */
  #gruve-pillars{
    --bs-body-color: var(--text-color);
    --bs-emphasis-color: var(--text-color);
    --bs-secondary-color: color-mix(in srgb, var(--text-color) 68%, #fff);
    --bs-border-color: color-mix(in srgb, var(--primary-color) 16%, #fff);
    --bs-success-rgb: 33, 165, 94;
    --gp-tint: color-mix(in srgb, var(--primary-color) 8%, #fff);
    --gp-dur: 6s;
    color: var(--text-color);
    overflow: hidden;
  }

  /* faint brand gradient behind the section */
  #gruve-pillars{
    background-color: #fff;
    background-image:
      radial-gradient(45% 55% at 50% 55%, color-mix(in srgb, var(--base-color) 9%, transparent), transparent 70%),
      linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 8%, #fff) 0%, #fff 42%, #fff 58%, color-mix(in srgb, var(--base-color) 12%, #fff) 100%);
  }
h2#gruve-pillars-title {
    color: var(--primary-color);
}
  /* Panels: stack so height never jumps between pillars */
  #gruve-pillars .tab-content{ display: grid; }
  #gruve-pillars .tab-content > .tab-pane{ display: block; grid-area: 1 / 1; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
  #gruve-pillars .tab-content > .tab-pane.active{ visibility: visible; transition: opacity .45s ease, visibility 0s; }
  #gruve-pillars .tab-pane:focus-visible{ outline: 2px solid var(--primary-color); outline-offset: 8px; border-radius: 6px; }
  #gruve-pillars .tab-pane p{ font-size: 18px; line-height: 1.6; }
  #gruve-pillars [data-num]{ width: 44px; height: 44px; border-color: var(--primary-color) !important; color: var(--primary-color); }

  #gruve-pillars .tab-pane .btn{
    --bs-btn-bg: var(--text-color); --bs-btn-border-color: var(--text-color); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--primary-color); --bs-btn-hover-border-color: var(--primary-color); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bg-deep); --bs-btn-active-border-color: var(--bg-deep);
  }

  /* Tabs */
  #gruve-pillars [role="tablist"]{ --bs-nav-link-color: var(--text-color); --bs-nav-link-hover-color: var(--text-color); scrollbar-width: none; }
  #gruve-pillars [data-group]{ color: var(--primary-color); }
  #gruve-pillars [data-group]::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  #gruve-pillars [role="tab"]{ border-left: 3px solid var(--bs-border-color); border-radius: 0 10px 10px 0; transition: background .25s; }
  #gruve-pillars [role="tab"]:hover{ background: color-mix(in srgb, var(--primary-color) 4%, #fff); }
  #gruve-pillars [role="tab"]:focus-visible{ outline: 2px solid var(--primary-color); outline-offset: 2px; box-shadow: none; }
  #gruve-pillars [role="tab"][aria-selected="true"]{ background: var(--gp-tint); border-left-color: color-mix(in srgb, var(--primary-color) 30%, #fff); }
  #gruve-pillars [data-tabnum]{ color: var(--bs-secondary-color); min-width: 22px; padding-top: 1px; }
  #gruve-pillars [aria-selected="true"] [data-tabnum]{ color: var(--primary-color); }
  #gruve-pillars [data-progress]{ position: absolute; left: -3px; top: 0; width: 3px; height: 0; background: var(--primary-color); }
  #gruve-pillars [aria-selected="true"] [data-progress]{ height: 100%; }
  #gruve-pillars[data-playing] [aria-selected="true"] [data-progress]{ height: 0; animation: gpFillY var(--gp-dur) linear forwards; }
  #gruve-pillars[data-playing]:has(:focus-visible) [data-progress],
  #gruve-pillars[data-offscreen] [data-progress]{ animation-play-state: paused !important; }
  @keyframes gpFillY{ to{ height: 100%; } }
  @keyframes gpFillX{ to{ width: 100%; } }

  /* SVG ring */
  #gruve-pillars svg[data-ring]{ display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto; overflow: visible; }
  /* Desktop layout from 992px: keep the whole section inside one screen */
  @media (min-width: 992px){
    #gruve-pillars{ padding-top: clamp(24px, 5vh, 48px) !important; padding-bottom: clamp(24px, 5vh, 48px) !important; }
    #gruve-pillars > .container{ padding-top: 0 !important; padding-bottom: 0 !important; }
    /* ring never taller than the screen minus site header, title and padding */
    #gruve-pillars svg[data-ring]{ max-width: min(760px, calc(100vh - 190px)); max-width: min(760px, calc(100svh - 190px)); }
  }
  /* 992-1199px: columns are narrow, so the type steps down a little */
  @media (min-width: 992px) and (max-width: 1199.98px){
    #gruve-pillars .tab-pane h3{ font-size: 26px; }
    #gruve-pillars .tab-pane p{ font-size: 16px; line-height: 1.55; margin-bottom: 1.25rem; }
    #gruve-pillars ul.list-unstyled{ margin-bottom: 1.25rem; }
    #gruve-pillars ul.list-unstyled > li{ font-size: 15px; }
    #gruve-pillars .tab-pane a.btn{ font-size: 15px; padding: .75rem 1.25rem !important; }
    #gruve-pillars [data-num]{ width: 38px; height: 38px; }
    #gruve-pillars [role="tab"]{ padding: .4rem .75rem !important; }
    #gruve-pillars [role="tab"] > span:nth-child(2) > span:first-child{ font-size: 15px; }
    #gruve-pillars [role="tab"] > span:nth-child(2) > span:last-child{ font-size: 13px; }
  }
  /* short screens (1024x768, 1366x768, 1280x720, 125% scaling) */
  @media (min-width: 992px) and (max-height: 860px){
    #gruve-pillars [role="tab"]{ padding-top: .3rem !important; padding-bottom: .3rem !important; }
    #gruve-pillars [role="tab"] > span:nth-child(2) > span:last-child{ margin-top: 0 !important; }
    #gruve-pillars [data-group]{ margin-top: .5rem !important; margin-bottom: 0 !important; }
    #gruve-pillars [data-group]:first-child{ margin-top: 0 !important; }
    #gruve-pillars .tab-pane .mb-3{ margin-bottom: .75rem !important; }
  }
  /* narrow desktop (992-1199px) or very short screens: tab names only, taglines hidden */
  @media (min-width: 992px) and (max-width: 1199.98px), (min-width: 992px) and (max-height: 700px){
    #gruve-pillars [role="tab"] > span:nth-child(2) > span:last-child{ display: none; }
    #gruve-pillars [role="tab"]{ padding-top: .35rem !important; padding-bottom: .35rem !important; }
  }

  #gruve-pillars [data-arc-base]{ fill: none; stroke: color-mix(in srgb, var(--primary-color) 9%, #fff); stroke-width: 8; stroke-linecap: round; }
  #gruve-pillars [data-arc]{ fill: none; stroke: var(--primary-color); stroke-width: 8; stroke-linecap: round; opacity: .22; transition: opacity .6s ease; }
  #gruve-pillars [data-arc][data-lit]{ opacity: 1; }
  #gruve-pillars [data-phase-line]{ fill: none; stroke: var(--primary-color); stroke-width: 2; stroke-linecap: round; opacity: .25; transition: opacity .5s; }
  #gruve-pillars [data-phase-txt]{ fill: var(--primary-color); font-size: 12px; font-weight: 700; letter-spacing: .04em; opacity: .5; transition: opacity .5s, fill .5s; }
  #gruve-pillars [data-phase][data-on] [data-phase-line]{ opacity: 1; }
  #gruve-pillars [data-phase][data-on] [data-phase-txt]{ opacity: 1; fill: var(--text-color); }

  #gruve-pillars [data-node]{ cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  #gruve-pillars [data-part="bg"]{ fill: #fff; stroke: var(--primary-color); stroke-width: 2.5; transition: fill .4s, stroke .4s, stroke-width .2s; }
  #gruve-pillars [data-node]:hover [data-part="bg"]{ stroke-width: 4; fill: var(--gp-tint); }
  #gruve-pillars [data-part="ico"]{ fill: none; stroke: var(--primary-color); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
  #gruve-pillars [data-part="lbl"]{ fill: var(--text-color); font-size: 11px; font-weight: 500; text-anchor: middle; transition: fill .4s; }
  #gruve-pillars [data-part="badge"]{ fill: #fff; stroke: var(--primary-color); stroke-width: 2; transition: fill .4s, stroke .4s; }
  #gruve-pillars [data-part="badge-t"]{ fill: var(--primary-color); font-size: 10.5px; font-weight: 800; text-anchor: middle; transition: fill .4s; }
  #gruve-pillars [data-part="pulse"]{ fill: none; stroke: var(--base-color); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
  #gruve-pillars [data-node][data-active]{ transform: scale(1.1); }
  #gruve-pillars [data-node][data-active] [data-part="bg"]{ fill: var(--bg-mid); stroke: var(--bg-mid); filter: drop-shadow(0 6px 18px var(--green-glow)); }
  #gruve-pillars [data-node][data-active] [data-part="ico"]{ stroke: var(--secondary-color); }
  #gruve-pillars [data-node][data-active] [data-part="lbl"]{ fill: var(--text-light); }
  #gruve-pillars [data-node][data-active] [data-part="badge"]{ fill: var(--secondary-color); stroke: var(--bg-mid); }
  #gruve-pillars [data-node][data-active] [data-part="badge-t"]{ fill: var(--text-color); }
  #gruve-pillars [data-node][data-active] [data-part="pulse"]{ animation: gpPulse 2.4s ease-out infinite; }
  @keyframes gpPulse{ 0%{ opacity: .7; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.35); } }

  #gruve-pillars [data-orbit]{ fill: none; stroke: var(--base-color); stroke-width: 1.5; stroke-dasharray: 3 9; opacity: .55; transform-box: fill-box; transform-origin: center; animation: gpSpin 50s linear infinite; }
  @keyframes gpSpin{ to{ transform: rotate(360deg); } }
  #gruve-pillars [data-comet]{ fill: var(--secondary-color); opacity: 0; filter: drop-shadow(0 0 6px var(--lime-glow)) drop-shadow(0 0 2px var(--base-color)); }

  /* Mobile: tabs become a sideways strip */
  @media (max-width: 767.98px){
    #gruve-pillars [role="tablist"]{ margin: 0 calc(var(--bs-gutter-x) * -.5); padding: 0 calc(var(--bs-gutter-x) * .5) 6px; gap: 8px; scroll-snap-type: x mandatory; }
    #gruve-pillars [role="tab"]{ flex: 0 0 auto; min-width: 210px; scroll-snap-align: start; border-left: 0; border-bottom: 3px solid var(--bs-border-color); border-radius: 10px 10px 0 0; }
    #gruve-pillars [role="tab"][aria-selected="true"]{ border-bottom-color: color-mix(in srgb, var(--primary-color) 30%, #fff); }
    #gruve-pillars [data-progress]{ left: 0; top: auto; bottom: -3px; width: 0; height: 3px; }
    #gruve-pillars [aria-selected="true"] [data-progress]{ width: 100%; height: 3px; }
    #gruve-pillars[data-playing] [aria-selected="true"] [data-progress]{ width: 0; height: 3px; animation-name: gpFillX; }
  }
  @media (prefers-reduced-motion: reduce){
    #gruve-pillars *{ animation: none !important; transition: none !important; }
  }

/* =====================================================================
   Layout 3: dark version of the new pillars layout
   Same markup and JS as layout 2. Turned on by data-theme="dark" on
   #gruve-pillars (select_layout = new_pillar_dark).
   Paste this block at the END of the stylesheet, after the Layout 2 rules.
   ===================================================================== */
#gruve-pillars[data-theme="dark"]{
  --bs-body-color: var(--text-light);
  --bs-emphasis-color: var(--text-light);
  --bs-secondary-color: color-mix(in srgb, var(--text-light) 74%, var(--bg-mid));
  --bs-border-color: rgba(66, 218, 136, .18);
  --gp-tint: rgba(204, 252, 0, .07);
  color: var(--text-light);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(45% 55% at 50% 55%, color-mix(in srgb, var(--base-color) 14%, transparent), transparent 70%),
    radial-gradient(60% 70% at 0% 0%, rgba(204, 252, 0, .06), transparent 60%),
    linear-gradient(160deg, var(--bg-light) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
}

/* text */
#gruve-pillars[data-theme="dark"] h2#gruve-pillars-title{ color: var(--base-color); }
#gruve-pillars[data-theme="dark"] h2,
#gruve-pillars[data-theme="dark"] h3,
#gruve-pillars[data-theme="dark"] ul.list-unstyled > li{ color: var(--text-light); }
#gruve-pillars[data-theme="dark"] .tab-pane > div:first-child > span{ color: var(--base-color) !important; } /* pillar name (has inline style) */
#gruve-pillars[data-theme="dark"] .text-success,
#gruve-pillars[data-theme="dark"] ul.list-unstyled > li svg{ color: var(--secondary-color); }
#gruve-pillars[data-theme="dark"] [data-num]{ color: var(--base-color); border-color: var(--base-color) !important; }

/* CTA: lime button */
#gruve-pillars[data-theme="dark"] .tab-pane a.btn{ background: var(--secondary-color); border-color: var(--secondary-color); color: var(--text-color); }
#gruve-pillars[data-theme="dark"] .tab-pane a.btn:hover,
#gruve-pillars[data-theme="dark"] .tab-pane a.btn:focus-visible{ background: var(--base-color); border-color: var(--base-color); color: var(--text-color); box-shadow: 0 10px 30px -12px var(--lime-glow); }

/* tabs */
#gruve-pillars[data-theme="dark"] [role="tablist"]{ --bs-nav-link-color: var(--text-light); --bs-nav-link-hover-color: var(--text-light); }
#gruve-pillars[data-theme="dark"] [role="tab"]{ color: var(--text-light); }
#gruve-pillars[data-theme="dark"] [role="tab"]:hover{ background: rgba(232, 245, 238, .04); }
#gruve-pillars[data-theme="dark"] [role="tab"][aria-selected="true"]{ background: var(--gp-tint); border-left-color: rgba(204, 252, 0, .3); }
#gruve-pillars[data-theme="dark"] [role="tab"]:focus-visible{ outline-color: var(--secondary-color); }
#gruve-pillars[data-theme="dark"] [data-tabnum]{ color: var(--text-muted); }
#gruve-pillars[data-theme="dark"] [aria-selected="true"] [data-tabnum]{ color: var(--secondary-color); }
#gruve-pillars[data-theme="dark"] [data-progress]{ background: var(--secondary-color); }
#gruve-pillars[data-theme="dark"] [data-group]{ color: var(--base-color); }

/* ring */
#gruve-pillars[data-theme="dark"] [data-arc-base]{ stroke: rgba(66, 218, 136, .12); }
#gruve-pillars[data-theme="dark"] [data-arc]{ stroke: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-ring] marker path{ fill: var(--base-color) !important; }
#gruve-pillars[data-theme="dark"] [data-phase-line]{ stroke: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-phase-txt]{ fill: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-phase][data-on] [data-phase-txt]{ fill: var(--secondary-color); }
#gruve-pillars[data-theme="dark"] [data-ring] path[style*="bg-deep"]{ filter: drop-shadow(0 0 22px var(--green-glow)); } /* shield glow */

#gruve-pillars[data-theme="dark"] [data-part="bg"]{ fill: var(--bg-mid); stroke: rgba(66, 218, 136, .55); }
#gruve-pillars[data-theme="dark"] [data-node]:hover [data-part="bg"]{ fill: var(--bg-light); stroke: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-part="ico"]{ stroke: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-part="lbl"]{ fill: var(--text-light); }
#gruve-pillars[data-theme="dark"] [data-part="badge"]{ fill: var(--bg-deep); stroke: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-part="badge-t"]{ fill: var(--base-color); }
#gruve-pillars[data-theme="dark"] [data-part="pulse"]{ stroke: var(--secondary-color); }

/* active pillar: lime disc, dark icon and text */
#gruve-pillars[data-theme="dark"] [data-node][data-active] [data-part="bg"]{ fill: var(--secondary-color); stroke: var(--secondary-color); filter: drop-shadow(0 0 18px var(--lime-glow)); }
#gruve-pillars[data-theme="dark"] [data-node][data-active] [data-part="ico"]{ stroke: var(--text-color); }
#gruve-pillars[data-theme="dark"] [data-node][data-active] [data-part="lbl"]{ fill: var(--text-color); }
#gruve-pillars[data-theme="dark"] [data-node][data-active] [data-part="badge"]{ fill: var(--text-color); stroke: var(--secondary-color); }
#gruve-pillars[data-theme="dark"] [data-node][data-active] [data-part="badge-t"]{ fill: var(--secondary-color); }

/* mobile tab strip */
@media (max-width: 767.98px){
  #gruve-pillars[data-theme="dark"] [role="tab"][aria-selected="true"]{ border-bottom-color: rgba(204, 252, 0, .3); }
}