/* ==================================================================
   fcs-modern.css — FreeCouchSurf visual refresh (2026-10-26)
   Loaded after nicekin.css on every page. Part 1 refines shared
   chrome (type, header, nav, buttons, host cards); part 2 is the
   logged-out homepage (.fx-*). Old pages keep working because this
   only re-tunes tokens and adds new classes.
   ================================================================== */

:root {
  --ink:          #13241B;
  --ink-2:        #3E4F45;
  --ink-3:        #6B7A71;
  --forest:       #0E6B4A;
  --forest-dark:  #0A5038;
  --moss:         #E8F1EB;
  --sage:         #F3F6F2;
  --line:         #E2E8E3;
  --amber:        #E9A23B;

  /* re-tune the legacy tokens so older pages pick the palette up */
  --primary:        #0E6B4A;
  --primary-hover:  #0A5038;
  --primary-light:  #E8F1EB;
  --primary-glow:   rgba(14,107,74,.16);
  --bg:             #F6F8F6;
  --border:         #E2E8E3;
  --text-primary:   #13241B;
  --text-secondary: #4E5E55;
  --text-muted:     #7D8B83;

  --font:         'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --wrap:         1240px;
}

body { font-family: var(--font); color: var(--ink); }
h1, h2, h3, .fx-display { font-family: var(--font-display); letter-spacing: -0.02em; }
h4, h5, h6 { letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid rgba(14,107,74,.45); outline-offset: 2px; border-radius: 6px; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn { font-weight: 700; letter-spacing: 0; }
.btn-primary {
  background: var(--forest) !important; border-color: var(--forest) !important;
  border-radius: 999px !important; box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--forest-dark) !important; border-color: var(--forest-dark) !important; }

