/**
 * CWTF course landing pages.
 *
 * Everything is scoped under .cwtf-lp so nothing leaks into the Kadence header,
 * nav, or footer. Colours are the live Coding With The Force palette: #5E9089
 * sage-teal accent, #181B19 canvas, #F4F4F4 text, #81CCC2 highlight.
 *
 * Poppins is loaded site-wide at weight 500 only, so headings are designed
 * around 500 + letter-spacing rather than a heavier cut.
 */

.cwtf-lp {
	--c-accent: #5e9089;
	--c-accent-lt: #81ccc2;
	--c-ink: #181b19;
	--c-ink-deep: #0c0d0e;
	--c-fg: #f4f4f4;
	--c-fg-2: #f3f3f3;
	--c-muted: rgba(244, 244, 244, 0.66);
	--c-glass: rgba(244, 244, 244, 0.045);
	/* Both answer to 1.4.11 (3:1) rather than taste: --c-line draws the waitlist
	   field borders (measured 1.49:1 at 0.18) and --c-line-strong is the entire
	   affordance of the ghost button, whose fill is only 6% opaque (2.72:1 at
	   0.42). Against the lighter --c-ink of #181b19, 0.46 is the floor for 3:1;
	   these sit just above it. */
	--c-line: rgba(129, 204, 194, 0.48);
	--c-line-strong: rgba(129, 204, 194, 0.58);

	/* Tracks the viewport instead of locking to a fixed column, so the page fills a
	 * large monitor. Floors at 1180px so narrow screens are unaffected (width:100%
	 * on .cwtf-shell caps it), and tops out at 3000px so lines stay readable.
	 * Prose blocks carry their own ch-based caps for the same reason. */
	--shell: clamp(1180px, 88vw, 3000px);
	--r-lg: 20px;
	--r-md: 14px;
	--r-pill: 999px;

	--f-display: "Poppins", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--f-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Blueprint grid ground, shared with the Wireframe post/archive theme.
	 * Deliberately painted on .cwtf-lp alone rather than per-section: one background
	 * origin means one continuous, perfectly aligned grid down the whole page. The
	 * two opaque section variants below are made translucent so it reads through
	 * them instead of each carrying its own (misaligning) copy. */
	--c-grid-line: rgba(129, 204, 194, 0.045);
	--c-grid-size: 34px;
	/* Stand-in for --c-ink-deep on full-width grounds. 0.82 over #181b19 lands within
	 * a shade of #0c0d0e while still letting the grid read through. */
	--c-ink-deep-t: rgba(12, 13, 14, 0.82);
	--c-grid:
		repeating-linear-gradient(90deg, var(--c-grid-line) 0 1px, transparent 1px var(--c-grid-size)),
		repeating-linear-gradient(0deg, var(--c-grid-line) 0 1px, transparent 1px var(--c-grid-size));

	background-color: var(--c-ink);
	background-image: var(--c-grid);
	color: var(--c-fg);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: clip;
}

.cwtf-lp *,
.cwtf-lp *::before,
.cwtf-lp *::after {
	box-sizing: border-box;
}

/* Base element defaults are wrapped in :where() so they carry (0,0,1) specificity.
 * Written as `.cwtf-lp p` they would be (0,1,1) and silently beat every single-class
 * component rule below - which is exactly how `.cwtf-ctaband__sub { margin: … auto }`
 * and `.cwtf-hero__sub { margin-top }` ended up being ignored. */
:where(.cwtf-lp) p {
	margin: 0 0 1.1em;
}

:where(.cwtf-lp) p:last-child {
	margin-bottom: 0;
}

.cwtf-lp h1,
.cwtf-lp h2,
.cwtf-lp h3 {
	font-family: var(--f-display);
	font-weight: 500;
	color: var(--c-fg);
	margin: 0;
	line-height: 1.15;
}

:where(.cwtf-lp) a {
	color: var(--c-accent-lt);
}

:where(.cwtf-lp) ul,
:where(.cwtf-lp) ol {
	margin: 0;
	padding: 0;
}

:where(.cwtf-lp) li {
	list-style: none;
}

/* ---------------------------------------------------------------- layout */

.cwtf-shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.cwtf-section {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* Translucent rather than the flat --c-ink-deep so the page grid reads through. */
.cwtf-section--deep {
	background: var(--c-ink-deep-t);
}

/* ------------------------------------------------------- ribbon band */

/* "Who this course is for" - a lighter strip that reads as a ribbon laid ACROSS the
 * page rather than another block stacked in the flow. Three things do that work:
 * a lifted ground, accent rules capping both edges, and tighter vertical padding than
 * a normal section, because a band that is as tall as its neighbours stops being a band.
 *
 * Colours stay inside the existing palette - a teal wash over the page ink, no new hue. */
.cwtf-section--ribbon {
	/* No opaque ink layer underneath - the teal wash alone lets the page grid through. */
	background: linear-gradient(180deg, rgba(94, 144, 137, 0.2) 0%, rgba(129, 204, 194, 0.07) 100%);
	border-block: 2px solid var(--c-accent);
	padding-block: clamp(2.5rem, 5.5vw, 4rem);
	box-shadow:
		0 -18px 40px -30px rgba(0, 0, 0, 0.9),
		0 18px 40px -30px rgba(0, 0, 0, 0.9);
}

/* The generic divider would draw a hairline on top of the accent rule. */
.cwtf-section--ribbon::before,
.cwtf-section--ribbon + .cwtf-section::before {
	display: none;
}

/* Ribbon tails: a notch at each end so the band reads as a physical strip with ends,
 * not a full-width colour change. Hidden from assistive tech - purely decorative. */
.cwtf-section--ribbon::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--c-accent-lt) 18%, var(--c-accent-lt) 82%, transparent);
	opacity: 0.55;
}

.cwtf-section--ribbon .cwtf-eyebrow {
	color: var(--c-accent-lt);
}

/* ------------------------------------------------- audience + certs */

.cwtf-audience {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(0.85rem, 2vw, 1.35rem);
	margin-inline: auto;
	max-width: 1100px;
}

.cwtf-audience__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.15rem 1.3rem;
	border-radius: var(--r-md);
	border: 1px solid var(--c-line-strong);
	background: rgba(12, 13, 14, 0.42);
	text-align: left;
}

.cwtf-audience__tick {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--c-ink-deep);
	background: var(--c-accent-lt);
}

.cwtf-audience__text {
	font-family: var(--f-display);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--c-fg);
}

/* Prose centred under a centred section head. */
.cwtf-prose--center {
	text-align: center;
	margin-inline: auto;
	max-width: 160ch;
}

/* Inside the ribbon the copy is meant to fill the shell rather than sit in a narrow
 * measure - the band reads as a full-width statement, so a 62ch column inside it looks
 * like a mistake. Releasing the cap on the head releases the eyebrow, heading and lede
 * together, which is what keeps them aligned with each other. */
.cwtf-section--ribbon .cwtf-section__head,
.cwtf-section--ribbon {
	max-width: none;
}

/* Breathing room between the audience cards and the paragraph that closes the section. */
.cwtf-audience + .cwtf-prose {
	margin-top: clamp(2rem, 4.5vw, 3.25rem);
}

.cwtf-certs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin-inline: auto;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 900px;
	text-align: left;
}

.cwtf-certs__group {
	padding: clamp(1.2rem, 2.5vw, 1.6rem);
	border-radius: var(--r-md);
	border: 1px solid var(--c-line-strong);
	background: rgba(12, 13, 14, 0.5);
}

.cwtf-certs__title {
	font-family: var(--f-display);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--c-accent-lt);
	margin: 0 0 0.85rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--c-line);
}

.cwtf-certs__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Counter rather than a bullet glyph: the number of exams is the point being made. */
.cwtf-certs__list {
	counter-reset: cwtf-cert;
}

