/* cathexis.health · site.css · reference build, 2026-10-16
   Reads every colour from cathexis-tokens.css (generated from DesignTokens.json 1.3.2).
   No hex value is typed here. The ten styles are the app's (Text_System_Brief.md §1), in rem.
   Visual_Spec.md is the reason for every rule below. */

@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces-Italic-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/PlusJakartaSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- ground ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cx-paper-linen);
  color: var(--cx-ink-dark);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.0625rem; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--cx-paper-stained); color: var(--cx-ink-dark); }

/* ---------- the ten styles ---------- */
.serif, .t-title, .t-object, .t-prose, .t-words, .wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}
.t-title    { font-weight: 500; font-size: 2.125rem; line-height: 1.15; margin: 0; letter-spacing: 0; text-wrap: balance; }
.t-subtitle { font-weight: 400; font-size: 0.9375rem; line-height: 1.4; color: var(--cx-ink-soft); margin: 0.5rem 0 0; }
.t-object   { font-weight: 500; font-size: 1.5rem; line-height: 1.25; margin: 0; text-wrap: balance; }
.t-prose    { font-weight: 400; font-size: 1.0625rem; line-height: 1.5; max-width: 65ch; margin: 0; text-wrap: pretty; }
.t-words    { font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.45; max-width: 60ch; margin: 0; text-wrap: pretty; }
.t-text     { font-weight: 400; font-size: 1.0625rem; line-height: 1.45; max-width: 65ch; margin: 0; }
.t-secondary{ font-weight: 400; font-size: 0.9375rem; line-height: 1.4; color: var(--cx-ink-soft); max-width: 65ch; margin: 0; }
.t-row      { font-weight: 500; font-size: 1.0625rem; line-height: 1.3; margin: 0; }
.t-label    { font-weight: 500; font-size: 0.8125rem; line-height: 1.25; letter-spacing: 0.3px; color: var(--cx-ink-soft); margin: 0; }
.t-control  { font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.crisis     { color: var(--cx-ash-cool); }
* + .t-prose, * + .t-text { margin-top: 1rem; }
.t-object + .t-prose, .t-object + .t-text { margin-top: 1rem; }
.t-label + .t-object { margin-top: 0.75rem; }
.t-row + .t-secondary { margin-top: 0.25rem; }

/* ---------- links ---------- */
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--cx-gold-thin); text-decoration-thickness: var(--cx-hairline); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 3px; border-radius: 2px; }
.textlink { display: inline-block; margin-top: 1.25rem; font-weight: 500; font-size: 1.0625rem; }
.textlink::after { content: ""; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--cx-paper-linen); padding: 8px 12px; z-index: 10; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
@media (min-width: 1040px) { .wrap { padding: 0 48px; } }
.rule { border: 0; border-top: var(--cx-hairline) solid var(--cx-gold-thin); margin: 0; }

/* ---------- header ---------- */
.site-header { padding: 16px 0 0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.wordmark { font-weight: 500; font-size: 1.5rem; line-height: 1; text-decoration: none; color: var(--cx-ink-dark); }
.nav { margin: 12px 0 0; padding: 0 0 12px; border-bottom: var(--cx-hairline) solid var(--cx-gold-thin); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nav a { font-weight: 500; font-size: 0.9375rem; line-height: 1.6; color: var(--cx-ink-soft); text-decoration: none; padding: 6px 0; display: inline-block; }
.nav a:hover { color: var(--cx-ink-dark); }
.nav a[aria-current="page"] { color: var(--cx-ink-dark); text-decoration: underline; text-decoration-color: var(--cx-gold-thin); text-decoration-thickness: var(--cx-hairline); text-underline-offset: 0.45em; }
@media (min-width: 1040px) {
  .site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 40px; }
  .bar { display: contents; }
  .wordmark { grid-column: 1; }
  .nav { grid-column: 2; grid-row: 1; margin: 0; padding: 0; border: 0; }
  .header-badge { grid-column: 3; grid-row: 1; }
  .site-header { padding: 20px 0; border-bottom: var(--cx-hairline) solid var(--cx-gold-thin); }
}

/* ---------- the App Store badge (placeholder for Apple's own art) ---------- */
.badge {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  height: 44px; padding: 0 14px; border-radius: 9px;
  background: var(--cx-chosen-fill); color: var(--cx-chosen-label);
  text-decoration: none; line-height: 1.05; white-space: nowrap;
}
.badge small { font-size: 0.625rem; font-weight: 400; letter-spacing: 0.2px; }
.badge span { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.1px; }
.badge.sm { height: 40px; padding: 0 12px; }
.badge.sm span { font-size: 0.9375rem; }
.badge-note { display: block; margin-top: 6px; }

/* ---------- sections ---------- */
.hero { padding: 2.5rem 0 4rem; }
@media (min-width: 720px) { .hero { padding: 4rem 0 6rem; } }
.hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; } }
.hero .t-title + .t-object { margin-top: 1.25rem; }
.hero .t-object { max-width: 30ch; }
.hero .actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.sec { padding: 4rem 0; border-top: var(--cx-hairline) solid var(--cx-gold-thin); }
@media (min-width: 720px) { .sec { padding: 6rem 0; } }
.sec-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .sec-grid { grid-template-columns: 4fr 7fr; gap: 4rem; } .sec-head { position: sticky; top: 24px; align-self: start; } }
.sec-body > * + * { margin-top: 1rem; }
.sub { padding-top: 2.5rem; }
.sub:first-child { padding-top: 0; }
.sub + .sub { margin-top: 2.5rem; border-top: var(--cx-hairline) solid var(--cx-gold-thin); }

/* ---------- lists of rows (doors, practices, programs, links) ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--cx-hairline) solid var(--cx-gold-thin); }
.rows > li { border-bottom: var(--cx-hairline) solid var(--cx-gold-thin); }
.rows .item { display: grid; gap: 4px; padding: 18px 0; }
@media (min-width: 720px) { .rows .item { grid-template-columns: 2fr 3fr; gap: 24px; align-items: baseline; } }
a.item { text-decoration: none; color: inherit; }
a.item .t-row { text-decoration: underline; text-decoration-color: var(--cx-gold-thin); text-decoration-thickness: var(--cx-hairline); text-underline-offset: 0.3em; }
a.item:hover .t-row { text-decoration-color: currentColor; }
.rows.compact .item { padding: 14px 0; }
.names { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.names li { font-weight: 500; font-size: 1.0625rem; }
.names li:not(:last-child)::after { content: "·"; color: var(--cx-ink-soft); margin: 0 12px; font-weight: 400; }

/* ---------- the price card ---------- */
.card { border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 14px; padding: 24px; max-width: 26rem; }
.card .t-object { margin-top: 0.5rem; }
.card .t-secondary { margin-top: 0.75rem; }
.card .badge { margin-top: 1.25rem; }

/* ---------- a quotation in a person's own words ---------- */
.quote { border-left: 3px solid var(--cx-ember-soft); padding: 0.25rem 0 0.25rem 1.25rem; }
.quote .t-words + .t-words { margin-top: 1rem; }

/* ---------- people ---------- */
.people { display: grid; gap: 2rem; }
@media (min-width: 720px) { .people { grid-template-columns: 1fr 1fr; } }
.people .t-text { margin-top: 0.75rem; }
.creds { list-style: none; margin: 0; padding: 0; }
.creds li { padding: 10px 0; border-bottom: var(--cx-hairline) solid var(--cx-gold-thin); }
.creds li:first-child { border-top: var(--cx-hairline) solid var(--cx-gold-thin); }
.cite { font-size: 0.9375rem; line-height: 1.5; }
.cite li { padding: 12px 0; }

