/* Signal, improved (glow) and Threads (flat): the thread heroes, 1.26.0 on; Signal, improved is the homepage hero
   since 1.28.0. Words on the left and threads on the right from 900px wide; words on top and threads below on narrower
   screens. assets/js/threads.js draws the threads and places the labels and the hub; without it the labels show as a
   list under the words.
   Two places use them: the line-up (the whole hero is HTML: .tz.tzv.tzt) and the homepage hero (Elementor container
   with the classes "tz tz--home tzt-host"; its words stay Elementor widgets; the shortcode widget prints the layer
   .tzt-layer with the canvas, labels, hub and pause button).
   Colours are sRGB hex, measured against the ground they sit on (WCAG 2.x):
   Glow, on #070B1A (edges) to #16224A (behind the hub): marmo text 17.11 to 13.46, lede #A9B3C6 9.28 to 7.31; thread
   colours web #F2F4F8, search #FF4D4D, ai #9B7BFF, local #22C77A, ads #FF9F1C, social #FF4FB4, email #3DA5FF, 4.71:1
   (search on #16224A) or better.
   Flat, on nero #161616: marmo text 15.80:1; thread tints web #F4EFE6 15.80, search #EE6A4D 5.86, ai #EDB33C 9.58,
   local #6DB38E 7.32, ads #F08F45 7.51, social #E58AA8 7.35, email #86A7D6 7.34 (all :1). Every thread has a word label. */

/* Thread colours and the label plate, for both places. */
.tzt--glow {
	--tzt-plate: rgba(7, 11, 26, .9);
	--tzt-web: #F2F4F8;
	--tzt-search: #FF4D4D;
	--tzt-ai: #9B7BFF;
	--tzt-local: #22C77A;
	--tzt-ads: #FF9F1C;
	--tzt-social: #FF4FB4;
	--tzt-email: #3DA5FF;
}
.tzt--flat {
	--tzt-plate: #161616;
	--tzt-web: #F4EFE6;
	--tzt-search: #EE6A4D;
	--tzt-ai: #EDB33C;
	--tzt-local: #6DB38E;
	--tzt-ads: #F08F45;
	--tzt-social: #E58AA8;
	--tzt-email: #86A7D6;
}

