/* The site's other pages: the download page and the legal pages
   (site-download.ts, site-legal.ts), on the front page's sheet and tokens
   (`site.css`, linked first). The front page does not load this. */

/* ── Downloads ──────────────────────────────────────────────────────────── */
/* Two places to use Archon, said the same way: a label, the name, one line, the
   one thing to do, and what it needs as a ruled spec sheet, the instrument's
   manual rather than icons in boxes. Rows line up across both cards. */
.download-page { --rule: color-mix(in oklab, var(--ink) 10%, transparent); max-width: var(--max); margin: 0 auto; padding: var(--site-space-16) var(--pad); }
.download-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--site-space-12); align-items: center; margin-bottom: var(--site-space-12); }
.download-intro > div:first-child { max-width: 50rem; }
.download-intro h1 { margin: 0; font-size: var(--site-head-page); font-weight: 450; line-height: 1.06; letter-spacing: -0.05em; text-wrap: balance; }
.download-intro .lede { max-width: 36em; }
/* Archon's own orb, live, on the page's own ground: no halo and no disc behind it.
   Its still draw holds the place until the GPU draws it, and stays if it never can. */
.download-orb { position: relative; width: clamp(200px, 24vw, 320px); aspect-ratio: 1; margin-right: var(--site-space-10); }
.download-orb archon-orb { position: absolute; inset: 0; width: 100%; height: 100%; background: none; animation: orb-arrive 1.4s var(--ease) both; }
.download-orb-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.download-orb:has(archon-orb[data-lit]) .download-orb-still { visibility: hidden; }

.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 var(--space-6); }
.download-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; padding: var(--site-space-10); border-radius: var(--site-radius-lg); }
.download-kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--space-6); margin: 0 0 var(--site-space-10); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.download-tag { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--glass-well); color: var(--ink-2); letter-spacing: var(--tracking-wide); }
.download-card h2 { margin: 0; font-size: var(--site-head-download); font-weight: 450; line-height: 1.1; letter-spacing: -0.035em; }
.download-pitch { margin: var(--space-3) 0 0; max-width: 30em; color: var(--ink-2); font-size: var(--text-md); line-height: 1.6; text-wrap: pretty; }
.download-do { margin-top: var(--space-8); }
.download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.download-card .btn:not(.is-solid):not(.is-quiet) { background: var(--glass-fill-quiet); box-shadow: var(--soft-1); }
.download-do .download-meta { margin: var(--space-4) 0 0; }
.download-unavailable { margin: 0; color: var(--ink-2); font-size: var(--text-md); line-height: 1.6; }

.download-detail { align-self: start; }
.download-specs { display: grid; gap: var(--space-1); margin: var(--site-space-10) 0 0; font-size: var(--text-base); }
.download-specs div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--site-radius-sm); background: var(--glass-fill-quiet); }
.download-specs dt { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.download-specs dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.download-foot { display: grid; gap: var(--space-2); align-content: start; margin-top: var(--space-6); }
.download-foot .download-meta { margin: 0; }
/* The one thing to know before opening it, lit in the amber that means "needs you". */
.download-caveat { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; color: var(--ink-2); font-size: var(--text-base); line-height: 1.55; }
.download-caveat a { color: var(--ink); text-underline-offset: 0.2em; white-space: nowrap; }
.download-led { flex: none; width: 7px; height: 7px; margin-top: 0.55em; border-radius: 50%; background: var(--needs); box-shadow: 0 0 0 3px color-mix(in oklab, var(--needs) 16%, transparent), 0 0 10px color-mix(in oklab, var(--needs) 55%, transparent); }
.download-checksum { font-size: var(--text-base); }
.download-checksum summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); cursor: pointer; color: var(--ink-2); list-style: none; transition: color var(--motion-duration-fast); }
.download-checksum summary::-webkit-details-marker { display: none; }
.download-checksum summary:hover { color: var(--ink); }
.download-checksum summary svg { transition: transform var(--motion-duration-normal) var(--ease); }
.download-checksum[open] summary svg { transform: rotate(90deg); }
.download-checksum p { margin: 0 0 var(--space-3); color: var(--ink-3); line-height: 1.55; }
.download-checksum code { display: block; margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--site-radius-sm); overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--text-sm); }
.download-meta, .download-help { font-size: var(--text-base); color: var(--ink-3); line-height: 1.65; }
.download-meta a, .download-help a { color: var(--ink); text-underline-offset: 0.2em; }

/* After the cards, the page reads as a manual: ruled columns, never more boxes. */
.download-new, .download-steps { margin-top: var(--site-space-20); }
.download-new > h2, .download-steps > h2 { margin: 0; font-size: var(--site-head-card); font-weight: 400; letter-spacing: -0.03em; }
.download-new ul, .download-steps ol { display: grid; gap: var(--space-8); padding: 0; margin: var(--site-space-10) 0 0; list-style: none; }
.download-new ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.download-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.download-new li, .download-steps li { padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill-quiet); }
.download-steps li > span { color: var(--blue); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wide); }
.download-new h3, .download-steps h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 500; }
.download-steps h3 { margin-top: var(--space-4); }
.download-new p, .download-steps p { margin: 0; color: var(--ink-2); font-size: var(--text-base); line-height: 1.65; }
.download-help { margin-top: var(--site-space-16); }
@media (max-width: 820px) {
  .download-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .download-orb { order: -1; width: 128px; margin: 0; }
}
@media (max-width: 620px) {
  .download-page { padding-top: var(--site-space-10); }
  .download-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-4); }
  .download-card { grid-row: auto; grid-template-rows: none; padding: var(--space-6); }
  .download-kicker { margin-bottom: var(--space-6); }
  .download-specs { margin-top: var(--space-8); }
  .download-new ul, .download-steps ol { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* Not on a Mac, or a Mac this build will not run on: said under the button, before anything downloads. */
.download-elsewhere { margin: var(--space-4) 0 0; max-width: 30em; color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; text-wrap: pretty; }
.download-copy { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* ── After the download: how to open it ────────────────────────────────── */
/* The page turns, in place, into three steps beside a drawing that plays
   each: the browser's download list, the disk image's own window, Archon in
   the Dock. The drawing is measured in its own width (cqw), so it scales as
   one piece; a step and its scene light together. */
.download-page[data-installing] > :not(.install) { display: none; }
.install { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--site-space-12); align-items: center; min-height: min(72vh, 760px); animation: install-arrive 0.6s var(--ease) both; }
.install[hidden] { display: none; }
@keyframes install-arrive { from { opacity: 0; translate: 0 12px; } }
.install h1 { margin: 0; font-size: var(--site-head-section); font-weight: 450; line-height: 1.06; letter-spacing: -0.045em; text-wrap: balance; outline: none; }
.install-status { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wide); }
.install-status b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.install-size { white-space: nowrap; }
.install-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 16%, transparent); animation: install-led 1.6s ease-in-out infinite; }
@keyframes install-led { 50% { opacity: 0.35; } }

