/* BraveMeet member V1.1 visual pass.
   This layer owns the non-City application shell after the legacy styles have
   loaded. It changes presentation only; interaction and API contracts stay in
   app-member-v11.js. */

body.member-mode,
body.visitor-mode {
  --bm-v11-ink: var(--bm-color-ink);
  --bm-v11-copy: var(--bm-color-copy);
  --bm-v11-muted: var(--bm-color-muted);
  --bm-v11-line: var(--bm-color-line);
  --bm-v11-fill: var(--bm-color-fill);
  --bm-v11-blue: var(--bm-color-action);
  --bm-v11-blue-soft: var(--bm-color-selected);
  background: var(--bm-color-canvas) !important;
  color: var(--bm-v11-ink) !important;
}

body.member-mode .app-shell,
body.visitor-mode .app-shell,
body.member-mode .app-shell > main,
body.visitor-mode .app-shell > main {
  background: var(--bm-color-canvas) !important;
  background-image: none !important;
}

body.member-mode :is(h1, h2, h3, h4, p, b, strong, small, span, em, time,
  label, a, button, input, select, textarea) {
  font-family: var(--bm-font-sans) !important;
}

body.member-mode #discover .member-meet-profile-identity h2,
body.member-mode #discover .member-meet-story h2,
body.member-mode #plans .member-plan-explore > h2,
body.member-mode #plans .member-plan-mine > header h2,
body.member-mode #tools .member-circle-overview h2,
body.member-mode #profile .member-you-v11-heading h2,
body.member-mode .modal h2,
body.member-mode .upgrade-panel h2 {
  font-family: var(--bm-font-sans) !important;
}

body.member-mode #discover .member-meet-profile-identity > div > h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", sans-serif !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", sans-serif !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-profile-bio,
body.member-mode #discover .member-meet-reference-layout .member-meet-interest-panel *,
body.member-mode #discover .member-meet-reference-layout .member-meet-starter *,
body.member-mode #discover .member-meet-reference-layout .member-meet-availability * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", sans-serif !important;
}

body.member-mode .sidebar nav .nav-item[hidden],
body.member-mode .sidebar nav .saved-nav-hidden,
body.visitor-mode .sidebar nav .nav-item[hidden],
body.visitor-mode .sidebar nav .saved-nav-hidden {
  display: none !important;
}

body.member-mode .app-shell > main,
body.visitor-mode .app-shell > main {
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 60px) 64px !important;
}

body.member-mode .view,
body.visitor-mode .view {
  width: min(100%, 1240px) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}

body.member-mode .topbar,
body.visitor-mode .topbar {
  align-items: flex-end !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
}

