/* ==========================================================================
   The Stern Method — webinar registration (home), free guide (ebook),
   registration confirmation, webinar ended (expired) and the default page
   Breakpoints, min-width by default.
   372   hero hosts and footer links each fit on one row
   435   home closing CTA label fits one line, so its two-line mobile width releases
   512   expired promo header lockups fit at their desktop size
   760   speaker cards sit side by side; the ebook speakers CTA stops filling;
			   the expired waitlist field and button sit in a row
   1024  desktop type scale and section padding; heroes, offer, story and bonus
			   banners go two-column; learn header row; step cards go two-column and
			   date tiles sit in a row; expired card and promos take desktop values
   1200  home hero avatars, bonus banner and badges take their desktop sizes and
			   proportions
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-semibold-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--color-white: #ffffff;
	--color-cream: #fff8f5;
	--color-dark: #2b2b2b;
	--color-body: #565656;
	--color-green: #1a7143;
	--color-green-deep: #19382a;
	--color-gold: #e0b746;
	--color-divider: #e9e9e9;
	--color-input-border: #ffd6c4;
	--color-green-mid: #195436;
	--color-badge-green: #1a5a39;
	--color-badge-gold: #f7c91c;
	--color-border: #e0e0e0;
	--color-muted: #7a7a7a;
	--color-navy: #070726;
	--color-forest: #24361b;
	--color-error: #c62828;
	--color-error-tint: #fdecea;

	--gradient-button: linear-gradient(90deg, #de7c57, #e0b746);
	--gradient-button-hover: linear-gradient(90deg, #e0b746, #de7c57);
	--gradient-badge: radial-gradient(circle, #1a7143, #19382a);
	--gradient-forest-scrim: linear-gradient(rgba(17, 38, 7, 0.7) 49%, var(--color-forest) 78%);
	--gradient-gold-glow: linear-gradient(90deg, #cc9933, #e8cb78);

	--shadow-card: 0 20px 40px rgba(0, 0, 0, 0.05);
	--shadow-form: 0 20px 60px rgba(142, 59, 70, 0.06);
	--shadow-button: 0 6px 18px rgba(142, 59, 70, 0.4);
	--shadow-badge: 0 10px 20px rgba(0, 0, 0, 0.1);
	--shadow-input: inset 0 0 0 1px var(--color-input-border);
	--shadow-input-neutral: inset 0 0 0 1px var(--color-border);
	--shadow-input-invalid: inset 0 0 0 2px var(--color-error);
	--shadow-input-focus: inset 0 0 0 2px var(--color-accent);
	--shadow-button-forest: 0 6px 18px #06160f;
	--shadow-product: 0 8px 16px rgba(0, 0, 0, 0.5);

	--mask-avatar-cut: radial-gradient(circle at calc(150% - 7px) 50%, transparent 55px, #000 56px);

	/* Dark surfaces override the heading and accent colours. */
	--color-heading: var(--color-dark);
	--color-accent: var(--color-green);

	--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--section-pad: 40px;
	--cap-stacked: 700px;
	--width-narrow: 960px;
}

@media (min-width: 1024px) {
	:root {
		--section-pad: 100px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
}

html {
	background-color: var(--color-green-deep);
	-webkit-text-size-adjust: 100%;
}

/* The universal margin reset above would otherwise strip the UA's auto
   margins and render a native dialog top-left instead of centred. */

dialog { margin: auto; }

.list--bare {
	list-style: none;
	padding-left: 0;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

input,
button,
textarea,
select { font: inherit; }

button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

p, li, h1, h2, h3, figcaption { overflow-wrap: break-word; }

body {
	background-color: var(--color-cream);
	color: var(--color-body);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 18px;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: capitalize;
	text-wrap: balance;
}

h1, h2 { font-size: 32px; line-height: 36px; }

h3 { font-size: 22px; line-height: 28px; }

p, li, figcaption { text-wrap: pretty; }

p { margin-bottom: 30px; }

strong { font-weight: 600; }

h2 { margin-bottom: 30px; }

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

@media (min-width: 1024px) {
	h1 { font-size: 52px; line-height: 62px; }
	h2 { font-size: 46px; line-height: 56px; }
	h3 { font-size: 24px; line-height: 30px; }
}

/* Layout */

.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.section {
	padding-top: var(--section-pad);
	padding-bottom: var(--section-pad);
}

@media (min-width: 1024px) {
	.section--sm { --section-pad: 80px; }
}

.band {
	background-color: var(--color-green-deep);
	color: var(--color-white);
	--color-heading: var(--color-white);
	--color-accent: var(--color-gold);
}

/* The band must clip its overhanging glows; clip, not hidden, so it is no
   scroll container that find-in-page or scrollIntoView could scroll. */

.band--patterned {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background-image: url('../images/pattern-produce.webp');
	background-size: 1445px 762px;
}

.band--patterned::before,
.band--patterned::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: var(--glow-size, 660px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--color-green);
	opacity: 0.5;
	filter: blur(var(--glow-blur, 250px));
	transform: translate(-50%, -50%);
}

.band--patterned::before {
	top: var(--glow-a-y, 0);
	left: var(--glow-a-x, 0);
}

.band--patterned::after {
	top: var(--glow-b-y, 100%);
	left: var(--glow-b-x, 100%);
}

@media (min-width: 1024px) {
	.band--patterned::before,
	.band--patterned::after {
		width: var(--glow-size-lg, 960px);
		filter: blur(150px);
	}
}

.banner {
	padding: 40px 20px 20px;
	border-radius: 20px;
	--glow-size: 450px;
	--glow-blur: 150px;
}

.card {
	border-radius: 20px;
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
}

.marker-list li {
	display: grid;
	grid-template-columns: var(--marker-size, 26px) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--marker-gap, 15px);
}