.install-steps { display: grid; gap: var(--space-1); margin: var(--site-space-10) 0 0; padding: 0; list-style: none; }
.install-steps button { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: var(--space-3); width: 100%; padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--site-radius-card); background: transparent; color: var(--ink-3); font: inherit; text-align: left; cursor: pointer; transition: background var(--motion-duration-normal) var(--ease), color var(--motion-duration-normal) var(--ease), box-shadow var(--motion-duration-normal) var(--ease); }
.install-steps button:hover { color: var(--ink-2); }
.install-steps button:focus-visible { outline: none; box-shadow: var(--focus-glow); }
.install-steps button[aria-current] { background: var(--glass-fill-quiet); box-shadow: var(--soft-1); color: var(--ink); }
.install-n { padding-top: 0.25em; font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wide); }
.install-steps [aria-current] .install-n { color: var(--blue); }
.install-steps b { display: block; font-size: var(--text-md); font-weight: 500; }
.install-say { display: block; margin-top: var(--space-1); color: inherit; font-size: var(--text-base); line-height: 1.6; text-wrap: pretty; }
.install-steps .install-say b { display: inline; font-size: var(--text-base); overflow-wrap: anywhere; }
.install-say a { color: inherit; text-underline-offset: 0.2em; }
.install-help { margin: var(--space-8) 0 0; color: var(--ink-3); font-size: var(--text-base); line-height: 1.65; }
.install-help a { color: var(--ink); text-underline-offset: 0.2em; }
.install-back { margin: var(--space-3) 0 0; font-size: var(--text-base); }
.install-back a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); color: var(--ink-3); text-decoration: none; transition: color var(--motion-duration-fast); }
.install-back a:hover { color: var(--ink); }
.install-back svg { width: 16px; height: 16px; rotate: 180deg; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The drawing: a desk 5 by 4, every size a share of its width. */
.install-figure { margin: 0; }
/* The install picture's own names: a desk drawn to its width, so its type and its colours scale with it. */
.install-desk {
  --install-lilac: oklch(0.72 0.12 300 / 0.2);
  --install-lilac-soft: oklch(0.72 0.12 300 / 0.14);
  --install-folder-back: oklch(0.68 0.13 245);
  --install-folder-front: oklch(0.76 0.12 240);
  --install-folder-line: oklch(0.5 0.13 250);
  --install-drop: rgb(0 0 0 / 0.25);
  --install-drop-soft: rgb(0 0 0 / 0.22);
  --install-type: 2.2cqw;
  --install-type-url: 1.9cqw;
  --install-type-file: 2cqw;
  --install-type-small: 1.7cqw;
  --install-type-slot: 1.8cqw;
  --install-type-label: 1.5cqw;
  --install-type-head: 3.2cqw;
}
.install-desk { position: relative; container-type: inline-size; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--site-radius-lg); background: radial-gradient(55% 50% at 100% 0%, color-mix(in oklab, var(--blue) 16%, transparent), transparent 72%), radial-gradient(55% 55% at 0% 100%, var(--install-lilac), transparent 72%), var(--glass-well); box-shadow: var(--soft-2); }
.install-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s 0.45s; }
.install[data-scene="1"] .is-browser, .install[data-scene="2"] .is-disk, .install[data-scene="3"] .is-open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
.install-win { position: absolute; overflow: hidden; border-radius: 2.2cqw; background: var(--card); box-shadow: var(--soft-3); color: var(--ink); font-size: var(--install-type); }
.install-bar { position: relative; display: flex; align-items: center; gap: 1cqw; height: 6.4cqw; padding: 0 2.4cqw; background: var(--glass-well); }
.install-bar i { flex: none; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--line-2); }
.install-bar > b { position: absolute; left: 50%; translate: -50% 0; color: var(--ink-2); font-weight: 500; }

