/* /collaborations/{id}-{slug} — listing detail page.

   Mobile-first. Bright, clean composition (no dark page bg). An atmospheric
   banner band sits at the very top of the page (lifted from the creator's
   YouTube banner, fades to white). The hero card overlaps it. Below, on
   desktop, the layout splits into a TWO-COLUMN grid — main story on the
   left, sticky creator+CTA rail on the right. On mobile this collapses to
   a single column with a sticky bottom CTA that sits above the raised "+"
   button in the mobile bottom-nav.

   Reuses .button / .badge / .form-control patterns from the global bundle.
*/

/* ──────────────────────────────────────────────────────────────
   PAGE SHELL
   ────────────────────────────────────────────────────────────── */

body.marketplace-listing-page {
  /* Soft gray canvas so the white cards (.mp-section, FAQ items, hero)
     read as distinct surfaces. Banner ::after fade below is matched to
     this value so the atmospheric band blends into the page seamlessly. */
  background: var(--color-gray-50);
}

/* Member-layout (.member-main) already pads top + sides on mobile.
   Zero out its sides on this page so .mp-listing owns a single 16px
   ring (avoids the parent-padding-stacking trap from CLAUDE.md).
   Top padding stays canonical 12px from .member-main. */
@media (max-width: 991px) {
  body.mp-mode-member main.member-main {
    padding-left: 0;
    padding-right: 0;
  }
  body.mp-mode-member .mp-listing {
    padding-top: 0;
  }
}

.mp-listing {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  /* mobile bottom padding clears sticky CTA + raised create button */
  padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px) + 16px) 16px;
  z-index: 1;
  /* NOTE: overflow-x: clip is applied at mobile only (see <=767px block).
     On desktop, .mp-banner's transform: scale(1.1) is allowed to spill past
     the 1180px wrapper into the viewport gutters — that bleed is the visual
     intent of the atmospheric backdrop. Clipping at all viewports would
     letterbox the banner against the page background on wide screens. */
}

/* Page-scoped clip so .mp-banner's transform: scale(1.1) blur effect can
   spill past the 1180px wrapper into the viewport gutters (the visual
   intent) without ever pushing document.scrollWidth past clientWidth. At
   viewports between 1180px and 1298px this would otherwise create ~9px
   of horizontal scroll. `overflow-x: clip` (vs `hidden`) doesn't create
   a scroll container, so sticky positioning still works. Class-scoped to
   this page only — never affects other pages. */
body.marketplace-listing-page {
  overflow-x: clip;
}

@media (max-width: 1023px) {
  /* FOCUSED CONVERSION MODE on mobile — listing detail pages hide the
     global mobile bottom-nav AND the Concierge bubble. Native iOS apps
     (Airbnb listing, LinkedIn job, Yelp business) do this on action
     screens: the bottom edge belongs to the conversion CTA, not to
     navigation chrome. Users navigate via the hamburger menu in the
     mobile header. */
  body.marketplace-listing-page .mobile-bottom-nav,
  body.marketplace-listing-page .cncg-bubble {
    display: none !important;
  }
  /* With the mobile-bottom-nav gone, the page only needs to clear the
     sticky CTA (~68px) plus safe-area inset. */
  body.mp-mode-member .mp-listing {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 16px);
  }
}

@media (min-width: 768px) {
  .mp-listing {
    padding: 24px 32px 96px;
  }
}
@media (min-width: 1280px) {
  .mp-listing {
    padding: 32px 40px 120px;
  }
}

/* ──────────────────────────────────────────────────────────────
   ATMOSPHERIC BANNER BAND
   Top decorative strip. Lifted from the poster's YouTube banner,
   gently blurred and faded to pure white at the bottom so the page
   reads BRIGHT, not gray.
   ────────────────────────────────────────────────────────────── */
.mp-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(1.15);
  transform: scale(1.1);
  transform-origin: center top;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
/* Banner image (2026-05-29): now an <img referrerpolicy="no-referrer"> instead
   of a CSS background so googleusercontent banners serve for logged-out
   visitors (they 403 a cross-origin Referer). The blur/scale/opacity on
   .mp-banner above apply to this child; the ::after fade paints over it. */
.mp-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.mp-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Fades to --color-gray-50 (#f8fafc = 248,250,252), not white, so the
     banner blends into the gray page canvas with no seam. All stops share
     the same RGB so the fade is a clean alpha ramp (no muddy midtone). */
  background: linear-gradient(180deg,
    rgba(248, 250, 252, 0)   0%,
    rgba(248, 250, 252, 0)   30%,
    rgba(248, 250, 252, 0.6) 70%,
    rgba(248, 250, 252, 1)   100%);
}
@media (min-width: 768px) {
  .mp-banner { height: 320px; }
}
@media (min-width: 1280px) {
  .mp-banner { height: 380px; }
}

/* Category-tinted gradient when the poster has no banner image.
   Uses URL-key form (hyphens) — must match MarketplaceService::CATEGORY_URL_KEYS. */
