/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
@font-face {
  font-family: "Optima";
  src: url("/fonts/Optima.TTF") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- exact palette from supplied swatch ---- */
  --linen: #ffffff; /* cool grey background — matches footer */
  --periwinkle: #82a9d0; /* primary brand / dominant accent */
  --periwinkle-soft: #bacfe4; /* hero banners, light fills */
  --slate: #6d8ca0; /* secondary surfaces, muted UI */
  --orange: #ff9e01; /* rare emphasis only */
  --indigo: #454f8c; /* "Apple black" — headings, primary text */

  --white: #ffffff;
  --paper: var(--linen);
  --text: var(--indigo);
  --text-soft: #6b7299;
  --text-faint: #9aa1c2;
  --line: rgba(69, 79, 140, 0.12);
  --line-soft: rgba(69, 79, 140, 0.07);

  /* Surfaces and one-off colours that were previously inline hex. Named by the
     job they do rather than the colour they are, so a scheme can redefine them
     without the names turning into lies. */
  --indigo-deep: #363c70;
  --text-lede: #4f5786;
  --surface-band: #edeef0;
  --surface-muted: #f4f5f7;
  --surface-sunken: #eef1f6;
  --surface-footer: #edeef2;
  --map-water: #c8d9ec;

  --display: "Optima", "Optima Nova", system-ui, -apple-system, sans-serif;
  --body-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
}

::selection {
  background: var(--periwinkle-soft);
  color: var(--indigo);
}
a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============ utility top banner — light grey, periwinkle text ============ */
.utility-banner {
  background: var(--surface-band);
  border-bottom: 1px solid var(--line-soft);
}
.utility-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--periwinkle);
  font-weight: 600;
}
.utility-banner-inner .live {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--periwinkle);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(130, 169, 208, 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(130, 169, 208, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(130, 169, 208, 0);
  }
}

/* ============ blurred sticky nav (Apple signature) ============ */
/* Base rule: a safe, fully-opaque-enough nav that looks correct even with
     no backdrop-filter support at all (this is what every browser gets by default). */