/* 1 · the browser's downloads */
.is-browser .install-win { left: 6cqw; top: 8cqw; width: 88cqw; height: 64cqw; }
.install-url { flex: 1; margin: 0 8cqw 0 7cqw; padding: 0.8cqw 2cqw; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-3); font-size: var(--install-type-url); text-align: center; box-shadow: var(--soft-1); }
.install-get { position: absolute; right: 2cqw; top: 1.2cqw; display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 1cqw; color: var(--ink-2); }
.install-get svg { width: 3cqw; height: 3cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.install-page { display: grid; gap: 2cqw; padding: 7cqw 8cqw; }
.install-page span { height: 2.2cqw; border-radius: var(--radius-pill); background: var(--glass-well); }
.install-page span:first-child { width: 58%; height: 4.4cqw; margin-bottom: 1cqw; }
.install-page span:nth-child(2) { width: 82%; }
.install-page span:nth-child(3) { width: 46%; }
.install-list { position: absolute; right: 1.5cqw; top: 7.4cqw; width: 50cqw; padding: 1.2cqw; border-radius: 1.8cqw; background: var(--card); box-shadow: var(--soft-3); opacity: 0; transform-origin: top right; }
.install-file { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw; border-radius: 1.2cqw; }
.install-file img { flex: none; width: 5cqw; height: 5cqw; }
.install-file > span { min-width: 0; }
.install-file b { display: block; overflow: hidden; font-size: var(--install-type-file); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.install-file small { color: var(--ink-3); font-size: var(--install-type-small); }

/* 2 · the disk image's window, as it opens */
.is-disk .install-win { left: 10cqw; top: 9cqw; width: 80cqw; height: 60cqw; }
.install-disk { display: grid; justify-items: center; align-content: start; height: calc(100% - 6.4cqw); padding-top: 5cqw; background: radial-gradient(50% 60% at 100% 0%, color-mix(in oklab, var(--blue) 12%, transparent), transparent 72%), radial-gradient(50% 60% at 0% 100%, var(--install-lilac-soft), transparent 72%); }
.install-disk-lbl { display: flex; align-items: center; gap: 1cqw; margin: 0; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--install-type-label); letter-spacing: 0.14em; text-transform: uppercase; }
.install-disk-lbl span { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: var(--needs); }
.install-disk-h { margin: 1.4cqw 0 0; font-size: var(--install-type-head); font-weight: 500; letter-spacing: -0.02em; }
.install-disk-row { display: grid; grid-template-columns: 20cqw minmax(0, 1fr) 20cqw; align-items: center; width: 64cqw; margin-top: 5cqw; }
.install-slot { display: grid; justify-items: center; gap: 1.2cqw; }
.install-slot small { color: var(--ink-2); font-size: var(--install-type-slot); }
/* The icon file is full-bleed; on a Mac it is the rounded square. */
.install-app, .install-ghost, .install-file img, .install-dock img { border-radius: 22.5%; }
.install-app { width: 14cqw; height: 14cqw; }
.install-folder { width: 14cqw; height: 14cqw; padding: 1.4cqw 0.6cqw; }
.install-folder .is-back { fill: var(--install-folder-back); }
.install-folder .is-front { fill: var(--install-folder-front); }
.install-folder .is-a { fill: none; stroke: var(--install-folder-line); stroke-width: 3; stroke-linecap: round; }
.install-dots { display: flex; justify-content: center; gap: 1.4cqw; padding-bottom: 3cqw; }
.install-dots i { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: var(--ink-3); opacity: 0.35; }
.install-dots i:nth-child(n+4) { opacity: 0.7; }
.install-ghost { position: absolute; left: 0; top: 0; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; opacity: 0; filter: drop-shadow(0 1.2cqw 1.6cqw var(--install-drop)); }

/* 3 · Archon in the Dock, and open */
.is-open .install-win { left: 16cqw; top: 7cqw; width: 68cqw; height: 54cqw; }
.install-hello { display: grid; justify-items: center; align-content: center; gap: 1cqw; height: calc(100% - 6.4cqw); }
.install-hello img { width: 17cqw; height: 17cqw; margin-bottom: 2cqw; }
.install-hello b { font-size: var(--install-type-head); font-weight: 500; letter-spacing: -0.02em; }
.install-hello small { color: var(--ink-3); font-size: var(--install-type-file); }
.install-dock { position: absolute; left: 50%; bottom: 3cqw; display: flex; gap: 1.4cqw; padding: 1.2cqw; border-radius: 2.4cqw; background: var(--glass-fill); box-shadow: var(--soft-2); translate: -50% 0; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.install-dock > * { width: 6cqw; height: 6cqw; border-radius: 1.5cqw; }
.install-dock span { background: var(--glass-well); }

/* The pointer: its tip, not its box, lands where it is sent. */
.install-pointer { position: absolute; left: 0; top: 0; z-index: 3; width: 4.2cqw; height: 4.2cqw; margin: -0.45cqw 0 0 -0.9cqw; fill: var(--solid); stroke: var(--card); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0.4cqw 0.6cqw var(--install-drop-soft)); transform-origin: 20% 10%; }

/* Each scene plays once when it comes up: its own keyframes restart with it. */
.install[data-scene="1"] .install-pointer { animation: install-pointer-1 4.2s var(--ease) both; }
.install[data-scene="1"] .install-get { animation: install-get 4.2s both; }
.install[data-scene="1"] .install-list { animation: install-list 4.2s var(--ease) both; }
.install[data-scene="1"] .install-file { animation: install-file 4.2s both; }
/* A drag is carried, not thrown: it eases in and out. */
.install[data-scene="2"] .install-pointer { animation: install-pointer-2 4.2s cubic-bezier(0.45, 0, 0.2, 1) both; }
.install[data-scene="2"] .install-ghost { animation: install-ghost 4.2s cubic-bezier(0.45, 0, 0.2, 1) both; }
.install[data-scene="2"] .install-folder { animation: install-folder 4.2s var(--ease) both; }
.install[data-scene="3"] .install-pointer { animation: install-pointer-3 4.2s var(--ease) both; }
.install[data-scene="3"] .install-dock img { animation: install-bounce 4.2s ease-in-out both; }
.install[data-scene="3"] .is-open .install-win { animation: install-launch 4.2s var(--ease) both; }
@keyframes install-pointer-1 {
  0% { translate: 50cqw 52cqw; }
  26% { translate: 90cqw 11.2cqw; scale: 1; } 30% { scale: 0.8; } 34% { scale: 1; }
  42% { translate: 90cqw 11.2cqw; }
  58% { translate: 62cqw 20.6cqw; scale: 1; } 62% { scale: 0.8; } 66% { scale: 1; }
  100% { translate: 62cqw 20.6cqw; }
}
@keyframes install-get { 0%, 28% { background: transparent; } 32%, 100% { background: var(--blue-wash); color: var(--blue); } }
@keyframes install-list { 0%, 32% { opacity: 0; transform: translateY(-1cqw) scale(0.96); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes install-file { 0%, 60% { background: transparent; } 64%, 100% { background: var(--blue-wash); } }
@keyframes install-pointer-2 {
  0% { translate: 46cqw 76cqw; }
  22% { translate: 29cqw 42cqw; scale: 1; } 27% { scale: 0.85; }
  66% { translate: 73cqw 42cqw; scale: 0.85; } 72% { scale: 1; }
  100% { translate: 73cqw 42cqw; }
}
@keyframes install-ghost {
  0%, 26% { opacity: 0; translate: 28cqw 41cqw; scale: 1; }
  30% { opacity: 0.8; translate: 28cqw 41cqw; scale: 1.05; }
  66% { opacity: 0.8; translate: 72cqw 41cqw; scale: 1.05; }
  74%, 100% { opacity: 0; translate: 72cqw 41cqw; scale: 0.5; }
}
@keyframes install-folder { 0%, 58% { scale: 1; } 66%, 72% { scale: 1.1; } 82%, 100% { scale: 1; } }
@keyframes install-pointer-3 {
  0% { translate: 30cqw 44cqw; }
  26% { translate: 54cqw 72.8cqw; scale: 1; } 30% { scale: 0.8; } 34% { scale: 1; }
  50% { translate: 54cqw 72.8cqw; }
  80%, 100% { translate: 82cqw 64cqw; }
}
@keyframes install-bounce { 0%, 32% { translate: 0 0; } 38% { translate: 0 -2.6cqw; } 44% { translate: 0 0; } 50% { translate: 0 -1.4cqw; } 56%, 100% { translate: 0 0; } }
@keyframes install-launch { 0%, 52% { opacity: 0; scale: 0.92; translate: 0 3cqw; } 66%, 100% { opacity: 1; scale: 1; translate: 0 0; } }

/* Under the drawing, where it is in the three: the one playing fills as it plays. */
.install-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.install-progress span { height: 3px; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ink) 12%, transparent); }
.install-progress span::after { content: ""; display: block; width: 0; height: 100%; background: var(--ink-2); }
.install[data-scene="2"] .install-progress span:nth-child(1)::after, .install[data-scene="3"] .install-progress span:nth-child(-n+2)::after { width: 100%; }
.install[data-scene="1"] .install-progress span:nth-child(1)::after, .install[data-scene="2"] .install-progress span:nth-child(2)::after, .install[data-scene="3"] .install-progress span:nth-child(3)::after { animation: install-fill 4.2s linear both; }
@keyframes install-fill { to { width: 100%; } }

/* Still: each scene in its last frame, no pointer, and a step moves only when chosen. */
@media (prefers-reduced-motion: reduce) {
  .install, .install *, .install *::after { animation: none !important; }
  .install-pointer, .install-ghost { display: none; }
  .install-list { opacity: 1; }
  .install-file, .install-get { background: var(--blue-wash); }
  .install[data-scene="1"] .install-progress span:nth-child(1)::after, .install[data-scene="2"] .install-progress span:nth-child(2)::after, .install[data-scene="3"] .install-progress span:nth-child(3)::after { width: 100%; }
}
@media (max-width: 820px) {
  .install { grid-template-columns: minmax(0, 1fr); gap: var(--site-space-10); min-height: 0; }
  .install-steps button { padding: var(--space-3) var(--space-4); }
}

/* ── Legal pages ────────────────────────────────────────────────────────── */
/* Privacy, Terms and Security read as one set: a switch between them, the
   short version first in a soft panel, then the detail in a readable column,
   numbered, with its contents beside it lighting the section being read
   (site-legal.js). No rules or outlines: fills and room do the separating. */
.legal-page { --legal-mark: calc(var(--space-6) + var(--space-1)); display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 720px); gap: var(--site-space-16); justify-content: center; padding-top: var(--site-space-12); }
.legal-contents { position: sticky; top: calc(80px + var(--space-8)); align-self: start; max-height: calc(100vh - var(--site-space-28)); overflow: auto; margin-top: calc(var(--site-space-16) + var(--space-8)); scrollbar-width: none; }
.legal-contents p { margin: 0 0 var(--space-3) var(--space-3); color: var(--ink-3); font-size: var(--text-sm); }
.legal-contents ol { display: grid; gap: var(--space-0); margin: 0; padding: 0; list-style: none; }
.legal-contents a { display: flex; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--ink-3); font-size: var(--text-sm); line-height: 1.35; text-decoration: none; transition: background var(--motion-duration-fast), color var(--motion-duration-fast); }
.legal-contents a span { flex: none; min-width: 2ch; color: var(--ink-4); font-family: var(--font-mono); font-size: var(--site-label); line-height: 1.6; font-variant-numeric: tabular-nums; }
.legal-contents a:hover { color: var(--ink); background: var(--glass-fill-quiet, var(--panel)); }
.legal-contents a[aria-current] { color: var(--ink); background: var(--card); box-shadow: var(--soft-1); }
.legal-contents a[aria-current] span { color: var(--blue); }
@media (max-width: 1020px) {
  .legal-page { grid-template-columns: minmax(0, 720px); }
  .legal-contents { display: none; }
}

.legal { min-width: 0; max-width: 720px; }
.legal-docs { display: inline-flex; gap: var(--space-0); margin: 0 0 var(--site-space-10); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--glass-well, var(--panel)); }
.legal-docs a { display: inline-flex; align-items: center; min-height: calc(var(--space-8) + var(--space-1)); padding: 0 var(--space-4); border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--text-base); font-weight: 500; text-decoration: none; transition: background var(--motion-duration-fast), color var(--motion-duration-fast); }
.legal-docs a:hover { color: var(--ink); }
.legal-docs a[aria-current] { background: var(--card); color: var(--ink); box-shadow: var(--soft-1); }
.legal h1 { margin: 0; font-size: var(--site-head-page); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; }
.legal .lede { margin-top: var(--space-5); }
.legal-date { margin: var(--space-6) 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.legal-date a { color: inherit; }

/* The short version: what most people came to learn, in one soft panel. */
.legal-short { margin: var(--site-space-12) 0 var(--site-space-10); padding: var(--site-space-10) var(--site-space-10) var(--space-8); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.legal .legal-short h2 { margin: 0 0 var(--space-6); font-size: var(--site-head-card); letter-spacing: -0.02em; }
.legal-short ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); margin: 0; padding: 0; list-style: none; }
.legal-short li { display: grid; grid-template-columns: var(--legal-mark) minmax(0, 1fr); gap: var(--space-0) var(--space-3); align-content: start; }
.legal-short li i { grid-row: span 2; display: grid; place-items: center; width: var(--legal-mark); height: var(--legal-mark); border-radius: 50%; background: var(--blue-wash); color: var(--blue); }
.legal-short li i svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.legal-short li b { color: var(--ink); font-size: var(--text-md); font-weight: 500; line-height: 1.4; }
.legal .legal-short li span { color: var(--ink-2); font-size: var(--text-base); line-height: 1.5; }
.legal .legal-short-foot { margin: var(--space-8) 0 0; color: var(--ink-3); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .legal-short { padding: var(--space-6) var(--space-5); }
  .legal-short ul { grid-template-columns: minmax(0, 1fr); }
}

