/* ---------- the Wedge app page, /app/, 2026-10-12 ----------
   src/pages/app.mjs draws it. The head is centred on the dusk band with a
   large glass window of the client home, then four client moments, each a
   promise beside the app showing it on home's dusk scene, then For agencies
   with the agency side as one wide window and three points, then MCP and
   integrations, then the shared closing. The app windows use the .gx glass
   base from site.css, everything here is .ap-. Nothing tilts or follows the
   pointer and nothing sits over the UI. Two windows play once as they come
   into view (the AI answer and the invite), keyed to motion.js marking their
   figure mo-in, so they show settled without it and under reduced motion. */

.ap { color: var(--pd-tx); letter-spacing: -.01em; }
.ap h1, .ap h2 { font-family: var(--disp); text-wrap: balance; }
.ap p { text-wrap: pretty; }

/* ---------- the head ---------- */
.ap-head { display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(88px, 9vw, 128px); text-align: center; }
.ap-head > * { max-width: none; }
.ap-head h1 { display: block; max-width: 14em; margin: 24px auto 0; }
.ap-head .lede { max-width: 44ch; margin: 22px auto 0; }
.ap-head .ctas { justify-content: center; margin-top: 36px; }
.ap-hero { width: 100%; margin: clamp(56px, 7vw, 88px) 0 0; }
.ap-win-hero { position: relative; border-radius: 24px; overflow: hidden; background: rgba(23, 23, 23, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .28); }
.ap-ci { width: 16px; height: 16px; margin-right: 8px; flex: none; }
.ap-hero figcaption { margin-top: 16px; color: rgba(255, 255, 255, .62); font-size: 13px; }

/* ---------- the moments ---------- */
.ap-sec { padding-top: clamp(112px, 12vw, 176px); }
.ap-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.ap-feat.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ap-feat.rev .ap-tx { order: 2; }
.ap-tx h2 { margin: 24px 0 0; max-width: 14em; color: var(--pd-tx); font-size: clamp(28px, 2.8vw, 38px); font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
.ap-line { margin: 20px 0 0; max-width: 36ch; color: var(--pd-mid); font-size: 16px; line-height: 1.6; }
.ap-tx-c { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ap-tx-c h2 { max-width: 18em; }
.ap-tx-c .ap-line { max-width: 46ch; }
.ap-tx-c .ctas { justify-content: center; margin-top: 32px; }
/* the agency points under the wide window, three quiet columns */
.ap-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; padding: 0; }
.ap-points li { display: flex; flex-direction: column; gap: 8px; }
.ap-points .ic { width: 22px; height: 22px; margin-bottom: 6px; color: var(--pd-tx); }
.ap-points b { color: var(--pd-tx); font-size: 16px; font-weight: 500; letter-spacing: -.015em; }
.ap-points span { max-width: 34ch; color: var(--pd-mid); font-size: 14.5px; line-height: 1.55; }
/* what connects today, a short tick list under the MCP line */
.ap-ticks { list-style: none; display: grid; gap: 12px; margin: 28px 0 0; padding: 0; }
.ap-ticks li { display: flex; align-items: flex-start; gap: 10px; color: var(--pd-mid); font-size: 15px; line-height: 1.45; }
.ap-ticks svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--pd-tx); }

