/* ============================================================
   DAK Live — Design tokens & base styles
   See design.md for the reasoning behind these values.
   ============================================================ */

:root {
  /* Brand */
  --brand-primary: #c4714a;
  --brand-hover: #a85a35;
  --text-brand: #c4714a;
  --text-on-brand: #fffcfa;

  /* Surfaces */
  --surface-page: #fbf8f6;
  --surface-elevated: #fffcfa;
  --surface-sunken: #f2ede8;
  --surface-brand-soft: #fdf0e7;
  --brand-light: #f9e4d5;
  --brand-50: #fdf5f0;
  --surface-warm: #fdf7f3;

  /* Member-community accent (the brand color this community picked) */
  --member-accent: #cc4224;
  --member-accent-hover: #b03517;
  --status-live: #dc3030;
  --avatar-purple: #c3a3b9;
  --avatar-pink: #dfa8a8;
  --avatar-blue: #8e8ec4;

  /* Text */
  --text-heading: #1a1a1a;
  --text-primary: #4a4542;
  --text-secondary: #8c8580;
  --text-muted: #b0a9a3;

  /* Borders & inputs */
  --border-default: #e8e2dc;
  --input-border: #e5e5e5;
  --input-bg: #ffffff;

  /* Accent pastels (icon chip backgrounds) */
  --accent-purple-100: #efe0ea;
  --accent-blue-100: #e8e8f5;
  --accent-green-100: #d9edce;
  --accent-pink-100: #f9dede;

  /* Accent icon colors (saturated counterparts for chip icons) */
  --accent-purple-icon: #8a4f78;
  --accent-blue-icon: #4f4faf;
  --accent-green-icon: #4a7a3a;
  --accent-pink-icon: #b14d4d;

  /* Avatar palette */
  --avatar-green: #638d4d;

  /* Radius */
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  /* Layout */
  --sidebar-width: 320px;
  --main-width: 1176px;
  --content-max: 1137px;
  --topbar-height: 88px;

  /* Type */
  --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", var(--font-sans);
}

/* ----- Reset ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

img,
svg {
  display: block;
}

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-width: 1440px; /* desktop-only prototype — hold the 1440 design instead of squishing */
}

/* Unified header: logo cell (sidebar width) + bar, spanning both columns and
   pinned to the top of the viewport while the page scrolls. */
.app-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  height: var(--topbar-height);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
}

.app-topbar__logo {
  width: var(--sidebar-width);
  flex-shrink: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.app-topbar__bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  width: var(--sidebar-width);
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  border-right: 1px solid var(--border-default);
}

.sidebar__logo {
  height: var(--topbar-height);
  padding: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-default);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-hover);
}

.logo-img {
  display: block;
  height: 24px;
  width: auto;
}

.sidebar__community {
  padding: 8px;
}

.sidebar__community-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
}

.sidebar__community-icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  padding: 8px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__community-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.sidebar__community-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__community-members {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.sidebar__nav {
  flex: 1;
  padding: 0 8px;
  overflow-y: auto;
}

.menu {
  display: flex;
  flex-direction: column;
}

.menu__item {
  display: flex;
  flex-direction: column;
}

.menu__item.is-active > .menu__button {
  background: var(--surface-sunken);
  border-radius: var(--radius-2xl);
}

.menu__button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.menu__button:hover {
  background: var(--surface-sunken);
}

.menu__button-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu__chevron {
  transition: transform 180ms ease;
  color: var(--text-secondary);
}

.menu__item.is-open > .menu__button .menu__chevron {
  transform: rotate(180deg);
}

.menu__sub {
  position: relative;
  padding: 2px 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.menu__item.is-open > .menu__sub {
  display: flex;
}

.menu__sub::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-default);
}

.menu__sub-item {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.menu__sub-item:hover {
  background: var(--surface-sunken);
}

.menu__sub-item.is-active {
  color: var(--text-brand);
  font-weight: 500;
}

.menu__sub-item a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

.sidebar__footer {
  padding: 8px;
  border-top: 1px solid transparent;
}

.sidebar__footer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 120ms ease;
  text-align: left;
  width: 100%;
}

.sidebar__footer-row:hover {
  background: var(--surface-sunken);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar-green);
  color: var(--text-heading);
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
}

.sidebar__footer-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__footer-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__footer-email {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Main column
   ============================================================ */
.main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  min-width: 0;
}

/* ----- Top header ----- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--topbar-height);
  border-bottom: 1px solid var(--border-default);
  gap: 20px;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.topbar__search {
  width: 373px;
}

.search-input {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 4px 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
}

.search-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.search-input input::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.search-input svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-2xl);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn--primary:hover {
  background: var(--brand-hover);
}

.btn--primary:disabled {
  background: var(--border-default);
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.btn--outline {
  border-color: var(--brand-primary);
  color: var(--text-brand);
  background: transparent;
}

.btn--outline:hover {
  background: rgba(196, 113, 74, 0.08);
}

.btn--ghost-icon {
  padding: 12px;
  border-radius: var(--radius-2xl);
  color: var(--text-primary);
  background: transparent;
}

.btn--ghost-icon:hover {
  background: var(--surface-sunken);
}

.btn--block {
  width: 100%;
}

.btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--text-brand);
  padding: 8px 0;
  gap: 4px;
}

.btn--link:hover {
  color: var(--brand-hover);
}

.btn--flex {
  flex: 1;
}

/* ============================================================
   Content area
   ============================================================ */
