/* ============================================================
   Hand-coded miniatures of the four real products.
   Every mock is authored at exactly 1240 x 620 (the .screen box).
   Default CSS state is the FINISHED state — entrance animations
   only run while the parent slide carries .play, so overview
   thumbnails render fully composed.
   ============================================================ */

/* =====================================================================
   Brand lockups inside the mocks.
   Same rule as the deck's own lockup: the badge is sized against the
   wordmark's letterforms (--ink-h of the image box), never the image box
   itself, so every Reve + badge pair in the deck reads identically.
   ===================================================================== */

.ms-brand, .mc-brand, .mp-brand, .pw-brand, .pw-pbrand { align-items: flex-start; }
.ms-brand { --wm: 15px; }
.mc-brand { --wm: 16px; }
.mp-brand { --wm: 15px; }
.pw-brand { --wm: 15px; }
.pw-pbrand { --wm: 13px; }

.ms-tag, .mc-tag, .mp-tag {
  height: calc(var(--wm) * var(--ink-h));
  margin-top: calc(var(--wm) * var(--ink-top));
  display: inline-flex; align-items: center;
  padding: 0 7px;
  border-radius: calc(var(--wm) * var(--ink-h) * .25);
}
/* Party's badge is bare type beside a white mark — align it to the same edge */
.pw-tag, .pw-pword {
  height: calc(var(--wm) * var(--ink-h));
  margin-top: calc(var(--wm) * var(--ink-top));
  display: inline-flex; align-items: center;
}

/* =====================================================================
   Scene changes inside a product.
   One rule for all three mocks: the outgoing scene accelerates up and out,
   the incoming one settles up from below just behind it. Never a flat
   cross-dissolve — the motion is what tells you a nav click happened.
   ===================================================================== */

.ms-scene, .mc-scene, .mp-scene {
  opacity: 0; visibility: hidden;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .34s var(--ease-in), transform .34s var(--ease-in), visibility .34s;
}
/* The entering scene has to outrank the leaving one explicitly. These are
   absolute siblings, so without z-index they stack in DOM order — stepping
   BACKWARD (a later scene leaving over an earlier one arriving) left the new
   scene painting underneath the old one for the whole 340ms exit. */
.ms-scene.on, .mc-scene.on, .mp-scene.on {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto; z-index: 2;
  transition: opacity .5s var(--ease-out) .1s, transform .78s var(--ease-out) .1s, visibility 0s;
}
.ms-scene.out, .mc-scene.out, .mp-scene.out {
  visibility: visible; opacity: 0; z-index: 1;
  transform: translateY(-16px);
  transition: opacity .3s var(--ease-in), transform .34s var(--ease-in), visibility .34s;
}

/* =====================================================================
   01 · Reve Storytelling (reve-internal)
   ===================================================================== */

.mock-story { background: var(--canvas); display: flex; flex-direction: column; }

