/* ==========================================================================
   iNVEETO — site styles, v3 (calm light theme with night accents)
   Tokens → base → buttons → header & menus → hero → home sections → shared components →
   templates → editor content → closing → footer → motion.
   Logical properties throughout, so Arabic (RTL) mirrors without extra rules.
   ========================================================================== */

:root {
	color-scheme: light;
	/* surfaces */
	--paper: #FFFFFF;
	--mist: #F7F4FB;           /* lavender band */
	--mist-2: #EFE9F7;
	--white: #FFFFFF;          /* cards */
	--line: #ECE6F3;
	--line-2: #DCD3E8;
	--night: #120C22;          /* dark bands: hero, event day, closing */
	--night-2: #1B1233;
	/* text */
	--ink: #1D1830;
	--ink-2: #4E4666;
	--ink-3: #6B6482;
	--on: #FFFFFF;
	/* brand */
	--iris: #7D5BA6;
	--iris-deep: #5F3F8C;
	--iris-tint: #F2ECF9;
	--app: #6750A4;
	--lilac: #B9A2FF;
	--mint: #55D6BE;
	--mint-2: #8FF0DD;
	--mint-ink: #0E7A66;
	--mint-dark: #0E2A25;
	--mint-tint: #E4F8F3;
	--amber: #A86A12;
	--amber-tint: #FFF3DC;
	--rose: #B83A55;
	--rose-tint: #FCEBEF;

	/* type */
	--f-display: "Geist", "Readex Pro", system-ui, sans-serif;
	--f-text: "Geist", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono: "Geist Mono", "Readex Pro", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--f-app: Roboto, "Readex Pro", "Segoe UI", Arial, sans-serif;
	--fs-1: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
	--fs-2: clamp(2rem, 1.45rem + 2vw, 3.25rem);
	--fs-3: clamp(1.2rem, 1.1rem + .35vw, 1.375rem);
	--fs-body: 1.125rem;
	--fs-small: .94rem;
	--lh-tight: 1.06;
	--lh-text: 1.62;

	/* space */
	--s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--max: 76rem;
	--max-wide: 90rem;
	--measure: 62ch;
	--sec: clamp(4.5rem, 3rem + 5vw, 8rem);

	/* shape */
	--r-sm: 10px;
	--r: 14px;
	--r-lg: 20px;
	--shadow-sm: 0 1px 2px rgb(29 24 48 / 5%), 0 6px 18px -10px rgb(29 24 48 / 18%);
	--shadow: 0 2px 6px rgb(29 24 48 / 4%), 0 28px 60px -30px rgb(61 38 110 / 32%);
	--shadow-lg: 0 3px 10px rgb(29 24 48 / 5%), 0 50px 90px -40px rgb(61 38 110 / 40%);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--header-h: 76px;
	--hdr: var(--header-h); /* visible header height (0 while hidden), set by script */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); background: var(--paper); }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font-family: var(--f-text); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-text);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 650; line-height: var(--lh-tight); letter-spacing: -0.032em; margin: 0; color: var(--ink); text-wrap: balance; }
h3, h4 { letter-spacing: -0.02em; line-height: 1.18; font-weight: 620; }
p { margin: 0 0 var(--s2); text-wrap: pretty; }
a { color: var(--iris-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--iris); }
strong, b { font-weight: 600; }
ul, ol { padding-inline-start: 1.2em; }
[role="list"] { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--mint); color: var(--mint-dark); }
.inv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-skip { position: absolute; inset-inline-start: var(--s2); top: -4rem; z-index: 200; background: var(--iris); color: var(--on); padding: var(--s1) var(--s2); border-radius: var(--r-sm); }
.inv-skip:focus { top: var(--s2); color: var(--on); }
[lang="ar"], :lang(ar) { letter-spacing: 0; }
html[dir="rtl"] body, html[dir="rtl"] :is(h1, h2, h3, h4, button, input, select, textarea) { font-family: "Readex Pro", var(--f-text); letter-spacing: 0; }
html[dir="rtl"] :is(h1, h2, h3) { font-weight: 600; line-height: 1.32; }
html[dir="rtl"] { --fs-1: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); --fs-2: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem); }

.inv-wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.inv-wrap--narrow { width: min(46rem, 100% - 2 * var(--gutter)); }
.inv-ico { width: 1.25em; height: 1.25em; flex: none; }
.x-ico { width: 1.15em; height: 1.15em; flex: none; }
.inv-main { display: block; min-height: 60vh; }

/* ---------- buttons & links ---------- */
.inv-btn {
	--bg: var(--iris); --fg: var(--on); --bd: var(--iris);
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 52px; padding: .7em 1.55em;
	background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); border-radius: 10px;
	font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
	transition: background .3s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease), transform .35s var(--ease-out);
	cursor: pointer;
}
.inv-btn:hover { --bg: var(--iris-deep); --bd: var(--iris-deep); color: var(--fg); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgb(95 63 140 / 70%); }
.inv-btn:active { transform: translateY(0) scale(.99); }
.inv-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 25%) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat; transition: background-position .9s var(--ease); }
.inv-btn--primary:hover::after { background-position: 150% 0; }
.inv-btn--secondary { --bg: var(--white); --fg: var(--iris-deep); --bd: var(--line-2); }
.inv-btn--secondary:hover { --bg: var(--iris-tint); --fg: var(--iris-deep); --bd: var(--iris); box-shadow: none; }
.inv-btn--plain { --bg: transparent; --bd: transparent; --fg: var(--iris-deep); padding-inline: .4em; text-decoration: underline; text-underline-offset: .2em; }
.inv-btn--plain:hover { --bg: transparent; --bd: transparent; box-shadow: none; }
.inv-btn--sm { min-height: 44px; padding: .5em 1.2em; font-size: .95rem; }
/* on dark */
:is(.hx, .x-day, .x-cta, .is-style-ink, .inv-sec--ink) .inv-btn--primary { --bg: var(--mint); --fg: var(--mint-dark); --bd: var(--mint); box-shadow: 0 12px 34px -12px rgb(85 214 190 / 70%); }
:is(.hx, .x-day, .x-cta, .is-style-ink, .inv-sec--ink) .inv-btn--primary:hover { --bg: var(--mint-2); --bd: var(--mint-2); }
:is(.hx, .x-day, .x-cta, .is-style-ink, .inv-sec--ink) .inv-btn--secondary { --bg: transparent; --fg: var(--on); --bd: rgb(255 255 255 / 70%); }
:is(.hx, .x-day, .x-cta, .is-style-ink, .inv-sec--ink) .inv-btn--secondary:hover { --bg: rgb(255 255 255 / 10%); --bd: #fff; }

.inv-link { font-weight: 560; text-decoration: none; display: inline-flex; gap: .45em; align-items: center; color: var(--iris-deep); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease-out), color .2s; }
html[dir="rtl"] .inv-link { background-position: 100% 100%; }
.inv-link::after { content: "→"; color: var(--mint-ink); transition: transform .35s var(--ease-out); }
html[dir="rtl"] .inv-link::after { content: "←"; }
.inv-link:hover { color: var(--iris-deep); background-size: 100% 1.5px; }
.inv-link:hover::after { transform: translateX(4px); }
html[dir="rtl"] .inv-link:hover::after { transform: translateX(-4px); }

.inv-ctas { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.inv-ctas__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.inv-ctas__terms { margin: 0; font-size: var(--fs-small); color: var(--ink-3); display: flex; align-items: center; gap: .6em; }
.inv-ctas__terms::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-tint); flex: none; }
.inv-ctas--center { align-items: center; }
.inv-ctas--center .inv-ctas__buttons { justify-content: center; }

/* ---------- header: white bar, logo in its own colours ---------- */
.x-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 130; pointer-events: none; }
.x-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--iris), var(--mint)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
html[dir="rtl"] .x-progress i { transform-origin: 100% 50%; background: linear-gradient(-90deg, var(--iris), var(--mint)); }
.inv-header { position: sticky; top: 0; z-index: 100; background: rgb(255 255 255 / 97%); box-shadow: 0 1px 0 var(--line); transition: transform .5s var(--ease-out), box-shadow .3s; }
.admin-bar .inv-header { top: 32px; }
.inv-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 14px 30px -22px rgb(29 24 48 / 35%); }
.inv-header.is-hidden { transform: translateY(-105%); }
.inv-header__bar { position: relative; display: flex; align-items: center; gap: var(--s4); width: min(var(--max-wide), 100% - 2 * var(--gutter)); height: var(--header-h); margin-inline: auto; }
.inv-header__brand { display: block; flex: none; }
.inv-logo { display: inline-block; --logo-word: #7D5BA6; --logo-figure: #55D6BE; }
.inv-logo svg { height: 38px; width: auto; }
.inv-header__actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.inv-header__login, .inv-nav__login { font-size: .98rem; font-weight: 560; text-decoration: none; color: var(--ink); padding: .55rem .7rem; border-radius: 8px; }
.inv-header__login:hover, .inv-nav__login:hover { color: var(--iris); }

.inv-nav { display: flex; align-items: center; margin-inline-start: auto; }
.inv-nav__list { display: flex; gap: .2rem; align-items: center; }
.inv-nav__item { position: static; }
.inv-nav__link, .inv-nav__toggle {
	position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .8rem; border-radius: 8px;
	font: inherit; font-size: 1rem; font-weight: 520; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer;
	transition: color .2s;
}
.inv-nav__list > .inv-nav__item > :is(.inv-nav__link, .inv-nav__toggle)::after { content: ""; position: absolute; inset-inline: .8rem; bottom: .25rem; height: 2px; border-radius: 2px; background: var(--mint); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.inv-nav__link:hover, .inv-nav__toggle:hover, .inv-nav__toggle[aria-expanded="true"] { color: var(--iris); }
.inv-nav__list > .inv-nav__item > :is(.inv-nav__link:hover, .inv-nav__toggle:hover, .inv-nav__toggle[aria-expanded="true"], .inv-nav__link[aria-current="page"], .inv-nav__toggle[data-current])::after { transform: none; }
.inv-nav__toggle svg { transition: transform .3s var(--ease-out); color: var(--ink-3); }
.inv-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* mega panel */
.inv-mega { position: absolute; inset-inline: 0; top: calc(100% - 6px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .4s var(--ease-out), visibility .25s; }
.inv-mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.inv-nav__item.is-open > .inv-mega { opacity: 1; visibility: visible; transform: none; }
.inv-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: .6rem; padding: .7rem; border-radius: 18px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-lg); }
.inv-nav__sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2px; padding: .2rem; }
.inv-nav__sub .inv-nav__link { display: flex; gap: .9rem; align-items: flex-start; border-radius: 12px; padding: .8rem .9rem; width: 100%; transition: background .2s; }
.inv-nav__sub .inv-nav__link:hover { background: var(--mist); color: var(--ink); }
.inv-nav__ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; color: var(--iris); background: var(--iris-tint); transition: color .25s, background .25s, transform .4s var(--ease-out); }
.inv-nav__sub .inv-nav__link:hover .inv-nav__ico { color: var(--mint-dark); background: var(--mint); transform: rotate(-6deg); }
.inv-nav__txt { display: grid; gap: .1rem; }
.inv-nav__sub .inv-nav__label { font-weight: 600; font-size: .98rem; }
.inv-nav__desc { font-size: .86rem; color: var(--ink-3); line-height: 1.4; font-weight: 400; }
.inv-mega__card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: 1.5rem; border-radius: 14px; min-height: 15rem; color: var(--on);
	background: radial-gradient(18rem 14rem at 100% 0%, rgb(85 214 190 / 35%), transparent 70%), radial-gradient(16rem 12rem at 0% 100%, rgb(185 162 255 / 30%), transparent 70%), var(--night); }
.inv-mega__card::before { content: ""; position: absolute; width: 22rem; height: 22rem; inset-inline-end: -9rem; top: -9rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 0 0 40px rgb(255 255 255 / 3%), 0 0 0 80px rgb(255 255 255 / 2%); }
.inv-mega__card > * { position: relative; }
.inv-mega__kicker { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--mint); }
.inv-mega__title { font-family: var(--f-display); font-size: 1.22rem; font-weight: 620; line-height: 1.25; letter-spacing: -.015em; }
.inv-mega__card p { font-size: .9rem; color: rgb(255 255 255 / 75%); margin: 0 0 .4rem; }
.inv-mega__card .inv-link { align-self: flex-start; font-size: .95rem; color: #fff; }
.inv-mega__card .inv-link::after { color: var(--mint); }
.inv-nav__extra { display: none; }

.inv-lang { display: flex; gap: .25rem; }
.inv-lang a { font-size: .92rem; text-decoration: none; padding: .4rem .8rem; border-radius: 999px; color: var(--ink-2); }
.inv-lang a[aria-current] { color: var(--ink); background: var(--mist); }
.inv-lang--switch a { color: var(--ink); font-weight: 520; box-shadow: inset 0 0 0 1px var(--line-2); min-height: 36px; display: inline-flex; align-items: center; transition: box-shadow .2s, color .2s; }
.inv-lang--switch a:hover { color: var(--iris); box-shadow: inset 0 0 0 1px var(--iris); }
.inv-lang a[lang="ar"] { font-family: "Readex Pro", var(--f-text); }
.inv-menu-btn { display: none; }
@media (max-width: 1240px) { .inv-header__bar { gap: var(--s3); } }
@media (max-width: 1100px) { .inv-header__login { display: none; } .inv-nav__link, .inv-nav__toggle { padding-inline: .6rem; } }

/* mobile: full-screen menu */
@media (max-width: 980px) {
	:root { --header-h: 66px; }
	.inv-logo svg { height: 32px; }
	.inv-menu-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--mist); border: 1px solid var(--line); cursor: pointer; color: var(--ink); }
	.inv-menu-btn__bars { display: grid; gap: 6px; width: 18px; }
	.inv-menu-btn__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease-out); }
	.inv-menu-btn[aria-expanded="true"] .inv-menu-btn__bars i:first-child { transform: translateY(4px) rotate(45deg); }
	.inv-menu-btn[aria-expanded="true"] .inv-menu-btn__bars i:last-child { transform: translateY(-4px) rotate(-45deg); }
	.inv-nav {
		position: fixed; inset: var(--header-h) 0 0; z-index: -1; margin: 0;
		padding: 1.25rem var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
		flex-direction: column; align-items: stretch; justify-content: space-between; overflow-y: auto; gap: var(--s4);
		background: var(--white); border-top: 1px solid var(--line);
		clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease-out), visibility 0s .6s;
	}
	.admin-bar .inv-nav { top: calc(var(--header-h) + 46px); }
	.inv-nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s; }
	.inv-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.inv-nav__list > .inv-nav__item { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .7s var(--ease-out); transition-delay: calc(.1s + var(--i, 0) * .06s); border-bottom: 1px solid var(--line); }
	.inv-nav.is-open .inv-nav__list > .inv-nav__item { opacity: 1; transform: none; }
	.inv-nav__list > .inv-nav__item > .inv-nav__link, .inv-nav__toggle { width: 100%; justify-content: space-between; padding: 1rem .1rem; border-radius: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
	.inv-nav__list > .inv-nav__item > :is(.inv-nav__link, .inv-nav__toggle)::after { display: none; }
	.inv-nav__toggle svg { width: 18px; height: 18px; }
	.inv-mega { position: static; opacity: 1; visibility: visible; transform: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
	.inv-mega::before { display: none; }
	.inv-nav__item.is-open > .inv-mega { grid-template-rows: 1fr; }
	.inv-mega__inner { overflow: hidden; min-height: 0; display: block; padding: 0; border: 0; background: none; box-shadow: none; }
	.inv-mega__card { display: none; }
	.inv-nav__sub { grid-template-columns: 1fr 1fr; gap: .2rem; padding: 0 0 1rem; }
	.inv-nav__sub .inv-nav__link { padding: .55rem .3rem; gap: .6rem; align-items: center; }
	.inv-nav__sub .inv-nav__desc { display: none; }
	.inv-nav__ico { width: 2.1rem; height: 2.1rem; border-radius: 9px; }
	.inv-nav__extra { display: grid; gap: .7rem; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease) .4s, transform .7s var(--ease-out) .4s; }
	.inv-nav.is-open .inv-nav__extra { opacity: 1; transform: none; }
	.inv-nav__extra .inv-btn { width: 100%; min-height: 54px; font-size: 1.05rem; }
	.inv-nav__meta { display: flex; justify-content: space-between; align-items: center; padding-top: .4rem; }
	body.nav-open { overflow: hidden; }
	body.nav-open .inv-header__actions .inv-btn { opacity: 0; pointer-events: none; }
}
@media (max-width: 420px) {
	.inv-header .inv-btn--sm { padding-inline: .8em; font-size: .88rem; }
	.inv-nav__sub { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero — Organize · Select · Invite · Confirm
   ========================================================================== */
.hx { --hx-h: calc(100svh - var(--header-h)); position: relative; overflow: hidden; isolation: isolate; min-height: max(40rem, min(var(--hx-h), 58rem)); display: flex; align-items: center; background: var(--night); color: var(--on); padding: clamp(2rem, 4vh, 3.5rem) 0 clamp(3rem, 6vh, 4.5rem); }
.hx__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hx__vid { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); max-width: none; object-fit: cover; object-position: 50% 40%; filter: blur(2.5px) saturate(.95) brightness(.78); transform: scale(1.04); animation: hx-zoom 18s var(--ease) both; }
@keyframes hx-zoom { from { transform: scale(1.12); } }
.hx__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; background: radial-gradient(45% 55% at 90% 14%, rgb(85 214 190 / 38%) 0%, rgb(85 214 190 / 10%) 45%, transparent 70%), radial-gradient(55% 45% at 78% 100%, rgb(185 162 255 / 22%) 0%, transparent 70%); }
.hx__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background:
	linear-gradient(90deg, rgb(14 9 28 / 96%) 0%, rgb(20 13 38 / 90%) 30%, rgb(28 18 52 / 62%) 52%, rgb(34 22 62 / 42%) 75%, rgb(34 22 62 / 36%) 100%),
	linear-gradient(0deg, rgb(14 9 28 / 80%) 0%, transparent 34%),
	linear-gradient(180deg, rgb(14 9 28 / 50%) 0%, transparent 20%); }
html[dir="rtl"] .hx__bg::after { background:
	linear-gradient(-90deg, rgb(14 9 28 / 96%) 0%, rgb(20 13 38 / 90%) 30%, rgb(28 18 52 / 62%) 52%, rgb(34 22 62 / 42%) 75%, rgb(34 22 62 / 36%) 100%),
	linear-gradient(0deg, rgb(14 9 28 / 80%) 0%, transparent 34%), linear-gradient(180deg, rgb(14 9 28 / 50%) 0%, transparent 20%); }
