/* ============================================
   Ecogru — design tokens & base styles
   Mobile-first
   ============================================ */

:root {
  --forest: #1B4332;
  --forest-dark: #0E241A;
  --forest-light: #2D6A4F;
  --saffron: #F5A623;
  --saffron-light: #FFC868;
  --saffron-dark: #C07807; /* darkened slightly from #C97F0E (2026 accessibility pass) — the original fell just under the 3:1 WCAG AA large-text/graphics threshold against --cream (2.88:1); this passes (3.17:1) while staying visually near-identical */
  --saffron-text: #92400E; /* darker than --saffron-dark — for small text on light backgrounds, where --saffron-dark falls below WCAG AA contrast */
  --danger: #C0392B;
  --danger-dark: #a52f22;
  --danger-text: #922016; /* darker than --danger — for small text on light backgrounds, matching the --saffron-text pattern for AA contrast */
  --warm-white: #FEFCF8;
  --cream: #FBF1E3;
  --clay: #F3E4D0;
  --ink: #21261F;
  --ink-soft: #565F4F;

  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Utility/label face — used where Ecogru is asserting a verified fact
     (credential labels, stamps, badge text), never for body copy. The
     mono grid reads as "this was checked," which is the one idea Ecogru's
     whole trust model rests on. */
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1160px;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 99px;
  --shadow-soft: 0 10px 28px -12px rgba(27, 67, 50, 0.18);
  --shadow: 0 14px 40px -12px rgba(14, 36, 26, 0.28);
  --shadow-lg: 0 30px 70px -20px rgba(14, 36, 26, 0.35);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}

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

[hidden] {
  display: none !important;
}

*:focus-visible {
  outline: 2px solid var(--saffron-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks, accessibility review
   2026-08-13) — every page repeats a header/nav a keyboard user would
   otherwise have to tab through before reaching content. Off-screen until
   it receives focus (Tab from a fresh page load), then this is the very
   first focusable element on every page. Shared here rather than per-page
   so admin pages (loading this file alongside admin.css) get it too. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10000;
  background: var(--forest);
  color: var(--warm-white);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* Standard visually-hidden pattern — for content (usually a heading) that
   needs to exist for screen-reader document structure/navigation but has
   no visual role, e.g. a landmark's own <h2> when its title is already
   shown some other way on screen (accessibility review, 2026-08-13). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible required-field marker (accessibility recommendation, 2026-08-13)
   — every required field already carries the native `required` attribute,
   which assistive tech announces on its own (WCAG 3.3.2 was already
   satisfied), but nothing showed a SIGHTED user which fields were
   required before they submitted. aria-hidden since the native attribute
   already covers screen readers — this mark is visual-only, so it
   doesn't get announced a second time. */
.required-mark {
  color: var(--danger-text);
  margin-left: 3px;
  font-weight: 700;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve the scrollbar's width permanently so toggling body.nav-open's
     `overflow: hidden` (mobile menu open/close) doesn't remove the
     scrollbar and widen the whole page by its ~15-17px — the page
     visibly shifting sideways every time the menu opened or closed.
     scrollbar-gutter only has an effect on a box whose own overflow
     isn't `visible`, hence `overflow-y: auto` here (still only shows a
     scrollbar when content actually needs one). */
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(245, 166, 35, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 8%, rgba(27, 67, 50, 0.07), transparent 55%),
    var(--warm-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--forest);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.3rem, 6.4vw, 4.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.55rem); }

h1 em, h2 em {
  font-style: normal;
  color: var(--saffron-dark);
  position: relative;
  white-space: nowrap;
}

@media (max-width: 479px) {
  h1 em, h2 em {
    white-space: normal;
  }
}

h1 em::after, h2 em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.05em;
  height: 0.28em;
  background: var(--saffron);
  opacity: 0.28;
  z-index: -1;
  border-radius: 4px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--saffron-text);
  margin-bottom: 16px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--saffron);
  flex-shrink: 0;
}

.lede {
  font-size: clamp(1.02rem, 2.4vw, 1.24rem);
  color: var(--ink-soft);
  max-width: 60ch;
}

section {
  padding: 64px 0;
  scroll-margin-top: 100px;
  position: relative;
}

@media (min-width: 768px) {
  section { padding: 104px 0; }
}

/* ---------- Scroll reveal (see main.js) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(.2,.8,.2,1), transform 0.6s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

[data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 0s; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Decorative blobs ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, background 0.2s ease, gap 0.2s ease;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.btn:active { transform: scale(0.96); }

.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(135deg, var(--saffron-light), var(--saffron));
  color: var(--forest-dark);
  box-shadow: 0 8px 22px -6px rgba(245, 166, 35, 0.55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
  box-shadow: 0 14px 32px -8px rgba(245, 166, 35, 0.7);
  transform: translateY(-2px) scale(1.02);
}

.btn-outline {
  background: transparent;
  border-color: rgba(27, 67, 50, 0.28);
  color: var(--forest);
}
.btn-outline:hover {
  border-color: var(--forest);
  background: rgba(245, 166, 35, 0.1);
  box-shadow: 0 10px 24px -10px rgba(27, 67, 50, 0.3);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--warm-white);
  color: var(--forest);
}
.btn-light:hover {
  box-shadow: 0 12px 28px -8px rgba(27, 67, 50, 0.3);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }

@media (min-width: 560px) {
  .btn-block { width: auto; }
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

@media (min-width: 560px) {
  .btn-row {
    flex-direction: row;
    align-items: center;
  }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(254, 252, 248, 0.85);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(27, 67, 50, 0.05), 0 12px 30px -26px rgba(27, 67, 50, 0.3);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
}

@media (min-width: 960px) {
  .nav { padding: 26px 0; gap: 24px; }

  /* Icon-button cluster (messages/help/settings/notifications, on
     authenticated pages) reads as one tight toolbar instead of being
     spaced by the same gap as the text nav links. Without this, pages
     with 5 nav links + a nav-cta button + 3-4 icon buttons all sharing
     one flat gap run out of row width around 1000-1150px, and the
     multi-word links ("For Professionals", "How It Works") wrap onto a
     second line instead of the row wrapping — reads as the nav-cta
     button crowding everything else. */
  .notif-bell-btn + .notif-bell-btn,
  .notif-bell-btn + .notif-bell-wrap {
    margin-left: -22px;
  }

  .nav-links a {
    white-space: nowrap;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  /* retained so the alt text degrades gracefully if the logo image fails to load */
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--forest);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.brand img {
  display: block;
  height: 34px;
  width: auto;
}

@media (max-width: 600px) {
  .brand img { height: 28px; }
}

.footer-brand .brand img {
  height: 26px;
}

.brand .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--saffron-light), var(--saffron-dark));
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 26px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  position: fixed;
  /* BUG FIX (2026-08-02 UI/UX audit): this used to be `inset: 0 0 0 26%`
     (relying on top:0 + bottom:0 to auto-stretch this panel to the full
     viewport height). That only works if this element's *containing
     block* is the actual viewport — but .site-header (its ancestor) has
     backdrop-filter set for its frosted-glass sticky effect, and
     backdrop-filter (like transform/filter) creates a new containing
     block for position:fixed descendants, same as those properties do.
     So `bottom:0` was resolving against .site-header's own ~88px height,
     not the viewport — squashing this panel to ~140px tall on mobile and
     pushing most of its 6 nav items/CTA outside the visible box (2 of 5
     links visible, "Home"/"For Professionals" invisible above it, "About"
     and the Sign Up button floating disconnected below it, overlapping
     page content). `100vh` is an explicit length, not a percentage, so
     it's resolved against the real viewport regardless of which element
     is technically the containing block — unlike top/bottom insets. */
  top: 0;
  right: 0;
  left: 26%;
  height: 100vh;
  z-index: 2;
  background: var(--forest-dark);
  background-image: radial-gradient(600px 400px at 100% 0%, rgba(245,166,35,0.12), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 100px 36px 40px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.nav-links.open {
  transform: translateX(0);
}

.nav-links a {
  color: var(--warm-white);
  font-size: 1.5rem;
  font-family: var(--font-display);
  padding: 13px 0;
  width: 100%;
}

.nav-links a.active {
  color: var(--saffron);
}

.nav-links .nav-cta {
  margin-top: 20px;
}

/* ---------- Notifications bell ---------- */
.notif-bell-wrap {
  position: relative;
  z-index: 150;
  flex-shrink: 0;
}

.notif-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(27,67,50,0.06);
  color: var(--forest);
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.notif-bell-btn:hover { background: rgba(27,67,50,0.12); }
.notif-bell-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; flex-shrink: 0; }

