/**
 * One-to-one "Personal Roadmap Session" — layered on top of challenge.css.
 * The wrapper carries .challenge-page (so every ch-* rule applies) plus
 * .session-page for the pieces unique to this offer: hero card list, the
 * pain list, the "what we build" grid, two-tier pricing, and the 3 steps.
 */

/* ---- Hero card extras -------------------------------------------------- */
.session-page .ss-badge{
	display:block; text-align:center; background:rgba(234,174,6,.16); color:#8a6400;
	border:1px solid rgba(234,174,6,.5); border-radius:999px; padding:.4rem .8rem;
	font-weight:800; font-size:.82rem; margin-block-end:1rem;
}
.session-page .ss-card__list{
	list-style:none; margin:1rem 0 1.3rem; padding:0; display:grid; gap:.5rem; text-align:start;
}
.session-page .ss-card__list li{ padding-inline-start:1.6rem; position:relative; line-height:1.55; color:var(--color-slate); }
.session-page .ss-card__list li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:#1f9d2e; font-weight:800; }

/* ---- Pain list --------------------------------------------------------- */
.session-page .ss-pains{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.6rem; }
.session-page .ss-pain{
	display:flex; gap:.8rem; align-items:flex-start; background:#fff; border:1px solid var(--color-line);
	border-radius:14px; padding:1rem 1.2rem; line-height:1.6; box-shadow:0 10px 26px -22px rgba(11,15,26,.5);
}
.session-page .ss-pain__mark{
	flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
	background:rgba(18,48,94,.1); color:var(--color-blue); font-weight:800; font-size:.85rem;
}
@media (max-width:640px){ .session-page .ss-pains{ grid-template-columns:1fr; } }

/* ---- What we build together ------------------------------------------- */
.session-page .ss-build{ display:grid; gap:.9rem; margin-top:1.8rem; }
.session-page .ss-build__item{
	display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--color-line);
	border-radius:16px; padding:1.2rem 1.4rem; border-inline-start:4px solid var(--color-blue);
	box-shadow:0 12px 30px -24px rgba(11,15,26,.5);
}
.session-page .ss-build__icon{ font-size:1.8rem; flex:none; line-height:1; }
.session-page .ss-build__item strong{ display:block; color:var(--color-blue-deep); font-size:1.1rem; margin-bottom:.2rem; }
.session-page .ss-build__item span{ color:var(--color-slate); line-height:1.7; }

/* ---- Two-tier pricing -------------------------------------------------- */
.session-page .ss-tiers{
	display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2rem;
	max-width:880px; margin-inline:auto; align-items:stretch;
}
.session-page .ss-tier{
	position:relative; background:#fff; border:1px solid var(--color-line); border-radius:20px;
	padding:2rem 1.8rem; display:flex; flex-direction:column; box-shadow:0 18px 44px -30px rgba(11,15,26,.55);
}
.session-page .ss-tier--featured{ border:2px solid var(--color-gold); box-shadow:0 24px 54px -30px rgba(234,174,6,.55); }
.session-page .ss-tier__flag{
	position:absolute; inset-block-start:-14px; inset-inline-end:1.6rem; background:var(--color-gold);
	color:#3a2b00; font-weight:800; font-size:.78rem; padding:.35rem .9rem; border-radius:999px;
}
.session-page .ss-tier__name{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--color-blue-deep); margin:0 0 .4rem; }
.session-page .ss-tier__desc{ color:var(--color-slate); line-height:1.7; margin:0 0 1.1rem; }
.session-page .ss-tier__price{ display:flex; align-items:baseline; gap:.5rem; margin-block-end:.6rem; }
.session-page .ss-tier__amount{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,6vw,3rem); color:var(--color-blue); line-height:1; }
.session-page .ss-tier__unit{ color:var(--color-muted); font-weight:700; }
.session-page .ss-tier__seats{ color:var(--color-slate); line-height:1.6; font-size:.92rem; margin:0 0 1.4rem; flex:1 1 auto; }
.session-page .ss-btn--dark{ color:var(--color-blue-deep); border-color:var(--color-blue); }
.session-page .ss-btn--dark:hover{ background:rgba(18,48,94,.06); }
.session-page .ss-scarcity{
	max-width:880px; margin:1.6rem auto 0; text-align:center; background:#FFF7E3; border:1px solid rgba(234,174,6,.55);
	border-radius:14px; padding:1rem 1.3rem; color:#8a6400; font-weight:800; line-height:1.6;
}
@media (max-width:720px){ .session-page .ss-tiers{ grid-template-columns:1fr; } }

/* ---- How to start (3 steps) ------------------------------------------- */
.session-page .ss-steps{ display:grid; gap:1rem; margin-top:1.8rem; }
.session-page .ss-step{
	display:flex; gap:1.1rem; align-items:flex-start; background:var(--color-cream); border:1px solid var(--color-line);
	border-radius:16px; padding:1.3rem 1.5rem;
}
.session-page .ss-step__num{
	width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
	background:var(--color-gold); color:#3a2b00; font-family:var(--font-display); font-weight:800; font-size:1.3rem;
	box-shadow:0 8px 18px -8px rgba(234,174,6,.7);
}
.session-page .ss-step strong{ display:block; color:var(--color-blue-deep); font-size:1.1rem; margin-bottom:.2rem; }
.session-page .ss-step span{ color:var(--color-slate); line-height:1.7; }

/* ---- Booking modal: room for the FluentBooking calendar --------------- */
/* The shared .join-modal is sized for narrow forms (600px); the booking
   calendar is a two-column layout that needs much more width or its day
   grid collapses. Widen just the booking modals and trim the body padding. */
.ss-book-modal .join-modal__dialog{ width:min(1040px,100%); }
.ss-book-modal .join-modal__body{ padding:clamp(.9rem,2.4vw,1.6rem); }
@media (max-width:600px){
	.ss-book-modal .join-modal__body{ padding:.8rem; }
}