.cwtf-certs__cert {
	position: relative;
	counter-increment: cwtf-cert;
	padding-left: 1.9rem;
	font-size: 0.96rem;
	color: var(--c-fg-2);
}

.cwtf-certs__cert::before {
	content: counter(cwtf-cert);
	position: absolute;
	left: 0;
	top: 0.08em;
	width: 1.35rem;
	height: 1.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: var(--f-display);
	font-size: 0.72rem;
	color: var(--c-accent-lt);
	background: rgba(129, 204, 194, 0.14);
	border: 1px solid var(--c-line-strong);
}

.cwtf-certs__note {
	max-width: 70ch;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
	text-align: center;
	font-size: 0.94rem;
	color: var(--c-muted);
}

/* Hairline divider between adjacent sections of the same tone. */
.cwtf-section + .cwtf-section::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-line-strong), transparent);
}

.cwtf-section__head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.cwtf-section__head--center {
	margin-inline: auto;
	text-align: center;
}

/* Heading on the left, a secondary action immediately to its right. The 62ch measure
 * moves off the head and onto the text block so the head can grow, but the items stay
 * packed to the start: justify-content:space-between would pin the button to the far
 * edge of a --shell that reaches 3000px, stranding it in empty space on a wide monitor
 * where nobody would notice it. Only emitted when there is an action to show. */
.cwtf-section__head--with-action {
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1.5rem, 3vw, 3rem);
}

/* flex:0 1 auto (the default) sizes this to its content and caps it at the measure,
 * so the button tracks where the text actually ends rather than where the shell does. */
.cwtf-section__headings {
	max-width: 62ch;
}

/* flex:0 0 auto keeps the label on one line - "View the Full Course Curriculum"
 * breaking across two lines beside a heading looks like a mistake. */
.cwtf-section__action {
	flex: 0 0 auto;
}

/* The pair needs roughly 62ch of measure + gap + a ~375px button + shell padding,
 * which lands just over 1024px. Below that the button drops under the heading rather
 * than shrinking the measure into something cramped. */
@media (max-width: 1024px) {
	.cwtf-section__head--with-action {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.75rem;
	}
}

.cwtf-section__title {
	font-size: clamp(1.65rem, 1.1rem + 2.2vw, 2.65rem);
	letter-spacing: -0.01em;
}

.cwtf-eyebrow {
	font-family: var(--f-display);
	font-size: 0.775rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent-lt);
	margin: 0 0 0.85rem;
}

/* Fully opaque, not 0.72. The CTA band runs #5e9089 -> #81ccc2 and this eyebrow
   sits top-centre, over the dark end, where 0.72 measured 3.72:1. */
.cwtf-eyebrow--on-accent {
	color: var(--c-ink-deep);
}

.cwtf-lede {
	font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
	color: var(--c-muted);
	max-width: 160ch;
	margin: 1.1rem 0 0;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ hero */

.cwtf-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Translucent so the page grid carries through the hero too. */
	background: var(--c-ink-deep-t);
}

.cwtf-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* Capped at the source image's natural width and anchored right. Stretched edge to
 * edge, `object-fit: cover` has to scale a 1920px image to the viewport - at 4K that
 * is a 2x blow-up, which is why the subject ballooned on big monitors. Holding the box
 * at 1920px keeps the photo at a constant size on every display; the canvas simply
 * shows through to the left, and the mask feathers that seam away. */
.cwtf-hero__bg {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(100%, 1920px);
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 14%, #000 32%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 14%, #000 32%);
}

.cwtf-hero__bg-img,
.cwtf-hero__bg .cwtf-img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right 30%;
	display: block;
}

/* Horizontal ramp keeps the copy on near-solid ground while the portrait stays
 * readable on the right; the vertical ramp fades into the page background. */
.cwtf-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			100deg,
			rgba(12, 13, 14, 0.93) 0%,
			rgba(12, 13, 14, 0.88) 34%,
			rgba(12, 13, 14, 0.58) 55%,
			rgba(12, 13, 14, 0.24) 74%,
			rgba(12, 13, 14, 0.32) 100%
		),
		radial-gradient(64% 58% at 12% 8%, rgba(94, 144, 137, 0.26), transparent 70%),
		linear-gradient(180deg, transparent 0%, transparent 52%, rgba(24, 27, 25, 0.78) 88%, var(--c-ink) 100%);
}

.cwtf-hero__copy {
	max-width: 62ch;
}

/* A narrow copy column makes the headline wrap to 4-5 lines, which pushes the hero
 * well past 16:9 - and `object-fit: cover` then has to zoom the background hard to
 * fill it. Giving the copy more room keeps the hero near the image's own aspect
 * ratio, so the photo sits at close to its natural scale. */
/* A fixed copy width reads as a cramped ribbon once the viewport gets very wide, so
 * let the column grow with it. Floors at 47rem so nothing changes below ~1980px. */
/* The title, chips and button all size off this column, so raising its ceiling is what
 * lets the whole block grow. Topped out at 110rem, which on a 4K shell lands the copy
 * just short of where the (width-capped) photo begins, so the two never collide. */
.cwtf-hero--banner .cwtf-hero__copy {
	max-width: min(100%, clamp(47rem, 38vw, 110rem));
}

/* The background is full-bleed but `.cwtf-shell` caps at --shell and centres, so on a
 * wide monitor the copy drifts to the middle of the screen while the subject of the
 * photo stays out on the right. Letting the hero container track the viewport keeps
 * the copy anchored left of centre. clamp() rather than a breakpoint so there's no
 * jump mid-resize; below ~1300px it resolves to --shell and nothing changes. */
/* No max-width override needed any more - --shell now tracks the viewport itself, so
 * the hero copy and the sections below share one left edge at every width. */
.cwtf-hero--banner .cwtf-hero__inner {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* The 3.5vw term maxes out around a 1210px viewport, which left the headline stuck at
 * 3.85rem all the way up to 4K. Making the upper bound itself viewport-aware lets it
 * start growing again on very large displays without touching 1440-2560. */
.cwtf-hero__title {
	font-size: clamp(2rem, 1.2rem + 3.5vw, max(3.85rem, 1.1rem + 1.6vw));
	letter-spacing: -0.015em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(12, 13, 14, 0.55);
}

.cwtf-hero__sub {
	font-size: clamp(1.05rem, 0.98rem + 0.45vw, max(1.28rem, 0.55rem + 0.42vw));
	color: var(--c-fg-2);
	margin: clamp(1.9rem, 3.2vw, 2.9rem) 0 0;
	/* ch scales with the sub's own font-size, so this widens on large displays while
	 * still capping line length; min(100%) keeps it inside the copy column. */
	max-width: min(100%, 82ch);
	text-shadow: 0 1px 14px rgba(12, 13, 14, 0.5);
}

.cwtf-hero__actions {
	margin-top: 2.25rem;
}

/* The projected-opening line above a waitlist button. Appears in two places with very
 * different grounds - the dark hero and the teal CTA panel - so the colour is set per
 * context below rather than once here.
 *
 * Capped in width because it sits above a button rather than in a copy column: a single
 * line running the full width of a 4K hero reads as body text that happens to be near
 * the CTA, not as a caption belonging to it. */
.cwtf-cta-note {
	display: block;
	max-width: 70ch;
  	margin: 0 0.33rem 0.9rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--c-muted);
}

/* The date carries the information, so it gets the weight and the full-strength colour;
 * the lead-in stays quiet. Inline rather than block so the two wrap together as one
 * sentence on a narrow screen instead of always breaking. */
.cwtf-cta-note__label::after {
	content: " ";
}

.cwtf-cta-note__date {
	color: var(--c-fg);
	font-weight: 600;
	/* Keeps "March 2027" whole. Without it the line breaks between the month and the
	   year, which reads as two separate facts. Safe to pin: a projected date is a few
	   words, so it cannot be long enough to overflow on its own. */
	white-space: nowrap;
}

