.sf36{background:#f6f7f7;color:#17212a}.sf36-hero{padding:100px max(6vw,45px) 90px;display:grid;grid-template-columns:1fr .9fr;gap:65px;align-items:center;background:linear-gradient(135deg,#f8f9f8,#e9efeb)}.sf36 h1{font-size:clamp(3rem,5.3vw,5.7rem);line-height:.97;letter-spacing:-.065em;margin:12px 0 25px}.sf36 h1 em{font-family:Georgia,serif;font-weight:400}.sf36 .lead{max-width:760px;color:#68777d;line-height:1.75}.sf-mock{background:#17212a;color:#fff;border-radius:15px;padding:18px;box-shadow:0 24px 55px rgba(20,30,35,.12)}.searchbox{background:#fff;color:#17212a;border-radius:7px;padding:12px;font-size:.5rem;display:flex;gap:8px}.searchbox kbd{margin-left:auto;border:0;background:#eef2f0;border-radius:9px;padding:3px 7px;font-size:.35rem}.sf-mock .result{background:#253139;border:1px solid #354249;border-radius:7px;padding:12px;margin-top:7px}.sf-mock .result small,.sf-mock .result b,.sf-mock .result span{display:block}.sf-mock .result small{font-size:.34rem;color:#839197}.sf-mock .result b{font-size:.55rem;margin:4px 0}.sf-mock .result span{font-size:.39rem;color:#98a5aa}.mock-foot{display:flex;justify-content:space-between;margin-top:10px;color:#819096;font-size:.36rem}.sf36-intro{padding:105px max(7vw,55px);display:grid;grid-template-columns:1fr 1fr;gap:90px;max-width:1500px;margin:auto}.sf36-intro h2,.section-head h2,.sf36-saved h2,.sf36-final h2{font-size:clamp(2.4rem,4vw,4.2rem);line-height:1;letter-spacing:-.055em;margin:8px 0}.sf36-intro>div:last-child{padding-top:25px}.sf36-intro p:not(.eyebrow),.sf36-saved>div>p:not(.eyebrow),.sf36-final p:not(.eyebrow){color:#6d7b81;line-height:1.75}.sf36-demo{background:#fff;padding:100px max(6vw,45px)}.section-head{max-width:900px;margin-bottom:35px}.section-head>p:not(.eyebrow){color:#728087}.demo-shell{display:grid;grid-template-columns:.62fr 1.38fr;gap:10px;max-width:1350px;margin:auto}.demo-tools{background:#eef2f0;border-radius:10px;padding:16px}.live-search{background:#fff;border:1px solid #d8dede;border-radius:7px;padding:9px;display:flex;gap:7px;align-items:center}.live-search input{border:0;outline:0;width:100%;font-size:.48rem}.filters{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}.filters button{border:1px solid #d4dcda;background:#fff;border-radius:13px;padding:5px 8px;font-size:.39rem;cursor:pointer}.filters button.active{background:#17212a;color:#fff}.extra-filter{display:grid;grid-template-columns:1fr 1fr;gap:7px}.extra-filter label{font-size:.39rem;color:#718087}.extra-filter select{display:block;width:100%;margin-top:4px;border:1px solid #d5dddb;border-radius:5px;background:#fff;padding:7px;font-size:.4rem}.demo-results{border:1px solid #dce2e3;border-radius:10px;padding:15px;min-height:410px}.result-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e5e5;padding-bottom:10px}.result-head span{font-size:.42rem;color:#748289}.result-head button{border:0;background:#17212a;color:#fff;border-radius:5px;padding:7px 9px;font-size:.38rem;cursor:pointer}.search-result{display:grid;grid-template-columns:80px 1fr auto;gap:10px;border-bottom:1px solid #e5e9e8;padding:11px 3px;align-items:center}.search-result>small{font-size:.34rem;color:#829096}.search-result b,.search-result span{display:block}.search-result b{font-size:.5rem}.search-result span{font-size:.39rem;color:#7d8a90;margin-top:3px}.search-result em{font-size:.35rem;font-style:normal;background:#eef2f0;border-radius:10px;padding:4px 7px}.no-results{text-align:center;color:#819096;font-size:.47rem;padding:60px 10px}.saved-view{font-size:.4rem;color:#65826d;margin-top:10px}.sf36-ways{padding:100px max(6vw,45px)}.way-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.way-grid article{background:#fff;border:1px solid #dfe4e5;border-radius:10px;padding:20px;min-height:180px}.way-grid span{font-size:1.5rem;color:#d5dcdd;font-weight:800}.way-grid h3{font-size:.85rem}.way-grid p{font-size:.5rem;color:#718087;line-height:1.6}.sf36-saved{background:#17212a;color:#fff;padding:95px max(7vw,55px);display:grid;grid-template-columns:1fr 1fr;gap:70px}.sf36-saved>div>p:not(.eyebrow){color:#9facb1}.saved-list p{display:grid;grid-template-columns:1fr auto auto;gap:8px;border-bottom:1px solid #354148;padding:13px 0;margin:0;align-items:center}.saved-list b{font-size:.46rem}.saved-list span{font-size:.39rem;color:#8e9ca2}.saved-list em{font-size:.34rem;font-style:normal;border:1px solid #46545b;border-radius:9px;padding:3px 6px}.sf36-context{padding:100px max(6vw,45px);text-align:center}.sf36-context .section-head{margin-left:auto;margin-right:auto}.context-flow{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}.context-flow span{background:#fff;border:1px solid #dce2e3;border-radius:6px;padding:11px;font-size:.43rem;font-weight:800}.context-flow i{font-style:normal;color:#89979d}.sf36-context>p{max-width:760px;margin:22px auto;color:#718087;font-size:.52rem}.sf36-examples{background:#e9eeeb;padding:100px max(6vw,45px)}.example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.example-grid a{background:#fff;border-radius:10px;padding:22px;min-height:225px;text-decoration:none;color:#17212a;display:flex;flex-direction:column}.example-grid small{font-size:.42rem;color:#849197}.example-grid h3{font-size:.9rem}.example-grid p{font-size:.52rem;color:#718087;line-height:1.6}.example-grid span{margin-top:auto;font-size:.49rem;font-weight:800}.sf36-final{margin:35px max(4vw,25px);padding:65px max(5vw,45px);background:#fff;border:1px solid #dfe4e5;border-radius:20px;display:flex;justify-content:space-between;align-items:end;gap:50px}.sf36-final p:not(.eyebrow){max-width:760px}.sf36-final .btn{white-space:nowrap}
@media(max-width:950px){.sf36-hero,.sf36-intro,.demo-shell,.sf36-saved{grid-template-columns:1fr}.way-grid,.example-grid{grid-template-columns:1fr 1fr}.sf36-final{display:block}.sf36-final .btn{display:inline-block;margin-top:20px}}
@media(max-width:600px){.sf36-hero,.sf36-intro,.sf36-demo,.sf36-ways,.sf36-saved,.sf36-context,.sf36-examples{padding:65px 18px}.way-grid,.example-grid{grid-template-columns:1fr}.extra-filter{grid-template-columns:1fr}.search-result{grid-template-columns:60px 1fr}.search-result em{grid-column:2}.sf36-final{margin:20px 12px;padding:45px 22px}}