/* Courses — front end.
 *
 * The module paints its own surface. The first build assumed a dark Divi
 * section and hard-coded white text; dropped on a white page every heading
 * and every lesson title vanished. It now renders as a self-contained dark
 * panel, so it looks deliberate on any background and cannot be broken by
 * the section it is placed in.
 */

.fdm-course {
	--crs-gold: #e4af54;
	--crs-ink: #ffffff;
	/* Body copy is white. At 0.72 on a near-black panel it read as grey and
	 * looked disabled rather than secondary. The muted tone still steps down
	 * for meta lines and fine print, but high enough to read comfortably. */
	--crs-soft: #ffffff;
	--crs-mute: rgba(255, 255, 255, 0.78);
	--crs-line: rgba(255, 255, 255, 0.14);
	--crs-bg: #0c0b09;
	--crs-panel: #151310;

	position: relative;
	background: var(--crs-bg);
	/* Square. The panel is dropped into a full-bleed Divi section, so a
	 * rounded corner reads as the page background leaking in at the bottom
	 * rather than as a card edge. Inner cards keep their radii. */
	border-radius: 0;
	/* Line the content up with the site logo while the background stays full
	 * bleed. Padding does not clip a background, so the panel still runs edge
	 * to edge; only the content comes in.
	 *
	 * The header centres a --fdm-mega-max-w container with --fdm-mega-pad-h
	 * inside it, so its logo sits at (page - container) / 2 + pad from the
	 * left. Reusing those variables (they are emitted on :root by the menu
	 * module) matches it at every width, and keeps matching if the container
	 * width is changed in Menu settings. A fixed inset would only be right at
	 * one window size. The fallbacks cover a site running without the menu. */
	--crs-gutter: calc(max(0px, (100% - var(--fdm-mega-max-w, 1440px)) / 2) + var(--fdm-mega-pad-h, 48px));

	/* The site header is fixed and transparent over the hero, so content
	 * placed at the top of the page slides underneath it. Clear the 80px bar
	 * with room to breathe before the eyebrow starts. */
	padding: clamp(100px, 8vw, 128px) var(--crs-gutter) clamp(24px, 4vw, 56px);
	font-family: Raleway, -apple-system, sans-serif;
	color: var(--crs-soft);
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
/* The 32px WordPress admin bar pushes the fixed header down by its own
 * height, so a logged-in editor needs that much again to clear it. Visitors
 * never see this rule. */
body.admin-bar .fdm-course { padding-top: clamp(132px, calc(8vw + 32px), 160px); }
/* The header narrows its own side padding through the tablet band and again on
 * mobile, so the content follows it rather than drifting out of line. */
@media (min-width: 981px) and (max-width: 1280px) {
	.fdm-course { --crs-gutter: var(--fdm-mega-pad-h-tablet, 28px); }
}
@media (max-width: 980px) {
	.fdm-course { --crs-gutter: 24px; }
}
.fdm-course * { box-sizing: border-box; }
.fdm-course p { margin: 0; }
.fdm-course__sr {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.fdm-course__eyebrow {
	margin: 0 0 12px !important;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--crs-gold) !important;
}
.fdm-course__title {
	margin: 0 !important;
	font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
	font-size: clamp(28px, 3.6vw, 46px);
	color: var(--crs-ink) !important;
}
.fdm-course__intro {
	margin: 18px 0 0 !important;
	font-weight: 300; font-size: 17px; line-height: 1.6;
	max-width: 60ch; color: var(--crs-soft) !important;
}
/* margin-top:auto takes whatever height the copy did not use, so the lesson
 * meta and the three ways in below it sit on the bottom of the column and line
 * up with the foot of the featured voices. padding-top keeps a minimum gap for
 * when there is no slack to take — a long "Why take this course?" or a course
 * with fewer voices — and when the columns stack on a narrow screen, where a
 * flex column of auto height leaves nothing for auto to claim. */
.fdm-course__meta {
	margin: auto 0 0 !important; padding-top: 16px;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--crs-mute) !important;
}
.fdm-course__fine {
	margin: 16px 0 0 !important;
	font-weight: 300; font-size: 13px; line-height: 1.55;
	color: var(--crs-mute) !important; max-width: 56ch;
}

/* ── Gate: sign-up on the left, "what is this?" on the right ──
 * The form column is capped so the fields do not sprawl across a wide screen;
 * the explainer takes the space that used to sit empty beside it. */
/* Design, home screen: 1fr and 0.94fr, 84px apart. */
.fdm-course__gate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
	gap: clamp(32px, 5vw, 84px);
	/* stretch, not start: the two columns take the height of the taller, which is
	 * what lets the ways in sit on the bottom of the copy column and finish level
	 * with the voices opposite. See .fdm-course__meta. */
	align-items: stretch;
}
/* A flex column so the block below can claim the leftover height. */
.fdm-course__gate-main { min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 1000px) {
	.fdm-course__gate { grid-template-columns: minmax(0, 1fr); }
	/* Source order, so the course name and the sign-up form come first. An
	 * earlier build hoisted the explainer above them, which meant a phone
	 * opened on a stock video and a rail of other courses before it said
	 * which course this even was. */
}

/* ── "What is a Foundation Course?" ── */
.fdm-course__about { min-width: 0; }
/* No poster available: an unlisted Vimeo trailer with no hash, or a private one.
   A flat panel rather than a broken image, so the play button and the pill still
   have something to sit against. */
.fdm-course__about-noposter {
	display: block; width: 100%; aspect-ratio: 16 / 9;
	background: linear-gradient(160deg, #1a1917, #0c0b09);
}
.fdm-course__about-video {
	position: relative; display: block; width: 100%; padding: 0;
	aspect-ratio: 16 / 9; overflow: hidden;
	border: 1px solid var(--crs-line); border-radius: 14px;
	background: var(--crs-panel); cursor: pointer;
}
.fdm-course__about-video.is-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; cursor: default; border-style: dashed;
}
.fdm-course__about-video img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform .3s ease;
}
.fdm-course__about-play:hover img { transform: scale(1.03); }
.fdm-course__about-play-btn {
	position: relative; z-index: 1;
	width: 58px; height: 58px; border-radius: 999px;
	background: var(--crs-gold); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
}
.fdm-course__about-play .fdm-course__about-play-btn {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.fdm-course__about-play-btn::after {
	content: ""; width: 0; height: 0; margin-left: 4px;
	border-left: 17px solid #1a1206;
	border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.fdm-course__about-empty {
	position: relative; z-index: 1; text-align: center;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--crs-mute);
}
.fdm-course__about-empty i {
	display: block; margin-top: 7px; font-style: normal;
	font-family: Raleway, sans-serif; font-size: 12px;
	letter-spacing: 0; text-transform: none; color: var(--crs-gold);
}
.fdm-course__about-head {
	margin: 22px 0 0 !important;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
	font-size: 23px; color: var(--crs-ink) !important;
}
.fdm-course__about-text {
	margin: 12px 0 0 !important;
	font-weight: 300; font-size: 15px; line-height: 1.62;
	color: var(--crs-soft) !important;
}
/* 0.34 was barely visible against the panel; the field looked empty and
 * unlabelled, since the placeholder is the only label these inputs have. */
.fdm-course__form input::placeholder { color: rgba(255, 255, 255, 0.62); }
.fdm-course__form button:hover { filter: brightness(1.07); }
.fdm-course__form button[disabled] { opacity: .55; cursor: default; }
.fdm-course__msg {
	grid-column: 1 / -1;
	font-weight: 300; font-size: 13px; color: var(--crs-gold) !important;
	min-height: 18px;
}

/* ── Head + progress ── */
.fdm-course__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 32px; flex-wrap: wrap;
	padding-bottom: 24px; margin-bottom: 28px;
	border-bottom: 1px solid var(--crs-line);
}
/* The count sits beside the bar, not under it. */