/* On the accent panel everything flips to dark ink, matching __title and __sub. The
 * lead-in is held at 0.78 rather than a lighter tint for the same reason the comment on
 * __sub gives - a light grey on #5e9089 does not clear 4.5:1. */
.cwtf-ctaband .cwtf-cta-note {
	/* The panel centres its contents, so the capped width needs auto margins or it
	   sits hard left under a centred headline. */
	margin-inline: auto;
	color: rgba(12, 13, 14, 0.78);
}

.cwtf-ctaband .cwtf-cta-note__date {
	color: var(--c-ink-deep);
}

/* Chips and the button are fixed-size everywhere else, which leaves them looking
 * undersized next to a headline that keeps growing past ~2900px. Same max() trick:
 * the vw term only overtakes the fixed value on very large displays. */
.cwtf-hero--banner .cwtf-chip {
	font-size: max(0.83rem, 0.4rem + 0.26vw);
}

.cwtf-hero--banner .cwtf-hero__actions .cwtf-btn {
	font-size: max(1.02rem, 0.5rem + 0.32vw);
	min-height: max(52px, 2.2rem + 1.1vw);
	padding-inline: max(2.15rem, 1rem + 1.5vw);
}

/* About hero uses the brand wordmark rather than a portrait. A wordmark spans the
 * full frame, so the left-to-right ramp built for a photo leaves it competing with
 * the headline. Centre it instead and push it well back, so it reads as a textured
 * backdrop rather than a second thing to read. */
.cwtf-lp--about .cwtf-hero__bg-img {
	object-position: center center;
	opacity: 0.28;
}

.cwtf-lp--about .cwtf-hero__scrim {
	background:
		radial-gradient(70% 80% at 20% 30%, rgba(94, 144, 137, 0.22), transparent 70%),
		linear-gradient(
			100deg,
			rgba(12, 13, 14, 0.9) 0%,
			rgba(12, 13, 14, 0.72) 45%,
			rgba(12, 13, 14, 0.6) 100%
		),
		linear-gradient(180deg, transparent 0%, transparent 55%, rgba(24, 27, 25, 0.8) 88%, var(--c-ink) 100%);
}

/* Showcase hero: copy on a gradient, then the banner shown whole beneath it. */
.cwtf-hero--showcase {
	background:
		radial-gradient(65% 70% at 78% 8%, rgba(94, 144, 137, 0.3), transparent 68%),
		radial-gradient(55% 60% at 10% 4%, rgba(129, 204, 194, 0.16), transparent 70%),
		var(--c-ink-deep);
}

.cwtf-hero--showcase .cwtf-hero__inner {
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.cwtf-hero--showcase .cwtf-hero__media {
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Split hero: copy left, framed portrait right. */
.cwtf-hero--split {
	background:
		radial-gradient(58% 70% at 82% 18%, rgba(94, 144, 137, 0.26), transparent 68%),
		radial-gradient(50% 60% at 8% 6%, rgba(129, 204, 194, 0.14), transparent 70%),
		var(--c-ink-deep);
}

.cwtf-hero--split .cwtf-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.cwtf-hero--split .cwtf-hero__copy {
	max-width: none;
}

.cwtf-frame {
	position: relative;
	border-radius: var(--r-lg);
	padding: 10px;
	background: linear-gradient(150deg, rgba(129, 204, 194, 0.32), rgba(94, 144, 137, 0.08));
	box-shadow: 0 34px 70px -34px var(--c-ink-deep);
}

.cwtf-frame::after {
	content: "";
	position: absolute;
	inset: -18%;
	z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(94, 144, 137, 0.42), transparent 70%);
	filter: blur(28px);
}

.cwtf-frame__img,
.cwtf-frame .cwtf-img-placeholder {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--r-lg) - 8px);
}

/* ----------------------------------------------------------------- chips */

.cwtf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.85rem 0 0;
}

.cwtf-chip {
	font-family: var(--f-display);
	font-size: 0.83rem;
	letter-spacing: 0.04em;
	padding: 0.5rem 1rem;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-line-strong);
	background: rgba(94, 144, 137, 0.14);
	color: var(--c-fg);
	backdrop-filter: blur(8px);
}

.cwtf-chips--badges {
	margin-top: 1.6rem;
}

.cwtf-chip--badge {
	background: rgba(129, 204, 194, 0.12);
}

/* --------------------------------------------------------------- buttons */

.cwtf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.95rem 2.15rem;
	border-radius: var(--r-pill);
	font-family: var(--f-display);
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: 0.015em;
	text-decoration: none;
	transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s var(--ease);
}

/* In waitlist mode the CTA is a <button>, which Kadence styles far more aggressively
 * than a link: `button` (0,0,1) sets its own background and radius, and
 * `button:hover, button:focus, button:active` (0,1,1) repaints it in the theme
 * palette. A single-class rule loses to that, so every button state below is written
 * with two classes and :focus/:active are covered as explicitly as :hover. */
.cwtf-lp button.cwtf-btn {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font-family: var(--f-display);
	line-height: 1.6;
}

/* Deep teal so pure white text clears 4.9:1 across the whole gradient - the lighter
 * #5E9089 -> #81CCC2 ramp only reaches ~3.6:1 against white.
 * Selector must out-specify `.cwtf-lp a` (0,1,1) or the link colour wins. */
.cwtf-lp a.cwtf-btn--solid,
.cwtf-lp button.cwtf-btn--solid {
	background: linear-gradient(120deg, #24544c 0%, #4a7871 100%);
	color: #fff;
	border: 1px solid rgba(129, 204, 194, 0.5);
	text-shadow: 0 1px 2px rgba(12, 13, 14, 0.45);
	box-shadow: 0 14px 34px -14px rgba(94, 144, 137, 0.9);
}

.cwtf-lp a.cwtf-btn--solid:hover,
.cwtf-lp a.cwtf-btn--solid:focus-visible,
.cwtf-lp button.cwtf-btn--solid:hover,
.cwtf-lp button.cwtf-btn--solid:focus,
.cwtf-lp button.cwtf-btn--solid:active {
	background: linear-gradient(120deg, #24544c 0%, #4a7871 100%);
	color: #fff;
	border-color: var(--c-accent-lt);
	transform: translateY(-3px);
	box-shadow: 0 22px 46px -16px rgba(129, 204, 194, 0.85);
	/* No `filter: brightness(1.14)` here. Hover and focus states are in scope for
	   1.4.3, and lightening the fill took #fff on the #4a7871 end of the ramp from
	   4.98:1 to roughly 4.0:1. The lift, border and shadow already carry the state. */
}

/* Secondary action. Outlined rather than filled so it never competes with the
 * register/waitlist CTA. #81CCC2 on the two section canvases clears 9.4:1 (#181B19)
 * and 10.5:1 (#0C0D0E), so it stays comfortably above AA at this weight.
 * Two-class selectors for the same reason as --solid above. */
.cwtf-lp a.cwtf-btn--ghost,
.cwtf-lp button.cwtf-btn--ghost {
	background: rgba(129, 204, 194, 0.06);
	color: var(--c-accent-lt);
	border: 1px solid var(--c-line-strong);
	box-shadow: none;
}

.cwtf-lp a.cwtf-btn--ghost:hover,
.cwtf-lp a.cwtf-btn--ghost:focus-visible,
.cwtf-lp button.cwtf-btn--ghost:hover,
.cwtf-lp button.cwtf-btn--ghost:focus,
.cwtf-lp button.cwtf-btn--ghost:active {
	background: rgba(129, 204, 194, 0.16);
	color: var(--c-accent-lt);
	border-color: var(--c-accent-lt);
	transform: translateY(-3px);
	box-shadow: 0 18px 38px -20px rgba(129, 204, 194, 0.7);
}

.cwtf-btn__arrow {
	transition: transform 0.28s var(--ease);
}

.cwtf-btn:hover .cwtf-btn__arrow {
	transform: translateX(4px);
}

.cwtf-lp a.cwtf-btn:focus-visible,
.cwtf-lp button.cwtf-btn:focus-visible {
	outline: 3px solid var(--c-accent-lt);
	outline-offset: 3px;
}

/* ----------------------------------------------------------------- stats */

.cwtf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(0.9rem, 2vw, 1.4rem);
}

.cwtf-stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-height: 168px;
	justify-content: center;
	padding: 1.6rem 1.5rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: linear-gradient(160deg, rgba(244, 244, 244, 0.07), rgba(244, 244, 244, 0.02));
	backdrop-filter: blur(14px) saturate(120%);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.cwtf-stat:hover {
	transform: translateY(-4px);
	border-color: var(--c-line-strong);
}

.cwtf-stat__value {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 1.9vw, 2.9rem);
	font-weight: 500;
	line-height: 1;
	background: linear-gradient(120deg, var(--c-fg) 10%, var(--c-accent-lt) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

/* Long values such as "1,000,000+" overflow a narrow grid track at the default size.
 * PHP adds this class only when the formatted value exceeds 7 characters. */
.cwtf-stat__value--long {
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
	letter-spacing: -0.02em;
}

.cwtf-stat__label {
	font-family: var(--f-display);
	font-size: 0.94rem;
	color: var(--c-fg-2);
}

.cwtf-stat__note {
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--c-muted);
}

.cwtf-stats--compact .cwtf-stat {
	min-height: 132px;
	padding: 1.2rem 1.25rem;
}

.cwtf-stats--compact .cwtf-stat__value {
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
}

/* ----------------------------------------------------------------- cards */

/* The track minimum scales with the viewport. With a flat 300px minimum, a wide shell
 * would fit 6-7 columns and squeeze every card into an unreadable strip; growing the
 * minimum holds the layout at 3-4 columns and lets the cards get bigger instead. */
.cwtf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(300px, 24vw, 620px), 1fr));
	gap: clamp(1rem, 2.2vw, 1.6rem);
}

