/* ==========================================================================
   Members · The Club directory
   Light "paper" cards and sky panels on the dark site, in the Club's palette (club/static/club.css):
   ink #13233f · muted #5b6b85 · ocean #1d8fc4 · green #3fa356 · Iowan/Palatino serif · mono labels.
   Circles: golf #39C27A · social #FF3EA5 · thinker #D4A72C · professional #2F7DFF · coder #8B5CF6
   ========================================================================== */

:root {
  --mc-golf: #39C27A;
  --mc-social: #FF3EA5;
  --mc-thinker: #D4A72C;
  --mc-professional: #2F7DFF;
  --mc-coder: #8B5CF6;
  --mc-ink: #13233f;
  --mc-muted: #5b6b85;
  --mc-ocean: #1d8fc4;
  --mc-green: #3fa356;
  --mc-line: rgba(19, 35, 63, .10);
  --mc-sky: linear-gradient(180deg, #bfe6ff 0%, #e7f5ff 34%, #fff8ee 78%, #ffeedd 100%);
  --mc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mc-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --mc-ease: cubic-bezier(.2, .9, .2, 1);
}

.mc-icon { width: 100%; height: 100%; display: block; }

/* ---------- welcome screen: five porcelain medallions with a living rim ----------
   Compact on purpose: the row adds ~78px, so the welcome never pushes its buttons under the composer. */
.mc-welcome {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 24px);
  margin: 16px 0 4px;
}
.mc-welcome-circle {
  --c: #fff;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink, #f2f5fc);
  opacity: 0;
  animation: mc-fade .8s var(--mc-ease) forwards;   /* opacity only: nothing moves the layout */
  animation-delay: calc(var(--i) * 80ms + 100ms);
}
@keyframes mc-fade { to { opacity: 1; } }
.mc-welcome-disc {
  position: relative;
  width: clamp(46px, 12vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 2.5px;                                   /* the rim */
  background: conic-gradient(from var(--spin, 0deg), var(--c), #fff 25%, color-mix(in srgb, var(--c) 60%, #fff) 50%, #fff 75%, var(--c));
  box-shadow:
    0 10px 24px -8px color-mix(in srgb, var(--c) 75%, transparent),
    0 0 18px color-mix(in srgb, var(--c) 28%, transparent);
  animation: mc-rim 6s linear infinite, mc-hover 5s ease-in-out infinite;
  animation-delay: 0s, calc(var(--i) * -1s);
  transition: box-shadow .35s ease;
}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes mc-rim { to { --spin: 360deg; } }
@keyframes mc-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.mc-welcome-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 21%;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--c);
  overflow: hidden;
  background: radial-gradient(circle at 34% 26%, #ffffff 0%, #f6faff 48%, color-mix(in srgb, var(--c) 20%, #eaf1fb) 100%);
  box-shadow: inset 0 -6px 12px color-mix(in srgb, var(--c) 18%, transparent), inset 0 3px 6px rgba(255, 255, 255, .9);
}
.mc-welcome-face::after {                           /* a glint that sweeps across now and then */
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%);
  transform: translateX(-80%);
  animation: mc-glint 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.3s + 2s);
}
@keyframes mc-glint { 0%, 70% { transform: translateX(-80%); } 85%, 100% { transform: translateX(80%); } }
.mc-welcome-face .mc-icon { filter: brightness(.86) saturate(1.2); }
.mc-welcome-circle:hover .mc-welcome-disc,
.mc-welcome-circle:focus-visible .mc-welcome-disc {
  box-shadow:
    0 14px 30px -8px color-mix(in srgb, var(--c) 95%, transparent),
    0 0 30px color-mix(in srgb, var(--c) 50%, transparent);
}
.mc-welcome-circle:focus-visible { outline: none; }
.mc-welcome-label {
  font: 700 9.5px/1 var(--mc-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 45%, #fff);
}
.mc-welcome-count {
  position: absolute;
  top: -5px;
  right: -7px;
  z-index: 1;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font: 700 10px/1 var(--mc-mono);
  color: #fff;
  background: linear-gradient(135deg, #1f3b73, #3f6fb6);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(31, 59, 115, .45);
}
/* the icons breathe */
.mi-flag { transform-box: fill-box; transform-origin: left center; animation: ms-flag 2s ease-in-out infinite; }
.mi-olive { animation: ms-bob-k 2.6s ease-in-out infinite; }
.mi-sway { transform-origin: 20% 90%; animation: ms-sway-k 5s ease-in-out infinite; }
.mi-node { transform-box: fill-box; transform-origin: center; animation: ms-pulse-k 2.4s ease-in-out infinite; }
.mi-node.n2 { animation-delay: -.8s; } .mi-node.n3 { animation-delay: -1.6s; }
.mi-code { animation: mi-code-k 2.6s ease-in-out infinite; }
@keyframes mi-code-k { 50% { opacity: .55; } }
.drawer-members { text-decoration: none; }
@keyframes mc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- page shell: full width, the room's world behind ---------- */
.content-page #main:has(> .mc-page) { padding-left: 0; padding-right: 0; overflow-x: clip; }
.mc-page {
  --pad: clamp(16px, 4vw, 48px);
  position: relative;
  padding: 0 var(--pad) 96px;
  isolation: isolate;
}
.mc-join { position: relative; isolation: isolate; }

/* The background follows the room: Free = violet thinking, Thinker = the city at dusk, Executive = golf by the sea. */
.mc-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #050812; }
.mc-bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.mc-page[data-theme="free"] .mc-bg-layer[data-for="free"],
.mc-page[data-theme="thinker"] .mc-bg-layer[data-for="thinker"],
.mc-page[data-theme="executive"] .mc-bg-layer[data-for="executive"] { opacity: 1; }
.mc-bg-layer[data-for="free"] {
  background:
    radial-gradient(700px 500px at 20% 10%, rgba(167, 139, 250, .30), transparent 62%),
    radial-gradient(600px 480px at 85% 30%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(236, 72, 153, .14), transparent 60%),
    linear-gradient(180deg, #0c0820, #120a2c 60%, #0b0618);
}
.mc-bg-layer[data-for="thinker"] {
  background:
    radial-gradient(800px 420px at 50% 112%, rgba(255, 170, 120, .40), transparent 62%),
    radial-gradient(600px 400px at 10% 0%, rgba(63, 111, 182, .35), transparent 62%),
    linear-gradient(180deg, #08142e, #142a58 58%, #2a2a52);
}
.mc-bg-layer[data-for="thinker"]::after {          /* a skyline on the horizon */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; opacity: .55;
  background:
    linear-gradient(#0a1530, #0a1530) 4% 100% / 5% 70% no-repeat, linear-gradient(#0a1530, #0a1530) 11% 100% / 4% 92% no-repeat,
    linear-gradient(#0a1530, #0a1530) 18% 100% / 6% 55% no-repeat, linear-gradient(#0a1530, #0a1530) 27% 100% / 4% 100% no-repeat,
    linear-gradient(#0a1530, #0a1530) 34% 100% / 7% 65% no-repeat, linear-gradient(#0a1530, #0a1530) 63% 100% / 5% 80% no-repeat,
    linear-gradient(#0a1530, #0a1530) 70% 100% / 6% 98% no-repeat, linear-gradient(#0a1530, #0a1530) 79% 100% / 4% 60% no-repeat,
    linear-gradient(#0a1530, #0a1530) 86% 100% / 6% 84% no-repeat, linear-gradient(#0a1530, #0a1530) 95% 100% / 5% 70% no-repeat;
}
.mc-bg-layer[data-for="executive"] {
  background:
    radial-gradient(700px 460px at 80% 0%, rgba(255, 236, 170, .22), transparent 60%),
    radial-gradient(900px 520px at 20% 100%, rgba(63, 163, 86, .38), transparent 62%),
    radial-gradient(800px 500px at 90% 90%, rgba(29, 143, 196, .45), transparent 62%),
    linear-gradient(180deg, #06263a, #0a3a52 55%, #0b3b3a);
}
.mc-bg-layer[data-for="executive"]::after {        /* the sea, rolling */
  content: ""; position: absolute; left: -40px; right: -40px; bottom: 0; height: 90px; opacity: .35;
  background: repeating-radial-gradient(circle at 20px -6px, transparent 0 14px, rgba(255, 255, 255, .5) 15px 16px, transparent 17px 40px) 0 0 / 40px 24px repeat-x;
  animation: mc-sea 8s linear infinite;
}
@keyframes mc-sea { to { transform: translateX(40px); } }

.mc-bubbles i {
  position: absolute;
  left: var(--x);
  bottom: -60px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85), var(--bubble, rgba(167, 139, 250, .35)) 42%, transparent 72%);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, .45), 0 0 14px var(--bubble, rgba(167, 139, 250, .35));
  opacity: .55;
  animation: mc-bubble var(--t) linear infinite;
  animation-delay: var(--d);
}
@keyframes mc-bubble {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  10% { opacity: .6; }
  50% { transform: translate(var(--w), -55vh) scale(1); }
  90% { opacity: .45; }
  100% { transform: translate(0, -110vh) scale(1.1); opacity: 0; }
}
.mc-page[data-theme="free"] .mc-bubbles i { --bubble: rgba(167, 139, 250, .38); }
.mc-page[data-theme="free"] .mc-bubbles i:nth-child(3n) { --bubble: rgba(34, 211, 238, .32); }
.mc-page[data-theme="thinker"] .mc-bubbles i { --bubble: rgba(255, 200, 140, .32); }
.mc-page[data-theme="thinker"] .mc-bubbles i:nth-child(3n) { --bubble: rgba(95, 240, 200, .28); }
.mc-page[data-theme="executive"] .mc-bubbles i { --bubble: rgba(120, 220, 255, .34); }
.mc-page[data-theme="executive"] .mc-bubbles i:nth-child(3n) { --bubble: rgba(127, 214, 154, .34); }

.mc-backlink {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  margin: 4px 0 0; padding: 8px 14px 8px 10px; border-radius: 999px;
  color: #fff; text-decoration: none; font: 600 14px/1 system-ui, sans-serif;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s ease;
}
.mc-backlink:hover { background: rgba(255, 255, 255, .18); }
.mc-backlink svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mc-join .mc-backlink { position: fixed; z-index: 31; top: calc(var(--toolbar-height, 60px) + 30px); left: 14px; }

.mc-hero { text-align: center; padding: clamp(6px, 3vh, 34px) 0 24px; }
.mc-kicker {
  font: 700 11px/1 var(--mc-mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #9ad8ff;
  margin: 0 0 12px;
}
.mc-hero h1 {
  font: 600 clamp(40px, 7vw, 68px)/1.02 var(--mc-serif);
  letter-spacing: .005em;
  margin: 0;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}
.mc-lede { color: rgba(255, 255, 255, .78); margin: 12px auto 0; max-width: 520px; font-size: 15.5px; line-height: 1.5; }
.mc-hero-actions { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.mc-plan {
  font: 700 10.5px/1 var(--mc-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--mc-ocean);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.mc-btn {
  appearance: none;
  min-height: 46px;
  border: 1px solid rgba(19, 35, 63, .16);
  background: #fff;
  color: var(--mc-ink);
  border-radius: 999px;
  padding: 12px 20px;
  font: 600 15px/1.2 system-ui, sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.mc-btn:hover { box-shadow: 0 8px 22px rgba(19, 35, 63, .18); }
.mc-btn:active:not(:disabled) { transform: scale(.97); }
.mc-btn:disabled { opacity: .5; cursor: default; }
.mc-btn-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #1d8fc4, #3fa356);
  box-shadow: 0 10px 26px rgba(29, 143, 196, .35);
}
.mc-btn-ghost { background: transparent; border-color: transparent; color: var(--mc-muted); }
.mc-btn-ghost:hover { box-shadow: none; color: var(--mc-ink); }

/* The sky band: full width, rooms → circles → search, and it ends there. */
.mc-sheet {
  position: relative;
  isolation: isolate;
  margin: 0 calc(50% - 50vw) 30px;                /* edge to edge, whatever the page's own padding */
  padding: 26px max(var(--pad), calc((100vw - 1180px) / 2)) 30px;
  border-radius: 0 0 36px 36px;
  background: var(--mc-sky);
  color: var(--mc-ink);
  box-shadow: 0 30px 80px rgba(5, 20, 45, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
  overflow: hidden;
}
.mc-sheet::before, .mc-sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 200px; height: 58px;
  border-radius: 999px;
  background: #fff;
  opacity: .7;
  box-shadow: 40px -30px 0 6px #fff, 100px -18px 0 0 #fff;
  animation: mc-cloud 80s linear infinite;
  top: 60px;
}
.mc-sheet::after { top: 200px; transform: scale(.6); opacity: .5; animation-duration: 110s; animation-delay: -60s; }
@keyframes mc-cloud { from { left: -260px; } to { left: 110%; } }
.mc-sheet-label { margin: 0 0 10px; font: 700 10.5px/1 var(--mc-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mc-ocean); }
.mc-sheet-label:not(:first-child) { margin-top: 22px; }

/* the three rooms, as cards */
.mc-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mc-tier {
  position: relative; appearance: none; text-align: left; cursor: pointer; color: var(--mc-ink);
  display: grid; grid-template-rows: auto 1fr; padding: 0; border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, .9); border: 1px solid #fff; box-shadow: 0 10px 30px rgba(19, 35, 63, .12);
  transition: transform .25s var(--mc-ease), box-shadow .25s ease;
  animation: mc-card-in .6s var(--mc-ease) both; animation-delay: calc(var(--i) * 80ms);
}
.mc-tier:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(19, 35, 63, .18); }
.mc-tier[aria-selected="true"] { box-shadow: 0 0 0 3px #1d8fc4, 0 18px 44px rgba(29, 143, 196, .35); }
.mc-tier[data-room="free"][aria-selected="true"] { box-shadow: 0 0 0 3px #8b5cf6, 0 18px 44px rgba(139, 92, 246, .35); }
.mc-tier[data-room="thinker"][aria-selected="true"] { box-shadow: 0 0 0 3px #3f6fb6, 0 18px 44px rgba(31, 59, 115, .35); }
.mc-tier-scene { display: block; position: relative; height: 82px; overflow: hidden; }
.mc-tier-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: none; }
.mc-tier-body { display: grid; gap: 3px; padding: 11px 14px 13px; }
.mc-tier-body b { font: 600 18px/1.15 var(--mc-serif); }
.mc-tier-body small { color: var(--mc-muted); font-size: 12.5px; }
.mc-tier-count {
  position: absolute; top: 8px; left: 10px; min-width: 22px; padding: 4px 8px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, .92); color: var(--mc-ink); font: 700 10.5px/1 var(--mc-mono); box-shadow: 0 3px 10px rgba(19, 35, 63, .15);
}
.mc-tier-count:empty { display: none; }
.mc-tier .mc-lock {
  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; box-sizing: border-box;
  background: rgba(255, 255, 255, .92); stroke: var(--mc-ink); fill: none; stroke-width: 2; display: none;
}
.mc-tier.is-locked .mc-lock { display: block; }

/* the circles, as cards */
.mc-circles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mc-circle-card {
  --c: #1d8fc4;
  appearance: none; cursor: pointer; color: var(--mc-ink); text-align: center;
  display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .82); border: 1px solid #fff; box-shadow: 0 6px 18px rgba(19, 35, 63, .08);
  transition: transform .2s var(--mc-ease), box-shadow .2s ease, background .2s ease;
  animation: mc-card-in .55s var(--mc-ease) both; animation-delay: calc(var(--i) * 50ms + 120ms);
}
.mc-circle-card:hover { transform: translateY(-2px); }
.mc-circle-icon {
  width: 46px; height: 46px; padding: 9px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle at 34% 26%, #fff, color-mix(in srgb, var(--c) 14%, #f3f7fd));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent), 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.mc-circle-icon .mc-icon { filter: brightness(.88) saturate(1.15); }
.mc-chip-dot { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--mc-golf), var(--mc-social), var(--mc-thinker), var(--mc-professional), var(--mc-coder), var(--mc-golf)); animation: mc-spin 8s linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mc-circle-card b { font: 600 15px/1.1 var(--mc-serif); }
.mc-circle-card small { min-height: 1em; color: var(--mc-muted); font: 600 10.5px/1 var(--mc-mono); letter-spacing: .04em; }
.mc-circle-card.is-on {
  background: #fff;
  box-shadow: 0 0 0 2.5px var(--c), 0 12px 28px color-mix(in srgb, var(--c) 35%, transparent);
}

.mc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(19, 35, 63, .10);
  box-shadow: 0 6px 18px rgba(19, 35, 63, .08);
}
.mc-search svg { width: 18px; height: 18px; fill: none; stroke: var(--mc-muted); stroke-width: 2; flex: none; }
.mc-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--mc-ink); padding: 14px 0; font: 16px system-ui, sans-serif; outline: none; }
.mc-search input::placeholder { color: #8a96a8; }

/* below the band: on the room's world, no panel */
.mc-page > .mc-roombar, .mc-page > .mc-matches, .mc-page > .mc-grid, .mc-page > .mc-grid-label, .mc-page > .mc-status, .mc-page > .mc-gate { max-width: 1180px; margin-left: auto; margin-right: auto; }
.mc-roombar {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  color: var(--mc-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.mc-roombar .mc-icon { width: 36px; height: 36px; color: var(--c); flex: none; filter: brightness(.88) saturate(1.15); }
.mc-roombar b { font: 600 18px/1.2 var(--mc-serif); display: block; }
.mc-roombar p { margin: 3px 0 0; color: var(--mc-muted); font-size: 13.5px; }
.mc-soon {
  margin-left: auto;
  flex: none;
  font: 700 10px/1 var(--mc-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--c, #13233f) 60%, transparent);
  color: color-mix(in srgb, var(--c, #13233f) 75%, #13233f);
  background: #fff;
}
.mc-matches { margin-bottom: 34px; }
.mc-matches header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mc-matches h2, .mc-grid-label { font: 600 26px/1.1 var(--mc-serif); margin: 0; color: #fff; }
.mc-grid-label { margin-bottom: 4px; font-size: 22px; }
.mc-matches header p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; }
.mc-spark { color: #ffd76a; }
.mc-status { color: rgba(255, 255, 255, .78); text-align: center; font-size: 14px; margin: 18px auto; }
.mc-status:empty { display: none; }
.mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 26px 20px;
  padding-top: 18px;
}

/* ---------- the card: a drawn world on top, paper below ---------- */
.mc-card {
  --c: #1d8fc4;
  --c2: var(--c);
  position: relative;
  perspective: 1400px;
  color: var(--mc-ink);
  animation: mc-card-in .6s var(--mc-ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes mc-card-in { from { opacity: 0; transform: translateY(18px); } }
.mc-card-inner {
  display: grid;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--mc-ease);
  transform-style: preserve-3d;
}
.mc-card:hover .mc-card-inner { transition: transform .18s ease-out; }
.mc-card.is-flipped .mc-card-inner { transform: rotateX(var(--rx, 0deg)) rotateY(calc(180deg + var(--ry, 0deg))); transition: transform .7s var(--mc-ease); }
.mc-front::after {                                 /* gloss that follows the pointer */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(400px 200px at var(--gx, 50%) 0%, rgba(255, 255, 255, .55), transparent 60%);
  mix-blend-mode: soft-light;
}
.mc-card:hover .mc-front::after { opacity: 1; }
.mc-face { position: relative; }
.mc-face::before {                                 /* a thin rim in the card's colors, like the medallions */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 70%, #fff), #fff 40%, #fff 60%, color-mix(in srgb, var(--c2) 70%, #fff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- scene motion: each card's clock is --d, its pace --sp ---------- */
.mc-cover, .mc-tier-scene { --t: calc(1s * var(--sp, 1)); }
.mc-cover [class^="ms-"], .mc-cover [class*=" ms-"], .mc-tier-scene [class^="ms-"], .mc-tier-scene [class*=" ms-"] { animation-delay: calc(var(--d, 0s) + var(--k, 0) * -.37s); }
.ms-glow { transform-box: fill-box; transform-origin: center; animation: ms-glow-k calc(var(--t) * 5) ease-in-out infinite; }
@keyframes ms-glow-k { 50% { transform: scale(1.1); opacity: .85; } }
.ms-drift { animation: ms-drift-k calc(var(--t) * 26) linear infinite; }
.ms-drift.ms-slow { animation-duration: calc(var(--t) * 40); }
@keyframes ms-drift-k { from { transform: translateX(-60px); } to { transform: translateX(340px); } }
.ms-flag { transform-box: fill-box; transform-origin: left center; animation: ms-flag calc(var(--t) * 1.8) ease-in-out infinite; }
@keyframes ms-flag { 50% { transform: scaleX(.8) skewY(7deg); } }
.ms-roll { animation: ms-roll-k calc(var(--t) * 6) cubic-bezier(.3, .1, .2, 1) infinite; }
@keyframes ms-roll-k { 0% { transform: translateX(-60px); opacity: 0; } 10% { opacity: 1; } 70% { transform: translateX(58px); opacity: 1; } 80%, 100% { transform: translateX(62px); opacity: 0; } }
.ms-arc { stroke-dashoffset: 240; animation: ms-arc-k calc(var(--t) * 5) linear infinite; }
@keyframes ms-arc-k { to { stroke-dashoffset: 0; } }
.ms-fly { animation: ms-fly-k calc(var(--t) * 14) linear infinite; }
@keyframes ms-fly-k { from { transform: translate(-160px, 10px); } to { transform: translate(260px, -12px); } }
.ms-plane { offset-path: path("M-20 34 C 80 14, 190 40, 340 12"); animation: ms-plane-k calc(var(--t) * 13) linear infinite; }
@keyframes ms-plane-k { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ms-float { transform-box: fill-box; animation: ms-float-k calc(var(--t) * 7) ease-in-out infinite; }
@keyframes ms-float-k { 50% { transform: translateY(-8px) scale(1.08); } }
.ms-twinkle { animation: ms-twinkle-k calc(var(--t) * 2.2) ease-in-out infinite; }
@keyframes ms-twinkle-k { 50% { opacity: .25; } }
.ms-bob { transform-box: fill-box; animation: ms-bob-k calc(var(--t) * 2.6) ease-in-out infinite; }
@keyframes ms-bob-k { 50% { transform: translateY(2.5px); } }
.ms-clink { transform-box: fill-box; transform-origin: bottom center; animation: ms-clink-k calc(var(--t) * 3) ease-in-out infinite; }
.ms-clink.ms-rev { animation-direction: reverse; }
@keyframes ms-clink-k { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(8deg); } 55% { transform: rotate(6deg); } }
.ms-write { stroke-dasharray: 220; stroke-dashoffset: 220; animation: ms-write-k calc(var(--t) * 5) ease-in-out infinite; }
@keyframes ms-write-k { 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ms-sway { animation: ms-sway-k calc(var(--t) * 5) ease-in-out infinite; }
@keyframes ms-sway-k { 50% { transform: rotate(-4deg); } }
.ms-blink { animation: ms-blink-k calc(var(--t) * 3.6) steps(2) infinite; }
@keyframes ms-blink-k { 0%, 40% { opacity: 1; } 50%, 90% { opacity: .15; } }
.ms-draw { stroke-dasharray: 420; stroke-dashoffset: 420; animation: ms-draw-k calc(var(--t) * 5) cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ms-draw-k { 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ms-dash { animation: ms-dash-k calc(var(--t) * 4) linear infinite; }
@keyframes ms-dash-k { to { stroke-dashoffset: -28; } }
.ms-pulse { transform-box: fill-box; transform-origin: center; animation: ms-pulse-k calc(var(--t) * 3) ease-in-out infinite; }
@keyframes ms-pulse-k { 50% { transform: scale(1.35); } }
.ms-type { width: 0; animation: ms-type-k calc(var(--t) * 6) steps(16) infinite; }
@keyframes ms-type-k { 0% { width: 0; } 50%, 90% { width: var(--w); } 100% { width: 0; } }
.ms-cursor, .ms-cursor-k { animation: ms-cursor-k 1s steps(2) infinite; }
@keyframes ms-cursor-k { 50% { opacity: 0; } }
.ms-wave { animation: ms-wave-k calc(var(--t) * 4) linear infinite; }
@keyframes ms-wave-k { to { transform: translateX(40px); } }
.mc-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 50px rgba(19, 35, 63, .16);
  display: flex;
  flex-direction: column;
  min-height: 384px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.mc-card:hover .mc-front { box-shadow: 0 26px 60px rgba(19, 35, 63, .24); }
.mc-back { transform: rotateY(180deg); background: linear-gradient(180deg, #ffffff, #fbf8f2); }

.mc-cover { position: relative; height: 128px; flex: none; overflow: hidden; background: #e7f5ff; }
.mc-cover > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; fill: none; stroke: none; stroke-width: 1; }
.mc-scene-name {
  position: absolute; right: 14px; bottom: 12px; z-index: 1;
  padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--mc-ink);
  font: 700 10.5px/1.2 var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}
.mc-cover-icons { position: absolute; left: 12px; top: 12px; display: flex; gap: 5px; z-index: 1; }
.mc-cover-icons span {
  width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: var(--cc);
  background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(19, 35, 63, .18);
}
.mc-cover-icons span svg { filter: brightness(.88) saturate(1.15); }
.mc-room-tag {
  position: absolute; z-index: 3; top: -11px; right: 18px;
  font: 700 10px/1.2 var(--mc-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, #1f3b73, #3f6fb6); box-shadow: 0 6px 16px rgba(31, 59, 115, .35);
}
.mc-room-tag[data-room="executive"] { background: linear-gradient(135deg, #1d8fc4, #3fa356); box-shadow: 0 6px 16px rgba(29, 143, 196, .35); }

.mc-match {
  --p: 0;
  --b: #8a96a8;
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--b) calc(var(--p) * 1%), rgba(19, 35, 63, .12) 0);
  box-shadow: 0 6px 18px rgba(19, 35, 63, .25);
}
.mc-match::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.mc-match b { position: relative; font: 700 12.5px/1 var(--mc-mono); color: var(--mc-ink); }
.mc-match[data-band="great"] { --b: #3fa356; }
.mc-match[data-band="good"] { --b: #1d8fc4; }
.mc-match[data-band="fair"] { --b: #e8a317; }
.mc-match[data-band="low"] { --b: #8a96a8; }

.mc-body { position: relative; padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mc-avatar {
  width: 68px; height: 68px; margin-top: -36px; border-radius: 50%;
  border: 3px solid #fff; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 2;
  background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 8px 22px rgba(19, 35, 63, .25);
  font: 600 24px/1 var(--mc-serif); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-name { font: 600 23px/1.15 var(--mc-serif); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--mc-ink); }
.mc-sample, .mc-you { font: 700 9px/1 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; }
.mc-sample { background: #eef2f8; color: var(--mc-muted); }
.mc-you { background: #e7f6ec; color: var(--mc-green); }
.mc-headline { margin: -4px 0 0; color: var(--mc-muted); font-size: 14px; line-height: 1.4; }
.mc-city { margin: -4px 0 0; color: var(--mc-muted); font: 600 10.5px/1.2 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; display: flex; gap: 5px; align-items: center; }
.mc-city svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.mc-facts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.mc-facts li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 14px; color: var(--mc-ink); line-height: 1.35; }
.mc-facts li::before {
  content: ""; width: 14px; height: 14px; transform: translateY(2px);
  background: var(--cc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mc-facts span { min-width: 0; }
.mc-facts b { font: 700 10.5px/1 var(--mc-mono); letter-spacing: .1em; color: var(--mc-muted); margin-right: 2px; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.mc-chip {
  font: 600 11.5px/1 system-ui, sans-serif; padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: color-mix(in srgb, var(--c) 55%, var(--mc-ink));
}
.mc-chip.is-tag { background: #f3f5f9; border-color: transparent; color: var(--mc-muted); }

.mc-actions { display: flex; align-items: stretch; flex: none; border-top: 1px solid var(--mc-line); background: #fbfcfe; }
.mc-actions button {
  flex: 1; appearance: none; border: 0; background: transparent; color: var(--mc-ink);
  padding: 13px 6px; font: 600 13px/1 system-ui, sans-serif; display: inline-flex; gap: 6px; align-items: center; justify-content: center; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.mc-actions button + button { border-left: 1px solid var(--mc-line); }
.mc-actions button:hover { background: #f1f6fb; }
.mc-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-actions [aria-pressed="true"][data-act="like"] { color: #e0307e; }
.mc-actions [aria-pressed="true"][data-act="like"] svg { fill: currentColor; }
.mc-actions [aria-pressed="true"][data-act="follow"] { color: var(--mc-green); }
.mc-actions .pop { animation: mc-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mc-pop { 50% { transform: scale(1.3); } }

/* back of the card: the business card */
.mc-back .mc-body { padding-top: 22px; }
.mc-back h3 { font: 700 10.5px/1.3 var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-ocean); margin: 6px 0 0; }
.mc-contact {
  display: flex; gap: 12px; align-items: center; padding: 13px; border-radius: 16px;
  background: #fff; border: 1px solid var(--mc-line); box-shadow: 0 6px 18px rgba(19, 35, 63, .08);
  text-decoration: none; color: var(--mc-ink); word-break: break-word; transition: box-shadow .2s ease, transform .15s ease;
}
.mc-contact:hover { box-shadow: 0 10px 26px rgba(19, 35, 63, .14); transform: translateY(-1px); }
.mc-contact i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c), var(--c2)); font-style: normal; }
.mc-contact i svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; }
.mc-contact small { display: block; color: var(--mc-muted); font: 700 10px/1.3 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; }
.mc-contact span { font-size: 15px; }
.mc-locked { color: var(--mc-muted); font-size: 13.5px; padding: 13px; border-radius: 16px; border: 1px dashed rgba(19, 35, 63, .2); margin: 0; }
.mc-why { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.mc-why li { font-size: 14px; color: var(--mc-ink); display: flex; gap: 8px; }
.mc-why li::before { content: "✦"; color: var(--mc-thinker); }
.mc-bio { font-size: 13.5px; color: var(--mc-muted); line-height: 1.5; margin: 0; }
.mc-room-soon { margin-top: auto; font-size: 12.5px; color: var(--mc-muted); display: flex; gap: 8px; align-items: center; }
.mc-room-soon svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }

/* gate for guests and locked rooms */
.mc-gate {
  margin: 18px auto 0; max-width: 560px; text-align: center; padding: 28px 22px; border-radius: 24px;
  background: rgba(255, 255, 255, .9); border: 1px solid #fff; box-shadow: 0 18px 50px rgba(19, 35, 63, .14); color: var(--mc-ink);
}
.mc-gate h2 { font: 600 26px/1.15 var(--mc-serif); margin: 0 0 8px; }
.mc-gate p { color: var(--mc-muted); margin: 0 0 18px; line-height: 1.5; }
.mc-gate .mc-hero-actions { margin: 0; }

/* the nudge: signed in, no card yet */

/* ==========================================================================
   The join wizard: bright paper cards, one per screen, snapping
   ========================================================================== */
body:has(.mc-join) #main { overflow: hidden; }
.mc-join { max-width: none; padding: 0; height: calc(var(--viewport-height, 100dvh) - var(--toolbar-height, 60px)); }
.mc-feed {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0 16px;
}
.mc-feed::-webkit-scrollbar { display: none; }
.mc-feed.is-nosnap { scroll-snap-type: none; }
.mc-slot { min-height: 100%; display: grid; place-items: center; scroll-snap-align: center; padding: 60px 0 40px; }
.mc-slot.is-tall { scroll-snap-align: start; place-items: start center; }
.mc-step {
  --c: #1d8fc4;
  position: relative;
  isolation: isolate;
  width: min(640px, 100%);
  padding: clamp(24px, 4vw, 36px);
  border-radius: 30px;
  color: var(--mc-ink);
  background: var(--mc-sky);
  box-shadow: 0 40px 120px rgba(5, 20, 45, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
  opacity: .35;
  transform: translateY(30px) scale(.985);
  filter: blur(4px);
  transition: opacity .7s ease, transform .8s var(--mc-ease), filter .8s ease;
  overflow: hidden;
}
.mc-step::before {
  content: ""; position: absolute; z-index: -1; inset: -30% -20% auto; height: 70%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent);
  pointer-events: none; animation: mc-glow 10s ease-in-out infinite alternate;
}
@keyframes mc-glow { to { transform: translate(12%, 8%); } }
.mc-step.is-in { opacity: 1; transform: none; filter: none; }
.mc-step.is-in::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  animation: mc-sweep 1.6s var(--mc-ease) both;
}
@keyframes mc-sweep { from { transform: scaleX(0); } to { transform: none; } }
.mc-step-kicker { font: 700 11px/1 var(--mc-mono); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 75%, var(--mc-ink)); margin: 0 0 14px; display: flex; gap: 8px; align-items: center; }
.mc-step-kicker .mc-icon { width: 22px; height: 22px; filter: brightness(.88) saturate(1.15); }
.mc-q { font: 600 clamp(26px, 4.6vw, 36px)/1.12 var(--mc-serif); letter-spacing: .005em; margin: 0; min-height: 1.12em; color: var(--mc-ink); }
.mc-caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; background: var(--c); vertical-align: -.08em; animation: mc-blink .8s step-end infinite; }
@keyframes mc-blink { 50% { opacity: 0; } }
.mc-sub { color: var(--mc-muted); margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.mc-rest { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s var(--mc-ease); }
.mc-rest.is-in { opacity: 1; transform: none; }
.mc-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.mc-option {
  appearance: none; text-align: left; cursor: pointer;
  padding: 15px 16px; border-radius: 16px; font: 600 15px/1.25 system-ui, sans-serif; color: var(--mc-ink);
  background: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px rgba(19, 35, 63, .08);
  transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
  animation: mc-pop-in .45s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes mc-pop-in { from { opacity: 0; transform: scale(.94) translateY(6px); } }
.mc-option:hover { box-shadow: 0 10px 26px rgba(19, 35, 63, .14); }
.mc-option:active { transform: scale(.98); }
.mc-option[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 0 0 2px var(--c), 0 10px 26px color-mix(in srgb, var(--c) 30%, transparent);
}
.mc-option[aria-pressed="true"]::after { content: " ✓"; color: var(--c); }

/* the circles step: big paper tiles */
.mc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; }
.mc-tile {
  --c: #1d8fc4; appearance: none; cursor: pointer; text-align: left; color: var(--mc-ink);
  display: grid; gap: 10px; padding: 16px; border-radius: 20px; position: relative;
  background: rgba(255, 255, 255, .88); border: 1px solid #fff; box-shadow: 0 8px 22px rgba(19, 35, 63, .10);
  transition: transform .25s var(--mc-ease), box-shadow .25s ease;
  animation: mc-pop-in .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.mc-tile .mc-icon { width: 48px; height: 48px; color: var(--c); filter: brightness(.88) saturate(1.15); }
.mc-tile b { font: 600 19px/1 var(--mc-serif); }
.mc-tile small { color: var(--mc-muted); font-size: 12.5px; line-height: 1.35; }
.mc-tile:hover { transform: translateY(-2px); }
.mc-tile[aria-pressed="true"] {
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 16%, #fff), #fff 70%);
  box-shadow: 0 0 0 2px var(--c), 0 16px 36px color-mix(in srgb, var(--c) 35%, transparent);
}
.mc-tile[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font: 700 13px/1 system-ui; color: #fff; background: var(--c);
}

.mc-fields { display: grid; gap: 12px; margin-top: 22px; }
.mc-field { display: grid; gap: 7px; }
.mc-field > span { font: 700 10.5px/1 var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); }
.mc-field input, .mc-field textarea {
  width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(19, 35, 63, .12);
  background: #fff; color: var(--mc-ink); font: 16px/1.35 system-ui, sans-serif; outline: none;
  box-shadow: 0 4px 14px rgba(19, 35, 63, .05); transition: border-color .2s ease, box-shadow .2s ease;
}
.mc-field input::placeholder, .mc-field textarea::placeholder { color: #8a96a8; }
.mc-field textarea { min-height: 84px; resize: vertical; }
.mc-field input:focus, .mc-field textarea:focus { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.mc-next { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; }
.mc-next .mc-hint { color: var(--mc-muted); font-size: 13px; }
.mc-error { color: #c0392b; font-size: 13.5px; margin: 10px 0 0; min-height: 1em; }

.mc-uploads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.mc-drop {
  position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 14px; border-radius: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .85); border: 1.5px dashed color-mix(in srgb, var(--c) 50%, transparent); color: var(--mc-ink);
  transition: background .2s ease, box-shadow .2s ease;
}
.mc-drop:hover { background: #fff; box-shadow: 0 10px 26px rgba(19, 35, 63, .12); }
.mc-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mc-drop svg { width: 30px; height: 30px; fill: none; stroke: var(--c); stroke-width: 1.8; }
.mc-drop b { font-size: 14.5px; }
.mc-drop small { color: var(--mc-muted); font-size: 12.5px; }
.mc-drop img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(19, 35, 63, .2); }
.mc-drop .mc-bar { width: 100%; height: 4px; border-radius: 2px; background: rgba(19, 35, 63, .08); overflow: hidden; }
.mc-drop .mc-bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .3s ease; }

.mc-contact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 18px; }
.mc-switch { display: flex; gap: 10px; align-items: center; margin-top: 14px; color: var(--mc-muted); font-size: 14px; cursor: pointer; }
.mc-switch input { accent-color: var(--c); width: 18px; height: 18px; }
.mc-preview { display: grid; justify-items: center; margin-top: 22px; }
.mc-preview .mc-card { width: min(320px, 100%); }
.mc-thinking { display: inline-flex; gap: 5px; margin-top: 18px; }
.mc-thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: mc-dot 1s ease-in-out infinite; }
.mc-thinking i:nth-child(2) { animation-delay: .15s; } .mc-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes mc-dot { 50% { transform: translateY(-5px); opacity: .5; } }

.mc-progress {
  position: fixed; top: calc(var(--toolbar-height, 60px) + 12px); left: 50%; transform: translateX(-50%); z-index: 30;
  width: min(420px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px;
}
.mc-progress > div { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; position: relative; }
.mc-progress-bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 3px;
  background: linear-gradient(90deg, #1d8fc4, #3fa356, #d4a72c, #ff3ea5, #8b5cf6);
  background-size: 220% 100%; animation: mc-shimmer 4s linear infinite; transition: width .6s var(--mc-ease);
}
@keyframes mc-shimmer { to { background-position: -220% 0; } }
.mc-progress span { font: 700 10.5px/1 var(--mc-mono); color: var(--muted); white-space: nowrap; }

@media (max-width: 560px) {
  .mc-options, .mc-uploads { grid-template-columns: 1fr; }
  .mc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-tile { padding: 14px; }
  .mc-tile .mc-icon { width: 40px; height: 40px; }
  .mc-tiers { grid-template-columns: 1fr; gap: 10px; }
  .mc-tier { grid-template-columns: 112px 1fr; grid-template-rows: none; }
  .mc-tier-scene { height: auto; min-height: 76px; }
  .mc-tier-body { align-content: center; }
  .mc-tier-count { top: auto; bottom: 8px; left: 8px; }
  .mc-circles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mc-circle-card { padding: 12px 4px 10px; }
  .mc-circle-icon { width: 40px; height: 40px; padding: 8px; }
  .mc-circle-card b { font-size: 14px; }
  .mc-sheet { padding: 20px 16px 24px; border-radius: 0 0 28px 28px; }
  .mc-roombar { flex-wrap: wrap; }
  .mc-roombar > div { flex: 1 1 180px; }
  .mc-soon { margin-left: 50px; }
  .mc-welcome-label { font-size: 8.5px; letter-spacing: .06em; }
}
/* the wizard's extras */
.mc-own { display: flex; gap: 8px; margin-top: 10px; }
.mc-own input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1px dashed rgba(19, 35, 63, .25); background: rgba(255, 255, 255, .8); color: var(--mc-ink); font: 15px system-ui, sans-serif; outline: none; }
.mc-own input:focus { border-style: solid; border-color: var(--c); background: #fff; }
.mc-own .mc-btn { min-height: 44px; padding: 10px 18px; }

@media (prefers-reduced-motion: reduce) {
  .mc-cover *, .mc-tier-scene *, .mc-bubbles i, .mc-welcome-disc, .mc-welcome-face::after, .mi-flag, .mi-olive, .mi-sway, .mi-node, .mi-code { animation: none !important; }
  .mc-card, .mc-welcome-circle, .mc-option, .mc-tile { animation: none; }
  .mc-step { transition: none; filter: none; }
  .mc-card-inner { transition: none; }
  .mc-sheet::before, .mc-sheet::after { animation: none; }
}

/* ==========================================================================
   Wizard stages: dark scenes behind frosted glass (basics on black, advanced in full scene)
   ========================================================================== */
.mc-join:not(.is-studio) .mc-feed { padding: 0; }
.mc-slot { position: relative; isolation: isolate; padding-left: 16px; padding-right: 16px; }
.mc-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .7; transition: opacity 1s ease; }
.mc-slot.is-on .mc-backdrop, .mc-studio > .mc-backdrop, .mc-cardpage-stage .mc-backdrop { opacity: 1; }
.mc-backdrop > div { position: absolute; inset: 0; }
.mc-backdrop svg { width: 100%; height: 100%; display: block; stroke: none; fill: none; }
.mc-backdrop.is-basic .bd-scene { opacity: .34; mask-image: radial-gradient(ellipse at 50% 60%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 25%, transparent 75%); }
.bd-shade { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0, 0, 0, .55) 100%); }
.bd-star { animation: bd-twinkle 3.6s ease-in-out infinite; }
@keyframes bd-twinkle { 50% { opacity: .1; } }
.bd-wave { animation: bd-roll 7s linear infinite; }
.bd-wave.w2 { animation-duration: 11s; animation-direction: reverse; }
@keyframes bd-roll { to { transform: translateX(100px); } }
.bd-moonpath { animation: bd-twinkle 2.6s ease-in-out infinite; }
.bd-flag { transform-box: fill-box; transform-origin: left center; animation: bd-flag 1.8s ease-in-out infinite; }
@keyframes bd-flag { 50% { transform: scaleX(.8) skewY(5deg); } }
.bd-streak { stroke-dasharray: 900; stroke-dashoffset: 900; animation: bd-streak 5s linear infinite; }
@keyframes bd-streak { 0% { stroke-dashoffset: 900; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 85%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.bd-bokeh { animation: bd-bokeh 14s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes bd-bokeh { to { transform: translate(30px, -40px) scale(1.25); opacity: .05; } }
.bd-windows rect { animation: bd-blink 4s steps(2) infinite; }
.bd-windows .w1 { animation-delay: -1s; } .bd-windows .w2 { animation-delay: -2s; } .bd-windows .w3 { animation-delay: -3s; }
@keyframes bd-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .15; } }
.bd-constellation { stroke-dasharray: 6 8; animation: bd-dash 6s linear infinite; }
@keyframes bd-dash { to { stroke-dashoffset: -140; } }
.bd-node { transform-box: fill-box; transform-origin: center; animation: bd-node 3s ease-in-out infinite; }
@keyframes bd-node { 50% { transform: scale(1.7); opacity: .6; } }
.bd-feather { animation: bd-feather 16s linear infinite; }
@keyframes bd-feather { 0% { transform: translate(var(--x), 880px) rotate(-14deg); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(calc(var(--x) + 50px), 400px) rotate(16deg); } 90% { opacity: .8; } 100% { transform: translate(calc(var(--x) - 20px), -80px) rotate(-8deg); opacity: 0; } }
.bd-chart { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: bd-chart 7s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes bd-chart { 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.bd-rain { animation: bd-rain 10s linear infinite; }
@keyframes bd-rain { from { transform: translateY(-680px); } to { transform: translateY(820px); } }
.bd-aurora { animation: bd-aurora 18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.bd-aurora.a2 { animation-duration: 24s; } .bd-aurora.a3 { animation-duration: 30s; }
@keyframes bd-aurora { to { transform: translate(80px, 40px) scale(1.2); } }
.bd-boat { transform-box: fill-box; transform-origin: center bottom; animation: bd-bob 5s ease-in-out infinite; }
@keyframes bd-bob { 50% { transform: translate(-10px, 3px) rotate(3deg); } }

/* the glass card on its stage: wider, frosted, the scene glowing through */
.mc-step {
  width: min(880px, 100%);
  /* the original bright sky paper, wider, glowing in the circle's colour against its stage */
  color: var(--mc-ink);
  background: var(--mc-sky);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 70px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.mc-step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; flex-wrap: wrap; }
.mc-step-head .mc-step-kicker { line-height: 1.5; letter-spacing: .2em; }

.mc-step-head .mc-step-kicker { margin: 0; }
.mc-q-small { font-size: clamp(20px, 3.6vw, 26px); margin-top: 6px; }
@media (min-width: 760px) { .mc-step .mc-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mc-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-fields-3 { grid-template-columns: 1.4fr 1fr 1.2fr; }
@media (max-width: 640px) {
  .mc-fields-2, .mc-fields-3 { grid-template-columns: 1fr; }
  .mc-slot { padding: 72px 0 28px; }
  .mc-step { padding: 22px 18px; border-radius: 26px; }
  .mc-step .mc-q { font-size: 26px; }
  .mc-step .mc-options { gap: 8px; margin-top: 16px; }
  .mc-step .mc-option { padding: 12px 14px; }
}
.mc-field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.mc-field-top > span:first-child { font: 700 10.5px/1.3 var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); }
.mc-next-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mc-progress span { color: rgba(255, 255, 255, .78); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.mc-sub-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mc-line); }
.mc-sub-section h3 { margin: 0 0 10px; font: 700 11px/1 var(--mc-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mc-muted); }
.mc-after { margin-top: 18px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); }
.mc-after .mc-sub { margin: 0 0 12px; }
.mc-link { appearance: none; border: 0; background: none; padding: 0; color: var(--mc-ocean); font: 600 13.5px/1.4 system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.mc-link:hover { text-decoration: underline; }

/* "Shown on card" ⇄ "Don't share" */
.mc-private {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(19, 35, 63, .12); background: rgba(255, 255, 255, .8); color: var(--mc-muted);
  font: 600 11.5px/1 system-ui, sans-serif; transition: background .2s, color .2s, border-color .2s;
}
.mc-private svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-private[aria-pressed="true"] { background: #13233f; color: #fff; border-color: #13233f; }

/* open or anonymous */
.mc-visibility { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mc-vis {
  appearance: none; text-align: left; display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; cursor: pointer; position: relative;
  border: 1px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .88); color: var(--mc-ink); box-shadow: 0 6px 18px rgba(19, 35, 63, .08);
}
.mc-vis b { font: 600 16px/1.2 var(--mc-serif); }
.mc-vis small { color: var(--mc-muted); font-size: 12.5px; line-height: 1.4; }
.mc-vis em { font: 700 10px/1 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: #8b5cf6; margin-top: 4px; }
.mc-vis[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 2px var(--c, #1d8fc4), 0 10px 26px color-mix(in srgb, var(--c, #1d8fc4) 25%, transparent); }
.mc-vis:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 560px) { .mc-visibility { grid-template-columns: 1fr; } }
.mc-switch span { line-height: 1.35; }


/* the card as an editor: every part a shortcut */
.mc-card.is-editable [data-edit] { cursor: pointer; border-radius: 10px; transition: box-shadow .2s ease, background .2s ease; position: relative; }
.mc-card.is-editable [data-edit]:hover, .mc-card.is-editable [data-edit]:focus-visible { outline: none; background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); }
.mc-card.is-editable [data-edit]:hover::after, .mc-card.is-editable [data-edit]:focus-visible::after {
  content: "✎"; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 700 11px/1 system-ui; box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.mc-card.is-editable .mc-avatar[data-edit] { border-radius: 50%; }
.mc-city.is-empty { opacity: .55; font-style: italic; }
.mc-facts li.is-private { opacity: .5; text-decoration: line-through dashed; }
.mc-anon { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #13233f; color: #fff; font: 700 9.5px/1.4 var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.mc-anon svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.mc-actions button.is-icon { flex: 0 0 52px; }
.mc-actions button.is-invite { color: #fff; background: linear-gradient(135deg, #1d8fc4, #3fa356); }
.mc-actions button[data-act="connect"][aria-pressed="true"] { color: var(--mc-green); }

/* ==========================================================================
   A card, full size, with its QR code
   ========================================================================== */
.mc-view { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit;
  background: rgba(3, 8, 20, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s ease; }
.mc-view.is-open { opacity: 1; }
.mc-view::backdrop { background: transparent; }
.mc-view-box { position: relative; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 900px;
  transform: translateY(24px) scale(.97); transition: transform .5s var(--mc-ease); }
.mc-view.is-open .mc-view-box { transform: none; }
.mc-view-card { width: min(360px, 88vw); }
.mc-view-card .mc-card { width: 100%; }
.mc-view-x { position: absolute; top: -8px; right: -8px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; }
.mc-view-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mc-view-qr { display: grid; gap: 16px; justify-items: center; width: min(320px, 88vw); padding: 22px; border-radius: 26px; text-align: center; color: var(--mc-ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(232, 244, 255, .86)); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(34, 211, 238, .18); }
.mc-qr-frame { width: 200px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 35, 63, .08), 0 10px 30px rgba(29, 143, 196, .25); }
.mc-qr-frame img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mc-qr-text h3 { margin: 4px 0 6px; font: 600 24px/1.1 var(--mc-serif); }
.mc-qr-text .mc-sub { margin: 0 0 12px; font-size: 13.5px; }
.mc-qr-link { display: block; margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: rgba(19, 35, 63, .06); font: 12px/1.3 var(--mc-mono); color: var(--mc-muted); word-break: break-all; }
.mc-qr-text .mc-next-right { justify-content: center; }

/* ==========================================================================
   The account panel: your card first
   ========================================================================== */
.account-membercard { display: grid; gap: 12px; margin: 4px 0 18px; padding: 16px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .12); }
.account-membercard .account-edit-eyebrow { margin: 0; }
.mc-acct { display: flex; align-items: center; gap: 14px; }
.mc-acct .mc-avatar { position: static; margin: 0; width: 58px; height: 58px; flex: none; font-size: 20px; }
.mc-acct-who { display: grid; gap: 3px; min-width: 0; }
.mc-acct-who b { font: 600 19px/1.2 var(--mc-serif); color: var(--ink, #fff); }
.mc-acct-who span { color: var(--muted, #9aa6bf); font-size: 13px; }
.mc-acct-who small { color: #c4b5fd; font: 700 10px/1.3 var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; }
.mc-acct-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-acct-acts .mc-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mc-acct-acts .mc-btn-ghost { color: var(--ink, #fff); border-color: rgba(255, 255, 255, .2); }
.mc-acct-empty { display: grid; gap: 10px; justify-items: start; }
.mc-acct-empty p { margin: 0; color: var(--muted, #9aa6bf); font-size: 14px; line-height: 1.45; }
.account-below-eyebrow { margin-top: 18px; }
.account-topbar-icon.has-photo, .account-chip-avatar.has-photo { padding: 0; overflow: hidden; }
img.mc-own-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ==========================================================================
   Directory: topics, connection requests
   ========================================================================== */
.mc-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.mc-topics-label { font: 700 10.5px/1 var(--mc-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mc-muted); margin-right: 4px; }
.mc-topic { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(19, 35, 63, .1); background: rgba(255, 255, 255, .8); color: var(--mc-ink); font: 600 13px/1 system-ui, sans-serif;
  transition: background .2s, color .2s, box-shadow .2s; animation: mc-pop-in .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.mc-topic small { color: var(--mc-muted); font: 600 11px/1 var(--mc-mono); }
.mc-topic[aria-pressed="true"] { background: #13233f; color: #fff; box-shadow: 0 6px 16px rgba(19, 35, 63, .25); }
.mc-topic[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }
.mc-topic.is-more, .mc-topic.is-clear { text-transform: none; background: transparent; color: var(--mc-ocean); border-color: transparent; }
.mc-sheet .mc-topics { margin: 16px 0 0; }

/* ==========================================================================
   A card behind its QR code
   ========================================================================== */
.mc-cardpage { position: relative; isolation: isolate; min-height: calc(var(--viewport-height, 100dvh) - var(--toolbar-height, 60px)); display: grid; place-items: center; padding: 28px 16px 60px; }
.mc-cardpage-stage { position: fixed; inset: 0; z-index: -1; }
.mc-cardpage-stage .mc-backdrop { inset: 0; }
.mc-cardpage-inner { display: grid; gap: 18px; justify-items: center; width: min(560px, 100%); }
.mc-cardpage-inner > .mc-kicker { color: #9fd8ff; }
.mc-cardpage-card { width: min(360px, 100%); }
.mc-cardpage-card .mc-card { width: 100%; }
.mc-cardpage-loading { height: 420px; border-radius: 24px; background: linear-gradient(110deg, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .1) 70%) 0 0/250% 100%; animation: club-shimmer 1.4s linear infinite; }
.mc-cardpage-panel { width: 100%; padding: 22px; border-radius: 24px; text-align: center; color: var(--mc-ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(232, 244, 255, .8)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: mc-rise .6s var(--mc-ease) both; }
.mc-cardpage-panel h2 { margin: 0 0 6px; font: 600 26px/1.15 var(--mc-serif); }
.mc-cardpage-panel .mc-sub { margin: 0 0 16px; }
.mc-cardpage-panel .mc-next-right { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .mc-backdrop *, .mc-topic, .mc-sec-body, .mc-cardpage-panel { animation: none !important; } }

/* ---------- the room grouped by automatch ---------- */
.mc-grid.is-grouped { display: grid; grid-template-columns: 1fr; gap: 34px; }
.mc-group { display: grid; gap: 14px; animation: mc-rise .6s var(--mc-ease) both; }
.mc-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mc-group-head h3 { margin: 0; font: 600 22px/1.15 var(--mc-serif); color: #fff; }
.mc-group-head span { color: rgba(255, 255, 255, .62); font: 600 11px/1.3 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; }
.mc-group[data-band="top"] .mc-group-head h3 { background: linear-gradient(90deg, #7ff0d0, #9fd8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-group[data-band="top"] .mc-group-head { border-bottom-color: rgba(127, 240, 208, .35); }

/* ---------- your connections, in the account panel ---------- */
.mc-acct-conn { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .10); }
.mc-acct-conn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mc-acct-conn-head b { font: 600 15px/1.2 var(--mc-serif); color: var(--ink, #fff); }
.mc-acct-conn-head a { color: #9fd8ff; font-size: 13px; text-decoration: none; }
.mc-acct-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.mc-acct-people a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; color: var(--ink, #fff); text-decoration: none; transition: background .2s; }
.mc-acct-people a:hover { background: rgba(255, 255, 255, .08); }
.mc-acct-people .mc-avatar { position: static; margin: 0; width: 34px; height: 34px; font-size: 13px; border-width: 2px; flex: none; }
.mc-acct-people span { display: grid; min-width: 0; }
.mc-acct-people span b { font-size: 14px; font-weight: 600; }
.mc-acct-people span small { color: var(--muted, #9aa6bf); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-acct-people em { margin-left: auto; font: 700 9.5px/1.3 var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #7ff0d0; }
.mc-acct-people em.is-in { color: #ffd27a; }
.mc-acct-none { margin: 0; color: var(--muted, #9aa6bf); font-size: 13.5px; }

/* Safari (iPhone) ignores backface-visibility for the parts of a face that get their own layer (the avatar, the scene
   name, the circle icons), so they showed through, mirrored, on the other side. Hide the face that's turned away
   outright, switching at the midpoint of the flip, when the card is edge-on. */
.mc-front { visibility: visible; transition: box-shadow .25s ease, transform .25s ease, visibility 0s linear .3s; }
.mc-back { visibility: hidden; transition: box-shadow .25s ease, transform .25s ease, visibility 0s linear .3s; }
.mc-card.is-flipped .mc-front { visibility: hidden; }
.mc-card.is-flipped .mc-back { visibility: visible; }

/* ==========================================================================
   Companies: the business side of a card, and the directory's logo wall
   ========================================================================== */
.mc-company { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; align-items: center; margin: 2px 0 6px; padding: 12px 14px;
  border-radius: 16px; background: linear-gradient(135deg, #f6f9fd, #ffffff); border: 1px solid rgba(19, 35, 63, .08); box-shadow: 0 6px 18px rgba(19, 35, 63, .06); }
.mc-company.is-private { opacity: .5; }
.mc-company-logo { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid rgba(19, 35, 63, .08); }
.mc-company-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.mc-company-logo.is-mono, .mc-company-mark.is-mono { background: linear-gradient(135deg, #13233f, #2f4f86); color: #fff; font: 600 18px/1 var(--mc-serif); letter-spacing: .04em; }
.mc-company-text { display: grid; gap: 3px; min-width: 0; }
.mc-company-text b { font: 600 15.5px/1.2 var(--mc-serif); color: var(--mc-ink); letter-spacing: .06em; text-transform: uppercase; font-variant: small-caps; }
.mc-company-text i { color: var(--mc-muted); font: italic 13px/1.35 var(--mc-serif); }
.mc-company-about { grid-column: 1 / -1; margin: 6px 0 0; color: #3b4a63; font-size: 13px; line-height: 1.5; }
.mc-company-top { margin-bottom: 6px; }
.mc-company-edit { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.mc-company-edit .mc-fields { margin-top: 0; }
.mc-logo-drop img { width: 84px; height: 84px; border-radius: 16px; object-fit: contain; background: #fff; padding: 6px; box-sizing: border-box; }
@media (max-width: 560px) { .mc-company-edit { grid-template-columns: 1fr; } }

/* Members | Companies */
.mc-views { display: inline-flex; gap: 4px; margin: 16px 0 0; padding: 4px; border-radius: 999px; background: rgba(19, 35, 63, .07); }
.mc-views button { appearance: none; border: 0; cursor: pointer; padding: 9px 18px; border-radius: 999px; background: transparent; color: var(--mc-muted); font: 600 13.5px/1 system-ui, sans-serif; transition: background .25s, color .25s, box-shadow .25s; }
.mc-views button[aria-selected="true"] { background: #fff; color: var(--mc-ink); box-shadow: 0 4px 14px rgba(19, 35, 63, .14); }
.mc-sheet .mc-views + .mc-topics { margin-top: 12px; }
.is-away { display: none !important; }

.mc-page > .mc-companies, .mc-page > .mc-company-filter { max-width: 1180px; margin-left: auto; margin-right: auto; }
.mc-companies { margin-top: 28px; }
.mc-companies-head h2 { margin: 0; font: 600 30px/1.1 var(--mc-serif); color: #fff; letter-spacing: .01em; }
.mc-companies-head p { margin: 6px 0 22px; color: rgba(255, 255, 255, .68); font-size: 14px; }
.mc-company-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.mc-company-tile { appearance: none; cursor: pointer; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 16px 18px; text-align: center;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .10); color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  opacity: 0; transform: translateY(14px); animation: mc-company-in .8s var(--mc-ease) forwards; animation-delay: calc(var(--i) * 55ms);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s var(--mc-ease); }
.mc-company-tile:hover, .mc-company-tile:focus-visible { outline: none; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .28); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); transform: translateY(-2px); }
@keyframes mc-company-in { to { opacity: 1; transform: none; } }
.mc-company-mark { width: 84px; height: 84px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
.mc-company-mark img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.mc-company-mark.is-mono { font-size: 28px; }
.mc-company-tile b { font: 600 16px/1.25 var(--mc-serif); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.mc-company-tile small { color: rgba(255, 255, 255, .62); font: italic 12.5px/1.4 var(--mc-serif); }
.mc-company-tile em { font: 700 9.5px/1 var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: #9fd8ff; }
.mc-company-filter { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 4px auto 14px; color: rgba(255, 255, 255, .78); font-size: 14px; }
.mc-company-filter b { color: #fff; font: 600 16px/1.2 var(--mc-serif); letter-spacing: .06em; text-transform: uppercase; margin-left: -10px; }
.mc-company-filter .mc-link { color: #9fd8ff; }
@media (prefers-reduced-motion: reduce) { .mc-company-tile { animation: none; opacity: 1; transform: none; } }

/* The tier in the account panel opens the Club. */
.mc-acct-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; color: var(--muted, #9aa6bf); font-size: 13px; }
.mc-acct-tier { appearance: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(159, 216, 255, .35); background: rgba(159, 216, 255, .10); color: #cfeaff; font: 600 12.5px/1.2 system-ui, sans-serif; transition: background .2s; }
.mc-acct-tier:hover { background: rgba(159, 216, 255, .2); }
.mc-acct-tier[data-room="executive"] { border-color: rgba(127, 240, 208, .4); color: #c9fff0; background: linear-gradient(135deg, rgba(29, 143, 196, .25), rgba(63, 163, 86, .25)); }
.mc-acct-tier svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }


/* ==========================================================================
   The wizard, more premium: a light that travels the card's edge, cards that arrive in 3D, scenes that drift,
   a burst of light from each answer. Editing: every card in place, a small Save pill.
   ========================================================================== */
@property --mc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mc-step { transform: perspective(1400px) rotateX(9deg) translateY(46px) scale(.95); transform-origin: 50% 100%; }
.mc-step.is-in { transform: none; }
.mc-halo { position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.6px; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: conic-gradient(from var(--mc-a), transparent 0 62%, color-mix(in srgb, var(--c) 80%, #fff) 74%, #fff 78%, color-mix(in srgb, var(--c) 80%, #fff) 82%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mc-halo 5.5s linear infinite; }
.mc-step.is-in .mc-halo { opacity: 1; }
@keyframes mc-halo { to { --mc-a: 360deg; } }
.mc-step.is-in { box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 90px color-mix(in srgb, var(--c) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9); }
.mc-backdrop .bd-scene { transform: translateY(calc(var(--py, 0) * -46px)) scale(1.12); transition: transform .25s linear; will-change: transform; }
.mc-slot.is-far .mc-backdrop * { animation-play-state: paused !important; }
.mc-slot { content-visibility: auto; contain-intrinsic-size: auto 100vh; }
.mc-option[aria-pressed="true"] { animation: mc-chosen .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mc-chosen { 40% { transform: scale(1.04); } }
.mc-sparks { position: fixed; z-index: 2147483000; width: 0; height: 0; pointer-events: none; }
.mc-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 8px var(--c), 0 0 2px #fff; animation: mc-spark .8s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes mc-spark { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.mc-edit-save { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 14px; border-radius: 999px; color: #fff; background: rgba(10, 18, 36, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); transition: box-shadow .4s, border-color .4s; }
.mc-edit-save.is-saved { border-color: rgba(127, 240, 208, .6); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 26px rgba(127, 240, 208, .45); }
.mc-edit-save-msg { font-size: 12.5px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.mc-edit-save .mc-btn { min-height: 34px; padding: 7px 16px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .mc-halo { animation: none; } .mc-step { transform: none; } .mc-backdrop .bd-scene { transform: none; } }

/* Topic pills keep their size and place: they pop in once; choosing one only changes its colour. */
.mc-topics.is-settled .mc-topic { animation: none; }
.mc-topic { border-width: 1px; box-sizing: border-box; }
.mc-topic[aria-pressed="true"] { border-color: #13233f; }

/* The QR on its own. */
.mc-view-qr.is-alone { width: auto; padding: 26px; gap: 12px; }
.mc-view-qr.is-alone .mc-qr-frame { width: min(340px, 78vw); }
.mc-qr-name { margin: 0; color: var(--mc-muted); font: 600 11px/1.3 var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; }

/* The wizard's arrow: the chat's arrow, in the colour of the card in view, just above the Save pill. It points the way
   you are scrolling and fades in and out softly (opacity, a small lift and a blur; nothing that jumps). */
.mc-next-card { --scroll-color: #1d8fc4; position: fixed; z-index: 35; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 66px);
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 15px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--scroll-color) 58%, #ffffff20);
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--scroll-color) 19%, #ffffff10), #08121ff2 72%);
  color: color-mix(in srgb, var(--scroll-color) 80%, white);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px #00000055, 0 0 19px color-mix(in srgb, var(--scroll-color) 22%, transparent), inset 0 1px 0 #ffffff1d;
  opacity: 0; filter: blur(4px); transform: translate3d(0, 8px, 0); pointer-events: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .6s cubic-bezier(.2, .8, .2, 1), filter .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1),
              color .4s ease, border-color .4s ease, box-shadow .4s ease; will-change: opacity, transform; }
.mc-next-card.is-visible { opacity: 1; filter: none; transform: none; pointer-events: auto; }
.mc-next-card:hover, .mc-next-card:focus-visible { outline: none; border-color: color-mix(in srgb, var(--scroll-color) 88%, white);
  box-shadow: 0 14px 38px #00000060, 0 0 28px color-mix(in srgb, var(--scroll-color) 34%, transparent), inset 0 1px 0 #ffffff27; }
.mc-next-card:active { transform: scale(.93); transition-duration: .12s; }
.mc-next-card svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mc-next-card.is-up svg { transform: rotate(180deg); }
body:not(:has(.mc-edit-save)) .mc-next-card { bottom: calc(env(safe-area-inset-bottom) + 18px); }   /* no Save pill: sit lower */
/* Editing moves freely: no snapping to each card (the arrow still lands on one exactly). */
.is-editing .mc-feed { scroll-snap-type: none !important; }
@media (prefers-reduced-motion: reduce) { .mc-next-card { transition: opacity .2s ease; filter: none; transform: none; } }

/* Signed up, no card yet: a blurred card with "Waiting for activation" over it. */
.mc-card.mc-waiting { position: relative; min-height: 384px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 50px rgba(19, 35, 63, .16); animation: mc-card-in .6s var(--mc-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.mc-waiting-ghost { position: absolute; inset: 0; filter: blur(7px); opacity: .9; }
.mc-waiting-ghost .g-cover { height: 132px; background: linear-gradient(135deg, #bfe6ff, #e8dcff 50%, #ffe0ec); }
.mc-waiting-ghost .g-avatar { width: 72px; height: 72px; margin: -36px 0 14px 18px; border-radius: 50%; background: linear-gradient(135deg, #9fb7d8, #c9b6e8); border: 4px solid #fff; }
.mc-waiting-ghost .g-line { height: 12px; margin: 0 18px 12px; border-radius: 6px; background: #d9e2ee; }
.mc-waiting-ghost .w60 { width: 60%; height: 18px; } .mc-waiting-ghost .w40 { width: 40%; } .mc-waiting-ghost .w75 { width: 75%; } .mc-waiting-ghost .w50 { width: 50%; }
.mc-waiting-veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .55)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mc-waiting-veil svg { width: 30px; height: 30px; fill: none; stroke: var(--mc-ocean); stroke-width: 1.8; stroke-linecap: round; animation: mc-wait-spin 6s linear infinite; }
@keyframes mc-wait-spin { to { transform: rotate(360deg); } }
.mc-waiting-veil b { font: 600 18px/1.2 var(--mc-serif); color: var(--mc-ink); }
.mc-waiting-veil small { color: var(--mc-muted); font-size: 12.5px; }
.mc-waiting-more { grid-column: 1 / -1; margin: 4px 0 0; color: rgba(255, 255, 255, .7); font: 600 12px/1.3 var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .mc-waiting-veil svg { animation: none; } }

/* The QR in the account's top bar: a round icon beside Edit account. */
.account-topbar .mc-topbar-qr { margin-left: auto; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; flex: none; }
.account-topbar .mc-topbar-qr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Topics as words, not pills: a small glyph in the circle's ocean tone, an elegant serif word, a quiet count.
   Chosen: the word darkens and a fine gradient line draws beneath it. */
.mc-topics { gap: 6px 18px; align-items: baseline; }
.mc-topics-label { flex-basis: 100%; margin: 0 0 2px; }
.mc-topic, .mc-topic[aria-pressed="true"] { appearance: none; position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; border: 0 !important;
  border-radius: 0; background: none !important; box-shadow: none !important; cursor: pointer; animation: none;
  font: 500 17px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: color-mix(in srgb, var(--mc-ink) 72%, transparent);
  transition: color .25s ease; }
.mc-topic svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--mc-ocean); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; transition: opacity .25s, stroke .25s; }
.mc-topic sup { font: 600 10px/1 var(--mc-mono); color: var(--mc-muted); letter-spacing: .04em; margin-left: -2px; align-self: flex-start; padding-top: 4px; }
.mc-topic::after { content: ""; position: absolute; left: 24px; right: 0; bottom: 1px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, var(--mc-ocean), var(--mc-green)); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .9, .2, 1); }
.mc-topic:hover { color: var(--mc-ink); }
.mc-topic:hover svg { opacity: 1; }
.mc-topic[aria-pressed="true"] { color: var(--mc-ink); }
.mc-topic[aria-pressed="true"] svg { opacity: 1; stroke: var(--mc-green); }
.mc-topic[aria-pressed="true"]::after { transform: scaleX(1); }
.mc-topic[aria-pressed="true"] sup { color: var(--mc-green); }
.mc-topic-more { appearance: none; border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--mc-ocean);
  font: italic 500 15px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mc-ocean) 35%, transparent); text-underline-offset: 4px; }
.mc-topic-more.is-clear { color: var(--mc-muted); }