.mp-banner--default { filter: none; transform: none; opacity: 1; }
.mp-banner--default.mp-banner--joint-video      { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.mp-banner--default.mp-banner--guest-appearance { background: linear-gradient(135deg, #fce7f3, #f5d0fe); }
.mp-banner--default.mp-banner--shorts-collab    { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
.mp-banner--default.mp-banner--challenge-video  { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.mp-banner--default.mp-banner--series-collab    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.mp-banner--default.mp-banner--live-stream      { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.mp-banner--default.mp-banner--featured-channel { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
.mp-banner--default.mp-banner--other            { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }

/* ──────────────────────────────────────────────────────────────
   BREADCRUMB (desktop only)
   ────────────────────────────────────────────────────────────── */
.mp-crumb {
  display: none;
  position: relative;
  z-index: 2;
  font-size: 0.875rem;
  /* 2026-05-27 — breadcrumb sits inside the dark gradient hero band;
     dark-gray-on-dark-gradient was illegible. White + opacity reads
     cleanly on the dark band. */
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 18px;
}
.mp-crumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 150ms ease;
  font-weight: 500;
}
.mp-crumb a:hover { color: #ffffff; text-decoration: underline; }
.mp-crumb__sep { margin: 0 8px; color: rgba(255, 255, 255, 0.55); }

@media (min-width: 768px) {
  .mp-crumb { display: flex; align-items: center; }
}

/* ──────────────────────────────────────────────────────────────
   ANONYMOUS WELCOME BANNER
   Shown only to logged-out visitors (Google traffic). Gives quick
   context + a YouTube-account heads-up before they hit a "sign in"
   button without knowing what platform expects what.
   ────────────────────────────────────────────────────────────── */
.mp-anon-banner {
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 242, 255, 0.94) 100%);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.mp-anon-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-anon-banner__icon {
  color: #ff0000;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.mp-anon-banner__text {
  flex: 1 1 200px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-gray-700);
  margin: 0;
}
.mp-anon-banner__text strong {
  color: var(--color-gray-900);
  font-weight: 700;
}
.mp-anon-banner__link {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 150ms ease;
}
.mp-anon-banner__link:hover {
  background: rgba(79, 70, 229, 0.08);
}
@media (min-width: 768px) {
  .mp-anon-banner {
    padding: 12px 18px;
    margin-bottom: 18px;
  }
  .mp-anon-banner__text { font-size: 0.875rem; }
}

/* ──────────────────────────────────────────────────────────────
   CLOSED / EXPIRED LISTING BANNER
   Rendered above the hero when status is no longer 'active' or
   'paused'. Sets visual tone (muted, amber) and offers a one-click
   recovery path to active listings in the same category.
   ────────────────────────────────────────────────────────────── */
.mp-closed-banner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.06);
}
.mp-closed-banner__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9375rem;
}
.mp-closed-banner__body {
  flex: 1 1 auto;
  min-width: 0;
}
.mp-closed-banner__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 2px;
}
.mp-closed-banner__desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #92400e;
}
.mp-closed-banner__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #b45309;
  color: #ffffff;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
  white-space: nowrap;
}
.mp-closed-banner__cta,
.mp-closed-banner__cta:link,
.mp-closed-banner__cta:visited,
.mp-closed-banner__cta:hover,
.mp-closed-banner__cta:focus,
.mp-closed-banner__cta:active {
  color: #ffffff;
}
.mp-closed-banner__cta:hover { background: #92400e; transform: translateY(-1px); }
.mp-closed-banner__cta:active { transform: scale(0.96); }
.mp-closed-banner__cta i { font-size: 0.75em; }
@media (min-width: 768px) {
  .mp-closed-banner { padding: 16px 22px; margin-bottom: 22px; }
}

/* ──────────────────────────────────────────────────────────────
   HERO — the centerpiece. Floats above the banner band with deep
   elevation so it visually dominates the page.
   ────────────────────────────────────────────────────────────── */
.mp-hero {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 24px;
  padding: 22px 18px 22px;
  margin-bottom: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px rgba(15, 23, 42, 0.04),
    0 24px 56px rgba(15, 23, 42, 0.12);
}

@media (min-width: 768px) {
  .mp-hero {
    padding: 36px 40px 38px;
    margin-bottom: 24px;
    border-radius: 28px;
  }
}

.mp-hero__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mp-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  white-space: nowrap;
}
.mp-hero__chip--cat {
  background: #eef2ff;
  color: #4338ca;
}
/* Category-tinted chip colors. Uses URL-key form (hyphens) — must match
   MarketplaceService::CATEGORY_URL_KEYS. */
.mp-hero__chip--cat.mp-hero__chip--joint-video      { background: #e0e7ff; color: #3730a3; }
.mp-hero__chip--cat.mp-hero__chip--guest-appearance { background: #fce7f3; color: #be185d; }
.mp-hero__chip--cat.mp-hero__chip--shorts-collab    { background: #ffedd5; color: #c2410c; }
.mp-hero__chip--cat.mp-hero__chip--challenge-video  { background: #fef3c7; color: #92400e; }
.mp-hero__chip--cat.mp-hero__chip--series-collab    { background: #dbeafe; color: #1e40af; }
.mp-hero__chip--cat.mp-hero__chip--live-stream      { background: #fee2e2; color: #b91c1c; }
.mp-hero__chip--cat.mp-hero__chip--featured-channel { background: #f3e8ff; color: #6b21a8; }
.mp-hero__chip--cat.mp-hero__chip--other            { background: #f1f5f9; color: #475569; }

.mp-hero__chip--fresh {
  background: #ecfdf5;
  color: #047857;
}
.mp-hero__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: mp-pulse 2.4s ease-in-out infinite;
}
@keyframes mp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hero__chip-dot { animation: none; }
}

.mp-hero__chip--featured {
  background: #fef3c7;
  color: #92400e;
}
.mp-hero__chip--featured i { font-size: 0.7em; }

.mp-hero__title {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.13;
  letter-spacing: -0.024em;
  color: var(--color-gray-900);
  margin: 0 0 14px;
  word-break: break-word;
}
@media (min-width: 768px) {
  .mp-hero__title {
    font-size: 2.625rem;
    letter-spacing: -0.028em;
    margin: 0 0 20px;
    max-width: 24ch;
  }
}
@media (min-width: 1280px) {
  .mp-hero__title { font-size: 3rem; }
}

.mp-hero__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .mp-hero__body {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 60ch;
  }
}

.mp-hero__filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 14px;
  background: #f8fafc;
  border: 1px solid var(--color-gray-100);
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--color-gray-700);
}
.mp-hero__filter i {
  color: var(--color-gray-400);
  flex-shrink: 0;
}
.mp-hero__filter strong {
  color: var(--color-gray-900);
  font-weight: 700;
}

.mp-hero__signals {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--color-gray-100);
}
.mp-hero__signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}
.mp-hero__signal i {
  font-size: 0.75rem;
  color: var(--color-gray-400);
}
.mp-hero__signal--responses {
  color: var(--color-primary);
  font-weight: 600;
}
.mp-hero__signal--responses i { color: var(--color-primary); }

/* ──────────────────────────────────────────────────────────────
   TWO-COLUMN GRID
   Desktop: main story column + sticky right rail.
   Mobile: single column flow (display: contents would skip aside
   styling, so we use grid-template-columns: 1fr instead).
   ────────────────────────────────────────────────────────────── */
.mp-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1024px) {
  .mp-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .mp-grid {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
  }
}

