/* ==========================================================================
   Moot Freight Network — carrier onboarding
   ==========================================================================

   This page is reached from "Freight Solutions" in the site's own nav, so it is
   the first thing a haulier sees after the dark marketing site. It used to be a
   white and blue admin form, which read as a different company; it is now the
   same navy, glass and lime as the homepage and the About page.

   Two things to know before editing.

   The page is chrome-less: moot_premium_is_portal_page() is true here, so
   header.php and footer.php both stand down and this stylesheet owns the whole
   window, background included.

   Every class here is also a hook for assets/js/freight-onboarding.js -- it
   toggles is-active, is-complete, is-selected, is-met, is-medium, is-strong,
   is-done, is-uploading, is-dragover and fo-fields--collapsed, and writes inline
   widths onto #fo-progress-bar and the password meter. Restyle them all you like;
   renaming one silently breaks a step of the form.
   ========================================================================== */

/* The page paints its own background. The !important is still here because it is
   still fighting: main.css, portal.css and signup-onboarding.css all load on this
   URL and all have an opinion about the body. */
body.moot-freight-onboarding-page,
body.page-template-page-freight-signup {
	margin: 0;
	color: #f8fafc !important;
	background: #060b18 !important;
	background-image: none !important;
	color-scheme: dark;
}

body.moot-freight-onboarding-page #main-content.site-main,
body.page-template-page-freight-signup #main-content.site-main {
	max-width: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* Beat global main.css heading/input rules inside onboarding */
.fo h1,
.fo h2,
.fo h3,
.fo h4 {
	color: #f8fafc !important;
	letter-spacing: normal;
}

.fo-card__title {
	font-size: 1.1rem !important;
	margin: 0 0 1rem !important;
}

.fo ul,
.fo ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fo input,
.fo select,
.fo textarea,
.fo button {
	font-family: inherit;
}

.fo {
	--fo-lime: #b8f215;
	--fo-lime-dark: #9ad40a;
	--fo-lime-soft: rgba(184, 242, 21, 0.12);
	--fo-navy: #060b18;
	--fo-surface: rgba(11, 20, 38, 0.62);
	--fo-field: rgba(6, 11, 24, 0.55);
	--fo-text: #f8fafc;
	--fo-label: #cbd5e1;
	--fo-muted: #94a3b8;
	--fo-border: rgba(148, 163, 184, 0.16);
	--fo-ring: rgba(184, 242, 21, 0.26);
	--fo-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
	--fo-radius: 20px;
	/* No header to sit under: the site chrome is hidden on portal pages. */
	min-height: 100vh;
	padding: clamp(2rem, 6vh, 3.5rem) 1.25rem 3rem;
	/* The same two lights as the marketing pages, so the jump from the site to the
	   form is a change of task and not a change of brand. */
	background:
		radial-gradient(70% 55% at 82% -8%, rgba(184, 242, 21, 0.12), transparent 62%),
		radial-gradient(60% 45% at 8% 108%, rgba(123, 132, 255, 0.1), transparent 60%),
		#060b18;
	color: var(--fo-text);
	font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
	/* Native selects, date pickers and scrollbars follow this. Without it the
	   dropdown a country is chosen from opens white on a black page. */
	color-scheme: dark;
}

.fo__shell {
	max-width: 1200px;
	margin: 0 auto;
}

.fo__hero {
	text-align: center;
	margin-bottom: 2.25rem;
}

.fo__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(1.45rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	text-decoration: none;
	margin-bottom: 0.6rem;
}

/* The same glass well the homepage and About icons sit in. */
.fo__brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background:
		radial-gradient(circle at 50% 24%, rgba(184, 242, 21, 0.16), rgba(184, 242, 21, 0.03) 74%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.5));
	box-shadow:
		inset 0 0 0 1px var(--fo-ring),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--fo-lime);
}

/* The visible heading here is the brand lockup -- the h1 is screen-reader only --
   so this line carries the page and is set as a lead rather than as small print. */
.fo__subtitle {
	max-width: 34ch;
	margin: 0 auto 1.5rem;
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	line-height: 1.6;
	color: var(--fo-muted);
}

