/* ═══════════════════════════════════════════════════════════════
   TalentHub — style.css   ·   by Jenkins Michaels Limited
   HTML build · MD-DRIVE
   ---------------------------------------------------------------
   Brand tokens are IDENTICAL to the JML site (same colour scheme,
   by decision). Class names are kept the same as your JML rebuild
   on purpose, so your mental model carries over 1:1. TalentHub is
   a SEPARATE site — it owns this copy and can evolve on its own.
   Never hardcode a colour/radius/shadow — always use a var().
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core brand ─────────────────────────────── */
  --navy:         #001E67;
  --navy-dark:    #00144A;
  --navy-mid:     #002B90;
  --navy-light:   #D6DCF0;
  --navy-surface: #F0F3FA;

  --lime:         #9AC900;
  --lime-dark:    #729700;
  --lime-light:   #EEF7C0;
  --lime-surface: #F7FAE8;

  /* ── Neutrals ───────────────────────────────── */
  --white:        #FFFFFF;
  --off-white:    #F8F9FB;
  --surface-grey: #F8F9FB;
  --border-grey:  #E5E7EB;
  --text-dark:    #0A0F2E;
  --text-body:    #374151;
  --text-muted:   #6B7280;
  --text-light:   #9CA3AF;

  /* ── Semantic ───────────────────────────────── */
  --success:  #059669;
  --warning:  #F59E0B;
  --error:    #DC2626;
  --whatsapp: #25D366;

  /* ── Radius ─────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ── Shadows ────────────────────────────────── */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.05), 0 1px 8px rgba(0,0,0,0.024);
  --shadow-nav:   0 2px 20px rgba(0,0,0,0.078);
  --shadow-lime:  0 4px 16px rgba(154,201,0,0.25);
  --shadow-navy:  0 4px 16px rgba(0,30,103,0.25);

  /* ── Layout ─────────────────────────────────── */
  --max-width: 1200px;
  --h-pad:     80px;
}

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

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-body);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  color: var(--text-dark);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Shared lime dot (eyebrow + badges) */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
}
.hl-lime { color: var(--lime); }

/* ═══════════════════════════════════════════════════════════════
   SITE HEADER  (sticky — shadow appears on scroll)
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-nav); }

/* ── MAIN NAV ─────────────────────────────────────────────────── */
.main-nav { background: var(--white); }
.main-nav-inner {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--h-pad);
}

/* Logo — image + two-line text */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 38px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text-top {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.3px;
}
.logo-text-bottom {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: stretch;
  height: 64px;
  margin-left: auto;   /* pushes the right cluster over (Flutter Spacer) */
}
.nav-links li { display: flex; }
.nav-links a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--lime);
}

/* Auth actions on the far right */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 22px;
}
.nav-signin {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.15s ease;
}
.nav-signin:hover { color: var(--lime-dark); }

/* Hamburger — hidden on desktop */
.hamburger {
  display: none;
  margin-left: auto;
  color: var(--navy);
  padding: 4px;
}
.hamburger svg { width: 26px; height: 26px; }

/* Lime pill (Create account) */
.btn-pill {
  display: inline-block;
  background: var(--lime);
  color: var(--navy);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.2s ease;
}
.btn-pill:hover { background: var(--lime-dark); box-shadow: var(--shadow-lime); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER  (slides in from the right)
   ═══════════════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1100;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 1200;
}
.mobile-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  padding: 20px;
}
.drawer-logo { height: 38px; width: auto; }
.drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}
.drawer-sub {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
}
.drawer-close {
  margin-left: auto;
  color: var(--white);
  opacity: 0.85;
}
.drawer-close svg { width: 22px; height: 22px; }

.drawer-links {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  flex: 1;              /* pushes CTA to the bottom */
}
.drawer-links a {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-links a:hover { background: var(--surface-grey); }
.drawer-links a.active {
  border-left-color: var(--lime);
  background: rgba(154,201,0,0.06);
  color: var(--navy);
  font-weight: 700;
}

.drawer-cta { padding: 20px; }
.btn-lime-block {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--lime);
  color: var(--navy);
  padding: 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s ease;
}
.btn-lime-block:hover { background: var(--lime-dark); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  (same three states as JMLBreakpoints)
   ═══════════════════════════════════════════════════════════════ */

/* TABLET & below (< 1024px): hide desktop links + actions, show hamburger */
@media (max-width: 1023px) {
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }
}

/* MOBILE (< 768px): tighter horizontal padding */
@media (max-width: 767px) {
  :root { --h-pad: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS  (one class, four variants — ready for the landing page)
   ═══════════════════════════════════════════════════════════════ */
.jml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.jml-btn svg { width: 16px; height: 16px; }
.jml-btn.full { width: 100%; }

.jml-btn--navy    { background: var(--navy); color: var(--white); }
.jml-btn--navy:hover    { background: var(--navy-mid); box-shadow: var(--shadow-navy); }

.jml-btn--lime    { background: var(--lime); color: var(--navy); }
.jml-btn--lime:hover    { background: var(--lime-dark); box-shadow: var(--shadow-lime); }

.jml-btn--outline { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
.jml-btn--outline:hover { background: var(--navy-surface); }

.jml-btn--ghost   { background: transparent; color: var(--white); border: 1.5px solid var(--white); }
.jml-btn--ghost:hover   { background: rgba(255,255,255,0.15); }

/* ═══════════════════════════════════════════════════════════════
   REUSABLE SECTION HEADER  (lime dash + label → Fraunces heading)
   ═══════════════════════════════════════════════════════════════ */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section-header.center { align-items: center; text-align: center; }

.sh-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--lime);
  text-transform: uppercase;
}
.sh-dash {
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--lime);
  flex-shrink: 0;
}
.sh-heading {
  margin-top: 16px;
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.15;
  letter-spacing: -1px;
}
.sh-sub {
  margin-top: 16px;
  max-width: 620px;
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.65;
}
.section-header.dark .sh-heading { color: var(--white); }
.section-header.dark .sh-sub     { color: #D1D5DB; }

@media (max-width: 767px) {
  .sh-heading { font-size: 30px; line-height: 1.2; letter-spacing: -0.5px; }
  .sh-sub { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO EYEBROW  (reused pill — also used by the temp placeholder)
   ═══════════════════════════════════════════════════════════════ */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER  (simple stub — full footer built later)
   ═══════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy);
  padding: 56px var(--h-pad) 28px;
  color: var(--white);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-logo { display: inline-flex; align-items: baseline; }
.footer-brand {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--white);
}
.footer-brand-accent { color: var(--lime); }
.footer-tagline {
  margin-top: 16px;
  max-width: 300px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
}
.footer-owner {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.footer-owner a { color: var(--lime); font-weight: 700; }
.footer-owner a:hover { text-decoration: underline; }

.footer-col { display: flex; flex-direction: column; }
.footer-col h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 8px;
}
.footer-col a {
  padding: 7px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.footer-col a:hover { color: var(--white); padding-left: 4px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
}
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-socials { display: flex; gap: 12px; }
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-social:hover { background: var(--lime); color: var(--navy); }
.footer-social svg { width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .site-footer { padding: 44px 24px 24px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   1 · HERO + SEARCH  (landing top — centred)
   ═══════════════════════════════════════════════════════════════ */
.hero {
  padding: 80px var(--h-pad) 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* soft navy glow behind the headline */
  background: radial-gradient(1200px 420px at 50% -100px, var(--navy-surface), transparent);
}
.hero-headline {
  margin-top: 24px;
  font-family: 'Fraunces', serif;
  font-size: 60px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -1.5px;
}
.hero-lead {
  margin-top: 20px;
  font-size: 17px;
  color: var(--text-body);
  max-width: 640px;
}

/* ── Hero: the four-word promise ─────────────────────────────
   Four words, four lime full stops. The dots are drawn by CSS,
   not typed into the markup — so the rhythm can never drift out
   of sync with the brand colour.
   Laid out as a wrapping row, NOT four stacked lines: stacked,
   they push the search bar below the fold on a laptop, and the
   search bar is the whole point of the hero.
   ────────────────────────────────────────────────────────── */
.hero-promise {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 20px;
}
.hero-promise span {
  font-family: 'Fraunces', serif;
  font-size: 27px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.4px;
  line-height: 1.1;
}
.hero-promise span::after {
  content: '.';
  color: var(--lime-dark);
}

/* ── Search bar ─────────────────────────────────────────────── */
.hero-search {
  margin-top: 36px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 620px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  padding: 6px 6px 6px 20px;
}
.hero-search-icon { display: flex; color: var(--text-light); flex-shrink: 0; }
.hero-search-icon svg { width: 20px; height: 20px; }
.hero-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-dark);
}
.hero-search-input::placeholder { color: var(--text-light); }
.hero-search-btn {
  flex-shrink: 0;
  background: var(--lime);
  color: var(--navy);
  padding: 12px 28px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s ease, box-shadow 0.2s ease;
}
.hero-search-btn:hover { background: var(--lime-dark); box-shadow: var(--shadow-lime); }

/* ── Stats strip ────────────────────────────────────────────── */
.hero-stats {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}
.stat-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.stat-divider { width: 1px; height: 34px; background: var(--border-grey); }

.ecosystem {
  padding: 56px var(--h-pad) 60px;
  background: var(--navy-surface);
  border-top: 1px solid var(--border-grey);
}
.eco-title {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eco-grid {
  margin: 34px auto 0;
  max-width: var(--max-width);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 26px;
}
.eco-stat {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.eco-num {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}
.eco-label {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  line-height: 1.35;
}
.eco-stat--key .eco-num { color: var(--lime-dark); }

@media (max-width: 1023px) {
  .ecosystem { padding: 48px 24px 52px; }
  .eco-grid  { gap: 28px 18px; }
  .eco-stat  { flex: 0 0 150px; }
}
@media (max-width: 767px) {
  .ecosystem { padding: 40px 20px 44px; }
  .eco-grid  { margin-top: 26px; gap: 26px 8px; }
  .eco-stat  { flex: 0 0 calc(33.333% - 6px); }
  .eco-num   { font-size: 23px; }
  .eco-label { font-size: 11px; }
}

@media (max-width: 767px) {
  .hero { padding: 56px 24px 48px; }
  .hero-headline { font-size: 38px; letter-spacing: -0.8px; }
  .hero-promise { gap: 4px 14px; margin-top: 16px; }
  .hero-promise span { font-size: 19px; }
  .hero-lead { font-size: 15px; }
  .hero-search {
    flex-direction: column;
    border-radius: var(--r-lg);
    padding: 12px;
    gap: 10px;
  }
  .hero-search-icon { display: none; }
  .hero-search-input {
    width: 100%;
    text-align: center;
    background: var(--surface-grey);
    border-radius: var(--r-md);
  }
  .hero-search-btn { width: 100%; text-align: center; }
  .hero-stats { gap: 16px; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   2 · WHO ARE YOU?  (role chooser — 5 cards)
   ═══════════════════════════════════════════════════════════════ */
.roles {
  padding: 72px var(--h-pad) 88px;
  background: var(--white);
}
.roles-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 18px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.role-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--lime);
}
.role-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
}
.role-icon svg { width: 26px; height: 26px; }
.role-icon--lime     { background: var(--lime); }
.role-icon--lime svg { color: var(--navy); }
.role-icon--navy     { background: var(--navy); }
.role-icon--navy svg { color: var(--white); }
.role-name {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.role-desc {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Tablet → 3 cols · Mobile → 2 cols */
@media (max-width: 1023px) {
  .roles-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .roles { padding: 56px 24px 64px; }
  .roles-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .role-card { padding: 22px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   3 · HOW IT WORKS  (four numbered steps)
   ═══════════════════════════════════════════════════════════════ */
.how {
  padding: 80px var(--h-pad);
  background: var(--navy-surface);
}
.how-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.how-step { display: flex; flex-direction: column; align-items: flex-start; }
.how-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 900;
}
.how-title {
  margin-top: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.how-text {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
}
@media (max-width: 1023px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 767px) {
  .how { padding: 56px 24px; }
  .how-grid { grid-template-columns: 1fr; gap: 24px; }
  .how-step { align-items: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED STRIP HEADER  (heading left · "view all" link right)
   used by Latest jobs + Top artisans
   ═══════════════════════════════════════════════════════════════ */
.strip-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.strip-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--lime-dark);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.strip-link:hover { color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   4 · LATEST JOBS  (job cards)
   ═══════════════════════════════════════════════════════════════ */
.latest { padding: 80px var(--h-pad); background: var(--white); }
.job-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.job-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--navy-light);
}
.job-top { display: flex; align-items: center; justify-content: space-between; }
.job-logo {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--white);
  font-size: 14px; font-weight: 700;
}
.job-type {
  font-size: 11px; font-weight: 700;
  color: var(--lime-dark);
  background: var(--lime-surface);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.job-title {
  margin-top: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy);
}
.job-company { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.job-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-grey);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.job-loc {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-body);
}
.job-loc svg { width: 14px; height: 14px; color: var(--text-light); flex-shrink: 0; }
.job-salary { font-size: 13px; font-weight: 700; color: var(--navy); }
@media (max-width: 1023px) {
  .job-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .latest { padding: 56px 24px; }
  .strip-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .job-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   5 · TOP ARTISANS  (artisan cards)
   ═══════════════════════════════════════════════════════════════ */
.artisans-strip { padding: 80px var(--h-pad); background: var(--navy-surface); }
.artisan-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.artisan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.artisan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--lime);
}
.artisan-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-size: 18px; font-weight: 700;
}
.artisan-badge {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 10px; font-weight: 700;
  color: var(--success);
  background: #ECFDF5;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 4px;
}
.artisan-badge svg { width: 10px; height: 10px; }
.artisan-name {
  margin-top: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--navy);
}
.artisan-trade { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.artisan-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-grey);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.artisan-rating {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.artisan-rating svg { width: 15px; height: 15px; color: var(--lime); }
.artisan-price { font-size: 13px; font-weight: 700; color: var(--lime-dark); }
@media (max-width: 1023px) {
  .artisan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .artisans-strip { padding: 56px 24px; }
  .artisan-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   6 · FINAL CTA  (navy band)
   ═══════════════════════════════════════════════════════════════ */
.final-cta {
  padding: 88px var(--h-pad);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-eyebrow--on-navy {
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}
.final-cta-heading {
  margin-top: 22px;
  font-family: 'Fraunces', serif;
  font-size: 46px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -1px;
}
.final-cta-text {
  margin-top: 16px;
  font-size: 16px;
  color: #D1D5DB;
  max-width: 520px;
}
.final-cta-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
@media (max-width: 767px) {
  .final-cta { padding: 64px 24px; }
  .final-cta-heading { font-size: 34px; }
  .final-cta-actions { width: 100%; }
  .final-cta-actions .jml-btn { flex: 1; min-width: 140px; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH  (register / sign in — split layout)
   ═══════════════════════════════════════════════════════════════ */
.auth { display: flex; min-height: calc(100vh - 64px); }

/* ── Left value panel (navy, role-adaptive) ─────────────────── */
.auth-panel {
  flex: 45;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-headline {
  margin-top: 20px;
  font-family: 'Fraunces', serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -1px;
}
.auth-bullets {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
}
.auth-bullet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(154,201,0,0.18);
  color: var(--lime);
  flex-shrink: 0;
}
.auth-bullet-icon svg { width: 13px; height: 13px; }

/* ── Right form panel ───────────────────────────────────────── */
.auth-form-wrap {
  flex: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  background: var(--white);
}
.auth-form { width: 100%; max-width: 440px; }
.auth-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--navy);
}
.auth-sub { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.auth-sub a { color: var(--lime-dark); font-weight: 700; }

/* Fields */
.field-label {
  display: block;
  margin-top: 20px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.field-label.first { margin-top: 26px; }
.field-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(0,43,144,0.10);
}
.field-input::placeholder { color: var(--text-light); }

/* Role chips */
.role-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.role-chip {
  padding: 8px 14px;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.role-chip:hover { border-color: var(--navy-light); }
.role-chip.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Submit + note + terms */
.auth-submit { margin-top: 28px; }
.auth-note {
  margin-top: 14px;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
}
.auth-terms {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.5;
}
.auth-terms a { color: var(--text-muted); text-decoration: underline; }

/* Stack on narrow screens */
@media (max-width: 900px) {
  .auth { flex-direction: column; min-height: 0; }
  .auth-panel { padding: 44px 28px; }
  .auth-headline { font-size: 30px; }
  .auth-form-wrap { padding: 40px 24px; }
}

/* ── Fix: keep the eyebrow pill hugging its text inside the navy
   auth panel (a flex column stretches children by default) ──── */
.auth-panel .hero-eyebrow { align-self: flex-start; }

/* ── Footer: studio credit line ─────────────────────────────── */
.footer-bottom-left { display: flex; flex-direction: column; gap: 5px; }
.footer-dev { font-size: 12px; color: rgba(255,255,255,0.45); }
.footer-dev a { color: rgba(255,255,255,0.75); font-weight: 600; transition: color 0.15s ease; }
.footer-dev a:hover { color: var(--lime); }

/* ── Auth: error note, busy button, guard panel ─────────────── */
.auth-note.error { color: var(--error); }
.jml-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.signed-in-panel .jml-btn { margin-top: 14px; }

/* ═══════════════════════════════════════════════════════════════
   5.5 · MOBILE APP — COMING SOON  (premium: floating cards + rich phone)
   ═══════════════════════════════════════════════════════════════ */
.app-cta { padding: 88px var(--h-pad); background: var(--white); }
.app-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 60px 64px;
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 80% -10%, rgba(154,201,0,0.16), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,30,103,0.28);
}
/* faint dotted texture */
.app-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  pointer-events: none;
}
.app-copy, .app-visual { position: relative; z-index: 1; }
.app-copy { flex: 1; }
.app-heading {
  margin-top: 20px;
  font-family: 'Fraunces', serif;
  font-size: 46px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -1.2px;
}
.app-heading .hl-lime { color: var(--lime); }
.app-text {
  margin-top: 18px;
  max-width: 400px;
  font-size: 16px;
  color: #C7CEDE;
  line-height: 1.65;
}
.app-features {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
}
.app-feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(154,201,0,0.2);
  color: var(--lime);
  flex-shrink: 0;
}
.app-feat-icon svg { width: 12px; height: 12px; }

.app-badges { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  color: var(--white);
  background: rgba(255,255,255,0.05);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.store-badge:hover { background: rgba(255,255,255,0.1); border-color: rgba(154,201,0,0.5); transform: translateY(-2px); }
.store-icon { width: 22px; height: 22px; flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge-text small { font-size: 9px; color: rgba(255,255,255,0.65); letter-spacing: 0.3px; }
.store-badge-text strong { font-size: 14px; font-weight: 700; }

/* ── Phone + floating cards ─────────────────────────────────── */
.app-visual {
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 10px 30px;
}
.app-phone {
  position: relative;
  width: 248px;
  height: 508px;
  background: #05081C;
  border-radius: 42px;
  padding: 12px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.45),
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 0 0 6px #0A0F2E;
}
.app-phone-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 24px;
  background: #05081C;
  border-radius: 0 0 16px 16px;
  z-index: 3;
}
.app-phone-screen {
  width: 100%; height: 100%;
  background: var(--off-white);
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Floating glass cards */
.app-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.97);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.app-float-txt { display: flex; flex-direction: column; line-height: 1.2; }
.app-float-txt strong { font-size: 13px; font-weight: 700; color: var(--navy); }
.app-float-txt small { font-size: 10px; color: var(--text-muted); }
.app-float--rating { top: 40px; left: -6px; }
.app-float-star {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--lime); color: var(--navy);
  font-size: 15px;
}
.app-float--quote { bottom: 54px; right: -10px; }
.app-float-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(5,150,105,0.18);
  flex-shrink: 0;
}

/* ── Mini artisan screen ────────────────────────────────────── */
.mini-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 4px;
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  font-size: 11px; font-weight: 700;
}
.mini-status-dots { display: flex; gap: 3px; }
.mini-status-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.6); }
.mini-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 16px;
  background: var(--navy);
  color: var(--white);
  font-size: 13px; font-weight: 700;
}
.mini-topbar svg { width: 17px; height: 17px; }
.mini-topbar span { flex: 1; }
.mini-body { padding: 16px; display: flex; flex-direction: column; background: var(--off-white); flex: 1; }
.mini-head { display: flex; align-items: center; gap: 12px; }
.mini-avatar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--lime); color: var(--navy);
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.mini-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--off-white);
}
.mini-name { font-size: 15px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 5px; }
.mini-vcheck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--success); color: #fff;
  font-size: 9px;
}
.mini-trade { margin-top: 2px; font-size: 11px; color: var(--text-muted); }

.mini-stats {
  margin-top: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: 12px;
  overflow: hidden;
}
.mini-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px;
}
.mini-stat + .mini-stat { border-left: 1px solid var(--border-grey); }
.mini-stat strong { font-size: 15px; font-weight: 800; color: var(--navy); font-family: 'Fraunces', serif; }
.mini-stat small { margin-top: 1px; font-size: 9px; color: var(--text-muted); }

.mini-label { margin-top: 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-light); }
.mini-photos { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-photos span {
  aspect-ratio: 1;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
}
.mini-photos span:nth-child(2) { background: linear-gradient(135deg, var(--lime-dark), var(--navy-mid)); }
.mini-photo-more {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)) !important;
}
.mini-actions { margin-top: 16px; display: flex; gap: 8px; }
.mini-btn {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
}
.mini-btn--ghost { border: 1.5px solid var(--border-grey); color: var(--navy); background: var(--white); }
.mini-btn--lime  { background: var(--lime); color: var(--navy); }

