/* ==========================================================================
   AP Collective — signature sections & motion layer (23 Sep 2026)
   Extends the fixed palette in ap.css; defines no new colours of its own
   beyond mixes of existing tokens. Every class is prefixed `sx-`.
   ========================================================================== */

:root { --sx-ease: cubic-bezier(.16,1,.3,1); --sx-line: color-mix(in srgb, var(--brand) 38%, var(--border-strong)); }

/* ---------- Global polish ---------------------------------------------- */
.sx-progress { position:fixed;inset:0 0 auto;height:2px;z-index:200;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--brand),var(--brand-lift) 60%,var(--signal));pointer-events:none; }
.nav { transition:box-shadow .35s ease, background-color .35s ease; }
.nav.sx-scrolled { box-shadow:0 10px 40px -18px #0006; }
.nav__link { position:relative; }
.nav__link::after { content:'';position:absolute;left:0;right:0;bottom:-6px;height:1.5px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--sx-ease); }
.nav__link:hover::after,.nav__link[aria-current=page]::after { transform:scaleX(1); }
:focus-visible { outline:2px solid var(--brand-lift);outline-offset:3px;border-radius:4px; }
::selection { background:color-mix(in srgb,var(--brand) 35%,transparent); }

/* Reveal: only hidden once JS has run and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .sx-js [data-sx]:not(.sx-in) { opacity:0;transform:translateY(26px); }
  .sx-js [data-sx=left]:not(.sx-in) { transform:translateX(-28px); }
  .sx-js [data-sx=scale]:not(.sx-in) { transform:scale(.96) translateY(14px); }
  .sx-js [data-sx] { transition:opacity .9s var(--sx-ease) var(--sx-d,0s), transform 1s var(--sx-ease) var(--sx-d,0s); }
}

/* Pointer spotlight */
.sx-spot { position:relative;isolation:isolate; }
.sx-spot::before { content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .4s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 16%,transparent),transparent 60%);pointer-events:none; }
.sx-spot:hover::before { opacity:1; }

/* Shared bits */
.sx-kicker { font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2); }
.sx-note { font-size:.72rem;color:var(--text-2);margin-top:18px; }
.sx-section { padding-block:clamp(70px,9vw,130px); }
.sx-h2 { font-size:clamp(2.4rem,4.4vw,4.4rem);letter-spacing:-.05em;line-height:1.02;margin:14px 0 18px; }

/* ---------- Home: service marquee -------------------------------------- */
.sx-marquee { overflow:hidden;border-block:1px solid var(--border);padding-block:18px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.sx-marquee__track { display:flex;gap:56px;width:max-content;animation:sx-marquee 38s linear infinite; }
.sx-marquee:hover .sx-marquee__track { animation-play-state:paused; }
.sx-marquee span { font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.6rem);letter-spacing:-.03em;color:var(--text-2);white-space:nowrap;display:flex;align-items:center;gap:56px; }
.sx-marquee span::after { content:'✳';color:var(--brand-lift);font-size:.8em; }
@keyframes sx-marquee { to { transform:translateX(-50%); } }