/* The detail: numbered sections, each number a link to its own paragraph. */
.legal h2 { display: flex; align-items: baseline; gap: var(--space-4); margin: var(--site-space-12) 0 var(--space-4); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; scroll-margin-top: calc(80px + var(--space-8)); }
.legal-num { position: relative; flex: none; min-width: 2.4ch; color: var(--ink-4); font-family: var(--font-mono); font-size: var(--site-label); font-weight: 400; text-decoration: none; font-variant-numeric: tabular-nums; transition: color var(--motion-duration-fast); }
.legal h2:hover .legal-num, .legal-num:focus-visible { color: var(--blue); }
.legal-num[data-copied]::after { content: "Link copied"; position: absolute; left: 0; bottom: calc(100% + var(--space-1-5)); padding: var(--space-1) var(--space-2); border-radius: var(--site-radius-xs); background: var(--solid); color: var(--solid-ink); font-family: var(--font-sans); font-size: var(--text-sm); white-space: nowrap; }
.legal h3 { margin: var(--space-8) 0 var(--space-2); color: var(--ink); font-size: var(--text-md); font-weight: 500; }
.legal p, .legal li { color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-prose); text-wrap: pretty; }
.legal p { margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-4); padding-left: 1.2em; }
.legal li { margin: 0 0 var(--space-2); }
.legal li::marker { color: var(--ink-4); }
.legal b { color: var(--ink); font-weight: 500; }
.legal a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklab, var(--ink) 30%, transparent); }
.legal a:hover { text-decoration-color: var(--blue); }
/* Who does what, as rows on one soft fill: room between them, never a rule. */
.legal .legal-rows { display: grid; gap: var(--space-1); margin: var(--space-2) 0 var(--space-5); padding: var(--space-3) var(--space-2); border-radius: var(--site-radius-card); background: var(--glass-well, var(--panel)); list-style: none; }
.legal .legal-rows li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-base); line-height: 1.5; }
.legal .legal-rows li > b { font-size: var(--text-base); }
@media (max-width: 640px) { .legal .legal-rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
/* What changed, newest first. */
.legal .legal-log { padding: 0; list-style: none; }
.legal .legal-log li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-3); }
.legal-log time { color: var(--ink-3); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .legal .legal-log li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* The way to a person, at the end. */
.legal-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--site-space-16); padding: var(--space-8); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-1); }
.legal .legal-ask p { margin: var(--space-1) 0 0; font-size: var(--text-base); }
.legal-ask b { font-size: var(--text-lg); }
.legal .legal-ask a.btn { color: var(--solid-ink); text-decoration: none; }

/* On paper: the words alone. */
@media print {
  .nav, .foot, .site-analytics, .legal-contents, .legal-docs, .legal-ask .btn { display: none !important; }
  .legal-page { display: block; padding: 0; }
  .legal-short, .legal-ask { box-shadow: none; background: none; padding: 0; }
  .legal a { color: inherit; }
  .legal h2 { break-after: avoid; }
}

/* ── Brand page (decision: the-orb-is-the-mark) ────────────────────────── */
/* The orb, live: a figure per idea, numbered like a manual, and nothing to read twice. */
.brand-page { max-width: 1120px; margin: 0 auto; border-top: 0; }
/* An orb's glow reaches past its box; on a phone it never moves the page sideways. */
.site:has(.brand-page) main { overflow-x: clip; }
.brand-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--site-space-12); align-items: center; padding: var(--site-space-12) 0 var(--site-space-16); }
.brand-hero-orb { width: min(420px, 80vw); aspect-ratio: 1; justify-self: center; }
.brand-kicker, .brand-fig { margin: 0; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.brand-hero h1 { margin: var(--space-3) 0 var(--space-4); font-size: var(--site-head-section); font-weight: 500; letter-spacing: -0.045em; }
.brand-hero .lede { max-width: 30ch; margin: 0; color: var(--ink-2); }
.brand-block { padding: var(--site-space-12) 0; }
.brand-fig { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); }
.brand-fig > span:first-child { color: var(--ink-4); }
.brand-grounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.brand-ground { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--site-radius-lg); }
.brand-ground archon-orb { width: 42%; height: auto; aspect-ratio: 1; }
.brand-ground figcaption { position: absolute; left: var(--space-5); bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.brand-ground.is-sky { background: var(--canvas-wash), var(--surface-chrome); color: var(--ink-2); }
.brand-ground.is-white { background: var(--neutral-0); color: var(--neutral-500); box-shadow: inset 0 0 0 1px var(--line); }
.brand-ground.is-black { background: var(--neutral-950); color: var(--neutral-400); }
/* Black and white: the orb in ink is the black mark; inverted, the white one. */
.brand-ground.is-black archon-orb { filter: invert(1); }
.brand-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.brand-row.is-states { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.brand-row li { display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center; gap: var(--space-1); text-align: center; }
.brand-row archon-orb { width: min(100%, 112px); height: auto; aspect-ratio: 1; margin-bottom: var(--space-2); }
.brand-row span { color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.brand-row small, .brand-sizes small { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; }
.brand-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--site-space-10); margin: 0; padding: 0; list-style: none; }
.brand-sizes li { display: grid; justify-items: center; gap: var(--space-3); font-family: var(--font-mono); }
.brand-size { display: block; position: relative; }
.brand-rules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.brand-rules li { padding: var(--space-5); border-radius: var(--site-radius-lg); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.brand-rules b { display: block; margin-bottom: var(--space-1); color: var(--ink); font-weight: 500; }
.brand-files { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.brand-files a { display: inline-flex; gap: var(--space-2); align-items: baseline; padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: var(--text-sm); text-decoration: none; }
.brand-files a:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.brand-files small { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-label); }
@media (max-width: 820px) {
  .brand-hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-8); }
  .brand-grounds { grid-template-columns: minmax(0, 1fr); }
  .brand-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-8); }
  .brand-row.is-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-rules { grid-template-columns: minmax(0, 1fr); }
}