/* Responsive */
@media (max-width: 900px) {
  .app-panel { flex-direction: column; gap: 44px; padding: 48px 32px; text-align: center; }
  .app-copy { display: flex; flex-direction: column; align-items: center; }
  .app-text { max-width: none; }
  .app-features { align-items: flex-start; }
  .app-badges { justify-content: center; }
  .app-heading { font-size: 36px; }
  .app-float--rating { left: 2px; }
  .app-float--quote { right: 0; }
}
@media (max-width: 767px) {
  .app-cta { padding: 56px 20px; }
  .app-panel { padding: 40px 20px; border-radius: 22px; }
  .app-float { transform: scale(0.9); }
  .app-float--rating { left: -4px; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD  (shared shell — sidebar + main)
   ═══════════════════════════════════════════════════════════════ */
.dash-body { background: var(--navy-surface); }
.dash-loading {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px;
}
.dash { display: flex; min-height: 100vh; }

/* Sidebar */
.dash-side {
  width: 250px; flex-shrink: 0;
  background: var(--navy);
  padding: 24px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.dash-logo { padding: 6px 12px 22px; }
.dash-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dash-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-md);
  color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.dash-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dash-link.active { background: var(--lime); color: var(--navy); font-weight: 700; }
.dash-signout {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-md);
  color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-signout svg { width: 18px; height: 18px; }
.dash-signout:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Main */
.dash-main { flex: 1; padding: 32px 40px; }
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.dash-hello { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 900; color: var(--navy); }
.dash-sub { margin-top: 2px; font-size: 14px; color: var(--text-muted); }
.dash-badge {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  background: var(--white); border: 1px solid var(--border-grey);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.dash-badge.is-verified { color: var(--success); background: #ECFDF5; border-color: #A7F3D0; }

.dash-stats {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.dash-stat {
  background: var(--white); border: 1px solid var(--border-grey);
  border-radius: var(--r-lg); padding: 20px;
  display: flex; flex-direction: column;
}
.dash-stat-num { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 900; color: var(--navy); line-height: 1; }
.dash-stat-label { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }

.dash-card {
  margin-top: 20px;
  background: var(--white); border: 1px solid var(--border-grey);
  border-radius: var(--r-lg); padding: 24px;
}
.dash-card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); }
.dash-card-text { margin-top: 8px; font-size: 14px; color: var(--text-body); line-height: 1.6; }
.dash-empty { color: var(--text-muted); }
.dash-steps { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.dash-step {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-grey); border: 1px solid var(--border-grey);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.dash-step.done { color: var(--success); background: #ECFDF5; border-color: #A7F3D0; }

/* Responsive */
@media (max-width: 860px) {
  .dash { flex-direction: column; }
  .dash-side {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: 12px 16px; gap: 6px;
  }
  .dash-logo { padding: 6px 8px; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .dash-link { padding: 8px 10px; }
  .dash-link span, .dash-signout { font-size: 13px; }
  .dash-main { padding: 24px 20px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   SETUP  (focused wizard page — artisan add skills etc.)
   ═══════════════════════════════════════════════════════════════ */
.setup-body { background: var(--navy-surface); }
.setup-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 15px; }
.setup-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; background: var(--white); border-bottom: 1px solid var(--border-grey);
}
.setup-back { font-size: 14px; font-weight: 600; color: var(--navy); }
.setup-back:hover { color: var(--lime-dark); }
.setup-main { display: flex; justify-content: center; padding: 40px 20px 80px; }
.setup-card {
  width: 100%; max-width: 560px;
  background: var(--white); border: 1px solid var(--border-grey);
  border-radius: var(--r-xl); padding: 40px;
}
.setup-step-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--lime-dark); }
.setup-title { margin-top: 10px; font-family: 'Fraunces', serif; font-size: 32px; font-weight: 900; color: var(--navy); letter-spacing: -0.8px; }
.setup-sub { margin-top: 8px; font-size: 15px; color: var(--text-muted); }
.setup-save { margin-top: 26px; }
select.field-input { cursor: pointer; }
.setup-cta { margin-top: 18px; }

/* Skills add + chips */
.skill-add { display: flex; gap: 10px; margin-top: 6px; }
.skill-add .field-input { flex: 1; }
.skill-add .jml-btn { flex-shrink: 0; padding: 12px 22px; }
.skill-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.skill-suggest-chip {
  padding: 7px 14px; border: 1px dashed var(--border-grey); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--white); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.skill-suggest-chip:hover { border-color: var(--lime); color: var(--navy); }
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px; background: var(--navy); color: #fff;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
}
.skill-chip button { display: flex; color: rgba(255,255,255,0.75); }
.skill-chip button:hover { color: #fff; }
.skill-chip button svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .setup-top { padding: 16px 20px; }
  .setup-card { padding: 28px 20px; }
  .setup-title { font-size: 26px; }
}

/* ── Logo lockups on setup/dashboard + pulsing loader ───────── */
.setup-loading, .dash-loading { flex-direction: column; }
.loading-logo { height: 46px; width: auto; margin-bottom: 14px; animation: th-pulse 1.2s ease-in-out infinite; }
@keyframes th-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.setup-logo { display: flex; align-items: center; gap: 10px; }
.setup-logo-img { height: 34px; width: auto; }
.setup-wordmark { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; color: var(--navy); letter-spacing: -0.3px; }

.dash-logo { display: flex; align-items: center; gap: 8px; }
.dash-logo-img { height: 30px; width: auto; }

/* Normalize: hidden attribute always wins */
[hidden] { display: none !important; }

/* Password visibility toggle */
.field-pw { position: relative; }
.field-pw .field-input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  color: var(--text-light);
  transition: color 0.15s ease;
}
.pw-toggle:hover { color: var(--navy); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-eye-off { display: none; }
.pw-toggle.is-visible .pw-eye { display: none; }
.pw-toggle.is-visible .pw-eye-off { display: block; }

/* ── Rate card rows ─────────────────────────────────────────── */
.field-input:disabled { background: var(--surface-grey); color: var(--text-light); cursor: not-allowed; }
.rate-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rate-row { display: flex; align-items: center; gap: 10px; }
.rate-row .rate-service { flex: 1; min-width: 0; }
.rate-price-wrap { position: relative; width: 130px; flex-shrink: 0; }
.rate-naira { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
.rate-price { padding-left: 26px !important; }
.rate-quote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.rate-quote input { accent-color: var(--navy); width: 15px; height: 15px; }
.rate-remove {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  color: var(--text-light); flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.rate-remove svg { width: 16px; height: 16px; }
.rate-remove:hover { color: var(--error); background: var(--surface-grey); }
.rate-add { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--lime-dark); }
.rate-add:hover { color: var(--navy); }

@media (max-width: 600px) {
  .rate-row { flex-wrap: wrap; }
  .rate-row .rate-service { flex-basis: 100%; }
  .rate-price-wrap { flex: 1; width: auto; }
}

/* ── Portfolio upload grid ──────────────────────────────────── */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.photo-grid:empty { display: none; }
.photo-tile {
  position: relative; aspect-ratio: 1;
  background-size: cover; background-position: center;
  border-radius: var(--r-md); border: 1px solid var(--border-grey);
}
.photo-del {
  position: absolute; top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
}
.photo-del svg { width: 14px; height: 14px; }
.photo-del:hover { background: var(--error); }
.photo-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding: 22px;
  border: 1.5px dashed var(--border-grey); border-radius: var(--r-md);
  color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.photo-add:hover { border-color: var(--lime); color: var(--navy); }
.photo-add svg { width: 18px; height: 18px; }

@media (max-width: 600px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Publish actions + directory ────────────────────────────── */
.publish-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dir-head {
  padding: 48px var(--h-pad) 24px; background: var(--white);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dir-filter { display: flex; gap: 10px; flex-wrap: wrap; }
.dir-filter .field-input { width: auto; min-width: 150px; }
.dir-results { padding: 24px var(--h-pad) 80px; background: var(--white); }
.dir-status { color: var(--text-muted); font-size: 15px; padding: 20px 0; }
@media (max-width: 767px) {
  .dir-head { padding: 32px 24px 16px; }
  .dir-results { padding: 16px 24px 56px; }
  .dir-filter { width: 100%; }
  .dir-filter .field-input, .dir-filter .jml-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   ARTISAN PUBLIC PROFILE — premium
   ═══════════════════════════════════════════════════════════════ */
.ap-main { background: var(--navy-surface); min-height: 60vh; padding: 24px var(--h-pad) 72px; }
.ap-status { color: var(--text-muted); font-size: 15px; text-align: center; padding: 60px 0; }
.ap-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 16px; }
.ap-back:hover { color: var(--lime-dark); }

/* Hero banner */
.ap-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); color: #fff;
  padding: 36px 36px 30px;
  background:
    radial-gradient(700px 320px at 85% -30%, rgba(154,201,0,0.20), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: 0 24px 60px rgba(0,30,103,0.28);
}
.ap-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.6; pointer-events: none;
}
.ap-hero-top { position: relative; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ap-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--lime); color: var(--navy);
  font-size: 32px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
}
.ap-id { flex: 1; min-width: 200px; }
.ap-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-name { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 900; color: #fff; letter-spacing: -0.6px; }
.ap-hero .artisan-badge { position: static; background: rgba(154,201,0,0.2); color: var(--lime); }
.ap-trade { margin-top: 4px; font-size: 15px; color: rgba(255,255,255,0.82); }
.ap-metrics { margin-top: 14px; display: flex; gap: 22px; flex-wrap: wrap; }
.ap-metric { font-size: 14px; color: rgba(255,255,255,0.8); display: inline-flex; align-items: center; gap: 6px; }
.ap-metric strong { color: #fff; font-weight: 700; }
.ap-metric svg { width: 15px; height: 15px; color: var(--lime); }
.ap-actions { position: relative; width: 210px; flex-shrink: 0; }
@media (max-width: 640px) {
  .ap-actions { width: 100%; }
  .ap-hero-top { justify-content: center; text-align: center; }
  .ap-id { text-align: center; }
  .ap-name-row, .ap-metrics { justify-content: center; }
}

/* Body grid */
.ap-grid { margin-top: 20px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.ap-col { min-width: 0; }
.ap-block { background: #fff; border: 1px solid var(--border-grey); border-radius: var(--r-lg); padding: 24px; margin-bottom: 20px; }
.ap-block-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.ap-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-skill { padding: 8px 14px; background: var(--navy-surface); border: 1px solid var(--border-grey); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--navy); }
.ap-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ap-photo { aspect-ratio: 1; border-radius: var(--r-md); background-size: cover; background-position: center; border: 1px solid var(--border-grey); transition: transform 0.2s ease; }
.ap-photo:hover { transform: scale(1.03); }
.ap-ratecard { position: sticky; top: 88px; }
.ap-rates { display: flex; flex-direction: column; }
.ap-rate { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-grey); font-size: 14px; }
.ap-rate:last-child { border-bottom: none; }
.ap-rate span { color: var(--text-body); }
.ap-rate strong { color: var(--navy); }
.ap-request { max-width: 640px; }

@media (max-width: 860px) { .ap-grid { grid-template-columns: 1fr; } .ap-ratecard { position: static; } }
@media (max-width: 767px) { .ap-main { padding: 16px 20px 56px; } .ap-hero { padding: 28px 22px; } .ap-photos { grid-template-columns: repeat(2, 1fr); } }

/* ── Quote request form + inbox ─────────────────────────────── */
.ap-request { max-width: 640px; }
textarea.field-input { resize: vertical; font-family: inherit; }
.quote-item { padding: 16px 0; border-bottom: 1px solid var(--border-grey); }
.quote-item:last-child { border-bottom: none; padding-bottom: 0; }
.quote-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote-top strong { font-size: 15px; color: var(--navy); }
.quote-top span { font-size: 13px; color: var(--text-muted); }
.quote-details { margin-top: 6px; font-size: 14px; color: var(--text-body); }
.quote-meta { margin-top: 6px; font-size: 12px; color: var(--text-light); }

/* ── Quote reply (send quote back) ──────────────────────────── */
.quote-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-grey); color: var(--text-muted); }
.quote-badge.quoted { background: #ECFDF5; color: var(--success); }
.quote-sent { margin-top: 8px; font-size: 13px; color: var(--navy); background: var(--lime-surface); padding: 8px 12px; border-radius: var(--r-md); }
.quote-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.quote-actions .jml-btn { padding: 8px 16px; font-size: 13px; }
.quote-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.quote-form .quote-save { align-self: flex-start; padding: 8px 16px; font-size: 13px; }
.quote-note { font-size: 12px; color: var(--success); }
.quote-note.error { color: var(--error); }

/* Field hints */
.field-hint { margin-top: 6px; font-size: 12px; color: var(--text-light); }
.field-opt { color: var(--text-light); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════
   DIRECTORY — premium hero + cards
   ═══════════════════════════════════════════════════════════════ */
.dir-head {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 88% -30%, rgba(154,201,0,0.18), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 52px var(--h-pad);
}
.dir-head::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.6; pointer-events: none;
}
.dir-head .section-header, .dir-filter { position: relative; z-index: 1; }
.dir-head .sh-heading { color: #fff; }
.dir-head .sh-label { color: var(--lime); }
.dir-head .sh-dash { background: var(--lime); }
.dir-filter { margin-top: 22px; }
.dir-filter .field-input { background: #fff; }
.dir-filter .jml-btn--navy { background: var(--lime); color: var(--navy); }
.dir-filter .jml-btn--navy:hover { background: var(--lime-dark); box-shadow: var(--shadow-lime); }

.dir-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dir-count { font-size: 14px; font-weight: 700; color: var(--navy); }
.dir-sort {
  padding: 8px 14px; border: 1px solid var(--border-grey); border-radius: var(--r-md);
  background: #fff; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer;
}

/* Card extras */
.artisan-mini-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.artisan-mini-skill { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface-grey); border: 1px solid var(--border-grey); padding: 4px 10px; border-radius: var(--r-pill); }
.artisan-view { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--lime-dark); }
.artisan-card:hover .artisan-view { color: var(--navy); }

/* ── Setup wizard stepper ───────────────────────────────────── */
.wizard-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.wizard-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-light); }
.ws-num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-grey); border: 1px solid var(--border-grey);
  color: var(--text-muted); font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.wizard-step.active { color: var(--navy); }
.wizard-step.active .ws-num { background: var(--navy); color: #fff; border-color: var(--navy); }
.wizard-step.done { color: var(--navy); }
.wizard-step.done .ws-num { background: var(--lime); color: var(--navy); border-color: var(--lime); }
.ws-bar { flex: 1; height: 2px; background: var(--border-grey); border-radius: 1px; max-width: 40px; }
@media (max-width: 480px) {
  .wizard-step span:not(.ws-num) { display: none; }
  .ws-bar { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — premium polish (style only)
   ═══════════════════════════════════════════════════════════════ */
.dash-main { background: var(--navy-surface); }
.dash-side { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%); }

.dash-topbar {
  background: #fff; border: 1px solid var(--border-grey);
  border-radius: var(--r-xl); padding: 22px 26px; margin-bottom: 4px;
  box-shadow: var(--shadow-card);
}
.dash-hello { font-size: 30px; }

.dash-stat {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card); border-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dash-stat::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--lime);
}
.dash-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,30,103,0.10); }

.dash-card { box-shadow: var(--shadow-card); border-color: transparent; }
.dash-card-title { font-size: 18px; }

/* Publish "live" card gets a lime edge */
#publish-card { border-left: 4px solid var(--lime); }

.quote-item { padding: 18px; border: 1px solid var(--border-grey); border-radius: var(--r-lg); margin-bottom: 12px; }
.quote-item:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   QUOTE-BACK CTAs  —  append to the END of css/style.css
   New classes only; nothing existing is redefined.
   ═══════════════════════════════════════════════════════════════ */

/* Row holding the WhatsApp / Call / Send-quote actions */
.quote-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* Shared pill for the two contact CTAs */
.quote-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.quote-cta svg { width: 17px; height: 17px; }

/* WhatsApp — the hero action. Brand green with a soft green glow. */
.quote-cta--whatsapp {
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32);
}
.quote-cta--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.42);
}

/* Call — navy companion */
.quote-cta--call {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-navy);
}
.quote-cta--call:hover {
  transform: translateY(-2px);
  background: var(--navy-mid);
}

/* Delete — quiet icon button, pushed to the right, reddens on hover */
.quote-delete {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  color: var(--text-light);
  background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.quote-delete svg { width: 17px; height: 17px; }
.quote-delete:hover {
  color: var(--error);
  background: #FEF2F2;
  border-color: #FECACA;
}
.quote-delete:disabled { opacity: .5; cursor: default; }

/* Small muted line showing the raw numbers under the client's request */
.quote-contact-info {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.quote-contact-info span { display: inline-flex; align-items: center; gap: 5px; }
.quote-contact-info svg { width: 14px; height: 14px; opacity: .8; }

/* "View all N requests →" link under the capped dashboard list */
.quote-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lime-dark);
}
.quote-viewall:hover { color: var(--navy); }

/* "Quoted" state on the status badge (base .quote-badge already exists) */
.quote-badge.quoted {
  background: var(--lime-surface);
  color: var(--lime-dark);
}
/* ── Artisan dashboard: single-page views (IndexedStack) ── */
.dash-view[hidden] { display: none !important; }

/* ── My-profile view ── */
.pf-head { display:flex; align-items:center; gap:14px; }
.pf-avatar {
  width:52px; height:52px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:900; font-size:20px; flex-shrink:0;
}
.pf-listing { display:flex; flex-direction:column; gap:10px; }
.pf-list-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px solid var(--border-grey); border-radius:var(--r-md);
  transition:border-color .15s ease, background .15s ease;
}
.pf-list-row:hover { border-color:var(--lime); background:var(--surface-grey); }
.pf-list-label { font-size:14px; font-weight:600; color:var(--navy); }
.pf-list-meta { font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:10px; }
.pf-list-arrow { color:var(--lime-dark); font-weight:700; }

/* ── Reusable pager (paginate.js) ── */
.pgn-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.pgn-btn {
  padding:9px 18px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:700;
  background:var(--white); color:var(--navy); border:1px solid var(--border-grey); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.pgn-btn:hover:not(:disabled) { border-color:var(--lime); background:var(--surface-grey); }
.pgn-btn:disabled { opacity:.45; cursor:default; }
.pgn-info { font-size:13px; font-weight:600; color:var(--text-muted); }

/* ── Compact quote card (dashboard preview) + View toggle ── */
.quote-item--compact { padding: 14px 16px; }
.quote-item--compact .quote-details { margin-top: 4px; }
.quote-item--compact .quote-contact { margin-top: 10px; }
.quote-item--compact .quote-cta,
.quote-item--compact .quote-reply-btn { padding: 9px 14px; font-size: 13px; }
.quote-view {
  background: none; border: none; padding: 0;
  color: var(--lime-dark); font-weight: 700; font-size: 13px; cursor: pointer;
}
.quote-view:hover { text-decoration: underline; }

/* ── Dashboard mobile drawer (Step 6) ── */
.dash-topbar-mobile, .dash-drawer-overlay { display: none; }

@media (max-width: 860px) {
  .dash { flex-direction: row; }
  .dash-topbar-mobile {
    display: flex; align-items: center; gap: 14px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: 60px; padding: 0 18px;
    background: var(--navy);
  }
  .dash-burger { color: #fff; display: flex; padding: 4px; }
  .dash-burger svg { width: 26px; height: 26px; }

  .dash-side {
    position: fixed; top: 0; left: 0; height: 100vh;
    width: 264px; max-width: 82vw;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    padding: 24px 16px; gap: 4px;
    transform: translateX(-100%); transition: transform .28s ease;
    z-index: 1200;
  }
  .dash.drawer-open .dash-side { transform: translateX(0); }
  .dash-nav { flex-direction: column; }
  .dash-link { padding: 11px 12px; }

  .dash-drawer-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
    z-index: 1100;
  }
  .dash.drawer-open .dash-drawer-overlay { opacity: 1; visibility: visible; }

  .dash-main { padding-top: 76px; }   /* clear the fixed top bar */
}

/* Rate card editor fills its container (Correction #7) */
.rate-editor { max-width: 100%; }

/* Profile photo control + bio extras (Correction #6) */
.pf-photo-row { display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.pf-photo-prev {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:900; font-size:22px;
}
.pf-photo-btn { cursor:pointer; padding:9px 16px; font-size:13px; }
.pf-avail { display:flex; gap:8px; margin-top:4px; }
.pf-av-chip {
  padding:9px 16px; border:1px solid var(--border-grey); border-radius:var(--r-pill);
  font-size:13px; font-weight:600; color:var(--text-body); background:var(--white); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.pf-av-chip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.ap-headline { margin-top:6px; font-size:15px; font-weight:600; color:rgba(255,255,255,0.92); }
.ap-avail-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); background:rgba(154,201,0,0.2); color:var(--lime); }
.ap-avail-badge.busy { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); }

/* Completion flow (Correction #3) */
.quote-badge.done { background:#ECFDF5; color:var(--success); }
.quote-done-tag { font-size:13px; font-weight:700; color:var(--success); display:inline-flex; align-items:center; }
.quote-pending-tag { font-size:12.5px; font-weight:600; color:var(--warning); align-self:center; }

/* Client confirmation page */
.confirm-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.confirm-card { width:100%; max-width:440px; background:#fff; border:1px solid var(--border-grey); border-radius:var(--r-xl); padding:36px; text-align:center; box-shadow:var(--shadow-card); }
.confirm-logo { height:42px; width:auto; margin:0 auto 18px; }
.confirm-job { text-align:left; background:var(--surface-grey); border-radius:var(--r-md); padding:16px; margin:18px 0; }
.confirm-check { width:64px; height:64px; border-radius:50%; background:#ECFDF5; color:var(--success); display:flex; align-items:center; justify-content:center; font-size:34px; margin:0 auto 16px; }

/* Reviews (Correction #2) */
.confirm-stars { display:flex; justify-content:center; gap:6px; margin:6px 0 14px; }
.confirm-star { font-size:34px; line-height:1; color:var(--lime); background:none; border:none; cursor:pointer; padding:0; }
.confirm-star.on { color:var(--lime-dark); }
.confirm-skip { display:block; width:100%; margin-top:10px; background:none; border:none; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; }
.ap-review-summary { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ap-review-avg { font-family:'Fraunces',serif; font-weight:900; font-size:34px; color:var(--navy); line-height:1; }
.ap-review-stars { color:var(--lime); letter-spacing:2px; }
.ap-review-stars.big { font-size:20px; }
.ap-review { padding:14px 0; border-bottom:1px solid var(--border-grey); }
.ap-review:last-child { border-bottom:none; padding-bottom:0; }
.ap-review-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ap-review-head strong { color:var(--navy); font-size:14px; }
.ap-review-text { margin-top:6px; font-size:14px; color:var(--text-body); }

/* Portfolio grid fills width + clickable tiles (correction Step 1) */
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.photo-tile { cursor: zoom-in; }

/* Reusable image viewer (lightbox.js) */
.lb-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.88); display:none; align-items:center; justify-content:center; z-index:3000; padding:24px; }
.lb-overlay.open { display:flex; }
.lb-img { max-width:92vw; max-height:88vh; border-radius:var(--r-md); box-shadow:0 24px 70px rgba(0,0,0,0.5); }
.lb-close { position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.14); color:#fff; font-size:28px; line-height:1; cursor:pointer; border:none; display:flex; align-items:center; justify-content:center; }
.lb-close:hover { background:rgba(255,255,255,0.26); }

/* Lightbox gallery nav */
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.14); color:#fff; font-size:30px; line-height:1; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-nav:hover { background:rgba(255,255,255,0.26); }
.lb-prev { left:18px; } .lb-next { right:18px; }
.lb-counter { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.85); font-size:13px; font-weight:600; }
@media (max-width:600px){ .lb-nav{ width:40px; height:40px; font-size:24px; } .lb-prev{left:8px;} .lb-next{right:8px;} }

