/**
 * Tolion vision page — the components that are only on /vision/.
 *
 * Since pass 17 the vision page is built on front.css: tokens, the Avada
 * reset, the hero, the bands, buttons and chips all come from there, so the
 * two hand-built pages read as one site. This sheet keeps only what the
 * Brain Coach page has and the front page does not — the phone mockup, the
 * brain wipe (its section is gone since pass 55), the filmstrip and the four
 * panels, and since pass 70 the signal map (the simulator's styles were
 * retired to _retired/sim/ in pass 69) —
 * with their --t-h-* tokens aliased to front.css's --tf-* set so every
 * colour is the same by construction. Loaded after front.css
 * (tolion_enqueue_home_styles) and scoped under .t-home.
 *
 * Sections: 1 aliases, 2 phone, 3 signal map, 4 brain wipe, 5 filmstrip,
 * 6 panels, 7 responsive.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 *
 * This sheet uses the --t-h-* names, which since pass 33 are the site's
 * own set in chrome.css (navy again since pass 44); front.css's
 * --tf-* are aliases of them. The alias block that used to point --t-h-* back at --tf-* is
 * gone: with the aliases running the other way it was a cycle, and a
 * custom property in a cycle is invalid on both ends.
 * ------------------------------------------------------------------ */

.t-home a {
	text-decoration: none;
}

.t-home button {
	font: inherit;
	color: inherit;
}

.t-home h2 em {
	font-style: normal;
	color: var(--tf-cyan);
}

/* Section copy sits directly on the coloured bands; these give each block
   its distance from the band's title. */
.t-home .t-crisis,
.t-home .t-strip__wrap {
	margin-top: 36px;
}

.t-home .t-panels {
	margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 * 2. The phone in the hero
 * ------------------------------------------------------------------ */

.t-home .t-phone {
	position: relative;
	justify-self: center;
	width: min(100%, 296px);
}

.t-home .t-phone__body {
	border-radius: 38px;
	padding: 8px;
	background: linear-gradient(160deg, #26344e, #0d1526 62%);
	box-shadow:
		0 40px 90px -30px rgba(0, 0, 0, .9),
		0 0 0 1px rgba(126, 158, 208, .2),
		0 0 90px -20px rgba(47, 114, 245, .55);
}

.t-home .t-phone img {
	border-radius: 31px;
}

.t-home .t-tag {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 9px;
	background: rgba(var(--t-h-ink-2-rgb), .92);
	border: 1px solid var(--t-h-line-2);
	border-radius: 11px;
	padding: 9px 13px;
	box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .85);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.t-home .t-tag i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}

.t-home .t-tag em {
	font-style: normal;
	font-family: var(--t-h-mono);
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--t-h-fg-3);
	display: block;
}

.t-home .t-tag strong {
	font-size: 15px;
	font-variation-settings: var(--t-h-wide);
	letter-spacing: -.01em;
	display: block;
	line-height: 1.2;
	color: var(--t-h-fg);
}

.t-home .t-tag u {
	text-decoration: none;
	font-size: 12px;
	color: var(--t-h-fg-3);
	font-family: var(--t-h-mono);
}

.t-home .t-tag--a { top: 9%;    left: -30%; }
.t-home .t-tag--b { bottom: 15%; right: -24%; }

/* ------------------------------------------------------------------ *
 * 3. The signal map — section 01 (pass 70, in the simulator's place)
 *
 * Up to twenty signal chips on the left, the four pillars in the middle,
 * the score ring on the right; home.js lays an SVG over the grid, draws a
 * curve from every chip to its pillar and from every pillar to the ring,
 * and sends pulses along them once the frame scrolls into view. The
 * markup ships at its end state (.is-lit / .is-on, arcs full) so the panel
 * reads with no script; the script zeroes it before it plays. Pillar
 * colours are the app's own four, set per element as --pc.
 * ------------------------------------------------------------------ */

.t-home .t-sigs {
	position: relative;
	margin-top: 36px;
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
	background: linear-gradient(180deg, rgba(31, 58, 140, .55), rgba(23, 42, 112, .55));
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .6);
	overflow: hidden;
}

.t-home .t-sigs__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--t-h-line);
	font-family: var(--t-h-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

.t-home .t-sigs__bar i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t-h-green);
	box-shadow: 0 0 10px var(--t-h-green);
}

