html,body{overflow-x:clip}
body{background:var(--cream)}
.s2{--feather:60vh;--sw:clamp(380px,34vw,500px);--bz:12px;--nl:min(17vw,250px);position:relative;z-index:5;margin-top:calc(-1*var(--feather));color:var(--navy);
 background:linear-gradient(180deg,rgba(250,246,240,0) 0,rgba(250,246,240,.02) calc(var(--feather)*.14),rgba(214,190,178,.08) calc(var(--feather)*.28),rgba(226,204,190,.2) calc(var(--feather)*.42),rgba(240,222,210,.42) calc(var(--feather)*.58),rgba(247,238,230,.7) calc(var(--feather)*.74),rgba(250,246,240,.92) calc(var(--feather)*.88),#FAF6F0 var(--feather))}
.s2-in{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--sw) + 2*var(--bz)) minmax(0,.62fr);column-gap:5vw;padding:calc(var(--feather) - 20vh) 6vw 26vh}
.s2-copy{grid-column:1;align-self:start;position:sticky;top:26vh;margin-top:22vh;display:flex;flex-direction:column;gap:22px;opacity:0;transform:translateY(24px);transition:opacity 900ms var(--ease-calm),transform 900ms var(--ease-calm)}
.s2-copy.in{opacity:1;transform:none}
.s2-eye{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--coral-text)}
.s2-eye::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--coral)}
.s2 h2{margin:0;font-size:clamp(40px,4.4vw,74px);font-weight:600;line-height:1.18;letter-spacing:-.005em;color:var(--navy)}
.s2-p{margin:0;font-size:clamp(17px,1.3vw,20px);font-weight:400;line-height:1.85;color:var(--ink);max-width:24em;text-wrap:pretty}
.s2-keys{display:none}
.s2-prod{grid-column:2;position:relative;margin:0;width:calc(var(--sw) + 2*var(--bz))}
.s2-dev{padding:var(--bz);border-radius:calc(var(--sw)*.118);background:#0B1020;box-shadow:0 60px 100px -50px rgba(30,42,74,.5),0 0 0 1px rgba(30,42,74,.06);transform-origin:0 0;will-change:transform,opacity}
.s2-scr{overflow:hidden;border-radius:calc(var(--sw)*.1);background:var(--cream)}
.s2-scr img{display:block;width:100%}
.s2-note{position:absolute;direction:ltr;display:flex;align-items:center;gap:14px;top:calc(var(--bz) + var(--sw)*var(--y)/1068);left:calc(-1*var(--nl));width:calc(var(--nl) + var(--bz) + var(--sw)*var(--x)/1068 + 6px);transform:translateY(-50%);pointer-events:none}
.s2-lb{direction:rtl;font-size:18px;font-weight:600;color:var(--navy);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity 600ms var(--ease-calm) 380ms,transform 600ms var(--ease-calm) 380ms}
.s2-ln{flex:1;height:1px;background:var(--slate);opacity:.55;transform:scaleX(0);transform-origin:100% 50%;transition:transform 700ms var(--ease-calm) 120ms}
.s2-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(232,115,90,.18);font-size:0;color:transparent;font-style:normal;transform:scale(0);transition:transform 420ms var(--ease-calm)}
.s2-note.in .s2-lb{opacity:1;transform:none}.s2-note.in .s2-ln{transform:scaleX(1)}.s2-note.in .s2-dot{transform:scale(1)}
.s2.rm .s2-copy,.s2.rm .s2-lb,.s2.rm .s2-ln,.s2.rm .s2-dot{transform:none}
.s2.rm .s2-ln,.s2.rm .s2-dot{opacity:0;transition:opacity 500ms var(--ease-calm)}
.s2.rm .s2-note.in .s2-ln{opacity:.55}.s2.rm .s2-note.in .s2-dot{opacity:1}
body{--hf:1}
.stage .copy,.stage .top,.stage .phases{opacity:var(--hf)}
.stage .signals,.stage .cue{opacity:min(var(--hf),1)!important}
body.hf-out .stage .signals{opacity:0!important}
@media (min-width:760px) and (max-width:1179px){
 .s2{--sw:clamp(320px,38vw,440px)}
 .s2-in{grid-template-columns:minmax(0,1fr) calc(var(--sw) + 2*var(--bz))}
 .s2-keys{display:flex;flex-direction:column;gap:12px;margin:8px 0 0;padding:0;list-style:none}
 .s2-keys li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--navy)}
 .s2-keys b{width:26px;height:26px;border-radius:50%;background:var(--coral);color:var(--white);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
 .s2-note{width:auto;gap:0;left:calc(var(--bz) + var(--sw)*var(--x)/1068 - 32px)}
 .s2-lb,.s2-ln{display:none}
 .s2-dot{width:26px;height:26px;font-size:13px;font-weight:700;color:var(--white);display:grid;place-items:center;box-shadow:0 0 0 3px var(--cream)}
}
.s2.mob{--feather:44vh;--sw:calc(var(--mw,100vw) - 48px);--bz:0px}
.s2.mob .s2-in{display:block;padding:calc(var(--feather) - 2vh) 24px 12vh}
.s2.mob .s2-copy{position:static;margin:0;gap:16px}
.s2.mob h2{font-size:clamp(34px,9.6vw,44px)}
.s2.mob .s2-p{font-size:16px;line-height:1.8}
.s2.mob .s2-keys{display:flex;flex-direction:column;gap:10px;margin:6px 0 0;padding:0;list-style:none}
.s2.mob .s2-keys li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:var(--navy)}
.s2.mob .s2-keys b{width:24px;height:24px;border-radius:50%;background:var(--coral);color:var(--white);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.s2.mob .s2-prod{margin-top:36px}
.s2.mob .s2-note{width:auto;gap:0;left:calc(var(--bz) + var(--sw)*var(--x)/1068 - 29px)}
.s2.mob .s2-lb,.s2.mob .s2-ln{display:none}
.s2.mob .s2-dot{width:24px;height:24px;font-size:13px;font-weight:700;color:var(--white);display:grid;place-items:center;box-shadow:0 0 0 3px var(--cream)}
.s2.mob .s2-prod{margin-top:28px;width:var(--sw)}
.s2.mob .s2-dev{padding:0;background:none;border-radius:26px;box-shadow:0 30px 60px -36px rgba(30,42,74,.4),0 0 0 1px rgba(30,42,74,.08)}
.s2.mob .s2-scr{border-radius:26px;height:calc(var(--sw)*1660/1068);-webkit-mask-image:linear-gradient(180deg,#000 92%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 92%,rgba(0,0,0,0))}
.s2.mob .s2-keys{margin-top:4px}