/* Prodigy components. Every color is a token; every transition and animation sits in the
   prefers-reduced-motion: no-preference block at the end of this file.

   Markup contract (header.php, footer.php and each skin's home.html use these names):
   header.site-header > optional .topbar > .topbar-in (phone, email, nav.social), then .bar > a.brand (img + .wordmark >
     .name + .tagline, or a.brand.brand--logo > img.logo.logo-light + img.logo.logo-dark), nav.nav,
     button.theme-toggle (svg.ic-moon + svg.ic-sun), optional a.btn.btn--primary.header-cta,
     details.menu > summary.menu-btn + nav.menu-panel; a nav parent with children is li.has-sub > a + button.sub-btn
     + ul.sub > li > a in nav.nav and div.menu-group > a + button.sub-btn + div.menu-sub > a in nav.menu-panel
   section.band [.band--alt | .band--deep | .band--dusk] > .wrap > .section-head (.eyebrow, h2, .lede)
   .btn.btn--primary | .btn--ghost, .stores (store buttons), a.more (text link with a chevron), a.textlink (with an arrow)
   footer.site-footer > .wrap > p + nav + optional nav.social.social--foot + optional p.credit
   then optional .quickbar (phone Book and Call) and button.to-top, shown by engine/js/page.js
   header.band.page-hero (the title band of page, single, index and 404) + .band.page-body > .wrap > .entry */

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 20;
	background: var(--header-bg);
	-webkit-backdrop-filter: saturate(1.3) blur(12px);
	backdrop-filter: saturate(1.3) blur(12px);
	border-bottom: 1px solid var(--line);
}
.site-header .bar {
	max-width: var(--max);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	min-height: 64px;
	padding-block: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
}
/* The Observatory header (a top bar above the bar, prodigyhealing) spaces its items a little wider; other skins keep 12 px. */
@media (min-width: 560px) { .site-header .topbar + .bar { gap: 16px; } }

/* The top bar: phone, email and the social marks, on wide screens only */
.topbar { display: none; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
@media (min-width: 761px) { .topbar { display: block; } }
.topbar-in {
	max-width: var(--max);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 44px;
}
.topbar a { color: var(--fg-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.topbar a:hover { color: var(--link); }
.topbar-gap { flex: 1; }
.social { display: flex; flex-wrap: wrap; gap: 0; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-2); }
.social a svg { width: 18px; height: 18px; }
.social a:hover { color: var(--link); }
.social--foot a { width: 44px; height: 44px; }
.social--foot a svg { width: 20px; height: 20px; }
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	min-width: 0;
	margin-right: auto;
	color: var(--heading);
	text-decoration: none;
}
.brand:hover { color: var(--heading); }
.brand img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 6px var(--halo)); }
.brand .wordmark { display: flex; flex-direction: column; min-width: 0; }
.brand .name {
	font-family: var(--f-display);
	font-weight: var(--w-head);
	font-size: 1.4rem;
	line-height: 1.05;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.brand .tagline {
	display: none;
	font-size: 0.72rem;
	font-weight: var(--w-body-strong);
	letter-spacing: 0.06em;
	color: var(--fg-2);
	white-space: nowrap;
}
@media (min-width: 1240px) { .brand .tagline { display: block; } }
@media (max-width: 359px) { .brand { gap: 8px; } .brand .name { font-size: 1.2rem; } .brand img { width: 34px; height: 34px; } }
/* The horizontal logo: the light file in the light theme, the dark file in the dark one (the toggle's own tokens) */
.brand--logo img.logo { width: auto; height: 48px; filter: none; }
.brand--logo .logo-light { display: var(--show-moon); }
.brand--logo .logo-dark { display: var(--show-sun); }
@media (max-width: 560px) { .brand--logo img.logo { width: auto; height: 40px; } }
@media (max-width: 359px) { .brand--logo img.logo { width: auto; height: 34px; } }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	border-radius: var(--radius-btn);
	color: var(--fg-2);
	font-size: 0.96rem;
	font-weight: var(--w-body-strong);
	text-decoration: none;
	white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="page"],
.nav a.is-current { color: var(--link); }

.theme-toggle,
.menu-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	flex: none;
	padding: 0;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--surface);
	color: var(--heading);
	cursor: pointer;
}
.site-header .topbar + .bar .theme-toggle,
.site-header .topbar + .bar .menu-btn { background: var(--glass); }
.theme-toggle:hover,
.menu-btn:hover { border-color: var(--accent-2); color: var(--link); }
.theme-toggle svg,
.menu-btn svg { width: 20px; height: 20px; }
.theme-toggle .ic-sun { display: var(--show-sun); }
.theme-toggle .ic-moon { display: var(--show-moon); }
.header-cta { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: min(300px, calc(100vw - 32px));
	max-height: calc(100svh - 96px);
	overflow-y: auto;
	padding: 8px;
	display: grid;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 50px var(--shadow);
}
/* While the menu is open (html.menu-open, set by engine/js/nav.js) the header sits above the fixed bottom controls
   (.quickbar 58, .to-top 59, the Ask launcher 60 and panel 61), so a long panel with its groups open stays tappable. */
.menu-open .site-header { z-index: 62; }
.menu-panel a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 14px;
	border-radius: 12px;
	color: var(--fg);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.menu-panel a:hover { background: var(--surface-2); color: var(--heading); }

/* Submenus. Wide nav: li.has-sub > a + button.sub-btn + ul.sub, opened by the button and by keyboard focus inside it
   (engine/js/nav.js sets li.open), and by hover where the pointer is fine. Phone menu: div.menu-group > a + button.sub-btn +
   div.menu-sub. The chevron turns with the button's aria-expanded. */
.sub-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-btn);
	background: none;
	color: var(--fg-2);
	cursor: pointer;
}
.sub-btn svg { width: 14px; height: 14px; }
.sub-btn:hover,
.sub-btn[aria-expanded="true"] { color: var(--link); }
.sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav .has-sub { position: relative; display: flex; align-items: center; }
.nav .has-sub > a { padding-right: 0; }
.nav .sub {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	display: grid;
	gap: 0;
	width: max-content;
	min-width: 240px;
	max-width: min(320px, calc(100vw - 32px));
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 50px var(--shadow);
	visibility: hidden;
	opacity: 0;
}
/* The bridge across the 10 px gap, so the pointer can travel from the parent into the panel. */
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 11px; }
/* Set by nav.js when the panel would pass the right edge of the window. */
.nav .sub.sub--end { left: auto; right: 0; }
/* No :focus-within rule: focus can stay on a button after the pointer moves to another item, and the panel would stay
   up with aria-expanded false. nav.js opens the panel on keyboard focus instead. */
