/* Page-specific rules, ported from the design canvas. Shared rules live in base.css. */
.sn{--ss:oklch(0.47 0.13 255);--ring:oklch(0.86 0.15 90)}
.pad{display:flex;flex-direction:column;gap:10px;padding:14px 16px 11px;border-radius:13px;background:#fff;border:1px solid rgba(16,18,27,.07);box-shadow:0 24px 48px -24px rgba(25,29,58,.45),0 1px 3px rgba(16,18,27,.1);color:oklch(0.24 0.012 275);font-family:var(--hand)}
.pad-body{display:flex;gap:9px}
.pad-dot{width:6px;height:6px;flex:none;margin-top:7px;border-radius:50%;background:var(--accent)}
.pad-text{margin:0;font-size:14.5px;line-height:1.5;letter-spacing:.07em}
.pad-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid oklch(0.945 0.003 275);font-family:var(--mono);font-size:10px;color:oklch(0.5 0.014 275)}
.step{display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.shot{position:relative;height:236px;border-radius:10px;background:var(--wall);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ring{box-shadow:0 0 0 3px var(--ring)}
.cursor{position:absolute;width:20px;height:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.ss{width:290px;display:flex;flex-direction:column;gap:9px;padding:16px 16px 14px;background:var(--ss);color:#fff;box-shadow:0 18px 36px -18px rgba(10,30,70,.6)}
.ss-title{font-size:17px;font-weight:600;line-height:1.2}
.ss-text{font-size:10.5px;line-height:1.45;color:rgba(255,255,255,.92)}
.ss-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.ss-btn{font-size:10.5px;padding:5px 14px;border:1px solid rgba(255,255,255,.85);color:#fff}
@media (max-width:760px){.wrap{padding-inline:20px}.nav-links{display:none !important}.h1{font-size:40px !important}.sec{padding-top:56px !important;padding-bottom:72px !important}}