@layer components{.matter .ph-head{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;gap:28px clamp(30px,5vw,80px);margin-bottom:clamp(44px,6vw,80px);display:grid}.matter .ph-head .t-l{max-width:44ch;margin-top:18px}.matter .ph-start{border-radius:var(--r-lg);align-items:flex-start;gap:16px;padding:22px 24px;display:flex}.matter .ph-start-ico{color:#fff;background:linear-gradient(135deg,#a394ea,#e3a4cb);border-radius:14px;flex:none;place-items:center;width:44px;height:44px;display:grid}.matter .ph-start-ico svg{width:22px;height:22px}.matter .ph-start b{margin-bottom:4px;font-size:1.1rem;font-weight:580;font-stretch:106%;display:block}.matter .ph-start p{color:var(--mute);margin:0;font-size:.95rem}.matter .ph-center{text-align:center;grid-template-columns:minmax(0,1fr);justify-items:center}.matter .ph-center .t-l{margin-inline:auto}.matter .stairs svg.curve{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease) .2s}.matter .stairs.ph-drawn svg.curve{clip-path:inset(0)}.matter .ph-num{font-family:var(--mono);color:var(--cobalt-ink);margin-bottom:4px;font-size:.78rem;display:block}.matter .ph-step .spec svg{animation:5s ease-in-out infinite ph-float;animation-delay:calc(var(--i,0) * -1.2s);transition:transform .5s var(--ease)}@keyframes ph-float{0%,to{translate:0}50%{translate:0 -8px}}.matter .ph-step{transition:opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease)}.matter .ph-step:hover .spec svg{transform:scale(1.06)}.matter .ph-step:hover h3{color:var(--cobalt-ink)}.matter .ph-step h3{transition:color .3s}.matter .ph-foot{border-radius:var(--r-lg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 28px;margin-top:clamp(40px,6vw,70px);padding:20px 24px;display:flex}.matter .ph-foot p{max-width:70ch;color:var(--mute);margin:0}.matter .ph-foot b{color:var(--ink);margin-right:4px;font-weight:580}@media (max-width:1080px){.matter .ph-head{grid-template-columns:minmax(0,1fr)}.matter .stairs svg.curve{clip-path:none}}}