/* ============================================================
   AGENT RESOLUTION — page-specific sections
   Moved out of style.css: hero, integration map, counter band,
   why-it-matter, scorecard, dark step-flow, methodology, workflow,
   set-up and proof. Order: components first, then @media at the end.
   ============================================================ */

/* ============ COUNTER (resolution outcomes) ============ */
/* Full-bleed orange band; figures count up on scroll (see components.js). */
.section-agent-counter {
	background: var(--primary);
}

/* Full-bleed: spans the whole band, no container max-width */
.counter-band {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.counter-band__item {
	flex: 1;
	padding: 60px 24px;
	text-align: center;
}

/* Hairline dividers between cells only (not before the first) */
.counter-band__item + .counter-band__item {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.counter-band__figure {
	font-family: "TWK Lausanne", sans-serif;
	font-weight: bold;
	font-size: 72px;
	line-height: 1;
	color: var(--white);
}

/* Brand mark used directly — the source images carry their own white plate */
.counter-band__logo {
	display: inline-block;
	margin-top: 24px;
}

.counter-band__logo img {
	display: block;
	height: 44px;
	width: auto;
}

.counter-band__label {
	max-width: 260px;
	margin: 12px auto 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--white);
}

/* ----- Dark stage variant (green grid, pink accent) — agent-resolution ----- */
.section-flow--dark {
	position: relative;
	background: #475026; /* olive stage */
}

/* Faint grid wash over the stage, same treatment as the hero grid */
.section-flow--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.16) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 2px, transparent 2px);
	background-size: 50px 50px;
	opacity: 0.12;
	pointer-events: none;
}

/* Content sits above the grid wash */
.section-flow--dark .flow__inner {
	position: relative;
	z-index: 1;
}

/* Eyebrow, accent word and lead read light on the dark stage */
.section-flow--dark .top-title {
	color: rgba(255, 255, 255, 0.55);
}

.section-flow--dark .title span {
	color: var(--type-pink);
}

.section-flow--dark .flow__lead {
	color: rgba(255, 255, 255, 0.7);
}

.section-flow--dark .flow-step__num {
	color: #475026;
}

/* Fainter rail line on the dark stage */
.section-flow--dark .flow-step__line::before,
.section-flow--dark .flow-step__line::after {
	background: rgba(255, 255, 255, 0.1);
}

/* ============ WHY IT MATTER ============ */
/* Soft-pink stage. Left heading sticks; right column is a stack of cards.
   Each card sticks under the previous card's index bar (offset by --i), so the
   numbers pile up at the top as you scroll. While a card is the top (uncovered)
   card, JS reveals its .why-frame children one by one (see js/script.js).
   Stacking + frame reveal only engage under .is-anim (JS, wide + motion-ok);
   otherwise the cards render as a plain vertical list with all frames shown. */
.section-agent-why {
	position: relative;
	z-index: 52; /* stack above the sticky header (50) so cards pin cleanly */
	background: #f5c5e8;
	--why-top: 60px; /* sticky offset below the 72px site header */
	overflow: clip;
}

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

/* Left column sticks while the cards scroll past it */
.why__head {
	position: sticky;
	top: var(--why-top);
	flex: 0 0 40%;
	max-width: 460px;
	align-self: flex-start;
	margin-right: auto;
}

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

.why__lead {
	margin-top: 24px;
	max-width: 360px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-mute);
}

.why__stack {
	max-width: 690px;
	flex: 1;
}

/* Plain-list fallback: spacing between cards, no stacking */
.why-card + .why-card {
	margin-top: 24px;
}

.why-card {
	position: relative;
	padding: 32px;
}

.why-card:before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(245 197 232);
	z-index: -2;
}

/* Card bg layer; JS eases --why-dim from 1 down to 0.5/0.75 as the next card
   covers it, fading the bg toward the pink behind so the card recedes. */
.why-card:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #faf8f2 35%, rgb(255, 255, 255, 0) 100%);
	z-index: -1;
	opacity: var(--why-dim, 1);
}

/* Big index number; sits in the strip that stays visible once covered. It
   shrinks to 0.5 (origin top-left) as the card is covered (transform set in JS). */
.why-card__index {
	display: flex;
	align-items: center;
	transform-origin: top left;
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
	margin-bottom: 16px;
}

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

.why-card__desc {
	font-size: 15px;
	color: #7a7a7a;
}

/* Media well that hosts the animated frames */
.why-media {
	margin-top: 24px;
	overflow: hidden;
}

/* Dark grid panel shared by the chat + trace cards */
.why-media--chat,
.why-media--trace {
	padding: 24px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	background-size:
		20px 20px,
		20px 20px,
		100% 100%;
	min-height: 100%;
}

/* Brand logo flush to the top of the chat panel */
.why-media--chat {
	padding-top: 0;
	padding-left: 20px;
	padding-right: 20px;
}

/* Save variant: even 30px padding (brand is pinned, not flush) */
.why-media--chat:has(.why-chat--left) {
	padding: 30px;
}

/* ----- Frame primitive: each step reveals on scroll (JS sets opacity/Y) ----- */
.why-frame {
	will-change: opacity, transform;
}

/* Hide frames only once JS owns the reveal — avoids a flash before the first tick */
.section-agent-why.is-anim .why-frame {
	opacity: 0;
}

/* ----- 01 — chat thread ----- */
.why-chat {
	display: flex;
	flex-direction: column;
}

/* The feed holds the messages; JS auto-scrolls it inside the clipped thread */
.why-chat__thread {
	position: relative;
}

.why-chat__feed {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Animated mode: a sliding window of ~3 messages. The clipped thread shows only
   a few rows; JS translates the feed (transform, not height) so the newest sits
   at the foot, and fades each item by its position. No layout/height animation. */
.section-agent-why.is-anim .why-chat__thread {
	min-height: 320px;
	overflow: hidden;
}

.section-agent-why.is-anim .why-chat__feed {
	will-change: transform;
}

/* Brand logo, centered above the thread. In animated mode JS shrinks the
   height from 100px down to 58px as the chat card scrolls. */
.why-chat__brand {
	align-self: center;
	width: auto;
	height: 58px;
	object-fit: contain;
}

.section-agent-why.is-anim .why-chat__brand {
	height: 100px;
}

.why-chat__row {
	display: flex;
	align-items: flex-end;
	gap: 24px;
}

.why-chat__row--out {
	justify-content: flex-end;
}

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

.why-bubble {
	max-width: min(413px, calc(100% - 128px));
	width: 100%;
	padding: 11px 15px;
	font-size: 14px;
	line-height: 1.45;
	border-radius: 12px;
}

.why-bubble--in {
	background: #fff;
	color: #1c1c1c;
	border-bottom-left-radius: 0;
}

.why-bubble--out {
	background: #edeae4;
	border-bottom-right-radius: 0;
	border: 1px solid #eee;
	align-self: end;
}

/* Order card + first message grouped as one customer box; avatar at the foot */
.why-chat__group {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Agent group: bubbles align to the right (avatar sits on the right) */
.why-chat__row--out .why-chat__group {
	align-items: flex-end;
}

/* Order/ticket card on a dark panel (chat + trace share the chrome) */
.why-chat__card,
.why-policy__order,
.why-trace__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 10px;
	background: #fff;
	border-radius: 12px;
}

.why-chat__card {
	max-width: 413px;
}

/* Grouped with the bubble below: square the bottom-left toward the avatar */
.why-chat__card--in {
	border-bottom-left-radius: 0;
}

.why-chat__thumb {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	background: #f4f1ea;
	flex-shrink: 0;
}

/* Incoming chat card runs a larger thumb than the default 44px */
.why-chat__card--in .why-chat__thumb {
	width: 71px;
	height: 71px;
}

/* Larger product thumb + text — shared by the policy order card and the
   trace card (the trace card mirrors the policy order card's chrome) */
.why-policy__order .why-chat__thumb,
.why-trace__card .why-chat__thumb {
	width: 84px;
	height: 84px;
}

.why-policy__order .why-chat__card-head,
.why-trace__card .why-chat__card-head {
	padding-bottom: 12px;
	margin-bottom: 0;
}

.why-policy__order .why-chat__card-title,
.why-trace__card .why-chat__card-title {
	font-size: 16px;
}

.why-policy__order .why-chat__card-price,
.why-trace__card .why-chat__card-price {
	font-size: 14px;
}

.why-policy__order .why-chat__card-meta {
	padding: 4px 0;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #606060;
}

/* Meta line + verdict share one cell so the verdict swaps in without a shift */
.why-policy__order-status {
	display: grid;
}

.why-policy__order-status > * {
	grid-area: 1 / 1;
}

/* "Refund approved" — fades in once the order card has fully landed (JS) */
.why-policy__verdict {
	align-self: center;
	opacity: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
}

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

.why-chat__card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.why-chat__card-title {
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1c;
}

.why-chat__card-price {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1c;
}

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

/* ----- Chips (shared) ----- */
.why-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	justify-content: center;
}

.why-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--Neutral-neutral-100, #c1c1c1);
	/* Glassy chip over media stages */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #fff;
}

/* White check-in-circle icon prefix (encoded SVG) */
.why-chip::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.875 10.625L8.75 12.5L13.125 8.125' stroke='white' stroke-width='0.625' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='white' stroke-width='0.625' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* Pink rule chips (policy parse + matched policy) — no check icon */
.why-chip--rule {
	background: #ffd1f0;
	border-color: transparent;
	color: #9c2f7a;
}

.why-chip--approved {
	background: #fff;
	border-color: transparent;
	color: #fc5c00;
	font-weight: 600;
}

/* Icon is white — hide it where the chip background is light */
.why-chip--rule::before,
.why-chip--approved::before {
	display: none;
}

