:root {
  --uae-red: #d71921;
  --uae-green: #c9a227;
  --uae-white: #ffffff;
  --uae-black: #000000;
  --navy: #14060c;
  --navy-2: #221016;
  --navy-3: #2c161c;
  --ek-red: #d71921;
  --ek-red-deep: #9e1018;
  --gold: #c9a227;
  --gold-2: #e8c547;
  --sand: #f3e6c9;
  --cream: #fff8ec;
  --cream-fill: #fff8ec;
  --mute: #b8b0a4;
  --line: rgba(215, 25, 33, 0.35);
  --danger: #d71921;
  --ok: #c9a227;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --page-bg: #1a0610;
  --background: #1a0610;
  --surface: #14060c;
  --surface-secondary: #221016;
  --surface-elevated: #2c161c;
  --text-primary: #fff8ec;
  --text-secondary: rgba(var(--fg-rgb), 0.72);
  --text-muted: #b8b0a4;
  --border: rgba(215, 25, 33, 0.35);
  --accent: #c9a227;
  --accent-hover: #e8c547;
  --success: #34c759;
  --warning: #e8c547;
  --input-background: rgba(var(--fg-rgb), 0.06);
  --input-border: rgba(var(--fg-rgb), 0.12);
  --button-background: #d71921;
  --button-text: #ffffff;
  --overlay: rgba(10, 4, 8, 0.62);
  --fg-rgb: 255, 248, 236;
  --bg-rgb: 20, 6, 12;
  --nav-rgb: 16, 5, 10;
  --bg-deep-rgb: 12, 4, 8;
  --bg: var(--page-bg);
  --card-background: var(--surface);
  --card-foreground: var(--text-primary);
  --input-foreground: var(--text-primary);
  --placeholder: rgba(var(--fg-rgb), 0.55);
  --on-brand: #fff8ec;
  --on-fill: #1a0610;
  --link: var(--gold-2);
  --link-hover: var(--gold);
  --focus-ring: var(--gold);
  --primary: var(--button-background);
  --primary-foreground: var(--button-text);
  --secondary: var(--surface-secondary);
  --secondary-foreground: var(--text-primary);
  --success-foreground: #14060c;
  --warning: var(--gold-2);
  --warning-foreground: #14060c;
  --error: #ffb4b0;
  --error-foreground: #fff8ec;
  --disabled-foreground: rgba(var(--fg-rgb), 0.5);
  --radius: 20px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --text-hero: clamp(2rem, 6vw, 3.5rem);
  --text-title: clamp(1.5rem, 4vw, 2.25rem);
  --text-body: clamp(0.9375rem, 1.6vw, 1.0625rem);
  --text-small: 0.8125rem;
  --leading-tight: 1.08;
  --leading-body: 1.55;
  --tracking-display: -0.022em;
  --hp-kicker-size: 12px;
  --hp-kicker-weight: 500;
  --hp-kicker-tracking: 0.14em;
  --hp-display-weight: 600;
  --hp-display-tracking: -0.035em;
  --hp-display-leading: 1.06;
  --hp-hero-size: clamp(2.45rem, 10.5vw, 4.5rem);
  --hp-section-size: clamp(1.85rem, 6vw, 2.75rem);
  --hp-body-size: clamp(1.02rem, 2.6vw, 1.2rem);
  --hp-body-leading: 1.5;
  --hp-body-color: rgba(var(--fg-rgb), 0.72);
  --hp-measure: 34ch;
  --hp-section-space: 72px;
  --nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  --android-nav-min: 0px;
  --tab-bar-space: calc(88px + var(--nav-safe-bottom));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: -0.011em;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.4) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.38);
  border-radius: 999px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

img {
  max-width: 100%;
  display: block;
}

.stage {
  min-height: 100svh;
  min-height: 100dvh;
  height: 100%;
  display: block;
  padding: 0;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(206, 17, 38, 0.55), transparent 58%),
    radial-gradient(720px 420px at 92% 8%, rgba(160, 14, 30, 0.28), transparent 52%),
    radial-gradient(800px 480px at 80% 110%, rgba(201, 162, 39, 0.16), transparent 50%),
    var(--page-bg);
}

.device {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(206, 17, 38, 0.14), transparent 22%),
    var(--navy);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.device::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--ek-red) 0 62%, var(--gold) 62% 100%);
}

.screen {
  flex: 1;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 28px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.screen.has-nav {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.kicker {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
  line-height: 1.3;
}

.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h3 {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.logo-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
}

.logo-mark svg {
  width: 22px;
  height: 22px;
}

.welcome-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.welcome-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  order: 1;
  flex-shrink: 0;
}

.welcome-visual {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.welcome-screen .hero-art {
  height: auto;
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 220px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.welcome-quote {
  margin: 0 0 6px;
  flex-shrink: 0;
}

.welcome-copy {
  order: 4;
  flex-shrink: 0;
}

.welcome-copy .display {
  font-size: clamp(2rem, 8vw, 2.5rem);
  margin: 10px 0 12px;
}

.welcome-copy .tagline {
  margin: 0 0 14px;
  max-width: 22ch;
  font-size: clamp(15px, 3.6vw, 17px);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.welcome-copy .lede {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.lede-join {
  margin: 0 0 14px !important;
  max-width: 36ch;
  color: var(--sand);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

.welcome-screen .hero-foot {
  margin-top: 10px;
  font-size: 12px;
}

.welcome-screen .actions {
  margin-top: 12px;
  gap: 8px;
}

.welcome-screen .btn {
  min-height: 46px;
}

.hero {
  margin-top: auto;
  padding-top: 28px;
}

.hero h1 {
  font-size: var(--text-hero);
  margin: 16px 0 14px;
}

.tagline {
  color: var(--gold-2);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0 0 16px;
}

.lede {
  color: var(--sand);
  line-height: var(--leading-body);
  font-size: var(--text-body);
  max-width: 38ch;
}

.lede-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
}

.daily-quote {
  margin: 0 0 16px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--gold-2);
}

.daily-quote p {
  margin: 0;
  color: var(--gold-2);
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 20px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
  max-width: 28ch;
}

.hero-art {
  height: 280px;
  border-radius: 28px;
  margin-top: 18px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(10, 10, 10, 0.15), rgba(10, 10, 10, 0.72)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23610a10'/%3E%3Cstop offset='1' stop-color='%230a0a0a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23g)' width='800' height='600'/%3E%3Cpath d='M0 420 C180 360 280 500 800 380 L800 600 L0 600Z' fill='%23d71921' opacity='.22'/%3E%3Cpath d='M40 80 L760 140' stroke='%23c9a227' stroke-width='1.2' opacity='.55'/%3E%3Ccircle cx='620' cy='160' r='70' fill='none' stroke='%23e8c547' stroke-width='1' opacity='.45'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.chip-row {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  background: rgba(18, 8, 12, 0.78);
  border: 1px solid var(--line);
  color: var(--sand);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.btn {
  min-height: 52px;
  border-radius: 16px;
  padding: 0 16px;
  font-weight: 500;
  letter-spacing: -0.014em;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: scale(0.98);
}

.btn-gold {
  background: linear-gradient(180deg, #ef2a32, var(--ek-red-deep));
  color: #fff;
  box-shadow: 0 8px 20px rgba(215, 25, 33, 0.35);
}

.btn-gold:hover {
  background: var(--ek-red-deep);
}

.btn-ghost {
  background: var(--navy-2);
  border: 1px solid var(--line);
  color: var(--cream);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-2);
}

.btn-text {
  color: var(--mute);
  min-height: 40px;
  font-size: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
  border-color: rgba(206, 17, 38, 0.35);
  transform: translateY(-1px);
}

.form {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--mute);
}

input,
select,
textarea {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ek-red);
}

.pass-wrap {
  position: relative;
}

.pass-wrap .pass-input {
  width: 100%;
  padding-right: 72px;
  box-sizing: border-box;
}

.pass-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--gold, #c9a227);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  min-height: 0;
}

.airline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.airline {
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.airline:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 162, 39, 0.45);
}

.airline.on {
  border-color: var(--ek-red);
  background: #2a0d0f;
}

.airline b {
  display: block;
  font-size: 14px;
}

.airline span {
  color: var(--mute);
  font-size: 12px;
}

.note {
  color: var(--mute);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.proof-thumb {
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-top: 8px;
  display: block;
  object-fit: cover;
}

input[type="file"] {
  padding: 10px 12px;
  font-size: 13px;
}

.hero-foot {
  margin-top: 18px;
  max-width: 54ch;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--text-muted);
}

.price-card {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.price-card h2 {
  font-size: 36px;
  margin: 6px 0 4px;
}

.checks {
  display: grid;
  gap: 8px;
  margin: 14px 0 4px;
  color: var(--sand);
  font-size: 14px;
}

.home-dash {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.home-overview {
  max-width: 46ch;
  margin: -6px 0 20px;
  color: var(--hp-body-color);
  font-size: 0.98rem;
  line-height: 1.5;
}

.home-overview-phone {
  display: none;
}

.home-member-mark {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

.beta-note {
  margin: 0 0 24px;
  padding: 16px 16px 15px;
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-radius: 16px;
  background: rgba(34, 16, 22, 0.48);
}

.beta-note-mark {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.beta-note p + p,
.beta-note .beta-note-mark + p {
  margin: 0;
  max-width: 46ch;
  color: var(--hp-body-color);
  font-size: 0.92rem;
  line-height: 1.5;
}

.beta-note p + p {
  margin-top: 8px;
}

.dates-beta-note {
  margin: 12px 0 0;
  text-align: left;
}

.beta-demo-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 999px;
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meetup-open .beta-demo-badge {
  margin: 2px 0 10px;
}

.date-row-copy .beta-demo-badge,
.cal-act-copy .beta-demo-badge {
  margin-top: 6px;
  align-self: flex-start;
}

.meetup-hero .beta-demo-badge {
  margin-top: 10px;
}

.home-next {
  margin: 8px 0 36px;
  text-align: center;
}

.home-next-line,
.home-advice-title {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.home-next-line {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  margin: 6px 0 18px;
}

.home-next .dates-feed,
.home-next .date-row {
  max-width: none;
}

.home-next-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
}

.home-meetups-layout {
  display: grid;
  gap: 0;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 0.24s ease;
}

.feedback-modal.is-open {
  opacity: 1;
}

.feedback-modal-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 4, 8, 0.62);
}

.feedback-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px 24px 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  background: var(--navy);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: scale(0.97);
  transition: transform 0.26s ease;
}

.feedback-modal.is-open .feedback-modal-card {
  transform: scale(1);
}

.feedback-modal-card h2 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.feedback-modal-lede,
.feedback-modal-card p {
  color: var(--hp-body-color);
}

.feedback-field-label {
  margin: 18px 0 8px;
  color: var(--mute);
  font-size: 0.82rem;
}

.feedback-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-cats button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  background: transparent;
  color: var(--cream);
  font-size: 0.82rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.feedback-cats button.on,
.feedback-cats button:hover {
  border-color: rgba(232, 197, 71, 0.45);
  background: rgba(232, 197, 71, 0.1);
}

.feedback-modal-card textarea {
  min-height: 120px;
  resize: vertical;
}

.feedback-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.leave-meetup-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  animation: leave-modal-in 0.2s ease;
}

.leave-meetup-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 4, 8, 0.62);
}

.leave-meetup-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px 24px 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  background: var(--navy);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.leave-meetup-card h2 {
  margin: 8px 0 12px;
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.leave-meetup-card p {
  margin: 0 0 14px;
  color: var(--hp-body-color);
  font-size: 0.98rem;
  line-height: 1.5;
}

.leave-meetup-points {
  margin: 0 0 18px;
  padding: 0 0 0 18px;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.45;
}

.leave-meetup-points li + li {
  margin-top: 8px;
}

.leave-meetup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

@keyframes leave-modal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leave-meetup-modal {
    animation: none;
  }
}

.feedback-skel {
  display: grid;
  gap: 10px;
}

.feedback-skel span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.08);
}

.you-feedback-item {
  padding: 14px 0;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.you-feedback-item:first-of-type {
  border-top: 0;
}

.you-feedback-label {
  margin: 10px 0 4px;
  color: var(--gold-2);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feedback-admin-actions {
  flex-wrap: wrap;
}

@media (min-width: 980px) {
  .home-page .home-dash {
    max-width: 980px;
  }
}

.home-advice {
  margin: 8px 0 40px;
  text-align: center;
}

.home-advice-title {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  margin: 8px 0 12px;
}

.home-advice-lede {
  max-width: 42ch;
  margin: 0 auto 22px;
  color: var(--hp-body-color);
}

.advice-places {
  display: grid;
  gap: 16px;
  text-align: left;
}

.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.home-head h1 {
  font-size: var(--text-title);
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--uae-red);
  color: #fff;
}

.tabs {
  display: flex;
  gap: 6px;
  background: var(--navy-2);
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
}

.tabs button {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  color: var(--mute);
  font-size: 13px;
}

.tabs button.on {
  background: var(--ek-red);
  color: #fff;
}

.list {
  display: grid;
  gap: 10px;
}

.card {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  width: 100%;
}

.card h3 {
  font-size: 17px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 6px 0 8px;
}

.meta {
  color: var(--mute);
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.member {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.member .copy {
  flex: 1;
  text-align: left;
}

.member h3 {
  font-size: 16px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.016em;
  margin: 0 0 4px;
}

.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--gold);
}

.badge.guest {
  color: var(--sand);
}

.bottom-nav,
.tab-bar {
  display: none;
}

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  min-height: calc(56px + var(--nav-safe-bottom));
  padding: 6px 6px calc(10px + var(--nav-safe-bottom));
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
  background: rgba(var(--nav-rgb), 0.92);
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tab-bar[data-kind="member"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tab-bar[data-kind="member"] .tab-bar-item {
  padding: 8px 1px;
}

.tab-bar[data-kind="member"] .tab-bar-mark svg {
  width: 22px;
  height: 22px;
}

.tab-bar[data-kind="public"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tab-bar-item {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding: 8px 2px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--text-muted);
  transition: color 0.16s ease, background 0.16s ease;
}

.tab-bar-item.is-on {
  color: var(--cream);
}

.tab-bar-item.is-on::before {
  content: "";
  position: absolute;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 99px;
  background: var(--gold);
}

.tab-bar-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--gold);
}

.tab-bar-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.tab-bar-mark svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.tab-bar-item.is-on .tab-bar-mark svg {
  stroke: var(--gold);
}

.tab-bar-label {
  display: none;
}

.tab-bar-item .count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  max-width: 26px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--ek-red);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  overflow: hidden;
}

.tab-desk-hit,
.nav-cal-hit {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: rgba(var(--fg-rgb), 0.72);
  background: transparent;
  flex-shrink: 0;
}

.nav-cal-hit {
  display: inline-flex;
}

.nav-cal-hit svg,
.tab-desk-hit svg {
  width: 20px;
  height: 20px;
}

.nav-cal-hit.is-on,
.tab-desk-hit.is-on {
  color: var(--gold);
}

.tab-bar-you {
  min-width: 44px;
}

.tab-bar-face-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.tab-bar-you .tab-bar-face,
.tab-bar-you .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  font-size: 10px;
  line-height: 26px;
  text-align: center;
}

.tab-bar-you.is-on .tab-bar-face-wrap {
  box-shadow: 0 0 0 2px var(--gold);
}

.tab-bar-you.is-on::before {
  display: none;
}

.hp-you-hit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 14px;
}

.hp-you-hit.on {
  color: var(--gold);
}

.hp-you-face,
.hp-you-hit .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  font-size: 10px;
}

.you-staff-role {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tab-desk-hit svg {
  width: 18px;
  height: 18px;
}

.hp-notify-slot {
  margin-left: auto;
}

.rsvp {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.rsvp .btn {
  flex: 1;
}

.rsvp .btn.on {
  background: linear-gradient(180deg, #e8c547, #c9a227);
  color: #3a2208;
  border-color: var(--gold);
}

.thread {
  display: grid;
  gap: 12px;
}

.post {
  background: var(--navy-2);
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
}

.post p {
  margin-top: 6px;
  line-height: 1.5;
  color: var(--sand);
  font-size: 14px;
}

.composer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.composer input {
  flex: 1;
}

.toast {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 92px;
  background: var(--ek-red);
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.012em;
  animation: pop 0.25s ease;
}

@keyframes pop {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}

.gate-lock {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed var(--line);
  color: var(--mute);
  font-size: 14px;
  line-height: 1.45;
}

.err {
  color: var(--error);
  font-size: 13px;
}

.search {
  width: 100%;
  margin-bottom: 12px;
}

.fab-row {
  display: flex;
  gap: 8px;
  margin: 4px 0 12px;
}

.filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.filter-row button {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--navy-2);
  color: var(--mute);
  font-size: 12px;
}

.filter-row button.on {
  background: var(--ek-red);
  color: #fff;
  border-color: var(--ek-red);
}

.rsvp-note {
  margin-top: 10px;
  color: var(--gold-2);
  font-size: 13px;
}

.chat-entry {
  text-align: left;
  width: 100%;
  margin-bottom: 12px;
}

.tile-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tile-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(206, 17, 38, 0.08);
  color: var(--uae-red);
  display: grid;
  place-items: center;
}

.tile-ico svg {
  width: 22px;
  height: 22px;
}

.tile-ico.green {
  background: rgba(201, 162, 39, 0.14);
  color: var(--gold-2);
}

.tile-copy {
  min-width: 0;
  flex: 1;
}

.section-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.section-tile {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: var(--cream);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.section-tile:hover,
.section-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
  border-color: rgba(232, 197, 71, 0.5);
  outline: none;
}

.section-tile.on {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.16);
  box-shadow: 0 10px 24px rgba(201, 162, 39, 0.2);
}

.section-tile .tile-ico {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 12px;
}

.section-name {
  font-size: 13px;
  font-weight: 600;
}

.section-desc {
  font-size: 11px;
  color: var(--mute);
  line-height: 1.3;
}

@media (max-width: 380px) {
  .section-desc {
    display: none;
  }
}

.online-panel {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px 4px;
  margin-bottom: 10px;
}

.online-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.chat-screen {
  overflow: hidden;
}

.coming-soon {
  margin-top: 8px;
  padding: 22px 18px;
}

.coming-soon h3 {
  margin-top: 12px;
}

.chat-screen .chat-log {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.chat-dock {
  margin-top: 8px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.meetup-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 4px 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}

.meetup-filters::-webkit-scrollbar {
  display: none;
}

.meetup-filters button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: rgba(var(--fg-rgb), 0.05);
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.meetup-filters button:hover {
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.08);
}

