/**
 * Tolion front page — "Aurora".
 *
 * Loaded only on the page-tolion-front.php template (see
 * tolion_enqueue_front_assets). Everything is scoped under .t-front, with the
 * tokens on the template body class, so nothing here reaches the rest of the
 * site. The vision page (page-tolion-home.php) keeps its own home.css.
 *
 * Sections: 1 fonts, 2 tokens, 3 Avada reset, 4 shared primitives, 5 hero,
 * 6 the window (the chart), 7 objectives, 8 scale, 9 what we're building,
 * 11 close, 12 responsive, 13 heading colours at #main specificity — read the
 * note above that block before touching it. (10, the founder strip, was
 * removed in pass 23; the founder lives on /about-us/.)
 */

/* ------------------------------------------------------------------ *
 * 1. Fonts — self-hosted, the same files home.css and inner.css use.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("../fonts/archivo-400-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 125%;
	font-display: swap;
	src: url("../fonts/archivo-400-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-mono-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-mono-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-mono-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-mono-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * 2. Tokens — on the body class, not the article (gotcha 7).
 *
 * Since pass 33 the --tf-* names are aliases of chrome.css's --t-h-* set;
 * this sheet adds nothing but its radius. The ground is the lifted navy
 * again since pass 44 (Martin: match the app's dark interface); it was
 * paper from pass 34 to 43. Green is no longer a surface colour (Luke,
 * 2026-09-11: "don't make the website green"): the close is blue, the
 * headline gradient runs blue to cyan, and green survives only as a status
 * mark — the Shipping pill, the lit card edge, the chart's better curve.
 * ------------------------------------------------------------------ */

.page-template-page-tolion-front,
.page-template-page-tolion-home,
.t-front {
	--tf-ink: var(--t-h-ink);
	--tf-ink-2: var(--t-h-ink-2);
	--tf-panel: var(--t-h-panel);
	--tf-panel-2: var(--t-h-panel-2);
	--tf-line: var(--t-h-line);
	--tf-line-2: var(--t-h-line-2);

	--tf-fg: var(--t-h-fg);
	--tf-fg-2: var(--t-h-fg-2);
	--tf-fg-3: var(--t-h-fg-3);

	/* The app's own signal set, shared with home.css and inner.css. */
	--tf-blue: var(--t-h-blue);
	--tf-blue-lit: var(--t-h-blue-lit);
	--tf-cyan: var(--t-h-cyan);
	--tf-green: var(--t-h-green);
	--tf-amber: var(--t-h-amber);
	--tf-violet: var(--t-h-violet);

	--tf-sans: var(--t-h-sans);
	--tf-mono: var(--t-h-mono);
	--tf-wide: var(--t-h-wide);
	--tf-r: 18px;
	--t-h-r: 18px;

	/* One vertical rhythm for every band. */
	--tf-band: clamp(56px, 6vw, 80px);
}

/* ------------------------------------------------------------------ *
 * 3. Avada template reset — the same moves as home.css section 3.
 * ------------------------------------------------------------------ */

.page-template-page-tolion-front,
.page-template-page-tolion-home,
.page-template-page-tolion-front #boxed-wrapper,
.page-template-page-tolion-home #boxed-wrapper,
.page-template-page-tolion-front #wrapper,
.page-template-page-tolion-home #wrapper {
	background: var(--tf-ink);
}

/* position:sticky sticks to the nearest *scroll container*, and on this site
   that was never the viewport: Avada gives #wrapper `overflow: hidden
   !important` and <body> `overflow-x: hidden; overflow-y: scroll`, and because
   <html> also carries an overflow value, the body's is not propagated to the
   viewport — <body> becomes its own (never-scrolling) scroll container and
   anything sticky simply scrolls away (the front chart pinned until pass 31). `clip` still clips but does not create a
   scroll container, so both get it here. The page scrolls on the viewport
   exactly as before. */
.page-template-page-tolion-front #wrapper,
.page-template-page-tolion-home #wrapper {
	overflow: clip !important;
}

.page-template-page-tolion-front,
.page-template-page-tolion-home {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.page-template-page-tolion-front #main,
.page-template-page-tolion-home #main {
	padding: 0 !important;
	background: var(--tf-ink);
}

.page-template-page-tolion-front #main > .fusion-row,
.page-template-page-tolion-home #main > .fusion-row {
	display: block;
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.page-template-page-tolion-front .t-front,
.page-template-page-tolion-home .t-front {
	min-width: 0;
	width: 100%;
}

/* The header's navy, from the --t-h-* names and not the --tf-* aliases: the
   aliases compute on <body>, where they are paper, and the header stays
   navy (chrome.css). (Both hand-built templates share this sheet; home.css
   only adds the vision page's own components on top of it.) */
/* Pass 48: not once scrolled. This sheet loads after chrome.css, and this
   rule ties chrome.css's translucent scrolled-header rule on specificity, so
   it silently kept the band solid on exactly these two pages ("I'm STILL
   not seeing it"). The :not() hands the scrolled state back to chrome.css. */
.page-template-page-tolion-front .fusion-tb-header .fusion-fullwidth:not(.fusion-sticky-transition),
.page-template-page-tolion-home .fusion-tb-header .fusion-fullwidth:not(.fusion-sticky-transition),
.page-template-page-tolion-front .fusion-tb-header .fusion-flex-container:not(.fusion-sticky-transition),
.page-template-page-tolion-home .fusion-tb-header .fusion-flex-container:not(.fusion-sticky-transition) {
	background-color: var(--t-h-ink) !important;
	border-bottom: 1px solid var(--t-h-line);
}

