/**
 * Cohortly, student side.
 *
 * Scoped under .cohortly-front so nothing leaks into the theme, and built on
 * the same brand tokens the Appearance panel controls. Deliberately quieter
 * than the admin: this sits inside someone else's dashboard, and should look
 * like it belongs there rather than shouting over it.
 */

/* A page of its own — a booking link or a quote — with no theme around it.
   The wrapper inside paints the real background from the tokens; this is the
   document behind it, which cannot see them. */
html:has( body.cohortly-standalone ),
body.cohortly-standalone {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: rgb(250 250 252);
	color-scheme: light;
}

body.cohortly-standalone,
body.cohortly-standalone *,
body.cohortly-standalone *::before,
body.cohortly-standalone *::after {
	box-sizing: border-box;
}

/* Following the visitor's own setting, which is what "system" means. */
@media (prefers-color-scheme: dark) {
	html:has( body.cohortly-standalone.cohortly-theme-system ),
	body.cohortly-standalone.cohortly-theme-system {
		background: rgb(15 17 24);
		color-scheme: dark;
	}
}

/* And the two the school chose outright, which win over the visitor's. The
   wrapper inside covers the viewport, but the document behind it shows
   through on overscroll — a white flash under a dark page. */
html:has( body.cohortly-standalone.cohortly-theme-dark ),
body.cohortly-standalone.cohortly-theme-dark {
	background: rgb(15 17 24);
	color-scheme: dark;
}

html:has( body.cohortly-standalone.cohortly-theme-light ),
body.cohortly-standalone.cohortly-theme-light {
	background: rgb(250 250 252);
	color-scheme: light;
}

.cohortly-front {
	--c-bg: 250 250 252;
	--c-surface: 255 255 255;
	--c-sunk: 245 246 249;
	--c-border: 228 230 237;
	--c-border-strong: 209 213 222;
	--c-muted: 113 121 138;

	--c-ok: 22 133 89;
	--c-ok-bg: 231 245 238;
	--c-live: 200 38 30;
	--c-live-bg: 253 236 234;

	/* Replaced at runtime by the Appearance panel. */
	--c-primary: 79 70 229;
	--c-secondary: 14 165 233;
	--c-heading: 11 13 18;
	--c-body: 63 70 84;
	--c-radius: 8px;

	--c-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);

	font-size: 15px;
	line-height: 1.6;
	color: rgb(var(--c-body));
}

/* Inside the site, Cohortly borrows the theme's typeface so it does not look
   bolted on. On a page of its own there is no theme to borrow from, and
   without this the browser falls back to Times. */
.cohortly-standalone .cohortly-front,
.cohortly-standalone .cohortly-front input,
.cohortly-standalone .cohortly-front select,
.cohortly-standalone .cohortly-front textarea,
.cohortly-standalone .cohortly-front button {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	.cohortly-front:not([data-cohortly-theme="light"]) {
		--c-bg: 15 17 24;
		--c-surface: 24 27 36;
		--c-sunk: 30 34 45;
		--c-border: 42 47 61;
		--c-border-strong: 58 64 80;
		--c-muted: 137 145 162;
		--c-ok: 91 199 148;
		--c-ok-bg: 18 42 32;
		--c-live: 244 132 122;
		--c-live-bg: 46 26 24;
		--c-heading: 233 236 243;
		--c-body: 182 190 205;
		--c-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
	}
}

.cohortly-front[data-cohortly-theme="dark"] {
	--c-bg: 15 17 24;
	--c-surface: 24 27 36;
	--c-sunk: 30 34 45;
	--c-border: 42 47 61;
	--c-border-strong: 58 64 80;
	--c-muted: 137 145 162;
	--c-ok: 91 199 148;
	--c-ok-bg: 18 42 32;
	--c-live: 244 132 122;
	--c-live-bg: 46 26 24;
	--c-heading: 233 236 243;
	--c-body: 182 190 205;
	--c-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

.cohortly-front *,
.cohortly-front *::before,
.cohortly-front *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ atoms */

.cl-eyebrow {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--c-muted));
	margin-bottom: 3px;
}

.cl-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 99px;
	border: 1px solid rgb(var(--c-border-strong));
	background: rgb(var(--c-surface));
	font-size: 12px;
	font-weight: 600;
	color: rgb(var(--c-body));
	white-space: nowrap;
	line-height: 1.5;
}

.cl-badge--tiny {
	font-size: 11px;
	padding: 1px 8px;
	margin-left: 8px;
}

.cl-badge--live {
	color: rgb(var(--c-live));
	background: rgb(var(--c-live-bg));
	border-color: rgb(var(--c-live) / 0.3);
}

.cl-badge--ok {
	color: rgb(var(--c-ok));
	background: rgb(var(--c-ok-bg));
	border-color: rgb(var(--c-ok) / 0.3);
}

.cl-badge--muted {
	color: rgb(var(--c-muted));
	background: rgb(var(--c-sunk));
}

/* The one piece of motion in the whole interface, on the one thing that is
   genuinely urgent. */
.cl-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
	animation: cl-pulse 1.8s ease-in-out infinite;
}

@keyframes cl-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
	.cl-pulse { animation: none; }
}

.cohortly-front .cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	border-radius: var(--c-radius);
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cohortly-front .cl-btn--primary {
	background: rgb(var(--c-primary));
	color: #fff;
}