.hx__in { position: relative; width: 100%; max-width: var(--max-wide); margin: 0 auto; padding: 0 max(var(--gutter), 3vw); display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr); align-items: center; gap: clamp(1.75rem, 3.5vw, 4rem); }
.hx__text { will-change: transform, opacity; }
.hx__kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 clamp(.9rem, 2.2vh, 1.5rem); font-size: clamp(.8rem, .9vw, .95rem); font-weight: 600; letter-spacing: .02em; color: var(--mint); }
.hx__bars { display: inline-flex; gap: 3px; transform: skewX(-18deg); }
html[dir="rtl"] .hx__bars { transform: skewX(18deg); }
.hx__bars b { width: 7px; height: 14px; border-radius: 2px; background: var(--iris); }
.hx__bars b:nth-child(2) { background: var(--mint); } .hx__bars b:nth-child(3) { background: var(--lilac); }
.hx__title { margin: 0 0 clamp(.9rem, 2.2vh, 1.5rem); max-width: 9.6em; font-size: clamp(2.4rem, 3.6vw, 4.1rem); line-height: 1.05; letter-spacing: -.038em; font-weight: 650; color: var(--on); }
html[dir="rtl"] .hx__title { font-size: clamp(2.2rem, 3.2vw, 3.6rem); line-height: 1.3; max-width: 11em; }
.hx__title .hl { color: var(--mint); }
.hx__title .ul { position: relative; white-space: nowrap; }
.hx__title .ul::after { content: ""; position: absolute; inset-inline: 0; bottom: -.04em; height: .09em; border-radius: 2px; background: var(--mint); transform-origin: left center; transform: scaleX(0); transition: transform 1s var(--ease-out) .9s; }
html[dir="rtl"] .hx__title .ul::after { transform-origin: right center; bottom: -.1em; }
.hx.is-ready .hx__title .ul::after { transform: scaleX(1); }
.hx__lead { margin: 0 0 clamp(1.25rem, 3.2vh, 2rem); max-width: 33em; font-size: clamp(1.02rem, 1.1vw, 1.2rem); line-height: 1.6; color: rgb(255 255 255 / 82%); }
.hx .inv-ctas__terms { color: rgb(255 255 255 / 62%); font-size: .9rem; }
.hx .inv-ctas__terms::before { box-shadow: 0 0 0 4px rgb(85 214 190 / 20%); }
.hx__proof { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: clamp(1.6rem, 4.5vh, 3rem) 0 0; padding: 0; }
.hx__proof > div { padding: 0 clamp(.9rem, 1.7vw, 1.9rem); border-inline-start: 1px solid rgb(255 255 255 / 20%); max-width: 15em; }
.hx__proof > div:first-child { padding-inline-start: 0; border: 0; }
.hx__proof dt { font-size: clamp(1.5rem, 2vw, 2.25rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.hx__proof dd { margin: 0; font-size: clamp(.78rem, .9vw, .94rem); line-height: 1.4; color: #B9E9DF; }
/* entrance of the text column */
.hx__kicker, .hx__lead, .hx .inv-ctas, .hx__proof { animation: hx-up .9s var(--ease-out) backwards; }
.hx__kicker { animation-delay: .05s; } .hx__lead { animation-delay: .45s; } .hx .inv-ctas { animation-delay: .6s; } .hx__proof { animation-delay: .75s; }
@keyframes hx-up { from { opacity: 0; transform: translateY(18px); } }
.hx__bars b { animation: hx-bar .6s var(--spring) backwards; } .hx__bars b:nth-child(2) { animation-delay: .12s; } .hx__bars b:nth-child(3) { animation-delay: .24s; }
@keyframes hx-bar { from { transform: scaleY(0); } }

/* the ring and the mark */
.hx__art { position: relative; width: 100%; opacity: 0; transform: translateY(16px); direction: ltr; }
.hx.is-ready .hx__art { opacity: 1; transform: none; transition: opacity 1s .2s, transform 1s var(--ease-out) .2s; }
.hx__scene { position: relative; width: 100%; aspect-ratio: 900 / 600; --px: 0; --py: 0; }
.hx__rings { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; transform: translate(calc(var(--px) * -8px), calc(var(--py) * -6px)); transition: transform .8s var(--ease-out); }
.hx__rings .track { fill: none; stroke-width: 2; stroke-linecap: round; opacity: .55; transition: opacity .5s, stroke-width .5s; }
.hx__rings .track.on { opacity: 1; stroke-width: 6; }
.hx__rings .node-glow { filter: blur(6px); }
.hx__disc { position: absolute; z-index: 2; left: 56.7%; top: 29%; width: 16.7%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
	background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #F6F1FF 45%, #E7DDF8 100%); border: 1px solid rgb(255 255 255 / 90%);
	box-shadow: inset 0 -16px 36px rgb(125 91 166 / 25%), 0 0 0 6px rgb(255 255 255 / 8%), 0 0 50px rgb(85 214 190 / 35%), 0 24px 50px rgb(0 0 0 / 40%);
	transform: translate(calc(var(--px) * -4px), calc(var(--py) * -3px)); transition: transform .8s var(--ease-out), box-shadow .8s; }
.hx__disc.ping { box-shadow: inset 0 -16px 36px rgb(125 91 166 / 25%), 0 0 0 6px rgb(85 214 190 / 28%), 0 0 70px rgb(85 214 190 / 60%), 0 24px 50px rgb(0 0 0 / 40%); }
.hx__glare { position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: linear-gradient(135deg, rgb(255 255 255 / 55%) 0%, transparent 42%); pointer-events: none; }
.hx__mark { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-46%, -52%); overflow: visible; filter: drop-shadow(0 6px 10px rgb(60 30 110 / 18%)); }
.mk { transform-box: fill-box; }
.mk--i, .mk--n, .mk--dot { fill: var(--iris); }
.mk--fig { fill: var(--mint); transform-origin: 50% 100%; }
.hx.is-ready .mk--i { animation: mk-fall 1.1s .55s backwards; }
.hx.is-ready .mk--n { animation: mk-fall 1.1s .68s backwards; }
.hx.is-ready .mk--fig { animation: mk-grow .8s var(--ease-out) 1.25s backwards; }
.hx.is-ready .mk--dot { animation: mk-fall 1s 1.75s backwards; }
@keyframes mk-fall {
	0% { transform: translateY(-1100px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
	10% { opacity: 1; }
	68% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
	82% { transform: translateY(-36px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
	100% { transform: translateY(0); }
}
@keyframes mk-grow { from { transform: scaleY(0); } }
.hx__dust { position: absolute; inset: -12% -8% -2%; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(70% 70%, #000 55%, transparent 100%); mask-image: radial-gradient(70% 70%, #000 55%, transparent 100%); }
.hx__dust i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; animation: hx-rise var(--d) linear var(--dl) infinite; }
.hx__dust i.m { background: #DFFFF8; box-shadow: 0 0 8px 2px rgb(85 214 190 / 85%); }
.hx__dust i.l { background: #F3EDFF; box-shadow: 0 0 9px 2px rgb(185 162 255 / 85%); }
.hx__dust i.b { background: rgb(223 255 248 / 18%); box-shadow: 0 0 18px 6px rgb(85 214 190 / 18%); filter: blur(1.5px); }
@keyframes hx-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 18% { opacity: .85; } 70% { opacity: .55; } 100% { transform: translate3d(8px, calc(var(--h) * -1), 0); opacity: 0; } }
.hx__art.is-off .hx__dust i, .hx__art.is-off .hx__vid { animation-play-state: paused; }

/* the four steps around the ring */
.hx__steps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hx__step { position: absolute; left: 70%; top: 10%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 7px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 28%);
	background: rgb(20 14 36 / 55%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 600 clamp(.8rem, 1vw, 1rem) var(--f-text); cursor: pointer; pointer-events: auto; min-height: 40px;
	transition: background .5s, border-color .5s, transform .5s var(--ease-out), box-shadow .5s; }
html[dir="rtl"] .hx__step { font-family: "Readex Pro", var(--f-text); }
.hx__step i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: .75rem; background: rgb(255 255 255 / 12%); transition: background .5s, color .5s; }
.hx__step.on { background: rgb(85 214 190 / 20%); border-color: rgb(85 214 190 / 90%); transform: scale(1.08); box-shadow: 0 0 28px rgb(85 214 190 / 35%); }
.hx__step.on i { background: var(--mint); color: var(--mint-dark); }
.hx__step.done i { background: rgb(85 214 190 / 35%); }
.hx__step:focus-visible { outline-color: var(--mint); }

/* the live panel that acts each word out */
.hx__act { position: absolute; z-index: 3; left: 0; bottom: 3%; width: 41%; min-height: 46%; }
html[dir="rtl"] .hx__act { direction: rtl; }
.hx__pane { position: absolute; inset: 0 auto auto 0; width: 100%; display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 1.3vw, 20px); border-radius: 16px;
	background: linear-gradient(135deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 5%)); border: 1px solid rgb(255 255 255 / 22%); box-shadow: 0 24px 50px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(255 255 255 / 18%);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; visibility: hidden;
	transition: opacity .55s var(--ease), transform .7s var(--ease-out), visibility 0s .7s; }
.hx__act[data-step="0"] .hx__pane--0, .hx__act[data-step="1"] .hx__pane--1, .hx__act[data-step="2"] .hx__pane--2, .hx__act[data-step="3"] .hx__pane--3 { opacity: 1; transform: none; visibility: visible; transition-delay: .15s, .15s, 0s; }
.hx__ph { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.hx__ph b { font-size: clamp(1rem, 1.4vw, 1.4rem); font-weight: 650; letter-spacing: -.01em; }
.hx__ph span { font-size: clamp(.75rem, .9vw, .88rem); color: rgb(255 255 255 / 72%); }
.hx__foot { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: clamp(.75rem, .9vw, .88rem); color: rgb(255 255 255 / 75%); }
.hx__foot b { color: #fff; font-size: 1.12em; font-variant-numeric: tabular-nums; }
.hx__rows { display: grid; gap: 6px; }
.hx__rows li { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: 10px; background: rgb(255 255 255 / 8%); font-size: clamp(.78rem, .95vw, .9rem); }
.hx__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; background: rgb(255 255 255 / 18%); flex: none; }
.hx__tag { font-style: normal; margin-inline-start: auto; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: rgb(255 255 255 / 14%); color: #fff; white-space: nowrap; }
.hx__tag--p { background: #7D5BA6; } .hx__tag--c { background: #3F8F86; } .hx__tag--v { background: #B9A2FF; color: #20123D; } .hx__tag--m { background: #5B6B9A; }
.hx__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hx__chips .hx__tag { margin: 0; opacity: .55; transition: opacity .4s, box-shadow .4s; }
.hx__cb { width: 16px; height: 16px; border-radius: 4px; border: 1.6px solid rgb(255 255 255 / 60%); flex: none; display: grid; place-items: center; }
.hx__cb::after { content: "✓"; font-size: 11px; line-height: 1; color: var(--mint-dark); opacity: 0; }
.hx__mails { position: relative; height: 112px; }
.hx__mail { position: absolute; inset-inline-start: 0; top: 0; width: 82%; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fff; color: #222; box-shadow: 0 10px 24px rgb(0 0 0 / 30%); border-top: 3px solid var(--app); font-size: 12px; }
.hx__mail b { font-size: 13.5px; color: #3C2A6B; } .hx__mail span { color: #666; }
.hx__mail:nth-child(2) { top: 14px; inset-inline-start: 6%; } .hx__mail:nth-child(3) { top: 28px; inset-inline-start: 12%; }
.hx__bar { display: inline-block; width: 70px; height: 5px; border-radius: 5px; background: rgb(255 255 255 / 18%); overflow: hidden; }
.hx__bar > i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .hx__bar > i { transform-origin: right; }
.hx__st { font-style: normal; margin-inline-start: auto; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--mint); color: var(--mint-dark); opacity: 0; transform: scale(.6); }
.hx__st::after { content: " ✓"; }
/* what each word does, replayed every time its step comes round */
.hx__act.go[data-step="0"] .hx__rows--org li { animation: hx-sort .9s var(--ease-out) .45s backwards; }
@keyframes hx-sort { from { transform: translateY(calc((var(--o) - var(--i)) * 40px)); opacity: .5; } }
.hx__act.go[data-step="0"] .hx__rows--org .hx__tag { animation: hx-pop .45s var(--spring) backwards; animation-delay: calc(1.3s + var(--i) * .12s); }
@keyframes hx-pop { from { transform: scale(.3); opacity: 0; } }
.hx__act.go[data-step="1"] .hx__chips .is-on { animation: hx-chip .5s var(--ease) .4s forwards; }
@keyframes hx-chip { to { opacity: 1; box-shadow: 0 0 0 2px rgb(255 255 255 / 70%); } }
.hx__act.go[data-step="1"] .hx__rows--sel .hx__cb { animation: hx-tick .3s var(--ease) forwards; }
.hx__act.go[data-step="1"] .hx__rows--sel li:nth-child(1) .hx__cb { animation-delay: .9s; } .hx__act.go[data-step="1"] .hx__rows--sel li:nth-child(2) .hx__cb { animation-delay: 1.15s; } .hx__act.go[data-step="1"] .hx__rows--sel li:nth-child(3) .hx__cb { animation-delay: 1.4s; }
@keyframes hx-tick { to { background: var(--mint); border-color: var(--mint); } }
.hx__act.go[data-step="1"] .hx__rows--sel .hx__cb::after { animation: hx-show .2s linear forwards; animation-delay: inherit; }
@keyframes hx-show { to { opacity: 1; } }
.hx__act.go[data-step="2"] .hx__mail { animation: hx-fly 1.3s var(--ease-out) forwards; }
.hx__act.go[data-step="2"] .hx__mail:nth-child(3) { animation-delay: .5s; } .hx__act.go[data-step="2"] .hx__mail:nth-child(2) { animation-delay: 1s; } .hx__act.go[data-step="2"] .hx__mail:nth-child(1) { animation-delay: 1.5s; }
@keyframes hx-fly { 0% { transform: none; opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(120%, -30px) rotate(6deg) scale(.7); opacity: 0; } }
html[dir="rtl"] .hx__act.go[data-step="2"] .hx__mail { animation-name: hx-fly-rtl; }
@keyframes hx-fly-rtl { 0% { transform: none; opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(-120%, -30px) rotate(-6deg) scale(.7); opacity: 0; } }
.hx__act.go[data-step="2"] .hx__bar > i { animation: hx-fill 2.2s var(--ease-out) .4s forwards; }
@keyframes hx-fill { to { transform: scaleX(1); } }
.hx__act.go[data-step="3"] .hx__st { animation: hx-stamp .5s var(--spring) forwards; }
.hx__act.go[data-step="3"] li:nth-child(1) .hx__st { animation-delay: .5s; } .hx__act.go[data-step="3"] li:nth-child(2) .hx__st { animation-delay: .95s; } .hx__act.go[data-step="3"] li:nth-child(3) .hx__st { animation-delay: 1.4s; }
@keyframes hx-stamp { to { opacity: 1; transform: none; } }
.hx__act.go[data-step="3"] .hx__rows--conf li { animation: hx-glow 2.2s var(--ease) .5s backwards; }
@keyframes hx-glow { 30% { background: rgb(85 214 190 / 22%); } }
/* scroll cue */
.hx__down { position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; translate: -50% 0; width: 26px; height: 40px; border-radius: 14px; border: 1.5px solid rgb(255 255 255 / 45%); display: grid; justify-items: center; padding-top: 7px; opacity: .8; transition: opacity .3s, border-color .3s; }
.hx__down:hover { opacity: 1; border-color: var(--mint); }
.hx__down i { width: 3px; height: 8px; border-radius: 3px; background: var(--mint); animation: hx-cue 1.8s var(--ease) infinite; }
@keyframes hx-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 900px) {
	.hx { min-height: 0; display: block; padding: 1.75rem 0 2.5rem; }
	.hx__bg::after, html[dir="rtl"] .hx__bg::after { background: linear-gradient(180deg, rgb(14 9 28 / 94%) 0%, rgb(20 13 38 / 88%) 55%, rgb(20 13 38 / 76%) 100%); }
	.hx__in { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.hx__title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
	html[dir="rtl"] .hx__title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
	.hx__proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hx__proof > div { padding: 0 .6rem; } .hx__proof dd { font-size: .74rem; }
	.hx__scene { aspect-ratio: auto; height: 600px; max-width: 460px; margin: 0 auto; }
	.hx__rings { top: 0; height: 56%; transform: none; }
	.hx__act { left: 0; right: 0; width: auto; bottom: 0; min-height: 0; height: 42%; }
	.hx__step { font-size: .78rem; padding: 5px 11px 5px 5px; min-height: 34px; }
	.hx__step i { width: 22px; height: 22px; }
	.hx__down { display: none; }
}

/* ==========================================================================
   Home sections
   ========================================================================== */
.x-kicker { display: inline-flex; align-items: center; gap: .7rem; font-size: .9rem; font-weight: 650; letter-spacing: .02em; color: var(--iris); margin: 0 0 var(--s2); }
.x-kicker::before { content: ""; width: 27px; height: 13px; flex: none; transform: skewX(-18deg); background: linear-gradient(90deg, var(--iris) 0 7px, transparent 7px 10px, var(--mint) 10px 17px, transparent 17px 20px, var(--lilac) 20px 27px); border-radius: 2px; }
html[dir="rtl"] .x-kicker::before { transform: skewX(18deg); }
.x-h2 { font-size: var(--fs-2); letter-spacing: -.035em; max-width: 20ch; }
.x-lede { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); max-width: 46ch; margin: var(--s3) 0 0; }

/* trust strip */
.x-trust { background: var(--white); border-bottom: 1px solid var(--line); }
.x-trust__in { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); padding-block: 1.6rem; width: min(var(--max-wide), 100% - 2 * var(--gutter)); }
.x-trust__h { flex: none; font-family: var(--f-text); font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.x-trust__list { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem clamp(1.25rem, 3vw, 2.8rem); }
.x-trust__list a { display: grid; text-decoration: none; color: #4A4360; line-height: 1.2; transition: color .25s; }
.x-trust__list b { font-size: clamp(1rem, 1.1vw, 1.15rem); font-weight: 680; letter-spacing: -.01em; }
.x-trust__list small { font-size: .78rem; color: var(--ink-3); }
.x-trust__list a:hover { color: var(--iris); }
@media (max-width: 900px) { .x-trust__in { flex-direction: column; align-items: flex-start; gap: .9rem; } .x-trust__list { gap: .8rem 1.4rem; } }

/* three layers */
.x-layers { padding-block: var(--sec); background: linear-gradient(180deg, var(--white), var(--mist) 46%, var(--white)); }
.x-layers__head { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.x-layers__head .x-h2 { max-width: 22ch; }
.x-layers__head .x-lede { margin-inline: auto; }
.x-layers__nav { position: sticky; top: calc(var(--hdr) + .9rem); z-index: 20; display: inline-flex; gap: .3rem; margin-top: var(--s4); padding: .35rem; border-radius: 999px; background: rgb(255 255 255 / 92%); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); backdrop-filter: blur(10px); transition: top .5s var(--ease-out); }
.x-layers__nav a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem .4rem .45rem; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .95rem; transition: background .35s, color .35s; }
html[dir="rtl"] .x-layers__nav a { padding: .4rem .45rem .4rem 1rem; }
.x-layers__nav .x-layers__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mist-2); font-size: .75rem; font-family: var(--f-mono); transition: background .35s, color .35s; }
.x-layers__nav .x-ico { display: none; }
.x-layers__nav a:hover { color: var(--iris); }
.x-layers__nav a.is-on { background: var(--night); color: #fff; }
.x-layers__nav a.is-on .x-layers__n { background: var(--mint); color: var(--mint-dark); }
.x-layers__rows { display: grid; gap: clamp(4rem, 3rem + 5vw, 8rem); }
.x-layer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; scroll-margin-top: calc(var(--header-h) + 6rem); }
.x-layer:nth-child(even) .x-layer__text { order: 2; }
.x-layer__k { display: flex; align-items: center; gap: .7rem; margin: 0 0 var(--s2); font-weight: 650; }
.x-layer__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--night); color: var(--mint); font-family: var(--f-mono); font-size: .85rem; }
.x-layer__name { font-size: 1.05rem; color: var(--ink); }
.x-layer__verb { font-size: .82rem; font-weight: 600; color: var(--iris); padding: .25rem .65rem; border-radius: 999px; background: var(--iris-tint); }
.x-layer__h { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem); letter-spacing: -.03em; max-width: 17ch; margin-bottom: var(--s2); }
.x-layer__p { color: var(--ink-2); max-width: 44ch; font-size: 1.08rem; }
.x-layer .inv-ticks { margin: var(--s3) 0 var(--s4); }
.x-layer__scene { position: relative; display: grid; justify-items: center; }
.x-layer__scene::before { content: ""; position: absolute; z-index: 0; width: 86%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; translate: -50% -50%; background: radial-gradient(closest-side, rgb(185 162 255 / 30%), rgb(85 214 190 / 10%) 60%, transparent); }
.x-layer__scene::after { content: ""; position: absolute; z-index: 0; width: 74%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; translate: -50% -50%; border: 1px dashed rgb(125 91 166 / 25%); animation: x-turn 60s linear infinite; }
@keyframes x-turn { to { rotate: 360deg; } }
@media (max-width: 900px) {
	.x-layers__nav { display: flex; width: 100%; justify-content: space-between; }
	.x-layers__nav a { padding-inline: .35rem .7rem; font-size: .85rem; gap: .35rem; }
	.x-layers__nav .x-layers__n { width: 26px; height: 26px; }
	.x-layer { grid-template-columns: 1fr; gap: var(--s4); }
	.x-layer:nth-child(even) .x-layer__text { order: 0; }
}
@media (max-width: 400px) { .x-layers__nav .x-layers__n { display: none; } .x-layers__nav a { padding-inline: .7rem; } }

/* app replicas (look of the real product: Material purple, Roboto) */
.ap { position: relative; z-index: 1; width: min(100%, 34rem); margin: 0; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-family: var(--f-app); font-size: .9rem; color: #1C1B1F; overflow: hidden; text-align: start; }
.ap-bar { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid #EEE9F4; }
.ap-bar > b { font-weight: 500; font-size: 1rem; }
.ap-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--iris-tint); }
.ap-mark { width: 14px; height: auto; overflow: visible; }
.ap-pill { font-size: .75rem; color: #49454F; padding: .2rem .6rem; border-radius: 6px; background: #F3EDF7; }
.ap-btn { margin-inline-start: auto; font-size: .78rem; font-weight: 500; letter-spacing: .02em; padding: .45rem .95rem; border-radius: 999px; background: var(--app); color: #fff; }
.ap-search { display: flex; align-items: center; gap: .6rem; margin: .8rem 1rem .6rem; padding: .55rem .8rem; border-radius: 999px; background: #F3EDF7; color: #79747E; font-size: .82rem; }
.ap-dupe { display: flex; align-items: center; gap: .6rem; margin: 0 1rem .6rem; padding: .55rem .7rem; border-radius: 10px; background: var(--amber-tint); color: #5C3B00; font-size: .8rem; transition: background .6s, color .6s; }
.ap-dupe__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgb(255 255 255 / 70%); flex: none; }
.ap-dupe b { font-weight: 500; margin-inline-end: .3rem; }
.ap-dupe__btn { margin-inline-start: auto; font-weight: 500; padding: .25rem .7rem; border-radius: 999px; background: #fff; color: var(--app); box-shadow: 0 1px 2px rgb(0 0 0 / 10%); }
.ap-list { padding: 0 .5rem .6rem; }
.ap-row { display: grid; grid-template-columns: 32px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem .5rem; border-radius: 10px; }
.ap-row + .ap-row { border-top: 1px solid #F1ECF6; }
.ap-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, #EADDFF, #D6F6EF); color: #4F378B; font-size: .72rem; font-weight: 600; font-style: normal; flex: none; }
.ap-name { display: grid; line-height: 1.25; min-width: 0; }
.ap-name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-name i { justify-self: start; font-style: normal; font-family: "Readex Pro", sans-serif; color: #79747E; font-size: .78rem; }
.ap-org { color: #49454F; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tags { display: flex; gap: .3rem; justify-content: flex-end; }
.ap-tag { font-style: normal; font-size: .7rem; font-weight: 500; padding: .18rem .55rem; border-radius: 6px; background: #EFEAF4; color: #49454F; white-space: nowrap; }
.ap-tag--p { background: #EADDFF; color: #4F378B; } .ap-tag--c { background: #D3F5EE; color: #0E5E52; } .ap-tag--v { background: #FFE8B8; color: #6B4600; } .ap-tag--m { background: #DDE3F6; color: #2E3E6B; }
.ap-mono { font-family: var(--f-mono); font-size: .78rem; }
/* event */
.ap-ev { padding: 1rem; display: grid; gap: .9rem; }
.ap-ev__top { position: relative; display: flex; align-items: center; gap: .8rem; }
.ap-ev__date { display: grid; place-items: center; width: 50px; height: 54px; border-radius: 12px; background: var(--app); color: #fff; line-height: 1; flex: none; }
.ap-ev__date b { font-size: 1.3rem; font-weight: 500; } .ap-ev__date small { font-size: .7rem; text-transform: uppercase; opacity: .85; }
.ap-ev__t { display: grid; gap: .15rem; min-width: 0; }
.ap-ev__t b { font-weight: 500; font-size: 1rem; }
.ap-ev__t small { color: #49454F; font-size: .78rem; }
.ap-ev__more { margin-inline-start: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #49454F; transition: background .3s; }
.ap-menu { position: absolute; inset-inline-end: 0; top: 40px; z-index: 3; min-width: 10.5rem; padding: .35rem 0; border-radius: 8px; background: #fff; box-shadow: 0 6px 24px rgb(29 24 48 / 22%), 0 0 0 1px #EEE9F4; transform-origin: top right; transform: scale(.85); opacity: 0; }
html[dir="rtl"] .ap-menu { transform-origin: top left; }
.ap-menu li { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .85rem; color: #1C1B1F; }
.ap-menu li .x-ico { color: var(--app); }
.ap-ev__counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; }
.ap-ev__counts div { padding: .65rem .75rem; border-radius: 12px; background: #F7F2FA; display: flex; flex-direction: column-reverse; }
.ap-ev__counts dt { font-size: .72rem; color: #49454F; }
.ap-ev__counts dd { margin: 0; font-size: 1.45rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ap-ev__counts .is-mint { background: var(--mint-tint); } .ap-ev__counts .is-mint dd { color: var(--mint-ink); }
.ap-ev__bar { height: 6px; border-radius: 6px; background: #EFEAF4; overflow: hidden; }
.ap-ev__bar i { display: block; height: 100%; width: 68%; border-radius: inherit; background: linear-gradient(90deg, var(--app), var(--mint)); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .ap-ev__bar i { transform-origin: right; background: linear-gradient(-90deg, var(--app), var(--mint)); }
.ap-rsvp { display: grid; gap: .35rem; }
.ap-rsvp li { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem; border-radius: 8px; font-size: .84rem; }
.ap-rsvp li + li { border-top: 1px solid #F1ECF6; }
.ap-st { font-style: normal; font-size: .72rem; font-weight: 500; padding: .2rem .6rem; border-radius: 999px; }
.ap-st--ok { background: #EADDFF; color: #4F378B; } .ap-st--in { background: var(--mint-tint); color: var(--mint-ink); } .ap-st--maybe { background: var(--amber-tint); color: #6B4600; }
.ap-toast { position: absolute; z-index: 4; inset-inline: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: 10px; background: #322F35; color: #F4EFF4; font-size: .82rem; box-shadow: 0 10px 30px rgb(0 0 0 / 30%); opacity: 0; transform: translateY(20px); }
.ap-toast .x-ico { color: var(--mint); }
.ap-toast b { font-weight: 500; color: #fff; }
/* campaign */
.ap-cp { padding: 1rem; display: grid; gap: .75rem; }
.ap-cp__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .6rem; align-items: center; padding-bottom: .65rem; border-bottom: 1px solid #F1ECF6; }
.ap-cp__k { color: #79747E; font-size: .8rem; }
.ap-cp__v { display: flex; flex-wrap: wrap; gap: .35rem; overflow-wrap: anywhere; }
.ap-mailcard { display: grid; gap: .5rem; padding-bottom: .9rem; border-radius: 12px; border: 1px solid #EEE9F4; overflow: hidden; }
.ap-mailcard__band { display: flex; align-items: flex-end; height: 5.5rem; padding: .8rem 1rem; color: #fff; font-weight: 500; font-size: 1.05rem; background: radial-gradient(14rem 8rem at 100% 0%, rgb(85 214 190 / 70%), transparent 70%), linear-gradient(120deg, #4F378B, var(--app)); }
.ap-line { height: .45rem; margin-inline: 1rem; border-radius: 4px; background: #EFEAF4; }
.ap-line--s { width: 50%; }
.ap-mailcard__btn { justify-self: start; margin: .3rem 1rem 0; padding: .45rem .9rem; border-radius: 999px; background: var(--app); color: #fff; font-size: .78rem; font-weight: 500; }
.ap-cp__send { display: flex; align-items: center; gap: .8rem; font-size: .82rem; color: #49454F; }
.ap-cp__send b { color: #1C1B1F; font-weight: 600; }
.ap-cp__bar { flex: 1; height: 6px; border-radius: 6px; background: #EFEAF4; overflow: hidden; }
.ap-cp__bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .ap-cp__bar i { transform-origin: right; }
/* scene motion: plays when the layer comes into view, again each time */
.is-live .ap-row { animation: ap-in .7s var(--ease-out) backwards; animation-delay: calc(.25s + var(--i, 0) * .1s); }
@keyframes ap-in { from { opacity: 0; transform: translateY(14px); } }
.is-live .ap-row .ap-tag { animation: hx-pop .45s var(--spring) backwards; animation-delay: calc(.8s + var(--i, 0) * .1s); }
.is-live .ap-dupe { animation: ap-merged .01s linear 2.4s forwards; }
@keyframes ap-merged { to { background: var(--mint-tint); color: var(--mint-ink); } }
.is-live .ap-dupe__btn { animation: ap-press .5s var(--ease) 2.1s; }
@keyframes ap-press { 50% { transform: scale(.9); box-shadow: 0 0 0 6px rgb(103 80 164 / 18%); } }
.is-live .ap-ev__bar i { animation: hx-fill 1.6s var(--ease-out) .5s forwards; }
.is-live .ap-ev__more { animation: ap-moreon 2.4s var(--ease) 1.4s; }
@keyframes ap-moreon { 0%, 100% { background: transparent; } 10%, 85% { background: #EADDFF; } }
.is-live .ap-menu { animation: ap-menu 2.2s var(--ease-out) 1.5s; }
@keyframes ap-menu { 0% { opacity: 0; transform: scale(.85); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.95); } }
.is-live .ap-menu .is-hit { animation: ap-hit 2.2s var(--ease) 1.5s; }
@keyframes ap-hit { 0%, 35% { background: transparent; } 45%, 80% { background: #EADDFF; } 100% { background: transparent; } }
.is-live .ap-toast { animation: ap-toast .7s var(--ease-out) 3.6s forwards; }
@keyframes ap-toast { to { opacity: 1; transform: none; } }
.is-live .ap-rsvp li { animation: ap-in .6s var(--ease-out) backwards; } .is-live .ap-rsvp li:nth-child(2) { animation-delay: .12s; } .is-live .ap-rsvp li:nth-child(3) { animation-delay: .24s; }
.is-live .ap-cp__v .ap-tag { animation: hx-pop .45s var(--spring) backwards .4s; } .is-live .ap-cp__v .ap-tag + .ap-tag { animation-delay: .55s; }
.is-live .ap-mailcard { animation: ap-in .8s var(--ease-out) .5s backwards; }
.is-live .ap-cp__bar i { animation: hx-fill 2s var(--ease-out) 1.1s forwards; }
@media (max-width: 560px) {
	.ap { font-size: .84rem; }
	.ap-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
	.ap-org { display: none; }
	.ap-ev__counts dd { font-size: 1.2rem; }
	.ap-dupe span:nth-child(2) b { display: block; }
	.ap-bar .ap-pill { display: none; }
}

/* the event day */
.x-day { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--sec); background: var(--night); color: rgb(255 255 255 / 82%); }
.x-day__bg { position: absolute; inset: 0; z-index: -1; }
.x-day__vid { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(2px) saturate(.9) brightness(.7); transform: scale(1.05); }
.x-day__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 9 28 / 95%) 0%, rgb(18 12 34 / 86%) 45%, rgb(18 12 34 / 60%) 100%), radial-gradient(40rem 30rem at 85% 20%, rgb(85 214 190 / 18%), transparent 70%); }
html[dir="rtl"] .x-day__bg::after { background: linear-gradient(-90deg, rgb(14 9 28 / 95%) 0%, rgb(18 12 34 / 86%) 45%, rgb(18 12 34 / 60%) 100%), radial-gradient(40rem 30rem at 15% 20%, rgb(85 214 190 / 18%), transparent 70%); }
.x-day__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.x-day .x-kicker { color: var(--mint); }
.x-day .x-h2 { color: #fff; }
.x-day .x-lede { color: rgb(255 255 255 / 78%); }
.x-day__list { display: grid; gap: 1.1rem; margin-top: var(--s5); }
.x-day__list li { display: flex; gap: 1rem; align-items: flex-start; }
.x-day__list li > span:last-child { display: grid; gap: .2rem; }
.x-day__list b { color: #fff; font-size: 1.1rem; font-weight: 600; }
.x-day__list li > span:last-child > span { font-size: 1rem; color: rgb(255 255 255 / 70%); }
.x-day__ico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 12px; color: var(--mint); background: rgb(85 214 190 / 12%); border: 1px solid rgb(85 214 190 / 30%); flex: none; }
.x-day__ico .x-ico { width: 1.35rem; height: 1.35rem; }
.x-day__card { position: relative; display: grid; gap: 1rem; padding: 1.4rem; border-radius: 20px; background: linear-gradient(135deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 5%)); border: 1px solid rgb(255 255 255 / 20%); box-shadow: 0 30px 70px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 18%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; }
.x-scan { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.x-scan__qr { position: relative; padding: .7rem; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 0 0 6px rgb(85 214 190 / 16%); }
.x-scan__qr .inv-qr { width: 100%; height: auto; fill: var(--night); }
.x-scan__beam { position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--mint); box-shadow: 0 0 14px 3px var(--mint); animation: x-beam 2s ease-in-out infinite alternate; }
@keyframes x-beam { to { transform: translateY(6.4rem); } }
.x-scan__ok { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: 12px; background: rgb(85 214 190 / 16%); border: 1px solid rgb(85 214 190 / 40%); }
.x-scan__ok .inv-ico { width: 2rem; height: 2rem; padding: .35rem; border-radius: 50%; background: var(--mint); color: var(--mint-dark); }
.x-scan__ok > span { display: grid; line-height: 1.3; } .x-scan__ok b { font-size: 1.05rem; } .x-scan__ok small { color: rgb(255 255 255 / 70%); font-size: .84rem; }
.x-live { display: flex; align-items: baseline; gap: .6rem; padding: .2rem .2rem 0; font-size: 2.6rem; font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.x-live small { font-size: .95rem; font-weight: 400; letter-spacing: 0; color: rgb(255 255 255 / 70%); }
.x-live__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgb(85 214 190 / 20%), 0 0 14px var(--mint); align-self: center; animation: x-pulse 2s ease-in-out infinite; flex: none; display: inline-block; }
@keyframes x-pulse { 50% { box-shadow: 0 0 0 9px rgb(85 214 190 / 0%), 0 0 18px var(--mint); } }
.x-feed { display: grid; gap: .45rem; }
.x-feed li { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 12px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 10%); font-size: .9rem; }
.x-feed .ap-av { width: 30px; height: 30px; }
.x-feed__t { display: grid; line-height: 1.25; } .x-feed__t small { color: rgb(255 255 255 / 60%); font-size: .78rem; }
.x-feed em { margin-inline-start: auto; font-style: normal; font-family: var(--f-mono); font-size: .72rem; padding: .2rem .55rem; border-radius: 6px; background: rgb(85 214 190 / 18%); color: var(--mint); }
.x-feed em.is-new { background: rgb(247 185 85 / 18%); color: #F7C979; }
.is-live .x-feed li { animation: x-feedin .7s var(--ease-out) backwards; animation-delay: calc(.6s + var(--i) * .35s); }
@keyframes x-feedin { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
.is-live .x-scan__ok { animation: hx-pop .6s var(--spring) .3s backwards; }
.is-live .x-day__list li { animation: ap-in .8s var(--ease-out) backwards; animation-delay: calc(.2s + var(--i) * .15s); }
@media (max-width: 900px) { .x-day__in { grid-template-columns: 1fr; } .x-day__bg::after, html[dir="rtl"] .x-day__bg::after { background: linear-gradient(180deg, rgb(14 9 28 / 94%), rgb(18 12 34 / 84%)); } }
@media (max-width: 460px) { .x-scan { grid-template-columns: 5.5rem minmax(0, 1fr); } @keyframes x-beam { to { transform: translateY(4.4rem); } } .x-live { font-size: 2.1rem; } }

/* sector switcher */
/* use cases: compact cards linking to each use-case page */
.x-uc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.x-uc__card { position: relative; display: grid; align-content: start; gap: .55rem; height: 100%; padding: 1.35rem 1.35rem 3.2rem; border-radius: 18px; background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .4s var(--ease-out); }
.x-uc__card:hover, .x-uc__card:focus-visible { border-color: var(--iris); box-shadow: var(--shadow); transform: translateY(-3px); }
.x-uc__ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--iris-tint); color: var(--iris); }
.x-uc__ico .x-ico { width: 1.35rem; height: 1.35rem; }
.x-uc__name { font-weight: 650; font-size: 1.1rem; letter-spacing: -.01em; margin-top: .25rem; }
.x-uc__text { font-size: .92rem; line-height: 1.5; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.x-uc__go { position: absolute; inset-inline-start: 1.35rem; bottom: 1.15rem; color: var(--iris); transition: translate .3s var(--ease-out); }
.x-uc__go .x-ico { width: 1.2rem; height: 1.2rem; }
html[dir="rtl"] .x-uc__go .x-ico { transform: scaleX(-1); }
.x-uc__card:hover .x-uc__go { translate: 4px 0; } html[dir="rtl"] .x-uc__card:hover .x-uc__go { translate: -4px 0; }
@media (max-width: 1020px) { .x-uc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.x-uc { gap: .6rem; }
	.x-uc__card { padding: 1rem 1rem 1rem; gap: .5rem; }
	.x-uc__text, .x-uc__go { display: none; }
	.x-uc__name { font-size: 1rem; margin: 0; }
}
.x-sectors { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1rem; padding: .6rem; border-radius: 24px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.x-sectors__tabs { display: grid; align-content: start; gap: .2rem; padding: .3rem; }
.x-sectors__tab { position: relative; text-align: start; min-height: 46px; padding: .7rem 1rem; border-radius: 12px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 1rem; font-weight: 560; cursor: pointer; transition: color .25s, background .25s; }
.x-sectors__tab::before { content: ""; position: absolute; inset-inline-start: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 3px; background: var(--mint); transform: scaleY(0); transition: transform .35s var(--ease-out); }
.x-sectors__tab:hover { color: var(--iris); background: var(--mist); }
.x-sectors__tab[aria-selected="true"] { color: var(--ink); background: var(--iris-tint); }
.x-sectors__tab[aria-selected="true"]::before { transform: none; }
.x-sectors__panels { position: relative; padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); border-radius: 18px; min-height: 25rem; background: radial-gradient(30rem 22rem at 100% 0%, rgb(185 162 255 / 22%), transparent 70%), radial-gradient(24rem 18rem at 0% 100%, rgb(85 214 190 / 14%), transparent 70%), var(--mist); }
.x-sectors__panel h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -.03em; max-width: 24ch; margin-bottom: .8rem; }
.x-sectors__panel > p { color: var(--ink-2); max-width: 56ch; }
.x-sectors__panel.is-on > * { animation: hx-up .7s var(--ease-out) backwards; }
.x-sectors__panel.is-on > :nth-child(2) { animation-delay: .06s; } .x-sectors__panel.is-on > :nth-child(3) { animation-delay: .12s; } .x-sectors__panel.is-on > :nth-child(4) { animation-delay: .18s; } .x-sectors__panel.is-on > :nth-child(5) { animation-delay: .24s; }
.x-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0; }
.x-chips li { font-size: .88rem; padding: .4rem .85rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); color: var(--ink-2); }
.x-mini-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin-bottom: 1.6rem; counter-reset: f; }
.x-mini-flow li { counter-increment: f; padding: 1rem; border-radius: 14px; background: var(--white); border: 1px solid var(--line); display: grid; gap: .3rem; align-content: start; }
.x-mini-flow li::before { content: "0" counter(f); font-family: var(--f-mono); font-size: .75rem; color: var(--iris); }
.x-mini-flow b { font-weight: 600; font-size: .98rem; }
.x-mini-flow span { font-size: .88rem; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 860px) {
	.x-sectors { grid-template-columns: 1fr; }
	.x-sectors__tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: .3rem; }
	.x-sectors__tab { white-space: nowrap; padding: .6rem .95rem; }
	.x-sectors__tab::before { display: none; }
	.x-sectors__panels { min-height: 0; }
}

/* ==========================================================================
   Page heads, sections and shared components
   ========================================================================== */
.inv-head { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.5rem + 2vw, 4rem); background: linear-gradient(180deg, var(--mist), var(--white)); }
.inv-head::before, .inv-sol__hero::before, .inv-story__hero::before, .inv-guide__head::before, .inv-post__head::before { content: ""; position: absolute; z-index: -1; width: 46rem; height: 46rem; inset-inline-end: -16rem; top: -20rem; border-radius: 50%; border: 1px solid rgb(125 91 166 / 14%); box-shadow: 0 0 0 70px rgb(125 91 166 / 3%), 0 0 0 140px rgb(125 91 166 / 2.5%), inset 0 0 0 90px rgb(255 255 255 / 0%); pointer-events: none; }
.inv-head::after { content: ""; position: absolute; z-index: -1; width: 30rem; height: 18rem; inset-inline-end: 5%; top: -6rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(85 214 190 / 20%), transparent); pointer-events: none; }
.inv-head__title { font-size: var(--fs-1); max-width: 18ch; }
.inv-head__lede { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); max-width: 52ch; margin-top: var(--s3); }
.inv-head--proof .inv-proof { margin-top: var(--s5); }
.inv-crumbs { font-size: .85rem; color: var(--ink-3); margin-bottom: var(--s3); }
.inv-crumbs ol, .inv-crumbs p { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.inv-crumbs li + li::before { content: "/"; margin-inline-end: .4rem; color: var(--line-2); }
.inv-crumbs a { color: var(--ink-3); text-decoration: none; }
.inv-crumbs a:hover { color: var(--iris); }
.inv-crumbs .separator { color: var(--line-2); }

.inv-sec { padding-block: var(--sec); }
.inv-sec--tight { padding-block: calc(var(--sec) * .6); }
.inv-sec--flush { padding-block: 0 var(--sec); }
.inv-sec--band { background: var(--mist); }
.inv-sec--ink { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: rgb(255 255 255 / 78%); }
.inv-sec--ink::before, .inv-blocks > .wp-block-group.is-style-ink::before { content: ""; position: absolute; z-index: -1; width: 50rem; height: 50rem; inset-inline-start: -18rem; bottom: -30rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 9%); box-shadow: 0 0 0 80px rgb(255 255 255 / 2.5%), 0 0 0 160px rgb(255 255 255 / 2%); pointer-events: none; }
.inv-sec--ink :is(.inv-sec__title, h3, dt) { color: var(--on); }
.inv-sec__title { font-size: var(--fs-2); max-width: 24ch; margin-bottom: var(--s5); }
.inv-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.inv-sec__head .inv-sec__title { margin-bottom: 0; }
.inv-lede { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.inv-lede--sm { font-size: var(--fs-body); margin-top: calc(var(--s4) * -1); margin-bottom: var(--s4); }
.inv-small { font-size: var(--fs-small); color: var(--ink-3); }
.inv-empty { color: var(--ink-2); }
.inv-chip { display: inline-flex; align-items: center; font-size: .82rem; line-height: 1; padding: .45em .75em; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; text-decoration: none; }
a.inv-chip:hover, .inv-chip a:hover { color: var(--iris); }
.inv-chip a { color: inherit; text-decoration: none; }

/* proof numbers & names */
.inv-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3) var(--s4); margin: 0; }
.inv-proof__item { display: flex; flex-direction: column; gap: .35rem; border-inline-start: 3px solid var(--mint); padding-inline-start: var(--s2); }
.inv-proof__value { font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.25rem); font-weight: 650; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.inv-proof__label { margin: 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4; max-width: 22ch; }
.inv-proof--stack { grid-template-columns: 1fr; gap: var(--s3); margin-block: var(--s4); }
.inv-names { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline; }
.inv-names a { font-family: var(--f-display); font-weight: 650; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--ink-2); text-decoration: none; letter-spacing: -.01em; }
.inv-names a:hover { color: var(--iris); }

/* ticks list */
.inv-ticks, .wp-block-list.is-style-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.inv-ticks li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; }
.inv-ticks .inv-ico { color: var(--mint-dark); background: var(--mint); border-radius: 50%; padding: .2em; width: 1.3em; height: 1.3em; margin-top: .08em; stroke-width: 2.6; }
.wp-block-list.is-style-ticks li { position: relative; padding-inline-start: 1.9em; }
.wp-block-list.is-style-ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2A25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/68% no-repeat; }
:is(.is-style-ink, .inv-sec--ink) .inv-ticks li, :is(.is-style-ink, .inv-sec--ink) .wp-block-list li { color: rgb(255 255 255 / 85%); }

/* live guest list (kept for editors) */
.inv-demo { margin: 0; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; font-size: .95rem; }
.inv-demo__bar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: .82rem; }
.inv-demo__dots { display: flex; gap: 5px; } .inv-demo__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.inv-demo__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .9rem; }
.inv-demo__event { font-weight: 650; font-size: 1.2rem; margin: 0; line-height: 1.2; }
.inv-demo__when { margin: .2rem 0 0; color: var(--ink-3); font-size: .85rem; }
.inv-demo__counts { display: flex; gap: 1.1rem; margin: 0; }
.inv-demo__counts div { display: flex; flex-direction: column-reverse; }
.inv-demo__counts dt { font-size: .75rem; color: var(--ink-3); }
.inv-demo__counts dd { margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.inv-demo__list { border-top: 1px solid var(--line); }
.inv-demo__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 7.6rem; gap: .8rem; align-items: center; padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); transition: background .5s var(--ease); }
.inv-demo__row.is-changing { background: var(--mint-tint); }
.inv-demo__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--iris-tint); color: var(--iris-deep); font-size: .8rem; font-weight: 600; flex: none; }
.inv-demo__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .65rem; min-width: 0; }
.inv-demo__ar { color: var(--ink-2); }
.inv-demo__type { font-size: .78rem; color: var(--ink-2); padding: .25em .6em; border-radius: 6px; background: var(--mist); }
.inv-demo__status { justify-self: end; }
.inv-status { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; font-weight: 560; padding: .35em .7em; border-radius: 999px; white-space: nowrap; }
.inv-status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.inv-status--invited { background: var(--mist); color: var(--ink-2); }
.inv-status--confirmed { background: var(--iris-tint); color: var(--iris-deep); }
.inv-status--tentative { background: var(--amber-tint); color: var(--amber); }
.inv-status--apologized { background: var(--rose-tint); color: var(--rose); }
.inv-status--checked { background: var(--mint-tint); color: var(--mint-ink); }
.inv-demo__scan { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.25rem; background: var(--night); color: rgb(255 255 255 / 75%); font-size: .82rem; position: relative; overflow: hidden; }
.inv-demo__scan .inv-qr { width: 34px; height: 34px; fill: #fff; }
.inv-demo__scanline { position: absolute; inset-inline-start: 1.25rem; top: .85rem; width: 34px; height: 2px; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: inv-scan 2.4s var(--ease) infinite alternate; }
@keyframes inv-scan { to { transform: translateY(32px); } }
@media (max-width: 560px) { .inv-demo__row { grid-template-columns: 2rem minmax(0, 1fr) auto; padding-inline: 1rem; } .inv-demo__type { display: none; } }

/* lifecycle */
.inv-life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); position: relative; }
.inv-life::before { content: ""; position: absolute; inset-inline: 1.4rem; top: 1.4rem; height: 2px; background: linear-gradient(90deg, var(--iris), var(--mint)); opacity: .4; }
html[dir="rtl"] .inv-life::before { background: linear-gradient(-90deg, var(--iris), var(--mint)); }
.inv-life__stage { position: relative; padding: var(--s4) var(--s3) var(--s3); padding-top: 0; }
.inv-life__n { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--night); color: var(--mint); font-family: var(--f-mono); font-weight: 600; margin-bottom: var(--s3); position: relative; box-shadow: 0 0 0 7px var(--paper); }
.inv-sec--band .inv-life__n, .is-style-band .inv-life__n { box-shadow: 0 0 0 7px var(--mist); }
.inv-life__stage:nth-child(2) .inv-life__n { background: var(--iris); color: #fff; }
.inv-life__stage:nth-child(3) .inv-life__n { background: var(--mint); color: var(--mint-dark); }
.inv-life__title { font-size: var(--fs-3); }
.inv-life__sub { color: var(--ink-2); margin: .4rem 0 var(--s3); }
@media (max-width: 860px) {
	.inv-life { grid-template-columns: 1fr; gap: var(--s4); }
	.inv-life::before { inset-inline: auto; inset-inline-start: 1.38rem; top: 1.4rem; bottom: 1rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--iris), var(--mint)); }
	.inv-life__stage { padding-inline-start: 4.2rem; padding-inline-end: 0; }
	.inv-life__n { position: absolute; inset-inline-start: 0; top: 0; }
}

/* product scenes */
.inv-scene { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--shadow); font-size: .95rem; max-width: 30rem; width: 100%; }
.inv-scene__label { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.inv-scene__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-tint); }
.inv-scene__title { font-weight: 650; font-size: 1.2rem; margin: 0 0 .2rem; }
.inv-scene__text { color: var(--ink-2); margin: 0 0 1rem; }
.inv-scene__fine { font-size: .82rem; color: var(--ink-3); margin: .9rem 0 0; }
.inv-scene__actions, .inv-opts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.inv-scene__ok { display: flex; gap: .5rem; align-items: center; margin: 1rem 0 0; color: var(--mint-ink); font-weight: 560; }
.inv-pill { display: inline-flex; padding: .45em .9em; border-radius: 999px; background: var(--app); color: var(--on); font-size: .82rem; font-weight: 560; }
.inv-pill--ghost { background: transparent; color: var(--app); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.inv-opts .inv-pill { background: var(--iris-tint); color: var(--iris-deep); }
.inv-dupe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.inv-dupe__rec { display: grid; gap: .15rem; padding: .8rem; border-radius: var(--r-sm); background: var(--mist); font-size: .85rem; color: var(--ink-2); }
.inv-dupe__rec span { overflow-wrap: anywhere; }
.inv-dupe__rec b { color: var(--ink); font-size: .95rem; }
.inv-dupe__rec:last-child { box-shadow: inset 0 0 0 1.5px #E7B65C; background: var(--amber-tint); }
.inv-rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.inv-rsvp__b { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .75rem .4rem; border-radius: var(--r-sm); border: 1.5px solid var(--line); font-size: .82rem; font-weight: 560; color: var(--ink-2); text-align: center; }
.inv-rsvp__b.is-yes { border-color: var(--mint); background: var(--mint-tint); color: var(--mint-ink); }
.inv-rsvp__b.is-maybe { color: var(--amber); font-size: 1.05rem; }
.inv-rsvp__b.is-no { color: var(--rose); font-size: 1.05rem; }
.inv-rsvp__b.is-maybe span, .inv-rsvp__b.is-no span { font-size: .82rem; }
.inv-bars { display: grid; gap: .7rem; margin: 0; }
.inv-bars__row { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .75rem; }
.inv-bars dt { font-size: .85rem; color: var(--ink-2); }
.inv-bars dd { margin: 0; display: flex; align-items: center; gap: .6rem; }
.inv-bars dd span { height: .7rem; border-radius: 999px; width: var(--w); background: var(--iris); }
.inv-bars__row:nth-child(3) dd span { background: var(--mint); }
.inv-bars__row:nth-child(4) dd span { background: #E7B65C; }
.inv-bars dd b { font-variant-numeric: tabular-nums; font-size: .9rem; }
.inv-bi { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.inv-bi__f { padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); display: grid; gap: .15rem; }
.inv-bi__f small { font-size: .75rem; color: var(--ink-3); }
.inv-bi__f b { font-size: 1.15rem; font-weight: 560; }
.inv-epass { border: 2px solid var(--app); border-radius: var(--r); overflow: hidden; text-align: center; max-width: 17rem; margin-inline: auto; background: var(--white); }
.inv-epass__band { background: linear-gradient(120deg, #4F378B, var(--app)); color: var(--on); font-weight: 600; padding: .75rem; font-size: 1.05rem; }
.inv-epass__body { display: grid; gap: .1rem; padding: 1rem; justify-items: center; font-size: .85rem; color: var(--ink-2); }
.inv-epass__body b { font-size: 1.05rem; color: var(--ink); }
.inv-epass .inv-qr { width: 6.5rem; height: 6.5rem; margin: .7rem 0; fill: var(--ink); }
.inv-epass__class { font-weight: 650; color: var(--app); }
.inv-scene--pass { background: var(--mist); }
.inv-scanframe { position: relative; width: 9rem; height: 9rem; margin: .5rem auto; padding: 1rem; border-radius: var(--r); background: var(--night); }
.inv-scanframe .inv-qr { fill: #fff; }
.inv-scanframe__line { position: absolute; inset-inline: .6rem; top: 1rem; height: 2px; background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: inv-scan2 2.2s var(--ease) infinite alternate; }
@keyframes inv-scan2 { to { transform: translateY(6.8rem); } }
.inv-mailfrom { display: grid; gap: .15rem; padding: .8rem .9rem; border-radius: var(--r-sm); background: var(--mist); }
.inv-mailfrom span { font-size: .78rem; color: var(--ink-3); }
.inv-mailfrom b { font-weight: 560; word-break: break-all; }
.inv-roles { display: grid; gap: .55rem; }
.inv-roles li { display: flex; gap: .75rem; align-items: center; }
.inv-roles span:last-child { display: grid; line-height: 1.3; }
.inv-roles small { color: var(--ink-3); font-size: .8rem; }
.inv-mail { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; display: grid; gap: .45rem; padding-bottom: .9rem; }
.inv-mail__band { height: 3.2rem; background: radial-gradient(10rem 5rem at 100% 0%, rgb(85 214 190 / 60%), transparent 70%), linear-gradient(120deg, #4F378B, var(--app)); }
.inv-mail b { padding: .2rem .9rem 0; }
.inv-mail span { height: .5rem; border-radius: 4px; background: var(--mist-2); margin-inline: .9rem; }
.inv-mail span.short { width: 50%; }
.inv-reg { display: flex; align-items: center; gap: 1rem; padding: .8rem; border-radius: var(--r-sm); background: var(--mist); }
.inv-reg__url { font-size: .85rem; color: var(--iris-deep); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.inv-reg .inv-qr { width: 4.5rem; height: 4.5rem; fill: var(--ink); flex: none; background: var(--white); padding: .3rem; border-radius: 6px; }

/* split blocks */
.inv-split, .inv-split-simple { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.inv-split > .inv-scene, .inv-split-simple > .inv-scene { justify-self: center; }
@media (max-width: 860px) { .inv-split, .inv-split-simple { grid-template-columns: 1fr; } }

/* solutions list */
.inv-solutions { border-top: 1px solid var(--line); }
.inv-solutions__row { border-bottom: 1px solid var(--line); }
.inv-solutions__link { display: grid; grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 2fr) 2.75rem; grid-template-areas: "name line go" "name tags go"; gap: .5rem var(--s4); align-items: center; padding: var(--s3) var(--s2); border-radius: 14px; text-decoration: none; color: inherit; transition: background .35s var(--ease), padding .35s var(--ease-out); }
.inv-solutions__name { grid-area: name; font-family: var(--f-display); font-weight: 650; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.025em; line-height: 1.1; color: var(--ink); transition: color .3s; }
.inv-solutions__line { grid-area: line; color: var(--ink-2); line-height: 1.45; }
.inv-solutions__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: .35rem; }
.inv-solutions__go { grid-area: go; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--iris-tint); color: var(--iris); transition: background .3s, color .3s, transform .45s var(--ease-out); }
html[dir="rtl"] .inv-solutions__go .inv-ico { transform: scaleX(-1); }
.inv-solutions__link:hover { background: var(--mist); padding-inline: var(--s3); }
.inv-sec--band .inv-solutions__link:hover, .is-style-band .inv-solutions__link:hover { background: var(--white); }
.inv-solutions__link:hover .inv-solutions__name { color: var(--iris); }
.inv-solutions__link:hover .inv-solutions__go { background: var(--mint); color: var(--mint-dark); transform: rotate(-30deg); }
html[dir="rtl"] .inv-solutions__link:hover .inv-solutions__go { transform: rotate(30deg); }
@media (max-width: 760px) { .inv-solutions__link { grid-template-columns: minmax(0, 1fr) 2.75rem; grid-template-areas: "name go" "line line" "tags tags"; padding-inline: .4rem; } }

/* customer stories as event passes */
.inv-passes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s4); }
.inv-pass {
	--notch: 14px; position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow);
	-webkit-mask: radial-gradient(circle var(--notch) at 0 calc(100% - 3.6rem), #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - 3.6rem), #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
	        mask: radial-gradient(circle var(--notch) at 0 calc(100% - 3.6rem), #0000 98%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% calc(100% - 3.6rem), #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
	overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .4s;
}
.inv-pass:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgb(125 91 166 / 30%) inset, var(--shadow-lg); }
.inv-pass__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.25rem; background: linear-gradient(90deg, #4F378B, var(--iris) 60%, #3FB49E); color: var(--on); font-size: .85rem; }
.inv-pass__kind { font-weight: 560; }
.inv-pass__rating { color: #FFD66B; letter-spacing: .1em; font-size: .9rem; margin: 0; }
.inv-pass__rating i { font-style: normal; }
.inv-pass__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.inv-pass__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.inv-pass:hover .inv-pass__photo { transform: scale(1.05); }
.inv-pass__body { padding: 1.25rem 1.25rem 1.5rem; flex: 1; }
.inv-pass__org { font-size: 1.35rem; margin-bottom: .3rem; }
.inv-pass__org a { color: var(--ink); text-decoration: none; }
.inv-pass__org a::after { content: ""; position: absolute; inset: 0; }
.inv-pass__org a:focus-visible { outline: none; }
.inv-pass:has(a:focus-visible) { outline: 3px solid var(--iris); outline-offset: 3px; }
.inv-pass__event { font-size: .92rem; color: var(--ink-3); margin-bottom: 1rem; }
.inv-pass__quote { margin: 0; }
.inv-pass__quote p { font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.inv-pass__quote p::before { content: "“"; } .inv-pass__quote p::after { content: "”"; }
.inv-pass__quote footer { font-size: .88rem; color: var(--ink-2); font-weight: 560; }
.inv-pass__summary { color: var(--ink-2); font-size: 1rem; }
.inv-pass__stub { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 3.6rem; padding: 0 1.25rem; border-top: 2px dashed var(--line-2); font-size: .86rem; color: var(--ink-2); font-weight: 560; }
.inv-pass__stub .inv-ico { color: var(--iris); width: 1.6rem; height: 1.6rem; }

/* video guides */
.inv-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s4) var(--s3); }
.inv-guide-card a { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.inv-guide-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--mist); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s, transform .5s var(--ease-out); }
.inv-guide-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.inv-guide-card a:hover .inv-guide-card__thumb { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(125 91 166 / 30%), var(--shadow); }
.inv-guide-card a:hover img { transform: scale(1.05); }
.inv-guide-card__play { position: absolute; inset-inline-start: .75rem; bottom: .75rem; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--iris); box-shadow: 0 6px 18px rgb(0 0 0 / 25%); transition: background .3s, color .3s, transform .4s var(--ease-out); }
.inv-guide-card a:hover .inv-guide-card__play { background: var(--mint); color: var(--mint-dark); transform: scale(1.08); }
.inv-guide-card__play .inv-ico { width: 1rem; height: 1rem; margin-inline-start: 2px; }
.inv-guide-card__time { position: absolute; inset-inline-end: .6rem; bottom: .6rem; background: rgb(18 12 34 / 82%); color: var(--on); font-size: .78rem; padding: .2em .5em; border-radius: 6px; font-variant-numeric: tabular-nums; }
.inv-guide-card__topic { font-size: .82rem; color: var(--iris); font-weight: 600; margin-top: .35rem; }
.inv-guide-card__title { font-family: var(--f-display); font-weight: 620; font-size: 1.18rem; line-height: 1.25; color: var(--ink); transition: color .25s; }
.inv-guide-card a:hover .inv-guide-card__title { color: var(--iris); }
.inv-guide-card__ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: 1rem 1.1rem; background: radial-gradient(18rem 12rem at 100% 0%, rgb(185 162 255 / 40%), transparent 70%), radial-gradient(14rem 10rem at 0% 100%, rgb(85 214 190 / 30%), transparent 70%), var(--night); }
.inv-guide-card__ph::before { content: ""; position: absolute; width: 14rem; height: 14rem; inset-inline-end: -5rem; top: -6rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 0 0 30px rgb(255 255 255 / 3%); }
.inv-guide-card__ph b { position: relative; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; max-width: 18ch; }
.inv-guide-card__ph small { position: relative; font-size: .78rem; font-weight: 600; color: var(--mint); }

/* lite YouTube */
.inv-yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--night); box-shadow: var(--shadow); }
.inv-yt__poster { width: 100%; height: 100%; object-fit: cover; }
.inv-yt__play { position: absolute; inset: 0; margin: auto; width: 5rem; height: 5rem; border-radius: 50%; border: 0; background: #fff; color: var(--iris); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 10px rgb(255 255 255 / 18%), 0 20px 50px rgb(0 0 0 / 45%); transition: transform .35s var(--ease-out), background .25s, color .25s; }
.inv-yt__play .inv-ico { width: 1.8rem; height: 1.8rem; margin-inline-start: 4px; }
.inv-yt__play:hover { transform: scale(1.07); background: var(--mint); color: var(--mint-dark); }
.inv-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* updates feed */
.inv-updates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s4); }
.inv-update { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; border-top: 2px solid var(--iris); }
.inv-update--linkedin { border-top-color: #0A66C2; }
.inv-update--youtube { border-top-color: #E0384B; }
.inv-update__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; color: var(--ink-3); }
.inv-update__type { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); font-weight: 560; }
.inv-update__type .inv-ico { width: 1.05rem; height: 1.05rem; }
.inv-update__media { display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--mist); }
.inv-update__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.inv-update:hover .inv-update__img { transform: scale(1.04); }
.inv-update__title { font-size: 1.3rem; }
.inv-update__title a { color: var(--ink); text-decoration: none; }
.inv-update__title a:hover { color: var(--iris); }
.inv-update__excerpt { color: var(--ink-2); font-size: 1rem; margin: 0; }
.inv-filter ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s4); }
.inv-filter a { display: inline-flex; padding: .5em 1.1em; border-radius: 999px; border: 1.5px solid var(--line-2); text-decoration: none; color: var(--ink-2); font-size: .95rem; min-height: 44px; align-items: center; background: var(--white); transition: border-color .2s, color .2s; }
.inv-filter a:hover { border-color: var(--iris); color: var(--iris); }
.inv-filter a[aria-current], .page-numbers.current { background: var(--night); border-color: var(--night); color: #fff; }
.inv-follow { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s5); }
.inv-pager .nav-links, .navigation.pagination .nav-links { display: flex; gap: .5rem; margin-top: var(--s5); flex-wrap: wrap; }
.page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .8rem; border-radius: 999px; border: 1.5px solid var(--line-2); text-decoration: none; color: var(--ink); }

/* FAQ */
.inv-faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s5); align-items: start; }
.inv-faq-wrap > :is(.inv-sec__title, h2) { margin: 0; position: sticky; top: calc(var(--hdr) + 2rem); transition: top .5s var(--ease-out); }
@media (max-width: 860px) { .inv-faq-wrap { grid-template-columns: 1fr; gap: var(--s3); } .inv-faq-wrap > :is(.inv-sec__title, h2) { position: static; } }
.inv-faqs { border-top: 1px solid var(--line-2); }
.inv-faq { border-bottom: 1px solid var(--line-2); }
.inv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; cursor: pointer; list-style: none; }
.inv-faq summary::-webkit-details-marker { display: none; }
.inv-faq__q { font-family: var(--f-display); font-size: 1.22rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; transition: color .25s; }
.inv-faq__icon { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--iris-tint); color: var(--iris); transition: transform .4s var(--ease-out), background .3s, color .3s; }
.inv-faq summary:hover .inv-faq__q { color: var(--iris); }
.inv-faq[open] .inv-faq__icon { transform: rotate(45deg); background: var(--mint); color: var(--mint-dark); }
.inv-faq__a { padding: 0 3.5rem 1.4rem 0; color: var(--ink-2); max-width: var(--measure); }
html[dir="rtl"] .inv-faq__a { padding: 0 0 1.4rem 3.5rem; }
.inv-faq[open] .inv-faq__a { animation: hx-up .5s var(--ease-out); }

/* pricing */
.inv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s3); align-items: stretch; }
.inv-plan { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-out), box-shadow .4s, border-color .3s; }
.inv-plan:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-2); }
.inv-plan.is-highlight { border: 2px solid var(--iris); box-shadow: var(--shadow-lg); }
.inv-plan.is-highlight::before { content: ""; position: absolute; inset: -2px -2px auto; height: 6px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(90deg, var(--iris), var(--mint)); }
.inv-plan__top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.inv-plan__name { font-size: 1.6rem; }
.inv-plan__code { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 6px; padding: .15em .45em; }
.inv-plan__badge { margin-inline-start: auto; font-size: .78rem; font-weight: 600; color: var(--mint-ink); background: var(--mint-tint); border-radius: 999px; padding: .3em .75em; }
.inv-plan__summary { color: var(--ink-2); font-size: 1rem; margin: 0; min-height: 4.8em; }
.inv-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: var(--s1) 0 0; }
.inv-plan__price strong { font-family: var(--f-display); font-size: clamp(2.6rem, 2.2rem + 1.2vw, 3.25rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.inv-plan.is-highlight .inv-plan__price strong { color: var(--iris-deep); }
.inv-plan__price span { color: var(--ink-2); font-size: .95rem; }
.inv-plan__month { margin: -.6rem 0 0; font-size: .88rem; color: var(--ink-3); }
.inv-plan .inv-btn { width: 100%; margin-block: var(--s1); }
.inv-plan__lead { margin: var(--s1) 0 0; font-weight: 600; font-size: .95rem; padding-top: var(--s2); border-top: 1px solid var(--line); }
.inv-plan .inv-ticks { font-size: .98rem; }
.inv-plans__terms { margin-top: var(--s3); }
.inv-plans--compact { grid-template-columns: 1fr; gap: .75rem; }
.inv-plans--compact .inv-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top price" "summary price"; gap: .4rem var(--s3); padding: var(--s3); }
.inv-plans--compact .inv-plan.is-highlight::before { display: none; }
.inv-plans--compact .inv-plan__top { grid-area: top; }
.inv-plans--compact .inv-plan__summary { grid-area: summary; min-height: 0; font-size: .93rem; }
.inv-plans--compact .inv-plan__price { grid-area: price; flex-direction: column; align-items: flex-end; gap: 0; margin: 0; }
.inv-plans--compact .inv-plan__price strong { font-size: 2rem; }
.inv-plans--compact .inv-plan__price span { font-size: .8rem; }
.inv-plans--compact .inv-plan__month, .inv-plans--compact .inv-plan .inv-btn { display: none; }
.inv-plans--compact .inv-plan__badge { margin-inline-start: 0; }
@media (max-width: 520px) { .inv-plans--compact .inv-plan { grid-template-columns: 1fr; grid-template-areas: "top" "price" "summary"; } .inv-plans--compact .inv-plan__price { flex-direction: row; align-items: baseline; gap: .5rem; } }
.inv-plans--talk .inv-plans__talk { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 3rem); box-shadow: var(--shadow); }
.inv-plans__lede { font-size: var(--fs-3); line-height: 1.5; max-width: 40ch; margin-bottom: var(--s4); }
.inv-compare { overflow-x: auto; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.inv-compare table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .98rem; }
.inv-compare th, .inv-compare td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.inv-compare tbody th { text-align: start; font-weight: 400; color: var(--ink); width: 46%; }
.inv-compare thead th { position: sticky; top: 0; background: var(--white); text-align: center; padding-block: 1.2rem; border-bottom: 2px solid var(--line-2); }
.inv-compare thead th:first-child { text-align: start; font-size: 1.1rem; }
.inv-compare__plan { display: block; font-family: var(--f-display); font-size: 1.2rem; font-weight: 650; }
.inv-compare__price { display: block; font-size: .85rem; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.inv-compare thead th.is-highlight .inv-compare__plan { color: var(--iris); }
.inv-compare__group th { background: var(--mist); text-align: start; font-weight: 600; font-size: .9rem; color: var(--ink-2); padding-block: .6rem; }
.inv-compare td.is-yes { color: var(--mint-ink); }
.inv-compare td.is-yes .inv-ico { margin-inline: auto; background: var(--mint-tint); border-radius: 50%; padding: .2em; }
.inv-compare td.is-no { color: var(--line-2); }
.inv-compare td.is-text { font-size: .88rem; font-weight: 560; color: var(--iris-deep); }
.inv-compare tbody tr:hover :is(td, th[scope="row"]) { background: var(--mist); }
.inv-compare :is(td, th):nth-child(4) { background: rgb(242 236 249 / 55%); }
@media (max-width: 640px) {
	.inv-compare { overflow: visible; }
	.inv-compare table { min-width: 0; display: block; }
	.inv-compare thead { display: none; }
	.inv-compare tbody { display: block; }
	.inv-compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
	.inv-compare tbody th[scope="row"] { grid-column: 1 / -1; width: auto; border: 0; padding: .9rem 1rem .2rem; font-weight: 560; }
	.inv-compare td { border: 0; padding: .35rem .4rem .9rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; background: none !important; }
	.inv-compare td::before { content: attr(data-plan); font-size: .72rem; font-weight: 400; color: var(--ink-3); }
	.inv-compare .inv-compare__group { display: block; }
	.inv-compare .inv-compare__group th { display: block; width: auto; padding: .6rem 1rem; }
}

/* forms (Contact Form 7) */
.inv-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }
.inv-form .wpcf7-form { display: grid; gap: 1.1rem; }
.inv-form .hidden-fields-container { display: none; }
.inv-form .wpcf7-form-control-wrap { display: block; }
.inv-form label br { display: none; }
.inv-form p { margin: 0; }
.inv-form .inv-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: end; } /* the two boxes stay level even when one label wraps (Arabic feedback: email hint) */
@media (max-width: 640px) { .inv-form .inv-f-row { grid-template-columns: 1fr; } }
.inv-form label { display: block; font-size: .95rem; font-weight: 560; color: var(--ink); }
.inv-form label .wpcf7-form-control-wrap { margin-top: .4rem; }
.inv-form .inv-f-hint { display: inline; margin-inline-start: .3em; font-weight: 400; color: var(--ink-3); font-size: .85rem; }
.inv-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	width: 100%; min-height: 52px; padding: .75rem .95rem; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
	background: var(--mist); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s, background .2s;
}
.inv-form textarea { min-height: 8.5rem; resize: vertical; }
.inv-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%237D5BA6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px; padding-inline-end: 2.4rem; }
html[dir="rtl"] .inv-form select { background-position: left .9rem center; }
.inv-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea):focus { outline: none; border-color: var(--iris); background: var(--white); box-shadow: 0 0 0 4px var(--iris-tint); }
/* the send button keeps its colour when pressed / focused (it used to turn white: the field focus style reached it) */
.inv-form .wpcf7-submit:focus-visible { outline: 2px solid var(--iris-deep); outline-offset: 3px; }
/* until the consent box is ticked, Contact Form 7 keeps the button switched off: show that clearly */
.inv-form .wpcf7-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.inv-form .wpcf7-submit:disabled::after { display: none; }
.inv-form .wpcf7-form.submitting .wpcf7-submit { --bg: var(--iris-deep); --bd: var(--iris-deep); opacity: .85; cursor: progress; }
.inv-form .wpcf7-list-item { margin: 0; }
.inv-form :is(.wpcf7-acceptance, .wpcf7-checkbox, .wpcf7-radio) label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.inv-form :is(input[type="checkbox"], input[type="radio"]) { width: 1.15rem; height: 1.15rem; accent-color: var(--iris); margin-top: .2rem; }
.inv-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.inv-form .wpcf7-submit { justify-self: start; }
.inv-form .wpcf7-not-valid-tip { font-size: .85rem; color: var(--rose); margin-top: .35rem; }
.inv-form .wpcf7-not-valid { border-color: var(--rose) !important; }
.inv-form .wpcf7-response-output { margin: 0 !important; padding: .9rem 1rem !important; border-radius: var(--r-sm); border: 0 !important; font-size: .95rem; }
.inv-form .wpcf7-form.sent .wpcf7-response-output { background: var(--mint-tint); color: var(--mint-ink); }
.inv-form .wpcf7-form:is(.invalid, .failed, .spam) .wpcf7-response-output { background: var(--rose-tint); color: var(--rose); }
.inv-form .wpcf7-spinner { margin-inline-start: .75rem; }
.inv-form .inv-f-note { font-size: .85rem; color: var(--ink-3); }