/* ---------- Home: the flagship story ----------------------------------- */
.sx-story__head { max-width:720px;margin-bottom:clamp(40px,6vw,80px); }
.sx-story__grid { display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:start; }
.sx-story__stage-wrap { position:sticky;top:calc(var(--nav-h) + 28px); }
.sx-steps { list-style:none;margin:0;padding:0; }
.sx-step { min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-block:30px;transition:opacity .6s ease; }
.sx-js .sx-step:not(.is-current) { opacity:.32; }
.sx-step:first-child { min-height:44vh;justify-content:flex-start;padding-top:40px; }
.sx-step__n { font-family:var(--font-mono);font-size:.7rem;color:var(--brand);letter-spacing:.12em; }
.sx-step h3 { font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.04em;margin:12px 0; }
.sx-step p { max-width:40ch;color:var(--text-2); }
.sx-step .sx-who { display:inline-flex;gap:8px;align-items:center;margin-top:16px;font-size:.7rem;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2); }
.sx-step .sx-who i { width:8px;height:8px;border-radius:50%;background:var(--brand); }
.sx-step--you .sx-who i { background:#2f9e7a; }

.sx-stage { border:1px solid var(--border-brand);border-radius:22px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--surface-solid) 94%,var(--brand)),var(--surface-solid));box-shadow:0 40px 110px -40px #0008; }
.sx-stage__bar { display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border); }
.sx-stage__bar i { width:9px;height:9px;border-radius:50%;background:var(--border-strong); }
.sx-stage__bar b { margin-left:10px;font-weight:500;font-size:.72rem;color:var(--text-2); }
.sx-stage__bar small { margin-left:auto;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;color:var(--text-3); }
.sx-pills { display:flex;gap:6px;padding:14px 18px 0;flex-wrap:wrap; }
.sx-pills span { font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:99px;border:1px solid var(--border);color:var(--text-3);transition:all .5s var(--sx-ease); }
.sx-stage[data-step="1"] .sx-pills span:nth-child(1),
.sx-stage[data-step="2"] .sx-pills span:nth-child(-n+2),
.sx-stage[data-step="3"] .sx-pills span:nth-child(-n+3),
.sx-stage[data-step="4"] .sx-pills span { color:var(--text);border-color:var(--border-brand);background:color-mix(in srgb,var(--brand) 12%,transparent); }
.sx-stage__body { padding:18px;display:grid;gap:12px;min-height:420px;align-content:start; }
.sx-card { border:1px solid var(--border-strong);border-radius:14px;padding:14px 16px;background:var(--surface-solid); }
.sx-mail__from { display:flex;justify-content:space-between;gap:10px;font-size:.66rem;color:var(--text-2); }
.sx-mail__subj { font-weight:600;margin:6px 0 8px;font-size:.92rem; }
.sx-mail p { font-size:.78rem;color:var(--text-2);line-height:1.6;margin:0; }
.sx-mark { border-radius:4px;transition:background .6s ease, color .6s ease;padding:0 2px; }
.sx-stage:not([data-step="1"]) .sx-mark { background:color-mix(in srgb,var(--brand) 20%,transparent);color:var(--text); }
.sx-fields { display:flex;flex-wrap:wrap;gap:6px; }
.sx-fields span { font-size:.66rem;padding:6px 9px;border-radius:8px;border:1px dashed var(--border-brand);color:var(--text); }
.sx-fields span b { font-weight:500;color:var(--text-2);margin-right:4px; }
.sx-draft__h { display:flex;justify-content:space-between;align-items:center;font-size:.62rem;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px; }
.sx-draft p { font-size:.78rem;line-height:1.6;margin:0;color:var(--text); }
.sx-draft__actions { display:flex;gap:8px;margin-top:12px; }
.sx-draft__actions span { font-size:.68rem;padding:7px 12px;border-radius:8px;border:1px solid var(--border-strong); }
.sx-draft__actions .sx-approve { background:#2f9e7a;border-color:#2f9e7a;color:#fff; }
.sx-stage[data-step="3"] .sx-approve { animation:sx-nudge 1.8s ease-in-out infinite; }
.sx-sent { display:flex;gap:12px;align-items:center;font-size:.76rem; }
.sx-sent i { flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#2f9e7a;color:#fff;font-style:normal;font-size:.8rem; }
.sx-sent small { display:block;color:var(--text-2);font-size:.66rem;margin-top:2px; }
/* Layers appear as the story advances. */
.sx-layer { transition:opacity .7s var(--sx-ease), transform .8s var(--sx-ease), filter .7s ease; }
.sx-stage[data-step="1"] :is(.sx-fields,.sx-draft,.sx-sent),
.sx-stage[data-step="2"] :is(.sx-draft,.sx-sent),
.sx-stage[data-step="3"] .sx-sent { opacity:0;transform:translateY(16px);filter:blur(4px); }
.sx-fields span { transition:opacity .5s ease calc(var(--i)*90ms), transform .5s var(--sx-ease) calc(var(--i)*90ms); }
.sx-stage[data-step="1"] .sx-fields span { opacity:0;transform:scale(.8); }
.sx-stage__foot { border-top:1px solid var(--border);padding:12px 18px;font-size:.62rem;color:var(--text-3);display:flex;justify-content:space-between; }
@keyframes sx-nudge { 0%,100% { box-shadow:0 0 0 0 #2f9e7a66 } 50% { box-shadow:0 0 0 7px #2f9e7a00 } }

/* ---------- Systems: service selector ---------------------------------- */
.sx-picker { display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,50px);align-items:start; }
.sx-picker__list { display:grid;gap:8px; }
.sx-picker:not(.is-live) .sx-picker__list { display:none; }
.sx-picker:not(.is-live) { grid-template-columns:1fr; }
.sx-picker__list [role=tab] { text-align:left;font:inherit;font-size:1rem;color:var(--text-2);background:var(--surface-solid);border:1px solid var(--border);border-radius:14px;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;transition:all .35s var(--sx-ease); }
.sx-picker__list [role=tab]::after { content:'→';opacity:0;transform:translateX(-8px);transition:all .35s var(--sx-ease);color:var(--brand); }
.sx-picker__list [role=tab]:hover { color:var(--text);border-color:var(--border-strong);transform:translateX(4px); }
.sx-picker__list [aria-selected=true] { color:var(--text);border-color:var(--border-brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface-solid));box-shadow:0 18px 50px -30px var(--glow-a); }
.sx-picker__list [aria-selected=true]::after { opacity:1;transform:none; }
.sx-picker__panels { position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:14px; }
.sx-panel { border:1px solid var(--border-brand);border-radius:20px;padding:clamp(24px,3.5vw,40px);background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--brand) 18%,transparent),transparent 60%),var(--surface-solid); }
.sx-picker.is-live .sx-panel:not([hidden]) { animation:sx-panel-in .55s var(--sx-ease); }
.sx-panel h3 { font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.04em;margin:12px 0; }
.sx-panel__steps { list-style:none;margin:22px 0;padding:0;display:grid;gap:10px;counter-reset:sx; }
.sx-panel__steps li { counter-increment:sx;display:grid;grid-template-columns:34px 1fr;gap:10px;font-size:.9rem;color:var(--text-2); }
.sx-panel__steps li::before { content:counter(sx,decimal-leading-zero);font-family:var(--font-mono);font-size:.68rem;color:var(--brand);padding-top:3px; }
.sx-panel__first { border-top:1px solid var(--border);padding-top:16px;font-size:.88rem; }
.sx-panel__foot { display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:22px; }
@keyframes sx-panel-in { from { opacity:0;transform:translateY(12px) } }

