/* ============================================================
   Accessibility Checker (new) - Hebrew landing page
   Layout follows a framed editorial grid: one frame width, thin vertical
   frame lines on every section, dashed full-width bands around card rows.
   Every rule is scoped under .acn (page <main>), .acn-page or .acn-skip.
   Orange .acn-ph fields are placeholders for Higgsfield media (orange so they are easy to spot).
   ============================================================ */

/* The theme's page wrappers use overflow: hidden, which breaks position: sticky
   for the hero scene. clip keeps sideways overflow hidden without that side effect. */
.acn-page #page,
.acn-page .wsmenucontainer {
	overflow: clip;
}

.acn {
	--acn-dark: #2c2b36;
	--acn-dark-2: #34333f;
	--acn-dark-line: rgba(255, 255, 255, 0.1);
	--acn-ink: #2c2b36;
	--acn-muted: #66656f;
	--acn-line: #e6e7ea;
	--acn-soft: #f8f8fb;
	--acn-accent: #8e56dc;
	--acn-accent-hover: #7b3bd6;
	--acn-accent-light: #c9a8ff;
	--acn-ph: #f97316;
	--acn-ph-deep: #8a2e0c;
	--acn-on-dark: #ffffff;
	--acn-on-dark-muted: rgba(255, 255, 255, 0.72);
	--acn-radius: 12px;
	--acn-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--acn-gutter: clamp(12px, 3.4vw, 48px);
	--acn-frame-w: min(1344px, calc(100% - 2 * var(--acn-gutter)));
	--acn-pad: clamp(20px, 5.5vw, 80px);
	--acn-gap: clamp(88px, 9vw, 128px);

	display: block;
	font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--acn-ink);
	background: #ffffff;
	text-align: right;
	overflow-x: clip;
}

.acn:focus {
	outline: none;
}

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

/* Reset the theme's element styles. Specificity (0,1,0): beats the theme's bare element
   rules, and the class rules further down still win by source order. */
.acn :where(h1, h2, h3, p, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	letter-spacing: normal;
}

.acn :where(ul, ol) {
	list-style: none;
}

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