.marker-list li::before {
	content: "";
	aspect-ratio: 1;
	background: url('../images/icon-check.svg') center / contain no-repeat;
}

.marker-list li > * { grid-column: 2; }

/* The margins cancel the line box's space above the caps and below the
   baseline, so the gaps around an eyebrow measure from its letters. */

.eyebrow {
	margin-top: -8px;
	margin-bottom: 15px;
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 14px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-wrap: balance;
}

.webinar-subline {
	max-width: 495px;
	text-wrap: balance;
}

.card-heading {
	margin-bottom: 10px;
	font-size: 26px;
	line-height: 36px;
}

.event-meta {
	display: grid;
	gap: 10px;
	max-width: var(--cap-stacked);
}

/* A light surface that may sit inside a band; it resets the band's colours. */

.event-meta__item {
	padding: 20px;
	border-radius: 10px;
	background-color: var(--color-cream);
	color: var(--color-body);
	font-weight: 600;
	--color-accent: var(--color-green);
}

.event-meta dt {
	margin-bottom: 8px;
	color: var(--color-accent);
	font-size: 12px;
	line-height: 12px;
	text-wrap: balance;
}

.event-meta dd {
	font-size: 16px;
	line-height: 20px;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.event-meta { grid-template-columns: auto minmax(0, 1fr); }
}

.media-block { max-width: var(--cap-stacked); }

.media-block__img {
	width: 100%;
	max-width: 393px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

@media (min-width: 1024px) {
	.media-block {
		display: grid;
		grid-template-columns: 34% 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 75px;
		max-width: none;
	}

	.media-block__img {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin-left: 0;
		margin-bottom: 0;
	}
}

/* The fill variant covers its grid cell from the two-column layout; the cell
   must be positioned, so the copy beside it alone sets the row height. */

.feature-photo {
	width: 100%;
	border-radius: 20px;
}

@media (min-width: 1024px) {
	.feature-photo--fill {
		position: absolute;
		inset: 0;
		height: 100%;
		object-fit: cover;
	}
}

/* Button. The hover fill is a pseudo-element crossfade because
   background-image does not transition; the label sits above it. */

.button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	min-height: 54px;
	padding: 20px;
	border-radius: 10px;
	background-image: var(--gradient-button);
	box-shadow: var(--shadow-button);
	color: var(--color-white);
	font-family: var(--font-heading);
	line-height: 24px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-image: var(--gradient-button-hover);
	opacity: 0;
}

.button:hover::after { opacity: 1; }

.button__label {
	position: relative;
	z-index: 1;
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.button {
		padding: 0 70px;
		line-height: 28px;
	}
}

.button--fill { width: 100%; }

.button--compact {
	padding-top: 0;
	padding-bottom: 0;
}

@media (min-width: 1024px) {
	.button--fill { width: fit-content; }
}

/* The card that holds an opt-in form; it resets the band's colours. */

.form-card {
	padding: 20px;
	border-radius: 20px;
	background-color: var(--color-cream);
	box-shadow: var(--shadow-form);
	color: var(--color-body);
	--color-heading: var(--color-dark);
	--color-accent: var(--color-green);
}

@media (min-width: 1024px) {
	.form-card { padding: 30px; }
}