.content {
  padding: 16px 20px 20px;
}

.content__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.breadcrumb {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-brand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.breadcrumb__link {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--text-secondary);
}

.breadcrumb__current {
  color: var(--text-brand);
}

.breadcrumb__sep {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.page-header__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin: 0;
}

.page-header__title em {
  font-style: normal;
  color: var(--brand-primary);
}

.page-header__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button-ellipsis {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

/* ============================================================
   Body grid
   ============================================================ */
.body-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.body-grid__left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.body-grid__right {
  flex: 0 0 324px;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 16px;
}

/* Action cards row (Schedule / Write / Create) */
.action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-card__icon--purple {
  background: var(--accent-purple-100);
  color: var(--accent-purple-icon);
}

.action-card__icon--blue {
  background: var(--accent-blue-100);
  color: var(--accent-blue-icon);
}

.action-card__icon--green {
  background: var(--accent-green-100);
  color: var(--accent-green-icon);
}

.action-card__icon--pink {
  background: var(--accent-pink-100);
  color: var(--accent-pink-icon);
}

.action-card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.action-card__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

/* Second row (Invite + sidecards) */
.second-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.invite-card {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.invite-card__qr {
  width: 111px;
  height: 111px;
  flex-shrink: 0;
}

.invite-card__qr img {
  width: 100%;
  height: 100%;
  display: block;
}

.invite-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invite-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.invite-card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.invite-card__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.invite-card__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
}

.input-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  text-overflow: ellipsis;
}

.input-row__copy {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.input-row__copy.is-copied {
  color: var(--brand-primary);
}

.divider-with-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.divider-with-label::before,
.divider-with-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.invite-card__send {
  display: flex;
  gap: 20px;
}

/* Right column of the second row (stacked side cards) */
.second-row__side {
  flex: 0 0 247px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand-color-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brand-color__swatch {
  height: 30px;
  width: 106px;
}

.brand-color__swatch img {
  width: 100%;
  height: 100%;
  display: block;
}

.note {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* ============================================================
   Setup panel (right column)
   ============================================================ */
.setup-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setup-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.setup-card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.setup-card__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.progress {
  height: 8px;
  width: 100%;
  background: var(--input-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  transition: width 240ms ease;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checklist.is-collapsed {
  display: none;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checklist__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 19px;
  flex-shrink: 0;
  padding-top: 3px;
  color: var(--text-muted);
}

.checklist__item.is-done .checklist__icon {
  color: var(--brand-primary);
}

.checklist__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 1px;
}

.checklist__title {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.checklist__sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* ============================================================
   Analytics / Global presence
   ============================================================ */

/* Filter dropdowns (outline buttons with chevron) */
.filters-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.filter-btn:hover {
  border-color: var(--brand-primary);
}

.filter-btn svg {
  color: var(--text-secondary);
}

/* KPI row + cards */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.kpi-card {
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.kpi-card__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kpi-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.kpi-card__title {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.kpi-card__info {
  color: var(--text-secondary);
  display: inline-flex;
  cursor: help;
}

.kpi-card__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 36px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.kpi-card__delta-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.kpi-card__delta {
  font-size: 14px;
  line-height: 20px;
  color: #638d4d; /* status/success */
  padding: 2px 4px;
  border-radius: 6px;
}

.kpi-card__delta-label {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* Map + badges */
.map-block {
  position: relative;
  width: 100%;
  background: var(--surface-page);
}

.map-block__image {
  display: block;
  width: 100%;
  height: auto;
}

.map-badge {
  position: absolute;
  background: #2b2624;
  color: #fffcfa;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(43, 38, 36, 0.25);
  transform: translate(-50%, -100%);
}

.map-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border: 2px solid var(--surface-page);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Chart row */
.chart-row {
  display: grid;
  grid-template-columns: 793fr 324fr;
  gap: 20px;
  align-items: stretch;
}

.chart-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-card__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
}

.chart-card__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.area-chart {
  width: 100%;
  height: 230px;
  display: block;
}

/* Top countries list */
.country-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.country-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 30px;
}

.country-row__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.country-row__flag {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.country-row__name {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.country-row__count {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  white-space: nowrap;
}

.country-list__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-brand);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  align-self: flex-start;
  margin-top: 4px;
}

.country-list__more:hover {
  color: var(--brand-hover);
}

/* ============================================================
   Settings / form-card section
   ============================================================ */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 931px;
  max-width: 100%;
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-card__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
}

.form-card__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.form-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-card__actions {
  display: flex;
  justify-content: flex-end;
}

.field-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.field__hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* ============================================================
   Onboarding shell
   ============================================================ */
.onboarding {
  min-height: 100vh;
  background: var(--surface-page);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 105px 20px 60px;
}

.onboarding__logo {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 88px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-hover);
  text-decoration: none;
}

.onboarding__card {
  width: 561px;
  max-width: 100%;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.onboarding__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-indicator {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.onboarding__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-heading);
  letter-spacing: -0.2px;
}

.onboarding__description {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.onboarding__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.onboarding__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.onboarding__actions--split {
  justify-content: space-between;
  align-items: center;
}

/* ============================================================
   Form primitives
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
}

.field__label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.field__label-hint {
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 4px;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  background: #ffffff;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
  outline: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field__input,
.field__select {
  height: 36px;
  padding: 8px 16px;
}

.field__textarea {
  padding: 8px 16px;
  min-height: 80px;
  resize: vertical;
  line-height: 24px;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-muted);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-xs), 0 0 0 3px rgba(196, 113, 74, 0.18);
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Dropzone (file upload area) */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-xl);
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--brand-primary);
  background: rgba(196, 113, 74, 0.04);
}

.dropzone__icon {
  color: var(--text-secondary);
}

.dropzone__primary {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
}

.dropzone__secondary {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.dropzone__input {
  display: none;
}

/* Callout (info / reference card) */
.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-xl);
  background: #f7f3f0;
  border: 1px solid var(--border-default);
}

.callout__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.callout__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-brand);
}

