/* Archade Shell 1.0: testata fissa, menu, piede a box e Liquid Glass.
   UNO STESSO FILE per i due siti (archademetrics.com, archademediamanager.com) e le due app
   (Archade Metrics, Archade Media Manager). La copia principale e' in shared/archade-shell.css del
   repository archademetrics: si modifica li' e si copia identica negli altri tre posti. */

:root {
	--ax-o: #F64511;
	--ax-w: #ffffff;
	--ax-qn: #252220;
	--ax-w80: rgba(255, 255, 255, .8);
	--ax-w60: rgba(255, 255, 255, .62);
	--ax-w40: rgba(255, 255, 255, .4);
	--ax-w20: rgba(255, 255, 255, .2);
	--ax-side: clamp(16px, 4vw, 64px);
	--ax-bar-h: 72px;
	--ax-admin: 0px;
	--ax-title: "neulis-neue", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--ax-font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Liquid Glass: vetro satinato retroilluminato, sui bordi piega come una lente quello che ci passa sotto */
	--ax-glass-fill: linear-gradient(135deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .09) 40%, rgba(255, 255, 255, .07) 62%, rgba(255, 255, 255, .12) 100%);
	--ax-glass-filter: blur(14px) saturate(170%) brightness(1.15);
	--ax-glass-edge: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 1.5px 0 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .14), inset 0 -18px 32px -22px rgba(255, 255, 255, .22), inset 0 18px 30px -24px rgba(255, 255, 255, .28);
	--ax-backlight: 0 0 0 5px rgba(255, 255, 255, .02), 0 0 18px rgba(255, 255, 255, .14), 0 0 70px rgba(255, 255, 255, .06), 0 24px 64px rgba(0, 0, 0, .6);
	--ax-backlight-s: 0 0 0 3px rgba(255, 255, 255, .02), 0 0 14px rgba(255, 255, 255, .12), 0 0 40px rgba(255, 255, 255, .04);
	--ax-zoom: 1.14;
	/* Vetro fume': sfocatura (px, letta da archade-shell.js) e velo scuro; dentro il vetro la griglia non si vede */
	--ax-frost: 7;
	--ax-frost-bar: 7;
	--ax-frost-tint: rgba(24, 23, 22, .36);
	--ax-frost-bar-tint: rgba(16, 15, 14, .42);
}
.admin-bar { --ax-admin: 32px; }
@media (max-width: 782px) { .admin-bar { --ax-admin: 46px; } }

/* ---------- Liquid Glass ---------- */
.ax-glass {
	position: relative;
	isolation: isolate;
	background: var(--ax-glass-fill) !important;
	-webkit-backdrop-filter: var(--ax-glass-filter) !important;
	backdrop-filter: var(--ax-glass-filter) !important;
	border: 2px solid var(--ax-w) !important;
	box-shadow: var(--ax-glass-edge), var(--ax-backlight) !important;
}
.ax-glass.ax-glass--s { box-shadow: var(--ax-glass-edge), var(--ax-backlight-s) !important; }
.ax-glass.ax-glass--hot { box-shadow: var(--ax-glass-edge), var(--ax-backlight), 0 0 0 1px var(--ax-o) inset, 0 0 34px rgba(246, 69, 17, .28) !important; }
/* La lente: la griglia laser che sta sotto, ingrandita e centrata sul box (posizione calcolata da archade-shell.js) */
.ax-glass::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	border-radius: inherit;
	pointer-events: none;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	background-image:
		linear-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .17) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px) !important;
	background-size:
		calc(120px * var(--ax-zoom)) calc(120px * var(--ax-zoom)),
		calc(120px * var(--ax-zoom)) calc(120px * var(--ax-zoom)),
		calc(24px * var(--ax-zoom)) calc(24px * var(--ax-zoom)),
		calc(24px * var(--ax-zoom)) calc(24px * var(--ax-zoom)) !important;
	background-position: var(--ax-lx, 0px) var(--ax-ly, 0px) !important;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 45%, rgba(0, 0, 0, .55) 100%);
	mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 45%, rgba(0, 0, 0, .55) 100%);
	opacity: 1 !important;
	display: block !important;
}
/* Il riflesso: luce sul bordo alto a sinistra, come una lastra curva */
.ax-glass::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	border-radius: inherit;
	pointer-events: none;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	transform: none !important;
	background: radial-gradient(120% 70% at 12% -8%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 46%), radial-gradient(90% 60% at 100% 110%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 50%) !important;
	display: block !important;
}
/* Safari, iPhone, iPad e Firefox: stesso vetro satinato e lattiginoso, senza la piega dei bordi
   (non supportano i filtri SVG nel backdrop). Niente griglia disegnata sopra: e' vetro opaco. */