.meetup-filters button.on {
  color: #1a0a0e;
  background: var(--cream-fill);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.meetup-filters button:active {
  transform: scale(0.98);
}

.meetup-panel {
  min-height: 120px;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.meetup-panel.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.meetup-panel.is-in {
  opacity: 1;
  transform: none;
}

.meetup-list {
  display: grid;
  gap: 14px;
}

.meetup-card {
  padding: 0 0 14px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(var(--fg-rgb), 0.045);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(var(--fg-rgb), 0.06);
  border-bottom: 0;
  transition: background 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.meetup-card.is-mine {
  border-color: rgba(232, 197, 71, 0.18);
}

.meetup-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meetup-card-ico {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.24s ease;
}

.meetup-card-when {
  margin: 0 0 8px;
  color: var(--cream);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.meetup-card-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--hp-body-color);
  font-size: 0.95rem;
  line-height: 1.35;
}

.meetup-card-line span[aria-hidden="true"] {
  font-size: 0.92rem;
  line-height: 1;
}

.meetup-card-spark {
  margin: 10px 0 0;
  color: var(--gold-2);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

@media (hover: hover) and (pointer: fine) {
  .meetup-card:hover {
    background: rgba(var(--fg-rgb), 0.07);
    border-color: rgba(var(--fg-rgb), 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  }

  .meetup-card:hover .meetup-card-photo-zoom {
    transform: scale(1.12);
  }
}

.meetup-empty {
  padding: 28px 8px 12px;
  color: var(--hp-body-color);
  max-width: 34ch;
}

.meetup-empty p:first-child {
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.meetup-empty p + p {
  margin-top: 8px;
}

.meetup-empty .btn {
  margin-top: 16px;
}

.meetup-skel {
  display: grid;
  gap: 12px;
}

.meetup-skel span {
  display: block;
  height: 108px;
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.04), rgba(var(--fg-rgb), 0.09), rgba(var(--fg-rgb), 0.04));
  background-size: 180% 100%;
  animation: disc-shimmer 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .meetup-panel,
  .meetup-skel span,
  .meetup-card,
  .meetup-card-ico,
  .meetup-card-photo-zoom,
  .meetup-cover-zoom,
  .cal-act-photo-zoom,
  .hp-event-photo-zoom,
  .meetup-gallery-zoom,
  .meetup-actions .btn {
    transition: none;
    animation: none;
    transform: none;
  }
}

.meetup-open {
  display: block;
  width: 100%;
  padding: 0 16px 2px;
  text-align: left;
  background: none;
}

.meetup-open h3,
.meetup-card-title {
  margin: 10px 0 8px;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
}

.meetup-card-blurb {
  display: none;
}

.meetup-full-mark {
  display: none;
}

.meetup-blurb {
  margin: 10px 0 0;
  max-width: 48ch;
  color: var(--hp-body-color);
  font-size: 0.98rem;
  line-height: 1.5;
}

.meetup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 0 16px;
}

.meetup-actions .btn {
  min-height: 44px;
  min-width: 108px;
  padding: 0 18px;
  font-size: 14px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.meetup-actions .btn-gold {
  flex: 1 1 148px;
}

.meetup-actions .btn-gold.on {
  box-shadow: 0 8px 20px rgba(215, 25, 33, 0.28);
}

.meetup-detail-page > .meetup-detail {
  width: min(680px, 100%);
}

.meetup-detail {
  padding-bottom: 28px;
}

.meetup-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: 20px 0 8px;
  padding: 0;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  transition: color 0.2s ease;
}

.meetup-back svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.meetup-guest-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px max(16px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
}

.meetup-guest-nav .hp-join {
  display: inline-flex !important;
  align-items: center;
  margin-left: auto;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.meetup-back:hover,
.meetup-back:focus-visible {
  color: var(--cream);
}

.meetup-hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.meetup-hero .display {
  margin: 4px 0 16px;
  font-size: clamp(1.85rem, 5.4vw, 2.7rem);
  line-height: 1.08;
}

.meetup-loc-venue,
.meetup-loc-city {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.meetup-loc-venue {
  color: var(--cream);
  font-size: 1.05rem;
  font-weight: 500;
}

.meetup-loc-city {
  margin-top: 6px;
  padding-left: 26px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.meetup-pin {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--gold);
}

.meetup-facts {
  display: grid;
  gap: 0;
}

.meetup-fact {
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.meetup-label {
  margin: 0 0 8px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.meetup-fact-main {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  letter-spacing: -0.02em;
}

.meetup-fact-sub {
  margin: 6px 0 0;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 1rem;
  line-height: 1.45;
}

.meetup-about,
.meetup-map,
.meetup-host,
.meetup-know {
  padding: 24px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.meetup-about p,
.meetup-know p,
.meetup-map-copy {
  margin: 0 0 10px;
  max-width: 42ch;
  color: var(--hp-body-color);
  font-size: 1.02rem;
  line-height: 1.6;
}

.meetup-about p:last-child,
.meetup-know p:last-child {
  margin-bottom: 0;
}

.meetup-directions {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.meetup-directions:hover,
.meetup-directions:focus-visible {
  color: var(--cream);
}

.meetup-host-row {
  display: grid;
  gap: 18px;
}

.meetup-host-role {
  margin: 0 0 8px;
  color: var(--gold-2);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cal-month-empty {
  margin: 12px 0 18px;
}

.meetup-host-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0;
  color: var(--cream);
  font-size: 1.05rem;
  background: none;
}

.meetup-host-card.is-static {
  pointer-events: none;
}

.meetup-host-card:hover,
.meetup-host-card:focus-visible {
  color: var(--gold);
}

.meetup-going {
  margin: 20px 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.meetup-join-bar {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  position: static;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.meetup-join-bar .gate-lock {
  margin: 0;
}

.meetup-share {
  flex: 0 0 auto;
  min-width: 92px;
}

.meetup-join-bar .meetup-share {
  width: 100%;
}

.meetup-join,
.meetup-maybe {
  width: 100%;
  min-height: 48px;
}

.meetup-card-seats.is-full {
  color: var(--gold-2);
}

.meetup-card-seats.is-hot {
  color: var(--gold-2);
}

.meetup-seat-line {
  margin: 0 0 8px;
  color: var(--cream);
  font-size: 0.98rem;
}

.meetup-join.is-full {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(var(--fg-rgb), 0.2);
  box-shadow: none;
  opacity: 0.9;
}

.meetup-organizer {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.meetup-organizer label {
  color: var(--cream);
}

.meetup-organizer select {
  width: 100%;
  min-height: 48px;
  background-color: var(--input-background);
  color: var(--input-foreground);
  color-scheme: inherit;
}

.meetup-organizer select option {
  background-color: var(--surface);
  color: var(--input-foreground);
}

.meetup-organizer .meetup-actions {
  display: grid;
  gap: 8px;
}

.meetup-request-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.meetup-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.meetup-request-row .btn {
  flex: 0 0 auto;
  min-height: 40px;
}

@media (min-width: 700px) {
  .meetup-facts {
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
  }

  .meetup-fact-wide {
    grid-column: 1 / -1;
  }

  .meetup-join-bar {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .meetup-join-bar .err,
  .meetup-join-bar .rsvp-note,
  .meetup-join-bar .meetup-seat-line,
  .meetup-join-bar [data-go="chat"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 699px) {
  .meetup-hero {
    text-align: left;
    padding: 4px 0 20px;
  }

  .meetup-hero .display {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .meetup-detail-page.screen.has-nav {
    padding: 0 0 calc(var(--tab-bar-space) + 148px);
  }

  .meetup-detail-page > .meetup-detail {
    width: 100%;
    max-width: none;
    padding: 0 0 8px;
  }

  .meetup-detail-page .meetup-back,
  .meetup-detail-page .meetup-hero,
  .meetup-detail-page .meetup-facts,
  .meetup-detail-page .meetup-about,
  .meetup-detail-page .meetup-map,
  .meetup-detail-page .meetup-host,
  .meetup-detail-page .meetup-know,
  .meetup-detail-page .meetup-going,
  .meetup-detail-page .meetup-gallery,
  .meetup-detail-page .meetup-organizer,
  .meetup-detail-page .meetup-photos,
  .meetup-detail-page .meetup-staff-delete {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .meetup-detail-page .meetup-cover {
    margin: 0 0 12px;
    border-radius: 0;
    width: 100%;
    max-width: none;
    max-height: min(42vh, 280px);
  }

  .meetup-detail-page .meetup-cover.has-photo,
  .meetup-detail-page .meetup-cover-zoom,
  .meetup-detail-page .meetup-cover img {
    width: 100%;
  }

  .meetup-detail-page .meetup-back {
    margin: 8px 0 0;
  }

  .meetup-join-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tab-bar-space);
    z-index: 36;
    margin: 0;
    padding: 14px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), 0.94) 22%, rgba(var(--nav-rgb), 0.98));
    box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.28);
    grid-template-columns: 1fr;
  }

  .meetup-join,
  .meetup-maybe,
  .meetup-join-bar [data-go="chat"],
  .meetup-join-bar .btn {
    width: 100%;
    min-height: 52px;
  }

  .meetup-join-guest-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .meetup-join-guest-row .btn {
    min-height: 48px;
  }

  .meetup-detail-page.screen.has-nav:not(:has(.tab-bar)) {
    padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }

  .meetup-detail-page:not(:has(.tab-bar)) .meetup-join-bar {
    bottom: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }

  html.kb-open .meetup-join-bar {
    transform: translateY(120%);
    pointer-events: none;
    opacity: 0;
  }
}

.meetup-card-photo {
  position: relative;
  display: block;
  margin: 0 -16px 14px;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  width: calc(100% + 32px);
  max-height: none;
  background: rgba(var(--bg-rgb), 0.35);
}

.meetup-card-photo-zoom {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.04);
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}

.meetup-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

@media (min-width: 700px) {
  .meetup-card-photo {
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }
}

@media (min-width: 900px) {
  .meetup-card-photo {
    min-height: 240px;
  }

  .meetup-cover.has-photo {
    max-height: 360px;
  }
}

@media (max-width: 699px) {
  .meetup-card-photo {
    aspect-ratio: 16 / 9;
    min-height: 168px;
    max-height: 200px;
  }
}

@media (max-width: 430px) {
  .meetup-actions {
    margin-top: 12px;
  }
}

.meetup-cover {
  position: relative;
  margin: 8px 0 18px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.meetup-cover.has-photo {
  aspect-ratio: 16 / 9;
  max-height: 280px;
}

.meetup-cover-zoom {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.04);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  will-change: transform;
}

.meetup-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .meetup-cover.has-photo:hover .meetup-cover-zoom {
    transform: scale(1.12);
  }
}

.meetup-cover.is-placeholder {
  min-height: 148px;
  aspect-ratio: 16 / 9;
}

.meetup-cover-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(232, 197, 71, 0.18), transparent 55%),
    linear-gradient(165deg, rgba(215, 25, 33, 0.28), rgba(18, 6, 12, 0.92));
}

.meetup-cover-place {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 28px 22px;
  color: rgba(var(--fg-rgb), 0.78);
  font-family: var(--display);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  letter-spacing: -0.02em;
}

.meetup-hero {
  border-bottom: 0;
  padding-bottom: 8px;
}

.meetup-gallery {
  padding: 24px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.meetup-gallery-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -4px;
  padding: 4px;
}

.meetup-gallery-track::-webkit-scrollbar {
  display: none;
}

.meetup-gallery-slide {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  width: min(78vw, 420px);
  scroll-snap-align: start;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
}

.meetup-gallery-zoom {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.04);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  will-change: transform;
}

.meetup-gallery-slide img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .meetup-gallery-slide:hover .meetup-gallery-zoom {
    transform: scale(1.12);
  }
}

.meetup-photos {
  margin: 8px 0 18px;
  padding: 18px 0 4px;
}

.meetup-photos-edit {
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  display: grid;
  gap: 10px;
}

.meetup-photos-kicker {
  margin: 0 0 6px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.meetup-photo-cover {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 168px;
  background: rgba(var(--fg-rgb), 0.04);
}

.meetup-photo-cover img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.meetup-photo-empty {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 168px;
  padding: 22px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(232, 197, 71, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.04), rgba(var(--fg-rgb), 0.02));
}

.meetup-photo-empty strong {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
}

.meetup-photo-empty span,
.meetup-photo-progress {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.meetup-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.meetup-photo-pick,
.meetup-photo-add,
.meetup-photo-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.meetup-photo-pick,
.meetup-photo-add {
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--cream);
}

.meetup-photo-remove {
  background: none;
  color: var(--text-secondary);
}

.meetup-photo-pick input,
.meetup-photo-add input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.meetup-photo-extra {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.meetup-photo-thumb {
  flex: 0 0 auto;
  width: 120px;
  scroll-snap-align: start;
}

.meetup-photo-thumb img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.meetup-photo-thumb .meetup-photo-remove {
  width: 100%;
  min-height: 32px;
  padding: 0;
  font-size: 12px;
}

.crew-intro {
  margin: 0 0 16px;
  max-width: 42ch;
}

.crew-page > .crew-wrap,
.crew-profile-page > .crew-profile,
.crew-profile-page > .cp-wrap {
  width: min(720px, calc(100% - 44px));
}

.crew-head {
  padding: 8px 0 6px;
}

.crew-head-back {
  margin: 0 0 8px -8px;
}

.crew-lede {
  margin: 10px 0 0;
  max-width: 34ch;
  color: rgba(var(--fg-rgb), 0.62);
}

.crew-stats {
  margin: 22px 0 0;
}

.crew-stats .hp-kicker {
  margin: 0 0 12px;
}

.crew-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.crew-stat {
  min-width: 0;
  padding: 12px 10px 11px;
  text-align: center;
  background: rgba(var(--fg-rgb), 0.045);
  border: 1px solid rgba(var(--fg-rgb), 0.06);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.crew-stat-icon {
  margin: 0;
  font-size: 13px;
  line-height: 1;
}

.crew-stat-value {
  margin: 8px 0 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.crew-stat-label {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
}

@media (max-width: 380px) {
  .crew-stats-grid {
    gap: 6px;
  }

  .crew-stat {
    padding: 10px 6px 9px;
    border-radius: 14px;
  }

  .crew-stat-value {
    font-size: 1.18rem;
  }

  .crew-stat-label {
    letter-spacing: 0.04em;
    font-size: 0.56rem;
  }
}

.crew-search {
  display: block;
  margin: 22px 0 8px;
}

.crew-lists {
  display: grid;
  gap: 40px;
  margin-top: 18px;
  padding-bottom: 28px;
}

.crew-section .hp-kicker {
  margin-bottom: 16px;
}

.crew-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.crew-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 18px;
  text-align: left;
  background: rgba(var(--fg-rgb), 0.035);
  border: 0;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.crew-card:hover,
.crew-card:focus-visible {
  background: rgba(var(--fg-rgb), 0.055);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}

.crew-card:active {
  transform: scale(0.99);
}

.crew-card,
.crew-list,
.crew-wrap {
  touch-action: pan-y;
}

.crew-wrap,
.crew-profile-page > .crew-profile,
.crew-profile-page > .cp-wrap {
  flex: 0 0 auto;
  min-height: min-content;
}

.crew-profile-page > .crew-profile,
.crew-profile-page > .cp-wrap {
  overflow-x: hidden;
}

@media (max-width: 899px) {
  html:has(.crew-page),
  body:has(.crew-page),
  html:has(.crew-profile-page),
  body:has(.crew-profile-page) {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  .stage:has(.crew-page),
  .stage:has(.crew-profile-page),
  .device:has(.crew-page),
  .device:has(.crew-profile-page) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .screen.crew-page,
  .screen.crew-profile-page {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    flex: none;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 900px) {
  .screen.crew-page.has-nav,
  .screen.crew-profile-page.has-nav {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

.crew-card-photo,
.crew-photo {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

img.crew-card-photo,
img.crew-photo {
  display: block;
  background: rgba(var(--fg-rgb), 0.08);
}

.crew-card-photo {
  width: 72px;
  height: 72px;
  border: 0;
  background: linear-gradient(160deg, rgba(232, 197, 71, 0.16), rgba(var(--fg-rgb), 0.06));
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.crew-card-copy {
  min-width: 0;
  padding-top: 2px;
}

.crew-card-name {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  overflow-wrap: anywhere;
}

.crew-card-airline {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.crew-card-msn,
.you-msn,
.cp-card-msn {
  margin: 6px 0 0;
}

button.msn-access-mark {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

button.msn-access-mark.is-go:hover,
button.msn-access-mark.is-go:focus-visible {
  color: var(--gold);
}

.msn-access-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 1px;
  flex: none;
}

.msn-access-mark.is-labeled {
  margin-left: 0;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 13px;
}

.msn-access-mark-icon {
  font-size: 14px;
  line-height: 1;
  filter: grayscale(0.15);
}

.msn-access-mark-copy {
  letter-spacing: 0.02em;
}

.crew-card-name .msn-access-mark,
.desk-card-name .msn-access-mark {
  margin-left: 5px;
}

.crew-verified {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--gold);
  flex: none;
  vertical-align: -1px;
  opacity: 0.92;
}

.crew-verified svg {
  display: block;
  width: 100%;
  height: 100%;
}

.crew-profile-name .crew-verified {
  margin-left: 8px;
  width: 18px;
  height: 18px;
}

.founding-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.78em;
  line-height: 1;
  flex: none;
  opacity: 0.92;
}

.founding-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.founding-line .founding-mark {
  font-size: 0.95em;
  letter-spacing: 0;
}

.you-identity .founding-line {
  margin: -2px 0 12px;
}

.crew-profile-roleline {
  margin: 0 0 14px;
}

.crew-card-bio {
  margin: 10px 0 0;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 0.95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crew-empty {
  padding: 18px 4px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.crew-profile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 0 36px;
  text-align: left;
  min-width: 0;
}

.crew-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: 0 0 4px -10px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.crew-profile > .crew-back {
  align-self: flex-start;
}

.crew-back svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.crew-back:hover,
.crew-back:focus-visible {
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.06);
}

.crew-back:active {
  transform: scale(0.98);
}

.crew-profile-head,
.cp-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 10px 0 0;
}

.crew-profile-photo,
.cp-card-photo {
  flex-shrink: 0;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0;
}

.crew-profile-avatar,
.cp-card-photo img,
.cp-card-empty {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  border: 1px solid rgba(232, 197, 71, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  background: linear-gradient(160deg, rgba(232, 197, 71, 0.18), rgba(var(--fg-rgb), 0.06));
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.cp-card-photo img,
.crew-profile-avatar {
  display: block;
}

.cp-card-empty,
.crew-profile-avatar.is-fallback {
  display: grid;
  place-items: center;
}

.crew-profile-id,
.cp-card-id {
  min-width: 0;
  flex: 1;
}

.crew-profile-name,
.cp-card-id h2,
.cp-card-body h2 {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 5vw, 2rem);
  line-height: 1.08;
  color: var(--cream);
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crew-profile-airline,
.cp-card-sub {
  margin: 0;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 0.98rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.crew-profile-bio,
.cp-card-bio {
  margin: 0 0 14px;
  max-width: 42ch;
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 1.55;
}

.cp-card-about .cp-card-bio.is-empty,
.crew-profile-bio.is-empty {
  color: var(--text-muted);
}

.cp-card-aboutmore,
.cp-card-clubdo-lead,
.cp-card-clubdo-copy {
  margin: 0 0 10px;
  max-width: 46ch;
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 0.98rem;
  line-height: 1.5;
}

.cp-card-clubdo-lead {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.crew-profile-bio {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.045);
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.crew-profile-bio.is-empty {
  color: var(--text-muted);
}

.crew-profile-about {
  margin: 18px 0 0;
  padding: 16px 18px 8px;
  max-width: 100%;
  text-align: left;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.045);
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.crew-profile-label,
.cp-card-sec .hp-kicker {
  margin: 0 0 12px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crew-profile-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
}

.crew-profile-row:last-child {
  border-bottom: 0;
}

.crew-profile-row-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  flex: 0 1 auto;
}

.crew-profile-row-value {
  margin: 0;
  color: var(--cream);
  font-size: 0.98rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crew-profile .profile-edit {
  text-align: left;
  max-width: 420px;
  margin: 28px auto 0;
}

@media (max-width: 380px) {
  .crew-profile-head,
  .cp-card-head {
    gap: 12px;
  }

  .crew-profile-photo,
  .cp-card-photo,
  .crew-profile-avatar,
  .cp-card-photo img,
  .cp-card-empty {
    width: 72px;
    height: 72px;
  }

  .crew-profile-bio,
  .crew-profile-about,
  .cp-card {
    padding-left: 14px;
    padding-right: 14px;
  }
}

.profile-photo {
  width: 88px;
}

@media (min-width: 700px) {
  .crew-list {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crew-card,
  .crew-card:hover,
  .crew-card:active {
    transition: none;
    transform: none;
  }
}

.directory-form {
  margin-top: 8px;
}

.privacy-line {
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}

.online-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--navy-3);
  font-size: 12px;
  white-space: nowrap;
}

.online-panel .online-pill {
  background: rgba(8, 6, 6, 0.55);
  border: 1px solid var(--line);
}

#club-calendar {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#club-calendar.is-out {
  opacity: 0;
  transform: translateY(8px);
}

#club-calendar.is-in {
  opacity: 1;
  transform: none;
}

.cal-board {
  background: transparent;
  color: var(--cream);
  border: 0;
  border-radius: 0;
  padding: 0;
}

.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-week span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 0 8px;
}

.cal-pad {
  min-height: 0;
}

.cal-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 8px 6px 8px;
  overflow: hidden;
  background: rgba(var(--fg-rgb), 0.035);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 14px;
  color: inherit;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cal-tile.is-busy {
  background: rgba(201, 162, 39, 0.08);
  border-color: rgba(201, 162, 39, 0.22);
}

.cal-tile.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.45);
}

.cal-tile.is-selected {
  background: rgba(201, 162, 39, 0.16);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.cal-tile:active {
  transform: scale(0.98);
}

.cal-num {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
}

.cal-tile.is-today .cal-num {
  color: var(--gold-2);
}

.cal-tile-ico {
  font-size: 13px;
  line-height: 1;
}

.cal-tile-label,
.cal-tile-multi {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: rgba(var(--fg-rgb), 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-tile-multi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold-2);
}

.cal-tile-count::after {
  content: " activities";
}

.cal-tile-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
  flex: 0 0 auto;
}

.cal-skel-dot {
  width: 14px;
  height: 6px;
  border-radius: 99px;
  background: rgba(var(--fg-rgb), 0.08);
}

.cal-tile:focus-visible,
.cal-nav-btn:focus-visible,
.cal-today-btn:focus-visible,
.cal-act:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .cal-tile {
    min-height: 92px;
    padding: 10px 10px 12px;
    gap: 6px;
    border-radius: 16px;
  }

  .cal-num {
    font-size: 1.15rem;
  }

  .cal-tile-ico {
    font-size: 16px;
  }

  .cal-tile-label,
  .cal-tile-multi {
    font-size: 12px;
  }
}

.cal-act-list {
  display: grid;
  gap: 10px;
}

.cal-act {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  width: 100%;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(34, 16, 22, 0.72);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  color: inherit;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cal-act.has-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0 0 14px;
  overflow: hidden;
  align-items: stretch;
  isolation: isolate;
}

.cal-act-photo {
  position: relative;
  display: block;
  grid-row: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  background: rgba(var(--fg-rgb), 0.06);
  pointer-events: auto;
}

.cal-act-photo-zoom {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.04);
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}

.cal-act.has-photo .cal-act-photo {
  grid-column: 1;
  margin: 0 0 12px;
}

.cal-act.has-photo .cal-act-copy,
.cal-act.has-photo .cal-act-go {
  grid-column: 1;
  padding: 0 16px;
}

.cal-act.has-photo .cal-act-go {
  margin-top: 8px;
}

@media (max-width: 699px) {
  .cal-act.has-photo .cal-act-photo {
    max-height: 188px;
  }
}

@media (min-width: 700px) {
  .cal-act.has-photo .cal-act-photo {
    min-height: 180px;
  }
}

@media (min-width: 900px) {
  .cal-act.has-photo .cal-act-photo {
    min-height: 220px;
  }
}

.cal-act-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

.cal-act:hover {
  border-color: rgba(201, 162, 39, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .cal-act.has-photo:hover {
    background: rgba(var(--fg-rgb), 0.07);
    border-color: rgba(var(--fg-rgb), 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  }

  .cal-act.has-photo:hover .cal-act-photo-zoom {
    transform: scale(1.12);
  }
}

.cal-act.is-over {
  opacity: 0.68;
}

.cal-act-ico {
  grid-row: 1 / span 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(201, 162, 39, 0.12);
  font-size: 18px;
}

.cal-act-ico.is-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.cal-act-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cal-act-title {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.cal-act-meta {
  font-size: 0.92rem;
  color: var(--hp-body-color);
}

.cal-act-go {
  grid-column: 2;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.cal-act-skel {
  display: grid;
  gap: 10px;
}

.cal-act-skel span {
  display: block;
  height: 84px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.04), rgba(var(--fg-rgb), 0.09), rgba(var(--fg-rgb), 0.04));
  background-size: 180% 100%;
  animation: disc-shimmer 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #club-calendar,
  .cal-tile,
  .cal-act,
  .cal-act-skel span {
    transition: none;
    animation: none;
    transform: none;
  }
}

.dates-page {
  align-items: stretch;
}

.dates-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.dates-hero {
  text-align: center;
  margin-bottom: 28px;
  padding-top: 8px;
}

.dates-hero .display {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 14px;
}

.dates-hero .kicker {
  margin-bottom: 8px;
}

.dates-hero .beta-note {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.dates-lede {
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--hp-body-color);
}

.dates-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 22px;
}

.dates-split article {
  text-align: center;
  padding: 16px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 16px;
  background: rgba(34, 16, 22, 0.45);
}

.dates-split p {
  color: var(--hp-body-color);
  font-size: 0.95rem;
}

.dates-split-where {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.meetup-scope {
  text-align: center;
  margin: 0 0 16px;
  padding: 16px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 16px;
  background: rgba(34, 16, 22, 0.4);
}

.meetup-scope-lede {
  margin: 6px 0 8px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.meetup-scope-copy {
  margin: 0 auto 10px;
  max-width: 38ch;
  color: var(--hp-body-color);
  font-size: 0.95rem;
  line-height: 1.45;
}

.meetup-scope-where,
.advice-kind {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.advice-kind {
  margin-bottom: 8px;
}

.dates-cal-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cal-nav-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 12px;
  color: var(--cream);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cal-nav-btn:first-child {
  justify-self: start;
}

.cal-nav-btn:last-child {
  justify-self: end;
}

.cal-nav-btn:hover,
.cal-nav-btn:focus-visible {
  color: var(--gold-2);
  border-color: rgba(201, 162, 39, 0.4);
}

.cal-nav-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.cal-window-nav {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  margin-bottom: 8px;
}

.cal-window-months {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.cal-window-month {
  flex: 1 1 0;
  min-height: 44px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
}

.cal-window-month span {
  display: block;
  margin-top: 2px;
  color: var(--gold, #d6ae34);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-window-month.on {
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(214, 174, 52, 0.12);
}

.cal-window-label {
  text-align: center;
  margin: 0 0 10px;
}

.archive-month-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 22px;
}

.archive-month {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  background: rgba(var(--fg-rgb), 0.04);
  color: inherit;
  font-weight: 700;
}

.archive-month span {
  color: var(--muted);
  font-weight: 650;
}

.archive-month.on {
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(214, 174, 52, 0.12);
}

.cal-nav-short {
  display: none;
  font-size: 22px;
  line-height: 1;
}

.cal-month {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cream);
  text-align: center;
}

.cal-year {
  font-weight: 500;
  color: var(--text-muted);
}

.cal-today-row {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.cal-today-btn {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cal-today-btn.on,
.cal-today-btn:hover,
.cal-today-btn:focus-visible {
  border-color: var(--gold);
  color: var(--gold-2);
}

.cal-day-panel {
  margin-top: 36px;
}

.cal-selected-title {
  margin: 6px 0 18px;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: -0.03em;
  color: var(--cream);
}

.dates-empty-card {
  padding: 22px 8px 8px;
  text-align: center;
}

.dates-empty-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--cream);
}

.dates-empty-copy {
  margin: 0;
  color: var(--hp-body-color);
}

.dates-empty-card .btn {
  margin-top: 16px;
}

.date-row-day {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.dates-activities {
  margin-top: 48px;
  text-align: center;
}

.dates-upcoming-kicker {
  margin-bottom: 10px;
}

.dates-upcoming-line {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0 0 32px;
}

.dates-subhead {
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  margin: 6px 0 18px;
}

.dates-feed {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.date-row {
  display: grid;
  grid-template-columns: minmax(7.25rem, 8.75rem) 18px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  width: 100%;
  padding: 28px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.date-row:first-child {
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
}

.date-row:hover {
  background: rgba(var(--fg-rgb), 0.03);
}

.date-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.date-row.is-over {
  opacity: 0.62;
}

.date-row.is-today .date-time,
.date-row.is-next .date-time {
  color: var(--gold-2);
}

.date-row-time {
  display: block;
  padding-top: 2px;
}

.date-time {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--cream);
}

.date-row-rail {
  position: relative;
  display: block;
  height: 100%;
  min-height: 100%;
  justify-self: center;
}

.date-row-rail::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.12);
}

.date-row-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-bottom: 2px;
}

.date-row-title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--cream);
}

.date-row-loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--sand);
}

.date-row-pin {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.85;
}

.date-row-blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 44ch;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--hp-body-color);
}

.date-row-go {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
  transition: letter-spacing 0.2s ease, color 0.2s ease;
}

.date-row:hover .date-row-go,
.date-row:focus-visible .date-row-go {
  letter-spacing: 0.16em;
}

.dates-empty,
.dates-foot {
  margin-top: 16px;
  text-align: center;
}

.advice-place {
  text-align: left;
  margin: 0;
  padding: 22px 18px 18px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 16px;
  background: rgba(34, 16, 22, 0.35);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.advice-place:hover {
  border-color: rgba(232, 197, 71, 0.28);
  background: rgba(34, 16, 22, 0.5);
}

.advice-city {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}

.advice-country {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.advice-cats {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.advice-cat,
.advice-more {
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 14px;
  background: rgba(8, 6, 6, 0.28);
}

.advice-cat summary,
.advice-more summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 15px;
}

.advice-cat summary::-webkit-details-marker,
.advice-more summary::-webkit-details-marker {
  display: none;
}

.advice-cat-icon {
  width: 1.4em;
  text-align: center;
}

.advice-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--mute);
}

.advice-items {
  display: grid;
  gap: 10px;
  padding: 0 12px 14px;
}

.advice-card {
  padding: 12px 4px 4px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.06);
}

.advice-card h4 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.advice-area,
.advice-tags,
.advice-note,
.advice-extra {
  font-size: 13px;
  line-height: 1.45;
}

.advice-area {
  color: var(--sand);
}

.advice-tags {
  color: var(--gold-2);
  margin: 2px 0 6px;
}

.advice-note,
.advice-extra {
  color: var(--mute);
}

.advice-more {
  border: 0;
  background: transparent;
}

.advice-more summary {
  justify-content: center;
  color: var(--gold-2);
  min-height: 40px;
  padding: 6px;
}

.dates-place-fields {
  display: grid;
  gap: 12px;
}

@media (min-width: 700px) {
  .advice-places {
    grid-template-columns: 1fr 1fr;
  }

  .dates-place-fields {
    grid-template-columns: 1fr 1fr;
  }

  .advice-items {
    grid-template-columns: 1fr 1fr;
  }

  .advice-more {
    grid-column: 1 / -1;
  }
}

@media (max-width: 699px) {
  .dates-hero,
  .dates-activities,
  .home-advice,
  .home-next {
    text-align: center;
  }

  .advice-places {
    grid-template-columns: 1fr;
  }

  .date-row {
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 22px 2px 24px;
  }

  .date-row-rail {
    display: none;
  }

  .date-row-time {
    padding-top: 0;
  }

  .date-time {
    font-size: clamp(1.55rem, 7vw, 1.9rem);
  }

  .date-row-copy {
    gap: 9px;
  }

  .date-row-go {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }

  .cal-board {
    padding: 0;
  }

  .cal-week,
  .cal-grid {
    gap: 5px;
  }

  .cal-tile {
    min-height: 68px;
    padding: 7px 5px 8px;
    border-radius: 12px;
  }

  .cal-num {
    font-size: 0.92rem;
  }

  .cal-tile-label {
    font-size: 9px;
  }

  .cal-tile-multi {
    font-size: 9px;
  }

  .cal-tile-count::after {
    content: "";
  }

  .cal-nav-btn {
    font-size: 22px;
    padding: 0;
  }

  .cal-nav-long {
    display: none;
  }

  .cal-nav-short {
    display: inline;
  }

  .cal-window-nav {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .cal-window-month {
    font-size: 13px;
  }

  .cal-day-panel {
    text-align: left;
  }
}

.confirm-row {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.desk-tabs {
  margin-bottom: 16px;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 4px 6px 8px 0;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.55) transparent;
}

.chat-log::-webkit-scrollbar {
  width: 6px;
}

.chat-log::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.55);
  border-radius: 99px;
}

.chat-msg {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--who, var(--gold));
  border-radius: 16px;
  padding: 10px 12px;
}

.chat-msg .who strong {
  color: var(--who, var(--gold-2));
}

.chat-msg.mine {
  border-color: rgba(206, 17, 38, 0.55);
  background: rgba(206, 17, 38, 0.16);
}

.chat-msg.removed {
  opacity: 0.78;
  border-style: dashed;
}

.chat-msg .who {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--mute);
}

.chat-mute {
  margin-left: auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(215, 25, 33, 0.16);
  color: var(--sand);
  font-size: 11px;
  font-weight: 600;
}

.chat-msg p {
  margin-top: 6px;
  color: var(--sand);
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: -0.011em;
}

.request {
  text-align: left;
}

.request .row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-decline {
  background: #2a1214;
  border: 1px solid var(--line);
  color: var(--cream);
}

.pay-methods {
  display: grid;
  gap: 8px;
  margin: 14px 0 12px;
}

.btn-apple {
  background: #111;
  color: #fff;
  border: 1px solid #333;
}

.btn-card {
  background: var(--navy-2);
  border: 1px solid var(--line);
  color: var(--cream);
}

.pay-note {
  color: var(--mute);
  font-size: 12px;
  line-height: 1.45;
}

.pay-note a {
  color: var(--gold-2);
}

.count {
  background: var(--ek-red);
  color: #fff;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
}

@media (max-width: 699px) {
  .welcome-copy .display {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
    overflow-wrap: anywhere;
  }

  .welcome-copy .tagline,
  .welcome-copy .lede,
  .lede-join,
  .hero-foot {
    max-width: 100%;
  }

  .welcome-screen .hero-art {
    max-height: min(30vh, 220px);
    min-height: 110px;
    border-radius: 24px;
  }

  .lede-join {
    font-size: 14px;
  }

  .welcome-copy .lede {
    font-size: 15px;
    line-height: 1.5;
  }

  .welcome-screen .actions {
    max-width: none;
  }

  .chat-screen .composer input,
  .composer input {
    min-width: 0;
  }

  .btn {
    min-height: 48px;
  }
}

@media (max-height: 740px) and (max-width: 699px) {
  .welcome-screen .hero-art {
    max-height: 22vh;
    min-height: 88px;
  }

  .welcome-copy .lede {
    font-size: 14px;
    line-height: 1.5;
  }

  .welcome-quote p {
    font-size: 15px;
  }

  .welcome-screen .btn {
    min-height: 44px;
  }
}

@media (min-width: 700px) {
  .welcome-screen {
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 0.95fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 20px 48px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 28px 40px 32px;
    overflow: hidden;
  }

  .welcome-brand {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    order: unset;
  }

  .welcome-copy {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    padding-top: 0;
    order: unset;
    min-height: 0;
  }

  .welcome-copy .display {
    font-size: clamp(2.6rem, 5vw, 4rem);
    margin: 0 0 16px;
  }

  .welcome-copy .tagline {
    font-size: 20px;
    font-weight: 500;
    max-width: 18ch;
    margin-bottom: 16px;
  }

  .welcome-copy .lede {
    max-width: 38ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-secondary);
  }

  .welcome-screen .lede-join {
    margin: 0 0 14px !important;
    max-width: 36ch;
    margin-left: 0;
    font-size: 16px;
    color: var(--sand);
  }

  .welcome-screen .actions {
    margin-top: 18px;
    max-width: 360px;
    gap: 10px;
  }

  .welcome-screen .btn {
    min-height: 50px;
  }

  .welcome-screen .hero-foot {
    max-width: 38ch;
    margin-top: 14px;
    font-size: 13px;
  }

  .welcome-visual {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    order: unset;
  }

  .welcome-screen .hero-art {
    width: 100%;
    max-width: min(520px, 100%);
    height: auto;
    flex: 0 1 auto;
    max-height: min(58vh, 460px);
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 32px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  }

  .welcome-quote {
    margin: 0;
    max-width: 520px;
    flex-shrink: 0;
  }

  .welcome-quote p {
    font-size: clamp(16px, 1.7vw, 21px);
  }
}