.cohortly-front .cl-btn--primary:hover {
	background: rgb(var(--c-primary) / 0.9);
	color: #fff;
}

.cohortly-front .cl-btn--ghost {
	background: rgb(var(--c-surface));
	border-color: rgb(var(--c-border-strong));
	color: rgb(var(--c-heading));
}

.cohortly-front .cl-btn--ghost:hover {
	background: rgb(var(--c-sunk));
	color: rgb(var(--c-heading));
}

.cohortly-front .cl-btn--disabled {
	background: rgb(var(--c-sunk));
	color: rgb(var(--c-muted));
	cursor: not-allowed;
	border-color: rgb(var(--c-border));
}

.cl-hint {
	display: block;
	font-size: 11.5px;
	color: rgb(var(--c-muted));
	margin-top: 6px;
	text-align: center;
}

.cl-link {
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--c-primary));
	text-decoration: none;
	white-space: nowrap;
}

.cl-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- card */

.cl-card {
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: calc(var(--c-radius) + 4px);
	box-shadow: var(--c-shadow);
	margin: 0 0 28px;
	overflow: hidden;
}

/* A live class earns a coloured edge. Nothing else does. */
.cl-card.is-live {
	border-color: rgb(var(--c-live) / 0.35);
	box-shadow: 0 0 0 3px rgb(var(--c-live) / 0.08), var(--c-shadow);
}

.cl-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid rgb(var(--c-border));
}

.cl-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: rgb(var(--c-heading));
}

.cl-card__meta {
	margin: 2px 0 0;
	font-size: 13px;
	color: rgb(var(--c-muted));
}

.cl-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px;
	flex-wrap: wrap;
}

.cl-next__body { flex: 1; min-width: 220px; }

.cl-next__title {
	margin: 10px 0 4px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: rgb(var(--c-heading));
}

.cl-next__when {
	margin: 0;
	font-size: 14px;
	color: rgb(var(--c-body));
	font-variant-numeric: tabular-nums;
}

.cl-next__desc {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: rgb(var(--c-muted));
}

.cl-next__action { flex: none; text-align: center; }

.cl-upcoming {
	list-style: none;
	margin: 0;
	padding: 0 20px 4px;
	border-top: 1px dashed rgb(var(--c-border));
}

.cl-upcoming li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgb(var(--c-border));
	font-size: 13.5px;
}

.cl-upcoming li:last-child { border-bottom: 0; }

.cl-upcoming__title { color: rgb(var(--c-heading)); font-weight: 600; }
.cl-upcoming__when  { color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; }

.cl-quiet { padding: 26px 20px; text-align: center; }

.cl-quiet__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.cl-quiet__body {
	margin: 0 auto;
	max-width: 46ch;
	font-size: 13.5px;
	color: rgb(var(--c-muted));
}

.cl-card__foot {
	display: flex;
	gap: 18px;
	padding: 12px 20px;
	background: rgb(var(--c-sunk));
	border-top: 1px solid rgb(var(--c-border));
}

.cl-foot-link {
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--c-primary));
	text-decoration: none;
}

.cl-foot-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ pages */

.cl-page { max-width: 860px; }

.cl-page__head { margin-bottom: 22px; }

.cl-page__title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: rgb(var(--c-heading));
}

.cl-page__sub {
	margin: 0;
	font-size: 14px;
	color: rgb(var(--c-muted));
	max-width: 62ch;
}

.cl-section {
	margin: 26px 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgb(var(--c-muted));
}

.cl-list { list-style: none; margin: 0; padding: 0; }

.cl-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 18px;
	margin-bottom: 10px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: var(--c-radius);
	flex-wrap: wrap;
}

.cl-item.is-live { border-color: rgb(var(--c-live) / 0.35); }

.cl-item__main { flex: 1; min-width: 200px; }

.cl-item__top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.cl-item__course { font-size: 12px; color: rgb(var(--c-muted)); }

.cl-item__title {
	margin: 0 0 3px;
	font-size: 16px;
	font-weight: 650;
	color: rgb(var(--c-heading));
}

.cl-item__when {
	margin: 0;
	font-size: 13.5px;
	color: rgb(var(--c-muted));
	font-variant-numeric: tabular-nums;
}

.cl-item__len { color: rgb(var(--c-muted)); }

.cl-list--past .cl-item { background: rgb(var(--c-sunk)); }

/* Paging through a long list. Newer/Older rather than page numbers: the
   lists are chronological, and that is the question a student is asking. */
.cl-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 18px;
}

.cl-pager__page {
	font-size: 13px;
	color: rgb(var(--c-muted));
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- batch */

.cl-batch {
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: calc(var(--c-radius) + 2px);
	padding: 20px;
	margin-bottom: 18px;
}

.cl-batch__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.cl-batch__name {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: rgb(var(--c-heading));
}

.cl-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 14px;
	margin: 0 0 18px;
	padding: 14px 0;
	border-top: 1px solid rgb(var(--c-border));
	border-bottom: 1px solid rgb(var(--c-border));
}

.cl-facts dt {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgb(var(--c-muted));
	margin-bottom: 2px;
}

.cl-facts dd {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
	color: rgb(var(--c-heading));
	font-variant-numeric: tabular-nums;
}

