/* What the front page shows in place of a list, read after site-story.css and in its order: the notes
   pinned in its drawings, People first, the first screen on a phone and the connectors. */
/* ── Show, don't list (decision: the-front-page-shows-not-lists). How it works and Rooms say each moment
   with a note pinned to its line in the drawing; their step lists stay for a screen reader and for
   the script that plays them, never on screen. ── */
.sec .beats.sr-list { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.how[data-played] .how-play { grid-template-rows: minmax(0, 1fr); }
/* Held still on a wide screen, Rooms keeps its four notes beside the room: the lit one says its moment, the rest wait as a word. */
.rooms[data-played] .beats.sr-list { position: static; width: auto; height: auto; margin: var(--space-8) 0 0; overflow: visible; clip-path: none; white-space: normal; }
.rooms[data-played] .notes > li { padding: var(--space-3) 0; opacity: 1; transform: none; animation: none; }
.rooms[data-played] .notes p { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--site-slow) var(--ease), opacity var(--site-slow) var(--ease); }
.rooms[data-played] .notes p > span { min-height: 0; overflow: hidden; }
.rooms[data-played] .notes > li[data-on] p { grid-template-rows: 1fr; opacity: 1; }
.rooms[data-played] .notes > li > div { gap: 0; }
.rooms[data-played] .notes > li[data-on] > div { gap: var(--space-1); }
.pin { display: inline-flex; align-items: center; gap: var(--space-1); width: fit-content; margin-bottom: var(--space-2); padding: var(--space-0) var(--space-2); border-radius: var(--radius-pill); background: var(--blue-wash); color: var(--blue); font-size: var(--site-mock-sm); font-weight: 500; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.pin i { width: var(--space-1); height: var(--space-1); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 18%, transparent); }
.mk-line > div > .pin, .mk-work > .pin, .mk-ask > .pin { display: flex; }
.mk-msg.is-me > .pin { align-self: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .pin i { animation: pin-beat 2.4s var(--ease) infinite; }
}
@keyframes pin-beat { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--blue) 8%, transparent); } }

