/* Onyx Stitch — homepage sections. Tokens only. */

/* ------------------------------------------------------------ 01 hero: the triptych cut */
.hero{min-height:100svh;padding:calc(var(--hdr) + 28px) 0 28px;display:flex;flex-direction:column;gap:28px;overflow:hidden}
.hero__grid{flex:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,3vw,56px);padding:0 var(--gut);align-items:stretch}
.hero__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(10px,3vh,40px) 0;z-index:2}
.hero__t{font:var(--fd-w) clamp(44px,5.8vw,104px)/.92 var(--fd);letter-spacing:-.045em;margin:0 0 26px}
.hero__t .hl{display:block;overflow:hidden;padding-bottom:.04em}
.hero__t .hl>*{display:inline-block}
.hero__t em{font-style:normal;font-weight:var(--fd-w-light);color:var(--acc-text)}
.hero__lead{margin-bottom:30px}
.tri{position:relative;display:flex;gap:clamp(8px,.8vw,14px);min-height:min(68vh,720px);transform:skewX(var(--skew));margin-right:calc(var(--gut) * -1 - 40px);margin-left:20px}
.tri__p{position:relative;flex:1;min-width:0;border-radius:var(--r);overflow:hidden;text-decoration:none;color:rgb(var(--paper-rgb));transition:flex-grow .9s cubic-bezier(.2,.8,.2,1);background:rgb(var(--ink-3-rgb))}
.tri:hover .tri__p{flex-grow:.7}
.tri .tri__p:hover{flex-grow:2.2}
.tri__img{position:absolute;inset:0 -30%;transform:skewX(calc(var(--skew) * -1))}
.tri__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.tri__p:hover .tri__img img{transform:scale(1.02)}
.tri__p::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(var(--ink-2-rgb) / .86) 0,rgb(var(--ink-2-rgb) / .1) 46%,transparent 70%)}
.tri__lbl{position:absolute;left:28px;right:16px;bottom:24px;z-index:2;transform:skewX(calc(var(--skew) * -1));display:flex;flex-direction:column;gap:6px;white-space:nowrap}
.tri__lbl b{font:var(--fd-w) clamp(20px,1.8vw,30px)/1 var(--fd);letter-spacing:-.02em}
.tri__lbl small{font-size:13px;color:rgb(var(--paper-rgb) / .7)}
.tri__lbl .mono{color:rgb(var(--accent-hi-rgb))}
.hero__facts{margin:0 var(--gut);background:rgb(var(--ink-2-rgb) / .5);backdrop-filter:blur(10px)}
.hero__facts .fact dd{font-size:clamp(20px,1.9vw,30px)}
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .tri{min-height:auto;height:min(62vh,520px);transform:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .tri::-webkit-scrollbar{display:none}
  .tri__p{flex:0 0 72%;scroll-snap-align:start;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);border-radius:0}
  .tri:hover .tri__p,.tri .tri__p:hover{flex-grow:0}
  .tri__img{inset:0;transform:none}
  .tri__lbl{transform:none;left:13%}
  .hero__facts{--n:2!important}
  .hero__facts .fact:last-child{grid-column:1/-1}
}
@media (max-width:560px){.tri__p{flex-basis:84%}.hero__t{font-size:clamp(40px,11.4vw,56px)}}

