.ck-size-tool { display: grid; grid-template-columns: minmax(220px, .8fr) 1.5fr; gap: 22px; padding: 22px; border-radius: var(--ck-radius-md); background: linear-gradient(110deg, #f3f7fd, #eef4ff); border: 1px solid #e0e8f4; }
.ck-size-tool__intro h2 { margin: 0; font-family: var(--ck-font-display); font-size: 1.45rem; letter-spacing: -.035em; }
.ck-size-tool__intro p:not(.ck-eyebrow) { margin: 8px 0 15px; color: #394353; font-size: .86rem; }
.ck-size-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: stretch; }
.ck-size-steps li { position: relative; min-height: 112px; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; justify-content: center; border-radius: 10px; background: var(--ck-color-white); border: 1px solid #e4eaf2; }
.ck-size-steps li::after { content: "→"; position: absolute; right: -8px; top: 50%; z-index: 2; transform: translateY(-50%); color: var(--ck-color-navy); font-weight: 900; }
.ck-size-steps li:last-child::after { display: none; }
.ck-size-steps span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #edf4ff; color: var(--ck-color-blue-hover); font-size: .76rem; font-weight: 900; }
.ck-size-steps strong { font-size: .76rem; line-height: 1.25; }
.ck-size-steps em { align-self: flex-start; padding: 5px 8px; border-radius: 6px; background: var(--ck-color-lime); color: var(--ck-color-navy); font-size: .82rem; font-style: normal; font-weight: 900; }