.callout__body {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.callout__body--muted {
  color: var(--text-muted);
}

.callout__icon {
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* Step-2 specific: QR block and send-via row */
.invite-qr {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.invite-qr img {
  width: 258px;
  height: 258px;
  display: block;
}

.send-row {
  display: flex;
  gap: 20px;
}

/* ============================================================
   Empty state (inside app)
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 120px 20px;
  text-align: center;
}

.empty-state__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.empty-state__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.empty-state__actions {
  margin-top: 8px;
}

/* ============================================================
   Member sign-up (split-screen)
   ============================================================ */
.member-signup {
  min-height: 100vh;
  background: var(--surface-page);
  position: relative;
  padding: 105px 80px 60px;
}

.member-signup__logo {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 88px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-hover);
  text-decoration: none;
}

.member-signup__grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.member-signup__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-full);
  color: var(--text-brand);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  align-self: flex-start;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 72px;
  line-height: 80px;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin: 0;
}

.hero-title em {
  font-style: normal;
  color: var(--brand-primary);
  display: block;
}

.hero-sub {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
}

.benefit-item svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.auth-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.auth-card__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-heading);
  letter-spacing: -0.2px;
}

.auth-card__subtitle {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-card__hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.auth-card__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.auth-card__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.divider-text {
  position: relative;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.divider-text::before,
.divider-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: var(--border-default);
}

.divider-text::before {
  left: 0;
}

.divider-text::after {
  right: 0;
}

.btn--google {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--brand-primary);
  color: var(--text-brand);
  width: 100%;
}

.btn--google:hover {
  background: rgba(196, 113, 74, 0.06);
}

.auth-card__footer {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.auth-card__footer a {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Success state — Figma node 476:38255 */
.auth-card--success {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 40px;
  min-height: 543px;
}

.auth-card--success .success-check {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.auth-card--success .auth-card__subtitle {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.auth-card--success .btn {
  width: 281px;
  margin-top: 12px;
}

/* Toggle visibility */
.auth-state {
  display: none;
}

.auth-state.is-active {
  display: flex;
}

/* ============================================================
   Member view shell — single shared top header + body row
   ============================================================ */
.member-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 1440px; /* desktop-only prototype — hold the 1440 design instead of squishing */
}

.member-top-strip {
  display: flex;
  align-items: stretch;
  height: var(--topbar-height);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-page);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.member-top-strip__logo {
  width: var(--sidebar-width);
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-hover);
  flex-shrink: 0;
}

.member-top-strip__bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
}

.member-app__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.member-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  width: var(--sidebar-width);
  border-right: 1px solid var(--border-default);
  flex-shrink: 0;
  position: sticky;
  top: var(--topbar-height);
  align-self: flex-start;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
  z-index: 40;
}

.member-app .main {
  flex: 1;
  min-width: 0;
}

.member-sidebar__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.member-sidebar__icons {
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
  border-right: 1px solid var(--border-default);
}

.member-sidebar__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
  cursor: pointer;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  text-decoration: none; /* rail icons can be links (community switching) */
  transition: opacity 120ms ease;
}

.member-sidebar__icon:hover {
  opacity: 0.9;
}

/* Wrapper that adds the brand outer ring on the active community */
.member-sidebar__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
}

.member-sidebar__icon-wrap.is-active {
  border-color: var(--brand-primary);
}

.member-sidebar__plus {
  margin-top: 4px;
  padding: 12px;
  border-radius: var(--radius-2xl);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none; /* can be a link (community discovery) */
  display: inline-flex;
}

.member-sidebar__plus:hover {
  color: var(--text-primary);
  background: var(--surface-sunken);
}

/* 192px label column: switcher on top, nav, illustration pinned to the bottom */
.member-sidebar__labels {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.member-sidebar__items {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Community switcher row at the top of the label column */
.member-sidebar__switcher {
  padding: 8px 8px 0;
}

.member-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}

.member-switcher:hover {
  background: var(--surface-sunken);
}

.member-switcher__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.member-switcher__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-switcher__name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-switcher__meta {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.member-sidebar__people {
  width: 100%;
  display: block;
  margin-top: auto;
}

/* Member topbar */
.member-topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-page);
  gap: 16px;
}

.member-topbar__search {
  width: 373px;
}