/* ------------------------------------------------------------ 02 ranges deck */
.ranges{background:var(--bg)}
.ranges__pin{min-height:100vh;padding:calc(var(--hdr) + 24px) 0 40px;display:flex;flex-direction:column;overflow:hidden}
.ranges__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.ranges__head .h-l{font-size:clamp(36px,4.6vw,80px)}
.rng-tabs{position:relative;display:flex;gap:4px;padding:4px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
.rng-tab{position:relative;z-index:1;display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;font:500 14px var(--fb);color:var(--mut);transition:color .4s}
.rng-tab span{font:500 11px var(--fm)}
.rng-tab.is-on{color:var(--bg)}
.rng-tabs__bar{position:absolute;top:4px;bottom:4px;left:0;border-radius:99px;background:var(--fg);transition:transform .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1)}
.ranges__stage{position:relative;flex:1;margin:0 var(--gut);min-height:560px}
.rng{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3vw,56px);align-items:stretch}
.rng__ghost{position:absolute;right:-1%;top:-6%;font:700 clamp(90px,15vw,260px)/.8 var(--fd);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgb(var(--ink-rgb) / .12);pointer-events:none;z-index:0}
.rng__media{position:relative;min-height:100%;border-radius:var(--r-l);z-index:1}
.rng__media img{position:absolute;inset:0}
.rng__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;justify-content:center;padding:12px 0}
.rng__body .h-l{font-size:clamp(40px,5vw,84px)}
.rng__prods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rng__prod{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--fg)}
.rng__prod img{aspect-ratio:1;object-fit:contain;background:rgb(var(--white-rgb));border-radius:var(--r);padding:8%;box-shadow:0 1px 0 var(--line);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rng__prod:hover img{transform:translateY(-6px)}
.rng__prod span{font-size:13px;line-height:1.3;color:var(--mut)}
.js-motion .rng:not(:first-child){visibility:hidden}
@media (max-width:900px){
  .ranges__pin{min-height:0;padding-top:clamp(80px,12vw,120px)}
  .ranges__head{flex-direction:column;align-items:flex-start}
  .rng-tabs{display:none}
  .ranges__stage{display:flex;flex-direction:column;gap:64px;min-height:0}
  .rng,.js-motion .rng:not(:first-child){position:relative;visibility:visible;grid-template-columns:1fr}
  .rng__media{aspect-ratio:4/3;min-height:0}
  .rng__ghost{top:auto;bottom:40%;font-size:24vw}
}

/* ------------------------------------------------------------ 03 deal the deck */
.sports{background:var(--bg)}
.sports__pin{min-height:100vh;padding:calc(var(--hdr) + 24px) 0 32px;display:flex;flex-direction:column;overflow:hidden}
.sports__head{display:grid;grid-template-columns:1.2fr .8fr;gap:24px 56px;align-items:end}
.sports__head .h-l{font-size:clamp(36px,4.6vw,80px)}
.deck{position:relative;flex:1;min-height:440px;margin:24px var(--gut) 18px}
.card{position:absolute;left:50%;top:50%;width:clamp(170px,15vw,250px);aspect-ratio:3/4.2;border-radius:var(--r);overflow:hidden;color:rgb(var(--paper-rgb));text-decoration:none;background:rgb(var(--ink-3-rgb));box-shadow:0 30px 60px -20px rgb(var(--ink-2-rgb) / .8);transform:translate(-50%,-50%);will-change:transform}
.card__img{position:absolute;inset:0}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__img img{transform:scale(1.08)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(var(--ink-2-rgb) / .92),transparent 58%)}
.card__ghost{position:absolute;left:12px;top:10px;z-index:2;font:700 clamp(22px,2vw,32px)/1 var(--fd);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgb(var(--paper-rgb) / .7)}
.card__foot{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:4px}
.card__foot b{font:var(--fd-w) clamp(18px,1.5vw,24px)/1 var(--fd);letter-spacing:-.02em}
.card__foot small{font-size:12px;color:rgb(var(--paper-rgb) / .7);line-height:1.3}
.card__foot .mono{font-size:11px;color:rgb(var(--accent-hi-rgb))}
.sports__foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
@media (max-width:900px){
  .sports__pin{min-height:0;padding-top:clamp(80px,12vw,120px)}
  .sports__head{grid-template-columns:1fr}
  .deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;min-height:0;margin:28px 0 20px;padding:0 var(--gut) 8px;scrollbar-width:none}
  .deck::-webkit-scrollbar{display:none}
  .card{position:relative;left:auto;top:auto;transform:none!important;flex:0 0 62%;scroll-snap-align:start;width:auto}
  .sports__foot .mono{display:none}
}