nav.main-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    padding 0.3s ease;
}
nav.main-nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--line);
}
/* Progressive enhancement: only browsers that actually support backdrop-filter get the
     frosted-glass look (lower opacity + blur). Using a single positive @supports query
     (rather than a compound "not (...) or (...)" query) avoids a minifier bug where Vite's
     production CSS minifier mangles compound supports-not queries, silently breaking the
     blur in the deployed build while it still worked in unminified local dev CSS. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  nav.main-nav {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background: rgba(255, 255, 255, 0.55);
  }
  nav.main-nav.scrolled {
    background: rgba(255, 255, 255, 0.82);
  }
}
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.3s ease;
}
nav.main-nav.scrolled .nav-inner {
  padding: 13px 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--indigo);
  text-decoration: none;
}
.logo-mark {
  height: 50px;
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.logo-mark img {
  height: 100%;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 13.5px;
  color: var(--text-soft);
  font-weight: 500;
}
.nav-links a {
  position: relative;
  transition: color 0.2s ease;
}
.nav-links a:hover {
  color: var(--periwinkle);
}

.nav-cta {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 980px;
  color: var(--white);
  background: var(--periwinkle);
  transition: all 0.25s ease;
}
.nav-cta:hover {
  background: var(--indigo);
  transform: translateY(-1px);
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--indigo);
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}
.nav-burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile-panel {
  display: none;
  max-height: 0;
  overflow: hidden;
  flex-direction: column;
  padding: 0 24px;
  gap: 0;
  background: var(--white);
  border-top: 1px solid transparent;
  transition:
    max-height 0.3s ease,
    border-color 0.3s ease;
}
.nav-mobile-panel a {
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
}
.nav-mobile-panel .nav-cta {
  margin: 16px 0 18px;
  text-align: center;
  border-bottom: none;
}
.nav-mobile-panel.is-open {
  max-height: 80vh;
  overflow-y: auto;
  border-color: var(--line);
}

/* ============ HERO — solid color banner, Apple-style ============ */
.hero {
  position: relative;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 18%,
    var(--periwinkle-soft) 62%,
    var(--periwinkle-soft) 82%,
    var(--periwinkle) 100%
  );
  padding: 90px 0 0;
  overflow: hidden;
}
.hero-content {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 32px 64px;
  position: relative;
  z-index: 2;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--indigo);
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(235, 235, 235, 0.75);
  margin-bottom: 26px;
  opacity: 0;
  transform: translateY(8px);
  animation: riseIn 0.7s ease forwards;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5.4vw, 58px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 22px;
  color: var(--indigo);
  opacity: 0;
  transform: translateY(14px);
  animation: riseIn 0.8s ease 0.1s forwards;
}
.hero h1 em {
  font-style: normal;
  color: var(--white);
  -webkit-text-stroke: 0;
}
.hero p.lede {
  font-size: 19px;
  color: var(--text-lede);
  max-width: 560px;
  margin: 0 auto 36px;
  opacity: 0;
  transform: translateY(14px);
  animation: riseIn 0.8s ease 0.22s forwards;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  animation: riseIn 0.8s ease 0.34s forwards;
}
.btn-primary {
  background: var(--indigo);
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 980px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.btn-primary:hover {
  background: var(--indigo-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(69, 79, 140, 0.25);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.7);
  color: var(--indigo);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 980px;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background: var(--white);
}

@keyframes riseIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* hero visual: live node panel, framed like a product shot */
.hero-visual-frame {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px 0;
  opacity: 0;
  animation: riseIn 1s ease 0.3s forwards;
}
.hero-visual {
  position: relative;
  border-radius: 18px 18px 18px 18px;
  background: var(--white);
  box-shadow:
    0 30px 70px -20px rgba(69, 79, 140, 0.35),
    0 2px 0 0 rgba(255, 255, 255, 0.8);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 80px;
}
.hero-visual-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.hero-visual-head .tag {
  color: var(--periwinkle);
  font-weight: 600;
}
#hero-map {
  width: 100%;
  height: 340px;
  display: block;
  background: var(--surface-sunken);
}
.hero-map-wrap {
  position: relative;
}
.hero-visual-foot {
  display: flex;
  gap: 36px;
  padding: 18px 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  background: var(--surface-muted);
}
.stat-mini b {
  display: block;
  font-size: 19px;
  color: var(--indigo);
  font-weight: 600;
}
.stat-mini span {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============ map styling — white land, periwinkle sea ============ */
/* CartoDB Positron: land is white/very-light-grey, water is pale blue — */
/* we apply a gentle hue nudge toward periwinkle on the water only via bg */
.leaflet-tile-pane {
  filter: none;
}
/* The container background shows through transparent water areas */
#hero-map,
#demo-map {
  background: var(--map-water);
}
.leaflet-container {
  background: var(--map-water);
}
.demo-map-wrap {
  border-radius: 14px;
  overflow: hidden;
}
.map-sample-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-sample-badge .sw {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.leaflet-popup-content-wrapper {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(69, 79, 140, 0.35);
  border: 1px solid var(--line);
}
.leaflet-popup-tip {
  background: var(--white);
}
.pcard {
  font-family: var(--body);
  min-width: 190px;
}
.pcard .pc-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.pcard h4 {
  font-family: var(--display);
  font-size: 14.5px;
  color: var(--indigo);
  font-weight: 600;
  margin-bottom: 6px;
}
.pcard .pc-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 3px;
}
.pcard .pc-row b {
  color: var(--indigo);
  font-family: var(--mono);
  font-weight: 600;
}
.pcard .pc-btn {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 7px 0;
  border-radius: 8px;
  background: var(--periwinkle);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pcard .pc-btn:hover {
  background: var(--indigo);
}
.pin-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pin-color, var(--periwinkle));
  box-shadow: 0 2px 6px rgba(69, 79, 140, 0.35);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
}
.pin-marker::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--pin-color, var(--periwinkle));
  opacity: 0.6;
  transform: scale(1);
  animation: pinPulse 2.2s infinite;
  pointer-events: none;
}
.pin-marker.is-hover {
  transform: scale(1.45);
  box-shadow: 0 4px 14px rgba(69, 79, 140, 0.5);
}
.pin-marker.is-hover::after {
  animation-play-state: paused;
  opacity: 0;
}
@keyframes pinPulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ============ scroll reveal utility ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal-stagger.in > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in > *:nth-child(1) {
  transition-delay: 0.05s;
}
.reveal-stagger.in > *:nth-child(2) {
  transition-delay: 0.12s;
}
.reveal-stagger.in > *:nth-child(3) {
  transition-delay: 0.19s;
}
.reveal-stagger.in > *:nth-child(4) {
  transition-delay: 0.26s;
}
.reveal-stagger.in > *:nth-child(5) {
  transition-delay: 0.33s;
}
.reveal-stagger.in > *:nth-child(6) {
  transition-delay: 0.4s;
}

