/* ============ FONTS ============ */
/* TWK Lausanne Pan — self-hosted, woff2 first for size, woff fallback */
@font-face {
	font-family: "TWK Lausanne";
	src:
		url("../fonts/TWKLausanne-300.woff2") format("woff2"),
		url("../fonts/TWKLausanne-300.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TWK Lausanne";
	src:
		url("../fonts/TWKLausanne-300Italic.woff2") format("woff2"),
		url("../fonts/TWKLausanne-300Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "TWK Lausanne";
	src:
		url("../fonts/TWKLausanne-400.woff2") format("woff2"),
		url("../fonts/TWKLausanne-400.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TWK Lausanne";
	src:
		url("../fonts/TWKLausanne-400Italic.woff2") format("woff2"),
		url("../fonts/TWKLausanne-400Italic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "TWK Lausanne";
	src:
		url("../fonts/TWKLausanne-650.woff2") format("woff2"),
		url("../fonts/TWKLausanne-650.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TWK Lausanne";
	src:
		url("../fonts/TWKLausanne-650Italic.woff2") format("woff2"),
		url("../fonts/TWKLausanne-650Italic.woff") format("woff");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/* ============ RESET ============ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
}

/* Smooth scroll site-wide for anchor jumps; instant under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family:
		"TWK Lausanne",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	background: var(--bg);
	color: var(--text);
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	font-weight: 300;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	height: auto;
	max-width: 100%;
}

/* ============ TOKENS ============ */
:root {
	--white: #ffffff;
	--bg: var(--white);
	--bg-reverse: #010101;
	--primary: #fc5c00;
	--primary-soft: #f47c45;
	--navy: #0d2a4d;
	--gold: #f5d23e;
	/* Hero typing word palette: one per cycling word */
	--type-orange: #fc5c00;
	--type-pink: #ffbcf1;
	--type-yellow: #f3f528;
	--text: #282828;
	--text-title: #010101;
	--text-dim: #9a9a9a;
	--text-mute: #6b6b6b;
	--chat-bg: #f4f1ea;
	--bubble-in: #ffffff;
	--bubble-out: #e7e4dd;
	--line: rgba(255, 255, 255, 0.08);
	/* Methodology stage: muted olive that complements the layer-stack art */
	--olive: #475026;
}

/* ============ NAVBAR ============ */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.nav__inner {
	max-width: 1500px;
	margin: 0 auto;
	height: 96px;
	padding: 0 32px;
	display: flex;
	align-items: center;
	gap: 40px;
}

.nav__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.nav__logo-mark {
	width: 30px;
	height: 30px;
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%);
	border-radius: 4px;
}

.nav__logo-text {
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.5px;
}

.nav__links {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0 auto;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: #e8e8e8;
	transition: color 0.18s ease;
}

.nav__link:hover {
	color: #fff;
}

.caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* ============ BUTTONS ============ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 15px;
	border-radius: 999px;
	/* Reserve border box on every variant so bordered/borderless buttons match height (content-box) */
	border: 1px solid transparent;
	transition:
		transform 0.15s ease,
		background 0.18s ease,
		opacity 0.18s ease;
	white-space: nowrap;
}

.btn--ghost {
	padding: 11px 26px;
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
}

.btn--primary {
	padding: 11px 26px;
	background: var(--primary);
	color: #fff;
}

.btn--primary:hover {
	background: var(--primary-soft);
	transform: translateY(-1px);
}

.btn--lg {
	padding: 16px 30px;
	font-size: 16px;
}

/* ============ UTILITIES ============ */
.text-center {
	text-align: center;
}

/* Small label above a heading */
.top-title {
	margin-bottom: 16px;
	font-size: 14px;
	color: #7a7a7a;
}

.top-title--black {
	color: #333;
}

/* ============ HERO ============ */
.section-hero {
	position: relative;
	background: var(--bg-reverse);
	text-align: center;
	overflow: hidden;
}

.hero__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 60px 60px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 35%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 35%, transparent 75%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	max-width: 1060px;
}

/* Hero uses the shared .title; the accent word is colored via .title span */
.section-hero .title {
	margin-bottom: 32px;
}

.hero__subtitle {
	max-width: 760px;
	margin: 0 auto 36px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--text-dim);
}

.hero__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px 28px;
}

/* ============ HERO PINNED REVEAL ============ */
/* Progressive enhancement: static stacked hero by default (no JS /
   reduced-motion). Otherwise JS adds .is-pinned on every viewport — mobile
   included — to pin the whole hero to the BOTTOM of the viewport (sticky
   bottom:0) and grow the section tall, so vertical scroll scrubs the chat
   messages in one by one (see js/script.js). */
.hero__pin {
	position: relative; /* positioning context for .hero__grid + sticky child */
}

/* overflow:clip (not hidden) keeps the grid clipped without making .section-hero a
   scroll container — that would break the sticky descendant. */
.section-hero.is-pinned {
	overflow: clip;
}

/* Tall track (JS sets its height) — gives .hero__inner room to stick against. */
.section-hero.is-pinned .hero__pin {
	position: relative;
	padding-top: 64px;
}

/* .hero__inner bottom-anchors via TOP-sticky: JS sets top = 100vh - innerHeight.
   When content fits, top is 0 (sticky fills the viewport, flex-end drops the chat
   to the bottom); when content is taller, top goes negative so the block pins with
   its bottom at the viewport bottom and the heading scrolls up and out the top.
   sticky bottom:0 can't do this at the top of a page — it only engages for an
   element approached from below (see js/script.js). */
.section-hero.is-pinned .hero__inner {
	position: sticky;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	padding-bottom: 48px;
}

/* First message (.chat__row--in) stays visible from the start; the agent reply,
   order card, then the customer sign-off fade in as JS ramps opacity on scroll —
   the feed itself scrolls so the newest message stays in view. The channels and
   the two side notes slide up on their own beats (see js/script.js). */
.section-hero.is-pinned .chat__row--out,
.section-hero.is-pinned .chat__card,
.section-hero.is-pinned .chat__row--reveal {
	opacity: 0;
	will-change: opacity;
}
.section-hero.is-pinned .channel,
.section-hero.is-pinned .chat__note {
	opacity: 0;
	transform: translateY(18px);
	will-change: opacity, transform;
}

/* Pinned: cap the panel to the viewport and clip it so the message feed can
   scroll within it. Header (72px) + hero inner padding-bottom (48px) + 20px gap. */
.section-hero.is-pinned .chat {
	max-height: calc(100svh - 72px - 48px - 20px);
}
.section-hero.is-pinned .chat__inner {
	max-height: inherit;
	overflow: hidden;
}
/* overflow:hidden clips at the padding-box, so messages stay visible while
   scrolling up through the top padding. Cover that strip with a cream band
   (matches the panel top) above the feed — mirrors the channel fade below. */
.section-hero.is-pinned .chat__inner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 56px;
	background: linear-gradient(to bottom, var(--chat-bg) 32px, transparent);
	z-index: 1;
	pointer-events: none;
}

/* ============ CHAT MOCKUP ============ */
/* Outer: full-width positioning context so the notes can sit at the far edges */
.chat {
	position: relative;
	width: 100%;
	margin-top: 64px;
}

/* Inner: the centered cream panel holding the conversation */
.chat__inner {
	position: relative;
	max-width: 480px;
	margin: 0 auto;
	/* Cream panel fading to white toward the resolved order card */
	background: linear-gradient(180deg, var(--chat-bg) 55%, #ffffff 100%);
	border-radius: 24px;
	padding: 32px 32px 140px;
	text-align: left;
	box-shadow: 0 -10px 60px rgba(252, 92, 0, 0.08);
}

/* Sliding message window: JS translates the feed so the newest message stays
   above the channel fade while older ones scroll up out of the clipped panel.
   position:relative makes it the offsetParent JS measures message tops against. */
.chat__feed {
	position: relative;
	will-change: transform;
}

.chat__row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 18px;
}

/* Agent reply: bubble left, spinner pushed to the right */
.chat__row--out {
	align-items: flex-end;
}

.chat__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.bubble {
	max-width: 78%;
	padding: 14px 18px;
	font-size: 15px;
	color: #1c1c1c;
	border-radius: 12px;
	border: 1px solid #eee;
}

.bubble--in {
	background: var(--bubble-in);
	border-bottom-left-radius: 0px;
}

/* Sign-off bubble fills the row beside the avatar */
.bubble--wide {
	flex: 1;
	max-width: none;
}

/* Agent bubble fills the row; right side squared toward the brand mark */
.bubble--out {
	flex: 1;
	max-width: none;
	background: var(--bubble-out);
	border-radius: 12px 12px 0 12px;
}

/* Static brand mark beside each agent reply — no spin */
.chat__brand {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: block;
}

.chat__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	/* White fill (padding-box) under a fading green gradient border (border-box) */
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, rgba(0, 87, 46, 0.3), rgba(0, 87, 46, 0) 50%, rgba(0, 87, 46, 0.3)) border-box;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 8px;
}

.chat__card-thumb {
	width: 94px;
	height: 94px;
	border-radius: 10px;
	object-fit: contain;
	background: #fff;
	flex-shrink: 0;
}

.chat__card-body {
	flex: 1;
	min-width: 0;
}

.chat__card-title {
	font-size: 17px;
	font-weight: 600;
	color: #1c1c1c;
	margin-bottom: 12px;
}

.chat__card-line {
	display: block;
	height: 1px;
	width: 100%;
	background: rgba(0, 0, 0, 0.08);
	margin-bottom: 12px;
}

.chat__card-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--text-mute);
}

/* Floating context notes flanking the chat (dark cards, light text) */
.chat__note {
	position: absolute;
	z-index: 3;
	width: 375px;
	max-width: calc(50% - 260px);
	padding: 20px;
	/* Glassmorphism panel over the dark hero grid */
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: rgba(255, 255, 255, 0.7);
	text-align: left;
}

.chat__note p {
	font-size: 14px;
	line-height: 1.5;
}

.chat__note p + p {
	margin-top: 8px;
}

.chat__note-icon {
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: 8px;
}

/* Top-left: pinned to the far-left edge of the full-width wrapper */
.chat__note--tl {
	left: 0;
	top: 0;
}

/* Bottom-right: pinned to the far-right edge of the full-width wrapper */
.chat__note--br {
	right: 0;
	bottom: 40px;
}