.t-home .t-sigs__src b { font-weight: inherit; }

.t-home .t-sigs__stamp {
	margin-left: auto;
	color: var(--t-h-fg-2);
	text-transform: none;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.t-home .t-sigs__map {
	--stacked: 0;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	padding: 30px clamp(20px, 3vw, 40px) 34px;
}

.t-home .t-sigs__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.t-home .t-sigs__wires path {
	fill: none;
	stroke: var(--pc);
	stroke-width: 1.25;
	opacity: .16;
}

.t-home .t-sigs__wires circle {
	fill: var(--pc);
	filter: drop-shadow(0 0 6px var(--pc));
}

.t-home .t-sigs__col {
	position: relative;
	z-index: 1;
}

.t-home .t-sigs__k {
	margin-bottom: 14px;
	font-family: var(--t-h-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

.t-home .t-sigs__k b {
	color: var(--t-h-fg-2);
	font-weight: 500;
}

.t-home .t-sigs__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.t-home .t-sig {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--t-h-line);
	border-radius: 9px;
	background: rgba(17, 31, 90, .55);
	font-family: var(--t-h-mono);
	font-size: 11.5px;
	letter-spacing: .02em;
	color: var(--t-h-fg-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .35s, border-color .35s, background .35s;
}

.t-home .t-sig i {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--t-h-line-2);
	transition: background .35s, box-shadow .35s;
}

.t-home .t-sig.is-lit {
	color: var(--t-h-fg);
	border-color: var(--pc);
	background: rgba(17, 31, 90, .85);
}

.t-home .t-sig.is-lit i {
	background: var(--pc);
	box-shadow: 0 0 8px var(--pc);
}

/* The pillars ride centred against the taller signal column, label included,
   so the wires fan out symmetrically. */
.t-home .t-sigs__pils {
	display: grid;
	gap: 14px;
	align-content: center;
	height: 100%;
}

.t-home .t-sigs__pils .t-sigs__k {
	margin: 0;
}

.t-home .t-pil {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--t-h-line);
	border-radius: 12px;
	background: rgba(17, 31, 90, .6);
	transition: border-color .4s, box-shadow .4s;
}

.t-home .t-pil.is-lit {
	border-color: var(--pc);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 28px -8px var(--pc);
}

.t-home .t-pil svg {
	width: 44px;
	height: 44px;
	transform: rotate(-90deg);
}

.t-home .t-pil circle {
	fill: none;
	stroke-width: 4;
}

.t-home .t-pil__bg {
	stroke: rgba(160, 190, 255, .16);
}

.t-home .t-pil__arc {
	stroke: var(--pc);
	stroke-linecap: round;
	stroke-dasharray: 113.1;
	transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1);
}

.t-home .t-pil__n {
	font-family: var(--t-h-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pc);
}

.t-home .t-pil__v {
	font-size: 20px;
	font-weight: 700;
	font-variation-settings: var(--t-h-wide);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--t-h-fg);
}

.t-home .t-pil__v small {
	margin-left: 3px;
	font-size: 11px;
	font-weight: 400;
	color: var(--t-h-fg-3);
}

.t-home .t-sigs__score {
	display: grid;
	align-content: center;
	justify-items: center;
	height: 100%;
	text-align: center;
}

.t-home .t-sigs__ring {
	position: relative;
	width: 170px;
	height: 170px;
}

.t-home .t-sigs__ring svg {
	transform: rotate(-90deg);
}

.t-home .t-sigs__ringBg {
	fill: none;
	stroke: rgba(160, 190, 255, .16);
	stroke-width: 10;
}

.t-home .t-sigs__ringArc {
	fill: none;
	stroke: url(#t-sigsRingG);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 452.4;
	transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1);
}

.t-home .t-sigs__mid {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
}