.member-topbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.member-topbar .btn--ghost-icon {
  position: relative;
}

.member-topbar__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--status-live);
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-page);
}

/* ============================================================
   Member home — Figma node 628:50236
   ============================================================ */

/* Greeting + page header */
.mh-greeting {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.mh-greeting__name {
  color: var(--member-accent);
}

.member-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 12px;
}

.member-page-header__text {
  max-width: 536px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-home .page-header__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.member-home .page-header__subtitle {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  margin-top: 0;
}

/* Member-accent buttons */
.btn--member {
  background: var(--member-accent);
  color: var(--text-on-brand);
}

.btn--member:hover {
  background: var(--member-accent-hover);
}

/* Photo collage */
.mh-collage {
  display: grid;
  grid-template-columns: 661fr 461fr;
  grid-template-rows: 483px;
  gap: 15px;
  margin-bottom: 16px;
}

.mh-collage__main {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.mh-collage__main > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-collage__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.mh-collage__side img {
  flex: 1;
  min-height: 0;
  height: 0; /* flex-basis drives the height; keeps natural img height out of track sizing */
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

.mh-collage__chat {
  position: absolute;
  right: 134px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.chat-bubble {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(46, 38, 33, 0.53);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 10px 12px;
  border-radius: var(--radius-xl);
}

.chat-bubble__flag {
  font-size: 18px;
  line-height: 20px;
}

.chat-bubble__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-bubble__name {
  font-size: 14px;
  line-height: 20px;
  color: #e5e5e5;
}

.chat-bubble__sub {
  font-size: 12px;
  line-height: 16px;
  color: #a3a3a3;
}

.chat-bubble__emoji {
  font-size: 26px;
  line-height: 1;
}

/* Single wide hero photo (St. Gabriel home variant) */
.mh-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 327px;
  margin-bottom: 16px;
}

.mh-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-hero .mh-collage__chat,
.mh-collage__main .mh-collage__chat {
  right: 32px;
  bottom: 30px;
}

/* ============================================================
   St. Gabriel Gathering theme — Figma node 628:51636
   ============================================================ */
.member-app--gabriel {
  --member-accent: #0033a0;
  --member-accent-hover: #002a85;
}

.member-app--gabriel .mh-reaction-btn:hover,
.member-app--gabriel .mh-btn-outline:hover {
  background: rgba(0, 51, 160, 0.06);
}

.member-app--gabriel .member-sidebar__icon-wrap.is-active {
  border-color: var(--avatar-blue);
}

.member-app--gabriel .mh-heritage {
  background: #f2f0fd;
}

.member-app--gabriel .mh-heritage::before,
.member-app--gabriel .mh-heritage::after {
  background: radial-gradient(closest-side, rgba(120, 140, 230, 0.45), rgba(120, 140, 230, 0));
}

.mh-message-card.mh-message-card--gabriel::before {
  background-image: url("assets/gabriel-message-bg.png");
}

/* Card rows */
.mh-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.mh-row + .mh-row {
  margin-top: 12px;
}

.mh-card {
  background: var(--surface-warm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 12px;
}

.mh-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mh-chip {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.mh-card__sub {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Member-accent link button */
.mh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--member-accent);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mh-link:hover {
  color: var(--member-accent-hover);
}

/* Community activity card */
.mh-activity {
  width: 535px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mh-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.mh-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 150px;
}

.mh-stat__emoji {
  font-size: 36px;
  line-height: 1;
}

.mh-stat__num {
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  color: var(--text-primary);
}

.mh-stat__label {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.mh-stats__divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
}

.mh-activity__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mh-reactions {
  display: flex;
  gap: 20px;
}

.mh-reaction-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--member-accent);
  border-radius: var(--radius-2xl);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mh-reaction-btn:hover {
  background: rgba(204, 66, 36, 0.06);
}

.mh-reaction-btn__emoji {
  font-size: 16px;
  line-height: 24px;
}

.mh-reaction-btn__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mh-reaction-btn__label {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--member-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-reaction-btn__price {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.mh-reaction-btn--block {
  width: 100%;
  align-items: center;
}

.mh-footnote {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.mh-or {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.mh-or::before,
.mh-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

/* Members tonight card */
.mh-members {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mh-members::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/members-map-bg.png") center / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}

.mh-members > * {
  position: relative;
}

.mh-members-list {
  flex: 1;
}

.mh-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.mh-member-row__loc {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 130px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.mh-member-row__flag {
  font-size: 18px;
  line-height: 1;
}

.mh-member-row__members,
.mh-member-row__send,
.mh-member-row__time {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

.mh-member-row__members {
  min-width: 90px;
}

.mh-member-row__send {
  min-width: 67px;
  text-decoration: none;
  cursor: pointer;
}

.mh-member-row__send:hover {
  color: var(--text-primary);
}

.mh-member-row__time {
  min-width: 64px;
}

/* Message of the day card */
.mh-message-card {
  width: 486px;
  height: 295px;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--radius-xl);
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mh-message-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/message-of-day-bg.png") center / cover no-repeat;
  opacity: 0.8;
}

.mh-message-card > * {
  position: relative;
}

.mh-message-card__label {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #7a6d63;
}

.mh-message-card__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 36px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.mh-leader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leader-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.leader-role {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* Pinned messages card */
.mh-pinned {
  width: 343px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mh-pinned__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mh-pin-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mh-pin-msg__flag {
  font-size: 20px;
  line-height: 24px;
}

.mh-pin-msg__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mh-pin-msg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mh-pin-msg__name {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
}

.mh-pin-msg__time {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.mh-pin-msg__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.mh-pinned__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mh-btn-outline {
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--member-accent);
  border-radius: var(--radius-2xl);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--member-accent);
  cursor: pointer;
}

.mh-btn-outline:hover {
  background: rgba(204, 66, 36, 0.06);
}

/* Heritage archive card */
.mh-heritage {
  flex: 1;
  min-width: 0;
  height: 295px;
  position: relative;
  background: var(--brand-50);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mh-heritage::before,
.mh-heritage::after {
  content: "";
  position: absolute;
  width: 131px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 160, 110, 0.5), rgba(240, 160, 110, 0));
  filter: blur(24px);
  pointer-events: none;
}

.mh-heritage::before {
  left: -12px;
  top: -44px;
}

.mh-heritage::after {
  right: -28px;
  bottom: -4px;
}

.mh-heritage__text {
  position: relative;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mh-heritage__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
}

.mh-heritage__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  margin-top: 4px;
}

.mh-heritage__img {
  position: relative;
  width: 100%;
  aspect-ratio: 252 / 112;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* ============================================================
   Invite people page
   ============================================================ */
.invite-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.step__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.step__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.invite-body {
  display: grid;
  grid-template-columns: 1fr 371px;
  gap: 24px;
  align-items: start;
}

.joined-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.joined-section__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
}

.joined-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.joined-row {
  display: grid;
  grid-template-columns: 1fr 200px 110px 90px;
  align-items: center;
  gap: 16px;
  height: 30px;
  font-size: 14px;
  line-height: 20px;
}

.joined-row__person {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.joined-row__loc,
.joined-row__time,
.joined-row__via {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-on-brand);
  flex-shrink: 0;
}

.avatar-sm--green {
  background: var(--avatar-green);
}

.avatar-sm--pink {
  background: #b14d4d;
}

.avatar-sm--orange {
  background: var(--brand-primary);
}

/* QR side card (Invite people page) */
.invite-side-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.invite-side-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.invite-side-card__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
}

.invite-side-card__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.invite-side-card__qr {
  align-self: center;
  width: 153px;
  height: 153px;
  display: block;
}

.invite-side-card__send {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Dropdown menu (Download / Print) */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown--block {
  display: block;
  width: 100%;
}

.dropdown--up .dropdown__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.dropdown__trigger {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Icon-only variant for the QR-card "Download / Print" dropdown */
.dropdown__trigger--icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  padding: 0;
}

.dropdown__trigger--icon:hover {
  color: var(--text-primary);
}

.dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: 0 8px 18px rgba(26, 26, 26, 0.08);
  display: none;
  flex-direction: column;
  z-index: 20;
}

.dropdown.is-open .dropdown__menu {
  display: flex;
}

.dropdown__item {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.dropdown__item:hover {
  background: var(--surface-sunken);
}

/* ============================================================
   Settings hub
   ============================================================ */
.settings-hub {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 931px;
  max-width: 100%;
}

.settings-hub__card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}

.settings-hub__card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.settings-hub__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-hub__icon--purple {
  background: var(--accent-purple-100);
  color: var(--accent-purple-icon);
}

.settings-hub__icon--pink {
  background: var(--accent-pink-100);
  color: var(--accent-pink-icon);
}

.settings-hub__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-hub__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.settings-hub__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.settings-hub__chevron {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Save confirmation toast (inline above the settings stack) */
.save-toast {
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: var(--radius-xl);
}

.save-toast[hidden] {
  display: none;
}

/* ============================================================
   Configured Home (post-setup state)
   ============================================================ */
.home-state {
  display: none;
}

body.is-configured .home-state--builder {
  display: none;
}

body.is-configured .home-state--configured {
  display: block;
}

.home-state--builder {
  display: block;
}

.home-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.home-welcome__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-welcome__avatar {
  width: 101px;
  align-self: stretch;
  border-radius: var(--radius-xl);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-sunken);
}

.home-welcome__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Generic two-column grid for home cards */
.home-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Activity card */
.activity-card__stats {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.activity-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

.activity-stat__icon {
  font-size: 27px;
  line-height: 1;
}

.message-of-day__body {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 36px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.activity-stat__num {
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  color: var(--text-primary);
}

.activity-stat__label {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.activity-stat__divider {
  width: 1px;
  height: 40px;
  background: var(--border-default);
}

/* Next stream card */
.stream-card__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.stream-card__thumb {
  width: 183px;
  height: 156px;
  border-radius: 13.446px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.stream-card__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.stream-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  margin-top: 4px;
}

.stream-card__when {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.stream-card__actions {
  margin-top: 16px;
}

/* Members today card */
.members-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.members-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.members-row {
  display: grid;
  grid-template-columns: 130fr 90fr 67fr 64fr;
  align-items: center;
  gap: 16px;
  height: 44px;
  font-size: 14px;
  line-height: 20px;
}

.members-row__loc {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
}

.members-row__members {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members-row__send {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.members-row__send:hover {
  color: var(--text-secondary);
}

.members-row__time {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inbox card */
.inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}

.inbox-row__avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.inbox-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inbox-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inbox-row__name {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
}

.inbox-row__time {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.inbox-row__preview {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

/* Generic small link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-brand);
  text-decoration: none;
}

.link-arrow:hover {
  color: var(--brand-hover);
}

/* Card header style used across home content */
.h-card__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.h-card__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.h-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* ============================================================
   Modal
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.45);
}

.modal__card {
  position: relative;
  width: 561px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface-elevated);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.18);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.modal__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-heading);
  letter-spacing: -0.2px;
}

.modal__close {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.modal__close:hover {
  color: var(--brand-primary);
}

.modal__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

/* Compact member-view modals — Figma nodes 628:51134 + 475:34879 */
.modal__card--compact {
  width: 538px;
  padding: 20px;
  gap: 20px;
  background: #ffffff;
  border: 1px solid var(--border-default);
}

.modal__card--narrow {
  width: 319px;
  gap: 12px;
}

.modal__title--sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
}

.modal__pay-options {
  display: flex;
  gap: 16px;
}

.pay-option-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-2xl);
  text-align: left;
  cursor: pointer;
}

.pay-option-btn:hover {
  background: rgba(196, 113, 74, 0.06);
}

.pay-option-btn > svg {
  margin-top: 4px;
  color: var(--brand-primary);
  flex-shrink: 0;
}

.pay-option-btn__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pay-option-btn__label {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-brand);
}

.pay-option-btn__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.modal__footnote {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.member-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.member-modal__head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-modal__head .modal__title-row {
  align-items: center;
}

.member-modal__price {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-brand);
}

/* ============================================================
   Member global presence — Figma node 475:34670
   ============================================================ */
.gpm-kpis {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding-bottom: 16px;
}

.gpm-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--border-default);
  padding-right: 20px;
}

.gpm-kpi:last-child {
  border-right: 0;
  padding-right: 0;
}

.gpm-kpi__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gpm-kpi__chip {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--brand-light);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gpm-kpi__value {
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  color: var(--text-primary);
}

.gpm-kpi__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

/* Map markers (orange donut rings). Clickable — the selected one grows
   to the big donut; script.js keeps only one selected at a time. */
.gpm-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(196, 113, 74, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 200ms ease, height 200ms ease, background 200ms ease;
}

.gpm-marker:hover {
  background: rgba(196, 113, 74, 0.45);
}

.gpm-marker::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 3px solid #fffcfa;
  transition: width 200ms ease, height 200ms ease, border-width 200ms ease;
}

.gpm-marker--big {
  width: 76px;
  height: 76px;
  background: rgba(196, 113, 74, 0.25);
}

.gpm-marker--big::after {
  width: 20px;
  height: 20px;
  border-width: 5px;
}

/* Plain dark badge without the admin map-badge's dot tail */
.map-badge--plain {
  transform: none;
}

.map-badge--plain::after {
  display: none;
}

/* "You" + "Philippines" pills near the big marker */
.gpm-pill {
  position: absolute;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.gpm-pill--you {
  background: #fffcfa;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.gpm-pill--country {
  background: #c58f75;
  color: var(--text-on-brand);
}

/* "N people from <city>" popup on the map */
.gpm-popup {
  position: absolute;
  width: 248px;
  transition: left 200ms ease, top 200ms ease;
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.14);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gpm-popup__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gpm-popup__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-heading);
}

.gpm-popup__sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.gpm-popup__btn {
  margin-top: 12px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: #1a1a1a;
  color: #fffcfa;
  border: 0;
  border-radius: var(--radius-2xl);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.gpm-popup__btn:hover {
  background: #2e2621;
}

.gpm-popup[hidden] {
  display: none;
}

/* Bottom "You are in …" note under the map */
.gpm-note {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 0 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

.gpm-note svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.gpm-note__city {
  color: var(--text-brand);
}

/* Floating "sent a love" toast over the bottom-right of the map */
.gpm-toast {
  position: absolute;
  right: 0;
  bottom: 36px;
}

.gpm-toast .chat-bubble__emoji {
  font-size: 30px;
}

/* ============================================================
   Community discovery — Figma node 475:35197
   ============================================================ */
/* Wider sidebar variant for the filters panel (design: 64px rail + 256px panel) */
.member-sidebar--wide {
  width: 328px; /* our 72px rail + 256px panel */
}

.cd-filters {
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cd-filters__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.cd-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  cursor: pointer;
}

.cd-filters .btn {
  width: 100%;
  margin-top: 4px;
}

.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.cd-card {
  border: 1px solid #eae3db;
  border-radius: var(--radius-xl);
  background: var(--surface-elevated);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cd-card__photo {
  position: relative;
  height: 114px;
  flex-shrink: 0;
}

.cd-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cd-live {
  position: absolute;
  left: 11px;
  top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--status-live);
  color: var(--text-on-brand);
  border-radius: var(--radius-2xl);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
}

.cd-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.cd-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.cd-card__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-card__meta {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cd-card__meta-muted {
  color: var(--text-muted);
}

.cd-card__stats {
  display: flex;
  align-items: stretch;
  height: 63px;
  margin-top: auto;
}

.cd-card__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.cd-card__stats-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
}

.cd-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0 4px;
  font-size: 14px;
  line-height: 20px;
}

.cd-page {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 14px;
}

.cd-page:hover {
  background: var(--surface-sunken);
}

.cd-page.is-current {
  border: 1px solid var(--border-default);
  background: var(--surface-elevated);
}

.cd-page--ellipsis {
  cursor: default;
  color: var(--text-secondary);
}

.cd-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  font-size: 14px;
  cursor: pointer;
}

.cd-page-nav:hover {
  background: var(--surface-sunken);
}

.cd-page-nav.is-disabled {
  color: var(--text-muted);
  cursor: default;
}

.cd-page-nav.is-disabled:hover {
  background: transparent;
}

/* Open-state hint on the QR thumbnail in index.html */
.invite-card__qr {
  cursor: zoom-in;
  transition: opacity 120ms ease;
}

.invite-card__qr:hover {
  opacity: 0.85;
}

/* ============================================================
   Misc helpers
   ============================================================ */
.icon-16 {
  width: 16px;
  height: 16px;
}
.icon-20 {
  width: 20px;
  height: 20px;
}
.icon-24 {
  width: 24px;
  height: 24px;
}

/* ============================================================
   Landing page (landing.html)
   ============================================================ */
.landing {
  background: var(--surface-page);
  min-height: 100vh;
}

.landing-section {
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---- Badge ---- */
.landing-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-full);
  color: var(--text-brand);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.text-brand {
  color: var(--text-brand);
}

/* ---- Nav ---- */
.landing-hint-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid var(--border-default);
  padding: 20px 48px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  text-align: center;
}

.landing-hint-bar--top {
  color: var(--text-muted);
}

.landing-hint-bar strong {
  color: var(--text-primary);
  font-weight: 600;
}

.landing-nav {
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  height: 88px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.landing-nav__logo {
  display: flex;
  align-items: center;
}

.landing-nav__links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.landing-nav__link {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  text-decoration: none;
  padding: 12px 0;
}

.landing-nav__link:hover {
  color: var(--text-brand);
}

.landing-nav__link.is-active {
  color: var(--text-heading);
  border-bottom: 2px solid var(--brand-primary);
}

/* ---- Hero ---- */
.landing-hero {
  display: grid;
  grid-template-columns: 688px 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 48px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.landing-hero__left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.landing-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 52px;
  line-height: 60px;
  letter-spacing: -1px;
  color: var(--text-heading);
}

.landing-hero__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  max-width: 620px;
}

.landing-hero__actions {
  display: flex;
  gap: 16px;
}

.landing-stats {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 32px;
}

.landing-stat {
  flex: 1;
  min-width: 222px;
  padding: 0 20px;
}

.landing-stat:first-child {
  padding-left: 0;
}

.landing-stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  color: var(--text-heading);
}

.landing-stat__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.landing-stat__divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
}

.landing-hero__media {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  min-width: 0;
}

.landing-hero__img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

.landing-hero__floating {
  position: absolute;
  right: 20px;
  bottom: 24px;
  background: rgba(26, 18, 12, 0.72);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.floating-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.floating-name {
  font-size: 13px;
  line-height: 16px;
  color: #fffcfa;
  font-weight: 500;
}

.floating-sub {
  font-size: 11px;
  line-height: 14px;
  color: rgba(255, 252, 250, 0.7);
}

/* ---- Features ---- */
.landing-features {
  padding-top: 40px;
  padding-bottom: 40px;
}

.landing-features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 40px;
}

.landing-features__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.3px;
  color: var(--text-heading);
}