/* ============ CHANNELS ============ */
.channels {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	/* Pull up to overlap the chat panel; chips sit below the fade */
	margin-top: -140px;
	padding-top: 90px;
}

/* Dark fade layer covering the chat panel's base */
.channels::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 170px;
	background: linear-gradient(to bottom, rgba(1, 1, 1, 0), #010101 70%);
	pointer-events: none;
}

.channel {
	position: relative; /* above the fade layer */
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 500;
	color: var(--white);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
}

.channel__icon {
	width: 16px;
	height: 16px;
	color: var(--primary);
	flex-shrink: 0;
}

/* ============ HERO LOGOS (marquee) ============ */
/* Dark band right under the hero. Two rows scroll in opposite directions; */
/* logos render white/dim and reveal their color on hover. */
.section-hero-logo {
	position: relative;
	background: var(--bg-reverse);
	padding: 40px 0;
}

/* Edge fades: gradient overlays so logos slide in/out instead of clipping hard */
.section-hero-logo::before,
.section-hero-logo::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 240px;
	pointer-events: none;
}

.section-hero-logo::before {
	left: 0;
	background: linear-gradient(270deg, rgba(1, 1, 1, 0) 0%, #010101 100%);
}

.section-hero-logo::after {
	right: 0;
	background: linear-gradient(90deg, rgba(1, 1, 1, 0) 0%, #010101 100%);
}

.hero-logo__row {
	display: flex;
	overflow: hidden;
}

.hero-logo__row + .hero-logo__row {
	margin-top: 32px;
}

/* Each track holds its logo set twice; -50% shift loops seamlessly */
.hero-logo__track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 80px;
	padding-right: 80px; /* keep the seam gap consistent across the wrap */
	width: fit-content;
	will-change: transform;
}

.hero-logo__track--left {
	animation: hero-logo-left 45s linear infinite;
}

.hero-logo__track--right {
	animation: hero-logo-right 55s linear infinite;
}

.hero-logo__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.hero-logo__img {
	width: 128px;
	height: auto;
}

@keyframes hero-logo-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes hero-logo-right {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

/* ============ THE AGENT ============ */
.section-agent {
	background: #faf8f2;
}

.agent__inner {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Heading row: title left, supporting copy pinned to the right */
.agent__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 64px;
}

.agent__head-main {
	flex: 1;
}

.agent__lead {
	flex-shrink: 0;
	max-width: 320px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

/* Three equal columns; faint dividers between them */
.agent__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.agent-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 24px;
}

.agent-card__index {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 8px;
}

.agent-card__title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--text-title);
	margin-bottom: 16px;
}

.agent-card__desc {
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
	margin-bottom: 24px;
	flex-grow: 1;
}

/* Tag row sits under a hairline rule, middot-separated */
.agent-card__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px;
	list-style: none;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.agent-card__tags li {
	position: relative;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text);
}

/* Media placeholder: colored grid until the real asset lands */
.agent-card__media {
	position: relative;
	margin-top: 24px;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--ph-bg, #eee);
	background-image: linear-gradient(var(--ph-line, rgba(0, 0, 0, 0.08)) 1px, transparent 1px), linear-gradient(90deg, var(--ph-line, rgba(0, 0, 0, 0.08)) 1px, transparent 1px);
	background-size: 18px 18px;
}

.agent-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Per-card placeholder palettes (yellow / olive / navy) */
.agent-card__media--resolution {
	--ph-bg: #f3f528;
	--ph-line: rgba(0, 0, 0, 0.08);
}

.agent-card__media--retention {
	--ph-bg: #475026;
	--ph-line: rgba(255, 255, 255, 0.12);
}

.agent-card__media--revenue {
	--ph-bg: #00345b;
	--ph-line: rgba(255, 255, 255, 0.12);
}

/* Push the CTA link to the bottom so cards align */
.agent-card__link {
	margin-top: auto;
	margin-top: 24px;
	padding: 4px 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--primary);
	transition: color 0.18s ease;
}

.agent-card__link span {
	display: inline-flex;
	transition: transform 0.18s ease;
}

.agent-card__link:hover {
	color: var(--primary-soft);
}

.agent-card__link:hover span {
	transform: translateX(4px);
}

/* ============ AGENT ANIMATION — RESOLUTION ============ */
/* Sits over the yellow grid of .agent-card__media--resolution. */
/* Idle: only the first customer message, vertically centered. On hover */
/* the order card + replies reveal one by one, each fading in while */
/* sliding down from translateY(-20px). CSS-only, self-resetting. */
.agent-animation {
	/* Normal flow — the media box grows with the thread instead of clipping it */
	min-height: 380px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: center; /* center the single idle message; thread grows from here */
}