/* ── Stage ── */
/* Design, lesson screen: 1fr and a fixed 392px rail, 48px apart. (The 0.94fr
 * grid I used first belongs to the course-home screen, not this one.) */
.fdm-course__stage {
	display: grid; grid-template-columns: minmax(0, 1fr) 392px;
	gap: 48px; align-items: start;
}
.fdm-course__player {
	position: relative; aspect-ratio: 16 / 9;
	border-radius: 14px; overflow: hidden; background: #000;
}
.fdm-course__player iframe,
.fdm-course__player > div {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ── A session named but not yet filmed ──
 * Covers the player rather than replacing it, so switching back to a real
 * session does not have to rebuild the YouTube embed. It inherits inset:0 from
 * the `> div` rule above; the z-index is what puts it over the iframe.
 *
 * The [hidden] guard is not optional: `display:flex` here would otherwise beat
 * the attribute and the panel would sit over every lesson, filmed or not. */
/* ── Between sessions ──
 * Same trick as the panel below: covers the player rather than replacing it,
 * inheriting inset:0 from the `> div` rule, so the embed survives. Shown when
 * a session finishes or is marked watched, and only when there is another one
 * to go to.
 *
 * The [hidden] guard is not optional here either — display:flex would beat the
 * attribute and leave this sitting over every video. */
.fdm-course__between {
	z-index: 3; background: rgba(10, 9, 8, 0.94);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 32px; text-align: center;
}
.fdm-course__between[hidden] { display: none; }
.fdm-course__between-eyebrow {
	margin: 0;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.28em; text-transform: uppercase; color: var(--crs-gold);
}
.fdm-course__between-head {
	margin: 0; max-width: 26ch;
	font: 700 clamp(19px, 2.2vw, 26px)/1.2 Raleway, sans-serif;
	letter-spacing: -0.02em; color: #fff;
}
.fdm-course__between-actions {
	margin-top: 12px; display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center; gap: 10px;
}
/* The ask is the outlined one and the way onward is solid: continuing is what
 * most people came to do, so it should not need hunting for. */
.fdm-course__between-give,
.fdm-course__between-next {
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: 11px 20px; border-radius: 999px; cursor: pointer;
	text-decoration: none; white-space: nowrap;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fdm-course__between-give {
	background: transparent; color: var(--crs-gold);
	border: 1px solid rgba(228, 175, 84, 0.55);
}
.fdm-course__between-give:hover,
.fdm-course__between-give:focus-visible { background: rgba(228, 175, 84, 0.12); border-color: var(--crs-gold); }
.fdm-course__between-next {
	background: var(--crs-gold); color: #1a1206; border: 1px solid var(--crs-gold);
}
.fdm-course__between-next:hover,
.fdm-course__between-next:focus-visible { filter: brightness(1.08); }
@media (max-width: 560px) {
	.fdm-course__between { padding: 20px; gap: 8px; }
	.fdm-course__between-actions { flex-direction: column; width: 100%; }
	.fdm-course__between-give,
	.fdm-course__between-next { width: 100%; text-align: center; }
}

.fdm-course__soon {
	z-index: 2; background: var(--crs-panel);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; padding: 32px; text-align: center;
}
.fdm-course__soon[hidden] { display: none; }
.fdm-course__soon-mark {
	width: 46px; height: 46px; border-radius: 999px;
	border: 1px dashed rgba(228, 175, 84, 0.55);
	position: relative; flex: none;
}
/* A clock hand rather than a play triangle: this is the one panel on the page
 * that means "not yet" instead of "press me". */
.fdm-course__soon-mark::before,
.fdm-course__soon-mark::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	background: var(--crs-gold); border-radius: 2px; transform-origin: 0 50%;
}
.fdm-course__soon-mark::before { width: 12px; height: 2px; transform: translate(0, -50%) rotate(-90deg); }
.fdm-course__soon-mark::after  { width: 9px;  height: 2px; transform: translate(0, -50%) rotate(20deg); }
.fdm-course__soon-head {
	margin: 0 !important;
	font: 500 12px "DM Mono", monospace;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--crs-gold) !important;
}
.fdm-course__soon-text {
	margin: 0 !important; max-width: 34ch;
	font-weight: 300; font-size: 14.5px; line-height: 1.55;
	color: var(--crs-soft) !important;
}

.fdm-course__lesson { margin: 0 !important; }
/* Still selectable: someone should be able to see what is coming. It just reads
 * as pending rather than available. */
.fdm-course__lesson.is-coming .fdm-course__lesson-title { color: var(--crs-mute); }
.fdm-course__lesson.is-coming .fdm-course__num { opacity: .55; }

.fdm-course__lesson-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fdm-course__lesson-title {
	font-weight: 600; font-size: 14.5px; line-height: 1.35;
	color: var(--crs-ink);
}
.fdm-course__lesson-min {
	font: 500 10.5px "DM Mono", monospace;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--crs-mute);
}

/* ── Completion ──
   Over the player, with the between panel and the coming-soon panel, rather
   than under the page. Below the fold it was the one thing the whole course
   builds towards and the one thing nobody saw.

   It inherits inset:0 from the `.fdm-course__player > div` rule above, so it
   only needs its own z-index, ground and layout. z-index 4 is above the between
   panel: the two cannot both apply, since a course with nothing left to watch
   has no next session to offer, but they share the frame and an explicit order
   is cheaper than reasoning about that twice.

   [hidden] gets its own display:none because the rule above sets width and
   height on every direct child, and a class that sets display would outrank the
   browser's own [hidden]. It does not set display, so this is belt and braces,
   which is what the equivalent line on .fdm-course__between is. */
.fdm-course__done {
	z-index: 4;
	display: flex; flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(18px, 3vw, 40px);
	/* The frame is 16:9 and this is the tallest thing that goes in it: a
	   heading, a line of copy, sometimes a name field, and two buttons. On a
	   short frame that overflows, so it scrolls rather than being clipped.

	   The centring is done by margin:auto on the inner box, NOT by
	   justify-content, because a centred flex child that overflows is
	   unreachable at both ends: on a phone in landscape the heading was
	   scrolled off the top with no way back to it. An auto margin centres while
	   there is room and collapses once there is not. */
	overflow-y: auto;
	background: linear-gradient(150deg, rgba(228, 175, 84, 0.14) 0%, rgba(228, 175, 84, 0) 62%), rgba(10, 9, 8, 0.96);
}
.fdm-course__done[hidden] { display: none; }
/* The eyebrow's own rule is `margin: 0 0 12px !important`, so it gets the same
   treatment as the heading and the copy. It has no width cap, so it is centred
   by its text-align today; this is only here so the three of them agree and
   nobody has to work out which ones needed it. */
