/* ================= WINDING STEPS (.wind, phone round 2, 2026-10-12) =================
   A static numbered step list ("How it works": 4 cards on desktop) winds down a phone screen two per row instead of a plain column
   (user: a straight column of step cards "doesn't look nice"; same idea as the Shopify "Behind the store" path):
   1 → 2, round the right edge, 3 ← 4, round the left edge, 5 → 6. One line runs through every step's icon box and fills up to the picked step;
   numbers sit before the titles; the picked step's text sits in a fixed-height card under the path (picking never moves the page).
   Desktop keeps the page's own layout (the icon box and the card exist on phones only). Behaviour: js/mk-wind.js (itbWind(list)).
   Markup: <div class="xx-steps wind"><div data-ic="contract" style="--sc:var(--c-web)"><span class="n">01</span><h3>Brief</h3><p>…</p></div>…</div> */
.wind > div > .ti,.wind-det,.wind-line{display:none}
@media (max-width:760px){
 .wind{display:grid!important;grid-template-columns:1fr 1fr!important;row-gap:1.75rem!important;column-gap:0!important;position:relative;counter-reset:wind;
   margin:.75rem 0 1.5rem!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;overflow:visible!important}
 .wind > div{counter-increment:wind;position:relative;z-index:1;display:grid!important;grid-template-columns:none!important;justify-items:center;align-content:start;gap:.5rem!important;
   min-height:44px;padding:0!important;border:0!important;background:none!important;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .wind > div:nth-of-type(1){grid-area:1/1}.wind > div:nth-of-type(2){grid-area:1/2}.wind > div:nth-of-type(3){grid-area:2/2}
 .wind > div:nth-of-type(4){grid-area:2/1}.wind > div:nth-of-type(5){grid-area:3/1}.wind > div:nth-of-type(6){grid-area:3/2}
 .wind > div > .ti{display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--plane-2);color:var(--sc,var(--accent));
   transition:background var(--fast),border-color var(--fast),box-shadow var(--fast)}
 .wind > div > .ti svg{width:1.5rem;height:1.5rem}
 .wind > div.w-lit > .ti{background:color-mix(in srgb,var(--sc,var(--accent)) 16%,var(--plane-2));border-color:var(--sc,var(--accent))}
 .wind > div.w-cur > .ti{box-shadow:0 0 0 .3125rem color-mix(in srgb,var(--sc,var(--accent)) 28%,transparent)}
 .wind > div > .n,.wind > div > p{display:none!important}
 .wind > div > h3{grid-column:auto!important;max-width:10rem;font:500 15px/1.3 var(--body)!important;color:var(--muted);transition:color var(--fast)}
 .wind > div > h3::before{content:counter(wind);margin-right:.375rem;font:600 .875rem var(--body);color:var(--accent)}
 .wind > div.w-lit > h3{color:var(--text)}
 .wind > div:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}
 .wind-line{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
 .wind-line path{fill:none;stroke-width:2}
 .wind-line .bg{stroke:var(--line-strong)}
 .wind-line .fg{stroke:var(--accent);transition:stroke-dashoffset 480ms var(--ease)}
 .wind-det{display:grid;gap:.25rem;align-content:start;margin:-.25rem 0 0;padding:.875rem 1rem;border-radius:var(--r);background:var(--gw,var(--plane));box-shadow:var(--gw-edge,none);
   font-size:15px;line-height:1.45;color:var(--muted)}
 .wind-det b{font:500 1rem var(--body);color:var(--text)}
}