.agent-animation__row {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

/* Scoped under .agent-card__media to beat its generic `img { position:absolute }` */
.agent-card__media .agent-animation__avatar {
	position: static;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.agent-animation__bubble {
	max-width: 80%;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.45;
	color: #1c1c1c;
	background: #fff; /* customer bubbles: solid white */
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.agent-animation__row--in .agent-animation__bubble {
	border-bottom-left-radius: 0;
}

/* Order card + agent reply stacked together; favicon pinned bottom-right */
.agent-animation__group {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.agent-animation__group-msgs {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Bubbles stacked in a group fill the column (match the card width) */
.agent-animation__group-msgs > .agent-animation__bubble {
	max-width: none;
}

/* Agent reply: translucent grey, fills the column */
.agent-animation__bubble--out {
	max-width: none;
	background: #edeae4;
	border-bottom-right-radius: 4px;
}

/* Circular agent avatar (favicon). Scoped to beat .agent-card__media img */
.agent-card__media .agent-animation__agent {
	position: static;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* Resolved order card: same translucent grey as the agent reply */
.agent-animation__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 8px 8px;
	background: #edeae4;
	border-radius: 12px;
	border-bottom-right-radius: 0;
}

/* First item styled as a white customer bubble-card; squared bottom-left */
/* so it reads as one grouped box with the message below it. */
.agent-animation__order {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 8px 8px;
	background: #fff;
	border-radius: 12px;
	border-bottom-left-radius: 0;
}

.agent-card__media .agent-animation__card-thumb {
	position: static;
	width: 71px;
	height: 71px;
	border-radius: 9px;
	object-fit: contain;
	background: #fff;
	flex-shrink: 0;
}

.agent-animation__card-body {
	flex: 1;
	min-width: 0;
}

.agent-animation__card-title {
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1c;
	margin-bottom: 10px;
}

.agent-animation__card-meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 10px;
	color: var(--text-mute);
	padding-top: 4px;
	border-top: 1px solid #fff;
}

/* Subscription card head: title left, price right (Retention) */
.agent-animation__card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.agent-animation__card-head .agent-animation__card-title {
	margin-bottom: 0;
}

.agent-animation__card-price {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: #1c1c1c;
}

.agent-animation__card-sub {
	padding-top: 4px;
	font-size: 12px;
	color: var(--text-mute);
	border-top: 1px solid #ebebeb;
}

/* Always-visible items (spacing handled inside each child so it collapses) */
.agent-animation__default {
	display: flex;
	flex-direction: column;
}

/* ===== Revenue: question hides upward on hover ===== */
.agent-animation__hide {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.4s ease;
}

.agent-animation__hide-inner {
	overflow: hidden;
	min-height: 0;
	padding-bottom: 12px; /* gap to the deck; collapses when hidden */
	transition:
		opacity 0.3s ease,
		transform 0.4s ease;
}

.agent-animation--trigger:hover .agent-animation__hide,
.agent-animation.is-active .agent-animation__hide {
	grid-template-rows: 0fr;
}

.agent-animation--trigger:hover .agent-animation__hide-inner,
.agent-animation.is-active .agent-animation__hide-inner {
	opacity: 0;
	transform: translateY(-12px);
}

/* ===== Revenue: product deck (row by default -> stacked on hover) ===== */
.agent-animation__deck {
	display: flex;
	align-items: flex-start; /* size each card to its own content (no stretch overflow) */
	justify-content: center;
	gap: 8px;
}

/* One white rounded box wrapping image + title + price */
.agent-animation__product {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 120px;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	/* Springy collapse into the deck */
	transition:
		transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.4s ease,
		box-shadow 0.4s ease;
	overflow: hidden;
	background: #00345b;
}

.agent-animation__product__inner {
	background: #fff;
	transition: all ease 0.5s;
	padding: 6px 6px 8px;
}

.agent-card__media .agent-animation__product-img {
	position: static;
	display: block;
	width: 100%;
	height: auto; /* intrinsic square (140x140) — no aspect-ratio/flex-basis overflow */
	border-radius: 10px;
	object-fit: cover;
}

.agent-animation__product-name {
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #1c1c1c;
}

.agent-animation__product-price {
	font-size: 10px;
	color: var(--text-mute);
}

/* On hover: tuck the side cards behind, bring the pick forward + up */
.agent-animation--trigger:hover .agent-animation__product--side:first-child,
.agent-animation.is-active .agent-animation__product--side:first-child {
	transform: translateX(74%) scale(0.85);
	z-index: 1;
}

.agent-animation--trigger:hover .agent-animation__product--side:last-child,
.agent-animation.is-active .agent-animation__product--side:last-child {
	transform: translateX(-74%) scale(0.85);
	z-index: 1;
}

.agent-animation--trigger:hover .agent-animation__product--side .agent-animation__product__inner,
.agent-animation.is-active .agent-animation__product--side .agent-animation__product__inner {
	opacity: 0.2;
}

.agent-animation--trigger:hover .agent-animation__product--pick,
.agent-animation.is-active .agent-animation__product--pick {
	transform: translateY(-10px) scale(1.1);
	z-index: 3;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* Reveal wrapper: collapses to zero height when idle (grid 0fr trick), */
/* then on hover the height expands (pushing items down) while the item */
/* itself pops in — scale + fade with a springy overshoot (AnimatedList). */
.agent-animation__reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-animation__reveal-inner {
	overflow: hidden;
	min-height: 0;
	padding-top: 12px;
	opacity: 0;
	transform: scale(0.8);
	transform-origin: center top;
	/* Spring-like overshoot on the pop-in (back-ease) */
	transition:
		opacity 0.3s ease,
		transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover anywhere on the trigger (the whole card) plays the thread */
.agent-animation--trigger:hover .agent-animation__reveal,
.agent-animation.is-active .agent-animation__reveal {
	grid-template-rows: 1fr;
}

.agent-animation--trigger:hover .agent-animation__reveal-inner,
.agent-animation.is-active .agent-animation__reveal-inner {
	opacity: 1;
	transform: scale(1);
}

/* Stagger so each item pops in one after another (delay height + pop) */
.agent-animation--trigger:hover .agent-animation__reveal:nth-of-type(2),
.agent-animation--trigger:hover .agent-animation__reveal:nth-of-type(2) .agent-animation__reveal-inner,
.agent-animation.is-active .agent-animation__reveal:nth-of-type(2),
.agent-animation.is-active .agent-animation__reveal:nth-of-type(2) .agent-animation__reveal-inner {
	transition-delay: 0.1s;
}
.agent-animation--trigger:hover .agent-animation__reveal:nth-of-type(3),
.agent-animation--trigger:hover .agent-animation__reveal:nth-of-type(3) .agent-animation__reveal-inner,
.agent-animation.is-active .agent-animation__reveal:nth-of-type(3),
.agent-animation.is-active .agent-animation__reveal:nth-of-type(3) .agent-animation__reveal-inner {
	transition-delay: 0.35s;
}
.agent-animation--trigger:hover .agent-animation__reveal:nth-of-type(4),
.agent-animation--trigger:hover .agent-animation__reveal:nth-of-type(4) .agent-animation__reveal-inner,
.agent-animation.is-active .agent-animation__reveal:nth-of-type(4),
.agent-animation.is-active .agent-animation__reveal:nth-of-type(4) .agent-animation__reveal-inner {
	transition-delay: 0.6s;
}

/* ===== Message hover: quick zoom-out then zoom-in pulse (attention cue) ===== */
/* Applies to every message-like element across the three agent cards. */
.agent-animation__bubble,
.agent-animation__order,
.agent-animation__card {
	transform-origin: center;
}

.agent-animation__bubble:hover,
.agent-animation__order:hover,
.agent-animation__card:hover {
	animation: agent-msg-zoom 0.45s ease;
}

@keyframes agent-msg-zoom {
	0% {
		transform: scale(1);
	} /* rest */
	45% {
		transform: scale(0.9);
	} /* zoom out */
	100% {
		transform: scale(1);
	} /* zoom back in */
}

/* ============ PREVENT (subscription save layer) ============ */
/* Full-bleed orange band; two in-production brand cards. CSAT bars grow on
   scroll (.js-chart -> .is-shown) and figures count up (.counter). */
.section-prevent {
	background: var(--primary);
	padding: 100px 0 120px;
}

/* ----- Header (centred) ----- */
.prevent__head {
	max-width: 900px;
	margin: 0 auto 32px;
	text-align: center;
}

.prevent__eyebrow {
	margin: 0 0 24px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-title);
}

.prevent__title {
	margin: 0;
	font-family: "TWK Lausanne", sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.05;
	color: var(--text-title);
}

/* Second clause flips to white for contrast on the orange */
.prevent__title-accent {
	color: var(--white);
}

.prevent__lead {
	max-width: 720px;
	margin: 32px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-title);
}

/* ----- Two cards side by side ----- */
.prevent__cards {
	display: flex;
	gap: 20px;
	align-items: stretch;
}

.prevent-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	background: var(--white);
}

/* Brand logo: source SVG carries its own colour; fix the height, let width flow */
.prevent-card__brand {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #ececec;
}

.prevent-card__brand img {
	display: block;
	height: 36px;
	width: auto;
}

/* ----- Card 1: headline figure ----- */
.prevent-card__figure {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 16px 0 8px;
}

.prevent-card__num {
	flex: 1;
	font-family: "TWK Lausanne", sans-serif;
	font-size: 76px;
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
}

.prevent-card__caption {
	max-width: 290px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #7a7a7a;
}

/* ----- Card 1: per-path CSAT bars ----- */
.prevent-csat {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	background: rgba(252, 92, 0, 0.05);
}

.prevent-csat__row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 16px;
	border-top: 1px solid #f0f0f0;
}

.prevent-csat__name {
	flex: 0 0 150px;
	font-size: 16px;
	color: var(--text);
}

.prevent-csat__track {
	flex: 1;
	height: 6px;
	overflow: hidden; /* clip the fill to the track */
	background: #dadad2;
	border-radius: 12px;
}

.prevent-csat__fill {
	display: block;
	width: 0; /* grows to --val once .is-shown lands */
	height: 100%;
	background: var(--primary);
	border-radius: 12px;
	transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.prevent-csat.is-shown .prevent-csat__fill {
	width: var(--val);
}

/* Stagger so the bars cascade rather than fire at once */
.prevent-csat.is-shown .prevent-csat__row:nth-child(2) .prevent-csat__fill {
	transition-delay: 0.08s;
}
.prevent-csat.is-shown .prevent-csat__row:nth-child(3) .prevent-csat__fill {
	transition-delay: 0.16s;
}
.prevent-csat.is-shown .prevent-csat__row:nth-child(4) .prevent-csat__fill {
	transition-delay: 0.24s;
}
.prevent-csat.is-shown .prevent-csat__row:nth-child(5) .prevent-csat__fill {
	transition-delay: 0.32s;
}

.prevent-csat__score {
	flex: 0 0 auto;
	font-size: 16px;
	color: var(--text-title);
	font-variant-numeric: tabular-nums;
}

.prevent-csat__unit {
	font-size: 12px;
	font-weight: 500;
	color: #606060;
}

/* ----- Card 1: footer note ----- */
.prevent-card__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 24px;
}

.prevent-card__foot-icon {
	display: flex;
	flex: 0 0 auto;
}

.prevent-card__foot-icon svg {
	display: block;
	width: 40px;
	height: 40px;
}

.prevent-card__foot-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #7a7a7a;
}

.prevent-card__foot-text span {
	font-weight: 700;
	color: var(--primary);
}

/* ----- Card 2: intro + signal stats ----- */
.prevent-card__intro {
	margin: 24px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #7a7a7a;
}

.prevent-card__sub {
	margin: 24px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-mute);
}

.prevent-stats {
	display: flex;
	flex-grow: 1;
	gap: 16px;
}

.prevent-stat {
	flex: 1;
	min-width: 0;
	padding: 24px;
	background: rgba(235, 235, 235, 0.3);
}

/* Active save flow — warm highlight */
.prevent-stat--win {
	background: rgba(252, 92, 0, 0.05);
}

.prevent-stat__num {
	display: block;
	font-family: "TWK Lausanne", sans-serif;
	font-size: 72px;
	font-weight: 800;
	line-height: 1;
	color: #7a7a7a; /* muted for the passive box */
}

.prevent-stat--win .prevent-stat__num {
	color: var(--primary);
}

.prevent-stat__stars {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 20px;
	color: #a3a3a3; /* empty/grey stars */
}

.prevent-stat__stars--on {
	color: var(--primary);
}

/* SVG star glyph; colour inherits from the row via currentColor */
.prevent-star {
	display: block;
	width: 24px;
	height: 24px;
}

.prevent-stat__frac {
	margin-left: 4px;
	font-size: 16px;
}

.prevent-stat__desc {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: #7a7a7a;
}

.prevent-card__pill {
	width: fit-content;
	margin: 24px 0 0;
	padding: 8px 20px;
	background: rgba(252, 92, 0, 0.1);
	border-radius: 100px;
	font-size: 15px;
	text-align: center;
	color: var(--primary);
}

/* ============ INTEGRATION ============ */
/* Soft-pink stage for the orbiting logo constellation (.orbit component). */
.section-integration {
	position: relative;
	overflow: hidden;
	background: #ffbcf1;
}

.integration__inner {
	padding: 80px 0;
	text-align: center;
}

.integration__content {
	position: relative;
	z-index: 1;
}

/* Uppercase, tracked eyebrow above the heading */
.integration__eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
}

.integration__subtitle {
	max-width: 560px;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

/* Spacing between the copy and the orbit */
.section-integration .orbit {
	z-index: 10;
}

.section-integration .orbit__container {
	position: relative;
	margin: 80px auto 0;
	width: fit-content;
}

.section-integration .orbit__over-bg {
	position: absolute;
	inset: -20%;
	pointer-events: none;
	border-radius: 50%;
	--dash: 1deg;
	--gap: 1deg;
	background: repeating-conic-gradient(rgba(255, 255, 255, 0.5) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--gap)));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

.section-integration .orbit__over-bg:before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	height: 45%;
	background: linear-gradient(to bottom, #ffbcf1, transparent);
}

.section-integration .orbit__over-bg:after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	height: 45%;
	background: linear-gradient(to top, #ffbcf1, transparent);
}

/* Ripple the two halos behind the hub like .resolve__ring — expand out and
   fade; the outer halo lags the inner one so the pulses stagger. */
.section-integration .orbit__center::before,
.section-integration .orbit__center::after {
	width: 100%;
	height: 100%;
	animation: resolve-pulse 1.6s ease-out infinite;
}

.section-integration .orbit__center::after {
	animation-delay: 0.8s;
}

/* Pulsing rings behind the orbit center hub; shared by every page that uses
   the .orbit component (both agent-resolution and integration load style.css). */
.resolve__ring {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(40, 40, 40, 1);
	animation: resolve-pulse 2.8s ease-out infinite;
}

.resolve__ring:nth-child(2) {
	animation-delay: 0.9s;
}

.resolve__ring:nth-child(3) {
	animation-delay: 1.8s;
}

@keyframes resolve-pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	80% {
		opacity: 0;
	}
	100% {
		transform: scale(2.8);
		opacity: 0;
	}
}