.t-home .t-sigs__num {
	font-size: 52px;
	font-weight: 700;
	font-variation-settings: var(--t-h-wide);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.t-home .t-sigs__cap {
	margin-top: 6px;
	font-family: var(--t-h-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

.t-home .t-sigs__verdict {
	margin-top: 16px;
	font-size: 24px;
	font-weight: 700;
	font-variation-settings: var(--t-h-wide);
	color: var(--t-h-green);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .5s, transform .5s;
}

.t-home .t-sigs__verdict.is-on {
	opacity: 1;
	transform: none;
}

.t-home .t-sigs__lever {
	margin-top: 14px;
	padding: 10px 14px;
	max-width: 26ch;
	border: 1px solid var(--t-h-line-2);
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--t-h-fg-2);
	opacity: 0;
	transition: opacity .5s .2s;
}

.t-home .t-sigs__lever.is-on {
	opacity: 1;
}

.t-home .t-sigs__lever b {
	display: block;
	margin-bottom: 4px;
	font-family: var(--t-h-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
}

.t-home .t-sigs__disc {
	margin-top: 18px;
	max-width: 80ch;
	font-family: var(--t-h-mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--t-h-fg-3);
}

/* ------------------------------------------------------------------ *
 * 4. Brain wipe + facts — on the cyan band, so the two panels stay dark
 *
 * The overlay clips with clip-path rather than a width + overflow box, so the
 * atrophied brain is never resized and stays registered against the healthy
 * one pixel for pixel. Both PNGs are transparent, so the overlay paints the
 * panel colour behind itself or the two images read through each other.
 * ------------------------------------------------------------------ */

.t-home .t-crisis {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 1px;
	background: var(--t-h-line);
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
	overflow: hidden;
}

.t-home .t-ba {
	--t-ba-p: 0%;
	margin: 0;
	background: var(--t-h-ink-2);
	padding: 28px 26px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.t-home .t-ba__stage {
	position: relative;
	border-radius: 10px;
}

.t-home .t-ba__base,
.t-home .t-ba__over img {
	display: block;
	width: 100%;
	height: auto;
}

.t-home .t-ba__over {
	position: absolute;
	inset: 0;
	background: var(--t-h-ink-2);
	clip-path: inset(0 calc(100% - var(--t-ba-p)) 0 0);
}

/* The divider rides the same custom property as the clip edge, so the line and
   the reveal cannot drift apart. */
.t-home .t-ba__div {
	position: absolute;
	top: -2%;
	bottom: -2%;
	left: var(--t-ba-p);
	width: 2px;
	margin-left: -1px;
	background: var(--t-h-cyan);
	box-shadow: 0 0 14px rgba(53, 200, 240, .45);
	pointer-events: none;
	opacity: .9;
}

.t-home .t-ba__div i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	background: var(--t-h-ink);
	border: 2px solid var(--t-h-cyan);
}

/* The two chevrons on the knob, drawn rather than shipped as an icon. */
.t-home .t-ba__div i::before,
.t-home .t-ba__div i::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border: 2px solid var(--t-h-cyan);
	border-width: 2px 2px 0 0;
}

.t-home .t-ba__div i::before { left: 6px;  transform: rotate(-135deg); }
.t-home .t-ba__div i::after  { right: 6px; transform: rotate(45deg); }

/* A real range input carries the interaction: pointer drag, arrow keys and an
   accessible name for free. Its thumb is 1px wide and invisible, so the value
   tracks the pointer within half a pixel of the divider we draw ourselves. */
.t-home .t-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: ew-resize;
	/* Vertical swipes must still scroll the page — the control covers the whole
	   image, and on a phone that is most of the screen. */
	touch-action: pan-y;
	-webkit-appearance: none;
	appearance: none;
}

.t-home .t-ba__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1px;
	height: 100%;
	background: transparent;
	cursor: ew-resize;
}

.t-home .t-ba__range::-moz-range-thumb {
	width: 1px;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: ew-resize;
}

.t-home .t-ba__range:focus { outline: none; }

.t-home .t-ba__stage:has(.t-ba__range:focus-visible) {
	outline: 2px solid var(--t-h-cyan);
	outline-offset: 4px;
}

