/* Page-scoped styles for /free-seo-tools/ (hub + individual tools).
   Loaded LAST via <link> on tool pages only. Follows CSS architecture:
   tokens, utilities, buttons, breadcrumb, headline-lede already loaded.
   All shapes square. No inline styles. No rounded corners. Every element
   uses site tokens from mm-tokens.css. */

/* ---------- Hub grid ---------- */
.mm-tools-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 30px;
}
@media (max-width: 991px) { .mm-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .mm-tools-grid { grid-template-columns: 1fr; } }

.mm-tool-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 28px 26px 26px;
	min-height: 260px;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
	text-decoration: none;
	color: inherit;
}
.mm-tool-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--mm-accent);
	transform: translateY(-2px);
	text-decoration: none;
}
.mm-tool-card.is-soon { opacity: .55; cursor: default; }
.mm-tool-card.is-soon:hover { transform: none; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); }

.mm-tool-chip {
	display: inline-block;
	font-family: var(--mm-mono, monospace);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mm-accent);
	border: 1px solid var(--mm-accent);
	padding: 4px 10px;
	margin-bottom: 18px;
	align-self: flex-start;
}

/* Per-category color coding for the six audit cards.
   Each card gets a distinct accent that colors the chip and the hover border. */
.mm-cat-perf       .mm-tool-chip { color: #00B4FF; border-color: #00B4FF; }
.mm-cat-onpage     .mm-tool-chip { color: #4ade80; border-color: #4ade80; }
.mm-cat-structured .mm-tool-chip { color: #f4b942; border-color: #f4b942; }
.mm-cat-technical  .mm-tool-chip { color: #a78bfa; border-color: #a78bfa; }
.mm-cat-mobile     .mm-tool-chip { color: #ff6b6b; border-color: #ff6b6b; }
.mm-cat-content    .mm-tool-chip { color: #22d3ee; border-color: #22d3ee; }

.mm-cat-perf:hover       { border-color: #00B4FF; }
.mm-cat-onpage:hover     { border-color: #4ade80; }
.mm-cat-structured:hover { border-color: #f4b942; }
.mm-cat-technical:hover  { border-color: #a78bfa; }
.mm-cat-mobile:hover     { border-color: #ff6b6b; }
.mm-cat-content:hover    { border-color: #22d3ee; }
.mm-tool-title { font-size: 22px; line-height: 1.25; margin: 0 0 10px; color: #fff; }
.mm-tool-desc  { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.75); margin: 0 0 20px; flex: 1; }
.mm-tool-cta   { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mm-accent); }

/* ---------- Audit form ---------- */
.mm-audit-form {
	display: flex;
	gap: 0;
	max-width: 720px;
	margin-top: 30px;
	border: 1px solid rgba(255,255,255,.15);
	background: rgba(0,0,0,.35);
}
.mm-audit-input {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	padding: 18px 20px;
	font-size: 16px;
	outline: none;
	min-width: 0;
}
.mm-audit-input::placeholder { color: rgba(255,255,255,.4); }
.mm-audit-submit {
	border: 0;
	padding: 0 30px;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--mm-accent);
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	transition: filter .2s ease;
}
.mm-audit-submit:hover { filter: brightness(1.1); }
.mm-audit-submit:disabled { opacity: .6; cursor: wait; }
@media (max-width: 575px) {
	.mm-audit-form { flex-direction: column; }
	.mm-audit-submit { padding: 16px; }
}

.mm-audit-hint { color: rgba(255,255,255,.55); font-size: 13px; margin-top: 12px; }

/* ---------- Result panel ---------- */
.mm-audit-result { display: none; margin-top: 40px; }
.mm-audit-result.is-visible { display: block; }

.mm-audit-status {
	color: var(--mm-accent);
	font-family: var(--mm-mono, monospace);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 20px 0 0;
}
.mm-audit-error {
	color: #ff6b6b;
	background: rgba(255,107,107,.08);
	border: 1px solid rgba(255,107,107,.35);
	padding: 14px 18px;
	margin-top: 20px;
	font-size: 14px;
}

.mm-score-panel {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.1);
	padding: 40px;
}
@media (max-width: 767px) { .mm-score-panel { grid-template-columns: 1fr; gap: 30px; padding: 28px; } }

.mm-score-dial {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: rgba(0,0,0,.4);
	border: 2px solid var(--mm-accent);
	padding: 20px;
}
.mm-score-dial.is-hot     { border-color: #ff6b6b; }
.mm-score-dial.is-warm    { border-color: #f4b942; }
.mm-score-dial.is-healthy { border-color: #4ade80; }
.mm-score-num   { font-size: 72px; font-weight: 700; color: #fff; line-height: 1; }
.mm-score-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: 10px; }
.mm-score-verdict {
	margin-top: 12px;
	padding: 4px 10px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
}
.mm-score-verdict.is-hot     { background: #ff6b6b; color: #fff; }
.mm-score-verdict.is-warm    { background: #f4b942; color: #000; }
.mm-score-verdict.is-healthy { background: #4ade80; color: #000; }

.mm-checks-list { display: flex; flex-direction: column; gap: 14px; }
.mm-check-row {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 16px;
	align-items: start;
	padding: 14px 16px;
	background: rgba(0,0,0,.25);
	border-left: 3px solid rgba(255,255,255,.15);
}
.mm-check-row.is-pass { border-left-color: #4ade80; }
.mm-check-row.is-warn { border-left-color: #f4b942; }
.mm-check-row.is-fail { border-left-color: #ff6b6b; }
.mm-check-icon { font-size: 16px; line-height: 1.6; }
.mm-check-row.is-pass .mm-check-icon { color: #4ade80; }
.mm-check-row.is-warn .mm-check-icon { color: #f4b942; }
.mm-check-row.is-fail .mm-check-icon { color: #ff6b6b; }
.mm-check-name  { font-weight: 700; color: #fff; font-size: 14px; }
.mm-check-desc  { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.mm-check-score { font-family: var(--mm-mono, monospace); font-size: 13px; color: rgba(255,255,255,.6); white-space: nowrap; }

/* ---------- Email gate ---------- */
.mm-email-gate {
	margin-top: 30px;
	padding: 30px 32px;
	background: rgba(0,0,0,.4);
	border: 1px solid var(--mm-accent);
}
.mm-email-gate.is-hot { border-color: #ff6b6b; }
.mm-email-gate h3 { color: #fff; margin: 0 0 8px; font-size: 22px; }
.mm-email-gate p  { color: rgba(255,255,255,.8); margin: 0 0 20px; font-size: 15px; line-height: 1.55; }
.mm-email-form {
	display: flex;
	gap: 0;
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(0,0,0,.5);
}
.mm-email-input {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	padding: 16px 18px;
	font-size: 15px;
	outline: none;
	min-width: 0;
}
.mm-email-input::placeholder { color: rgba(255,255,255,.4); }
.mm-email-submit {
	border: 0;
	padding: 0 26px;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--mm-accent);
	color: #fff;
	cursor: pointer;
	font-weight: 700;
}
.mm-email-gate.is-hot .mm-email-submit { background: #ff6b6b; }
@media (max-width: 575px) {
	.mm-email-form { flex-direction: column; }
	.mm-email-submit { padding: 14px; }
}
.mm-email-thanks {
	display: none;
	margin-top: 16px;
	padding: 14px 18px;
	background: rgba(74,222,128,.1);
	border: 1px solid rgba(74,222,128,.4);
	color: #4ade80;
	font-size: 14px;
}
.mm-email-thanks.is-visible { display: block; }

/* ---------- Locked issues teaser ---------- */
.mm-locked-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 20px;
	padding: 20px;
	background: rgba(0,0,0,.3);
	border: 1px dashed rgba(255,255,255,.2);
}
.mm-locked-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(255,255,255,.03);
	color: rgba(255,255,255,.5);
	font-size: 14px;
}
.mm-locked-row i { color: var(--mm-accent); }
.mm-locked-blur { filter: blur(4px); user-select: none; }

/* ---------- Loading spinner ---------- */
.mm-audit-loading {
	display: none;
	margin-top: 30px;
	padding: 40px 0;
	text-align: center;
	background: transparent;
	border: 0;
}
.mm-audit-loading.is-visible { display: block; }
.mm-audit-loading .mm-spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255,255,255,.15);
	border-top-color: var(--mm-accent);
	animation: mm-spin 1s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-audit-loading p { color: rgba(255,255,255,.7); margin-top: 16px; font-size: 14px; }

/* ---------- View my report (post-capture) ---------- */
.mm-view-report {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	padding: 0 26px;
	min-height: 100%;
	align-self: stretch;
}
.mm-view-report:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }

/* ---------- Contact modal ---------- */
.mm-modal {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.mm-modal[hidden] { display: none; }
.mm-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.mm-modal-panel {
	position: relative;
	width: 100%; max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #0a0a0a;
	border: 1px solid var(--mm-accent);
	padding: 40px 40px 32px;
	color: #fff;
	scrollbar-width: none;
}
.mm-modal-panel::-webkit-scrollbar { display: none; }
@media (max-width: 575px) { .mm-modal-panel { padding: 28px 22px 22px; } }

body.mm-modal-open { overflow: hidden; }

.mm-modal-close {
	position: absolute; top: 12px; right: 14px;
	background: transparent; border: 0;
	color: rgba(255,255,255,.6); font-size: 28px; line-height: 1;
	cursor: pointer; padding: 6px 10px;
}
.mm-modal-close:hover { color: #fff; }
.mm-modal-title { font-size: 26px; color: #fff; margin: 0 0 12px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.25; }
.mm-modal-lede  { color: rgba(255,255,255,.72); margin: 0 0 24px; font-size: 15px; line-height: 1.5; font-weight: 300; }

.mm-contact-form input[type="text"],
.mm-contact-form input[type="email"],
.mm-contact-form textarea {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	padding: 0 16px;
	height: 52px;
	line-height: 52px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.14);
	color: #fff;
	font-size: 15px;
	font-weight: 300;
	font-family: inherit;
	outline: none;
	letter-spacing: 0;
	text-transform: none;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 160ms ease, background 160ms ease;
}
.mm-contact-form input:focus,
.mm-contact-form textarea:focus {
	background: rgba(255,255,255,.06);
}
.mm-contact-form textarea {
	height: auto;
	min-height: 140px;
	line-height: 1.5;
	padding: 14px 16px;
	font-weight: 300;
}
.mm-contact-form input::placeholder,
.mm-contact-form textarea::placeholder { color: rgba(255,255,255,.4); font-weight: 300; }

/* Kill Chrome/Safari autofill white background */
.mm-contact-form input:-webkit-autofill,
.mm-contact-form input:-webkit-autofill:hover,
.mm-contact-form input:-webkit-autofill:focus,
.mm-contact-form input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.7) inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	transition: background-color 9999s ease-in-out 0s;
}
.mm-contact-form input:focus,
.mm-contact-form textarea:focus { border-color: var(--mm-accent); }
.mm-contact-form textarea { resize: vertical; min-height: 100px; }
.mm-honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; width: 0 !important; }

.mm-contact-submit {
	align-self: flex-start;
	margin-top: 8px;
	color: #fff;
}
.mm-contact-submit:disabled { opacity: .6; cursor: wait; }

.mm-contact-error {
	margin-top: 16px; padding: 12px 16px;
	background: rgba(255,107,107,.08);
	border: 1px solid rgba(255,107,107,.4);
	color: #ff9999; font-size: 14px;
}
.mm-contact-thanks {
	margin-top: 16px; padding: 14px 18px;
	background: rgba(74,222,128,.1);
	border: 1px solid rgba(74,222,128,.4);
	color: #4ade80; font-size: 14px;
}

/* Big post-submit confirmation state */
.mm-thanks-block { text-align: center; padding-top: 4px; }
.mm-thanks-check { font-size: 64px; color: #4ade80; line-height: 1; margin-bottom: 20px; }
.mm-thanks-headline { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.mm-thanks-body { color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.mm-thanks-receipt {
	background: rgba(0,0,0,.4);
	border: 1px solid rgba(255,255,255,.1);
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 13px;
	color: rgba(255,255,255,.85);
	text-align: left;
	display: grid;
	gap: 8px;
}
.mm-thanks-key {
	display: inline-block; min-width: 78px;
	color: rgba(255,255,255,.5);
	text-transform: uppercase; letter-spacing: .1em; font-size: 10px;
	margin-right: 6px;
}
.mm-thanks-preview {
	background: rgba(0,0,0,.4);
	border: 1px solid rgba(255,255,255,.1);
	border-left: 3px solid var(--mm-accent);
	padding: 14px 18px;
	margin: 0 0 24px;
	text-align: left;
}
.mm-thanks-preview-label {
	color: var(--mm-accent);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
	margin-bottom: 8px;
}
.mm-thanks-preview p {
	color: rgba(255,255,255,.85);
	font-size: 14px; line-height: 1.55;
	margin: 0; white-space: pre-wrap;
}
.mm-thanks-close { margin-top: 4px; }

/* ---------- Report page ---------- */
.mm-report-body { background: #000; }
.mm-report-header {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	margin-top: 30px;
	align-items: start;
}
@media (max-width: 767px) { .mm-report-header { grid-template-columns: 1fr; gap: 24px; } }
.mm-report-dial { width: 220px; height: 220px; }
@media (max-width: 767px) { .mm-report-dial { width: 160px; height: 160px; margin: 0 auto; } }
.mm-report-h1 { font-size: 40px; margin: 0 0 10px; color: #fff; word-break: break-word; }
.mm-report-url a { color: var(--mm-accent); text-decoration: none; word-break: break-all; }
.mm-report-url a:hover { text-decoration: underline; }
.mm-report-stats { color: rgba(255,255,255,.7); font-size: 14px; margin: 12px 0 6px; }
.mm-report-when  { color: rgba(255,255,255,.5); font-size: 13px; margin: 0 0 20px; }
.mm-report-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

.mm-report-checks { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.mm-report-check {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.1);
	border-left-width: 4px;
	padding: 26px 28px;
}
.mm-report-check.is-pass { border-left-color: #4ade80; }
.mm-report-check.is-warn { border-left-color: #f4b942; }
.mm-report-check.is-fail { border-left-color: #ff6b6b; }

.mm-report-check-head {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 16px;
	align-items: start;
	margin-bottom: 14px;
}
.mm-report-check-icon { font-size: 22px; padding-top: 2px; }
.mm-report-check.is-pass .mm-report-check-icon { color: #4ade80; }
.mm-report-check.is-warn .mm-report-check-icon { color: #f4b942; }
.mm-report-check.is-fail .mm-report-check-icon { color: #ff6b6b; }
.mm-report-check-title h3 { margin: 0 0 4px; color: #fff; font-size: 20px; font-weight: 700; }
.mm-report-check-sub { display: flex; gap: 14px; align-items: center; font-size: 12px; }
.mm-report-check-status { text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); font-weight: 700; }
.mm-report-check-value { color: rgba(255,255,255,.5); font-family: var(--mm-mono, monospace); }
.mm-report-check-num { color: rgba(255,255,255,.25); font-family: var(--mm-mono, monospace); font-size: 14px; }
.mm-report-check-desc { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }

.mm-report-explain {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 991px) { .mm-report-explain { grid-template-columns: 1fr; gap: 16px; } }
.mm-report-explain-cell { }
.mm-report-explain-label {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mm-accent);
	margin-bottom: 8px;
	font-weight: 700;
}
.mm-report-explain-body { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.65; }
.mm-report-explain-body code { background: rgba(0,0,0,.4); padding: 2px 6px; font-size: 12px; color: #fff; }

.mm-psi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 12px; }
@media (max-width: 767px) { .mm-psi-grid { grid-template-columns: repeat(2, 1fr); } }
.mm-psi-cell { padding: 24px 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.mm-psi-num { font-size: 40px; font-weight: 700; color: #fff; line-height: 1; }
.mm-psi-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 8px; }
.mm-psi-vitals { display: flex; gap: 24px; padding: 14px 20px; background: rgba(255,255,255,.03); font-family: var(--mm-mono, monospace); font-size: 13px; color: rgba(255,255,255,.7); flex-wrap: wrap; }

/* ---------- Print (PDF export via browser) ---------- */
@media print {
	body.mm-report-body { background: #fff !important; color: #000 !important; }
	.mm-print-hide,
	.main-nav,
	.mm-footer,
	.mm-subfooter,
	.page-loader,
	#mm-contact-modal { display: none !important; }

	.mm-case-hero, .mm-case-section, .mm-report-body-section,
	.mm-section-dark { background: #fff !important; color: #000 !important; }
	.mm-headline, h1, h2, h3, .mm-report-h1, .mm-report-check-title h3 { color: #000 !important; }
	.mm-eyebrow, .mm-report-explain-label { color: #444 !important; }
	.mm-lede, .mm-report-check-desc, .mm-report-explain-body, .mm-report-stats, .mm-report-when { color: #222 !important; }
	.mm-report-url a { color: #0066cc !important; }

	.mm-report-check {
		background: #fff !important;
		border: 1px solid #ddd !important;
		border-left-width: 4px !important;
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 12px;
	}
	.mm-report-check.is-pass { border-left-color: #16a34a !important; }
	.mm-report-check.is-warn { border-left-color: #d97706 !important; }
	.mm-report-check.is-fail { border-left-color: #dc2626 !important; }
	.mm-report-check.is-pass .mm-report-check-icon { color: #16a34a !important; }
	.mm-report-check.is-warn .mm-report-check-icon { color: #d97706 !important; }
	.mm-report-check.is-fail .mm-report-check-icon { color: #dc2626 !important; }

	.mm-score-dial {
		border: 3px solid #000 !important;
		background: #fff !important;
	}
	.mm-score-dial.is-hot     { border-color: #dc2626 !important; }
	.mm-score-dial.is-warm    { border-color: #d97706 !important; }
	.mm-score-dial.is-healthy { border-color: #16a34a !important; }
	.mm-score-num, .mm-score-label { color: #000 !important; }

	.mm-report-explain-body code { background: #f3f3f3 !important; color: #000 !important; border: 1px solid #ddd; }

	.mm-psi-cell { background: #fff !important; border: 1px solid #ddd !important; }
	.mm-psi-num, .mm-psi-lbl { color: #000 !important; }
	.mm-psi-vitals { background: #fff !important; color: #000 !important; }

	.mm-report-body-section, section { page-break-inside: auto; }
	@page { margin: 15mm; }
}