/* Stand Out landing page: black, gold, oversized type */
.so main{background:#0a0a0a;color:#fff}
.so main h1,.so main h2,.so main h3{color:#fff;overflow-wrap:break-word}
.so .so-kicker{display:block;margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.so .so-fine{font-size:12px;line-height:1.7;color:#b9bec9}
.so main :focus-visible{outline-color:#7db4ff}
/* hero */
.so-hero{position:relative;padding:120px 0 100px;overflow:hidden;background:#0a0a0a}
.so-hero::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(to bottom,var(--gold) 0 18px,transparent 18px 36px)}
.so-hero h1{font-size:clamp(44px,8.2vw,118px);line-height:.96;letter-spacing:-.05em;font-weight:600;max-width:1100px}
.so-hero h1 em{color:var(--gold);display:block}
.so-lede{max-width:640px;margin-top:34px;font-size:21px;line-height:1.6;color:#c9cdd6}
.so-hero .button-row{margin-top:38px}
.so-note{margin-top:30px;font-size:13px;letter-spacing:.06em;color:#b9bec9}
/* usual vs diamond */
.so-vs{background:#0a0a0a;padding:0 0 70px}
.so-vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.so-usual,.so-diamond{padding:60px 48px}
.so-usual{background:#171717;color:#c3c7d0}
.so-diamond{background:var(--gold);color:#0a0a0a}
.so-diamond .so-kicker{color:#0a0a0a}
.so-vs ul{list-style:none;margin:0;padding:0}
.so-vs li{display:flex;gap:16px;align-items:baseline;font-size:clamp(20px,2.1vw,28px);line-height:1.25;letter-spacing:-.02em;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.so-diamond li{border-bottom-color:rgba(10,10,10,.25);font-weight:500}
.so-vs li span{flex:none;font-weight:700}
.so-usual li span{color:#8e94a1}
.so-caption{margin-top:18px;font-size:13px;color:#b9bec9}
/* films */
.so-films{padding:90px 0 50px;background:#0a0a0a}
.so-films h2,.so-how h2,.so-face h2{font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.045em;max-width:900px}
.so-panel{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;margin-top:64px}
.so-panel:nth-of-type(even){grid-template-columns:5fr 7fr}
.so-panel:nth-of-type(even) .so-film{order:2}
.so-film{position:relative;display:block;width:100%;padding:0;background:#000;border-radius:4px;overflow:hidden;aspect-ratio:16/9;text-align:left}
.so-film img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.so-film:hover img{transform:scale(1.03)}
.so-play{position:absolute;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;background:var(--gold);color:#0a0a0a;display:grid;place-items:center;font-size:20px;padding-left:4px}
.so-watch{position:absolute;left:0;bottom:0;padding:9px 14px;background:rgba(0,0,0,.85);color:#fff;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.so-num{display:block;font-size:clamp(60px,8vw,110px);line-height:1;font-weight:600;letter-spacing:-.05em;color:var(--gold)}
.so-copy h3{font-size:clamp(28px,3vw,40px);margin-top:10px}
.so-copy p{color:#c3c7d0;font-size:18px}
.so-films .so-fine{margin-top:50px}
/* how */
.so-how{padding:80px 0;background:#111}
.so-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid #3a3a3a}
.so-steps article{padding:34px 30px 10px 0;border-right:1px solid #3a3a3a;margin-right:30px}
.so-steps article:last-child{border-right:0;margin-right:0}
.so-steps span{display:block;font-size:14px;font-weight:600;letter-spacing:.18em;color:var(--gold)}
.so-steps h3{font-size:30px;margin-top:14px}
.so-steps p{color:#c3c7d0}
/* face */
.so-face{padding:90px 0;background:#0a0a0a}
.so-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.so-two article{border:1px solid #4a4a4a;border-radius:4px;padding:38px}
.so main .so-two h3{font-size:28px;color:var(--gold)}
.so-two p{color:#c9cdd6}
/* close */
.so-close{background:var(--gold);color:#0a0a0a;padding:100px 0}
.so main .so-close h2{font-size:clamp(40px,7vw,100px);line-height:.98;letter-spacing:-.05em;color:#0a0a0a;max-width:1000px}
.so-close .button-row{margin-top:40px}
.so-close .so-fine{color:#2b2410;margin-top:28px;max-width:640px}
.so main .so-close :focus-visible{outline-color:#0a0a0a}
.so .dark-btn{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.so .dark-btn:hover{background:#262626;color:#fff}
.so .ghost-dark{background:transparent;border-color:#0a0a0a;color:#0a0a0a}
.so .ghost-dark:hover{background:rgba(10,10,10,.1);color:#0a0a0a}
@media(max-width:850px){
 .so-hero{padding:70px 0 64px}.so-hero::before{display:none}
 .so-vs-grid{grid-template-columns:1fr}.so-usual,.so-diamond{padding:40px 24px}
 .so-panel,.so-panel:nth-of-type(even){grid-template-columns:1fr;gap:22px;margin-top:48px}.so-panel:nth-of-type(even) .so-film{order:0}
 .so-steps{grid-template-columns:1fr}.so-steps article{border-right:0;margin-right:0;border-bottom:1px solid #3a3a3a;padding:28px 0}
 .so-two{grid-template-columns:1fr}.so-two article{padding:28px}
 .so-close{padding:70px 0}
}
@media(prefers-reduced-motion:reduce){.so-film img{transition:none}.so-film:hover img{transform:none}}