.acn :where(a) {
	color: var(--acn-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.acn :focus-visible {
	outline: 3px solid var(--acn-accent);
	outline-offset: 3px;
}

.acn-hero :focus-visible,
.acn-dark :focus-visible,
.acn-final :focus-visible {
	outline-color: var(--acn-accent-light);
}

.acn-sr {
	position: absolute;
	width: 1px; /* taste-skill-ignore: visually hidden text */
	height: 1px; /* taste-skill-ignore: visually hidden text */
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.acn-skip {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 1000000;
	padding: 12px 20px;
	border-radius: 999px;
	background: #ffffff;
	color: #4a1f94;
	font: 600 1rem/1.2 "Rubik", sans-serif;
	text-decoration: none;
	transform: translateY(-200%);
}

.acn-skip:focus {
	transform: none;
	outline: 3px solid #8e56dc;
	outline-offset: 2px;
}

/* Higgsfield placeholders: flat orange fields, replaced by generated media later */
.acn-ph { background-color: var(--acn-ph); }
.acn-ph--deep { background-color: var(--acn-ph-deep); }
.acn-ph--v0 { background-color: #f97316; }
.acn-ph--v1 { background-color: #ea580c; }
.acn-ph--v2 { background-color: #fb8a3c; }

/* ---------- Frame system ---------- */

.acn-sec {
	position: relative;
	padding-block: var(--acn-gap);
}

/* The two vertical frame lines, drawn once per section so they run through it unbroken */
.acn-sec::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: var(--acn-frame-w);
	transform: translateX(-50%);
	border-inline: 1px solid var(--acn-line); /* taste-skill-ignore: frame lines requested by the client */
	pointer-events: none;
}

.acn-sec--soft {
	background: var(--acn-soft);
}

.acn-frame {
	position: relative;
	width: var(--acn-frame-w);
	margin-inline: auto;
	padding-inline: var(--acn-pad);
}

/* A full-width band between dashed rules, for rows of cards */
.acn-band {
	position: relative;
	border-block: 1px dashed var(--acn-line); /* taste-skill-ignore: frame lines requested by the client */
}

.acn-dark .acn-sec::before {
	border-color: var(--acn-dark-line);
}

.acn-dark .acn-band {
	border-color: var(--acn-dark-line);
}

/* ---------- Type ---------- */

.acn-head {
	max-width: 760px;
	margin-bottom: 56px;
}

.acn-head--center {
	margin-inline: auto;
	text-align: center;
}

/* Narrower so each sentence of the title sits on its own line */
.acn-people .acn-head {
	max-width: 450px;
}

.acn-kicker {
	margin-bottom: 14px;
	color: var(--acn-muted);
	font-size: 0.9375rem;
}

.acn-h2 {
	color: var(--acn-ink);
	font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.25rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.acn-h2 span {
	color: var(--acn-muted);
}

.acn-dark .acn-h2 {
	color: var(--acn-on-dark);
}

.acn-dark .acn-h2 span {
	color: var(--acn-on-dark-muted);
}

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

.acn-center {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.acn-center--pair {
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.acn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 48px;
	font: 500 1rem/1.2 inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.acn-btn--primary { background: var(--acn-accent); color: #ffffff; }
.acn-btn--primary:hover { background: var(--acn-accent-hover); color: #ffffff; }
.acn-btn--soft { background: var(--acn-line); color: var(--acn-ink); }
.acn-btn--soft:hover { background: #d9dade; color: var(--acn-ink); }
.acn-btn--light { background: #ffffff; color: var(--acn-ink); }
.acn-btn--light:hover { background: #ececf1; color: var(--acn-ink); }

.acn-btn[aria-disabled="true"] {
	opacity: 0.85;
	cursor: progress;
}

/* ---------- URL scan form ---------- */

.acn-scan {
	width: 100%;
	max-width: 600px;
}

.acn-scan__row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: 48px;
	background: #ffffff;
	border: 2px solid transparent;
}

.acn-scan__row:focus-within {
	outline: 3px solid var(--acn-accent-light);
	outline-offset: 3px;
}

.acn-scan.is-invalid .acn-scan__row {
	border-color: #e5484d;
}

.acn-scan__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 48px;
	background: transparent;
	color: var(--acn-ink);
	font: 400 1.0625rem/1.2 inherit;
	text-align: left;
}

.acn .acn-scan__input:focus,
.acn .acn-scan__input:focus-visible {
	outline: none;
}

.acn-scan__input::placeholder {
	color: #6b6878;
	opacity: 1;
}

.acn-scan__error {
	margin-top: 12px;
	color: #ffc2c2;
	font-size: 0.9375rem;
	font-weight: 500;
}

.acn-scan__error[hidden] {
	display: none;
}

.acn-scan__hint {
	margin-top: 12px;
	color: var(--acn-on-dark-muted);
	font-size: 0.9375rem;
}

/* ============================================================
   1. HERO
   ============================================================ */

.acn-hero {
	position: relative;
	background: #17161e;
	color: var(--acn-on-dark);
}

.acn-hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	padding-top: 132px;
	overflow: clip;
	isolation: isolate;
}

.acn-hero__media {
	position: absolute;
	inset: -40px;
	z-index: -2;
	background: #17161e;
	filter: blur(5px);
}

/* Fade at the foot of the hero: the platform's front side melts into the dark behind the logos.
   Painted above the platform (z 0, earlier in the page) and below the laptop (z 1) and logos (z 2). */
.acn-hero__stage::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 0;
	height: 170px;
	background: linear-gradient(180deg, rgba(23, 22, 30, 0) 0%, rgba(23, 22, 30, 0.85) 55%, #17161e 100%); /* taste-skill-ignore: requested fade under the platform */
	pointer-events: none;
}

.acn-logos {
	z-index: 2;
}

/* Placeholder until the hero image arrives */
.acn-hero__media.acn-ph {
	background: var(--acn-ph);
}

.acn-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dark layer over the background video; the scene darkens it to solid as it plays */
.acn-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #17161e;
	opacity: 0.55;
	pointer-events: none;
}

.acn-hero__inner {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(32px, 5vw, 96px);
	width: min(1344px, calc(100% - 64px));
	margin-inline: auto;
	padding-bottom: 32px;
}

/* One vertical rhythm: small line > title (tight), title > lead, lead > form (wider), form > note (tight) */
.acn-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* Small line above the H1 (search phrase: free accessibility check) */
.acn-hero__kicker {
	margin-bottom: 14px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1rem;
	font-weight: 500;
}

.acn-hero__title {
	max-width: 12em;
	text-wrap: balance;
	font-size: clamp(2.375rem, 1.5rem + 2.6vw, 3.5rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.acn-hero__lead {
	max-width: 32em;
	margin-top: 20px;
	text-wrap: pretty;
	color: var(--acn-on-dark-muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.5;
}

.acn-hero__copy .acn-scan {
	width: 100%;
	margin-top: 36px;
}

/* The laptop. Its insides are sized in container units. */
.acn-hero__slot {
	position: relative;
	padding-bottom: 56px;
}

.acn-device {
	position: relative;
	z-index: 1;
	width: 100%;
	container-type: inline-size;
}

/* The laptop is an image (hero-laptop.webp, 1064 x 726) with its screen cut out;
   the display box sits exactly over that screen opening. */
.acn-device {
	aspect-ratio: 1064 / 726;
}

.acn-device__display {
	position: absolute;
	left: 8.46%;
	top: 3.03%;
	width: 82.9%;
	height: 78.5%;
}

/* Soft contact shadow where the laptop's feet meet the top step */
.acn-device::after {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: -1.6%;
	z-index: 1;
	height: 4.5%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(6, 5, 12, 0.75), rgba(6, 5, 12, 0)); /* taste-skill-ignore: contact shadow */
	opacity: var(--acn-body, 1);
	pointer-events: none;
}

.acn-device__frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.acn-device__notch,
.acn-device__base {
	display: none;
}

.acn-device__screen {
	position: absolute;
	inset: 0;
	padding: 0;
	border-radius: 0.3cqi;
	background: rgb(10 10 16 / var(--acn-bezel, 1));
}

.acn-device__notch {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	width: 9cqi;
	height: 1.1cqi;
	transform: translateX(-50%);
	border-radius: 0 0 0.8cqi 0.8cqi;
	background: #0a0a10;
}

.acn-device__base {
	position: relative;
	height: 1.6cqi;
	margin-inline: -6%;
	border-radius: 0.2cqi 0.2cqi 1.6cqi 1.6cqi;
	background: #1d1c25;
}

.acn-device__base::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 16%;
	height: 0.6cqi;
	transform: translateX(-50%);
	border-radius: 0 0 0.8cqi 0.8cqi;
	background: #0a0a10;
}

/* Document folder that frames the form once the laptop body is gone:
   a short tab on the reading-start (right) side joined to the folder body */
.acn-folder {
	position: absolute;
	top: -11.4cqi;
	inset-inline: -1.6cqi;
	bottom: -1.6cqi;
	z-index: 0;
	opacity: 0;
}

.acn-folder::before {
	content: "";
	position: absolute;
	inset: 9.8cqi 0 0;
	border-radius: 0 1.2cqi 1.2cqi 1.2cqi;
	background: #2c2b36;
	box-shadow: 0 2cqi 5cqi rgba(10, 8, 24, 0.45); /* taste-skill-ignore: floating folder */
}

[dir="rtl"] .acn-folder::before {
	border-radius: 1.2cqi 0 1.2cqi 1.2cqi;
}

.acn-folder__tab {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 1.4cqi;
	/* Fixed width in container units: Chrome under-measures cqi-sized text when shrinking to fit.
	   Text 50.8cqi + icon 5 + gap 1.4 + padding 2.6 x 2 = 62.4cqi */
	width: 64cqi;
	height: 10cqi;
	padding: 0 2.6cqi;
	box-sizing: border-box;
	border-radius: 1.4cqi 1.4cqi 0 0;
	background: #2c2b36;
	color: #ffffff;
	white-space: nowrap;
}

.acn-folder__icon {
	display: grid;
	place-items: center;
	flex: 0 0 5cqi;
	height: 5cqi;
	border-radius: 50%;
	background: #ffffff;
	color: #2c2b36;
}

.acn-folder__icon svg {
	width: 3cqi;
	height: 3cqi;
}

.acn-folder__text {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.3cqi;
	line-height: 1.25;
}

.acn-folder__org {
	color: #ffffff;
	font-size: 2.3cqi;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.acn-folder__name {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.65cqi;
	font-weight: 400;
}

/* Soft curve where the tab meets the folder body */
.acn-folder__tab::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -1.2cqi;
	width: 1.2cqi;
	height: 1.2cqi;
	background: radial-gradient(circle at 0 0, transparent 1.2cqi, #2c2b36 1.25cqi); /* taste-skill-ignore: folder tab corner */
}

.acn-device__screen {
	z-index: 1;
}

/* The real form, scrollable inside the screen */
.acn-doc {
	display: flex;
	flex-direction: column;
	gap: 1cqi;
	height: 100%;
	padding: 1.2cqi;
	overflow-y: auto;
	/* auto: once the form is scrolled to its end, the wheel carries on scrolling the page */
	overscroll-behavior: auto;
	border-radius: 0.6cqi;
	background: #3a3946;
	scrollbar-width: thin;
	scrollbar-color: #8d8a9c transparent;
}

.acn-doc img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	background: #ffffff;
}

/* The three-step platform the laptop stands on (Higgsfield image, background removed, 1474 x 530,
   drawn flattened to half its height). The laptop's base rests on the top step's face. */
.acn-hero__podium {
	position: absolute;
	left: 50%;
	bottom: -70px;
	width: 250%;
	aspect-ratio: 1474 / 212;
	transform: translateX(-50%);
	background: url("/he/images/accessibility-checker-new/higgsfield/hero-stairs2.webp") center / 100% 100% no-repeat;
	/* lifts the matte render a step above the dark backdrop, toward #2c2b36 and its lighter top faces */
	filter: brightness(1.45) saturate(0.9);
	pointer-events: none;
}

.acn-hero__doc-note {
	display: none;
}

/* Customer logos: original colours on white tiles. They fade in on load, then slide right to left. */
.acn-logos {
	position: relative;
	padding: 20px 0 24px;
}

/* LTR so the track starts at the left edge and always has two more sets to its right */
.acn-logos__window {
	direction: ltr;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.acn-logos__track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	width: min(1344px, calc(100% - 32px));
	margin-inline: auto;
}

.acn-logos__track li {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 136px;
	height: 64px;
	padding: 10px 16px;
	border-radius: 10px;
	background: #ffffff;
}

.acn-logos__track li[aria-hidden="true"] {
	display: none;
}

.acn-logos__track img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 44px;
	object-fit: contain;
}

.acn-logos__pause {
	display: none;
}

/* ---------- The live scene ---------- */

.acn-hero.is-live {
	height: 420svh;
}

.acn-hero.is-live .acn-hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 0;
}

.acn-hero.is-live .acn-hero__slot {
	position: static;
	aspect-ratio: 16 / 11;
}

.acn-hero.is-live .acn-device {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--acn-dev-w, 1100px);
	transform-origin: 0 0;
	will-change: transform;
}

.acn-hero.is-live .acn-doc {
	overflow-y: hidden;
}

.acn-hero.is-live.is-readable .acn-doc {
	overflow-y: auto;
}

.acn-hero.is-live .acn-hero__podium {
	z-index: 0;
	left: 0;
	top: 0;
	bottom: auto;
	transform-origin: 0 0;
	will-change: transform, opacity;
}

.acn-hero.is-live .acn-hero__media {
	will-change: filter;
}

.acn-hero.is-live .acn-hero__doc-note {
	position: absolute;
	inset-inline: 0;
	z-index: 2;
	display: block;
	color: var(--acn-on-dark-muted);
	font-size: 0.9375rem;
	text-align: center;
	opacity: 0;
}

.acn-hero.is-live .acn-hero__copy {
	will-change: transform, opacity, filter;
}

.acn-hero.is-live .acn-logos {
	position: relative;
	z-index: 2;
}

/* ============================================================
   2. NUMBERS
   ============================================================ */

.acn-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.acn-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 64px;
	min-height: 240px;
	padding: 28px 24px;
	border: 1px solid var(--acn-line);
	border-radius: 8px;
	background: #ffffff;
}

.acn-stat__value {
	color: var(--acn-accent);
	font-size: clamp(2.75rem, 2rem + 2vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
}

.acn-stat__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--acn-muted);
	font-size: 1rem;
}

.acn-stat__label svg {
	flex: 0 0 auto;
}

/* ============================================================
   3. THREE THINGS
   ============================================================ */

.acn-three__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	padding-inline: 0;
}

.acn-three__card {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-height: 560px;
	padding: 64px clamp(24px, 5vw, 64px);
	border-inline-end: 1px solid var(--acn-line);
	background: #ffffff;
}

.acn-three__item {
	position: relative;
	padding-block: 22px;
	border-bottom: 1px solid var(--acn-line);
}

.acn-three__tab {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--acn-muted);
	font: 400 1.125rem/1.4 inherit;
	text-align: right;
	cursor: pointer;
}

.acn-three__tab::before {
	content: "";
	flex: 0 0 8px;
	height: 8px;
	border-radius: 50%;
	background: transparent;
}

.acn-three__item.is-active .acn-three__tab {
	color: var(--acn-ink);
	font-weight: 500;
}

.acn-three__item.is-active .acn-three__tab::before {
	background: var(--acn-accent);
}

.acn-three__text {
	margin-top: 10px;
	padding-inline-start: 18px;
	color: var(--acn-muted);
	line-height: 1.6;
}

.acn-three__bar {
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--acn-accent);
}

.acn-three__item.is-active .acn-three__bar {
	width: 28%;
}

.acn-three__cta {
	align-self: flex-start;
	margin-top: auto;
}

.acn-frame-media {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 560px;
	padding: 48px;
	overflow: hidden;
}

.acn-three__panel {
	position: relative;
	z-index: 1;
	width: min(100%, 460px);
}

/* Primary purple shows through while the stills crossfade (and while they load) */
.acn-three .acn-frame-media {
	background-color: var(--acn-accent);
}

/* Hero video stills behind the window: blurred like the hero, one per tab, crossfading.
   Scoped to the media box so it outranks the generic .acn img sizing. */
.acn-frame-media .acn-three__bg {
	position: absolute;
	inset: -24px;
	width: calc(100% + 48px);
	max-width: none;
	height: calc(100% + 48px);
	max-height: none;
	object-fit: cover;
	filter: blur(6px) brightness(0.88);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.acn-frame-media .acn-three__bg.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.acn-frame-media .acn-three__bg {
		transition: none;
	}
}

/* Interface windows (product fragments) */
.acn-window {
	overflow: hidden;
	border-radius: 10px;
	background: #ffffff;
	color: #1b2a44;
	box-shadow: 0 24px 48px -16px rgba(20, 12, 50, 0.45); /* taste-skill-ignore: floating window inside a product fragment */
	font-size: 0.8125rem;
}

.acn-window[hidden] {
	display: none;
}

.acn-window__bar {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #e9e9ee;
	color: #4b4f5c;
	font-weight: 500;
}

.acn-window__body {
	padding: 14px 16px 18px;
}

.acn-mini {
	display: grid;
	grid-template-columns: 3.4em minmax(0, 1fr) 2.6em 5.6em;
	align-items: center;
	gap: 8px;
	padding: 9px 4px;
	border-bottom: 1px solid #eef0f4;
}

.acn-mini--head {
	color: #6a7183;
	font-weight: 600;
}

.acn-chip {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.acn-chip--pass { background: #e2f5e9; color: #17643a; }
.acn-chip--fail { background: #fde7e7; color: #a1262a; }
.acn-chip--unchecked { background: #fff1d6; color: #7a4b00; }

.acn-window__body--manual p {
	padding: 8px 10px;
	border-radius: 6px;
}

.acn-say + .acn-say {
	margin-top: 6px;
}

.acn-say--flag {
	background: #fde7e7;
	color: #a1262a;
	font-weight: 500;
}

.acn-window__control {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: #4b4f5c;
}

.acn-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e5484d;
}

.acn-window__body--simple {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.acn-window__label {
	color: #6a7183;
}

.acn-window__field {
	padding: 10px 14px;
	border: 1px solid #dfe1e8;
	border-radius: 8px;
	text-align: left;
}

.acn-window__done {
	margin-top: 10px;
	color: #17643a;
	font-weight: 600;
}

.acn-window__btn {
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--acn-accent);
	color: #ffffff;
	font-weight: 500;
}

/* Gmail inbox fragment (Hebrew, RTL). Gmail's own proportions, scaled to about 80% to fit the frame. */
.acn-three__panel {
	width: min(100%, 600px);
}

/* Video card in the "three things" tabs: same size, place, corners and shadow as the window it replaced */
.checker-card {
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
	overflow: hidden;
	aspect-ratio: 1040 / 750;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 24px 48px -16px rgba(20, 12, 50, 0.45); /* taste-skill-ignore: floating window inside a product fragment */
}

.checker-card[hidden] {
	display: none;
}

/* The monitoring video is a Gmail inbox, whose canvas is Gmail's light grey */
.checker-card--gmail {
	background: #f6f8fc;
}

.checker-card__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.acn-three__panel > .acn-window:not(.acn-gmail) {
	max-width: 460px;
	margin-inline: auto;
}

.acn-gmail {
	--gm-ink: #1f1f1f;
	--gm-muted: #444746;
	--gm-soft: #5f6368;
	--gm-blue: #0b57d0;
	display: flex;
	flex-direction: column;
	height: 460px;
	background: #f6f8fc;
	color: var(--gm-ink);
	font-family: "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
	font-size: 11px;
	line-height: 1.3;
}

.acn-gmail svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.acn-gmail__top {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 52px;
	padding: 0 8px;
}

.acn-gmail__ic {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--gm-muted);
}

.acn-gmail__ic svg {
	width: 17px;
	height: 17px;
}

.acn-gmail__ic--sm {
	width: 26px;
	height: 26px;
}

.acn-gmail__ic--sm svg {
	width: 15px;
	height: 15px;
}

.acn-gmail__brand {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-inline-end: 12px;
	color: #5f6368;
	font-family: "Product Sans", "Google Sans", Roboto, Arial, sans-serif;
	font-size: 17px;
	letter-spacing: -0.01em;
}

.acn-gmail .acn-gmail__logo {
	width: 22px;
	height: 17px;
}

.acn-gmail__search {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	border-radius: 18px;
	background: #e9eef6;
	color: var(--gm-muted);
	font-size: 12px;
}

.acn-gmail__search span {
	flex: 1 1 auto;
}

.acn-gmail__actions {
	display: flex;
	align-items: center;
	margin-inline-start: 4px;
}

.acn-gmail__avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-inline-start: 4px;
	border-radius: 50%;
	background: #0b8043;
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
}

.acn-gmail__body {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	padding-bottom: 10px;
}

.acn-gmail__rail {
	display: flex;
	flex: 0 0 52px;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 2px;
}

.acn-gmail__compose {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
	border-radius: 12px;
	background: #c2e7ff;
	color: #001d35;
}

.acn-gmail__compose svg {
	width: 18px;
	height: 18px;
}

.acn-gmail__nav {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 26px;
	border-radius: 13px;
	color: var(--gm-muted);
}

.acn-gmail__nav.is-active {
	background: #d3e3fd;
	color: #041e49;
}

.acn-gmail__nav i {
	position: absolute;
	top: -4px;
	left: 1px;
	min-width: 14px;
	padding: 0 3px;
	border-radius: 7px;
	background: #b3261e;
	color: #ffffff;
	font-size: 9px;
	font-style: normal;
	font-weight: 500;
	line-height: 14px;
	text-align: center;
}

/* Hebrew Gmail mirrors the send and importance icons */
.acn-gmail__nav--flip svg,
.acn-gmail__imp svg {
	transform: scaleX(-1);
}

.acn-gmail__main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	margin-inline-end: 8px;
	overflow: hidden;
	border-radius: 14px;
	background: #ffffff;
}

.acn-gmail__toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 38px;
	padding: 0 8px;
}

.acn-gmail__pager {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
	color: var(--gm-soft);
	font-size: 10.5px;
}

.acn-gmail__pager svg {
	width: 14px;
	height: 14px;
	color: #9aa0a6;
}

.acn-gmail__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-bottom: 1px solid #e3e3e3;
}