/* ------------------------------------------------------------ 04 kit lab */
.lab__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
.lab__ctrl{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.lab__ctrl fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lab__ctrl legend{color:var(--mut);margin-bottom:10px;padding:0}
.lab__sws{display:flex;flex-wrap:wrap;gap:8px}
.lab__sw{width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .18);transition:transform .3s,box-shadow .3s}
.lab__sw:hover{transform:scale(1.08)}
.lab__sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.lab__in{display:grid;grid-template-columns:120px 1fr;gap:12px}
.lab__in .field input{min-height:50px}
.lab__stage{position:relative;perspective:1200px}
.lab__shirt{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);background:radial-gradient(circle at 50% 40%,rgb(var(--ink-3-rgb)),rgb(var(--ink-2-rgb)));overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease-out}
.lab__layer{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:background-color .5s}
.lab__body{background-color:var(--lab-body);-webkit-mask-image:var(--m-all);mask-image:var(--m-all)}
.lab__pat{-webkit-mask-image:var(--m-body);mask-image:var(--m-body);opacity:.85}
.lab__pat[data-p="hoops"]{background:repeating-linear-gradient(0deg,transparent 0 7%,var(--lab-sleeve) 7% 13%)}
.lab__pat[data-p="stripes"]{background:repeating-linear-gradient(90deg,transparent 0 6%,var(--lab-sleeve) 6% 10%)}
.lab__pat[data-p="slash"]{background:linear-gradient(-58deg,transparent 0 38%,var(--lab-trim) 38% 46%,transparent 46% 50%,var(--lab-trim) 50% 53%,transparent 53%)}
.lab__pat[data-p="fade"]{background:linear-gradient(to bottom,transparent 30%,var(--lab-sleeve))}
.lab__sleeve{background-color:var(--lab-sleeve);-webkit-mask-image:var(--m-sleeve);mask-image:var(--m-sleeve)}
.lab__trim{background-color:var(--lab-trim);-webkit-mask-image:var(--m-trim);mask-image:var(--m-trim)}
.lab__shade{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
.lab__print{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:var(--m-body);mask-image:var(--m-body);-webkit-mask-size:100% 100%;mask-size:100% 100%;color:var(--lab-print);mix-blend-mode:normal}
.lab__team{position:absolute;left:50%;top:38%;transform:translateX(-50%);font:700 clamp(14px,1.6vw,22px)/1 var(--fd);letter-spacing:.08em;white-space:nowrap;opacity:.95}
.lab__num{position:absolute;left:50%;top:44%;transform:translateX(-50%);font:700 clamp(64px,8vw,130px)/1 var(--fd);letter-spacing:-.04em}
.lab__crest{position:absolute;left:58%;top:24%;width:7%}
.lab__crest svg{width:100%;fill:currentColor}
.lab .note{margin-top:12px;text-align:center}
@media (max-width:900px){.lab__grid{grid-template-columns:1fr}.lab__stage{order:-1}}

/* ------------------------------------------------------------ 05 index */
.ix{padding:clamp(90px,12vw,180px) 0}
.ix__list{border-top:1px solid var(--line)}
.ix__row{position:relative;display:grid;grid-template-columns:120px 1.3fr 1.6fr auto;gap:24px;align-items:center;min-height:96px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);transition:padding .5s cubic-bezier(.2,.8,.2,1),color .3s}
.ix__row:hover{padding-left:18px;color:var(--acc-text)}
.ix__thumb{display:none}
.ix__name{font:var(--fd-w) clamp(26px,3.4vw,54px)/1 var(--fd);letter-spacing:-.035em}
.ix__desc{font-size:15px;color:var(--mut);max-width:44ch}
.ix__go{display:inline-flex;align-items:center;gap:10px;font:500 13px var(--fm);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ix__go svg{width:16px}
.ix__n{color:var(--mut)}
.ix__float{position:fixed;left:0;top:0;width:clamp(220px,20vw,320px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.6);will-change:transform}
.ix__float img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .ix__row{grid-template-columns:72px 1fr;grid-template-areas:"t n" "t name" "t desc";gap:4px 16px;min-height:0}
  .ix__thumb{display:block;grid-area:t;width:72px;height:90px;border-radius:10px;overflow:hidden}
  .ix__thumb img{width:100%;height:100%;object-fit:cover}
  .ix__n{grid-area:n}.ix__name{grid-area:name;font-size:clamp(24px,7vw,34px)}.ix__desc{grid-area:desc;font-size:14px}
  .ix__go{display:none}.ix__float{display:none}
}