/* Profile details: full-width, two-column form (Step 2) */
.pf-form { display:grid; grid-template-columns:1fr 1fr; gap:2px 22px; }
.pf-field { display:flex; flex-direction:column; min-width:0; }
.pf-field--full { grid-column:1 / -1; }
.pf-form .field-label { margin-top:14px; }
@media (max-width:760px){ .pf-form { grid-template-columns:1fr; } }

/* Larger, clickable profile avatar */
.pf-photo-prev { width:84px; height:84px; font-size:28px; }

/* Public profile: full-span sections + clickable photos + fill width */
.ap-span { grid-column: 1 / -1; }
.ap-photos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ap-photo { cursor: zoom-in; }

/* Public profile — 2-col (Skills+Rate left · Recent work right) + full-width form */
.ap-grid { grid-template-columns: 1fr 1fr; align-items: start; }
.ap-col { display: flex; flex-direction: column; }
.ap-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ap-photo { cursor: zoom-in; }
.ap-request { max-width: 100%; }
.ap-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
.ap-req-grid .field-label { margin-top: 12px; }
@media (max-width: 860px) { .ap-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ap-req-grid { grid-template-columns: 1fr; } }

/* ═══ 1 · NOTIFICATIONS — unread badge ═══════════════════════ */
.dash-nav-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--lime); color: var(--navy);
  font-size: 11px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* On the active (lime) link a lime pill would vanish — invert it. */
.dash-link.active .dash-nav-badge { background: var(--navy); color: #fff; }

/* Unread quote — a lime edge, not a second badge. The card already
   carries a status pill; two competing markers read as noise. */
.quote-item--unread { border-left: 3px solid var(--lime); padding-left: 15px; }
.quote-item--compact.quote-item--unread { padding-left: 12px; }

.rq-wa { display: inline-flex; margin-top: 14px; }


/* ═══ 2 · MY ROLES ═══════════════════════════════════════════ */
.role-rows { display: flex; flex-direction: column; gap: 10px; }

.role-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  background: #fff;
}
.role-row.is-held { border-left: 3px solid var(--lime); }