/* ── Who it is for: a team's, a size's and an organization's page (site-solutions.ts) ── */
.sol-hero { padding-top: var(--site-space-20); padding-bottom: var(--site-space-12); }
.sol-kicker { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); color: var(--blue); font-size: var(--text-base); font-weight: 500; }
.sol-kicker a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--ink-2); text-decoration: none; }
.sol-kicker a:hover { color: var(--ink); }
.sol-kicker > span[aria-hidden] { color: var(--ink-4); font-weight: 400; }
.sol-kicker i { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); background: var(--blue-wash); font-size: var(--text-lg); }
.sol-h1 { margin: 0; max-width: 16ch; font-size: var(--site-head-page); font-weight: 450; letter-spacing: -0.05em; line-height: 1.02; text-wrap: balance; }
/* A team's page opens beside its own work, drawn: the ask, the steps, the one yes it waits for. */
.sol-hero.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--site-space-12); align-items: center; }
.sol-show-wrap { display: grid; gap: var(--space-4); margin: 0; }
.sol-show-wrap figcaption { max-width: 34em; padding: 0 var(--space-2); color: var(--ink-2); font-size: var(--text-base); line-height: var(--leading-snug); }
.sol-show-wrap figcaption b { color: var(--ink); font-weight: 500; }
.sol-show { margin: 0; overflow: hidden; border-radius: var(--site-radius-lg); background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--soft-3); font-size: var(--text-base); }
.sol-show-bar { position: relative; display: flex; align-items: center; gap: var(--space-2); height: var(--site-space-10); padding: 0 var(--space-4); background: var(--glass-well); }
.sol-show-bar span { width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--line-2); }
.sol-show-bar b { position: absolute; left: 50%; transform: translateX(-50%); color: var(--ink-2); font-size: var(--site-mock); font-weight: 500; }
.sol-show-body { display: grid; gap: var(--space-5); padding: var(--space-6); }
.sol-show-ask { justify-self: end; }
.sol-show-archon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.sol-show-orb { display: block; width: var(--space-6); height: var(--space-6); margin-top: var(--space-1); }
.sol-show-orb archon-orb { width: 100%; height: 100%; }
.sol-steps { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--site-radius-card); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); list-style: none; }
.sol-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: center; color: var(--ink-2); line-height: var(--leading-snug); }
.sol-steps svg { color: var(--working); }
.sol-show-needs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--site-radius-card); background: color-mix(in oklab, var(--needs-wash) 70%, transparent); box-shadow: var(--soft-needs); }
.sol-show-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--needs); }
.sol-show-needs b { font-weight: 500; line-height: var(--leading-snug); }
.sol-show-yes { padding: var(--space-1) var(--space-3); border-radius: var(--radius-control); background: var(--solid); color: var(--solid-ink); font-size: var(--text-sm); font-weight: 500; }
.sol-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.sol-actions .is-quiet { color: var(--ink-2); }
.sol-jobs .h2, .sol-tools .h2, .sol-trust .h2 { max-width: none; }
.sol-job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--site-space-10) 0 0; padding: 0; list-style: none; }
.sol-job-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-job { display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.sol-job h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }
.sol-job > p:not(.sol-ask) { margin: 0; color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
/* The words a person would type, in the product's own bubble. */
.sol-ask { align-self: flex-start; display: flex; align-items: center; gap: var(--space-2); max-width: 100%; box-sizing: border-box; margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--site-radius-card); background: var(--chat-you-surface); color: var(--chat-you-ink); box-shadow: var(--chat-you-shadow); font-size: var(--text-base); line-height: var(--leading-snug); }
.sol-ask-you { flex: none; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: currentColor; opacity: 0.5; }
.sol-agent-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; padding: var(--site-space-10); border-radius: var(--site-radius-lg); background: linear-gradient(145deg, var(--blue-wash), transparent 70%), var(--glass-fill); box-shadow: var(--soft-3); }
.sol-agent-card > i { display: grid; place-items: center; width: var(--site-space-12); height: var(--site-space-12); border-radius: var(--site-radius-card); background: var(--blue); color: var(--solid-ink); font-size: var(--site-head-card); }
.sol-agent-k { margin: 0 0 var(--space-2); color: var(--blue); font-size: var(--text-sm); font-weight: 500; }
.sol-agent-card h2 { margin: 0 0 var(--space-3); font-size: var(--site-head-card); font-weight: 500; letter-spacing: -0.02em; }
.sol-agent-card p:last-child { margin: 0; max-width: 38em; color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
/* What every agent is held to: one quiet line under the page's own agent. */
.sol-agent-card p.sol-agent-rules:last-child { margin-top: var(--space-4); color: var(--ink-3); font-size: var(--text-base); }
.sol-tool-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--site-space-10) 0 0; padding: 0; list-style: none; }
.sol-tool-list li { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); font-size: var(--text-base); }
.sol-tool-list li.is-more { background: transparent; box-shadow: none; }
.sol-tool-list li.is-more a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--blue); text-decoration: none; }
.sol-trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--site-space-10) 0 0; padding: 0; list-style: none; }
.sol-trust-list li { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill-quiet); }
.sol-trust-list i { display: grid; place-items: center; width: var(--site-space-10); height: var(--site-space-10); margin-bottom: var(--space-2); border-radius: var(--site-radius-card); background: var(--blue-wash); color: var(--blue); }
.sol-page .sol-trust-list i { background: var(--persona-wash); color: var(--persona); }
.sol-trust-list b { font-weight: 500; }
.sol-trust-list span { color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
.sol-cta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sol-cta .h2 { max-width: 18ch; }
.sol-cta .sol-actions { justify-content: center; }
.sol-cta-orb { width: var(--site-space-20); height: var(--site-space-20); margin-bottom: var(--space-6); }
.sol-cta-orb archon-orb { width: 100%; height: 100%; }
/* Every solution, as cards. */
.sol-index-h { margin: 0 0 var(--space-4); color: var(--ink-3); font-size: var(--text-base); font-weight: 500; }
.sol-index-h:not(:first-child) { margin-top: var(--site-space-12); }
.sol-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.sol-card { display: grid; align-content: start; gap: var(--space-3); height: 100%; box-sizing: border-box; padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); text-decoration: none; transition: transform var(--motion-duration-normal) var(--ease), box-shadow var(--motion-duration-normal) var(--ease); }
.sol-card:hover { transform: translateY(calc(var(--space-0) * -1)); box-shadow: var(--soft-3); }
.sol-card-top { display: flex; align-items: center; gap: var(--space-3); }
.sol-card-top b { flex: 1; font-size: var(--text-lg); font-weight: 500; }
.sol-card-top > svg { color: var(--ink-3); transition: transform var(--motion-duration-normal) var(--ease), color var(--motion-duration-normal) var(--ease); }
.sol-card:hover .sol-card-top > svg { color: var(--blue); transform: translateX(var(--space-1)); }
.sol-card .sol-card-title { color: var(--ink); font-size: var(--text-md); }
.sol-card .sol-ask { justify-self: start; margin-top: var(--space-2); font-size: var(--text-sm); }
.sol-card .sol-card-note { color: var(--ink-2); font-size: var(--text-base); line-height: var(--leading-snug); }
.sol-card.is-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.sol-card.is-quiet:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--soft-2); }
.sol-card.is-org { background: linear-gradient(145deg, var(--blue-wash), transparent 70%), var(--glass-fill); }
.sol-card i { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); background: var(--blue-wash); color: var(--blue); font-size: var(--text-lg); }
/* What changes for this reader: three lines, just under the opening. */
.sol-outcomes { padding-top: 0; }
.sol-outcome-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.sol-outcome-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--site-radius-lg); background: var(--glass-fill-quiet); color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
.sol-outcome-list svg { box-sizing: content-box; padding: var(--space-2); border-radius: 50%; background: var(--blue-wash); color: var(--blue); }
.sol-outcome-list b { display: block; margin-bottom: var(--space-1); color: var(--ink); font-weight: 500; }
/* What an organization gets, six at a glance. */
.sol-pillars-h { max-width: none; margin-bottom: var(--site-space-10); }
.sol-pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.sol-pillar-grid li { padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.sol-pillar-grid i { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); background: var(--blue-wash); color: var(--blue); font-size: var(--text-lg); }
.sol-pillar-grid h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-lg); font-weight: 500; }
.sol-pillar-grid p { margin: 0; color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
.sol-faq-more { margin: var(--space-2) 0 0; padding-left: var(--space-6); color: var(--ink-3); font-size: var(--text-base); }
.sol-faq-more a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--ink-2); }
.sol-others { padding-top: 0; }
.sol-others .sol-tool-list { margin-top: 0; }
/* Each other team is a chip the whole of which is the link, big enough for a thumb. */
.sol-others .sol-tool-list li { padding: 0; }
.sol-others .sol-tool-list a { display: inline-flex; align-items: center; min-height: var(--touch-target); box-sizing: border-box; padding: 0 var(--space-4); border-radius: inherit; color: var(--ink); text-decoration: none; transition: background var(--motion-duration-fast); }
.sol-others .sol-tool-list a:hover { background: var(--panel); }
.sol-tool-list li { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
/* How an organization starts: three steps, numbered by the list itself. */
.sol-start-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--site-space-10) 0 0; padding: 0; list-style: none; counter-reset: start; }
.sol-start-list li { display: grid; gap: var(--space-2); counter-increment: start; }
.sol-start-list li::before { content: counter(start); display: grid; place-items: center; width: var(--space-8); height: var(--space-8); margin-bottom: var(--space-2); border-radius: 50%; background: var(--solid); color: var(--solid-ink); font-size: var(--text-sm); font-weight: 500; }
.sol-start-list b { font-size: var(--text-lg); font-weight: 500; }
.sol-start-list span { color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
.sol-never .h2 { max-width: none; }
.sol-org-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--site-space-10); border-radius: var(--site-radius-lg); background: linear-gradient(145deg, var(--blue-wash), transparent 70%), var(--glass-fill); box-shadow: var(--soft-2); }
.sol-org-card h2 { margin: 0 0 var(--space-2); font-size: var(--site-head-card); font-weight: 500; letter-spacing: -0.02em; }
.sol-org-card p:last-child { margin: 0; max-width: 34em; color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
@media (max-width: 900px) {
  .sol-start-list, .sol-outcome-list { grid-template-columns: minmax(0, 1fr); }
  .sol-hero.is-split { grid-template-columns: minmax(0, 1fr); }
  .sol-job-grid.is-three { grid-template-columns: minmax(0, 1fr); }
  .sol-cards, .sol-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-trust-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .sol-hero { padding-top: var(--site-space-10); }
  /* A phone reads one thing at a time: less air between sections, and the ways in a thumb's width. */
  .sol-jobs, .sol-agent, .sol-tools, .sol-trust, .sol-faq, .sol-cta, .sol-index, .sol-pillars, .sol-start, .sol-never, .sol-org, .con-dir { padding-top: var(--site-space-10); padding-bottom: var(--site-space-10); }
  .sol-actions { flex-direction: column; align-items: stretch; }
  .sol-actions .btn { justify-content: center; }
  .sol-cta .sol-actions { align-self: stretch; }
  .sol-job-grid, .sol-tool-list, .sol-trust-list, .sol-start-list { margin-top: var(--space-8); }
  .sol-show-body { padding: var(--space-4); }
  .sol-show-needs { grid-template-columns: auto minmax(0, 1fr); }
  .sol-show-yes { grid-column: 2; justify-self: start; }
  .sol-org-card { padding: var(--space-6); }
  .sol-org-card .btn { width: 100%; justify-content: center; }
  .plan.is-founding .plan-cta { width: 100%; justify-content: center; }
  .con-find { max-width: none; }
  .sol-job-grid, .sol-cards, .sol-pillar-grid { grid-template-columns: minmax(0, 1fr); }
  .sol-h1 { font-size: var(--site-head-section); }
  .sol-agent-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); }
}