.inv-contact-list { display: grid; gap: .25rem; }
.inv-contact-list a { display: flex; gap: .9rem; align-items: center; padding: .65rem 0; text-decoration: none; color: inherit; min-height: 44px; }
.inv-contact-list .inv-ico { color: var(--iris); width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 12px; background: var(--iris-tint); transition: background .3s, color .3s; }
.inv-contact-list a:hover .inv-ico { background: var(--mint); color: var(--mint-dark); }
.inv-contact-list a > span { display: grid; line-height: 1.35; }
.inv-contact-list__label { font-size: .85rem; color: var(--ink-3); }
.inv-contact-list__value { font-weight: 560; }
.inv-contact-list a:hover .inv-contact-list__value { color: var(--iris); }
.inv-help-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 760px) { .inv-help-contact { grid-template-columns: 1fr; } }

/* search, topics, results */
.inv-search { display: flex; gap: .5rem; margin-top: var(--s4); max-width: 38rem; }
.inv-search input { flex: 1; min-width: 0; min-height: 54px; padding: .75rem 1.2rem; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--white); font: inherit; font-size: 1rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.inv-search input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px var(--iris-tint); }
.inv-search .inv-btn { min-height: 54px; }
.inv-topics { position: sticky; top: var(--hdr); z-index: 10; background: rgb(255 255 255 / 94%); backdrop-filter: blur(10px); border-block: 1px solid var(--line); transition: top .5s var(--ease-out); }
.inv-topics ul { display: flex; gap: .4rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: none; }
.inv-topics a { display: inline-flex; gap: .45rem; align-items: center; white-space: nowrap; padding: .5em 1em; border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--mist); border: 1px solid var(--line); font-size: .95rem; min-height: 44px; transition: border-color .2s, color .2s; }
.inv-topics a span { font-size: .78rem; color: var(--ink-3); }
.inv-topics a:hover { border-color: var(--iris); color: var(--iris); }
.inv-results { border-top: 1px solid var(--line); }
.inv-results a { display: grid; gap: .25rem; padding: 1.2rem .4rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .3s, padding .35s var(--ease-out); border-radius: 10px; }
.inv-results a:hover { background: var(--mist); padding-inline: 1rem; }
.inv-results__type { font-size: .82rem; color: var(--iris); font-weight: 600; }
.inv-results__title { font-family: var(--f-display); font-size: 1.3rem; font-weight: 620; }
.inv-results__excerpt { color: var(--ink-2); font-size: 1rem; }
.inv-results a:hover .inv-results__title { color: var(--iris); }

/* use case page */
.inv-sol__hero, .inv-story__hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3rem, 2rem + 3vw, 5rem); background: linear-gradient(180deg, var(--mist), var(--white)); }
.inv-sol__hero-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
.inv-sol__kicker { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: var(--s2); font-size: .9rem; font-weight: 650; color: var(--iris); }
.inv-sol__kicker a { color: inherit; text-decoration: none; }
.inv-sol__title { font-size: var(--fs-1); max-width: 17ch; }
.inv-sol__intro { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); max-width: 46ch; margin-block: var(--s3) var(--s4); }
.inv-sol__roles { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); box-shadow: var(--shadow); }
.inv-sol__roles-h { font-family: var(--f-text); font-size: .9rem; font-weight: 600; color: var(--ink-3); margin-bottom: .8rem; letter-spacing: 0; }
.inv-sol__roles li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-weight: 560; }
.inv-sol__roles li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; }
.inv-sol__roles li:last-child { border: 0; }
@media (max-width: 860px) { .inv-sol__hero-inner { grid-template-columns: 1fr; } }
.inv-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s3); }
.inv-pains__item { padding: var(--s3); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--rose); }
.inv-pains__item:nth-child(3n+2) { border-top-color: #E7B65C; } .inv-pains__item:nth-child(3n) { border-top-color: var(--iris); }
.inv-pains__item h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.inv-pains__item p { color: var(--ink-2); margin: 0; font-size: 1.02rem; }
.inv-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s3); }
.inv-flow__step { position: relative; padding: var(--s3); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color .3s, transform .5s var(--ease-out), box-shadow .4s; }
.inv-flow__step:hover { border-color: rgb(125 91 166 / 35%); transform: translateY(-4px); box-shadow: var(--shadow); }
.inv-flow__n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--night); color: var(--mint); font-family: var(--f-mono); font-weight: 600; margin-bottom: var(--s2); }
.inv-flow__step h3 { font-size: 1.22rem; margin-bottom: .4rem; }
.inv-flow__step p { color: var(--ink-2); font-size: 1rem; margin: 0; }
.inv-spots { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
.inv-spot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.inv-spot:nth-child(even) .inv-scene { order: 2; }
.inv-spot .inv-scene { justify-self: center; }
.inv-spot__text h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-bottom: var(--s2); max-width: 20ch; }
.inv-spot__text p { color: var(--ink-2); max-width: 46ch; }
@media (max-width: 860px) { .inv-spot { grid-template-columns: 1fr; } .inv-spot:nth-child(even) .inv-scene { order: 0; } }
.inv-scenarios__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.inv-scenarios__list li { padding: .65em 1.15em; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-weight: 560; transition: background .3s, border-color .3s, color .3s; }
.inv-scenarios__list li:hover { background: var(--iris-tint); border-color: var(--iris); color: var(--iris-deep); }
.inv-outs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--s4) var(--s5); margin: 0; }
.inv-outs__item { border-top: 1px solid rgb(255 255 255 / 18%); padding-top: var(--s3); }
.inv-outs dt { font-family: var(--f-display); font-size: 1.4rem; font-weight: 640; margin-bottom: .5rem; }
.inv-outs dt::before { content: ""; display: block; width: 2rem; height: 3px; border-radius: 3px; background: var(--mint); margin-bottom: var(--s2); }
.inv-outs dd { margin: 0; color: rgb(255 255 255 / 75%); }

/* story page */
.inv-story__hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.inv-story__title { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.75rem); max-width: 18ch; }
.inv-story__event { font-size: var(--fs-3); color: var(--ink-2); margin-top: var(--s2); }
.inv-story__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s2) var(--s3); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.inv-story__facts dt { font-size: .82rem; color: var(--ink-3); }
.inv-story__facts dd { margin: .15rem 0 0; font-weight: 600; }
.inv-story__photo { position: relative; }
.inv-story__photo::before { content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; z-index: -1; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--iris-tint), var(--mint-tint)); }
html[dir="rtl"] .inv-story__photo::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; }
.inv-story__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.inv-story__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.inv-story__aside { position: sticky; top: calc(var(--hdr) + 2rem); transition: top .5s var(--ease-out); }
.inv-story__used-h { font-family: var(--f-text); font-size: 1rem; font-weight: 600; color: var(--ink-3); margin: var(--s4) 0 var(--s2); letter-spacing: 0; }
.inv-quote { position: relative; overflow: hidden; margin: 0; padding: var(--s4); color: var(--on); border-radius: var(--r-lg); background: radial-gradient(26rem 16rem at 100% 0%, rgb(85 214 190 / 28%), transparent 70%), var(--night); }
.inv-quote::before { content: "“"; position: absolute; inset-inline-end: 1.2rem; top: -1.4rem; font-family: Georgia, serif; font-size: 9rem; line-height: 1; color: rgb(255 255 255 / 10%); }
.inv-quote blockquote { margin: 0; }
.inv-quote blockquote p { font-family: var(--f-display); font-size: 1.4rem; line-height: 1.35; font-weight: 560; letter-spacing: -.01em; }
.inv-quote figcaption { display: grid; gap: .15rem; margin-top: var(--s3); font-size: .95rem; }
.inv-quote figcaption span { color: rgb(255 255 255 / 70%); }
.inv-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s2); }
.inv-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 900px) { .inv-story__hero-inner, .inv-story__body { grid-template-columns: 1fr; } .inv-story__aside { position: static; } .inv-story__photo::before { inset: 1rem -.6rem -.8rem 1rem; } }

/* guide page */
.inv-guide__head, .inv-post__head { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--s4); background: linear-gradient(180deg, var(--mist), var(--white)); }
.inv-guide__title { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); max-width: 22ch; }
.inv-guide__goal { font-size: var(--fs-3); color: var(--ink-2); max-width: 50ch; margin-top: var(--s3); line-height: 1.55; }
.inv-guide__dur { display: inline-flex; gap: .35rem; align-items: center; color: var(--ink-3); font-weight: 500; }
.inv-guide__layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; padding-bottom: var(--sec); }
.inv-guide__video { margin-bottom: var(--s5); }
.inv-guide__aside { display: grid; gap: var(--s3); position: sticky; top: calc(var(--hdr) + 1.5rem); transition: top .5s var(--ease-out); }
@media (max-width: 980px) { .inv-guide__layout { grid-template-columns: 1fr; } .inv-guide__aside { position: static; } }
.inv-steps__h { font-size: var(--fs-2); margin-bottom: var(--s4); }
.inv-steps__list { display: grid; }
.inv-steps__item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1.1rem .6rem; border-top: 1px solid var(--line); border-radius: 10px; transition: background .4s; }
.inv-steps__item.is-now { background: var(--mint-tint); }
.inv-steps__n { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--night); color: var(--mint); font-family: var(--f-mono); font-weight: 600; font-size: .9rem; }
.inv-steps__text { margin: 0; padding-top: .2rem; }
.inv-steps__jump { display: inline-flex; gap: .35rem; align-items: center; padding: .35rem .75rem; min-height: 38px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--white); color: var(--iris-deep); font: inherit; font-size: .82rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background .2s; }
.inv-steps__jump .inv-ico { width: .8rem; height: .8rem; }
.inv-steps__jump:hover { border-color: var(--iris); background: var(--iris-tint); }
.inv-aside-box { padding: var(--s3); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.inv-aside-box h2 { font-size: 1.15rem; margin-bottom: var(--s2); }
.inv-aside-box ul:not(.inv-ticks) { margin: 0; padding-inline-start: 1.1em; display: grid; gap: .5rem; }
.inv-aside-box p { margin: 0; font-size: 1rem; }
.inv-aside-box--tip { background: var(--mint-tint); border-color: transparent; box-shadow: none; }

/* update page */
.inv-post__title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); }
.inv-post__body { padding-block: var(--s4) var(--sec); display: grid; gap: var(--s4); }
.inv-post__media { margin: 0; } .inv-post__media img { border-radius: var(--r-lg); width: 100%; box-shadow: var(--shadow); }

/* ==========================================================================
   Editor content: pages built from blocks (sections are Group blocks)
   ========================================================================== */
.inv-blocks .wp-block-group__inner-container { display: contents; }
.inv-blocks > .wp-block-group, .inv-blocks > section:not(.hx):not(.x-trust):not(.x-layers):not(.x-day):not(.x-cta) { padding: var(--sec) max(var(--gutter), (100% - var(--max)) / 2); }
.inv-blocks > .wp-block-group { position: relative; isolation: isolate; }
.inv-blocks > .wp-block-group.inv-hero { overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 6rem); background: linear-gradient(180deg, var(--mist), var(--white)); }
.inv-blocks > .wp-block-group.inv-hero::before { content: ""; position: absolute; z-index: -1; width: 52rem; height: 52rem; inset-inline-start: -22rem; bottom: -34rem; border-radius: 50%; border: 1px solid rgb(125 91 166 / 14%); box-shadow: 0 0 0 70px rgb(125 91 166 / 3%), 0 0 0 140px rgb(125 91 166 / 2.5%); pointer-events: none; }
.inv-blocks > .wp-block-group.inv-hero::after { content: ""; position: absolute; z-index: -1; width: 46rem; height: 30rem; inset-inline-end: -10rem; top: -8rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(185 162 255 / 28%), transparent); pointer-events: none; }
.inv-hero__grid, .inv-hero > .wp-block-columns, .inv-blocks .inv-hero .wp-block-columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; margin: 0; }
.inv-hero h1 { font-size: var(--fs-1); max-width: 15ch; }
.inv-hero .inv-hero__lede, .inv-hero h1 + p { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); max-width: 42ch; margin-block: var(--s3) var(--s4); }
.inv-hero .wp-block-column { min-width: 0; }
.inv-hero .wp-block-column:last-child { animation: x-stage-in 1.3s var(--ease-out) both .35s; }
@keyframes x-stage-in { from { opacity: 0; transform: translateY(50px); } }
@media (max-width: 900px) { .inv-hero__grid, .inv-hero > .wp-block-columns, .inv-blocks .inv-hero .wp-block-columns { grid-template-columns: 1fr; } }
.inv-blocks > .wp-block-group.is-style-band { background: var(--mist); }
.inv-blocks > .wp-block-group.is-style-ink { overflow: hidden; background: radial-gradient(40rem 26rem at 90% 0%, rgb(85 214 190 / 16%), transparent 70%), var(--night); color: rgb(255 255 255 / 80%); }
.inv-blocks > .wp-block-group.is-style-ink :is(h2, h3) { color: var(--on); }
.inv-blocks > .wp-block-group.is-style-ink .inv-proof__value { color: var(--on); }
.inv-blocks > .wp-block-group.is-style-ink .inv-proof__label { color: rgb(255 255 255 / 70%); }
.inv-blocks > .wp-block-group.is-style-ink h2.wp-block-heading + p { color: rgb(255 255 255 / 75%); }
.inv-blocks > .wp-block-group.is-style-ink.inv-s { text-align: center; }
.inv-blocks > .wp-block-group.is-style-ink.inv-s :is(h2, p) { margin-inline: auto; }
.inv-blocks > .wp-block-group.is-style-ink.inv-s .inv-ctas { align-items: center; }
.inv-blocks > .wp-block-group.is-style-ink.inv-s .inv-ctas__buttons { justify-content: center; }
.inv-blocks > .wp-block-group.is-style-ink .inv-ctas__terms { color: rgb(255 255 255 / 65%); }
.inv-blocks > .wp-block-group.inv-s--tight { padding-block: calc(var(--sec) * .6); }
.inv-blocks > .wp-block-group.inv-s--flushtop { padding-top: clamp(1rem, 2vw, 2rem); }
.inv-blocks h2.wp-block-heading { font-size: var(--fs-2); letter-spacing: -.035em; max-width: 22ch; margin-bottom: var(--s3); }
.inv-blocks h2.wp-block-heading + p { font-size: var(--fs-3); line-height: 1.55; color: var(--ink-2); max-width: 48ch; margin-bottom: var(--s5); }
.inv-blocks h3.wp-block-heading { font-size: var(--fs-3); margin-bottom: var(--s1); }
.inv-blocks p { max-width: var(--measure); }
.inv-blocks p.x-kicker { margin-bottom: var(--s2); }
.inv-blocks .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s4); margin: 0; }
.inv-blocks .wp-block-columns.inv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.inv-blocks .wp-block-columns.inv-pricing-home { align-items: start; }
@media (max-width: 860px) { .inv-blocks .wp-block-columns.inv-cols-2 { grid-template-columns: 1fr; } }
.inv-blocks .wp-block-column > .inv-scene { margin-inline: auto; }
.inv-blocks .wp-block-column > h3.wp-block-heading:first-child { display: flex; align-items: center; gap: .6rem; }
.inv-blocks .wp-block-column > h3.wp-block-heading:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px var(--mint-tint); flex: none; }
.is-style-ink .wp-block-column > h3.wp-block-heading:first-child::before { box-shadow: 0 0 0 5px rgb(85 214 190 / 18%); }
.inv-blocks .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.inv-blocks .wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: .7em 1.4em; border-radius: 10px; background: var(--iris); color: var(--on); text-decoration: none; font-weight: 600; font-size: 1rem; border: 1.5px solid var(--iris); }
.inv-blocks .wp-block-button__link:hover { background: var(--iris-deep); color: var(--on); }
.inv-blocks :is(.is-style-secondary, .is-style-outline) .wp-block-button__link { background: transparent; color: var(--iris-deep); border-color: var(--line-2); }
.inv-blocks .wp-block-shortcode { margin: 0; }
.inv-blocks .inv-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.inv-blocks .inv-head-row h2.wp-block-heading, .inv-blocks .inv-head-row p { margin: 0; }
.inv-blocks .inv-proof { margin-top: var(--s2); }
.inv-blocks .inv-names { margin-top: var(--s4); }
.inv-contact-sec .inv-contact-list { margin-top: var(--s3); }
/* modules (platform page) */
.inv-module { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; padding-block: var(--s6); border-top: 1px solid var(--line); }
.inv-module:first-of-type { border-top: 0; padding-top: 0; }
.inv-module h3.wp-block-heading { font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.5rem); }
.inv-module .inv-module__tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 650; color: var(--iris); margin-bottom: var(--s1); }
.inv-module .inv-module__tag::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--mint); }
.inv-module .inv-scene { margin-top: var(--s4); }
.inv-module > .wp-block-group:first-child { position: sticky; top: calc(var(--hdr) + 2rem); transition: top .5s var(--ease-out); }
.inv-feature-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s3); }
.inv-feature-groups > .wp-block-group { padding: var(--s3); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.inv-feature-groups h4 { font-family: var(--f-text); font-size: 1.02rem; font-weight: 650; letter-spacing: 0; margin-bottom: .8rem; color: var(--ink); }
.inv-feature-groups ul { margin: 0; font-size: 1rem; }
@media (max-width: 860px) { .inv-module { grid-template-columns: 1fr; } .inv-module > .wp-block-group:first-child { position: static; } }
/* prose */
.inv-prose { max-width: 46rem; }
.inv-prose > * + * { margin-top: var(--s2); }
.inv-prose h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-top: var(--s5); margin-bottom: var(--s1); }
.inv-prose h3 { font-size: 1.3rem; margin-top: var(--s4); margin-bottom: .2rem; }
.inv-prose li + li { margin-top: .4rem; }
.inv-prose .inv-updated { display: inline-flex; font-size: .9rem; color: var(--ink-3); padding: .35rem .8rem; border-radius: 999px; background: var(--mist); }
.inv-prose .inv-yt { margin-top: var(--s4); }
.inv-prose a { color: var(--iris-deep); }
/* contact page layout */
.inv-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 900px) { .inv-contact { grid-template-columns: 1fr; } }

/* ==========================================================================
   Closing call to action
   ========================================================================== */
.x-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); background: var(--night); color: rgb(255 255 255 / 80%); text-align: center; }
.x-cta__bg { position: absolute; inset: 0; z-index: -2; }
.x-cta__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(3px) brightness(.7) saturate(.95); transform: scale(1.08); }
.x-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 26rem at 50% 115%, rgb(85 214 190 / 28%), transparent 70%), linear-gradient(180deg, rgb(14 9 28 / 86%), rgb(20 13 38 / 72%) 50%, rgb(14 9 28 / 92%)); }
.x-cta__in { display: flex; flex-direction: column; align-items: center; }
.x-cta__mark { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; margin-bottom: var(--s4); }
.x-cta__disc { position: relative; z-index: 2; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #F6F1FF 45%, #E7DDF8); box-shadow: inset 0 -10px 20px rgb(125 91 166 / 25%), 0 0 40px rgb(85 214 190 / 40%); }
.x-cta__svg { width: 44%; height: auto; overflow: visible; }
.x-cta__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(85 214 190 / 55%); animation: x-ripple 3.6s var(--ease) infinite; }
.x-cta__ring + .x-cta__ring { animation-delay: 1.8s; border-color: rgb(185 162 255 / 50%); }
@keyframes x-ripple { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.x-cta__title { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.5rem); letter-spacing: -.045em; max-width: 16ch; color: #fff; }
.x-cta__title .hl { color: var(--mint); }
.x-cta__text { color: rgb(255 255 255 / 76%); max-width: 48ch; margin: 1.3rem auto 2.2rem; font-size: var(--fs-3); line-height: 1.55; }
.x-cta .inv-ctas__terms { color: rgb(255 255 255 / 62%); }
.x-cta .inv-ctas__terms::before { box-shadow: 0 0 0 4px rgb(85 214 190 / 20%); }
.inv-blocks > .x-cta { padding-inline: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.inv-footer { position: relative; overflow: hidden; isolation: isolate; color: var(--ink-2); padding-top: var(--s7); font-size: .98rem; background: var(--mist); }
.inv-footer::before { content: ""; position: absolute; z-index: -1; width: 40rem; height: 40rem; inset-inline-end: -14rem; top: -18rem; border-radius: 50%; border: 1px solid rgb(125 91 166 / 12%); box-shadow: 0 0 0 60px rgb(125 91 166 / 2.5%), 0 0 0 120px rgb(125 91 166 / 2%); }
.inv-footer__glow { display: none; }
.inv-footer a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.inv-footer a:hover { color: var(--iris); }
.inv-footer__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--s5); }
.inv-footer .inv-logo svg { height: 42px; }
.inv-footer__tag { margin: var(--s3) 0 .6rem; font-family: var(--f-display); font-weight: 650; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); }
.inv-footer__about { max-width: 38ch; font-size: .95rem; color: var(--ink-3); }
.inv-footer__status { white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; margin-top: .5rem; padding: .45rem .9rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }
.inv-footer__status .x-live__dot { width: .5rem; height: .5rem; box-shadow: 0 0 0 4px var(--mint-tint); animation: none; }
.inv-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.inv-footer__cols > li > a { font-size: .85rem; font-weight: 650; letter-spacing: .02em; color: var(--ink); pointer-events: none; }
.inv-footer__cols > li > a[href]:not([href="#"]) { pointer-events: auto; }
.inv-footer__cols .sub-menu { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: .05rem; }
.inv-footer__cols .sub-menu a { position: relative; display: inline-flex; min-height: 40px; align-items: center; color: var(--ink-2); }
.inv-footer__cols .sub-menu a::before { content: ""; position: absolute; inset-inline-start: -.9rem; width: .4rem; height: 2px; border-radius: 2px; background: var(--mint); opacity: 0; transform: scaleX(0); transition: opacity .25s, transform .35s var(--ease-out); }
.inv-footer__cols .sub-menu a:hover::before { opacity: 1; transform: none; }
.inv-footer__h { font-family: var(--f-text); font-size: .85rem; font-weight: 650; letter-spacing: .02em; color: var(--ink); margin-bottom: var(--s1); }
.inv-footer .inv-contact-list a { padding: .45rem 0; }
.inv-footer .inv-contact-list .inv-ico { width: 2.2rem; height: 2.2rem; padding: .5rem; background: var(--white); }
.inv-footer .inv-contact-list__value { color: var(--ink); font-size: .93rem; }
.inv-footer__social { display: flex; gap: .5rem; margin-top: var(--s2); }
.inv-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); color: var(--iris); transition: background .25s, color .25s, transform .45s var(--ease-out), border-color .25s; }
.inv-footer__social a:hover { background: var(--mint); border-color: var(--mint); color: var(--mint-dark); transform: translateY(-3px); }
.inv-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); border-top: 1px solid var(--line-2); margin-top: var(--s6); padding-block: var(--s3) var(--s4); font-size: .88rem; color: var(--ink-3); }
.inv-footer__bottom p { margin: 0; }
.inv-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
	background: linear-gradient(180deg, rgb(125 91 166 / 16%), rgb(125 91 166 / 0%) 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1000px) { .inv-footer__top { grid-template-columns: 1fr 1fr; } .inv-footer__nav { grid-column: 1 / -1; order: 3; } }