.mp-main-col,
.mp-aside-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
@media (min-width: 768px) {
  .mp-main-col,
  .mp-aside-col { gap: 22px; }
}

/* Sticky CTA on desktop — only the CTA CARD follows the scroll, anchored
   BELOW the fixed CollabPals header (60px tall, z-1000). The creator
   card and trust list scroll naturally below it.
   The aside column STRETCHES to the full grid track height (overriding
   the grid's `align-items: start`) so the sticky CTA has room to stick
   all the way to the bottom of the main story column. Otherwise the
   aside would size to its content (~700px), the CTA would lose its
   containing block partway down, and sticky would break. */
@media (min-width: 1024px) {
  .mp-aside-col {
    align-self: stretch;
  }
  .mp-cta-inline {
    position: sticky;
    top: calc(60px + 16px);
    z-index: 3;
  }
}

/* On mobile, the right rail's About-the-creator section sits AFTER the
   featured video; the desktop inline CTA + trust rail hide and the
   sticky bottom CTA owns the conversion path. */

/* ──────────────────────────────────────────────────────────────
   SECTION SCAFFOLD
   ────────────────────────────────────────────────────────────── */
.mp-section {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  padding: 18px 16px;
  /* subtler than hero — elevation contrast = hierarchy */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
@media (min-width: 768px) {
  .mp-section {
    padding: 26px 28px;
    border-radius: 22px;
  }
}

.mp-section--full {
  margin-top: 14px;
}
@media (min-width: 768px) {
  .mp-section--full { margin-top: 24px; }
}

.mp-section__head {
  margin-bottom: 14px;
}
.mp-section__head--minor {
  margin-bottom: 12px;
}
.mp-section__title {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--color-gray-900);
  margin: 0;
}
@media (min-width: 768px) {
  .mp-section__title { font-size: 1.25rem; }
}
.mp-section__sub {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin: 4px 0 0;
}
.mp-section__more {
  margin-top: 14px;
  text-align: center;
}
.mp-section__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-section__more-link:hover { gap: 12px; }
.mp-section__more-link i { font-size: 0.75em; }

/* ──────────────────────────────────────────────────────────────
   FEATURED VIDEO
   ────────────────────────────────────────────────────────────── */
.mp-video-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.mp-video-hero__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-video-hero:hover .mp-video-hero__thumb { transform: scale(1.03); }
.mp-video-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mp-video-hero__play svg {
  width: 28px;
  height: 28px;
  fill: #0f172a;
  margin-left: 3px;
}
.mp-video-hero:hover .mp-video-hero__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #ffffff;
}
.mp-video-hero__play:active { transform: translate(-50%, -50%) scale(0.95); }

@media (min-width: 768px) {
  .mp-video-hero__play { width: 80px; height: 80px; }
  .mp-video-hero__play svg { width: 36px; height: 36px; }
}

/* ──────────────────────────────────────────────────────────────
   POSTER CARD (the "About the creator" panel — sticky right rail
   on desktop, inline on mobile).
   ────────────────────────────────────────────────────────────── */
.mp-poster {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mp-poster__avatar-wrap {
  flex-shrink: 0;
  position: relative;
}
.mp-poster__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-gray-100);
  border: 3px solid #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 12px rgba(15, 23, 42, 0.12);
  display: block;
}
.mp-poster__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.75rem;
}
.mp-poster__verified {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.32);
}

@media (min-width: 768px) {
  .mp-poster__avatar { width: 80px; height: 80px; }
}

.mp-poster__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}
.mp-poster__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mp-poster__name {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-gray-900);
  letter-spacing: -0.012em;
  line-height: 1.2;
}
/* Linked variant — points at the poster's media kit when poster_slug
 * exists. Quiet by default, indigo + underline on hover/focus. Pairs
 * with the same treatment on .mp-hero__byline-name--link. */
a.mp-poster__name--link:link,
a.mp-poster__name--link:visited {
  color: var(--color-gray-900);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
a.mp-poster__name--link:hover,
a.mp-poster__name--link:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.mp-poster__verified-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mp-poster__positioning {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: 1.4;
}

.mp-poster__bio {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-gray-600);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-100);
  overflow-wrap: break-word;
  word-break: break-word;
}

.mp-poster__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.mp-poster__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-decoration: none;
  transition: all 150ms ease;
}
.mp-poster__link:hover {
  background: #ffffff;
  border-color: var(--color-gray-300);
  color: var(--color-gray-900);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.mp-poster__link i.fa-youtube { color: #ff0000; }
.mp-poster__link--mediakit i { color: var(--color-primary); }
.mp-poster__link-ext { font-size: 0.625em; opacity: 0.6; }

/* ──────────────────────────────────────────────────────────────
   STATS TRIO — subs · avg views · uploads
   ────────────────────────────────────────────────────────────── */
.mp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding: 14px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--color-gray-100);
  border-radius: 14px;
}
.mp-stats:has(.mp-stat:nth-child(1):nth-last-child(2)) {
  grid-template-columns: repeat(2, 1fr);
}
.mp-stats:has(.mp-stat:only-child) {
  grid-template-columns: 1fr;
}
.mp-stat {
  text-align: center;
  position: relative;
}
.mp-stat + .mp-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--color-gray-200);
}
.mp-stat__value {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.022em;
  color: var(--color-gray-900);
  line-height: 1.1;
}
.mp-stat__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .mp-stat__value { font-size: 1.375rem; }
}

