:root {
	--bg:     hsla(0, 0%, 12%, 1);			/* #1e1e1e */
	--panel:  hsla(0, 0%, 15%, 1);			/* #262626 */
	--text:   hsla(0, 0%, 95%, 1);			/* #f2f2f2 */
	--muted:  hsla(0, 0%, 71%, 1);			/* #b5b5b5 */
	--accent: hsla(209, 100%, 65%, 1);		/* #4aa3ff */
}

/* -------------------------------------------------
	Reset / base
------------------------------------------------- */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
							 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------
	Layout
------------------------------------------------- */

.wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 24px;
}

/* -------------------------------------------------
	Header / Brand
------------------------------------------------- */

.site-header {
	margin-bottom: 28px;
}

/* Brand stays flush-left, stacked layout */
.site-header.headerRow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* Brand block */
.site-header.headerRow .brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.brand {
	text-decoration: none;
	color: var(--text);
}

.brand:hover {
	opacity: 0.92;
}

.brand-icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
}

.brand-text {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1;
}

/* Download link centered under brand */
a.downloadBtn,
a.downloadBtn:link,
a.downloadBtn:visited,
a.downloadBtn:active {
	align-self: center;
	display: inline-block;

	color: var(--accent) !important;
	font-weight: 500 !important;

	text-decoration: none !important;
	white-space: nowrap;
}

a.downloadBtn:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* -------------------------------------------------
	Tagline
------------------------------------------------- */

.tagline {
	color: var(--muted);
	font-size: 16px;
	margin-bottom: 40px;
}

/* -------------------------------------------------
	Panels
------------------------------------------------- */

.panel {
	background: var(--panel);
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 20px;
}

.panel h2 {
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: 600;
}

.panel p {
	margin: 0 0 14px 0;
	color: var(--muted);
	line-height: 1.5;
}

.panel a {
	display: inline-block;
	margin-top: 6px;
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
}

.panel a:hover {
	text-decoration: underline;
}

.panel a:visited {
	color: var(--accent);
}

/* -------------------------------------------------
	Forms
------------------------------------------------- */

.formGroup {
	margin: 14px 0 14px 0;
}

label {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 6px 0;
}

input[type="email"],
input[type="text"] {
	width: 100%;
	padding: 11px 12px;
	font-size: 15px;
	color: var(--text);
	background: hsla(0, 0%, 11%, 1);
	border: 1px solid hsla(0, 0%, 23%, 1);
	border-radius: 10px;
	outline: none;
}

input::placeholder {
	color: hsla(0, 0%, 49%, 1);
}

input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px hsla(209, 100%, 65%, 0.18);
}

.buttonRow {
	margin-top: 18px;
	display: flex;
	gap: 12px;
	align-items: center;
}

.btnPrimary {
	appearance: none;
	border: 0;
	background: var(--accent);
	color: hsla(209, 49%, 6%, 1);
	font-weight: 700;
	font-size: 15px;
	padding: 10px 16px;
	border-radius: 10px;
	cursor: pointer;
}

.btnPrimary:hover {
	filter: brightness(1.05);
}

.btnSecondary {
	appearance: none;
	border: 1px solid hsla(0, 0%, 28%, 1);
	background: hsla(0, 0%, 10%, 1);
	color: var(--text);
	font-weight: 600;
	font-size: 15px;
	padding: 10px 16px;
	border-radius: 10px;
	cursor: pointer;
}

.btnSecondary:hover {
	border-color: hsla(0, 0%, 38%, 1);
}

/* -------------------------------------------------
	Footer
------------------------------------------------- */

footer {
	margin-top: 26px;
	color: hsla(0, 0%, 55%, 1);
	font-size: 12px;
	text-align: center;
}

/* -------------------------------------------------
	Help page: image maps + hotspots + tooltips
------------------------------------------------- */

.help-nav-panel {
	padding: 16px 18px;
}

.help-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.help-nav a {
	margin-top: 0;
	font-weight: 600;
}

.nav-sep {
	color: hsla(0, 0%, 55%, 1);
}

a.toTop {
	float: right;
	font-size: 13px;
	font-weight: 500;
	color: hsla(0, 0%, 70%, 1);
	text-decoration: none;
}

a.toTop:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Image map container ---- */

.prefsMap {
	position: relative;
	width: 100%;
	text-align: center;
}

.prefsImg {
	display: block;
	width: auto;			/* no forced stretch */
	max-width: 100%;		/* allow shrink */
	height: auto;

/* 
	border-radius: 12px;
	border: 1px solid hsla(0, 0%, 23%, 1);
	background: hsla(0, 0%, 10%, 1);
 */
}

/* Hotspot overlay sized/positioned by JS */
.prefsHotspots {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;	/* individual hotspots re-enable */
	z-index: 5;
}

/* Individual hotspot */
.prefsHotspot {
	position: absolute;
	cursor: pointer;
	pointer-events: auto;
	border-radius: 6px;
}

/* Hover visual */
.prefsHotspot:hover {
	outline: 1px solid hsla(209, 100%, 65%, 0.55);
	background: hsla(209, 100%, 65%, 0.10);
}


/* Image map hint */
.panelHint {
	font-size: 12px;
	color: hsla(0, 0%, 60%, 1);
	margin: -4px 0 14px 0;
	letter-spacing: 0.2px;
}

.panelHint::before {
	content: "ⓘ ";
	opacity: 0.8;
}

/* -------------------------------------------------
	JS tooltip (single instance) — snug width for short strings
------------------------------------------------- */

.mapTooltip {
	position: fixed;
	z-index: 9999;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-2px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;

	pointer-events: none;

	background: hsla(0, 0%, 8%, 0.96);
	border: 1px solid hsla(0, 0%, 28%, 1);
	border-radius: 10px;

	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.35;
	color: hsla(0, 0%, 92%, 1);

	white-space: pre-line;

	/* ✅ snug-to-content, but constrained */
	display: inline-block;
	width: max-content;
	max-width: 340px;
	min-width: 0;

	/* keep long “words” from exploding width */
	overflow-wrap: anywhere;

	box-shadow: 0 12px 40px hsla(0, 0%, 0%, 0.35);
}

.mapTooltip.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 140ms ease, transform 140ms ease;
}

/* Keep tooltip readable on narrow displays */
@media (max-width: 520px) {
	.mapTooltip {
		max-width: 260px;
	}
}