/* ---------- Academy: curriculum rail ----------------------------------- */
.sx-rail { position:relative;display:grid;gap:clamp(28px,4vw,46px);padding-left:clamp(44px,6vw,80px);--sx-fill:0; }
.sx-rail__line { position:absolute;left:clamp(14px,2vw,24px);top:10px;bottom:10px;width:2px;background:var(--border);border-radius:2px; }
.sx-rail__line i { position:absolute;inset:0;background:linear-gradient(var(--brand),var(--signal));transform-origin:top;transform:scaleY(var(--sx-fill));border-radius:inherit; }
.sx-module { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);padding:clamp(22px,3vw,34px);border:1px solid var(--border);border-radius:18px;background:var(--surface-solid);transition:border-color .5s ease; }
.sx-module::before { content:'';position:absolute;left:calc(-1 * clamp(44px,6vw,80px) + clamp(14px,2vw,24px) - 6px);top:34px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--border-strong);transition:all .5s var(--sx-ease); }
.sx-module.is-reached { border-color:var(--border-brand); }
.sx-module.is-reached::before { background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 20%,transparent); }
.sx-module h3 { font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.035em;margin:8px 0 10px; }
.sx-module p { color:var(--text-2);margin:0; }
.sx-after { border-left:1px solid var(--border);padding-left:clamp(16px,2.5vw,30px); }
.sx-after b { display:block;font-family:var(--font-mono);font-weight:500;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:10px; }
[data-theme=light] .sx-after b { color:#1f7d5f; }
.sx-after ul { margin:0;padding-left:18px;color:var(--text);font-size:.92rem;display:grid;gap:6px; }

/* ---------- Approach: animated process diagram ------------------------- */
.sx-process { position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:40px; }
.sx-process__wire { position:absolute;left:12.5%;right:12.5%;top:67px;height:2px;background:var(--border);overflow:hidden;border-radius:2px; }
.sx-process__wire i { position:absolute;inset:0;background:linear-gradient(90deg,var(--brand),var(--signal));transform:scaleX(0);transform-origin:0 50%; }
.sx-process__wire b { position:absolute;top:-3px;left:0;width:60px;height:8px;border-radius:8px;background:radial-gradient(closest-side,#fff,transparent);opacity:0; }
.sx-process.is-playing .sx-process__wire i { animation:sx-wire 2.4s var(--sx-ease) .2s forwards; }
.sx-process.is-playing .sx-process__wire b { animation:sx-travel 3.2s ease-in-out 2.8s infinite; }
.sx-node { position:relative;text-align:center;padding:0 6px; }
.sx-node__dot { width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:.8rem;background:var(--surface-solid);border:1px solid var(--border-strong);color:var(--text-2);position:relative;z-index:1;transition:all .6s var(--sx-ease); }
.sx-process.is-playing .sx-node__dot { animation:sx-node-on .6s var(--sx-ease) forwards;animation-delay:calc(.2s + var(--i) * .6s); }
.sx-node h3 { font-size:1.25rem;letter-spacing:-.03em;margin:0 0 8px; }
.sx-node p { font-size:.84rem;color:var(--text-2);margin:0 auto;max-width:24ch; }
.sx-node__hold { display:inline-block;margin-top:14px;font-size:.66rem;font-family:var(--font-mono);letter-spacing:.06em;padding:6px 10px;border-radius:8px;border:1px solid var(--border-brand);color:var(--text);background:color-mix(in srgb,var(--brand) 8%,transparent); }
@keyframes sx-wire { to { transform:scaleX(1) } }
@keyframes sx-travel { 0% { left:-60px;opacity:0 } 10% { opacity:1 } 90% { opacity:1 } 100% { left:100%;opacity:0 } }
@keyframes sx-node-on { to { background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 16%,transparent),0 18px 40px -12px var(--glow-a) } }
.sx-figure { margin:0; }
.sx-figure img { width:100%;height:auto;border-radius:18px;border:1px solid var(--border);display:block; }

/* ---------- About: founder ---------------------------------------------- */
.sx-founder { display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:start; }
.sx-portrait { position:sticky;top:calc(var(--nav-h) + 24px);margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--border-brand);aspect-ratio:4/5;background:radial-gradient(circle at 70% 20%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 55%),radial-gradient(circle at 20% 90%,color-mix(in srgb,var(--signal) 14%,transparent),transparent 50%),var(--surface-solid);display:grid;place-items:center; }
.sx-portrait img { width:100%;height:100%;object-fit:cover;display:block; }
.sx-portrait__mono { font-family:var(--font-display);font-size:clamp(5rem,11vw,9rem);letter-spacing:-.08em;line-height:1;color:var(--text); }
.sx-portrait__mono span { color:var(--brand-lift); }
.sx-portrait__rings { position:absolute;inset:14%;border:1px solid var(--border-brand);border-radius:50%;animation:sx-spin 40s linear infinite; }
.sx-portrait__rings::after { content:'';position:absolute;inset:12%;border:1px dashed var(--border-brand);border-radius:50%; }
.sx-portrait figcaption { position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2); }
@keyframes sx-spin { to { rotate:360deg } }
.sx-founder p { margin:0 0 1.1em;max-width:62ch; }
.sx-founder .lede { margin-bottom:1.3em; }
.sx-career { list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--border); }
.sx-career li { display:grid;grid-template-columns:clamp(120px,16vw,190px) 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--border); }
.sx-career b { font-weight:500; }
.sx-career span { color:var(--text-2);font-size:.92rem; }
.sx-career li:last-child b { color:var(--brand-lift); }
[data-theme=light] .sx-career li:last-child b { color:var(--brand); }

