/* ==========================================================================
   Free to Build — Homepage section layouts
   --------------------------------------------------------------------------
   Built from the Claude Design homepage artifact (Sep 2026).

   MOBILE FIRST. Base styles are the phone. Every media query is min-width and
   only ever scales UP. This is not a stylistic preference: the ICP is a 45-60
   year old owner reading on a phone, often with reading glasses, often in poor
   light. Body never goes below 19px, nothing below 14px, tap targets 48px.

   Colour, type and effect values all come from tokens.css. Nothing here
   defines a raw colour. Component primitives (.ftb-btn, .ftb-card, .ftb-badge,
   .ftb-accordion, .ftb-section-label, .ftb-plumb-rule) live in
   design-system.css and are used as-is.
   ========================================================================== */

/* ─── PAGE GUTTER ─────────────────────────────────────────────────────────
   One fluid property doing the job the design system's two gutter tokens
   describe: --gutter-mobile (20px) at the small end, 2x --gutter (64px) at
   the wide end. Every section uses this; nothing hardcodes a gutter.       */

.ftb-page {
	--page-gutter: clamp( var( --gutter-mobile, 20px ), 5vw, calc( var( --gutter, 32px ) * 2 ) );
	background: var( --ink-base );
	color: var( --ink-text );
}

.ftb-sec {
	border-top: 1px solid var( --ink-border );
}

.ftb-sec--sunken { background: var( --ink-sunken ); }
.ftb-sec--raised { background: var( --ink-raised ); }

.ftb-sec__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 96px ) var( --page-gutter );
}

/* ─── SHARED TYPE ─────────────────────────────────────────────────────── */

.ftb-sec__head {
	font-size: clamp( 28px, 3.6vw, 42px );
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 20px 0 0;
	text-wrap: balance;
}

.ftb-sec__lead {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	margin: 16px 0 0;
	max-width: 66ch;
}

.ftb-mono {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var( --ink-text-muted );
}

/* CTA + its deadline note, used in the hero, outcomes, guarantee and close. */
.ftb-cta-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 32px;
}

@media ( min-width: 700px ) {
	.ftb-cta-group {
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}
}

/* ─── 01. HERO ────────────────────────────────────────────────────────────
   Type-led, no photograph — deliberate, for brand and for page speed. There
   is no LCP image here at all, which is a real advantage worth protecting. */

.ftb-hero__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 9vw, 120px ) var( --page-gutter ) clamp( 40px, 7vw, 88px );
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 32px, 5vw, 72px );
	align-items: center;
}

.ftb-hero__title {
	font-size: clamp( 34px, 6.2vw, 76px );
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin: 24px 0 0;
	text-wrap: balance;
}

.ftb-hero__sub {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	max-width: 60ch;
	margin: 28px 0 0;
}

.ftb-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var( --ink-border );
}

.ftb-hero__fact {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ink-text-secondary );
}

/* The plumb rule is decorative and costs horizontal room — phones don't get it. */
.ftb-hero__rule { display: none; }

@media ( min-width: 900px ) {
	.ftb-hero__inner {
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: stretch;
	}

	/* align-self:stretch on the rule itself, so the hairline spans the hero
	   and the knob/bob sit at its ends. Without a stretched track the rule
	   collapses and only the bob shows, floating. */
	.ftb-hero__rule {
		display: flex;
		align-self: stretch;
		padding: 8px 0;
	}
}

/* ─── 02. PAIN ───────────────────────────────────────────────────────── */

.ftb-pain__list {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	max-width: 76ch;
}

.ftb-pain__item {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 16px;
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-pain__n {
	font-family: var( --font-mono );
	font-size: 14px;
	color: var( --ink-text-muted );
}

.ftb-pain__t {
	font-size: clamp( 19px, 2.1vw, 24px );
	line-height: 1.5;
	color: var( --ink-text );
}

@media ( min-width: 700px ) {
	.ftb-pain__item { gap: 20px; padding: 22px 0; }
}

/* ─── 03. REFRAME ────────────────────────────────────────────────────────
   The brand thesis. The body paragraph must survive at full length.        */

.ftb-reframe__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

.ftb-reframe__body {
	border-left: 2px solid var( --brass );
	padding-left: clamp( 20px, 3vw, 40px );
}

.ftb-reframe__body p:not( .ftb-reframe__kicker ) {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.75;
	color: var( --ink-text-secondary );
	margin: 0;
}

.ftb-reframe__kicker {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --brass-light );
	margin: 28px 0 0;
}

@media ( min-width: 800px ) {
	.ftb-reframe__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: clamp( 32px, 5vw, 64px );
	}
}

/* ─── 04. SYSTEM LAYERS ───────────────────────────────────────────────────
   A plumb line with brass nodes at each layer, terminating in the plumb bob.
   The install order is the argument, so it is expressed as a line hanging
   true rather than as a numbered list.                                     */

.ftb-layers__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: clamp( 32px, 5vw, 56px );
}

.ftb-layers__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var( --ink-border-strong );
}

.ftb-layers__item {
	display: grid;
	grid-template-columns: clamp( 44px, 7vw, 104px ) minmax( 0, 1fr );
	align-items: start;
}

.ftb-layers__n {
	font-family: var( --font-mono );
	font-size: clamp( 22px, 3.6vw, 42px );
	line-height: 1;
	letter-spacing: -0.01em;
	color: var( --ink-text-muted );
	padding-top: clamp( 18px, 2.8vw, 30px );
}

.ftb-layers__body {
	position: relative;
	border-left: 1px solid var( --ink-border-strong );
	border-bottom: 1px solid var( --ink-border );
	padding: clamp( 20px, 3vw, 32px ) 0 clamp( 22px, 3.2vw, 34px ) clamp( 20px, 3.4vw, 48px );
}

/* Brass node — a diamond sitting on the line, one per layer. */
.ftb-layers__body::before {
	content: "";
	position: absolute;
	left: -5px;
	top: clamp( 26px, 3.6vw, 42px );
	width: 9px;
	height: 9px;
	background: var( --brass );
	transform: rotate( 45deg );
}

.ftb-layers__name {
	font-size: clamp( 22px, 2.6vw, 30px );
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0 0 10px;
}

.ftb-layers__what {
	font-size: clamp( 18px, 1.9vw, 20px );
	line-height: 1.65;
	color: var( --ink-text-secondary );
	margin: 0;
	max-width: 66ch;
}

/* The bob terminates the line. Decorative — hidden from assistive tech. */
.ftb-layers__bob {
	display: grid;
	grid-template-columns: clamp( 44px, 7vw, 104px ) minmax( 0, 1fr );
}

.ftb-layers__bob-cell {
	position: relative;
	height: 64px;
}

.ftb-layers__bob-cell img {
	position: absolute;
	left: -10px;
	top: 0;
	width: 20px;
	height: auto;
	display: block;
}

.ftb-layers__link { margin: 28px 0 0; font-size: 19px; }

@media ( min-width: 800px ) {
	.ftb-layers__top {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 32px;
	}
}

/* ─── 05. OUTCOMES ───────────────────────────────────────────────────── */

.ftb-outcomes__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 20px;
	margin-top: clamp( 32px, 5vw, 52px );
}

.ftb-outcomes__card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ftb-outcomes__head {
	font-size: 21px;
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-bottom: 10px;
}

.ftb-outcomes__body {
	font-size: 18px;
	line-height: 1.65;
	color: var( --ink-text-secondary );
}

.ftb-outcomes__foot {
	margin-top: clamp( 32px, 5vw, 52px );
	padding-top: clamp( 28px, 4vw, 48px );
	border-top: 1px solid var( --ink-border );
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 24px, 4vw, 56px );
	align-items: center;
}

.ftb-outcomes__foot .ftb-btn { width: 100%; }

.ftb-outcomes__deadline {
	text-align: center;
	margin: 14px 0 0;
}

@media ( min-width: 620px ) {
	.ftb-outcomes__grid { grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); }
}

@media ( min-width: 800px ) {
	.ftb-outcomes__foot { grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); }
}

/* ─── 06. IMAGE STATEMENT ─────────────────────────────────────────────────
   Full-bleed terrain frame, copy anchored to the bottom over a scrim. The
   images are pre-graded — do NOT add a filter here or the grade doubles.   */

.ftb-statement {
	position: relative;
	border-top: 1px solid var( --ink-border );
	display: grid;
	min-height: min( 74vh, 600px );
}

.ftb-statement--short { min-height: min( 56vh, 460px ); }

.ftb-statement__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ftb-statement__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ftb-statement__scrim {
	position: relative;
	pointer-events: none;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(
		to bottom,
		rgba( 19, 18, 16, 0.25 ) 0%,
		rgba( 19, 18, 16, 0.60 ) 55%,
		rgba( 19, 18, 16, 0.95 ) 100%
	);
}

.ftb-statement__inner {
	width: 100%;
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 40px, 7vw, 80px ) var( --page-gutter ) clamp( 32px, 5vw, 64px );
}

.ftb-statement__label {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --brass-light );
	margin-bottom: 18px;
}

.ftb-statement__text {
	font-size: clamp( 24px, 4vw, 46px );
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
	max-width: 28ch;
	text-wrap: balance;
}

/* ─── 07. COMPARISON ──────────────────────────────────────────────────────
   On a phone the two columns stack, so each row needs to read as a PAIR —
   the pairing is the argument. The left cell is labelled and recessive, the
   right cell carries the weight.                                           */

.ftb-compare {
	margin-top: clamp( 32px, 5vw, 52px );
	border-top: 1px solid var( --ink-border-strong );
}

.ftb-compare__heads { display: none; }

.ftb-compare__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 6px;
	padding: clamp( 18px, 2.6vw, 28px ) 0;
	border-top: 1px solid var( --ink-border );
}

.ftb-compare__row:first-child { border-top: 0; }

.ftb-compare__a {
	font-size: 18px;
	line-height: 1.6;
	color: var( --ink-text-muted );
}

/* Inline label on mobile only — replaces the column headers. */
.ftb-compare__a::before {
	content: attr( data-label ) " · ";
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ftb-compare__b {
	font-size: clamp( 19px, 2.1vw, 22px );
	line-height: 1.55;
	color: var( --ink-text );
	font-weight: var( --weight-medium, 500 );
}

@media ( min-width: 760px ) {
	.ftb-compare__heads {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 8px clamp( 24px, 4vw, 56px );
		padding: 14px 0;
	}

	.ftb-compare__head-a,
	.ftb-compare__head-b {
		font-family: var( --font-mono );
		font-size: 14px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.ftb-compare__head-a { color: var( --ink-text-muted ); }
	.ftb-compare__head-b { color: var( --brass-light ); }

	.ftb-compare__row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 10px clamp( 24px, 4vw, 56px );
		border-top: 1px solid var( --ink-border );
	}

	.ftb-compare__row:first-child { border-top: 1px solid var( --ink-border ); }
	.ftb-compare__a::before { content: none; }
}

/* ─── 08. FIT ────────────────────────────────────────────────────────────
   Turning people away is what makes a premium cohort credible, so the
   disqualifiers get real presence rather than being tucked away.           */

.ftb-fit__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	margin-top: clamp( 32px, 5vw, 52px );
}