/* ============ section shared ============ */
section {
  position: relative;
  padding: 110px 0;
}
.section-head {
  margin-bottom: 60px;
  max-width: 680px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-label {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--periwinkle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
  font-weight: 600;
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--indigo);
}
.section-head p {
  color: var(--text-soft);
  margin-top: 16px;
  font-size: 17px;
}

/* ============ stat strip — solid periwinkle banner ============ */
.stat-strip {
  background: var(--periwinkle);
  padding: 0;
}
.stat-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-cell {
  padding: 48px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.stat-cell:last-child {
  border-right: none;
}
.stat-cell b {
  display: block;
  font-size: 34px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
}
.stat-cell b .unit {
  font-size: 18px;
  color: var(--orange);
  margin-left: 2px;
  display: inline;
}
.stat-cell span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
  display: block;
}

/* ============ capability grid ============ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cap-card {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 34px 30px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.cap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(69, 79, 140, 0.18);
  border-color: var(--periwinkle-soft);
}
.cap-card .icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--periwinkle-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.cap-card .icon {
  width: 24px;
  height: 24px;
  color: var(--indigo);
}
.cap-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
  color: var(--indigo);
}
.cap-card p {
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ============ architecture / pipeline section ============ */
.pipeline {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 50px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
}
.pipe-stage {
  flex: 1;
  padding: 30px 24px;
  position: relative;
  border-right: 1px solid var(--line-soft);
}
.pipe-stage:last-child {
  border-right: none;
}
.pipe-stage .stage-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.pipe-stage .stage-label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 158, 1, 0.5);
  animation: pulseOrange 2s infinite;
}
@keyframes pulseOrange {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 158, 1, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 158, 1, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 158, 1, 0);
  }
}
.pipe-stage h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 9px;
  color: var(--indigo);
}
.pipe-stage p {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.6;
}
.pipe-stage::after {
  display: none;
}

/* ============ coverage section ============ */
.coverage-section {
  background: var(--white);
}
.coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.coverage-visual {
  border-radius: 14px;
  background: var(--paper);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
#coverage-bars .demo-bar-row .lbl {
  width: 80px;
}
.coverage-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.coverage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: padding-left 0.2s ease, opacity 0.2s ease;
}
.coverage-item:hover {
  padding-left: 6px;
  opacity: 0.82;
}
.coverage-item:first-child {
  padding-top: 0;
}
.coverage-item .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--indigo);
}
.coverage-item .name span {
  display: block;
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 4px;
  font-weight: 400;
  font-family: var(--body);
}
.coverage-item .val {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--periwinkle);
  font-weight: 600;
  padding: 5px 12px;
  background: var(--periwinkle-soft);
  border-radius: 20px;
}

/* ============ spark callout ============ */
.spark-band {
  background: var(--white);
  padding: 64px 0 90px;
}
.spark-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--indigo);
  border-radius: 18px;
  padding: 36px 40px;
  text-align: center;
}
.spark-band .spark-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--periwinkle-soft);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.spark-band .spark-eyebrow .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: pulseWhite 2s infinite;
}
@keyframes pulseWhite {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.spark-band h3 {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600;
  color: var(--white);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.3;
}

/* ============ partnership band ============ */
.band {
  background: var(--white);
}
.band-inner {
  text-align: center;
  padding: 0;
}
.band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 680px;
  margin: 0 auto 18px;
  line-height: 1.2;
  color: var(--indigo);
}
.band p {
  color: var(--text-soft);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto 36px;
}