.t-front,
.t-front p,
.t-front li {
	font-family: var(--tf-sans);
}

.t-front {
	color: var(--tf-fg);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

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

.t-front h1,
.t-front h2,
.t-front h3,
.t-front h4 {
	/* Avada's responsive-typography script adds
	   .fusion-responsive-typography-calculated to every heading and sets its
	   font-size with !important below 1000px, on its own curve — a 50px hero
	   became 26px on a phone. Every size in this sheet is declared as --fs and
	   applied here, at higher specificity and also !important, so the curve
	   below is the one that wins (gotcha 12). */
	font-size: var(--fs, 1em) !important;
	margin: 0;
	font-family: var(--tf-sans);
	font-weight: 700;
	font-variation-settings: var(--tf-wide);
	letter-spacing: -.022em;
	text-wrap: balance;
	line-height: 1.02;
}

.t-front p {
	margin: 0;
}

.t-front ul,
.t-front ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* :where() keeps this at zero specificity so component colours (.tf-btn,
   .tf-more, .tf-door) win without escalation (gotcha 34). */
:where(.t-front a) {
	color: inherit;
}

.t-front :focus-visible {
	outline: 2px solid var(--tf-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * 4. Shared primitives
 * ------------------------------------------------------------------ */

/* The measure is --t-measure (chrome.css), shared with every page. The 48px
   is this box's own padding: it sits inside the max-width, and without it
   the front page's content started a gutter inboard of every other page and
   of the footer. 24px matches inner.css's --t-gutter floor, so the content
   edge is identical on every page down to 640px. */
.tf-wrap {
	max-width: calc(var(--t-measure) + 48px);
	margin: 0 auto;
	padding: 0 24px;
}

.tf-eyebrow {
	font-family: var(--tf-mono);
	font-size: 11.5px;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--tf-cyan);
}

/* The brand at the head of the hero eyebrow: ink instead of cyan, the
   heavier mono weight and a step up in size, so "Tolion Health AI" reads
   first and the descriptor after the dot stays secondary (Luke, pass 43). */
.tf-eyebrow__brand {
	font-weight: 500;
	font-size: 1.22em;
	color: var(--tf-fg);
}

/* The Brain Coach page opens on the product's own wordmark (white "Tolion",
   light-blue "brain coach" — drawn for a dark ground, as this hero is) with
   the descriptor eyebrow beneath it. Intrinsic 439×194, so the height sets
   the width; kept a touch under the headline's cap height so the mark reads
   as the brand and the headline as the message (Luke, pass 61). */
#main .t-front.t-front .tf-hero__mark {
	display: block;
	width: auto;
	height: clamp(60px, 5.4vw, 80px);
	margin: 0 0 16px;
}

.tf-idx {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	font-family: var(--tf-mono);
	font-size: 11.5px;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--tf-fg-3);
}

.tf-idx::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .35;
}

.t-front h2 {
	--fs: clamp(28px, 3.7vw, 50px);
}

.tf-sub {
	margin-top: 14px;
	max-width: 58ch;
	font-size: 18px;
	color: var(--tf-fg-2);
}

.tf-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 21px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: var(--tf-fg);
	color: var(--tf-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .16s ease, background .16s ease;
}

/* The button is the page's text colour on the navy ground; hover goes white. */
.tf-btn:hover,
.tf-btn:focus-visible {
	transform: translateY(-1px);
	background: #fff;
	color: var(--tf-ink);
}

.tf-btn--ghost {
	background: transparent;
	border-color: var(--tf-line-2);
	color: var(--tf-fg);
}

.tf-btn--ghost:hover,
.tf-btn--ghost:focus-visible {
	background: rgba(140, 170, 230, .10);
	color: var(--tf-fg);
}

.tf-btn--dark {
	/* On the blue close: the page's ink, literal so it stays a dark button
	   whatever the ground tokens say. */
	background: #0b1633;
	color: #f2f5fd;
}

.tf-btn--dark:hover,
.tf-btn--dark:focus-visible {
	background: #172a70;
	color: #fff;
}

.tf-more {
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	color: var(--tf-cyan);
}

.tf-more:hover,
.tf-more:focus-visible {
	color: var(--tf-cyan);
	text-decoration: underline;
}

.tf-more--w {
	color: #fff;
	white-space: nowrap;
}

.tf-more--ink {
	color: #f2f5fd;
	align-self: center;
	margin-left: 12px;
}

.tf-more--ink:hover,
.tf-more--ink:focus-visible {
	color: #fff;
}

/* A plain band on the ink ground. */
.tf-band {
	padding: var(--tf-band) 0;
}

.tf-more--w:hover,
.tf-more--w:focus-visible {
	color: #fff;
}

/* Reveal: visible at rest, nudged into place once it enters the viewport. */
.tf-rv {
	opacity: .7;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.tf-rv.is-in {
	opacity: 1;
	transform: none;
}

.tf-chip {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--tf-line-2);
	border-radius: 100px;
	font-family: var(--tf-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--tf-fg-2);
}

.tf-chip::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--c, var(--tf-cyan));
	vertical-align: 1px;
}

.tf-st {
	padding: 5px 9px;
	border: 1px solid var(--tf-line-2);
	border-radius: 100px;
	font-family: var(--tf-mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--tf-fg-3);
}

.tf-st--live {
	border-color: transparent;
	background: var(--tf-green);
	color: #06140d;
}

/* Beta: the same pill on cyan, so it reads as "live, with an asterisk"
   next to Shipping's green. */