.landing-features__sub {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  max-width: 676px;
}

/* ---- Bento grid ---- */
.bento {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bento-row {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.bento-row--a .bento-card--wide:nth-child(1),
.bento-row--a .bento-card--wide:nth-child(2) {
  flex: 472;
}

.bento-row--a .bento-col {
  flex: 360;
}

.bento-row--b .bento-col {
  flex: 360;
}

.bento-row--b .bento-card--wide {
  flex: 472;
}

.bento-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.bento-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bento-card--wide {
  min-width: 0;
}

.bento-card--mini {
  flex: 1;
}

.bento-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
  margin-top: 16px;
}

.bento-desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.bento-card--mini .bento-title {
  margin-top: 12px;
}

/* Preview shells */
.bento-preview {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
}

.bento-preview--media,
.bento-preview--post,
.bento-preview--map,
.bento-preview--calendar {
  height: 240px;
}

.bento-preview--mini {
  height: 133px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Community live overlays */
.bento-preview--media .bento-live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--status-live);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.bento-live-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: #fff;
}

.bento-watching {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(26, 18, 12, 0.6);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.bento-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-reactions {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.bento-reaction-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 8px 10px;
}

.bento-reaction-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.bento-reaction-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-reaction-name {
  font-size: 13px;
  line-height: 18px;
  color: #e5e5e5;
  font-weight: 400;
  white-space: nowrap;
}

.bento-reaction-sub {
  font-size: 11px;
  line-height: 15px;
  color: #a3a3a3;
  white-space: nowrap;
}

/* Blog post preview */
.bento-preview--post {
  background: var(--surface-sunken);
  display: flex;
  flex-direction: column;
}

.bento-preview--post img {
  height: 120px;
  flex-shrink: 0;
}

.bento-post-meta {
  padding: 12px;
}

.bento-post-title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-heading);
}