.fo__trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.fo__trust-badges li {
	padding: 0.45rem 0.95rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--fo-text);
	background: var(--fo-surface);
	border: 1px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(184, 242, 21, 0.22);
	border-radius: 999px;
}

.fo__trust-badges li::before {
	content: '✓ ';
	color: var(--fo-lime);
	font-weight: 800;
}

/* Progress */
.fo__progress-wrap {
	max-width: 1000px;
	margin: 0 auto 1.75rem;
}

.fo__progress-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fo-muted);
}

.fo__progress-meta span:last-child {
	color: var(--fo-lime);
}

.fo__progress-track {
	height: 6px;
	background: rgba(148, 163, 184, 0.18);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 0.85rem;
}

/* The width is written inline by the script; only the paint belongs here. */
.fo__progress-bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--fo-lime-dark), var(--fo-lime));
	border-radius: inherit;
	box-shadow: 0 0 18px rgba(184, 242, 21, 0.35);
	transition: width 0.35s ease;
}

.fo__progress-steps {
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0.25rem;
}

.fo__progress-steps li {
	flex: 1;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	color: #64748b;
	padding-top: 0.45rem;
	border-top: 2px solid rgba(148, 163, 184, 0.14);
	transition: color 0.2s, border-color 0.2s;
}

/* Done steps are dimmed rather than lit, so the eye lands on the step being filled
   in. The script puts is-complete on every step behind the current one and
   is-active on the current one, so is-active is written last and wins. */
.fo__progress-steps li.is-complete {
	color: rgba(184, 242, 21, 0.72);
	border-top-color: rgba(184, 242, 21, 0.38);
}

.fo__progress-steps li.is-active {
	color: var(--fo-lime);
	border-top-color: var(--fo-lime);
}

/* Layout */
.fo__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 1.5rem;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

.fo__main {
	max-width: 1000px;
}

.fo__aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: sticky;
	top: 1.5rem;
}

.fo-card {
	background: var(--fo-surface);
	border: 1px solid var(--fo-border);
	border-radius: var(--fo-radius);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		var(--fo-shadow);
	backdrop-filter: blur(12px);
	padding: 1.75rem;
	margin-bottom: 1rem;
}

.fo-card:last-child {
	margin-bottom: 0;
}

.fo-card__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 700;
}

.fo-card__lead {
	margin: -0.5rem 0 1rem;
	color: var(--fo-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.fo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.1rem;
}

.fo-field--full {
	grid-column: 1 / -1;
}

/* A full-width field sitting directly in a card is a group of its own -- the consent
   boxes after the password fields, the ferry question after fleet size, the routes
   after the question -- and needs the gap a grid row would have given it. Scoped to
   direct children of the card: inside a grid, `--full` fields already get the row
   gap, and this rule would double it. */
.fo-card > .fo-grid + .fo-field--full,
.fo-card > .fo-field--full + .fo-field--full {
	margin-top: 1.35rem;
}

/* Field labels are the bare ones: `<label for="...">`. Every other label in the
   form is a component -- fo-check, fo-upload__trigger, fo-select-card, fo-chip --
   and a plain `.fo-field label` outranks all of their single-class selectors, which
   is how the consent checkboxes ended up stacked above their own text and the
   upload button ended up on one line with its hint. Matching only unclassed labels,
   and only direct children, leaves the components to style themselves. */
.fo-field > label:not([class]),
.fo-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--fo-label);
}

/* Text-entry fields only. `.fo-field input` also matches the consent checkboxes,
   the ferry radios and the hidden file inputs, and stretching a checkbox to 100%
   of a 650px field is why the consent boxes used to sit half a card away from the
   words they belong to: Chrome draws the box inside whatever width it is given. */