.optin-form__label {
	display: block;
	margin-bottom: 5px;
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-weight: 600;
	text-align: left;
	font-size: 14px;
	line-height: 18px;
	text-wrap: balance;
}

.text-input {
	display: block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background-color: var(--color-white);
	box-shadow: var(--shadow-input);
	color: var(--color-dark);
	font-size: 16px;
	line-height: 20px;
}

.text-input::placeholder {
	color: var(--color-body);
	opacity: 1;
}

/* Transparent rather than none: forced-colours mode drops the shadow but
   paints the outline. The invalid ring below must stay after this rule. */

.text-input:focus-visible {
	outline-color: transparent;
	outline-offset: -2px;
	box-shadow: var(--shadow-input-focus);
}

.optin-form__input { margin-bottom: 22px; }

.optin-form__hint {
	color: var(--color-body);
	font-weight: 400;
	font-size: 12px;
}

/* Phone: the fixed US prefix sits inside the field, before the number. */

.phone-input { position: relative; }

.phone-input__prefix {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-dark);
	font-size: 16px;
	line-height: 20px;
	pointer-events: none;
}

.phone-input__prefix::after {
	content: "";
	width: 1px;
	height: 20px;
	margin-left: 4px;
	background-color: var(--color-body);
	opacity: 0.35;
}

.phone-input__flag {
	flex: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.text-input.phone-input__field { padding-left: 85px; }

.optin-form__submit {
	width: 100%;
	margin-top: 0;
	margin-bottom: 15px;
}

.optin-form__consent {
	font-size: 12px;
	line-height: 16px;
}

.optin-form__consent a {
	color: var(--color-accent);
	font-weight: 600;
}

.optin-form__consent a:hover { text-decoration: underline; }

@media (min-width: 1024px) {
	.optin-form__submit { margin-bottom: 20px; }
}

.js-form { position: relative; }

.js-form.is-busy > * { opacity: 0.3; }

.js-form.is-busy::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid var(--color-accent);
	border-right-color: transparent;
	border-radius: 50%;
	animation: form-pulse 1.6s ease-in-out infinite;
}

@keyframes form-spin { to { transform: rotate(360deg); } }

@keyframes form-pulse { 50% { opacity: 0.35; } }

/* Form validation and status messages */

.form-error {
	margin-top: -22px;
	margin-bottom: 4px;
	color: var(--color-error);
	font-family: var(--font-heading);
	font-weight: 600;
	text-align: left;
	font-size: 14px;
	line-height: 18px;
}

.text-input[aria-invalid="true"] { box-shadow: var(--shadow-input-invalid); }

.text-input[aria-invalid="true"]:focus-visible { background-color: var(--color-error-tint); }

/* "Did you mean …?" — the suggested address, applied on click. */

.form-error__fix {
	max-width: 100%;
	padding: 0;
	overflow-wrap: anywhere;
	text-align: left;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.form-status {
	margin-bottom: 10px;
	color: var(--color-dark);
	font-weight: 600;
	text-wrap: balance;
}

.optin-form__status { margin-bottom: 18px; }

/* Badge over a photo; the owning media wrapper places it with --badge-*. */

.badge {
	position: absolute;
	text-wrap: balance;
	top: var(--badge-top, 35px);
	right: var(--badge-right, 35px);
	left: var(--badge-left, auto);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 90px;
	aspect-ratio: 1;
	padding: 4px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--gradient-badge) content-box, var(--color-white);
	box-shadow: var(--shadow-badge);
	font-weight: 700;
	text-align: center;
}

.badge__title {
	margin-bottom: 6px;
	color: var(--color-badge-gold);
	text-transform: uppercase;
	font-size: 16px;
	line-height: 1.13;
	text-box: trim-both cap alphabetic;
}

.badge__value {
	align-self: stretch;
	padding: 4px 7px;
	background-color: var(--color-white);
	color: var(--color-badge-green);
	font-size: 11px;
	line-height: 1.09;
	text-box: trim-both cap alphabetic;
}

.badge--guide { width: 85px; }

.badge--guide .badge__value { font-size: 10px; }

@media (min-width: 1200px) {
	.badge {
		width: 130px;
		padding: 5px;
	}

	.badge__title {
		margin-bottom: 8px;
		font-size: 24px;
		line-height: 1.08;
	}

	.badge__value {
		padding: 6px 10px;
		font-size: 16px;
		line-height: 1.13;
	}

	.badge--guide { width: 120px; }

	.badge--guide .badge__title { font-size: 22px; }

	.badge--guide .badge__value { font-size: 15px; }
}