.nav .has-sub.open > .sub { visibility: visible; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.nav .has-sub:hover:not(.shut) > .sub { visibility: visible; opacity: 1; }
}
.nav .sub a {
	display: flex;
	min-height: 46px;
	padding: 6px 14px;
	border-radius: 12px;
	color: var(--fg);
	line-height: 1.3;
	white-space: normal;
}
.nav .sub a:hover { background: var(--surface-2); color: var(--heading); }
.nav .sub a[aria-current="page"] { color: var(--link); }
.menu-group { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; }
.menu-group > .sub-btn { width: 44px; min-width: 44px; height: 46px; min-height: 46px; border-radius: 12px; }
.menu-group > .sub-btn:hover { background: var(--surface-2); }
.menu-sub { grid-column: 1 / -1; display: none; padding-left: 14px; }
.menu-group.open > .menu-sub { display: grid; }
.menu-sub a { min-height: 46px; padding-block: 6px; line-height: 1.3; }

@media (max-width: 1039px) {
	.site-header .bar > .nav { display: none; }
}
@media (min-width: 1040px) {
	.menu { display: none; }
}
/* Five 44 px chevrons fit beside the brand and the call to action from 1180 px (the --max width) once the nav's gap goes.
   Below that the wide nav's chevrons are 24 px wide (the WCAG 2.5.8 floor), and from 1040 to 1139 px the links
   tighten as well. */
@media (min-width: 1180px) {
	.nav > ul { gap: 0; }
}
@media (min-width: 1040px) and (max-width: 1179px) {
	.nav .sub-btn { width: 24px; min-width: 24px; }
}
@media (min-width: 1040px) and (max-width: 1139px) {
	.nav > ul { gap: 0; }
	.nav > ul > li > a { padding: 0 6px; }
}
@media (max-width: 559px) {
	.site-header .header-cta { display: none; }
}

/* ---------- Buttons and links ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--clear);
	border-radius: var(--radius-btn);
	font-family: var(--f-body);
	font-size: 1rem;
	font-weight: var(--w-body-strong);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px var(--halo); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px var(--halo); }
.btn--ghost { background: var(--glass); color: var(--heading); border-color: var(--line-2); }
.btn--ghost:hover { color: var(--heading); border-color: var(--accent-2); }
.btn svg { width: 20px; height: 20px; flex: none; }
.cta-row,
.stores { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.stores .btn { min-width: 220px; }
/* The store badges: Apple's and Google's own artwork (engine/img), 48px tall, drawn as the link's background with an
   aria-label, so they never become a page's og:image. Clear space is the 16px row gap. */
.store { display: inline-block; flex: none; height: 48px; border-radius: 7px; background-repeat: no-repeat; background-size: contain; background-position: center; }
.store--apple { width: 144px; background-image: url("../img/badge-app-store.svg"); }
.store--play { width: 162px; background-image: url("../img/badge-google-play.svg"); }
@media (max-width: 479px) { .stores .btn { flex: 1 1 100%; } }

.more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--link);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.more::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--link);
	font-weight: var(--w-body-strong);
	text-decoration: none;
}
.textlink::after { content: "\2192"; }
.links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* ---------- Labels and section heads ---------- */
.eyebrow,
.label {
	font-family: var(--f-body);
	font-size: var(--fs-label);
	font-weight: var(--w-body-strong);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--label);
}
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { justify-items: center; text-align: center; margin-inline: auto; }
.section-head h2 { display: flex; align-items: flex-start; gap: 0.28em; }
.section-head--center h2 { justify-content: center; }
.spark { width: 0.42em; height: 0.42em; flex: none; margin-top: 0.14em; color: var(--accent-2); fill: currentColor; overflow: visible; }

/* ---------- Bands ---------- */
.band--alt { background: var(--bg-2); }
.band > canvas.sparkles,
.hero > canvas.sparkles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.band--deep {
	background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--deep-2), var(--deep) 72%);
	color: var(--on-deep);
	--focus: var(--deep-accent);
}
.band--deep h2, .band--deep h3 { color: var(--on-deep); }
.band--deep .eyebrow { color: var(--deep-accent); }
.band--deep .lede, .band--deep p { color: var(--on-deep-2); }
.band--deep .btn--ghost { background: var(--deep-panel); color: var(--on-deep); border-color: var(--deep-line); }
.band--deep .btn--ghost:hover { border-color: var(--deep-accent); }
.band--deep .more, .band--dusk .more { color: var(--deep-accent); }

/* Dusk: the sigil sets at the bottom of the page */
.band--dusk {
	overflow: hidden;
	background: linear-gradient(to bottom, var(--deep-top) 0, var(--deep-2) 70px, var(--deep) 200px);
	color: var(--on-deep);
	--sig-glow: var(--deep-sig-glow);
	--sig-line: var(--deep-sig-line);
	--sig-core: var(--deep-sig-core);
	--focus: var(--deep-accent);
}
.band--dusk::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(60% 50% at 50% 0%, var(--deep-glow), var(--clear) 70%);
}
.band--dusk > .wrap { padding-top: 0; }
.band--dusk h2, .band--dusk h3 { color: var(--on-deep); }
.band--dusk h2 { display: flex; align-items: flex-start; gap: 0.28em; }
.band--dusk p { color: var(--on-deep-2); }
.band--dusk .spark { color: var(--deep-accent); }
.band--dusk .btn--primary { background: var(--deep-accent); color: var(--deep-accent-ink); box-shadow: 0 0 30px var(--deep-halo); }
.band--dusk .btn--ghost { background: var(--deep-panel); color: var(--on-deep); border-color: var(--deep-line); }
.band--dusk .btn--ghost:hover { border-color: var(--deep-accent); }
.sunset { display: grid; justify-items: center; }
.sunset-line { height: 1.5px; width: 100%; opacity: 0.7; background: linear-gradient(90deg, var(--clear), var(--deep-accent) 35%, var(--deep-accent) 65%, var(--clear)); }
.sunset svg { width: min(420px, 86%); display: block; transform: scaleY(-1); filter: drop-shadow(0 0 16px var(--deep-halo)); }
.dusk-grid { display: grid; gap: 36px; padding-top: clamp(36px, 6vw, 64px); }
.dusk-grid > div { display: grid; gap: 14px; align-content: start; }
.dusk-grid .cta-row, .dusk-grid .stores { margin-top: 10px; }
@media (min-width: 900px) { .dusk-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }

/* Sigil strokes and fills, tinted by tokens */
.s-glow { stroke: var(--sig-glow); } .f-glow { fill: var(--sig-glow); }
.s-line { stroke: var(--sig-line); } .f-line { fill: var(--sig-line); }
.s-core { stroke: var(--sig-core); } .f-core { fill: var(--sig-core); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Heroes ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-copy { display: grid; gap: 22px; min-width: 0; max-width: 760px; }
.hero h1 { font-size: var(--fs-hero); font-weight: var(--w-hero); letter-spacing: -0.02em; line-height: 1; }
.hero h1 em, .hero h1 .plus { color: var(--label); font-style: italic; font-weight: var(--w-hero); }
.hero .who { color: var(--fg-2); max-width: 54ch; }
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: var(--fg-2);
	font-size: 0.95rem;
}
.facts b { color: var(--fg); }

/* Plate hero: copy beside a round photo inside an astrolabe ring */
.hero--plate > .wrap {
	display: grid;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	padding-block: clamp(48px, 7vw, 96px) var(--band-pad);
}
@media (max-width: 899px) { .hero--plate > .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero--plate .hero-copy { gap: 24px; }
.hero--plate h1 { letter-spacing: -0.015em; line-height: 1.02; }
.hero--plate h1 em { color: var(--label); }
.hero--plate .lede { font-size: 1.18rem; }
/* The hero turns through its slides (engine/js/page.js, [data-slides]): the words fade out and in, the two photo
   layers cross-fade inside the dial. Each slide is a <template class="slide"> in the content. */
.slide-text { display: grid; gap: 24px; }
.slide-text .eyebrow:empty { display: none; }
.slide-text .cta-row { padding-top: 4px; }
.slide-text.is-fading { opacity: 0; }
.rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-block: -6px; /* a 44 px target that sits where the mockup's 32 px line sits */
	justify-self: start;
	color: var(--fg-2);
	font-size: 0.95rem;
	text-decoration: none;
}
.rating b { color: var(--fg); font-weight: var(--w-body-strong); }
.rating:hover { color: var(--link); }
.hero--plate .facts { margin-top: 6px; }
.moon { display: inline-flex; align-items: center; gap: 8px; }
.moon svg { width: 18px; height: 18px; }
.moon-dark { fill: var(--line); }
.moon-lit { fill: var(--accent-2); }

.plate { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.astrolabe { position: relative; width: min(100%, 480px); aspect-ratio: 1; }
@media (max-width: 899px) { .astrolabe { width: min(100%, 400px); } }
.astrolabe img {
	position: absolute;
	inset: 11.8%;
	width: 76.4%;
	height: 76.4%;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 50%;
	box-shadow: 0 24px 60px var(--shadow), 0 0 0 1px var(--line);
}
.astrolabe img.photo { opacity: 0; }
.astrolabe img.photo.is-on { opacity: 1; }
.astrolabe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-line { fill: none; stroke: var(--fg-2); stroke-opacity: 0.45; stroke-width: 1; }
.ring-minor { fill: none; stroke: var(--fg-2); stroke-opacity: 0.55; stroke-width: 9; }
.ring-copper { fill: none; stroke: var(--accent-2); stroke-opacity: 0.7; stroke-width: 1; }
.ring-major { fill: none; stroke: var(--accent-2); stroke-width: 18; }
.ring-label { font-family: var(--f-body); font-size: 15px; font-weight: var(--w-body-strong); letter-spacing: 0.42em; fill: var(--label); }
.ring-label.is-dim { fill-opacity: 0.45; }
.ring-label.is-lit { fill: var(--accent-2); }
.ring-star { color: var(--accent-2); fill: currentColor; }
/* The Atlantean ornaments beside MIND, BODY and SPIRIT light and dim with their word */
.orn-line { fill: none; stroke: var(--label); stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter; }
.orn circle { fill: var(--label); }
.orn.is-dim { opacity: 0.45; }
.orn.is-lit .orn-line { stroke: var(--accent-2); }
.orn.is-lit circle { fill: var(--accent-2); }
.ticks { transform-origin: 0 0; }
/* The two nested triangles behind the photo: only their corners show past the dial */
.tri { fill: none; stroke: var(--accent-2); stroke-opacity: 0.8; stroke-width: 1.6; stroke-linejoin: round; }
.tri-inner { stroke-opacity: 0.45; stroke-dasharray: 2 6; }
.tri-dot { fill: var(--accent-2); }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: -4px; }
.dots button {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--clear);
	color: var(--line);
	cursor: pointer;
	display: grid;
	place-items: center;
}
.dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.dots button[aria-current="true"] { color: var(--accent-2); }
.dots button:hover { color: var(--link); }

/* Horizon hero: an aurora sky with a sigil rising on the horizon */
.hero--horizon, .hero--orbit { border-bottom: 1px solid var(--line); }
.hero--horizon::before, .hero--orbit::before {
	content: "";
	position: absolute;
	inset: -12%;
	z-index: -2;
	background:
		radial-gradient(42% 46% at 16% 22%, var(--aurora-1), var(--clear) 72%),
		radial-gradient(40% 44% at 86% 14%, var(--aurora-2), var(--clear) 72%),
		radial-gradient(60% 40% at 58% 88%, var(--aurora-3), var(--clear) 70%),
		radial-gradient(34% 40% at 72% 52%, var(--aurora-4), var(--clear) 72%),
		linear-gradient(to bottom, var(--sky-1), var(--sky-2) 55%, var(--sky-3));
}
.hero--horizon > .wrap { position: relative; padding-top: clamp(44px, 8vw, 96px); padding-bottom: 0; }
.hero--horizon .hero-copy { position: relative; z-index: 1; }
.hero-note { color: var(--fg-2); font-size: 0.98rem; }
.horizon { position: relative; display: grid; justify-items: center; margin-top: clamp(28px, 5vw, 40px); container-type: inline-size; }
.horizon::before {
	content: "";
	position: absolute;
	left: -50vw;
	right: -50vw;
	/* The sun box is min(560px, the row's width) wide; its base sits at that width times the viewBox ratio. */
	top: calc(min(560px, 100cqw) * 308.15 / 480);
	height: 1.5px;
	opacity: 0.75;
	background: linear-gradient(90deg, var(--clear), var(--sig-glow) 30%, var(--sig-line) 50%, var(--sig-glow) 70%, var(--clear));
}
.sun-wrap { width: min(560px, 100%); display: grid; }
.hero-sun, .hero-sun-reflect { width: 100%; display: block; overflow: visible; }
.hero-sun { filter: drop-shadow(0 0 18px var(--halo)); }
.hero-sun-reflect {
	height: calc(min(560px, 100cqw) * 308.15 / 480 * 0.42);
	opacity: 0.5;
	transform: scaleY(-1);
	-webkit-mask-image: linear-gradient(to top, var(--print-ink) 0%, var(--clear) 70%);
	mask-image: linear-gradient(to top, var(--print-ink) 0%, var(--clear) 70%);
}
@media (min-width: 1000px) { .horizon { justify-items: end; margin-top: -150px; } .hero--horizon .hero-copy { max-width: 600px; } }