body.member-mode .topbar h1,
body.visitor-mode .topbar h1 {
  color: var(--bm-v11-ink) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

body.member-mode .topbar p:not(.eyebrow),
body.visitor-mode .topbar p:not(.eyebrow),
body.member-mode .view-subtitle,
body.visitor-mode .view-subtitle,
body.member-mode .tools-intro,
body.visitor-mode .tools-intro {
  max-width: 62ch !important;
  color: var(--bm-v11-muted) !important;
  line-height: 1.55 !important;
}

/* The shared top navigation is a quiet line of tabs, never a floating card. */
body.member-mode .sidebar,
body.visitor-mode .sidebar {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.member-mode .sidebar nav,
body.visitor-mode .sidebar nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.member-mode .sidebar nav .nav-item,
body.visitor-mode .sidebar nav .nav-item {
  border-radius: var(--bm-radius-control) !important;
  color: var(--bm-v11-copy) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

body.member-mode .sidebar nav .nav-item:hover,
body.visitor-mode .sidebar nav .nav-item:hover,
body.member-mode .sidebar nav .nav-item.active,
body.visitor-mode .sidebar nav .nav-item.active {
  color: var(--bm-v11-blue) !important;
  background: var(--bm-v11-blue-soft) !important;
}

body.member-mode .sidebar-bottom .account-quick-access,
body.member-mode .sidebar-bottom .account-signout-quick,
body.visitor-mode .sidebar-bottom .visitor-sign-in-action,
body.visitor-mode .sidebar-bottom .account-quick-access {
  border-radius: var(--bm-radius-control) !important;
  box-shadow: none !important;
}

/* One surface language: a border or spacing creates hierarchy; stacked cards
   and campaign gradients do not. */
body.member-mode :is(.member-discover-layout, .member-plans-studio,
  .member-circle-reference-layout, .member-circle-v9, .member-inbox-layout,
  .member-you-account-hub, .member-profile-overview, .profile-view,
  .plans-page-grid, .circle-board, .messenger, .contacts-directory,
  .contact-detail-panel, .profile-showcase, .tool-card, .circle-utilities,
  .pulse-board) {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.member-mode :is(.member-discover-layout, .member-plans-studio,
  .member-circle-reference-layout, .member-circle-v9, .member-inbox-layout,
  .member-you-account-hub, .profile-view, .plans-page-grid,
  .circle-board, .messenger, .contacts-directory, .contact-detail-panel) {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
}

body.member-mode :is(.person-card, .live-person-card, .member-plan-studio-row,
  .member-plan-mine-row, .plan-card, .simple-plan, .featured-plan,
  .circle-card, .circle-room-card, .member-circle-room-card, .thread,
  .member-rail-section, .contacts-shortcuts, .contact-profile-insights article,
  .member-you-setting-row, .member-you-v11-row, .member-you-settings-grid > article,
  .created-plan, .ops-stat, .ops-list article) {
  background: #fff !important;
  background-image: none !important;
  border-color: var(--bm-v11-line) !important;
  box-shadow: none !important;
}

body.member-mode :is(.person-card:hover, .live-person-card:hover,
  .member-plan-studio-row:hover, .member-plan-mine-row:hover,
  .member-plan-mine-row.selected, .circle-card:hover, .thread:hover,
  .member-you-setting-row:hover, .member-you-v11-row:hover,
  .member-you-settings-grid > article:hover) {
  background: var(--bm-v11-fill) !important;
  border-color: #c9dafa !important;
  box-shadow: none !important;
  transform: none !important;
}

body.member-mode :is(.section-heading, .member-plan-explore-header,
  .member-plan-mine > header, .member-circle-overview, .member-inbox-header,
  .member-you-v11-heading) {
  margin-bottom: var(--bm-space-5) !important;
}

body.member-mode :is(.section-heading h2, .member-plan-explore > h2,
  .member-plan-mine > header h2, .member-circle-overview h2,
  .member-you-v11-heading h2) {
  color: var(--bm-v11-ink) !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  letter-spacing: -.035em !important;
}

/* Controls share one height and one action color. */
body.member-mode :is(button, input, select, textarea) {
  font-family: var(--bm-font-sans) !important;
}

body.member-mode :is(.primary, .member-task-primary, .member-plan-create,
  .member-plan-studio-action.primary, .member-plan-selected-action,
  .member-meet-action-primary, .join, .send-button, .profile-save,
  .visitor-primary-action) {
  min-height: var(--bm-control-standard) !important;
  border: 1px solid var(--bm-v11-blue) !important;
  border-radius: var(--bm-radius-control) !important;
  background: var(--bm-v11-blue) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

body.member-mode :is(.primary, .member-task-primary, .member-plan-create,
  .member-plan-studio-action.primary, .member-plan-selected-action,
  .member-meet-action-primary, .join, .send-button, .profile-save):hover {
  border-color: var(--bm-color-action-pressed) !important;
  background: var(--bm-color-action-pressed) !important;
  transform: none !important;
}

body.member-mode :is(.outline-button, .text-button, .filter,
  .member-segmented-control button, .member-plan-filter-trigger,
  .member-plan-studio-action.outline, .member-meet-action-secondary) {
  min-height: var(--bm-control-standard) !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-control) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--bm-v11-blue) !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

body.member-mode :is(.outline-button, .text-button, .filter,
  .member-segmented-control button, .member-plan-filter-trigger,
  .member-plan-studio-action.outline, .member-meet-action-secondary):hover {
  border-color: #b9d0f6 !important;
  background: var(--bm-v11-blue-soft) !important;
  transform: none !important;
}

body.member-mode :is(.filter.active, .member-segmented-control button.active,
  .member-segmented-control button[aria-selected="true"],
  .member-meet-mode-tabs button.active,
  .member-meet-intent-toggles button.active) {
  border-color: var(--bm-v11-blue) !important;
  background: var(--bm-v11-blue-soft) !important;
  color: var(--bm-v11-blue) !important;
  box-shadow: inset 0 -2px 0 var(--bm-v11-blue) !important;
}

body.member-mode :is(input, select, textarea) {
  min-height: var(--bm-control-standard) !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-control) !important;
  background: #fff !important;
  color: var(--bm-v11-ink) !important;
  box-shadow: none !important;
}

body.member-mode :is(input, select, textarea):focus {
  border-color: #8bb4f7 !important;
  box-shadow: 0 0 0 3px rgba(10, 102, 255, .12) !important;
}

body.member-mode :is(button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(10, 102, 255, .24) !important;
  outline-offset: 2px !important;
}

/* Meet: image and dossier are the single stage, without a second card wall. */
body.member-mode #discover .member-meet-focus {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.member-mode #discover :is(.member-meet-card-stage, .member-meet-card-stage::after,
  .member-meet-profile-panel, .member-meet-story, .member-meet-moment,
  .member-meet-interest-tile, .member-meet-availability, .member-meet-starter,
  .member-meet-action-rail) {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-card-stage {
  border-right: 1px solid var(--bm-v11-line) !important;
}

body.member-mode #discover .member-meet-card-stage .live-person-card {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  box-shadow: 0 12px 28px rgba(16, 33, 63, .08) !important;
}

body.member-mode #discover .member-meet-profile-identity h2,
body.member-mode #discover .member-meet-profile-bio,
body.member-mode #discover .member-meet-story h2 {
  color: var(--bm-v11-ink) !important;
}

body.member-mode #discover :is(.member-meet-interest-tile, .member-meet-availability,
  .member-meet-starter) { border-color: var(--bm-v11-line) !important; }

/* Plans, Circles and Inbox keep their useful two-column workspaces, but use
   one outline and clear list rows instead of nested elevated cards. */
body.member-mode #plans .member-plans-studio,
body.member-mode #tools :is(.member-circle-reference-layout, .member-circle-v9),
body.member-mode #inbox .messenger {
  overflow: hidden !important;
}

body.member-mode #plans :is(.member-plan-overview, .plan-card, .member-plan-row),
body.member-mode #tools article,
body.member-mode #inbox article,
body.member-mode #profile article {
  background-image: none !important;
}

body.member-mode #plans .member-plan-overview article,
body.member-mode #plans .plan-list .plan-card.member-plan-row {
  background: #fff !important;
  background-image: none !important;
}

body.member-mode #plans :is(.member-plan-explore, .member-plan-mine,
  .member-plan-filter-panel, .member-plan-selected),
body.member-mode #tools :is(.member-circle-context > section, .member-circle-my-rail,
  .member-circle-rail-card, .member-circle-focus, .member-circle-inline-composer),
body.member-mode #inbox :is(.member-conversation-rail, .member-rail-section,
  .conversation, .thread-list, .messages, .composer, .contact-detail-panel) {
  border-color: var(--bm-v11-line) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.member-mode #plans .member-plan-mine,
body.member-mode #inbox .member-conversation-rail { border-left: 1px solid var(--bm-v11-line) !important; }

body.member-mode #tools .circle-board,
body.member-mode #inbox .messenger { border-radius: var(--bm-radius-panel) !important; }

body.member-mode #inbox :is(.conversation > header, .composer,
  .member-thread-tools, .member-conversation-retention) {
  border-color: var(--bm-v11-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #inbox .thread.active,
body.member-mode #inbox .inbox-lane.active,
body.member-mode #inbox .contacts-shortcuts button.active {
  border-color: #b9d0f6 !important;
  background: var(--bm-v11-blue-soft) !important;
  box-shadow: inset 3px 0 0 var(--bm-v11-blue) !important;
}

/* You and all secondary settings surfaces use the same list anatomy. */
body.member-mode #profile :is(.profile-hero-web, .member-profile-visibility-snapshot,
  .member-you-account-hub, .member-you-group, .member-you-settings-grid > article,
  .member-you-membership, .profile-editor-section, .member-you-v11-modal) {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.member-mode #profile .profile-hero-web {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  color: var(--bm-v11-ink) !important;
}