/* ----- 02 — policy console ----- */
/* Orange stage with a faint grid. Both scenes (console + order card) share the
   one grid cell so they stack/overlap — the console sets the stage height, the
   order card zooms in over it as the console zooms out (see js/script.js). */
.why-media--policy {
	display: grid;
	place-items: center;
	padding: 48px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, #fc5c00 0%, rgba(0, 0, 0, 0) 100%);
	background-size:
		20px 20px,
		20px 20px,
		100% 100%;
}

.why-policy,
.why-policy__result {
	grid-area: 1 / 1;
}

/* Order card + closing chips stack vertically, 22px apart */
.why-policy__result {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 22px;
	transform-origin: center;
}

/* White outer box holding the full policy content */
.why-policy {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	transform-origin: center;
}

/* Scene B — starts hidden + shrunk; JS zooms it up to rest while the
   console zooms out + fades away. */
.why-policy__order {
	max-width: 488px;
	margin: 0 auto;
	width: 100%;
	opacity: 0;
	transform-origin: center;
	will-change: transform, opacity;
}

/* Scene C — closing chips below the order card; JS zooms them in last */
.why-policy__chips {
	width: 100%;
	opacity: 0;
	transform-origin: center;
	will-change: transform, opacity;
}

.why-policy__chips .why-chips {
	justify-content: center;
	gap: 16px;
}

/* On white, the typed-rule field reads as a bordered input.
   Primary border while the rule is being typed; neutral once finished. */
.why-policy__input {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--primary, #fc5c00);
	border-radius: 12px;
	font-size: 17px;
	color: #1c1c1c;
}

.why-policy__input.is-typed {
	border-color: #ebebeb;
}

/* Caret only blinks while typing — gone once the rule is complete */
.why-policy__input.is-typed .why-policy__caret {
	display: none;
}

/* Blinking text cursor at the end of the typed rule */
.why-policy__caret {
	width: 2px;
	height: 18px;
	margin-left: 1px;
	background: #fc5c00;
	animation: why-caret 1s steps(1) infinite;
}

@keyframes why-caret {
	50% {
		opacity: 0;
	}
}

.why-policy__read-label {
	margin-bottom: 13px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Parsed-rule chips: monospace, soft-pink, rectangular — two-column grid */
.why-policy__read .why-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.why-policy__read .why-chip--rule {
	height: 34px;
	padding: 0 18px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	text-transform: uppercase;
	background: #ffbcf1;
	color: #010101;
	border-radius: 0;
}

/* ----- 03 — glass-box trace ----- */
.why-trace {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Sliding window of frames (like card 01's chat): the feed scrolls inside the
   clipped trace, showing up to ~2 frames; JS owns the transform. */
.why-trace__feed {
	position: relative; /* offsetTop root for measuring frame positions */
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.section-agent-why.is-anim .why-trace {
	/* height set in JS; clipping happens at the .why-media panel */
}

.section-agent-why.is-anim .why-trace__feed {
	will-change: transform;
}

/* In animated mode the connectors fade in with the frame below them (JS) */
.section-agent-why.is-anim .why-trace__arrow,
.section-agent-why.is-anim .why-trace__branch {
	opacity: 0;
}

.why-trace__card {
	align-self: stretch;
	max-width: 488px;
	margin: 0 auto;
	width: 100%;
}

.why-trace__tags {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-size: 14px;
	color: var(--primary);
}

.why-trace__dot {
	color: var(--text-mute);
}

.why-trace__systems {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 10px;
}

/* Connectors between steps — each gap is its own SVG. Straight arrows are static
   markup; the branch is drawn in JS (drawBranch) so its corners curve crisply at
   any width, which square CSS borders can't do. */
.why-trace__arrow {
	display: block;
	width: 16px;
	height: 32px;
	margin: 0 auto;
	overflow: visible;
}
.why-trace__branch {
	display: block;
	width: 100%;
	height: 52px;
	overflow: visible;
}
.why-trace__stem,
.why-trace__head {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
}
.why-trace__stem {
	stroke-dasharray: 5 5;
}
.why-trace__head {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Matched-policy pill — standalone, unrelated to the chip component */
.why-trace__rule {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--type-pink, #ffbcf1);
	font-size: 16px;
	color: #1c1c1c;
}

/* System card: brand logo stacked over an action label */
.why-brand {
	width: 136px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 12px;
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 9px;
}

.why-brand__logo {
	width: 136px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.why-brand__label {
	font-size: 10px;
	color: #7a7a7a;
}

.why-trace__reason {
	margin-top: 32px; /* no connector here — plain spacing above */
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border-radius: 12px;
	font-size: 17px;
	color: #010101;
	text-align: center;
}

/* ----- Animated mode: pinned card stage (JS adds .is-anim on wide + motion-ok) -----
   The stack pins as a fixed-height stage; cards are absolutely stacked inside it.
   JS slides each card from a tilted peek at the bottom up to a rest slot near the
   top (its index bar piles under the earlier cards), then reveals its frames. DOM
   order = paint order, so a peeking card sits over the active one, and a rising
   card covers the one before it. */
.section-agent-why.is-anim .why__stack {
	position: sticky;
	top: var(--why-top);
	height: calc(100svh - var(--why-top) - 16px);
	max-height: calc(100svh - var(--why-top) - 16px);
}

.section-agent-why.is-anim .why-card {
	position: absolute;
	inset: 0;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	transform: translateY(110%); /* parked below the stage until JS places it */
	transform-origin: center top; /* tilt pivots at the peeking strip, not off-screen */
}

.section-agent-why.is-anim .why-card__body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.section-agent-why.is-anim .why__tail {
	display: none;
}

/* ----- 01 (save) — brand pinned top-left, thread shifted clear of it ----- */
/* Variant of the chat card: the brand mark sits static in a left gutter (no
   shrink animation) and the message thread is indented past it. */
.why-chat--left {
	position: relative;
}

.why-chat--left .why-chat__brand,
.section-agent-why.is-anim .why-chat--left .why-chat__brand {
	position: absolute;
	top: 0;
	left: 0;
	width: 110px;
	height: auto;
	z-index: 1;
}

.why-chat--left .why-chat__thread {
	padding-left: 132px;
}

/* Agent badge: an orange brand initial instead of a photo avatar */
.why-chat__avatar--brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}

/* ----- 02 (save) — playbook console ----- */
/* Orange stage (shares the policy grid look) hosting a white console. JS reveals
   each reason->offer row as its own .why-frame, top-down. */
.why-media--play {
	display: grid;
	place-items: center;
	padding: 30px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, #fc5c00 0%, rgba(0, 0, 0, 0) 100%);
	background-size:
		20px 20px,
		20px 20px,
		100% 100%;
}

.why-play {
	width: 100%;
	padding: 12px 16px;
	background: #fff;
	border-radius: 12px;
}

.why-play__label {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
}

.why-play__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.why-play__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 12px 12px 16px;
	border-radius: 12px;
	border: 1px solid #eee;
	background: #faf8f2; /* brand tan */
}

.why-play__reason {
	font-size: 16px;
	color: #1c1c1c;
}

/* Matched offer pill — soft orange, the one accent the row earns */
.why-play__offer {
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: #ffe2d2;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: #fc5c00;
}

/* ----- 03 (save) — A/B test panel ----- */
/* Two frames share one grid cell so they overlap; JS counts the numbers up on
   frame 1, holds, then crossfades to frame 2 (Test B wins). */
.why-media--ab {
	flex-grow: 1;
	display: flex;
	padding: 24px 24px 80px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	background-size:
		20px 20px,
		20px 20px,
		100% 100%;
}

.why-ab {
	display: grid;
	width: 100%;
}

.why-ab__frame {
	grid-area: 1 / 1;
	width: 100%;
}

/* Frame 2 starts hidden; revealAB() crossfades it in over frame 1 */
.why-ab__frame--2 {
	opacity: 0;
}

.why-ab__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	height: 100%;
}

/* White card on the dark grid: black pill tag, segment divider, big orange % */
.why-ab__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #eee;
}

/* Losing card recedes once the result lands: muted tag + gray figure */
.why-ab__card--dim {
	background: #edeae4;
}

.why-ab__card--dim .why-ab__tag {
	background: #d6d3cc;
	color: #8a8a8a;
}

.why-ab__card--dim .why-ab__pct {
	color: #9a9a9a;
}

.why-ab__card--dim .why-ab__seg {
	border-color: #fff;
}

/* Winning card keeps white but lifts on the brand outline */
.why-ab__card--win {
	background: #fff;
	border-color: var(--primary);
}

.why-ab__tag {
	padding: 0 12px;
	border-radius: 999px;
	background: #010101;
	font-size: 16px;
	color: #fff;
}

.why-ab__tag--win {
	background: var(--primary);
}

/* Segment line sits over a full-width divider */
.why-ab__seg {
	align-self: stretch;
	padding-bottom: 12px;
	margin-top: 12px;
	border-bottom: 2px solid #ebebeb;
	font-size: 14px;
	color: #1c1c1c;
}

.why-ab__offer {
	margin-top: 12px;
	font-size: 20px;
	font-weight: 500;
	color: #1c1c1c;
}

/* Pushes the figure toward the foot of the card (cards stretch to equal height) */
.why-ab__pct {
	margin-top: auto;
	padding-top: 8px;
	font-size: 72px;
	font-weight: bold;
	line-height: 1;
	color: var(--primary);
}

.why-ab__pct--win {
	color: var(--primary);
}

.why-ab__cap {
	margin-top: 8px;
	font-size: 13px;
	color: #7a7a7a;
}

/* ----- 01 (revenue) — product recommendation cards in the chat ----- */
.why-rec {
	width: 100%;
	max-width: calc(64px + min(413px, calc(100% - 128px)));
	padding-left: 64px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.why-rec__item {
	display: flex;
	flex-direction: column;
	padding: 8px;
	background: #fff;
	border-radius: 12px;
}

.why-rec__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: #f4f1ea;
}

.why-rec__name {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1c;
}

.why-rec__price {
	font-size: 12px;
	color: #7a7a7a;
}

/* Agent's recommended product card — lighter chrome, single line */
.why-chat__card--pick {
	background: #edeae4;
	max-width: min(413px, calc(100% - 128px));
	width: 100%;
}

.why-chat__card--pick .why-chat__card-head {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.why-chat__card--pick .why-chat__card-price {
	font-size: 16px;
	color: #7a7a7a;
}

/* ----- 02 (revenue) — cart console: progress bar + counter + rule rows ----- */
.why-media--cart {
	display: grid;
	place-items: center;
	padding: 30px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, #fc5c00 0%, rgba(0, 0, 0, 0) 100%);
	background-size:
		20px 20px,
		20px 20px,
		100% 100%;
}

.why-cart {
	width: 100%;
	padding: 16px;
	background: #fff;
	border-radius: 12px;
}

.why-cart__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.why-cart__label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: #1c1c1c;
}

.why-cart__track {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: #efece6;
	overflow: hidden;
}

/* Width is driven by JS (0 -> 100%) as the cart value counts up */
.why-cart__fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--primary);
}

