/**
 * Moot Homepage — cinematic midnight navy product experience
 * Local frontend only. Scene motion: transforms + opacity.
 */

/* The homepage's palette is declared on the page as well as on :root, and that is
   load-bearing rather than belt and braces. assets/css/moot-driver-theme.css is the
   portal chrome and it sets --moot-lime: #0f766e on :root site-wide, so on the
   homepage every var(--moot-lime) resolved to portal teal: the audience headings,
   the ticks, the Send a Delivery button, the platform preview icons. The hero looked
   right only because it re-declares the token on itself. A custom property resolves
   from the nearest ancestor that declares it, so naming the page here beats :root
   whatever order the stylesheets load in -- and it beats it for the aliases below
   too, which resolve against whichever element declares them.
   This file is enqueued on the front page only, so nothing else sees it. */
:root,
body.moot-front-page,
.moot-home-v2 {
	--moot-navy: #060b18;
	--moot-navy-elevated: #0b1426;
	--moot-navy-soft: #111c33;
	--moot-lime: #b8f215;
	--moot-lime-dark: #9ad40a;
	--moot-lime-glow: rgba(184, 242, 21, 0.28);
	--moot-teal: #14b8a6;
	--moot-teal-soft: #2dd4bf;
	--moot-purple: #8b5cf6;
	--moot-purple-deep: #7c3aed;
	/* The logo mark's own violet is #2e3dfc, which only reaches 2.9:1 against this
	   page's near-black. This is that hue lifted to a readable 6:1. */
	--moot-violet: #7b84ff;
	--moot-blue: #b8f215;
	--moot-muted: #94a3b8;
	--moot-border: rgba(148, 163, 184, 0.16);
	--moot-bg: #060b18;
	--moot-green: #b8f215;
	--moot-purple-soft: rgba(139, 92, 246, 0.14);
	--moot-purple-gradient: linear-gradient(135deg, #d4ff4a 0%, #b8f215 45%, #9ad40a 100%);
	--moot-soft: #111c33;
	--mh-blue: var(--moot-lime);
	--mh-navy: var(--moot-navy);
	--mh-text: #f8fafc;
	--mh-muted: var(--moot-muted);
	--mh-border: var(--moot-border);
	--mh-soft-blue: rgba(184, 242, 21, 0.12);
	--mh-soft-green: rgba(184, 242, 21, 0.08);
	--mh-success: var(--moot-lime);
	--mh-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	--mh-radius-card: 22px;
	--mh-radius-btn: 999px;
	--mh-radius-panel: 28px;
	--mh-shell: min(1200px, calc(100% - 2.5rem));
	--mh-hero-max: calc(1440px + 2rem);
	--mh-hero-pad: clamp(1.25rem, 4vw, 3rem);
	--mh-hero-content: 680px;
	--mh-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mh-duration: 900ms;
	--mh-glass: rgba(11, 20, 38, 0.62);
	--mh-glass-border: rgba(184, 242, 21, 0.14);
}

body.moot-front-page {
	background: var(--moot-navy);
	background-attachment: scroll;
	color: var(--mh-text);
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	overflow-x: hidden;
}

body.moot-front-page .site-main {
	padding: 0;
	max-width: none;
}

.moot-home-v2 {
	width: 100%;
	max-width: none;
	color: var(--mh-text);
}

/* Header — dark translucent navy, sitting on the hero's own darkness rather than
   covering it. It goes near-solid once the page scrolls past the hero, where there
   is no longer a graded plate underneath to blend into. */
body.moot-front-page .site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: transparent;
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: box-shadow 250ms ease, background 250ms ease, border-color 250ms ease;
}

body.moot-front-page .site-header.is-scrolled {
	background: rgba(6, 11, 24, 0.94);
	border-bottom-color: rgba(148, 163, 184, 0.14);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
}

body.moot-front-page .site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	max-width: none;
	width: 100%;
	min-height: 84px;
	padding: 0.65rem 6vw;
	gap: 1.5rem;
}

body.moot-front-page .site-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	flex-shrink: 0;
}

body.moot-front-page .site-brand__tagline {
	margin: 0;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(184, 242, 21, 0.7);
	line-height: 1.2;
}

body.moot-front-page .site-header.is-scrolled .site-brand__tagline {
	color: rgba(184, 242, 21, 0.7);
}

body.moot-front-page .site-header__inner .site-logo,
body.moot-front-page .site-header__inner .moot-logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	line-height: 0;
	margin-right: 0;
}

body.moot-front-page .site-header .moot-brand-logo__img {
	display: block;
	width: auto;
	height: 36px;
	max-height: 38px;
	max-width: 160px;
	object-fit: contain;
	/* Same white logo treatment as homepage footer */
	filter: brightness(0) invert(1);
}

body.moot-front-page .primary-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

body.moot-front-page .nav-menu,
body.moot-front-page .primary-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.moot-front-page .primary-nav__list > li,
body.moot-front-page .nav-menu > li {
	flex-shrink: 0;
}

/* Soft white, not lime. A whole navigation bar set in brand lime shouts as loudly as
   the Get Started button beside it, so nothing in the header reads as the primary
   action; lime is kept for the hover state and the CTA. */
body.moot-front-page .primary-nav__list a,
body.moot-front-page .primary-nav__list button,
body.moot-front-page .nav-dropdown-trigger,
body.moot-front-page .nav-menu > li > a,
body.moot-front-page .moot-nav__dropdown > button {
	padding: 0.5rem 0;
	font-size: 0.875rem;
	white-space: nowrap;
	color: rgba(241, 245, 249, 0.86) !important;
	font-weight: 600;
	text-decoration: none;
	background: transparent;
	transition: color 200ms ease;
}

body.moot-front-page .site-header.is-scrolled .primary-nav__list a,
body.moot-front-page .site-header.is-scrolled .primary-nav__list button,
body.moot-front-page .site-header.is-scrolled .nav-dropdown-trigger,
body.moot-front-page .site-header.is-scrolled .nav-menu > li > a,
body.moot-front-page .site-header.is-scrolled .moot-nav__dropdown > button {
	color: rgba(241, 245, 249, 0.86) !important;
}

body.moot-front-page .nav-item-with-dropdown {
	position: relative;
}

body.moot-front-page .nav-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	border-radius: 8px;
}

body.moot-front-page .nav-dropdown-trigger__chevron,
body.moot-front-page .nav-dropdown-trigger__chevron svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(241, 245, 249, 0.6) !important;
	stroke: rgba(241, 245, 249, 0.6) !important;
}

body.moot-front-page .site-header.is-scrolled .nav-dropdown-trigger__chevron,
body.moot-front-page .site-header.is-scrolled .nav-dropdown-trigger__chevron svg {
	color: rgba(241, 245, 249, 0.6) !important;
	stroke: rgba(241, 245, 249, 0.6) !important;
}

body.moot-front-page .dropdown-menu,
body.moot-front-page .moot-nav__menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	display: none;
	width: 240px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: rgba(11, 20, 38, 0.96);
	border: 1px solid rgba(148, 163, 184, 0.18);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
	z-index: 300;
	backdrop-filter: blur(16px);
}

body.moot-front-page .dropdown-menu a,
body.moot-front-page .moot-nav__menu a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 10px;
	color: rgba(248, 250, 252, 0.88);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

body.moot-front-page .dropdown-menu a:hover,
body.moot-front-page .moot-nav__menu a:hover {
	background: rgba(184, 242, 21, 0.1);
	color: var(--moot-lime);
}

body.moot-front-page .nav-item-with-dropdown:hover .dropdown-menu,
body.moot-front-page .nav-item-with-dropdown:focus-within .dropdown-menu,
body.moot-front-page .nav-item-with-dropdown.is-open .dropdown-menu,
body.moot-front-page .moot-nav__dropdown:hover .moot-nav__menu,
body.moot-front-page .moot-nav__dropdown:focus-within .moot-nav__menu,
body.moot-front-page .moot-nav__dropdown.is-open .moot-nav__menu {
	display: block;
}

body.moot-front-page .nav-item-with-dropdown.is-dismissed .dropdown-menu,
body.moot-front-page .moot-nav__dropdown.is-dismissed .moot-nav__menu {
	display: none !important;
}

