/* Pilot Gig Planner landing site (pilot_gig_planner.landing). Same brand as the app: harbour
   ink and spray green, Barlow Condensed for headings and Barlow for text (SPEC section 8,
   "Look and feel"). The hero is the one bold thing: a gig on dark water with a seat open. */

@font-face {
	font-family: "Barlow";
	font-weight: 400;
	font-display: swap;
	src: url("../vendor/fonts/barlow-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow";
	font-weight: 600;
	font-display: swap;
	src: url("../vendor/fonts/barlow-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Barlow Condensed";
	font-weight: 700;
	font-display: swap;
	src: url("../vendor/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

:root {
	--ink: #0f2a3a;
	--sea: #1d4659;
	--spray: #6bd69b;
	--green: #137a4c;
	--page: #f3f7f5;
	--surface: #ffffff;
	--text: #17303d;
	--muted: #4d6470;
	--line: #d5e1dc;
	--open: #d98a3d; /* the app's "seats open" orange */
	--display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--body: "Barlow", system-ui, sans-serif;
	--gutter: clamp(1rem, 4vw, 3rem);
	--measure: 36rem;
	color-scheme: light;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font: 400 1.0625rem/1.55 var(--body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

a {
	color: var(--green);
	text-underline-offset: 0.15em;
}

:focus-visible {
	outline: 3px solid var(--spray);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --- Header and hero: one dark band ---------------------------------------------------------- */

.top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem var(--gutter);
	background: var(--ink);
	color: #ffffff;
}

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #ffffff;
	text-decoration: none;
	font: 700 1.4rem/1 var(--display);
}

.top nav {
	display: flex;
	gap: 1.25rem;
	align-items: center;
}

.top nav a {
	color: #d7e6ee;
	text-decoration: none;
	font-weight: 600;
}

.top nav a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.top nav .top-login {
	padding: 0.4rem 0.9rem;
	border: 1.5px solid var(--spray);
	border-radius: 999px;
	color: #ffffff;
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
	grid-template-areas:
		"text login"
		"figure figure";
	gap: 2.5rem var(--gutter);
	padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) 3rem;
	background: var(--ink);
	color: #ffffff;
}

.hero-text {
	grid-area: text;
	align-self: end;
}

.hero h1 {
	font-size: clamp(3.2rem, 9vw, 7.5rem);
	line-height: 0.92;
	letter-spacing: -0.01em;
	max-width: 11ch;
}

.lede {
	max-width: var(--measure);
	margin: 1.5rem 0 0;
	font-size: 1.25rem;
	color: #d7e6ee;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 2rem 0 0;
}

.button {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: 10px;
	background: var(--spray);
	color: var(--ink);
	font: 600 1.05rem/1.2 var(--body);
	text-decoration: none;
	cursor: pointer;
}

.button:hover {
	background: #86e0ae;
}

.quiet {
	color: #ffffff;
	font-weight: 600;
}

.login-card {
	grid-area: login;
	align-self: end;
	padding: 1.5rem;
	border-radius: 14px;
	background: var(--sea);
}

.login-card h2 {
	font-size: 1.9rem;
}

.login-card p {
	margin: 0.5rem 0 1rem;
	color: #d7e6ee;
	font-size: 0.95rem;
}

.login-card label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

input,
textarea {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1.5px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
}

.login-card input {
	border-color: transparent;
}

.login-card button {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.75rem;
	border: 0;
	border-radius: 8px;
	background: var(--spray);
	color: var(--ink);
	font: 600 1.05rem/1.2 var(--body);
	cursor: pointer;
}

.hero-figure {
	grid-area: figure;
	margin: 0;
}

.hero-figure figcaption {
	margin-top: 0.75rem;
	color: #a9c4d1;
	font-size: 0.95rem;
}

/* The gig: white hull and spray-green oars on the dark water, the open seat in the app's
   "seats open" orange. */
.hero-gig {
	width: 100%;
	height: auto;
	overflow: visible;
}

.hero-gig .wake path {
	stroke: #2c5a70;
	stroke-width: 3;
	stroke-linecap: round;
}

.hero-gig .oars path {
	stroke: var(--spray);
	stroke-width: 5;
	stroke-linecap: round;
}

.hero-gig .oars rect {
	fill: var(--spray);
}

.hero-gig .oars .oar-idle path,
.hero-gig .oars .oar-idle rect {
	stroke: #3d6a80;
	fill: #3d6a80;
}

.hero-gig .hull {
	fill: #f3f7f5;
}

.hero-gig .gunwale {
	fill: none;
	stroke: var(--spray);
	stroke-width: 5;
	stroke-linejoin: round;
}

/* The inner edge of the gunwale, and the decking behind the cox. */
.hero-gig .inwale {
	fill: none;
	stroke: #9fd9b8;
	stroke-width: 2;
}

.hero-gig .stern-deck {
	fill: #dfe9e4;
}

.hero-gig .rudder {
	fill: var(--spray);
}

.hero-gig .thwarts path {
	stroke: #c9d8d2;
	stroke-width: 6;
}

.hero-gig text {
	font: 700 17px var(--display);
	text-anchor: middle;
	letter-spacing: 0.02em;
}

.hero-gig .rower circle,
.hero-gig .cox rect {
	fill: var(--ink);
}

.hero-gig .rower text,
.hero-gig .cox text {
	fill: #ffffff;
}

.hero-gig .open-seat circle {
	fill: #fbe9db;
	stroke: var(--open);
	stroke-width: 3;
	stroke-dasharray: 6 5;
}

.hero-gig .open-seat text {
	fill: #8a4513;
}

@media (prefers-reduced-motion: no-preference) {
	/* The one moving thing: the open seat gently asks to be filled. */
	.hero-gig .open-seat circle {
		animation: beckon 2.4s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	@keyframes beckon {
		50% {
			transform: scale(1.12);
		}
	}
}

/* --- Features -------------------------------------------------------------------------------- */

.how,
.roles {
	padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0;
	max-width: 80rem;
	margin: 0 auto;
}

.section-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--ink);
	margin-bottom: 2.5rem;
}

/* --- Roles ----------------------------------------------------------------------------------- */

.role-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem var(--gutter);
}

.role-columns h3 {
	font-size: 1.6rem;
	color: var(--ink);
	padding-top: 0.75rem;
	border-top: 4px solid var(--spray);
}

.role-columns ul {
	margin: 0.75rem 0 0;
	padding-left: 1.1rem;
}

.role-columns li {
	margin-bottom: 0.4rem;
}

/* --- Register interest ------------------------------------------------------------------------ */

.interest {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 2rem var(--gutter);
	margin-top: clamp(3rem, 7vw, 5.5rem);
	padding: clamp(3rem, 7vw, 5rem) var(--gutter);
	background: var(--ink);
	color: #ffffff;
}

.interest h2 {
	font-size: clamp(2.6rem, 6vw, 4.5rem);
}

.interest-intro p {
	max-width: 30rem;
	color: #d7e6ee;
	font-size: 1.15rem;
}

.interest-form {
	padding: 1.75rem;
	border-radius: 14px;
	background: var(--surface);
	color: var(--text);
}

.interest-form > label,
.interest-form legend {
	display: block;
	margin: 1rem 0 0.3rem;
	font-weight: 600;
}

.interest-form > label:first-of-type {
	margin-top: 0;
}

.interest-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.optional {
	font-weight: 400;
	color: var(--muted);
}

.sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.size {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.size input {
	width: auto;
	margin: 0;
	accent-color: var(--green);
}

.size:has(input:checked) {
	border-color: var(--green);
	background: #e3f5ea;
}

.interest-form .button {
	margin-top: 1.25rem;
}

.form-error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: #fde8e8;
	color: #8a1c1c;
}

/* Bots fill in every field; people never see this one. */
.leave-empty {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Small pages (find your club, thanks, not found) ---------------------------------------- */

.plain {
	max-width: 40rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
}

.plain h1 {
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	color: var(--ink);
	margin-bottom: 1rem;
}

.club-choices {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: grid;
	gap: 0.75rem;
}

.club-choices a {
	display: block;
	padding: 1rem 1.25rem;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	color: var(--ink);
	font: 700 1.5rem/1.1 var(--display);
	text-decoration: none;
}

.club-choices a:hover {
	border-color: var(--green);
}

.club-choices small {
	display: block;
	margin-top: 0.25rem;
	font: 400 0.95rem/1.4 var(--body);
	color: var(--muted);
}

.plain .retry {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.plain .retry button {
	flex: none;
	padding: 0 1.2rem;
	border: 0;
	border-radius: 8px;
	background: var(--ink);
	color: #ffffff;
	font: 600 1rem var(--body);
	cursor: pointer;
}

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

.foot {
	padding: 2rem var(--gutter) 2.5rem;
	background: var(--ink);
	border-top: 1px solid #23465a;
	color: #a9c4d1;
	font-size: 0.9rem;
}

.foot p {
	margin: 0 0 0.5rem;
	max-width: 60rem;
}

.foot a {
	color: #ffffff;
}

/* --- Narrow screens -------------------------------------------------------------------------- */

@media (max-width: 52rem) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"text"
			"figure"
			"login";
	}

	.top nav > a:not(.top-login) {
		display: none;
	}

	/* Too small to read at full length: show the middle of the boat, the rowers and the
	   open seat, larger. */
	.hero-figure {
		overflow: hidden;
		margin: 0 calc(var(--gutter) * -1);
		padding: 0 var(--gutter);
	}

	.hero-gig {
		width: 190%;
		margin-left: -48%;
	}

	.interest,
	.role-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

.others-title {
	margin: 2.5rem 0 0;
	font-size: 1.8rem;
	color: var(--ink);
}


/* Tools in the header: a small menu (SPEC 14). Stays on phones, beside Log in. */
.top-menu {
	position: relative;
}

.top-menu > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	color: #d7e6ee;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.top-menu > summary::-webkit-details-marker {
	display: none;
}

.top-menu > summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.top-menu[open] > summary::after {
	margin-top: 0.2rem;
	transform: rotate(225deg);
}

.top-menu > summary:hover {
	color: #ffffff;
}

.top-menu-panel {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 10;
	width: min(19rem, calc(100vw - 2rem));
	padding: 0.5rem;
	border-radius: 12px;
	background: var(--surface);
	box-shadow: 0 12px 32px rgb(15 42 58 / 0.25);
}

.top nav .top-menu-panel a {
	display: block;
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	color: var(--text);
	font-weight: 400;
}

.top nav .top-menu-panel a:hover {
	background: #eef6f1;
	color: var(--text);
	text-decoration: none;
}

.top-menu-panel strong {
	display: block;
	font-weight: 600;
}

.top-menu-panel span {
	font-size: 0.9rem;
	color: var(--muted);
}

/* A tool on the landing site: the app's calculator styles (split_calculator.css) read the
   --gp-* tokens, set here from the landing site's own, plus plain form controls. */
.tool-page {
	--gp-display: var(--display);
	--gp-ink: var(--ink);
	--gp-line: var(--line);
	--gp-muted: var(--muted);
	--gp-text: var(--text);
	--gp-surface: var(--surface);
	--gp-surface-2: #e8f0ec;
	--gp-select: var(--ink);
	--gp-on-select: #ffffff;
	--gp-radius: 12px;
	--pico-muted-border-color: var(--line);
	max-width: 72rem;
	margin: 0 auto;
	padding: 2rem var(--gutter) 3rem;
}

.tool-page h1 {
	margin: 0 0 0.5rem;
	font: 700 clamp(2.4rem, 6vw, 3.4rem) / 1 var(--display);
	color: var(--ink);
}

.tool-page h2 {
	font: 700 1.8rem / 1.1 var(--display);
	color: var(--ink);
}

.tool-page input,
.tool-page select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #b8cbc3;
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
}

.tool-page label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
}