.why-cart__val {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: #1c1c1c;
}

.why-cart__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.why-cart__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid #eee;
	background: #faf8f2;
}

.why-cart__rule {
	position: relative;
	padding-left: 16px;
	font-size: 15px;
	color: #1c1c1c;
}

.why-cart__rule::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: #1c1c1c;
}

.why-cart__pill {
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: #ffe2d2;
	font-size: 13px;
	white-space: nowrap;
	color: #fc5c00;
}

/* ----- 03 (revenue) — assisted-revenue ledger on a dark grid ----- */
.why-media--rev {
	display: grid;
	place-items: center;
	padding: 24px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	background-size:
		20px 20px,
		20px 20px,
		100% 100%;
}

.why-rev {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.why-rev__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 12px 12px 16px;
	border-radius: 12px;
	background: #fff;
}

.why-rev__label {
	position: relative;
	padding-left: 16px;
	font-size: 15px;
	color: #1c1c1c;
}

.why-rev__label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: #1c1c1c;
}

.why-rev__amt {
	flex-shrink: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--primary);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

/* Closing total: orange card, label pill on top, figure + delta on a baseline */
.why-rev__total {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: flex-end;
	gap: 4px 12px;
	margin-top: 0;
	padding: 16px;
	border-radius: 12px;
	background: var(--primary);
	color: #fff;
}

.why-rev__total-label {
	grid-column: 1 / -1;
	justify-self: start;
	width: fit-content;
	padding: 0 7px;
	background: rgba(255, 255, 255, 0.3);
	font-size: 14px;
	color: #010101;
}

.why-rev__total-val {
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
}

.why-rev__total-delta {
	justify-self: end;
	font-size: 14px;
}

/* ============ THE WORKFLOW ============ */
/* Cream stage. Heading block, then four numbered step rows: an oversized index
   beside a content block that splits into title (main) + desc/list (aside).
   Each content block carries the hairline rule that divides the rows. */
.section-workflow {
	background: #faf8f2;
}

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

.workflow__head {
	margin-bottom: 24px;
}

.workflow__lead {
	margin-top: 32px;
	max-width: 785px;
	font-size: 18px;
	line-height: 1.6;
	color: #383838;
}

.workflow__steps {
	margin-top: 64px;
	list-style: none;
	border-top: 1px solid rgba(122, 122, 122, 0.2);
}

/* Index · content. Content holds the title + aside columns and the divider. */
.workflow-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 64px;
	align-items: stretch;
}

.workflow-step__num {
	font-size: 120px;
	font-weight: 400;
	line-height: 0.85;
	letter-spacing: -2px;
	color: var(--primary);
	padding: 40px 0;
}

/* Title (main) + desc/list (aside) side by side; rule closes each row */
.workflow-step__content {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 64px;
	padding: 40px 0;
	border-bottom: 1px solid rgba(122, 122, 122, 0.2);
}

/* Last row drops the divider */
.workflow-step:last-child .workflow-step__content {
	border-bottom: none;
}

.workflow-step__label {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #7a7a7a;
}

.workflow-step__title {
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--text-title);
}

.workflow-step__aside {
	font-size: 16px;
	color: var(--text-mute);
}

.workflow-step__aside p {
	margin-bottom: 16px;
}

.workflow-step__aside ul {
	list-style: none;
	display: grid;
	gap: 16px;
}

.workflow-step__aside li {
	display: flex;
	align-items: start;
	gap: 12px;
}

/* Brand-orange arrow leading each capability (image marker) */
.workflow-step__aside li:before {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: url("../images/arrow-right-orange.svg") no-repeat center / contain;
}

/* ============ SET UP ============ */
/* Navy stage. Heading left + supporting copy pinned right, then three white
   setup-step cards. Cards lift and reveal a diagonal hatch wash on hover. */
.section-agent-setup {
	background: var(--navy);
}

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

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

.setup__head-main {
	flex: 1;
}

/* Eyebrow reads dim-white on the navy stage */
.setup__eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

/* First line is the gold accent; the rest stays white (.title--reverse) */
.setup__title span {
	color: var(--gold);
}

.setup__lead {
	flex-shrink: 0;
	max-width: 440px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

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

/* White card; hover lifts it and tints the border */
.setup-card {
	position: relative;
	padding: 24px;
	background: #fff;
	border: 1px solid transparent;
	transition:
		transform 0.3s ease,
		border-color 0.3s ease;
}

.setup-card:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.5);
}

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

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

.setup-card__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-mute);
}

/* ============ RESOLUTION AGENT — HERO (agent-resolution.html) ============ */
.section-agent-hero {
	position: relative;
	background: var(--bg-reverse);
	overflow: hidden;
	padding: 51px 0;
}

/* Two columns: pitch + stats on the left, product window on the right */
.rh-hero__inner {
	position: relative; /* sits above .hero__grid */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 64px;
	align-items: center;
}

.rh-hero__content {
	max-width: 620px;
}

.section-agent-hero .title {
	margin-bottom: 32px;
}

.rh-hero__lead {
	max-width: 560px;
	margin-bottom: 32px;
	font-size: 17px;
	line-height: 1.6;
	color: #c1c1c1;
}

.rh-hero__cta {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-bottom: 16px;
}

/* Plain white text link sitting next to the primary button */
.rh-hero__textlink {
	font-size: 15px;
	font-weight: bold;
	color: var(--white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.rh-hero__textlink:hover {
	border-bottom-color: var(--white);
}

.rh-hero__note {
	font-size: 14px;
	color: #606060;
}

.rh-hero__note span {
	color: #a3a3a3;
}

/* ----- Stats row (animated counters) ----- */
.rh-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 40px;
	margin-top: 36px;
	padding-top: 24px;
	padding-bottom: 24px;
	list-style: none;
	border-top: 1px solid var(--line);
}

.rh-stat__delta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 4px;
	font-size: 12px;
	line-height: 20px;
	color: var(--white);
}

.rh-stat__delta-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.rh-stat__figure {
	margin-bottom: 12px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--primary);
}

.rh-stat__label {
	max-width: 150px;
	font-size: 14px;
	line-height: 1.4;
	color: #a3a3a3;
}

/* ----- Product window mockup ----- */
.rh-hero__media {
	position: relative;
}

/* Gradient frame (pink -> purple -> dark) wrapping the window */
.rh-window {
	position: relative;
	padding: 1.5px;
	border-radius: 20px;
	background: linear-gradient(150deg, rgba(244, 114, 182, 0.9), rgba(168, 85, 247, 0.5) 35%, rgba(255, 255, 255, 0.06) 70%);
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

/* Product preview (poster now, video later) fills the gradient frame.
   aspect-ratio holds the shape even while the <video> has no source yet. */
.rh-window__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 19px;
}

/* ----- Floating capability badges ----- */
.rh-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	font-size: 16px;
	font-weight: 500;
	color: var(--white);
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	/* Gentle float; paused for reduced-motion below */
	animation: rh-badge-float 5s ease-in-out infinite;
}

.rh-badge__spark {
	width: 24px;
	height: 24px;
	color: var(--primary);
	flex-shrink: 0;
}

.rh-badge--owned {
	top: -20px;
	right: -12px;
}

.rh-badge--zero {
	top: 30%;
	right: calc(100% - 70px);
	animation-delay: 1.2s;
}

.rh-badge--ai {
	bottom: -30px;
	left: 34%;
	animation-delay: 2.1s;
}

@keyframes rh-badge-float {
	50% {
		transform: translateY(-7px);
	}
}

/* ============================================================
   RESOLVED END TO END — INTEGRATION MAP
   Hub-and-spoke diagram. Connector wires are drawn in JS
   (see #resolveMap in script.js); CSS owns the static frame,
   the node cards, and the hub pulse.
   ============================================================ */
.section-resolve {
	background: var(--chat-bg);
	padding: 80px 0;
	overflow: hidden;
}

.resolve__lead {
	max-width: 900px;
	margin: 32px auto 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-mute);
}

/* ----- Rail labels (sit above the map, aligned to its outer edges) ----- */
.resolve__head {
	display: flex;
	justify-content: space-between;
	max-width: 1240px;
	margin: 56px auto 0;
}

.resolve__col-label {
	min-width: 220px;
	padding: 6px 12px;
	font-size: 16px;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
}

.resolve__col-label--desk {
	background: #4a5a18; /* olive */
}