body.moot-front-page .header-actions {
	flex-shrink: 0;
	margin-left: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Log In: outlined and quiet, in the same soft white as the nav links it sits next
   to. It used to be outlined in lime, which put two lime elements side by side in
   the corner and made the actual CTA harder to pick out. */
body.moot-front-page .btn--header-login {
	background: transparent;
	border: 1px solid rgba(226, 232, 240, 0.34);
	border-radius: 999px;
	box-shadow: none;
	color: #ffffff !important;
	font-weight: 700;
	padding: 0.55rem 1.15rem;
	transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

body.moot-front-page .btn--header-login:hover,
body.moot-front-page .site-header.is-scrolled .btn--header-login:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(226, 232, 240, 0.55);
	color: #ffffff !important;
}

body.moot-front-page .site-header.is-scrolled .btn--header-login {
	border-color: rgba(226, 232, 240, 0.34);
	color: #ffffff !important;
}

/* Get Started: lime in both states. It used to start navy and only turn lime once
   the page scrolled, which meant the one strong call to action was invisible against
   a dark hero exactly when a first-time visitor is looking at it. */
body.moot-front-page .btn--primary,
body.moot-front-page .header-actions .btn--primary,
body.moot-front-page .site-header.is-scrolled .btn--primary,
body.moot-front-page .site-header.is-scrolled .header-actions .btn--primary {
	background: #ccff00;
	border-color: #ccff00;
	border-radius: 999px;
	color: #071126;
	font-weight: 800;
	padding: 0.55rem 1.2rem;
	box-shadow: 0 8px 22px rgba(204, 255, 0, 0.32);
}

body.moot-front-page .btn--primary:hover,
body.moot-front-page .header-actions .btn--primary:hover,
body.moot-front-page .site-header.is-scrolled .btn--primary:hover,
body.moot-front-page .site-header.is-scrolled .header-actions .btn--primary:hover {
	background: #d8ff4a;
	border-color: #d8ff4a;
	color: #071126;
}

/* Lime is the hover state, and only the hover state. */
body.moot-front-page .primary-nav__list a:hover,
body.moot-front-page .nav-dropdown-trigger:hover,
body.moot-front-page .nav-menu > li > a:hover,
body.moot-front-page .moot-nav__dropdown > button:hover,
body.moot-front-page .site-header.is-scrolled .primary-nav__list a:hover,
body.moot-front-page .site-header.is-scrolled .nav-dropdown-trigger:hover {
	color: #ccff00 !important;
}

body.moot-front-page .primary-nav__list a:hover .nav-dropdown-trigger__chevron,
body.moot-front-page .nav-dropdown-trigger:hover .nav-dropdown-trigger__chevron,
body.moot-front-page .nav-dropdown-trigger:hover .nav-dropdown-trigger__chevron svg {
	color: #ccff00 !important;
	stroke: #ccff00 !important;
}

body.moot-front-page .primary-nav__list .current-menu-item > a,
body.moot-front-page .primary-nav__list a[aria-current="page"] {
	color: #fff !important;
}

body.moot-front-page .primary-nav__list a:focus-visible,
body.moot-front-page .nav-dropdown-trigger:focus-visible,
body.moot-front-page .btn--primary:focus-visible,
body.moot-front-page .btn--header-login:focus-visible,
.moot-home-v2 a:focus-visible,
.moot-home-v2 button:focus-visible {
	outline: 2px solid var(--moot-lime);
	outline-offset: 3px;
}

/* Footer — integrated dark system */
body.moot-front-page .site-footer {
	background: #040812;
	color: rgba(255, 255, 255, 0.78);
	border-top: 1px solid rgba(148, 163, 184, 0.12);
}

body.moot-front-page .site-footer__tagline,
body.moot-front-page .footer-col a,
body.moot-front-page .site-footer__newsletter p {
	color: rgba(255, 255, 255, 0.68);
}

body.moot-front-page .footer-col h3,
body.moot-front-page .site-footer__newsletter h3,
body.moot-front-page .site-footer__bottom p {
	color: #fff;
}

body.moot-front-page .site-footer__grid .moot-brand-logo__img {
	filter: brightness(0) invert(1);
}

body.moot-front-page .newsletter-form input {
	background: rgba(11, 20, 38, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.22);
	color: #f8fafc;
	border-radius: 12px;
	box-shadow: none;
}

body.moot-front-page .newsletter-form input::placeholder {
	color: rgba(148, 163, 184, 0.7);
}

body.moot-front-page .site-footer__social a {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(148, 163, 184, 0.18);
	color: rgba(248, 250, 252, 0.75);
}

body.moot-front-page .site-footer__legal a {
	color: rgba(248, 250, 252, 0.7);
}

.mh-shell {
	width: var(--mh-shell);
	margin-inline: auto;
}

.mh-eyebrow {
	margin: 0 0 1rem;
	color: var(--moot-lime);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mh-eyebrow--on-lime { color: rgba(7, 17, 38, 0.7); }
.mh-eyebrow--center { text-align: center; }

.mh-section-title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.85rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
}

.mh-section-title span,
.mh-hero__title span,
.mh-audience-card h2 span {
	color: var(--moot-lime);
}

.mh-section-title--center { text-align: center; }

.mh-lead {
	margin: 1rem 0 0;
	max-width: 38rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--mh-muted);
}

.mh-lead--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.mh-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 1.25rem;
	color: var(--moot-lime);
	font-weight: 700;
	text-decoration: none;
}

.mh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0 1.35rem;
	border-radius: var(--mh-radius-btn);
	border: 1px solid transparent;
	font-size: 0.95rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--mh-ease), box-shadow 0.2s ease;
}

.mh-btn:hover { transform: translateY(-1px); }

.mh-btn--primary {
	background: var(--moot-lime);
	color: #071126;
	box-shadow: 0 12px 28px rgba(184, 242, 21, 0.22);
}

.mh-btn--success {
	background: #b8f215;
	color: #071126;
	box-shadow: 0 12px 28px var(--moot-lime-glow);
}

.mh-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.22);
}

.mh-btn--white {
	background: #071126;
	color: #fff;
}

.mh-btn--ghost-light {
	background: transparent;
	color: #071126;
	border-color: rgba(7, 17, 38, 0.28);
}

.mh-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.mh-hero__cta--center {
	justify-content: flex-start;
}

/* Scene motion system */
.mh-scene {
	position: relative;
	isolation: isolate;
}

.moot-home-v2[data-moot-motion="on"] [data-moot-reveal] {
	opacity: 0;
	transform: translateY(56px) scale(0.98);
	transition:
		opacity var(--mh-duration) var(--mh-ease),
		transform var(--mh-duration) var(--mh-ease);
	will-change: opacity, transform;
}

/* How It Works photos must not sit on this compositor layer. will-change +
   scale rasterises the card at 1×, which is why the same 1536px files looked
   sharp on a phone and pixelated on a desktop display. */
.moot-home-v2[data-moot-motion="on"] .moot-hiw__card,
.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview .moot-hiw__card {
	will-change: auto;
}

.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview [data-moot-reveal],
.moot-home-v2[data-moot-motion="on"] [data-moot-reveal].is-inview {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview [data-moot-reveal]:nth-child(1) { transition-delay: 0ms; }
.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview [data-moot-reveal]:nth-child(2) { transition-delay: 80ms; }
.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview [data-moot-reveal]:nth-child(3) { transition-delay: 140ms; }
.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview [data-moot-reveal]:nth-child(4) { transition-delay: 200ms; }

.mh-scene--hero.is-inview [data-moot-reveal] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.moot-home-v2[data-moot-motion="on"] [data-moot-reveal],
	.moot-home-v2[data-moot-motion="on"] .mh-scene.is-inview [data-moot-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Hero — full-bleed road canvas with overlay copy above fleet */
.p01-hero,
.hero {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0 0 3rem;
	background: transparent;
	overflow: hidden;
}

.p01-hero__ambient {
	display: none;
}

.p01-hero__stage {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.p01-hero__stage.mh-shell {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}

.p01-hero__canvas {
	--fleet-band: clamp(235px, 34vh, 330px);
	--fleet-gap: 1.85cm;
	--hero-col-gap: 1.05cm;
	--hero-badge-block: calc(2.25rem + 20px);
	position: relative;
	width: 100%;
	min-height: clamp(640px, 88vh, 920px);
	overflow: hidden;
	isolation: isolate;
	background: #070d1a;
	border-radius: 0;
}

.p01-hero__road-plate {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	margin: 0;
	pointer-events: none;
	user-select: none;
	filter: saturate(0.95) brightness(0.72) contrast(1.06);
}

.p01-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(4, 10, 22, 0.88) 0%, rgba(4, 10, 22, 0.62) 42%, rgba(4, 10, 22, 0.22) 72%, rgba(4, 10, 22, 0.35) 100%),
		linear-gradient(180deg, rgba(4, 10, 22, 0.55) 0%, rgba(4, 10, 22, 0.12) 38%, rgba(4, 10, 22, 0.08) 58%, rgba(4, 10, 22, 0.72) 100%);
}

.p01-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: calc(var(--fleet-band) + var(--fleet-gap));
	z-index: 5;
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 0;
	padding:
		clamp(5rem, 8vh, 6.5rem)
		clamp(1.25rem, 4.5vw, 3.75rem)
		0;
	box-sizing: border-box;
	pointer-events: none;
}

.p01-hero__overlay-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	align-items: end;
	column-gap: var(--hero-col-gap);
	width: 100%;
	max-width: none;
	pointer-events: auto;
}

.p01-hero__copy {
	min-width: 0;
	width: 100%;
	padding-right: 0;
}

.p01-hero__aside {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 44rem;
	min-width: 0;
	/* Sit with the CTA row — fills the void above the fleet */
	padding-top: 0;
	justify-self: start;
	align-self: end;
	margin-bottom: 0;
}

.p01-hero__content,
.hero-content {
	position: relative;
	margin: 0;
	max-width: 100%;
	width: 100%;
}

.p01-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 20px;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background: rgba(12, 18, 36, 0.55);
	border: 1px solid rgba(139, 92, 246, 0.35);
	color: #e9e2ff;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.p01-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: rgba(184, 242, 21, 0.16);
	color: var(--moot-lime);
}

.p01-hero__title,
.hero-title {
	margin: 0;
	max-width: 100%;
	font-size: clamp(46px, 5.5vw, 74px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.038em;
	color: #fff;
	text-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
	overflow-wrap: normal;
	hyphens: none;
}

.p01-hero__gradient {
	display: inline;
	color: #b8f215;
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
}

.p01-hero__body,
.hero-lead {
	margin: 18px 0 0;
	max-width: 38rem;
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(226, 232, 240, 0.92);
	text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.p01-hero__body p,
.hero-lead p { margin: 0; }

.p01-hero__body p + p,
.hero-lead p + p { margin-top: 0.85rem; }

.p01-hero__body strong,
.hero-lead strong {
	color: #fff;
	font-weight: 700;
}

.p01-hero__actions,
.hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin-top: 22px;
}

.p01-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 48px;
	padding: 0 1.25rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.92rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 220ms var(--mh-ease), box-shadow 220ms ease, background-color 220ms ease;
}

.p01-hero__btn:hover { transform: translateY(-1px); }

.p01-hero__btn--lime {
	background: #b8f215;
	color: #071126;
	box-shadow: 0 12px 28px var(--moot-lime-glow);
}

.p01-hero__btn--lime:hover {
	background: #9ad40a;
	box-shadow: 0 14px 32px rgba(184, 242, 21, 0.35);
}

.p01-hero__btn--purple {
	background: rgba(12, 18, 36, 0.55);
	border-color: rgba(196, 181, 253, 0.45);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.p01-hero__btn--purple:hover {
	background: rgba(139, 92, 246, 0.28);
	box-shadow: 0 14px 32px rgba(124, 58, 237, 0.28);
}

.p01-hero__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	max-width: none;
	width: 100%;
	padding-top: 0;
}