/* Every connector, by kind: a jump line, then each kind's services in a grid of name and one line. */
.con-dir { padding-top: 0; }
.con-find { display: flex; align-items: center; gap: var(--space-3); max-width: 28em; margin-bottom: var(--space-6); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--glass-well); box-shadow: var(--well-inset); color: var(--ink-3); }
/* Until its script is here the search keeps its place unseen, so nothing moves when it appears. */
.con-find[hidden] { visibility: hidden; }
.con-find input { flex: 1; min-width: 0; min-height: var(--touch-target); border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--text-md); outline: none; }
.con-find:focus-within { box-shadow: var(--well-inset), var(--focus-glow); }
.site .con-find input:focus-visible { outline: none; }
.con-group[hidden], .con-list li[hidden] { display: none; }
.con-none { color: var(--ink-2); font-size: var(--text-md); }
.con-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--site-space-12); }
.con-jump a { display: inline-flex; align-items: center; min-height: var(--touch-target); box-sizing: border-box; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); color: var(--ink-2); font-size: var(--text-base); text-decoration: none; }
.con-jump a:hover { color: var(--ink); }
.con-group { scroll-margin-top: calc(var(--site-nav-h) + var(--space-6)); }
.con-group + .con-group { margin-top: var(--site-space-12); }
.con-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.con-list li { display: grid; gap: var(--space-1); padding: var(--space-5); border-radius: var(--site-radius-card); background: var(--glass-fill); box-shadow: var(--soft-2); }
.con-list b { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.con-list span { color: var(--ink-2); font-size: var(--text-base); line-height: var(--leading-snug); }
.con-more { margin: var(--site-space-12) 0 0; color: var(--ink-2); font-size: var(--text-md); }
.con-more a { color: var(--blue); }
@media (max-width: 900px) { .con-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .con-list { grid-template-columns: minmax(0, 1fr); } }

/* The drawing plays once as the page opens: the ask, each step ticked in turn, then the one yes it waits for.
   Each part is wiped in, never faded, so its words are at full contrast whenever they show. */
@media (prefers-reduced-motion: no-preference) {
  .sol-show-ask { animation: show-in 0.5s var(--ease) 0.2s backwards; }
  .sol-show-archon { animation: show-in 0.5s var(--ease) 0.6s backwards; }
  .sol-steps li { animation: show-in 0.4s var(--ease) backwards; }
  .sol-steps li:nth-child(1) { animation-delay: 0.9s; }
  .sol-steps li:nth-child(2) { animation-delay: 1.4s; }
  .sol-steps li:nth-child(3) { animation-delay: 1.9s; }
  .sol-steps li svg { animation: show-tick 0.3s var(--ease) both; }
  .sol-steps li:nth-child(1) svg { animation-delay: 1.2s; }
  .sol-steps li:nth-child(2) svg { animation-delay: 1.7s; }
  .sol-steps li:nth-child(3) svg { animation-delay: 2.2s; }
  .sol-show-needs { animation: show-in 0.5s var(--ease) 2.6s backwards; }
  .sol-show-dot { animation: show-beat 1.6s ease-in-out 3.1s 2; }
}
@keyframes show-in { from { clip-path: inset(0 0 100% 0); transform: translateY(var(--space-2)); } to { clip-path: inset(0); transform: none; } }
@keyframes show-tick { from { opacity: 0; transform: scale(0.4); } }
@keyframes show-beat { 50% { transform: scale(1.6); } }

/* A feature's page: its picture from the front page, then what it does, four at a glance. */
.feat-hero { padding-bottom: var(--site-space-10); }
.feat-art { padding-top: 0; }
.feat-art > .mk-window, .feat-art > .mk-ongoing, .feat-art > .mk-library, .feat-art > .mk-places, .feat-art > * { max-width: 100%; }
.feat-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.feat-point-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--site-space-10); margin: var(--site-space-10) 0 0; padding: 0; list-style: none; }
.feat-point-list li { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill-quiet); }
.feat-point-list b { font-size: var(--text-lg); font-weight: 500; }
.feat-point-list span { color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
@media (max-width: 760px) { .feat-point-list, .feat-trust { grid-template-columns: minmax(0, 1fr); } }

/* The phone: a quiet card under the two ways in, saying what is coming and what works today. */
.download-phone { margin-top: var(--site-space-12); padding: var(--space-6) var(--site-space-10); border-radius: var(--site-radius-lg); background: var(--glass-well); }
.download-phone h2 { margin: var(--space-3) 0 var(--space-2); font-size: var(--site-head-card); font-weight: 500; letter-spacing: -0.02em; }
.download-phone .download-pitch { margin: 0; max-width: 40em; }
@media (max-width: 620px) { .download-phone { padding: var(--space-6); } }

/* ── Each solution page in its own colour (site-solutions.ts HUES), one of the colours an Archon can wear ── */
.sol-page { --persona: oklch(0.56 0.15 var(--ph)); --persona-wash: oklch(0.95 0.035 var(--ph)); --persona-soft: oklch(0.8 0.09 var(--ph)); }
html[data-theme="archon-dark"] .sol-page { --persona: oklch(0.74 0.13 var(--ph)); --persona-wash: oklch(0.28 0.06 var(--ph)); --persona-soft: oklch(0.45 0.1 var(--ph)); }
.sol-page[data-hue="55"] { --ph: 55; } .sol-page[data-hue="155"] { --ph: 155; } .sol-page[data-hue="205"] { --ph: 205; }
.sol-page[data-hue="262"] { --ph: 262; } .sol-page[data-hue="296"] { --ph: 296; } .sol-page[data-hue="350"] { --ph: 350; }
.sol-page .sol-kicker > span[aria-current] { color: var(--persona); }
.sol-page .sol-kicker i { background: var(--persona-wash); color: var(--persona); }
.sol-page .sol-agent-k { color: var(--persona); }
.sol-page .sol-outcome-list svg { background: var(--persona-wash); color: var(--persona); }
.sol-page .sol-agent-card { background: linear-gradient(145deg, var(--persona-wash), transparent 70%), var(--glass-fill); }
.sol-page .sol-agent-card > i { background: var(--persona); }
.sol-page .sol-hero { background: radial-gradient(60% 70% at 85% 30%, color-mix(in oklab, var(--persona-soft) 22%, transparent), transparent 70%); }

/* What comes back: the copy beside the result, the result drawn as the thing its reader opens every day. */
.sol-result { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--site-space-12); align-items: center; }
.sol-result .h2 { max-width: 13ch; }
.sol-result-copy .lede { max-width: 26em; }
/* People's colours in a drawing: the same name, the same colour (site-solutions-results.ts tone).
   A drawing places its parts with --v, --h, --c and --r from its markup; these are their resting values. */