.resolve__col-label--ops {
	background: #00345b; /* navy */
}

/* ----- Diagram grid: left rail · hub · right rail ----- */
.resolve__map {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1240px;
	margin: 24px auto 0;
}

/* SVG sits behind the cards and spans the whole map */
.resolve__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.resolve__wires path {
	fill: none;
	/* stroke is set per-path in JS (gradient by rail) */
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity 0.5s ease;
}

/* Soft thick halo under each wire (same shape + gradient). Hidden by default,
   revealed (to 0.5) only on the hovered node's wire — see focus() in JS. */
.resolve__wires path.resolve__wire-glow {
	stroke-width: 12;
	opacity: 0;
}

.resolve__col {
	position: relative;
	z-index: 1;
	width: 27.5%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-self: stretch;
}

.resolve__col--left {
	align-items: flex-start;
}

.resolve__col--right {
	align-items: flex-end;
}

.resolve__nodes {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	width: 100%;
	justify-content: space-between;
	flex: 1;
	position: relative;
}

/* Cards anchor to the hub-facing edge; JS pushes the ends out (right/left). */
.resolve__col--left .resolve__nodes {
	align-items: flex-end;
}

.resolve__col--right .resolve__nodes {
	align-items: flex-start;
}

/* Integration card */
.resolve__node {
	position: relative; /* anchors the connection dot */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 68px;
	background: #fff;
	border-radius: 16px;
	/* The outline is a 1px shadow ring (not a border) so it never shifts layout
	   and stacks with the hover halo. */
	box-shadow:
		0 0 0 1px var(--ring),
		0 4px 14px rgba(20, 28, 40, 0.06);
	/* translateX (the fan offset) is set per-node by JS — no transition there so
	   the cards snap into place and the wires can draw immediately. */
	transition:
		box-shadow 0.5s ease,
		opacity 0.5s ease;
}

/* Connection dot on the hub-facing edge, sitting just outside the border. */
.resolve__node::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transform: translateY(-50%);
}

/* Ring + dot colour + hover halo match each rail's wire colour */
.resolve__node[data-side="left"] {
	--ring: rgba(71, 80, 38, 0.5);
	--halo-in: rgba(71, 80, 38, 0.16);
	--halo-out: rgba(71, 80, 38, 0.08);
}

.resolve__node[data-side="left"]::after {
	right: -6px; /* straddles the right edge */
	background: #475026;
}

.resolve__node[data-side="right"] {
	--ring: rgba(0, 52, 91, 0.5);
	--halo-in: rgba(0, 52, 91, 0.16);
	--halo-out: rgba(0, 52, 91, 0.08);
}

.resolve__node[data-side="right"]::after {
	left: -6px;
	background: #00345b;
}

/* Selected node: drop the 1px ring, show two stacked halos (4px then 8px) */
.resolve__node:hover {
	box-shadow:
		0 0 0 4px var(--halo-in),
		0 0 0 8px var(--halo-out),
		0 4px 14px rgba(20, 28, 40, 0.06);
}

.resolve__node-ic {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var(--ic, #555);
	border-radius: 6px;
}

.resolve__node-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-title);
	white-space: nowrap;
}

/* Brand logo lockup — stacks a black + colour SVG so we can cross-fade on hover.
   Wrapper sizes to the black image; the colour copy is absolutely overlaid. */
.resolve__node-logo {
	position: relative;
	display: block;
	height: 100%; /* fills the 68px card; SVG carries its own padding */
	border-radius: 16px; /* clip the white plate to the card's rounded corners */
	overflow: hidden;
}

.resolve__node-logo-img {
	display: block;
	height: 100%;
	width: auto;
}

/* Colour copy sits on top of the black one and fades in on node hover. */
.resolve__node-logo-img--color {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.resolve__node:hover .resolve__node-logo-img--color {
	opacity: 1;
}

/* ----- Hub: the KODIF agent ----- */
.resolve__hub {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
}

/* ----- Context map: radial variant of the resolve diagram (3 groups) ----- */
.context__map {
	position: relative;
	display: flex;
	flex-wrap: wrap; /* reviews group wraps onto its own row under the hub */
	justify-content: space-between;
	align-items: center;
	row-gap: 120px;
	width: 1140px;
	max-width: 100%;
	margin: 64px auto 0;
	padding: 0;
}

/* Place each group + the hub in the flex row. Each rail's items baseline to the
   hub-facing edge; JS then fans them outward (right for left rail, left for the
   right rail) — ends flush, middle pushed to the outer edge, rest eased. */
.context__col--left {
	flex: 0 0 34%;
	width: 34%;
	align-items: flex-end;
	gap: 51px;
}

.context__col--right {
	flex: 0 0 34%;
	width: 34%;
	align-items: flex-start;
	gap: 51px;
}

/* Reviews row spans the full width under the hub. Items baseline to the top;
   JS fans them down by `top` — ends flush at the top, the middle node to the
   bottom of this box (height defines the drop), the rest eased. */
.context__col--bottom {
	flex: 0 0 100%;
	width: 100%;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	height: 177px;
}

/* The columns ARE the .resolve__nodes lists; keep them above the wires */
.context__col {
	position: relative;
	z-index: 1;
	list-style: none;
}

/* Bottom group: ring + dot on the top edge, black to match the label */
.resolve__node[data-side="bottom"] {
	--ring: rgba(0, 0, 0, 0.5);
	--halo-in: rgba(0, 0, 0, 0.12);
	--halo-out: rgba(0, 0, 0, 0.06);
}

.resolve__node[data-side="bottom"]::after {
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	background: #111;
}

/* Group labels — pinned onto each trunk line by JS (left/top) */
.context__label {
	position: absolute;
	z-index: 2;
	padding: 4px 12px;
	font-size: 16px;
	white-space: nowrap;
	color: #fff;
	min-width: 210px;
	text-align: center;
	transition: opacity 0.3s ease; /* fade out when its group node is hovered */
}

.context__label--commerce {
	background: #4a5a18; /* olive — matches the commerce wires */
}

.context__label--marketing {
	background: #00345b; /* navy — matches the marketing wires */
}

.context__label--reviews {
	background: #111; /* black — matches the reviews wires */
	min-width: unset;
}

/* ============ RESOLUTION SCORECARD ============ */
/* Reporting card: header (headline + framing copy) over a 2×2 grid of panels —
   a column chart, an intent-volume breakdown, an auto-resolve table and an
   hours-saved figure. Bars grow on scroll via .js-chart -> .is-shown. */
.section-scorecard {
	background: var(--bg);
	padding: 80px 0;
}

/* ----- Header: headline left, framing copy right ----- */
.scorecard__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 56px;
	margin-bottom: 64px;
}

.scorecard__intro {
	flex: 1;
}

.scorecard__intro .title {
	font-size: clamp(34px, 4.2vw, 60px);
}

.scorecard__note {
	flex: 1;
	padding-top: 6px;
}

.scorecard__note-text {
	max-width: 325px;
	margin-left: auto;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-mute);
}

/* ----- Two rows: top (white) / bottom (cream) ----- */
.scorecard__row {
	display: flex;
	gap: 20px;
}

.scorecard__row--bottom {
	margin-top: 20px;
}

.sc-panel {
	display: flex;
	flex-direction: column;
	flex-basis: 0; /* widths come purely from the grow ratio below */
	min-width: 0; /* let charts/tables shrink instead of overflowing */
	padding: 24px;
	background: #faf8f2;
}

/* Column-width ratio within a row */
.sc-panel--large {
	flex-grow: 758;
}

.sc-panel--small {
	flex-grow: 582;
}

.sc-panel__title {
	margin-bottom: 16px;
	font-size: 22px;
	font-weight: 700;
	color: var(--text-title);
}

.sc-panel__desc {
	max-width: 460px;
	margin-top: 0;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-mute);
}

/* ----- Panel 1: resolution-rate column chart ----- */
.sc-bars {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	height: 280px;
	padding: 0 20px;
}

.sc-bars__col {
	position: relative;
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 28px; /* gutter for the month label, below the baseline */
}

.sc-bars__val {
	margin-bottom: 8px;
	font-size: 16px;
	color: var(--text);
	white-space: nowrap;
}

.sc-bars__bar {
	width: 100%;
	height: 0; /* grows to --val once .is-shown lands */
	background: #e7e2d7;
	border-radius: 9px 9px 0 0;
	transition: height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-bars__bar--peak {
	background: var(--type-pink);
}

.sc-bars.is-shown .sc-bars__bar {
	height: var(--val);
}

.sc-bars__label {
	position: absolute;
	bottom: 0;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: #7a7a7a;
}

/* ----- Panel 2: intent-volume breakdown ----- */
.sc-intents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	gap: 20px;
	padding-bottom: 12px;
}

.sc-intent__head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 15px;
}

.sc-intent__name {
	font-size: 16px;
	color: var(--text);
}

.sc-intent__pct {
	font-size: 14px;
	color: #7a7a7a;
}

.sc-intent__track {
	display: block;
	height: 10px;
	background: #dadad2;
	border-radius: 12px;
	overflow: hidden; /* clip the fill to the rounded track */
}