.acn-gmail__tabs span {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	color: var(--gm-muted);
	font-size: 11px;
	white-space: nowrap;
}

.acn-gmail__tabs svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.acn-gmail__tabs .is-active {
	color: var(--gm-blue);
	font-weight: 500;
}

.acn-gmail__tabs .is-active::after {
	content: "";
	position: absolute;
	right: 8px;
	bottom: 0;
	left: 8px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--gm-blue);
}

.acn-gmail__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.acn-gmail__row {
	position: relative;
	display: grid;
	grid-template-columns: 22px 22px 18px 82px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 2px;
	min-height: 32px;
	padding: 0 8px;
	border-bottom: 1px solid #eceff1;
	background: #f2f6fc;
	color: var(--gm-ink);
}

.acn-gmail__row.is-unread {
	background: #ffffff;
}

.acn-gmail__row.has-file {
	padding-top: 7px;
}

.acn-gmail__row.is-hover {
	z-index: 1;
	box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); /* taste-skill-ignore: Gmail hover row */
}

.acn-gmail__cb,
.acn-gmail__star,
.acn-gmail__imp {
	display: grid;
	place-items: center;
}

.acn-gmail__cb {
	color: #9aa0a6;
}

.acn-gmail__star {
	color: #b5b8bb;
}

