/* ----------------------------------------------------------------
	Machine Measure -- product-specific styles
	Loaded after avalon-theme.css (shared brand, layout and components).
-----------------------------------------------------------------*/

/* ---------- Logo tile ---------- */
.mm-logo-tile {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #141414;
	border: 1px solid #3A3A40;
}
.mm-logo-tile img,
#header-wrap #logo .mm-logo-tile img {
	width: 24px;
	height: 24px !important;
	max-height: none;
	margin: 0;
	display: block;
	transition: none;
}

/* ---------- Hero ---------- */
.mm-hero-h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
.mm-hero-photo { position: relative; }
.mm-hero-photo picture { display: block; }
.mm-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 580px;
	object-fit: cover;
	object-position: 50% 62%;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--cc-shadow);
}

.mm-report-card {
	position: absolute;
	left: -28px;
	bottom: 32px;
	width: 230px;
	padding: 14px;
	border-radius: 12px;
	background: rgba(10, 10, 10, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
	font-size: 0.8125rem;
	color: #D4D4D8;
}
.mm-report-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-family: var(--cc-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #A1A1AA;
}
.mm-report-row {
	display: flex;
	justify-content: space-between;
	padding: 7px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mm-report-row strong { color: #4ADE80; font-family: var(--cc-mono); font-size: 0.75rem; }
.mm-pass {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.14);
	border: 1px solid rgba(34, 197, 94, 0.4);
	color: #4ADE80;
	font-family: var(--cc-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
@media (max-width: 1199.98px) { .mm-report-card { left: 16px; } }
@media (max-width: 575.98px) {
	.mm-report-card { position: static; width: auto; margin: 8px 4px 4px; }
}

/* ---------- Problem: proof strip ---------- */
.mm-proof-strip { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mm-proof-strip li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--cc-white);
	border: 1px solid var(--cc-line-light);
	color: var(--cc-ink);
	font-weight: 600;
	font-size: 0.9375rem;
}
.mm-proof-strip i { color: var(--cc-accent-ink); }

/* ---------- How it works ---------- */
.mm-steps { list-style: none; padding: 0; margin-bottom: 0; }
.mm-step-num {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--cc-accent);
	color: var(--cc-white);
	font-family: var(--cc-mono);
	font-weight: 700;
	font-size: 1rem;
}

/* ---------- Reports preview ---------- */
.mm-report-preview {
	border-radius: 16px;
	overflow: hidden;
	background: #0B0B0C;
	border: 1px solid #2A2A2E;
	box-shadow: 0 30px 80px rgba(10, 10, 10, 0.25);
	color: #D4D4D8;
}
.mm-preview-head, .mm-preview-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: #161618;
	font-weight: 700;
	color: var(--cc-white);
}
.mm-preview-head i, .mm-preview-foot i { color: var(--cc-accent-text); margin-right: 8px; }
.mm-preview-foot {
	border-top: 1px solid #2A2A2E;
	font-family: var(--cc-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: #8A8A93;
}
.mm-preview-table { width: 100%; border-collapse: collapse; }
.mm-preview-table th {
	padding: 12px 20px;
	text-align: left;
	font-family: var(--cc-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8A8A93;
	border-bottom: 1px solid #27272A;
}
.mm-preview-table td { padding: 14px 20px; border-bottom: 1px solid rgba(39, 39, 42, 0.7); }
.mm-preview-table tr:last-child td { border-bottom: 0; }
.mm-mono { font-family: var(--cc-mono); color: var(--cc-white); }