.tf-st--beta {
	border-color: transparent;
	background: #35c8f0;
	color: #06141a;
}

/* Growing: built and still being added to. Amber, the page's third accent,
   so the three products read as three states rather than two plus a
   placeholder. */
.tf-st--grow {
	border-color: transparent;
	background: var(--tf-amber);
	color: #1a0f02;
}

/* ------------------------------------------------------------------ *
 * 5. Hero — the sky
 *
 * The canvas behind the copy is four soft glows that breathe on a slow clock
 * and sink a little with scroll. The earlier version drew twenty sine lines
 * over the glows; they pulled the eye off the headline and are gone.
 * ------------------------------------------------------------------ */

.tf-hero {
	position: relative;
	min-height: min(76vh, 680px);
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--tf-line);
}

.tf-hero__sky {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Static fallback under the canvas so the hero is lit before front.js runs,
   and stays lit without it. */
.tf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 70% at 80% 18%, rgba(63, 130, 255, .46), transparent 70%),
		radial-gradient(50% 60% at 12% 92%, rgba(66, 216, 248, .22), transparent 70%);
}

/* The scrim fades to the ground's own channels. */
.tf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(var(--t-h-ink-rgb), .1) 0%, rgba(var(--t-h-ink-rgb), 0) 40%, rgba(var(--t-h-ink-rgb), .72) 100%);
}

.tf-hero__in {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--t-measure) + 48px);
	margin: 0 auto;
	padding: 80px 24px 64px;
}

.tf-hero h1 {
	margin-top: 18px;
	max-width: 12ch;
	--fs: clamp(38px, 6.6vw, 94px);
	letter-spacing: -.035em;
	line-height: .94;
}

.tf-hero h1 em {
	font-style: normal;
	background: linear-gradient(90deg, var(--tf-blue-lit), var(--tf-cyan) 60%, #c9f3ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tf-lede {
	max-width: 52ch;
	font-size: 19px;
	color: var(--tf-fg-2);
}

/* The gap under the headline. Written on `.tf-hero .tf-lede` because the
   page reset `.t-front p { margin: 0 }` outranks a bare `.tf-lede` and had
   been zeroing it, so the descender of "So do you." sat on the lede
   (Luke, pass 38). The headline's line-height (.94) hangs that descender
   about 7px below its box, hence 34px rather than a round 40. */
.tf-hero .tf-lede {
	margin-top: 34px;
}

.tf-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* A slight blur of the field where it runs behind the copy, and only there
   (Luke, pass 39: "so that the neurons don't collide with text"). The block
   hugs the text (fit-content), the blur is a backdrop filter on a pseudo
   that bleeds past it, and a two-axis mask fades the blur out over the
   bleed so it has no edge. Being a backdrop, it softens the moving pulses
   as well as the still dendrites — a canvas-side blur could not. The canvas
   already dims somas that land behind the copy (sky.js `dim`). */
.tf-hero__copy {
	position: relative;
	width: fit-content;
	max-width: 100%;
}

.tf-hero__copy::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -44px -80px -40px -80px;
	pointer-events: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	/* The fade runs a third of the way in from each side (eased, so it reads
	   as gradual rather than a ramp) while the outer extent is unchanged —
	   Luke, pass 40: "fade gradually as you leave the text, but don't extend
	   the blur's coverage". Percentages keep the same proportion at 390px. */
	-webkit-mask-image:
		linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 8%, rgba(0, 0, 0, .38) 17%, rgba(0, 0, 0, .7) 26%, #000 34%, #000 66%, rgba(0, 0, 0, .7) 74%, rgba(0, 0, 0, .38) 83%, rgba(0, 0, 0, .12) 92%, transparent 100%),
		linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .12) 8%, rgba(0, 0, 0, .38) 17%, rgba(0, 0, 0, .7) 26%, #000 34%, #000 66%, rgba(0, 0, 0, .7) 74%, rgba(0, 0, 0, .38) 83%, rgba(0, 0, 0, .12) 92%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 8%, rgba(0, 0, 0, .38) 17%, rgba(0, 0, 0, .7) 26%, #000 34%, #000 66%, rgba(0, 0, 0, .7) 74%, rgba(0, 0, 0, .38) 83%, rgba(0, 0, 0, .12) 92%, transparent 100%),
		linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .12) 8%, rgba(0, 0, 0, .38) 17%, rgba(0, 0, 0, .7) 26%, #000 34%, #000 66%, rgba(0, 0, 0, .7) 74%, rgba(0, 0, 0, .38) 83%, rgba(0, 0, 0, .12) 92%, transparent 100%);
	mask-composite: intersect;
}

/* The vision page's hero: copy on the left, the phone on the right. The
   headline is a step smaller because it shares the row. */
.tf-hero--split .tf-hero__in {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 56px;
	align-items: center;
}

.tf-hero--split h1 {
	max-width: 14ch;
	--fs: clamp(36px, 5vw, 70px);
}