.acn-gmail__cb svg,
.acn-gmail__star svg {
	width: 15px;
	height: 15px;
}

.acn-gmail__imp {
	color: #cfd2d5;
}

.acn-gmail__imp svg {
	width: 14px;
	height: 14px;
}

.acn-gmail__imp.is-on {
	color: #f9ab00;
}

.acn-gmail__from,
.acn-gmail__text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.acn-gmail__from {
	padding-inline-end: 8px;
}

.acn-gmail__snip {
	color: var(--gm-soft);
}

.acn-gmail__time {
	padding-inline-start: 10px;
	color: var(--gm-muted);
	font-size: 10.5px;
	white-space: nowrap;
}

.acn-gmail__row.is-unread .acn-gmail__from,
.acn-gmail__row.is-unread .acn-gmail__subj,
.acn-gmail__row.is-unread .acn-gmail__time {
	color: #1f1f1f;
	font-weight: 700;
}

.acn-gmail__hover {
	display: flex;
	gap: 6px;
	padding-inline-start: 8px;
	color: var(--gm-muted);
}

.acn-gmail__hover svg {
	width: 15px;
	height: 15px;
}

.acn-gmail__file {
	display: inline-flex;
	grid-column: 5 / 7;
	align-items: center;
	justify-self: start;
	gap: 6px;
	max-width: 100%;
	margin: 3px 0 8px;
	padding: 3px 10px 3px 6px;
	overflow: hidden;
	border: 1px solid #dadce0;
	border-radius: 14px;
	background: #ffffff;
	color: var(--gm-muted);
	font-size: 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.acn-gmail__pdf {
	padding: 1px 3px;
	border-radius: 2px;
	background: #ea4335;
	color: #ffffff;
	font-size: 7px;
	font-weight: 700;
	line-height: 1.3;
}

/* ============================================================
   4. STATEMENT
   ============================================================ */

.acn-statement__body,
.acn-statement__foot {
	width: min(100%, 720px);
	margin-inline: auto;
}

.acn-statement__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.acn-statement__body .acn-w {
	color: #8f8d99;
	transition: color 0.25s linear;
}

.acn-statement__body .acn-w.is-lit {
	color: var(--acn-ink);
}

.acn-statement__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
}