.cl-instructor {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.cohortly-front .cl-instructor__avatar {
	border-radius: 50%;
	flex: none;
}

.cl-instructor__name {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
	color: rgb(var(--c-heading));
}

.cl-instructor__bio {
	margin: 3px 0 0;
	font-size: 13.5px;
	color: rgb(var(--c-muted));
}

.cl-nextline {
	padding: 14px 16px;
	background: rgb(var(--c-sunk));
	border-radius: var(--c-radius);
}

.cl-nextline__title {
	margin: 0;
	font-size: 15px;
	font-weight: 650;
	color: rgb(var(--c-heading));
}

.cl-nextline__when {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: rgb(var(--c-muted));
}

.cl-discord {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: calc(var(--c-radius) + 2px);
	flex-wrap: wrap;
}

.cl-discord__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: rgb(var(--c-heading));
}

.cl-discord__body {
	margin: 0;
	font-size: 13.5px;
	color: rgb(var(--c-muted));
	max-width: 56ch;
}

/* --------------------------------------------------------------- replays */

.cl-replays { list-style: none; margin: 0; padding: 0; }

.cl-replay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	margin-bottom: 8px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: var(--c-radius);
	flex-wrap: wrap;
}

.cl-replay__body { flex: 1; min-width: 200px; }

.cl-replay__title {
	margin: 0 0 2px;
	font-size: 15.5px;
	font-weight: 650;
	color: rgb(var(--c-heading));
}

.cl-replay__when {
	margin: 0;
	font-size: 13px;
	color: rgb(var(--c-muted));
	font-variant-numeric: tabular-nums;
}

.cl-course-replays {
	margin: 28px 0;
	padding: 20px;
	background: rgb(var(--c-sunk));
	border: 1px solid rgb(var(--c-border));
	border-radius: calc(var(--c-radius) + 2px);
}

.cl-course-replays__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.cl-course-replays__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: rgb(var(--c-heading));
}

.cl-count { font-size: 13px; color: rgb(var(--c-muted)); }

/* ---------------------------------------------------------------- search */

.cl-search {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.cohortly-front .cl-search input[type="search"] {
	flex: 1;
	min-width: 200px;
	height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-family: inherit;
	color: rgb(var(--c-heading));
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border-strong));
	border-radius: var(--c-radius);
}

.cohortly-front .cl-search input[type="search"]:focus {
	outline: none;
	border-color: rgb(var(--c-primary));
	box-shadow: 0 0 0 3px rgb(var(--c-primary) / 0.15);
}

/* ---------------------------------------------------------- empty, toast */

.cl-empty {
	padding: 40px 24px;
	text-align: center;
	background: rgb(var(--c-sunk));
	border: 1px dashed rgb(var(--c-border-strong));
	border-radius: calc(var(--c-radius) + 2px);
}

.cl-empty__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 650;
	color: rgb(var(--c-heading));
}

.cl-empty__body {
	margin: 0 auto;
	max-width: 48ch;
	font-size: 14px;
	color: rgb(var(--c-muted));
}

.cl-toast {
	padding: 12px 16px;
	border-radius: var(--c-radius);
	font-size: 14px;
	margin-bottom: 18px;
	border: 1px solid transparent;
}

.cl-toast--ok {
	background: rgb(var(--c-ok-bg));
	border-color: rgb(var(--c-ok) / 0.3);
	color: rgb(var(--c-ok));
}

@media (max-width: 600px) {
	.cl-next__action,
	.cl-item__action { width: 100%; }

	.cohortly-front .cl-btn { width: 100%; }
}

/* ------------------------------------------------------------ quote page
   A single offer, on its own page. It has to feel like part of the site and
   like something worth acting on, so it sits on the theme's own background
   with one card carrying everything. */

.cohortly-quotepage {
	padding: 48px 20px 64px;
	min-height: 100vh;
	background: rgb(var(--c-bg));
}

.cohortly-quotepage__inner {
	max-width: 560px;
	margin: 0 auto;
}

.c-quotecard {
	padding: 32px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
	text-align: center;
}

.c-quotecard--plain {
	box-shadow: none;
}

.c-qbadge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgb(var(--c-primary));
	background: color-mix(in srgb, rgb(var(--c-primary)) 10%, transparent);
	border-radius: 999px;
}

.c-qbadge--ok {
	color: #0f7b4f;
	background: rgba(16, 150, 96, 0.12);
}

.c-quotecard__title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.25;
	color: rgb(var(--c-heading));
}

.c-quotecard__note {
	margin: 0 0 18px;
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	color: rgb(var(--c-heading));
	background: color-mix(in srgb, rgb(var(--c-heading)) 4%, transparent);
	border-radius: 10px;
}

.c-quotecard__body {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: rgb(var(--c-muted));
}

.c-quotecard__meta {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(var(--c-muted));
}

.c-qprice {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 6px;
}

.c-qprice__now {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: rgb(var(--c-heading));
}

.c-qprice__was {
	font-size: 18px;
	color: rgb(var(--c-muted));
	text-decoration: line-through;
}

.c-qprice__off {
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	color: #0f7b4f;
	background: rgba(16, 150, 96, 0.12);
	border-radius: 999px;
}

.c-quotecard__act {
	margin: 24px 0 0;
}

.c-qbtn {
	display: inline-block;
	padding: 12px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: rgb(var(--c-primary));
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
}