html:not(.ax-refract) .ax-glass {
	background:
		radial-gradient(140% 60% at 18% -12%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 42%),
		linear-gradient(var(--ax-frost-tint), var(--ax-frost-tint)) !important;
	-webkit-backdrop-filter: blur(calc(var(--ax-frost) * 1.5px)) saturate(160%) brightness(1.12) !important;
	backdrop-filter: blur(calc(var(--ax-frost) * 1.5px)) saturate(160%) brightness(1.12) !important;
	box-shadow: var(--ax-glass-edge), inset 0 0 18px rgba(255, 255, 255, .09), var(--ax-backlight) !important;
}
html:not(.ax-refract) .ax-glass.ax-glass--s { box-shadow: var(--ax-glass-edge), inset 0 0 14px rgba(255, 255, 255, .08), var(--ax-backlight-s) !important; }
html:not(.ax-refract) .ax-glass::before { background-image: none !important; -webkit-mask-image: none; mask-image: none; }
html:not(.ax-refract) .ax-glass--bar,
html:not(.ax-refract) .ax-acct__menu.ax-glass {
	background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .08)), var(--ax-frost-bar-tint) !important;
	-webkit-backdrop-filter: blur(calc(var(--ax-frost-bar) * 1.5px)) saturate(160%) !important;
	backdrop-filter: blur(calc(var(--ax-frost-bar) * 1.5px)) saturate(160%) !important;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ax-glass { background: rgba(60, 58, 56, .9) !important; }
}

/* ---------- Testata fissa (come archadedesign.com): quadrata, con la linea di distacco ---------- */
html { scroll-padding-top: calc(var(--ax-bar-real, var(--ax-bar-h)) + var(--ax-admin) + 16px); }
body.ax-has-bar { padding-top: var(--ax-bar-real, var(--ax-bar-h)) !important; }
.ax-bar, body > .ax-bar, body.laser > .ax-bar {
	display: block;
	margin: 0;
	padding: 0;
	position: fixed !important;
	top: var(--ax-admin);
	left: 0;
	right: 0;
	z-index: 100 !important;
	font-family: var(--ax-font);
	color: var(--ax-w);
	background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .58));
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.ax-bar__in {
	height: var(--ax-bar-h);
	padding: 0 var(--ax-side);
	display: flex;
	align-items: center;
	gap: 28px;
}
.ax-logo {
	flex: 0 0 auto;
	font-family: var(--ax-title);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--ax-w) !important;
	text-decoration: none !important;
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.ax-logo span { color: var(--ax-o); }
.ax-logo .ax-mark { height: 1.7em; width: auto; flex: 0 0 auto; align-self: center; margin: -.3em 6px -.3em 0; overflow: visible; }
.ax-logo small { font-family: var(--ax-font); font-weight: 400; font-size: 13px; color: var(--ax-w60); letter-spacing: 0; }
.ax-logo small::before { content: "/"; margin: 0 8px 0 2px; color: var(--ax-w40); }
.ax-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ax-nav a, .ax-menu a {
	font-family: var(--ax-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--ax-w80);
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 7px 14px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}
.ax-nav a:hover, .ax-nav a:focus-visible { border-color: var(--ax-w); color: var(--ax-w); }
.ax-nav a[aria-current="page"], .ax-menu a[aria-current="page"] { background: var(--ax-o); border-color: var(--ax-w); color: var(--ax-w); }
.ax-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.ax-act form { margin: 0; display: inline; }
.ax-who { font-size: 13px; color: var(--ax-w40); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Pillole Archade della testata e del piede */
.ax-pill {
	font-family: var(--ax-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ax-w) !important;
	background: transparent;
	border: 2px solid var(--ax-w);
	border-radius: 999px;
	min-height: 42px;
	padding: 8px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
}
.ax-pill.ax-hot { background: var(--ax-o); box-shadow: 0 0 22px rgba(246, 69, 17, .35); }
.ax-pill:hover, .ax-pill:focus-visible { background: var(--ax-o); color: var(--ax-w) !important; }
.ax-pill > span { display: inline-block; transition: transform .18s ease; }
.ax-pill:hover > span, .ax-pill:focus-visible > span { transform: scale(1.07); }

/* Bottone menu (tre linee, come su archadedesign.com) */
.ax-burger {
	display: none;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 2px solid var(--ax-w);
	border-radius: 999px;
	background: transparent;
	color: var(--ax-w);
	cursor: pointer;
	padding: 0;
	position: relative;
}
.ax-burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.ax-burger i:nth-child(1) { top: 14px; }
.ax-burger i:nth-child(2) { top: 20px; }
.ax-burger i:nth-child(3) { top: 26px; }
.ax-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ax-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.ax-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.ax-burger:hover, .ax-burger:focus-visible { background: var(--ax-o); }
.ax-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menu aperto: una lastra quadrata sotto la testata */
.ax-menu {
	border-top: 1px solid var(--ax-w20);
	padding: 18px var(--ax-side) 26px;
	max-height: calc(100vh - var(--ax-bar-h) - var(--ax-admin));
	overflow-y: auto;
	display: grid;
	gap: 6px;
}
.ax-menu[hidden] { display: none; }
.ax-menu a { font-size: 18px; padding: 12px 18px; justify-self: start; }
.ax-menu a:hover, .ax-menu a:focus-visible { border-color: var(--ax-w); color: var(--ax-w); }
.ax-menu .ax-menu__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--ax-w20); }
.ax-menu .ax-menu__act a, .ax-menu .ax-menu__act button { font-size: 15px; }
.ax-menu .ax-menu__act form { margin: 0; }