.ftb-fit__col { padding-left: clamp( 18px, 3vw, 36px ); }
.ftb-fit__col--for { border-left: 2px solid var( --brass ); }
.ftb-fit__col--not { border-left: 1px solid var( --ink-border ); }

.ftb-fit__head {
	font-size: clamp( 22px, 2.4vw, 26px );
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.015em;
	margin: 0 0 24px;
}

.ftb-fit__col--not .ftb-fit__head { color: var( --ink-text-secondary ); }

.ftb-fit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.ftb-fit__item {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 14px;
	align-items: start;
	font-size: 19px;
	line-height: 1.6;
}

.ftb-fit__col--not .ftb-fit__item { color: var( --ink-text-secondary ); }
.ftb-fit__item svg { margin-top: 4px; flex: none; }

@media ( min-width: 800px ) {
	.ftb-fit__grid {
		grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) );
		gap: clamp( 28px, 4vw, 56px );
	}
}

/* ─── 09. BIO ─────────────────────────────────────────────────────────────
   Designed to hold on the copy alone: the portrait reinforces, it is not
   load-bearing. If the image is absent the section must not leave a hole.  */

.ftb-bio__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

.ftb-bio__body {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.75;
	color: var( --ink-text-secondary );
	margin: 0;
	max-width: 60ch;
}

.ftb-bio__link { margin: 26px 0 0; font-size: 19px; }

.ftb-bio__media {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: clamp( 18px, 3vw, 32px );
	align-items: stretch;
}

.ftb-bio__rule { display: none; }

.ftb-bio__portrait {
	max-width: 340px;
	aspect-ratio: 4 / 5;
	border-radius: var( --radius-md, 6px );
	overflow: hidden;
}

.ftb-bio__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media ( min-width: 800px ) {
	.ftb-bio__grid  { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: clamp( 32px, 5vw, 64px ); }

	.ftb-bio__media {
		grid-template-columns: auto minmax( 0, 1fr );
		align-items: stretch;
	}

	/* Stretch, or the rule collapses to its knob and floats above the
	   portrait — same failure the hero rule had. */
	.ftb-bio__rule {
		display: flex;
		align-self: stretch;
		padding: 4px 0;
	}
}

/* ─── 10. GUARANTEE ──────────────────────────────────────────────────────
   The implementation-vs-money-back distinction is the whole point and must
   not get buried. Highest-intent moment on the page — CTA sits inside it.  */

.ftb-guarantee__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 28px;
	margin-top: 24px;
	align-items: start;
}

.ftb-guarantee__body {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.75;
	color: var( --ink-text-secondary );
	margin: 0 0 20px;
}

.ftb-guarantee__body:last-child { margin-bottom: 0; }

.ftb-guarantee__card-label {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --brass-light );
	margin-bottom: 22px;
}

.ftb-guarantee__terms {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	gap: 14px;
}

.ftb-guarantee__term {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 12px;
	align-items: start;
	font-size: 18px;
	line-height: 1.6;
	color: var( --ink-text-secondary );
}

.ftb-guarantee__term svg { margin-top: 4px; flex: none; }
.ftb-guarantee__card .ftb-btn { width: 100%; }

.ftb-guarantee__deadline { text-align: center; margin: 14px 0 0; }

@media ( min-width: 800px ) {
	.ftb-guarantee__grid {
		grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
		gap: clamp( 28px, 4vw, 64px );
	}
}

/* ─── 11. FAQ ────────────────────────────────────────────────────────── */

.ftb-faq__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

@media ( min-width: 800px ) {
	.ftb-faq__grid {
		grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
		gap: clamp( 32px, 5vw, 64px );
	}
}

/* ─── 12. CLOSE ──────────────────────────────────────────────────────── */

.ftb-close__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	align-items: center;
}

.ftb-close__head {
	font-size: clamp( 28px, 4vw, 52px );
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 18px;
	text-wrap: balance;
}

.ftb-close__sub {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	margin: 0;
}

.ftb-close__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

@media ( min-width: 800px ) {
	.ftb-close__grid {
		grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
		gap: clamp( 32px, 5vw, 64px );
	}
}

/* ─── MOTION — the plumb bob settles ──────────────────────────────────────
   Applied by JS (see main.js), never by CSS alone. That ordering matters:
   if the hidden state lived here, a reduced-motion or no-JS visitor would
   get a permanently invisible page. Absent JS, everything is simply visible.
   ------------------------------------------------------------------------ */

/* @keyframes ftb-settle lives further down (the 18px version) — a second
   definition here silently lost to it and made the travel distance
   ambiguous. Removed 2026-09-11. */

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


/* ==========================================================================
   HEADER
   --------------------------------------------------------------------------
   Sticky, transparent at rest, resolving to a blurred ink bar on scroll. The
   waitlist CTA is visible at EVERY width — it is the page's only conversion,
   so it never goes behind a hamburger. With two nav links plus a button there
   is nothing here that needs a mobile menu at all.
   ========================================================================== */

.ftb-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: transparent;
	border-bottom: 1px solid transparent;
	/* backdrop-filter is declared here at 0 blur, not only in .is-scrolled:
	   toggling the property on and off makes the browser create and destroy
	   a compositing layer at the threshold, which flashes the content
	   behind it. Declaring it up front keeps one layer and lets the blur
	   animate instead of snapping. */
	backdrop-filter: saturate( 100% ) blur( 0 );
	-webkit-backdrop-filter: saturate( 100% ) blur( 0 );
	transition:
		background var( --dur, 200ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		backdrop-filter var( --dur, 200ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		-webkit-backdrop-filter var( --dur, 200ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		border-color var( --dur, 200ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-header.is-scrolled {
	background: rgba( 19, 18, 16, 0.86 );
	backdrop-filter: saturate( 140% ) blur( 14px );
	-webkit-backdrop-filter: saturate( 140% ) blur( 14px );
	border-bottom-color: var( --ink-border );
}

.ftb-header__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: 12px var( --page-gutter );
	display: flex;
	align-items: center;
	gap: 12px;
}

.ftb-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex: none;
	color: var( --ink-text );
}

.ftb-header__brand:hover { color: var( --ink-text ); }

.ftb-header__mark { display: block; height: 30px; width: auto; }

.ftb-header__name {
	font-size: 19px;
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.01em;
	line-height: 1;
}

.ftb-header__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: none;
}

.ftb-header__menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.ftb-header__menu a {
	display: inline-flex;
	align-items: center;
	min-height: var( --tap-min, 48px );
	padding: 0 12px;
	font-size: 17px;
	font-weight: var( --weight-semibold, 600 );
	color: var( --ink-text-secondary );
	text-decoration: none;
}

.ftb-header__menu a:hover { color: var( --ink-text ); }

/* --- Mobile menu -----------------------------------------------------------

   Below 560px the primary menu is display:none. Until this existed nothing
   replaced it, so a phone visitor could not reach /program/ or /about/ from
   the header at all. The CTA stays in the bar; only the links move.        */

.ftb-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --tap-min, 48px );
	height: var( --tap-min, 48px );
	/* No negative margin: it pushed the 48px target past the 20px gutter and
	   the button was clipped at the screen edge. */
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var( --ink-text );
}

/* Three bars drawn from one element: the middle is the box, the outer two are
   pseudo-elements. On open it becomes a cross — the middle fades, the outer
   two rotate onto the centre line. */
.ftb-header__bars,
.ftb-header__bars::before,
.ftb-header__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition:
		transform 200ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		opacity 120ms linear;
}

.ftb-header__bars {
	position: relative;
}

.ftb-header__bars::before,
.ftb-header__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.ftb-header__bars::before { top: -7px; }
.ftb-header__bars::after  { top: 7px; }

[aria-expanded="true"] .ftb-header__bars { opacity: 0; }

[aria-expanded="true"] .ftb-header__bars::before {
	top: 0;
	transform: rotate( 45deg );
	opacity: 1;
}

[aria-expanded="true"] .ftb-header__bars::after {
	top: 0;
	transform: rotate( -45deg );
	opacity: 1;
}

.ftb-header__toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.28 );
	border-radius: var( --radius-xs, 3px );
}

/* The panel. Animated on max-height rather than height so it works without
   knowing the content size; the value only has to exceed the real height. */
.ftb-header__panel {
	overflow: hidden;
	max-height: 0;
	border-top: 1px solid transparent;
	background: var( --ink-sunken );
	transition:
		max-height 240ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		border-color 240ms linear;
}

/* [hidden] is removed by the script before opening, so this only ever applies
   to the closed state — but it keeps the panel out of the flow with JS off. */
.ftb-header__panel[hidden] {
	display: none;
}

.ftb-header__panel.is-open {
	max-height: 320px;
	border-top-color: var( --ink-border );
}

.ftb-header__panel-menu {
	list-style: none;
	margin: 0;
	padding: 8px var( --page-gutter, 20px ) 16px;
}