/* ──────────────────────────────────────────────────────────────
   NICHE TAGS
   ────────────────────────────────────────────────────────────── */
.mp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.mp-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-gray-50);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-100);
}

/* ──────────────────────────────────────────────────────────────
   DESKTOP INLINE CTA — sits at the TOP of the sticky aside rail.
   Wrapped as a card so it has visual weight matching the rest of
   the sidebar. Hidden on mobile (sticky bottom CTA owns that role).
   ────────────────────────────────────────────────────────────── */
.mp-cta-inline { display: none; }

@media (min-width: 1024px) {
  .mp-cta-inline {
    display: block;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    padding: 22px;
    /* Slightly deeper shadow than the other sidebar cards — the CTA
       gets visual priority because it IS the page's conversion path. */
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 2px 4px rgba(15, 23, 42, 0.04),
      0 12px 28px rgba(15, 23, 42, 0.08);
  }
}

.mp-cta-big {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 12px rgba(79, 70, 229, 0.28);
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.mp-cta-big,
.mp-cta-big:link,
.mp-cta-big:visited,
.mp-cta-big:hover,
.mp-cta-big:focus,
.mp-cta-big:active {
  color: #ffffff; /* pin against the global a:hover indigo rule */
}
.mp-cta-big:hover {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 6px 18px rgba(79, 70, 229, 0.36);
}
.mp-cta-big:active {
  transform: scale(0.985);
  transition: transform 80ms ease;
}
.mp-cta-big--disabled,
.mp-cta-big--disabled:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-500);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.mp-cta-big__brand {
  font-size: 1.125em;
  flex-shrink: 0;
}
.mp-cta-big__label {
  flex: 1 1 auto;
  text-align: center;
}
.mp-cta-big__icon {
  font-size: 0.875em;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-cta-big:hover .mp-cta-big__icon { transform: translateX(3px); }

.mp-cta-inline__hint {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.5;
}
.mp-cta-inline__hint-icon {
  color: var(--color-gray-400);
  margin-right: 4px;
}

/* Owner cockpit (inline above the CTA on desktop, inline below
   the hero on mobile via .mp-cta-inline__owner).
   2026-05-27 — removed the .mp-owner-note "Close it once you've found a
   partner" hint (steered owners toward closing too early, shrinking
   partner pipelines). Unified the remaining controls into a single
   coherent block. */
.mp-cta-inline__owner { display: block; }

.mp-owner-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.mp-owner-expiry {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
}
.mp-owner-expiry i {
  color: var(--color-gray-400);
}
/* Muted variant sits immediately below the active expiry line when the
   Extend button is hidden (outside the 3-day window). Drop the top border
   to avoid stacking two horizontal rules. */
.mp-owner-expiry--muted {
  border-top: 0;
  padding-top: 4px;
  color: var(--color-gray-500);
  font-style: italic;
}
/* Promote Extend to primary CTA — extending is the conversion-priority
   action for owners (keeps the listing visible). Close demotes to ghost. */
.mp-owner-controls #mp-owner-extend-btn {
  width: 100%;
  justify-content: center;
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  font-weight: 600;
}
.mp-owner-controls #mp-owner-extend-btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.mp-owner-controls #mp-owner-close-btn {
  width: 100%;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}
.mp-owner-controls #mp-owner-close-btn:hover {
  color: var(--color-danger, #dc2626);
}

/* ──────────────────────────────────────────────────────────────
   STICKY RAIL TRUST MICRO-SIGNALS — sits INSIDE the CTA card on
   desktop, below the CTA hint, anchored by a hairline divider.
   Hidden on mobile (parent .mp-cta-inline is display: none).
   ────────────────────────────────────────────────────────────── */
.mp-rail-trust {
  display: none;
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--color-gray-100);
}
@media (min-width: 1024px) {
  .mp-rail-trust { display: block; }
}
.mp-rail-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  line-height: 1.4;
}
.mp-rail-trust li i {
  color: var(--color-primary);
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   RECENT VIDEOS RAIL — horizontal scroll mobile, grid on desktop
   ────────────────────────────────────────────────────────────── */
.mp-video-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 4px 16px 8px;
}
.mp-video-rail::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .mp-video-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  /* In the narrow main-col on desktop, 3 columns is still fine */
  .mp-video-rail { grid-template-columns: repeat(3, 1fr); }
}

.mp-video-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-video-card:hover { transform: translateY(-2px); }
.mp-video-card:active {
  transform: scale(0.985);
  transition: transform 80ms ease;
}
@media (min-width: 768px) {
  .mp-video-card { flex: none; }
}

.mp-video-card__thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}
.mp-video-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-video-card:hover .mp-video-card__thumb { transform: scale(1.05); }
.mp-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 200ms ease;
}
.mp-video-card__play i { margin-left: 2px; }
.mp-video-card:hover .mp-video-card__play { opacity: 1; }
.mp-video-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-800);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────
   MINI LISTING RAIL — used for "More from creator" + "Similar"
   ────────────────────────────────────────────────────────────── */
.mp-mini-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 4px 16px 8px;
}
.mp-mini-rail::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .mp-mini-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
}
@media (min-width: 1280px) {
  .mp-mini-rail { grid-template-columns: repeat(4, 1fr); }
}

.mp-mini-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: block;
  background: #ffffff;
  border: 1px solid var(--color-gray-100);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.mp-mini-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-gray-200);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.mp-mini-card:active {
  transform: scale(0.985);
  transition: transform 80ms ease;
}
@media (min-width: 768px) {
  .mp-mini-card { flex: none; }
}

.mp-mini-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f1f5f9;
  overflow: hidden;
}
.mp-mini-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mp-mini-card__thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Banner backdrop (v7): the poster's YouTube channel banner used as the
 * mini-card hero, with their avatar centered on top. Mirrors the main card
 * .mp-card__thumb--banner pattern. 28% darken pass keeps the avatar readable
 * over any banner colour palette. */