/* Where a stat band is followed by cards in the same section they'd otherwise sit
 * flush, reading as one block instead of two. */
.cwtf-stats + .cwtf-grid {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Scoped to .cwtf-lp-page (added by plugin.php's body_class filter on landing
 * templates only). The cwtf theme defines an unrelated .cwtf-card component of
 * its own, scoped to .cwtf-wire, and its stylesheet loads site-wide. The two
 * never met because this sheet only loads on landing pages - but two components
 * sharing a BEM block name across two codebases is a trap, and one scope each
 * is what keeps it shut. */
.cwtf-lp-page .cwtf-card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.1rem);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: linear-gradient(160deg, rgba(244, 244, 244, 0.07), rgba(244, 244, 244, 0.02));
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 20px 50px -30px var(--c-ink-deep);
	transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cwtf-lp-page .cwtf-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-line-strong), transparent);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.cwtf-lp-page .cwtf-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-line-strong);
	box-shadow: 0 30px 60px -30px rgba(94, 144, 137, 0.55);
}

.cwtf-lp-page .cwtf-card:hover::before {
	opacity: 1;
}

.cwtf-lp-page .cwtf-card__index {
	position: absolute;
	top: 0.5rem;
	right: 1.1rem;
	font-family: var(--f-display);
	font-size: 4.25rem;
	font-weight: 500;
	line-height: 1;
	color: rgba(129, 204, 194, 0.12);
	pointer-events: none;
}

.cwtf-lp-page .cwtf-card__title {
	font-size: 1.2rem;
	margin-bottom: 0.7rem;
	padding-right: 2.5rem;
}

.cwtf-lp-page .cwtf-card__body {
	color: var(--c-muted);
	font-size: 0.97rem;
	margin: 0;
}

/* ----------------------------------------------------------------- offer */

.cwtf-offer {
	display: grid;
	grid-template-columns: 1.5fr 0.85fr;
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
	align-items: start;
	padding: clamp(1.6rem, 3.5vw, 2.5rem);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: linear-gradient(150deg, rgba(94, 144, 137, 0.12), rgba(244, 244, 244, 0.02));
	backdrop-filter: blur(14px);
}

/* Price with no accompanying copy. The outer card chrome is dropped entirely - the
 * price block already carries its own panel, and nesting two bordered boxes around a
 * single figure reads as a mistake.
 *
 * Left at full width with no max-width, so the tile tracks .cwtf-stats exactly: both
 * are plain block-level children of .cwtf-shell, so they resize together at every
 * breakpoint without either needing to know the other's measurements. */
.cwtf-offer--price-only {
	display: block;
	max-width: none;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: 0;
	border: 0;
	background: none;
	backdrop-filter: none;
}

/* Matches the stat tiles' radius and padding rhythm so the row below reads as part of
 * the same band rather than a different component that happens to sit underneath. */
.cwtf-offer--price-only .cwtf-offer__price {
	align-items: center;
	text-align: center;
	padding: 1.6rem 1.5rem;
	border-radius: var(--r-lg);
}

.cwtf-offer__body {
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
	color: var(--c-fg-2);
	margin: 0;
	max-width: 78ch;
}

.cwtf-offer__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 1.5rem;
	border-radius: var(--r-md);
	background: var(--c-ink-deep);
	border: 1px solid var(--c-line-strong);
}

.cwtf-offer__amount {
	font-family: var(--f-display);
	font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
	line-height: 1;
	background: linear-gradient(120deg, var(--c-fg) 10%, var(--c-accent-lt) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cwtf-offer__currency {
	font-family: var(--f-display);
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	color: var(--c-accent-lt);
}

.cwtf-offer__note {
	margin-top: 0.7rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--c-muted);
}

/* ----------------------------------------------------------------- notes */

.cwtf-note {
	display: flex;
	gap: 1.1rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--r-md);
	background: rgba(12, 13, 14, 0.55);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-accent-lt);
}

.cwtf-note--warn {
	border-left-color: #e2b04a;
	background: rgba(12, 13, 14, 0.72);
}

.cwtf-note__glyph {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-family: var(--f-display);
	font-size: 0.95rem;
	color: var(--c-ink-deep);
	background: var(--c-accent-lt);
}

.cwtf-note--warn .cwtf-note__glyph {
	background: #e2b04a;
}

.cwtf-note__title {
	font-size: 1.08rem;
	margin-bottom: 0.6rem;
}

.cwtf-note__body p,
.cwtf-note__list {
	color: var(--c-muted);
	font-size: 0.97rem;
	margin: 0;
	max-width: 92ch;
}

.cwtf-note__list {
	counter-reset: cwtf-note;
	display: grid;
	gap: 0.6rem;
}

.cwtf-note__list li {
	counter-increment: cwtf-note;
	padding-left: 1.9rem;
	position: relative;
}

.cwtf-note__list li::before {
	content: counter(cwtf-note) ")";
	position: absolute;
	left: 0;
	font-family: var(--f-display);
	color: var(--c-accent-lt);
}

/* ---------------------------------------------------------------- salary */

.cwtf-salary {
	margin: 0;
}

.cwtf-salary__rows {
	display: grid;
	gap: clamp(1.1rem, 2.4vw, 1.7rem);
}

.cwtf-salary__row {
	padding: 1.15rem 1.35rem;
	border-radius: var(--r-md);
	border: 1px solid transparent;
	transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.cwtf-salary__row.is-highlight {
	border-color: var(--c-line-strong);
	background: linear-gradient(120deg, rgba(94, 144, 137, 0.16), rgba(244, 244, 244, 0.02));
}

.cwtf-salary__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.7rem;
}

