/* SafeSpace "Prototypes" showcase */
.ssx{position:relative;isolation:isolate;margin:0 calc(-1 * var(--edge)) 0 calc(-1 * (var(--gutter) - 52px));min-height:760px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 96px;background:linear-gradient(180deg,#e0e9e5,#c8d8d4);color:#2f2a27;font-family:'Hanken Grotesk',system-ui,sans-serif}
.ssx-text{max-width:520px;display:flex;flex-direction:column;align-items:flex-start}
.ssx-eyebrow{margin:0 0 14px;font:400 12px/1.2 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#2a6f75}
.ssx-title{margin:0;font:300 80px/1 'Newsreader',Georgia,serif;letter-spacing:-.025em;color:#2f2a27}
.ssx-sub{margin:10px 0 0;font:300 24px/1.3 'Newsreader',Georgia,serif;color:#3f3a36}
.ssx-link{margin:22px 0 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ssx-link a{font:500 16px/1.3 'Hanken Grotesk',system-ui,sans-serif;color:#9b4a38;transition:color .2s cubic-bezier(.23,1,.32,1)}
.ssx-link a:hover{color:#2f2a27}
.ssx-link small{font:400 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6b635c}
.ssx-tabs{margin-top:64px;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ssx-tab{position:relative;background:none;border:0;padding:16px 0 4px;text-align:left;cursor:pointer;font:400 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6b635c;transition:color .2s cubic-bezier(.23,1,.32,1)}
.ssx-tab:hover,.ssx-tab[aria-selected=true]{color:#2f2a27}
.ssx-tab:focus-visible{outline:2px solid #9b4a38;outline-offset:4px}
.ssx-tab::before,.ssx-tab::after{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.ssx-tab::before{background:rgba(47,42,39,.16)}
.ssx-tab::after{background:#2f2a27;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ssx-cap{margin:14px 0 0;min-height:3.2em;font:400 16px/1.55 'Hanken Grotesk',system-ui,sans-serif;color:#3f3a36;max-width:30em}
.ssx-cap.swap{animation:ssxcap .4s cubic-bezier(.23,1,.32,1)}
@keyframes ssxcap{from{opacity:0}}

.ssx-stage{display:flex;justify-content:center}
.ssx-phone{width:240px;height:500px;box-sizing:border-box;padding:8px;border-radius:40px;background:#14121c;box-shadow:0 40px 60px -20px rgba(30,60,60,.35);transform:rotate(3deg);animation:ssxfloat 7.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ssxfloat{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
.ssx-screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#14121c}
.ssx-screen img{position:absolute;left:0;top:30px;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top;opacity:0;transition:opacity .4s cubic-bezier(.23,1,.32,1)}
.ssx-screen img.on{opacity:1}
.ssx-screen .miss{background:repeating-linear-gradient(135deg,#d9e2df 0 10px,#e8eeec 10px 20px)}
.ssx-notch{position:absolute;z-index:2;top:8px;left:50%;width:64px;height:18px;margin-left:-32px;border-radius:9px;background:#05040a}

@media (max-width:900px){
  .ssx{grid-template-columns:1fr;padding:48px 24px;min-height:0;gap:40px;margin-left:calc(-1 * var(--gutter) + 52px)}
  .ssx-title{font-size:clamp(48px,14vw,80px)}
  .ssx-tabs{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
  .ssx-phone{animation:none}
  .ssx-screen img,.ssx-link a,.ssx-tab{transition:none}
  .ssx-cap.swap{animation:none}
}