@media (min-width: 900px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .stage {
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    display: block;
    background:
      radial-gradient(1200px 640px at 8% -8%, rgba(206, 17, 38, 0.62), transparent 58%),
      radial-gradient(900px 520px at 88% 0%, rgba(160, 14, 30, 0.34), transparent 50%),
      radial-gradient(900px 520px at 70% 110%, rgba(201, 162, 39, 0.18), transparent 48%),
      linear-gradient(180deg, #3a0b18 0%, #1a0610 42%, #0f1c1a 100%);
  }

  .device {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(206, 17, 38, 0.16), transparent 18%),
      linear-gradient(90deg, rgba(206, 17, 38, 0.06), transparent 28%),
      rgba(12, 6, 10, 0.55);
  }

  .device::before {
    height: 6px;
    background: linear-gradient(90deg, var(--ek-red) 0 62%, var(--gold) 62% 100%);
  }

  .screen {
    padding: 28px 48px 28px;
  }

  .screen.welcome-screen {
    overflow: hidden;
    height: 100%;
  }

  .screen.has-nav {
    display: flex;
    flex-direction: column;
    padding: 0 0 56px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .screen.has-nav.disc-page {
    overflow: hidden;
  }

  .screen.has-nav.disc-page > .disc-wrap {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 32px 0;
  }

  .lede {
    max-width: 42ch;
    font-size: 17px;
  }

  .welcome-copy .display {
    font-size: clamp(3rem, 5vw, 4.25rem);
  }

  .welcome-screen {
    max-width: 1280px;
    gap: 24px 64px;
    padding: 32px 56px 36px;
  }

  .hero {
    margin-top: 0;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 6vw, 4.5rem);
  }

  .actions {
    max-width: 420px;
  }

  .form {
    max-width: 520px;
  }

  .list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .card {
    background: linear-gradient(180deg, rgba(48, 16, 22, 0.92), rgba(22, 12, 16, 0.92));
    border-color: rgba(232, 197, 71, 0.28);
  }

  .card:nth-child(3n + 2) {
    background: linear-gradient(180deg, rgba(62, 42, 12, 0.9), rgba(24, 16, 10, 0.92));
  }

  .card:nth-child(3n + 3) {
    background: linear-gradient(180deg, rgba(14, 42, 38, 0.9), rgba(12, 18, 18, 0.92));
  }

  .online-panel {
    background: linear-gradient(180deg, rgba(215, 25, 33, 0.22), rgba(22, 12, 16, 0.9));
    border-color: rgba(232, 197, 71, 0.3);
  }

  .chat-screen.has-nav {
    grid-template-rows: auto auto 1fr auto;
  }

  .chat-screen .chat-log {
    min-height: 0;
  }

  .chat-msg {
    max-width: 720px;
  }

  .chat-msg.mine {
    background: linear-gradient(180deg, rgba(206, 17, 38, 0.28), rgba(22, 12, 16, 0.92));
    justify-self: end;
    width: min(720px, 100%);
  }

  .home-head h1 {
    font-size: clamp(2rem, 3vw, 2.75rem);
  }

  .toast {
    left: 280px;
    right: 48px;
    bottom: 32px;
  }
}

.dtp-host {
  position: relative;
}

.dtp-trigger {
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  background: var(--navy-2);
  border: 1px solid var(--line);
  color: var(--cream);
  display: flex;
  align-items: center;
}

.dtp-trigger.has-value {
  border-color: rgba(201, 162, 39, 0.45);
}

.dtp-placeholder,
.dtp-picked {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dtp-placeholder {
  color: var(--mute);
}

.dtp-placeholder svg,
.dtp-picked svg {
  width: 20px;
  height: 20px;
  color: var(--uae-red);
  flex-shrink: 0;
}

.dtp-picked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.dtp-picked strong {
  font-weight: 600;
}

.dtp-picked em {
  font-style: normal;
  color: var(--gold-2);
  font-size: 14px;
}

.dtp-pop {
  margin-top: 8px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(48, 16, 22, 0.98), rgba(22, 12, 16, 0.98));
  border: 1px solid rgba(232, 197, 71, 0.28);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.dtp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.dtp-month {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.016em;
}

.dtp-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--navy-3);
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 20px;
}

.dtp-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.dtp-week,
.dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.dtp-week span {
  font-size: 11px;
  color: var(--gold);
  text-align: center;
  padding-bottom: 6px;
}

.dtp-day {
  min-height: 36px;
  border-radius: 10px;
  color: var(--cream);
  font-size: 13px;
}

.dtp-day.empty {
  pointer-events: none;
}

.dtp-day.today {
  box-shadow: inset 0 0 0 1px var(--gold);
}

.dtp-day.selected {
  background: var(--uae-red);
  color: #fff;
}

.dtp-day.past {
  opacity: 0.35;
  text-decoration: line-through;
}

.dtp-day:not(.empty):not(.past):hover {
  background: rgba(206, 17, 38, 0.22);
}

.dtp-back {
  color: var(--mute);
  font-size: 13px;
  margin-bottom: 10px;
}

.dtp-time-label,
.dtp-mini {
  font-size: 12px;
  color: var(--mute);
  margin: 10px 0 6px;
}

.dtp-ampm,
.dtp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dtp-chip {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--navy-3);
  color: var(--cream);
  font-size: 13px;
}

.dtp-chip.on {
  background: linear-gradient(180deg, #e8c547, #c9a227);
  border-color: var(--gold);
  color: #3a2208;
}

.dtp-confirm {
  width: 100%;
  margin-top: 14px;
}

.dtp-msg {
  color: #ff8a8a;
  font-size: 13px;
  margin-top: 8px;
}

/* Homepage — premium, minimal */
.screen.welcome-screen.hp-page {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

.hp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  background: rgba(var(--bg-rgb), 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: none;
  min-height: 44px;
  padding: 0;
}

.hp-brand-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}

.logo-home {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  min-height: 0;
  background: none;
  border: 0;
}

.logo-img {
  width: 56px;
  height: 56px;
  max-width: 56px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
}

.hp-brand .logo-mark,
.hp-brand .logo-img {
  width: 44px;
  height: 44px;
  max-width: 44px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  border-radius: 0;
  background: transparent;
}

.nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -6px;
  padding: 0;
  border-radius: 12px;
  color: var(--text-secondary);
  background: none;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.nav-back svg {
  width: 20px;
  height: 20px;
}

.nav-back:hover,
.nav-back:focus-visible {
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.06);
}

.nav-back:active {
  transform: scale(0.96);
}

.hp-links,
.hp-actions {
  display: none;
}

.hp-links button,
.hp-actions .hp-text,
.hp-drawer button {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font);
  color: rgba(var(--fg-rgb), 0.78);
  -webkit-text-fill-color: rgba(var(--fg-rgb), 0.78);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 44px;
  padding: 0 8px;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hp-links button:active,
.hp-actions .hp-text:active,
.hp-drawer button:active {
  color: var(--cream);
  -webkit-text-fill-color: var(--cream);
}

.hp-nav.club-nav .hp-links button,
.hp-nav.club-nav + .hp-drawer button,
.hp-drawer button {
  white-space: nowrap;
}

.hp-links button:hover,
.hp-actions .hp-text:hover,
.hp-drawer button:hover,
.hp-brand:hover {
  color: var(--cream);
}

.hp-links button.on,
.hp-drawer button.on,
.hp-actions button.on {
  color: var(--cream);
}

.hp-links button.has-note,
.hp-drawer button.has-note {
  color: var(--gold);
}

.hp-links button.on {
  box-shadow: inset 0 -1px 0 var(--gold);
}

.hp-links button .count,
.hp-drawer button .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a0a0e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.hp-links button:focus-visible,
.hp-actions button:focus-visible,
.hp-brand:focus-visible,
.hp-burger:focus-visible,
.hp-cta:focus-visible,
.hp-more:focus-visible,
.hp-card:focus-visible,
.hp-join:focus-visible,
.hp-drawer button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.hp-login {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--cream);
  -webkit-text-fill-color: var(--cream);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.hp-login:hover {
  background: rgba(var(--fg-rgb), 0.12);
  border-color: rgba(var(--fg-rgb), 0.4);
}

.hp-login:active {
  transform: scale(0.97);
}

.hp-join {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--cream-fill);
  color: #1a0a0e;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: transform 0.2s ease, background 0.2s ease;
}

.hp-join:hover {
  background: #fff;
  transform: translateY(-1px);
}

.hp-logout {
  min-height: 44px;
  padding: 0 8px;
  background: none;
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.hp-logout:hover {
  color: var(--cream);
}

.hp-burger {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
}

.hp-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--cream-fill);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hp-drawer {
  display: none;
  flex-direction: column;
  padding: 8px max(22px, env(safe-area-inset-right)) 20px max(22px, env(safe-area-inset-left));
  background: rgba(var(--bg-rgb), 0.96);
}

.hp-drawer.on {
  display: flex;
}

@media (max-width: 899px) {
  .hp-nav {
    z-index: 50;
  }

  .hp-drawer.on {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    gap: 2px;
    padding: calc(env(safe-area-inset-top, 0px) + 62px) max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(14, 4, 8, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  html.club-menu-open,
  body.club-menu-open {
    overflow: hidden;
  }

  html.club-menu-open .stage,
  html.club-menu-open .device,
  html.club-menu-open .screen {
    overflow: visible !important;
  }

  .crew-profile-page .crew-back {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    z-index: 8;
    background: linear-gradient(180deg, rgba(26, 6, 16, 0.96) 62%, rgba(26, 6, 16, 0));
  }
}

.hp-drawer .hp-join,
.hp-drawer .hp-logout {
  width: fit-content;
  margin-top: 8px;
}

.hp-drawer button.hp-join,
.hp-drawer .hp-join {
  appearance: none;
  -webkit-appearance: none;
  background: var(--cream-fill);
  color: #1a0610;
  -webkit-text-fill-color: #1a0610;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  margin-top: 14px;
}

.hp-drawer button.hp-join:hover,
.hp-drawer button.hp-join:focus,
.hp-drawer button.hp-join:active,
.hp-drawer .hp-join:hover,
.hp-drawer .hp-join:focus,
.hp-drawer .hp-join:active {
  background: var(--cream-fill);
  color: #1a0610;
  -webkit-text-fill-color: #1a0610;
  transform: none;
}

.hp-page > main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 max(22px, env(safe-area-inset-right)) max(56px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}

.hp-hero {
  padding: var(--hp-section-space) 0 80px;
  text-align: center;
}

.hp-kicker {
  font-size: var(--hp-kicker-size);
  font-weight: var(--hp-kicker-weight);
  letter-spacing: var(--hp-kicker-tracking);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.hp-display {
  font-family: var(--display);
  font-weight: var(--hp-display-weight);
  letter-spacing: var(--hp-display-tracking);
  line-height: var(--hp-display-leading);
  color: var(--cream);
}

.hp-hero h1 {
  font-size: var(--hp-hero-size);
  max-width: 14ch;
  margin: 0 auto 22px;
}

.hp-sub {
  max-width: var(--hp-measure);
  margin: 0 auto 36px;
  font-size: var(--hp-body-size);
  font-weight: 400;
  line-height: var(--hp-body-leading);
  color: var(--hp-body-color);
}

.hp-beta {
  max-width: 36ch;
  margin: 0 auto 32px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.hp-cta {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 220px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--cream-fill);
  color: #1a0a0e;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.hp-cta:hover {
  background: #fff;
  transform: translateY(-2px);
}

.hp-cta:active {
  transform: translateY(0);
}

.hp-marks {
  margin-top: 22px;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: rgba(var(--fg-rgb), 0.62);
}

.hp-founding {
  padding: 40px 0 28px;
  text-align: center;
}

.hp-founding h2 {
  max-width: 18ch;
  margin: 0 auto 16px;
}

.join-perks {
  list-style: none;
  margin: 16px auto 0;
  padding: 0;
  max-width: 34ch;
  display: grid;
  gap: 8px;
  text-align: left;
}

.join-perks li {
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.auth-card .join-perks {
  margin: 18px 0 8px;
}

.join-founding-hint {
  margin: 8px 0 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.join-perks-welcome {
  margin: 20px 0 24px;
}

.hp-founding > p {
  margin: 0 auto 10px;
}

.hp-founding-note {
  margin-top: 8px !important;
  font-size: 0.95rem !important;
  color: var(--text-muted) !important;
}

.hp-founding-meter {
  max-width: 280px;
  margin: 22px auto 0;
}

.hp-founding-count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hp-founding-count strong {
  color: var(--cream);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

.hp-founding-bar {
  height: 3px;
  border-radius: 99px;
  background: rgba(var(--fg-rgb), 0.12);
  overflow: hidden;
}

.hp-founding-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.hp-founding-remain {
  margin: 10px 0 0 !important;
  font-size: 0.9rem !important;
  color: rgba(var(--fg-rgb), 0.5) !important;
}

.hp-founding .hp-cta {
  margin-top: 22px;
  width: min(100%, 340px);
}

.founding-welcome-wrap {
  padding-top: 28px;
}

.founding-welcome-card {
  text-align: center;
}

.founding-welcome-mark {
  margin: 8px 0 12px;
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 0;
}

.founding-welcome-card h1 {
  margin-bottom: 12px;
}

.founding-welcome-card p {
  margin: 0 auto 10px;
  max-width: 34ch;
  color: rgba(var(--fg-rgb), 0.7);
  line-height: 1.55;
}

.founding-welcome-card .hp-cta {
  margin-top: 28px;
}

.hp-block {
  padding: 64px 0 8px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-block h2 {
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.hp-block > p {
  max-width: 42ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(var(--fg-rgb), 0.7);
}

.hp-about {
  padding: var(--hp-section-space) 0 64px;
  text-align: left;
}

.hp-about > .hp-kicker {
  margin-bottom: 18px;
}

.hp-about-intro {
  display: grid;
  gap: 26px;
}

.hp-about-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 5vw, 2.45rem);
  font-weight: var(--hp-display-weight);
  letter-spacing: var(--hp-display-tracking);
  line-height: 1.12;
  color: var(--cream);
  max-width: 11em;
}

.hp-about-support {
  max-width: 38ch;
}

.hp-about-lines {
  margin: 0 0 20px;
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.42;
  color: var(--cream);
}

.hp-about-lines span,
.hp-about-invite span {
  display: block;
}

.hp-about-bridge {
  margin: 0 0 12px;
  font-size: var(--hp-body-size);
  font-weight: 400;
  line-height: var(--hp-body-leading);
  letter-spacing: -0.012em;
  color: var(--cream);
}

.hp-about-purpose,
.hp-about-why-copy p {
  margin: 0;
  font-size: clamp(0.98rem, 2.1vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--hp-body-color);
}

.hp-about-why {
  display: grid;
  gap: 14px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-about-why > .hp-kicker {
  margin-bottom: 0;
}

.hp-about-why-copy {
  display: grid;
  gap: 12px;
  max-width: 48ch;
}

.hp-about-points {
  list-style: none;
  display: grid;
  gap: 22px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-about-point-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.hp-about-point-label span {
  color: var(--gold);
  margin-right: 8px;
}

.hp-about-points p:last-child {
  margin: 0;
  max-width: 28ch;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--hp-body-color);
}

.hp-about-end {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  text-align: center;
}

.hp-about-invite {
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(1.12rem, 2.6vw, 1.32rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: rgba(var(--fg-rgb), 0.92);
}

.hp-about-close {
  margin: 18px auto 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.hp-life {
  padding: 24px 0 72px;
}

.hp-life-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 5vw, 2.45rem);
  font-weight: var(--hp-display-weight);
  letter-spacing: var(--hp-display-tracking);
  line-height: 1.12;
  color: var(--cream);
  max-width: 14ch;
}

.hp-life-sub {
  margin-top: 16px;
  max-width: 36ch;
  font-size: clamp(0.98rem, 2.1vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--hp-body-color);
}

.hp-life-frame {
  margin-top: 28px;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

.hp-life-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-steps {
  list-style: none;
  display: grid;
  gap: 22px;
  margin-top: 28px;
}

.hp-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.hp-steps span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding-top: 3px;
}

.hp-steps strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.hp-steps p {
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 0.98rem;
  line-height: 1.45;
}

.hp-crew {
  display: grid;
  gap: 12px;
  margin: 28px 0 24px;
}

.hp-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  text-align: left;
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.03);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  transition: transform 0.2s ease, background 0.2s ease;
}

.hp-card:hover {
  transform: translateY(-2px);
  background: rgba(var(--fg-rgb), 0.05);
}

.hp-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.hp-card p,
.hp-card-co,
.hp-card-bio {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.hp-card-bio {
  margin-top: 8px;
}

.hp-empty {
  margin: 20px 0;
  color: var(--text-secondary);
}

.hp-more {
  min-height: 44px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: opacity 0.2s ease;
}

.hp-more:hover {
  opacity: 0.8;
}

.hp-enter .hp-hero h1,
.hp-enter .hp-hero .hp-kicker,
.hp-enter .hp-hero .hp-sub,
.hp-enter .hp-hero .hp-beta,
.hp-enter .hp-hero .hp-cta,
.hp-enter .hp-hero .hp-marks {
  animation: hp-rise 0.7s ease both;
}

.hp-enter .hp-hero .hp-kicker { animation-delay: 0.04s; }
.hp-enter .hp-hero h1 { animation-delay: 0.1s; }
.hp-enter .hp-hero .hp-sub { animation-delay: 0.18s; }
.hp-enter .hp-hero .hp-beta { animation-delay: 0.22s; }
.hp-enter .hp-hero .hp-cta { animation-delay: 0.3s; }
.hp-enter .hp-hero .hp-marks { animation-delay: 0.38s; }

.hp-enter .hp-block {
  animation: hp-rise 0.6s ease both;
}

.hp-block.hp-settled {
  animation: none;
}

@keyframes hp-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 700px) {
  .screen.welcome-screen.hp-page {
    display: block !important;
    grid-template-columns: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: none !important;
    padding: 0 !important;
    height: 100% !important;
  }

  .hp-hero {
    padding: 108px 0 112px;
  }

  .hp-about {
    padding: 80px 0 72px;
  }

  .hp-life {
    padding: 8px 0 88px;
  }

  .hp-life-frame {
    margin-top: 36px;
    border-radius: 28px;
  }

  .hp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .hp-steps li {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hp-crew {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (min-width: 900px) {
  .screen.welcome-screen.hp-page {
    overflow-y: auto !important;
    height: 100% !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .hp-nav {
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }

  .hp-links {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
  }

  .hp-nav.club-nav {
    gap: 12px;
  }

  .hp-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  .tab-bar,
  .live-chat-hit {
    display: none !important;
  }

  .hp-nav.club-nav .nav-cal-hit,
  .hp-nav.club-nav .tab-desk-hit {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
  }

  .hp-brand .logo-img {
    width: 48px;
    height: 48px;
    max-width: 48px;
  }

  .hp-nav.club-nav .hp-links button {
    font-size: 14px;
    padding: 0 8px;
  }

  .hp-nav.club-nav .hp-links {
    gap: 4px;
    margin-left: 12px;
  }

  .hp-page > main {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hp-about-intro {
    grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr);
    gap: 56px;
    align-items: start;
  }

  .hp-about-title {
    max-width: 8.4em;
  }

  .hp-about-support {
    max-width: 42ch;
    padding-top: 6px;
  }

  .hp-about-why {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 40px;
    padding-top: 32px;
  }

  .hp-about-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    margin-top: 36px;
    padding-top: 32px;
  }

  .hp-about-end {
    margin-top: 44px;
    padding-top: 32px;
  }
}

@media (max-width: 699px) {
  .hp-founding {
    padding: 28px 0 18px;
  }

  .hp-founding h2 {
    font-size: 1.55rem;
    margin-bottom: 12px;
  }

  .hp-founding > p {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .hp-founding .hp-cta {
    margin-top: 18px;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero h1,
  .hp-hero .hp-kicker,
  .hp-hero .hp-sub,
  .hp-hero .hp-beta,
  .hp-hero .hp-cta,
  .hp-hero .hp-marks,
  .hp-block,
  .hp-cta,
  .hp-join,
  .hp-card {
    animation: none;
    transition: none;
  }

  .hp-cta:hover,
  .hp-join:hover,
  .hp-card:hover,
  .auth-cta:hover {
    transform: none;
  }

  .auth-card,
  .join-extra:not([hidden]) {
    animation: none;
  }
}

/* Login — same language as the homepage */
.screen.welcome-screen.hp-page.auth-page {
  display: flex;
  flex-direction: column;
}

.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px max(22px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}

.auth-card {
  width: min(440px, 100%);
  padding: 36px 28px 32px;
  border-radius: 24px;
  background: rgba(var(--fg-rgb), 0.03);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  animation: hp-rise 0.55s ease both;
}

.auth-card .hp-kicker {
  margin-bottom: 16px;
}

.auth-card h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 10px;
}

.auth-sub {
  max-width: 28ch;
  margin: 0 0 32px;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(var(--fg-rgb), 0.68);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form label {
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 13px;
  font-weight: 500;
}

.auth-page input,
.auth-page .pass-input {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  color: var(--cream);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.auth-page .pass-input {
  padding-right: 72px;
}

.auth-page input:focus,
.auth-page .pass-input:focus {
  border-color: rgba(var(--fg-rgb), 0.42);
  background: rgba(var(--fg-rgb), 0.06);
  outline: none;
}

.auth-page input:focus-visible,
.auth-page .pass-input:focus-visible,
.auth-forgot:focus-visible,
.auth-cta:focus-visible,
.auth-foot button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.auth-remember input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.auth-pass-head label {
  margin: 0;
}

.auth-forgot {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  min-height: 32px;
  padding: 0;
  transition: color 0.2s ease;
}

.auth-forgot:hover {
  color: var(--cream);
}

.auth-err {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--error);
}

.auth-ok {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(var(--fg-rgb), 0.72);
}

.auth-cta {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.auth-cta:disabled {
  opacity: 0.7;
  transform: none;
  cursor: wait;
}

.auth-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-foot button {
  color: var(--cream);
  font-weight: 600;
  min-height: 44px;
  padding: 0 4px;
  transition: opacity 0.2s ease;
}

.auth-foot button:hover {
  opacity: 0.8;
}

.auth-page--long .auth-wrap {
  align-items: flex-start;
}

.auth-page select {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  color: var(--cream);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--fg-rgb), 0.55) 50%), linear-gradient(135deg, rgba(var(--fg-rgb), 0.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.auth-page select:focus {
  border-color: rgba(var(--fg-rgb), 0.42);
  outline: none;
}

.auth-page .airline {
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 14px;
}

.auth-page .airline.on {
  border-color: rgba(var(--fg-rgb), 0.42);
  background: rgba(var(--fg-rgb), 0.07);
}

.auth-page .airline span {
  color: var(--text-muted);
}

.join-kinds {
  display: grid;
  gap: 10px;
}

.join-kinds-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--fg-rgb), 0.62);
}

.join-kind {
  display: grid;
  gap: 3px;
  text-align: left;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.join-kind strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.join-kind span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}

.join-kind:hover,
.join-kind:focus-visible {
  border-color: rgba(var(--fg-rgb), 0.28);
}

.join-kind.on {
  border-color: rgba(var(--fg-rgb), 0.42);
  background: rgba(var(--fg-rgb), 0.07);
}

.join-extra:not([hidden]) {
  animation: hp-rise 0.28s ease;
}

@media (min-width: 700px) {
  .screen.welcome-screen.hp-page.auth-page {
    display: flex !important;
    flex-direction: column;
  }

  .auth-card {
    padding: 48px 44px 40px;
  }

  .auth-wrap {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

.auth-nav-join {
  margin-left: auto;
}

.crew-lists-ready {
  animation: crew-lists-in 0.28s ease both;
}

@keyframes crew-lists-in {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

.crew-card-skel {
  pointer-events: none;
  min-height: 108px;
}

.crew-skel-photo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(var(--fg-rgb), 0.08);
}

.crew-skel-copy {
  display: grid;
  gap: 10px;
  align-content: center;
  padding-top: 8px;
}

.crew-skel-copy span {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.08);
}

.crew-skel-copy span:first-child {
  width: 42%;
}

.crew-skel-copy span:last-child {
  width: 64%;
}

.crew-list.is-pending .crew-card-skel,
.crew-skel-photo,
.crew-skel-copy span {
  animation: crew-skel 1.1s ease-in-out infinite;
}

@keyframes crew-skel {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.hello-back {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  width: 100vw;
  height: var(--app-height, 100svh);
  height: 100svh;
  max-width: 100%;
  max-height: 100svh;
  min-height: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  background: rgba(26, 6, 16, 0.96);
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  animation: hello-back-in 0.45s ease both;
}

html:not(.is-ios) .hello-back {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hello-back.is-held {
  animation: none;
  opacity: 1;
}

.hello-back.is-out {
  animation: hello-back-out 0.5s ease both;
  pointer-events: none;
}

.auth-boot {
  display: grid;
  place-items: center;
  min-height: 100%;
}

.auth-boot-inner {
  text-align: center;
}

.auth-boot-inner .logo-img {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
}

.auth-boot-inner .hp-kicker {
  margin: 0;
}

.hello-back-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(22rem, calc(100% - 8px));
  max-width: 100%;
  margin: 0;
  flex-shrink: 0;
}

.hello-back-kicker {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: var(--hp-kicker-size);
  font-weight: var(--hp-kicker-weight);
  letter-spacing: var(--hp-kicker-tracking);
  text-transform: uppercase;
}

.hello-back-title {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 3.1rem);
  font-weight: var(--hp-display-weight);
  letter-spacing: var(--hp-display-tracking);
  line-height: var(--hp-display-leading);
}

@keyframes hello-back-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hello-back-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crew-lists-ready,
  .crew-list.is-pending .crew-card-skel,
  .crew-skel-photo,
  .crew-skel-copy span,
  .hello-back,
  .hello-back.is-out {
    animation: none;
  }
}

.crew-profile-enter {
  animation: crew-profile-enter 0.14s ease-out both;
}

@keyframes crew-profile-enter {
  from {
    opacity: 0.92;
    transform: translate3d(10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.crew-profile-hydrate {
  animation: crew-profile-hydrate 0.2s ease both;
}

@keyframes crew-profile-hydrate {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

.crew-profile-page,
.cp-lightbox-stage img {
  backface-visibility: hidden;
}

.crew-enter {
  animation: crew-enter 0.16s ease-out both;
}

@keyframes crew-enter {
  from {
    opacity: 0.72;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crew-enter,
  .crew-profile-enter,
  .crew-profile-hydrate,
  .cp-gallery-main img {
    animation: none;
    transition: none;
  }
}

.club-enter {
  animation: hp-rise 0.4s ease both;
}

.you-page.club-enter,
.you-activity-page.club-enter,
.mcard-page.club-enter,
.cp-page.club-enter {
  animation: none;
}

.tab-swap {
  animation: none;
}

@keyframes tab-swap-in {
  from {
    opacity: 0.72;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.club-enter-home {
  animation: club-enter-home 0.32s ease both;
}

@keyframes club-enter-home {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.screen.has-nav {
  padding: 0 0 48px;
  padding-left: 0;
  padding-right: 0;
}

.screen.has-nav > .hp-nav {
  order: -2;
}

.screen.has-nav > .hp-drawer {
  order: -1;
}

.screen.has-nav > *:not(.hp-nav):not(.hp-drawer):not(.toast):not(.hello-back):not(.tab-bar) {
  width: min(1040px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
}

.screen.has-nav > .travel-map.is-crew-world {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 899px) {
  .meetup-detail-page.screen.has-nav > .meetup-detail,
  .meetup-detail-page.screen.has-nav > .meetup-join-bar {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

.screen.has-nav .home-head,
.screen.has-nav .topbar {
  margin-top: 28px;
}

.screen.has-nav .display {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: var(--hp-display-tracking);
  font-weight: var(--hp-display-weight);
}

.screen.has-nav .kicker {
  letter-spacing: var(--hp-kicker-tracking);
  font-size: var(--hp-kicker-size);
  font-weight: var(--hp-kicker-weight);
  margin-bottom: 10px;
}

.screen.has-nav .lede,
.screen.has-nav .note,
.screen.has-nav .rsvp-note {
  color: var(--hp-body-color);
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  line-height: 1.55;
}

.screen.has-nav .btn-gold,
.chat-dock .btn-gold {
  background: var(--cream-fill);
  color: #1a0a0e;
  box-shadow: none;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.screen.has-nav .btn-gold:hover,
.chat-dock .btn-gold:hover {
  background: #fff;
  transform: translateY(-1px);
}

.screen.has-nav .btn-ghost {
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 999px;
  color: var(--cream);
}

.screen.has-nav .btn-ghost:hover,
.screen.has-nav .btn-ghost.on {
  border-color: rgba(var(--fg-rgb), 0.4);
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.04);
}

.screen.has-nav .btn:disabled,
.auth-cta:disabled {
  opacity: 0.45;
  transform: none;
  pointer-events: none;
}

.screen.has-nav .icon-btn {
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 999px;
}

.screen.has-nav .tabs {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 0;
  padding: 0;
  gap: 10px 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.screen.has-nav .tabs button {
  flex: 0 0 auto;
  height: 42px;
  border-radius: 0;
  padding: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .screen.has-nav .tabs button {
    font-size: 14px;
  }
}

.screen.has-nav .tabs button.on {
  background: transparent;
  color: var(--cream);
  box-shadow: inset 0 -1px 0 var(--gold);
}

.screen.has-nav .card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 0;
  padding: 18px 0;
  transition: opacity 0.2s ease;
}

.screen.has-nav .card:hover {
  opacity: 0.86;
}

.screen.has-nav .card h3 {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.screen.has-nav .list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.screen.has-nav .member {
  padding: 16px 0;
}

.screen.has-nav .avatar,
.screen.has-nav .crew-photo {
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--cream);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
}

.screen.has-nav .crew-photo {
  border-radius: 50%;
}

.screen.has-nav .search,
.screen.has-nav input,
.screen.has-nav textarea {
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 14px;
  color: var(--cream);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.screen.has-nav select {
  appearance: none;
  background-color: var(--input-background);
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--fg-rgb), 0.78) 50%), linear-gradient(135deg, rgba(var(--fg-rgb), 0.78) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid rgba(var(--fg-rgb), 0.22);
  border-radius: 14px;
  color: var(--input-foreground);
  color-scheme: inherit;
  padding-right: 36px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.screen.has-nav select option {
  background-color: var(--surface);
  color: var(--input-foreground);
}

.screen.has-nav input:focus,
.screen.has-nav textarea:focus,
.screen.has-nav .search:focus {
  border-color: rgba(var(--fg-rgb), 0.42);
  background: rgba(var(--fg-rgb), 0.06);
}

.screen.has-nav select:focus {
  border-color: rgba(var(--fg-rgb), 0.42);
  background-color: var(--input-background);
}

.screen.has-nav .online-panel,
.screen.has-nav .coming-soon,
.screen.has-nav .gate-lock {
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 16px;
}

.screen.has-nav .chat-msg {
  background: transparent;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
}

.screen.has-nav .chat-msg.mine {
  background: transparent;
}

.screen.has-nav.chat-screen {
  padding-bottom: 16px;
}

.screen.has-nav.chat-screen .chat-log,
.screen.has-nav.chat-screen .chat-dock {
  width: min(720px, calc(100% - 44px));
}

.screen.has-nav .composer .btn-gold {
  min-width: 88px;
}

.toast {
  left: 50%;
  right: auto;
  bottom: auto;
  top: max(76px, calc(env(safe-area-inset-top) + 64px));
  transform: translateX(-50%);
  width: min(420px, calc(100% - 40px));
  background: rgba(var(--bg-rgb), 0.94);
  color: var(--cream);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 14px;
  font-weight: 500;
}

.bottom-nav {
  display: none;
}

@media (max-width: 899px) {
  .tab-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .club-nav .tab-desk-hit,
  .club-nav .nav-cal-hit {
    display: grid;
    width: 44px;
    height: 44px;
  }

  .screen.has-nav {
    padding-bottom: var(--tab-bar-space);
  }

  .screen.has-nav.chat-screen {
    padding-bottom: var(--tab-bar-space);
  }

  .screen.welcome-screen.hp-page,
  .screen.welcome-screen.hp-page.auth-page {
    padding-bottom: var(--tab-bar-space);
  }

  .hp-page > main {
    padding-bottom: 12px;
  }

  .tab-bar-item:active {
    background: rgba(var(--fg-rgb), 0.06);
  }
}

@media (min-width: 700px) {
  .screen.has-nav .home-head,
  .screen.has-nav .topbar {
    margin-top: 40px;
  }
}

@media (min-width: 900px) {
  .screen.has-nav {
    display: flex !important;
    flex-direction: column;
    align-content: stretch;
    column-gap: 0;
    padding: 0 0 56px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .screen.has-nav > *:not(.hp-nav):not(.hp-drawer):not(.toast):not(.hello-back):not(.tab-bar) {
    grid-column: auto;
  }

  .screen.has-nav .list {
    grid-template-columns: 1fr;
  }

  .screen.has-nav .card,
  .screen.has-nav .card:nth-child(3n + 2) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  }

  .screen.has-nav .lede,
  .screen.has-nav .crew-intro {
    max-width: 46ch;
  }

  .screen.has-nav .form,
  .screen.has-nav .actions {
    width: min(440px, 100%);
  }

  .screen.has-nav > .avatar {
    margin-right: auto;
  }
}

@media (max-width: 420px) {
  .hp-brand span {
    display: none;
  }

  .logo-home .logo-img {
    width: 48px;
    height: 48px;
    max-width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .club-enter,
  .club-enter-home,
  .tab-swap,
  .join-extra:not([hidden]) {
    animation: none;
  }

  .rules-card.is-saving {
    transition: none;
  }

  .nav-back:active {
    transform: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.disc-wrap {
  width: 100%;
  max-width: none;
  margin-top: 20px;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
  overflow: visible;
}

.screen.has-nav.disc-page > .disc-wrap {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.disc-page {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.disc-page,
.screen.has-nav.disc-page > .disc-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.45) transparent;
}

.disc-page::-webkit-scrollbar,
.screen.has-nav.disc-page > .disc-wrap::-webkit-scrollbar {
  width: 10px;
}

.disc-page::-webkit-scrollbar-track,
.screen.has-nav.disc-page > .disc-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.disc-page::-webkit-scrollbar-thumb,
.screen.has-nav.disc-page > .disc-wrap::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.42);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  .disc-page,
  .screen.has-nav.disc-page > .disc-wrap {
    scroll-behavior: auto;
  }
}

.disc-wrap > .hp-kicker:first-of-type {
  margin-top: 4px;
}

.disc-lede {
  max-width: 40ch;
  margin: 8px 0 22px;
  line-height: 1.55;
}

.disc-compose {
  max-width: 680px;
  width: 100%;
  margin: 0 auto 28px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(var(--fg-rgb), 0.04);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.screen.has-nav .disc-compose textarea,
.disc-compose textarea {
  width: 100%;
  resize: vertical;
  min-height: 92px;
  padding: 4px 2px 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--cream);
  font: inherit;
  line-height: 1.5;
}

.screen.has-nav .disc-compose textarea:focus,
.disc-compose textarea:focus {
  outline: none;
  background: transparent;
  border: 0;
}

.screen.has-nav .disc-reply input,
.disc-reply input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 0;
  border-radius: 14px;
  color: var(--cream);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.screen.has-nav .disc-reply input:focus,
.disc-reply input:focus {
  outline: none;
  background: rgba(var(--fg-rgb), 0.07);
}

.disc-compose textarea:disabled {
  opacity: 0.45;
}

.disc-comment.is-reply {
  padding-left: 8px;
}

.disc-replying {
  margin: 2px 0 0;
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.disc-mention {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--gold-2);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
}

.disc-comment-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 8px;
}

.disc-comment-acts .disc-act,
.disc-comment-acts .disc-mod {
  min-height: 40px;
  font-size: 13px;
  color: var(--text-secondary);
}

.disc-reply {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 4px;
  position: relative;
  z-index: 1;
}

.disc-reply-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--mute);
  font-size: 13px;
}

.disc-reply-chip p {
  margin: 0;
}

.disc-reply-x {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  background: none;
  color: var(--mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.disc-reply-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.disc-mention-list {
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(var(--bg-rgb), 0.92);
  border: 1px solid rgba(243, 230, 201, 0.1);
}

.disc-mention-opt {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--cream);
  text-align: left;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.disc-mention-opt:hover,
.disc-mention-opt:focus {
  background: rgba(var(--fg-rgb), 0.06);
}

.disc-comment-copy {
  min-width: 0;
  flex: 1;
}

.disc-compose-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.disc-compose-bar p,
.disc-limit {
  color: var(--hp-body-color);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  flex: 1;
}

.disc-compose-spacer {
  flex: 1;
}

.disc-photo-hit {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--gold-2);
  cursor: pointer;
}

.disc-photo-hit.has-file {
  color: var(--cream);
}

.disc-photo-hit svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.disc-photo-hit input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.disc-photo-chip {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
}

.disc-photo-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.disc-photo-chip-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.disc-photo-preview {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.disc-photo-preview img,
.disc-photo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  display: block;
}

.disc-photo {
  margin: 12px 0 2px;
  max-width: 100%;
}

.disc-photo-remove {
  min-height: 40px;
  padding: 0;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 13px;
}

.disc-limit {
  margin-top: 14px;
}

.disc-wrap > .hp-kicker,
.disc-wrap > .display,
.disc-wrap > .lede,
.disc-feed-kicker,
.disc-more,
.disc-error {
  max-width: 680px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.disc-feed-kicker {
  margin-top: 8px;
  margin-bottom: 14px;
}

.disc-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

.disc-post {
  min-width: 0;
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.055);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.disc-post.is-new {
  animation: hp-rise 0.35s ease both;
}

.disc-post:hover {
  background: rgba(var(--fg-rgb), 0.06);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.disc-who {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.disc-who-copy {
  min-width: 0;
  flex: 1;
}

.disc-avatar,
.disc-name {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.disc-avatar .avatar,
.disc-avatar .crew-photo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.disc-avatar.sm .avatar,
.disc-avatar.sm .crew-photo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.disc-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.disc-name .crew-verified {
  width: 14px;
  height: 14px;
  vertical-align: 0;
}

.disc-comment-head .disc-name .crew-verified {
  width: 13px;
  height: 13px;
}

.disc-meta,
.disc-when {
  margin-top: 2px;
  color: var(--hp-body-color);
  font-size: 13px;
}

.disc-when {
  margin: 0 0 8px;
}

.disc-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.disc-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease, color 0.14s ease, transform 0.12s ease;
}

.disc-more-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.disc-more-btn:hover,
.disc-more-btn.on {
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.06);
}

.disc-more-btn:active {
  transform: scale(0.94);
}

.disc-menu-layer {
  position: fixed;
  inset: 0;
  z-index: 86;
  pointer-events: none;
}

.disc-menu-layer[hidden] {
  display: none !important;
}

.disc-menu-layer.is-open {
  pointer-events: auto;
}

.disc-menu-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 4, 8, 0.28);
}

.disc-menu-panel {
  position: absolute;
  z-index: 2;
  left: var(--disc-menu-left, 12px);
  top: var(--disc-menu-top, 72px);
  width: var(--disc-menu-width, 228px);
  display: grid;
  padding: 6px;
  border-radius: 16px;
  background: var(--navy-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
  animation: disc-menu-in 0.14s ease-out;
}

@keyframes disc-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.disc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.disc-menu-item:active {
  background: rgba(var(--fg-rgb), 0.06);
}

.disc-menu-item.is-danger {
  color: #f0b4b8;
}

@media (max-width: 899px) {
  .disc-menu-scrim {
    background: rgba(10, 4, 8, 0.46);
  }

  .disc-menu-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    animation: disc-sheet-in 0.16s ease-out;
  }

  .disc-menu-item {
    min-height: 52px;
    font-size: 1rem;
  }
}

@keyframes disc-sheet-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.disc-edit-kicker {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.disc-edit-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.disc-edit-photo {
  margin-top: 12px;
}

.disc-edit-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.disc-post.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  .disc-menu-panel,
  .disc-confirm-card,
  .disc-post.is-leaving,
  .disc-more-btn {
    animation: none;
    transition: none;
  }
}

.disc-edit textarea {
  width: 100%;
  min-height: 96px;
  margin-top: 14px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 0;
  color: var(--cream);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.screen.has-nav .disc-edit textarea,
.screen.has-nav .disc-edit textarea:focus {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.45);
  border-radius: 0;
  outline: none;
}

.disc-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.disc-tools .disc-mod {
  margin-left: 0;
}

.disc-mod {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--mute);
  font: inherit;
  font-size: 13px;
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
}

.disc-body {
  margin: 12px 0 10px;
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: -0.011em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.disc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.disc-act {
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--hp-body-color);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.disc-act.on {
  color: var(--cream);
}

.disc-count {
  margin-left: 6px;
}

.disc-thread {
  margin-top: 8px;
  padding-top: 8px;
}

.disc-comment {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  min-width: 0;
}

.disc-comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.disc-comment-head span {
  color: var(--mute);
  font-size: 12px;
}

.disc-comment-body {
  margin-top: 4px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.disc-empty,
.disc-empty-note,
.disc-error {
  color: var(--hp-body-color);
  max-width: 32ch;
}

.disc-empty,
.disc-error {
  padding: 28px 8px 12px;
}

.disc-empty p:first-child,
.disc-error p:first-child {
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.disc-empty p + p,
.disc-error p + p {
  margin-top: 8px;
}

.disc-error .btn,
.disc-error-inline .btn {
  margin-top: 16px;
}

.disc-error-inline {
  max-width: none;
  padding: 0 0 12px;
}

.disc-skel {
  height: 148px;
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.04), rgba(var(--fg-rgb), 0.09), rgba(var(--fg-rgb), 0.04));
  background-size: 180% 100%;
  animation: disc-shimmer 1.2s ease-in-out infinite;
}

@keyframes disc-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -80% 0; }
}

.disc-more {
  margin: 20px 0 8px;
}

.disc-confirm {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.disc-confirm-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 4, 8, 0.62);
}

.disc-confirm-card {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  padding: 28px 24px 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  background: var(--navy);
  border-radius: 22px;
  animation: disc-menu-in 0.14s ease-out;
}

.disc-confirm-card h2 {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 8px 0 10px;
}

.disc-confirm-card p {
  color: var(--hp-body-color);
}

.disc-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.disc-confirm-actions .btn {
  min-height: 44px;
  min-width: 88px;
}

@media (max-width: 699px) {
  .disc-compose-bar,
  .disc-reply-row {
    align-items: flex-end;
  }

  .disc-compose-bar .btn,
  .disc-reply-row .btn {
    flex-shrink: 0;
  }

  .disc-post:hover {
    transform: none;
  }
}

@media (hover: none) {
  .disc-post:hover {
    background: rgba(var(--fg-rgb), 0.045);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  }

  .disc-post:active {
    background: rgba(var(--fg-rgb), 0.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .disc-post,
  .disc-post.is-new,
  .disc-skel {
    animation: none;
  }
}

.rules-wrap {
  align-items: flex-start;
  padding-top: 20px;
}

.rules-card {
  width: min(560px, 100%);
  animation: hp-rise 0.4s ease both;
}

.rules-scroll {
  max-height: min(46vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 8px 0 22px;
  padding: 4px 8px 8px 0;
  color: var(--hp-body-color);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.6;
}

.rules-lead,
.rules-close {
  color: var(--cream);
}

.rules-scroll p + p,
.rules-scroll ul {
  margin-top: 14px;
}

.rules-scroll ul {
  padding-left: 1.15em;
}

.rules-scroll li + li {
  margin-top: 10px;
}

.rules-zero {
  margin-top: 22px;
  padding: 16px 0 16px 16px;
  border-left: 1px solid var(--gold);
}

.rules-zero-kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.rules-zero p + p {
  margin-top: 10px;
}

.rules-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}

.rules-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--gold);
}

.rules-card .auth-cta:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.rules-card.is-saving {
  pointer-events: none;
  opacity: 0.78;
  transition: opacity 0.22s ease;
}

.rules-page.is-saving .hp-nav {
  pointer-events: none;
}

@media (max-width: 699px) {
  .rules-scroll {
    max-height: min(50vh, 380px);
  }
}

.you-wrap {
  max-width: 860px;
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
}

.you-page {
  overflow-x: hidden;
}

.you-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
}

.you-avatar .avatar,
.you-avatar .crew-photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.you-identity {
  min-width: 0;
  flex: 1;
}

.you-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 3.2vw, 2.05rem);
  overflow-wrap: anywhere;
}

.you-class {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.you-bio-line {
  margin: 0;
  color: var(--hp-body-color);
  font-size: 0.98rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.you-bio-line.is-empty {
  color: var(--mute);
}

.you-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  color: var(--hp-body-color);
  font-size: 0.95rem;
}

.you-edit {
  flex-shrink: 0;
  min-height: 44px;
}

.you-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 8px 48px;
  margin-top: 8px;
}

.you-primary {
  display: grid;
  gap: 12px;
  margin: 8px 0 22px;
}

.you-action {
  width: 100%;
  min-height: 88px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 20px;
  background: rgba(var(--fg-rgb), 0.04);
  color: inherit;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.you-action strong {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.you-action-kicker {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.you-action-lede,
.you-action-cta {
  color: var(--mute);
  font-size: 0.92rem;
  line-height: 1.4;
}

.you-action-cta {
  margin-top: 6px;
  color: var(--gold);
  font-weight: 650;
}

.you-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.you-action-card .mcard {
  pointer-events: none;
  width: 100%;
  max-width: 100%;
}

.you-action-card .mcard .mcard-qr {
  pointer-events: auto;
}

.you-action-card .mcard.is-profile .mcard-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 118px);
  align-items: end;
  gap: 12px;
}

.you-action-card .mcard.is-profile .mcard-bottom > div {
  min-width: 0;
}

.you-action-card .mcard.is-profile .mcard-no {
  white-space: normal;
  overflow-wrap: anywhere;
}

.you-action-card .mcard.is-profile .mcard-qr {
  width: 100%;
  min-width: 0;
  max-width: 118px;
  min-height: 0;
  height: auto;
  padding: 6px 6px 4px;
  box-sizing: border-box;
  justify-self: end;
}

.you-action-card .mcard.is-profile .mcard-qr svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
}

.you-action-copy {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.you-verify-id {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.92rem;
}

.you-verify-id span {
  color: var(--mute);
}

.you-verify-id strong {
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.you-action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.you-settings {
  margin: 8px 0 24px;
}

.you-settings summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.you-settings summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex-shrink: 0;
}

.you-settings[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 6px;
}

.you-settings summary::-webkit-details-marker {
  display: none;
}

.you-settings-body {
  padding-top: 8px;
}

.you-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0 16px;
}

.you-activity-head .display {
  margin: 4px 0 18px;
  font-size: 1.45rem;
}

.you-activity-block {
  margin: 0 0 22px;
}

.you-activity-block h2 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.you-activity-row {
  width: 100%;
  min-height: 56px;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 16px;
  background: rgba(var(--fg-rgb), 0.04);
  color: inherit;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.you-activity-row span {
  color: var(--mute);
  font-size: 0.88rem;
}

.you-panel {
  padding: 28px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.you-panel-end {
  border-bottom: 0;
}

.you-panel h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 6px 0 14px;
}

.you-page .lede,
.screen.has-nav.you-page .lede {
  max-width: none;
  margin: 0 0 18px;
}

.you-field + .you-field {
  margin-top: 16px;
}

button.you-field-go {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

button.you-field-go:hover .you-value,
button.you-field-go:focus-visible .you-value {
  color: var(--gold);
}

.you-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}

.you-value {
  font-size: 1.05rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.you-bio p {
  font-size: 1.05rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.you-edit-form {
  margin-top: 8px;
  width: 100%;
}

.you-edit-actions,
.you-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.screen.has-nav.you-page .form,
.screen.has-nav.you-page .actions {
  width: 100%;
}

.you-page .you-panel {
  transition: border-color 0.2s ease;
}

@media (max-width: 860px) {
  .you-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .you-head {
    flex-wrap: wrap;
  }

  .you-edit {
    margin-left: 0;
  }
}

@media (max-width: 699px) {
  .you-wrap {
    margin-top: 20px;
  }

  .you-avatar .avatar,
  .you-avatar .crew-photo {
    width: 76px;
    height: 76px;
  }

  .you-name {
    font-size: 1.55rem;
  }
}

.cp-page {
  overflow-x: hidden;
}

.cp-wrap {
  width: min(640px, 100%);
  margin: 20px auto 0;
  padding-bottom: 28px;
}

.cp-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 12px;
}

.cp-progress {
  margin-bottom: 22px;
}

.cp-progress-bar,
.cp-complete {
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.12);
  overflow: hidden;
}

.cp-progress-bar span,
.cp-complete span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius: 999px;
}

.cp-progress-copy,
.cp-hint,
.cp-count,
.cp-kicker,
.cp-opt {
  color: var(--hp-body-color);
  font-size: 13px;
}

.profile-trust-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid rgba(232, 188, 108, 0.2);
  border-radius: 15px;
  background: rgba(232, 188, 108, 0.07);
  color: var(--hp-body-color);
  font-size: 13px;
  line-height: 1.5;
}

.profile-trust-note > span:first-child {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(232, 188, 108, 0.16);
  color: var(--gold);
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.cp-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.cp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.cp-nav.sticky {
  position: sticky;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 60;
  padding-top: 10px;
  background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), 0.92) 28%);
}

.cp-onboard .cp-nav.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  margin: 0;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), 0.96) 32%);
}

.cp-onboard .cp-nav.sticky .btn-gold {
  min-height: 48px;
  min-width: 140px;
  pointer-events: auto;
}

.cp-nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 8px;
  max-width: 100%;
}

.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.cp-chip.on,
.cp-chips.is-static .cp-chip {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.38);
  color: var(--gold-2);
}

.cp-chips.is-static .cp-chip {
  min-height: 36px;
  padding: 6px 12px;
}

.cp-chips.is-fun .cp-chip.on {
  transform: scale(1.03);
}

.cp-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 10px;
}

.cp-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px dashed rgba(var(--fg-rgb), 0.18);
  display: grid;
  place-items: center;
  color: rgba(var(--fg-rgb), 0.7);
  font-size: 12px;
  text-align: center;
  padding: 8px;
  min-height: 88px;
}

.cp-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-slot.is-main {
  grid-column: span 2;
  grid-row: span 2;
  border-style: solid;
}

.cp-slot-flag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.72);
  font-size: 11px;
}

