.techie-cards {
	--techie-accent: #ff5c35;
	--techie-cols: 2;
	--techie-cols-tablet: 2;
	--techie-cols-mobile: 1;
	--techie-gap: 26px;
	--techie-card-pad: 30px;
	--techie-card-bg: #fff;
	--techie-title: #16181d;
	--techie-text: #5a6270;
	--techie-title-size: 20px;
	--techie-border-size: 1px;
	--techie-border-color: #e8eaf0;
	--techie-radius: 16px;
	--techie-icon-size: 40px;
	--techie-icon-color: var(--techie-accent);
	--techie-icon-bg: transparent;
	--techie-icon-box: 0;
	--techie-icon-radius: 12px;
	--techie-btn-text: #fff;
	--techie-margin-top: 0;
	--techie-margin-bottom: 0;
	box-sizing: border-box;
	border: 0;
	margin: var(--techie-margin-top) 0 var(--techie-margin-bottom);
}

/* Opt-in border around the whole container (off by default) */
.techie-cards--container-bordered {
	border: var(--techie-cont-border-size, 1px) solid var(--techie-cont-border-color, #e8eaf0);
	border-radius: var(--techie-cont-radius, 18px);
	padding: var(--techie-cont-padding, 24px);
}

.techie-cards--container-padded {
	padding: var(--techie-cont-padding, 0);
}

.techie-cards--container-rounded {
	border-radius: var(--techie-cont-radius, 18px);
}

.techie-cards *,
.techie-cards *::before,
.techie-cards *::after {
	box-sizing: border-box;
}

.techie-cards {
	position: relative;
}

/* ---- Layout (applied to the track that holds the cards) ---- */
.techie-cards--grid .techie-cards__track {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(var(--techie-cols), minmax(0, 1fr));
}

.techie-cards--list .techie-cards__track {
	display: flex;
	flex-direction: column;
	gap: var(--techie-gap);
}

/* ---- Icon / media position (icon sits with the title in the header) ---- */
.techie-card__header {
	display: flex;
}

.techie-card__heading {
	min-width: 0;
}

.techie-cards--icon-top .techie-card__header {
	flex-direction: column !important;
}

.techie-cards--icon-top .techie-card__media {
	margin-bottom: 18px;
}

.techie-cards--icon-bottom .techie-card__header {
	flex-direction: column-reverse !important;
}

.techie-cards--icon-bottom .techie-card__media {
	margin-bottom: 0 !important;
	margin-top: 18px;
}

.techie-cards--icon-left .techie-card__header,
.techie-cards--icon-right .techie-card__header {
	align-items: center;
	flex-direction: row !important;
	gap: 16px;
}

.techie-cards--icon-right .techie-card__header {
	flex-direction: row-reverse !important;
}

.techie-cards--icon-left .techie-card__media,
.techie-cards--icon-right .techie-card__media {
	align-self: center !important;
	flex: 0 0 auto;
	margin: 0 !important;
}

.techie-cards--icon-left .techie-card__heading,
.techie-cards--icon-right .techie-card__heading {
	flex: 1 1 auto;
	min-width: 0;
}

/* In side layouts an image must not take the full width or it squeezes the
   text into a truncated column; give it a definite, contained width. */
.techie-cards--icon-left .techie-card__media--image,
.techie-cards--icon-right .techie-card__media--image {
	flex: 0 0 auto;
	width: var(--techie-img-w, 120px);
}

/* ---- Card shell ---- */
.techie-card {
	background: var(--techie-card-bg);
	border-radius: var(--techie-radius, 16px);
	overflow: hidden !important;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: -webkit-radial-gradient(white, black);
	color: var(--techie-text);
	display: flex;
	flex-direction: column;
	padding: var(--techie-card-pad);
	position: relative;
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.techie-cards--bordered .techie-card {
	border: var(--techie-border-size) solid var(--techie-border-color);
}

.techie-cards--has-min .techie-card {
	min-height: var(--techie-card-min);
}

.techie-cards--equal .techie-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.techie-cards--equal .techie-card__footer {
	margin-top: auto;
}

/* Alignment */
.techie-cards--align-left .techie-card {
	text-align: left;
}

.techie-cards--align-left .techie-card__header {
	align-items: flex-start;
	justify-content: flex-start;
}

.techie-cards--align-left .techie-card__media {
	align-self: flex-start;
}

.techie-cards--align-left .techie-card__buttons {
	justify-content: flex-start;
}

.techie-cards--align-center .techie-card {
	text-align: center;
}

.techie-cards--align-center .techie-card__header {
	align-items: center;
	justify-content: center;
}

.techie-cards--align-center .techie-card__media {
	align-self: center;
}

.techie-cards--align-center .techie-card__buttons {
	justify-content: center;
}

.techie-cards--align-right .techie-card {
	text-align: right;
}

.techie-cards--align-right .techie-card__header {
	align-items: flex-end;
	justify-content: flex-end;
}

.techie-cards--align-right .techie-card__media {
	align-self: flex-end;
}

.techie-cards--align-right .techie-card__buttons {
	justify-content: flex-end;
}

.techie-cards--icon-left.techie-cards--align-center .techie-card__header,
.techie-cards--icon-right.techie-cards--align-center .techie-card__header {
	justify-content: center;
}

.techie-cards--icon-left.techie-cards--align-right .techie-card__header,
.techie-cards--icon-right.techie-cards--align-right .techie-card__header {
	justify-content: flex-end;
}

/* Shadow */
.techie-cards--shadow-soft .techie-card {
	box-shadow: var(--techie-shadow-sm);
}

.techie-cards--shadow-strong .techie-card {
	box-shadow: var(--techie-shadow-md);
}

/* Hover */
.techie-cards--hover-lift .techie-card:hover {
	box-shadow: var(--techie-shadow-md);
	transform: translateY(-6px);
}

.techie-cards--hover-glow .techie-card:hover {
	border-color: var(--techie-accent);
	box-shadow: 0 14px 40px color-mix(in srgb, var(--techie-accent), transparent 78%);
}

/* ---- Media ---- */
.techie-card__media {
	align-items: center;
	color: var(--techie-icon-color);
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	margin-bottom: 18px;
	max-width: 100%;
	width: auto;
}

.techie-card__media--svg,
.techie-card__media--text {
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	max-width: 100%;
	width: auto;
}

.techie-card__media--svg svg,
.techie-card__media--text span {
	height: var(--techie-icon-size);
	max-height: var(--techie-icon-size);
	max-width: var(--techie-icon-size);
	width: var(--techie-icon-size);
}

.techie-card__media--svg svg {
	display: block;
}

.techie-card__media--text span {
	align-items: center;
	color: var(--techie-icon-color);
	display: inline-flex;
	font-size: calc(var(--techie-icon-size) * .72);
	justify-content: center;
	line-height: 1;
}

.techie-card__media--image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	width: 100%;
}

.techie-card__media--image .techie-card__img {
	border-radius: var(--techie-img-radius, 12px);
	display: block;
	height: var(--techie-img-h, auto);
	margin-left: auto;
	margin-right: auto;
	max-height: var(--techie-img-max, 320px);
	max-width: 100%;
	object-fit: var(--techie-img-fit, cover);
	width: var(--techie-img-w, 100%);
}

/* Icon box background */
.techie-cards--icon-boxed .techie-card__media--svg,
.techie-cards--icon-boxed .techie-card__media--text {
	background: var(--techie-icon-bg);
	border-radius: var(--techie-icon-radius);
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: var(--techie-icon-box);
	width: auto;
}

/* SVG recolor (toggleable). Preserves fill="none" so outline icons stay outlined. */
.techie-cards--recolor .techie-card__media--svg svg {
	color: var(--techie-icon-color);
	fill: var(--techie-icon-color);
}

.techie-cards--recolor .techie-card__media--svg svg *:not([fill="none"]) {
	fill: var(--techie-icon-color);
}

.techie-cards--recolor .techie-card__media--svg svg [stroke]:not([stroke="none"]) {
	stroke: var(--techie-icon-color);
}

/* ---- Text ---- */
.techie-card__title {
	color: var(--techie-title);
	font-size: var(--techie-title-size);
	line-height: 1.25;
	margin: 0;
}

.techie-card__title-arrow {
	align-items: center;
	color: currentColor;
	display: inline-flex;
	margin-left: 6px;
	transition: transform .2s ease;
	vertical-align: middle;
}

.techie-card:hover .techie-card__title-arrow {
	transform: translateX(3px);
}

.techie-card__subtitle {
	color: var(--techie-text);
	font-size: 14px;
	margin: 6px 0 0;
	opacity: .85;
}

.techie-card__text {
	margin-top: 12px;
}

.techie-card__text > :first-child {
	margin-top: 0;
}

.techie-card__text > :last-child {
	margin-bottom: 0;
}

.techie-card__features {
	counter-reset: techie-item;
	display: grid;
	gap: var(--techie-list-gap, 12px);
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.techie-card__features li {
	align-items: baseline;
	display: flex;
	gap: 12px;
	line-height: 1.5;
}

.techie-card__features li::before {
	color: var(--techie-marker, var(--techie-accent));
	flex: 0 0 auto;
	font-weight: 700;
}

.techie-cards--align-center .techie-card__features {
	margin-inline: auto;
	text-align: left;
	width: fit-content;
}

/* ---- Checklist marker styles ---- */
.techie-cards--marker-check .techie-card__features li::before {
	content: "\2713";
	font-size: 15px;
	font-weight: 800;
}

.techie-cards--marker-bullet .techie-card__features li::before {
	content: "\2022";
	font-size: 18px;
}

.techie-cards--marker-dash .techie-card__features li::before {
	content: "\2013";
	font-weight: 800;
}

.techie-cards--marker-arrow .techie-card__features li::before {
	content: "\2192";
	font-weight: 800;
}

.techie-cards--marker-number .techie-card__features li {
	counter-increment: techie-item;
}

.techie-cards--marker-number .techie-card__features li::before {
	content: counter(techie-item) ".";
	min-width: 1.3em;
	text-align: right;
}

.techie-cards--marker-none .techie-card__features li::before {
	display: none;
}

/* ---- Footer ---- */
.techie-card__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	justify-content: space-between;
	margin-top: 20px;
}

.techie-cards--divided .techie-card__footer {
	border-top: 1px solid var(--techie-border-color);
	margin-top: 22px;
	padding-top: 20px;
}

.techie-card__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---- Buttons ---- */
.techie-card__btn {
	align-items: center;
	border: 2px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	padding: 10px 20px;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.techie-card__btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.techie-card__btn--solid {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: var(--techie-btn-text);
}

.techie-card__btn--outline {
	background: transparent;
	border-color: var(--techie-accent);
	color: var(--techie-accent);
}

.techie-card__btn--outline:hover {
	background: var(--techie-accent);
	color: var(--techie-btn-text);
}

.techie-card__btn--ghost {
	background: color-mix(in srgb, var(--techie-accent), #fff 86%);
	color: var(--techie-accent);
}

.techie-card__btn--link {
	background: transparent;
	border: 0;
	color: var(--techie-accent);
	padding-inline: 0;
}

/* ---- Learn more control ---- */
.techie-card__learn {
	align-items: center;
	background: none;
	border: 0;
	color: var(--techie-title);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	gap: 10px;
	padding: 0;
}

.techie-card__learn:hover {
	color: var(--techie-accent);
}

.techie-card__arrow {
	background: currentColor;
	height: 2px;
	position: relative;
	transition: transform .2s ease;
	width: 16px;
}

.techie-card__arrow::after {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 7px;
	position: absolute;
	right: -1px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 7px;
}

/* Reset generic arrow styles inside feature preset (SVG arrows used instead) */
.techie-cards--preset-feature .techie-card__arrow {
	background: none !important;
	height: auto !important;
	width: auto !important;
}

.techie-cards--preset-feature .techie-card__arrow::after {
	display: none !important;
	content: "" !important;
}

.techie-card__learn:hover .techie-card__arrow {
	transform: translateX(3px);
}

.techie-card__learn[aria-expanded="true"] .techie-card__arrow {
	transform: rotate(90deg);
}

/* ---- Accordion panel (JS-enhanced) ---- */
.techie-cards[data-techie-js] .techie-card__more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s ease;
}

.techie-cards[data-techie-js] .techie-card__more.is-open {
	grid-template-rows: 1fr;
	margin-top: 16px;
}

.techie-card__more-inner {
	min-height: 0;
	overflow: hidden;
}

.techie-card__more-inner > :first-child {
	margin-top: 0;
}

.techie-card__more-inner > :last-child {
	margin-bottom: 0;
}

/* ---- Popover (contained within the card) ---- */
.techie-card__popover[hidden] {
	display: none;
}

.techie-card__popover {
	background: var(--techie-card-bg, #fff);
	border-radius: inherit;
	box-shadow: var(--techie-shadow-sm);
	color: var(--techie-text);
	display: flex;
	flex-direction: column;
	inset: 0;
	overflow: auto;
	padding: var(--techie-card-pad);
	position: absolute;
	text-align: left;
	z-index: 6;
	animation: techie-card-pop .18s ease;
}

@keyframes techie-card-pop {
	from { opacity: 0; transform: scale(.98); }
	to { opacity: 1; transform: none; }
}

.techie-card__popover-close {
	background: none;
	border: 0;
	color: #8a90a0;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 16px;
	top: 12px;
}

.techie-card__popover-close:hover {
	color: var(--techie-title);
}

.techie-card__popover-title {
	color: var(--techie-title);
	font-size: var(--techie-title-size);
	margin: 0 0 12px;
	padding-right: 24px;
}

.techie-card__popover-content > :first-child {
	margin-top: 0;
}

.techie-card__popover-content > :last-child {
	margin-bottom: 0;
}



/* ==================== IMAGE SHAPES ==================== */
/* Circle + square use an explicit avatar size so they always render at a
   correct, predictable size — including inside the UX Builder where the
   attachment is injected without our width/height styles. */
.techie-cards--img-circle .techie-card__media--image,
.techie-cards--img-square .techie-card__media--image {
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	position: relative;
	width: var(--techie-avatar-size, 96px);
}

.techie-cards--img-circle .techie-card__media--image .techie-card__img,
.techie-cards--img-square .techie-card__media--image .techie-card__img {
	display: block;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	min-height: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.techie-cards--img-circle .techie-card__media--image {
	border-radius: 50%;
}

.techie-cards--img-circle .techie-card__media--image .techie-card__img {
	border-radius: 50%;
}

.techie-cards--img-square .techie-card__media--image {
	border-radius: var(--techie-img-radius, 16px);
}

.techie-cards--img-cover .techie-card__media--image {
	width: 100%;
}

.techie-cards--img-cover .techie-card__img {
	height: var(--techie-img-h, 200px);
	max-height: none;
	object-fit: cover;
	width: 100%;
}


/* ==================== SLIDER ARROW STYLES ==================== */
.techie-cards--arrows-square .techie-cards__arrow {
	border-radius: 10px;
}

.techie-cards--arrows-ghost .techie-cards__arrow {
	background: color-mix(in srgb, var(--techie-accent), transparent 88%);
	border-color: transparent;
	box-shadow: none;
}

.techie-cards--arrows-ghost .techie-cards__arrow:hover {
	background: var(--techie-accent);
	color: #fff;
}

.techie-cards--arrows-line .techie-cards__arrow {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.techie-cards--arrows-line .techie-cards__arrow:hover {
	color: var(--techie-accent);
	transform: translateY(-50%) scale(1.15);
}

.techie-cards--arrows-pill .techie-cards__arrow {
	border-radius: 999px;
	width: 66px;
}

.techie-cards--arrows-outline .techie-cards__arrow {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 55%);
	box-shadow: none;
}

.techie-cards--arrows-outline .techie-cards__arrow:hover {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
}

.techie-cards--arrows-soft .techie-cards__arrow {
	background: color-mix(in srgb, var(--techie-accent), #fff 82%);
	border-color: transparent;
	box-shadow: none;
}

.techie-cards--arrows-soft .techie-cards__arrow:hover {
	background: var(--techie-accent);
	color: #fff;
}

.techie-cards--arrows-floating .techie-cards__arrow {
	border-color: transparent;
	box-shadow: var(--techie-shadow-lg);
}

.techie-cards--arrows-floating .techie-cards__arrow:hover {
	box-shadow: var(--techie-shadow-xl);
	transform: translateY(-50%) scale(1.08);
}

/* ==================== SLIDER BULLET STYLES ==================== */
/* Base dot is the expanding pill; variants override shape/behaviour. */
.techie-cards--dots-dash .techie-cards__dot,
.techie-cards--dots-dash .techie-cards__dot.is-active {
	border-radius: 999px;
	height: 4px;
	width: 20px;
}

.techie-cards--dots-circle .techie-cards__dot,
.techie-cards--dots-circle .techie-cards__dot.is-active {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.techie-cards--dots-square .techie-cards__dot,
.techie-cards--dots-square .techie-cards__dot.is-active {
	border-radius: 3px;
	height: 10px;
	width: 10px;
}

.techie-cards--dots-line .techie-cards__dot,
.techie-cards--dots-line .techie-cards__dot.is-active {
	border-radius: 0;
	height: 2px;
	width: 26px;
}

.techie-cards--dots-ring .techie-cards__dot {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 40%);
	height: 12px;
	width: 12px;
}

.techie-cards--dots-ring .techie-cards__dot.is-active {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	width: 12px;
}

.techie-cards--dots-number .techie-cards__dots {
	counter-reset: techie-card-dot;
}

.techie-cards--dots-number .techie-cards__dot {
	align-items: center;
	background: transparent;
	border-radius: 8px;
	color: color-mix(in srgb, var(--techie-accent), transparent 25%);
	counter-increment: techie-card-dot;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	height: auto;
	justify-content: center;
	min-width: 26px;
	width: auto;
}

.techie-cards--dots-number .techie-cards__dot::before {
	content: counter(techie-card-dot, decimal-leading-zero);
}

.techie-cards--dots-number .techie-cards__dot.is-active {
	background: color-mix(in srgb, var(--techie-accent), transparent 86%);
	color: var(--techie-accent);
	width: auto;
}

.techie-cards--dots-worm .techie-cards__dots {
	background: color-mix(in srgb, var(--techie-accent), transparent 82%);
	border-radius: 999px;
	padding: 5px 8px;
}

.techie-cards--dots-worm .techie-cards__dot {
	background: transparent;
	height: 8px;
	width: 8px;
}

.techie-cards--dots-worm .techie-cards__dot.is-active {
	background: var(--techie-accent);
	width: 26px;
}



/* ==================== FEATURE COVER (hover reveal) ==================== */
/* Cover image fills the card; title sits at the anchor edge and, on hover,
   the description + reveal link expand into view. Grid layout: give the card
   a fixed height and overlay the content. */* ==================== FEATURE COVER (HOVER REVEAL PRESET) ==================== */
/* Matches industry-slider.html choreography & structure exactly */

.techie-cards--preset-feature .techie-card {
	position: relative;
	height: var(--techie-feature-h, 500px) !important;
	min-height: var(--techie-feature-h, 500px) !important;
	border-radius: var(--techie-radius, 30px) !important;
	overflow: hidden !important;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: -webkit-radial-gradient(white, black);
	background: #12161F;
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
	isolation: isolate;
	transform: translateY(0);
	transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	user-select: none;
	border: 0 !important;
	color: #fff;
}

.techie-cards--preset-feature .techie-card:hover,
.techie-cards--preset-feature .techie-card:focus-within {
	transform: translateY(-10px);
	box-shadow: 0 48px 96px -34px rgba(0, 0, 0, 0.96), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* Background image fill */
.techie-cards--preset-feature .techie-card__media,
.techie-cards--preset-feature .techie-card__media--image,
.techie-cards--preset-feature .techie-card__media figure {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0;
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
	border-radius: inherit !important;
	overflow: hidden !important;
}

.techie-cards--preset-feature .techie-card__media img,
.techie-cards--preset-feature .techie-card__media--image .techie-card__img,
.techie-cards--preset-feature .techie-card__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	position: absolute !important;
	inset: 0 !important;
	display: block;
	border-radius: inherit !important;
	transform: scale(1.04);
	filter: saturate(1) brightness(1);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	pointer-events: none;
}

.techie-cards--preset-feature .techie-card:hover .techie-card__media img,
.techie-cards--preset-feature .techie-card:hover .techie-card__img {
	transform: scale(1.15);
	filter: saturate(1.08) brightness(1.02);
}

/* Gradient overlay */
.techie-cards--preset-feature .techie-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(5, 7, 12, 0.60) 0%, rgba(5, 7, 12, 0.08) 34%,
		rgba(5, 7, 12, 0.18) 58%, rgba(5, 7, 12, 0.88) 100%);
	transition: background 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.techie-cards--preset-feature .techie-card:hover .techie-card__overlay {
	background: linear-gradient(180deg,
		rgba(4, 6, 10, 0.92) 0%, rgba(4, 6, 10, 0.66) 38%,
		rgba(4, 6, 10, 0.74) 62%, rgba(4, 6, 10, 0.95) 100%);
}

/* Light sheen sweep */
.techie-cards--preset-feature .techie-card__sheen {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.14) 48%, transparent 64%);
	transform: translateX(-130%);
	transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.techie-cards--preset-feature .techie-card:hover .techie-card__sheen {
	transform: translateX(130%);
}

/* Inner border ring glow */
.techie-cards--preset-feature .techie-card__ring {
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	pointer-events: none;
	transition: box-shadow 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.techie-cards--preset-feature .techie-card:hover .techie-card__ring {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

/* Top Reveal Section */
.techie-cards--preset-feature .techie-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 32px var(--techie-card-pad, 30px) 0;
	pointer-events: none;
}

.techie-cards--preset-feature .techie-card__rule,
.techie-cards--preset-feature .techie-card__title-lg,
.techie-cards--preset-feature .techie-card__desc {
	opacity: 0;
	transform: translateY(-22px);
	transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* User requirement: card__rule must not show */
.techie-cards--preset-feature .techie-card__rule {
	display: none !important;
}

.techie-cards--preset-feature .techie-card__title-lg {
	font-weight: 600;
	font-size: var(--techie-title-size, 32px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: #fff;
	filter: blur(4px);
	margin: 0;
	transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.techie-cards--preset-feature .techie-card__desc {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.62;
	color: rgba(240, 243, 249, 0.85);
	max-width: 34ch;
}

/* Bottom Swap Footer */
.techie-cards--preset-feature .techie-card__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 120px;
	pointer-events: none;
}

.techie-cards--preset-feature .techie-card__name,
.techie-cards--preset-feature .techie-card__more {
	position: absolute;
	left: var(--techie-card-pad, 30px);
	right: var(--techie-card-pad, 30px);
	bottom: 30px;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	width: calc(100% - (var(--techie-card-pad, 30px) * 2));
}

.techie-cards--preset-feature .techie-card__name {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), filter 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.techie-cards--preset-feature .techie-card__name h3 {
	font-weight: 600;
	font-size: var(--techie-title-size, 32px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.techie-cards--preset-feature .techie-card__name .techie-card__ic {
	flex: 0 0 auto !important;
	width: 28px;
	height: 28px;
	color: #fff;
	transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.techie-cards--preset-feature .techie-card__more {
	opacity: 0;
	transform: translateY(-26px);
	transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.techie-cards--preset-feature .techie-card__more span {
	font-weight: 600;
	font-size: calc(var(--techie-title-size, 32px) * 0.9);
	letter-spacing: -0.01em;
	color: #fff;
	white-space: nowrap !important;
	flex: 0 1 auto;
}

.techie-cards--preset-feature .techie-card__more .techie-card__ic {
	flex: 0 0 auto !important;
	width: 28px;
	height: 28px;
	color: var(--techie-accent, #d8b98a);
	transform: translateX(0);
	transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover choreography triggers & delays */
.techie-cards--preset-feature .techie-card:hover .techie-card__title-lg,
.techie-cards--preset-feature .techie-card:hover .techie-card__desc {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

.techie-cards--preset-feature .techie-card:hover .techie-card__title-lg {
	transition-delay: 0.12s;
}

.techie-cards--preset-feature .techie-card:hover .techie-card__desc {
	transition-delay: 0.22s;
}

.techie-cards--preset-feature .techie-card:hover .techie-card__name {
	opacity: 0;
	transform: translateY(26px);
	filter: blur(6px);
}

.techie-cards--preset-feature .techie-card:hover .techie-card__more {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.34s;
	pointer-events: auto;
}

.techie-cards--preset-feature .techie-card:hover .techie-card__more .techie-card__ic {
	transform: translateX(7px);
	transition-delay: 0.34s;
}

/* Cover link: makes entire card clickable */
.techie-cards--preset-feature .techie-card__cover-link {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: block;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* ---- Slider-view overrides for Feature Cover preset ---- */
/* Prevents generic slider rules from overriding card height and borders */
.techie-cards--preset-feature.techie-cards--slider .techie-card {
	height: var(--techie-feature-h, 500px) !important;
	min-height: var(--techie-feature-h, 500px) !important;
	border: 0 !important;
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85) !important;
}

.techie-cards--preset-feature.techie-cards--slider .techie-card:hover {
	border: 0 !important;
	box-shadow: 0 48px 96px -34px rgba(0, 0, 0, 0.96), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
	transform: translateY(-10px);
}

.techie-cards--preset-feature.techie-cards--slider .techie-card__footer {
	margin-top: 0;
}

/* ==================== STACK DECK SLIDER ==================== */
/* Fanned deck: the active card is in front, the rest sit behind it offset
   down-right (JS positions each by depth). Matches the team-card reference. */
.techie-cards--slider-stack .techie-cards__viewport {
	overflow: visible;
	padding: 6px 74px 40px 6px;
}

.techie-cards--slider-stack .techie-cards__track {
	display: block;
	position: relative;
	transform: none !important;
}

.techie-cards--slider-stack .techie-card {
	left: 0;
	margin: 0 auto;
	max-width: min(80%, 300px);
	right: 0;
	transition: transform .55s var(--techie-ease), opacity .5s ease;
	will-change: transform, opacity;
}

/* Static fan via nth-child so the deck renders in the UX Builder and before
   JS loads. On the front end, cards.js overrides these with inline transforms
   relative to the active card for click/arrow interactivity. */
.techie-cards--slider-stack .techie-card:first-child {
	box-shadow: var(--techie-shadow-lg);
	position: relative;
	z-index: 50;
}

.techie-cards--slider-stack .techie-card:not(:first-child) {
	position: absolute;
	top: 0;
}

.techie-cards--slider-stack .techie-card:nth-child(2) {
	opacity: .9;
	transform: translate3d(20px, 14px, 0) scale(.95);
	z-index: 49;
}

.techie-cards--slider-stack .techie-card:nth-child(3) {
	opacity: .72;
	transform: translate3d(40px, 28px, 0) scale(.9);
	z-index: 48;
}

.techie-cards--slider-stack .techie-card:nth-child(4) {
	opacity: .5;
	transform: translate3d(60px, 42px, 0) scale(.85);
	z-index: 47;
}

.techie-cards--slider-stack .techie-card:nth-child(n+5) {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(60px, 42px, 0) scale(.85);
}

.techie-cards--slider-stack .techie-card:not(:first-child) {
	cursor: pointer;
}

.techie-cards--slider-stack .techie-card.is-active {
	box-shadow: var(--techie-shadow-lg);
}

/* ==================== CARD DESIGN PRESETS ==================== */


/* Profile / Team (image reference): centered circular avatar, name, meta,
   soft rounded card. Forces a round avatar regardless of image_shape. */
.techie-cards--preset-profile .techie-card {
	align-items: center;
	background: var(--techie-card-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 92%);
	border-radius: 24px;
	box-shadow: var(--techie-shadow-md);
	text-align: center;
	transition: box-shadow .3s var(--techie-ease), transform .3s var(--techie-ease);
}

.techie-cards--preset-profile .techie-card__header {
	align-items: center;
	gap: 18px;
	width: 100%;
}

.techie-cards--preset-profile:not(.techie-cards--icon-left):not(.techie-cards--icon-right):not(.techie-cards--icon-bottom) .techie-card__header {
	flex-direction: column;
}

.techie-cards--preset-profile .techie-card__media--image {
	aspect-ratio: 1 / 1;
	background: color-mix(in srgb, var(--techie-accent), #fff 78%);
	border: 5px solid color-mix(in srgb, var(--techie-accent), #fff 82%);
	border-radius: 50%;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: var(--techie-avatar-size, 112px);
}

/* Three-class selector + absolute fill: guarantees the photo crops to the
   circle regardless of the base image rule (height/width/max-height) or how
   the UX Builder injects the attachment. */
.techie-cards--preset-profile .techie-card__media--image .techie-card__img {
	border-radius: 50%;
	display: block;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	min-height: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/* Tinted disc behind the avatar, echoing the reference */
.techie-cards--preset-profile .techie-card__heading {
	align-items: center;
}

.techie-cards--preset-profile .techie-card__title {
	font-size: calc(var(--techie-title-size, 20px) * 1.02);
	font-weight: 700;
}

.techie-cards--preset-profile .techie-card__subtitle {
	color: color-mix(in srgb, var(--techie-text, #5a6270), transparent 10%);
}

.techie-cards--preset-profile .techie-card__body {
	align-items: center;
	width: 100%;
}

.techie-cards--preset-profile .techie-card__text {
	text-align: center;
}

.techie-cards--preset-profile .techie-card__features {
	text-align: left;
}

.techie-cards--preset-profile .techie-card:hover {
	box-shadow: var(--techie-shadow-xl);
	transform: translateY(-5px);
}

/* Profile in a center-focus slider: neighbours tuck behind + sit lower,
   echoing the fanned team-card reference. */
.techie-cards--preset-profile.techie-cards--slider-center .techie-card {
	flex-basis: min(64%, 340px);
	opacity: 1;
	transform: scale(.9) translateY(14px);
	z-index: 0;
}

.techie-cards--preset-profile.techie-cards--slider-center .techie-card:not(.is-active) {
	box-shadow: var(--techie-shadow-sm);
}

.techie-cards--preset-profile.techie-cards--slider-center .techie-card.is-active {
	opacity: 1;
	transform: none;
	z-index: 2;
}

.techie-cards--preset-profile.techie-cards--slider-center .techie-card:not(.is-active) .techie-card__body {
	opacity: .55;
}

/* Numbered + Arrow (image 4): auto number badge above title, circular
   arrow button. Uses a CSS counter so no markup change is needed. */
.techie-cards--preset-numbered {
	counter-reset: techie-card;
}

.techie-cards--preset-numbered .techie-card {
	background: var(--techie-card-bg, #f7f7f5);
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 92%);
	border-radius: 20px;
	counter-increment: techie-card;
	overflow: hidden;
	position: relative;
}

.techie-cards--preset-numbered .techie-card__header {
	position: relative;
}

.techie-cards--preset-numbered:not(.techie-cards--icon-left):not(.techie-cards--icon-right):not(.techie-cards--icon-bottom) .techie-card__header {
	flex-direction: column;
}

.techie-cards--preset-numbered .techie-card__heading::before {
	color: color-mix(in srgb, var(--techie-title, #16181d), transparent 45%);
	content: counter(techie-card, decimal-leading-zero);
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	margin-bottom: 14px;
}

.techie-cards--preset-numbered .techie-card__media {
	inset: 0 0 auto auto;
	opacity: .9;
	position: absolute;
}

.techie-cards--preset-numbered .techie-card__learn {
	background: #111;
	border-radius: 50%;
	color: #fff;
	height: 44px;
	justify-content: center;
	margin-top: 20px;
	padding: 0;
	width: 44px;
}

.techie-cards--preset-numbered .techie-card__learn span {
	display: none;
}

.techie-cards--preset-numbered .techie-card__arrow {
	margin: 0;
}

.techie-cards--preset-numbered .techie-card__arrow::after {
	border-color: #fff;
}

.techie-cards--preset-numbered .techie-card:hover {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-4px);
}

/* Gradient Feature (image 3): bold gradient surface, light text */
.techie-cards--preset-gradient .techie-card {
	background: linear-gradient(150deg, var(--techie-accent), color-mix(in srgb, var(--techie-accent), #7a1fff 55%));
	border: 0;
	border-radius: 24px;
	color: #fff;
	overflow: hidden;
	position: relative;
}

.techie-cards--preset-gradient .techie-card__title,
.techie-cards--preset-gradient .techie-card__subtitle,
.techie-cards--preset-gradient .techie-card__text {
	color: #fff;
}

.techie-cards--preset-gradient .techie-card__title {
	font-weight: 800;
	letter-spacing: -.01em;
}

.techie-cards--preset-gradient .techie-card__subtitle,
.techie-cards--preset-gradient .techie-card__text {
	opacity: .88;
}

.techie-cards--preset-gradient .techie-card__media--svg svg {
	color: rgba(255, 255, 255, .9);
}

.techie-cards--preset-gradient .techie-card:hover {
	box-shadow: 0 26px 60px color-mix(in srgb, var(--techie-accent), transparent 60%);
	transform: translateY(-4px);
}

/* Soft Glass (image 4 lower): frosted translucent panels */
.techie-cards--preset-glass .techie-card {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	background: linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .28));
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 22px;
	box-shadow: var(--techie-shadow-md);
}

.techie-cards--preset-glass .techie-card:hover {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-3px);
}

/* Spotlight Hover (image 2): neutral cards, the hovered one lifts + brightens */
.techie-cards--preset-spotlight .techie-card {
	background: color-mix(in srgb, var(--techie-card-bg, #fff), #f3f4f6 60%);
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 93%);
	border-radius: 22px;
	opacity: .82;
	transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.techie-cards--preset-spotlight .techie-card:hover {
	background: var(--techie-card-bg, #fff);
	box-shadow: var(--techie-shadow-lg);
	opacity: 1;
	transform: translateY(-6px) scale(1.02);
	z-index: 1;
}

/* Minimal Outline: flat, hairline border, accent on hover */
.techie-cards--preset-outline .techie-card {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 86%);
	border-radius: 16px;
	box-shadow: none;
}

.techie-cards--preset-outline .techie-card:hover {
	border-color: var(--techie-accent);
}

/* Elevated Shadow: borderless floating cards */
.techie-cards--preset-elevated .techie-card {
	background: var(--techie-card-bg, #fff);
	border: 0;
	border-radius: 20px;
	box-shadow: var(--techie-shadow-sm);
	transition: box-shadow .3s ease, transform .3s ease;
}

.techie-cards--preset-elevated .techie-card:hover {
	box-shadow: var(--techie-shadow-lg);
	transform: translateY(-5px);
}

/* ---- Slider view (transform-based infinite carousel) ---- */
.techie-cards--slider .techie-cards__track {
	align-items: stretch;
	display: flex;
	gap: var(--techie-gap);
	position: relative;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
	backface-visibility: hidden;
}

.techie-cards--transition-premium .techie-cards__track {
	transition: transform 0.7s cubic-bezier(0.45, 0, 0.15, 1) !important;
}

.techie-cards--slider .techie-cards__viewport {
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
	cursor: grab;
	user-select: none;
}

.techie-cards--slider .techie-cards__viewport.dragging {
	cursor: grabbing;
}

.techie-cards--slider .techie-card {
	flex: 0 0 calc((100% - (var(--techie-cols) - 1) * var(--techie-gap)) / var(--techie-cols));
	height: auto;
	min-width: 0;
}

/* Equal-height internals: body fills, footer anchors */
.techie-cards--slider .techie-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.techie-cards--slider .techie-card__footer {
	margin-top: auto;
}

/* Premium surface: subtle border, soft shadow, hover lift */
.techie-cards--slider .techie-card {
	border: 1px solid color-mix(in srgb, var(--techie-title, #16181d), transparent 92%);
	box-shadow: var(--techie-shadow-sm);
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.techie-cards--slider.techie-cards--bordered .techie-card {
	border: var(--techie-border-size) solid var(--techie-border-color);
}

.techie-cards--slider .techie-card:hover {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 55%);
	box-shadow: var(--techie-shadow-md);
	transform: translateY(-4px);
}

/* Peek: neighbours partially visible */
.techie-cards--slider-peek .techie-card {
	flex-basis: calc((100% - var(--techie-cols) * var(--techie-gap)) / var(--techie-cols));
}

/* Spaced: extra breathing room */
.techie-cards--slider-gap .techie-cards__track {
	gap: calc(var(--techie-gap) + 14px);
}

/* Center focus: active card emphasised, neighbours dimmed */
.techie-cards--slider-center .techie-card {
	flex-basis: min(80%, 520px);
	opacity: .5;
	transform: scale(.94);
	transition: opacity .4s ease, transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}

.techie-cards--slider-center .techie-card.is-active {
	opacity: 1;
	transform: none;
}

.techie-cards--slider-center .techie-card:hover {
	transform: translateY(-4px) scale(.94);
}

.techie-cards--slider-center .techie-card.is-active:hover {
	transform: translateY(-4px);
}

/* Arrows */
.techie-cards__viewport {
	position: relative;
}

.techie-cards__arrow {
	align-items: center;
	background: var(--techie-card-bg, #fff);
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 78%);
	border-radius: 50%;
	box-shadow: var(--techie-shadow-xs);
	color: var(--techie-accent);
	cursor: pointer;
	display: flex;
	height: 42px;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
	width: 42px;
	z-index: 4;
}

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

.techie-cards__arrow[hidden] {
	display: none;
}

.techie-cards__arrow:hover {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
	transform: translateY(calc(-50% - 1px));
}

/* Reserve side gutters on the viewport only when arrows are visible. */
.techie-cards--slider.is-arrows .techie-cards__viewport {
	padding-left: 60px;
	padding-right: 60px;
}

.techie-cards__arrow--prev {
	left: 0;
}

.techie-cards__arrow--next {
	right: 0;
}

.techie-cards__arrow::before {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 9px;
	width: 9px;
}

.techie-cards__arrow--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.techie-cards__arrow--next::before {
	transform: translateX(-2px) rotate(45deg);
}

/* Dots */
.techie-cards__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-left: 0;
	margin-right: 0;
	margin-top: 20px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.techie-cards__dots:empty {
	display: none;
}

.techie-cards__dot {
	appearance: none;
	background: color-mix(in srgb, var(--techie-accent), transparent 72%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 8px;
	margin: 0;
	min-height: 0;
	padding: 0;
	transition: background-color .2s ease, width .2s ease;
	width: 22px;
}

.techie-cards__dot.is-active {
	background: var(--techie-accent);
	width: 34px;
}

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

/* ---- Responsive ---- */
@media (max-width: 849px) {
	.techie-cards--grid .techie-cards__track {
		grid-template-columns: repeat(var(--techie-cols-tablet), minmax(0, 1fr));
	}

	.techie-cards--slider .techie-card {
		flex-basis: calc((100% - (var(--techie-cols-tablet) - 1) * var(--techie-gap)) / var(--techie-cols-tablet));
	}

	.techie-cards--slider-peek .techie-card {
		flex-basis: calc((100% - var(--techie-cols-tablet) * var(--techie-gap)) / var(--techie-cols-tablet));
	}

	.techie-card__title {
		font-size: var(--techie-title-size-tablet, var(--techie-title-size));
	}
}

/* Independent tablet band so arrow visibility can differ from mobile. */
@media (min-width: 550px) and (max-width: 849px) {
	.techie-cards--noarrows-tablet .techie-cards__arrow {
		display: none;
	}

	.techie-cards--noarrows-tablet.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 8px;
		padding-right: 8px;
	}
}

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

	.techie-cards--slider .techie-card {
		flex-basis: calc((100% - (var(--techie-cols-mobile) - 1) * var(--techie-gap)) / var(--techie-cols-mobile));
	}

	.techie-cards--slider-peek .techie-card,
	.techie-cards--slider-center .techie-card {
		flex-basis: 86%;
	}

	.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 42px;
		padding-right: 42px;
	}

	.techie-card__title {
		font-size: var(--techie-title-size-mobile, var(--techie-title-size-tablet, var(--techie-title-size)));
	}

	/* Arrows hidden on mobile (default): also reclaim the side gutter so cards
	   use the full width. */
	.techie-cards--noarrows-mobile .techie-cards__arrow {
		display: none;
	}

	.techie-cards--noarrows-mobile.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 6px;
		padding-right: 6px;
	}

	.techie-card__footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Desktop arrow hide */
@media (min-width: 850px) {
	.techie-cards--noarrows-desktop .techie-cards__arrow {
		display: none;
	}

	.techie-cards--noarrows-desktop.techie-cards--slider.is-arrows .techie-cards__viewport {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.techie-card,
	.techie-card__btn,
	.techie-card__arrow,
	.techie-card__popover,
	.techie-cards--slider-center .techie-card,
	.techie-cards[data-techie-js] .techie-card__more {
		animation: none;
		transition: none;
	}

	.techie-cards--slider .techie-cards__track {
		transition: none;
	}
}

/* =============================================================
   Icon Tile — soft badge, quiet border, decorative corner blob

   The reference layout for a "what the platform does" grid: a
   restrained white card where the only colour is the icon tile and
   a faint quarter-circle in the bottom corner, so six of them read
   as one calm block rather than six competing boxes.
   ============================================================= */

.techie-cards--preset-icon-tile .techie-card {
	background: var(--techie-card-bg, #fff);
	border: 1px solid var(--techie-border-color, #e6ecf5);
	border-radius: var(--techie-radius, 14px);
	overflow: hidden;
	position: relative;
}

/* The blob sits under the content and is clipped by the card's radius. */
.techie-cards--preset-icon-tile .techie-card::after {
	background: var(--techie-accent, #2563eb);
	border-radius: 999px 0 0 0;
	bottom: 0;
	content: "";
	height: 96px;
	opacity: .08;
	pointer-events: none;
	position: absolute;
	right: 0;
	width: 96px;
	z-index: 0;
}

.techie-cards--preset-icon-tile .techie-card > *:not(.techie-card__cover-link) {
	position: relative;
	z-index: 1;
}

.techie-cards--preset-icon-tile .techie-card__header {
	gap: 18px;
}

.techie-cards--preset-icon-tile:not(.techie-cards--icon-left):not(.techie-cards--icon-right):not(.techie-cards--icon-bottom) .techie-card__header {
	flex-direction: column;
}

.techie-cards--preset-icon-tile .techie-card__title {
	letter-spacing: -.01em;
	line-height: 1.35;
}

.techie-cards--preset-icon-tile .techie-card__text {
	line-height: 1.6;
}

.techie-cards--preset-icon-tile .techie-card:hover {
	border-color: var(--techie-accent, #2563eb);
}

/* =============================================================
   Numbered Badge — 01, 02, 03 in a soft tile above the title

   decimal-leading-zero is what keeps the tenth card reading "10"
   rather than "010", which is why the counter is not built by
   gluing a literal zero in front of it.
   ============================================================= */

.techie-cards--preset-steps {
	counter-reset: techie-card;
}

.techie-cards--preset-steps .techie-card {
	background: var(--techie-card-bg, #fff);
	border: 1px solid var(--techie-border-color, #e6ecf5);
	border-radius: var(--techie-radius, 14px);
	counter-increment: techie-card;
	position: relative;
}

.techie-cards--preset-steps .techie-card__header {
	gap: 14px;
}

.techie-cards--preset-steps:not(.techie-cards--icon-left):not(.techie-cards--icon-right):not(.techie-cards--icon-bottom) .techie-card__header {
	flex-direction: column;
}

.techie-cards--preset-steps .techie-card__heading::before {
	align-items: center;
	/* Plain rgba first so Safari below 16.2 gets a tint rather than
	   dropping the declaration and showing a bare number. */
	background: rgba(37, 99, 235, .1);
	background: color-mix(in srgb, var(--techie-accent, #2563eb) 12%, transparent);
	border-radius: 8px;
	color: var(--techie-accent, #2563eb);
	content: counter(techie-card, decimal-leading-zero);
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .06em;
	margin-bottom: 16px;
	min-width: 34px;
	padding: 6px 9px;
}

.techie-cards--preset-steps .techie-card__title {
	letter-spacing: -.01em;
	line-height: 1.3;
}

.techie-cards--preset-steps .techie-card__text {
	line-height: 1.6;
}

/* The numbered badge replaces the icon, so an icon left in place
   from a previous preset does not stack on top of it. */
.techie-cards--preset-steps .techie-card__media {
	display: none;
}

/* ============================================================
   PRESET: Bento Spotlight
   One tall spotlight card beside a grid of tiles. Every card
   emits the same markup (Cards::card_markup and card.html agree),
   and the rules below decide which one is the spotlight by
   position, so the builder preview matches the front end.
   ============================================================ */
.techie-cards--preset-bento {
	--techie-bento-row: 215px;
	--techie-bento-img: 112px;
	--techie-bento-hero: 1.55fr;
	--techie-bento-dot: 34px;
	--techie-bento-scrim: .92;
	--techie-bento-scrim-h: 78%;
	--techie-bento-fade: 0;
	--techie-bento-ink: 6, 17, 35;
}

.techie-cards--preset-bento.techie-cards--grid .techie-cards__track {
	align-items: stretch;
	grid-auto-rows: minmax(var(--techie-bento-row), auto);
}

.techie-cards--preset-bento.techie-cards--bento-left .techie-cards__track {
	grid-template-columns: var(--techie-bento-hero) repeat(2, minmax(0, 1fr));
}

.techie-cards--preset-bento.techie-cards--bento-right .techie-cards__track {
	grid-template-columns: repeat(2, minmax(0, 1fr)) var(--techie-bento-hero);
}

.techie-cards--bento-left .techie-card--bento:first-child {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.techie-cards--bento-right .techie-card--bento:first-child {
	grid-column: -2;
	grid-row: 1 / span 2;
}

/* ---- every bento card ---- */
.techie-card--bento {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.techie-bento__media {
	line-height: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Optional soft hand-off from the tile photo into the card surface (0 = off,
   the default). A two-stop fade leaves a visible line where it starts and
   washes the picture out halfway down, so the stops follow the same ease-out
   curve as the spotlight scrim: nothing at all at the top, solid at the base. */
.techie-card--bento .techie-bento__media::after {
	background: linear-gradient(
		to top,
		var(--techie-card-bg) 0%,
		color-mix(in srgb, var(--techie-card-bg), transparent 4%) 10%,
		color-mix(in srgb, var(--techie-card-bg), transparent 14%) 22%,
		color-mix(in srgb, var(--techie-card-bg), transparent 30%) 35%,
		color-mix(in srgb, var(--techie-card-bg), transparent 50%) 50%,
		color-mix(in srgb, var(--techie-card-bg), transparent 70%) 65%,
		color-mix(in srgb, var(--techie-card-bg), transparent 86%) 79%,
		color-mix(in srgb, var(--techie-card-bg), transparent 96%) 91%,
		transparent 100%
	);
	bottom: -1px;
	content: "";
	height: var(--techie-bento-fade);
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

/* Safari below 16.2 has no color-mix; a plain two-stop fade is still better
   than none, and this rule is simply skipped where color-mix is supported. */
@supports not (background: color-mix(in srgb, red, transparent 50%)) {
	.techie-card--bento .techie-bento__media::after {
		background: linear-gradient(to top, var(--techie-card-bg) 0%, transparent 100%);
	}
}

.techie-bento__media img,
.techie-bento__media .techie-card__img {
	border-radius: 0;
	display: block;
	height: 100%;
	margin: 0;
	max-height: none;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

.techie-bento__scrim {
	display: none;
}

.techie-bento__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.techie-bento__title {
	color: var(--techie-title);
	line-height: 1.22;
	margin: 0;
}

.techie-bento__text {
	margin: 0;
}

.techie-cards--preset-bento .techie-card__cover-link {
	-webkit-tap-highlight-color: transparent;
	display: block;
	inset: 0;
	position: absolute;
	text-decoration: none;
	z-index: 4;
}

/* ---- tile shape (the default for every card) ---- */
.techie-card--bento .techie-bento__media {
	height: var(--techie-bento-img);
}

.techie-card--bento .techie-bento__eyebrow {
	color: rgba(90, 107, 130, .95);
	color: color-mix(in srgb, var(--techie-text), transparent 6%);
	padding: var(--techie-card-pad) var(--techie-card-pad) 0;
}

.techie-card--bento .techie-bento__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 8px var(--techie-card-pad) var(--techie-card-pad);
}

.techie-card--bento .techie-bento__title {
	font-size: var(--techie-title-size);
	font-weight: 700;
	margin: 0 0 8px;
}

/* description on the left, round arrow centred beside it */
.techie-card--bento .techie-bento__row {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 14px;
	justify-content: space-between;
}

.techie-card--bento .techie-bento__text {
	color: var(--techie-text);
	font-size: 14px;
	line-height: 1.5;
	min-width: 0;
}

.techie-bento__arrow {
	align-items: center;
	border: 1px solid rgba(29, 99, 216, .22);
	border-color: color-mix(in srgb, var(--techie-accent), transparent 78%);
	border-radius: 999px;
	color: var(--techie-accent);
	display: inline-flex;
	flex: 0 0 auto;
	height: var(--techie-bento-dot);
	justify-content: center;
	transition: background-color .22s var(--techie-ease, ease), border-color .22s var(--techie-ease, ease), transform .22s var(--techie-ease, ease);
	width: var(--techie-bento-dot);
}

.techie-bento__arrow svg {
	height: 15px;
	width: 15px;
}

.techie-card--bento:hover .techie-bento__arrow,
.techie-card--bento:focus-within .techie-bento__arrow {
	background: rgba(29, 99, 216, .1);
	background: color-mix(in srgb, var(--techie-accent), transparent 90%);
	border-color: rgba(29, 99, 216, .5);
	border-color: color-mix(in srgb, var(--techie-accent), transparent 50%);
	transform: translateX(2px);
}

/* the CTA belongs to the spotlight only */
.techie-card--bento .techie-bento__cta {
	display: none;
}

/* ============ the spotlight card ============ */
.techie-cards--bento-left .techie-card--bento:first-child,
.techie-cards--bento-right .techie-card--bento:first-child {
	color: #fff;
	justify-content: flex-end;
	min-height: calc((var(--techie-bento-row) * 2) + var(--techie-gap));
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__media,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__media {
	height: 100%;
	inset: 0;
	position: absolute;
}

/* Rises from the bottom edge and eases out into the photo. The stops trace an
   ease-out curve rather than a straight ramp, because a two-stop linear fade
   reads as a flat slab of colour sitting under the image. The top of the card
   is left completely clear so the photo is never dulled. */
.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__scrim,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__scrim {
	background: linear-gradient(
		to top,
		rgba(var(--techie-bento-ink), 1) 0%,
		rgba(var(--techie-bento-ink), .94) 8%,
		rgba(var(--techie-bento-ink), .82) 18%,
		rgba(var(--techie-bento-ink), .65) 30%,
		rgba(var(--techie-bento-ink), .45) 44%,
		rgba(var(--techie-bento-ink), .27) 58%,
		rgba(var(--techie-bento-ink), .13) 72%,
		rgba(var(--techie-bento-ink), .04) 87%,
		rgba(var(--techie-bento-ink), 0) 100%
	);
	bottom: 0;
	display: block;
	height: var(--techie-bento-scrim-h);
	left: 0;
	opacity: var(--techie-bento-scrim);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: auto;
	z-index: 1;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__eyebrow,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__eyebrow {
	color: rgba(255, 255, 255, .82);
	text-shadow: 0 1px 10px rgba(var(--techie-bento-ink), .55);
	left: var(--techie-card-pad);
	padding: 0;
	position: absolute;
	top: var(--techie-card-pad);
	z-index: 3;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__body,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__body {
	flex: 0 0 auto;
	padding: var(--techie-card-pad);
	position: relative;
	z-index: 3;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__title,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__title {
	color: #fff;
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 12px;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__row,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__row {
	display: block;
	flex: 0 0 auto;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__arrow,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__arrow {
	display: none;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__text,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__text {
	color: rgba(255, 255, 255, .88);
	font-size: 15px;
	line-height: 1.55;
	max-width: 46ch;
}

.techie-cards--bento-left .techie-card--bento:first-child .techie-bento__cta,
.techie-cards--bento-right .techie-card--bento:first-child .techie-bento__cta {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	gap: 16px;
	margin-top: 26px;
	position: relative;
	text-decoration: none;
	z-index: 5;
}

.techie-bento__cta:hover,
.techie-bento__cta:focus {
	color: #fff;
}

.techie-bento__disc {
	align-items: center;
	background: var(--techie-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	transition: transform .22s var(--techie-ease, ease);
	width: 46px;
}

.techie-bento__disc svg {
	height: 19px;
	width: 19px;
}

.techie-bento__cta:hover .techie-bento__disc {
	transform: translateX(3px);
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
	.techie-cards--preset-bento.techie-cards--bento-left .techie-cards__track,
	.techie-cards--preset-bento.techie-cards--bento-right .techie-cards__track {
		grid-template-columns: repeat(var(--techie-cols-tablet, 2), minmax(0, 1fr));
	}

	.techie-cards--bento-left .techie-card--bento:first-child,
	.techie-cards--bento-right .techie-card--bento:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: var(--techie-bento-row);
	}
}

@media (max-width: 549px) {
	.techie-cards--preset-bento.techie-cards--bento-left .techie-cards__track,
	.techie-cards--preset-bento.techie-cards--bento-right .techie-cards__track {
		grid-template-columns: 1fr;
	}

	.techie-card--bento .techie-bento__row {
		align-items: flex-start;
	}
}

/* ---- Cover link (base) ----
   The card render always emits `.techie-card__cover-link` when a Card Link URL
   is set, but until now only the Feature and Bento presets gave it any CSS, so
   on every other preset it stayed a zero-size inline anchor and the card was
   not clickable. Fill the card here, and keep the card's own interactive
   elements above it so buttons and Learn More still work. */
.techie-card,
.techie-card__cover-link {
	position: relative;
}

.techie-card__cover-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.techie-card__cover-link:focus-visible {
	outline: var(--techie-focus-ring, 2px solid currentColor);
	outline-offset: -3px;
}

.techie-card__buttons,
.techie-card__btn,
.techie-card__learn,
.techie-card__more,
.techie-card__popover,
.techie-card__footer {
	position: relative;
	z-index: 4;
}