/* =============================================================
   Techie Icon Pills
   -------------------------------------------------------------
   One element, several jobs: trust bars, feature grids, category
   navigation, filter tags, numbered steps, contact strips and
   pricing checklists. Everything is driven by custom properties
   set inline on the container, so the UX Builder preview and the
   front end share one stylesheet and one set of rules.

   Per-pill overrides work by re-declaring the same property on
   the item, which beats the inherited container value without
   any extra specificity games.
   ============================================================= */

.techie-icon-pills {
	--techie-accent: #111827;
	--techie-bg: #fff;
	--techie-text: #111827;
	--techie-border-color: #e6e9ef;
	--techie-border-size: 0;
	--techie-radius: 999px;
	--techie-hover-bg: #111827;
	--techie-hover-text: #fff;
	--techie-gap: 14px;
	--techie-columns: 3;
	--techie-columns-tablet: 2;
	--techie-columns-mobile: 1;
	--techie-min-height: 0;
	--techie-padding-x: 22px;
	--techie-padding-y: 8px;
	--techie-icon-size: 40px;
	--techie-icon-bg: #eef1f6;
	--techie-icon-color: #111827;
	--techie-icon-border-size: 0;
	--techie-icon-border-color: transparent;
	--techie-icon-radius: 999px;
	--techie-icon-gap: 12px;
	--techie-title-size: 16px;
	--techie-title-weight: 700;
	--techie-sub-size: 13px;
	--techie-sub-color: #6b7280;
	--techie-badge-bg: #111827;
	--techie-badge-color: #fff;
	--techie-shadow: none;
	--techie-shadow-hover: none;
	--techie-container-bg: transparent;
	--techie-container-border-size: 0;
	--techie-container-border-color: transparent;
	--techie-container-radius: 0;
	--techie-container-padding: 0;
	background: var(--techie-container-bg);
	border: var(--techie-container-border-size) solid var(--techie-container-border-color);
	border-radius: var(--techie-container-radius);
	box-sizing: border-box;
	counter-reset: techie-pill;
	display: flex;
	flex-wrap: wrap;
	gap: var(--techie-gap);
	padding: var(--techie-container-padding);
}

.techie-icon-pills * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Alignment
   --------------------------------------------------------------- */

.techie-icon-pills--center {
	justify-content: center;
}

.techie-icon-pills--right {
	justify-content: flex-end;
}

/* ---------------------------------------------------------------
   Layouts
   --------------------------------------------------------------- */

/* Grid: a fixed number of equal columns, responsive per breakpoint. */
.techie-icon-pills--grid {
	display: grid;
	grid-template-columns: repeat(var(--techie-columns), minmax(0, 1fr));
}

.techie-icon-pills--grid .techie-icon-pills__item {
	width: 100%;
}

/* Stack: one pill per row, full width — feature lists, mobile menus. */
.techie-icon-pills--stack {
	flex-direction: column;
	flex-wrap: nowrap;
}

.techie-icon-pills--stack.techie-icon-pills--center {
	align-items: center;
}

.techie-icon-pills--stack.techie-icon-pills--right {
	align-items: flex-end;
}

.techie-icon-pills--stack .techie-icon-pills__item {
	width: 100%;
}

