/* =============================================================
   TK-PERSONAS — V38 Stage K trust-kit. Six-card illustrated
   "which of these is you" switchboard. Ported from
   homepage-37-opta.html .v9-switchboard / .v9-sw (renamed tk-*).
   ============================================================= */
.tk-personas {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.tk-personas .tk-p-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 18px; margin-bottom: 32px;
}
.tk-personas .tk-p-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--pink);
  display: inline-flex; align-items: center; gap: 8px;
}
.tk-personas .tk-p-eyebrow::before { content: '\2605'; color: var(--lemon); }
.tk-personas h2 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.05;
  color: var(--ink); margin: 6px 0 0; letter-spacing: -.01em; max-width: 860px;
}
.tk-personas h2 em { font-style: italic; color: var(--pink); font-weight: 500; }
.tk-personas .tk-p-sub {
  font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(14,42,58,.7);
  max-width: 380px; text-align: right; line-height: 1.5;
}
@media (max-width: 620px) {
  .tk-personas .tk-p-sub { text-align: left; max-width: none; }
}
.tk-p-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .tk-p-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tk-p-grid { grid-template-columns: 1fr; } }

.tk-p-card {
  position: relative;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
  font-family: inherit; color: var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.tk-p-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}
.tk-p-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.tk-p-card .tk-p-scene {
  position: relative;
  height: 190px;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  background: var(--cream);
}
.tk-p-card .tk-p-scene svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.tk-p-card .tk-p-body {
  padding: 20px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.tk-p-card h3 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 21px; line-height: 1.16; margin: 0;
  letter-spacing: -.005em;
}
.tk-p-card .tk-p-body p {
  font-size: 13.5px; line-height: 1.5; color: rgba(14,42,58,.78); margin: 0;
}
.tk-p-card .tk-p-foot {
  display: flex; align-items: center; justify-content: flex-start;
  margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(14,42,58,.2);
}
.tk-p-card .tk-p-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s ease;
}
.tk-p-card:hover .tk-p-cta { gap: 12px; }

.tk-p-card.tk-p-lemon  .tk-p-scene { background: #FFE86E; }
.tk-p-card.tk-p-blush  .tk-p-scene { background: #FFD0C2; }
.tk-p-card.tk-p-mint   .tk-p-scene { background: #C9EAD8; }
.tk-p-card.tk-p-sky    .tk-p-scene { background: #BFE3EC; }
.tk-p-card.tk-p-pink   .tk-p-scene { background: #FF6A5C; }
.tk-p-card.tk-p-outline { background: transparent; border-style: dashed; box-shadow: none; }
.tk-p-card.tk-p-outline:hover { background: var(--cream); box-shadow: 5px 5px 0 var(--ink); }
.tk-p-card.tk-p-outline .tk-p-scene { background: #FFF6E0; }

.tk-p-card .tk-p-anim-spark { transform-origin: center; animation: tkPSpark 4s ease-in-out infinite; }
.tk-p-card:nth-of-type(2n) .tk-p-anim-spark { animation-delay: -1.3s; }
.tk-p-card:nth-of-type(3n) .tk-p-anim-spark { animation-delay: -2.6s; }
@keyframes tkPSpark {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .65; }
  50%      { transform: translateY(-4px) rotate(8deg); opacity: 1; }
}
.tk-p-card .tk-p-anim-dash {
  stroke-dasharray: 4 5;
  animation: tkPDash 12s linear infinite;
}
@keyframes tkPDash { to { stroke-dashoffset: -100; } }
.tk-p-card:hover .tk-p-anim-dash { animation-duration: 4s; }
.tk-p-card .tk-p-anim-arrow { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tk-p-card:hover .tk-p-anim-arrow { transform: translateX(8px); }
.tk-p-card .tk-p-anim-pulse {
  transform-origin: center;
  animation: tkPPulse 2.4s ease-in-out infinite;
}
@keyframes tkPPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-p-card .tk-p-anim-spark,
  .tk-p-card .tk-p-anim-dash,
  .tk-p-card .tk-p-anim-pulse { animation: none; }
  .tk-p-card .tk-p-anim-arrow { transition: none; }
}