.notif-bell-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--saffron-dark);
  color: var(--warm-white);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--warm-white);
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, 90vw);
  max-height: 420px;
  overflow-y: auto;
  background: var(--warm-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(27,67,50,0.1);
}

.notif-dropdown-header {
  padding: 16px 18px 12px;
  font-weight: 700;
  color: var(--forest);
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(27,67,50,0.08);
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.notif-item:hover { background: rgba(27,67,50,0.04); }
.notif-item + .notif-item { border-top: 1px solid rgba(27,67,50,0.06); }

.notif-item.unread { background: rgba(245,166,35,0.07); }
.notif-item.unread:hover { background: rgba(245,166,35,0.12); }

.notif-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--forest);
}
.notif-item-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.notif-item-icon.workspace_invite { background: rgba(245,166,35,0.16); color: var(--saffron-dark); }
.notif-item-icon.huddle { background: var(--forest); color: var(--warm-white); }
.notif-item-icon.new_message { background: rgba(27,67,50,0.1); color: var(--forest); }
.notif-item-icon.verification_approved { background: rgba(27,67,50,0.1); color: var(--forest); }
.notif-item-icon.verification_rejected { background: rgba(245,166,35,0.16); color: var(--saffron-dark); }
.notif-item-icon.agreement_created,
.notif-item-icon.agreement_signed { background: rgba(27,67,50,0.1); color: var(--forest); }
.notif-item-icon.agreement_changes_requested { background: rgba(245,166,35,0.16); color: var(--saffron-dark); }
.notif-item-icon.dispute_raised,
.notif-item-icon.conduct_strike { background: rgba(245,166,35,0.16); color: var(--saffron-dark); }
.notif-item-icon.dispute_reviewed { background: rgba(27,67,50,0.1); color: var(--forest); }

.notif-item-body { min-width: 0; }
.notif-item-title { font-weight: 700; font-size: 0.85rem; color: var(--forest); }
.notif-item-text {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-item-time { font-size: 0.72rem; color: var(--ink-soft); opacity: 0.75; margin-top: 4px; }

/* ---------- Workspace card unread badge ---------- */
.workspace-unread-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245,166,35,0.16);
  color: var(--saffron-text);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.workspace-unread-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Chat tab unread dot ---------- */
.tab-btn { position: relative; }
.tab-unread-dot {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--saffron-dark);
  border: 2px solid var(--warm-white);
}

@media (min-width: 960px) {
  .nav-toggle { display: none; }

  /* Unwraps nav-links into .nav's own flex row so the notif bell can be
     ordered inline between the plain links and the .nav-cta button. */
  .nav-links {
    display: contents;
  }

  .notif-bell-wrap {
    order: 1;
  }

  .nav-links .nav-cta {
    order: 2;
    margin-top: 0;
  }

  .nav-links a {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 500;
    padding: 4px 0;
    width: auto;
    position: relative;
  }

  .nav-links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--saffron);
    transition: right 0.25s ease;
  }

  .nav-links a:not(.btn):hover::after,
  .nav-links a.active::after {
    right: 0;
  }

  .nav-links a.active { color: var(--forest); font-weight: 700; }
  .nav-links a:hover { color: var(--forest); }
}

body.nav-open {
  overflow: hidden;
}

/* ---------- Icon badges (SVG icons) ---------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  color: var(--saffron-light);
  box-shadow: 0 8px 20px -8px rgba(27,67,50,0.55);
}

.icon-badge svg {
  width: 55%;
  height: 55%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-text .icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  margin-bottom: 20px;
}

.info-card .icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  margin-bottom: 18px;
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  color: var(--saffron-light);
}

/* ---------- Hero ---------- */
.hero {
  padding: 52px 0 48px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { padding: 84px 0 76px; }
}

.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
}

.hero h1 { margin-bottom: 22px; }

.hero-visual {
  position: relative;
  background: linear-gradient(155deg, var(--forest-light) 0%, var(--forest) 55%, var(--forest-dark) 100%);
  border-radius: 28px;
  padding: 30px;
  color: var(--warm-white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 1;
}

.hero-visual::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: var(--saffron);
  opacity: 0.22;
  border-radius: 50%;
  right: -100px;
  bottom: -110px;
  filter: blur(4px);
}

.hero-visual .ecogru-arc {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  z-index: 0;
}

.hero-card {
  position: relative;
  background: rgba(254,252,248,0.07);
  border: 1px solid rgba(254,252,248,0.16);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
  z-index: 1;
}

.hero-card:last-child { margin-bottom: 0; }

.hero-card .tag {
  display: inline-block;
  background: var(--saffron);
  color: var(--forest-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}

/* ---------- Hero: dark/credential variant (index.html) ----------
   Scoped to its own classes rather than touching .hero-visual/.hero-card
   (the light-hero stacked-notification pattern other marketing pages
   still use) — this is a distinct, larger visual moment for the
   homepage only. The signature idea: Ecogru's whole pitch is "verified
   skill, not connections," so the hero's one memorable object is a
   credential — an oversized, tilted ID/verification card with a wax-seal
   stamp — instead of a generic floating app-screenshot mockup. */
.hero-dark {
  background:
    radial-gradient(900px 560px at 82% -8%, rgba(245, 166, 35, 0.16), transparent 60%),
    radial-gradient(700px 520px at 6% 105%, rgba(45, 106, 79, 0.35), transparent 60%),
    var(--forest-dark);
  padding: 64px 0 60px;
  color: var(--warm-white);
}

@media (min-width: 768px) {
  .hero-dark { padding: 120px 0 108px; }
}

.hero-dark .hero-copy > * {
  opacity: 0;
  animation: heroRise 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-dark .hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-dark .hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero-dark .hero-copy > *:nth-child(3) { animation-delay: 0.22s; }
.hero-dark .hero-copy > *:nth-child(4) { animation-delay: 0.3s; }
.hero-dark .hero-copy > *:nth-child(5) { animation-delay: 0.38s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dark .hero-copy > * { animation: none; opacity: 1; }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  color: var(--saffron-light);
}
.hero-eyebrow::before { background: var(--saffron); }

.hero-dark h1 { color: var(--warm-white); }
.hero-dark h1 em { color: var(--saffron-light); }

.hero-lede { color: rgba(254, 252, 248, 0.72); }

.credential-stage {
  position: relative;
  opacity: 0;
  animation: heroRise 0.8s cubic-bezier(.2,.8,.2,1) 0.32s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .credential-stage { animation: none; opacity: 1; }
}

.credential-card-back {
  position: absolute;
  inset: 14px -10px auto 14px;
  height: 88%;
  background: var(--forest-light);
  border-radius: var(--radius);
  transform: rotate(4deg);
  opacity: 0.55;
}

.credential-card {
  position: relative;
  background: var(--warm-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  color: var(--ink);
}
.credential-stage:hover .credential-card { transform: rotate(-1deg) translateY(-4px); }

.credential-card-ribbon {
  height: 8px;
  background: linear-gradient(90deg, var(--saffron-dark), var(--saffron), var(--saffron-light));
}

.credential-card-body { padding: 26px 26px 22px; }

.credential-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.credential-seal { width: 56px; height: 56px; flex-shrink: 0; }

.credential-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron-text);
  font-weight: 600;
}
.credential-label span { display: block; color: var(--ink-soft); font-weight: 500; margin-top: 2px; letter-spacing: 0.04em; }

.credential-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--forest);
  margin-bottom: 2px;
}

