/**
 * MossyDigital — front-end styles.
 *
 * Mobile-first. Single stylesheet, no framework.
 * Contents: 1 tokens · 2 reset · 3 layout · 4 typography · 5 buttons
 *           6 header · 7 hero · 8 sections · 9 confirmation · 10 footer
 *           11 motion · 12 print
 */

/* ============================================================ 1. Tokens */

:root {
	--md-orange: #ff7a00;
	--md-orange-dark: #e56d00;
	--md-orange-soft: rgba( 255, 122, 0, .12 );

	--md-ink: #101116;
	--md-ink-2: #191b23;
	--md-ink-3: #23262f;

	--md-text: #1b1d24;
	--md-muted: #5c6070;
	--md-muted-dark: rgba( 255, 255, 255, .68 );

	--md-bg: #ffffff;
	--md-bg-muted: #f7f7f9;
	--md-line: #e6e7ec;
	--md-line-dark: rgba( 255, 255, 255, .12 );

	--md-good: #17b26a;
	--md-warn: #f79009;
	--md-bad: #f04438;

	--md-radius: 14px;
	--md-radius-lg: 22px;
	--md-shadow: 0 1px 2px rgba( 16, 17, 22, .04 ), 0 12px 32px -12px rgba( 16, 17, 22, .12 );
	--md-shadow-lg: 0 24px 60px -20px rgba( 16, 17, 22, .28 );

	--md-shell: 1180px;
	--md-gutter: 20px;
	--md-section-y: 72px;

	--md-font: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media ( min-width: 768px ) {
	:root {
		--md-gutter: 32px;
		--md-section-y: 104px;
	}
}

@media ( min-width: 1100px ) {
	:root {
		--md-section-y: 128px;
	}
}

/* ============================================================= 2. Reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body.md {
	margin: 0;
	font-family: var( --md-font );
	font-size: 17px;
	line-height: 1.6;
	color: var( --md-text );
	background: var( --md-bg );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: inherit;
}

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

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.14;
	letter-spacing: -.02em;
	font-weight: 700;
	text-wrap: balance;
}

p {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var( --md-orange );
	outline-offset: 3px;
	border-radius: 4px;
}

.md-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var( --md-ink );
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
}

.md-skip:focus {
	left: 0;
}

/* ============================================================ 3. Layout */

.md-shell {
	width: 100%;
	max-width: var( --md-shell );
	margin-inline: auto;
	padding-inline: var( --md-gutter );
}

.md-shell--narrow {
	max-width: 840px;
}

.md-section {
	padding-block: var( --md-section-y );
	position: relative;
}

.md-section--muted {
	background: var( --md-bg-muted );
}

.md-section--dark {
	background: var( --md-ink );
	color: #fff;
}

.md-section--dark .md-head__body,
.md-section--dark .md-card__text {
	color: var( --md-muted-dark );
}

.md-section__cta {
	margin-top: 48px;
	text-align: center;
}

.md-grid {
	display: grid;
	gap: 20px;
	margin-top: 48px;
}

@media ( min-width: 640px ) {
	.md-grid--2,
	.md-grid--3 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1000px ) {
	.md-grid--3 {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* ======================================================== 4. Typography */

.md-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --md-orange );
}

.md-kicker__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --md-orange );
	flex: none;
}

.md-kicker--badge {
	padding: 7px 14px;
	border-radius: 999px;
	background: var( --md-orange-soft );
	letter-spacing: .08em;
}

.md-section--dark .md-kicker--badge {
	background: rgba( 255, 122, 0, .18 );
}

.md-head {
	max-width: 760px;
}

.md-head--center {
	margin-inline: auto;
	text-align: center;
}

.md-head__title {
	font-size: clamp( 30px, 5.2vw, 50px );
}

.md-head__body {
	margin-top: 20px;
	font-size: clamp( 17px, 1.9vw, 20px );
	line-height: 1.62;
	color: var( --md-muted );
	text-wrap: pretty;
}

.md-hl {
	color: var( --md-orange );
}

.md-note {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.55;
	color: var( --md-muted );
}

.md-note--center {
	text-align: center;
	margin-top: 32px;
}

.md-section--dark .md-note {
	color: var( --md-muted-dark );
}

.md-check {
	width: 20px;
	height: 20px;
	flex: none;
	color: var( --md-orange );
	margin-top: 2px;
}

.md-ticks {
	display: grid;
	gap: 14px;
	margin-top: 28px;
}