/* ── People first: the busywork Archon finished, and the few decisions that came to Maya. ── */
.ppl { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-6); max-width: 1000px; margin: var(--site-space-16) auto 0; text-align: left; }
.ppl-done, .ppl-you { padding: var(--space-5); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.ppl-you { background: linear-gradient(165deg, color-mix(in oklab, var(--needs-wash) 80%, transparent), transparent 55%), var(--glass-fill); box-shadow: var(--soft-3); }
.ppl-h { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--site-mock); }
.ppl-h .mk-orb, .ppl-h .mk-person { width: var(--space-6); height: var(--space-6); }
.ppl-h b { font-weight: 500; }
.ppl-h > span { margin-left: auto; color: var(--ink-3); font-size: var(--site-mock-sm); }
.ppl-h > .ppl-count { display: grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding: 0 var(--space-1); box-sizing: border-box; border-radius: var(--radius-pill); background: var(--needs-wash); color: var(--needs); font-weight: 600; }
.ppl-done ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ppl-done li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--site-radius-sm); background: var(--glass-fill-quiet); color: var(--ink-2); font-size: var(--site-mock); }
.ppl-done li svg { width: var(--space-5); height: var(--space-5); padding: var(--space-1); box-sizing: border-box; border-radius: 50%; background: color-mix(in oklab, var(--working) 12%, transparent); color: var(--working); stroke-width: 2.6; }
.ppl-done time { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--site-mock-sm); }
.ppl-ask { display: grid; gap: var(--space-0); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--site-radius-card); background: var(--card); box-shadow: var(--soft-1); }
.ppl-ask b { font-size: var(--site-mock); font-weight: 500; }
.ppl-ask small { color: var(--ink-3); font-size: var(--site-mock-sm); }
.ppl-moves { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.ppl-moves i { padding: var(--space-0) var(--space-3); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--site-mock-sm); font-style: normal; font-weight: 500; }
.ppl-moves i.is-yes { background: var(--solid); color: var(--solid-ink); box-shadow: none; }
/* The work flows from Archon's side to yours: three dots, passing. */
.ppl-flow { display: flex; gap: var(--space-1); }
.ppl-flow i { width: var(--space-1); height: var(--space-1); border-radius: 50%; background: var(--blue); opacity: 0.3; }
.ppl-line { margin: var(--site-space-12) auto 0; max-width: 24ch; font-size: var(--site-head-card); letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.ppl-line .quiet { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .ppl-flow i { animation: flow 1.8s var(--ease) infinite; }
  .ppl-flow i:nth-child(2) { animation-delay: 0.3s; }
  .ppl-flow i:nth-child(3) { animation-delay: 0.6s; }
}
@keyframes flow { 30% { opacity: 1; transform: scale(1.4); } 60%, 100% { opacity: 0.3; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* As the morning scrolls in, the work ticks off; then what needs Maya arrives in her column. */
    .ppl-done li, .ppl-ask { animation: rise-in linear both; animation-timeline: view(); }
    .ppl-done li:nth-child(1) { animation-range: entry 40% entry 80%; }
    .ppl-done li:nth-child(2) { animation-range: entry 55% entry 95%; }
    .ppl-done li:nth-child(3) { animation-range: entry 70% cover 30%; }
    .ppl-done li:nth-child(4) { animation-range: entry 85% cover 34%; }
    .ppl-done li:nth-child(5) { animation-range: entry 100% cover 38%; }
    .ppl-ask { animation-name: ask-in; }
    .ppl-ask:nth-of-type(1) { animation-range: entry 80% cover 36%; }
    .ppl-ask:nth-of-type(2) { animation-range: entry 95% cover 42%; }
    .ppl-ask:nth-of-type(3) { animation-range: cover 20% cover 48%; }
  }
}
@keyframes ask-in { from { opacity: 0; transform: translateX(calc(var(--space-6) * -1)) scale(0.97); } }
@media (max-width: 1020px) {
  .ppl { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ppl-flow { flex-direction: column; justify-self: center; }
  @keyframes ask-in { from { opacity: 0; transform: translateY(calc(var(--space-6) * -1)) scale(0.97); } }
}

/* Your Archon's face: you, in Archon's light, not a black disc. */
.people-orb .people-you { background: linear-gradient(140deg, var(--you-a), var(--you-b)); color: var(--neutral-0); }
.people-orb .people-you svg { width: 58%; height: 58%; stroke-width: 2; }

/* ── The first screen on a phone: the orb, the hook, the line and the way in, all above the fold.
   The orb is smaller and the gaps tighter; the slot it lands in keeps its size (a larger --k). ── */
@media (max-width: 620px) {
  .stage, .stage .stage-pin { --o: min(22svh, 56vw); --k: 0.4; }
  .stage { --site-head-hero: clamp(40px, 12vw, 48px); }
  .stage .stage-pin { padding-top: var(--space-6); }
  .stage .hero-copy { margin-top: var(--space-4); }
  .stage .hero-kicker { margin-bottom: var(--space-3); }
  .stage .hero-lede { margin-top: var(--space-3); font-size: var(--text-xl); }
  .stage .hero-actions { margin-top: var(--space-5); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 560px) and (max-width: 620px) {
    .stage .hero-copy { top: calc(var(--nav) + 5svh + var(--o)); margin-top: 0; }
  }
}
/* The narrowest phones give a card's words the icon's room. */
@media (max-width: 360px) {
  .ui-ch .scene-work-head > svg { display: none; }
}

/* Calls on a phone plays as it does on a wide screen: the window a little shorter, its pictures
   clear of the room's lines, and the caption a size down. */
@media (max-width: 1020px) {
  .calls-cap { font-size: var(--text-lg); margin-top: var(--space-4); }
}
@media (max-width: 620px) {
  .ap-app { height: min(480px, 58svh); min-height: 380px; }
  .ap-stage { width: 50%; }
  .calls-play .calls-art { top: calc(var(--ap-nav) - var(--space-3)); }
}

/* A call's tile is the person's own 16:9 camera frame; on a narrower tile their eyes, not their collar, stay in view. */
.ap-tile img, .mk-tile img, .ui-tile img { object-position: 50% 30%; }

/* ── Connectors: the panel as Settings draws it, Stripe connected as it scrolls in, and the work that unlocks. ── */
.cx-mark[data-hue="12"] { --cx: oklch(0.62 0.17 28); }
.cx-mark[data-hue="140"] { --cx: oklch(0.62 0.13 150); }
.cx-mark[data-hue="260"] { --cx: oklch(0.32 0.02 260); }
.cx-mark[data-hue="270"] { --cx: oklch(0.55 0.18 280); }
.cx-mark[data-hue="240"] { --cx: oklch(0.55 0.15 265); }
.cx-mark[data-hue="215"] { --cx: oklch(0.6 0.12 230); }
.cx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; font-size: var(--site-mock); line-height: var(--leading-snug); }
.cx-panel { display: grid; gap: var(--space-1); padding: var(--space-5); 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); }
.cx-h { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); }
.cx-h b { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; }
.cx-search { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--glass-well); color: var(--ink-3); font-size: var(--site-mock-sm); }
.cx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--site-radius-card); }
.cx-row + .cx-row { margin-top: var(--space-1); }
.cx-mark { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--site-radius-sm); background: var(--cx); color: var(--neutral-0); font-style: normal; font-weight: 600; }
.cx-row b { font-weight: 500; }
.cx-who, .cx-cat { color: var(--ink-3); font-size: var(--site-mock-sm); }
.cx-on { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--working); font-size: var(--site-mock-sm); font-weight: 500; }
.cx-row .mk-btn { height: var(--space-6); padding: 0 var(--space-3); font-size: var(--site-mock-sm); }
.cx-swap { display: inline-grid; justify-items: end; }
.cx-swap > * { grid-area: 1 / 1; }
.cx-swap > .cx-on, .cx-later { visibility: hidden; }
.cx-now { background: var(--blue-wash); }
.cx-use { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--site-radius-lg); background: var(--glass-fill); box-shadow: var(--soft-2); }
.cx-use .mk-msg.is-me { display: flex; justify-content: flex-end; }
.connectors .services-run { margin-top: var(--site-space-10); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Connect is pressed, and Stripe is connected for everyone; then the work it unlocks lands, a step at a time. */
    .cx-swap > .mk-btn, .cx-swap > .cx-on, .cx-later, .cx-now, .cx-use .mk-msg, .cx-use .mk-work, .cx-use li { animation-timeline: view(); animation-timing-function: linear; animation-fill-mode: both; }
    .cx-swap > .mk-btn { animation-name: cx-press; animation-range: entry 80% cover 42%; }
    .cx-swap > .cx-on, .cx-later { animation-name: cx-show; animation-range: entry 80% cover 42%; }
    .cx-now { animation-name: cx-settle; animation-range: cover 40% cover 60%; }
    .cx-use .mk-msg { animation-name: rise-in; animation-range: cover 30% cover 40%; }
    .cx-use .mk-work { animation-name: rise-in; animation-range: cover 38% cover 46%; }
    .cx-use li:nth-child(1) { animation-name: rise-in; animation-range: cover 44% cover 50%; }
    .cx-use li:nth-child(2) { animation-name: rise-in; animation-range: cover 48% cover 54%; }
    .cx-use li:nth-child(3) { animation-name: rise-in; animation-range: cover 52% cover 58%; }
  }
}
@keyframes cx-press { 0%, 70% { transform: none; } 80% { transform: scale(0.9); } 88%, 100% { opacity: 0; visibility: hidden; } }
@keyframes cx-show { 0%, 86% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes cx-settle { to { background: transparent; } }
@media (max-width: 1020px) {
  .cx { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .cx-panel, .cx-use { padding: var(--space-4); }
  .cx-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cx-row .cx-who, .cx-row .cx-cat { display: none; }
}
.connectors .h2 { max-width: 20ch; }

/* ── A played drawing keeps its section's head over it, small: the real head has scrolled away by
   then. It arrives as the drawing starts to hold, and is not there at all where nothing is held. ── */
.play-title { display: none; margin: 0; text-align: center; font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 1020px) and (min-height: 620px) {
    .play-title { display: block; animation: rise-in linear both; animation-range: contain 0% contain 4%; }
    .how-play .play-title { animation-timeline: --howplay; }
    .rooms-play .play-title { animation-timeline: --roomsplay; }
    .calls-play .play-title { margin-bottom: var(--space-3); animation-timeline: --callplay; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1021px) and (min-height: 820px) {
    .calls-play .play-title { display: block; margin-bottom: var(--space-5); font-size: var(--site-head-card); font-weight: 450; animation: rise-in linear both; animation-timeline: --callplay; animation-range: contain 0% contain 4%; }
    .calls-play .calls-art { top: calc(var(--ap-nav) + var(--space-4)); }
  }
}