.sc-intent__fill {
	display: block;
	height: 100%;
	width: 0; /* grows to --val once .is-shown lands */
	background: #4a5a18; /* olive, matches the help-desk rail */
	border-radius: 12px;
	transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-intents.is-shown .sc-intent__fill {
	width: var(--val);
}

/* Stagger the fills so they cascade rather than fire at once */
.sc-intents.is-shown .sc-intent:nth-child(2) .sc-intent__fill {
	transition-delay: 0.08s;
}
.sc-intents.is-shown .sc-intent:nth-child(3) .sc-intent__fill {
	transition-delay: 0.16s;
}
.sc-intents.is-shown .sc-intent:nth-child(4) .sc-intent__fill {
	transition-delay: 0.24s;
}

/* ----- Panel 3: auto-resolve table ----- */
.sc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.sc-table th {
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: left;
	color: #7a7a7a;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sc-table td {
	padding: 14px 0;
	color: var(--text);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

table.sc-table tbody>tr:nth-child(odd)>td, 
table.sc-table tbody>tr:nth-child(odd)>th {
	background: transparent;
}

.sc-table tr:last-child td {
	border-bottom: 0;
}

.sc-table th.sc-table__num,
.sc-table__num {
	text-align: center;
}

/* Highlight pill — rounded to match the scorecard design */
.sc-pill {
	display: inline-block;
	padding: 0 12px;
	font-size: 14px;
	color: #282828;
	background: var(--type-yellow);
	border-radius: 999px;
}

/* ----- Panel 4: hours given back ----- */
.sc-panel--hours {
	display: flex;
	flex-direction: column;
}

.sc-hours {
	margin-top: auto; /* anchor the figure to the bottom, aligned with the table */
	font-family: "TWK Lausanne", sans-serif;
	font-weight: 700;
	font-size: 120px;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--primary);
}

.sc-hours__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
	padding-top: 8px;
	font-size: 16px;
	color: #7a7a7a;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.sc-hours__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a3a3a3;
}

/* ============ METHODOLOGY (AI accuracy, 3-layer stack) ============ */
/* Olive stage: faint grid backdrop, centred heading, the layer.svg stack,
   and a three-figure stats band. Pink accents echo the stack's base layer. */
.section-methodology {
	position: relative;
	background: var(--olive);
	padding: 100px 0 120px;
	overflow: hidden;
}

/* Grid backdrop, masked to fade at the edges (echoes .hero__grid) */
.methodology__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.16) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 2px, transparent 2px);
	background-size: 50px 50px;
	pointer-events: none;
	opacity: 0.12;
}

/* Lift content above the grid backdrop */
.methodology__inner {
	position: relative;
}

/* ----- Centred heading ----- */
.methodology__head {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.methodology__eyebrow {
	color: var(--type-pink);
}

/* Accent word turns pink (overrides the orange .title--reverse span) */
.methodology__title span {
	color: var(--type-pink);
}

.methodology__lead {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

/* ----- Layer stack ----- */
.methodology__stage {
	position: relative; /* positioning context for the badges + connector wires */
	display: flex;
	justify-content: center;
	margin: 56px 0;
}

/* Connector layer: badge -> layer-vertex lines, drawn in script.js.
   Spans the whole stage; viewBox is set to its pixel size so units == px. */
.methodology__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

/* Connector pieces fade in step with their badge when focus changes */
.methodology__wires .m-wire {
	transition: opacity 0.3s ease;
}

/* Layer call-out pills. Pinned to the stage edges; their top is set in JS to
   line up with each layer's anchor point. (Pill radius matches the design.) */
.methodology-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	text-align: center;
	padding: 11px 22px;
	font-size: 17px;
	line-height: 1;
	color: #1a1a1a;
	white-space: nowrap;
	border-radius: 999px;
	opacity: 0; /* revealed once JS has positioned it */
	transition:
		opacity 0.3s ease,
		top 0.35s ease;
	cursor: pointer;
}

.methodology-badge--testing {
	background: #f3f528;
}

.methodology-badge--refinement {
	background: #fc5c00;
}

.methodology-badge--knowledge {
	background: #ffbcf1;
}

/* Per-layer detail list — JS pins it under its badge; hidden until that layer is
   hovered, then each row fades + slides up in sequence. */
.methodology-list {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch; /* rows fill the list width (computed in JS) */
	gap: 12px;
	margin: 0;
	padding: 20px 0 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.3s ease;
}

/* Open: visible AND interactive, so hovering the content holds focus */
.methodology-list.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.methodology-list li {
	padding: 12px 16px;
	font-size: 16px;
	text-align: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	/* start state for the reveal */
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

/* Coloured lead-in label (e.g. "Guidelines:"); tinted per layer */
.methodology-list span {
	color: #fc5c00;
}

/* Short-label lists: rows shrink to content and centre instead of filling width */
.methodology-list[data-layer="1"],
.methodology-list[data-layer="3"] {
	align-items: center;
}

.methodology-list.is-open li {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger the rows as the list opens */
.methodology-list.is-open li:nth-child(1) {
	transition-delay: 0.05s;
}
.methodology-list.is-open li:nth-child(2) {
	transition-delay: 0.12s;
}
.methodology-list.is-open li:nth-child(3) {
	transition-delay: 0.19s;
}
.methodology-list.is-open li:nth-child(4) {
	transition-delay: 0.26s;
}

/* Wrapper sets the size; the base SVG defines the box, layers stack over it */
.methodology__layers {
	width: 100%;
	max-width: 520px;
	height: auto;
	position: relative;
}

.methodology__layers > svg {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.4s ease;
}

/* While a layer face is hovered, fade the base out so its overlay reads cleanly.
   opacity:0 keeps the face hit-testable, so hover (and mouseleave) still fire. */
.methodology__layers.is-hovering > svg {
	opacity: 0;
}

/* Overlaid stack pieces — pinned over the base.
   Hidden until the matching data-layer face is hovered (toggled in script.js). */
.platform-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: all ease 0.4s;
}

.platform-layer.is-active {
	opacity: 1;
}

/* Nothing in the stack intercepts the cursor — except the layer faces, so the
   overlay images never steal hover from the face that triggered them. */
.methodology__layers * {
	pointer-events: none;
}

.methodology__layers [data-layer] {
	pointer-events: all;
	cursor: pointer;
}

/* ----- Stats band ----- */
.methodology__stats {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.methodology-stat {
	flex: 1;
	padding: 44px 36px;
}

/* Hairline dividers between cells only (not before the first) */
.methodology-stat + .methodology-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.methodology-stat__figure {
	font-family: "TWK Lausanne", sans-serif;
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	color: var(--type-pink);
}

.methodology-stat__label {
	max-width: 240px;
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* ============ THE PROOF (security & compliance) ============ */
/* White stage: split heading, 3 cream cards, a dark adversarial band, then a
   compliance-badge row. Mirrors the .setup head layout (title left, note right). */
.section-proof {
	background: var(--bg);
}

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

/* Header: headline left, framing copy pinned to the right */
.proof__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 48px;
}

.proof__head-main {
	flex: 1;
}

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

/* Three feature cards */
.proof__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.proof-card {
	padding: 32px;
	background: var(--chat-bg);
}

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

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

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

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

/* Adversarial-by-design band (dark): copy left, pills right */
.proof__band {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin-top: 20px;
	padding: 40px;
	background: var(--bg-reverse);
}

.proof-band__main {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	max-width: 680px;
}

.proof-band__icon {
	flex-shrink: 0;
	display: inline-flex;
}

.proof-band__icon img {
	display: block;
	width: 40px;
	height: 40px;
}

.proof-band__title {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.5px;
	color: var(--white);
	margin-bottom: 12px;
}

.proof-band__desc {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

.proof-band__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
	list-style-type: none;
}

.proof-tag {
	border-radius: 100px;
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #181818;
	background: var(--primary);
	white-space: nowrap;
}

/* Compliance-badge row */
.proof__badges {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 64px;
}

.proof-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 16px;
	padding: 8px 12px;
	border: 1px solid #e8e6e0;
}

.proof-badge__logo {
	flex-shrink: 0;
	width: auto;
	height: 52px;
	object-fit: contain;
}

.proof-badge__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.proof-badge__name {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-title);
}

.proof-badge__sub {
	font-size: 14px;
	color: var(--text-dim);
}

/* ============ RUN THE MATH — REVENUE CALCULATOR ============ */
/* Cream section, white inner panel: sliders left, scenario cards right. */
.section-calc {
	background: #f6f4ef;
	padding: 80px 0;
}

.calc__head {
	margin: 0 auto 48px;
}

.calc__head .title {
	font-size: clamp(40px, 5vw, 64px);
}

.calc__lead {
	max-width: 620px;
	margin: 20px auto 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-mute);
}

.calc__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 80px;
	padding: 40px;
	background: var(--white);
}

/* ----- Left: sliders ----- */
.calc__controls {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}

/* Divider sits centred in the gap between fields (20px pad + 20px gap). */
.calc__field:not(:last-child) {
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(193, 193, 193, 0.2);
}

.calc__field-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
	font-size: 16px; /* label + value inherit; drops to 14px < 1199 */
}

.calc__label {
	font-weight: 600;
	color: var(--text-title);
}

.calc__value {
	font-weight: 700;
	color: var(--primary);
	font-variant-numeric: tabular-nums;
}

/* Range input: JS sets --fill (0..1 fraction). The gradient stop is offset by
   half the thumb so the orange ends exactly under the thumb's centre — which
   travels from +half-thumb to -half-thumb, not the full track width. */
.calc__slider {
	--fill: 0.5;
	--thumb: 20px;
	--stop: calc(var(--fill) * (100% - var(--thumb)) + var(--thumb) / 2);
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: transparent;
	cursor: pointer;
}

.calc__slider::-webkit-slider-runnable-track {
	height: 4px;
	background: linear-gradient(to right, var(--primary) 0 var(--stop), #e3ddd1 var(--stop) 100%);
}

.calc__slider::-moz-range-track {
	height: 4px;
	background: linear-gradient(to right, var(--primary) 0 var(--stop), #e3ddd1 var(--stop) 100%);
}

.calc__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -8px; /* centre the 20px thumb on the 4px track */
	background: var(--primary);
	border: 3px solid var(--white);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.calc__slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--primary);
	border: 3px solid var(--white);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.calc__slider:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 6px;
}