/* Equal width: inline pills share the row evenly instead of hugging text. */
.techie-icon-pills--equal:not(.techie-icon-pills--grid):not(.techie-icon-pills--stack) .techie-icon-pills__item {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------------------------------------------------------------
   The pill
   --------------------------------------------------------------- */

.techie-icon-pills__item {
	align-items: center;
	background: var(--techie-bg);
	border: var(--techie-border-size) solid var(--techie-border-color);
	border-radius: var(--techie-radius);
	box-shadow: var(--techie-shadow);
	color: var(--techie-text);
	counter-increment: techie-pill;
	display: inline-flex;
	gap: var(--techie-icon-gap);
	line-height: 1.3;
	min-height: var(--techie-min-height);
	padding: var(--techie-padding-y) var(--techie-padding-x);
	position: relative;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.techie-icon-pills__item:hover {
	text-decoration: none;
}

.techie-icon-pills__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.techie-icon-pills__title {
	color: inherit;
	font-size: var(--techie-title-size);
	font-weight: var(--techie-title-weight);
}

.techie-icon-pills__sub {
	color: var(--techie-sub-color);
	font-size: var(--techie-sub-size);
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
}

.techie-icon-pills__badge {
	background: var(--techie-badge-bg);
	border-radius: 999px;
	color: var(--techie-badge-color);
	flex: 0 0 auto;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	margin-left: auto;
	padding: 4px 8px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Pill styles (surface treatment, independent of the template)
   --------------------------------------------------------------- */

.techie-icon-pills--style-outline .techie-icon-pills__item {
	background: transparent;
}

.techie-icon-pills--style-filled .techie-icon-pills__item:first-child,
.techie-icon-pills__item.is-active {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
}

.techie-icon-pills--style-filled .techie-icon-pills__item:first-child .techie-icon-pills__sub,
.techie-icon-pills__item.is-active .techie-icon-pills__sub {
	color: rgba(255, 255, 255, .78);
}

.techie-icon-pills--style-minimal .techie-icon-pills__item {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* ---------------------------------------------------------------
   Hover effects — pick one, rather than always repainting the pill
   --------------------------------------------------------------- */

.techie-icon-pills--hover-fill .techie-icon-pills__item:hover {
	background: var(--techie-hover-bg);
	border-color: var(--techie-hover-bg);
	color: var(--techie-hover-text);
}

.techie-icon-pills--hover-fill .techie-icon-pills__item:hover .techie-icon-pills__sub {
	color: currentColor;
	opacity: .78;
}

.techie-icon-pills--hover-lift .techie-icon-pills__item:hover {
	box-shadow: var(--techie-shadow-hover, 0 10px 26px rgba(17, 24, 39, .12));
	transform: translateY(-3px);
}

.techie-icon-pills--hover-grow .techie-icon-pills__item:hover {
	transform: scale(1.035);
}

.techie-icon-pills--hover-glow .techie-icon-pills__item:hover {
	border-color: var(--techie-accent);
	box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--techie-accent) 18%, transparent);
}

.techie-icon-pills--hover-border .techie-icon-pills__item:hover {
	border-color: var(--techie-accent);
	color: var(--techie-accent);
}

/* ---------------------------------------------------------------
   Icon slot
   --------------------------------------------------------------- */

.techie-icon-pills__item .techie-icon-pills__media,
.techie-icon-pills--numbered .techie-icon-pills__item::before {
	align-items: center;
	background: var(--techie-icon-bg);
	border: var(--techie-icon-border-size) solid var(--techie-icon-border-color);
	border-radius: var(--techie-icon-radius);
	color: var(--techie-icon-color);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: calc(var(--techie-icon-size) * .52);
	height: var(--techie-icon-size);
	justify-content: center;
	line-height: 1;
	object-fit: cover;
	overflow: hidden;
	width: var(--techie-icon-size);
}

/* Numbered steps: the counter is a pseudo-element, so a pill needs no
   extra markup and the numbering survives re-ordering in the builder. */
.techie-icon-pills--numbered .techie-icon-pills__item::before {
	content: counter(techie-pill);
	font-size: calc(var(--techie-icon-size) * .42);
	font-weight: 700;
}

.techie-icon-pills--numbered .techie-icon-pills__media {
	display: none;
}

/* No icon anywhere: drop the slot rather than leaving an empty circle.
   --auto marks a pill that made no choice of its own, so it only shows
   when the group has a Default Icon set. --none is an explicit opt-out. */
.techie-icon-pills--dicon-none .techie-icon-pills__media--auto,
.techie-icon-pills__media--none {
	display: none;
}

.techie-icon-pills--no-icons .techie-icon-pills__item .techie-icon-pills__media,
.techie-icon-pills--no-icons .techie-icon-pills__item img,
.techie-icon-pills--no-icons .techie-icon-pills__item::before {
	display: none;
}

.techie-icon-pills--no-icons .techie-icon-pills__item {
	gap: 0;
}

/* Icon position */

.techie-icon-pills--ipos-right .techie-icon-pills__item {
	flex-direction: row-reverse;
}

.techie-icon-pills--ipos-right .techie-icon-pills__badge {
	margin-left: 0;
	margin-right: auto;
}

.techie-icon-pills--ipos-top .techie-icon-pills__item {
	flex-direction: column;
	text-align: center;
}

.techie-icon-pills--ipos-top .techie-icon-pills__badge {
	margin-left: 0;
}

/* ---------------------------------------------------------------
   Built-in icon glyphs, drawn as CSS masks

   The container sets --techie-icon-mask for the group default; a
   per-pill .techie-ip-glyph--<name> class sets the same property on
   the glyph itself, which naturally wins over the inherited value.
   One colour, no icon font, no sprite request.
   --------------------------------------------------------------- */

.techie-ip-glyph {
	background-color: var(--techie-icon-ink, transparent);
	display: block;
	height: calc(var(--techie-icon-size) * .56);
	width: calc(var(--techie-icon-size) * .56);
	-webkit-mask-image: var(--techie-icon-mask, none);
	mask-image: var(--techie-icon-mask, none);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.techie-ip-glyph--none {
	--techie-icon-mask: none;
	--techie-icon-ink: transparent;
	display: none;
}

.techie-icon-pills--dicon-check,
.techie-ip-glyph--check {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20%206.5%209.2%2017.3%204%2012.1%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-check-circle,
.techie-ip-glyph--check-circle {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229.2%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M16.2%209.2%2010.8%2014.8%207.8%2011.9%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-check-square,
.techie-ip-glyph--check-square {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2218%22%20height=%2218%22%20rx=%224.5%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M16.3%209.3%2010.9%2014.9%207.9%2012%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-verified,
.techie-ip-glyph--verified {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202.6l2.3%201.8%202.9-.3.9%202.8%202.5%201.5-.9%202.8.9%202.8-2.5%201.5-.9%202.8-2.9-.3L12%2021.4l-2.3-1.8-2.9.3-.9-2.8L3.4%2015l.9-2.8-.9-2.8%202.5-1.5.9-2.8%202.9.3z%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M15.7%209.9%2010.9%2014.9%208.3%2012.3%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-cross,
.techie-ip-glyph--cross {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M18%206%206%2018M6%206l12%2012%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-cross-circle,
.techie-ip-glyph--cross-circle {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229.2%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M15.2%208.8%208.8%2015.2M8.8%208.8l6.4%206.4%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-plus,
.techie-ip-glyph--plus {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%205v14M5%2012h14%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-minus,
.techie-ip-glyph--minus {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M5%2012h14%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-dot,
.techie-ip-glyph--dot {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%225%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-star,
.techie-ip-glyph--star {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202.6l2.9%205.9%206.5.95-4.7%204.6%201.1%206.45L12%2017.45%206.2%2020.5l1.1-6.45-4.7-4.6%206.5-.95z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-heart,
.techie-ip-glyph--heart {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%2020.7%204.3%2013a4.9%204.9%200%200%201%207-6.9l.7.7.7-.7a4.9%204.9%200%200%201%207%206.9z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-arrow-right,
.techie-ip-glyph--arrow-right {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4.5%2012h15M13.2%205.7%2019.5%2012l-6.3%206.3%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-chevron-right,
.techie-ip-glyph--chevron-right {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M9%205.5%2015.5%2012%209%2018.5%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-shield,
.techie-ip-glyph--shield {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202.3%203.8%205.9v5.7c0%204.9%203.4%208.6%208.2%2010.1%204.8-1.5%208.2-5.2%208.2-10.1V5.9z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-bolt,
.techie-ip-glyph--bolt {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M13.6%202%204%2013.6h5.6L8.4%2022%2020%2010.4h-5.6z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-sparkle,
.techie-ip-glyph--sparkle {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%202.2l2.35%206.45L20.8%2011l-6.45%202.35L12%2019.8l-2.35-6.45L3.2%2011l6.45-2.35z%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-lock,
.techie-ip-glyph--lock {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Crect%20x=%224.4%22%20y=%2210.4%22%20width=%2215.2%22%20height=%2210.6%22%20rx=%223%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M7.9%2010.4V7.7a4.1%204.1%200%200%201%208.2%200v2.7%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-clock,
.techie-ip-glyph--clock {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229.2%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M12%206.8V12l3.6%202.2%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

.techie-icon-pills--dicon-info,
.techie-ip-glyph--info {
	--techie-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229.2%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M12%2011.2v5.2%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20fill=%22none%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Ccircle%20cx=%2212%22%20cy=%227.8%22%20r=%221.3%22%20fill=%22%23000%22/%3E%3C/svg%3E");
	--techie-icon-ink: var(--techie-icon-color, #111827);
}

/* ---------------------------------------------------------------
   Templates

   A template owns the pill's surface — background, border, shadow,
   dividers — and nothing else. Padding, colours, radius, icon and
   typography controls keep working on every template, so picking
   one narrows the look without taking the panel away.
   --------------------------------------------------------------- */

/* Checklist: bare ticked claims, the row that sits under a hero. */
.techie-icon-pills--skin-checklist .techie-icon-pills__item {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.techie-icon-pills--skin-checklist .techie-icon-pills__item:hover {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

.techie-icon-pills--skin-checklist .techie-icon-pills__item .techie-icon-pills__media {
	border-radius: 8px;
}

/* Card: a raised surface for feature grids. */
.techie-icon-pills--skin-card .techie-icon-pills__item {
	border-radius: 14px;
	box-shadow: var(--techie-shadow, 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .06));
}

/* Glass: translucent, for use over imagery. */
.techie-icon-pills--skin-glass .techie-icon-pills__item {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .28);
	border-width: 1px;
}

.techie-icon-pills--skin-glass .techie-icon-pills__item .techie-icon-pills__media {
	background: rgba(255, 255, 255, .18);
}

/* Compact: small inline tags and filter chips. */
.techie-icon-pills--skin-compact .techie-icon-pills__item {
	--techie-icon-gap: 7px;
	--techie-title-size: 13px;
}

.techie-icon-pills--skin-compact .techie-icon-pills__item .techie-icon-pills__media {
	--techie-icon-size: 18px;
	background: transparent;
	border: 0;
}

/* Underline: no surface, an accent rule on hover. */
.techie-icon-pills--skin-underline .techie-icon-pills__item {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
}

.techie-icon-pills--skin-underline .techie-icon-pills__item:hover {
	background: transparent;
	border-bottom-color: var(--techie-accent);
	box-shadow: none;
	transform: none;
}

.techie-icon-pills--skin-underline .techie-icon-pills__item .techie-icon-pills__media {
	background: transparent;
	border: 0;
}

/* Stacked: icon above the label, for feature strips. */
.techie-icon-pills--skin-stacked .techie-icon-pills__item {
	--techie-icon-gap: 10px;
	flex-direction: column;
	text-align: center;
}

.techie-icon-pills--skin-stacked .techie-icon-pills__body {
	align-items: center;
}

/* List: separated rows — spec sheets, "what's included", contact blocks. */
.techie-icon-pills--skin-list .techie-icon-pills__item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--techie-border-color);
	border-radius: 0;
	box-shadow: none;
	justify-content: flex-start;
	width: 100%;
}

.techie-icon-pills--skin-list .techie-icon-pills__item:hover {
	background: transparent;
	transform: none;
}

.techie-icon-pills--skin-list:not(.techie-icon-pills--grid) {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
}

.techie-icon-pills--skin-list:not(.techie-icon-pills--grid) .techie-icon-pills__item:last-child {
	border-bottom: 0;
}

/* Divided: one inline row with hairlines between items — contact strips. */
.techie-icon-pills--skin-divided {
	gap: 0;
}

.techie-icon-pills--skin-divided .techie-icon-pills__item {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.techie-icon-pills--skin-divided .techie-icon-pills__item + .techie-icon-pills__item {
	border-left: 1px solid var(--techie-border-color);
}

.techie-icon-pills--skin-divided .techie-icon-pills__item:hover {
	background: transparent;
	transform: none;
}

/* ---------------------------------------------------------------
   Titles on one line

   A pill that wraps to two lines reads as a broken button rather
   than a tag. Grid, stack and stacked opt back out, since a fixed
   column width is the whole point there.
   --------------------------------------------------------------- */

.techie-icon-pills--nowrap .techie-icon-pills__title {
	white-space: nowrap;
}

.techie-icon-pills--nowrap.techie-icon-pills--grid .techie-icon-pills__title,
.techie-icon-pills--nowrap.techie-icon-pills--stack .techie-icon-pills__title,
.techie-icon-pills--nowrap.techie-icon-pills--skin-stacked .techie-icon-pills__title,
.techie-icon-pills--nowrap.techie-icon-pills--skin-list .techie-icon-pills__title {
	white-space: normal;
}

/* ---------------------------------------------------------------
   Responsive

   Columns are per-breakpoint rather than hard-coded, and a long
   inline row can become a swipeable strip instead of a tall stack.
   --------------------------------------------------------------- */

@media (max-width: 849px) {
	.techie-icon-pills--grid {
		grid-template-columns: repeat(var(--techie-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 549px) {
	.techie-icon-pills--grid {
		grid-template-columns: repeat(var(--techie-columns-mobile), minmax(0, 1fr));
	}

	/* Wrap (default): pills fall onto their own lines, left aligned. */
	.techie-icon-pills--mobile-wrap {
		justify-content: flex-start;
	}

	/* Scroll: keep the single row and let the finger move it. */
	.techie-icon-pills--mobile-scroll:not(.techie-icon-pills--grid) {
		flex-wrap: nowrap;
		margin-inline: calc(var(--techie-container-padding) * -1);
		overflow-x: auto;
		padding-inline: var(--techie-container-padding);
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.techie-icon-pills--mobile-scroll::-webkit-scrollbar {
		display: none;
	}

	.techie-icon-pills--mobile-scroll:not(.techie-icon-pills--grid) .techie-icon-pills__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Full: every pill takes the width, so taps are easy to hit. */
	.techie-icon-pills--mobile-full:not(.techie-icon-pills--grid) {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.techie-icon-pills--mobile-full:not(.techie-icon-pills--grid) .techie-icon-pills__item {
		justify-content: flex-start;
		width: 100%;
	}
}

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

.techie-icon-pills__item:focus-visible {
	outline: 2px solid var(--techie-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.techie-icon-pills__item {
		transition: none;
	}

	.techie-icon-pills__item:hover {
		transform: none;
	}
}