.ftb-header__panel-menu a {
	display: flex;
	align-items: center;
	min-height: var( --tap-min, 48px );
	font-size: 19px;
	font-weight: var( --weight-semibold, 600 );
	color: var( --ink-text );
	text-decoration: none;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-header__panel-menu li:last-child a {
	border-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {

	.ftb-header__panel,
	.ftb-header__bars,
	.ftb-header__bars::before,
	.ftb-header__bars::after {
		transition: none;
	}

}


.ftb-header__cta-short { display: none; }

/* Three items compete for the bar on a narrow phone: brand, CTA and toggle.
   Shorten the CTA rather than shrink the tap target or clip the gutter. */
@media ( max-width: 400px ) {

	.ftb-header__cta {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 15px;
	}

	.ftb-header__cta .ftb-header__cta-long { display: none; }
	.ftb-header__cta-short { display: inline; }

}
@media ( min-width: 560px ) {
	.ftb-header__menu { display: flex; }
	.ftb-header__name { font-size: 21px; }
	.ftb-header__mark { height: 34px; }

	/* Above the breakpoint the real menu is back — the toggle and its panel
	   must not linger, even if the panel was left open on resize. */
	.ftb-header__toggle { display: none; }
	.ftb-header__panel { display: none; }
}

@media ( min-width: 1100px ) {
	.ftb-header__inner { gap: 24px; padding: 14px var( --page-gutter ); }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.ftb-footer {
	border-top: 1px solid var( --ink-border );
	background: var( --ink-sunken );
}

.ftb-footer__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 40px, 6vw, 72px ) var( --page-gutter );
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

.ftb-footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	text-decoration: none;
	color: var( --ink-text );
}

.ftb-footer__logo:hover { color: var( --ink-text ); }
.ftb-footer__logo img { display: block; height: 30px; width: auto; }

.ftb-footer__name {
	font-size: 21px;
	font-weight: var( --weight-bold, 700 );
	letter-spacing: -0.01em;
	line-height: 1;
}

.ftb-footer__tagline {
	font-family: var( --font-mono );
	font-size: 14px;
	line-height: 1.6;
	color: var( --ink-text-secondary );
	margin: 0;
	max-width: 34ch;
}

.ftb-footer__heading {
	font-family: var( --font-mono );
	font-size: 14px;
	font-weight: var( --weight-medium, 500 );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin: 0 0 16px;
}

.ftb-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

/* Muted, lifting to primary — never the brass body-link treatment. */
.ftb-footer__menu a {
	display: inline-flex;
	align-items: center;
	min-height: var( --tap-min, 48px );
	font-size: 18px;
	color: var( --ink-text-secondary );
	text-decoration: none;
	transition: color var( --dur-fast, 150ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-footer__menu a:hover,
.ftb-footer__menu a:focus-visible {
	color: var( --ink-text );
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Social as icons in the brand column, not as a word list in a link column.
   Three platform names cost three full rows to say what one row of icons
   says, and left the contact column lopsided against a one-item column.

   Muted at rest, brass only on hover: the close CTA sits directly above the
   footer as a solid brass button, and the design system budgets roughly one
   brass element per viewport. Brass icons at rest would compete with it. */
.ftb-footer__social {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Circular chips, matching FlowCraft's footer treatment. FlowCraft floats
   white glyphs on translucent white; here the tint is brass so the row belongs
   to this palette rather than reading as a borrowed component.

   Single colour by design — never the platforms' own brand colours. Five
   full-colour logos would be the loudest thing on the page and would wreck a
   footer whose entire job is to be quiet. */
.ftb-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background-color: rgba( 201, 164, 95, 0.10 );
	color: var( --ink-text-muted );
	transition:
		color var( --dur-fast, 150ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		background-color var( --dur-fast, 150ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

/* Muted at rest, brass on hover. The close CTA above the footer is a solid
   brass button and the system budgets roughly one brass element per viewport,
   so a row of brass chips at rest would compete with it. */
.ftb-footer__social-link:hover,
.ftb-footer__social-link:focus-visible {
	color: var( --brass-light, #C9A45F );
	background-color: rgba( 201, 164, 95, 0.18 );
}

.ftb-footer__social-link svg {
	display: block;
}

/* The chip is 40px, below the 48px tap floor used elsewhere. Widening the
   chip itself would make the row heavy, so the TARGET is extended past the
   visible chip instead — the hit area is 48px, the circle stays 40px. */
@media ( pointer: coarse ) {

	.ftb-footer__social-link {
		position: relative;
	}

	.ftb-footer__social-link::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: var( --tap-min, 48px );
		height: var( --tap-min, 48px );
		transform: translate( -50%, -50% );
	}
}

/* The theme had no visually-hidden helper, so an icon-only link would have
   printed its label as visible text beside the glyph. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ftb-footer__bottom {
	border-top: 1px solid var( --ink-border );
}

/* Privacy and terms live here, beside the copyright — not in a column of
   their own. They are compliance furniture, not navigation: nobody browses to
   them, they go looking when they need them. A column with a heading would
   give them the same visual weight as the program itself. */
.ftb-footer__bottom-inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: 20px var( --page-gutter );
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	align-items: baseline;
	justify-content: space-between;
}

.ftb-footer__copy {
	margin: 0;
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}

.ftb-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.ftb-footer__legal-menu a {
	display: inline-flex;
	align-items: center;
	/* Deliberately below the 48px tap floor used elsewhere: these are dense
	   legal links in a bar, and a 48px row here would make the bottom bar as
	   tall as a nav column. They stay at a comfortable 14px mono with real
	   horizontal spacing between targets. */
	min-height: 32px;
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	text-decoration: none;
	transition: color var( --dur-fast, 150ms ) var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-footer__legal-menu a:hover,
.ftb-footer__legal-menu a:focus-visible {
	color: var( --ink-text );
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Two columns first: brand on top, the three nav columns sharing a row
   beneath it. Better than four equal columns squeezed onto a tablet. */
@media ( min-width: 620px ) {
	.ftb-footer__inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 40px clamp( 24px, 3vw, 40px );
	}

	.ftb-footer__brand { grid-column: 1 / -1; }
}

/* At full width the brand column is NOT a peer of the nav columns — it
   carries the mark and the tagline, so it gets more room and a wider gutter
   separating it from the link columns. Four equal tracks read as a table;
   this reads as a masthead with navigation beside it. */
@media ( min-width: 900px ) {
	.ftb-footer__inner {
		grid-template-columns: minmax( 0, 1.6fr ) repeat( 2, minmax( 0, 1fr ) );
		column-gap: clamp( 32px, 4vw, 56px );
		row-gap: 0;
		align-items: stretch;
	}

	.ftb-footer__brand {
		grid-column: auto;
		/* The separation Thomas asked for: extra space plus a hairline, so
		   the brand block is visibly a different kind of thing. */
		padding-right: clamp( 32px, 4vw, 64px );
		border-right: 1px solid var( --ink-border );
	}
}


/* ==========================================================================
   MOBILE FIT — measured at 320 / 375 / 768 in the DOM
   --------------------------------------------------------------------------
   .ftb-btn ships `white-space: nowrap`, which is right for a button in
   isolation but overflows a 320px viewport once the label is as long as
   "Join the founding waitlist". Below 420px the CTAs go full-width and wrap
   instead — never a horizontal scrollbar on a phone.
   ========================================================================== */

@media ( max-width: 419px ) {
	.ftb-btn--lg,
	.ftb-header__cta {
		white-space: normal;
		text-align: center;
		line-height: 1.25;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Full-bleed CTAs read as the primary action and remove any chance of
	   overflow. The header CTA stays inline — it must not push the logo out. */
	.ftb-cta-group .ftb-btn--lg,
	.ftb-close__actions .ftb-btn--lg {
		display: flex;
		width: 100%;
	}

	.ftb-header__cta {
		font-size: 15px;
		padding-left: 12px;
		padding-right: 12px;
	}

	/* At the very bottom of the range the brand wordmark is what pushes the
	   row over. The mark alone still identifies the site, and the CTA is the
	   thing that must survive. */
	.ftb-header__inner { gap: 8px; }
	.ftb-header__name  { font-size: 17px; }
	.ftb-header__mark  { height: 26px; }
}

@media ( max-width: 359px ) {
	.ftb-header__name { display: none; }
}

/* Inline text links are tap targets too. The ICP is 45-60 on a phone, so
   these get the same 48px floor as buttons rather than their 23px line box. */
.ftb-layers__link a,
.ftb-bio__link a,
.ftb-close__actions > a:not( .ftb-btn ) {
	display: inline-flex;
	align-items: center;
	min-height: var( --tap-min, 48px );
}

/* The brand lockup is a link; give it the full tap height on small screens
   without changing how it looks. */
.ftb-header__brand,
.ftb-footer__logo {
	min-height: var( --tap-min, 48px );
}


/* ==========================================================================
   FIXES + DEPTH PASS
   ========================================================================== */

/* The badge is a fixed label ("Install order · 01 → 05"), not prose. It was
   being squeezed by the flex row and wrapping to two lines. It also belongs
   at the foot of the header block — it captions the list below it, so it
   should sit on the same baseline as the bottom of the lead, not float
   halfway up beside the paragraph. */
.ftb-layers__top .ftb-badge {
	white-space: nowrap;
	flex: none;
	align-self: flex-end;
}

/* ─── SURFACE TEXTURE ─────────────────────────────────────────────────────
   The page was a single flat Ink value from top to bottom, which is what
   made it feel inert. This adds depth WITHOUT adding an image request: a
   very low-contrast plumb-line grid, plus a soft warm pool behind the hero
   headline. Both are pure CSS, both sit under the content, neither costs a
   byte of network.
   ------------------------------------------------------------------------ */

.ftb-hero,
.ftb-sec {
	position: relative;
	isolation: isolate;
}

/* Vertical hairlines — the plumb line repeated as a field, at the edge of
   perception. Reads as drafting paper, not as a pattern. */
.ftb-sec--sunken::before,
.ftb-layers-sec::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to right,
		rgba( 168, 129, 59, 0.055 ) 0 1px,
		transparent 1px 96px
	);
	mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent );
	-webkit-mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent );
}

/* Warm pool behind the hero type, so the headline sits in light rather than
   on a flat field. */
.ftb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		120% 90% at 18% 32%,
		rgba( 168, 129, 59, 0.10 ) 0%,
		rgba( 168, 129, 59, 0.04 ) 38%,
		transparent 72%
	);
}

/* ─── MOTION — make the settle read ───────────────────────────────────────
   The stock settle (250ms / 10px) was almost invisible on a page this long.
   Sections travel further and slower; the plumb line in the hero draws
   itself, and the bob drops and stops. A settle is a fall with a stop, not
   a fade.
   ------------------------------------------------------------------------ */

/* Scroll reveal: hidden, then shown when it enters the viewport.

   The straightforward version. Elements start hidden and slid down, the
   observer adds .is-in, and they fade and slide up to rest.

   The hiding is gated on .js — added by settle.js the moment it runs. With
   JS off, or if the script fails, .js never lands and nothing is ever
   hidden, so the page reads as a complete document. That is the only reason
   the gate exists; everything else here is a plain reveal. */

.js [data-settle],
.js [data-settle-children] > * {
	opacity: 0;
	transform: translateY( 18px );
	transition:
		opacity 520ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		transform 520ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.js [data-settle].is-in,
.js [data-settle-children].is-in > * {
	opacity: 1;
	transform: none;
}

/* Reduced motion: show everything, no travel, no fade. */
@media ( prefers-reduced-motion: reduce ) {

	.js [data-settle],
	.js [data-settle-children] > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

}

/* The hero plumb line draws downward on load, then the bob lands. */
@keyframes ftb-rule-draw {
	from { transform: scaleY( 0 ); }
	to   { transform: scaleY( 1 ); }
}

@keyframes ftb-bob-drop {
	0%   { opacity: 0; transform: translate( -50%, -180% ) rotate( 45deg ); }
	70%  { opacity: 1; transform: translate( -50%, 50% ) rotate( 45deg ); }
	85%  { transform: translate( -50%, 34% ) rotate( 45deg ); }
	100% { opacity: 1; transform: translate( -50%, 50% ) rotate( 45deg ); }
}

@keyframes ftb-node-in {
	from { opacity: 0; transform: rotate( 45deg ) scale( 0.3 ); }
	to   { opacity: 1; transform: rotate( 45deg ) scale( 1 ); }
}

@keyframes ftb-knob-in {
	from { opacity: 0; transform: translate( -50%, -50% ) scale( 0.4 ); }
	to   { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); }
}

@media ( prefers-reduced-motion: no-preference ) {
	.ftb-hero__rule .ftb-plumb-rule {
		transform-origin: top center;
		animation: ftb-rule-draw 620ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ) 120ms both;
	}

	.ftb-hero__rule .ftb-plumb-rule__knob {
		animation: ftb-knob-in 320ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ) 80ms both;
	}

	.ftb-hero__rule .ftb-plumb-rule__bob {
		animation: ftb-bob-drop 760ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ) 520ms both;
	}

	/* The brass nodes arrive with their row. Own keyframe, because the node
	   is a rotated square — animating the shared knob transform would drop
	   the rotation and render it as a plain box. */
	.ftb-layers__item .ftb-layers__body::before {
		animation: ftb-node-in 300ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ) both;
	}
}

/* A statement with no copy is a pure visual pause. The standard scrim ramps
   to near-opaque at the foot to protect text; with nothing to protect that
   just crushes the frame, so keep it light and even. */