.c-qbtn:hover,
.c-qbtn:focus-visible {
	color: #fff;
	filter: brightness(0.94);
}

.c-qbtn--ghost {
	color: rgb(var(--c-heading));
	background: transparent;
	border-color: rgb(var(--c-border-strong));
}

.c-qbtn--ghost:hover,
.c-qbtn--ghost:focus-visible {
	color: rgb(var(--c-heading));
	filter: none;
	background: color-mix(in srgb, rgb(var(--c-heading)) 5%, transparent);
}

@media (max-width: 560px) {
	.c-quotecard { padding: 24px 20px; }
	.c-qprice__now { font-size: 32px; }
}

/* ---------------------------------------------------- connect Discord
   Shown only to someone whose cohort has a Discord role waiting and who has
   never linked an account — so it disappears the moment it is acted on. */

.cl-discord {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 18px 16px;
	padding: 14px 16px;
	background: rgba(88, 101, 242, 0.08);
	border: 1px solid rgba(88, 101, 242, 0.22);
	border-radius: 10px;
}

.cl-discord__text {
	min-width: 0;
	flex: 1 1 260px;
}

.cl-discord__title {
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.cl-discord__body {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(var(--c-muted));
}

.cl-discord__btn {
	flex: none;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: #5865f2;
	border-radius: 8px;
	text-decoration: none;
}

.cl-discord__btn:hover,
.cl-discord__btn:focus-visible {
	color: #fff;
	background: #4752c4;
}

@media (max-width: 520px) {
	.cl-discord { margin: 0 12px 12px; }
	.cl-discord__btn { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------ booking page
   Three steps in one card: a month to pick a day from, that day's times, then
   who you are. Sized for a phone first — this is a link people open from a
   message, not from a desk. */

.cohortly-bookpage {
	padding: 40px 16px 64px;
	min-height: 100vh;
	background: rgb(var(--c-bg));
}

.cohortly-bookpage__inner {
	max-width: 460px;
	margin: 0 auto;
}

.c-bookcard {
	padding: 24px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.c-bookcard__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.c-bookback {
	flex: none;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	line-height: 1;
	color: rgb(var(--c-primary));
	border: 1px solid rgb(var(--c-border-strong));
	border-radius: 50%;
	text-decoration: none;
}

.c-bookback:hover,
.c-bookback:focus-visible {
	background: color-mix(in srgb, rgb(var(--c-primary)) 8%, transparent);
}

.c-bookcard__who {
	min-width: 0;
}

.c-bookcard__host {
	margin: 0 0 2px;
	font-size: 13px;
	color: rgb(var(--c-muted));
}

.c-bookcard__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	color: rgb(var(--c-heading));
}

.c-bookfacts {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.c-bookfacts li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	color: rgb(var(--c-muted));
}

.c-bookfacts__icon {
	flex: none;
	width: 18px;
	height: 21px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.75;
}

.c-bookfacts__when {
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.c-bookcard__blurb {
	margin: 16px 0 0;
	padding-top: 16px;
	font-size: 14px;
	line-height: 1.55;
	color: rgb(var(--c-muted));
	border-top: 1px solid rgb(var(--c-border));
}

.c-booksection {
	margin: 22px 0 14px;
	padding-top: 20px;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	color: rgb(var(--c-heading));
	border-top: 1px solid rgb(var(--c-border));
}

.c-booknote {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(var(--c-muted));
}

.c-booknote--warn {
	padding: 10px 12px;
	color: #8a4b00;
	background: rgba(214, 132, 0, 0.1);
	border-radius: 8px;
}

/* --------------------------------------------------------------- calendar */

.c-cal__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 12px;
}

.c-cal__month {
	font-size: 15px;
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.c-cal__nav {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: rgb(var(--c-primary));
	border-radius: 50%;
	text-decoration: none;
}

.c-cal__nav:hover,
.c-cal__nav:focus-visible {
	background: color-mix(in srgb, rgb(var(--c-primary)) 10%, transparent);
}

.c-cal__nav.is-off {
	color: rgb(var(--c-muted));
	opacity: 0.3;
}

.c-cal__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
	justify-items: center;
}

.c-cal__dow {
	padding-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgb(var(--c-muted));
}

.c-cal__day {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	/* A day with nothing free is not a button and should not look like one. */
	color: color-mix(in srgb, rgb(var(--c-muted)) 55%, transparent);
	border-radius: 50%;
	text-decoration: none;
}

.c-cal__day.is-open {
	font-weight: 600;
	color: rgb(var(--c-primary));
	background: color-mix(in srgb, rgb(var(--c-primary)) 9%, transparent);
}

.c-cal__day.is-open:hover,
.c-cal__day.is-open:focus-visible {
	color: #fff;
	background: rgb(var(--c-primary));
}

/* Today gets a dot rather than a fill, so it cannot be mistaken for the day
   that is selected. */
.c-cal__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.c-cal__pad {
	width: 40px;
	height: 40px;
}

/* ------------------------------------------------------------------ times */

.c-times {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

.c-time {
	display: block;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: rgb(var(--c-primary));
	background: transparent;
	border: 1px solid rgb(var(--c-primary));
	border-radius: 8px;
	text-decoration: none;
}

.c-time:hover,
.c-time:focus-visible {
	color: #fff;
	background: rgb(var(--c-primary));
}

/* --------------------------------------------------------------- timezone */

.c-bookzone {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgb(var(--c-border));
}

.c-bookzone__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--c-heading));
}

/* The picker reads as a line of text. The real <select> sits on top of it at
   zero opacity so the browser's own menu, keyboard handling and screen reader
   announcement all still come for free — only the painted face is ours. */
.c-zonepick {
	position: relative;
	display: inline-flex;
	max-width: 100%;
	border-radius: 8px;
}

.c-zonepick__native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.c-zonepick__face {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 6px 8px;
	font-size: 14px;
	line-height: 1.3;
	color: rgb(var(--c-heading));
	border-radius: 8px;
}

.c-zonepick:hover .c-zonepick__face,
.c-zonepick__native:focus-visible + .c-zonepick__face {
	background: color-mix(in srgb, rgb(var(--c-primary)) 7%, transparent);
}

.c-zonepick__native:focus-visible + .c-zonepick__face {
	outline: 2px solid rgb(var(--c-primary));
	outline-offset: 1px;
}

.c-zonepick__globe {
	flex: none;
	color: rgb(var(--c-primary));
}

.c-zonepick__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-zonepick__now {
	flex: none;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--c-muted));
}

