/* How it works, played: the chat drawing acts out the beat the reader has lit
   (`site-orbs.js` sets the step). Loaded on the front page after site.css. */
/* Played: on a wide, tall screen the section holds still while the reader
   scrolls through it a beat at a time (`site-orbs.js` sets the class and the
   step), and the drawing acts out the lit beat. Without it, the whole story. */
.how[data-played], .rooms[data-played] { min-height: 280svh; }
.how[data-played] .how-pin,
.rooms[data-played] .rooms-copy, .rooms[data-played] .rooms-art { position: sticky; top: calc(76px + var(--space-8)); }
.how[data-played] .mk-beat, .how[data-played] .how-art, .how[data-played] .steps,
.rooms[data-played] .mk-beat, .rooms[data-played] .rooms-art { animation: none; }
.how[data-played] .beats li, .rooms[data-played] .beats li { cursor: pointer; }
/* Held still, the track and the drawing share one screen: the window takes what
   the track leaves and, like a chat, keeps its newest lines in view. */
.how[data-played] .how-pin { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-6); height: calc(100svh - 76px - var(--space-8) * 2); }
.how[data-played] .how-play { width: 100%; min-height: 0; margin-top: 0; }
/* Its head, held with it, reads on one line and leaves the screen to the drawing. */
.how[data-played] .how-head { max-width: none; }
.how[data-played] .how-head .lbl { margin-bottom: var(--space-3); }
.how[data-played] .how-head .h2 { max-width: none; font-size: var(--site-head-stage); }
.how[data-played] .how-head .h2 .quiet { display: inline; }
.how[data-played] .how-head .lede { margin-top: var(--space-3); max-width: 46em; font-size: var(--text-md); }
.how[data-played] .how-art { display: flex; align-items: center; min-height: 0; }
.how[data-played] .how-art .mk-window { display: flex; flex-direction: column; width: 100%; height: min(100%, 600px); max-height: 100%; }
.how[data-played] .how-art .mk-chat { flex: 1 1 auto; min-height: 0; overflow: hidden; justify-content: flex-end; }
/* A step not reached yet takes no room; one reached arrives at the foot, as a chat's new line does. */
.how[data-played] .mk-chat[data-step="1"] .mk-beat:not([data-b="1"]),
.how[data-played] .mk-chat[data-step="2"] .mk-beat:is([data-b="3"], [data-b="4"]),
.how[data-played] .mk-chat[data-step="3"] .mk-beat[data-b="4"] { display: none; }
.how[data-played] .mk-chat[data-step] .mk-beat { animation: beat-in var(--site-slow) var(--ease) both; }
@keyframes beat-in { from { opacity: 0; transform: translateY(12px); } }
.mk-chat[data-step] .mk-beat, .mk-chat[data-step] .mk-work li, .mk-chat[data-step] .mk-then > span { transition: opacity var(--site-slow) var(--ease), transform var(--site-slow) var(--ease), visibility var(--site-slow); }
.mk-chat[data-step] .mk-beat { opacity: 0; transform: translateY(12px) scale(0.98); visibility: hidden; }
.mk-chat[data-step] .mk-beat[data-b="1"],
.mk-chat:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-beat[data-b="2"],
.mk-chat:is([data-step="3"], [data-step="4"]) .mk-beat[data-b="3"],
.mk-chat[data-step="4"] .mk-beat[data-b="4"] { opacity: 1; transform: none; visibility: visible; }
.mk-chat[data-step] .mk-beat[data-b="1"] + .mk-beat[data-b="1"] { transition-delay: 0.35s; }
/* Rooms: the whole thread stays in view so the room reads at a glance.
   Upcoming lines rest quiet; the lit beat's line comes forward. */
.mk-room[data-step] .mk-beat {
  opacity: 0.32;
  visibility: visible;
  transform: none;
  transition: opacity var(--site-slow) var(--ease), background var(--site-slow) var(--ease), box-shadow var(--site-slow) var(--ease);
}
.mk-room[data-step] .mk-beat[data-b="1"],
.mk-room:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-beat[data-b="2"],
.mk-room:is([data-step="3"], [data-step="4"]) .mk-beat[data-b="3"],
.mk-room[data-step="4"] .mk-beat[data-b="4"] { opacity: 1; }
.mk-room[data-step="1"] .mk-beat[data-b="1"],
.mk-room[data-step="2"] .mk-beat[data-b="2"],
.mk-room[data-step="3"] .mk-beat[data-b="3"],
.mk-room[data-step="4"] .mk-beat[data-b="4"] {
  margin-inline: calc(-1 * var(--space-2));
  padding: var(--space-3) var(--space-2);
  border-radius: var(--site-radius-card);
  background: var(--glass-fill);
  box-shadow: var(--soft-1);
}
.mk-room[data-step="3"] .mk-beat[data-b="3"].is-archon,
.mk-room[data-step="4"] .mk-beat[data-b="4"].is-work {
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-3);
}
/* Watch: each step lands in turn. */
.mk-chat[data-step] .mk-work li { opacity: 0; transform: translateX(-6px); }
.mk-chat:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-work li:not(.mk-steered),
.mk-chat:is([data-step="3"], [data-step="4"]) .mk-work li.mk-steered { opacity: 1; transform: none; }
.mk-chat[data-step="2"] .mk-work li:nth-child(1) { transition-delay: 0.3s; }
.mk-chat[data-step="2"] .mk-work li:nth-child(2) { transition-delay: 0.8s; }
.mk-chat[data-step="2"] .mk-work li:nth-child(4) { transition-delay: 1.3s; }
.mk-chat[data-step="3"] .mk-work li.mk-steered { transition-delay: 0.6s; }
/* Steer: the count it is drafting changes with Maya's word. */
.mk-then { display: inline-grid; }
.mk-then > span { grid-area: 1 / 1; }
.mk-then > span:first-child { visibility: hidden; }
.mk-chat:is([data-step="1"], [data-step="2"]) .mk-then > span:first-child { visibility: visible; }
.mk-chat:is([data-step="1"], [data-step="2"]) .mk-then > span + span { opacity: 0; visibility: hidden; }
.mk-chat[data-step="3"] .mk-then > span + span { transition-delay: 0.9s; }
/* Steer: Maya's word is read, and the step it changed lights where it landed. */
.mk-chat[data-step] .mk-read { opacity: 0; transition: opacity var(--site-slow) var(--ease) 0.4s; }
.mk-chat:is([data-step="3"], [data-step="4"]) .mk-read { opacity: 1; }
.mk-chat[data-step="3"] .mk-work li.mk-steered { animation: steered 2.6s 0.6s var(--ease) both; }
@keyframes steered { 0%, 35% { background: var(--blue-wash); box-shadow: 0 0 0 4px var(--blue-wash); } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }
.mk-work li { border-radius: var(--radius-inner); }
/* Approve: the question lands, Maya says yes, the ask settles, and the work folds into what got done. */
.mk-chat[data-step="4"] .mk-ask { background: var(--glass-fill-quiet); box-shadow: var(--soft-1); transition: background 0.6s var(--ease) 1.5s, box-shadow 0.6s var(--ease) 1.5s; }
.mk-chat[data-step] .mk-work ol { max-height: 12em; overflow: hidden; transition: max-height var(--site-slow) var(--ease), margin var(--site-slow) var(--ease), opacity var(--site-slow) var(--ease); }
.mk-chat[data-step="4"] .mk-work ol { max-height: 0; margin-top: 0; opacity: 0; transition-delay: 2.2s; }
.mk-state { display: inline-grid; }
.mk-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-1); transition: visibility 0s; }
.mk-state svg { width: 12px; height: 12px; }
.mk-state > span + span { visibility: hidden; }
.mk-chat[data-step="4"] .mk-state > span { transition-delay: 2.2s; }
.mk-chat[data-step="4"] .mk-state > span:first-child { visibility: hidden; }
.mk-chat[data-step="4"] .mk-state > span + span { visibility: visible; }
.mk-chat[data-step="4"] .mk-work .mk-status { color: var(--ink-2); transition: color 0.3s 2.2s; }
.mk-chat[data-step="4"] .mk-ask .mk-btn.is-solid { animation: tap 0.6s 1.1s var(--ease) both; }
.mk-btn.mk-yes { display: inline-grid; }
.mk-yes > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.mk-yes > span + span { visibility: hidden; }
.mk-chat[data-step="4"] .mk-yes > span { transition: visibility 0s 1.35s; }
.mk-chat[data-step="4"] .mk-yes > span:first-child { visibility: hidden; }
.mk-chat[data-step="4"] .mk-yes > span + span { visibility: visible; }
.mk-chat[data-step="4"] .mk-result { transition-delay: 1.8s; }
.mk-chat[data-step="4"] .mk-ask .mk-status { opacity: 0; transition: opacity 0.3s 1.4s; }
@keyframes tap { 40% { transform: scale(0.9); box-shadow: 0 0 0 5px color-mix(in oklab, var(--solid) 16%, transparent); } 100% { transform: none; background: var(--working); color: var(--solid-ink); } }