/* Real founder photograph (homepage + about) */
.founder-visual--photo { margin:0;padding:0;align-items:stretch;justify-content:stretch;border-color:var(--border-brand); }
.founder-visual--photo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block; }
.founder-visual--photo::after { content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#06070fcc);pointer-events:none; }
.founder-visual--photo figcaption { position:absolute;z-index:1;left:22px;bottom:20px;font-family:var(--font-mono);font-size:.55rem;line-height:1.8;letter-spacing:.13em;color:#f4f5fb; }
.sx-portrait img { object-position:50% 20%; }
.sx-portrait:has(img)::after { content:'';position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#06070f99);pointer-events:none; }
.sx-portrait:has(img) figcaption { color:#f4f5fb;z-index:1; }

/* ---------- Tools hub --------------------------------------------------- */
.sx-tools { display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px); }
.sx-tool { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:22px;background:var(--surface-solid);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .4s ease, transform .5s var(--sx-ease), box-shadow .5s ease; }
.sx-tool:hover { border-color:var(--border-brand);transform:translateY(-4px);box-shadow:0 30px 80px -40px var(--glow-a); }
.sx-tool__demo { position:relative;height:clamp(200px,20vw,250px);border-bottom:1px solid var(--border);overflow:hidden;background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%);display:grid;place-items:center; }
.sx-tool__body { padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:10px;flex:1; }
.sx-tool__body h3 { font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.04em;margin:0; }
.sx-tool__body p { color:var(--text-2);margin:0; }
.sx-tool__shows { font-size:.84rem;border-top:1px solid var(--border);padding-top:14px;margin-top:auto !important; }
.sx-tool__shows b { font-weight:500;color:var(--text); }
.sx-tool__go { display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-weight:500; }
.sx-tool__go span:last-child { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);transition:all .4s var(--sx-ease); }
.sx-tool:hover .sx-tool__go span:last-child { background:var(--brand);border-color:var(--brand);color:#fff;rotate:45deg; }
/* mini demo: website assembling */
.sx-mini-site { width:62%;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg);overflow:hidden;box-shadow:0 20px 50px -25px #0008; }
.sx-mini-site > i:first-child { display:block;height:14px;border-bottom:1px solid var(--border);background:var(--surface-2); }
.sx-mini-site div { padding:12px;display:grid;gap:7px; }
.sx-mini-site b { display:block;height:8px;border-radius:4px;background:var(--border-strong);animation:sx-build 4.8s var(--sx-ease) infinite;animation-delay:calc(var(--i) * .25s);transform-origin:0 50%; }
.sx-mini-site b:first-child { height:14px;width:70%;background:var(--brand); }
.sx-mini-site b:nth-child(2) { width:90%; } .sx-mini-site b:nth-child(3) { width:55%; }
.sx-mini-site em { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px; }
.sx-mini-site em s { height:30px;border-radius:5px;border:1px solid var(--border-strong);animation:sx-build 4.8s var(--sx-ease) infinite;animation-delay:calc(1s + var(--i) * .2s); }
@keyframes sx-build { 0%,8% { opacity:0;transform:scaleX(.3) } 22%,85% { opacity:1;transform:none } 100% { opacity:0 } }
/* mini demo: tasks leaving the desk */
.sx-mini-ops { display:grid;grid-template-columns:1fr 1fr;gap:16px;width:78%; }
.sx-mini-ops > div { border:1px dashed var(--border-strong);border-radius:12px;padding:10px;min-height:140px;position:relative; }
.sx-mini-ops small { font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;color:var(--text-3); }
.sx-mini-ops span { position:absolute;left:10px;right:10px;height:22px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border-strong);animation:sx-hop 6s var(--sx-ease) infinite;animation-delay:calc(var(--i) * 1.2s); }
.sx-mini-ops span:nth-of-type(1) { top:30px } .sx-mini-ops span:nth-of-type(2) { top:60px } .sx-mini-ops span:nth-of-type(3) { top:90px }
@keyframes sx-hop { 0%,15% { transform:none;background:var(--surface-2) } 35%,85% { transform:translateX(calc(100% + 36px));background:color-mix(in srgb,var(--brand) 30%,transparent);border-color:var(--border-brand) } 100% { transform:none } }
/* mini demo: chat */
.sx-mini-chat { width:66%;display:grid;gap:8px; }
.sx-mini-chat span { padding:9px 12px;border-radius:12px;font-size:.66rem;max-width:80%;animation:sx-pop 6s var(--sx-ease) infinite both;animation-delay:calc(var(--i) * .9s); }
.sx-mini-chat span:nth-child(odd) { justify-self:end;background:var(--brand);color:#fff;border-bottom-right-radius:4px; }
.sx-mini-chat span:nth-child(even) { background:var(--surface-2);border:1px solid var(--border-strong);border-bottom-left-radius:4px; }
@keyframes sx-pop { 0%,5% { opacity:0;transform:translateY(10px) scale(.95) } 14%,88% { opacity:1;transform:none } 100% { opacity:0 } }
/* mini demo: cost climbing */
.sx-mini-cost { width:70%;display:flex;align-items:flex-end;gap:10px;height:150px;border-bottom:1px solid var(--border-strong);padding-bottom:1px; }
.sx-mini-cost i { flex:1;border-radius:6px 6px 0 0;background:linear-gradient(var(--brand-lift),var(--brand));height:var(--h);transform-origin:bottom;animation:sx-grow 5s var(--sx-ease) infinite;animation-delay:calc(var(--i) * .18s); }
.sx-mini-cost i:last-child { background:linear-gradient(var(--amber),color-mix(in srgb,var(--amber) 60%,var(--brand))); }
@keyframes sx-grow { 0%,6% { transform:scaleY(.05) } 30%,85% { transform:none } 100% { transform:scaleY(.05) } }
.sx-tools-why { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,5vw,70px); }
.sx-tools-why div { border-top:1px solid var(--border-strong);padding-top:18px; }
.sx-tools-why b { display:block;margin-bottom:6px;font-weight:600; }
.sx-tools-why p { color:var(--text-2);font-size:.9rem;margin:0; }
.sx-strip { display:flex;flex-wrap:wrap;gap:10px;margin-top:16px; }
.sx-strip a { font-size:.8rem;padding:9px 14px;border-radius:99px;border:1px solid var(--border);transition:all .3s ease; }
.sx-strip a:hover { border-color:var(--border-brand);background:color-mix(in srgb,var(--brand) 10%,transparent); }

/* ---------- Work: case studies ----------------------------------------- */
.sx-case { padding-block:clamp(60px,8vw,110px);border-top:1px solid var(--border); }
.sx-case__head { display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:clamp(28px,4vw,50px); }
.sx-case__head h2 { font-size:clamp(2.4rem,5vw,4.8rem);letter-spacing:-.055em;line-height:1;margin:12px 0 0; }
.sx-compare { position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border-strong);--sx-split:50%;background:#f5f5f0;user-select:none; }
.sx-compare img { display:block;width:100%;height:auto; }
.sx-compare__after { position:absolute;inset:0;clip-path:inset(0 0 0 var(--sx-split)); }
.sx-compare__after img { height:100%;object-fit:cover;object-position:top left; }
.sx-compare__handle { position:absolute;top:0;bottom:0;left:var(--sx-split);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px #0003;pointer-events:none; }
.sx-compare__handle::after { content:'⟷';position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-size:1rem;box-shadow:0 8px 24px #0005; }
.sx-compare input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0; }
.sx-compare input:focus-visible ~ .sx-compare__handle::after { outline:3px solid var(--brand-lift);outline-offset:3px; }
.sx-compare__tag { position:absolute;top:14px;padding:6px 10px;border-radius:8px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;background:#111d;color:#fff;pointer-events:none; }
.sx-compare__tag--l { left:14px } .sx-compare__tag--r { right:14px }
.sx-case__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(30px,4vw,50px); }
.sx-case__grid > div { border-top:1px solid var(--border-strong);padding-top:18px; }
.sx-case__grid h3 { font-family:var(--font-mono);font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0 0 12px; }
.sx-case__grid p,.sx-case__grid li { font-size:.92rem;color:var(--text); }
.sx-case__grid ul { margin:0;padding-left:18px;display:grid;gap:10px; }
.sx-decision { font-size:.9rem; }
.sx-decision em { font-style:normal;color:var(--text-2); }
.sx-metric { display:flex;flex-direction:column;gap:4px; }
.sx-metric strong { font-family:var(--font-display);font-size:clamp(2.6rem,4vw,3.6rem);letter-spacing:-.05em;line-height:1;color:var(--text); }
.sx-metric strong small { font-size:.45em;color:var(--text-2);letter-spacing:-.02em; }
.sx-metric > span { font-size:.8rem;color:var(--text-2); }

/* ---------- Colophon ---------------------------------------------------- */
.sx-facts { display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:clamp(40px,6vw,80px); }
.sx-facts > div { border:1px solid var(--border);border-radius:18px;padding:24px;background:var(--surface-solid); }
.sx-facts strong { display:block;font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.05em;line-height:1; }
.sx-facts span { display:block;margin-top:8px;font-size:.8rem;color:var(--text-2); }
.sx-rows { border-top:1px solid var(--border); }
.sx-row { display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:clamp(18px,3vw,40px);padding-block:clamp(26px,3vw,40px);border-bottom:1px solid var(--border); }
.sx-row h3 { font-size:1.35rem;letter-spacing:-.03em;margin:6px 0 0; }
.sx-row p { margin:0;color:var(--text-2); }
.sx-row .sx-why { color:var(--text); }
.sx-row .sx-why b { display:block;font-family:var(--font-mono);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px; }
.sx-code { font-family:var(--font-mono);font-size:.72rem;line-height:1.7;padding:18px 20px;border-radius:14px;border:1px solid var(--border);background:var(--bg-2);overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--text-2);margin:0; }
.sx-limits { margin-top:clamp(40px,5vw,60px);border:1px solid color-mix(in srgb,var(--amber) 45%,var(--border));border-radius:18px;padding:clamp(22px,3vw,34px);background:color-mix(in srgb,var(--amber) 6%,var(--surface-solid)); }
.sx-limits ul { margin:12px 0 0;padding-left:18px;display:grid;gap:8px;color:var(--text-2); }

/* ---------- Chat: messages arrive, and the guide "types" --------------- */
.chat-message { animation:sx-msg .45s var(--sx-ease) both; }
.chat-message--user { transform-origin:100% 100%; }
.sx-typing { display:inline-flex;gap:4px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);width:max-content; }
.sx-typing i { width:6px;height:6px;border-radius:50%;background:var(--text-2);animation:sx-dot 1s ease-in-out infinite; }
.sx-typing i:nth-child(2) { animation-delay:.15s } .sx-typing i:nth-child(3) { animation-delay:.3s }
@keyframes sx-msg { from { opacity:0;transform:translateY(8px) scale(.98) } }
@keyframes sx-dot { 0%,80%,100% { opacity:.3;transform:none } 40% { opacity:1;transform:translateY(-3px) } }