.tool-page fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.tool-page button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.tool-page .muted {
	color: var(--muted);
}

/* On narrow screens the Tools menu spans the screen under the header. */
@media (max-width: 52rem) {
	.top-menu {
		position: static;
	}

	.top-menu-panel {
		top: calc(100% - 0.5rem);
		left: var(--gutter);
		right: var(--gutter);
		width: auto;
	}
}

/* --- New this season --------------------------------------------------------------------------- */

.new-season {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	max-width: 80rem;
	margin: -1.5rem auto 0;
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
	background: var(--surface);
	box-shadow: 0 8px 24px rgb(15 42 58 / 0.12);
}

@media (min-width: 82rem) {
	.new-season {
		margin-inline: auto;
	}
}

@media (max-width: 82rem) {
	.new-season {
		margin-inline: var(--gutter);
	}
}

.new-season h2 {
	margin: 0;
	font: 700 1.5rem/1.1 var(--display);
	color: var(--ink);
}

.new-season ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.new-season a {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border: 1px solid #b8dcc8;
	border-radius: 999px;
	background: #eef6f1;
	color: var(--ink);
	font-size: 0.95rem;
	text-decoration: none;
}

.new-season a:hover {
	border-color: var(--green);
}

.hero-members {
	max-width: var(--measure);
	margin: 0.75rem 0 0;
	color: #b9d0c5;
}

