/* AmbientOS scroll engine styles, ported from wordpress/scrolly/engine.py (BASE_CSS) for the aos/story block.
   Light only (Slate HQ Native tokens from tokens.css); no colour wash, no gradients, no eyebrows.
   Every rule is scoped under .sx. Copyright © 2026 Slate HQ Ltd. All rights reserved and asserted. */
.sx{--sx-bg:var(--aos-bg);--sx-ink:var(--aos-ink);--sx-ink2:var(--aos-ink2);--sx-ink3:var(--aos-ink3);--sx-sep:var(--aos-sep);--sx-glass:var(--aos-surface);--sx-glass-line:var(--aos-line);--sx-accent:var(--aos-accent);--sx-frame:var(--aos-ink3);--sx-font:var(--aos-font);position:relative;isolation:isolate;background:var(--sx-bg);color:var(--sx-ink);font:17px/1.47 var(--sx-font);letter-spacing:-.011em;overflow:clip}
.sx *{box-sizing:border-box}
.sx img{max-width:100%;display:block;height:auto}
.sx a{color:inherit}
.sx .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sx section.ch{min-height:100svh;padding:110px 0 140px;display:flex;align-items:center;margin:0}
.sx section.ch>.wrap{width:100%}
.sx h1,.sx h2,.sx h3,.sx h4{font-family:var(--sx-font);color:var(--sx-ink)!important}
.sx h1,.sx h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04}
.sx h1{font-size:clamp(44px,9vw,104px)}
.sx h2{font-size:clamp(36px,6.4vw,72px)}
.sx p{margin:0}
.sx .lede{font-size:clamp(19px,2.3vw,26px);line-height:1.35;color:var(--sx-ink2);margin:22px 0 0;max-width:760px;letter-spacing:-.018em}
.sx .quote{font-size:clamp(20px,2.4vw,28px);line-height:1.35;margin:34px 0 0;max-width:820px;font-weight:500}
.sx .cite{font-size:14px;color:var(--sx-ink3);margin-top:14px}
.sx.sx-js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.sx.sx-js .reveal.in{opacity:1;transform:none}
.sx .d1{transition-delay:.12s}
.sx .d2{transition-delay:.24s}
.sx .d3{transition-delay:.36s}
.sx .delta{display:inline-block;color:var(--sx-ink)}
.sx .cue{margin-top:70px;font-size:14px;color:var(--sx-ink3);display:flex;align-items:center;gap:10px}
.sx .cue i{width:22px;height:34px;border:1.5px solid var(--sx-ink3);border-radius:12px;position:relative}
.sx .cue i:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--sx-ink3);animation:sxcue 1.8s infinite}
.sx .scrolly{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.sx .stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;grid-column:2;grid-row:1}
.sx .stage-col{display:flex;flex-direction:column;align-items:center}
.sx .steps{grid-column:1;grid-row:1}
.sx .step{min-height:90svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.28;transition:opacity .5s}
.sx .step:first-child{min-height:100svh}
.sx .step.on{opacity:1}
.sx .step h3{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;line-height:1.08;margin:0}
.sx .step p{font-size:19px;color:var(--sx-ink2);margin:14px 0 0;max-width:460px}
.sx .step .n{font-size:13px;font-weight:600;color:var(--sx-accent);margin:0 0 10px;letter-spacing:.02em}
.sx .phone{height:min(78svh,700px);aspect-ratio:1320/2868;border-radius:56px;padding:9px;background:transparent;border:1.5px solid var(--sx-frame);position:relative;flex:none;box-sizing:content-box}
.sx .screen{position:relative;width:100%;height:100%;border-radius:47px;overflow:hidden;background:transparent}
.sx .view{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.sx .view.on{opacity:1;transform:none}
.sx .caption{font-size:12px;color:var(--sx-ink3);text-align:center;margin-top:12px}
.sx .deck{position:relative;width:min(560px,92vw);aspect-ratio:var(--ar,1122/618)}
.sx .deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:22px;opacity:0;transform:translateY(30px) scale(.96);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.sx .deck img.on{opacity:1;transform:none}
.sx .deck img.past{opacity:0;transform:translateY(-30px) scale(.94)}
.sx .evbox{position:relative;width:min(460px,92vw);height:min(440px,62svh)}
.sx .evp{position:absolute;inset:0;padding:22px 20px;border-radius:28px;background:var(--sx-glass);border:.5px solid var(--sx-glass-line);color:var(--sx-ink);opacity:0;transform:translateY(18px) scale(.98);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.sx .evp.on{opacity:1;transform:none}
.sx .evp h4{margin:0 0 4px;font-size:22px;letter-spacing:-.02em;color:var(--sx-ink)}
.sx .evp .k{font-size:13px;color:var(--sx-ink3);margin:0 0 14px}
.sx .file{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:.5px solid var(--sx-sep)}
.sx .file i{width:34px;height:42px;border-radius:6px;background:#d5d9e0;flex:none;position:relative}
.sx .file.gone{opacity:.35;text-decoration:line-through}
.sx .lost{margin-top:16px;padding:12px 14px;border-radius:16px;background:rgba(127,127,127,.12);color:var(--sx-ink);font-size:15px}
.sx .ev{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0;border-bottom:.5px solid var(--sx-sep);font-size:14.5px}
.sx .ev time{color:var(--sx-ink3);font-variant-numeric:tabular-nums}
.sx .ev b{font-weight:600}
.sx .ev span{display:block;color:var(--sx-ink3);font-size:12.5px}
.sx .ev.new{background:rgba(127,127,127,.12);border-radius:10px;padding-left:6px}
.sx .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sx .tag{font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(127,127,127,.12);color:var(--sx-ink2);border:0}
.sx .tag.g{background:rgba(127,127,127,.12);color:var(--sx-ink2)}
.sx .rows{margin-top:40px;max-width:820px}
.sx .rows .r{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:20px 0;border-top:.5px solid var(--sx-sep)}
.sx .rows .r:last-child{border-bottom:.5px solid var(--sx-sep)}
.sx .rows .r b{font-size:19px;letter-spacing:-.02em}
.sx .rows .r span{color:var(--sx-ink2);font-size:18px}
.sx .tl{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:28px;margin-top:56px;max-width:1100px}
.sx .tl div{border-top:2px solid var(--sx-accent);padding-top:14px}
.sx .tl b{display:block;font-size:22px;letter-spacing:-.02em}
.sx .tl span{color:var(--sx-ink2);font-size:16px}
.sx .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px}
.sx .split h3{font-size:26px;margin:0 0 8px;letter-spacing:-.025em}
.sx .split p{color:var(--sx-ink2);margin:0 0 18px;font-size:18px}
.sx .media{display:flex;gap:22px;align-items:flex-end;margin-top:56px}
.sx .media .shot{flex:1;border-radius:20px;overflow:hidden}
.sx .media .ph{width:220px;flex:none;border-radius:36px;padding:6px;border:1.5px solid var(--sx-frame);background:transparent}
.sx .media .ph img{display:block;width:100%;border-radius:30px}
.sx .media.center{justify-content:center}
.sx .addr{display:flex;align-items:center;gap:10px;margin-top:28px;max-width:560px;padding:10px 10px 10px 16px;border-radius:16px;background:rgba(127,127,127,.12);font:15px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.sx .addr code{flex:1;overflow-wrap:anywhere}
.sx .addr button{font:600 14px var(--sx-font);border:0;border-radius:999px;padding:8px 14px;background:var(--sx-glass);color:var(--sx-ink);cursor:pointer}
.sx .term{margin-top:28px;max-width:560px;padding:18px 20px;border-radius:18px;background:var(--aos-fill2);color:var(--sx-ink);font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.sx .term span{display:block;color:var(--sx-ink3)}
.sx .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.sx .cards a{display:block;padding:22px 20px;border-radius:22px;border:.5px solid var(--sx-sep);background:var(--sx-glass);text-decoration:none}
.sx .cards b{display:block;font-size:22px;letter-spacing:-.02em}
.sx .cards span{display:block;margin-top:6px;color:var(--sx-ink2);font-size:15px}
.sx .demo{position:relative;width:min(440px,92vw);height:min(520px,66svh)}
.sx .demo .dp{position:absolute;inset:0;padding:22px 20px;border-radius:28px;background:var(--sx-glass);border:.5px solid var(--sx-glass-line);display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.sx .demo .dp.on{opacity:1;transform:none}
.sx .demo .dp>*{opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.sx .demo .dp.on>*{opacity:1;transform:none}
.sx .demo .dp.on>:nth-child(2){transition-delay:.25s}
.sx .demo .dp.on>:nth-child(3){transition-delay:.6s}
.sx .demo .dp.on>:nth-child(4){transition-delay:.95s}
.sx .demo .dp.on>:nth-child(5){transition-delay:1.3s}
.sx .demo .who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sx-ink3)}
.sx .demo .who b{font-size:15px;color:var(--sx-ink);font-weight:700;letter-spacing:-.01em}
.sx .demo .me{align-self:flex-end;max-width:82%;padding:10px 14px;border-radius:18px 18px 6px 18px;background:var(--sx-ink);color:var(--sx-bg);font-size:15px;line-height:1.35}
.sx .demo .it{align-self:flex-start;max-width:88%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:rgba(127,127,127,.12);font-size:15px;line-height:1.4}
.sx .demo .mem{border:.5px solid var(--sx-sep);border-radius:16px;padding:10px 12px;font-size:14px;line-height:1.35}
.sx .demo .mem small{display:block;font-size:12px;color:var(--sx-ink3);margin-bottom:3px}
.sx .demo .src{display:flex;flex-wrap:wrap;gap:6px}
.sx .demo .src span{font-size:12px;padding:5px 9px;border-radius:999px;background:rgba(127,127,127,.12);color:var(--sx-ink2)}
.sx .demo .models{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:rgba(127,127,127,.12);font-size:13px;font-weight:600;text-align:center}
.sx .demo .models span{position:relative;z-index:1;padding:8px 0;color:var(--sx-ink2)}
.sx .demo .models i{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;background:var(--sx-glass);border:.5px solid var(--sx-glass-line);animation:sxmodel 7.5s ease-in-out infinite}
.sx .demo .ask{border:.5px solid var(--sx-sep);border-radius:18px;padding:12px 14px;font-size:14.5px}
.sx .demo .ask .row{display:flex;gap:8px;margin-top:10px}
.sx .demo .ask .row span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(127,127,127,.12)}
.sx .demo .ask .row span:first-child{background:var(--sx-ink);color:var(--sx-bg)}
.sx .demo .split2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sx .demo .split2 div{border:.5px solid var(--sx-sep);border-radius:14px;padding:10px 12px;font-size:13px;color:var(--sx-ink2)}
.sx .demo .split2 b{display:block;color:var(--sx-ink);font-size:14px}
.sx .vstage{display:flex;justify-content:center;margin-top:56px}
.sx .vstage .phone{height:min(80svh,720px)}
.sx .vid{display:block;width:100%;height:100%;object-fit:cover}
.sx .frames{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.sx .frames .ph{margin:0;border-radius:30px;padding:6px;border:1.5px solid var(--sx-frame)}
.sx .frames .ph img{display:block;width:100%;border-radius:24px}
.sx .frames figcaption{font-size:14px;color:var(--sx-ink3);text-align:center;margin-top:10px}
.sx .chainline{display:flex;flex-wrap:wrap;gap:10px 8px;margin-top:40px;align-items:center;font-size:17px;color:var(--sx-ink2)}
.sx .chainline b{color:var(--sx-ink);font-weight:600}
.sx .wm-ent{font-size:clamp(44px,7vw,84px);line-height:1.05;letter-spacing:-.035em;font-weight:400;margin:0}
.sx .wm-ent b{font-weight:800}
.sx .wm-ent .erp{color:#00875A}
.sx .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:48px}
.sx .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;border:.5px solid var(--sx-glass-line);background:var(--sx-glass);}
.sx .btn.primary{background:var(--sx-ink);color:var(--sx-bg);border-color:transparent}
.sx .fine{font-size:14px;color:var(--sx-ink3);margin-top:16px;max-width:760px}
.sx a:focus-visible,.sx button:focus-visible{outline:2px solid var(--sx-accent);outline-offset:3px}
@media (max-width:820px){.sx section.ch{padding:96px 0 120px}
.sx .scrolly{display:block}
.sx .stage{height:100svh;top:0;align-items:flex-start;padding-top:72px}
.sx .steps{position:relative;z-index:2;margin-top:-100svh}
.sx .step,.sx .step:first-child{min-height:100svh;justify-content:flex-end;padding:0 0 108px;opacity:1}
.sx .step>div{background:var(--sx-glass);border:.5px solid var(--sx-glass-line);border-radius:24px;padding:18px 20px;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.sx .step.on>div{opacity:1;transform:none}
.sx .step h3{font-size:24px}
.sx .step p{font-size:16px;margin-top:8px}
.sx .phone{height:max(330px,calc(100svh - 330px));border-radius:40px;padding:8px}
.sx .screen{border-radius:33px}
.sx .evbox{height:min(400px,52svh)}
.sx .demo{height:min(470px,58svh)}
.sx .cards{grid-template-columns:1fr}
.sx .split{grid-template-columns:1fr;gap:32px}
.sx .rows .r{grid-template-columns:1fr;gap:4px}
.sx .tl{grid-template-columns:1fr;gap:18px}
.sx .media{flex-direction:column;align-items:stretch}
.sx .media .ph{width:60%;margin:0 auto}
.sx .frames{grid-template-columns:repeat(2,1fr);gap:14px}
.sx .vstage .phone{height:min(72svh,620px)}}
@media (prefers-reduced-motion:reduce){.sx *,.sx *:before,.sx *:after{transition:none!important;animation:none!important}
.sx.sx-js .reveal{opacity:1;transform:none}}
@keyframes sxcue{0%{transform:translateY(0);opacity:1}80%{transform:translateY(10px);opacity:0}100%{opacity:0}}
@keyframes sxmodel{0%,26%{transform:translateX(0)}33%,59%{transform:translateX(100%)}66%,92%{transform:translateX(200%)}100%{transform:translateX(0)}}