/* ---------- Ambient page-intro glow ------------------------------------ */
main { overflow-x:clip; }
.page-intro { isolation:isolate; }
.page-intro::after { content:'';position:absolute;z-index:-1;width:560px;height:560px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 16%,transparent),transparent);animation:sx-drift 18s ease-in-out infinite alternate;pointer-events:none; }
@keyframes sx-drift { to { transform:translate(-80px,60px) scale(1.15) } }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 980px) {
  .sx-story__grid { grid-template-columns:1fr; }
  .sx-story__stage-wrap { top:calc(var(--nav-h) + 8px);z-index:2; }
  .sx-stage__body { min-height:0;padding:12px;gap:8px; }
  .sx-stage .sx-mail p { display:none; }
  .sx-step { min-height:48vh; }
  .sx-picker { grid-template-columns:1fr; }
  .sx-picker__panels { position:static; }
  .sx-process { grid-template-columns:1fr 1fr;row-gap:40px; }
  .sx-process__wire { display:none; }
  .sx-founder { grid-template-columns:1fr; }
  .sx-portrait { position:relative;top:0;max-width:440px; }
  .sx-case__grid { grid-template-columns:1fr 1fr; }
  .sx-facts { grid-template-columns:1fr 1fr; }
  .sx-row { grid-template-columns:1fr; gap:12px; }
}
@media (max-width: 700px) {
  .sx-tools,.sx-tools-why { grid-template-columns:1fr; }
  .sx-module { grid-template-columns:1fr; }
  .sx-after { border-left:0;border-top:1px solid var(--border);padding:16px 0 0; }
  .sx-case__head { grid-template-columns:1fr; }
  .sx-case__grid { grid-template-columns:1fr; }
  .sx-career li { grid-template-columns:1fr;gap:4px; }
  .sx-stage .sx-draft p,.sx-stage .sx-sent small,.sx-stage__foot,.sx-stage__bar small { display:none; }
  .sx-stage .sx-pills { display:none; }
  .sx-stage .sx-card { padding:10px 12px; }
  .sx-stage .sx-draft__actions { margin-top:4px; }
  .sx-stage .sx-fields span:nth-child(n+4) { display:none; }
  .sx-step { min-height:40vh;padding-block:20px; }
  .sx-step:first-child { min-height:30vh; }
}
@media (max-width: 460px) { .sx-process { grid-template-columns:1fr; } .sx-facts { grid-template-columns:1fr; } }