.credential-role { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }

.credential-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.credential-skills span {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(27, 67, 50, 0.07);
  color: var(--forest);
}

.credential-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  border-top: 1px dashed rgba(27, 67, 50, 0.18);
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.credential-footer strong { color: var(--forest); }

/* ---------- Section headers ---------- */
.section-head {
  max-width: 640px;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- How it works / steps ---------- */
.steps {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .steps.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.step-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.08);
  border-top: 3px solid var(--saffron);
  border-radius: var(--radius);
  padding: 32px 26px 28px;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(27,67,50,0.14);
}

.step-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--saffron-text);
  margin-bottom: 16px;
}
.step-number::before { content: "STEP "; color: var(--ink-soft); font-weight: 500; }

.step-card h3 { margin-bottom: 10px; }
.step-card p { color: var(--ink-soft); font-size: 0.95rem; }

/* timeline for how-it-works page */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

.timeline-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding-bottom: 44px;
  position: relative;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  color: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -6px rgba(27,67,50,0.5);
}

.timeline-item:nth-child(even) .timeline-dot {
  background: linear-gradient(145deg, var(--saffron-light), var(--saffron-dark));
  color: var(--forest-dark);
  box-shadow: 0 8px 18px -6px rgba(245,166,35,0.55);
}

.timeline-line {
  flex: 1;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(27,67,50,0.2) 0 6px, transparent 6px 12px);
  margin-top: 8px;
}

.timeline-item:last-child .timeline-line { display: none; }

.timeline-content { padding-top: 8px; padding-bottom: 6px; }
.timeline-content h3 { margin-bottom: 8px; }
.timeline-content p { color: var(--ink-soft); }

/* ---------- Story / split section ---------- */
.story-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}

@media (min-width: 800px) {
  .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.story-card {
  border-radius: var(--radius);
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
}

.story-card.professional {
  background: linear-gradient(160deg, var(--forest-light), var(--forest) 60%, var(--forest-dark));
  color: var(--warm-white);
  box-shadow: var(--shadow-lg);
}

.story-card.professional h3 { color: var(--warm-white); }

.story-card.founder {
  background: var(--clay);
  border: 1px solid rgba(27,67,50,0.08);
  box-shadow: var(--shadow-soft);
}

.story-card p { margin-top: 16px; opacity: 0.92; }
.story-card.founder p { color: var(--ink-soft); }

.story-quote {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-style: italic;
  font-size: 0.95rem;
}

.story-card.founder .story-quote {
  border-top: 1px solid rgba(27,67,50,0.15);
}

/* ---------- Feature rows (alternating) ---------- */
.feature-row {
  display: grid;
  gap: 34px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid rgba(27,67,50,0.08);
  position: relative;
  z-index: 1;
}

.feature-row:last-child { border-bottom: none; }

@media (min-width: 860px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
  .feature-row.reverse .feature-visual { order: 2; }
  .feature-row.reverse .feature-text { order: 1; }
}

.feature-text h2 { margin-bottom: 16px; }
.feature-text p { color: var(--ink-soft); margin-bottom: 20px; }

.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.feature-list li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--forest);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 1px;
}

.feature-visual {
  background: linear-gradient(160deg, var(--cream), var(--clay));
  border-radius: var(--radius);
  padding: 26px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.mock-card {
  background: var(--warm-white);
  border-radius: var(--radius-sm);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
}

.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.mock-row:last-child { margin-bottom: 0; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-white);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,166,35,0.15);
  color: var(--saffron-text);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.badge.verified {
  background: rgba(27,67,50,0.1);
  color: var(--forest);
}

/* ---------- Membership plan cards ---------- */
.plan-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

  /* A 3-card grid at this width would put 2 cards on row one and strand
     the 3rd alone in the left column with empty space beside it — stay
     single-column for 3-card pricing until there's room for all 3 side
     by side at 960px. */
  .plan-grid.cols-3 { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .plan-grid.cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.plan-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan-card.current-plan {
  border-color: var(--forest);
  border-width: 2px;
}

.plan-card.featured {
  border-color: var(--saffron);
  box-shadow: var(--shadow);
}

.plan-featured-tag {
  position: absolute;
  top: -13px;
  right: 26px;
  background: var(--saffron);
  color: var(--forest-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.plan-card-head h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--forest);
}

.plan-price {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
}

.plan-price-period {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.plan-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 14px 0 18px;
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 24px;
  flex: 1;
}

.plan-features li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  color: var(--ink);
}

.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.plan-features li.yes::before {
  background: var(--forest);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}

.plan-features li.no {
  color: var(--ink-soft);
}

.plan-features li.no::before {
  background: rgba(86,95,79,0.25);
}

.plan-fineprint {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.plan-fineprint strong { color: var(--saffron-text); }

/* ---------- Cards grid (generic) ---------- */
.card-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.info-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-top: 3px solid var(--saffron);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(27,67,50,0.14);
}

.info-card h3 { margin-bottom: 8px; }
.info-card p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(155deg, var(--forest-light) 0%, var(--forest) 55%, var(--forest-dark) 100%);
  border-radius: 28px;
  padding: 52px 28px;
  text-align: center;
  color: var(--warm-white);
  margin: 0 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .cta-band { padding: 76px 40px; }
}

.cta-band::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--saffron);
  opacity: 0.16;
  border-radius: 50%;
  top: -120px;
  left: -110px;
}

.cta-band::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: var(--saffron-light);
  opacity: 0.12;
  border-radius: 50%;
  bottom: -100px;
  right: -80px;
}

.cta-band > * { position: relative; z-index: 1; }

.cta-band h2 { color: var(--warm-white); margin-bottom: 16px; }
.cta-band p {
  color: rgba(254,252,248,0.85);
  max-width: 50ch;
  margin: 0 auto 30px;
}

.cta-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding: 52px 0 40px;
  text-align: left;
  overflow: hidden;
}

@media (min-width: 768px) {
  .page-hero { padding: 76px 0 52px; }
}

.page-hero .lede { margin-top: 18px; }

/* Opt-in dark variant, for the storytelling marketing pages only
   (for-professionals, for-founders, how-it-works, about) — matches the
   homepage hero's language. Left as an explicit modifier rather than the
   .page-hero default so the 19 functional/form pages sharing .page-hero
   (signup, login, profile-setup, etc.) keep their lighter, quieter header,
   which suits a page whose real job is the form below it, not a pitch. */
.page-hero.page-hero-dark {
  background:
    radial-gradient(800px 480px at 88% -10%, rgba(245, 166, 35, 0.15), transparent 60%),
    radial-gradient(650px 460px at 4% 110%, rgba(45, 106, 79, 0.32), transparent 60%),
    var(--forest-dark);
  color: var(--warm-white);
  padding-bottom: 64px;
}
@media (min-width: 768px) { .page-hero.page-hero-dark { padding-bottom: 84px; } }

.page-hero-dark h1 { color: var(--warm-white); }
.page-hero-dark h1 em { color: var(--saffron-light); }
.page-hero-dark .lede { color: rgba(254, 252, 248, 0.72); }
.page-hero-dark .eyebrow { font-family: var(--font-mono); color: var(--saffron-light); }
.page-hero-dark .eyebrow::before { background: var(--saffron); }
.page-hero-dark .btn-outline { border-color: rgba(254,252,248,0.35); color: var(--warm-white); }
.page-hero-dark .btn-outline:hover { background: rgba(254,252,248,0.1); border-color: var(--warm-white); }