.p01-hero__feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	min-width: 0;
	min-height: 0;
	padding: 1.1rem 1rem 1.15rem;
	border-radius: 18px;
	background:
		linear-gradient(165deg, rgba(22, 32, 54, 0.82) 0%, rgba(8, 12, 24, 0.78) 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -1px 0 rgba(0, 0, 0, 0.25),
		0 18px 42px rgba(0, 0, 0, 0.38);
	backdrop-filter: blur(22px) saturate(1.15);
	-webkit-backdrop-filter: blur(22px) saturate(1.15);
	transition: transform 220ms var(--mh-ease), border-color 220ms ease, box-shadow 220ms ease;
}

.p01-hero__feature:hover {
	transform: translateY(-2px);
	border-color: rgba(184, 242, 21, 0.38);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 22px 48px rgba(0, 0, 0, 0.42),
		0 0 0 1px rgba(184, 242, 21, 0.08);
}

.p01-hero__feature-icon,
.p01-hero__glass-icon,
.p01-hero__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
}

.p01-hero__feature-icon {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 10px;
}

.p01-hero__feature-icon--lime,
.p01-hero__glass-icon--lime,
.p01-hero__stat-icon--lime,
.p01-hero__stat-icon--teal {
	background: rgba(184, 242, 21, 0.14);
	color: var(--moot-lime);
}

.p01-hero__feature-icon--purple,
.p01-hero__glass-icon--purple,
.p01-hero__stat-icon--purple {
	background: rgba(139, 92, 246, 0.16);
	color: #c4b5fd;
}

.p01-hero__feature-copy {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.p01-hero__feature-copy strong {
	font-size: 0.94rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
}

.p01-hero__feature-copy span {
	font-size: 0.78rem;
	line-height: 1.45;
	color: rgba(203, 213, 225, 0.88);
}

.p01-hero__review {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.55rem 1rem;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 1.05rem 1.2rem;
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(24, 36, 28, 0.82) 0%, rgba(8, 14, 24, 0.8) 55%, rgba(12, 18, 36, 0.78) 100%);
	border: 1px solid rgba(184, 242, 21, 0.28);
	backdrop-filter: blur(22px) saturate(1.15);
	-webkit-backdrop-filter: blur(22px) saturate(1.15);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 0 0 1px rgba(184, 242, 21, 0.06),
		0 18px 44px rgba(0, 0, 0, 0.4);
}

.p01-hero__review-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
}

.p01-hero__review-stars { color: var(--moot-lime); }

.p01-hero__review-score {
	font-size: 0.9rem;
	font-weight: 800;
	color: #fff;
}

.p01-hero__review-text {
	margin: 0;
	flex: 1 1 200px;
	font-size: 0.82rem;
	line-height: 1.4;
	font-weight: 600;
	color: rgba(226, 232, 240, 0.94);
}

.p01-hero__review-meta {
	margin: 0;
	flex: 0 1 auto;
	font-size: 0.72rem;
	line-height: 1.35;
	color: rgba(148, 163, 184, 0.92);
}

/* Unused legacy hero wrappers */
.p01-hero__grid,
.hero-inner,
.p01-hero__slot,
.p01-hero__visual,
.hero-visual,
.p01-hero__image-wrap,
.p01-hero__blobs {
	display: none;
}

/* Fleet drive-in — fixed bottom band; overlay sits 2cm above */
.moot-fleet-stage {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	height: var(--fleet-band);
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
}

.moot-fleet-vehicle {
	--fleet-width: 16%;
	--fleet-z: 1;
	--park-left: 8%;
	--park-bottom: 8%;
	--duration: 1600ms;
	position: absolute;
	left: var(--park-left);
	bottom: var(--park-bottom);
	width: var(--fleet-width);
	z-index: var(--fleet-z);
	transform: translate3d(0, 0, 0);
	opacity: 0;
	visibility: hidden;
	transform-origin: 50% 100%;
	will-change: transform, opacity;
	transition: none;
}

.moot-fleet-vehicle.is-awaiting {
	opacity: 0;
	visibility: hidden;
}

.moot-fleet-vehicle.is-arriving,
.moot-fleet-vehicle.is-parked {
	visibility: visible;
	opacity: 1;
}

.moot-fleet-vehicle__img {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	image-rendering: auto;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14));
	user-select: none;
	-webkit-user-drag: none;
}

.moot-fleet-vehicle__shadow {
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 4%;
	height: 5%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 72%);
	opacity: 0.35;
	filter: blur(2px);
	z-index: 0;
	pointer-events: none;
}

/* Full-width convoy — journey lineup (lorry is visual anchor) */
.moot-fleet-vehicle--car {
	--park-left: 1%;
	--park-bottom: 10%;
	--fleet-width: 24%;
	--duration: 900ms;
}

.moot-fleet-vehicle--van {
	--park-left: 14%;
	--park-bottom: 7%;
	--fleet-width: 26%;
	--duration: 950ms;
}

.moot-fleet-vehicle--lorry {
	--park-left: 28%;
	--park-bottom: 2%;
	--fleet-width: 40%;
	--duration: 1100ms;
}

.moot-fleet-vehicle--motorbike {
	--park-left: 64%;
	--park-bottom: 9%;
	--fleet-width: 15%;
	--duration: 850ms;
}

.moot-fleet-vehicle--bicycle {
	--park-left: 78%;
	--park-bottom: 11%;
	--fleet-width: 14%;
	--duration: 900ms;
}

/* Map + Smart Matching overlays removed from hero */
.p01-hero__route,
.p01-hero__glass,
.p01-hero__route-card {
	display: none !important;
}

.p01-hero__canvas.is-fleet-static .moot-fleet-vehicle,
.p01-hero__canvas.is-fleet-done .moot-fleet-vehicle.is-parked,
[data-moot-hero-visual].is-fleet-static .moot-fleet-vehicle,
[data-moot-hero-visual].is-fleet-done .moot-fleet-vehicle.is-parked {
	visibility: visible;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.moot-fleet-vehicle,
	.moot-fleet-vehicle.is-awaiting,
	.moot-fleet-vehicle.is-arriving,
	.moot-fleet-vehicle.is-parked {
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transition: none !important;
		animation: none !important;
	}
}

.p01-hero__glass-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.p01-hero__glass-icon {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
}

.p01-hero__glass-copy {
	display: flex;
	flex-direction: column;
	gap: 0.08rem;
	min-width: 0;
}

.p01-hero__glass-copy strong {
	font-size: 0.82rem;
	line-height: 1.3;
	color: #fff;
}

.p01-hero__glass-copy span {
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--moot-muted);
}

.p01-hero__stage > .p01-hero__trust,
.p01-hero__stage > .p01-hero__stats-wrap {
	max-width: var(--mh-hero-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mh-hero-pad);
	padding-right: var(--mh-hero-pad);
	box-sizing: border-box;
}

.p01-hero__trust {
	margin-top: 1.25rem;
	padding: 24px 32px;
	border-radius: 24px;
	background: var(--mh-glass);
	border: 1px solid rgba(148, 163, 184, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(14px);
	text-align: center;
}

.p01-hero__trust-label {
	margin: 0 0 0.85rem;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--moot-lime);
}

.p01-hero__trust-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.p01-hero__trust-logos li {
	font-size: clamp(0.85rem, 1.2vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(248, 250, 252, 0.82);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(255, 255, 255, 0.03);
}

.p01-hero__trust-logos li:not(:last-child)::after {
	content: none;
}

.p01-hero__stats-wrap {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 300px);
	gap: 20px;
	align-items: stretch;
	margin-top: 20px;
}

.p01-hero__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
	padding: 1.25rem 1.1rem;
	border-radius: 24px;
	background: var(--mh-glass);
	border: 1px solid rgba(148, 163, 184, 0.14);
	backdrop-filter: blur(14px);
}

.p01-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	gap: 0.35rem;
	min-width: 0;
	padding: 0.35rem 0.45rem;
}

.p01-hero__stat-icon {
	width: 2rem;
	height: 2rem;
	border-radius: 10px;
}

.p01-hero__stat-value {
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
}

.p01-hero__stat-label {
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--moot-muted);
}

.p01-hero__priority {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.45rem;
	height: 100%;
	padding: 1.35rem 1.25rem;
	border-radius: 24px;
	background: linear-gradient(160deg, rgba(139, 92, 246, 0.22) 0%, rgba(11, 20, 38, 0.9) 70%);
	border: 1px solid rgba(139, 92, 246, 0.28);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.p01-hero__priority-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 12px;
	background: rgba(184, 242, 21, 0.14);
	color: var(--moot-lime);
}

.p01-hero__priority h2 {
	margin: 0;
	font-size: 1.15rem;
	color: #fff;
}

.p01-hero__priority p {
	margin: 0;
	font-size: 0.88rem;
	color: rgba(203, 213, 225, 0.88);
}

.p01-hero__priority-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.35rem;
	color: var(--moot-lime);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.88rem;
}

/* Modes */
.mh-modes {
	padding: 5.5rem 0 4rem;
}

.mh-modes .mh-section-title {
	text-align: center;
}

.mh-modes__strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.mh-mode-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.4rem 0.85rem;
	border-radius: var(--mh-radius-card);
	background: var(--mh-glass);
	border: 1px solid rgba(148, 163, 184, 0.14);
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	transition: transform 220ms var(--mh-ease), border-color 220ms ease;
}

.mh-mode-card:hover {
	transform: translateY(-3px);
	border-color: rgba(184, 242, 21, 0.28);
}

/* The vehicle sat small and flat in the middle of a plain tinted disc. It is the
   only thing on these cards carrying the mode, so the disc is bigger, lit from the
   top and ringed, and the glyph is drawn at a size where its detail survives. */
.mh-mode-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 28%, rgba(184, 242, 21, 0.16), rgba(184, 242, 21, 0.03) 72%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.5));
	box-shadow:
		inset 0 0 0 1px rgba(184, 242, 21, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 6px 16px rgba(2, 6, 23, 0.45);
	color: var(--moot-lime);
	margin-bottom: 0.5rem;
	transition: box-shadow 220ms ease, transform 220ms var(--mh-ease);
}