/* Overview hero: the copy and a row of cards on one screen */
.hero--overview > .wrap { padding-bottom: var(--band-pad); }
.hero--overview .hero-copy { margin-bottom: clamp(28px, 4vw, 48px); }

/* Solo hero: a small site on one screen, copy beside a phone */
.hero--solo > .wrap {
	display: grid;
	gap: clamp(32px, 6vw, 72px);
	align-items: center;
	min-height: calc(100svh - 65px - env(safe-area-inset-top, 0px));
	padding-block: clamp(40px, 7vw, 88px);
}
@media (min-width: 820px) { .hero--solo > .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.hero--solo .say { font-family: var(--f-display); font-size: clamp(1.45rem, 1.6vw + 1rem, 2.1rem); line-height: 1.25; color: var(--heading); }
.solo-shot { display: grid; justify-items: center; }
.solo-shot img { width: auto; max-height: min(640px, 70svh); filter: drop-shadow(0 24px 44px var(--shadow)); }
@media (max-width: 819px) { .solo-shot img { max-height: 460px; } }

/* Orbit hero: the horizon sky, copy beside a phone with sparkle dust circling it (engine/js/sparkle.js data-style="orbit").
   .orbit shrinks to the phone; its canvas covers the phone plus a margin on every side (--orbit-mx, --orbit-my), sits
   over the phone so the near half of each orbit passes in front, and takes the skin's --orbit-1 to 3 as its dust. */
.hero--orbit > .wrap {
	position: relative;
	display: grid;
	gap: clamp(36px, 6vw, 64px);
	align-items: center;
	padding-block: clamp(44px, 7vw, 88px);
}
@media (min-width: 1000px) {
	.hero--orbit > .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
	.hero--orbit .hero-copy { max-width: 600px; }
}
.orbit {
	--spark-1: var(--orbit-1);
	--spark-2: var(--orbit-2);
	--spark-3: var(--orbit-3);
	position: relative;
	display: block;
}
.orbit > canvas.sparkles {
	position: absolute;
	left: calc(var(--orbit-mx) * -1);
	top: calc(var(--orbit-my) * -1);
	width: calc(100% + 2 * var(--orbit-mx));
	height: calc(100% + 2 * var(--orbit-my));
	max-width: none;
	z-index: 1;
	pointer-events: none;
}
.orbit .phone img { display: block; }

/* ---------- The live phone (engine/js/screens.js) ----------
   The screenshot stays in place as the picture and the fallback. Once screens.js has drawn its first frame it adds
   .is-live, and the live screen and the frame (engine/img/phone-frame.png) appear over the screenshot, which already
   shows the same chrome in the same places, so there is no flash and no layout shift. Without scripts or a canvas the
   screenshot is all there is. The screen box is the screenshot's own, in its 429 x 900 space: 14, 14, 401 x 872,
   corner radius 51. Inside it, --pt is one app point (the box is 402 points wide), so the chrome scales with the phone. */
.phone { position: relative; display: block; }
.phone .screen {
	position: absolute;
	left: calc(14 / 429 * 100%);
	top: calc(14 / 900 * 100%);
	width: calc(401 / 429 * 100%);
	height: calc(872 / 900 * 100%);
	border-radius: calc(51 / 401 * 100%) / calc(51 / 872 * 100%);
	overflow: hidden;
	isolation: isolate;
	container-type: size;
	visibility: hidden;
	background: var(--screen-bg);
	color: var(--screen-fg);
	font-family: var(--f-body);
	line-height: 1.2;
	text-align: left;
	-webkit-user-select: none;
	user-select: none;
}
.phone::after {
	content: "";
	position: absolute;
	inset: 0;
	visibility: hidden;
	pointer-events: none;
	background: url("../img/phone-frame.png") center / 100% 100% no-repeat;
}
.phone.is-live .screen, .phone.is-live::after { visibility: visible; }
.screen .live-screen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.screen .chrome { position: absolute; inset: 0; }
.screen svg { display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.screen .solid { fill: currentColor; stroke: none; }
.screen .sb-time {
	position: absolute; left: 0; top: calc(19 * var(--pt)); width: calc(152 * var(--pt));
	text-align: center; font-size: calc(17 * var(--pt)); font-weight: 600; line-height: calc(22 * var(--pt));
}
.screen .sb-icons {
	position: absolute; left: calc(250 * var(--pt)); top: calc(21 * var(--pt)); width: calc(115.5 * var(--pt)); height: calc(18 * var(--pt));
	display: flex; justify-content: flex-end; align-items: center; gap: calc(7.5 * var(--pt));
}
.screen .sb-icons svg { height: calc(13 * var(--pt)); width: auto; }
.screen .sb-icons .sb-dots { height: calc(4 * var(--pt)); opacity: 0.35; }
.screen .sb-charging .solid { fill: var(--screen-charge); }
.screen .sb-charging .sb-bolt { fill: var(--screen-bg); stroke: none; opacity: 0.7; }
.screen .sb-charging .sb-nub { stroke: var(--screen-charge); }

/* Lightfield: the status line and the five-tab glass bar over the field (Stop, Share, Sessions, Help, Settings, as
   FieldHomeScreen draws it with Mark Button off, its default) */
.lf-pill, .lf-bar {
	position: absolute;
	background: var(--screen-card);
	border: 1px solid var(--screen-line);
	-webkit-backdrop-filter: blur(calc(14 * var(--pt))) saturate(1.2);
	backdrop-filter: blur(calc(14 * var(--pt))) saturate(1.2);
}
.lf-pill {
	left: calc(132 * var(--pt)); top: calc(725 * var(--pt)); width: calc(138 * var(--pt)); height: calc(39 * var(--pt));
	border-radius: calc(20 * var(--pt));
	display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--pt));
	font-size: calc(13.5 * var(--pt)); font-weight: 500;
}
.lf-pill svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); stroke-width: 2.2; }
.lf-bar {
	left: calc(14 * var(--pt)); top: calc(774 * var(--pt)); width: calc(373 * var(--pt)); height: calc(57 * var(--pt));
	border-radius: calc(18 * var(--pt));
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lf-tab {
	display: grid; justify-items: center; align-content: start; padding-top: calc(9 * var(--pt)); gap: calc(5 * var(--pt));
	font-size: calc(10.5 * var(--pt)); font-weight: 500; white-space: nowrap;
}
.lf-tab svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.lf-tab .lf-stop { color: var(--screen-stop); }
.lf-tab .lf-stop rect { fill: var(--screen-fg); stroke: none; }

/* Mindsight: the app's own logo (MindsightLogo.svg, jamie's 2026-09-23 lockup, at 3x), the two groups of solid cards,
   and the round help and settings buttons over the stars. The logo box is the app's on a tall phone
   (MindsightStyle.homeLockupFit): 340 points wide, centered, 56 points above SOLO. app-mindsight.webp predates that
   logo, so the swap to live changes the lockup to the current one. */
.screen .ms-logo { position: absolute; left: calc(31 * var(--pt)); top: calc(107 * var(--pt)); width: calc(340 * var(--pt)); }
.screen .ms-logo img { display: block; width: 100%; height: auto; max-height: none; filter: none; }
.ms-group { position: absolute; left: calc(15 * var(--pt)); width: calc(372 * var(--pt)); display: grid; gap: calc(10 * var(--pt)); }
.ms-group--solo { top: calc(284 * var(--pt)); }
.ms-group--teacher { top: calc(553 * var(--pt)); }
.ms-label {
	height: calc(16 * var(--pt)); margin-bottom: calc(4 * var(--pt)); padding-left: calc(4 * var(--pt));
	font-size: calc(14.5 * var(--pt)); font-weight: 600; letter-spacing: 0.06em; line-height: calc(16 * var(--pt));
}
.ms-card, .ms-round { background: var(--screen-card); border: 1px solid var(--screen-line); }
.ms-card {
	position: relative; height: calc(68.5 * var(--pt)); border-radius: calc(16 * var(--pt));
	padding: calc(14.25 * var(--pt)) calc(36 * var(--pt)) 0 calc(57 * var(--pt));
}
.ms-card > svg { position: absolute; left: calc(16 * var(--pt)); top: calc(21.25 * var(--pt)); width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); color: var(--screen-fg); }
.ms-card b { display: block; font-size: calc(18 * var(--pt)); font-weight: 500; line-height: calc(22 * var(--pt)); white-space: nowrap; }
.ms-card small { display: block; margin-top: calc(4 * var(--pt)); font-size: calc(12.5 * var(--pt)); line-height: calc(15 * var(--pt)); color: var(--screen-fg-2); white-space: nowrap; }
.ms-card .chev { position: absolute; left: auto; right: calc(17 * var(--pt)); top: calc(27.25 * var(--pt)); width: calc(8 * var(--pt)); height: calc(14 * var(--pt)); color: var(--screen-fg-3); stroke-width: 2; }
.ms-round {
	position: absolute; top: calc(788 * var(--pt)); width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%;
	display: grid; place-items: center; color: var(--screen-fg-2);
}
.ms-round--help { left: calc(14 * var(--pt)); font-size: calc(19 * var(--pt)); }
.ms-round--gear { right: calc(15 * var(--pt)); }
.ms-round svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
@media print { .phone .screen, .phone::after { display: none; } }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 30px var(--shadow-soft);
}
.card figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.card figure img { width: 100%; height: 100%; object-fit: cover; }
.card figure.contain { position: relative; background: radial-gradient(closest-side at 50% 70%, var(--halo), var(--clear)); }
.card figure.contain img { position: absolute; inset: 16px 12px 0; width: calc(100% - 24px); height: calc(100% - 16px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 14px 24px var(--shadow)); }
.card--account figure.contain img { inset: 20%; width: 60%; height: 60%; object-position: 50% 50%; }
/* Five overview cards on a phone: picture beside the words, so the list stays short */
@media (max-width: 599px) {
	.cards--five { gap: 12px; }
	.cards--five .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
	.cards--five .card figure { aspect-ratio: auto; min-height: 100%; }
	.cards--five .card .body { padding: 14px 16px 6px; gap: 6px; }
	.cards--five .card h2 { font-size: 1.3rem; }
}
.card .body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 20px 14px; }
.card h2, .card h3 { font-size: 1.55rem; letter-spacing: 0; }
@media (min-width: 1100px) { .cards--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .cards--five .card h2 { font-size: 1.4rem; } }
.card p { color: var(--fg-2); }
.card .more { margin-top: auto; align-self: flex-start; }
/* The card's link covers the whole card */
.card .more::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- Sessions with a constellation ---------- */
.svc-wrap { position: relative; }
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.constellation path { fill: none; stroke: var(--accent-2); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 0.1 8; }
.svc-grid { position: relative; z-index: 1; padding-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 88px 48px; }
@media (max-width: 759px) { .svc-grid { grid-template-columns: minmax(0, 1fr); gap: 84px; } }
.svc { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; padding-bottom: 6px; background: var(--bg); }
.band--alt .svc { background: var(--bg-2); }
.svc figure { position: relative; }
.svc figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.svc .eyebrow { padding-top: 8px; }
.svc p { color: var(--fg-2); }
.svc .meta { font-size: 0.95rem; color: var(--fg); border-left: 2px solid var(--accent-2); padding-left: 12px; }
.node {
	position: absolute;
	left: 22px;
	top: -52px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--accent-2);
	color: var(--accent-2);
	box-shadow: 0 0 0 6px var(--halo);
}
.band--alt .node { background: var(--bg-2); }
.node svg { width: 18px; height: 18px; fill: currentColor; }
/* Each node sparks as the dotted line reaches it (engine/js/sparkle.js), and answers a hover on its card */
.node.is-on { box-shadow: 0 0 0 6px var(--halo), 0 0 18px var(--accent-2); }
.svc:hover .node { box-shadow: 0 0 0 10px var(--halo); }
.svc:hover figure img { filter: saturate(1.08); }
.code {
	font-family: var(--f-body);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--label);
	border: 1px dashed var(--accent-2);
	padding: 2px 8px;
	border-radius: 4px;
}