.ftb-statement__scrim--bare {
	background: linear-gradient(
		to bottom,
		rgba( 19, 18, 16, 0.55 ) 0%,
		rgba( 19, 18, 16, 0.28 ) 40%,
		rgba( 19, 18, 16, 0.55 ) 100%
	);
}

/* ==========================================================================
   WAITLIST PAGE — page hero, form, steps, objections, close line
   Mobile-first, same as the rest of this file.
   Built from the approved Claude Design artifact (Sep 2026).
   ========================================================================== */

/* --- Page hero — the reusable interior-page header ------------------------
   Lighter than .ftb-hero by design: the homepage owns `display` size, an
   interior page tops out at h1 so it reads as a continuation. */

.ftb-page-hero {
	position: relative;
	border-bottom: 1px solid var( --ink-border );
	overflow: hidden;
}

.ftb-page-hero__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 40px, 5.5vw, 72px ) var( --page-gutter, 20px ) clamp( 36px, 4.5vw, 60px );
	position: relative;
	z-index: 1;
}

.ftb-page-hero__body {
	max-width: 760px;
}

.ftb-page-hero__eyebrow {
	font-family: var( --font-mono );
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin: 0;
}

.ftb-page-hero__title {
	font-size: var( --font-size-h1 );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 18px 0 0;
}

.ftb-page-hero__sub {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	max-width: 60ch;
	margin: 22px 0 0;
}

/* The plumb rule is structure, not ornament — it sits in its own grid track
   beside the copy on desktop and is dropped entirely on mobile, where a
   floating hairline reads as a stray border. */
.ftb-page-hero__rule {
	display: none;
}

/* Optional image state. Body copy never sits on an unscrimmed frame. */
.ftb-page-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.ftb-page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		to right,
		rgba( 19, 18, 16, 0.94 ) 0%,
		rgba( 19, 18, 16, 0.86 ) 45%,
		rgba( 19, 18, 16, 0.62 ) 100%
	);
}

/* The image state needs materially more vertical room than the plain one. At
   the old padding the frame rendered ~450px on a 900px viewport — a 3.2:1
   letterbox strip that read as a texture band rather than a photograph, and
   left the h1 cramped against both edges. A min-height floor is used rather
   than more padding alone so the frame keeps a sane aspect ratio even when the
   copy is short. */
.ftb-page-hero--image .ftb-page-hero__inner {
	padding-top: clamp( 72px, 9vw, 132px );
	padding-bottom: clamp( 68px, 8vw, 120px );
	display: flex;
	align-items: center;
}

/* The min-height floor is desktop-only. On a 375px phone a 560px hero eats 69%
   of the viewport before a word of content, so there the padding alone sets
   the height. */
@media ( min-width: 700px ) {

	.ftb-page-hero--image .ftb-page-hero__inner {
		min-height: 560px;
	}
}

/* Above 900px the inner becomes a grid (copy + plumb rule), which overrides the
   flex above. `align-content` is what centres a grid's rows in surplus space —
   `align-items` only centres each item within its own track. */
@media ( min-width: 900px ) {

	.ftb-page-hero--image .ftb-page-hero__inner {
		align-content: center;
	}
}

/* --- Form ----------------------------------------------------------------- */

.ftb-form {
	border-bottom: 1px solid var( --ink-border );
	/* Anchored from the header and from the close line; keep the sticky
	   header from covering the heading on jump. */
	scroll-margin-top: 84px;
}

.ftb-form__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 40px, 5.5vw, 72px ) var( --page-gutter, 20px ) clamp( 48px, 6vw, 88px );
	display: grid;
	gap: clamp( 28px, 4vw, 64px );
	align-items: start;
}

.ftb-form__intro {
	max-width: 44ch;
}

.ftb-form__headline {
	font-size: clamp( 24px, 2.6vw, 30px );
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 18px 0 0;
}

.ftb-form__sub {
	font-size: var( --font-size-body, 19px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	margin: 18px 0 0;
}

.ftb-form__meta {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var( --ink-border );
	display: grid;
	gap: 10px;
}

.ftb-form__meta-line {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}

/* Card = raised surface + hairline. No shadow at rest on Ink. */
.ftb-form__card {
	background: var( --ink-raised );
	border: 1px solid var( --ink-border );
	border-radius: var( --radius-lg, 10px );
	padding: clamp( 22px, 3.2vw, 40px );
}

.ftb-form__footnote {
	font-size: var( --font-size-small, 16px );
	line-height: 1.6;
	color: var( --ink-text-muted );
	margin: 14px 0 0;
	text-align: center;
}

.ftb-form__notice {
	font-size: var( --font-size-small, 16px );
	color: var( --error, #9E3B2E );
	margin: 0;
}

/* --- WS Form, restyled ----------------------------------------------------
   Everything below targets WS Form's own stable class names rather than
   classes added by hand in the form editor: hand-added classes are the first
   thing lost when a field is deleted and rebuilt, and would fail silently. */

.ftb-form__card.ftb-form__card .wsf-form {
	display: grid;
	gap: 22px;
}

.ftb-form__card.ftb-form__card .wsf-field-wrapper,
.ftb-form__card.ftb-form__card .wsf-field-wrapper > div {
	min-width: 0;
}

.ftb-form__card.ftb-form__card label,
.ftb-form__card.ftb-form__card .wsf-label {
	display: block;
	font-size: var( --font-size-small, 16px );
	font-weight: 500;
	line-height: 1.45;
	color: var( --ink-text-secondary );
	margin: 0 0 8px;
}

/* Required marker in brass would spend the page's single brass element on
   punctuation. Muted, and the asterisk is decorative — the label says it. */
.ftb-form__card.ftb-form__card .wsf-required {
	color: var( --ink-text-muted );
}

.ftb-form__card.ftb-form__card input[type="text"],
.ftb-form__card.ftb-form__card input[type="email"],
.ftb-form__card.ftb-form__card input[type="tel"],
.ftb-form__card.ftb-form__card input[type="url"],
.ftb-form__card.ftb-form__card input[type="number"],
.ftb-form__card.ftb-form__card select,
.ftb-form__card.ftb-form__card textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var( --font-primary );
	/* 19px is the brand minimum, and on iOS anything under 16px triggers a
	   zoom on focus — this reader is 45-60 on a phone in poor light. */
	font-size: var( --font-size-body, 19px );
	line-height: 1.5;
	color: var( --ink-text );
	background: var( --ink-sunken );
	/* A hairline disappears at arm's length in bad light; this border is
	   deliberately one tier stronger than the card's. */
	border: 1px solid var( --ink-border-strong );
	border-radius: var( --radius-sm, 4px );
	padding: 14px 16px;
	min-height: 52px;
	appearance: none;
	-webkit-appearance: none;
	transition:
		border-color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		box-shadow 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		background 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-form__card.ftb-form__card textarea {
	min-height: 132px;
	resize: vertical;
	line-height: 1.6;
}

.ftb-form__card.ftb-form__card input::placeholder,
.ftb-form__card.ftb-form__card textarea::placeholder {
	color: var( --ink-text-muted );
	opacity: 1;
}

.ftb-form__card.ftb-form__card input:hover,
.ftb-form__card.ftb-form__card select:hover,
.ftb-form__card.ftb-form__card textarea:hover {
	border-color: #5A544A;
}

.ftb-form__card.ftb-form__card input:focus,
.ftb-form__card.ftb-form__card select:focus,
.ftb-form__card.ftb-form__card textarea:focus {
	outline: none;
	border-color: var( --brass-light );
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.28 );
	background: var( --ink-base );
}

/* Selects must not fall back to browser chrome on a dark surface — the
   native arrow renders black-on-black in several engines. */
.ftb-form__card.ftb-form__card select {
	padding-right: 46px;
	background-position: right 14px center;
	background-size: 20px 20px;
	cursor: pointer;
}

.ftb-form__card.ftb-form__card select:focus {
}

/* The dropdown list itself is painted by the OS, which does not inherit the
   dark surface — set both so options aren't black-on-black. */
.ftb-form__card.ftb-form__card select option {
	background: var( --ink-raised );
	color: var( --ink-text );
}

/* Help text under the optional textarea. */
.ftb-form__card.ftb-form__card .wsf-field-help {
	font-size: var( --font-size-small, 16px );
	line-height: 1.55;
	color: var( --ink-text-muted );
	margin: 8px 0 0;
}

/* --- Consent checkbox ---
   Separated by a rule because it is doing legal work, not collecting
   information — it should not read as a seventh data field. */
.ftb-form__card.ftb-form__card .wsf-field-wrapper:has( input[type="checkbox"] ) {
	padding-top: 20px;
	border-top: 1px solid var( --ink-border );
}

.ftb-form__card.ftb-form__card input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0 12px 0 0;
	background: var( --ink-sunken );
	border: 1px solid var( --ink-border-strong );
	border-radius: var( --radius-xs, 3px );
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	transition:
		border-color 160ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		background 160ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-form__card.ftb-form__card input[type="checkbox"]:hover {
	border-color: #5A544A;
}

.ftb-form__card.ftb-form__card input[type="checkbox"]:checked {
	background: var( --brass-light );
	border-color: var( --brass-light );
}

/* Tick drawn with a border, not a glyph: a character would inherit the body
   font and shift between platforms. */
.ftb-form__card.ftb-form__card input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	/* Geometry follows the 20px box: a 5x10 tick centred leaves 6px of field. */
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var( --ink );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.ftb-form__card.ftb-form__card input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.28 );
}

.ftb-form__card.ftb-form__card input[type="checkbox"] + label,
.ftb-form__card.ftb-form__card .wsf-checkbox label {
	display: inline-block;
	font-size: var( --font-size-small, 16px );
	line-height: 1.55;
	color: var( --ink-text-secondary );
	margin: 0;
	cursor: pointer;
	/* 48px tap target without moving the box itself. */
	padding: 12px 0;
	max-width: calc( 100% - 40px );
	vertical-align: middle;
}

/* --- Submit — the page's single brass element --------------------------- */

.ftb-form__card.ftb-form__card .wsf-button,
.ftb-form__card.ftb-form__card button[type="submit"],
.ftb-form__card.ftb-form__card input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 62px;
	font-family: var( --font-primary );
	font-size: var( --font-size-button, 17px );
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var( --ink );
	background: var( --brass );
	border: 1px solid var( --brass );
	border-radius: var( --radius-sm, 4px );
	padding: 18px 28px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		background 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		border-color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		transform 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-form__card.ftb-form__card .wsf-button:hover,
.ftb-form__card.ftb-form__card button[type="submit"]:hover {
	background: var( --brass-light );
	border-color: var( --brass-light );
	transform: translateY( -1px );
}

/* A plumb bob settles — press moves down and deepens, it does not spring. */
.ftb-form__card.ftb-form__card .wsf-button:active,
.ftb-form__card.ftb-form__card button[type="submit"]:active {
	background: var( --brass-deep );
	border-color: var( --brass-deep );
	transform: translateY( 1px );
}

.ftb-form__card.ftb-form__card .wsf-button:focus-visible,
.ftb-form__card.ftb-form__card button[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.4 );
}