.md-ticks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	line-height: 1.55;
}

/* =========================================================== 5. Buttons */

.md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
	text-align: center;
}

.md-btn--primary {
	background: var( --md-orange );
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba( 255, 122, 0, .8 );
}

.md-btn--primary:hover {
	background: var( --md-orange-dark );
	transform: translateY( -2px );
}

.md-btn--ghost {
	border-color: currentColor;
	color: var( --md-text );
	background: transparent;
}

.md-btn--ghost:hover {
	background: var( --md-text );
	color: #fff;
}

.md-btn--sm {
	padding: 10px 18px;
	font-size: 15px;
}

.md-btn--lg {
	padding: 18px 32px;
	font-size: 18px;
}

.md-btn--block {
	display: flex;
	width: 100%;
}

.md-btn__arrow {
	width: 18px;
	height: 18px;
	flex: none;
	transition: transform .18s ease;
}

.md-btn:hover .md-btn__arrow {
	transform: translateX( 3px );
}

/* ============================================================ 6. Header */

.md-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba( 255, 255, 255, .86 );
	backdrop-filter: saturate( 180% ) blur( 14px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 14px );
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.md-header.is-stuck {
	border-bottom-color: var( --md-line );
	box-shadow: 0 6px 24px -18px rgba( 16, 17, 22, .5 );
}

.md-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 68px;
}

.md-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: none;
}

.md-logo__img {
	max-height: 34px;
	width: auto;
}

.md-logo__text {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var( --md-ink );
}

.md-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
}

.md-nav__link {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	color: var( --md-muted );
	transition: color .16s ease, background-color .16s ease;
}

.md-nav__link:hover {
	color: var( --md-ink );
	background: var( --md-bg-muted );
}

.md-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.md-burger {
	width: 42px;
	height: 42px;
	display: grid;
	place-content: center;
	gap: 5px;
	padding: 0;
	border: 1px solid var( --md-line );
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.md-burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var( --md-ink );
	transition: transform .2s ease, opacity .2s ease;
}

.md-nav-open .md-burger span:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

.md-nav-open .md-burger span:nth-child( 2 ) {
	opacity: 0;
}

.md-nav-open .md-burger span:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/* Mobile nav panel */
@media ( max-width: 979px ) {
	.md-nav {
		position: fixed;
		inset: 68px 0 auto;
		background: #fff;
		border-bottom: 1px solid var( --md-line );
		padding: 12px var( --md-gutter ) 24px;
		transform: translateY( -12px );
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
		box-shadow: var( --md-shadow );
	}

	.md-nav-open .md-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.md-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.md-nav__link {
		padding: 14px 12px;
		font-size: 17px;
		border-radius: 10px;
		color: var( --md-ink );
	}

	.md-nav-open {
		overflow: hidden;
	}
}

@media ( min-width: 980px ) {
	.md-burger {
		display: none;
	}
}

@media ( max-width: 479px ) {
	.md-header__actions .md-btn {
		display: none;
	}
}

/* ============================================================== 7. Hero */

.md-hero {
	position: relative;
	background: var( --md-ink );
	color: #fff;
	padding-block: 72px 80px;
	overflow: hidden;
	isolation: isolate;
}

@media ( min-width: 900px ) {
	.md-hero {
		padding-block: 104px 112px;
	}
}

.md-hero__glow {
	position: absolute;
	z-index: -1;
	top: -30%;
	right: -10%;
	width: 780px;
	height: 780px;
	max-width: 120vw;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 255, 122, 0, .30 ) 0%, rgba( 255, 122, 0, 0 ) 62% );
	pointer-events: none;
}

.md-hero__inner {
	display: grid;
	gap: 52px;
	align-items: center;
}

@media ( min-width: 980px ) {
	.md-hero__inner {
		grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, .95fr );
		gap: 64px;
	}
}

.md-hero__title {
	font-size: clamp( 34px, 6.2vw, 62px );
	letter-spacing: -.03em;
}

.md-hero__sub {
	margin-top: 22px;
	max-width: 56ch;
	font-size: clamp( 17px, 2vw, 20px );
	line-height: 1.62;
	color: var( --md-muted-dark );
	text-wrap: pretty;
}

.md-hero__actions {
	margin-top: 34px;
}

.md-hero__note {
	margin-top: 14px;
	font-size: 14px;
	color: rgba( 255, 255, 255, .55 );
}