/* Barra compatta: menu nel bottone (deciso da archade-shell.js se le voci non ci stanno; sotto i 900px sempre) */
.ax-bar.is-compact .ax-nav, .ax-bar.is-compact .ax-act .ax-hide-c { display: none; }
.ax-bar.is-compact .ax-burger { display: inline-block; }
@media (max-width: 720px) {
	.ax-bar .ax-nav, .ax-bar .ax-act .ax-hide-c { display: none; }
	.ax-bar .ax-burger { display: inline-block; }
}
@media (max-width: 520px) {
	:root { --ax-bar-h: 64px; }
	.ax-bar__in { gap: 12px; }
	.ax-logo { font-size: 18px; }
	.ax-logo small { display: none; }
	.ax-act .ax-pill { min-height: 44px; padding: 6px 16px; font-size: 13px; }
	.ax-act .ax-hide-xs { display: none; }
	.ax-burger { width: 44px; height: 44px; }
	.ax-burger i { left: 11px; right: 11px; }
	.ax-burger i:nth-child(1) { top: 13px; }
	.ax-burger i:nth-child(2) { top: 19px; }
	.ax-burger i:nth-child(3) { top: 25px; }
}

/* Avviso sotto la testata (beta, pagamento) */
.ax-bar .ax-notice, .ax-bar .notice { border-top: 1px solid var(--ax-w20); text-align: center; font-size: 13px; padding: 7px var(--ax-side); color: var(--ax-w80); }
.ax-bar .ax-notice a, .ax-bar .notice a { color: var(--ax-w); font-weight: 600; margin-left: 6px; }
.ax-bar .ax-notice.hot, .ax-bar .notice.hot { background: var(--ax-o); color: var(--ax-w); }

