/* "How to use Lokka" block on the main page: two scenarios with tabs. Placed by howto-ui.js. */
.howto{margin:34px 0;padding:clamp(22px,4vw,42px);border:1px solid #d8dfd3;border-radius:24px;background:linear-gradient(135deg,#e6eee3 0%,#f8f6ef 74%)}
.howto[hidden]{display:none}
.howto-head{max-width:720px;margin-bottom:22px}
.howto-head .eyebrow{margin-bottom:10px;color:#6e806e}
.howto-head h2{margin:0 0 9px;font:700 clamp(27px,3.2vw,39px)/1.08 var(--font-display);letter-spacing:-.045em}
.howto-head p:last-child{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.howto-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.howto-tab{padding:11px 18px;border:1px solid #d7dfd4;border-radius:999px;background:rgba(255,253,248,.9);color:var(--ink);font:600 14px var(--font-display);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.howto-tab:hover{border-color:var(--green)}
.howto-tab[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff}
.howto-tab:focus-visible,.howto-cta:focus-visible{outline:3px solid #f2c94c;outline-offset:2px}
.howto-panel[hidden]{display:none}
.howto-lead{margin:0 0 16px;color:var(--ink);font-size:15px;line-height:1.55}
.howto-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.howto-step{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid #e0e1d9;border-radius:17px;background:rgba(255,253,248,.92)}
.howto-num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--green);color:#fff;font:700 13px var(--font-display)}
.howto-step-head{display:flex;align-items:center;gap:13px}
.howto-step strong{display:block;font:700 17px/1.2 var(--font-display);letter-spacing:-.025em}
.howto-shot{display:block;margin-top:auto;overflow:hidden;border:1px solid #e0e1d9;border-radius:12px;background:#f4efe7;pointer-events:none;user-select:none}
.howto-shot{max-height:250px}
.howto-shot img{display:block;width:100%;height:auto}
.howto-step p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.howto-keep{margin:16px 0;padding:14px 18px;border-radius:14px;background:#f2e9c7;color:#4a3d10;font-size:14px;line-height:1.5}
.howto-cta{margin-top:2px}
@media(max-width:760px){.howto-steps{grid-template-columns:1fr}}