.mh-mode-card:hover .mh-mode-card__icon {
	transform: translateY(-1px);
	box-shadow:
		inset 0 0 0 1px rgba(184, 242, 21, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 8px 22px rgba(184, 242, 21, 0.16);
}

.mh-modes .mh-eyebrow,
.mh-modes .mh-lead--center {
	text-align: center;
}

.mh-mode-card strong {
	font-size: 0.95rem;
	color: #fff;
}

/* Excludes the icon: this used to be a bare `span` rule, and since the icon well is
   also a span it won the cascade over .mh-mode-card__icon and drew every vehicle in
   muted grey rather than lime. */
.mh-mode-card > span:not(.mh-mode-card__icon) {
	font-size: 0.82rem;
	color: var(--mh-muted);
}

/* Why Moot — copy and cards left, the baked network scene bleeding off the right.
   The map, its lime corridors, the city labels, the van, the "Driver found" chip
   and the app screen are one plate (see moot_homepage_why_network_url). They were
   built as separate DOM layers first and the result looked nothing like the
   artwork: a flat silhouette with CSS dots instead of lit terrain. The plate
   carries its own left-edge alpha fade, so it dissolves into this background
   rather than ending on a seam -- which is why there is no mask here. */
.mh-benefits {
	position: relative;
	padding: 3.75rem 0 2.25rem;
	overflow: hidden;
}

.mh-benefits__plate {
	position: absolute;
	top: 0;
	right: 0;
	width: min(64vw, 1160px);
	z-index: 0;
	pointer-events: none;
	container-type: inline-size;
}

.mh-benefits__plate-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Between the stacked breakpoint and a roomy desktop the shell keeps its width while
   the viewport does not, so a plate at 64vw reaches under the benefit cards and puts
   them on lit terrain rather than on the fade. It gives ground through that band. */
@media (min-width: 1101px) and (max-width: 1400px) {
	.mh-benefits__plate {
		width: min(58vw, 800px);
	}

	.mh-benefits__visual {
		min-height: calc(min(58vw, 800px) / 1.402 - 3.75rem);
	}
}

/* City labels and the driver chip are HTML over the plate, not paint in it, so the
   type stays sharp at any width and can be translated. They are parked on the node
   glows the plate draws, by fractions measured with tools/_find_nodes.py.

   Sizing is in container units so a label keeps its proportion to the map instead of
   ballooning on a small plate. The rem line before it is the fallback: a browser
   without container units drops the cqw declaration and keeps a sane fixed size. */
.mh-benefits__label,
.mh-benefits__chip {
	position: absolute;
	left: var(--x);
	top: var(--y);
	font-size: 0.78rem;
	font-size: clamp(0.64rem, 1.6cqw, 1rem);
	white-space: nowrap;
}

.mh-benefits__label {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.42em 0.85em 0.42em 0.6em;
	border-radius: 999px;
	background: #fff;
	color: #0b1220;
	font-weight: 700;
	letter-spacing: -0.01em;
	box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.5);
}

.mh-benefits__label svg {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

/* Which way the label reaches from its node, so none of them lands on the phone or
   runs off into the sea. --rise is the reveal below; it rides along in the same
   transform because the positioning transform cannot be overwritten by one. */
.mh-benefits__label--left {
	transform: translate(-100%, -50%) translate(-0.7em, var(--rise, 0px));
}

.mh-benefits__label--right {
	transform: translate(0, -50%) translate(0.7em, var(--rise, 0px));
}

.mh-benefits__chip {
	--x: 69%;
	--y: 41.5%;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 0.7em;
	border-radius: 0.85em;
	background: rgba(9, 16, 28, 0.94);
	border: 1px solid rgba(204, 255, 0, 0.4);
	box-shadow: 0 0.8em 1.8em rgba(0, 0, 0, 0.55);
	transform: translate(0, -50%) translate(0, var(--rise, 0px));
}

/* The labels and the chip settle onto the map as the section arrives, one after the
   other, rather than being there from the start. */
.moot-home-v2[data-moot-motion="on"] .mh-benefits__label,
.moot-home-v2[data-moot-motion="on"] .mh-benefits__chip {
	--rise: 12px;
	opacity: 0;
	transition: opacity 520ms var(--mh-ease), transform 520ms var(--mh-ease);
}

.moot-home-v2[data-moot-motion="on"] .mh-benefits.is-inview .mh-benefits__label,
.moot-home-v2[data-moot-motion="on"] .mh-benefits.is-inview .mh-benefits__chip {
	--rise: 0px;
	opacity: 1;
}

.mh-benefits__label:nth-of-type(2) { transition-delay: 90ms; }
.mh-benefits__label:nth-of-type(3) { transition-delay: 180ms; }
.mh-benefits__label:nth-of-type(4) { transition-delay: 270ms; }
.mh-benefits__chip { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
	.moot-home-v2[data-moot-motion="on"] .mh-benefits__label,
	.moot-home-v2[data-moot-motion="on"] .mh-benefits__chip {
		--rise: 0px;
		opacity: 1;
		transition: none;
	}
}

.mh-benefits__chip-icon,
.mh-benefits__chip-tick {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--moot-lime);
	color: #071126;
}

.mh-benefits__chip-icon svg,
.mh-benefits__chip-tick svg {
	width: 1.05em;
	height: 1.05em;
}

.mh-benefits__chip-body {
	display: grid;
	line-height: 1.2;
}

.mh-benefits__chip-body strong {
	font-weight: 800;
	color: var(--moot-lime);
}

.mh-benefits__chip-body em {
	font-size: 0.86em;
	font-style: normal;
	color: rgba(226, 232, 240, 0.78);
}

.mh-benefits .mh-shell {
	position: relative;
	z-index: 1;
}

.mh-benefits__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 2rem;
	align-items: start;
}

/* Reserves the row the plate occupies, so the pillars sit under the phone rather
   than through it. 1.402 is the plate's own aspect ratio, and the section's top
   padding comes off because the plate starts above the copy, at the section edge. */
.mh-benefits__visual {
	min-height: calc(min(64vw, 1160px) / 1.402 - 3.75rem);
}

.mh-benefits__copy .mh-eyebrow {
	margin-bottom: 0.7rem;
	letter-spacing: 0.2em;
}

.mh-benefits__copy .mh-section-title {
	font-size: clamp(2rem, 2.95vw, 2.7rem);
	line-height: 1.1;
	letter-spacing: -0.035em;
}

/* The second line and the link carry the logo's violet here instead of the lime the
   rest of the page uses. */
.mh-benefits {
	--mh-why-accent: var(--moot-violet);
}

.mh-benefits__copy .mh-section-title span {
	display: block;
	color: var(--mh-why-accent);
}

.mh-benefits__copy .mh-link {
	color: var(--mh-why-accent);
}

.mh-benefits__copy .mh-lead {
	margin-top: 0.85rem;
	max-width: 26rem;
	font-size: 0.94rem;
	line-height: 1.6;
}

.mh-benefits__copy .mh-link {
	margin-top: 1rem;
	font-size: 0.92rem;
}

.mh-benefits__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	margin-top: 1.4rem;
	max-width: 34rem;
}

.mh-benefits__cards .mh-benefit-card {
	padding: 1.2rem;
	border-radius: 16px;
}

.mh-benefits__cards .mh-benefit-card__icon {
	width: 38px;
	height: 38px;
	margin-bottom: 0.75rem;
	border-radius: 11px;
}

.mh-benefits__cards .mh-benefit-card h3 {
	font-size: 1rem;
}

.mh-benefits__cards .mh-benefit-card p {
	font-size: 0.86rem;
	line-height: 1.5;
}

.mh-benefits__pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.mh-benefits__pillar {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mh-benefits__pillar + .mh-benefits__pillar {
	padding-left: 1.75rem;
	border-left: 1px solid rgba(148, 163, 184, 0.16);
}

.mh-benefits__pillar-icon {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	color: var(--moot-lime);
	flex: 0 0 auto;
}

.mh-benefits__pillar-icon svg {
	width: 100%;
	height: 100%;
}

.mh-benefits__pillar strong {
	display: block;
	font-size: 0.92rem;
	color: #fff;
}

.mh-benefits__pillar span {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.82rem;
	color: var(--mh-muted);
}

.mh-benefit-card {
	padding: 1.35rem;
	border-radius: var(--mh-radius-card);
	background: var(--mh-glass);
	border: 1px solid rgba(148, 163, 184, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
}

/* Same well as the transport strip, so the two icon sets on the page are lit the
   same way rather than one being a flat olive patch and the other glass. */
.mh-benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.85rem;
	border-radius: 14px;
	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 rgba(184, 242, 21, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--moot-lime);
}

.mh-benefit-card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	color: #fff;
}

.mh-benefit-card p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--mh-muted);
}

/* Audience */
.mh-audience {
	padding: 3.5rem 0 4.5rem;
}

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

.mh-audience-card {
	min-height: 420px;
	padding: 2rem;
	border-radius: var(--mh-radius-panel);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	position: relative;
	border: 1px solid rgba(148, 163, 184, 0.14);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.mh-audience-card--business {
	background:
		linear-gradient(160deg, rgba(184, 242, 21, 0.12) 0%, rgba(11, 20, 38, 0.92) 55%),
		radial-gradient(ellipse at 90% 10%, rgba(139, 92, 246, 0.2), transparent 50%);
}

.mh-audience-card--driver {
	background:
		linear-gradient(160deg, rgba(184, 242, 21, 0.14) 0%, rgba(11, 20, 38, 0.92) 55%),
		radial-gradient(ellipse at 10% 0%, rgba(20, 184, 166, 0.18), transparent 50%);
}

/* The two cards are told apart by colour: the sender side is violet, the driver side
   lime, down to the ticks and the button. */
.mh-audience-card--driver h2 span { color: var(--moot-lime); }

.mh-audience-card--business h2 span { color: var(--moot-violet); }

.mh-audience-card__copy {
	position: relative;
	z-index: 2;
	max-width: 28rem;
}

.mh-audience-card h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.8rem, 3vw, 2.35rem);
	line-height: 1.05;
	color: #fff;
}