.tf-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.tf-chip b {
	color: var(--tf-green);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * 6. The window — the chart that draws itself once.
 *
 * Two pieces in flow: a lead-in (eyebrow, heading, sub) and a grid with the
 * a column (eyebrow, heading, one card) beside the chart. front.js draws
 * the chart over 5.2s the first time it is half in view and lights the card
 * as the bracket lands; after that everything holds. The card is readable
 * at every moment — the lighting is a cue, not a gate. (Four acts lit in
 * turn until pass 72; the heading row above the grid went in pass 74.)
 *
 * Until pass 31 the box was position:sticky and the reader drew the curve by
 * scrolling through a 100svh run, one step showing at a time, with the
 * product cards riding inside the box and rising over the chart in a second
 * pinned phase. Luke asked for the simpler form.
 *
 * Above 1100px the column sits beside the chart; below that the heading
 * sits on top, then the chart, then the card (section 12).
 * ------------------------------------------------------------------ */

.tf-win {
	position: relative;
	/* The room between the chart and the products section. */
	padding-bottom: calc(var(--tf-band) - 12px);
	/* Opens on the products band's ink-2 and settles to ink under the chart,
	   so the two sections share a ground instead of meeting at an edge. */
	background: linear-gradient(180deg, var(--tf-ink-2) 0, var(--tf-ink) min(60vh, 560px));
}

/* The column beside the chart: eyebrow, heading, card (pass 74). It is
   centred on the chart's height; the heading is set smaller than the
   section norm so it holds to three lines in the column. */
.tf-win__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tf-win__col .tf-idx {
	align-self: stretch;
}

.tf-win__col h2 {
	--fs: clamp(30px, 2.7vw, 40px);
	max-width: 15ch;
}

.tf-win__col .tf-step--one {
	align-self: stretch;
	margin-top: 28px;
}

.tf-win__grid {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 56px;
	align-items: center;
	width: 100%;
	max-width: calc(var(--t-measure) + 48px);
	margin: 0 auto;
	padding: calc(var(--tf-band) - 12px) 24px 0;
}

/* The card beside the chart. Readable at rest in the dim ink; it lights up
   (border, label, heading, copy) once the green curve has landed and stays
   lit. .tf-step is the old four-act primitive, kept for the colour rules;
   .tf-step--one is the single "where Tolion works" card (pass 72). */
.tf-step {
	padding: 12px 0 12px 20px;
	border-left: 2px solid var(--tf-line);
	color: var(--tf-fg-3);
	transition: border-color .4s ease;
}

.tf-step + .tf-step {
	margin-top: 6px;
}

.tf-step em {
	display: block;
	margin-bottom: 6px;
	font-style: normal;
	font-family: var(--tf-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: color .4s ease;
}

.tf-step h3 {
	--fs: 21px;
	color: var(--tf-fg-3);
	transition: color .4s ease;
}

.tf-step p {
	margin-top: 6px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--tf-fg-3);
	transition: color .4s ease;
}

.tf-step.is-on {
	border-color: var(--c, var(--tf-cyan));
}

.tf-step.is-on em {
	color: var(--c, var(--tf-cyan));
}

.tf-step.is-on h3 {
	color: var(--tf-fg);
}

.tf-step.is-on p {
	color: var(--tf-fg-2);
}

.tf-step--one {
	padding: 28px 30px 30px;
	border: 1px solid var(--tf-line);
	border-left-width: 3px;
	border-radius: var(--tf-r);
	background: linear-gradient(160deg, rgba(31, 58, 140, .38), rgba(23, 42, 112, .38));
	box-shadow: 0 18px 44px rgba(4, 12, 48, .28);
	transition: border-color .5s ease, box-shadow .5s ease;
}

.tf-step--one em {
	margin-bottom: 12px;
	font-size: 12px;
}

.tf-step--one h3 {
	--fs: clamp(26px, 2vw, 34px);
	letter-spacing: -.01em;
}

.tf-step--one p {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.55;
	max-width: 36ch;
}

.tf-step--one.is-on {
	border-color: var(--tf-line-2);
	border-left-color: var(--c, var(--tf-green));
	box-shadow: 0 18px 44px rgba(4, 12, 48, .28), 0 0 0 1px rgba(37, 222, 139, .12);
}

.tf-win__stage {
	position: relative;
	width: 100%;
	padding: 18px 18px 8px;
	border: 1px solid var(--tf-line-2);
	border-radius: var(--tf-r);
	background: linear-gradient(180deg, var(--tf-panel) 0%, var(--tf-ink-2) 100%);
	box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .9), 0 0 90px -30px rgba(47, 114, 245, .45);
}

.tf-plot {
	display: block;
	width: 100%;
	height: auto;
}

.tf-plot .tf-ax { stroke: var(--tf-line-2); stroke-width: 1; }
.tf-plot .tf-gl { stroke: var(--tf-line); stroke-width: 1; }
.tf-plot .tf-tick { font: 11.5px var(--tf-mono); fill: var(--tf-fg-3); letter-spacing: .06em; }
.tf-plot .tf-lab { font: 12px var(--tf-mono); fill: var(--tf-fg-2); letter-spacing: .06em; }
.tf-plot .tf-lab--hi { fill: var(--tf-fg); font-weight: 500; }
.tf-plot .tf-lab--amber { fill: var(--tf-amber); }
.tf-plot .tf-base { fill: none; stroke: var(--tf-fg); stroke-width: 3; stroke-linecap: round; }
.tf-plot .tf-guide { fill: none; stroke: var(--tf-green); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(25, 208, 122, .55)); }
.tf-plot .tf-thresh { stroke: var(--tf-amber); stroke-width: 1.5; stroke-dasharray: 5 6; }
/* The window itself, a tint of the app's blue under the twenty years before
   the crossing (until pass 35 this rect shaded the years *after* it, which
   Luke read as the wrong way round). */