/* ---------- empty slots and owed facts (preview only) ---------- */
.slot { background: var(--cx-paper-stained); border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 14px; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--cx-ink-dark); }
.slot.figure { aspect-ratio: 4 / 5; }
.slot.phones { aspect-ratio: 16 / 10; }
.slot p { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.3px; max-width: 28ch; margin: 0; }
.owed { display: inline; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.3px; color: var(--cx-ink-dark); background: var(--cx-paper-stained); border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 4px; padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.owed-block { display: block; margin-top: 1rem; padding: 10px 12px; }

/* ---------- footer ---------- */
.site-footer { margin-top: 2rem; border-top: var(--cx-hairline) solid var(--cx-gold-thin); padding: 3rem 0 3rem; }
.help { padding-bottom: 2.5rem; border-bottom: var(--cx-hairline) solid var(--cx-gold-thin); }
.help .t-text { margin-top: 0.5rem; }
.help .t-label + .t-text { margin-top: 0.75rem; }
.help .crisis { margin-top: 0.75rem; }
.help a { font-weight: 500; }
.foot-grid { display: grid; gap: 2rem; padding: 2.5rem 0; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
.foot-grid ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.foot-grid li { padding: 4px 0; }
.foot-grid a { font-size: 0.9375rem; }
.foot-end { border-top: var(--cx-hairline) solid var(--cx-gold-thin); padding-top: 1.5rem; }
.foot-end .t-secondary + .t-secondary { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .nav, .header-badge, .site-footer .foot-grid { display: none; } }

/* ---------- added by the production build (v2.1, 2026-10-16) ---------- */
/* Apple's own "Download on the App Store" badge (Visual_Spec.md 6), unaltered. Height 44px (40px in the header,
   Apple's onscreen minimum), width from the art's own ratio, at least a quarter of its height clear on every side. */
.appstore { display: inline-block; line-height: 0; text-decoration: none; margin: 11px 0; border-radius: 7px; }
.appstore img { height: 44px; width: auto; }
.appstore.sm { margin: 10px 0; }
.appstore.sm img { height: 40px; }
.card .appstore { margin-top: 1.25rem; }
.hero .actions .appstore { margin: 0; }
.hero .actions { gap: 12px; }
/* the reference pages' inline style attributes, moved here unchanged so the CSP needs no 'unsafe-inline' */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-075 { margin-top: 0.75rem !important; }
.u-m-125 { margin: 1.25rem 0 0 !important; }
.u-mt-1 { margin-top: 1rem !important; }
.u-mt-125 { margin-top: 1.25rem !important; }
.u-mt-15 { margin-top: 1.5rem !important; }
.u-cols-1 { grid-template-columns: 1fr !important; }
.u-fs-09375 { font-size: 0.9375rem !important; }
/* a long unbroken line (the DOI links in How to cite) no longer widens its grid column past a 320px screen */
.sec-grid > *, .hero-grid > * { min-width: 0; }
.cite a { overflow-wrap: anywhere; }
/* App: the body map slot (A-07) beside the morning-and-evening section; under it on a phone, beside it from 1040px */
.with-side .side { margin-top: 1.5rem; }
.slot.map { aspect-ratio: 4 / 5; max-width: 20rem; }
@media (min-width: 1040px) { .with-side { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2.5rem; align-items: start; } .with-side .side { margin-top: 0; } }
/* Privacy and Terms: Prose paragraphs and plain lists */
.legal > * + * { margin-top: 1rem; }
.plain { margin: 1rem 0 0; padding-left: 1.25rem; list-style: disc; }
.plain li + li { margin-top: 0.5rem; }
.plain li::marker { color: var(--cx-ink-soft); }
.hero .owed-block + .t-prose { margin-top: 1.25rem; }
/* N6: Justin's story on About: lead (Object), a Label, Prose, two quoted lines (Your words, the toffee rule) */
.story > * + * { margin-top: 1rem; }
.story > .t-object + .t-object { margin-top: 0.75rem; }
.story > .t-label { margin-top: 2rem; }
.story > .quote { margin: 1.25rem 0; }
.story + .t-secondary { margin-top: 1.25rem; }

/* ================= v2.2 (2026-10-17): the motion and interaction pass =================
   Every colour is a kit token. Motion is transform and opacity only, slow, and only under html.motion,
   which head.js sets only when prefers-reduced-motion isn't "reduce". With JS off, nothing here hides anything. */

/* ---------- the mandala (the app's Insights map, drawn from the HES figure and Site_Words S-04) ---------- */
.mandala { width: 100%; max-width: 26rem; margin: 0 auto; }
.mandala [hidden] { display: none !important; }
.m-stage { position: relative; }
.m-svg { display: block; width: 100%; height: auto; }
.m-ground { fill: var(--cx-paper-stained); }                       /* tokens: "the mandala ground" */
.m-line { fill: none; stroke: var(--cx-ink-line); stroke-width: 1; }  /* tokens: "the mandala rings" */
.m-orbit { fill: none; stroke: var(--cx-ash-base); stroke-width: 1.5; stroke-dasharray: 0.5 6; stroke-linecap: round; } /* tokens: "the dotted temporal band" */
.m-c { fill: var(--cx-paper-linen); stroke: var(--cx-ink-line); stroke-width: 1; }
.m-hi { fill: none; stroke: var(--cx-gold-thin); stroke-width: 1.5; opacity: 0; transition: opacity 0.5s ease; } /* gold: stroke only, never a fill or glow */
.m-b.hov .m-hi, .m-b.on .m-hi { opacity: 1; }
.m-b.on .m-c { stroke-width: 1.5; }
.m-btns { position: absolute; inset: 0; }
.m-btn { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-btn:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 0; border-radius: 50%; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m-cap { text-align: center; }
.m-intro { margin-bottom: 1.5rem; }
@media (min-width: 900px) { .hero-grid.m-top { align-items: start; } }   /* the map column is tall now; the headline stays at the top beside it */
.m-intro > * + * { margin-top: 0.5rem; }
.m-intro > .t-prose + .t-label { margin-top: 1.25rem; }
.m-sci + .t-secondary { margin-top: 1.25rem; }
.m-listbtn { display: block; margin: 0.5rem auto 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; font-size: 1.0625rem;
  text-decoration: underline; text-decoration-color: var(--cx-gold-thin); text-decoration-thickness: var(--cx-hairline); text-underline-offset: 0.3em; cursor: pointer; }
.m-listbtn:hover { text-decoration-color: currentColor; }
.m-listbtn { margin-top: 1rem; }
/* v2.2b: the panel is one FIXED size for every circle (height per layout range, generated after this file from the measured longest
   entry), so opening, switching and closing never move anything. Longer text, e.g. at a large text size, scrolls inside it. */
.m-panel { box-sizing: border-box; margin-top: 1.25rem; padding: 18px 20px; border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 14px;
  background: var(--cx-paper-stained); overflow-y: auto; overscroll-behavior: contain; }
.m-panel:focus { outline: none; }
.m-panel:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 2px; }
.m-pin > * + * { margin-top: 0.625rem; }
.m-pin > .t-row { font-size: 1.1875rem; }
.m-pin > .m-cap { padding-top: 0.25rem; color: inherit; }   /* t-secondary grey is 4.35:1 on paper-stained; body ink passes */
.m-list { margin-top: 1.5rem; }
.m-list > .t-label + .m-ul { margin-top: 0.75rem; }
.m-ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.m-item { padding: 12px 0; border-top: var(--cx-hairline) solid var(--cx-gold-thin); }
.m-item > * + * { margin-top: 0.375rem; }
.m-home { max-width: 24rem; margin-bottom: 1.5rem; }

/* ---------- Home: a slow ember-pale bloom behind the hero (tokens: ember.pale, "a wide, low-density bloom edging toward gold") ---------- */
.hero.glow { position: relative; overflow: hidden; overflow: clip; }
.hero.glow > .wrap { position: relative; }
.hero.glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background: radial-gradient(55% 50% at 72% 42%, color-mix(in srgb, var(--cx-ember-pale) 24%, transparent), transparent 72%); }

/* ---------- subtle hover glows (opacity only; pointer devices only) ---------- */
.rows .item { position: relative; isolation: isolate; }
.rows .item::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  background: radial-gradient(60% 120% at 20% 50%, color-mix(in srgb, var(--cx-ember-pale) 16%, transparent), transparent 75%); }
@media (hover: hover) { .rows a.item:hover::before { opacity: 1; } }
.rows a.item:focus-visible::before { opacity: 1; }