/* Center hub of the orbit: the brand mark sitting above the pulse rings. */
.resolve__core {
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.resolve__core img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ============ STATS ============ */
/* Row of headline figures + captions at the foot of the integration section;
   each figure uses the shared .counter component to count up from 0. */
.integration-stats {
	display: flex;
	margin: 120px auto 0;
	padding: 0;
	list-style: none;
	gap: 20px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid #fff;
	position: relative;
	z-index: 1;
}

.integration-stats__item {
	padding: 24px 32px;
	text-align: center;
	flex: 1;
}

/* Divider sits between cells only (not before the first) */
.integration-stats__divider {
	border-left: 1px solid #fff;
}

.integration-stats__figure {
	font-family: "TWK Lausanne", sans-serif;
	font-weight: 800;
	font-size: 80px;
	line-height: 1;
	color: var(--primary);
}

.integration-stats__label {
	max-width: 260px;
	margin: 16px auto 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
}

/* ============ THE PLATFORM ============ */
/* Bento of six capability cards on a light stage. Reveals: 01 typewriter,
   02–05 AOS scroll-ins, 06 counter. Card chrome is shared; each .platform-card__media
   hosts a small bespoke mockup. */
.section-platform {
	background: #fff;
}

.platform__inner {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Heading row: title left, supporting copy pinned to the right */
.platform__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 56px;
}

.platform__head-main {
	flex: 1;
}

.platform__lead {
	flex-shrink: 0;
	max-width: 340px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

/* 42-column bento: row1 = 18 + 24, row2 = 14 + 14 + 14, row3 = full width */
.platform__grid {
	display: grid;
	grid-template-columns: repeat(42, 1fr);
	gap: 20px;
}

.platform-card--w19 {
	grid-column: span 19;
}

.platform-card--w23 {
	grid-column: span 23;
}

.platform-card--w14 {
	grid-column: span 14;
}

.platform-card--wide {
	grid-column: span 42;
}

.platform-card {
	display: flex;
	flex-direction: column;
	background: #faf8f2;
	padding: 24px;
}

.platform-card__index {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 8px;
}

.platform-card__title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--text-title);
	margin-bottom: 12px;
}

.platform-card__desc {
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

/* Media well below the copy: pushes to the foot so cards align */
.platform-card__media {
	margin-top: 24px;
	flex: 1;
	display: flex;
	align-items: center;
}

/* Faint grid backdrop for the policy-builder card */
.platform-card__media--code {
	padding: 24px;
	background-color: transparent;
	background-image: linear-gradient(#c1c1c1 1px, transparent 1px), linear-gradient(90deg, #c1c1c1 1px, transparent 1px);
	background-size: 20px 20px;
	flex: 1;
	display: flex;
	align-items: center;
}

/* ----- 01 — Policy builder (typewriter) ----- */
.platform-code {
	background: #0a0a0a;
	padding: 16px 24px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
	width: 100%;
}

.platform-code__body {
	font-size: 16px;
	line-height: 1.8;
	color: #e8e8e8;
	/* Hold height while the lines type out so the card doesn't jump */
	min-height: 8em;
}

.platform-code__kw {
	color: var(--primary);
	font-weight: 600;
}

/* Highlighted policy value: pops in whole via the typewriter [data-pop] hook */
.platform-code__pill {
	display: inline-block;
	padding: 1px 8px;
	background: var(--primary);
	color: #fff;
	font-weight: 500;
	line-height: 1.4;
}

.platform-code__pill.is-pending {
	opacity: 0;
}

.platform-code__pill.is-in {
	animation: platform-pop 0.26s ease both;
}

@keyframes platform-pop {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ----- 02 — Smart tags ----- */
.platform-tags__panel {
	padding: 36px 36px 0;
	position: relative;
	margin: 0 auto;
	width: fit-content;
}

.platform-tags__panel > * {
	position: relative;
	z-index: 1;
}

.platform-tags__panel:before {
	content: "";
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	bottom: -100vh;
	background: #f3f528;
	border-radius: 12px 12px 0 0;
}

.platform-tags__panel:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -100vh;
	border-radius: 24px 24px 0 0;
	border-top: 12px solid rgba(252, 92, 0, 0.05);
	border-right: 12px solid rgba(252, 92, 0, 0.05);
	border-left: 12px solid rgba(252, 92, 0, 0.05);
}

.platform-tags__panel-container {
	overflow: hidden;
}

.platform-tags__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.platform-tags__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.platform-tags__bubble {
	flex: 1;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: #1c1c1c;
}

.platform-tags__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 11px;
	padding-top: 48px;
	background: linear-gradient(180deg, rgba(250, 248, 242, 0) 0%, #faf8f2 100%);
	position: relative;
	z-index: 1;
}

/* Shared pill for tag/check chips */
.platform-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
}

/* Highlighted tag: starts neutral, then animates to brand color after it lands.
   Driven as a keyframe (not a transition) so AOS's inline transition can't
   clobber it; the delay sequences the highlight after every chip has revealed. */
.platform-chip--hot {
	border-color: rgba(0, 0, 0, 0.12);
	color: var(--text);
}

.platform-chip--hot.aos-animate {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* ----- 03 — QA guardrail ----- */
.platform-guard {
	padding: 14px 16px;
	border-radius: 12px;
	background: #475026;
}

.platform-guard__label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 0 12px;
	border-radius: 999px;
	background: #010101;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.platform-guard__text {
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	background: rgba(255, 255, 255, 0.95);
	color: #1c1c1c;
	padding: 12px 16px;
	border-radius: 8px;
}

.platform-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 16px;
}

/* Check chip = pill + leading tick */
.platform-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #c1c1c1;
	font-size: 16px;
	color: #475026;
	white-space: nowrap;
}

.platform-check__tick {
	color: #475026;
	flex-shrink: 0;
}

.platform-check--blue.platform-check,
.platform-check--blue .platform-check__tick {
	color: #00345b;
}

/* ----- 04 — Policy testing (before / after) ----- */
.platform-test {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.platform-test__panel {
	padding: 16px;
	border-radius: 12px;
}

.platform-test__panel--before {
	background: #edeae4;
}

.platform-test__panel--after {
	background: #ffbcf1;
}

.platform-test__tag {
	display: inline-block;
	margin-bottom: 12px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 16px;
	min-width: 72px;
	text-align: center;
}

.platform-test__tag--before {
	background: #d3d3d3;
	color: #606060;
}

.platform-test__tag--after {
	background: #f3f528;
	color: #010101;
}

.platform-test__row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.platform-test__row + .platform-test__row {
	margin-top: 10px;
}

.platform-test__row--bot {
	justify-content: flex-end;
}

.platform-test__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

/* Before panel reads as the "old" state — mute its avatar to grey */
.platform-test__panel--before .platform-test__avatar {
	filter: grayscale(1);
}

.platform-test__bubble {
	max-width: 80%;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
}

/* Incoming bubble (avatar left): square the bottom-left toward the avatar */
.platform-test__row:not(.platform-test__row--bot) .platform-test__bubble {
	border-bottom-left-radius: 0;
}

/* Agent bubble (bot right): square the bottom-right toward the bot mark */
.platform-test__bubble--bot {
	background: #fff;
	border-bottom-right-radius: 0;
}

.platform-test__bot {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0a0a0a;
	flex-shrink: 0;
}

/* ----- 05 — Meet AI Sam ----- */
.platform-sam {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.platform-sam__input {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 12px 12px 12px 0px;
	background: #fff;
	border: 1px solid #eee;
}

.platform-sam__field {
	font-size: 16px;
	line-height: 1.45;
	color: #1c1c1c;
}

.platform-sam__reply {
	display: flex;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #00345b;
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
}

.platform-sam__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* ----- 06 — Analytics & insights (counter) ----- */
/* Card splits into copy (left) + dark stats board (right) */
.platform-card--wide {
	flex-direction: row;
	align-items: center;
	gap: 48px;
}

.platform-card__lead {
	flex: 1;
}

.platform-stats {
	flex: 1.2;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	padding: 0 24px;
	background-color: #0a0a0a;
	background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	align-self: stretch;
}

.platform-stats__item {
	text-align: center;
	padding: 24px 12px;
}

.platform-stats__figure {
	font-family: "TWK Lausanne", sans-serif;
	font-weight: 800;
	font-size: 56px;
	line-height: 1;
	color: var(--primary);
}

.platform-stats__label {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.45;
	color: #cfcfcf;
}

/* ============ STEP FLOW (scroll-driven progress rail) ============ */
/* Reusable: two columns — a sticky heading (left) and stacked steps (right)
   wired to a vertical progress rail. JS slides the spindle playhead, lights
   each node, and ramps card opacity. Themed per page via .section-flow + a
   modifier (e.g. --dark). Default skin is the orange stage used on home. */
.section-flow {
	background: var(--primary);
}

.flow__inner {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Left column: flex wrapper shares the row with the steps; the heading sticks
   inside it while the steps scroll past. */
.flow__head-col {
	flex: 1;
	position: sticky;
	top: 120px;
}

.flow__head {
	max-width: 600px;
}

/* On the orange stage the eyebrow + title sit in near-black for contrast */
.section-flow .top-title {
	color: rgba(0, 0, 0, 0.55);
}

.section-flow .title {
	margin-top: 16px;
}

.flow__lead {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(0, 0, 0, 0.62);
}

/* Right column: a rail lane down the left, steps filling the rest */
.flow__steps {
	position: relative;
	flex: 1;
	min-width: 0;
}

/* Lane container for the spindle (the line itself lives on the steps below) */
.flow__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 24px;
	width: 2px;
	transform: translateX(-1px);
}

/* Spindle playhead rides down the rail as the reader scrolls (top set in JS) */
.flow__rail-mark {
	position: absolute;
	top: 0;
	left: 50%;
	width: 12px;
	height: 33px;
	transform: translate(-50%, -50%);
}

.flow__list {
	list-style: none;
	display: flex;
	flex-direction: column;
}

/* Each step clears the rail lane with left padding */
.flow-step {
	position: relative;
	padding-left: 96px;
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Bright line + glow column above/below each node. Hidden by default; revealed
   progressively as the spindle descends (classes toggled in JS). */
.flow-step::before,
.flow-step::after {
	content: "";
	position: absolute;
	left: 24px;
	width: 32px;
	transform: translateX(-50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Items above the current gap glow fully; the gap's lower item shows only its
   top (before) half — so the bright line fills down to the spindle. */
.flow-step.is-glow::before,
.flow-step.is-glow::after,
.flow-step.is-glow-top::before {
	opacity: 1;
}

.flow-step::before {
	top: 0;
	bottom: 50%;
	background:
		linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) center / 1px 100% no-repeat,
		linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.flow-step::after {
	top: 50%;
	bottom: 0;
	background:
		linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) center / 1px 100% no-repeat,
		linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

/* Continuous solid white-.2 line, split into halves so the ends can be trimmed */
.flow-step__line {
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 32px;
	transform: translateX(-50%);
	pointer-events: none;
}

.flow-step__line::before,
.flow-step__line::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
}

.flow-step__line::before {
	top: 0;
	bottom: 50%;
}

.flow-step__line::after {
	top: 50%;
	bottom: 0;
}

/* No glow above the first node or below the last */
.flow-step:first-child::before,
.flow-step:last-child::after {
	content: none;
}

/* First/last solid line keeps showing, but only half a node tall — a stub
   capping the rail just past the end nodes. */
.flow-step:first-child .flow-step__line::before {
	top: auto;
	background: transparent;
	border-bottom: 16px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px 100px 0 0;
}

.flow-step:last-child .flow-step__line::after {
	bottom: auto;
	background: transparent;
	border-bottom: 16px solid rgba(255, 255, 255, 0.2);
	border-radius: 0 0 100px 100px;
}

/* Node dot sits on the rail beside the step's number; lights when reached */
.flow-step__node {
	position: absolute;
	left: 24px;
	top: 50%;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	opacity: 0.3;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
	z-index: 1;
}

.flow-step.is-active .flow-step__node {
	opacity: 1;
}

/* Card: opacity is scroll-driven (0.2 -> 1, set inline in JS as the card
   rises to the screen middle). is-active only drives the index/node accents. */
.flow-step__card {
	display: flex;
	gap: 48px;
	padding: 24px 28px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.12); /* soft white frame */
	opacity: 0.2; /* initial; JS recomputes on scroll */
}

.flow-step__num {
	flex-shrink: 0;
	font-family: "TWK Lausanne", sans-serif;
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	transition: color 0.3s ease;
}

.flow-step__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-title);
	margin-bottom: 8px;
}

.flow-step__desc {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-mute);
}