.t-home .t-ba__legend {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
	font-family: var(--t-h-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Both labels stay above AA at all times — the active one is marked by ink and
   its dot, never by fading the other one out.

   One line each, always. The dot is drawn on both labels and only *coloured*
   on the active one, because as a `.is-on::before` it appeared and disappeared
   as the wipe moved and took 13px of the row with it — enough, at 11px on a
   phone, to tip the pair over into wrapping halfway through the scroll. The
   labels describe the two scans; nothing about them should move while the
   scans do. */
.t-home .t-ba__lab {
	color: var(--t-h-fg-2);
	transition: color .2s ease;
	white-space: nowrap;
}

.t-home .t-ba__lab.is-on {
	color: var(--t-h-fg);
}

.t-home .t-ba__lab::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 7px;
	vertical-align: 1px;
	background: transparent;
	transition: background-color .2s ease;
}

.t-home .t-ba__lab.is-on::before {
	background: var(--t-h-cyan);
}

.t-home .t-facts {
	background: var(--t-h-ink-2);
	padding: 28px 26px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.t-home .t-fact + .t-fact {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--t-h-line);
}

.t-home .t-fact__n {
	font-size: clamp(29px, 3.2vw, 42px);
	font-weight: 700;
	font-variation-settings: var(--t-h-wide);
	line-height: 1;
	letter-spacing: -.022em;
	font-variant-numeric: tabular-nums;
	color: var(--t-h-fg);
}

/* Green on the one figure that is good news — the share of risk that is
   modifiable is the whole premise of the product. */
.t-home .t-fact--hi .t-fact__n {
	color: var(--t-h-green);
}

.t-home .t-fact p {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--t-h-fg-2);
	max-width: 34ch;
}

.t-home .t-fact sup {
	font-family: var(--t-h-mono);
	font-size: 9px;
	color: var(--t-h-fg-3);
	margin-left: 2px;
	vertical-align: super;
	line-height: 0;
}

.t-home .t-facts__src {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--t-h-line);
	font-family: var(--t-h-mono);
	font-size: 10.5px;
	letter-spacing: .05em;
	line-height: 1.7;
	color: var(--t-h-fg-3);
}

.t-home .t-facts__src sup {
	font-size: 9px;
	margin-right: 1px;
}

/* ------------------------------------------------------------------ *
 * 5. Filmstrip
 * ------------------------------------------------------------------ */

.t-home .t-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 264px;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 0 26px;
	scrollbar-width: thin;
	scrollbar-color: var(--t-h-line-2) transparent;
}

/* macOS draws overlay scrollbars, which are invisible at rest, so on a desktop
   Mac the only sign this strip moved was the fifth card being cut — which reads
   as a broken layout rather than an invitation. ::-webkit-scrollbar is not an
   answer: Chrome ignores it once scrollbar-color is set, and even without that
   it kept the scrollbar as an overlay (offsetHeight - clientHeight measured 0).
   So the cue is drawn here instead: a fade at whichever edge still has cards
   behind it, switched off by home.js when the strip is against that end. */
/* The App band sits on its own, lighter navy. Until pass 49 the cyan Scale
   block sat between the simulator and the screens; with it gone, two plain
   bands on the same ground read as one long section. The strip's edge fades
   below take the same colour, so they still dissolve into the band. */
.t-home #t-app {
	--t-app-bg: var(--t-h-ink-2);
	--t-app-bg-rgb: var(--t-h-ink-2-rgb);
	background: var(--t-app-bg);
	border-top: 1px solid var(--t-h-line);
}

.t-home .t-strip__wrap {
	position: relative;
}

.t-home .t-strip__wrap::before,
.t-home .t-strip__wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 26px;
	width: 72px;
	z-index: 2;
	pointer-events: none;
	transition: opacity .2s ease;
}

.t-home .t-strip__wrap::before {
	left: 0;
	background: linear-gradient(90deg, var(--t-app-bg, var(--t-h-ink)) 15%, rgba(var(--t-app-bg-rgb, var(--t-h-ink-rgb)), 0));
}

.t-home .t-strip__wrap::after {
	right: 0;
	background: linear-gradient(270deg, var(--t-app-bg, var(--t-h-ink)) 15%, rgba(var(--t-app-bg-rgb, var(--t-h-ink-rgb)), 0));
}

/* Both are on until the script says otherwise, so a reader without JS never
   gets a fade over a strip that has nothing more to show. */
.t-home .t-strip__wrap:not(.is-live)::before,
.t-home .t-strip__wrap:not(.is-live)::after,
.t-home .t-strip__wrap.at-start::before,
.t-home .t-strip__wrap.at-end::after {
	opacity: 0;
}

.t-home .t-shot {
	scroll-snap-align: start;
}