/* ── Each section on a stage of its own ─────────────────────────────────────
   One recipe, repeated, read as one long section: so the story's sections
   differ in kind. Numbered like a manual; the people stand on their own floor;
   the room stands on its own light; the Library is set on a ruled sheet; Routines
   read as clocks; the services run past; Trust is the one ink band; the
   founding offer is a pass; the questions are numbered. */
:root {
  --rule-line: color-mix(in oklab, var(--blue) 15%, transparent);
  --band: var(--neutral-950);
  --band-ink: var(--neutral-0);
  --band-ink-2: color-mix(in oklab, var(--neutral-0) 66%, transparent);
  --band-blue: oklch(0.74 0.14 258);
  --sheen: color-mix(in oklab, var(--neutral-0) 38%, transparent);
  --team-glow: oklch(0.86 0.07 300 / 0.25);
  --you-a: oklch(0.74 0.11 262);
  --you-b: oklch(0.72 0.12 320);
}
html[data-theme="archon-dark"] {
  --rule-line: color-mix(in oklab, var(--neutral-0) 8%, transparent);
  --band: color-mix(in oklab, var(--neutral-0) 9%, var(--neutral-950));
  --band-ink: var(--neutral-0);
  --sheen: color-mix(in oklab, var(--neutral-0) 9%, transparent);
  --team-glow: oklch(0.4 0.1 300 / 0.25);
  --you-a: oklch(0.55 0.13 262);
  --you-b: oklch(0.52 0.14 320);
}

/* Numbered like a manual: each section's label carries its place in the story. */


/* For everyone: six Archons, two rows of three (one row on the widest screens), larger, each
   on a soft floor of its own, so its shape reads. The sixth is yours: "You" where a face would be. */
@media (min-width: 1021px) {
  .people-orbs { max-width: 920px; row-gap: var(--site-space-16); }
  .people-orbs archon-orb { width: var(--site-space-28); height: var(--site-space-28); }
}
@media (max-width: 620px) {
  .people-orb img, .people-orb .people-you { width: var(--space-8); height: var(--space-8); box-shadow: 0 0 0 2px var(--bg); }
}
@media (min-width: 1680px) {
  .people-orbs { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1480px; }
}
.people-orb .people-you { position: absolute; right: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); display: grid; place-items: center; width: var(--site-space-10); height: var(--site-space-10); border-radius: 50%; background: var(--ink); color: var(--bg); font-size: var(--site-label); font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 0 0 3px var(--bg), var(--shadow); }
.people-orb { isolation: isolate; }
.people-orb::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: calc(var(--space-4) * -1); height: var(--space-4); border-radius: 50%; background: radial-gradient(closest-side, var(--floor), transparent); }

/* Rooms: the room stands on its own light, so the thread is the picture. */
.rooms-art { position: relative; isolation: isolate; }
.rooms-art::before { content: ""; position: absolute; z-index: -1; inset: 12% -8% -10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--blue) 16%, transparent), transparent); }

/* The Library on a ruled sheet: graph paper behind it, fading at its edges, and its dates in mono. */
/* The Library's section sits on a soft dot grid, like paper waiting to be written on. */
.sec.is-ruled { position: relative; isolation: isolate; }
.sec.is-ruled::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background-image: radial-gradient(circle, var(--rule-line) 1px, transparent 1.5px); background-size: var(--space-6) var(--space-6); -webkit-mask-image: linear-gradient(transparent, black 22%, black 78%, transparent); mask-image: linear-gradient(transparent, black 22%, black 78%, transparent); }
.is-ruled .mk-entry em { font-family: var(--font-mono); font-size: var(--site-mock-sm); letter-spacing: 0.02em; }

/* Routines read as clocks: each one a card led by its time, large and in mono. */
.mk-duty-time { display: none; }
.clocks .mk-ongoing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding: 0; overflow: visible; background: none; box-shadow: none; }
.clocks .mk-duty { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "time time" "icon main" "who who" "last last"; align-items: center; gap: var(--space-3); padding: var(--space-6); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.clocks .mk-duty:hover { background: var(--glass-fill); box-shadow: var(--soft-3); }
.clocks .mk-duty-time { grid-area: time; display: grid; gap: var(--space-2); margin-bottom: var(--space-2); padding-bottom: var(--space-3); }
.clocks .mk-duty-time b { font-family: var(--font-mono); font-size: var(--site-price); font-weight: 400; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.clocks .mk-duty-time span { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-label); letter-spacing: 0.08em; text-transform: uppercase; }
.clocks .mk-duty-main span { display: none; }
.clocks .mk-duty-who { padding-top: var(--space-1); }

/* The services run past, slowly, and stop under the pointer. */
.services-run { display: flex; margin-top: var(--space-4); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.services-run .services { flex: none; flex-wrap: nowrap; margin: 0; padding-right: var(--space-2); animation: services-run 76s linear infinite; }
.services-run:hover .services { animation-play-state: paused; }
.services-run .services span { padding: var(--space-2) var(--space-4); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); font-size: var(--text-md); }
@keyframes services-run { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .services-run { -webkit-mask-image: none; mask-image: none; }
  .services-run .services { flex-wrap: wrap; flex: 1; animation: none; }
  .services-run .services[aria-hidden], .services-run .services > [aria-hidden] { display: none; }
}

/* Trust: the one ink band on the page. Its words go light; its promises stay as the product shows them. */
.trust { position: relative; isolation: isolate; }
.trust::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--band); }
.trust > .lbl { color: var(--band-blue); }
.trust .sec-head .h2 { color: var(--band-ink); }
.trust .sec-head .lede { color: var(--band-ink-2); }
/* On ink, glass would turn grey: the promises sit on the product's own card. */
.trust .trust-grid > li { background: var(--bg-2); box-shadow: none; }