.md-hero__bullets {
	display: grid;
	gap: 12px;
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var( --md-line-dark );
}

.md-hero__bullets li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 16px;
	color: rgba( 255, 255, 255, .82 );
}

.md-hero__image {
	border-radius: var( --md-radius-lg );
	box-shadow: var( --md-shadow-lg );
	width: 100%;
}

/* Scorecard mockup */

.md-scorecard {
	background: #fff;
	color: var( --md-text );
	border-radius: var( --md-radius-lg );
	box-shadow: var( --md-shadow-lg );
	overflow: hidden;
	transform: perspective( 1400px ) rotateY( -6deg ) rotateX( 2deg );
	transform-origin: left center;
}

@media ( max-width: 979px ) {
	.md-scorecard {
		transform: none;
	}
}

.md-scorecard__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 13px 18px;
	background: var( --md-bg-muted );
	border-bottom: 1px solid var( --md-line );
}

.md-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d6d8de;
}

.md-dot--r { background: #ff5f57; }
.md-dot--y { background: #febc2e; }
.md-dot--g { background: #28c840; }

.md-scorecard__name {
	margin-left: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var( --md-muted );
}

.md-scorecard__body {
	padding: 26px 24px 24px;
}

.md-scorecard__query {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --md-line );
}

.md-scorecard__rows {
	display: grid;
	gap: 16px;
	margin-top: 22px;
}

.md-scorecard__row {
	display: grid;
	grid-template-columns: 92px 1fr 34px;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.md-scorecard__engine {
	font-weight: 700;
	color: var( --md-muted );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.md-meter {
	display: block;
	height: 9px;
	border-radius: 999px;
	background: #eeeff3;
	overflow: hidden;
}

.md-meter__fill {
	display: block;
	height: 100%;
	width: var( --w, 0% );
	border-radius: 999px;
	background: var( --md-bad );
	animation: md-fill .9s cubic-bezier( .22, .8, .3, 1 ) both;
	animation-delay: calc( var( --i, 0 ) * .12s + .25s );
}

.is-warn .md-meter__fill { background: var( --md-warn ); }
.is-good .md-meter__fill { background: var( --md-good ); }

.md-scorecard__score {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.is-bad .md-scorecard__score { color: var( --md-bad ); }
.is-warn .md-scorecard__score { color: var( --md-warn ); }
.is-good .md-scorecard__score { color: var( --md-good ); }

.md-scorecard__foot {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var( --md-line );
	font-size: 13px;
	font-weight: 700;
	color: var( --md-bad );
}

@keyframes md-fill {
	from { width: 0; }
}

/* ========================================================== 8. Sections */

/* Logo bar */

.md-logos {
	/* Extra room at the foot: the per-logo scale can push a mark slightly
	   past its slot, and without it the taller ones crowd the divider. */
	padding-block: 52px 76px;
	border-bottom: 1px solid var( --md-line );
	background: var( --md-bg );
}

@media ( min-width: 700px ) {
	.md-logos {
		padding-block: 60px 88px;
	}
}

.md-logos__title {
	text-align: center;
	max-width: 34ch;
	margin-inline: auto;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --md-muted );
}

/* A grid rather than a wrapping flex row: six logos of differing widths
   wrapped into ragged, uneven rows on narrow screens. Fixed columns keep
   them aligned on both axes at every size. */
.md-logos__list {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	align-items: center;
	justify-items: center;

	/* Generous row gap: a scaled-up mark can spill past its slot, and on two
	   rows that spill lands on the logo underneath. */
	gap: 64px 14px;
	margin-top: 32px;
}

@media ( min-width: 480px ) {
	.md-logos__list {
		gap: 64px 20px;
	}
}

@media ( min-width: 700px ) {
	.md-logos__list {
		grid-template-columns: repeat( 6, 1fr );
		gap: 28px 18px;
		margin-top: 38px;
	}
}

/* Each logo gets an equal-height slot and fills it. The supplied artwork has
   very different aspect ratios and a lot of built-in transparent padding, so
   capping by height alone left the stacked marks (Bundesliga, Holiday Inn)
   looking tiny next to the wide ones (Kate, Peninsula). Filling a fixed slot
   with object-fit evens out the optical weight. */
.md-logos__item {
	display: grid;
	place-items: center;
	width: 100%;
	height: 54px;
	padding-inline: 4px;
}

@media ( min-width: 480px ) {
	.md-logos__item {
		height: 62px;
	}
}

@media ( min-width: 700px ) {
	.md-logos__item {
		height: 74px;
	}
}

.md-logos__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;

	/* Full brand colour. --s is the per-logo optical size set in the admin:
	   scaling from the centre keeps every mark on the same axis regardless of
	   how much transparent padding its artwork carries. */
	opacity: 1;
	filter: none;
	transform: scale( var( --s, 1 ) );
	transition: transform .2s ease, filter .2s ease;
}

/* Pale artwork — Anantara's taupe all but vanishes on white. Deepened rather
   than inverted, so the brand colour survives. */
.md-logos__img--dark {
	filter: brightness( .78 ) saturate( 1.1 ) contrast( 1.15 );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.md-logos__item:hover .md-logos__img {
		transform: scale( calc( var( --s, 1 ) * 1.05 ) );
	}
}

.md-logos__placeholder {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #b9bcc7;
}

/* Stats */

.md-stats {
	padding-block: 56px;
	background: var( --md-bg );
}

.md-stats__grid {
	display: grid;
	gap: 28px 20px;
	grid-template-columns: repeat( 2, 1fr );
	text-align: center;
}

@media ( min-width: 860px ) {
	.md-stats__grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.md-stat {
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
	gap: 6px;
	padding-inline: 8px;
}

@media ( min-width: 860px ) {
	.md-stat + .md-stat {
		border-left: 1px solid var( --md-line );
	}
}

/* Sub-heads and numbers run ~2pt larger than the original draft, per the
   client's first-draft edits. */

.md-stat__value {
	font-size: clamp( 37px, 4.8vw, 49px );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var( --md-orange );
}

.md-stat__label {
	font-size: 17.5px;
	line-height: 1.45;
	color: var( --md-muted );
	text-wrap: balance;
}

/* Cards */

.md-card {
	padding: 30px 26px;
	border: 1px solid var( --md-line );
	border-radius: var( --md-radius-lg );
	background: #fff;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.md-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --md-shadow );
	border-color: #d9dbe3;
}

.md-card--glass {
	background: rgba( 255, 255, 255, .045 );
	border-color: var( --md-line-dark );
}

.md-card--glass:hover {
	background: rgba( 255, 255, 255, .07 );
	border-color: rgba( 255, 255, 255, .22 );
}

.md-card--why {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.md-card__title {
	font-size: 20px;
	letter-spacing: -.01em;
}

.md-card__text {
	margin-top: 12px;
	font-size: 17.5px;
	line-height: 1.6;
	color: var( --md-muted );
	text-wrap: pretty;
}

.md-card__icon {
	display: grid;
	place-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 20px;
	border-radius: 12px;
	background: var( --md-orange-soft );
	color: var( --md-orange );
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	overflow: hidden;
}

.md-card__icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* Old vs new comparison */

.md-compare {
	display: grid;
	gap: 18px;
	margin-top: 52px;
	align-items: center;
}

@media ( min-width: 900px ) {
	.md-compare {
		grid-template-columns: 1fr auto 1fr;
		gap: 26px;
	}
}

.md-compare__col {
	padding: 32px 28px;
	border-radius: var( --md-radius-lg );
	border: 1px solid var( --md-line );
	background: var( --md-bg-muted );
}

.md-compare__col--new {
	background: var( --md-ink );
	border-color: var( --md-ink );
	color: #fff;
	box-shadow: var( --md-shadow-lg );
}

.md-compare__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --md-muted );
}

.md-compare__col--new .md-compare__title {
	color: var( --md-orange );
}

.md-compare__list {
	display: grid;
	gap: 15px;
	margin-top: 22px;
}

.md-compare__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.5;
}

.md-cross {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	color: #b0b4c0;
}

.md-compare__arrow {
	display: grid;
	place-content: center;
	color: var( --md-orange );
}

.md-compare__arrow svg {
	width: 44px;
}

@media ( max-width: 899px ) {
	.md-compare__arrow svg {
		transform: rotate( 90deg );
		width: 32px;
	}
}

/* Method steps */

.md-steps {
	display: grid;
	gap: 20px;
	margin-top: 52px;
	counter-reset: step;
}

@media ( min-width: 700px ) {
	.md-steps {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1060px ) {
	.md-steps {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.md-step {
	position: relative;
	padding: 30px 26px;
	border-radius: var( --md-radius-lg );
	background: #fff;
	border: 1px solid var( --md-line );
	transition: transform .22s ease, box-shadow .22s ease;
}

.md-step:hover {
	transform: translateY( -4px );
	box-shadow: var( --md-shadow );
}

/* Connector line between steps on wide screens. */
@media ( min-width: 1060px ) {
	.md-step:not( :last-child )::after {
		content: '';
		position: absolute;
		top: 52px;
		right: -20px;
		width: 20px;
		height: 1px;
		background: var( --md-line );
	}
}

.md-step__num {
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var( --md-orange );
}

.md-step__title {
	margin-top: 14px;
	font-size: 22px;
}

.md-step__text {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.6;
	color: var( --md-muted );
}

/* Split layout (chatbot) */

.md-split {
	display: grid;
	gap: 48px;
	align-items: center;
}

@media ( min-width: 960px ) {
	.md-split {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, .85fr );
		gap: 64px;
	}
}

/* "Coming soon" badge + Syntra lockup */

.md-chatbot__brand {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.md-chatbot__brand .md-kicker {
	margin-bottom: 0;
}

.md-chatbot__logo {
	max-height: 30px;
	width: auto;
}

.md-chat {
	border-radius: var( --md-radius-lg );
	background: #fff;
	color: var( --md-text );
	box-shadow: var( --md-shadow-lg );
	overflow: hidden;
}

.md-chat__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var( --md-line );
}

.md-chat__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --md-orange ), #ffb066 );
	flex: none;
}

.md-chat__who {
	font-weight: 700;
	font-size: 15px;
}

.md-chat__status {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	color: var( --md-good );
}

.md-chat__log {
	display: grid;
	gap: 12px;
	padding: 22px 18px;
	background: var( --md-bg-muted );
}

.md-chat__msg {
	max-width: 84%;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 15px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid var( --md-line );
	border-bottom-left-radius: 5px;
}

.md-chat__msg.is-user {
	margin-left: auto;
	background: var( --md-orange );
	border-color: var( --md-orange );
	color: #fff;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 5px;
}

.md-chat__typing {
	display: flex;
	gap: 5px;
	width: max-content;
	padding: 15px 16px;
}

.md-chat__typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c3c6d0;
	animation: md-blink 1.3s infinite ease-in-out;
}

.md-chat__typing span:nth-child( 2 ) { animation-delay: .18s; }
.md-chat__typing span:nth-child( 3 ) { animation-delay: .36s; }

@keyframes md-blink {
	0%, 60%, 100% { opacity: .3; transform: translateY( 0 ); }
	30% { opacity: 1; transform: translateY( -3px ); }
}

/* Case studies */

.md-case {
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	border-radius: var( --md-radius-lg );
	background: #fff;
	border: 1px solid var( --md-line );
	transition: transform .22s ease, box-shadow .22s ease;
}

.md-case:hover {
	transform: translateY( -4px );
	box-shadow: var( --md-shadow );
}

.md-case__media {
	margin: -30px -26px 24px;
	overflow: hidden;
	border-radius: var( --md-radius-lg ) var( --md-radius-lg ) 0 0;
}

.md-case__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.md-case__client {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --md-muted );
}