.calc__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 0;
	font-size: 13px;
	color: var(--text-dim);
	font-variant-numeric: tabular-nums;
}

/* ----- Right: scenario cards ----- */
.calc__results {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.calc__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 20px;
	padding: 24px;
	background: #f5f4f2;
}

/* Left side: two columns side by side — name/note and badge/detail. */
.calc__card-info {
	display: flex;
	gap: 16px;
	min-width: 0;
}

.calc__card-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* keep the badge pill-sized, not stretched */
	gap: 16px;
	min-width: 0;
	flex: 1;
}

.calc__card--dark {
	background: var(--bg-reverse);
}

.calc__card-lead {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 150px;
}

.calc__card-name {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-title);
}

.calc__card--dark .calc__card-name {
	color: var(--white);
}

.calc__badge {
	margin: 6px 0 5px;
	padding: 2px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary);
	background: rgba(252, 92, 0, 0.1);
	border-radius: 999px;
}

.calc__card--dark .calc__badge {
	background: rgba(252, 92, 0, 0.18);
}

.calc__card-note {
	margin: 0;
	font-size: 14px;
	color: #7a7a7a;
}

.calc__card-detail {
	margin: 0;
	font-size: 14px;
	color: #7a7a7a;
	font-variant-numeric: tabular-nums;
}

.calc__card--dark .calc__card-detail {
	color: rgba(255, 255, 255, 0.65);
}

.calc__card-figure {
	text-align: right;
}

.calc__card-amount {
	display: block;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--primary);
	font-variant-numeric: tabular-nums;
}

.calc__card-unit {
	display: block;
	font-size: 13px;
	color: #7a7a7a;
}

