/* Belle Index — Global Stylesheet
   Soft powder blue + warm cream + pastel yellow. Unisex, airy, premium. */

/* ── DESIGN TOKENS ── */
:root {
  /* ── Identity (2026-09-21): the "Nearby Needs" homepage look, site-wide.
     White and cool-sky surfaces, deep navy ink and panels, one clear blue
     for links and accents, and navy "glass" primary buttons. It replaces
     the ivory/charcoal/gold identity of 2026-08-24. The homepage (index.php)
     defines the same values in its own head; keep the two in step. ── */

  /* Navy — primary buttons, dark panels, headings */
  --ink:        #07152B;
  --ink-soft:   #0D2B55;   /* the lighter end of a navy panel */
  --ink-hi:     #1B3F74;   /* the top of the glass gradient */

  /* Interactive text and selected states. The --blue names have always
     been the accent slot; every existing rule follows along. */
  --blue:       #0F6AD0;   /* links, active nav — readable on white */
  --blue-dark:  #0B56AB;   /* hover */
  --blue-light: #1683F7;   /* the bright accent: tags, dots, focus */
  --blue-soft:  #BFDDFE;   /* light blue line */
  --blue-pale:  #EAF5FF;   /* tint background (sky) */
  --blue-100:   #DCEEFF;   /* sky 2 */

  /* The old gold slots now carry the same blue family, so the few rules
     still asking for "gold" or "orange" land on-brand. */
  --yellow:      #1683F7;
  --yellow-deep: #0F6AD0;
  --yellow-pale: #EAF5FF;
  --gold:        #1683F7;
  --gold-deep:   #0F6AD0;
  --orange:      #1683F7;
  --orange-dark: #0F6AD0;

  /* Neutrals — cool white + navy */
  --cream:      #F8FBFF;
  --bg:         #F8FBFF;
  --white:      #ffffff;
  --border:     #E4ECF5;   /* cool hairline */
  --border-soft:#EEF3F9;
  --navy:       #07152B;   /* headings */
  --text:       #1C2B44;
  --muted:      #617087;
  --border-blue: rgba(22,131,247,0.26);

  --shadow-sm:  0 1px 2px rgba(7,21,43,0.04);
  --shadow:     0 1px 2px rgba(7,21,43,0.04), 0 8px 24px rgba(7,21,43,0.06);
  --shadow-md:  0 12px 30px rgba(7,21,43,0.12);

  /* The glass button and the navy panel, as reusable values. */
  --glass:       linear-gradient(180deg, #1B3F74 0%, #0D2B55 55%, #07152B 100%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25), 0 6px 16px rgba(13,43,85,.22);
  --panel:       linear-gradient(180deg, #0D2B55, #07152B);
  --r-lg: 22px;
  --r-md: 14px;

  /* The nav container. The drawer anchors to these too, so it lines up with
     the burger instead of with the window edge. */
  --nav-max: 1280px;
  --nav-gutter: 24px;

  --serif: 'Cormorant Garamond', 'Georgia', serif;
  /* Wordmark only — matches the app's system serif. */
  --wordmark: ui-serif, Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
*  { box-sizing: border-box; }
a  { text-decoration: none; color: inherit; }

/* ── SERIF DISPLAY TYPE ── */
.serif { font-family: var(--serif); }
/* Cormorant's old-style figures make "1" read as "I" and "3" drop below the
   line. Lining figures wherever the serif is used for headings. */
.serif, .display, h1, h2, h3, .page-title, .section-h, .rq-h1, .rq-q { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.display {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.08;
}
.display em { font-style: italic; color: var(--blue); font-weight: 500; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f7ff; }
::-webkit-scrollbar-thumb { background: var(--blue-soft); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ── FORM FOCUS ── */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,143,199,0.18);
  border-color: var(--blue) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* ── LEAFLET MAP ── */
.map-container { height: 320px; width: 100%; border-radius: 14px; z-index: 0; }

/* ── LIGHTBOX ── */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 1000;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-overlay img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 10px; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; line-height: 1; }

/* ── VIDEO MODAL ── */
.video-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.video-modal-content { width: 90vw; max-width: 900px; aspect-ratio: 16/9; }
.video-modal-content iframe { width: 100%; height: 100%; border-radius: 10px; }

/* ── CARD ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-blue);
  transform: translateY(-2px);
}

/* ── CARD (dark variant for embed on dark sections) ── */
.card-dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
}
.card-dark:hover { border-color: rgba(255,255,255,0.22); }

/* ── SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, #dbeafe 25%, var(--blue-pale) 50%, #dbeafe 75%);
  background-size: 200% 100%;
  animation: skel 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── LINE CLAMP ── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: 14px; border-radius: 18px;
  padding: 11px 24px; cursor: pointer; border: none;
  text-decoration: none; transition: background .16s, transform .16s, box-shadow .16s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
/* The primary action is the homepage's navy glass button: a translucent
   navy core, an inner highlight, a restrained shadow. */
.btn-blue, .glass {
  background: var(--glass); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--glass-shadow);
}
.btn-blue:hover, .glass:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 22px rgba(13,43,85,.28); }
.glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; padding: 11px 20px; font-weight: 600; font-size: 13.5px;
  cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s;
}
.glass:hover { transform: translateY(-1px); }
/* The bright accent button: the one clear blue. */
.btn-orange { background: var(--blue-light); color: #fff; box-shadow: 0 6px 16px rgba(22,131,247,.22); }
.btn-orange:hover { background: var(--blue); box-shadow: 0 8px 20px rgba(22,131,247,.3); }
/* The light glass: for use on a navy panel. */
.glass.light, .btn-glass-light {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(234,245,255,.9)); color: var(--ink-soft);
  border: 1px solid var(--border); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(7,21,43,.08);
}
.btn-outline-blue {
  background: #fff; color: var(--ink-soft);
  border: 1px solid var(--border); border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: 14px; padding: 10px 22px; cursor: pointer;
  text-decoration: none; transition: background .16s, transform .16s, border-color .16s;
}
.btn-outline-blue:hover { background: var(--blue-pale); border-color: var(--blue); transform: translateY(-1px); }
.btn-white {
  background: #fff; color: var(--blue); border: none;
}
.btn-white:hover { background: var(--blue-pale); }

