/*
 * Ariel AI landing page.
 *
 * Two canvases: .aai-canvas--d (1440, Figma 2001:72) placed on the frame's own
 * coordinates, and .aai-canvas--m (390, Figma 2101:285) built as a flow.
 * front.js scales each canvas to the window and gives its stage the height it
 * occupies. Everything is Birzia (Light 300 / Medium 500 / Bold 700 / Black 900):
 * the design's Tel Aviv, Rubik, Assistant and Heebo texts were mapped by weight.
 *
 * Figma "Auto" line height for Birzia is 1.2 of the size (ascender + descender,
 * without the font's line gap), so that is the default here; Chrome's "normal"
 * would add the gap and push every block down.
 */

/* ------------------------------------------------------------------ base */
html, body.aai-body { margin: 0; padding: 0; background: #00252d; }
/* A site-wide stylesheet on the admin site sets `scroll-behavior: smooth` on
   html. That turns every script scroll into a glide — the accordion's hold-
   in-place correction drifted 600px instead of landing. Buttons that should
   glide (scroll to the form) ask for it themselves. */
html { scroll-behavior: auto !important; }
body.aai-body { overflow-x: hidden; min-height: 100vh; }
#wpadminbar { position: fixed; }

.aai-root {
	--y: #ffee55;
	--c: #03c1ed;
	--ground: #00252d;
	font-family: 'Birzia', 'Heebo', 'Assistant', Arial, sans-serif;
	font-weight: 300;
	color: #fff;
	direction: rtl;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.aai-root *, .aai-root *::before, .aai-root *::after { box-sizing: border-box; }
.aai-root :where(p, h1, h2, h3, h4, figure, ul, ol, li, blockquote) {
	margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit;
	text-wrap: wrap;
}
.aai-root img { display: block; max-width: none; border: 0; }
.aai-root strong { font-weight: 700; }
.aai-root a { color: inherit; text-decoration: none; }
.aai-root :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.aai-root [hidden] { display: none !important; }
.aai-root .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ------------------------------------------------------------- stages */
.aai-stage { position: relative; width: 100%; overflow: hidden; }
.aai-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.aai-canvas--d { width: 1440px; }
.aai-canvas--m { width: 390px; }
.aai-stage--mobile { display: none; }
@media (max-width: 900px) {
	.aai-stage--desktop { display: none; }
	.aai-stage--mobile { display: block; }
}
/* Until front.js has measured, the stage has no height; show the canvas in
   flow so a page without JavaScript still reads. */
.aai-stage:not(.is-fit) .aai-canvas { position: relative; }

/* ------------------------------------------------------------- shared */
.aai-grad-yc {
	background-image: linear-gradient(90deg, #ffee55 0%, #03c1ed 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
.aai-grad-w {
	background-image: linear-gradient(90deg, #fff 0%, #fff 55%, #a3a3a3 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}

/* The phrase in the hero headline on its colour pill (Figma 2013:67). */
.aai-hl {
	display: inline-block;
	white-space: nowrap;
	padding: 0.03em 0.2em;
	border-radius: 11px;
	background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(90deg, #ffee55, #03c1ed);
	color: #fff; -webkit-text-fill-color: #fff;
	line-height: inherit;
}

/* Rectangles under a 300px layer blur, drawn as gradients (see glow()). */
.aai-glow {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
}
.aai-glow--y { background: radial-gradient(closest-side, rgba(249, 237, 128, var(--a)) 0%, rgba(249, 237, 128, calc(var(--a) * .72)) 30%, rgba(249, 237, 128, calc(var(--a) * .32)) 62%, rgba(249, 237, 128, 0) 100%); }
.aai-glow--c { background: radial-gradient(closest-side, rgba(3, 193, 237, var(--a)) 0%, rgba(3, 193, 237, calc(var(--a) * .72)) 30%, rgba(3, 193, 237, calc(var(--a) * .32)) 62%, rgba(3, 193, 237, 0) 100%); }
/* In the phone's flow, content must be positioned to paint over the glows
   that come before it. The desktop's children are all absolute already. */
.m-sec > :not(.aai-glow) { position: relative; }

/* --- the arrow button (component 2011:15) --- */
.aai-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 60px;
	padding: 0 44px 0 82px;
	border-radius: 999px;
	background: #03c1ed;
	box-shadow: inset 0 0 0 1px #ff5f00;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, filter .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.aai-btn__dot {
	position: absolute;
	left: 9px; top: 7.5px;
	width: 45px; height: 45px;
	border-radius: 999px;
	background: #ffee55;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.aai-btn__dot img { width: 22px; height: 22px; }
.aai-btn--dot-w .aai-btn__dot { background: #fff; }
.aai-btn--ink { color: #000; }
.aai-btn--m { height: 58px; padding: 0 28px 0 71px; }
.aai-btn--m .aai-btn__dot { left: 9px; top: 7.5px; width: 43px; height: 43px; }
@media (hover: hover) and (pointer: fine) {
	.aai-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 0 0 1px #ff5f00, 0 10px 24px rgba(3, 193, 237, .35); }
	.aai-btn:hover .aai-btn__dot img { animation: aai-arrow .55s cubic-bezier(.22, .61, .36, 1); }
}
.aai-btn:focus-visible { outline: 3px solid #ffee55; outline-offset: 4px; }
@keyframes aai-arrow {
	0% { transform: translateX(0); opacity: 1; }
	45% { transform: translateX(-26px); opacity: 0; }
	46% { transform: translateX(26px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

/* --- play button --- */
.aai-video { cursor: default; background-size: cover; background-position: center; }
.aai-video[data-aai-video] { cursor: pointer; }
.aai-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.aai-play { position: absolute; display: block; }
.aai-play__circle {
	position: absolute; inset: 0; border-radius: 50%;
	background: linear-gradient(90deg, #ffee55, #03c1ed);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.aai-play__tri { position: absolute; transform: rotate(90deg); }
.aai-video[data-aai-video]:hover .aai-play__circle { transform: scale(1.07); }

/* --- pain card (Reason Card 2013:120) --- */
.aai-pain {
	position: relative;
	background: #fff;
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px rgba(169, 148, 76, .18), 0 4px 24px rgba(38, 40, 61, .06), 0 1px 3px rgba(0, 0, 0, .04);
	color: #000;
	text-align: right;
}
.aai-pain__title { font-weight: 700; color: #000; }
.aai-pain__body { font-weight: 300; color: #26283d; }
.aai-pain__badge { position: absolute; display: block; }
.aai-pain__badge::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: linear-gradient(90deg, #ffee55, #03c1ed);
	box-shadow: 0 10px 24px rgba(38, 40, 61, .4), inset 0 1px 0 rgba(243, 203, 3, .3);
}
.aai-pain__ring { position: absolute; overflow: visible; }
.aai-pain__ring circle { fill: none; stroke: rgba(169, 148, 76, .55); stroke-width: 2; stroke-dasharray: 6 5; }
.aai-pain__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #000; line-height: 1; direction: ltr; }

/* --- square (Square Card 2032:86) --- */
.aai-square {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
	gap: 6px;
	padding: 20px;
	border-radius: 16px;
	overflow: hidden;
	background: #26283d;
	box-shadow: 0 12px 28px -6px rgba(59, 42, 32, .14);
	isolation: isolate;
	text-align: right;
}
.aai-square__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; z-index: -1; }
.aai-square--hot { background: #000; }
.aai-square--hot .aai-square__img { opacity: .65; }
.aai-square--hot::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(3, 94, 115, 0) 34%, rgba(3, 94, 115, .90) 68%, rgba(3, 94, 115, .97) 100%),
		rgba(3, 193, 237, .34);
}
.aai-square__title { font-weight: 700; font-size: 20px; line-height: 26px; color: #fff; }
.aai-square__body { font-weight: 300; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .85); }

/* --- the frosted fit card (2055:625) --- */
.aai-fit {
	position: relative;
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(153, 153, 153, .2) 4%, rgba(255, 255, 255, .2) 51%, rgba(153, 153, 153, .2) 91%);
	-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	text-align: right;
}
.aai-fit::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
	background: linear-gradient(90deg, #2e6489, #50aeef);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}
.aai-fit__title { font-weight: 700; color: #fff; line-height: 1.2; text-wrap: balance; } /* the long title left one word alone on its second line */
.aai-fit__body { font-weight: 300; color: #fff; line-height: 1.2; }

/* --- Word of Leader --- */
.aai-word {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: center;
	direction: ltr;
	background-image: linear-gradient(90deg, rgba(255, 238, 85, .34), rgba(3, 193, 237, .34));
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .9);
	background-image: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)), linear-gradient(90deg, rgba(255, 238, 85, .34), rgba(3, 193, 237, .34));
	text-shadow: 0 0 18px rgba(255, 255, 255, .08);
	pointer-events: none;
}

/* --- the round badge (2013:331–334) --- */
.aai-badge { position: absolute; display: block; width: 197px; height: 197px; }
.aai-badge__glass { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.aai-badge__dot { position: absolute; left: 39px; top: 38px; width: 121px; height: 121px; border-radius: 50%; background: linear-gradient(90deg, #ffee55, #03c1ed); transition: transform .3s ease; }
.aai-badge__ring { position: absolute; left: 8.54px; top: 9.39px; width: 181px; height: 172px; transform-origin: 89.96px 89.11px; animation: aai-spin 22s linear infinite; }
.aai-badge__label { position: absolute; left: 39px; top: 38px; width: 121px; height: 121px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 900; font-size: 21px; line-height: 1.2; color: #000; }
.aai-badge:hover .aai-badge__dot { transform: scale(1.06); }
@keyframes aai-spin { to { transform: rotate(-360deg); } }

/* --- accordion (syllabus, FAQ) --- */
.aai-acc__item { position: relative; }
.aai-acc__head {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%;
	background: #03c1ed;
	border-radius: 15px;
	text-align: right;
	color: #000;
}
.aai-acc__title { font-weight: 700; flex: 1 1 auto; }
.aai-acc__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.aai-acc__icon img { transition: transform .35s cubic-bezier(.22, .61, .36, 1); transform: rotate(-43.9deg); }
.aai-acc__item.is-open .aai-acc__icon img { transform: rotate(-5.5deg) scaleY(-1); }
.aai-acc__panel { background: rgba(255, 238, 85, .36); border-radius: 15px; overflow: hidden; }
.aai-acc__body { font-weight: 300; color: #fff; }
.aai-acc__head:focus-visible { outline: 3px solid #ffee55; outline-offset: 3px; }

/* --- form --- */
.aai-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aai-field { display: block; }
.aai-field input {
	display: block; width: 100%;
	border: 0; outline: 0; margin: 0;
	border-radius: 9px;
	background: #e9e9e9;
	-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
	color: #000;
	font-family: inherit; font-weight: 700;
	text-align: right;
	direction: rtl;
	-webkit-appearance: none; appearance: none;
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow .2s ease;
}
.aai-field input::placeholder { color: #000; opacity: 1; }
.aai-field input:focus { box-shadow: inset 0 0 0 2px #03c1ed; }
.aai-field input.is-invalid { box-shadow: inset 0 0 0 2px #ff5f00; }
.aai-form__error { color: #ffee55; font-weight: 700; text-align: right; }

/* --- credit --- */
.aai-credit { display: flex; justify-content: center; padding: 34px 16px 40px; background: #00252d; }
.aai-credit__link { display: block; line-height: 0; opacity: .85; transition: opacity .25s ease, transform .25s ease; }
.aai-credit__link img { width: 196px; height: 61px; object-fit: contain; }
.aai-credit__link:hover { opacity: 1; transform: translateY(-2px); }

/* ============================================================ DESKTOP */
.d-band { position: relative; width: 1440px; }
.d-band > * { position: absolute; }
.aai-bleed { left: calc(-1 * var(--aai-bleed, 0px)) !important; right: calc(-1 * var(--aai-bleed, 0px)) !important; }

/* Hero — 2013:64 */
/* Clipped top and bottom only, so the ground can bleed past a capped canvas. */
.d-hero { height: 1080px; clip-path: inset(0 -3000px); }
.d-hero__bg {
	inset: 0;
	background-color: #00252d;
	background-size: cover; background-position: center;
}
.d-hero__bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 37, 45, .6); }
.d-hero::after { content: ""; position: absolute; left: calc(-1 * var(--aai-bleed, 0px)); right: calc(-1 * var(--aai-bleed, 0px)); bottom: 0; height: 3px; background: #ffee55; z-index: 3; }
.d-hero__faded { left: -195px; top: 191px; width: 1024px; height: 1024px; opacity: .2; }
.d-hero__top { left: 120px; top: 52px; width: 1200px; font-size: 25px; line-height: 1.2; text-align: center; }
.d-hero__title {
	left: 246px; top: 106px; width: 949px;
	font-size: 55px; font-weight: 700; line-height: 1.2; text-align: center;
	background-image: linear-gradient(90deg, #fff 0%, #fff 55%, #a3a3a3 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
	text-wrap: balance;
}
.d-hero__sub { left: 210px; top: 250px; width: 1020px; font-size: 25px; line-height: 1.2; text-align: center; }
.d-hero__cta { left: 0; right: auto; width: 1440px; top: 345px; text-align: center; }
.d-hero__character { left: 383px; top: 465px; width: 617px; height: 618px; }

/* Video — page y 1080 */
.d-video { height: 665px; }
.d-video__pill {
	left: 397.5px; top: 66px; width: 645px; height: 69px;
	border-radius: 30px 30px 0 0;
	background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(90deg, #ffee55, #03c1ed);
	display: flex; align-items: center; justify-content: center;
	padding: 0 20px;
	font-size: 25px; line-height: 1.2; text-align: center;
}
.d-video__pill strong { font-weight: 700; color: #000; }
.d-video__box { left: 347px; top: 135px; width: 747px; height: 470px; border-radius: 31px; background-color: #383838; overflow: hidden; }
.d-video__play { left: 321px; top: 154px; width: 128px; height: 131px; }
.d-video__play .aai-play__tri { left: 11px; top: 34px; width: 63.22px; height: 55.5px; left: calc(65px - 31.61px); top: calc(65.5px - 27.75px); }
.d-video__robot { left: 233px; top: 391px; width: 271px; height: 271px; z-index: 2 !important; pointer-events: none; }

/* Panel — page y 1745 */
.d-panel { padding: 20px 0 14px; }
.d-panel > .d-panel__box { position: relative; }
.d-panel__box {
	margin-inline: auto; width: 1327px; min-height: 741px;
	border-radius: 31px;
	background: linear-gradient(90deg, rgba(255, 238, 85, .15), rgba(3, 193, 237, .15));
	padding: 55px 0 33px;
	display: flex; flex-direction: column; align-items: center;
}
.d-panel__title { width: 760px; font-size: 41px; font-weight: 700; line-height: 1.2; text-align: center; margin-bottom: 41px; }
.d-panel__p { width: 1010px; font-size: 25px; line-height: 31px; text-align: center; }
.d-panel__img { width: 446px; height: 251px; object-fit: cover; margin: 30px 0; border-radius: 18px; }

/* The real price — page y 2520 */
.d-pains { height: 950px; }
.d-pains__title { left: 200px; top: 79px; width: 1040px; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-align: center; }
.d-pains__grid { left: 200px; top: 182px; width: 1040px; display: grid; grid-template-columns: 492px 492px; column-gap: 56px; row-gap: 32px; }
.d-pains .aai-pain { width: 492px; min-height: 208px; padding: 36px 80px 36px 32px; }
.d-pains .aai-pain__content { padding-right: 32px; display: flex; flex-direction: column; gap: 18px; }
.d-pains .aai-pain__title { font-size: 30px; line-height: 1.25; letter-spacing: -0.01em; }
.d-pains .aai-pain__body { font-size: 17px; line-height: 1.85; }
.d-pains .aai-pain__badge { left: 435px; top: 62px; width: 84px; height: 84px; }
.d-pains .aai-pain__ring { left: -5px; top: -5px; width: 94px; height: 94px; }
.d-pains .aai-pain__num { font-size: 32px; }

/* Word of Leader — page y 3470 */
.d-wol { height: 780px; }
.d-wol__title { left: 200px; top: 26px; width: 1040px; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-align: center; }
.d-wol__img { left: 412px; top: 79px; width: 617px; height: 618px; }
.d-wol__word { left: 100px; top: 132px; width: 1240px; font-size: 245px; z-index: 2 !important; }
.d-wol__badge { left: 1134px; top: 377px; z-index: 3 !important; }

/* What you get — frame 2032:96, page y 4250 */
.d-get { height: 760px; }
.d-get__frame {
	left: 0; top: 39px; width: 1440px; height: 671px;
	border-radius: 30px;
	overflow: hidden;
	background: linear-gradient(rgba(0, 37, 45, .9), rgba(0, 37, 45, .9)), var(--bg) center / cover;
	box-shadow: inset 0 0 0 1px #fff;
}
/* A full-width band in the design: it reaches the window's edges even when
   the canvas is drawn narrower than the window; its content stays put. */
.d-get__frame { left: calc(-1 * var(--aai-bleed, 0px)); width: calc(1440px + 2 * var(--aai-bleed, 0px)); }
.d-get__frame > * { position: absolute; margin-left: var(--aai-bleed, 0px); }
.d-get__title { left: 256.5px; top: 44px; width: 927px; font-size: 45px; font-weight: 900; line-height: 1.4; text-align: center; }
.d-get__grid { left: 178px; top: 149px; width: 1084px; display: flex; gap: 20px; }
.d-get .aai-square { width: 256px; height: 256px; flex: 0 0 256px; }
.d-get__text { left: 257px; top: 463px; width: 927px; font-size: 25px; font-weight: 900; line-height: 1.4; text-align: center; }
.d-get__cta { left: 0; right: auto; width: 1440px; top: 562px; text-align: center; }

/* 180° — page y 5010 */
.d-shift { height: 1170px; }
.d-shift__title { left: 200px; top: 30px; width: 1040px; font-size: 44px; font-weight: 900; line-height: 1.2; text-align: center; }
.d-shift__table { left: 195px; top: 152px; width: 1051px; height: 981px; overflow: hidden; }
.d-shift__table > * { position: absolute; }
.d-shift__dark { left: 120px; top: 87px; width: 847px; height: 789px; border-radius: 20px; background: linear-gradient(90deg, rgba(255, 238, 85, .3), rgba(3, 193, 237, .3)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.d-shift__color { left: 68px; top: 24px; width: 479px; height: 929px; border-radius: 20px; background-size: 100% 100%; box-shadow: inset 0 4px 20px 5px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(240, 165, 182, .55); }
.d-shift__pill { left: 108px; top: 75px; width: 380px; height: 103px; border-radius: 30px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 4px 4px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; }
.d-shift__pill p, .d-shift__head-r { font-size: 30px; font-weight: 700; line-height: 1.2; text-align: center; }
.d-shift__pill p { width: 360px; background-image: linear-gradient(90deg, #000, #666); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.d-shift__head-r { left: 600px; top: 106px; width: 330px; color: #000; }
.d-shift__line { left: 68px; width: 882px; height: 1px; background: #9a9a9a; }
.d-shift__row { left: 0; width: 1051px; height: 170px; }
.d-shift__l, .d-shift__r { position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1.4; text-align: right; }
.d-shift__l { left: 128px; width: 360px; color: #000; }
.d-shift__r { left: 593px; width: 330px; color: #fff; }

/* 4 steps — page y 6180, frame 2050:273 at +103 */
.d-steps { height: 1700px; }
.d-steps__title { left: 537px; top: 265px; width: 835px; font-size: 45px; font-weight: 900; line-height: 1.4; text-align: right; }
.d-step { width: 739px; }
.d-step--1 { left: 658px; top: 442px; }
.d-step--2 { left: 513px; top: 752px; }
.d-step--3 { left: 316px; top: 1064px; }
.d-step--4 { left: 63px; top: 1378px; }
.d-step__card {
	position: relative;
	min-height: 173px;
	padding: 10px 27px 18px 20px;
	border-radius: 20px;
	background: linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)), linear-gradient(90deg, #ffee55, #03c1ed);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
	color: #000;
	text-align: right;
}
.d-step--1 .d-step__card { min-height: 162px; }
.d-step__title { font-size: 30px; font-weight: 900; line-height: 1.4; }
.d-step__body { margin-top: 9px; margin-left: auto; width: 471px; font-size: 20px; line-height: 1.4; }
.d-step--2 .d-step__body { width: 437px; }
.d-step__robot { position: absolute; pointer-events: none; }
.d-step--1 .d-step__robot { left: -3px; top: -84px; width: 279px; height: 279px; }
.d-step--2 .d-step__robot { left: -17px; top: -56px; width: 252px; height: 252px; }
.d-step--3 .d-step__robot { left: -12px; top: -79px; width: 279px; height: 279px; }
.d-step--4 .d-step__robot { left: -27px; top: -53px; width: 279px; height: 279px; }

/* The form — page y 7880 */
.d-form { height: 770px; }
.d-form__panel { left: 108px; top: 40px; width: 1225px; height: 693px; border-radius: 20px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.d-form__img { left: 758px; top: 93px; width: 575px; height: 576px; }
.d-form__col { left: 38px; top: 73px; width: 716px; display: flex; flex-direction: column; align-items: flex-start; }
.d-form__title { width: 716px; font-size: 45px; font-weight: 900; line-height: 1.4; text-align: right; }
.d-form__hl { width: 507px; margin-top: 15px; font-size: 22px; font-weight: 900; line-height: 1.4; text-align: right; }
.d-form__body { width: 507px; margin-top: 7px; font-size: 18px; line-height: 1.4; text-align: right; }
.d-form__lead { width: 507px; margin-top: 16px; margin-right: -4px; font-size: 24px; font-weight: 900; line-height: 1.4; text-align: right; }
.d-form .aai-form { width: 496px; margin-top: 49px; margin-right: 6px; }
.d-form .aai-form__fields { display: grid; grid-template-columns: 236px 236px; column-gap: 24px; row-gap: 14px; }
.d-form .aai-field input { height: 56px; padding: 0 16px; font-size: 17px; }
.d-form .aai-form__error { margin-top: 10px; font-size: 17px; }
.d-form .aai-form__submit { margin-top: 41px; margin-right: 81px; }

/* Syllabus — page y 8650 */
.d-syl { padding: 144px 0 17px; }
.d-syl > .d-syl__list { position: relative; }
.d-syl__title { left: 0; right: 0; top: 12px; font-size: 45px; font-weight: 900; line-height: 1.4; text-align: center; }
.d-syl__list, .d-faq__list { width: 1162px; margin-inline: auto; }
.d-band .aai-acc__item + .aai-acc__item { margin-top: 23px; }
.d-band .aai-acc__head { min-height: 88px; padding: 10px 29px 10px 11px; }
.d-band .aai-acc__title { font-size: 23px; line-height: 1.25; }
.d-band .aai-acc__icon { width: 72px; height: 66px; }
.d-band .aai-acc__icon img { width: 66.48px; height: 66.48px; }
.d-band .aai-acc__panel { margin-top: 15px; }
.d-band .aai-acc__body { min-height: 193px; }
.d-band .aai-acc__body { padding: 17px 19px 24px 69px; font-size: 26px; line-height: 1.2; }

/* The syllabus holds 12 courses; at the design's row height the list filled the
   screen ("זה ענק", 18.9). Same look, smaller rows. Must sit after the .d-band
   rules above — same weight, so the last one wins. */
.d-syl .aai-acc__item + .aai-acc__item { margin-top: 13px; }
.d-syl .aai-acc__head { min-height: 62px; padding: 8px 20px 8px 8px; }
.d-syl .aai-acc__title { font-size: 19px; }
.d-syl .aai-acc__icon { width: 50px; height: 46px; }
.d-syl .aai-acc__icon img { width: 46px; height: 46px; }
.d-syl .aai-acc__panel { margin-top: 10px; }
.d-syl .aai-acc__body { min-height: 0; padding: 14px 16px 18px 48px; font-size: 20px; line-height: 1.35; }

/* About — page y 9440 */
.d-about { height: 1040px; }
.d-about__title { left: 0; right: 0; top: 76px; font-size: 45px; font-weight: 900; line-height: 1.4; text-align: center; }
.d-about__card {
	left: 120px; top: 273px; width: 785px; min-height: 475px;
	border-radius: 30px;
	background: rgba(3, 193, 237, .17);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	padding: 41px 26px 30px 51px;
	text-align: right;
}
.d-about__hello { font-size: 40px; font-weight: 900; line-height: 1.2; margin-left: auto; width: 610px; }
.d-about__body { margin-top: 23px; font-size: 22px; line-height: 31px; }
.d-about__photo { left: 757px; top: 2px; width: 701px; height: 1066px; overflow: hidden; pointer-events: none; z-index: 2 !important; }
.d-about__photo img {
	position: absolute; left: 62px; top: 110px; width: 667px; height: 667px;
	object-fit: contain;
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
	mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}

/* Not every business — page y 10480 */
.d-fit { height: 940px; }
.d-fit__titles { left: 0; right: 0; top: 8px; text-align: center; }
.d-fit__titles span { display: block; margin: 0 auto; font-size: 45px; line-height: 1.4; width: max-content; max-width: 1040px; }
.d-fit__light { font-weight: 300; }
.d-fit__bold { font-weight: 900; }
.d-fit__glow { left: -117px; top: 56px; width: 1062px; height: 1062px; pointer-events: none; z-index: 0 !important; }
.d-fit__img { left: 191px; top: 194px; width: 475px; height: 670px; object-fit: cover; object-position: top; }
.d-fit__card { left: 694px; width: 557px; min-height: 157px; padding: 30px 46px 22px 58px; }
.d-fit__card--1 { top: 271px; width: 562px; }
.d-fit__card--2 { top: 473px; }
.d-fit__card--3 { top: 675px; }
.d-fit .aai-fit__title { font-size: 26px; }
.d-fit .aai-fit__body { margin-top: 8px; font-size: 22px; width: 440px; margin-left: auto; }

/* FAQ — page y 11420 */
.d-faq { padding: 100px 0 120px; }
.d-faq > * { position: relative; }
.d-faq__title { font-size: 45px; font-weight: 900; line-height: 1.4; text-align: center; width: max-content; margin: 0 auto 60px; }

/* Figma sets Birzia's line gap above the glyphs, CSS splits it: every text
   that was Birzia in the design (Auto line height, 1.4) sits 0.1em lower in
   Figma. Measured: 5px on the 45px titles. */
.d-get__title, .d-get__text, .d-steps__title, .d-syl__title, .d-about__title, .d-fit__titles, .d-faq__title { margin-top: .1em; }
.d-step__title, .d-form__title { padding-top: .1em; }

/* ============================================================= MOBILE */
.m-sec { position: relative; width: 390px; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.m-title { width: 100%; font-size: 28px; font-weight: 900; line-height: 1.2; text-align: center; text-wrap: balance; }
.m-cta { display: flex; justify-content: center; }

/* Hero — 2101:286 */
.m-hero { padding: 32px 24px 0; gap: 12px; clip-path: inset(0 -3000px); }
.m-hero__bg { position: absolute !important; top: 0; bottom: 0; left: calc(-1 * var(--aai-bleed, 0px)); right: calc(-1 * var(--aai-bleed, 0px)); z-index: 0 !important; background-size: cover; background-position: center; }
.m-hero__bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 37, 45, .6); }
.m-hero::after { content: ""; position: absolute; left: calc(-1 * var(--aai-bleed, 0px)); right: calc(-1 * var(--aai-bleed, 0px)); bottom: 0; height: 3px; background: #ffee55; z-index: 3; }
.m-hero__faded { position: absolute !important; left: -190px; top: 330px; width: 563px; height: 563px; opacity: .2; }
.m-hero__top { width: 100%; font-size: 15px; line-height: 1.2; text-align: center; }
.m-hero__title { width: 100%; font-size: 32px; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance;
	background-image: linear-gradient(90deg, #fff 0%, #fff 55%, #a3a3a3 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.m-hero__sub { width: 100%; font-size: 16px; line-height: 1.2; text-align: center; }
.m-hero__cta { margin-top: 4px; }
.m-hero__character { width: 342px; height: 343px; margin-top: 12px; }

/* Video — 2101:287 */
.m-video { gap: 0; padding-bottom: 48px; }
.m-video__pill {
	width: 326px; padding: 9px 12px;
	border-radius: 17px 17px 0 0;
	background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(90deg, #ffee55, #03c1ed);
	font-size: 15px; line-height: 1.5; text-align: center;
}
.m-video__pill strong { font-weight: 700; color: #000; }
.m-video__box { width: 358px; height: 225px; border-radius: 15px; background-color: #383838; overflow: hidden; }
.m-video__play { left: calc(179px - 35.84px); top: calc(112.5px - 36.68px); width: 71.68px; height: 73.36px; }
.m-video__play .aai-play__tri { width: 35.4px; height: 31.08px; left: calc(35.84px + 0.56px - 17.7px); top: calc(36.68px - 15.54px); }
.m-video__robot { position: absolute !important; left: 2px; top: 221px; width: 110px; height: 110px; z-index: 2 !important; pointer-events: none; }

/* Panel — 2101:288 */
.m-panel { padding-top: 8px; }
.m-panel__box {
	width: 358px;
	border-radius: 24px;
	background: linear-gradient(90deg, rgba(255, 238, 85, .15), rgba(3, 193, 237, .15));
	padding: 28px 20px;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.m-panel__title { width: 100%; font-size: 24px; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance; }
.m-panel__p { width: 100%; font-size: 16px; line-height: 1.5; text-align: center; }
.m-panel__img { width: 318px; height: 179px; object-fit: cover; margin: 18px 0; border-radius: 14px; }

/* Pains — 2101:289 */
.m-pains { gap: 28px; padding-bottom: 48px; }
.m-pains .m-title, .m-wol .m-title { font-weight: 700; letter-spacing: -0.02em; }
.m-pains__list { width: 358px; display: flex; flex-direction: column; gap: 16px; }
.m-pains .aai-pain { width: 358px; padding: 22px 56px 22px 18px; border-radius: 16px; }
.m-pains .aai-pain__content { padding-right: 22px; display: flex; flex-direction: column; gap: 14px; }
.m-pains .aai-pain__title { font-size: 20px; line-height: 1.25; }
.m-pains .aai-pain__body { font-size: 14px; line-height: 1.7; }
.m-pains .aai-pain__badge { left: 321px; top: calc(50% - 26px); width: 52px; height: 52px; }
.m-pains .aai-pain__ring { left: -5px; top: -5px; width: 62px; height: 62px; }
.m-pains .aai-pain__num { font-size: 20px; }

/* Word of Leader — 2101:290 */
.m-wol { gap: 8px; }
.m-wol__stage { position: relative; width: 358px; height: 374px; }
.m-wol__stage > * { position: absolute; }
.m-wol__img { left: 29px; top: 30px; width: 300px; height: 300px; }
.m-wol__word { left: 0; top: 112px; width: 358px; font-size: 72px; z-index: 2; }
.m-wol__badge { left: 266px; top: 271px; width: 197px; height: 197px; transform: scale(.5); transform-origin: 0 0; }

/* What you get — 2101:291 */
.m-get {
	border-radius: 30px;
	overflow: hidden;
	background: linear-gradient(rgba(0, 37, 45, .9), rgba(0, 37, 45, .9)), var(--bg) center / cover;
	box-shadow: inset 0 0 0 1px #fff;
	padding: 40px 17px 44px;
}
.m-get__title { color: #fff; }
.m-get__grid { width: 356px; display: grid; grid-template-columns: 172px 172px; gap: 12px; }
.m-get .aai-square { height: 238px; }
.m-get .aai-square--hot::after {
	background:
		linear-gradient(180deg, rgba(3, 94, 115, 0) 16%, rgba(3, 94, 115, .92) 50%, rgba(3, 94, 115, .98) 100%),
		rgba(3, 193, 237, .34);
}
.m-get__text { width: 100%; font-size: 17px; font-weight: 900; line-height: 1.4; text-align: center; text-wrap: balance; }

/* 180° — 2101:292 */
.m-shift { gap: 28px; }
.m-shift__table { position: relative; width: 358px; padding: 22px 0 26px; }
.m-shift__dark, .m-shift__color { position: absolute !important; z-index: 0 !important; }
.m-shift__dark { left: 22px; right: 0; top: 30px; bottom: 30px; border-radius: 20px; background: linear-gradient(90deg, rgba(255, 238, 85, .3), rgba(3, 193, 237, .3)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.m-shift__color { left: 0; top: 0; bottom: 0; width: 170px; border-radius: 20px; background-size: 100% 100%; box-shadow: inset 0 4px 20px 5px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(240, 165, 182, .55); }
.m-shift__row { position: relative; display: flex; align-items: center; gap: 26px; padding: 16px 14px 16px 10px; direction: ltr; }
.m-shift__row > * { direction: rtl; }
.m-shift__row--head { gap: 22px; padding: 0 14px 14px 6px; }
.m-shift__pill { width: 158px; flex: 0 0 158px; padding: 10px 4px; border-radius: 18px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 4px 4px rgba(0, 0, 0, .25); }
.m-shift__pill p { font-size: 13.5px; font-weight: 700; line-height: 1.2; text-align: center; background-image: linear-gradient(90deg, #000, #666); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.m-shift__head-r { width: 158px; flex: 0 0 158px; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; color: #000; }
.m-shift__line { position: relative; display: block; height: 1px; background: #9a9a9a; }
.m-shift__l, .m-shift__r { font-size: 14px; line-height: 1.4; text-align: right; }
.m-shift__l { width: 150px; flex: 0 0 150px; color: #000; }
.m-shift__r { width: 158px; flex: 0 0 158px; color: #fff; }

/* Steps — 2101:293 */
.m-steps { gap: 36px; padding-bottom: 48px; }
.m-steps__title { text-align: right; }
.m-steps__list { width: 358px; display: flex; flex-direction: column; gap: 28px; }
.m-step {
	position: relative;
	padding: 16px 16px 18px 134px;
	border-radius: 20px;
	background: linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)), linear-gradient(90deg, #ffee55, #03c1ed);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
	color: #000;
	min-height: 126px;
	display: flex; align-items: center;
}
.m-step__robot { position: absolute; left: -12px; top: calc(50% - 103px); width: 150px; height: 150px; pointer-events: none; }
.m-step__text { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.m-step__title { font-size: 22px; font-weight: 900; line-height: 1.2; }
.m-step__body { font-size: 15px; line-height: 1.5; }

/* Form — 2101:294 */
.m-form { padding: 24px 16px 48px; }
.m-form__panel {
	width: 358px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
	padding: 20px 12px 28px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.m-form__img { width: 240px; height: 240px; }
.m-form__title, .m-form__hl, .m-form__body, .m-form__lead { width: 100%; text-align: right; }
.m-form__title { font-size: 28px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.m-form__hl { font-size: 17px; font-weight: 900; line-height: 1.4; }
.m-form__body { font-size: 15px; line-height: 1.5; }
.m-form__lead { font-size: 19px; font-weight: 900; line-height: 1.3; }
.m-form .aai-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.m-form .aai-form__fields { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.m-form .aai-field input { height: 52px; padding: 0 16px; font-size: 16px; }
.m-form .aai-form__error { font-size: 15px; }
.m-form .aai-form__submit { display: flex; justify-content: center; margin-top: 8px; }

/* Syllabus / FAQ — 2101:295 */
.m-sec .aai-acc { width: 358px; }
.m-sec .aai-acc__item + .aai-acc__item { margin-top: 12px; }
.m-sec .aai-acc__head { min-height: 60px; padding: 8px 18px 8px 10px; gap: 12px; }
.m-sec .aai-acc__title { font-size: 18px; line-height: 1.3; }
.m-sec .aai-acc__icon { width: 44px; height: 44px; }
.m-sec .aai-acc__icon img { width: 41.2px; height: 41.2px; }
.m-sec .aai-acc__panel { margin-top: 10px; }
.m-sec .aai-acc__body { padding: 14px 16px 16px; font-size: 16px; line-height: 1.5; }

/* About — 2101:296 */
.m-about { gap: 20px; padding-bottom: 48px; }
.m-about__group { width: 358px; display: flex; flex-direction: column; align-items: center; }
.m-about__photo { position: relative; width: 300px; height: 300px; overflow: hidden; pointer-events: none; }
.m-about__photo img {
	position: absolute; inset: 0; width: 300px; height: 300px; object-fit: contain;
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
	mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}
.m-about__card {
	position: relative;
	width: 358px; margin-top: -96px;
	border-radius: 30px;
	background: rgba(3, 193, 237, .17);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	padding: 24px 20px 28px;
	text-align: right;
}
.m-about__hello { font-size: 24px; font-weight: 900; line-height: 1.2; }
.m-about__body { margin-top: 12px; font-size: 15px; line-height: 21px; }

/* Not every business — 2101:297 */
.m-fit { gap: 20px; padding-bottom: 48px; }
.m-fit__titles { width: 100%; text-align: center; }
.m-fit__titles span { display: block; margin: 0 auto; width: max-content; max-width: 100%; font-size: 28px; line-height: 1.2; }
.m-fit__light { font-weight: 300; }
.m-fit__bold { font-weight: 900; margin-top: 2px !important; }
.m-fit__stage { position: relative; width: 358px; height: 312px; }
.m-fit__stage > * { position: absolute; }
.m-fit__glow { left: -146px; top: -136px; width: 637px; height: 637px; pointer-events: none; }
.m-fit__img { left: 68.5px; top: 0; width: 221px; height: 312px; object-fit: cover; object-position: top; }
.m-fit__cards { width: 358px; display: flex; flex-direction: column; gap: 14px; }
.m-fit .aai-fit { padding: 16px 20px 18px; }
.m-fit .aai-fit__title { font-size: 18px; line-height: 1.3; }
.m-fit .aai-fit__body { margin-top: 6px; font-size: 15px; line-height: 1.5; }

/* FAQ — 2101:298 */
.m-faq { padding-bottom: 100px; }

/* ========================================================= thank-you */
.aai-ty { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 60px 20px; overflow: hidden; }
.aai-ty__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.aai-ty__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 37, 45, .7); }
.aai-ty__inner { position: relative; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.aai-ty__img { width: 240px; height: 240px; }
.aai-ty__title { font-size: clamp(30px, 5vw, 48px); font-weight: 900; line-height: 1.2; }
.aai-ty__body { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.5; }
.aai-ty .aai-btn { margin-top: 12px; }

/* ============================================================ reviews
   Not in the Figma: Ariel asked for a carousel between "what you get" and the
   180° table (22.9). Built in the page's own language — the teal glass of the
   about card, the yellow→cyan of the pain badges — without a backdrop blur,
   which is the one thing on this page that costs frames while scrolling. */
.aai-rev { position: relative; }
.aai-rev__track {
	display: flex; gap: 24px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding: 8px 120px 24px;
	scroll-padding-inline: 120px;
	outline: none;
}
.aai-rev__track::-webkit-scrollbar { display: none; }
.aai-rev__track:focus-visible { box-shadow: inset 0 0 0 2px rgba(3, 193, 237, .6); border-radius: 30px; }
.aai-rev__card {
	flex: 0 0 384px; scroll-snap-align: start;
	margin: 0;
	display: flex; flex-direction: column;
	padding: 34px 32px 28px;
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(3, 193, 237, .17), rgba(3, 193, 237, .06) 55%, rgba(255, 238, 85, .06));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 40px -18px rgba(0, 0, 0, .55);
	text-align: right;
}
.aai-rev__mark { width: 40px; height: 30px; fill: #ffee55; opacity: .9; }
.aai-rev__quote { margin: 18px 0 0; flex: 1; font-size: 18px; line-height: 1.6; font-weight: 300; color: rgba(255, 255, 255, .92); }
.aai-rev__who { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.aai-rev__photo {
	width: 46px; height: 46px; flex: 0 0 46px; /* small and round (Ariel, 22.9) */
	border-radius: 50%; object-fit: cover;
	border: 2px solid transparent;
	background: linear-gradient(#00252d, #00252d) padding-box, linear-gradient(90deg, #ffee55, #03c1ed) border-box;
}
.aai-rev__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aai-rev__name { font-size: 20px; font-weight: 700; line-height: 1.2; }
.aai-rev__role { font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .65); }
.aai-rev__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.aai-rev.is-static .aai-rev__nav { display: none; }
.aai-rev__btn {
	width: 52px; height: 52px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	transition: background-color .2s ease, opacity .2s ease, scale .12s ease-out;
}
.aai-rev__btn svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aai-rev__btn:active { scale: .94; }
.aai-rev__btn[disabled] { opacity: .3; cursor: default; }
@media (hover: hover) {
	.aai-rev__btn:not([disabled]):hover { background: rgba(3, 193, 237, .28); }
}
.aai-rev__dots { display: flex; gap: 8px; }
.aai-rev__dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .3); transition: width .25s ease, background-color .25s ease; }
.aai-rev__dot.is-on { width: 26px; background: linear-gradient(90deg, #ffee55, #03c1ed); }

/* desktop: three cards across the 1200px between the side margins */
.d-reviews { padding: 96px 0 110px; }
.d-reviews > :not(.aai-glow) { position: relative; }
.d-reviews__title { margin-top: .1em; margin-bottom: 52px; font-size: 45px; font-weight: 900; line-height: 1.4; text-align: center; }

/* phone: one card, the next one peeking, swiped by hand */
.m-reviews { padding-left: 0; padding-right: 0; }
.m-reviews .m-title { padding: 0 16px; }
.m-reviews .aai-rev { width: 390px; }
.m-reviews .aai-rev__track { gap: 12px; padding: 6px 30px 18px; scroll-padding-inline: 30px; }
.m-reviews .aai-rev__card { flex-basis: 330px; padding: 26px 22px 22px; border-radius: 22px; scroll-snap-align: center; }
.m-reviews .aai-rev__mark { width: 32px; height: 24px; }
.m-reviews .aai-rev__quote { margin-top: 14px; font-size: 15px; }
.m-reviews .aai-rev__who { margin-top: 20px; padding-top: 16px; gap: 12px; }
.m-reviews .aai-rev__photo { width: 40px; height: 40px; flex-basis: 40px; }
.m-reviews .aai-rev__name { font-size: 18px; }
.m-reviews .aai-rev__role { font-size: 12.5px; }
.m-reviews .aai-rev__nav { margin-top: 16px; }
.m-reviews .aai-rev__btn { width: 44px; height: 44px; }

/* The hero figure: a box around the picture, with the WebGL layer on top. */
.d-hero__character > img, .m-hero__character > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-hero__character { position: relative; }
.aai-headfig__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ============================================================ motion */
/* Hero pieces wait for the entrance (see head()); a stuck script frees them. */
.aai-motion .aai-pre { visibility: hidden; }
.aai-motion-done .aai-pre { visibility: visible; }

/* Reading progress, right to left like the page. */
.aai-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; }
.aai-progress span { display: block; height: 100%; background: linear-gradient(270deg, #ffee55, #03c1ed); transform-origin: 100% 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(3, 193, 237, .6); }
body.admin-bar .aai-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .aai-progress { top: 46px; } }

/* Constant: a ring breathes out of every button. Transform + opacity only. */
.aai-btn::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	border: 2px solid rgba(3, 193, 237, .75);
	animation: aai-ring 2.8s cubic-bezier(.22, .61, .36, 1) infinite;
	pointer-events: none;
}
@keyframes aai-ring {
	0% { transform: scale(1); opacity: .8; }
	70%, 100% { transform: scale(1.08, 1.35); opacity: 0; }
}
.aai-btn { transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, filter .25s ease, scale .12s ease-out; }
.aai-btn:active { scale: .97; }

/* Constant: a light sweeps across the highlighted phrase. */
.aai-hl { position: relative; overflow: hidden; isolation: isolate; vertical-align: top; }
.aai-hl::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
	transform: translateX(-130%);
	animation: aai-shine 5s ease-in-out 2.2s infinite;
	pointer-events: none;
}
@keyframes aai-shine { 0% { transform: translateX(-130%); } 30%, 100% { transform: translateX(130%); } }

/* Constant: a ring pulses around the play button. */
.aai-play::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid rgba(255, 238, 85, .75);
	animation: aai-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes aai-pulse { 0% { transform: scale(1); opacity: .85; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Constant: the dashed ring around each number turns. */
.aai-pain__ring { animation: aai-turn 16s linear infinite; }
@keyframes aai-turn { to { transform: rotate(360deg); } }

/* Hover and press. `translate` / `scale` are their own properties, so they
   never collide with the transforms the motion layer writes. */
.aai-pain, .aai-square, .aai-fit, .d-step__card, .m-step, .d-about__card, .m-about__card {
	transition: translate .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.aai-square__img { transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity .4s ease; }
.aai-acc__head { transition: filter .2s ease, scale .12s ease-out; }
.aai-acc__head:active { scale: .99; }
.aai-acc__icon img { transition: transform .35s cubic-bezier(.22, .61, .36, 1), scale .25s ease; }
@media (hover: hover) and (pointer: fine) {
	.aai-pain:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px rgba(169, 148, 76, .25), 0 18px 40px rgba(3, 193, 237, .18), 0 2px 6px rgba(0, 0, 0, .06); }
	.aai-square:hover { translate: 0 -8px; box-shadow: 0 22px 40px -10px rgba(3, 193, 237, .35); }
	.aai-square:hover .aai-square__img { transform: scale(1.08); }
	.aai-square--hot:hover .aai-square__img { opacity: .75; }
	.aai-fit:hover { translate: -6px 0; box-shadow: 0 16px 36px rgba(0, 0, 0, .35); }
	.d-step__card:hover { translate: 0 -5px; box-shadow: 0 14px 34px rgba(3, 193, 237, .3); }
	.d-about__card:hover { box-shadow: 0 0 24px rgba(3, 193, 237, .35); }
	.aai-acc__head:hover { filter: brightness(1.07); }
	.aai-acc__head:hover .aai-acc__icon img { scale: 1.08; }
	.d-video__box[data-aai-video]:hover { box-shadow: 0 20px 50px rgba(3, 193, 237, .25); }
}

@media (prefers-reduced-motion: reduce) {
	.aai-root *, .aai-root *::before, .aai-root *::after { animation: none !important; transition: none !important; }
}