/* ==========================================================================
   AI FOR AI — widget styles
   Tokens come from the child theme's main.css. Fallbacks are supplied so the
   Elementor editor canvas still renders correctly before the theme CSS loads.
   ========================================================================== */

.ai-hero,
.ai-stats,
.ai-features,
.ai-logos,
.ai-erp,
.ai-gallery,
.ai-message,
.ai-compare,
.ai-split,
.ai-steps,
.ai-cta,
.ai-form,
.ai-plans,
.ai-quotes,
.ai-people {
	--_violet:      var(--ai-violet, #690DAC);
	--_violet-deep: var(--ai-violet-deep, #3F0151);
	--_orange:      var(--ai-orange, #F26522);
	--_ink:         var(--ai-ink, #14111F);
	--_slate:       var(--ai-slate, #5B5570);
	--_mist:        var(--ai-mist, #F7F5FA);
	--_line:        var(--ai-line, #E7E2EF);
	--_pos:         var(--ai-pos, #1F9D6B);
	--_neg:         var(--ai-neg, #D6417E);
	--_pos-rgb:     var(--ai-pos-rgb, 31, 157, 107);
	--_neg-rgb:     var(--ai-neg-rgb, 214, 65, 126);
	--_grad-cta:    var(--grad-cta, linear-gradient(100deg, #690DAC 0%, #F26522 100%));
	--_grad-dark:   var(--grad-dark, linear-gradient(160deg, #14111F 0%, #3F0151 100%));

	/* Gradient text for dark surfaces. The brand gradient starts at #690DAC,
	   which is only ~2:1 against the dark sections — unreadable. These lighter
	   stops keep the same violet-to-orange sweep at 6.8:1 and above. */
	--_grad-on-dark: linear-gradient(100deg, #C77DFF 0%, #F5821F 100%);
	--_ease:        var(--ease, cubic-bezier(.2, .8, .2, 1));
	--_container:   var(--container, 1240px);
}

/* --- Shared section shells ---------------------------------------------- */
.ai-hero__inner,
.ai-stats__inner,
.ai-features__inner,
.ai-logos__inner,
.ai-erp__inner,
.ai-gallery__inner,
.ai-message__inner,
.ai-compare__inner,
.ai-split__inner,
.ai-steps__inner,
.ai-cta__inner,
.ai-form__inner,
.ai-plans__inner,
.ai-quotes__inner,
.ai-people__inner {
	max-width: var(--_container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.is-mist  { background: var(--_mist); }
.is-light { background: var(--ai-white, #fff); }
.is-dark  { background: var(--_grad-dark); color: rgba(255, 255, 255, .8); }

/* Focus rings are deliberately NOT restyled here.
   Hello Elementor's reset already draws a 2px black outline plus a 4px white
   box-shadow at 2px offset on :focus-visible. That black-and-white double ring
   stays visible against every surface this page uses — white cards, mist, the
   dark gradient and the violet CTA panel alike. A single brand-coloured ring
   cannot make that claim: orange would sit at 3.2:1 on the gradient button's
   own fill, and near-invisible against the orange bloom. */

.is-dark h1,
.is-dark h2,
.is-dark h3 { color: #fff; }

.is-dark .ai-eyebrow { color: var(--_orange); }

/* Gradient-filled words need lighter stops on dark sections — see the
   --_grad-on-dark note above. */
.is-dark .ai-grad-text,
.is-dark .ai-step__num {
	background: var(--_grad-on-dark);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ==========================================================================
   Ambient section decor
   Soft brand-coloured orbs behind the section shells. Painted by the shell's
   own pseudo-elements, so no markup carries them and there is no image to
   load; `isolation` keeps the negative z-index inside the section instead of
   dropping it behind the page background.
   ========================================================================== */
.ai-features,
.ai-compare,
.ai-steps {
	position: relative;
	isolation: isolate;
	/* hidden, not clip: `clip` is the tidier choice but is unsupported in
	   Safari before 16, where the orbs would escape and give the whole page a
	   horizontal scrollbar. Nothing inside these sections is sticky, so the
	   scroll container `hidden` creates costs us nothing. */
	overflow: hidden;
}

.ai-features::before,
.ai-compare::before,
.ai-steps::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -22%;
	inset-inline-end: -10%;
	width: min(680px, 62vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(105, 13, 172, .13), transparent 66%);
	pointer-events: none;
}

.ai-features::after,
.ai-compare::after,
.ai-steps::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: -26%;
	inset-inline-start: -12%;
	width: min(560px, 55vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(242, 101, 34, .11), transparent 66%);
	pointer-events: none;
}

/* The dark gradient carries its own depth already, so the orbs there are
   brighter but thinner — enough to break the flat fill, not enough to touch
   text contrast. */
.is-dark.ai-features::before,
.is-dark.ai-compare::before,
.is-dark.ai-steps::before {
	background: radial-gradient(circle at center, rgba(179, 32, 140, .22), transparent 66%);
}

.is-dark.ai-features::after,
.is-dark.ai-compare::after,
.is-dark.ai-steps::after {
	background: radial-gradient(circle at center, rgba(242, 101, 34, .16), transparent 66%);
}

/* ==========================================================================
   Eyebrow, pill variant
   The dashed eyebrow reads as a caption above a heading. Where the label is
   the first thing on the page — the hero — it needs to read as a badge, so an
   icon turns it into a pill and the dash steps aside.
   ========================================================================== */
.ai-eyebrow.is-pill {
	padding: .5rem 1.05rem .5rem .8rem;
	border-radius: var(--r-pill, 999px);
	background: rgba(105, 13, 172, .07);
	border: 1px solid rgba(105, 13, 172, .16);
}

.ai-eyebrow.is-pill::before { display: none; }
.ai-eyebrow.is-pill svg { flex: none; color: var(--_orange); }

.is-dark .ai-eyebrow.is-pill {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ai-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(2.75rem, 6vw, 5rem);
	/* Deeper than the top: the proof card that follows is lifted back into
	   this space, and it needs clearance below the proof strip rather than
	   landing on it. Heroes with no card under them just breathe more. */
	padding-bottom: clamp(3.5rem, 7.5vw, 7rem);
}

/* The light hero carries the same brand energy as the dark one, but as a wash
   rather than a fill: a violet bloom top-right and a warm one bottom-right,
   both far from the copy column so body text keeps its full contrast. */
.ai-hero.is-light::before {
	content: "";
	position: absolute;
	inset: -45% -18% auto auto;
	width: 62vw;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(105, 13, 172, .13) 0%, transparent 62%);
	pointer-events: none;
}

.ai-hero.is-light::after {
	content: "";
	position: absolute;
	inset: auto -12% -40% auto;
	width: 48vw;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(242, 101, 34, .12) 0%, transparent 64%);
	pointer-events: none;
}

/* Gradient bloom behind the dark variant. Purely decorative. */
.ai-hero.is-dark::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 70vw;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(179, 32, 140, .38) 0%, transparent 62%);
	pointer-events: none;
}

.ai-hero.is-dark::after {
	content: "";
	position: absolute;
	inset: auto auto -35% -15%;
	width: 55vw;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(242, 101, 34, .25) 0%, transparent 62%);
	pointer-events: none;
}

.ai-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

/* Engineering-drawing grid, masked to a soft ellipse so it never reaches the
   text and never needs a second image request. */
.ai-hero.is-dark .ai-hero__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40% -25%;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 55% 55% at 32% 45%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 55% 55% at 32% 45%, #000, transparent 72%);
	pointer-events: none;
}

/* Same engineering-drawing grid on the light hero, at a violet tint and
   anchored behind the screenshot rather than the copy. */
.ai-hero.is-light .ai-hero__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40% -25%;
	background-image:
		linear-gradient(rgba(105, 13, 172, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(105, 13, 172, .055) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 48% 52% at 74% 45%, #000, transparent 70%);
	mask-image: radial-gradient(ellipse 48% 52% at 74% 45%, #000, transparent 70%);
	pointer-events: none;
}

/* The hero is the one block above the fold, so it animates itself on load
   rather than waiting for the scroll observer. `backwards` holds the start
   frame through the delay, so nothing flashes in before its turn. */
@keyframes ai-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ai-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.ai-hero__copy > * { animation: ai-rise .8s var(--_ease) backwards; }
.ai-hero__copy > *:nth-child(1) { animation-delay: .05s; }
.ai-hero__copy > *:nth-child(2) { animation-delay: .14s; }
.ai-hero__copy > *:nth-child(3) { animation-delay: .23s; }
.ai-hero__copy > *:nth-child(4) { animation-delay: .32s; }
.ai-hero__copy > *:nth-child(5) { animation-delay: .41s; }

.ai-hero.is-split .ai-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ai-hero.is-center .ai-hero__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.ai-hero.is-center .ai-hero__proof { justify-content: center; }
.ai-hero.is-center .ai-hero__actions { justify-content: center; }

.ai-hero__heading {
	margin: .75rem 0 0;
	font-size: clamp(2.4rem, 5.2vw, 4.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.ai-hero__desc {
	margin: 1.35rem 0 0;
	max-width: 56ch;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.7;
}

.ai-hero.is-dark .ai-hero__desc { color: rgba(255, 255, 255, .78); }

.ai-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	margin-top: 2.25rem;
}

/* On the dark hero the ghost button needs a light outline to stay visible. */
.ai-hero.is-dark .ai-btn--ghost {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
}

@media (hover: hover) {
	.ai-hero.is-dark .ai-btn--ghost:hover {
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
		color: #fff;
	}
}

.ai-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

/* Glass pills. The three proof points are the hero's credibility line, and
   loose text next to a button row was reading as a caption. */
.ai-hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.05rem;
	border-radius: var(--r-pill, 999px);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .15);
	backdrop-filter: blur(6px);
	font-size: .9375rem;
	font-weight: 600;
	transition:
		transform .35s var(--_ease),
		border-color .35s var(--_ease),
		background .35s var(--_ease);
}

@media (hover: hover) {
	.ai-hero__proof li:hover {
		transform: translateY(-3px);
		background: rgba(255, 255, 255, .12);
		border-color: rgba(255, 255, 255, .34);
	}
}

/* On the light hero the pills lose their reason to exist — there is no glass
   to sit on — and three outlined capsules under two buttons read as a second
   button row. A ruled strip of dividers says "spec line", which is what these
   three facts are. */
.ai-hero.is-light .ai-hero__proof {
	gap: 0;
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--_line);
	color: var(--_ink);
}

.ai-hero.is-light .ai-hero__proof li {
	padding: .2rem 1.1rem .2rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	backdrop-filter: none;
	/* Three facts and two rules have to clear one column of a split hero, so
	   the strip runs a step smaller than the pills it replaces. */
	font-size: .875rem;
	gap: .45rem;
}

.ai-hero.is-light .ai-hero__proof li + li {
	border-left: 1px solid var(--_line);
	padding-left: 1.1rem;
}

@media (hover: hover) {
	/* A lift on one cell of a ruled row just breaks the rule. */
.ai-hero.is-light .ai-hero__proof li:hover {
		transform: none;
		background: none;
		color: var(--_violet);
	}
}

.ai-hero__proof svg { color: var(--_orange); flex: none; }

.ai-hero.is-dark .ai-hero__proof li { color: rgba(255, 255, 255, .88); }

/* var(--ai-line) is tuned for hairlines between cards. As a 2px button
   outline next to a filled gradient button it disappears, and the hero's
   second action stops looking clickable. */
.ai-hero.is-light .ai-btn--ghost { box-shadow: inset 0 0 0 2px rgba(105, 13, 172, .28); }

@media (hover: hover) {
	.ai-hero.is-light .ai-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--_violet); }
}

/* Media panel */
.ai-hero__media {
	margin: 0;
	animation:
		ai-rise 1s var(--_ease) .25s backwards,
		ai-float 9s ease-in-out 1.3s infinite;
	border-radius: var(--r-xl, 28px);
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 30px 70px rgba(20, 17, 31, .35);
	border: 1px solid rgba(255, 255, 255, .12);
}

.ai-hero.is-light .ai-hero__media {
	background: #fff;
	border-color: var(--_line);
	box-shadow: 0 24px 60px rgba(105, 13, 172, .14);
}

.ai-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* The browser chrome is the same strip the split sections use, so the hero
   screenshot and the ones further down the page read as the same product. */
.ai-hero__media .ai-frame__bar { padding: .8rem 1.1rem; }

/* --- Hero breadcrumbs ----------------------------------------------------
   Sits above the eyebrow and borrows the hero's own foreground, so the trail
   is legible on the dark gradient and on the light variant without a second
   set of colours to keep in sync. Kept quiet on purpose: it is orientation,
   not navigation, and it must not compete with the H1 under it. */
.ai-hero__crumbs {
	margin-bottom: .9rem;
	font-size: .8125rem;
	line-height: 1.4;
}

.ai-hero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-hero.is-center .ai-hero__crumbs ol { justify-content: center; }

.ai-hero__crumbs li {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--_slate);
}

.ai-hero.is-dark .ai-hero__crumbs li { color: rgba(255, 255, 255, .58); }

.ai-hero__crumbs li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentcolor;
	border-right: 1.5px solid currentcolor;
	transform: rotate(45deg);
	opacity: .6;
}

.ai-hero__crumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .25s var(--_ease), border-color .25s var(--_ease);
}

.ai-hero__crumbs a:hover,
.ai-hero__crumbs a:focus-visible {
	color: var(--_violet);
	border-bottom-color: currentcolor;
}

.ai-hero.is-dark .ai-hero__crumbs a:hover,
.ai-hero.is-dark .ai-hero__crumbs a:focus-visible { color: #fff; }

.ai-hero__crumbs [aria-current="page"] { font-weight: 600; }


.ai-hero__media figcaption {
	padding: .875rem 1.25rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.ai-hero.is-light .ai-hero__media figcaption {
	color: var(--_slate);
	border-top-color: var(--_line);
}

/* ==========================================================================
   Stat row
   ========================================================================== */
.ai-stats { padding-block: clamp(1.8rem, 3.6vw, 3rem); }

.ai-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* The divider fades out at both ends instead of stopping dead — a hard rule
   between two numbers reads as a table, which is the opposite of the point. */
.ai-stats.is-divided .ai-stat + .ai-stat {
	border-left: 1px solid transparent;
	border-image: linear-gradient(
		180deg,
		transparent,
		rgba(105, 13, 172, .3) 22%,
		rgba(242, 101, 34, .3) 78%,
		transparent
	) 1;
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.ai-stats.is-dark.is-divided .ai-stat + .ai-stat {
	border-image: linear-gradient(
		180deg,
		transparent,
		rgba(255, 255, 255, .24) 22%,
		rgba(255, 255, 255, .24) 78%,
		transparent
	) 1;
}

.ai-stat { transition: transform .45s var(--_ease); }

@media (hover: hover) {
	.ai-stat:hover { transform: translateY(-5px); }
}

.ai-stat__num {
	display: flex;
	align-items: baseline;
	gap: .06em;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(2.75rem, 5.5vw, 4.5rem);
	line-height: 1;
	letter-spacing: -.03em;
	background: var(--_grad-cta);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ai-stat__affix { font-size: .62em; }

/* drop-shadow follows the glyph outline, so the glow tracks the gradient text
   itself rather than boxing it. */
.ai-stat__num { transition: filter .45s var(--_ease); }

@media (hover: hover) {
	.ai-stat:hover .ai-stat__num { filter: drop-shadow(0 10px 22px rgba(242, 101, 34, .3)); }
}

.ai-stat__label {
	transition: color .35s var(--_ease);
	margin: .875rem 0 0;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--_slate);
}

.ai-stats.is-dark .ai-stat__label { color: rgba(255, 255, 255, .66); }

@media (hover: hover) {
	.ai-stat:hover .ai-stat__label { color: var(--_ink); }
}

@media (hover: hover) {
	.ai-stats.is-dark .ai-stat:hover .ai-stat__label { color: #fff; }
}

/* --- Card layout ---------------------------------------------------------
   The open row works when the numbers are the section. Directly under the
   hero they are not the section — they are the hero's receipt — so they move
   into one raised card that straddles the boundary and holds the two blocks
   together. Numerals shrink accordingly: five 72px figures under an 80px
   headline is two headlines. */
.ai-stats.is-card {
	background: transparent;
	padding-block: 0;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ai-stats.is-card .ai-stats__inner { padding-inline: 0; }

.ai-stats.is-card .ai-stats__grid {
	padding: clamp(1.4rem, 2.6vw, 2.1rem);
	grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	background: var(--ai-white, #fff);
	border: 1px solid var(--_line);
	border-radius: var(--r-xl, 28px);
	box-shadow: 0 26px 64px rgba(105, 13, 172, .13);
}

/* Lifted over the section above. z-index so the card clears the hero's own
   decorative blooms rather than being washed by them. */
.ai-stats.is-overlap {
	position: relative;
	z-index: 2;
	margin-top: clamp(-5rem, -6vw, -2.5rem);
	margin-bottom: clamp(1rem, 2vw, 2rem);
}

.ai-stats.is-card .ai-stat {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.ai-stats.is-card.is-divided .ai-stat + .ai-stat { padding-left: clamp(1rem, 2vw, 1.6rem); }

@media (hover: hover) {
	.ai-stats.is-card .ai-stat:hover { transform: translateY(-3px); }
}

@media (hover: hover) {
	.ai-stats.is-card .ai-stat:hover .ai-stat__num { filter: none; }
}

.ai-stats.is-card .ai-stat__num {
	font-size: clamp(1.45rem, 2.1vw, 1.85rem);
	letter-spacing: -.02em;
}

.ai-stats.is-card .ai-stat__label {
	margin-top: .2rem;
	font-size: .75rem;
	line-height: 1.4;
	letter-spacing: .04em;
}

.ai-stat__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: rgba(105, 13, 172, .09);
	color: var(--_violet);
	transition: background .4s var(--_ease), color .4s var(--_ease), transform .4s var(--_ease);
}

/* Alternating tints so a row of five icons reads as a rhythm rather than as
   five copies of the same chip. */
.ai-stat:nth-child(even) .ai-stat__icon {
	background: rgba(242, 101, 34, .11);
	color: var(--_orange);
}

@media (hover: hover) {
	.ai-stat:hover .ai-stat__icon {
		background: var(--_grad-cta);
		color: #fff;
		transform: rotate(-5deg);
	}
}

.ai-stats.is-dark .ai-stat__icon {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

/* --- Feature layout ------------------------------------------------------
   The row and card layouts are a footnote to a hero that has already made the
   claim. This one IS the claim: it gets a heading, a panel per figure, and
   labels set as sentences rather than as the row's uppercase micro-caps —
   "10 Lakh+" means nothing until the line under it says what was counted.

   The numerals are smaller here than in the open row on purpose. A panel puts
   a border around the figure, and 4.5rem inside a box reads as shouting where
   the same size on bare ground reads as scale. */
.ai-stats.is-feature { padding-block: clamp(2.7rem, 5.4vw, 4.2rem); }

.ai-stats.is-feature .ai-stats__grid {
	grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.ai-stats.is-feature .ai-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: clamp(1.5rem, 2.6vw, 2.1rem);
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 22px);
	background: var(--ai-white, #fff);
	overflow: hidden;
	transition:
		transform .45s var(--_ease),
		border-color .45s var(--_ease),
		box-shadow .45s var(--_ease);
}

/* A gradient hairline along the top edge, drawn on a pseudo-element so it can
   sit inside the rounded corner instead of squaring it off. */
.ai-stats.is-feature .ai-stat::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--_grad-cta);
	opacity: .85;
}

@media (hover: hover) {
	.ai-stats.is-feature .ai-stat:hover {
		transform: translateY(-5px);
		border-color: rgba(105, 13, 172, .28);
		box-shadow: 0 22px 50px rgba(105, 13, 172, .14);
	}
}

.ai-stats.is-feature .ai-stat__icon {
	width: 52px;
	height: 52px;
	border-radius: 15px;
}

.ai-stats.is-feature .ai-stat__num {
	font-size: clamp(2.25rem, 3.6vw, 3.15rem);
	letter-spacing: -.035em;
	/* "10 Lakh+" is a two-word suffix. Left to the affix's .62em it competed
	   with the numeral; at .5em it reads as the unit it is, and wrapping is
	   allowed so a long unit drops to its own line instead of overflowing. */
	flex-wrap: wrap;
	row-gap: 0;
}

.ai-stats.is-feature .ai-stat__affix { font-size: .5em; }

.ai-stats.is-feature .ai-stat__label {
	margin: 0;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--_ink);
}

.ai-stats.is-feature .ai-stat__sub {
	margin: -.5rem 0 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--_slate);
}

.ai-stats.is-feature.is-dark .ai-stat {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
}

.ai-stats.is-feature.is-dark .ai-stat__label { color: #fff; }
.ai-stats.is-feature.is-dark .ai-stat__sub { color: rgba(255, 255, 255, .66); }

@media (hover: hover) {
	.ai-stats.is-feature.is-dark .ai-stat:hover {
		border-color: rgba(255, 255, 255, .34);
		box-shadow: none;
	}
}

/* The body is already a flex column inside the panel; without this the label
   and its supporting line sit apart from the numeral rather than under it. */
.ai-stats.is-feature .ai-stat__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* ==========================================================================
   ERP compatibility
   ========================================================================== */
.ai-erp { padding-block: clamp(2.7rem, 5.4vw, 4.2rem); }

.ai-erp__grid {
	display: grid;
	gap: clamp(.9rem, 1.8vw, 1.35rem);
	/* 196px, not the 230 the other card grids use: there are five platforms,
	   and a track floor that only fits four leaves the fifth alone on its own
	   row looking like an afterthought rather than part of the set. */
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-erp__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	padding: clamp(1.35rem, 2.3vw, 1.75rem);
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 22px);
	background: var(--ai-white, #fff);
	transition:
		transform .4s var(--_ease),
		border-color .4s var(--_ease),
		box-shadow .4s var(--_ease);
}

/* The accent is a hairline along the top edge rather than a tinted card. Five
   tinted cards in a row would compete with the client logo strip further up
   the page; five hairlines read as one set with five members. Same treatment
   as the key-statistics panels, which is the other place on the site where a
   row of equal things needs telling apart without being shouted at. */
.ai-erp__item::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: currentcolor;
	opacity: .55;
}

.ai-erp__item.is-violet { color: var(--_violet); }
.ai-erp__item.is-orange { color: var(--_orange); }
.ai-erp__item.is-ink    { color: var(--_ink); }

@media (hover: hover) {
	.ai-erp__item:hover {
		transform: translateY(-4px);
		border-color: rgba(105, 13, 172, .26);
		box-shadow: 0 18px 44px rgba(105, 13, 172, .12);
	}
}

/* The wordmark carries the tile. Tightened tracking and the display face are
   what make set type read as a mark rather than as a heading that lost its
   paragraph. */
.ai-erp__mark {
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(1.3rem, 2.1vw, 1.6rem);
	line-height: 1.1;
	letter-spacing: -.035em;
	color: currentcolor;
}

.ai-erp__note {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--_slate);
}

.ai-erp__badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding: .3rem .7rem;
	border-radius: var(--r-pill, 999px);
	background: rgba(31, 157, 107, .12);
	color: var(--_pos);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ai-erp__badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentcolor;
}

.ai-erp.is-dark .ai-erp__item {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
}

.ai-erp.is-dark .ai-erp__item.is-ink { color: #fff; }
.ai-erp.is-dark .ai-erp__note { color: rgba(255, 255, 255, .68); }

@media (hover: hover) {
	.ai-erp.is-dark .ai-erp__item:hover {
		border-color: rgba(255, 255, 255, .32);
		box-shadow: none;
	}
}

/* ==========================================================================
   Product gallery
   ========================================================================== */
.ai-gallery { padding-block: clamp(2.7rem, 5.4vw, 4.2rem); }

.ai-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.ai-gallery__filter {
	padding: .5rem 1.1rem;
	border: 1px solid var(--_line);
	border-radius: var(--r-pill, 999px);
	background: var(--ai-white, #fff);
	color: var(--_slate);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		color .3s var(--_ease),
		border-color .3s var(--_ease),
		background .3s var(--_ease);
}

@media (hover: hover) {
	.ai-gallery__filter:hover {
		color: var(--_violet);
		border-color: rgba(105, 13, 172, .34);
	}
}

.ai-gallery__filter.is-active {
	background: var(--_grad-cta);
	border-color: transparent;
	color: #fff;
}

.ai-gallery.is-dark .ai-gallery__filter {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .74);
}

.ai-gallery.is-dark .ai-gallery__filter.is-active { color: #fff; }

.ai-gallery__grid {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	/* Rows size to their own content, so a tall phone screen next to a wide
	   dashboard does not stretch every caption in the row away from its
	   picture. */
	align-items: start;
}

@media (min-width: 900px) {
	.ai-gallery__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
	.ai-gallery__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.ai-gallery__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

.ai-gallery__item figure { margin: 0; }

.ai-gallery__link {
	position: relative;
	display: block;
	text-decoration: none;
	border-radius: var(--r-lg, 20px);
}

/* .ai-frame is a div elsewhere on the site; here it wraps a link's contents,
   so it is a span and needs telling. */
.ai-gallery .ai-frame { display: block; }

/* No forced aspect ratio, unlike every other screenshot on the site. This
   page exists to show the screens, and a fixed box means cropping: the app
   captures are 9:18 and the dashboards run from 1.86:1 to 4.5:1, so any single
   ratio hides part of most of them. The grid is set to align-items: start, so
   images of different heights sit side by side without stretching each other
   or the captions under them. */
.ai-gallery .ai-frame img { height: auto; }

/* Phone captures are 9:18; dashboards are nearer 2:1. Left at the column
   width a phone tile stands three times taller than the dashboard beside it
   and the "All screens" view reads as a fault. Holding the phones narrower
   evens the rows out, and the lightbox is where anyone reads the detail. */
.ai-gallery .frame-phone .ai-frame {
	max-width: 208px;
}

@media (hover: hover) {
	.ai-gallery__link:hover .ai-frame {
		transform: translateY(-6px);
		box-shadow: 0 34px 70px rgba(105, 13, 172, .22);
	}
}

.ai-gallery__link:focus-visible {
	outline: 2px solid var(--_violet);
	outline-offset: 4px;
}

/* The affordance. Rotated 45 degrees so the shared arrow icon reads as
   "open this" rather than as "next page". */
.ai-gallery__zoom {
	position: absolute;
	right: .85rem;
	bottom: .85rem;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--_grad-cta);
	color: #fff;
	opacity: 0;
	transform: translateY(6px) rotate(-45deg);
	transition: opacity .35s var(--_ease), transform .35s var(--_ease);
	pointer-events: none;
}

.ai-gallery .frame-phone .ai-gallery__zoom { right: calc(50% - 104px + .85rem); }

@media (hover: hover) {
	.ai-gallery__link:hover .ai-gallery__zoom,
	.ai-gallery__link:focus-visible .ai-gallery__zoom {
		opacity: 1;
		transform: translateY(0) rotate(-45deg);
	}
}

/* Touch has no hover to reveal it with, so it simply stays on. */
@media (hover: none) {
	.ai-gallery__zoom { opacity: 1; transform: rotate(-45deg); }
}

.ai-gallery__meta { margin-top: 1rem; }

.ai-gallery__title {
	margin: 0;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--_ink);
}

.ai-gallery__caption {
	margin: .3rem 0 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--_slate);
}

.ai-gallery.is-dark .ai-gallery__title { color: #fff; }
.ai-gallery.is-dark .ai-gallery__caption { color: rgba(255, 255, 255, .68); }

.ai-gallery__empty {
	margin: 2rem 0 0;
	text-align: center;
	color: var(--_slate);
}

/* --- Lightbox ------------------------------------------------------------
   A native <dialog>, so Escape, the backdrop and the focus trap are the
   browser's job rather than three more things to get wrong. Built by
   main.js and appended once per page. */
.ai-lightbox {
	width: min(92vw, 1180px);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--r-lg, 22px);
	background: var(--ai-white, #fff);
	color: var(--ai-ink, #14111F);
	overflow: hidden;
}

.ai-lightbox::backdrop {
	background: rgba(20, 17, 31, .82);
	backdrop-filter: blur(3px);
}

.ai-lightbox__figure {
	display: grid;
	grid-template-rows: 1fr auto;
	margin: 0;
	max-height: 92vh;
}

.ai-lightbox__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: calc(92vh - 6rem);
	object-fit: contain;
	background: var(--ai-mist, #F7F5FA);
}

.ai-lightbox__meta {
	padding: 1rem 1.35rem 1.25rem;
	border-top: 1px solid var(--ai-line, #E7E2EF);
}

.ai-lightbox__title {
	margin: 0;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
}

.ai-lightbox__caption {
	margin: .25rem 0 0;
	font-size: .9375rem;
	color: var(--ai-slate, #5B5570);
}

.ai-lightbox__btn {
	position: absolute;
	top: .75rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 17, 31, .62);
	color: #fff;
	font: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background .25s var(--_ease, ease);
}

.ai-lightbox__btn:hover { background: rgba(20, 17, 31, .85); }
.ai-lightbox__close { right: .75rem; }

.ai-lightbox__prev,
.ai-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
}

.ai-lightbox__prev { left: .75rem; }
.ai-lightbox__next { right: .75rem; top: 50%; }

.ai-lightbox__prev[hidden],
.ai-lightbox__next[hidden] { display: none; }

/* ==========================================================================
   Signed message
   ========================================================================== */
.ai-message { padding-block: clamp(2.7rem, 5.4vw, 4.2rem); }

.ai-message__layout {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	align-items: start;
}

@media (min-width: 900px) {
	.ai-message__layout { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }

	/* The letter is long; the person signing it should still be on screen at
	   the end of it. */
	.ai-message__author {
		position: sticky;
		top: calc(var(--ai-header-h, 76px) + 1.5rem);
	}
}

.ai-message__author { text-align: left; }

.ai-message__portrait {
	display: grid;
	place-items: center;
	width: 132px;
	height: 132px;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--_grad-cta);
	color: #fff;
	box-shadow: 0 18px 40px rgba(105, 13, 172, .22);
}

.ai-message__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ai-message__initials {
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -.03em;
}

.ai-message__name {
	margin: 0;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--_ink);
}

/* A rule under the name, as a signature line would sit under a signature. */
.ai-message__name::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin-top: .55rem;
	border-radius: 999px;
	background: var(--_grad-cta);
}

.ai-message__role {
	margin: .7rem 0 0;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--_violet);
}

.ai-message__meta {
	margin: .3rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--_slate);
}

.ai-message__lead {
	margin: 0 0 1.35rem;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--_ink);
}

.ai-message__prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--_slate);
}

.ai-message__prose > :first-child { margin-top: 0; }
.ai-message__prose > :last-child { margin-bottom: 0; }
.ai-message__prose p { margin: 0 0 1.1rem; }

.ai-message__prose strong { color: var(--_ink); }

.ai-message__prose ul {
	margin: 0 0 1.1rem;
	padding-left: 1.2rem;
}

.ai-message__prose li { margin-bottom: .45rem; }

.ai-message.is-dark .ai-message__name,
.ai-message.is-dark .ai-message__lead { color: #fff; }

.ai-message.is-dark .ai-message__prose,
.ai-message.is-dark .ai-message__meta { color: rgba(255, 255, 255, .72); }

.ai-message.is-dark .ai-message__role { color: var(--_orange); }

/* Same treatment as an unapproved testimonial: a dashed edge and a plain
   sentence saying the wording is not signed off. */
.ai-message.is-pending .ai-message__body {
	padding: clamp(1.25rem, 2.4vw, 1.85rem);
	border: 1px dashed var(--_line);
	border-radius: var(--r-lg, 22px);
}

.ai-message__pending {
	margin: 1.35rem 0 0;
	padding: .55rem .85rem;
	border-radius: var(--r-sm, 10px);
	background: var(--ai-cream, #FFF2DF);
	color: #8A4B12;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ==========================================================================
   Feature grid
   ========================================================================== */
.ai-features { padding-block: clamp(2.7rem, 5.4vw, 4.2rem); }

.ai-features__grid {
	display: grid;
	gap: clamp(1.25rem, 2.2vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 900px) {
	.ai-features__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
	.ai-features__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.ai-features__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* --- Card ---------------------------------------------------------------
   Every accent on a card — number, icon, tick, bar, link, corner wash — reads
   from one --accent set, cycling by position. A row of three or four then
   reads as a designed set rather than the same card repeated. */
.ai-feature {
	--accent:      #690DAC;
	--accent-soft: rgba(105, 13, 172, .1);
	--accent-tint: rgba(105, 13, 172, .07);
	--accent-grad: linear-gradient(140deg, #7B2CBF, #4A0D6B);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.7rem, 2.6vw, 2.15rem);
	border-radius: 22px;
	background: var(--ai-white, #fff);
	border: 1px solid var(--_line);
	box-shadow: 0 2px 14px rgba(20, 17, 31, .04);
	transition:
		transform .45s var(--_ease),
		box-shadow .45s var(--_ease),
		border-color .45s var(--_ease);
}

.ai-feature:nth-child(4n + 2) {
	--accent:      #F26522;
	--accent-soft: rgba(242, 101, 34, .13);
	--accent-tint: rgba(242, 101, 34, .08);
	--accent-grad: linear-gradient(140deg, #FBA94C, #F26522);
}

.ai-feature:nth-child(4n + 3) {
	--accent:      #B3208C;
	--accent-soft: rgba(179, 32, 140, .12);
	--accent-tint: rgba(179, 32, 140, .08);
	--accent-grad: linear-gradient(140deg, #E255A1, #B3208C);
}

.ai-feature:nth-child(4n + 4) {
	--accent:      #E0468A;
	--accent-soft: rgba(224, 70, 138, .13);
	--accent-tint: rgba(224, 70, 138, .08);
	--accent-grad: linear-gradient(140deg, #F58FB8, #E0468A);
}
.ai-feature:focus-within {
	transform: translateY(-10px);
	box-shadow: 0 26px 60px rgba(105, 13, 172, .16);
	border-color: var(--accent-soft);
}
@media (hover: hover) {
	.ai-feature:hover {
		transform: translateY(-10px);
		box-shadow: 0 26px 60px rgba(105, 13, 172, .16);
		border-color: var(--accent-soft);
	}
}

/* main.js writes --mx/--my from the pointer. With no JS the gradient stays at
   its default centre and never fades in — the card just stays flat. */
.ai-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		340px circle at var(--mx, 50%) var(--my, 0%),
		var(--accent-tint),
		transparent 70%
	);
	opacity: 0;
	transition: opacity .4s var(--_ease);
}

@media (hover: hover) {
	.ai-feature:hover::before { opacity: 1; }
}

/* Corner wash. Shown only on the button-style grid, where the cards are
   shorter and carry no bullet rule to give them structure. */
.ai-feature__wave {
	position: absolute;
	z-index: -1;
	right: -8%;
	bottom: -14%;
	width: 64%;
	aspect-ratio: 1;
	border-radius: 46% 54% 38% 62% / 54% 42% 58% 46%;
	background: var(--accent-tint);
	opacity: 0;
	transition: opacity .45s var(--_ease), transform .7s var(--_ease);
	pointer-events: none;
}

.ai-features__grid[data-link="pill"] .ai-feature__wave { opacity: 1; }

@media (hover: hover) {
	.ai-features__grid[data-link="pill"] .ai-feature:hover .ai-feature__wave { transform: scale(1.12) rotate(-8deg); }
}

.ai-features.is-dark .ai-feature {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

@media (hover: hover) {
	.ai-features.is-dark .ai-feature:hover {
		background: rgba(255, 255, 255, .08);
		box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
	}
}

/* --- Icon and number ----------------------------------------------------- */
.ai-feature__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.ai-features .ai-icon-bubble {
	position: relative;
	overflow: hidden;
	width: 60px;
	height: 60px;
	margin: 0;
	border-radius: 18px;
	background: var(--accent-soft);
	color: var(--accent);
	transition: transform .45s var(--_ease), color .3s var(--_ease);
}

.ai-features .ai-icon-bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent-grad);
	opacity: 0;
	transition: opacity .4s var(--_ease);
}

.ai-features .ai-icon-bubble svg { position: relative; z-index: 1; }

@media (hover: hover) {
	.ai-feature:hover .ai-icon-bubble {
		transform: translateY(-2px) rotate(-5deg) scale(1.05);
		color: #fff;
	}
}

@media (hover: hover) {
	.ai-feature:hover .ai-icon-bubble::before { opacity: 1; }
}

.ai-feature__num {
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	margin-top: .35rem;
	color: var(--accent);
	opacity: .32;
	transition: opacity .35s var(--_ease);
}

@media (hover: hover) {
	.ai-feature:hover .ai-feature__num { opacity: .6; }
}

.ai-features.is-dark .ai-icon-bubble { color: #fff; }
.ai-features.is-dark .ai-feature__num { opacity: .5; }

/* --- Copy ---------------------------------------------------------------- */
.ai-feature__title {
	margin: 0 0 .7rem;
	font-size: 1.3rem;
	line-height: 1.25;
}

/* Cards with a bullet list get a full rule above that list. Cards without one
   would run title straight into body copy, so they take a short accent bar. */
.ai-feature__bar {
	display: block;
	width: 34px;
	height: 3px;
	margin: 0 0 1.1rem;
	border-radius: 3px;
	background: var(--accent);
}

.ai-feature__text {
	margin: 0;
	font-size: .97rem;
	line-height: 1.7;
}

.ai-features__grid[data-link="pill"] .ai-feature__text { margin-bottom: 1.7rem; }

.ai-features.is-dark .ai-feature__text { color: rgba(255, 255, 255, .74); }

/* --- Bullets ------------------------------------------------------------- */
.ai-feature__list {
	margin: 1.35rem 0 0;
	padding: 1.35rem 0 0;
	border-top: 1px solid var(--_line);
	list-style: none;
	display: grid;
	gap: .72rem;
}

.ai-features.is-dark .ai-feature__list { border-top-color: rgba(255, 255, 255, .12); }

.ai-feature__list li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: .7rem;
	align-items: start;
	font-size: .925rem;
	line-height: 1.5;
}

.ai-feature__tick {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	transition: background .35s var(--_ease), color .35s var(--_ease);
}

@media (hover: hover) {
	.ai-feature:hover .ai-feature__tick {
		background: var(--accent-grad);
		color: #fff;
	}
}

.ai-features.is-dark .ai-feature__tick { color: #fff; }

/* --- Link ---------------------------------------------------------------
   The anchor stretches across the whole card, so the entire card is the click
   target while the visible affordance stays an ordinary link or button. */
.ai-feature__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	align-self: flex-start;
	font-weight: 700;
	font-size: .94rem;
	color: var(--accent);
}

.ai-feature__link:not(.is-pill) { padding-top: 1.5rem; }

.ai-feature__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ai-feature__link span { position: relative; }

.ai-feature__link:not(.is-pill) span::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--_ease);
}

@media (hover: hover) {
	.ai-feature:hover .ai-feature__link:not(.is-pill) span::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}

.ai-feature__link.is-pill {
	padding: .62rem 1.2rem;
	border-radius: var(--r-pill, 999px);
	border: 1.5px solid var(--accent);
	font-size: .875rem;
	transition:
		background .35s var(--_ease),
		color .35s var(--_ease),
		box-shadow .35s var(--_ease);
}

@media (hover: hover) {
	.ai-feature:hover .ai-feature__link.is-pill {
		background: var(--accent);
		color: #fff;
		box-shadow: 0 12px 26px var(--accent-soft);
	}
}

.ai-features.is-dark .ai-feature__link { color: #fff; }

.ai-feature__link svg { transition: transform .35s var(--_ease); }

@media (hover: hover) {
	.ai-feature:hover .ai-feature__link svg { transform: translateX(5px); }
}

/* ==========================================================================
   Closing note strip
   The one-line reassurance that sits under a section. Icon, claim, detail —
   inline while there is room, stacked once there is not.
   ========================================================================== */
.ai-note-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.15rem;
	margin-top: clamp(1.25rem, 2.5vw, 1.9rem);
	padding: 1.3rem 1.7rem;
	border-radius: 20px;
	background: var(--ai-white, #fff);
	border: 1px solid var(--_line);
	box-shadow: 0 2px 14px rgba(20, 17, 31, .04);
}

.ai-note-strip__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(105, 13, 172, .09);
	color: var(--_violet);
}

.ai-note-strip__title {
	margin: 0;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--_violet);
}

.ai-note-strip__text {
	flex: 1 1 22ch;
	margin: 0;
	padding-left: 1.35rem;
	border-left: 1px solid var(--_line);
	font-size: .95rem;
	line-height: 1.6;
}

.is-dark .ai-note-strip {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}

.is-dark .ai-note-strip__icon { background: rgba(242, 101, 34, .18); color: var(--_orange); }
.is-dark .ai-note-strip__title { color: #fff; }
.is-dark .ai-note-strip__text { border-left-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .74); }

@media (max-width: 700px) {
	.ai-note-strip__text {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
	}
}

/* ==========================================================================
   Demo form
   ========================================================================== */
.ai-form {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2.6rem, 5.2vw, 4.4rem);
	scroll-margin-top: clamp(4.5rem, 9vw, 6.5rem);
}

/* Copy left, form right. The form is the wider column: three of its rows are
   two fields side by side, and squeezing those into an equal half turned every
   input into a stub. */
.ai-form__layout {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

/* --- The column beside the form ------------------------------------------ */
.ai-form__points {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-form__points li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.ai-form__point-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(105, 13, 172, .09);
	color: var(--_violet);
}

.ai-form.is-dark .ai-form__point-icon {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.ai-form__point-title {
	margin: 0;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--_ink);
}

.ai-form__point-text {
	margin: .25rem 0 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--_slate);
}

.ai-form.is-dark .ai-form__point-title { color: #fff; }
.ai-form.is-dark .ai-form__point-text { color: rgba(255, 255, 255, .74); }

.ai-form__fallback {
	margin: 1.75rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid var(--_line);
	font-size: .9375rem;
	color: var(--_slate);
}

.ai-form__fallback a {
	color: var(--_violet);
	font-weight: 600;
}

.ai-form.is-dark .ai-form__fallback {
	border-top-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .74);
}

.ai-form.is-dark .ai-form__fallback a { color: #fff; }

/* --- The card ------------------------------------------------------------ */
.ai-form__card {
	padding: clamp(1.4rem, 3vw, 2.35rem);
	border-radius: var(--r-xl, 28px);
	background: var(--ai-white, #fff);
	border: 1px solid var(--_line);
	box-shadow: 0 24px 60px rgba(105, 13, 172, .1);
}

.ai-form.is-dark .ai-form__card {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
}

/* Two fields per row on the card, one for anything marked full width. Named
   here rather than per field so the field list in PHP stays the only place
   that decides which is which. */
.ai-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.15rem;
}

.ai-field { margin: 0; }
.ai-field.is-full { grid-column: 1 / -1; }

.ai-field label {
	display: block;
	margin-bottom: .4rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--_ink);
}

.ai-form.is-dark .ai-field label { color: rgba(255, 255, 255, .92); }

.ai-field__req {
	margin-left: .15rem;
	color: var(--_orange);
}

.ai-field input,
.ai-field select,
.ai-field textarea {
	width: 100%;
	padding: .8rem .95rem;
	border-radius: var(--r-md, 16px);
	border: 1px solid var(--_line);
	background: var(--ai-white, #fff);
	color: var(--_ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s var(--_ease), box-shadow .2s var(--_ease);
}

.ai-field textarea {
	resize: vertical;
	min-height: 7.5rem;
}

/* The native arrow disappears with appearance:none, so it is redrawn as a
   background chevron; without it the select is indistinguishable from a text
   input. Encoded as a data URI to keep the stylesheet self-contained. */
.ai-field select {
	appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B5570' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .95rem center;
}

@media (hover: hover) {
	.ai-field input:hover,
	.ai-field select:hover,
	.ai-field textarea:hover { border-color: rgba(105, 13, 172, .38); }
}

.ai-field input:focus,
.ai-field select:focus,
.ai-field textarea:focus {
	border-color: var(--_violet);
	/* Focus rings elsewhere are left to Hello Elementor's reset, which draws
	   its own outline on :focus-visible. This ring is the field's own filled
	   state on top of that, not a replacement for it. */
	box-shadow: 0 0 0 4px rgba(105, 13, 172, .13);
}

.ai-field input::placeholder,
.ai-field textarea::placeholder { color: rgba(91, 85, 112, .72); }

.ai-form.is-dark .ai-field input,
.ai-form.is-dark .ai-field select,
.ai-form.is-dark .ai-field textarea {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
}

.ai-form.is-dark .ai-field input::placeholder,
.ai-form.is-dark .ai-field textarea::placeholder { color: rgba(255, 255, 255, .6); }

.ai-field.has-error input,
.ai-field.has-error select,
.ai-field.has-error textarea { border-color: var(--_neg); }

.ai-field.has-error input:focus,
.ai-field.has-error select:focus,
.ai-field.has-error textarea:focus {
	box-shadow: 0 0 0 4px rgba(var(--_neg-rgb), .16);
}

.ai-field__error {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--_neg);
}

.ai-form.is-dark .ai-field__error { color: #FF9EC4; }

/* --- Alerts, honeypot, footer -------------------------------------------- */
.ai-form__alert {
	margin: 0 0 1.35rem;
	padding: .85rem 1.1rem;
	border-radius: var(--r-md, 16px);
	background: rgba(var(--_neg-rgb), .09);
	border: 1px solid rgba(var(--_neg-rgb), .3);
	color: var(--_neg);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.5;
}

.ai-form.is-dark .ai-form__alert { color: #FF9EC4; }

/* Off-screen rather than display:none: a bot reading the CSS can spot the
   latter, and some fill hidden fields precisely because they are hidden. */
.ai-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ai-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.35rem;
	margin-top: 1.6rem;
}

.ai-form__submit {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

.ai-form__privacy {
	flex: 1 1 16rem;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--_slate);
}

.ai-form.is-dark .ai-form__privacy { color: rgba(255, 255, 255, .7); }

/* --- Confirmation --------------------------------------------------------- */
.ai-form__done {
	display: grid;
	justify-items: center;
	gap: .35rem;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0;
	text-align: center;
}

.ai-form__done-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: .6rem;
	border-radius: 50%;
	background: rgba(31, 157, 107, .12);
	color: var(--_pos);
}

.ai-form__done-title {
	margin: 0;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--_ink);
}

.ai-form__done-text {
	margin: .6rem 0 0;
	max-width: 46ch;
	line-height: 1.65;
	color: var(--_slate);
}

.ai-form.is-dark .ai-form__done-title { color: #fff; }
.ai-form.is-dark .ai-form__done-text { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.ai-hero.is-split .ai-hero__inner { grid-template-columns: minmax(0, 1fr); }

	/* auto-fit lands on three columns at tablet width, stranding the fourth
	   stat alone on a second row. Two columns keeps the set balanced. */
	.ai-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ai-stats.is-divided .ai-stat + .ai-stat {
		border-left: 0;
		padding-left: 0;
	}

	/* With the dividers gone, the pairs need their own vertical rhythm. */
	.ai-stats__grid { row-gap: clamp(2rem, 5vw, 2.75rem); }

	/* Inside the card the icons already separate the stats, so the open row's
	   breathing space would just make the card tall. */
	.ai-stats.is-card .ai-stats__grid { row-gap: 1.35rem; }

	/* The dividers are gone at this width; the indent that went with them has
	   to go too, or every second column sits a step further in than the first. */
	.ai-stats.is-card.is-divided .ai-stat + .ai-stat { padding-left: 0; }

	/* Stacked, the hero ends on its screenshot rather than on empty padding,
	   so lifting the card would cover the image instead of the gap. */
	.ai-stats.is-overlap { margin-top: 0; }
}

@media (max-width: 480px) {
	/* Stays at two. Single file turned five short stats into a screen and a
	   half of scrolling for figures that are meant to be taken in at a glance,
	   so the pairs hold and the parts shrink around them instead. The card's
	   own auto-fit has to be overridden by name: its 172px track floor cannot
	   fit two columns in a 375px viewport and would silently drop to one. */
	.ai-stats__grid,
	.ai-stats.is-card .ai-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The feature panels are the exception: two of them in a 375px viewport
	   leaves about 160px of card, which breaks "Redemption payouts" across
	   four lines. They stack. */
	.ai-stats.is-feature .ai-stats__grid { grid-template-columns: minmax(0, 1fr); }

	.ai-stats.is-card .ai-stats__grid {
		padding: 1.15rem .9rem;
		gap: 1.15rem .7rem;
	}

	/* 137px of column, less a 44px chip and its gap, left the label about
	   80px — enough to break "Automotive" across two lines. */
	.ai-stats.is-card .ai-stat { gap: .55rem; }

	.ai-stat__icon {
		width: 36px;
		height: 36px;
		border-radius: 11px;
	}

	.ai-stat__icon svg { width: 18px; height: 18px; }

	.ai-stats.is-card .ai-stat__num { font-size: 1.25rem; }

	.ai-stats.is-card .ai-stat__label {
		font-size: .625rem;
		letter-spacing: .03em;
	}
}

@media (max-width: 620px) {
	/* The sparkline is the callout's ornament; below this the title needs the
	   width more than the card needs the flourish. */
	.ai-split__spark { display: none; }

	.ai-hero.is-light .ai-hero__proof li,
	.ai-hero.is-light .ai-hero__proof li + li {
		flex: 1 1 100%;
		padding: .35rem 0;
		border-left: 0;
	}
}

@media (max-width: 560px) {
	.ai-hero__actions .ai-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Shared section header
   With artwork the header splits into copy + illustration; without it the copy
   column is the whole header. One block of markup, two layouts.
   ========================================================================== */
.ai-sec-head { margin-bottom: clamp(1.6rem, 3.2vw, 2.4rem); }

.ai-sec-head__copy { max-width: 62ch; }

.ai-sec-head.has-art {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.ai-sec-head.is-center { text-align: center; }
.ai-sec-head.is-center .ai-sec-head__copy { margin-inline: auto; }
.ai-sec-head.is-center .ai-eyebrow { justify-content: center; }

.ai-sec-head h2 {
	margin: .9rem 0 0;
	font-size: clamp(2.1rem, 3.9vw, 3.25rem);
	font-weight: 800;
	line-height: 1.1;
	text-wrap: balance;
}

.ai-sec-head__intro {
	margin: 1.15rem 0 0;
	max-width: 54ch;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.ai-sec-head.is-center .ai-sec-head__intro { margin-inline: auto; }

.is-dark .ai-sec-head__intro { color: rgba(255, 255, 255, .74); }

/* Gradient rule closing every section header — the motif that ties eight
   different sections together as one page. */
.ai-sec-head__rule {
	display: block;
	width: 104px;
	height: 4px;
	margin-top: 1.9rem;
	border-radius: 4px;
	background: var(--_grad-cta);
}

.ai-sec-head.is-center .ai-sec-head__rule { margin-inline: auto; }

.ai-sec-head__art {
	position: relative;
	/* Ornament, not content: capped so it never competes with the heading for
	   attention, and pushed to the outer edge so the copy keeps the optical
	   left of the section. justify-self rather than an auto margin — an auto
	   margin on a grid item drops it out of stretch sizing, which makes the
	   rendered width depend on the SVG's intrinsic size instead of this cap. */
	justify-self: end;
	width: 100%;
	max-width: 300px;
	animation: ai-float 11s ease-in-out infinite;
}

.ai-art__svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.ai-sec-head.has-art { grid-template-columns: minmax(0, 1fr); }
	/* Ornamental only. On a phone it would push the actual content a full
	   screen down, so it goes rather than shrinks. */
	.ai-sec-head__art { display: none; }
}

.ai-icon-bubble.is-sm {
	width: 40px;
	height: 40px;
	margin-bottom: 0;
	flex: none;
}

/* ==========================================================================
   Logo strip
   ========================================================================== */
.ai-logos {
	padding-block: clamp(1.5rem, 3vw, 2.1rem);
	border-block: 1px solid var(--ai-line, #E7E2EF);
}

.ai-logos.is-dark { border-block-color: rgba(255, 255, 255, .12); }

.ai-logos__inner {
	max-width: var(--container, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	gap: 1.75rem;
	justify-items: center;
}

.ai-logos__label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ai-slate, #5B5570);
	text-align: center;
}

.ai-logos.is-dark .ai-logos__label { color: rgba(255, 255, 255, .6); }

/* Four to a row, never more. --_cols is the only number that sets it: each
   pill's basis is exactly one column's share of the row after the gaps, and
   the pills do not grow, so a fifth cannot fit on the line and every row has
   the same four widths. The list is narrower than the container so four tiles
   stay pill-shaped instead of stretching into bars. */
.ai-logos__list {
	--_gap: clamp(.75rem, 2vw, 1.25rem);
	--_cols: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--_gap);
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Each mark sits in its own pill. Loose logos on a bare strip read as
   placeholder art; a consistent container makes the row look specified. */
.ai-logos__list li {
	display: flex;
	align-items: center;
	justify-content: center;
	/* One column's width, fixed: no grow, so a short last row keeps the same
	   tile size as the rows above and sits centred under them (justify-content
	   on the list) rather than stretching to fill the line. The flex line is
	   what holds the shape while the lazy logos are still on their way;
	   min-height holds the rest. */
	flex: 0 0 calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));
	/* The basis is the whole tile. Left to content-box, the padding and border
	   are added on top and four tiles no longer fit on the line. */
	box-sizing: border-box;
	min-width: 0;
	min-height: 64px;
	padding: .65rem 1.1rem;
	border-radius: var(--r-pill, 999px);
	border: 1px solid var(--ai-line, #E7E2EF);
	background: rgba(255, 255, 255, .65);
	transition:
		transform .35s var(--_ease),
		border-color .35s var(--_ease),
		box-shadow .35s var(--_ease);
}

@media (hover: hover) {
	.ai-logos__list li:hover {
		transform: translateY(-3px);
		border-color: rgba(105, 13, 172, .32);
		box-shadow: 0 12px 30px rgba(105, 13, 172, .12);
	}
}

.ai-logos.is-dark .ai-logos__list li {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
}

@media (hover: hover) {
	.ai-logos.is-dark .ai-logos__list li:hover {
		border-color: rgba(255, 255, 255, .32);
		box-shadow: none;
	}
}

.ai-logos__list img {
	display: block;
	/* Shrinks with the pill rather than out of it — the tiles are narrower now
	   that every brand is laid out at once, and a wide wordmark would otherwise
	   push past its own border. */
	max-height: clamp(26px, 3.4vw, 42px);
	max-width: 100%;
	width: auto;
}

/* Phones: four across a 375px screen leaves each mark about 60px wide, too
   small to read a wordmark. Two to a row halves the desktop grid cleanly, so
   the columns still line up with the four-up layout they come from. */
@media (max-width: 600px) {
	.ai-logos__list {
		--_gap: .5rem;
		--_cols: 2;
	}

	.ai-logos__list li {
		min-height: 52px;
		padding: .45rem .6rem;
	}
}

/* Colour at rest, muted under the pointer. These marks are the section's whole
   argument — "100+ brands trust us" is only worth reading if you can tell whose
   brands they are — so greying them until someone happens to hover hides the
   proof from everyone who does not.

   The rule hangs off the pill, not the image: the li carries padding, and
   driving it from img:hover left a dead band around the artwork where nothing
   responded. */
.ai-logos.is-mute-hover img {
	transition: filter .24s var(--ease, ease), opacity .24s var(--ease, ease);
}

@media (hover: hover) {
	.ai-logos.is-mute-hover li:hover img {
		filter: grayscale(1);
		opacity: .55;
	}
}

/* --- Continuous scroll ---------------------------------------------------
   One list rendered twice, translated left by exactly half its own width. At
   the end of the animation the second set is standing where the first set
   started, so the jump back to 0% is invisible and there is no seam to time.

   The exactness matters: N items carry N-1 gaps, so half of a doubled list is
   one set plus half a gap — a visible stutter every lap. The trailing padding
   below adds the missing gap, which makes the two halves genuinely identical.

   Lap time is --_count x --_per, both set inline by the widget from the number
   of logos, so the row moves at the same speed whatever is in the library. */
/* Full width whether it scrolls or not: .ai-logos__inner is a grid with
   justify-items:center, so an un-stretched child shrinks to its content — and
   the marquee's content is two full sets wide, which would blow the row out
   of the container instead of being clipped by it. */
.ai-logos__viewport { width: 100%; }

.ai-logos.is-marquee .ai-logos__viewport {
	overflow: hidden;
	/* Fades the row out at both edges instead of clipping a logo mid-letter,
	   which is what makes it read as motion rather than as a cut-off row. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ai-logos.is-marquee .ai-logos__list {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	max-width: none;
	padding-inline-end: var(--_gap);
	animation: ai-logo-marquee calc(var(--_count, 12) * var(--_per, 1.5s)) linear infinite;
}

/* Stops for anyone reading it, by pointer or by keyboard. A moving row that
   cannot be held still is the part of a marquee people actually object to. */
.ai-logos.is-marquee .ai-logos__viewport:hover .ai-logos__list,
.ai-logos.is-marquee .ai-logos__viewport:focus-within .ai-logos__list {
	animation-play-state: paused;
}

/* Moving, the row is as long as it likes, so the tiles go back to sitting at
   their own size — with the floor that kept them uniform before they flexed. */
.ai-logos.is-marquee .ai-logos__list li {
	flex: none;
	min-width: 148px;
	padding-inline: 1.5rem;
}

@keyframes ai-logo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Asked not to move: the strip becomes exactly what it was before — a static
   wrapped row — and the duplicate set goes away so nothing is listed twice. */
@media (prefers-reduced-motion: reduce) {
	.ai-logos.is-marquee .ai-logos__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ai-logos.is-marquee .ai-logos__list {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 960px;
		padding-inline-end: 0;
		animation: none;
	}

	/* Back to the four-column tiles the static strip uses, or the fallback rows
	   would wrap at each logo's own width and come out ragged. */
	.ai-logos.is-marquee .ai-logos__list li {
		flex: 0 0 calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));
		min-width: 0;
		padding-inline: 1.1rem;
	}

	.ai-logos.is-marquee .ai-logos__list .is-clone { display: none; }
}

/* Wordmark fallback while the real client logos are pending. */
.ai-logos__word {
	font-family: var(--font-display, Outfit, sans-serif);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	letter-spacing: -.01em;
	color: var(--ai-ink, #14111F);
	opacity: .48;
	transition: opacity .35s var(--_ease);
}

@media (hover: hover) {
	.ai-logos__word:hover { opacity: 1; }
}

.ai-logos.is-dark .ai-logos__word { color: #fff; opacity: .55; }

/* ==========================================================================
   Problem / solution
   ========================================================================== */
.ai-compare { padding-block: clamp(2.7rem, 5.4vw, 4.2rem); }

.ai-compare__inner {
	max-width: var(--container, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ai-compare__cols { display: grid; gap: .9rem; }

/* --- Column headers ------------------------------------------------------ */
.ai-compare__legend {
	display: grid;
	grid-template-columns: 1fr 4.5rem 1fr;
	gap: 1rem;
	margin-bottom: .35rem;
}

.ai-compare__legend-item {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .8rem 1.35rem;
	border-radius: 14px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba(var(--_neg-rgb), .1);
	color: var(--_neg);
}

.ai-compare__legend-item.is-solution {
	grid-column: 3;
	background: rgba(105, 13, 172, .1);
	color: var(--_violet);
}

.ai-compare__legend-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--_neg);
	color: #fff;
}

.ai-compare__legend-item.is-solution .ai-compare__legend-icon { background: var(--_violet); }

.is-dark .ai-compare__legend-item { background: rgba(255, 255, 255, .07); color: #fff; }

/* --- Rows ---------------------------------------------------------------- */
.ai-compare__row {
	display: grid;
	grid-template-columns: 1fr 4.5rem 1fr;
	gap: 1rem;
	align-items: stretch;
}

.ai-compare__cell {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.2rem 1.45rem;
	border-radius: 16px;
	transition:
		transform .4s var(--_ease),
		box-shadow .4s var(--_ease),
		background .4s var(--_ease);
}

.ai-compare__cell-body { min-width: 0; }

.ai-compare__cell p {
	margin: 0;
	font-size: .97rem;
	line-height: 1.6;
}

.ai-compare__cell-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	transition: transform .4s var(--_ease);
}

/* The problem side stays cool and unresolved; the solution side is the one
   that reads as finished. That contrast is the whole point of the section, so
   it is carried by state colours rather than by the brand ramp. */
.ai-compare__cell.is-problem {
	color: var(--_slate);
	background: rgba(var(--_neg-rgb), .05);
	border: 1px solid rgba(var(--_neg-rgb), .16);
}

.ai-compare__cell.is-problem .ai-compare__cell-icon {
	background: rgba(var(--_neg-rgb), .12);
	color: var(--_neg);
}

.ai-compare__cell.is-solution {
	background: rgba(var(--_pos-rgb), .06);
	border: 1px solid rgba(var(--_pos-rgb), .18);
}

.ai-compare__cell.is-solution .ai-compare__cell-icon {
	background: rgba(var(--_pos-rgb), .13);
	color: var(--_pos);
}

.ai-compare__cell.is-solution p {
	color: var(--_ink);
	font-weight: 500;
}

.is-dark .ai-compare__cell.is-problem {
	background: rgba(255, 255, 255, .03);
	border-color: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .62);
}

.is-dark .ai-compare__cell.is-solution {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .2);
}

.is-dark .ai-compare__cell.is-solution p { color: #fff; }

@media (hover: hover) {
	.ai-compare__row:hover .ai-compare__cell.is-solution {
		transform: translateY(-4px);
		box-shadow: 0 18px 40px rgba(31, 157, 107, .16);
	}
}

@media (hover: hover) {
	.ai-compare__row:hover .ai-compare__cell-icon { transform: scale(1.08); }
}

.ai-compare__arrow {
	position: relative;
	display: grid;
	place-items: center;
	align-self: center;
	width: 44px;
	height: 44px;
	margin-inline: auto;
	border-radius: 50%;
	color: #fff;
	background: var(--_grad-cta);
	box-shadow: 0 10px 24px rgba(242, 101, 34, .3);
	transition: transform .4s var(--_ease);
}

/* A ring pulsing outward, so the eye follows the direction of the change.
   The theme's prefers-reduced-motion rule flattens this to nothing. */
.ai-compare__arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(242, 101, 34, .55);
	animation: ai-pulse 2.6s var(--_ease) infinite;
}

@media (hover: hover) {
	.ai-compare__row:hover .ai-compare__arrow { transform: scale(1.12); }
}

@keyframes ai-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   Split showcase
   ========================================================================== */
.ai-split { padding-block: clamp(2.4rem, 4.8vw, 3.9rem); }

.ai-split__inner {
	max-width: var(--container, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: center;
}

/* No image (screenshots are off until the client sends new ones): one column,
   and the points spread across the width instead of stacking down a narrow
   strip of it. */
.ai-split.no-media .ai-split__inner { grid-template-columns: minmax(0, 1fr); }

.ai-split.no-media .ai-split__points {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem 2.5rem;
}

.ai-split.media-left .ai-split__copy  { order: 2; }
.ai-split.media-left .ai-split__media { order: 1; }

.ai-split .ai-sec-head { margin-bottom: 2rem; }

.ai-split__points {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-split__points li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 1rem;
	align-items: start;
}

.ai-split__points .ai-icon-bubble {
	position: relative;
	overflow: hidden;
	transition: transform .4s var(--_ease), color .3s var(--_ease);
}

.ai-split__points .ai-icon-bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--_grad-cta);
	opacity: 0;
	transition: opacity .4s var(--_ease);
}

.ai-split__points .ai-icon-bubble svg { position: relative; z-index: 1; }

@media (hover: hover) {
	.ai-split__points li:hover .ai-icon-bubble {
		transform: translateY(-2px) rotate(-5deg);
		color: #fff;
	}
}

@media (hover: hover) {
	.ai-split__points li:hover .ai-icon-bubble::before { opacity: 1; }
}

.is-dark .ai-split__points .ai-icon-bubble {
	background: rgba(242, 101, 34, .16);
	color: var(--_orange);
}

.ai-split__points h3 {
	margin: 0 0 .25rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.ai-split__points p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
}

.is-dark .ai-split__points p { color: rgba(255, 255, 255, .74); }

.ai-split__actions { margin-top: 2.25rem; }

/* Frame */
.ai-split__media { position: relative; }

/* Brand-coloured glow bedded under the screenshot, so the frame reads as lit
   rather than pasted onto the section. */
.ai-split__media::before {
	content: "";
	position: absolute;
	inset: 10% 8%;
	z-index: 0;
	border-radius: 48px;
	background: var(--_grad-cta);
	filter: blur(52px);
	opacity: .2;
	pointer-events: none;
}

/* Perforation dots at the outer corner of the media column — the one piece of
   ornament that says "engineering drawing" without another gradient. */
.ai-split__media::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -30px;
	inset-inline-start: -30px;
	width: 118px;
	height: 118px;
	background-image: radial-gradient(circle, rgba(105, 13, 172, .3) 1.7px, transparent 1.7px);
	background-size: 17px 17px;
	pointer-events: none;
}

.ai-split.media-right .ai-split__media::after {
	inset-inline: auto -30px;
}

.is-dark .ai-split__media::after {
	background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1.7px, transparent 1.7px);
}

/* --- Callout under the screenshot ----------------------------------------
   The claim the dashboards make is that the numbers are live. Saying so in a
   card bolted to the frame keeps that claim next to the evidence instead of
   stranded in the copy column. */
.ai-split__callout {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.15rem;
	padding: 1.05rem 1.3rem;
	background: var(--ai-white, #fff);
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 20px);
	box-shadow: 0 18px 44px rgba(105, 13, 172, .1);
}

.ai-split__callout-title {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	color: var(--_violet);
}

.ai-split__callout-text {
	margin: .2rem 0 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--_slate);
}

/* Drops first: it is the only part of the callout carrying no information. */
.ai-split__spark {
	flex: none;
	width: 116px;
	height: 40px;
	margin-inline-start: auto;
}

.is-dark .ai-split__callout {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}

.is-dark .ai-split__callout-title { color: #fff; }
.is-dark .ai-split__callout-text  { color: rgba(255, 255, 255, .74); }

.ai-frame {
	position: relative;
	z-index: 1;
	border-radius: var(--r-lg, 20px);
	overflow: hidden;
	background: var(--ai-white, #fff);
	border: 1px solid var(--ai-line, #E7E2EF);
	box-shadow: 0 24px 60px rgba(105, 13, 172, .16);
	transition: transform .55s var(--_ease), box-shadow .55s var(--_ease);
}

@media (hover: hover) {
	.ai-split__media:hover .ai-frame {
		transform: translateY(-10px);
		box-shadow: 0 40px 80px rgba(105, 13, 172, .24);
	}
}

.is-dark .ai-frame {
	border-color: rgba(255, 255, 255, .14);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}

.ai-frame img { display: block; width: 100%; height: auto; }

.ai-frame__bar {
	display: flex;
	gap: .4rem;
	padding: .75rem 1rem;
	background: var(--ai-mist, #F7F5FA);
	border-bottom: 1px solid var(--ai-line, #E7E2EF);
}

.is-dark .ai-frame__bar {
	background: rgba(255, 255, 255, .07);
	border-bottom-color: rgba(255, 255, 255, .12);
}

.ai-frame__bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ai-line, #E7E2EF);
}

.frame-phone .ai-frame {
	max-width: 320px;
	margin-inline: auto;
	border-radius: 34px;
	padding: 10px;
	background: var(--ai-ink, #14111F);
}

.frame-phone .ai-frame img { border-radius: 26px; }

.frame-plain .ai-frame {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* ==========================================================================
   Process steps
   ========================================================================== */
.ai-steps { padding-block: clamp(2.4rem, 4.8vw, 3.9rem); }

.ai-steps__inner {
	max-width: var(--container, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ai-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* isolate, so the hover card below stays scoped to the step. Without it the
   section's own decor orbs — also on z-index -1, and later in the tree — would
   paint over the card. */
.ai-step {
	position: relative;
	isolation: isolate;
}

/* A card that only exists on hover. Insets are negative so the step keeps its
   natural box for layout — including the connector geometry below, which is
   measured from the icon, not from a padding box. */
.ai-step::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -1.5rem -1.35rem;
	border-radius: var(--r-lg, 20px);
	background: var(--ai-white, #fff);
	border: 1px solid var(--_line);
	box-shadow: 0 18px 44px rgba(105, 13, 172, .12);
	opacity: 0;
	transform: scale(.97);
	transition: opacity .4s var(--_ease), transform .4s var(--_ease);
}

.is-dark .ai-step::before {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}

@media (hover: hover) {
	.ai-step:hover::before { opacity: 1; transform: scale(1); }
}

/* Connector between steps, wide screens only. */
@media (min-width: 960px) {
	.ai-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 27px;
		left: calc(56px + 1rem);
		right: calc(-1 * clamp(1.5rem, 3vw, 2.25rem));
		height: 1px;
		background: linear-gradient(90deg, rgba(242, 101, 34, .5), rgba(242, 101, 34, 0));
	}
}

.ai-step__marker {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin-bottom: 1.25rem;
}

.ai-step__num {
	font-family: var(--font-display, Outfit, sans-serif);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -.02em;
	background: linear-gradient(100deg, #690DAC, #F26522);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ai-step__icon {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: var(--r-md, 16px);
	background: rgba(105, 13, 172, .09);
	color: var(--ai-violet, #690DAC);
	transition: transform .4s var(--_ease), color .3s var(--_ease);
}

.ai-step__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--_grad-cta);
	opacity: 0;
	transition: opacity .4s var(--_ease);
}

.ai-step__icon svg { position: relative; z-index: 1; }

@media (hover: hover) {
	.ai-step:hover .ai-step__icon {
		transform: translateY(-3px) scale(1.06);
		color: #fff;
	}
}

@media (hover: hover) {
	.ai-step:hover .ai-step__icon::before { opacity: 1; }
}

.is-dark .ai-step__icon {
	background: rgba(242, 101, 34, .16);
	color: var(--ai-orange, #F26522);
}

.ai-step__title {
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.ai-step__text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.65;
}

.is-dark .ai-step__text { color: rgba(255, 255, 255, .72); }

/* auto-fit's 230px floor drops to a single column below ~520px, which turns
   four short steps into four screens. Two up keeps the sequence readable as a
   sequence — read across, then down — and the marker stacks so the number and
   the chip are not competing with the title for the same 150px. */
@media (max-width: 560px) {
	.ai-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}

	.ai-step__marker {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		margin-bottom: .8rem;
	}

	.ai-step__icon {
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}

	.ai-step__icon svg { width: 20px; height: 20px; }

	.ai-step__title { font-size: 1rem; }

	.ai-step__text { font-size: .85rem; line-height: 1.55; }

	/* The hover card's negative insets are sized for a full-width step; at half
	   the width they overlap the neighbouring column. */
	.ai-step::before { inset: -.9rem -.7rem; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.ai-cta { padding-block: clamp(1.8rem, 3.6vw, 3rem); }

.ai-cta__inner {
	max-width: var(--container, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ai-cta__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-xl, 28px);
	padding: clamp(2.25rem, 4.5vw, 3.75rem);
	/* Deliberately NOT the full brand gradient. The actions column sits across
	   59-94% of this panel; with the magenta-to-orange stops there, solid white
	   measured 3.57:1 and the button outline 2.03:1. Holding the panel in the
	   dark violet range keeps white text at 9:1 and the outline at 3.6:1. The
	   orange stays as the decorative bloom below, clear of any text. */
	background: linear-gradient(115deg, #14111F 0%, #3F0151 45%, #690DAC 100%);
	/* Oversized so the gradient has somewhere to travel; the drift is slow
	   enough to register as depth rather than as movement. Flattened by the
	   theme's prefers-reduced-motion rule. */
	background-size: 170% 170%;
	animation: ai-drift 20s ease-in-out infinite alternate;
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 3.5rem);
	row-gap: clamp(1.75rem, 3.5vw, 2.75rem);
	/* Top, not centre. The card is shorter than the pitch beside it, and
	   centring it left a band of dead gradient above and below. */
	align-items: start;
}

/* Brand-orange bloom, kept in the bottom-left corner so it never lifts the
   luminance behind the heading or the buttons. */
.ai-cta__panel::before {
	content: "";
	position: absolute;
	inset: auto auto -45% -12%;
	width: 46%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(242, 101, 34, .38) 0%, transparent 66%);
	pointer-events: none;
}

/* Faint violet counter-glow, top right. */
.ai-cta__panel::after {
	content: "";
	position: absolute;
	inset: -50% -14% auto auto;
	width: 40%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(179, 32, 140, .3) 0%, transparent 68%);
	pointer-events: none;
}

@keyframes ai-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

.ai-cta__copy,
.ai-cta__card,
.ai-cta__assurances { position: relative; z-index: 1; }

.ai-cta__panel .ai-eyebrow { color: rgba(255, 255, 255, .85); }
.ai-cta__panel .ai-eyebrow::before { background: rgba(255, 255, 255, .7); }

.ai-cta__heading {
	margin: .75rem 0 0;
	color: #fff;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	text-wrap: balance;
}

.ai-cta__text {
	margin: 1rem 0 0;
	max-width: 52ch;
	color: rgba(255, 255, 255, .88);
	line-height: 1.7;
}

/* --- Booking card --------------------------------------------------------
   Two loose buttons on a gradient panel were the weakest part of the page:
   nothing said what "a demo" actually is before you clicked. Giving the
   action its own raised surface — icon, name, terms, then the button — makes
   the offer legible at a glance and the click a smaller step. */
.ai-cta__card {
	/* Disc beside the copy, not stacked above it. Stacked, the card was taller
	   than the pitch it sits next to and drove the whole panel's height; this
	   is a wide banner, and its proportions come from the card. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.15rem, 2.4vw, 1.85rem);
	align-items: center;
	padding: clamp(1.5rem, 2.6vw, 2rem);
	border-radius: var(--r-xl, 28px);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .17);
	backdrop-filter: blur(10px);
}

.ai-cta__card-icon {
	display: grid;
	place-items: center;
	width: clamp(68px, 6vw, 84px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	color: var(--_violet);
	/* A ring of the panel's own light rather than a border, so the disc reads
	   as lifted off the gradient instead of cut into it. */
	box-shadow: 0 0 0 9px rgba(255, 255, 255, .09), 0 18px 40px rgba(20, 17, 31, .35);
}

.ai-cta__card-title {
	display: block;
	font-family: var(--font-display, "Outfit", system-ui, sans-serif);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	transition: color .24s var(--_ease);
}

@media (hover: hover) {
	.ai-cta__card-title:hover { color: #fff; text-decoration: underline; }
}

.ai-cta__card-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: .8rem;
}

/* Rule under the title, action against the card's far edge — the row reads as
   a header bar rather than as two things that happen to be adjacent. */
.ai-cta__card-meta .ai-cta__link { margin-inline-start: auto; }

.ai-cta__card-rule {
	flex: none;
	width: 44px;
	height: 4px;
	border-radius: 4px;
	background: var(--_grad-on-dark);
}

.ai-cta__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
	color: #fff;
}

.ai-cta__link::after {
	/* Escaped rather than literal: this file ships without an @charset rule,
	   so a stylesheet served as anything but UTF-8 would mangle a raw arrow. */
	content: "\2192";
	transition: transform .3s var(--_ease);
}

@media (hover: hover) {
	.ai-cta__link:hover { color: #fff; }
}

@media (hover: hover) {
	.ai-cta__link:hover::after { transform: translateX(4px); }
}

/* --- What the demo involves ---------------------------------------------- */
.ai-cta__assurances {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 1.7rem);
	list-style: none;
	border-radius: var(--r-lg, 20px);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
}

.ai-cta__assurances li {
	display: flex;
	align-items: center;
	gap: .9rem;
}

.ai-cta__assurance-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .11);
	color: #fff;
}

.ai-cta__assurance-title {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
}

.ai-cta__assurance-text {
	margin: .2rem 0 0;
	font-size: .875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .74);
}

.ai-btn--on-gradient {
	background: #fff;
	color: var(--ai-violet-deep, #3F0151);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

@media (hover: hover) {
	.ai-btn--on-gradient:hover {
		color: var(--ai-violet-deep, #3F0151);
		transform: translateY(-2px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
	}
}

.ai-btn--ghost-light {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

@media (hover: hover) {
	.ai-btn--ghost-light:hover {
		color: #fff;
		box-shadow: inset 0 0 0 2px #fff;
	}
}

.ai-cta__note {
	margin: .9rem 0 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 901px) {
	.ai-cta__assurances { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Only meaningful while all three sit on one line; stacked, a left border
	   would draw down the side of the column instead of between the items. */
	.ai-cta__assurances li + li {
		padding-left: clamp(1rem, 2.5vw, 1.75rem);
		border-left: 1px solid rgba(255, 255, 255, .13);
	}
}

@media (max-width: 560px) {
	/* Below this the disc and the copy each get less than half a phone width,
	   so the card goes back to stacking. */
	.ai-cta__card { grid-template-columns: minmax(0, 1fr); }

	/* Paired fields would be about 8rem wide here — too narrow to read back a
	   company name or a phone number in. */
	.ai-form__grid { grid-template-columns: minmax(0, 1fr); }
	.ai-form__submit { width: 100%; justify-content: center; }
}

@media (max-width: 900px) {
	.ai-split__inner { grid-template-columns: minmax(0, 1fr); }

	/* The reassurances read as an introduction above the form rather than as a
	   column beside it. */
	.ai-form__layout { grid-template-columns: minmax(0, 1fr); }

	.ai-split.media-left .ai-split__copy,
	.ai-split.media-left .ai-split__media { order: initial; }

	.ai-cta__panel { grid-template-columns: minmax(0, 1fr); }
}

/* The pairing IS the section: problem on the left, the thing that fixes it on
   the right, and an arrow between them saying which way the reading goes.
   Stacking those into one column turns eight cells into a list and throws that
   away, so the two columns hold at every width. What gives instead is the
   furniture around them, and it gives continuously — every value below is a
   clamp that lands on the desktop number at 720px, so there is no step at the
   breakpoint, only a slow tightening as the viewport narrows. */
@media (max-width: 720px) {
	.ai-compare__cols { gap: .6rem; }

	.ai-compare__legend,
	.ai-compare__row {
		grid-template-columns: minmax(0, 1fr) clamp(2.25rem, 10vw, 4.5rem) minmax(0, 1fr);
		gap: clamp(.5rem, 2.2vw, 1rem);
	}

	.ai-compare__legend-item {
		gap: clamp(.45rem, 1.6vw, .7rem);
		padding: clamp(.6rem, 2vw, .8rem) clamp(.55rem, 3vw, 1.35rem);
		font-size: clamp(.625rem, 1.9vw, .78rem);
		letter-spacing: .06em;
	}

	.ai-compare__legend-icon {
		flex: 0 0 auto;
		width: clamp(20px, 3.6vw, 26px);
		height: clamp(20px, 3.6vw, 26px);
	}

	.ai-compare__legend-icon svg {
		width: clamp(11px, 1.95vw, 14px);
		height: clamp(11px, 1.95vw, 14px);
	}

	.ai-compare__cell {
		gap: clamp(.6rem, 2.6vw, 1.1rem);
		padding: clamp(.85rem, 2.6vw, 1.2rem) clamp(.8rem, 3.2vw, 1.45rem);
	}

	.ai-compare__cell p {
		font-size: clamp(.8rem, 2.2vw, .97rem);
		line-height: 1.5;
	}

	.ai-compare__cell-icon {
		width: clamp(34px, 6.4vw, 46px);
		height: clamp(34px, 6.4vw, 46px);
		border-radius: clamp(11px, 1.95vw, 14px);
	}

	.ai-compare__cell-icon svg {
		width: clamp(17px, 3.05vw, 22px);
		height: clamp(17px, 3.05vw, 22px);
	}

	.ai-compare__arrow {
		width: clamp(32px, 6.1vw, 44px);
		height: clamp(32px, 6.1vw, 44px);
		box-shadow: 0 6px 14px rgba(242, 101, 34, .3);
	}

	.ai-compare__arrow svg {
		width: clamp(15px, 2.8vw, 20px);
		height: clamp(15px, 2.8vw, 20px);
	}
}

/* Below this the chip beside the copy is the expensive half of the cell: it
   costs a third of a 140px column and leaves the sentence breaking after two
   words. Above the copy it costs a line of height instead. */
@media (max-width: 560px) {
	.ai-compare__cell {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Column flex sizes children to their content; the copy needs the cell. */
	.ai-compare__cell-body { align-self: stretch; }
}

/* ==========================================================================
   Pricing — the package cards and the comparison table under them
   ========================================================================== */
.ai-plans {
	padding-block: clamp(3rem, 7vw, 6rem);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ai-plans::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20%;
	inset-inline-start: -12%;
	width: min(620px, 60vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(242, 101, 34, .1), transparent 66%);
	pointer-events: none;
}

.ai-plans__grid {
	display: grid;
	/* auto-fit rather than a fixed three: the widget takes any number of
	   packages, and a fourth tier should not need a stylesheet edit. */
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.ai-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.4vw, 2rem);
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 20px);
	background: var(--ai-white, #fff);
	box-shadow: var(--shadow-card, 0 4px 24px rgba(105, 13, 172, .08));
	transition: transform .24s var(--_ease), box-shadow .24s var(--_ease);
}

/* The highlighted tier takes the brand gradient as its border. Two painted
   backgrounds — one clipped to the padding box, one to the border box — is
   the only way to get a gradient border that still has a border radius. */
.ai-plan.is-featured {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--ai-white, #fff), var(--ai-white, #fff)) padding-box,
		var(--_grad-cta) border-box;
	box-shadow: var(--shadow-lift, 0 18px 48px rgba(105, 13, 172, .18));
}

@media (hover: hover) {
	.ai-plan:hover {
		translate: 0 -6px;
		box-shadow: var(--shadow-lift, 0 18px 48px rgba(105, 13, 172, .18));
	}
}

.ai-plan__badge {
	position: absolute;
	top: -.85rem;
	inset-inline-end: 1.25rem;
	margin: 0;
	padding: .3rem .8rem;
	border-radius: var(--r-pill, 999px);
	background: var(--_grad-cta);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ai-plan__head {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.ai-plan__head .ai-icon-bubble { margin-bottom: 0; }

.ai-plan__name {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
}

.ai-plan__summary {
	margin: .85rem 0 0;
	font-size: 15.5px;
	color: var(--_slate);
}

.ai-plan__price {
	margin: 1.25rem 0 0;
	font-family: var(--font-display, "Outfit", sans-serif);
	font-size: clamp(1.75rem, 2.8vw, 2.35rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--_ink);
}

.ai-plan__price-note {
	margin: .35rem 0 0;
	font-size: 13.5px;
	color: var(--_slate);
}

.ai-plan__cta {
	margin-top: 1.35rem;
	justify-content: center;
	width: 100%;
}

.ai-plan__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.35rem 0 0;
	border-top: 1px solid var(--_line);
	display: grid;
	gap: .7rem;
	font-size: 15.5px;
}

.ai-plan__list li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
}

.ai-plan__tick {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: .18rem;
	border-radius: 50%;
	background: rgba(var(--_pos-rgb), .14);
	color: var(--_pos);
}

/* A capability this package does not carry. Muted rather than struck through:
   the point is the ceiling of the tier, not a failure. */
.ai-plan__list li.is-off { color: rgba(91, 85, 112, .62); }

.ai-plan__list li.is-off .ai-plan__tick {
	background: rgba(91, 85, 112, .1);
	color: rgba(91, 85, 112, .6);
}

.ai-plans__footnote {
	margin: 1.5rem 0 0;
	font-size: 14.5px;
	color: var(--_slate);
	text-align: center;
}

/* --- Comparison table ----------------------------------------------------- */
.ai-plans__compare {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 20px);
	background: var(--ai-white, #fff);
	overflow: hidden;
}

.ai-plans__compare-title {
	margin: 0;
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	font-size: 1.25rem;
	border-bottom: 1px solid var(--_line);
}

.ai-plans__scroll { overflow-x: auto; }

.ai-plans__table {
	width: 100%;
	border-collapse: collapse;
	/* Below this the capability column and three value columns each get about
	   nine characters, which wraps every row to four lines. */
	min-width: 640px;
	font-size: 15px;
	text-align: start;
}

.ai-plans__table th,
.ai-plans__table td {
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--_line);
	vertical-align: top;
}

.ai-plans__table thead th {
	font-family: var(--font-display, "Outfit", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--_ink);
	background: var(--_mist);
	text-align: start;
}

.ai-plans__table tbody th {
	font-weight: 600;
	color: var(--_ink);
	text-align: start;
}

/* The row label follows the reader across a horizontal scroll — without it a
   scrolled table is a grid of ticks with nothing naming the rows. */
.ai-plans__table th:first-child {
	position: sticky;
	inset-inline-start: 0;
	background: var(--ai-white, #fff);
	z-index: 1;
}

.ai-plans__table thead th:first-child { background: var(--_mist); }

.ai-plans__group th {
	background: var(--_mist);
	font-family: var(--font-display, "Outfit", sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--_violet);
}

.ai-plans__yes {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(var(--_pos-rgb), .14);
	color: var(--_pos);
}

.ai-plans__no { color: rgba(91, 85, 112, .45); }

.ai-plans__val {
	font-weight: 600;
	color: var(--_ink);
}

.ai-plans__scroll:focus-visible { outline-offset: -2px; }

@media (max-width: 560px) {
	.ai-plan { padding: 1.35rem; }
	.ai-plans__compare-title { font-size: 1.1rem; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.ai-quotes {
	padding-block: clamp(3rem, 7vw, 6rem);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ai-quotes__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.ai-quotes__grid[data-cols="3"] { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.ai-quotes__grid[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.ai-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(1.5rem, 2.4vw, 2rem);
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 20px);
	background: var(--ai-white, #fff);
	box-shadow: var(--shadow-card, 0 4px 24px rgba(105, 13, 172, .08));
	transition: transform .24s var(--_ease), box-shadow .24s var(--_ease);
}

@media (hover: hover) {
	.ai-quote:hover {
		translate: 0 -6px;
		box-shadow: var(--shadow-lift, 0 18px 48px rgba(105, 13, 172, .18));
	}
}

.ai-quote__mark {
	color: var(--_violet);
	opacity: .22;
	line-height: 0;
}

/* A quote whose wording the client has not signed off yet. Deliberately
   conspicuous: an unmarked draft sitting in a testimonial slot reads as a real
   customer saying something they never said. */
.ai-quote.is-pending { border-style: dashed; }

.ai-quote__pending {
	margin: .85rem 0 0;
	padding: .45rem .75rem;
	border-radius: var(--r-sm, 10px);
	background: var(--ai-cream, #FFF2DF);
	color: #8A4B12;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

.ai-quote__text {
	margin: 1rem 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--_ink);
}

.ai-quote__text p { margin: 0; }

.ai-quote__metric {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 1rem 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--_violet);
}

.ai-quote__metric span { line-height: 0; }

.ai-quote__by {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Pushed to the bottom so a short quote and a long one still line their
	   attributions up across a row. */
	margin: auto 0 0;
	padding-top: 1.25rem;
}

.ai-quote__by > div + .ai-quote__logo { flex: 0 0 auto; }

.ai-quote__name {
	margin: 1.25rem 0 0;
	font-family: var(--font-display, "Outfit", sans-serif);
	font-weight: 700;
	color: var(--_ink);
}

.ai-quote__by > div > .ai-quote__name:first-child { margin-top: 0; }

.ai-quote__role {
	margin: .15rem 0 0;
	font-size: 14px;
	color: var(--_slate);
}

.ai-quote__logo {
	max-width: 92px;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==========================================================================
   Leadership profiles
   ========================================================================== */
.ai-people {
	padding-block: clamp(3rem, 7vw, 6rem);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ai-people__list {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.ai-people__list[data-layout="grid"] {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Two people (the homepage founders): two square cards across the full width
   would each carry a portrait over 500px tall. Each card holds its portrait
   beside the profile instead, so the pair reads as one row. */
@media (min-width: 960px) {
	.ai-people__list[data-layout="grid"][data-cols="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ai-people__list[data-layout="grid"][data-cols="2"] .ai-person {
		flex-direction: row;
	}

	.ai-people__list[data-layout="grid"][data-cols="2"] .ai-person__media {
		flex: 0 0 40%;
		aspect-ratio: auto;
		min-height: 300px;
	}

	/* The column is as tall as the profile beside it, which the media grid's
	   own row does not know about — pinned to the box, the photo fills it.
	   The size is restated here because Elementor's `.elementor img` rule
	   (height: auto) outranks the base .ai-person__photo rule. */
	.ai-people__list[data-layout="grid"][data-cols="2"] .ai-person__photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

.ai-people__list[data-layout="grid"] .ai-person__photo { object-position: 50% 20%; }

.ai-person {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--_line);
	border-radius: var(--r-lg, 20px);
	background: var(--ai-white, #fff);
	box-shadow: var(--shadow-card, 0 4px 24px rgba(105, 13, 172, .08));
	overflow: hidden;
	transition: transform .24s var(--_ease), box-shadow .24s var(--_ease);
}

@media (hover: hover) {
	.ai-person:hover {
		translate: 0 -6px;
		box-shadow: var(--shadow-lift, 0 18px 48px rgba(105, 13, 172, .18));
	}
}

.ai-person__media {
	position: relative;
	background: var(--_grad-dark);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.ai-person__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ai-person__initials {
	font-family: var(--font-display, "Outfit", sans-serif);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .5);
}

.ai-person__badge {
	position: absolute;
	inset-block-end: .9rem;
	inset-inline-start: .9rem;
	margin: 0;
	padding: .3rem .8rem;
	border-radius: var(--r-pill, 999px);
	background: var(--_grad-cta);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ai-person__body { padding: clamp(1.35rem, 2.2vw, 1.85rem); }

.ai-person__name {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
}

.ai-person__role {
	margin: .2rem 0 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--_violet);
}

.ai-person__meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .9rem 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--_orange);
}

.ai-person__meta span { line-height: 0; }

.ai-person__bio {
	margin: .9rem 0 0;
	font-size: 15.5px;
	color: var(--_slate);
}

.ai-person__list {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	gap: .5rem;
	font-size: 15px;
}

.ai-person__list li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
}

.ai-person__list li > span:first-child {
	flex: 0 0 auto;
	margin-top: .2rem;
	color: var(--_pos);
	line-height: 0;
}

.ai-person__links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--_line);
}

.ai-person__links a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	/* 44px of height: these are the only links on the page with no card or
	   button around them to enlarge them. */
	min-height: 44px;
	padding: .3rem .85rem;
	border-radius: var(--r-pill, 999px);
	background: rgba(105, 13, 172, .07);
	color: var(--_violet);
	font-size: 14px;
	font-weight: 600;
	word-break: break-word;
	transition: background .24s var(--_ease), color .24s var(--_ease);
}

@media (hover: hover) {
	.ai-person__links a:hover { background: rgba(105, 13, 172, .13); }
}

/* --- Row layout: portrait beside the profile ----------------------------- */
.ai-people__list[data-layout="rows"] .ai-person {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	align-items: stretch;
}

/* The portrait fills its track and its row: width comes from the 260px
   column, height from the stretch. aspect-ratio is deliberately NOT used
   here — a stretched item with an aspect-ratio derives its width from the
   row height, so a long profile pushed the portrait to ~370px and it spilled
   across the text beside it. min-height keeps the portrait shape when the
   profile beside it is short. */
.ai-people__list[data-layout="rows"] .ai-person__media {
	aspect-ratio: auto;
	width: 100%;
	min-width: 0;
	min-height: 340px;
}

@media (max-width: 720px) {
	.ai-people__list[data-layout="rows"] .ai-person { grid-template-columns: minmax(0, 1fr); }

	.ai-people__list[data-layout="rows"] .ai-person__media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

/* ==========================================================================
   Touch
   The hover states above are all behind @media (hover: hover), so a tap can
   no longer leave a card lifted. What a finger gets instead is a press: the
   surface gives slightly under it and returns. Short, and on the same easing
   as everything else, so it reads as the same material.
   ========================================================================== */
@media (hover: none) {
	.ai-feature,
	.ai-stat,
	.ai-step,
	.ai-plan,
	.ai-quote,
	.ai-person,
	.ai-logos__list li,
	.ai-hero__proof li,
	.ai-compare__row { transition: transform .18s var(--_ease), box-shadow .18s var(--_ease); }

	.ai-feature:active,
	.ai-stat:active,
	.ai-step:active,
	.ai-plan:active,
	.ai-quote:active,
	.ai-person:active,
	.ai-logos__list li:active { transform: scale(.985); }

	/* A row is a wide, shallow target: scaling it looks like a glitch, so it
	   tints instead. */
	.ai-compare__row:active .ai-compare__cell.is-solution { background: rgba(var(--_pos-rgb), .13); }

	.ai-feature__link:active,
	.ai-split__link:active,
	.ai-cta__link:active { opacity: .7; }

	/* The arrow only ever moved on hover, so on a phone it never moved. */
	.ai-feature:active .ai-feature__link svg { transform: translateX(5px); }

	.ai-form__submit:active { transform: scale(.98); }

	/* The closing banner's two links are the conversion path on every page and
	   were 26px and 28px tall — the smallest targets on the site sitting under
	   the largest promise. */
	.ai-cta__card-title,
	.ai-cta__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.ai-field input:active,
	.ai-field select:active,
	.ai-field textarea:active { border-color: rgba(105, 13, 172, .38); }
}

/* ==========================================================================
   Small screens
   Fit, mostly: a badge that stays on one line, headings that stop eating the
   first screen, and sections that do not pad themselves to a phone's height.
   ========================================================================== */
@media (max-width: 480px) {
	/* At 375px the hero badge wrapped onto a second line and became a block
	   the width of the screen, which read as a bar rather than a label. */
	.ai-eyebrow.is-pill {
		font-size: 11.5px;
		letter-spacing: .05em;
		padding: .42rem .85rem .42rem .68rem;
		gap: .4rem;
	}
	.ai-eyebrow.is-pill svg { width: 16px; height: 16px; }

	.ai-hero__heading { font-size: 2.15rem; line-height: 1.1; }
	.ai-sec-head h2 { font-size: 1.95rem; }

	.ai-hero__desc,
	.ai-sec-head__intro { font-size: 1rem; }

	/* clamp() bottoms out around 2.4rem, which is a lot of empty on a screen
	   this size once four or five sections have each taken their share. */
	.ai-hero { padding-block: 2.25rem 2.75rem; }
	.ai-features,
	.ai-compare,
	.ai-split,
	.ai-steps,
	.ai-stats,
	.ai-plans,
	.ai-quotes,
	.ai-people,
	.ai-form { padding-block: 2.25rem; }

	.ai-feature { padding: 1.4rem; }
	.ai-note-strip { padding: 1.1rem 1.25rem; gap: .9rem; }

	/* Two lines of a five-word title is fine; four is a paragraph. */
	.ai-cta__heading { font-size: 1.75rem; }
	.ai-cta__panel { padding: 1.6rem 1.35rem; }

	.ai-footer__blurb { font-size: 15px; }
}

@media (max-width: 380px) {
	/* Small Androids and the SE. The badge is the first casualty of a narrow
	   screen, so it drops its icon rather than its words. */
	.ai-eyebrow.is-pill svg { display: none; }
	.ai-eyebrow.is-pill { padding-inline: .8rem; }

	.ai-hero__heading { font-size: 1.95rem; }
	.ai-sec-head h2 { font-size: 1.8rem; }
}

/* --- Ambient motion, off on phones ---------------------------------------
   The hero panel's float and the CTA panel's gradient drift are depth cues
   for a wide screen, where they sit beside something still. Stacked on a
   phone the floating panel is the whole viewport, and an animated 170%
   gradient is a full-width repaint on the weakest GPU that will load this
   page. The compare arrows keep their pulse: on a touch screen it is the
   only ambient signal left once hover is gone, and it is 40px wide. */
@media (max-width: 900px) {
	.ai-hero__media,
	.ai-sec-head__art { animation: none; }
}

@media (max-width: 700px) {
	.ai-cta__panel { animation: none; background-size: 100% 100%; }
}