/* a window on home's dusk scene, sinking into the scene's foot */
.ap-scene { position: relative; margin: 0; aspect-ratio: 7 / 6; border-radius: 24px; overflow: clip; background: #1b2228; box-shadow: inset 0 0 0 1px var(--pd-edge); }
.ap-bg, .ap-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.ap-bg img + img { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 49%, rgb(0 0 0 / .3) 53%, rgb(0 0 0 / .75) 58%, #000 64%); mask-image: linear-gradient(180deg, transparent 0, transparent 49%, rgb(0 0 0 / .3) 53%, rgb(0 0 0 / .75) 58%, #000 64%); }
.ap-scene .ap-win { position: absolute; left: 8%; right: 8%; top: 13%; bottom: -1px; overflow: hidden; border-radius: 20px 20px 0 0; background: rgba(23, 23, 23, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ap-scene figcaption { position: absolute; left: 16px; top: 14px; z-index: 1; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .72); font-size: 12px; line-height: 1.4; }
.ap-agency .ap-wide { aspect-ratio: 2 / 1; margin-top: 56px; }
.ap-scene.ap-team .ap-win { top: 24%; }
.ap-wide .ap-win { left: 7%; right: 7%; top: 11%; }

/* ---------- the app, the client's three places ---------- */
.ap-gx { flex-direction: column; }
.ap-bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--gx-line); }
.ap-brand { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--gx-tx); font-size: 15px; }
.ap-brand b { font-weight: 500; }
.ap-places { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); }
.ap-place { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 99px; color: var(--gx-dim); font-size: 12.5px; white-space: nowrap; }
.ap-place.is-on { background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); }
.ap-gx .gx-count { margin-left: 0; }
.ap-gx .gx-nav .gx-count { margin-left: auto; }
.ap-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.ap-gx .gx-tag.is-violet { background: rgba(170, 160, 255, .1); box-shadow: inset 0 0 0 1px rgba(170, 160, 255, .32); color: #c9c2ff; }
.ap-gx .gx-tag.is-red { background: rgba(255, 120, 120, .1); box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .32); color: #ffb0a8; }
.ap-body { flex: 1; min-height: 0; overflow: hidden; padding: 18px 22px; }
.ap-title { margin: 0 0 14px !important; color: var(--gx-tx); font: 400 22px/1.3 var(--disp); letter-spacing: -.02em; }
.ap-tabs { display: flex; gap: 20px; margin: -2px 0 16px; border-bottom: 1px solid var(--gx-line); }
.ap-tab { position: relative; display: flex; align-items: center; gap: 6px; padding-bottom: 10px; color: var(--gx-dim); font-size: 12.5px; white-space: nowrap; }
.ap-tab.is-on { color: var(--gx-tx); }
.ap-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; border-radius: 2px; background: var(--gx-tx); }
.ap-composer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; padding: 0 8px 0 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: var(--gx-faint); text-align: left; }
.ap-composer span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-send { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--gx-fill-2); color: var(--gx-mid); }
.ap-send .gx-ic { width: 15px; height: 15px; }
.ap-pn { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ap-pn b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.ap-pn span { color: var(--gx-dim); font-size: 11.5px; }

/* the home, Wedge AI in the middle */
.ap-home { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 660px; margin: 0 auto; padding: clamp(48px, 8cqi, 88px) 24px clamp(48px, 7cqi, 80px); text-align: center; }
.ap-hi { color: var(--gx-tx); font: 400 30px/1.25 var(--disp); letter-spacing: -.03em; }
.ap-ctx { margin-top: 8px !important; color: var(--gx-dim); font-size: 13px; }
.ap-home .ap-composer { margin-top: 28px; }
.ap-asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.ap-asks span { padding: 6px 12px; border-radius: 99px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-mid); font-size: 12px; }
.ap-wh { align-self: stretch; margin-top: 40px !important; text-align: left; }
.ap-cards { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; text-align: left; }
.ap-cards .gx-card > span { display: block; margin-top: 4px; font-size: 12px; }
.ap-cards b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* the project */
.ap-phases .gx-phase { grid-template-columns: 70px 1fr 52px; }
.ap-phases .gx-phase > span { display: flex; justify-content: flex-end; }
.ap-gx .gx-news > span, .ap-change > span { display: block; margin-top: 4px; font-size: 12px; }
.ap-gx .gx-news b, .ap-change b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-gx .gx-appr { margin-top: 10px; }
.ap-gx .ap-tabs + .gx-appr { margin-top: 0; }
.ap-gx .gx-appr p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; }
.ap-done .gx-note { margin-top: 8px; }
.ap-change { margin-top: 10px; padding: 14px 18px; }

/* Wedge AI, an answer and where it came from */
.ap-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; }
.ap-u { align-self: flex-end; max-width: 80%; }
.ap-u p { padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: rgba(255, 243, 240, .9); color: #111; font-size: 13px; }
.ap-a { display: flex; align-items: flex-start; gap: 10px; }
.ap-ab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ap-step { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-dim); font-size: 11.5px; }
.ap-step .gx-ic { width: 12px; height: 12px; color: #a3e7b4; }
.ap-think { position: absolute; top: 40px; left: 2px; display: flex; gap: 5px; opacity: 0; }
.ap-think i { width: 6px; height: 6px; border-radius: 50%; background: var(--gx-dim); }
.ap-ans { color: var(--gx-tx); font-size: 13.5px; line-height: 1.6; }
.ap-ans b { font-weight: 600; }
.ap-cite { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 1px; padding: 0 4px; border-radius: 5px; background: var(--gx-fill-2); color: var(--gx-mid); font-size: 10px; line-height: 1; vertical-align: 2px; }
.ap-src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ap-s { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 12px 7px 8px; border-radius: 10px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); }
.ap-s > i { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 6px; background: var(--gx-fill-2); color: var(--gx-mid); font-size: 10px; font-style: normal; }
.ap-s > span { display: flex; flex-direction: column; min-width: 0; }
.ap-s b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.ap-s small { color: var(--gx-faint); font-size: 10.5px; }
.ap-chat > .ap-composer { margin-top: auto; height: 46px; }