.tf-plot .tf-wspan { fill: var(--tf-blue); opacity: 0; }
.tf-plot .tf-lab--green { fill: var(--tf-green); }
.tf-plot .tf-wlab { opacity: 0; }
.tf-plot .tf-diag { opacity: 0; transition: opacity .3s ease; }
.tf-plot .tf-diag circle { fill: var(--tf-fg); }
/* The gain: a bracket along the threshold line from the diagnosis crossing
   to the later curve's crossing, a dot at its end, and the label just past
   the dot, below the line — the one region the curves leave clear (both
   are above the threshold to the right of the later crossing). */
.tf-plot .tf-gain { opacity: 0; transition: opacity .35s ease; }
.tf-plot .tf-gain line { stroke: var(--tf-green); stroke-width: 2.5; stroke-linecap: round; }
.tf-plot .tf-gain circle { fill: var(--tf-green); }
.tf-plot .tf-gain text { font: 12.5px var(--tf-mono); font-weight: 500; letter-spacing: .06em; fill: var(--tf-green); }
.tf-plot .tf-gain .tf-gain__sm { font-size: 10.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; fill: var(--tf-fg-3); }
.tf-plot .tf-tip { fill: var(--tf-ink); stroke: var(--tf-fg); stroke-width: 3; }

.tf-win__disc {
	max-width: 70ch;
	padding: 8px 4px 4px;
	font-family: var(--tf-mono);
	font-size: 11px;
	letter-spacing: .04em;
	line-height: 1.5;
	color: var(--tf-fg-3);
}

/* ------------------------------------------------------------------ *
 * 7. The cyan block — the vision page's crisis wipe, and the front page's
 *    one big number
 * ------------------------------------------------------------------ */

.tf-obj {
	position: relative;
	padding: var(--tf-band) 0;
	overflow: hidden;
	/* The block's own cyan: the cyan token is a text colour on paper and
	   would turn the block teal. */
	background: #35c8f0;
	color: #06111c;
}

.tf-obj::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 60% at 100% 0%, rgba(255, 255, 255, .45), transparent 65%),
		radial-gradient(40% 50% at 0% 100%, rgba(47, 114, 245, .35), transparent 70%);
}

.tf-obj .tf-wrap {
	position: relative;
}

.tf-obj .tf-idx {
	color: #06111c;
	opacity: .7;
}

.tf-obj .tf-sub {
	color: #123047;
}

.tf-obj h2 {
	max-width: 24ch;
}

/* The front page's one big number. Two columns above 1000px: the numeral
   on the left spans both text rows and is centred on them, so "47%+" sits
   against the whole block (heading + copy) rather than hanging off the
   first line of a two-line heading with a hole under it — which is what a
   baseline alignment did at 1440 and up (Luke, pass 40: "misaligned with a
   lot of empty space"). The heading hugs the bottom of its row so it meets
   the copy. */
.tf-prev__in {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 44px;
	align-items: center;
}

.tf-prev__in .tf-idx {
	grid-column: 1 / -1;
	margin-bottom: 10px;
}

.tf-prev__num {
	grid-column: 1;
	grid-row: 2 / span 2;
	align-self: center;
	margin: 0;
}

.tf-prev__num b {
	display: block;
	font-size: clamp(88px, 13.5vw, 200px);
	font-weight: 700;
	font-variation-settings: var(--tf-wide);
	letter-spacing: -.05em;
	line-height: .85;
	font-variant-numeric: tabular-nums;
	color: #06111c;
}

.tf-prev__in h2 {
	grid-column: 2;
	align-self: end;
	max-width: 20ch;
}

.tf-prev__body {
	grid-column: 2;
	margin-top: 18px;
}

.tf-prev__src {
	display: block;
	margin-top: 20px;
	font-family: var(--tf-mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: #0b3d5c;
}

.tf-prev__body .tf-more {
	margin: 24px 0 0;
}

/* ------------------------------------------------------------------ *
 * 8. Scale — three numbers, one bar
 * ------------------------------------------------------------------ */

/* Positioned for the lone neuron sky.js draws beside the heading (the
   section carries data-neuron); the copy sits above it. */
.tf-scale {
	position: relative;
	padding: var(--tf-band) 0;
}
.tf-scale > .tf-wrap {
	position: relative;
	z-index: 1;
}

.tf-scale h2 {
	max-width: 30ch;
}

.tf-big3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-top: 36px;
}

.tf-big {
	position: relative;
	padding: 22px 24px 20px;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-r);
	background: linear-gradient(180deg, var(--tf-panel) 0%, var(--tf-ink-2) 100%);
	overflow: hidden;
}

.tf-big::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--c);
	box-shadow: 0 0 24px var(--c);
}

.tf-big b {
	display: block;
	font-size: clamp(36px, 3.9vw, 54px);
	font-variation-settings: var(--tf-wide);
	letter-spacing: -.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--c);
}

.tf-big p {
	margin-top: 8px;
	font-size: 15px;
	color: var(--tf-fg-2);
}

.tf-big small {
	display: block;
	margin-top: 10px;
	font-family: var(--tf-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--tf-fg-3);
}
.tf-big small a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .35);
}
.tf-big small a:hover { color: var(--tf-fg); }

/* The stacked region bar (.tf-split) was removed with its unsourced figures on 12 Sep 2026. */

/* ------------------------------------------------------------------ *
 * 9. What we're building — the three product cards, their own section after
 *    the window. From pass 23b to pass 30 they were a strip that rode inside
 *    the pinned chart box and rose over the chart as it scrolled away. The
 *    violet-to-blue "Built as one system" block below is the vision page's.
 * ------------------------------------------------------------------ */

.tf-prods {
	padding-bottom: calc(var(--tf-band) - 12px);
	background: var(--tf-ink);
}