/* home-S01 — Hero and registration form */

.hero { padding: 20px 0 40px; }

.page-home .hero {
	--glow-a-y: 50px;
	--glow-b-y: calc(100% - 130px);
}

.hero__copy {
	max-width: 600px;
	margin: 0 auto 30px;
	text-align: center;
}

.hero__logo { margin: 0 auto 10px; }

.hero__title { margin-bottom: 15px; }

.hosts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.host {
	display: flex;
	align-items: center;
}

.host__avatar {
	flex: none;
	width: 60px;
	margin-right: 15px;
	padding: 5px;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
}

.host p { text-wrap: balance; }

.host__label {
	display: block;
	margin-bottom: 8px;
	white-space: nowrap;
	font-size: 12px;
	line-height: 12px;
}

.host__name {
	display: block;
	font-size: 16px;
	line-height: 20px;
}

.hero--simple {
	--glow-size: 300px;
	--glow-blur: 100px;
	--glow-a-x: 100%;
	--glow-b-x: 0;
}

.register {
	max-width: 510px;
	margin: 0 auto;
}

.register__eyebrow { margin-bottom: 4px; }

.register__title { margin-bottom: 10px; }

.register__subtitle {
	margin-bottom: 10px;
	color: var(--color-dark);
	text-wrap: balance;
	font-family: var(--font-heading);
	font-weight: 600;
}

@media (min-width: 372px) {
	.hosts {
		flex-wrap: nowrap;
		padding: 0 5px;
	}
}

@media (min-width: 1024px) {
	.hero { padding: 50px 0; }

	.page-home .hero {
		--glow-a-y: 0;
		--glow-b-y: 100%;
	}

	.hero__layout {
		display: grid;
		grid-template-columns: minmax(0, 600px) minmax(0, 530px);
		justify-content: center;
		align-items: center;
		column-gap: 40px;
	}

	.hero__copy {
		margin: 0;
		text-align: left;
	}

	.hero--simple {
		--glow-a-x: 0;
		--glow-b-x: 100%;
	}

	.page-home .hero__logo { margin: 0 0 40px; }

	.hero__title { margin-bottom: 30px; }

	.hero__intro {
		margin-bottom: 40px;
		font-size: 20px;
		line-height: 30px;
	}

	.hosts {
		justify-content: flex-start;
		column-gap: 45px;
		padding: 0;
	}

	.register {
		max-width: 530px;
		margin: 0;
	}

	.register__title { line-height: 52px; }

	.register__subtitle { margin-bottom: 20px; }

}

@media (min-width: 1200px) {
	.host__avatar {
		width: 96px;
		margin-right: 10px;
		padding: 6px;
		border-width: 2px;
	}

}

/* home-S02 — What you'll learn */

.learn__header { margin-bottom: 30px; }

.learn__heading { max-width: 625px; }

.page-home .learn__title { margin-bottom: 15px; }

.learn__intro { max-width: 515px; }

.learn__item { padding: 20px; }

.learn__item:not(:first-child) {
	margin-top: 1px;
	border-top: 1px solid var(--color-divider);
}

.learn__item h3 { margin-bottom: 10px; }

@media (min-width: 1024px) {
	.learn__header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		column-gap: 15px;
		margin-bottom: 80px;
	}

	.learn__title,
	.page-home .learn__title { margin-bottom: 0; }

	.learn__list {
		padding: 10px 0;
		--marker-size: 34px;
		--marker-gap: 20px;
	}

	.learn__item { padding: 30px 40px; }
}

/* home-S03 — The story behind the method */

.story {
	--glow-a-y: 330px;
	--glow-b-y: 80%;
}

.story__head { margin-bottom: 30px; }

.story__eyebrow { margin-bottom: 25px; }

.story__quote {
	padding-left: 15px;
	border-left: 4px solid var(--color-accent);
	font-style: italic;
}

.page-home .story__quote {
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 34px;
}

@media (min-width: 1024px) {
	.story {
		--glow-a-x: -65px;
		--glow-a-y: 0;
		--glow-b-y: 100%;
	}

	.story__eyebrow { margin-bottom: 35px; }

	.page-home .story__quote {
		font-size: 26px;
		line-height: 36px;
	}
}

/* home-S04 — Free bonus guide */

.bonus {
	width: calc(100% - 30px);
	max-width: var(--cap-stacked);
	--glow-a-x: 100%;
	--glow-a-y: 84px;
	--glow-b-x: 0;
	--glow-b-y: calc(100% - 255px);
}