/* people */
.ap-invite { display: flex; align-items: center; gap: 8px; }
.ap-field { flex: 1; min-width: 0; display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); overflow: hidden; color: var(--gx-tx); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.ap-people { margin-top: 14px; padding: 2px 14px; }
.ap-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ap-person + .ap-person { border-top: 1px solid var(--gx-line); }

/* the agency side and its integrations */
.ap-gx-studio { flex-direction: row; }
.ap-side { flex: none; display: flex; flex-direction: column; gap: 2px; width: 172px; padding: 18px 10px; border-right: 1px solid var(--gx-line); background: rgba(255, 255, 255, .02); }
.ap-side .ap-brand { margin: 2px 0 16px 10px; }
.ap-set { margin-top: auto; }
.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ap-main .ap-body { padding: 22px 26px; }
.ap-table { margin-top: 0; padding: 0 16px; }
.ap-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) 96px minmax(0, 1fr) 52px; align-items: center; gap: 16px; min-height: 52px; }
.ap-tr + .ap-tr { border-top: 1px solid var(--gx-line); }
.ap-th { min-height: 36px; color: var(--gx-faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ap-th span:last-child, .ap-l { text-align: right; }
.ap-prog { display: flex; align-items: center; gap: 10px; }
.ap-prog .gx-bar { flex: 1; }
.ap-prog small { width: 28px; color: var(--gx-dim); font-size: 11.5px; text-align: right; }
.ap-l { color: var(--gx-mid); font-size: 12px; }
.ap-h0 { margin-top: 0 !important; }
.ap-code { margin-top: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-gx code { font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ap-tok .ap-tr { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); min-height: 46px; }
.ap-log .ap-tr { grid-template-columns: minmax(0, 1fr) auto; min-height: 50px; }
.ap-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(126, 234, 155, .1); color: #a3e7b4; }
.ap-ok .gx-ic { width: 12px; height: 12px; }
.ap-req { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* narrower windows, the bar tightens, columns fold */
@container gx (max-width: 600px) {
  .ap-cards { grid-template-columns: 1fr; }
  .ap-hi { font-size: 24px; }
  .ap-side { display: none; }
  .ap-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .ap-tr > :nth-child(3), .ap-tr > :nth-child(4) { display: none; }
  .ap-tok .ap-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .ap-main .ap-body { padding: 18px; }
}
@container gx (max-width: 440px) {
  .ap-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; height: 50px; padding: 0 12px; }
  .ap-places { justify-self: center; }
  .ap-brand b, .ap-end .gx-bell, .ap-place .gx-count { display: none; }
  .ap-place { height: 26px; padding: 0 10px; font-size: 11.5px; }
  .ap-body { padding: 14px; }
  .ap-tabs { gap: 14px; }
  .ap-tab { font-size: 11.5px; }
  .ap-home { padding: 32px 16px 16px; }
  .ap-hi { font-size: 21px; }
  .ap-ctx { font-size: 12px; }
  .ap-chat { gap: 12px; padding: 16px 14px 14px; }
  .ap-ans { font-size: 12.5px; }
  .ap-src { flex-direction: column; align-self: stretch; }
  .ap-gx .gx-stat span { font-size: 10px; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 900px) {
  .ap-feat { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ap-feat.rev { grid-template-columns: minmax(0, 1fr); }
  .ap-points { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .ap-feat.rev .ap-tx { order: 0; }
  .ap-scene { aspect-ratio: 4 / 5; border-radius: 20px; }
  .ap-scene .ap-win { left: 6%; right: 6%; top: 14%; border-radius: 16px 16px 0 0; }
  .ap-agency .ap-wide { aspect-ratio: 4 / 5; margin-top: 40px; }
  .ap-wide .ap-win { left: 6%; right: 6%; top: 14%; }
  .ap-scene.ap-team .ap-win { top: 20%; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .ap-scene, .ap-agency .ap-wide { aspect-ratio: 5 / 4; }
  .ap-scene .ap-win { left: 9%; right: 9%; top: 12%; }
}
@media (max-width: 600px) {
  .ap-head .ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .ap-win-hero { border-radius: 20px; }
}

/* ---------- the two that play ----------
   The question rises in, Wedge thinks for a moment, the step it took
   appears, the answer arrives word by word, then its sources. The invite
   button is pressed and the colleague joins the list. Once, as each comes
   into view, and only when motion.js is running */
@media (prefers-reduced-motion: no-preference) {
  html.mo-on .ap-ask :is(.ap-u, .ap-step, .ap-w, .ap-src), html.mo-on .ap-team .ap-join { opacity: 0; }
  html.mo-on .ap-ask.mo-in .ap-u { animation: ap-rise 500ms cubic-bezier(.22, 1, .36, 1) 500ms both; }
  html.mo-on .ap-ask.mo-in .ap-think { animation: ap-think 1100ms linear 1000ms both; }
  html.mo-on .ap-ask.mo-in .ap-think i { animation: ap-dot 550ms ease-in-out 1000ms 2 alternate both; }
  html.mo-on .ap-ask.mo-in .ap-think i:nth-child(2) { animation-delay: 1150ms; }
  html.mo-on .ap-ask.mo-in .ap-think i:nth-child(3) { animation-delay: 1300ms; }
  html.mo-on .ap-ask.mo-in .ap-step { animation: ap-rise 400ms cubic-bezier(.22, 1, .36, 1) 1900ms both; }
  html.mo-on .ap-ask.mo-in .ap-w { animation: ap-in 380ms ease-out calc(2200ms + var(--i) * 32ms) both; }
  html.mo-on .ap-ask.mo-in .ap-src { animation: ap-rise 500ms cubic-bezier(.22, 1, .36, 1) calc(2400ms + var(--n) * 32ms) both; }
  html.mo-on .ap-team.mo-in .ap-invite .gx-btn { animation: ap-press 260ms ease-out 1100ms; }
  html.mo-on .ap-team.mo-in .ap-join { animation: ap-rise 600ms cubic-bezier(.22, 1, .36, 1) 1400ms both; }
}
@keyframes ap-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes ap-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-think { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ap-dot { from { opacity: .35; translate: 0 0; } to { opacity: 1; translate: 0 -3px; } }
@keyframes ap-press { 50% { scale: .94; } }

/* ---------- Sightpane, a Wedge Studio product, 2026-10-13 ----------
   The Platform page presents Sightpane, its lockup on top and a quiet
   "A Wedge Studio product" pill under it. On sightpane.com (.ap-sp) the
   nav carries the lockup, so the head opens on the pill. Anchors from the
   sightpane.com nav land clear of the fixed bar */
.ap-lock { margin: 0 0 28px; line-height: 0; color: var(--pd-tx, var(--tx)); }
.ap-lockup { display: block; height: clamp(34px, 3.4vw, 44px); width: auto; }
.ap-head .ap-by + h1 { margin-top: 24px; }
.ap :is(#features, #agencies, #mcp, #faq) { scroll-margin-top: 96px; }
.ap-out { margin-left: 6px; }

/* ---------- the app as it is today, 2026-10-13 ----------
   Redrawn from app.sightpane.com/demo (client and agency views, dark). Each
   window lays the app out at its own size (--dw by --dh design pixels) and
   scales it to the window with a container unit, so nothing reflows and the
   proportions stay the app's. Phones get a narrower design without the
   sidebar, as the app's main column. src/pages/app.mjs draws them */
.pw-vp { position: relative; flex: 1; align-self: stretch; min-width: 0; overflow: hidden; }
.pw-vp.pw-hero { flex: none; width: 100%; aspect-ratio: 1240 / 860; }
.pw { position: absolute; left: 0; top: 0; width: var(--dw); height: var(--dh); transform-origin: 0 0; scale: tan(atan2(100cqw, var(--dw))); display: flex; color: var(--gx-mid); font: 400 14px/1.45 var(--sans); letter-spacing: -.005em; }
.pw p { margin: 0; }
.pw b { font-weight: 500; color: var(--gx-tx); }
.pw small { font-size: 12.5px; color: var(--gx-dim); }
.pw-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pw-app { display: flex; width: 100%; height: 100%; }
/* the sidebar */
.pw-side { flex: none; display: flex; flex-direction: column; width: 248px; padding: 22px 14px 18px; border-right: 1px solid var(--gx-line); }
.pw-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 22px 10px; color: var(--gx-tx); }
.pw-brand b { font: 500 23px/1 var(--disp); letter-spacing: -.035em; }
.pw-bm { width: 24px; height: 24px; flex: none; }
.pw-row { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--gx-mid); font-size: 14.5px; }
.pw-row.is-on { background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); }
.pw-home { height: 40px; margin-bottom: 18px; }
.pw-proj { display: grid; gap: 2px; margin: 0 12px 20px; }
.pw-proj b { font-size: 14.5px; }
.pw-proj small { font-size: 12px; }
.pw-proj .pw-bar { margin-top: 10px; }
.pw-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pw-bar > i { display: block; height: 100%; border-radius: inherit; background: #fff3f0; }
.pw-g { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; }
.pw-n { display: grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 99px; background: var(--gx-fill-2); color: var(--gx-mid) !important; font: 500 11px/1 var(--sans) !important; }
.pw-ir { gap: 12px; }
.pw-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gx-line); }
.pw-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #e5484d; }
.pw-me { height: 44px; }
.pw-av { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: #fff; font: 500 10px/1 var(--sans); font-style: normal; }
.pw-av.is-a { background: #8a7a64; } .pw-av.is-d { background: #7d6f86; } .pw-av.is-j { background: #6b8072; }
/* the main column */
.pw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 32px 40px; }
.pw-center { align-items: center; padding: 72px 64px 32px; }
.pw-center > * { width: 100%; max-width: 720px; }
.pw-hi { color: var(--gx-tx); font: 500 30px/1.2 var(--disp); letter-spacing: -.03em; text-align: center; }
.pw-sub { margin-top: 10px !important; color: var(--gx-dim); font-size: 15px; text-align: center; }
.pw-note { margin-top: 12px !important; max-width: 520px !important; }
.pw-ask { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 104px; margin-top: 28px; padding: 18px 10px 10px 22px; border-radius: 22px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: var(--gx-dim); font-size: 16px; text-align: left; }
.pw-ask-end { display: flex; align-items: center; justify-content: flex-end; gap: 16px; color: var(--gx-dim); }
.pw-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: var(--gx-mid); font-style: normal; }
.pw-scope { margin-right: auto; padding-left: 0; color: var(--gx-dim); font-size: 12.5px; }
.pw-agency .pw-ask { min-height: 96px; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pw-chips span { padding: 8px 14px; border-radius: 99px; background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font-size: 13px; }
.pw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.pw-stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); text-align: left; }
.pw-stat b { font: 400 22px/1.2 var(--disp); color: var(--gx-tx); }
.pw-stat.is-amber b { color: #f0c27b; }
.pw-stat.is-word b { color: var(--gx-mid); }
.pw-stat small { font-size: 13px; }
.pw-lh { display: flex; justify-content: space-between; margin: 22px 0 10px !important; padding: 0 4px; color: var(--gx-mid); font-size: 13.5px; }
.pw-lh span:last-child { color: var(--gx-dim); font-size: 13px; }
.pw-list, .pw-card { border-radius: 14px; background: var(--gx-fill); box-shadow: inset 0 0 0 1px var(--gx-edge); text-align: left; }
.pw-li { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 18px; }
.pw-li + .pw-li { border-top: 1px solid var(--gx-line); }
.pw-li > span { display: grid; gap: 1px; min-width: 0; }
.pw-li b { font-size: 14px; }
.pw-pip { width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.pw-pip.is-green { background: #6fd08c; } .pw-pip.is-amber { background: #f0c27b; } .pw-pip.is-red { background: #f08a7b; }
.pw-proj-row > span:first-of-type { flex: 1; }
.pw-proj-row .pw-bar { width: 72px; flex: none; }
.pw-pc { width: 34px; text-align: right; }
.pw-when { width: 150px; text-align: right; }
/* the moments, the main column of one screen */
.pw-col { padding: 36px 36px 0; }
.pw-title { margin-bottom: 18px !important; color: var(--gx-tx); font: 500 27px/1.2 var(--disp); letter-spacing: -.03em; }
.pw-tr { display: flex; align-items: center; justify-content: space-between; }
.pw-col .pw-lh:first-of-type { margin-top: 0 !important; }
.pw-card { padding: 16px 18px; }
.pw-card + .pw-card { margin-top: 10px; }
.pw-next { display: grid; gap: 2px; }
.pw-phases { display: grid; gap: 12px; }
.pw-ph { display: grid; grid-template-columns: 96px 1fr 100px; align-items: center; gap: 14px; }
.pw-ph b { font-size: 13.5px; }
.pw-ph small { text-align: right; }
.pw-ph.is-idle b { color: var(--gx-dim); }
.pw-ph.is-now small { color: var(--gx-tx); }
.pw-upd .pw-ut { display: flex; justify-content: space-between; gap: 12px; }
.pw-upd p { margin-top: 6px !important; color: var(--gx-dim); font-size: 13.5px; }
.pw-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: var(--gx-mid); font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pw-tag.is-amber { box-shadow: inset 0 0 0 1px rgba(240, 194, 123, .55); color: #f0c27b; }
.pw-tag.is-green { box-shadow: inset 0 0 0 1px rgba(111, 208, 140, .45); color: #8fdca6; }
.pw-tag.is-blue { box-shadow: inset 0 0 0 1px rgba(130, 180, 255, .5); color: #a9c8ff; }
.pw-appr { display: grid; gap: 12px; padding: 18px; }
.pw-at { display: flex; align-items: flex-start; gap: 14px; }
.pw-at b { flex: 1; font: 500 18px/1.3 var(--disp); letter-spacing: -.02em; }
.pw-thumb { position: relative; flex: none; width: 96px; height: 70px; border-radius: 6px; overflow: hidden; background: #f4efe8; }
.pw-thumb i { position: absolute; display: block; border-radius: 2px; }
.pw-thumb i:nth-child(1) { left: 8px; top: 8px; width: 46px; height: 4px; background: #33302c; }
.pw-thumb i:nth-child(2) { left: 8px; top: 18px; width: 34px; height: 3px; background: #9b948a; }
.pw-thumb i:nth-child(3) { left: 58px; top: 8px; width: 30px; height: 26px; border-radius: 4px; background: #e6a07c; }
.pw-thumb i:nth-child(4) { left: 0; right: 0; bottom: 0; height: 22px; border-radius: 0; background: #47566e; }
.pw-appr p { color: var(--gx-mid); font-size: 14.5px; }
.pw-links { display: flex; gap: 22px; color: var(--gx-tx); font-size: 14.5px; }
.pw-links > span { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.pw-by { display: flex; align-items: center; gap: 8px; }
.pw-by .pw-av { width: 18px; height: 18px; font-size: 8px; }
.pw-said { font-size: 12px !important; }
.pw-btns { display: flex; gap: 10px; margin-top: 4px; }
.pw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 26px; border-radius: 99px; background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font-size: 15px; }
.pw-btn.is-solid { background: #ece9e3; box-shadow: none; color: #17140f; }
.pw-tr .pw-btn { height: 38px; padding: 0 18px; font-size: 14px; }
.pw-hist { display: flex; align-items: flex-start; gap: 12px; }
.pw-hist > span:not(.pw-tag) { flex: 1; display: grid; gap: 2px; }
.pw-hist em { color: var(--gx-mid); font-size: 13.5px; font-style: normal; }
/* the assistant */
.pw-chat { gap: 0; }
.pw-ch { display: flex; align-items: center; gap: 22px; margin-bottom: 22px !important; color: var(--gx-dim); font-size: 13.5px; }
.pw-ch span { display: inline-flex; align-items: center; gap: 4px; }
.pw-ch b { font-size: 15px; }
.pw-u { align-self: flex-end; max-width: 80%; }
.pw-u p { padding: 10px 16px; border-radius: 16px; background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font-size: 15px; }
.pw-a { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; }
.pw-am { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gx-tx); }
.pw-ab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pw-ans { color: var(--gx-tx); font-size: 15.5px; line-height: 1.6; }
.pw-ul { margin: -4px 0 0; padding-left: 20px; color: var(--gx-tx); font-size: 15.5px; line-height: 1.85; }
.pw-cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; padding: 0 4px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: var(--gx-mid); font-size: 10.5px; line-height: 1; vertical-align: 2px; }
.pw-src { display: flex; align-items: center; gap: 18px; color: var(--gx-dim); font-size: 12.5px; }
.pw-src > span { display: inline-flex; align-items: center; gap: 6px; }
.pw-src .pw-ic { width: 13px; height: 13px; }
.pw-pill { padding: 5px 10px; border-radius: 99px; background: var(--gx-fill-2); color: var(--gx-mid); }
.pw-chat > .pw-ask { margin-top: auto; margin-bottom: 26px; }
/* messages */
.pw-mh { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pw-mh b { display: block; font: 500 21px/1.2 var(--disp); letter-spacing: -.025em; }
.pw-mm { width: 36px; height: 36px; flex: none; color: var(--gx-tx); }
.pw-mt { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; color: var(--gx-dim); font-size: 13.5px; }
.pw-mt > span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 99px; }
.pw-mt > span.is-on { background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); }
.pw-mt .pw-av { width: 20px; height: 20px; font-size: 8px; }
.pw-blue { width: 6px; height: 6px; border-radius: 50%; background: #7cb8ff; }
.pw-day { margin: 14px 0 6px !important; color: var(--gx-dim); font-size: 12px; text-align: center; }
.pw-m { display: flex; align-items: flex-end; gap: 10px; }
.pw-m > span { display: grid; justify-items: start; gap: 4px; max-width: 78%; }
.pw-m > span > small { padding-left: 2px; }
.pw-bub { padding: 9px 14px; border-radius: 16px; background: var(--gx-fill-2); box-shadow: inset 0 0 0 1px var(--gx-edge); color: var(--gx-tx); font-size: 15px; line-height: 1.45; }
.pw-re { margin-top: -2px; padding: 1px 6px; border-radius: 8px; background: var(--gx-fill-2); font-size: 12px; }
.pw-me-m { justify-content: flex-end; margin-top: 14px; }
.pw-me-m > span { justify-items: end; }
.pw-me-m .pw-bub { background: #ece9e3; box-shadow: none; color: #17140f; }
.pw-msgs > .pw-ask { margin-top: auto; margin-bottom: 26px; min-height: 0; flex-direction: row; align-items: center; padding: 8px 8px 8px 22px; }
/* integrations */
.pw-table { padding: 0 18px; }
.pw-tr2 { display: grid; grid-template-columns: minmax(0, 1.5fr) 80px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 58px; }
.pw-tr2 + .pw-tr2 { border-top: 1px solid var(--gx-line); }
.pw-tr2 > span:first-child { display: grid; gap: 1px; min-width: 0; }
.pw-tr2 b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.pw-th { min-height: 40px; color: var(--gx-faint); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pw code { font: 400 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gx-dim); }
.pw-mcp { display: grid; gap: 12px; padding: 18px; }
.pw-code { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--gx-edge); }
.pw-code code { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gx-tx); }
.pw-code small { color: var(--gx-mid); }
.pw-seg { display: flex; gap: 6px; }
.pw-seg span { padding: 7px 14px; border-radius: 99px; color: var(--gx-dim); font-size: 14px; }
.pw-seg .is-on { background: var(--gx-fill-2); color: var(--gx-tx); }
.pw-more { color: var(--gx-tx) !important; font-size: 13px !important; }
/* the wide agency window and the hero on phones, the main column only */
.ap-wide .pw-vp { align-self: stretch; }
@media (max-width: 600px) {
  .pw-vp.pw-hero { aspect-ratio: 560 / 760; }
  .pw-hero .pw, .pw-wide .pw { --dw: 560px !important; }
  .pw-hero .pw-side, .pw-wide .pw-side { display: none; }
  .pw-hero .pw-center, .pw-wide .pw-center { padding: 44px 24px 24px; }
  .pw-when { width: 90px; }
  .pw-proj-row .pw-bar { display: none; }
}
/* the pill's Wedge mark */
.ap-by { gap: 9px; }
.ap-bym { width: 16px; height: 16px; flex: none; color: var(--pd-tx); }
/* the moment that plays, Alex's reply goes out */
@media (prefers-reduced-motion: no-preference) {
  html.mo-on .ap-messages .pw-me-m, html.mo-on .ap-messages .pw-sent { opacity: 0; }
  html.mo-on .ap-messages.mo-in .pw-me-m { animation: ap-rise 600ms cubic-bezier(.22, 1, .36, 1) 900ms both; }
  html.mo-on .ap-messages.mo-in .pw-sent { animation: ap-in 400ms ease-out 1700ms both; }
}
/* the head, set exactly like home's hero heading (David 2026-10-13, "not properly bolded") */
.ap-head h1 { font-weight: var(--hero-fw); font-size: var(--hero-fs); line-height: var(--hero-lh); letter-spacing: var(--hero-ls); } /* the shared hero token, site.css */
.ap-head .lede { max-width: 50ch; }

/* sightpane.com's home, the studio's hero scene full width, then the story in the page column */
.ap-sp > .ap-rest { padding-top: 0; }
.ap-sp > .ap-rest > .ap-sec:first-child { padding-top: clamp(96px, 10vw, 144px); }
/* /platform/, one brand moment, 2026-10-13. The lockup small above the headline, the studio's relation a quiet line */
.ap-head .ap-lock { margin: 0 0 4px; }
.ap-head .ap-lockup { height: clamp(26px, 2.2vw, 30px); }
.ap-rel { margin: 20px 0 0 !important; color: var(--pd-dim, rgba(255, 255, 255, .55)); font-size: 13.5px; }
/* the sign in line under the buttons on /platform/, 2026-10-14. The head sits on the dark scene, so it reads the scene's text tones, not the page's */
.ap-head .ap-rel { color: var(--tx-mut); }
.ap-rel a { color: var(--tx-mid); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: color .15s; }
.ap-rel a:hover { color: var(--tx); }

/* ---------- the newest client app, captured (src/w-shots.mjs, 2026-10-15) ----------
   Every window on /platform/ is the real client side of the app, as on
   sightpane.com. The hero plays one change on the shared player
   (pages/sp-home.js), the frame below is sightpane.com's own (pages/sp-home.css
   .spt), the rest are stills whole and centred in the glass window */
.spt { position: relative; width: 100%; aspect-ratio: var(--ar); overflow: hidden; }
.spt-poster, .spt picture { display: block; width: 100%; height: auto; }
.spt picture img { width: 100%; height: auto; display: block; }
.spt-clip { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.spt-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.spt-host { position: absolute; inset: 0; }
.spt.is-live .spt-clip { opacity: 1; }
.spt.is-live :is(.spt-poster, picture) { visibility: hidden; }
@media (max-width: 600px) { .spt[style*="--ar-m"] { aspect-ratio: var(--ar-m); } }
.ap-win-hero.is-loop { padding: 8px; }
.ap-win-hero .spt { border-radius: 16px; }
.ap-scene.is-shot .ap-win.is-shot { left: 9%; right: 9%; top: 50%; bottom: auto; translate: 0 -50%; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .3); }
.ap-pscene { position: relative; aspect-ratio: 1; margin: 0 0 18px; border-radius: 20px; overflow: clip; background: #1b2228; box-shadow: inset 0 0 0 1px var(--pd-edge); }
.ap-pwin { position: absolute; left: 14%; right: 14%; top: 12%; bottom: -1px; overflow: hidden; border-radius: 18px 18px 0 0; background: rgba(23, 23, 23, .78); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ap-pwin img { display: block; width: 100%; height: auto; }
@media (min-width: 601px) and (max-width: 900px) { .ap-pscene { aspect-ratio: 5 / 4; } .ap-pwin { left: 22%; right: 22%; } }
@media (max-width: 809px) {
  /* the app's phone layout, shown whole at its own shape */
  .ap-scene.is-shot { aspect-ratio: auto; padding: 28px 0; }
  .ap-scene.is-shot .ap-win.is-shot { position: relative; inset: auto; translate: none; width: min(76%, 300px); margin: 0 auto; border-radius: 22px; }
}

/* /platform/'s head, 2026-10-15 per David ("I want them to cover it a bit, to show some depth"). The window
   stands in the scene as on home. The band's far and near hills stand on the window's foot (the head's bottom
   padding, --b-room, above the band's foot) and rise behind it, and one shrub band sits in front of the foot.
   The band's own shrubs give way to it. As on home (site.css .pd-front) the band is placed by its crowns at the
   window's two edges, where they stand highest over it, about 13 percent of the window's width (100cqw) above
   their middle, so they cover --cover of the window there (8 percent) and fall below the foot toward the middle.
   Its dark foot meets the hills' own dark below. Wider than the screen on phones, as the band's shrubs are.
   Only a head with a window (.ap-hero), so sightpane.com's Pricing and Product heads keep the shared band */
.ap-head:has(.ap-hero) .pd-bfront { display: none; }
.ap-head:has(.ap-hero) .pd-bfar { bottom: calc(var(--b-ext) + var(--b-room) + var(--wf0) * .3689 * -.113 - (var(--sw-f) - var(--wf0)) * .3689 * .9); }
.ap-head:has(.ap-hero) .pd-bnear { bottom: calc(var(--b-ext) + var(--b-room) + var(--wn0) * .3442 * -.2 - (var(--sw-n) - var(--wn0)) * .3442 * .85); }
.ap-head:has(.ap-hero) .pd-band .pd-li::after { height: 420px; }
.ap-head .ap-hero { position: relative; container-type: inline-size; --bw: 100vw; --bh: calc(var(--bw) / 5.049); --cover: 8%; --below: clamp(48px, 5vw, 96px); }
/* the band runs from its crowns' top to --below under the window's foot, where it has dissolved */
.ap-bush { position: absolute; z-index: 1; left: 50%; bottom: calc(-1 * var(--below)); width: 100vw; height: calc(var(--below) + var(--cover) + var(--bh) * .58 - 100cqw * .13); margin-left: -50vw; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgb(0 0 0 / .5) calc(var(--below) * .35), #000 calc(var(--below) - 6px)); mask-image: linear-gradient(to top, transparent 0, rgb(0 0 0 / .5) calc(var(--below) * .35), #000 calc(var(--below) - 6px)); }
.ap-bush img { position: absolute; left: 50%; top: 0; width: var(--bw); max-width: none; height: auto; margin-left: calc(var(--bw) / -2); }
/* light theme, the band's ramp to the cream page starts at the window's foot, so no dark run sits between the shrubs and the rose */
:root[data-theme="light"] .art-head.ap-head:has(> .pd-band):has(.ap-hero) { --fade: calc(var(--b-room) + var(--b-ext)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .art-head.ap-head:has(> .pd-band):has(.ap-hero) { --fade: calc(var(--b-room) + var(--b-ext)); } }
/* phones, the loop's request sheet rises from the window's foot, so the crowns only touch the frame there */
@media (max-width: 809px) { .ap-head .ap-hero { --bw: calc(100vw + 330px); --cover: 18px; } }
/* 601 to 809 the window shows the app's desktop capture across the column (the loops switch to the phone layout at 600, critic B-P2-4) */