.ms-header {
  height: 50px; flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.ms-brand { display: flex; align-items: center; gap: 9px; }
.ms-wordmark { height: 15px; width: auto; }
.ms-tag {
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 4px 7px; border-radius: 5px; line-height: 1;
}
.ms-avatar {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 500;
}

.ms-body { flex: 1 1 auto; min-height: 0; display: flex; }

.ms-side {
  width: 186px; flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  display: flex; flex-direction: column;
}
.ms-search {
  height: 29px; display: flex; align-items: center; gap: 7px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: 11px; color: var(--ink-faint); background: var(--gray-50);
}
.ms-search svg { width: 11px; height: 11px; flex: 0 0 auto; }
.ms-kbd { margin-left: auto; font-size: 8px; color: var(--ink-faint); letter-spacing: 0; }
.ms-sec { font-size: 8.5px; padding: 0 8px; margin: 13px 0 5px; color: var(--ink-faint); }
.ms-nav {
  height: 26px; display: flex; align-items: center; gap: 8px;
  padding: 0 9px; border-radius: var(--r-full);
  font-size: 12px; color: var(--ink-soft);
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.ms-nav svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ms-nav.on { background: var(--gray-100); color: var(--ink); font-weight: 550; }

.ms-main { flex: 1 1 auto; min-width: 0; position: relative; }
.ms-scene {
  position: absolute; inset: 0;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}

.ms-vh { height: 40px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.ms-title { font-size: 27px; line-height: 1; }
.ms-dim { color: var(--ink-faint); font-size: 9px; }
.ms-vh .ms-dim { margin-left: auto; }
.ms-spacer { margin-left: auto; }

.ms-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; flex: 0 0 auto;
  display: flex; flex-direction: column;
}
.ms-ph {
  height: 38px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 0 15px; border-bottom: 1px solid var(--hair);
}
.ms-pt { font-size: 12.5px; font-weight: 600; }
.ms-rows { display: flex; flex-direction: column; }
.ms-row {
  height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 0 15px; border-bottom: 1px solid var(--hair);
  font-size: 12px; color: var(--ink-soft);
}
.ms-row:last-child { border-bottom: 0; }
.ms-row b { font-weight: 550; color: var(--ink-900); }
.ms-rt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-bull { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: 0 0 auto; }
.ms-bull.warn { background: var(--amber); }
.ms-bull.go { background: var(--green); }
.ms-date {
  flex: 0 0 auto; width: 30px; font-size: 7.5px; color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.ms-date b { font-size: 12px; color: var(--ink-900); font-weight: 500; letter-spacing: 0; }

.ms-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 0 0 auto; }
.ms-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 14px 10px; display: flex; flex-direction: column; gap: 2px;
}
.ms-ml { font-size: 8.5px; }
.ms-num { font-size: 23px; line-height: 1.12; font-variant-numeric: tabular-nums; }
/* a tile whose value is a word or a compact metric rather than a counted
   number — "X (Twitter)", "8.4M", "71%" — needs to sit on the same baseline
   without running into its neighbour */
.ms-numsm { font-size: 18px; }

/* Blog — one row per published post, with how the web received it */
.ms-blogrow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 15px; border-bottom: 1px solid var(--hair);
}
.ms-blogrow:last-child { border-bottom: 0; }
.ms-blogrow .ms-thumb { width: 46px; height: 34px; border-radius: 6px; flex: 0 0 auto; background: linear-gradient(140deg, #ff9a3c 0%, #ff3d77 48%, #6a2bd9 100%); }
.ms-blogrow:nth-child(2) .ms-thumb { background: linear-gradient(140deg, #26d0ce 0%, #1a2980 100%); }
.ms-blogrow:nth-child(3) .ms-thumb { background: linear-gradient(140deg, #f6d365 0%, #d5375a 100%); }
.ms-blogtags { display: flex; gap: 4px; margin-top: 5px; }
.ms-blogtags i { font-style: normal; }
.ms-blogside { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ms-blogside b { font-size: 14px; font-weight: 550; }
.ms-blogside .ms-dim { font-size: 8px; }
.ms-tone { display: flex; width: 100%; height: 4px; border-radius: var(--r-full); overflow: hidden; margin-top: 5px; }
.ms-tone i { display: block; width: var(--w); }
.ms-tone i.go  { background: var(--green); }
.ms-tone i.mid { background: var(--gray-300); }
.ms-tone i.bad { background: #b3452b; }

/* a read-only search affordance in a panel header */
.ms-search.sm {
  height: 22px; padding: 0 10px; width: auto; flex: 0 0 auto;
  font-size: 10px; color: var(--ink-faint);
}

.ms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1 1 auto; min-height: 0; }
.ms-cols .ms-panel { flex: 1 1 auto; min-height: 0; }
.ms-cols .ms-panel .ms-rows { min-height: 0; overflow: hidden; }
/* the feed keeps scrolling past the fold in the real app — say so instead of
   leaving dead space under the last card */
/* a trailing work-surface panel fills the rest of the view, like the real app —
   otherwise short scenes leave a slab of dead canvas under the last row */
.ms-scene > .ms-panel.feed:last-child { flex: 1 1 auto; min-height: 0; }
.ms-scene > .ms-panel.feed:last-child .ms-rows { min-height: 0; overflow: hidden; }

.ms-panel.feed { position: relative; }
/* only when the rows genuinely run past the fold — otherwise the gradient
   washes out a row that is fully visible (markClipped in deck.js sets this) */
.ms-panel.feed.clipped::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 34px;
  background: linear-gradient(to top, var(--panel), rgba(255,255,255,0));
  pointer-events: none;
}

.ms-post { display: flex; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--hair); }
.ms-post:last-child { border-bottom: 0; }
.ms-post.tight { padding: 10px 15px; align-items: center; }
.ms-av {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gray-100); color: var(--ink-soft);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .02em;
}
.ms-pbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ms-pline { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.ms-pline b { font-weight: 550; }
.ms-pline .ms-dim { text-transform: none; letter-spacing: .02em; font-size: 9px; }
.ms-ptext {
  font-size: 11.5px; line-height: 1.42; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-pmeta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ms-pmeta .ms-dim { text-transform: none; letter-spacing: .02em; font-size: 9px; }
.ms-pill {
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-full); line-height: 1; flex: 0 0 auto;
}
.ms-pill.go { background: #dcfce8; color: var(--green); }
.ms-pill.neu { background: var(--gray-100); color: var(--ink-mute); }
.ms-pill.warn { background: #fef9c3; color: var(--amber); }

/* ---- Reve AI translation, always secondary to the preserved original ----
   The real card never swaps the post out and offers no "show original"
   toggle: the untouched source text stays put and a green-tinted block is
   appended under it (reve-internal styles.css .translation-block). Sizes are
   the compact variant, scaled to this mock's chrome. */
.ms-post.tr { align-items: flex-start; padding: 12px 15px; }
/* the block opens on its own step, so the row has to grow into it rather than
   jump — 0fr → 1fr is the only height transition that interpolates cleanly
   against auto-sized content */
.ms-trw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .52s var(--ease-out); }
.ms-trw.on { grid-template-rows: 1fr; }
.ms-trw-in { min-height: 0; overflow: hidden; }
.ms-tr {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 7px; padding: 8px 10px; border-radius: 9px;
  background: #f4fbf6; box-shadow: inset 0 0 0 1px #d7ede0;
  opacity: 0; transform: translateY(6px);
  transition: opacity .38s var(--ease-out) .12s, transform .38s var(--ease-out) .12s;
}
.ms-trw.on .ms-tr { opacity: 1; transform: none; }
.ms-tr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-tr-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 650; letter-spacing: .01em; color: var(--ink);
}
.ms-tr-title i {
  display: inline-grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px;
  border-radius: 5px; background: #ddf3e5; color: var(--green);
  font: 650 9px/1 var(--mono); font-style: normal;
}
.ms-tr-prov {
  flex: none; padding: 3px 6px; border-radius: var(--r-full);
  background: #e7f5ec; color: var(--ink-mute); font-size: 7px; letter-spacing: .06em;
  text-transform: none; white-space: nowrap;
}
/* loader and result share one grid cell, so resolving is a crossfade in place
   instead of a second reflow right after the block has finished opening */
.ms-tr-body { display: grid; }
.ms-tr-body > * { grid-area: 1 / 1; transition: opacity .3s var(--ease); }
.ms-tr-load { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-mute); opacity: 0; }
.ms-tr-text { font-size: 10.5px; line-height: 1.5; color: var(--ink-900); }
.ms-tr.busy .ms-tr-load { opacity: 1; }
.ms-tr.busy .ms-tr-text { opacity: 0; }
.ms-spin {
  width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%;
  border: 1.5px solid var(--gray-300); border-top-color: var(--ink);
  animation: msSpin .72s linear infinite;
}
@keyframes msSpin { to { transform: rotate(1turn); } }

/* The translation step brings the feed forward: the tiles and the trend chart
   fold up so both translated rows read at once. Same view, same nav item — the
   part of the page that matters simply takes the room. The max-heights are the
   two elements' real heights, so the fold interpolates evenly rather than
   spending its first third on slack. The negative margin eats the flex gap the
   collapsed element would otherwise keep holding open. */
.ms-scene[data-scene="digest"] .ms-stats { max-height: 90px; }
.ms-scene[data-scene="digest"] > .ms-panel:not(.feed) { max-height: 150px; }
.ms-scene[data-scene="digest"] .ms-stats,
.ms-scene[data-scene="digest"] > .ms-panel:not(.feed) {
  opacity: 1; overflow: hidden;
  transition: max-height .55s var(--ease-out), opacity .3s var(--ease-out) .14s,
              margin-top .55s var(--ease-out);
}
.ms-scene[data-scene="digest"].zoomfeed .ms-stats,
.ms-scene[data-scene="digest"].zoomfeed > .ms-panel:not(.feed) {
  max-height: 0; opacity: 0; margin-top: -14px;
  transition: max-height .55s var(--ease-in), opacity .24s var(--ease-in),
              margin-top .55s var(--ease-in);
}
.ms-thumb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-s);
  background: linear-gradient(135deg, #d6d6d6, #f0f0f0);
}
.ms-thumb.t1 { background: linear-gradient(140deg, #ff9a3c 0%, #ff3d77 48%, #6a2bd9 100%); }
.ms-thumb.t2 { background: linear-gradient(140deg, #26d0ce 0%, #1a2980 100%); }
.ms-thumb.t3 { background: linear-gradient(140deg, #f6d365 0%, #d5375a 100%); }

/* chart */
.ms-chart { position: relative; padding: 8px 15px 4px; }
.ms-chart svg { display: block; width: 100%; height: 118px; }
.ms-grid line { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ms-line { fill: none; stroke: var(--ink-900); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ms-line.dash { stroke: var(--ink-mute); stroke-dasharray: 5 5; stroke-width: 1.6; }
.ms-fill { fill: rgba(0,0,0,.05); stroke: none; }
.ms-legend { display: flex; gap: 14px; padding-top: 8px; }
.ms-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 8.5px; }
.ms-legend .sw { width: 11px; height: 2px; background: var(--ink-900); border-radius: 2px; }
.ms-legend .sw.d { background: repeating-linear-gradient(to right, var(--ink-mute) 0 3px, transparent 3px 6px); }

.ms-tabs, .ms-chips { display: inline-flex; gap: 3px; }
.ms-tabs i, .ms-chips i {
  font-style: normal; font-size: 8.5px; padding: 4px 8px; border-radius: var(--r-full);
  color: var(--ink-mute); border: 1px solid transparent;
}
.ms-tabs i.on, .ms-chips i.on { background: var(--ink); color: #fff; }

/* the always-dark AI block — a signature of the real app */
.ms-brief {
  margin: 12px 15px 14px; padding: 12px 14px;
  background: #141414; border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ms-brief-ml { color: #757575; font-size: 8px; }
.ms-brief-text { font-size: 11.5px; line-height: 1.5; color: #d6d6d6; }

/* ---- sidebar tail: Settings pinned to the bottom, then the version ---- */
.ms-navspacer { flex: 1 1 auto; min-height: 8px; }
.ms-sfoot { font-size: 8px; color: var(--ink-faint); padding: 8px 9px 0; }

/* ---- stat tiles: every tile names its scope, like the real app ---- */
.ms-sub { font-size: 7.5px; color: var(--ink-faint); letter-spacing: .04em; }
.ms-tile.alert { border-color: #f4cfc6; background: #fffaf8; }

/* ---- view-header controls ---- */
.ms-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--green);
}
.ms-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.ms-refresh { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.ms-rmain, .ms-rcaret, .ms-btn, .ms-sel {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 9px; font-size: 9px; line-height: 1;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink-soft);
  border-radius: var(--r-full); white-space: nowrap;
}
.ms-refresh .ms-rmain { border-radius: var(--r-full) 0 0 var(--r-full); border-right: 0; }
.ms-refresh .ms-rcaret { border-radius: 0 var(--r-full) var(--r-full) 0; padding: 0 7px; }
.ms-refresh .ms-rmain:only-child { border-radius: var(--r-full); border-right: 1px solid var(--border); }
.ms-btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.ms-range-lbl { letter-spacing: .06em; }
.ms-window i { font-size: 8px; padding: 4px 6px; }

/* ---- chart: toolbar, crosshair, tooltip, footer ---- */
.ms-ctool {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 15px 0;
}
.ms-series { gap: 4px; }
.ms-series i { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); }
.ms-series i.on { background: var(--gray-100); color: var(--ink-900); border-color: transparent; }
.ms-series i.off { opacity: .42; }
.ms-series .sw { width: 9px; height: 2px; border-radius: 2px; background: var(--ink-900); }
.ms-series .sw.bl { background: var(--blue); }
.ms-series .sw.gr { background: var(--ink-mute); }

.ms-line.bl { stroke: var(--blue); }
.ms-cross { opacity: 0; transition: opacity .3s var(--ease-out); }
.ms-scene.on .ms-cross { opacity: 1; transition-delay: 1.15s; }
.ms-crossline { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ms-dot { fill: var(--ink-900); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ms-dot.bl { fill: var(--blue); }

.ms-tip {
  position: absolute; left: 58%; top: 6px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.ms-scene.on .ms-tip { opacity: 1; transform: none; transition-delay: 1.25s; }
.ms-tip-d { font-size: 7.5px; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
.ms-tip-r { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--ink-soft); }
.ms-tip-r .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-900); flex: 0 0 auto; }
.ms-tip-r .sw.bl { background: var(--blue); }
.ms-tip-r b { margin-left: auto; font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* the real app's inspector affordance — sits in the plot's empty top-left so it
   never collides with the curves or the tooltip */
.ms-hint {
  position: absolute; left: 15px; top: 8px;
  font-size: 7.5px; color: var(--ink-faint); letter-spacing: .04em;
}
.ms-cfoot {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 15px 8px;
}

/* ---- Listening workspace: feed + right rail ---- */
.ms-work { display: grid; grid-template-columns: 1fr 250px; gap: 12px; flex: 1 1 auto; min-height: 0; }
.ms-work .ms-panel { min-height: 0; }
.ms-work > .ms-panel { flex: 1 1 auto; }
.ms-work .ms-rows { min-height: 0; overflow: hidden; }
.ms-rail { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ms-rail .ms-panel { flex: 1 1 auto; }
.ms-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 0 0 auto; }
.ms-ch {
  background: var(--panel); border: 1px solid var(--border); border-radius: 9px;
  padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ms-ch b { font-size: 11px; font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ms-ch span { font-size: 7px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.ms-chiprow { padding: 8px 15px; border-bottom: 1px solid var(--hair); }
.ms-chiprow i b { font-weight: 500; opacity: .6; margin-left: 3px; }

/* ---- the tag chip the real app puts on auto-classified records ---- */
.ms-tagchip {
  font-size: 7.5px; letter-spacing: .06em; padding: 3px 6px; border-radius: var(--r-full);
  background: var(--gray-100); color: var(--ink-mute); line-height: 1; flex: 0 0 auto;
}

/* ---- digest ---- */
.ms-brief.tall { margin: 12px 15px; }
.ms-brief-h { font-size: 12.5px; font-weight: 550; color: #fff; line-height: 1.35; }
.ms-dg { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; }
/* not flex: a flex row makes every text node and <b> its own item, so the
   8px gap landed *inside* the sentence — "skew coverage ; showcase" */
.ms-dgr { position: relative; padding-left: 11px; font-size: 10.5px; line-height: 1.45; color: #b8b8b8; }
.ms-dgr i { position: absolute; left: 0; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: #575757; }
.ms-dgr b { color: #fff; font-weight: 550; }
.ms-themes { display: flex; align-items: center; gap: 6px; padding: 0 15px 12px; flex-wrap: wrap; }

/* ---- horizontal bars (categories, model routing) ---- */
.ms-bars { display: flex; flex-direction: column; gap: 9px; padding: 12px 15px 14px; }
.ms-bar { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; }
.ms-bars.wide .ms-bar { grid-template-columns: 74px 1fr 165px; }
.ms-bl { font-size: 10px; color: var(--ink-soft); }
.ms-btrack { height: 7px; border-radius: var(--r-full); background: var(--gray-100); overflow: hidden; }
.ms-btrack i {
  display: block; height: 100%; width: var(--w); border-radius: var(--r-full);
  background: var(--ink-900); transform-origin: 0 50%;
}
.ms-btrack i.bl { background: var(--blue); }
.ms-btrack i.gr { background: var(--ink-mute); }
.ms-bar b { font-size: 9.5px; font-weight: 500; color: var(--ink-900); text-align: right; }
/* bars grow from the left when their scene arrives */
.ms-scene.on .ms-btrack i { animation: barGrow .9s var(--ease-out) both; }
.ms-bar:nth-child(1) .ms-btrack i { animation-delay: 260ms; }
.ms-bar:nth-child(2) .ms-btrack i { animation-delay: 330ms; }
.ms-bar:nth-child(3) .ms-btrack i { animation-delay: 400ms; }
.ms-bar:nth-child(4) .ms-btrack i { animation-delay: 470ms; }
.ms-bar:nth-child(5) .ms-btrack i { animation-delay: 540ms; }
.ms-bar:nth-child(6) .ms-btrack i { animation-delay: 610ms; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- brand watch findings ---- */
.ms-find {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid var(--hair); align-items: start;
}
.ms-find:last-child { border-bottom: 0; }
.ms-fdom { font-size: 9.5px; color: var(--ink-900); padding-top: 1px; word-break: break-all; }
.ms-fbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ms-ftitle { font-size: 11.5px; font-weight: 550; }
.ms-freason { font-size: 10.5px; line-height: 1.42; color: var(--ink-soft); }
.ms-fflags { display: flex; gap: 5px; margin-top: 2px; }
.ms-fmeta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.ms-pill.bad { background: #fde7e2; color: #b3452b; }
.ms-pill.out { background: var(--ink); color: #fff; }
.ms-pill.ok { background: #dcfce8; color: var(--green); }
.ms-pill.bl { background: #dbeafe; color: var(--blue); }

/* ---- outreach table ---- */
.ms-tabsrow { flex: 0 0 auto; }
.ms-table { width: 100%; border-collapse: collapse; }
.ms-table th {
  font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; font-weight: 400; padding: 9px 15px; border-bottom: 1px solid var(--hair);
}
.ms-table td {
  font-size: 10.5px; color: var(--ink-soft);
  padding: 9px 15px; border-bottom: 1px solid var(--hair);
}
.ms-table tr:last-child td { border-bottom: 0; }
.ms-ident { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-900); font-weight: 550; }
.ms-iav {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gray-100); color: var(--ink-soft);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 7px; font-style: normal; letter-spacing: 0;
}
.ms-late { color: #b3452b; font-weight: 500; }

/* =====================================================================
   Reve AI — the bottom-right fab and the panel it slides out, matching the
   real app's .side-chat-fab / .side-chat (390px at full size; scaled to the
   mock's 0.8 chrome ratio here).
   ===================================================================== */

.ms-ghost {
  opacity: .5;
  position: absolute; inset: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 54px;   /* clears the view header */
  pointer-events: none;
}
.ms-gpanel { flex: 0 0 auto; }
.ms-gpanel.grow { flex: 1 1 auto; min-height: 0; }
.ms-gplot {
  height: 118px;
  background:
    linear-gradient(to top, rgba(0,0,0,.05), rgba(0,0,0,0) 62%),
    repeating-linear-gradient(to bottom, var(--hair) 0 1px, transparent 1px 33px);
}

/* the fab hides itself once the panel is open, exactly like body.chat-open */
.ms-fab {
  position: absolute; right: 18px; bottom: 18px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.4);
  transition: opacity .22s var(--ease-out), transform .34s var(--ease-out);
}
.ms-fab svg { width: 17px; height: 17px; }
.ms-scene.on .ms-fab { opacity: 0; transform: scale(.5); transition-delay: .72s; }

.ms-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  width: 312px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .34s var(--ease-out);
}
.ms-scene.on .ms-drawer { transform: translateX(0); transition-delay: .62s; }

.ms-dhead {
  height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  padding: 0 11px; border-bottom: 1px solid var(--hair);
}
.ms-dmark { font-size: 11px; }
.ms-dtitle { font-size: 12px; font-weight: 650; }
.ms-dbtn { font-size: 10px; color: var(--ink-faint); }
.ms-askmodel {
  font-size: 7.5px; padding: 3px 6px; border-radius: var(--r-full);
  background: var(--gray-100); color: var(--ink-soft);
}

.ms-dmsgs {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: 12px 11px; display: flex; flex-direction: column; gap: 10px;
}
.ms-chat {
  opacity: 0; transform: translateY(6px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
  font-size: 11px; line-height: 1.5;
}
.ms-chat.in { opacity: 1; transform: none; }
.ms-chat.user {
  align-self: flex-end; max-width: 86%;
  background: var(--ink); color: #fff;
  padding: 7px 10px; border-radius: 12px 12px 4px 12px;
}
.ms-chat.ai {
  align-self: flex-start; max-width: 94%;
  color: var(--ink-900);
  display: flex; flex-direction: column; gap: 5px;
}
.ms-chatstatus { display: flex; align-items: center; gap: 6px; font-size: 7.5px; color: var(--ink-mute); }
.ms-chat.done .ms-chatstatus { display: none; }
.ms-chattext { white-space: pre-wrap; }
.ms-chattext:empty { display: none; }
.ms-chattext.caret::after {
  content: ""; display: inline-block;
  width: 1.5px; height: 1em; margin-left: 2px;
  background: var(--ink-900); vertical-align: -2px;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.ms-dots { display: inline-flex; gap: 3px; }
.ms-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--ink-faint); animation: dotPulse 1.1s var(--ease-soft) infinite; }
.ms-dots i:nth-child(2) { animation-delay: .16s; }
.ms-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dotPulse { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.ms-dinput {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  margin: 0 11px 6px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 10px;
}
.ms-dfield { flex: 1 1 auto; font-size: 10.5px; color: var(--ink-faint); }
.ms-dsend {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 10px;
}
.ms-dhint { flex: 0 0 auto; font-size: 7px; padding: 0 11px 9px; color: var(--ink-faint); }

/* =====================================================================
   Settings › Reve AI — the curated context files
   ===================================================================== */

.ms-ctx { display: flex; flex-direction: column; }
.ms-ctxrow {
  display: grid; grid-template-columns: 148px 1fr 78px auto;
  align-items: center; gap: 11px;
  padding: 7px 15px; border-bottom: 1px solid var(--hair);
}
.ms-ctxrow:last-child { border-bottom: 0; }
.ms-ctxname { font-size: 10px; color: var(--ink-900); }
.ms-ctxbar { height: 5px; border-radius: var(--r-full); background: var(--gray-100); overflow: hidden; }
.ms-ctxbar i {
  display: block; height: 100%; width: var(--w);
  background: var(--ink-900); border-radius: var(--r-full); transform-origin: 0 50%;
}
.ms-scene.on .ms-ctxbar i { animation: barGrow .8s var(--ease-out) both; }
.ms-ctxrow:nth-child(1) .ms-ctxbar i { animation-delay: 240ms; }
.ms-ctxrow:nth-child(2) .ms-ctxbar i { animation-delay: 300ms; }
.ms-ctxrow:nth-child(3) .ms-ctxbar i { animation-delay: 360ms; }
.ms-ctxrow:nth-child(4) .ms-ctxbar i { animation-delay: 420ms; }
.ms-ctxrow:nth-child(5) .ms-ctxbar i { animation-delay: 480ms; }
.ms-ctxrow:nth-child(6) .ms-ctxbar i { animation-delay: 540ms; }
.ms-ctxrow:nth-child(7) .ms-ctxbar i { animation-delay: 600ms; }
.ms-ctxrow .ms-sel { height: 19px; font-size: 8px; padding: 0 8px; }
.ms-ctxfoot {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px; border-top: 1px solid var(--hair);
}

/* demo cursor */
.ms-cursor {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: rgba(0,0,0,.12);
  opacity: 0; pointer-events: none;
  transition: transform .22s var(--ease-out), opacity .2s var(--ease-out);
}
.ms-cursor.show { opacity: 1; }
.ms-cursor.tap { animation: tap .3s var(--ease); }
@keyframes tap {
  0% { transform: var(--pos) scale(1); }
  40% { transform: var(--pos) scale(.6); background: rgba(0,0,0,.3); }
  100% { transform: var(--pos) scale(1); }
}

/* =====================================================================
   02 · Reve Campus Leaders (Campus Leader HQ)
   ===================================================================== */

.mock-campus { background: #fff; display: flex; flex-direction: column; }

.mc-header {
  height: 52px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; border-bottom: 1px solid #e6e6e6;
}
.mc-brand { display: flex; align-items: center; gap: 9px; }
.mc-wordmark { height: 16px; width: auto; }
.mc-tag {
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 4px 7px; border-radius: 5px; line-height: 1;
}
.mc-right { display: flex; align-items: center; gap: 18px; }
.mc-nav { display: flex; align-items: center; gap: 2px; }
.mc-nav span {
  font-size: 11.5px; font-weight: 500; color: var(--ink-mute); padding: 6px 10px; border-radius: var(--r-full);
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.mc-nav span.on { color: var(--ink); background: var(--gray-100); }
.mc-btn {
  height: 30px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: var(--r-full); background: var(--ink); color: #fff;
  font-size: 11.5px; font-weight: 500;
}

.mc-body { flex: 1 1 auto; min-height: 0; position: relative; }
.mc-scene { position: absolute; inset: 0; overflow: hidden; }
.mc-wrap { width: 1000px; margin: 0 auto; padding: 26px 0; }

.mc-head { margin-bottom: 20px; }
.mc-over { font-size: 9px; margin-bottom: 7px; }
.mc-h1 { font-size: 33px; line-height: 1.1; margin: 0; }

.mc-ref {
  display: flex; align-items: stretch; gap: 26px;
  background: #f4f4f4; border-radius: 14px; padding: 20px 22px;
  margin-bottom: 18px;
}
.mc-ref-main { flex: 1 1 auto; min-width: 0; }
.mc-ref-title { font-size: 14px; font-weight: 600; }
.mc-ref-sub { font-size: 12px; color: var(--ink-mute); margin: 4px 0 12px; }
.mc-field {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--r-full);
  padding: 5px 5px 5px 14px; width: 356px;
}
.mc-field-url { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.mc-field-url svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ink-faint); }
.mc-copy {
  flex: 0 0 auto; height: 26px; display: inline-flex; align-items: center; padding: 0 13px;
  border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 11px; font-weight: 500;
  transition: transform .2s var(--ease);
}
.mc-copy.hit { animation: copyHit .5s var(--ease-out); }
@keyframes copyHit { 0%,100% { transform: scale(1); } 45% { transform: scale(.9); } }

.mc-ref-stat {
  flex: 0 0 auto; width: 150px;
  border-left: 1px solid #e0e0e0; padding-left: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.mc-ref-num { font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.mc-ref-lbl { font-size: 9px; }
.mc-ref-today {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 9px; color: var(--green); text-transform: none; letter-spacing: .04em;
}
.mc-ref-today svg { width: 8px; height: 8px; }

.mc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mc-tile {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 3px;
}
.mc-ti { width: 17px; height: 17px; color: var(--ink); margin-bottom: 6px; }
.mc-ti svg { width: 100%; height: 100%; }
.mc-th { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.mc-tm { font-size: 10.5px; color: var(--ink-mute); }

.mc-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-top: 1px solid #e6e6e6; margin-top: 20px; padding-top: 16px;
}
.mc-strip p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); max-width: 620px; }
.mc-strip p b { color: var(--ink); font-weight: 500; }
.mc-strip-link { font-size: 9px; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }

.mc-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; border-top: 1px solid #e6e6e6;
}
.mc-foot .mono { font-size: 8.5px; }

.mc-toast {
  position: absolute; left: 50%; bottom: 60px; transform: translate(-50%, 14px);
  background: var(--ink); color: #fff; font-size: 11.5px;
  padding: 8px 16px; border-radius: var(--r-full);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-in), transform .3s var(--ease-in);
}
.mc-toast.show {
  opacity: 1; transform: translate(-50%, 0);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}

/* A campus page keeps everything it has rather than shrinking to the frame, so
   anything past the fold is simply cut — with a fade over the cut so it reads
   as a page that continues rather than a panel that was clipped. Measured in
   deck.js (markScrolled), so a scene that genuinely fits stays crisp. */
/* sits on top of the footer's edge, not behind it — a band anchored to bottom:0
   spends its solid half hidden under the 42px footer and the cut still reads
   as a hard crop */
.mc-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 42px; height: 108px;
  background: linear-gradient(to top, #fff 26%, rgba(255, 255, 255, 0));
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity .34s var(--ease);
}
.mc-scene.clipped::after { opacity: 1; }
/* the footer rides above the fade, so the fade never washes it out */
.mc-foot { background: #fff; z-index: 2; }

.mc-spacer { flex: 1 1 auto; }
.mc-dimline { font-size: 8.5px; color: var(--ink-faint); text-transform: none; letter-spacing: .04em; }

/* ---- get started ---- */
.mc-deal {
  display: flex; align-items: stretch; gap: 26px;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 18px 22px;
  margin-bottom: 18px;
}
.mc-deal-main { flex: 1 1 auto; min-width: 0; }
.mc-deal-t { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mc-deal-p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 600px; }
.mc-deal-p b { color: #fff; font-weight: 500; }
.mc-deal-stat {
  flex: 0 0 auto; width: 178px; border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.mc-deal-lbl { font-size: 8.5px; color: rgba(255, 255, 255, .55); }
.mc-deal-num { font-size: 30px; line-height: 1.05; }
.mc-deal-sub { font-size: 8.5px; color: rgba(255, 255, 255, .55); text-transform: none; letter-spacing: .04em; }

.mc-ck-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; }
.mc-ck-count { font-size: 8.5px; color: var(--ink-faint); }
.mc-ck-count b { color: var(--ink); font-weight: 400; }
.mc-ck-bar { height: 4px; border-radius: var(--r-full); background: var(--gray-100); overflow: hidden; margin-bottom: 12px; }
.mc-ck-bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--w, 0)); }
.mc-scene.on .mc-ck-bar i { animation: ckGrow .8s var(--ease-out) 320ms both; }
@keyframes ckGrow { from { transform: scaleX(0); } to { transform: scaleX(var(--w, 0)); } }

.mc-ck-list { display: flex; flex-direction: column; gap: 7px; }
.mc-ck-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  height: 38px; padding: 0 15px;
}
.mc-ck-box {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--gray-300); color: #fff;
  display: grid; place-items: center;
}
.mc-ck-box svg { width: 9px; height: 9px; opacity: 0; }
.mc-ck-row.done .mc-ck-box { background: var(--ink); border-color: var(--ink); }
.mc-ck-row.done .mc-ck-box svg { opacity: 1; }
.mc-ck-row.next { border-color: var(--ink); }
.mc-ck-row.next .mc-ck-box { border-color: var(--ink); border-style: dashed; }
.mc-ck-t { flex: 1 1 auto; font-size: 12px; color: var(--ink-900); }
.mc-ck-row.done .mc-ck-t { color: var(--ink-mute); }
.mc-ck-t b { font-weight: 550; color: var(--ink); }
.mc-ck-m { font-size: 8px; color: var(--ink-faint); text-transform: none; letter-spacing: .05em; }
.mc-ck-row.next .mc-ck-m { color: var(--ink); }

/* ---- events ---- */
.mc-evcols { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
.mc-evlist { display: flex; flex-direction: column; gap: 8px; }
.mc-ev {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 11px 16px;
}
.mc-ev-date {
  flex: 0 0 auto; width: 34px; text-align: center; line-height: 1.05;
  display: flex; flex-direction: column; gap: 1px;
}
.mc-ev-date b { font-size: 7.5px; font-weight: 400; color: var(--ink-faint); }
.mc-ev-date i { font-size: 15px; font-style: normal; color: var(--ink); letter-spacing: .01em; }
.mc-ev-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-ev-t { font-size: 12.5px; font-weight: 600; }
.mc-ev-s { font-size: 10.5px; color: var(--ink-mute); }
.mc-ev-pill {
  flex: 0 0 auto; font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-full); line-height: 1;
  background: var(--gray-100); color: var(--ink-mute);
}
.mc-ev-pill.draft { background: #fef9c3; color: var(--amber); }
.mc-ev-pill.live { background: #dcfce8; color: var(--green); }

.mc-evside { display: flex; flex-direction: column; gap: 8px; }
.mc-evcard {
  background: #f4f4f4; border-radius: 12px; padding: 13px 15px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.mc-evcard .mc-ml { font-size: 8px; }
.mc-evnum { font-size: 24px; line-height: 1.05; display: flex; align-items: baseline; gap: 7px; }
.mc-evnum i {
  font-family: var(--mono); font-size: 8px; font-style: normal;
  letter-spacing: .06em; color: var(--ink-faint);
}
.mc-evtrack { height: 4px; border-radius: var(--r-full); background: #e0e0e0; overflow: hidden; margin: 3px 0 1px; }
.mc-evtrack i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--w, 0)); }
.mc-scene.on .mc-evtrack i { animation: ckGrow .8s var(--ease-out) 360ms both; }
.mc-evsub { font-size: 8px; color: var(--ink-faint); text-transform: none; letter-spacing: .04em; line-height: 1.45; }
.mc-evsheet { font-size: 11px; line-height: 1.45; color: var(--ink-soft); margin: 2px 0 6px; }
/* the rule under the link is the link's own width, not the card's */
.mc-evcard .mc-strip-link { align-self: flex-start; }

/* Scene-local entrance. Same reason the leaderboard rows hand-roll theirs: the
   shared .a/--i stagger rides .slide.play, which only fires when a slide first
   opens, so a scene reached by a nav click inside the slide would never move.
   Same curve and rhythm as .a, without the .play dependency. */
.mc-scene.on .mc-in { animation: rise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 34ms + 140ms); }

/* resources scene — the brand kit. Three shelves in 524px of scene, so this one
   runs tighter than the dashboard: the head and the shelf rhythm are scoped
   down rather than shrinking .mc-head for every scene that shares it. */
.mc-scene[data-scene="resources"] .mc-head { margin-bottom: 12px; }
.mc-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mc-search {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--r-full);
  height: 32px; padding: 0 14px; width: 300px; flex: 0 0 auto;
}
.mc-search svg { width: 12px; height: 12px; color: var(--ink-faint); flex: 0 0 auto; }
.mc-search span { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.mc-search.big { width: 100%; height: 40px; padding: 0 18px; margin-bottom: 12px; }
.mc-search.big svg { width: 14px; height: 14px; }
.mc-search.big span { font-size: 13px; }

.mc-chips { display: flex; align-items: center; gap: 5px; }
.mc-chip {
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); border: 1px solid #e6e6e6; border-radius: var(--r-full);
  padding: 5px 9px; line-height: 1;
}
.mc-chip.on { color: #fff; background: var(--ink); border-color: var(--ink); }

.mc-shelf + .mc-shelf { margin-top: 12px; }
.mc-shelf-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.mc-shelf-t { font-size: 12.5px; font-weight: 600; }
.mc-shelf-s { font-size: 10.5px; color: var(--ink-mute); }

.mc-assets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mc-asset {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.mc-asset-prev {
  height: 50px; border-radius: 8px; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mc-asset-prev.dark { background: var(--ink); }
.mc-asset-prev img { width: 46%; height: auto; display: block; }
.mc-asset-prev.wide img { width: 68%; }
.mc-asset-sq, .mc-asset-icon {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.mc-asset-icon { border-radius: 9px; }
.mc-asset-sq img, .mc-asset-icon img { width: 58%; filter: invert(1); }
.mc-asset-motion { gap: 5px; }
.mc-asset-motion i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .3; }
.mc-scene.on .mc-asset-motion i { animation: mcPulse 1.4s var(--ease) infinite; }
.mc-scene.on .mc-asset-motion i:nth-child(2) { animation-delay: .16s; }
.mc-scene.on .mc-asset-motion i:nth-child(3) { animation-delay: .32s; }
@keyframes mcPulse { 0%, 100% { opacity: .28; } 45% { opacity: 1; } }
.mc-asset-name { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.mc-asset-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-pill {
  font-size: 7px; letter-spacing: .08em; color: var(--ink-soft);
  background: var(--gray-100); border-radius: 4px; padding: 3px 5px; line-height: 1; font-style: normal;
}

.mc-ann {
  display: flex; align-items: stretch; gap: 20px;
  background: #f4f4f4; border-radius: 14px; padding: 11px 14px;
}
.mc-ann-card {
  flex: 0 0 auto; width: 112px; border-radius: 9px; background: var(--ink); color: #fff;
  padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
}
.mc-ann-k { font-size: 6.5px; color: rgba(255, 255, 255, .62); }
.mc-ann-n { font-size: 15px; line-height: 1.05; font-weight: 500; }
.mc-ann-s { font-size: 8px; color: rgba(255, 255, 255, .62); line-height: 1.25; }
.mc-ann-ctl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.mc-ann-row { display: flex; align-items: center; gap: 5px; }
.mc-ann-l { font-size: 8px; width: 74px; flex: 0 0 auto; }
.mc-ann-row .mc-chip { background: #fff; }
.mc-ann-row .mc-chip.on { background: var(--ink); }
.mc-ann-dl {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 8px; border-left: 1px solid #e0e0e0; padding-left: 20px;
}
.mc-ann-btn {
  height: 28px; display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 11px; font-weight: 500;
}
.mc-ann-dim { font-size: 8px; color: var(--ink-faint); }

.mc-tpls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mc-tpl {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 3px;
}
.mc-tpl-k { font-size: 7.5px; color: var(--ink-faint); }
.mc-tpl-t { font-size: 12px; font-weight: 600; line-height: 1.25; }
.mc-tpl-d { font-size: 10.5px; color: var(--ink-mute); line-height: 1.35; }

/* help scene — topics over the questions under them */
.mc-scene[data-scene="help"] .mc-head { margin-bottom: 12px; }
.mc-pop { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.mc-pop-l { font-size: 8px; flex: 0 0 auto; }
.mc-pop-i { font-size: 11px; color: var(--ink-soft); border-bottom: 1px solid var(--gray-300); padding-bottom: 1px; }

.mc-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.mc-topic {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 4px;
}
.mc-topic-t { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.mc-topic-s { font-size: 10.5px; color: var(--ink-mute); line-height: 1.35; }
.mc-topic-c { font-size: 8px; color: var(--ink-faint); margin-top: 5px; }

.mc-qs { display: flex; flex-direction: column; gap: 6px; }
.mc-q {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  height: 34px; padding: 0 15px;
}
.mc-q-t { flex: 1 1 auto; font-size: 11.5px; color: var(--ink-900); }
.mc-q-c { width: 10px; height: 10px; flex: 0 0 auto; color: var(--ink-faint); }

/* =====================================================================
   03 · Reve Creative Partners
   ===================================================================== */

.mock-partners { background: var(--canvas); display: flex; flex-direction: column; }

.mp-header {
  height: 50px; flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.mp-brand { display: flex; align-items: center; gap: 9px; }
.mp-wordmark { height: 15px; width: auto; }
.mp-tag {
  font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 0 7px; line-height: 1;
}
.mp-avatar {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--ink-mute);
  display: grid; place-items: center; font-size: 14px; line-height: 0;
}

.mp-body { flex: 1 1 auto; min-height: 0; display: flex; }
.mp-side {
  width: 186px; flex: 0 0 auto; background: var(--panel);
  border-right: 1px solid var(--border); padding: 14px 10px;
}
.mp-sec { font-size: 8.5px; padding: 0 8px; margin: 0 0 6px; color: var(--ink-faint); }
.mp-sec + .mp-sec, .mp-nav + .mp-sec { margin-top: 16px; }
.mp-nav {
  height: 27px; display: flex; align-items: center; gap: 8px;
  padding: 0 9px; border-radius: var(--r-full); font-size: 12px; color: var(--ink-soft);
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.mp-nav svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mp-nav.on { background: var(--gray-100); color: var(--ink); font-weight: 550; }

.mp-main { flex: 1 1 auto; min-width: 0; position: relative; }
.mp-scene {
  position: absolute; inset: 0; padding: 16px 22px;
  display: flex; flex-direction: column; gap: 12px;
}

.mp-vh { height: 40px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.mp-title { font-size: 29px; line-height: 1; }
.mp-dim { color: var(--ink-faint); font-size: 9px; }
.mp-vh .mp-dim { margin-left: auto; }
.mp-spacer { margin-left: auto; }
.mp-btn {
  border: 1px solid var(--border); background: var(--panel); border-radius: var(--r-full);
  padding: 5px 11px; font-size: 10.5px; color: var(--ink-soft); white-space: nowrap;
}
.mp-search {
  border: 1px solid var(--border); background: var(--panel); border-radius: var(--r-full);
  padding: 6px 12px; font-size: 9px; color: var(--ink-faint); text-transform: none; letter-spacing: .03em;
}

/* the three panel-bordered actions across the top of the real hub */
.mp-actionbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 0 0 auto; }
.mp-action {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 12.5px; font-weight: 600;
}
.mp-action svg { width: 14px; height: 14px; flex: none; }

.mp-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0; }
.mp-colL, .mp-colR { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* the always-ink digest card that opens the real home view */
.mp-digest {
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: 14px 16px 15px; flex: 0 0 auto;
}
.mp-digest-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mp-over { font-size: 8px; color: rgba(255,255,255,.55); }
.mp-nf {
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); color: #fff;
  display: grid; place-items: center; font-size: 11px; line-height: 0;
}
.mp-dg-text { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.012em; }

.mp-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; flex: 0 0 auto;
}
.mp-ph {
  height: 36px; flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  padding: 0 15px; border-bottom: 1px solid var(--hair);
}
.mp-pt { font-size: 12.5px; font-weight: 600; }
.mp-pbody { padding: 13px 15px 15px; }

/* the real x-row: date chip, title + blurb, chevron */
.mp-xrow {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 15px; border-bottom: 1px solid var(--hair);
}
.mp-xrow:last-of-type { border-bottom: 0; }
.mp-xdate {
  flex: none; width: 30px; font-size: 7.5px; color: var(--ink-faint);
  display: flex; flex-direction: column; line-height: 1.25;
}
.mp-xdate i { font-style: normal; font-size: 12px; color: var(--ink-900); letter-spacing: 0; }
.mp-xmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-xtitle { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.mp-tag2 {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--ink-mute);
  border-radius: var(--r-full); padding: 3px 6px; line-height: 1;
}
.mp-xblurb {
  font-size: 11px; color: var(--ink-mute); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-xchev { flex: none; color: var(--ink-faint); font-size: 13px; }
.mp-foot { padding: 9px 15px 11px; border-top: 1px solid var(--hair); }

/* Refer to Reve */
.mp-chips2 { display: inline-flex; gap: 4px; }
.mp-chips2 i {
  font-style: normal; font-size: 8.5px; padding: 4px 9px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--panel); color: var(--ink-mute);
}
.mp-chips2 i.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mp-refstat { display: flex; align-items: baseline; gap: 8px; }
.mp-num { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-delta { font-size: 8.5px; }
.mp-linkrow { display: flex; align-items: center; gap: 8px; margin: 11px 0 12px; }
.mp-link {
  flex: 1 1 auto; min-width: 0;
  font-size: 9.5px; letter-spacing: .04em; text-transform: none; color: var(--ink-soft);
  border: 1px solid var(--border); background: var(--gray-50);
  border-radius: var(--r-m); padding: 8px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-copy {
  flex: none; background: var(--ink); color: #fff; border-radius: var(--r-full);
  padding: 7px 13px; font-size: 11px; font-weight: 500;
  transition: transform .2s var(--ease-out);
}
.mp-copy.hit { animation: copyHit .5s var(--ease-out); }
.mp-ticks { display: flex; gap: 4px; }
.mp-ticks i {
  flex: 1; height: 16px; border-radius: 4px;
  background: var(--gray-50); border: 1px solid var(--border);
}
.mp-ticks i.used { background: var(--ink); border-color: var(--ink); }
.mp-tickcap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.mp-tickcap .mono { font-size: 8px; }

.mp-inkaction {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: 12px; font-size: 12.5px; font-weight: 600; flex: 0 0 auto;
}
.mp-inkaction svg { width: 14px; height: 14px; flex: none; }

.mp-toast {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 14px);
  background: var(--ink); color: #fff; font-size: 11.5px;
  padding: 8px 16px; border-radius: var(--r-full);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-in), transform .3s var(--ease-in);
}
.mp-toast.show {
  opacity: 1; transform: translate(-50%, 0);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}

/* ---- What's new: one panel of x-rows behind a tag filter ---- */
.mp-panel.grow { flex: 1 1 auto; min-height: 0; position: relative; }
.mp-xlist { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mp-panel.grow.clipped::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 40px;
  background: linear-gradient(to top, var(--panel), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.mp-xchev { display: inline-block; transition: transform .22s var(--ease-out); }
/* the real chevron is a + that turns into a × as the row opens */
.mp-xrow.open { border-bottom: 0; }
.mp-xrow.open .mp-xchev { transform: rotate(45deg); }
.mp-xexp { padding: 0 15px 13px 57px; border-bottom: 1px solid var(--hair); }
.mp-xexp p { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.mp-xexp ol { margin: 0 0 10px; padding-left: 15px; font-size: 11px; line-height: 1.65; color: var(--ink-soft); }
.mp-xacts { display: flex; gap: 8px; }
.mp-btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.mp-btn.ic { padding: 5px 10px; }

/* ---- Calendar: the month grid, then the panel that books into it ---- */
.mp-calcols { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 12px; flex: 1 1 auto; min-height: 0; }
.mp-calside { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mp-cal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 12px; }
.mp-calwd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.mp-calwd span { font-size: 7px; color: var(--ink-faint); text-align: center; }
.mp-calgrid {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 4px;
}
.mp-calday {
  border: 1px solid var(--hair); border-radius: 8px; background: var(--panel);
  padding: 5px 6px; display: flex; flex-direction: column; gap: 3px;
  min-height: 0; overflow: hidden;
}
.mp-calday.out { background: var(--gray-50); border-color: transparent; }
.mp-calday.out .mp-caldate { opacity: .45; }
.mp-calday.today { border-color: var(--ink); }
.mp-caldate { font-size: 8px; color: var(--ink-mute); letter-spacing: .04em; }
.mp-calday.today .mp-caldate { color: var(--ink); }
.mp-calev {
  display: flex; align-items: center; gap: 5px;
  background: var(--gray-50); border-radius: 5px; padding: 3px 5px;
  font-size: 8.5px; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-calev i.dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.mp-calev i.dot.irl { background: var(--ink); }
.mp-calev i.dot.pre { background: var(--gray-300); }

.mp-slots { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.mp-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 11px;
}
.mp-slot.on { border-color: var(--ink); }
.mp-slot b { font-weight: 550; }
.mp-slot i { font-style: normal; font-size: 8.5px; letter-spacing: .05em; color: var(--ink-faint); }
.mp-inkaction.sm { padding: 9px; font-size: 11.5px; }

/* Directory — the real dir-card */
.mp-dir {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  align-content: start; flex: 1 1 auto; min-height: 0;
}
.mp-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 14px 12px; display: flex; flex-direction: column;
  align-items: flex-start; height: max-content;
}
.mp-av {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); margin-bottom: 10px;
}
/* the real avatars are generated art, one variant per partner */
.mp-av.v1 { background: linear-gradient(140deg,#ff9a3c,#ff3d77 55%,#6a2bd9); }
.mp-av.v2 { background: linear-gradient(150deg,#26d0ce,#1a2980); }
.mp-av.v3 { background: linear-gradient(135deg,#f6d365,#d5375a); }
.mp-av.v4 { background: linear-gradient(200deg,#a8edea,#5b6ee1 70%,#231d54); }
.mp-av.v5 { background: linear-gradient(140deg,#ffe29f,#ff719a); }
.mp-av.v6 { background: linear-gradient(120deg,#0f2027,#43cea2); }
.mp-av.v7 { background: linear-gradient(155deg,#eecda3,#ef629f); }
.mp-av.v8 { background: linear-gradient(145deg,#c471f5,#fa71cd); }
.mp-cn { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: -.01em; }
.mp-cs { font-size: 7.5px; letter-spacing: .07em; color: var(--ink-faint); margin: 3px 0 8px; }
.mp-clinks { display: flex; flex-wrap: wrap; gap: 3px 11px; font-size: 10px; }
.mp-clinks a { color: var(--ink-mute); text-decoration: none; }
.mp-crole {
  margin-top: 10px; font-size: 7.5px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: var(--r-full); color: var(--ink-faint);
}
.mp-crole.founding { border-color: var(--ink); color: var(--ink); }


/* =====================================================================
   04 · Reve Party — the wall and the phone are two separate screens
   ===================================================================== */

.party-row { display: flex; gap: 24px; align-items: stretch; }
.screen-wall  { width: 936px; }
.screen-phone { width: 280px; background: #0e0e0e; }

.mock-party { background: #0a0a0a; }
.pw-frame { display: flex; height: 100%; }
.pw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pw-brand { height: 48px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.pw-wordmark { height: 15px; width: auto; }
/* the real wall's tag is a black pill with a hairline, not bare grey type —
   it has to stay legible sitting on top of the photos */
.pw-tag {
  font-family: var(--mono); font-size: 8px; font-weight: 550;
  letter-spacing: .13em; text-transform: uppercase;
  color: #fff; background: #000;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px;
  padding: 4px 7px; line-height: 1;
}
.pw-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 8px; color: #8a8a8a;
}
.pw-live i {
  width: 5px; height: 5px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.16);
  animation: pulse 2.2s var(--ease-soft) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* The carousel fills the screen: three bands running against each other, so the
   wall reads as a grid in motion. Each band gets a different period as well as
   a different direction — matched speeds make three rows scan as one block. */
.pw-stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px;
}
.pw-river { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; }
.pw-track {
  display: flex; gap: 10px; height: 100%; width: max-content;
  will-change: transform;
}
.pw-track[data-dir="left"]  { animation: riverL 52s linear infinite; }
.pw-track[data-dir="right"] { animation: riverR 64s linear infinite; }
.pw-track[data-dir="left2"] { animation: riverL 43s linear infinite; }
@keyframes riverL { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes riverR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.pw-item {
  position: relative; margin: 0; height: 100%; flex: 0 0 auto;
  aspect-ratio: var(--ar, 4/3);
  border-radius: 12px; overflow: hidden; background: #141414;
}
.pw-photo { position: absolute; inset: 0; }
.pw-vidbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


.pw-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 6px; padding: 22px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
  font-size: 11px; font-weight: 500; color: #fff;
}
.pw-item figcaption b { font-weight: 500; }
.pw-item figcaption i {
  font-style: normal; font-family: var(--mono); font-size: 7.5px;
  letter-spacing: .06em; color: rgba(255, 255, 255, .72);
}
/* the real reveal for anything new on the wall — plus a ring that holds a beat
   longer, because from the back of a room the scale alone is easy to miss */
.pw-item.fresh { animation: wallFlashIn .9s var(--ease-out) both; }
@keyframes wallFlashIn { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.pw-item.fresh::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 2px #fff;
  animation: freshRing 2.2s var(--ease-soft) forwards;
}
@keyframes freshRing { 0% { opacity: 0; } 16% { opacity: 1; } 42% { opacity: 1; } 100% { opacity: 0; } }

/* the rail is 28% of the wall in the real thing, on its own slightly lifted
   panel rather than the wall's own black */
.pw-rail {
  width: 28%; flex: 0 0 auto; background: #101010;
  border-left: 1px solid #1e1e1e; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 20px;
}
.pw-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pw-qr-box {
  background: #fff; border-radius: 16px; padding: 14px;
  width: 148px; height: 148px;
  display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr);
}
.pw-qr-box span { background: #000; }
.pw-qr-label { font-size: 9px; letter-spacing: .12em; color: #a6a6a6; }

.pw-board { display: flex; flex-direction: column; min-height: 0; }
.pw-board-t { font-size: 20px; line-height: 1.1; color: #fff; }
.pw-board-counts {
  font-size: 8px; color: #707070; letter-spacing: .08em;
  text-transform: none; margin: 5px 0 9px;
}
.pw-board-counts b { color: #fff; font-weight: 400; }
.pw-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-board-row {
  display: flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 10px; border-radius: 8px;
  background: #141414; font-size: 11.5px; color: #d6d6d6;
}
.rb-rank { color: #6a6a6a; font-size: 8.5px; width: 8px; flex: 0 0 auto; }
.rb-name { flex: 0 0 auto; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-board-row.is-lead .rb-name { color: #ebebeb; }
.rb-hint {
  flex: 1 1 auto; min-width: 0; font-size: 7px; letter-spacing: .04em; text-transform: none;
  color: #5e5e5e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-count { flex: 0 0 auto; font-family: var(--display); font-size: 13px; font-weight: 500; color: #ebebeb; }

/* ---- the phone, on its own ---- */
.mock-phone {
  background: #0e0e0e;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 22px;
}
.phone-ml { font-size: 8.5px; color: #6e6e6e; }
.pw-phone {
  position: relative;
  width: 236px; height: 480px;
  background: #1c1c1c; border-radius: 34px; padding: 6px;
  box-shadow: var(--shadow-float);
}
.pw-phone-screen {
  width: 100%; height: 100%; border-radius: 28px; overflow: hidden;
  background: #fafafa; padding: 13px; position: relative;
}
.pw-pcard {
  height: 100%; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 13px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.pw-pbrand { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.pw-pbrand img { height: 13px; width: auto; }
.pw-pword { font-family: var(--display); font-size: 13px; font-weight: 500; }

.pw-pform { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.pw-pdrop {
  position: relative; height: 108px; border: 1px dashed var(--gray-300); border-radius: 12px;
  background: var(--gray-50); display: grid; place-items: center; overflow: hidden;
}
.pw-pdrop-in { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-mute); }
.pw-pdrop-in svg { width: 20px; height: 20px; }
.pw-pdrop-in .mono { font-size: 8px; }
/* the JS fades this in with its own keyframes; the transition is what carries
   the opacity back to 0 when you step backward off the upload */
.pw-pprev { position: absolute; inset: 0; padding: 3px; transition: opacity .28s var(--ease-in); z-index: 1; }
.pw-pvid { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; }
/* the real drop zone swaps its label for a Change pill once a file is picked */
.pw-pchange {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  font-size: 7px; letter-spacing: .09em; line-height: 1;
  background: rgba(0, 0, 0, .62); color: #fff; border-radius: var(--r-full); padding: 4px 8px;
}

.pw-pfield { display: flex; flex-direction: column; gap: 4px; }
.pw-plabel { font-size: 8px; }
.pw-pinput {
  height: 29px; border: 1px solid var(--border); border-radius: 9px; background: #fff;
  display: flex; align-items: center; padding: 0 10px; font-size: 11.5px; color: var(--ink-900);
}
.pw-pinput.caret::after {
  content: ""; width: 1px; height: 13px; background: var(--ink); margin-left: 1px;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.pw-pbtn {
  height: 33px; border-radius: var(--r-full); background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 500; margin-top: 2px;
  transition: transform .2s var(--ease-out);
}
.pw-pbtn.hit { animation: copyHit .5s var(--ease-out); }
.pw-pfine { font-size: 8.5px; line-height: 1.4; color: var(--ink-faint); margin: 4px 0 0; text-align: center; }

.pw-pdone {
  /* above the drop-zone preview, which is now a stacked (z-indexed) video */
  position: absolute; inset: 0; z-index: 3; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; visibility: hidden;
  /* one rule genuinely runs both ways here, so the symmetric curve is the
     honest one — unlike the toasts, which get a directional pair */
  transition: opacity .42s var(--ease-soft), visibility .42s;
}
.pw-pdone.show { opacity: 1; visibility: visible; }
.pw-pmark {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center;
}
.pw-pmark svg { width: 20px; height: 20px; }
.pw-pdone-h { font-size: 20px; text-align: center; line-height: 1.15; }
.pw-pdone-s {
  margin: -4px 0 0; padding: 0 22px; text-align: center;
  font-size: 9.5px; line-height: 1.5; color: var(--ink-mute);
}
.pw-pdone-s b { color: var(--ink); font-weight: 550; }
.pw-pagain {
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 7px 16px; font-size: 11.5px; color: var(--ink-soft);
}

/* ---- entrance for the party slide ---- */
.slide.play .pw-river  { animation: rise .8s var(--ease-out) both; animation-delay: calc(.72s + var(--i, 0) * .12s); }
.slide.play .pw-rail   { animation: rise .7s var(--ease-out) both; animation-delay: .66s; }
.slide.play .pw-phone  { animation: phoneIn .9s var(--ease-out) both; animation-delay: .74s; }
@keyframes phoneIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Welcome card — the artefact a new member actually walks away with.
   Creative Partner stamps a membership card at the end of onboarding
   ("Put your name on it" → "Stamp my card" → "Welcome"); a Campus Leader
   sets their announcement card with a name and a school. Same component,
   themed per programme, so the stamp beat reads the same in both.
   ===================================================================== */

.wc {
  display: flex; align-items: center; justify-content: center; gap: 46px; height: 100%;
  /* the card is a real object in the room, so the tilt below is a rotation in
     depth rather than a skew — the vanishing point sits just above its middle */
  perspective: 1500px; perspective-origin: 50% 44%;
}

/* ---- the card ----
   The face is a <canvas> painted by the real production renderer, so the
   proportions, type and art panel are the product's, not a redrawing of it.
   Only the frame and the foil sweep live here. */
.wc-card {
  position: relative; flex: 0 0 auto;
  width: 232px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .38);
  transform-origin: 50% 60%;
}
.wc-canvas { display: block; width: 100%; height: auto; }

/* ---- the turn ----
   The card keeps turning under the light for as long as the step is up, so the
   sheen below has something to catch. It lives on its own wrapper because
   .wc-card's transform is already spoken for by the stamp press — stacking the
   two on one element made the press cancel the turn mid-flight. */
.wc-tilt { flex: 0 0 auto; transform-style: preserve-3d; will-change: transform; }
.wc-scene.on .wc-tilt { animation: wcTilt 7.2s var(--ease-soft) infinite alternate; }
@keyframes wcTilt {
  from { transform: rotateY(-13deg) rotateX(4.5deg); }
  to   { transform: rotateY(13deg)  rotateX(-3deg); }
}

/* The specular that the turn reveals. Same 7.2s clock and the same alternate
   direction as .wc-tilt, so the highlight always crosses the face as the card
   passes through square-on — a sweep on its own timer drifted out of phase
   within a couple of cycles and read as a moving stripe instead of light. */
.wc-gloss {
  position: absolute; inset: -45%; z-index: 2; pointer-events: none;
  background:
    linear-gradient(66deg, transparent 34%, rgba(255,255,255,.10) 44%,
      rgba(255,255,255,.62) 50%, rgba(255,255,255,.10) 56%, transparent 66%);
  opacity: 0;
}
.wc-scene.on .wc-gloss { animation: wcSheen 7.2s var(--ease-soft) infinite alternate; }
@keyframes wcSheen {
  from { opacity: .18; transform: translateX(-46%); }
  50%  { opacity: .95; }
  to   { opacity: .18; transform: translateX(46%); }
}

/* monochrome foil sheen, the same read as the card's own pointer sheen */
.wc-foil {
  position: absolute; inset: -40%; z-index: 2;
  background: linear-gradient(74deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  opacity: 0; pointer-events: none;
}
.wc-scene.stamped .wc-foil { animation: wcFoil .72s var(--ease-io) 120ms both; }
@keyframes wcFoil {
  from { opacity: 0; transform: translateX(-58%); }
  22%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(58%); }
}
/* the stamp itself is a repaint of the canvas, so the card takes the press */
.wc-scene.stamped .wc-card { animation: wcPress .46s var(--ease-out) both; }
@keyframes wcPress {
  0%   { transform: scale(1); }
  28%  { transform: scale(.978); }
  100% { transform: scale(1); }
}

/* ---- the panel beside it ---- */
.wc-side { flex: 0 0 auto; width: 286px; }
.wc-over { font-size: 8.5px; margin-bottom: 8px; }
.wc-h { font-size: 27px; line-height: 1.08; margin: 0 0 16px; }
.wc-flabel { font-size: 8px; margin-bottom: 5px; }
.wc-field {
  display: flex; align-items: center; height: 34px; padding: 0 13px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: 13px; color: var(--ink-900);
}
.wc-field + .wc-flabel { margin-top: 12px; }
.wc-btn {
  margin-top: 18px; height: 34px; display: inline-flex; align-items: center; padding: 0 18px;
  border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
}
.wc-scene.pressed .wc-btn { animation: copyHit .42s var(--ease-out); }

/* the welcome line only resolves once the card is stamped */
.wc-done { margin-top: 16px; opacity: 0; }
.wc-scene.welcomed .wc-done { animation: rise .5s var(--ease-out) both; }
.wc-done-h { font-size: 20px; line-height: 1.1; }
.wc-done-s { font-size: 11px; color: var(--ink-mute); margin-top: 5px; }

/* Reve AI usage — the real surface is cost-first: one all-time summary line
   and a 14-day stacked-cost chart (renderClaudeUsage, reve-internal/app.js:3279).
   Tier names only; the app never prints raw model names in displayed text. */
.ms-usage { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 12px; }
.ms-usage-sum { font-size: 10px; color: var(--ink-soft); letter-spacing: 0; }
.ms-usage-viz { width: 340px; height: 74px; display: block; }
.ms-tick { font-family: var(--mono); font-size: 5px; fill: var(--ink-faint); letter-spacing: 0; }
.ms-usage-key { display: flex; gap: 14px; font-size: 8px; color: var(--ink-mute); }
.ms-usage-key span { display: inline-flex; align-items: center; gap: 5px; }
.ms-usage-key i { width: 7px; height: 7px; border-radius: 2px; display: block; }
.ms-ctxrow { display: flex; align-items: center; gap: 10px; }

/* Help — the real page closes on a "Still stuck?" contact card, not a
   quick-questions list (help-center.html, the `stuck` template) */
.mc-stuck {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 4px;
}
.mc-stuck-t { font-size: 13px; font-weight: 600; }
.mc-stuck-s { font-size: 10.5px; color: var(--ink-mute); line-height: 1.4; max-width: 620px; }
.mc-stuck-b {
  align-self: flex-start; margin-top: 7px; height: 26px;
  display: inline-flex; align-items: center; padding: 0 13px;
  border-radius: var(--r-full); background: var(--ink); color: #fff; font-size: 11px; font-weight: 500;
}

/* the real upload form marks Instagram optional inline */
.pw-plabel i { font-style: normal; opacity: .5; margin-left: 4px; }

/* the Mentions trends chart is shorter than Listening's — it sits above a
   filter toolbar and a feed, not a two-column workspace */
.ms-chart.short { height: 96px; padding-bottom: 0; }
.ms-chart.short svg { height: 96px; }
/* real tone colours from SOCIAL_SERIES: positive green, neutral gray,
   negative red, unclassified slate */
.ms-series .sw.go  { background: var(--green); }
.ms-series .sw.bad { background: #b3452b; }