/* ============================================================
   New look - base (the global, left-to-right port of the Hebrew site's checker-new.css foundation)
   Shared by every redesigned page. Layout follows a framed editorial grid: one frame width, thin
   vertical frame lines on every section, dashed full-width bands around rows of cells.
   Every rule is scoped under .acn (the page <main> or its wrapper), .acn-page or .acn-skip.
   A page opts in with <body class="acn-page tnv-new"> and these files, in order:
     /css/new-look/base.css, /css/new-look/header.css, /css/new-look/footer.css, then the page's own file.
   ============================================================ */

/* The theme's page wrappers use overflow: hidden, which breaks position: sticky.
   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-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: left;
	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-dark :focus-visible,
.acn-final :focus-visible {
	outline-color: var(--acn-accent-light);
}

.acn-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.acn-skip {
	position: fixed;
	top: 12px;
	left: 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;
}

/* ---------- 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.
   Above the section's panels, so a white cell never hides one. */
.acn-sec::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	z-index: 3;
	width: var(--acn-frame-w);
	transform: translateX(-50%);
	border-inline: 1px solid var(--acn-line);
	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 cells */
.acn-band {
	position: relative;
	border-block: 1px dashed var(--acn-line);
}

/* A dark block: only its foot is rounded */
.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::before {
	border-color: var(--acn-dark-line);
}

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

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

/* A section right after a dark block tucks under its rounded foot */
.acn-tuck {
	margin-top: calc(-1 * clamp(20px, 3vw, 32px));
	padding-top: calc(var(--acn-gap) + clamp(20px, 3vw, 32px));
}

/* Its frame lines start under that foot, so they never cross the dark block */
.acn-tuck::before {
	top: clamp(20px, 3vw, 32px);
}

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

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

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

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

/* Two sentences: the first in ink, the second (in a span) muted */
.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;
	text-wrap: balance;
}

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

.acn-lead {
	max-width: 640px;
	margin-top: 18px;
	color: var(--acn-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

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

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

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

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

/* A short purple line before a label or above a title */
.acn-tick {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.acn-tick::before {
	content: "";
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: var(--acn-accent);
}

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

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

/* ---------- 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;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.acn-btn svg {
	flex: 0 0 auto;
	transition: transform 0.2s var(--acn-ease);
}

.acn-btn:hover svg {
	transform: translateX(2px);
}

.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--line { border: 1px solid var(--acn-line); background: #ffffff; color: var(--acn-ink); }
.acn-btn--line:hover { background: #ececf1; color: var(--acn-ink); }

/* Anything a script hides with the hidden attribute stays hidden, whatever display its class sets */
.acn [hidden] {
	display: none !important;
}

/* ---------- Client logos (partials/client-logos.ejs) ----------
   Every logo in a cell of a ruled grid inside the frame, under a title row with a line on each side */
.acn-logos {
	position: relative;
	z-index: 4;
	background: #ffffff;
}

.acn .acn-logos__title {
	display: flex;
	align-items: center;
	gap: 20px;
	width: var(--acn-frame-w);
	margin: 0 auto;
	padding: 18px var(--acn-pad);
	border-inline: 1px solid var(--acn-line);
	color: var(--acn-muted);
	font-size: 1rem;
	text-align: center;
}

.acn .acn-logos__title b {
	color: var(--acn-ink);
	font-weight: 500;
}

.acn .acn-logos__title::before,
.acn .acn-logos__title::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--acn-line);
}

/* A 1px gap over the line colour draws every line between the cells */
/* Ten logos: two even rows of five (two columns on a phone) */
.acn .acn-logos__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	width: var(--acn-frame-w);
	margin-inline: auto;
	padding: 0;
	border: 1px solid var(--acn-line);
	border-bottom: 0;
	background: var(--acn-line);
}

.acn .acn-logos__grid li {
	display: grid;
	place-items: center;
	height: 104px;
	padding-inline: 24px;
	background: #ffffff;
	transition: background-color 0.2s ease;
}

.acn .acn-logos__grid li:hover {
	background: var(--acn-soft);
}

.acn .acn-logos__grid img {
	display: block;
	width: auto;
	max-width: min(100%, 150px);
	max-height: 52px;
	object-fit: contain;
}

/* A grid that ends the page's content closes at its foot */
.acn .acn-logos--closed .acn-logos__grid {
	border-bottom: 1px solid var(--acn-line);
}

/* The logos as their own closing section, with the frame lines through the space around them */
.acn-logos-sec {
	position: relative;
	padding-block: clamp(48px, 5vw, 64px);
}

.acn-logos-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);
	pointer-events: none;
}


@media (max-width: 767px) {
	.acn .acn-logos__title {
		gap: 12px;
		padding-inline: 16px;
		font-size: 0.9375rem;
	}

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

	.acn .acn-logos__grid li {
		height: 76px;
		padding-inline: 12px;
	}

	.acn .acn-logos__grid img {
		max-height: 34px;
	}
}

/* ---------- Form fields ----------
   A light tinted fill and a 3:1 border (WCAG 1.4.11) set a field apart from a white card;
   it turns white with the purple ring while typing. Errors in red, with the border to match. */
.acn-field__label {
	display: block;
	margin-bottom: 8px;
	color: var(--acn-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.acn-field__optional {
	color: var(--acn-muted);
	font-weight: 400;
}

.acn .acn-input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #8b8998;
	border-radius: 10px;
	background: #f6f5f9;
	color: var(--acn-ink);
	font: 400 1rem/1.4 inherit;
	box-shadow: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.acn textarea.acn-input {
	height: auto;
	min-height: 120px;
	padding-block: 14px;
	resize: vertical;
}

.acn .acn-input::placeholder {
	color: #6f6d7a;
	opacity: 1;
}

.acn .acn-input:hover {
	border-color: #6c6a79;
}

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

.acn-field__error {
	display: none;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	color: #b3261e;
	font-size: 0.875rem;
	font-weight: 500;
}

.acn-field__error::before {
	content: "!";
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #b3261e;
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

/* ---------- 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;
}

/* ---------- Motion ---------- */

/* Reveal on scroll: hidden only when the page script has marked motion as allowed */
@media (prefers-reduced-motion: no-preference) {
	.acn-motion [data-acn-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.7s var(--acn-ease), transform 0.7s var(--acn-ease);
	}

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

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
	.acn-head {
		margin-bottom: 40px;
	}
}