@media (max-width: 1020px) {
  .clocks .mk-ongoing { grid-template-columns: minmax(0, 1fr); }
  .people-orbs archon-orb { width: var(--site-space-20); height: var(--site-space-20); }
}
/* The ink band and the ruled sheet reach the window's edges; nothing scrolls sideways for it. */
.site main { overflow-x: clip; }
.people { text-align: center; }
.people .lbl { justify-content: center; }
.people .h2 { max-width: 18ch; margin: 0 auto; }
.people .lede { margin-left: auto; margin-right: auto; max-width: 36em; }

/* ── Motion, with care: everything arrives, settles, and then lives quietly ── */
@media (prefers-reduced-motion: no-preference) {
  /* Each Archon floats on its own breath, its floor softening as it rises; never in step. */
  .people-orbs archon-orb { animation: float 7s ease-in-out var(--bob, 0s) infinite; }
  .people-orb::after { animation: floor 7s ease-in-out var(--bob, 0s) infinite; }
  .people-orbs li:nth-child(2) { --bob: -2.6s; }
  .people-orbs li:nth-child(3) { --bob: -5.1s; }
  .people-orbs li:nth-child(4) { --bob: -1.3s; }
  .people-orbs li:nth-child(5) { --bob: -3.9s; }
  .people-orbs li:nth-child(6) { --bob: -6.2s; }
  /* The routine at work keeps time: its clock's colon breathes. */
  .clocks .mk-duty:has(.is-working) .mk-duty-time i { animation: tick 2s ease-in-out infinite; }
}
.clocks .mk-duty-time i { font-style: normal; }
@keyframes float { 50% { transform: translateY(calc(var(--space-2) * -1)); } }
@keyframes floor { 50% { transform: scaleX(0.8); opacity: 0.55; } }
@keyframes tick { 50% { opacity: 0.3; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Sets of things arrive one after another, not as a block. */
    .people-orbs > li, .trust-grid > li, .clocks .mk-duty, .mk-library > .mk-entry, .mk-place { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    :is(.people-orbs, .trust-grid, .mk-ongoing, .mk-library, .mk-places) > :nth-child(2) { animation-range: entry 8% entry 63%; }
    :is(.people-orbs, .trust-grid, .mk-ongoing, .mk-library, .mk-places) > :nth-child(3) { animation-range: entry 16% entry 71%; }
    :is(.people-orbs, .trust-grid, .mk-ongoing, .mk-library, .mk-places) > :nth-child(4) { animation-range: entry 24% entry 79%; }
    :is(.people-orbs, .trust-grid, .mk-ongoing, .mk-library, .mk-places) > :nth-child(5) { animation-range: entry 32% entry 87%; }
    /* Six Archons arrive along each row, so the second row is never late for the first. */
    .people-orbs > :nth-child(3n + 1) { animation-range: entry 0% entry 55%; }
    .people-orbs > :nth-child(3n + 2) { animation-range: entry 8% entry 63%; }
    .people-orbs > :nth-child(3n) { animation-range: entry 16% entry 71%; }
    /* A light passes once across the pass as it comes into view, as across a card turned in the hand. */
    .plan.is-pass { position: relative; }
    .plan.is-pass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 42%, var(--sheen) 50%, transparent 58%) no-repeat; background-size: 300% 100%; animation: sheen linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  }
}
@keyframes arrive { from { opacity: 0; transform: translateY(var(--space-6)) scale(0.97); } }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reading: a hairline under the bar fills as the page is read. */
    .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue)); transform-origin: 0 50%; animation: read-line linear both; animation-timeline: scroll(root); }
  }
}
@keyframes read-line { from { transform: scaleX(0); } }

/* ── Delight: what you point at answers ─────────────────────────────────────
   Small and quick, never in the way. Lifts use `translate`, so they sit on top
   of the arrivals above rather than fight them. */
/* Each Archon rises to meet the pointer, and its floor softens under it. */
.people-orb { transition: translate var(--site-slow) var(--ease), scale var(--site-slow) var(--ease); }
.people-orb::after { transition: opacity var(--site-slow) var(--ease); }
.people-orbs li:hover .people-orb { translate: 0 calc(var(--space-2) * -1); scale: 1.06; }
.people-orbs li:hover .people-orb::after { opacity: 0.5; }
/* Its day reads as a status, on a quiet pill. */
.people-orbs .people-state { min-height: 0; margin-top: calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); }
.people-orbs .people-state[data-presence="attention"] { background: var(--needs-wash); }
/* Cards lift a little, as a card does when it is picked up. */
.mk-place, .clocks .mk-duty, .trust-grid > li { transition: translate var(--site-slow) var(--ease), box-shadow var(--site-slow) var(--ease); }
.mk-place:hover, .clocks .mk-duty:hover { translate: 0 calc(var(--space-1) * -1); box-shadow: var(--soft-3); }
.trust .trust-grid > li:hover { translate: 0 calc(var(--space-1) * -1); }
/* The Mac's Archon looks up when you point at its place, and the team's draws its people in. */
.mk-place-art .mk-orb, .mk-place-art.is-cloud .mk-person { transition: transform var(--site-slow) var(--ease), scale var(--site-slow) var(--ease); }
.mk-place:hover .mk-lid .mk-orb { scale: 1.12; }
.mk-place:hover .mk-place-art.is-cloud .mk-person { transform: rotate(var(--r)) translateX(calc(var(--space-8) * 1.5)) rotate(calc(-1 * var(--r))); }
@media (prefers-reduced-motion: reduce) {
  .people-orbs li:hover .people-orb, .mk-place:hover, .clocks .mk-duty:hover, .trust .trust-grid > li:hover { translate: none; scale: none; }
}

/* ── The app's own pieces, drawn as the shell draws them (site-art.ts `rail`, `callBar`,
   `callStage`, `callCard`, `notesPost`, Team's rows): the opening and Calls and Team share them. ── */