/* ---------- Legal pages (terms / privacy) ---------- */
.legal-content { padding: 12px 0 40px; }

.legal-section { margin-bottom: 40px; }
.legal-section:last-child { margin-bottom: 0; }

.legal-section h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  margin-bottom: 14px;
}

.legal-section p { margin-bottom: 14px; color: var(--ink-soft); }
.legal-section p:last-child { margin-bottom: 0; }

.legal-section ul {
  margin: 0 0 14px;
  padding: 0;
}

.legal-section ul:last-child { margin-bottom: 0; }

.legal-section li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--ink-soft);
}

.legal-section li:last-child { margin-bottom: 0; }

.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--saffron);
}

.legal-section strong { color: var(--ink); }

.legal-toc {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 44px;
}

.legal-toc h2 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
}

.legal-toc li { margin-bottom: 6px; }
.legal-toc a { color: var(--forest); font-weight: 600; }
.legal-toc a:hover { color: var(--saffron-text); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-dark);
  background-image: radial-gradient(700px 400px at 90% 0%, rgba(245,166,35,0.08), transparent 60%);
  color: rgba(254,252,248,0.75);
  padding: 60px 0 28px;
  position: relative;
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-brand .brand { color: var(--warm-white); margin-bottom: 12px; }
.footer-brand .brand .dot { background: var(--saffron); }
.footer-brand p { max-width: 34ch; font-size: 0.9rem; }

.footer-col h4 {
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.footer-col li { font-size: 0.92rem; }
.footer-col a { display: inline-block; padding: 11px 4px; margin: -1px -4px; min-width: 44px; }
.footer-col a:hover { color: var(--saffron); }

/* Comfortable tap area for small standalone text links (e.g. "Back to
   search", "Save and finish later") — expands the hit area via padding
   and pulls it back with a matching negative margin so the visual
   position/spacing on the page is unchanged. */
.tap-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  margin: -4px -2px;
}

.footer-bottom {
  border-top: 1px solid rgba(254,252,248,0.12);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.82rem;
  text-align: center;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 640px) {
  .footer-bottom-text { flex-direction: row; gap: 16px; }
}

.footer-legal-links {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 640px) {
  .footer-legal-links { justify-content: flex-end; }
}

.footer-legal-links a {
  color: inherit;
  display: inline-block;
  padding: 8px 0;
}

.footer-legal-links a:hover { color: var(--saffron); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }

/* ============================================
   Auth / profile system
   ============================================ */

/* ---------- Narrow auth/app wrap ---------- */
.auth-wrap {
  max-width: 620px;
  margin: 0 auto;
}

.auth-wrap.wide { max-width: 880px; }

/* ---------- Banners ---------- */
.banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 28px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.banner strong { color: var(--forest); }

.banner.success {
  background: rgba(27,67,50,0.06);
  border-color: rgba(27,67,50,0.14);
}

.banner.pending {
  background: rgba(245,166,35,0.12);
  border-color: rgba(245,166,35,0.3);
}

/* Reserved for genuine failures/rejections/blocked states — distinct from
   .banner.pending, which is for in-progress/waiting states. Don't reuse
   .pending for anything the user needs to read as "this didn't work" or
   "this was denied"; that collapses two different meanings into one color. */
.banner.error {
  background: rgba(192,57,43,0.08);
  border-color: rgba(192,57,43,0.3);
  color: var(--danger-text);
}

.banner.error strong { color: var(--danger-dark); }

.banner.upgrade {
  background: linear-gradient(135deg, rgba(27,67,50,0.06), rgba(245,166,35,0.1));
  border-color: rgba(245,166,35,0.35);
}

.banner.upgrade .icon-badge {
  background: var(--saffron);
  color: var(--forest-dark);
}

.banner.pending .icon-badge {
  background: var(--saffron);
  color: var(--forest-dark);
}

.banner.error .icon-badge {
  background: var(--danger);
  color: var(--warm-white);
}

.banner .icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  /* Long CTA copy ("Upgrade to Professional Standard — KSh 1,000/mo")
     combined with .btn's default white-space: nowrap forced these
     banner buttons wider than the viewport, pushing the whole page
     into horizontal scroll. Letting the label wrap keeps the button
     inside its container at narrow widths. */
  .banner .btn {
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Loading spinner + page-loading state ----------
   Added 2026-07-26 (UX audit fix): pages that fetch session/profile data
   before rendering used to show default placeholder markup baked into the
   HTML (0%, unchecked checklist items, a "?" avatar, "Your name") for the
   moment before that fetch resolved — reading as wrong/lost data rather
   than "still loading." .page-loading wraps a small spinner in the same
   .banner shell already used elsewhere (see the workspace Files tab's
   "Loading files…" banner) so this reads as one consistent loading
   language across the whole app, not a one-off treatment. */
.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(27,67,50,0.15);
  border-top-color: var(--forest);
  flex-shrink: 0;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.page-loading {
  align-items: center;
}

.page-loading .spinner {
  margin-top: 1px;
}

/* ---------- Skeleton loading placeholders ----------
   Used in place of a blank view or the .page-loading spinner banner
   wherever a fetch shapes real, structured content (a grid of cards, a
   profile's fields, a task list) — a shimmering placeholder in roughly the
   final layout reads as "content is arriving" instead of the abrupt pop-in
   you get replacing nothing (or a spinner banner) with a fully laid-out
   page. Compose views from these primitives rather than one-off per-page
   CSS; toggle with [hidden] the same way .page-loading is toggled. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(27,67,50,0.08);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(254,252,248,0.6), transparent);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

.skeleton-line {
  height: 0.85em;
  border-radius: 5px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.skeleton-line.w-25 { width: 25%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-100 { width: 100%; }

/* Mirrors .pro-card's shape for the professional-search results grid. */
.skeleton-pro-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 22px;
}

/* Mirrors .workspace-card's shape for dashboard/founder-dashboard grids. */
.skeleton-workspace-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 24px;
}

/* ---------- Form card ---------- */
.form-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
  transition: box-shadow 0.25s ease;
}

.form-card:hover {
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .form-card { padding: 40px; }
}

.form-group {
  margin-bottom: 20px;
}

/* Anti-bot honeypot field (signup.html, founder-signup.html): kept off
   the visible page and out of tab order via layout/position, not the
   "hidden" attribute alone, since some bots check for that specifically
   and fill the field anyway. Real users never see or reach it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-row {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
}

.form-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 8px;
}

.form-label .optional {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  font-family: var(--font-body);
  /* 1rem/16px minimum — anything smaller makes iOS Safari auto-zoom the
     whole page when the field is focused, which is jarring on a phone. */
  font-size: 1rem;
  color: var(--ink);
  background: var(--warm-white);
  border: 1.5px solid rgba(27,67,50,0.16);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
}

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

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  /* --saffron-dark, not --saffron: this border IS the focus indicator
     (outline is suppressed above), so it's held to WCAG 1.4.11's 3:1
     non-text contrast floor against --warm-white — plain --saffron only
     reaches ~2:1 there. See the matching --saffron-dark note at the top
     of this file (2026 accessibility pass). */
  border-color: var(--saffron-dark);
  box-shadow: 0 0 0 4px rgba(245,166,35,0.18);
}

.form-input.has-error,
.form-textarea.has-error {
  border-color: var(--danger);
}

/* ---------- Searchable category combobox (progressive enhancement over
   the native <select> used for the 22-item category list) ---------- */
