:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --border: #E5E7EB;

  /* Brand cyan — matches the true logo cyan (Docs/BRAND_IDENTITY.md). */
  --primary: #0ba8d2;
  --primary-hover: #0a97bd;
  --primary-active: #0986a8;
  --primary-light: rgba(11, 168, 210, 0.08);

  --brand-dark: #0F172A;
  --accent: #16A34A;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);

  --radius: 12px;
  --pill: 999px;
  --mobile-topbar-offset: 57px;
}

* {
  box-sizing: border-box;
}

/* Interop: author `display` rules (.btn { display:flex } etc.) override the
   browser's built-in [hidden] handling, which silently un-hides elements the
   template/JS marked hidden (e.g. the Log In button while authenticated).
   !important is required here per the override policy for state attributes. */
[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body.menu-open {
  overflow: hidden;
}

/* View-Aware Layout: Mobile Spaces Bar (Global Layout Concern) */
/* Always hidden by default to avoid first-paint flash (FOUC). */
.mobile-spaces-bar {
  display: none;
}

@media (max-width: 720px) {

  /* Hide spaces bar by default on mobile */
  .mobile-spaces-bar {
    display: none !important;
  }

  /* Show only on Home and Space detail views */
  body.view-home .mobile-spaces-bar,
  body.view-space .mobile-spaces-bar {
    display: block !important;
  }
}

/* =========================
   HEADER
   ========================= */

.topbar-wrap {
  position: relative;
  z-index: 50;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #E5E7EB;
  overflow: visible;
  /* Keep header chrome visible while allowing dropdown menus to escape the bar. */
}

.topbar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* Drop the tagline when the bar gets tight so the (absolute) location button
   never overlaps the brand. Brand name still shows. */
@media (max-width: 1150px) {
  .brand-text .tag {
    display: none;
  }
}

.route-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}

.route-progress.is-active {
  opacity: 1;
}

.route-progress-bar {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #38bdf8 0%, #0ea5e9 45%, #0284c7 100%);
  box-shadow: 0 0 10px rgba(14, 165, 233, .35);
  transition: transform .18s ease-out;
}


.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: pointer;
  flex-shrink: 0;
}

.logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-dark);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.logo svg path {
  stroke: #FFFFFF;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text .name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-text .tag {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Navigation Center — only the search is in normal flow, so it centers in the
   top bar. The location button is positioned absolutely, hanging just to its
   left, so it never offsets the search or crowds the brand. */
.nav-center {
  justify-self: center;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-center .loc-btn {
  position: absolute;
  right: 100%;
  margin-right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Location Trigger */
.loc-btn {
  background: #F1F5F9;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 60ms linear, color 60ms linear;
}

.loc-btn--has-flag .loc-btn-pin {
  display: none;
}

.loc-btn-flag {
  display: none;
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}

.loc-btn--has-flag .loc-btn-flag {
  display: inline-flex;
}

.loc-btn-flag img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}

.loc-btn:hover {
  background: #E2E8F0;
  color: var(--brand-dark);
}

.loc-btn svg.chevron {
  color: var(--muted);
  width: 14px;
  height: 14px;
}

/* Separator */
.nav-sep {
  width: 1px;
  height: 20px;
  background: #E2E8F0;
}

/* Top-bar global search field. Navigation moved to the desktop left rail, so
   the top bar carries global search + account actions only. */
/* Clean search: white pill with a light hairline border. No shadow — a subtle
   border darkening on hover/focus is the only feedback. */
.top-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #DFE1E5;
  border-radius: var(--pill);
  padding: 9px 16px;
  width: 460px;
  max-width: 40vw;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.top-search:hover {
  border-color: #C4C7CC;
}

.top-search:focus-within {
  border-color: var(--primary);
}

/* Space pages have their own in-space search + filters, so the global top-bar
   search is hidden here (avoids two search bars). The location pill returns to
   normal flow since it is absolutely positioned relative to the search. */
body.view-space .top-search {
  display: none;
}

body.view-space .nav-center .loc-btn {
  position: static;
  transform: none;
  margin-right: 0;
}

.top-search-icon {
  color: var(--muted);
  flex-shrink: 0;
}

.top-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}

.top-search-input::placeholder {
  color: var(--muted);
}

/* Main Navigation (Tabs/Links) — deprecated: the top-bar Home/Search tabs were
   removed when nav moved to the desktop left rail. Rules kept temporarily. */
.main-nav {
  display: flex;
  gap: 16px;
}

.nav-link {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 7px 11px;
  border-radius: 8px;
  position: relative;
  transition: background-color 60ms linear, color 60ms linear;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link svg {
  color: var(--muted);
  transition: color 60ms linear;
}

.nav-link:hover {
  background: #F1F3F5;
  color: var(--text);
}

.nav-link:hover svg {
  color: var(--text);
}

.nav-link.active {
  color: var(--primary);
  background: rgba(11, 168, 210, 0.10);
}

.nav-link.active svg {
  color: var(--primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -17px;
  /* Align with container bottom */
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  opacity: 1;
}

.actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 9px 18px;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 60ms linear, border-color 60ms linear, color 60ms linear;
}

.btn:hover {
  background: #F1F3F5;
  border-color: #CBD5E1;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

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

.btn-primary:active {
  background: var(--primary-active);
  border-color: var(--primary-active);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes hanshek-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hanshek-spin {
  animation: hanshek-spin 1s linear infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .hanshek-spin {
    animation-duration: 1.8s;
  }
}

.hanshek-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hanshek-loading-label {
  line-height: 1;
}

.hanshek-loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.btn.is-loading {
  cursor: wait;
}

.dropdown-item.is-loading,
.hamburger-item.is-loading {
  cursor: wait;
  opacity: 0.7;
}

.iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 60ms linear, color 60ms linear;
  position: relative;
  color: var(--muted);
}

.mobile-menu-btn {
  display: none;
}

.iconbtn:hover {
  background: #F1F3F5;
  color: var(--text);
  border-color: transparent;
}

.iconbtn:active {
  background: rgba(15, 23, 42, 0.1);
}

.iconbtn.user-active {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.iconbtn.user-active:hover {
  transform: none;
  opacity: 1;
  background: transparent;
}

.notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #EF4444;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface), 0 6px 18px rgba(239, 68, 68, .18);
  letter-spacing: -0.01em;
}

.notif-count[data-hidden="true"] {
  display: none;
}

.btn:focus-visible,
.nav-link:focus-visible,
.iconbtn:focus-visible,
.loc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, .2);
  border-color: #cbd5e1;
}

@media (max-width: 720px) {
  body {
    padding-top: 0;
  }

  .topbar-wrap {
    position: static;
    width: 100%;
  }

  .topbar {
    /* Mobile: single clean row (Brand | Location | Profile) */
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav actions";
    row-gap: 0;
    transition: padding .18s ease, gap .18s ease;
  }

  .brand {
    grid-area: brand;
    min-width: 0;
    transition: gap .18s ease;
  }

  /* Location returns to normal flow on mobile (it is absolute on desktop). */
  .nav-center .loc-btn {
    position: static;
    transform: none;
    margin-right: 0;
  }

  .actions {
    grid-area: actions;
  }

  .nav-center {
    grid-area: nav;
    width: 100%;
    min-width: 0;
    justify-content: center;
    gap: 12px;
    transition: gap .18s ease;
  }

  .nav-sep {
    display: none;
  }

  /* Maybe hide separator on mobile */
  .main-nav {
    gap: 20px;
  }

  .brand-text .tag {
    display: none;
  }

  .brand-text .name,
  .logo,
  .iconbtn,
  .loc-btn {
    transition: all .18s ease;
  }

  .topbar .btn-primary:not(.is-loading)>span {
    display: none;
  }

  .btn-primary {
    padding: 10px 12px;
  }

}

/* =========================
   VIEWS (Home vs Search)
   ========================= */
.view {
  display: none;
}

.view.active {
  display: block;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}

.page .view {
  padding: 18px 16px 80px;
}

/* =========================
   LAYOUT GRID
   ========================= */

.layout-wrapper {
  max-width: 1360px;
  /* Industry standard container */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 20px;
  padding: 24px 16px;
  align-items: start;
}

body.view-dashboard .layout-wrapper {
  max-width: 1400px;
  grid-template-columns: 1fr;
}

body.view-dashboard .layout-wrapper>.sidebar-col {
  display: none;
}

body.view-dashboard .page {
  max-width: 1180px;
  margin: 0 auto;
}

body.view-dashboard .page .view {
  padding-left: 0;
  padding-right: 0;
}

/* Home keeps the default 3-column grid; the left column holds the nav rail
   (see .left-nav-rail below). Desktop web only — the whole left column is
   already hidden under 1100px, so mobile web keeps its bottom nav untouched. */


@media (max-width: 1100px) {
  .layout-wrapper {
    grid-template-columns: 1fr 320px;
  }

  .sidebar-col.left-sidebar {
    display: none;
  }
}

@media (max-width: 900px) {
  .layout-wrapper {
    grid-template-columns: 1fr;
    /* Single column on mobile */
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    max-width: 100%;
  }

  .sidebar-col {
    display: none;
    /* Hide all sidebars on small screens */
  }

  /* Avoid double side gutters on mobile: layout-wrapper already provides padding */
  .page .view {
    padding-left: 0;
    padding-right: 0;
  }

  .page {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* ===================================
   SIDEBAR VISIBILITY (Global Layout)
   =================================== */
.search-filters-sidebar {
  display: none;
}

body.view-search .search-filters-sidebar {
  display: block;
}

body.view-search .quick-links-widget {
  display: none;
}

.sidebar-col {
  position: sticky;
  top: 96px;
  /* Match header + layout top padding so sidebar doesn't "jump" when sticky engages */
  height: calc(100vh - 116px);
  overflow-y: auto;
  /* Ensure popovers/menus in the sidebar (e.g., date-picker dropdown) can overlay the main column */
  z-index: 5;
}

.sidebar-col.left-sidebar {
  padding-top: 2px;
}

.layout-wrapper>.sidebar-col:not(.left-sidebar) {
  padding-top: 2px;
}

/* Footer Links in Sidebar */
.footer-links {
  padding: 0 8px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.footer-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.footer-link:hover {
  text-decoration: underline;
  color: var(--text);
}

.copyright {
  font-size: 12px;
  color: #94A3B8;
}

/* Redefine .page max-width within the grid */
.page {
  width: 100%;
  max-width: 100%;
  /* Let grid control width */
  margin: 0;
  padding: 0;
}


/* =========================
   SEARCH VIEW STYLES
   ========================= */
/* Search View styles moved to search module */


/* =========================
   Modal (Common)
   ========================= */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.overlay.show {
  display: flex;
}

.modal {
  width: min(680px, 100%);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid #F1F5F9;
  background: #FFFFFF;
  flex: 0 0 auto;
}

.modal-head .h {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.close {
  border: 1px solid var(--border);
  background: #FFFFFF;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.close:hover {
  background: #F8FAFC;
}

.modal-body {
  padding: 14px;
  overflow-y: auto;
}

@supports (height: 100dvh) {
  .modal {
    max-height: calc(100dvh - 32px);
  }
}

/* =========================
   Post Detail Modal
   ========================= */
/* Post Detail styles moved to posts module */


/* Location Modal styles moved to modules/locations/frontend/style.css per AGENTS.md Rule 7 */

/* =========================
   Profile Dropdown
   ========================= */
.dropdown-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-menu.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-item {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  /* Reset button styles */
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.dropdown-item:hover {
  background: #F8FAFC;
  color: var(--brand-dark);
}

.dropdown-item-danger:hover {
  background: #FEF2F2;
  color: #DC2626;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* =========================
   Create Post Modal
   ========================= */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.form-input,
.form-textarea {
  appearance: none;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-family: inherit;
  background-color: #FFFFFF;
}

select.form-input {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 200px;
  line-height: 1.6;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: var(--shadow-sm);
}

/* Legacy Filter Input compatibility */
.filter-input {
  appearance: none;
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

select.filter-input {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.filter-input:hover {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
}

.filter-input:focus {
  outline: none;
  border-color: var(--brand-dark);
}

/* =========================
   DASHBOARD & PROFILE STYLES
   ========================= */

/* Dashboard and Profile styles moved to respective modules */


/* =========================
   Dashboard Manage Toolbar
   ========================= */
/* Dashboard control styles moved to posts module */

/* =========================
   MOBILE REDESIGN (Browser Only)
   ========================= */

/* Bottom Navigation Bar (Mobile Only) */
.bottom-nav {
  display: none;
}

/* Guest-only floating WhatsApp CTA (mobile behavior defined in media query) */
.mobile-guest-wa-float {
  display: none;
}

@media (max-width: 720px) {

  /* Reduce top whitespace across mobile app views (Home/Search/Inbox/Dashboard/etc.) */
  .layout-wrapper {
    padding-top: 10px;
  }

  .page .view {
    padding-top: 10px;
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    z-index: 1000;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.04);
  }

  .mobile-guest-wa-float {
    position: fixed;
    right: 12px;
    bottom: 84px;
    z-index: 1100;
    display: none;
    align-items: center;
    gap: 8px;
  }

  .mobile-guest-wa-float.is-visible {
    display: flex;
  }

  body.menu-open .mobile-guest-wa-float {
    display: none !important;
  }

  .mobile-guest-wa-link {
    height: 44px;
    padding: 0 14px;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--surface);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow);
    transition: opacity .15s ease, transform .15s ease;
  }

  .mobile-guest-wa-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .mobile-guest-wa-icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .mobile-guest-wa-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    transition: background 0.2s ease;
  }

  .mobile-guest-wa-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }

  /* Collapsed state */
  .mobile-guest-wa-float.is-collapsed {
    gap: 6px;
  }

  .mobile-guest-wa-float.is-collapsed .mobile-guest-wa-link {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  .mobile-guest-wa-float.is-collapsed .mobile-guest-wa-icon {
    width: 18px;
    height: 18px;
  }

  .mobile-guest-wa-float.is-collapsed .mobile-guest-wa-icon svg {
    width: 18px;
    height: 18px;
  }

  .mobile-guest-wa-float.is-collapsed .mobile-guest-wa-label {
    display: none;
  }

  .mobile-guest-wa-float.is-collapsed .mobile-guest-wa-toggle {
    width: 28px;
    height: 28px;
  }

  .mobile-guest-wa-float.is-collapsed .mobile-guest-wa-toggle svg {
    transform: rotate(180deg);
    width: 14px;
    height: 14px;
  }

  /* Push modals up slightly on mobile to avoid bottom nav/button overlap */
  .overlay .modal {
    margin-bottom: 80px;
  }

  /* Hide desktop navigation elements on mobile */
  .topbar .main-nav,
  .topbar .nav-sep,
  .topbar .top-search {
    display: none !important;
  }

  .topbar .btn-primary,
  .topbar #btnNotifications {
    display: none !important;
  }

  /* Mobile header: use a dedicated hamburger, keep it clean */
  .topbar #btnNavLogin,
  .topbar #profileWrapper {
    display: none !important;
  }

  .topbar #btnMobileMenu {
    display: grid !important;
  }

  /* Adjust location button for mobile */
  .loc-btn {
    background: #F1F5F9;
    padding: 5px 8px;
    border-radius: var(--pill);
    max-width: 100%;
    min-width: 0;
    font-size: 12px;
    gap: 5px;
  }

  #locLabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    display: block;
  }

  .loc-btn-flag {
    width: 18px;
    height: 14px;
    flex-basis: 18px;
    border-radius: 4px;
  }

  .loc-btn svg.chevron {
    width: 11px;
    height: 11px;
  }

  /* Add bottom padding to main content to avoid bottom nav overlap */
  .layout-wrapper {
    padding-bottom: 80px;
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    flex: 1;
    max-width: 72px;
    transition: color .18s ease;
    font-family: inherit;
    position: relative;
  }

  .bottom-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
  }

  .bottom-nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #EF4444;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.98);
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-sizing: border-box;
    transform: translateZ(0);
    display: none;
  }

  /* Fallback: if badge is a direct child of inbox button, anchor it to icon center area */
  #bottomNavInbox>#bottomInboxBadge {
    top: 2px;
    left: calc(50% + 8px);
    right: auto;
    transform: translateX(-50%);
  }

  /* Preferred: when badge is inside the dedicated icon wrapper, anchor to icon */
  #bottomNavInbox .bottom-nav-icon-wrap>#bottomInboxBadge {
    top: -4px;
    right: -8px;
    left: auto;
    transform: translateZ(0);
  }

  .bottom-nav-badge[data-hidden="true"] {
    display: none;
  }

  .bottom-nav-item.active {
    color: var(--brand-dark);
  }

  .bottom-nav-item span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .bottom-nav-item svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
  }

  /* Auth-only navigation items (hidden for guests) */
  .bottom-nav-item.nav-auth-only {
    display: none;
  }

  .bottom-nav.is-authenticated .bottom-nav-item.nav-auth-only {
    display: flex;
  }

  /* Guest state: center Home & Search with comfortable spacing */
  .bottom-nav:not(.is-authenticated) {
    justify-content: center;
    gap: 80px;
  }

  /* Authenticated state: space-around for all 4 items */
  .bottom-nav.is-authenticated {
    justify-content: space-around;
    gap: 0;
  }

  /* Hamburger Menu Overlay */
  .hamburger-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: flex-end;
  }

  .hamburger-overlay.show {
    display: flex;
  }

  .hamburger-menu {
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    max-height: 100vh;
    background: var(--surface);
    box-shadow: -4px 0 20px rgba(15, 23, 42, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
    animation: slideInRight 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  /* Fix mobile browser address-bar viewport issues */
  @supports (height: 100dvh) {
    .hamburger-menu {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  /* Older iOS Safari fallback */
  @supports (-webkit-touch-callout: none) {
    .hamburger-menu {
      height: -webkit-fill-available;
      max-height: -webkit-fill-available;
    }
  }

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  .hamburger-user-section {
    /* Rendered as a button in nav.html; reset button chrome */
    appearance: none;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;

    padding: 12px 12px;
    margin: 6px;
    border-radius: 10px;

    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hamburger-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .hamburger-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hamburger-user-info {
    flex: 1;
    min-width: 0;
  }

  .hamburger-user-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hamburger-user-handle {
    font-size: 12px;
    color: var(--muted);
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hamburger-user-section:hover {
    background: #F8FAFC;
    color: var(--brand-dark);
  }

  .hamburger-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
  }

  .hamburger-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
  }

  .hamburger-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .hamburger-close:hover {
    background: #F8FAFC;
  }

  .hamburger-body {
    flex: 1;
    padding: 6px;
  }

  .hamburger-item {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }

  .hamburger-item:hover {
    background: #F8FAFC;
    color: var(--brand-dark);
  }

  .hamburger-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .hamburger-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
  }

  .hamburger-item-danger:hover {
    background: #FEF2F2;
    color: #DC2626;
  }

  /* Guest vs auth menu visibility */
  .hamburger-overlay.is-guest .hamburger-auth-only {
    display: none !important;
  }

  .hamburger-overlay.is-auth .hamburger-guest-only {
    display: none !important;
  }

  /* Make footer page links behave like the rest of the menu items */
  a.hamburger-item.hamburger-link {
    text-decoration: none;
  }

}

.policy-hub {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.policy-hub-section h2 {
  margin: 0 0 12px;
}

.policy-hub-links {
  display: grid;
  gap: 10px;
}

.policy-hub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  color: var(--text-main);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
}

.policy-hub-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.about-page {
  color: var(--text-main);
}

.about-hero {
  padding: 32px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.about-kicker {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-hero h1 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.08;
}

.about-lead {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.about-section {
  margin-top: 42px;
}

.about-section h2 {
  margin-bottom: 12px;
}

.about-section p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.about-card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.about-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.about-card p {
  margin: 0;
  font-size: 14px;
}

.about-statement {
  margin-top: 42px;
  padding: 28px;
  text-align: center;
  background: var(--brand-dark, #0F172A);
  border-radius: 20px;
}

.about-statement p {
  max-width: 620px;
  margin: 0 auto;
  color: white;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 750;
  line-height: 1.4;
}

.about-name-story {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-top: 42px;
  padding: 28px;
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.about-name-logo {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.about-name-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-name-logo span {
  color: var(--primary);
  font-size: 64px;
  font-weight: 850;
}

.about-name-copy h2 {
  margin: 0 0 12px;
  font-size: 28px;
}

.about-name-copy p:not(.about-kicker) {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.65;
}

.about-name-copy strong {
  color: var(--text-main);
}

/* Mobile apps landing page */
.apps-page {
  position: relative;
  isolation: isolate;
  color: var(--text-main);
  --apps-network-cyan: #0ba8d2;
  --apps-network-blue: #077da0;
  /* Prime brand gradient: owner-picked electric cyan, bright end softened
     slightly to avoid glare on white. */
  --brand-gradient: linear-gradient(115deg, #0ac3e0 0%, #15bbed 50%, #0ba8d2 100%);
  --apps-action-post: #179fc5;
  --apps-action-find: #3976b9;
  --apps-action-talk: #187f91;
}

/*
 * Quiet ambient field for the apps landing page. The artwork deliberately
 * lives outside the card and stays low-contrast: it frames the product instead
 * of competing with it, while remaining CSS-only and effectively weightless.
 */
.apps-page::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  pointer-events: none;
}

.apps-page::before {
  z-index: -2;
  top: -72px;
  height: 760px;
  opacity: 0.9;
  transform: translate3d(-50%, 0, 0);
  background:
    radial-gradient(ellipse 38% 42% at 13% 35%, rgba(11, 168, 210, 0.09), rgba(11, 168, 210, 0.028) 46%, transparent 72%),
    radial-gradient(ellipse 36% 40% at 88% 42%, rgba(11, 168, 210, 0.085), rgba(11, 168, 210, 0.025) 48%, transparent 74%);
  animation: apps-ambient-drift 22s ease-in-out infinite alternate;
}

@keyframes apps-ambient-drift {
  from {
    transform: translate3d(-50%, -4px, 0) scale(1);
  }

  to {
    transform: translate3d(-50%, 8px, 0) scale(1.025);
  }
}

.apps-network-canvas {
  position: absolute;
  z-index: -1;
  top: -28px;
  left: 50%;
  width: min(1440px, 100vw);
  height: 650px;
  overflow: visible;
  transform: translateX(-50%);
  color: var(--apps-network-cyan);
  pointer-events: none;
}

.apps-network-lines path,
.apps-network-pulses path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.apps-network-lines path {
  stroke-width: 1.1;
  opacity: 0.3;
}

.apps-network-pulses path {
  stroke-width: 2.25;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 1;
  animation: apps-network-flow 8s linear infinite;
}

.apps-network-pulses path:nth-child(even) {
  animation-delay: -4.5s;
}

.apps-network-pulses path:nth-child(3n) {
  color: var(--apps-network-blue);
  animation-delay: -6.75s;
}

.apps-person-node > circle:first-child {
  fill: rgba(255, 255, 255, 0.72);
  stroke: currentColor;
  stroke-width: 1;
}

.apps-person-head {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.apps-person-node > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
}

.apps-person-node {
  opacity: 0.45;
  animation: apps-node-breathe 7s ease-in-out infinite alternate;
}

.apps-person-node--small {
  opacity: 0.36;
}

.apps-person-node:nth-of-type(even) {
  animation-delay: -3.5s;
}

.apps-connection-hub {
  fill: none;
  stroke: #10b981;
  stroke-width: 1.9;
  stroke-linecap: round;
  opacity: 0.78;
  animation: apps-hub-glow 3.6s ease-in-out infinite;
}

.apps-hub-plus {
  stroke-width: 2.4;
}

.apps-connection-hub:last-of-type {
  animation-delay: -1.8s;
}

@keyframes apps-hub-glow {
  0%, 100% {
    opacity: 0.38;
  }

  50% {
    opacity: 0.95;
  }
}

.apps-network-mobile {
  display: none;
}

@keyframes apps-network-flow {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes apps-node-breathe {
  from {
    opacity: 0.34;
  }

  to {
    opacity: 0.56;
  }
}

@keyframes apps-mobile-flow {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.apps-title-action {
  display: inline-block;
  color: var(--brand-dark);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Keep the supporting actions dark and reserve the brand gradient for
   "Find it." so the product's discovery promise carries the emphasis. */
.apps-title-action--post {
  color: var(--brand-dark);
  background-image: none;
}

.apps-title-action--find {
  color: var(--apps-network-cyan);
  background-image: var(--brand-gradient);
}

.apps-title-action--talk {
  color: var(--brand-dark);
  background-image: none;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .apps-title-action--find {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* One-time hero entrance: copy rises in with a gentle stagger. */
@media (prefers-reduced-motion: no-preference) {
  .apps-copy > * {
    animation: apps-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .apps-copy > .apps-eyebrow { animation-delay: 0.05s; }
  .apps-copy > h1 { animation-delay: 0.12s; }
  .apps-copy > .apps-lead { animation-delay: 0.22s; }
  .apps-copy > .apps-launch-note { animation-delay: 0.3s; }
  .apps-copy > .apps-downloads { animation-delay: 0.38s; }
  .apps-copy > .apps-note { animation-delay: 0.46s; }

  .apps-hero h1 .apps-title-action {
    animation: apps-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .apps-hero h1 .apps-title-action--post { animation-delay: 0.12s; }
  .apps-hero h1 .apps-title-action--find { animation-delay: 0.24s; }
  .apps-hero h1 .apps-title-action--talk { animation-delay: 0.36s; }
}

@keyframes apps-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.apps-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  align-items: center;
  gap: 36px;
  padding: 34px;
  overflow: hidden;
  background: linear-gradient(145deg, #eff6ff 0%, #ffffff 58%, #ecfdf5 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.apps-copy,
.apps-device {
  position: relative;
  z-index: 1;
}

.apps-eyebrow,
.apps-number {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.apps-eyebrow {
  margin: 0 0 12px;
}

.apps-hero h1 {
  max-width: 500px;
  margin: 0;
  font-size: 42px;
  line-height: 1.08;
}

.apps-lead {
  max-width: 510px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.apps-downloads {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
  margin-top: 12px;
}

.apps-download-button {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 174px;
  gap: 10px;
  padding: 9px 18px 10px;
  color: #ffffff;
  text-align: left;
  cursor: default;
  opacity: 1;
  overflow: hidden;
  background: linear-gradient(165deg, #1e293b 0%, #0b1120 55%, #111827 100%);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(15, 23, 42, 0.22);
}

/* Slow light sweep so the "coming soon" badges feel alive, not broken. */
.apps-download-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: skewX(-18deg);
  animation: apps-badge-shine 5.5s ease-in-out infinite;
  pointer-events: none;
}

.apps-download-ios::after {
  animation-delay: 1.4s;
}

@keyframes apps-badge-shine {
  0%, 68% {
    left: -70%;
  }

  100% {
    left: 135%;
  }
}

.apps-download-button strong {
  display: block;
  font-size: 19px;
  line-height: 1.08;
}

.apps-download-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.apps-download-copy {
  display: grid;
  gap: 2px;
}

.apps-download-overline {
  color: rgba(226, 232, 240, 0.78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.apps-launch-note {
  margin: 22px 0 0;
  color: #1f9fc6;
  font-size: 15px;
  line-height: 1.5;
}

.apps-launch-note strong {
  color: #0f172a;
  font-weight: 800;
}

.apps-launch-note span {
  color: #1f9fc6;
  font-weight: 700;
}

.apps-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.apps-device {
  position: relative;
  width: 232px;
  height: 470px;
  padding: 8px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 60%, #1e293b 100%);
  border-radius: 38px;
  box-shadow:
    inset 0 0 0 2px rgba(148, 163, 184, 0.35),
    0 30px 55px rgba(15, 23, 42, 0.28),
    0 10px 18px rgba(15, 23, 42, 0.18),
    0 0 90px rgba(11, 168, 210, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .apps-device {
    animation: apps-device-float 6s ease-in-out infinite alternate;
  }
}

@keyframes apps-device-float {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-9px);
  }
}

/* Side buttons */
.apps-device::before,
.apps-device::after {
  content: "";
  position: absolute;
  right: -2.5px;
  width: 2.5px;
  background: #334155;
  border-radius: 0 2px 2px 0;
}

.apps-device::before {
  top: 96px;
  height: 54px;
}

.apps-device::after {
  top: 164px;
  height: 32px;
}

.apps-device-screen {
  height: 100%;
  overflow: hidden;
  background: #f8fafc;
  border-radius: 30px;
}

.apps-device-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.apps-purpose {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.apps-purpose > div {
  position: relative;
  padding: 26px 24px 28px;
  background: var(--surface);
  transition: background 0.15s ease;
}

.apps-purpose > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #3bc5e8, #0ba8d2 55%, #077da0);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.apps-purpose > div:hover {
  background: #f8fafc;
}

.apps-purpose > div:hover::before {
  opacity: 1;
}

.apps-purpose > div + div {
  border-left: 1px solid var(--border);
}

.apps-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apps-feature-icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  color: #1c7ca8;
  background: rgba(67, 175, 222, 0.12);
  border: 1px solid rgba(67, 175, 222, 0.35);
  border-radius: 10px;
}

.apps-purpose h2 {
  margin: 16px 0 6px;
  font-size: 20px;
}

.apps-purpose p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ============ About page (shares the apps design language) ============ */
.about2-hero {
  grid-template-columns: 1fr;
  padding: 44px 38px;
}

.about2-title {
  max-width: 560px;
  margin: 0;
  font-size: clamp(34px, 5.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}

.about2-title-grad {
  display: inline-block;
  background-image: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .about2-title-grad {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.about2-story {
  max-width: 640px;
  margin-top: 44px;
}

.about2-story h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.about2-story p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.about2-story p:last-child {
  color: var(--text-main);
  font-weight: 600;
}

.about2 .apps-purpose {
  margin-top: 44px;
}

.about2-reach {
  position: relative;
  margin-top: 44px;
  padding: 42px 38px;
  overflow: hidden;
  background:
    radial-gradient(620px 240px at 10% -10%, rgba(10, 195, 224, 0.14), transparent 65%),
    radial-gradient(520px 220px at 96% 115%, rgba(16, 185, 129, 0.1), transparent 70%),
    linear-gradient(145deg, #f0fbfe 0%, #ffffff 55%, #ecfdf5 100%);
  border: 1px solid rgba(11, 168, 210, 0.28);
  border-radius: 8px;
}

.about2-reach p.about2-reach-kicker {
  margin: 0 0 10px;
  color: #059669;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about2-reach h2 {
  max-width: 600px;
  margin: 0 0 12px;
  color: var(--brand-dark, #0f172a);
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.2;
}

.about2-reach p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.about2-reach-em {
  font-weight: 700;
  background-image: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .about2-reach-em {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.about2 .about-name-story {
  margin-top: 44px;
}

.about2-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.about2-platform-card {
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.about2-platform-card:hover {
  border-color: rgba(11, 168, 210, 0.45);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.about2-platform-card h2 {
  margin: 14px 0 6px;
  font-size: 19px;
}

.about2-platform-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.about2-platform-link {
  color: #077da0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.about2-platform-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .about-hero {
    padding: 24px;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-name-story {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .about-name-logo {
    width: 112px;
    height: 112px;
    border-radius: 22px;
  }

  .apps-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 25px;
  }

  .apps-hero h1 {
    font-size: 34px;
  }

  .apps-downloads {
    grid-template-columns: repeat(2, max-content);
  }

  .apps-page::before {
    top: -48px;
    height: 920px;
    opacity: 0.65;
  }

  .apps-network-canvas {
    display: none;
  }

  .apps-download-button {
    min-width: 0;
    gap: 8px;
    padding: 8px 12px 9px;
  }

  .apps-download-button strong {
    font-size: 17px;
  }

  .apps-download-mark {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .apps-device {
    width: 208px;
    height: 421px;
    margin: 4px auto 0;
    justify-self: center;
  }

  .apps-purpose {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .apps-purpose > div {
    padding: 20px;
  }

  .apps-purpose > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .about2-hero {
    padding: 26px 22px;
  }

  .about2-story,
  .about2 .apps-purpose,
  .about2-reach,
  .about2 .about-name-story,
  .about2-platforms {
    margin-top: 28px;
  }

  .about2-reach {
    padding: 28px 22px;
  }

  .about2-platforms {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apps-page::before,
  .apps-network-pulses path,
  .apps-person-node,
  .apps-mobile-pulses path,
  .apps-download-button::after,
  .apps-connection-hub,
  .apps-mobile-handshake {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .apps-page::before {
    animation: none;
  }

  .apps-network-canvas {
    display: none;
  }

  .apps-network-mobile {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--apps-network-cyan);
    opacity: 0.28;
    pointer-events: none;
  }

  .apps-mobile-lines path,
  .apps-mobile-pulses path,
  .apps-mobile-person path,
  .apps-mobile-handshake path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .apps-mobile-lines path {
    opacity: 0.7;
  }

  .apps-mobile-pulses path {
    stroke-width: 1.6;
    stroke-dasharray: 0.08 0.92;
    stroke-dashoffset: 1;
    animation: apps-mobile-flow 14s linear infinite;
  }

  .apps-mobile-pulses path:nth-child(2) {
    color: var(--apps-network-blue);
    animation-delay: -7s;
  }

  .apps-mobile-person circle:first-child {
    fill: rgba(255, 255, 255, 0.72);
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .apps-mobile-person circle:not(:first-child),
  .apps-mobile-handshake circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .apps-mobile-handshake {
    stroke: #10b981;
    color: #10b981;
    opacity: 0.85;
    animation: apps-hub-glow-soft 4.2s ease-in-out infinite;
  }

  .apps-mobile-handshake .apps-hub-plus {
    stroke-width: 1.9;
  }

  .apps-mobile-handshake:last-of-type {
    animation-delay: -2.1s;
  }

  @keyframes apps-hub-glow-soft {
    0%, 100% {
      opacity: 0.45;
    }

    50% {
      opacity: 0.85;
    }
  }
}

@media (max-width: 360px) {
  .apps-downloads {
    grid-template-columns: max-content;
  }
}

/* Hide mobile elements on desktop */
@media (min-width: 721px) {

  .bottom-nav,
  .mobile-hamburger,
  .mobile-menu-btn,
  .hamburger-wa-container,
  .hamburger-overlay {
    display: none !important;
  }
}


/* ===================================
   HAMBURGER WHATSAPP WIDGET (Compact)
   =================================== */
.hamburger-wa-container {
  padding: 12px 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hamburger-wa-container .whatsapp-widget {
  padding: 10px 12px;
  margin-bottom: 0;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hamburger-wa-container .whatsapp-widget-icon {
  width: 38px;
  height: 38px;
}

.hamburger-wa-container .whatsapp-widget-icon svg {
  width: 26px;
  height: 26px;
}

.hamburger-wa-container .whatsapp-widget-title {
  font-size: 13px;
  margin-bottom: 0;
}

.hamburger-wa-container .whatsapp-widget-subtitle {
  font-size: 11px;
}

.hamburger-wa-container .whatsapp-widget-arrow svg {
  width: 14px;
  height: 14px;
}

.hamburger-menu .whatsapp-widget-content,
.hamburger-menu .social-card-widget,
.hamburger-menu .social-links-block,
.hamburger-menu .footer-links {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===================================
   WHATSAPP WIDGET (Right Sidebar)
   =================================== */
.whatsapp-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FBFCFE;
  border: 1px solid #E8EDF3;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.whatsapp-widget:hover {
  border-color: #25D366;
  background: #F0FDF4;
  /* Very subtle green tint on hover */
}


.whatsapp-widget-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-widget-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.whatsapp-widget-content {
  flex: 1;
}

.whatsapp-widget-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
  color: var(--text);
}

.whatsapp-widget-subtitle {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.whatsapp-widget-arrow {
  color: var(--muted);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.whatsapp-widget:hover .whatsapp-widget-arrow {
  transform: translateX(3px);
  color: #25D366;
  opacity: 1;
}

.left-browse-widget {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E5EAF0;
  padding: 14px;
  margin-bottom: 16px;
}

.left-browse-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  margin: 4px 12px 8px 12px;
}

.left-browse-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.left-browse-link {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.left-browse-link:hover {
  background: #F1F5F9;
  color: var(--primary);
}

.left-browse-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

/* ===================================
   DESKTOP LEFT NAV RAIL (Home view only)
   Desktop web only — the .left-sidebar is hidden < 1100px, so mobile web and
   the mobile apps keep their own navigation untouched.
   =================================== */
.left-nav-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

/* Search keeps its left filters instead of the nav rail. */
body.view-search .left-nav-rail {
  display: none;
}

/* The rail is the desktop navigation on every view, so the old admin Browse/Jobs
   box is retired everywhere (the whole .left-sidebar is hidden < 1100px, so this
   stays desktop web only). */
.left-browse-widget {
  display: none;
}

.left-nav-item,
.left-nav-create,
.left-nav-login {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.left-nav-item svg,
.left-nav-create svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.left-nav-item:hover {
  background: #F1F5F9;
  color: var(--primary);
}

/* Active destination — highlighted in brand cyan */
body.view-home .left-nav-item[data-route="home"],
body.view-search .left-nav-item[data-route="search"],
body.view-inbox .left-nav-item[data-route="inbox"],
body.view-dashboard .left-nav-item[data-route="dashboard"],
body.view-profile .left-nav-item[data-route="profile"],
body.view-settings .left-nav-item[data-route="settings"] {
  background: #E6F6FB;
  color: #0B6F8C;
}

.left-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.left-nav-badge[data-hidden="true"] {
  display: none;
}

.left-nav-divider {
  height: 1px;
  background: #E5EAF0;
  margin: 8px 12px;
}

.left-nav-create {
  justify-content: center;
  margin-top: 12px;
  background: var(--primary);
  color: #fff;
}

.left-nav-create:hover {
  filter: brightness(0.96);
}

.left-nav-login {
  justify-content: center;
  margin-top: 8px;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.left-nav-login:hover {
  background: #E6F6FB;
}

/* Auth-gated visibility — mirrors the topbar. Guest sees Home/Explore + Log In;
   authenticated sees the full rail. is-auth is set server-side for first paint
   and kept in sync by updateProfileUI() on SPA login/logout. */
.left-nav-auth-only {
  display: none;
}

.left-nav-rail.is-auth .left-nav-auth-only {
  display: flex;
}

.left-nav-rail.is-auth .left-nav-guest-only {
  display: none;
}

/* ===================================
   SOCIAL LINKS CARD WIDGET
   =================================== */
.social-card-widget {
  background: #FBFCFE;
  border-radius: 16px;
  border: 1px solid #E8EDF3;
  padding: 16px;
  margin-bottom: 16px;
}

.social-card-widget h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px 0;
  line-height: 1.3;
}

.social-icons-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.social-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  transition: opacity 0.15s ease;
}

.social-icon-btn--facebook {
  background: #1877F2;
}

.social-icon-btn--linkedin {
  background: #0A66C2;
}

.social-icon-btn--whatsapp {
  background: #25D366;
}

.social-icon-btn--x {
  background: #000000;
}

/* ===================================
   MOBILE BROWSE CATEGORIES (Hamburger)
   =================================== */
.mobile-browse-section {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.mobile-browse-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  padding: 8px 20px;
}

.mobile-browse-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s ease;
}

.mobile-browse-link:hover {
  background: var(--bg);
}
html {
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}