/*
 * Mashin Irani — Missing pages (brands/vehicles/lab/terms/faq/contact).
 * Builds on the shared mi.css design system (.container/.section/.sec-head/.eyebrow/.btn/.faq/.truststrip)
 * and adds page-specific mip-* layouts. Uses the frozen short design tokens with hex fallbacks. RTL-first.
 */

/* ---- Page hero ---- */
.mip-hero { padding-block: var(--space-8, 32px) var(--space-4, 16px); }
.mip-hero h1 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); line-height: 1.2; margin: 0 0 var(--space-3, 12px); color: var(--navy-900, #102134); }
.mip-lede { max-width: 62ch; color: var(--text-secondary, #404751); line-height: 1.85; margin: 0; font-size: 1.03rem; }

/* ---- Generic responsive card grid ---- */
.mip-grid { display: grid; gap: var(--space-4, 16px); }
.mip-grid--brands { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.mip-grid--veh    { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mip-grid--lab    { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---- Brand card ---- */
.mip-brand {
	display: flex; flex-direction: column; gap: var(--space-3, 12px);
	padding: var(--space-5, 20px);
	background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2);
	border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06));
	text-decoration: none; color: var(--navy-900, #102134);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mip-brand:hover { transform: translateY(-3px); box-shadow: var(--shadow-e3, 0 8px 24px rgba(16,33,52,.1)); border-color: var(--gold-300, #e0c58f); }
.mip-brand__logo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px; border-radius: var(--radius-md, 8px);
	background: var(--bg-sunken, #ece4da); overflow: hidden; flex: none;
}
.mip-brand__logo img { max-width: 82%; max-height: 82%; object-fit: contain; }
.mip-brand__logo b { font-size: 1.6rem; font-weight: 800; color: var(--navy-800, #112250); }
.mip-brand__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.mip-brand__name { font-size: 1.1rem; font-weight: 700; }
.mip-brand__count {
	align-self: flex-start; font-size: .75rem; font-weight: 600;
	color: var(--text-gold, #7f6220); background: var(--bg-sunken, #ece4da);
	padding: 2px 10px; border-radius: 999px;
}
.mip-brand__desc { font-size: .875rem; color: var(--text-secondary, #404751); line-height: 1.7; }
.mip-brand__go { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--link, #3c507d); margin-top: auto; }
.mip-arrow { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transform: scaleX(-1); }

/* ---- Feature trio ---- */
.mip-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4, 16px); }
.mip-feat { background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px); padding: var(--space-5, 20px); box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); }
.mip-feat__ic { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md, 8px); background: var(--navy-900, #102134); margin-bottom: var(--space-3, 12px); }
.mip-feat__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-300, #e0c58f); stroke-width: 1.7; }
.mip-feat b { display: block; font-size: 1.05rem; margin-bottom: 6px; color: var(--navy-900, #102134); }
.mip-feat p { margin: 0; font-size: .9rem; color: var(--text-secondary, #404751); line-height: 1.75; }

/* ---- CTA band ---- */
.mip-cta {
	text-align: center; padding: clamp(28px, 5vw, 48px) var(--space-5, 20px);
	background: linear-gradient(135deg, var(--navy-900, #102134), var(--navy-800, #112250));
	border-radius: var(--radius-2xl, 24px); color: var(--ivory-50, #f5f0e9);
	box-shadow: var(--shadow-e3, 0 8px 24px rgba(16,33,52,.1));
}
.mip-cta .eyebrow { color: var(--gold-300, #e0c58f); }
.mip-cta h2 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin: 0 0 var(--space-3, 12px); color: #fff; }
.mip-cta p { max-width: 52ch; margin: 0 auto var(--space-6, 24px); color: var(--sand-200, #d9cbc2); line-height: 1.8; }
.mip-cta__acts { display: flex; gap: var(--space-3, 12px); justify-content: center; flex-wrap: wrap; }
/*
 * mirani-home-fixes.css re-asserts the hello reset colours with `.btn.btn-outline{color:var(--text-primary)}`
 * — same (0,2,0) as the `.mip-cta .btn-outline` rule below, but loaded later, so the outline button in
 * this navy band rendered navy-on-navy (an invisible label on brands/vehicles/lab too). Re-assert the
 * designed gold at (0,3,0).
 */
.mip-cta .btn.btn-outline { border: 1px solid var(--gold-300, #e0c58f); color: var(--gold-300, #e0c58f); background: transparent; }
.mip-cta .btn.btn-outline:hover,
.mip-cta .btn.btn-outline:focus { background: rgba(224, 197, 143, .12); color: var(--gold-300, #e0c58f); }
.mip-cta .btn-outline { border: 1px solid var(--gold-300, #e0c58f); color: var(--gold-300, #e0c58f); background: transparent; }
.mip-cta .btn-outline:hover { background: rgba(224,197,143,.12); }

/* ---- Vehicle category card ---- */
.mip-vcat {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	padding: var(--space-5, 20px); background: var(--bg-elevated, #fff);
	border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); text-decoration: none; color: var(--navy-900, #102134);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mip-vcat:hover { transform: translateY(-3px); box-shadow: var(--shadow-e3, 0 8px 24px rgba(16,33,52,.1)); border-color: var(--gold-300, #e0c58f); }
.mip-vcat__ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-md, 8px); background: var(--bg-sunken, #ece4da); margin-bottom: 4px; }
.mip-vcat__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--navy-800, #112250); stroke-width: 1.7; }
.mip-vcat__name { font-size: 1.05rem; font-weight: 700; }
.mip-vcat__desc { font-size: .82rem; color: var(--text-secondary, #404751); line-height: 1.6; }
.mip-vcat__count { font-size: .75rem; font-weight: 600; color: var(--text-gold, #7f6220); margin-top: 4px; }

/* ---- Data table (responsive: stacks to cards on mobile) ---- */
.mip-tablewrap { overflow-x: auto; border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); background: var(--bg-elevated, #fff); }
.mip-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mip-table thead th { background: var(--navy-900, #102134); color: var(--ivory-50, #f5f0e9); font-weight: 600; text-align: start; padding: var(--space-3, 12px) var(--space-4, 16px); white-space: nowrap; }
.mip-table tbody td { padding: var(--space-3, 12px) var(--space-4, 16px); border-top: 1px solid var(--border, #d9cbc2); color: var(--text-secondary, #404751); }
.mip-table tbody tr:nth-child(even) { background: rgba(236,228,218,.4); }
.mip-table tbody td b { color: var(--navy-900, #102134); }
.mip-table a { color: var(--link, #3c507d); font-weight: 600; text-decoration: none; }
.mip-oct { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; color: var(--navy-900, #102134); background: var(--gold-300, #e0c58f); border-radius: 999px; padding: 2px 8px; }
.mip-note { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-4, 16px); font-size: .82rem; color: var(--text-tertiary, #6e6a66); line-height: 1.7; }
.mip-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---- Lab steps ---- */
.mip-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4, 16px); }
.mip-step { position: relative; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px); padding: var(--space-5, 20px); box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); }
.mip-step__n { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 999px; background: var(--gold-300, #e0c58f); color: var(--navy-900, #102134); font-weight: 800; margin-bottom: var(--space-3, 12px); }
.mip-step b { display: block; margin-bottom: 6px; color: var(--navy-900, #102134); }
.mip-step p { margin: 0; font-size: .88rem; color: var(--text-secondary, #404751); line-height: 1.75; }

/* ---- Lab result card ---- */
.mip-lab { display: flex; flex-direction: column; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px); overflow: hidden; box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); text-decoration: none; color: var(--navy-900, #102134); transition: transform .2s, box-shadow .2s; }
.mip-lab:hover { transform: translateY(-3px); box-shadow: var(--shadow-e3, 0 8px 24px rgba(16,33,52,.1)); }
.mip-lab__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-sunken, #ece4da); display: flex; align-items: center; justify-content: center; }
.mip-lab__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-3, 12px); }
.mip-lab__ph { width: 48px; height: 48px; fill: none; stroke: var(--n-300, #c0b2a6); stroke-width: 1.4; }
.mip-lab__grade { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; min-width: 34px; text-align: center; font-weight: 800; font-size: .95rem; padding: 3px 9px; border-radius: 999px; color: #fff; background: var(--gold-500, #896f3d); }
.mip-lab__grade[data-g="A+"], .mip-lab__grade[data-g="A"] { background: var(--success, #2e7d5b); }
.mip-lab__grade[data-g="B+"], .mip-lab__grade[data-g="B"] { background: var(--gold-500, #896f3d); }
.mip-lab__grade[data-g="C+"], .mip-lab__grade[data-g="C"] { background: var(--signal-warning, #c58a2e); }
.mip-lab__body { padding: var(--space-4, 16px); display: flex; flex-direction: column; gap: 4px; }
.mip-lab__brand { font-size: .72rem; font-weight: 600; color: var(--text-gold, #7f6220); }
.mip-lab__name { font-size: .98rem; font-weight: 700; }
.mip-lab__boost { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-secondary, #404751); margin-top: 4px; }
.mip-lab__boost svg { width: 15px; height: 15px; fill: none; stroke: var(--gold-500, #896f3d); stroke-width: 1.7; }
.mip-lab__boost b { color: var(--success, #2e7d5b); }

/* ---- Grade legend ---- */
.mip-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-5, 20px); }
.mip-legend__t { font-size: .85rem; font-weight: 600; color: var(--text-secondary, #404751); }
.mip-chipg { font-size: .8rem; color: var(--text-secondary, #404751); display: inline-flex; align-items: center; gap: 6px; }
.mip-chipg b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; border-radius: 6px; color: #fff; font-size: .78rem; background: var(--gold-500, #896f3d); }
.mip-chipg[data-g="A+"] b, .mip-chipg[data-g="A"] b { background: var(--success, #2e7d5b); }

/* ---- Legal (terms) ---- */
.mip-legal__grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8, 32px); align-items: start; }
.mip-toc { position: sticky; top: 90px; background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px); padding: var(--space-4, 16px); box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); }
.mip-toc b { display: block; margin-bottom: var(--space-2, 8px); font-size: .8rem; color: var(--text-tertiary, #6e6a66); }
.mip-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.mip-toc li { counter-increment: toc; }
.mip-toc a { display: block; padding: 6px 0; font-size: .875rem; color: var(--text-secondary, #404751); text-decoration: none; border-bottom: 1px solid var(--bg-sunken, #ece4da); }
.mip-toc a:hover { color: var(--link, #3c507d); }
.mip-prose section { margin-bottom: var(--space-6, 24px); }
.mip-prose h2 { font-size: 1.15rem; color: var(--navy-900, #102134); margin: 0 0 var(--space-2, 8px); }
.mip-prose p { margin: 0 0 var(--space-2, 8px); color: var(--text-secondary, #404751); line-height: 1.95; }
.mip-inlink { display: inline-flex; align-items: center; gap: 6px; color: var(--link, #3c507d); font-weight: 600; text-decoration: none; }

/* ---- FAQ groups ---- */
.mip-faqgroup { margin-bottom: var(--space-8, 32px); }
.mip-faqgroup__t { font-size: 1.15rem; color: var(--navy-900, #102134); margin: 0 0 var(--space-3, 12px); padding-bottom: var(--space-2, 8px); border-bottom: 2px solid var(--gold-300, #e0c58f); display: inline-block; }
.mip-faq details summary .ic svg { width: 18px; height: 18px; fill: none; stroke: var(--n-300, #c0b2a6); stroke-width: 2; transition: transform .2s; }
.mip-faq details[open] summary .ic svg { transform: rotate(180deg); }

/* ---- Contact ---- */
.mip-contact { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-6, 24px); align-items: start; }
.mip-contact__side { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.mip-cline { display: flex; align-items: center; gap: var(--space-3, 12px); width: 100%; text-align: start; padding: var(--space-4, 16px); background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-e1, 0 1px 2px rgba(16,33,52,.06)); text-decoration: none; color: var(--navy-900, #102134); cursor: pointer; font: inherit; }
.mip-cline:hover { border-color: var(--gold-300, #e0c58f); }
.mip-cline__ic { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-md, 8px); background: var(--navy-900, #102134); }
.mip-cline__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-300, #e0c58f); stroke-width: 1.7; }
.mip-cline b { display: block; font-size: .95rem; }
.mip-cline span span, .mip-cline > span > span { display: block; font-size: .82rem; color: var(--text-secondary, #404751); }
.mip-social { display: flex; gap: var(--space-2, 8px); margin-top: var(--space-1, 4px); }
.mip-social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md, 8px); background: var(--bg-sunken, #ece4da); color: var(--navy-800, #112250); }
.mip-social a:hover { background: var(--gold-300, #e0c58f); }
.mip-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.mip-form { background: var(--bg-elevated, #fff); border: 1px solid var(--border, #d9cbc2); border-radius: var(--radius-xl, 16px); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow-e2, 0 4px 12px rgba(16,33,52,.08)); }
.mip-form h2 { font-size: 1.25rem; margin: 0 0 4px; color: var(--navy-900, #102134); }
.mip-form__lede { margin: 0 0 var(--space-5, 20px); font-size: .9rem; color: var(--text-secondary, #404751); }
.mip-field { margin-bottom: var(--space-4, 16px); }
.mip-field label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--navy-900, #102134); }
.mip-req { color: var(--clay-error, #b4402e); }
.mip-field input, .mip-field textarea { width: 100%; padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px solid var(--border-strong, #c0b2a6); border-radius: var(--radius-md, 8px); font: inherit; background: var(--bg-base, #f5f0e9); color: var(--navy-900, #102134); }
.mip-field input:focus, .mip-field textarea:focus { outline: 2px solid var(--gold-300, #e0c58f); outline-offset: 1px; border-color: var(--gold-500, #896f3d); }
.mip-field textarea { resize: vertical; }
.mip-consent { margin: var(--space-3, 12px) 0 0; font-size: .78rem; color: var(--text-tertiary, #6e6a66); line-height: 1.7; }
.mip-msg { margin: var(--space-3, 12px) 0 0; font-size: .875rem; font-weight: 600; }
.mip-msg[data-kind="err"] { color: var(--clay-error, #b4402e); }
.mip-done { text-align: center; padding: var(--space-8, 32px) var(--space-4, 16px); }
.mip-done svg { width: 48px; height: 48px; fill: none; stroke: var(--success, #2e7d5b); stroke-width: 1.6; margin-bottom: var(--space-3, 12px); }
.mip-done b { display: block; font-size: 1.1rem; color: var(--navy-900, #102134); margin-bottom: 6px; }
.mip-done span { color: var(--text-secondary, #404751); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.mip-legal__grid { grid-template-columns: 1fr; }
	.mip-toc { position: static; }
	.mip-toc ol { display: flex; flex-wrap: wrap; gap: 4px 16px; }
	.mip-toc li a { border-bottom: 0; padding: 4px 0; }
	.mip-contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.mip-grid--veh { grid-template-columns: repeat(2, 1fr); }
	.mip-grid--lab { grid-template-columns: repeat(2, 1fr); }
	/* Stacked-card table */
	.mip-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mip-table, .mip-table tbody, .mip-table tr, .mip-table td { display: block; width: 100%; }
	.mip-table tr { border-top: 1px solid var(--border, #d9cbc2); padding: var(--space-2, 8px) 0; }
	.mip-table tbody tr:nth-child(even) { background: transparent; }
	.mip-table tbody td { border: 0; padding: 6px var(--space-4, 16px); display: flex; justify-content: space-between; gap: var(--space-4, 16px); }
	.mip-table tbody td::before { content: attr(data-th); font-weight: 600; color: var(--text-tertiary, #6e6a66); }
}
@media (max-width: 360px) {
	.mip-grid--veh, .mip-grid--lab { grid-template-columns: 1fr; }
}