.mh-audience-card p {
	margin: 0 0 1rem;
	color: rgba(203, 213, 225, 0.9);
	line-height: 1.6;
}

.mh-audience-card ul {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.mh-audience-card li {
	position: relative;
	padding-left: 1.35rem;
	margin-bottom: 0.45rem;
	font-weight: 600;
	color: rgba(248, 250, 252, 0.92);
}

.mh-audience-card li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--moot-lime);
	font-weight: 800;
}

.mh-audience-card--driver li::before { color: var(--moot-lime); }

.mh-audience-card--business li::before { color: var(--moot-violet); }

/* Only this one button. .mh-btn--primary is the page's lime call to action and is
   used in the hero and the closing band as well. */
.mh-audience-card--business .mh-btn--primary {
	background: var(--moot-violet);
	color: #fff;
	box-shadow: 0 12px 28px rgba(123, 132, 255, 0.28);
}

/* Sustainability */
.mh-sustain {
	padding: 4rem 0;
	background:
		radial-gradient(ellipse at 20% 50%, rgba(184, 242, 21, 0.08), transparent 55%),
		rgba(8, 14, 26, 0.65);
	border-block: 1px solid rgba(148, 163, 184, 0.1);
}

.mh-sustain__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 2rem;
	align-items: center;
}

.mh-sustain__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.mh-sustain__points li {
	padding: 0.95rem 1.1rem;
	border-radius: 16px;
	background: var(--mh-glass);
	border: 1px solid rgba(184, 242, 21, 0.16);
	font-weight: 700;
	color: #fff;
}

.mh-sustain__points li::before {
	content: "• ";
	color: var(--moot-lime);
}

/* Live dashboard */
.moot-home-v2 .moot-live-dashboard {
	margin-top: 0;
}

@keyframes moot-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.moot-live-dashboard {
	background:
		radial-gradient(ellipse at 10% 0%, rgba(184, 242, 21, 0.08), transparent 45%),
		linear-gradient(180deg, #040812 0%, #0a1224 45%, #060b18 100%);
	padding: 4rem 1.5rem 4.25rem;
	color: #fff;
	border-block: 1px solid rgba(148, 163, 184, 0.1);
}

.moot-live-dashboard__shell { max-width: 1280px; margin: 0 auto; }

.moot-live-dashboard__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1.25rem;
	margin-bottom: 1.5rem;
}

.moot-live-dashboard__heading {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.moot-live-dashboard__heading h2 {
	margin: 0;
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 800;
	color: #fff;
}

.moot-live-dashboard__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--moot-lime);
	box-shadow: 0 0 0 4px rgba(184, 242, 21, 0.22);
	animation: moot-pulse 2.4s ease infinite;
}

.moot-live-dashboard__live-label {
	margin: 0;
	font-size: 0.82rem;
	color: rgba(148, 163, 184, 0.92);
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.2);
	background: rgba(255, 255, 255, 0.03);
}

.moot-live-dashboard__layout {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 320px);
	gap: 1rem;
}

.moot-live-dashboard__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.moot-live-dashboard__sidebar {
	display: grid;
	gap: 0.75rem;
}

.mld-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 148px;
	padding: 0.95rem 0.85rem 0.8rem;
	border-radius: 16px;
	background: linear-gradient(165deg, rgba(17, 28, 51, 0.95) 0%, rgba(8, 14, 28, 0.98) 100%);
	border: 1px solid rgba(148, 163, 184, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mld-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(184, 242, 21, 0.06), 0 0 28px rgba(184, 242, 21, 0.12);
	opacity: 0.55;
}

/* One accent for all six. Each card used to carry its own icon colour and glow from
   PHP -- blue, navy, teal, purple, slate, green -- and the row read as six products
   rather than one. */
.mld-card__icon {
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	background: rgba(184, 242, 21, 0.1);
	color: var(--moot-lime);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.65rem;
}

.mld-card__value {
	font-size: clamp(1.2rem, 1.7vw, 1.55rem);
	font-weight: 800;
	color: #fff;
}

.mld-card__label {
	font-size: 0.72rem;
	color: rgba(203, 213, 225, 0.8);
	flex: 1;
}

/* align-self, because a stretched item in a flex column made these read as full
   width status bars across the bottom of every card rather than as small tags. */
.mld-card__badge {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.45rem;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	font-size: 0.56rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mld-card__badge--demo,
.mld-card__badge--live {
	background: rgba(184, 242, 21, 0.14);
	color: var(--moot-lime);
}

/* Slate rather than the violet it was: the two badges are a real distinction, so
   they should not both be lime, and violet belongs to the Why Moot copy. */
.mld-card__badge--illustrative,
.mld-card__badge--all-time {
	background: rgba(148, 163, 184, 0.16);
	color: rgba(226, 232, 240, 0.92);
}

.mld-panel {
	background: linear-gradient(165deg, rgba(17, 28, 51, 0.9) 0%, rgba(8, 14, 28, 0.95) 100%);
	border: 1px solid rgba(148, 163, 184, 0.14);
	border-radius: 16px;
	padding: 0.9rem 1rem;
}

.mld-panel__header {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.mld-panel__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--moot-lime);
	margin-top: 0.35rem;
	animation: moot-pulse 2.4s ease infinite;
}

.mld-panel__title { margin: 0; font-size: 0.88rem; font-weight: 700; color: #fff; }
.mld-panel__subtitle { margin: 0.1rem 0 0; font-size: 0.68rem; color: rgba(148, 163, 184, 0.85); }

.mld-map {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(148, 163, 184, 0.12);
	background: #060b18;
	aspect-ratio: 3 / 2;
}

/* The map is baked in the section's own palette now, so it is shown as it is. The
   previous one was a flat indigo drawing, screen-blended at 75% to knock it back,
   which is what made it lilac. */
.mld-map img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mld-map__routes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.mld-map__route {
	stroke: var(--moot-lime);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 4 6;
	opacity: 0.75;
	filter: drop-shadow(0 0 5px rgba(184, 242, 21, 0.45));
	animation: mld-corridor 1.6s linear infinite;
}

/* Travelling the dashes rather than moving anything: the corridors read as carrying
   something without the panel ever redrawing its geometry. */
@keyframes mld-corridor {
	to { stroke-dashoffset: -10; }
}

.mld-map__nodes circle {
	fill: var(--moot-lime);
	filter: drop-shadow(0 0 6px rgba(184, 242, 21, 0.55));
	animation: moot-pulse 2.4s ease infinite;
}

.mld-map__nodes circle:nth-child(2) { animation-delay: 0.4s; }
.mld-map__nodes circle:nth-child(3) { animation-delay: 0.8s; }
.mld-map__nodes circle:nth-child(4) { animation-delay: 1.2s; }
.mld-map__nodes circle:nth-child(5) { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
	.moot-live-dashboard__dot,
	.mld-panel__dot,
	.mld-map__route,
	.mld-map__nodes circle {
		animation: none;
	}
}

.mld-activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.mld-activity-list__item { display: flex; gap: 0.5rem; }

.mld-activity-list__icon {
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	background: rgba(184, 242, 21, 0.12);
	color: var(--moot-lime);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mld-activity-list__text { font-size: 0.72rem; color: rgba(226, 232, 240, 0.92); }
.mld-activity-list__time { font-size: 0.62rem; color: rgba(148, 163, 184, 0.8); }

/* Opening shell */
.mh-open-shell {
	width: min(1400px, calc(100% - 2.5rem));
	margin-inline: auto;
}

/* Hero content cluster. Wider than the page shell: the reference runs the copy out
   to about 6% from the left edge and the phone to about 94%, and the 1080px shell
   this replaced left both stranded in the middle third of a 1512px window. */
.mh-lime-hero .mh-open-shell {
	width: min(1320px, calc(100% - 3rem));
}

/* Scene 1 — the dark cinematic hero.

   The `lime` in every class name here is historical. The hero was a flat lime panel,
   then lime with an aerial map under it, and is now navy with a graded aerial plate.
   The names were left alone deliberately: they are referenced from the markup, the
   engine, the offline renderer and the packaging checks, and renaming forty selectors
   to fix a word buys nothing a comment cannot. */
.mh-lime-hero {
	position: relative;
	/* Pull the motorway up under the transparent nav, like the approved mock. */
	margin-top: -84px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(820px, 96vh, 900px);
	padding:
		clamp(7.25rem, 12vh, 9.25rem)
		0
		clamp(4.5rem, 8vh, 6.5rem);
	background: #050a16;
	color: #f8fafc;
	overflow: hidden;
	/* The uploaded reference uses neon lime, not the duller #b8f215 token. */
	--moot-lime: #ccff00;
	--moot-lime-glow: rgba(204, 255, 0, 0.32);
}

.mh-lime-hero__network {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* The aerial plate.

   `cover` and a plain centre are not cosmetic choices: assets/js/homepage.js
   reproduces this exact transform to park chips and pins on the vans already
   painted into the plate. Changing the size or the position here moves those
   spots off the roads, so the two have to be changed together.

   Full strength. The plate is resized only -- a navy grade is what turned the
   last town into a black car park. Readability is the scrim's job. */
.mh-lime-hero__map {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--mh-aerial);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	image-rendering: auto;
	opacity: 1;
}

/*
 * Soft lime pulse under each chip. Above the scrim, and faded out across the
 * copy by a mask -- transparent where the headline inks, opaque out to the
 * right. Lime trails are already in the plate; this layer is only the glow.
 */
.moot-map-animation-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.55) 52%,
		rgba(0, 0, 0, 1) 62%,
		rgba(0, 0, 0, 1) 100%
	);
	mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.55) 52%,
		rgba(0, 0, 0, 1) 62%,
		rgba(0, 0, 0, 1) 100%
	);
}

/* Soft lime pulse on the road under each chip. The vans and trails are already
   painted into the town; this marks the two points the notifications belong to. */
.moot-map-glow {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.6rem;
	height: 2.6rem;
	margin: -1.3rem 0 0 -1.3rem;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(198, 255, 51, 0.34) 0%,
		rgba(184, 242, 21, 0.12) 40%,
		transparent 72%
	);
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Left wash under the type only. The motorway and lime trails stay open on
   the right, matching the approved highway mock. */