/* ============ demo section ============ */
.demo-section {
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--periwinkle-soft);
  border-radius: 14px;
  padding: 16px 24px;
  margin-bottom: 40px;
}
.demo-banner-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--indigo);
  font-weight: 600;
}
.demo-banner-text .sw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.demo-banner a.req-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--indigo);
  padding: 8px 16px;
  border-radius: 980px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.demo-banner a.req-link:hover {
  background: var(--indigo-deep);
}

.demo-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.demo-tab {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-faint);
  padding: 12px 20px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  background: none;
  border: none;
}
.demo-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--periwinkle);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.demo-tab.active {
  color: var(--indigo);
}
.demo-tab.active::after {
  transform: scaleX(1);
}

.demo-panel {
  display: none;
}
.demo-panel.active {
  display: block;
  animation: riseIn 0.4s ease forwards;
}

.demo-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}
.demo-kpi {
  background: var(--paper);
  border-radius: 14px;
  padding: 22px 22px;
}
.demo-kpi b {
  display: block;
  font-size: 27px;
  font-weight: 600;
  color: var(--indigo);
}
.demo-kpi span {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 5px;
  display: block;
}

.demo-charts {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.demo-chart-card {
  background: var(--paper);
  border-radius: 14px;
  padding: 24px;
}
.demo-chart-card h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 18px;
}
.demo-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.demo-bar-row .lbl {
  width: 120px;
  font-size: 12px;
  color: var(--text-soft);
  flex-shrink: 0;
  font-family: var(--mono);
}
.demo-bar-track {
  flex: 1;
  height: 9px;
  background: rgba(69, 79, 140, 0.08);
  border-radius: 6px;
  overflow: hidden;
}
.demo-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 1s ease;
}
.demo-bar-row .val {
  width: 34px;
  text-align: right;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--indigo);
  font-weight: 600;
  flex-shrink: 0;
}

.demo-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
}
.demo-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.demo-table tbody td {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--indigo);
  border-bottom: 1px solid var(--line-soft);
}
.demo-table tbody tr:last-child td {
  border-bottom: none;
}
.demo-table .stage-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
}
.demo-table .projects-empty {
  text-align: center;
  padding: 40px 18px;
  color: var(--text-faint);
}
.demo-table tr.projects-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.demo-table tr.projects-row:hover {
  background: rgba(130, 169, 208, 0.1);
}
.demo-table tr.row-flash {
  background: var(--periwinkle-soft);
  transition: background 1.2s ease;
}

.demo-view-all {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--periwinkle);
  transition: color 0.2s ease;
}
.demo-view-all:hover {
  color: var(--indigo);
}

/* ============ projects tab — filter bar ============ */
.projects-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 12px;
}
.projects-search {
  flex: 2 1 160px;
  min-width: 0;
  font-family: var(--body);
  font-size: 13px;
  color: var(--indigo);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  outline: none;
}
.projects-search:focus {
  border-color: var(--periwinkle);
}
.projects-select {
  flex: 1 1 140px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--indigo);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
  cursor: pointer;
}
.projects-select:focus {
  border-color: var(--periwinkle);
}
.projects-clear {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  flex-shrink: 0;
}
.projects-clear:hover {
  color: var(--indigo);
  border-color: var(--periwinkle);
}
.projects-count {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-left: auto;
  flex-shrink: 0;
}

/* ============ map legend (shared look for hero + demo map) ============ */
.map-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 0 4px;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-soft);
}
.map-legend-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

#demo-map {
  width: 100%;
  height: 480px;
}

/* ============ footer ============ */
footer {
  padding: 64px 0 36px;
  background: var(--surface-footer);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-brand {
  max-width: 280px;
}
.footer-brand .logo {
  margin-bottom: 14px;
}
.footer-brand p {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.6;
}
.footer-cols {
  display: flex;
  gap: 64px;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--indigo);
  margin-bottom: 12px;
  transition: color 0.2s ease;
  opacity: 0.75;
}
.footer-col a:hover {
  color: var(--periwinkle);
  opacity: 1;
}
.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(69, 79, 140, 0.15);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-soft);
}

/* ======================================================================
     RESPONSIVE — tablet (880px), mobile (640px), small phone (400px)
     ====================================================================== */

