/* ─── Brand Tokens ─────────────────────────────── */
:root {
  --navy-900: #080f1e;
  --navy-800: #0d1d3a;
  --navy-700: #112350;
  --navy-600: #162d6a;
  --navy-500: #1e3a8a;
  --gold-600: #3574b8;
  --gold-500: #5b9bd5;
  --gold-400: #7ab2e0;
  --gold-300: #a8cde9;
  --gold-100: #eaf4fb;
  --off-white: #fafaf7;
  --text-dark: #0a1628;
  --text-muted: #64748b;
  --border: rgba(91,155,213,0.2);
}

/* ─── Reset / Base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; color: var(--text-dark); background: var(--off-white); overflow-x: hidden; }

/* ─── Typography ───────────────────────────────── */
.font-display { font-family: 'Playfair Display', serif; }

.text-gold-gradient {
  background: linear-gradient(135deg, #5b9bd5 0%, #a8cde9 50%, #5b9bd5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Navbar ───────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 20px;
  transition: padding 0.4s ease;
}
.navbar.scrolled {
  padding: 10px 20px;
}
.nb-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.92);
  /*backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); */
  border: 1px solid rgba(30,58,95,0.12);
  border-radius: 12px;
  padding: 4px 24px;
  height: 76px;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, height 0.4s ease;
}
.navbar.scrolled .nb-inner {
  background: rgba(255,255,255,0.98);
  border-color: rgba(30,58,95,0.18);
  box-shadow: 0 4px 24px rgba(30,58,95,0.10);
  padding: 4px 24px;
  height: 64px;
}
.navbar-logo-wrap {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-logo-icon {
  height: 100%; width: auto;
  min-height: 44px;
  display: block;
}
.navbar-logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: #0d1d3a;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}
.nb-divider {
  width: 1px; height: 20px; flex-shrink: 0;
  background: rgba(30,58,95,0.18); margin: 0 4px;
}
.nb-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 7px;
  background: linear-gradient(135deg, #3574b8 0%, #5b9bd5 100%);
  color: #fff; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 12px rgba(53,116,184,0.3);
  cursor: pointer;
}
.nb-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(53,116,184,0.45);
}
.nav-link {
  color: #1e3a5f;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: #0d1d3a;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-link:hover { color: #0d1d3a; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #0d1d3a; font-weight: 700; }
#menuBtn { color: #0d1d3a; }

/* ─── Buttons ──────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-900);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 4px 20px rgba(91,155,213,0.3);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(91,155,213,0.4); filter: brightness(1.05); }
.btn-gold:active { transform: translateY(0); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-outline:hover { border-color: var(--gold-400); color: var(--gold-400); }

.btn-navy {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-800);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-navy:hover { background: var(--navy-700); border-color: var(--gold-500); }

/* ─── Section Labels ───────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--gold-500);
}

/* ─── Cards ────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(15,36,71,0.12);
  border-color: rgba(91,155,213,0.3);
}

.card-navy {
  background: var(--navy-800);
  border: 1px solid rgba(91,155,213,0.15);
  border-radius: 8px;
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-navy:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  border-color: rgba(91,155,213,0.4);
}

/* ─── Hero ─────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: linear-gradient(145deg, var(--navy-900) 0%, var(--navy-800) 40%, #0d2050 100%);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(91,155,213,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,155,213,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: none;
  pointer-events: none;
}

/* ─── Stat Counter ─────────────────────────────── */
.stat-number { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; line-height: 1; }

/* ─── Gold Divider ─────────────────────────────── */
.gold-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  margin: 20px 0;
}

/* ─── Scroll Reveal ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Industry Badges ──────────────────────────── */
.industry-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(91,155,213,0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: default;
}
.industry-badge:hover {
  background: rgba(91,155,213,0.12);
  border-color: var(--gold-400);
  color: var(--gold-300);
}

/* ─── Testimonials ─────────────────────────────── */
.testimonial-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(91,155,213,0.15);
  border-radius: 8px;
  padding: 36px;
  transition: border-color 0.3s ease;
}
.testimonial-card:hover { border-color: rgba(91,155,213,0.35); }
.quote-mark { font-family: 'Playfair Display', serif; font-size: 4rem; line-height: 1; color: var(--gold-500); opacity: 0.5; }

/* ─── Process Steps ─────────────────────────────── */
.step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-500);
  background: rgba(91,155,213,0.06);
  flex-shrink: 0;
}