.md-case__metric {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.md-case__metricValue {
	font-size: 47px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var( --md-orange );
}

.md-case__metricLabel {
	font-size: 18px;
	font-weight: 700;
	color: var( --md-muted );
}

.md-case__title {
	margin-top: 18px;
	font-size: 20px;
}

.md-case__text {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.6;
	color: var( --md-muted );
}

/* Testimonials */

.md-quote {
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	border-radius: var( --md-radius-lg );
	background: var( --md-bg-muted );
	border: 1px solid var( --md-line );
}

.md-quote__mark {
	width: 28px;
	color: var( --md-orange );
	opacity: .85;
}

.md-quote__text {
	margin: 18px 0 0;
	font-size: 16.5px;
	line-height: 1.62;
	text-wrap: pretty;
}

.md-quote__by {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: auto;
	padding-top: 24px;
}

.md-quote__avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.md-quote__avatar--initial {
	display: grid;
	place-content: center;
	background: var( --md-ink );
	color: #fff;
	font-weight: 700;
	font-size: 17px;
}

.md-quote__name {
	display: block;
	font-size: 15.5px;
}

.md-quote__role {
	display: block;
	font-size: 14px;
	color: var( --md-muted );
}

/* Offer */

.md-offer {
	display: grid;
	gap: 36px;
	align-items: start;
}

@media ( min-width: 980px ) {
	.md-offer {
		grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, .9fr );
		gap: 56px;
	}
}