/* ---------- motion (only with html.motion; prefers-reduced-motion never gets the class, and site.css's kill switch stays) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* headline, line by line */
  .motion main h1:not(.split):not(.done) { opacity: 0; }
  .motion main h1.split .ln { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .motion main h1.split.in .ln { opacity: 1; transform: none; }
  .motion main h1 .l1 { transition-delay: 0.18s; } .motion main h1 .l2 { transition-delay: 0.36s; } .motion main h1 .l3 { transition-delay: 0.54s; }
  .motion main h1 .l4 { transition-delay: 0.72s; } .motion main h1 .l5 { transition-delay: 0.9s; }
  /* sections fade and rise */
  .motion main .sec { transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .motion main .sec:not(.in) { opacity: 0; transform: translateY(1.5rem); }
  /* Science: the mandala builds, center, then the eight, then time, then the sixteen */
  .motion .m-sci .m-b { transform-box: view-box; transform-origin: 50% 50%; transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--st, 0) * 0.45s + var(--sj, 0) * 0.07s); }
  .motion .m-sci:not(.in) .m-b { opacity: 0; transform: scale(0.94); }
  .m-b1 { --st: 0; } .m-b2 { --st: 1; } .m-b3 { --st: 2; } .m-b4 { --st: 3; }
  .m-s1 { --sj: 1; } .m-s2 { --sj: 2; } .m-s3 { --sj: 3; } .m-s4 { --sj: 4; } .m-s5 { --sj: 5; } .m-s6 { --sj: 6; } .m-s7 { --sj: 7; }
  .motion .m-sci .m-b .m-hi { transition-delay: 0s; }
  .motion .m-panel.open .m-pin { animation: m-in 0.6s ease both; }
  @keyframes m-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* Home: the drawing breathes, slowly; the bloom behind the hero breathes with it */
  .motion .m-home .m-svg { transform-origin: 50% 50%; animation: m-breathe 9s ease-in-out infinite alternate; }
  @keyframes m-breathe { from { transform: scale(0.985); opacity: 0.86; } to { transform: scale(1.015); opacity: 1; } }
  .motion .hero.glow::before { animation: m-glow 12s ease-in-out infinite alternate; }
  @keyframes m-glow { from { opacity: 0.45; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } }
}
.mb-0{left:38.500%;top:38.500%;width:23.000%;height:23.000%}
.mb-1{left:43.750%;top:17.750%;width:12.500%;height:12.500%}
.mb-2{left:62.135%;top:25.365%;width:12.500%;height:12.500%}
.mb-3{left:69.750%;top:43.750%;width:12.500%;height:12.500%}
.mb-4{left:62.135%;top:62.135%;width:12.500%;height:12.500%}
.mb-5{left:43.750%;top:69.750%;width:12.500%;height:12.500%}
.mb-6{left:25.365%;top:62.135%;width:12.500%;height:12.500%}
.mb-7{left:17.750%;top:43.750%;width:12.500%;height:12.500%}
.mb-8{left:25.365%;top:25.365%;width:12.500%;height:12.500%}
.mb-9{left:45.250%;top:1.000%;width:9.500%;height:9.500%}
.mb-10{left:62.184%;top:4.368%;width:9.500%;height:9.500%}
.mb-11{left:76.539%;top:13.961%;width:9.500%;height:9.500%}
.mb-12{left:86.132%;top:28.316%;width:9.500%;height:9.500%}
.mb-13{left:89.500%;top:45.250%;width:9.500%;height:9.500%}
.mb-14{left:86.132%;top:62.184%;width:9.500%;height:9.500%}
.mb-15{left:76.539%;top:76.539%;width:9.500%;height:9.500%}
.mb-16{left:62.184%;top:86.132%;width:9.500%;height:9.500%}
.mb-17{left:45.250%;top:89.500%;width:9.500%;height:9.500%}
.mb-18{left:28.316%;top:86.132%;width:9.500%;height:9.500%}
.mb-19{left:13.961%;top:76.539%;width:9.500%;height:9.500%}
.mb-20{left:4.368%;top:62.184%;width:9.500%;height:9.500%}
.mb-21{left:1.000%;top:45.250%;width:9.500%;height:9.500%}
.mb-22{left:4.368%;top:28.316%;width:9.500%;height:9.500%}
.mb-23{left:13.961%;top:13.961%;width:9.500%;height:9.500%}
.mb-24{left:28.316%;top:4.368%;width:9.500%;height:9.500%}

/* ================= v2.3 (2026-10-17, Justin 10:12 PM PT): the design pass =================
   Every colour is a kit token (colour-mixed for alpha); no hex is typed. Motion is transform and opacity only, under html.motion,
   which prefers-reduced-motion never gets. Overrides of the kit's Visual_Spec are listed in AUDIT.md under Justin's Oct 17 rulings. */

/* ---------- glass: tokens (contrast-tested worst cases in docs/glass-contrast.json) ---------- */
:root {
  --hdr: 0px;
  --g-tint: color-mix(in srgb, var(--cx-paper-linen) 78%, transparent);
  --g-sheen: color-mix(in srgb, var(--cx-paper-linen) 60%, transparent);
  --g-spec: color-mix(in srgb, var(--cx-paper-linen) 90%, transparent);
  --g-edge: color-mix(in srgb, var(--cx-gold-thin) 42%, transparent);
  --g-shadow: color-mix(in srgb, var(--cx-ink-dark) 14%, transparent);
  --g-blur: 22px;
  --amb1: color-mix(in srgb, var(--cx-ember-pale) 13%, transparent);
  --amb2: color-mix(in srgb, var(--cx-ember-bloom) 5%, transparent);
  --amb3: color-mix(in srgb, var(--cx-ember-soft) 4%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-tint: color-mix(in srgb, var(--cx-paper-linen) 88%, transparent);
    --g-sheen: color-mix(in srgb, var(--cx-ink-dark) 6%, transparent);
    --g-spec: color-mix(in srgb, var(--cx-ink-dark) 22%, transparent);
    --g-edge: color-mix(in srgb, var(--cx-gold-thin) 34%, transparent);
    --g-shadow: color-mix(in srgb, var(--cx-chosen-label) 80%, transparent);
    --amb1: color-mix(in srgb, var(--cx-ember-pale) 4%, transparent);
    --amb2: color-mix(in srgb, var(--cx-ember-bloom) 7%, transparent);
    --amb3: color-mix(in srgb, var(--cx-ember-soft) 4%, transparent);
  }
}
@media (min-width: 1040px) { :root { --hdr: 72px; } }
html { scroll-padding-top: calc(var(--hdr) + 16px); }