/* ---------- Piede: un box con tutto dentro (come archadedesign.com) ---------- */
.ax-foot { padding: 64px var(--ax-side) var(--ax-side); font-family: var(--ax-font); color: var(--ax-w); position: relative; z-index: 1; }
.ax-foot__box { border-radius: 40px; padding: clamp(28px, 4vw, 52px); }
/* Piede a colonne: niente linee, niente righe sparse. Tutti i testi stanno in una colonna, stessa misura e stesso passo. */
.ax-foot__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.25fr); gap: 40px 36px; align-items: start; }
.ax-foot__brand { display: grid; gap: 18px; align-content: start; }
.ax-foot__brand p { margin: 0; color: var(--ax-w60); font-size: 14px; line-height: 1.6; max-width: 380px; }
.ax-foot__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-foot__brand .ax-foot__copy { color: var(--ax-w60); font-size: 13px; line-height: 1.5; }
.ax-foot h2 { font-family: var(--ax-font) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--ax-w60) !important; margin: 0 0 18px !important; line-height: 1.3 !important; }
.ax-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ax-foot li { margin: 0; font-size: 14px; line-height: 1.45; }
.ax-foot nav a, .ax-foot__company a { color: var(--ax-w80); text-decoration: none; font-size: 14px; overflow-wrap: break-word; }
.ax-foot nav a:hover, .ax-foot nav a:focus-visible, .ax-foot__company a:hover, .ax-foot__company a:focus-visible { color: var(--ax-w); text-decoration: underline; text-decoration-color: var(--ax-o); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ax-foot__company li { color: var(--ax-w60); }
@media (max-width: 1320px) { .ax-foot__grid { grid-template-columns: repeat(3, minmax(0, .85fr)) minmax(0, 1.25fr); } .ax-foot__brand { grid-column: 1 / -1; } .ax-foot__brand p { max-width: 560px; } }
@media (max-width: 760px) { .ax-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .ax-foot__col:has(.ax-foot__company) { grid-column: 1 / -1; } }
@media (max-width: 600px) {
	.ax-foot { padding-top: 48px; }
	.ax-foot__box { border-radius: 28px; padding: 28px 22px; }
}
@media (max-width: 440px) { .ax-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (prefers-reduced-motion: reduce) {
	.ax-pill > span, .ax-burger i { transition: none; }
}

/* Salto al contenuto: nascosto finche' non riceve il fuoco dalla tastiera */
body > .skip, body.laser > .skip, .ax-skip { position: fixed !important; left: 16px; top: -80px; z-index: 200 !important; }
body > .skip:focus, body.laser > .skip:focus, .ax-skip:focus { top: calc(var(--ax-admin) + 12px); }
.ax-nav a[aria-current="page"] .badge, .ax-menu a[aria-current="page"] .badge { background: var(--ax-w); color: var(--ax-o); }
/* Barra stretta: prima spariscono email e nome dell'organizzazione, poi le voci vanno nel menu */
.ax-bar.is-tight .ax-bar__in > .ax-act > .ax-who, .ax-bar.is-tight .ax-logo small { display: none; }
.ax-bar.is-tight .ax-nav a { padding: 7px 11px; }
.ax-menu .ax-menu__act a.ax-pill { border-color: var(--ax-w); padding: 8px 20px; font-size: 15px; font-weight: 600; color: var(--ax-w); }
.ax-menu .ax-menu__act a.ax-pill.ax-hot, .ax-menu .ax-menu__act a.ax-pill:hover { background: var(--ax-o); }
.ax-menu { background: rgba(0, 0, 0, .55); }

/* Liquid Glass vero (rifrazione, browser Chromium): il vetro e' il ::before, che piega e ingrandisce
   quello che c'e' sotto con il filtro SVG preparato da archade-shell.js (--ax-lg-filter). I riflessi
   del bordo passano nel ::after, sopra la lastra. */
html.ax-refract .ax-glass {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: var(--ax-backlight) !important;
}
html.ax-refract .ax-glass.ax-glass--s { box-shadow: var(--ax-backlight-s) !important; }
html.ax-refract .ax-glass.ax-glass--hot { box-shadow: var(--ax-backlight), 0 0 34px rgba(246, 69, 17, .28) !important; }
html.ax-refract .ax-glass::before {
	background-image: none !important;
	-webkit-mask-image: none;
	mask-image: none;
	-webkit-backdrop-filter: var(--ax-lg-filter, blur(12px)) saturate(1.6) brightness(1.18);
	backdrop-filter: var(--ax-lg-filter, blur(12px)) saturate(1.6) brightness(1.18);
}
/* Lastra satinata grigia, retroilluminata dai bordi (luce che entra dal bordo e si sfuma verso il centro) */
html.ax-refract .ax-glass::after {
	background:
		radial-gradient(140% 60% at 18% -12%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 42%),
		radial-gradient(70% 45% at 96% 108%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 50%),
		linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .04) 100%),
		linear-gradient(var(--ax-frost-tint), var(--ax-frost-tint)) !important;
	box-shadow: var(--ax-glass-edge), inset 0 0 18px rgba(255, 255, 255, .09), inset 0 0 3px rgba(255, 255, 255, .35) !important;
}
html.ax-refract .ax-glass.ax-glass--hot::after { box-shadow: var(--ax-glass-edge), 0 0 0 1px var(--ax-o) inset !important; }