/* The icon set draws its chevron pointing right; this one points down. */
.c-zonepick__caret {
	flex: none;
	transform: rotate(90deg);
	color: rgb(var(--c-muted));
}

.c-bookzone__go {
	margin-left: 8px;
}

/* ------------------------------------------------------------------ form */

.c-bookfield {
	display: block;
	margin-bottom: 14px;
}

.c-bookfield > span {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.c-bookfield input,
.c-bookfield textarea {
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	color: rgb(var(--c-heading));
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border-strong));
	border-radius: 8px;
}

.c-bookfield textarea {
	resize: vertical;
}

.c-qbtn--block {
	display: block;
	width: 100%;
	text-align: center;
	border: 0;
	cursor: pointer;
}

@media (max-width: 400px) {
	.c-bookcard { padding: 18px; }
	.c-cal__day,
	.c-cal__pad { width: 36px; height: 36px; }
}

/* ------------------------------------------------- sold by consultation
   Replaces the price-and-enrol box on a cohort programme, so it has to look
   like the thing it replaced rather than a notice bolted on beside it. */

.cohortly-consult {
	padding: 4px 0 0;
	text-align: center;
}

.cohortly-consult__lead {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	color: rgb(var(--c-heading));
}

.cohortly-consult__body {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: rgb(var(--c-muted));
}

.cohortly-consult__btn {
	display: block;
	width: 100%;
	padding: 13px 20px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background: rgb(var(--c-primary));
	border-radius: 10px;
	text-decoration: none;
}

.cohortly-consult__btn:hover,
.cohortly-consult__btn:focus-visible {
	color: #fff;
	filter: brightness(0.94);
}

.cohortly-consult__meta {
	margin: 12px 0 0;
	font-size: 13px;
	color: rgb(var(--c-muted));
}

/* The stand-in for a price in course listings. */
.cohortly-consult__tag {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: rgb(var(--c-primary));
}

/* On a course card: the label where the price was, the button where the
   cart was. Inherits the card's own text alignment. */
.cohortly-consult--card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	text-align: left;
}

.cohortly-consult__btn--sm {
	padding: 10px 16px;
	font-size: 14px;
	border-radius: 8px;
}