.cp-slot-tools {
  position: absolute;
  inset: auto 6px 6px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cp-slot-tools button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.78);
  color: var(--cream);
  font-size: 11px;
}

.cp-slot-tools .cp-photo-del {
  background: #6b1220;
}

.cp-card-photo {
  position: relative;
}

.cp-card-photo-tools {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-card-photo-tools .btn {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.cp-slot input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cp-crop {
  margin-top: 16px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(var(--fg-rgb), 0.05);
}

.cp-crop-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--navy);
  touch-action: none;
}

.cp-crop-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.cp-card {
  margin-top: 8px;
  padding: 18px 18px 20px;
  border-radius: 22px;
  overflow: visible;
  background: rgba(var(--fg-rgb), 0.035);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.cp-card-photo:has(.cp-dots) {
  margin-bottom: 12px;
}

.cp-card-head {
  margin: 0;
}

.cp-card-empty {
  color: var(--cream);
}

.cp-card-body {
  padding: 0;
  min-width: 0;
}

.cp-card-body > .cp-chips {
  margin-top: 14px;
}

.cp-card-sec {
  margin-top: 18px;
  padding-top: 4px;
}

.cp-card-sec .cp-chips {
  margin-top: 4px;
}

.cp-dots {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 5px;
  width: max-content;
  max-width: 80px;
}

.cp-dots button {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 99px;
  background: rgba(var(--fg-rgb), 0.32);
  background-clip: content-box;
  box-sizing: content-box;
  border: 7px solid transparent;
}

.cp-dots button.on {
  background: var(--gold-2);
}

.cp-swipe {
  position: absolute;
  inset: 0;
  width: 50%;
  background: none;
  min-height: 0;
}

.cp-card-head.is-gallery {
  display: grid;
  align-items: start;
  gap: 16px;
}

.cp-gallery {
  width: 100%;
  min-width: 0;
}

.cp-gallery-stage {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--navy);
  border: 1px solid rgba(232, 197, 71, 0.22);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.cp-gallery-main {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.cp-gallery-main img,
.cp-gallery-empty {
  display: block;
  width: 100%;
  height: min(58vw, 360px);
  object-fit: cover;
}

.cp-gallery-empty {
  display: grid;
  place-items: center;
  color: var(--cream);
  font-family: var(--display);
  font-size: 3rem;
  background: linear-gradient(160deg, rgba(232, 197, 71, 0.18), rgba(var(--fg-rgb), 0.06));
}

.cp-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  transform: translateY(-50%);
  background: rgba(var(--bg-deep-rgb), 0.72);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
}

.cp-gallery-arrow.prev { left: 10px; }
.cp-gallery-arrow.next { right: 10px; }

.cp-gallery-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--bg-deep-rgb), 0.72);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.cp-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 10px;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}

.cp-gallery-thumbs button {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(var(--fg-rgb), 0.06);
}

.cp-gallery-thumbs button.on {
  border-color: var(--gold-2);
}

.cp-gallery-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-gallery-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cp-gallery-remove {
  margin-top: 0;
}

.cp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.cp-lightbox-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 2, 6, 0.86);
}

.cp-lightbox-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
}

.cp-lightbox-stage img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 18px;
  background: var(--navy);
}

.cp-lightbox-nav,
.cp-lightbox-close {
  position: absolute;
}

.cp-lightbox-nav.prev { left: 8px; top: 50%; transform: translateY(-50%); }
.cp-lightbox-nav.next { right: 8px; top: 50%; transform: translateY(-50%); }
.cp-lightbox-close { left: 50%; bottom: 12px; transform: translateX(-50%); }

.cp-lightbox-stage .cp-gallery-count {
  left: 12px;
  right: auto;
}

.cp-edit-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.cp-edit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  color: var(--cream);
  text-align: left;
  background: none;
}

.cp-edit-row em {
  display: block;
  font-style: normal;
  color: var(--hp-body-color);
  font-size: 13px;
}

.cp-tips {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.cp-tips button {
  min-height: 44px;
  text-align: left;
  color: var(--gold-2);
  background: none;
}

.cp-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
}

.cp-complete-head {
  margin-bottom: 8px;
}

.cp-vis {
  color: var(--hp-body-color);
  font-size: 13px;
}

.cp-add-row {
  display: flex;
  gap: 8px;
}

.cp-add-row input { flex: 1; }
.cp-levels { display: grid; gap: 10px; margin-top: 12px; }

@media (max-width: 699px) {
  .cp-split { grid-template-columns: 1fr; }
  .cp-slot.is-main { grid-column: span 2; }
}

.legal-page .legal-wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 36px 20px 72px;
}

.legal-meta,
.legal-note {
  color: var(--hp-body-color);
  font-size: var(--text-small);
  margin: 10px 0 18px;
}

.legal-body {
  display: grid;
  gap: 14px;
  color: var(--cream);
  font-size: var(--hp-body-size);
  line-height: var(--hp-body-leading);
}

.legal-body h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  margin-top: 8px;
}

.legal-body ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 6px;
}

.legal-dl {
  display: grid;
  gap: 10px;
  margin: 8px 0 16px;
}

.legal-dl div {
  display: grid;
  gap: 2px;
}

.legal-dl dt {
  color: var(--gold-2);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-dl dd {
  color: var(--cream);
}

.legal-card {
  margin: 18px 0;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  display: grid;
  gap: 10px;
}

.legal-card h2 {
  font-size: 1.05rem;
}

.legal-form,
.legal-form label {
  display: grid;
  gap: 8px;
}

.legal-consent {
  display: grid;
  gap: 10px;
  margin: 8px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(90, 23, 37, 0.35);
  border: 1px solid rgba(215, 25, 33, 0.28);
}

.legal-check {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  color: var(--cream);
  font-size: 0.92rem;
}

.legal-check input {
  margin-top: 3px;
}

.legal-check-label {
  color: var(--gold-2);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
}

.legal-inline {
  background: none;
  border: 0;
  color: var(--gold-2);
  text-decoration: underline;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.legal-footer {
  margin-top: 28px;
  padding: 22px 20px 28px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), 0.65));
}

.legal-footer-feedback {
  max-width: 22rem;
  margin: 0 0 22px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(var(--fg-rgb), 0.03);
}