/* ---------- Reduced motion: everything settles in its final state ------ */
@media (prefers-reduced-motion: reduce) {
  .sx-marquee__track { animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:20px 40px; }
  .sx-marquee__track > span:nth-child(n+7) { display:none; }
  .sx-marquee span { gap:40px; }
  .sx-process__wire i { transform:none; }
  .sx-process .sx-node__dot { background:var(--brand);border-color:var(--brand);color:#fff; }
  .sx-mini-site b,.sx-mini-site em s,.sx-mini-ops span,.sx-mini-chat span,.sx-mini-cost i { animation:none; }
  .sx-layer,.sx-fields span { transition:none; }
}

/* ---------- 24 Sep: trust strip, founder quote, contact reassurance ------ */
.sx-trust { display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;padding-block:16px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2); }
.sx-trust span { display:inline-flex;align-items:center;gap:8px; }
.sx-trust span::before { content:'';width:6px;height:6px;border-radius:50%;background:var(--signal); }
[data-theme=light] .sx-trust span::before { background:#1f7d5f; }
.sx-quote { display:flex;gap:16px;align-items:center;margin:30px 0 0;max-width:520px; }
.sx-quote img { flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid var(--border-brand); }
.sx-quote q { display:block;font-size:.95rem;line-height:1.5;color:var(--text);quotes:'“' '”'; }
.sx-quote span { display:block;margin-top:6px;font-size:.72rem;color:var(--text-2); }
.sx-reply { margin:12px 0 0;font-size:.85rem;font-weight:500;color:var(--text); }
.sx-reply::before { content:'✓ ';color:#2f9e7a; }
.sx-book { margin-top:14px; }

/* ---------- Phones: shorter home page ------------------------------------ */
@media (max-width: 700px) {
  .sx-marquee { display:none; }
  /* The scroll story becomes a compact four-step strip. */
  .sx-story__stage-wrap { display:none; }
  .sx-story.sx-section { padding-block:50px; }
  .sx-story__head { margin-bottom:24px; }
  .sx-steps { display:grid;gap:10px;counter-reset:none; }
  .sx-step,.sx-step:first-child { min-height:0;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-solid);justify-content:flex-start; }
  .sx-js .sx-step:not(.is-current) { opacity:1; }
  .sx-step h3 { font-size:1.15rem;margin:6px 0 4px; }
  .sx-step p { font-size:.85rem;margin:0; }
  .sx-step .sx-who { margin-top:8px; }
  .sx-step .sx-note { margin-top:10px; }
  .sx-trust { gap:6px 18px;font-size:.56rem; }
  .sx-quote img { width:52px;height:52px; }
  .sx-quote q { font-size:.88rem; }
}
@media (max-width: 700px) {
  /* Compact service cards and fewer side-notes on phones. */
  .service-card p,.support-strip,.section-heading-pair .human-photo,.example-tag,.board-note { display:none; }
  .service-card { padding-bottom:26px; }
}