/* The Discord card's buttons: a badge or a Rejoin, and Disconnect beside it. */
.cl-discord__acts {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cl-discord__acts form {
	margin: 0;
}

.cl-discord__body--note {
	font-weight: 500;
	color: rgb(var(--c-heading));
}

.cl-linkbtn {
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: rgb(var(--c-muted));
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.cl-linkbtn:hover {
	color: rgb(var(--c-heading));
}

/* ------------------------------------------------------------ the widget
   The booking card on somebody else's page. It paints its own ground from
   the tokens so a dark card sits on a light page as a choice, not a bug,
   and it lays itself out by the width it is given — a sidebar gets one
   column, a full-width section gets the two the page uses — rather than by
   the width of the window. */

.cohortly-widget {
	container-type: inline-size;
	padding: 20px;
	background: rgb(var(--c-bg));
	border-radius: 16px;
}

/* system leaves the scheme to the visitor, like the rest of .cohortly-front. */
.cohortly-widget--light {
	color-scheme: light;
}

.cohortly-widget--dark {
	color-scheme: dark;
}

.cohortly-widget__card {
	position: relative;
	transition: opacity 0.15s ease;
}

.cohortly-widget.is-busy .cohortly-widget__card {
	opacity: 0.55;
	pointer-events: none;
}

.cohortly-widget .c-bookcard {
	box-shadow: none;
}

/* The page's own two-column rule keys off the window and would fire in a
   sidebar on a wide screen. Inside the widget the container decides. */
.cohortly-widget .c-bookcard--split {
	display: block;
	padding: 24px;
}

.cohortly-widget .c-bookcard__side,
.cohortly-widget .c-bookcard__step {
	padding: 0;
	border-right: 0;
}

.cohortly-widget .c-bookcard--split .c-times {
	grid-template-columns: minmax( 0, 1fr );
}

@container (min-width: 700px) {
	.cohortly-widget .c-bookcard--split {
		display: grid;
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	.cohortly-widget .c-bookcard__side {
		padding: 24px;
		border-right: 1px solid rgb(var(--c-border));
	}

	.cohortly-widget .c-bookcard__step {
		padding: 24px;
	}

	.cohortly-widget .c-bookcard--split .c-booksection {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.cohortly-widget .c-bookcard--split .c-bookcard__blurb {
		border-top: 0;
		padding-top: 0;
		margin-top: 14px;
	}

	.cohortly-widget .c-bookcard--split .c-bookzone {
		border-top: 1px solid rgb(var(--c-border));
	}

	.cohortly-widget .c-bookcard--split .c-times {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* A community session's card: the form, then the confirmation in its place. */
.c-sessiondone {
	padding: 4px 0;
}

.c-sessioncard .c-bookcard__title {
	font-size: 20px;
}

/* ------------------------------------------ booking page, two panels
   On a phone this is one column and the panel simply sits above the step.
   Given room, the standing facts move to a column of their own so the
   calendar is not squeezed into a strip down the middle of an empty page. */

@media (min-width: 840px) {
	.cohortly-bookpage__inner {
		max-width: 780px;
	}

	.c-bookcard--split {
		display: grid;
		grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	.c-bookcard__side {
		padding: 28px;
		border-right: 1px solid rgb(var(--c-border));
	}

	.c-bookcard__step {
		padding: 28px;
	}

	/* The step already has the panel beside it, so its own rules would only
	   draw lines that separate nothing. */
	.c-bookcard--split .c-booksection {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.c-bookcard--split .c-bookcard__blurb {
		border-top: 0;
		padding-top: 0;
		margin-top: 14px;
	}

	.c-bookcard--split .c-bookzone {
		border-top: 1px solid rgb(var(--c-border));
	}

	/* A month of times reads better in two columns than one long ribbon. */
	.c-bookcard--split .c-times {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.c-bookfacts__icon .c-brand {
	vertical-align: -3px;
}

/* The line-drawn icon set. Stroked with currentColor, so it takes the colour
   of whatever it sits next to rather than needing a palette of its own. */
.c-icon {
	flex: none;
	display: block;
}

/* ------------------------------------------------------------ the mark */

/* On a page that arrives by email with no site around it, this is the only
   thing that says who sent the link. */
.c-brandmark {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 24px;
	line-height: 0;
	text-decoration: none;
}

.c-brandmark img {
	display: block;
	max-width: 230px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.c-brandmark--text {
	line-height: 1.3;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: rgb(var(--c-heading));
}

/* A logo drawn for a white header disappears on a dark one. Lifting it a
   little is the safe half of the fix; a site that needs more can supply its
   own image through the cohortly_logo_url filter. */
.cohortly-front[data-cohortly-theme="dark"] .c-brandmark img {
	filter: brightness(1.15);
}

@media (prefers-color-scheme: dark) {
	.cohortly-front:not([data-cohortly-theme="light"]) .c-brandmark img {
		filter: brightness(1.15);
	}
}

/* -------------------------------------------------------------- pay page
   WooCommerce's pay-for-order form on a page of its own, next to a summary
   of what is being bought. The form's markup is WooCommerce's and the
   payment field inside it is Stripe's, drawn in an iframe that copies its
   colours from the page around it — so the inputs and labels here are
   styled as much for that copy as for what the eye sees directly. */

.cohortly-paypage {
	padding: 40px 20px 64px;
	min-height: 100vh;
	background: rgb(var(--c-bg));
}

.cohortly-paypage__inner {
	max-width: 1040px;
	margin: 0 auto;
}

.cohortly-paypage__grid {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.cohortly-paypage__aside {
	position: sticky;
	top: 24px;
}

.c-paycard {
	padding: 26px 28px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.c-paycard--quiet {
	margin-top: 24px;
	text-align: left;
	box-shadow: none;
}

.c-paycard__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--c-muted));
}

.c-paycard__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: rgb(var(--c-heading));
}

.c-paycard--quiet .c-paycard__title {
	font-size: 17px;
	margin-bottom: 12px;
}

.c-payfacts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 8px 16px;
	margin: 0;
	font-size: 14px;
}

.c-payfacts dt {
	color: rgb(var(--c-muted));
}

.c-payfacts dd {
	margin: 0;
	font-weight: 500;
	color: rgb(var(--c-heading));
	overflow-wrap: anywhere;
}

.c-paytotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgb(var(--c-border));
}

.c-paytotal__label {
	font-size: 14px;
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.c-paytotal__figure {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: rgb(var(--c-heading));
}

.c-paycard__note {
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(var(--c-body));
	background: rgb(var(--c-sunk));
	border-radius: 10px;
}

.c-paysecure {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 18px 4px 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(var(--c-muted));
}

.c-paysecure svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

.c-payref {
	margin: -10px 0 22px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
	color: rgb(var(--c-muted));
}

.c-payform__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: rgb(var(--c-heading));
}

/* ---- the form WooCommerce prints ---- */

.cohortly-paypage .woocommerce {
	color: rgb(var(--c-body));
}

/* The order table repeats what the card on the left already says. */
.cohortly-paypage .shop_table {
	display: none;
}

.cohortly-paypage form#order_review {
	padding: 24px 26px 26px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.cohortly-paypage #payment {
	background: transparent;
	border-radius: 0;
}

.cohortly-paypage ul.wc_payment_methods,
.cohortly-paypage ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* WooCommerce prints the radio as a sibling of the label, not inside it,
   so the row is laid out on the item and the radio pinned to its left. */
.cohortly-paypage li.wc_payment_method {
	position: relative;
	margin: 0 0 10px;
	padding: 0;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 10px;
	overflow: hidden;
}

.cohortly-paypage li.wc_payment_method:has( input.input-radio:checked ) {
	border-color: rgb(var(--c-primary));
	box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--c-primary)) 14%, transparent);
}

.cohortly-paypage li.wc_payment_method > input.input-radio {
	position: absolute;
	left: 16px;
	top: 17px;
}

.cohortly-paypage li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 16px 14px 46px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: rgb(var(--c-heading));
	cursor: pointer;
}

.cohortly-paypage li.wc_payment_method > label img {
	max-height: 26px;
	width: auto;
	margin: 0 0 0 auto;
}

.cohortly-paypage li.wc_payment_method > label .stripe-icon,
.cohortly-paypage li.wc_payment_method > label img[alt*="Stripe"] {
	max-height: 22px;
}

.cohortly-paypage input.input-radio {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: rgb(var(--c-primary));
}

.cohortly-paypage .payment_box {
	margin: 0;
	padding: 4px 16px 18px 46px;
	font-size: 14px;
	line-height: 1.55;
	color: rgb(var(--c-body));
	background: transparent;
	border-radius: 0;
}

.cohortly-paypage .payment_box::before {
	display: none;
}

.cohortly-paypage .payment_box p {
	margin: 0 0 10px;
}

.cohortly-paypage .payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.cohortly-paypage .payment_box .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.cohortly-paypage .form-row label,
.cohortly-paypage .payment_box label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: rgb(var(--c-heading));
}

/* Inputs, and — through the hidden one Stripe measures — the card fields. */
.cohortly-paypage .input-text,
.cohortly-paypage input[type="text"],
.cohortly-paypage input[type="email"],
.cohortly-paypage input[type="tel"],
.cohortly-paypage select,
.cohortly-paypage textarea {
	display: block;
	width: 100%;
	padding: 11px 12px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: rgb(var(--c-heading));
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border-strong));
	border-radius: 8px;
	box-shadow: none;
	outline: none;
}