.tf-prods__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 12px;
}

.tf-prods__head .tf-idx {
	flex: 1 1 auto;
	margin-bottom: 0;
	white-space: nowrap;
}

.tf-prods__head .tf-more {
	flex: none;
}

.tf-prods__title {
	margin-bottom: 24px;
}

.tf-prods__title h2 {
	max-width: 16ch;
}

.tf-prods__title .tf-sub {
	margin-top: 12px;
	max-width: 58ch;
}

.tf-prodgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.tf-prod {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 22px;
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-r);
	background: linear-gradient(180deg, var(--tf-panel) 0%, var(--tf-ink-2) 100%);
	color: var(--tf-fg);
	text-decoration: none;
	overflow: hidden;
}

.tf-prod::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--tf-line-2);
}

/* The lit edge marks what is real today: the shipping app and the growing
   evidence base. The beta card keeps the plain line. */
.tf-prod--live::before,
.tf-prod--grow::before {
	background: var(--tf-green);
	box-shadow: 0 0 24px var(--tf-green);
}

a.tf-prod {
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease;
}

a.tf-prod:hover,
a.tf-prod:focus-visible {
	transform: translateY(-3px);
	border-color: var(--tf-line-2);
	outline: none;
}

a.tf-prod:focus-visible {
	box-shadow: 0 0 0 3px var(--tf-green);
}

.tf-prod__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tf-prod b {
	font-size: clamp(22px, calc(1.25vw + 5px), 25px);
	font-weight: 700;
	font-variation-settings: var(--tf-wide);
	letter-spacing: -.02em;
	line-height: 1.05;
}

.tf-prod p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--tf-fg-2);
}

.tf-prod__go {
	font-weight: 600;
	color: var(--tf-green);
	white-space: nowrap;
}