:root { --ap-dot: 7px; --ap-rail: 220px; --ap-nav: 76px; --ap-dark: var(--neutral-950); --ap-dark-ink: var(--neutral-0); --ap-scrim: var(--overlay-scrim); }
/* The rail: its row of places, then Archon, Work, Rooms and Team, as index.html lays it out. */
.ap-rail { position: relative; gap: var(--space-1); padding: var(--space-4) var(--space-3); font-size: var(--site-mock); }
.ap-icons { display: flex; justify-content: space-between; margin-bottom: var(--space-2); color: var(--ink-2); }
.ap-icons span { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); }
.ap-icons span.is-on { background: var(--glass-fill-quiet); color: var(--ink); box-shadow: var(--soft-1); }
.ap-rail .scene-agent { margin: 0; padding: var(--space-2); background: none; box-shadow: none; }
.ap-rail .scene-agent .mk-orb { width: var(--space-6); height: var(--space-6); }
.ap-rail .scene-agent b { font-size: var(--site-mock); }
.ap-label { margin-top: var(--space-3); padding: 0 var(--space-2); color: var(--ink-3); font-size: var(--site-mock-sm); font-weight: 500; }
.ap-rail .scene-tasks { margin: 0; gap: 0; }
.ap-rail .scene-task { padding: var(--space-1) var(--space-2); }
.ap-rail .scene-task .mk-orb { width: var(--space-6); height: var(--space-6); }
.ap-room, .ap-add, .ap-rail-person, .ap-rail-agent { display: flex; align-items: center; gap: var(--space-2); min-height: var(--space-8); padding: 0 var(--space-2); border-radius: var(--site-radius-sm); color: var(--ink); }
.ap-room > i { color: var(--ink-3); font-style: normal; }
.ap-room.is-unread { font-weight: 600; }
.ap-unread { width: var(--ap-dot); height: var(--ap-dot); margin-left: auto; border-radius: 50%; background: var(--working); }
.ap-live { display: inline-flex; align-items: center; gap: var(--space-0); margin-left: auto; color: var(--working); font-size: var(--site-mock-sm); }
.ap-live b { font-weight: 600; }
.ap-add { color: var(--ink-2); }
.ap-rail-person { position: relative; min-height: var(--site-space-10); }
.ap-rail-person > span { display: grid; min-width: 0; }
.ap-rail-person b, .ap-rail-agent b { font-weight: 400; }
.ap-rail-person small { color: var(--ink-3); font-size: var(--site-mock-sm); }
.ap-rail-person .mk-person, .ap-rail-agent .mk-orb { width: var(--space-6); height: var(--space-6); }
.ap-dot { position: absolute; left: calc(var(--space-2) + var(--space-5) - var(--space-1)); top: 58%; width: var(--ap-dot); height: var(--ap-dot); border-radius: 50%; background: var(--working); box-shadow: 0 0 0 2px var(--card); }
.ap-rail-agent svg { width: 0.85em; height: 0.85em; color: var(--ink-3); }
.ap-you { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding: var(--space-2); }
.ap-you > span { display: grid; min-width: 0; }
.ap-you b { font-weight: 500; }
.ap-you small { color: var(--ink-3); font-size: var(--site-mock-sm); }
.ap-you > svg { margin-left: auto; color: var(--ink-3); }
.ap-you .mk-person { width: var(--space-8); height: var(--space-8); }
/* Add teammate's menu: a person or an agent. */
.ap-menu { display: grid; gap: var(--space-0); width: max-content; padding: var(--space-1); border-radius: var(--site-radius-card); background: var(--card); box-shadow: var(--soft-3); font-size: var(--site-mock); }
.ap-menu-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--site-radius-sm); color: var(--ink); }
.ap-menu-item svg { color: var(--ink-2); }
.ap-menu-item.is-lit { background: var(--glass-well); }
.ap-add { position: relative; }
.ap-add .ap-menu { position: absolute; bottom: calc(100% + var(--space-1)); left: var(--space-4); z-index: 2; }
/* The call bar at the rail's foot: the room and who is with you, then the faces, the notes line and five round moves. */
.ap-callbar { display: grid; gap: var(--space-2); padding: var(--space-2); border-radius: var(--site-radius-card); background: var(--card); box-shadow: var(--soft-2); font-size: var(--site-mock); }
.ap-callbar-head { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.ap-callbar-room { display: grid; flex: 1; min-width: 0; padding-left: var(--space-1); }
.ap-callbar-room b { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 600; }
.ap-callbar-room small, .ap-callbar-video { color: var(--ink-2); font-size: var(--site-mock-sm); }
.ap-live-dot { width: var(--ap-dot); height: var(--ap-dot); border-radius: 50%; background: var(--working); }
.ap-callbar-video { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); }
.ap-faces { display: flex; gap: var(--space-1); padding-inline: var(--space-1); }
.ap-face { position: relative; display: grid; padding: var(--space-0); border-radius: 50%; }
.ap-face .mk-person { width: var(--space-6); height: var(--space-6); }
.ap-face.is-speaking { box-shadow: 0 0 0 2px var(--working); }
.ap-hand { position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); font-size: var(--site-mock-sm); font-weight: 400; line-height: 1; }
.ap-notes-line { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-2); border-radius: var(--site-radius-sm); background: var(--glass-well); color: var(--ink-2); font-size: var(--site-mock-sm); }
.ap-notes-line span { flex: 1; }
.ap-notes-line b { font-weight: 500; color: var(--ink); }
.ap-controls { display: flex; justify-content: space-between; gap: var(--space-1); }
.ap-control { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: 50%; background: var(--glass-well); color: var(--ink); }
.ap-control.is-on { background: var(--ink); color: var(--bg); }
.ap-control.is-leave { background: var(--status-danger); color: var(--on-accent); }
/* The call's pictures: dark glass floating over the page, a handle to move it, a picture each. */
.ap-stage { position: absolute; top: calc(var(--site-space-12) + var(--space-2)); right: var(--space-4); z-index: 3; display: grid; gap: var(--space-2); width: min(46%, 360px); padding: var(--space-2); border-radius: var(--site-radius-lg); background: var(--ap-dark); box-shadow: var(--soft-3); }
.ap-stage-move { justify-self: center; width: var(--space-6); height: var(--space-1); margin-top: var(--space-1); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ap-dark-ink) 60%, transparent); }
.ap-stage-size { position: absolute; top: var(--space-1); right: var(--space-4); display: grid; color: var(--ap-dark-ink); font-size: var(--site-mock-sm); }
.ap-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ap-tile { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--site-radius-card); background: var(--neutral-900); }
.ap-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-tile:first-child img { transform: scaleX(-1); }
.ap-tile.is-speaking { box-shadow: 0 0 0 2px var(--working); }
.ap-tile small { position: absolute; left: var(--space-1); bottom: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ap-dark) 70%, transparent); color: var(--ap-dark-ink); font-size: var(--site-mock-sm); }
/* A room as it opens, its thread over its composer; a call's card in it, and the notes under it. */
.ap-roomview { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: var(--site-mock); }
.ap-room-head { display: flex; flex: none; align-items: center; gap: var(--space-3); height: var(--site-space-12); box-sizing: border-box; padding: 0 var(--space-5); }
.ap-room-head > span:first-child { display: grid; flex: 1; min-width: 0; }
.ap-room-head b { font-weight: 600; }
.ap-room-head b i { margin-right: var(--space-1); color: var(--ink-3); font-style: normal; font-weight: 400; }
.ap-room-head small { color: var(--ink-3); font-size: var(--site-mock-sm); }
.ap-room-head .mk-person { width: var(--space-5); height: var(--space-5); }
.ap-room-head .mk-faces .mk-person + .mk-person { margin-left: calc(var(--space-1) * -1); box-shadow: 0 0 0 2px var(--card); }
.ap-ghost { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-2); font-size: var(--site-mock-sm); white-space: nowrap; }
.ap-thread { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: var(--space-3); min-height: 0; overflow: hidden; width: min(560px, calc(100% - 2 * var(--space-5))); margin: 0 auto; }
.ap-roomview .scene-composer { flex: none; width: min(560px, calc(100% - 2 * var(--space-5))); box-sizing: border-box; margin: var(--space-4) auto var(--space-4); }
.ap-post { display: flex; align-items: flex-start; gap: var(--space-3); }
.ap-post > .mk-person, .ap-post > .mk-orb { width: var(--space-6); height: var(--space-6); }
.ap-post > div { display: grid; gap: var(--space-1); min-width: 0; }
.ap-post b { font-weight: 600; }
.ap-post b small { margin-left: var(--space-1); color: var(--ink-3); font-size: var(--site-mock-sm); font-weight: 400; }
.ap-post p { margin: 0; color: var(--ink); line-height: var(--leading-snug); }
.ap-post p strong { font-weight: 600; }
.ap-post-acts { display: flex; gap: var(--space-3); margin-top: var(--space-1); color: var(--ink-2); font-size: var(--site-mock-sm); }
.ap-post-acts span { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0) var(--space-2); border-radius: var(--radius-pill); background: var(--glass-fill-quiet); box-shadow: var(--soft-1); }
.ap-callcard { display: flex; align-items: center; gap: var(--space-3); max-width: 420px; padding: var(--space-3); border-radius: var(--site-radius-card); background: var(--card); box-shadow: var(--soft-1); }
.ap-callcard-mark { display: grid; place-items: center; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); background: var(--glass-well); color: var(--ink-2); }
.ap-callcard-copy { display: grid; flex: 1; gap: var(--space-0); min-width: 0; color: var(--ink-2); font-size: var(--site-mock-sm); }
.ap-callcard-copy > span { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); font-size: var(--site-mock); white-space: nowrap; }
.ap-callcard-copy b { font-weight: 600; }
.ap-callcard-copy em { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--glass-well); color: var(--ink-2); font-size: var(--site-mock-sm); font-style: normal; font-weight: 500; }
.ap-callcard.is-live :is(.ap-callcard-mark, em) { background: color-mix(in oklab, var(--working) 11%, transparent); color: var(--working); }
/* Team's page: People and Agents, a row each, as the shell's directory draws them. */
.ap-team { display: grid; gap: var(--space-2); align-content: start; font-size: var(--site-mock); }
.ap-team-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.ap-team-head b { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; }
.ap-team-add { position: relative; 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); }
.ap-team-add .ap-menu { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 2; }
.ap-team-h { margin: var(--space-2) 0 0; color: var(--ink-3); font-size: var(--site-mock-sm); font-weight: 500; }
.ap-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--site-radius-card); background: var(--card); box-shadow: var(--soft-1); }
.ap-row > span:last-child { display: grid; gap: var(--space-0); min-width: 0; }
.ap-row b { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 500; }
.ap-row b small { color: var(--ink-3); font-weight: 400; }
.ap-row b svg { width: 0.85em; height: 0.85em; color: var(--ink-3); }
.ap-row > span:last-child > small { overflow: hidden; color: var(--ink-2); font-size: var(--site-mock-sm); white-space: nowrap; text-overflow: ellipsis; }
.ap-lead { position: relative; display: grid; flex: none; }
.ap-lead .mk-person, .ap-lead .mk-orb { width: var(--space-8); height: var(--space-8); }
.ap-lead .ap-dot { left: auto; right: calc(var(--space-0) * -1); top: auto; bottom: calc(var(--space-0) * -1); }
/* A line arriving in a thread takes its room as it comes (site-art.ts `grow`). */
.ap-grow { display: grid; grid-template-rows: 1fr; }
.ap-grow > div { min-height: 0; overflow: hidden; }
.ap-thread > .ap-grow > div { display: grid; gap: var(--space-3); padding-top: var(--space-1); }
/* The room header's Call: there until you are in the call, when the bar holds it. */
.ap-callbtn { display: none; 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); font-size: var(--site-mock-sm); font-weight: 500; }
/* Without motion, Calls shows the call under way; the opening shows Home only. */
.cp-ended, .cp-notes { display: none; }
.cp-bar .ap-take { background: var(--ink); color: var(--bg); }