/* The line-up heroes. */
.tz.tzv.tzt { justify-content: flex-start; padding-bottom: clamp(56px, 9vh, 110px); }
.tz.tzv.tzt--flat { --tz-base: #161616; --tz-text: #F4EFE6; }
/* The glow keeps Signal's sky and light (a radial gradient, centred on the hub by the script). */
.tz.tzv.tzt--glow, .e-con.tz.tzt-host {
	--tz-base: #070B1A;
	--tz-text: #F4EFE6;
	background: radial-gradient(60% 70% at var(--hx, 72%) var(--hy, 52%), #16224A, #070B1A 70%);
}
.tzt--glow .tzv__sub { color: #A9B3C6; }
.tzt__copy { position: relative; z-index: 2; width: 100%; max-width: min(50%, 680px); }
.tzt .tzv__h { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); }
/* Pinned so the kit's link colours never reach the hero's action labels. */
.tzt .tzv__btn, .tzt .tzv__btn:hover, .tzt .tzv__btn:focus { color: var(--tz-nero); }
.tzt .tzv__link, .tzt .tzv__link:hover, .tzt .tzv__link:focus { color: var(--tz-text); }

/* The homepage hero (Elementor): the words keep the left half above the threads. */
.e-con.tz.tzt-host { padding-bottom: clamp(56px, 9vh, 110px); }
.e-con.tz.tzt-host > .e-con.mx-hero__copy { position: relative; z-index: 2; max-width: min(50%, 680px); }
.e-con.tz.tzt-host .mx-h1.elementor-widget-heading .elementor-heading-title { font-size: clamp(2.5rem, 1rem + 4vw, 5rem); }
.e-con.tz.tzt-host .mx-lede.elementor-widget-text-editor { color: #A9B3C6; }
.e-con.tz.tzt-host > .tz-fieldw { z-index: 0; }
.tzt-layer { position: absolute; inset: 0; }

.tzt__cv { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

/* Labels: a list under the words without the script; placed on their threads with it. Each sits on a plate of the
   ground colour, so no thread runs through the words. Pointing at one lights its thread; clicking sends customers. */
.tzt__tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 20px; max-width: 640px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.tzt-layer .tzt__tags { display: none; }
.tzt__tag { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 9px 5px 8px; border-radius: 3px; background: var(--tzt-plate); color: var(--tz-text, #F4EFE6); font: 600 16px/1.2 var(--tz-font); white-space: nowrap; }
.tzt__tag i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tzt--glow .tzt__tag i { box-shadow: 0 0 10px var(--c); }
.tzt__tag--web { --c: var(--tzt-web); }
.tzt__tag--search { --c: var(--tzt-search); }
.tzt__tag--ai { --c: var(--tzt-ai); }
.tzt__tag--local { --c: var(--tzt-local); }
.tzt__tag--ads { --c: var(--tzt-ads); }
.tzt__tag--social { --c: var(--tzt-social); }
.tzt__tag--email { --c: var(--tzt-email); }
.tzt.is-on .tzt__tags { position: absolute; inset: 0; z-index: 2; display: block; max-width: none; margin: 0; pointer-events: none; }
.tzt.is-on .tzt__tag {
	position: absolute; left: 0; top: 0; opacity: 0; pointer-events: auto; cursor: pointer;
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1);
}
.tzt.is-on .tzt__tag.is-in { opacity: 1; }
.tzt.is-on .tzt__tag.is-hot { box-shadow: inset 0 0 0 1.5px var(--c); }
.tzt.has-hot .tzt__tag.is-in:not(.is-hot) { opacity: .45; }

/* The hub: every thread ends under it, so nothing crosses the words "Your business". It tilts with the view and shows
   its edge; clicking it pulls customers from every channel. */
.tzt__hub { display: none; }
.tzt.is-on .tzt__hub {
	position: absolute; left: 0; top: 0; z-index: 3; display: block; margin: 0; padding: 13px 18px 12px;
	border-radius: 3px; background: var(--tz-marmo, #F4EFE6); color: var(--tz-nero, #161616); font: 700 18px/1 var(--tz-font); white-space: nowrap;
	opacity: 0; pointer-events: auto; cursor: pointer; transform-style: preserve-3d;
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
}
.tzt.is-on .tzt__hub::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #8C8478; transform: translateZ(-12px); }
.tzt.is-on .tzt__hub.is-in { opacity: 1; }
.tzt--glow.is-on .tzt__hub { padding: 17px 26px 16px; background: #FFE3AC; color: #0B1022; font-size: 22px; box-shadow: inset 0 -3px 0 #E0AE52, 0 0 56px 10px rgba(255, 186, 96, .38); }
.tzt--glow.is-on .tzt__hub::before { background: #B8812F; }
/* Warm is kept for the business: the hub and the headline's last phrase. #0B1022 on #FFE3AC 15.15:1; #FFD58A on the sky 14.5:1 to 11.7:1. */
.tzt--glow .od-you, .e-con.tz.tzt-host .od-you { color: #FFD58A; }

/* Pause: the threads sway and customers keep arriving, so the motion can be stopped (WCAG 2.2.2). */
.tzt .tzt__pause {
	position: absolute; z-index: 4; right: max(56px, calc((100% - 1328px) / 2)); bottom: 24px;
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px;
	border: 0; border-radius: 3px; background: var(--tzt-plate); box-shadow: inset 0 0 0 2px rgba(244, 239, 230, .6);
	color: var(--tz-marmo, #F4EFE6); font: 700 15px/1 var(--tz-font); cursor: pointer; pointer-events: auto;
	transition: box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}
.tzt .tzt__pause:hover, .tzt .tzt__pause:focus { background: var(--tzt-plate); color: var(--tz-marmo, #F4EFE6); box-shadow: inset 0 0 0 2px var(--tz-marmo, #F4EFE6); }
.tzt .tzt__pause:focus-visible { outline: 3px solid var(--tz-marmo, #F4EFE6); outline-offset: 4px; }
.tzt .tzt__pause[hidden] { display: none; }
.tzt__pause::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.tzt__pause.is-paused::before { width: 0; height: 0; border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tzt__pause-r, .tzt__pause.is-paused .tzt__pause-p { display: none; }
.tzt__pause.is-paused .tzt__pause-r { display: inline; }

@media (min-width: 900px) and (max-width: 1199px) {
	.tzt__copy, .e-con.tz.tzt-host > .e-con.mx-hero__copy { max-width: min(56%, 640px); }
}
@media (max-width: 899px) {
	.tz.tzv.tzt, .e-con.tz.tzt-host { padding-bottom: clamp(400px, 58vh, 500px); }
	.tzt__copy, .e-con.tz.tzt-host > .e-con.mx-hero__copy { max-width: none; }
	.tzt.is-on .tzt__hub, .tzt--glow.is-on .tzt__hub { padding: 12px 17px 11px; font-size: 17px; }
	.tzt .tzt__pause { right: 20px; bottom: 16px; }
}
@media (max-width: 599px) {
	.tzt__tag { gap: 7px; padding: 5px 7px 4px 6px; font-size: 14px; }
	.tzt__tag i { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
	.tzt.is-on .tzt__tag, .tzt.is-on .tzt__hub { transition: none; }
}