.site-header, .card, .m-panel, .help, .rows.doors .item, .story .beat:not(.b1):not(.b-slot) {
  background: linear-gradient(180deg, var(--g-sheen), transparent 46%), var(--g-tint);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.5);
  backdrop-filter: blur(var(--g-blur)) saturate(1.5);
  border: var(--cx-hairline) solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-spec), inset 0 -1px 0 color-mix(in srgb, var(--cx-gold-thin) 12%, transparent),
              0 1px 2px var(--g-shadow), 0 24px 48px -24px var(--g-shadow);
}
/* on glass, the soft ink steps up to ink.line (the token's "secondary text"), so it passes 4.5:1 over any backdrop */
.site-header .nav a, .card .t-secondary, .card .t-label, .help .t-label, .rows.doors .t-secondary, .m-panel .t-secondary, .story .beat .t-secondary { color: var(--cx-ink-line); }
/* fallbacks: solid surfaces when the browser can't blur, or the person asks for less transparency */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .card, .m-panel, .help, .rows.doors .item, .story .beat:not(.b1):not(.b-slot) { background: var(--cx-paper-linen); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .card, .m-panel, .help, .rows.doors .item, .story .beat:not(.b1):not(.b-slot) { background: var(--cx-paper-linen); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .amb { display: none; }
}

/* ---------- the ambient ground: three slow, wide blooms in the warm palette (fixed, behind everything, never under 4.5:1) ---------- */
.amb { position: fixed; inset: -10vh 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.amb i { position: absolute; display: block; width: 80vmax; height: 80vmax; border-radius: 50%; }
.amb .a1 { left: -30vmax; top: -30vmax; background: radial-gradient(closest-side, var(--amb1), transparent); }
.amb .a2 { right: -34vmax; top: 18vh; background: radial-gradient(closest-side, var(--amb2), transparent); }
.amb .a3 { left: 5vw; bottom: -46vmax; background: radial-gradient(closest-side, var(--amb3), transparent); }

/* ---------- type: an editorial scale (Fraunces SOFT 0 WONK 0, Plus Jakarta Sans) ---------- */
.t-title { font-weight: 450; font-size: clamp(2.625rem, 1.5rem + 4.6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.022em; }
.hero .t-title { font-size: clamp(3rem, 1.2rem + 7.4vw, 7.5rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 13ch; }
.hero .t-object { font-weight: 400; font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem); line-height: 1.22; max-width: 24ch; letter-spacing: -0.01em; }
.hero .t-title + .t-object { margin-top: clamp(1.25rem, 2.4vw, 2.25rem); }
h2.t-object, .sec-head .t-object { font-weight: 450; font-size: clamp(1.875rem, 1.1rem + 2.8vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 18ch; }
.t-prose { font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; }
.t-label { letter-spacing: 0.06em; }
.t-label + .t-object { margin-top: 1rem; }

/* ---------- space ---------- */
.wrap { max-width: 84rem; }
.hero { padding: clamp(3rem, 8vw, 8rem) 0 clamp(4rem, 9vw, 9rem); }
.sec { padding: clamp(5rem, 11vw, 12rem) 0; border-top: 0; position: relative; }
.sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(84rem, 100% - 32px); transform: translateX(-50%); border-top: var(--cx-hairline) solid color-mix(in srgb, var(--cx-gold-thin) 55%, transparent); }
@media (min-width: 900px) { .sec-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); } .sec-head { top: calc(var(--hdr) + 32px); } }

/* ---------- the nav: a glass bar ---------- */
.site-header { padding: 12px 0 0; margin: 0; border-width: 0 0 var(--cx-hairline); border-radius: 0; }
.site-header .nav { border-bottom: 0; margin: 8px -16px 0; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.site-header .nav::-webkit-scrollbar { display: none; }
.site-header .nav ul { flex-wrap: nowrap; gap: 4px 22px; }
.site-header .nav a { white-space: nowrap; }
.site-header .nav a[aria-current="page"] { color: var(--cx-ink-dark); }
@media (min-width: 720px) { .site-header .nav { margin: 8px -32px 0; padding: 0 32px 10px; } }
@media (min-width: 1040px) {
  .site-header { position: sticky; top: 0; z-index: 50; padding: 0; height: var(--hdr); display: flex; align-items: center; border-bottom-width: var(--cx-hairline); }
  .site-header > .wrap { width: 100%; }
  .site-header .nav { margin: 0; padding: 0; overflow: visible; }
}

/* ---------- doors: glass cards ---------- */
.rows.doors { border-top: 0; display: grid; gap: 12px; }
.rows.doors > li { border: 0; }
.rows.doors .item { border-radius: 20px; padding: 22px 24px; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease; }
.rows.doors .item::before { border-radius: inherit; }
@media (min-width: 720px) { .rows.doors { grid-template-columns: 1fr 1fr; gap: 16px; } .rows.doors .item { grid-template-columns: 1fr; gap: 8px; padding: 28px 30px; height: 100%; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .rows.doors a.item:hover { transform: translateY(-3px); } }

/* ---------- the price card, the footer's help ---------- */
.card { border-radius: 22px; padding: 28px; }
.site-footer { border-top: 0; padding-top: clamp(3rem, 6vw, 6rem); }
.help { border-radius: 22px; padding: 24px; border-bottom-width: var(--cx-hairline); }
/* the crisis card is never see-through: it keeps the glass edge and depth, on a solid ground, so its words never depend on what is behind */
.help { background: var(--cx-paper-linen); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 720px) { .help { padding: 36px 40px; } }
.foot-grid { padding: 3rem 0; }

/* ---------- Home: the pinned scroll story ---------- */
.hero.story { padding: 0; position: relative; overflow-x: clip; }
.story-grid { display: grid; }
.st-stage { grid-row: 1; grid-column: 1; position: sticky; top: 0; height: 100svh; display: grid; align-items: end; justify-items: center; padding-bottom: 13svh; pointer-events: none; }
.st-mandala { width: min(86vw, 48svh); }
.st-mandala .m-home { max-width: none; margin: 0; }
.st-copy { grid-row: 1; grid-column: 1; position: relative; z-index: 1; padding: clamp(2rem, 9svh, 6rem) 0 22svh; display: grid; align-content: start; gap: 34svh; }
.story .beat { max-width: 36rem; }
.story .beat:not(.b1):not(.b-slot) { border-radius: 22px; padding: 22px 22px 24px; }
.story .beat > * + * { margin-top: 1rem; }
.story .b1 { padding-bottom: 50svh; }
.story .b-slot .slot { max-width: 24rem; }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 6rem); }
  .st-stage { grid-column: 2; top: var(--hdr); height: calc(100svh - var(--hdr)); align-items: center; padding: 0; }
  .st-mandala { width: min(44vw, 78svh); }
  .st-copy { grid-column: 1; padding: clamp(4rem, 14svh, 9rem) 0 30svh; gap: 30svh; }
  .story .b1 { padding-bottom: 8svh; }
  .story .beat:not(.b1):not(.b-slot) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; padding: 0; }
  .story .beat .t-prose { font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.625rem); line-height: 1.45; max-width: 30ch; }
}

/* ---------- Science: the left column carries the words, the right the map ---------- */
.sci-grid { display: grid; gap: 2.5rem; }
.sci-copy > .m-intro { margin: clamp(2rem, 4vw, 3.5rem) 0 0; }
.sci-copy > #m-caption { margin-top: 2rem; }
.sci-map .m-sci { max-width: 38rem; }
@media (min-width: 1040px) {
  .sci-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(3rem, 5vw, 5rem); align-items: start; }
}
.m-panel { border-radius: 22px; }
/* Oct 18 (Justin: the small scrolling box was hard to read): the P6 viewport cap and the inner scroll are gone. The panel shows
   the whole entry at its natural height. Phones: directly under the map; a tap scrolls the page to the panel heading.
   Desktop: the panel beside the map, the map sticky beside it while the page scrolls through the text. */
.m-panel { height: auto; overflow: visible; overscroll-behavior: auto; }
.m-pin > .t-row { scroll-margin-top: calc(var(--hdr) + 16px); }
.m-pin > .t-row:focus { outline: none; }
.m-pin > .t-row:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 4px; border-radius: 4px; }
.m-stage { scroll-margin-top: calc(var(--hdr) + 16px); }
.m-item > .m-backp { margin-top: 0.25rem; }
.m-backp .textlink { margin-top: 0.5rem; }
@media (min-width: 1040px) {
  .sci-map .m-sci { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 2rem; align-items: start; }
  .sci-map .m-stage { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--hdr) + 24px); width: 100%; max-width: calc(100svh - var(--hdr) - 48px); justify-self: center; }
  /* the panel's minimum height is the map's: it shares the map's grid row and stretches to it (the map is align-self start, so it can stick) */
  .sci-map .m-panel { grid-column: 2; grid-row: 1; margin-top: 0; align-self: stretch; }
  .sci-map .m-listbtn, .sci-map .m-list { grid-column: 1 / -1; }
  /* Oct 20 (approved): the map and its panel share their own row, so the sticky map stops where the list starts and never covers words */
  .sci-map .m-top { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 2rem; align-items: start; }
}
.m-top { display: contents; }
@media (min-width: 1040px) { .sci-map .m-top { display: grid; } }

/* ---------- motion (html.motion only; reduced motion never gets it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .amb i { will-change: transform; animation: amb-1 46s ease-in-out infinite alternate; }
  .motion .amb .a2 { animation-name: amb-2; animation-duration: 58s; }
  .motion .amb .a3 { animation-name: amb-3; animation-duration: 64s; }
  @keyframes amb-1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
  @keyframes amb-2 { to { transform: translate3d(-12vmax, 14vmax, 0) scale(0.92); } }
  @keyframes amb-3 { to { transform: translate3d(10vmax, -12vmax, 0) scale(1.08); } }
  .hid .amb i, .hid .m-svg { animation-play-state: paused !important; }
  /* the story: the mandala turns a little as you scroll, and assembles ring by ring */
  .motion .st-mandala { transform: rotate(calc(var(--p, 0) * 24deg - 12deg)) scale(calc(0.9 + var(--p, 0) * 0.1)); transition: transform 0.4s linear; }
  .motion .story .m-b { transform-box: view-box; transform-origin: 50% 50%; transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.16,.8,.2,1); transition-delay: calc(var(--sj, 0) * 0.06s); }
  .motion .story.ready:not(.as-2) .m-b2, .motion .story.ready:not(.as-3) .m-b3, .motion .story.ready:not(.as-4) .m-b4 { opacity: 0; transform: scale(0.55); }
  .motion .story .m-b1 .m-c { transition: transform 1.4s cubic-bezier(.16,.8,.2,1); }
  /* beats rise as they arrive */
  .motion .story .beat:not(.b1) { transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .motion .story .beat:not(.b1):not(.in) { opacity: 0; transform: translateY(3rem); }
}

/* the skip link sits above the sticky glass header */
.skip:focus { z-index: 60; }

/* Oct 18: About's B-14 quotations are indented */
.story > .quote.q-indent { margin: 1.25rem 0 1.25rem clamp(1rem, 4vw, 2.5rem); }
.story > .t-words + .t-words { margin-top: 1rem; }

/* ================= Oct 19 quick wins (Justin's ruling via Marketing Lead, 8:56 AM PT; AUDIT_PLAN.md Part 4) =================
   Kit tokens only, no hex. Disclosures are native <details>: keyboard and screen reader friendly, no script needed.
   Motion stays under html.motion and prefers-reduced-motion: no-preference; reduced motion gets no shrink and no lift. */