.acn-statement__sign {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--acn-ink);
	font-weight: 500;
}

/* ============================================================
   5. CUSTOMERS
   ============================================================ */

.acn-people {
	padding-bottom: calc(var(--acn-gap) * 0.75);
}

.acn-carousel {
	position: relative;
}

.acn-carousel__track {
	display: flex;
	gap: 32px;
	padding-inline: max(var(--acn-gutter), calc((100% - 1344px) / 2 + 80px));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--acn-gutter), calc((100% - 1344px) / 2 + 80px));
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.acn-carousel__track::-webkit-scrollbar {
	display: none;
}

.acn-person {
	flex: 0 0 clamp(280px, 30vw, 420px);
	scroll-snap-align: start;
}

.acn-person__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	aspect-ratio: 4 / 5;
	padding: 20px;
	overflow: hidden;
	border-radius: 8px;
	color: #ffffff;
}

.acn-person__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

/* Neutral scrim so the name stays readable over the photo */
.acn-person__media::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, rgba(20, 18, 32, 0) 0%, rgba(20, 18, 32, 0.55) 100%);
}

.acn-person__checks,
.acn-person__foot {
	position: relative;
	z-index: 1;
}

.acn-person__checks {
	padding: 16px 18px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--acn-ink);
}

.acn-person__checks-title {
	margin-bottom: 8px;
	color: var(--acn-muted);
	font-size: 0.875rem;
}

.acn-person__checks ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.acn-person__checks li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.acn-person__checks svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	padding: 2px;
	border-radius: 50%;
	background: var(--acn-accent);
	color: #ffffff;
}

.acn-person__title {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.25;
}

.acn-person__text {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.9);
}

.acn-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--acn-accent);
	color: #ffffff;
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.acn-carousel__nav:hover:not(:disabled) {
	background: var(--acn-accent-hover);
}

.acn-carousel__nav--prev {
	right: max(var(--acn-gutter), calc((100% - 1344px) / 2 + 24px));
}

.acn-carousel__nav--next {
	left: max(var(--acn-gutter), calc((100% - 1344px) / 2 + 24px));
}

.acn-carousel__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   6-8. DARK BLOCK
   ============================================================ */

.acn-dark {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 0 0 clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
	background: var(--acn-dark);
	color: var(--acn-on-dark);
}

.acn-dark .acn-sec + .acn-sec {
	padding-top: 0;
}

/* Features bento */
.acn-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-inline: 0;
}

.acn-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 300px;
	padding: 36px 32px;
	overflow: hidden;
	border: 1px solid var(--acn-dark-line);
	margin: -1px 0 0 -1px;
	background: var(--acn-dark);
}

.acn-tile--tall {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
	min-height: 620px;
}

.acn-tile:nth-child(2),
.acn-tile:nth-child(3) {
	grid-column: span 2;
}

.acn-tile--small {
	min-height: 220px;
	justify-content: flex-end;
}

.acn-tile--small svg {
	margin-bottom: auto;
	color: var(--acn-on-dark-muted);
}

.acn-tile__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Primary purple shows while the background loads */
.acn-tile--tall .acn-tile__media {
	overflow: hidden;
	background-color: var(--acn-accent);
}

/* Blurred and dimmed like the hero video, so the white title and caption stay readable */
.acn-tile__media .acn-tile__bg {
	position: absolute;
	inset: -24px;
	width: calc(100% + 48px);
	max-width: none;
	height: calc(100% + 48px);
	max-height: none;
	object-fit: cover;
	filter: blur(6px) brightness(0.68) saturate(0.85);
}

.acn-tile > *:not(.acn-tile__media) {
	position: relative;
	z-index: 1;
}

.acn-tile__title {
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
}

.acn-tile__text {
	color: var(--acn-on-dark-muted);
	font-size: 1rem;
}

.acn-tile--tall .acn-tile__text {
	color: rgba(255, 255, 255, 0.86);
}

.acn-tile__window {
	flex: 1 1 auto;
	min-height: 0;
	margin-block: 16px;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	background: #ffffff;
}