/* ============ RESPONSIVE (grouped widest -> narrowest) ============ */
@media (max-width: 1199px) {

	/* RUN THE MATH: tighten slider label/value type */
	.calc__field-head {
		font-size: 14px;
	}

	.calc__controls {
		gap: 10px;
	}

	.calc__field:not(:last-child) {
		padding-bottom: 10px;
	}

	.calc__panel {
		/* Sliders take 2/3 the width of the results column */
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 20px;
		padding: 20px;
	}

	.calc__results {
		gap: 16px;
	}

	.calc__card {
		padding: 16px;
		gap: 10px;
	}

	.calc__card-info {
		gap: 12px;
	}

	.calc__card-lead,
	.calc__card-meta {
		gap: 10px;
	}

	.calc__card-lead {
		min-width: 140px;
	}

	.calc__card-name {
		font-size: 20px;
	}

	.calc__card-note {
		font-size: 13px;
	}

	.calc__card-detail {
		font-size: 13px;
	}

	.calc__badge {
		margin: 3px 0 2px;
		font-size: 13px;
	}

	.calc__card-amount {
		font-size: 32px;
	}

	/* ============ RESOLUTION AGENT — RESPONSIVE ============ */
	.rh-hero__inner {
		gap: 40px;
	}
	.rh-stat__figure {
		font-size: 38px;
	}

	.resolve__map {
		gap: 20px;
	}
	.resolve__node {
		height: 48px;
	}
	.resolve__node-name {
		font-size: 14px;
	}
	/* Shrink the hub + thin the wires as the spoke layout tightens */
	.resolve__hub {
		width: 104px;
		height: 104px;
	}
	.resolve__ring,
	.resolve__core {
		width: 56px;
		height: 56px;
	}
	.resolve__wires path {
		stroke-width: 1.75;
	}
	.resolve__wires path.resolve__wire-glow {
		stroke-width: 10;
	}
	/* Context map: pull the rail's node gap in as the radial map narrows */
	.context__col--left,
	.context__col--right {
		gap: 40px;
	}
	/* Ease the pinned group labels so they don't crowd the tighter rails */
	.context__label {
		font-size: 15px;
	}

	/* ----- RESOLUTION AGENT (agent-resolution.html): hero, counter band,
	   integration map, scorecard, set-up + FAQ ----- */

	/* Hero: ease the lead now the column is tighter */
	.rh-hero__lead {
		font-size: 16px;
	}
	/* Scorecard: the hours figure is huge — start pulling it down early */
	.sc-hours {
		font-size: 96px;
	}

	/* Why-it-matter: drop the bubble cap so it fills the narrower card column */
	.why-bubble {
		max-width: 100%;
	}
	/* Tighten the policy console frame so its content keeps room */
	.why-media--policy {
		padding: 16px;
	}
	/* Let chips wrap once the card column narrows, instead of overflowing */
	.why-chip {
		white-space: wrap;
	}
	.why-policy__read .why-chip--rule {
		height: auto;
		padding: 4px 12px;
		text-align: center;
	}
	/* Save variant: trim the brand-gutter padding on smaller screens */
	.why-media--chat:has(.why-chat--left) {
		padding: 16px;
	}
	/* Shrink the pinned brand + its thread indent to match the tighter gutter */
	.why-chat--left .why-chat__brand,
	.section-agent-why.is-anim .why-chat--left .why-chat__brand {
		width: 80px;
	}
	.why-chat--left .why-chat__thread {
		padding-left: 100px;
	}
	/* A/B card: tighter frame, keep extra room at the base for the result band */
	.why-media--ab {
		padding: 16px 16px 90px;
	}
	/* Scale the big win % + offer line down with the narrower card */
	.why-ab__pct {
		font-size: 56px;
	}
	.why-ab__offer {
		font-size: 18px;
	}
	/* Recommendation cards fill the narrower chat column */
	.why-rec {
		max-width: 100%;
	}
	/* Pick card: drop the width cap so it fills the narrower column */
	.why-chat__card--pick {
		max-width: unset;
	}
	.why-chat__card--in .why-chat__thumb {
		width: 60px;
		height: 60px;
	}
	/* METHODOLOGY: shrink the layer stack so the side badges keep clear of it */
	.methodology__layers {
		max-width: 380px;
		margin: 60px 0;
	}
	.methodology-list li {
		font-size: 14px;
	}

	/* THE PROOF: tighten card padding on smaller desktops */
	.proof-card {
		padding: 20px;
	}
	.proof-card__icon {
		margin-bottom: 16px;
	}
	.proof-card__icon img {
		width: 32px;
		height: 32px;
	}
	.proof-card__title {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.proof-card__desc {
		font-size: 14px;
	}
	.proof-band__icon img {
		width: 32px;
		height: 32px;
	}
	.proof__band {
		padding: 20px;
	}
	.proof-tag {
		font-size: 14px;
		padding: 4px 12px;
	}
	.proof__badges {
		margin-top: 40px;
	}
}
@media (max-width: 991px) {

	/* ----- RUN THE MATH responsive: stack sliders above cards ----- */
	.calc__panel {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 16px;
	}

	.calc__controls {
		gap: 24px;
	}

	.calc__card-name {
		font-size: 18px;
	}

	.calc__card-amount {
		font-size: 24px;
	}

	/* ----- SET UP + FAQ responsive ----- */
	.setup__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.setup__lead {
		max-width: none;
	}
	.setup__grid {
		grid-template-columns: 1fr;
	}
	.counter-band__figure {
		font-size: 56px;
	}
	.counter-band__item {
		padding: 48px 20px;
	}
	/* Why-it-matter: heading stops sticking and stacks above the cards */
	.why__inner {
		flex-direction: column;
		gap: 32px;
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.why__head {
		position: static;
		top: auto;
		flex-basis: auto;
		max-width: 560px;
	}
	.why__lead {
		max-width: 520px;
	}
	/* Drop the fixed 690px so the stack fits the column */
	.why__stack {
		flex-basis: auto;
		max-width: 100%;
		width: 100%;
	}
	.why-chat__card--in .why-chat__thumb {
		width: 56px;
		height: 56px;
	}

	/* Stack: pitch on top, product window below */
	.rh-hero__inner {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.rh-hero__content {
		max-width: none;
	}
	.rh-hero__media {
		max-width: 560px;
		margin: 0 auto;
	}
	/* Pull the side badges in so they don't overflow the narrower column */
	.resolve__node-name {
		font-size: 13px;
	}
	/* Step the section padding down before the map stacks at 767 */
	.section-resolve {
		padding: 72px 0;
	}
	/* Hub + wires shrink another step before the layout stacks at 767 */
	.resolve__hub {
		width: 88px;
		height: 88px;
	}
	.resolve__ring,
	.resolve__core {
		width: 48px;
		height: 48px;
	}
	.resolve__wires path {
		stroke-width: 1.5;
	}
	.resolve__wires path.resolve__wire-glow {
		stroke-width: 8;
	}
	/* Context map: tighten the rail's node gap another step */
	.context__col--left,
	.context__col--right {
		gap: 28px;
	}
	/* Shrink the pinned labels so they fit the narrower radial map */
	.context__label {
		min-width: 150px;
		padding: 3px 10px;
		font-size: 12px;
	}
	.resolve__col-label {
		padding: 4px 12px;
		font-size: 14px;
	}

	/* ----- Responsive ----- */
	.scorecard__head {
		flex-direction: column;
		gap: 24px;
	}
	.scorecard__note {
		flex: none;
	}
	/* Single column: panels stack */
	.scorecard__row {
		flex-direction: column;
	}

	/* Hero copy keeps shrinking as the layout stacks */
	.rh-hero__lead {
		font-size: 16px;
	}
	/* Integration map: lead reads tighter above the stacked rails */
	.resolve__lead {
		font-size: 15px;
	}
	/* Scorecard: tighten the header rhythm + scale the oversized figure */
	.scorecard__head {
		margin-bottom: 40px;
	}
	.sc-panel__title {
		font-size: 20px;
	}
	.sc-hours {
		font-size: 84px;
	}
	/* Why-it-matter: trace's three system cards must flex, not overflow */
	.why-trace__systems {
		gap: 10px;
	}
	.why-brand,
	.why-brand__logo {
		width: 100%;
		min-width: 0;
	}
	.why-brand {
		flex: 1;
	}
	/* Workflow: keep num | content, but stack title over desc inside content */
	.workflow-step {
		gap: 36px;
	}
	.workflow-step__num {
		font-size: 72px;
	}
	.workflow-step__content {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.workflow-step__main {
		margin-bottom: 4px;
	}
	/* METHODOLOGY: keep the side-pinned badge layout, shrink the stack + pills so
	   they still fit beside it (JS lays everything out from these rendered sizes). */
	.methodology__stage {
		margin: 48px 0;
	}
	.methodology__layers {
		max-width: 250px;
	}
	.methodology-badge {
		min-width: 120px;
		padding: 8px 14px;
		font-size: 13px;
	}
	/* Tighter gap between each badge and its detail list */
	.methodology-list {
		padding-top: 12px;
	}
	/* Compact the detail rows once the list is open */
	.methodology-list.is-open li {
		font-size: 12px;
		padding: 4px 8px;
		border-radius: 6px;
	}
	/* Left-side lists now run flush-left — start their rows at the left edge */
	.methodology-list[data-layer="1"],
	.methodology-list[data-layer="3"] {
		align-items: flex-start;
	}
	/* STATS: still 3-up here — tighten cell padding + figure so they don't crowd */
	.methodology-stat {
		padding: 32px 24px;
	}
	.methodology-stat__figure {
		font-size: 48px;
	}

	/* THE PROOF: cards to 1-col-friendly pair; badges wrap to a 3/2 grid */
	.proof__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.proof__badges {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Band stacks: copy above, pills below (left-aligned) */
	.proof__band {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}
	.proof-band__tags {
		justify-content: flex-start;
	}
	.proof-badge {
		border-radius: 12px;
	}
	.proof-badge__name {
		font-size: 14px;
	}
	.proof-badge__sub {
		font-size: 13px;
	}
}
@media (max-width: 767px) {
	/* RUN THE MATH: scenario cards go single-column, figure to its own row */
	.section-calc {
		padding: 56px 0;
	}

	.calc__panel {
		gap: 16px;
	}

	.calc__card {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.calc__card-figure {
		text-align: left;
	}

	/* METHODOLOGY: stats stack; dividers flip to top borders */
	.section-methodology {
		padding: 72px 0 80px;
	}
	/* Keep the side-pinned badge layout down to 540px — shrink the stack + pills
	   hard so both badges still clear the stack at the tightest width. Below 540px
	   the badges/wires are hidden in JS (only the centred stack remains). */
	.methodology__stage {
		margin: 36px 0;
	}
	.methodology__layers {
		max-width: 200px;
		margin: 120px 0;
	}
	.methodology-badge {
		min-width: 90px;
		padding: 6px 9px;
		font-size: 10px;
	}
	.methodology-list li {
		font-size: 12px;
		padding: 8px 10px;
	}
	.methodology__stats {
		flex-direction: column;
	}
	.methodology-stat {
		padding: 28px 24px;
	}
	.methodology-stat + .methodology-stat {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.methodology-stat__figure {
		font-size: 52px;
	}
	.methodology-stat__label {
		max-width: none;
	}
	/* Tighten recommendation cards' left inset on narrow screens */
	.why-rec {
		padding-left: 44px;
	}
	/* Compact cart panel padding on narrow screens */
	.why-media--cart {
		padding: 16px;
	}
	.why-cart__rule {
		font-size: 13px;
	}
	.why-cart__row {
		gap: 12px;
		padding: 8px 8px;
	}
	.why-cart__pill {
		padding: 4px 8px;
		font-size: 11px;
	}
	.why-rev__row {
		padding: 8px;
	}
	.why-rev__label {
		font-size: 13px;
	}
	.why-rev__amt {
		padding: 4px 8px;
		font-size: 11px;
	}
	.why-rev {
		gap: 8px;
	}
	.why-rev__total {
		padding: 12px;
	}
	.why-rev__total-val {
		font-size: 28px;
	}
	.why-rev__total-delta {
		font-size: 12px;
	}
	.why-media--rev {
		padding: 16px;
	}
	/* Why-it-matter: trim the section padding + head/stack gap down */
	.why__inner {
		gap: 24px;
		padding-top: 56px;
		padding-bottom: 56px;
	}
	/* A/B card: stop stretching so it sizes to content on phones */
	.why-media--ab {
		flex-grow: unset;
	}
	/* A/B card: keep scaling the win % + offer down on phones */
	.why-ab__pct {
		font-size: 48px;
	}
	.why-ab__offer {
		font-size: 16px;
	}
	/* Tighter card padding + index on phones */
	.why-card {
		padding: 0 18px 22px;
	}
	.why-card__index {
		height: 52px;
		font-size: 28px;
	}
	.why-card__title {
		font-size: 22px;
	}
	.why-media--chat,
	.why-media--trace,
	.why-media--policy {
		padding: 18px;
	}
	/* Counter band stacks; dividers flip from vertical to horizontal */
	.counter-band {
		flex-direction: column;
	}
	.counter-band__item {
		padding: 40px 20px;
	}
	.counter-band__item + .counter-band__item {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
	}

	.section-agent-hero {
		padding: 48px 0 64px;
	}
	.rh-hero__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.rh-hero__cta .button {
		width: 100%;
	}
	/* Stats wrap to a 2-up grid on phones */
	.rh-hero__stats {
		gap: 28px 24px;
	}

	/* The spoke layout stays on mobile (smaller hub + cards let it breathe), so
	   JS keeps drawing the wires here — only the rail labels stack above it. */
	.section-resolve {
		padding: 64px 0 72px;
	}
	.resolve__map {
		gap: 36px;
		margin-top: 40px;
	}
	/* Stack the rail labels and centre them above the stacked lists */
	.resolve__head {
		margin-top: 32px;
		gap: 12px;
	}
	/* Neutralise any fan offset JS may have applied before the resize */
	.resolve__node {
		height: 40px;
		transform: none !important;
	}
	/* Smaller connection dot to match the slimmer cards */
	.resolve__node::after {
		width: 8px;
		height: 8px;
	}
	.resolve__node[data-side="left"]::after {
		right: -4px;
	}
	.resolve__node[data-side="right"]::after {
		left: -4px;
	}
	.resolve__node[data-side="bottom"]::after {
		top: -4px;
	}

	/* Context map: single stacked column, static labels, no fan margins */
	.context__map {
		padding-top: 60px;
	}
	.context__label--commerce {
		top: 0 !important;
		left: 0 !important;
		width: 48%;
		min-width: unset;
		white-space: wrap;
	}
	.context__label--marketing {
		top: 0 !important;
		left: unset !important;
		right: 0 !important;
		width: 48%;
		min-width: unset;
		white-space: wrap;
	}

	.section-scorecard {
		padding: 56px 0;
	}
	.sc-bars {
		height: 220px;
		gap: 10px;
	}
	.sc-panel__desc {
		font-size: 14px;
	}

	/* ----- Hero ----- */
	.section-agent-hero .title {
		margin-bottom: 22px;
	}
	.rh-hero__lead {
		margin-bottom: 24px;
		font-size: 15px;
	}
	.rh-hero__note {
		font-size: 13px;
	}
	.rh-hero__stats {
		gap: 24px 20px;
		margin-top: 28px;
	}
	.rh-stat__figure {
		font-size: 32px;
	}
	/* Shrink the floating badges before they're dropped at 539 */
	.rh-badge {
		font-size: 10px;
		padding: 4px 8px;
	}
	.rh-badge__spark {
		width: 18px;
		height: 18px;
	}

	/* ----- Counter band ----- */
	.counter-band__figure {
		font-size: 48px;
	}
	.counter-band__logo img {
		height: 38px;
	}
	.counter-band__label {
		font-size: 14px;
	}

	/* ----- Integration map (stacked rails) ----- */
	.resolve__lead {
		font-size: 15px;
	}
	.resolve__col-label {
		min-width: 200px;
		font-size: 14px;
	}

	/* ----- Why-it-matter (plain stacked cards on mobile) ----- */
	.why-card__desc {
		font-size: 14px;
	}
	.why-chat__row {
		gap: 12px;
	}
	.why-chat__avatar {
		width: 32px;
		height: 32px;
	}
	.why-bubble {
		font-size: 13px;
	}
	/* Policy + trace product thumbs are oversized on phones */
	.why-policy__order .why-chat__thumb,
	.why-trace__card .why-chat__thumb {
		width: 64px;
		height: 64px;
	}
	.why-media--policy {
		padding: 24px;
	}
	.why-policy {
		padding: 16px;
	}
	.why-policy__input {
		font-size: 15px;
	}
	.why-trace__rule {
		font-size: 14px;
	}
	.why-trace__reason {
		font-size: 15px;
	}

	/* ----- Scorecard ----- */
	.scorecard__head {
		margin-bottom: 36px;
	}
	.sc-panel {
		padding: 20px;
	}
	.sc-panel__title {
		font-size: 20px;
	}
	.sc-intent__name {
		font-size: 15px;
	}
	.sc-hours {
		font-size: 72px;
	}
	/* Footer line can wrap on narrow panels */
	.sc-hours__foot {
		flex-wrap: wrap;
		gap: 8px 12px;
		font-size: 14px;
	}
	.sc-table th,
	.sc-table td {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	/* ----- Workflow ----- */
	.workflow__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.workflow-step__num {
		padding: 32px 0;
		font-size: 60px;
	}
	.workflow-step__content {
		padding: 32px 0;
	}
	.workflow-step__title {
		font-size: 26px;
	}

	/* ----- Set up ----- */
	.setup__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.setup__head {
		padding-bottom: 40px;
	}
	.setup__grid {
		gap: 16px;
	}
	.setup-card {
		padding: 20px;
	}
	.setup-card__title {
		font-size: 20px;
	}

	/* THE PROOF: header stacks; cards go single-column; badges to 2-up */
	.proof__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.proof__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding-bottom: 36px;
	}
	.proof__note {
		max-width: none;
	}
	.proof__cards {
		grid-template-columns: 1fr;
	}
	.proof-card {
		padding: 16px;
	}
	.proof-card__icon {
		margin-bottom: 8px;
	}
	.proof__band {
		padding: 20px;
	}
	.proof__badges {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 575px) {
	/* RUN THE MATH: stack the card's name/note over badge/detail */
	.calc__card-info {
		flex-direction: column;
	}
}
@media (max-width: 539px) {
	/* RUN THE MATH: tightest vertical rhythm */
	.section-calc {
		padding: 44px 0;
	}

	/* METHODOLOGY: phone portrait — wires are dropped in JS; the badges become a
	   static centred column ABOVE the stack, so the stack reclaims the full width. */
	.methodology__stage {
		flex-direction: column;
		align-items: center;
	}
	.methodology__layers {
		max-width: 520px;
		margin: 20px 0;
	}
	/* Lists stay hover-only (no touch trigger) — JS never sizes them here */
	.methodology-list {
		width: 250px !important;
		gap: 8px;
	}
	.methodology-list.is-open {
		pointer-events: none;
	}
	/* STATS: tighten the stacked cells + figure for phone widths */
	.methodology-stat {
		padding: 24px 20px;
	}
	.methodology-stat__figure {
		font-size: 44px;
	}
	.methodology-stat__label {
		font-size: 14px;
	}
	/* Tighten recommendation cards' left inset + gap further on mobile */
	.why-rec {
		padding-left: 40px;
		gap: 4px;
	}
	.why-rec__name {
		font-size: 10px;
	}
	.why-rec__price {
		font-size: 10px;
	}

	.rh-stat__label {
		max-width: none;
		font-size: 12px;
	}
	/* Badges drift offscreen on tiny widths — hide them */
	.sc-bars__val {
		font-size: 12px;
	}
	.sc-table {
		font-size: 14px;
	}

	/* ----- Hero ----- */
	.section-agent-hero {
		padding: 40px 0 56px;
	}
	.rh-hero__inner {
		gap: 40px;
	}
	.rh-hero__lead {
		font-size: 14px;
	}
	.rh-hero__stats {
		gap: 8px;
		margin-top: 12px;
		padding-top: 12px;
	}
	.rh-stat__figure {
		font-size: 24px;
	}

	/* ----- Counter band ----- */
	.counter-band__item {
		padding: 32px 16px;
	}
	.counter-band__figure {
		font-size: 40px;
	}
	.counter-band__logo {
		margin-top: 18px;
	}
	.counter-band__logo img {
		height: 34px;
	}
	.counter-band__label {
		margin-top: 10px;
	}

	/* ----- Integration map ----- */
	.section-resolve {
		padding: 48px 0 56px;
	}
	.resolve__map {
		gap: 28px;
		margin-top: 20px;
	}
	.resolve__col-label {
		min-width: 0;
		width: 100%;
		max-width: unset;
		padding: 2px 10px;
		font-size: 12px;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.resolve__nodes {
		gap: 12px;
	}
	.context__label--commerce {
		min-height: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.context__label--marketing {
		min-height: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.context__col--bottom {
		height: 100px;
	}
	.resolve__node {
		height: 36px;
		border-radius: 8px;
	}
	.resolve__hub {
		width: 60px;
		height: 60px;
	}
	.resolve__ring,
	.resolve__core {
		width: 36px;
		height: 36px;
	}

	/* ----- Why-it-matter ----- */
	.why__inner {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.why-card__title {
		font-size: 20px;
	}
	.why-card__index {
		font-size: 24px;
	}
	/* A/B card: smallest tier for the win % */
	.why-ab__pct {
		font-size: 40px;
	}
	.why-media--chat,
	.why-media--trace {
		padding: 14px;
	}
	.why-media--policy {
		padding: 16px;
	}
	.why-chat__row {
		gap: 10px;
	}
	.why-chat__avatar {
		width: 28px;
		height: 28px;
	}
	.why-bubble {
		padding: 9px 12px;
	}
	/* Order/ticket cards span the full bubble width on tiny screens */
	.why-chat__card {
		max-width: none;
	}
	.why-policy__order .why-chat__thumb,
	.why-trace__card .why-chat__thumb {
		width: 56px;
		height: 56px;
	}
	/* Parsed-rule chips drop to a single column */
	.why-policy__read .why-chips {
		grid-template-columns: 1fr;
	}
	.why-policy__input {
		font-size: 14px;
	}
	.why-trace__rule {
		font-size: 13px;
	}
	.why-trace__reason {
		font-size: 14px;
	}
	.why-brand__label {
		font-size: 9px;
	}

	/* ----- Scorecard ----- */
	.section-scorecard {
		padding: 44px 0;
	}
	.scorecard__head {
		margin-bottom: 28px;
	}
	.sc-panel {
		padding: 16px;
	}
	.sc-panel__title {
		font-size: 19px;
	}
	.sc-panel__desc {
		font-size: 13px;
	}
	.sc-bars {
		height: 180px;
		gap: 8px;
		padding: 0 8px;
	}
	.sc-bars__label {
		font-size: 12px;
	}
	.sc-intents {
		gap: 16px;
	}
	.sc-intent__name {
		font-size: 14px;
	}
	.sc-hours {
		font-size: 60px;
	}
	.sc-hours__foot {
		font-size: 13px;
	}
	.sc-table th,
	.sc-table td {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* ----- Workflow ----- */
	.workflow__inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}
	/* Single column: number stacks above the content (title + list) */
	.workflow-step {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.workflow-step__num {
		padding: 24px 0 0;
		font-size: 52px;
	}
	.workflow-step__content {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 0 0 24px;
	}
	.workflow-step__title {
		font-size: 24px;
	}

	/* ----- Set up ----- */
	.setup__inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}
	.setup__head {
		padding-bottom: 32px;
	}
	.setup__grid {
		gap: 14px;
	}
	.setup-card {
		padding: 16px;
	}
	.setup-card__title {
		font-size: 19px;
	}
	.setup-card__desc {
		font-size: 14px;
	}

	/* THE PROOF: phone portrait — band copy stacks under its icon; badges 1-up */
	.proof-band__main {
		flex-direction: column;
		gap: 16px;
	}
	.proof-band__tags {
		gap: 10px;
	}
	.proof-tag {
		font-size: 12px;
		padding: 9px 14px;
	}
	.proof__badges {
		grid-template-columns: 1fr;
	}
}
@media (prefers-reduced-motion: reduce) {
	/* Methodology detail list: reveal with no slide/stagger */
	.methodology-list li {
		transform: none;
		transition: opacity 0.2s ease;
	}
	.methodology-list.is-open li {
		transition-delay: 0s;
	}
	/* No badge lift tween under reduced motion */
	.methodology-badge {
		transition: opacity 0.2s ease;
	}

	/* Reduced motion: never animate — plain stacked list, everything visible */
	.section-agent-why .why-frame {
		opacity: 1 !important;
		transform: none !important;
	}
	.why-policy__caret {
		display: none;
	}

	.rh-badge,
	.rh-caret {
		animation: none;
	}

	.resolve__ring {
		animation: none;
		opacity: 0;
	}
}

/* ============ SECTION CTA — REVENUE (email capture + trust checks) ============ */
/* Adds a work-email form and a row of trust checks to the shared dark .section-cta.
   Square corners on the field/button; the check icon is the only rounded element
   (a circle by design, matching the mock). */
.section-cta--form .cta-form {
	display: flex;
	gap: 6px;
	max-width: 480px;
	margin: 32px auto 0;
	padding: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 14px;
}

/* Visually hidden — the placeholder carries the label for sighted users */
.cta-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cta-form__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	background: transparent;
	border: 0;
	color: var(--white);
	font-size: 16px;
}

.cta-form__input::placeholder {
	color: var(--text-dim);
}

.cta-form__input:focus {
	outline: none;
}

/* Styling comes from .button.button--white; keep it from stretching in the flex row */
.cta-form__submit {
	flex-shrink: 0;
}

/* Invalid submit: ring the field red (JS toggles .cta-form--error) */
.cta-form--error {
	box-shadow: 0 0 0 1px var(--primary);
}

/* Inline validation message injected by JS right after the form */
.cta-form__msg {
	max-width: 480px;
	margin: 12px auto 0;
	font-size: 14px;
	color: var(--primary);
}

.cta-form__msg--ok {
	color: var(--white);
}

.cta-checks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 28px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.cta-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-dim);
}

.cta-check__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--primary);
	border: 1px solid var(--primary);
	border-radius: 50%;
}

@media (max-width: 991px) {
	.section-cta--form .cta-form {
		border-radius: 12px;
	}
	.section-cta--form .cta-form,
	.cta-checks {
		margin-top: 20px;
	}
	.cta-form__input {
		height: 44px;
	}
}

@media (max-width: 767px) {
	.section-cta--form .cta-form,
	.cta-checks {
		margin-top: 16px;
	}
}

@media (max-width: 539px) {
	/* Stack the field above the button so both stay tappable */
	.cta-form__input {
		height: 40px;
	}
	.cta-checks {
		flex-direction: column;
		align-items: start;
		gap: 12px;
	}
}