/* ── Top bar (Telegram) ─────────────────────────────────────────── */
.fx-topbar {
  background: var(--ink); color: rgba(255,255,255,.86);
  font-size: .8rem; font-weight: 500; text-align: center;
  padding: 7px 44px; position: relative; line-height: 1.4;
}
.fx-topbar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fx-topbar a:hover { color: #fff; }
.fx-topbar i { color: #5BC0EB; margin-right: 6px; }
.fx-topbar button {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: none; color: rgba(255,255,255,.6);
  font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 6px;
}
.fx-topbar button:hover { color: #fff; background: rgba(255,255,255,.08); }
.fx-topbar .fx-topbar-long { display: inline; }
.fx-topbar .fx-topbar-short { display: none; }
@media (max-width: 576px) {
  .fx-topbar .fx-topbar-long { display: none; }
  .fx-topbar .fx-topbar-short { display: inline; }
}

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar { padding: .6rem 0 !important; box-shadow: 0 1px 0 var(--line) !important; }
.navbar-brand {
  font-family: var(--font-display); font-weight: 800 !important;
  font-size: 1.45rem !important; letter-spacing: -0.03em; color: var(--ink) !important;
}
.navbar-brand .brand-icon { background: var(--forest); border-radius: 9px; width: 32px; height: 32px; }
.navbar-search .search-wrap { background: var(--sage); border: 1px solid var(--line); }
.navbar-search input { font-weight: 500; }
.invite-pill-btn.insta-pill-btn { background: transparent !important; border-color: transparent !important; color: var(--ink-2) !important; }
.navbar .btn-sm { padding: .42rem 1rem; font-size: .88rem; }

/* ── Category nav: quiet text tabs instead of loud pills ─────────── */
.category-nav { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.cat-pill {
  background: transparent; border: 0; border-radius: 999px;
  color: var(--ink-2); font-weight: 600; font-size: .86rem; padding: .42rem .85rem; gap: 7px;
}
.cat-pill i { color: var(--ink-3); font-size: .85rem; }
.cat-pill:hover { background: var(--sage); color: var(--ink); border-color: transparent; }
.cat-pill.active { background: var(--ink); color: #fff; }
.cat-pill.active i { color: #fff; }
.cat-pill.female, .cat-pill.bff { background: transparent; border: 0; color: var(--ink-2); }
.cat-pill.female i { color: #C2185B; }
.cat-pill.bff i { color: #7B3FA0; }

/* ── Floating "get the app" button: quieter, compact on phones ──── */
#app-download-fab {
  background: var(--ink) !important; box-shadow: 0 6px 20px rgba(19,36,27,.28) !important;
  font-family: var(--font) !important; padding: 8px 16px 8px 8px !important;
}
#app-download-fab img { width: 30px !important; height: 30px !important; border-radius: 8px !important; box-shadow: none !important; }
#app-download-fab .app-fab-label span:first-child { text-transform: none !important; letter-spacing: 0 !important; font-size: .68rem !important; font-weight: 500 !important; }
#app-download-fab .app-fab-label span:last-child { font-weight: 700 !important; font-size: .88rem !important; }
@media (max-width: 576px) {
  #app-download-fab { padding: 6px !important; }
  #app-download-fab .app-fab-label { display: none !important; }
}

/* ==================================================================
   HOST CARDS (.hc) — partials/host-card.php
   ================================================================== */
.hc-grid {
  display: grid; gap: 28px 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--wrap); margin: 0 auto; padding: 8px 24px 24px;
}
@media (max-width: 1100px) { .hc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 8px 16px 20px; } }
@media (max-width: 440px)  { .hc-grid { grid-template-columns: 1fr; } }

.hc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.hc-media {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 14px; background: var(--moss);
}
.hc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hc:hover .hc-media img { transform: scale(1.03); }
.hc-media.is-empty { display: flex; align-items: center; justify-content: center; }
.hc-media .hc-fallback { width: 42%; height: auto; aspect-ratio: 1; border-radius: 50%; opacity: .75; }
.hc-status {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: .74rem; font-weight: 700; padding: 4px 10px 4px 8px; border-radius: 999px;
}
.hc-dot { width: 7px; height: 7px; border-radius: 50%; background: #9AA59F; }
.hc-status.is-yes .hc-dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.hc-status.is-maybe .hc-dot { background: var(--amber); }
.hc-status.is-no .hc-dot { background: #B4BCB7; }
.hc-status.is-no { color: var(--ink-3); }

.hc-body { padding: 12px 2px 0; }
.hc-name {
  font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: 0;
  margin: 0 0 2px; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.hc-name a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-name a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.hc-verified { color: var(--forest); font-size: .8rem; }
.hc-online { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; margin-left: auto; flex-shrink: 0; }
.hc-place { color: var(--ink-2); font-size: .88rem; margin: 0 0 6px; }
.hc-place a { color: inherit; position: relative; z-index: 1; }
.hc-place a:hover { color: var(--forest); text-decoration: underline; }
.hc-age { color: var(--ink-3); margin-left: 4px; }
.hc-age::before { content: "· "; }
.hc-about {
  color: var(--ink-3); font-size: .86rem; line-height: 1.5; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .8rem; }
.hc-meta:empty { display: none; }
.hc-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--forest); font-weight: 600; }
.hc-tag.is-female { color: #B0175A; }
.hc-rating { color: var(--ink); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; }
.hc-rating i { color: var(--amber); font-size: .78rem; }
.hc-rating span { color: var(--ink-3); font-weight: 500; }
.hc-safe { color: var(--forest); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.hc-actions { display: flex; gap: 8px; margin-top: 10px; position: relative; z-index: 1; }
.hc-btn {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: .82rem; font-weight: 700; padding: 7px 10px; border-radius: 999px; cursor: pointer;
}
.hc-btn:hover { border-color: var(--ink); color: var(--ink); }
.hc-btn.is-primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.hc-btn.is-primary:hover { background: var(--forest-dark); color: #fff; }

/* ==================================================================
   HOMEPAGE (.fx-*)
   ================================================================== */
.fx-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 800px) { .fx-wrap { padding: 0 16px; } }
.fx-home { background: #fff; }

/* Hero */
.fx-hero { background: #fff; padding: 56px 0 40px; overflow: hidden; }
.fx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fx-h1 {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -0.018em;
  margin: 0 0 22px; font-variation-settings: "opsz" 96;
}
.fx-h1 span { display: block; color: var(--forest); }
.fx-lede { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-2); line-height: 1.6; max-width: 34em; margin: 0 0 28px; }

.fx-search {
  display: flex; align-items: center; gap: 8px; max-width: 560px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 6px 6px 6px 20px; box-shadow: 0 10px 30px rgba(19,36,27,.08);
}
.fx-search:focus-within { box-shadow: 0 0 0 4px rgba(14,107,74,.16), 0 10px 30px rgba(19,36,27,.08); border-color: var(--forest); }
.fx-search i { color: var(--forest); font-size: 1.05rem; }
.fx-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 500 1.02rem var(--font); color: var(--ink); padding: 10px 4px;
}
.fx-search input::placeholder { color: var(--ink-3); }
.fx-search button {
  border: 0; background: var(--forest); color: #fff; font: 700 .98rem var(--font);
  padding: 12px 24px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.fx-search button:hover { background: var(--forest-dark); }

.fx-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; max-width: 560px; }
.fx-popular-label { font-size: .86rem; color: var(--ink-3); margin-right: 2px; }
.fx-chip {
  display: inline-block; font-size: .86rem; font-weight: 600; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; background: #fff;
}
.fx-chip:hover { border-color: var(--ink); color: var(--ink); }

.fx-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--ink-2); font-size: .94rem; }
.fx-faces { display: flex; }
.fx-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -10px; background: var(--moss); }
.fx-faces img:first-child { margin-left: 0; }
.fx-proof strong { color: var(--ink); font-weight: 700; }
.fx-proof a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Hero collage of real hosts — the one loud element on the page */
.fx-collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fx-col { display: flex; flex-direction: column; gap: 14px; }
.fx-col:nth-child(2) { margin-top: 56px; }
.fx-col:nth-child(3) { margin-top: 20px; }
.fx-tile { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--moss); aspect-ratio: 4 / 5; }
.fx-tile.is-square { aspect-ratio: 1 / 1; }
.fx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-tile .fx-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(10,22,15,.72), rgba(10,22,15,0));
  color: #fff; font-size: .8rem; line-height: 1.3;
}
.fx-tile .fx-cap b { display: block; font-size: .9rem; font-weight: 700; }
.fx-tile:hover img { transform: scale(1.03); }
.fx-tile img { transition: transform .4s ease; }
.fx-tile-more {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  aspect-ratio: 1 / 1; border-radius: 18px; padding: 16px;
  background: var(--forest); color: #fff;
}
.fx-tile-more b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; }
.fx-tile-more span { font-size: .86rem; opacity: .9; }
.fx-tile-more:hover { background: var(--forest-dark); color: #fff; }

/* Trust strip */
.fx-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.fx-trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fx-trust li { display: flex; gap: 12px; align-items: flex-start; padding: 20px 20px 20px 0; }
.fx-trust li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.fx-trust i { color: var(--forest); font-size: 1.1rem; margin-top: 3px; width: 20px; text-align: center; }
.fx-trust b { display: block; font-size: .95rem; color: var(--ink); }
.fx-trust span { display: block; font-size: .84rem; color: var(--ink-3); }
.fx-trust a { color: inherit; }
.fx-trust a:hover b { color: var(--forest); }

/* Host section head + filters */
.fx-hosts { padding: 52px 0 12px; background: #fff; }
.fx-hosts.is-member { padding-top: 22px; }
.fx-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.fx-sec-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; margin: 0; color: var(--ink); }
.fx-sec-head p { margin: 6px 0 0; color: var(--ink-3); font-size: .95rem; }
.fx-link { color: var(--forest); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.fx-link:hover { color: var(--forest-dark); }
.fx-filters {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 18px; margin-bottom: 4px;
}
.fx-filters::-webkit-scrollbar { display: none; }
.fx-filter {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #fff;
}
.fx-filter i { color: var(--ink-3); font-size: .8rem; }
.fx-filter:hover { border-color: var(--ink); color: var(--ink); }
.fx-filter.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.fx-filter.active i { color: #fff; }
.fx-filter .hc-dot { background: #16A34A; }
.fx-empty { grid-column: 1 / -1; text-align: center; padding: 56px 16px; color: var(--ink-2); }
.fx-empty a { color: var(--forest); font-weight: 700; }
.fx-loading { text-align: center; padding: 18px; color: var(--ink-3); font-size: .9rem; }

/* Six ways */
.fx-ways { padding: 80px 0; background: var(--sage); }
.fx-ways-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.fx-ways h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.05; margin: 0 0 14px; color: var(--ink); }
.fx-ways-intro { color: var(--ink-2); line-height: 1.65; margin: 0 0 16px; }
.fx-ways-intro a, .fx-ways-more a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fx-ways-more { color: var(--ink-3); font-size: .92rem; line-height: 1.65; margin: 0; }
.fx-ways-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.fx-way { display: block; padding: 22px 0; border-top: 1px solid #D5DED7; color: var(--ink); }
.fx-way:hover { color: var(--ink); }
.fx-way:hover h3 { color: var(--forest); }
.fx-way h3 { font-family: var(--font); font-size: 1.08rem; font-weight: 700; letter-spacing: 0; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.fx-way h3 i { color: var(--forest); width: 20px; text-align: center; font-size: 1rem; }
.fx-way p { font-size: .9rem; color: var(--ink-2); line-height: 1.6; margin: 0; padding-left: 30px; }

/* Destinations */
.fx-dest { padding: 76px 0; background: #fff; }
.fx-dest h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.fx-dest-sub { color: var(--ink-3); margin: 0 0 26px; }
.fx-countries { columns: 4 200px; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
.fx-countries li { break-inside: avoid; }
.fx-countries a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .95rem; }
.fx-countries a:hover { color: var(--forest); }
.fx-countries .fx-flag { font-size: 1.15rem; line-height: 1; }
.fx-cities-head { display: flex; align-items: baseline; gap: 16px; margin: 44px 0 14px; }
.fx-cities-head h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.fx-cities { display: flex; flex-wrap: wrap; gap: 8px; }

/* FAQ */
.fx-faq { padding: 76px 0 96px; background: var(--sage); }
.fx-faq .fx-wrap { max-width: 860px; }
.fx-faq h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; margin: 0 0 22px; }
.fx-faq details { border-top: 1px solid #D5DED7; }
.fx-faq details:last-of-type { border-bottom: 1px solid #D5DED7; }
.fx-faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
}
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary h3 { font-family: var(--font); font-size: 1.06rem; font-weight: 700; letter-spacing: 0; margin: 0; color: var(--ink); }
.fx-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--forest); line-height: 1;
}
.fx-faq details[open] summary::after { content: "–"; }
.fx-faq details p { color: var(--ink-2); line-height: 1.7; margin: 0 0 20px; max-width: 70ch; }
.fx-faq details p a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .fx-hero { padding: 32px 0 28px; }
  .fx-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .fx-collage { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-snap-type: x mandatory; }
  .fx-collage::-webkit-scrollbar { display: none; }
  .fx-col { display: contents; }
  .fx-col:nth-child(n) { margin-top: 0; }
  .fx-tile, .fx-tile.is-square, .fx-tile-more { flex: 0 0 148px; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .fx-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-trust li { padding: 16px 12px 16px 0; }
  .fx-trust li + li { padding-left: 0; border-left: 0; }
  .fx-trust li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .fx-trust li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fx-ways-grid { grid-template-columns: 1fr; gap: 24px; }
  .fx-ways { padding: 56px 0; }
}
@media (max-width: 600px) {
  .fx-h1 { font-size: 2.35rem; margin-bottom: 14px; }
  .fx-lede { font-size: 1rem; margin-bottom: 20px; }
  .fx-search { padding-left: 16px; }
  .fx-search button { padding: 11px 16px; font-size: .92rem; }
  .fx-proof { font-size: .86rem; margin-top: 22px; }
  .fx-faces img { width: 30px; height: 30px; }
  .fx-trust b { font-size: .88rem; }
  .fx-trust span { font-size: .78rem; }
  .fx-ways-list { grid-template-columns: 1fr; }
  .fx-sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fx-dest, .fx-faq { padding: 52px 0; }
  .fx-countries { columns: 2; column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-media img, .fx-tile img { transition: none; }
  .hc:hover .hc-media img, .fx-tile:hover img { transform: none; }
}

/* ── Round-2 polish ─────────────────────────────────────────────── */
.navbar > .container-fluid { flex-wrap: nowrap; }
.fx-lede-short { display: none; }
.site-footer { background: var(--ink) !important; }
@media (max-width: 576px) {
  .navbar-brand { font-size: 1.2rem !important; gap: 6px; }
  .navbar-brand .brand-icon { width: 28px; height: 28px; font-size: .85rem; }
  .navbar .insta-pill-btn { display: none !important; }
  .navbar .btn-sm { padding: .36rem .8rem; font-size: .84rem; }
  .fx-lede-long { display: none; }
  .fx-lede-short { display: inline; }
  .fx-popular { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .fx-popular::-webkit-scrollbar { display: none; }
  .fx-chip { flex-shrink: 0; }
}

/* ── Round-3: mobile overflow + density ─────────────────────────── */
.fx-hero-grid > *, .fx-ways-grid > * { min-width: 0; }
@media (max-width: 576px) {
  .navbar > .container-fluid { padding-left: 12px !important; padding-right: 12px !important; gap: 4px !important; }
  .navbar .ms-auto { gap: 4px !important; }
  .navbar .nav-icon-btn { width: 36px; height: 36px; }
  .navbar a.btn-sm[href="/login.php"] { background: transparent !important; padding-left: .5rem; padding-right: .5rem; }
  .fx-trust li span { display: none; }
  .fx-trust li { padding: 14px 10px 14px 0; align-items: center; }
  .fx-trust li:nth-child(even) { padding-left: 12px; }
  .fx-trust i { margin-top: 0; }
  .fx-trust b { font-size: .85rem; line-height: 1.3; }
}
@media (max-width: 440px) { .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .hc-about { -webkit-line-clamp: 2; font-size: .82rem; } .hc-status { font-size: .68rem; padding: 3px 8px 3px 6px; } }
@media (max-width: 340px) { .hc-grid { grid-template-columns: 1fr; } }
@media (max-width: 400px) {
  .navbar-brand { font-size: 1.08rem !important; margin-right: 0; }
  .navbar .btn-sm { padding: .34rem .7rem; }
}

/* ── Round-4: member view fixes ─────────────────────────────────── */
.hc-btn { min-width: 0; white-space: nowrap; }
@media (max-width: 991px) {
  /* inline bottom:18px on the button used to beat the old :has() lift */
  body:has(.mobile-bottom-nav) #app-download-fab { bottom: 76px !important; }
}
@media (max-width: 440px) {
  .hc-btn { padding: 7px 8px; font-size: .78rem; }
  .hc-btn-long { display: none; }
  .hc-actions .hc-btn.is-primary + .hc-btn { flex: 0 0 38px; }
  .hc-actions .hc-btn.is-primary + .hc-btn .hc-btn-msg { display: none; }
}

/* ==================================================================
   SIGNUP NUDGES (partials/signup-nudges.php) — 2026-10-26
   ================================================================== */
/* Quick signup form (sheet + grid tile) */
.fx-qs { display: flex; flex-direction: column; gap: 12px; }
.fx-qs-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.fx-qs-field > span { font-size: .84rem; font-weight: 700; color: var(--ink); }
.fx-qs-field input {
  width: 100%; border: 1px solid #CDD6D0; border-radius: 10px; background: #fff;
  font: 500 1rem var(--font); color: var(--ink); padding: 11px 13px;
}
.fx-qs-field input:focus { outline: 0; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(14,107,74,.16); }
.fx-qs-hint { font-size: .74rem; color: var(--ink-3); }
.fx-qs-terms { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--ink-2); line-height: 1.4; margin: 2px 0 0; }
.fx-qs-terms input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--forest); flex-shrink: 0; }
.fx-qs-terms a { color: var(--forest); text-decoration: underline; }
.fx-qs-error { margin: 0; font-size: .84rem; font-weight: 600; color: #B42318; background: #FEF3F2; border-radius: 8px; padding: 8px 10px; }
.fx-qs-btn {
  border: 0; border-radius: 999px; background: var(--forest); color: #fff;
  font: 700 1rem var(--font); padding: 13px 18px; cursor: pointer; margin-top: 2px;
}
.fx-qs-btn:hover { background: var(--forest-dark); }
.fx-qs-btn:disabled { opacity: .7; cursor: default; }
.fx-qs-login { margin: 0; text-align: center; font-size: .86rem; color: var(--ink-3); }
.fx-qs-login a { color: var(--forest); font-weight: 700; }

/* Sheet: bottom sheet on phones, centred dialog on larger screens */
.fx-sheet {
  border: 0; padding: 26px 24px 22px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(19,36,27,.25); color: var(--ink); overflow-y: auto;
}
.fx-sheet::backdrop { background: rgba(19,36,27,.45); }
.fx-sheet[open] { animation: fx-sheet-in .22s ease-out; }
@keyframes fx-sheet-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fx-sheet-close {
  position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--sage); color: var(--ink-2); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.fx-sheet-close:hover { background: var(--moss); color: var(--ink); }
.fx-sheet-head { display: flex; gap: 14px; align-items: center; margin: 0 36px 18px 0; }
.fx-sheet-photo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.fx-sheet-title { font-size: 1.35rem; font-weight: 800; line-height: 1.15; margin: 0 0 4px; }
.fx-sheet-sub { font-size: .9rem; color: var(--ink-2); line-height: 1.45; margin: 0; }
.fx-sheet-skip { display: block; text-align: center; margin-top: 12px; font-size: .86rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.fx-sheet-skip:hover { color: var(--ink); }
html.fx-sheet-open { overflow: hidden; }
@media (max-width: 600px) {
  .fx-sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .fx-sheet[open] { animation-name: fx-sheet-up; }
  @keyframes fx-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
}

/* Sticky join bar — phones only */
.fx-joinbar { display: none; }
@media (max-width: 767px) {
  .fx-joinbar:not([hidden]) {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1040;
    background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 8px 10px 16px;
    box-shadow: 0 10px 30px rgba(19,36,27,.3);
    transform: translateY(140%); transition: transform .3s ease;
  }
  .fx-joinbar.is-in { transform: none; }
  .fx-joinbar-text { flex: 1; font-size: .88rem; line-height: 1.3; color: rgba(255,255,255,.85); }
  .fx-joinbar-text b { color: #fff; }
  .fx-joinbar-btn { border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 700 .9rem var(--font); padding: 10px 16px; white-space: nowrap; }
  .fx-joinbar-close { border: 0; background: none; color: rgba(255,255,255,.6); font-size: 1.3rem; width: 30px; height: 30px; line-height: 1; padding: 0; }
  body.fx-has-joinbar #app-download-fab { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-joinbar { transition: none; }
  .fx-sheet[open] { animation: none; }
}

/* In-grid signup tile */
.hc-join {
  background: var(--forest); color: #fff; border-radius: 14px; padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: center; align-self: start;
}
.hc-join h3 { font-size: 1.45rem; font-weight: 800; line-height: 1.1; margin: 0 0 6px; color: #fff; }
.hc-join > p { font-size: .9rem; color: rgba(255,255,255,.85); margin: 0 0 16px; line-height: 1.45; }
.hc-join .fx-qs { gap: 10px; }
.hc-join .fx-qs-field > span { color: #fff; font-size: .8rem; }
.hc-join .fx-qs-field input { border-color: transparent; padding: 10px 12px; font-size: .95rem; }
.hc-join .fx-qs-hint { display: none; }
.hc-join .fx-qs-terms { color: rgba(255,255,255,.85); font-size: .78rem; }
.hc-join .fx-qs-terms a, .hc-join .fx-qs-login a { color: #fff; }
.hc-join .fx-qs-btn { background: #fff; color: var(--forest); }
.hc-join .fx-qs-btn:hover { background: var(--moss); }
.hc-join .fx-qs-login { color: rgba(255,255,255,.75); }
@media (max-width: 800px) { .hc-join { grid-column: 1 / -1; } }

/* ── Embedded in the app (?embed=1) ─────────────────────────────── */
body.is-embed .fx-topbar, body.is-embed .navbar, body.is-embed .category-nav,
body.is-embed .site-footer, body.is-embed .mobile-bottom-nav, body.is-embed #app-download-fab,
body.is-embed .fx-joinbar, body.is-embed .xp-hostband, body.is-embed .xp-cities { display: none !important; }
body.is-embed { padding-bottom: 0 !important; }
body.is-embed .xd-mbar { bottom: 0 !important; }
body.is-embed .xp-rail { top: 0; }
body.is-embed .xd-book { top: 16px; }

/* Logged-in phones: the header row (logo, Invite, search, inbox, bell, avatar) must fit 360–400px */
@media (max-width: 420px) {
  .navbar .nav-icon-btn { width: 32px; height: 32px; font-size: 1rem; }
  #profile-chevron { display: none; }
  .navbar .invite-pill-btn:not(.insta-pill-btn) { padding: 6px 10px !important; font-size: .8rem !important; }
  .nav-profile-thumb { width: 32px; height: 32px; }
}
@media (max-width: 380px) { .navbar-brand .brand-icon { display: none !important; } }