.fdm-course__done .fdm-course__eyebrow { margin: 0 auto 12px !important; }

.fdm-course__done-inner {
	margin: auto 0; width: 100%;
	/* A flex column that centres its own children, rather than relying on their
	   margins.
	   
	   Every capped box in here has to be centred: the heading is 24ch, the copy
	   44ch, the name row 460px. As blocks in a plain div they all sat hard left
	   under a centred eyebrow. The obvious fix, auto side margins, cannot work:
	   .fdm-course__eyebrow, .fdm-course__intro and this h3 all declare
	   `margin: … 0 0 !important` to hold off the theme's own heading and
	   paragraph margins, and that !important beats any auto margin added here.
	   Aligning instead ignores margins entirely, and covers anything added to
	   this panel later without it having to know about this. */
	display: flex; flex-direction: column; align-items: center;
}
/* While the completion panel is up, the frame may take more height than 16:9
   gives it. On a wide window 16:9 is already taller than this and the min does
   nothing; on a narrow one it is the difference between the certificate button
   being in view and being below the fold inside the frame, which is the very
   problem moving this panel up here was meant to solve. Set from paint(), and
   only while the panel is showing, so the player is its normal shape for every
   session. */
.fdm-course__player.is-complete { min-height: 470px; }
.fdm-course__done h3 {
	/* auto in the shorthand, not a separate margin-inline: the !important is
	   here to hold off the theme's own heading margins, and an auto side margin
	   declared anywhere else would lose to it. Belt to the align-items on
	   .fdm-course__done-inner: between them this stays centred whether or not
	   the inner box is in the markup, which matters because the CSS and the HTML
	   do not always arrive together through a page cache. */
	margin: 6px auto 0 !important;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
	font-size: clamp(20px, 2.4vw, 32px);
	/* 24ch broke "You have finished Foundations Course." after "Foundations",
	   leaving one word alone on the second line. Wider, and balanced, so the
	   browser splits the lines evenly instead of filling the first and
	   orphaning whatever is left. */
	max-width: 34ch;
	text-wrap: balance;
	color: var(--crs-ink) !important;
}
/* The shared .fdm-course__intro is a left-aligned paragraph with a measure
   meant for the column this panel used to live in. In the frame it is centred
   and tighter. */
.fdm-course__done .fdm-course__intro {
	margin: 10px auto 0 !important;
	max-width: 46ch; text-align: center;
	text-wrap: pretty;
	font-size: clamp(13.5px, 1.4vw, 15.5px);
}
.fdm-course__done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; justify-content: center; }
/* Off the flow entirely: it is 1080x1920 and only ever drawn into, never seen.
   Left in the flow of a flex column it would stretch the panel it sits in. */
.fdm-course__done canvas { position: absolute; left: -9999px; }

/* The frame is short in landscape on a phone, where 16:9 of a 400px-wide
   window is about 225px tall. Everything comes down a step so the two buttons
   stay reachable without scrolling. */
@media (max-width: 700px) {
	.fdm-course__done { padding: 14px; }
	.fdm-course__done h3 { font-size: 17px; max-width: none; }
	.fdm-course__done .fdm-course__intro { display: none; }
	.fdm-course__done-actions { margin-top: 12px; flex-direction: column; width: 100%; gap: 8px; }
	.fdm-course__done .fdm-course__cert,
	.fdm-course__done .fdm-course__give { width: 100%; padding: 11px 18px; }
	/* The name row stacks too, or the field and its button fight over 400px. */
	.fdm-course__done .fdm-course__certname { margin-top: 12px; gap: 8px; }
	.fdm-course__done .fdm-course__certname input,
	.fdm-course__done .fdm-course__certname button { flex: 1 1 100%; width: 100%; }
}
.fdm-course__cert, .fdm-course__give {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; padding: 14px 30px; cursor: pointer;
	font: 700 13px Raleway, sans-serif;
	letter-spacing: 0.08em; text-transform: uppercase;
	text-decoration: none !important; border: 1px solid var(--crs-gold);
}
.fdm-course__cert { background: transparent; color: var(--crs-gold) !important; }
.fdm-course__cert:hover { background: rgba(228, 175, 84, 0.12); }
.fdm-course__give { background: var(--crs-gold); color: #1a1206 !important; }
.fdm-course__give:hover { filter: brightness(1.07); }

@media (max-width: 900px) {
	.fdm-course__stage { grid-template-columns: 1fr; gap: 20px; }
	.fdm-course__list { max-height: none; }
	.fdm-course__head { align-items: flex-start; }
	/* Full width under the title, and wrapping is allowed again here: four
	 * controls in one line stop fitting somewhere around this width. */
	.fdm-course__progress { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 620px) {
}

/* ── Registration: three paths ──
 * Solo, join a group, lead a group. The extra field for the chosen path is
 * revealed by JS; without JS every extra stays visible and the form still
 * submits, because the radio alone carries the choice. */
.fdm-course__paths {
	/* The gate form is a 1fr 1fr auto grid (name, email, button); without this
	 * the whole path chooser would squeeze into the first column. */
	grid-column: 1 / -1;
	border: 0; margin: 22px 0 4px; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.fdm-course__paths legend {
	padding: 0 0 12px; font-size: 13px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--crs-mute);
	font-family: "DM Mono", ui-monospace, monospace;
}
.fdm-course__path {
	border: 1px solid var(--crs-line); border-radius: 12px;
	background: var(--crs-panel); transition: border-color 160ms ease;
}
.fdm-course__path:has(input:checked) { border-color: var(--crs-gold); }
.fdm-course__path > label {
	display: flex; align-items: flex-start; gap: 13px;
	padding: 16px 18px; cursor: pointer;
}
.fdm-course__path input { margin: 3px 0 0; accent-color: var(--crs-gold); flex: 0 0 auto; }
.fdm-course__path b { display: block; color: var(--crs-ink); font-size: 16px; font-weight: 600; }
.fdm-course__path i { display: block; margin-top: 3px; font-style: normal; font-size: 14px; color: var(--crs-soft); }

/* ── The leader's group panel ── */
.fdm-course__group {
	margin: 0 0 26px; padding: 22px 24px;
	border: 1px solid var(--crs-line); border-radius: 14px; background: var(--crs-panel);
}
.fdm-course__group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fdm-course__group-head h3 { margin: 4px 0 0; color: var(--crs-ink); font-size: 21px; font-weight: 700; }
.fdm-course__group-count { color: var(--crs-mute); font-size: 13px; }
.fdm-course__invite { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.fdm-course__invite > span {
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--crs-mute); font-family: "DM Mono", ui-monospace, monospace;
}
.fdm-course__invite input {
	flex: 1 1 260px; min-width: 0; font-size: 13px;
	font-family: ui-monospace, Menlo, monospace;
}
.fdm-course__copy {
	flex: 0 0 auto; border: 1px solid var(--crs-line); background: transparent;
	color: var(--crs-ink); border-radius: 999px; padding: 9px 20px;
	font-size: 13px; font-weight: 600; cursor: pointer;
}
.fdm-course__copy:hover { border-color: var(--crs-gold); color: var(--crs-gold); }
.fdm-course__roster { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fdm-course__roster li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 74px; gap: 14px; align-items: center; }
.fdm-course__roster-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdm-course__roster-who b { color: var(--crs-ink); font-weight: 600; font-size: 15px; }
.fdm-course__roster-who em {
	margin-left: 7px; font-style: normal; font-size: 11px; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--crs-gold);
}
.fdm-course__roster-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.fdm-course__roster-bar i { display: block; height: 100%; background: var(--crs-gold); }
.fdm-course__roster-n { font-size: 12px; color: var(--crs-mute); text-align: right; }
.fdm-course__ledby { margin: 0 0 22px; font-size: 14px; color: var(--crs-soft); }
.fdm-course__ledby b { color: var(--crs-ink); }

@media (max-width: 620px) {
	.fdm-course__roster li { grid-template-columns: minmax(0, 1fr) 66px; }
	.fdm-course__roster-bar { display: none; }
	}

/* ── Now playing: the lesson blurb finally has a home ── */
.fdm-course__playing { min-width: 0; }
.fdm-course__now { margin-top: 18px; }
.fdm-course__now-meta {
	margin: 0 0 8px !important;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--crs-gold) !important;
}
.fdm-course__now-title {
	margin: 0 !important;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
	font-size: 22px; color: var(--crs-ink) !important;
}
.fdm-course__now-blurb {
	margin: 9px 0 0 !important;
	font-weight: 300; font-size: 15px; line-height: 1.6;
	max-width: 62ch; color: var(--crs-soft) !important;
}

