/* ============================================================
   EINIEX Members page — extends einiex.css + einiex-platform.css
   Same tokens, same vocabulary. Only one new composition:
   the network avatar row. Everything else reuses existing parts
   (.intro, .jumpnav, .steps/.step, .tiers comparison table).
   ============================================================ */

/* ---------- Section header rhythm on this page ---------- */
.msection { position: relative; padding-block: var(--rhythm); border-top: 0.0625rem solid var(--border); scroll-margin-top: 6rem; }
.msection__head { display: flex; flex-direction: column; gap: 1.375rem; max-width: 50rem; }
.msection__h {
  font-family: var(--font-display), sans-serif; font-weight: 500;
  font-size: clamp(1.875rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 17ch;
}
.msection__h em { font-family: var(--font-serif), serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.msection__body { font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.msection__body b { color: var(--text); font-weight: 500; }

/* shared one-line footnote under a section block */
.mnote {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.75rem;
  font-family: var(--font-mono), monospace; font-size: 0.71875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
.mnote .check { width: 1rem; height: 1rem; color: var(--text); }

/* ============================================================
   THE NETWORK — abstract avatar row
   ============================================================ */
.netgrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.0625rem;
  margin-top: 3rem; background: var(--border);
  border: 0.0625rem solid var(--border); border-radius: 1.125rem; overflow: hidden;
  /* iOS Safari: clip-path is more reliable than overflow:hidden for border-radius clipping on WebKit */
  -webkit-clip-path: inset(0 round 1.125rem);
  clip-path: inset(0 round 1.125rem);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  isolation: isolate;
}
.netcard {
  display: flex; flex-direction: column; align-items: center; gap: 1.125rem;
  padding: 2.25rem 1rem 2rem; background: var(--bg); text-align: center;
  position: relative; transition: background 0.3s ease;
}
.netcard:hover { background: var(--surface); z-index: 1; }
.netcard::after { content: ""; position: absolute; inset: 0; border: 0.0625rem solid transparent; transition: border-color 0.3s ease; pointer-events: none; }
.netcard:hover::after { border-color: var(--text); }
.netcard:first-child::after { border-top-left-radius: 1.125rem; border-bottom-left-radius: 1.125rem; }
.netcard:last-child::after { border-top-right-radius: 1.125rem; border-bottom-right-radius: 1.125rem; }
.netcard__ava {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background-size: cover; background-position: center; flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.5,0,0,1);
}
.netcard:hover .netcard__ava { transform: translateY(-0.2rem); }
.netcard__sector { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.netcard__city { font-family: var(--font-mono), monospace; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-top: 0.35rem; }

@media (max-width: 900px) {
  /* phones/tablets: avatar row reflows into a 2-col grid that keeps the
     rounded frame. Re-map the hover/tap outline radii to the NEW corners:
     card 1 = top-left, card 2 = top-right, card 5 (full-width) = both bottoms */
  .netgrid { grid-template-columns: repeat(2, 1fr); }
  .netcard:nth-child(odd) { border-right: 0; }
  .netcard::after { border-radius: 0; }
  .netcard:first-child::after { border-top-left-radius: 1.125rem; border-bottom-left-radius: 0; }
  .netcard:nth-child(2)::after { border-top-right-radius: 1.125rem; border-top-left-radius: 0; }
  /* 5th card spans full width on the last row */
  .netcard:last-child { grid-column: 1 / -1; }
  .netcard:last-child::after { border-radius: 0 0 1.125rem 1.125rem; }
}
@media (max-width: 520px) {
  .netcard { padding: 1.75rem 0.75rem 1.5rem; }
  .netcard__ava { width: 3rem; height: 3rem; }
}

/* ---------- Tiers footnote / standing chips ---------- */
.tiers__note { margin-top: 1.75rem; }
.tier__name.is--top { color: var(--text); }

/* ============================================================
   VETTING — animated vertical process (scroll-driven)
   Base state = fully visible (no-JS / reduced-motion safe).
   JS adds [data-armed] to opt into the dimmed→reveal choreography.
   ============================================================ */
.vet { position: relative; margin-top: 3.5rem; padding-left: 0.25rem; }
.vet__rail {
  position: absolute; left: 1.6875rem; top: 2.4rem; bottom: 2.6rem; width: 0.125rem;
  background: var(--border); border-radius: 0.125rem; overflow: hidden; pointer-events: none;
}
.vet__rail-fill { position: absolute; inset: 0; background: var(--text); transform: scaleY(0); transform-origin: top; will-change: transform; }

.vet__step {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.85rem; align-items: start;
  padding-block: 1.6rem; position: relative;
}
.vet__node {
  width: 3rem; height: 3rem; border-radius: 50%; flex: 0 0 auto;
  border: 0.0625rem solid var(--border); background: var(--bg); color: var(--text-2);
  display: grid; place-items: center; position: relative; z-index: 1;
  transition: background 0.5s cubic-bezier(0.5,0,0,1), border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.vet__node-num { font-family: var(--font-mono), monospace; font-size: 0.8125rem; letter-spacing: 0.04em; }
.vet__node-check { position: absolute; inset: 0; display: grid; place-items: center; }
.vet__node-check svg { width: 1.3rem; height: 1.3rem; }

.vet__content { padding-top: 0.2rem; }
.vet__label { display: block; font-family: var(--font-mono), monospace; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 0.55rem; }
.vet__title { font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.vet__desc { font-size: 0.9375rem; color: var(--text-2); line-height: 1.55; max-width: 48ch; margin-top: 0.65rem; }
.vet__status {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.05rem;
  padding: 0.4rem 0.7rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg);
  font-family: var(--font-mono), monospace; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
  transition: border-color 0.5s ease, color 0.5s ease, background 0.5s ease;
}
.vet__status-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--text-2); flex: 0 0 auto; transition: background 0.5s ease; }

/* ---- active / done states (toggled by JS) ---- */
.vet__step.is-active .vet__node { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--text) 8%, transparent); }
.vet__step.is-done .vet__node-num { opacity: 0; }
.vet__step.is-done .vet__node-check { opacity: 1; transform: scale(1); }
.vet__step.is-active .vet__status { border-color: color-mix(in srgb, var(--text) 32%, transparent); color: var(--text); }
.vet__step.is-active .vet__status-dot { background: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .vet__step.is-active .vet__status-dot { animation: vet-pulse 1.8s ease-out infinite; }
}
@keyframes vet-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 55%, transparent); } 70%,100% { box-shadow: 0 0 0 0.4rem transparent; } }

/* ---- armed (JS choreographs opacity via GSAP — no CSS opacity transition here) ---- */
.vet[data-armed] .vet__step { opacity: 0.32; }
.vet[data-armed] .vet__content { transform: translateY(0.5rem); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.vet[data-armed] .vet__step.is-active .vet__content { transform: none; }

@media (max-width: 520px) {
  .vet__step { grid-template-columns: 2.5rem 1fr; gap: 1.25rem; }
  .vet__node { width: 2.5rem; height: 2.5rem; }
  .vet__rail { left: 1.4375rem; }
}