.mh-lime-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(
			90deg,
			rgba(5, 10, 22, 0.72) 0%,
			rgba(5, 10, 22, 0.42) 28%,
			rgba(5, 10, 22, 0.12) 48%,
			rgba(5, 10, 22, 0) 64%
		),
		linear-gradient(
			180deg,
			rgba(5, 10, 22, 0.22) 0%,
			rgba(5, 10, 22, 0) 18%,
			rgba(5, 10, 22, 0) 78%,
			rgba(5, 10, 22, 0.28) 100%
		);
}

/* Popups and pins, above the scrim: these are product notifications, not scenery,
   and washing them back would defeat them. */
/* Above both the scrim and the traffic: a notification is the one thing here that
   is allowed to be read at full strength, so it is never washed or masked. */
.moot-map-overlay-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
}

/* The highway mock marks cars with baked glow rings, not map pins. */
.mh-lime-hero .moot-map-pin {
	display: none;
}

/* A premium product notification, not a map label: dark glass, hairline lime edge,
   lime title, grey subtext, and a tail pointing at the vehicle it belongs to. Live
   markup rather than part of the artwork, so the wording is translatable and it can
   ride above a moving vehicle -- which is what makes it read as that driver being
   matched rather than a caption pinned to the hero.

   No static position: the engine places it and only shows it while its vehicle is
   somewhere the panel can actually be read. */
.moot-map-popup {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.85rem 0.5rem 0.55rem;
	border-radius: 0.9rem;
	background: rgba(9, 15, 30, 0.82);
	border: 1px solid rgba(184, 242, 21, 0.26);
	box-shadow:
		0 18px 38px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(10px) saturate(130%);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transform-origin: top left;
	will-change: transform, opacity;
	transition: none;
}

.moot-map-popup[data-popup="match"] {
	visibility: hidden;
}

/* The tail. Square, turned 45 degrees, with only the two outer edges bordered so it
   reads as a continuation of the panel rather than a diamond stuck to it. The engine
   sets data-side when it has to put the panel below its vehicle instead of above. */
/* The tail tracks the vehicle rather than the panel's centre. The corridor between
   the headline and the phone is only about 250px wide, so a panel that always sat
   centred over its vehicle could almost never be placed; it is allowed to slide
   sideways instead, and the engine sets --moot-tail so it still points at the van. */
.moot-map-popup::after {
	content: "";
	position: absolute;
	left: var(--moot-tail, 50%);
	width: 0.6rem;
	height: 0.6rem;
	background: rgba(9, 15, 30, 0.82);
	transform: translateX(-50%) rotate(45deg);
}

.moot-map-popup[data-side="above"]::after {
	bottom: -0.31rem;
	border-right: 1px solid rgba(184, 242, 21, 0.26);
	border-bottom: 1px solid rgba(184, 242, 21, 0.26);
}

.moot-map-popup[data-side="below"]::after {
	top: -0.31rem;
	border-left: 1px solid rgba(184, 242, 21, 0.26);
	border-top: 1px solid rgba(184, 242, 21, 0.26);
}

.moot-map-popup__tick {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: #ccff00;
	color: #071126;
}

.moot-map-popup__tick svg {
	display: block;
	width: 0.85rem;
	height: 0.85rem;
}

.moot-map-popup__body {
	display: grid;
	gap: 0.1rem;
	line-height: 1.2;
}

.moot-map-popup__title {
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.005em;
	color: #ccff00;
}

.moot-map-popup__note {
	font-size: 0.66rem;
	font-weight: 600;
	color: rgba(226, 232, 240, 0.68);
}

/* Two pins, at the collection and delivery ends of the journey the popups describe.
   Small and low-contrast on purpose: the brief asked for a couple of markers, not a
   map covered in them. */
.moot-map-pin {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	color: #ccff00;
	opacity: 0;
	pointer-events: none;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
	will-change: transform, opacity;
}

.moot-map-pin svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* A very soft lime bloom behind the phone, to lift it off the plate. */
.mh-lime-hero__glow {
	position: absolute;
	inset: 6% 6% auto auto;
	width: min(46vw, 560px);
	height: min(46vw, 560px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(184, 242, 21, 0.09), transparent 66%);
	pointer-events: none;
	z-index: 1;
}

.mh-lime-hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	align-items: center;
}

/* The approved highway mock has no phone. Keep the markup for the pack
   checks, but do not cover the carriageway. */
.mh-lime-hero__device {
	display: none;
}

.mh-lime-hero__copy {
	max-width: var(--mh-hero-content);
}

.mh-lime-hero__eyebrow {
	margin: 0 0 1.15rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(226, 232, 240, 0.6);
}

.mh-lime-hero__title {
	margin: 0;
	max-width: 16ch;
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 0.98;
	font-weight: 800;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #ffffff;
}

.mh-lime-hero__title-accent {
	display: inline;
	color: #ccff00;
	font-weight: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-shadow: none;
	filter: none;
}

.mh-lime-hero__tagline {
	margin: 1.15rem 0 0;
	font-size: clamp(1rem, 1.35vw, 1.28rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
}

.mh-lime-hero__lead {
	margin: 0.8rem 0 0;
	max-width: 22rem;
	font-size: clamp(0.78rem, 0.95vw, 0.88rem);
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(226, 232, 240, 0.7);
}

.mh-lime-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.9rem;
}

.mh-lime-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 54px;
	padding: 0 1.5rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 220ms var(--mh-ease), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
}

.mh-lime-hero__btn:hover { transform: translateY(-1px); }

.mh-lime-hero__btn:focus-visible {
	outline: 2px solid #c6ff33;
	outline-offset: 3px;
}

/* Lime fill, navy text. The navy fill this replaced disappeared into the plate. */
.mh-lime-hero__btn--primary {
	background: var(--moot-lime);
	color: #071126;
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.45),
		0 0 24px rgba(204, 255, 0, 0.28);
}

.mh-lime-hero__btn--primary:hover {
	background: #d8ff4a;
	box-shadow:
		0 16px 34px rgba(0, 0, 0, 0.5),
		0 0 30px rgba(184, 242, 21, 0.32);
}

.mh-lime-hero__btn--primary .mh-lime-hero__btn-arrow {
	display: inline-flex;
	color: #071126;
}

/* Deliberately quiet. A second lime button would leave the hero with two equal
   calls to action and no primary. */
.mh-lime-hero__btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(226, 232, 240, 0.32);
	color: #ffffff;
}

.mh-lime-hero__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(226, 232, 240, 0.5);
}

.mh-lime-hero__btn-play {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid rgba(226, 232, 240, 0.4);
	color: #ffffff;
}

.mh-lime-hero__btn-play svg {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	margin-left: 0.08rem;
}

.mh-lime-hero__motion-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1.4rem;
	z-index: 6;
	min-height: 44px;
	padding: 0.45rem 0.95rem;
	border: 1px solid rgba(248, 250, 252, 0.5);
	border-radius: 999px;
	background: rgba(8, 13, 26, 0.78);
	color: #f8fafc;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
}

.mh-lime-hero__motion-toggle:hover,
.mh-lime-hero__motion-toggle:focus-visible {
	background: rgba(8, 13, 26, 0.92);
	border-color: #f8fafc;
}

.mh-lime-hero.is-motion-paused .moot-map-glow,
.mh-lime-hero.is-motion-paused .moot-map-popup {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.mh-lime-hero .moot-map-glow,
	.mh-lime-hero .moot-map-popup,
	.mh-lime-hero .moot-map-pin {
		animation: none !important;
		transition: none !important;
	}
}

/* Three benefit lines. No cards, no panels, no borders: they are the last thing in
   the hero's reading order and are meant to look it. */
.mh-lime-hero__benefits {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: clamp(2rem, 4vh, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

.mh-lime-hero__benefit {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.mh-lime-hero__benefit-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	color: rgba(184, 242, 21, 0.85);
}

.mh-lime-hero__benefit-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mh-lime-hero__benefit-body {
	display: grid;
	gap: 0.1rem;
	line-height: 1.25;
}

.mh-lime-hero__benefit-label {
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: -0.005em;
	color: #ffffff;
}

.mh-lime-hero__benefit-note {
	font-size: 0.76rem;
	font-weight: 600;
	color: rgba(226, 232, 240, 0.58);
}

.mh-lime-hero__device {
	margin: 0;
	justify-self: end;
	align-self: center;
	opacity: 0;
	transform: translateY(36px) scale(0.97);
	transform-origin: 50% 80%;
}

.mh-lime-hero.is-inview .mh-lime-hero__device {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition:
		opacity 1000ms var(--mh-ease),
		transform 1000ms var(--mh-ease);
	transition-delay: 120ms;
}

/* Angled a few degrees and grounded with a long soft shadow, per the reference. No
   frame, no card, no plate behind it: the asset is already a photographed handset
   with its own contact shadow, and putting it in a box was what made it look pasted
   on. */
.mh-lime-hero__device-frame {
	position: relative;
	width: min(100%, 430px);
	margin-left: auto;
	transform: none;
	overflow: visible;
	border-radius: 0;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.mh-lime-hero__device-frame::before,
.mh-lime-hero__device-frame::after {
	content: none;
	display: none;
}

.mh-lime-hero__device-frame img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 620px;
	border-radius: 0;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
	background: transparent;
	border: 0;
	box-shadow: none;
	filter:
		drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55))
		drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.mh-lime-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(48px, 7vw, 72px);
	z-index: 4;
	pointer-events: none;
	line-height: 0;
}

.mh-lime-hero__wave svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mh-lime-hero__wave path {
	fill: #ccff00;
}

/* Reduced motion: the plate, the traffic parked where it starts, one popup already
   showing, and no transitions. The engine does the same on its side -- it renders a
   single static frame and never starts the loop. */