@media (max-width: 880px) {
  .wrap {
    padding: 0 24px;
  }
  .nav-inner {
    padding: 14px 20px;
  }
  nav.main-nav.scrolled .nav-inner {
    padding: 11px 20px;
  }
  .nav-links {
    display: none;
  }
  .nav-cta {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .nav-mobile-panel {
    display: flex;
  }

  .logo-mark {
    height: 40px;
  }
  .logo {
    font-size: 16px;
  }

  .hero {
    padding-top: 18px;
  }
  .hero-content {
    padding: 0 20px 48px;
  }
  .hero h1 {
    font-size: clamp(30px, 7vw, 40px);
  }
  .hero p.lede {
    font-size: 16.5px;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero-visual-frame {
    padding: 0 20px;
  }
  .hero-visual-foot {
    gap: 18px 28px;
    flex-wrap: wrap;
    padding: 16px 20px;
  }

  .section-head {
    margin-bottom: 42px;
  }
  .section-head p {
    font-size: 15.5px;
  }

  .cap-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stat-strip .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-cell {
    padding: 32px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .stat-cell b {
    font-size: 26px;
    white-space: nowrap;
  }
  .stat-cell b .unit {
    font-size: 14px;
  }

  .pipeline {
    flex-direction: column;
  }
  .pipe-stage {
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }
  .pipe-stage::after {
    right: 50%;
    top: auto;
    bottom: -1px;
  }

  .coverage-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .band p {
    font-size: 15.5px;
  }

  .footer-grid {
    flex-direction: column;
    gap: 32px;
  }
  .footer-cols {
    gap: 40px;
    width: 100%;
    justify-content: space-between;
  }

  .demo-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .demo-kpi {
    padding: 18px;
  }
  .demo-charts {
    grid-template-columns: 1fr;
  }
  .demo-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
  }
  .demo-tabs {
    gap: 4px;
  }
  .demo-tab {
    padding: 11px 14px;
    font-size: 14px;
  }

  .demo-table {
    font-size: 12px;
  }
  .demo-table thead th,
  .demo-table tbody td {
    padding: 10px 12px;
  }
  .projects-count {
    margin-left: 0;
    width: 100%;
  }

  #hero-map {
    height: 280px;
  }
  #demo-map {
    height: 380px;
  }
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 18px;
  }
  .nav-inner {
    padding: 12px 16px;
  }

  .eyebrow {
    font-size: 10.5px;
    padding: 6px 12px;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.15;
  }
  .hero p.lede {
    font-size: 15px;
    padding: 0 4px;
  }

  .hero-visual-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
  }
  .hero-visual-foot {
    padding: 14px 16px;
    gap: 16px 24px;
  }
  .stat-mini b {
    font-size: 16px;
  }
  .map-sample-badge {
    font-size: 9.5px;
    padding: 5px 9px;
    top: 8px;
    left: 8px;
  }

  .section-head h2 {
    font-size: clamp(22px, 6vw, 28px);
  }
  .section-head p {
    font-size: 14.5px;
  }

  .cap-card {
    padding: 24px 20px;
  }

  .pipe-stage {
    padding: 22px 18px;
  }

  .coverage-item .name {
    font-size: 14.5px;
  }
  .coverage-visual {
    padding: 18px;
  }
  .demo-bar-row .lbl {
    width: 84px;
    font-size: 11px;
  }

  .spark-card {
    padding: 28px 22px;
  }
  .spark-band h3 {
    font-size: 18px;
  }

  .band h2 {
    font-size: clamp(22px, 6vw, 28px);
  }

  .demo-section {
    padding-top: 8px;
  }
  .demo-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .demo-kpi b {
    font-size: 21px;
  }
  .demo-kpi span {
    font-size: 11px;
  }

  .projects-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .projects-search,
  .projects-select,
  .projects-clear {
    width: 100%;
    flex: none;
  }
  .projects-count {
    text-align: left;
  }

  /* Demo table -> stacked cards on small screens: hide the header row and
       lay each row out as a labeled card instead of a horizontally-scrolled grid. */
  .demo-table thead {
    display: none;
  }
  .demo-table,
  .demo-table tbody,
  .demo-table tr {
    display: block;
    width: 100%;
  }
  .demo-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .demo-table tr.projects-empty-row {
    display: block;
  }
  .demo-table td {
    padding: 4px 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .demo-table td:first-child {
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 6px;
    padding-top: 0;
  }
  .demo-table td:before {
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-right: 10px;
    flex-shrink: 0;
    width: 72px;
  }
  .demo-table td:first-child:before {
    content: none;
    width: auto;
    margin: 0;
  }
  .demo-table .projects-empty {
    display: block;
  }

  #hero-map {
    height: 240px;
  }
  #demo-map {
    height: 340px;
  }
  .map-legend {
    gap: 10px 14px;
  }
  .map-legend-item {
    font-size: 10.5px;
  }

  /* Leaflet popups: keep them comfortably inside a narrow viewport and
       make the close button an easy tap target. */
  .leaflet-popup-content {
    margin: 12px 14px;
    width: auto !important;
    max-width: 62vw;
  }
  .pcard {
    min-width: 0;
  }
  .leaflet-popup-close-button {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 18px !important;
  }
  .leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
}