.bento-post-sub {
  font-size: 12px;
  line-height: 17px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.bento-post-stats {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Mini previews */
.mini-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 32px);
  background: #fff;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-2xl);
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 13px;
  box-shadow: var(--shadow-xs);
}

.mini-msg svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.mini-communities {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.mini-avatar--add {
  background: var(--surface-elevated);
  border: 1px dashed var(--brand-primary);
  color: var(--brand-primary);
}

.mini-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: calc(100% - 32px);
  height: calc(100% - 24px);
}

.mini-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.bento-preview--qr {
  background: #fff;
}

.bento-preview--qr img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

/* Map preview */
.bento-preview--map {
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-preview--map img {
  object-fit: contain;
  padding: 12px;
}

.map-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  border: 3px solid var(--surface-elevated);
  box-shadow: 0 0 0 4px rgba(196, 113, 74, 0.2);
}

/* Calendar preview */
.bento-preview--calendar {
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-cal {
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px;
  width: 220px;
}

.mini-cal__head {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
}

.mini-cal__grid .dow {
  color: var(--text-muted);
  font-weight: 500;
}

.mini-cal__grid span {
  padding: 3px 0;
}

.mini-cal__grid .on {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-radius: var(--radius-full);
}

/* ---- Steps + Apply ---- */
.landing-apply {
  display: flex;
  gap: 100px;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

.landing-apply__left {
  flex: 0 0 683px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.landing-apply__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.5px;
  color: var(--text-heading);
}

.landing-apply__desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.landing-steps {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.landing-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.landing-step__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--brand-light);
  color: var(--brand-hover);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-step__text {
  font-size: 16px;
  line-height: 28px;
  color: var(--text-secondary);
}

.landing-step__text strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* Apply card */
.landing-card {
  flex: 0 0 561px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.landing-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.2px;
  color: var(--text-heading);
}

.landing-card__sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.landing-card__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  text-align: center;
}

/* Demo notice callout */
.demo-notice {
  display: flex;
  gap: 8px;
  background: var(--surface-brand-soft);
  border-radius: var(--radius-xl);
  padding: 12px;
}

.demo-notice__icon {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.demo-notice__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-brand);
}