/* ---------- App rows (one short line each, linking out) ---------- */
.app-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.app-row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 6px 20px;
	align-items: center;
	padding-block: 22px;
	border-bottom: 1px solid var(--line);
}
.app-row .node { position: static; box-shadow: 0 0 0 5px var(--halo); }
.app-row h3 { font-size: 1.45rem; }
.app-row p { color: var(--fg-2); }
.app-row .eyebrow { display: block; margin-bottom: 4px; }
@media (max-width: 639px) {
	.app-row { grid-template-columns: 34px minmax(0, 1fr); }
	.app-row .more { grid-column: 2; }
}

/* ---------- Apps: three devices, each with its line and a link out ---------- */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.app { display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 12px; min-width: 0; }
.app .shot {
	height: 380px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top: 24px;
	margin-bottom: 10px;
	background: radial-gradient(closest-side at 50% 62%, var(--halo), var(--clear) 100%);
}
.app .shot img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px var(--shadow)); }
.app .say { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--heading); }
.app p.body { color: var(--fg-2); }
.app .copy { display: grid; gap: 10px; align-content: start; }
.app .textlink { justify-self: start; }
@media (max-width: 900px) {
	.apps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.app .shot { height: 340px; }
}

/* ---------- App feature and app pair ---------- */
.app-feature {
	display: grid;
	gap: 28px;
	align-items: center;
	padding: clamp(20px, 4vw, 44px);
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: 28px;
}
@media (min-width: 900px) { .app-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.app-feature > div { display: grid; gap: 14px; min-width: 0; }
.app-feature p { color: var(--fg-2); }
.app-feature .shot { justify-self: center; max-height: 620px; width: auto; filter: drop-shadow(0 24px 40px var(--shadow)); }
.steps { display: grid; gap: 12px; counter-reset: step; }
.steps li { position: relative; padding-left: 40px; color: var(--fg-2); }
.steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--accent-2);
	color: var(--label);
	font-size: 0.85rem;
	font-weight: var(--w-body-strong);
}
.stat { display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.stat b { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; font-weight: var(--w-head); color: var(--label); }
.stat span { color: var(--fg-2); font-size: 0.98rem; }
.app-pair { display: grid; gap: 20px; }
@media (min-width: 800px) { .app-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.app-mini {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px;
	gap: 18px;
	align-items: center;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
}
.app-mini > div { display: grid; gap: 10px; min-width: 0; }
.app-mini h3 { font-size: 1.5rem; }
.app-mini p { color: var(--fg-2); font-size: 1rem; }
.app-mini img { filter: drop-shadow(0 14px 26px var(--shadow)); }
@media (max-width: 419px) { .app-mini { grid-template-columns: minmax(0, 1fr) 92px; padding: 18px; } }

/* ---------- One-page app sites (mindsight, lightfield): app captures, card groups, prose, release notes ---------- */
/* A raw app capture is rounded like the device screen, with a hairline so a black screen keeps its edge on a black page. */
.phone-shot { justify-self: center; width: min(100%, 300px); height: auto; border-radius: 28px; border: 1px solid var(--line-2); filter: drop-shadow(0 22px 36px var(--shadow)); }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 24px); align-items: start; justify-self: center; width: min(100%, 560px); }
.shot-pair img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line-2); filter: drop-shadow(0 18px 30px var(--shadow)); }
.photo-shot { justify-self: center; width: min(100%, 420px); height: auto; border-radius: var(--radius-lg); box-shadow: 0 22px 44px var(--shadow); }
.group-title { margin: clamp(44px, 6vw, 72px) 0 10px; font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.1rem); }
.split > .prose > h3:first-child { margin-top: 0; }
/* Four cards read as two rows of two, never three and one */
@media (min-width: 700px) { .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-feature > div > h3 { margin-top: 12px; font-size: var(--fs-h4); }
.group-lede { max-width: 64ch; margin-bottom: 24px; color: var(--fg-2); }
.card .body .eyebrow { margin-bottom: -4px; }
.aside-note { max-width: 72ch; margin-top: 24px; padding-left: 14px; border-left: 2px solid var(--accent-2); color: var(--fg-2); }
.prose { display: grid; gap: 16px; align-content: start; min-width: 0; max-width: 68ch; }
.prose p, .panel li, .prose li { color: var(--fg-2); }
.prose h3, .prose h4 { margin-top: 12px; font-size: var(--fs-h4); }
.panel h3 { font-size: 1.45rem; }
.panel ul:not([class]), .prose ul:not([class]) { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; }
.panel li::marker, .prose li::marker { color: var(--accent-2); }
.panel .textlink, .prose .textlink { justify-self: start; }
.pair + .pair, .split + .pair, .pair + .split { margin-top: 24px; }
.notes { display: grid; max-width: 860px; border-top: 1px solid var(--line); }
.notes li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.notes b { color: var(--label); font-variant-numeric: tabular-nums; }
.faq { max-width: 860px; }
.get { display: grid; gap: 18px; justify-items: center; text-align: center; }
.get .stores { justify-content: center; }
.get p { max-width: 60ch; color: var(--fg-2); }

/* ---------- Card fan (oracle cards) ---------- */
.split { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.fan { display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 0 8px; }
.fan img { width: 34%; max-width: 190px; border-radius: 12px; transform-origin: 50% 100%; box-shadow: 0 18px 40px var(--shadow), 0 0 46px var(--halo); }
.fan img:nth-child(1) { transform: rotate(-9deg) translateX(14%); }
.fan img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6%); }
.fan img:nth-child(3) { transform: rotate(9deg) translateX(-14%); }
.fan-caption { color: var(--fg-2); font-size: 0.95rem; }
.split .section-head { margin-bottom: 0; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 899px) { .reviews { grid-template-columns: minmax(0, 1fr); gap: 44px; } }
.review { display: grid; gap: 18px; align-content: start; min-width: 0; }
.review blockquote { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.42; color: var(--heading); }
.review blockquote::before { content: "\201C"; display: block; margin-bottom: 10px; font-size: 3.4rem; line-height: 0.6; color: var(--accent-2); }
.review figcaption { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 0.95rem; }
.review figcaption b { color: var(--fg); }
/* The stars carry meaning (role=img, "Five stars"), so they take the text-safe accent, not the decorative --accent-2. */
.stars { color: var(--label); letter-spacing: 2px; }