/* ---------- the disclosure: "Read more", "Read the rest of my story" (ruled labels) and the drafted ones ---------- */
.more { margin-top: 1.25rem; }
.more > .more-sum { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; cursor: pointer; list-style: none; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; font-size: 1.0625rem; font-style: normal; color: var(--cx-ink-dark);
  text-decoration: underline; text-decoration-color: var(--cx-gold-thin); text-decoration-thickness: 1px; text-underline-offset: 0.3em; padding: 6px 0; min-height: 24px; }
.more > .more-sum::-webkit-details-marker { display: none; }
.more > .more-sum::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 0.125rem; }
.more[open] > .more-sum::before { transform: rotate(45deg); }
.more > .more-sum:hover { text-decoration-color: currentColor; }
.more > .more-sum:focus { outline: none; }
.more > .more-sum:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 4px; border-radius: 4px; }
.more[open] > .more-sum + * { margin-top: 1rem; }
.more > * + * { margin-top: 0.75rem; }
.more + .t-label, .more + .textlink { margin-top: 1.5rem; }
.item > .more { margin-top: 0.25rem; }
.item > .more > .more-sum { font-size: 0.9375rem; }
@media (min-width: 720px) { .rows .item > .more { grid-column: 2; } }
/* About: open in the HTML (so it reads whole with JS off); with JS it starts closed, from the first paint, with no shift */
.js .js-shut > :not(summary) { display: none; }
.js .js-shut > .more-sum::before { transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .motion .more[open] > .more-sum ~ * { animation: more-in 0.45s ease both; }
  @keyframes more-in { from { opacity: 0; transform: translateY(6px); } }
  .motion .more > .more-sum::before { transition: transform 0.25s ease; }
}

/* ---------- pause control for the looping motion (shown only while motion runs) ---------- */
.motion-ctl { display: none; }
.motion .motion-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foot-end .motion-ctl { margin-bottom: 1rem; }
.story .b1 .motion-ctl { margin-top: 1.5rem; }
.pause-btn { font: inherit; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; font-size: 0.9375rem; color: var(--cx-ink-dark); background: transparent; cursor: pointer;
  border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 999px; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.pause-btn::before { content: ""; width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; }
.pause-btn[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
.pause-btn:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 3px; }
.paused .amb i, .paused .m-svg, .paused .hero.glow::before { animation-play-state: paused !important; }

/* ---------- the glass header shrinks on scroll down and comes back on scroll up (desktop, where it is sticky) ----------
   Transform only: the header keeps its box, so nothing under it moves (no layout shift). Never under reduced motion. */
@media (min-width: 1040px) and (prefers-reduced-motion: no-preference) {
  .site-header { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .site-header > .wrap, .site-header .wordmark, .site-header .header-badge { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .site-header.small { transform: translateY(-14px); }
  .site-header.small > .wrap { transform: translateY(7px); }
  .site-header.small .wordmark { transform: scale(0.88); transform-origin: left center; }
  .site-header.small .header-badge { transform: scale(0.88); transform-origin: right center; }
  .site-header.small:focus-within, .site-header.small:focus-within > .wrap, .site-header.small:focus-within .wordmark, .site-header.small:focus-within .header-badge { transform: none; }
}

/* ---------- Home: the five doors as glass tiles, right under the hero ---------- */
.doors-sec { padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 8vw, 8rem); }
.doors-sec .t-label { margin-bottom: 1.25rem; }
.rows.doors.tiles .item { border-radius: 24px; align-content: start; }
.rows.doors.tiles .t-row { font-family: 'Fraunces', Georgia, serif; font-weight: 450; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 720px) { .rows.doors.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rows.doors.tiles > li:first-child { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .rows.doors.tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .rows.doors.tiles > li:first-child { grid-column: auto; } .rows.doors.tiles .item { padding: 26px 24px 30px; min-height: 13rem; } }
.story .b4 .actions { margin-top: 0; }

/* Home: "What it isn't" and "Your record", two glass cards side by side */
.pair-cards { display: grid; gap: 16px; }
.pair-cards .card.pc { max-width: none; padding: clamp(24px, 3vw, 40px); }
.pair-cards .card.pc h2.t-object { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); margin-top: 0.75rem; }
.pair-cards .card.pc .t-prose { margin-top: 1.25rem; }
@media (min-width: 900px) { .pair-cards { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } }

/* ---------- App: practice and program cards; the price as two cards ---------- */
.rows.pcards { border-top: 0; display: grid; gap: 12px; margin-top: 1.5rem; }
.rows.pcards > li { border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 18px; }
.rows.pcards .item { padding: 18px 20px; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 720px) { .rows.pcards { grid-template-columns: 1fr 1fr; } .rows.pcards .item > .more { grid-column: auto; } }
.price-pair { display: grid; gap: 16px; }
.price-pair .card { max-width: none; }
.price-pair .card.pf .t-prose { margin-top: 0.75rem; }
@media (min-width: 720px) { .price-pair { grid-template-columns: 1fr 1fr; align-items: stretch; } }

/* ---------- Clinicians: the fact row, the 01 02 03 row, the questionnaire chips ---------- */
.facts { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 10px; }
.facts li { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; font-size: 0.9375rem; color: var(--cx-ink-dark); padding: 12px 16px; border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 14px; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps > li { counter-increment: step; border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 18px; padding: 20px 22px 18px; }
.steps > li::before { content: "0" counter(step); display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.75rem; line-height: 1; color: var(--cx-ink-soft); margin-bottom: 0.75rem; }
.steps .t-row { margin: 0; }
.steps .t-prose { margin-top: 0.75rem; }
.names.chips { gap: 8px; margin-top: 1.25rem; }
.names.chips li { font-size: 0.9375rem; padding: 6px 12px; border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 999px; }
.names.chips li:not(:last-child)::after { content: none; }

/* ---------- Developers: a copy button on each citation (JS only) ---------- */
.copy, .copy-note { display: none; }
.js .copy { display: inline-flex; align-items: center; margin-left: 12px; vertical-align: baseline; font: inherit; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--cx-ink-dark);
  background: transparent; border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 999px; padding: 4px 12px; min-height: 32px; cursor: pointer; }
.js .copy:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 3px; }
.js .copy-note { display: block; margin-top: 0.75rem; }

/* ---------- About: the pull line, the rest of the story, the visual pair ---------- */
.pull-band { padding: clamp(3rem, 7vw, 7rem) 0; }
.pull-line.t-words { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.18; letter-spacing: -0.012em; max-width: 26ch; margin: 0 auto; text-align: center; text-wrap: balance; color: var(--cx-ink-dark); }
.story-rest { padding-top: clamp(2rem, 5vw, 5rem); }
.story-rest .sec-head:empty { display: none; }
@media (min-width: 900px) { .story-rest .sec-head:empty { display: block; } }
.story-more > .story { margin-top: 1.25rem; }
.pair-band { padding: clamp(4rem, 9vw, 9rem) 0; }
.pair { display: grid; gap: clamp(2rem, 5vw, 4rem); max-width: 60rem; margin: 0 auto; }
.pq-lead { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; font-size: 0.9375rem; color: var(--cx-ink-line); margin: 0; }
.pq-line { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.875rem, 1.1rem + 3vw, 3.75rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--cx-ink-dark); margin: 0.75rem 0 0; text-wrap: balance; }
.pq + .pq { padding-top: clamp(2rem, 5vw, 4rem); border-top: var(--cx-hairline) solid var(--cx-gold-thin); }
/* the price pair: the Free line is set like the program card's line, so the two cards read as a pair */
.price-pair .card.pf .t-prose { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.5; color: var(--cx-ink-line); }
/* About: the story reads as one piece across its three bands (no rule between them) */
.pull-band::before, .story-rest::before { display: none; }
.pull-band { padding-bottom: clamp(2rem, 5vw, 4rem); }
.story-rest { padding-bottom: clamp(3rem, 7vw, 7rem); }
/* bands.css (Oct 19 mock-up, preview only; loaded by /home-bands and /about-bands, nothing else).
   Section rhythm from the kit palette only: every colour is a cx token or a colour-mix of two tokens; no hex is typed.
   Light: linen ground, a deeper sand band (paper.stained), a soft copper wash (ember.pale into linen), one ink band (chosen.fill).
   Dark: charcoal ground, graded steps (paper.stained, paper.stainedDeep), one warm band (presence.ash into linen).
   Inside a band the text, line, pill and glass tokens are re-pointed, so everything the site draws (glass tint, focus rings,
   pills, links) picks up the band and keeps AA. The band colours are captured on :root so re-pointing can't loop. */
