/* ============================================================================
   Partner Selection Journey — static left→right process diagram (subrosa Alliances)
   Dark cinematic panel that lives inside the light #hand-select section.
   ========================================================================== */

.psj {
  margin: 2.6rem 0 1.8rem;
  padding: clamp(1rem, 2vw, 1.6rem);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(201,71,225,0.16) 0%, rgba(201,71,225,0) 45%),
    linear-gradient(155deg, #1b1430 0%, #221a3c 55%, #161126 100%);
  border: 1px solid rgba(201,71,225,0.22);
  box-shadow: 0 26px 60px rgba(13,8,28,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  color: #fff;
}

/* ---- horizontal flow (desktop): scroll rather than squash if too tight ---- */
.psj__flow {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y:auto, which would clip the PROOFED ribbon
     and other elements that sit above their card — pad the top so they show. */
  padding: 1.1rem 0 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,71,225,0.5) transparent;
}
.psj__flow::-webkit-scrollbar { height: 8px; }
.psj__flow::-webkit-scrollbar-thumb { background: rgba(201,71,225,0.5); border-radius: 8px; }
.psj__flow::-webkit-scrollbar-track { background: transparent; }

.psj__stage {
  display: flex; flex-direction: column; gap: 0.6rem;
  flex: 0 0 auto; width: clamp(130px, 10.8vw, 166px);
  justify-content: flex-start;
}
.psj__stage--source { justify-content: center; }
.psj__stage--markets { width: clamp(86px, 7vw, 106px); }
.psj__stage--outcomes { width: clamp(172px, 14vw, 214px); }

/* ---- connecting arrows — prominent curved sweeps between stages ------------ */
.psj-arrow {
  flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  color: #d76bef; width: 34px;
}
.psj-arrow__svg { width: 100%; height: 100%; opacity: 0.95; filter: drop-shadow(0 2px 7px rgba(201,71,225,0.6)); }
.psj-arrow-down { display: flex; justify-content: center; color: var(--brand); margin: -0.1rem 0; }
.psj-arrow-down svg { width: 22px; height: auto; opacity: 0.9; }

/* ---- generic card --------------------------------------------------------- */
.psj-card {
  position: relative;
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  font-size: 0.82rem; line-height: 1.32; font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 16px rgba(8,5,18,0.3);
}