body.member-mode #profile .profile-hero-web :is(h1, p:not(.eyebrow)) { color: var(--bm-v11-ink) !important; }
body.member-mode #profile .profile-hero-web .eyebrow { color: var(--bm-v11-blue) !important; }

body.member-mode #profile :is(.member-you-group, .member-you-settings-grid > article,
  .member-you-v11-row, .member-you-setting-row, .profile-editor-section) {
  border-color: var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
}

body.member-mode #profile :is(.member-you-v11-row:hover, .member-you-setting-row:hover,
  .member-you-v11-row:focus-visible, .member-you-setting-row:focus-visible) {
  background: var(--bm-v11-fill) !important;
}

/* Dialogs and feedback are solid, readable surfaces. */
body.member-mode .modal-backdrop {
  background: rgba(16, 33, 63, .28) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.member-mode .modal,
body.member-mode .upgrade-panel,
body.member-mode .member-you-v11-modal {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 22px 54px rgba(16, 33, 63, .18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.member-mode :is(.modal h2, .modal h3, .upgrade-panel h2) { color: var(--bm-v11-ink) !important; }
body.member-mode .toast {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-control) !important;
  background: var(--bm-v11-ink) !important;
  box-shadow: 0 12px 28px rgba(16, 33, 63, .18) !important;
}

body.member-mode :is(.member-zero-state, .discovery-empty-state,
  .member-inbox-lane-placeholder, .contacts-empty, .contact-detail-empty,
  .member-plan-studio-empty) {
  border: 1px dashed #c9d6e8 !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.member-mode :is(.member-zero-state, .discovery-empty-state,
  .member-inbox-lane-placeholder, .contacts-empty, .contact-detail-empty,
  .member-plan-studio-empty) :is(h2, h3, b) { color: var(--bm-v11-ink) !important; }

@media (max-width: 820px) {
  body.member-mode .app-shell > main,
  body.visitor-mode .app-shell > main {
    padding: 22px 14px 94px !important;
  }

  body.member-mode .topbar,
  body.visitor-mode .topbar {
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
  }

  body.member-mode .topbar h1,
  body.visitor-mode .topbar h1 { font-size: clamp(30px, 10vw, 40px) !important; }

  body.member-mode :is(.member-plans-studio, .circle-board, .messenger,
    .member-you-account-hub, .profile-view) { border-radius: var(--bm-radius-row) !important; }

  body.member-mode #discover .member-meet-card-stage { border-right: 0 !important; border-bottom: 1px solid var(--bm-v11-line) !important; }
  body.member-mode #plans .member-plan-mine,
  body.member-mode #inbox .member-conversation-rail { border-left: 0 !important; border-top: 1px solid var(--bm-v11-line) !important; }

  body.member-mode :is(.member-plan-studio-row, .member-plan-mine-row) { border-radius: var(--bm-radius-control) !important; }
  body.member-mode :is(.member-you-v11-row, .member-you-setting-row) { min-height: 64px !important; }
  body.member-mode :is(.modal, .upgrade-panel, .member-you-v11-modal) { max-height: calc(100dvh - 24px) !important; border-radius: var(--bm-radius-row) !important; }

  body.member-mode #discover .member-discovery-taskbar.member-meet-filterbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--bm-v11-line) !important;
    border-radius: var(--bm-radius-control) !important;
    background: #fff !important;
    color: var(--bm-v11-ink) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-align: left !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice.active {
    margin: 0 !important;
    border-color: #b9d0f6 !important;
    background: var(--bm-v11-blue-soft) !important;
    color: var(--bm-v11-blue) !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice > .visitor-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-chevron {
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-preferences {
    gap: 8px !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-preferences span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.member-mode #discover .member-meet-photo-field {
    overflow: hidden !important;
  }

  body.member-mode #discover .member-meet-photo-field .member-meet-gallery {
    display: none !important;
  }

  /* The focused Meet dossier inherits several old desktop geometry rules.
     Reassert its compact reading order and outline icon treatment here so the
     mobile view does not collapse the identity column or render filled SVGs. */
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity,
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity > div:first-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 {
    max-width: none !important;
    font-size: 30px !important;
    white-space: normal !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .visitor-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-panel ul {
    grid-template-columns: 1fr !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 126px !important;
    padding: 12px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile > img {
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile > span {
    display: block !important;
    min-width: 0 !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile :is(b, small) {
    display: block !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile small {
    margin-top: 4px !important;
    line-height: 1.35 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.member-mode *, body.visitor-mode * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Product Design refinement r01.
   The V1.1 tokens are already the contract; this pass tightens composition
   and removes legacy campaign treatments without changing routes, data or
   interaction handlers. City pages are intentionally out of scope. */
body.visitor-mode #visitor-experience,
body.visitor-mode #visitor-experience :is(.visitor-home-scene, .visitor-plans-scene, .visitor-inbox-scene) {
  background: var(--bm-color-canvas) !important;
  background-image: none !important;
}

body.visitor-mode #visitor-experience :is(.visitor-meet-layout, .visitor-plans-layout,
  .visitor-circles-layout, .visitor-inbox-layout) {
  min-height: calc(100dvh - 74px) !important;
  align-items: center !important;
  padding-top: 28px !important;
  padding-bottom: 56px !important;
}

body.visitor-mode #visitor-experience :is(.visitor-meet-stage, .visitor-circle-stage,
  .visitor-inbox-product) {
  min-height: 520px !important;
}

body.visitor-mode #visitor-experience .visitor-meet-stage::before,
body.visitor-mode #visitor-experience .visitor-home-world::before {
  display: none !important;
}

body.visitor-mode #visitor-experience .visitor-home-hero {
  min-height: auto !important;
  align-items: start !important;
  padding-top: 42px !important;
  padding-bottom: 48px !important;
  border-radius: var(--bm-radius-panel) !important;
  border-color: var(--bm-color-line) !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(16, 33, 63, .07) !important;
}

/* Product Design refinement r05: keep the first viewport complete on
   ordinary laptop heights without changing the desktop composition. */
@media (min-width: 821px) and (max-height: 820px) {
  body.visitor-mode #visitor-experience :is(.visitor-meet-layout, .visitor-plans-layout,
    .visitor-circles-layout, .visitor-inbox-layout) {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }
  body.visitor-mode #visitor-experience .visitor-meet-stage {
    min-height: 500px !important;
  }
  body.visitor-mode #visitor-experience .visitor-person-card {
    width: min(280px, 29vw) !important;
  }
  body.visitor-mode #visitor-experience .visitor-person-info {
    padding: 14px 15px 11px !important;
  }
  body.visitor-mode #visitor-experience .visitor-person-title {
    font-size: 18px !important;
  }
  body.visitor-mode #visitor-experience .visitor-card-actions button {
    min-height: 52px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-workspace,
  body.visitor-mode #visitor-experience .visitor-circle-stage,
  body.visitor-mode #visitor-experience .visitor-inbox-product {
    min-height: 520px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-list {
    padding: 18px 20px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-entry {
    padding: 11px 0 !important;
    gap: 12px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-cover {
    height: 220px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-cover h2 {
    padding: 16px !important;
    font-size: 22px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-body {
    padding: 16px !important;
  }
  body.visitor-mode #visitor-experience .visitor-plan-body .visitor-primary-action {
    margin-top: 12px !important;
  }
}

body.visitor-mode #visitor-experience .visitor-home-copy h1,
body.visitor-mode #visitor-experience :is(.visitor-hero-copy h1, .visitor-home-journey h2) {
  color: var(--bm-color-ink) !important;
  text-shadow: none !important;
}

body.visitor-mode #visitor-experience .visitor-home-copy h1 em,
body.visitor-mode #visitor-experience :is(.visitor-hero-copy h1 em, .visitor-home-journey h2 em) {
  color: var(--bm-color-action) !important;
}

body.visitor-mode #visitor-experience :is(.visitor-home-copy > p:not(.visitor-home-kicker),
  .visitor-hero-copy > p, .visitor-home-assurance) {
  color: var(--bm-color-copy) !important;
}