:root {
  --b-sand: var(--cx-paper-stained);
  --b-copper: color-mix(in srgb, var(--cx-ember-pale) 30%, var(--cx-paper-linen));
  --b-ink: var(--cx-chosen-fill);
  --b-ink-text: var(--cx-chosen-label);
  --b-ink-sec: var(--cx-paper-stained);
  --b-ink-soft: var(--cx-ash-base);
  --b-ink-accent: var(--cx-ember-pale);
  --b-ink-pill: var(--cx-ink-line);
  --b-line: var(--cx-ink-line);
  --b-deep: var(--cx-paper-stainedDeep);
  --b-fade: clamp(40px, 6vw, 88px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --b-copper: color-mix(in srgb, var(--cx-presence-ash) 55%, var(--cx-paper-linen));
    --b-ink: var(--cx-paper-stainedDeep);
  }
}
.band { --bg: var(--b-sand); position: relative;
  background: linear-gradient(180deg, transparent, var(--bg) var(--b-fade), var(--bg) calc(100% - var(--b-fade)), transparent); }
.band::before { display: none; }
.band + .sec::before { display: none; }
.band.join-next { background: linear-gradient(180deg, transparent, var(--bg) var(--b-fade)); }
.band.join-prev { background: var(--bg); padding-top: 0; }
.band.join-prev + .sec { padding-top: clamp(3rem, 6vw, 6rem); }

/* every band: soft ink steps up to the line ink, glass re-derives from the band */
.band { --cx-ink-soft: var(--b-line);
  --cx-paper-linen: var(--bg);
  --g-tint: color-mix(in srgb, var(--bg) 70%, transparent);
  --g-sheen: color-mix(in srgb, var(--cx-chosen-label) 34%, transparent);
  --g-spec: color-mix(in srgb, var(--cx-chosen-label) 70%, transparent);
  --g-edge: color-mix(in srgb, var(--cx-gold-thin) 46%, transparent); }
.band-sand { --bg: var(--b-sand); --cx-paper-stained: var(--b-deep); }
.band-copper { --bg: var(--b-copper); }

/* the ink band: chosen.fill with chosen.label text, the kit's own inverted pair */
.band-ink { --bg: var(--b-ink); background: var(--bg);
  --cx-ink-dark: var(--b-ink-text); --cx-ink-line: var(--b-ink-sec); --cx-ink-soft: var(--b-ink-soft);
  --cx-gold-thin: var(--b-ink-accent); --cx-ember-ink: var(--b-ink-accent); --cx-paper-stained: var(--b-ink-pill);
  --g-sheen: color-mix(in srgb, var(--b-ink-text) 6%, transparent);
  --g-spec: color-mix(in srgb, var(--b-ink-text) 18%, transparent);
  --g-edge: color-mix(in srgb, var(--b-ink-accent) 40%, transparent);
  color: var(--cx-ink-dark); }
@media (prefers-color-scheme: dark) {
  .band { --g-sheen: color-mix(in srgb, var(--cx-ink-dark) 6%, transparent); --g-spec: color-mix(in srgb, var(--cx-ink-dark) 20%, transparent); }
  .band-sand { --cx-paper-stained: var(--b-deep); }
  /* dark: the ink band is the deepest graded step, with gold edges; its text stays the dark theme's own */
  .band-ink { --cx-ink-dark: var(--cx-chosen-fill); --cx-ink-line: var(--b-line); --cx-ink-soft: var(--b-line);
    --cx-gold-thin: var(--cx-ember-pale); --cx-ember-ink: var(--cx-ember-pale); --cx-paper-stained: var(--cx-paper-linen);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cx-gold-thin) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--cx-gold-thin) 40%, transparent); }
}
/* ink-field.css (preview only; loaded by the -ink pages). Oct 20 ruling: the ink field is a visible object in the open right side
   of each hero, like Home's mandala, headline left; on phones a shorter field above the title. It never sits behind text.
   Colours are palette tokens only: dark inks on the light ground, light inks on the dark ground; one fixed tint per page. */
:root {
  --ink-t1: var(--cx-ink-dark); --ink-t2: var(--cx-ember-soft); --ink-t3: var(--cx-ink-soft); --ink-t4: var(--cx-ember-ink);
  --ink-t5: var(--cx-ink-line); --ink-t6: var(--cx-gold-thin); --ink-t7: var(--cx-ember-bloom); --ink-a: .9;
}
@media (prefers-color-scheme: dark) { :root {
  --ink-t1: var(--cx-ink-dark); --ink-t2: var(--cx-ember-pale); --ink-t3: var(--cx-ash-cool); --ink-t4: var(--cx-gold-thin);
  --ink-t5: var(--cx-presence-soft); --ink-t6: var(--cx-ember-pale); --ink-t7: var(--cx-ember-bloom); --ink-a: .85; } }
.ink-field[data-tint="1"] { --ink-c: var(--ink-t1); } .ink-field[data-tint="2"] { --ink-c: var(--ink-t2); }
.ink-field[data-tint="3"] { --ink-c: var(--ink-t3); } .ink-field[data-tint="4"] { --ink-c: var(--ink-t4); }
.ink-field[data-tint="5"] { --ink-c: var(--ink-t5); } .ink-field[data-tint="6"] { --ink-c: var(--ink-t6); }
.ink-field[data-tint="7"] { --ink-c: var(--ink-t7); }
/* the reserved box: its size never depends on the canvas, so nothing shifts */
.ink-obj { position: relative; width: 100%; aspect-ratio: 2 / 1; max-height: 32svh; margin: 0 auto; order: -1; pointer-events: none; contain: strict;
  /* static fallback (JS off, no WebGL, or a shader that won't compile): an even, mirrored haze in the page's tint with no dark centre (Oct 20, ink2) */
  background:
    radial-gradient(ellipse 30% 40% at 50% 50%, color-mix(in srgb, var(--ink-c) 26%, transparent), transparent 85%),
    radial-gradient(ellipse 22% 30% at 36% 46%, color-mix(in srgb, var(--ink-c) 16%, transparent), transparent 80%),
    radial-gradient(ellipse 22% 30% at 64% 46%, color-mix(in srgb, var(--ink-c) 16%, transparent), transparent 80%),
    radial-gradient(ellipse 44% 46% at 50% 52%, color-mix(in srgb, var(--ink-c) 10%, transparent), transparent 90%); }