.fo-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fo-field select {
	width: 100%;
	padding: 0.85rem 0.95rem;
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 12px;
	background: var(--fo-field);
	font-size: 0.95rem;
	color: var(--fo-text);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.fo-field input::placeholder {
	color: #64748b;
}

/* The list a native select drops down is painted by the platform, not by the
   select, so the options are coloured too or they open as white on white. */
.fo-field select option {
	background: #0b1426;
	color: var(--fo-text);
}

.fo-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.fo-field select:focus {
	outline: none;
	border-color: rgba(184, 242, 21, 0.5);
	background: rgba(6, 11, 24, 0.75);
	box-shadow: 0 0 0 3px rgba(184, 242, 21, 0.16);
}

/* Chrome paints its own near-white over an autofilled field and ignores
   background-color. An inset shadow the size of the field is the only way to keep
   a remembered company name from arriving in a white box on a navy card. */
.fo-field input:-webkit-autofill,
.fo-field input:-webkit-autofill:hover,
.fo-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--fo-text);
	-webkit-box-shadow: 0 0 0 1000px #0b1426 inset;
	caret-color: var(--fo-text);
}

.fo input[type="checkbox"],
.fo input[type="radio"] {
	accent-color: var(--fo-lime);
}

.fo-input-icon {
	position: relative;
}

.fo-input-icon__pin {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.9rem;
	pointer-events: none;
}

.fo-input-icon input {
	padding-left: 2.25rem;
}

.fo-hint {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: var(--fo-muted);
}

.fo-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--fo-label);
}

/* flex: none so the box keeps its size next to a consent line that wraps. */
.fo-check input[type="checkbox"],
.fo-inline-radios input[type="radio"] {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.1rem 0 0;
}

.fo-inline-radios {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.fo-inline-radios label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	color: var(--fo-label);
}

.fo-inline-radios--spaced {
	margin-bottom: 1rem;
}

.fo-fields--collapsed {
	display: none !important;
}

/* Selectable fleet cards */
.fo-select-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.fo-select-card {
	cursor: pointer;
	margin: 0;
}

.fo-select-card__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fo-select-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding: 1rem 0.75rem;
	border: 1px solid var(--fo-border);
	border-radius: 16px;
	background: rgba(6, 11, 24, 0.45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
	min-height: 100px;
}

.fo-select-card:hover .fo-select-card__body {
	transform: translateY(-2px);
	border-color: rgba(184, 242, 21, 0.24);
}

.fo-select-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(184, 242, 21, 0.1) center/24px no-repeat;
	box-shadow: inset 0 0 0 1px rgba(184, 242, 21, 0.2);
}

/* One icon per vehicle type. Eight of the nine used to share a single generic
   truck, so a haulier picking Tankers and a haulier picking Flatbeds tapped the
   same picture -- the grid read as decoration rather than as a choice.

   These are side elevations on a common baseline: same stroke weight, same wheel
   size, same 22px optical height, so the row reads as one set. The stroke colour is
   baked into each data URI and cannot inherit currentColor, so changing the accent
   means changing every URI below. */
.fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15V8h9l3 3v4H3'/%3E%3Ccircle cx='7' cy='17' r='1.5'/%3E%3Ccircle cx='15' cy='17' r='1.5'/%3E%3C/svg%3E");
}

/* Box van: one plain body and a cab. */
.fo-select-card[data-icon="box"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15V8h11v7H2'/%3E%3Cpath d='M13 15v-4h3l3 2.5V15h-6'/%3E%3Ccircle cx='6' cy='17' r='1.5'/%3E%3Ccircle cx='16' cy='17' r='1.5'/%3E%3C/svg%3E");
}

/* Curtain sider: the same body, with the curtain's tensioning straps. */
.fo-select-card[data-icon="curtain"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15V8h11v7H2'/%3E%3Cpath d='M5.7 8v7M9.3 8v7'/%3E%3Cpath d='M13 15v-4h3l3 2.5V15h-6'/%3E%3Ccircle cx='6' cy='17' r='1.5'/%3E%3Ccircle cx='16' cy='17' r='1.5'/%3E%3C/svg%3E");
}

/* Artic: tractor and trailer as two units, with the third axle. */
.fo-select-card[data-icon="artic"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14.5V8h10v6.5H2'/%3E%3Cpath d='M13.5 14.5V9.5h3l2.5 2.5v2.5h-5.5'/%3E%3Ccircle cx='5' cy='16.8' r='1.4'/%3E%3Ccircle cx='9.5' cy='16.8' r='1.4'/%3E%3Ccircle cx='17' cy='16.8' r='1.4'/%3E%3C/svg%3E");
}