.ftb-form__card.ftb-form__card .wsf-button[disabled],
.ftb-form__card.ftb-form__card button[type="submit"][disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* --- Validation ---
   Muted error, never default web red — a bright red would be the loudest
   thing on an Ink page and would out-shout the brass. */

.ftb-form__card.ftb-form__card .wsf-invalid input,
.ftb-form__card.ftb-form__card .wsf-invalid select,
.ftb-form__card.ftb-form__card .wsf-invalid textarea,
.ftb-form__card.ftb-form__card input.wsf-invalid,
.ftb-form__card.ftb-form__card select.wsf-invalid,
.ftb-form__card.ftb-form__card textarea.wsf-invalid,
.ftb-form__card.ftb-form__card input[aria-invalid="true"],
.ftb-form__card.ftb-form__card select[aria-invalid="true"],
.ftb-form__card.ftb-form__card textarea[aria-invalid="true"] {
	border-color: var( --error, #9E3B2E );
	background: rgba( 158, 59, 46, 0.06 );
}

/* NO `display` here, deliberately. WS Form keeps the feedback node in the DOM
   and hides it until the field actually fails; forcing display:block makes
   "This field is required." appear on page load, before anyone has typed. That
   was a real bug, caught in the browser. Style it, never reveal it. */
.ftb-form__card.ftb-form__card .wsf-invalid-feedback,
.ftb-form__card.ftb-form__card .invalid-feedback {
	font-size: var( --font-size-small, 16px );
	line-height: 1.5;
	color: #D9756A;
	margin: 8px 0 0;
}

/* WS Form's own success message, in place of the form. */
.ftb-form__card.ftb-form__card .wsf-form-message,
.ftb-form__card.ftb-form__card .wsf-message {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	border-left: 2px solid var( --brass-light );
	padding: 4px 0 4px 20px;
	margin: 0;
}

/* --- Steps ---------------------------------------------------------------- */

.ftb-steps {
	border-bottom: 1px solid var( --ink-border );
	background: var( --ink-sunken );
}

.ftb-steps__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 6vw, 88px ) var( --page-gutter, 20px );
}

.ftb-steps__list {
	list-style: none;
	margin: clamp( 28px, 4vw, 44px ) 0 0;
	padding: 0;
	display: grid;
	gap: 0 clamp( 28px, 4vw, 56px );
	border-top: 1px solid var( --ink-border-strong );
}

.ftb-steps__item {
	padding: clamp( 24px, 3vw, 32px ) 0;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-steps__num {
	display: block;
	font-family: var( --font-mono );
	font-size: clamp( 26px, 3.2vw, 38px );
	line-height: 1;
	color: var( --ink-text-muted );
	margin-bottom: 18px;
}

.ftb-steps__text {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.6;
	color: var( --ink-text );
	margin: 0;
	max-width: 34ch;
}

/* --- Objections ----------------------------------------------------------- */

.ftb-objections {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-objections__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 6vw, 88px ) var( --page-gutter, 20px );
	display: grid;
	gap: clamp( 28px, 4vw, 64px );
	align-items: start;
}

.ftb-objections__intro {
	max-width: 34ch;
}

.ftb-objections__headline {
	font-size: clamp( 24px, 2.8vw, 32px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 18px 0 0;
}

.ftb-objections__list {
	display: grid;
	gap: 0;
	border-top: 1px solid var( --ink-border-strong );
	max-width: 70ch;
}

.ftb-objections__item {
	padding: clamp( 22px, 2.8vw, 30px ) 0;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-objections__q {
	font-size: var( --font-size-h4, 21px );
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 10px;
}

.ftb-objections__a {
	font-size: var( --font-size-body, 19px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	margin: 0;
}

/* --- Close line ----------------------------------------------------------- */

.ftb-closeline {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-closeline__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 44px, 5vw, 72px ) var( --page-gutter, 20px );
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.ftb-closeline__text {
	font-size: clamp( 21px, 2.4vw, 26px );
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
	margin: 0;
	max-width: 38ch;
}

/* A plain link, not a button: a second button would compete with the form
   rather than feed it, and would break the one-brass-per-viewport budget. */
.ftb-closeline__link {
	font-size: 18px;
	color: var( --ink-text-secondary );
	text-decoration: none;
	border-bottom: 1px solid var( --ink-border-strong );
	padding-bottom: 2px;
	transition:
		color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		border-color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-closeline__link:hover,
.ftb-closeline__link:focus-visible {
	color: var( --ink-text );
	border-color: var( --brass-light );
}

/* --- Wider viewports ------------------------------------------------------ */

@media ( min-width: 768px ) {

	.ftb-steps__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.ftb-form__card {
		padding: clamp( 28px, 3.2vw, 40px );
	}
}

@media ( min-width: 900px ) {

	.ftb-page-hero__inner {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		gap: clamp( 24px, 4vw, 56px );
		align-items: center;
	}

	/* The rule must be a FLEX container, not a block: .ftb-plumb-rule--stretch
	   is `height:auto; align-self:stretch`, which needs a flex/grid parent to
	   resolve against. As a block child it collapsed to 0px high and only the
	   absolutely-positioned bob rendered — a brass diamond floating with no
	   line under it. */
	.ftb-page-hero__rule {
		display: flex;
		align-items: stretch;
		align-self: stretch;
		min-height: 220px;
	}

	/* The frame needs room to read as a photograph rather than a texture. */
	.ftb-page-hero--image .ftb-page-hero__scrim {
		background: linear-gradient(
			to right,
			rgba( 19, 18, 16, 0.94 ) 0%,
			rgba( 19, 18, 16, 0.80 ) 50%,
			rgba( 19, 18, 16, 0.45 ) 100%
		);
	}

	.ftb-form__inner,
	.ftb-objections__inner {
		grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	}
}

/* --- WS Form overrides that need to beat the plugin's own rules -----------
   WS Form enqueues five stylesheets AFTER sections.css, several with their own
   compound selectors, so a few declarations lose even at .ftb-form__card twice.
   Everything here was verified in the browser rather than guessed: each rule
   below fixes a measured defect, not a suspected one. */

/* The submit sits in a grid tile, and the plugin sets its width. Measured at
   168px inside a 442px tile before this. */
.ftb-form__card.ftb-form__card .wsf-field-wrapper .wsf-button,
.ftb-form__card.ftb-form__card button.wsf-button,
.ftb-form__card.ftb-form__card button[type="submit"] {
	width: 100%;
	min-width: 100%;
	/* Ink on brass — the plugin's button colour ships white, which drops the
	   contrast on a mid-tone brass fill well below AA. */
	color: var( --ink );
	font-size: 18px;
	font-weight: 600;
}

.ftb-form__card.ftb-form__card .wsf-button-full {
	width: 100%;
}

/* The plugin sets its own input height; ours was being ignored (min-height
   computed to 0). 52px keeps the 48px tap-target rule with room to spare. */
.ftb-form__card.ftb-form__card input.wsf-field[type="text"],
.ftb-form__card.ftb-form__card input.wsf-field[type="email"],
.ftb-form__card.ftb-form__card select.wsf-field,
.ftb-form__card.ftb-form__card textarea.wsf-field {
	min-height: 52px;
	background-color: var( --ink-sunken );
	border: 1px solid var( --ink-border-strong );
	color: var( --ink-text );
	font-size: var( --font-size-body, 19px );
}

.ftb-form__card.ftb-form__card textarea.wsf-field {
	min-height: 132px;
}

.ftb-form__card.ftb-form__card input.wsf-field:focus,
.ftb-form__card.ftb-form__card select.wsf-field:focus,
.ftb-form__card.ftb-form__card textarea.wsf-field:focus {
	border-color: var( --brass-light );
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.28 );
	background-color: var( --ink-base );
}

/* The required marker ships as .wsf-text-danger at #BB0000 — a pure red that
   becomes the loudest thing on an Ink page and out-shouts the brass, for what
   is only a repetition of what the label already says. */
.ftb-form__card.ftb-form__card .wsf-text-danger,
.ftb-form__card.ftb-form__card .wsf-required-wrapper strong {
	color: var( --ink-text-muted );
	font-weight: 400;
}

/* Consent checkbox: the plugin's own sizing won (measured 16px wide, 22px
   tall — not square, and under the tap-target minimum). */
.ftb-form__card.ftb-form__card input.wsf-field[type="checkbox"],
.ftb-form__card.ftb-form__card input[type="checkbox"].wsf-field {
	width: 24px;
	min-width: 24px;
	height: 24px;
	min-height: 24px;
	flex: none;
	margin: 0 12px 0 0;
}

/* Its label is a .wsf-label like every other, so the generic label rule was
   giving it a block display and an 8px bottom margin — which is right for a
   field label above an input, wrong for text beside a checkbox. */
.ftb-form__card.ftb-form__card .wsf-checkbox label,
.ftb-form__card.ftb-form__card label:has( input[type="checkbox"] ) {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	font-size: var( --font-size-small, 16px );
	line-height: 1.55;
	color: var( --ink-text-secondary );
	cursor: pointer;
}

/* WS Form's own button rule is `.wsf-form button.wsf-button.wsf-button-primary`
   — (0,3,1), which outranks the doubled scope class above and was rendering
   white text on brass (a real contrast failure, not a nit). Match its shape
   rather than reach for !important. */
.ftb-form__card.ftb-form__card .wsf-form button.wsf-button.wsf-button-primary,
.ftb-form__card.ftb-form__card .wsf-form button.wsf-button {
	color: var( --ink );
	background: var( --brass );
	border-color: var( --brass );
}

.ftb-form__card.ftb-form__card .wsf-form button.wsf-button.wsf-button-primary:hover {
	color: var( --ink );
	background: var( --brass-light );
	border-color: var( --brass-light );
}

.ftb-form__card.ftb-form__card .wsf-form button.wsf-button.wsf-button-primary:active {
	background: var( --brass-deep );
	border-color: var( --brass-deep );
}

/* WS Form themes its buttons through its OWN custom properties, injected by
   its Styles system at a precedence no ordinary selector beats. Setting
   `color` therefore never wins — the variable has to be re-pointed instead.
   Verified in the browser: --wsf-field-button-primary-color shipped #ffffff,
   giving white-on-brass at 3.58:1, below AA. Ink on brass is 6.9:1.
   Set the variables, don't fight the cascade. */
/* Set on the BUTTON, not just the form: WS Form's style layer re-declares
   these on the button element itself via :where([data-wsf-style-id]), so a
   value inherited from the form is overwritten locally. */
.ftb-form__card.ftb-form__card .wsf-form,
.ftb-form__card.ftb-form__card .wsf-form button.wsf-button,
.ftb-form__card.ftb-form__card .wsf-form button[type="submit"] {
	--wsf-field-button-primary-color: var( --ink );
	--wsf-field-button-primary-bg-color: var( --brass );
	--wsf-field-button-primary-border-color: var( --brass );
	--wsf-field-button-color: var( --ink );
	--wsf-field-button-bg-color: var( --brass );
	--wsf-field-button-border-color: var( --brass );
}

/* --- Final WS Form overrides ---------------------------------------------
   WS Form injects a per-style-id inline <style> block AFTER every enqueued
   sheet, re-declaring its button/field custom properties on the element. No
   author selector can outrank a later declaration of the same specificity, and
   four rounds of specificity-raising confirmed it. These few properties are
   therefore forced — deliberately, and only these. Verified in the browser:
   white-on-brass measured 3.58:1 (below AA); Ink-on-brass is 6.9:1. */

.ftb-form__card.ftb-form__card .wsf-form button.wsf-button,
.ftb-form__card.ftb-form__card .wsf-form button[type="submit"] {
	color: var( --ink ) !important;
	background-color: var( --brass ) !important;
	border-color: var( --brass ) !important;
}

.ftb-form__card.ftb-form__card .wsf-form button.wsf-button:hover,
.ftb-form__card.ftb-form__card .wsf-form button[type="submit"]:hover {
	background-color: var( --brass-light ) !important;
	border-color: var( --brass-light ) !important;
}

.ftb-form__card.ftb-form__card .wsf-form button.wsf-button:active,
.ftb-form__card.ftb-form__card .wsf-form button[type="submit"]:active {
	background-color: var( --brass-deep ) !important;
	border-color: var( --brass-deep ) !important;
}

/* Required marker in brass rather than the plugin's #BB0000. Red on an Ink
   page becomes the loudest element on screen and out-shouts the actual CTA,
   for what is only a repetition of what the label already says. Brass keeps
   it legible and on-palette — and as a hairline-weight mark it doesn't spend
   the page's single "brass element" budget the way a filled shape would. */
.ftb-form__card.ftb-form__card .wsf-text-danger,
.ftb-form__card.ftb-form__card .wsf-required-wrapper strong {
	color: var( --brass-light ) !important;
	font-weight: 400;
}

/* Select arrow: the plugin paints its own indicator, so ours was drawn behind
   theirs (or not at all). Force the field to carry the brand chevron. */
.ftb-form__card.ftb-form__card select.wsf-field {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-position: right 14px center !important;
	background-size: 20px 20px !important;
	padding-right: 48px !important;
	cursor: pointer;
}

.ftb-form__card.ftb-form__card select.wsf-field:focus {
}

/* Consent checkbox — the plugin's own control ships as a small pale box that
   reads as unstyled next to everything else on the card. */
.ftb-form__card.ftb-form__card input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	/* 20px, not 24: against a 16px label the cap height is only ~12px, so a
	   24px box overhangs the letterforms by 6px top and bottom and reads as
	   floating regardless of how it is centred. */
	width: 20px !important;
	min-width: 20px !important;
	height: 20px !important;
	min-height: 20px !important;
	flex: none !important;
	margin: 2px 12px 0 0 !important;
	padding: 0 !important;
	background-color: var( --ink-sunken ) !important;
	background-image: none !important;
	border: 1px solid var( --ink-border-strong ) !important;
	border-radius: var( --radius-xs, 3px ) !important;
	cursor: pointer;
	/* !important is load-bearing: ws-form-public-checkbox.min.css sets
	   `position:absolute` on `.wsf-form input[type=checkbox].wsf-field`, which
	   outranks our two-class selector on specificity. Without this the box is
	   pulled out of flow and lands on top of the label text. */
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: inline-block;
	vertical-align: top;
	box-shadow: none !important;
}

/* The row itself: WS Form emits a bare <div> wrapper, so align the box against
   the FIRST LINE of the label rather than the block's centre — with a two-line
   label, centring floats the box into the gap between the lines. */
.ftb-form__card.ftb-form__card [data-row-checkbox] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ftb-form__card.ftb-form__card [data-row-checkbox] > input[type="checkbox"] {
	/* Align to the CAP HEIGHT of the first line, not the line box. A line box
	   carries half-leading above and below the glyphs (here 4.4px each on a
	   16px/1.55 label), so centring against it puts the control visibly high —
	   the eye reads the letterforms, not the invisible leading.
	     offset = half-leading + (ascent - capHeight) + capHeight/2 - 20/2
	            = 4.4 + 4 + 6 - 10 = 4.4px
	   Expressed in em so it tracks the label's own type scale. */
	margin: 0.275em 0 0 0 !important;
}

.ftb-form__card.ftb-form__card [data-row-checkbox] > .wsf-label {
	/* WS Form indents the label to clear its absolutely-positioned box. The row
	   is flex now, so that indent would stack on top of the gap — 40px instead
	   of 12. !important because their selector is more specific than ours. */
	margin: 0 !important;
	/* padding-top too, not just -left: WS Form pads the label down by 12px to
	   clear its own absolutely-positioned box, which pushes the text below the
	   control and reads as vertically centred. Zero it and let flex-start on
	   the row do the aligning. */
	padding: 0 !important;
	cursor: pointer;
}

.ftb-form__card.ftb-form__card input[type="checkbox"]:hover {
	border-color: #5A544A !important;
}

.ftb-form__card.ftb-form__card input[type="checkbox"]:checked {
	background-color: var( --brass-light ) !important;
	border-color: var( --brass-light ) !important;
}

/* Tick drawn as a rotated border, not a glyph — a character would inherit the
   body font and shift between platforms. */
.ftb-form__card.ftb-form__card input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	/* Geometry follows the 20px box: a 5x10 tick centred leaves 6px of field. */
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var( --ink );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.ftb-form__card.ftb-form__card input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.28 ) !important;
}