/* A dialog, as the shell opens one over the page. */
.ap-dialog { display: grid; gap: var(--space-2); width: min(360px, 84%); padding: var(--space-4); border-radius: var(--site-radius-lg); background: var(--surface-floating); box-shadow: var(--shadow-floating); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); font-size: var(--site-mock); }
.ap-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.ap-dialog header b { font-size: var(--text-base); font-weight: 600; }
.ap-dialog header svg { color: var(--ink-3); }
.ap-dialog label { color: var(--ink-2); font-size: var(--site-mock-sm); }
.ap-dialog p { margin: 0; color: var(--ink-3); font-size: var(--site-mock-sm); }
.ap-field { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--site-radius-sm); background: var(--glass-well); box-shadow: var(--well-inset); color: var(--ink); }
.ap-field.is-tall { min-height: calc(var(--space-8) + var(--space-2)); }
.ap-dialog-acts { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); }
.ap-dialog-acts.is-end { justify-content: flex-end; }
.ap-select { 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); }
.ap-dialog .mk-btn { height: var(--space-8); padding: 0 var(--space-4); }

/* The opening's close: "This is Archon." under the orb, and one line under that (site-motion.css plays it). */
.stage-close-h { margin: 0; font-size: var(--site-head-hero); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
/* Under it, the one line the opening leaves you with, in the voice of the hero's own line. */
.stage-close-line { max-width: 22em; margin: 0; color: var(--ink-2); font-size: var(--site-head-card); letter-spacing: -0.02em; line-height: 1.3; text-align: center; text-wrap: balance; }
.ui-cards { display: grid; }
.ui-cards > * { grid-area: 1 / 1; }
.ui-dialog { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: var(--ap-scrim); }

/* Calls: the head, a call in a room with what it leaves behind, and three facts set as a spec line under it. */
.calls-head { max-width: 760px; margin: 0 auto; text-align: center; }
.calls-head .lbl { justify-content: center; }
.calls-head .h2 { max-width: 18ch; margin-inline: auto; }
.calls-head .lede { margin-inline: auto; max-width: 34em; }
.calls-art { position: relative; isolation: isolate; max-width: 1040px; margin: var(--site-space-16) auto 0; }
.calls-art::before { content: ""; position: absolute; z-index: -1; inset: 8% -6% -12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--working) 10%, transparent), transparent); }
.ap-app { position: relative; display: grid; grid-template-columns: var(--ap-rail) minmax(0, 1fr); height: min(520px, calc(100svh - var(--ap-nav) - var(--site-space-16))); min-height: 440px; }
.ap-app .ap-rail { background: var(--glass-well); }
.ap-app .ap-callbar { position: absolute; left: var(--space-2); bottom: var(--space-2); width: calc(var(--ap-rail) - 2 * var(--space-2)); box-sizing: border-box; z-index: 2; }
.ap-main { position: relative; min-width: 0; }
/* Calls, played: on a wide, tall screen the section holds still while the reader scrolls
   through one call - talk, Call, the call, notes asked for, a hand, the end, the notes. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1021px) and (min-height: 720px), (prefers-reduced-motion: no-preference) and (max-width: 1020px) and (min-height: 620px) {
    .calls-play { height: 260svh; margin-top: var(--site-space-16); view-timeline: --callplay; }
    .calls-play .calls-art { position: sticky; top: calc(var(--ap-nav) + var(--space-8)); margin-top: 0; }
    .calls-play :is(.ap-callbtn, .cp-sam, .cp-cards, .cp-live, .cp-ended, .cp-notes, .cp-bar, .cp-stage, .cp-livemark, .cp-bar .ap-take, .cp-bar .ap-notes-later, .cp-bar .ap-hand) { animation-timeline: --callplay; animation-timing-function: linear; }
    .calls-play .ap-callbtn { display: inline-flex; animation-name: press, btn-gone; animation-fill-mode: both, forwards; animation-timeline: --callplay, --callplay; animation-range: contain 15% contain 19%, contain 19.5% contain 21%; }
    .calls-play .cp-sam { animation-name: grow; animation-fill-mode: both; animation-range: contain 5% contain 11%; }
    .calls-play .cp-cards { animation-name: grow; animation-fill-mode: both; animation-range: contain 19% contain 23%; }
    .calls-play .cp-ended { display: flex; }
    .calls-play :is(.cp-live, .cp-ended, .cp-livemark) { animation-fill-mode: both; animation-range: contain 0% contain 100%; }
    .calls-play .cp-live { animation-name: cp-was; }
    .calls-play .cp-ended { animation-name: cp-now; }
    .calls-play .cp-livemark { animation-name: cp-mark; }
    .calls-play .cp-bar { animation-name: rise-in, call-out; animation-fill-mode: both, forwards; animation-timeline: --callplay, --callplay; animation-range: contain 20% contain 26%, contain 60% contain 65%; }
    .calls-play .cp-stage { transform-origin: 100% 0; animation-name: stage-in, call-out; animation-fill-mode: both, forwards; animation-timeline: --callplay, --callplay; animation-range: contain 24% contain 31%, contain 60% contain 65%; }
    .calls-play .cp-bar .ap-take { background: var(--glass-well); color: var(--ink); animation-name: press-on; animation-fill-mode: both; animation-range: contain 37% contain 42%; }
    .calls-play .cp-bar .ap-notes-later { animation-name: rise-in; animation-fill-mode: both; animation-range: contain 41% contain 46%; }
    .calls-play .cp-bar .ap-hand { animation-name: hand-up; animation-fill-mode: both; animation-range: contain 49% contain 53%; }
    .calls-play .calls-cap { display: grid; }
    .calls-play .calls-cap span { animation-timeline: --callplay; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 100%; }
    .calls-play .calls-cap [data-k="1"] { animation-name: cap-1; }
    .calls-play .calls-cap [data-k="2"] { animation-name: cap-2; }
    .calls-play .calls-cap [data-k="3"] { animation-name: cap-3; }
    .calls-play .calls-cap [data-k="4"] { animation-name: cap-4; }
    /* The notes write themselves, a line at a time, then offer Start Work and Keep. */
    .calls-play .cp-notes .ap-post > div > :is(p, .ap-post-acts) { animation: rise-in linear both; animation-timeline: --callplay; }
    .calls-play .cp-notes .ap-post > div > p:nth-of-type(1) { animation-range: contain 72% contain 75%; }
    .calls-play .cp-notes .ap-post > div > p:nth-of-type(2) { animation-range: contain 75% contain 78%; }
    .calls-play .cp-notes .ap-post > div > p:nth-of-type(3) { animation-range: contain 78% contain 81%; }
    .calls-play .cp-notes .ap-post-acts { animation-range: contain 82% contain 85%; }
    .calls-play .cp-notes { display: grid; animation-name: grow; animation-fill-mode: both; animation-range: contain 67% contain 72%; }
  }
}
@keyframes grow { from { grid-template-rows: 0fr; opacity: 0; } }
/* The caption under the call says the step it is on, one at a time. */
@keyframes cap-1 { 0%, 16% { opacity: 1; transform: none; } 17.5%, 100% { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); visibility: hidden; } }
@keyframes cap-2 { 0%, 18% { opacity: 0; transform: translateY(var(--space-1)); visibility: hidden; } 19.5%, 35% { opacity: 1; transform: none; visibility: visible; } 36.5%, 100% { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); visibility: hidden; } }
@keyframes cap-3 { 0%, 37% { opacity: 0; transform: translateY(var(--space-1)); visibility: hidden; } 38.5%, 58% { opacity: 1; transform: none; visibility: visible; } 59.5%, 100% { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); visibility: hidden; } }
@keyframes cap-4 { 0%, 60.5% { opacity: 0; transform: translateY(var(--space-1)); visibility: hidden; } 62%, 100% { opacity: 1; transform: none; visibility: visible; } }
@keyframes btn-gone { to { opacity: 0; visibility: hidden; width: 0; padding: 0; margin: 0; } }
@keyframes cp-was { 0%, 62.5% { opacity: 1; } 63.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes cp-now { 0%, 63% { opacity: 0; visibility: hidden; } 64%, 100% { opacity: 1; visibility: visible; } }
@keyframes cp-mark { 0%, 22% { opacity: 0; visibility: hidden; } 23.5%, 61% { opacity: 1; visibility: visible; } 62.5%, 100% { opacity: 0; visibility: hidden; } }

.calls-cap { display: none; margin: var(--space-6) 0 0; color: var(--ink-2); font-size: var(--site-head-card); letter-spacing: -0.02em; line-height: 1.35; text-align: center; }
.calls-cap span { grid-area: 1 / 1; }

/* Three facts, set as one spec line under the drawing: an icon, a word, a line. */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--site-space-10); max-width: 1040px; margin: var(--site-space-12) auto 0; padding: 0; list-style: none; }
.specs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-content: start; }
.specs svg { grid-row: span 2; width: var(--space-8); height: var(--space-8); padding: var(--space-2); box-sizing: border-box; border-radius: 50%; background: var(--blue-wash); color: var(--blue); }
.specs b { font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.015em; }
.specs p { margin: 0; color: var(--ink-2); font-size: var(--text-base); line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .ap-face.is-speaking, .ap-tile.is-speaking { animation: speaking 1.6s ease-in-out infinite; }
  .ap-live-dot { animation: pulse 1.2s ease-in-out infinite; }
}
@keyframes speaking { 50% { box-shadow: 0 0 0 2px var(--working), 0 0 0 5px color-mix(in oklab, var(--working) 18%, transparent); } }