/* The hidden attribute is a UA display:none, so ANY author display rule beats
 * it. Giving the gate display:grid for its two columns silently stopped it
 * hiding once someone enrolled, leaving the sign-up form stacked on top of the
 * whole course. Scoped to the module so it cannot leak into the page. */
.fdm-course [hidden] { display: none !important; }

/* The lesson list is an <ol> for order, but the numerals duplicated the
 * "Lesson n" caption under the player and read as clutter. */
.fdm-course__list { list-style: none !important; }
.fdm-course__list > li::marker { content: none; }

/* ── Group code, on the leader's panel ── */

/* Join code field: monospaced and spaced out, because it gets read aloud. */

/* ── "More about Foundation Courses" ── */
.fdm-course__about-more { margin: 14px 0 0 !important; }
.fdm-course__about-more a {
	color: var(--crs-gold) !important; text-decoration: none;
	font-weight: 600; font-size: 14px;
	border-bottom: 1px solid rgba(228, 175, 84, 0.4); padding-bottom: 2px;
}
.fdm-course__about-more a:hover { border-bottom-color: var(--crs-gold); }


/* Divi styles bare inputs and can outrank us on a page where the module sits
 * in a Code block, so the colour is stated firmly. */
/* Typed text only. No -webkit-text-fill-color and no :-webkit-autofill
 * override: those fight the browser's and the password manager's own autofill
 * rendering, which is what produced a gold pill over the email field. Left
 * alone, autofill looks the way it does everywhere else. */
.fdm-course input,
.fdm-course select,
.fdm-course textarea {
	color: var(--crs-ink) !important;
	caret-color: var(--crs-gold);
}
/* The readonly invite field is informational, so it keeps the softer tone. */
.fdm-course__invite input { color: var(--crs-soft) !important; }

/* ── "How this course works" ──
 * Fixed over the viewport, above the mega menu's own 99999 so it is not half
 * covered by the fixed header. .fdm-course has overflow:hidden but no
 * transform or filter, so it does not become a containing block and the fixed
 * position still resolves against the viewport. */
.fdm-course__tour {
	/* JS reparents this to <body>, so it inherits nothing from .fdm-course:
	 * the palette has to be restated here or every colour below resolves to
	 * an invalid value. */
	--crs-gold: #e4af54;
	--crs-ink: #ffffff;
	--crs-soft: #ffffff;
	--crs-mute: rgba(255, 255, 255, 0.78);
	--crs-line: rgba(255, 255, 255, 0.14);
	--crs-panel: #151310;
	font-family: Raleway, -apple-system, sans-serif;

	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	/* A short viewport, or a phone in landscape, would otherwise centre the
	 * card and clip its top and bottom with no way to reach them. */
	overflow-y: auto;
	overscroll-behavior: contain;
}
.fdm-course__tour-card { margin: auto; }
/* Also its own, not the scoped `.fdm-course [hidden]` rule: once reparented
 * that no longer matches, and this element's own display:flex would otherwise
 * beat the browser's default for [hidden] and leave the card permanently up. */
.fdm-course__tour[hidden] { display: none !important; }
.fdm-course__tour * { box-sizing: border-box; }
.fdm-course__tour p { margin: 0; }
.fdm-course__tour-bg {
	/* Fixed, not absolute: the overlay scrolls when the card is taller than
	 * the viewport, and an absolute backdrop would scroll out of the top with
	 * it, leaving the page showing through. */
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(3px);
}
.fdm-course__tour-card {
	position: relative; width: 100%; max-width: 500px;
	padding: clamp(26px, 4vw, 38px);
	border: 1px solid rgba(228, 175, 84, 0.32); border-radius: 16px;
	background: linear-gradient(150deg, rgba(228, 175, 84, 0.10) 0%, rgba(228, 175, 84, 0) 58%), var(--crs-panel);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
	animation: fdm-course-tour-in .28s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes fdm-course-tour-in {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fdm-course__tour-card { animation: none; }
}
.fdm-course__tour-card h3 {
	margin: 0 !important;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.12;
	font-size: clamp(24px, 3vw, 30px); color: var(--crs-ink) !important;
}
.fdm-course__tour-steps {
	list-style: none; counter-reset: crs-step;
	margin: 24px 0 0 !important; padding: 0 !important;
	display: flex; flex-direction: column; gap: 18px;
}
.fdm-course__tour-steps li {
	counter-increment: crs-step;
	display: grid; grid-template-columns: 30px minmax(0, 1fr);
	gap: 4px 14px; align-items: start; margin: 0 !important;
}
/* ::before is grid item 1, so without this the <b> takes column 2 and the
 * <span> wraps back into the 30px numeral column, one word per line. */
.fdm-course__tour-steps li > b,
.fdm-course__tour-steps li > span { grid-column: 2; }
.fdm-course__tour-steps li::before {
	content: counter(crs-step);
	width: 30px; height: 30px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(228, 175, 84, 0.14); color: var(--crs-gold);
	border: 1px solid rgba(228, 175, 84, 0.4);
	font: 700 13px "DM Mono", monospace;
}
.fdm-course__tour-steps b { display: block; color: var(--crs-ink); font-size: 16px; font-weight: 600; }
.fdm-course__tour-steps span {
	display: block; margin-top: 4px;
	font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--crs-soft);
}
.fdm-course__tour-go {
	margin-top: 28px; width: 100%;
	background: var(--crs-gold); color: #1a1206;
	border: 0; border-radius: 999px; padding: 15px 30px; cursor: pointer;
	font: 700 13px Raleway, sans-serif;
	letter-spacing: 0.08em; text-transform: uppercase;
	transition: filter .15s ease;
}
.fdm-course__tour-go:hover { filter: brightness(1.07); }

