/* ---------- sightpane.com/product/, 2026-10-13 ----------
   src/pages/sp-product.mjs draws it, on top of studio.css and app.css (the
   .ap head and chips). The head on the dusk band with every feature listed
   by group, then one section per feature on one grid, the title on the
   left and the real app on the right, sinking into home's dusk scene. The
   For agencies group sits on a calm dark band. Everything here is .sx-.

   The windows are the app's dark theme, its own tokens (client/src/styles/
   tokens.css) at about 0.8 of the app's size. Each plays once as motion.js
   marks its figure mo-in, keyed to html.mo-on, the markup is the resting
   state. No gradients on anything new, flat fills and soft layered
   shadows only. */

.sx { --sx-gap: clamp(104px, 10vw, 152px); --sx-col: clamp(40px, 4.4vw, 64px); }

/* ---------- the head ---------- */
.sx-head-top .pd-chip + h1 { margin-top: 24px; }
.sx-head-top h1 { max-width: 12em; }
.sx-index { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; width: 100%; max-width: 760px; margin: clamp(64px, 7vw, 88px) auto 0; text-align: left; }
.sx-ig > p { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); font-size: 12.5px; letter-spacing: 0; }
.sx-ig ul { list-style: none; display: grid; gap: 10px 32px; margin: 0; padding: 0; }
.sx-ig:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-ig a { color: rgba(255, 255, 255, .86); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color 250ms cubic-bezier(.22, 1, .36, 1); }
.sx-ig a:hover { color: #fff3f0; }

/* ---------- the groups and sections, one grid ---------- */
.sx-group { position: relative; }
.sx-gl { display: flex; align-items: center; gap: 20px; margin: 0; padding-top: var(--sx-gap); color: var(--pd-dim); font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.sx-gl::after { content: ''; flex: 1; height: 1px; background: var(--pd-edge); }
.sx-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sx-col); align-items: center; padding-top: var(--sx-gap); scroll-margin-top: calc(128px - var(--sx-gap)); } /* the section's heading lands under the nav, its top padding scrolls past */
.sx-gl + .sx-sec { padding-top: 72px; }
.sx-group:first-of-type > .sx-gl { padding-top: 32px; }
.sx-tx { min-width: 0; }
.sx-tx h2 { margin: 22px 0 0; color: var(--pd-tx); font-size: clamp(26px, 2.5vw, 34px); font-weight: 500; line-height: 1.24; letter-spacing: -.035em; text-wrap: balance; }
.sx-line { margin: 18px 0 0; max-width: 32ch; color: var(--pd-mid); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

/* the agencies, on a calm dark band edge to edge (.region clips the overflow) */
.sx-group.is-dark { --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .8); --pd-dim: rgba(255, 255, 255, .6); --pd-chip: rgba(255, 255, 255, .07); --pd-edge: rgba(255, 255, 255, .14); margin-top: var(--sx-gap); padding-bottom: var(--sx-gap); color: rgba(255, 255, 255, .8); }
.sx-group.is-dark::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: #12171d; }
.sx-group.is-dark .sx-gl { padding-top: var(--sx-gap); }
.sx-group.is-dark .pd-chip { color: #fff3f0; }
.sx { isolation: isolate; }

/* ---------- a window on home's dusk scene ---------- */
.sx-fig { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: clip; background: #1b2228; box-shadow: inset 0 0 0 1px var(--pd-edge), 0 1px 2px rgba(0, 0, 0, .06), 0 18px 48px -12px rgba(0, 0, 0, .18); }
.sx-bg, .sx-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.sx-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%); }

/* the app's dark tokens */
.sx-win, .sx-entry {
  --a-tx: #fff3f0; --a-mid: rgba(255, 255, 255, .8); --a-dim: rgba(255, 255, 255, .6); --a-faint: rgba(255, 255, 255, .5);
  --a-fill: rgba(255, 255, 255, .045); --a-fill-h: rgba(255, 255, 255, .075); --a-fill-2: rgba(255, 255, 255, .1);
  --a-edge: rgba(255, 255, 255, .1); --a-edge-2: rgba(255, 255, 255, .16); --a-line: rgba(255, 255, 255, .08);
  --a-blue: #a9d8ec; --a-blue-bg: rgba(126, 196, 227, .1); --a-blue-edge: rgba(126, 196, 227, .3);
  --a-amber: #f2c58a; --a-amber-bg: rgba(242, 183, 108, .1); --a-amber-edge: rgba(242, 183, 108, .32);
  --a-green: #a3e7b4; --a-green-bg: rgba(126, 234, 155, .08); --a-green-edge: rgba(126, 234, 155, .3);
  --a-red: #ffb4a6; --a-red-bg: rgba(255, 120, 100, .1); --a-red-edge: rgba(255, 150, 130, .5);
  --a-violet: #c9bdff; --a-violet-bg: rgba(160, 130, 255, .1); --a-violet-edge: rgba(160, 130, 255, .32);
  --a-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 12px; line-height: 1.45; letter-spacing: -.005em; color: var(--a-mid); text-align: left;
  -webkit-font-smoothing: antialiased;
}
.sx-win {
  position: absolute; left: 6%; right: 6%; top: 9%; bottom: -1px; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; container: sxw / inline-size;
  border-radius: 18px 18px 0 0; background: rgba(17, 17, 19, .8); -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  box-shadow: inset 0 0 0 1px var(--a-edge), 0 2px 6px rgba(0, 0, 0, .12), 0 24px 60px -10px rgba(0, 0, 0, .35);
}
.sx-win::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; z-index: 3; background: #fff3f0; opacity: .33; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); pointer-events: none; }
.sx-win p, .sx-entry p { margin: 0; }
.sx-win b, .sx-entry b { color: var(--a-tx); font-weight: 500; }
.sx-ic { width: 14px; height: 14px; flex: none; }
.sx-mark { width: 16px; height: 16px; flex: none; color: var(--a-tx); }

