.macw-member {
  --cyan: var(--macw-accent, #5ac8fa);
  --text: var(--macw-text, #f4f7fb);
  position: relative;
  isolation: isolate;
  min-height: 336px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: var(--macw-radius, 8px);
  background: #0b0f16;
  contain: layout paint;
}
/* Fine linear grain keeps the material quiet, with no noisy particle field. */
.macw-member::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: repeating-linear-gradient(115deg, transparent 0, transparent 3px, rgba(187,199,219,.032) 3px, rgba(187,199,219,.032) 4px); pointer-events: none; }
.macw-member::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(244,247,251,.04); background: linear-gradient(90deg, #0b0f16 0%, transparent 9%, transparent 91%, #0b0f16 100%); }
.macw-member__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.macw-member__rails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.macw-member__rails path { fill: none; vector-effect: non-scaling-stroke; }
.macw-member__rail { stroke: rgba(187,199,219,.1); stroke-width: 1; }
.macw-member__rail--soft { stroke: rgba(187,199,219,.035); }
.macw-member__rail--lit { stroke: #5ac8fa; stroke-width: 1; stroke-dasharray: 55 1100; opacity: .4; }
.macw-member__token {
  position: absolute; left: 0; top: 0; width: 76px; height: 76px;
  border: 1px solid rgba(187,199,219,.18); border-radius: 18px;
  display: grid; place-items: center;
  color: #a4b1c4;
  background: linear-gradient(145deg, #202835, #111722 80%);
  box-shadow: 0 10px 24px rgba(0,0,0,.23), inset 0 1px 0 rgba(244,247,251,.045);
  will-change: auto;
  transform-origin: center;
}
.macw-member__token::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(187,199,219,.035); border-radius: 13px; }
.macw-member__token svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.macw-member__token--accent { color: #82c9e9; background: linear-gradient(145deg, #1c3444, #111c28 80%); border-color: rgba(90,200,250,.25); }
.macw-member__token--game { border-radius: 24px; }
.macw-member__token--game::after { border-radius: 19px; }
.macw-member__token--wide { width: 102px; border-radius: 13px; }
.macw-member__token--wide::after { border-radius: 9px; }
.macw-member__token--wide svg { width: 46px; height: 36px; }
/* The static field masks moving details before they can compete with text. */
.macw-member__quiet { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 39% 58% at 50% 50%, #0b0f16 0%, #0b0f16 54%, rgba(11,15,22,.94) 70%, rgba(11,15,22,.4) 90%, transparent 115%); }
.macw-member__copy { position: relative; z-index: 3; width: min(580px, 100%); padding: 32px 24px; text-align: center; }
.macw-member__eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 12px; font-size: 10px; font-weight: 650; letter-spacing: .24em; color: #a3b2c5; }
.macw-member__eyebrow svg { width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.macw-member__title { margin: 0; color: var(--text); font-size: clamp(30px, 3.6vw, 40px); line-height: 1.2; font-weight: 750; letter-spacing: 0; }
.macw-member__description { margin: 14px 0 22px; color: #a7b3c5; font-size: 14px; line-height: 1.85; font-weight: 400; }
.macw-member__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; position: relative; min-height: 46px; padding: 5px 6px 5px 20px; border: 1px solid rgba(119,213,255,.4); border-radius: 999px; background: var(--cyan); color: #071018; text-decoration: none; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.18); transition: background-color .2s, box-shadow .2s; }
.macw-member__cta:hover { background: #77d5ff; box-shadow: 0 4px 24px rgba(90,200,250,.16); }
.macw-member__cta:active { background: #52bbe9; }
.macw-member__cta:focus-visible { outline: 2px solid #f4f7fb; outline-offset: 5px; }
.macw-member__cta-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(5,7,12,.1); }
.macw-member__cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.macw-member__cta:hover svg, .macw-member__cta:focus-visible svg { transform: translateX(2px); }
.macw-member__symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (min-width: 1440px) { .macw-member__title { font-size: 40px; } }
@media (max-width: 700px) {
  .macw-member { min-height: 360px; }
  .macw-member__copy { padding: 55px 18px 54px; }
  .macw-member__quiet { background: radial-gradient(ellipse 65% 48% at 50% 50%, #0b0f16 0%, #0b0f16 53%, rgba(11,15,22,.94) 72%, rgba(11,15,22,.6) 95%, transparent 126%); }
  .macw-member__title { font-size: clamp(28px, 5.3vw, 36px); }
  .macw-member__description { max-width: 320px; margin: 15px auto 24px; font-size: 13px; }
  .macw-member__eyebrow { font-size: 9px; margin-bottom: 17px; }
}
@media (max-width: 380px) {
  .macw-member__copy { padding-inline: 14px; }
  .macw-member__title { font-size: 27px; }
  .macw-member__description { max-width: 235px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .macw-member__token { will-change: auto; }
  .macw-member__cta, .macw-member__cta svg { transition: none; }
  .macw-member__cta:hover svg, .macw-member__cta:focus-visible svg { transform: none; }
}

.macw-member[data-motion="playing"] .macw-member__token { will-change: transform, opacity; }