/* ── STATUS BADGES ── */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; letter-spacing: .01em; }
.badge-open    { background: #e4f2e6; color: #4a7c53; }
.badge-closed  { background: #f2f0ec; color: #82807b; }
.badge-later   { background: var(--yellow-pale); color: #a8842a; }
.badge-pending { background: var(--blue-pale); color: var(--gold-deep); }
.badge-success { background: #e4f2e6; color: #4a7c53; }
.badge-error   { background: #fbeaea; color: #b4534f; }

/* ── FLASH MESSAGES ── */
.flash-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; border-radius: 10px; padding: 12px 16px; }
.flash-error   { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; border-radius: 10px; padding: 12px 16px; }

/* ── SECTION HELPERS ── */
.section-light { background: var(--white); }
.section-blue  { background: var(--blue-pale); }
.section-cream { background: var(--cream); }
.section-navy  { background: var(--navy); color: #ececec; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.section-h {
  font-family: var(--serif); font-size: clamp(24px,3.5vw,38px); font-weight: 600;
  color: var(--navy); letter-spacing: -.015em; line-height: 1.14;
}
.section-sub { font-size: 15px; color: var(--muted); margin-top: 9px; line-height: 1.68; }
.divider { height: 1px; background: var(--border); }

/* ── INPUT STYLE ── */
.input {
  width: 100%; background: var(--white); border: 1px solid var(--border);
  color: var(--text); border-radius: 12px; padding: 11px 15px; font-size: 14px;
  font-family: var(--sans);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #a5a5a5; }

/* ── PAGINATION ── */
.pagination-active { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }

/* ── CARD HOVER ── */
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ══════════════════════════════════════════
   MARKETPLACE COMPONENTS
   ══════════════════════════════════════════ */

/* ── HERO SEARCH BAR ── */
.search-bar {
  display: flex; align-items: stretch;
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 7px;
  box-shadow: 0 6px 26px rgba(44,44,44,.07);
  gap: 4px;
}
.search-field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; flex: 1; min-width: 0;
}
.search-field + .search-field { border-left: 1px solid var(--border); }
.search-field svg { color: var(--muted); flex-shrink: 0; }
.search-field input {
  border: none; outline: none; background: transparent;
  font-size: 14.5px; color: var(--text); width: 100%; padding: 13px 0;
  font-family: var(--sans);
}
.search-field input::placeholder { color: #a5a5a5; }
.search-submit {
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  font-weight: 600; font-size: 14.5px; padding: 13px 28px;
  border-radius: 13px; white-space: nowrap; flex-shrink: 0;
  transition: background .16s, box-shadow .16s;
  font-family: var(--sans);
}
.search-submit:hover { background: var(--blue-dark); box-shadow: 0 4px 14px rgba(91,143,199,.3); }
@media (max-width: 720px) {
  .search-bar { flex-direction: column; border-radius: 16px; }
  .search-field + .search-field { border-left: none; border-top: 1px solid var(--border); }
  .search-submit { width: 100%; }
}

/* ── PILL CHIPS (popular searches) ── */
.chip {
  display: inline-flex; align-items: center;
  background: var(--blue-pale); color: #4a6b8a;
  border: 1px solid transparent;
  font-size: 12.5px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.chip:hover { background: var(--blue-100); color: var(--blue); border-color: var(--blue-soft); }

/* ── TRUST INDICATORS ── */
.trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  padding: 0 18px;
}
.trust-item:first-child { padding-left: 0; }
.trust-item + .trust-item { border-left: 1px solid var(--border); }
.trust-item svg { flex-shrink: 0; }

/* ── CATEGORY CARD ── */
.cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 12px 20px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  text-align: center;
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(44,44,44,.09);
  border-color: var(--blue-soft);
}
.cat-card-icon {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
}
.cat-card-label { font-size: 13.5px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }

/* ── ARTIST CARD ── */
.artist-card {
  display: block; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.artist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(44,44,44,.11);
  border-color: var(--blue-soft);
}
.artist-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--blue-pale); }
.artist-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.artist-card:hover .artist-card-media img { transform: scale(1.04); }
.artist-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b6b6b; transition: color .15s, background .15s, transform .15s;
}
.artist-fav:hover { color: #e5647d; transform: scale(1.08); background: #fff; }
.artist-fav.is-fav { color: #e5647d; }
.artist-rating {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 4px 10px;
  font-size: 12px; font-weight: 700; color: var(--navy);
}
.artist-card-body { padding: 13px 15px 15px; }
.artist-card-name { font-size: 14.5px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.artist-card-spec { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.artist-card-loc { font-size: 12px; color: #9a9a9a; margin-top: 6px; display: flex; align-items: center; gap: 4px; }

/* ── FLOATING GLASS CARD (hero) ── */
.float-card {
  background: #fff; border-radius: 18px;
  box-shadow: 0 16px 44px rgba(44,44,44,.14);
  padding: 20px 22px;
}
.avatar-stack { display: flex; align-items: center; }
.avatar-stack img, .avatar-stack span {
  width: 34px; height: 34px; border-radius: 999px;
  border: 2.5px solid #fff; object-fit: cover; display: block;
}
.avatar-stack > * + * { margin-left: -10px; }

/* ── SECTION HEADER ROW ── */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.sec-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(23px, 3vw, 31px); color: var(--navy); letter-spacing: -.015em;
}
.sec-link {
  font-size: 13.5px; font-weight: 600; color: var(--blue);
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap .15s;
}
.sec-link:hover { gap: 9px; }

/* ── AD BANNER ──
   The wide strip above the footer, rebuilt to the reference banner in
   belleindex_sliced_assets.zip (09_cnd_banner.png): 107px tall, artwork flush
   to the left edge, one line per copy field, a black gold-edged pill at the
   right, and a small "Ad" mark in the corner.

   Height is fixed on purpose. This slot appears on every page and sits between
   the content and the footer, so a banner that grows with its copy pushes the
   footer around from page to page. `.adx-l` is therefore clamped to one line
   and the artwork is a fixed 268px column. */
.adx {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  min-height: 96px;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; text-decoration: none;
  box-shadow: 0 8px 30px rgba(20,18,12,.06);
  transition: border-color .18s, box-shadow .18s;
}
.adx:hover { border-color: #ded4bf; box-shadow: 0 12px 34px rgba(20,18,12,.1); }

.adx-art { flex: 0 0 268px; position: relative; overflow: hidden; background: linear-gradient(150deg, #efe7d8, #fbf6ec); }
.adx-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nothing drawn over a blank ground: the advertiser's name is already the
   first line of the copy beside it. */
.adx-art.is-blank { background: linear-gradient(150deg, #efe7d8, #fbf6ec); }

.adx-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 16px 26px;
}
.adx-t {
  font-size: 16px; font-weight: 650; color: var(--navy); letter-spacing: -.012em;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.adx-l {
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.adx-go {
  flex: 0 0 auto; align-self: center; margin: 0 26px 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 999px;
  background: linear-gradient(180deg, #1d1e21, #0b0c0d);
  border: 1px solid rgba(201,162,74,.85); color: #7CC2FF;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: border-color .18s, box-shadow .18s;
}
.adx-go i { font-style: normal; display: inline-block; transition: transform .18s; }
.adx:hover .adx-go { border-color: #7CC2FF; box-shadow: 0 10px 24px -12px rgba(17,17,15,.7); }
.adx:hover .adx-go i { transform: translateX(4px); }

.adx-mark {
  position: absolute; top: 8px; right: 12px; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #b3ada3;
}

@media (max-width: 860px) {
  .adx-art { flex-basis: 180px; }
  .adx-body { padding: 14px 18px; }
  .adx-go { margin: 0 18px 0 12px; padding: 11px 18px; font-size: 13.5px; }
}
@media (max-width: 620px) {
  .adx { flex-wrap: wrap; }
  .adx-art { flex: 0 0 100%; height: 120px; }
  .adx-body { flex-basis: 100%; padding: 14px 18px 4px; }
  .adx-go { width: calc(100% - 36px); justify-content: center; margin: 0 18px 16px; }
  .adx-l { -webkit-line-clamp: 2; }
}

/* ══ SHARED NAV SYSTEM ══
   The homepage's top bar (index.php .top), shared by every other page: a
   frosted white bar, the serif wordmark with its tagline, underlined active
   links, and the navy glass "+ Post a Need" button always in reach. */
.site-nav {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.site-nav-fixed { position: fixed; top: 0; inset-x: 0; }
.site-nav-inner {
  max-width: var(--nav-max); margin: 0 auto; padding: 0 var(--nav-gutter);
  height: 68px; display: flex; align-items: center; gap: 0;
}

/* The wordmark: "Belle" in ink, "Index" in navy, Cormorant bold, with the
   small spaced tagline underneath — exactly as on the homepage. */
.site-logo {
  display: flex; flex-direction: column; text-decoration: none;
  flex-shrink: 0; margin-right: 34px; line-height: 1;
}
.site-logo-text {
  font-family: var(--serif); font-size: 31px; font-weight: 700;
  color: var(--ink); letter-spacing: -.5px;
  font-variant-numeric: lining-nums;
}
.site-logo-text em { font-style: normal; color: var(--ink-soft); }
.site-logo-spark { display: none; }
.site-logo-tag {
  font-size: 8.5px; letter-spacing: 3.2px; color: var(--muted);
  margin-top: 4px; font-weight: 600; font-family: var(--sans);
}

/* Nav links */
.site-nav-links {
  display: flex; align-items: center; gap: 26px; flex: 1;
}
.snl {
  position: relative; font-size: 14px; font-weight: 500; color: var(--ink);
  padding: 6px 0; border-bottom: 2px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.snl:hover { border-bottom-color: var(--border); }
.snl.snl-active { font-weight: 600; border-bottom-color: var(--ink); }

/* Right-side actions */
.site-nav-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 20px;
}
.nav-divider { width: 1px; height: 20px; background: var(--border); margin: 0 8px; }

/* Language button */
.lang-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; padding: 6px 11px;
  transition: color .12s, background .12s, border-color .12s;
  text-transform: uppercase; letter-spacing: .04em;
}
.lang-toggle:hover { color: var(--ink); background: var(--blue-pale); }

/* Auth links */
.nav-login {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 8px 12px; border-radius: 999px; text-decoration: none;
  transition: color .12s, background .12s;
}
.nav-login:hover { background: var(--blue-pale); }

/* Sign Up — the light glass, so "+ Post a Need" stays the one dark button. */
.nav-signup {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(234,245,255,.9));
  color: var(--ink-soft); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(7,21,43,.08);
  font-size: 13.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 18px;
  text-decoration: none; white-space: nowrap;
  transition: transform .14s, box-shadow .14s;
}
.nav-signup:hover { transform: translateY(-1px); }

/* "+ Post a Need", on every page. */
.nav-post { margin-left: 8px; padding: 10px 18px; }
.nav-post .arw { font-size: 16px; line-height: 1; }
@media (max-width: 720px) {
  .nav-post { padding: 9px 13px; margin-left: 4px; }
  .nav-post .pt { display: none; }
  .nav-post::after { content: 'Post'; }
  .site-logo-tag { display: none; }
  .site-logo-text { font-size: 25px; }
}

/* ── ACCOUNT MENU ──
   Replaces a bare "Logout" link for a signed-in visitor: their own name, and
   one home for profile, edit and sign-out. */
.nav-user { position: relative; margin-left: 4px; }
.nav-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 9px 5px 5px; border: 1px solid transparent; border-radius: 999px;
  background: none; cursor: pointer; color: var(--navy);
  transition: background .14s, border-color .14s;
}
.nav-user-btn:hover, .nav-user-btn[aria-expanded="true"] {
  background: #F4F9FF; border-color: var(--border);
}
.nav-user-av {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-100); color: var(--ink-soft);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.nav-user-first { font-size: 14px; font-weight: 600; letter-spacing: -.01em; max-width: 110px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-chev { color: var(--muted); flex: 0 0 auto; transition: transform .16s; }
.nav-user-btn[aria-expanded="true"] .nav-user-chev { transform: rotate(180deg); }

.nav-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 130;
  min-width: 218px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(20,18,12,.36), 0 2px 6px rgba(20,18,12,.06);
  animation: navDrop .16s ease-out;
}
.nav-user-menu[hidden] { display: none; }
.nav-user-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft);
}
.nav-user-name { font-size: 14px; font-weight: 650; color: var(--navy); letter-spacing: -.01em; }
.nav-user-role { font-size: 11.5px; color: var(--muted); }
.nav-user-item {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: #1C2B44; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-user-item:hover { background: #F4F9FF; color: var(--navy); }
.nav-user-sep { height: 1px; background: var(--border-soft); margin: 5px 0; }
.nav-user-out { color: #a02020; }
.nav-user-out:hover { background: #fdf2f2; color: #8a1a1a; }
/* The bar gets cramped before it gets narrow enough to collapse; the name is
   the first thing to go, leaving the initials on their own. */
@media (max-width: 1180px) { .nav-user-first, .nav-user-chev { display: none; }
                             .nav-user-btn { padding: 5px; gap: 0; } }

/* Menu icon. Hidden from 1024 up, where the bar already carries every link and
   the account menu carries the one thing the drawer used to have on its own
   (Support). Below 1024 the whole text nav collapses into that drawer, so the
   button is the only way in and must stay. */
.nav-hamburger {
  display: flex; align-items: center; padding: 8px; margin-left: 4px;
  border-radius: 9px; background: none; border: none; cursor: pointer;
  color: #8a8580; transition: background .12s, color .12s;
}
.nav-hamburger:hover { background: var(--blue-pale); color: var(--blue); }
@media (max-width: 1023px) {
  /* Tablet and below: the bar keeps logo · bell · (Sign Up) · menu; every text
     link lives in the drawer, so nothing can overflow. */
  .site-nav-links { display: none; }
  .site-nav-actions .nav-login:not(.nav-bell), .site-nav-actions .nav-divider, #langSwitcher { display: none; }
  .site-nav-actions { margin-left: auto; }
  .site-logo { margin-right: auto; }
}
@media (max-width: 720px) {
  .site-nav-inner { padding: 0 14px; }
  .site-logo { margin-right: auto; }
  .site-nav-actions { margin-left: 8px; gap: 2px; }
  .site-nav-actions .nav-divider,
  .site-nav-actions .nav-login:not(.nav-bell) { display: none; }
  .nav-signup { padding: 7px 13px; font-size: 12.5px; }
}
@media (max-width: 400px) { .nav-signup { display: none; } }

/* Progressively shed right-side nav items so the bar never overflows */
@media (max-width: 900px) {
  #langSwitcher, .nav-divider { display: none; }
  .site-nav-actions { margin-left: auto; }
}
@media (max-width: 760px) { .nav-fav { display: none; } }
@media (max-width: 560px) {
  .nav-login-txt { display: none; }
  .nav-signup { padding: 8px 15px; font-size: 12.5px; }
  .site-nav-inner { padding: 0 16px; }
  .site-logo { margin-right: 12px; }
  .site-logo-text { font-size: 23px; }
}

/* Menu drawer: a full-width sheet under the bar on phones/tablets, a compact
   "More" dropdown under the burger on desktop (where the main links are already
   in the bar — the duplicates are hidden there). Anchored to .site-nav. */
.nav-mobile {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid #e8edf5; padding: 10px 16px 16px;
  box-shadow: 0 18px 40px -22px rgba(15,39,68,.35);
  max-height: calc(100vh - 64px); overflow-y: auto; z-index: 120;
}
.nav-mobile.open { display: block; animation: navDrop .16s ease-out; }
@keyframes navDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .nav-hamburger { display: none; }
  .nav-mobile {
    left: auto;
    /* Follow the nav container, not the window: past --nav-max the container is
       centred, and a window-anchored drawer drifts right by half the leftover. */
    right: max(var(--nav-gutter), calc((100% - var(--nav-max)) / 2 + var(--nav-gutter)));
    top: calc(100% - 8px); width: 300px; padding: 8px;
    border: 1px solid #e8edf5; border-radius: 14px; max-height: calc(100vh - 80px); }
  .nav-mobile .nav-desk-dup { display: none !important; }
}
.nav-mobile-link {
  display: block; font-size: 14px; font-weight: 500; color: #475569;
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  transition: color .12s, background .12s;
}
.nav-mobile-link:hover { color: var(--blue); background: var(--blue-pale); }
.nav-mobile-link.snl-active { color: var(--blue); font-weight: 600; background: var(--blue-pale); }
.nav-mobile-sep { height: 1px; background: #eee9e0; margin: 9px 0; }
.nav-mobile-langs a.on { color: var(--blue); border-color: var(--blue-soft); background: var(--blue-pale); }
.nav-mobile-langs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 2px; margin-top: 10px; border-top: 1px solid var(--border); }
.nav-mobile-langs a {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8593A8;
  border: 1px solid #eae4da; border-radius: 7px; padding: 5px 11px; text-decoration: none;
}
.nav-mobile-langs a:hover { color: var(--blue); border-color: var(--blue-soft); background: var(--blue-pale); }

/* Exactly one language picker at any width: the compact dropdown in the nav bar
   from 1024px up, the grid inside the drawer below it. Both overrides live HERE,
   after the base `.nav-mobile-langs { display: flex }` above — when specificity
   ties, source order decides, so the same rule placed earlier was being undone
   by the base one and the grid showed on desktop alongside the dropdown. */
@media (max-width: 1023.98px) { .site-nav-actions .lang-toggle { display: none; } }
@media (min-width: 1024px)    { .nav-mobile-langs { display: none; } }

/* ══════════════════════════════════════════
   AUTH PAGES  (login / register)
   Kept here rather than as utility classes so the two
   pages stay on the same cream-and-serif system as the
   marketing pages.
   ══════════════════════════════════════════ */
.auth-wrap   { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-col    { width: 100%; max-width: 440px; }
.auth-col-wide { max-width: 620px; }

.auth-head   { text-align: center; margin-bottom: 22px; }
.auth-mark   {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px;
  background: linear-gradient(150deg, var(--blue-soft), var(--blue-pale));
  border: 1px solid var(--border-blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--blue);
}
.auth-title  { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--navy); letter-spacing: -.015em; line-height: 1.12; }
.auth-sub    { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* Password field with a Show / Hide toggle — one field instead of two. */
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-label-link { font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; }
.auth-label-link:hover { text-decoration: underline; }
.auth-pw { position: relative; display: block; }
.auth-pw .input { padding-right: 64px; }
.auth-pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; padding: 6px 8px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--blue);
  border-radius: 8px;
}
.auth-pw-eye:hover { background: var(--blue-pale); }
.auth-pw-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.auth-card   { background: var(--white); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; }

/* Phones: the whole card should land inside one screen. */
@media (max-width: 560px) {
  .auth-wrap  { min-height: 0; padding: 22px 14px 34px; align-items: flex-start; }
  .auth-head  { margin-bottom: 16px; }
  .auth-title { font-size: 25px; }
  .auth-sub   { font-size: 13.5px; }
  .auth-card  { padding: 18px 16px; border-radius: 16px; }
  .auth-field { margin-bottom: 13px; }
  .auth-mark  { width: 44px; height: 44px; margin-bottom: 12px; font-size: 22px; border-radius: 13px; }
}
.auth-field  { margin-bottom: 15px; }
.auth-field:last-of-type { margin-bottom: 22px; }

/* "Keep me signed in" — the whole row is the label, so the text is a hit
   target too rather than asking for a 13px box to be clicked exactly. */
.auth-remember {
  display: flex; align-items: center; gap: 9px;
  margin: -6px 0 18px; cursor: pointer;
  font-size: 13.5px; color: var(--muted);
  user-select: none;
}
.auth-remember input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; margin: 0; flex: 0 0 auto; }
.auth-remember:hover span { color: var(--text); }
.auth-label  { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.auth-hint   { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }

.auth-foot   { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.auth-foot a { color: var(--blue); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }


/* Register-only extras: role picker, license panel, file input */
.auth-note   { background: var(--blue-pale); border: 1px solid var(--border-blue); border-radius: 14px; padding: 16px; }
.auth-note-h { font-size: 13px; font-weight: 700; color: var(--navy); }

.auth-choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .auth-choice-row { grid-template-columns: 1fr; } }
.auth-choice {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--white); font-size: 13px; font-weight: 600; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.auth-choice:hover { border-color: var(--blue-soft); }
.auth-choice:has(:checked) { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-dark); }

/* Provider registration: pick your kind first (two big cards), then the form. */
.auth-kind-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .auth-kind-row { grid-template-columns: 1fr; } }
.auth-kind {
  position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px;
  align-items: center; cursor: pointer; padding: 14px 16px 14px 14px; border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--white); transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-kind:hover { border-color: var(--blue-soft); }
.auth-kind:has(:checked) { border-color: var(--blue); background: var(--blue-pale); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.auth-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-kind-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue); }
.auth-kind:has(:checked) .auth-kind-ico { background: var(--blue); color: #fff; }
.auth-kind-t { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.auth-kind-s { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.auth-kind::after { content: ''; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; }
.auth-kind:has(:checked)::after { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
.auth-sec { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--navy); margin: 26px 0 14px; padding-top: 18px; border-top: 1px solid var(--border); }
.auth-sec span { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.auth-grid-3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .auth-grid-3 { grid-template-columns: 1fr; } }

.auth-file { width: 100%; font-size: 13px; color: var(--muted); }
.auth-file::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: none; border-radius: 10px;
  background: var(--blue-pale); color: var(--blue-dark);
  font-weight: 600; font-size: 12.5px; font-family: var(--sans); cursor: pointer;
}
.auth-file::file-selector-button:hover { background: var(--blue-100); }

.auth-link-sm { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--blue); font-weight: 600; text-decoration: none; }
.auth-link-sm:hover { text-decoration: underline; }
.req { color: #b4534f; }

/* ══════════════════════════════════════════
   SEARCH RESULTS
   ══════════════════════════════════════════ */
.results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.results-h    { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.results-all  { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; }
.results-all:hover { text-decoration: underline; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }

.result-card {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.result-card:hover { box-shadow: var(--shadow); border-color: var(--border-blue); transform: translateY(-2px); }
.result-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; line-height: 1.35; }
.result-meta  { font-size: 13px; color: var(--muted); }
.result-row   { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.result-price { font-size: 14px; font-weight: 700; color: var(--blue); }
.result-note  { font-size: 12.5px; color: var(--muted); }

.empty-state  { text-align: center; padding: 66px 16px; color: var(--muted); }
.empty-state svg { width: 54px; height: 54px; margin: 0 auto 14px; opacity: .38; display: block; }
.empty-state-h { font-family: var(--serif); font-size: 21px; color: var(--navy); }
.empty-state-p { font-size: 13.5px; margin-top: 7px; }

/* ══════════════════════════════════════════
   FOOTER — compact, on the cream + powder-blue system
   ══════════════════════════════════════════ */
/* The banner slot above it. Same 1180px column as the homepage panels, and no
   rule of its own -- the footer's own border-top is the only line there. */
.site-prefoot-ad { background: var(--bg); padding: 20px 0 0; }
.site-prefoot-in { max-width: var(--page-max, 1120px); margin: 0 auto; padding: 0 20px; }

/* The reference footer is 57px tall. Everything here is sized to land inside
   that, because it is the last of the five bands that have to add up to a
   single screen. */
.site-foot {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 17px 0 18px;
  margin-top: 20px;
}
.site-foot-inner {
  max-width: var(--page-max, 1120px); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 32px; flex-wrap: wrap;
}
.site-foot-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.site-foot-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.site-foot-mark {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--blue-light), var(--blue));
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.site-foot-name {
  font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink);
  letter-spacing: -.3px; line-height: 1;
}
.site-foot-name em { font-style: normal; color: var(--ink-soft); }
.site-foot-copy { font-size: 11.5px; color: var(--muted); margin: 0; }

.site-foot-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-foot-links a {
  font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .14s;
}
.site-foot-links a:hover { color: var(--blue); }
.site-foot-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; color: #4a453e; transition: color .14s, transform .14s;
}
.site-foot-soc svg { width: 18px; height: 18px; }
.site-foot-soc:hover { color: var(--blue-light); transform: translateY(-1px); }
/* The links row is set on a 22px gap; the three marks want to read as one
   group, so each one after the first pulls back to a 10px gap. */
.site-foot-links .site-foot-soc + .site-foot-soc { margin-left: -12px; }

@media (max-width: 640px) {
  .site-foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-foot-brand { flex-direction: column; align-items: flex-start; gap: 7px; }
  .site-foot-links { gap: 16px; }
}

/* ── LEGAL PAGES (terms / privacy) ── */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 52px 24px 64px; }
.legal-wrap .section-h { margin: 0 0 6px; }
.legal-updated { font-size: 12.5px; color: var(--muted); margin: 0 0 30px; }
.legal-lede { font-size: 15.5px; color: var(--text); line-height: 1.72; margin: 0 0 28px; }
.legal-wrap h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--navy);
  margin: 32px 0 10px; letter-spacing: -.01em;
}
.legal-wrap p { font-size: 14.5px; color: var(--text); line-height: 1.75; margin: 0 0 12px; }
.legal-wrap strong { color: var(--navy); font-weight: 600; }
.legal-wrap a { color: var(--blue); text-decoration: none; font-weight: 500; }
.legal-wrap a:hover { text-decoration: underline; }

/* ── PENDING VERIFICATION ── */
.pv-steps { list-style: none; margin: 0; padding: 0; }
.pv-steps li { display: flex; gap: 14px; padding: 0 0 22px; position: relative; }
.pv-steps li:last-child { padding-bottom: 4px; }
.pv-steps li::before {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px;
  width: 1px; background: var(--border);
}
.pv-steps li:last-child::before { display: none; }
.pv-num {
  width: 27px; height: 27px; border-radius: 999px; flex-shrink: 0; z-index: 1;
  background: var(--white); border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pv-done .pv-num { background: var(--blue-pale); border-color: var(--blue-soft); color: var(--blue-dark); }
.pv-now  .pv-num { background: var(--blue); border-color: var(--blue); color: #fff; }
.pv-steps strong { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.pv-steps p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.pv-note {
  background: var(--blue-pale); border: 1px solid var(--border-blue); border-radius: 12px;
  padding: 14px 16px; font-size: 13px; color: var(--text); line-height: 1.65; margin-top: 6px;
}
.pv-note strong { color: var(--navy); }

/* ══════════════════════════════════════════
   AUDIENCE PAGES  (for-artists / for-business)
   ══════════════════════════════════════════ */
.aud-hero { background: linear-gradient(165deg, var(--blue-pale), var(--cream)); border-bottom: 1px solid var(--border); }
.aud-hero-in { max-width: 940px; margin: 0 auto; padding: 66px 24px 60px; text-align: center; }
.aud-h1 {
  font-family: var(--serif); font-size: clamp(32px, 5vw, 50px); font-weight: 600;
  color: var(--navy); letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 0;
}
.aud-h1 em { font-style: italic; color: var(--blue); }
.aud-lede { font-size: 16.5px; color: var(--text); line-height: 1.72; max-width: 620px; margin: 16px auto 0; }
.aud-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.aud-fine { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

.aud-sec { max-width: 1040px; margin: 0 auto; padding: 58px 24px; }
.aud-sec-h { font-family: var(--serif); font-size: clamp(24px,3.2vw,34px); font-weight: 600; color: var(--navy); letter-spacing: -.015em; text-align: center; }
.aud-sec-sub { font-size: 15px; color: var(--muted); line-height: 1.7; text-align: center; max-width: 560px; margin: 10px auto 0; }

.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; margin-top: 34px; }
.aud-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); }
.aud-ico {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  background: var(--blue-pale); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.aud-card h3 { font-size: 15.5px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.aud-card p { font-size: 13.5px; color: var(--muted); line-height: 1.68; margin: 0; }

.aud-steps { counter-reset: s; display: grid; gap: 18px; margin-top: 34px; max-width: 660px; margin-left: auto; margin-right: auto; }
.aud-step { display: flex; gap: 16px; align-items: flex-start; }
.aud-step-n {
  counter-increment: s; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.aud-step-n::before { content: counter(s); }
.aud-step h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.aud-step p { font-size: 13.5px; color: var(--muted); line-height: 1.68; margin: 0; }

.aud-price { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.aud-price-card {
  max-width: 460px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border-blue); border-radius: 20px; padding: 30px; text-align: center;
  box-shadow: var(--shadow);
}
.aud-price-amt { font-family: var(--serif); font-size: 46px; font-weight: 600; color: var(--navy); line-height: 1; }
.aud-price-amt span { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--muted); }
.aud-price-list { list-style: none; padding: 0; margin: 22px 0; text-align: left; display: grid; gap: 10px; }
.aud-price-list li { font-size: 13.5px; color: var(--text); display: flex; gap: 9px; align-items: flex-start; line-height: 1.6; }
.aud-tick { color: var(--blue); flex-shrink: 0; margin-top: 2px; }

.aud-end { text-align: center; padding: 58px 24px 70px; }

/* ── REQUEST WIZARD: who should do it ── */
.rq-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rq-who-o {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--border); border-radius: 13px; padding: 14px 15px;
  background: var(--white); transition: border-color .15s, background .15s;
}
.rq-who-o:hover { border-color: var(--blue-soft); }
.rq-who-o input { position: absolute; opacity: 0; pointer-events: none; }
.rq-who-o:has(:checked) { border-color: var(--blue); background: var(--blue-pale); }
.rq-who-l { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.rq-who-d { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── LIVE LICENCE CHECK (registration) ── */
.lic-status {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 11px 13px; border-radius: 11px;
  font-size: 12.5px; line-height: 1.55;
  border: 1px solid var(--border); background: var(--white); color: var(--muted);
}
.lic-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; margin-top: 5px; background: var(--muted); }

.lic-checking { border-color: var(--border-blue); background: var(--blue-pale); color: var(--blue-dark); }
.lic-checking .lic-dot { background: var(--blue); animation: licPulse 1s ease-in-out infinite; }
@keyframes licPulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

.lic-verified { border-color: #b8ddc0; background: #f0f9f2; color: #3f7049; font-weight: 500; }
.lic-verified .lic-dot { background: #4a7c53; }

.lic-not_found, .lic-mismatch, .lic-inactive {
  border-color: #f0d9b8; background: #fdf7ec; color: #8a6520;
}
.lic-not_found .lic-dot, .lic-mismatch .lic-dot, .lic-inactive .lic-dot { background: #c9992f; }

.lic-unavailable, .lic-need_name, .lic-error { border-color: var(--border); background: #fbfaf8; }

/* ══════════════════════════════════════════
   PROVIDER ACTIVITY FEED
   ══════════════════════════════════════════ */
.act-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.act-filter {
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--white); transition: color .14s, border-color .14s, background .14s;
}
.act-filter:hover { color: var(--blue); border-color: var(--blue-soft); }
.act-filter.on { color: #fff; background: var(--blue); border-color: var(--blue); }

.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.act-item a {
  display: flex; align-items: flex-start; gap: 13px; text-decoration: none;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.act-item a:hover { border-color: var(--border-blue); box-shadow: var(--shadow-sm); }
.act-new a { border-left: 3px solid var(--blue); }

.act-ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-pale); color: var(--blue);
}
.act-ico-win    { background: #e4f2e6; color: #4a7c53; }
.act-ico-cancel { background: #fbeaea; color: #b4534f; }
.act-ico-star   { background: var(--yellow-pale); color: #a8842a; }

.act-body { flex: 1; min-width: 0; }
.act-title { display: block; font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.4; }
.act-detail {
  display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-when { font-size: 11.5px; color: var(--muted); flex-shrink: 0; white-space: nowrap; padding-top: 2px; }

.act-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.act-empty svg { color: var(--blue-soft); margin-bottom: 14px; }
.act-empty h3 { font-family: var(--serif); font-size: 21px; color: var(--navy); margin-bottom: 8px; }
.act-empty p { font-size: 13.5px; line-height: 1.7; max-width: 400px; margin: 0 auto; }
.act-empty a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* compact variant on the dashboard */
.act-compact .act-item a { padding: 11px 13px; border-radius: 12px; }
.act-compact .act-ico { width: 28px; height: 28px; border-radius: 9px; }
.act-compact .act-title { font-size: 13.5px; }
.sidebar-badge { background: var(--blue); color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; padding: 2px 7px; }

/* ══════════════════════════════════════════
   REQUEST WALL  (map + grid)
   ══════════════════════════════════════════ */
.wall-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.wall-h { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); letter-spacing: -.015em; }
.wall-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.wall-sub a { color: var(--blue); text-decoration: none; font-weight: 600; }
.wall-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }

.wall-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .wall-grid { grid-template-columns: 1fr; } }

.wall-mapcol { position: sticky; top: 18px; display: grid; gap: 14px; }
@media (max-width: 980px) { .wall-mapcol { position: static; } }
.wall-map { height: 380px; width: 100%; border-radius: 16px; border: 1px solid var(--border); z-index: 0; }

.wall-areas { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.wall-areas h3 { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
.wall-area { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--border-soft); }
.wall-area:first-of-type { border-top: none; }
.wall-area-n { font-size: 13.5px; color: var(--navy); font-weight: 500; }
.wall-area-c { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-pale); border-radius: 999px; padding: 2px 9px; }

.wall-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; }
.wall-card {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: 15px; padding: 16px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wall-card:hover, .wall-card-hot {
  border-color: var(--blue-soft); box-shadow: var(--shadow); transform: translateY(-2px);
}
.wall-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.wall-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--blue-pale); color: var(--blue); padding: 3px 9px; border-radius: 999px;
}
.wall-quoted { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #4a7c53; background: #e4f2e6; padding: 3px 8px; border-radius: 999px; }
/* Sample (demo) requests — marked, and not a link: there is nobody behind them to quote. */
.wall-sample { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7A5A12; background: #FBF3E1; padding: 3px 8px; border-radius: 999px; }
.wall-card-sample { cursor: default; opacity: .88; }
.wall-card-sample .wall-act { color: var(--muted); }
.wall-dist { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.wall-card-t { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: 5px; }
.wall-card-m { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wall-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.wall-when { font-size: 11.5px; color: var(--muted); }
.wall-money { font-size: 13.5px; font-weight: 700; color: var(--blue); }

/* Wall card action row + locked state */
.wall-act {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--blue);
}
.wall-card-locked .wall-act { color: var(--muted); }
.wall-card-locked .wall-money { color: var(--muted); }
.wall-card-locked { background: #fdfcfa; }
.wall-card-locked:hover { border-color: var(--yellow-deep); }

/* ── PUBLIC WALL ── */
.pw-wrap { max-width: 1120px; margin: 0 auto; padding: 34px 24px 60px; }
.pw-stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pw-stat { text-align: center; }
.pw-stat strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--navy); line-height: 1; }
.pw-stat span { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; letter-spacing: .02em; }
.pw-note { font-size: 11.5px; color: var(--muted); text-align: center; margin: 0; }
.pw-locked { font-size: 11.5px; font-weight: 600; color: var(--blue); }
.pw-card .wall-card-m { min-height: 0; }
.pw-end { text-align: center; padding: 54px 20px 10px; }

/* ── IMPERSONATION BAR ── */
.imp-bar {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #2c2c2c; color: #f2efe9;
  padding: 9px 18px; font-size: 12.5px; line-height: 1.4;
}
.imp-dot { width: 8px; height: 8px; border-radius: 999px; background: #f2d06b; flex-shrink: 0; }
.imp-txt strong { color: #fff; }
.imp-switch { color: rgba(255,255,255,.55); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.imp-switch a { color: var(--blue-soft); text-decoration: none; font-weight: 600; }
.imp-switch a:hover { text-decoration: underline; color: #fff; }
.imp-exit {
  margin-left: auto; background: #f2d06b; color: #3a3a3a;
  font-weight: 700; text-decoration: none; padding: 5px 14px; border-radius: 8px; white-space: nowrap;
}
.imp-exit:hover { background: #1683F7; }
@media (max-width: 700px) { .imp-switch { width: 100%; order: 3; } }

/* ── WORKING / BOOKING MODE BAR ── */
.mode-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--blue-pale); border-bottom: 1px solid var(--border-blue);
  color: var(--blue-dark); padding: 8px 18px; font-size: 12.5px; font-weight: 500;
}
.mode-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); flex-shrink: 0; }
.mode-back {
  margin-left: auto; color: var(--blue-dark); font-weight: 700; text-decoration: none;
  border: 1px solid var(--blue-soft); border-radius: 8px; padding: 4px 12px; background: #fff;
}
.mode-back:hover { background: var(--white); border-color: var(--blue); }

/* ── REGISTRATION: services picker ── */
.reg-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.reg-svc-o {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px;
  background: var(--white); font-size: 13px; font-weight: 500; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.reg-svc-o:hover { border-color: var(--blue-soft); }
.reg-svc-o:has(:checked) { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-dark); font-weight: 600; }

/* ── COUNTER OFFERS ── */
.co-trail { display: grid; gap: 6px; margin: 12px 0; }
.co-step {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding: 8px 11px; border-radius: 10px;
  background: var(--blue-pale); border: 1px solid var(--border-blue);
}
.co-step.co-customer { background: #fbfaf8; border-color: var(--border); }
.co-who   { color: var(--muted); font-weight: 600; }
.co-price { font-weight: 700; color: var(--navy); font-size: 14px; }
.co-msg   { color: var(--muted); font-style: italic; flex-basis: 100%; }
.co-now   { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.co-now strong { color: var(--blue); font-size: 14px; }
.co-reply { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── AVAILABILITY ── */
.av-form { padding: 22px; margin-bottom: 26px; }
.av-h { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--navy); margin-bottom: 16px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.av-sec { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
          color: var(--muted); margin: 26px 0 10px; }
.av-sec span { background: var(--blue-pale); color: var(--blue); border-radius: 999px; padding: 1px 8px; margin-left: 5px; }
.av-list { display: grid; gap: 8px; }
.av-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: 13px; padding: 12px 15px;
}
.av-item.av-booked  { background: #f6faf7; border-color: #cfe6d5; }
.av-item.av-expired, .av-item.av-cancelled { opacity: .55; }
.av-when { text-align: center; flex-shrink: 0; min-width: 68px; line-height: 1.3; }
.av-when strong { display: block; font-size: 13px; color: var(--navy); }
.av-when span   { font-size: 11.5px; color: var(--muted); }
.av-body { flex: 1; min-width: 0; }
.av-title { font-size: 14px; font-weight: 600; color: var(--navy); margin-top: 4px; }
.av-meta  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.av-price { font-size: 15px; font-weight: 700; color: var(--blue); flex-shrink: 0; }
.av-remove {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; font-weight: 600; border-radius: 8px; padding: 5px 11px; cursor: pointer;
}
.av-remove:hover { border-color: #d9a5a2; color: #b4534f; }
.av-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.av-card .wall-card-foot { border-top: 1px solid var(--border-soft); }

/* ══════════════════════════════════════════
   NOTIFICATIONS
   ══════════════════════════════════════════ */
.nt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.nt-h1 { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--navy); line-height: 1.15; }
.nt-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.nt-readall {
  font-size: 12.5px; font-weight: 600; color: var(--blue); background: var(--white);
  border: 1px solid var(--border-blue); border-radius: 999px; padding: 8px 15px;
  cursor: pointer; transition: background .14s, color .14s; white-space: nowrap;
}
.nt-readall:hover { background: var(--blue); color: #fff; }

.nt-pref {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px;
}
.nt-pref-txt { flex: 1; min-width: 0; }
.nt-pref-txt strong { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.nt-pref-txt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.nt-toggle {
  flex-shrink: 0; width: 44px; height: 25px; border-radius: 999px; border: none;
  background: #d8dee6; cursor: pointer; padding: 3px; transition: background .18s;
}
.nt-toggle.on { background: var(--blue); }
.nt-knob {
  display: block; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s;
}
.nt-toggle.on .nt-knob { transform: translateX(19px); }

/* Live alerts at the top of the bell page */
.nt-alerts { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.nt-alerts-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px 2px; }
.nt-alert {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--border); background: var(--white); color: var(--navy); transition: transform .12s, box-shadow .12s;
}
.nt-alert:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.nt-alert-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue); }
.nt-alert-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-alert-txt strong { font-size: 14px; font-weight: 650; }
.nt-alert-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.nt-alert-go { color: var(--muted); font-size: 15px; }
.nt-alert-warning { border-color: #f2d9a6; background: #fffaf0; }
.nt-alert-warning .nt-alert-ico { background: #fdecc8; color: #a8842a; }
.nt-alert-danger  { border-color: #f3c2bf; background: #fff5f5; animation: alertGlow 2.4s ease-in-out infinite; }
.nt-alert-danger .nt-alert-ico { background: #fbe0de; color: #b4534f; }
@keyframes alertGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(210,74,69,0); } 50% { box-shadow: 0 0 0 4px rgba(210,74,69,.14); } }

/* Per-kind, per-channel notification settings */
.nt-prefs { margin-bottom: 20px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; }
.nt-prefs summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.nt-prefs summary::-webkit-details-marker { display: none; }
.nt-prefs summary::after { content: ''; position: absolute; right: 20px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.nt-prefs[open] summary::after { transform: rotate(-135deg); top: 26px; }
.nt-prefs summary strong { font-size: 14px; font-weight: 600; color: var(--navy); }
.nt-prefs summary span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.nt-prefs-form { padding: 0 18px 16px; }
.nt-prefs-t { width: 100%; border-collapse: collapse; }
.nt-prefs-t th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 6px 4px 8px; width: 84px; }
.nt-prefs-t th:first-child { text-align: left; width: auto; }
.nt-prefs-t td { border-top: 1px solid var(--border); padding: 11px 4px; vertical-align: middle; text-align: center; }
.nt-prefs-t td:first-child { text-align: left; }
.nt-prefs-t td b { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.nt-prefs-t td small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.nt-cb { display: inline-block; position: relative; width: 40px; height: 23px; cursor: pointer; }
.nt-cb input { position: absolute; opacity: 0; width: 0; height: 0; }
.nt-cb span { position: absolute; inset: 0; border-radius: 999px; background: #d8dee6; transition: background .18s; }
.nt-cb span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.nt-cb input:checked + span { background: var(--blue); }
.nt-cb input:checked + span::after { transform: translateX(17px); }
.nt-cb input:focus-visible + span { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.nt-prefs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
@media (max-width: 520px) { .nt-prefs-t th { width: 64px; } .nt-prefs-form { padding: 0 12px 14px; } }

/* Icon tints, one per notification type. */
.act-ico-money    { background: #e4f2e6; color: #4a7c53; }
.act-ico-check    { background: #e4f2e6; color: #4a7c53; }
.act-ico-swap     { background: var(--yellow-pale); color: #a8842a; }
.act-ico-x        { background: #fbeaea; color: #b4534f; }
.act-ico-calendar { background: var(--blue-pale); color: var(--blue); }
.act-ico-pin      { background: var(--blue-pale); color: var(--blue); }

/* Bell in the top nav. */
.nav-bell { position: relative; display: flex; align-items: center; }
.nav-bell-dot {
  position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: #d24a45; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}
/* Something needs attention (trial ending, quote waiting, mark on record…): the bell pulses. */
.nav-bell.is-alert svg { color: #d24a45; animation: bellRing 2.4s ease-in-out infinite; transform-origin: 50% 2px; }
.nav-bell.is-alert::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid rgba(210,74,69,.55); animation: bellPulse 2.4s ease-out infinite; pointer-events: none;
}
.nav-bell.is-alert .nav-bell-dot { background: #d24a45; animation: bellBlink 1.2s steps(1) infinite; }
@keyframes bellRing { 0%, 20%, 100% { transform: rotate(0); } 4% { transform: rotate(14deg); } 8% { transform: rotate(-12deg); } 12% { transform: rotate(8deg); } 16% { transform: rotate(-4deg); } }
@keyframes bellPulse { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes bellBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nav-bell.is-alert svg, .nav-bell.is-alert::before, .nav-bell.is-alert .nav-bell-dot { animation: none; } }

/* "My Record" nav pill: latest medal + level + thin progress underline */
.nav-record { display: inline-flex; align-items: center; gap: 7px; }
.nav-record-pill {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 3px 5px;
  border-radius: 999px; background: #fdf6e3; color: #8a6a1e; font-size: 11px; font-weight: 700; line-height: 1.2; overflow: hidden;
}
.nav-record-pill img { width: 14px; height: 14px; object-fit: contain; }
.nav-record-pill i { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: #1683F7; }
@media (max-width: 1180px) { .nav-record-pill { display: none; } }

@media (max-width: 640px) {
  .nt-head { flex-direction: column; align-items: stretch; }
  .nt-h1 { font-size: 25px; }
}

/* Provider taking the customer's counter outright. */
.co-take {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  background: var(--blue-pale); border: 1px solid var(--border-blue); border-radius: 12px;
}
.co-take-btn { font-size: 13px; padding: 8px 16px; white-space: nowrap; }
.co-take-or { font-size: 12.5px; color: var(--muted); }
.co-reply { margin-top: 12px; }

/* ══════════════════════════════════════════
   REVIEWS
   ══════════════════════════════════════════ */
.rv-wrap { max-width: 620px; margin: 0 auto; padding: 34px 24px 60px; }
.rv-back { font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: none; }
.rv-h1 { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--navy); margin-top: 14px; }
.rv-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.rv-card { padding: 22px; margin-top: 18px; }
.rv-block { margin-top: 18px; }
.rv-done { font-size: 14.5px; color: var(--navy); font-weight: 600; margin-bottom: 10px; }
.rv-quote { font-size: 14px; line-height: 1.65; color: var(--text); margin-top: 10px; white-space: pre-wrap; }
.rv-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; }

/* The sealed-review explainer. It has to read as reassurance, not fine print —
   people write honestly only when they believe the other side cannot see it. */
.rv-sealed {
  margin-top: 18px; padding: 13px 15px; border-radius: 12px;
  background: var(--blue-pale); border: 1px solid var(--border-blue);
  font-size: 13px; line-height: 1.6; color: var(--navy);
}
.rv-sealed strong { display: block; margin-bottom: 3px; }

/* Star picker: rendered right-to-left so hovering a star lights every one
   before it, using sibling selectors alone. */
.rv-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rv-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-pick label {
  font-size: 32px; line-height: 1; color: #dfe5ec; cursor: pointer;
  transition: color .12s, transform .12s;
}
.rv-pick label:hover, .rv-pick label:hover ~ label,
.rv-pick input:checked ~ label { color: #e5bc4a; }
.rv-pick label:hover { transform: scale(1.08); }
.rv-pick input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.rv-stars { letter-spacing: 1px; white-space: nowrap; }
.rv-stars .rv-on  { color: #e5bc4a; }
.rv-stars .rv-off { color: #dfe5ec; }

/* Inline rating chip, used wherever a profile is listed. */
.rv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.rv-chip b { color: var(--navy); font-weight: 700; }
.rv-chip .rv-new { color: var(--muted); font-style: italic; }

/* A published review with its reply. */
.rv-item { border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; background: var(--white); }
.rv-item + .rv-item { margin-top: 9px; }
.rv-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-who { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.rv-when { font-size: 11.5px; color: var(--muted); }
.rv-reply {
  margin-top: 11px; padding: 11px 13px; border-radius: 10px;
  background: var(--cream); border-left: 3px solid var(--blue-soft);
}
.rv-reply-t { font-size: 11.5px; font-weight: 700; color: var(--blue); letter-spacing: .03em; text-transform: uppercase; }
.rv-reply p { font-size: 13px; line-height: 1.6; color: var(--text); margin-top: 4px; white-space: pre-wrap; }

/* Distribution bars on a profile. */
.rv-dist { display: grid; gap: 4px; margin-top: 12px; }
.rv-dist-row { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.rv-dist-bar { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.rv-dist-fill { height: 100%; background: #e5bc4a; border-radius: 999px; }

/* Confirm-pin map after "Use my location" — shared by every page with the
   address autocomplete (request wizard, register, customer profile). */
.geo-acc { display: block; font-size: 12px; line-height: 1.5; margin-top: 6px; }
.geo-acc.is-good  { color: var(--muted); }
.geo-acc.is-rough { color: #9c6b1f; }
.geo-pin { margin-top: 10px; }
.geo-pin-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 7px; }
.geo-pin-map { height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }

/* ══════════════════════════════════════════
   INSIDE THE iOS APP  (body.in-app — set when the UA carries BelleIndexApp)
   The app draws a native tab bar, so the web nav, footer and ad rail go.
   Content stays exactly as it is; only the chrome around it changes.
   ══════════════════════════════════════════ */
.in-app .site-nav,
.in-app .site-foot,
.in-app .site-prefoot-ad,
.in-app .nav-mobile,
.in-app .imp-bar,
.in-app .mode-bar { display: none !important; }
.in-app { padding-top: env(safe-area-inset-top); }
/* Hero headings sat under a 64px nav; without it they need a little air. */
.in-app .uni-head, .in-app .aud-hero-in, .in-app .rq-wrap, .in-app .pw-wrap { padding-top: 18px; }
/* The pages cross-link to each other with "browse open slots instead" and the
   like; in the app those destinations are one tap away on the tab bar. */
.in-app .uni-explore, .in-app .uni-clear { display: none; }

/* ── SOCIAL SIGN-IN (Continue with Apple / Google) ── */
.social-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14.5px;
  text-decoration: none; border: 1.5px solid var(--border); background: var(--white); color: var(--text, #1f2937);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.btn-social:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.btn-social-apple { background: #000; color: #fff; border-color: #000; }
.btn-social-apple:hover { background: #111; }
.social-or { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--muted); font-size: 12.5px; }
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--blue-pale); color: var(--blue-dark); font-size: 13.5px; margin-bottom: 16px; }

/* Provider onboarding (account first, three steps) */
.onb-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 18px; padding: 0; }
.onb-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 9px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); }
.onb-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--border); color: var(--muted); }
.onb-steps li.is-on { color: var(--navy); border-color: var(--blue); }
.onb-steps li.is-on span { background: var(--blue); color: #fff; }
.onb-steps li.is-done { color: #2e7d4f; border-color: #bfe3cc; background: #eef9f1; }
.onb-steps li.is-done span { background: #3aa866; color: #fff; }
@media (max-width: 520px) { .onb-steps li { padding: 8px 10px; font-size: 11.5px; } }
.onb-card { padding: 0; margin-bottom: 12px; }
.onb-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 15px; font-weight: 700; color: var(--navy); flex-wrap: wrap; }
.onb-card > summary::-webkit-details-marker { display: none; }
.onb-card > summary small { flex-basis: 100%; padding-left: 38px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.onb-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.onb-n.ok { background: #3aa866; }
.onb-form { padding: 4px 20px 20px; border-top: 1px solid var(--border); padding-top: 16px; }

/* "Find your business" (onboarding, salons) */
.biz-search { position: relative; }
.biz-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.biz-search .input { padding-left: 38px; }
.biz-spin { position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--blue); animation: bizSpin .7s linear infinite; }
@keyframes bizSpin { to { transform: rotate(360deg); } }
.biz-results { margin-top: 6px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.08); overflow: hidden; }
.biz-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; font: inherit; color: var(--navy); }
.biz-row:last-child { border-bottom: 0; }
.biz-row:hover { background: var(--blue-pale); }
.biz-row img, .biz-picked img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--border); }
.biz-ico { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-pale); color: var(--blue); font-weight: 800; font-size: 15px; flex-shrink: 0; }
.biz-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.biz-txt strong { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-txt small, .biz-picked small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-go { font-size: 12.5px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.biz-none { padding: 12px 14px; font-size: 13px; color: var(--muted); }
.biz-picked { margin-top: 8px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: #eef9f1; border: 1px solid #bfe3cc; }
.biz-picked > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.biz-picked strong { font-size: 14px; font-weight: 650; color: var(--navy); }
.biz-clear { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; }

/* ══ PAGE UNIFORMITY LAYER ═════════════════════════════════════════════════
   Every page was built with its own wrapper, its own width and its own
   spacing — a dozen variations that made the site feel assembled rather than
   designed. Rather than rewrite fifty templates, the wrappers that already
   exist are pinned to one set of measurements here. One container width, one
   vertical rhythm, one card, one page title, everywhere.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --page-max:   1120px;   /* one content width for the whole site */
  --page-gutter: 20px;
  --page-top:    34px;    /* space under the header */
  --page-bottom: 64px;
  --section-gap: 34px;    /* between major blocks */
}

/* Every top-level wrapper in the codebase resolves to the same container. */
.page-content,
.legal-wrap, .acc-wrap, .pw-wrap, .rq-wrap, .rq-page, .rv-wrap,
.blog-grid, .mr, .mr-grid, .results-grid,
.bx-hero-inner, .aud-hero-in,
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
  max-width: var(--page-max) !important;
  margin-left: auto; margin-right: auto;
  padding-left: var(--page-gutter); padding-right: var(--page-gutter);
  box-sizing: border-box;
}
/* Reading-width pages (legal, forms) stay narrow — but on the same grid. */
.legal-wrap, .max-w-3xl { max-width: 760px !important; }
.max-w-2xl { max-width: 640px !important; }

/* One rhythm: the same air under the header and between blocks on every page. */
main > section:first-child,
main > div:first-child,
.page-content { padding-top: var(--page-top); }
main { padding-bottom: var(--page-bottom); }
main > section + section,
main > div + div { margin-top: var(--section-gap); }

/* One page title. Whatever markup a page used, the heading reads the same. */
.page-title, .section-h, main > section:first-child h1, .page-content > h1 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.page-sub, .section-sub, main > section:first-child h1 + p {
  font-size: 14.5px; color: var(--muted); margin: 0 0 4px;
}

/* One card. Pages that hand-rolled a panel inherit the same surface. */
.card,
.rounded-xl, .rounded-2xl, .rounded-lg {
  border-radius: 16px;
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 20px;
}

/* Old dark-theme leftovers: any panel that still asks for a dark surface gets
   the light one, so a stray class can never punch a black hole in a page. */
.bg-gray-800, .bg-gray-900, .bg-slate-800, .bg-slate-900 {
  background-color: var(--white) !important;
  color: var(--text) !important;
}
.text-white { color: var(--text) !important; }
/* …except where white text is correct: on charcoal buttons and dark panels. */
.btn .text-white, .btn-blue, .btn-blue *, .btn-orange, .btn-orange *, .glass:not(.light), .glass:not(.light) *,
.on-dark, .on-dark * { color: #fff !important; }
.on-dark { background: var(--panel) !important; }

@media (max-width: 700px) {
  :root { --page-top: 22px; --page-bottom: 44px; --section-gap: 24px; --page-gutter: 16px; }
}

/* ---- Close-your-account form -------------------------------------------
   Its own small block rather than reusing a listing form: this is the one
   page where the destructive button should not look like every other
   primary action on the site. */
.form-error {
  background: #fdf2f2; border: 1px solid #f3c9c9; color: #8f2020;
  border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 18px;
}
.del-form { margin-top: 4px; }
.del-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.del-input {
  width: 100%; box-sizing: border-box; font-size: 15px; color: var(--text);
  background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
}
.del-input:focus { outline: none; border-color: var(--gold, #1683F7); box-shadow: 0 0 0 3px rgba(22,131,247,.16); }
.del-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-danger {
  background: #a02020; color: #fff; border: 1px solid #a02020;
  font-weight: 600; border-radius: 10px; padding: 11px 18px; cursor: pointer;
}
.btn-danger:hover { background: #8a1b1b; border-color: #8a1b1b; color: #fff; }
/* Confirmation after an account is erased — the session is already gone, so
   this banner on the home page is the only acknowledgement left to give. */
.closed-note {
  max-width: var(--page-max, 1120px); margin: 18px auto 0;
  background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold, #1683F7);
  border-radius: 10px; padding: 13px 16px; font-size: 14.5px; color: var(--text);
}

/* ---- Support tickets ---------------------------------------------------- */
.sup-wrap .del-form { margin-bottom: 8px; }
.sup-textarea { font-family: inherit; line-height: 1.6; resize: vertical; }
.sup-hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.sup-list { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--white); margin-bottom: 8px; }
.sup-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text);
}
.sup-row:last-child { border-bottom: 0; }
.sup-row:hover { background: var(--cream, #F8FBFF); }
.sup-row-main { flex: 1; min-width: 0; }
.sup-subject { display: block; font-size: 15px; font-weight: 600; }
.sup-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sup-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #1683F7); margin-left: 7px; vertical-align: middle; }
.sup-status { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sup-open     { background: #fdf4e3; color: #8a6a12; }
.sup-answered { background: #eef4ec; color: #33613b; }
.sup-closed   { background: #f2f1ef; color: #617087; }
.sup-thread { margin: 18px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.sup-msg { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--white); }
.sup-msg-staff { background: #faf7ef; border-color: #ece3cd; }
.sup-msg-who { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.sup-msg-when { font-weight: 400; color: var(--muted); margin-left: 6px; }
.sup-msg-body { font-size: 14.5px; line-height: 1.7; color: var(--text); }
.sup-msg-img { display: block; margin-top: 9px; max-width: 100%; max-height: 320px; border-radius: 9px; border: 1px solid var(--border); }

/* A request's price on the public board: present, obviously withheld, and
   clearly worth signing in for — rather than simply absent, which reads as
   "this customer did not say" and undersells the board. */
.uni-card-p.is-locked { color: var(--faint, #a6a39e); letter-spacing: .18em; font-weight: 700; }

/* ---- "Where are you?" bar (both universe boards) ------------------------
   Sits under the title on the two boards that rank by distance. It is a plain
   form so it still works with scripting off; the autocomplete only fills the
   hidden lat/lng when it can. */
.geo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 760px; margin: 4px auto 18px; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.geo-bar-label { font-size: 13px; font-weight: 700; color: var(--navy); margin-right: 2px; }
.geo-bar-input {
  flex: 1 1 190px; min-width: 0; font-size: 14px; color: var(--text);
  background: var(--cream); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
}
.geo-bar-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(22,131,247,.16); }
.geo-bar-btn, .geo-bar-clear {
  font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer;
  background: var(--blue-pale); border: 1px solid var(--blue-soft);
  border-radius: 10px; padding: 9px 12px; white-space: nowrap;
}
.geo-bar-go {
  font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--ink); border: 1px solid var(--ink);
  border-radius: 10px; padding: 9px 15px; white-space: nowrap;
}
.geo-bar-go:hover { background: var(--ink-soft); }
.geo-bar-why { flex: 1 0 100%; font-size: 12px; color: var(--muted); }
.geo-bar-set { justify-content: center; }
.geo-bar-now { font-size: 13.5px; color: var(--text); }
.geo-bar-now strong { color: var(--navy); }
@media (max-width: 560px) {
  .geo-bar { margin-left: 12px; margin-right: 12px; }
  .geo-bar-go, .geo-bar-btn { flex: 1 1 auto; text-align: center; }
}

/* ---- The list under the constellation ----------------------------------
   The constellation shows one card per category — a shape, not an inventory.
   This is the inventory: everything else nearby, nearest first, paged. */
.uni-list { max-width: var(--page-max, 1120px); margin: 8px auto 0; padding: 0 var(--page-gutter, 20px); }
.uni-list-h { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.uni-list-note { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.uni-list-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.uni-li {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--white); border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 15px; transition: border-color .12s, transform .12s;
}
.uni-li:hover { border-color: var(--blue-soft); transform: translateY(-1px); }
.uni-li-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.uni-li-t { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.uni-li-p { font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.uni-li-p.is-locked { color: var(--faint, #a6a39e); letter-spacing: .18em; }
.uni-li-m { font-size: 12.5px; color: var(--muted); }
.uni-li-m b { color: var(--navy); font-weight: 600; }
.uni-li-q { color: var(--faint, #a6a39e); }
.uni-more {
  display: inline-block; margin: 16px 0 4px; padding: 10px 18px;
  background: var(--ink); color: #fff; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.uni-more:hover { background: var(--ink-soft); color: #fff; }