.role-row-main { flex: 1; min-width: 0; }
.role-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-row-head strong { color: var(--navy); font-size: 15px; }
.role-row-desc { margin: 4px 0 0; font-size: 13px; }
.role-row-action { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.role-row-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-grey); color: var(--text-muted);
}
.role-row-tag.is-active { background: var(--lime); color: var(--navy); }
.role-row-tag.is-soon   { background: #FEF3C7; color: #92400E; }

.role-remove {
  background: none; border: none; padding: 4px 2px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; text-decoration: underline;
}
.role-remove:hover:not([disabled]) { color: #B42318; }
.role-remove[disabled] { opacity: .4; cursor: not-allowed; text-decoration: none; }


/* ═══ 3 · ACCOUNT · DEACTIVATED · DANGER ZONE ════════════════ */
.deactivated-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; width: 100%;
  background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A;
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.deactivated-bar a { color: #92400E; text-decoration: underline; white-space: nowrap; }

.danger-zone { border-color: #FECDCA; background: #FFFBFA; }
.danger-zone .dash-card-title { color: #B42318; }
.danger-list { margin: 0 0 14px; padding-left: 20px; font-size: 14px; color: var(--text-body); }
.danger-list li { margin-bottom: 4px; }

.jml-btn--danger { background: #B42318; color: #fff; border: 1px solid #B42318; }
.jml-btn--danger:hover:not([disabled]) { background: #912018; border-color: #912018; }
.jml-btn--danger[disabled] { opacity: .45; cursor: not-allowed; }

.danger-confirm { margin-top: 18px; padding-top: 18px; border-top: 1px solid #FECDCA; }
.danger-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Registration number chip beside the verify badge */
.dash-regno {
  margin-left: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--text-muted); background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  padding: 4px 10px; border-radius: var(--r-pill);
  white-space: nowrap;
}


/* ═══ 4 · FIX · naira sign sat under the typed price ═════════
   .rate-naira is absolutely positioned at left:12px, but the input
   kept its normal left padding — so digits began where the ₦ was.
   An absolutely positioned prefix reserves NO space; you make room
   for it yourself. */
.rate-price-wrap { position: relative; }
.rate-price-wrap .field-input { padding-left: 30px; }


/* ═══ 5 · FIX · sign out was below the fold in the drawer ════
   .dash-side is height:100vh with no overflow. My roles + Account
   pushed Sign out past the bottom edge with nothing to scroll.
   Making the NAV the scroll region keeps Sign out pinned.

   min-height:0 is the load-bearing line. A flex item defaults to
   min-height:auto, which refuses to shrink below its content — so
   overflow-y:auto alone does nothing. Whenever a scroll area inside
   a flex column won't scroll, this is why. */
.dash-side { overflow: hidden; }
.dash-nav  { overflow-y: auto; min-height: 0; }


/* ═══ 6 · CENTRED PAGE LOADER (JML pulsing logo) ═════════════
   .load-inline is used on three pages and was never defined, so
   every loader rendered as left-aligned text. */
.load-inline {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; width: 100%;
  min-height: 240px; padding: 48px 20px;
  text-align: center;
  color: var(--text-muted); font-size: 14px;
}
.load-inline .loading-logo { height: 46px; width: auto; margin: 0 0 14px; }
.load-inline[hidden] { display: none !important; }


/* ═══ 7 · DIRECTORY CARD — photo, jobs done ══════════════════ */
.artisan-avatar {
  width: 76px; height: 76px;          /* was 54 — a face needs room */
  font-size: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.artisan-avatar.has-photo { background: var(--surface-grey); padding: 0; }
.artisan-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.artisan-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.artisan-jobs {
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-grey);
  padding: 3px 10px; border-radius: var(--r-pill);
}
.artisan-foot { margin-top: 14px; }


/* ═══ 8 · AUTH-AWARE PUBLIC HEADER ══════════════════════════ */
/* Reserve the space so the header never jumps while auth resolves. */
.nav-actions { min-width: 44px; }
@media (min-width: 1024px) { .nav-actions { min-width: 180px; justify-content: flex-end; } }

.nav-user { position: relative; }
.nav-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--lime);
  background: var(--navy); color: #fff;
  padding: 0; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar .av-fallback { display: none; }
.nav-avatar .av-fallback.only,
.nav-avatar.is-fallback .av-fallback { display: flex; align-items: center; justify-content: center; }

.nav-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 240px; z-index: 1000;
  background: #fff; border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0,30,103,0.16);
  padding: 8px; overflow: hidden;
}
.nav-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border-grey); margin-bottom: 6px; }
.nav-menu-name  { display: block; font-weight: 700; color: var(--navy); font-size: 14px; }
.nav-menu-email { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; color: var(--text-body);
  background: none; border: none; cursor: pointer; text-decoration: none;
}
.nav-menu-item:hover { background: var(--surface-grey); color: var(--navy); }
.nav-menu-signout { color: #B42318; margin-top: 4px; border-top: 1px solid var(--border-grey); border-radius: 0; }
.nav-menu-signout:hover { background: #FEF2F2; color: #B42318; }

.drawer-divider { height: 1px; background: var(--border-grey); margin: 12px 0; }
#drawerSignout { color: #B42318 !important; }


/* ═══ 9 · GOOGLE SIGN-IN BUTTON ═════════════════════════════ */
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; margin-bottom: 4px;
  background: #fff; border: 1px solid var(--border-grey); border-radius: var(--r-pill);
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-body);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.auth-google:hover { background: var(--surface-grey); border-color: var(--text-muted); }
.auth-google:disabled { opacity: .6; cursor: not-allowed; }
.auth-google svg { width: 18px; height: 18px; }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border-grey); }

.gc-card { max-width: 420px; }


/* ═══ 10 · USERNAME · GENDER · REMOVE PHOTO ═════════════════ */
.pf-uname { display: flex; align-items: stretch; }
.pf-uname-pre {
  display: flex; align-items: center;
  padding: 0 10px;
  background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
}
.pf-uname .field-input { border-radius: 0 var(--r-md) var(--r-md) 0; min-width: 0; flex: 1; }

.pf-check {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 13.5px; color: var(--text-body);
  cursor: pointer;
}
.pf-check input { width: 16px; height: 16px; accent-color: var(--lime); flex-shrink: 0; }

/* Remove photo — quiet, so it is never mistaken for the main action */
.pf-photo-del {
  display: block; margin-top: 8px;
  background: none; border: none; padding: 2px 0;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-decoration: underline; cursor: pointer;
}
.pf-photo-del:hover:not([disabled]) { color: #B42318; }
.pf-photo-del[disabled] { opacity: .5; cursor: not-allowed; }


/* ═══ 11 · SHAREABLE LINK BLOCK ═════════════════════════════
   (this section never made it into your file — the share card was
   rendering unstyled) */
.pf-share {
  margin-top: 18px; padding: 16px;
  background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
}
.pf-share--empty { background: #fff; }

.pf-share-label {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
/* break-all so a long handle can never blow the card open on a phone */
.pf-share-url {
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: 14px; font-weight: 600; color: var(--navy);
  word-break: break-all; user-select: all;
}
.pf-share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-share-actions .jml-btn { flex: 0 0 auto; }

.jml-btn--wa { background: var(--whatsapp); color: #fff; border: 1px solid var(--whatsapp); }
.jml-btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; }


/* ── DESKTOP / TABLET (≥768px): three columns, one row ─────────

   GRID, not flex. Flex decides for ITSELF when to wrap: the moment
   the heading beside it grew, .dir-filter ran out of room and pushed
   "Area" onto a second line. A grid with three declared tracks
   cannot wrap — there is no fourth track for anything to fall into.
   When you want an exact arrangement, say so with a grid; when you
   want "fit what you can", use flex-wrap. Here you want the former.

   .dir-filter is ALSO a flex child of .dir-head (which is
   justify-content: space-between). Without a flex-basis it shrinks
   to its content width and the heading eats the rest — so it is a
   grid container and a flex item at the same time. Those two roles
   never conflict: `display` controls its CHILDREN, `flex` controls
   how IT behaves inside ITS parent.                                */

@media (min-width: 768px) {
  .dir-filter {
    display: grid;
    grid-template-columns: minmax(210px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr);
    gap: 10px;

    flex: 1 1 560px;     /* claim real width inside .dir-head */
    max-width: 700px;    /* but never crowd the heading on wide screens */
  }

  /* min-width:0 lets a grid track actually shrink to its share.
     Without it an input's intrinsic width becomes the floor and the
     grid quietly overflows its container instead of fitting.
     Same trap as flex items — both axes default to "never smaller
     than my content". */
  .dir-filter .field-input { width: 100%; min-width: 0; }

  /* The search box is widest by intent — it is the primary input.
     Handled by the 1.5fr track above, so no per-ID rule is needed
     and #filter-name carries NO flex/basis of its own any more.
     That is what caused the 240px-tall box on mobile. */
}


/* ── MOBILE (≤767px): one field per row ────────────────────────
   Three inputs on a 414px phone is 138px each before padding.
   Stacking is not a compromise here, it is the correct layout.

   Note this stays FLEX-column, and #filter-name is explicitly reset:
   an ID selector outranks .dir-filter .field-input, so if it kept a
   flex-basis it would be read as HEIGHT in a column container. */
@media (max-width: 767px) {
  .dir-filter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }
  .dir-filter .field-input,
  .dir-filter .jml-btn { width: 100%; flex: 0 0 auto; min-width: 0; }
  #filter-name { flex: 0 0 auto; min-width: 0; }
}

/* Paginated grid.
   paginate.js replaces #artisan-grid's contents with .pgn-items +
   .pgn-controls, so the GRID moves down one level — otherwise the
   Prev/Next buttons become grid cells beside a card.

   auto-fill + minmax replaces fixed 4/2/1 breakpoints: the browser
   fits as many 250px columns as there is room for and reflows at
   every width, including ones we never tested. */
#artisan-grid { display: block; margin-top: 32px; }

#artisan-grid .pgn-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
@media (max-width: 560px) {
  #artisan-grid .pgn-items { grid-template-columns: 1fr; }
}
.pgn-controls { margin-top: 28px; }


/* ═══ 13 · NARROW PHONES (Fold outer screen is 344px) ═══════
   ⚠️ padding-left/right ONLY — never the `padding` shorthand.
   A previous version used `padding: 20px 14px`, which silently reset
   padding-top to 20px and cancelled the `padding-top: 76px` that
   clears the fixed mobile topbar. That is why every page header was
   hiding behind the navy bar. A shorthand always resets the sides
   you did not mention. */
@media (max-width: 480px) {
  .dash-main { padding-left: 14px; padding-right: 14px; padding-bottom: 24px; }

  .deactivated-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .danger-actions { flex-direction: column; }
  .danger-actions .jml-btn { width: 100%; }
  .danger-list { padding-left: 18px; font-size: 13px; }

  .pf-share-actions { flex-direction: column; }
  .pf-share-actions .jml-btn { width: 100%; }
  .pf-uname-pre { font-size: 12px; padding: 0 8px; }
}

@media (max-width: 560px) {
  .role-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .role-row-action { justify-content: space-between; }
  .role-row-action .jml-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   APPEND to style.css — two small fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX · huge gap between the nav links and the avatar ───────
   .nav-actions reserves 180px so the header does not JUMP while
   Firebase resolves auth (the signed-out buttons are that wide).
   Once we know the person is signed in, the avatar is only 40px —
   so the reservation has done its job and must be released, or it
   sits there as 140px of dead space.

   auth-session.js sets data-session="in" on the element, so the
   attribute selector outranks the plain class rule. Reserve while
   uncertain; release the moment you know. */
.nav-actions[data-session="in"] { min-width: 0; margin-left: 22px; }

/* Mobile dashboard wordmark is now a link — keep it looking the same */
.dash-mobile-home { color: #fff; text-decoration: none; }
.dash-mobile-home:hover { opacity: .85; }

/* ═══ TALENTHUB · EMPLOYER — JOBS (Step 2.2) ═══════════════════
   Append to the END of /css/style.css. Nothing above is touched.
   Tokens only — no raw hex except the three status colours, which
   are semantic (draft / open / closed) and belong here rather than
   in brand tokens.
   ═══════════════════════════════════════════════════════════════ */

.job-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.job-head .dash-card-title { margin: 0; }

.job-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 860px) { .job-list { grid-template-columns: 1fr; } }

.job-card {
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
  padding: 18px 20px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.job-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.job-card-title { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.35; }
.job-card-meta { font-size: 13px; color: var(--text-muted); margin: 0; }

.job-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.job-pill--draft  { background: #EFF1F5; color: #5A6478; }
.job-pill--open   { background: #E8F5D6; color: #4A6B00; }
.job-pill--closed { background: #FBE9E9; color: #A33A3A; }

.job-card-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.job-card-actions .jml-btn { padding: 8px 16px; font-size: 13px; }

.job-form {
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
  padding: 20px;
  margin-top: 18px;
  background: var(--surface-grey, #F7F8FA);
}
.job-form-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 600px) { .job-form-actions .jml-btn { flex: 1 1 100%; } }

/* ═══════════════════════════════════════════════════════════════
   REPORT ACCOUNT — append to style.css
   ═══════════════════════════════════════════════════════════════ */

/* Quiet link low on the public profile */
.ap-report-row { text-align: center; margin-top: 26px; }
.ap-report-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 6px 10px; border-radius: var(--r-md);
  transition: color .15s ease, background .15s ease;
}
.ap-report-link svg { width: 15px; height: 15px; }
.ap-report-link:hover { color: #B42318; background: #FEF2F2; }

/* Modal */
.rep-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rep-card {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-xl);
  padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.rep-close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-muted);
}
.rep-close:hover { background: var(--surface-grey); color: var(--navy); }
.rep-title { font-family: 'Fraunces', serif; font-size: 21px; color: var(--navy); margin-bottom: 6px; }
.rep-sub { font-size: 13.5px; color: var(--text-body); line-height: 1.5; margin-bottom: 16px; }

.rep-reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.rep-reason {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; color: var(--text-body); cursor: pointer;
  transition: background .12s ease;
}
.rep-reason:hover { background: var(--surface-grey); }
.rep-reason input { width: 16px; height: 16px; accent-color: #B42318; flex-shrink: 0; }

.rep-done { text-align: center; padding: 8px 0; }
.rep-check {
  width: 60px; height: 60px; border-radius: 50%;
  background: #ECFDF5; color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin: 4px auto 14px;
}

/* ═══ TALENTHUB · PROFESSIONAL PROFILE (Step 3.1) ══════════════
   Append to the END of /css/style.css. Small — the professional
   dashboard reuses every class the employer and artisan dashboards
   already defined. This is only the CV-status line.
   ═══════════════════════════════════════════════════════════════ */

.pr-cv-have {
  font-size: 13px; color: var(--text-muted); margin: 0 0 10px;
  padding: 10px 12px; background: var(--navy-surface, #F1F4FB);
  border-radius: var(--r-md, 10px);
}
.pr-cv-have a { color: var(--navy); font-weight: 600; }

/* ═══ TALENTHUB · MY APPLICATIONS (Step 3.2) ═══════════════════
   Append to the END of /css/style.css. Reuses .apps-pill--* from
   Step 2.4 — the same status, the same colour, both sides of the
   table. One visual language for one fact.
   ═══════════════════════════════════════════════════════════════ */

.ma-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

.ma-card {
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md, 10px);
  padding: 18px 20px;
  background: var(--white);
}
.ma-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ma-title { font-size: 17px; font-weight: 700; color: var(--navy); text-decoration: none; line-height: 1.3; }
.ma-title:hover { text-decoration: underline; }
.ma-when { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.ma-note { font-size: 14px; line-height: 1.65; color: var(--text-body, #303A4E); margin: 12px 0 0; }
.ma-cv { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--navy); }

/* ═══ TALENTHUB · APPLICATIONS INBOX (Step 2.4) ════════════════
   Append to the END of /css/style.css.
   ═══════════════════════════════════════════════════════════════ */

.apps-filters { display: flex; gap: 12px; margin: 16px 0 4px; flex-wrap: wrap; }
.apps-filters .field-input { max-width: 240px; }
@media (max-width: 600px) { .apps-filters .field-input { max-width: none; flex: 1 1 100%; } }

/* Horizontal scroll container — the table keeps its width, the wrapper
   owns the viewport. This is the whole reason employers need the web. */
.apps-table-wrap { overflow-x: auto; margin-top: 16px; -webkit-overflow-scrolling: touch; }
.apps-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.apps-table th {
  text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-light); padding: 10px 14px;
  border-bottom: 1px solid var(--border-grey); white-space: nowrap;
}
.apps-table td { padding: 14px; border-bottom: 1px solid var(--border-grey); vertical-align: middle; }
.apps-row:hover { background: var(--navy-surface, #F1F4FB); }

.apps-name { display: flex; flex-direction: column; gap: 2px; }
.apps-name-main { font-weight: 700; color: var(--navy); }
.apps-name-sub  { font-size: 12px; color: var(--text-muted); }
.apps-when { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.apps-cv-link { font-weight: 600; color: var(--navy); text-decoration: none; }
.apps-cv-link:hover { text-decoration: underline; }
.apps-cv-none { font-size: 13px; color: var(--text-light); }
.apps-open .jml-btn { padding: 6px 16px; font-size: 13px; }

.apps-pill {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.apps-pill--applied     { background: var(--navy-surface, #F1F4FB); color: var(--navy); }
.apps-pill--shortlisted { background: #FFF3D6; color: #8A6A00; }
.apps-pill--hired       { background: #E8F5D6; color: #4A6B00; }
.apps-pill--rejected    { background: #FBE9E9; color: #A33A3A; }

/* ── Detail drawer (slides in from the right) ─────────────────── */
.apps-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,30,103,0.30);
  z-index: 60; animation: apps-fade .16s ease;
}
@keyframes apps-fade { from { opacity: 0; } to { opacity: 1; } }

.apps-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--white); z-index: 61; padding: 26px 26px 40px;
  overflow-y: auto; box-shadow: -12px 0 40px rgba(0,30,103,0.16);
  animation: apps-slide .2s ease;
}
@keyframes apps-slide { from { transform: translateX(24px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }

.apps-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.apps-drawer-name { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.25; }
.apps-drawer-role { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.apps-drawer-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 4px; }

.apps-contact { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }

.apps-facts { margin: 18px 0; display: grid; grid-template-columns: 90px 1fr; gap: 8px 14px; }
.apps-facts dt { font-size: 13px; font-weight: 700; color: var(--text-light); }
.apps-facts dd { font-size: 14px; color: var(--navy); margin: 0; word-break: break-word; }
.apps-facts a  { color: var(--navy); }

.apps-note { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--border-grey); }
.apps-note-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin: 0 0 8px; }
.apps-note p { font-size: 14px; line-height: 1.7; color: var(--text-body, #303A4E); margin: 0; }

.apps-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.apps-actions .jml-btn { width: 100%; }

/* ── Screen & hire overview glance (front door to the inbox) ──── */
.dash-card-link { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.dash-card-link:hover { text-decoration: underline; }

.apps-glance-lead { font-size: 14px; color: var(--text-body, #303A4E); margin: 14px 0 4px; }
.apps-glance-lead strong { color: var(--navy); }

.apps-glance-list { display: flex; flex-direction: column; margin: 14px 0 4px; }
.apps-glance-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-grey);
}
.apps-glance-row:last-child { border-bottom: none; }
.apps-glance-name { font-weight: 700; color: var(--navy); display: block; }
.apps-glance-role { font-size: 12px; color: var(--text-muted); display: block; }

/* ═══ TALENTHUB · PUBLIC JOB BOARD (Step 2.3) ══════════════════
   Append to the END of /css/style.css.
   ═══════════════════════════════════════════════════════════════ */

/* Columns pinned to divisors of PAGE_SIZE (12): 4 / 3 / 2 / 1. auto-fill
   was wrong here — on a wide monitor it makes 5 columns, and 12 does not
   divide by 5, so the last page-row orphans a pair of cards. Fixed
   breakpoints keep every row full at every width, which is the whole
   reason PAGE_SIZE is 12. Same principle as artisans.js. */
.jb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1180px) { .jb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .jb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .jb-grid { grid-template-columns: 1fr; } }

.jb-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg, 14px);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-width: 0;
}
.jb-card:hover { transform: translateY(-2px); border-color: var(--navy); box-shadow: 0 10px 26px rgba(0,30,103,0.10); }

.jb-title   { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.32; }
.jb-company { font-size: 14px; font-weight: 600; color: var(--text-muted); margin: 0; }
.jb-pay     { font-size: 14px; font-weight: 700; color: var(--navy); margin: 0; }
.jb-posted  { font-size: 12px; color: var(--text-light); margin: 0; }

.jb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-tag {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--navy-surface, #F1F4FB); color: var(--navy);
  white-space: nowrap;
}

/* ── Detail page ───────────────────────────────────────────── */
.job-detail-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px; align-items: start;
  max-width: 1180px; margin: 0 auto; padding: 48px 24px 72px;
}
@media (max-width: 900px) { .job-detail-wrap { grid-template-columns: 1fr; padding: 32px 18px 56px; } }

.jd-card, .jd-apply {
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg, 14px);
  padding: 30px 32px;
  min-width: 0;
}
@media (max-width: 900px) { .jd-card, .jd-apply { padding: 24px 20px; } }
.jd-apply { position: sticky; top: 96px; }
@media (max-width: 900px) { .jd-apply { position: static; } }

.jd-title    { font-size: 30px; font-weight: 700; color: var(--navy); margin: 0 0 4px; line-height: 1.2; }
.jd-company  { font-size: 16px; font-weight: 600; color: var(--text-muted); margin: 0 0 14px; }
.jd-pay      { font-size: 17px; font-weight: 700; color: var(--navy); margin: 16px 0 0; }
.jd-deadline { font-size: 13px; color: var(--text-light); margin: 4px 0 0; }
.jd-h2       { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.jd-body     { margin-top: 22px; }
.jd-para     { font-size: 15px; line-height: 1.75; color: var(--text-body, #303A4E); margin: 0 0 14px; }
.jd-about    { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border-grey); }

/* The dir-status block is a spinner on load and a message after —
   it must not keep the centred spinner layout once it is text. */
.dir-status:not(.load-inline) { display: block; text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* ═══ TALENTHUB · COMPANY DIRECTORY ═══════════════════════════
   Append to the END of /css/style.css. Reuses .jb-tag from the job
   board — one tag language across both directories.
   ═══════════════════════════════════════════════════════════════ */

/* Same orphan-safe column counts as the job board — 4 / 3 / 2 / 1,
   every one a divisor of PAGE_SIZE (12), so no page ever ends on a
   half-empty row. */
.co-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1180px) { .co-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .co-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .co-grid { grid-template-columns: 1fr; } }

.co-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg, 14px);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-width: 0;
}
.co-card:hover { transform: translateY(-2px); border-color: var(--navy); box-shadow: 0 10px 26px rgba(0,30,103,0.10); }

.co-card-head { display: flex; align-items: center; gap: 14px; }
.co-logo {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; letter-spacing: 0.02em;
}
.co-headings { min-width: 0; }
.co-name { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.3; }
.co-industry { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.co-about { font-size: 14px; line-height: 1.6; color: var(--text-body, #303A4E); margin: 0; }
.co-cta { font-size: 14px; font-weight: 700; color: var(--navy); margin-top: auto; }

.co-scope-clear {
  display: inline-block; margin-bottom: 14px;
  font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none;
}
.co-scope-clear:hover { text-decoration: underline; }

/* ── Suspended account screen (auth-guard.js) ── */ .suspend-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:
#F4F6FB; } .suspend-card { width:100%; max-width:520px; padding:34px 30px; border-radius:18px; background:#fff; border:1px solid 
#E3E8F2; box-shadow:0 10px 34px rgba(0,30,103,.10); text-align:center; } .suspend-mark { width:64px; height:64px; margin:0 auto 20px; border-radius:16px; background:
#001E67 url(/assets/icons/talenthub-mark.svg) center/62% no-repeat; } .suspend-card h1 { font-family:'Fraunces',serif; font-size:24px; font-weight:900; color:
#001E67; letter-spacing:-.015em; } .suspend-card p { margin-top:12px; font-size:14.5px; line-height:1.65; color:
#42506B; } .suspend-reason { padding:12px 14px; border-radius:10px; background:
#FFF7E6; border:1px solid 
#F2D89B; color:
#6B4E00; text-align:left; } .suspend-note { font-weight:700; color:
#001E67; } .suspend-reg { margin-top:16px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:
#8A93A6; } .suspend-actions { margin-top:26px; display:flex; flex-direction:column; gap:10px; } .suspend-actions .jml-btn { width:100%; justify-content:center; min-height:46px; } @media (min-width:520px) { .suspend-actions { flex-direction:row; } }

/* ── Identity verification ── */
.vi-step { display:flex; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.vi-step:first-of-type { border-top:none; padding-top:0; }
.vi-num { flex:0 0 28px; height:28px; border-radius:50%; background:var(--navy); color:#fff;
          display:flex; align-items:center; justify-content:center;
          font-weight:800; font-size:13px; }
.vi-body { flex:1 1 auto; min-width:0; }
.vi-h { font-family:'Fraunces',serif; font-size:17px; font-weight:900; color:var(--navy); margin:0 0 6px; }
.vi-hint { margin-top:7px; font-size:12.5px; line-height:1.55; color:var(--muted); }
.vi-muted { color:var(--muted); font-size:13px; }

/* The instruction is the security control, so it gets the loudest
   treatment on the page. If it is skimmed past, the check is worthless. */
.vi-pose { margin:10px 0 4px; padding:13px 15px; border-radius:var(--r-md);
           background:var(--lime-soft); border-left:4px solid var(--lime); }
.vi-pose-label { display:block; font-size:10px; font-weight:800; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--lime-dark); margin-bottom:3px; }
.vi-pose strong { font-size:16px; color:#3F5A00; }

.vi-shot { margin-top:14px; }
.vi-cam { margin-top:12px; border-radius:var(--r-md); overflow:hidden;
          background:#0B1533; aspect-ratio:3/4; max-width:340px; }
.vi-cam video, .vi-cam img { display:block; width:100%; height:100%; object-fit:cover; }
/* Mirrored, because an unmirrored live preview of your own face is
   disorienting and people spend the first ten seconds fighting it. */
.vi-cam video { transform:scaleX(-1); }
.vi-camrow { display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; }

.vi-note { margin-top:16px; font-size:13px; font-weight:600; color:var(--lime-dark); }
.vi-note.error { color:#B91C1C; }
.vi-privacy { margin-top:12px; }

.vi-reject { margin:14px 0; padding:13px 15px; border-radius:var(--r-md);
             background:#FBEAEA; border-left:4px solid #C0433A; color:#8a2f28;
             font-size:13.5px; line-height:1.6; }
.vi-summary { margin-top:16px; }
.vi-done { text-align:center; }
.vi-tick { display:inline-flex; align-items:center; justify-content:center;
           width:52px; height:52px; border-radius:50%; background:var(--lime-soft);
           color:var(--lime-dark); font-size:26px; margin-bottom:10px; }

/* ── The banner ── */
.vi-banner { margin-bottom:18px; padding:13px 16px; border-radius:var(--r-md);
             font-size:13.5px; line-height:1.6; border-left:4px solid; }
.vi-banner a { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.vi-banner--todo { background:#FDECC8; border-color:#C98A00; color:#6b4600; }
.vi-banner--wait { background:var(--navy-surface); border-color:var(--navy-mid); color:var(--navy); }
.vi-banner--bad  { background:#FBEAEA; border-color:#C0433A; color:#8a2f28; }

.dash-badge.is-bad  { background:#FBEAEA; color:#A33A3A; text-decoration:none; }
.dash-badge.is-todo { background:#FDECC8; color:#8A5A00; text-decoration:none; }

.dash-nav-badge--alert { background:#C0433A; color:#fff; }

/* Right-anchored metadata group: identity first, then the filing
   reference. margin-left:auto lives HERE and nowhere else — two
   children both claiming the free space is what centred the chip. */
.dash-head-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .dash-head-meta { margin-left: 0; flex-wrap: wrap; }
}

.nav-menu-item.is-pending { color: var(--text-muted); cursor: default; }

/* Checkbox left, link right, on one line under the password field. */
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 10px 0 18px;
}
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }
.auth-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
  color: var(--navy); text-decoration: underline; cursor: pointer;
}
.auth-link:disabled { opacity: .5; cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   1.75 · FOUNDING MEMBER OFFER  (lime promotional band)
   ---------------------------------------------------------------
   LIME, not navy — and that is a decision, not a colour preference.
   Navy already carries three blocks further down the page and means
   "institution" on this site. Lime means "act now". A launch offer
   is the second thing. It should also feel temporary, because it is:
   when 31 October passes, this whole section is deleted, and nothing
   else on the page depends on it.
   ═══════════════════════════════════════════════════════════════ */
.founding {
  padding: 64px var(--h-pad) 8px;
  background: var(--white);
}
.founding-panel {
  position: relative;
  overflow: hidden;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 34px 40px;
  border: 1.5px solid var(--lime);
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 260px at 94% -50%, rgba(154,201,0,0.32), transparent 62%),
    var(--lime-surface);
}
.founding-copy { flex: 1; min-width: 0; }
.founding-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.founding-heading {
  margin-top: 16px;
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.8px;
}
.founding-text {
  margin-top: 12px;
  max-width: 580px;
  font-size: 15.5px;
  color: var(--text-body);
  line-height: 1.65;
}
.founding-terms {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lime-dark);
}
.founding-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.founding-small {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .founding-panel { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px 28px; }
  .founding-action { align-self: stretch; align-items: stretch; }
  .founding-action .jml-btn { width: 100%; }
}
@media (max-width: 767px) {
  .founding { padding: 48px 24px 4px; }
  .founding-panel { padding: 26px 20px; border-radius: var(--r-lg); }
  .founding-heading { font-size: 25px; }
  .founding-text { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   2 · WHO ARE YOU? — fourteen-tile variant
   ---------------------------------------------------------------
   A MODIFIER on .roles-grid, not a replacement. The five-column
   grid still exists and still works; this only applies where the
   --many class is present. Never edit a rule that other pages
   might be standing on — add a lane beside it.

   Flex-wrap centred, same reason as the ecosystem band: the last
   row is a remainder, and a centred remainder reads as design
   while a left-hugging one reads as an accident.
   ═══════════════════════════════════════════════════════════════ */
.roles-grid--many {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
.roles-grid--many .role-card { flex: 0 0 206px; padding: 22px 16px; }
.roles-grid--many .role-icon { width: 44px; height: 44px; }
.roles-grid--many .role-icon svg { width: 22px; height: 22px; }
.roles-grid--many .role-name { margin-top: 13px; font-size: 14.5px; }
.roles-grid--many .role-desc { margin-top: 5px; font-size: 12px; }

@media (max-width: 1023px) {
  .roles-grid--many .role-card { flex: 0 0 calc(33.333% - 10px); }
}
@media (max-width: 767px) {
  .roles-grid--many { gap: 12px; }
  .roles-grid--many .role-card { flex: 0 0 calc(50% - 6px); padding: 18px 12px; }
  .roles-grid--many .role-icon { width: 40px; height: 40px; }
  .roles-grid--many .role-name { font-size: 13.5px; }
  .roles-grid--many .role-desc { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   2.5 · WHY TALENTHUB?  (nine value cards)
   ---------------------------------------------------------------
   A real 3-column GRID here, not centred flex like the two bands
   above — because nine divides by three exactly. Use a grid when
   the count is known and clean; use centred flex only when there
   is a remainder to place. Reaching for flex-wrap out of habit
   would give the same result today and a ragged one the moment
   someone adds a tenth card.

   Text is left-aligned inside each card. Nine centred paragraphs
   in a grid makes nine ragged edges and the eye finds no line to
   follow.
   ═══════════════════════════════════════════════════════════════ */
.why {
  padding: 80px var(--h-pad);
  background: var(--navy-surface);
}
.why-grid {
  margin: 46px auto 0;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--lime);
}
.why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--lime-surface);
  border: 1px solid var(--lime-light);
  color: var(--lime-dark);
  flex-shrink: 0;
}
.why-icon svg { width: 23px; height: 23px; }
.why-title {
  margin-top: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}
.why-text {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .why { padding: 64px 24px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .why { padding: 56px 24px; }
  .why-grid { margin-top: 34px; grid-template-columns: 1fr; }
  .why-card { padding: 22px 20px; }
  .why-icon { width: 42px; height: 42px; }
  .why-icon svg { width: 21px; height: 21px; }
}

/* ═══════════════════════════════════════════════════════════════
   2.75 · VERIFICATION  (navy band — the trust centrepiece)
   ---------------------------------------------------------------
   Class prefix is vfy-, NOT vi-. verify-identity.js already owns
   the whole .vi-* namespace on the member-facing verification
   screen. Two unrelated features sharing one prefix is precisely
   the fault that once rendered every unresolved report in green.
   Check before you name.
   ═══════════════════════════════════════════════════════════════ */
.verify {
  position: relative;
  overflow: hidden;
  padding: 84px var(--h-pad);
  background:
    radial-gradient(700px 340px at 88% -20%, rgba(154,201,0,0.16), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.verify::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
  pointer-events: none;
}
.verify > * { position: relative; z-index: 1; }

/* ── The eight badges ── */
.vfy-grid {
  margin: 46px auto 0;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.vfy-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 20px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.06);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.vfy-card:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(154,201,0,0.55);
  transform: translateY(-3px);
}
.vfy-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(154,201,0,0.2);
  color: var(--lime);
  flex-shrink: 0;
}
.vfy-check svg { width: 16px; height: 16px; }
.vfy-name {
  margin-top: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.vfy-desc {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
}

/* ── The three levels ── */
.vfy-ladder {
  margin: 44px auto 0;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.vfy-step { display: flex; gap: 14px; align-items: flex-start; }
.vfy-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 900;
  flex-shrink: 0;
}
.vfy-step-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.vfy-free {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(154,201,0,0.16);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.vfy-step-text {
  margin-top: 7px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}
.vfy-note {
  margin: 34px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 1023px) {
  .verify { padding: 64px 24px; }
  .vfy-grid { grid-template-columns: repeat(2, 1fr); }
  .vfy-ladder { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .verify { padding: 56px 24px; }
  .vfy-grid { margin-top: 34px; grid-template-columns: 1fr; gap: 12px; }
  .vfy-card { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
  .vfy-card > div, .vfy-name { margin-top: 0; }
  .vfy-desc { margin-top: 3px; }
}

/* ═══════════════════════════════════════════════════════════════
   2.9 · EXPLORE CATEGORIES  (sector chips)
   ---------------------------------------------------------------
   Centred flex-wrap, and here it is the ONLY correct choice — the
   chips are different widths ("ICT" against "Creative Industry"),
   so a grid would either stretch short labels into empty boxes or
   crush long ones. Let the content set the width; let the row
   decide when to break.

   Chips, not cards. Seventeen cards would out-weigh the nine value
   cards above them, and a category list is a signpost, not a
   claim. Weight should follow importance.
   ═══════════════════════════════════════════════════════════════ */
.cats {
  padding: 76px var(--h-pad);
  background: var(--white);
}
.cat-grid {
  margin: 40px auto 0;
  max-width: 940px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cat-chip {
  padding: 12px 22px;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.cat-chip:hover {
  background: var(--navy-surface);
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-2px);
}
/* The escape hatch reads as the destination, not as an 18th sector. */
.cat-chip--all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  font-weight: 700;
}
.cat-chip--all svg { width: 15px; height: 15px; }
.cat-chip--all:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: var(--white);
}

@media (max-width: 767px) {
  .cats { padding: 56px 24px; }
  .cat-grid { margin-top: 30px; gap: 9px; }
  .cat-chip { padding: 10px 16px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   5.7 · MEMBERSHIP PLANS
   ---------------------------------------------------------------
   Platinum is flagged "Best value" and nothing is flagged "Most
   popular". Best value is arithmetic — ₦3,667 against ₦4,500, and
   anyone can check it. Most popular would be an invented claim
   about members who do not exist yet, which is the same fault as
   inventing testimonials. Never let the page assert something the
   database cannot back.
   ═══════════════════════════════════════════════════════════════ */
.plans {
  padding: 84px var(--h-pad);
  background: var(--navy-surface);
}
.plans-freebar {
  display: block;                 /* was flex — see note above */
  margin: 28px auto 0;
  padding: 12px 22px;
  max-width: 560px;
  border: 1px solid var(--lime);
  border-radius: var(--r-pill);
  background: var(--lime-surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  line-height: 1.5;
}
.plans-freebar .dot {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.plans-grid {
  margin: 34px auto 0;
  max-width: 1060px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-xl);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.plan-card--gold     { border-color: var(--navy-light); }
.plan-card--platinum { border: 2px solid var(--lime); box-shadow: var(--shadow-card); }

.plan-flag {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.plan-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plan-price {
  margin-top: 12px;
  font-family: 'Fraunces', serif;
  font-size: 38px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -1px;
}
.plan-per {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.plan-note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lime-dark);
}
.plan-list {
  margin: 22px 0 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border-grey);
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;            /* pushes every button onto the same baseline */
}
.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.5;
}
.plan-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--lime-surface);
  color: var(--lime-dark);
  flex-shrink: 0;
}
.plan-tick svg { width: 10px; height: 10px; }

.plans-foot {
  margin: 30px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
}
.plans-link { font-weight: 700; color: var(--lime-dark); }
.plans-link:hover { color: var(--navy); text-decoration: underline; }

@media (max-width: 1023px) {
  .plans { padding: 64px 24px; }
  .plans-grid { grid-template-columns: 1fr; max-width: 460px; gap: 26px; }
}
@media (max-width: 767px) {
  .plans { padding: 56px 24px; }
  .plan-card { padding: 26px 22px; }
  .plan-price { font-size: 33px; }
  .plans-freebar { border-radius: var(--r-lg); padding: 12px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   5.8 · TESTIMONIALS  (real reviews only — hidden until they exist)
   ---------------------------------------------------------------
   [hidden] is already normalised to display:none !important near
   the top of this file, so the section stays invisible without any
   extra rule. Styles below only take effect once the script has
   both filled the grid and cleared the attribute — the two happen
   together or not at all.
   ═══════════════════════════════════════════════════════════════ */
.tst {
  padding: 80px var(--h-pad);
  background: var(--white);
}
.tst-grid {
  margin: 44px auto 0;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tst-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.tst-card:hover { box-shadow: var(--shadow-card); border-color: var(--navy-light); }
.tst-stars { display: flex; gap: 3px; color: var(--lime); }
.tst-stars svg { width: 17px; height: 17px; }
.tst-text {
  margin: 16px 0 0;
  flex: 1;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
}
.tst-text::before { content: '\201C'; }
.tst-text::after  { content: '\201D'; }
.tst-by {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-grey);
  display: flex;
  align-items: center;
  gap: 12px;
}
.tst-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.tst-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tst-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.tst-role { font-size: 12px; color: var(--text-muted); }

@media (max-width: 1023px) {
  .tst { padding: 64px 24px; }
  .tst-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .tst { padding: 56px 24px; }
  .tst-grid { margin-top: 32px; grid-template-columns: 1fr; }
  .tst-card { padding: 24px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER · "coming soon" items
   ---------------------------------------------------------------
   Same rhythm as .footer-col a, but dimmer, no hover, no pointer.
   The visitor must be able to tell at a glance which words go
   somewhere — that is the entire job of this rule.
   ═══════════════════════════════════════════════════════════════ */
.footer-soon {
  padding: 7px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.38);
  cursor: default;
}

/* Tablet only. BOUNDED at both ends — an unbounded max-width:1023px
   here would also match 344px and outrank the two-column mobile rule
   further up the file, because it comes later and specificity ties. */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
}

/* Fold-class screens: five link groups two-across is unreadable.
   One column is longer but legible, and a footer is scanned, not read. */
@media (max-width: 420px) {
  .footer-main { grid-template-columns: 1fr; gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE APP PREVIEW  (.mp-*) — mirrors the real artisan profile
   ---------------------------------------------------------------
   Deliberately built from the same visual grammar as .ap-* on
   profile.html: navy gradient hero with a lime avatar and a dotted
   overlay, then white blocks on navy-surface. Someone who has seen
   the site should recognise this screen instantly.

   Everything is sized for a 224px-wide viewport (248px phone less
   its 12px bezel each side), which is why the type is small enough
   to look wrong out of context. It is not a component — it is a
   scale drawing.

   The old .mini-* rules are now unused. Delete that whole block
   (from `.mini-status` to `.mini-btn--lime`) once this renders.
   ═══════════════════════════════════════════════════════════════ */
.mp-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 9px;
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.mp-status-dots { display: flex; gap: 3px; }
.mp-status-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.55); }

.mp-body {
  flex: 1;
  padding: 10px;
  background: var(--navy-surface);
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}

/* ── Hero card (= .ap-hero) ── */
.mp-hero {
  position: relative; overflow: hidden;
  padding: 13px 13px 12px;
  border-radius: 13px;
  background:
    radial-gradient(200px 110px at 88% -30%, rgba(154,201,0,0.26), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.mp-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 13px 13px; pointer-events: none;
}
.mp-hero-top { position: relative; display: flex; align-items: center; gap: 10px; }
.mp-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--lime); color: var(--navy);
  font-size: 14px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.16);
}
.mp-id { min-width: 0; }
.mp-name {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: #fff; line-height: 1.25;
}
.mp-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--lime); color: var(--navy);
  font-size: 8px; font-weight: 900; flex-shrink: 0;
}
.mp-trade { display: block; margin-top: 2px; font-size: 9.5px; color: rgba(255,255,255,0.7); }
.mp-metrics {
  position: relative;
  margin-top: 11px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between;
}
.mp-metric { font-size: 9px; color: rgba(255,255,255,0.62); }
.mp-metric b { color: #fff; font-size: 10.5px; font-weight: 800; }

/* ── White blocks (= .ap-block) ── */
.mp-block {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: 11px;
}
.mp-block-title {
  display: block;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--text-light);
}
.mp-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mp-skill {
  padding: 3.5px 9px; border-radius: 999px;
  background: var(--navy-surface); border: 1px solid var(--border-grey);
  font-size: 9px; font-weight: 600; color: var(--navy);
}
.mp-rate {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 9.5px; color: var(--text-body);
  border-bottom: 1px solid var(--border-grey);
}
.mp-rate:first-of-type { margin-top: 4px; }
.mp-rate:last-child { border-bottom: none; padding-bottom: 0; }
.mp-rate b { color: var(--navy); font-weight: 700; }
.mp-photos { margin-top: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mp-photos span {
  aspect-ratio: 1; border-radius: 7px;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
}
.mp-photos span:nth-child(2) { background: linear-gradient(135deg, var(--lime-dark), var(--navy-mid)); }
.mp-more {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)) !important;
}
.mp-cta {
  margin-top: auto;
  text-align: center; padding: 10px;
  border-radius: 999px;
  background: var(--lime); color: var(--navy);
  font-size: 11px; font-weight: 700;
}

/* ── Floating cards: clear of the content underneath ──────────
   They were sitting over the topbar and the action button, which
   is the one thing a mockup must never do — the overlay hid the
   two elements it was meant to draw attention to. */
.app-float--rating { top: 112px; left: -16px; }
.app-float--quote  { bottom: 26px; right: -20px; }
@media (max-width: 900px) {
  .app-float--rating { top: 108px; left: -4px; }
  .app-float--quote  { bottom: 22px; right: -6px; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH PANEL — rich variant (sign-in / register)
   ---------------------------------------------------------------
   A MODIFIER. .auth-panel is untouched, so any page still using
   the plain version keeps working. Same discipline as
   .roles-grid--many.

   MOBILE: everything shrinks, nothing is hidden. Below 900px the
   panel stacks ABOVE the form — and this is a SIGN-IN page, where
   the visitor already knows what TalentHub is and wants the email
   field. Marketing copy between a returning user and their password
   is friction. So the four words become a chip row, the art goes,
   and the whole panel collapses to about a third of its height.
   ═══════════════════════════════════════════════════════════════ */
.auth-panel--rich {
  position: relative;
  overflow: hidden;
  padding: 56px 60px;
}
.auth-panel--rich > * { position: relative; z-index: 1; }

/* The illustration. currentColor inherits the panel's white, so
   changing the panel colour can never leave the art behind. */
.auth-art {
  position: absolute;
  top: -40px;
  right: -70px;
  width: 420px;
  height: 420px;
  color: var(--lime);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.auth-mark {
  height: 54px;
  width: auto;
  margin-bottom: 26px;
}

.auth-panel--rich .auth-headline {
  margin-top: 18px;
  font-size: 38px;
  line-height: 1.12;
}
.auth-lead {
  margin-top: 16px;
  max-width: 420px;
  font-size: 15.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
}

/* Four words on one row — the homepage rhythm, restated. */
.auth-panel--rich .auth-bullets {
  margin-top: 26px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.auth-panel--rich .auth-bullet { font-size: 14.5px; font-weight: 600; }

.auth-brandline {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.16);
  max-width: 400px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .auth-panel--rich { padding: 34px 28px 30px; }
  .auth-art { display: none; }
  .auth-mark { height: 40px; margin-bottom: 18px; }
  .auth-panel--rich .auth-headline { font-size: 26px; margin-top: 14px; }
  .auth-lead { margin-top: 12px; font-size: 14px; }
  .auth-panel--rich .auth-bullets { margin-top: 18px; gap: 8px 16px; }
  .auth-panel--rich .auth-bullet { font-size: 13px; }
  .auth-panel--rich .auth-bullet-icon { width: 20px; height: 20px; }
  .auth-brandline { margin-top: 22px; padding-top: 16px; font-size: 11.5px; }
}
@media (max-width: 420px) {
  .auth-panel--rich { padding: 28px 20px 26px; }
  .auth-panel--rich .auth-headline { font-size: 23px; }
}

.auth-mark { height: 74px; }
@media (max-width: 900px) { .auth-mark { height: 54px; } }

/* ── Logo: single-line wordmark ───────────────────────────────
   The ownership line is gone, so the wordmark is alone beside the
   mark. At 18px it was sized to sit ABOVE a second line and read
   as the larger half of a pair; standing alone it just looks
   undersized next to a 38px symbol. Type scale is relative — a
   size is only ever right against what it sits next to. */
.logo-text-top { font-size: 21px; }
.logo { gap: 11px; }

@media (max-width: 767px) {
  .logo-text-top { font-size: 19px; }
}

.auth-art { opacity: 1; color: #C9E86A; }

/* ═══════════════════════════════════════════════════════════════
   SECURE SIGN-IN STRIP  (.trust-*)
   ---------------------------------------------------------------
   Deliberately QUIET. Large padlocks and green shields on a login
   form are the visual language of phishing pages, because genuine
   institutions do not need to insist. Muted grey on a light surface
   reads as routine — and routine is what security should feel like.

   Prefix is trust-, not sec-: .section-header is close enough in
   reading that a future edit could confuse the two, and a class name
   only has to be misread once.
   ═══════════════════════════════════════════════════════════════ */
.trust-box {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
}
.trust-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--navy);
}
.trust-head svg { width: 14px; height: 14px; flex-shrink: 0; }

.trust-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.trust-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--lime-surface);
  color: var(--lime-dark);
  flex-shrink: 0;
}
.trust-tick svg { width: 9px; height: 9px; }

@media (max-width: 420px) {
  .trust-box { padding: 12px 14px; }
  .trust-list li { font-size: 12px; }
}

/* ── Sign-in on a phone: the form is the page ──────────────────
   A returning user is not being persuaded, they are being delayed.
   The panel keeps its identity — mark, headline, four words — and
   loses the two blocks that only serve a first-time visitor.
   Register is the opposite case and keeps everything.

   :not(.auth-panel--intro) so the register page can opt out with
   one class rather than a second copy of these rules. */
@media (max-width: 900px) {
  .auth-panel--rich:not(.auth-panel--intro) .auth-lead,
  .auth-panel--rich:not(.auth-panel--intro) .auth-brandline { display: none; }
  .auth-panel--rich:not(.auth-panel--intro) { padding: 26px 24px 24px; }
  .auth-panel--rich:not(.auth-panel--intro) .auth-mark { height: 36px; margin-bottom: 14px; }
  .auth-panel--rich:not(.auth-panel--intro) .auth-headline { font-size: 23px; margin-top: 12px; }
  .auth-panel--rich:not(.auth-panel--intro) .auth-bullets { margin-top: 16px; }
}

/* The panel is decoration; the form is the task. Only the task
   should move. 64px is the sticky header's height. */
@media (min-width: 901px) {
  .auth-panel--rich {
    position: sticky;
    top: 64px;
    align-self: flex-start;
    height: calc(100vh - 64px);
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   REGISTER PANEL  (.auth-panel--intro)
   ---------------------------------------------------------------
   Sign-in trims this panel on mobile; register keeps all of it. A
   returning user wants the password field. A new visitor is still
   deciding, and the reasons ARE the page.
   ═══════════════════════════════════════════════════════════════ */

/* flex-wrap:nowrap is LOAD-BEARING, not tidying. .auth-panel--rich
   sets wrap for sign-in's four-word row. Switching to column
   without resetting it makes the list spill into a SECOND COLUMN
   the moment the content is taller than the panel — which is what
   the fixed height below guarantees. In a column container, "wrap"
   means sideways. */
.auth-panel--intro .auth-bullets {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 11px;
  margin-top: 24px;
}
.auth-panel--intro .auth-bullet { font-size: 14.5px; font-weight: 500; }
.auth-panel--intro .auth-lead strong { color: #fff; font-weight: 700; }
.auth-panel--intro .auth-brandline {
  color: var(--lime);
  font-weight: 700;
  font-size: 13px;
}

/* Role bullets — filled by register.js, changes with the chips. */
.auth-panel--intro .auth-role-bullets {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}
.auth-panel--intro .auth-role-bullets .auth-bullet { font-size: 14px; color: var(--lime); }
.auth-panel--intro .auth-role-bullets .auth-bullet-icon { background: rgba(154,201,0,0.28); }
.auth-panel--intro .auth-role-bullets:empty { display: none; }

/* This panel is TALLER than a viewport and must scroll with the
   page. The sticky treatment is right for sign-in, where the panel
   is short and the form is the only thing with content below the
   fold — it is wrong here, and a fixed height on tall content is
   what caused the sideways wrap above. */
@media (min-width: 901px) {
  .auth-panel--intro {
    position: static;
    height: auto;
    align-self: stretch;
    justify-content: center;
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

@media (max-width: 900px) {
  .auth-panel--intro { padding: 30px 24px 28px; }
  .auth-panel--intro .auth-bullets { gap: 9px; margin-top: 18px; }
  .auth-panel--intro .auth-bullet { font-size: 13.5px; }
  .auth-panel--intro .auth-role-bullets { margin-top: 16px; padding-top: 14px; }
}

/* ── Register panel: two bullet lists, clearly separated ──────
   Static benefits (everyone) then role benefits (this signup).
   The divider does the explaining — without it the reader sees
   ten ticks and assumes the last three are an afterthought. */
.auth-panel--intro .auth-role-bullets {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
  flex-direction: column;
  gap: 10px;
}
.auth-panel--intro .auth-role-bullets .auth-bullet {
  font-size: 14px;
  color: var(--lime);
}
.auth-panel--intro .auth-role-bullets .auth-bullet-icon {
  background: rgba(154,201,0,0.28);
}
.auth-panel--intro .auth-role-bullets:empty {
  display: none;    /* no border floating on its own if JS fails */
}

/* ═══════════════════════════════════════════════════════════════
   REGISTER PANEL — polish + mobile proportion
   ═══════════════════════════════════════════════════════════════ */

/* The role list needs a name. Without one, three lime ticks under
   seven white ones read as a fourth-quarter afterthought rather
   than "and specifically for YOU". A label costs one line and
   turns a stray group into a deliberate one. */
.auth-panel--intro .auth-role-bullets::before {
  content: 'As a member';
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

@media (min-width: 901px) {
  .auth-panel--intro { padding-top: 60px; padding-bottom: 60px; }
}

/* ── MOBILE: the panel is an introduction, not the page ────────
   Seven benefits plus three role lines is a long scroll before a
   new visitor reaches the first field. Below 900px the panel keeps
   what PERSUADES — mark, headline, the three-part promise, the
   four benefits that apply to everyone — and drops the tail.

   :nth-child(n+5) hides bullets five, six and seven. Positional
   selectors are usually a trap, because reordering the markup
   silently changes what they target. It is right HERE only because
   the order is already deliberate: the first four are the ones
   true for every role, and that ordering is documented in the
   HTML comment above the list. If that list is ever reordered,
   this rule must be revisited — which is why it says so. */
@media (max-width: 900px) {
  .auth-panel--intro .auth-role-bullets { display: none; }
  .auth-panel--intro .auth-brandline { margin-top: 18px; padding-top: 14px; }
  .auth-panel--intro .auth-lead br { display: none; }
  .auth-panel--intro .auth-lead { font-size: 14px; }
}

/* ── Location row: side by side, but not on a Fold ─────────────
   .pf-form is 1fr 1fr down to 760px. At 344px that gives each
   field 160px — a state dropdown showing "FCT — Ab…" and a city
   box too narrow to read what you typed. Stack them. */
@media (max-width: 420px) {
  .auth-form .pf-form { grid-template-columns: 1fr; }
}

/* Select arrow sits flush to the border on narrow widths without
   this — the browser default padding does not account for it. */
select.field-input { padding-right: 34px; }

/* ═══════════════════════════════════════════════════════════════
   DIRECTORY · brand message (client item 6)
   ---------------------------------------------------------------
   Reuses .hero-promise rather than restyling the four words. They
   are one phrase with one treatment; a second definition would
   drift the moment either is touched. The modifier only adjusts
   scale for its quieter position at the foot of a page.
   ═══════════════════════════════════════════════════════════════ */
.dir-brand {
  padding: 64px var(--h-pad) 76px;
  background: var(--navy-surface);
  border-top: 1px solid var(--border-grey);
  text-align: center;
}
.dir-brand-text {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.65;
}
.dir-brand-promise { margin-top: 18px; }
.dir-brand-promise span { font-size: 22px; }

/* The directory hero is navy; .sh-sub defaults to dark body text
   and would be unreadable on it. */
.dir-head .sh-sub { color: rgba(255,255,255,0.78); }

/* Two spans, not a <br>. A block span breaks the line on desktop;
   switching it to inline on mobile restores the ordinary space
   between them.

   Hiding a <br> with display:none deletes the break AND the gap,
   because a <br> is an ELEMENT, not whitespace — which is how
   "verified" and "artisans" ran together into one word. Never
   display:none a <br> to undo a line break. */
.dir-head .sh-heading span { display: block; }

@media (max-width: 767px) {
  .dir-brand { padding: 48px 24px 56px; }
  .dir-brand-text { font-size: 14.5px; }
  .dir-brand-promise span { font-size: 17px; }
  .dir-head .sh-heading span { display: inline; }
}
/* "New on TalentHub" reads as a fact, not a deficiency. Neutral
   grey, never red or amber — a new member has done nothing wrong
   and the card must not imply otherwise. */
.artisan-new {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

/* Four filters now: search · trade · state · city. The search box
   keeps the widest track because it is the primary input. */
@media (min-width: 768px) {
  .dir-filter {
    grid-template-columns: minmax(190px, 1.4fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr);
    max-width: 820px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SAFETY & DISCLAIMER  (.safety-*)
   ---------------------------------------------------------------
   Amber, never red. Red says "danger, something is wrong here" —
   about a member who has done nothing wrong. Amber says "pay
   attention", which is the actual message.

   Sits at decision points, not in a modal. A warning that must be
   dismissed is a warning that gets dismissed.
   ═══════════════════════════════════════════════════════════════ */
.safety-block {
  background: #FFFBEB;
  border-color: #FDE68A;
}
.safety-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #92400E;
  margin-bottom: 10px;
}
.safety-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.safety-text {
  font-size: 14px;
  color: #78350F;
  line-height: 1.6;
}
.safety-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.safety-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: #78350F;
  line-height: 1.5;
}
.safety-list li::before {
  content: '';
  position: absolute;
  left: 3px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #D97706;
}

/* One quiet line under a submit button. */
.safety-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Inline warning inside the apply panel. */
.safety-inline {
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 3px solid #D97706;
  border-radius: var(--r-md);
  font-size: 13px;
  color: #78350F;
  line-height: 1.6;
}
.safety-inline strong { color: #92400E; }

.footer-disclaimer {
  margin-top: 8px;
  max-width: 620px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.42);
  line-height: 1.55;
}

.dir-brand-note {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Hero secondary paths ─────────────────────────────────────
   Text links, not buttons. Two lime pills under a lime Search
   button would give the hero three equally loud actions, and a
   visitor with three equal choices makes none. */
.hero-paths {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-path {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--lime);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.hero-path:hover { color: var(--lime-dark); border-color: var(--navy); }
.hero-path-or { font-size: 13px; color: var(--text-light); }

@media (max-width: 767px) {
  .hero-paths { margin-top: 16px; gap: 10px; }
  .hero-path { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   2 · WHO ARE YOU? — three groups  (.grp-*)
   ---------------------------------------------------------------
   New prefix, not a variant of .role-card. These are a different
   THING: a role card was one role, a group card is a doorway to
   several. Reusing the class would make them look identical and
   behave differently, which is worse than looking different.

   .roles-grid--many can be deleted once the fourteen-tile version
   is confirmed gone from every page.
   ═══════════════════════════════════════════════════════════════ */
.grp-grid {
  margin: 44px auto 0;
  max-width: 1020px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-xl);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--lime);
}
.grp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.grp-icon svg { width: 26px; height: 26px; }
.grp-icon--lime     { background: var(--lime); }
.grp-icon--lime svg { color: var(--navy); }
.grp-icon--navy     { background: var(--navy); }
.grp-icon--navy svg { color: var(--white); }

.grp-name {
  margin-top: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
/* The list of who belongs in this group is the reason a visitor
   recognises themselves. It is not fine print — it is the whole
   job of the card. */
.grp-list {
  margin-top: 10px;
  flex: 1;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.65;
}
.grp-go {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lime-dark);
}
.grp-card:hover .grp-go { color: var(--navy); }

@media (max-width: 900px) {
  .grp-grid { grid-template-columns: 1fr; max-width: 480px; gap: 14px; }
  .grp-card { padding: 24px 22px; }
  .grp-name { font-size: 17px; }
}

/* ── Why TalentHub: four cards ────────────────────────────────
   TWO columns, not four. Four across at 1200px gives each card
   285px — the same width the nine had at three-across, so nothing
   would look any lighter and the whole point of the change is
   lost. Two across gives each card room, and 2×2 reads as a
   deliberate set where 1×4 reads as a toolbar.

   A modifier, so .why-grid's three-column default survives for
   anything still using it. */
.why-grid--four {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  gap: 20px;
}
.why-grid--four .why-card { padding: 30px 28px; }
.why-grid--four .why-title { font-size: 17px; }
.why-grid--four .why-text { font-size: 14.5px; margin-top: 9px; }

@media (max-width: 767px) {
  .why-grid--four { grid-template-columns: 1fr; gap: 14px; }
  .why-grid--four .why-card { padding: 24px 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE REBUILD — 12 August 2026
   Append to the END of /css/style.css.
   Nothing above is edited; these are new rules and modifiers only.
   ═══════════════════════════════════════════════════════════════ */


/* ── 6 · VERIFICATION: four badges, not eight ─────────────────
   A modifier, so the eight-badge grid survives for the
   verification page when that gets built. Four across at full
   width is right here — they are labels, not cards, and each one
   is two short lines. */
.vfy-grid--four { grid-template-columns: repeat(4, 1fr); max-width: 1020px; }

@media (max-width: 900px) {
  .vfy-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vfy-grid--four { grid-template-columns: 1fr; }
}

/* The line between the badges and the ladder. It explains WHY the
   badges matter, so it needs to sit apart from both — not tucked
   under the grid, not crowding the numbered steps. */
.vfy-lead {
  margin: 30px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 15px;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
}


/* ── 7 · EXPLORE CATEGORIES: the "all" link ───────────────────
   On its own row, not wrapped into the chip flow. Ten sector
   chips and one destination chip are different kinds of thing;
   mixed together the eye reads eleven sectors and skips the one
   that actually goes somewhere useful. */
.cat-more {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}
.cat-more .cat-chip--all { padding: 13px 26px; }


/* ═══════════════════════════════════════════════════════════════
   9 · MEMBERSHIP — a link, not a price table
   ---------------------------------------------------------------
   The three price cards moved to their own page. A visitor eight
   sections into a homepage has not yet decided whether to join;
   asking them to weigh ₦24,000 against ₦44,000 is the right
   question at the wrong moment.

   Deliberately SLIM — three lines and a button. It is a signpost.
   Giving it the padding of a full section would put the length
   straight back that removing the cards took out.
   ═══════════════════════════════════════════════════════════════ */
.plans-cta {
  padding: 56px var(--h-pad);
  background: var(--navy-surface);
}
.plans-cta-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.plans-cta-heading {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.7px;
}
.plans-cta-text {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--text-body);
}
.plans-cta .jml-btn { margin-top: 22px; }

@media (max-width: 767px) {
  .plans-cta { padding: 44px 24px; }
  .plans-cta-heading { font-size: 24px; }
  .plans-cta .jml-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   12 · POWERED BY JENKINS MICHAELS
   ---------------------------------------------------------------
   A slim band on white, between the navy app panel and the navy
   final CTA. Two dark blocks touching would read as one; this
   separates them and does its own job at the same time.

   Prefix is jm-, NOT jml- — .jml-btn already owns that namespace
   across the whole stylesheet, and .jml-band sitting next to
   .jml-btn is a name waiting to be misread.
   ═══════════════════════════════════════════════════════════════ */
.jm-band {
  padding: 52px var(--h-pad);
  background: var(--white);
  border-top: 1px solid var(--border-grey);
}
.jm-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.jm-copy { min-width: 0; }
.jm-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--lime-dark);
}
.jm-name {
  margin-top: 8px;
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.jm-text {
  margin-top: 10px;
  max-width: 620px;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.65;
}
.jm-band .jml-btn { flex-shrink: 0; }

@media (max-width: 860px) {
  .jm-band { padding: 40px 24px; }
  .jm-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .jm-name { font-size: 22px; }
  .jm-text { font-size: 14.5px; }
  .jm-band .jml-btn { width: 100%; }
}


/* ── Final CTA: two lines ─────────────────────────────────────
   The <br> only earns its place at desktop width. */
@media (max-width: 640px) {
  .final-cta-heading br { display: none; }
}

/* ── How it works: centre the steps under a centred heading ───
   .how-step was align-items:flex-start, which is correct when a
   section header is left-aligned — the numbers form a vertical
   line with it. Under a CENTRED heading the same rule reads as a
   mistake, because nothing lines up with anything.

   Alignment is never right in the abstract. It is right or wrong
   against what sits above it. */
.how-step {
  align-items: center;
  text-align: center;
}
.how-title { margin-top: 16px; }
.how-text { max-width: 220px; }

.why { background: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   PRICING  (/pricing.html)  —  append to style.css
   ---------------------------------------------------------------
   Every selector is prefixed .pr- so nothing here can reach any
   other page. The stylesheet is already carrying 18% dead rules
   once removed; a new section that leaks into shared classes is how
   that happens again.
   ═══════════════════════════════════════════════════════════════ */

.pr { padding-bottom: 0; }

/* ── Hero ─────────────────────────────────────────────────────── */
.pr-head {
  max-width: 1180px; margin: 0 auto; padding: 64px 24px 0;
  text-align: center;
}
.pr-h1 {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(34px, 6vw, 62px); line-height: 1.02;
  letter-spacing: -1.6px; color: var(--navy); margin: 18px 0 0;
}
.pr-h1 em { font-style: normal; color: var(--lime); }
.pr-lede {
  max-width: 620px; margin: 20px auto 0;
  font-size: 17px; line-height: 1.6; color: var(--text-muted);
}

/* ── Trial banner ─────────────────────────────────────────────── */
.pr-banner {
  max-width: 900px; margin: 34px auto 0;
  display: flex; align-items: center; gap: 14px;
  background: #F1F4FA; border-radius: 16px;
  padding: 16px 20px; text-align: left;
  font-size: 15px; line-height: 1.5; color: var(--navy);
}
.pr-banner--free { background: #F4F9E6; border: 1px solid #DCEAB0; }
.pr-banner-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--lime);
  flex: none;
}
.pr-countdown {
  margin-left: auto; flex: none;
  background: var(--navy); color: #fff;
  border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* ── Controls ─────────────────────────────────────────────────── */
.pr-controls { max-width: 1180px; margin: 0 auto; padding: 40px 24px 0; text-align: center; }

.pr-roles {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  background: #F1F4FA; border-radius: 999px; padding: 6px;
}
.pr-role {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: #59637A; padding: 11px 20px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.pr-role:hover { color: var(--navy); }
.pr-role.is-on { background: var(--navy); color: #fff; }
.pr-role:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.pr-rolenote {
  font-size: 14.5px; color: var(--text-muted); margin: 14px 0 0;
}

.pr-billing {
  display: inline-flex; gap: 4px; margin-top: 22px;
  background: #F1F4FA; border-radius: 999px; padding: 5px;
}
.pr-bill {
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: #59637A; padding: 10px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.pr-bill.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.pr-bill:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pr-save {
  background: var(--lime); color: var(--navy);
  border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
}

/* ── Cards ────────────────────────────────────────────────────── */
.pr-grid {
  max-width: 1000px; margin: 0 auto; padding: 40px 24px 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  align-items: start;
}
.pr-grid--one { max-width: 520px; grid-template-columns: 1fr; }

.pr-card {
  position: relative;
  background: #fff; border: 1px solid var(--border-grey);
  border-radius: 22px; padding: 30px 28px 28px;
  display: flex; flex-direction: column;
}
/* The paid tier carries the weight. One emphasis per screen. */
.pr-card--top {
  border-color: var(--navy); border-width: 2px;
  box-shadow: 0 18px 44px rgba(0,30,103,.12);
}
.pr-flag {
  position: absolute; top: -12px; left: 28px;
  background: var(--navy); color: #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
}

.pr-name {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 27px; color: var(--navy); letter-spacing: -.6px;
}
.pr-tag { font-size: 14.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

.pr-price { display: flex; align-items: baseline; gap: 9px; margin-top: 22px; }
.pr-amount {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 42px; color: var(--navy); letter-spacing: -1.4px;
}
.pr-per { font-size: 14.5px; font-weight: 600; color: var(--text-muted); }

/* Struck through during the trial. Showing a price with no
   acknowledgement that it is currently zero is a small dishonesty a
   visitor notices and never mentions. */
.pr-price.is-struck .pr-amount {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: #97A0B5;
}
.pr-freenow {
  display: inline-block; margin-top: 10px;
  background: #F4F9E6; color: #5C7A00;
  border: 1px solid #DCEAB0; border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 800;
}
.pr-sub { font-size: 13px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

.pr-feats { list-style: none; margin: 24px 0 0; padding: 0; }
.pr-feats li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; line-height: 1.5; color: var(--text-dark);
  padding: 8px 0;
}
.pr-feats svg { width: 16px; height: 16px; color: var(--lime); flex: none; margin-top: 3px; }

.pr-note {
  margin-top: 16px; padding: 13px 15px;
  background: #F1F4FA; border-radius: 12px;
  font-size: 13px; line-height: 1.55; color: #4A5568;
}

.pr-cta {
  margin-top: auto; padding-top: 24px;
}
.pr-cta {
  display: block; text-align: center; text-decoration: none;
  margin-top: 24px;
  border: 1.5px solid var(--navy); color: var(--navy);
  border-radius: 999px; padding: 14px 20px;
  font-size: 15.5px; font-weight: 700;
  transition: background .15s, color .15s;
}
.pr-cta:hover { background: #F1F4FA; }
.pr-cta--solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.pr-cta--solid:hover { background: #00164D; }

/* ── Verification block ───────────────────────────────────────── */
.pr-verif { background: var(--navy); margin-top: 72px; padding: 68px 24px; }
.pr-verif-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.pr-verif-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--lime);
}
.pr-verif-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(28px, 4.4vw, 42px); color: #fff;
  letter-spacing: -1.1px; margin: 14px 0 0;
}
.pr-verif-p {
  max-width: 660px; margin: 16px auto 0;
  font-size: 16px; line-height: 1.65; color: #C3CBDF;
}
.pr-levels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 44px; text-align: left;
}
.pr-level {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 24px 22px;
}
.pr-level-tag {
  display: inline-block;
  background: rgba(255,255,255,.12); color: #C3CBDF;
  border-radius: 999px; padding: 5px 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
}
.pr-level-tag--free { background: var(--lime); color: var(--navy); }
.pr-level h3 {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 20px; color: #fff; margin: 14px 0 0; letter-spacing: -.4px;
}
.pr-level p { font-size: 14px; line-height: 1.6; color: #A8B4CE; margin-top: 9px; }
.pr-verif-foot { font-size: 13.5px; color: #8FA0C6; margin-top: 30px; }

/* ── How paying works ─────────────────────────────────────────── */
.pr-faq { max-width: 1080px; margin: 0 auto; padding: 72px 24px 0; }
.pr-faq-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(26px, 4vw, 36px); color: var(--navy);
  letter-spacing: -1px; text-align: center;
}
.pr-faq-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; margin-top: 36px;
}
.pr-faq-item {
  background: #F7F8FA; border-radius: 18px; padding: 26px 24px;
}
.pr-faq-item h4 {
  font-size: 16.5px; font-weight: 800; color: var(--navy); letter-spacing: -.2px;
}
.pr-faq-item p { font-size: 14.5px; line-height: 1.65; color: #4A5568; margin-top: 9px; }

/* ── Final ────────────────────────────────────────────────────── */
.pr-final { text-align: center; padding: 76px 24px 90px; }
.pr-final h2 {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(26px, 4.4vw, 40px); color: var(--navy);
  letter-spacing: -1.1px; line-height: 1.12;
}
.pr-final p {
  font-size: 16px; color: var(--text-muted); margin: 14px auto 26px; max-width: 480px;
}

/* ── Responsive ───────────────────────────────────────────────
   Bounded on BOTH sides where a later rule could otherwise reach
   in — max-width queries are not exclusive, and appending one at
   the end of a stylesheet without a floor is how a desktop layout
   quietly inherits a phone rule. */
@media (max-width: 860px) {
  .pr-grid { grid-template-columns: 1fr; max-width: 520px; }
  .pr-levels { grid-template-columns: 1fr; }
  .pr-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pr-head { padding-top: 44px; }
  .pr-banner { flex-wrap: wrap; }
  .pr-countdown { margin-left: 0; }
  .pr-roles { width: 100%; border-radius: 18px; }
  .pr-role { flex: 1 1 auto; padding: 10px 14px; font-size: 13.5px; }
  .pr-verif { padding: 48px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIPTION VIEW  (#/subscription)  —  append to style.css
   ---------------------------------------------------------------
   Prefixed .sub- throughout. Reuses .dash-card, .dash-card-title
   and .jml-btn rather than restating them — a second definition of
   a card is how two screens drift apart.
   ═══════════════════════════════════════════════════════════════ */

.sub-eyebrow {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-muted);
}
.sub-eyebrow--lime { color: #5C7A00; }

/* ── Current plan ─────────────────────────────────────────────── */
.sub-hero-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.sub-plan {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 34px; line-height: 1.1; letter-spacing: -1px;
  color: var(--navy); margin-top: 8px;
}
.sub-tag { margin-top: 6px; }

.sub-cost { text-align: right; flex: none; }
.sub-cost-amount {
  display: block;
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 30px; color: var(--navy); letter-spacing: -.8px;
}
.sub-cost-per { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

/* Lime, not amber. This is good news — the member owes nothing —
   and the warning palette is reserved for things that need acting
   on. Colour is a signal, not decoration. */
.sub-trial {
  display: flex; align-items: center; gap: 13px;
  margin-top: 22px; padding: 15px 18px;
  background: #F4F9E6; border: 1px solid #DCEAB0; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55; color: var(--navy);
}
.sub-trial-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--lime); flex: none;
}
.sub-days {
  margin-left: auto; flex: none;
  background: var(--navy); color: #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}

/* ── Feature lists ────────────────────────────────────────────── */
.sub-feats { list-style: none; margin: 6px 0 0; padding: 0; }
.sub-feats li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; line-height: 1.5; color: var(--text-dark);
  padding: 8px 0;
}
.sub-feats svg { width: 16px; height: 16px; color: var(--lime); flex: none; margin-top: 3px; }
.sub-feats--tight li { padding: 6px 0; font-size: 14.5px; }

.sub-note {
  margin-top: 14px; padding: 13px 15px;
  background: #F1F4FA; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: #4A5568;
}

/* ── What changes ─────────────────────────────────────────────── */
.sub-change { border-left: 3px solid var(--border-grey); }

/* ── Upgrade ──────────────────────────────────────────────────── */
.sub-upgrade { border: 1.5px solid var(--navy); }
.sub-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.sub-soon { margin-top: 14px; }

/* ── Verification ─────────────────────────────────────────────── */
.sub-verif { background: #F7F8FA; }

/* Bounded on both sides — a max-width query appended late that has
   no floor is how a desktop layout quietly inherits a phone rule. */
@media (max-width: 600px) {
  .sub-hero-row { flex-direction: column; gap: 14px; }
  .sub-cost { text-align: left; }
  .sub-trial { flex-wrap: wrap; }
  .sub-days { margin-left: 0; }
  .sub-actions .jml-btn { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSFER FLOW  —  append to css/style.css
   (adds to the .sub- block already there; nothing above changes)
   ═══════════════════════════════════════════════════════════════ */

/* ── Monthly / yearly ─────────────────────────────────────────
   Two real cards, each priced. A toggle that only changes a number
   elsewhere on the page makes the member hunt for the effect. */
.sub-cycles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.sub-cycle {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  border: 1.5px solid var(--border-grey); background: #fff;
  border-radius: 16px; padding: 18px 18px 16px;
  transition: border-color .15s, background .15s;
}
.sub-cycle:hover { border-color: #B9C2D6; }
.sub-cycle.is-on {
  border-color: var(--navy); background: #F7F9FE;
  box-shadow: 0 2px 10px rgba(0,30,103,.09);
}
.sub-cycle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sub-cycle-flag {
  position: absolute; top: -10px; right: 14px;
  background: var(--lime); color: var(--navy);
  border-radius: 999px; padding: 3px 10px;
  font-size: 10.5px; font-weight: 800;
}
.sub-cycle-name { display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.sub-cycle-price {
  display: block; font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 26px; color: var(--navy); letter-spacing: -.6px; margin-top: 5px;
}
.sub-cycle-per { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ── Bank details ─────────────────────────────────────────────
   Also used by the pending panel. Deliberately NOT .ud-list — that
   class lives in admin.css and does not exist on TalentHub, which
   rendered the panel as run-together text. A class name is not
   shared just because both consoles use the same brand. */
.sub-bank { margin-top: 18px; border: 1px solid var(--border-grey); border-radius: 14px; overflow: hidden; }
.sub-bank-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--border-grey); font-size: 14.5px;
}
.sub-bank-row:first-child { border-top: 0; }
.sub-bank-row:nth-child(even) { background: #F7F9FE; }
.sub-bank-k { font-weight: 600; color: var(--text-muted); font-size: 13px; }
.sub-bank-v { font-weight: 700; color: var(--navy); text-align: right; }
.sub-bank-amount { font-size: 18px; }
.sub-bank-num {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; cursor: pointer; background: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 19px; font-weight: 700; color: var(--navy);
  border-radius: 9px; padding: 7px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sub-copy-hint {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: .7px;
  color: #8A94A8; text-transform: uppercase;
}
.sub-bank-num.is-copied, .sub-ref--copy.is-copied { background: #ECFDF5; }
.sub-bank-num.is-copied .sub-copy-hint::after,
.sub-ref--copy.is-copied .sub-copy-hint::after { content: 'ied'; }

/* ── The reference ────────────────────────────────────────────
   The only thing connecting this member's transfer to a line on
   JML's statement. It gets the loudest treatment on the panel and
   its own instruction, because a transfer without it cannot be
   matched to anybody. */
.sub-refnote, .sub-ref-box {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: #F4F9E6; border: 1px solid #DCEAB0;
}
.sub-ref-label {
  display: block; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.3px; color: #5C7A00;
}
.sub-ref {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--navy); margin-top: 7px;
}
.sub-ref--copy {
  display: inline-flex; align-items: center; gap: 12px;
  border: 0; cursor: pointer; background: #fff;
  border-radius: 10px; padding: 8px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sub-refhelp { display: block; font-size: 12.5px; color: #5C7A00; margin-top: 7px; line-height: 1.5; }

/* The pending card is the one panel that must never be missed. */
.sub-pending { border: 1.5px solid var(--lime); }

@media (max-width: 600px) {
  .sub-cycles { grid-template-columns: 1fr; }
  .sub-ref { font-size: 21px; }
  .sub-bank-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sub-bank-v { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   PRICING PAGE ADDITIONS  —  APPEND TO THE END OF style.css
   ---------------------------------------------------------------
   Paste this block at the very bottom of style.css, after the
   .sub- subscription rules. Change nothing above it.

   ── WHY A NEW PREFIX ───────────────────────────────────────────
   .prx- , not .pr- . The existing .pr- rules style the parts of
   the page that did not change — the hero, the cards, the role
   switcher, the verification band, the "how paying works" grid —
   and every one of them is still in use.

   Adding new .pr- rules underneath them would mean two blocks of
   the stylesheet both claiming that namespace, hundreds of lines
   apart, and the next person to adjust a card would have to find
   both. A new prefix says at a glance which block owns a rule.

   ── WHAT IS DELIBERATELY REUSED ────────────────────────────────
   .pr-card, .pr-flag, .pr-feats, .pr-freenow, .pr-verif, .pr-faq,
   .pr-final and .jml-btn are all reused as they are. Restating a
   card definition here would produce two cards that drift apart
   the first time one of them is touched.

   ── RESPONSIVE ─────────────────────────────────────────────────
   The media queries at the bottom are bounded on both sides where
   an earlier rule could otherwise be reached into. A max-width
   query appended at the end of a stylesheet with no floor is how a
   desktop layout quietly inherits a phone rule.
   ═══════════════════════════════════════════════════════════════ */

/* ── 2 · BUSINESS MODEL + FREE VERIFICATION ─────────────────────
   Navy band. This is the argument, not the offer, so it is given
   the brand's most serious surface and sits above every price. */
.prx-model {
  background: var(--navy);
  margin-top: 56px;
  padding: 66px 24px;
}
.prx-model-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.prx-model-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--lime);
}
.prx-model-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(26px, 4.4vw, 42px); line-height: 1.12;
  letter-spacing: -1.2px; color: #fff; margin-top: 14px;
}

/* The four-step ladder. A numbered ROW on desktop and a numbered
   COLUMN on phones — the steps are sequential, and a sequence that
   wraps into an unpredictable grid stops reading as a sequence. */
.prx-ladder {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
}
.prx-ladder li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 10px 18px 10px 10px;
}
.prx-ladder-n {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--lime); color: var(--navy);
  font-size: 12.5px; font-weight: 800;
}
.prx-ladder-t { font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: -.2px; }

.prx-model-p {
  font-size: 16px; line-height: 1.65; color: #B8C4DE;
  margin: 26px auto 0; max-width: 560px;
}

/* The free-verification note, inside the same band. Lime-edged so
   it reads as the reassurance it is, rather than more argument. */
.prx-idfree {
  margin-top: 34px; text-align: left;
  background: rgba(154,201,0,.09);
  border: 1px solid rgba(154,201,0,.3);
  border-radius: 18px; padding: 24px 26px;
}
.prx-idfree-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--lime);
}
.prx-idfree p {
  font-size: 14.5px; line-height: 1.7; color: #C6D2E8; margin-top: 10px;
}

/* ── 3 + 4 · LAUNCH PROMOTION AND COUNTDOWN ─────────────────────
   Lime surface, not navy: this is the good news on the page and it
   must not look like another block of argument. */
.prx-launch { max-width: 1080px; margin: 0 auto; padding: 56px 24px 0; }
.prx-launch-inner {
  background: var(--lime-surface);
  border: 1px solid #DCEAB0;
  border-radius: 24px;
  padding: 38px 30px;
  text-align: center;
}
.prx-launch-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--lime-dark);
}
.prx-launch-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(22px, 3.6vw, 34px); line-height: 1.15;
  letter-spacing: -1px; color: var(--navy); margin-top: 10px;
}
.prx-launch-p {
  font-size: 15px; line-height: 1.68; color: #4A5568;
  margin: 14px auto 0; max-width: 620px;
}

.prx-count {
  display: flex; justify-content: center; gap: 10px; margin-top: 28px;
}
.prx-count-cell {
  background: #fff; border: 1px solid #DCEAB0; border-radius: 14px;
  padding: 14px 8px; min-width: 82px;
}
/* Tabular figures. Proportional digits change width as they tick,
   which makes the whole row shuffle once a second and reads as a
   fault rather than as urgency. */
.prx-count-n {
  display: block;
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: 32px; line-height: 1; letter-spacing: -1px; color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.prx-count-l {
  display: block; margin-top: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted);
}
.prx-launch-foot {
  font-size: 13px; color: var(--text-muted); margin-top: 20px;
}

/* ── 5 · SELECTOR HEADING AND CATEGORY EXPLANATION ──────────────
   .prx-explain is the sentence that tells a visitor whether this
   tab is them, so it is heavier and darker than the working
   sub-line below it. Two lines of different weight, in the right
   order — the important one first. */
.prx-controls-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.9px;
  color: var(--navy); margin-bottom: 22px;
}
.prx-explain {
  font-size: 16px; font-weight: 700; color: var(--navy);
  letter-spacing: -.2px; margin-top: 16px;
}

/* ── WHY UPGRADE? ───────────────────────────────────────────── */
.prx-why { max-width: 1080px; margin: 0 auto; padding: 48px 24px 0; text-align: center; }
.prx-why-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.9px; color: var(--navy);
}
.prx-why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 26px; text-align: left;
}
.prx-why-item {
  background: var(--navy-surface); border-radius: 16px; padding: 20px 18px;
}
.prx-why-item h4 {
  font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: -.2px;
}
.prx-why-item p { font-size: 13.5px; line-height: 1.6; color: #4A5568; margin-top: 7px; }

/* ── FREE FOREVER BADGE ─────────────────────────────────────────
   Deliberately QUIETER than .pr-freenow. That one announces a
   promotion and should catch the eye; this one states a permanent
   fact, and a permanent fact that shouts looks like a promotion
   about to end. */
.prx-forever {
  display: inline-block; margin-top: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--navy); background: var(--navy-light);
  border-radius: 999px; padding: 5px 11px;
}

/* ── THE PROFESSIONAL'S PROMISE ─────────────────────────────────
   Its own treatment because in this market it is not a feature, it
   is the sentence that decides whether a jobseeker trusts the
   platform. Lime bar on the left, not a red warning: it is good
   news being stated firmly, not a caution. */
.prx-shout {
  margin-top: 20px;
  border-left: 3px solid var(--lime);
  background: var(--lime-surface);
  border-radius: 0 12px 12px 0;
  padding: 13px 16px;
  font-size: 14px; font-weight: 800; line-height: 1.5;
  color: var(--navy); letter-spacing: -.2px;
}

/* ── 8 · FEATURE COMPARISON ───────────────────────────────────── */
.prx-compare { max-width: 900px; margin: 0 auto; padding: 72px 24px 0; }
.prx-compare-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(24px, 3.8vw, 34px); letter-spacing: -1px;
  color: var(--navy); text-align: center;
}
.prx-compare-sub {
  font-size: 14.5px; color: var(--text-muted); text-align: center; margin-top: 10px;
}

/* The wrapper scrolls, the table does not shrink. A comparison
   table squeezed to 320px stops being comparable. */
.prx-table-wrap {
  margin-top: 26px; overflow-x: auto;
  border: 1px solid #E4E8F0; border-radius: 18px;
}
.prx-table { width: 100%; min-width: 460px; border-collapse: collapse; }
.prx-table th, .prx-table td {
  padding: 14px 16px; text-align: center; font-size: 14px;
  border-bottom: 1px solid #EDF0F5;
}
.prx-table tbody tr:last-child td { border-bottom: 0; }
.prx-table thead th {
  font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-muted); background: #F7F8FA;
}
.prx-th-feat, .prx-td-feat { text-align: left; }
.prx-td-feat { font-weight: 600; color: var(--navy); }

/* The paid column tinted end to end, header included. A reader
   scanning across a wide row loses which column they are in; the
   tint is the guide rail. */
.prx-th-pro { color: var(--navy) !important; background: #F1F6DF !important; }
.prx-td-pro { background: #FBFDF3; }

.prx-yes { display: inline-grid; place-items: center; color: var(--lime-dark); }
.prx-yes svg { width: 17px; height: 17px; }
.prx-no { color: #C2C8D4; font-weight: 700; }
.prx-val { font-size: 13.5px; font-weight: 700; color: var(--navy); }

/* ── 12 · DATA AND ACCOUNT PROTECTION ─────────────────────────── */
.prx-protect { max-width: 1080px; margin: 0 auto; padding: 72px 24px 0; }
.prx-protect-inner {
  background: var(--navy-surface); border-radius: 24px; padding: 40px 32px;
}
.prx-protect-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(24px, 3.8vw, 34px); letter-spacing: -1px;
  color: var(--navy); text-align: center;
}
.prx-protect-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px;
}
.prx-protect-item {
  background: #fff; border-radius: 16px; padding: 22px 22px;
}
.prx-protect-item h4 {
  font-size: 15.5px; font-weight: 800; color: var(--navy); letter-spacing: -.2px;
}
.prx-protect-item p { font-size: 14px; line-height: 1.65; color: #4A5568; margin-top: 8px; }

/* ── 13 · FAQ ACCORDION ─────────────────────────────────────────
   Native <details>. An accordion built in JavaScript is an
   accordion that does not open if the script fails, and an FAQ
   that cannot open is worse than a plain list. */
.prx-faq2 { max-width: 820px; margin: 0 auto; padding: 72px 24px 0; }
.prx-faq2-h {
  font-family: 'Fraunces', serif; font-weight: 900;
  font-size: clamp(24px, 3.8vw, 34px); letter-spacing: -1px;
  color: var(--navy); text-align: center;
}
.prx-faq2-list { margin-top: 30px; }
.prx-q {
  border: 1px solid #E4E8F0; border-radius: 14px;
  padding: 2px 20px; margin-bottom: 10px; background: #fff;
}
.prx-q summary {
  cursor: pointer; list-style: none;
  padding: 16px 28px 16px 0; position: relative;
  font-size: 15.5px; font-weight: 700; color: var(--navy); letter-spacing: -.2px;
}
.prx-q summary::-webkit-details-marker { display: none; }
.prx-q summary::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.prx-q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.prx-q summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.prx-q p {
  font-size: 14.5px; line-height: 1.7; color: #4A5568;
  padding: 0 0 18px; margin: 0;
}
.prx-q[open] { border-color: #D6DCF0; background: #FCFDFF; }

/* ── 14 · FINAL POSITIONING STRIP ─────────────────────────────── */
.prx-position { max-width: 820px; margin: 0 auto; padding: 72px 24px 0; text-align: center; }
.prx-position-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prx-position-list li {
  font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.2px;
  line-height: 1.5;
}
.prx-position-foot {
  margin-top: 18px; font-size: 15px; color: var(--text-muted);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .prx-why-grid      { grid-template-columns: repeat(2, 1fr); }
  .prx-protect-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prx-model         { padding: 48px 20px; }
  .prx-ladder        { flex-direction: column; align-items: stretch; }
  .prx-ladder li     { justify-content: flex-start; }
  .prx-idfree        { padding: 20px 18px; }

  .prx-launch        { padding-top: 40px; }
  .prx-launch-inner  { padding: 28px 18px; }
  .prx-count         { gap: 7px; }
  .prx-count-cell    { min-width: 0; flex: 1 1 0; padding: 12px 4px; }
  .prx-count-n       { font-size: 24px; }
  .prx-count-l       { font-size: 9.5px; letter-spacing: .6px; }

  .prx-why-grid      { grid-template-columns: 1fr; }
  .prx-protect-inner { padding: 28px 18px; }
  .prx-compare       { padding-left: 16px; padding-right: 16px; }
  .prx-q             { padding: 2px 16px; }
}

/* ── Growth Partner attribution on the signup form ──────────── */
.gp-optional{
  font-weight:400;
  font-size:12.5px;
  color:var(--text-muted);
  margin-left:6px;
  text-transform:none;
  letter-spacing:0;
}
.gp-hint{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.4;
  color:var(--text-muted);
  min-height:18px;
}
.gp-hint--ok{ color:var(--lime-dark); }
.gp-hint--bad{ color:#92400E; }

/* ═══════════════════════════════════════════════════════════════
   GROWTH PARTNER — public check page (.gpp-)
   ---------------------------------------------------------------
   Prefix is gpp-, NOT gp-. That one belongs to the referral field
   on the signup form. Two unrelated features sharing a prefix is
   the fault that once put vi- on both the verification screen and
   the homepage verification band.
   ═══════════════════════════════════════════════════════════════ */

/* ── The warning ────────────────────────────────────────────────
   Above the list, never collapsed. Somebody who reads one thing on
   this page must read this one. Amber, not red: the reader has done
   nothing wrong. */
.gpp-warn {
  max-width: 780px;
  margin: 0 auto 28px;
  padding: 22px 24px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #D97706;
  border-radius: var(--r-lg);
}
.gpp-warn .safety-title { font-size: 16px; margin-bottom: 12px; }
.gpp-warn-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #FDE68A;
  font-size: 13px;
  line-height: 1.6;
  color: #78350F;
}
.gpp-warn-foot a { color: #92400E; font-weight: 700; text-decoration: underline; }

/* ── The check box ──────────────────────────────────────────── */
.gpp-check { max-width: 560px; margin: 0 auto 30px; text-align: center; }
.gpp-check-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gpp-check .field-input {
  text-align: center;
  font-size: 16px;
  padding: 14px 16px;
}
.gpp-check-hint {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--text-light);
}
.gpp-check-hint strong { color: var(--text-muted); font-weight: 700; }

/* ── The list ───────────────────────────────────────────────── */
.gpp-count {
  max-width: 780px;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}
.gpp-count--ok { color: var(--lime-dark); font-weight: 700; }

.gpp-grid {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .gpp-grid { grid-template-columns: 1fr; } }

.gpp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
}
.gpp-card-main { min-width: 0; }

/* The CODE carries the weight, not the name. A name can be claimed
   by anybody; a code is the thing printed on whatever they were
   shown, and the thing a person can compare character by character
   while standing in front of them. Monospace so 0 and O, 1 and l
   cannot be confused at the exact moment that matters. */
.gpp-code {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--navy);
}
.gpp-name {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gpp-pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--lime-dark);
  background: var(--lime-surface);
  border: 1px solid var(--lime-light);
  padding: 5px 11px;
  border-radius: var(--r-pill);
}

/* ── The negative result ────────────────────────────────────────
   The loudest thing on the page, and the whole reason it exists.
   Every other directory treats "no results" as a quiet grey line;
   here it is the safety-critical output, because it is the moment
   somebody is being defrauded.

   Red HERE, where amber is used above — and the difference is
   deliberate. The warning at the top is general advice to a reader
   who is fine. This is a specific finding about a specific person
   standing in front of them. */
.gpp-none {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 28px;
  text-align: center;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: var(--r-xl);
}
.gpp-none-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #DC2626;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 900;
}
.gpp-none-h {
  font-family: 'Fraunces', serif;
  font-size: 23px;
  font-weight: 900;
  color: #991B1B;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.gpp-none-p {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #7F1D1D;
}
.gpp-none-p strong { font-weight: 800; }
.gpp-none-acts { margin-top: 22px; }
.gpp-none-acts .jml-btn { width: 100%; justify-content: center; }
.gpp-none-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #FCA5A5;
  font-size: 12.5px;
  line-height: 1.55;
  color: #9F1239;
}

/* Programme off, nobody appointed, or the list failed to load.
   Still an ANSWER, but not an accusation — nobody has been checked
   and found wanting, so the red treatment would be wrong. */
.gpp-none--quiet {
  background: var(--navy-surface);
  border-color: var(--border-grey);
}
.gpp-none--quiet .gpp-none-h { color: var(--navy); }
.gpp-none--quiet .gpp-none-p { color: var(--text-body); }

@media (max-width: 600px) {
  .gpp-warn { padding: 18px 18px; border-radius: var(--r-md); }
  .gpp-none { padding: 26px 20px; }
  .gpp-none-h { font-size: 20px; }
}

/* The verify link inside the attribution strip. Underlined rather
   than coloured differently — the strip is already lime, and a
   second colour inside it would read as a warning about the
   partner rather than an offer to check them. */
.gp-verify {
  color: var(--lime-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gp-verify:hover { color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES  (.lgl-)  —  privacy policy, terms
   ---------------------------------------------------------------
   One block, two pages. A legal document is READ, not scanned, so
   almost everything here serves legibility: a narrow measure, a
   larger body size than the rest of the site, and generous space
   between sections.

   Prefix is lgl-, not legal- or lg-. lg- reads as "large" beside
   --r-lg and would be misread within a week.
   ═══════════════════════════════════════════════════════════════ */

/* ── The draft banner ────────────────────────────────────────
   Deliberately ugly. It is meant to be removed, and a banner that
   looks designed is a banner somebody leaves in place. */
.lgl-draft {
  background: #7F1D1D;
  color: var(--white);
  padding: 14px var(--h-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.lgl-draft strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  background: var(--white);
  color: #7F1D1D;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.lgl-draft span { color: rgba(255,255,255,0.9); max-width: 900px; }
.lgl-draft em { font-style: normal; font-weight: 700; color: var(--white); }

/* ── Head ────────────────────────────────────────────────────── */
.lgl-head {
  padding: 56px var(--h-pad) 44px;
  background: var(--navy-surface);
  border-bottom: 1px solid var(--border-grey);
}
.lgl-head-inner { max-width: 1120px; margin: 0 auto; }
.lgl-title {
  margin-top: 16px;
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -1.2px;
}
.lgl-lede {
  margin-top: 14px;
  max-width: 620px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-body);
}
.lgl-meta { margin-top: 18px; font-size: 13px; color: var(--text-muted); }
.lgl-meta strong { color: var(--navy); }

/* ── Layout ──────────────────────────────────────────────────
   Contents beside the text on desktop, above it on phones. The
   TOC is FIRST in the markup so it reads in the right order for
   a screen reader and on a narrow screen; the grid places it
   second visually on wide ones. */
.lgl-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px var(--h-pad) 88px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .lgl-wrap { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 64px; }
}

.lgl-toc {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 900px) {
  .lgl-toc {
    position: static;
    background: var(--surface-grey);
    border: 1px solid var(--border-grey);
    border-radius: var(--r-lg);
    padding: 16px 18px;
  }
}
.lgl-toc-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}
.lgl-toc a {
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.4;
  transition: color .15s ease;
}
.lgl-toc a:hover { color: var(--navy); }

/* ── Body ────────────────────────────────────────────────────
   16.5px and a 1.75 line height. Larger than the rest of the
   site, on purpose: this is the one page somebody actually reads
   top to bottom, usually because something has gone wrong. */
.lgl-body { max-width: 680px; font-size: 16.5px; line-height: 1.75; color: var(--text-body); }
.lgl-body p { margin-bottom: 18px; }
.lgl-body strong { color: var(--text-dark); font-weight: 700; }
.lgl-body a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.lgl-intro {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-grey);
  font-size: 17.5px;
  color: var(--text-dark);
}

/* scroll-margin so an anchored heading is not hidden behind the
   sticky site header. */
.lgl-h2 {
  margin: 46px 0 16px;
  padding-top: 8px;
  scroll-margin-top: 88px;
  font-family: 'Fraunces', serif;
  font-size: 25px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.6px;
}
.lgl-h3 {
  margin: 28px 0 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
}

.lgl-list { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.lgl-list li { margin-bottom: 7px; }

.lgl-mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px;
  color: var(--navy);
  background: var(--surface-grey);
  padding: 2px 7px;
  border-radius: var(--r-sm);
}

/* ── The key facts block ─────────────────────────────────────
   Used for the three statements about identity verification that
   most members will never have been told by any other platform:
   no biometrics, no document number, no government lookup. They
   are the reassurance this policy exists to give, so they are
   lifted out of the prose rather than buried in it. */
.lgl-key {
  margin: 20px 0 24px;
  padding: 20px 22px;
  background: var(--lime-surface);
  border: 1px solid var(--lime-light);
  border-left: 4px solid var(--lime);
  border-radius: var(--r-md);
  font-size: 15.5px;
}
.lgl-key p:last-child { margin-bottom: 0; }

/* ── To be confirmed ─────────────────────────────────────────
   Amber, named owner, and visible in the rendered page rather
   than hidden in a comment. A gap somebody can SEE is a gap
   somebody fills. A TODO in the source is a gap that ships. */
.lgl-tbc {
  margin: 18px 0 24px;
  padding: 16px 18px;
  background: #FFFBEB;
  border: 1px dashed #D97706;
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.6;
  color: #78350F;
}
.lgl-tbc strong {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #92400E;
}

/* ── Tables ──────────────────────────────────────────────────── */
.lgl-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 15px;
}
.lgl-table th {
  text-align: left;
  padding: 11px 14px;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.lgl-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-grey);
  vertical-align: top;
  line-height: 1.6;
}
.lgl-table tr:last-child td { border-bottom: none; }
.lgl-table tbody tr:nth-child(even) td { background: var(--surface-grey); }

@media (max-width: 600px) {
  .lgl-draft { padding: 12px 20px; }
  .lgl-head { padding: 40px 24px 32px; }
  .lgl-body { font-size: 16px; }
  .lgl-h2 { font-size: 22px; margin-top: 38px; }
  .lgl-table { font-size: 14px; }
  .lgl-table th, .lgl-table td { padding: 10px 11px; }
}

/* The partner code, in the share block. Monospace and larger than
   the link beside it, because this is the string a partner reads
   aloud down a phone — and 0 against O, 1 against l, is exactly
   the confusion that costs somebody their commission. */
.gpd-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 18px;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   SHARE ROW  (.sh-)  —  artisan profile + Growth Partner dashboard
   ---------------------------------------------------------------
   Icons rather than labelled buttons, and the reason is width. Six
   text buttons wrap into three ragged rows on a phone and read as
   a form to be filled in. Six icons sit on one line and read as a
   choice to be made — and every one of these logos is recognised
   faster than the word for it.

   Prefix is sh-, matching share.js which owns them.
   ═══════════════════════════════════════════════════════════════ */

.sh-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.sh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-grey);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, border-color .15s ease,
              background .15s ease, transform .15s ease;
}
.sh-btn svg { width: 20px; height: 20px; }

/* Grey at rest, navy on hover. Six saturated logos in a row is a
   toolbar that shouts; grey lets the ONE that matters carry the
   colour and the rest arrive when reached for. */
.sh-btn:hover {
  transform: translateY(-2px);
  border-color: transparent;
  color: var(--white);
  background: var(--navy);
}

/* WhatsApp is the exception and keeps its colour at rest. In this
   market it is not one option among six — it is how a link
   actually travels. The others exist so nobody is forced through
   it. */
.sh-btn--wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--white);
}
.sh-btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--white); }

/* The device's own share sheet. Navy at rest where it is available,
   because it reaches every app the person actually has — including
   ones nobody would think to list. Hidden entirely where
   navigator.share does not exist. */
.sh-btn--native {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.sh-btn--native:hover { background: var(--navy-mid); border-color: var(--navy-mid); }

.sh-btn--copy.is-copied {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy);
  transform: none;
}

/* An icon cannot say "Copied", so this line does. A click with no
   visible result is indistinguishable from a broken button, and the
   next thing anybody does is click it again.

   min-height reserves the space so nothing shifts when it appears. */
.sh-note {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.sh-note--ok { color: var(--lime-dark); }

/* Fold-class screens: seven 44px targets plus gaps will not fit on
   one row at 344px, so it wraps to two — which is correct. Tighten
   the gap rather than shrinking the buttons; a share target below
   44px is a share target that gets mis-tapped. */
@media (max-width: 420px) {
  .sh-row { gap: 8px; }
}

.gpd-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 18px;
  letter-spacing: 1px;
}

/* ── The document-number reassurance ─────────────────────────
   Quiet on purpose. This is the most sensitive thing TalentHub
   asks anybody for, and the instinct is to dress it in padlocks
   and shields — which is exactly the visual language of the
   phishing pages this member has been warned about. Restraint
   reads as routine, and routine is what a legitimate request
   looks like.

   Grey, thin, small, above the field. Same reasoning as
   .trust-box on the sign-in page. */
.vi-safe {
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: var(--surface-grey);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
}
.vi-safe p {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.vi-safe p:last-child { margin-bottom: 0; }
.vi-safe strong { color: var(--text-body); font-weight: 700; }

/* ── The instruction line, under the H1 ───────────────────────────
   Promoted out of the client's paragraph into its own line because
   it is the whole message of the page and it has to survive being
   skimmed by somebody standing in front of a stranger, on a phone,
   in a hurry.

   Lime rather than navy: the heading above it is already navy, and
   a second navy line at this weight reads as part of the heading
   and gets skipped. This is the one line that must not be skipped. */
.gpp-engage {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime-dark);
}

/* ── The second warning paragraph ─────────────────────────────────
   "Free to join" alone is the sentence a fraudster works AROUND —
   the basic account is free, yes, but the premium one you pay to
   me. This paragraph names where real money actually goes, so it
   sits at the same weight as the sentence above it rather than
   reading as a footnote. */
.gpp-warn-p2 {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #4A5568;
}
.gpp-warn-p2 strong { color: var(--navy); font-weight: 700; }

/* ── The hard line ───────────────────────────────────────────────
   The single sentence the whole page exists to deliver. Given its
   own rule above it so it separates from the paragraph it follows
   — a reader scanning for the "so what" lands here. */
.gpp-warn-hard {
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(146, 64, 14, .22);
  font-size: 15.5px;
  line-height: 1.65;
  color: #7C2D12;
  font-weight: 600;
}
.gpp-warn-hard strong { font-weight: 800; }

/* ── Footer socials ──────────────────────────────────────────────
   Now injected by th-social.js into an empty container, so the
   container must hold its shape before anything lands in it —
   otherwise the footer reflows a few pixels after paint on every
   page load, which reads as the page being broken.

   min-height matches the icon box exactly. six icons + gaps wraps
   cleanly on a 380px screen. */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .07);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-social:hover,
.footer-social:focus-visible {
  color: #fff;
  background: rgba(154, 201, 0, .22);
  transform: translateY(-1px);
}
/* Keyboard users must be able to SEE where they are. The default
   outline is invisible against navy. */
.footer-social:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .gpp-engage      { font-size: 13.5px; letter-spacing: .1em; }
  .gpp-warn-hard   { font-size: 14.5px; }
  .footer-socials  { gap: 8px; }
}

.gpp-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* .gpp-card-main keeps the row; the pill sits beside it and is
   pushed to the far end. Both existed before — only the wrap
   behaviour around them is new. */
.gpp-card-main { flex: 1 1 auto; min-width: 0; }
.gpp-pill      { flex: 0 0 auto; }

/* ── The scope line ──────────────────────────────────────────────
   flex-basis 100% forces it onto its own row under the other two,
   whatever they do above it.

   This is the most useful sentence on the card and it is set
   QUIETLY on purpose. It is not a claim about the person — it is a
   CEILING on them, and a ceiling stated in bold reads as a
   credential. The reader should absorb it as a limit, not as an
   endorsement. Muted colour, normal weight, small.

   The top border separates it from the identity above: those two
   lines answer "who is this", this one answers "what may they do".
   Different questions, visibly different rows. */
.gpp-card-scope {
  flex: 0 0 100%;
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid #E8ECF5;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-muted);
}

/* ── "Everyone currently authorised is listed here." ─────────────
   Appended to the count line rather than given its own paragraph,
   because it is a qualifier on that count and not a second fact.

   It is the sentence that gives an ABSENCE its meaning. Set at the
   same size as the count but muted, so it reads as the small print
   of the number rather than competing with it. */
.gpp-count-all {
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Pill overflow guard ─────────────────────────────────────────
   "Active & authorised" is roughly twice the length of the
   "Authorised" it replaced. On a 360px screen a long pill beside a
   long Yoruba or Igbo full name will either squash the name or
   push itself off the card.

   Below 560px the pill drops to its own full-width row above the
   scope line and left-aligns. It stops competing for horizontal
   space entirely rather than being made smaller, which is what
   would happen if this were solved with font-size. */
@media (max-width: 560px) {
  .gpp-card       { gap: 8px 10px; }
  .gpp-pill       { flex: 0 0 100%; align-self: flex-start; width: max-content; }
  .gpp-card-scope { font-size: 12.5px; padding-top: 8px; }
}

/* ── "From a partner link you opened earlier." ───────────────────
   Its own line, above the attribution, because it answers a
   question the member is asking BEFORE they read the name: why is
   there a stranger's name on my form?

   Deliberately quiet — smaller, muted, no icon. This is a fact
   about their own browser, not a warning and not a problem. Styled
   as an alert it would suggest something had gone wrong, and
   nothing has. */
.gp-hint-recalled {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── "Not me — remove" ──────────────────────────────────────────
   Sits at the END of the line, after "Check this person", and that
   order is the argument the sentence makes: here is who we think
   introduced you, here is how to check them, and here is how to
   say it was not them. Verification before rejection.

   Muted rather than red. Removing an attribution is an ordinary
   correction, not a complaint — and colouring it as a warning
   would push members toward clearing a claim that is very often
   correct, which costs a partner a commission they earned. */
.gp-clear {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.gp-clear:hover,
.gp-clear:focus-visible {
  color: var(--navy);
}
.gp-clear:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 3px;
}

/* On a narrow screen the hint already carries a name, a code and
   two links. Let it breathe rather than forcing it onto fewer
   lines — this is the one place on the form where a member is
   being asked to read carefully. */
@media (max-width: 560px) {
  .gp-hint-recalled { font-size: 11.5px; }
  .gp-hint          { line-height: 1.7; }
}

.sub-credit {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 30, 103, .12);
  border-radius: 10px;
  background: rgba(0, 30, 103, .03);
}

.sub-credit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sub-credit-label {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0, 30, 103, .62);
}

.sub-credit-amt {
  font-size: 1.15rem;
  color: #001E67;
}

/* The bar. Deliberately thin — it is a fact about how far along
   somebody is, not a gauge on a dashboard. */
.sub-credit-bar {
  margin: 10px 0 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 30, 103, .10);
  overflow: hidden;
}

.sub-credit-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #9AC900;
}

.sub-credit-note {
  margin: 6px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(0, 30, 103, .70);
}

/* ── READY ─────────────────────────────────────────────────────
   The only state with a button, so the only state that earns the
   lime edge. */
.sub-credit--ready {
  border-color: rgba(154, 201, 0, .55);
  background: rgba(154, 201, 0, .08);
}

.sub-credit-btn {
  width: 100%;
  margin-top: 12px;
}

/* The full panel shown after the member chooses credit. Shares the
   .sub-upgrade card shell; this only tints the edge so the step is
   visibly a different one from the transfer step. */
.sub-credit-panel {
  border-left: 3px solid #9AC900;
}

@media (max-width: 560px) {
  .sub-credit-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ── THE BALANCE ─────────────────────────────────────────────
   clamp(), not a fixed size with a phone override. A single
   declaration that is right at every width cannot fall out of step
   with a breakpoint somebody adds later. */
.rfr-balance {
  margin: 8px 0 2px;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--navy);
}

.rfr-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-grey);
  font-size: 13.5px;
  color: var(--text-muted);
}
.rfr-mini strong { color: var(--navy); font-weight: 700; }

/* ── PROGRESS ────────────────────────────────────────────────
   Thin on purpose. It is a fact about how far along somebody is,
   not a gauge on a dashboard. */
.rfr-bar {
  margin: 14px 0 12px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--navy-light);
  overflow: hidden;
}
.rfr-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--lime);
}

/* ── THE FUNNEL ──────────────────────────────────────────────── */
.rfr-funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}

.rfr-stage {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-grey);
  border-radius: var(--r-md);
  background: var(--surface-grey);
}

.rfr-stage-n {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--navy);
}
.rfr-stage-k {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.rfr-stage-h {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* The stage that pays. A lime EDGE, not a lime fill — filling it
   would make the other two columns read as failures, and they are
   not: they are people mid-journey. */
.rfr-stage--paid {
  border-color: var(--lime);
  background: var(--lime-surface);
}

/* ── THE PEOPLE ──────────────────────────────────────────────── */
.rfr-people {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

/* Wraps rather than truncating. v1 had white-space:nowrap with an
   ellipsis on the name, which on a Fold cut "Chukwudubem O." down
   to three letters — the one piece of information the row exists
   to carry. A long Nigerian name is not an edge case here; it is
   the common case. Let it take two lines. */
.rfr-person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-grey);
}
.rfr-person:last-child { border-bottom: 0; }

.rfr-person-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.rfr-person-stage {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--text-muted);
}
.rfr-person-amt {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--lime-dark);
}

/* ── THE RULES ───────────────────────────────────────────────
   Reuses .sub-feats from the subscription screen for the ticks, so
   the two pages read as one product. Only the spacing differs —
   these are sentences, not feature labels. */
.rfr-rules li {
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.6;
  padding: 7px 0;
}

/* Fold-class screens. The funnel's auto-fit already handles most
   widths; below 400px three columns of 150px cannot fit two across
   without crushing the hint text, so force one. */
@media (max-width: 400px) {
  .rfr-funnel { grid-template-columns: 1fr; }
  .rfr-person-name { flex: 1 1 100%; }
}

.ref-notice {
  margin: 18px 0 4px;
  padding: 16px 18px;
  background: var(--navy-surface);
  border: 1px solid var(--navy-light);
  border-radius: var(--r-md);
}
 
/* Navy, not lime and not amber. Lime would read as a promotion —
   "you were invited, here is a benefit" — and this is not an offer.
   Amber would read as a warning, and nothing is wrong. It is a
   plain statement of fact and it should look like one. */
.ref-notice-h {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}
 
.ref-notice-p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
}
 
.ref-notice-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--navy-light);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}
 
/* 16px and never smaller. A checkbox controlling a privacy choice
   is not a place to save space, and the label is the tap target on
   a phone — which is why the whole thing is a <label>. */
.ref-notice-opt input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--navy);
  cursor: pointer;
}

/* ── Referral attribution on the signup form (.ref-) ──────────
   Prefix is ref-, and the three-way split is deliberate: gp- is
   the partner field directly above this on the same form, rfr- is
   the invite dashboard. Merging any two would mean a change to one
   screen silently altering another.

   Lime, where the partner strip is navy. Not decoration: a member
   invitation and a partner introduction have different money
   attached and different rules, and a visitor who has seen both
   should not have to read to tell them apart. */
.ref-field {
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: var(--lime-surface);
  border: 1px solid var(--lime-light);
  border-left: 3px solid var(--lime);
  border-radius: var(--r-md);
}
.ref-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--navy);
}
.ref-tick {
  flex: 0 0 auto;
  color: var(--lime-dark);
  font-weight: 800;
}
/* Monospace for the same reason the partner code is monospace:
   0 against O, 1 against l. This is the one string a member might
   read back down a phone to support. */
.ref-code {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .5px;
  white-space: nowrap;
}
.ref-sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Muted, not red. Clearing an attribution is an ordinary
   correction, and colouring it as a warning pushes members to
   clear claims that are usually correct — which costs somebody
   credit they earned. Same reasoning as .gp-clear. */
.ref-clear {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.ref-clear:hover, .ref-clear:focus-visible { color: var(--navy); }

/* The consent row now sits inside the LIME attribution card
   rather than its own navy one. Only the divider needs to know —
   a navy hairline across a lime card is the kind of small wrong
   note that makes a page feel unfinished without anybody being
   able to say why. */
.ref-field .ref-notice-p   { margin-top: 10px; color: var(--text-body); font-size: 13px; }
.ref-field .ref-notice-opt { border-top-color: var(--lime-light); }

/* ── Header row ──────────────────────────────────────────────── */
.ev-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.ev-head-copy { min-width: 0; flex: 1 1 320px; }
.ev-head .jml-btn { flex-shrink: 0; }

/* ── The price strip ─────────────────────────────────────────
   Lime, and mirrors .sub-trial on the subscription screen on
   purpose: both say "here is what this costs you", and a member
   who has seen one should recognise the other instantly.

   Lime rather than amber. This is information, not a warning —
   nothing is wrong and nothing is owed yet. */
.ev-price {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 15px 18px;
  background: var(--lime-surface);
  border: 1px solid var(--lime-light);
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy);
}
.ev-price-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime); flex: none;
}
.ev-price strong { font-weight: 800; }
.ev-price-days {
  margin-left: auto; flex: none;
  background: var(--navy); color: #fff;
  border-radius: var(--r-pill); padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}