.legal-footer-feedback-kicker {
  margin: 0 0 8px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-footer-feedback-lede {
  margin: 0;
  color: var(--cream);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.legal-footer-feedback-copy {
  margin: 4px 0 12px;
  color: var(--hp-body-color);
  font-size: 0.86rem;
  line-height: 1.4;
}

.legal-footer-feedback .btn {
  min-height: 44px;
  width: auto;
  max-width: 100%;
}

.home-page .legal-footer,
.welcome-screen .legal-footer {
  margin-top: 8px;
}

.legal-footer-kicker {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.legal-footer-links button,
.legal-footer-links a {
  background: none;
  border: 0;
  color: var(--sand);
  font-size: 13px;
  padding: 4px 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.legal-footer-links a:hover,
.legal-footer-links button:hover {
  color: var(--cream);
}

.legal-footer-links button.is-current {
  color: var(--gold);
  font-weight: 600;
}

.legal-footer-id {
  color: var(--mute);
  font-size: 12px;
  margin-top: 4px;
}

.legal-footer-quiet {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookie-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
  background: rgba(10, 4, 8, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cookie-banner {
  position: relative;
  width: min(420px, 100%);
  padding: 20px 18px 18px;
  border-radius: 20px;
  background: #2a1016;
  border: 1px solid rgba(201, 162, 39, 0.45);
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}

.cookie-banner-kicker {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cookie-banner-title {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}

.cookie-banner p {
  margin: 0;
  color: var(--hp-body-color);
  font-size: 14px;
  line-height: 1.45;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(10, 4, 8, 0.62);
}

.legal-sheet .legal-card {
  width: min(28rem, 100%);
  margin: 0;
  background: var(--navy-2);
}

.profile-safety {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.cp-onboard {
  min-height: 100dvh;
  padding: 8px 20px 132px;
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.cp-onboard-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.cp-page input,
.cp-page select,
.cp-page textarea {
  font-size: 16px;
  border-radius: 16px;
}

.cp-complete-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(201, 162, 39, 0.18);
}

.cp-complete-pct {
  margin: 0 0 4px;
  color: var(--gold-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cp-complete-banner .cp-hint {
  margin: 0;
}

@media (max-width: 640px) {
  .cp-split {
    grid-template-columns: 1fr;
  }

  .cp-nav.sticky {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .cp-nav-end {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .cp-complete-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.desk-page {
  overflow-x: hidden;
}

.desk-enter {
  animation: desk-enter 0.2s ease-out both;
}

@keyframes desk-enter {
  from {
    opacity: 0.72;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.desk-wrap {
  min-width: 0;
  padding-bottom: 12px;
}

.desk-head {
  margin-top: 28px;
  margin-bottom: 18px;
}

.desk-head .display {
  margin: 4px 0 8px;
}

.desk-head .lede {
  margin: 0;
  max-width: 36ch;
}

.desk-tools {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 0 18px;
  padding: 2px 0 4px;
}

.desk-tools::-webkit-scrollbar {
  display: none;
}

.desk-tool {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: rgba(var(--fg-rgb), 0.06);
  color: rgba(var(--fg-rgb), 0.7);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.desk-tool.on {
  background: rgba(201, 162, 39, 0.16);
  color: var(--cream);
}

.desk-page .tabs.desk-tabs {
  flex-wrap: wrap;
  margin-bottom: 14px;
  overflow: auto;
}

.desk-page .tabs.desk-tabs button {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: max-content;
  height: auto;
  padding: 8px 12px;
}

.desk-search {
  display: block;
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 16px;
  padding: 4px 0 10px;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.96) 70%, rgba(var(--bg-rgb), 0));
}

.desk-page .desk-search .search {
  height: 48px;
  margin: 0;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 16px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
}

.desk-page .desk-search .search:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(var(--fg-rgb), 0.08);
}

.desk-results {
  animation: desk-fade 0.16s ease-out;
}

@keyframes desk-fade {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

.desk-page.screen.has-nav .card.desk-card,
.desk-page.screen.has-nav .card.request {
  background: rgba(var(--fg-rgb), 0.045);
  border: 0;
  border-radius: 20px;
  padding: 16px;
  margin: 0;
}

.desk-card-open {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  min-height: 44px;
}

.desk-card-open:disabled {
  opacity: 1;
  cursor: default;
}

.desk-card-name,
.desk-card h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.desk-original-name,
.cp-card .desk-original-name {
  margin: 6px 0 0;
  color: var(--mute);
  font-size: 13px;
}

.desk-mod-row {
  margin-top: 12px;
  flex-wrap: wrap;
}

.owner-member-tools {
  margin-top: 16px;
  padding: 16px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--gold-rgb, 232, 197, 71), 0.22);
  background: rgba(var(--fg-rgb), 0.04);
  display: grid;
  gap: 10px;
}

.owner-member-tools .hp-kicker {
  margin: 0;
}

.owner-member-tools .note {
  margin: 0;
}

.owner-member-tools .desk-mod-row {
  margin-top: 0;
}

.owner-member-tools .member-access {
  margin-top: 4px;
}

.cp-wrap > .owner-member-tools,
.crew-profile-page .owner-member-tools {
  margin-top: 18px;
}

.crew-person-after {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.owner-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.desk-card > .owner-card-actions {
  padding: 0 12px 12px;
}

.crew-person-after .owner-member-tools {
  margin-top: 4px;
}

.desk-sections {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(243, 230, 201, 0.12);
  border-radius: 14px;
  display: grid;
  gap: 8px;
}

.desk-sections legend {
  padding: 0 4px;
  color: var(--sand);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desk-sections label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  font-size: 14px;
}

.desk-sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.desk-empty {
  padding: 28px 8px 12px;
  text-align: left;
}

.desk-empty-title {
  margin: 0 0 6px;
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.desk-empty-copy {
  margin: 0;
  color: var(--hp-body-color);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 34ch;
}

.crew-profile-page .crew-back {
  min-height: 44px;
}

@media (max-width: 640px) {
  .desk-page .desk-search .search {
    min-height: 48px;
  }

  .desk-tools {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-enter,
  .desk-results {
    animation: none;
  }
}

.desk-dash {
  min-height: 100dvh;
  min-height: 100svh;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  max-width: 100%;
}

.desk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  margin: 0 0 12px;
}

.desk-top-lead,
.desk-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.desk-top-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.desk-brand {
  min-width: 0;
}

.desk-brand-kicker {
  margin: 0;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.desk-brand-title {
  margin: 0;
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.desk-icon-btn,
.desk-logout {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--cream);
  display: grid;
  place-items: center;
}

.desk-icon-btn svg {
  width: 18px;
  height: 18px;
}

.desk-logout {
  width: auto;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.desk-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: 140px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
}

.desk-who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-who img,
.desk-who .avatar,
.desk-who-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
}

.desk-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
}

.desk-aside {
  display: none;
}

.desk-nav-scrim {
  display: none;
}

.desk-dash.is-nav-open .desk-nav-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
}

.desk-dash.is-nav-open .desk-aside {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 41;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 300px);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #14060c);
  border-right: 1px solid rgba(var(--fg-rgb), 0.08);
  overflow-y: auto;
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
}

.desk-aside-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 16px;
  min-width: 0;
}

.desk-aside-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: none;
}

.desk-aside-close {
  margin-left: auto;
}

.desk-aside-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.desk-nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.desk-nav-group-label {
  margin: 0 12px 2px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.desk-nav-link {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.02em;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.desk-nav-link.on {
  background: rgba(122, 36, 51, 0.42);
  color: var(--cream);
}

.desk-nav-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.2);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}

.desk-nav-link.on .desk-nav-count {
  background: rgba(201, 162, 39, 0.28);
}

.desk-main {
  min-width: 0;
}

.desk-dash .desk-head {
  margin: 4px 0 18px;
}

.desk-dash .desk-head .display {
  margin: 0 0 6px;
  font-size: 1.45rem;
  letter-spacing: -0.04em;
}

.desk-dash .desk-head .lede {
  margin: 0;
  max-width: 42rem;
  font-size: 0.95rem;
}

.desk-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 22px;
}

.desk-stat {
  min-height: 88px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 16px;
  background: rgba(var(--fg-rgb), 0.04);
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.desk-stat-icon {
  font-size: 16px;
}

.desk-stat-value {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.04em;
  color: var(--cream);
}

.desk-stat-label {
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 12px;
  line-height: 1.3;
}

.desk-section-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.desk-tasks {
  margin: 0 0 22px;
}

.desk-task-list {
  display: grid;
  gap: 8px;
}

.desk-task {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 16px;
  background: rgba(var(--fg-rgb), 0.04);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.desk-task-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.desk-task-action {
  flex: none;
  color: var(--gold);
  font-size: 13px;
  font-weight: 650;
}

.desk-setting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(var(--fg-rgb), 0.04);
}

.desk-setting .note {
  margin: 4px 0 0;
}

.desk-manage {
  margin-top: 12px;
}

.desk-manage summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  list-style: none;
}

.desk-manage summary::-webkit-details-marker {
  display: none;
}

.desk-glance {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.desk-glance-card,
.desk-partner-card,
.desk-block {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(var(--fg-rgb), 0.04);
  margin-bottom: 16px;
}

.desk-glance-card h2,
.desk-partner-card h2,
.desk-block h2 {
  margin: 4px 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.desk-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 16px;
}

.desk-status-pills span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  font-size: 12px;
}

.desk-card-lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.desk-filters {
  flex-wrap: wrap;
}

.desk-more {
  width: 100%;
  margin-top: 8px;
}

.desk-foryou .disc-post {
  max-width: 100%;
}

@media (max-width: 430px) {
  .desk-dash {
    padding-left: 14px;
    padding-right: 14px;
  }

  .desk-who span,
  .desk-logout {
    display: none;
  }

  .desk-who {
    max-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .desk-brand-title {
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  .desk-dash {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 24px 32px;
  }

  .desk-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .desk-aside {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 12px;
    height: auto;
    max-height: calc(100dvh - 80px);
    overflow: auto;
  }

  .desk-dash .desk-icon-btn[data-action="desk-nav-toggle"],
  .desk-aside-close,
  .desk-nav-scrim {
    display: none !important;
  }

  .desk-dash.is-nav-open .desk-aside {
    position: sticky;
    width: auto;
    inset: auto;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .desk-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .desk-glance {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .desk-dash {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 28px;
    padding-right: 28px;
  }

  .desk-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (min-width: 1280px) {
  .desk-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 374px) {
  .desk-task {
    flex-direction: column;
    align-items: stretch;
  }

  .desk-task-action {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .desk-setting {
    flex-direction: column;
  }

  .desk-setting .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-stat,
  .desk-nav-link,
  .desk-glance-card {
    transition: none;
  }
}

.hp-notify-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: none;
}

.live-chat-hit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: 118px;
  margin-left: 2px;
  padding: 4px 8px 4px 6px;
  border: 0;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  font-family: var(--font);
  text-align: left;
  cursor: default;
  opacity: 0.78;
}

.live-chat-hit svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.live-chat-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.15;
}

.live-chat-copy span:first-child {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.live-chat-copy span:last-child {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}

@media (max-width: 380px) {
  .live-chat-copy {
    display: none;
  }

  .live-chat-hit {
    max-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }
}

.notify-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(var(--fg-rgb), 0.78);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.16s ease, transform 0.12s ease;
}

.notify-bell svg {
  width: 22px;
  height: 22px;
  display: block;
}

.notify-bell:hover,
.notify-bell.on {
  color: var(--cream);
}

.notify-bell:active {
  transform: scale(0.94);
}

.notify-dot {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--gold);
  color: #1a0610;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}

.notify-dot.is-fresh {
  animation: notify-dot-pulse 0.55s ease-out;
}

@keyframes notify-dot-pulse {
  0% {
    transform: scale(0.86);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.notify-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none !important;
}

.notify-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 4, 8, 0.28);
  pointer-events: none;
}

.notify-layer:not(.is-open) .notify-scrim,
.notify-layer:not(.is-open) .notify-panel {
  display: none !important;
}

.notify-layer.is-open .notify-scrim,
.notify-layer.is-open .notify-panel {
  pointer-events: auto;
}

.notify-panel {
  pointer-events: auto;
  position: absolute;
  top: max(64px, calc(12px + env(safe-area-inset-top)));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--navy-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
  animation: notify-in 0.16s ease-out;
}

@keyframes notify-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px 8px;
  flex-shrink: 0;
}

.notify-back,
.notify-mark-spacer {
  display: none;
}

.notify-head p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.notify-mark {
  border: 0;
  background: none;
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 500;
  min-height: 44px;
  padding: 0;
  margin-left: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.notify-list {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 12px;
  min-height: 0;
}

.notify-group {
  margin: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.notify-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  text-align: left;
  min-height: 72px;
  padding: 12px 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transition: background 0.16s ease;
}

.notify-item + .notify-item {
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.05);
}

.notify-item:active {
  background: rgba(var(--fg-rgb), 0.04);
}

.notify-item.is-unread {
  background: rgba(201, 162, 39, 0.08);
}

.notify-face,
.notify-item .notify-face,
.notify-item .avatar.notify-face {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.notify-item-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.notify-item-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.notify-item-title .crew-verified {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.notify-item:not(.is-unread) .notify-item-title {
  color: rgba(var(--fg-rgb), 0.62);
  font-weight: 400;
}

.notify-item.is-unread .notify-item-title {
  font-weight: 600;
}

.notify-item-detail {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.notify-item-when {
  color: var(--text-muted);
  font-size: 12px;
}

.notify-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 24px 64px;
}

.notify-empty-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.88;
}

.notify-empty-title,
.notify-empty p.notify-empty-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.notify-empty-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.notify-retry,
.notify-more {
  display: block;
  width: calc(100% - 32px);
  margin: 12px 16px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.05);
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 0.92rem;
  touch-action: manipulation;
}

.notify-retry.is-inline {
  margin-top: 4px;
}

body.notify-open,
html.notify-open {
  overflow: hidden;
}

@media (max-width: 899px) {
  .notify-layer.is-open {
    pointer-events: auto !important;
  }

  .notify-scrim {
    background: #1a0c12;
  }

  .notify-panel {
    inset: 0;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: notify-sheet-in 0.18s ease-out;
  }

  .notify-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0 -8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cream);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .notify-back svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .notify-head p {
    flex: 1;
  }

  .notify-list {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
}

@keyframes notify-sheet-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notify-panel,
  .notify-dot.is-fresh,
  .notify-bell,
  .notify-item,
  .disc-menu-panel,
  .disc-confirm-card,
  .disc-post.is-leaving {
    animation: none;
    transition: none;
  }
}

.auth-page .hp-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.auth-back,
.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(var(--fg-rgb), 0.7);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.auth-logo {
  padding: 0;
}

.auth-page .auth-logo .logo-img,
.auth-logo .logo-img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.auth-back:hover,
.auth-back:focus-visible,
.auth-logo:hover,
.auth-logo:focus-visible {
  color: var(--cream);
  background: transparent;
}

.auth-page .auth-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 4px 24px;
}

.screen.topbar .auth-back,
.topbar .auth-back {
  width: auto;
  justify-content: flex-start;
}

@media (min-width: 700px) {
  .hp-notify-slot {
    margin-left: auto;
  }

  .hp-nav.club-nav .hp-actions {
    margin-left: 0;
  }

  .hp-nav:not(.club-nav) .hp-notify-slot {
    margin-left: 0;
  }
}

@media (max-width: 899px) {
  .hp-nav:not(.club-nav) {
    gap: 8px;
  }

  .hp-nav:not(.club-nav) .hp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .hp-nav:not(.club-nav) .hp-notify-slot {
    margin-left: 0;
  }

  .hp-nav:not(.club-nav) .hp-login {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  .hp-nav:not(.club-nav) .hp-join {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .club-nav .hp-actions {
    display: none;
  }
}

@media (max-width: 520px) {
  .hp-nav:not(.club-nav) .hp-join {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notify-panel {
    animation: none;
  }
}

/* Premium profile-photo editor */
.cp-avatar-editor {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 24px;
  background: rgba(44, 22, 28, 0.82);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.cp-avatar-picker {
  position: relative;
  display: block;
  width: 164px;
  height: 164px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cp-avatar-picker:focus-visible,
.cp-photo-button:focus-visible {
  outline: 3px solid rgba(184, 139, 59, 0.3);
  outline-offset: 4px;
}

.cp-avatar-visual {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: linear-gradient(145deg, #f8f5ee, #e9e2d5);
  box-shadow: 0 15px 34px rgba(21, 30, 45, 0.16), inset 0 0 0 1px rgba(20, 30, 50, 0.05);
  transition: box-shadow 180ms ease;
}

.cp-avatar-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cp-avatar-visual img[hidden] {
  display: none;
}

.cp-avatar-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #8d7450;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.cp-avatar-hover {
  position: absolute;
  inset: auto 12px 12px;
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(13, 20, 31, 0.72);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cp-avatar-picker:hover .cp-avatar-hover,
.cp-avatar-picker:focus-visible .cp-avatar-hover {
  opacity: 1;
  transform: none;
}

.cp-avatar-picker:hover .cp-avatar-visual {
  box-shadow: 0 18px 40px rgba(21, 30, 45, 0.2), inset 0 0 0 1px rgba(20, 30, 50, 0.05);
}

.cp-avatar-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(12, 18, 28, 0.54);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.cp-avatar-copy {
  min-width: 0;
}

.cp-avatar-copy h2 {
  margin: 0;
  color: var(--cream);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.cp-avatar-copy > p:not(.hp-kicker) {
  max-width: 520px;
  margin: 9px 0 0;
  color: var(--mute);
  line-height: 1.55;
}

.cp-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cp-photo-button {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 11px 17px;
  border: 1px solid rgba(20, 30, 50, 0.12);
  border-radius: 999px;
  color: #1a0610;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(20, 30, 50, 0.05);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.cp-photo-button:hover {
  border-color: rgba(184, 139, 59, 0.35);
  box-shadow: 0 8px 20px rgba(20, 30, 50, 0.08);
  transform: translateY(-1px);
}

.cp-photo-button.is-remove {
  color: #97433d;
}

.cp-photo-button:disabled,
.cp-avatar-picker[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.62;
}

.cp-photo-additional {
  position: relative;
  overflow: hidden;
}

.cp-photo-in {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
  font-size: 64px;
  clip: auto !important;
  clip-path: none !important;
}

.cp-photo-gallery {
  margin-top: 18px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
  padding-top: 15px;
}

.cp-photo-gallery summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cp-photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.cp-photo-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 16px;
  background: #ebe7df;
}

.cp-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-photo-thumb button {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 18, 28, 0.72);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cp-photo-thumb-actions {
  position: absolute;
  inset: auto 6px 6px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.cp-photo-thumb-actions .is-remove {
  background: rgba(94, 30, 29, 0.78);
}

.cp-photo-modal {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.cp-photo-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(10, 15, 24, 0.58);
  cursor: default;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cp-photo-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 26px;
  background: rgba(34, 16, 22, 0.98);
  box-shadow: 0 28px 90px rgba(4, 8, 16, 0.3);
  animation: cpPhotoModalIn 180ms ease-out both;
}

@keyframes cpPhotoModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.cp-photo-modal-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.cp-photo-modal-card h2 {
  margin: 0;
  color: var(--cream);
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.cp-photo-close {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--mute);
  background: rgba(var(--fg-rgb), 0.08);
  font: inherit;
  font-size: 25px;
  cursor: pointer;
}

.cp-crop-frame {
  position: relative;
  width: min(100%, 326px);
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(184, 139, 59, 0.22);
  border-radius: 50%;
  background: #e7e2d9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  touch-action: none;
  user-select: none;
}

.cp-crop-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.cp-crop-frame img:active {
  cursor: grabbing;
}

.cp-crop-help {
  margin: 13px 0 11px;
  color: var(--mute);
  text-align: center;
  font-size: 13px;
}

.cp-zoom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
}

.cp-zoom input {
  width: 100%;
  accent-color: #a87a32;
}

.cp-photo-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cp-photo-modal-actions .btn {
  min-height: 46px;
}

.cp-remove-card {
  width: min(100%, 410px);
}

.cp-remove-card > p:not(.hp-kicker) {
  color: var(--mute);
  line-height: 1.55;
}

.you-photo-area {
  flex: 0 0 auto;
  width: auto;
}

.cp-avatar-editor.is-compact {
  display: flex;
  width: 190px;
  flex-direction: column;
  gap: 13px;
  padding: 15px;
  border-radius: 22px;
}

.cp-avatar-editor.is-compact .cp-avatar-picker {
  width: 138px;
  height: 138px;
}

.cp-avatar-editor.is-compact .cp-avatar-copy {
  width: 100%;
}

.cp-avatar-editor.is-compact .cp-avatar-copy > .hp-kicker,
.cp-avatar-editor.is-compact .cp-avatar-copy > h2,
.cp-avatar-editor.is-compact .cp-avatar-copy > p:not(.hp-kicker),
.cp-avatar-editor.is-compact .cp-avatar-copy > div:not(.cp-avatar-actions) {
  display: none;
}

.cp-avatar-editor.is-compact .cp-avatar-actions {
  display: grid;
  width: 100%;
  gap: 7px;
  margin-top: 0;
}

.cp-avatar-editor.is-compact .cp-photo-button {
  width: 100%;
  min-height: 44px;
  padding-inline: 10px;
  font-size: 12px;
}

@media (max-width: 700px) {
  .cp-avatar-editor {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 17px;
    border-radius: 21px;
  }

  .cp-avatar-picker {
    width: 112px;
    height: 112px;
  }

  .cp-avatar-placeholder { font-size: 34px; }

  .cp-avatar-hover {
    inset: auto 7px 7px;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 10px;
    opacity: 1;
    transform: none;
  }

  .cp-avatar-copy h2 { font-size: 23px; }
  .cp-avatar-copy > p:not(.hp-kicker),
  .cp-avatar-copy > div > p:not(.hp-kicker) { display: none; }

  .cp-avatar-actions {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  .cp-photo-button {
    width: 100%;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .cp-photo-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cp-photo-modal {
    align-items: end;
    padding: 12px 10px max(10px, env(safe-area-inset-bottom));
  }

  .cp-photo-modal-card {
    width: 100%;
    max-height: calc(100dvh - 22px);
    padding: 18px;
    border-radius: 24px;
  }

  .cp-crop-frame { width: min(100%, 284px); }

  .cp-photo-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .you-photo-area { width: auto; }

  .cp-avatar-editor.is-compact {
    display: grid;
    width: 100%;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px;
  }

  .cp-avatar-editor.is-compact .cp-avatar-picker {
    width: 112px;
    height: 112px;
  }
}

@media (max-width: 390px) {
  .cp-avatar-editor,
  .cp-avatar-editor.is-compact {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
  }

  .cp-avatar-picker,
  .cp-avatar-editor.is-compact .cp-avatar-picker {
    width: 96px;
    height: 96px;
  }

  .cp-avatar-copy h2 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-photo-modal-card { animation: none; }
  .cp-avatar-hover,
  .cp-photo-button { transition: none; }
}

/* Activity-led public homepage */
.hp-page > main {
  max-width: 1280px;
}

.welcome-screen.hp-page {
  overflow-x: hidden;
}

@media (min-width: 900px) {
  .hp-calendar-preview {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.hp-calendar-preview {
  padding: 36px clamp(16px, 4vw, 48px) 56px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  background: linear-gradient(180deg, rgba(var(--fg-rgb), 0.03), transparent 42%);
}

.hp-calendar-preview .hp-month-calendar {
  max-width: min(1320px, 100%);
  margin: 0 auto;
  padding-top: 0;
  border-top: 0;
}

.hp-calendar-preview .cal-tile {
  min-height: 92px;
}

.hp-calendar-preview .cal-tile-label {
  font-size: 0.72rem;
}

.hp-activity-hero {
  display: grid;
  gap: 30px;
  align-items: center;
  padding: 42px 0 70px;
  text-align: left;
}

.hp-activity-hero .hp-kicker,
.hp-activity-hero .hp-sub,
.hp-activity-hero .hp-marks {
  margin-left: 0;
  margin-right: 0;
}

.hp-activity-hero h1 {
  max-width: 11.5ch;
  margin: 0 0 20px;
  font-size: clamp(2.65rem, 7vw, 4rem);
  overflow-wrap: normal;
  word-break: normal;
}

.hp-activity-hero .hp-sub {
  max-width: 31ch;
  margin-bottom: 28px;
  font-size: clamp(1rem, 2vw, 1.16rem);
}

.hp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hp-activity-hero .hp-cta {
  min-width: 174px;
}

.hp-cta-secondary {
  display: inline-flex;
  min-width: 174px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.035);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hp-cta-secondary:hover {
  border-color: rgba(201, 162, 39, 0.48);
  background: rgba(var(--fg-rgb), 0.07);
  transform: translateY(-1px);
}

.hp-hero-visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  background: var(--navy-2);
}

.hp-hero-visual::after,
.hp-community-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08);
  border-radius: inherit;
}

.hp-community-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hp-home-section {
  padding: 72px 0;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  scroll-margin-top: 84px;
}

.hp-suggest {
  padding-top: 12px;
  border-top: 0;
}

.hp-activity-hero {
  padding-bottom: 28px;
}

.hp-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.hp-section-heading .hp-kicker {
  margin-bottom: 10px;
}

.hp-section-heading h2,
.hp-community h2,
.hp-final-cta h2 {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.hp-section-heading > p {
  margin: 0 0 3px;
  color: var(--text-secondary);
  font-size: 1rem;
}

.hp-event-switch {
  display: inline-flex;
  gap: 4px;
  margin: -4px 0 22px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.045);
}

.hp-event-switch button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.hp-event-switch button.is-active {
  color: #1a0610;
  background: var(--cream-fill);
}

.hp-event-switch button:focus-visible {
  outline: 3px solid rgba(232, 197, 71, 0.34);
  outline-offset: 2px;
}

.hp-event-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(82%, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 1px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.hp-event-grid::-webkit-scrollbar {
  display: none;
}

.hp-event-card {
  position: relative;
  display: grid;
  min-height: 260px;
  padding: 22px;
  text-align: left;
  scroll-snap-align: start;
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 22px;
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.035);
  font: inherit;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.hp-event-card.is-idea .hp-event-status {
  position: static;
  justify-self: start;
  margin: 0 0 8px;
}

.hp-event-card.is-idea .hp-event-name {
  align-self: start;
}

.hp-event-card.is-idea .hp-event-foot {
  margin-top: 16px;
}

.hp-event-photo {
  position: relative;
  display: block;
  margin: 0 0 16px;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  max-height: 140px;
  background: rgba(var(--fg-rgb), 0.06);
}

.hp-event-photo-zoom {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(1.04);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  will-change: transform;
}

.hp-event-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

.hp-event-card.is-idea[data-idea="coffee"] .hp-event-photo img,
.hp-suggest-cover img[src*="category-coffee"] {
  object-fit: cover;
  object-position: 50% 48%;
}

.hp-event-card.is-idea[data-idea="football"] .hp-event-photo img,
.hp-suggest-cover img[src*="category-football"] {
  object-position: 50% 38%;
}

.hp-ideas-kicker {
  margin: 22px 0 12px;
  color: var(--gold-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-idea-strip {
  margin: 0 0 18px;
}

.hp-suggest-cover {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.hp-suggest-cover img {
  width: 100%;
  height: 180px;
  max-height: 180px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}

.hp-suggest-cover figcaption {
  margin-top: 8px;
  color: var(--hp-body-color);
  font-size: 0.88rem;
}

.hp-event-card.is-finished {
  background: rgba(var(--fg-rgb), 0.024);
}

.hp-event-status {
  position: absolute;
  top: 23px;
  right: 20px;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(var(--fg-rgb), 0.62);
  background: rgba(var(--fg-rgb), 0.07);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hp-event-card:hover {
  border-color: rgba(201, 162, 39, 0.3);
  background: rgba(var(--fg-rgb), 0.06);
}

@media (hover: hover) and (pointer: fine) {
  .hp-event-card:hover .hp-event-photo-zoom {
    transform: scale(1.12);
  }
}

.hp-event-card:focus-visible,
.hp-category-grid button:focus-visible,
.hp-section-link:focus-visible,
.hp-cta-secondary:focus-visible {
  outline: 3px solid rgba(232, 197, 71, 0.34);
  outline-offset: 3px;
}

.hp-event-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 15px;
  background: rgba(var(--fg-rgb), 0.075);
  font-size: 24px;
}

.hp-event-name {
  align-self: end;
  margin-bottom: 12px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hp-event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 13px;
}

.hp-event-facts span:not(:last-child)::after {
  margin-left: 12px;
  color: rgba(var(--fg-rgb), 0.2);
  content: "·";
}

.hp-event-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  color: var(--text-muted);
  font-size: 12px;
}

.hp-event-foot strong {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 600;
}

.hp-event-empty {
  display: grid;
  min-height: 190px;
  place-content: center;
  text-align: center;
  border-radius: 22px;
  background: rgba(var(--fg-rgb), 0.025);
}

.hp-event-empty p {
  margin: 0 0 4px;
  color: var(--cream);
  font-size: 1.15rem;
  font-weight: 600;
}

.hp-event-empty span {
  color: var(--text-muted);
  font-size: 14px;
}

.hp-event-skeleton span {
  min-height: 260px;
  border-radius: 22px;
  background: linear-gradient(100deg, rgba(var(--fg-rgb), 0.025), rgba(var(--fg-rgb), 0.07), rgba(var(--fg-rgb), 0.025));
  background-size: 220% 100%;
  animation: hpEventShimmer 1.25s linear infinite;
}

@keyframes hpEventShimmer {
  to { background-position: -220% 0; }
}

.hp-section-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--gold-2);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.hp-month-calendar {
  max-width: 780px;
  margin: 58px auto 0;
  padding-top: 54px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-month-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.hp-month-heading .hp-kicker {
  margin-bottom: 8px;
}

.hp-month-heading h3 {
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.hp-month-heading > span {
  max-width: 24ch;
  color: var(--text-muted);
  text-align: right;
  font-size: 13px;
  line-height: 1.45;
}

.hp-month-calendar .cal-board {
  padding: 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 24px;
  background: rgba(var(--fg-rgb), 0.025);
}

.hp-calendar-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(201, 162, 39, 0.075);
}

.hp-calendar-lock .hp-kicker {
  margin-bottom: 5px;
}

.hp-calendar-lock strong,
.hp-calendar-lock > div > span {
  display: block;
}

.hp-calendar-lock strong {
  color: var(--cream);
  font-size: 15px;
}

.hp-calendar-lock > div > span {
  max-width: 48ch;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.hp-calendar-lock .hp-cta {
  flex: 0 0 auto;
  min-width: 170px;
  min-height: 46px;
  padding-inline: 18px;
  font-size: 13px;
}

.hp-calendar-gate {
  position: relative;
}

.hp-calendar-gate-board {
  position: relative;
  max-height: 340px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hp-calendar-gate-board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--bg-rgb), 0.55);
}

.hp-calendar-preview .hp-month-calendar.is-locked .cal-tile,
.hp-month-calendar.is-locked .cal-tile {
  min-height: 28px;
  padding: 2px 4px;
  box-shadow: none;
}

.hp-calendar-gate-board .cal-month,
.hp-calendar-gate-board .cal-grid {
  filter: blur(3px);
  opacity: 0.34;
}

.hp-month-calendar.is-locked .hp-calendar-lock {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  right: auto;
  width: min(520px, calc(100% - 32px));
  margin: 0;
  transform: translate(-50%, -50%);
  background: rgba(var(--bg-rgb), 0.94);
  border: 1px solid rgba(201, 162, 39, 0.38);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.hp-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hp-category-grid button {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--cream);
  background: rgba(var(--fg-rgb), 0.04);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hp-category-grid button:hover,
.hp-category-grid button.is-active {
  border-color: rgba(201, 162, 39, 0.3);
  background: rgba(201, 162, 39, 0.1);
  transform: translateY(-1px);
}

.hp-category-grid button span {
  font-size: 22px;
}

.hp-community {
  display: grid;
  gap: 28px;
  align-items: center;
}

.hp-community-copy > p:not(.hp-kicker) {
  max-width: 33ch;
  margin: 18px 0 9px;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.5;
}

.hp-community-copy > span {
  color: var(--text-muted);
  font-size: 13px;
}

.hp-story-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--gold-2);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.hp-community-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
}

.hp-about-story {
  scroll-margin-top: 84px;
}

.hp-about-story > .hp-kicker {
  margin-bottom: 12px;
}

.hp-story-intro {
  display: grid;
  gap: 18px;
  align-items: end;
}

.hp-story-intro h2 {
  max-width: 13ch;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.hp-story-intro > p {
  max-width: 43ch;
  color: rgba(var(--fg-rgb), 0.65);
  font-size: 1rem;
  line-height: 1.6;
}

.hp-story-details {
  margin-top: 30px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.09);
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.09);
}

.hp-story-details summary {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.hp-story-details summary::-webkit-details-marker {
  display: none;
}

.hp-story-details summary > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), 0.07);
  font-size: 20px;
  transition: transform 180ms ease;
}

.hp-story-details[open] summary > span {
  transform: rotate(45deg);
}

.hp-story-content {
  padding: 8px 0 34px;
}

.hp-story-columns {
  display: grid;
  gap: 28px;
}

.hp-story-columns article {
  padding: 22px;
  border-radius: 20px;
  background: rgba(var(--fg-rgb), 0.03);
}

.hp-story-columns .hp-kicker {
  margin-bottom: 12px;
}

.hp-story-columns article > p:not(.hp-kicker) {
  margin: 0 0 12px;
  color: rgba(var(--fg-rgb), 0.64);
  line-height: 1.6;
}

.hp-story-columns article > p:last-child {
  margin-bottom: 0;
}

.hp-story-points {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  list-style: none;
}

.hp-story-points li {
  padding: 18px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-story-points li > span {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.hp-story-points strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.hp-story-points p {
  max-width: 30ch;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.hp-story-close {
  margin-top: 26px;
  color: var(--gold);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hp-founding {
  max-width: 700px;
  margin: 0 auto;
  padding: 72px 0;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-founding h2 {
  max-width: none;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  letter-spacing: -0.04em;
}

.hp-founding > p {
  max-width: 43ch;
}

.hp-founding-note {
  display: block;
  margin: 18px auto 0;
  max-width: 36ch;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hp-final-cta {
  padding: 78px 0 40px;
  text-align: center;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.hp-final-cta h2 {
  margin-bottom: 12px;
}

.hp-final-cta .hp-founding-note {
  margin: 0 auto 24px;
}

.hp-partner {
  text-align: center;
  padding: 88px 0 56px;
  scroll-margin-top: 120px;
}

.hp-partner h2 {
  max-width: 14ch;
  margin: 0 auto 18px;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.6vw, 2.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.hp-partner > p {
  max-width: 38ch;
  margin: 0 auto 16px;
  color: var(--hp-body-color);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hp-partner .hp-cta {
  margin-top: 18px;
  width: min(100%, 280px);
}

.partner-enquire-page .partner-enquire {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 28px 0 64px;
}

.partner-enquire h1 {
  margin: 8px 0 14px;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--hp-display-weight);
  letter-spacing: var(--hp-display-tracking);
  line-height: var(--hp-display-leading);
}

.partner-enquire > p {
  margin: 0 0 22px;
  max-width: 42ch;
  color: var(--hp-body-color);
  font-size: 1.02rem;
  line-height: 1.6;
}

.partner-enquire-label {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  color: rgba(var(--fg-rgb), 0.62);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.partner-enquire-label input,
.partner-enquire-label textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  font: inherit;
  letter-spacing: 0;
  font-weight: 400;
}

.partner-enquire-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 4px;
}

.partner-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.partner-intents button {
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  padding: 8px 14px;
  font: inherit;
  font-size: 0.92rem;
}

.partner-intents button.on {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.14);
}

.partner-enquire-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  justify-items: start;
}

.partner-enquire-actions .hp-cta {
  width: min(100%, 280px);
}

.partner-enquire-next {
  margin: 0 0 28px;
  padding-left: 1.2em;
  max-width: 46ch;
  color: var(--hp-body-color);
  line-height: 1.6;
}

.partner-enquire-next li + li {
  margin-top: 10px;
}

.desk-partner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 18px;
  color: rgba(var(--fg-rgb), 0.7);
}

.desk-partner-stats strong {
  display: block;
  color: var(--cream);
  font-size: 1.4rem;
}

.desk-partner-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.desk-partner-detail {
  margin-top: 12px;
}

@media (min-width: 700px) {
  .partner-enquire-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.partner-compose-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--navy);
}

.partner-compose {
  width: min(440px, 100%);
  text-align: center;
}

.partner-compose h1 {
  margin: 10px 0 12px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--cream);
}

.partner-compose > p {
  margin: 0 auto 28px;
  max-width: 38ch;
  color: var(--hp-body-color);
  font-size: 1rem;
  line-height: 1.5;
}

.partner-compose-actions {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.partner-compose-actions .hp-cta,
.partner-compose-actions .hp-cta-secondary {
  width: min(100%, 280px);
  text-decoration: none;
}

@media (min-width: 700px) {
  .hp-activity-hero {
    grid-template-columns: minmax(260px, 0.72fr) minmax(460px, 1.35fr);
    gap: clamp(28px, 5vw, 64px);
    min-height: auto;
    padding: 56px 0 72px;
  }

  .hp-hero-visual {
    aspect-ratio: 16 / 9;
    border-radius: 30px;
  }

  .hp-event-grid {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .hp-event-grid.is-ideas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hp-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hp-community {
    grid-template-columns: minmax(260px, 0.72fr) minmax(430px, 1.28fr);
    gap: clamp(42px, 7vw, 90px);
  }

  .hp-story-intro {
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
    gap: 60px;
  }

  .hp-story-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-story-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  .hp-activity-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 64px;
  }

  .hp-hero-visual {
    aspect-ratio: 16 / 9;
  }

  .hp-event-grid.is-ideas {
    grid-auto-flow: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .welcome-screen .hp-links button:nth-child(4),
  .welcome-screen .hp-links button:nth-child(5) {
    display: none;
  }
}

@media (min-width: 900px) {
  .hp-activity-hero {
    grid-template-columns: minmax(300px, 0.7fr) minmax(520px, 1.4fr);
    min-height: auto;
    padding: 48px 0 28px;
    align-items: center;
  }

  .hp-hero-visual {
    aspect-ratio: 16 / 9;
  }

  .hp-calendar-preview .cal-tile {
    min-height: 108px;
    padding: 10px 8px;
  }
}

@media (max-width: 699px) {
  .hp-activity-hero .hp-kicker {
    margin-bottom: 15px;
  }

  .hp-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hp-activity-hero .hp-cta,
  .hp-cta-secondary {
    min-width: 0;
    min-height: 48px;
    padding-inline: 14px;
    font-size: 14px;
  }

  .hp-section-heading {
    display: block;
    margin-bottom: 22px;
  }

  .hp-section-heading > p {
    margin-top: 9px;
  }

  .hp-event-switch {
    width: 100%;
  }

  .hp-event-switch button {
    flex: 1;
    min-height: 44px;
    padding-inline: 10px;
  }

  .hp-home-section {
    padding: 58px 0;
  }

  .hp-suggest {
    padding-top: 4px;
    padding-bottom: 48px;
  }

  .hp-calendar-preview {
    padding: 28px 12px 44px;
  }

  .hp-calendar-preview .cal-tile {
    min-height: 58px;
    padding: 5px 3px;
    border-radius: 10px;
  }

  .hp-calendar-preview .cal-tile-label {
    display: none;
  }

  .hp-month-heading {
    display: block;
    margin-bottom: 20px;
  }

  .hp-month-heading > span {
    display: block;
    margin-top: 8px;
    text-align: left;
  }

  .hp-month-calendar .cal-board {
    padding: 14px 10px;
    border-radius: 18px;
  }

  .hp-month-calendar .cal-week,
  .hp-month-calendar .cal-grid {
    gap: 3px;
  }

  .hp-calendar-lock {
    display: grid;
    gap: 15px;
    padding: 18px;
  }

  .hp-calendar-lock .hp-cta {
    width: 100%;
    min-height: 48px;
  }

  .hp-event-card {
    min-height: 244px;
    padding: 19px;
  }

  .hp-community-visual {
    border-radius: 20px;
  }
}

@media (max-width: 360px) {
  .hp-hero-actions {
    grid-template-columns: 1fr;
  }

  .hp-category-grid {
    grid-template-columns: 1fr;
  }

  .hp-nav.club-nav .theme-toggle-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-event-skeleton span { animation: none; }
  .hp-event-card,
  .hp-category-grid button,
  .hp-cta-secondary { transition: none; }
}

/* Member → Verified Host */
.crew-host-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(214, 174, 52, 0.28);
  border-radius: 999px;
  color: var(--gold, #d6ae34);
  background: rgba(214, 174, 52, 0.08);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
}

.crew-host-badge > span {
  font-size: 12px;
}

.host-profile-line {
  margin: 9px 0 0;
}

.meetup-card-host {
  margin: 3px 0 0;
}

.meetup-host-card .crew-host-badge {
  margin-left: 8px;
}

.host-flow-page {
  min-height: 100dvh;
}

.host-flow-wrap {
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 42px 0 120px;
}

.host-flow-head {
  margin-bottom: 28px;
}

.host-flow-head .display {
  margin: 8px 0 10px;
}

.host-form {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.035);
}

.host-form input,
.host-form select,
.host-form textarea,
.host-review-card input,
.host-review-card select,
.host-review-card textarea {
  min-height: 48px;
  font-size: 16px;
}

.activity-photo-field {
  display: grid;
  gap: 12px;
}

.activity-photo-preview,
.host-review-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.activity-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.activity-photo-pick {
  position: relative;
  cursor: pointer;
}

.activity-photo-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.host-profile-panel .actions {
  margin-top: 16px;
}

.host-status-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.host-status-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.host-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.host-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.host-status.is-pending {
  color: #e8d48a;
  background: rgba(230, 200, 80, 0.16);
}

.host-status.is-approved {
  color: #edd36f;
  background: rgba(214, 174, 52, 0.12);
}

.host-request-member {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.host-request-member .host-request-face,
.host-request-member img.host-request-face {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.host-request-member strong {
  display: block;
  min-width: 0;
}

.host-review-actions {
  flex-wrap: wrap;
}

.host-status.is-rejected,
.host-status.is-cancelled {
  color: #d6c4c9;
  background: rgba(255, 255, 255, 0.055);
}

.host-review-note {
  margin: 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(214, 174, 52, 0.08);
  color: var(--muted);
  font-size: 13px;
}

.host-eligibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.host-eligibility-grid span {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 13px;
}

.host-eligibility-grid span.is-done {
  color: #f1d778;
  background: rgba(214, 174, 52, 0.09);
}

.host-review-card {
  display: grid;
  gap: 14px;
}

.host-review-card p {
  margin: 0;
}

.host-review-edit {
  padding: 12px 0;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.host-review-edit summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--gold, #d6ae34);
  font-weight: 700;
  cursor: pointer;
}

.host-review-edit .form {
  margin-top: 10px;
}

.host-recent-label {
  margin: 28px 0 10px;
}

@media (max-width: 640px) {
  .host-flow-wrap {
    width: min(100% - 28px, 760px);
    padding-top: 26px;
  }

  .host-form {
    padding: 18px;
    border-radius: 20px;
  }

  .host-eligibility-grid {
    grid-template-columns: 1fr;
  }

  .host-status-head {
    align-items: flex-start;
  }

  .activity-photo-actions,
  .host-profile-panel .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .activity-photo-actions .btn,
  .host-profile-panel .btn,
  .host-review-card .row .btn {
    min-height: 48px;
  }
}

.qr-page {
  overflow-y: auto;
}

.qr-wrap {
  width: min(100% - 32px, 560px);
  margin: 0 auto;
  padding: 18px 0 max(48px, env(safe-area-inset-bottom));
}

.qr-shell {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}

.qr-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.qr-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.qr-title {
  max-width: 16ch;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: var(--hp-display-tracking);
  line-height: 1.1;
}

.qr-scan-copy,
.qr-caption,
.qr-line,
.qr-url,
.qr-note {
  color: var(--hp-body-color);
  font-size: 15px;
  line-height: 1.5;
}

.qr-scan-desktop {
  display: none;
}

.qr-card {
  width: min(100%, 320px);
  margin: 8px 0 0;
  padding: 22px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.qr-code {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.qr-caption {
  margin-top: 2px;
  font-weight: 600;
  color: var(--cream);
}

.qr-line {
  max-width: 24ch;
  margin-top: 4px;
  color: rgba(var(--fg-rgb), 0.82);
}

.qr-url {
  font-size: 13px;
  letter-spacing: 0.01em;
}

.qr-guide-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: var(--gold-2);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 197, 71, 0.35);
}

.qr-guide {
  width: 100%;
  margin-top: 28px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 24px;
  background: rgba(var(--fg-rgb), 0.04);
  text-align: left;
  scroll-margin-top: 18px;
}

.qr-guide h2 {
  margin: 4px 0 16px;
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  letter-spacing: -0.03em;
}

.qr-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
}

.qr-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(var(--fg-rgb), 0.7);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.qr-tabs button.is-active {
  background: rgba(var(--fg-rgb), 0.12);
  color: var(--cream);
}

.qr-steps {
  display: grid;
  gap: 12px;
  list-style: none;
}

.qr-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 12px;
  border-radius: 16px;
  background: rgba(var(--bg-rgb), 0.35);
}

.qr-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(232, 197, 71, 0.12);
  color: var(--gold-2);
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.qr-steps p {
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.qr-steps span {
  display: block;
  margin-top: 4px;
  color: var(--hp-body-color);
  font-size: 13px;
}

.qr-done {
  margin-top: 16px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.qr-note {
  margin-top: 10px;
  font-size: 13px;
}

.qr-page a.crew-back {
  text-decoration: none;
}

@media (min-width: 860px) {
  .qr-wrap {
    width: min(100% - 48px, 640px);
    padding-top: 28px;
  }

  .qr-scan-desktop {
    display: block;
  }

  .qr-scan-mobile {
    display: none;
  }

  .qr-card {
    width: 340px;
    padding: 26px;
  }

  .qr-title {
    max-width: none;
  }
}

@media (max-width: 390px) {
  .qr-wrap {
    width: min(100% - 24px, 560px);
  }

  .qr-card {
    padding: 16px;
    border-radius: 22px;
  }
}

/* Android + coarse-pointer phones */
@media (max-width: 899px) {
  :root {
    --nav-safe-bottom: max(var(--android-nav-min, 0px), env(safe-area-inset-bottom, 0px));
    --tab-bar-space: calc(80px + var(--nav-safe-bottom));
  }

  html,
  body {
    overscroll-behavior-y: auto;
  }

  button,
  [data-go],
  [data-action],
  .tab-bar-item,
  .hp-text,
  .hp-join,
  .notify-bell,
  .live-chat-hit {
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    font-size: 16px;
    max-width: 100%;
  }

  html,
  body {
    height: auto !important;
    min-height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stage,
  .device {
    display: block;
    height: auto !important;
    min-height: 100svh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: visible !important;
  }

  .screen,
  .screen.has-nav,
  .screen.welcome-screen,
  .screen.welcome-screen.hp-page,
  .screen.welcome-screen.hp-page.auth-page {
    display: block;
    flex: none;
    height: auto !important;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .auth-wrap {
    flex: none;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 8px;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }

  .auth-card {
    width: 100%;
    padding: 22px 18px 24px;
    border-radius: 20px;
  }

  .auth-card h1 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .device:has(.chat-screen) {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .screen.chat-screen {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .meetup-filters {
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }

  html.kb-open .tab-bar,
  html.kb-open .tab-desk-hit {
    transform: translateY(120%);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }

  html.kb-open .screen.has-nav,
  html.kb-open .screen.welcome-screen.hp-page {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html.is-inapp,
  html.is-inapp body,
  html.is-inapp .stage,
  html.is-inapp .device,
  html.is-inapp .screen {
    height: auto !important;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .hp-calendar-preview {
    width: auto;
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }
}

html.is-android {
  --android-nav-min: 20px;
}

@media (max-width: 899px) {
  html.is-android .tab-bar {
    padding-bottom: calc(12px + var(--nav-safe-bottom));
  }

  html.is-android .tab-bar-item:active {
    background: rgba(var(--fg-rgb), 0.08);
  }
}

.identity-tick {
  display: inline;
  margin-left: 6px;
  color: var(--gold-2);
  font-size: 0.82em;
  font-weight: 600;
}

.msn-page {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.msn-ig {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 132px);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.msn-rail {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  min-height: 0;
  min-width: 0;
  padding: 8px 0 0;
}

.msn-stage {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.msn-page.is-thread .msn-rail {
  display: none;
}

.msn-page.is-thread .msn-stage {
  display: flex;
}

.msn-stage-thread {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.msn-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.msn-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.msn-head .display {
  font-size: 1.55rem;
}

.msn-rail-head {
  padding: 4px 4px 0;
}

.msn-rail-title {
  min-width: 0;
}

.msn-rail-head .display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.28rem;
  margin: 0;
  line-height: 1.2;
}

.msn-presence,
.msn-meta,
.msn-life,
.msn-hint {
  margin: 0;
  color: var(--hp-body-color);
  font-size: 0.9rem;
}

.msn-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.05);
}

.msn-tabs button {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--fg-rgb), 0.62);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.msn-tabs button.on {
  color: #1a0610;
  background: var(--cream-fill);
}

.msn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}

.msn-person,
.msn-person.is-button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  min-width: 0;
  padding: 11px 10px;
  border-radius: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.msn-person:not(.is-button) {
  cursor: default;
}

.msn-person.is-button:hover {
  background: rgba(var(--fg-rgb), 0.06);
}

.msn-person.is-button:active {
  background: rgba(var(--fg-rgb), 0.1);
}

.msn-person.is-on {
  background: rgba(var(--fg-rgb), 0.09);
  box-shadow: inset 3px 0 0 var(--gold);
}

.msn-person.has-unread .msn-person-copy strong {
  font-weight: 750;
}

.msn-face {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.msn-face-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.msn-thread-head .msn-face-wrap {
  width: 40px;
  height: 40px;
}

.msn-thread-head .msn-face {
  width: 40px;
  height: 40px;
}

.msn-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 2px rgba(var(--bg-rgb), 0.96);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.msn-face-wrap.is-online .msn-online-dot {
  opacity: 1;
  transform: scale(1);
}

.msn-status-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18);
}

.msn-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.msn-presence.is-online {
  color: #8ee6a8;
}

.msn-presence.is-online .msn-status-dot {
  display: inline-block;
}

.msn-thread-head {
  align-items: center;
  gap: 12px;
}

.msn-person-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.msn-person-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.msn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.msn-status-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msn-status-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(var(--fg-rgb), 0.38);
  background: transparent;
}

.msn-status.is-online {
  color: #8ee6a8;
}

.msn-status.is-online .msn-status-pip {
  border-color: #34c759;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.16);
}

.msn-status.is-typing {
  color: var(--cream);
}

.msn-status.is-typing .msn-status-pip {
  border-color: var(--gold);
  background: var(--gold);
}

.msn-person-open {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  padding: 0;
}

.msn-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 2 / -1;
}

.msn-empty {
  max-width: 36ch;
  color: var(--hp-body-color);
  display: grid;
  gap: 12px;
  padding: 12px 4px;
}

.msn-empty-home {
  margin: 18px auto 8px;
  text-align: center;
  justify-items: center;
}

.msn-empty-home h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.msn-empty-home .btn {
  margin-top: 4px;
}

.msn-log {
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 8px 2px 16px;
}

.msn-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.08);
}

.msn-bubble.is-mine {
  align-self: flex-end;
  background: rgba(201, 162, 39, 0.22);
}

.msn-bubble p {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msn-compose {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb), 0.94) 28%);
}

.msn-compose input,
.msn-compose textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  border-radius: 22px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  background: rgba(var(--fg-rgb), 0.06);
  color: inherit;
  padding: 12px 16px;
  resize: none;
  font: inherit;
  line-height: 1.35;
}

.msn-compose .btn {
  min-height: 44px;
  min-width: 48px;
}

.msn-send-ico {
  display: none;
}

.msn-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--ek-red, #c0392b);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  flex-shrink: 0;
}

@keyframes msn-unread-pop {
  0% {
    transform: scale(0.72);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.msn-unread.is-fresh {
  animation: msn-unread-pop 0.32s ease;
}

@media (prefers-reduced-motion: reduce) {
  .msn-unread.is-fresh {
    animation: none;
  }
}

.msn-unread[hidden] {
  display: none !important;
}

.msn-unread-inline {
  margin-left: 8px;
  vertical-align: middle;
}

.msn-unread-row {
  grid-column: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  line-height: 22px;
  font-size: 11px;
  align-self: center;
}

.hp-links .msn-unread {
  margin-left: 6px;
}

.msn-empty-hint {
  margin: auto 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.msn-stage-empty {
  display: none;
}

@media (max-width: 899px) {
  html:has(.msn-page.is-thread) .tab-bar {
    display: none;
  }

  .msn-page.is-thread {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (min-width: 900px) {
  .msn-page {
    padding-bottom: 24px;
  }

  .msn-ig {
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100dvh - 108px);
    margin: 0 -8px;
    border: 1px solid rgba(var(--fg-rgb), 0.08);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(var(--bg-deep-rgb), 0.35);
  }

  .msn-rail,
  .msn-page.is-thread .msn-rail {
    display: flex;
    width: 360px;
    flex: 0 0 360px;
    padding: 18px 14px;
    border-right: 1px solid rgba(var(--fg-rgb), 0.08);
    max-height: calc(100dvh - 108px);
    overflow: hidden;
  }

  .msn-list {
    gap: 1px;
    padding-bottom: 8px;
  }

  .msn-person,
  .msn-person.is-button {
    min-height: 60px;
    padding: 8px 10px;
    border-radius: 14px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .msn-face-wrap,
  .msn-list .msn-face {
    width: 44px;
    height: 44px;
  }

  .msn-status {
    font-size: 0.78rem;
  }

  .msn-stage,
  .msn-page.is-thread .msn-stage {
    display: flex;
    flex: 1;
    min-width: 0;
    max-height: calc(100dvh - 108px);
  }

  .msn-stage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 48px 32px;
    margin: auto;
    max-width: 38ch;
  }

  .msn-stage-empty .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .msn-thread-back {
    display: none;
  }

  .msn-stage-thread {
    min-height: 0;
    height: 100%;
    padding: 16px 20px 0;
  }

  .msn-compose {
    position: sticky;
    background: linear-gradient(180deg, transparent, rgba(var(--bg-deep-rgb), 0.96) 24%);
  }
}

.identity-privacy {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.04);
}

.identity-picks {
  display: grid;
  gap: 10px;
}

@media (min-width: 640px) {
  .identity-picks {
    grid-template-columns: 1fr 1fr;
  }
}

.identity-form {
  display: grid;
  gap: 14px;
}

.identity-pick {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 16px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px dashed rgba(var(--fg-rgb), 0.22);
  background: rgba(var(--fg-rgb), 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.identity-pick-cta {
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
}

.identity-pick-name {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.identity-pick input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.identity-preview {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
}

.identity-preview-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.identity-preview-img,
.identity-preview-frame {
  width: 100%;
  max-height: min(70vh, 640px);
  border: 0;
  border-radius: 12px;
  background: #10050a;
  object-fit: contain;
}

.msn-profile-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.member-access {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.member-access-panel {
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(var(--fg-rgb), 0.03);
}

.member-access-kicker {
  margin: 0;
  color: var(--gold-2, #e8c547);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.member-access-status,
.member-access-panel .member-access-status {
  margin: 0;
  color: var(--sand, #f3e6c9);
  font-size: 14px;
}

.member-access-pill {
  margin: 0;
  color: var(--gold-2, #e8c547);
  font-size: 13px;
  font-weight: 700;
}

.member-access-panel .btn,
.member-access-panel .confirm-row .btn {
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}

.member-access-panel .confirm-row {
  display: grid;
  gap: 10px;
}

@media (min-width: 700px) {
  .member-access {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .member-access-panel .btn {
    width: auto;
    justify-self: start;
  }

  .member-access-panel .confirm-row .btn {
    width: auto;
  }
}

.msn-access {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.msn-access-status,
.desk-card .msn-access-status {
  margin: 0;
  color: var(--sand, #f3e6c9);
  font-size: 13px;
}

.desk-card .msn-access {
  padding-top: 2px;
}

.msn-access-note {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted, #b8ab93);
}

.msn-access-note input {
  width: 100%;
}

html.kb-open .msn-compose {
  bottom: var(--kb-cover, 0px);
}

html.msn-thread.kb-open .msn-compose,
html.kb-open .msn-page.is-thread .msn-compose {
  bottom: 0;
}

.hp-notify-slot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  z-index: 3;
}

.hp-brand span {
  white-space: nowrap;
}

.notify-bell {
  position: relative;
  z-index: 3;
  isolation: isolate;
}

.msn-thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.msn-thread-head .msn-face,
.msn-thread-head .crew-avatar {
  flex-shrink: 0;
}

.msn-presence.is-typing {
  color: var(--gold-2);
}

.msn-bubble.is-theirs {
  align-self: flex-start;
  background: rgba(var(--fg-rgb), 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.msn-bubble.is-mine {
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.08);
}

@media (max-width: 899px) {
  html,
  body,
  .stage,
  .device,
  .screen,
  .screen.has-nav,
  .screen.has-nav.home-page,
  .screen.welcome-screen,
  .screen.welcome-screen.hp-page,
  .screen.welcome-screen.hp-page.auth-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .device {
    overflow-x: hidden !important;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hp-nav,
  .hp-nav.club-nav,
  .screen.has-nav > .hp-nav {
    position: sticky;
    top: 0;
    z-index: 82;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    overflow: visible;
  }

  .hp-nav .hp-links {
    display: none !important;
  }

  .hp-brand-row {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(42vw, 160px);
  }

  .hp-notify-slot {
    gap: 2px;
    max-width: 58vw;
  }

  .hp-nav.club-nav .theme-toggle-nav {
    width: 40px;
    height: 40px;
  }

  .hp-brand {
    max-width: 100%;
    min-width: 0;
  }

  .hp-brand span {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hp-notify-slot {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
  }

  .notify-bell {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .tab-bar {
    z-index: 40;
  }

  .hp-calendar-preview {
    width: auto !important;
    max-width: none !important;
    margin-left: -20px;
    margin-right: -20px;
  }

  .screen.has-nav.home-page,
  .screen.welcome-screen.hp-page {
    padding-bottom: calc(var(--tab-bar-space, 88px) + 12px);
  }

  .msn-page.is-thread .msn-stage-thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .msn-compose {
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .msn-compose input {
    border-radius: 999px;
    background: rgba(var(--fg-rgb), 0.08);
    border-color: rgba(201, 162, 39, 0.22);
  }

  .msn-log {
    gap: 10px;
    padding-bottom: 20px;
  }

  .hp-event-card {
    min-height: 0;
    padding: 14px 14px 16px;
  }

  .hp-event-photo {
    max-height: 108px;
    margin-bottom: 10px;
  }

  .hp-suggest-cover img {
    height: 132px;
    max-height: 132px;
  }

  .meetup-card-photo {
    min-height: 132px;
    max-height: 168px;
    aspect-ratio: 16 / 10;
  }

  .meetup-cover.has-photo,
  .meetup-detail-page .meetup-cover,
  .meetup-detail-page .meetup-cover.has-photo {
    aspect-ratio: 16 / 10;
    max-height: min(32vh, 200px);
  }

  .welcome-screen .hero-art {
    flex: none;
    max-height: min(28vh, 176px);
    min-height: 0;
  }

  .cal-act-photo,
  .cal-act.has-photo .cal-act-photo-zoom,
  .date-row .meetup-card-photo {
    max-height: 148px;
  }

  .hp-display,
  .welcome-copy .display,
  .home-page .display {
    font-size: clamp(1.5rem, 7.2vw, 2rem);
  }
}

/* Signed-in mobile: phone-first header + homepage */
@media (max-width: 899px) {
  .screen.has-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    height: auto !important;
    overflow: visible !important;
  }

  .screen.has-nav > .hp-nav,
  .screen.has-nav > header.hp-nav {
    order: -2;
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-height: calc(52px + env(safe-area-inset-top, 0px));
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    background: rgba(var(--bg-rgb), 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .hp-nav .hp-links,
  .hp-nav .hp-logout,
  .hp-nav.club-nav .hp-links,
  .hp-nav.club-nav .hp-actions {
    display: none !important;
  }

  .welcome-screen .hp-nav .hp-guest-actions,
  .hp-nav:not(.club-nav) .hp-guest-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .hp-brand-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .hp-brand {
    min-height: 44px;
    gap: 8px;
  }

  .hp-brand .logo-img,
  .hp-brand .logo-mark {
    width: 36px;
    height: 36px;
    max-width: 36px;
  }

  .hp-brand span {
    display: inline !important;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-back,
  .auth-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin-left: 0;
    flex-shrink: 0;
  }

  .hp-notify-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .notify-bell,
  .tab-desk-hit,
  .nav-cal-hit,
  .live-chat-hit {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }

  .tab-desk-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .crew-profile-page .crew-back {
    display: none;
  }

  .msn-page.is-thread .club-nav .nav-back {
    display: inline-flex;
  }

  .home-overview-desk {
    display: none;
  }

  .home-overview-phone {
    display: block;
    margin: 0 0 14px;
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .home-page .home-dash {
    width: 100%;
    max-width: none;
    padding: 12px 16px 8px;
    box-sizing: border-box;
  }

  .home-page .home-head {
    margin-bottom: 8px;
    margin-top: 4px;
  }

  .home-page .home-head .display {
    font-size: clamp(1.45rem, 6.4vw, 1.85rem);
    line-height: 1.15;
  }

  .home-page .tabs {
    margin-bottom: 12px;
  }

  .home-page .tabs button {
    min-height: 44px;
    height: auto;
    padding: 10px 8px;
    font-size: 13px;
  }

  .home-meetups-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .home-meetups-layout .home-chat-slot {
    order: 1;
    display: grid;
    gap: 10px;
  }

  .home-meetups-layout .home-next {
    order: 2;
    margin: 0;
  }

  .home-meetups-layout .list {
    order: 3;
  }

  .home-meetups-layout .fab-row {
    order: 4;
    margin: 4px 0 0;
  }

  .home-meetups-layout .meetup-scope {
    order: 5;
    margin: 0;
    padding: 12px 12px 10px;
    text-align: left;
  }

  .home-meetups-layout .beta-note {
    order: 6;
    margin: 0;
  }

  .home-chat-slot .chat-entry {
    min-height: 72px;
    padding: 14px 16px;
    text-align: left;
  }

  .home-chat-slot .chat-entry h3 {
    font-size: 1.05rem;
    margin: 4px 0 6px;
  }

  .home-page .card,
  .home-page .meetup-card {
    width: 100%;
    box-sizing: border-box;
  }

  .home-page .btn,
  .home-page .date-row-go,
  .meetup-actions .btn,
  .disc-compose .btn,
  .msn-compose .btn {
    min-height: 48px;
  }

  .meetup-scope-lede {
    font-size: 1.15rem;
  }

  .meetup-scope-copy {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .legal-footer {
    padding: 20px 16px 12px;
  }

  .legal-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .legal-footer-links button,
  .legal-footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .legal-footer-feedback {
    padding: 14px;
  }

  .disc-page .disc-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .disc-page .disc-post,
  .disc-page .card {
    max-width: 100%;
  }

  .disc-page img {
    max-width: 100%;
    height: auto;
  }

  .auth-page .hp-nav {
    position: sticky;
    top: 0;
  }

  .auth-card input,
  .auth-page input,
  .auth-page select,
  .auth-page textarea {
    font-size: 16px;
    min-height: 48px;
  }

  .auth-page .hp-cta,
  .auth-page .auth-cta,
  .auth-page .btn {
    min-height: 48px;
  }

  html.kb-open .msn-compose {
    padding-bottom: 12px;
  }
}

/* Suggest an Activity + meetup cards: phone-first, desktop unchanged */
@media (max-width: 899px) {
  .host-flow-page.screen.has-nav {
    padding-bottom: calc(var(--tab-bar-space, 88px) + 16px);
  }

  .host-flow-wrap {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
  }

  .host-flow-head {
    margin-bottom: 18px;
  }

  .host-flow-head .display {
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
  }

  .host-flow-head .lede {
    max-width: none;
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .suggest-form,
  .host-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 16px 20px;
    border-radius: 20px;
    overflow: hidden;
  }

  .suggest-form label,
  .host-form label,
  .suggest-field {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .suggest-form input,
  .suggest-form select,
  .suggest-form textarea,
  .host-form input,
  .host-form select,
  .host-form textarea,
  .suggest-form .dtp-trigger,
  .host-form .dtp-trigger {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.35;
  }

  .suggest-form textarea,
  .host-form textarea {
    min-height: 108px;
    resize: vertical;
  }

  .suggest-form .dtp-host,
  .host-form .dtp-host {
    width: 100%;
    max-width: 100%;
  }

  .suggest-form .dtp-pop,
  .host-form .dtp-pop {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .suggest-form .dtp-chips,
  .host-form .dtp-chips {
    flex-wrap: wrap;
  }

  .suggest-form .dtp-chip,
  .host-form .dtp-chip,
  .suggest-form .dtp-nav-btn,
  .host-form .dtp-nav-btn,
  .suggest-form .dtp-confirm,
  .host-form .dtp-confirm {
    min-height: 44px;
  }

  .suggest-field-err {
    margin: 0;
    color: #ffb4b0;
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .suggest-submit,
  .suggest-form > .btn-gold,
  .host-form > .btn-gold {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
  }

  .activity-photo-preview {
    max-height: 160px;
  }

  .meetup-list,
  .home-meetups-layout .list,
  .cal-act-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
  }

  .meetup-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-bottom: 16px;
    overflow: hidden;
  }

  .meetup-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 16px 4px;
  }

  .meetup-card-photo { order: 1; }
  .meetup-card-title,
  .meetup-open h3 { order: 2; }
  .meetup-card-when { order: 3; }
  .meetup-card-loc { order: 4; }
  .meetup-card-cat { order: 5; }
  .meetup-card-blurb { order: 6; }
  .meetup-card-host { order: 7; }
  .meetup-card-seats { order: 8; }
  .meetup-card-spark { order: 9; }
  .meetup-full-mark { order: 10; }

  .meetup-card-title,
  .meetup-open h3 {
    margin: 4px 0 6px;
    font-size: clamp(1.2rem, 5.6vw, 1.42rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .meetup-card-cat {
    margin: 0 0 8px;
    font-size: 10px;
  }

  .meetup-card-when {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .meetup-card-line {
    align-items: flex-start;
    margin: 0 0 6px;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
  }

  .meetup-card-blurb {
    display: block;
    margin: 4px 0 8px;
    color: var(--hp-body-color);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .meetup-card-seats {
    font-size: 0.9rem;
  }

  .meetup-card-photo {
    width: calc(100% + 32px);
    max-width: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: 168px;
    margin: 0 -16px 12px;
    border-radius: 0;
  }

  .meetup-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 0 16px;
  }

  .meetup-actions .btn,
  .meetup-actions .btn-gold {
    width: 100%;
    min-width: 0;
    flex: none;
    min-height: 48px;
  }

  .meetup-full-mark {
    display: grid;
    place-items: center;
    min-height: 44px;
    margin: 10px 0 0;
    border-radius: 14px;
    color: var(--text-secondary);
    background: rgba(var(--fg-rgb), 0.06);
    border: 1px solid rgba(var(--fg-rgb), 0.08);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
  }

  .meetup-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    margin: 0 0 16px;
    padding: 0;
  }

  .meetup-filters button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .hp-event-grid {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: 1fr;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: 12px;
  }

  .hp-event-card {
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }

  .dates-page.screen.has-nav {
    padding-bottom: calc(var(--tab-bar-space, 88px) + 16px);
  }

  .dates-wrap {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
  }

  .dates-hero {
    text-align: left;
    margin-bottom: 18px;
    padding-top: 4px;
  }

  .dates-hero .display {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .dates-hero .fab-row,
  .dates-hero .fab-row .btn,
  .cal-month-empty .btn,
  .dates-empty-card .btn {
    width: 100%;
    min-height: 48px;
  }

  .cal-week,
  .cal-grid {
    width: 100%;
    max-width: 100%;
    gap: 4px;
  }

  .cal-tile {
    min-height: 52px;
    padding: 6px 3px 6px;
    border-radius: 10px;
  }

  .cal-tile-label {
    display: none;
  }

  .cal-act {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .cal-act.has-photo {
    grid-template-columns: 1fr;
  }

  .meetup-detail {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .meetup-detail .display,
  .meetup-hero .display {
    overflow-wrap: anywhere;
  }

  .meetup-fact-main,
  .meetup-map,
  .meetup-about p {
    overflow-wrap: anywhere;
  }

  .meetup-directions,
  .meetup-map .btn,
  .meetup-detail [data-go*="map"],
  a.meetup-map-btn,
  .meetup-join-bar .btn {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
  }

  .meetup-join-bar {
    display: grid;
    gap: 10px;
  }

  .meetup-join.is-full {
    opacity: 0.55;
    pointer-events: none;
    box-shadow: none;
  }
}

@media (max-width: 380px) {
  .hp-brand span {
    max-width: 12ch;
  }

  .cal-tile {
    min-height: 46px;
    padding: 5px 2px;
  }

  .meetup-card-photo {
    max-height: 148px;
  }
}

.msn-thread-who {
  min-width: 0;
  flex: 1;
}

.msn-thread-who .display {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.msn-head-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.msn-conn {
  margin: 0;
  padding: 4px 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(var(--fg-rgb), 0.62);
}

.msn-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px 8px;
  font-size: 13px;
  color: rgba(var(--fg-rgb), 0.62);
}

.msn-typing[hidden],
.msn-jump[hidden],
.msn-conn[hidden] {
  display: none !important;
}

.msn-typing-dots {
  display: inline-flex;
  gap: 4px;
}

.msn-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), 0.55);
  animation: msn-dot 1s ease-in-out infinite;
}

.msn-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.msn-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes msn-dot {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.msn-jump {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 4;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.92);
  color: #1a0610;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.msn-stage-thread {
  position: relative;
}

.msn-bubble.is-pending {
  opacity: 0.72;
}

.msn-bubble.is-fail {
  outline: 1px solid rgba(232, 92, 92, 0.45);
}

.msn-retry {
  margin-top: 6px;
  border: 0;
  background: none;
  color: #f2b8b5;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  min-height: 32px;
  padding: 0;
}

.msn-send.is-busy {
  opacity: 0.7;
}

.msn-presence.is-typing {
  color: rgba(var(--fg-rgb), 0.7);
}

@media (max-width: 899px) {
  html.msn-thread,
  html.msn-thread body,
  html.msn-thread #app,
  html:has(.msn-page.is-thread),
  html:has(.msn-page.is-thread) body,
  html:has(.msn-page.is-thread) #app {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.msn-thread body,
  html:has(.msn-page.is-thread) body {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  .screen.has-nav.msn-page.is-thread {
    position: fixed !important;
    top: var(--msn-vv-top, 0px);
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100vw !important;
    height: var(--msn-vv, 100dvh) !important;
    max-height: var(--msn-vv, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
  }

  .msn-page.is-thread > .hp-nav,
  .msn-page.is-thread > header.hp-nav {
    display: none !important;
  }

  html.msn-thread .tab-bar,
  html.msn-thread .tab-desk-hit,
  html:has(.msn-page.is-thread) .tab-bar,
  html:has(.msn-page.is-thread) .tab-desk-hit {
    display: none !important;
  }

  .msn-page.is-thread .msn-ig {
    flex: 1;
    min-height: 0;
    min-width: 0;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .msn-page.is-thread .msn-stage,
  .msn-page.is-thread .msn-stage-thread {
    min-height: 0 !important;
    min-width: 0;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .msn-thread-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    max-width: 100%;
    overflow: hidden;
    padding: max(6px, env(safe-area-inset-top, 0px)) 8px 6px 2px;
    background: rgba(var(--bg-rgb), 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .msn-thread-who .display {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .msn-thread-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }

  .msn-thread-head .msn-face-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .msn-thread-head .msn-face,
  .msn-thread-head .crew-avatar {
    width: 36px;
    height: 36px;
  }

  .msn-thread-head .notify-bell {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }

  .msn-life {
    display: none !important;
  }

  .msn-page.is-thread .msn-log {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 12px 10px;
  }

  .msn-compose {
    position: relative;
    flex-shrink: 0;
    bottom: auto;
    gap: 8px;
    align-items: flex-end;
    max-width: 100%;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--bg-rgb), 0.96);
  }

  html.kb-open .msn-page.is-thread .msn-compose,
  html.msn-thread.kb-open .msn-compose {
    bottom: 0;
    padding-bottom: 8px;
  }

  .msn-compose input,
  .msn-compose textarea {
    min-height: 44px;
    font-size: 16px;
    border-radius: 22px;
  }

  .msn-send {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    touch-action: manipulation;
  }

  .msn-send-label {
    display: none;
  }

  .msn-send-ico {
    display: inline;
    font-size: 16px;
    line-height: 1;
  }

  .msn-send:active {
    transform: scale(0.97);
  }

  .msn-jump {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  .msn-page:not(.is-thread) {
    overflow-x: hidden;
    max-width: 100%;
  }
}

@media (min-width: 900px) {
  .msn-head-actions {
    display: none;
  }

  .msn-jump {
    bottom: 96px;
  }
}

.fy-page .fy-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.fy-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.fy-head .display {
  font-size: clamp(1.35rem, 5.4vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.04em;
  margin: 0;
  font-weight: 600;
}

.fy-head .lede,
.fy-page .disc-lede {
  margin: 0;
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(var(--fg-rgb), 0.62);
}

.fy-compose {
  margin-bottom: 16px;
}

.fy-page .disc-compose.fy-compose {
  margin-bottom: 16px;
  padding: 14px 14px 12px;
}

.fy-compose-top {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.fy-compose-face,
.fy-compose .fy-compose-face,
.fy-compose .avatar.fy-compose-face {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin-top: 4px;
  border-radius: 50%;
  object-fit: cover;
}

.fy-page .fy-compose textarea {
  min-height: 72px;
}

.fy-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px 50px;
}

.fy-prompt {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.04);
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fy-prompt:active {
  background: rgba(201, 162, 39, 0.12);
  color: var(--cream);
}

.fy-discover {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
}

.fy-home-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

.fy-home-line {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.4;
}

.fy-home-link {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--gold-2);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fy-block,
.fy-idea,
.fy-act {
  min-width: 0;
}

.fy-act,
.fy-idea {
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: rgba(var(--fg-rgb), 0.05);
}

.fy-idea {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border: 1px solid rgba(201, 162, 39, 0.18);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 39, 0.2), transparent 46%),
    rgba(var(--fg-rgb), 0.055);
}

.fy-idea-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8c56a;
}

.fy-idea h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.fy-idea > p {
  margin: 6px 0 0;
  color: rgba(var(--fg-rgb), 0.7);
  font-size: 0.94rem;
  line-height: 1.4;
}

.fy-idea-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.fy-idea-tags li {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.28);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  color: rgba(var(--fg-rgb), 0.88);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.fy-idea-cta {
  width: 100%;
  margin-top: 14px;
}

.fy-act-open {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
}

.fy-act-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fy-act h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.fy-act-meta,
.fy-act-seats {
  margin: 0;
  color: rgba(var(--fg-rgb), 0.68);
  font-size: 0.92rem;
}

.fy-act-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.fy-act-actions .btn,
.fy-idea .btn {
  min-height: 44px;
}

.fy-page.club-enter,
.fy-page.club-enter-home,
.disc-page.club-enter,
.disc-page.club-enter-home,
.fy-page.tab-swap,
.disc-page.tab-swap {
  animation: none;
}

.fy-page .disc-feed-kicker {
  margin: 8px 0 12px;
}

.fy-page .disc-post {
  padding: 16px 4px 18px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.fy-page .disc-post:hover,
.fy-page .disc-post:active {
  background: none;
  box-shadow: none;
}

.fy-page .disc-who-copy .disc-when {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.fy-page .disc-body {
  font-size: 1.02rem;
  line-height: 1.45;
}

.fy-page .disc-photo {
  margin: 12px 0 0;
  max-width: 100%;
  overflow: visible;
  background: none;
}

.fy-page .disc-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.fy-post-preview {
  margin: 12px 0 4px;
  padding: 12px 12px 8px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}

.fy-preview-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.fy-post-preview .disc-body {
  margin: 8px 0 10px;
}

.fy-preview-empty {
  color: var(--text-muted);
}

.fy-preview-remove {
  margin-top: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(var(--fg-rgb), 0.62);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.fy-page .disc-acts {
  margin-top: 10px;
}

.fy-page .disc-act {
  min-height: 40px;
}

@media (max-width: 899px) {
  .fy-page .fy-wrap {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .fy-page,
  .screen.has-nav.fy-page {
    overflow-x: hidden;
  }

  .fy-act-actions .btn {
    flex: 1 1 140px;
  }
}

@media (min-width: 900px) {
  .fy-page .fy-wrap {
    padding-top: 8px;
  }

  .fy-head .display {
    font-size: 1.7rem;
  }
}

.fy-world {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 4px 0 18px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(201, 162, 39, 0.16);
  background: linear-gradient(180deg, rgba(34, 16, 22, 0.72), rgba(20, 6, 12, 0.88));
  color: inherit;
  text-align: left;
  min-height: 68px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  box-sizing: border-box;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.fy-world:hover,
.fy-world:focus-visible {
  border-color: rgba(196, 90, 106, 0.55);
  outline: none;
}

.fy-world:active {
  transform: scale(0.99);
}

.fy-world-globe {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  color: #e08a96;
  background: rgba(122, 36, 51, 0.28);
}

.fy-world-globe svg {
  width: 28px;
  height: 28px;
  display: block;
}

.fy-world-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fy-world-title,
.fy-world-pct,
.fy-world-sub {
  overflow-wrap: anywhere;
}

.fy-world-title {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.fy-world-pct {
  color: var(--gold-2);
  font-size: 0.82rem;
  min-height: 1.15em;
}

.fy-world-sub {
  color: var(--mute);
  font-size: 0.78rem;
}

.travel-map-head-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.travel-map-head-stack > .btn,
.travel-map-head-stack > .travel-map-actions {
  width: max-content;
  max-width: 100%;
}

.travel-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.travel-coverage {
  margin: 2px 0 4px;
}

.travel-coverage-value {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--cream);
  min-height: 1.4em;
}

.travel-coverage-meta {
  margin: 4px 0 8px;
  color: var(--mute);
  font-size: 0.8rem;
}

.travel-coverage-bar {
  margin-top: 0;
  max-width: 220px;
}

@media (prefers-reduced-motion: reduce) {
  .fy-world,
  .fy-world:active {
    transition: none;
    transform: none;
  }
}

.travel-map {
  margin: 22px 0 28px;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(34, 16, 22, 0.92), rgba(20, 6, 12, 0.96));
  border: 1px solid rgba(201, 162, 39, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.cp-card .travel-map {
  margin: 20px 0 0;
}

.travel-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.travel-map-head h2 {
  margin: 4px 0 6px;
  font-size: 1.45rem;
}

.travel-map-lede {
  margin: 0;
  color: var(--mute);
  font-size: 0.95rem;
}

.travel-map-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background: #16080c;
}

.travel-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.travel-globe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(52vh, 440px);
  min-height: 280px;
  overflow: hidden;
  touch-action: none;
  background: #16080c;
}

.travel-globe.is-loading::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 42%;
  border: 2px solid rgba(255, 248, 236, 0.12);
  border-top-color: #7a2433;
  border-radius: 50%;
  animation: travel-spin 0.8s linear infinite;
  pointer-events: none;
}

.travel-globe.is-fallback {
  height: auto;
  min-height: 0;
  touch-action: auto;
}

.travel-globe .leaflet-container {
  width: 100%;
  height: 100%;
  background: #16080c;
  font-family: inherit;
}

.travel-globe .leaflet-container .leaflet-control-attribution {
  background: none !important;
  color: rgba(184, 176, 164, 0.55);
  font-size: 10px;
  margin: 0 6px 4px 0;
  box-shadow: none;
}

.travel-globe .leaflet-control-attribution a {
  color: inherit;
}

.travel-globe-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

.travel-tool {
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 248, 236, 0.12);
  background: rgba(20, 6, 12, 0.78);
  color: var(--cream);
  font-size: 0.95rem;
}

.travel-tool:focus-visible,
.travel-mini:focus-visible,
.travel-place-name:focus-visible,
.travel-panel-city:focus-visible,
.travel-jump input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.travel-globe-tip {
  position: absolute;
  z-index: 32;
  transform: translate(-50%, -110%);
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(20, 6, 12, 0.92);
  border: 1px solid rgba(201, 162, 39, 0.22);
  color: var(--cream);
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
}

.travel-jump {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 30;
  width: min(220px, calc(100% - 88px));
}

.travel-jump input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 248, 236, 0.12);
  background: rgba(20, 6, 12, 0.82);
  color: var(--cream);
  padding: 0 12px;
  font-size: 0.88rem;
}

.travel-panel {
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: rgba(255, 248, 236, 0.04);
  border: 1px solid rgba(255, 248, 236, 0.06);
}

.travel-panel h3 {
  margin: 4px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
}

.travel-panel-kicker {
  margin: 0;
  color: var(--gold-2);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.travel-panel:not(.is-visited) .travel-panel-kicker {
  color: var(--mute);
}

.travel-panel-lede,
.travel-panel-count {
  margin: 0 0 10px;
  color: var(--mute);
  font-size: 0.9rem;
}

.travel-panel-cities {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}

.travel-panel-cities li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255, 248, 236, 0.03);
}

.travel-panel-cities li.is-on {
  background: rgba(122, 36, 51, 0.35);
}

.travel-panel-city,
.travel-place-name,
.travel-city-name {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  padding: 0;
}

.travel-place-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.travel-panel-acts {
  display: grid;
  gap: 8px;
}

.travel-panel-acts .btn {
  min-height: 44px;
}

.travel-explored {
  margin: 8px 0 0;
  color: var(--mute);
  font-size: 0.82rem;
}

.travel-progress {
  margin-top: 10px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.08);
  overflow: hidden;
}

.travel-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7a2433, #c45a6a);
}

.travel-place.is-on {
  border-color: rgba(196, 90, 106, 0.4);
  background: rgba(122, 36, 51, 0.22);
}

.travel-city-x {
  border: 0;
  background: transparent;
  color: var(--mute);
  min-width: 32px;
  min-height: 32px;
  font-size: 1.1rem;
}

.travel-map.is-just-saved .travel-stat-value {
  color: var(--gold-2);
}

@keyframes travel-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .travel-globe.is-loading::after,
  .travel-map.is-just-saved .travel-stat-value {
    animation: none;
  }
}

.travel-svg {
  display: block;
  width: 100%;
  height: auto;
}

.travel-ocean {
  fill: #0a0407;
}

.travel-dots .is-off {
  fill: rgba(255, 248, 236, 0.16);
}

.travel-dots .is-on,
.travel-dots .is-shared {
  fill: var(--gold-2);
  filter: drop-shadow(0 0 6px rgba(232, 197, 71, 0.55));
}

.travel-dots .is-mine {
  fill: #f3e6c9;
  filter: drop-shadow(0 0 5px rgba(243, 230, 201, 0.4));
}

.travel-dots .is-theirs {
  fill: #5fd0a5;
  filter: drop-shadow(0 0 5px rgba(95, 208, 165, 0.45));
}

.travel-dots .is-continent {
  fill: #c9a227;
  filter: drop-shadow(0 0 7px rgba(201, 162, 39, 0.55));
}

.travel-dots .is-continent-mute {
  fill: #8a6a22;
}

.travel-dots .is-last {
  fill: #7dba9a;
  filter: drop-shadow(0 0 7px rgba(125, 186, 154, 0.5));
}

.travel-dots .is-dim {
  fill: #8a5a62;
}

.travel-stats {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.travel-stats.is-community {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
  margin-bottom: 2px;
}

.travel-stat-highlight {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.travel-stat-highlight[data-travel-highlight="continent"]:hover,
.travel-stat-highlight[data-travel-highlight="continent"].is-hot {
  border-color: rgba(201, 162, 39, 0.85);
  background: rgba(201, 162, 39, 0.12);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 10px 24px rgba(201, 162, 39, 0.16);
}

.travel-stat-highlight[data-travel-highlight="last"]:hover,
.travel-stat-highlight[data-travel-highlight="last"].is-hot {
  border-color: rgba(125, 186, 154, 0.9);
  background: rgba(125, 186, 154, 0.12);
  box-shadow: 0 0 0 1px rgba(125, 186, 154, 0.35), 0 10px 24px rgba(125, 186, 154, 0.16);
}

.travel-stats.is-community article {
  padding: 12px 10px;
}

.travel-stats.is-community .travel-stat-value {
  font-size: 1.35rem;
}

.travel-more {
  margin-top: 12px;
}

.travel-more-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 39, 0.18);
  background: rgba(255, 248, 236, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.travel-more-btn:hover,
.travel-more-btn:focus-visible {
  border-color: rgba(196, 90, 106, 0.45);
  outline: none;
}

.travel-more-meta {
  color: var(--mute);
  font-size: 0.82rem;
}

.travel-stats article {
  padding: 14px 12px;
  border-radius: 16px;
  background: rgba(255, 248, 236, 0.04);
  border: 1px solid rgba(255, 248, 236, 0.06);
}

.travel-stat-value {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.travel-stat-label {
  margin: 2px 0 0;
  color: var(--mute);
  font-size: 0.82rem;
}

.travel-stat-meta {
  margin: 4px 0 0;
  color: rgba(184, 176, 164, 0.75);
  font-size: 0.75rem;
}

.travel-add {
  margin-top: 14px;
}

.travel-add-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.travel-add-tabs button {
  flex: 1;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 248, 236, 0.1);
  background: transparent;
  color: var(--cream);
}

.travel-add-tabs button.on {
  background: var(--gold);
  color: #14060c;
  border-color: var(--gold);
}

.travel-search input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 248, 236, 0.12);
  background: #14060c;
  color: var(--cream);
  padding: 0 14px;
}

.travel-hits {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.travel-hit {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 248, 236, 0.08);
  background: rgba(255, 248, 236, 0.03);
  color: var(--cream);
  text-align: left;
}

.travel-hit.on {
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(201, 162, 39, 0.12);
}

.travel-places {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.travel-place {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 248, 236, 0.04);
  border: 1px solid rgba(255, 248, 236, 0.06);
}

.travel-place-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.travel-place-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 650;
}

.travel-flag {
  font-size: 1.15rem;
  line-height: 1;
}

.travel-place-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.travel-mini {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 248, 236, 0.12);
  background: transparent;
  color: var(--cream);
  font-size: 0.78rem;
}

.travel-place-cities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 0;
  color: var(--mute);
  line-height: 1.45;
}

.travel-dot {
  opacity: 0.55;
}

.travel-city-none {
  font-size: 0.85rem;
}

.travel-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  background: rgba(201, 162, 39, 0.08);
  color: var(--cream);
}

.travel-empty {
  margin-top: 16px;
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 248, 236, 0.14);
  color: var(--mute);
}

.travel-empty p {
  margin: 0;
}

.travel-empty p + p {
  margin-top: 4px;
}

.travel-add-lead {
  margin: 8px 0 10px;
  color: var(--cream);
}

.travel-save-row {
  margin-top: 12px;
}

.travel-save-row .btn {
  width: 100%;
  min-height: 46px;
}

.travel-msg {
  margin: 8px 0 0;
  color: var(--gold-2);
  font-size: 0.9rem;
}

.travel-msg.is-err {
  color: #ffb4b0;
}

.travel-hint {
  margin: 10px 0 0;
  color: var(--mute);
  font-size: 0.85rem;
}

.travel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 12px 0 0;
  color: var(--mute);
  font-size: 0.82rem;
}

.travel-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.travel-legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.travel-legend .is-shared::before {
  background: var(--gold-2);
}

.travel-legend .is-mine::before {
  background: #f3e6c9;
}

.travel-legend .is-theirs::before {
  background: #5fd0a5;
}

.travel-compare-list {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 248, 236, 0.04);
  border: 1px solid rgba(255, 248, 236, 0.06);
}

.travel-compare-list h3 {
  margin: 0 0 6px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.95rem;
}

.travel-compare-list p {
  margin: 0;
  color: var(--mute);
  line-height: 1.45;
}

.travel-map.is-locked {
  text-align: left;
}

.travel-map.is-locked .btn {
  margin-top: 14px;
}

.travel-map.is-crew-world {
  margin: 8px 0 28px;
  padding: 14px 0 18px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.travel-map.is-crew-world .travel-map-head,
.travel-map.is-crew-world .travel-more,
.travel-map.is-crew-world .travel-add {
  width: min(1120px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;
}

.travel-map.is-crew-world .travel-stage {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.travel-map.is-crew-world .travel-map-art {
  border-radius: 0;
  background: #2a1018;
}

.travel-map.is-crew-world .travel-globe,
.travel-map.is-crew-world .travel-globe .leaflet-container {
  height: min(62vw, 520px);
  min-height: 300px;
  background: #2a1018;
}

.travel-map.is-crew-world .travel-jump {
  top: 10px;
  bottom: auto;
}

.travel-total {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 31;
  width: min(420px, calc(100% - 28px));
  transform: translateX(-50%);
  padding: 16px 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(232, 180, 35, 0.22);
  background: rgba(42, 16, 24, 0.9);
  box-shadow: 0 16px 40px rgba(20, 6, 12, 0.35);
  backdrop-filter: blur(14px);
  color: #fff8ec;
  text-align: center;
}

.travel-total-kicker {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

.travel-total-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.travel-total-fig {
  min-width: 0;
}

.travel-total-num {
  margin: 0;
  color: #e8b423;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.travel-total-label {
  margin: 4px 0 0;
  color: rgba(255, 248, 236, 0.62);
  font-size: 0.95rem;
}

.travel-total-ring {
  width: 74px;
  height: 74px;
  color: #e8b423;
}

.travel-total-note {
  margin: 8px 0 0;
  color: rgba(255, 248, 236, 0.55);
  font-size: 0.92rem;
}

.travel-map.is-crew-world .leaflet-control-attribution {
  display: none;
}

@media (min-width: 800px) {
  .travel-stage {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    align-items: start;
  }

  .travel-panel {
    position: sticky;
    top: 12px;
  }

  .travel-map.is-crew-world .travel-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .travel-map.is-crew-world .travel-panel {
    position: static;
    width: min(1120px, calc(100% - 36px));
    margin: 12px auto 0;
  }
}

@media (max-width: 699px) {
  .travel-stats {
    grid-template-columns: 1fr;
  }

  .travel-stats.is-community {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travel-map.is-crew-world .travel-globe,
  .travel-map.is-crew-world .travel-globe .leaflet-container {
    height: min(132vw, 560px);
    min-height: 480px;
  }

  .travel-total {
    bottom: 12px;
    padding: 12px 14px 10px;
  }

  .travel-total-num {
    font-size: 2.35rem;
  }

  .travel-total-ring {
    width: 62px;
    height: 62px;
  }

  .travel-map-head {
    flex-direction: column;
  }

  .travel-place-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .travel-globe {
    height: min(48vh, 360px);
    min-height: 240px;
  }

  .travel-panel {
    border-radius: 20px 20px 16px 16px;
  }
}

.perks-page {
  overflow-x: hidden;
}

.perk-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 18px 96px;
}

.perk-head {
  margin-bottom: 18px;
}

.perk-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.perk-head h1 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 5.4vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.perk-lede {
  margin: 0;
  max-width: 36ch;
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1.45;
}

.perk-gate-note {
  margin: 10px 0 0;
  color: var(--mute);
  font-size: 0.88rem;
}

.perk-staff-link {
  margin: 12px 0 0;
}

.perk-staff-link .btn {
  min-height: 44px;
  width: auto;
  display: inline-flex;
  padding: 0 14px;
  font-size: 0.88rem;
}

.perk-tools {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  padding-top: 8px;
  padding-bottom: 10px;
}

.perk-search input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  background: var(--surface);
  color: var(--cream);
  padding: 0 14px;
}

.perk-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.perk-cats::-webkit-scrollbar {
  display: none;
}

.perk-cats button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  background: transparent;
  color: var(--cream);
  font-size: 0.85rem;
  white-space: nowrap;
}

.perk-cats button.on {
  background: #5a1725;
  border-color: #5a1725;
  color: #fff8ec;
}

.perk-block {
  margin-bottom: 22px;
}

.perk-block-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--mute);
}

.perk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.perk-featured,
.perk-card,
.perk-panel,
.perk-empty {
  border-radius: 20px;
  background: var(--surface-elevated);
  border: 1px solid rgba(var(--fg-rgb), 0.07);
}

.perk-card,
.perk-panel,
.perk-empty {
  overflow: hidden;
}

.perk-featured {
  display: grid;
  overflow: hidden;
}

.perk-featured-media,
.perk-card-media,
.perk-hero {
  position: relative;
  background: #1a0a10;
}

.perk-featured-media {
  aspect-ratio: 16 / 10;
  min-height: 168px;
  overflow: hidden;
}

.perk-featured-media > img,
.perk-card-media > img,
.perk-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.perk-featured-media.is-empty,
.perk-card-media.is-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
}

.perk-featured-logo,
.perk-card-logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: #14060c;
  border: 1px solid rgba(255, 248, 236, 0.12);
}

.perk-featured-logo .perk-brand,
.perk-card-logo .perk-brand,
.perk-brand-card {
  width: 100%;
  height: 100%;
}

.perk-featured-body {
  padding: 16px 16px 18px;
}

.perk-featured-name {
  margin: 10px 0 2px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.perk-featured-body h2,
.perk-panel-offer h1 {
  margin: 8px 0 8px;
  font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.perk-featured-copy {
  margin: 0 0 14px;
  color: var(--mute);
  font-size: 0.94rem;
  line-height: 1.45;
}

.perk-card-top {
  position: relative;
}

.perk-ig {
  position: absolute;
  z-index: 2;
  top: auto;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 6, 12, 0.78);
  color: #fff8ec;
  border: 1px solid rgba(201, 162, 39, 0.32);
}

.perk-ig svg {
  width: 17px;
  height: 17px;
  display: block;
}

.perk-ig:hover,
.perk-ig:focus-visible {
  color: #e8c547;
  border-color: rgba(232, 197, 71, 0.7);
  outline: none;
}

.perk-ig.is-inline {
  position: static;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.perk-card {
  position: relative;
}

.perk-card-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}

.perk-card-media {
  aspect-ratio: 16 / 9;
}

.perk-card-badges {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  pointer-events: none;
}

.perk-card-badges.is-static {
  position: static;
  justify-content: flex-start;
  pointer-events: none;
}

.perk-official,
.perk-off-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.perk-official {
  background: rgba(255, 248, 236, 0.12);
  color: #fff8ec;
  border: 1px solid rgba(255, 248, 236, 0.2);
}

.perk-off-badge {
  background: #5a1725;
  color: #fff8ec;
}

.perk-detail-head .perk-official,
.perk-card-badges.is-static .perk-official {
  background: rgba(122, 36, 51, 0.14);
  color: #e08a96;
  border-color: rgba(122, 36, 51, 0.28);
}

.perk-brand {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.perk-brand img {
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
}

.perk-brand.is-text span {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.perk-brand-detail {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #14060c;
  overflow: hidden;
  flex: 0 0 auto;
}

.perk-brand-detail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.perk-detail-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.perk-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}

.perk-cta-row .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  text-decoration: none;
}

.perk-note,
.perk-text-link {
  margin: 10px 0 0;
  color: var(--mute);
  font-size: 0.86rem;
  line-height: 1.45;
}

.perk-quiet-link {
  color: var(--gold-2);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.perk-home-announce {
  text-align: left;
  overflow: hidden;
}

.perk-home-media {
  position: relative;
  margin: -16px -16px 14px;
  height: 168px;
  overflow: hidden;
  background: #000;
}

.perk-home-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.perk-home-logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 248, 236, 0.16);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.perk-home-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.perk-home-announce-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.perk-home-announce h3 {
  margin: 8px 0 6px;
}

.perk-home-announce p {
  margin: 0 0 12px;
  color: var(--mute);
}

.perk-home-dismiss {
  border: 0;
  background: transparent;
  color: var(--mute);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
}

.perk-card-body {
  padding: 12px 14px 14px;
}

.perk-card-kicker,
.perk-exclusive {
  margin: 0;
  color: #e08a96;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.perk-card-body h3 {
  margin: 6px 0 6px;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.perk-card-partner {
  margin: 0 0 2px;
  font-size: 0.92rem;
  color: var(--cream);
}

.perk-card-copy {
  margin: 0 0 10px;
  color: var(--mute);
  font-size: 0.88rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.perk-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 10px 0 0;
  color: var(--mute);
  font-size: 0.78rem;
}

.perk-card-cta {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--gold-2);
  font-size: 0.88rem;
}

.perk-partner-cta {
  margin-top: 8px;
  padding: 8px 2px 0;
}

.perk-partner-cta h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.perk-partner-cta p {
  margin: 0 0 14px;
  color: var(--mute);
  font-size: 0.92rem;
}

.perk-skel {
  display: grid;
  gap: 10px;
}

.perk-skel span {
  display: block;
  height: 120px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.06);
}

.perk-hero {
  margin: 0 0 14px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.perk-back {
  margin: 0 0 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
}

.perk-detail-partner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
}

.perk-detail-partner {
  margin: 0;
  color: var(--gold-2);
  font-size: 1.02rem;
}

.perk-admin-ig-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.perk-panel {
  padding: 16px;
  margin: 0 0 12px;
}

.perk-panel h2 {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.perk-panel p {
  margin: 0 0 8px;
  color: var(--mute);
  font-size: 0.94rem;
  line-height: 1.5;
}

.perk-panel-offer .perk-benefit {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.perk-copy,
.perk-facts article {
  margin: 12px 0 0;
}

.perk-facts h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.mcard-perk-note {
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface-elevated);
  border: 1px solid rgba(var(--fg-rgb), 0.07);
}

.perk-reveal {
  margin: 4px 0 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(90, 23, 37, 0.28);
  min-height: 76px;
}

.perk-code {
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--cream);
}

.perk-steps {
  margin: 0;
  padding: 0 0 0 1.15rem;
  color: var(--mute);
}

.perk-steps li {
  margin: 0 0 8px;
  font-size: 0.94rem;
  line-height: 1.45;
}

.perk-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 10px;
}

.perk-links a {
  color: var(--gold-2);
}

.perk-empty {
  padding: 28px 20px;
  text-align: left;
}

.perk-admin-toolbar {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.perk-admin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.perk-admin-confirm {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(122, 36, 51, 0.28);
  background: rgba(122, 36, 51, 0.12);
}

.perk-admin-confirm p {
  margin: 0 0 12px;
}

.perk-admin-form {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.perk-admin-block {
  display: grid;
  gap: 10px;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.perk-admin-block h4,
.perk-admin-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.perk-admin-ok {
  margin: 0 0 10px;
  color: var(--gold-2);
}

.perk-admin-preview {
  display: grid;
  place-items: center;
  min-height: 140px;
  overflow: hidden;
  border-radius: 16px;
  background: #14060c;
  border: 1px solid rgba(255, 248, 236, 0.08);
}

.perk-admin-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.perk-admin-preview.is-logo {
  min-height: 160px;
  background: #0d0408;
}

.perk-admin-preview.is-logo img {
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
}

.perk-admin-preview.is-empty {
  color: var(--mute);
  font-size: 0.9rem;
}

.perk-admin-image-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.perk-admin-file-btn {
  position: relative;
  overflow: hidden;
}

.perk-admin-file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.perk-admin-thumb {
  width: 100%;
  height: 92px;
  margin: 0 0 10px;
  overflow: hidden;
  border-radius: 12px;
  background: #14060c;
}

.perk-admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perk-admin-form label,
.perk-admin-form input,
.perk-admin-form textarea,
.perk-admin-form select {
  width: 100%;
}

.perk-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.perk-home-card h3 {
  margin-top: 4px;
}

@media (min-width: 700px) {
  .perk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .perk-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .perk-cta-row .btn {
    width: auto;
    min-width: 168px;
    flex: 1 1 auto;
  }

  .perk-cats {
    flex-wrap: wrap;
    overflow: visible;
  }

  .perk-admin-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .perk-admin-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .perk-admin-toolbar .note {
    margin: 0;
  }
}

@media (min-width: 1020px) {
  .perk-wrap {
    padding: 24px 24px 56px;
  }

  .perk-featured {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;
  }

  .perk-featured-media {
    aspect-ratio: auto;
    min-height: 280px;
  }

  .perk-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
  }
}

@media (max-width: 899px) {
  .perk-detail .perk-cta-row {
    position: sticky;
    bottom: calc(var(--tab-bar-space) - 12px);
    z-index: 5;
    background: var(--bg);
    padding: 10px 0 12px;
    margin-bottom: 0;
  }
}

.mcard-wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 18px 96px;
}

.mcard-page.is-full .mcard-wrap {
  padding-bottom: 24px;
}

.mcard-head .display {
  margin: 6px 0 16px;
  font-size: 1.35rem;
}

.mcard-head.is-hidden {
  display: none;
}

.mcard-back {
  margin: 0 0 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  width: fit-content;
}

.mcard {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px 22px 18px;
  color: #fff8ec;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 162, 39, 0.16), transparent 46%),
    linear-gradient(180deg, #6b1c2c 0%, #5a1725 52%, #3f1019 100%);
  border: 1px solid rgba(255, 248, 236, 0.16);
  box-shadow: 0 18px 40px rgba(20, 6, 12, 0.28);
}

.mcard-top,
.mcard-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.mcard-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.mcard-brand {
  margin: 0;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
}

.mcard-kicker {
  margin: 4px 0 0;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
  color: rgba(255, 248, 236, 0.72);
}

.mcard-mid {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 26px 0 20px;
}

.mcard-photo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 248, 236, 0.7);
  flex: none;
}

.mcard-photo.is-fallback {
  display: grid;
  place-items: center;
  background: rgba(255, 248, 236, 0.12);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}

.mcard-id {
  min-width: 0;
}

.mcard-name {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mcard.is-compact {
  padding: 16px;
  box-shadow: none;
}

.mcard.is-compact .mcard-mid {
  padding: 14px 0 12px;
}

.mcard.is-compact .mcard-photo {
  width: 52px;
  height: 52px;
}

.mcard.is-compact .mcard-name {
  font-size: 1.05rem;
}

.mcard.is-placeholder {
  min-height: 120px;
}

.mcard-since {
  margin: 0 0 8px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.mcard-wallet {
  margin-top: 16px;
}

.mcard-wallet-note {
  margin: 0;
  color: var(--mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mcard-wallet-btn {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-weight: 650;
  cursor: pointer;
}

.mcard-wallet-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.mcard-wallet-btn.is-google {
  background: #1f1f1f;
  color: #fff;
  border-radius: 24px;
  letter-spacing: 0.01em;
}

html.is-android .mcard-wallet-btn,
html.is-android .mcard-actions .btn {
  min-height: 48px;
}

html.is-android .mcard-wrap {
  padding-bottom: calc(108px + var(--nav-safe-bottom, 0px));
}

html.is-android .mcard-page .mcard {
  border-radius: 20px;
}

.mcard-type,
.mcard-status,
.mcard-member {
  margin: 0;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.mcard-member {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.18);
  color: #f3d27a;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mcard-status {
  margin-top: 6px;
  color: rgba(255, 248, 236, 0.8);
}

.mcard-no-label {
  margin: 0;
  font-size: 0.68rem;
  color: rgba(255, 248, 236, 0.7);
}

.mcard-no {
  margin: 2px 0 6px;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mcard-qr {
  width: 118px;
  min-width: 118px;
  min-height: 132px;
  padding: 7px 7px 5px;
  border: 0;
  border-radius: 12px;
  background: #fff8ec;
  cursor: pointer;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  flex: none;
}

.mcard-qr-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3f1019;
}

.mcard.is-full .mcard-qr {
  width: 136px;
}

.mcard.is-full .mcard-qr svg {
  width: 122px;
  height: 122px;
}

.mcard-verify.is-verified .mcard-hint {
  color: rgba(255, 248, 236, 0.7);
}

.mcard-qr svg {
  display: block;
  width: 104px;
  height: 104px;
  min-width: 104px;
  min-height: 104px;
}

.mcard-hint {
  margin: 14px 0 0;
  color: var(--mute);
  font-size: 0.88rem;
}

.mcard-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.mcard-entry-btn {
  display: inline-flex;
  align-items: center;
}

.mcard-entry-btn svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.mcard-skel span {
  display: block;
  height: 280px;
  border-radius: 22px;
  background: rgba(var(--fg-rgb), 0.06);
}

.mcard-verify {
  border-radius: 22px;
  padding: 22px;
  background: var(--surface-elevated);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}

.mcard-verify.is-valid,
.mcard-verify.is-verified {
  color: #fff8ec;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 162, 39, 0.16), transparent 46%),
    linear-gradient(180deg, #6b1c2c 0%, #5a1725 52%, #3f1019 100%);
  border-color: rgba(255, 248, 236, 0.16);
  box-shadow: 0 18px 40px rgba(20, 6, 12, 0.28);
}

.mcard-verify-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mcard-verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.18);
  color: #f3d27a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mcard-verify-badge.is-off {
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--mute);
}

.mcard-verify-badge .crew-verified {
  color: #f3d27a;
}

.mcard-verify-member {
  margin: 8px 0 0;
  color: rgba(255, 248, 236, 0.86);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mcard-verify-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.mcard-verify-name {
  margin: 0 0 6px;
  font-size: 1.45rem;
  font-weight: 600;
}

.mcard-verify-type {
  margin: 0;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: rgba(255, 248, 236, 0.74);
}

.mcard-verify-id {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  font-size: 0.92rem;
}

.mcard-verify-id span {
  color: rgba(255, 248, 236, 0.66);
}

.mcard-verify-lead {
  margin: 16px 0 0;
  line-height: 1.45;
}

.mcard-verify-benefits {
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 6px;
}

.mcard-verify-result {
  margin: 12px 0 18px;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

.mcard-verify-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  font-size: 0.92rem;
}

.mcard-verify-row span {
  color: var(--mute);
}

.you-verified-pass {
  display: grid;
  gap: 10px;
}

.you-verify-qr {
  width: 100%;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 20px;
  background: rgba(90, 23, 37, 0.16);
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.you-verify-qr-code {
  display: block;
  width: 88px;
  height: 88px;
  padding: 6px;
  border-radius: 12px;
  background: #fff8ec;
}

.you-verify-qr-code svg {
  display: block;
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
}

.you-verify-qr-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.you-verify-qr-mark {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  background: rgba(201, 162, 39, 0.16);
  color: #f3d27a;
}

.you-verify-qr-mark .crew-verified {
  width: 42px;
  height: 42px;
}

.mcard-page.is-full {
  min-height: 100dvh;
  background: #14060c;
}

.mcard-page.is-full .mcard-wrap {
  max-width: 400px;
}

.mcard-page {
  overflow-x: hidden;
}

@media (max-width: 360px) {
  .mcard-qr {
    width: 88px;
    min-width: 88px;
    min-height: 104px;
    padding: 5px;
  }

  .mcard-qr svg {
    width: 76px;
    height: 76px;
    min-width: 76px;
    min-height: 76px;
  }

  .mcard-no {
    font-size: 0.92rem;
    letter-spacing: 0.04em;
  }

  .mcard-photo {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 699px) {
  .mcard-name {
    font-size: 1.28rem;
  }

  .you-head {
    gap: 14px;
    padding-bottom: 18px;
  }

  .you-avatar .avatar,
  .you-avatar .crew-photo {
    width: 76px;
    height: 76px;
  }
}

@media (min-width: 720px) {
  .you-action-card {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    align-items: center;
  }

  .mcard-wrap {
    max-width: 440px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .you-action:hover,
  .you-activity-row:hover {
    border-color: rgba(var(--fg-rgb), 0.2);
    background: rgba(var(--fg-rgb), 0.07);
  }

  .you-action:hover {
    transform: translateY(-1px);
  }

  .mcard-back:hover {
    color: var(--cream);
  }

  .you-verify-qr:hover {
    border-color: rgba(201, 162, 39, 0.5);
    background: rgba(90, 23, 37, 0.24);
  }

  .cp-edit-row:hover {
    border-bottom-color: rgba(var(--fg-rgb), 0.22);
  }
}

@media (min-width: 900px) {
  .you-wrap {
    max-width: 980px;
    margin-top: 36px;
  }

  .you-head {
    gap: 22px;
    padding-bottom: 28px;
  }

  .you-avatar .avatar,
  .you-avatar .crew-photo {
    width: 104px;
    height: 104px;
  }

  .you-primary {
    grid-template-columns: minmax(280px, 1.15fr) minmax(240px, 0.85fr);
    grid-template-rows: auto auto;
    gap: 16px 20px;
    align-items: start;
  }

  .you-action-card {
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 16px;
    padding: 22px;
  }

  .you-action-edit {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    align-content: center;
  }

  .you-action-activity {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    align-content: center;
  }

  .you-action-card .mcard.is-compact {
    max-width: 380px;
  }

  .you-action-card .mcard-top {
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
  }

  .you-action-card .mcard.is-compact .mcard-photo {
    width: 64px;
    height: 64px;
  }

  .you-action-card .mcard.is-compact .mcard-name {
    font-size: 1.2rem;
  }

  .you-activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 28px;
    align-items: start;
  }

  .screen.has-nav .you-activity-head .display {
    font-size: 1.85rem;
  }

  .you-activity-grid .you-activity-block {
    margin: 0;
  }

  .mcard-wrap {
    max-width: 440px;
    padding: 28px 8px 72px;
  }

  .mcard-wrap:has(.mcard-desk) {
    max-width: 960px;
  }

  .mcard-page.is-full .mcard-wrap {
    max-width: 400px;
  }

  .mcard-page.is-full .mcard-desk {
    display: block;
  }

  .mcard-desk {
    display: grid;
    grid-template-columns: minmax(340px, 440px) minmax(260px, 1fr);
    grid-template-areas:
      "card head"
      "card aside";
    column-gap: 48px;
    row-gap: 12px;
    align-items: start;
  }

  .mcard-desk > .mcard {
    grid-area: card;
  }

  .mcard-desk > .mcard-head {
    grid-area: head;
    margin: 0;
  }

  .mcard-desk > .mcard-aside {
    grid-area: aside;
  }

  .mcard-page .mcard-head .display,
  .screen.has-nav .mcard-head .display {
    margin: 6px 0 0;
    font-size: clamp(1.8rem, 2.4vw, 2.35rem);
    max-width: 12ch;
  }

  .mcard-aside {
    display: grid;
    gap: 14px;
    padding-top: 4px;
  }

  .mcard-wallet,
  .mcard-hint {
    margin-top: 0;
  }

  .mcard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
  }

  .mcard-actions .btn {
    width: auto;
    min-width: 168px;
  }

  .mcard-full-btn {
    display: none;
  }

  .mcard-wallet-btn {
    width: auto;
    min-width: 240px;
  }

  .mcard-page:not(.is-full) .mcard {
    max-width: 440px;
  }

  .cp-wrap {
    width: min(860px, 100%);
  }

  .cp-edit-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .you-action,
  .you-activity-row,
  .mcard-wallet-btn {
    transition: none;
  }

  .you-action:hover {
    transform: none;
  }
}

.join-wrap {
  align-items: flex-start;
}

body.has-tab-bar .join-wrap,
body.has-tab-bar .perk-wrap {
  padding-bottom: calc(var(--tab-bar-space) + 28px);
}

.join-stage {
  width: min(440px, 100%);
}

.join-intro {
  padding: 8px 4px 0;
}

.join-logo {
  margin-bottom: 18px;
}

.join-logo .logo-img {
  width: 64px;
  height: 64px;
}

.join-intro h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 12px;
}

.join-intro .auth-sub,
.join-form-card .auth-sub {
  max-width: 36ch;
  margin-bottom: 0;
}

.join-skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.join-benefits {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}

.join-benefits li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 4px 4px;
}

.join-benefit-mark {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  color: var(--gold);
}

.join-benefit-mark svg {
  width: 22px;
  height: 22px;
  display: block;
}

.join-benefits strong {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.join-benefits li > span:last-child {
  color: var(--mute);
  font-size: 0.88rem;
  line-height: 1.4;
}

.join-perks-preview {
  margin-top: 28px;
}

.join-perks-head h2,
.join-form-card h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.join-perk-row,
.join-perk-skel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.join-perk-skel span {
  display: block;
  height: 92px;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.06);
}

.join-perk-card {
  background: rgba(var(--fg-rgb), 0.03);
  border-radius: 18px;
}

.join-perk-card button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.join-perk-brand,
.join-perk-brand .perk-brand {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(var(--fg-rgb), 0.06);
}

.join-perk-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.join-perk-copy strong,
.join-perk-title {
  letter-spacing: -0.02em;
}

.join-perk-title {
  font-weight: 600;
}

.join-perk-blurb {
  color: var(--mute);
  font-size: 0.86rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.join-perk-lock {
  margin-top: 6px;
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.join-perk-empty {
  margin-top: 14px;
  padding: 8px 2px 0;
}

.join-perk-empty p {
  margin: 0 0 4px;
  font-weight: 600;
}

.join-perk-empty span {
  color: var(--mute);
  font-size: 0.92rem;
  line-height: 1.45;
}

.join-perk-all {
  margin-top: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold-2);
}

.join-form-card {
  margin-top: 36px;
  scroll-margin-top: 84px;
}

.join-form-card .join-founding-hint {
  margin: 10px 0 18px;
}

.perk-head h1 {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  max-width: 14ch;
}

.perk-lede {
  max-width: 42ch;
}

.perk-stats {
  margin: 14px 0 0;
  color: var(--mute);
  font-size: 0.88rem;
}

.perk-join {
  width: auto;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
}

.perk-tools {
  background: var(--page-bg);
}

.perk-sort {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.perk-sort::-webkit-scrollbar {
  display: none;
}

.perk-sort button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
}

.perk-sort button.on {
  color: #fff8ec;
  background: rgba(90, 23, 37, 0.92);
}

.perk-benefit-line {
  margin: 8px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.perk-card-hit:focus-visible,
.perk-cats button:focus-visible,
.perk-sort button:focus-visible,
.join-perk-card button:focus-visible,
.join-skip:focus-visible,
.perk-back:focus-visible,
.perk-copy:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.perk-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
}

.perk-copy {
  width: auto;
  min-height: 44px;
  margin-top: 8px;
}

.perk-copied {
  margin: 8px 0 0;
  color: var(--gold);
  font-size: 0.86rem;
}

@media (min-width: 720px) {
  .join-stage {
    width: min(760px, 100%);
  }

  .join-benefits {
    grid-template-columns: 1fr 1fr;
    gap: 8px 28px;
  }

  .join-perk-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .join-form-card {
    width: min(460px, 100%);
  }

  .perk-wrap {
    max-width: 1040px;
  }

  .perk-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .perk-featured {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  }

  .perk-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .perk-cta-row .btn {
    width: auto;
  }
}

@media (hover: hover) and (pointer: fine) {
  .perk-card,
  .join-perk-card {
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .perk-card:hover,
  .join-perk-card:hover {
    transform: translateY(-2px);
  }

  .join-perk-card:hover {
    background: rgba(var(--fg-rgb), 0.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .perk-card,
  .join-perk-card {
    transition: none;
  }

  .perk-card:hover,
  .join-perk-card:hover {
    transform: none;
  }
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}