@media (max-width: 640px) { .inv-footer__top { grid-template-columns: 1fr; } .inv-footer__cols { grid-template-columns: 1fr 1fr; } .inv-footer__cols > li:first-child { grid-column: 1 / -1; } }

/* ==========================================================================
   Motion: text that enters and leaves, blocks that reveal (content stays visible without script)
   ========================================================================== */
.x-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .1em; margin-block: -.1em; padding-inline: .02em; margin-inline: -.02em; }
.x-split .w > i { display: inline-block; font-style: normal; transform: translateY(105%); opacity: 0;
	transition: transform .95s var(--ease-out), opacity .6s var(--ease); transition-delay: calc(var(--wi) * 45ms + var(--sd, 0s)); }
.x-split.is-in .w > i { transform: none; opacity: 1; }
/* leaving: words lift away one after another as the heading scrolls under the header */
.js .x-reveal { opacity: 0; translate: 0 32px; transition: opacity .9s var(--ease), translate 1.1s var(--ease-out), scale 1.1s var(--ease-out); transition-delay: var(--rd, 0s); }
.js .x-reveal--left { translate: -40px 0; } html[dir="rtl"].js .x-reveal--left { translate: 40px 0; }
.js .x-reveal--right { translate: 40px 0; } html[dir="rtl"].js .x-reveal--right { translate: -40px 0; }
.js .x-reveal--zoom { translate: 0 24px; scale: .95; }
.js .x-reveal.is-in { opacity: 1; translate: 0 0; scale: 1; }
/* kicker bars and dividers draw in */
.js .x-kicker.x-reveal::before { transform: skewX(-18deg) scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .25s; }
.js .x-kicker.x-reveal.is-in::before { transform: skewX(-18deg); }
html[dir="rtl"].js .x-kicker.x-reveal::before { transform: skewX(18deg) scaleX(0); transform-origin: right; }
html[dir="rtl"].js .x-kicker.x-reveal.is-in::before { transform: skewX(18deg); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js .x-reveal, .x-split .w > i { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; }
	.hx__art { opacity: 1; transform: none; }
	.hx__dust { display: none; }
	.hx__title .ul::after { transform: scaleX(1); }
	.ap-ev__bar i, .ap-cp__bar i, .hx__bar > i { transform: none; }
	.hx__st { opacity: 1; transform: none; }
	.hx__cb { background: var(--mint); border-color: var(--mint); } .hx__cb::after { opacity: 1; }
}

/* ---------- print ---------- */
@media print {
	.inv-header, .inv-footer, .x-cta, .inv-topics, .x-progress, .hx__art, .x-day__bg, .hx__bg { display: none; }
	body { background: #fff; color: #000; }
	.hx, .x-day { background: #fff; color: #000; }
}

/* Arabic: the sample names are already shown in Arabic, so the second (Arabic) line is not repeated */
html[dir="rtl"] .ap-name i { display: none; }
html[dir="rtl"] .hx__proof dt { direction: ltr; text-align: right; }

/* header: Book a demo next to the trial (report INV-13/14); on small screens it moves into the menu */
@media (max-width: 1180px) { .inv-header__demo { display: none; } }
.x-uc-more { margin-top: 1.6rem; }
.inv-note { margin-top: var(--s3); font-size: .9rem; color: var(--ink-3); max-width: 70ch; }
/* feature pages: numbered "how it works" steps and related links */
.inv-flow-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); counter-reset: fl; }
.inv-flow-list li { counter-increment: fl; position: relative; padding-inline-start: 3rem; color: var(--ink-2); line-height: 1.55; }
.inv-flow-list li::before { content: counter(fl); position: absolute; inset-inline-start: 0; top: -.1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--iris-tint); color: var(--iris); font-weight: 650; font-size: .95rem; }
.inv-flow-list strong { color: var(--ink); font-weight: 620; }
.inv-related { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
/* phones: keep the home page short (report 6.4: what matters within three screens).
   The detail lists live on each feature page, linked from every layer. */
@media (max-width: 700px) {
	.x-layer .inv-ticks { display: none; }
	.x-layer .x-layer__p { margin-bottom: var(--s3); }
	.x-layers__rows { gap: var(--s6); }
	.x-layer { gap: var(--s3); }
}
@media (max-width: 700px) {
	/* home stories: swipe sideways instead of stacking three tall cards */
	.inv-blocks--home .inv-passes { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: var(--s1) var(--gutter) var(--s2); scroll-padding-inline: var(--gutter); }
	.inv-blocks--home .inv-passes::-webkit-scrollbar { display: none; }
	.inv-blocks--home .inv-passes > * { flex: 0 0 86%; scroll-snap-align: start; }
	/* product scenes a little smaller, still readable */
	.x-layer__scene { zoom: .86; }
}
/* update cards: vertical videos shown whole on the brand background; a branded tile when there is no image */
.inv-update__media { position: relative; }
.inv-update__media.is-tall { background: radial-gradient(70% 90% at 50% 40%, #3A2260 0%, var(--night) 100%); }
/* a Short: the middle strip of the 4:3 thumbnail is the designed vertical thumbnail */
.inv-update__media.is-tall .inv-update__img { position: absolute; inset: 0; margin-inline: auto; width: auto; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: center; }
.inv-update__play { position: absolute; inset-inline-start: .75rem; bottom: .75rem; width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--iris); box-shadow: 0 6px 18px rgb(0 0 0 / 25%); transition: background .3s, color .3s, transform .3s; }
.inv-update__play .inv-ico { width: 1rem; height: 1rem; margin-inline-start: 2px; }
.inv-update:hover .inv-update__play { background: var(--mint); color: var(--mint-dark); transform: scale(1.08); }
.inv-update__media--blank { display: grid; place-items: center; background: radial-gradient(60% 80% at 80% 10%, rgb(185 162 255 / 35%), transparent 70%), radial-gradient(50% 70% at 10% 100%, rgb(85 214 190 / 25%), transparent 70%), var(--mist); }
.inv-update__mark { width: 38%; max-width: 11rem; opacity: .9; transition: transform .7s var(--ease-out); }
.inv-update__mark svg { width: 100%; height: auto; display: block; }
.inv-update:hover .inv-update__mark { transform: scale(1.04); }

/* ==========================================================================
   Phones (≤ 700 px): larger type, full-width cards, one rhythm for spacing.
   Everything above is the desktop/tablet design; this layer only adjusts phones.
   ========================================================================== */
@media (max-width: 700px) {
	html { font-size: 106.25%; } /* 17 px base: every rem-based size grows ~6% */
	:root { --gutter: 1.15rem; }

	/* rhythm: every section breathes the same */
	.inv-s, .x-layers, .x-day { padding-block: 3.5rem; }
	.inv-blocks h2.wp-block-heading, .x-h2 { font-size: 2rem; line-height: 1.12; margin-bottom: 1rem; }
	.x-lede, .inv-blocks .wp-block-group > p { font-size: 1.08rem; line-height: 1.6; }
	.x-kicker { font-size: .95rem; margin-bottom: .75rem; }

	/* hero: bigger headline and sentence, numbers stacked as clear rows */
	.hx__title { font-size: 2.45rem; line-height: 1.06; }
	html[dir="rtl"] .hx__title { font-size: 2.2rem; line-height: 1.3; }
	.hx__lead { font-size: 1.08rem; line-height: 1.6; color: rgb(255 255 255 / 88%); }
	.hx__kicker { font-size: .92rem; }
	.inv-ctas { display: block; }
	.inv-ctas__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; width: 100%; }
	.inv-ctas__buttons .inv-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; padding-inline: .6rem; white-space: nowrap; }
	.inv-ctas__terms { font-size: .92rem; margin-top: .9rem; }
	.hx__proof { grid-template-columns: 1fr; gap: 0; margin-top: 1.75rem; }
	.hx__proof > div, .hx__proof > div:first-child { display: grid; grid-template-columns: 6.2rem 1fr; align-items: center; gap: .9rem; padding: .85rem 0; border: 0; border-top: 1px solid rgb(255 255 255 / 14%); max-width: none; }
	.hx__proof dt { font-size: 2rem; margin: 0; }
	.hx__proof dd, .hx__proof > div dd { font-size: 1rem; line-height: 1.4; color: #CFF3EB; }
	.hx__scene { height: 520px; }

	/* header */
	.inv-header .inv-btn { font-size: .95rem; min-height: 44px; }

	/* product layers: scenes full size, readable */
	.x-layer__scene { zoom: 1; }
	.x-layer__h { font-size: 1.65rem; line-height: 1.18; }
	.x-layer__p { font-size: 1.05rem; }
	.x-layer__verb, .x-layer__name { font-size: .9rem; }

	/* customer stories: wider cards, bigger text */
	.inv-blocks--home .inv-passes > * { flex-basis: 90%; }
	.js .inv-blocks--home .inv-passes > .x-reveal { opacity: 1; translate: none; scale: none; } /* cards off to the side never "enter" vertically */
	.inv-pass h3, .inv-pass__title { font-size: 1.35rem; }
	.inv-pass__kind, .inv-pass__facts, .inv-pass__quote, .inv-pass__event { font-size: .95rem; }
	.inv-passes small { font-size: .85rem; }

	/* pricing */
	.inv-plan__price, .inv-plan__badge { font-size: .9rem; }
	.inv-plan__summary { font-size: 1rem; }

	/* use cases: one per row, icon + name + one line, instead of tiny tiles */
	.x-uc { grid-template-columns: 1fr; gap: .6rem; }
	.x-uc__card { grid-template-columns: 2.6rem 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .15rem; align-items: center; padding: .95rem 1rem; }
	.x-uc__ico { grid-row: 1 / 3; }
	.x-uc__name { font-size: 1.08rem; margin: 0; }
	.x-uc__text { display: -webkit-box; -webkit-line-clamp: 2; font-size: .92rem; line-height: 1.45; }
	.x-uc__go { display: none; }

	/* news, FAQ, contact, footer */
	.inv-update__title { font-size: 1.25rem; }
	.inv-update__meta, .inv-update__type { font-size: .9rem; }
	.inv-faq__q { font-size: 1.1rem; }
	.inv-contact-list__label { font-size: .9rem; }
	.inv-contact-list__value { font-size: 1rem; }
	.inv-footer, .inv-footer .menu-item a { font-size: 1rem; }
	.inv-footer__bottom { font-size: .9rem; }
}
@media (max-width: 700px) {
	/* section heading → content: one consistent, shorter gap */
	.inv-blocks .inv-head-row { margin-bottom: 1.4rem; row-gap: .5rem; }
	.inv-blocks .inv-head-row p, .inv-blocks .inv-head-row .wp-block-group__inner-container > * { margin-block: 0; }
	.inv-pricing-home .inv-link { margin-top: .25rem; }
	/* the layers intro reads left-aligned like every other section */
	.x-layers__head { text-align: start; justify-items: start; margin-inline: 0; margin-bottom: 2.25rem; }
	.x-layers__head .x-lede { margin-inline: 0; }
	.x-layers__head .x-kicker { justify-content: flex-start; }
	/* news on the home page: swipe sideways like the stories */
	.inv-blocks--home .inv-updates { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s1); scroll-padding-inline: var(--gutter); }
	.inv-blocks--home .inv-updates::-webkit-scrollbar { display: none; }
	.inv-blocks--home .inv-updates > * { flex: 0 0 86%; scroll-snap-align: start; }
	.js .inv-blocks--home .inv-updates > .x-reveal { opacity: 1; translate: none; scale: none; }
	/* reveals: quicker and shorter on a phone, so nothing stays blank while scrolling */
	.js .x-reveal { translate: 0 14px; transition-duration: .45s, .55s, .55s; }
	.js .x-reveal--left, .js .x-reveal--right { translate: 0 14px; }
	.js .x-reveal--zoom { translate: 0 12px; scale: .98; }
	.x-split .w > i { transition-duration: .6s, .4s; transition-delay: calc(var(--wi) * 30ms + var(--sd, 0s)); }
}
@media (max-width: 700px) {
	/* small labels that carry information: never below ~14.5 px on a phone */
	.inv-guide-card__time, .inv-chip, .inv-steps__jump, .x-trust__list small, .inv-plan__price, html[dir="rtl"] .inv-plan__price { font-size: .86rem; }
}
/* hero demo rows: names stay on one line, status chips never wrap */
.hx__rows li > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx__st, .hx__rows .hx__tag { flex: none; white-space: nowrap; }

/* ==========================================================================
   Hero panels: real iNVEETO screens inside the ring scene (inc/hero-app.php).
   App tokens from the live app: purple #5C4B98, canvas #F7F8FD, search #EEE, blue toast #E3F2FD.
   ========================================================================== */