/* ─── Job Cards ─────────────────────────────────── */
.job-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 28px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(15,36,71,0.1);
  border-color: var(--gold-500);
}
.job-type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-perm { background: #e0f2fe; color: #0369a1; }
.badge-contract { background: #dcfce7; color: #15803d; }
.badge-temp { background: #fef9c3; color: #a16207; }
.badge-exec { background: #f3e8ff; color: #7e22ce; }

/* ─── Modal ─────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,15,30,0.7);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  /* The overlay itself scrolls when a tall modal exceeds the viewport, and contains its scroll
     so wheel/touch never chains through to the page behind it. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: #fff;
  border-radius: 12px;
  max-width: 560px; width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;          /* stop scroll-chaining to the page behind */
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.3);
}
/* Robust background scroll-lock while any modal is open — locks BOTH html and body so it works
   regardless of which element is the page's scroll container. */
html.modal-open, body.modal-open { overflow: hidden !important; }
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }

/* ─── Form Inputs ───────────────────────────────── */
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.form-input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(91,155,213,0.12); }
.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: #374151; margin-bottom: 6px; letter-spacing: 0.01em; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }

/* ─── Recruiter Portal ──────────────────────────── */
.portal-sidebar {
  width: 260px;
  min-height: 100vh;
  background: #fff;
  border-right: 1px solid rgba(30,58,95,0.12);
  flex-shrink: 0;
  transition: width 0.3s ease;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 40;
  overflow-y: auto;
}
.portal-sidebar.collapsed { width: 72px; }
.portal-main { margin-left: 260px; min-height: 100vh; transition: margin-left 0.3s ease; }
.portal-main.expanded { margin-left: 72px; }