.res-card { --v: 0%; --h: 0%; --days: 4; --rows: 16; --c: 1; --r: 1; --cal-p: var(--ink-3); }
.res-card { --t1: oklch(0.62 0.13 262); --t2: oklch(0.64 0.13 155); --t3: oklch(0.66 0.14 55); --t4: oklch(0.62 0.15 350); --t5: oklch(0.62 0.12 205); --t6: oklch(0.6 0.14 296); }
.res-card { position: relative; display: grid; gap: var(--space-5); margin: 0; padding: var(--space-6); border-radius: var(--site-radius-lg); background: linear-gradient(160deg, color-mix(in oklab, var(--persona-wash) 55%, transparent), transparent 45%), var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--soft-3); }
.res-head { display: flex; align-items: center; gap: var(--space-3); }
.res-head > i { display: grid; place-items: center; flex: none; width: var(--site-space-10); height: var(--site-space-10); border-radius: var(--site-radius-card); background: var(--persona); color: var(--solid-ink); }
.res-head > i svg { width: var(--space-5); height: var(--space-5); }
.res-head span { display: grid; gap: var(--space-0); min-width: 0; }
.res-head b { font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }
.res-head small { color: var(--ink-3); font-size: var(--text-sm); }
.res-body { min-width: 0; font-size: var(--text-base); }
.res-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--glass-well); color: var(--ink-2); font-size: var(--text-sm); }
.res-yes { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--solid); color: var(--solid-ink); font-weight: 500; white-space: nowrap; box-shadow: var(--soft-solid); }
.res-av { display: inline-grid; place-items: center; flex: none; width: var(--space-8); height: var(--space-8); border-radius: 50%; background: var(--t1); color: var(--solid-ink); font-size: var(--site-mock-sm); font-style: normal; font-weight: 600; letter-spacing: 0.02em; }
.res-av[data-t="2"] { background: var(--t2); } .res-av[data-t="3"] { background: var(--t3); } .res-av[data-t="4"] { background: var(--t4); }
.res-av[data-t="5"] { background: var(--t5); } .res-av[data-t="6"] { background: var(--t6); }
.res-av.is-more { background: var(--glass-well); color: var(--ink-2); }

/* A table: soft rows, the one that matters lit in the page's colour. */
.res-table { width: 100%; border-collapse: separate; border-spacing: 0 var(--space-1); font-variant-numeric: tabular-nums; }
.res-table th { padding: 0 var(--space-3) var(--space-1); color: var(--ink-3); font-size: var(--text-sm); font-weight: 500; text-align: left; }
.res-table th:not(:first-child), .res-table td:not(:first-child) { text-align: right; }
.res-table td { padding: var(--space-3); background: var(--glass-fill-quiet); }
.res-table td:first-child { border-radius: var(--site-radius-sm) 0 0 var(--site-radius-sm); font-weight: 500; }
.res-table td:last-child { border-radius: 0 var(--site-radius-sm) var(--site-radius-sm) 0; }
.res-table em { display: inline-block; padding: var(--space-0) var(--space-2); border-radius: var(--radius-pill); background: var(--glass-well); color: var(--ink-2); font-size: var(--text-sm); font-style: normal; font-weight: 500; }
.res-table tr.is-flag td { background: var(--persona-wash); color: var(--ink); }
.res-table tr.is-flag em { background: var(--persona); color: var(--solid-ink); }
.res-table tr.is-more td { background: transparent; color: var(--ink-3); font-weight: 400; }

/* A list: who, what and its state, like an inbox. */
.res-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.res-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--site-radius-card); background: var(--glass-fill-quiet); }
.res-list li > span { display: grid; gap: var(--space-0); min-width: 0; }
.res-list b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-list small { overflow: hidden; color: var(--ink-3); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.res-list em { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--persona-wash); color: var(--persona); font-size: var(--text-sm); font-style: normal; font-weight: 500; white-space: nowrap; }
.res-list em.is-quiet { background: var(--glass-well); color: var(--ink-3); }
.res-list em.is-day { background: var(--glass-well); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.res-list li.is-more { grid-template-columns: auto minmax(0, 1fr); background: transparent; }

/* Ranked bars: the ask written on its own bar. */
.res-bars { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.res-bars li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.res-rank { color: var(--ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: center; }
.res-bar { display: flex; align-items: center; min-height: var(--site-space-10); padding: 0 var(--space-4); border-radius: var(--site-radius-sm); background: linear-gradient(90deg, color-mix(in oklab, var(--persona) 34%, transparent) var(--v), var(--glass-fill-quiet) var(--v)); }
.res-bars li:first-child .res-bar { background: linear-gradient(90deg, var(--persona) var(--v), var(--glass-fill-quiet) var(--v)); color: var(--solid-ink); }
.res-bar b { font-weight: 500; white-space: nowrap; }
.res-bars small { color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Columns: last week beside this week, per channel. */
.res-legend { display: flex; gap: var(--space-4); margin: 0 0 var(--space-4); color: var(--ink-3); font-size: var(--text-sm); }
.res-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.res-legend span::before { content: ""; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-small); background: var(--persona); }
.res-legend span.is-before::before { background: var(--glass-well); }
.res-cols ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.res-cols li { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.res-col-pair { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-1); width: 100%; height: calc(var(--site-space-16) * 2.6); padding: var(--space-2) var(--space-2) 0; box-sizing: border-box; border-radius: var(--site-radius-sm); background: var(--glass-fill-quiet); }
.res-col-pair i { flex: 1; max-width: var(--space-8); height: var(--h); border-radius: var(--radius-small) var(--radius-small) 0 0; background: linear-gradient(180deg, var(--persona), color-mix(in oklab, var(--persona) 60%, transparent)); }
.res-col-pair i.is-before { background: var(--glass-well); }
.res-cols b { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
.res-cols em, .res-kpis em { color: var(--ink-3); font-size: var(--text-sm); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.res-cols em.is-up, .res-kpis em.is-up { color: var(--working); }

/* Numbers that matter, each with the line of how it moved. */
.res-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.res-kpis li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-4); border-radius: var(--site-radius-card); background: var(--glass-fill-quiet); overflow: hidden; }
.res-kpis small { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--text-sm); }
.res-kpis b { font-size: var(--site-head-card); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.res-kpis .res-spark { grid-column: 1 / -1; width: calc(100% + var(--space-8)); height: var(--site-space-10); margin: var(--space-2) calc(var(--space-4) * -1) calc(var(--space-4) * -1); color: var(--persona); }
.res-spark path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.res-spark path.is-fill { fill: color-mix(in oklab, currentColor 16%, transparent); stroke: none; }
.res-doc .res-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-3) 0; }
.res-doc .res-kpis li { padding: var(--space-3); background: var(--glass-well); }
.res-doc .res-kpis b { font-size: var(--text-xl); }

/* A change to review: line numbers, what went out on a red wash, what came in on a green one. */
.res-diff { display: grid; gap: var(--space-3); }
.res-file { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-sm); }
.res-file svg { width: var(--space-4); height: var(--space-4); color: var(--ink-3); }
.res-delta { display: flex; gap: var(--space-2); margin-left: auto; font-family: var(--font-sans); }
.res-delta b { font-weight: 600; }
.res-delta .is-in { color: var(--working); }
.res-delta .is-out { color: var(--status-danger); }
.res-code { display: grid; padding: var(--space-2) 0; overflow-x: auto; border-radius: var(--site-radius-card); background: var(--glass-well); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75; }
.res-code > span { display: grid; grid-template-columns: var(--space-8) var(--space-5) max-content; padding-right: var(--space-4); color: var(--ink-2); }
.res-code i { color: var(--ink-4); font-style: normal; text-align: right; padding-right: var(--space-2); user-select: none; }
.res-code code { font: inherit; white-space: pre; }
.res-code .is-out { background: color-mix(in oklab, var(--status-danger) 13%, transparent); }
.res-code .is-in { background: color-mix(in oklab, var(--working) 15%, transparent); color: var(--ink); }
.res-code .is-out i:nth-child(2) { color: var(--status-danger); }
.res-code .is-in i:nth-child(2) { color: var(--working); }
.res-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.res-checks span { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--glass-well); color: var(--ink-2); font-size: var(--text-sm); }
.res-checks span:first-child { background: color-mix(in oklab, var(--working) 15%, transparent); color: var(--working); font-weight: 500; }
.res-checks svg { width: var(--space-4); height: var(--space-4); }