/* the sidebar, the same for clients and the studio */
.sx-side { display: flex; flex-direction: column; gap: 1px; width: 172px; min-width: 0; min-height: 0; overflow: hidden; padding: 16px 9px 10px; border-right: 1px solid var(--a-line); background: rgba(255, 255, 255, .02); }
.sx-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 16px 8px; color: var(--a-tx); font-size: 14px; }
.sx-brand b { letter-spacing: -.015em; }
.sx-nav { position: relative; display: flex; align-items: center; gap: 9px; flex: none; min-height: 29px; padding: 0 9px; border-radius: 9px; color: var(--a-dim); font-size: 12px; white-space: nowrap; }
.sx-nav > span:not(.sx-av) { flex: 1; min-width: 0; overflow: hidden;  }
.sx-nav.is-plain { min-height: 25px; }
.sx-nav.is-on { background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-tx); }
.sx-nav.is-gap { margin-top: 7px; }
.sx-nav.is-line { margin-top: 15px; }
.sx-nav.is-line::before { content: ''; position: absolute; top: -8px; left: 9px; right: 9px; height: 1px; background: var(--a-line); }
.sx-count { display: inline-grid; place-items: center; flex: none; min-width: 15px; height: 15px; margin-left: auto; padding: 0 4px; border-radius: 8px; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-mid) !important; font: 500 9px/1 Inter, system-ui, sans-serif !important; font-variant-numeric: tabular-nums; }
.sx-count.is-n { margin-left: 4px; }
.sx-pblock { display: grid; gap: 2px; margin: 6px 0 8px; padding: 7px 9px 9px; }
.sx-pblock b { overflow: hidden; font-size: 12px; white-space: nowrap;  }
.sx-pblock small { color: var(--a-faint); font-size: 10px; }
.sx-pblock.is-co { display: flex; align-items: flex-start; gap: 8px; margin-top: 0; }
.sx-pblock.is-co > span:not(.sx-co) { display: grid; flex: 1; gap: 2px; min-width: 0; }
.sx-chev { width: 12px; height: 12px; margin-top: 2px; color: var(--a-faint); }
.sx-bar { position: relative; display: block; height: 2px; margin-top: 5px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sx-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--a-tx); transform-origin: 0 50%; }
.sx-back { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; height: 26px; margin: 0 0 12px 1px; padding: 0 8px; color: var(--a-dim); font-size: 12px; }
.sx-back .sx-ic { width: 13px; height: 13px; transform: scaleX(-1); }
.sx-foot { display: grid; gap: 1px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--a-line); }
.sx-dot { width: 6px; height: 6px; flex: none; margin-left: auto; border-radius: 50%; background: #ff3b54; }

/* the main column */
.sx-main { grid-column: -2 / -1; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.sx-body { padding: 24px 26px 20px; }
.sx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 14px; }
.sx-title { color: var(--a-tx); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.sx-lede { margin: -6px 0 4px !important; color: var(--a-dim); font-size: 12px; }
.sx-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 8px; }
.sx-sh > span { color: var(--a-tx); font-size: 12.5px; font-weight: 500; }
.sx-sh small { color: var(--a-dim); font-size: 10.5px; }
.sx-head + .sx-sh { margin-top: 4px; }
.sx-card { padding: 14px 16px; border-radius: 12px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-list { border-radius: 12px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); overflow: hidden; }
.sx-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; }
.sx-row + .sx-row, .sx-row + .sx-swap, .sx-swap + .sx-row { border-top: 1px solid var(--a-line); }
.sx-rt { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; }
.sx-rt b, .sx-rt small { overflow: hidden; white-space: nowrap;  }
.sx-rt b { font-size: 12px; }
.sx-rt small { color: var(--a-dim); font-size: 10.5px; }
.sx-lead { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-mid); }
.sx-lead .sx-ic { width: 12px; height: 12px; }
.sx-go { width: 12px; height: 12px; color: var(--a-faint); }
.sx-pt { width: 6px; height: 6px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.sx-pt.is-red { background: var(--a-red); }
.sx-pt.is-amber { background: var(--a-amber); }
.sx-pt.is-green { display: none; }
.sx-meta { display: flex; align-items: center; gap: 6px; color: var(--a-faint); font-size: 10.5px; }
.sx-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-tag { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 17px; padding: 0 7px; border-radius: 99px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-dim); font: 500 8px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sx-tag > i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.sx-tag.is-blue { background: var(--a-blue-bg); box-shadow: inset 0 0 0 1px var(--a-blue-edge); color: var(--a-blue); }
.sx-tag.is-amber { background: var(--a-amber-bg); box-shadow: inset 0 0 0 1px var(--a-amber-edge); color: var(--a-amber); }
.sx-tag.is-green { background: var(--a-green-bg); box-shadow: inset 0 0 0 1px var(--a-green-edge); color: var(--a-green); }
.sx-tag.is-red { background: var(--a-red-bg); box-shadow: inset 0 0 0 1px var(--a-red-edge); color: var(--a-red); }
.sx-tag.is-violet { background: var(--a-violet-bg); box-shadow: inset 0 0 0 1px var(--a-violet-edge); color: var(--a-violet); }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 30px; padding: 0 15px; border: 1px solid var(--a-edge); border-radius: 99px; background: var(--a-fill-2); color: var(--a-tx); font-size: 12px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.sx-btn .sx-ic { width: 12px; height: 12px; }
.sx-btn.is-primary { border-color: #fff3f0; background: rgba(255, 255, 255, .85); color: #000; }
.sx-btn.is-ghost { border-color: transparent; background: transparent; color: var(--a-mid); }
.sx-btn.is-sm { height: 26px; padding: 0 11px; font-size: 11px; }
.sx-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.sx-seg > span { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 99px; color: var(--a-dim); font-size: 11.5px; white-space: nowrap; }
.sx-seg > span.is-on { background: var(--a-fill-2); color: var(--a-tx); }
.sx-seg.is-box { padding: 2px; border-radius: 99px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-seg.is-box > span { height: 20px; padding: 0 9px; font-size: 10.5px; }
.sx-links-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; color: var(--a-mid); font-size: 11.5px; }
.sx-links-row > span { display: inline-flex; align-items: center; gap: 7px; }
.sx-links-row .sx-ic { width: 12px; height: 12px; color: var(--a-dim); }
.sx-toast { position: absolute; left: 50%; bottom: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 99px; background: rgba(23, 23, 23, .94); box-shadow: inset 0 0 0 1px var(--a-edge-2), 0 12px 32px rgba(0, 0, 0, .4); color: var(--a-tx); font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: 0; translate: -50% 8px; }
.sx-toast .sx-ic { width: 12px; height: 12px; color: var(--a-green); }

/* text that runs long fades out at its edge, never an ellipsis */
.sx-rt b, .sx-rt small, .sx-pblock b, .sx-pc-note, .sx-pc-h small, .sx-tk > small, .sx-code code, .sx-stats small, .sx-evh b { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.sx-prop-done .sx-rt small, .sx-way .sx-rt small, .sx-entry .sx-rt b { -webkit-mask-image: none; mask-image: none; }

/* people and company marks, flat tones in place of the demo's photos and logos */
.sx-av { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; color: rgba(0, 0, 0, .72); font: 600 7px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; }
.sx-av.is-a { background: #cdb79a; } .sx-av.is-b { background: #a9bfae; } .sx-av.is-c { background: #b9b2d6; } .sx-av.is-d { background: #d2a9ae; }
.sx-av.is-e { background: #c7b0d6; } .sx-av.is-f { background: #9fb8cf; } .sx-av.is-g { background: #d6b597; }
.sx-me .sx-av { width: 20px; height: 20px; }
.sx-co { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 5px; overflow: hidden; }
.sx-co > i { position: absolute; }
.sx-co.is-acme { background: #6c7f9b; }
.sx-co.is-acme > i { top: 4px; width: 10px; height: 10px; border-radius: 50%; }
.sx-co.is-acme > i:first-child { left: 3px; background: #1d2230; }
.sx-co.is-acme > i:last-child { left: 6px; background: #e6a4a0; }
.sx-co.is-harbor { background: #fbf1e4; }
.sx-co.is-harbor > i { left: 4px; height: 2px; border-radius: 1px; background: #8a5a3a; }
.sx-co.is-harbor > i:first-child { top: 5px; width: 10px; } .sx-co.is-harbor > i:last-child { top: 9px; width: 7px; box-shadow: 0 4px 0 #8a5a3a; }
.sx-co.is-north { background: #fbfbfb; }
.sx-co.is-north > i { left: 4px; height: 2px; border-radius: 1px; background: #2d6ea8; }
.sx-co.is-north > i:first-child { top: 5px; width: 10px; } .sx-co.is-north > i:last-child { top: 9px; width: 6px; box-shadow: 0 4px 0 #59a2d6; }
.sx-co.is-contoso { background: #1f1f22; box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-co.is-contoso > i { top: 7px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.sx-co.is-contoso > i:first-child { left: 4px; } .sx-co.is-contoso > i:last-child { left: 10px; }

/* the little pictures, the demo's own art drawn flat: a site's hero, a sunset photo, a sheet, a page */
.sx-art-home, .sx-art-menu { position: relative; overflow: hidden; background: #fff; }
.sx-art-home > i, .sx-art-menu > i { position: absolute; }
.sx-art-home > i:nth-child(1), .sx-art-menu > i:nth-child(1) { left: 0; right: 0; top: 18%; height: 44%; background: #c48f95; }
.sx-art-home > i:nth-child(2), .sx-art-menu > i:nth-child(2) { left: 10%; right: 54%; bottom: 10%; height: 18%; border-radius: 2px; background: #6c7f9b; box-shadow: 30px 0 0 #f0c39f; }
.sx-art-home > i:nth-child(3), .sx-art-menu > i:nth-child(3) { left: 32%; right: 32%; top: 32%; height: 6%; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.sx-art-patio { position: relative; overflow: hidden; background: #c9876f; }
.sx-art-patio > i { position: absolute; border-radius: 50%; }
.sx-art-patio > i:nth-child(1) { left: 46%; top: 30%; width: 22%; aspect-ratio: 1; background: #f7d9b0; filter: blur(2px); }
.sx-art-patio > i:nth-child(2) { left: 0; right: 0; top: 56%; height: 14%; border-radius: 0; background: #9a6a6e; box-shadow: 0 -8px 0 #b97f78; }
.sx-art-patio > i:nth-child(3) { left: 0; right: 0; bottom: 0; height: 30%; border-radius: 0; background: #3f3239; }
.sx-art-csv { display: grid; place-items: center; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-art-csv::after { content: 'CSV'; color: var(--a-mid); font: 600 7px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; }
.sx-art-csv > i, .sx-art-pdf > i { display: none; }
.sx-art-pdf { position: relative; background: #fbfbfb; }
.sx-art-pdf::before, .sx-art-pdf::after { content: ''; position: absolute; left: 22%; right: 22%; height: 2px; border-radius: 1px; background: #2b2f38; }
.sx-art-pdf::before { top: 26%; box-shadow: 0 5px 0 #c9ccd2, 0 9px 0 #c9ccd2; } .sx-art-pdf::after { top: 62%; right: 40%; background: #c9ccd2; box-shadow: 0 4px 0 #c9ccd2; }
.sx-art-harbor { position: relative; overflow: hidden; background: #fbf3e8; }
.sx-art-harbor > i { position: absolute; }
.sx-art-harbor > i:nth-child(1) { left: 0; right: 0; top: 0; height: 58%; background: #9b6a4f; }
.sx-art-harbor > i:nth-child(2) { left: 30%; right: 30%; top: 22%; height: 6%; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.sx-art-harbor > i:nth-child(3) { left: 8%; right: 62%; bottom: 12%; height: 18%; border-radius: 2px; background: #f0d7b4; box-shadow: 46px 0 0 #f0d7b4, 92px 0 0 #f0d7b4; }
.sx-art-contoso { position: relative; overflow: hidden; background: #3f6b52; }
.sx-art-contoso > i { position: absolute; border-radius: 50%; }
.sx-art-contoso > i:nth-child(1) { left: 6%; top: -10%; width: 40%; aspect-ratio: 1; background: #8fb89a; filter: blur(6px); opacity: .7; }
.sx-art-contoso > i:nth-child(2) { right: 4%; top: 6%; width: 30%; aspect-ratio: 1; background: #a8c9ad; filter: blur(6px); opacity: .6; }
.sx-art-contoso > i:nth-child(3) { left: 14%; right: 14%; top: 48%; height: 22%; border-radius: 4px; background: #c8dccb; box-shadow: 0 0 0 0 transparent; opacity: .85; }
.sx-art-north { position: relative; overflow: hidden; background: #eef3f8; }
.sx-art-north > i { position: absolute; }
.sx-art-north > i:nth-child(1) { left: 8%; top: 14%; width: 38%; height: 7%; border-radius: 2px; background: #1e2b3c; box-shadow: 0 9px 0 #8aa0b8; }
.sx-art-north > i:nth-child(2) { right: 7%; top: 12%; width: 38%; height: 46%; border-radius: 3px; background: #7ea6c7; }
.sx-art-north > i:nth-child(3) { left: 8%; right: 60%; bottom: 12%; height: 14%; border-radius: 2px; background: #cfe0ee; box-shadow: 42px 0 0 #cfe0ee, 84px 0 0 #cfe0ee; }

/* Home */
.sx-home { display: flex; flex-direction: column; align-items: center; max-width: 520px; margin: 0 auto; padding: 40px 26px 24px; text-align: center; }
.sx-hi { color: var(--a-tx); font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; }
.sx-ctx { margin-top: 6px !important; color: var(--a-dim); font-size: 11.5px; line-height: 1.5; text-wrap: balance; }
.sx-compose { position: relative; width: 100%; height: 66px; margin-top: 20px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--a-edge-2); text-align: left; }
.sx-ph, .sx-typed { position: absolute; left: 15px; top: 13px; font-size: 12.5px; white-space: nowrap; }
.sx-ph { color: var(--a-faint); opacity: 0; }
.sx-typed { color: var(--a-tx); }
.sx-ctl { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 10px; color: var(--a-faint); }
.sx-ctl .sx-ic { width: 12px; height: 12px; }
.sx-send { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px var(--a-edge); color: #000; }
.sx-send .sx-ic { width: 12px; height: 12px; }
.sx-asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.sx-asks > span { padding: 5px 10px; border-radius: 99px; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-tx); font-size: 10.5px; }
.sx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 14px; text-align: left; }
.sx-stats > span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-stats b { font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.sx-stats b.is-amber { color: var(--a-amber); }
.sx-stats small { overflow: hidden; color: var(--a-dim); font-size: 10px; white-space: nowrap;  }
.sx-home .sx-sh { align-self: stretch; margin-top: 16px; }
.sx-home .sx-list { align-self: stretch; text-align: left; }
.sx-home .sx-row { min-height: 42px; }
.sx-compose-sm { height: 40px; margin-top: auto; border-radius: 20px; }
.sx-compose-sm .sx-ph { top: 50%; translate: 0 -50%; opacity: 1; }
.sx-compose-sm .sx-ctl { bottom: 50%; translate: 0 50%; right: 7px; }
.sx-compose-sm .sx-send { background: var(--a-fill-2); color: var(--a-mid); }

/* Timeline */
.sx-track { position: relative; padding: 0 12px; }
.sx-tr { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 42px; }
.sx-tr + .sx-tr { border-top: 1px solid var(--a-line); }
.sx-tr-h { min-height: 30px; }
.sx-tr .sx-rt small { font-size: 9.5px; }
.sx-cols, .sx-lane { position: relative; display: block; height: 100%; min-height: 20px; }
.sx-cols > i { position: absolute; left: var(--x); top: 50%; translate: -50% -50%; color: var(--a-faint); font: 500 7.5px/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sx-cols > i:first-child { translate: 0 -50%; }
.sx-cols > i.is-today { color: var(--a-tx); }
.sx-cols > i.is-launch { color: var(--a-green); }
.sx-span { position: absolute; left: var(--a); width: calc(var(--z) - var(--a)); top: 50%; height: 14px; translate: 0 -50%; border-radius: 99px; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); overflow: hidden; }
.sx-span > i { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .26); transform-origin: 0 50%; }
.sx-span.is-done > i { background: rgba(126, 234, 155, .16); }
.sx-span > em { position: absolute; left: 7px; top: 50%; translate: 0 -50%; color: var(--a-tx); font: 500 8px/1 Inter, system-ui, sans-serif; font-style: normal; }
.sx-today, .sx-launch { position: absolute; top: 30px; bottom: 8px; left: calc(124px + (100% - 136px) * var(--x)); width: 0; border-left: 1px dashed rgba(255, 255, 255, .28); }
.sx-launch { border-left: 1px solid rgba(126, 234, 155, .55); }

/* Approvals */
.sx-appr { padding: 14px 16px 16px; }
.sx-appr-top { display: flex; align-items: flex-start; gap: 10px; }
.sx-appr-top b { flex: 1; min-width: 0; padding-top: 2px; font-size: 14px; letter-spacing: -.015em; }
.sx-thumb { width: 56px; height: 40px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-appr p { margin: 10px 0 6px !important; color: var(--a-mid); font-size: 12px; line-height: 1.5; }
.sx-appr .sx-acts { margin-top: 12px; }
.sx-appr .sx-btn { height: 34px; padding: 0 18px; font-size: 12.5px; }
.sx-list .sx-row > .sx-av { width: 24px; height: 24px; font-size: 8px; }

/* Preview */
.sx-pv { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; align-items: start; }
.sx-frame { overflow: hidden; border-radius: 10px; background: #1b1b1d; box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-fbar { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; }
.sx-fbar > i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.sx-fbar > span { flex: 1; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: var(--a-dim); font-size: 8px; }
.sx-site { background: #fff; }
.sx-snav { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 10px; }
.sx-snav > i { width: 30px; height: 4px; border-radius: 2px; background: #2b3140; }
.sx-snav > span { display: flex; align-items: center; gap: 5px; }
.sx-snav > span > i { width: 13px; height: 3px; border-radius: 2px; background: #d9dbe0; }
.sx-snav > span > b { width: 22px; height: 7px; border-radius: 4px; background: #d6969a; }
.sx-shero { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; height: 92px; overflow: hidden; background: #b88790; }
.sx-bk { position: absolute; border-radius: 50%; background: #f3c9a6; filter: blur(7px); opacity: .55; }
.sx-bk.a { left: 6%; top: 40%; width: 46px; height: 46px; } .sx-bk.b { left: 52%; top: -10%; width: 60px; height: 60px; } .sx-bk.c { right: 4%; top: 30%; width: 40px; height: 40px; }
.sx-shero > span { position: relative; width: 44%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .92); }
.sx-shero > span + span { width: 32%; height: 2px; background: rgba(255, 255, 255, .6); }
.sx-shero > b { position: relative; width: 38px; height: 10px; margin-top: 4px; border-radius: 5px; background: #fff; }
.sx-pin { position: absolute; right: 26%; top: 18%; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 9px 9px 9px 2px; background: #fff; box-shadow: 0 0 0 1.5px #17140f, 0 4px 10px rgba(0, 0, 0, .25); color: #17140f; font: 600 9px/1 Inter, system-ui, sans-serif; font-style: normal; }
.sx-scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.sx-scards > i { height: 28px; border-radius: 4px; background: #6c7f9b; }
.sx-scards > i:nth-child(2) { background: #f0c39f; }
.sx-pins-h { margin: 4px 0 8px !important; color: var(--a-faint); font: 500 8px/1.3 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sx-pc { display: flex; gap: 8px; padding: 10px; }
.sx-num { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--a-fill-2); color: var(--a-tx); font-size: 8.5px; }
.sx-pc > span { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.sx-pc p { color: var(--a-tx); font-size: 10.5px; line-height: 1.4; }
.sx-pc small { color: var(--a-faint); font-size: 9px; }
.sx-pc .sx-tag { height: 15px; padding: 0 5px; font-size: 7px; }

/* Requests */
.sx-w-req .sx-seg { margin: 16px 0 8px; }
.sx-reqs .sx-row, .sx-w-req .sx-row { min-height: 48px; }

/* Messages, the studio's side */
.sx-thread { display: flex; flex-direction: column; height: 100%; padding-bottom: 14px; }
.sx-thread .sx-head { margin-bottom: 10px; }
.sx-convo { display: flex; align-items: center; gap: 10px; }
.sx-convo .sx-co { width: 28px; height: 28px; border-radius: 8px; }
.sx-convo .sx-co > i { top: 7px; width: 15px; height: 15px; }
.sx-convo .sx-co > i:first-child { left: 4px; } .sx-convo .sx-co > i:last-child { left: 9px; }
.sx-convo .sx-rt b { font-size: 15px; letter-spacing: -.02em; }
.sx-people { display: flex; gap: 4px; margin: 10px 0 4px; }
.sx-people > span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 6px; border-radius: 99px; color: var(--a-dim); font-size: 11px; }
.sx-people > span.is-on { background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-tx); }
.sx-people .sx-ic { width: 12px; height: 12px; }
.sx-people .sx-av { width: 15px; height: 15px; font-size: 6px; }
.sx-msgs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sx-day { align-self: center; color: var(--a-faint); font-size: 9.5px; }
.sx-them { display: flex; align-items: flex-end; gap: 7px; max-width: 80%; }
.sx-them > span { display: grid; gap: 3px; }
.sx-them small { margin-left: 2px; color: var(--a-faint); font-size: 9.5px; }
.sx-them p, .sx-me-b p { padding: 8px 12px; border-radius: 14px; font-size: 11.5px; line-height: 1.45; }
.sx-them p { justify-self: start; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-tx); }
.sx-me-b { align-self: flex-end; max-width: 78%; }
.sx-me-b p { background: rgba(255, 243, 240, .86); color: #111; }
.sx-seen { display: flex; align-items: center; align-self: flex-end; gap: 5px; color: var(--a-faint); font-size: 9.5px; }
.sx-seen .sx-av { width: 12px; height: 12px; font-size: 5px; }
.sx-thread .sx-compose-sm { margin-top: 14px; }

/* Updates */
.sx-w-upd .sx-seg { margin: -2px 0 10px; }
.sx-feed { position: relative; display: grid; }
.sx-feed::before { content: ''; position: absolute; left: 12px; top: 14px; bottom: 0; width: 1px; background: var(--a-line); }
.sx-ev { position: relative; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 11px; padding: 9px 0 10px; }
.sx-evd { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #1c1c1f; box-shadow: inset 0 0 0 1px var(--a-edge-2); color: var(--a-mid); }
.sx-evd .sx-ic { width: 11px; height: 11px; }
.sx-ev.is-update .sx-evd { background: #fff3f0; box-shadow: none; color: #111; }
.sx-evc { display: grid; gap: 4px; min-width: 0; padding-top: 3px; }
.sx-evh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sx-evh b { overflow: hidden; font-size: 12.5px; white-space: nowrap;  }
.sx-evh time { flex: none; color: var(--a-faint); font-size: 10px; }
.sx-ev .sx-meta .sx-av { width: 14px; height: 14px; font-size: 5.5px; }
.sx-evb { margin-top: 2px !important; color: var(--a-mid); font-size: 12px; line-height: 1.5; }
.sx-follow { display: grid; gap: 5px; margin-top: 6px; padding-left: 12px; border-left: 1px solid var(--a-edge-2); overflow: hidden; }
.sx-follow p { color: var(--a-mid); font-size: 12px; line-height: 1.5; }
.sx-follow small { display: flex; align-items: center; gap: 6px; color: var(--a-faint); font-size: 10.5px; }
.sx-follow .sx-av { width: 14px; height: 14px; font-size: 5.5px; }
.sx-q { padding-left: 10px; border-left: 1px solid var(--a-line); color: var(--a-mid); font-size: 11px; }

/* Files and the viewer */
.sx-fthumb { position: relative; width: 30px; height: 30px; flex: none; border-radius: 6px; overflow: hidden; }
.sx-dl { width: 13px; height: 13px; color: var(--a-faint); }
.sx-file { min-height: 50px; }
.sx-drop { transition: box-shadow 250ms var(--a-ease); }
.sx-drag { position: absolute; z-index: 3; left: 58%; top: 60%; width: 72px; height: 52px; border-radius: 8px; box-shadow: 0 0 0 2px #fff3f0, 0 14px 30px rgba(0, 0, 0, .45); opacity: 0; rotate: -6deg; pointer-events: none; }
.sx-viewer { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: rgba(10, 10, 11, .97); opacity: 0; visibility: hidden; }
.sx-vbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--a-line); }
.sx-vbar > span:first-child { display: grid; gap: 1px; min-width: 0; }
.sx-vbar b { font-size: 12.5px; }
.sx-vbar small { color: var(--a-dim); font-size: 10px; }
.sx-vacts { display: flex; align-items: center; gap: 8px; }
.sx-vacts > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--a-edge-2); color: var(--a-tx); }
.sx-vacts > i .sx-ic { width: 12px; height: 12px; }
.sx-vimg { flex: 1; margin: 22px 48px 64px; border-radius: 6px; }
.sx-zoom { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: inline-flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; border-radius: 99px; background: rgba(23, 23, 23, .9); box-shadow: inset 0 0 0 1px var(--a-edge-2); color: var(--a-tx); font-size: 10.5px; }
.sx-zoom > i { color: var(--a-dim); font-style: normal; }

/* Links */
.sx-links .sx-row { min-height: 48px; }
.sx-prov { border-radius: 8px; }
.sx-prov.is-site > i { width: 12px; height: 12px; border-radius: 3px; background: #6c7f9b; box-shadow: inset 0 0 0 3px #6c7f9b, inset 0 0 0 6px #e6a4a0; }
.sx-prov.is-figma { background: var(--a-violet-bg); box-shadow: inset 0 0 0 1px var(--a-violet-edge); color: var(--a-violet); }
.sx-prov.is-figma .sx-ic { width: 14px; height: 14px; }
.sx-pinned { width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; color: var(--a-faint); }
.sx-out { width: 12px; height: 12px; color: var(--a-faint); }

/* Meetings */
.sx-meet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 14px 16px 16px; }
.sx-date { display: grid; place-items: center; align-content: center; width: 38px; height: 38px; border-radius: 9px; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-date b { font-size: 14px; line-height: 1; }
.sx-date small { margin-top: 2px; color: var(--a-dim); font: 500 7px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.sx-meet .sx-rt { align-self: center; }
.sx-meet .sx-rt b { font-size: 13px; }
.sx-meet p { grid-column: 1 / -1; margin: 12px 0 10px !important; color: var(--a-mid); font-size: 12px; }
.sx-meet .sx-acts { grid-column: 1 / -1; }

/* Billing, both sides */
.sx-due { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; padding: 16px 18px; }
.sx-due .sx-rt { gap: 2px; }
.sx-due .sx-rt b { font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.sx-due .sx-rt small:first-child { color: var(--a-dim); }
.sx-due .sx-acts { flex-wrap: nowrap; }
.sx-howto { display: grid; grid-column: 1 / -1; gap: 5px; padding-top: 12px; border-top: 1px solid var(--a-line); }
.sx-howto small { color: var(--a-faint); font: 500 8px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sx-howto p { color: var(--a-mid); font-size: 11.5px; }
.sx-inv .sx-row { min-height: 50px; }
.sx-inv .sx-co { width: 20px; height: 20px; }
.sx-rt small.is-late { color: var(--a-red); }
.sx-swap { display: grid; }
.sx-swap > .sx-row { grid-area: 1 / 1; }
.sx-paid { opacity: 0; visibility: hidden; }
.sx-w-sbill .sx-seg { margin: -2px 0 12px; }

/* the studio's projects */
.sx-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 12px; }
.sx-filters .sx-seg:first-child > span { height: 22px; padding: 0 9px; font-size: 11px; }
.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx-pcard { display: grid; gap: 7px; padding: 4px 4px 11px; border-radius: 12px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); min-width: 0; }
.sx-cover { position: relative; height: 66px; border-radius: 9px; overflow: hidden; }
.sx-pc-n, .sx-pc-p, .sx-pc-h, .sx-pc-note { padding: 0 8px; }
.sx-pc-n { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sx-pc-p small { color: var(--a-tx); font-size: 10.5px; }
.sx-pc-p .sx-bar { margin-top: 3px; }
.sx-pc-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sx-pc-h small { overflow: hidden; color: var(--a-dim); font-size: 9.5px; white-space: nowrap;  }
.sx-pc-note { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--a-mid); font-size: 10px; white-space: nowrap;  }
.sx-pc-note .sx-pt { width: 5px; height: 5px; }

/* Settings, client experience and integrations */
.sx-settings { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; }
.sx-subnav { display: grid; align-content: start; gap: 2px; padding-top: 4px; }
.sx-subnav p { margin: 0 0 12px 8px !important; color: var(--a-tx); font-size: 12px; font-weight: 500; }
.sx-subnav span { padding: 6px 8px; border-radius: 8px; color: var(--a-dim); font-size: 11px; white-space: nowrap; }
.sx-subnav span.is-on { background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-tx); }
.sx-scol { min-width: 0; }
.sx-brandcard { display: grid; gap: 7px; }
.sx-brandcard small { color: var(--a-mid); font-size: 10px; font-weight: 500; }
.sx-field { display: flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--a-tx); font-size: 12px; }
.sx-brandrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.sx-brandrow > span { display: grid; gap: 7px; justify-items: start; }
.sx-logo { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-accent { display: flex; align-items: center; gap: 8px; color: var(--a-dim); font: 400 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sx-accent > i { width: 20px; height: 20px; border-radius: 50%; background: #8b8b8f; }
.sx-toggle { min-height: 38px; padding-block: 6px; }
.sx-toggle.is-sub { padding-left: 30px; }
.sx-toggle.is-sub b { color: var(--a-mid); font-size: 11px; font-weight: 400; }
.sx-sw { position: relative; display: block; width: 28px; height: 16px; flex: none; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.sx-sw > i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.sx-sw.is-on { background: #1f6f78; }
.sx-sw.is-on > i { translate: 12px 0; }
.sx-tokens { padding: 0 14px; }
.sx-tk { display: grid; grid-template-columns: minmax(0, 1.5fr) 56px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 46px; }
.sx-tk + .sx-tk { border-top: 1px solid var(--a-line); }
.sx-tk-h { min-height: 30px; color: var(--a-faint); font: 500 7.5px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sx-tk > small { overflow: hidden; color: var(--a-mid); font-size: 11px; white-space: nowrap;  }
.sx-tk code, .sx-code code { font: 400 9.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sx-tk code { color: var(--a-faint); }
.sx-tk .sx-tag { justify-self: start; }
.sx-connect { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
.sx-code { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 12px; border-radius: 9px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--a-edge); }
.sx-code code { flex: 1; min-width: 0; overflow: hidden; color: var(--a-tx); white-space: nowrap; }
.sx-copy { flex: none; color: var(--a-tx); font-size: 10.5px; font-weight: 500; }

/* Sightpane AI and its confirm step */
.sx-chat { display: flex; flex-direction: column; gap: 14px; height: 100%; max-width: 560px; margin: 0 auto; padding: 16px 26px 16px; }
.sx-chathead { display: flex; align-items: center; gap: 6px; color: var(--a-dim); font-size: 11px; }
.sx-chathead b { margin-left: 10px; font-size: 12.5px; }
.sx-flipx { width: 11px; height: 11px; transform: scaleX(-1); }
.sx-tl { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 36px); mask-image: linear-gradient(180deg, transparent, #000 36px); }
.sx-tl > * { flex: none; }
.sx-prev { display: grid; gap: 8px; margin-left: 25px; color: var(--a-tx); font-size: 12.5px; line-height: 1.55; }
.sx-prev small { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--a-faint); font-size: 10px; }
.sx-prev .sx-ic { width: 10px; height: 10px; }
.sx-chathead { position: relative; z-index: 1; }
.sx-q-u { align-self: flex-end; max-width: 80%; }
.sx-q-u p { padding: 8px 13px; border-radius: 14px; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-tx); font-size: 12px; }
.sx-ans { display: flex; align-items: flex-start; gap: 10px; }
.sx-ans .sx-ai { width: 15px; height: 15px; margin-top: 2px; }
.sx-ans > span { display: grid; gap: 8px; }
.sx-ans p { color: var(--a-tx); font-size: 12.5px; line-height: 1.55; }
.sx-prop { display: flex; flex-direction: column; margin-left: 25px; }
.sx-prop > div { padding: 14px 16px; border-radius: 16px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge-2), 0 8px 24px rgba(0, 0, 0, .18); }
.sx-prop-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sx-prop-pending { display: grid; gap: 8px; align-content: start; overflow: hidden; }
.sx-flabel { margin-top: 4px; color: var(--a-tx); font-size: 10.5px; font-weight: 500; }
.sx-area { padding: 9px 11px; border-radius: 9px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--a-tx); font-size: 11.5px; line-height: 1.5; }
.sx-prop-pending .sx-acts { margin-top: 4px; }
.sx-prop > .sx-prop-done { display: flex; align-items: flex-start; gap: 10px; max-height: 0; padding-block: 0; overflow: hidden; opacity: 0; box-shadow: none; }
.sx-prop .sx-rt b, .sx-prop .sx-rt small { -webkit-mask-image: none; mask-image: none; }
.sx-prop-done .sx-rt small { white-space: normal; text-wrap: pretty; }
.sx-rmark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--a-green-bg); box-shadow: inset 0 0 0 1px var(--a-green-edge); color: var(--a-green); }
.sx-rmark .sx-ic { width: 11px; height: 11px; }
.sx-chat .sx-compose-sm { flex: none; }

/* the demo's front door, a card in card over the dunes */
.sx-entry { position: absolute; left: 50%; top: 50%; z-index: 1; width: min(78%, 420px); translate: -50% -50%; padding: 7px; border-radius: 30px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 60px -10px rgba(0, 0, 0, .4); }
.sx-entry-in { display: grid; justify-items: center; padding: 26px 22px 20px; border-radius: 24px; background: rgba(23, 23, 23, .85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px var(--a-edge); text-align: center; }
.sx-entry-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px !important; color: var(--a-tx); font-size: 17px; }
.sx-entry-brand .sx-mark { width: 18px; height: 18px; }
.sx-entry-brand b { letter-spacing: -.02em; }
.sx-demo-tag { margin-left: 4px; padding: 3px 8px; border-radius: 99px; background: var(--a-fill-2); box-shadow: inset 0 0 0 1px var(--a-edge); color: var(--a-mid); font-size: 9.5px; }
.sx-ways { display: grid; gap: 8px; width: 100%; margin-top: 18px; }
.sx-way { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-edge); text-align: left; }
.sx-way .sx-lead { width: 32px; height: 32px; border-radius: 9px; }
.sx-way .sx-lead .sx-ic { width: 14px; height: 14px; }
.sx-way .sx-rt b { font-size: 12.5px; }
.sx-way .sx-go { width: 13px; height: 13px; }
.sx-small { margin-top: 14px !important; font-size: 10.5px; }

/* ---------- narrower windows, the sidebar gives way as on a phone ---------- */
@container sxw (max-width: 640px) {
  .sx-settings { grid-template-columns: minmax(0, 1fr); }
  .sx-subnav { display: none; }
}
@container sxw (max-width: 520px) {
  .sx-side { display: none; }
  .sx-body { padding: 18px 16px 14px; }
  .sx-title { font-size: 18px; }
  .sx-home { padding: 26px 16px 16px; }
  .sx-hi { font-size: 19px; }
  .sx-stats b { font-size: 15px; }
  .sx-pv { grid-template-columns: minmax(0, 1fr); }
  .sx-pins { display: none; }
  .sx-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-due { grid-template-columns: minmax(0, 1fr); }
  .sx-tk { grid-template-columns: minmax(0, 1fr) 56px; }
  .sx-tk > small, .sx-tk-h > span:last-child { display: none; }
  .sx-chat { padding: 14px 16px; }
  .sx-prop { margin-left: 0; }
  .sx-tr { grid-template-columns: 74px minmax(0, 1fr); }
  .sx-today, .sx-launch { left: calc(86px + (100% - 98px) * var(--x)); }
  .sx-cols > i:not(.is-today):not(.is-launch) { display: none; }
  .sx-filters .sx-seg.is-box { display: none; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 900px) {
  .sx-sec { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sx-line { max-width: 44ch; }
  .sx-fig { aspect-ratio: 5 / 4; }
  .sx-index { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .sx-ig:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sx { --sx-gap: 96px; }
  .sx-head-top .ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .sx-index { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 56px; }
  .sx-ig ul { gap: 10px 20px; }
  .sx-ig:not(:first-child) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-fig { aspect-ratio: 4 / 5; border-radius: 20px; }
  .sx-win { left: 5%; right: 5%; top: 7%; border-radius: 16px 16px 0 0; }
  .sx-entry { width: 90%; }
  .sx-entry-in { padding: 20px 14px 14px; }
  .sx-entry .sx-hi { font-size: 18px; }
  .sx-ways { margin-top: 14px; }
  .sx-way { padding: 10px 12px; }
  .sx-gl + .sx-sec { padding-top: 56px; }
}

/* ---------- the motion, once as each figure comes into view ----------
   Calm, Powder's ease, one change per window. The markup is the resting
   state, so with no motion.js or under reduced motion nothing moves */
@media (prefers-reduced-motion: no-preference) {
  /* Home, the question types itself, then send lights */
  html.mo-on .sx-f-home.mo-in .sx-ph { animation: sx-ph 200ms ease-out 1100ms both; }
  html.mo-on .sx-f-home.mo-in .sx-w { animation: sx-in 140ms ease-out calc(1200ms + var(--i) * 210ms) both; }
  html.mo-on .sx-f-home.mo-in .sx-send { animation: sx-send 360ms var(--a-ease) 2150ms both; }
  /* Timeline, the stages fill in turn */
  html.mo-on .sx-f-status.mo-in .sx-span > i { animation: sx-grow 900ms var(--a-ease) calc(700ms + var(--i) * 160ms) both; }
  html.mo-on .sx-f-status.mo-in .sx-today { animation: sx-in 500ms ease-out 1700ms both; }
  /* Approvals, Approve is pressed and the toast says so */
  html.mo-on .sx-f-approvals.mo-in .sx-press { animation: sx-press 280ms ease-out 1300ms; }
  html.mo-on .sx-f-approvals.mo-in .sx-toast { animation: sx-toast 3200ms var(--a-ease) 1500ms both; }
  /* Preview, the pin drops, its comment follows */
  html.mo-on .sx-f-preview.mo-in .sx-pin { animation: sx-pin 560ms cubic-bezier(.34, 1.26, .64, 1) 1000ms both; }
  html.mo-on .sx-f-preview.mo-in .sx-pc { animation: sx-rise 500ms var(--a-ease) 1500ms both; }
  /* Requests, the new one arrives on top */
  html.mo-on .sx-f-requests.mo-in .sx-new { animation: sx-row 620ms var(--a-ease) 1100ms both; }
  /* Messages, the last message lands, then Seen */
  html.mo-on .sx-f-messages.mo-in .sx-last { animation: sx-rise 500ms var(--a-ease) 900ms both; }
  html.mo-on .sx-f-messages.mo-in .sx-seen { animation: sx-in 500ms ease-out 2100ms both; }
  /* Updates, the follow up joins its update */
  html.mo-on .sx-f-updates.mo-in .sx-follow { animation: sx-follow 700ms var(--a-ease) 1100ms both; }
  /* Files, a photo is dragged in and dropped, it joins the list, then opens in the viewer */
  html.mo-on .sx-f-files.mo-in .sx-drag { animation: sx-drag 1500ms var(--a-ease) 700ms both; }
  html.mo-on .sx-f-files.mo-in .sx-drop { animation: sx-ring 900ms ease-out 1500ms both; }
  html.mo-on .sx-f-files.mo-in .sx-new { animation: sx-row 620ms var(--a-ease) 2050ms both; }
  html.mo-on .sx-f-files.mo-in .sx-viewer { animation: sx-view 3600ms var(--a-ease) 3200ms both; }
  /* Links, Meetings and the client's Billing settle in, row by row */
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in :is(.sx-list .sx-row, .sx-meet, .sx-due) { animation: sx-rise 520ms var(--a-ease) both; }
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in :is(.sx-meet, .sx-due) { animation-delay: 700ms; }
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in .sx-list .sx-row:nth-child(1) { animation-delay: 800ms; }
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in .sx-list .sx-row:nth-child(2) { animation-delay: 900ms; }
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in .sx-list .sx-row:nth-child(3) { animation-delay: 1000ms; }
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in .sx-list .sx-row:nth-child(4) { animation-delay: 1100ms; }
  html.mo-on :is(.sx-f-links, .sx-f-meetings, .sx-f-billing).mo-in .sx-list .sx-row:nth-child(5) { animation-delay: 1200ms; }
  html.mo-on .sx-f-billing.mo-in .sx-press { animation: sx-press 280ms ease-out 1900ms; }
  /* the studio's projects, every bar fills */
  html.mo-on .sx-f-studio.mo-in .sx-pcard .sx-bar > i { animation: sx-grow 1000ms var(--a-ease) calc(800ms + var(--i, 0) * 0ms) both; }
  html.mo-on .sx-f-studio.mo-in .sx-pcard { animation: sx-rise 520ms var(--a-ease) calc(600ms + var(--i) * 110ms) both; }
  /* Billing across clients, Mark paid is pressed and the row settles to Paid */
  html.mo-on .sx-f-studio-billing.mo-in .sx-swap .sx-press { animation: sx-press 280ms ease-out 1300ms; }
  html.mo-on .sx-f-studio-billing.mo-in .sx-swap > .sx-row:first-child { animation: sx-gone 360ms ease-out 1650ms both; }
  html.mo-on .sx-f-studio-billing.mo-in .sx-paid { animation: sx-back 420ms var(--a-ease) 1750ms both; }
  /* Client experience, Show amounts is switched off */
  html.mo-on .sx-f-experience.mo-in .sx-flip .sx-sw { animation: sx-swbg 360ms var(--a-ease) 1500ms both; }
  html.mo-on .sx-f-experience.mo-in .sx-flip .sx-sw > i { animation: sx-knob 360ms var(--a-ease) 1500ms both; }
  /* the demo, the two ways in rise, the agency one is picked */
  html.mo-on .sx-f-demo.mo-in .sx-way { animation: sx-rise 520ms var(--a-ease) calc(700ms + var(--i) * 120ms) both; }
  html.mo-on .sx-f-demo.mo-in .sx-pick { animation: sx-rise 520ms var(--a-ease) 820ms both, sx-pick 900ms var(--a-ease) 1900ms forwards; }
  /* Sightpane AI, the ask, the answer, the card, then confirm and its receipt */
  html.mo-on .sx-f-agent.mo-in .sx-q-u { animation: sx-rise 500ms var(--a-ease) 600ms both; }
  html.mo-on .sx-f-agent.mo-in .sx-ans { animation: sx-rise 500ms var(--a-ease) 1300ms both; }
  html.mo-on .sx-f-agent.mo-in .sx-prop-pending { animation: sx-rise 560ms var(--a-ease) 1800ms both, sx-shut 460ms var(--a-ease) 3500ms forwards; }
  html.mo-on .sx-f-agent.mo-in .sx-prop-pending .sx-press { animation: sx-press 280ms ease-out 3150ms; }
  html.mo-on .sx-f-agent.mo-in .sx-prop > .sx-prop-done { animation: sx-open 520ms var(--a-ease) 3800ms both; }
  /* MCP, the connect command is copied */
  html.mo-on .sx-f-mcp.mo-in .sx-tk:not(.sx-tk-h) { animation: sx-rise 500ms var(--a-ease) both; }
  html.mo-on .sx-f-mcp.mo-in .sx-tk:nth-child(2) { animation-delay: 700ms; }
  html.mo-on .sx-f-mcp.mo-in .sx-tk:nth-child(3) { animation-delay: 820ms; }
  html.mo-on .sx-f-mcp.mo-in .sx-press { animation: sx-press 280ms ease-out 1700ms; }
  html.mo-on .sx-f-mcp.mo-in .sx-toast { animation: sx-toast 3000ms var(--a-ease) 1900ms both; }
}
@keyframes sx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sx-ph { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sx-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes sx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sx-send { from { background: var(--a-fill-2); color: var(--a-mid); } to { background: rgba(255, 255, 255, .85); color: #000; } }
@keyframes sx-press { 50% { scale: .95; } }
@keyframes sx-toast { 0% { opacity: 0; translate: -50% 8px; } 12% { opacity: 1; translate: -50% 0; } 82% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; translate: -50% 0; } }
@keyframes sx-pin { from { opacity: 0; translate: 0 -12px; scale: .6; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sx-row { from { max-height: 0; min-height: 0; padding-block: 0; opacity: 0; } 60% { opacity: 0; } to { max-height: 64px; opacity: 1; } }
@keyframes sx-follow { from { max-height: 0; margin-top: 0; opacity: 0; } to { max-height: 90px; opacity: 1; } }
@keyframes sx-drag { 0% { opacity: 0; translate: 160px 90px; } 18% { opacity: 1; } 70% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: -40px -96px; scale: .4; } }
@keyframes sx-ring { 0% { box-shadow: inset 0 0 0 1px var(--a-edge), 0 0 0 0 rgba(255, 243, 240, 0); } 30% { box-shadow: inset 0 0 0 1px var(--a-edge), 0 0 0 2px rgba(255, 243, 240, .75); } 100% { box-shadow: inset 0 0 0 1px var(--a-edge), 0 0 0 0 rgba(255, 243, 240, 0); } }
@keyframes sx-view { 0% { opacity: 0; visibility: visible; scale: .98; } 14% { opacity: 1; visibility: visible; scale: 1; } 86% { opacity: 1; visibility: visible; scale: 1; } 100% { opacity: 0; visibility: hidden; scale: 1; } }
@keyframes sx-gone { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes sx-shut { from { max-height: 320px; opacity: 1; } 40% { opacity: 0; } to { max-height: 0; padding-block: 0; opacity: 0; box-shadow: none; } }
@keyframes sx-open { from { max-height: 0; padding-block: 0; opacity: 0; box-shadow: none; } to { max-height: 120px; padding-block: 14px; opacity: 1; box-shadow: inset 0 0 0 1px var(--a-edge-2), 0 8px 24px rgba(0, 0, 0, .18); } }
@keyframes sx-back { from { opacity: 0; visibility: visible; translate: 0 4px; } to { opacity: 1; visibility: visible; translate: 0 0; } }
@keyframes sx-swbg { from { background: #1f6f78; } to { background: rgba(255, 255, 255, .16); } }
@keyframes sx-knob { from { translate: 12px 0; } to { translate: 0 0; } }
@keyframes sx-pick { to { background: var(--a-fill-h); box-shadow: inset 0 0 0 1px var(--a-edge-2); } }