body.visitor-mode #visitor-experience .visitor-home-kicker span {
  border-color: var(--bm-color-line) !important;
  border-radius: var(--bm-radius-control) !important;
  background: var(--bm-color-selected) !important;
  color: var(--bm-color-action) !important;
  backdrop-filter: none !important;
}

body.visitor-mode #visitor-experience :is(.visitor-primary-action, .visitor-secondary-action,
  .visitor-chat-compose input, .visitor-private-compose input,
  .visitor-privacy-control button) {
  border-radius: var(--bm-radius-control) !important;
}

body.visitor-mode #visitor-experience .visitor-primary-action {
  box-shadow: none !important;
}

body.visitor-mode #visitor-experience .visitor-secondary-action {
  min-height: 44px !important;
  border-color: var(--bm-color-line) !important;
  color: var(--bm-color-ink) !important;
}

body.visitor-mode #visitor-experience .visitor-plans-layout,
body.visitor-mode #visitor-experience .visitor-circles-layout {
  gap: 40px !important;
}

body.visitor-mode #visitor-experience .visitor-circle-stage {
  padding: 14px !important;
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: var(--bm-color-fill) !important;
}

body.visitor-mode #visitor-experience .visitor-circle-summary {
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  color: var(--bm-color-ink) !important;
}

body.visitor-mode #visitor-experience .visitor-circle-summary p {
  color: var(--bm-color-copy) !important;
}

/* Product Design refinement r08: compact the Circles trust summary so its
   purpose and entry rule read as one intentional editorial block. */
body.visitor-mode #visitor-experience .visitor-circle-summary {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
  align-content: start !important;
  padding: 18px !important;
}

body.visitor-mode #visitor-experience .visitor-circle-summary .visitor-icon {
  grid-row: 1 / span 2 !important;
  margin-top: 2px !important;
}

body.visitor-mode #visitor-experience .visitor-circle-summary h2,
body.visitor-mode #visitor-experience .visitor-circle-summary p {
  grid-column: 2 !important;
  margin: 0 !important;
}

/* Product Design refinement r09: reclaim the oversized upper fold on tall
   desktop screens while keeping the compact laptop-height rule untouched. */
@media (min-width: 821px) and (min-height: 821px) {
  body.visitor-mode #visitor-experience :is(.visitor-meet-layout,
    .visitor-plans-layout, .visitor-circles-layout, .visitor-inbox-layout) {
    position: relative !important;
    top: clamp(-36px, -3vh, -16px) !important;
  }
}

/* Product Design refinement r10: keep Plans cover titles inside the dark
   content rail at narrow desktop widths without changing the card narrative. */
body.visitor-mode #visitor-experience .visitor-plan-cover h2 {
  min-width: 0 !important;
  text-wrap: balance !important;
}

@media (min-width: 821px) and (max-width: 1300px) {
  body.visitor-mode #visitor-experience .visitor-plan-cover h2 {
    padding: 18px 16px !important;
    font-size: 22px !important;
  }
}

@media (min-width: 821px) {
  body.visitor-mode #visitor-experience .visitor-plan-cover {
    display: block !important;
  }

  body.visitor-mode #visitor-experience .visitor-plan-cover > img {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 48% !important;
  }

  body.visitor-mode #visitor-experience .visitor-plan-cover > h2 {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 52% !important;
    box-sizing: border-box !important;
  }
}