.bonus__head { margin-bottom: 30px; }

.bonus__media { margin-bottom: 30px; }

.bonus__list {
	margin-bottom: 30px;
	padding-left: 10px;
}

.bonus__list li { margin-bottom: 15px; }

.bonus__list li::before { background-image: url('../images/icon-check-light.svg'); }

@media (min-width: 1024px) {
	.bonus {
		display: grid;
		grid-template-columns: 3fr 2fr;
		grid-template-rows: auto 1fr;
		column-gap: 40px;
		max-width: 1280px;
		padding: 50px 55px;
		border-radius: 30px;
		--glow-a-x: 0;
		--glow-a-y: 0;
		--glow-b-x: 100%;
		--glow-b-y: calc(100% - 40px);
	}

	.bonus__media {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

}

@media (min-width: 1200px) {
	.bonus { grid-template-columns: 8fr 7fr; }

	.bonus__media {
		--badge-top: 70px;
		--badge-right: 90px;
	}

	.bonus__list {
		padding-left: 20px;
		--marker-size: 30px;
	}
}

/* home-S05 — Speakers and closing call to action */

.speakers { padding-bottom: var(--section-pad); }

.speakers__title { margin-bottom: 10px; }

.speakers__list {
	display: grid;
	gap: 20px;
	max-width: 520px;
	margin-bottom: 30px;
}

.speaker { padding: 30px 20px; }

.speaker__portrait {
	width: 120px;
	margin-bottom: 20px;
	border-radius: 50%;
}

.speaker h3 {
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 30px;
}

.closing {
	max-width: 930px;
	margin-bottom: 30px;
}

.closing__title { max-width: 780px; }

.closing__cta { max-width: 320px; }

@media (min-width: 435px) {
	.closing__cta { max-width: 100%; }
}

@media (min-width: 760px) {
	.speakers__list {
		grid-template-columns: repeat(2, minmax(0, 560px));
		justify-content: center;
		max-width: none;
	}
}

@media (min-width: 1024px) {
	.speakers__subline { margin-bottom: 50px; }

	.speakers__list {
		column-gap: 50px;
		margin-bottom: 80px;
	}

	.speaker { padding: 40px; }

	.speaker__portrait {
		width: 160px;
		margin-bottom: 30px;
	}

	.closing { margin-bottom: 50px; }
}

/* home-S06 — Footer */

.site-footer {
	padding: 10px 0;
	font-size: 12px;
	line-height: 16px;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 20px;
}

.site-footer__links a:hover { text-decoration: underline; }

.site-footer__links li {
	padding: 7px 0;
	text-wrap: balance;
}

@media (min-width: 372px) {
	.site-footer__links {
		flex-wrap: nowrap;
		column-gap: 10px;
	}

	.site-footer__links li { white-space: nowrap; }

	.site-footer__links li:not(:first-child) {
		padding-left: 10px;
		border-left: 1px solid var(--color-green-mid);
	}
}

@media (min-width: 1024px) {
	.site-footer { padding: 20px 0; }

	.site-footer__links { column-gap: 20px; }

	.site-footer__links li:not(:first-child) { padding-left: 20px; }
}

/* ebook-S01 — Hero: guide image and opt-in form */

.page-ebook .hero {
	--glow-a-y: 330px;
	--glow-b-y: calc(100% - 570px);
}

.page-ebook .hero__intro { margin-bottom: 20px; }

/* The offer is the form card while stacked; from 1024 it is the grid
   and its card child takes the surface. */

.offer { max-width: 540px; }

.offer__media {
	margin-bottom: 20px;
	--badge-top: 9%;
	--badge-right: auto;
	--badge-left: 60%;
}

.offer__intro { margin-bottom: 20px; }

.page-ebook .optin-form__submit { margin-bottom: 20px; }

@media (min-width: 1024px) {
	.page-ebook .hero {
		padding: 30px 0 80px;
		--glow-a-y: 0;
		--glow-b-y: calc(100% + 145px);
	}

	.page-ebook .hero__title {
		margin-bottom: 10px;
		font-size: 46px;
		line-height: 56px;
	}

	.page-ebook .hero__intro { margin-bottom: 30px; }

	.offer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 50px;
		max-width: none;
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.offer__media {
		margin-bottom: 0;
		--badge-top: 55px;
		--badge-left: calc(50% + 75px);
	}

	.offer__card {
		padding: 30px;
		border-radius: 20px;
		background-color: var(--color-cream);
		box-shadow: var(--shadow-form);
	}

	.offer__title,
	.offer__intro { text-align: center; }

	.offer__intro { margin-bottom: 10px; }
}

/* ebook-S03 — Why I wrote this */

.page-ebook .media-block__img { max-width: 525px; }

.page-ebook .media-block { max-width: 595px; }

.page-ebook .story__quote { margin-bottom: 30px; }

@media (min-width: 1024px) {
	.page-ebook .media-block {
		grid-template-columns: 45% 1fr;
		column-gap: 50px;
		max-width: none;
	}

	.page-ebook .story__quote { margin-bottom: 40px; }
}

/* ebook-S04 — Free guide banner */

.page-ebook .bonus {
	max-width: 555px;
	--glow-b-y: calc(100% + 220px);
	--glow-size-lg: 600px;
}

.page-ebook .bonus__media {
	--badge-top: 10%;
	--badge-right: auto;
	--badge-left: 25%;
}

@media (min-width: 1024px) {
	.page-ebook .bonus {
		grid-template-columns: minmax(490px, 5fr) 6fr;
		max-width: 1280px;
		--glow-b-y: 100%;
	}

	.page-ebook .bonus__media {
		align-self: center;
		--badge-top: 11%;
	}
}

/* ebook-S05 — Speakers and call to action */

.speakers__cta { max-width: 520px; }

@media (min-width: 760px) {
	.speakers__cta { width: fit-content; }
}

@media (min-width: 1024px) {
	.page-ebook .speakers__list { margin-bottom: 50px; }
}

/* confirmation-S01 — Hero */

.page-confirmation .hero__logo { margin-bottom: 40px; }

.hero__eyebrow { margin-bottom: 10px; }

.page-confirmation .hero__title { margin-bottom: 20px; }

.hero__summary { max-width: 710px; }

@media (min-width: 1024px) {
	.page-confirmation .hero {
		padding-top: 30px;
		--glow-a-y: -170px;
		--glow-b-y: calc(100% + 140px);
	}

	.hero__eyebrow { margin-bottom: 5px; }
}

/* confirmation-S02 — Next steps */

.next-steps {
	max-width: var(--cap-stacked);
	counter-reset: step;
}

.step {
	margin-bottom: 20px;
	padding: 20px;
	counter-increment: step;
}

/* The <ol> already announces the number, so the drawn one carries empty
   alternative text. */

.step__body::before {
	content: counter(step, decimal-leading-zero) / "";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	aspect-ratio: 1;
	margin-bottom: 20px;
	border: 2px solid var(--color-accent);
	border-radius: 50%;
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-weight: 600;
}

.step p:has(+ ul, + dl) { margin-bottom: 20px; }

.step__more { margin-top: 20px; }

.step a {
	color: var(--color-accent);
	font-weight: 600;
}

.step a:hover { text-decoration: underline; }

.step__photo {
	margin-top: 20px;
	border-radius: 10px;
}

.step__bullets {
	padding-left: 15px;
	--marker-size: 8px;
}

.step__bullets li { margin-bottom: 15px; }

.step__bullets li::before {
	margin-top: 10px;
	border-radius: 50%;
	background: var(--color-accent);
}

@media (min-width: 1024px) {
	.next-steps { max-width: var(--width-narrow); }

	.step {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		column-gap: 40px;
		margin-bottom: 30px;
		padding: 30px;
	}

	.step__title {
		font-size: 30px;
		line-height: 40px;
	}

	.step__more { grid-column: 1 / -1; }

	.step__photo {
		grid-row: 1;
		grid-column: 2;
		margin-top: 0;
		border-radius: 20px;
	}

	.step__bullets { padding-left: 20px; }
}

/* confirmation-S03 — See you soon banner */

.reminder { padding-top: 0; }

.reminder__banner {
	max-width: var(--width-narrow);
	--glow-a-x: -25px;
	--glow-b-x: calc(100% - 25px);
	--glow-b-y: calc(100% + 300px);
}

.reminder__hosts {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.reminder__avatar {
	width: 100px;
	border-radius: 50%;
}

.reminder__avatar + .reminder__avatar { margin-left: -7px; }

/* The cut and the photo offset are centred on the next avatar's -7px overlap. */

.reminder__avatar:has(+ .reminder__avatar) {
	object-position: -4px;
	mask-image: var(--mask-avatar-cut);
}

.reminder__title { margin-bottom: 10px; }

@media (min-width: 1024px) {
	.reminder__banner {
		padding: 40px 0;
		--glow-size-lg: 585px;
		--glow-a-x: 0;
		--glow-b-x: 100%;
		--glow-b-y: 100%;
	}

	.reminder__title {
		margin-bottom: 20px;
		line-height: 52px;
	}

	.reminder__meta {
		grid-template-columns: 1fr 1fr;
		column-gap: 20px;
		width: fit-content;
	}
}

/* expired-S01 — Hero band (logo only) */

.page-expired .hero,
.page-default .hero {
	padding: 20px 0;
	--glow-b-y: calc(100% + 235px);
}

@media (min-width: 1024px) {
	.page-expired .hero,
	.page-default .hero {
		--glow-size-lg: 500px;
		--glow-b-y: 100%;
	}
}

/* expired-S02 — Webinar ended: waitlist and promos */

.ended { padding: 40px 0; }

.ended__card {
	max-width: calc(var(--cap-stacked) + 40px);
	padding: 20px;
}

.ended__intro {
	margin-bottom: 20px;
	text-wrap: balance;
}

.waitlist {
	margin-bottom: 20px;
	padding: 20px;
	border-radius: 10px;
}

.waitlist__intro { margin-bottom: 10px; }

/* Spacing is a margin and both controls take explicit cells, so an element
   a browser extension injects beside the field cannot claim a cell. */

.waitlist__form {
	display: grid;
	max-width: 390px;
	margin-bottom: 10px;
}

.waitlist__input {
	margin-bottom: 22px;
	box-shadow: var(--shadow-input-neutral);
	line-height: 24px;
}

.waitlist__input--name { grid-area: 1 / 1; }

.waitlist__error--name { grid-area: 2 / 1; }

.waitlist__input--email { grid-area: 3 / 1; }

.waitlist__error--email { grid-area: 4 / 1; }

.waitlist__submit { grid-area: 5 / 1; }

.waitlist__input::placeholder { color: var(--color-muted); }

.waitlist__note {
	font-size: 13px;
	line-height: 18px;
}

.separator {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	font-size: 16px;
	text-wrap: balance;
}

.separator::before,
.separator::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--color-border);
}