@media (prefers-reduced-motion: reduce) {
	.mh-lime-hero__device,
	.mh-lime-hero.is-inview .mh-lime-hero__device {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.moot-map-popup,
	.moot-map-pin,
	.moot-map-glow {
		transition: none !important;
	}
}

@media (max-width: 1200px) {
	.mh-lime-hero__title {
		font-size: clamp(2.4rem, 5.6vw, 4.25rem);
	}
}

/* Tablet: the split layout goes, so the copy runs the full width and the phone sits
   under it. The popups stay, because they are the point of the hero, but the plate
   is doing much less work behind a full-width copy block. */
/*
 * Tablet keeps the split, per the brief: reduce the phone, don't restack.
 *
 * Stacking used to begin at 1100px, which at 1024x900 put the phone under a
 * full-width copy block and a hero taller than the viewport -- the handset started
 * around 600px down and ran off the bottom of the screen, so the one thing the
 * brief calls out as prominent was mostly below the fold. Two columns still fit
 * comfortably at this width; only the phone needs to come down in size.
 */
@media (min-width: 861px) and (max-width: 1100px) {
	.mh-lime-hero {
		min-height: clamp(680px, 78vh, 820px);
	}

	.mh-lime-hero__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* A smaller panel, because the corridor it has to sit in is smaller. `cover`
	   crops the plate as the hero squares up, so the clear space between the copy
	   and the phone comes down to about 146px here against a 132px panel -- traced
	   at this width, one popup had no usable road at all and the other was 860ms
	   short of a whole show. Same design, fewer pixels. */
	.moot-map-popup {
		gap: 0.4rem;
		padding: 0.4rem 0.6rem 0.4rem 0.42rem;
		border-radius: 0.75rem;
	}

	.moot-map-popup__tick {
		width: 1.05rem;
		height: 1.05rem;
	}

	.moot-map-popup__tick svg {
		width: 0.7rem;
		height: 0.7rem;
	}

	.moot-map-popup__title {
		font-size: 0.68rem;
	}

	.moot-map-popup__note {
		font-size: 0.6rem;
	}

	.mh-lime-hero__device-frame {
		width: min(100%, 296px);
	}

	.mh-lime-hero__device-frame img {
		max-height: 520px;
	}

	.mh-lime-hero__lead {
		max-width: 30rem;
	}
}

@media (max-width: 860px) {
	.mh-lime-hero {
		min-height: 0;
	}

	.mh-lime-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 5vh, 3rem);
	}

	/* Both of these are left-to-right because the desktop hero is: dark under the
	   copy on the left, open on the right for the plate and the traffic. Once the
	   copy runs the full width that reasoning inverts, and it showed -- the headline
	   ended up sitting on a brightly lit depot roof. Vertical instead, and the
	   traffic keeps its own subtlety from the scrim rather than from a mask whose
	   stops belong to a two-column layout. */
	.mh-lime-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(5, 10, 22, 0.72) 0%,
				rgba(5, 10, 22, 0.48) 40%,
				rgba(5, 10, 22, 0.22) 68%,
				rgba(5, 10, 22, 0.5) 100%
			);
	}

	.moot-map-animation-layer {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mh-lime-hero__lead {
		max-width: 34rem;
	}

	.mh-lime-hero__device {
		justify-self: center;
	}

	.mh-lime-hero__device-frame {
		width: min(100%, 300px);
		margin: 0 auto;
	}

	.mh-lime-hero__device-frame img {
		max-height: 460px;
	}
}

@media (max-width: 720px) {
	.mh-lime-hero {
		min-height: 0;
		padding: clamp(3.5rem, 8vh, 5rem) 0 clamp(3rem, 6vh, 4.5rem);
	}

	.mh-lime-hero__title {
		font-size: clamp(1.85rem, 8.4vw, 2.55rem);
	}

	/* Copy runs the full width over the plate here, so the scrim goes almost solid
	   down the left and the vertical pass carries the rest. */
	.mh-lime-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgba(5, 10, 22, 0.78) 0%,
				rgba(5, 10, 22, 0.52) 42%,
				rgba(5, 10, 22, 0.28) 70%,
				rgba(5, 10, 22, 0.62) 100%
			);
	}

	.mh-lime-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.mh-lime-hero__btn {
		width: 100%;
	}

	.mh-lime-hero__benefits {
		flex-direction: column;
		gap: 0.85rem;
	}

	.mh-lime-hero__device-frame {
		width: min(100%, 240px);
	}

	.mh-lime-hero__device-frame img {
		max-height: 380px;
	}

}

/* Scene 2 — every kind of journey */
.mh-journey {
	position: relative;
	padding: clamp(2.15rem, 4vh, 3rem) 0 clamp(1.85rem, 3.5vh, 2.65rem);
	background: #ccff00;
	color: #060b18;
	overflow: hidden;
}

.mh-journey__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-items: end;
}

.mh-journey__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7c3aed;
}

.mh-journey__title {
	margin: 0;
	max-width: 14ch;
	font-size: clamp(2rem, 3.8vw, 3.15rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: #060b18;
}

.mh-journey__lead {
	margin: 1rem 0 0;
	max-width: 32rem;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(6, 11, 24, 0.72);
}

.mh-journey__benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	margin: 1.45rem 0 0;
	padding: 0;
	list-style: none;
}

.mh-journey__benefit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	min-width: 0;
}

.mh-journey__benefit-icon {
	display: inline-flex;
	color: #7c3aed;
}

.mh-journey__benefit-copy {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.mh-journey__benefit-copy strong {
	font-size: 0.92rem;
	font-weight: 800;
	color: #060b18;
	letter-spacing: -0.01em;
}

.mh-journey__benefit-copy span {
	font-size: 0.78rem;
	line-height: 1.35;
	color: rgba(6, 11, 24, 0.62);
}

.mh-journey__stage {
	position: relative;
	min-height: clamp(250px, 32vh, 340px);
	isolation: isolate;
}

.mh-journey__floor {
	position: absolute;
	left: -4%;
	right: -2%;
	bottom: 0;
	height: 58%;
	border-radius: 40% 40% 0 0 / 18% 18% 0 0;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

.mh-journey__route {
	position: absolute;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.55), rgba(139, 92, 246, 0.35), transparent);
	opacity: 0.55;
	filter: blur(0.2px);
}

.mh-journey__route--a {
	left: 8%;
	right: 18%;
	bottom: 42%;
	transform: rotate(-8deg);
}

.mh-journey__route--b {
	left: 18%;
	right: 8%;
	bottom: 28%;
	transform: rotate(4deg);
	opacity: 0.4;
}

.mh-journey__route--c {
	left: 28%;
	right: 22%;
	bottom: 16%;
	transform: rotate(-3deg);
	opacity: 0.28;
	background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.45), transparent);
}

.moot-fleet-stage--journey {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	height: 100%;
	z-index: 2;
	overflow: visible;
	pointer-events: none;
}

.moot-fleet-stage--journey .moot-fleet-vehicle__shadow {
	left: 22%;
	right: 22%;
	bottom: 3%;
	height: 5%;
	opacity: 0.28;
	filter: blur(2px);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 72%);
}

.moot-fleet-stage--journey .moot-fleet-vehicle__img {
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14));
}

/*
 * Same left-to-right lineup, but each vehicle has its own slot so the
 * car, van and lorry stay clear of each other. The unused lime on the
 * right becomes extra size rather than a gap after the bicycle.
 */
.moot-fleet-stage--journey .moot-fleet-vehicle--car {
	--park-left: 0%;
	--park-bottom: 8%;
	--fleet-width: 22%;
}

.moot-fleet-stage--journey .moot-fleet-vehicle--van {
	--park-left: 23%;
	--park-bottom: 6%;
	--fleet-width: 24%;
}

.moot-fleet-stage--journey .moot-fleet-vehicle--lorry {
	--park-left: 45%;
	--park-bottom: 1%;
	--fleet-width: 37%;
}

.moot-fleet-stage--journey .moot-fleet-vehicle--motorbike {
	--park-left: 78%;
	--park-bottom: 8%;
	--fleet-width: 14%;
}

.moot-fleet-stage--journey .moot-fleet-vehicle--bicycle {
	--park-left: 88%;
	--park-bottom: 10%;
	--fleet-width: 12%;
}

/* The hero's own reduced-motion and breakpoint rules live with the rest of the hero
   further up the file. They used to be duplicated here as well, which meant the copy
   down here silently won and the one next to the styles it belonged to did nothing. */

/* Responsive */
@media (max-width: 1200px) {
	.p01-hero__title,
	.hero-title {
		font-size: clamp(42px, 5vw, 64px);
	}
}