/* ── The card grid ───────────────────────────────────────────
   Two columns, not auto-fill. A member has a handful of events,
   never forty, so there is no page-orphan problem to solve — and
   a fixed pair keeps the cover bands lined up across the row,
   which auto-fill cannot promise. */
.ev-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 22px;
}
@media (max-width: 1100px) { .ev-list { grid-template-columns: 1fr; } }

.ev-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-width: 0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ev-card:hover {
  transform: translateY(-2px);
  border-color: var(--navy-light);
  box-shadow: var(--shadow-card);
}

/* ── The band ────────────────────────────────────────────────
   Always drawn, cover or no cover. A card that loses its whole
   top third when there is no image makes a list of events look
   broken rather than varied — and the navy gradient with a date
   tile is a better default than a grey rectangle. */
.ev-band {
  position: relative;
  height: 128px;
  background:
    radial-gradient(320px 160px at 82% -30%, rgba(154,201,0,0.22), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  background-size: cover;
  background-position: center;
}
.ev-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
/* With a photo the dotted texture would fight the image, and the
   scrim is what keeps a white pill legible over a bright cover. */
.ev-band--photo::before {
  background-image: none;
  background: linear-gradient(180deg, rgba(0,20,74,0.42) 0%, rgba(0,20,74,0.08) 55%);
}

/* The date tile. A date is the single thing somebody scanning a
   list of events is looking for; a full sentence makes them read
   to find it. */
.ev-datechip {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px;
  padding: 7px 8px 6px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,20,74,0.22);
}
.ev-dc-d {
  font-family: 'Fraunces', serif;
  font-size: 21px; font-weight: 900; line-height: 1;
  color: var(--navy); letter-spacing: -0.5px;
}
.ev-dc-m {
  margin-top: 3px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  color: var(--text-muted);
}

