.types-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(36px,4vw,52px);display:grid}.types-grid.two-by-two{grid-template-columns:repeat(2,1fr)}.type-card{border:1px solid var(--rule-strong);background:var(--paper);min-height:232px;color:var(--ink);flex-direction:column;padding:30px 28px 26px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;position:relative}.type-card:hover{border-color:var(--ink);box-shadow:7px 7px 0 0 var(--cream), 7px 7px 0 1px var(--rule);transform:translateY(-4px)}.type-card .tc-n{font-family:var(--mono);letter-spacing:.14em;color:var(--muted);font-size:11px}.type-card h3{letter-spacing:-.02em;max-width:18ch;margin-top:14px;font-size:clamp(22px,2.1vw,28px);line-height:1.08}.type-card p{color:color-mix(in oklab, var(--ink) 78%, transparent);margin-top:12px;font-size:15.5px;line-height:1.5}.type-card .tc-go{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);align-items:center;gap:8px;margin-top:auto;padding-top:22px;font-size:12px;display:inline-flex}.type-card .tc-go .arr{transition:transform .2s}.type-card:hover .tc-go{color:var(--accent)}.type-card:hover .tc-go .arr{transform:translate(4px)}.type-card .tc-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.type-card .tc-ico{width:27px;height:27px;color:var(--ink);flex:none}.type-card .tc-ico svg{width:100%;height:100%;display:block}.type-card:has(.tc-slot){flex-direction:row;align-items:stretch;gap:24px;min-height:202px;padding:26px}.type-card .tc-slot{border:1px solid var(--rule-strong);background:var(--cream);flex:none;align-self:center;width:150px;height:150px}.type-card:hover .tc-slot{border-color:var(--ink)}.type-card .tc-slot img{object-fit:contain;width:100%;height:100%;display:block}.type-card .tc-body{flex-direction:column;flex:1;min-width:0;display:flex}.type-card.utility{background:var(--ink);border-color:var(--ink);color:var(--paper)}.type-card.utility .tc-n{color:#f7f2e48c}.type-card.utility p{color:#f7f2e4bd}.type-card.utility .tc-go,.type-card.utility .tc-ico{color:var(--accent)}.type-card.utility:hover{box-shadow:7px 7px #0b08352e}@media (max-width:1000px){.types-grid{grid-template-columns:1fr 1fr}}@media (max-width:560px){.types-grid,.types-grid.two-by-two{grid-template-columns:1fr}}