.mp-mini-card__thumb-banner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-300);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mp-mini-card__thumb-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mp-mini-card__thumb-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  pointer-events: none;
  z-index: 1;
}
/* Avatar centered on the banner (or on the category gradient when no banner
 * but an avatar exists). Smaller than the main card's 72px because mini-cards
 * have a smaller hero footprint. Selector is scoped to .mp-mini-card__thumb
 * so it wins specificity over the existing `.mp-mini-card__thumb img { width:
 * 100% }` rule above. */
.mp-mini-card__thumb .mp-mini-card__thumb-avatar {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32), 0 0 0 3px rgba(255, 255, 255, 0.25);
}
/* Category-tinted thumb fallback. Uses URL-key form (hyphens) — must match
   MarketplaceService::CATEGORY_URL_KEYS. */
.mp-mini-card__thumb-fallback--joint-video      { background: linear-gradient(135deg, #6366f1, #3730a3); }
.mp-mini-card__thumb-fallback--guest-appearance { background: linear-gradient(135deg, #ec4899, #be185d); }
.mp-mini-card__thumb-fallback--shorts-collab    { background: linear-gradient(135deg, #f97316, #c2410c); }
.mp-mini-card__thumb-fallback--challenge-video  { background: linear-gradient(135deg, #f59e0b, #92400e); }
.mp-mini-card__thumb-fallback--series-collab    { background: linear-gradient(135deg, #3b82f6, #1e40af); }
.mp-mini-card__thumb-fallback--live-stream      { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.mp-mini-card__thumb-fallback--featured-channel { background: linear-gradient(135deg, #a855f7, #6b21a8); }
.mp-mini-card__thumb-fallback--other            { background: linear-gradient(135deg, #64748b, #334155); }

.mp-mini-card__cat {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-gray-800);
  letter-spacing: 0.01em;
}
.mp-mini-card__feat {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(254, 243, 199, 0.95);
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.mp-mini-card__body {
  padding: 12px 14px 14px;
}
.mp-mini-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.32;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-mini-card__meta {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-mini-card__dot { color: var(--color-gray-300); }

/* ──────────────────────────────────────────────────────────────
   TRUST — three confident "promise" cards (Phase 7, 2026-05-25).

   Rewrite: prior Phase 6 footnote band stripped the chrome the
   founder valued. Restored to a proper 3-card grid in the article
   flow, each card with a big colored icon squircle, bold display
   label, and the descriptive line that explains the promise. The
   "Beta-gated for quality" item is now "Verified YouTube channels"
   (truthful: every responder signs in with YouTube OAuth).

   Per-card icon colors carry semantic weight:
   - Indigo envelope = our brand primary (the inbox is ours)
   - Slate ban       = neutral, the absence of platform fee
   - Brand red play  = YouTube's red, signaling real-channel verification
   ────────────────────────────────────────────────────────────── */
.mp-trust {
  margin: 80px 0 0;
}
.mp-trust__heading {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0 0 24px;
  letter-spacing: -0.022em;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-trust__heading::before {
  content: 'Trust & transparency';
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.mp-trust__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .mp-trust {
    margin: 80px 0 0;
  }
  .mp-trust__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
.mp-trust__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 18px;
  transition:
    border-color 220ms ease,
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-trust__item:hover {
  border-color: var(--color-gray-300);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}
.mp-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.mp-trust__item--mailbox .mp-trust__icon {
  background: rgba(79, 70, 229, 0.1);
  color: var(--color-primary);
}
.mp-trust__item--fee .mp-trust__icon {
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-gray-700);
}
.mp-trust__item--verified .mp-trust__icon {
  background: rgba(255, 0, 0, 0.08);
  color: #ff0000;
}
.mp-trust__body {
  flex: 1;
  min-width: 0;
}
.mp-trust__label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: 4px;
  letter-spacing: -0.008em;
  line-height: 1.3;
}
.mp-trust__desc {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  line-height: 1.55;
}
@media (max-width: 767px) {
  .mp-trust {
    margin: 56px 0 0;
  }
  .mp-trust__heading {
    font-size: 1.25rem;
    margin-bottom: 18px;
    gap: 6px;
  }
  .mp-trust__heading::before {
    font-size: 0.625rem;
  }
  .mp-trust__item {
    padding: 18px 18px 16px;
    border-radius: 14px;
    gap: 14px;
  }
  .mp-trust__icon {
    width: 42px;
    height: 42px;
    font-size: 1.125rem;
    border-radius: 12px;
  }
  .mp-trust__label {
    font-size: 0.9375rem;
  }
  .mp-trust__desc {
    font-size: 0.8125rem;
  }
}

/* ──────────────────────────────────────────────────────────────
   BOTTOM CTA CLOSER (Phase 7, 2026-05-25)

   The editorial close-of-page conversion moment. A confident indigo
   hierarchy card with white text and a white CTA pill — gives the user
   one last clear action at maximum-engagement scroll depth, right
   before the global footer. Pattern parallel to Airbnb listing /
   LinkedIn job "Apply" closer.

   Indigo background is canonical per design-and-ux.md (gradients +
   solid brand color allowed for hierarchy tools — this is the page's
   conversion moment). The white CTA pill uses the same proportions
   as the `.button` family but inverts colors for the dark surface.
   ────────────────────────────────────────────────────────────── */
.mp-closer {
  margin: 80px 0 0;
}
.mp-closer__inner {
  background: var(--color-primary);
  border-radius: 24px;
  padding: 56px 32px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.mp-closer__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.mp-closer__heading {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.024em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.mp-closer__sub {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 auto 28px;
  max-width: 52ch;
}
.mp-closer__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    color 180ms ease;
}
.mp-closer__cta-icon {
  font-size: 1rem;
  line-height: 1;
}
/* Pin color across every state on the anchor variant — the global
   `a:hover { color: var(--color-primary-dark) }` in typography.css
   would otherwise leak through and break the white-pill->dark text
   intent on link-as-button. */
a.mp-closer__cta,
a.mp-closer__cta:link,
a.mp-closer__cta:visited,
a.mp-closer__cta:hover,
a.mp-closer__cta:focus,
a.mp-closer__cta:active {
  color: var(--color-primary);
  text-decoration: none;
}
a.mp-closer__cta:hover {
  color: var(--color-primary-dark);
}
.mp-closer__cta:hover {
  background: #fff;
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}
.mp-closer__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
@media (max-width: 767px) {
  .mp-closer {
    margin: 56px 0 0;
  }
  .mp-closer__inner {
    padding: 40px 22px;
    border-radius: 18px;
  }
  .mp-closer__eyebrow {
    font-size: 0.625rem;
    margin-bottom: 10px;
  }
  .mp-closer__heading {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
  }
  .mp-closer__sub {
    font-size: 0.9375rem;
    margin-bottom: 22px;
  }
  .mp-closer__cta {
    padding: 13px 22px;
    font-size: 0.9375rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mp-closer__cta {
    transition: background 180ms ease, color 180ms ease !important;
  }
  .mp-closer__cta:hover {
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE STICKY CTA — sits ABOVE the raised "+" Create button.
   z-4999 < lang-switcher 5000.
   ────────────────────────────────────────────────────────────── */
.mp-sticky-cta { display: none; }

@media (max-width: 1023px) {
  /* Sticky CTA tray sits FLUSH at the viewport bottom — the global
     mobile-bottom-nav + Concierge are hidden on this page (see above)
     so there is nothing below to clear except the iOS home indicator.
     The tray itself is the only bottom-edge UI element. */
  .mp-sticky-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid var(--color-gray-100);
    z-index: 4999;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
  }

  /* Small back-arrow pill on the left lets users escape the focused
     screen back to the browse view without losing the conversion
     primary action. iOS Photos / Settings detail pattern. */
  .mp-sticky-cta__back {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: transform 150ms ease, background 150ms ease;
  }
  .mp-sticky-cta__back:active {
    transform: scale(0.94);
    background: var(--color-gray-100);
    transition: transform 80ms ease;
  }

  .mp-sticky-cta__btn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.005em;
    min-height: 48px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.2) inset,
      0 4px 12px rgba(79, 70, 229, 0.32);
    transition: transform 150ms ease, background 150ms ease;
    /* Reserve right side for the lang-switcher (z-5000, bottom-right
       fixed) so the EN pill never crashes into the CTA label. */
    padding-right: 72px;
  }
  .mp-sticky-cta__btn,
  .mp-sticky-cta__btn:link,
  .mp-sticky-cta__btn:visited,
  .mp-sticky-cta__btn:hover,
  .mp-sticky-cta__btn:active {
    color: #ffffff;
  }
  .mp-sticky-cta__btn:active {
    transform: scale(0.985);
    transition: transform 80ms ease;
    background: #4338ca;
  }
  .mp-sticky-cta__btn--disabled,
  .mp-sticky-cta__btn--disabled:active {
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    padding-right: 22px;
  }
  .mp-sticky-cta__icon {
    font-size: 0.9em;
  }
  .mp-sticky-cta__label {
    white-space: nowrap;
  }
}

/* ──────────────────────────────────────────────────────────────
   BOTTOM SHEET / MODAL — RESPOND COMPOSER
   ────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   RESPOND COMPOSER — bottom-sheet on mobile, centered card on desktop.
   Hierarchy:
     1. Recipient hero (avatar 56 + name + subs + category) = moment-of-truth
     2. Textarea with in-field "Polish with AI" pill (Linear/Notion pattern)
     3. Disclosure strip (sender + privacy + quota) as ONE quiet line
     4. Full-width "Send to {Name}" primary CTA
   ────────────────────────────────────────────────────────────── */
.mp-sheet {
  position: fixed;
  inset: 0;
  z-index: 5001;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.mp-sheet:not([hidden]) { display: flex; }

.mp-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: mp-fade-in 200ms ease forwards;
}

.mp-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 4px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -16px 48px rgba(15, 23, 42, 0.22);
  animation: mp-slide-up 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mp-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes mp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-sheet__panel,
  .mp-sheet__scrim { animation-duration: 0ms; }
}

.mp-sheet__handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-gray-200);
  margin: 8px auto 10px;
  flex-shrink: 0;
}

/* Close button: floats over the top-right of the panel so the hero
   starts immediately. Backdrop-blur lifts it off the hero gradient
   without a heavy chrome band. */
.mp-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-gray-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px rgba(15, 23, 42, 0.10);
  transition: background 150ms ease, color 150ms ease, transform 80ms ease;
  z-index: 3;
}
.mp-sheet__close:hover { background: #ffffff; color: var(--color-gray-900); }
.mp-sheet__close:active { transform: scale(0.92); }

/* ── RECIPIENT HERO ─────────────────────────────────────────
   This is the conversion moment. Big avatar with a soft halo,
   recipient name in display weight, subs + category line. The
   sender's identity moves to a tiny disclosure row below the
   composer — recipient first, sender second. ──────────────── */
.mp-sheet__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, 0.10) 0%, rgba(99, 102, 241, 0) 60%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--color-gray-100);
  border-radius: 18px;
  margin-bottom: 14px;
  flex-shrink: 0;
  animation: mp-hero-in 460ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}
@keyframes mp-hero-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mp-sheet__hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.mp-sheet__hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-gray-100);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.20), 0 1px 0 rgba(255,255,255,0.8) inset;
  display: block;
}
.mp-sheet__hero-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), #6366f1);
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mp-sheet__hero-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(79, 70, 229, 0.35);
  animation: mp-hero-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes mp-hero-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-sheet__hero-pulse { animation: none; opacity: 0; }
  .mp-sheet__hero { animation: none; }
}
.mp-sheet__hero-body {
  min-width: 0;
  flex: 1 1 auto;
  /* reserve the area covered by the floating close button so a long
     recipient name truncates instead of colliding with the X */
  padding-right: 36px;
}
.mp-sheet__hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.mp-sheet__hero-name {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-gray-900);
  letter-spacing: -0.022em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-sheet__hero-meta {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  margin-top: 5px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-sheet__hero-stat strong {
  font-weight: 800;
  color: var(--color-gray-900);
}
.mp-sheet__hero-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.10);
  color: var(--color-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── CHANNEL-GATE BLOCKED STATE ─────────────────────────────
   Softened from red→indigo. Connecting a channel is a routine
   next step, not an error condition. ───────────────────────── */
.mp-sheet__gate {
  text-align: center;
  padding: 8px 12px 8px;
  flex-shrink: 0;
}
.mp-sheet__gate-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 12px;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.15);
}
.mp-sheet__gate-title {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-gray-900);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.mp-sheet__gate-body {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  margin: 0 auto 16px;
  line-height: 1.5;
  max-width: 360px;
}
.mp-sheet__gate-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  max-width: 320px;
  margin: 0 auto;
}
.mp-sheet__gate-actions .button { width: 100%; justify-content: center; }
@media (min-width: 480px) {
  .mp-sheet__gate-actions {
    flex-direction: row;
    justify-content: center;
  }
  .mp-sheet__gate-actions .button { width: auto; }
}

/* ── FORM CONTAINER ───────────────────────────────────────── */
.mp-sheet__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ── TEXTAREA ───────────────────────────────────────────── */
.mp-sheet__textarea {
  width: 100%;
  min-height: 168px;
  padding: 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
  background: #ffffff;
  font-family: inherit;
  /* >= 16px keeps iOS Safari from zooming on focus */
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-gray-900);
  resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.mp-sheet__textarea::placeholder { color: var(--color-gray-400); }
.mp-sheet__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

/* Helper row below textarea: char count + ok / floor hints */
.mp-sheet__helper {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 18px;
}
.mp-sheet__helper-count { color: var(--color-gray-400); }
.mp-sheet__helper-count--warn { color: #b45309; font-weight: 700; }
.mp-sheet__helper-floor {
  color: #b45309;
  font-weight: 700;
}
.mp-sheet__helper-floor[hidden] { display: none; }
.mp-sheet__helper-ok {
  color: #047857;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Restore the [hidden] attribute against the display: inline-flex above. */
.mp-sheet__helper-ok[hidden] { display: none; }
.mp-sheet__helper-ok i { font-size: 0.875rem; }

/* Soft warning bar — URL/phone nudges */
.mp-sheet__warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.mp-sheet__warn[hidden] { display: none; }
.mp-sheet__warn i { font-size: 0.875rem; margin-top: 2px; flex-shrink: 0; }

.mp-sheet__error {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 12px;
  font-size: 0.875rem;
}
.mp-sheet__error[hidden] { display: none; }

/* ── DISCLOSURE STRIP ────────────────────────────────────────
   Sender identity + privacy + quota as TWO quiet metadata
   lines beneath the composer. No card chrome — keeps the
   visual weight on the hero + textarea + send button. ───── */
.mp-sheet__disclosure {
  margin-top: 14px;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--color-gray-100);
  padding-top: 14px;
}
.mp-sheet__disclosure-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mp-sheet__disclosure-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-gray-100);
  display: inline-block;
}
.mp-sheet__disclosure-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
}
.mp-sheet__disclosure-icon {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.mp-sheet__disclosure-text {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  line-height: 1.45;
  min-width: 0;
}
.mp-sheet__disclosure-text strong {
  font-weight: 700;
  color: var(--color-gray-800);
}
.mp-sheet__disclosure-sub {
  color: var(--color-gray-500);
}

/* ── SUCCESS STATE ────────────────────────────────────────── */
.mp-sheet__success {
  margin-top: 14px;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
  border: 1px solid #a7f3d0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.12);
}
.mp-sheet__success[hidden] { display: none; }
.mp-sheet__success-burst {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
}
.mp-sheet__success-burst::before,
.mp-sheet__success-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #34d399;
  animation: mp-success-burst 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mp-sheet__success-burst::after {
  animation-delay: 200ms;
}
@keyframes mp-success-burst {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.mp-sheet__success-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.36), 0 1px 0 rgba(255,255,255,0.4) inset;
  animation: mp-success-pop 540ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes mp-success-pop {
  0%   { transform: scale(0.55); }
  60%  { transform: scale(1.10); }
  100% { transform: scale(1); }
}
.mp-sheet__success-body { min-width: 0; }
.mp-sheet__success-title {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  color: #065f46;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.mp-sheet__success-text {
  font-size: 0.875rem;
  color: #065f46;
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 320px;
}
.mp-sheet__success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.mp-sheet__success-actions .button { padding: 9px 16px; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) {
  .mp-sheet__success-burst::before,
  .mp-sheet__success-burst::after,
  .mp-sheet__success-icon { animation: none; }
}

/* ── ACTION BAR ──────────────────────────────────────────────
   Sticky to the bottom of the panel on mobile so the Send
   button stays visible while the user types. ──────────────── */
.mp-sheet__actions {
  position: sticky;
  bottom: -1px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 22%, #ffffff 100%);
  padding: 14px 0 2px;
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.mp-sheet__cancel {
  flex: 0 0 auto;
}
.mp-sheet__submit {
  flex: 1 1 auto;
  justify-content: center;
  font-weight: 800;
  letter-spacing: -0.005em;
  padding: 13px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25), 0 1px 0 rgba(255,255,255,0.18) inset;
  transition: box-shadow 150ms ease, transform 80ms ease, filter 150ms ease;
}
.mp-sheet__submit:not(:disabled):hover {
  filter: brightness(1.04);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32), 0 1px 0 rgba(255,255,255,0.22) inset;
  transform: translateY(-1px);
}
.mp-sheet__submit:not(:disabled):active { transform: translateY(0); }
.mp-sheet__submit:disabled {
  box-shadow: none;
  opacity: 0.55;
}
.mp-sheet__submit-label { display: inline-flex; align-items: baseline; gap: 4px; }
.mp-sheet__submit-icon {
  font-size: 0.8125em;
  margin-left: 6px;
  transition: transform 200ms ease;
}
.mp-sheet__submit:not(:disabled):hover .mp-sheet__submit-icon { transform: translateX(2px); }

/* Truncate the recipient name in the CTA gracefully on tiny mobiles */
@media (max-width: 360px) {
  .mp-sheet__submit-label {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── DESKTOP: centered card ───────────────────────────────── */
@media (min-width: 768px) {
  .mp-sheet {
    align-items: center;
    padding: 24px;
  }
  .mp-sheet__panel {
    max-width: 540px;
    border-radius: 22px;
    padding: 18px 26px 22px;
    max-height: 86vh;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 20px 60px rgba(15, 23, 42, 0.28),
      0 4px 14px rgba(15, 23, 42, 0.10);
    animation: mp-modal-pop 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  @keyframes mp-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .mp-sheet__handle { display: none; }
  .mp-sheet__close { top: 14px; right: 14px; }
  .mp-sheet__hero { padding: 18px 16px; margin-bottom: 16px; margin-top: 4px; }
  .mp-sheet__hero-name { font-size: 1.375rem; }
  .mp-sheet__textarea { min-height: 180px; }
}

body.mp-sheet-open { overflow: hidden; }

/* ──────────────────────────────────────────────────────────────
   ENTRANCE ANIMATIONS
   ────────────────────────────────────────────────────────────── */
.mp-hero,
.mp-grid > * > .mp-section,
.mp-trust,
.mp-closer,
.mp-section--full {
  opacity: 0;
  transform: translateY(8px);
  animation: mp-fade-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mp-hero { animation-delay: 0ms; }
.mp-main-col > .mp-section:nth-of-type(1) { animation-delay: 80ms; }
.mp-main-col > .mp-section:nth-of-type(2) { animation-delay: 140ms; }
.mp-aside-col > .mp-section { animation-delay: 100ms; }
.mp-section--full { animation-delay: 200ms; }
.mp-trust { animation-delay: 260ms; }
.mp-closer { animation-delay: 320ms; }

/* .mp-cta-inline gets its own opacity-only entrance — using `transform`
   on a sticky-positioned element leaves a non-none `transform: matrix(...)`
   after the animation completes, which breaks `position: sticky` in every
   browser. Opacity-only fade is the safe equivalent. */
.mp-cta-inline {
  opacity: 0;
  animation: mp-fade-only 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 160ms;
}

@keyframes mp-fade-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mp-fade-only {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hero,
  .mp-grid > * > .mp-section,
  .mp-cta-inline,
  .mp-trust,
  .mp-trust__item,
  .mp-closer,
  .mp-section--full {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   JUST-CREATED CELEBRATION BAR — owner-only one-shot reveal after
   POST /collaborations/new. Slides up from the top with a soft
   green tint + check icon + slim chrome. Auto-collapses after
   ~4.5s or on owner X-dismiss. Mobile-first; same height on
   desktop, just constrained max-width.
   ────────────────────────────────────────────────────────────── */
.mp-just-created {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(60px + 12px + env(safe-area-inset-top, 0px));
  z-index: 5050;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 6px 16px rgba(15, 23, 42, 0.10),
    0 18px 38px rgba(16, 185, 129, 0.18);
  animation: mp-just-created-in 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (min-width: 768px) {
  .mp-just-created {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    top: calc(60px + 16px);
    padding: 14px 18px;
  }
}
.mp-just-created.is-collapsing {
  animation: mp-just-created-collapse 540ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.mp-just-created.is-dismissed {
  animation: mp-just-created-out 280ms ease forwards;
  pointer-events: none;
}

@keyframes mp-just-created-in {
  0%   { opacity: 0; transform: translateY(-22px) scale(0.97); }
  60%  { transform: translateY(0)     scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 768px) {
  @keyframes mp-just-created-in {
    0%   { opacity: 0; transform: translate(-50%, -22px) scale(0.97); }
    60%  { transform: translate(-50%, 0) scale(1.005); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
}

@keyframes mp-just-created-collapse {
  0%   { padding-top: 12px; padding-bottom: 12px; max-height: 120px; opacity: 1; }
  100% { padding-top: 6px;  padding-bottom: 6px;  max-height: 36px;  opacity: 0.92; }
}
@keyframes mp-just-created-out {
  to { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

.mp-just-created__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.32), 0 1px 0 rgba(255,255,255,0.4) inset;
  animation: mp-just-created-icon 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
@keyframes mp-just-created-icon {
  0%   { transform: scale(0.4) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}

.mp-just-created__body {
  flex: 1 1 auto;
  min-width: 0;
}
.mp-just-created__title {
  font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  color: #065f46;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mp-just-created__sub {
  font-size: 0.75rem;
  color: #047857;
  line-height: 1.4;
  margin-top: 2px;
}
.mp-just-created__actions {
  margin-top: 10px;
}
.mp-just-created__share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid #6ee7b7;
  background: rgba(255, 255, 255, 0.78);
  color: #065f46;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.mp-just-created__share:hover { background: #ffffff; transform: translateY(-1px); }
.mp-just-created__share:active { transform: translateY(0) scale(0.97); }
.mp-just-created__share.is-copied {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #059669;
  color: #ffffff;
}

.mp-just-created__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.65);
  color: #065f46;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.mp-just-created__close:hover { background: #ffffff; }
.mp-just-created__close:active { transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  .mp-just-created,
  .mp-just-created.is-collapsing,
  .mp-just-created.is-dismissed,
  .mp-just-created__icon {
    animation: none;
  }
}