/* Refrigerated: box body carrying a snowflake. */
.fo-select-card[data-icon="fridge"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15V8h11v7H2'/%3E%3Cpath d='M7.5 9.6v3.8M5.85 10.55l3.3 1.9M9.15 10.55l-3.3 1.9'/%3E%3Cpath d='M13 15v-4h3l3 2.5V15h-6'/%3E%3Ccircle cx='6' cy='17' r='1.5'/%3E%3Ccircle cx='16' cy='17' r='1.5'/%3E%3C/svg%3E");
}

/* Flatbed: open deck, headboard, no sides. */
.fo-select-card[data-icon="flatbed"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13.5h11'/%3E%3Cpath d='M2 13.5V10'/%3E%3Cpath d='M13 13.5V9.5h3l3 2.5v1.5h-6'/%3E%3Ccircle cx='6' cy='16.5' r='1.5'/%3E%3Ccircle cx='16' cy='16.5' r='1.5'/%3E%3C/svg%3E");
}

/* Low loader: the dropped deck between the axles. */
.fo-select-card[data-icon="lowloader"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11.5h2.5L7 14.5h6'/%3E%3Cpath d='M2 11.5V9'/%3E%3Cpath d='M13 14.5v-4.5h3l3 2.5v2h-6'/%3E%3Ccircle cx='5.5' cy='16.6' r='1.4'/%3E%3Ccircle cx='16' cy='16.6' r='1.4'/%3E%3C/svg%3E");
}

/* Tanker: the cylinder, read end-on by its rounded ends and centre seam. */
.fo-select-card[data-icon="tanker"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8.5' width='11' height='6' rx='3'/%3E%3Cpath d='M2 11.5h11'/%3E%3Cpath d='M13.5 14.5v-4h3l2.5 2.5v1.5h-5.5'/%3E%3Ccircle cx='6' cy='16.8' r='1.4'/%3E%3Ccircle cx='16' cy='16.8' r='1.4'/%3E%3C/svg%3E");
}

/* Container: the box itself, corrugated, on no particular vehicle. */
.fo-select-card[data-icon="container"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='9' rx='1'/%3E%3Cpath d='M8 7.5v9M12 7.5v9M16 7.5v9'/%3E%3C/svg%3E");
}

/* Other: a body with room for something else. */
.fo-select-card[data-icon="other"] .fo-select-card__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f215' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6.5' width='16' height='11' rx='2'/%3E%3Cpath d='M12 10v4M10 12h4'/%3E%3C/svg%3E");
}

.fo-select-card__label {
	font-size: 0.82rem;
	font-weight: 600;
	text-align: center;
	color: var(--fo-label);
}

.fo-select-card__input:checked + .fo-select-card__body,
.fo-select-card.is-selected .fo-select-card__body {
	border-color: rgba(184, 242, 21, 0.45);
	background: rgba(184, 242, 21, 0.08);
	box-shadow:
		inset 0 0 0 1px rgba(184, 242, 21, 0.3),
		0 10px 26px rgba(184, 242, 21, 0.12);
}

.fo-select-card__input:checked + .fo-select-card__body .fo-select-card__label,
.fo-select-card.is-selected .fo-select-card__label {
	color: var(--fo-lime);
}

/* Region chips */
.fo-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.fo-chip {
	cursor: pointer;
	margin: 0;
}

.fo-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fo-chip span {
	display: inline-block;
	padding: 0.55rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--fo-border);
	background: rgba(6, 11, 24, 0.45);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fo-label);
	transition: all 0.2s;
}

.fo-chip:hover span {
	border-color: rgba(184, 242, 21, 0.28);
	color: var(--fo-text);
}

.fo-chip input:checked + span {
	background: var(--fo-lime);
	border-color: var(--fo-lime);
	color: #06210b;
}

/* A checked chip has to survive keyboard focus being elsewhere, so the ring is
   drawn on focus-visible rather than on focus. */