.combobox-wrap { position: relative; }
.combobox-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.combobox-input { cursor: text; }
.combobox-input.has-error { border-color: var(--danger); }
.combobox-listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 150;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--warm-white);
  border: 1.5px solid rgba(27,67,50,0.16);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -8px rgba(27, 67, 50, 0.3);
}
.combobox-option {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.combobox-option.is-active,
.combobox-option:hover { background: rgba(245,166,35,0.14); }
.combobox-option.is-selected { font-weight: 600; }
.combobox-option.is-selected::after { content: " \2713"; color: var(--saffron-text); float: right; }
.combobox-empty {
  padding: 10px 12px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.form-hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 7px;
}

.form-error {
  font-size: 0.82rem;
  color: var(--danger-text);
  margin-top: 7px;
  display: none;
}

.form-error.show { display: block; }

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 560px) {
  .form-actions.split {
    flex-direction: row;
    justify-content: space-between;
  }
}

.password-field { position: relative; }

.password-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding-right: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-body);
}

.password-toggle:hover { color: var(--forest); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
  flex-shrink: 0;
}

/* ---------- Tag / skills input ---------- */
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1.5px solid rgba(27,67,50,0.16);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--warm-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tag-input-wrap:focus-within {
  border-color: var(--saffron-dark);
  box-shadow: 0 0 0 4px rgba(245,166,35,0.18);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(27,67,50,0.08);
  color: var(--forest);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 8px 6px 12px;
  border-radius: var(--radius-pill);
}

.tag-chip button {
  background: rgba(27,67,50,0.14);
  border: none;
  color: var(--forest);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tag-input-field {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 6px 4px;
  background: transparent;
  color: var(--ink);
}

/* ---------- Upload dropzone ---------- */
.upload-dropzone {
  border: 1.8px dashed rgba(27,67,50,0.28);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--cream);
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
}

.upload-dropzone:hover {
  border-color: var(--saffron);
  background: rgba(245,166,35,0.08);
}

.upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-dropzone .icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin: 0 auto 12px;
}

.upload-dropzone strong { color: var(--forest); font-size: 0.95rem; }
.upload-dropzone p { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

.upload-dropzone.has-file {
  border-style: solid;
  border-color: rgba(27,67,50,0.2);
  background: var(--warm-white);
}

.upload-filename {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--forest);
  font-weight: 600;
}

/* Photo (avatar) upload variant */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.avatar-upload-preview {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saffron-light);
  font-family: var(--font-display);
  font-size: 1.7rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 3px solid var(--warm-white);
  box-shadow: 0 8px 20px -8px rgba(27,67,50,0.4);
}

.avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-btn {
  position: relative;
  display: inline-flex;
}

.avatar-upload-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 10px;
  max-width: 420px;
  margin-top: 16px;
}

.avatar-picker-option {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  border: 3px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.avatar-picker-option img {
  width: 100%;
  height: 100%;
  display: block;
}

.avatar-picker-option:hover {
  transform: scale(1.08);
}

.avatar-picker-option.selected {
  border-color: var(--forest);
}

/* ---------- Direct messages (professional-to-professional) ---------- */
.dm-layout {
  display: flex;
  min-height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--warm-white);
}

.dm-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid rgba(27,67,50,0.08);
  display: flex;
  flex-direction: column;
}

.dm-sidebar-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(27,67,50,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dm-thread-list {
  flex: 1;
  overflow-y: auto;
}

.dm-thread-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(27,67,50,0.05);
  transition: background 0.15s ease;
}

.dm-thread-item:hover,
.dm-thread-item.active {
  background: var(--cream);
}

.dm-thread-item .avatar {
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.dm-thread-name {
  font-weight: 700;
  color: var(--forest);
  font-size: 0.9rem;
  flex: 1;
}

.dm-thread-item.unread .dm-thread-name {
  font-weight: 800;
}

.dm-thread-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--saffron-dark);
  flex-shrink: 0;
}

.dm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dm-main-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(27,67,50,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dm-message-menu-btn {
  opacity: 0;
  transition: opacity 0.15s ease;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0 4px;
  font-size: 1rem;
  line-height: 1;
}

.chat-message:hover .dm-message-menu-btn,
.chat-message:focus-within .dm-message-menu-btn {
  opacity: 1;
}

/* Touch devices have no hover state at all, so a hover-only reveal hides
   this control (and the delete-message feature behind it) completely —
   show it at a quieter opacity by default wherever hover isn't available. */
@media (hover: none) {
  .dm-message-menu-btn { opacity: 0.55; }
}

.dm-message-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.14);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  z-index: 5;
  min-width: 170px;
  overflow: hidden;
}

.dm-message-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
  font-family: var(--font-body);
}

.dm-message-dropdown button:hover {
  background: var(--cream);
}

.chat-message.tombstoned .chat-bubble {
  font-style: italic;
  color: var(--ink-soft);
  background: var(--cream);
}

.chat-message.own.tombstoned .chat-bubble {
  background: rgba(27,67,50,0.08);
  color: var(--ink-soft);
}

@media (max-width: 780px) {
  .dm-layout { flex-direction: column; min-height: 0; }
  .dm-sidebar { width: auto; max-height: 240px; border-right: none; border-bottom: 1px solid rgba(27,67,50,0.08); }
}

/* ---------- Live selfie capture (ID verification) ---------- */
.camera-capture {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.camera-capture-frame {
  width: 220px;
  height: 220px;
  border-radius: var(--radius-sm, 14px);
  background: var(--forest-dark);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(27,67,50,0.15);
}

.camera-capture-video,
.camera-capture-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, so it behaves like a mirror while framing the shot */
}

.camera-capture-placeholder {
  color: var(--saffron-light);
  font-size: 0.82rem;
  text-align: center;
  padding: 0 20px;
  opacity: 0.85;
}

.camera-capture-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Stepper ---------- */
.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  text-align: center;
}

.stepper-step::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(27,67,50,0.14);
  z-index: -1;
}

.stepper-step:first-child::before { display: none; }

.stepper-step.done::before { background: var(--forest-light); }

.stepper-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 2px solid rgba(27,67,50,0.2);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  flex-shrink: 0;
}

.stepper-step.active .stepper-dot {
  background: linear-gradient(145deg, var(--saffron-light), var(--saffron));
  border-color: var(--saffron);
  color: var(--forest-dark);
}

.stepper-step.done .stepper-dot {
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  border-color: var(--forest);
  color: var(--warm-white);
}

.stepper-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.stepper-step.active .stepper-label,
.stepper-step.done .stepper-label { color: var(--forest); }

/* ---------- Progress bar ---------- */
.progress-block {
  margin-bottom: 8px;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 0.88rem;
}

.progress-head strong {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest);
}

.progress-track {
  width: 100%;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--clay);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--saffron), var(--saffron-dark));
  transition: width 0.5s cubic-bezier(.2,.8,.2,1);
}

.progress-fill.complete {
  background: linear-gradient(90deg, var(--forest-light), var(--forest));
}

/* ---------- Stage panels ---------- */
.stage-panel[hidden] { display: none; }

.stage-panel h2 { margin-bottom: 8px; }
.stage-panel .lede { margin-bottom: 28px; }

/* ---------- Checklist ---------- */
.checklist { display: flex; flex-direction: column; gap: 12px; }

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(27,67,50,0.1);
  background: var(--warm-white);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.checklist-item .check-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(27,67,50,0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.checklist-item.done {
  border-color: rgba(27,67,50,0.16);
  background: rgba(27,67,50,0.04);
}

.checklist-item.done .check-dot {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--warm-white);
}

.checklist-item.done span.label { color: var(--forest); font-weight: 600; }

.checklist-item span.label {
  flex: 1;
  min-width: 0;
}

.checklist-item .check-dot svg { width: 14px; height: 14px; }

.checklist-item a {
  margin-left: auto;
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  justify-content: flex-end;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--saffron-text);
  flex-shrink: 0;
}

.checklist-item .count-label {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--forest);
  text-align: right;
  /* Wraps to a second line rather than forcing the row wider on very
     narrow screens — flex-shrink is intentionally left at its default. */
}