@media (max-width: 1100px) {
	.p01-hero__canvas {
		--fleet-band: clamp(210px, 30vh, 290px);
		--fleet-gap: 1.65cm;
		--hero-col-gap: 1cm;
		min-height: clamp(680px, 92vh, 860px);
	}

	.p01-hero__overlay {
		padding-left: clamp(1.1rem, 3vw, 2rem);
		padding-right: clamp(1.1rem, 3vw, 2rem);
	}

	.p01-hero__overlay-inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: var(--hero-col-gap);
		align-items: end;
	}

	.p01-hero__aside {
		padding-top: 0;
		max-width: 40rem;
		align-self: end;
	}

	.p01-hero__features {
		gap: 8px;
	}

	.p01-hero__feature {
		padding: 0.9rem 0.85rem 0.95rem;
	}

	.p01-hero__feature-copy strong {
		font-size: 0.86rem;
	}

	.p01-hero__feature-copy span {
		font-size: 0.74rem;
	}

	.moot-fleet-vehicle--car {
		--park-left: 0%;
		--park-bottom: 10%;
		--fleet-width: 26%;
		--duration: 800ms;
	}

	.moot-fleet-vehicle--van {
		--park-left: 13%;
		--park-bottom: 7%;
		--fleet-width: 28%;
		--duration: 850ms;
	}

	.moot-fleet-vehicle--lorry {
		--park-left: 28%;
		--park-bottom: 2%;
		--fleet-width: 42%;
		--duration: 1000ms;
	}

	.moot-fleet-vehicle--motorbike {
		--park-left: 66%;
		--park-bottom: 9%;
		--fleet-width: 16%;
		--duration: 750ms;
	}

	.moot-fleet-vehicle--bicycle {
		--park-left: 80%;
		--park-bottom: 11%;
		--fleet-width: 15%;
		--duration: 800ms;
	}

	.p01-hero__stats-wrap { grid-template-columns: 1fr; }
	.p01-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mh-benefits__stage {
		grid-template-columns: 1fr;
	}

	/* Stacked: the plate leads the copy instead of bleeding off the side. It stays
	   pinned to the right so its hard right edge sits on the viewport edge, leaving
	   only the baked fade on show; centring it put a visible cut on both sides.

	   It has to stay position: relative rather than static. The city labels are
	   absolute inside it, so a static plate hands them to the section instead and
	   they scatter across the copy and the cards. */
	.mh-benefits__plate {
		position: relative;
		width: min(100%, 760px);
		margin: 0 0 1.25rem auto;
	}

	.mh-benefits__visual {
		display: none;
	}

	.mh-modes__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mh-audience__grid { grid-template-columns: 1fr; }
	.mh-sustain__grid { grid-template-columns: 1fr; }
	.moot-live-dashboard__layout { grid-template-columns: 1fr; }
	.moot-live-dashboard__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.mh-journey__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}

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

	.mh-journey__stage {
		min-height: 270px;
		margin-top: 0.35rem;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--car {
		--park-left: 1%;
		--fleet-width: 18%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--van {
		--park-left: 20%;
		--fleet-width: 20%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--lorry {
		--park-left: 41%;
		--fleet-width: 32%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--motorbike {
		--park-left: 74%;
		--fleet-width: 13%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--bicycle {
		--park-left: 86%;
		--fleet-width: 12%;
	}
}

@media (max-width: 720px) {
	:root { --mh-duration: 700ms; }

	.moot-home-v2[data-moot-motion="on"] [data-moot-reveal] {
		transform: translateY(36px) scale(0.99);
	}

	.p01-hero { padding-bottom: 1.5rem; }

	.p01-hero__canvas {
		--fleet-band: clamp(185px, 28vh, 250px);
		--fleet-gap: 2.1cm;
		--hero-col-gap: 1rem;
		min-height: clamp(760px, 98vh, 960px);
	}

	.p01-hero__overlay {
		padding-top: 4.75rem;
		padding-left: 1.1rem;
		padding-right: 1.1rem;
		align-items: flex-end;
	}

	.p01-hero__title,
	.hero-title { font-size: clamp(40px, 11vw, 52px); }

	.p01-hero__overlay-inner {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		align-items: stretch;
	}

	.p01-hero__aside {
		padding-top: 0;
	}

	.p01-hero__features {
		grid-template-columns: 1fr;
		max-width: 100%;
		padding-top: 0;
	}

	.p01-hero__feature {
		min-height: 0;
		flex-direction: row;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.p01-hero__review {
		flex-direction: column;
		align-items: flex-start;
	}

	.moot-fleet-vehicle--car {
		--park-left: 0%;
		--park-bottom: 10%;
		--fleet-width: 28%;
		--duration: 700ms;
	}

	.moot-fleet-vehicle--van {
		--park-left: 14%;
		--park-bottom: 7%;
		--fleet-width: 30%;
		--duration: 750ms;
	}

	.moot-fleet-vehicle--lorry {
		--park-left: 30%;
		--park-bottom: 2%;
		--fleet-width: 44%;
		--duration: 900ms;
	}

	.moot-fleet-vehicle--motorbike {
		--park-left: 68%;
		--park-bottom: 9%;
		--fleet-width: 17%;
		--duration: 650ms;
	}

	.moot-fleet-vehicle--bicycle {
		--park-left: 82%;
		--park-bottom: 11%;
		--fleet-width: 16%;
		--duration: 700ms;
	}
	.p01-hero__stats { grid-template-columns: 1fr; }

	.mh-modes,
	.mh-benefits,
	.mh-audience,
	.mh-sustain,
	.mh-journey,
	.mh-lime-hero {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.mh-modes__strip,
	.mh-benefits__cards,
	.mh-benefits__pillars,
	.mh-audience__grid {
		grid-template-columns: 1fr;
	}

	.mh-benefits__pillar + .mh-benefits__pillar {
		padding: 1rem 0 0;
		border-left: 0;
		border-top: 1px solid rgba(148, 163, 184, 0.16);
	}

	.mh-modes__strip {
		display: flex;
		overflow-x: auto;
		gap: 0.75rem;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
	}

	.mh-mode-card {
		flex: 0 0 78%;
	}

	.mh-audience-card { min-height: 0; }
	.mh-hero__cta,
	.mh-lime-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.mh-lime-hero__device-frame {
		width: min(100%, 240px);
		max-width: 240px;
	}

	.mh-journey__benefits {
		grid-template-columns: 1fr 1fr;
		gap: 1.1rem;
	}

	.mh-journey__title {
		font-size: clamp(1.85rem, 8vw, 2.4rem);
	}

	.mh-journey {
		padding-top: 2.1rem;
		padding-bottom: 1.85rem;
	}

	.mh-journey__stage {
		min-height: 230px;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--car {
		--park-left: 0%;
		--fleet-width: 20%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--van {
		--park-left: 21%;
		--fleet-width: 22%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--lorry {
		--park-left: 44%;
		--fleet-width: 34%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--motorbike {
		--park-left: 78%;
		--fleet-width: 13%;
	}

	.moot-fleet-stage--journey .moot-fleet-vehicle--bicycle {
		--park-left: 88%;
		--fleet-width: 12%;
	}

	.moot-live-dashboard { padding: 2.5rem 1rem; }
	.moot-live-dashboard__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * The band between the hamburger and a comfortable desktop.
 *
 * The theme's own nav-toggle does not appear until 768px, so every width from 769
 * up has to seat the logo, six nav items and two buttons on one row. Measured, the
 * full-size header only fits down to about 1164px: at 1084 the nav ran 27px into
 * the buttons and at 804 it ran 150px in, which photographed at 1024 as
 * "Resources" printed straight through "Log In". No horizontal scrollbar appears,
 * so this is invisible to an overflow check -- see tools/_probe_header_fit.py.
 *
 * Nothing is hidden or restructured here; the same row is simply tightened. The
 * 28px item gap, the link padding and the 6vw edge padding together give back more
 * than the 150px needed at the narrow end.
 */
@media (min-width: 769px) and (max-width: 1180px) {
	body.moot-front-page .site-header__inner {
		padding-inline: 1.5rem;
		gap: 0.75rem;
	}

	body.moot-front-page .nav-menu,
	body.moot-front-page .primary-nav__list {
		gap: 10px;
	}

	body.moot-front-page .primary-nav__list a,
	body.moot-front-page .primary-nav__list button,
	body.moot-front-page .nav-menu > li > a,
	body.moot-front-page .nav-dropdown-trigger {
		padding-inline: 0.3rem;
		font-size: 0.82rem;
	}

	body.moot-front-page .site-brand__tagline {
		display: none;
	}

	body.moot-front-page .btn--header-login,
	body.moot-front-page .header-actions .btn--primary {
		padding: 0.5rem 0.85rem;
		font-size: 0.82rem;
	}
}

/* Tighter still for the bottom of that band. One step was not enough: with the
   values above the nav still ran 7px into the buttons at 944px and 92px in at
   774px, because six labels plus two buttons in 774px is simply tight. These are
   close to the theme's own default header metrics, which is what used to fit here
   before the front-page header was widened. */
@media (min-width: 769px) and (max-width: 1000px) {
	body.moot-front-page .site-header__inner {
		padding-inline: 0.6rem;
		gap: 0.4rem;
	}

	body.moot-front-page .nav-menu,
	body.moot-front-page .primary-nav__list {
		gap: 2px;
	}

	body.moot-front-page .primary-nav__list a,
	body.moot-front-page .primary-nav__list button,
	body.moot-front-page .nav-menu > li > a,
	body.moot-front-page .nav-dropdown-trigger {
		padding-inline: 0.1rem;
		font-size: 0.73rem;
	}

	body.moot-front-page .site-header .moot-brand-logo__img {
		height: 30px;
	}

	body.moot-front-page .btn--header-login,
	body.moot-front-page .header-actions .btn--primary {
		padding: 0.45rem 0.65rem;
		font-size: 0.74rem;
	}
}

@media (max-width: 768px) {
	body.moot-front-page .site-header__inner {
		display: flex;
		justify-content: space-between;
		min-height: 60px;
		padding: 0.75rem 1rem;
	}

	/* The shared hamburger is a solid white tile with dark bars, which is right on
	   the light header the rest of the site uses and reads as a bright sticker on
	   this one. Outlined and quiet instead, matching Log In. */
	body.moot-front-page .nav-toggle {
		background: transparent;
		border: 1px solid rgba(226, 232, 240, 0.34);
		border-radius: 0.7rem;
	}

	body.moot-front-page .nav-toggle__bar {
		background: #ffffff;
	}

	body.moot-front-page .primary-nav {
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		background: rgba(6, 11, 24, 0.96);
		border-bottom: 1px solid rgba(148, 163, 184, 0.14);
		padding: 1rem;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
	}

	body.moot-front-page .primary-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	body.moot-front-page .primary-nav__list,
	body.moot-front-page .nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	body.moot-front-page .dropdown-menu,
	body.moot-front-page .moot-nav__menu {
		position: static;
		transform: none;
		display: none;
		width: 100%;
		margin-top: 0.35rem;
		box-shadow: none;
	}

	body.moot-front-page .nav-item-with-dropdown.is-open .dropdown-menu,
	body.moot-front-page .moot-nav__dropdown.is-open .moot-nav__menu {
		display: block;
	}

	body.moot-front-page .nav-item-with-dropdown:hover .dropdown-menu,
	body.moot-front-page .nav-item-with-dropdown:focus-within .dropdown-menu,
	body.moot-front-page .moot-nav__dropdown:hover .moot-nav__menu,
	body.moot-front-page .moot-nav__dropdown:focus-within .moot-nav__menu {
		display: none;
	}

	body.moot-front-page .nav-item-with-dropdown.is-open:hover .dropdown-menu,
	body.moot-front-page .moot-nav__dropdown.is-open:hover .moot-nav__menu {
		display: block;
	}
}