/* The way back in, once it has been dismissed. */
.fdm-course__tour-open {
	/* Lives in the header row now, beside Save my progress, so it lines up with
	 * the controls either side rather than hanging below something. */
	margin-top: 0; padding: 0; background: none; border: 0; cursor: pointer;
	white-space: nowrap;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--crs-mute); border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.fdm-course__tour-open:hover { color: var(--crs-gold); border-bottom-color: var(--crs-gold); }

/* ── Full screen ── */
.fdm-course__fs {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 14px; padding: 8px 16px;
	background: transparent; border: 1px solid var(--crs-line);
	border-radius: 999px; cursor: pointer;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--crs-mute);
	transition: border-color .15s ease, color .15s ease;
}
.fdm-course__fs:hover { border-color: var(--crs-gold); color: var(--crs-gold); }
/* iOS Safari refuses fullscreen on anything but a video element, so the script
   hides this control there rather than offering a dead button. The rule above
   sets display, which outranks the browser's own [hidden]{display:none}, so
   without this the button it thought it had hidden stayed on screen. Same shape
   of bug as the popup image slot. */
.fdm-course__fs[hidden] { display: none; }
/* The player keeps a 16/9 box in the page; in full screen it should simply
 * fill the screen, and the rounded corner would clip the video. */
.fdm-course__player:fullscreen,
.fdm-course__player:-webkit-full-screen {
	aspect-ratio: auto; width: 100vw; height: 100vh;
	border-radius: 0; background: #000;
}

/* ── Who is signed in, and the way out ── */
.fdm-course__who {
	margin: 0 !important; white-space: nowrap;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--crs-mute) !important;
}
.fdm-course__who b { color: var(--crs-soft); font-weight: 600; }
/* Stated outright, not inherited. This button used to sit inside
 * .fdm-course__who and took the mono face from it; as a sibling it inherited
 * the body font instead and rendered as a stray native-looking button. */
.fdm-course__signout {
	padding: 0; background: none; border: 0; cursor: pointer;
	white-space: nowrap;
	/* Also worn by an <a> in the administrator preview, where the slot is a
	 * link to the visitor view rather than a sign-out button. */
	text-decoration: none;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--crs-mute);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.fdm-course__signout:hover { color: var(--crs-gold); border-bottom-color: var(--crs-gold); }
.fdm-course__signout[disabled] { opacity: .5; cursor: default; }

/* The signed-in line and the two text buttons sit inline in the header row. */
.fdm-course__who { margin: 0 !important; }
.fdm-course__who,
.fdm-course__signout,
.fdm-course__tour-open { margin-top: 0 !important; white-space: nowrap; }

/* ── Full screen ── */
.fdm-course__fs svg { flex: 0 0 auto; }
/* In full screen the module IS the page, so it needs its own scrolling and
 * sane padding; the page gutter maths no longer applies. */
.fdm-course:fullscreen,
.fdm-course:-webkit-full-screen {
	overflow-y: auto;
	padding: clamp(28px, 4vw, 56px);
	background: var(--crs-bg);
}
.fdm-course:fullscreen .fdm-course__stage,
.fdm-course:-webkit-full-screen .fdm-course__stage { align-items: start; }

/* ══ Course Module redesign (Aug 17) ══════════════════════════════════════
 * Player carries its own pills; the session rail sits beside it as a peer;
 * the caption and an explicit Mark watched sit under the player. */

.fdm-course__playing { min-width: 0; }
.fdm-course__player { position: relative; }

/* Pills on the picture. Everything but the control is inert, so a click meant
 * for the player is never swallowed by a label. */
.fdm-course__pill {
	position: absolute; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 999px; white-space: nowrap;
	background: rgba(0, 0, 0, 0.5); border: 1px solid var(--crs-line);
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--crs-mute);
}
.fdm-course__pill--now { left: 18px; bottom: 16px; pointer-events: none; }
.fdm-course__pill--now:empty { display: none; }
.fdm-course__fs {
	top: 16px; right: 18px; cursor: pointer;
	transition: color .22s ease, border-color .22s ease;
}
.fdm-course__fs:hover { color: var(--crs-ink); border-color: rgba(255, 255, 255, 0.34); }

.fdm-course__of {
	margin: 16px 0 0 !important; text-align: right;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42) !important;
}

/* ── Caption under the player ── */
.fdm-course__now { margin-top: 36px; }
/* The Mark watched button sits between the player and this now, so the caption
 * tucks up under it. Stated rather than left to margin collapsing, which would
 * have taken the larger of the two and put 36px between a button and the title
 * it belongs with. The [hidden] case restores the original gap, because on a
 * session with no video the button is not there to space against. */
.fdm-course__mark + .fdm-course__now { margin-top: 20px; }
.fdm-course__mark[hidden] + .fdm-course__now { margin-top: 36px; }
.fdm-course__now-meta {
	margin: 0 !important;
	font: 500 12px "DM Mono", monospace;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--crs-gold) !important;
}
.fdm-course__now-title {
	margin: 12px 0 0 !important;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.04;
	font-size: clamp(26px, 2.6vw, 34px); color: var(--crs-ink) !important;
}
.fdm-course__now-blurb {
	margin: 14px 0 0 !important;
	font-weight: 300; font-size: 18px; line-height: 1.62;
	max-width: 60ch; color: var(--crs-soft) !important;
}
/* Sits above the session title now, so its margins flip: clear of the player
 * above, tight to the caption below.
 *
 * Outlined rather than filled. A solid gold pill this size was the loudest
 * thing on the page and it sat directly under a black-on-gold video, competing
 * with the session title for the eye. Finishing a session is routine; the
 * button only has to be findable, and gold text on a gold hairline is. */