.md-offer__list {
	display: grid;
	gap: 22px;
	margin-top: 34px;
}

.md-offer__list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.md-offer__itemTitle {
	font-size: 18px;
}

.md-offer__itemText {
	margin-top: 6px;
	font-size: 17px;
	line-height: 1.58;
	color: var( --md-muted );
}

.md-offer__side {
	padding: 30px 28px;
	border-radius: var( --md-radius-lg );
	background: #fff;
	border: 1px solid var( --md-line );
	box-shadow: var( --md-shadow );
	position: sticky;
	top: 92px;
}

@media ( max-width: 979px ) {
	.md-offer__side {
		position: static;
	}
}

.md-bonus {
	padding: 22px 22px 24px;
	margin-bottom: 24px;
	border-radius: var( --md-radius );
	background: var( --md-ink );
	color: #fff;
	position: relative;
	overflow: hidden;
}

.md-bonus::after {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 255, 122, 0, .35 ), transparent 65% );
	pointer-events: none;
}

.md-bonus__tag {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --md-orange );
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.md-bonus__title {
	margin-top: 14px;
	font-size: 21px;
}

.md-bonus__text {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var( --md-muted-dark );
}

/* FAQ */

.md-faq {
	margin-top: 44px;
	border-top: 1px solid var( --md-line );
}

