/* ============================================================
   New look - homepage (global, English)
   Loaded after new-look/base.css and after the homepage's own <style> block in index.ejs, and built from
   the base parts: the frame, frame lines, dashed bands, type, buttons and tokens (--acn-*).
   The page's components (composer, video poster, agent cards, how-it-works, reviews) keep their aihp-*
   classes and scripts; this file only changes how they look. The old block marks nearly every rule
   !important, so the overrides here that meet one use !important too.
   Every rule is scoped under .hm (the homepage wrapper).
   ============================================================ */

/* ---------- The old block's tokens, set to the new look's values ----------
   Its components (mock windows, chat bubbles, calendar, popover) read these, so they follow along. */
.aihp.hm {
	--aihp-dark: #2c2b36;
	--aihp-dark-2: #34333f;
	--aihp-purple: #8e56dc;
	--aihp-purple-hover: #7b3bd6;
	--aihp-purple-text: #7b3bd6;
	--aihp-lavender: #c9a8ff;
	--aihp-lavender-soft: #f1e9fd;
	--aihp-ink: #2c2b36;
	--aihp-muted: #66656f;
	--aihp-muted-dark: rgba(255, 255, 255, 0.72);
	--aihp-white: #ffffff;
	--aihp-surface: #f8f8fb;
	--aihp-surface-2: #f1e9fd;
	--aihp-line: #e6e7ea;
	--aihp-line-dark: rgba(255, 255, 255, 0.1);
	--aihp-radius-lg: 12px;
	--aihp-radius-md: 10px;
	--aihp-radius-sm: 8px;
	--aihp-font: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	-webkit-font-smoothing: auto !important;
}

/* The old block strips every link's underline; text links in the new look keep theirs */
.hm .hm-top__more a {
	color: var(--acn-accent-hover);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ============================================================
   1. HERO: the claim and the composer, four promises, the client logos
   ============================================================ */

.hm-top {
	padding-top: calc(68px + clamp(56px, 7vw, 104px));
	padding-bottom: 0;
}

.hm .hm-top__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: clamp(56px, 6vw, 88px);
	text-align: center;
}

/* A plain line above the title, not a chip: the product in ink, underlined in purple; the rest muted */
.hm .hm-top__badge {
	margin-bottom: 24px;
	color: var(--acn-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.hm .hm-top__badge b {
	position: relative;
	display: inline-block;
	color: var(--acn-ink);
	font-weight: 500;
}

.hm .hm-top__badge b::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--acn-accent);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.hm .hm-top__badge b::after {
		animation: hm-line-in 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
	}

	@keyframes hm-line-in {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
}

/* The English claim is longer than the Hebrew one: a wider measure and a slightly smaller top size,
   so it sits on two lines on a wide screen */
.hm .hm-top__title {
	max-width: 21em;
	color: var(--acn-ink);
	font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.375rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.hm .hm-top__title span {
	display: block;
	font-weight: 400;
}

.hm .hm-top__lead {
	max-width: 34em;
	margin-top: 22px;
	color: var(--acn-muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.65;
	text-wrap: pretty;
}

.hm .hm-top__more {
	margin-top: 20px;
	font-size: 0.9375rem;
}

/* ---------- The composer ----------
   Like the site's form fields: a light tinted fill and a 3:1 border (WCAG 1.4.11) set it apart from the
   white; it turns white with the purple ring while typing. */
.hm .aihp-composer {
	width: 100%;
	max-width: 720px !important;
	margin: 36px auto 0 !important;
	padding: 8px !important;
	border: 1px solid #8b8998 !important;
	border-radius: 16px !important;
	background: #f6f5f9 !important;
	text-align: left !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	animation: none;
}

.hm .aihp-composer:hover {
	border-color: #6c6a79 !important;
}

.hm .aihp-composer:focus-within {
	border-color: var(--acn-accent) !important;
	background: #ffffff !important;
	outline: 3px solid rgba(142, 86, 220, 0.35);
	outline-offset: 0;
}

.hm .aihp-composer-textarea {
	color: var(--acn-ink) !important;
	font-size: 1.0625rem !important;
}

.hm .aihp-composer-textarea::placeholder {
	color: #6f6d7a !important;
}

.hm .aihp-composer-tool {
	width: 36px !important;
	height: 36px !important;
	border-color: #d4d5db !important;
	background: #ffffff !important;
	color: var(--acn-muted) !important;
}

.hm .aihp-composer-tool:hover {
	border-color: #a9aab3 !important;
	color: var(--acn-ink) !important;
}

.hm .aihp-composer-mode {
	border-color: #d4d5db !important;
	background: #ffffff !important;
	color: var(--acn-ink) !important;
	font-size: 0.875rem !important;
}

.hm .aihp-composer-mode:hover {
	border-color: #a9aab3 !important;
	background: #ffffff !important;
}

.hm .aihp-composer-mode svg {
	color: var(--acn-muted) !important;
}

.hm .aihp-composer-send {
	width: 44px !important;
	height: 44px !important;
}

.hm .aihp-composer-tool:focus-visible,
.hm .aihp-composer-mode:focus-visible,
.hm .aihp-composer-send:focus-visible,
.hm .aihp-composer-popover-close:focus-visible,
.hm .aihp-composer-popover-cta:focus-visible {
	outline: 3px solid var(--acn-accent) !important;
	outline-offset: 2px !important;
}

.hm .aihp-composer-popover {
	border: 1px solid var(--acn-line) !important;
	background: #ffffff !important;
	box-shadow: 0 24px 48px -28px rgba(20, 16, 40, 0.28) !important;
}

.hm .aihp-composer-popover-title {
	font-weight: 500 !important;
}

.hm .aihp-composer-popover-cta {
	padding: 10px 18px !important;
	border-radius: 48px !important;
	font-weight: 500 !important;
}

/* ---------- Four promises, in cells divided by thin lines ---------- */
/* The old block zeroes every list's margin; the frame needs its auto side margins back */
.hm .hm-boxes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-inline: auto !important;
	padding-inline: 0 !important;
}

.hm .hm-box {
	padding: 22px clamp(20px, 2.4vw, 32px) 24px;
	border-inline-start: 1px solid var(--acn-line);
	background: #ffffff;
}

.hm .hm-box:first-child {
	border-inline-start: 0;
}

/* A short purple line above each title */
.hm .hm-box::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--acn-accent);
}