.portal-nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  color: #1e3a5f;
  cursor: pointer;
  border-radius: 6px;
  margin: 2px 12px;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.portal-nav-item:hover { background: rgba(30,58,95,0.05); color: #0d1d3a; }
.portal-nav-item.active { background: rgba(13,29,58,0.07); color: #0d1d3a; border: 1px solid rgba(30,58,95,0.12); font-weight: 700; }
.portal-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }

.portal-header {
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 30;
}

/* Portal content panels */
.portal-panel { display: none; }
.portal-panel.active { display: block; }

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 12px 16px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.data-table td { padding: 14px 16px; font-size: 0.875rem; color: var(--text-dark); border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.data-table tr:hover td { background: #f8fafc; }
.data-table tr:last-child td { border-bottom: none; }

/* Status badges */
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 100px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.status-active { background: #dcfce7; color: #15803d; }
.status-inactive { background: #f1f5f9; color: #64748b; }
.status-pending { background: #fef3c7; color: #d97706; }
.status-filled { background: #dbeafe; color: #1d4ed8; }
.status-hold { background: #fce7f3; color: #be185d; }

/* Postbox cards */
.postbox-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.postbox-card:hover { border-color: var(--gold-500); box-shadow: 0 4px 20px rgba(91,155,213,0.1); }
.postbox-card.saved { opacity: 0.5; pointer-events: none; }
/* Service-enquiry cards: purple accent so client enquiries are visually distinct from candidates. */
.postbox-card--enquiry { background: #faf7ff; border-color: #e9d5ff; border-left: 4px solid #7c3aed; }
.postbox-card--enquiry:hover { border-color: #c4b5fd; border-left-color: #7c3aed; box-shadow: 0 4px 20px rgba(124,58,237,0.12); }

/* ─── Footer ────────────────────────────────────── */
.footer { background: var(--navy-900); color: rgba(255,255,255,0.7); }
.footer-link { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; display: block; margin-bottom: 10px; }
.footer-link:hover { color: var(--gold-400); }
.footer-divider { border-color: rgba(255,255,255,0.1); }

/* ─── Mobile Nav ────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--navy-900);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  padding: 100px 32px 32px;
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-nav-link {
  display: block; padding: 18px 0;
  font-size: 1.25rem; font-weight: 600;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-nav-link:hover { color: var(--gold-400); }

/* ─── Search Bar ────────────────────────────────── */
.search-bar { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.search-input { flex: 1; min-width: 180px; padding: 10px 16px; border: 1px solid #f1f5f9; border-radius: 6px; font-size: 0.9375rem; font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s ease; background: #f8fafc; }
.search-input:focus { border-color: var(--gold-500); background: #fff; }

/* ─── Login Page ────────────────────────────────── */
.login-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 48px 40px;
  box-shadow: 0 10px 40px rgba(13,29,58,0.08);
}

/* ─── Reduced Motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
  .stat-number { font-size: 2.2rem; }
  /* Slide via `left`, NOT `transform`: a position:fixed element with a transform creates a
     compositing layer that, on iOS Safari, makes the scrolling page content stop repainting
     (only the top paints; the rest flickers in/out on scroll). `left` avoids that layer.
     `visibility:hidden` when closed takes the drawer out of the paint/compositing path entirely so
     a permanently-fixed off-screen overlay can't flicker the page on scroll in an Android PWA; the
     delayed visibility transition keeps the slide-out animation visible before it hides. */
  /* .portal-sidebar { left: -280px; visibility: hidden; backface-visibility: hidden; transition: left 0.3s ease, visibility 0s linear 0.3s; } */
  /* .portal-sidebar.mobile-open { left: 0; visibility: visible; transition: left 0.3s ease, visibility 0s; } */
  /* .portal-main { margin-left: 0 !important; } */
  /* `overflow-x: clip` prevents sideways scroll WITHOUT making <body> a scroll container — unlike
     `overflow-x: hidden`, which on mobile promotes the tall page to a composited layer that exceeds
     the GPU texture limit, so only the top of the portal paints and the rest flickers on scroll
     (and it breaks the sticky header's painting). Clip keeps sticky + painting correct. */
  /* body { overflow-x: clip; } */
  /* .navbar { padding: 10px 12px; } */
  /* .navbar.scrolled { padding: 8px 12px; } */
  /* .nb-inner { padding: 5px 14px; border-radius: 10px; } */
  /* .navbar.scrolled .nb-inner { padding: 3px 14px; } */
  /* .navbar-logo-icon { height: 100%; } */
  /* .navbar-logo-name { font-size: 1.2rem; } */
  /* .navbar.scrolled .navbar-logo-name { font-size: 1.1rem; } */
}

@media (max-width: 480px) {
  .login-card { padding: 32px 24px; }
}

/* ─── Mobile: stack form fields, fit modals to screen, larger tap targets ─── */
@media (max-width: 640px) {
  /* Modals: fill the small screen, start near the top (so tall forms aren't centred off-screen),
     and use tighter padding. The overlay scrolls; the box caps at the viewport height. */
  .modal-overlay { padding: 10px; align-items: flex-start; }
  .modal-box { padding: 20px !important; max-height: 94vh; width: 100%; }

  /* Collapse every multi-column field grid to a single column on phones — covers both Tailwind
     grid-cols-* utilities and inline grid-template-columns used across modals and cards. */
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr !important; }
  .modal-box .grid,
  .modal-box [style*="grid-template-columns"],
  .postbox-card [style*="grid-template-columns"],
  .sendout-card [style*="grid-template-columns"],
  .entity-card  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Comfortable touch targets (WCAG ~44px). */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .action-btn { min-height: 42px; }

  /* CV preview iframe shorter so the import steps stay reachable. */
  #importCvPreview { height: 300px !important; }

  /* Step chips wrap instead of squashing. */
  .pc-chip { font-size: 0.74rem !important; padding: 7px 4px !important; }
}

/* ─── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(91,155,213,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(91,155,213,0.5); }

/* ─── Utility ───────────────────────────────────── */
.container-lg { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-py { padding: 96px 0; }
.section-py-sm { padding: 64px 0; }
.text-balance { text-wrap: balance; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Reusable loading spinner */
.lp-spinner { width: 36px; height: 36px; border: 4px solid #e2e8f0; border-top-color: #162d6a; border-radius: 50%; animation: lp-spin 0.7s linear infinite; }
.lp-loading { display: flex; align-items: center; justify-content: center; padding: 72px 0; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Rich-text advert body (public vacancies modal). Renders the sanitised HTML authored in the
   recruiter portal's Step-3 editor — bold/italic/underline, bullet & numbered lists, font sizes. */
.lp-advert-rich { color: var(--text-muted); line-height: 1.8; font-size: 0.9rem; }
.lp-advert-rich p { margin: 8px 0 0; }
.lp-advert-rich p:first-child { margin-top: 0; }
/* Tailwind's Preflight resets ul/ol to list-style:none, so restore markers explicitly (class
   selector outranks Preflight's element rule) — otherwise advert bullets/numbers indent with no dot. */
.lp-advert-rich ul, .lp-advert-rich ol { margin: 8px 0 0; padding-left: 20px; }
.lp-advert-rich ul { list-style: disc outside; }
.lp-advert-rich ol { list-style: decimal outside; }
.lp-advert-rich li { margin: 2px 0; display: list-item; }
.lp-advert-rich b, .lp-advert-rich strong { color: var(--navy-800); font-weight: 700; }