/* Optional tag pills under a step's copy (used by the dark stage variant) */
.flow-step__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.flow-step__tag {
	padding: 4px 16px;
	font-size: 16px;
	color: #383838;
	background: rgba(255, 188, 241, 0.5);
	border-radius: 100px; /* pill — radius is intrinsic to the shape */
}

/* ============ IN THEIR WORDS (pinned horizontal scroll) ============ */
/* Progressive enhancement: by default the row is a native horizontal scroll
   (works with no JS). JS adds .is-pinned on desktop to upgrade it to the pinned
   effect — the section is made tall so vertical scroll maps to horizontal pan,
   and .words__pin sticks for that height while clipping the moving track. */
.section-words {
	background: var(--chat-bg);
	padding: 80px 0;
}

.words__pin {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.words__inner {
	width: 100%;
}

/* --- Pinned mode (JS, desktop + motion allowed) --- */
.section-words.is-pinned {
	padding: 0;
	position: relative;
	z-index: 51;
}
.section-words.is-pinned .words__pin {
	position: sticky;
	top: 0;
	/* svh, not vh: Safari resolves vh against the *large* viewport (toolbar
	   hidden), so 100vh > visible area and JS's pin.offsetHeight + travel makes
	   the section too tall. svh is the stable, visible-floor height. */
	height: 100svh;
	overflow: hidden;
}

/* Heading row — title left, "Powered by" pinned to the baseline on the right */
.words__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 64px;
}

/* Eyebrow + title group; isolated from the head's flex so they stack normally */
.words__heading .title {
	margin-top: 16px;
}

.words__powered {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--text-mute);
}

/* Default: native horizontal scroll. Pinned mode hides the bar and JS drives X. */
.words__viewport {
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
}
.words__viewport::-webkit-scrollbar {
	display: none;
}
.section-words.is-pinned .words__viewport {
	overflow: hidden;
}

.words__track {
	display: flex;
	gap: 20px;
	list-style: none;
	width: fit-content;
	will-change: transform;
}

/* Each card is a fixed slab so several peek into view; divided by hairlines */
.quote-card {
	flex: 0 0 clamp(300px, 32vw, 460px);
	display: flex;
	flex-direction: column;
	min-height: 320px;
	padding: 40px 32px;
	background: var(--white);
}

.quote-card__text {
	min-height: 216px;
	font-size: 24px;
	line-height: 1.4;
	color: var(--text-title);
}

/* Footer: author on the left, review badge on the right, hairline divider above */
.quote-card__foot {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid rgba(193, 193, 193, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.quote-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.quote-card__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.quote-card__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.quote-card__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-title);
}

.quote-card__company {
	font-size: 13px;
	color: var(--text-mute);
}

/* Review source icon */
.quote-card__badge {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* ============ CASE STUDY ============ */
.section-case {
	background: #fff;
	padding: 96px 0;
}

/* Centered heading block */
.case__head {
	max-width: 760px;
	margin: 0 auto 64px;
	text-align: center;
}

.case__head .top-title {
	margin-bottom: 20px;
}

.case__lead {
	margin-top: 32px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--text-mute);
}

.case__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Card: faint border by default, darkens on hover; overlay link covers the card */
.case-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid #ebebeb;
	background: #fff;
	transition-property: all !important;
}

.case-card:hover {
	border-color: #111;
}

/* Full-card click target; sits above media/text but below nothing interactive else */
.case-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.case-card__media {
	margin-bottom: 24px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Category pill: text, dot and border all driven by inline --color per card */
.case-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 8px 12px;
	border: 1px solid var(--color, #999);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color, var(--text-title));
}

.case-card__tag::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color, #999);
}

.case-card__desc {
	font-size: 24px;
	line-height: 1.45;
	color: var(--text-title);
	flex-grow: 1;
}
/* Inline highlight in the brand color */
.case-card__desc span {
	color: var(--primary);
}

/* CTA stays put; arrow slides in on card hover */
.case-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: 24px;
	padding: 4px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary);
}

/* Orange underline sits under the text only (not the arrow) */
.case-card__cta-label {
	border-bottom: 1px solid currentColor;
}

.case-card__arrow {
	flex: 0 0 auto;
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.case-card:hover .case-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* ============ FAQ ============ */
/* Centered heading + accordion. Each answer collapses via the grid 0fr->1fr
   trick; the icon's vertical bar scales to 0 on open (plus -> minus). */
.section-faq {
	background: #fff;
}

.faq__inner {
	padding-top: 80px;
	padding-bottom: 80px;
}

.faq__title {
	margin: 0 auto 64px;
}

.faq__list {
	list-style: none;
	max-width: 940px;
	margin: 0 auto;
}

.faq-item {
	border-bottom: 1px solid #ececec;
}

/* Cap the list with a top rule on the first row */
.faq-item:first-child {
	border-top: 1px solid #ececec;
}

/* Question row: full-width button, label left, +/- icon right */
.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.5;
	color: var(--text-title);
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease;
}

.faq-item__q:hover {
	color: var(--primary);
}

/* +/- icon: two bars; the vertical one collapses when the item opens */
.faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: "";
	position: absolute;
	background: var(--primary);
	transition: transform 0.3s ease;
}

.faq-item__icon::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 1.5px;
	transform: translateY(-50%);
}

.faq-item__icon::after {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1.5px;
	transform: translateX(-50%);
}

.faq-item.is-open .faq-item__icon::after {
	transform: translateX(-50%) scaleY(0);
}

/* Answer collapses to zero height when closed */
.faq-item__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.faq-item.is-open .faq-item__a {
	grid-template-rows: 1fr;
}

.faq-item__a-inner {
	overflow: hidden;
	min-height: 0;
}

.faq-item__a-inner p {
	padding: 0 0 24px;
	color: var(--text-mute);
}

/* ============ TRUSTED BY (logo marquee, agent-resolution.html) ============ */
/* Dark band under the hero: fixed label left, one track scrolling left. */
/* Logos render white and reveal their colour on hover. */
.section-agent-trusted {
	background: var(--bg-reverse);
	padding: 0 0 51px;
}

.trusted__inner {
	display: flex;
	align-items: center;
	gap: 48px;
}

.trusted__label {
	flex-shrink: 0;
	color: var(--white);
	font-size: 15px;
	line-height: 1.4;
	opacity: 0.7;
}

/* Marquee viewport: clips the track and fades it out at the right edge */
.trusted__row {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}

/* Holds the logo set twice; -50% shift loops seamlessly */
.trusted__track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 64px;
	padding-right: 64px; /* keep the seam gap consistent across the wrap */
	width: fit-content;
	will-change: transform;
	animation: hero-logo-left 45s linear infinite;
}

.trusted__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.trusted__img {
	width: auto;
	height: 40px;
	/* White by default; full colour on hover */
	transition: filter 0.3s ease;
}

/* ============ INFO CARD ============ */
/* Cream stage: stacked headline (eyebrow + split-line title), then a four-up
   row of bordered cards. Mirrors .proof__head / .proof__cards. */
.section-info-card {
	background: var(--chat-bg);
}

.info-card__inner {
	padding-top: 80px;
	padding-bottom: 80px;
}

.info-card__head {
	padding-bottom: 48px;
}

/* Four value cards, each topped by a hairline rule */
.info-card__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.info-card-card {
	padding: 24px;
	background: var(--white);
}

.info-card-card__icon {
	display: inline-flex;
	margin-bottom: 24px;
}

.info-card-card__icon img {
	display: block;
	width: 40px;
	height: 40px;
}

.info-card-card__title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--text-title);
	margin-bottom: 16px;
}

.info-card-card__desc {
	font-size: 16px;
	line-height: 1.6;
	color: #7a7a7a;
}

/* ============ RESPONSIVE (grouped widest -> narrowest) ============ */
@media (max-width: 1680px) {
	/* THE LOOP: tighten the gap between the sticky heading and the steps */
	.flow__inner {
		gap: 56px;
	}
	/* THE PLATFORM: large desktop — gentle tightening, bento layout intact */
	.platform__inner {
		padding-top: 72px;
		padding-bottom: 72px;
	}
	.platform__head {
		padding-bottom: 48px;
	}
	.platform__grid {
		gap: 18px;
	}
	.platform-card {
		padding: 22px;
	}
	.platform-card__title {
		font-size: 23px;
	}
	.platform-card--wide {
		gap: 40px;
	}
	.platform-stats__figure {
		font-size: 52px;
	}
}