/* Team: the copy beside the Team page, on a floor of its own. */
.team { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--site-space-16); align-items: center; }
.team .checks { margin-top: var(--site-space-10); }
.team-art { position: relative; isolation: isolate; }
.team-art::before { content: ""; position: absolute; z-index: -1; inset: 6% -8% -10%; border-radius: 50%; background: radial-gradient(closest-side, var(--team-glow), transparent); }
.team-art .ap-team { padding: var(--space-6); 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); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The directory fills a row at a time, as people arrive. */
    .team-art .ap-row { animation: arrive linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .specs li:nth-child(2) { animation-range: entry 8% entry 78%; }
    .specs li:nth-child(3) { animation-range: entry 16% entry 86%; }
  }
}

/* The Responsibilities head reads on two lines, never three. */
.clocks .h2 { max-width: 20ch; }

@media (max-width: 1020px) {
  .team { grid-template-columns: minmax(0, 1fr); gap: var(--site-space-10); }
  .specs { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 620px) {
  /* On a phone the rail is a drawer: the call bar floats over the page's foot, without its faces, as the shell's does. */
  .ap-app { grid-template-columns: minmax(0, 1fr); height: 480px; }
  .ap-app .ap-rail { display: none; }
  .ap-app .ap-callbar { left: var(--space-2); right: var(--space-2); width: auto; }
  .ap-callbar .ap-faces, .ap-callbar .ap-callbar-video { display: none; }
  .ap-stage { width: 75%; right: var(--space-2); }
  .team-art .ap-team { padding: var(--space-4); }
  .ap-room-head small { display: none; }
}

/* ── Team, played: Add teammate, an invitation, an agent made; its lines light as each happens. ── */
.ap-team { position: relative; }
.tp-menu-a, .tp-menu-b, .tp-invite, .tp-create { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1021px) and (min-height: 720px) {
    .team-play { height: 240svh; view-timeline: --teamplay; }
    .team-play .team { position: sticky; top: calc(var(--ap-nav) + var(--space-8)); }
    .team-play :is(.tp-menu-a, .tp-menu-b) { display: grid; }
    .team-play :is(.tp-invite, .tp-create) { display: grid; }
    .team-play :is(.tp-add, .tp-menu-a, .tp-menu-b, .tp-invite, .tp-create, .tp-send, .tp-make, .tp-invited, .tp-agent, .team-checks li) { animation-timeline: --teamplay; animation-timing-function: linear; }
    .team-play .tp-add { animation-name: press, press; animation-fill-mode: both, none; animation-timeline: --teamplay, --teamplay; animation-range: contain 6% contain 10%, contain 47% contain 51%; }
    .team-play .tp-menu-a { animation-name: menu-pop; animation-fill-mode: both; animation-range: contain 8% contain 18%; }
    .team-play .tp-invite { animation-name: dialog-pop; animation-fill-mode: both; animation-range: contain 16% contain 38%; }
    .team-play .tp-send { animation-name: press; animation-fill-mode: both; animation-range: contain 31% contain 35%; }
    .team-play .tp-invited { animation-name: grow; animation-fill-mode: both; animation-range: contain 37% contain 43%; }
    .team-play .tp-menu-b { animation-name: menu-pop; animation-fill-mode: both; animation-range: contain 49% contain 58%; }
    .team-play .tp-create { animation-name: dialog-pop; animation-fill-mode: both; animation-range: contain 56% contain 80%; }
    .team-play :is(.tp-invite, .tp-create) .ap-dialog { animation: dialog-move linear both; animation-timeline: --teamplay; }
    .team-play .tp-invite .ap-dialog { animation-range: contain 16% contain 38%; }
    .team-play .tp-create .ap-dialog { animation-range: contain 56% contain 80%; }
    .team-play .tp-make { animation-name: press; animation-fill-mode: both; animation-range: contain 73% contain 77%; }
    .team-play .tp-agent { animation-name: grow; animation-fill-mode: both; animation-range: contain 79% contain 85%; }
    .team-play .team-checks li { animation-fill-mode: both; animation-range: contain 0% contain 100%; }
    .team-play .team-checks [data-t="1"] { animation-name: lit-1; }
    .team-play .team-checks [data-t="2"] { animation-name: lit-2; }
    .team-play .team-checks [data-t="3"], .team-play .team-checks [data-t="4"] { animation-name: lit-3; }
  }
}
/* A line lit while the drawing does it, and kept lit once it has. */
@keyframes lit-1 { 0%, 14% { opacity: 0.45; transform: none; } 16% { opacity: 1; transform: translateX(var(--space-1)); } 20%, 100% { opacity: 1; transform: none; } }
@keyframes lit-2 { 0%, 52% { opacity: 0.45; transform: none; } 54% { opacity: 1; transform: translateX(var(--space-1)); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes lit-3 { 0%, 84% { opacity: 0.45; transform: none; } 86% { opacity: 1; transform: translateX(var(--space-1)); } 90%, 100% { opacity: 1; transform: none; } }

/* ── Responsibilities: each run goes from working to what it came to as the page passes it. ── */
.mk-duty-roll { grid-area: last; display: grid; }
.mk-duty-roll > .mk-duty-last { grid-area: 1 / 1; }
.mk-run { display: none; }
/* ── Trust: each promise acts itself out as it comes into view. ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mk-run { display: inline-flex; }
    .mk-run, .mk-final { animation-timeline: view(); animation-timing-function: linear; animation-fill-mode: both; animation-range: entry 70% cover 55%; }
    .mk-run { animation-name: roll-was; }
    .mk-final { animation-name: roll-now; }
    .trust-grid > li :is(.ta-rows li, .ta-log li, .ta-seal, .ta-say, .ta-moves) { animation: rise-in linear both; animation-timeline: view(); }
    .trust-grid > li .ta-say { animation-range: entry 60% entry 100%; }
    .trust-grid > li .ta-moves { animation-range: entry 80% cover 30%; }
    .trust-grid > li .ta-pill.is-yes { animation: approve-press linear both; animation-timeline: view(); animation-range: cover 34% cover 46%; }
    .trust-grid > li .ta-rows li:nth-child(1), .trust-grid > li .ta-log li:nth-child(1) { animation-range: entry 60% entry 100%; }
    .trust-grid > li .ta-rows li:nth-child(2), .trust-grid > li .ta-log li:nth-child(2) { animation-range: entry 80% cover 32%; }
    .trust-grid > li .ta-rows li:nth-child(3), .trust-grid > li .ta-log li:nth-child(3) { animation-range: entry 100% cover 38%; }
    .trust-grid > li .ta-seal { animation: chip-in linear both; animation-timeline: view(); animation-range: entry 90% cover 40%; }
    /* On your Mac: the lid opens as the place comes into view, Archon on its screen; in the cloud, the team gathers round. */
    .mk-place-art.is-mac { perspective: calc(var(--space-8) * 20); }
    .mk-lid { transform-origin: 50% 100%; animation: lid-open linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
    .mk-place-art.is-cloud .mk-faces { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 50% cover 40%; }
  }
}
@keyframes lid-open { from { transform: rotateX(-82deg); opacity: 0.4; } 70% { opacity: 1; } to { transform: none; } }
@keyframes roll-was { 0%, 50% { opacity: 1; } 60%, 100% { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); visibility: hidden; } }
@keyframes roll-now { 0%, 61% { opacity: 0; transform: translateY(var(--space-1)); visibility: hidden; } 80% { opacity: 1; transform: scale(1.04); visibility: visible; } 100% { opacity: 1; transform: none; visibility: visible; } }

