.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}.tl-grid.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(18px,2vw,26px);border:1.5px solid var(--line-strong);border-radius:26px;background:var(--surface-solid);color:var(--text);text-decoration:none;transition:border-color .35s var(--ease),transform .45s var(--ease)}.tl-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.tl-prev{position:relative;display:flex;align-items:center;justify-content:center;height:112px;border-radius:18px;background:var(--surface-2);overflow:hidden}.tl-card h3{margin:6px 0 0;font-size:var(--fs-h3,20px);font-weight:700;line-height:1.2;letter-spacing:-.025em}.tl-card p{margin:0;font-size:var(--fs-sm,14px);line-height:1.6;color:var(--text-soft)}.tl-go{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px;font-size:var(--fs-sm,14px);font-weight:750}.tl-go i{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid currentColor;border-radius:50%;font-style:normal;transition:transform .4s var(--ease),background-color .3s,border-color .3s,color .3s}.tl-steps{position:relative;display:flex;justify-content:space-between;width:78%}.tl-steps::before,.tl-steps::after{content:"";position:absolute;top:50%;left:8px;right:8px;height:2px;margin-top:-1px;background:var(--line-strong)}.tl-steps::after{right:auto;width:calc(100% - 16px);background:var(--accent);-webkit-transform:scaleX(.25);transform:scaleX(.25);-webkit-transform-origin:left;transform-origin:left;transition:transform .9s var(--ease)}.tl-steps b{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-solid);border:1.5px solid var(--line-strong);font-size:12px;font-weight:800;color:var(--text);transition:background-color .3s,border-color .3s,color .3s}.tl-steps b:first-child{background:var(--accent);border-color:var(--accent);color:#fff}.tl-ring{width:84px;height:84px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tl-ring circle{fill:none;stroke-width:9}.tl-ring .t{stroke:var(--line-strong)}.tl-ring .f{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:170;transition:stroke-dashoffset 1s var(--ease)}.tl-ring-num{position:absolute;font-size:22px;font-weight:900;letter-spacing:-.04em}.tl-bars{display:flex;flex-direction:column;gap:9px;width:74%}.tl-bars span{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;font-size:11px;font-weight:800;color:var(--text-soft)}.tl-bars i{display:block;height:8px;border-radius:8px;background:var(--line-strong);overflow:hidden}.tl-bars i::after{content:"";display:block;height:100%;width:var(--w,40%);border-radius:8px;background:var(--accent);-webkit-transform:scaleX(.35);transform:scaleX(.35);-webkit-transform-origin:left;transform-origin:left;transition:transform .9s var(--ease)}@media (hover:hover){.tl-card:hover{border-color:var(--accent);-webkit-transform:translateY(-4px);transform:translateY(-4px)}.tl-card:hover .tl-go i{background:var(--accent);border-color:var(--accent);color:#fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.tl-card:hover .tl-steps::after{-webkit-transform:scaleX(1);transform:scaleX(1)}.tl-card:hover .tl-steps b{background:var(--accent);border-color:var(--accent);color:#fff}.tl-card:hover .tl-ring .f{stroke-dashoffset:40}.tl-card:hover .tl-bars i::after{-webkit-transform:scaleX(1);transform:scaleX(1)}}@media (max-width:940px){.tl-grid,.tl-grid.is-two{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,46%);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain;overscroll-behavior-y:auto;-ms-scroll-chaining:none;touch-action:pan-x pan-y;scrollbar-width:none;padding-bottom:4px}.tl-grid::-webkit-scrollbar{display:none}.tl-card{scroll-snap-align:start}}@media (max-width:680px){.tl-grid,.tl-grid.is-two{grid-auto-columns:84%}.tl-card{border-radius:22px}.tl-prev{height:96px}}@media (prefers-reduced-motion: reduce){.tl-card,.tl-go i,.tl-steps::after,.tl-ring .f,.tl-bars i::after{transition:none !important}}