@media (max-width: 1399px) {
	body {
		font-size: 16px;
	}

	/* THE LOOP: columns are closer now — pull the gap in further */
	.flow__inner {
		gap: 48px;
	}
	/* Step out of the oversized base spacing as cards narrow */
	.flow-step__card {
		gap: 40px;
	}
	.flow-step__num {
		font-size: 44px;
	}

	/* Tighten nav spacing as the viewport narrows */
	.header__nav {
		gap: 20px;
	}
	.agent-card__tags li {
		font-size: 12px;
	}

	/* THE PLATFORM: laptop — pull in copy, media wells, and the stats board */
	.platform__inner {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.platform__head {
		gap: 32px;
		padding-bottom: 44px;
	}
	.platform__lead {
		max-width: 300px;
		font-size: 15px;
	}
	.platform__grid {
		gap: 16px;
	}
	.platform-card {
		padding: 20px;
	}
	.platform-card__title {
		font-size: 22px;
	}
	.platform-card__desc {
		font-size: 15px;
	}
	.platform-card__media {
		margin-top: 20px;
	}
	.platform-card__media--code {
		padding: 20px;
	}
	.platform-code {
		padding: 14px 20px;
	}
	.platform-code__body {
		font-size: 15px;
	}
	.platform-check,
	.platform-guard__label,
	.platform-guard__text,
	.platform-sam__reply,
	.platform-sam__field {
		font-size: 15px;
	}
	.platform-check {
		padding: 7px 14px;
	}
	.platform-tags__avatar {
		width: 32px;
		height: 32px;
	}
	.platform-test__tag {
		font-size: 15px;
	}
	.platform-card--wide {
		gap: 36px;
	}
	.platform-stats {
		padding: 0 18px;
	}
	.platform-stats__figure {
		font-size: 46px;
	}
	.platform-stats__label {
		font-size: 15px;
	}
	.platform-stats__item {
		padding: 20px 10px;
	}

	/* ============ IN THEIR WORDS — responsive ============ */
	/* The quote body scales down with the viewport; min-height keeps every card's
   footer on the same baseline at each breakpoint. */
	.quote-card__text {
		min-height: 200px;
		font-size: 19px;
	}
	/* Ease the generous base padding + footer spacing as cards narrow */
	.quote-card {
		padding: 36px 30px;
	}
	.quote-card__foot {
		margin-top: 28px;
		padding-top: 28px;
	}
}

@media (max-width: 1199px) {
	/* Floating chat notes need side room; hide once the layout tightens */
	.chat__note {
		max-width: calc(50% - 216px);
	}

	.chat__inner {
		max-width: 400px;
	}

	/* INFO CARD: shrink card icons + type in step with .proof-card */
	.info-card-card__icon img {
		width: 32px;
		height: 32px;
	}
	.info-card-card__title {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.info-card-card__desc {
		font-size: 14px;
	}
	.platform__inner {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	/* THE LOOP: last row-layout step before the heading stacks at 991 */
	.flow__inner {
		gap: 44px;
	}
	/* Give the steps column more room than the heading at this width */
	.flow__head-col {
		flex: 2;
	}
	.flow__steps {
		flex: 3;
	}
	/* Slim the rail node, track, and glow column (line::before/after are 100%) */
	.flow-step__node {
		width: 20px;
		height: 20px;
	}
	.flow-step__line,
	.flow-step::before,
	.flow-step::after {
		width: 20px;
	}
	/* Pull the number/body spacing in on the narrower two-column cards */
	.flow-step__card {
		gap: 32px;
	}
	.flow-step__num {
		font-size: 40px;
	}
	.flow-step__title {
		font-size: 19px;
	}
	/* Thinner rail end-caps to match the slimmer lane */
	.flow-step:first-child .flow-step__line::before,
	.flow-step:last-child .flow-step__line::after {
		border-bottom-width: 10px;
	}
	/* Bento drops to two columns; full-width card keeps the row */
	.platform__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.platform-card--w19,
	.platform-card--w23,
	.platform-card--w14 {
		grid-column: span 1;
	}
	.platform-card--wide {
		grid-column: span 2;
	}
	/* Card 05 fills its row so the full-width analytics card below doesn't
	   leave an empty cell beside it in the two-column grid */
	.platform-card:nth-child(5) {
		grid-column: span 2;
	}
	/* Cards are narrower now — trim title + tighten the tag/check mockups */
	.platform-card__title {
		font-size: 21px;
	}
	.platform-tags__panel {
		padding: 28px 28px 0;
	}
	.platform-tags__chips {
		gap: 10px;
		padding-top: 40px;
	}
	.platform-checks {
		gap: 14px;
	}
	.platform-tags__avatar {
		width: 30px;
		height: 30px;
	}
	.platform-tags__bubble {
		font-size: 13px;
	}
	.platform-test__tag {
		font-size: 14px;
	}
	.platform-sam__checks {
		gap: 10px;
	}
	.platform-stats__figure {
		font-size: 44px;
	}
	/* Three capability columns drop to two on smaller laptops */
	.agent__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.quote-card__text {
		min-height: 188px;
		font-size: 18px;
	}
	.quote-card {
		padding: 32px 28px;
	}
	.quote-card__foot {
		margin-top: 24px;
		padding-top: 24px;
	}

	/* ============ CASE STUDY — responsive ============ */
	/* Tighten card internals: 3-col cards are narrowest at this width */
	.case__lead {
		font-size: 16px;
	}
	.case-card {
		padding: 18px;
	}
	.case-card__media {
		margin-bottom: 18px;
	}
	.case-card__tag {
		padding: 6px 10px;
		font-size: 13px;
	}
	.case-card__desc {
		font-size: 18px;
	}
	.case-card__cta {
		margin-top: 20px;
		font-size: 15px;
	}

	/* ----- PREVENT: trim oversized figures so 2-col cards keep breathing ----- */
	.prevent-card__num {
		font-size: 64px;
	}
	.prevent-stat__num {
		font-size: 60px;
	}
	.prevent-csat__name {
		flex-basis: 130px;
	}
}

@media (max-width: 991px) {
	/* Floating chat notes only show on tablet-landscape and up */
	.chat__note {
		display: none;
	}

	/* INFO CARD: four-up collapses to a 2x2 grid */
	.info-card__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.info-card__head {
		padding-bottom: 36px;
	}
	.info-card__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	/* ----- PREVENT responsive: stack the two brand cards ----- */
	.prevent__cards {
		flex-direction: column;
	}

	.section-prevent {
		padding: 72px 0 80px;
	}

	/* Cards are full-width now — tighten head spacing to match */
	.prevent__head {
		margin-bottom: 24px;
	}
	.prevent__lead {
		font-size: 15px;
	}

	body {
		font-size: 15px;
	}
	.platform__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	/* Heading stacks; copy drops below the title */
	.platform__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-bottom: 40px;
	}
	.platform__lead {
		max-width: 560px;
		font-size: 16px;
	}
	/* One column; the wide card stacks copy over its stats board */
	.platform__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.platform-card--w19,
	.platform-card--w23,
	.platform-card--w14,
	.platform-card--wide {
		grid-column: span 1;
	}
	/* Reset card 05's two-column span once the grid is single-column */
	.platform-card:nth-child(5) {
		grid-column: span 1;
	}
	.platform-card--wide {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	/* Full-width cards again — let the title + copy use the room */
	.platform-card__title {
		font-size: 23px;
	}
	.platform-card__desc {
		font-size: 16px;
	}
	/* Stats board spans full width once it stacks below the copy */
	.platform-stats {
		padding: 0 20px;
	}
	.platform-stats__figure {
		font-size: 52px;
	}
	.hero__subtitle {
		font-size: 17px;
	}
	/* Tighten heading rhythm + narrow the chat panel on tablets */
	.section-hero .title {
		margin-bottom: 28px;
	}
	/* Less top room above the bottom-pinned hero as the viewport shrinks */
	.section-hero.is-pinned .hero__pin {
		padding-top: 48px;
	}
	.chat__inner {
		max-width: 440px;
	}
	/* Narrow the edge fades so logos aren't hidden on smaller viewports */
	.section-hero-logo::before,
	.section-hero-logo::after {
		width: 160px;
	}
	.hero-logo__track {
		gap: 56px;
		padding-right: 56px;
	}
	.hero-logo__img {
		width: 112px;
	}
	/* Heading stacks; copy drops below the title */
	.agent__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.agent__lead {
		max-width: 520px;
	}
	/* Columns collapse to one; divider moves to the top */
	.agent__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.integration-stats__figure {
		font-size: 48px;
	}
	.integration-stats__item {
		padding: 8px 20px;
	}
	/* Tighten the gap between the copy and the orbit */
	.section-integration .orbit__container {
		margin-top: 56px;
	}
	/* Heading stops sticking and stacks above the steps */
	.flow__inner {
		flex-direction: column;
		gap: 40px;
	}
	.flow__head-col {
		flex: none;
		position: static;
		top: auto;
	}
	.flow__head {
		max-width: 560px;
	}
	.flow__lead {
		max-width: 520px;
	}

	/* ============ CASE STUDY — responsive ============ */
	.section-case {
		padding: 64px 0;
	}
	.case__head {
		margin-bottom: 48px;
	}
	/* Three columns collapse to two; the third wraps to a new row */
	.case__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-words {
		padding: 64px 0;
	}
	.words__head {
		padding-bottom: 40px;
	}
	.quote-card__text {
		min-height: 176px;
		font-size: 17px;
	}
	.quote-card {
		padding: 30px 26px;
	}
	/* Start trimming the author block once the cards shrink */
	.quote-card__avatar {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 14px;
	}
	/* INFO CARD: tighter box + icon/title spacing */
	.info-card-card {
		padding: 16px;
	}
	.info-card-card__icon {
		margin-bottom: 8px;
	}
	.info-card-card__title {
		margin-bottom: 8px;
	}
	.flow-step__tag {
		padding: 2px 12px;
		font-size: 14px;
	}
	.flow-step__tags {
		margin-top: 12px;
	}
	/* ----- PREVENT: shrink figures, let stat stars wrap on small screens ----- */
	.section-prevent {
		padding: 64px 0 72px;
	}
	/* Scale the brand logo + divider gap down with the card */
	.prevent-card__brand {
		padding-bottom: 14px;
	}
	.prevent-card__brand img {
		height: 32px;
	}
	.prevent-card__figure {
		gap: 16px;
		margin: 14px 0 8px;
	}
	.prevent-card__num {
		font-size: 56px;
	}
	/* Card is full-width here — let the caption use the room */
	.prevent-card__caption {
		max-width: none;
	}
	.prevent-csat {
		margin-top: 20px;
	}
	.prevent-csat__row {
		gap: 14px;
		padding: 16px 14px;
	}
	.prevent-csat__name {
		flex-basis: 120px;
		font-size: 15px;
	}
	.prevent-stat {
		padding: 20px;
	}
	.prevent-stat__num {
		font-size: 52px;
	}
	/* Five stars can exceed a half-width box — wrap instead of overflow */
	.prevent-stat__stars {
		flex-wrap: wrap;
		margin-top: 16px;
	}
	.prevent-star {
		width: 20px;
		height: 20px;
	}
	.prevent-card__foot {
		padding-top: 20px;
	}
	.prevent-card__intro {
		margin-top: 20px;
	}
	.prevent-card__sub {
		margin: 20px 0;
	}
	.prevent-card__pill {
		margin-top: 20px;
	}
	.prevent-stat__desc {
		margin-top: 16px;
	}
	.prevent-card__foot-text,
	.prevent-stat__desc {
		font-size: 15px;
	}
	.top-title {
		font-size: 13px;
	}
	/* Trusted band: stack the label above the marquee on phones */
	.trusted__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.trusted__row {
		width: 100%;
	}
	.trusted__img {
		height: 32px;
	}
	/* Tighten hero heading + subtitle on phones */
	.section-hero .title {
		margin-bottom: 22px;
	}
	.section-hero.is-pinned .hero__pin {
		padding-top: 32px;
	}
	.hero__subtitle {
		margin: 0 auto 28px;
		font-size: 15px;
	}
	/* Scale the chat mockup down: avatar, rows, spinner, order card */
	.chat {
		margin-top: 48px;
	}
	.chat__inner {
		padding: 28px 24px 130px;
	}
	.chat__avatar {
		width: 36px;
		height: 36px;
	}
	.chat__row {
		gap: 10px;
		margin-bottom: 14px;
	}
	.chat__brand {
		width: 32px;
		height: 32px;
	}
	.chat__card {
		gap: 8px;
	}
	.chat__card-thumb {
		width: 80px;
		height: 80px;
	}
	.chat__card-title {
		font-size: 14px;
		margin-bottom: 8px;
	}
	.chat__card-line {
		margin-bottom: 8px;
	}
	.chat__card-meta {
		font-size: 12px;
	}
	.hero__cta {
		flex-direction: column;
		gap: 8px 18px;
	}
	.channels {
		gap: 10px;
	}
	.channel {
		height: 42px;
		padding: 0 16px;
		font-size: 14px;
	}
	.section-hero-logo {
		padding: 28px 0;
	}
	.section-hero-logo::before,
	.section-hero-logo::after {
		width: 100px;
	}
	.hero-logo__row + .hero-logo__row {
		margin-top: 22px;
	}
	.hero-logo__track {
		gap: 40px;
		padding-right: 40px;
	}
	.hero-logo__img {
		width: 96px;
	}
	/* Tighter section rhythm on phones */
	.agent__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.agent__head {
		padding-bottom: 40px;
	}
	.agent__lead {
		font-size: 15px;
	}
	.agent-card {
		padding: 20px;
	}
	.agent-card__title {
		font-size: 22px;
	}
	.agent-card__desc {
		font-size: 15px;
	}
	.agent-card__link {
		font-size: 15px;
	}
	.agent-animation {
		min-height: 340px;
		padding: 16px;
	}
	.agent-card__media .agent-animation__card-thumb {
		width: 60px;
		height: 60px;
	}
	/* Tighter section rhythm + smaller card titles on phones */
	.platform__inner {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.platform__head {
		gap: 20px;
		padding-bottom: 36px;
	}
	.platform__lead {
		font-size: 15px;
	}
	.platform-card {
		padding: 20px;
	}
	.platform-card__title {
		font-size: 21px;
	}
	.platform-card__desc {
		font-size: 15px;
	}
	.platform-card__media {
		margin-top: 20px;
	}
	/* Shrink the mockups' type so they don't overflow narrow cards */
	.platform-code__body {
		font-size: 14px;
		min-height: 7em;
	}
	/* Tighter pill padding so long policy values don't overflow the mock */
	.platform-code__pill {
		padding: 1px 6px;
	}
	.platform-tags__panel {
		padding: 24px 24px 0;
	}
	.platform-chip {
		font-size: 12px;
		padding: 7px 12px;
	}
	.platform-check {
		font-size: 14px;
		padding: 7px 12px;
	}
	.platform-check__tick {
		width: 14px;
		height: 14px;
	}
	.platform-guard__text,
	.platform-sam__reply,
	.platform-sam__field {
		font-size: 15px;
	}
	.platform-test__bubble {
		font-size: 13px;
	}
	/* Scale the bespoke mockups so they breathe inside tighter cards */
	.platform-card__media--code {
		padding: 18px;
		background-size: 18px 18px;
	}
	.platform-tags__bubble {
		font-size: 13px;
		padding: 10px 14px;
	}
	.platform-test {
		gap: 12px;
	}
	.platform-test__tag {
		min-width: 64px;
	}
	.platform-test__row {
		gap: 6px;
	}
	.platform-sam,
	.platform-sam__checks {
		gap: 10px;
	}
	/* Stack the dark board's figures so they don't crowd */
	.platform-stats {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 8px 20px;
	}
	.platform-stats__figure {
		font-size: 48px;
	}
	.platform-stats__item {
		padding: 18px 12px;
	}
	.integration__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.integration__subtitle {
		font-size: 15px;
	}
	/* Stack the figures; the divider flips from a side line to a top line */
	.integration-stats {
		margin-top: 48px;
		gap: 0;
	}
	.integration-stats__item {
		padding: 20px 14px;
	}
	.integration-stats__figure {
		font-size: 44px;
	}
	.integration-stats__label {
		max-width: 320px;
		margin-top: 10px;
		font-size: 14px;
	}
	/* Pull the stacked stats closer to the orbit */
	.section-integration .orbit__container {
		margin-top: 48px;
	}
	/* Tighter section rhythm + smaller cards on phones */
	.flow__inner {
		padding-top: 56px;
		padding-bottom: 56px;
		gap: 32px;
	}
	.flow__lead {
		font-size: 15px;
	}
	/* Narrow the rail lane so cards reclaim width before the 539 step */
	.flow-step {
		padding-left: 72px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.flow-step__card {
		gap: 16px;
		padding: 20px;
	}
	.flow-step__num {
		font-size: 28px;
	}
	.flow-step__title {
		font-size: 18px;
	}
	/* Smaller rail node, track, and glow column on phones */
	.flow-step__node {
		width: 16px;
		height: 16px;
	}
	.flow-step__line,
	.flow-step::before,
	.flow-step::after {
		width: 16px;
	}
	/* Thinnest rail end-caps on phones */
	.flow-step:first-child .flow-step__line::before,
	.flow-step:last-child .flow-step__line::after {
		border-bottom-width: 8px;
	}
	.flow-step {
		padding-left: 40px;
	}
	.flow-step::before,
	.flow-step::after,
	.flow__rail,
	.flow-step__node,
	.flow-step__line {
		left: 8px;
	}
	.flow__steps {
		width: 100%;
	}

	.case__head {
		margin-bottom: 40px;
	}
	.case__lead {
		margin-top: 24px;
	}
	/* Single column: cards span full width, so the desc gets room back */
	.case__grid {
		grid-template-columns: 1fr;
	}
	.case-card__desc {
		font-size: 16px;
	}

	/* Stack the heading: "Powered by" drops under the title */
	.words__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.quote-card {
		flex-basis: 78vw;
		min-height: 280px;
		padding: 20px;
	}
	.quote-card__text {
		min-height: 160px;
		font-size: 17px;
	}
	.quote-card__foot {
		margin-top: 20px;
		padding-top: 20px;
	}
	.quote-card__avatar {
		width: 38px;
		height: 38px;
	}
	.quote-card__badge {
		width: 24px;
		height: 24px;
	}
	.quote-card__name {
		font-size: 14px;
	}
	.quote-card__company {
		font-size: 12px;
	}
	.section-words.is-pinned {
		z-index: 40;
	}
	.section-words.is-pinned .words__pin {
		top: 30px;
	}

	/* ----- FAQ ----- */
	.faq__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.faq__title {
		margin-bottom: 40px;
	}
	.faq-item__q {
		gap: 16px;
		padding: 20px 0;
		font-size: 16px;
	}
	.faq-item__a-inner p {
		padding-bottom: 20px;
	}
}

@media (max-width: 539px) {
	/* INFO CARD: stack to a single column (box padding carries from <=767) */
	.info-card__cards {
		grid-template-columns: 1fr;
	}
	/* ----- PREVENT: compact card padding + reflowed rows ----- */
	.section-prevent {
		padding: 56px 0 64px;
	}

	.prevent-card {
		padding: 20px;
	}

	/* Smallest tier: trim the logo + its divider gap further */
	.prevent-card__brand {
		padding-bottom: 12px;
	}
	.prevent-card__brand img {
		height: 28px;
	}

	/* Stack the headline figure: number above its caption */
	.prevent-card__figure {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin: 12px 0 0;
	}

	.prevent-card__num {
		font-size: 52px;
	}

	/* CSAT row: name + score on one line, bar drops below */
	.prevent-csat {
		margin-top: 16px;
	}
	.prevent-csat__row {
		flex-wrap: wrap;
		gap: 10px 16px;
		padding: 14px 12px;
	}

	.prevent-csat__name {
		flex: 1;
	}

	.prevent-csat__track {
		order: 1;
		flex: 0 0 100%;
	}

	/* Signal stats stack vertically on the narrowest screens */
	.prevent-stats {
		flex-direction: column;
	}

	.prevent-stat {
		padding: 16px;
	}

	.prevent-stat__stars {
		margin-top: 12px;
	}

	.prevent-stat__desc {
		margin-top: 12px;
	}

	.prevent-stat__num {
		font-size: 48px;
	}

	.prevent-card__intro {
		margin-top: 16px;
	}

	.prevent-card__sub {
		margin: 16px 0;
	}

	.prevent-card__foot {
		padding-top: 16px;
	}

	/* Let the closing pill span the card instead of hugging its text */
	.prevent-card__pill {
		width: 100%;
		margin-top: 16px;
	}

	.section-hero .title {
		margin-bottom: 18px;
		min-height: 2em;
	}
	.section-hero.is-pinned .hero__pin {
		padding-top: 24px;
	}

	/* ============ CASE STUDY — responsive ============ */
	.case__head {
		margin-bottom: 28px;
	}
	.case__lead {
		font-size: 15px;
	}
	.case-card {
		padding: 16px;
	}
	.case-card__media {
		margin-bottom: 16px;
	}
	.case-card__tag {
		padding: 6px 9px;
		font-size: 12px;
	}
	.case-card__cta {
		margin-top: 8px;
		font-size: 14px;
	}

	/* Smaller figures + tighter cards on phones */
	.section-integration .orbit__container {
		margin-top: 36px;
	}
	.integration-stats {
		margin-top: 36px;
		flex-direction: column;
	}
	.integration-stats__figure {
		font-size: 36px;
	}
	.integration-stats__item {
		padding: 12px;
	}
	.integration-stats__label {
		max-width: 280px;
		margin-top: 8px;
		font-size: 13px;
	}
	.integration-stats__divider {
		border-left: 0;
		border-top: 1px solid #fff;
	}
	.hero__subtitle {
		margin: 0 auto 24px;
		font-size: 14px;
	}
	.chat {
		margin-top: 36px;
	}
	.chat__inner {
		padding: 24px 18px 100px;
	}
	/* Order card stacks tighter; meta lines wrap to their own rows */
	.chat__card-thumb {
		width: 68px;
		height: 68px;
	}
	.chat__card-meta {
		flex-direction: column;
		gap: 4px;
	}
	/* Chat bottom padding shrank to 50px, so pull the channels up less —
	   keep the chips floating just below the panel, not over the order card */
	.channels {
		margin-top: -100px;
		padding-top: 64px;
	}
	.channels::before {
		height: 130px;
	}
	/* Tightest stacked rhythm between the heading and the steps */
	.flow__inner {
		gap: 28px;
	}
	/* Narrow the rail lane so cards keep their width */
	.flow-step {
		padding: 12px 0 12px 36px;
	}
	.flow-step__desc {
		font-size: 14px;
	}
	/* Tightest card spacing + smallest number on phones */
	.flow-step__card {
		gap: 14px;
		padding: 16px;
		box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
	}
	.flow-step__num {
		font-size: 26px;
	}
	.bubble {
		max-width: 82%;
		font-size: 14px;
		padding: 8px 12px;
	}
	.channel {
		height: 36px;
		padding: 0 12px;
		gap: 6px;
	}
	/* Logo marquee: smallest scale on phones */
	.section-hero-logo {
		padding: 22px 0;
	}
	.section-hero-logo::before,
	.section-hero-logo::after {
		width: 56px;
	}
	.hero-logo__row + .hero-logo__row {
		margin-top: 16px;
	}
	.hero-logo__track {
		gap: 32px;
		padding-right: 32px;
	}
	.hero-logo__img {
		width: 80px;
	}
	/* THE AGENT: tightest scale — single column, compact cards + threads */
	.agent__inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}
	.agent__head {
		padding-bottom: 32px;
		gap: 16px;
	}
	.agent__lead {
		font-size: 14px;
	}
	.agent__grid {
		gap: 28px;
	}
	.agent-card {
		padding: 16px;
	}
	.agent-card__index {
		font-size: 12px;
	}
	.agent-card__title {
		font-size: 20px;
		margin-bottom: 12px;
	}
	.agent-card__desc {
		font-size: 14px;
		margin-bottom: 20px;
	}
	.agent-card__tags {
		padding-top: 16px;
	}
	.agent-card__tags li {
		font-size: 11px;
	}
	.agent-card__media {
		margin-top: 20px;
	}
	.agent-card__link {
		font-size: 14px;
		margin-top: 20px;
	}
	.agent-animation {
		padding: 14px;
	}
	.agent-animation__bubble {
		font-size: 13px;
		padding: 10px 14px;
	}
	.agent-card__media .agent-animation__avatar,
	.agent-card__media .agent-animation__agent {
		width: 30px;
		height: 30px;
	}
	.agent-card__media .agent-animation__card-thumb {
		width: 56px;
		height: 56px;
	}
	.agent-animation__card-title {
		font-size: 13px;
	}
	/* THE PLATFORM: tightest scale — compact cards, mockups, and stats board */
	.platform__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.platform__head {
		gap: 16px;
		padding-bottom: 28px;
	}
	.platform__lead {
		font-size: 14px;
	}
	.platform-card {
		padding: 16px;
	}
	.platform-card__index {
		font-size: 12px;
		/* Tighten tracking so the long uppercase index label wraps less */
		letter-spacing: 0.5px;
	}
	.platform-card__title {
		font-size: 19px;
	}
	.platform-card__desc {
		font-size: 14px;
	}
	.platform-card__media {
		margin-top: 18px;
	}
	.platform-card__media--code {
		padding: 16px;
		background-size: 16px 16px;
	}
	.platform-code {
		padding: 14px 16px;
	}
	.platform-code__body {
		font-size: 13px;
		line-height: 1.7;
	}
	.platform-code__pill {
		padding: 0 5px;
	}
	.platform-tags__panel {
		padding: 20px 16px 0;
	}
	.platform-tags__chips {
		gap: 8px;
		padding-top: 32px;
	}
	.platform-chip {
		font-size: 11px;
		padding: 6px 10px;
	}
	.platform-guard {
		padding: 12px;
	}
	.platform-guard__label,
	.platform-guard__text {
		font-size: 14px;
	}
	.platform-checks {
		gap: 10px;
		margin-top: 14px;
	}
	.platform-check {
		font-size: 13px;
		padding: 6px 12px;
	}
	.platform-check__tick {
		width: 13px;
		height: 13px;
	}
	.platform-test__panel {
		padding: 14px;
	}
	.platform-test__bubble {
		max-width: 85%;
		padding: 8px 12px;
	}
	.platform-test__avatar,
	.platform-test__bot {
		width: 32px;
		height: 32px;
	}
	/* Favicon is 40px intrinsic — clamp it so it doesn't overflow the circle */
	.platform-test__bot img {
		width: 32px;
		height: 32px;
	}
	.platform-tags__avatar {
		width: 28px;
		height: 28px;
	}
	.platform-tags__row {
		gap: 10px;
	}
	.platform-tags__bubble {
		font-size: 12px;
		padding: 9px 12px;
	}
	.platform-test {
		gap: 10px;
	}
	.platform-test__tag {
		min-width: 60px;
		margin-bottom: 10px;
		font-size: 13px;
	}
	.platform-test__row {
		gap: 6px;
	}
	.platform-test__row + .platform-test__row {
		margin-top: 8px;
	}
	.platform-sam,
	.platform-sam__checks {
		gap: 10px;
	}
	.platform-sam__input,
	.platform-sam__reply {
		padding: 12px;
	}
	.platform-sam__field,
	.platform-sam__reply {
		font-size: 14px;
	}
	.platform-stats__figure {
		font-size: 40px;
	}
	.platform-stats__label {
		margin-top: 12px;
		font-size: 14px;
	}
	.platform-stats__item {
		padding: 12px 0;
	}

	.quote-card__text {
		min-height: 140px;
		font-size: 16px;
	}
	/* Near full-width cards on phones; tightest padding + author block */
	.quote-card {
		flex-basis: 86vw;
		min-height: 260px;
		padding: 16px;
	}
	.quote-card__foot {
		margin-top: 18px;
		padding-top: 18px;
	}
	.quote-card__author {
		gap: 10px;
	}
	.quote-card__avatar {
		width: 36px;
		height: 36px;
	}
	.quote-card__badge {
		width: 22px;
		height: 22px;
	}

	/* ----- FAQ ----- */
	.faq__inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}
	.faq__title {
		margin-bottom: 28px;
	}
	.faq-item__q {
		gap: 14px;
		padding: 18px 0;
		font-size: 15px;
	}
	.faq-item__a-inner p {
		padding-bottom: 18px;
	}
}

@media (max-height: 860px) {
	/* Short viewports: the pin is 100vh, so when the window is shallow the quote body
   must shrink too or the card overflows the pinned frame. These come AFTER the
   max-width rules so height wins on short-but-wide screens (e.g. 13" laptops). */
	.quote-card__text {
		min-height: 180px;
		font-size: 19px;
	}
	.quote-card__foot {
		margin-top: 24px;
		padding-top: 24px;
	}
}

@media (max-height: 760px) {
	.quote-card {
		min-height: 280px;
	}
	.quote-card__text {
		min-height: 150px;
		font-size: 18px;
	}
	.quote-card__foot {
		margin-top: 20px;
		padding-top: 20px;
	}
}

@media (max-height: 660px) {
	.quote-card {
		min-height: 240px;
	}
	.quote-card__foot {
		margin-top: 16px;
		padding-top: 16px;
	}
	.quote-card__text {
		min-height: 120px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion: hub halos hold still */
	.section-integration .orbit__center::before,
	.section-integration .orbit__center::after {
		animation: none;
	}

	/* Reduced motion: show the full thread, no pop/stagger */
	.agent-animation__reveal {
		grid-template-rows: 1fr;
		transition: none;
	}
	.agent-animation__reveal-inner {
		opacity: 1;
		transform: none;
		transition: none;
	}
	/* No zoom pulse on hover */
	.agent-animation__bubble:hover,
	.agent-animation__order:hover,
	.agent-animation__card:hover {
		animation: none;
	}

	/* Reduced motion: chips/highlights settle to their final state, no movement */
	.platform-chip--hot {
		background: var(--primary);
		border-color: var(--primary);
		color: #fff;
	}
	.platform-code__pill.is-pending {
		opacity: 1;
	}

	/* Reduced motion: show every step at full opacity (JS skips the scroll math) */
	.flow-step__card {
		opacity: 1;
	}

	/* Reduced motion: never pin (JS also skips it); leave the native scroll row */
	.section-words.is-pinned {
		padding: 80px 0;
	}
	.section-words.is-pinned .words__pin {
		position: static;
		height: auto;
		overflow: visible;
	}
	.section-words.is-pinned .words__viewport {
		overflow-x: auto;
	}

	/* Reduced motion: snap the accordion open/closed, no slide */
	.faq-item__a,
	.faq-item__icon::before,
	.faq-item__icon::after {
		transition: none;
	}

	.cursor {
		animation: none;
	}
	/* Stop the marquee, show a static, centered logo strip */
	.hero-logo__track,
	.trusted__track {
		animation: none;
		transform: none;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		padding-right: 0;
		gap: 48px 64px;
	}
}