.fdm-course__mark {
	margin: 22px 0 0;
	background: none; color: var(--crs-gold);
	border: 1px solid rgba(228, 175, 84, 0.45); border-radius: 999px;
	padding: 9px 18px; cursor: pointer;
	font: 600 11px "DM Mono", monospace;
	letter-spacing: 0.16em; text-transform: uppercase;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.fdm-course__mark:hover {
	border-color: var(--crs-gold); background: rgba(228, 175, 84, 0.1);
}
.fdm-course__mark[disabled] {
	opacity: .45; cursor: default;
	border-color: rgba(228, 175, 84, 0.28); background: none;
}
/* It is the first thing in the column when it shows, and hidden for a session
 * with no video, so the gap it leaves has to go with it. */
.fdm-course__mark[hidden] { display: none; }

/* ── The session rail ── */
.fdm-course__side { min-width: 0; }
.fdm-course__side-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 4px 2px 14px;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.22em; text-transform: uppercase; color: var(--crs-mute);
}
.fdm-course__rail-count { letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.42); }
.fdm-course__list {
	list-style: none !important; margin: 0 !important; padding: 0 !important;
	display: flex; flex-direction: column; gap: 10px;
}
.fdm-course__lesson { margin: 0 !important; }
.fdm-course__lesson button {
	width: 100%; display: flex; align-items: center; gap: 16px;
	text-align: left; padding: 16px 18px;
	border-radius: 14px; cursor: pointer; color: inherit; font: inherit;
	background: var(--crs-panel); border: 1px solid var(--crs-line);
	transition: border-color .22s ease, background .22s ease, transform .14s ease;
}
.fdm-course__lesson button:hover { transform: translateY(-2px); border-color: rgba(228, 175, 84, 0.5); }
.fdm-course__lesson.is-current button {
	border-color: var(--crs-gold);
	background: linear-gradient(180deg, rgba(228, 175, 84, 0.12) 0%, rgba(228, 175, 84, 0.04) 100%), var(--crs-panel);
}
/* ── The trailer, opening the rail ──
 * Not one of the numbered sessions, and it should not read as one. Its marker
 * is a play glyph, it carries a gold tint even when idle, and a hairline under
 * it separates the one thing anybody can watch right now from the five that
 * cost an email address. */
.fdm-course__lesson--trailer {
	padding-bottom: 12px !important;
	border-bottom: 1px solid var(--crs-line);
}
.fdm-course__lesson--trailer .fdm-course__num {
	color: var(--crs-gold);
	border-color: rgba(228, 175, 84, 0.4);
	background: rgba(228, 175, 84, 0.08);
}
.fdm-course__lesson--trailer .fdm-course__num svg { display: block; }
/* The subtitle line holds a description here, not a run time, and it keeps the
 * row's gold tint rather than the grey the minutes take on every other row. */
.fdm-course__lesson--trailer .fdm-course__lesson-min { color: rgba(228, 175, 84, 0.75); }

.fdm-course__num {
	flex: none; width: 42px; height: 42px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font: 500 14px "DM Mono", monospace; letter-spacing: 0.05em;
	border: 1px solid var(--crs-line); color: var(--crs-mute);
	background: rgba(255, 255, 255, 0.03);
}
.fdm-course__lesson.is-current .fdm-course__num {
	border-color: var(--crs-gold); color: #1a1206; background: var(--crs-gold);
}
.fdm-course__lesson.is-done .fdm-course__num {
	border-color: rgba(228, 175, 84, 0.5); color: var(--crs-gold);
	background: rgba(228, 175, 84, 0.12);
}
.fdm-course__lesson-text { flex: 1; min-width: 0; display: block; }
.fdm-course__lesson-title {
	display: block; font-size: 16.5px; font-weight: 600;
	letter-spacing: -0.01em; color: var(--crs-ink);
}
.fdm-course__lesson-min {
	display: block; margin-top: 3px;
	font: 500 10.5px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}
.fdm-course__lesson-status {
	flex: none; white-space: nowrap;
	font: 500 10px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}
.fdm-course__lesson.is-current .fdm-course__lesson-status { color: var(--crs-gold); }
.fdm-course__side-foot { margin-top: 18px; display: flex; justify-content: flex-end; }
/* Join a group / Lead a group, closing the rail.
 *
 * Side by side in a 392px column, so each half is about 190px and the pair runs
 * a size down from the intro's: label above description, tighter padding, type
 * stepped back. The arrow shrinks with it, or it starts to outweigh the label
 * it sits beside.
 *
 * The margin is on the container rather than on .fdm-course__side-foot above,
 * because a course with no Give link does not render that foot at all and these
 * would otherwise sit flush against the last session. */
.fdm-course__side-paths { margin-top: 20px; }
/* Matches .fdm-course__side-head, so the rail reads as two labelled blocks.
 * The !important pair is what .fdm-course__eyebrow already needs: this is a
 * paragraph, and the theme sets a margin and a colour on those. */
.fdm-course__side-paths-head {
	margin: 0 0 10px !important; padding: 0 2px;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--crs-mute) !important;
}
.fdm-course__side-paths-pair {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px; align-items: stretch;
}
.fdm-course__side-paths-pair .fdm-course__path--link {
	align-items: flex-start; gap: 8px; padding: 13px 14px;
}
.fdm-course__side-paths-pair .fdm-course__path--link b { font-size: 14.5px; }
.fdm-course__side-paths-pair .fdm-course__path--link i {
	margin-top: 2px; font-size: 12.5px; line-height: 1.4;
}
.fdm-course__side-paths-pair .fdm-course__path-go { font-size: 15px; }
/* The stage goes to one column at 900px and the rail is full width from there,
 * so two halves are comfortable again. On a phone they are not. */
@media (max-width: 560px) {
	.fdm-course__side-paths-pair { grid-template-columns: minmax(0, 1fr); }
}
.fdm-course__side-give {
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--crs-gold); text-decoration: none;
	border-bottom: 1px solid rgba(228, 175, 84, 0.45);
	transition: color 160ms ease, border-color 160ms ease;
}
.fdm-course__side-give:hover,
.fdm-course__side-give:focus-visible { color: #fff; border-bottom-color: #fff; }


/* The rail is a fixed 392px, so it starts squeezing the player long before a
 * fractional column would. Collapse at 1100px, not 900. */
@media (max-width: 1100px) {
	.fdm-course__stage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.fdm-course__now { margin-top: 26px; }
}

/* ── Header row (design: flex, 28px gap, wraps) ──
 * This lost its display:flex in the 2.89.0 cleanup and the four controls went
 * back to stacking. Bar, watched count, who, and the way out, on one line. */
.fdm-course__progress {
	flex: 0 1 auto;
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
	padding-bottom: 5px;
}
.fdm-course__meter { display: inline-flex; align-items: center; gap: 12px; }
.fdm-course__bar {
	display: block; width: 140px; height: 3px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.12); overflow: hidden;
}
.fdm-course__bar > span {
	display: block; height: 100%; width: 0;
	background: var(--crs-gold); transition: width .42s cubic-bezier(.22,.61,.36,1);
}
.fdm-course__count,
.fdm-course__who,
.fdm-course__signout {
	white-space: nowrap;
	font: 500 11.5px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase;
}
.fdm-course__count { color: var(--crs-mute); }
.fdm-course__who { margin: 0 !important; color: var(--crs-mute) !important; }
.fdm-course__who b { color: var(--crs-ink); font-weight: 600; }
.fdm-course__signout {
	padding: 0 0 2px; background: none; border: 0; cursor: pointer;
	color: var(--crs-soft);
	border-bottom: 1px solid var(--crs-line);
	transition: color .22s ease, border-color .22s ease;
}
.fdm-course__signout:hover { color: var(--crs-gold); border-bottom-color: var(--crs-gold); }

/* ══ Home screen redesign (Aug 18) ═══════════════════════════════════════ */

