/* ==========================================================================
   Section: About / Fit (yes/no columns). Ported from about-styles.css.
   ========================================================================== */

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
.fit-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 32px; }
.fit-col.no { background: var(--bg-alt); }
.fit-col h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.fit-col.yes h3 { color: var(--navy); }
.fit-col.no h3 { color: var(--muted); }
.fit-col h3 .badge { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.fit-col.yes h3 .badge { background: var(--grad-soft); color: var(--green); }
.fit-col.no h3 .badge { background: #EDEFF2; color: var(--muted); }
.fit-col h3 .badge svg { width: 15px; height: 15px; }
.fit-col ul { list-style: none; display: flex; flex-direction: column; }
.fit-col li {
	padding: 13px 14px; border-top: 1px solid var(--line-soft); font-size: 15.5px;
	display: flex; gap: 13px; align-items: flex-start; color: var(--navy);
	border-radius: 10px; cursor: default;
	transition: background .22s ease, transform .22s ease, padding-left .22s ease;
}
.fit-col li:first-child { border-top: none; }
.fit-col.no li { color: var(--body); }
.fit-col li svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; transition: transform .22s ease; }
.fit-col.yes li svg { color: var(--green); }
.fit-col.no li svg { color: var(--muted); }
/* hover interaction */
.fit-col.yes li:hover { background: var(--grad-soft); transform: translateX(4px); }
.fit-col.no li:hover { background: #EDEFF2; transform: translateX(4px); }
.fit-col li:hover svg { transform: scale(1.25); }
.fit-col.yes li:hover { color: var(--navy); }
/* staggered entrance — animate ONLY transform; opacity stays 1 (never stalls invisible) */
.js .fit-col li { transform: translateX(-12px); }
.js .fit-col li.show { transform: none; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.js .fit-col li.show:hover { transition: background .22s ease, transform .22s ease, padding-left .22s ease; }

@media (max-width: 820px) {
	.fit-grid { grid-template-columns: 1fr; }
}