/* ── Rooms on a phone: the words first, then the room holds still while its four moments play.
   Each line lights in the room as its moment comes, its number lit under it, and one plain
   sentence says it. Desktop keeps its notes beside the drawing (site-orbs.js plays them). ── */
@media (min-width: 1021px) {
  .rooms-play, .rooms-stick { display: contents; }
}
@media (max-width: 1020px) {
  .rooms-copy { order: -1; }
  .rooms-play { margin-top: var(--site-space-10); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 1020px) and (min-height: 620px) {
    .rooms-play { height: 260svh; view-timeline: --roomsplay; }
    /* Held on a phone's screen, the room keeps only what the four moments need. */
    .rooms-play :is(.mk-titlebar, .mk-typing, .mk-composer, .mk-call) { display: none; }
    .rooms-play .mk-room-main { padding-block: var(--space-3); }
    .rooms-stick { gap: var(--space-3); }
    .rooms-play .mk-room-main { gap: var(--space-3); }
    .rooms-stick { position: sticky; top: calc(var(--ap-nav) - var(--space-3)); display: grid; gap: var(--space-5); }
    .rooms-play .rooms-art { animation: none; }
    .rooms-play .mk-beat { animation-timeline: --roomsplay; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 100%; }
    .rooms-play .mk-room .mk-beat { border-radius: var(--site-radius-card); }
    .rooms-play .mk-beat[data-b="1"] { animation-name: rb-1; }
    .rooms-play .mk-beat[data-b="2"] { animation-name: rb-2; }
    .rooms-play .mk-beat[data-b="3"] { animation-name: rb-3; }
    .rooms-play .mk-beat[data-b="4"] { animation-name: rb-4; }
  }
}
/* A moment's line: quiet before it comes, lit on glass while it is the one, then kept. */
@keyframes rb-1 { 0%, 22% { background: var(--glass-fill-quiet); box-shadow: var(--soft-1); } 26%, 100% { background: transparent; box-shadow: none; } }
@keyframes rb-2 { 0%, 22% { opacity: 0.3; } 26%, 47% { opacity: 1; background: var(--glass-fill-quiet); box-shadow: var(--soft-1); } 51%, 100% { opacity: 1; background: transparent; box-shadow: none; } }
@keyframes rb-3 { 0%, 47% { opacity: 0.3; } 51%, 72% { opacity: 1; background: var(--glass-fill-quiet); box-shadow: var(--soft-1); } 76%, 100% { opacity: 1; background: transparent; box-shadow: none; } }
@keyframes rb-4 { 0%, 72% { opacity: 0.3; } 76%, 100% { opacity: 1; background: var(--glass-fill-quiet); box-shadow: var(--soft-1); } }