.cwtf-salary__role {
	font-family: var(--f-display);
	font-size: 1.03rem;
	color: var(--c-fg);
}

.cwtf-salary__range {
	font-family: var(--f-display);
	font-size: 1.05rem;
	color: var(--c-accent-lt);
	font-variant-numeric: tabular-nums;
}

.cwtf-salary__track {
	position: relative;
	height: 12px;
	border-radius: var(--r-pill);
	background: rgba(244, 244, 244, 0.07);
	overflow: hidden;
}

.cwtf-salary__bar {
	position: absolute;
	inset-block: 0;
	left: var(--bar-offset, 0%);
	width: var(--bar-width, 0%);
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--c-accent), var(--c-accent-lt));
	transform-origin: left center;
	transition: transform 0.9s var(--ease) 0.15s;
}

.cwtf-salary__row.is-visible .cwtf-salary__bar {
	transform: scaleX(1);
}

.cwtf-salary__note {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--c-muted);
}

.cwtf-salary__footnote {
	margin-top: 1.6rem;
	font-size: 0.97rem;
	color: var(--c-fg-2);
	max-width: 92ch;
}

.cwtf-salary__caption {
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--c-line);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--c-muted);
}

.cwtf-salary__sources {
	display: block;
	margin-top: 0.5rem;
}

.cwtf-salary__sources a {
	color: var(--c-accent-lt);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.cwtf-salary__sources a:hover {
	border-bottom-color: currentColor;
}

/* ----------------------------------------------------------- credentials */

.cwtf-creds {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

.cwtf-creds__bio p {
	color: var(--c-fg-2);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
	max-width: 72ch;
}

.cwtf-creds__stats .cwtf-stats {
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

/* ------------------------------------------------------ prose + contact */

.cwtf-prose {
	max-width: 74ch;
}

.cwtf-prose p {
	color: var(--c-fg-2);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
}

.cwtf-prose__cta a {
	color: var(--c-accent-lt);
	text-decoration: none;
	border-bottom: 1px solid rgba(129, 204, 194, 0.4);
}

.cwtf-prose__cta a:hover {
	border-bottom-color: currentColor;
}

/* Sits above the stat band when both appear in one section. */
.cwtf-prose + .cwtf-stats {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.cwtf-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 20vw, 380px), 1fr));
	gap: clamp(0.9rem, 2vw, 1.4rem);
}

.cwtf-contact__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1.4rem;
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
	background: linear-gradient(160deg, rgba(244, 244, 244, 0.06), rgba(244, 244, 244, 0.02));
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.cwtf-contact__item:hover {
	border-color: var(--c-line-strong);
	transform: translateY(-3px);
}

.cwtf-contact__label {
	font-family: var(--f-display);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent-lt);
}

.cwtf-lp .cwtf-contact__value {
	font-size: 1.02rem;
	color: var(--c-fg);
	text-decoration: none;
	word-break: break-word;
}

.cwtf-lp a.cwtf-contact__value:hover,
.cwtf-lp a.cwtf-contact__value:focus-visible {
	color: var(--c-accent-lt);
}

.cwtf-donate {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* -------------------------------------------------------------- CTA band */

.cwtf-ctaband {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--c-ink-deep);
}

.cwtf-ctaband__panel {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	border-radius: clamp(var(--r-md), 3vw, 28px);
	background: linear-gradient(120deg, var(--c-accent) 0%, var(--c-accent-lt) 100%);
	box-shadow: 0 34px 80px -40px rgba(94, 144, 137, 0.95);
}

.cwtf-ctaband__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 90% at 85% 10%, rgba(244, 244, 244, 0.28), transparent 60%);
	pointer-events: none;
}

.cwtf-ctaband__panel > * {
	position: relative;
	z-index: 1;
}

.cwtf-ctaband__title {
	font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
	color: var(--c-ink-deep);
	text-wrap: balance;
}

.cwtf-ctaband__sub {
	max-width: 58ch;
	margin: 1rem auto 0;
	text-align: center;
	text-wrap: balance;
	/* Opaque for the same reason as --on-accent above: centred over the #5e9089
	   end of the gradient, 0.82 measured 4.38:1. */
	color: var(--c-ink-deep);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
}

.cwtf-ctaband__actions {
	margin-top: 2rem;
}

/* On the accent panel the button flips to the dark fill - white on #0C0D0E. */
.cwtf-lp .cwtf-ctaband a.cwtf-btn--solid,
.cwtf-lp .cwtf-ctaband button.cwtf-btn--solid {
	background: var(--c-ink-deep);
	color: #fff;
	border-color: rgba(244, 244, 244, 0.28);
	box-shadow: 0 16px 36px -16px rgba(12, 13, 14, 0.9);
}

.cwtf-lp .cwtf-ctaband a.cwtf-btn--solid:hover,
.cwtf-lp .cwtf-ctaband a.cwtf-btn--solid:focus-visible,
.cwtf-lp .cwtf-ctaband button.cwtf-btn--solid:hover,
.cwtf-lp .cwtf-ctaband button.cwtf-btn--solid:focus,
.cwtf-lp .cwtf-ctaband button.cwtf-btn--solid:active {
	background: var(--c-ink-deep);
	color: #fff;
	border-color: rgba(244, 244, 244, 0.6);
	filter: none;
}

.cwtf-lp .cwtf-ctaband a.cwtf-btn--solid:focus-visible,
.cwtf-lp .cwtf-ctaband button.cwtf-btn--solid:focus-visible {
	outline-color: var(--c-ink-deep);
}

/* ----------------------------------------------------- image placeholder */

.cwtf-img-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	border-radius: var(--r-md);
	background: linear-gradient(140deg, rgba(94, 144, 137, 0.35), rgba(12, 13, 14, 0.9));
	border: 1px dashed var(--c-line-strong);
}