.t-home .t-shot__frame {
	border-radius: 26px;
	padding: 6px;
	background: linear-gradient(160deg, #23314a, #0c1424 60%);
	box-shadow:
		0 26px 56px -30px rgba(0, 0, 0, .9),
		0 0 0 1px rgba(126, 158, 208, .16);
}

.t-home .t-shot img {
	border-radius: 21px;
}

.t-home .t-shot__idx {
	font-family: var(--t-h-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--t-h-cyan);
	margin: 18px 0 6px;
}

.t-home .t-shot h3 {
	--fs: 17px;
	font-variation-settings: "wdth" 108;
}

.t-home .t-shot p {
	font-size: 13.5px;
	color: var(--t-h-fg-2);
	margin-top: 7px;
}

/* ------------------------------------------------------------------ *
 * 6. Panels — on the violet band, so they take the band's glass look
 * ------------------------------------------------------------------ */

.t-home .t-panels {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.t-home .t-panel {
	background: var(--t-h-ink-2);
	border: 1px solid var(--t-h-line);
	border-radius: var(--t-h-r);
	padding: 26px 24px;
}

.t-home .t-panel h3 {
	--fs: 19px;
	font-variation-settings: "wdth" 110;
	margin-bottom: 10px;
}

.t-home .t-panel p {
	font-size: 14.5px;
	color: var(--t-h-fg-2);
}

.t-home .t-panel__k {
	font-family: var(--t-h-mono);
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--t-h-fg-3);
	margin-bottom: 16px;
	display: block;
}

.t-home .t-panel--wide  { grid-column: span 7; }
.t-home .t-panel--nar   { grid-column: span 5; }
.t-home .t-panel--half  { grid-column: span 6; }

.t-home .t-panel--accent {
	background: linear-gradient(150deg, rgba(47, 114, 245, .20), rgba(var(--t-h-ink-2-rgb), .6) 62%);
	border-color: rgba(47, 114, 245, .35);
}

.t-home .t-big {
	font-size: 46px;
	font-weight: 700;
	font-variation-settings: var(--t-h-wide);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--t-h-fg);
}

.t-home .tf-sys .t-panel {
	background: rgba(6, 12, 30, .46);
	border-color: rgba(255, 255, 255, .22);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.t-home .tf-sys .t-panel--accent {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .35);
}

.t-home .tf-sys .t-panel p,
.t-home .tf-sys .t-panel__k,
.t-home .tf-sys .t-big {
	color: rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------------ *
 * 7. Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 960px) {
	.t-home .t-phone { order: -1; width: min(100%, 268px); }
	.t-home .t-tag--a { left: -6%; }
	.t-home .t-tag--b { right: -4%; }
}

/* Half-page view. */
@media (max-width: 900px) {
	.t-home .t-crisis { grid-template-columns: 1fr; }
}

/* The map narrows its columns, then stacks: signals in three columns, the
   pillars two by two, the score beneath. --stacked tells home.js to drop the
   chip wires (twenty curves into a wrapped grid is spaghetti) and keep only
   the pillar → ring ones, drawn downward. */
@media (max-width: 1100px) {
	.t-home .t-sigs__map { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .9fr); }
}

/* Pass 94: with the app's real signal names the longest chips ("Strength
   sessions", "Respiratory rate") ellipsised in the narrow three-column range;
   tighter chips there keep every name whole. */
@media (min-width: 861px) and (max-width: 1100px) {
	.t-home .t-sigs__map { column-gap: 28px; padding-left: 22px; padding-right: 22px; }
	.t-home .t-sigs__list { gap: 8px; }
	.t-home .t-sig { gap: 7px; padding: 0 9px; font-size: 11px; letter-spacing: 0; }
}

/* Pass 95: "Walking steadiness" (the longest name) still clipped at the very
   bottom of that range. */
@media (min-width: 861px) and (max-width: 920px) {
	.t-home .t-sig { gap: 6px; padding: 0 8px; font-size: 10.5px; }
}

@media (max-width: 860px) {
	.t-home .t-sigs__map { --stacked: 1; grid-template-columns: 1fr; gap: 26px; }
	.t-home .t-sigs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.t-home .t-sigs__pils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.t-home .t-sigs__pils .t-sigs__k { grid-column: 1 / -1; }
}

/* Pass 94: three columns ellipsised the longest names below ~700px. */
@media (max-width: 700px) {
	.t-home .t-sigs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.t-home .t-sig { padding: 0 10px; font-size: 11px; }
}