/* ── How it works on a phone: the chat holds still and fills as the steps come, each arriving at its
   foot as a chat's new line does, its number lit and one sentence under it. People reads at full
   contrast: three lines, none waiting in grey. ── */
@media (max-width: 1020px) {
}
/* On the narrowest phones the bar keeps Archon's orb and gives its wordmark's room to Sign in. */
@media (max-width: 360px) {
  .nav .site-wordmark { display: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 1020px) and (min-height: 620px) {
    .how-play { display: block; height: 280svh; view-timeline: --howplay; }
    .how-play .how-art { position: sticky; top: calc(var(--ap-nav) - var(--space-3)); display: grid; gap: var(--space-3); animation: none; }
    .how-play .how-art .mk-window { display: flex; flex-direction: column; height: min(62svh, 520px); }
    .how-play .mk-titlebar { display: none; }
    .how-play .mk-chat { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-end; gap: 0; }
    .how-play .mk-chat > .mk-beat { margin-top: var(--space-4); overflow: clip; overflow-clip-margin: var(--space-4); }
    .how-play .mk-beat { animation-timeline: --howplay; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 100%; }
    .how-play .mk-beat[data-b="2"] { animation-name: hb-2; }
    .how-play .mk-beat[data-b="3"] { animation-name: hb-3; }
    .how-play .mk-beat[data-b="4"] { animation-name: hb-4; }
  }
}
/* A step's lines take no room until it comes, then arrive at the chat's foot. */
@keyframes hb-2 { 0%, 24% { max-height: 0; margin-top: 0; opacity: 0; } 28%, 100% { max-height: 40em; opacity: 1; } }
@keyframes hb-3 { 0%, 49% { max-height: 0; margin-top: 0; opacity: 0; } 53%, 100% { max-height: 40em; opacity: 1; } }
@keyframes hb-4 { 0%, 74% { max-height: 0; margin-top: 0; opacity: 0; } 78%, 100% { max-height: 40em; opacity: 1; } }

/* For every team: a page for each, as a list of ways in. */
.for-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.for-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; height: 100%; box-sizing: border-box; padding: var(--space-4); border-radius: var(--site-radius-card); background: var(--glass-fill); box-shadow: var(--soft-1); text-decoration: none; transition: transform var(--motion-duration-normal) var(--ease), box-shadow var(--motion-duration-normal) var(--ease); }
.for-list a:hover { transform: translateY(-2px); box-shadow: var(--soft-2); }
.for-list 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); }
.for-list span { display: grid; gap: var(--space-0); }
.for-list b { font-size: var(--text-md); font-weight: 500; }
.for-list small { color: var(--ink-3); font-size: var(--text-sm); line-height: var(--leading-snug); }
.for-list a > svg { color: var(--ink-3); transition: transform var(--motion-duration-normal) var(--ease), color var(--motion-duration-normal) var(--ease); }
.for-list a:hover > svg { color: var(--blue); transform: translateX(3px); }
@media (max-width: 1020px) { .for-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .for-list { grid-template-columns: minmax(0, 1fr); } }

/* The front page's questions end with the way to every other answer, in Help. */
.faq .sol-faq-more { margin: var(--space-2) 0 0; padding-left: var(--space-6); font-size: var(--text-base); }
.faq .sol-faq-more a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-target); color: var(--ink-2); }