.mt-finder {
max-width: 900px;
margin: 0 auto;
padding: 36px 20px;
background: #fff;
border-radius: var(--radius, 20px);
box-shadow: 0 6px 28px rgba(18, 50, 91, 0.10);
}
.mt-finder__step { margin-bottom: 30px; }
.mt-finder__step[hidden] { display: none; }

.mt-finder__stepnum {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold-d, #a8842f);
margin-bottom: 6px;
}
.mt-finder__q {
font-size: 20px;
font-weight: 700;
color: var(--navy, #12325b);
margin-bottom: 16px;
}
.mt-finder__q--results { text-align: center; }

.mt-finder__opts { display: flex; flex-wrap: wrap; gap: 12px; }

.mt-finder__opt {
flex: 1 1 auto;
min-width: 150px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border-radius: 16px;
border: 2px solid #e4ddd0;
background: #faf8f4;
color: var(--navy, #12325b);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.mt-finder__opt-icon { font-size: 20px; line-height: 1; }
.mt-finder__opt:hover { border-color: var(--navy, #12325b); transform: translateY(-1px); }
.mt-finder__opt.is-selected {
background: var(--navy, #12325b);
border-color: var(--navy, #12325b);
color: #fff;
}

.mt-finder__summary {
margin-top: 20px;
padding: 16px 20px;
background: var(--bg, #faf8f4);
border-radius: 14px;
border: 1px solid #e4ddd0;
font-size: 15px;
color: var(--navy, #12325b);
display: none;
}
.mt-finder__summary.is-visible { display: block; }
.mt-finder__summary strong { color: var(--gold-d, #a8842f); }

.mt-finder__results { margin-top: 36px; }
.mt-finder__results[hidden] { display: none; }

.mt-finder__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 20px;
}
@media (min-width: 640px) { .mt-finder__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mt-finder__grid { grid-template-columns: repeat(3, 1fr); } }
.mt-finder__card.is-hidden { display: none; }

.mt-finder__reset {
display: block;
margin: 28px auto 0;
padding: 12px 24px;
min-height: 44px;
border-radius: 999px;
border: 2px solid var(--navy, #12325b);
background: #fff;
color: var(--navy, #12325b);
font-size: 15px;
font-weight: 600;
cursor: pointer;
}