/* ── Status pills ────────────────────────────────────────────
   Same palette as .job-pill and .apps-pill. Five states, five
   sentences elsewhere — but ONE colour language across every
   moderation surface on the platform. */
.ev-pill {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.ev-pill--draft   { background: #EFF1F5; color: #5A6478; }
.ev-pill--pending { background: #FFF3D6; color: #8A6A00; }
.ev-pill--live    { background: var(--lime); color: var(--navy); }
.ev-pill--held    { background: #FBE9E9; color: #A33A3A; }
.ev-pill--blocked { background: #FBE9E9; color: #A33A3A; }
.ev-pill--expired { background: #EFF1F5; color: #5A6478; }
/* Sits under the state pill rather than beside it — two pills in
   one corner read as one confusing label. */
.ev-pill--edited  { top: 46px; background: var(--white); color: var(--navy); }

.ev-card-body {
  display: flex; flex-direction: column;
  padding: 18px 20px 20px;
  flex: 1;
  min-width: 0;
}
.ev-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px; font-weight: 700;
  color: var(--navy); line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ── Meta rows ───────────────────────────────────────────────
   Icon plus text, aligned at the top so a wrapped venue does not
   drag the pin down with it. */
.ev-meta { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.ev-meta-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.45; color: var(--text-body);
  overflow-wrap: anywhere;
}
.ev-meta-row svg {
  width: 15px; height: 15px; flex: none;
  margin-top: 2px; color: var(--lime-dark);
}

/* ── The state sentence ──────────────────────────────────────
   Three colours for three meanings: neutral for a fact, amber for
   "wait", red for "something is wrong". Never one message and one
   colour for all three — that is how a member tries to fix the
   wrong thing. */
.ev-msg {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--surface-grey);
  border-left: 3px solid var(--border-grey);
  font-size: 13px; line-height: 1.6; color: var(--text-body);
}
.ev-msg--wait { background: #FFFBEB; border-left-color: #D97706; color: #78350F; }
.ev-msg--bad  { background: #FEF2F2; border-left-color: #DC2626; color: #7F1D1D; }

.ev-card-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 16px;
}
.ev-card-actions .jml-btn { padding: 9px 18px; font-size: 13px; }

/* Quiet, and pushed to the far end. Deleting a paid listing is a
   real loss; it must never sit where a thumb reaches first. */
.ev-delete {
  margin-left: auto;
  background: none; border: none; padding: 6px 2px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.ev-delete:hover:not([disabled]) { color: #B42318; }
.ev-delete[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Empty state ─────────────────────────────────────────────
   Names four real kinds of event. "No events yet" alone tells
   somebody nothing about what this screen is for, and a member
   who does not know what belongs here creates nothing. */
.ev-empty {
  margin-top: 22px;
  padding: 46px 28px;
  text-align: center;
  background: var(--navy-surface);
  border: 1.5px dashed var(--navy-light);
  border-radius: var(--r-xl);
}
.ev-empty-mark {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--lime-dark);
  box-shadow: var(--shadow-card);
}
.ev-empty-mark svg { width: 26px; height: 26px; }
.ev-empty-h {
  font-family: 'Fraunces', serif;
  font-size: 21px; font-weight: 900; color: var(--navy); letter-spacing: -0.4px;
}
.ev-empty-p {
  max-width: 420px; margin: 10px auto 22px;
  font-size: 14.5px; line-height: 1.65; color: var(--text-body);
}

/* ── The editor ──────────────────────────────────────────────── */
.ev-back {
  display: inline-block; margin-bottom: 14px;
  background: none; border: none; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer;
}
.ev-back:hover { color: var(--lime-dark); }

/* Two columns, like .pf-form. One column of full-width inputs on
   a 1400px monitor reads as a survey, not a product. */
.ev-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin-top: 20px;
}
.ev-f { display: flex; flex-direction: column; min-width: 0; }
.ev-f--full { grid-column: 1 / -1; }
.ev-form .field-label { margin-top: 16px; }
.ev-form textarea.field-input { min-height: 150px; resize: vertical; }

@media (max-width: 760px) { .ev-form { grid-template-columns: 1fr; } }

/* Section rule. A long form with no visible joints is a form
   people abandon halfway — the divisions tell them how much is
   left. */
.ev-sub {
  grid-column: 1 / -1;
  margin: 30px 0 2px;
  padding-top: 22px;
  border-top: 1px solid var(--border-grey);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-muted);
}

.ev-form .pf-check { margin-top: 16px; }
.ev-form .safety-inline { margin-top: 14px; }

/* ── Cover ───────────────────────────────────────────────────
   16/9, because that is the shape of the band on the card and of
   a link preview in WhatsApp — the two places this image is
   actually seen. Showing a square crop here would teach the
   member to compose for a frame nobody gets. */
.ev-cover-box { grid-column: 1 / -1; margin-top: 14px; }
.ev-cover {
  aspect-ratio: 16 / 9;
  max-width: 460px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-grey);
  background-size: cover;
  background-position: center;
  background-color: var(--surface-grey);
}
.ev-cover-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ev-cover-actions .jml-btn { padding: 9px 18px; font-size: 13px; cursor: pointer; }
.ev-cover-del {
  background: none; border: none; padding: 6px 2px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ev-cover-del:hover { color: #B42318; }

.ev-cover-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 16 / 9;
  max-width: 460px;
  border: 1.5px dashed var(--border-grey);
  border-radius: var(--r-lg);
  background: var(--surface-grey);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ev-cover-empty:hover {
  border-color: var(--lime);
  color: var(--navy);
  background: var(--lime-surface);
}
.ev-cover-empty svg { width: 30px; height: 30px; }
.ev-cover-h { font-size: 14.5px; font-weight: 700; }
.ev-cover-p { font-size: 12.5px; }

/* ── The action bar ──────────────────────────────────────────── */
.ev-actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--border-grey);
}
@media (max-width: 560px) {
  .ev-actions .jml-btn { flex: 1 1 100%; }
  .ev-card-actions .jml-btn { flex: 1 1 auto; }
  .ev-delete { margin-left: 0; }
}

/* ── Preview ─────────────────────────────────────────────────
   align-items:flex-start plus overflow-y on the wrapper, NOT on
   the panel. A tall preview centred in a flex container gets its
   top clipped with nothing to scroll — the same trap as
   .dash-side, and it has no fix from inside the child. */
.ev-pv-wrap {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 20px 60px;
  background: rgba(0,20,74,0.58);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ev-pv {
  position: relative;
  width: 100%; max-width: 640px;
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.38);
}
.ev-pv-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--navy);
  border: none; font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16);
}
.ev-pv-close:hover { background: var(--white); }

/* Says plainly that this is a preview. Without it a member who
   presses Preview and sees their page believes it is live, and
   never pays. */
.ev-pv-tag {
  margin: 0; padding: 10px 20px;
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  text-align: center;
}
.ev-pv-cover {
  height: 220px;
  background-size: cover; background-position: center;
}
.ev-pv-cover--none {
  background:
    radial-gradient(420px 200px at 84% -30%, rgba(154,201,0,0.22), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.ev-pv-body { padding: 26px 28px 30px; }
.ev-pv-title {
  font-family: 'Fraunces', serif;
  font-size: 28px; font-weight: 900;
  color: var(--navy); line-height: 1.15; letter-spacing: -0.8px;
  overflow-wrap: anywhere;
}
.ev-meta--pv { margin-top: 14px; }
.ev-meta--pv .ev-meta-row { font-size: 14.5px; }
.ev-pv-org { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
.ev-pv-org strong { color: var(--navy); font-weight: 700; }
.ev-pv-desc {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--border-grey);
  font-size: 15.5px; line-height: 1.75; color: var(--text-body);
  overflow-wrap: anywhere;
}
.ev-pv-cta { margin-top: 24px; width: 100%; }

/* Quietly, beneath. Three equally loud buttons produce no clicks. */
.ev-pv-contact {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-grey);
  font-size: 13.5px; color: var(--text-muted);
}

@media (max-width: 560px) {
  .ev-band { height: 112px; }
  .ev-pv-cover { height: 170px; }
  .ev-pv-body { padding: 22px 20px 26px; }
  .ev-pv-title { font-size: 23px; }
}

/* ── The transfer panel ──────────────────────────────────────
   Borrows the .ev-pv shell and every .sub- block from the
   subscription transfer screen. Only the parts unique to buying an
   event are defined here. */
.evp .evp-body { padding: 26px 28px 30px; }
.evp-title {
  font-family: 'Fraunces', serif;
  font-size: 24px; font-weight: 900; color: var(--navy);
  line-height: 1.2; letter-spacing: -0.6px; overflow-wrap: anywhere;
}
.evp-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }

/* Amber. The member is about to lose the ability to edit, and that
   is a consequence rather than a fault — so it is a warning, never
   an error. */
.evp-warn {
  margin-top: 20px; padding: 13px 15px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-left: 3px solid #D97706;
  border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.6; color: #78350F;
}
.evp-warn p { margin: 0; }
.evp-warn strong { color: #92400E; font-weight: 800; }

.evp-go, .evp-done { width: 100%; margin-top: 18px; }

@media (max-width: 560px) { .evp .evp-body { padding: 22px 20px 26px; } }

/* ═══ PUBLIC EVENTS BOARD (.evp-) AND DETAIL (.evd-) ═══════════
   Prefixes are evp- and evd-. NOT ev-, which the member dashboard
   owns — and both stylesheets ship on the same site, so a collision
   here is real rather than theoretical.
   ⚠ .evp- is also used by th-events-pay.js for the transfer panel,
   which never appears on a public page. Two files, one prefix, no
   overlap in the DOM. If that ever stops being true, rename this
   one — the payment panel is the harder rename. */

.evp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 1180px) { .evp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .evp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .evp-grid { grid-template-columns: 1fr; } }

/* Four, three, two, one — every one a divisor of PAGE_SIZE (12), so
   no page ever ends on a half-empty row. Same reasoning as the job
   board; auto-fill would make five columns on a wide monitor and 12
   does not divide by 5. */

.evp-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border-grey);
  border-radius: var(--r-lg); overflow: hidden; min-width: 0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.evp-card:hover {
  transform: translateY(-2px); border-color: var(--navy);
  box-shadow: 0 10px 26px rgba(0,30,103,0.10);
}
.evp-band {
  position: relative; height: 132px;
  background:
    radial-gradient(320px 160px at 82% -30%, rgba(154,201,0,0.22), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  background-size: cover; background-position: center;
}
.evp-band--photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,20,74,0.42) 0%, rgba(0,20,74,0.06) 55%);
}
.evp-date {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px; padding: 7px 8px 6px;
  background: var(--white); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,20,74,0.22);
}
.evp-date-d {
  font-family: 'Fraunces', serif; font-size: 21px; font-weight: 900;
  line-height: 1; color: var(--navy); letter-spacing: -0.5px;
}
.evp-date-m {
  margin-top: 3px; font-size: 9.5px; font-weight: 800;
  letter-spacing: 1px; color: var(--text-muted);
}
.evp-online {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--lime); color: var(--navy);
  padding: 5px 11px; border-radius: var(--r-pill);
}

