.mccb-fan{
	display:flex;justify-content:center;flex-wrap:wrap;gap:22px;
	max-width:600px;margin:0 auto;
	transition:opacity .4s ease;
}
.mccb-card{
	flex:0 0 240px;
	display:flex;flex-direction:column;gap:6px;
	padding:22px 22px 20px;
	background:var(--white);
	border:2px solid var(--border);
	border-radius:var(--radius-lg);
	cursor:pointer;
	transform-origin:bottom center;
	transition:transform .32s cubic-bezier(.34,1.2,.64,1),box-shadow .25s ease,
		border-color .22s ease,background .22s ease,opacity .32s ease;
}
.mccb-card:hover{box-shadow:var(--shadow-lg)}
.mccb-fan.is-answered .mccb-card{opacity:.4;transform:scale(.92)}
.mccb-fan.is-answered .mccb-card.is-selected{
	opacity:1;
	border-color:var(--gold);
	background:var(--gold-light);
	transform:scale(1) translateY(-10px);
	box-shadow:0 18px 52px rgba(184,175,123,.38);
}
.mccb-card__len{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dark)}
.mccb-card__name{font-family:var(--font-display);font-size:19px;color:var(--charcoal)}
.mccb-card__price{font-size:15px;color:var(--muted)}
.mccb-card__desc{font-size:13.5px;color:var(--body);line-height:1.6;margin-top:2px}
.mccb-card__features{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--body);line-height:1.7}
.mccb-card__features li{margin-bottom:2px}

.mccb-picker{
	max-width:600px;margin:0 auto;background:var(--white);border:1px solid var(--border);
	border-radius:20px;padding:0 24px;max-height:0;opacity:0;overflow:hidden;
	transition:max-height .45s ease,opacity .35s ease,padding .45s ease,margin .45s ease;
}
/* max-height has to clear the intake step now, not just dates + times.
   Left at 500px the questions were simply clipped off the bottom with no
   scrollbar and no visible cause. */
.mccb-picker.open{max-height:2600px;opacity:1;padding:24px;margin-top:24px}
.mccb-picker__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mccb-picker__head-left{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--charcoal);font-weight:600}
.mccb-picker__head-left i{color:var(--gold-dark);font-size:18px}
.mccb-picker__status{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.mccb-picker__status.mccb-error{color:#a33}
/* ── Date window ────────────────────────────────────────────────────────
   Five open days at a time, arrows either side. Acuity answers availability
   one calendar month at a time, so this window is assembled from however
   many months it takes to find five — which means it can and routinely does
   straddle a month boundary. Hence the month line on the pill, and the range
   label between the arrows: without either, a pill reading "MON 1" gives no
   clue whether that is next week or five weeks out. */
.mccb-picker__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.mccb-nav-range{font-size:12.5px;color:var(--muted);min-width:118px;text-align:center}
.mccb-nav-btn{
	width:30px;height:30px;flex:0 0 auto;border:1px solid var(--border);border-radius:999px;
	background:var(--white);color:var(--charcoal);font-size:16px;line-height:1;cursor:pointer;
	font-family:var(--font-body);transition:border-color .15s ease,background .15s ease;
}
.mccb-nav-btn:hover:not(:disabled){border-color:var(--gold);background:var(--gold-light)}
.mccb-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.mccb-picker__dates{display:flex;justify-content:center;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.mccb-date-pill{
	flex:0 0 auto;width:58px;padding:9px 0 8px;text-align:center;border:1px solid var(--border);
	border-radius:18px;font-size:12.5px;cursor:pointer;background:var(--white);
	transition:border-color .15s ease,background .15s ease;
}
.mccb-date-pill:hover{border-color:var(--gold)}
.mccb-date-pill .d{display:block;font-size:10px;color:var(--muted);text-transform:uppercase}
.mccb-date-pill .n{display:block;font-family:var(--font-display);font-size:15px;color:var(--charcoal);margin-top:2px}
.mccb-date-pill .m{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.mccb-date-pill.selected{background:var(--gold-light);border-color:var(--gold)}
.mccb-picker__times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:18px}
.mccb-time-pill{
	padding:10px 0;text-align:center;border:1px solid var(--border);border-radius:999px;
	font-size:13px;cursor:pointer;background:var(--white);
}
.mccb-time-pill.selected{background:var(--navy);color:#fff;border-color:var(--navy)}
.mccb-picker__cta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:16px}
.mccb-picker__summary{font-size:13px;color:var(--muted)}
.mccb-picker__summary-value{color:var(--charcoal)}
.mccb-btn-navy{
	background:var(--navy);color:#fff;border:none;padding:12px 26px;border-radius:999px;
	font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-body);
}
.mccb-btn-navy:disabled{opacity:.5;cursor:not-allowed}

/* ── Intake step ────────────────────────────────────────────────────────
   Separate rounded cards with a gap between them: the spacing does the
   separating work, so the alternating tint can stay very subtle. Striping
   is applied by JS to VISIBLE rows rather than by :nth-child, because a
   hidden question would otherwise leave two identical panels adjacent and
   the banding would stop reading as structure. */
.mccb-intake{border-top:1px solid var(--border);margin-top:4px;padding-top:18px;margin-bottom:6px}
.mccb-intake__title{font-family:var(--font-display);font-size:17px;color:var(--charcoal);margin:0 0 2px}
.mccb-intake__sub{font-size:13px;color:var(--muted);margin:0 0 16px}
.mccb-qlist{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.mccb-q{padding:15px 18px;border-radius:16px;background:var(--white);border:1px solid var(--border)}
.mccb-q.alt{background:var(--gold-light);border-color:var(--gold-muted)}
.mccb-q.mccb-hidden{display:none}
.mccb-q__label{font-size:13.5px;font-weight:600;color:var(--charcoal);margin-bottom:9px;display:block}
.mccb-q__label .req{color:var(--gold-dark)}
.mccb-q.mccb-missing{border-color:#c66;box-shadow:0 0 0 3px rgba(204,102,102,.12)}
.mccb-opts{display:flex;flex-wrap:wrap;gap:7px}
.mccb-opt{
	padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--white);
	font-size:13px;color:var(--body);cursor:pointer;user-select:none;transition:.15s;
}
.mccb-opt:hover{border-color:var(--gold)}
/* gold-MUTED, not gold-light: on an alternating gold-light panel a
   gold-light chip would be invisible. This reads on both. */
.mccb-opt.selected{background:var(--gold-muted);border-color:var(--gold-dark);color:var(--charcoal);font-weight:600}
.mccb-opt.selected::before{content:"✓ ";color:var(--gold-dark)}
.mccb-note-field{
	width:100%;border:1px solid var(--border);border-radius:14px;padding:11px 14px;
	font-family:var(--font-body);font-size:13.5px;color:var(--body);background:var(--white);
	box-sizing:border-box;resize:vertical;
}
.mccb-known{
	background:var(--gold-light);border:1px solid var(--gold-muted);border-radius:16px;
	padding:16px 18px;margin-bottom:16px;font-size:13.5px;color:var(--charcoal);
}
.mccb-known b{display:block;margin-bottom:4px}
.mccb-known__vals{color:var(--muted);font-size:13px}
.mccb-known__edit{
	background:none;border:none;color:var(--gold-dark);font-size:12.5px;text-decoration:underline;
	cursor:pointer;padding:6px 0 0;font-family:var(--font-body);
}
.mccb-change-link{
	background:none;border:none;color:var(--gold-dark);font-size:12.5px;text-decoration:underline;
	cursor:pointer;display:block;margin:14px auto 0;text-align:center;
}