.fo-chip input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(184, 242, 21, 0.24);
}

/* Upload */
.fo-upload {
	position: relative;
	border: 1px dashed rgba(184, 242, 21, 0.28);
	border-radius: 14px;
	padding: 1rem;
	background: rgba(6, 11, 24, 0.4);
}

.fo-upload.is-uploading {
	opacity: 0.85;
}

.fo-upload.is-done {
	border-color: rgba(184, 242, 21, 0.6);
	border-style: solid;
	background: rgba(184, 242, 21, 0.08);
}

.fo-upload__input {
	position: absolute;
	left: 0;
	top: 0;
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: 0;
}

.fo-upload__trigger {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	cursor: pointer;
	margin: 0;
}

.fo-upload__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--fo-lime-soft);
	box-shadow: inset 0 0 0 1px rgba(184, 242, 21, 0.24);
	color: var(--fo-lime);
	font-size: 1rem;
	font-weight: 700;
}

.fo-upload__btn {
	display: inline-flex;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--fo-border);
	border-radius: 999px;
	background: rgba(6, 11, 24, 0.6);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fo-text);
	cursor: pointer;
}

.fo-upload__hint {
	font-size: 0.78rem;
	color: var(--fo-muted);
}

.fo-upload__trigger:hover .fo-upload__btn {
	border-color: rgba(184, 242, 21, 0.4);
	color: var(--fo-lime);
}

.fo-upload__meta {
	font-size: 0.82rem;
	color: var(--fo-muted);
	margin-top: 0.65rem;
}

.fo-upload__progress {
	display: block;
	margin-top: 0.35rem;
	font-weight: 600;
	color: var(--fo-lime);
}

.fo-upload__link {
	display: inline-block;
	margin-top: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--fo-lime);
	cursor: pointer;
	text-decoration: underline;
}

.fo-upload.is-dragover {
	border-color: var(--fo-lime);
	background: rgba(184, 242, 21, 0.12);
}

.fo-compliance-block {
	padding-top: 1rem;
	margin-top: 1rem;
	border-top: 1px solid var(--fo-border);
}

.fo-compliance-block:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.fo-compliance-block h3 {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

/* Password. Weak and medium keep their warning colours -- they are telling the
   user something, not decorating -- and only "strong" is brought onto the brand. */
.fo-password-meter {
	height: 5px;
	background: rgba(148, 163, 184, 0.18);
	border-radius: 999px;
	margin-top: 0.5rem;
	overflow: hidden;
}

.fo-password-meter span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: #ef4444;
	transition: width 0.2s, background 0.2s;
}

.fo-password-meter span.is-medium {
	background: #f59e0b;
}

.fo-password-meter span.is-strong {
	background: var(--fo-lime);
}

.fo-password-reqs {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--fo-muted);
}

.fo-password-reqs li.is-met {
	color: var(--fo-lime);
}

.fo-password-reqs li.is-met::before {
	content: '✓ ';
}

/* Summary & benefits */
.fo-summary,
.fo-benefits {
	background: var(--fo-surface);
	border: 1px solid var(--fo-border);
	border-radius: var(--fo-radius);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		var(--fo-shadow);
	backdrop-filter: blur(12px);
	padding: 1.35rem;
}

.fo-summary h3,
.fo-benefits h3 {
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

.fo-summary dl {
	margin: 0;
}

.fo-summary dl > div {
	margin-bottom: 0.85rem;
}

.fo-summary dt {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fo-lime);
	margin-bottom: 0.15rem;
}

.fo-summary dd {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--fo-text);
}

.fo-benefits ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fo-benefits li {
	font-size: 0.88rem;
	color: var(--fo-label);
	padding: 0.35rem 0;
}

.fo-benefits li::before {
	content: '✓ ';
	color: var(--fo-lime);
	font-weight: 700;
}

/* Actions */
.fo__actions {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fo-border);
}

#freight-onboarding-submit {
	min-width: 11rem;
}

.fo-btn {
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
}

/* The same lime pill as Get Started on the marketing site: dark ink on lime, not
   white on blue. */