.evp-body { display: flex; flex-direction: column; padding: 18px 20px 20px; flex: 1; }
.evp-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px; font-weight: 700; color: var(--navy);
  line-height: 1.35; overflow-wrap: anywhere;
}
.evp-when  { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--lime-dark); }
.evp-where { margin-top: 4px; font-size: 13.5px; color: var(--text-body); overflow-wrap: anywhere; }
.evp-org   { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.evp-go    { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--lime-dark); }
.evp-card:hover .evp-go { color: var(--navy); }

/* ── Detail ─────────────────────────────────────────────────── */
.evd-main { background: var(--navy-surface); padding: 28px var(--h-pad) 72px; }
.evd {
  max-width: 760px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--border-grey);
  border-radius: var(--r-xl); overflow: hidden;
}
.evd-cover { height: 300px; background-size: cover; background-position: center; }
.evd-cover--none {
  background:
    radial-gradient(520px 240px at 84% -30%, rgba(154,201,0,0.22), transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.evd-body { padding: 32px 36px 40px; }
.evd-title {
  font-family: 'Fraunces', serif; font-size: 34px; font-weight: 900;
  color: var(--navy); line-height: 1.12; letter-spacing: -1px;
  overflow-wrap: anywhere;
}
.evd-meta { margin-top: 16px; }
.evd-when  { font-size: 16px; font-weight: 700; color: var(--lime-dark); }
.evd-where { margin-top: 5px; font-size: 15.5px; color: var(--text-body); overflow-wrap: anywhere; }
.evd-org   { margin-top: 5px; font-size: 14.5px; color: var(--text-muted); }
.evd-org strong { color: var(--navy); font-weight: 700; }
.evd-desc {
  margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--border-grey);
  font-size: 16.5px; line-height: 1.8; color: var(--text-body);
  overflow-wrap: anywhere;
}
.evd-cta { margin-top: 30px; width: 100%; }

/* Quiet, and visibly a different weight from the button above. */
.evd-secs {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-grey);
}
.evd-sec {
  font-size: 14px; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.evd-sec:hover { color: var(--lime-dark); }

/* Amber, never red, never dismissible. A warning that must be
   dismissed is a warning that gets dismissed. */
.evd-safety {
  margin-top: 26px; padding: 15px 17px;
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-left: 3px solid #D97706; border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.7; color: #78350F;
}
.evd-safety strong { color: #92400E; font-weight: 800; }
.evd-safety a { color: #92400E; font-weight: 700; text-decoration: underline; }

/* Grey, not red. Nothing went wrong — the event happened. */
.evd-past {
  padding: 14px 20px; background: var(--surface-grey);
  border-bottom: 1px solid var(--border-grey);
  font-size: 14px; color: var(--text-body); text-align: center;
}
.evd-past strong { color: var(--navy); font-weight: 800; }

.evd-msg { max-width: 560px; margin: 60px auto; text-align: center; }
.evd-msg-h {
  font-family: 'Fraunces', serif; font-size: 28px; font-weight: 900;
  color: var(--navy); letter-spacing: -0.7px;
}
.evd-msg p { margin: 12px 0 24px; font-size: 15.5px; color: var(--text-body); }

@media (max-width: 640px) {
  .evd-main { padding: 16px 16px 56px; }
  .evd-cover { height: 200px; }
  .evd-body { padding: 24px 20px 30px; }
  .evd-title { font-size: 26px; }
  .evd-desc { font-size: 15.5px; }
}

/* The back link sits above the card, inside the navy-surface main,
   so it needs its own spacing rather than the drawer's. */
.evd-back {
  display: block; max-width: 760px; margin: 0 auto 14px;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.evd-back:hover { color: var(--lime-dark); }
.evd-past--unlisted { background:#eef4ff; border-color:#c7d7f5; color:#1e3a5f; }