.separator::before { margin-right: 15px; }

.separator::after { margin-left: 15px; }

.promos {
	display: grid;
	gap: 20px;
	max-width: 430px;
}

/* The pattern image reaches up through the card padding, so it reads the
   padding from --promo-pad. */

.promo {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	padding: var(--promo-pad);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	color: var(--color-white);
	--promo-pad: 20px;
	--color-heading: var(--color-white);
	--color-accent: var(--color-white);
}

.promo__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo--forest::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--gradient-forest-scrim);
}

.promo__head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	margin-bottom: 15px;
}

.promo__texture {
	position: absolute;
	top: calc(-1 * var(--promo-pad));
	left: calc(-1 * var(--promo-pad));
	z-index: -1;
	width: calc(100% + 2 * var(--promo-pad));
	max-width: none;
	height: calc(100% + var(--promo-pad));
	object-fit: cover;
	object-position: bottom;
	opacity: 0.5;
}

.promo__eyebrow {
	margin-top: -5px;
	margin-bottom: 10px;
	font-size: 10px;
	line-height: 16px;
}

/* The lockup holds its size and overflows into the card padding rather than
   scaling: the eyebrow above it does not scale, and the bottle must clear it. */

.promo__art { width: 265px; }

.promo__logo {
	width: 80%;
	margin-bottom: 10px;
}