/* Product Design precision R12: one border model across the authenticated
   workspaces. The reference screens should read as a single white canvas with
   dividers only where two working lanes meet; legacy nested outlines are
   intentionally removed here at the final cascade. */
body.member-mode .sidebar nav .nav-item {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.member-mode .sidebar nav .nav-item.active,
body.member-mode .sidebar nav .nav-item:hover {
  background: transparent !important;
  color: var(--bm-v11-blue) !important;
}

body.member-mode .sidebar nav .nav-item.active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--bm-v11-blue) !important;
}

body.member-mode .sidebar nav .nav-item.active span:first-child,
body.member-mode .sidebar nav .nav-item:hover span:first-child {
  background: transparent !important;
  color: inherit !important;
}

/* Meet: one dossier outline, one photo/story divider and one action rail. */
body.member-mode #discover .member-meet-reference-layout {
  overflow: hidden !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage,
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-starter {
  border: 1px solid var(--bm-v11-line) !important;
  border-left: 3px solid var(--bm-v11-blue) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-availability {
  border: 0 !important;
  border-top: 1px solid var(--bm-v11-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-rail {
  border: 0 !important;
  border-top: 1px solid var(--bm-v11-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action + .member-meet-action {
  border-left: 1px solid var(--bm-v11-line) !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-primary {
  border-left: 0 !important;
}

body.member-mode #discover .member-meet-filterbar {
  overflow: hidden !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice + .member-meet-filter-choice {
  border-left: 1px solid var(--bm-v11-line) !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice.active {
  background: var(--bm-v11-blue-soft) !important;
  color: var(--bm-v11-blue) !important;
  box-shadow: inset 0 -2px 0 var(--bm-v11-blue) !important;
}

/* Plans: the explore lane and personal lane are siblings, not nested cards. */
body.member-mode #plans .member-plans-studio {
  overflow: hidden !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-explore,
body.member-mode #plans .member-plan-mine {
  background: #fff !important;
}

body.member-mode #plans .member-plan-mine {
  border-left: 1px solid var(--bm-v11-line) !important;
}

body.member-mode #plans .member-plan-studio-row,
body.member-mode #plans .member-plan-mine-row {
  border: 0 !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.member-mode #plans .member-plan-studio-row:hover,
body.member-mode #plans .member-plan-mine-row:hover,
body.member-mode #plans .member-plan-mine-row.selected {
  background: var(--bm-v11-fill) !important;
  border-color: var(--bm-v11-line) !important;
}

body.member-mode #plans .member-plan-studio-action {
  min-width: 92px !important;
  border-radius: var(--bm-radius-control) !important;
}

body.member-mode #plans .member-plan-selected {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

/* Circles: keep the list editorial and reserve the right rail for membership
   context instead of repeating card chrome on every row. */
body.member-mode #tools.member-circle-reference-layout {
  overflow: hidden !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-head-tools {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
}

body.member-mode #tools.member-circle-reference-layout #circle-list > .member-circle-room-card {
  border: 0 !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #tools.member-circle-reference-layout #circle-list > .member-circle-room-card:hover,
body.member-mode #tools.member-circle-reference-layout #circle-list > .member-circle-room-card.selected {
  background: var(--bm-v11-fill) !important;
  border-color: var(--bm-v11-line) !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-room-select {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-room-media {
  border-radius: var(--bm-radius-row) !important;
  overflow: hidden !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
  border-left: 1px solid var(--bm-v11-line) !important;
  background: #fff !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Inbox: the selected conversation is the anchor; empty lanes stay quiet. */
body.member-mode #inbox .messenger {
  overflow: hidden !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
}

body.member-mode #inbox .thread-list,
body.member-mode #inbox .member-conversation-rail {
  border-right: 1px solid var(--bm-v11-line) !important;
  background: #fff !important;
}

body.member-mode #inbox .thread,
body.member-mode #inbox .inbox-lane {
  border: 0 !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #inbox .thread.active,
body.member-mode #inbox .inbox-lane.active {
  border-color: var(--bm-v11-line) !important;
  background: var(--bm-v11-blue-soft) !important;
  box-shadow: inset 3px 0 0 var(--bm-v11-blue) !important;
}

body.member-mode #inbox .conversation > header,
body.member-mode #inbox .composer {
  border-color: var(--bm-v11-line) !important;
  background: #fff !important;
}

body.member-mode #inbox .member-inbox-lane-placeholder {
  min-height: 260px !important;
  margin: 24px !important;
  border: 1px dashed #c9d6e8 !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

/* You: one account hub with clear section headers, never an extra settings
   shell nested inside the workspace. */
body.member-mode #profile .member-you-account-hub {
  max-width: 1120px !important;
  overflow: hidden !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
}

body.member-mode #profile .member-you-settings-grid > article,
body.member-mode #profile .member-you-group {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #profile .member-you-v11-row,
body.member-mode #profile .member-you-setting-row {
  border: 0 !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

@media (max-width: 820px) {
  body.member-mode #discover .member-meet-filterbar {
    border-radius: var(--bm-radius-row) !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice + .member-meet-filter-choice {
    border-left: 0 !important;
    border-top: 1px solid var(--bm-v11-line) !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action-rail {
    border-top: 1px solid var(--bm-v11-line) !important;
  }

  body.member-mode #plans .member-plan-mine {
    border-left: 0 !important;
    border-top: 1px solid var(--bm-v11-line) !important;
  }

  body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
    border-left: 0 !important;
    border-top: 1px solid var(--bm-v11-line) !important;
  }

  body.member-mode #inbox .thread-list,
  body.member-mode #inbox .member-conversation-rail {
    border-right: 0 !important;
    border-bottom: 1px solid var(--bm-v11-line) !important;
  }
}

/* Product Design precision R05: every secondary surface must be inspectable
   without clipping long preference forms. Keep the profile dossier's two-pane
   composition intact; its copy column owns the scroll instead. */