.ink-col { display: contents; }   /* phones: the App field goes above the title, the phone-screens slot stays after the words */
.ink-col > .slot { order: 1; }
@media (min-width: 900px) {
  .ink-obj { order: 2; aspect-ratio: 1 / 1; max-height: min(78svh, 36rem); max-width: 36rem; }
  .ink-hero .hero-grid { align-items: center; }
  .ink-col { display: grid; gap: 2rem; }
  .ink-col > .ink-obj { order: 0; }
  .ink-col > .ink-obj { max-height: min(46svh, 24rem); }
}
.ink-field.live { background: none; }
.ink-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Oct 20 merge: on phones the field sits between the title and the subtitle, full size */
@media (max-width: 899px) {
  .ink-hero .ink-copy, .ink-hero .ink-copy > .b1 { display: contents; }
  .ink-hero .ink-copy > *, .ink-hero .ink-copy > .b1 > * { order: 3; }
  .ink-hero .ink-copy > h1, .ink-hero .ink-copy > .b1 > h1 { order: 1; }
  .ink-hero .wrap > .ink-obj, .ink-hero .ink-col > .ink-obj { order: 2; }
  .ink-hero .ink-col > .slot { order: 4; }
  .ink-hero > .wrap { row-gap: 1.25rem; }
}
/* Science's hero gets the field on the right like every other page */
@media (min-width: 900px) { .ink-hero .sci-solo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
/* Home: the words in the hero, the mandala in its own band, whole, with nothing over it */
.home-hero .ink-copy > * + * { margin-top: 1.5rem; }
.m-band-grid { display: grid; gap: 2.5rem; justify-items: center; align-items: center; }
.m-band-fig { width: min(100%, 34rem); }
.m-band .m-home { max-width: none; margin: 0; }
.m-band .slot.figure { width: min(100%, 24rem); }
@media (min-width: 900px) { .m-band-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* alt.css (Oct 19 preview only; loaded by /home-alt and /science-alt). Palette tokens only. */
/* Home: the hero's figure place leads where the big mandala was. The body map is still owed; the slot says so in Home's own words. */
.alt-figure .st-figure { position: relative; top: auto; height: auto; padding: 2rem 0 0; pointer-events: auto; }
.alt-figure .st-copy { grid-row: 2; }
.alt-figure .st-fig { transform: none; opacity: 1; width: min(86vw, 26rem); }
.alt-figure .st-fig .slot { width: 100%; max-width: none; aspect-ratio: 1 / 1; margin: 0; display: grid; place-items: center; }
@media (min-width: 900px) {
  .alt-figure .st-figure { grid-row: 1; position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); padding: 0; align-items: center; }
  .alt-figure .st-copy { grid-row: 1; }
  .alt-figure .st-fig { width: min(40vw, 70svh); }
}
/* Science (Oct 20 redesign): hero words; HES and HEF as two cards; the map as the centrepiece band; the list as a designed grid.
   The map is sticky only inside its own top row beside the panel, so it can never float over the list or any other words. */
.sci-solo { grid-template-columns: minmax(0, 1fr); }
.sci-solo .sci-copy { max-width: 46rem; }
.sa-intro { padding-top: 0; }
.sa-cards { display: grid; gap: 20px; }
.sa-card { border-radius: 24px; padding: clamp(24px, 4vw, 44px); }
.sa-card > * + * { margin-top: 0.75rem; }
.sa-card > .t-label { font-size: 1.0625rem; letter-spacing: 0.04em; margin-bottom: 1.25rem; }
.sa-hes { background: var(--cx-ink-dark); color: var(--cx-paper-linen); }
.sa-hes .t-label, .sa-hes .t-prose { color: var(--cx-paper-linen); }
.sa-hef { background: color-mix(in srgb, var(--cx-ember-bloom) 14%, var(--cx-paper-linen)); border: var(--cx-hairline) solid var(--cx-gold-thin); }
.sa-hef .t-label, .sa-hef .t-prose { color: var(--cx-ink-dark); }
@media (min-width: 800px) { .sa-cards { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } }
.sa-map #m-caption { max-width: 40rem; margin: 0 auto 2rem; text-align: center; color: var(--cx-ink-dark); }
.sci-map-sec .sci-map .m-sci { max-width: none; display: block; }
.sci-map-sec .m-stage, .sci-map-sec .m-panel { grid-column: auto; grid-row: auto; }
.sci-map-sec .m-stage { position: relative; max-width: min(100%, 36rem); margin: 0 auto; }
.sa-map .m-panel { background: var(--cx-paper-linen); }
@media (min-width: 1040px) {
  .sci-map-sec .m-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .sci-map-sec .m-stage { position: sticky; top: calc(var(--hdr) + 24px); width: 100%; max-width: calc(100svh - var(--hdr) - 48px); }
  .sci-map-sec .m-panel { margin-top: 0; }
}
.sa-map .m-list > .t-label { margin: 3rem 0 0; font-size: 1.0625rem; letter-spacing: 0.04em; padding-bottom: 0.75rem; border-bottom: 2px solid var(--cx-gold-thin); }
.sa-map .m-ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.sa-map .m-item { margin: 0; padding: 22px 22px 18px; border: var(--cx-hairline) solid color-mix(in srgb, var(--cx-gold-thin) 60%, transparent); border-radius: 18px; background: var(--cx-paper-linen); }
.sa-map .m-item + .m-item { border-top: var(--cx-hairline) solid color-mix(in srgb, var(--cx-gold-thin) 60%, transparent); }
.sa-map .m-item > .t-row { font-family: var(--cx-type-title, inherit); font-size: 1.375rem; line-height: 1.25; margin-bottom: 0.5rem; }
.sa-map .m-item[data-ring="0"] { background: var(--cx-ink-dark); border-color: var(--cx-ink-dark); }
.sa-map .m-item[data-ring="0"] > * { color: var(--cx-paper-linen); max-width: 46rem; }
.sa-map .m-item[data-ring="0"] .textlink { color: var(--cx-paper-linen); text-decoration-color: currentColor; }
.sa-map .m-item[data-ring="orbit"] { border: 2px dashed var(--cx-gold-thin); background: transparent; }
.sa-map .m-item[data-ring="2"] { border-top: 5px solid var(--cx-ember-bloom); }
@media (max-width: 699px) {
  .sa-map .m-item[data-ring="1"], .sa-map .m-item[data-ring="2"] { border-radius: 0 18px 18px 0; border-left: 5px solid var(--cx-gold-thin); }
  .sa-map .m-item[data-ring="2"] { border-top-width: var(--cx-hairline); border-left-color: var(--cx-ember-bloom); }
}
@media (min-width: 700px) { .sa-map .m-ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sa-map .m-item[data-ring="0"], .sa-map .m-item[data-ring="orbit"] { grid-column: 1 / -1; } }
@media (min-width: 1040px) {
  .sa-map .m-ul:first-of-type { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sa-map .m-ul:first-of-type .m-item { grid-column: span 2; }
  .sa-map .m-ul:first-of-type .m-item[data-ring="0"], .sa-map .m-ul:first-of-type .m-item[data-ring="orbit"] { grid-column: 1 / -1; }
  .sa-map .m-ul:first-of-type .m-item:nth-child(8), .sa-map .m-ul:first-of-type .m-item:nth-child(9) { grid-column: span 3; }
  .sa-map .m-ul + .t-label + .m-ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Oct 20 mandala restyle (.mx: /home-mandala and /science-alt): the Insights map look. Thin line circles, no fills; tones follow the scheme. */
.mx .m-svg .m-ground { fill: color-mix(in srgb, var(--cx-ink-dark) 7%, var(--cx-paper-stained)); }
.mx .m-svg .m-c { fill: none; stroke: var(--cx-ink-dark); stroke-opacity: 0.8; stroke-width: 1.1; }
.mx .m-svg .m-b1 .m-c { stroke-width: 1.4; }
.mx .m-svg .m-line { stroke: var(--cx-ink-dark); stroke-opacity: 0.55; stroke-width: 1; }
.mx .m-svg .m-orbit { stroke: var(--cx-ink-dark); stroke-opacity: 0.35; }
.mx .m-svg .mx-outer { fill: none; stroke: var(--cx-ink-dark); stroke-opacity: 0.6; stroke-width: 1.4; stroke-dasharray: 0.5 5; stroke-linecap: round; }
.mx .m-svg .mx-glow { fill: url(#mx-glow); }
.mx .m-svg .mx-dot { fill: var(--cx-ink-dark); }
.mx-g0 { stop-color: var(--cx-ember-bloom); stop-opacity: 0.6; }
.mx-g1 { stop-color: var(--cx-ember-bloom); stop-opacity: 0; }
@media (prefers-color-scheme: dark) { .mx .m-svg .m-ground { fill: color-mix(in srgb, var(--cx-paper-linen) 70%, black); } .mx-g0 { stop-opacity: 0.7; } }
/* Home: the whole mandala, always; on phones it gets its own place right after the opening words, nothing on top of it */
.motion .hm .st-mandala, .hm .st-mandala { transform: none; }
@media (max-width: 899px) {
  .hm .story-grid { display: flex; flex-direction: column; }
  .hm .st-copy { display: contents; }
  .hm .st-copy > .b1 { order: 1; padding: clamp(2rem, 9svh, 6rem) 0 0; }
  .hm .st-stage { order: 2; position: static; height: auto; padding: 2.5rem 0 1rem; align-items: center; }
  .hm .st-mandala { width: min(92vw, 26rem); }
  .hm .st-copy > .beat:not(.b1) { order: 3; margin-top: 2rem; }
  .hm .st-copy > .beat:last-child { margin-bottom: 4rem; }
}
/* Oct 20 merge: the map's focus ring is a double ring, dark inside and light outside, so it shows on any ground in either mode */
.mx .m-btn:focus-visible { outline: 3px solid var(--cx-ink-dark); outline-offset: 2px; box-shadow: 0 0 0 7px var(--cx-paper-linen); }

/* ---------- Oct 20 sleek pass (CSS and layout only; no copy, ink placement and size, bands and header unchanged) ----------
   Display type about 30% smaller with tighter leading and tracking; body 17 to 18px desktop, 16px floor on phones; section
   padding cut about 35%; a shorter hero so the next section peeks above the fold; denser hairline card grids; small tracked
   labels in normal case (the copy rule bans all caps, so no text-transform) in one accent, ember.ink. */
.hero .t-title { font-size: clamp(2.25rem, 0.9rem + 5vw, 5.25rem); line-height: 1; letter-spacing: -0.035em; max-width: 14ch; }
.t-title { font-size: clamp(2rem, 1.1rem + 3.1vw, 3.75rem); line-height: 1.04; letter-spacing: -0.028em; }
h2.t-object, .sec-head .t-object { font-size: clamp(1.5rem, 0.95rem + 1.9vw, 2.5rem); line-height: 1.08; letter-spacing: -0.024em; }
.hero .t-object { font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); line-height: 1.3; letter-spacing: -0.012em; max-width: 30ch; }
.hero .t-title + .t-object { margin-top: clamp(1rem, 1.6vw, 1.5rem); }
.t-prose, .t-text { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); line-height: 1.55; }
.story .beat .t-prose { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); }
.t-label, .card .t-label, .help .t-label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--cx-ember-ink); }
.hero { padding: clamp(1.75rem, 3.5vw, 3.5rem) 0 clamp(2rem, 3.5vw, 3.5rem); }
.sec { padding: clamp(3.25rem, 7vw, 7.5rem) 0; }
@media (min-width: 900px) { .sec-grid { gap: clamp(2rem, 4vw, 4.5rem); } }
.card { border-radius: 14px; padding: 22px 24px; border: var(--cx-hairline) solid var(--cx-gold-thin); }
@media (min-width: 720px) { .rows.doors { gap: 12px; } .rows.doors .item { padding: 22px 24px; } .pair-cards { gap: 16px; } }