.fdm-course__icon { width: 40px; height: 40px; object-fit: contain; display: block; margin-bottom: 22px; }

/* The gold square that used to sit before these eyebrows is gone: eyebrows on
   this site do not carry a bullet. The rule goes with it rather than being left
   unused, because a modifier nothing applies is a thing the next person adds
   back without knowing it was removed on purpose. */

.fdm-course__hook {
	margin: 22px 0 0 !important;
	font-weight: 300; font-size: 18px; line-height: 1.62;
	max-width: 52ch; color: var(--crs-soft) !important;
}
.fdm-course__question {
	margin: 12px 0 0 !important;
	font-weight: 700; font-size: 23px; line-height: 1.26; letter-spacing: -0.02em;
	max-width: 42ch; color: var(--crs-ink) !important;
}
.fdm-course__promise {
	margin: 12px 0 0 !important;
	font-weight: 300; font-size: 19px; line-height: 1.62;
	color: var(--crs-soft) !important;
}

/* ── The form as a card ── */
/* The "Save my progress" panel's rules lived here. It was the second of two
 * ways to hand over an address; the panel over the player is now the only one,
 * and it carries its own row layout in the .fdm-course__gate-play block below.
 * Its override pattern started here, so that block reads as its descendant. */

/* ── The name, asked for at the certificate ──
 * Same one-line treatment: it appears under "Course complete" only when the
 * download button finds we never got a real name. */
.fdm-course__certname {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 0 0 20px;
}
/* In the frame the panel is a centred column, so the name row centres with it
   and the field stops trying to be 320px wide inside a 16:9 box. */
.fdm-course__done .fdm-course__certname {
	/* justify-content centres the field and its button inside this row. Where the
	   row itself sits is decided by align-items on .fdm-course__done-inner; the
	   auto margins here are belt and braces and do no harm. */
	justify-content: center; margin: 18px auto 0; width: 100%; max-width: 460px;
}
.fdm-course__done .fdm-course__certname input { flex: 1 1 200px; }
.fdm-course__certname[hidden] { display: none; }
.fdm-course__certname input {
	flex: 0 1 320px; min-width: 0;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--crs-line); border-radius: 10px;
	padding: 12px 14px; outline: none;
	font: 300 15px Raleway, sans-serif; color: var(--crs-ink);
	transition: border-color .22s ease;
}
.fdm-course__certname input:focus { border-color: var(--crs-gold); }
/* Not inside .fdm-course__form, so it gets the pill on its own terms rather
 * than inheriting one built for a full-width card footer. */
.fdm-course__certname button {
	flex: none;
	background: var(--crs-gold); color: #1a1206;
	border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer;
	font: 700 13px Raleway, sans-serif;
	letter-spacing: 0.12em; text-transform: uppercase;
	transition: filter .15s ease;
}
.fdm-course__certname button:hover { filter: brightness(1.07); }
.fdm-course__certname button[disabled] { opacity: .55; cursor: default; }
.fdm-course__certname .fdm-course__msg { flex: 1 0 100%; }
@media (max-width: 620px) {
	.fdm-course__certname { align-items: stretch; flex-direction: column; }
	.fdm-course__certname input { flex: 1 1 auto; }
}

.fdm-course__form {
	margin-top: 26px; padding: 22px;
	background: var(--crs-panel); border: 1px solid var(--crs-line);
	border-radius: 14px;
}
.fdm-course__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Text fields only. `.fdm-course__form input` also matched the three radios,
 * which then took width:100% and 14px padding and shoved each option's label
 * into a one-word-per-line column at the far right of its card. */
.fdm-course__fields input {
	width: 100%; min-width: 0; box-sizing: border-box;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--crs-line); border-radius: 10px;
	padding: 14px 16px; outline: none;
	font: 300 16px Raleway, sans-serif;
	transition: border-color .22s ease;
}
.fdm-course__fields input:focus { border-color: rgba(228, 175, 84, 0.55); }
.fdm-course__form button[type="submit"] {
	width: 100%; margin-top: 16px;
	background: var(--crs-gold); color: #1a1206;
	border: 0; border-radius: 999px; padding: 16px 30px; cursor: pointer;
	font: 700 13px Raleway, sans-serif;
	letter-spacing: 0.12em; text-transform: uppercase;
	transition: filter .15s ease;
}
.fdm-course__form button[type="submit"]:hover { filter: brightness(1.07); }
.fdm-course__form button[type="submit"][disabled] { opacity: .55; cursor: default; }
.fdm-course__paths { margin: 20px 0 0; gap: 10px; }
.fdm-course__paths legend {
	padding: 0 0 12px;
	font: 500 11.5px "DM Mono", monospace;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--crs-mute);
}
.fdm-course__path { border-radius: 12px; }
.fdm-course__path > label { padding: 15px 18px; gap: 14px; }
.fdm-course__path b { font-size: 16.5px; letter-spacing: -0.01em; }
.fdm-course__path i { font-size: 14.5px; font-weight: 300; line-height: 1.45; color: var(--crs-mute); }
.fdm-course__msg { display: block; margin-top: 10px; }

/* ── Enter your email to play ──
 * Covers the player until we have an address, the same way the "coming soon"
 * and "between sessions" panels do: a direct child of .fdm-course__player, so
 * it inherits inset:0 from the `> div` rule up top and the embed survives
 * underneath. z-index above both of those and above the pills, because while
 * this is up nothing behind it should be reachable — including Full screen.
 *
 * Semi-transparent rather than solid: the script cues the video instead of
 * playing it, so there is a real still frame behind this, and letting it
 * through is the difference between an offer and a black box.
 *
 * No [hidden] guard problem here, but the rule is written anyway for the same
 * reason the other two carry it: display:flex would beat the attribute. */
.fdm-course__gate-play {
	z-index: 4;
	background: rgba(8, 7, 6, 0.9);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	display: flex; align-items: center; justify-content: center;
	padding: 24px; text-align: center;
}
.fdm-course__gate-play[hidden] { display: none; }
.fdm-course__gate-play-card { width: 100%; max-width: 30rem; }
.fdm-course__gate-play-eyebrow {
	margin: 0 0 10px !important;
	font: 500 11px "DM Mono", monospace;
	letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--crs-gold) !important;
}
.fdm-course__gate-play-head {
	margin: 0 0 18px !important;
	font: 700 clamp(17px, 2vw, 25px)/1.2 Raleway, sans-serif;
	letter-spacing: -0.02em; color: #fff !important;
}
/* Same override the header's opt-in makes: .fdm-course__form is a bordered card
 * by default, and here it is a row. */