@media (max-width: 400px) {
  .hero-actions {
    max-width: none;
  }
  .demo-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .stat-strip .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .demo-tab {
    padding: 10px 10px;
    font-size: 13px;
  }
}

/* Comfortable tap targets on touch devices regardless of width */
@media (pointer: coarse) {
  .nav-burger {
    width: 40px;
    height: 40px;
  }
  .demo-tab {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .projects-row td {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .demo-view-all {
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Demo colour schemes
   Every surface and text colour in this stylesheet is a token, so a scheme
   only has to redefine the tokens inside the demo section. Stage colours are
   the exception and live in data/themes.js — Leaflet builds inline styles and
   cannot resolve a var().

   --white is redefined here, which reads oddly under a dark scheme. Renaming
   it would touch the whole stylesheet for no visual gain; the name is a wart,
   the behaviour is correct.
   ===================================================================== */

/* No transition on background/color here, deliberately. Transitioning them on
   the scope container left the computed values pinned to the outgoing scheme
   -- switching theme changed data-demo-theme and every token, but the section
   itself never repainted until a reload. It also never looked right anyway:
   the cards, pills and text inside read their tokens with no transition of
   their own, so a fading container just lagged behind its own contents. */

.demo-scope[data-demo-theme="midnight"] {
  --white: #12141d;
  --paper: #12141d;
  --indigo: #e6e8f5;
  --text: #e6e8f5;
  --text-soft: #a6abcb;
  --text-faint: #7b81a8;
  --text-lede: #b9bed9;
  --indigo-deep: #3a4270;
  --periwinkle: #8fb3e0;
  --periwinkle-soft: #24304a;
  --slate: #8b93b5;
  --line: rgba(230, 232, 245, 0.14);
  --line-soft: rgba(230, 232, 245, 0.08);
  --surface-band: #1a1d29;
  --surface-muted: #1a1d29;
  --surface-sunken: #171a25;
  --surface-footer: #12141d;
  --map-water: #223047;
  background: #12141d;
  color: #e6e8f5;
}

.demo-scope[data-demo-theme="ember"] {
  --white: #fdf7f1;
  --paper: #fdf7f1;
  --indigo: #40241a;
  --text: #40241a;
  --text-soft: #7a5443;
  --text-faint: #a5806c;
  --text-lede: #6b4739;
  --indigo-deep: #6b3417;
  --periwinkle: #c2632e;
  --periwinkle-soft: #f6e2d2;
  --slate: #a06f52;
  --line: rgba(64, 36, 26, 0.14);
  --line-soft: rgba(64, 36, 26, 0.07);
  --surface-band: #f7ece2;
  --surface-muted: #f7ece2;
  --surface-sunken: #f3e4d8;
  --surface-footer: #f7ece2;
  --map-water: #e4cdb8;
  background: #fdf7f1;
  color: #40241a;
}

/* Leaflet's tiles are a fixed light raster, so on a dark scheme they are the
   one thing that cannot be themed. Knocking them back stops the map glowing
   like a lightbox in the middle of a dark page. */
.demo-scope[data-demo-theme="midnight"] .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* ============ demo toolbar: tabs + scheme picker ============ */
.demo-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}

.demo-toolbar .demo-tabs {
  margin-bottom: 0;
  border-bottom: none;
}

.theme-picker {
  display: flex;
  gap: 8px;
  padding-bottom: 10px;
}

.theme-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  outline-offset: 2px;
}

.theme-swatch.active {
  border-color: var(--text);
}

.theme-periwinkle { background: linear-gradient(135deg, #82a9d0 50%, #454f8c 50%); }
.theme-midnight   { background: linear-gradient(135deg, #12141d 50%, #8fb3e0 50%); }
.theme-ember      { background: linear-gradient(135deg, #fdf7f1 50%, #c2632e 50%); }

/* ============ unlock gate ============ */
.unlock-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.unlock-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.unlock-input {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  width: 130px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
}

.unlock-input:focus {
  outline: none;
  border-color: var(--periwinkle);
}

.unlock-submit,
.unlock-lock {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--indigo);
  color: var(--white);
  cursor: pointer;
}

.unlock-submit:disabled { opacity: 0.5; cursor: default; }
.unlock-submit:hover:not(:disabled),
.unlock-lock:hover { background: var(--indigo-deep); }

.unlock-lock {
  background: none;
  color: var(--text-soft);
  border: 1px solid var(--line);
}
.unlock-lock:hover { background: none; color: var(--text); }

.unlock-state {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.unlock-meta,
.unlock-error {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
}

.unlock-error { color: #c0392b; }

/* Live banner reads differently on purpose — someone glancing at the screen
   has to be able to tell real data from the sample set. */
.demo-banner.is-live {
  background: var(--indigo);
}
.demo-banner.is-live .demo-banner-text { color: var(--white); }
.demo-banner.is-live .unlock-state { color: var(--white); }
.demo-banner.is-live .unlock-meta { color: rgba(255, 255, 255, 0.7); }
.demo-banner.is-live .unlock-lock {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}
.demo-banner.is-live .unlock-lock:hover { color: #fff; }

.demo-notice {
  font-size: 14px;
  color: var(--text-soft);
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 24px;
}

.demo-map-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 10px;
}

/* ============ project detail drawer ============ */
.projects-detail-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
}
.projects-detail-btn:hover { color: var(--text); border-color: var(--periwinkle); }

.projects-detail-row > td { background: var(--surface-muted); }

.projects-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 28px;
  padding: 6px 2px;
}

.projects-detail dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.projects-detail dd {
  font-size: 14px;
  color: var(--text);
  margin: 2px 0 0;
  word-break: break-word;
}

/* ============ collection run ============
   Reads like the platform's own Pipeline view: a monospaced stage table with
   the same columns and the same status vocabulary, so the demo and the product
   look like one system rather than two. */
.run-intro p {
  color: var(--text-soft);
  max-width: 640px;
  margin: 8px 0 18px;
}

.run-start {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: var(--indigo);
  color: var(--white);
  cursor: pointer;
}
.run-start:disabled { opacity: 0.6; cursor: default; }
.run-start:hover:not(:disabled) { background: var(--indigo-deep); }

.run-error { display: block; margin-top: 10px; font-size: 13px; color: #c0392b; }


.run-stages {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  border-top: 1px solid var(--line);
}

.run-stage-head,
.run-stage {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.6fr 0.6fr 0.6fr;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}

.run-stage-head {
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.run-stage span { color: var(--text-soft); }
.run-stage .rs-name { color: var(--text); font-weight: 500; }
.run-stage.is-running .rs-name { font-weight: 600; }

.rs-status.completed { color: #3fa66b; }
.rs-status.running { color: #e0a227; }
.rs-status.failed { color: #c0392b; }
.rs-fail { color: #c0392b; }

.run-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 26px 0;
}

.run-summary > div {
  background: var(--surface-muted);
  border-radius: 10px;
  padding: 14px 16px;
}

.run-summary b {
  display: block;
  font-size: 22px;
  font-family: var(--display);
  color: var(--text);
}

.run-summary span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* A run returns many rows; scroll them rather than pushing the page to a
   length nobody reads. */
.run-results {
  display: block;
  max-height: 460px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .run-stage-head { display: none; }
  .run-stage {
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
  }
  .demo-toolbar { align-items: flex-start; }
}

/* ============ demo application shell ============
   Mirrors the platform's own layout: a 52px topbar spanning the full width, a
   220px sidebar, and the active view filling the rest. Same proportions as the
   ACC shell, so what a prospect sees here is the shape of what they would get.

   Bounded rather than full-viewport, because this sits inside a marketing page
   that still has a nav above it and a footer below. */
.demo-app {
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 220px 1fr;
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  margin-bottom: 40px;
}

.demo-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: var(--surface-band);
  border-bottom: 1px solid var(--line);
}

.demo-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.demo-brand-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.demo-brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.demo-topbar-stats {
  display: flex;
  margin-left: 8px;
}

.demo-pill {
  display: flex;
  flex-direction: column;
  padding: 4px 14px;
  border-left: 1px solid var(--line);
}

.demo-pill-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.demo-pill-lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

.demo-pill--accent .demo-pill-val { color: var(--orange); }

.demo-topbar-state {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.demo-topbar-state.is-live { color: var(--periwinkle); }

/* ---- sidebar ---- */
.demo-sidebar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-muted);
  border-right: 1px solid var(--line);
}

.demo-sidebar-nav {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 8px;
}

.demo-sidebar-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  padding: 14px 14px 4px;
}

.demo-sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
}

.demo-sidebar-item:hover { color: var(--text); }

.demo-sidebar-item.active {
  color: var(--text);
  background: var(--periwinkle-soft);
  box-shadow: inset 2px 0 0 var(--periwinkle);
}

.demo-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.demo-sidebar-item.active .demo-nav-dot { background: var(--periwinkle); }

.demo-sidebar-footer {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The gate stacks in a 220px column rather than sitting on one line. */
.demo-sidebar-footer .unlock-gate { flex-direction: column; align-items: stretch; gap: 7px; }
.demo-sidebar-footer .unlock-input { width: 100%; }
.demo-sidebar-footer .theme-picker { padding-bottom: 0; }

/* ---- main area ---- */
.demo-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Where the platform puts its status ticker. */
.demo-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 20px;
  font-size: 13px;
  color: var(--text-soft);
  background: var(--periwinkle-soft);
  border-bottom: 1px solid var(--line);
}

.demo-ticker.is-live {
  background: var(--indigo);
  color: var(--white);
}

.demo-ticker.is-live .sw { background: var(--white); }
.demo-ticker .req-link { margin-left: auto; }

.demo-main-body { padding: 20px; }
.demo-main-body .demo-panel { padding: 0; }

@media (max-width: 880px) {
  /* Below the platform's own breakpoint the sidebar stops being a column and
     becomes a scrolling strip, which is the only honest way to keep a 220px
     rail on a phone. */
  .demo-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    min-height: 0;
  }
  .demo-topbar { grid-column: 1; flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .demo-sidebar { grid-column: 1; grid-row: 2; border-right: none; border-bottom: 1px solid var(--line); }
  .demo-sidebar-nav { flex-direction: row; overflow-x: auto; }
  .demo-sidebar-label { display: none; }
  .demo-sidebar-item { width: auto; white-space: nowrap; }
  .demo-sidebar-item.active { box-shadow: inset 0 -2px 0 var(--periwinkle); }
  .demo-sidebar-footer { margin-top: 0; }
  .demo-main { grid-column: 1; grid-row: 3; }
  .demo-main-body { padding: 14px; }
}

/* Collection progress.
   Indeterminate on purpose. The backend returns the whole run at the end, so
   the only thing genuinely known while one is in flight is that it started and
   how long ago. A bar animating through named stages would be inventing
   progress; this says "working" and reports the one real number. */
.run-progress {
  margin-top: 22px;
  max-width: 420px;
}

.run-progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.run-progress-track span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 2px;
  background: var(--periwinkle);
  animation: run-progress-slide 1.35s ease-in-out infinite;
}

@keyframes run-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(363%); }
}

.run-progress-label {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
}

/* Someone who has asked not to see motion still gets the elapsed count. */
@media (prefers-reduced-motion: reduce) {
  .run-progress-track span {
    animation: none;
    width: 100%;
    opacity: 0.45;
  }
}