.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:20px 0 8px}.step{border:1px solid rgba(9,132,255,.14);border-radius:16px;overflow:hidden;background:#fff}.step .shot{background:#f5f9ff;height:200px;display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:1px solid rgba(9,132,255,.14)}.step .shot img.real{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 8px 22px #10141c2e}.step .txt{padding:16px 20px;font-size:18px;color:#5c6570}.step .txt b{color:#262a31;font-weight:600}.step .txt>b:first-child{display:block;margin-bottom:3px;font-size:18px;font-weight:700}.step .txt>b:first-child em{font-style:normal;color:#0984ff;margin-right:8px}.step .txt>b:first-child em:after{content:"."}.mock-tv{width:100%;max-width:250px;aspect-ratio:16/9;background:linear-gradient(#10141c,#1a2230);border-radius:10px;box-shadow:0 10px 24px #10141c40;padding:12px 14px;color:#f2f2f2;display:flex;flex-direction:column;gap:6px}.mock-tv .bigcode{flex:1;display:flex;align-items:center;justify-content:center;font-family:ivypresto-display,"DM Serif Display",Georgia,serif;font-size:30px;letter-spacing:6px}.mock-tv .codehint{text-align:center;font-size:9.5px;opacity:.6;margin-bottom:2px}.mock-tv .appgrid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;align-items:center}.mock-tv .app{aspect-ratio:1;border-radius:7px;background:#ffffff24}.mock-tv .app.callie{background:#d6f0f5;outline:2px solid #fff;outline-offset:2px;display:flex;align-items:center;justify-content:center}.mock-tv .app.callie svg{width:100%;height:auto;display:block}.mock-web{width:100%;max-width:240px;background:#fff;border:1px solid rgba(9,132,255,.14);border-radius:12px;box-shadow:0 10px 24px #10141c1a;overflow:hidden}.mock-web .bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid rgba(9,132,255,.14);background:#f5f9ff}.mock-web .bar i{width:8px;height:8px;border-radius:50%;background:#0984ff40}.mock-web .bar span{flex:1;text-align:center;font-size:9.5px;color:#5c6570;background:#fff;border-radius:999px;padding:2px 8px;border:1px solid rgba(9,132,255,.14)}.mock-web .inner{padding:12px}.mock-web .cardline{font-size:11px;font-weight:700;margin-bottom:7px}.mock-web .dashcard{border:1.5px dashed rgba(9,132,255,.35);border-radius:10px;padding:9px 10px}.mock-web .coderow{display:flex;gap:6px;margin-top:7px}.mock-web .codebox{flex:1;border:1px solid rgba(9,132,255,.14);border-radius:7px;padding:5px 8px;font-size:12px;letter-spacing:3px;color:#262a31}.mock-web .go{background:#262a31;color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:5px 11px;display:flex;align-items:center}.mock-web .go.blue{background:#0984ff}.mock-web .urlbox{border:1px solid rgba(9,132,255,.14);border-radius:7px;padding:5px 8px;font-size:9.5px;color:#5c6570;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mock-phone{width:130px;background:#fff;border:1px solid rgba(9,132,255,.14);border-radius:18px;box-shadow:0 10px 24px #10141c1f;padding:12px 11px 14px}.mock-phone .notch{width:44px;height:4px;border-radius:999px;background:#0984ff2e;margin:0 auto 10px}.mock-phone .prow{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#262a31;padding:6px 2px;border-bottom:1px solid rgba(9,132,255,.14)}.mock-phone .prow:last-child{border-bottom:0}.mock-phone .prow .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}.mock-phone .prow .info{margin-left:auto;width:14px;height:14px;border-radius:50%;border:1.5px solid #0984FF;color:#0984ff;font-size:9px;display:flex;align-items:center;justify-content:center;font-style:italic;font-family:Georgia,serif}.mock-phone .prow .sub{color:#5c6570;font-weight:400}.mock-phone.wide{width:190px}.mock-phone.wide .photogrid i{aspect-ratio:4/3}.mock-phone .toggle{margin-left:auto;width:26px;height:15px;border-radius:999px;background:#0984ff33;position:relative}.mock-phone .toggle.on{background:#2eb872}.mock-phone .toggle i{position:absolute;top:1.5px;left:1.5px;width:12px;height:12px;border-radius:50%;background:#fff}.mock-phone .toggle.on i{left:auto;right:1.5px}.mock-phone .photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}.mock-phone .photogrid i{aspect-ratio:1;border-radius:4px}@media(max-width:760px){.steps{grid-template-columns:1fr}}