/* ------------------------------------------------------------ 06 compare */
.cmp__grid{display:grid;grid-template-columns:1fr minmax(0,.95fr);gap:clamp(32px,5vw,96px);align-items:center}
.cmp__list{list-style:none;padding:0;margin:28px 0 32px;display:grid;gap:12px}
.cmp__list li{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.cmp__list b{font:var(--fd-w) 24px/1 var(--fd);color:var(--acc-text)}
.cmp__list span{color:var(--mut)}
@media (max-width:900px){.cmp__grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------ 07 fabric zoom + swatch library */
.fab{background:var(--bg)}
.fab__pin{position:relative;height:100vh;overflow:hidden}
.fab__wide{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgb(var(--ink-3-rgb)),rgb(var(--ink-2-rgb)))}
.fab__wide img{height:86%;width:auto;object-fit:contain;transform-origin:52% 38%}
.fab__macro{position:absolute;inset:0;clip-path:circle(0% at 52% 42%)}
.fab__macro img{width:100%;height:100%;object-fit:cover}
.fab__copy{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,72px);z-index:2;pointer-events:none}
.fab__copy .lead{color:rgb(var(--paper-rgb) / .78)}
.fab__copy .h-l{color:rgb(var(--paper-rgb));text-shadow:0 4px 40px rgb(var(--ink-2-rgb) / .6)}
.fab__lib{padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(90px,12vw,160px)}
.sws{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sw{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;color:var(--fg);cursor:none}
.sw__img{display:block;width:100%;aspect-ratio:1;border-radius:var(--r);background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 1px 0 var(--line)}
.sw:hover .sw__img{transform:translateY(-4px)}
.sw__n{font:var(--fd-w) 19px/1.1 var(--fd);margin-top:8px}
.sw__d{font-size:14px;color:var(--mut);line-height:1.45}
.loupe{position:fixed;left:0;top:0;width:180px;height:180px;border-radius:50%;pointer-events:none;z-index:45;border:2px solid rgb(var(--paper-rgb));box-shadow:0 20px 50px rgb(var(--ink-2-rgb) / .5);background-repeat:no-repeat;opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.loupe.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:900px){.sws{grid-template-columns:1fr 1fr}.sw{cursor:pointer}.fab__pin{height:auto;min-height:0}.fab__wide{position:relative;aspect-ratio:4/5}.fab__macro{display:none}.fab__copy{position:relative;bottom:auto;padding-top:28px}.fab__copy .h-l{color:var(--fg)}.fab__copy .lead{color:var(--mut)}}

/* ------------------------------------------------------------ 08 decoration switcher */
.deco__grid{display:grid;grid-template-columns:240px 1fr 320px;gap:clamp(18px,2.4vw,40px);align-items:stretch}
.deco__tabs{display:flex;flex-direction:column;gap:4px}
.deco__tab{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 18px;border-radius:var(--r);text-align:left;font:600 16px var(--fb);color:var(--mut);transition:background .4s,color .4s}
.deco__tab .mono{color:var(--acc-text)}
.deco__tab[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.deco__tab:hover{color:var(--fg)}
.deco__tab[aria-selected="true"]:hover{color:var(--bg)}
.deco__stage{position:relative;aspect-ratio:16/10;border-radius:var(--r-l)}
.deco__img{position:absolute;inset:0;clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.deco__img:first-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.deco__img img{width:100%;height:100%;object-fit:cover}
.deco__scan{position:absolute;top:-10%;bottom:-10%;width:3px;background:var(--accent);box-shadow:0 0 24px 4px rgb(var(--accent-rgb) / .6);left:-5%;transform:skewX(-14deg);opacity:0}
.deco__info{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.deco__txt{display:none}
.deco__txt.is-on{display:block}
.deco__txt .h-m{margin-bottom:16px}
@media (max-width:1100px){.deco__grid{grid-template-columns:1fr}.deco__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none}.deco__tab{flex:none;min-height:48px}}

/* ------------------------------------------------------------ 09 process track */
.proc{background:var(--bg)}
.proc__pin{min-height:100vh;padding:calc(var(--hdr) + 24px) 0 32px;display:flex;flex-direction:column;overflow:hidden}
.proc__head{display:grid;grid-template-columns:1.2fr .8fr;gap:24px 56px;align-items:end;margin-bottom:28px}
.proc__head .h-l{font-size:clamp(36px,4.6vw,80px)}
.proc__track{position:relative;flex:1;display:flex;align-items:center}
.proc__thread{position:absolute;left:0;top:calc(50% - 28px);height:40px;width:calc(8 * clamp(300px,28vw,420px));fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:10 8;z-index:0}
.proc__row{position:relative;display:flex;gap:clamp(18px,2vw,32px);padding:0 var(--gut);will-change:transform}
.st{position:relative;flex:0 0 clamp(280px,26vw,400px);display:flex;flex-direction:column;gap:12px}
.st__img{aspect-ratio:4/3;border-radius:var(--r)}
.st__n{position:absolute;top:12px;left:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:rgb(var(--paper-rgb));font:600 14px var(--fm);z-index:2}
.st p{font-size:15px;margin:0}
.proc__foot{margin-top:20px}
@media (max-width:900px){
  .proc__pin{min-height:0;padding-top:clamp(80px,12vw,120px)}
  .proc__head{grid-template-columns:1fr}
  .proc__thread{display:none}
  .proc__row{flex-direction:column;gap:36px;border-left:2px dashed rgb(var(--accent-rgb) / .6);margin-left:var(--gut);padding-left:22px;padding-right:var(--gut)}
  .st{flex:none}
}

/* ------------------------------------------------------------ 10 why */
.why__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,96px);align-items:center}
.why__media{position:relative;aspect-ratio:4/5}
.why__a{position:absolute;inset:0 18% 18% 0}
.why__b{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1;box-shadow:0 30px 60px -25px rgb(var(--ink-2-rgb) / .5);border:6px solid var(--bg)}
.why__list{list-style:none;padding:0;margin:32px 0;display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.why__list li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.why__list p{margin:0;font-size:15px}
@media (max-width:900px){.why__grid{grid-template-columns:1fr}.why__list{grid-template-columns:1fr}}

.fab__pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgb(var(--ink-2-rgb) / .88),transparent);pointer-events:none;z-index:1}
@media (max-width:900px){.fab__pin::after{display:none}}

