/* ---------- 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: 500; font-size: clamp(40px, 3.89vw, 56px); line-height: 1.3; letter-spacing: -.04em; }
.ap-head .lede { max-width: 50ch; }
@media (max-width: 600px) { .ap-head h1 { font-size: 36px; line-height: 46.8px; } }
/* 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; }