.tf-sys {
	position: relative;
	padding: var(--tf-band) 0;
	overflow: hidden;
	background: linear-gradient(135deg, #5b3fe6 0%, #2f6ae8 55%, #1a8fd6 100%);
	color: #fff;
}

.tf-sys::before {
	content: "";
	position: absolute;
	inset: -20%;
	pointer-events: none;
	background:
		radial-gradient(40% 40% at 20% 20%, rgba(255, 255, 255, .22), transparent 70%),
		radial-gradient(35% 35% at 85% 80%, rgba(25, 208, 122, .35), transparent 70%);
}

.tf-sys .tf-wrap {
	position: relative;
}

.tf-sys .tf-idx {
	color: #fff;
}

/* The block is violet, so its copy cannot follow the page's text tokens
   (navy on paper). */
.tf-sys .tf-sub {
	color: rgba(255, 255, 255, .82);
}

.tf-sys__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.tf-sys__head h2 {
	max-width: 18ch;
}

.tf-stack {
	display: grid;
	/* Pass 98: three products, so three columns or one – auto-fit left the
	   Clinician Portal alone on a second row between ~560 and 830px. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 36px;
}

@media (max-width: 700px) {
	.tf-stack { grid-template-columns: 1fr; gap: 12px; }
}

.tf-stack__it {
	padding: 22px 22px 24px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--tf-r);
	background: rgba(6, 12, 30, .46);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.tf-stack__it em {
	font-style: normal;
	font-family: var(--tf-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.tf-stack__it h3 {
	margin-top: 10px;
	--fs: 24px;
}

.tf-stack__it > p {
	margin-top: 8px;
	font-size: 15px;
	color: rgba(255, 255, 255, .88);
}

.tf-stack__it .tf-st {
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.tf-stack__it .tf-st--live,
.tf-stack__it .tf-st--beta,
.tf-stack__it .tf-st--grow {
	border-color: transparent;
	color: #06140d;
}

/* ------------------------------------------------------------------ *
 * 11. Close — on blue since pass 44 (was green), one short band since pass 20
 * ------------------------------------------------------------------ */

.tf-close {
	position: relative;
	padding: calc(var(--tf-band) - 12px) 0;
	overflow: hidden;
	background: var(--tf-blue);
	color: #f2f5fd;
}

.tf-close::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(50% 60% at 90% 10%, rgba(255, 255, 255, .5), transparent 70%),
		radial-gradient(40% 50% at 5% 100%, rgba(53, 200, 240, .55), transparent 70%);
}

.tf-close__in {
	position: relative;
	display: grid;
	/* Pass 98: was `auto`, which sized the column to every CTA item laid end
	   to end – with Brain Coach's second link that reached 776px and crushed
	   the headline to 81px at 961–1100. The button pair is 398–449px wide. */
	grid-template-columns: minmax(0, 1fr) fit-content(480px);
	gap: 24px 56px;
	align-items: center;
}

.tf-close h2 {
	max-width: 12ch;
	--fs: clamp(32px, 3.9vw, 54px);
	letter-spacing: -.035em;
	line-height: .96;
}

.tf-close .tf-sub {
	max-width: 40ch;
	margin-top: 14px;
	font-size: 16px;
	color: rgba(242, 245, 253, .82);
}

.tf-close .tf-cta--close {
	margin-top: 0;
	justify-content: flex-end;
}

.tf-close .tf-more--ink {
	flex-basis: 100%;
	margin-left: 0;
	text-align: right;
}

/* ------------------------------------------------------------------ *
 * 12. Responsive
 * ------------------------------------------------------------------ */

/* The window, stacked: chart on top, one step at a time beneath it. The
   stage is capped by the viewport height so chart + step always fit inside
   the 100svh sticky box (the 330px is the step block, the disclaimer, the
   label and the gaps; 1.727 is the chart's 760:440 aspect). */
@media (max-width: 1100px) {
	.tf-win__grid { grid-template-columns: 1fr; gap: 22px; padding-left: 20px; padding-right: 20px; }
	/* The column dissolves: eyebrow and heading above the chart, card below. */
	.tf-win__col { display: contents; }
	.tf-win__col .tf-idx { order: -3; margin-bottom: 0; }
	.tf-win__col h2 { --fs: clamp(28px, 3.7vw, 50px); max-width: 20ch; order: -2; margin-bottom: 10px; }
	.tf-win__stage {
		order: -1;
		max-width: 820px;
		margin: 0 auto;
		padding: 12px 12px 6px;
	}
	.tf-win__disc { font-size: 10px; padding-top: 6px; }
	.tf-win__col .tf-step--one { max-width: 820px; margin: 0 auto; width: 100%; }
	.tf-step--one { padding: 22px 24px 24px; }
	.tf-step--one h3 { --fs: 24px; }
	.tf-step--one p { max-width: 60ch; font-size: 15px; }
	/* SVG text is in viewBox units and shrinks with the chart; 11.5px at a
	   phone's 0.43 scale is 5px. Set in viewBox units to land at 9-10px. */
	.tf-plot .tf-tick { font-size: 15px; }
	.tf-plot .tf-lab { font-size: 15px; }
	.tf-plot .tf-gain text { font-size: 16px; }
	.tf-plot .tf-gain .tf-gain__sm { font-size: 13px; }
}

@media (max-width: 560px) {
	.tf-plot .tf-tick { font-size: 21px; }
	.tf-plot .tf-lab { font-size: 21px; }
	.tf-plot .tf-gain text { font-size: 18px; }
	.tf-plot .tf-gain .tf-gain__sm { font-size: 15px; }
	.tf-plot .tf-base { stroke-width: 4; }
	.tf-plot .tf-guide { stroke-width: 4.5; }
	.tf-plot .tf-tip { r: 8; }
}

@media (max-width: 960px) {
	.tf-hero__in { padding: 76px 24px 64px; }
	.tf-hero--split .tf-hero__in { grid-template-columns: 1fr; gap: 40px; }
	.tf-prods__head { flex-wrap: wrap; gap: 10px 24px; }
	.tf-prodgrid { grid-template-columns: 1fr; gap: 12px; }
	.tf-close__in { grid-template-columns: 1fr; gap: 26px; }
	.tf-close .tf-cta--close { justify-content: flex-start; }
	.tf-close .tf-more--ink { text-align: left; }
}

@media (max-width: 860px) {
	.tf-prev__in { grid-template-columns: 1fr; row-gap: 6px; }
	.tf-prev__num,
	.tf-prev__in h2,
	.tf-prev__body { grid-column: 1; grid-row: auto; }
	.tf-prev__body { margin-top: 10px; }
	.tf-prev__in h2 { max-width: 24ch; }
}

@media (max-width: 640px) {
	.tf-wrap { padding: 0 20px; }
	.tf-step--one { padding: 20px 20px 22px; }
	.tf-step--one h3 { --fs: 22px; }
	.tf-hero__in { padding: 64px 20px 56px; }
	/* On a phone the eyebrow's brand takes its own line and the dot goes,
	   instead of the descriptor breaking mid-phrase after it. */
	.tf-eyebrow__brand { display: block; margin-bottom: 3px; }
	.tf-eyebrow__dot { display: none; }
	/* Adéla: the descriptor was hard to read on a phone. A step larger, tighter tracking. */
	.tf-eyebrow { font-size: 12.5px; letter-spacing: .14em; }
	#main .t-front.t-front .tf-hero__mark { height: 56px; margin-bottom: 14px; }
}

/* ------------------------------------------------------------------ *
 * 12b. Wide and tall screens
 *
 * The measure grows with the window on its own (--t-measure, chrome.css).
 * These keep the type, the bands and the chart in proportion to the
 * wider column, so a 1920 or 2560 screen reads as the same page scaled up
 * rather than a 1440 page floating in a bigger room. Every size is a clamp
 * on vw, so nothing jumps at the breakpoint.
 * ------------------------------------------------------------------ */

/* A tall viewport: the hero holds the first screen instead of handing the
   bottom third of it to the blank top of the next section. The copy is
   centred in the box (the hero is already a flex container). */
@media (min-width: 1000px) and (min-height: 800px) {
	.tf-hero { min-height: min(88vh, 1180px); }
}

@media (min-width: 1600px) {
	.page-template-page-tolion-front,
	.page-template-page-tolion-home { --tf-band: clamp(80px, 4.6vw, 100px); }

	.tf-eyebrow,
	.tf-idx { font-size: clamp(11.5px, .68vw, 13px); }
	.t-front h2 { --fs: clamp(50px, 2.85vw, 58px); }
	.tf-sub { max-width: 60ch; font-size: clamp(18px, 1.08vw, 21px); }
	.tf-btn { padding: 15px 24px; font-size: clamp(15px, .9vw, 17px); }
	.tf-more { font-size: clamp(16px, .95vw, 18px); }

	/* Hero */
	.tf-hero__in { padding-top: 96px; padding-bottom: 80px; }
	.tf-hero h1 { --fs: clamp(94px, 5.6vw, 112px); }
	.tf-hero--split h1 { --fs: clamp(70px, 4.1vw, 82px); }
	.tf-lede { font-size: clamp(18px, 1.05vw, 20px); }

	/* The window */
	.tf-win__grid { grid-template-columns: 480px 1fr; gap: 64px; }
	.tf-win__col h2 { --fs: clamp(36px, 2.4vw, 46px); }
	.tf-step em { font-size: 12px; }
	.tf-step h3 { --fs: clamp(22px, 1.35vw, 27px); }
	.tf-step p { font-size: clamp(15px, .87vw, 17px); }
	.tf-step--one h3 { --fs: clamp(30px, 2.1vw, 36px); }
	.tf-step--one p { font-size: clamp(16px, .95vw, 18px); }
	.tf-win__stage { padding: 22px 22px 10px; }
	.tf-win__disc { font-size: 12px; }

	/* The big number */
	.tf-prev__in { column-gap: 56px; }
	.tf-prev__num b { font-size: clamp(200px, 11vw, 256px); }

	/* Scale */
	.tf-big3 { gap: 20px; margin-top: 44px; }
	.tf-big { padding: 26px 28px 24px; }
	.tf-big b { font-size: clamp(54px, 3.1vw, 62px); }
	.tf-big p,

	/* What we're building */
	.tf-prodgrid { gap: 22px; }
	.tf-prod { padding: 26px 28px 24px; }
	.tf-prod p { font-size: clamp(15px, calc(.85vw + 1px), 17px); }

	/* Close */
	.tf-close h2 { --fs: clamp(54px, 3.1vw, 62px); }
	.tf-close .tf-sub { font-size: clamp(16px, .95vw, 18px); }
}

@media (prefers-reduced-motion: reduce) {
	.tf-rv { opacity: 1; transform: none; transition: none; }
	.tf-step,
	.tf-step em,
	.tf-step h3,
	.tf-step p,
	.tf-btn { transition: none; }
}

/* No-JS: the steps stay readable, the chart keeps its axes and the bar is
   full. Doubled class so these beat the rules above. */
.t-front--nojs.t-front--nojs .tf-step p { color: var(--tf-fg-2); }
.t-front--nojs.t-front--nojs .tf-step h3 { color: var(--tf-fg); }

/* ------------------------------------------------------------------ *
 * 13. Heading colours, restated at #main specificity.
 *
 * DO NOT fold these into the blocks above. tolion.css carries
 *   #main h1:not([style*="color"]):not([class*="fusion-title-heading"]) …
 * at (1,2,1), which beats every `.t-front …` rule and paints the headings
 * navy on navy. Doubling the class reaches (1,2,1) too, and this sheet loads
 * later, so source order wins without !important. Each section sets `color`
 * on its container and the headings inherit it.
 * ------------------------------------------------------------------ */

#main .t-front.t-front :is(h1, h2, h3, h4) {
	color: inherit;
}