/* ---------- Skill-based rating (post-archive prompt) ---------- */
.rating-professional-card {
  border: 1px solid rgba(27,67,50,0.1);
}

.rating-skill-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Public profile card ---------- */
.profile-hero {
  background: linear-gradient(160deg, var(--forest-light) 0%, var(--forest) 60%, var(--forest-dark) 100%);
  border-radius: 28px;
  padding: 36px 26px;
  color: var(--warm-white);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

@media (min-width: 640px) {
  .profile-hero { padding: 46px 44px; }
}

.profile-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: var(--saffron);
  opacity: 0.16;
  border-radius: 50%;
  right: -110px;
  bottom: -120px;
}

.profile-top {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid rgba(254,252,248,0.3);
  background: rgba(254,252,248,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--saffron-light);
  flex-shrink: 0;
  overflow: hidden;
}

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

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-name-row h1 {
  color: var(--warm-white);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.profile-meta {
  color: rgba(254,252,248,0.85);
  font-size: 0.95rem;
  margin-top: 6px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--saffron);
  color: var(--forest-dark);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.verified-badge svg { width: 13px; height: 13px; }

.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(254,252,248,0.16);
  color: var(--warm-white);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.profile-rate {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.profile-rate-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.profile-rate-item span {
  font-size: 0.8rem;
  color: rgba(254,252,248,0.75);
}

.profile-body {
  margin-top: 26px;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .profile-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.profile-section {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}

.profile-section:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.profile-section h3 { margin-bottom: 14px; }
.profile-section p { color: var(--ink-soft); }

.skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-chip {
  background: rgba(27,67,50,0.08);
  color: var(--forest);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

.rating-empty {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.rating-comment-item {
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--cream);
  margin-bottom: 12px;
}

.rating-comment-item:last-child { margin-bottom: 0; }

.rating-comment-text {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.rating-comment-meta {
  color: var(--ink-soft);
  font-size: 0.78rem;
  margin-top: 6px;
}

/* ---------- Dashboard ---------- */
.dashboard-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.dash-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-top: 3px solid var(--saffron);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dash-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.dash-card h3 { margin-bottom: 4px; }

/* Heading-hierarchy fix (accessibility follow-up, 2026-08-13): both were
   bare <h3>s with no h2 anywhere above them in workspace.html /
   professional-workspace.html's outline (h1 -> h3, skipping a level).
   Promoted to <h2> — sized here to match their exact prior <h3> visual
   weight, since bare h2 is much larger by default. */
#membersTitle, #historyVisibilityTitle {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  margin-bottom: 4px;
}
.dash-card + .dash-card { margin-top: 24px; }

/* Extends the homepage hero's credential-card language into the app
   itself — a dark banner (not just bare text on the page background) with
   a ringed avatar and the same mono "verified" texture, so every dashboard
   visit reads as an extension of the same brand moment, not a plain
   utility screen bolted on after it. */
.dash-welcome {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  padding: 26px 28px;
  border-radius: var(--radius);
  background:
    radial-gradient(480px 240px at 92% -20%, rgba(245, 166, 35, 0.16), transparent 65%),
    var(--forest-dark);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.dash-welcome h1 { color: var(--warm-white); }
.dash-welcome .lede { color: rgba(254, 252, 248, 0.72); }

.dash-welcome .profile-avatar {
  width: 68px;
  height: 68px;
  font-size: 1.3rem;
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  color: var(--saffron-light);
  border: 2px solid var(--saffron);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.18);
  position: relative;
  z-index: 1;
}

.dash-welcome > div:last-child { position: relative; z-index: 1; }

/* The plan pill and cancel/resume link were tuned for light card
   backgrounds (rgba(27,67,50,0.1) + var(--forest) text, etc.) — both would
   be near-invisible on the welcome banner's dark background above, so this
   context gets its own light-on-dark treatment. */
.dash-welcome .status-pill.active { background: rgba(245, 166, 35, 0.18); color: var(--saffron-light); }
.dash-welcome .status-pill.pending-status { background: rgba(254, 252, 248, 0.14); color: rgba(254, 252, 248, 0.85); }
.dash-welcome #subCancelAction a { color: var(--saffron-light) !important; }

.invite-card {
  border: 1px solid rgba(27,67,50,0.1);
  border-left: 3px solid var(--saffron);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}

.invite-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.invite-card:last-child { margin-bottom: 0; }

.invite-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.invite-top strong { color: var(--forest); font-size: 0.98rem; }
.invite-top span { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }

.invite-card p { font-size: 0.88rem; color: var(--ink-soft); margin: 8px 0 14px; }

.invite-actions { display: flex; gap: 10px; }

.invite-actions .btn { padding: 13px 18px; font-size: 0.85rem; }

.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  border: 1.5px dashed rgba(27,67,50,0.18);
  border-radius: var(--radius);
  background: rgba(27,67,50,0.02);
}

.empty-state .icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin: 0 auto 14px;
}

/* ============================================
   Founder / workspace system
   ============================================ */

/* ---------- Segmented control (privacy toggle) ---------- */
.segmented {
  display: flex;
  gap: 8px;
  background: var(--cream);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius-sm);
  padding: 6px;
}

.segmented-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.segmented-option svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segmented-option.selected {
  background: var(--warm-white);
  color: var(--forest);
  box-shadow: 0 4px 14px -6px rgba(27,67,50,0.3);
}

.segmented-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Workspace cards ---------- */
.workspace-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.workspace-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-top: 3px solid var(--saffron);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.workspace-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(27,67,50,0.14);
}

.workspace-card.archived {
  opacity: 0.72;
}

.workspace-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.workspace-top h3 { margin-bottom: 0; }

.workspace-desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.workspace-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(27,67,50,0.08);
}

.workspace-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.workspace-meta svg {
  width: 14px;
  height: 14px;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.active {
  background: rgba(27,67,50,0.1);
  color: var(--forest);
}

.status-pill.archived-status {
  background: rgba(86,95,79,0.12);
  color: var(--ink-soft);
}

/* A finished/done outcome reads as success (green), same family as .active,
   never the amber used for .pending-status — "completed" isn't waiting on
   anything. Kept one shade lighter than .active so a genuinely ongoing
   workspace and a wrapped-up one are still visually distinguishable. */
.status-pill.completed-status {
  background: rgba(45,106,79,0.14);
  color: var(--forest-light);
}

.workspace-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.workspace-actions .btn {
  padding: 10px 16px;
  font-size: 0.86rem;
}

.btn-text {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  padding: 14px 12px;
}

.btn-text:hover { color: var(--forest); }

/* ---------- Professional search page ---------- */
.search-bar {
  position: relative;
  margin-bottom: 30px;
}

.search-bar svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  stroke: var(--ink-soft);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-bar input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(27,67,50,0.16);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--warm-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--saffron-dark);
  box-shadow: 0 0 0 4px rgba(245,166,35,0.18);
}

.pro-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .pro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pro-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.pro-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(27,67,50,0.14);
}

.pro-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pro-card-top .avatar {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.pro-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pro-card-name strong { color: var(--forest); font-size: 1rem; }

.pro-card-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.pro-card-rate {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--forest);
  margin-bottom: 12px;
}

.pro-card .skill-chip-row {
  margin-bottom: 16px;
}

.pro-card .skill-chip {
  font-size: 0.78rem;
  padding: 5px 11px;
}

.search-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(27,67,50,0.06);
  border: 1px solid rgba(27,67,50,0.12);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.search-context-banner strong { color: var(--forest); }

/* ============================================
   Professional search & discovery
   ============================================ */

/* ---------- Search toolbar (search bar + category dropdown) ---------- */
.search-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

@media (min-width: 720px) {
  .search-toolbar { flex-direction: row; }
  .search-toolbar .search-bar { flex: 1; margin-bottom: 0; }
}

.search-toolbar .search-bar { margin-bottom: 0; }