/* The reviews track: every review as a card on one scroll-snap row, three whole cards per view on a wide screen,
   two on a tablet, one on a phone, never a cut card; engine/js/page.js ([data-reviews]) shuffles the cards on each
   load, pages a full view every nine seconds, and keeps the "1 to 3 of 28" count. It swipes without the script. */
.band > .wrap.rev-top { padding-bottom: 0; }
.band > .wrap.rev-wrap { padding-block: 0; }
.band > .wrap.rev-foot { padding-block: 6px var(--band-pad); }
.rev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rev-head .section-head { gap: 10px; margin-bottom: 0; }
.rev-nav { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.rev-count { margin-right: 6px; color: var(--fg-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rev-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--clear);
	color: var(--fg);
	font-size: 1.1rem;
	cursor: pointer;
}
.rev-btn:hover { border-color: var(--link); color: var(--link); }
.rev-track {
	display: flex;
	gap: 24px;
	padding: 22px 0 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-track:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rev-card {
	flex: 0 0 calc((100% - 48px) / 3);
	scroll-snap-align: start;
	display: grid;
	gap: 18px;
	align-content: start;
	min-width: 0;
	padding: 28px 30px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 18px 44px var(--shadow);
}
@media (max-width: 980px) { .rev-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .rev-card { flex-basis: 100%; padding: 24px 22px 20px; } }
.rev-card blockquote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
	font-family: var(--f-display);
	font-size: 1.22rem;
	line-height: 1.5;
	color: var(--heading);
}
.rev-card .who { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 0.95rem; }
.rev-card .who b { color: var(--fg); font-weight: var(--w-body-strong); }
.rev-src { margin-left: auto; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }

/* ---------- Panels ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 759px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.panel {
	display: grid;
	gap: 14px;
	align-content: start;
	min-width: 0;
	padding: clamp(24px, 4vw, 40px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.panel p { color: var(--fg-2); }
.panel p.next-class { color: var(--fg); }
.next-class a { color: var(--link); }

/* ---------- Posts ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 899px) { .posts { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.post { display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--fg); text-decoration: none; }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.post h3 { font-size: 1.3rem; line-height: 1.25; }
.post:hover { color: var(--fg); }
.post:hover h3 { color: var(--link); }
.post time { color: var(--fg-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.post-mark { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); }
.post .post-mark img { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 0; filter: drop-shadow(0 0 10px var(--halo)); }
.band-foot { margin-top: 28px; }

/* ---------- Start and contact ---------- */
.start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.start-copy { display: grid; gap: 18px; }
.contact { display: grid; gap: 18px; padding-left: clamp(20px, 4vw, 40px); border-left: 1px solid var(--line); }
.contact > div { display: grid; gap: 2px; }
.contact .v { font-size: 1.1rem; color: var(--fg); }
.contact a.v { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.contact a.v:hover { color: var(--link); }
@media (max-width: 819px) {
	.start { grid-template-columns: minmax(0, 1fr); }
	.contact { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); color: var(--fg-2); font-size: 0.9rem; }
.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
	align-items: center;
	padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px));
}
.site-footer p { max-width: 72ch; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--fg-2); }
.site-footer nav a:hover { color: var(--link); }
.site-footer .credit { flex-basis: 100%; }
.site-footer .credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); }