.md-faq__item {
	border-bottom: 1px solid var( --md-line );
}

.md-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	cursor: pointer;
	list-style: none;
}

.md-faq__q::-webkit-details-marker {
	display: none;
}

.md-faq__q:hover {
	color: var( --md-orange );
}

.md-faq__chev {
	width: 22px;
	height: 22px;
	flex: none;
	color: var( --md-orange );
	transition: transform .22s ease;
}

.md-faq__item[open] .md-faq__chev {
	transform: rotate( 180deg );
}

.md-faq__a {
	padding: 0 4px 24px;
	max-width: 68ch;
}

.md-faq__a p {
	font-size: 16.5px;
	line-height: 1.65;
	color: var( --md-muted );
	text-wrap: pretty;
}

/* Final CTA */

.md-final {
	position: relative;
	padding-block: var( --md-section-y );
	background: var( --md-ink );
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.md-final__glow {
	position: absolute;
	z-index: -1;
	bottom: -55%;
	left: 50%;
	transform: translateX( -50% );
	width: 900px;
	height: 900px;
	max-width: 150vw;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 255, 122, 0, .28 ) 0%, rgba( 255, 122, 0, 0 ) 62% );
	pointer-events: none;
}

.md-final__inner {
	text-align: center;
}

.md-final__title {
	font-size: clamp( 32px, 5.6vw, 54px );
	letter-spacing: -.03em;
}

.md-final__body {
	margin: 20px auto 34px;
	max-width: 54ch;
	font-size: clamp( 17px, 2vw, 20px );
	line-height: 1.6;
	color: var( --md-muted-dark );
}

.md-final__note {
	margin-top: 18px;
	font-size: 14px;
	color: rgba( 255, 255, 255, .55 );
}

/* ====================================================== 9. Confirmation */

.md-confirm {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.md-confirm__head {
	padding-block: 72px 56px;
	text-align: center;
	position: relative;
}

.md-confirm {
	background: var( --md-ink );
	color: #fff;
}

.md-confirm__glow {
	position: absolute;
	z-index: -1;
	top: -320px;
	left: 50%;
	transform: translateX( -50% );
	width: 900px;
	height: 900px;
	max-width: 150vw;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 255, 122, 0, .26 ) 0%, rgba( 255, 122, 0, 0 ) 60% );
	pointer-events: none;
}

.md-confirm__tick {
	display: grid;
	place-content: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 26px;
	border-radius: 50%;
	background: var( --md-orange );
	color: #fff;
	box-shadow: 0 18px 40px -14px rgba( 255, 122, 0, .9 );
	animation: md-pop .5s cubic-bezier( .2, .9, .3, 1.3 ) both;
}

.md-confirm__tick svg {
	width: 34px;
	height: 34px;
}

@keyframes md-pop {
	from { transform: scale( .5 ); opacity: 0; }
}

.md-confirm__title {
	font-size: clamp( 30px, 5.2vw, 50px );
	letter-spacing: -.03em;
}