/* ------------------------------------------------------------ reduced motion / no JS: complete static layouts, no pins */
html:not(.js-motion) .ranges__pin,html:not(.js-motion) .sports__pin,html:not(.js-motion) .proc__pin{min-height:0;padding-top:clamp(90px,10vw,140px)}
html:not(.js-motion) .rng-tabs{display:none}
html:not(.js-motion) .ranges__stage{display:flex;flex-direction:column;gap:72px;min-height:0}
html:not(.js-motion) .rng{position:relative;visibility:visible;min-height:520px}
html:not(.js-motion) .deck{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;min-height:0}
html:not(.js-motion) .card{position:relative;left:auto;top:auto;transform:none!important;width:auto}
html:not(.js-motion) .fab__pin{height:auto}
html:not(.js-motion) .fab__wide{position:relative;aspect-ratio:16/9}
html:not(.js-motion) .fab__wide img{height:100%}
html:not(.js-motion) .fab__macro,html:not(.js-motion) .fab__pin::after{display:none}
html:not(.js-motion) .fab__copy{position:relative;bottom:auto;padding-top:32px}
html:not(.js-motion) .fab__copy .h-l{color:var(--fg);text-shadow:none}
html:not(.js-motion) .fab__copy .lead{color:var(--mut)}
html:not(.js-motion) .proc__thread{display:none}
html:not(.js-motion) .proc__row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
html:not(.js-motion) .st{flex:none}
@media (max-width:900px){html:not(.js-motion) .deck{grid-template-columns:1fr 1fr}html:not(.js-motion) .proc__row{grid-template-columns:1fr}html:not(.js-motion) .rng{min-height:0}}