/* A week of the panel's calendars: each person's time in their colour, the two free hours, the one picked. */
.res-cal-people { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); color: var(--ink-2); font-size: var(--text-sm); }
.res-cal-people span { display: inline-flex; align-items: center; gap: var(--space-2); }
.res-cal-people i, .res-cal-busy > i { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--cal-p); }
.res-cal-people [data-p="0"], .res-cal-busy[data-p="0"] { --cal-p: var(--t5); }
.res-cal-people [data-p="1"], .res-cal-busy[data-p="1"] { --cal-p: var(--t3); }
.res-cal-people [data-p="2"], .res-cal-busy[data-p="2"] { --cal-p: var(--t2); }
.res-cal { display: grid; grid-template-columns: var(--site-space-12) repeat(var(--days), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--rows), var(--space-4)); column-gap: var(--space-1); }
.res-cal-day { grid-column: var(--c); grid-row: 1; padding-bottom: var(--space-2); color: var(--ink-3); font-size: var(--text-sm); font-weight: 500; text-align: center; }
.res-cal-day span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.res-cal-day[data-pick] { color: var(--persona); }
.res-cal-day[data-pick] span { display: inline-grid; place-items: center; min-width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--persona); color: var(--solid-ink); }
.res-cal-col { grid-column: var(--c); grid-row: 2 / -1; border-radius: var(--site-radius-sm); background: var(--glass-fill-quiet); }
.res-cal-hour { grid-column: 1; grid-row: var(--r); align-self: start; margin-top: calc(var(--space-2) * -1); padding-right: var(--space-2); color: var(--ink-3); font-size: var(--site-mock-sm); font-variant-numeric: tabular-nums; text-align: right; }
.res-cal-busy, .res-cal-also, .res-cal-pick { grid-column: var(--c); grid-row: var(--r); margin: var(--space-0); border-radius: var(--radius-small); }
.res-cal-busy { display: flex; align-items: flex-start; gap: var(--space-1); padding: var(--space-1) var(--space-2); overflow: hidden; background: color-mix(in oklab, var(--cal-p) 11%, var(--glass-fill-quiet)); color: var(--ink-2); font-size: var(--site-mock-sm); line-height: 1.3; }
.res-cal-busy > i { flex: none; margin-top: var(--space-1); }
.res-cal-busy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-cal-also { display: grid; place-items: center; background: var(--persona-wash); color: var(--persona); font-size: var(--site-mock-sm); font-weight: 500; }
.res-cal-pick { position: relative; z-index: 1; display: grid; align-content: center; gap: var(--space-0); margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1); padding: var(--space-1) var(--space-2); border-radius: var(--site-radius-sm); background: linear-gradient(150deg, color-mix(in oklab, var(--persona) 80%, var(--neutral-0)), var(--persona)); color: var(--solid-ink); box-shadow: 0 var(--space-3) var(--space-8) calc(var(--space-3) * -1) var(--persona), 0 0 0 var(--space-1) color-mix(in oklab, var(--persona) 22%, transparent); }
.res-cal-pick b { font-size: var(--site-mock-sm); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-cal-pick small { font-size: var(--site-mock-sm); opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A drafted message: who it goes to and its words, on a page; a stack behind says how many more like it. */
.res-doc { position: relative; }
.res-doc.is-stacked { margin-bottom: var(--space-3); }
.res-doc.is-stacked::before, .res-doc.is-stacked::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-2) * -1); height: var(--space-8); border-radius: var(--site-radius-card); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); }
.res-doc.is-stacked::after { left: var(--space-8); right: var(--space-8); bottom: calc(var(--space-4) * -1); opacity: 0.6; }
.res-doc-page { position: relative; z-index: 1; padding: var(--space-5); border-radius: var(--site-radius-card); background: var(--surface-overlay); box-shadow: var(--soft-2); }
.res-doc-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--site-radius-sm); background: var(--glass-well); font-size: var(--text-sm); }
.res-doc-meta small { color: var(--ink-3); font-size: var(--text-sm); }
.res-doc-meta b { font-weight: 500; }
.res-doc-body p { margin: 0 0 var(--space-2); color: var(--ink-2); line-height: var(--leading-snug); }
.res-doc-body p:first-child { color: var(--ink); }
.res-doc-body p:last-child { margin-bottom: 0; }
.res-doc-count { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: var(--space-0) var(--space-2); border-radius: var(--radius-pill); background: var(--persona-wash); color: var(--persona); font-size: var(--site-mock-sm); font-weight: 500; }

/* As a result comes into view its bars grow, once, where the browser can tie that to the scroll. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .res-col-pair i, .res-bar, .res-spark path, .res-cal-pick { animation: res-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    .res-col-pair i { transform-origin: 50% 100%; animation-name: res-rise; }
    .res-spark path { stroke-dasharray: 300; animation-name: res-draw; }
    .res-cal-pick { animation-name: res-pop; animation-range: entry 30% cover 40%; }
  }
}
@keyframes res-grow { from { clip-path: inset(0 100% 0 0 round var(--site-radius-sm)); } to { clip-path: inset(0 0 0 0 round var(--site-radius-sm)); } }
@keyframes res-rise { from { transform: scaleY(0); } }
@keyframes res-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes res-pop { from { opacity: 0; transform: scale(0.9); } }

@media (max-width: 900px) { .sol-result { grid-template-columns: minmax(0, 1fr); gap: var(--site-space-10); } .sol-result .h2 { max-width: 18ch; } }
@media (max-width: 620px) {
  .res-card { padding: var(--space-4); gap: var(--space-4); }
  .res-foot { border-radius: var(--site-radius-card); padding: var(--space-3); }
  .res-yes { width: 100%; text-align: center; }
  .res-table td, .res-table th { padding-left: var(--space-2); padding-right: var(--space-2); }
  .res-list li { grid-template-columns: auto minmax(0, 1fr); }
  .res-list em { grid-column: 2; justify-self: start; }
  .res-cols ul { gap: var(--space-2); }
  .res-col-pair { height: calc(var(--site-space-16) * 2); }
  .res-cal { grid-template-columns: var(--site-space-10) repeat(var(--days), minmax(0, 1fr)); }
  .res-cal-busy span, .res-cal-pick b { display: none; }
  .res-cal-pick { padding: var(--space-1); text-align: center; }
  .res-doc .res-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* Help: the search under the opening, then each topic's questions. */
.help-find { margin-top: var(--space-8); }
.help-topic { scroll-margin-top: calc(var(--site-nav-h) + var(--space-6)); }
.help-topic + .help-topic { margin-top: var(--site-space-12); }
.help-topic[hidden], .help-topic details[hidden] { display: none; }
.help-dir .qa { max-width: 52rem; }

/* Help's guides: the first things people do, each a short numbered list on its own card. */
.help-guides { padding-bottom: 0; }
.help-guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.help-guide-list > li { padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.help-guide-list h3 { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: 500; }
.help-guide-list ol { display: grid; gap: var(--space-3); margin: 0; padding-left: var(--space-5); color: var(--ink-2); font-size: var(--text-base); line-height: var(--leading-snug); }