.md-confirm__sub {
	margin: 20px auto 0;
	max-width: 56ch;
	font-size: clamp( 16.5px, 2vw, 19px );
	line-height: 1.6;
	color: var( --md-muted-dark );
}

.md-confirm__when {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .08 );
	border: 1px solid var( --md-line-dark );
	font-weight: 700;
	font-size: 15px;
}

.md-confirm__cal {
	width: 18px;
	height: 18px;
	color: var( --md-orange );
}

.md-confirm__body {
	display: grid;
	gap: 18px;
	padding-bottom: 88px;
}

.md-panel {
	padding: 30px 28px;
	border-radius: var( --md-radius-lg );
	background: rgba( 255, 255, 255, .045 );
	border: 1px solid var( --md-line-dark );
	text-align: left;
}

.md-panel--bonus {
	background: #fff;
	color: var( --md-text );
	border-color: #fff;
	box-shadow: var( --md-shadow-lg );
}

.md-panel--bonus .md-panel__text {
	color: var( --md-muted );
}

.md-panel--bonus .md-panel__title {
	margin-top: 14px;
}

.md-panel__title {
	font-size: 22px;
}

.md-panel__intro {
	margin-top: 12px;
	color: var( --md-muted-dark );
}

.md-panel__text {
	margin-top: 12px;
	font-size: 16.5px;
	line-height: 1.62;
	color: var( --md-muted-dark );
	text-wrap: pretty;
}

.md-todo {
	display: grid;
	gap: 20px;
	margin-top: 24px;
}

.md-todo li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.md-todo__num {
	display: grid;
	place-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var( --md-orange );
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.md-todo__title {
	font-size: 18px;
}

.md-todo__text {
	margin-top: 5px;
	font-size: 15.5px;
	line-height: 1.58;
	color: var( --md-muted-dark );
}

.md-confirm .md-note {
	color: rgba( 255, 255, 255, .6 );
	max-width: 62ch;
	margin-inline: auto;
}

.md-confirm__back {
	margin-top: 8px;
	text-align: center;
	font-weight: 700;
}

.md-confirm__back a {
	color: var( --md-orange );
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.md-panel--free :is( p, ul, ol ) {
	color: var( --md-muted-dark );
}

/* The confirmation page has no nav; keep the header minimal. */
.md-page--confirmation .md-main {
	padding: 0;
}

/* =========================================================== 10. Footer */

.md-footer {
	background: var( --md-ink-2 );
	color: rgba( 255, 255, 255, .72 );
	padding-block: 60px 30px;
	font-size: 15px;
}

.md-footer__top {
	display: grid;
	gap: 36px;
	padding-bottom: 44px;
	border-bottom: 1px solid var( --md-line-dark );
}

@media ( min-width: 760px ) {
	.md-footer__top {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
		gap: 32px;
	}
}

.md-footer__about {
	margin-top: 18px;
	max-width: 38ch;
	line-height: 1.6;
}

.md-logo--footer .md-logo__img {
	max-height: 32px;
}

.md-logo--footer .md-logo__text {
	color: #fff;
}

.md-footer__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, .45 );
	margin-bottom: 16px;
}

.md-footer__list {
	display: grid;
	gap: 11px;
}

.md-footer__list a {
	text-decoration: none;
	transition: color .16s ease;
}

.md-footer__list a:hover {
	color: var( --md-orange );
}

.md-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 26px;
	font-size: 14px;
	color: rgba( 255, 255, 255, .5 );
}

.md-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.md-footer__legal a {
	text-decoration: none;
}

.md-footer__legal a:hover {
	color: var( --md-orange );
}

.md-footer__entity {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var( --md-line-dark );
	font-size: 13px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, .42 );
	max-width: 70ch;
}

/* ===================================== Articles, 404 and editor content */

.md-article {
	padding-block: 72px 96px;
}

.md-post + .md-post {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var( --md-line );
}

.md-post__title {
	font-size: clamp( 28px, 4.4vw, 42px );
}

.md-post__title a {
	text-decoration: none;
}

.md-prose {
	margin-top: 22px;
}

.md-prose :is( p, ul, ol, blockquote, figure, pre ) {
	margin-bottom: 20px;
}

.md-prose :is( h2, h3, h4 ) {
	margin: 36px 0 14px;
}

.md-prose h2 { font-size: 28px; }
.md-prose h3 { font-size: 22px; }