.promo__lockup {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: 16 / 5;
}

.promo__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 63%;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1;
}

.promo__wordmark {
	width: 68%;
	margin-bottom: 5px;
}

.promo__product {
	position: absolute;
	top: -44%;
	left: -3%;
	isolation: isolate;
	overflow-x: visible;
	overflow-y: clip;
	width: 109%;
	height: 144%;
}

.promo__product::before {
	content: "";
	position: absolute;
	top: 66%;
	left: 46%;
	z-index: -1;
	width: 54%;
	height: 76%;
	border-radius: 50%;
	background-image: var(--gradient-gold-glow);
	opacity: 0.5;
	filter: blur(45px);
}

.promo__bottle {
	position: absolute;
	top: -1%;
	left: 48%;
	width: 53%;
	filter: drop-shadow(var(--shadow-product));
	transform: rotate(32deg);
}

.promo__text {
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 24px;
}

.promo__cta {
	margin-top: auto;
	border: 2px solid var(--color-white);
	background-color: var(--color-white);
	background-image: none;
}

.promo__cta::after { content: none; }

.promo__cta:hover,
.promo__cta:focus-visible {
	background-color: transparent;
	color: var(--color-white);
}

.promo--forest .promo__cta { box-shadow: var(--shadow-button-forest); }