.demo-notice__text {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Checkbox */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.checkbox-field__input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand-primary);
  flex-shrink: 0;
}

.checkbox-field__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
}

/* ---- Footer ---- */
.landing-footer-wrap {
  padding-top: 0;
  padding-bottom: 40px;
}

.landing-footer {
  background: #3a2014;
  border-radius: var(--radius-xl);
  padding: 76px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
}

.landing-footer__brand {
  max-width: 350px;
}

.landing-footer__logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  color: #fffcfa;
}

.landing-footer__tagline {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 252, 250, 0.7);
  margin-top: 24px;
}

.landing-footer__cols {
  display: flex;
  gap: 56px;
}

.landing-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-footer__heading {
  font-size: 16px;
  line-height: 24px;
  color: #fffcfa;
  font-weight: 500;
  margin-bottom: 8px;
}

.landing-footer__link {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 252, 250, 0.7);
  text-decoration: none;
}

.landing-footer__link:hover {
  color: #fffcfa;
}

/* ============================================================
   Template & brand-color selection (select-template.html)
   ============================================================ */
.template-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px;
  width: 100%;
}

.template-setup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.template-setup__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--text-heading);
}

.template-setup__subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
}

.template-swatches {
  display: flex;
  align-items: center;
  gap: 16px;
}