/* WS Form renders its OWN arrow as a real element — <span class="wsf-select-arrow">,
   a 6px black CSS triangle — sitting next to the select. Our background chevron
   was therefore the SECOND arrow, not a replacement for the first. Hide theirs
   and keep ours: a filled triangle is the wrong language for a system whose
   icons are all 2px round-capped strokes, and black-on-Ink is invisible anyway. */
/* Both !important, so the tie breaks on specificity — and WS Form's selector
   (.wsf-form select.wsf-field:not([multiple]):not([size])...) outranks ours, so
   `display:none` never wins. Restyle their element into the brand chevron
   instead of fighting it, and drop our background image so there is one arrow. */
.ftb-form__card.ftb-form__card .wsf-select-arrow {
	width: 11px !important;
	height: 11px !important;
	border: 0 !important;
	border-right: 2px solid var( --ink-text-muted ) !important;
	border-bottom: 2px solid var( --ink-text-muted ) !important;
	border-radius: 1px !important;
	transform: rotate( 45deg ) !important;
	background: none !important;
	pointer-events: none;
	position: absolute !important;
	right: 20px !important;
	/* Anchored to the BOTTOM, not to 50%: the wrapper this sits in also holds
	   the label, so "half the wrapper" is ~19px above the middle of the select.
	   The select is ~53px tall and always last in the wrapper, so measuring up
	   from the bottom is stable whether the label wraps to one line or two.
	
	   The value is 23px, not 21px, for two compounding reasons — both measured:
	   1. Rotating an 11px square 45deg gives a 15.56px (11·√2) bounding box, so
	      centring the DECLARED box leaves the rendered box ~2.8px low.
	   2. The visible stroke is only the bottom-right corner of that square, so
	      the chevron's OPTICAL centre sits a further ~2.6px below its box
	      centre. Geometric centring therefore still looks low to the eye.
	   Optical alignment beats arithmetic alignment. */
	top: auto !important;
	bottom: 23px !important;
	transition: border-color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

/* The wrapper has to establish a containing block for the absolute arrow.
   It also holds the label, so position it rather than the select. */
.ftb-form__card.ftb-form__card .wsf-field-wrapper:has( select ) {
	position: relative;
}

.ftb-form__card.ftb-form__card .wsf-field-wrapper:has( select:focus ) .wsf-select-arrow {
	border-right-color: var( --brass-light ) !important;
	border-bottom-color: var( --brass-light ) !important;
}

/* Ours would be the second arrow — theirs cannot be hidden, so remove ours. */
.ftb-form__card.ftb-form__card select.wsf-field {
	background-image: none !important;
}

/* --- Focus ring: kill the inherited FlowCraft blue ------------------------
   global.css:1838 still carries FlowCraft's `box-shadow: 0 0 0 3px
   rgba(0,130,182,.18) !important` on WS Form fields — that is #0082B6, the
   FlowCraft primary, on a brand that inherits nothing visual from FlowCraft.
   With !important on both sides the tie breaks on specificity, so match their
   shape (.wsf-form + element + attribute) and add the scope class.

   Not fixed in global.css itself because that file is entirely FlowCraft and
   is slated for deletion once nothing references it — editing it would just
   deepen the dependency. */

.ftb-form__card.ftb-form__card .wsf-form input[type="text"]:focus,
.ftb-form__card.ftb-form__card .wsf-form input[type="email"]:focus,
.ftb-form__card.ftb-form__card .wsf-form input[type="tel"]:focus,
.ftb-form__card.ftb-form__card .wsf-form input[type="url"]:focus,
.ftb-form__card.ftb-form__card .wsf-form input[type="number"]:focus,
.ftb-form__card.ftb-form__card .wsf-form select:focus,
.ftb-form__card.ftb-form__card .wsf-form textarea:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 201, 164, 95, 0.28 ) !important;
	border-color: var( --brass-light ) !important;
	background-color: var( --ink-base ) !important;
}

/* ==========================================================================
   ABOUT PAGE — bio hero, prose, photo statements, timeline, credentials,
   list block, split CTA. Mobile-first.
   Built from the approved Claude Design artifact (Sep 2026).
   ========================================================================== */

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

.ftb-bio-hero {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-bio-hero__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 40px, 7vw, 96px ) var( --page-gutter, 20px ) clamp( 40px, 7vw, 88px );
	display: grid;
	gap: clamp( 28px, 5vw, 72px );
	align-items: center;
}

.ftb-bio-hero__title {
	/* Larger than the interior h1 but still short of the homepage display —
	   this page is a destination, not a restart. */
	font-size: clamp( 32px, 5.4vw, 60px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
	margin: 22px 0 0;
}

.ftb-bio-hero__sub {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	max-width: 52ch;
	margin: 26px 0 0;
}

.ftb-bio-hero__meta {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin: 26px 0 0;
}

.ftb-bio-hero__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border: 1px solid var( --ink-border );
	border-radius: var( --radius-md, 6px );
	overflow: hidden;
	background: var( --ink-raised );
}

.ftb-bio-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Prose ---------------------------------------------------------------- */

.ftb-prose {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-prose__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter, 20px );
	display: grid;
	gap: clamp( 28px, 5vw, 64px );
	align-items: start;
}