/* ---------- Menu Account (app): le voci secondarie in una lastra a tendina ---------- */
.ax-acct { position: relative; }
.ax-acct__btn {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 42px; padding: 4px 16px 4px 5px;
	border: 2px solid var(--ax-w); border-radius: 999px;
	background: transparent; color: var(--ax-w);
	font-family: var(--ax-font); font-size: 14px; font-weight: 600; cursor: pointer;
}
.ax-acct__btn:hover, .ax-acct__btn:focus-visible, .ax-acct__btn[aria-expanded="true"], .ax-acct__btn.is-on { background: var(--ax-o); }
.ax-acct__i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; background: var(--ax-o); border: 1.5px solid var(--ax-w); font-size: 13px; }
.ax-acct__btn:hover .ax-acct__i, .ax-acct__btn[aria-expanded="true"] .ax-acct__i, .ax-acct__btn.is-on .ax-acct__i { background: var(--ax-w); color: var(--ax-o); }
.ax-acct__menu {
	position: absolute !important; right: 0; top: calc(100% + 14px);
	min-width: 260px; padding: 14px; border-radius: 24px !important;
	display: grid; gap: 4px; z-index: 120;
}
.ax-acct__menu[hidden] { display: none !important; }
.ax-acct__who { margin: 4px 10px 10px; display: grid; gap: 2px; font-size: 13px; color: var(--ax-w60); line-height: 1.4; }
.ax-acct__who b { color: var(--ax-w); font-size: 14px; }
.ax-acct__menu a { color: var(--ax-w80); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 14px; border-radius: 999px; border: 2px solid transparent; }
.ax-acct__menu a:hover, .ax-acct__menu a:focus-visible { border-color: var(--ax-w); color: var(--ax-w); }
.ax-acct__menu a[aria-current="page"] { background: var(--ax-o); border-color: var(--ax-w); color: var(--ax-w); }
.ax-acct__menu form { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--ax-w20); }
.ax-acct__menu form .ax-pill { width: 100%; }
.ax-menu__sep { height: 1px; background: var(--ax-w20); margin: 6px 0; }

/* ---------- Testata come lastra di vetro ---------- */
/* Testata: niente cornice bianca; solo la linea di stacco sotto, sottile e poco luminosa */
.ax-bar.ax-glass--bar { border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 0 !important; isolation: isolate; box-shadow: 0 10px 40px rgba(0, 0, 0, .55) !important; }
html.ax-refract .ax-bar.ax-glass--bar { box-shadow: 0 10px 40px rgba(0, 0, 0, .55) !important; }
html.ax-refract .ax-glass--bar::before,
html.ax-refract .ax-acct__menu.ax-glass::before {
	-webkit-backdrop-filter: var(--ax-lg-filter, blur(12px)) saturate(1.6) brightness(.95);
	backdrop-filter: var(--ax-lg-filter, blur(12px)) saturate(1.6) brightness(.95);
}
html.ax-refract .ax-glass--bar::after,
html.ax-refract .ax-acct__menu.ax-glass::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .08)), var(--ax-frost-bar-tint) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -10px 22px -12px rgba(255, 255, 255, .22) !important;
}
.ax-glass--bar::before, .ax-glass--bar::after { border-radius: 0 !important; }
html.ax-refract .ax-glass--bar::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), var(--ax-frost-bar-tint) !important;
	box-shadow: none !important;
}
html:not(.ax-refract) .ax-bar.ax-glass--bar { box-shadow: 0 10px 40px rgba(0, 0, 0, .55) !important; }
html:not(.ax-refract) .ax-glass--bar { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), var(--ax-frost-bar-tint) !important; }
/* Barra stretta: il bottone Account resta solo con l'iniziale, le voci si stringono */
.ax-bar.is-tight .ax-acct__btn { padding: 4px; }
.ax-bar.is-tight .ax-acct__btn > span:last-child { display: none; }
.ax-bar.is-tight .ax-bar__in { gap: 18px; }
.ax-bar.is-tight .ax-nav { gap: 0; }
.ax-bar.is-tight .ax-nav a { padding: 7px 9px; }