.hx__act { width: 42%; min-height: 0; height: 21em; bottom: 3%; direction: ltr; font: 400 clamp(9.5px, .8vw, 12.5px)/1.3 Roboto, "Segoe UI", system-ui, sans-serif; }
html[dir="rtl"] .hx__act { direction: ltr; }
.hx__pane { padding: 0; gap: 0; border-radius: 12px; background: #F7F8FD; border: 1px solid rgb(255 255 255 / 60%); box-shadow: 0 28px 60px rgb(5 2 20 / 55%), 0 0 0 6px rgb(255 255 255 / 6%); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; color: #1D1D27; }
.hx__app { --ap: #5C4B98; display: grid; grid-template-columns: 3em 1fr; height: 21em; text-align: left; }
.hx__side { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: .7em 0; background: #fff; border-right: 1px solid #E6E7EE; }
.hx__side-logo { width: 2.3em; height: 2.3em; border-radius: 50%; border: max(1.5px, .09em) solid #5A5370; background: #fff; display: grid; place-items: center; margin-bottom: .4em; }
.hx__side-logo svg { width: 1.02em; height: auto; transform: translate(-3%, -2%); overflow: visible; }
.hx__side-logo .mk { animation: none !important; }
.hx__side-i { width: 1.85em; height: 1.85em; display: grid; place-items: center; border-radius: .45em; color: #6B6D7C; }
.hx__side-i svg { width: 1.2em; height: 1.2em; }
.hx__side-i.on { background: var(--ap); color: #fff; }
.hx__main { position: relative; display: flex; flex-direction: column; gap: .6em; padding: .9em 1em; min-width: 0; }
.hx__apph { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.hx__apph > b { font-size: 1.32em; font-weight: 500; color: #1D1D27; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx__apph small, .hx__bar-row small, .hx__bot > span:first-child { font-size: .92em; color: #5E6070; white-space: nowrap; }
.hx__apph small b, .hx__bar-row small b, .hx__bot b { color: var(--ap); font-weight: 700; font-variant-numeric: tabular-nums; }
.hx__tabs { margin: 0; display: flex; gap: 1.1em; border-bottom: 1px solid #E6E7EE; font-size: .86em; text-transform: uppercase; letter-spacing: .04em; color: #5E6070; }
.hx__tabs span { padding-bottom: .45em; }
.hx__tabs .on { color: var(--ap); box-shadow: inset 0 -2px 0 var(--ap); }
.hx__pane .hx__rows { gap: 0; border: 1px solid #E6E7EE; border-radius: .5em; background: #fff; overflow: hidden; }
.hx__pane .hx__rows li { height: 2.75em; padding: 0 .75em; gap: .6em; border-radius: 0; background: #fff; font-size: 1em; color: #1D1D27; }
.hx__pane .hx__rows li + li { border-top: 1px solid #EEEFF4; }
.hx__rows li > span { display: flex; flex-direction: column; line-height: 1.15; }
.hx__rows li > span b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hx__rows li > span small { font-size: .82em; color: #8A8C99; text-align: left; }
.hx__pane .hx__tag { margin-inline-start: auto; padding: .2em .75em; font-size: .86em; font-weight: 500; background: var(--ap); color: #fff; }
.hx__pane .hx__cb { width: 1.15em; height: 1.15em; border: 1.5px solid #8A8C99; border-radius: .2em; color: #fff; }
.hx__pane .hx__cb::after { content: none; }
.hx__pane .hx__cb svg { width: .95em; height: .95em; stroke-width: 3; opacity: 0; }
.hx__gt { font-style: normal; display: inline-flex; align-items: center; gap: .2em; min-width: 5.4em; padding-bottom: .15em; border-bottom: 1px solid #C9CAD3; font-size: .9em; color: #1D1D27; }
.hx__gt svg, .hx__field--sel svg { width: 1em; height: 1em; margin-inline-start: auto; color: #5E6070; }
.hx__search { margin: 0; display: flex; align-items: center; height: 2.3em; padding: 0 .9em; border-radius: 999px; background: #EEEEEE; color: #1D1D27; }
.hx__search svg { width: 1.1em; height: 1.1em; margin-inline-start: auto; color: #5E6070; }
.hx__typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 1px solid #1D1D27; }
.hx__bot, .hx__bar-row { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.hx__bot { margin-top: auto; }
.hx__pill { display: inline-flex; align-items: center; height: 2.2em; padding: 0 1.1em; border-radius: 999px; background: var(--ap); color: #fff; font-size: .86em; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 2px 5px rgb(92 75 152 / 35%); white-space: nowrap; }
.hx__field { margin: 0; display: flex; flex-direction: column; gap: .1em; padding: .45em .75em; border: 1px solid #C9CAD3; border-radius: .35em; background: #fff; font-size: 1em; }
.hx__field small { font-size: .78em; color: #5E6070; }
.hx__field--sel { flex-direction: row; flex-wrap: wrap; align-items: center; }
.hx__field--sel small { flex-basis: 100%; }
.hx__check { margin: 0; display: flex; align-items: center; gap: .55em; }
.hx__url { margin: 0; display: flex; align-items: center; gap: .6em; height: 2.4em; padding: 0 .75em; border-radius: .35em; background: #EEEEEE; color: #5E6070; font-size: .92em; clip-path: inset(0 100% 0 0); }
.hx__url span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx__url svg { width: 1.2em; height: 1.2em; flex: none; color: #3A3B46; }
.hx__toast { position: absolute; left: 50%; bottom: .9em; translate: -50% 0; margin: 0; display: flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: .4em; background: #E3F2FD; color: #0D3C61; box-shadow: 0 4px 14px rgb(13 60 97 / 18%); white-space: nowrap; opacity: 0; transform: translateY(.6em); }
.hx__toast svg { width: 1.15em; height: 1.15em; color: #1E88E5; }
.hx__ci { position: relative; margin-inline-start: auto; font-style: normal; display: grid; }
.hx__ci > i, .hx__ci > .hx__st { grid-area: 1 / 1; display: grid; place-items: center; min-width: 6.4em; height: 1.95em; padding: 0 .8em; border-radius: 999px; font-style: normal; font-size: .8em; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.hx__ci > i { border: 1px solid var(--ap); color: var(--ap); }
.hx__pane .hx__st { margin: 0; background: var(--ap); color: #fff; }
.hx__pane .hx__st::after { content: none; }
/* the acting, replayed each time its step comes round (all within the 3.6 s step) */
.hx__act.go[data-step="0"] .hx__toast, .hx__act.go[data-step="2"] .hx__toast { animation: hx-toast 2.6s var(--ease-out) forwards; }
.hx__act.go[data-step="0"] .hx__toast { animation-delay: 1.5s; } .hx__act.go[data-step="2"] .hx__toast { animation-delay: 1.9s; }
@keyframes hx-toast { 0% { opacity: 0; transform: translateY(.6em); } 12%, 100% { opacity: 1; transform: none; } }
.hx__act.go[data-step="1"] .hx__typed { animation: hx-type .9s steps(8) .3s forwards; }
@keyframes hx-type { to { width: 4.6em; } }
.hx__act.go[data-step="1"] .hx__rows--sel .hx__cb, .hx__act.go[data-step="2"] .hx__check .hx__cb { animation: hx-tick-ap .25s var(--ease) forwards; }
.hx__act.go[data-step="2"] .hx__check .hx__cb { animation-delay: .6s; }
@keyframes hx-tick-ap { to { background: #5C4B98; border-color: #5C4B98; } }
.hx__act.go[data-step="1"] .hx__rows--sel .hx__cb svg, .hx__act.go[data-step="2"] .hx__check .hx__cb svg { animation: hx-show .2s linear forwards; animation-delay: inherit; }
.hx__act.go[data-step="2"] .hx__url { animation: hx-wipe .7s var(--ease-out) 1s forwards; }
@keyframes hx-wipe { to { clip-path: inset(0 0 0 0); } }
.hx__act.go[data-step="3"] .hx__rows--conf li { animation: hx-glow-ap 1.6s var(--ease) backwards; }
.hx__act.go[data-step="3"] li:nth-child(1) { animation-delay: .3s; } .hx__act.go[data-step="3"] li:nth-child(2) { animation-delay: .75s; } .hx__act.go[data-step="3"] li:nth-child(3) { animation-delay: 1.2s; }
@keyframes hx-glow-ap { 30% { background: #F0EDF8; } }
@media (max-width: 900px) {
	.hx__act { left: 0; right: 0; width: auto; height: 20em; bottom: 0; font-size: clamp(10.5px, 2.9vw, 12.5px); }
	.hx__app { height: 20em; }
}
@media (prefers-reduced-motion: reduce) {
	.hx__toast, .hx__url { opacity: 1; transform: none; clip-path: none; }
	.hx__typed { width: auto; border: 0; }
	.hx__pane .hx__cb { background: #5C4B98; border-color: #5C4B98; } .hx__pane .hx__cb svg { opacity: 1; }
}

/* ==========================================================================
   Customer stories (home): every organization, three stories, one way to the rest
   ========================================================================== */
.x-trust--inline { display: grid; grid-template-columns: auto 1fr; align-items: stretch; margin: clamp(1.25rem, 2.4vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 10px 30px rgb(60 30 110 / 7%); overflow: hidden; }
.x-trust--inline .x-trust__h { display: flex; align-items: center; gap: .7rem; margin: 0; padding: 1.1rem 1.5rem; background: linear-gradient(135deg, var(--iris-deep, #4F378B), #7D5BA6); color: #fff; font-family: var(--f-text); font-size: .95rem; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.x-trust__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--mint-dark); flex: none; }
.x-trust__ico svg { width: 17px; height: 17px; }
.x-trust--inline .x-trust__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0; margin: 0; padding: 0; }
.x-trust--inline .x-trust__list li { display: flex; border-inline-start: 1px solid var(--line); }
.x-trust--inline .x-trust__list a { flex: 1; display: grid; align-content: center; gap: .2rem; padding: 1rem 1.3rem; color: var(--ink); transition: background .25s, color .25s; }
.x-trust--inline .x-trust__list b { font-size: clamp(1rem, 1.15vw, 1.12rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.x-trust--inline .x-trust__list small { font-size: .82rem; color: var(--ink-3); }
.x-trust--inline .x-trust__list a:hover { background: var(--iris-tint); color: var(--iris-deep); }
.x-proof .x-more { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; }
.x-proof .x-more .inv-btn::after { content: "→"; margin-inline-start: .55rem; transition: transform .25s; }
html[dir="rtl"] .x-proof .x-more .inv-btn::after { content: "←"; }
.x-proof .x-more .inv-btn:hover::after { transform: translateX(3px); }
html[dir="rtl"] .x-proof .x-more .inv-btn:hover::after { transform: translateX(-3px); }
@media (max-width: 900px) {
	.x-trust--inline { grid-template-columns: 1fr; }
	.x-trust--inline .x-trust__h { padding: .85rem 1.1rem; }
	.x-trust--inline .x-trust__list { grid-template-columns: 1fr 1fr; }
	.x-trust--inline .x-trust__list li { border-inline-start: 0; border-top: 1px solid var(--line); }
	.x-trust--inline .x-trust__list li:nth-child(even) { border-inline-start: 1px solid var(--line); }
	.x-trust--inline .x-trust__list a { padding: .85rem 1rem; }
	.x-proof .x-more .inv-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   App windows: real iNVEETO screens, acted out (inc/hero-app.php + site.js), used in the three layers.
   Built at 640 px and scaled to fit. App tokens from the live app: purple #5C4B98, canvas #F7F8FD.
   ========================================================================== */
.hxa { --ap: #5C4B98; --ap-2: #4A3C82; --ap-bg: #F7F8FD; --ap-line: #E6E7EE; --ap-ink: #1D1D27; --ap-ink-2: #5E6070; --k: 1; width: 100%; max-width: 660px; margin-inline: auto; direction: ltr; }
.hxa__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.hxa__step { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px 12px; border: 0; border-radius: 12px; background: rgb(255 255 255 / 6%); color: rgb(255 255 255 / 62%); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: start; transition: background .3s, color .3s; overflow: hidden; }
.hxa__step:hover { background: rgb(255 255 255 / 11%); color: #fff; }
.hxa__step[aria-selected="true"] { background: rgb(255 255 255 / 14%); color: #fff; }
.hxa__n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / 12%); font-size: .75rem; }
.hxa__step[aria-selected="true"] .hxa__n { background: var(--mint); color: var(--mint-dark); }
.hxa__step.done .hxa__n { background: rgb(85 214 190 / 30%); color: #CFF3EB; }
.hxa__bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 12%); overflow: hidden; }
.hxa__bar > i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: inherit; }
.hxa__step.done .hxa__bar > i { width: 100%; background: rgb(85 214 190 / 55%); }
.hxa__step.run .hxa__bar > i { width: 100%; transition: width var(--dur, 6.5s) linear; }

.hxa__fit { position: relative; height: calc(408px * var(--k)); }
.hxa__win { position: absolute; top: 0; left: 0; width: 640px; transform: scale(var(--k)); transform-origin: 0 0; border-radius: 14px; background: #fff; box-shadow: 0 30px 80px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 10%); overflow: hidden; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ap-ink); letter-spacing: 0; }
.hxa__chrome { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #ECEDF2; border-bottom: 1px solid #DDDFE6; }
.hxa__chrome > i { width: 9px; height: 9px; border-radius: 50%; background: #F26B5E; } .hxa__chrome > i:nth-child(2) { background: #F5BE4F; } .hxa__chrome > i:nth-child(3) { background: #5ACB66; }
.hxa__chrome span { margin-inline: auto; padding: 3px 40px; border-radius: 6px; background: #fff; font-size: 10px; color: #6B6E7B; }
.hxa__app { display: grid; grid-template-columns: 52px 1fr; height: 380px; background: var(--ap-bg); }
.hxa__side { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0; background: #fff; border-inline-end: 1px solid var(--ap-line); }
.hxa__logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #5A5370; margin-bottom: 8px; }
.hxa__mark { width: 15px; height: auto; transform: translate(-3%, -2%); overflow: visible; }
.hxa__mark .mk { animation: none !important; }
.hxa__mark .mk--i, .hxa__mark .mk--n, .hxa__mark .mk--dot { fill: #7D5BA6; } .hxa__mark .mk--fig { fill: #55D6BE; }
.hxa__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #8A8C98; transition: background .35s, color .35s; }
.hxa__ico svg { width: 17px; height: 17px; }
.hxa__ico--end { margin-top: auto; }
.hxa[data-ico="ab"] .hxa__ico--ab, .hxa[data-ico="ev"] .hxa__ico--ev, .hxa[data-ico="cp"] .hxa__ico--cp { background: var(--ap); color: #fff; }

.hxa__main { position: relative; overflow: hidden; }
.hxa__screen { position: absolute; inset: 0; padding: 12px 18px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; font-size: 11px; }
.hxa__screen.on { opacity: 1; visibility: visible; transition: opacity .45s; }
.hxa__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hxa__top b { font-size: 15px; font-weight: 500; }
.hxa__lang { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 2px; border-bottom: 1px solid #9EA0AC; font-size: 10px; color: var(--ap-ink-2); }
.hxa svg { flex: none; }
.hxa__lang svg, .hxa__btn svg, .hxa__sel svg, .hxa__field svg, .hxa__acc svg, .hxa__ci svg { width: 11px; height: 11px; }
.hxa__tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--ap-line); }
.hxa__tabs span { padding: 6px 10px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: #6B6E7B; }
.hxa__tabs span.on { color: var(--ap); box-shadow: inset 0 -2px 0 var(--ap); }
.hxa__tabs--sm { margin-bottom: 8px; }
.hxa__bar-row { position: relative; z-index: 3; display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.hxa__btn { position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--ap); color: #fff; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 2px 4px rgb(60 40 120 / 25%); }
.hxa__btn--light { background: #ECECEF; color: #34343E; box-shadow: none; }
.hxa__btn--ghost { background: transparent; color: #4B4C59; border: 1px solid #C9CAD3; box-shadow: none; }
.hxa__btn--save { background: #DADBE2; color: #9C9DA8; box-shadow: none; transition: background .3s, color .3s; }
.hxa__search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 26px; padding: 0 10px; border-radius: 999px; background: #EEEEEE; color: #8D8E99; font-size: 10px; white-space: nowrap; overflow: hidden; }
.hxa__search svg { width: 12px; height: 12px; margin-inline-start: auto; color: #555; }
.hxa__typed { font-style: normal; color: var(--ap-ink); }
.hxa__search--typing.has-text .hxa__ph-t { display: none; }
.hxa__typed:not(:empty)::after { content: ""; display: inline-block; width: 1px; height: 11px; margin-inline-start: 1px; vertical-align: -1px; background: var(--ap-ink); animation: hxa-caret 1s steps(1) infinite; }
@keyframes hxa-caret { 50% { opacity: 0; } }
.hxa__typed:not(:empty) ~ svg, .hxa__search--typing:has(.hxa__typed:not(:empty)) { color: var(--ap-ink); }
.hxa__pills { display: flex; gap: 6px; margin-bottom: 8px; }
.hxa__pills span { padding: 4px 10px; border-radius: 999px; background: #ECECEF; font-size: 8.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: #34343E; }

.hxa__table { border: 1px solid var(--ap-line); border-radius: 6px; background: #fff; overflow: hidden; }
.hxa__tr { display: grid; grid-template-columns: 22px 1.15fr 1.5fr 1.15fr .8fr; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border-top: 1px solid #F0F1F5; font-size: 9.5px; color: #3A3B46; }
.hxa__tr--h { min-height: 28px; border-top: 0; font-weight: 500; color: var(--ap-ink); font-size: 9.5px; }
.hxa__tr b { font-weight: 500; color: var(--ap-ink); }
.hxa__tr small { display: block; font-size: 8.5px; color: #8A8C98; line-height: 1.25; }
.hxa__tr--sel { grid-template-columns: 22px 1.1fr 1.6fr .8fr .8fr; }
.hxa__tr--ci { grid-template-columns: 1.3fr .9fr .7fr 1fr; }
.hxa__cb { width: 11px; height: 11px; border: 1.5px solid #8A8C98; border-radius: 2px; transition: background .2s, border-color .2s; }
.hxa__cb.is-on { background: var(--ap); border-color: var(--ap); box-shadow: inset 0 0 0 2px #fff; }
.hxa__chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--ap); color: #fff; font-style: normal; font-size: 8.5px; line-height: 1.1; }
.hxa__chip--new { background: #E9A23B; }
.hxa__sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; padding: 3px 6px; border-bottom: 1px solid #B9BBC6; color: #3A3B46; }

/* screen 1 (address book): rows import one by one, a duplicate is found and merged */
.hxa__in { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s, max-height .5s, min-height .5s, padding .5s, background .3s; transition-delay: calc(var(--d) * 160ms); max-height: 60px; }
.hxa__screen.rows .hxa__in { opacity: 1; transform: none; }
.hxa__screen.dups .hxa__dup { background: #FFF6DD; transition-delay: 0s; }
.hxa__screen.merged .hxa__dup--b { opacity: 0; max-height: 0; min-height: 0; padding-block: 0; border-top-width: 0; transition-delay: 0s; }
.hxa__screen.merged .hxa__dup { background: #E9FBF6; }
.hxa__dd { position: relative; display: inline-flex; flex: none; }
.hxa__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 4; display: grid; min-width: 140px; padding: 5px 0; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgb(20 10 60 / 22%); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .2s, transform .2s; pointer-events: none; }
.hxa__menu span { padding: 6px 12px; font-size: 10px; color: #3A3B46; }
.hxa__menu span.on { transition: background .2s; }
.hxa__screen.menu .hxa__menu { opacity: 1; transform: none; }
.hxa__screen.menu-hl .hxa__menu span.on { background: #F0EDF8; color: var(--ap); }

/* screen 2 (invitation list) */
.hxa__modal { position: absolute; inset: 40px 14px 12px; padding: 12px 14px; border-radius: 6px; background: #fff; box-shadow: 0 10px 40px rgb(20 10 60 / 22%); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .4s, transform .4s; }
.hxa__screen.on .hxa__modal { opacity: 1; transform: none; }
.hxa__mt { margin: 0 0 9px; text-align: center; font-size: 12px; font-weight: 500; }
.hxa__modal .hxa__table { margin-bottom: 9px; }
.hxa__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hxa__count { font-size: 10px; color: var(--ap-ink-2); } .hxa__count b { font-size: 12px; color: var(--ap); font-weight: 700; }
.hxa__screen--1 .hxa__tr--sel[style] { transition: background .3s; }
.hxa__screen--1 .hxa__tr--sel.is-on { background: #F6F4FC; }

/* screen 3 (edit event): public link and QR code */
.hxa__form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; padding: 12px 14px; border-radius: 6px; background: #fff; border: 1px solid var(--ap-line); }
.hxa__field { display: grid; gap: 2px; padding: 5px 9px 6px; border: 1px solid #C9CAD3; border-radius: 4px; }
.hxa__field small { font-size: 8px; color: #6B6E7B; }
.hxa__field span { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--ap-ink); }
.hxa__field--wide { grid-column: 1 / -1; }
.hxa__field--sm { margin-inline-start: auto; min-width: 150px; }
.hxa__check-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 10px; }
.hxa__url { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; max-height: 0; padding: 0 10px; border: 1px solid transparent; border-radius: 4px; background: #F5F5F8; color: #6B6E7B; font-size: 9.5px; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease-out), padding .45s, opacity .35s, border-color .3s; }
.hxa__url span { flex: 1; }
.hxa__url i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: #555; } .hxa__url svg { width: 13px; height: 13px; }
.hxa__screen.pub .hxa__url { max-height: 40px; padding-block: 7px; opacity: 1; border-color: #E2E3EA; }
.hxa__acc { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid #E2E3EA; border-radius: 4px; font-size: 9px; color: #6B6E7B; }
.hxa__form .hxa__foot { grid-column: 1 / -1; padding-top: 4px; }
.hxa__screen.saved .hxa__btn--save { background: var(--ap); color: #fff; }
.hxa__qr { position: absolute; top: 50%; left: 50%; width: 190px; padding: 14px; border-radius: 6px; background: #fff; text-align: center; box-shadow: 0 0 0 999px rgb(20 20 40 / 35%), 0 14px 40px rgb(0 0 0 / 30%); transform: translate(-50%, -46%) scale(.96); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
.hxa__qr p { margin: 0 0 8px; font-size: 11px; font-weight: 500; }
.hxa__qr-img { display: grid; place-items: center; }
.hxa__qr-img svg { width: 96px; height: 96px; }
.hxa__qr-btns { display: flex; gap: 8px; margin-top: 10px; } .hxa__qr-btns span { flex: 1; padding: 5px 0; border: 1px solid #C9CAD3; border-radius: 999px; font-size: 9px; text-transform: uppercase; color: var(--ap); }
.hxa__screen.qr .hxa__qr { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .3s, transform .3s; }

/* screen 4 (check-in): rows turn to ATTENDED */
.hxa__ci { justify-self: end; position: relative; display: grid; }
.hxa__ci em, .hxa__ci strong { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 20px; padding: 0 10px; border-radius: 999px; font-style: normal; font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; transition: opacity .3s, transform .3s; }
.hxa__ci em { color: var(--ap); }
.hxa__ci strong { background: #C8C1E4; color: #3E3270; opacity: 0; transform: scale(.85); }
.hxa__tr--ci.is-on .hxa__ci em { opacity: 0; } .hxa__tr--ci.is-on .hxa__ci strong { opacity: 1; transform: none; }
.hxa__tr--ci { transition: background .4s; } .hxa__tr--ci.flash { background: #EAFBF6; }

/* shared: toast (copied from the app's "Event updated successfully"), cursor, caption */
.hxa__toast { position: absolute; top: 9px; left: 50%; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 4px; background: #E3F2FD; color: #0D3C61; font-size: 10px; white-space: nowrap; box-shadow: 0 4px 14px rgb(20 40 80 / 14%); transform: translate(-50%, -14px); opacity: 0; transition: opacity .35s, transform .35s var(--ease-out); z-index: 3; }
.hxa__toast svg { width: 13px; height: 13px; color: #1E88E5; }
.hxa__screen.toast .hxa__toast { opacity: 1; transform: translate(-50%, 0); }
.hxa__cursor { position: absolute; top: 0; left: 0; z-index: 5; width: 18px; height: 18px; transform: translate(var(--cx, 420px), var(--cy, 330px)); transition: transform .7s cubic-bezier(.45, .05, .25, 1); pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%)); }
.hxa__cursor svg { width: 100%; height: 100%; }
.hxa__cursor::after { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgb(92 75 152 / 35%); transform: scale(0); opacity: 0; }
.hxa__cursor.click::after { animation: hxa-click .45s ease-out; }
@keyframes hxa-click { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

@media (max-width: 900px) {
	.hxa__step { font-size: .8rem; padding: 8px 6px 11px; gap: 6px; justify-content: center; }
	.hxa__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 420px) {
	.hxa__step .hxa__label { display: none; }
	.hxa__step[aria-selected="true"] .hxa__label { display: inline; }
	.hxa__steps { grid-template-columns: auto auto auto auto; justify-content: start; }
}
@media (prefers-reduced-motion: reduce) {
	.hxa__cursor { display: none; }
	.hxa__in { opacity: 1; transform: none; }
}

/* three layers: the window sits on a light page */
.x-layer__scene .hxa { position: relative; z-index: 1; max-width: 640px; }
.x-layer__scene .hxa__win { box-shadow: 0 30px 70px rgb(60 30 110 / 22%), 0 0 0 1px rgb(60 30 110 / 8%); }
.x-layer__scene .hxa__steps { grid-template-columns: repeat(3, 1fr); }
.x-layer__scene .hxa__step { background: var(--white); color: var(--ink-3); box-shadow: 0 0 0 1px var(--line); }
.x-layer__scene .hxa__step:hover { background: var(--iris-tint); color: var(--iris-deep); }
.x-layer__scene .hxa__step[aria-selected="true"] { background: var(--white); color: var(--iris-deep); box-shadow: 0 0 0 1.5px var(--iris), 0 6px 16px rgb(60 30 110 / 10%); }
.x-layer__scene .hxa__n { background: var(--iris-tint); color: var(--iris-deep); }
.x-layer__scene .hxa__step[aria-selected="true"] .hxa__n { background: var(--iris); color: #fff; }
.x-layer__scene .hxa__step.done .hxa__n { background: #E4D9F3; color: var(--iris-deep); }
.x-layer__scene .hxa__bar { background: #EEE8F6; }
.x-layer__scene .hxa__bar > i, .x-layer__scene .hxa__step.done .hxa__bar > i { background: var(--iris); }
.x-layer__scene .hxa__step.done .hxa__bar > i { opacity: .45; }

/* campaign: Step 1: Create Campaign (outlined fields, as in the app) */
.hxa__mt--page { margin: 2px 0 8px; }
.hxa__cpf { display: grid; gap: 8px; padding: 12px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--ap-line); }
.hxa__of { position: relative; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 10px; border: 1px solid #C9CAD3; border-radius: 4px; font-size: 10px; color: var(--ap-ink); transition: border-color .25s, box-shadow .25s; }
.hxa__of > small { position: absolute; top: -6px; left: 8px; padding: 0 3px; background: #fff; font-size: 7.5px; color: #6B6E7B; line-height: 1.2; }
.hxa__of .hxa__ph { color: #8D8E99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hxa__of .hxa__ph--label { color: #4B4C59; }
.hxa__of .hxa__val { flex: 1; }
.hxa__of svg { width: 12px; height: 12px; margin-inline-start: auto; color: #4B4C59; }
.hxa__of--tall { align-items: flex-start; min-height: 52px; }
.hxa__of--tall .hxa__typed { white-space: normal; line-height: 1.4; }
.hxa__of .hxa__typed { font-style: normal; color: var(--ap-ink); }
.hxa__of.has-text .hxa__ph { display: none; }
.hxa__of.focus { border-color: var(--ap); box-shadow: inset 0 0 0 1px var(--ap); }
.hxa__of.focus > small { color: var(--ap); }
.hxa__tip { position: absolute; top: -20px; left: 50%; translate: -50% 0; padding: 3px 7px; border-radius: 3px; background: #616161; color: #fff; font-style: normal; font-size: 7.5px; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.hxa__of.focus .hxa__tip { opacity: 1; }
.hxa__cpf-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.hxa__cpf .hxa__foot { padding-top: 2px; }
.hxa__btn.is-on { background: var(--ap-2); box-shadow: 0 0 0 3px rgb(92 75 152 / 25%); }
.hxa__of:not(.focus) .hxa__typed::after { display: none; }
.hxa__qr { z-index: 6; }
/* phones: the same screens at 400 px, with the less important columns and buttons left out, so text stays readable */
.hxa--n .hxa__win { width: 400px; }
.hxa--n .hxa__screen { padding: 10px 12px; }
.hxa--n [data-s="ab"] .hxa__bar-row > .hxa__btn:first-child, .hxa--n [data-s="ab"] .hxa__pills span:nth-child(3) { display: none; }
.hxa--n [data-s="ab"] .hxa__tr { grid-template-columns: 18px 1.3fr .7fr; }
.hxa--n [data-s="ab"] .hxa__tr > :nth-child(3), .hxa--n [data-s="ab"] .hxa__tr > :nth-child(4) { display: none; }
.hxa--n [data-s="inv"] .hxa__modal, .hxa--n [data-s="ci"] .hxa__modal { inset: 36px 8px 10px; padding: 10px; }
.hxa--n [data-s="inv"] .hxa__bar-row > .hxa__btn:first-child, .hxa--n [data-s="ci"] .hxa__bar-row > .hxa__btn:last-child { display: none; }
.hxa--n .hxa__tr--sel { grid-template-columns: 18px 1.2fr .8fr .9fr; }
.hxa--n .hxa__tr--sel > :nth-child(3) { display: none; }
.hxa--n .hxa__tr--ci { grid-template-columns: 1.2fr .8fr 1fr; }
.hxa--n .hxa__tr--ci > :nth-child(3) { display: none; }
.hxa--n .hxa__foot .hxa__btn--ghost:last-child { display: none; }
.hxa--n .hxa__form { padding: 10px; gap: 8px; }
.hxa--n .hxa__field--sm { min-width: 120px; }
.hxa--n .hxa__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hxa--n .hxa__acc { font-size: 8.5px; }
.hxa--n .hxa__cpf { padding: 10px; }
.hxa--n [data-s="cp"] .hxa__cpf-row { grid-template-columns: 1fr 1fr; }
.hxa--n [data-s="cp"] .hxa__cpf-row > :last-child { grid-column: 1 / -1; }
.hxa--n .hxa__of[data-f="tag"] .hxa__ph { font-size: 9px; }

/* app windows, round 2: address book tags/bulk/duplicates, campaign template/email sending/edit (copied from the live app) */
.hxa[data-ico="set"] .hxa__ico--set { background: var(--ap); color: #fff; }
.hxa__tr--ab { grid-template-columns: 18px 1.15fr 1.45fr 1.1fr 1fr; transition: background .3s; }
.hxa__tr--ab.is-on { background: #F6F4FC; }
.hxa__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.hxa__chip--add { display: none; background: #3F8F86; }
.hxa__screen.tagged .hxa__tr--ab.is-on .hxa__chip--add { display: inline-block; animation: hxa-pop .45s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes hxa-pop { from { opacity: 0; transform: scale(.4); } }
.hxa__bulk { display: flex; align-items: center; gap: 10px; margin-top: 8px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.hxa__screen.sel .hxa__bulk { opacity: 1; transform: none; }
.hxa__menu--up { top: auto; bottom: calc(100% + 4px); transform-origin: bottom left; }
.hxa__menu--r { left: auto; right: 0; }
.hxa__screen.menu .hxa__menu, .hxa__dd.open .hxa__menu, .hxa__of.open .hxa__menu { opacity: 1; transform: none; }
.hxa__menu span.hl { background: #F0EDF8; color: var(--ap); }
/* dialogs over the page, with the page dimmed */
.hxa__dlg { position: absolute; z-index: 4; left: 50%; top: 50%; width: 300px; padding: 14px 16px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 999px rgb(20 20 40 / 32%), 0 14px 40px rgb(0 0 0 / 28%); transform: translate(-50%, -46%) scale(.97); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
.hxa__screen.dlg .hxa__dlg { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .3s, transform .3s; }
.hxa__screen--dim .hxa__dlg { box-shadow: 0 0 0 999px rgb(20 20 40 / 32%), 0 14px 40px rgb(0 0 0 / 28%); }
.hxa__dlg .hxa__mt { margin-bottom: 10px; }
.hxa__help { margin: 4px 0 8px; font-size: 8.5px; color: #4B4C59; }
.hxa__sub { margin: 0 0 6px; font-size: 9.5px; font-weight: 600; }
.hxa__of--line { border: 0; border-bottom: 1.5px solid var(--ap); border-radius: 0; padding-inline: 2px; }
.hxa__of--line > small { left: 0; top: -4px; background: none; }
.hxa__dlg--tag .hxa__foot { justify-content: space-around; }
.hxa__btn--ok { color: var(--ap); }
.hxa__btn--ok.is-on, .hxa__btn.is-on { background: var(--ap-2); color: #fff; box-shadow: 0 0 0 3px rgb(92 75 152 / 25%); }
/* Manage Tags */
.hxa__dlg--tags { width: 420px; top: 52%; }
.hxa__dlg--tags .hxa__search { flex: none; margin-bottom: 4px; }
.hxa__tagwall { display: flex; flex-wrap: wrap; gap: 5px; max-height: 110px; overflow: hidden; }
.hxa__tag { padding: 4px 9px; border-radius: 999px; background: #E6E6EA; color: #34343E; font-style: normal; font-size: 8.5px; transition: background .25s, color .25s; }
.hxa__tag.is-on { background: var(--ap); color: #fff; }
.hxa__selrow { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 9px; min-height: 20px; }
.hxa__selrow .hxa__chip { opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s; }
.hxa__selrow .hxa__chip.is-on { opacity: 1; transform: none; }
.hxa__foot--tags { justify-content: center; gap: 10px; margin-top: 8px; opacity: 0; transition: opacity .3s; }
.hxa__screen.two .hxa__foot--tags { opacity: 1; }
.hxa__btn--danger { background: #fff; color: #C62828; border: 1px solid #E5B4B4; box-shadow: none; }
.hxa__foot--c { justify-content: center; margin-top: 8px; }
/* Find Duplicates */
.hxa__dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hxa__dc { padding: 10px 12px; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgb(20 10 60 / 12%); transition: opacity .45s, transform .45s; }
.hxa__dc-p { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.hxa__dc-p b { display: block; font-size: 10px; font-weight: 600; }
.hxa__dc-p small { display: block; font-size: 8.5px; color: #6B6E7B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hxa__dc-b { display: flex; justify-content: center; gap: 5px; }
.hxa__dc-b .hxa__btn { height: 21px; padding: 0 9px; font-size: 8px; }
.hxa__screen.gone .hxa__dc[data-first] { opacity: 0; transform: scale(.92); }
.hxa__dlg--mm { width: 470px; padding: 12px 14px; }
.hxa__mm { display: grid; gap: 7px; margin-bottom: 10px; }
.hxa__mm-r { display: grid; grid-template-columns: 14px 60px 1fr 1fr; align-items: center; gap: 7px; }
.hxa__mm-r--2 { grid-template-columns: 14px 1fr 1.6fr; }
.hxa__mm .hxa__of { min-height: 24px; padding: 4px 8px; font-size: 9px; color: #6B6E7B; }
.hxa__of--s .hxa__ph { font-size: 8.5px; }
.hxa__rd { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #8A8C98; transition: border-color .2s, box-shadow .2s; }
.hxa__rd.is-on, .hxa__mm-r[data-r1] .hxa__rd { border-color: var(--ap); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px var(--ap); }
.hxa__screen.r2 .hxa__mm-r[data-r1] .hxa__rd { border-color: #8A8C98; box-shadow: none; }
.hxa__screen.r2 .hxa__mm-r[data-r2] .hxa__rd { border-color: var(--ap); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 6px var(--ap); }
.hxa__dlg--mm .hxa__foot { justify-content: space-around; }
/* Campaign, Step 1 in its dialog */
.hxa__dlg--cp { width: 470px; padding: 12px 14px; top: 51%; }
.hxa__scroll { height: 262px; overflow: hidden; margin-bottom: 8px; }
.hxa__dlg--cp .hxa__cpf { padding: 24px 4px 2px; border: 0; transition: transform .8s cubic-bezier(.45, .05, .25, 1); }
.hxa__screen.down .hxa__cpf[data-scroll] { transform: translateY(-150px); }
.hxa__of .hxa__val:empty:not([data-val]) { display: none; }
.hxa__of:not(.picked) .hxa__val[data-val] { display: none; }
.hxa__of.picked .hxa__ph { display: none; }
.hxa__of.picked .hxa__val::before { content: attr(data-val); }
.hxa__of--sel { cursor: default; }
.hxa__center { margin: 2px 0 0; text-align: center; }
.hxa__dlg--cp .hxa__foot { justify-content: space-between; }
/* Email configuration */
.hxa__radios { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 12px; font-size: 10px; }
.hxa__radio { display: inline-flex; align-items: center; gap: 5px; }
.hxa__ecs { position: relative; height: 112px; }
.hxa__ec { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.hxa__ec .hxa__of { min-height: 30px; background: #fff; }
.hxa__ec.is-on { opacity: 1; transform: none; }
.hxa__ec .hxa__help { grid-column: 1 / -1; margin: 4px 0; font-size: 10px; }
.hxa__foot--l { justify-content: flex-start; gap: 10px; }
/* Edit Campaign */
.hxa__dlg--cps { width: 480px; padding: 12px 14px; }
.hxa__cpf--edit { padding: 4px 0 10px; border: 0; }
.hxa__cpf-row--4 { grid-template-columns: 2fr 1fr; }
.hxa__cpf-row--2 { grid-template-columns: 1fr 1fr; }
.hxa__screen.gone2 .hxa__dc[data-first] { display: none; }
.hxa__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 12px; }
.hxa__card { display: grid; justify-items: center; gap: 7px; padding: 12px 6px 11px; border-radius: 10px; background: linear-gradient(135deg, #6A4FB0, #4B2DE0); color: #fff; font-size: 10px; font-weight: 500; box-shadow: 0 6px 14px rgb(60 40 160 / 30%); transition: transform .25s, box-shadow .25s; }
.hxa__card i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EDE7FA; color: #2E9E6B; }
.hxa__card i svg { width: 15px; height: 15px; }
.hxa__card.is-on { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 22px rgb(60 40 160 / 38%), 0 0 0 3px rgb(255 255 255 / 70%); }
/* phones (400 px window) */
.hxa--n .hxa__tr--ab { grid-template-columns: 18px 1.25fr .9fr; }
.hxa--n .hxa__tr--ab > :nth-child(3), .hxa--n .hxa__tr--ab > :nth-child(4) { display: none; }
.hxa--n [data-s="abt"] .hxa__bar-row > .hxa__btn:first-child, .hxa--n [data-s="abt"] .hxa__pills span:nth-child(3) { display: none; }
.hxa--n .hxa__dlg--tags, .hxa--n .hxa__dlg--mm, .hxa--n .hxa__dlg--cp, .hxa--n .hxa__dlg--cps { width: 316px; }
.hxa--n .hxa__dgrid { grid-template-columns: 1fr; gap: 8px; }
.hxa--n .hxa__dc:nth-child(n+4) { display: none; }
.hxa--n .hxa__mm-r { grid-template-columns: 12px 1fr 1fr; }
.hxa--n .hxa__mm-r > .hxa__of--s { display: none; }
.hxa--n .hxa__mm-r--2 { grid-template-columns: 12px .8fr 1.2fr; }
.hxa--n .hxa__dlg--cp .hxa__cpf-row { grid-template-columns: 1fr 1fr; }
.hxa--n .hxa__ec { gap: 7px 8px; }
.hxa--n .hxa__ecs { height: 118px; }
.hxa--n .hxa__ec .hxa__of { min-height: 26px; font-size: 9px; }
.hxa--n .hxa__radios { gap: 6px 10px; font-size: 9.5px; }
.hxa--n .hxa__tabs span { padding: 6px 6px; font-size: 8.5px; }
.hxa--n .hxa__cards { gap: 6px; } .hxa--n .hxa__card { font-size: 8.5px; }

/* ==========================================================================
   Customer stories as tabs (home): choosing an organization changes the story beside it
   ========================================================================== */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.x-proof .x-lede { margin-top: .4rem; }
.inv-st { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.inv-st__tabs { display: grid; gap: .5rem; }
.inv-st__tab { position: relative; display: grid; gap: .15rem; padding: .95rem 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink-2); font: inherit; text-align: start; cursor: pointer; overflow: hidden; transition: border-color .25s, box-shadow .25s, color .25s, transform .25s; }
.inv-st__tab b { font-size: 1.02rem; font-weight: 650; color: var(--ink); line-height: 1.25; }
.inv-st__tab small { font-size: .84rem; color: var(--ink-3); }
.inv-st__tab:hover { border-color: var(--line-2); transform: translateX(2px); }
html[dir="rtl"] .inv-st__tab:hover { transform: translateX(-2px); }
.inv-st__tab[aria-selected="true"] { border-color: var(--iris); box-shadow: 0 0 0 1px var(--iris), 0 12px 28px rgb(61 38 110 / 12%); }
.inv-st__tab[aria-selected="true"] b { color: var(--iris-deep); }
.inv-st__tab::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--iris); opacity: 0; transition: opacity .25s; }
.inv-st__tab[aria-selected="true"]::before { opacity: 1; }
.inv-st__bar { position: absolute; inset-inline: 1.1rem; bottom: .45rem; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.inv-st__bar > i { display: block; height: 100%; width: 0; background: var(--iris); opacity: .5; }
.inv-st__tab.run .inv-st__bar > i { width: 100%; transition: width var(--dur, 9s) linear; }
.inv-st__panels { min-width: 0; }
.inv-st__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-lg); overflow: hidden; animation: inv-st-in .45s var(--ease-out, ease) both; }
.inv-st__panel[hidden] { display: none; }
@keyframes inv-st-in { from { opacity: 0; transform: translateY(8px); } }
.inv-st__media { position: relative; min-height: 100%; background: var(--mist); }
.inv-st__img { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
.inv-st__facts { position: absolute; inset-inline-start: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: .45rem .8rem; border-radius: 999px; background: rgb(20 13 38 / 78%); color: #fff; font-size: .85rem; font-weight: 600; backdrop-filter: blur(6px); }
.inv-st__body { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.25rem, 2.5vw, 2rem); }
.inv-st__kind { margin: 0; font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--iris); }
.inv-st__org { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; }
.inv-st__event { margin: -.3rem 0 0; color: var(--ink-3); font-size: .95rem; }
.inv-st__quote { margin: .3rem 0 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--mint); }
.inv-st__quote p { margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.inv-st__quote footer { display: grid; font-weight: 650; font-size: .92rem; color: var(--ink-2); }
.inv-st__quote footer span { font-weight: 400; font-size: .85rem; color: var(--ink-3); }
.inv-st__sum { margin: .3rem 0 0; line-height: 1.6; color: var(--ink-2); }
.inv-st__used { display: grid; gap: .35rem; margin: .2rem 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--ink-2); }
.inv-st__used li { display: flex; gap: .5rem; align-items: flex-start; }
.inv-st__used svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: #2E9E87; }
.inv-st__cta { align-self: flex-start; margin-top: auto; }
.inv-st__arrow { display: inline-block; margin-inline-start: .55rem; transition: transform .25s; }
html[dir="rtl"] .inv-st__arrow { transform: scaleX(-1); }
.inv-st__cta:hover .inv-st__arrow { transform: translateX(3px); }
html[dir="rtl"] .inv-st__cta:hover .inv-st__arrow { transform: scaleX(-1) translateX(3px); }
@media (max-width: 1100px) { .inv-st__panel { grid-template-columns: 1fr; } .inv-st__img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 900px) {
	.inv-st { grid-template-columns: 1fr; }
	.inv-st__tabs { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter, 1.15rem)); padding: 2px var(--gutter, 1.15rem) 6px; scrollbar-width: none; }
	.inv-st__tabs::-webkit-scrollbar { display: none; }
	.inv-st__tab { flex: none; width: min(15rem, 72vw); scroll-snap-align: start; }
	.inv-st__tab:hover { transform: none; }
	.inv-st__cta { align-self: stretch; justify-content: center; }
}

/* ==========================================================================
   Hero: people come together (dots in the ring scene) + one line per step
   ========================================================================== */
.hx-p { transition: transform 1.1s cubic-bezier(.45, .05, .2, 1) var(--dl, 0s); }
.hx-people.jump .hx-p { transition: none; }
.hx-p__b { transform: scale(1.25); transform-origin: 0 0; transition: transform .4s, opacity .5s; }
.hx-p__h, .hx-p__s { fill: rgb(255 255 255 / 60%); transition: fill .6s; }
.hx-people[data-step] .hx-p__h, .hx-people[data-step] .hx-p__s { fill: var(--c); }
.hx-p.dim .hx-p__b { opacity: .2; }
.hx-p.sel .hx-p__b { transform: scale(1.45); filter: drop-shadow(0 0 5px var(--c)); }
.hx-p.got .hx-p__b { animation: hx-got .5s ease-out; }
@keyframes hx-got { 40% { transform: scale(1.9); } }
.hx-p__ok { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .3s .9s, transform .4s .9s cubic-bezier(.3, 1.6, .5, 1); }
.hx-p__ok circle { fill: #55D6BE; stroke: #1A1030; stroke-width: 1.2; }
.hx-p__ok path { fill: none; stroke: #0E2A25; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hx-p.in .hx-p__ok { opacity: 1; transform: none; }
.hx-p.in .hx-p__b { transform: scale(1.55); filter: drop-shadow(0 0 6px rgb(85 214 190 / 60%)); }
.hx-p.in .hx-p__h, .hx-p.in .hx-p__s { fill: #fff; }
.hx-p.in { transition-duration: 1.3s; }
/* tag names beside their groups */
.hx-chip { opacity: 0; transition: opacity .5s .9s; }
.hx-chips[data-step] .hx-chip { opacity: 1; }
.hx-chip rect { fill: rgb(20 13 38 / 70%); stroke: var(--c); stroke-width: 1.2; transition: fill .4s; }
.hx-chip text { font: 600 11.5px/1 var(--f-text, sans-serif); fill: #fff; transition: fill .4s; }
.hx-chip__dot { fill: var(--c); transition: opacity .3s; }
.hx-chip__ok { fill: none; stroke: #1A1030; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hx-chip.sel rect { fill: var(--c); }
.hx-chip.sel text { fill: #1A1030; }
.hx-chip.sel .hx-chip__dot { opacity: 0; } .hx-chip.sel .hx-chip__ok { opacity: 1; }
.hx-chip.dim { opacity: .35 !important; transition-delay: 0s; }
/* invitations: envelopes fly from the mark to each chosen person */
.hx-beam { stroke: #C9FFF3; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0; animation: hx-beam 1.6s linear var(--bd, 0s) forwards; }
@keyframes hx-beam { 0% { opacity: 0; stroke-dashoffset: 40; } 15% { opacity: .5; } 100% { opacity: .3; stroke-dashoffset: 0; } }
.hx-env { opacity: 0; }
.hx-env { transform-origin: 0 0; }
.hx-env rect { fill: #fff; stroke: #55D6BE; stroke-width: .8; } .hx-env path { fill: none; stroke: #7D5BA6; stroke-width: 1.4; stroke-linejoin: round; }
.hx-env.go { transition: transform .95s cubic-bezier(.5, 0, .3, 1) var(--ed, 0s); animation: hx-env 1.2s linear var(--ed, 0s) forwards; }
@keyframes hx-env { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* one short line per step, where the panel used to be */
.hx__act--lines { width: 44%; height: auto; min-height: 0; bottom: 4%; font: inherit; direction: inherit; }
html[dir="rtl"] .hx__act--lines { left: 0; right: auto; direction: rtl; } /* 6 Nov: same place as English (the ring sits on the right of the scene in both languages), so it never covers the ring */
.hx__line { position: absolute; inset: auto 0 0 0; display: grid; gap: .3rem; margin: 0; padding: .9rem 1.1rem; border-radius: 14px; background: linear-gradient(135deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 4%)); border: 1px solid rgb(255 255 255 / 18%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease-out, ease); pointer-events: none; }
.hx__line b { display: inline-flex; align-items: center; gap: .55rem; font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 650; }
.hx__line b i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--mint-dark); font-style: normal; font-size: .75rem; }
.hx__line span { font-size: clamp(.85rem, .95vw, .98rem); color: rgb(255 255 255 / 78%); line-height: 1.45; }
.hx__act[data-step="0"] .hx__line--0, .hx__act[data-step="1"] .hx__line--1, .hx__act[data-step="2"] .hx__line--2, .hx__act[data-step="3"] .hx__line--3 { opacity: 1; transform: none; transition-delay: .2s; }
@media (max-width: 900px) {
	.hx__act--lines, html[dir="rtl"] .hx__act--lines { left: 0; right: 0; width: auto; height: auto; bottom: 0; }
	.hx__line { padding: .8rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .hx-p, .hx-beam { transition: none; animation: none; opacity: .6; } }

/* ==========================================================================
   Header: stays on screen while reading; glassy once scrolled. Language switch always in reach.
   ========================================================================== */
.inv-header { transition: background .35s, box-shadow .35s, backdrop-filter .35s; }
.inv-header.is-hidden { transform: none; }
.inv-header.is-compact { background: rgb(255 255 255 / 84%); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgb(29 24 48 / 6%), 0 10px 30px -18px rgb(29 24 48 / 30%); }
.inv-cta-short { display: none; }
@media (max-width: 1100px) { .inv-header__lang .inv-lang a { padding: .35rem .7rem; font-size: .88rem; min-height: 34px; } }
@media (max-width: 980px) { .inv-header__lang { display: block; } .inv-header__actions { gap: .45rem; } }
@media (max-width: 460px) {
	.inv-cta-long { display: none; } .inv-cta-short { display: inline; }
}

/* ==========================================================================
   Menus, round 3: Platform = three layers; Use cases = one colour and icon per sector; Resources = a list
   ========================================================================== */
.inv-ui-ico { width: 1.35rem; height: 1.35rem; }
.inv-ui-ico .t { fill: currentColor; fill-opacity: .16; stroke: none; }
.inv-nav__sub .inv-nav__link:hover .inv-nav__ico { transform: none; }
/* Platform */
.inv-nav__sub--platform { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .3rem; }
.inv-nav__sub--platform .is-layer .inv-nav__link { flex-direction: column; gap: .7rem; height: 100%; padding: 1.1rem 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #FBF9FE, #fff); }
.inv-nav__sub--platform .is-layer .inv-nav__link:hover { border-color: var(--iris); background: #fff; box-shadow: 0 10px 24px -14px rgb(61 38 110 / 35%); }
.inv-nav__sub--platform .is-layer .inv-nav__ico { width: 2.8rem; height: 2.8rem; border-radius: 12px; background: var(--iris); color: #fff; }
.inv-nav__sub--platform .is-layer .inv-nav__link:hover .inv-nav__ico { background: var(--iris-deep); color: #fff; }
.inv-nav__sub--platform .is-layer .inv-ui-ico .t { fill-opacity: .28; }
.inv-nav__layer { display: block; margin-bottom: .15rem; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--iris); }
.inv-nav__sub--platform .is-layer .inv-nav__label { font-size: 1.08rem; }
.inv-nav__sub--platform > li:not(.is-layer) { grid-column: span 3; }
.inv-nav__sub--platform > li:not(.is-layer):not(.is-all) .inv-nav__link { align-items: center; padding: .7rem 1rem; }
.inv-nav__sub--platform > li:not(.is-layer):not(.is-all) .inv-nav__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
/* "see all" links sit at the foot of the panel */
.inv-nav__sub > li.is-all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: .2rem; padding-top: .3rem; }
.inv-nav__sub > li.is-all .inv-nav__link { align-items: center; padding: .55rem .9rem; }
.inv-nav__sub > li.is-all .inv-nav__ico { width: 2rem; height: 2rem; background: transparent; }
.inv-nav__sub > li.is-all .inv-nav__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.inv-nav__sub > li.is-all .inv-nav__label { color: var(--iris-deep); }
.inv-nav__sub > li.is-all .inv-nav__label::after { content: " →"; }
html[dir="rtl"] .inv-nav__sub > li.is-all .inv-nav__label::after { content: " ←"; }
/* Use cases: a tile per sector, each in its own colour */
.inv-nav__sub--sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.inv-nav__sub--sectors .is-sector .inv-nav__link { flex-direction: column; gap: .6rem; padding: .95rem; }
.inv-nav__sub--sectors .is-sector .inv-nav__ico, .x-uc__ico.is-tone { width: 2.7rem; height: 2.7rem; border-radius: 12px; background: var(--tone-bg, var(--iris-tint)); color: var(--tone, var(--iris)); }
.inv-nav__sub--sectors .is-sector .inv-nav__link:hover { background: var(--tone-bg, var(--mist)); }
.inv-nav__sub--sectors .is-sector .inv-nav__link:hover .inv-nav__ico { background: var(--tone, var(--iris)); color: #fff; }
.inv-nav__sub--sectors .inv-nav__desc { font-size: .84rem; }
/* Resources */
.inv-nav__sub--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1240px) { .inv-nav__sub--sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
	.inv-nav__sub--platform, .inv-nav__sub--sectors, .inv-nav__sub--list { grid-template-columns: 1fr 1fr; gap: .2rem; padding: 0 0 1rem; }
	.inv-nav__sub--platform > li { grid-column: auto !important; }
	.inv-nav__sub--platform .is-layer .inv-nav__link, .inv-nav__sub--sectors .is-sector .inv-nav__link { flex-direction: row; align-items: center; padding: .55rem .3rem; border: 0; background: none; height: auto; }
	.inv-nav__layer { display: none; }
	.inv-nav__sub--platform .is-layer .inv-nav__ico, .inv-nav__sub--sectors .is-sector .inv-nav__ico { width: 2.1rem; height: 2.1rem; border-radius: 9px; }
	.inv-nav__sub > li.is-all { border-top: 0; margin: 0; padding: 0; }
}
@media (max-width: 560px) { .inv-nav__sub--platform, .inv-nav__sub--sectors, .inv-nav__sub--list { grid-template-columns: 1fr; } }
/* home: use-case cards take the same sector colours and icons */
.x-uc__ico.is-tone .inv-ui-ico { width: 1.5rem; height: 1.5rem; }
.x-uc__card:hover .x-uc__ico.is-tone { background: var(--tone); color: #fff; }
.x-uc__card { --tone: var(--iris); }
.x-uc__card:hover { border-color: var(--tone); }
.x-uc__go { color: var(--tone); }

/* report 5.2 / 6.7: rating on each story; 44 px tap targets */
.inv-st__kind { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.inv-st__rating { display: inline-flex; gap: 1px; color: #E8A33B; font-size: .95rem; letter-spacing: 0; }
.hx__step { min-height: 44px; }
.x-layer .inv-link { display: inline-flex; align-items: center; min-height: 44px; }
.inv-header__lang .inv-lang a { min-height: 44px; min-width: 44px; }

/* report 7.5: pages that answer buyers' questions */
.inv-article { max-width: 48rem; }
.inv-article > .wp-block-heading { margin-top: 2.2rem; }
.inv-article .inv-compare { max-width: none; margin-block: 1.5rem; }
.inv-article .inv-compare table { min-width: 40rem; }
.inv-article .inv-compare th, .inv-article .inv-compare td { text-align: start; vertical-align: top; }
.inv-article .inv-compare td:first-child { font-weight: 650; color: var(--ink); }
.inv-article .inv-compare td:last-child { color: var(--iris-deep); }
.inv-guides-hub { display: grid; gap: .8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.inv-guides-hub__card { display: grid; gap: .35rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .3s; }
.inv-guides-hub__card:hover { border-color: var(--iris); box-shadow: var(--shadow); transform: translateY(-2px); }
.inv-guides-hub__card b { font-size: 1.12rem; font-weight: 650; }
.inv-guides-hub__card b::after { content: " →"; color: var(--iris); }
html[dir="rtl"] .inv-guides-hub__card b::after { content: " ←"; }
.inv-guides-hub__card span { color: var(--ink-3); font-size: .95rem; }
.inv-update__title a { display: inline-block; padding-block: .45rem; }
.inv-header__brand { display: flex; align-items: center; min-height: 44px; }

/* Story tabs: a video frame is shown whole (16:9), centred on a dark stage, never stretched or cropped */
.inv-st__media--video { display: flex; align-items: center; background: #140D26; }
.inv-st__media--video .inv-st__img { height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.inv-st__media--video .inv-st__facts { bottom: auto; top: 1rem; }

/* App screens in Arabic: the same windows, right to left, as the Arabic app shows them */
html[dir="rtl"] .hxa { direction: rtl; }
.hxa__win[dir="rtl"] { direction: rtl; font-family: "Readex Pro", Tahoma, Arial, sans-serif; }
.hxa__win[dir="rtl"] .hxa__menu { left: auto; right: 0; transform-origin: top right; }
.hxa__win[dir="rtl"] .hxa__menu--up { transform-origin: bottom right; }
.hxa__win[dir="rtl"] .hxa__menu--r { right: auto; left: 0; }
.hxa__win[dir="rtl"] .hxa__of > small { left: auto; right: 8px; }
.hxa__win[dir="rtl"] .hxa__of--line > small { right: 0; }
.hxa__win[dir="rtl"] .hxa__url span, .hxa__win[dir="rtl"] [data-f="title"] .hxa__typed:empty { direction: ltr; }

/* Header: top-level menu items and Log in stay on one line (Arabic labels are longer at 1100–1300 px) */
.inv-nav__list > .inv-nav__item > :is(.inv-nav__link, .inv-nav__toggle), .inv-header__login { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1320px) { html[dir="rtl"] .inv-nav__list > .inv-nav__item > :is(.inv-nav__link, .inv-nav__toggle) { padding-inline: .55rem; } html[dir="rtl"] .inv-header__login { padding-inline: .45rem; } }

/* About: the team */
.inv-team-s .x-lede { max-width: 38rem; }
.inv-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.inv-team__p { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg, 20px); background: var(--white); overflow: hidden; transition: transform .35s var(--ease-out, ease), box-shadow .35s, border-color .35s; }
.inv-team__p:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.inv-team__ph { position: relative; aspect-ratio: 1; background: radial-gradient(120% 90% at 50% 100%, var(--iris-tint) 0%, var(--mist) 60%); overflow: hidden; }
.inv-team__ph::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--iris), var(--mint)); opacity: 0; transition: opacity .35s; }
.inv-team__p:hover .inv-team__ph::after, .inv-team__p.is-lead .inv-team__ph::after { opacity: 1; }
.inv-team__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out, ease); }
.inv-team__p:hover .inv-team__ph img { transform: scale(1.03); }
.inv-team__tx { padding: 1rem 1.1rem 1.15rem; padding-inline-end: 3.6rem; }
.inv-team__n { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.inv-team__r { margin: .25rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--iris-deep); font-weight: 560; }
.inv-team__in { position: absolute; inset-inline-end: .7rem; bottom: .8rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-3); transition: background .2s, color .2s; }
.inv-team__in svg { width: 18px; height: 18px; }
.inv-team__in:hover, .inv-team__in:focus-visible { background: var(--iris-tint); color: var(--iris-deep); }
@media (max-width: 900px) { .inv-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .inv-team__tx { padding: .8rem .85rem .9rem; padding-inline-end: 3.2rem; } .inv-team__n { font-size: 1rem; } .inv-team__r { font-size: .85rem; } }
@media (prefers-reduced-motion: reduce) { .inv-team__p, .inv-team__ph img { transition: none; } .inv-team__p:hover { transform: none; } }

/* Event day: one switch shows the same check-in for a workshop or a conference */
.x-size { display: flex; flex-wrap: wrap; gap: .4rem; padding: .3rem; border-radius: 999px; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 14%); justify-self: start; }
.x-size__b { min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: 999px; background: none; color: rgb(255 255 255 / 72%); font: inherit; font-size: .9rem; font-weight: 560; cursor: pointer; transition: background .25s, color .25s; }
.x-size__b:hover { color: #fff; }
.x-size__b[aria-pressed="true"] { background: #fff; color: var(--ink); }
.x-size__b:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.x-live__n { font-variant-numeric: tabular-nums; }
.x-live__of { font-size: 1.3rem; font-weight: 560; color: rgb(255 255 255 / 70%); letter-spacing: 0; }
@media (max-width: 460px) { .x-size { justify-self: stretch; } .x-size__b { flex: 1; padding-inline: .6rem; font-size: .85rem; } .x-live__of { font-size: 1.05rem; } }

/* Icons: formal line icons, one brand colour, quiet bordered tile */
.inv-ui-ico .t { display: none; }
.inv-nav__sub--sectors .is-sector .inv-nav__ico, .x-uc__ico.is-tone { border: 1px solid #E2DEF0; }
.inv-nav__sub--sectors .is-sector .inv-nav__link:hover .inv-nav__ico, .x-uc__card:hover .x-uc__ico.is-tone { background: var(--tone); border-color: var(--tone); color: #fff; }
.x-uc__card:hover { border-color: var(--line-2); }

/* Compare plans (29 Oct): what every plan has, once; then a short table of only the differences */
.inv-cmp { display: grid; gap: 1.25rem; margin-block-start: 1.5rem; }
.inv-cmp__all { padding: clamp(1.1rem, 2.5vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.inv-cmp__h { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font-family: var(--f-display); font-size: 1.15rem; font-weight: 650; color: var(--ink); }
.inv-cmp__h .inv-ico { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--mint-tint); color: var(--mint-ink); }
.inv-cmp__h--diff { margin: .75rem 0 -.25rem; }
.inv-cmp__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 2rem; }
.inv-cmp__gt { margin: 0 0 .4rem; font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--iris); }
.inv-cmp__g .inv-ticks { margin: 0; font-size: .95rem; }
.inv-cmp__g .inv-ticks li { padding-block: .2rem; }
.inv-cmp .inv-compare table { min-width: 40rem; }
.inv-cmp .inv-compare thead th { position: static; vertical-align: bottom; padding: 1.4rem 1rem 1.1rem; }
.inv-cmp .inv-compare thead th.is-highlight { box-shadow: inset 0 3px 0 var(--iris); }
.inv-compare__plan small { margin-inline-start: .3rem; padding: .05rem .4rem; border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--f-body, inherit); font-size: .7rem; font-weight: 560; color: var(--ink-3); vertical-align: middle; }
.inv-compare__price b { font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.inv-compare__badge { display: inline-block; margin-bottom: .45rem; padding: .2rem .6rem; border-radius: 999px; background: var(--mint-tint); color: var(--mint-ink); font-size: .75rem; font-weight: 650; }
.inv-compare__cta { margin-top: .8rem; min-height: 44px; padding: .55rem 1rem; font-size: .88rem; white-space: nowrap; }
.inv-cmp .inv-compare tbody th[scope="row"] { width: 40%; }
.inv-cmp .inv-compare td.is-text { line-height: 1.35; }
@media (max-width: 640px) {
	.inv-cmp .inv-compare { overflow: visible; }
	.inv-cmp .inv-compare table { min-width: 0; }
	.inv-cmp .inv-compare tbody th[scope="row"] { width: auto; }
	.inv-cmp .inv-compare thead { display: block; position: sticky; top: var(--hdr-h, 64px); z-index: 2; background: var(--white); border-radius: var(--r-lg) var(--r-lg) 0 0; }
	.inv-cmp .inv-compare thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 2px solid var(--line-2); }
	.inv-cmp .inv-compare thead th:first-child { display: none; }
	.inv-cmp .inv-compare thead th { padding: .8rem .3rem .7rem; border: 0; }
	.inv-cmp .inv-compare__plan { font-size: 1rem; }
	.inv-cmp .inv-compare__plan small, .inv-cmp .inv-compare__badge, .inv-cmp .inv-compare__cta { display: none; }
	.inv-cmp .inv-compare__price { font-size: .78rem; }
	.inv-cmp .inv-compare__price b { font-size: .9rem; }
	.inv-cmp .inv-compare td::before { content: none; }
	.inv-cmp .inv-compare td { padding: .3rem .3rem .9rem; font-size: .8rem; text-align: center; }
	.inv-cmp__groups { grid-template-columns: 1fr; }
}

/* Use cases with photos (29 Oct, Pexels, MENA): one main photo per page, a calm three-photo strip, photo cards */
.inv-sol__visual { position: relative; padding-bottom: 2.5rem; }
.inv-sol__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.inv-sol__roles--float { position: absolute; inset-inline-start: -1.5rem; bottom: 0; max-width: 17rem; padding: .9rem 1.1rem; }
.inv-sol__roles--float li { padding: .4rem 0; font-size: .9rem; }
.inv-sol__hero-inner:has(.inv-sol__visual) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .inv-sol__hero-inner:has(.inv-sol__visual) { grid-template-columns: 1fr; } .inv-sol__visual { padding-bottom: 0; } .inv-sol__roles--float { position: relative; z-index: 1; inset: auto; max-width: none; margin-top: -2rem; margin-inline: 1rem; } }

.inv-uc-gallery { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; height: clamp(22rem, 38vw, 32rem); }
.inv-uc-gallery__f { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--mist); }
.inv-uc-gallery__f--0 { grid-row: 1 / 3; }
.inv-uc-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .8s var(--ease-out, ease); }
.inv-uc-gallery__f:hover .inv-uc-gallery__img { transform: scale(1.03); }
.inv-uc-gallery__f figcaption { position: absolute; inset-inline: .75rem; bottom: .75rem; width: fit-content; max-width: calc(100% - 1.5rem); padding: .35rem .7rem; border-radius: 999px; background: rgb(20 13 38 / 72%); color: #fff; font-size: .82rem; backdrop-filter: blur(6px); }
@media (max-width: 700px) {
	.inv-uc-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
	.inv-uc-gallery__f--0 { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }
	.inv-uc-gallery__f--1, .inv-uc-gallery__f--2 { aspect-ratio: 1; }
	.inv-uc-gallery__f figcaption { display: none; }
	.inv-uc-gallery__f--0 figcaption { display: block; }
}

.x-uc__card.has-photo { padding-top: 0; overflow: hidden; }
.x-uc__ph { display: block; margin: 0 -1.35rem .2rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.x-uc__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out, ease); }
.x-uc__card.has-photo:hover .x-uc__ph img { transform: scale(1.04); }
.x-uc__card.has-photo .x-uc__ico { margin-top: -2.3rem; position: relative; z-index: 1; background: #fff; box-shadow: 0 4px 14px rgb(20 13 38 / 14%); }
@media (max-width: 700px) { .x-uc__ph { margin: 0 -1rem .2rem; } .x-uc__card.has-photo .x-uc__ico { width: 2.3rem; height: 2.3rem; margin-top: -1.9rem; } }

.inv-solutions__link.has-photo { grid-template-columns: 9rem minmax(10rem, 1fr) minmax(0, 1.8fr) 2.75rem; grid-template-areas: "ph name line go" "ph name tags go"; }
.inv-solutions__ph { grid-area: ph; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--mist); }
.inv-solutions__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out, ease); }
.inv-solutions__link.has-photo:hover .inv-solutions__ph img { transform: scale(1.05); }
@media (max-width: 760px) { .inv-solutions__link.has-photo { grid-template-columns: 5.5rem minmax(0, 1fr) 2.75rem; grid-template-areas: "ph name go" "line line line" "tags tags tags"; } }

/* Use-case photos spread through the page (29 Oct): one per section, never grouped; modest, respectful photos only */
.inv-uc-band { position: relative; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); overflow: hidden; border-radius: var(--r-lg); background: var(--mist); }
.inv-uc-band__img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 22%; }
.inv-uc-band figcaption, .inv-uc-side figcaption { position: absolute; inset-inline-start: .9rem; bottom: .9rem; max-width: calc(100% - 1.8rem); padding: .35rem .75rem; border-radius: 999px; background: rgb(20 13 38 / 72%); color: #fff; font-size: .82rem; backdrop-filter: blur(6px); }
.inv-scenarios.has-photo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.inv-uc-side { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--mist); box-shadow: var(--shadow); }
.inv-uc-side__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.inv-outs-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.inv-outs-wrap .inv-outs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.inv-uc-side--ink { box-shadow: 0 30px 70px rgb(0 0 0 / 35%); }
@media (max-width: 860px) {
	.inv-scenarios.has-photo, .inv-outs-wrap { grid-template-columns: 1fr; }
	.inv-uc-band__img { aspect-ratio: 16 / 9; }
	.inv-uc-band figcaption { display: none; }
}

/* Use-case pages: "On this page" guide, sticky under the header */
.inv-toc { position: sticky; top: var(--hdr, var(--header-h)); z-index: 50; background: rgb(255 255 255 / 94%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: top .5s var(--ease-out), box-shadow .3s; }
.admin-bar .inv-toc { top: calc(var(--hdr, var(--header-h)) + 32px); }
.inv-toc.is-stuck { box-shadow: 0 6px 20px rgb(20 13 38 / 6%); }
.inv-toc__inner { display: flex; align-items: center; gap: var(--s3); }
.inv-toc__h { flex: none; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.inv-toc__list { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: 0; padding: .4rem 0; list-style: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent); padding-inline: 1rem; }
.inv-toc__list::-webkit-scrollbar { display: none; }
.inv-toc__a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; white-space: nowrap; font-size: .92rem; font-weight: 560; color: var(--ink-2); text-decoration: none; transition: background .25s, color .25s; }
.inv-toc__a:hover { background: var(--mist); color: var(--ink); }
.inv-toc__a[aria-current="true"] { background: #E9E4F6; color: #4A3C82; font-weight: 650; }
.inv-toc__a:focus-visible { outline: 2px solid #4A3C82; outline-offset: -2px; }
html:has(.inv-toc) { scroll-padding-top: calc(var(--header-h) + 5rem); }
@media (max-width: 700px) { .inv-toc__h { display: none; } .inv-toc__inner { width: 100%; } .inv-toc__list { padding-inline: 1rem; } }

/* comparison article on phones: one card per task instead of a table wider than the screen */
@media (max-width: 640px) {
	.inv-article .inv-compare { overflow: visible; background: none; border: 0; box-shadow: none; }
	.inv-article .inv-compare table { min-width: 0; display: block; }
	.inv-article .inv-compare thead { display: none; }
	.inv-article .inv-compare tbody { display: grid; gap: .75rem; }
	.inv-article .inv-compare tr { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
	.inv-article .inv-compare td { border: 0; padding: .7rem .9rem; font-size: .95rem; }
	.inv-article .inv-compare td:first-child { grid-column: 1 / -1; padding-bottom: .2rem; font-size: 1.02rem; }
	.inv-article .inv-compare td:nth-child(2) { color: var(--ink-2); }
	.inv-article .inv-compare td:last-child { background: rgb(242 236 249 / 60%); }
	.inv-article .inv-compare td:nth-child(n+2)::before { display: block; margin-bottom: .2rem; font-size: .75rem; font-weight: 600; color: var(--ink-3); }
	.inv-article .inv-compare td:nth-child(2)::before { content: "Spreadsheets and forms"; }
	.inv-article .inv-compare td:nth-child(3)::before { content: "iNVEETO"; color: var(--iris-deep); }
	:lang(ar) .inv-article .inv-compare td:nth-child(2)::before { content: "الجداول والنماذج"; }
	:lang(ar) .inv-article .inv-compare td:nth-child(3)::before { content: "إنفييتو"; }
}

/* Arabic forms: whole form right-to-left; emails and phone numbers are typed left-to-right */
html[dir="rtl"] .wpcf7 { direction: rtl; }
html[dir="rtl"] .wpcf7 :is(input[type="email"], input[type="tel"], input[type="url"]) { direction: ltr; text-align: right; }

/* use-case cards with a photo on phones: photo across the top, then icon + name, then the line of text */
@media (max-width: 700px) {
	.x-uc__card.has-photo { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; row-gap: .55rem; column-gap: .75rem; padding: 0 1rem 1rem; align-items: center; }
	.x-uc__card.has-photo .x-uc__ph { grid-column: 1 / -1; margin: 0 -1rem .15rem; aspect-ratio: 16 / 9; }
	.x-uc__card.has-photo .x-uc__ico { grid-row: auto; margin-top: 0; }
	.x-uc__card.has-photo .x-uc__text { grid-column: 1 / -1; }
}

/* module screens on phones: the selected step shows its full name, the others just their number */
@media (max-width: 420px) {
	.x-layer__scene .hxa__steps { display: flex; gap: 6px; }
	.x-layer__scene .hxa__step { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
	.x-layer__scene .hxa__step[aria-selected="true"] { flex: 1 1 auto; justify-content: flex-start; }
	.x-layer__scene .hxa__step[aria-selected="true"] .hxa__label { overflow: visible; text-overflow: clip; }
}

/* tap targets of at least 44px on phones: logo, footer links, legal links, language switch, step timestamps */
.inv-header__brand, .inv-footer__brand > a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
	.inv-footer__nav a, .inv-footer__bottom a, .inv-footer__h a { display: inline-flex; align-items: center; min-height: 44px; }
	.inv-footer__nav li { margin-block: 0; }
	.inv-steps__jump { min-width: 44px; min-height: 44px; }
	.inv-sec__head .inv-link, .inv-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* use-case list on phones: names stay on one or two lines (Arabic names are longer) */
@media (max-width: 760px) {
	.inv-solutions__link.has-photo { grid-template-columns: 4.5rem minmax(0, 1fr) 2.75rem; }
	.inv-solutions__name { font-size: 1.25rem; line-height: 1.25; }
}

/* web addresses read left-to-right on Arabic pages too */
.inv-reg__url, .hx__url span, .hxa__url span { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .inv-reg__url { text-align: right; }

/* video thumbnails: the title is printed on the left of every thumbnail, so the play button and
   the length sit on the right (over the presenter) in both languages, never over the title */
.inv-guide-card__play { inset-inline-start: auto; left: auto; right: .75rem; bottom: .75rem; }
.inv-guide-card__time { inset-inline-end: auto; bottom: auto; left: auto; right: .6rem; top: .6rem; }

/* numbers like "5+" and "1,000+" keep the plus after the number on Arabic pages */
html[dir="rtl"] .inv-proof__value { direction: ltr; unicode-bidi: isolate; text-align: right; }
@media (max-width: 700px) { .inv-names a { display: inline-flex; align-items: center; min-height: 44px; } }

/* phone menu: once the page was scrolled, the header's glass effect (backdrop-filter) trapped the
   full-screen menu inside the header bar, so the menu opened empty. While the menu is open the
   header is plain white, and the menu opens a little faster. */
@media (max-width: 980px) {
	body.nav-open .inv-header, body.nav-open .inv-header.is-compact { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--white); transform: none; }
	.inv-nav.is-open { transition: clip-path .45s var(--ease-out), visibility 0s; }
	.inv-nav__list > .inv-nav__item { transition-duration: .35s, .45s; transition-delay: calc(.05s + var(--i, 0) * .04s); }
	.inv-nav__extra { transition-delay: .2s; }
}

/* ==========================================================================
   Home: "What are you organizing?" — pick an event, see it run (steps + short video)
   ========================================================================== */
.inv-pk { background: linear-gradient(180deg, var(--white), var(--mist) 85%); }
.inv-pk__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.inv-pk__head .inv-sec__title { margin-bottom: .6rem; }
.inv-pk__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.inv-pk__tab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; min-height: 4.6rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 70%); color: var(--ink-2); font: inherit; text-align: start; cursor: pointer; transition: border-color .3s, background .3s, box-shadow .35s, transform .35s var(--ease-out); }
.inv-pk__tab:hover { border-color: #CDBFE6; background: var(--white); transform: translateY(-2px); }
.inv-pk__tab[aria-selected="true"] { border-color: var(--iris); background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--iris), 0 14px 30px -18px rgb(76 46 130 / 45%); }
.inv-pk__tab:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
.inv-pk__ico { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 12px; background: var(--iris-tint); color: var(--iris); flex: none; transition: background .3s, color .3s; }
.inv-pk__tab[aria-selected="true"] .inv-pk__ico { background: var(--iris); color: #fff; }
.inv-pk__tx { display: grid; gap: .15rem; min-width: 0; }
.inv-pk__tx b { font-size: 1rem; font-weight: 650; line-height: 1.25; }
.inv-pk__tx small { font-size: .8rem; line-height: 1.35; color: var(--ink-3); }

.inv-pk__stage { position: relative; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 30px 60px -40px rgb(40 22 80 / 35%); overflow: hidden; }
.inv-pk__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center; padding: clamp(1.4rem, 1rem + 2vw, 2.75rem); }
.inv-pk__panel[hidden] { display: none; }
.inv-pk__panel.is-on { animation: pk-in .55s var(--ease-out) both; }
@keyframes pk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.inv-pk__h { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); letter-spacing: -.02em; margin: 0 0 1.2rem; }
.inv-pk__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.inv-pk__step { position: relative; display: grid; grid-template-columns: 2.1rem 1fr; gap: .9rem; padding-bottom: 1.15rem; }
.inv-pk__step:last-child { padding-bottom: 0; }
.inv-pk__step::before { content: ""; position: absolute; inset-inline-start: calc(1.05rem - 1px); top: 2.3rem; bottom: .25rem; width: 2px; border-radius: 2px; background: linear-gradient(var(--iris-tint), transparent); }
.inv-pk__step:last-child::before { display: none; }
.inv-pk__n { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--iris-tint); color: var(--iris-deep); font-weight: 650; font-size: .9rem; }
.inv-pk__when { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--iris); margin-bottom: .2rem; }
html[dir="rtl"] .inv-pk__when { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.inv-pk__step p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.inv-pk__panel.is-on .inv-pk__step { animation: pk-step .6s var(--ease-out) both; animation-delay: calc(.12s + var(--n) * .09s); }
@keyframes pk-step { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.inv-pk__links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.inv-pk__link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 600; font-size: .95rem; color: var(--iris-deep); text-decoration: none; }
.inv-pk__link:hover { color: var(--iris); }
.inv-pk__arr { width: 1rem; height: 1rem; transition: transform .25s; }
html[dir="rtl"] .inv-pk__arr { transform: scaleX(-1); }
.inv-pk__link:hover .inv-pk__arr { transform: translateX(3px); } html[dir="rtl"] .inv-pk__link:hover .inv-pk__arr { transform: scaleX(-1) translateX(3px); }
.inv-pk__video { margin: 0; }
.inv-pk__video .inv-yt { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -28px rgb(30 15 70 / 55%); }
.inv-pk__video figcaption { display: flex; align-items: baseline; gap: .5rem; margin-top: .8rem; font-size: .92rem; color: var(--ink-2); }
.inv-pk__watch { font-size: .75rem; font-weight: 650; padding: .2em .6em; border-radius: 999px; background: var(--mint-tint, #E3F7F2); color: var(--mint-ink, #0C6B5A); }

.inv-pk__sectors { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.4rem; font-size: .95rem; color: var(--ink-3); }
.inv-pk__sectors ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.inv-pk__sectors a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink-2); text-decoration: none; font-size: .9rem; transition: border-color .25s, color .25s; }
.inv-pk__sectors a:hover { border-color: var(--iris); color: var(--iris-deep); }

@media (max-width: 1100px) {
	.inv-pk__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.inv-pk__panel { grid-template-columns: 1fr; }
	.inv-pk__video { order: -1; }
}
@media (max-width: 640px) {
	/* tabs become one scrolling row of compact chips */
	.inv-pk__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: .2rem var(--gutter) .6rem; gap: .5rem; }
	.inv-pk__tabs::-webkit-scrollbar { display: none; }
	.inv-pk__tab { flex: 0 0 auto; scroll-snap-align: start; min-height: 48px; padding: .55rem .9rem .55rem .6rem; border-radius: 999px; gap: .5rem; }
	.inv-pk__tab small { display: none; }
	.inv-pk__ico { width: 2rem; height: 2rem; padding: .4rem; border-radius: 50%; }
	.inv-pk__tx b { font-size: .95rem; white-space: nowrap; }
	.inv-pk__stage { border-radius: 18px; }
	.inv-pk__panel { padding: 1rem 1rem 1.3rem; gap: 1.2rem; }
	.inv-pk__links { gap: 0 1rem; }
	.inv-pk__sectors { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .inv-pk__panel.is-on, .inv-pk__panel.is-on .inv-pk__step { animation: none; } }
.inv-blocks > section.inv-pk > .inv-wrap { width: 100%; }
@media (min-width: 641px) {
	/* tabs: icon on top, name, then a short hint, all the same height */
	.inv-pk__tab { grid-template-columns: 1fr; align-content: start; justify-items: start; gap: .65rem; min-height: 0; padding: 1rem 1rem 1.05rem; }
	.inv-pk__tx b { font-size: 1.02rem; }
}
.inv-pk__video--scene { display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); border-radius: 16px; background: var(--mist); }
.inv-pk__video--scene .inv-scene { width: min(100%, 26rem); margin: 0; }
/* deploy 1793558582 */
@media (max-width: 640px) { .inv-pk__tabs { scroll-padding-inline: var(--gutter); } }

/* ==========================================================================
   Welcome (home, first visit): "What are you organizing?" before the site opens
   ========================================================================== */
/* ---------- The iNVEETO assistant (light, calm, in the brand's own colours) ---------- */
html.wl-open { overflow: hidden; }
/* first visit: the page waits behind a quiet brand canvas until the assistant is up */
html.wl-first body { background: #FBF9FE; }
html.wl-first body > :not(.inv-wl):not(script) { visibility: hidden; }
html.wl-first body::before { content: ""; position: fixed; inset: 0; z-index: 999; background: #FBF9FE url("../img/logo.svg") center 46% / min(220px, 50vw) auto no-repeat; animation: wl-splash 1.4s ease-in-out infinite alternate; }
@keyframes wl-splash { from { opacity: .55; } to { opacity: 1; } }
html.wl-first .inv-wl { transition: none; opacity: 1; }

.inv-wl { --wl-bg: #FBF9FE; position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: var(--wl-bg); opacity: 0; transition: opacity .5s var(--ease); --x: 50vw; --y: 50vh; }
.inv-wl[hidden] { display: none; }
.inv-wl.is-in { opacity: 1; }
.inv-wl.is-out { clip-path: circle(0 at var(--x) var(--y)); transition: clip-path .75s cubic-bezier(.7, 0, .3, 1); opacity: 1; }
.inv-wl:not(.is-out) { clip-path: circle(150% at var(--x) var(--y)); }
.inv-wl__bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 60% at 50% -5%, #F1EAFB 0%, var(--wl-bg) 62%); }
.inv-wl__bg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: wl-float 30s ease-in-out infinite alternate; }
.inv-wl__bg i:nth-child(1) { width: 36rem; height: 36rem; inset-inline-start: -14rem; top: -14rem; background: #E3D6F6; }
.inv-wl__bg i:nth-child(2) { width: 30rem; height: 30rem; inset-inline-end: -12rem; bottom: -12rem; background: #D3F4EC; animation-duration: 36s; }
.inv-wl__bg i:nth-child(3) { width: 20rem; height: 20rem; left: 55%; top: 35%; background: #EFE7FA; opacity: .4; animation-duration: 42s; }
.inv-wl__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(125 91 166 / 13%) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(60% 55% at 50% 35%, #000, transparent); -webkit-mask-image: radial-gradient(60% 55% at 50% 35%, #000, transparent); }
@keyframes wl-float { to { transform: translate(3rem, 2rem) scale(1.08); } }

.inv-wl__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem); }
.inv-wl__logo .inv-logo svg { height: 36px; width: auto; }
.inv-wl__skip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 255 255 / 75%); color: var(--ink-2); font: inherit; font-size: .95rem; font-weight: 560; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.inv-wl__skip:hover { background: #fff; border-color: var(--iris); color: var(--iris-deep); }

.inv-wl__steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding: clamp(1rem, 5vh, 4rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.inv-wl__step { grid-area: 1 / 1; width: min(46rem, 100%); margin-inline: auto; text-align: center; opacity: 0; visibility: hidden; transform: translateY(1.25rem); transition: opacity .45s var(--ease), transform .6s var(--ease-out), visibility 0s .6s; }
.inv-wl__step.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
@keyframes wl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wl-card { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* the assistant's face: the iNVEETO mark in a softly breathing circle */
.inv-wl__ava { position: relative; flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 22px -10px rgb(95 63 140 / 45%); }
.inv-wl__ava svg { height: 58%; width: auto; }
.inv-wl__ava::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgb(85 214 190 / 55%); animation: wl-halo 3.4s ease-in-out infinite; }
@keyframes wl-halo { 0%, 100% { transform: scale(.94); opacity: .2; } 50% { transform: scale(1.04); opacity: .9; } }
.inv-wl__me { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; padding: .4rem 1.1rem .4rem .45rem; border-radius: 999px; background: rgb(255 255 255 / 80%); box-shadow: 0 0 0 1px var(--line); text-align: start; }
html[dir="rtl"] .inv-wl__me { padding: .4rem .45rem .4rem 1.1rem; }
.inv-wl__me .inv-wl__ava { width: 2.6rem; height: 2.6rem; }
.inv-wl__who { display: grid; line-height: 1.25; }
.inv-wl__who b { font-size: .98rem; color: var(--ink); }
.inv-wl__who small { font-size: .82rem; color: var(--ink-3); }

/* ask */
.inv-wl__q { margin: 0; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; color: var(--ink); }
.inv-wl__sub { margin: .9rem auto 0; max-width: 34rem; font-size: clamp(1rem, .95rem + .3vw, 1.18rem); color: var(--ink-2); }
.inv-wl.is-in .inv-wl__step.is-on :is(.inv-wl__me, .inv-wl__q, .inv-wl__sub) { animation: wl-rise .8s var(--ease-out) both; }
.inv-wl.is-in .inv-wl__step.is-on .inv-wl__q { animation-delay: .1s; } .inv-wl.is-in .inv-wl__step.is-on .inv-wl__sub { animation-delay: .18s; }
.inv-wl__form { position: relative; display: flex; align-items: flex-end; gap: .6rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: .55rem; border: 1px solid var(--line-2); border-radius: 22px; background: #fff; box-shadow: 0 24px 60px -34px rgb(76 46 130 / 45%); transition: border-color .3s, box-shadow .3s; text-align: start; }
.inv-wl__form:focus-within { border-color: var(--iris); box-shadow: 0 0 0 4px rgb(125 91 166 / 14%), 0 24px 60px -34px rgb(76 46 130 / 45%); animation: wl-breathe 3.6s ease-in-out infinite; }
@keyframes wl-breathe { 50% { box-shadow: 0 0 0 7px rgb(125 91 166 / 9%), 0 24px 60px -34px rgb(76 46 130 / 45%); } }
.inv-wl__form textarea { flex: 1; min-height: 3.4rem; max-height: 14rem; overflow-y: auto; resize: none; border: 0; outline: 0; padding: .85rem .9rem; background: none; color: var(--ink); font: inherit; font-size: 1.12rem; line-height: 1.5; field-sizing: content; }
.inv-wl__form textarea::placeholder { color: #8C85A0; }
.inv-wl__form textarea.is-shake { animation: wl-shake .4s; }
@keyframes wl-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.inv-wl__go { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.3rem; border: 0; border-radius: 16px; background: var(--iris-deep); color: #fff; font: inherit; font-weight: 650; font-size: 1rem; cursor: pointer; transition: transform .3s var(--ease-out), background .3s, box-shadow .3s; box-shadow: 0 12px 26px -14px rgb(95 63 140 / 80%); }
.inv-wl__go:hover { transform: translateY(-2px); background: #523478; }
.inv-wl__arr { width: 1.05rem; height: 1.05rem; flex: none; }
html[dir="rtl"] .inv-wl__arr { transform: scaleX(-1); }
.inv-wl__sense { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; min-height: 2.4rem; margin: .9rem 0 0; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .5s var(--ease-out); }
.inv-wl__sense.is-on { opacity: 1; transform: none; }
.inv-wl__sense-l { font-size: .88rem; color: var(--ink-3); margin-inline-end: .2rem; }
.inv-wl__chip-s { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: 0 .8rem; border-radius: 999px; background: var(--mint-tint); border: 1px solid rgb(85 214 190 / 55%); color: var(--mint-ink); font-size: .9rem; font-weight: 600; animation: wl-pop .45s var(--ease-out) both; }
.inv-wl__chip-s::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--mint); }
@keyframes wl-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.inv-wl__hint { margin: 1rem auto 0; max-width: 40rem; padding: .8rem 1rem; border-radius: 14px; background: var(--amber-tint); color: #6B4310; font-size: .98rem; line-height: 1.6; animation: wl-rise .5s var(--ease-out) both; }
.inv-wl__note { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-3); }
.inv-wl__or { margin: clamp(1.75rem, 4vh, 2.5rem) 0 .8rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
html[dir="rtl"] .inv-wl__or { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.inv-wl__kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.inv-wl__kind { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .35rem 1.05rem .35rem .45rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .98rem; font-weight: 560; cursor: pointer; transition: transform .35s var(--ease-out), border-color .3s, background .3s, box-shadow .3s; }
html[dir="rtl"] .inv-wl__kind { padding: .35rem .45rem .35rem 1.05rem; }
.inv-wl__kind .inv-pk__ico { width: 2.15rem; height: 2.15rem; padding: .48rem; border-radius: 50%; background: var(--iris-tint); color: var(--iris-deep); transition: background .3s, color .3s; }
.inv-wl__kind:hover, .inv-wl__kind:focus-visible { transform: translateY(-2px); border-color: var(--iris); box-shadow: 0 10px 24px -16px rgb(95 63 140 / 60%); outline: none; }
.inv-wl__kind:focus-visible { box-shadow: 0 0 0 3px rgb(125 91 166 / 30%); }
.inv-wl__kind:hover .inv-pk__ico, .inv-wl__kind:focus-visible .inv-pk__ico, .inv-wl__kind.is-sensed .inv-pk__ico { background: var(--iris-deep); color: #fff; }
.inv-wl__kind.is-sensed { border-color: var(--mint); background: var(--mint-tint); }
.inv-wl.is-in .inv-wl__step.is-on :is(.inv-wl__form, .inv-wl__note) { animation: wl-rise .8s var(--ease-out) .24s both; }
.inv-wl.is-in .inv-wl__step.is-on .inv-wl__kind { animation: wl-card .6s var(--ease-out) both; animation-delay: calc(.4s + var(--i) * .05s); }

/* thinking: the mark, with two slow rings */
.inv-wl__think { display: grid; justify-items: center; gap: 1.4rem; padding-top: 14vh; }
.inv-wl__orb { position: relative; display: grid; place-items: center; width: 7rem; height: 7rem; }
.inv-wl__orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--iris); animation: wl-spin 1.6s linear infinite; }
.inv-wl__orb i:nth-child(2) { inset: .55rem; border-top-color: var(--mint); animation-duration: 2.2s; animation-direction: reverse; }
.inv-wl__orb .inv-wl__ava { width: 4.2rem; height: 4.2rem; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
.inv-wl__thinking { margin: 0; font-size: 1.2rem; color: var(--ink-2); }

/* plan: a short conversation first, trust next, the steps only when they ask */
.inv-wl__plan { width: min(54rem, 100%); text-align: start; }
.inv-wl__chat { display: grid; gap: .9rem; }
.inv-wl__quote { justify-self: end; max-width: min(34rem, 88%); margin: 0; padding: .75rem 1.05rem; border-radius: 18px 18px 6px 18px; background: var(--iris-deep); color: #fff; font-size: 1rem; line-height: 1.55; box-shadow: 0 10px 24px -16px rgb(95 63 140 / 70%); }
html[dir="rtl"] .inv-wl__quote { border-radius: 18px 18px 18px 6px; }
.inv-wl__say { display: flex; align-items: flex-start; gap: .8rem; }
.inv-wl__bubble { flex: 1; min-width: 0; padding: 1.1rem 1.3rem 1.25rem; border-radius: 6px 22px 22px 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 50px -34px rgb(76 46 130 / 50%); }
html[dir="rtl"] .inv-wl__bubble { border-radius: 22px 6px 22px 22px; }
.inv-wl__plan .inv-wl__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .55rem; font-size: .9rem; font-weight: 650; color: var(--mint-ink); }
.inv-wl__change { min-height: 36px; margin-inline-start: auto; padding: 0 .8rem; border: 0; border-radius: 999px; background: none; color: var(--ink-3); font: inherit; font-size: .85rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inv-wl__change:hover { color: var(--iris-deep); }
.inv-wl__heard { margin: 0; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); font-weight: 650; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); min-height: 1.4em; }
.inv-wl__reply { margin: .5rem 0 0; font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); min-height: 3.3em; }
.inv-wl__plan.is-on .inv-wl__quote { animation: wl-rise .5s var(--ease-out) both; }
.inv-wl__plan.is-on .inv-wl__say { animation: wl-rise .6s var(--ease-out) .15s both; }

.inv-wl__trust { margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: 22px; background: rgb(255 255 255 / 70%); box-shadow: 0 0 0 1px var(--line); }
.inv-wl__plan.is-on .inv-wl__trust { animation: wl-rise .7s var(--ease-out) .9s both; }
.inv-wl__th { margin: 0 0 .8rem; font-size: .9rem; font-weight: 650; color: var(--ink-3); }
.inv-wl__like { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem 1rem; padding: .9rem 1rem; border-radius: 16px; background: var(--iris-tint); color: var(--ink); text-decoration: none; transition: background .3s, transform .35s var(--ease-out); }
.inv-wl__like[hidden] { display: none; }
.inv-wl__like small { grid-column: 1; font-size: .82rem; color: var(--ink-3); }
.inv-wl__like b { grid-column: 1; font-size: 1.05rem; }
.inv-wl__read { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 600; color: var(--iris-deep); }
.inv-wl__like:hover { background: var(--mist-2); transform: translateY(-2px); }
.inv-wl__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.inv-wl__stats li { display: grid; gap: .15rem; align-content: start; padding: .2rem .2rem; }
.inv-wl__stats b { font-family: var(--f-display); font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; color: var(--iris-deep); direction: ltr; text-align: start; unicode-bidi: isolate; }
html[dir="rtl"] .inv-wl__stats b { text-align: right; justify-self: start; }
.inv-wl__stats span { font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
.inv-wl__calm { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; padding: .9rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.inv-wl__calm li { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: 0 .75rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: .88rem; color: var(--ink-2); }
.inv-wl__calm li::before { content: "✓"; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--mint-tint); color: var(--mint-ink); font-size: .72rem; font-weight: 800; line-height: 1; }

.inv-wl__ask2 { margin-top: 1.4rem; text-align: center; }
.inv-wl__ask2[hidden] { display: none; }
.inv-wl__plan.is-on .inv-wl__ask2 { animation: wl-rise .7s var(--ease-out) 1.15s both; }
.inv-wl__q2 { margin: 0 0 .9rem; font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.inv-wl__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }
.inv-wl__ctas--end { justify-content: flex-start; margin-top: 1.4rem; }
.inv-wl__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.5rem; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; color: var(--iris-deep); font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform .3s var(--ease-out), background .3s, border-color .3s; }
.inv-wl__cta:hover { transform: translateY(-2px); border-color: var(--iris); background: var(--iris-tint); }
.inv-wl__cta--main { border-color: var(--iris-deep); background: var(--iris-deep); color: #fff; box-shadow: 0 12px 26px -14px rgb(95 63 140 / 80%); }
.inv-wl__cta--main:hover { background: #523478; border-color: #523478; }
.inv-wl__cta--plain { border-color: transparent; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.inv-wl__cta--plain:hover { background: none; border-color: transparent; color: var(--iris-deep); }
.inv-wl__terms { font-size: .88rem; color: var(--ink-3); }

.inv-wl__more { margin-top: 1.4rem; scroll-margin-top: 1rem; }
.inv-wl__more.is-shown { animation: wl-rise .7s var(--ease-out) both; }
.inv-wl__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.1rem, 2.5vw, 1.8rem); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -40px rgb(76 46 130 / 50%); }
.inv-wl__flow .inv-pk__steps { gap: 0; }
.inv-wl__more.is-shown .inv-pk__step { animation: pk-step .6s var(--ease-out) both; animation-delay: calc(.2s + var(--n) * .12s); }
.inv-wl__more.is-shown .inv-pk__step::before { transform-origin: top; animation: wl-line .9s var(--ease-out) both; animation-delay: calc(.4s + var(--n) * .12s); }
@keyframes wl-line { from { transform: scaleY(0); } to { transform: none; } }
.inv-wl__media .inv-yt { border-radius: 16px; overflow: hidden; }
.inv-wl__media .inv-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.inv-wl__next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .8rem; }
.inv-wl__nx { position: relative; display: grid; gap: .15rem; padding: 1rem 2.6rem 1rem 1.15rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease-out), box-shadow .3s; }
html[dir="rtl"] .inv-wl__nx { padding: 1rem 1.15rem 1rem 2.6rem; }
.inv-wl__nx[hidden] { display: none; }
.inv-wl__nx small { font-size: .82rem; color: var(--ink-3); }
.inv-wl__nx b { font-size: 1.02rem; font-weight: 600; }
.inv-wl__nx .inv-wl__arr { position: absolute; inset-inline-end: 1rem; top: 50%; margin-top: -.5rem; color: var(--iris); }
.inv-wl__nx:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--iris), 0 14px 30px -20px rgb(95 63 140 / 60%); }

/* the page underneath opens up as the assistant closes */
html.wl-opening .inv-main { animation: wl-open .9s var(--ease-out) both; }
@keyframes wl-open { from { transform: scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }

/* the assistant button, on every page */
.inv-mypill { position: fixed; z-index: 90; inset-inline-start: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: .3rem 1.15rem .3rem .3rem; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; box-shadow: 0 0 0 1px var(--line-2), 0 16px 36px -14px rgb(60 30 110 / 45%); animation: wl-rise .6s var(--ease-out) .4s both; transition: transform .3s var(--ease-out), box-shadow .3s; }
html[dir="rtl"] .inv-mypill { padding: .3rem .3rem .3rem 1.15rem; }
.inv-mypill[hidden], .inv-mypill [hidden] { display: none; }
.inv-mypill:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--iris), 0 18px 40px -14px rgb(60 30 110 / 50%); }
.inv-mypill__ava { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--iris-tint); }
.inv-mypill__ava svg { height: 60%; width: auto; }
.inv-mypill__ava::after { content: ""; position: absolute; inset-inline-end: -1px; top: -1px; width: .7rem; height: .7rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px #fff; }
.inv-mypill b { font-weight: 650; color: var(--iris-deep); }

/* "Picked for you" state of the home section */
.inv-pk.is-mine .inv-pk__tabs { display: none; }
.inv-pk__mine { max-width: 52rem; margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); animation: wl-rise .8s var(--ease-out) both; }
.inv-pk__mine .inv-sec__title { margin-bottom: .8rem; }
.inv-pk__you { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.inv-pk__tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem; border-radius: 999px; background: var(--iris-tint); color: var(--iris-deep); font-weight: 600; font-size: .92rem; }
.inv-pk__tag--s { background: #E3F7F2; color: #0C6B5A; }
.inv-pk__change { min-height: 44px; padding: 0 .9rem; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: .92rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.inv-pk__change:hover { color: var(--iris); }
.x-uc__card.is-pick { border-color: var(--iris); box-shadow: 0 0 0 1px var(--iris), 0 18px 40px -26px rgb(76 46 130 / 55%); }
.x-uc__pick { position: absolute; z-index: 2; inset-inline-end: .8rem; top: .8rem; padding: .25rem .7rem; border-radius: 999px; background: var(--iris); color: #fff; font-size: .78rem; font-weight: 650; box-shadow: 0 6px 16px rgb(60 30 110 / 30%); }
.inv-pk.is-mine .inv-pk__h, .inv-pk.is-mine .inv-pk__sectors { display: none; }

@media (max-width: 860px) {
	.inv-wl__body { grid-template-columns: 1fr; }
	.inv-wl__media { order: -1; }
	.inv-wl__next { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.inv-wl__steps { padding-top: .75rem; }
	.inv-wl__logo .inv-logo svg { height: 30px; }
	.inv-wl__skip { padding: 0 .9rem; font-size: .9rem; }
	.inv-wl__me { margin-bottom: 1rem; }
	.inv-wl__q { font-size: 2.05rem; }
	.inv-wl__sub { font-size: .98rem; margin-top: .6rem; }
	.inv-wl__form { flex-direction: column; align-items: stretch; border-radius: 18px; }
	.inv-wl__form textarea { font-size: 1.02rem; min-height: 5.5rem; }
	.inv-wl__go { justify-content: center; }
	.inv-wl__kind { font-size: .92rem; min-height: 44px; }
	.inv-wl__say { gap: .55rem; }
	.inv-wl__say > .inv-wl__ava { width: 2.4rem; height: 2.4rem; }
	.inv-wl__bubble { padding: 1rem 1.05rem 1.1rem; }
	.inv-wl__heard { font-size: 1.15rem; }
	.inv-wl__reply { font-size: 1rem; }
	.inv-wl__trust { padding: 1rem; }
	.inv-wl__like { grid-template-columns: 1fr; }
	.inv-wl__read { grid-column: 1; grid-row: auto; margin-top: .35rem; }
	.inv-wl__stats { grid-template-columns: 1fr; gap: .5rem; }
	.inv-wl__stats li { grid-template-columns: 4.6rem 1fr; align-items: baseline; gap: .6rem; }
	.inv-wl__stats b { font-size: 1.3rem; }
	.inv-wl__ctas .inv-wl__cta { flex: 1 1 100%; }
	.inv-mypill { bottom: calc(.8rem + env(safe-area-inset-bottom)); inset-inline-start: .8rem; font-size: .9rem; min-height: 48px; }
	.inv-mypill__ava { width: 2.3rem; height: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
	.inv-wl, .inv-wl__step, .inv-wl.is-out { transition: none; }
	.inv-wl *, .inv-wl *::before, .inv-wl *::after, html.wl-opening .inv-main, .inv-pk__mine, .inv-mypill, html.wl-first body::before { animation: none !important; }
}

/* the assistant's face: the full iNVEETO logo on a small white card, with a live dot */
.inv-wl__top { justify-content: flex-end; }
.inv-wl__badge { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: .6rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 28px -16px rgb(95 63 140 / 50%); }
.inv-wl__badge.inv-logo svg { display: block; height: 28px; width: auto; }
.inv-wl__badge::after { content: ""; position: absolute; inset-inline-end: -4px; top: -4px; width: .7rem; height: .7rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px #fff; animation: wl-live 2.8s ease-in-out infinite; }
@keyframes wl-live { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgb(85 214 190 / 0%); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgb(85 214 190 / 28%); } }
.inv-wl__me { gap: .9rem; padding: 0; background: none; box-shadow: none; }
html[dir="rtl"] .inv-wl__me { padding: 0; }
.inv-wl__me .inv-wl__badge { padding: .75rem 1.15rem; }
.inv-wl__me .inv-wl__badge.inv-logo svg { height: 34px; }
.inv-wl__who b { font-size: 1rem; }
/* thinking: the logo breathes, three dots */
.inv-wl__orb { width: auto; height: auto; display: grid; justify-items: center; gap: 1.1rem; }
.inv-wl__orb i { position: static; inset: auto; border: 0; border-radius: 50%; animation: none; }
.inv-wl__orb .inv-wl__badge { padding: 1rem 1.5rem; animation: wl-breath 2.4s ease-in-out infinite; }
.inv-wl__orb .inv-wl__badge.inv-logo svg { height: 44px; }
@keyframes wl-breath { 50% { transform: scale(1.04); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgb(95 63 140 / 55%); } }
.inv-wl__dots3 { display: flex; gap: .45rem; }
.inv-wl__dots3 i { display: block; width: .55rem; height: .55rem; background: var(--iris); opacity: .3; animation: wl-dot 1.2s ease-in-out infinite; }
.inv-wl__dots3 i:nth-child(2) { animation-delay: .15s; background: var(--iris-deep); }
.inv-wl__dots3 i:nth-child(3) { animation-delay: .3s; background: var(--mint); }
@keyframes wl-dot { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-5px); } }
/* the answer: the logo above the message, like a sender */
.inv-wl__say { flex-direction: column; align-items: flex-start; gap: .55rem; }
.inv-wl__say .inv-wl__badge { padding: .45rem .8rem; border-radius: 12px; }
.inv-wl__say .inv-wl__badge.inv-logo svg { height: 22px; }
.inv-wl__bubble { width: 100%; border-radius: 22px; border-start-start-radius: 6px; }
html[dir="rtl"] .inv-wl__bubble { border-radius: 22px; border-start-start-radius: 6px; }
/* the button on every page */
.inv-mypill .inv-wl__badge { padding: .45rem .7rem; border-radius: 999px; box-shadow: none; background: var(--mist); }
.inv-mypill .inv-wl__badge.inv-logo svg { height: 20px; }
.inv-mypill .inv-wl__badge::after { inset-inline-end: -1px; top: -1px; }
@media (max-width: 760px) {
	.inv-wl__me .inv-wl__badge.inv-logo svg { height: 28px; }
	.inv-wl__me .inv-wl__badge { padding: .6rem .95rem; }
	.inv-mypill .inv-wl__badge.inv-logo svg { height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .inv-mypill .inv-wl__badge::after { animation: none; } }

/* the assistant's face is the round site icon; the full logo stays at the top */
.inv-wl__top { justify-content: space-between; }
.inv-wl__ava { overflow: visible; background: #fff; }
.inv-wl__ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.inv-wl__ava::after { inset: -4px; border-color: rgb(125 91 166 / 45%); }
.inv-wl__me .inv-wl__ava { width: 3.2rem; height: 3.2rem; }
.inv-wl__say > .inv-wl__ava { width: 2.75rem; height: 2.75rem; }
.inv-wl__say { flex-direction: row; align-items: flex-start; gap: .75rem; }
.inv-wl__orb .inv-wl__ava { width: 5.5rem; height: 5.5rem; animation: wl-breath 2.4s ease-in-out infinite; }
.inv-mypill .inv-wl__ava { width: 2.6rem; height: 2.6rem; box-shadow: none; }
.inv-mypill .inv-wl__ava::after { display: none; }
.inv-mypill { box-shadow: 0 0 0 1px var(--line-2), 0 16px 36px -14px rgb(60 30 110 / 45%); }
@media (max-width: 760px) {
	.inv-wl__me .inv-wl__ava { width: 2.8rem; height: 2.8rem; }
	.inv-wl__say > .inv-wl__ava { width: 2.3rem; height: 2.3rem; }
	.inv-mypill .inv-wl__ava { width: 2.3rem; height: 2.3rem; }
}

/* ---------- The answer as a conversation: one message at a time ---------- */
.inv-wl__plan { width: min(48rem, 100%); }
.inv-wl__thread { --av: 2.75rem; --gap: .75rem; display: grid; gap: .6rem; padding-bottom: 2rem; }
.inv-wl__thread > :not(.is-said):not(.inv-wl__typing), .inv-wl__thread > [hidden] { display: none !important; }
.inv-wl__thread > .is-said { animation: wl-msg .45s var(--ease-out) both; }
@keyframes wl-msg { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.inv-wl__line { display: flex; align-items: flex-start; gap: var(--gap); }
.inv-wl__line > .inv-wl__ava { width: var(--av); height: var(--av); }
.inv-wl__line--cont, .inv-wl__quick { padding-inline-start: calc(var(--av) + var(--gap)); }
.inv-wl__line--me { justify-content: flex-end; margin-block: .4rem .2rem; }
.inv-wl__msg { max-width: 38rem; margin: 0; padding: .85rem 1.1rem; border-radius: 20px; border-start-start-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 34px -26px rgb(76 46 130 / 55%); color: var(--ink-2); font-size: 1.06rem; line-height: 1.7; }
.inv-wl__line--cont .inv-wl__msg { border-start-start-radius: 20px; }
.inv-wl__msg p { margin: 0; }
.inv-wl__msg--me { max-width: min(32rem, 85%); border-radius: 20px; border-end-end-radius: 6px; border-start-start-radius: 20px; background: var(--iris-deep); color: #fff; box-shadow: 0 10px 24px -16px rgb(95 63 140 / 70%); }
.inv-wl__heard { font-size: 1.14rem; font-weight: 650; line-height: 1.55; color: var(--ink); min-height: 0; }
.inv-wl__msg .inv-wl__change { display: inline-flex; min-height: 32px; margin: .3rem 0 0; padding: 0; font-size: .85rem; }
.inv-wl__msg--card { width: 100%; max-width: none; padding: 1rem 1.1rem 1.1rem; }
.inv-wl__msg--card > p { margin-bottom: .75rem; color: var(--ink); font-weight: 600; }
.inv-wl__msg--wide { flex: 1; min-width: 0; max-width: none; padding: 1rem 1.1rem 1.2rem; }
.inv-wl__msg--wide > p { margin-bottom: .9rem; color: var(--ink); font-weight: 600; }
.inv-wl__msg--wide .inv-wl__body { padding: 0; box-shadow: none; border-radius: 0; background: none; }
.inv-wl__line.is-said .inv-pk__step { animation: pk-step .6s var(--ease-out) both; animation-delay: calc(.2s + var(--n) * .14s); }
.inv-wl__quick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .2rem; }
.inv-wl__quick .inv-wl__cta { min-height: 48px; padding: 0 1.25rem; border-radius: 999px; font-size: .98rem; }
.inv-wl__quick.is-used [data-wl-more] { display: none; }
.inv-wl__typing { display: flex; }
.inv-wl__typing .inv-wl__msg { padding: .9rem 1.1rem; }
.inv-wl__typing .inv-wl__dots3 i { width: .45rem; height: .45rem; }
@media (max-width: 760px) {
	.inv-wl__thread { --av: 2.2rem; --gap: .55rem; }
	.inv-wl__msg { font-size: 1rem; padding: .8rem .95rem; }
	.inv-wl__heard { font-size: 1.06rem; }
	.inv-wl__line--cont, .inv-wl__quick { padding-inline-start: 0; }
	.inv-wl__quick .inv-wl__cta { flex: 1 1 100%; }
	#wl-more { flex-direction: column; }
	#wl-more .inv-wl__msg--wide { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .inv-wl__thread > .is-said { animation: none; } }

/* ---------- Guided conversation: recap card, reply buttons, links ---------- */
.inv-wl__msg--card div > p:first-child, .inv-wl__msg--wide div > p:first-child { margin: 0 0 .75rem; color: var(--ink); font-weight: 600; }
.inv-wl__msg b { color: var(--ink); font-weight: 650; }
.inv-wl__recap > p { margin: 0 0 .7rem; color: var(--ink); font-weight: 600; }
.inv-wl__recaplist { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.inv-wl__recaplist li { display: inline-grid; gap: .05rem; padding: .45rem .85rem; border-radius: 14px; background: var(--iris-tint); line-height: 1.35; }
.inv-wl__recaplist small { font-size: .76rem; color: var(--ink-3); }
.inv-wl__recaplist b { font-size: .95rem; color: var(--iris-deep); }
.inv-wl__quick .inv-wl__cta { background: #fff; border-color: var(--line-2); color: var(--iris-deep); }
.inv-wl__quick .inv-wl__cta:hover, .inv-wl__quick .inv-wl__cta:focus-visible { border-color: var(--iris); background: var(--iris-tint); outline: none; }
.inv-wl__quick .inv-wl__cta--soft { border-color: var(--iris); }
.inv-wl__quick .inv-wl__cta--main { border-color: var(--iris-deep); background: var(--iris-deep); color: #fff; }
.inv-wl__quick .inv-wl__cta--main:hover { background: #523478; border-color: #523478; }
.inv-wl__quick .inv-wl__cta--plain { border-color: transparent; background: none; color: var(--ink-2); }
.inv-wl__msg .inv-wl__next { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: .2rem; }
.inv-wl__msg .inv-wl__nx { box-shadow: 0 0 0 1px var(--line); background: var(--wl-bg, #FBF9FE); }
.inv-wl__msg .inv-wl__like + .inv-wl__calm { border-top: 0; padding-top: 0; margin-top: .8rem; }
.inv-wl__line.is-said .inv-pk__step { animation: pk-step .6s var(--ease-out) both; animation-delay: calc(.2s + var(--n) * .14s); }
#wl-more { scroll-margin-top: 1rem; }
@media (max-width: 760px) {
	.inv-wl__quick { padding-inline-start: 0; }
	.inv-wl__quick .inv-wl__cta { flex: 1 1 calc(50% - .3rem); padding: 0 .9rem; }
	#wl-more { flex-direction: column; }
	#wl-more .inv-wl__msg--wide { width: 100%; }
}

/* ask more, any time: a quiet message box under the conversation */
.inv-wl__plan { padding-bottom: 5.5rem; }
.inv-wl__composer { position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 2; display: flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .4rem .4rem .4rem .9rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -24px rgb(76 46 130 / 55%); transition: border-color .3s, box-shadow .3s; }
html[dir="rtl"] .inv-wl__composer { padding: .4rem .9rem .4rem .4rem; }
.inv-wl__composer:focus-within { border-color: var(--iris); box-shadow: 0 0 0 4px rgb(125 91 166 / 12%), 0 18px 40px -24px rgb(76 46 130 / 55%); }
.inv-wl__composer input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; }
.inv-wl__composer input::placeholder { color: #8C85A0; }
.inv-wl__composer .inv-wl__go { min-height: 44px; width: 44px; padding: 0; justify-content: center; border-radius: 50%; }

/* situations you recognise: numbered rows, calm and editorial */
.inv-wl__sits { display: grid; gap: 0; max-width: 40rem; margin-inline: auto; text-align: start; border-top: 1px solid var(--line-2); }
.inv-wl__sit { display: grid; grid-template-columns: 2.2rem 1fr 2.75rem; align-items: center; gap: .9rem; width: 100%; min-height: 64px; padding: .9rem .2rem; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: background .3s, padding .35s var(--ease-out); }
.inv-wl__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; letter-spacing: .08em; color: var(--mint-ink); }
.inv-wl__sitx { font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .45vw, 1.28rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.inv-wl__plus { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--iris-deep); background: #fff; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease-out); }
.inv-wl__plus svg { width: 1rem; height: 1rem; }
.inv-wl__sit:hover, .inv-wl__sit:focus-visible { background: rgb(255 255 255 / 70%); padding-inline: .8rem; outline: none; }
.inv-wl__sit:hover .inv-wl__plus, .inv-wl__sit:focus-visible .inv-wl__plus, .inv-wl__sit.is-sensed .inv-wl__plus { background: var(--iris-deep); border-color: var(--iris-deep); color: #fff; transform: rotate(90deg); }
.inv-wl__sit:focus-visible { box-shadow: inset 0 0 0 2px rgb(125 91 166 / 45%); border-radius: 12px; }
.inv-wl.is-in .inv-wl__step.is-on .inv-wl__sit { animation: wl-card .6s var(--ease-out) both; animation-delay: calc(.4s + var(--i) * .07s); }
html[dir="rtl"] .inv-wl__num { font-family: var(--f-text); letter-spacing: 0; }
@media (max-width: 760px) {
	.inv-wl__sit { grid-template-columns: 1.8rem 1fr 2.5rem; gap: .6rem; padding: .8rem 0; }
	.inv-wl__sitx { font-size: 1.02rem; }
}

/* suggestions as one calm card; questions that take several answers */
.inv-wl__advice { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.inv-wl__advice li { position: relative; padding-inline-start: 1.5rem; line-height: 1.7; }
.inv-wl__advice li::before { content: ""; position: absolute; inset-inline-start: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-tint); }
.inv-wl__quick--many .inv-wl__tick { position: relative; padding-inline-start: 2.6rem; }
.inv-wl__tick::before { content: ""; position: absolute; inset-inline-start: .9rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 6px; border: 1.5px solid var(--line-2); background: #fff; transition: background .2s, border-color .2s; }
.inv-wl__tick[aria-pressed="true"] { border-color: var(--iris); background: var(--iris-tint); }
.inv-wl__tick[aria-pressed="true"]::before { border-color: var(--iris-deep); background: var(--iris-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.inv-wl__quick .inv-wl__go2 { border-color: var(--iris-deep); background: var(--iris-deep); color: #fff; }
.inv-wl__quick .inv-wl__go2:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 760px) { .inv-wl__quick--many .inv-wl__cta { flex: 1 1 100%; } }
/* the "ask more" box sits after the conversation, never over the answer buttons */
.inv-wl__composer { position: static; margin-top: 1.2rem; }
.inv-wl__plan { padding-bottom: 2rem; }
.inv-wl__quick--many .inv-wl__cta { justify-content: flex-start; }

/* ---------- 2 Nov (external review) footer fixes ---------- */
/* Arabic: email and WhatsApp values are left-to-right text; keep them on the start (right) side under their labels. */
html[dir="rtl"] .inv-contact-list__value { justify-self: start; text-align: right; }
/* Phones: room under the footer so the assistant button never covers the language switch or the legal links. */
@media (max-width: 760px) { .inv-footer__bottom { padding-bottom: calc(var(--s4) + 84px + env(safe-area-inset-bottom)); } }
/* ---------- way back to the assistant: header, menu, a small round button on phones; Start over ---------- */
.inv-header__ai { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem .9rem .25rem .3rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 560; cursor: pointer; transition: border-color .25s, background .25s; }
html[dir="rtl"] .inv-header__ai { padding: .25rem .3rem .25rem .9rem; }
.inv-header__ai img { width: 30px; height: 30px; border-radius: 50%; }
.inv-header__ai:hover, .inv-header__ai:focus-visible { border-color: var(--iris); background: var(--iris-tint); }
.inv-nav__ai { display: none; }
@media (max-width: 1180px) { .inv-header__ai span { display: none; } .inv-header__ai, html[dir="rtl"] .inv-header__ai { padding: .25rem; } }
@media (max-width: 980px) {
	.inv-header__ai { display: none; }
	.inv-nav__ai { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px; margin-bottom: .6rem; padding: .5rem .9rem .5rem .5rem; border: 1px solid var(--line-2); border-radius: 16px; background: var(--iris-tint); color: var(--iris-deep); font: inherit; font-size: 1.02rem; font-weight: 600; text-align: start; cursor: pointer; }
	html[dir="rtl"] .inv-nav__ai { padding: .5rem .5rem .5rem .9rem; }
	.inv-nav__ai img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
}
/* the floating button: on phones just the round icon, small and out of the way */
@media (max-width: 760px) {
	.inv-mypill, html[dir="rtl"] .inv-mypill { inset-inline-start: auto; inset-inline-end: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); min-height: 0; padding: 0; border-radius: 50%; }
	.inv-mypill .inv-mypill__ask { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.inv-mypill .inv-wl__ava { width: 52px; height: 52px; }
	body.nav-open .inv-mypill { display: none; }
}
.inv-wl__topbtns { display: inline-flex; align-items: center; gap: .5rem; }
.inv-wl__reset { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 255 255 / 75%); color: var(--ink-2); font: inherit; font-size: .92rem; font-weight: 560; cursor: pointer; }
.inv-wl__reset[hidden] { display: none; }
.inv-wl__reset svg { width: 1rem; height: 1rem; }
.inv-wl__reset:hover { border-color: var(--iris); color: var(--iris-deep); background: #fff; }
@media (max-width: 760px) { .inv-wl__topbtns .inv-wl__skip, .inv-wl__reset { padding: 0 .75rem; font-size: .85rem; } .inv-wl__skip .inv-wl__arr { display: none; } }

/* ==========================================================================
   Assistant, one screen (3 Nov): welcome + four cards, or the conversation; one message box docked at the bottom
   ========================================================================== */
.inv-wl__steps { padding: 0 clamp(1rem, 4vw, 3rem); align-items: stretch; }
.inv-wl__chat { display: flex; flex-direction: column; width: min(46rem, 100%); min-height: calc(100dvh - 92px); margin-inline: auto; text-align: start; transform: none; }
.inv-wl__chat.is-on { opacity: 1; visibility: visible; }
.inv-wl:not(.is-chat) .inv-wl__thread { display: none; }
.inv-wl.is-chat .inv-wl__hello { display: none; }
/* welcome */
.inv-wl__hello { display: grid; justify-items: center; gap: .35rem; padding: clamp(1rem, 6vh, 3.5rem) 0 1.5rem; text-align: center; }
.inv-wl__bigava .inv-wl__ava { width: 4.6rem; height: 4.6rem; margin-bottom: .6rem; }
.inv-wl__kicker2 { margin: 0; font-size: .85rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--mint-ink); }
html[dir="rtl"] .inv-wl__kicker2 { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.inv-wl__hello .inv-wl__q { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.inv-wl__hello .inv-wl__sub { margin: .3rem auto 0; max-width: 32rem; font-size: 1.05rem; }
.inv-wl__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; margin-top: clamp(1.25rem, 3vh, 2rem); text-align: start; }
.inv-wl__card2 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; min-height: 5.5rem; padding: 1rem 1.05rem; border: 1px solid var(--line-2); border-radius: 20px; background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; box-shadow: 0 10px 30px -24px rgb(76 46 130 / 55%); transition: transform .35s var(--ease-out), border-color .25s, box-shadow .35s; }
.inv-wl__cico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; background: var(--iris-tint); color: var(--iris-deep); transition: background .3s, color .3s; }
.inv-wl__cico svg { width: 1.45rem; height: 1.45rem; }
.inv-wl__ctx { display: grid; gap: .2rem; }
.inv-wl__ctx small { font-size: .8rem; font-weight: 650; color: var(--mint-ink); }
.inv-wl__ctx b { font-size: 1rem; font-weight: 600; line-height: 1.45; }
.inv-wl__carr { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--iris); transition: transform .35s var(--ease-out), background .3s, color .3s; }
.inv-wl__carr svg { width: 1rem; height: 1rem; }
html[dir="rtl"] .inv-wl__carr svg { transform: scaleX(-1); }
.inv-wl__card2:hover, .inv-wl__card2:focus-visible, .inv-wl__card2.is-sensed { transform: translateY(-3px); border-color: var(--iris); box-shadow: 0 18px 40px -24px rgb(76 46 130 / 65%); outline: none; }
.inv-wl__card2:hover .inv-wl__cico, .inv-wl__card2:focus-visible .inv-wl__cico, .inv-wl__card2.is-sensed .inv-wl__cico { background: var(--iris-deep); color: #fff; }
.inv-wl__card2:hover .inv-wl__carr, .inv-wl__card2:focus-visible .inv-wl__carr { background: var(--iris-tint); transform: translateX(3px); }
html[dir="rtl"] .inv-wl__card2:hover .inv-wl__carr, html[dir="rtl"] .inv-wl__card2:focus-visible .inv-wl__carr { transform: translateX(-3px); }
.inv-wl.is-in .inv-wl__hello > * { animation: wl-rise .7s var(--ease-out) both; }
.inv-wl.is-in .inv-wl__hello .inv-wl__q { animation-delay: .08s; } .inv-wl.is-in .inv-wl__hello .inv-wl__sub { animation-delay: .14s; }
.inv-wl.is-in .inv-wl__card2 { animation: wl-card .6s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * .07s); }
/* conversation */
.inv-wl.is-chat .inv-wl__thread { padding-top: clamp(1rem, 3vh, 2rem); padding-bottom: 1rem; }
/* the message box, docked at the bottom */
.inv-wl__dock { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: .75rem 0 max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--wl-bg) 70%, rgb(251 249 254 / 0)); }
.inv-wl__dock .inv-wl__sense { justify-content: flex-start; min-height: 0; margin: 0 0 .5rem; }
.inv-wl__dock .inv-wl__sense:not(.is-on) { display: none; }
.inv-wl__dock .inv-wl__composer { position: static; display: flex; align-items: flex-end; gap: .5rem; margin: 0; padding: .45rem; border: 1px solid var(--line-2); border-radius: 24px; background: #fff; box-shadow: 0 18px 44px -26px rgb(76 46 130 / 60%); animation: none; }
html[dir="rtl"] .inv-wl__dock .inv-wl__composer { padding: .45rem; }
.inv-wl__dock .inv-wl__composer:focus-within { border-color: var(--iris); box-shadow: 0 0 0 4px rgb(125 91 166 / 12%), 0 18px 44px -26px rgb(76 46 130 / 60%); }
.inv-wl__dock textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 8.5rem; resize: none; border: 0; outline: 0; padding: .6rem .75rem; background: none; color: var(--ink); font: inherit; font-size: 1.02rem; line-height: 1.5; field-sizing: content; }
.inv-wl__dock textarea::placeholder { color: #8C85A0; }
.inv-wl__dock textarea.is-shake { animation: wl-shake .4s; }
.inv-wl__dock .inv-wl__go { flex: none; display: grid; place-items: center; width: 46px; min-height: 46px; height: 46px; padding: 0; border-radius: 50%; }
@media (max-width: 760px) {
	.inv-wl__steps { padding: 0 .9rem; }
	.inv-wl__chat { min-height: calc(100dvh - 76px); }
	.inv-wl__hello { padding-top: .5rem; gap: .25rem; }
	.inv-wl__bigava .inv-wl__ava { width: 3.6rem; height: 3.6rem; margin-bottom: .3rem; }
	.inv-wl__hello .inv-wl__q { font-size: 1.75rem; }
	.inv-wl__hello .inv-wl__sub { font-size: .95rem; }
	.inv-wl__cards { grid-template-columns: 1fr; gap: .55rem; margin-top: 1rem; }
	.inv-wl__card2 { min-height: 0; padding: .8rem .85rem; gap: .7rem; border-radius: 16px; }
	.inv-wl__cico { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
	.inv-wl__ctx b { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .inv-wl__hello > *, .inv-wl__card2 { animation: none !important; } }

/* header assistant button: just the round icon unless the screen is very wide; never wraps (audit 3 Nov: header ran to two rows at 1280 and in Arabic at 1440) */
.inv-header__ai { white-space: nowrap; flex: none; }
@media (max-width: 1599px) { .inv-header__ai span { display: none; } .inv-header__ai, html[dir="rtl"] .inv-header__ai { padding: .25rem; } }
.inv-header__actions { flex-wrap: nowrap; }
.inv-header__actions .inv-btn { white-space: nowrap; }

/* the answer as one organized card: sections with small headings, then a tip */
.inv-wl__msg--answer { width: 100%; max-width: none; padding: 0; overflow: hidden; }
.inv-wl__answer2 .inv-wl__sec { padding: 1rem 1.15rem; }
.inv-wl__answer2 .inv-wl__sec + .inv-wl__sec { border-top: 1px solid var(--line); }
.inv-wl__sech { margin: 0 0 .7rem; font-family: var(--f-text); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mint-ink); }
html[dir="rtl"] .inv-wl__sech { text-transform: none; letter-spacing: 0; font-size: .92rem; }
.inv-wl__why { margin: .8rem 0 0; color: var(--ink-2); line-height: 1.7; }
.inv-wl__tipbox { margin: 0; padding: .9rem 1.15rem 1rem; background: var(--mint-tint); border-top: 1px solid rgb(85 214 190 / 35%); }
.inv-wl__tipbox b { display: block; margin-bottom: .25rem; font-size: .9rem; color: var(--mint-ink); }
.inv-wl__tipbox p { margin: 0; color: var(--ink); line-height: 1.7; }
.inv-wl__tipbox p + p { margin-top: .4rem; }

/* "Ask the assistant" in the main menu */
.inv-nav__ailink { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .35rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--iris-tint); color: var(--iris-deep); font: inherit; font-size: .96rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .25s, border-color .25s; }
html[dir="rtl"] .inv-nav__ailink { padding: .3rem .35rem .3rem .8rem; }
.inv-nav__ailink img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.inv-nav__ailink:hover, .inv-nav__ailink:focus-visible { background: #fff; border-color: var(--iris); }
@media (max-width: 980px) { .inv-nav__item--ai { display: none; } }
.inv-nav__ailink { line-height: 1; min-height: 40px; }
.inv-nav__list > .inv-nav__item > .inv-nav__ailink::after { display: none; }
.inv-ai-short { display: none; }
/* medium screens: shorter label, short language switch, a little less space between menu items */
@media (max-width: 1366px) and (min-width: 981px) {
	.inv-ai-long { display: none; } .inv-ai-short { display: inline; }
	.inv-nav__link, .inv-nav__toggle { padding-inline: .6rem; }
}
@media (max-width: 1100px) and (min-width: 981px) {
	.inv-nav__link, .inv-nav__toggle { padding-inline: .45rem; font-size: .95rem; }
}
.inv-nav__item--ai, .inv-nav__ailink { flex: none; }
@media (max-width: 1366px) and (min-width: 981px) { html[dir="rtl"] .inv-nav__link, html[dir="rtl"] .inv-nav__toggle { padding-inline: .45rem; } html[dir="rtl"] .inv-header__actions { gap: .5rem; } }

/* buttons inside an answer: plans and pricing, WhatsApp, support… (pages open in a new tab) */
.inv-wl__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.inv-wl__lnk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--iris-deep); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--ease-out); }
.inv-wl__lnk:hover, .inv-wl__lnk:focus-visible { border-color: var(--iris); background: var(--iris-tint); transform: translateY(-1px); }
.inv-wl__lnk--main { border-color: var(--iris-deep); background: var(--iris-deep); color: #fff; }
.inv-wl__lnk--main:hover, .inv-wl__lnk--main:focus-visible { background: #523478; border-color: #523478; color: #fff; }
.inv-wl__lnk[target="_blank"]::after { content: "↗"; margin-inline-start: .4rem; font-size: .85em; opacity: .7; }
@media (max-width: 760px) { .inv-wl__lnk { flex: 1 1 100%; justify-content: center; } }

/* 6 Nov (Zaid): the language button always says the language (العربية / English), never a single letter; only very narrow phones use AR / EN */
.inv-header__lang .inv-lang a { white-space: nowrap; }
@media (max-width: 1366px) and (min-width: 981px) { .inv-header__lang .inv-lang a { padding: .35rem .7rem; font-size: .9rem; } }
@media (max-width: 374px) {
	.inv-header__lang .inv-lang a { min-width: 44px; justify-content: center; padding: .35rem .55rem; }
	.inv-header__lang .inv-lang a span { display: none; }
	.inv-header__lang .inv-lang a::after { content: attr(data-short); font-size: .9rem; font-weight: 650; }
}

/* 6 Nov (Zaid): 'See all customer stories' centred under the whole section */
.x-proof .x-more { max-width: none; width: 100%; display: flex; justify-content: center; }
/* section buttons ('All updates', 'All use cases', 'Compare plans'): full-size outlined buttons with an arrow */
.inv-btn--go::after { content: "→"; margin-inline-start: .55rem; transition: transform .25s; }
html[dir="rtl"] .inv-btn--go::after { content: "←"; }
.inv-btn--go:hover::after { transform: translateX(3px); }
html[dir="rtl"] .inv-btn--go:hover::after { transform: translateX(-3px); }
.inv-head-row .inv-btn--go { white-space: nowrap; }
@media (max-width: 640px) { .x-uc-more .inv-btn--go, .inv-pricing-home .inv-btn--go { width: 100%; justify-content: center; } }

/* 6 Nov (Zaid): What's new looks like the rest of the site: one card style, a calm compact head, no empty half-page */
.inv-update { gap: .7rem; padding: 0 0 1.25rem; border: 1px solid var(--line); border-top: 0; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s; }
.inv-update:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.inv-update::before { content: ""; display: block; order: -2; height: 4px; background: var(--iris); }
.inv-update--linkedin::before { background: #0A66C2; }
.inv-update--youtube::before { background: #E0384B; }
.inv-update > :not(.inv-update__media) { margin-inline: 1.25rem; }
.inv-update__meta { order: 0; margin-top: .9rem; }
.inv-update__media { border-radius: 0; margin: 0; order: -1; }
.inv-update__title { font-size: 1.2rem; line-height: 1.35; margin-block: 0; }
.inv-update__excerpt { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inv-updates { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1080px) { .inv-updates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .inv-updates { grid-template-columns: minmax(0, 1fr); } }
.inv-head--compact { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.inv-head--compact::before, .inv-head--compact::after { display: none; }
.inv-head--compact .inv-head__title { font-size: var(--fs-2); }
.inv-sec--feed { background: var(--mist); padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem); }
.inv-sec--feed .inv-follow { justify-content: center; margin-top: var(--s5); }
.inv-sec--feed .inv-pager { margin-top: var(--s5); display: flex; justify-content: center; }
.inv-blocks .inv-head-row { align-items: center; }

/* 6 Nov (Zaid): 'See all customer stories' sits with the section title (same place as 'All updates'), not floating below */
.x-proof .inv-head-row { align-items: flex-end; }
.x-proof .inv-head-row .x-more { margin: 0; width: auto; display: block; }
@media (max-width: 700px) { .x-proof .inv-head-row .x-more, .x-proof .inv-head-row .x-more .inv-btn { width: 100%; justify-content: center; } }

/* 6 Nov: release notes (one design for every version) */
.inv-update--release::before { background: var(--mint); }
.inv-update__media--release { background: radial-gradient(70% 90% at 80% 0%, rgb(185 162 255 / 45%), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgb(85 214 190 / 35%), transparent 70%), var(--night); }
.inv-update__ver { display: grid; justify-items: center; gap: .1rem; color: #fff; font: 650 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-display); letter-spacing: -.03em; }
.inv-update__ver small { font: 600 .9rem/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
html[dir="rtl"] .inv-update__ver small { letter-spacing: 0; font-family: "Readex Pro", var(--f-text); }
.inv-rel__ver { display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .8rem; border-radius: 999px; background: var(--mint-tint); color: var(--mint-ink); font-weight: 650; margin-inline-end: .6rem; }
.inv-rel__summary { font-size: var(--fs-3); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--s4); }
.inv-rel__part { margin-block: var(--s4); padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.inv-rel__h { margin: 0 0 .75rem; font-size: 1rem; }
.inv-rel__tag { display: inline-flex; padding: .25rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 650; background: var(--iris-tint); color: var(--iris-deep); }
.inv-rel__part--new .inv-rel__tag { background: var(--mint-tint); color: var(--mint-ink); }
.inv-rel__part--fixed .inv-rel__tag { background: var(--amber-tint); color: #7A4B00; }
.inv-rel__part ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .45rem; }
.inv-rel__part li { line-height: 1.6; }
.inv-rel__video { margin-top: var(--s4); }
.inv-rel__nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: var(--s5); }
.inv-rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.inv-rel-item { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.inv-rel-item .inv-rel__part { box-shadow: none; background: var(--mist); }
.inv-rel-item__meta { margin: 0 0 .5rem; color: var(--ink-3); }
.inv-rel-item__title { font-size: var(--fs-2); margin: 0 0 var(--s3); }
.inv-rel-item__title a { color: var(--ink); text-decoration: none; }
.inv-rel-item__title a:hover { color: var(--iris); }
/* 6 Nov: Arabic header at 1100–1366 px (now with "English" written in full) kept inside the screen edge */
@media (max-width: 1366px) and (min-width: 981px) {
	html[dir="rtl"] .inv-header__bar { gap: var(--s2); }
	html[dir="rtl"] .inv-header__actions { gap: .5rem; }
	html[dir="rtl"] .inv-nav__link, html[dir="rtl"] .inv-nav__toggle { padding-inline: .5rem; }
	html[dir="rtl"] .inv-header .inv-btn--sm { padding-inline: .9em; }
}
@media (max-width: 1240px) and (min-width: 981px) {
	html[dir="rtl"] .inv-nav__link, html[dir="rtl"] .inv-nav__toggle { padding-inline: .4rem; font-size: .95rem; }
}
/* customer stories head: title block and button on one row (EN + AR), lede keeps its space */
@media (min-width: 701px) {
	.inv-blocks .x-proof .inv-head-row { flex-wrap: nowrap; align-items: flex-end; }
	.inv-blocks .x-proof .inv-head-row .wp-block-group { flex: 1 1 auto; min-width: 0; }
	.inv-blocks .x-proof .inv-head-row .x-more { flex: none; }
}
.inv-blocks .x-proof .inv-head-row p.x-lede { margin-top: .9rem; }
.inv-blocks .x-proof .inv-head-row p.x-kicker { margin-bottom: .75rem; }
/* release tile: no link underline; hero scene a touch smaller so pills stay inside the screen */
.inv-update__media--release, .inv-update__media--release:hover { text-decoration: none; }

/* 6 Nov (Zaid, 3rd): the first screen shows only the title, the buttons and the live scene (scene untouched);
   the sentence and the numbers follow right below, on the same dark background, when the visitor scrolls */
.hx-more { background: var(--night); color: var(--on); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid rgb(255 255 255 / 8%); }
.hx-more__in { width: min(var(--max-wide), 100% - 2 * max(var(--gutter), 3vw)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.hx-more .hx__lead { margin: 0; max-width: 34em; font-size: clamp(1.1rem, 1.3vw, 1.35rem); line-height: 1.65; color: rgb(255 255 255 / 86%); animation: none; }
.hx-more .hx__proof { margin: 0; animation: none; justify-content: end; }
html[dir="rtl"] .hx-more .hx__proof { justify-content: start; }
@media (max-width: 900px) { .hx-more__in { grid-template-columns: minmax(0, 1fr); } .hx-more .hx__proof { justify-content: start; } }
.hx-more .hx__kicker { animation: none; margin-bottom: 1rem; }

/* 6 Nov: header tightening steps (set by site.js only when the row would overflow) */
@media (min-width: 981px) {
	.hdr-t1 .inv-nav__link, .hdr-t1 .inv-nav__toggle { padding-inline: .45rem; }
	.hdr-t1 .inv-header__bar { gap: var(--s2); }
	.hdr-t1 .inv-header__actions { gap: .4rem; }
	.hdr-t1 .inv-header .inv-btn--sm { padding-inline: .85em; }
	.hdr-t2 .inv-ai-long { display: none; } .hdr-t2 .inv-ai-short { display: inline; }
	.hdr-t2 .inv-header__login { display: none; }
	.hdr-t3 .inv-nav__link, .hdr-t3 .inv-nav__toggle { font-size: .92rem; padding-inline: .35rem; }
	.hdr-t3 .inv-nav__ailink .inv-ai-short { display: none; }
	.hdr-t4 .inv-nav__item--ai { display: none; }
}

/* 6 Nov (Zaid, 4th): first screen = a big title, big buttons and a big live scene, no empty gaps.
   The scene gets more of the width (it scales with its column, so nothing is pushed off the screen). */
@media (min-width: 1101px) {
	.hx__in { max-width: 100rem; padding-inline: max(var(--gutter), 2.5vw); grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2.5rem); }
	.hx__title { font-size: clamp(3rem, 3.9vw, 5.2rem); max-width: none; margin-bottom: clamp(1.75rem, 4vh, 2.75rem); } /* always two lines: "The joy of getting / people together." */
	html[dir="rtl"] .hx__title { font-size: clamp(3.2rem, 4.7vw, 5.8rem); max-width: 8em; }
	.hx .inv-ctas__buttons .inv-btn { min-height: 62px; padding-inline: 1.6em; font-size: 1.15rem; }
	.hx .inv-ctas__terms { font-size: 1rem; margin-top: 1.1rem; }
	.hx__step { font-size: clamp(.9rem, 1vw, 1.08rem); min-height: 44px; }
}

/* below the first screen: a light band (not black) with the sentence and the numbers */
.hx-more { background: var(--mist); color: var(--ink); border-top: 0; padding-block: clamp(3rem, 6vw, 5rem); }
.hx-more .hx__kicker { color: var(--iris-deep); font-size: .95rem; }
.hx-more .hx__lead { color: var(--ink); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; max-width: 30em; }
.hx-more .hx__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hx-more .hx__proof > div, .hx-more .hx__proof > div:first-child { padding: 1.4rem 1.3rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); max-width: none; display: block; }
.hx-more .hx__proof dt { color: var(--iris-deep); font-size: clamp(2rem, 1.5rem + 1.5vw, 2.9rem); margin-bottom: .4rem; }
.hx-more .hx__proof dd, .hx-more .hx__proof > div dd { color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
@media (max-width: 640px) { .hx-more .hx__proof { grid-template-columns: minmax(0, 1fr); } .hx-more .hx__proof > div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .9rem; } .hx-more .hx__proof dt { margin: 0; } }
/* number cards: room for "1,000+" in both languages */
@media (min-width: 901px) { .hx-more__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hx-more .hx__proof dt { font-size: clamp(1.9rem, 1.3rem + 1.2vw, 2.6rem); white-space: nowrap; }
.hx-more .hx__proof > div, .hx-more .hx__proof > div:first-child { padding: 1.3rem 1.1rem; }

/* 6 Nov (Zaid): under the hero, first what iNVEETO is (one line), then its three parts */
.hx-more .hx__lead { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; max-width: 20em; margin-bottom: 1.5rem; }
.hx-more__mods { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hx-more__mods a { display: grid; gap: .15rem; padding: .8rem 1rem; border-inline-start: 3px solid var(--iris); border-radius: 0 var(--r) var(--r) 0; background: rgb(255 255 255 / 70%); color: var(--ink); text-decoration: none; transition: background .2s, transform .2s; }
html[dir="rtl"] .hx-more__mods a { border-radius: var(--r) 0 0 var(--r); }
.hx-more__mods li:nth-child(2) a { border-color: var(--mint); }
.hx-more__mods li:nth-child(3) a { border-color: #E9A23B; }
.hx-more__mods a:hover { background: var(--white); transform: translateX(3px); }
html[dir="rtl"] .hx-more__mods a:hover { transform: translateX(-3px); }
.hx-more__mods strong { font-size: 1.08rem; }
.hx-more__mods span { color: var(--ink-2); font-size: 1rem; }
/* "Not sure where to start? Ask the assistant" in What are you organizing? */
.inv-pk__ask { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; color: var(--ink-2); font-size: 1.05rem; }
.inv-pk__askbtn { gap: .55rem; }
.inv-pk__askbtn img { width: 28px; height: 28px; border-radius: 50%; }
@media (max-width: 640px) { .inv-pk__askbtn { width: 100%; justify-content: center; } }

/* 6 Nov (Zaid): "On the day" shows the real iNVEETO check-in window (layout and colours taken from
   app.inveeto.com, demo guests only). The QR pass is scanned and the next guest turns to "Attended". */
.x-app { --app: #6750A4; position: relative; border-radius: 14px; overflow: hidden; background: #fff; color: rgb(0 0 0 / 87%); box-shadow: 0 24px 60px rgb(0 0 0 / 45%); font-size: .82rem; line-height: 1.35; text-align: left; }
.x-app__bar { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; background: #EEF0F6; border-bottom: 1px solid #E2E4EC; }
.x-app__dots { display: flex; gap: .3rem; } .x-app__dots i { width: 9px; height: 9px; border-radius: 50%; background: #D5D7E0; }
.x-app__url { flex: 1; padding: .2rem .7rem; border-radius: 999px; background: #fff; color: #5B5F6E; font-size: .74rem; }
.x-app__win { padding: .9rem 1rem .8rem; }
.x-app__title { margin: 0 0 .55rem; text-align: center; font-size: 1rem; font-weight: 600; color: #1F1F24; }
.x-app__tabs { display: flex; gap: 1.2rem; margin: 0 0 .7rem; border-bottom: 1px solid #ECECF2; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; color: #6B6E7A; }
.x-app__tabs span { padding-bottom: .45rem; } .x-app__tabs .is-on { color: var(--app); box-shadow: inset 0 -2px 0 var(--app); }
.x-app__tools { display: flex; gap: .6rem; align-items: center; margin: 0 0 .7rem; }
.x-app__scan { flex: none; padding: .45rem .95rem; border-radius: 20px; background: var(--app); color: #fff; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.x-app__search { flex: 1; padding: .45rem .9rem; border-radius: 20px; background: #F2F2F2; color: #9A9AA3; font-size: .78rem; }
.x-app__head, .x-app__row { display: grid; grid-template-columns: 1.15fr 1.35fr 1fr .55fr 1.1fr; gap: .6rem; align-items: center; }
.x-app__head { margin: 0; padding: .4rem .3rem; border-bottom: 1px solid #ECECF2; color: #444; font-size: .72rem; }
.x-app__rows { list-style: none; margin: 0; padding: 0; }
.x-app__row { padding: .6rem .3rem; border-bottom: 1px solid #F0F0F4; transition: background .5s; }
.x-app__name { display: grid; } .x-app__name b { font-weight: 500; } .x-app__name small { color: #6B6E7A; font-size: .72rem; text-align: left; }
.x-app__work { color: #444; } .x-app__work b { color: #1F1F24; font-weight: 600; }
.x-app__tags { display: flex; flex-wrap: wrap; gap: .25rem; } .x-app__tags i { font-style: normal; padding: .12rem .5rem; border-radius: 16px; background: var(--app); color: #fff; font-size: .68rem; }
.x-app__type { color: #444; }
.x-app__act { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
.x-app__act u { text-decoration: none; color: var(--app); font-size: .7rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.x-app__st { font-style: normal; display: inline-grid; min-width: 6.6rem; }
.x-app__st > span { grid-area: 1 / 1; padding: .32rem .7rem; border-radius: 20px; text-align: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; transition: opacity .35s, transform .35s; }
.x-app__st-in { background: var(--app); color: #fff; opacity: 0; transform: scale(.9); }
.x-app__st-out { border: 1px solid var(--app); color: var(--app); }
.x-app__row.is-in .x-app__st-in { opacity: 1; transform: none; } .x-app__row.is-in .x-app__st-out { opacity: 0; }
.x-app__row.is-flash { background: #EFEAFB; }
.x-app__foot { display: flex; justify-content: space-between; gap: .5rem; margin: .7rem 0 0; }
.x-app__ghost { padding: .35rem .8rem; border-radius: 20px; border: 1px solid #D9D4EC; color: var(--app); font-size: .66rem; font-weight: 600; text-transform: uppercase; }
.x-app__ghost:first-child { background: var(--app); color: #fff; border-color: var(--app); }
/* the scanned pass, over the window */
.x-app__pass { position: absolute; inset-inline-end: 1rem; bottom: 3.2rem; display: flex; gap: .8rem; align-items: center; padding: .7rem; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgb(30 20 60 / 35%); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .4s, transform .4s; pointer-events: none; }
.x-app.is-scan .x-app__pass { opacity: 1; transform: none; }
.x-app__pass-qr { position: relative; width: 4.6rem; padding: .35rem; border-radius: 10px; background: #fff; border: 1px solid #ECECF2; overflow: hidden; }
.x-app__pass-qr .inv-qr { display: block; width: 100%; height: auto; fill: #1F1F24; }
.x-app__pass-ok { display: flex; gap: .55rem; align-items: center; padding: .55rem .8rem; border-radius: 10px; background: #E8FAF5; color: #0E5A4C; }
.x-app__pass-ok .inv-ico { width: 1.6rem; height: 1.6rem; padding: .28rem; border-radius: 50%; background: var(--mint); color: var(--mint-dark); }
.x-app__pass-ok > span { display: grid; line-height: 1.25; } .x-app__pass-ok b { font-size: .92rem; } .x-app__pass-ok small { font-size: .72rem; color: #3E6F66; }
.x-day__card--app { gap: .9rem; }
@media (max-width: 760px) {
	.x-app__head, .x-app__row { grid-template-columns: 1.2fr 1fr 1.1fr; }
	.x-app__head span:nth-child(2), .x-app__head span:nth-child(4), .x-app__work, .x-app__type { display: none; }
	.x-app__act u { display: none; }
	.x-app__foot .x-app__ghost:nth-child(2) { display: none; }
	.x-app__pass { inset-inline: .8rem; bottom: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { .x-app__pass { display: none; } }
/* check-in window: roomier rows (names on one line) */
.x-app__head, .x-app__row { grid-template-columns: 1.05fr 1.5fr .95fr auto; }
.x-app__head span:nth-child(4), .x-app__type { display: none; }
.x-app__name b, .x-app__name small { white-space: nowrap; }
.x-app__work { font-size: .76rem; }
@media (max-width: 760px) { .x-app__head, .x-app__row { grid-template-columns: 1.2fr 1fr auto; } }

/* 6 Nov (Zaid): On the day = three short scenes: scan the QR pass, manual check-in, self check-in */
.x-ci { gap: 1rem; }
.x-ci__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: .3rem; border-radius: 16px; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 14%); }
.x-ci__tab { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .45rem .6rem; border: 0; border-radius: 12px; background: none; color: rgb(255 255 255 / 75%); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.x-ci__tab i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(255 255 255 / 14%); font-style: normal; font-size: .78rem; }
.x-ci__tab[aria-selected="true"] { background: #fff; color: var(--night); } .x-ci__tab[aria-selected="true"] i { background: var(--mint); color: var(--mint-dark); }
.x-ci__tab:hover { color: #fff; } .x-ci__tab[aria-selected="true"]:hover { color: var(--night); }
.x-ci__stage { position: relative; height: 300px; border-radius: 16px; background: radial-gradient(80% 90% at 50% 0%, rgb(185 162 255 / 18%), transparent 70%), rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 10%); overflow: hidden; }
.x-ci__panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.2rem; animation: x-ci-in .45s ease both; }
.x-ci__panel[hidden] { display: none; }
@keyframes x-ci-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.x-ci__cap { margin: 0; min-height: 3em; color: rgb(255 255 255 / 85%); font-size: 1.02rem; line-height: 1.5; }
.x-ci__cap[hidden] { display: none; }
/* phones */
.x-ci__phone { position: relative; width: 150px; height: 250px; flex: none; padding: 14px 10px; border-radius: 26px; background: #fff; color: #1F1F24; box-shadow: 0 0 0 5px #2B2540, 0 20px 40px rgb(0 0 0 / 45%); display: grid; align-content: center; overflow: hidden; }
.x-ci__phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #E2E0EA; }
.x-ci__pass, .x-ci__form, .x-ci__cam { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.x-ci__pass small, .x-ci__form small, .x-ci__cam small { font-size: .68rem; color: #6B6E7A; }
.x-ci__pass b, .x-ci__form b { font-size: .92rem; }
.x-ci__passqr, .x-ci__frame { position: relative; display: block; width: 96px; padding: 6px; border-radius: 10px; border: 1px solid #ECECF2; overflow: hidden; }
.x-ci__passqr .inv-qr, .x-ci__frame .inv-qr, .x-ci__posterqr .inv-qr { display: block; width: 100%; height: auto; fill: #1F1F24; }
.x-ci__phone--team { background: #16131F; color: #fff; }
.x-ci__cam small { color: rgb(255 255 255 / 70%); }
.x-ci__frame { width: 104px; border: 0; background: rgb(255 255 255 / 92%); box-shadow: 0 0 0 3px var(--mint), 0 0 24px rgb(85 214 190 / 50%); }
.x-ci__arrow { width: 44px; height: 2px; flex: none; background: repeating-linear-gradient(90deg, var(--mint) 0 6px, transparent 6px 11px); position: relative; }
.x-ci__arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--mint); }
html[dir="rtl"] .x-ci__arrow { transform: scaleX(-1); }
.x-ci__ok { position: absolute; inset-inline: 8px; bottom: 14px; display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: 12px; background: #E8FAF5; color: #0E5A4C; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; }
.x-ci__ok .inv-ico { width: 1.5rem; height: 1.5rem; padding: .25rem; border-radius: 50%; background: var(--mint); color: var(--mint-dark); flex: none; }
.x-ci__ok > span { display: grid; line-height: 1.2; } .x-ci__ok b { font-size: .8rem; } .x-ci__ok small { font-size: .66rem; color: #3E6F66; }
.x-ci__panel.is-done .x-ci__ok { opacity: 1; transform: none; }
.x-ci__panel--qr.is-done .x-ci__frame { box-shadow: 0 0 0 3px var(--mint), 0 0 34px rgb(85 214 190 / 80%); }
/* manual list */
.x-ci__list { position: relative; width: min(100%, 360px); padding: .9rem; border-radius: 14px; background: #fff; color: #1F1F24; box-shadow: 0 20px 40px rgb(0 0 0 / 40%); }
.x-ci__listhead { display: flex; justify-content: space-between; margin: 0 0 .6rem; font-size: .85rem; } .x-ci__listhead span { color: #6B6E7A; font-size: .75rem; }
.x-ci__search, .x-ci__field { display: flex; align-items: center; min-height: 34px; margin: 0 0 .6rem; padding: .35rem .8rem; border-radius: 20px; background: #F2F2F2; font-size: .85rem; color: #1F1F24; }
.x-ci__search::before { content: "⌕"; margin-inline-end: .45rem; color: #8A8D98; }
.x-ci__search i, .x-ci__field i { width: 1px; height: 1.05em; margin-inline-start: 1px; background: #6750A4; animation: x-ci-caret 1s steps(1) infinite; }
@keyframes x-ci-caret { 50% { opacity: 0; } }
.x-ci__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.x-ci__row { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 10px; transition: background .4s, opacity .4s; }
.x-ci__panel--manual.is-filter .x-ci__row:not(.is-target) { opacity: .35; }
.x-ci__panel--manual.is-filter .x-ci__row.is-target { background: #F3EFFC; }
.x-ci__av { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #EDE7FA; color: #6750A4; font-size: .72rem; font-weight: 700; }
.x-ci__nm { display: grid; line-height: 1.2; margin-inline-end: auto; } .x-ci__nm b { font-size: .85rem; font-weight: 600; } .x-ci__nm small { font-size: .7rem; color: #6B6E7A; text-align: start; }
.x-ci__st { font-style: normal; display: inline-grid; min-width: 6.4rem; }
.x-ci__st > span { grid-area: 1 / 1; padding: .3rem .6rem; border-radius: 20px; text-align: center; font-size: .72rem; font-weight: 600; transition: opacity .3s, transform .3s; }
.x-ci__st-in { background: #6750A4; color: #fff; opacity: 0; transform: scale(.9); } .x-ci__st-out { border: 1px solid #6750A4; color: #6750A4; }
.x-ci__row.is-in .x-ci__st-in { opacity: 1; transform: none; } .x-ci__row.is-in .x-ci__st-out { opacity: 0; }
.x-ci__tap { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgb(103 80 164 / 30%); border: 2px solid #6750A4; opacity: 0; pointer-events: none; inset-inline-end: 2.6rem; top: 50%; transition: opacity .2s, transform .2s; }
.x-ci__panel--manual.is-tap .x-ci__tap { opacity: 1; transform: scale(1.2); }
/* self check-in */
.x-ci__poster { display: grid; justify-items: center; gap: .35rem; width: 150px; padding: 1rem .8rem; border-radius: 14px; background: linear-gradient(160deg, #6750A4, #3D2C7A); color: #fff; text-align: center; box-shadow: 0 20px 40px rgb(0 0 0 / 40%); }
.x-ci__poster small { font-size: .7rem; color: rgb(255 255 255 / 80%); } .x-ci__poster b { font-size: .92rem; }
.x-ci__posterqr { display: block; width: 96px; padding: 6px; border-radius: 10px; background: #fff; }
.x-ci__form { justify-items: stretch; text-align: start; gap: .3rem; }
.x-ci__form > small, .x-ci__form > b { text-align: center; }
.x-ci__form label { margin-top: .4rem; font-size: .66rem; color: #6B6E7A; }
.x-ci__field { margin: 0; min-height: 30px; padding: .3rem .6rem; border-radius: 8px; background: #F4F4F7; border: 1px solid #E2E2EA; font-size: .72rem; }
.x-ci__btn { margin-top: .4rem; padding: .45rem; border-radius: 20px; background: #6750A4; color: #fff; text-align: center; font-size: .74rem; font-weight: 600; transition: transform .2s; }
.x-ci__panel--self.is-tap .x-ci__btn { transform: scale(.94); }
.x-ci__panel--self.is-done .x-ci__form { opacity: .25; }
@media (max-width: 760px) {
	.x-ci__tab { font-size: .82rem; flex-direction: column; gap: .2rem; min-height: 58px; }
	.x-ci__stage { height: 290px; }
	.x-ci__panel { gap: .6rem; padding: .8rem; }
	.x-ci__phone, .x-ci__poster { width: 128px; } .x-ci__phone { height: 230px; }
	.x-ci__arrow { width: 22px; }
}
@media (prefers-reduced-motion: reduce) { .x-ci__panel { animation: none; } }
@media (max-width: 760px) {
	.x-ci__stage { height: 300px; }
	.x-ci__panel { gap: .4rem; padding: .6rem; }
	.x-ci__phone { width: 116px; height: 214px; padding: 12px 8px; border-radius: 22px; }
	.x-ci__poster { width: 116px; padding: .8rem .5rem; }
	.x-ci__passqr, .x-ci__frame, .x-ci__posterqr { width: 82px; }
	.x-ci__arrow { width: 14px; }
	.x-ci__list { width: 100%; padding: .7rem; }
	.x-ci__row { padding: .35rem .4rem; gap: .45rem; }
	.x-ci__nm b { font-size: .8rem; white-space: nowrap; }
	.x-ci__st { min-width: 5.4rem; }
	.x-ci__av { width: 26px; height: 26px; }
}

/* 6 Nov (Zaid): menu feature cards: a real event photo under a soft iris → night gradient, not a black box */
.inv-mega__card--photo { background: linear-gradient(160deg, rgb(103 80 164 / 88%) 0%, rgb(46 30 92 / 86%) 48%, rgb(20 14 38 / 92%) 100%), var(--mega-photo) center / cover no-repeat, var(--night); box-shadow: 0 18px 40px rgb(40 20 90 / 25%); }
.inv-mega__card--photo::before { border-color: rgb(255 255 255 / 18%); box-shadow: 0 0 0 40px rgb(255 255 255 / 4%), 0 0 0 80px rgb(255 255 255 / 3%); }
.inv-mega__card--photo::after { content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgb(85 214 190 / 35%), transparent 70%); pointer-events: none; }
.inv-mega__card--photo .inv-mega__title { color: #fff; }
.inv-mega__card--photo p { color: rgb(255 255 255 / 85%); }
/* 6 Nov: three facts beside the intro (instead of the headline numbers) */
.hx-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hx-facts li { display: grid; align-content: start; gap: .5rem; padding: 1.4rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.hx-facts__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--iris-tint); color: var(--iris-deep); }
.hx-facts__ico .x-ico { width: 24px; height: 24px; }
.hx-facts b { font-size: 1.15rem; color: var(--ink); line-height: 1.3; }
.hx-facts li > span:last-child { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
@media (max-width: 640px) { .hx-facts { grid-template-columns: minmax(0, 1fr); } .hx-facts li { grid-template-columns: 44px 1fr; column-gap: .9rem; } .hx-facts__ico { grid-row: span 2; } }

/* 6 Nov: "New · Version …" on the first screen (only while a release note says so) */
.hx__new { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; margin-bottom: 1.25rem; padding: .35rem .9rem .35rem .35rem; border-radius: 999px; background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 22%); color: #fff; font-size: .95rem; text-decoration: none; backdrop-filter: blur(8px); transition: background .2s; }
html[dir="rtl"] .hx__new { padding: .35rem .35rem .35rem .9rem; }
.hx__new:hover { background: rgb(255 255 255 / 18%); color: #fff; }
.hx__new span { padding: .2rem .65rem; border-radius: 999px; background: var(--mint); color: var(--mint-dark); font-weight: 700; font-size: .82rem; }
.hx__new i { font-style: normal; color: var(--mint); }
/* "What's new in iNVEETO" on the home page: the latest version */
.inv-rel-home__card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-lg); background: radial-gradient(70% 120% at 0% 0%, rgb(185 162 255 / 22%), transparent 60%), var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.inv-rel-home__ver { display: grid; justify-items: center; gap: .3rem; padding: 2rem 1rem; border-radius: var(--r-lg); background: radial-gradient(70% 90% at 80% 0%, rgb(185 162 255 / 45%), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgb(85 214 190 / 35%), transparent 70%), var(--night); color: #fff; text-align: center; }
.inv-rel-home__ver small { color: var(--mint); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.inv-rel-home__ver b { font: 650 clamp(2.6rem, 5vw, 3.8rem)/1 var(--f-display); letter-spacing: -.03em; }
.inv-rel-home__ver time { color: rgb(255 255 255 / 75%); font-size: .9rem; }
.inv-rel-home__title { font-size: var(--fs-2); margin: 0 0 .6rem; }
.inv-rel-home__sum { color: var(--ink-2); font-size: 1.1rem; line-height: 1.6; margin: 0 0 1rem; }
.inv-rel-home__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.inv-rel-home__list li { display: flex; gap: .7rem; align-items: baseline; line-height: 1.5; }
.inv-rel-home__list .inv-rel__tag { flex: none; }
.inv-rel__tag--improved { background: var(--iris-tint); color: var(--iris-deep); } .inv-rel__tag--fixed { background: var(--amber-tint); color: #7A4B00; } .inv-rel__tag--new { background: var(--mint-tint); color: var(--mint-ink); }
.inv-rel-home__links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
@media (max-width: 760px) { .inv-rel-home__card { grid-template-columns: minmax(0, 1fr); } .inv-rel-home__links .inv-btn { width: 100%; justify-content: center; } }

/* 6 Nov (Zaid): the changelog like professional products: timeline, grouped changes, filter, follow */
.inv-cl__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.inv-cl__kinds { display: flex; flex-wrap: wrap; gap: .4rem; padding: .3rem; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }
.inv-cl__kinds button { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.inv-cl__kinds button[aria-pressed="true"] { background: var(--night); color: #fff; }
.inv-cl__dot { width: 9px; height: 9px; border-radius: 50%; } .inv-cl__dot--new { background: #1FA98C; } .inv-cl__dot--improved { background: var(--iris); } .inv-cl__dot--fixed { background: #E0A33B; }
.inv-cl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); position: relative; }
.inv-cl__v { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); position: relative; scroll-margin-top: 110px; }
.inv-cl__v[hidden] { display: none; }
.inv-cl__v::before { content: ""; position: absolute; inset-inline-start: 5.5rem; top: 4.5rem; bottom: calc(-1 * var(--s5)); width: 2px; background: linear-gradient(var(--line), transparent); }
.inv-cl__v:last-child::before { display: none; }
.inv-cl__side { position: sticky; top: 100px; align-self: start; display: grid; justify-items: center; gap: .35rem; padding: 1rem .5rem; border-radius: var(--r-lg); background: radial-gradient(70% 90% at 80% 0%, rgb(185 162 255 / 45%), transparent 70%), var(--night); color: #fff; text-align: center; }
.inv-cl__num { font: 650 2.2rem/1 var(--f-display); letter-spacing: -.03em; }
.inv-cl__side time { font-size: .85rem; color: rgb(255 255 255 / 75%); }
.inv-cl__latest { padding: .15rem .6rem; border-radius: 999px; background: var(--mint); color: var(--mint-dark); font-size: .78rem; font-weight: 700; }
.inv-cl__card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.inv-cl__title { font-size: var(--fs-2); margin: 0 0 .5rem; } .inv-cl__title a { color: var(--ink); text-decoration: none; } .inv-cl__title a:hover { color: var(--iris); }
.inv-cl__anchor { opacity: 0; font-size: .7em; color: var(--ink-3) !important; transition: opacity .2s; } .inv-cl__card:hover .inv-cl__anchor { opacity: 1; }
.inv-rel__counts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--s4); }
.inv-rel__counts .inv-rel__tag b { margin-inline-end: .2rem; }
.inv-rel__group { margin-top: var(--s4); } .inv-rel__group[hidden] { display: none; }
.inv-rel__gh { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.05rem; }
.inv-rel__gh small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--mist); color: var(--ink-2); font-size: .75rem; }
.inv-rel-chs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.inv-rel-ch { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .8rem; align-items: start; padding: .85rem 1rem; border-radius: 12px; background: var(--mist); border: 1px solid transparent; }
.inv-rel-ch.is-key { background: var(--white); border-color: var(--iris-tint); box-shadow: 0 6px 18px rgb(103 80 164 / 10%); }
.inv-rel-ch .inv-rel__tag { justify-content: center; }
.inv-rel-ch__t { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; line-height: 1.45; }
.inv-rel-ch__area { font-size: .8rem; color: var(--ink-3); padding: .05rem .5rem; border-radius: 6px; background: rgb(0 0 0 / 4%); }
.inv-rel-ch__x { margin: .3rem 0 0; color: var(--ink-2); line-height: 1.6; }
.inv-rel-ch__img { display: block; max-width: 100%; height: auto; margin-top: .7rem; border-radius: 10px; border: 1px solid var(--line); }
.inv-rel-ch .inv-link { display: inline-block; margin-top: .4rem; font-size: .95rem; }
.inv-rel-chs--compact .inv-rel-ch { padding: .6rem .8rem; background: var(--mist); }
.inv-rel-home__more { margin: .6rem 0 1.2rem; color: var(--ink-3); }
.inv-rel-home .inv-rel__counts { margin: 0 0 .8rem; }
@media (max-width: 760px) {
	.inv-cl__v { grid-template-columns: minmax(0, 1fr); }
	.inv-cl__v::before { display: none; }
	.inv-cl__side { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: .8rem; padding: .6rem 1rem; }
	.inv-cl__num { font-size: 1.5rem; }
	.inv-rel-ch { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .inv-rel-ch .inv-rel__tag { justify-self: start; }
}

/* ---------- 6 Nov: release notes, tidy pictures + slim home card inside "What's new" ---------- */
.inv-rel-ch__b.has-pic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 1.25rem; align-items: start; }
.inv-rel-ch__pic { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--white); transition: box-shadow .2s, transform .2s; }
.inv-rel-ch__pic:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.inv-rel-ch__pic img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; }
.inv-rel-ch__how { margin-top: .5rem; }
/* inside a group ("New", "Fixes"…) the heading already says the kind: a coloured edge instead of a second label */
.inv-rel__group .inv-rel-ch { grid-template-columns: minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); border-inline-start: 4px solid var(--iris); padding: 1rem 1.25rem; }
.inv-rel__group .inv-rel-ch--new { border-inline-start-color: #1FA98C; }
.inv-rel__group .inv-rel-ch--fixed { border-inline-start-color: #E0A33B; }
.inv-rel__group .inv-rel-ch > .inv-rel__tag { display: none; }
.inv-rel__group .inv-rel-ch.is-key { box-shadow: 0 6px 18px rgb(103 80 164 / 10%); }
.inv-rel__group + .inv-rel__group { margin-top: 1.5rem; }
.inv-rel-ch__t b { font-size: 1.05rem; }

/* home: one slim card at the top of "What's new" */
.inv-rel-home { margin: 0 0 var(--s4); padding: 0; }
.inv-rel-home__card { display: grid; grid-template-columns: 9.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--r-lg); background: var(--mist); border: 1px solid var(--line); box-shadow: none; }
.inv-rel-home__ver { padding: 1.1rem .75rem; text-decoration: none; align-self: stretch; align-content: center; }
.inv-rel-home__ver b { font-size: clamp(2rem, 3vw, 2.6rem); }
.inv-rel-home__ver small { font-size: .72rem; }
.inv-rel-home__title { font-size: 1.5rem; line-height: 1.2; margin: 0 0 .35rem; }
.inv-rel-home__title a { color: var(--ink); text-decoration: none; } .inv-rel-home__title a:hover { color: var(--iris); }
.inv-rel-home__sum { font-size: 1rem; margin: 0 0 .6rem; }
.inv-rel-home .inv-rel__counts { margin: 0; }
.inv-rel-home__chs .inv-rel-chs--compact { gap: .4rem; }
.inv-rel-home__chs .inv-rel-ch { grid-template-columns: 4.8rem minmax(0, 1fr); padding: .5rem .7rem; background: var(--white); box-shadow: none; border-color: var(--line); }
.inv-rel-home__more { margin: .4rem 0 0; font-size: .9rem; }
.inv-rel-home__links { display: grid; gap: .6rem; justify-items: center; margin: 0; }
.inv-rel-home__links .inv-btn { white-space: nowrap; }
@media (max-width: 1100px) { .inv-rel-home__card { grid-template-columns: 9rem minmax(0, 1fr); } .inv-rel-home__chs, .inv-rel-home__links { grid-column: 1 / -1; } .inv-rel-home__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-items: start; } }
@media (max-width: 760px) {
	.inv-rel-ch__b.has-pic { grid-template-columns: minmax(0, 1fr); }
	.inv-rel-ch__pic { max-width: 22rem; }
	.inv-rel-home__card { grid-template-columns: minmax(0, 1fr); }
	.inv-rel-home__ver { grid-auto-flow: column; justify-content: start; align-items: center; gap: .7rem; padding: .6rem 1rem; }
	.inv-rel-home__ver b { font-size: 1.6rem; }
	.inv-rel-home__links .inv-btn { width: 100%; justify-content: center; }
	.inv-rel-home__links { justify-content: center; }
}
.inv-rel-ch__how::after, .inv-link.inv-rel-ch__how { letter-spacing: 0; }
.inv-rel-ch__how { word-spacing: .1em; }
@media (max-width: 760px) { .inv-rel-ch__b.has-pic { gap: .75rem; } .inv-rel__group .inv-rel-ch { padding: .9rem 1rem; } }

/* ---------- 6 Nov: assistant told step by step + "Go to the website" at the bottom ---------- */
.inv-wl__leave { margin: .55rem 0 0; text-align: center; }
.inv-wl__leave button { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: rgb(103 80 164 / 35%); text-underline-offset: .25em; transition: color .2s, background .2s; }
.inv-wl__leave button:hover, .inv-wl__leave button:focus-visible { color: var(--iris-deep); background: rgb(255 255 255 / 70%); }
.inv-wl__leave .inv-wl__arr { width: 1rem; height: 1rem; }
html[dir="rtl"] .inv-wl__leave .inv-wl__arr { transform: scaleX(-1); }
.inv-wl.is-chat .inv-wl__leave { margin-top: .35rem; }

/* the logo "speaks" while the next message is coming */
.inv-wl__msg--dots { display: inline-flex; align-items: center; min-height: 3rem; padding: .9rem 1.1rem; }
.inv-wl__msg--dots .inv-wl__dots3 i { width: .45rem; height: .45rem; }
.inv-wl__line.is-speaking .inv-wl__ava { animation: wl-speak 1.1s ease-in-out infinite; }
@keyframes wl-speak { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); box-shadow: 0 0 0 6px rgb(125 91 166 / 12%), 0 8px 22px -10px rgb(95 63 140 / 45%); } }

/* the welcome, the first time in a visit: logo greets → dots → question → explanation → the four choices one by one → message box */
.inv-wl__hellodots { display: none; }
.inv-wl.is-intro .inv-wl__hellodots { display: flex; justify-content: center; height: 0; overflow: visible; animation: wl-dots-life 1.5s ease both .35s; opacity: 0; }
@keyframes wl-dots-life { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.inv-wl.is-intro .inv-wl__bigava { animation: wl-greet 1.6s var(--ease-out) both; }
.inv-wl.is-intro .inv-wl__bigava .inv-wl__ava::after { animation: wl-ring 1.6s ease-out .2s 2; }
@keyframes wl-greet { 0% { opacity: 0; transform: scale(.55) translateY(10px); } 35% { opacity: 1; transform: scale(1.08); } 50% { transform: scale(1) rotate(-6deg); } 62% { transform: rotate(5deg); } 74% { transform: rotate(-3deg); } 86%, 100% { transform: none; } }
@keyframes wl-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.inv-wl.is-in.is-intro .inv-wl__hello > .inv-wl__kicker2 { animation: wl-rise .7s var(--ease-out) 1.7s both; }
.inv-wl.is-in.is-intro .inv-wl__hello > .inv-wl__q { animation: wl-rise .8s var(--ease-out) 1.85s both; }
.inv-wl.is-in.is-intro .inv-wl__hello > .inv-wl__sub { animation: wl-rise .8s var(--ease-out) 2.5s both; }
.inv-wl.is-in.is-intro .inv-wl__hello > .inv-wl__cards { animation: none; }
.inv-wl.is-in.is-intro .inv-wl__card2 { animation: wl-card .6s var(--ease-out) both; animation-delay: calc(3.1s + var(--i) * .3s); }
.inv-wl.is-in.is-intro .inv-wl__dock { animation: wl-rise .7s var(--ease-out) 4.2s both; }
.inv-wl.is-in.is-intro .inv-wl__top .inv-wl__skip { animation: wl-rise .6s var(--ease-out) .3s both; }
@media (prefers-reduced-motion: reduce) { .inv-wl.is-intro * { animation: none !important; } .inv-wl__line.is-speaking .inv-wl__ava { animation: none; } }
.inv-wl__line.is-said > .inv-wl__msg:not(.inv-wl__msg--dots) { animation: wl-msg .45s var(--ease-out) both; }
.inv-wl__topbtns { display: inline-flex; gap: .4rem; }
.inv-wl__topbtns button { white-space: nowrap; }
@media (max-width: 420px) { .inv-wl__topbtns .inv-wl__skip, .inv-wl__reset { padding: 0 .6rem; font-size: .8rem; } .inv-wl__logo svg, .inv-wl__logo img { max-width: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { .inv-wl__line.is-said > .inv-wl__msg { animation: none; } }

/* 7 Nov: whatever a text is changed to, long words or links wrap instead of pushing the layout */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, label, td, th, .inv-btn, button { overflow-wrap: break-word; }
.inv-btn { max-width: 100%; }

/* phone: event-type chips at a fixed width so the next one shows cut at the edge (like customer stories), 13 Nov */
@media (max-width: 640px) {
	.inv-pk__tabs { gap: .4rem; }
	.inv-pk__tab { padding: .45rem .75rem .45rem .45rem; gap: .4rem; }
	.inv-pk__tab .inv-pk__ico { width: 1.75rem; height: 1.75rem; padding: .35rem; }
	.inv-pk__tx b { font-size: .9rem; }
}

/* forms: an error under one box must not push its neighbour down (13 Nov) */
.inv-form .inv-f-row > label { position: relative; }
.inv-form .inv-f-row .wpcf7-not-valid-tip { position: absolute; inset-inline: 0; top: 100%; }
.inv-form .inv-f-row:has(.wpcf7-not-valid-tip) { padding-bottom: 1.6rem; }

/* phone: country code + number on one line, number direction left-to-right in both languages */

/* phone: one joined control, flag + code | number (13 Nov) */
.inv-form .inv-tel { display: flex; gap: 0; align-items: stretch; margin-top: .4rem; }
.inv-form .inv-tel .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.inv-form .inv-tel__cc { position: relative; flex: 0 0 auto; display: flex; }
.inv-form .inv-tel__cc .inv-tel__code { width: 8.2rem; max-width: none; height: 100%; border-radius: var(--r-sm) 0 0 var(--r-sm); border-right-width: 0; text-align: left; }
.inv-form .inv-tel .wpcf7-form-control-wrap input { border-radius: 0 var(--r-sm) var(--r-sm) 0; text-align: left; }
.inv-form .inv-tel.is-on .inv-tel__cc { min-width: 7.4rem; align-items: center; padding: 0 2.4rem 0 .95rem; border: 1.5px solid var(--line-2); border-right-width: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%237D5BA6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9rem center / 12px; color: var(--ink); font-weight: 600; cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.inv-form .inv-tel.is-on .inv-tel__code { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.inv-form .inv-tel__show { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: 1rem; line-height: 1; }
.inv-form .inv-tel__flag { font-size: 1.25rem; line-height: 1; }
.inv-form .inv-tel.is-on .inv-tel__cc:focus-within { border-color: var(--iris); background-color: var(--white); box-shadow: 0 0 0 4px var(--iris-tint); z-index: 1; }
html[dir="rtl"] .inv-form .inv-tel.is-on .inv-tel__cc { background-position: right .9rem center; }
.inv-form .inv-tel__flag, .inv-form .inv-tel__code { font-family: "Twemoji Country Flags", var(--f-text); }
html[dir="rtl"] .inv-form .inv-tel__flag, html[dir="rtl"] .inv-form .inv-tel__code { font-family: "Twemoji Country Flags", "Readex Pro", var(--f-text); }

/* assistant answers keep their line breaks (numbered steps for long questions, 14 Nov) */
.inv-wl__msg { white-space: pre-line; }

.inv-wl__leave { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; }
.inv-wl__leave button[hidden] { display: none; }

/* 14 Nov: the personal plan written by the assistant (numbered lines) */
.inv-wl__plan { margin: .4rem 0 0; white-space: pre-line; line-height: 1.75; color: var(--ink); }