#main .t-front.t-front .tf-step h3 {
	color: var(--tf-fg-3);
}

#main .t-front.t-front .tf-step.is-on h3,
#main .t-front.t-front.t-front--nojs .tf-step h3 {
	color: var(--tf-fg);
}

#main .t-front.t-front .tf-hero h1 em {
	color: transparent;
}

/* The front page's four in-page jumps (hero button, and the link out of each
   section). Pass 48: the header is fixed and 59px tall once the page has
   moved, so a jump has to clear it or the section's top lands underneath —
   Luke: "takes them to the beginning of that element … not somewhere else".
   59px puts the section's own top edge exactly under the band. */
.t-front #tf-burden,
.t-front #tf-preventable,
.t-front #tf-window,
.t-front #tf-products {
	scroll-margin-top: 59px;
}

/* Up to Avada's medium breakpoint the menu is the collapsed toggle and the
   scrolled band is 67px, not 59. */
@media (max-width: 1024px) {
	.t-front #tf-burden,
	.t-front #tf-preventable,
	.t-front #tf-window,
	.t-front #tf-products {
		scroll-margin-top: 67px;
	}
}

/* ------------------------------------------------------------------ *
 * 13. Pass 45 — the app named in the hero, a link out of each section
 * ------------------------------------------------------------------ */

/* Under the hero buttons: the store links as a line of copy, not a third
   button, so the homepage stays about the company (Luke) while a first-time
   visitor learns there is an app before the fold (Jan, Adéla). */
.tf-hero__store {
	margin-top: 18px;
	font-family: var(--tf-mono);
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--tf-fg-3);
}

.tf-hero__store a {
	color: var(--tf-fg-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tf-hero__store a:hover,
.tf-hero__store a:focus-visible {
	color: var(--tf-fg);
}

/* Each section ends with a door to the next (Adéla). */
.tf-scale .tf-more {
	display: inline-block;
	margin-top: 28px;
}

.tf-win__foot {
	margin-top: 28px;
}

/* ------------------------------------------------------------------ *
 * 15. Pass 86 — the section's outbound link on phones
 *
 * Both "Built as one system." heads carry a link beside the eyebrow (front
 * page) or the title (Brain Coach page). Once the head wraps on a phone the
 * link landed between the eyebrow and the title, or between the title and
 * its sub-line, reading as a stray subtitle. Below 720px the head dissolves
 * into the section's column and the link takes the last slot, after the
 * cards — the same place the other front-page sections keep theirs.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
	.tf-prods > .tf-wrap,
	.tf-sys > .tf-wrap {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.tf-prods__head,
	.tf-sys__head {
		display: contents;
	}

	.tf-prods__head .tf-idx {
		margin-bottom: 20px;
	}

	.tf-prods__head .tf-more,
	.tf-sys__head .tf-more {
		order: 10;
		align-self: flex-start;
		margin-top: 28px;
	}
}