/* The whole page of the form, top-aligned, never cropped sideways */
.acn-tile__window {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	background: #e6e5ec;
}

.acn-tile__window img {
	display: block;
	width: 100%;
	height: auto;
}

.acn-chat,
.acn-reader {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
}

.acn-chat__msg {
	max-width: 80%;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.acn-chat__msg span {
	display: block;
	margin-top: 4px;
	opacity: 0.8;
	font-size: 0.8125rem;
}

.acn-chat__msg--in {
	align-self: flex-start;
	background: var(--acn-accent);
	color: #ffffff;
}

/* Full white keeps the time at 4.6:1 on the purple bubble (80% white fell to 3.6:1) */
.acn-chat__msg--in span {
	opacity: 1;
}

.acn-chat__msg--out {
	align-self: flex-end;
	background: #46454f;
	color: #ffffff;
}

/* Monitoring statistics fragment */
.acn-stats-ui {
	/* sits at the bottom of its tile, like the chat in the tile above */
	margin-top: auto;
	padding: 14px 16px 10px;
	border-radius: 10px;
	background: #ffffff;
	color: #2c2b36;
	font-size: 0.8125rem;
}

.acn-stats-ui__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.acn-stats-ui__row div {
	padding: 8px 10px;
	border: 1px solid #ececf1;
	border-radius: 8px;
}

.acn-stats-ui__row span {
	display: block;
	color: #6a6f7d;
}

.acn-stats-ui__row b {
	font-size: 1.25rem;
	font-weight: 600;
}

.acn-stats-ui__chart {
	display: block;
	width: 100%;
	height: 56px;
	margin-top: 10px;
}

.acn-stats-ui__caption {
	margin-top: 4px;
	color: #6a6f7d;
}

.acn-reader p {
	color: var(--acn-on-dark-muted);
	font-size: 0.9375rem;
}

.acn-reader__control {
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: center;
	padding: 8px;
	border-radius: 12px;
	background: #ffffff;
	color: #2c2b36;
	font-size: 0.875rem;
}

.acn-reader__btn,
.acn-reader__stop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid #e3e3e8;
	border-radius: 8px;
}

.acn-reader__stop {
	color: #c4302b;
}

/* Platforms grid */
.acn-grid {
	-webkit-mask-image: radial-gradient(60% 90% at 50% 50%, #000 55%, transparent 100%);
	mask-image: radial-gradient(60% 90% at 50% 50%, #000 55%, transparent 100%);
}

.acn-grid__tiles {
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr));
	gap: 8px;
	max-width: 1040px;
	margin-inline: auto;
}

.acn-grid__tile {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 4px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

.acn-grid__tile--on {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	background: #ececf1;
	color: #2c2b36;
	font-size: 0.75rem;
}

.acn-grid__tile--on img {
	width: 36%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.acn-grid__tile--brand {
	background: #ffffff;
}

.acn-grid__tile--brand img {
	width: 60%;
}

/* ---- Entrance (only when the visitor allows motion; .acn-motion is set by checker-new.js) ---- */

/* Logos light up outward from the tabnav mark, a purple wave runs across the empty cells, then all stays still */
.acn-motion .acn-grid:not(.is-in) .acn-grid__tile--on,
.acn-motion .acn-grid:not(.is-in) .acn-grid__tile--brand {
	opacity: 0;
	translate: 0 10px;
	scale: 0.86;
}

.acn-motion .acn-grid.is-in .acn-grid__tile--on,
.acn-motion .acn-grid.is-in .acn-grid__tile--brand {
	animation: acn-tile-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--acn-delay, 0ms) + 250ms + var(--d) * 110ms);
}

.acn-motion .acn-grid.is-in .acn-grid__tile:not(.acn-grid__tile--on):not(.acn-grid__tile--brand) {
	animation: acn-tile-wave 1.1s ease-out;
	animation-delay: calc(var(--acn-delay, 0ms) + 150ms + var(--d) * 110ms);
}

@keyframes acn-tile-in {
	from { opacity: 0; translate: 0 10px; scale: 0.86; }
	to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes acn-tile-wave {
	0% { background-color: rgba(255, 255, 255, 0.05); }
	35% { background-color: rgba(142, 86, 220, 0.28); }
	100% { background-color: rgba(255, 255, 255, 0.05); }
}

@media (max-width: 991px) {
	.acn-grid__tiles {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.acn-grid__tile:not(.acn-grid__tile--on):not(.acn-grid__tile--brand):nth-child(n + 22) {
		display: none;
	}
}

@media (max-width: 767px) {
	.acn-grid__tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.acn-grid__tile:not(.acn-grid__tile--on):not(.acn-grid__tile--brand) {
		display: none;
	}

	.acn-grid__tile {
		aspect-ratio: auto;
		min-height: 88px;
	}

	.acn-grid__tile--on img {
		width: 34px;
	}

	.acn-grid {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Certificate card */
.acn-cert__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	min-height: 480px;
	padding: clamp(32px, 6vw, 80px);
	overflow: hidden;
	border-radius: var(--acn-radius);
}

.acn-cert__card.acn-ph {
	background-color: var(--acn-dark);
}

/* Video fills the card; softly blurred like the hero */
.acn-cert__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	filter: blur(1.5px) saturate(0.9);
}

/* Section colour washes in from the text side (right, reading start) and clears toward the person on the left */
.acn-cert__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to left, rgba(44, 43, 54, 0.94) 0%, rgba(44, 43, 54, 0.82) 38%, rgba(44, 43, 54, 0.35) 68%, rgba(44, 43, 54, 0.1) 100%); /* taste-skill-ignore: text scrim over video */
	pointer-events: none;
}

.acn-cert__card > :not(.acn-cert__video) {
	position: relative;
	z-index: 2;
}

.acn-cert__pause {
	position: absolute;
	bottom: 16px;
	left: 20px;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	font: 400 0.8125rem/1.2 inherit;
	text-decoration: underline;
	cursor: pointer;
}

.acn-cert__card > .acn-cert__pause {
	position: absolute;
}

@media (prefers-reduced-motion: reduce) {
	.acn-cert__pause {
		display: none;
	}
}

/* On phones and tablets the text runs wide, so keep a strip under it for the stop button */
@media (max-width: 991px) {
	.acn-cert__card {
		padding-bottom: 64px;
	}
}

.acn-cert__mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: auto;
	font-size: 1.125rem;
	font-weight: 600;
}

.acn-cert__title {
	max-width: 30ch;
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
	font-weight: 500;
	line-height: 1.3;
}