.hero-members a {
	color: #ffffff;
}

/* --- How it works: the walkthroughs ------------------------------------------------------------ */

.how-intro {
	max-width: 44rem;
	margin: -1.5rem 0 2rem;
	color: var(--muted);
}

.walk-kicker {
	margin: 0 0 0.25rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--green);
}

.walk-panel {
	margin-bottom: 3rem;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: 16px;
	background: var(--surface);
}

.walk-head h3 {
	margin: 0 0 0.5rem;
	font: 700 clamp(1.8rem, 3.5vw, 2.3rem) / 1.1 var(--display);
	color: var(--ink);
}

.walk-head p:last-child {
	max-width: 44rem;
	margin: 0 0 1.5rem;
	color: var(--muted);
}

.walk-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.walk-step {
	margin-bottom: 2rem;
}

.walk-step-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text);
}

.walk-n {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--ink);
	color: var(--spray);
	font: 700 1.1rem/1 var(--display);
}

.walk-step-text {
	max-width: 40rem;
	margin: 0 0 1rem 2.75rem;
}

.walk-shot {
	margin: 0;
}

.walk-shot img {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	box-shadow: 0 6px 20px rgb(15 42 58 / 0.08);
}

.walk-shot-phone img {
	width: auto;
	max-height: 40rem;
	margin-inline: auto;
	border: 8px solid var(--ink);
	border-radius: 28px;
}