/* ---------- Phone quick bar and back to top ---------- */
/* Book and Call stay at the foot of a phone screen once the first band has scrolled away; the helper's launcher
   and the top button move up to make room (html.has-quickbar, set by engine/js/page.js). The bar is 69 px plus the
   home indicator inset tall, so what sits above it is lifted by 90 px plus that inset (20 px clear of it). */
.quickbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 58;
	display: none;
	gap: 10px;
	padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
}
.quickbar .btn { flex: 1; min-height: 48px; }
.quickbar .btn--ghost { flex: 0 0 auto; padding: 0 22px; }
/* The back to top button sits in the bottom right corner; while the helper's launcher shows (html.has-ask, set by
   engine/js/assistant.js) it sits above it (the same size, 14 px apart), so the two stack. */
.to-top {
	position: fixed;
	right: max(20px, env(safe-area-inset-right, 0px));
	bottom: max(20px, env(safe-area-inset-bottom, 0px));
	z-index: 59;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--accent-2);
	border-radius: 50%;
	background: var(--surface);
	color: var(--label);
	cursor: pointer;
	box-shadow: 0 4px 16px var(--shadow);
}
.has-ask .to-top { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 64px + 14px); }
.to-top svg { width: 26px; height: 26px; }
.to-top:hover { color: var(--accent-2); }
@media (max-width: 560px) {
	.quickbar:not([hidden]) { display: flex; }
	.has-quickbar body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
	.to-top { width: 58px; height: 58px; }
	.has-ask .to-top { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 58px + 14px); }
	.has-quickbar .to-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
	.has-ask.has-quickbar .to-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 58px + 14px); }
}

/* ---------- Forms ---------- */
label { display: block; margin-bottom: 6px; font-weight: var(--w-body-strong); color: var(--fg); }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font: inherit;
	color: var(--fg);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: 12px;
}
textarea { min-height: 140px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }
::placeholder { color: var(--fg-2); opacity: 0.8; }
button[type="submit"],
input[type="submit"] {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-weight: var(--w-body-strong);
	cursor: pointer;
}
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.searchform { display: flex; gap: 10px; flex-wrap: wrap; }
.searchform input { flex: 1 1 220px; }

/* ---------- Page and post content ---------- */
/* The title band: the sky field behind the h1 (and a post's date), a hairline, then the reading band. */
.page-hero { overflow: hidden; border-bottom: 1px solid var(--line); }
.band.page-hero > .wrap { position: relative; display: grid; gap: 14px; padding-block: clamp(44px, 7vw, 88px) clamp(32px, 5vw, 56px); }
.page-hero h1 { max-width: 24ch; }
.page-hero .eyebrow time { color: inherit; }
.band.page-body > .wrap { padding-block: clamp(36px, 6vw, 64px) var(--band-pad); }
.page-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.page-head time { color: var(--fg-2); font-size: 0.95rem; }
.entry-image img { width: 100%; }
.entry { max-width: 72ch; }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.4rem); margin-top: 1.6em; }
.entry h3 { font-size: 1.45rem; margin-top: 1.4em; }
.entry ul:not([class]), .entry ol:not([class]) { padding-left: 1.3em; }
.entry li + li { margin-top: 0.4em; }
/* A list item that is only a link (a table of contents) is a 44 px tap target. */
.entry li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.entry img { border-radius: var(--radius); }
.entry figcaption { margin-top: 8px; color: var(--fg-2); font-size: var(--fs-small); }
.entry blockquote { padding-left: 18px; border-left: 2px solid var(--accent-2); font-family: var(--f-display); font-size: 1.3rem; color: var(--heading); }
.entry hr { border: 0; border-top: 1px solid var(--line); }
.entry table { width: 100%; border-collapse: collapse; }
.entry th, .entry td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.entry .alignwide, .entry .alignfull { max-width: none; }
.entry iframe, .entry video, .entry embed { max-width: 100%; }
/* An outside scheduler or form in an iframe (the Acuity booking sheet on /appointments/): framed as a card on the
   theme's surface so its own light sheet reads as a sheet of paper in either theme; the embed script sets its height. */