.fdm-course__gate-play .fdm-course__form {
	margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0;
	display: flex; align-items: center; justify-content: center;
	gap: 8px; flex-wrap: wrap;
}
.fdm-course__gate-play .fdm-course__form input[type="email"] {
	flex: 0 1 260px; min-width: 0;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--crs-line); border-radius: 10px;
	padding: 12px 14px; outline: none;
	font: 300 15px Raleway, sans-serif; color: var(--crs-ink);
	transition: border-color .22s ease;
}
.fdm-course__gate-play .fdm-course__form input[type="email"]:focus { border-color: var(--crs-gold); }
.fdm-course__gate-play .fdm-course__form button[type="submit"] {
	flex: none; width: auto; margin-top: 0; padding: 12px 24px;
}
.fdm-course__gate-play .fdm-course__msg { flex: 1 0 100%; margin-top: 8px; }
.fdm-course__gate-play-fine {
	margin: 14px 0 0 !important;
	font-weight: 300; font-size: 12.5px; line-height: 1.5;
	color: var(--crs-mute) !important;
}
/* A 16/9 player is short before it is narrow, so the squeeze here is vertical.
 * The fine print goes first, then the eyebrow: neither is load-bearing, and a
 * card that overflows its own player is worse than a terse one. */
@media (max-width: 860px) {
	.fdm-course__gate-play { padding: 16px; }
	.fdm-course__gate-play-head { margin-bottom: 12px !important; }
	.fdm-course__gate-play-fine { display: none; }
}
@media (max-width: 560px) {
	.fdm-course__gate-play-eyebrow { display: none; }
	.fdm-course__gate-play .fdm-course__form { align-items: stretch; flex-direction: column; }
	.fdm-course__gate-play .fdm-course__form input[type="email"] { flex: 1 1 auto; }
}

/* ── Trailer pill ── */
.fdm-course__pill--trailer { left: 18px; bottom: 16px; pointer-events: none; }

/* ── Featured voices ── */
/* Back to the design's 30px. The 56px this briefly carried was measured against
 * the theme's stray paragraph padding, and once that was reset the copy column
 * shrank and the nudge became a gap of its own. The columns now meet at the
 * bottom by construction (see .fdm-course__meta), so this only has to be the
 * space the design asked for. */
.fdm-course__voices { margin-top: 30px; }
.fdm-course__voices-grid {
	margin-top: 16px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px;
}
.fdm-course__voice { display: flex; align-items: center; gap: 13px; min-width: 0; }
.fdm-course__voice-pic {
	flex: none; width: 56px; height: 56px; border-radius: 999px; overflow: hidden;
	border: 1px solid var(--crs-line); background: var(--crs-panel);
}
.fdm-course__voice-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdm-course__voice-who { min-width: 0; }
.fdm-course__voice-who b {
	display: block; font-size: 15px; font-weight: 600;
	letter-spacing: -0.01em; color: var(--crs-ink);
}
.fdm-course__voice-who i {
	display: block; margin-top: 3px; font-style: normal;
	font: 500 9px "DM Mono", monospace;
	letter-spacing: 0.08em; text-transform: uppercase;
	line-height: 1.5; color: var(--crs-mute);
}

/* ── The two group paths, side by side ──
 * Join and Lead are alternatives to each other, where Access the course above
 * them is the main way in, so they read better as a pair than as two more rows
 * in a stack of three.
 *
 * align-items:stretch, so the taller of the two sets the height of both and
 * they do not step down when one description wraps to a second line. */
.fdm-course__paths-pair {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px; align-items: stretch;
}
/* Halving the width leaves little room beside the arrow, so the row stops being
 * a single centred line and stacks its label above its description. */
.fdm-course__paths-pair .fdm-course__path--link { align-items: flex-start; gap: 10px; }
/* Below this the halves are narrower than the copy in them. The gate itself
 * collapses at 1000px, which briefly makes the column wide again — hence two
 * steps rather than one. */
@media (max-width: 1180px) and (min-width: 1001px) {
	.fdm-course__paths-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.fdm-course__paths-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ── Why take this course? ── */
.fdm-course__why { margin-top: 30px; }
.fdm-course__why .fdm-course__about-head {
	margin: 0 !important; font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
}
.fdm-course__why .fdm-course__about-text {
	margin: 14px 0 0 !important; font-size: 16.5px;
}

@media (max-width: 1000px) {
	.fdm-course__gate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.fdm-course__fields { grid-template-columns: 1fr; }
	.fdm-course__voices-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Join and Lead leave the site, so they are links rather than choices: no
 * radio, an arrow instead, and the whole card is the hit area. */
/* The layout for a path row that is a link rather than a radio. Both variants
 * answer to it: --go used to rely on --link being in the markup beside it, and
 * the one placement that shipped without it rendered unpadded with the arrow on
 * its own line. A modifier should not need a second class to be laid out. */
.fdm-course__path--link,
.fdm-course__path--go {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 15px 18px; text-decoration: none !important;
	color: inherit; cursor: pointer;
}
.fdm-course__path--link:hover { border-color: rgba(228, 175, 84, 0.55); }
.fdm-course__path--link b,
.fdm-course__path--go b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--crs-ink); }
.fdm-course__path--link i,
.fdm-course__path--go i { display: block; margin-top: 3px; font-style: normal; font-size: 14.5px; font-weight: 300; line-height: 1.45; color: var(--crs-mute); }
.fdm-course__path-go { flex: none; color: var(--crs-gold); font-size: 18px; }

/* Already signed up, course not open yet. */
.fdm-course__onlist {
	margin-top: 26px !important; padding: 18px 20px;
	background: var(--crs-panel); border: 1px solid rgba(228, 175, 84, 0.32);
	border-radius: 14px;
	font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--crs-soft) !important;
}
.fdm-course__onlist b { display: block; margin-bottom: 4px; color: var(--crs-ink); font-weight: 600; }

/* ── [fdm_course_intro] ──
 * The course's front door, on its own. It wears .fdm-course so the palette and
 * every .fdm-course__* rule above apply unchanged, and .fdm-course--intro only
 * adjusts what differs: it is placed inside a page rather than being the page,
 * so it does not need the clearance the course reserves for the fixed header. */
.fdm-course--intro { padding-top: clamp(48px, 5vw, 72px); }
body.admin-bar .fdm-course--intro { padding-top: clamp(48px, 5vw, 72px); }

/* "Access the course" is the primary of the three, so it carries the gold
 * rather than the outline the two group links wear. */
.fdm-course__path--go {
	background: rgba(228, 175, 84, 0.12);
	border-color: rgba(228, 175, 84, 0.55);
}
.fdm-course__path--go:hover { background: rgba(228, 175, 84, 0.2); border-color: var(--crs-gold); }
.fdm-course__path--go b { color: var(--crs-gold); }

/* ═══ start-muted fallback ═══
 * Episode one starts on page load. A browser will only allow that with sound
 * for a visitor it already trusts with this site, so the script starts the
 * video muted when sound is refused and reveals this. It is a real button,
 * unlike the pills beside it, because turning sound on has to be a click for
 * the browser to permit it. */
.fdm-course__unmute {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--swgp-gold, #e4af54);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	backdrop-filter: blur(6px);
	color: var(--swgp-gold, #e4af54);
	font-family: var(--font-mono, "DM Mono", monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}
.fdm-course__unmute:hover,
.fdm-course__unmute:focus-visible {
	background: var(--swgp-gold, #e4af54);
	color: #1a1206;
}
/* display in an author rule beats the hidden attribute, so it needs saying. */
.fdm-course__unmute[hidden] { display: none; }