/* active "subrosa" blocks — magenta/purple gradient */
.psj-card--active {
  background: linear-gradient(135deg, #C947E1 0%, #7A4FB8 100%);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  box-shadow: 0 10px 24px rgba(201,71,225,0.32);
}
/* neutral / partner cards — lighter muted */
.psj-card--muted { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }

/* axxessive sub-brand pill-card */
.psj-card--brand-soft {
  background: rgba(201,71,225,0.12);
  border: 1px solid rgba(201,71,225,0.4);
  color: #fff; text-align: center; border-radius: 999px;
  font-size: 0.78rem;
}
.psj-card--brand-soft em { font-style: italic; font-weight: 700; }

/* Stage 1 — source pool */
.psj-card--source {
  flex: 1; display: flex; align-items: center;
  min-height: 180px; overflow: hidden;
  background: linear-gradient(160deg, rgba(122,79,184,0.28), rgba(201,71,225,0.14));
  border-color: rgba(201,71,225,0.4);
  box-shadow: 0 6px 16px rgba(8,5,18,0.3), inset 0 0 0 1px rgba(201,71,225,0.18);
}
.psj-card__grid {
  position: absolute; inset: 0; opacity: 0.8; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask: linear-gradient(160deg, #000 35%, transparent 96%);
          mask: linear-gradient(160deg, #000 35%, transparent 96%);
}
.psj-card__title { position: relative; margin: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.3; }

/* Stage 2 — assessment */
.psj-card--assess { padding-top: 1.4rem; }
.psj-ribbon {
  position: absolute; top: -0.7rem; left: 0.85rem;
  font-family: var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.72rem; color: #fff;
  background: linear-gradient(135deg, #C947E1, #7A4FB8);
  padding: 0.28rem 0.75rem; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(201,71,225,0.4);
}
.psj-card__heading { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 700; }
.psj-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.34rem; }
.psj-check li { position: relative; padding-left: 1.3rem; font-weight: 600; color: rgba(255,255,255,0.9); font-size: 0.8rem; }
.psj-check li::before {
  content: "✓"; position: absolute; left: 0; top: -0.05em;
  color: var(--brand); font-weight: 800;
}

/* small dark tag */
.psj-tag {
  align-self: flex-start;
  font-family: var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.7rem; font-weight: 700; color: #ffffff;
  background: #14101f; border: 1px solid rgba(201,71,225,0.45);
  padding: 0.34rem 0.7rem; border-radius: 8px;
}

/* Stage 3 — pre-selected partners group */
.psj-card--group { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.4rem; }
.psj-card__kicker {
  margin: 0 0 0.15rem; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.82rem; color: var(--brand);
}
.psj-subcard {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20);
  border-radius: 10px; padding: 0.6rem 0.7rem; font-size: 0.78rem; font-weight: 700;
  color: #ffffff;
}

/* Stage 5 — selected markets */
.psj__stage--markets { align-items: center; justify-content: center; }
.psj-vlabel {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.82rem; color: #fff;
  background: linear-gradient(180deg, #C947E1, #7A4FB8);
  padding: 0.9rem 0.5rem; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(201,71,225,0.3);
}
.psj-tiles { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; }
.psj-tile {
  height: 26px; border-radius: 8px;
  background: rgba(201,71,225,0.16); border: 1px solid rgba(201,71,225,0.32);
}

/* Stage 6 — outcomes */
.psj-person { display: flex; align-items: center; gap: 0.7rem; }
.psj-person__photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--brand); box-shadow: 0 6px 16px rgba(201,71,225,0.4);
}
.psj-person__cap { font-size: 0.8rem; line-height: 1.3; color: rgba(255,255,255,0.92); }
.psj-person__cap strong { color: #fff; font-size: 0.9rem; }
.psj-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.psj-card--bullets { background: rgba(255,255,255,0.05); }
.psj-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.psj-bullets li { position: relative; padding-left: 0.85rem; font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.88); }
.psj-bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* ---- footer band ---------------------------------------------------------- */
.psj__footer {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(201,71,225,0.22);
}
.psj__footer-label {
  margin: 0 0 0.9rem; text-align: center;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.92rem; font-weight: 700; color: #ffffff;
}
.psj__footer-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.psj-brand-card {
  display: flex; flex-direction: column; gap: 0.15rem; align-items: center; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(201,71,225,0.3);
  border-radius: 12px; padding: 0.85rem 1rem;
}
.psj-brand-card__name { font-weight: 700; color: #fff; font-size: 0.96rem; }
.psj-brand-card__name em { font-style: italic; }
.psj-brand-card__desc { font-size: 0.82rem; color: #ffffff; }

/* closing line (on the light section, below the dark panel) */
.psj-closing {
  margin: 1.4rem auto 0; max-width: 760px; text-align: center;
  color: rgba(20,20,28,0.72); font-style: italic; font-size: 1rem; line-height: 1.6;
}

/* ============================ Responsive ================================== */
/* Tablet & mobile: stack stages vertically in flow order; arrows point down. */
@media (max-width: 900px) {
  .psj__flow { flex-direction: column; align-items: stretch; overflow-x: visible; }
  .psj__stage,
  .psj__stage--source,
  .psj__stage--markets,
  .psj__stage--outcomes { width: 100%; }
  .psj-arrow { align-self: center; width: 100%; height: 40px; }
  .psj-arrow__svg { width: auto; height: 40px; transform: rotate(180deg); }
  .psj__stage--markets { flex-direction: row; align-items: stretch; gap: 0.6rem; }
  .psj-vlabel { writing-mode: horizontal-tb; transform: none; flex: 0 0 auto; display: flex; align-items: center; }
  .psj-tiles { flex-direction: row; flex-wrap: wrap; }
  .psj-tile { flex: 1 1 40px; min-width: 40px; }
}
@media (max-width: 480px) {
  .psj__footer-cards { grid-template-columns: 1fr; }
  .psj-outcomes { grid-template-columns: 1fr; }
}

/* ============================================================================
   subrosa CFO Services — 5 service tiles (dark cinematic cards)
   Titles/labels use the site body font (var(--font-body)) to match the rest of the site.
   ========================================================================== */
.cfo-tiles {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem; margin: 2.2rem 0; align-items: stretch;
}
.cfo-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #221a3c 0%, #1b1430 60%, #161126 100%);
  border: 1px solid rgba(201,71,225,0.22);
  border-radius: 16px; padding: 1.4rem 1.15rem;
  box-shadow: 0 16px 36px rgba(13,8,28,0.4);
}
.cfo-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #C947E1, #7A4FB8);
}
.cfo-tile__title {
  margin: 0.2rem 0 0.95rem;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1.05rem; line-height: 1.18; color: #fff;
}
.cfo-tile__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.cfo-tile__list li {
  position: relative; padding-left: 1.1rem;
  font-size: 0.9rem; line-height: 1.45; color: #ffffff; font-weight: 500;
}
.cfo-tile__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}

@media (max-width: 1100px) { .cfo-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .cfo-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cfo-tiles { grid-template-columns: 1fr; } }