/* Ways to work together: four cards in a 2x2 grid. Big outlined number, arrow link, smooth dark fill on hover. */
.ways2 { background: #fff; }
.wk__title { margin-top: clamp(1.5rem, 3vw, 3rem); max-width: 14ch; font-size: clamp(2.2rem, 1rem + 4.4vw, 5.4rem); font-weight: 700; letter-spacing: -0.065em; line-height: .96; text-transform: uppercase; word-spacing: .1em; color: var(--ink-2); }
.wk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(1.8rem, 4vw, 3.2rem); }
.wk__grid > li { display: flex; }
.wk__card { position: relative; flex: 1; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.4rem, 2.8vw, 2.4rem); min-height: 280px; border-radius: 22px; overflow: hidden; isolation: isolate; background: #f1f1f4; color: var(--ink-2); outline-offset: 4px; transition: color .5s ease; }
/* the dark fill is its own layer, so it fades smoothly instead of snapping between two backgrounds */
.wk__card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(80% 90% at 100% 0%, rgba(178,102,255,.55), rgba(178,102,255,0) 70%), linear-gradient(160deg, #2a1650, #0e0c18); transition: opacity .6s ease; }
.wk__no { position: absolute; right: clamp(1rem, 2vw, 1.8rem); top: .3rem; font-size: clamp(5rem, 3rem + 6vw, 9rem); font-weight: 700; letter-spacing: -0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(11,11,14,.16); transition: -webkit-text-stroke-color .6s ease; pointer-events: none; }
.wk__card h3 { position: relative; margin-top: clamp(2.4rem, 5vw, 4rem); font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.3rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.04; max-width: 16ch; }
.wk__card p { position: relative; max-width: 46ch; color: var(--ink-3); letter-spacing: -0.02em; line-height: 1.5; transition: color .5s ease; }
.wk__go { position: relative; display: inline-flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .6rem; font-size: .9rem; font-weight: 700; color: var(--purple); transition: color .5s ease; }
.wk__go svg { width: 24px; height: 12px; transition: transform .5s var(--ease); }
.wk__card:hover, .wk__card:focus-visible { color: #fff; }
.wk__card:hover::before, .wk__card:focus-visible::before { opacity: 1; }
.wk__card:hover .wk__no, .wk__card:focus-visible .wk__no { -webkit-text-stroke-color: rgba(255,255,255,.35); }
.wk__card:hover p, .wk__card:focus-visible p { color: rgba(255,255,255,.86); }
.wk__card:hover .wk__go, .wk__card:focus-visible .wk__go { color: #fff; }
.wk__card:hover .wk__go svg, .wk__card:focus-visible .wk__go svg { transform: translateX(6px); }
.wk__foot { margin-top: clamp(1.4rem, 3vw, 2.4rem); color: var(--ink-3); letter-spacing: -0.02em; }
.wk__foot .link-arrow { margin-left: .4rem; font-weight: 600; color: var(--ink-2); }
@media (max-width: 720px) { .wk__grid { grid-template-columns: 1fr; } .wk__card { min-height: 0; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .wk__card, .wk__card::before, .wk__no, .wk__card p, .wk__go, .wk__go svg { transition: none; } }
.wk__go i { font-style: normal; }