.acn-cert__source {
	margin-top: 8px;
	font-weight: 500;
}

.acn-cert__law {
	color: var(--acn-on-dark-muted);
	font-size: 0.9375rem;
}

/* ============================================================
   9. COMPARE
   ============================================================ */

.acn-compare {
	margin-top: calc(-1 * clamp(20px, 3vw, 32px));
	padding-top: calc(var(--acn-gap) + clamp(20px, 3vw, 32px));
}

.acn-compare__grid {
	display: grid;
	grid-template-columns: minmax(0, 340px) auto minmax(0, 440px);
	justify-content: center;
	align-items: center;
	gap: 48px;
}

.acn-plan {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--acn-line);
	border-radius: 10px;
	background: #ffffff;
}

.acn-plan__logo {
	width: 120px;
	height: auto;
}

.acn-plan__title {
	color: var(--acn-muted);
	font-size: 1.125rem;
}

.acn-plan__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 16px;
	border-block: 1px dashed var(--acn-line); /* taste-skill-ignore: dashed rules requested by the client */
}

.acn-plan__list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.acn-plan__list svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 2px;
	border-radius: 50%;
	background: var(--acn-accent);
	color: #ffffff;
}

.acn-plan__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.acn-plan__from,
.acn-plan__per {
	color: var(--acn-muted);
}

.acn-plan__price strong {
	color: var(--acn-ink);
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1;
}

.acn-compare__vs {
	color: var(--acn-ink);
	font-size: 2rem;
	font-weight: 600;
}

.acn-manual {
	position: relative;
}

.acn-manual__window {
	height: 400px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.acn-manual__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin-bottom: 10px;
	padding: 0 16px;
	border: 1px solid var(--acn-line);
	border-radius: 8px;
	background: #ffffff;
	padding-block: 10px;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.acn-manual__icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--acn-soft);
	color: var(--acn-muted);
}

.acn-manual__tag {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: #f1e9fd;
	color: #5f2bb0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.acn-manual__tag--legal {
	background: #fde7e7;
	color: #a1262a;
}

.acn-manual__pause {
	display: block;
	margin: 12px auto 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--acn-muted);
	font: 400 0.875rem/1.2 inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ============================================================
   10. STEPS
   ============================================================ */

.acn-steps__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-top: 32px;
}

.acn-steps__tab {
	padding: 0 8px 16px;
	border: 0;
	background: transparent;
	color: var(--acn-muted);
	font: 400 1.125rem/1.3 inherit;
	text-align: center;
	cursor: pointer;
}

.acn-steps__tab[aria-selected="true"] {
	color: var(--acn-ink);
	font-weight: 500;
}

/* Waveform: thin grey bars; the selected step's third turns purple and grows */
.acn-steps__ruler {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 90 bars: the gap and the bars shrink together so the ruler always fits its row */
	gap: clamp(1px, 0.25vw, 3px);
	height: 48px;
	margin-bottom: 32px;
	overflow: hidden;
}

.acn-wave {
	flex: 0 1 3px;
	min-width: 1px;
	height: var(--h);
	border-radius: 3px;
	background: #d4d5db;
	transform-origin: center;
}

.acn-steps__ruler[data-active="0"] .acn-wave--s0,
.acn-steps__ruler[data-active="1"] .acn-wave--s1,
.acn-steps__ruler[data-active="2"] .acn-wave--s2 {
	height: calc(var(--h) * 1.6);
	background: var(--acn-accent);
}

.acn-steps__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-bottom: 48px;
	overflow: hidden;
	border: 1px solid var(--acn-line);
	border-radius: var(--acn-radius);
	background: #ffffff;
}

.acn-steps__panel[hidden] {
	display: none;
}

.acn-steps__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-height: 480px;
	padding: clamp(28px, 4vw, 48px);
}

.acn-steps__num {
	color: var(--acn-muted);
	font-size: 0.9375rem;
}

.acn-steps__title {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.3;
}

.acn-steps__desc {
	max-width: 44ch;
	color: var(--acn-muted);
	line-height: 1.65;
}

.acn-steps__cta {
	margin-top: auto;
}

.acn-steps__media {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	background-color: var(--acn-dark);
}

/* Still of this step's part of the shot; the shared video plays over it in the open panel */
.acn-steps__media .acn-steps__still,
.acn-steps__media .acn-steps__video {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.acn-steps__media .acn-steps__video {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.acn-steps__media .acn-steps__video.is-ready {
	opacity: 1;
}

/* ============================================================
   11. GUIDE
   ============================================================ */

.acn-guide__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px clamp(40px, 6vw, 96px);
}

.acn-article h3 {
	margin-bottom: 10px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
}

.acn-article p {
	color: var(--acn-muted);
	line-height: 1.75;
}

/* ============================================================
   12. FAQ
   ============================================================ */

.acn-faq__list {
	max-width: 720px;
	margin-inline: auto;
}

.acn-faq__item {
	margin-top: -1px;
	border: 1px solid var(--acn-line);
	background: #ffffff;
}

.acn-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
}

.acn-faq__item > summary::-webkit-details-marker {
	display: none;
}

.acn-faq__item > summary:hover {
	background: var(--acn-soft);
}

.acn-faq__q {
	font-size: 1.0625rem;
	font-weight: 500;
}

.acn-faq__sign {
	position: relative;
	flex: 0 0 14px;
	height: 14px;
}

.acn-faq__sign::before,
.acn-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 1.5px;
	margin-top: -0.75px;
	background: currentColor;
}

.acn-faq__sign::after {
	transform: rotate(90deg);
}

.acn-faq__item[open] .acn-faq__sign::after {
	transform: rotate(0deg);
}

.acn-faq__a {
	padding: 0 22px 22px;
}

.acn-faq__a p {
	color: var(--acn-muted);
	line-height: 1.7;
}

.acn-faq__more {
	margin-top: 32px;
	color: var(--acn-muted);
	text-align: center;
}

/* Taller tap area for the inline link (24px+) without changing the line */
.acn-faq__more a {
	display: inline-block;
	padding-block: 4px;
}

/* ============================================================
   13. FINAL CTA
   ============================================================ */

.acn-final {
	padding-block: var(--acn-gap);
	background: var(--acn-dark);
	color: var(--acn-on-dark);
}

.acn-final__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
	border-radius: var(--acn-radius);
	text-align: center;
}