body.member-mode :is(.modal, .modal-card, .member-you-v11-modal) {
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

body.member-mode .modal:has(.member-profile-detail) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
}

/* Product Design precision R06: an unavailable remote portrait must never
   leave a blank stage. Keep the member identity legible without inventing a
   photo, and give failed gallery tiles the same intentional fallback. */
body.member-mode #discover .member-meet-photo-field.is-media-fallback,
body.member-mode #discover .member-profile-detail-media.is-media-fallback {
  background: linear-gradient(145deg, #f5f8ff 0%, #dfeaff 100%) !important;
}

body.member-mode #discover .member-meet-photo-fallback {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #155eef !important;
  font-size: clamp(52px, 8vw, 108px) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.78), transparent 42%) !important;
}

body.member-mode #discover .member-meet-gallery-thumb.is-media-fallback {
  display: grid !important;
  place-items: center !important;
  background: #eaf1ff !important;
}

body.member-mode #discover .member-meet-gallery-thumb .member-meet-photo-fallback {
  font-size: 20px !important;
}

body.member-mode #discover .member-meet-photo-loading {
  z-index: 0 !important;
}

body.member-mode #discover .member-meet-photo-field.is-media-fallback .member-meet-photo-loading,
body.member-mode #discover .member-profile-detail-media.is-media-fallback .member-meet-photo-loading {
  display: none !important;
}

/* Product Design refinement r13: keep You's story labels supportive rather
   than competing with the primary city image and headline. */
body.visitor-mode #visitor-experience :is(.visitor-home-city-card,
  .visitor-home-circle-card, .visitor-home-plan-note) {
  box-shadow: 0 14px 34px rgba(15, 49, 102, .11) !important;
}

body.visitor-mode #visitor-experience .visitor-home-private-chip {
  opacity: .9 !important;
  box-shadow: 0 10px 24px rgba(7, 27, 65, .16) !important;
}

body.visitor-mode #visitor-experience :is(.visitor-messages, .visitor-private-messages) {
  background: var(--bm-color-fill) !important;
  background-image: none !important;
}

body.visitor-mode #visitor-experience .visitor-private-messages {
  padding: 20px !important;
}

/* Product Design refinement r12: make Inbox conversation lanes legible with
   one quiet divider instead of repeated card chrome. */
body.visitor-mode #visitor-experience .visitor-conversation-type {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 9px 4px !important;
  padding: 10px 0 5px !important;
  border-top: 1px solid var(--bm-color-line) !important;
  color: var(--bm-color-copy) !important;
}

body.visitor-mode #visitor-experience .visitor-conversation-type::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: var(--bm-color-line) !important;
}

body.visitor-mode #visitor-experience .visitor-conversation-type + .visitor-conversation {
  border-left: 2px solid var(--bm-color-selected) !important;
  border-radius: 0 12px 12px 0 !important;
}

body.visitor-mode #visitor-experience .visitor-privacy-banner {
  border-color: var(--bm-color-line) !important;
  background: var(--bm-color-selected) !important;
  color: var(--bm-color-copy) !important;
}

body.visitor-mode #moderation-access,
body.visitor-mode .moderation-fab,
body.visitor-mode .membership-fab {
  display: none !important;
}

body.member-mode :is(#plans, #inbox, #tools, #profile) {
  min-height: auto !important;
}

body.member-mode #plans .member-plans-studio,
body.member-mode #inbox .messenger,
body.member-mode #profile .member-you-account-hub {
  margin-top: 8px !important;
}

body.member-mode #plans .member-plan-explore,
body.member-mode #plans .member-plan-mine,
body.member-mode #inbox .member-conversation-rail,
body.member-mode #inbox .conversation,
body.member-mode #profile .member-you-account-hub {
  min-height: 0 !important;
}

body.member-mode #plans .member-plan-explore-empty,
body.member-mode #inbox .member-inbox-lane-placeholder,
body.member-mode #profile .member-profile-overview-empty {
  min-height: 280px !important;
}

body.member-mode .sidebar nav[aria-label="Primary"] .saved-nav-hidden,
body.visitor-mode .sidebar nav[aria-label="Primary"] .saved-nav-hidden {
  display: none !important;
}

/* Product Design refinement r02.
   Close the last visible legacy exceptions: the Meet dossier inherited an
   editorial serif for labels, while Inbox still used a gradient-only bubble.
   Both are now resolved by the shared V1.1 sans and action tokens. */
body.member-mode #discover .member-meet-reference-layout :is(h1,h2,h3,h4,p,b,strong,small,span,em,time,label,a,button,input,select,textarea),
body.member-mode #discover .member-meet-reference-layout *::placeholder {
  font-family: var(--bm-font-sans) !important;
}

body.member-mode #inbox .bubble.mine {
  background: var(--bm-color-action) !important;
  background-image: none !important;
  color: #fff !important;
}

/* The legacy iOS layer has higher-specificity editorial exceptions. Keep the
   V1.1 contract authoritative for every visible Meet text role. */
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2,
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 span,
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-bio,
body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile b,
body.member-mode #discover .member-meet-reference-layout .member-meet-starter > b {
  font-family: var(--bm-font-sans) !important;
}

body.member-mode #discover .member-meet-profile-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity > div.member-meet-profile-controls {
  display: flex !important;
  width: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-person-navigation {
  margin: 0 !important;
}