.cwtf-img-placeholder span {
	font-family: var(--f-display);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* --------------------------------------------------------------- reveals
 * Gated on .cwtf-js (set by an inline head script, removed again if the main
 * script never signals ready) so content is never hidden when JS is off. */

.cwtf-js .cwtf-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s var(--ease),
		transform 0.7s var(--ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.cwtf-js .cwtf-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.cwtf-js .cwtf-salary__bar {
	transform: scaleX(0);
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1024px) {
	.cwtf-creds {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	/* No room for a left-to-right ramp once the hero is narrow, so the copy sits
	 * directly over the portrait - flatten to a uniform overlay instead. */
	.cwtf-hero__bg-img,
	.cwtf-hero__bg .cwtf-img-placeholder {
		object-position: 68% 26%;
	}

	.cwtf-hero__scrim {
		background:
			linear-gradient(180deg, rgba(12, 13, 14, 0.82) 0%, rgba(12, 13, 14, 0.88) 55%, var(--c-ink) 100%),
			radial-gradient(70% 40% at 50% 6%, rgba(94, 144, 137, 0.22), transparent 72%);
	}

	.cwtf-hero--split .cwtf-hero__inner {
		grid-template-columns: 1fr;
	}

	.cwtf-hero--split .cwtf-hero__media {
		order: 2;
		max-width: 520px;
	}

	.cwtf-offer {
		grid-template-columns: 1fr;
	}

	.cwtf-stats {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

@media (max-width: 560px) {
	.cwtf-lp {
		font-size: 16px;
	}

	.cwtf-grid,
	.cwtf-stats,
	.cwtf-creds__stats .cwtf-stats {
		grid-template-columns: 1fr;
	}

	.cwtf-lp-page .cwtf-card__index {
		font-size: 3.25rem;
	}

	.cwtf-note {
		flex-direction: column;
		gap: 0.85rem;
	}

	.cwtf-btn {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.cwtf-lp *,
	.cwtf-lp *::before,
	.cwtf-lp *::after {
		transition: none !important;
		animation: none !important;
	}

	.cwtf-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.cwtf-salary__bar {
		transform: scaleX(1) !important;
	}
}

/* ------------------------------------------------- backdrop-filter fallback */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cwtf-lp-page .cwtf-card,
	.cwtf-stat,
	/* Excluded: the price-only variant is deliberately chrome-free, and this rule
	   would otherwise reinstate a panel around it on browsers without backdrop-filter. */
	.cwtf-offer:not(.cwtf-offer--price-only),
	.cwtf-chip {
		background: #1e2321;
	}
}

/* ------------------------------------------------------------- offer actions */

.cwtf-offer__actions {
	margin-block: clamp(1.25rem, 3vw, 2rem) 0;
}

/* ----------------------------------------------------------- Calendly embed */

/* Carries the same outlined panel and corner registration tick as the Wireframe
 * post theme, so the booking step doesn't look bolted on. Calendly renders an
 * iframe it sizes itself; the height comes from the inline style the widget needs. */
.cwtf-calendly {
	position: relative;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--c-line-strong);
	background: rgba(129, 204, 194, 0.03);
	overflow: hidden;

	/* Inset the iframe from the panel border. Calendly renders its card at the
	 * full width of the frame once the frame is narrow enough (roughly phone
	 * width), which put its footer - the "Privacy Policy" link - hard against
	 * this border with nothing between them. The corner accent below is
	 * positioned against the padding box, whose edge is the border either way,
	 * so it stays pinned to the corner. */
	padding: clamp(0.75rem, 2vw, 1.25rem);
}

.cwtf-calendly::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 14px;
	height: 14px;
	border-top: 1px solid var(--c-accent-lt);
	border-left: 1px solid var(--c-accent-lt);
	pointer-events: none;
	z-index: 2;
}

.cwtf-calendly .calendly-inline-widget {
	width: 100%;
}

.cwtf-calendly iframe {
	display: block;
	width: 100%;
	border: 0;
}

.cwtf-calendly__fallback {
	margin: 0;
	/* The panel now carries its own padding, so this only tops it up. */
	padding: clamp(1rem, 2.5vw, 1.5rem);
	text-align: center;
	color: var(--c-muted);
}

/* The widget needs real height on a phone or it renders a scroll trap. */
@media (max-width: 600px) {
	.cwtf-calendly .calendly-inline-widget {
		height: 900px !important;
	}
}

/* ================================================================= portrait */

.cwtf-avatar {
	position: relative;
	width: clamp(11rem, 22vw, 20rem);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--c-line-strong);
	box-shadow: 0 0 60px -18px rgba(129, 204, 194, 0.5);
	flex: none;
}

.cwtf-avatar--sm {
	width: clamp(8.5rem, 15vw, 13rem);
}

.cwtf-avatar__img,
.cwtf-avatar .cwtf-img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ======================================================== scheduling header */

.cwtf-shero {
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
	border-bottom: 1px solid var(--c-line);
}

.cwtf-shero__in {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.cwtf-shero__copy {
	flex: 1 1 auto;
	min-width: 0;
}

/* Scoped under .cwtf-lp on purpose: `.cwtf-lp h1 { margin: 0 }` above is (0,1,1)
 * and would silently win against a single-class rule, collapsing the gap under
 * the headline. Same reason the two instructor headings below are scoped. */
.cwtf-lp .cwtf-shero__title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
	line-height: 1.1;
	margin-bottom: clamp(1rem, 2vw, 1.75rem);
	max-width: 18ch;
	text-wrap: balance;
}

.cwtf-shero__body {
	max-width: 60ch;
	color: var(--c-muted);
}

.cwtf-shero__body p + p {
	margin-top: 1em;
}

.cwtf-shero__media {
	flex: none;
}

/* Portrait above the copy once there is no room for a two-column header. */
@media (max-width: 60rem) {
	.cwtf-shero__in {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}

	.cwtf-lp .cwtf-shero__title {
		max-width: none;
	}
}

/* ======================================================= instructor header */

.cwtf-instructor {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--c-line);
}

.cwtf-instructor__in {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.cwtf-instructor__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.cwtf-lp .cwtf-instructor__name {
	font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem);
	line-height: 1.1;
	margin-bottom: 0.35rem;
}

.cwtf-instructor__title {
	color: var(--c-accent-lt);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.cwtf-instructor__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.cwtf-instructor__stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cwtf-instructor__stat-value {
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	line-height: 1;
	color: var(--c-fg);
	font-variant-numeric: tabular-nums;
}

.cwtf-instructor__stat-label {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.cwtf-instructor__body {
	max-width: 68ch;
	color: var(--c-muted);
}

.cwtf-instructor__body p + p {
	margin-top: 1em;
}

.cwtf-instructor__media {
	flex: none;
}

@media (max-width: 60rem) {
	.cwtf-instructor__in {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}
}

/* ========================================================== course catalogue */

.cwtf-courses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.cwtf-ucard {
	min-width: 0;
}

.cwtf-ucard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--c-line);
	background: rgba(129, 204, 194, 0.055);
	color: inherit;
	text-decoration: none;
	border-radius: var(--r-md);
	overflow: hidden;
	transition:
		border-color 0.3s var(--ease),
		box-shadow 0.3s var(--ease),
		background-color 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.cwtf-ucard__link:hover,
.cwtf-ucard__link:focus-visible {
	border-color: var(--c-accent-lt);
	background: rgba(129, 204, 194, 0.1);
	box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.95), 0 0 34px -14px rgba(129, 204, 194, 0.5);
	transform: translateY(-3px);
}

.cwtf-ucard__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--c-line);
	background: linear-gradient(140deg, rgba(94, 144, 137, 0.25), transparent 70%);
}

.cwtf-ucard__img,
.cwtf-ucard__thumb .cwtf-img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease);
}

.cwtf-ucard__link:hover .cwtf-ucard__img {
	transform: scale(1.04);
}

.cwtf-ucard__body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	flex: 1;
}

.cwtf-ucard__title {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
	line-height: 1.3;
	color: var(--c-fg);
}

.cwtf-ucard__desc {
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--c-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cwtf-ucard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.15rem;
}

.cwtf-ubadge {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--c-muted);
	border: 1px solid var(--c-line);
	border-radius: 4px;
	padding: 0.25em 0.55em;
	white-space: nowrap;
}

.cwtf-ubadge--rating {
	color: var(--c-warm, #e2b04a);
	border-color: rgba(226, 176, 74, 0.4);
	font-variant-numeric: tabular-nums;
}

.cwtf-ucard__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.6rem;
	border-top: 1px solid var(--c-line);
}

.cwtf-ucard__price {
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.5rem);
	color: var(--c-fg);
	font-variant-numeric: tabular-nums;
}

.cwtf-ucard__go {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-lt);
	white-space: nowrap;
}

/* ============================================================ legal documents */

/* Long-form prose, read reluctantly. Optimised for legibility and for linking to a
 * specific clause - nothing else. */

.cwtf-legal {
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem);
}

.cwtf-legal__shell {
	max-width: min(92vw, 60rem);
	margin-inline: auto;
}

.cwtf-legal__head {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
	border-bottom: 1px solid var(--c-line);
}

.cwtf-lp .cwtf-legal__title {
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	line-height: 1.1;
	margin-block: 0.35em 0;
}

.cwtf-legal__lede {
	margin-top: 1rem;
	max-width: 60ch;
	color: var(--c-muted);
	font-size: 1.05rem;
}

.cwtf-legal__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1.25rem;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.cwtf-legal__body {
	max-width: 72ch;
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--c-fg-2);
}

.cwtf-lp .cwtf-legal__body h2 {
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
	margin-block: 2.2em 0.7em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--c-line);
	scroll-margin-top: 2rem;
}

.cwtf-lp .cwtf-legal__body h3 {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	margin-block: 1.8em 0.5em;
	color: var(--c-accent-lt);
	scroll-margin-top: 2rem;
}