/* ---------- Assistenza: l'assistente tecnico per la configurazione (archade-help.js) ---------- */
body .ax-help-btn, body.laser > .ax-help-btn {
	position: fixed !important; right: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 28px); left: auto; top: auto; z-index: 140;
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 48px; padding: 5px 20px 5px 6px;
	border: 2px solid var(--ax-w); border-radius: 999px;
	background: rgba(16, 15, 14, .55); color: var(--ax-w);
	-webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 0 16px rgba(255, 255, 255, .12), 0 12px 40px rgba(0, 0, 0, .6);
	font-family: var(--ax-font); font-size: 15px; font-weight: 600; cursor: pointer;
}
.ax-help-btn i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-content: center; background: var(--ax-o); border: 1.5px solid var(--ax-w); font-style: normal; font-weight: 700; }
body .ax-help-btn:hover, body .ax-help-btn:focus-visible, body .ax-help-btn.is-on { background: var(--ax-o); }
.ax-help-btn:hover i, .ax-help-btn.is-on i { background: var(--ax-w); color: var(--ax-o); }
.ax-help, .ax-help.ax-glass {
	position: fixed !important; z-index: 139;
	right: clamp(14px, 3vw, 32px); bottom: calc(clamp(14px, 3vw, 28px) + 62px);
	width: min(440px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - var(--ax-bar-real, 72px) - var(--ax-admin) - 120px)); overflow: auto;
	padding: 24px; border-radius: 28px !important;
	color: var(--ax-w); font-family: var(--ax-font); font-size: 15px; line-height: 1.5;
	overscroll-behavior: contain;
}
.ax-help[hidden] { display: none !important; }
.ax-help__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ax-help__eyebrow { color: var(--ax-o); font-size: 13px; font-weight: 600; }
.ax-help h2 { margin: 2px 0 0; font-family: var(--ax-title); font-size: 22px; line-height: 1.2; color: var(--ax-w); }
.ax-help h3 { margin: 20px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ax-w60); }
.ax-help__x { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--ax-w); background: transparent; color: var(--ax-w); font-size: 22px; line-height: 1; cursor: pointer; }
.ax-help__x:hover, .ax-help__x:focus-visible { background: var(--ax-o); }
.ax-help__intro { margin: 12px 0 0; color: var(--ax-w80); }
.ax-help__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ax-help__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.ax-help__steps b { display: block; font-weight: 600; }
.ax-help__steps a { color: var(--ax-w); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ax-w40); }
.ax-help__steps a:hover { text-decoration-color: var(--ax-o); }
.ax-help__steps small { display: block; color: var(--ax-w60); font-size: 13px; }
.ax-help__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; border: 1.5px solid var(--ax-w40); font-size: 13px; font-weight: 700; color: var(--ax-w80); }
.ax-help__steps li.is-next .ax-help__n { background: var(--ax-o); border-color: var(--ax-w); color: var(--ax-w); }
.ax-help__steps li.is-done .ax-help__n { border-color: var(--ax-w); color: transparent; position: relative; }
.ax-help__steps li.is-done .ax-help__n::after { content: ""; position: absolute; left: 10px; top: 6px; width: 7px; height: 12px; border: solid var(--ax-w); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ax-help__steps li.is-done b, .ax-help__steps li.is-done a { color: var(--ax-w60); text-decoration: line-through; text-decoration-color: var(--ax-w40); }
.ax-help__search, .ax-help__ask input {
	width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 18px;
	border: 2px solid var(--ax-w); border-radius: 999px; background: rgba(0, 0, 0, .35); color: var(--ax-w);
	font: inherit; outline: none;
}
.ax-help__search:focus, .ax-help__ask input:focus { border-color: var(--ax-o); }
.ax-help__list { display: grid; gap: 8px; margin-top: 12px; }
.ax-help__g { border: 1px solid var(--ax-w20); border-radius: 18px; background: rgba(255, 255, 255, .03); }
.ax-help__g[hidden] { display: none; }
.ax-help__g summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.ax-help__g summary::-webkit-details-marker { display: none; }
.ax-help__g summary::after { content: "+"; color: var(--ax-o); font-weight: 700; }
.ax-help__g[open] summary::after { content: "\2212"; }
.ax-help__g > div { padding: 0 16px 14px; color: var(--ax-w80); font-size: 14px; }
.ax-help__g p, .ax-help__g ol { margin: 0 0 10px; }
.ax-help__g ol { padding-left: 20px; }
.ax-help__g li { margin-bottom: 4px; }
.ax-help__g b { color: var(--ax-w); }
.ax-help__none { color: var(--ax-w60); font-size: 14px; }
.ax-help__ask form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ax-help__answer { margin-top: 10px; color: var(--ax-w80); font-size: 14px; }
.ax-help__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ax-w20); color: var(--ax-w60); font-size: 14px; }
@media (max-width: 720px) {
	.ax-help-btn span { display: none; }
	body .ax-help-btn, body.laser > .ax-help-btn { padding: 5px; gap: 0; }
	.ax-help, .ax-help.ax-glass { right: 10px; left: 10px; width: auto; bottom: 76px; max-height: calc(100vh - var(--ax-bar-real, 64px) - var(--ax-admin) - 96px); padding: 20px; }
}
@media print { .ax-help-btn, .ax-help { display: none !important; } }