.hm .hm-box__title {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.35;
}

.hm .hm-box__text {
	margin-top: 6px;
	color: var(--acn-muted);
	font-size: 0.9375rem;
}

/* ---------- Client logos: the shared .acn-logos grid (base.css, partials/client-logos.ejs) ----------
   The old block zeroes every list's margin; the grid needs its auto side margins back */
.hm .acn-logos__grid {
	margin-inline: auto !important;
}

/* ============================================================
   2. PRODUCT OVERVIEW VIDEO
   ============================================================ */

/* The video in a plain framed card: a thin line, the site's corners, no glow */
.hm .aihp-demo-frame {
	max-width: 1080px !important;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid var(--acn-line);
	border-radius: var(--acn-radius) !important;
	background: var(--acn-dark) !important;
	box-shadow: none !important;
}

.hm .aihp-demo-video {
	border-radius: 0 !important;
}

.hm .aihp-poster {
	--poster-bg: #232230;
}

.hm .aihp-poster-label {
	font-family: var(--aihp-font) !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
}

/* ============================================================
   3. WHAT THE AGENT DOES: three cells divided by thin lines
   ============================================================ */

.hm .hm-cells {
	gap: 0 !important;
	margin-top: 0 !important;
	padding-inline: 0 !important;
}

.hm .aihp-oneagent-card {
	padding: clamp(20px, 2.4vw, 32px);
	border: 0 !important;
	border-inline-start: 1px solid var(--acn-line) !important;
	border-radius: 0 !important;
	background: #ffffff !important;
}

.hm .aihp-oneagent-card:first-child {
	border-inline-start: 0 !important;
}

/* The product fragment on the soft grey, in the site's corners (no colour washes) */
.hm .aihp-oneagent-visual {
	min-height: 300px !important;
	border-radius: 10px;
	background: var(--acn-soft) !important;
}

.hm .aihp-oneagent-body {
	padding: 24px 0 0 !important;
}

.hm .aihp-oneagent-title {
	margin-bottom: 6px !important;
	color: var(--acn-ink) !important;
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

.hm .aihp-oneagent-desc {
	color: var(--acn-muted) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
}

/* Lighter shadows inside the fragments, closer to the flat look */
.hm .aihp-test-window,
.hm .aihp-fix-bubble--agent,
.hm .aihp-auto-cal,
.hm .aihp-auto-notification {
	background: #ffffff !important;
	box-shadow: 0 12px 28px -20px rgba(20, 16, 40, 0.28) !important;
}

.hm .aihp-test-agent-tag,
.hm .aihp-auto-cal-title,
.hm .aihp-auto-notification-title {
	font-weight: 500 !important;
}

/* ============================================================
   4. HOW IT WORKS (dark block)
   ============================================================ */

/* The shell's own dark rounded card gives way to the dark block */
.hm .aihp-sticky-shell {
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.hm .aihp-sticky-grid {
	padding-left: 0 !important;
}

.hm .aihp-sticky-nav-pin .acn-h2 {
	margin-bottom: 36px;
}

.hm .aihp-sticky-item {
	padding: 20px 0 !important;
	border-bottom: 1px solid var(--acn-dark-line) !important;
}

.hm .aihp-sticky-item:first-child {
	border-top: 1px solid var(--acn-dark-line);
}

.hm .aihp-sticky-item-title {
	color: rgba(255, 255, 255, 0.62) !important;
	font-size: 1.125rem !important;
	font-weight: 500 !important;
}

.hm .aihp-sticky-item.is-active .aihp-sticky-item-title,
.hm .aihp-sticky-item-title:hover {
	color: #ffffff !important;
}

.hm .aihp-sticky-item-title:focus-visible {
	outline: 3px solid var(--acn-accent-light) !important;
}

.hm .aihp-sticky-item-desc {
	color: var(--acn-on-dark-muted) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
}

/* The progress line under the open step, in the brand purples */
.hm .aihp-sticky-item-bar {
	background: linear-gradient(90deg, #8e56dc, #c9a8ff) !important;
}

.hm .aihp-frame--photo {
	border: 1px solid var(--acn-dark-line) !important;
	border-radius: 10px !important;
}

@media (max-width: 900px) {
	.hm .aihp-sticky-item-title {
		color: #ffffff !important;
	}
}

/* ============================================================
   5. GLOBAL COVERAGE: the standards beside the map, in two cells
   ============================================================ */

.hm .hm-globe__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	padding-inline: 0;
	background: #ffffff;
}

.hm .hm-globe__copy {
	padding: clamp(28px, 4.5vw, 56px);
	text-align: left !important;
}

/* The standards: outline pills with a purple tick, like the footer's */
.hm .aihp-globe-copy .aihp-globe-tags {
	gap: 10px !important;
	margin-top: 32px !important;
	justify-content: flex-start !important;
}

.hm .aihp-globe-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px !important;
	border-color: var(--acn-line) !important;
	background: #ffffff !important;
	color: var(--acn-ink) !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
}

.hm .aihp-globe-tag::before {
	content: "";
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--acn-accent);
}