.template-swatch {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--swatch);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: box-shadow 120ms ease;
}

.template-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--swatch);
}

.template-gallery {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 1137px;
  align-items: stretch;
}

.template-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 0;
  background: var(--surface-elevated);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.template-card:nth-child(1) {
  flex: 378;
  min-width: 0;
}

.template-card--wide {
  flex: 754;
  min-width: 0;
}

.template-card img {
  display: block;
  width: 100%;
  height: auto;
}

.template-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(196, 113, 74, 0.18);
}

.template-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.template-hint svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* ============================================================
   "Keep the community active" payment card (community-page-setup.html)
   ============================================================ */
.form-card--payment {
  background: var(--surface-brand-soft);
  gap: 0;
}

.form-card--payment .form-card__actions {
  margin-top: 16px;
}

.payment-callout {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.payment-callout__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--brand-light);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-callout__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 445px;
  max-width: 100%;
  flex-shrink: 0;
}

.payment-callout__note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.payment-callout__illustration {
  flex-shrink: 0;
  width: 226px;
  height: 136px;
  object-fit: contain;
  align-self: flex-start;
  margin-left: auto;
}

.payment-methods {
  background: #ffffff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-method {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.payment-method__option .checkbox-field__input {
  margin-top: 5px;
}

.payment-method__icon {
  color: var(--text-primary);
  margin-top: 4px;
  flex-shrink: 0;
}

.payment-method__labels {
  display: flex;
  flex-direction: column;
}

.payment-method__name {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-heading);
}

.payment-method__desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}