.category-select {
  min-width: 220px;
}

/* ---------- Search layout: sidebar filters + results ---------- */
.search-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .search-layout { grid-template-columns: 260px 1fr; }
}

.filter-toggle-btn {
  display: inline-flex;
  margin-bottom: 18px;
}

@media (min-width: 900px) {
  .filter-toggle-btn { display: none; }
}

.filter-panel {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}

.filter-panel:hover {
  box-shadow: var(--shadow);
}

.filter-panel.mobile-hidden { display: none; }

@media (min-width: 900px) {
  .filter-panel.mobile-hidden { display: block; }
  .filter-panel { position: sticky; top: 100px; }
}

.filter-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(27,67,50,0.08);
}

.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-group h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 14px;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  background: var(--cream);
  border: 1.5px solid transparent;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 13px 16px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-chip:hover { border-color: rgba(27,67,50,0.2); }

.filter-chip.selected {
  background: var(--forest);
  color: var(--warm-white);
}

.filter-clear {
  background: none;
  border: none;
  color: var(--saffron-text);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  padding: 0;
}

/* ---------- Results ---------- */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* #resultsCount is an <h2> (heading-hierarchy fix, accessibility review
   2026-08-13 — it's the section heading sibling to the filter panel's own
   <h2 class="sr-only">, not a sub-heading of anything), sized to match its
   prior visual weight as an h3. */
.results-header h2 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.55rem); }

/* pro-card as a clickable link wrapping the whole card */
a.pro-card { display: block; cursor: pointer; }

.pro-card-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Full professional profile page ---------- */

.invite-card-box {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}

.invite-card-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.invite-card-box h3 { margin-bottom: 8px; }
.invite-card-box p { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 16px; }

/* ============================================
   Workspace interior
   ============================================ */

.workspace-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.workspace-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px;
  margin: -4px -4px 8px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.88rem;
}

.workspace-bar-back:hover { color: var(--forest); }

.workspace-bar-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.workspace-bar-title h1 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
}

.workspace-bar-desc {
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 60ch;
}

/* ---------- Shell layout ---------- */
.workspace-shell {
  display: grid;
  gap: 24px;
  /* minmax(0, 1fr) — not bare 1fr — so a track can't be forced wider than
     the viewport by a descendant's default min-content size (the classic
     CSS Grid "blowout" where a nested flex row's own min-width:auto,
     however deep, overrides what the grid otherwise has room for). */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .workspace-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}

/* ---------- Tabs ---------- */
.tab-row {
  display: flex;
  gap: 8px;
  background: var(--cream);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius-sm);
  padding: 6px;
  margin-bottom: 22px;
}

.tab-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tab-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.tab-btn.selected {
  background: var(--warm-white);
  color: var(--forest);
  box-shadow: 0 4px 14px -6px rgba(27,67,50,0.3);
}

.tab-panel[hidden] { display: none; }

/* ---------- Chat ---------- */
.chat-card {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-log {
  padding: 22px;
  max-height: 480px;
  min-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-message {
  display: flex;
  gap: 12px;
  max-width: 82%;
}

.chat-message.own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message .avatar {
  width: 36px;
  height: 36px;
  font-size: 0.8rem;
}

.chat-message.system {
  align-self: center;
  max-width: 90%;
}

.chat-bubble-wrap { min-width: 0; }

.chat-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  /* Fits its own content (name + time + menu button) instead of stretching
     to match .chat-bubble-wrap's width, which is set by the message text
     below it and can be much wider once a message wraps to multiple lines.
     The message-options dropdown is positioned `right: 0` relative to this
     element (see messages.html) — on a stretched .chat-meta that anchored
     to the far edge of the whole bubble instead of next to the button,
     landing correctly only for "own" messages (where flex-end happened to
     push content to that same edge) and floating detached from the button
     on every received message. */
  width: fit-content;
  max-width: 100%;
}

.chat-message.own .chat-meta { margin-left: auto; }

.chat-meta strong { color: var(--forest); font-size: 0.82rem; }

.chat-bubble {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message.own .chat-bubble {
  background: linear-gradient(145deg, var(--forest-light), var(--forest));
  color: var(--warm-white);
}

.chat-message.system .chat-bubble {
  background: rgba(245,166,35,0.14);
  color: var(--saffron-text);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- File-type icon (shared: chat attachments + Files tab) ---------- */
.file-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.file-type-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.file-type-icon.pdf { background: var(--forest-dark); color: var(--warm-white); }
.file-type-icon.word { background: var(--forest); color: var(--warm-white); }
.file-type-icon.excel { background: var(--forest-light); color: var(--warm-white); }
.file-type-icon.image { background: linear-gradient(135deg, var(--saffron-light), var(--saffron)); color: var(--forest-dark); }
.file-type-icon.zip { background: var(--clay); color: var(--forest); }
.file-type-icon.file { background: var(--cream); color: var(--ink-soft); }

/* ---------- Chat attachments ---------- */
.chat-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(254,252,248,0.5);
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 8px;
}

.chat-message.own .chat-attachment { background: rgba(254,252,248,0.16); }

.chat-attachment-info { min-width: 0; flex: 1; }
.chat-attachment-name {
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attachment-meta { font-size: 0.76rem; opacity: 0.75; }

.chat-attachment-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(27,67,50,0.08);
  color: inherit;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.chat-message.own .chat-attachment-download { background: rgba(254,252,248,0.18); }
.chat-attachment-download:hover { background: rgba(27,67,50,0.16); }
.chat-attachment-download svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

.chat-image-attachment {
  position: relative;
  display: block;
  margin-top: 8px;
  max-width: 240px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.chat-image-attachment img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.chat-image-download-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14,36,26,0.55);
  color: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.chat-image-attachment:hover .chat-image-download-btn { background: rgba(14,36,26,0.75); }
.chat-image-download-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

.chat-composer {
  border-top: 1px solid rgba(27,67,50,0.08);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid rgba(27,67,50,0.16);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--warm-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: var(--saffron-dark);
  box-shadow: 0 0 0 4px rgba(245,166,35,0.18);
}

.chat-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(27,67,50,0.16);
  background: var(--warm-white);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chat-icon-btn:hover { border-color: var(--forest); color: var(--forest); }

.chat-icon-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.chat-icon-btn input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

.chat-send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--saffron-light), var(--saffron));
  color: var(--forest-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(245,166,35,0.55);
  transition: transform 0.2s ease;
}

.chat-send-btn:hover { transform: scale(1.06); }
.chat-send-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.composer-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--forest);
  font-weight: 600;
}

.composer-attachment button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--forest);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}

/* Visual circle stays small (matches the compact chip) while the button
   itself keeps a full 44px tap target. */
.composer-attachment button::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(27,67,50,0.14);
  z-index: -1;
}

/* ---------- Task board ---------- */
.task-add-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.task-add-row input { flex: 1; }

.task-list { display: flex; flex-direction: column; gap: 10px; }

.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.task-row.pinned { border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.06); }
/* Accessibility review (2026-08-13): this used to also set `opacity: 0.62`
   to visually fade a completed task — but opacity compounds with the
   .task-title/.task-meta color already chosen to pass AA on its own
   (var(--ink-soft), 6.52:1 on warm-white), dragging the *effective*
   rendered contrast down to ~2.78:1. The strikethrough + ink-soft color
   below already signal "done" clearly without needing the fade. */

.task-check {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(27,67,50,0.25);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.task-row.done .task-check {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--warm-white);
}

.task-check svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.task-body { flex: 1; min-width: 0; }

.task-title {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.task-row.done .task-title { text-decoration: line-through; color: var(--ink-soft); }

.task-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; }

.task-actions { display: flex; gap: 6px; flex-shrink: 0; }