/* Phones (pass 89). Twenty chips in two columns plus four stacked pillar cards
   ran the map to ~1250px on a 390px screen – too busy for a phone. Below 560px
   the chip column goes and each pillar card names its own readings on a
   line or two beneath the value (page-tolion-home.php prints them in the card
   as .t-pil__sigs), so the same twenty signals read as four groups and the
   block is under half the height. The readings brighten with their pillar as
   the script lights it. */
.t-home .t-pil__sigs,
.t-home .t-pil__cnt { display: none; }

@media (max-width: 560px) {
	.t-home .t-sigs__col--list { display: none; }
	/* "Apple Health · Health Connect" broke as "…HEALTH / CONNECT" at 390px;
	   the two sources take a line each instead. */
	.t-home .t-sigs__bar { padding: 10px 16px; line-height: 1.5; }
	.t-home .t-sigs__src > span { display: block; }
	.t-home .t-sigs__src b { display: none; }
	.t-home .t-pil__cnt { display: inline; }
	.t-home .t-sigs__map { gap: 24px; padding: 22px 16px 26px; }
	.t-home .t-sigs__pils { grid-template-columns: 1fr; gap: 10px; }
	.t-home .t-sigs__pils .t-sigs__k { margin-bottom: 2px; }
	.t-home .t-pil {
		grid-template-columns: 40px 1fr;
		column-gap: 12px;
		row-gap: 7px;
		padding: 10px 12px 11px 10px;
	}
	.t-home .t-pil svg { width: 40px; height: 40px; }
	.t-home .t-pil__v { font-size: 18px; }
	.t-home .t-pil__sigs {
		display: flex;
		flex-wrap: wrap;
		grid-column: 1 / -1;
		font-family: var(--t-h-mono);
		font-size: 10.5px;
		letter-spacing: .02em;
		line-height: 1.6;
		color: var(--t-h-fg-3);
		transition: color .35s;
	}
	/* The separator trails each name, so a wrapped line never opens with one. */
	/* Each name lights on its own as its chip would on desktop (home.js adds
	   .is-lit in the same sequence), and flashes in the pillar's colour
	   (.is-hot) when an idle pulse sets off from it. */
	.t-home .t-pil__sigs span {
		white-space: nowrap;
		opacity: .55;
		transition: color .35s, opacity .35s, text-shadow .35s;
	}
	.t-home .t-pil__sigs span.is-lit { opacity: 1; color: var(--t-h-fg-2); }
	.t-home .t-pil__sigs span.is-hot { color: var(--pc); text-shadow: 0 0 10px var(--pc); }
	.t-home .t-pil__sigs span:not(:last-child)::after {
		content: "·";
		margin: 0 6px;
		color: var(--t-h-line-2);
		text-shadow: none;
	}
	/* Full-width cards sit on the pillar → ring wire; solid backs hide it where
	   it passes beneath them, so only the spine between cards shows. */
	.t-home .t-pil { background: #142565; }
}

@media (max-width: 860px) {
	.t-home .t-panel--wide,
	.t-home .t-panel--nar,
	.t-home .t-panel--half { grid-column: span 12; }
}

@media (max-width: 620px) {
	/* "BRAIN WITH DEMENTIA" and "HEALTHY BRAIN" have to sit side by side on one
	   line each, and at 11px they need 293px against the 280 a 390px phone gives
	   them. Fluid rather than a second fixed size, so the pair still fits on a
	   320px screen without the nowrap above turning into an overflow. */
	.t-home .t-ba__legend {
		font-size: clamp(8.5px, 2.6vw, 11px);
		letter-spacing: .04em;
		gap: 8px;
	}
}

@media (max-width: 520px) {
	.t-home .t-tag { display: none; }

	/* 72px is a quarter of a phone screen and swallows most of a 264px card;
	   the cut edge is doing more of the work at this size anyway. */
	.t-home .t-strip__wrap::before,
	.t-home .t-strip__wrap::after { width: 40px; }
}

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

/* Anchor targets land with the section's top edge exactly under the fixed
   header, which is 59px tall once the page has moved (chrome.css, pass 48).
   The hero button jumps to #t-signals (the section), not the frame inside it. */
.t-home #t-signals,
.t-home #t-app,
.t-home #t-system {
	scroll-margin-top: 59px;
}

/* Collapsed-menu widths: the scrolled band is 67px there (front.css says why). */
@media (max-width: 1024px) {
	.t-home #t-signals,
	.t-home #t-app,
	.t-home #t-system {
		scroll-margin-top: 67px;
	}
}