/* Menu Account e menu a tendina: vetro fume' quasi pieno, si legge sopra qualunque cosa (Carlo, 10 ottobre) */
html.ax-refract .ax-acct__menu.ax-glass::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%), rgba(20, 19, 18, .94) !important;
}
html:not(.ax-refract) .ax-acct__menu.ax-glass {
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%), rgba(20, 19, 18, .94) !important;
}
.ax-bar .ax-menu, .ax-menu {
	background: rgba(20, 19, 18, .96) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.ax-help__ai { margin: 10px 0 0; font-size: 12px; font-style: italic; color: var(--ax-w60); }

/* ---------- Firma Archade Design Solutions in fondo al piede (scatola e scritta) ---------- */
.ax-maker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; width: fit-content; margin-top: clamp(32px, 4vw, 48px); padding: 14px 22px 14px 18px; border-radius: 999px; border: 1.5px solid var(--ax-w40); background: rgba(0, 0, 0, .35); color: var(--ax-w); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.ax-maker:hover, .ax-maker:focus-visible { border-color: var(--ax-w); background: rgba(0, 0, 0, .6); }
.ax-maker:hover .ax-maker__logo, .ax-maker:focus-visible .ax-maker__logo { color: var(--ax-w); }
.ax-maker__by, .ax-maker__where { font-size: 13px; color: var(--ax-w60); line-height: 1.3; }
.ax-maker__logo { display: block; height: 30px; width: auto; color: var(--ax-w); }
.ax-maker__logo path:first-child { color: var(--ax-o); fill: var(--ax-o); }
@media (max-width: 440px) { .ax-maker { border-radius: 24px; padding: 14px 18px; } .ax-maker__where { display: none; } }
/* Telefono stretto (fino a 400 px): logo e pillola piu' compatti, cosi' il bottone Menu resta dentro lo schermo */
@media (max-width: 400px) {
	.ax-bar__in { gap: 8px; }
	.ax-logo { font-size: 17px; }
	.ax-act .ax-pill { padding: 6px 13px; font-size: 12.5px; }
}
/* Telefono stretto: "Archade Media Manager" è lungo, la Beta gratuita resta nel menu e nella pagina */
@media (max-width: 440px) { .ax-bar[data-product="mm"] .ax-act > .ax-hot { display: none; } }

/* ---------- Revisione UX del 12 ottobre 2026 (pomeriggio): arancione da testo piccolo, bersagli, bottone Assistenza ---------- */
:root { --ax-o-small: #D73C0F; } /* arancione del Brandbook per testo piccolo e hover: bianco sopra fa 4,62:1, su bianco 4,63:1 */
.ax-pill.ax-hot, .ax-pill:hover, .ax-pill:focus-visible,
.ax-nav a[aria-current="page"], .ax-menu a[aria-current="page"], .ax-acct__menu a[aria-current="page"],
.ax-acct__btn:hover, .ax-acct__btn:focus-visible, .ax-acct__btn[aria-expanded="true"], .ax-acct__btn.is-on, .ax-acct__i,
.ax-bar .notice.hot, .ax-bar .ax-notice.hot, .ax-help-btn i, .ax-help__steps li.is-next .ax-help__n,
.ax-burger:hover, .ax-burger:focus-visible, .ax-menu .ax-menu__act a.ax-pill.ax-hot, .ax-menu .ax-menu__act a.ax-pill:hover,
body > .skip, body.laser > .skip, .ax-skip { background: var(--ax-o-small); }
body .ax-help-btn:hover, body .ax-help-btn:focus-visible, body .ax-help-btn.is-on { background: var(--ax-o-small); }
.ax-acct__btn:hover .ax-acct__i, .ax-acct__btn[aria-expanded="true"] .ax-acct__i, .ax-acct__btn.is-on .ax-acct__i, .ax-help-btn:hover i, .ax-help-btn.is-on i { color: var(--ax-o-small); }
.ax-nav a[aria-current="page"] .badge, .ax-menu a[aria-current="page"] .badge { color: var(--ax-o-small); }
.ax-who { color: var(--ax-w60); }
.ax-logo { min-height: 24px; }
.ax-foot nav:not(.arc-lang) a, .ax-foot__company a { display: inline-block; padding: 3px 0; margin: -3px 0; }
.ax-bar .notice, .ax-bar .ax-notice { padding: 6px var(--ax-side); line-height: 1.35; }
body .ax-help-btn.is-mini, body.laser > .ax-help-btn.is-mini { padding: 5px; gap: 0; }
.ax-help-btn.is-mini span { display: none; }
.ax-foot__brand .arc-lang { justify-self: start; }
/* ---------- Secondo giro UX (12 ottobre 2026, chat Metrics): focus, menu, pannello Assistenza ---------- */
/* Anello di focus a due toni (nero dentro, bianco fuori), mai animato */
.ax-pill:focus-visible, .ax-nav a:focus-visible, .ax-menu a:focus-visible, .ax-acct__btn:focus-visible, .ax-acct__menu a:focus-visible,
.ax-burger:focus-visible, .ax-help-btn:focus-visible, .ax-foot a:focus-visible, .ax-maker:focus-visible, .ax-logo:focus-visible {
	outline: 2px solid transparent; outline-offset: 3px; box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--ax-w) !important; transition: none;
}
/* Menu a tendina su telefono: voci larghe quanto la riga (bersaglio pieno) */
.ax-menu a { justify-self: stretch; }
/* Pannello Assistenza: fondo quasi pieno sull'elemento stesso, cosi' resta leggibile anche quando si scorre
   (il vetro di ::before e ::after copre solo la prima schermata del pannello) */
.ax-help, .ax-help.ax-glass, html.ax-refract .ax-help.ax-glass {
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%), rgba(20, 19, 18, .94) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%) !important; backdrop-filter: blur(16px) saturate(140%) !important;
}
html.ax-refract .ax-help.ax-glass::before { display: none; }
/* Su telefono il bottone Assistenza si ritira mentre si scrive in un campo (non copre le tendine) */
@media (max-width: 600px) {
	body:has(.form input:focus, .form select:focus, .form textarea:focus) .ax-help-btn:not(.is-on) { opacity: 0; pointer-events: none; }
}