.cwtf-legal__body > *:first-child {
	margin-top: 0;
}

/* The plugin's base rules strip list markers site-wide; a legal document is one of the
 * few places they carry meaning. */
.cwtf-legal__body ul,
.cwtf-legal__body ol {
	margin: 0 0 1.2em;
	padding-left: 1.5em;
}

.cwtf-legal__body ul li {
	list-style: disc;
}

.cwtf-legal__body ol li {
	list-style: decimal;
}

.cwtf-legal__body li {
	margin-bottom: 0.5em;
}

.cwtf-legal__body li::marker {
	color: var(--c-accent);
}

.cwtf-legal__body strong {
	color: var(--c-fg);
	font-weight: 600;
}

.cwtf-legal__body a {
	color: var(--c-accent-lt);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--c-line-strong);
}

.cwtf-legal__body a:hover {
	text-decoration-color: var(--c-accent-lt);
}

/* Callout for the clauses that matter most - the ones people skim past and then argue
 * about later. */
.cwtf-legal__note {
	margin: 1.5em 0;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border-left: 3px solid var(--c-accent);
	background: rgba(129, 204, 194, 0.06);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}

.cwtf-legal__note p:last-child {
	margin-bottom: 0;
}

.cwtf-legal__table-wrap {
	overflow-x: auto;
	margin: 1.5em 0;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}

.cwtf-legal__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.cwtf-legal__body th,
.cwtf-legal__body td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--c-line);
}

.cwtf-legal__body th {
	color: var(--c-fg);
	font-weight: 600;
	background: rgba(129, 204, 194, 0.07);
	white-space: nowrap;
}

.cwtf-legal__body tr:last-child td {
	border-bottom: 0;
}

.cwtf-legal__contact {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
}

/* A postal address reads as a block, not a sentence - so keep the line breaks and
 * drop the browser default italics. */
.cwtf-address {
	font-style: normal;
	line-height: 1.9;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: rgba(129, 204, 194, 0.04);
	display: inline-block;
	min-width: min(100%, 20rem);
}

/* ============================================================================
 * HUB PAGES
 *
 * The homepage, the courses catalogue and the one-on-one hub. Nothing here is a new
 * look - it reuses the glass panel, the ribbon and the pill buttons already defined
 * above. What is new is the shapes those pages need: a split hero that survives on a
 * phone, a compact services band, and a card whose whole area is the link.
 * ========================================================================= */

/* --------------------------------------------------------------- home hero -- */

.cwtf-hhero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--c-line);
}

.cwtf-hhero__in {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.cwtf-hhero__title {
	font-size: clamp(2rem, 1.2rem + 3.5vw, max(3.85rem, 1.1rem + 1.6vw));
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0;
}

.cwtf-hhero__sub {
	margin: 1.4rem 0 0;
	font-size: clamp(1.05rem, 0.98rem + 0.45vw, max(1.28rem, 0.55rem + 0.42vw));
	color: var(--c-muted);
	max-width: 46ch;
}

.cwtf-hhero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.2rem;
}

.cwtf-hhero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.cwtf-hhero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

/* The diamond separator, the same mark the posts use between meta items. */
.cwtf-hhero__proof li::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--c-line-strong);
	transform: rotate(45deg);
	flex: none;
}

/*
 * The old hero art was a 588px PNG hidden below 1025px, which left phones with no
 * visual anchor at all. Inline SVG costs no request and scales, so it can stay.
 */
.cwtf-hhero__art {
	position: relative;
	aspect-ratio: 1 / 0.82;
	display: grid;
	place-items: center;
}

.cwtf-hhero__art svg {
	width: min(100%, 460px);
	height: auto;
}

.cwtf-hhero__glow {
	position: absolute;
	inset: 12% 8%;
	background: radial-gradient(circle at 55% 45%, rgba(129, 204, 194, 0.22), transparent 65%);
	filter: blur(28px);
	pointer-events: none;
}

@media (max-width: 62rem) {
	.cwtf-hhero__in {
		grid-template-columns: 1fr;
	}

	/* Art above the copy on narrow screens, and capped so it never eats the fold. */
	.cwtf-hhero__art {
		order: -1;
		max-width: 380px;
		margin-inline: auto;
	}
}

/*
 * Hero and services band share one screenful, so the band ENDS near the bottom of the
 * viewport with all of it visible - not merely peeking in.
 *
 * Sizing the hero alone could never do this: the band's own height varies with the
 * viewport, so any fixed hero height leaves the band's bottom edge somewhere different
 * on every screen. Making the pair a flex column of one viewport instead lets the hero
 * absorb whatever is left after the band has taken what it needs.
 *
 * 92svh rather than 100svh leaves 8% of the viewport under the band, so it stops clear
 * short of the bottom rather than sitting flush against it. Proportional on purpose -
 * a fixed gap reads as a hairline on a 1440px-tall screen and as a stripe on a 768px
 * one. 78px is the header, which measures 74-80px across these widths.
 *
 * flex-shrink is 0 on both: on a window too short to hold them the block grows and the
 * page scrolls, which is the honest outcome. Squashing the hero to fit would clip the
 * headline. svh so a mobile browser's collapsing toolbar cannot overshoot.
 *
 * Scoped to the split-hero layout. The stacked layout below 62rem is untouched - it
 * reads correctly there and the band is a natural scroll.
 */
@media (min-width: 62rem) {
	.cwtf-home-top {
		display: flex;
		flex-direction: column;
		min-height: calc(92vh - 78px);
		min-height: calc(92svh - 78px);
	}

	.cwtf-home-top .cwtf-hhero {
		flex: 1 0 auto;
		display: flex;
		align-items: center;
	}

	.cwtf-home-top .cwtf-hhero__in {
		width: 100%;
		padding-block: clamp(1.5rem, 3vw, 2.75rem);
	}

	.cwtf-home-top .cwtf-svcband-band {
		flex: 0 0 auto;
	}

	/* A ceiling rather than a diet: stops the art ballooning on a very wide screen. */
	.cwtf-hhero__art {
		max-width: min(100%, 520px);
		margin-inline: auto;
	}
}

/*
 * Short laptop windows - 1366x768 and the like.
 *
 * Nothing can shrink content that does not fit, so on a 768px-tall screen the hero copy
 * alone was taller than the space left after the band. Keyed on height rather than
 * width, because that is the axis that runs out; a tall screen never sees any of this.
 */