/* ---------- Oct 20 hero unify: one shared hero rule for every page, no per-page values ----------
   Same header-to-title offset, same title size, one min-height token, the ink box the same size and place.
   Desktop: the words and the ink both start at the top of the hero (no vertical centring, which moved the title by copy length).
   Phones: the title box always holds two lines, so the ink below it sits at the same place on every page. */
:root { --hero-top: clamp(1.75rem, 3.5vw, 3.5rem); --hero-min: 31rem; --hero-ink: min(78svh, 36rem); }
@media (min-width: 900px) { :root { --hero-min: 34.75rem; } }
main > .hero, main > .hero.home-hero, main > .hero.sci-hero { padding-top: var(--hero-top); min-height: var(--hero-min); box-sizing: border-box; }
main > .hero h1.t-title, main > .hero .t-title:first-of-type { font-size: clamp(2.25rem, 0.9rem + 5vw, 5.25rem); line-height: 1; margin-top: 0; }
@media (max-width: 899.98px) { main > .hero h1.t-title { min-height: 2lh; } }
@media (min-width: 900px) {
  .ink-hero .hero-grid, .ink-hero .sci-solo, .ink-hero > .wrap { align-items: start; }
  .ink-hero .ink-obj, .ink-hero .ink-col > .ink-obj { max-height: var(--hero-ink); max-width: 36rem; aspect-ratio: 1 / 1; margin: 0 auto; }
  .ink-hero .ink-col { align-self: start; }
}

/* ---------- Oct 20 interim body map (Home). Art: /img/body-map.svg; logic: /js/body-map.js ---------- */
.bz-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .bz-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); } }
.bz-fig { width: min(100%, 34rem); margin: 0 auto; aspect-ratio: 400 / 420; position: relative; }
.bz-fig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bz-r { cursor: pointer; pointer-events: all; }
.bz-r > * { fill: transparent; stroke: var(--cx-ink-line); stroke-width: 0.6; vector-effect: non-scaling-stroke; transition: fill .25s ease, stroke .25s ease; }
.bz-whole > * { stroke: var(--cx-ink-dark); stroke-width: 1; }
.bz-r:hover > *, .bz-r.on > * { fill: color-mix(in srgb, var(--cx-ember-bloom) 45%, transparent); stroke: var(--cx-ember-bloom); }
.bz-whole:hover > *, .bz-whole.on > * { fill: color-mix(in srgb, var(--cx-ember-bloom) 18%, transparent); }
.bz-r.on { filter: drop-shadow(0 0 6px var(--cx-ember-bloom)); }
.bz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 2.5rem; }
.bz-name { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); line-height: 1.1; color: var(--cx-ink-dark); min-height: 1.1em; margin: 0; }
.bz-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bz-chip { font: inherit; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 500; font-size: 0.875rem; color: var(--cx-ink-dark); background: transparent;
  border: var(--cx-hairline) solid var(--cx-gold-thin); border-radius: 999px; min-height: 44px; min-width: 44px; padding: 0 14px; cursor: pointer; }
.bz-chip:hover, .bz-chip.on { border-color: var(--cx-ember-bloom); background: color-mix(in srgb, var(--cx-ember-bloom) 14%, transparent); }
.bz-chip[aria-pressed="true"] { border-width: 2px; }
.bz-chip:focus-visible { outline: 2px solid var(--cx-ink-dark); outline-offset: 2px; }
.bz:not(.ready) .bz-fig { display: none; }
@media (prefers-reduced-motion: reduce) { .bz-r > * { transition: none; } }
/* tap-to-drop ink in its own cell of the Home mandala band (Oct 20 layer fix: it no longer sits behind the mandala) */
.m-band-grid > .ink-drop { position: relative; width: min(100%, 26rem); aspect-ratio: 1 / 1; contain: strict; background: none; touch-action: pan-y; cursor: pointer; }
.m-band-grid > .ink-drop canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 900px) { .m-band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); } .m-band-fig { width: min(100%, 30rem); } }

/* Oct 22 prelaunch drafts: next-version label and coming-soon note */
.next-ver { margin: 0.5rem 0 0.75rem; color: var(--cx-ember-ink); }
.next-note { margin-top: 0.75rem; }
/* Oct 22: Justin's original body images. Front and back are the main pair with the SVG overlay, the three-quarter view sits below. */
.bz .bz-fig { aspect-ratio: auto; width: min(100%, 36rem); }
.bz .bz-fig > svg { display: none; }
.bz-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2016 / 1792; border-radius: 14px; overflow: hidden; background: #2a241d; }
.bz-ph, .bz-ph img { display: block; width: 100%; height: auto; }
.bz-pair .bz-ph img { aspect-ratio: 1008 / 1792; }
.bz-pair > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bz-pair .bz-r > * { stroke: transparent; stroke-width: 1.5; }
.bz-pair .bz-r:hover > *, .bz-pair .bz-r.on > * { fill: color-mix(in srgb, var(--cx-ember-bloom) 40%, transparent); stroke: var(--cx-ember-bloom); }
.bz-pair .bz-whole:hover > *, .bz-pair .bz-whole.on > * { fill: color-mix(in srgb, var(--cx-ember-bloom) 12%, transparent); }
.bz-third { width: 46%; margin: 1rem auto 0; border-radius: 14px; overflow: hidden; }
.bz-third .bz-ph img { aspect-ratio: 1152 / 1728; }
.bz:not(.ready) .bz-fig { display: block; }

/* Oct 23: app shots held until launch day (_build/hold_app_shots.py). With the Home figure slot held, the mandala band uses two even columns. When the slot is restored this rule stops matching. */
@media (min-width: 900px) { .m-band-grid:not(:has(> .slot)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Home, Oct 23: who it's for band with three doors, then the ecosystem paragraph on plain paper */
.who-sec { padding: clamp(3rem, 6vw, 5rem) 0; }
.who-sec .who-line { font-style: normal; max-width: 44ch; margin-bottom: 1.75rem; }
@media (min-width: 1040px) { .rows.doors.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rows.doors.tiles.three .item { min-height: 0; } }
@media (min-width: 720px) and (max-width: 1039px) { .rows.doors.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rows.doors.tiles.three > li:first-child { grid-column: auto; } }
.home-desc { background: var(--cx-paper-linen); box-shadow: inset 0 1px 0 var(--cx-gold-thin), inset 0 -1px 0 var(--cx-gold-thin); }
.home-desc .home-desc-text { font-style: normal; font-size: 1.0625rem; line-height: 1.6; max-width: 62ch; }
.home-desc .owed { white-space: nowrap; }
/* Oct 23: Payhip covers beside the Manual and Guide (Justin's ruling) */
.book { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.book-text > * + * { margin-top: 1rem; }
.book-text .textlink { margin-top: 1.25rem; }
.book-cover { display: block; border-radius: 4px; overflow: hidden; line-height: 0; box-shadow: 0 0 0 var(--cx-hairline) color-mix(in srgb, var(--cx-gold-thin) 55%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--cx-ink-dark) 45%, transparent); transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease; }
.book-cover img { display: block; width: 100%; height: auto; }
.book-cover:hover { transform: translateY(-2px); }
.book-cover:focus-visible { outline: 3px solid var(--cx-ink-dark); outline-offset: 3px; }
@media (max-width: 599px) { .book { grid-template-columns: minmax(0, 1fr); } .book-cover { width: 9rem; } }
@media (min-width: 600px) { .book { grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; } }
@media (prefers-reduced-motion: reduce) { .book-cover { transition: none; } .book-cover:hover { transform: none; } }
/* Oct 23: free preview link beside each buy link (Justin's ruling) */
.book-links { display: flex; flex-wrap: wrap; column-gap: 1.75rem; row-gap: 0.6rem; align-items: baseline; }
.book-text .book-links .textlink { margin-top: 0; }
.book-text .book-links { margin-top: 1.25rem; }