/* =====================================================================
   Piede rifatto (12 ottobre 2026, sera): uguale su siti e app.
   In alto marchio e pillole (piu' il selettore IT/EN), al centro quattro colonne di link,
   in fondo il testo libero accanto al logo Archade tutto bianco. Nessuna linea.
   ===================================================================== */
.ax-foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(36px, 4vw, 52px); }
.ax-foot__top .ax-logo { font-size: 22px; }
.ax-foot .ax-foot__top .ax-foot__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; grid-column: auto; }
.ax-foot__act .ax-pill { min-height: 44px; }
.ax-foot__cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 36px 40px; align-items: start; }
.ax-foot__base { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 20px 40px; align-items: end; margin-top: clamp(40px, 5vw, 64px); }
.ax-foot__base > .ax-maker { grid-column: 1 / 3; }
.ax-foot__base > .ax-foot__text { grid-column: 3 / -1; }
.ax-foot__text { display: grid; gap: 6px; max-width: 640px; }
.ax-foot__text p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ax-w60); }
.ax-foot__text .ax-foot__about { color: var(--ax-w80); font-size: 14px; }
/* Firma Archade: logo tutto bianco, niente cornice */
.ax-foot .ax-maker { display: inline-grid; justify-items: start; gap: 8px; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ax-w); }
.ax-foot .ax-maker:hover, .ax-foot .ax-maker:focus-visible { background: none; opacity: .85; }
.ax-foot .ax-maker__by { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ax-w60); }
.ax-foot .ax-maker__logo { height: 34px; color: var(--ax-w); }
.ax-foot .ax-maker__logo path, .ax-foot .ax-maker__logo path:first-child { fill: var(--ax-w); color: var(--ax-w); }
@media (max-width: 1000px) { .ax-foot__cols, .ax-foot__base { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .ax-foot__base > .ax-maker { grid-column: 1; } .ax-foot__base > .ax-foot__text { grid-column: 2; } }
@media (max-width: 640px) {
	.ax-foot__top { flex-direction: column; align-items: flex-start; }
	.ax-foot .ax-foot__top .ax-foot__brand { justify-content: flex-start; }
	.ax-foot__base { grid-template-columns: minmax(0, 1fr); }
	.ax-foot__base > .ax-maker, .ax-foot__base > .ax-foot__text { grid-column: auto; }
}
@media (max-width: 440px) { .ax-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .ax-foot__cols > :nth-child(n+3) { grid-column: 1 / -1; } }

/* Selettore IT/EN come su archadedesign.com: pillola dentro la pillola, monocolore (fondo bianco, testo Quasi Nero) */
html .arc-lang { display: inline-flex !important; align-items: center; gap: 2px; padding: 4px !important; margin: 0 !important; border: 2px solid var(--ax-w) !important; border-radius: 999px !important; overflow: visible !important; background: rgba(0, 0, 0, .45) !important; font-size: 13px; line-height: 1; vertical-align: middle; width: auto; }
html .arc-lang a { display: flex !important; align-items: center; justify-content: center; min-width: 40px; min-height: 32px !important; padding: 0 12px !important; border-radius: 999px; background: transparent !important; color: var(--ax-w) !important; font-weight: 700; letter-spacing: .04em; text-decoration: none !important; transition: background-color .15s ease, color .15s ease; }
html .arc-lang a[aria-current] { background: var(--ax-w) !important; color: #252220 !important; }
html .arc-lang a:not([aria-current]):hover { background: rgba(255, 255, 255, .14) !important; }
html .arc-lang a:focus-visible { outline: 2px solid var(--ax-w) !important; outline-offset: 2px !important; box-shadow: none !important; }
.ax-foot .arc-lang--foot, .ax-foot__brand .arc-lang { margin: 0 !important; }