/* Tabs, once landing.js is running: pills that wrap onto a second line on narrow screens
   rather than scrolling sideways. */
.walk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.walk-tabs[hidden] {
	display: none;
}

.walk-tabs [role="tab"] {
	min-height: 2.75rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid #b8cbc3;
	border-radius: 14px;
	background: var(--surface);
	color: var(--text);
	font: 600 1rem/1.25 var(--body);
	text-align: left;
	cursor: pointer;
}

.walk-tabs [role="tab"]:hover {
	border-color: var(--green);
}

.walk-tabs [aria-selected="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: #ffffff;
}

.walk-tab-label,
.walk-tab-who {
	display: block;
}

.walk-tab-who {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--muted);
}

.walk-tabs [aria-selected="true"] .walk-tab-who {
	color: #b9d0c5;
}

.is-live .walk-step {
	margin: 0 0 0.35rem;
}

.walk-step-button {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.walk-step-button:hover {
	background: #f3f7f5;
}

.is-current .walk-step-button {
	border-color: #b8dcc8;
	background: #eef6f1;
}

.walk-step:not(.is-current) .walk-n {
	background: var(--line);
	color: var(--text);
}

.is-live .walk-step:not(.is-current) .walk-step-text,
.is-live .walk-step:not(.is-current) .walk-shot {
	display: none;
}

.is-live .walk-step-text {
	margin: 0.4rem 0 0.75rem 3.5rem;
}

.walk-nav {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
}

.walk-nav button {
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid #b8cbc3;
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font: 600 0.95rem/1.2 var(--body);
	cursor: pointer;
}

.walk-nav .walk-next {
	border-color: var(--ink);
	background: var(--ink);
	color: #ffffff;
}

.walk-nav button:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Wide screens: the steps on the left, the current screenshot beside them. */
@media (min-width: 56rem) {
	.is-live .walk-panel:not([hidden]) {
		display: grid;
		grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr);
		grid-template-areas:
			"head head"
			"steps stage";
		gap: 0 2.5rem;
	}

	.is-live .walk-head {
		grid-area: head;
	}

	.is-live .walk-steps {
		grid-area: steps;
	}

	.is-live .walk-stage {
		grid-area: stage;
	}

	.is-live .walk-stage .walk-shot-phone img {
		max-height: 34rem;
	}
}

@media (max-width: 56rem) {
	.walk-stage .walk-nav {
		display: none;
	}

	.is-live .walk-step-text,
	.is-live .walk-shot,
	.walk-step .walk-nav {
		margin-left: 0;
	}

	.walk-step-text {
		margin-left: 0;
	}

	.walk-shot-phone img {
		max-height: 32rem;
	}
}

/* --- Tools band --------------------------------------------------------------------------------- */

.tools-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	max-width: 80rem;
	margin: clamp(3rem, 7vw, 5rem) auto 0;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: 18px;
	background: var(--sea);
	color: #ffffff;
}

@media (max-width: 82rem) {
	.tools-band {
		margin-inline: var(--gutter);
	}
}

.tools-band-text {
	flex: 999 1 26rem;
	min-width: 0;
}

.tools-band .walk-kicker {
	color: var(--spray);
}

.tools-band h2 {
	margin: 0 0 0.5rem;
	font: 700 clamp(2rem, 4vw, 2.6rem) / 1.1 var(--display);
}

.tools-band p {
	max-width: 36rem;
	color: #d7e6ee;
}

.tools-band-zones {
	flex: 1 1 16rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tools-band-zones li {
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	color: #ffffff;
	font-size: 0.95rem;
}

.tools-band-zones strong {
	display: inline-block;
	width: 2.75rem;
	font: 700 1.15rem/1 var(--display);
}

.tools-band-zones [data-zone="ut3"] { background: #4f6878; }
.tools-band-zones [data-zone="ut2"] { background: #2d6fa8; }
.tools-band-zones [data-zone="ut1"] { background: #137a4c; }
.tools-band-zones [data-zone="at"] { background: #8a5c12; }
.tools-band-zones [data-zone="tr"] { background: #a8501e; }
.tools-band-zones [data-zone="ac"] { background: #a13a33; }