.fo-btn--primary {
	background: var(--fo-lime);
	color: #06210b;
	box-shadow: 0 14px 30px rgba(184, 242, 21, 0.22);
}

.fo-btn--primary:hover {
	background: #c7ff2b;
	transform: translateY(-1px);
}

.fo-btn--ghost {
	background: rgba(6, 11, 24, 0.5);
	border-color: var(--fo-border);
	color: var(--fo-label);
}

.fo-btn--ghost:hover {
	border-color: rgba(184, 242, 21, 0.35);
	color: var(--fo-text);
}

.fo-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.fo-alert {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(248, 113, 113, 0.32);
	color: #fca5a5;
}

.fo-alert.is-success {
	background: rgba(184, 242, 21, 0.1);
	border-color: rgba(184, 242, 21, 0.32);
	color: var(--fo-lime);
}

.fo__footer {
	text-align: center;
	margin-top: 1.5rem;
	color: var(--fo-muted);
	font-size: 0.92rem;
}

.fo__footer a {
	color: var(--fo-lime);
	font-weight: 700;
	text-decoration: none;
}

/* Success screen */
.fo-success__card {
	text-align: center;
	background: var(--fo-surface);
	border: 1px solid rgba(184, 242, 21, 0.22);
	border-radius: 28px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		var(--fo-shadow);
	backdrop-filter: blur(12px);
	padding: 2.75rem 2rem;
	max-width: 640px;
	margin: 0 auto;
}

.fo-success__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--fo-lime-soft);
	box-shadow: inset 0 0 0 1px rgba(184, 242, 21, 0.32);
	color: var(--fo-lime);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 64px;
}

.fo-success__review {
	display: inline-block;
	margin: 1.25rem 0;
	padding: 0.85rem 1.25rem;
	background: rgba(6, 11, 24, 0.5);
	border: 1px solid var(--fo-border);
	border-radius: 12px;
	color: var(--fo-label);
}

.fo-success__steps {
	text-align: left;
	max-width: 280px;
	margin: 1rem auto 1.5rem;
	padding-left: 1.25rem;
	color: var(--fo-label);
}

/* Places dropdown */
.fo-places-dropdown {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	list-style: none;
	margin: 0;
	padding: 0.35rem 0;
	background: #0b1426;
	border: 1px solid var(--fo-border);
	border-radius: 12px;
	box-shadow: var(--fo-shadow);
	max-height: 220px;
	overflow: auto;
}

.fo-places-dropdown li button {
	width: 100%;
	text-align: left;
	padding: 0.65rem 0.9rem;
	border: 0;
	background: transparent;
	font-size: 0.88rem;
	color: var(--fo-text);
	cursor: pointer;
}

.fo-places-dropdown li button:hover,
.fo-places-dropdown li.is-active button {
	background: rgba(184, 242, 21, 0.12);
	color: var(--fo-lime);
}

.fo-field--places {
	position: relative;
}

@media (max-width: 1024px) {
	.fo__layout {
		grid-template-columns: 1fr;
	}

	.fo__aside {
		position: static;
		order: -1;
	}

	.fo-summary {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem 1rem;
	}

	.fo-summary dl {
		display: contents;
	}

	.fo-benefits {
		display: none;
	}
}

@media (max-width: 720px) {
	.fo {
		padding: 1.5rem 1rem 2rem;
	}

	.fo-card {
		padding: 1.25rem;
	}

	.fo__progress-steps li {
		font-size: 0.62rem;
	}

	.fo-grid,
	.fo-select-grid {
		grid-template-columns: 1fr;
	}

	.fo-select-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fo__actions {
		flex-direction: column-reverse;
	}

	.fo-btn {
		width: 100%;
	}

	.fo-summary {
		grid-template-columns: 1fr;
	}

	/* On a phone the summary stacks into six rows of em dashes, so above the form it
	   is a screenful of nothing between the hero and the first question. It goes
	   below, where it is a recap of what has been answered. */
	.fo__aside {
		order: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fo-select-card:hover .fo-select-card__body,
	.fo-btn--primary:hover {
		transform: none;
	}
}