.acn-final__title {
	font-size: clamp(2.375rem, 1.5rem + 2.6vw, 3.5rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.acn-final__lead {
	max-width: 36em;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1.125rem;
}

.acn-scan--final {
	margin-top: 12px;
	text-align: right;
}

.acn-scan--final .acn-scan__hint {
	color: rgba(255, 255, 255, 0.86);
}

/* ============================================================
   Motion layer
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	.acn-btn {
		transition: background-color 0.2s var(--acn-ease), transform 0.2s var(--acn-ease);
	}

	.acn-btn:active {
		transform: scale(0.97);
	}

	.acn-three__bar {
		transition: width 0.8s var(--acn-ease);
	}

	.acn-wave {
		transition: height 0.45s var(--acn-ease), background-color 0.3s var(--acn-ease);
	}

	.acn-steps__ruler[data-active="0"] .acn-wave--s0,
	.acn-steps__ruler[data-active="1"] .acn-wave--s1,
	.acn-steps__ruler[data-active="2"] .acn-wave--s2 {
		animation: acn-wave 0.6s ease-in-out var(--d, 0ms) 2;
	}

	@keyframes acn-wave {
		0%, 100% { transform: scaleY(1); }
		50% { transform: scaleY(0.45); }
	}

	.acn-faq__sign::after {
		transition: transform 0.3s var(--acn-ease);
	}

	.acn-carousel__track {
		scroll-behavior: smooth;
	}

	/* Logos rise in one after another, then the strip starts sliding right to left */
	.acn-motion .acn-logos__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: max-content;
		margin: 0;
		animation: acn-logos 160s linear 1.6s infinite;
	}

	.acn-motion .acn-logos__track li[aria-hidden="true"] {
		display: grid;
	}

	.acn-motion .acn-logos__track li {
		animation: acn-logo-in 0.7s var(--acn-ease) both;
		animation-delay: calc(var(--n, 0) * 70ms + 200ms);
	}

	.acn-motion .acn-logos__pause {
		display: block;
		margin: 10px auto 0;
		padding: 4px 10px;
		border: 0;
		background: transparent;
		color: rgba(255, 255, 255, 0.8);
		font: 400 0.8125rem/1.2 inherit;
		text-decoration: underline;
		cursor: pointer;
	}

	.acn-logos.is-paused .acn-logos__track,
	.acn-logos__window:hover .acn-logos__track,
	.acn-logos:focus-within .acn-logos__track {
		animation-play-state: paused;
	}

	@keyframes acn-logos {
		from { transform: translateX(0); }
		to { transform: translateX(calc(-50% - 8px)); }
	}

	@keyframes acn-logo-in {
		from { opacity: 0; transform: translateY(14px); }
		to { opacity: 1; transform: none; }
	}

	/* The manual-tests list drifts upward; the pause button stops it */
	.acn-manual__list {
		animation: acn-marquee 104s linear infinite;
	}

	.acn-manual.is-paused .acn-manual__list,
	.acn-manual:hover .acn-manual__list,
	.acn-manual:focus-within .acn-manual__list {
		animation-play-state: paused;
	}

	@keyframes acn-marquee {
		from { transform: translateY(0); }
		to { transform: translateY(-50%); }
	}

	/* Section entrances: only once the page script has started, so nothing stays hidden without it */
	.acn-motion [data-acn-reveal] {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s var(--acn-ease), transform 0.8s var(--acn-ease);
		transition-delay: var(--acn-delay, 0ms);
	}

	.acn-motion [data-acn-reveal].is-in {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acn-manual__pause {
		display: none;
	}

	.acn-manual__list li[aria-hidden="true"] {
		display: none;
	}

	.acn-manual__window {
		height: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

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

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

	.acn-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.acn-tile--tall,
	.acn-tile:nth-child(2),
	.acn-tile:nth-child(3) {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.acn-tile--tall {
		min-height: 520px;
	}
}

@media (max-width: 991px) {
	.acn-hero__inner,
	.acn-three__grid,
	.acn-steps__panel,
	.acn-guide__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.acn-hero__inner {
		gap: 48px;
	}

	.acn-hero__slot {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

	.acn-three__card {
		min-height: 0;
		border-inline-end: 0;
		border-bottom: 1px solid var(--acn-line);
	}

	.acn-frame-media {
		min-height: 420px;
		padding: 32px 20px;
	}

	.acn-compare__grid {
		grid-template-columns: minmax(0, 420px);
		gap: 32px;
	}

	.acn-compare__vs {
		text-align: center;
	}

	.acn-steps__text {
		min-height: 0;
	}


}

@media (max-width: 767px) {
	.acn-hero__stage {
		padding-top: 104px;
	}

	.acn-hero__inner {
		width: calc(100% - 32px);
	}

	.acn-hero__podium {
		height: 48px;
	}

	.acn-hero__slot {
		padding-bottom: 32px;
	}

	.acn-logos__track li {
		width: 112px;
		height: 56px;
	}

	/* Stacked form: input above a full-width button */
	.acn-scan__row {
		flex-direction: column;
		align-items: stretch;
		border-radius: 20px;
	}

	.acn-scan__input {
		height: 52px;
	}

	.acn-scan__row .acn-btn {
		width: 100%;
		border-radius: 14px;
	}

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

	.acn-stat {
		min-height: 0;
		gap: 28px;
	}

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

	.acn-tile {
		grid-column: 1 / -1;
		min-height: 0;
		padding: 28px 22px;
	}

	.acn-tile--tall {
		min-height: 440px;
	}





	.acn-statement__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.acn-steps__tab {
		font-size: 0.9375rem;
	}

	.acn-manual__list li {
		font-size: 1rem;
	}

	.acn-carousel__nav {
		display: none;
	}

	/* Gmail on a phone: no folder rail, fewer header icons, compact tabs */
	.acn-gmail {
		height: auto;
	}

	.acn-gmail__rail,
	.acn-gmail__actions .acn-gmail__ic,
	.acn-gmail__brand span,
	.acn-gmail__search > svg:last-child,
	.acn-gmail__hover,
	.acn-gmail__pager {
		display: none;
	}

	.acn-gmail__brand {
		margin-inline-end: 4px;
	}

	.acn-gmail__main {
		margin-inline-start: 8px;
	}

	.acn-gmail__tabs span {
		gap: 6px;
		padding: 0 8px;
		font-size: 10px;
	}

	.acn-gmail__row {
		grid-template-columns: 20px 18px 16px 64px minmax(0, 1fr) auto;
		padding: 0 6px;
	}

	.acn-gmail__row:nth-child(n + 6) {
		display: none;
	}
}