/* Member visual precision R01 final cascade: this file is the last member
   stylesheet, so keep the first-viewport Meet geometry authoritative. */
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-reference-layout {
    height: min(620px, calc(100dvh - 280px)) !important;
    min-height: 520px !important;
    grid-template-rows: minmax(0, 1fr) 80px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
    padding: 24px 42px 18px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-bio {
    margin-top: 12px !important;
    padding-top: 12px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-panel {
    margin-top: 12px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
    min-height: 100px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile > img {
    height: 52px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile small {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.2 !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-availability {
    margin-top: 8px !important;
  }

body.member-mode #discover .member-meet-reference-layout .member-meet-action-rail {
  min-height: 80px !important;
  padding-inline: 7% !important;
}

/* Meet region r03: preserve the complete action hierarchy and make async
   feedback legible without introducing another visual surface. */
body.member-mode #discover .member-meet-reference-layout .member-meet-action[aria-pressed="true"],
body.member-mode #discover .member-meet-reference-layout .member-meet-action.selected {
  color: var(--bm-color-action) !important;
  border-color: rgba(35, 102, 235, .34) !important;
  background: #f4f8ff !important;
}
body.member-mode #discover .gift-send-error {
  margin: 8px 0 0 !important;
  color: #a33b47 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }
  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-controls {
    grid-column: 1 !important;
    min-height: 42px !important;
    margin-top: 2px !important;
  }
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
  padding-bottom: 26px !important;
}
body.member-mode #discover .member-meet-reference-layout .member-meet-availability {
  margin-bottom: 10px !important;
}
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary:active {
  transform: translateY(1px) !important;
}
body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary[aria-pressed="true"] {
  box-shadow: 0 0 0 3px rgba(35, 102, 235, .12) !important;
}
body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary:focus-visible {
  box-shadow: 0 0 0 3px rgba(35, 102, 235, .2) !important;
}

  body.member-mode #discover .member-meet-reference-layout .member-meet-action {
    min-height: 54px !important;
  }
}

/* Product Design precision R02: secondary surfaces must keep their action
   hierarchy at desktop widths, not inherit the legacy 560px dialog cap. */
body.member-mode .modal:has(.member-profile-detail) {
  width: min(920px, calc(100vw - 32px)) !important;
  max-width: 920px !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.member-mode .member-profile-detail {
  grid-template-columns: minmax(360px, 46%) minmax(0, 1fr) !important;
  min-height: 600px !important;
}

body.member-mode .member-profile-detail-copy {
  min-width: 0 !important;
  overflow-y: auto !important;
}

body.member-mode .member-profile-detail-actions {
  grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
}

body.member-mode .member-profile-detail-actions button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

body.member-mode #notification-preferences-form {
  gap: 10px !important;
}

body.member-mode #notification-preferences-form > .check-row {
  min-height: 54px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