.entry iframe[src*="acuityscheduling.com"] { display: block; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 30px var(--shadow-soft); }
.entry .aligncenter { margin-inline: auto; text-align: center; }
.entry .aligncenter img { margin-inline: auto; }
.entry .alignleft { float: left; margin: 0.3em 24px 12px 0; }
.entry .alignright { float: right; margin: 0.3em 0 12px 24px; }
@media (max-width: 599px) { .entry .alignleft, .entry .alignright { float: none; margin: 0; } }
.entry figcaption, .entry .wp-element-caption { text-align: center; }
.entry .wp-block-quote cite, .entry .wp-block-pullquote cite { display: block; margin-top: 8px; font-family: var(--f-body); font-size: var(--fs-small); font-style: normal; color: var(--fg-2); }
.entry .wp-block-separator { border: 0; border-top: 1px solid var(--line); opacity: 1; }
.entry .wp-block-columns { gap: clamp(20px, 4vw, 40px); }
@media (max-width: 781px) {
	.entry .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
	.entry .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100%; }
}
/* Button blocks read as the engine's buttons: copper fill, or the outline style as the ghost button */
.entry .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.entry .wp-block-buttons.is-content-justification-center { justify-content: center; }
.entry .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.entry .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--clear);
	border-radius: var(--radius-btn);
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--f-body);
	font-size: 1rem;
	font-weight: var(--w-body-strong);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 24px var(--halo);
}
.entry .wp-block-button__link:hover { color: var(--accent-ink); }
.entry .is-style-outline > .wp-block-button__link { background: var(--glass); color: var(--heading); border-color: var(--line-2); box-shadow: none; }
.entry .is-style-outline > .wp-block-button__link:hover { border-color: var(--accent-2); color: var(--heading); }
/* Details blocks, and the details in a front page .faq, read as the FAQ accordion: a hairline between questions, a plus that turns to a minus */
.entry .wp-block-details, .faq > details { border-block: 1px solid var(--line); }
.entry .wp-block-details + .wp-block-details, .faq > details + details { margin-top: 0; border-top: 0; }
.entry .wp-block-details > summary,
.faq > details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding-block: 12px;
	list-style: none;
	cursor: pointer;
	font-family: var(--f-display);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--heading);
}
.entry .wp-block-details > summary::-webkit-details-marker, .faq > details > summary::-webkit-details-marker { display: none; }
.entry .wp-block-details > summary::after, .faq > details > summary::after { content: "+"; flex: none; font-family: var(--f-body); font-size: 1.5rem; line-height: 1; color: var(--accent-2); }
.entry .wp-block-details[open] > summary::after, .faq > details[open] > summary::after { content: "\2212"; }
.entry .wp-block-details > :not(summary), .faq > details > :not(summary) { margin-top: 0.6em; color: var(--fg-2); }
.entry .wp-block-details[open], .faq > details[open] { padding-bottom: 18px; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-btn); text-decoration: none; }

/* ---------- Motion: only for people who have not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
	.btn--primary:hover { transform: translateY(-1px); }
	.more::after { transition: transform 0.2s ease; }
	.more:hover::after { transform: translateX(3px) rotate(45deg); }
	.textlink::after { transition: transform 0.2s ease; }
	.textlink:hover::after { transform: translateX(4px); }
	.social a, .rev-btn, .dots button, .to-top { transition: color 0.15s ease, border-color 0.15s ease; }
	.nav a, .menu-panel a, .theme-toggle, .menu-btn { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
	.sub-btn { transition: color 0.15s ease, background-color 0.15s ease; }
	.sub-btn svg { transition: transform 0.15s ease; }
	.nav .sub { transition: opacity 0.15s ease, visibility 0.15s ease; }
	.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--shadow), 0 0 0 1px var(--accent-2); }
	.post img { transition: opacity 0.2s ease; }
	.post:hover img { opacity: 0.88; }
	.fan img { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.fan:hover img:nth-child(1) { transform: rotate(-14deg) translateX(4%); }
	.fan:hover img:nth-child(2) { transform: translateY(-10%); }
	.fan:hover img:nth-child(3) { transform: rotate(14deg) translateX(-4%); }
	/* The dial: both tick rings turn clockwise at different rates, so the copper ticks meet the fine ones and drift
	   apart on a slow cycle; the triangles behind the photo turn once in 150 seconds. */
	.ticks-minor { animation: prodigy-turn 240s linear infinite; }
	.ticks-major { animation: prodigy-turn 400s linear infinite; }
	.orbiter { animation: prodigy-turn 150s linear infinite; }
	.astrolabe img.photo { transition: opacity 900ms ease; }
	.slide-text { transition: opacity 350ms ease; }
	.ring-label { transition: fill-opacity 600ms ease, fill 600ms ease; }
	.orn { transition: opacity 600ms ease; }
	.node { transition: box-shadow 600ms ease; }
	.svc figure img { transition: filter 300ms ease; }
	.hero--horizon::before, .hero--orbit::before { animation: prodigy-aurora 38s ease-in-out infinite alternate; }
	.hero-sun { animation: prodigy-breathe 9s ease-in-out infinite; }
	.section-head h2:hover .spark, .band--dusk h2:hover .spark { animation: prodigy-spark 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 1; }
	/* engine/js/sparkle.js sets .is-away on <html> while the tab is in the background */
	.is-away *, .is-away *::before { animation-play-state: paused; }
	@keyframes prodigy-turn { to { transform: rotate(360deg); } }
	@keyframes prodigy-aurora {
		0% { transform: translate3d(0, 0, 0) scale(1); }
		50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
		100% { transform: translate3d(3%, -1%, 0) scale(1.03); }
	}
	@keyframes prodigy-breathe {
		0%, 100% { filter: drop-shadow(0 0 14px var(--halo)); }
		50% { filter: drop-shadow(0 0 30px var(--halo)); }
	}
	@keyframes prodigy-spark {
		0% { transform: scale(1) rotate(0); }
		45% { transform: scale(1.9) rotate(90deg); }
		100% { transform: scale(1) rotate(180deg); }
	}
}