@media (min-width: 62rem) and (max-height: 1100px) {
	.cwtf-home-top .cwtf-hhero__in {
		padding-block: clamp(0.75rem, 1.5vw, 1.25rem);
	}

	.cwtf-hhero__title {
		font-size: clamp(1.75rem, 1rem + 1.9vw, 2.35rem);
	}

	.cwtf-hhero__sub {
		margin-top: 0.8rem;
		font-size: 1.02rem;
	}

	.cwtf-hhero__actions {
		margin-top: 1.2rem;
	}

	.cwtf-hhero__proof {
		margin-top: 0.9rem;
	}

	.cwtf-hhero__art {
		max-width: min(100%, 300px);
	}

	/* The band gives up its own padding before the hero gives up any more type. */
	.cwtf-home-top .cwtf-svcband-band {
		padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
	}

	/*
	 * Three lines is enough for every card at these widths; the longest runs to four
	 * and that fourth line costs ~20px across the whole band. The text is not
	 * truncated anywhere it has room - this only applies to short windows.
	 */
	.cwtf-svcband__desc {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/*
 * Very short windows - a 1280x720 or 1366x768 laptop.
 *
 * At 768px tall the hero and the band together want about 685px of the 659px available,
 * so the tier above lands the band on screen but with only a 1% gap rather than 4%.
 * This recovers the last ~80px. Nothing is hidden - the type and the art step down and
 * the card copy clamps to two lines, all of which is reversed the moment there is room.
 */
@media (min-width: 62rem) and (max-height: 800px) {
	.cwtf-hhero__title {
		font-size: clamp(1.55rem, 0.9rem + 1.5vw, 2rem);
	}

	.cwtf-hhero__sub {
		margin-top: 0.7rem;
		font-size: 0.97rem;
	}

	.cwtf-hhero__actions {
		margin-top: 1rem;
	}

	.cwtf-hhero__proof {
		margin-top: 0.75rem;
	}

	.cwtf-hhero__art {
		max-width: min(100%, 200px);
	}

	.cwtf-home-top .cwtf-svcband-band {
		padding-block: 0.7rem;
	}

	.cwtf-svcband__desc {
		-webkit-line-clamp: 2;
	}

	.cwtf-svcband__item {
		padding: 0.6rem;
		gap: 0.25rem;
	}

	.cwtf-svcband__go {
		padding-top: 0.5rem;
	}
}

/* ---------------------------------------------------- home services band --- */

/*
 * Deliberately compact. It sits in a ribbon directly under the hero and the page
 * should still read as hero-first, so the cells carry only enough padding to be a
 * comfortable hit area - the band's own rhythm comes from the ribbon around it.
 */
/*
 * 12.5rem, not 14: at 14 the five cards needed 1120px and a 1366px window gives the
 * shell about 1100px of content, so they wrapped to two rows and the band's height
 * jumped from ~300px to ~500px. That is what pushed it off the bottom of a laptop
 * screen. 12.5rem keeps all five on one row down to roughly a 1280px window.
 */
.cwtf-svcband {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: clamp(0.4rem, 1vw, 0.75rem);
}

/*
 * The whole cell is the link, not just the last two words. A card that only responds
 * on its call-to-action reads as broken: you click the heading, nothing happens.
 */
.cwtf-svcband__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: clamp(0.75rem, 1.4vw, 1rem);
	border-radius: var(--r-md);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.25s var(--ease);
}

.cwtf-svcband__item:hover,
.cwtf-svcband__item:focus-visible {
	background: rgba(129, 204, 194, 0.1);
}

.cwtf-svcband__no {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	color: var(--c-accent-lt);
}

.cwtf-svcband__name {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.25s var(--ease);
}

.cwtf-svcband__item:hover .cwtf-svcband__name,
.cwtf-svcband__item:focus-visible .cwtf-svcband__name {
	color: var(--c-accent-lt);
}

.cwtf-svcband__desc {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--c-muted);
}

.cwtf-svcband__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.7rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent-lt);
}

.cwtf-svcband__go::after {
	content: "\2192";
	transition: transform 0.25s var(--ease);
}

.cwtf-svcband__item:hover .cwtf-svcband__go,
.cwtf-svcband__item:focus-visible .cwtf-svcband__go {
	text-decoration: underline;
}

.cwtf-svcband__item:hover .cwtf-svcband__go::after,
.cwtf-svcband__item:focus-visible .cwtf-svcband__go::after {
	transform: translateX(4px);
}

/* Tighter than a normal ribbon, because the band inside it is already padded. */
.cwtf-svcband-band {
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ------------------------------------------------------------- page header -- */

.cwtf-phead {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--c-line);
}

.cwtf-phead__title {
	font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
	max-width: 20ch;
	margin: 0 0 1.3rem;
}

/*
 * .cwtf-lede is auto-margined, which centres it inside the shell. That is right in a
 * centred section and wrong here: the heading above it is left-aligned with a 20ch
 * measure, so as the shell grew past the lede's own measure the two drifted apart and
 * the header stopped reading as one block. Pin it left and give it a measure of its
 * own instead of inheriting the 160ch one meant for centred copy.
 */
.cwtf-phead .cwtf-lede {
	margin-inline: 0;
	max-width: 58ch;
}

/* --------------------------------------------------------------- hub cards -- */

.cwtf-hubgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(1rem, 2.2vw, 1.6rem);
}

/* Exactly four master classes today, so 2x2 rather than a 3+1 orphan. */
.cwtf-hubgrid--pairs {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
}

.cwtf-hubcard {
	display: flex;
}

.cwtf-hubcard__link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: 100%;
	padding: clamp(1.5rem, 3vw, 2.1rem);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: linear-gradient(160deg, rgba(244, 244, 244, 0.07), rgba(244, 244, 244, 0.02));
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 20px 50px -30px var(--c-ink-deep);
	color: inherit;
	text-decoration: none;
	transition:
		transform 0.3s var(--ease),
		border-color 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cwtf-hubcard__link {
		background: #1e2321;
	}
}

.cwtf-hubcard__link:hover,
.cwtf-hubcard__link:focus-visible {
	transform: translateY(-4px);
	border-color: var(--c-line-strong);
	box-shadow: 0 30px 60px -30px rgba(94, 144, 137, 0.55);
}

.cwtf-hubcard__kind {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent-lt);
}

.cwtf-hubcard__kind--free {
	color: var(--c-warm);
}

.cwtf-hubcard__title {
	margin: 0;
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
	transition: color 0.3s var(--ease);
}

.cwtf-hubcard__link:hover .cwtf-hubcard__title,
.cwtf-hubcard__link:focus-visible .cwtf-hubcard__title {
	color: var(--c-accent-lt);
}

/* Not colour alone: the word itself carries the meaning. */
.cwtf-hubcard__badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.6rem;
	padding: 0.25em 0.6em;
	border: 1px solid rgba(226, 176, 74, 0.45);
	border-radius: var(--r-pill);
	background: rgba(226, 176, 74, 0.12);
	color: var(--c-warm);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cwtf-hubcard__body {
	margin: 0;
	font-size: 0.97rem;
	color: var(--c-muted);
}

.cwtf-hubcard__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.2rem;
}

.cwtf-hubcard__fact {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0.3em 0.65em;
	border: 1px solid var(--c-line);
	border-radius: 4px;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--c-muted);
	white-space: nowrap;
}

.cwtf-hubcard__foot {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.2rem;
	border-top: 1px solid var(--c-line);
}

.cwtf-hubcard__price {
	font-size: 1.25rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--c-fg);
}

.cwtf-hubcard__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent-lt);
	white-space: nowrap;
}

.cwtf-hubcard__go::after {
	content: "\2192";
	transition: transform 0.25s var(--ease);
}

.cwtf-hubcard__link:hover .cwtf-hubcard__go::after,
.cwtf-hubcard__link:focus-visible .cwtf-hubcard__go::after {
	transform: translateX(4px);
}

/* ------------------------------------------------------- one-on-one panels -- */

.cwtf-optgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2.2vw, 1.6rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cwtf-opt {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: linear-gradient(160deg, rgba(244, 244, 244, 0.07), rgba(244, 244, 244, 0.02));
	backdrop-filter: blur(14px) saturate(120%);
	box-shadow: 0 20px 50px -30px var(--c-ink-deep);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cwtf-opt {
		background: #1e2321;
	}
}

.cwtf-opt__title {
	margin: 0;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cwtf-opt__body {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.99rem;
}

/* The line that actually helps somebody choose, so it is pulled out of the prose. */
.cwtf-opt__choose {
	margin: 0.4rem 0 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--c-accent-lt);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: rgba(12, 13, 14, 0.55);
	color: var(--c-fg);
	font-size: 0.94rem;
}

.cwtf-opt__cta {
	margin: auto 0 0;
	padding-top: 1.4rem;
}

.cwtf-opt__cta .cwtf-btn {
	width: 100%;
	justify-content: center;
}

.cwtf-limit {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.cwtf-section--tightish {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cwtf-elsewhere {
	text-align: center;
}

.cwtf-elsewhere__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin: 1.8rem 0 0;
}

@media (max-width: 60rem) {
	.cwtf-optgrid {
		grid-template-columns: 1fr;
	}
}