.ftb-prose__headline {
	font-size: clamp( 26px, 3.4vw, 40px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
	margin: 18px 0 0;
	max-width: 22ch;
}

.ftb-prose__body {
	max-width: 66ch;
	display: grid;
	gap: 22px;
}

/* The intro column is short and the body column is long, so on desktop the
   left track ended with ~280px of dead space under it while the eye had
   already moved on. Sticking the intro keeps the eyebrow and headline beside
   the paragraph being read, which is the point of the two-column split.
   Confined to pointer devices with room for it. */
@media ( min-width: 900px ) {

	.ftb-prose__intro {
		position: sticky;
		top: 108px;
	}
}

.ftb-prose__p {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.75;
	color: var( --ink-text-secondary );
	margin: 0;
}

/* A single short paragraph at the end of a prose block is a closing statement,
   not another body paragraph — "Six layers — one quarter — your business."
   reads as a caption when set at body weight and colour. */
.ftb-prose__p--close {
	font-family: var( --font-mono );
	font-size: clamp( 15px, 1.5vw, 17px );
	letter-spacing: 0.04em;
	line-height: 1.6;
	color: var( --brass-light, #C9A45F );
	margin-top: 6px;
}

/* --- Photo statement ------------------------------------------------------ */

.ftb-photo-statement {
	position: relative;
	border-bottom: 1px solid var( --ink-border );
	display: grid;
	overflow: hidden;
}

.ftb-photo-statement--tall {
	min-height: min( 72vh, 620px );
}

.ftb-photo-statement--short {
	min-height: min( 52vh, 440px );
}

.ftb-photo-statement__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Dense only at the foot, where the text actually sits — a full-height scrim
   would flatten the photograph for no reason. */
.ftb-photo-statement__scrim {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(
		to bottom,
		rgba( 19, 18, 16, 0.25 ) 0%,
		rgba( 19, 18, 16, 0.60 ) 55%,
		rgba( 19, 18, 16, 0.95 ) 100%
	);
}

.ftb-photo-statement__inner {
	width: 100%;
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 40px, 7vw, 88px ) var( --page-gutter, 20px ) clamp( 32px, 5vw, 64px );
}

.ftb-photo-statement__headline {
	font-size: clamp( 23px, 3.4vw, 42px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.22;
	margin: 0;
	max-width: 26ch;
}

.ftb-photo-statement__sub {
	font-size: clamp( 18px, 1.9vw, 20px );
	line-height: 1.65;
	color: var( --ink-text-secondary );
	margin: 16px 0 0;
	max-width: 46ch;
}

.ftb-photo-statement--short .ftb-photo-statement__headline {
	font-size: clamp( 20px, 2.4vw, 28px );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.4;
	max-width: 38ch;
}

/* --- Timeline ------------------------------------------------------------- */

.ftb-timeline {
	border-bottom: 1px solid var( --ink-border );
	background: var( --ink-sunken );
}

.ftb-timeline__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter, 20px );
}

.ftb-timeline__headline {
	font-size: clamp( 26px, 3.4vw, 40px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
	margin: 18px 0 0;
	max-width: 44ch;
}

.ftb-timeline__list {
	list-style: none;
	margin: clamp( 32px, 5vw, 52px ) 0 0;
	padding: 0;
	border-top: 1px solid var( --ink-border-strong );
}

.ftb-timeline__item {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	align-items: start;
}

.ftb-timeline__years {
	font-family: var( --font-mono );
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var( --ink-text-muted );
	padding: clamp( 18px, 3vw, 26px ) 0 0;
}

.ftb-timeline__item--lead .ftb-timeline__years {
	font-size: clamp( 19px, 2.4vw, 26px );
	color: var( --brass-light );
}

/* The rail IS the plumb line — structure, not decoration. */
.ftb-timeline__body {
	position: relative;
	border-left: 1px solid var( --ink-border-strong );
	border-bottom: 1px solid var( --ink-border );
	padding: 10px 0 clamp( 20px, 3vw, 28px ) clamp( 20px, 3.4vw, 40px );
}

.ftb-timeline__node {
	position: absolute;
	left: -5px;
	top: 18px;
	width: 9px;
	height: 9px;
	background: var( --ink-border-strong );
	transform: rotate( 45deg );
}

.ftb-timeline__item--lead .ftb-timeline__node {
	left: -7px;
	width: 13px;
	height: 13px;
	background: var( --brass );
}

.ftb-timeline__where {
	display: block;
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin-bottom: 10px;
}

.ftb-timeline__what {
	font-size: clamp( 18px, 1.9vw, 20px );
	line-height: 1.55;
	color: var( --ink-text );
	margin: 0;
	max-width: 56ch;
}

.ftb-timeline__item--lead .ftb-timeline__what {
	font-size: clamp( 20px, 2.4vw, 26px );
	font-weight: 600;
}

.ftb-timeline__foot {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
}

/* The bob closes the rail, same as the hero's plumb rule. */
.ftb-timeline__bob {
	display: block;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: var( --brass );
	transform: rotate( 45deg );
}

/* --- Credentials ---------------------------------------------------------- */

.ftb-credentials {
	border-bottom: 1px solid var( --ink-border );
	background: var( --ink-sunken );
}

.ftb-credentials__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter, 20px );
}

.ftb-credentials__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: clamp( 28px, 4.5vw, 48px );
}

.ftb-credentials__intro {
	max-width: 52ch;
}

