/* Signature beginner-course sales page. */
.beginner-sales__hero { min-height: clamp(390px, 43vw, 560px); align-items: center; }
.beginner-sales__hero .course-hero__content { padding-block: var(--s-10); }
.beginner-sales__hero .course-hero__title { max-width: 28ch; margin-block: var(--s-3) var(--s-4); }
.beginner-sales__hero .course-hero__subtitle { max-width: 54ch; }
.beginner-sales__hero-points { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; font-size: var(--fs-small); font-weight: 700; }
.beginner-sales__hero-points li { display: flex; align-items: center; }
.beginner-sales__hero-points li::before { content: '✓'; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: .45rem; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); font-size: .75rem; }

.beginner-sales__layout { display: grid; gap: var(--s-8); padding-block: var(--s-8) var(--section-y); }
.beginner-sales__main { display: grid; gap: var(--s-6); min-width: 0; }
.beginner-sales__aside { order: -1; }
.beginner-sales__facts { margin: 0; padding: var(--s-5); border-radius: var(--r-card); background: var(--c-surface-alt); box-shadow: inset 0 0 0 1px var(--c-grey-200); }
.beginner-sales__section { padding: var(--s-10) var(--s-8); }
.beginner-sales__section h2 { max-width: 30ch; margin: var(--s-2) 0 var(--s-5); font-size: var(--fs-h2); line-height: var(--lh-heading); }
.beginner-sales__intro { max-width: 65ch; margin: 0; font-size: var(--fs-lead); }
.individual-program-note { margin-top: var(--s-5); } /* below the sample menu, not glued to it */
.beginner-sales__section--alt { background: var(--c-grey-50); }
.beginner-sales__section--yellow { background: var(--c-yellow); }

.beginner-sales__pains { display: grid; gap: 0; margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.beginner-sales__pains li { position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border); }
.beginner-sales__pains li::before { content: '—'; position: absolute; left: 0; color: var(--c-text-subtle); }
.beginner-sales__outcomes { display: grid; gap: var(--s-4); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.beginner-sales__outcomes li { position: relative; padding-left: calc(1.25rem + var(--s-3)); }
.beginner-sales__outcomes li::before { content: '✓'; position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c-yellow); font-size: .75rem; font-weight: 800; }

.beginner-sales__process { display: grid; gap: var(--s-4); margin: var(--s-8) 0 0; padding: 0; list-style: none; counter-reset: beginner-step; }
.beginner-sales__process li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-border); counter-increment: beginner-step; }
.beginner-sales__process li::before { content: counter(beginner-step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-yellow); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.beginner-sales__process strong, .beginner-sales__process span { grid-column: 2; }
.beginner-sales__process strong { margin-bottom: calc(-1 * var(--s-4)); font-family: var(--font-heading); font-size: var(--fs-h3); }
.beginner-sales__process span { color: var(--c-text-muted); }

.beginner-sales__menu { display: grid; gap: var(--s-3); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.beginner-sales__menu li { position: relative; padding-left: calc(1.25rem + var(--s-3)); font-size: var(--fs-lead); }
.beginner-sales__menu li::before { content: '✓'; position: absolute; left: 0; top: .15rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c-white); font-size: .75rem; font-weight: 800; }
.beginner-sales__alternatives { margin-top: var(--s-8); padding: var(--s-5); border-radius: var(--r-card); background: rgb(255 255 255 / .36); }
.beginner-sales__alternatives p { margin: 0; }
.beginner-sales__alternatives p + p { margin-top: var(--s-3); }

.beginner-sales__value { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.beginner-sales__value > div { padding-left: var(--s-4); border-left: 3px solid var(--c-yellow); }
.beginner-sales__value h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h4); }
.beginner-sales__value p { margin: 0; color: var(--c-text-muted); }
.beginner-sales__help { padding: var(--s-10) var(--s-8); background: var(--c-grey-50); }
.beginner-sales__help .home-help__inner { display: grid; gap: var(--s-8); align-items: center; }
.beginner-sales__help .home-help__title { margin: 0 0 var(--s-3); font-size: var(--fs-h2); } /* same as the page's other section titles */
.beginner-sales__help .home-help__text { max-width: 60ch; margin: 0 0 var(--s-6); color: var(--c-text-muted); }
.beginner-sales__help .btn .icon { width: 1.25em; height: 1.25em; }
.beginner-sales__help .chat { display: grid; gap: var(--s-3); width: 100%; max-width: 420px; justify-self: center; padding: var(--s-4); border-radius: var(--r-card-lg); background: var(--c-cream); box-shadow: var(--shadow-md); font-size: var(--fs-small); }
.beginner-sales__help .chat__head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border); font-weight: 700; }
.beginner-sales__help .chat__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.beginner-sales__help .chat__msg { position: relative; max-width: 85%; margin: 0; padding: var(--s-2) var(--s-3) var(--s-4); border-radius: 14px; line-height: 1.4; box-shadow: var(--shadow-sm); }
.beginner-sales__help .chat__msg--out { justify-self: end; background: var(--c-yellow); border-bottom-right-radius: 4px; }
.beginner-sales__help .chat__msg--in { justify-self: start; background: var(--c-white); border-bottom-left-radius: 4px; }
.beginner-sales__help .chat__time { position: absolute; right: var(--s-3); bottom: 4px; font-size: 0.6875rem; color: var(--c-text-subtle); }
.beginner-sales__help .chat__msg--out .chat__time { color: var(--c-grey-700); }
.beginner-sales .course-faq { margin: 0; }
.beginner-sales .reviews__head { margin-bottom: var(--s-5); }

@media (min-width: 760px) {
	.beginner-sales__value { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	.beginner-sales__help .home-help__inner { grid-template-columns: 1.2fr 1fr; gap: var(--s-12); }
}
@media (min-width: 1024px) {
	.beginner-sales__layout { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: 'main aside'; gap: var(--s-12); align-items: start; }
	.beginner-sales__main { grid-area: main; }
	.beginner-sales__aside { grid-area: aside; order: initial; position: sticky; top: calc(var(--header-h) + var(--s-6)); margin-top: calc(-1 * var(--s-16)); z-index: 2; }
	.beginner-sales__section { padding-inline: var(--s-10); }
}
@media (max-width: 639.98px) {
	.beginner-sales__hero { min-height: 510px; }
	/* Keep intrinsic-width facts grids from widening the page on narrow screens. */
	.beginner-sales__layout { grid-template-columns: minmax(0, 1fr); }
	.beginner-sales__main, .course__main { grid-template-columns: minmax(0, 1fr); }
	.beginner-sales__section { padding: var(--s-8) var(--s-5); margin-inline: calc(-1 * var(--gutter)); }
	.beginner-sales__help { padding: var(--s-8) var(--s-5); margin-inline: calc(-1 * var(--gutter)); }
	.beginner-sales__help .home-help__inner { grid-template-columns: minmax(0, 1fr); }
	.beginner-sales__help .home-help__copy, .beginner-sales__help .chat { min-width: 0; }
	.beginner-sales__facts { margin-bottom: var(--s-5); }
	.beginner-sales__hero .course-hero__title { max-width: 21ch; }
}

@media (max-width: 359.98px) {
	.beginner-sales__help .btn { white-space: normal; justify-content: center; text-align: center; }
}

/* Put the darker side of baking-course photos behind the white hero copy. */
.baking-sales .course-hero__img { transform: scaleX(-1); }

/* Ice-cream sales page uses the same spacious section layout as other signature courses. */
.icecream-sales .beginner-sales__menu { grid-template-columns: 1fr; }