.task-pin-btn, .task-remove-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.task-pin-btn:hover, .task-remove-btn:hover { background: rgba(27,67,50,0.08); color: var(--forest); }
.task-pin-btn.active { color: var(--saffron-dark); }
.task-pin-btn svg, .task-remove-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.task-pin-btn.active svg { fill: var(--saffron); stroke: var(--saffron-dark); }

/* ---------- Project feed ---------- */
.feed-composer { margin-bottom: 24px; }
.feed-composer .form-actions { margin-top: 14px; }

.feed-list { display: flex; flex-direction: column; gap: 16px; }

.feed-item {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: 14px;
}

.feed-item .icon-badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

.feed-item-title { color: var(--forest); font-size: 1rem; margin-bottom: 4px; }
.feed-item-time { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 8px; }
.feed-item-body { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Work agreements ---------- */
.agreement-list { display: flex; flex-direction: column; gap: 14px; }

.agreement-card {
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-body);
}

.agreement-card:hover { border-color: var(--saffron); }

.agreement-meta { font-size: 0.86rem; color: var(--ink-soft); }
.agreement-meta strong { color: var(--forest); }

.agreement-detail-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(27,67,50,0.08);
}
.agreement-detail-row:first-child { padding-top: 0; }
.agreement-detail-row:last-child { padding-bottom: 0; border-bottom: none; }
.agreement-detail-row p { color: var(--ink); font-size: 0.98rem; line-height: 1.6; white-space: pre-wrap; }

/* A quieter, data-sheet version of .form-label for the dense stack of
   fields in the agreement detail modal — .eyebrow's saffron dot reads as
   a section header, which is too loud repeated six times in one panel. */
.agreement-detail-row > .form-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.agreement-signature-sub { display: block; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

.agreement-fineprint {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(27,67,50,0.1);
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- Files tab ---------- */
.file-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.file-chip {
  border: 1.5px solid rgba(27,67,50,0.16);
  background: var(--warm-white);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 13px 16px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.file-chip:hover { border-color: var(--forest); color: var(--forest); }

.file-chip.selected {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--warm-white);
}

.files-date-group { margin-bottom: 24px; }
.files-date-group:last-child { margin-bottom: 0; }

.files-date-heading {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.files-list {
  background: var(--warm-white);
  border: 1px solid rgba(27,67,50,0.1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.file-row + .file-row { border-top: 1px solid rgba(27,67,50,0.08); }

.file-row-info { min-width: 0; flex: 1; }
.file-row-name {
  font-weight: 700;
  color: var(--forest);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }

.file-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(27,67,50,0.06);
  color: var(--forest);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.file-download-btn:hover { background: rgba(245,166,35,0.18); transform: translateY(-1px); }
.file-download-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* ---------- Members sidebar ---------- */
.members-card { position: sticky; top: 100px; }

.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(27,67,50,0.08);
}

.member-row:last-child { border-bottom: none; padding-bottom: 0; }
.member-row:first-child { padding-top: 0; }

.member-row .avatar { width: 40px; height: 40px; font-size: 0.85rem; flex-shrink: 0; }

.member-info { min-width: 0; }
.member-name { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--forest); font-size: 0.92rem; }
.member-role { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1px; }

.owner-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--saffron-text);
  background: rgba(245,166,35,0.15);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.member-verified-dot {
  width: 14px; height: 14px;
  color: var(--forest);
  flex-shrink: 0;
}
.member-verified-dot svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Generic modal (invite panel) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 36, 26, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 400;
}

.modal-panel {
  width: min(480px, 100%);
  max-height: 88vh;
  background: var(--warm-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-panel.wide { width: min(620px, 100%); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(27,67,50,0.1);
  flex-shrink: 0;
}

.modal-header h3 { color: var(--forest); }

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(27,67,50,0.08);
  color: var(--forest);
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.modal-close:hover { background: rgba(27,67,50,0.16); }

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

/* ---------- Invite link ---------- */
.invite-link-label { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 12px; }
.invite-link-label strong { color: var(--forest); }

.invite-link-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.invite-link-row .form-input {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  color: var(--ink-soft);
  background: var(--cream);
}

.invite-share-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.invite-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(27,67,50,0.16);
  color: var(--forest);
  font-weight: 600;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.invite-share-btn:hover { transform: translateY(-1px); border-color: var(--forest); }
.invite-share-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.invite-share-btn.whatsapp:hover { background: rgba(27,67,50,0.06); }
.invite-share-btn.email:hover { background: rgba(245,166,35,0.1); }

.invite-pending-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(27,67,50,0.1);
}

.invite-pending-section h4 {
  color: var(--forest);
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.pending-invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.pending-invite-row + .pending-invite-row { border-top: 1px solid rgba(27,67,50,0.06); }

.status-pill.pending-status {
  background: rgba(245,166,35,0.15);
  color: var(--saffron-text);
}

/* ---------- Huddle actions ---------- */
.huddle-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .huddle-actions { width: 100%; }
  .huddle-actions .btn { flex: 1; }
}

/* Icon-above-label instead of side-by-side, and a horizontally scrollable
   strip instead of 6 equal-width (flex:1) columns — with Files/Agreements/
   Payments added after this row was first built for 4 tabs, splitting the
   row six ways left no room for "Agreements" or "Payments" to render
   without overlapping the next tab. A scrollable natural-width strip fits
   whatever tab count a given workspace shows (collaboration workspaces
   hide the Payments tab) without recomputing a magic per-tab width.
   Breakpoint is wider than the usual 480px phone cutoff on purpose: at
   6 equal-width columns, multi-word labels like "Project feed" and
   "Agreements" already run out of room well before the layout is
   otherwise considered "mobile". */
@media (max-width: 640px) {
  .tab-row {
    gap: 4px;
    padding: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    font-size: 0.7rem;
    white-space: nowrap;
  }
  .tab-btn svg { width: 16px; height: 16px; }
}

/* ---------- Huddle panel (Jitsi Meet, embedded inline in the workspace) ----------
   Takes over the tab content area — same slot as Chat/Task board/Project
   feed/Files — instead of a page-covering modal, and never leaves the
   Ecogru tab (Jitsi loads via its IFrame API into #jitsiMount below). */
.huddle-inline-card {
  background: var(--forest-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
}

@media (max-width: 640px) {
  .huddle-inline-card { height: 420px; }
}

.huddle-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--forest);
  color: var(--warm-white);
  flex-shrink: 0;
}

.huddle-inline-header-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
}

.huddle-call-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--saffron);
  flex-shrink: 0;
  animation: huddlePulse 1.8s infinite;
}

@keyframes huddlePulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}

.huddle-call-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(254, 252, 248, 0.14);
  color: var(--warm-white);
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.huddle-call-close:hover { background: rgba(254, 252, 248, 0.26); }

.huddle-inline-frame {
  flex: 1;
  background: var(--forest-dark);
}
.huddle-inline-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Huddle toast ---------- */
.huddle-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--forest-dark);
  color: var(--warm-white);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.huddle-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.huddle-toast svg {
  width: 18px; height: 18px;
  stroke: var(--saffron-light);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ---------- Account settings ---------- */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid rgba(27,67,50,0.08);
}
.settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.settings-row:first-child { padding-top: 0; }
.settings-row-label { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 3px; }
.settings-row-value { font-weight: 700; color: var(--forest); font-size: 0.96rem; }

.danger-zone {
  margin-top: 32px;
  border-color: rgba(192,57,43,0.28);
  background: rgba(192,57,43,0.04);
}
.danger-zone h3 { color: var(--danger-text); }
.danger-zone p { color: var(--ink-soft); font-size: 0.9rem; margin: 6px 0 20px; max-width: 46em; }

.btn-danger {
  background: var(--danger);
  color: var(--warm-white);
}
.btn-danger:hover {
  background: var(--danger-dark);
  box-shadow: 0 12px 28px -10px rgba(192,57,43,0.5);
  transform: translateY(-2px);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}