/* =============================================================
   TK-HOW — V38 Stage K trust-kit. "How it works" 5-step decode
   list. Ported from homepage-37-opta.html .v37b-honest / .v37b-steps
   / .hr-card (renamed tk-*).
   ============================================================= */
.tk-how { padding: clamp(48px,6vw,76px) 0; }
.tk-how-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,6vw,80px);
  align-items: center;
}
.tk-how .tk-how-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pink-dark);
  margin-bottom: 14px;
}
.tk-how h2 {
  font-family: 'Fraunces', serif; font-size: clamp(28px,3.4vw,42px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px;
}
.tk-how .tk-how-lead {
  font-size: 16px; line-height: 1.55; color: var(--mute); max-width: 50ch; margin: 0 0 26px;
}
.tk-how-steps { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--rule); }
.tk-how-steps li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: baseline;
  padding: 15px 2px; border-bottom: 1px solid var(--rule);
}
.tk-how-steps .tk-how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--lemon-2);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--ink);
}
.tk-how-steps b { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--ink); font-size: 16px; display: block; }
.tk-how-steps .tk-how-desc { color: var(--mute); font-size: 14px; margin-top: 2px; }
.tk-how-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.tk-how-card {
  position: relative;
  background: linear-gradient(160deg, var(--ink), #001F2E);
  border-radius: 18px; padding: 30px 28px; color: #fff;
  box-shadow: 0 18px 42px rgba(14,42,58,.18);
  overflow: hidden; max-width: 420px; margin: 0 auto;
}
.tk-how-card .tk-hc-top {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 24px;
}
.tk-how-card .tk-hc-rows { display: flex; flex-direction: column; gap: 0; }
.tk-how-card .tk-hc-row {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.1); padding: 13px 0;
}
.tk-how-card .tk-hc-row:last-child { border-bottom: 0; }
.tk-how-card .tk-hc-k { font-size: 13px; color: rgba(255,255,255,.55); }
.tk-how-card .tk-hc-v { font-size: 14px; font-weight: 600; color: #fff; }
.tk-how-card .tk-hc-v.tk-hc-teal { color: #5FD0E6; }
.tk-how-beam {
  position: absolute; left: 0; right: 0; height: 64px; top: -64px;
  background: linear-gradient(180deg, transparent, rgba(0,181,216,.30), transparent);
  animation: tkHrScan 3.4s cubic-bezier(.4,0,.2,1) infinite; pointer-events: none;
}
@keyframes tkHrScan { 0% { top: -64px; } 100% { top: 100%; } }
.tk-how-corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(0,181,216,.7); }
.tk-how-corner.tk-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.tk-how-corner.tk-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.tk-how-corner.tk-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.tk-how-corner.tk-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .tk-how-beam { display: none; } }
@media (max-width: 860px) { .tk-how-inner { grid-template-columns: 1fr; gap: 34px; } .tk-how-visual { order: -1; } }