.cohortly-paypage .input-text:focus,
.cohortly-paypage input[type="text"]:focus,
.cohortly-paypage input[type="email"]:focus,
.cohortly-paypage input[type="tel"]:focus,
.cohortly-paypage select:focus,
.cohortly-paypage textarea:focus {
	border-color: rgb(var(--c-primary));
	box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--c-primary)) 18%, transparent);
}

.cohortly-paypage .input-text::placeholder {
	color: rgb(var(--c-muted));
}

.cohortly-paypage .payment_box .woocommerce-SavedPaymentMethods-saveNew,
.cohortly-paypage .payment_box .wc-stripe-save-new-payment-method {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 400;
	color: rgb(var(--c-body));
}

.cohortly-paypage .payment_box .woocommerce-SavedPaymentMethods-saveNew label,
.cohortly-paypage .payment_box .wc-stripe-save-new-payment-method label {
	display: inline;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: rgb(var(--c-body));
}

.cohortly-paypage input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: rgb(var(--c-primary));
}

.cohortly-paypage #wc-stripe-upe-errors,
.cohortly-paypage .wc-stripe-error {
	margin: 8px 0 0;
	font-size: 13px;
	color: rgb(var(--c-live));
}

/* Stripe's express row — Apple Pay, Google Pay, Link, Amazon Pay — and the
   line that reads "or" between it and the rest. */
.cohortly-paypage .wc-stripe-express-checkout-wrapper,
.cohortly-paypage #wc-stripe-express-checkout-element {
	margin: 0 0 18px;
}

/* Stripe shows this with an inline style once the wallets are up; when it
   does, it becomes a word between two rules rather than "— OR —" in text. */
.cohortly-paypage #wc-stripe-express-checkout-button-separator[style*="block"],
.cohortly-paypage #wc-stripe-express-checkout-button-separator:not([style*="none"]) {
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 20px 0 !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(var(--c-muted));
}

.cohortly-paypage #wc-stripe-express-checkout-button-separator::before,
.cohortly-paypage #wc-stripe-express-checkout-button-separator::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: rgb(var(--c-border));
}

/* PayPal's pay-later line ("as low as $x/mo") is drawn by PayPal inside its
   own frame; only its place on the page is ours to set. */
.cohortly-paypage .ppcp-messages,
.cohortly-paypage [id^="ppcp-messages"],
.cohortly-paypage .ppc-button-wrapper .ppcp-messages {
	margin: 0 0 16px;
	text-align: center;
}

/* PayPal draws its own buttons; give them the same breathing room. */
.cohortly-paypage .paypal-buttons,
.cohortly-paypage #ppc-button-ppcp-gateway,
.cohortly-paypage .ppcp-express-checkout {
	margin: 6px 0 0;
}

.cohortly-paypage .place-order {
	margin: 20px 0 0;
	padding: 0;
	background: transparent;
}