body.member-mode .upgrade-panel.open {
  box-sizing: border-box !important;
  z-index: 110 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 820px) {
  body.member-mode .modal:has(.member-profile-detail) {
    width: min(100vw - 24px, 680px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  body.member-mode .member-profile-detail {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.member-mode .member-profile-detail-copy {
    max-height: none !important;
    overflow: visible !important;
  }

  body.member-mode .member-profile-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Product Design precision R04: remove the remaining legacy shell artifacts
   and make the Meet dossier read as one calm, deliberate composition. */
@media (min-width: 821px) {
  body.member-mode #discover .member-meet-card-stage .member-meet-profile-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-controls {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity h2 {
    max-width: none !important;
    font-size: clamp(34px, 2.8vw, 42px) !important;
    line-height: 1.04 !important;
    white-space: normal !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-identity p {
    margin-top: 8px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
    padding: 22px 34px 14px !important;
    overflow-y: auto !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-starter {
    margin-top: 14px !important;
  }
}

body.member-mode #discover .member-meet-reference-layout .member-meet-starter > b {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action {
  min-width: 0 !important;
  min-height: 56px !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary {
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: var(--bm-radius-control) !important;
  background: #fff !important;
  color: var(--bm-v11-ink) !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary.like {
  border-color: #b9d0f6 !important;
  color: var(--bm-v11-blue) !important;
}

/* Product Design precision R05: the compact mobile dossier must not expose
   the legacy empty profile-more button when the photo itself is the surface. */
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-more {
  display: none !important;
}

/* Keep the QA/preview identity media visible instead of letting the legacy
   profile layer replace it with an empty neutral circle. */
body.member-mode #profile .profile-hero-web .profile-avatar.has-photo {
  display: inline-grid !important;
  background-image: var(--member-avatar-image) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

@media (min-width: 821px) {
  /* One action per column: the rail reads as a deliberate command bar rather
     than four intrinsic-width buttons floating in a grid. */
  body.member-mode #discover .member-meet-reference-layout .member-meet-action {
    width: 100% !important;
    justify-self: stretch !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary {
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action + .member-meet-action {
    border-left: 1px solid var(--bm-v11-line) !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action-primary {
    width: calc(100% - 18px) !important;
    justify-self: center !important;
    border-radius: 999px !important;
  }

  /* The active messenger min-height came from a more specific legacy child
     selector. Match that specificity so the composer remains in the first
     viewport on desktop. */
  body.member-mode #inbox.active > .messenger {
    height: calc(100dvh - 310px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary:hover,
body.member-mode #discover .member-meet-reference-layout .member-meet-action-secondary:focus-visible {
  background: var(--bm-v11-blue-soft) !important;
  border-color: #8ab5ff !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-chevron {
  transform: rotate(90deg) !important;
  transition: transform 160ms ease !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice[aria-expanded="true"] .member-meet-filter-chevron,
body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice.is-open .member-meet-filter-chevron {
  transform: rotate(-90deg) !important;
}

/* Keep the Plans workspace from rendering an empty, rounded ghost header. */
body.member-mode #plans .member-plans-studio > :is(.member-plans-toolbar:empty, .member-plans-header:empty) {
  display: none !important;
}

body.member-mode #plans .plans-page-grid {
  border: 0 !important;
  padding: 0 !important;
}

body.member-mode #plans .member-plans-studio {
  margin-top: 0 !important;
  border-radius: 0 !important;
}

body.member-mode #plans .member-plan-explore,
body.member-mode #plans .member-plan-mine {
  padding-top: 24px !important;
}

/* Desktop chat keeps the composer inside the first viewport instead of
   letting its top edge appear clipped beneath the messenger shell. */
@media (min-width: 821px) {
  body.member-mode #inbox .messenger {
    height: calc(100dvh - 310px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.member-mode #inbox .messenger {
    overflow: hidden !important;
  }

  body.member-mode #inbox .messenger .messages {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  body.member-mode #inbox .messenger .composer {
    flex: 0 0 auto !important;
    min-height: 72px !important;
  }
}

/* Meet region r02: close the first-frame media, queue and filter review loop. */
body.member-mode #discover .member-meet-live-region {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.member-mode #discover .member-meet-person-navigation button:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  background: #f7f9fc !important;
  border-color: #dce4f0 !important;
  color: #8995aa !important;
}

body.member-mode #discover .member-meet-photo-field.is-media-fallback {
  background: linear-gradient(145deg, #f5f8ff 0%, #dfeaff 100%) !important;
}

/* Meet precision loop r04: legacy image rules used display: block!important,
   which could override the native [hidden] behavior after a 404. A failed
   portrait must show only the intentional initials fallback, never a broken
   image glyph or alt text. */
body.member-mode #discover .member-meet-photo-field img[hidden],
body.member-mode .member-profile-detail-media img[hidden] {
  display: none !important;
}

body.member-mode .member-profile-detail-media.is-media-fallback {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-height: 280px !important;
  background: linear-gradient(145deg, #f7faff 0%, #e7effc 100%) !important;
}

body.member-mode .member-profile-detail-media.is-media-fallback .member-meet-photo-fallback {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 88px !important;
  height: 88px !important;
  margin: auto !important;
  border-radius: 50% !important;
  color: var(--bm-color-action) !important;
  background: #fff !important;
  font-size: 40px !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 12px 26px rgba(21, 94, 239, .14) !important;
}

/* Keep long mobile summaries readable rather than truncating age or range
   into fragments such as “2...” and “Within ...”. */
@media (max-width: 820px) {
  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice {
    min-height: 58px !important;
    align-items: center !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-preferences {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px 7px !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  body.member-mode #discover .member-meet-filterbar .member-meet-filter-preferences span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* A quiet shimmer makes the first-frame loading state intentional while the
   real portrait is decoding; it disappears as soon as aria-busy is cleared. */
body.member-mode #discover .member-meet-photo-field[aria-busy="true"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.48) 48%, transparent 78%) !important;
  background-size: 220% 100% !important;
  animation: bm-meet-photo-shimmer 1.65s ease-in-out infinite !important;
}

/* Meet precision loop r05: give the primary action enough column width for
   its full label while preserving four 44px+ touch targets at 390px. */
@media (max-width: 820px) {
  body.member-mode #discover .member-meet-reference-layout .member-meet-action-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) !important;
    gap: 4px !important;
    padding-inline: 10px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    padding-inline: 5px !important;
    gap: 4px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action .visitor-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  body.member-mode #discover .member-meet-reference-layout .member-meet-action span {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@keyframes bm-meet-photo-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

@media (min-width: 821px) {
  body.member-mode #discover .member-meet-interest-tile {
    min-height: 178px !important;
  }

  body.member-mode #discover .member-meet-interest-tile small {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
}

body.member-mode .modal:has(.live-filter-actions) {
  padding-bottom: 0 !important;
}

body.member-mode .modal:has(.live-filter-actions) .live-filter-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 8 !important;
  display: flex !important;
  gap: 10px !important;
  margin: 18px -30px -30px !important;
  padding: 14px 30px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-top: 1px solid var(--bm-v11-line) !important;
  backdrop-filter: blur(14px) !important;
}

body.member-mode .modal .live-filter-summary {
  margin: 12px 0 18px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--bm-v11-line) !important;
  border-radius: 12px !important;
  color: var(--bm-v11-muted) !important;
  font-size: 12px !important;
}

body.member-mode .modal .live-filter-tier.premium > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  cursor: pointer !important;
  list-style: none !important;
}

body.member-mode .modal .live-filter-tier.premium > summary::-webkit-details-marker {
  display: none !important;
}

body.member-mode .modal .live-filter-tier.premium > summary::after {
  content: "+" !important;
  color: var(--bm-v11-blue) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body.member-mode .modal .live-filter-tier.premium[open] > summary {
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--bm-v11-line) !important;
}

body.member-mode .modal .live-filter-tier.premium[open] > summary::after {
  content: "–" !important;
}

/* Meet precision loop r05 final override: the earlier desktop shell rule
   intentionally hid overflow, but the mobile profile dossier is taller than
   the viewport. Let the modal itself own scrolling and reserve a safe bottom
   inset so safety copy remains reachable above the fixed app nav. */
body.member-mode .modal:has(.member-profile-detail) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  scrollbar-gutter: stable !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 820px) {
  body.member-mode .modal:has(.member-profile-detail) {
    max-height: calc(100dvh - 24px) !important;
  }

  body.member-mode .modal:has(.member-profile-detail) .member-profile-detail-copy {
    padding-bottom: 74px !important;
  }
}

/* Plans precision loop r01: recommendation rows must reflow as a real mobile
   list. The legacy four-column grid was wider than the 390px canvas, clipping
   dates, titles and Join/Waitlist actions. */
@media (max-width: 820px) {
  body.member-mode #plans .member-plan-studio-list {
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
  }

  body.member-mode #plans .member-plan-studio-row {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-areas:
      "media copy"
      "media attendance"
      "media action" !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px 0 !important;
    overflow: visible !important;
  }

  body.member-mode #plans .member-plan-studio-media {
    grid-area: media !important;
    width: 88px !important;
    height: 88px !important;
    align-self: center !important;
  }

  body.member-mode #plans .member-plan-studio-copy {
    grid-area: copy !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.member-mode #plans .member-plan-studio-copy h3,
  body.member-mode #plans .member-plan-studio-copy p,
  body.member-mode #plans .member-plan-studio-copy small {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  body.member-mode #plans .member-plan-studio-attendance {
    grid-area: attendance !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.member-mode #plans .member-plan-studio-action {
    grid-area: action !important;
    justify-self: start !important;
    min-width: 104px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
}