.hm .hm-globe__media {
	display: grid;
	place-items: center;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(28px, 4.5vw, 56px);
	border-inline-start: 1px solid var(--acn-line);
	background: var(--acn-soft);
	aspect-ratio: auto !important;
}

.hm .hm-globe__media .aihp-globe-map {
	max-width: 560px;
	height: auto !important;
}

/* ============================================================
   6. REVIEWS: cards in a ruled row, scrolled by the arrows
   ============================================================ */

.hm .hm-proof__frame {
	padding-inline: 0;
	background: #ffffff;
}

.hm .aihp-proof-viewport {
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.hm .aihp-proof-viewport:focus-visible {
	outline-offset: -3px;
}

.hm .aihp-proof-row {
	gap: 0 !important;
	padding: 0 !important;
}

.hm .aihp-proof-card {
	flex-basis: 336px !important;
	gap: 16px !important;
	padding: 28px clamp(20px, 2.4vw, 32px) !important;
	border: 0 !important;
	border-inline-end: 1px solid var(--acn-line) !important;
	border-radius: 0 !important;
	background: #ffffff !important;
}

.hm .aihp-proof-text {
	color: var(--acn-ink) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
}

.hm .aihp-proof-foot {
	padding-top: 14px !important;
	border-top: 1px dashed var(--acn-line) !important;
}

.hm .aihp-proof-name {
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	font-style: normal;
}

.hm .aihp-proof-nav {
	margin-top: 32px !important;
}

.hm .aihp-proof-arrow {
	border-color: var(--acn-line) !important;
	background: #ffffff !important;
}

.hm .aihp-proof-arrow:hover {
	border-color: #d4d5db !important;
	background: #ececf1 !important;
}

.hm .aihp-proof-arrow:focus-visible {
	outline: 3px solid var(--acn-accent) !important;
}

/* ============================================================
   7. FINAL: a dark rounded card with the composer
   ============================================================ */

.hm .hm-final__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	border-radius: clamp(20px, 3vw, 32px);
	background: var(--acn-dark);
	color: #ffffff;
	text-align: center;
}

.hm .hm-final__card .acn-kicker {
	color: var(--acn-accent-light);
}

.hm .hm-final__title {
	max-width: 16em;
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* On the dark: a white composer, no border needed; the ring in the light purple */
.hm .hm-final__card .aihp-composer {
	max-width: 620px !important;
	border-color: transparent !important;
	background: #ffffff !important;
}

.hm .hm-final__card .aihp-composer:focus-within {
	border-color: transparent !important;
	outline-color: var(--acn-accent-light);
	outline-offset: 3px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1199px) {
	.hm .hm-boxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hm .hm-box:nth-child(3) {
		border-inline-start: 0;
	}

	.hm .hm-box:nth-child(n + 3) {
		border-top: 1px solid var(--acn-line);
	}
}

@media (max-width: 980px) {
	.hm .aihp-oneagent-card {
		border-inline-start: 0 !important;
	}

	.hm .aihp-oneagent-card + .aihp-oneagent-card {
		border-top: 1px solid var(--acn-line) !important;
	}
}

@media (max-width: 991px) {
	.hm .hm-globe__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hm .hm-globe__media {
		border-inline-start: 0;
		border-top: 1px solid var(--acn-line);
	}
}

@media (max-width: 767px) {
	.hm .hm-boxes {
		grid-template-columns: minmax(0, 1fr);
	}

	.hm .hm-box:nth-child(n) {
		border-inline-start: 0;
	}

	.hm .hm-box + .hm-box {
		border-top: 1px solid var(--acn-line);
	}

	.hm .aihp-proof-card {
		flex-basis: 280px !important;
	}
}