.cohortly-paypage #place_order,
.cohortly-paypage button[name="woocommerce_pay"],
.cohortly-paypage .c-paybtn {
	display: block;
	width: 100%;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-align: center;
	background: rgb(var(--c-primary));
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.cohortly-paypage #place_order:hover,
.cohortly-paypage button[name="woocommerce_pay"]:hover {
	filter: brightness(1.06);
}

.cohortly-paypage #place_order:active,
.cohortly-paypage button[name="woocommerce_pay"]:active {
	transform: translateY(1px);
}

.cohortly-paypage #place_order:disabled,
.cohortly-paypage button[name="woocommerce_pay"]:disabled {
	opacity: 0.6;
	cursor: wait;
}

.cohortly-paypage .c-paybtn--ghost {
	display: inline-block;
	width: auto;
	color: rgb(var(--c-heading));
	background: transparent;
	border-color: rgb(var(--c-border-strong));
}

.cohortly-paypage .woocommerce-terms-and-conditions-wrapper,
.cohortly-paypage .woocommerce-privacy-policy-text {
	margin: 14px 0 0;
	font-size: 13px;
	color: rgb(var(--c-muted));
}

.cohortly-paypage .woocommerce-privacy-policy-text a,
.cohortly-paypage .payment_box a {
	color: rgb(var(--c-primary));
}

/* Notices: a declined card, an order that has already been paid. */
.cohortly-paypage .woocommerce-notices-wrapper:empty {
	display: none;
}

.cohortly-paypage .woocommerce-error,
.cohortly-paypage .woocommerce-message,
.cohortly-paypage .woocommerce-info,
.cohortly-paypage .woocommerce-notice {
	list-style: none;
	margin: 0 0 16px;
	padding: 12px 14px 12px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: rgb(var(--c-heading));
	background: rgb(var(--c-sunk));
	border: 1px solid rgb(var(--c-border));
	border-left-width: 4px;
	border-radius: 10px;
}

.cohortly-paypage .woocommerce-error::before,
.cohortly-paypage .woocommerce-message::before,
.cohortly-paypage .woocommerce-info::before {
	display: none;
}

.cohortly-paypage .woocommerce-error {
	border-left-color: rgb(var(--c-live));
	background: rgb(var(--c-live-bg));
}

.cohortly-paypage .woocommerce-message {
	border-left-color: rgb(var(--c-ok));
	background: rgb(var(--c-ok-bg));
}

.cohortly-paypage .woocommerce-info {
	border-left-color: rgb(var(--c-primary));
}

.cohortly-paypage .woocommerce-error li,
.cohortly-paypage .woocommerce-message li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce's own login and email forms, should they ever show here. */
.cohortly-paypage form.woocommerce-form-login,
.cohortly-paypage form.woocommerce-verify-email {
	padding: 24px 26px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 14px;
}

.cohortly-paypage .blockUI.blockOverlay {
	background: rgb(var(--c-surface)) !important;
	opacity: 0.6 !important;
	border-radius: 14px;
}

/* ---- the details step ---- */

.c-payform__lead {
	margin: -8px 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: rgb(var(--c-muted));
}

.cohortly-paypage form.c-payform {
	padding: 24px 26px 26px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.c-payform__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 0 0 22px;
}

.c-payfield--wide {
	grid-column: 1 / -1;
}

.c-payfield label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: rgb(var(--c-heading));
}

.cohortly-paypage .c-payfield select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

.c-payfield--bad .input-text,
.c-payfield--bad select {
	border-color: rgb(var(--c-live));
}

.c-payfield__problem {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: rgb(var(--c-live));
}

.c-payform__problem {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: 14px;
	color: rgb(var(--c-heading));
	background: rgb(var(--c-live-bg));
	border: 1px solid rgb(var(--c-border));
	border-left: 4px solid rgb(var(--c-live));
	border-radius: 10px;
}

/* The address once it is in: one line, and a way back to it. */
.c-payaddress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: rgb(var(--c-surface));
	border: 1px solid rgb(var(--c-border));
	border-radius: 10px;
}

.c-payaddress__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.45;
}

.c-payaddress__who {
	font-weight: 600;
	color: rgb(var(--c-heading));
}

.c-payaddress__where {
	color: rgb(var(--c-muted));
	overflow-wrap: anywhere;
}

.c-payaddress__edit {
	flex: none;
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--c-primary));
	text-decoration: none;
}

.c-payaddress__edit:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.c-payform__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- after paying ---- */

.c-paydone {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.c-paydone__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	color: rgb(var(--c-ok));
	background: rgb(var(--c-ok-bg));
	border-radius: 50%;
}

.c-paydone__mark svg {
	width: 28px;
	height: 28px;
}

.c-paydone__title {
	margin: 0 0 8px;
	font-size: 26px;
	line-height: 1.25;
	color: rgb(var(--c-heading));
}

.c-paydone__body {
	margin: 0;
	font-size: 15px;
	color: rgb(var(--c-muted));
}

.c-paydone__back {
	margin: 24px 0 0;
}

@media (max-width: 860px) {
	.cohortly-paypage {
		padding: 28px 16px 48px;
	}

	.cohortly-paypage__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.cohortly-paypage__aside {
		position: static;
	}

	.c-paycard,
	.cohortly-paypage form#order_review {
		padding: 20px;
	}

	.c-paytotal__figure {
		font-size: 26px;
	}
}