@media (min-width: 512px) {
	.promo__head { margin-bottom: 20px; }

	.promo__eyebrow {
		margin-top: -8px;
		margin-bottom: 15px;
		font-size: 14px;
		line-height: 24px;
	}

	.promo__art { width: 385px; }

	.promo__logo { margin-bottom: 15px; }

	.promo__brand { font-size: 22px; }

	.promo__wordmark { margin-bottom: 10px; }

	.promo__product::before { filter: blur(65px); }
}

@media (min-width: 760px) {
	.waitlist__form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		column-gap: 14px;
		max-width: none;
	}

	.waitlist__input { margin-bottom: 0; }

	.waitlist__form { margin-bottom: 32px; }

	.waitlist__error {
		margin-top: 4px;
		margin-bottom: -22px;
	}

	.waitlist__input--email { grid-area: 1 / 2; }

	.waitlist__error--email { grid-area: 2 / 2 / 3 / 4; }

	.waitlist__submit { grid-area: 1 / 3; }
}

@media (min-width: 1024px) {
	.ended { padding: 50px 0; }

	.ended__card {
		max-width: 1080px;
		padding: 50px 90px;
	}

	.ended__title {
		margin-bottom: 20px;
		font-size: 46px;
		line-height: 52px;
	}

	.waitlist {
		padding: 20px 30px;
		border-radius: 15px;
	}

	.waitlist__intro {
		font-size: 16px;
		line-height: 24px;
	}

	.waitlist__note {
		font-size: 12px;
		line-height: 16px;
	}

	.separator::before { margin-right: 20px; }

	.separator::after { margin-left: 20px; }

	.promos {
		grid-template-columns: 1fr 1fr;
		max-width: none;
	}

	.promo {
		border-radius: 15px;
		--promo-pad: 25px;
	}

	.promo__text { margin-bottom: 30px; }
}

/* Default page — legal pages, the post listing and 404 */

.prose { max-width: var(--cap-stacked); }

.prose h1,
.prose ul,
.prose ol { margin-bottom: 30px; }

.prose h3 { margin-bottom: 15px; }

.prose ul,
.prose ol { padding-left: 25px; }

.prose li { margin-bottom: 10px; }

.prose a {
	color: var(--color-accent);
	font-weight: 600;
}

.prose a:hover { text-decoration: underline; }

/* Sits after the components to win the source-order tie, and is scoped to
   text so a component's own closing space survives. */

p:last-child,
li:last-child { margin-bottom: 0; }

/* Opt-in, so reduced motion is the default. */

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.button::after { transition: opacity 0.3s ease-out; }
	.js-form > * { transition: opacity 0.2s ease-out; }
	.js-form.is-busy::after { animation: form-spin 0.8s linear infinite; }

	.promo__cta { transition: background-color 0.3s ease-out, color 0.3s ease-out; }
}

/* Utilities */

.txt--left { text-align: left; }
.txt--center { text-align: center; }
.txt--right { text-align: right; }

.txt--uppercase { text-transform: uppercase; }
.txt--lowercase { text-transform: lowercase; }
.txt--capitalize { text-transform: capitalize; }

.txt--white { color: var(--color-white); }
.txt--dark { color: var(--color-dark); }
.txt--body { color: var(--color-body); }
.txt--green { color: var(--color-green); }
.txt--gold { color: var(--color-gold); }
.txt--accent { color: var(--color-accent); }
.txt--badge-gold { color: var(--color-badge-gold); }
.txt--badge-green { color: var(--color-badge-green); }
.txt--muted { color: var(--color-muted); }
.txt--forest { color: var(--color-forest); }
.txt--navy { color: var(--color-navy); }
.txt--error { color: var(--color-error); }

.bg--white { background-color: var(--color-white); }
.bg--cream { background-color: var(--color-cream); }
.bg--green-deep { background-color: var(--color-green-deep); }
.bg--navy { background-color: var(--color-navy); }
.bg--error-tint { background-color: var(--color-error-tint); }

.fw--regular { font-weight: 400; }
.fw--medium { font-weight: 500; }
.fw--semibold { font-weight: 600; }
.fw--bold { font-weight: 700; }
.fw--extrabold { font-weight: 800; }

.p--relative { position: relative; }
.overflow--hidden { overflow: hidden; }
.mb--none { margin-bottom: 0; }

.mx--auto {
	margin-left: auto;
	margin-right: auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}