.md-prose :is( ul, ol ) {
	padding-left: 22px;
	list-style: revert;
}

.md-prose li {
	margin-bottom: 8px;
}

.md-prose a {
	color: var( --md-orange );
}

.md-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.md-pagination {
	margin-top: 48px;
	display: flex;
	gap: 12px;
}

/* ==================================================== 11. Exit popup */

.md-pop {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.md-pop[hidden] {
	display: none;
}

.md-pop__veil {
	position: absolute;
	inset: 0;
	background: rgba( 16, 17, 22, .58 );
	opacity: 0;
	transition: opacity .22s ease;
}

.md-pop.is-open .md-pop__veil {
	opacity: 1;
}

.md-pop__box {
	position: relative;
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: var( --md-radius-lg );
	box-shadow: var( --md-shadow-lg );
	overflow: hidden;

	/* The brief caps mobile coverage at 60% of the screen — larger mobile
	   interstitials are penalised by Google and irritate people. Content
	   scrolls inside rather than growing the box. */
	max-height: 60vh;
	overflow-y: auto;

	opacity: 0;
	transform: translateY( 14px ) scale( .98 );
	transition: opacity .22s ease, transform .22s cubic-bezier( .2, .8, .3, 1 );
}

.md-pop.is-open .md-pop__box {
	opacity: 1;
	transform: none;
}

@media ( min-width: 700px ) {
	.md-pop__box {
		max-height: 86vh;
	}
}

.md-pop__x {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: grid;
	place-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 16, 17, 22, .06 );
	color: var( --md-muted );
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.md-pop__x:hover {
	background: rgba( 16, 17, 22, .12 );
	color: var( --md-ink );
}

.md-pop__x svg {
	width: 18px;
	height: 18px;
}

.md-pop__body {
	padding: 34px 28px 28px;
}

.md-pop__cover {
	margin-bottom: 20px;
	text-align: center;
}

.md-pop__cover img {
	display: inline-block;
	max-height: 130px;
	width: auto;
	border-radius: 8px;
	box-shadow: 0 12px 28px -14px rgba( 16, 17, 22, .5 );
}

.md-pop__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --md-orange );
	margin-bottom: 10px;
}

.md-pop__title {
	font-size: clamp( 22px, 4.4vw, 27px );
	letter-spacing: -.02em;
}

.md-pop__sub {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var( --md-muted );
}

.md-pop__form {
	margin-top: 20px;
}

.md-pop__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.md-pop__input {
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
	color: var( --md-text );
	background: #fff;
	border: 1px solid var( --md-line );
	border-radius: 10px;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.md-pop__input:focus {
	outline: none;
	border-color: var( --md-orange );
	box-shadow: 0 0 0 3px var( --md-orange-soft );
}

.md-pop__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var( --md-muted );
	cursor: pointer;
}

.md-pop__consent input {
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var( --md-orange );
}

.md-pop__error {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba( 240, 68, 56, .08 );
	color: #b42318;
	font-size: 14px;
	line-height: 1.45;
}

.md-pop__submit {
	margin-top: 18px;
}

.md-pop__submit.is-busy {
	opacity: .7;
	pointer-events: none;
}

.md-pop__dismiss {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 8px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var( --md-muted );
	text-decoration: underline;
	cursor: pointer;
}

.md-pop__dismiss:hover {
	color: var( --md-ink );
}

.md-pop__fine {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --md-muted );
	text-align: center;
}

.md-pop__body--done {
	text-align: center;
	padding-block: 44px;
}

.md-pop__tick {
	display: grid;
	place-content: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var( --md-orange );
	color: #fff;
}

.md-pop__tick svg {
	width: 30px;
	height: 30px;
}

.md-pop__close2 {
	margin-top: 22px;
}

/* =========================================================== 12. Motion */

.md-reveal {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity .55s cubic-bezier( .22, .8, .3, 1 ), transform .55s cubic-bezier( .22, .8, .3, 1 );
	will-change: opacity, transform;
}

.md-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.md-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================ 12. Print */

@media print {
	.md-header,
	.md-footer,
	.md-btn,
	.md-hero__glow,
	.md-final__glow,
	.md-confirm__glow {
		display: none !important;
	}

	body.md {
		color: #000;
		background: #fff;
	}

	.md-section--dark,
	.md-hero,
	.md-final,
	.md-confirm {
		background: #fff !important;
		color: #000 !important;
	}
}