.ftb-credentials__headline {
	font-size: clamp( 26px, 3.4vw, 40px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
	margin: 18px 0 0;
}

.ftb-credentials__aside {
	font-size: 18px;
	line-height: 1.6;
	color: var( --ink-text-muted );
	max-width: 34ch;
	margin: 0;
}

.ftb-credentials__grid {
	display: grid;
	gap: 16px;
}

.ftb-credential {
	background: var( --ink-raised );
	border: 1px solid var( --ink-border );
	border-radius: var( --radius-lg, 10px );
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* One tile carries the weight — ISW, because the product is a facilitated
   cohort and a teaching credential is the one no competitor has. */
.ftb-credential--lead {
	background: var( --ink-overlay );
}

.ftb-credential__glyph {
	display: block;
	width: 48px;
	height: 48px;
	color: var( --ink-text );
}

.ftb-credential--lead .ftb-credential__glyph {
	color: var( --brass-light );
}

.ftb-credential__glyph svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ftb-credential__name {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.ftb-credential__kind {
	display: block;
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin-top: 8px;
}

.ftb-credential__line {
	font-size: 18px;
	line-height: 1.6;
	color: var( --ink-text-secondary );
	margin: 14px 0 0;
}

/* Real partner badges live here, apart from the drawn glyphs — two visual
   languages in one grid would read as a mistake. */
.ftb-credentials__strip {
	margin-top: clamp( 28px, 4vw, 44px );
	padding-top: 26px;
	border-top: 1px solid var( --ink-border );
	/* Column, not a row: each badge is now a card carrying its own tier
	   wording, too tall to sit inline beside a label. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.ftb-credentials__strip-label {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}

.ftb-credentials__badges {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: stretch;
}

/* The badge card — a frame for the partner's own artwork. The mark is never
   recoloured or redrawn (both programs' guidelines prohibit it); the frame
   supplies our surface, type and spacing so it sits correctly on Ink. */
.ftb-credentials__badge-card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 20px 26px 20px 20px;
	background: var( --ink-raised );
	border: 1px solid var( --ink-border );
	border-radius: var( --radius-sm, 4px );
	min-height: 96px;
}

.ftb-credentials__badge-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ftb-credentials__badge-tier {
	font-family: var( --font-mono );
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text );
	line-height: 1.3;
}

.ftb-credentials__badge-holder {
	font-size: 16px;
	line-height: 1.4;
	color: var( --ink-text-secondary );
}

/* Below ~560px the two-column card would crush the wordmark. */
@media ( max-width: 560px ) {

	.ftb-credentials__badges {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
	}

	.ftb-credentials__badge-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

}

.ftb-credentials__badge {
	max-height: 56px;
	width: auto;
	display: block;
}

.ftb-credentials__strip-note {
	font-size: var( --font-size-small, 16px );
	line-height: 1.6;
	color: var( --ink-text-muted );
	margin: 0;
	max-width: 40ch;
}

/* --- List block ----------------------------------------------------------- */

.ftb-listblock {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-listblock__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter, 20px );
	display: grid;
	gap: clamp( 28px, 5vw, 64px );
	align-items: start;
}

.ftb-listblock__headline {
	font-size: clamp( 26px, 3.4vw, 40px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
	margin: 18px 0 0;
	max-width: 20ch;
}

.ftb-listblock__sub {
	font-size: var( --font-size-body, 19px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	margin: 18px 0 0;
	max-width: 44ch;
}

.ftb-listblock__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var( --ink-border-strong );
}

.ftb-listblock__item {
	padding: clamp( 20px, 3vw, 28px ) 0;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-listblock__name {
	font-size: clamp( 21px, 2.3vw, 26px );
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 10px;
}

.ftb-listblock__what {
	font-size: 18px;
	line-height: 1.65;
	color: var( --ink-text-secondary );
	margin: 0;
	max-width: 60ch;
}

/* --- Split CTA ------------------------------------------------------------ */

.ftb-split-cta {
	background: var( --ink-raised );
}

.ftb-split-cta__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 104px ) var( --page-gutter, 20px );
	display: grid;
	gap: clamp( 28px, 5vw, 64px );
	align-items: center;
}

.ftb-split-cta__headline {
	font-size: clamp( 26px, 3.6vw, 44px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0;
	max-width: 20ch;
}

.ftb-split-cta__action {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.ftb-split-cta__meta {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}

/* --- Wider viewports ------------------------------------------------------ */

@media ( min-width: 640px ) {

	.ftb-credentials__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* Years beside the rail rather than stacked above it. */
	.ftb-timeline__item,
	.ftb-timeline__foot {
		grid-template-columns: clamp( 96px, 13vw, 168px ) minmax( 0, 1fr );
	}

	.ftb-timeline__years {
		padding-right: 16px;
	}

	.ftb-timeline__body {
		padding-top: clamp( 18px, 2.8vw, 26px );
	}

	.ftb-timeline__node {
		top: clamp( 26px, 3.4vw, 34px );
	}

	.ftb-timeline__foot > .ftb-timeline__bob {
		grid-column: 2;
	}
}

@media ( min-width: 900px ) {

	.ftb-bio-hero__inner,
	.ftb-prose__inner,
	.ftb-listblock__inner,
	.ftb-split-cta__inner {
		grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	}

	.ftb-credentials__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Partner logos: both vendors' wordmarks are near-black (#283343 Asana,
   #030712 Softr) and vanish on Ink. Recolouring them is the one thing their
   brand guidelines prohibit outright, so give them a light plate to sit on
   instead — the standard, compliant treatment. If a real issued badge is
   uploaded it renders WITHOUT a plate, because issued badges are designed to
   work on any background. */
/* Both wordmarks are near-black and invisible on Ink. The compliant fix is a
   light plate to sit them on — NOT recolouring the artwork. Fixed tile so the
   two marks share a baseline despite different aspect ratios. */
.ftb-credentials__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --paper );
	border-radius: var( --radius-xs, 3px );
	padding: 10px 14px;
	width: 132px;
	height: 56px;
	flex: none;
}

.ftb-credentials__plate .ftb-credentials__badge {
	/* Height comes from the inline style per logo — the two marks have very
	   different cap heights and need individual optical sizing. */
	max-width: 100%;
	object-fit: contain;
	display: block;
}

/* Credential tiles: brass on hover.
   The one-brass-element-per-viewport budget is about brass never becoming a
   THEME — and six static brass glyphs would be exactly that. A hover state
   isn't: nothing is brass until the reader points at something, so the resting
   page still spends its brass on ISW alone. It also makes the grid feel
   inspectable rather than decorative, which is the section's whole argument. */
.ftb-credential {
	transition:
		border-color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		background 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) ),
		transform 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-credential:hover {
	border-color: var( --brass-hairline, #4A3C1E );
	background: var( --ink-overlay );
	/* A plumb bob settles — 2px, no spring. */
	transform: translateY( -2px );
}

.ftb-credential__glyph {
	transition: color 180ms var( --ease-settle, cubic-bezier( .2, 0, 0, 1 ) );
}

.ftb-credential:hover .ftb-credential__glyph {
	color: var( --brass-light );
}

/* The lead tile is already brass and already lifted, so it only deepens. */
.ftb-credential--lead:hover {
	border-color: var( --brass );
}

@media ( prefers-reduced-motion: reduce ) {
	.ftb-credential:hover {
		transform: none;
	}
}

/* ==========================================================================
   PROGRAM PAGE — stat grid, week table, case block. Mobile-first.
   Built from the approved Claude Design artifact (Sep 2026).
   ========================================================================== */

/* --- Stat grid ------------------------------------------------------------ */

.ftb-statgrid {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-statgrid__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter, 20px );
}

.ftb-statgrid__headline {
	font-size: clamp( 28px, 3.4vw, 42px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 20px 0 0;
	max-width: 22ch;
}

.ftb-statgrid__sub {
	font-size: clamp( 19px, 2vw, 21px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	max-width: 52ch;
	margin: 22px 0 0;
}

/* 1px gaps over the border colour: the tiles read as one ruled block rather
   than eight floating cards, which is what keeps them scannable. */
.ftb-statgrid__grid {
	margin-top: clamp( 32px, 5vw, 52px );
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 1px;
	background: var( --ink-border );
	border: 1px solid var( --ink-border );
}

/* Tiles are equal-height and the figure sits on a fixed two-line box: the
   labels are a mix of one- and two-line strings ("~3 hrs" vs "Facilitated
   forum"), and letting each figure size itself leaves the captions on ragged
   baselines across the row. Reserving the space aligns every caption. */
.ftb-stat {
	background: var( --ink-sunken );
	padding: clamp( 22px, 3vw, 30px );
	display: flex;
	flex-direction: column;
}

.ftb-stat__figure {
	font-size: clamp( 26px, 3vw, 34px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var( --ink-text );
}

.ftb-stat--lead .ftb-stat__figure {
	color: var( --brass-light );
}

.ftb-stat__line {
	font-size: 16px;
	line-height: 1.6;
	color: var( --ink-text-muted );
	margin: 10px 0 0;
}

/* Two lines of the figure's own line-height. Only from the width at which the
   grid actually goes multi-column -- stacked on mobile there is no row to
   align to, and the reserved space would just be a gap. */
@media ( min-width: 560px ) {
	.ftb-stat__figure {
		min-height: calc( 2 * 1.1em );
	}
}

.ftb-statgrid__foot {
	font-size: clamp( 17px, 1.8vw, 19px );
	line-height: 1.7;
	color: var( --ink-text-secondary );
	max-width: 60ch;
	margin: clamp( 24px, 3vw, 32px ) 0 0;
	padding-left: 16px;
	border-left: 2px solid var( --brass-hairline, var( --ink-border-strong ) );
}

/* --- Week table ----------------------------------------------------------- */

.ftb-weeks {
	border-bottom: 1px solid var( --ink-border );
}

.ftb-weeks__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter, 20px );
}

.ftb-weeks__headline {
	font-size: clamp( 28px, 3.4vw, 42px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 20px 0 0;
	max-width: 26ch;
}

.ftb-weeks__list {
	list-style: none;
	margin: clamp( 32px, 5vw, 52px ) 0 0;
	padding: 0;
	border-top: 1px solid var( --ink-border-strong );
}

.ftb-weeks__row {
	display: grid;
	gap: 8px clamp( 24px, 4vw, 56px );
	padding: clamp( 22px, 3.2vw, 32px ) 0;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-weeks__num {
	display: block;
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}

/* A paced row is one that earned extra weeks; brass marks the two that carry
   the "why this order" argument. */
.ftb-weeks__row--paced .ftb-weeks__num {
	color: var( --brass-light );
}

.ftb-weeks__layer {
	font-size: clamp( 22px, 2.6vw, 28px );
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 8px 0 0;
	color: var( --ink-text );
}

.ftb-weeks__note {
	font-size: 16px;
	line-height: 1.6;
	color: var( --ink-text-muted );
	max-width: 34ch;
	margin: 10px 0 0;
}

.ftb-weeks__what {
	font-size: clamp( 18px, 1.95vw, 20px );
	line-height: 1.65;
	color: var( --ink-text-secondary );
	margin: 0;
}

@media ( min-width: 760px ) {
	.ftb-weeks__row {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr );
		align-items: start;
	}
}

/* --- Case block (Meridian) ------------------------------------------------ */

/* The one section that breaks the page grid. Raised ground plus a hairline top
   and bottom so it reads as a distinct room, not another ruled list. */
.ftb-case {
	background: var( --ink-raised );
	border-top: 1px solid var( --ink-border-strong );
	border-bottom: 1px solid var( --ink-border-strong );
}

.ftb-case__inner {
	max-width: var( --container-max, 1200px );
	margin: 0 auto;
	padding: clamp( 56px, 9vw, 112px ) var( --page-gutter, 20px );
}

.ftb-case__headline {
	font-size: clamp( 30px, 3.8vw, 46px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 20px 0 0;
	max-width: 20ch;
}

.ftb-case__lede {
	font-size: clamp( 20px, 2.2vw, 23px );
	line-height: 1.6;
	color: var( --brass-light );
	max-width: 46ch;
	margin: 22px 0 0;
}

.ftb-case__grid {
	margin-top: clamp( 36px, 5vw, 56px );
	display: grid;
	gap: clamp( 32px, 5vw, 56px );
}

.ftb-case__logo {
	margin-bottom: clamp( 20px, 3vw, 28px );
}

.ftb-case__logo-img {
	/* Height-driven: the lockup is ~3.9:1, so width follows. 52px keeps the
	   "Supply Co." sub-line above the design system's 14px legibility floor —
	   at 40px it rendered around 10px. */
	height: 52px;
	width: auto;
	display: block;
}

.ftb-case__p {
	font-size: clamp( 18px, 1.95vw, 20px );
	line-height: 1.75;
	color: var( --ink-text-secondary );
	max-width: 58ch;
	margin: 0 0 20px;
}

.ftb-case__p:last-child {
	margin-bottom: 0;
}

.ftb-case__steps {
	margin-top: clamp( 28px, 4vw, 40px );
}

.ftb-case__steps-label {
	font-family: var( --font-mono );
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin: 0 0 6px;
}

.ftb-case__steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var( --ink-border );
}

.ftb-case__step {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 18px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var( --ink-border );
}

.ftb-case__step-n {
	font-family: var( --font-mono );
	font-size: 14px;
	color: var( --ink-text-muted );
}

.ftb-case__step-t {
	font-size: clamp( 17px, 1.85vw, 19px );
	line-height: 1.6;
	color: var( --ink-text-secondary );
}

/* "Then you do your version, in your business." Meridian is the vehicle, never
   the destination — this is the step that says so, so it gets the brass. */
.ftb-case__step--lead .ftb-case__step-n,
.ftb-case__step--lead .ftb-case__step-t {
	color: var( --brass-light );
}

.ftb-case__aside {
	display: grid;
	gap: 20px;
	align-content: start;
}

.ftb-case__frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var( --ink-border );
	border-radius: var( --radius-md, 6px );
	overflow: hidden;
	background: var( --ink-sunken );
}

.ftb-case__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ftb-case__ff-label {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
	margin-bottom: 14px;
}

.ftb-case__ff-list {
	margin: 0;
	display: grid;
	gap: 0;
}

.ftb-case__ff-row {
	display: grid;
	gap: 4px 20px;
	padding: 12px 0;
	border-top: 1px solid var( --ink-border );
}

.ftb-case__ff-k {
	font-family: var( --font-mono );
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var( --ink-text-muted );
}

.ftb-case__ff-v {
	font-size: 17px;
	line-height: 1.55;
	color: var( --ink-text );
	margin: 0;
}

/* Small, but never hidden. */
.ftb-case__disclaimer {
	font-size: 16px;
	line-height: 1.6;
	color: var( --ink-text-secondary );
	max-width: 68ch;
	margin: clamp( 32px, 4vw, 44px ) 0 0;
	padding-left: 16px;
	border-left: 2px solid var( --ink-border-strong );
}

@media ( min-width: 900px ) {
	.ftb-case__grid {
		grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr );
		align-items: start;
	}

	.ftb-case__ff-row {
		grid-template-columns: minmax( 120px, 0.6fr ) minmax( 0, 1fr );
		align-items: baseline;
	}
}

/* ==========================================================================
   LEGAL PAGES — Privacy Policy, Terms & Disclaimers
   templates/page-legal.php

   Plain post_content, no ACF sections. These rendered through the default
   page.php, which has no container, so the copy ran the full viewport width —
   a ~200-character measure at desktop. One prose column at a real reading
   measure fixes it.

   Type is a step DOWN from marketing copy on purpose: this is reference
   material, scanned for a clause, not read start to finish.
   ========================================================================== */

.ftb-legal {
	background: var( --ink );
	border-top: 1px solid var( --ink-border );
}

.ftb-legal__inner {
	/* 72ch, not the 1200px container: the container is right for multi-column
	   sections but far too wide for a single running column. */
	max-width: 72ch;
	margin: 0 auto;
	padding: clamp( 48px, 8vw, 96px ) var( --page-gutter ) clamp( 64px, 10vw, 120px );
}

.ftb-legal__head {
	padding-bottom: clamp( 20px, 3vw, 28px );
	margin-bottom: clamp( 28px, 4vw, 40px );
	border-bottom: 1px solid var( --ink-border-strong );
}

.ftb-legal__title {
	font-size: clamp( 30px, 4.5vw, 44px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var( --ink-text );
	margin: 0;
}

.ftb-legal__body {
	font-size: 17px;
	line-height: 1.7;
	color: var( --ink-text-secondary );
}

/* The first paragraph is the "Last updated" line in both documents. */
.ftb-legal__body > p:first-child em,
.ftb-legal__body > p:first-child i {
	display: inline-block;
	font-family: var( --font-mono );
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}

.ftb-legal__body h2 {
	font-size: clamp( 21px, 2.4vw, 25px );
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var( --ink-text );
	margin: clamp( 36px, 5vw, 52px ) 0 14px;
}

.ftb-legal__body h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --ink-text );
	margin: 28px 0 10px;
}

.ftb-legal__body p {
	margin: 0 0 16px;
}

.ftb-legal__body ul,
.ftb-legal__body ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.ftb-legal__body li {
	margin-bottom: 8px;
}

.ftb-legal__body li::marker {
	color: var( --ink-text-muted );
}

/* Bolded clauses carry the operative terms — the guarantee, the refund rule —
   so they lift to full-strength text rather than staying secondary. */
.ftb-legal__body strong,
.ftb-legal__body b {
	color: var( --ink-text );
	font-weight: 600;
}

.ftb-legal__body a {
	color: var( --brass-light );
	text-underline-offset: 3px;
}

.ftb-legal__body a:hover {
	color: var( --brass );
}

.ftb-legal__body hr {
	border: 0;
	border-top: 1px solid var( --ink-border );
	margin: clamp( 32px, 5vw, 48px ) 0;
}

.ftb-legal__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 16px;
}

.ftb-legal__body th,
.ftb-legal__body td {
	text-align: left;
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var( --ink-border );
	vertical-align: top;
}

.ftb-legal__body th {
	font-family: var( --font-mono );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ink-text-muted );
}