/* ==========================================================================
   AirBid Australia — Bootstrap theme overrides & custom utility classes
   ========================================================================== */

:root {
  --bs-red: #E53935;
  --bs-red-rgb: 229, 57, 53;
  --bs-dark-brand: #222222;
  --bs-dark-brand-rgb: 34, 34, 34;
  --bs-accent: #FFD54F;
  --bs-accent-rgb: 255, 213, 79;
  --bs-grey: #F5F5F5;

  --bs-primary: var(--bs-red);
  --bs-primary-rgb: var(--bs-red-rgb);
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Inter', 'Poppins', sans-serif;
  background-color: #ffffff;
  color: var(--bs-dark-brand);
  overflow-x: hidden;
  max-width: 100vw;
}

::selection { background: var(--bs-red); color: #fff; }
[x-cloak] { display: none !important; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Brand colour utilities ---------- */
.text-brand-red { color: var(--bs-red) !important; }
.text-brand-dark { color: var(--bs-dark-brand) !important; }
.text-brand-accent { color: var(--bs-accent) !important; }
.text-brand-dark-70 { color: rgba(var(--bs-dark-brand-rgb), .70) !important; }
.text-brand-dark-75 { color: rgba(var(--bs-dark-brand-rgb), .75) !important; }
.text-brand-dark-80 { color: rgba(var(--bs-dark-brand-rgb), .80) !important; }
.text-brand-dark-60 { color: rgba(var(--bs-dark-brand-rgb), .60) !important; }
.text-brand-dark-50 { color: rgba(var(--bs-dark-brand-rgb), .50) !important; }

.bg-brand-red { background-color: var(--bs-red) !important; }
.bg-brand-dark { background-color: var(--bs-dark-brand) !important; }
.bg-brand-accent { background-color: var(--bs-accent) !important; }
.bg-brand-grey { background-color: var(--bs-grey) !important; }

.bg-brand-red-5 { background-color: rgba(var(--bs-red-rgb), .05) !important; }
.bg-brand-red-10 { background-color: rgba(var(--bs-red-rgb), .10) !important; }
.bg-brand-accent-20 { background-color: rgba(var(--bs-accent-rgb), .20) !important; }
.bg-brand-accent-25 { background-color: rgba(var(--bs-accent-rgb), .25) !important; }
.bg-brand-accent-30 { background-color: rgba(var(--bs-accent-rgb), .30) !important; }

.border-brand-red { border-color: var(--bs-red) !important; }
.border-brand-accent { border-color: rgba(var(--bs-accent-rgb), .40) !important; }

/* ---------- Buttons ---------- */
.btn-brand-red {
  background-color: var(--bs-red);
  border-color: var(--bs-red);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 25px -8px rgba(var(--bs-red-rgb), .35);
  transition: all .2s ease;
}
.btn-brand-red:hover, .btn-brand-red:focus {
  background-color: rgba(var(--bs-red-rgb), .9);
  border-color: rgba(var(--bs-red-rgb), .9);
  color: #fff;
  transform: scale(1.05);
}
.btn-brand-red:active { transform: scale(.95); }

.btn-brand-dark {
  background-color: var(--bs-dark-brand);
  border-color: var(--bs-dark-brand);
  color: #fff;
  font-weight: 800;
  transition: all .2s ease;
}
.btn-brand-dark:hover, .btn-brand-dark:focus {
  background-color: var(--bs-red);
  border-color: var(--bs-red);
  color: #fff;
}

.btn-brand-outline-light {
  background-color: transparent;
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  font-weight: 800;
  transition: all .2s ease;
}
.btn-brand-outline-light:hover {
  background-color: rgba(255,255,255,.1);
  color: #fff;
  transform: scale(1.05);
}

.btn-brand-grey {
  background-color: var(--bs-grey);
  color: var(--bs-dark-brand);
  font-weight: 800;
  transition: all .2s ease;
}
.btn-brand-grey:hover { background-color: rgba(245,245,245,.8); color: var(--bs-dark-brand); }

.btn-brand-white {
  background-color: #fff;
  color: var(--bs-dark-brand);
  font-weight: 800;
  border: 2px solid #e5e7eb;
  transition: all .2s ease;
}
.btn-brand-white:hover { background-color: var(--bs-grey); border-color: var(--bs-dark-brand); }

/* ---------- Rounded corners (Tailwind-like scale) ---------- */
.rounded-xl-4 { border-radius: 1rem !important; }
.rounded-2xl { border-radius: 1.25rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-4xl { border-radius: 2rem !important; }
.rounded-pill-lg { border-radius: 999px !important; }

/* ---------- Shadows ---------- */
.shadow-xs { box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }
.shadow-brand-red-sm { box-shadow: 0 8px 20px -6px rgba(var(--bs-red-rgb), .2) !important; }
.shadow-brand-red-md { box-shadow: 0 15px 35px -10px rgba(var(--bs-red-rgb), .25) !important; }
.shadow-brand-dark-md { box-shadow: 0 15px 35px -10px rgba(var(--bs-dark-brand-rgb), .25) !important; }

/* ---------- Header ---------- */
#header-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  transition: all .3s ease;
  background: transparent;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
#header-nav.header-scrolled {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.navbar-brand-logo {
  height: 2.5rem;
  width: auto;
  transition: transform .2s ease;
}
a.navbar-brand-custom:hover .navbar-brand-logo { transform: scale(1.05); }

.footer-brand-logo { height: 2.5rem; width: auto; }

.nav-link-custom {
  color: rgba(var(--bs-dark-brand-rgb), .8);
  font-weight: 600;
  font-size: .875rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s ease;
}
.nav-link-custom:hover { color: var(--bs-red); }

/* ---------- Account menu (signed-in, dashboard pages) ---------- */
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem .75rem .3125rem .3125rem;
  background: #fff;
  border: 1px solid #e9e9ec;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav-user-trigger:hover { border-color: #d5d7dc; }
.nav-user-trigger[aria-expanded="true"] {
  border-color: var(--bs-red);
  box-shadow: 0 0 0 3px rgba(var(--bs-red-rgb), .1);
}
.nav-user-avatar {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--bs-dark-brand);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-user-name {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-chev {
  width: .875rem; height: .875rem;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  transition: transform .2s ease;
}
.nav-user-trigger[aria-expanded="true"] .nav-user-chev { transform: rotate(180deg); }

.nav-user-menu {
  min-width: 15rem;
  padding: .5rem;
  margin-top: .5rem;
  border: 1px solid #ececef;
  border-radius: .875rem;
  box-shadow: 0 20px 45px -24px rgba(0,0,0,.28);
}
.nav-user-head {
  padding: .5rem .75rem .625rem;
  border-bottom: 1px solid #f1f1f3;
  margin-bottom: .375rem;
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  min-width: 0;
}
.nav-user-head-name { font-size: .8125rem; font-weight: 800; color: var(--bs-dark-brand); }
.nav-user-head-mail {
  font-size: .75rem;
  color: rgba(var(--bs-dark-brand-rgb), .5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .8);
  background: none;
  border: none;
  border-radius: .5rem;
  text-align: left;
  cursor: pointer;
}
.nav-user-item:hover,
.nav-user-item:focus { background: #f6f7f8; color: var(--bs-red); }
.nav-user-item i, .nav-user-item svg {
  width: .9375rem; height: .9375rem;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  flex-shrink: 0;
}
.nav-user-item:hover i, .nav-user-item:hover svg { color: var(--bs-red); }
.nav-user-item-danger:hover,
.nav-user-item-danger:focus { background: rgba(var(--bs-red-rgb), .07); }

/* ---------- Categories mega menu ---------- */
/* NOTE: .mega-wrap is deliberately NOT positioned — the panel anchors to the
   header's container instead, which is what keeps it centred on screen. */
.mega-wrap { position: static; }
.mega-trigger { display: inline-flex; align-items: center; gap: .3rem; }
.mega-trigger .mega-chev { transition: transform .25s ease; }
.mega-wrap.mega-open .mega-trigger { color: var(--bs-red); }
.mega-wrap.mega-open .mega-trigger .mega-chev { transform: rotate(180deg); }

/* Anchored to the header bar (not the trigger) so a wide panel can never
   overflow the viewport edge. `left/right: 0` + margin auto keeps it centred
   within the page container at every width. */
.mega-panel {
  position: fixed;
  top: var(--mega-top, 5.5rem);
  left: 50%;
  width: min(72rem, calc(100vw - 2.5rem));
  transform: translateX(-50%) translateY(-8px);
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1.25rem;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.22);
  padding: 2rem 2.25rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1080;
  /* Never taller than the space below the header; scroll internally if so. */
  max-height: calc(100vh - var(--mega-top, 5.5rem) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Slim scrollbar to match the category bar treatment */
.mega-panel::-webkit-scrollbar { width: 6px; }
.mega-panel::-webkit-scrollbar-track { background: transparent; }
.mega-panel::-webkit-scrollbar-thumb { background: #d8dbe0; border-radius: 999px; }
.mega-panel::-webkit-scrollbar-thumb:hover { background: var(--bs-red); }
.mega-wrap.mega-open .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Invisible bridge so the cursor can travel from trigger down into the panel
   without passing over a gap that would close the menu. */
.mega-panel::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  height: 1.5rem;
}

/* Fluid: fits as many ~13rem columns as the panel width allows, so the
   layout adapts continuously instead of snapping at one breakpoint. */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.75rem 2.25rem;
}
@media (max-width: 1199.98px) {
  .mega-panel { padding: 1.5rem 1.75rem 1.25rem; }
  .mega-grid { gap: 1.5rem 1.75rem; }
}

.mega-cat-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--bs-red);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .625rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid #ececef;
  transition: color .2s ease;
}
.mega-cat-head:hover { color: #b71c1c; }

.mega-sub-list { list-style: none; margin: 0; padding: 0; }
.mega-sub-list li + li { margin-top: .5rem; }
.mega-sub-link {
  display: block;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.mega-sub-link:hover { color: var(--bs-red); transform: translateX(3px); }
.mega-sub-empty { color: rgba(var(--bs-dark-brand-rgb), .45); font-style: italic; font-size: .875rem; }

.mega-foot {
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid #ececef;
  text-align: center;
}
.mega-foot-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--bs-dark-brand);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.mega-foot-link i { color: var(--bs-red); transition: transform .2s ease; }
.mega-foot-link:hover { color: var(--bs-red); }
.mega-foot-link:hover i { transform: translateX(4px); }

/* ---------- Mobile accordion version ---------- */
/* Top-level "Categories" row — styled to match the sibling drawer links so
   the nav reads as one consistent list until it's opened. */
.mega-m-root { border-bottom: 1px solid #dee2e6; }
.mega-m-root-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  background: none;
  border: none;
  color: rgba(var(--bs-dark-brand-rgb), .8);
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.mega-m-root-chev { color: #9ca3af; flex-shrink: 0; transition: transform .25s ease; }
.mega-m-root.is-open .mega-m-root-head { color: var(--bs-red); }
.mega-m-root.is-open .mega-m-root-chev { transform: rotate(180deg); color: var(--bs-red); }
.mega-m-root-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.mega-m-root.is-open .mega-m-root-body { max-height: 34rem; overflow-y: auto; }

.mega-m-group { border-bottom: 1px solid #f1f1f1; }
.mega-m-group:last-child { border-bottom: none; }
.mega-m-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem 0 .625rem .875rem;
  background: none;
  border: none;
  color: rgba(var(--bs-dark-brand-rgb), .72);
  font-weight: 600;
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
}
.mega-m-head .mega-m-chev { transition: transform .25s ease; flex-shrink: 0; color: #9ca3af; }
.mega-m-group.mega-m-open .mega-m-head { color: var(--bs-red); }
.mega-m-group.mega-m-open .mega-m-chev { transform: rotate(180deg); color: var(--bs-red); }
.mega-m-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.mega-m-group.mega-m-open .mega-m-body { max-height: 22rem; }
.mega-m-sub {
  display: block;
  padding: .4375rem 0 .4375rem 2.375rem;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  font-size: .78125rem;
  font-weight: 600;
  text-decoration: none;
}
.mega-m-sub:hover { color: var(--bs-red); }
.mega-m-viewall { color: var(--bs-red); font-weight: 800; }
.mega-m-body > .mega-m-sub:last-child { padding-bottom: .875rem; }

#mobile-drawer {
  position: fixed;
  top: 60px; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
  transition: all .3s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  z-index: 1040;
}
/* Cap to the space below the header and scroll — the Categories accordion
   makes the drawer taller than a fixed 600px could show. */
#mobile-drawer.drawer-open {
  max-height: calc(100vh - 60px);
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#mobile-drawer::-webkit-scrollbar { width: 5px; }
#mobile-drawer::-webkit-scrollbar-track { background: transparent; }
#mobile-drawer::-webkit-scrollbar-thumb { background: #d8dbe0; border-radius: 999px; }

/* ---------- Hero ---------- */
#hero {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 4rem;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(229,57,53,.04), transparent 70%);
}
@media (min-width: 992px) {
  #hero { padding-top: 8rem; padding-bottom: 6rem; }
}
.hero-blob-1 {
  position: absolute; top: 25%; right: 0;
  width: 24rem; height: 24rem;
  background: rgba(var(--bs-red-rgb), .05);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-blob-2 {
  position: absolute; bottom: 2.5rem; left: 2.5rem;
  width: 18rem; height: 18rem;
  background: rgba(var(--bs-accent-rgb), .05);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
#hiw-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 3.5rem;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(229,57,53,.04), transparent 70%);
}
@media (min-width: 992px) {
  #hiw-hero { padding-top: 10rem; padding-bottom: 5rem; }
}

.hero-underline {
  position: absolute; left: 0; bottom: .25rem;
  width: 100%; height: .5rem;
  background: rgba(var(--bs-accent-rgb), .4);
  z-index: -1;
  border-radius: 999px;
}
.hero-search-box {
  background: #fff;
  padding: .5rem;
  border-radius: 1.25rem;
  box-shadow: 0 15px 35px -10px rgba(0,0,0,.15);
  border: 1px solid #f1f1f1;
}
.hero-mock-card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.2);
  border: 1px solid #f1f1f1;
  padding: 1.5rem;
  position: relative;
  z-index: 10;
}
.hero-float-card {
  position: absolute;
  background: #fff;
  box-shadow: 0 15px 35px -10px rgba(0,0,0,.15);
  border-radius: 1.25rem;
  border: 1px solid #fafafa;
  z-index: 20;
  pointer-events: none;
}
.trust-badge-icon {
  padding: .375rem;
  border-radius: .75rem;
}

/* ---------- Stats ---------- */
#statistics { background-color: var(--bs-dark-brand); position: relative; overflow: hidden; }
.stat-card {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all .3s ease;
  height: 100%;
}
.stat-card:hover { border-color: rgba(var(--bs-red-rgb), .3); background: rgba(255,255,255,.1); }
.stat-icon-wrap { padding: .5rem; border-radius: .9rem; transition: transform .2s ease; flex-shrink: 0; }
.stat-card:hover .stat-icon-wrap { transform: scale(1.1); }

.ticker-bar {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: .75rem 1.5rem;
}
.ticker-text-wrap { min-width: 0; }
.ticker-text-wrap #ticker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767.98px) {
  .stat-card { padding: 1.25rem; border-radius: 1rem; }
  .ticker-bar { border-radius: 1rem; padding: .75rem 1rem; }
  .ticker-text-wrap #ticker-text { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ---------- Back button (shared across sub-pages) ---------- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.125rem .5rem .875rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e9e9ec;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: all .2s ease;
  margin-bottom: 1.5rem;
  /* Let the parent decide the side — pages wrap this in a flex row and set
     justify-content, so no margin auto here that would override it. */
  align-self: flex-start;
}
/* Sitting inside a heading row rather than on its own line: drop the trailing
   gap and nudge it onto the eyebrow's baseline. */
/* Sitting inside a heading row rather than on its own line: drop the trailing
   gap so the parent controls spacing. */
.back-btn--flush { margin-bottom: 0; }
.back-btn:hover {
  color: var(--bs-red);
  border-color: rgba(var(--bs-red-rgb), .35);
  box-shadow: 0 6px 14px -6px rgba(var(--bs-red-rgb), .35);
  transform: translateX(-2px);
}
.back-btn:focus-visible {
  outline: 2px solid var(--bs-red);
  outline-offset: 2px;
}
/* Arrow slides left on hover to reinforce the "back" direction. */
.back-btn svg { transition: transform .2s ease; }
.back-btn:hover svg { transform: translateX(-3px); }

/* ---------- Section badges / eyebrows ---------- */
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: rgba(var(--bs-red-rgb), .05);
  color: var(--bs-red);
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eyebrow-badge-blue {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: #eff6ff;
  color: #2563eb;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Why choose cards ---------- */
.feature-card {
  background-color: var(--bs-grey);
  border: 1px solid rgba(241,241,241,.5);
  padding: 2rem;
  border-radius: 1.5rem;
  transition: all .3s ease;
  height: 100%;
}
.feature-card:hover {
  background: #fff;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.15);
  transform: translateY(-.5rem);
}
.feature-icon-wrap {
  padding: .75rem;
  border-radius: 1rem;
  width: fit-content;
  margin-bottom: 1.5rem;
  transition: transform .2s ease;
}
.feature-card:hover .feature-icon-wrap { transform: scale(1.1); }
.feature-card:hover h3 { color: var(--bs-red); }

/* ---------- Category bar / task cards ---------- */
.cat-scroll-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .875rem;
  margin-bottom: 2rem;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #d8dbe0 transparent;
}
/* WebKit/Chromium: slim rounded track+thumb in place of the OS scrollbar */
.cat-scroll-bar::-webkit-scrollbar {
  height: 6px;
}
.cat-scroll-bar::-webkit-scrollbar-track {
  background: #ededf0;
  border-radius: 999px;
}
.cat-scroll-bar::-webkit-scrollbar-thumb {
  background: #c9ccd2;
  border-radius: 999px;
  transition: background .2s ease;
}
.cat-scroll-bar::-webkit-scrollbar-thumb:hover {
  background: var(--bs-red);
}
/* Hide the stepper arrows WebKit adds at each end of the track */
.cat-scroll-bar::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.cat-btn {
  scroll-snap-align: start;
  flex: 0 0 auto;
  padding: .75rem 1.5rem;
  border-radius: 1.25rem;
  font-weight: 800;
  font-size: .875rem;
  white-space: nowrap;
  border: 1px solid #f1f1f1;
  background: #fff;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  cursor: pointer;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.cat-btn:hover {
  color: var(--bs-dark-brand);
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* On touch devices the scrollbar auto-hides, so reclaim its gutter. */
@media (hover: none) {
  .cat-scroll-bar { padding-bottom: .25rem; }
}
.cat-btn.active-dark { background: var(--bs-dark-brand); color: #fff; border-color: var(--bs-dark-brand); box-shadow: 0 6px 15px rgba(0,0,0,.15); }
.cat-btn.active-red { background: var(--bs-red); color: #fff; border-color: var(--bs-red); box-shadow: 0 6px 15px rgba(var(--bs-red-rgb), .1); }

.task-card {
  background: #fff;
  border-radius: 1.25rem;
  border: 1px solid #f1f1f1;
  padding: 1.25rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.08);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  /* Equal-height cards across a grid row, footer pinned to the bottom. */
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) { .task-card { padding: 1.5rem; } }
.task-card-footer { margin-top: auto; }
.task-card:hover { box-shadow: 0 20px 40px -12px rgba(0,0,0,.15); border-color: #e5e7eb; }
.task-card.task-card-active {
  border-color: var(--bs-red);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.15);
  outline: 2px solid rgba(var(--bs-red-rgb), .1);
  outline-offset: 0;
}

.view-bid-btn {
  display: inline-block;
  font-weight: 800;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-size: .75rem;
  transition: all .2s ease;
  cursor: pointer;
  border: none;
  text-align: center;
  white-space: nowrap;
}
.view-bid-btn.state-default { background: var(--bs-grey); color: var(--bs-dark-brand); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.view-bid-btn.state-default:hover { background: var(--bs-red); color: #fff; }
.view-bid-btn.state-active { background: var(--bs-dark-brand); color: #fff; }

.bid-panel {
  background: #fff;
  border-radius: 1.5rem;
  border: 1px solid rgba(var(--bs-red-rgb), .3);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  padding: 1.5rem;
  position: sticky;
  top: 6rem;
  z-index: 20;
}
@media (min-width: 576px) { .bid-panel { padding: 2rem; } }

.bid-history-item {
  background: #f8fafc;
  border: 1px solid rgba(241,245,249,.5);
  border-radius: .9rem;
  padding: .75rem;
}

/* ---------- How it works ---------- */
/* Soft ambient glows behind the walkthrough section */
.hiw-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.hiw-glow-1 { top: -6rem; right: -6rem; width: 24rem; height: 24rem; background: rgba(var(--bs-red-rgb), .06); }
.hiw-glow-2 { bottom: -8rem; left: -6rem; width: 26rem; height: 26rem; background: rgba(255,213,79,.10); }

/* ---------- Step progress rail ---------- */
.hiw-progress { position: relative; max-width: 34rem; }
.hiw-progress-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: #ededf0;
  border-radius: 999px;
  overflow: hidden;
}
.hiw-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bs-red), #ff7961);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.hiw-progress-dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hiw-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #e4e4e8;
  background: #fff;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease;
  padding: 0;
}
.hiw-dot:hover { border-color: rgba(var(--bs-red-rgb), .5); color: var(--bs-red); }
.hiw-dot.is-done { border-color: var(--bs-red); background: var(--bs-red); color: #fff; }
.hiw-dot.is-current {
  border-color: var(--bs-red);
  background: var(--bs-red);
  color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(var(--bs-red-rgb), .14);
}

/* ---------- Step navigation ---------- */
.hiw-nav-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid #e9e9ec;
  background: #fff;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.hiw-nav-btn:hover:not(:disabled) {
  background: var(--bs-red);
  border-color: var(--bs-red);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(var(--bs-red-rgb), .6);
}
.hiw-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.hiw-counter {
  font-size: .8125rem;
  font-weight: 800;
  color: rgba(var(--bs-dark-brand-rgb), .55);
  min-width: 5.5rem;
  text-align: center;
}

.hiw-step-btn {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid #f0f0f2;
  background: #fff;
  transition: all .3s ease;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  overflow: hidden;
}
/* Accent bar that grows down the left edge when a step is active */
.hiw-step-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--bs-red);
  border-radius: 0 999px 999px 0;
  transform: translateY(-50%);
  transition: height .3s ease;
}
.hiw-step-btn:hover { border-color: #e0e0e4; box-shadow: 0 8px 20px -12px rgba(0,0,0,.18); }
.hiw-step-btn.hiw-active {
  background: #fff;
  border-color: rgba(var(--bs-red-rgb), .35);
  box-shadow: 0 20px 40px -14px rgba(var(--bs-red-rgb), .28);
  transform: translateX(.5rem);
}
.hiw-step-btn.hiw-active::before { height: 60%; }
.hiw-icon-wrap {
  padding: .75rem;
  border-radius: .9rem;
  background: var(--bs-grey);
  color: rgba(var(--bs-dark-brand-rgb), .7);
  transition: all .3s ease;
  flex-shrink: 0;
}
.hiw-step-btn:hover .hiw-icon-wrap { background: #ececee; }
.hiw-step-btn.hiw-active .hiw-icon-wrap {
  background: var(--bs-red);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(var(--bs-red-rgb), .55);
}
/* Collapse the body copy on inactive steps so the list stays scannable */
.hiw-step-desc {
  margin: 0;
  font-size: .875rem;
  color: rgba(34,34,34,.7);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
}
.hiw-step-btn.hiw-active .hiw-step-desc {
  max-height: 8rem;
  opacity: 1;
  margin-top: .375rem;
}
@media (max-width: 991.98px) {
  .hiw-step-btn.hiw-active { transform: none; }
}
/* Fade/slide the phone screen between steps */
@keyframes hiwFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.hiw-mockup-anim { animation: hiwFade .35s ease both; }

.phone-mockup {
  width: 100%;
  max-width: 320px;
  background: rgba(var(--bs-dark-brand-rgb), .8);
  padding: .875rem;
  border-radius: 2.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.35);
  border: 4px solid rgba(var(--bs-dark-brand-rgb), .8);
  position: relative;
  z-index: 10;
}
.phone-notch {
  position: absolute; top: .625rem; left: 50%; transform: translateX(-50%);
  width: 7rem; height: 1.25rem; background: var(--bs-dark-brand);
  border-radius: 999px; z-index: 20;
  display: flex; justify-content: center; align-items: center;
}
.phone-screen {
  background: #fff;
  border-radius: 2rem;
  padding: 2rem 1.25rem 1.25rem;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid #f1f1f1;
  overflow: hidden;
  position: relative;
}

/* ---------- User guide callout cards ---------- */
.guide-card {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 1.5rem;
  padding: 2rem;
  position: relative;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.15);
  width: 100%;
  max-width: 420px;
}
.guide-mini-card {
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #f1f1f1;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.guide-floating-pill {
  position: absolute;
  background: var(--bs-accent);
  color: var(--bs-dark-brand);
  font-weight: 800;
  font-size: .6875rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
}

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: #fff;
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid #fafafa;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.08);
  transition: all .3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.testimonial-card:hover { box-shadow: 0 20px 40px -12px rgba(0,0,0,.15); transform: translateY(-.25rem); }
.testimonial-quote-mark {
  position: absolute; top: 1rem; right: 1.5rem;
  font-size: 3.75rem; color: rgba(var(--bs-red-rgb), .05);
  font-family: Georgia, serif; user-select: none;
}

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid #f1f1f1;
  background: rgba(245,245,245,.3);
  border-radius: 1.25rem;
  transition: all .3s ease;
  overflow: hidden;
}
.faq-item:hover { border-color: #e5e7eb; }
.faq-item.faq-open { border-color: var(--bs-red); box-shadow: 0 10px 25px -8px rgba(0,0,0,.08); background: transparent; }
.faq-toggle-btn {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.faq-answer-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer-wrap.faq-answer-open { max-height: 300px; border-top: 1px solid #fafafa; }
.faq-chevron { width: 1.25rem; height: 1.25rem; color: #9ca3af; flex-shrink: 0; transition: transform .3s ease; }
.faq-chevron.faq-chevron-open { transform: rotate(180deg); color: var(--bs-red); }
.faq-question-text { font-size: .9375rem; }
.faq-answer-body { font-size: .875rem; background: rgba(255,255,255,.5); }

/* ---------- FAQ page (sidebar layout) ---------- */
.faq-cat-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: .875rem;
  /* A uniform 1px border keeps every corner rounding evenly; the active
     accent is drawn with ::before so it can't distort the shape. */
  border: 1px solid #ececef;
  background: #fff;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  transition: all .2s ease;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.faq-cat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--bs-red);
  border-radius: 0 999px 999px 0;
  transform: translateY(-50%);
  transition: height .25s ease;
}
.faq-cat-item:hover {
  background: #fafafb;
  color: var(--bs-dark-brand);
  border-color: #dedee3;
  transform: translateX(2px);
}
.faq-cat-item.faq-cat-active {
  background: rgba(var(--bs-red-rgb), .05);
  border-color: rgba(var(--bs-red-rgb), .3);
  color: var(--bs-red);
  box-shadow: 0 6px 16px -10px rgba(var(--bs-red-rgb), .5);
}
.faq-cat-item.faq-cat-active::before { height: 55%; }
.faq-cat-item .faq-cat-label { flex-grow: 1; min-width: 0; }
.faq-cat-item .faq-cat-count {
  font-size: .6875rem;
  font-weight: 800;
  color: rgba(var(--bs-dark-brand-rgb), .4);
  background: var(--bs-grey);
  border-radius: 999px;
  padding: .125rem .5rem;
  flex-shrink: 0;
  transition: all .2s ease;
}
.faq-cat-item.faq-cat-active .faq-cat-count {
  background: rgba(var(--bs-red-rgb), .12);
  color: var(--bs-red);
}
.faq-cat-icon {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
}
.faq-cat-item .faq-cat-icon i { width: .875rem; height: .875rem; }

.faq-page-item {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1rem;
  margin-bottom: .75rem;
  transition: all .2s ease;
}
.faq-page-item:hover { border-color: #dcdce1; box-shadow: 0 6px 18px -12px rgba(0,0,0,.22); }
.faq-page-item.faq-page-open {
  border-color: rgba(var(--bs-red-rgb), .28);
  box-shadow: 0 14px 34px -18px rgba(var(--bs-red-rgb), .45);
}
.faq-page-toggle-btn {
  width: 100%;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 1rem;
}
.faq-page-toggle-btn .faq-q-text {
  font-weight: 800;
  font-size: 1rem;
  color: var(--bs-dark-brand);
  transition: color .2s ease;
}
.faq-page-item.faq-page-open .faq-q-text { color: var(--bs-red); }
.faq-page-chevron-wrap {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #9ca3af;
  background: var(--bs-grey);
  flex-shrink: 0;
  transition: all .25s ease;
}
.faq-page-item.faq-page-open .faq-page-chevron-wrap {
  color: #fff;
  background: var(--bs-red);
  transform: rotate(180deg);
}
.faq-page-answer-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-page-item.faq-page-open .faq-page-answer-wrap { max-height: 500px; }
.faq-page-answer {
  padding: 0 1.25rem 1.25rem;
  margin-top: -.25rem;
  color: rgba(var(--bs-dark-brand-rgb), .72);
  font-size: .9375rem;
  line-height: 1.7;
  max-width: 44rem;
}
/* Thin rule between the question and its answer */
.faq-page-answer::before {
  content: "";
  display: block;
  height: 1px;
  background: #f0f0f2;
  margin-bottom: 1rem;
}

.faq-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fbfbfc;
  border: 1px dashed #dfdfe4;
  border-radius: 1.25rem;
}
.faq-empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.faq-cta-card {
  border-radius: 1.5rem;
  padding: 2rem;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.faq-cta-card.faq-cta-dark { background: var(--bs-dark-brand); }
.faq-cta-card.faq-cta-red { background: var(--bs-red); }
.faq-cta-icon-wrap {
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Modal ---------- */
.modal-cat-btn {
  padding: .75rem;
  border-radius: .9rem;
  text-align: left;
  border: 1px solid #f1f1f1;
  font-weight: 800;
  font-size: .75rem;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  color: var(--bs-dark-brand);
  cursor: pointer;
}
.modal-cat-btn:hover { border-color: #e5e7eb; }
.modal-cat-btn.modal-cat-active {
  border-color: var(--bs-red);
  background: rgba(var(--bs-red-rgb), .05);
  color: var(--bs-red);
  box-shadow: 0 0 0 2px rgba(var(--bs-red-rgb), .05);
}
.form-control-brand {
  background-color: var(--bs-grey);
  border: 1px solid #f1f1f1;
  border-radius: .9rem;
}
.form-control-brand:focus {
  background-color: var(--bs-grey);
  border-color: var(--bs-red);
  box-shadow: none;
}

/* ---------- Browse Services page ---------- */
.browse-sidebar {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.06);
}
.browse-sidebar.position-sticky { top: 6rem; }
.browse-filter-label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(34,34,34,.5);
  margin-bottom: .625rem;
  display: block;
}
.browse-search-input {
  background: var(--bs-grey);
  border: 1px solid #f1f1f1;
  border-radius: .9rem;
  font-size: .8125rem;
}
.browse-search-input:focus { background: var(--bs-grey); border-color: var(--bs-red); box-shadow: none; }
.browse-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(34,34,34,.4);
  pointer-events: none;
}
.browse-search-icon ~ .browse-search-input { padding-left: 2.25rem; }
.browse-check-list {
  max-height: 190px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-right: .25rem;
}
.browse-check-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(34,34,34,.75);
  cursor: pointer;
}
.browse-check-item input[type="checkbox"] {
  accent-color: var(--bs-red);
  width: .95rem; height: .95rem;
  cursor: pointer;
}
.browse-clear-btn {
  color: var(--bs-red);
  font-weight: 700;
  font-size: .8125rem;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  cursor: pointer;
}

.browse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.browse-view-btn {
  width: 2.25rem; height: 2.25rem;
  border-radius: .6rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: rgba(34,34,34,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.browse-view-btn.browse-view-active { background: var(--bs-dark-brand); border-color: var(--bs-dark-brand); color: #fff; }

/* List view (default): each task stacked full-width. */
.browse-task-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.browse-task-col { width: 100%; }
/* Grid view: two-up layout on md+. */
.browse-task-list.browse-grid-view {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .browse-task-list.browse-grid-view { grid-template-columns: 1fr 1fr; }
}
.browse-grid-view .browse-task-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.browse-task-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 15px -6px rgba(0,0,0,.06);
  transition: all .2s ease;
}
.browse-task-card:hover { box-shadow: 0 15px 30px -10px rgba(0,0,0,.12); border-color: #e5e7eb; }
.browse-task-card.browse-grid-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.browse-cat-pill {
  display: inline-block;
  background: var(--bs-grey);
  color: rgba(34,34,34,.65);
  font-weight: 700;
  font-size: .6875rem;
  padding: .25rem .625rem;
  border-radius: .5rem;
}

/* ---------- Task Details page ---------- */
.task-details-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.06);
}
.task-details-pill {
  display: inline-block;
  font-weight: 800;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: .5rem;
}
.task-details-pill.pill-open { background: rgba(16,185,129,.1); color: #059669; }
.task-details-pill.pill-cat { background: var(--bs-grey); color: rgba(34,34,34,.65); }

.task-meta-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}
.task-meta-icon {
  width: 2rem; height: 2rem;
  border-radius: .6rem;
  background: var(--bs-grey);
  color: var(--bs-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.task-meta-label {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(34,34,34,.45);
  display: block;
}
.task-meta-value {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--bs-dark-brand);
}

.task-qa-item {
  background: var(--bs-grey);
  border: 1px solid #f1f1f1;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}
.task-qa-question {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(34,34,34,.55);
  margin-bottom: .25rem;
}
.task-qa-answer {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
}

.task-poster-avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--bs-dark-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.125rem;
}

.task-bid-cta {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.06);
}

/* ---------- Icon size utilities ---------- */
/* Fixed square sizing for inline data-lucide icons. */
.icon-xs { width: .75rem; height: .75rem; }
.icon-xs-alt { width: .8125rem; height: .8125rem; }
.icon-xs-plus { width: .875rem; height: .875rem; }
.icon-sm-alt { width: .9375rem; height: .9375rem; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.125rem; height: 1.125rem; }
.icon-md-alt { width: 1.25rem; height: 1.25rem; }
.icon-lg-alt { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
.icon-lg { width: 2.5rem; height: 2.5rem; }
.icon-muted { color: rgba(var(--bs-dark-brand-rgb), .3); }

/* ---------- Text size utilities ---------- */
/* Sub-Bootstrap-scale font sizes used across task/category card text. */
.text-2xs { font-size: .6875rem; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .8125rem; }
.text-base { font-size: .875rem; }
.text-md { font-size: .9375rem; }

/* ---------- Footer ---------- */
#footer { background-color: var(--bs-dark-brand); color: #d1d5db; }
.footer-link-muted { color: #d1d5db; text-decoration: none; transition: color .2s ease; }
.footer-link-muted:hover { color: var(--bs-red); }

/* ---------- Misc animations reused from Tailwind ---------- */
@keyframes brand-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-pulse-brand { animation: brand-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes brand-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping-brand { animation: brand-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

@keyframes brand-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.animate-bounce-brand { animation: brand-bounce 1s infinite; }

/* ==========================================================================
   CATEGORY LANDING PAGE (category.html)
   ========================================================================== */

/* ---------- Hero ---------- */
/* Light hero, identical treatment to #hero and #hiw-hero on the other
   pages — the page-level layout classes come from #hiw-hero itself. */
.cat-hero { padding-bottom: 3rem; }

/* Live-task count chip — accent yellow, same recipe as the hero badge
   on index.html. */
.cat-live-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(var(--bs-accent-rgb), .2);
  border: 1px solid rgba(var(--bs-accent-rgb), .4);
  color: var(--bs-dark-brand);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .375rem .875rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Blinking "live" dot — solid red core with a pinging ring behind it. */
.cat-live-dot {
  position: relative;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
}
.cat-live-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bs-red);
  animation: cat-live-blink 1.4s ease-in-out infinite;
}
.cat-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bs-red);
  animation: cat-live-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes cat-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes cat-live-ping {
  0% { transform: scale(1); opacity: .6; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-live-dot::before,
  .cat-live-dot::after { animation: none; }
  .cat-live-dot::after { display: none; }
}
.cat-hero-title {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--bs-dark-brand);
  margin-bottom: 1.25rem;
}
.cat-hero-accent { color: var(--bs-red); }
/* Lead-in line above the headline. */
.cat-hero-sub {
  display: inline-block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--bs-red);
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.cat-hero-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}
/* Reassurance microcopy under the CTAs. */
.cat-hero-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .55);
}
.cat-hero-note i { color: #10b981; flex-shrink: 0; }

/* ---------- Hero "what you get" panel ---------- */
.cat-hero-panel {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1.25rem;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 20px 45px -28px rgba(0,0,0,.28);
}
.cat-hero-panel-label {
  display: block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  padding-bottom: .875rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #f1f1f1;
}
.cat-hero-bullets { list-style: none; margin: 0; padding: 0; }
.cat-hero-bullet {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-dark-brand);
  border-bottom: 1px solid #f4f4f5;
}
.cat-hero-bullet:last-child { border-bottom: none; }
/* Filled red check chip. */
.cat-hero-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--bs-red);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 8px -2px rgba(var(--bs-red-rgb), .5);
}

/* ---------- Hero banner (contained) ---------- */
.cat-hero-banner {
  position: relative;
  margin: 0 0 2rem;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid #ececef;
  box-shadow: 0 24px 55px -28px rgba(0,0,0,.4);
  /* Soft brand wash fills any letterbox area beside the full image. */
  background:
    linear-gradient(135deg, rgba(var(--bs-red-rgb), .12), rgba(var(--bs-accent-rgb), .12)),
    var(--bs-grey);
}
/* Broken-image icon is ugly; hide the img's own alt/border chrome and let
   the branded gradient show through instead. */
.cat-hero-banner img {
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: contain;
  display: block;
  color: transparent;
}
@media (max-width: 991.98px) {
  .cat-hero-banner img { max-height: 22rem; }
}
.cat-hero-banner-placeholder {
  width: 100%;
  height: 16rem;
  color: rgba(var(--bs-red-rgb), .35);
}
@media (max-width: 991.98px) {
  .cat-hero-banner-placeholder { height: 12rem; }
}

/* ---------- Stats bar ---------- */
/* Brand-red band rather than a second slab of dark — gives the page the
   same red/dark/white rhythm the rest of the site uses. */
.cat-stats-bar { background: var(--bs-red); padding: 1.75rem 0; }
.cat-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  text-align: center;
}
@media (max-width: 575.98px) {
  .cat-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
.cat-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  position: relative;
}
/* Vertical dividers between stats (desktop only). */
.cat-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -.5rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255,255,255,.22);
}
@media (max-width: 575.98px) { .cat-stat:not(:last-child)::after { display: none; } }
.cat-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  margin-bottom: .25rem;
}
.cat-stat-value { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; }
.cat-stat-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

/* ---------- How it works ---------- */
.cat-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 767.98px) { .cat-steps { grid-template-columns: 1fr; } }
.cat-step-col { position: relative; display: flex; align-items: stretch; }
.cat-step {
  position: relative;
  flex: 1;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1.25rem;
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center;
  transition: all .25s ease;
  overflow: hidden;
}
.cat-step:hover {
  border-color: rgba(var(--bs-red-rgb), .3);
  box-shadow: 0 14px 30px -18px rgba(var(--bs-red-rgb), .5);
  transform: translateY(-3px);
}
/* Big ghost number watermark in the corner. */
.cat-step-num {
  position: absolute;
  top: .5rem; right: 1rem;
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(var(--bs-red-rgb), .08);
  pointer-events: none;
}
/* Icon badge replaces the old small number circle. */
.cat-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 1rem;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  margin-bottom: 1rem;
  transition: all .25s ease;
}
.cat-step:hover .cat-step-icon {
  background: var(--bs-red);
  color: #fff;
  transform: scale(1.06);
}
.cat-step-title { font-size: .9375rem; font-weight: 900; color: var(--bs-dark-brand); margin-bottom: .5rem; }
.cat-step-desc { font-size: .8125rem; font-weight: 500; color: rgba(var(--bs-dark-brand-rgb), .65); margin: 0; line-height: 1.6; }
.cat-step-arrow {
  color: rgba(var(--bs-red-rgb), .55);
  align-self: center;
  margin: 0 -.25rem 0 .5rem;
  flex-shrink: 0;
}
@media (max-width: 767.98px) { .cat-step-arrow { display: none; } }

/* ---------- Specialisations ---------- */
.cat-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.cat-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.125rem;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: .875rem;
  text-decoration: none;
  color: var(--bs-dark-brand);
  transition: all .2s ease;
}
.cat-spec:hover {
  border-color: rgba(var(--bs-red-rgb), .35);
  color: var(--bs-red);
  transform: translateX(3px);
  box-shadow: 0 8px 20px -14px rgba(var(--bs-red-rgb), .55);
}
.cat-spec-body { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.cat-spec-name { font-size: .875rem; font-weight: 800; }
.cat-spec-count { font-size: .6875rem; font-weight: 700; color: rgba(var(--bs-dark-brand-rgb), .45); }

/* ---------- Who we help ---------- */
.cat-aud {
  height: 100%;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1rem;
  padding: 1.375rem 1.125rem;
  text-align: center;
  transition: all .25s ease;
}
.cat-aud:hover {
  border-color: rgba(var(--bs-red-rgb), .3);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.28);
}
.cat-aud-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: .875rem;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  margin-bottom: .875rem;
}
.cat-aud-title { font-size: .8125rem; font-weight: 900; color: var(--bs-dark-brand); margin-bottom: .375rem; line-height: 1.35; }
.cat-aud-desc { font-size: .6875rem; font-weight: 500; color: rgba(var(--bs-dark-brand-rgb), .6); margin: 0; line-height: 1.55; }

/* ---------- Live task cards ---------- */
.cat-task {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1rem;
  padding: 1.125rem;
  transition: all .25s ease;
}
.cat-task:hover {
  border-color: rgba(var(--bs-red-rgb), .3);
  box-shadow: 0 16px 34px -20px rgba(var(--bs-red-rgb), .45);
  transform: translateY(-3px);
}
.cat-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .625rem; }
.cat-task-tag {
  font-size: .5625rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-red);
  background: rgba(var(--bs-red-rgb), .07);
  padding: .25rem .5rem;
  border-radius: 999px;
  line-height: 1.3;
}
.cat-task-budget { font-size: .875rem; font-weight: 900; color: var(--bs-dark-brand); white-space: nowrap; }
.cat-task-title {
  display: block;
  font-size: .9375rem;
  font-weight: 900;
  color: var(--bs-dark-brand);
  text-decoration: none;
  margin-bottom: .375rem;
  line-height: 1.35;
  transition: color .2s ease;
}
.cat-task-title:hover { color: var(--bs-red); }
.cat-task-desc {
  font-size: .75rem;
  font-weight: 500;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  line-height: 1.6;
  margin-bottom: .875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid #f2f2f4;
  margin-bottom: .875rem;
}
.cat-task-meta span {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .6875rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .55);
}
.cat-task-meta i { color: var(--bs-red); flex-shrink: 0; }
.cat-task-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cat-task-poster {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  min-width: 0;
}
.cat-task-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--bs-dark-brand);
  color: #fff;
  font-size: .625rem;
  font-weight: 900;
  flex-shrink: 0;
}
.cat-task-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  background: var(--bs-red);
  color: #fff;
  font-size: .6875rem;
  font-weight: 900;
  padding: .4375rem .875rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s ease;
}
.cat-task-btn:hover {
  background: var(--bs-dark-brand);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.45);
}

.cat-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fbfbfc;
  border: 1px dashed #dfdfe4;
  border-radius: 1.25rem;
}
.cat-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  margin-bottom: .875rem;
}

/* ---------- Trust ---------- */
.cat-assure-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.cat-assure {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .78);
}
.cat-assure i { color: var(--bs-red); margin-top: .1875rem; }
.cat-trust-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1rem;
  padding: 1.375rem;
  transition: all .25s ease;
}
.cat-trust-card:hover { border-color: rgba(var(--bs-red-rgb), .28); box-shadow: 0 14px 30px -20px rgba(0,0,0,.3); }
.cat-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem; height: 2.375rem;
  border-radius: .75rem;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  margin-bottom: .75rem;
}
.cat-trust-title { font-size: .875rem; font-weight: 900; color: var(--bs-dark-brand); margin-bottom: .3125rem; }
.cat-trust-desc { font-size: .75rem; font-weight: 500; color: rgba(var(--bs-dark-brand-rgb), .6); margin: 0; line-height: 1.6; }

/* ---------- Related pills ---------- */
.cat-related-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; }
.cat-related-pill {
  display: inline-flex;
  align-items: center;
  padding: .5625rem 1.125rem;
  border-radius: 999px;
  border: 1px solid #ececef;
  background: #fff;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  font-size: .8125rem;
  font-weight: 800;
  text-decoration: none;
  transition: all .2s ease;
}
.cat-related-pill:hover {
  color: #fff;
  background: var(--bs-red);
  border-color: var(--bs-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(var(--bs-red-rgb), .8);
}

/* ---------- Final CTA ---------- */
/* Brand-red CTA, matching the final CTA band on every other page. */
.cat-cta {
  position: relative;
  background: var(--bs-red);
  color: #fff;
  padding: 4.5rem 0;
  overflow: hidden;
}
.cat-cta::before {
  content: "";
  position: absolute;
  top: -3rem; left: -3rem;
  width: 16rem; height: 16rem;
  border-radius: 50%;
  background: rgba(var(--bs-accent-rgb), .15);
  filter: blur(40px);
  pointer-events: none;
}
.cat-cta::after {
  content: "";
  position: absolute;
  bottom: -3rem; right: -3rem;
  width: 20rem; height: 20rem;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  filter: blur(60px);
  pointer-events: none;
}

/* ---------- Scroll reveal (category page) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1),
              transform .6s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Breadcrumb (category/subcategory pages) ---------- */
.cat-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 700;
}
.cat-crumbs a {
  color: rgba(var(--bs-dark-brand-rgb), .55);
  text-decoration: none;
  transition: color .2s ease;
}
.cat-crumbs a:hover { color: var(--bs-red); }
.cat-crumb-sep { color: rgba(var(--bs-dark-brand-rgb), .3); }
.cat-crumb-current { color: var(--bs-red); }

/* ==========================================================================
   LEGAL / POLICY PAGES (privacy.html, terms, etc.)
   ========================================================================== */
.legal-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 2.5rem;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(229,57,53,.04), transparent 70%);
}

/* Sticky table of contents. */
.legal-toc {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding-left: 1rem;
  border-left: 2px solid #f0f0f2;
}
@media (max-width: 991.98px) {
  .legal-toc { position: static; border-left: none; padding-left: 0; margin-bottom: 1.5rem; }
}
.legal-toc-label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  margin-bottom: .625rem;
}
.legal-toc-link {
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .65);
  text-decoration: none;
  padding: .3125rem 0;
  transition: color .2s ease;
}
.legal-toc-link:hover { color: var(--bs-red); }

/* Document body. */
.legal-doc { max-width: 46rem; }
.legal-note {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1rem;
  margin-bottom: 2rem;
  background: rgba(var(--bs-accent-rgb), .12);
  border: 1px solid rgba(var(--bs-accent-rgb), .35);
  border-radius: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .8);
}
.legal-note i { color: #b7791f; margin-top: .0625rem; }

.legal-section { scroll-margin-top: 6.5rem; margin-bottom: 2.25rem; }
.legal-h2 {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--bs-dark-brand);
  margin-bottom: .75rem;
}
.legal-p {
  font-size: .9375rem;
  line-height: 1.75;
  color: rgba(var(--bs-dark-brand-rgb), .72);
  margin-bottom: 1rem;
}
.legal-p:last-child { margin-bottom: 0; }
.legal-list {
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.legal-list li {
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(var(--bs-dark-brand-rgb), .72);
}
.legal-list li::marker { color: var(--bs-red); }
.legal-doc strong { color: var(--bs-dark-brand); font-weight: 700; }
.legal-link { color: var(--bs-red); font-weight: 700; text-decoration: none; }
.legal-link:hover { text-decoration: underline; }

/* ==========================================================================
   ALL CATEGORIES PAGE (categories.html)
   ========================================================================== */

/* Category card. */
.cats-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1.25rem;
  overflow: hidden;
  text-decoration: none;
  transition: all .25s ease;
}
.cats-card:hover {
  border-color: rgba(var(--bs-red-rgb), .3);
  box-shadow: 0 20px 44px -24px rgba(var(--bs-red-rgb), .35);
  transform: translateY(-4px);
}

/* Image header with overlapping icon + floating task-count pill. */
.cats-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bs-grey);
  overflow: hidden;
}
.cats-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;
  transition: transform .5s ease;
}
.cats-media-placeholder {
  width: 100%;
  height: 100%;
  color: rgba(var(--bs-red-rgb), .35);
}
.cats-card:hover .cats-media img { transform: scale(1.05); }
.cats-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
  pointer-events: none;
}
.cats-count {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 1;
  font-size: .6875rem;
  font-weight: 800;
  color: var(--bs-dark-brand);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .3125rem .75rem;
  white-space: nowrap;
}
.cats-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}
.cats-title {
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--bs-dark-brand);
  margin-bottom: 1rem;
  flex-grow: 1;
}

/* Card footer link (a span inside the card link). */
.cats-card-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #f2f2f4;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--bs-red);
  text-decoration: none;
}


/* ---------- Empty state ---------- */
.cats-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: #fbfbfc;
  border: 1px dashed #dfdfe4;
  border-radius: 1.25rem;
}
.cats-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  margin-bottom: 1rem;
}
.cats-card-link i { transition: transform .2s ease; }
.cats-card-link:hover i { transform: translateX(4px); }
/* =========================================================\n   MERGED: custom.css + post-task.css + remaining page inline styles\n   ========================================================= */
/* ==========================================================================
   POST A TASK — 3-step flow (post-task*.html)
   ========================================================================== */
/* The site header is position:fixed and transparent, so push the page
   content down to clear it (matches the hero top-padding on other pages). */
/* Stop any body-attached element (e.g. the select2 dropdown) from forcing a
   horizontal scrollbar on this page. Scoped to the post-task body. */
.pt-body { overflow-x: hidden; }
.pt-page {
  background: #f4f5f6;
  padding-top: 7rem;
  padding-bottom: 2rem;
}
@media (max-width: 575.98px) { .pt-page { padding-top: 6rem; } }

/* Constrain the form flow to a comfortable centered width. */
.pt-container {
  max-width: 56rem;
  margin-inline: auto;
}

/* Top row */
.pt-region {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: 999px;
  padding: .4375rem 1rem;
}
.pt-region i { color: var(--bs-red); }

/* ---------- Stepper ---------- */
.pt-stepper-wrap {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
}
@media (max-width: 575.98px) { .pt-stepper-wrap { padding: 1rem 1.125rem; } }
.pt-stepper {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.pt-step {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
  min-width: 0;
}
.pt-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 800;
  background: #e9ebee;
  color: rgba(var(--bs-dark-brand-rgb), .5);
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: all .25s ease;
}
.pt-step-label {
  font-size: .875rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .55);
  white-space: nowrap;
}
.pt-step.is-current .pt-step-num { background: var(--bs-dark-brand); color: #fff; }
.pt-step.is-current .pt-step-label { color: var(--bs-dark-brand); }
.pt-step.is-done .pt-step-num { background: #10b981; color: #fff; }
.pt-step.is-done .pt-step-label { color: var(--bs-dark-brand); }
.pt-step-line {
  flex: 1;
  height: 2px;
  background: #e3e5e8;
  border-radius: 999px;
  min-width: 1.5rem;
}
.pt-step-line.is-done { background: #10b981; }

/* Tablet: tighten spacing so all three labels still fit. */
@media (max-width: 767.98px) {
  .pt-step-label { font-size: .8125rem; }
  .pt-step { gap: .5rem; }
  .pt-step-line { min-width: 1rem; }
}
/* Phone: numbered circles + connecting lines only — no labels. */
@media (max-width: 575.98px) {
  .pt-step-label { display: none; }
  .pt-step-line { flex: 1; min-width: 1rem; }
  .pt-step-num { width: 1.75rem; height: 1.75rem; }
}

/* ---------- Form card ---------- */
.pt-card {
  position: relative;   /* anchor for the select2 dropdownParent */
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 20px 50px -35px rgba(0,0,0,.18);
}
@media (max-width: 575.98px) { .pt-card { padding: 1.5rem 1.25rem; } }
.pt-card-head { margin-bottom: 1.5rem; }
.pt-card-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--bs-dark-brand);
  margin: 0 0 .375rem;
}
.pt-card-sub {
  font-size: .9375rem;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  margin: 0;
}

/* Consistent vertical rhythm between every field. */
.pt-form { display: flex; flex-direction: column; gap: 1.25rem; }
.pt-field { margin: 0; }
/* Two fields side by side (category / sub-category) with the same gap. */
.pt-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 575.98px) { .pt-grid-2 { grid-template-columns: 1fr; gap: 1.25rem; } }
.pt-label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .8);
  margin-bottom: .4375rem;
}
.pt-req { color: var(--bs-red); }
.pt-optional { color: rgba(var(--bs-dark-brand-rgb), .4); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Inputs / textarea */
.pt-input {
  width: 100%;
  padding: .75rem 1rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bs-dark-brand);
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .625rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pt-input::placeholder { color: #9ca3af; font-weight: 400; }
.pt-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--bs-red);
  box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1);
}
textarea.pt-input { resize: vertical; min-height: 7rem; }
.pt-hint {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: rgba(var(--bs-dark-brand-rgb), .5);
  margin: .5rem 0 0;
}
.pt-hint i { color: rgba(var(--bs-dark-brand-rgb), .4); flex-shrink: 0; }

/* Input with a leading icon (e.g. location search). */
.pt-input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 1;
}
.pt-input-icon svg { display: block; }
.pt-input-has-icon { padding-left: 2.75rem; }

/* Budget with $ sign */
.pt-budget { position: relative; display: flex; align-items: center; }
.pt-budget-sign {
  position: absolute;
  left: 0;
  width: 2.75rem;
  text-align: center;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  border-right: 1px solid #e2e4e8;
  pointer-events: none;
}
.pt-budget .pt-input { padding-left: 3.5rem; padding-right: 4rem; }
.pt-budget-cur {
  position: absolute;
  right: 1rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(var(--bs-dark-brand-rgb), .4);
  pointer-events: none;
}

/* Timeline chips */
.pt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.pt-chip {
  padding: .625rem 1.125rem;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  background: #fff;
  border: 1px solid #e0e0e5;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.pt-chip:hover { border-color: #cfcfd6; }
.pt-chip.is-active {
  color: var(--bs-red);
  background: rgba(var(--bs-red-rgb), .06);
  border-color: rgba(var(--bs-red-rgb), .4);
}
/* Inline custom-date input sits in the chips row (as in the reference). */
.pt-date { width: auto; min-width: 10rem; padding: .5rem .75rem; }
@media (max-width: 479.98px) { .pt-date { width: 100%; } }

/* File input */
.pt-file {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .375rem .375rem .375rem 0;
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .625rem;
  cursor: pointer;
  overflow: hidden;
}
.pt-file-btn {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  background: var(--bs-dark-brand);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  padding: .6875rem 1rem;
  border-radius: .625rem;
  flex-shrink: 0;
  margin-left: .5rem;
}
.pt-file-name { font-size: .875rem; color: rgba(var(--bs-dark-brand-rgb), .55); }

/* Map */
.pt-map {
  height: 15rem;
  border-radius: .625rem;
  border: 1px solid #e2e4e8;
  overflow: hidden;
  z-index: 0;
}

/* Location autocomplete */
.pt-loc-wrap { position: relative; }
.pt-loc-suggest {
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .75rem;
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.28);
  overflow: hidden;
  max-height: 16rem;
  overflow-y: auto;
}
.pt-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .625rem .875rem;
  font-size: .8125rem;
  color: rgba(var(--bs-dark-brand-rgb), .78);
  background: none;
  border: none;
  border-bottom: 1px solid #f2f2f4;
  cursor: pointer;
}
.pt-suggest-item:last-child { border-bottom: none; }
.pt-suggest-item:hover { background: #fafafb; color: var(--bs-red); }

/* Actions */
.pt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: .5rem;
  border-top: 1px solid #f1f1f3;
}
.pt-btn-ghost {
  padding: .8125rem 1.5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
  background: #fff;
  border: 1px solid #e0e0e5;
  border-radius: .75rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: all .2s ease;
}
.pt-btn-ghost:hover { border-color: #cfcfd6; color: var(--bs-dark-brand); }
.pt-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.75rem;
  font-size: .875rem;
  font-weight: 800;
  color: #fff;
  background: var(--bs-dark-brand);
  border: none;
  border-radius: .75rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
}
/* Stack the action buttons full-width on small screens. */
@media (max-width: 479.98px) {
  .pt-actions { flex-direction: column-reverse; align-items: stretch; }
  .pt-btn-ghost, .pt-btn-primary { width: 100%; }
}
.pt-btn-primary:hover { background: #000; color: #fff; }
.pt-btn-primary i { transition: transform .2s ease; }
.pt-btn-primary:hover i { transform: translateX(3px); }
.pt-btn-primary:disabled,
.pt-btn-ghost:disabled { opacity: .6; cursor: not-allowed; }
/* Left cluster of the action row (Cancel + Save draft). */
.pt-actions-left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 479.98px) {
  .pt-actions-left { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------- Validation states ---------- */
.pt-error {
  margin: .5rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--bs-red);
  display: flex;
  align-items: center;
  gap: .375rem;
}
.pt-input.input-error,
.pt-input.ac-unconfirmed { border-color: var(--bs-red); }
.pt-input.input-error:focus,
.pt-input.ac-unconfirmed:focus { box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1); }
/* select2 mirrors the .pt-input error border. */
.input-error + .select2-container--default .select2-selection--single { border-color: var(--bs-red); }
/* Session-level flash message above the card. */
.pt-alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1.125rem;
  margin-bottom: 1.25rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.pt-alert-error { background: rgba(var(--bs-red-rgb), .06); border-color: rgba(var(--bs-red-rgb), .25); color: var(--bs-red); }
.pt-alert-info { background: rgba(var(--bs-dark-brand-rgb), .04); border-color: rgba(var(--bs-dark-brand-rgb), .12); color: var(--bs-dark-brand); }
.pt-alert i { flex-shrink: 0; margin-top: .0625rem; }

/* ---------- Location field: spinner, clear button, map loading ---------- */
.pt-loc-spinner,
.pt-loc-clear {
  position: absolute;
  right: .875rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.pt-loc-spinner.is-visible,
.pt-loc-clear.is-visible { display: block; }
.pt-loc-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid #e2e4e8;
  border-top-color: var(--bs-red);
  border-radius: 50%;
  animation: ptSpin .6s linear infinite;
}
@keyframes ptSpin { to { transform: translateY(-50%) rotate(360deg); } }
.pt-loc-clear {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  color: rgba(var(--bs-dark-brand-rgb), .4);
  transition: color .2s ease;
}
.pt-loc-clear:hover { color: var(--bs-red); }
/* Suggestion rows are buttons — keep the pin aligned with the label. */
.pt-suggest-item { display: flex; align-items: center; gap: .5rem; }
.pt-suggest-item i { color: var(--bs-red); flex-shrink: 0; }
.pt-map { position: relative; }
.pt-map-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 500;
  background: rgba(255,255,255,.85);
  border-radius: .75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .6);
}
.pt-map-loading.is-visible { display: flex; }
.pt-map-loading-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid #e2e4e8;
  border-top-color: var(--bs-red);
  border-radius: 50%;
  animation: ptMapSpin .7s linear infinite;
}
@keyframes ptMapSpin { to { transform: rotate(360deg); } }

/* ---------- Already-uploaded supporting documents (edit mode) ---------- */
.pt-doc-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.pt-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .75rem;
  background: #fafafb;
  border: 1px solid #e2e4e8;
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 600;
}
.pt-doc-chip i { color: rgba(var(--bs-dark-brand-rgb), .45); flex-shrink: 0; }
.pt-doc-name { color: var(--bs-dark-brand); text-decoration: none; }
.pt-doc-name:hover { color: var(--bs-red); text-decoration: underline; }
.pt-doc-remove {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  color: rgba(var(--bs-dark-brand-rgb), .35);
  display: inline-flex;
  transition: color .2s ease;
}
.pt-doc-remove:hover { color: var(--bs-red); }

/* ---------- select2 overrides — match .pt-input exactly ---------- */
.select2-container { width: 100% !important; }
/* .pt-input is: padding .75rem 1rem; font-size .9375rem; line-height ~1.4.
   Fixed height keeps the dropdown the same size as the text inputs. */
.select2-container--default .select2-selection--single {
  height: 2.875rem;               /* = .pt-input height (.75*2 + 1.375 text) */
  padding: 0 1rem;
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .625rem;
  display: flex;
  align-items: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  padding: 0;
  padding-right: 1.25rem;
  color: var(--bs-dark-brand);
  font-size: .9375rem;
  font-weight: 500;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: .75rem;
  width: 1rem;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--bs-red);
  box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1);
}
/* Dropdown panel */
/* Keep the fixed site header solid and above the select2 dropdown, so a
   dropdown opening near the top tucks cleanly under the header instead of
   showing through the (otherwise transparent) nav. */
.pt-body #header-nav {
  z-index: 4000;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.select2-container--open { z-index: 3000; }

.select2-dropdown {
  border: 1px solid #e2e4e8;
  border-radius: .625rem;
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.28);
  overflow: hidden;
  margin-top: .25rem;
  /* Never let the dropdown be wider than its trigger (prevents the panel
     spilling past the viewport and creating a horizontal scrollbar). */
  max-width: 100%;
  box-sizing: border-box;
}
/* Search box inside the dropdown — style it to match the inputs instead of
   the raw default black border. */
.select2-container--default .select2-search--dropdown { padding: .625rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: .5rem .75rem;
  font-size: .875rem;
  border: 1px solid #e2e4e8;
  border-radius: .5rem;
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bs-red);
  box-shadow: 0 0 0 3px rgba(var(--bs-red-rgb), .12);
}
.select2-results__options { overflow-x: hidden; }
.select2-container--default .select2-results__option {
  font-size: .875rem;
  padding: .625rem .875rem;
  color: rgba(var(--bs-dark-brand-rgb), .8);
  white-space: normal;
  word-break: break-word;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(var(--bs-red-rgb), .04);
  color: var(--bs-red);
  font-weight: 700;
}
/* Disabled sub-category select */
.select2-container--disabled .select2-selection--single,
.select2-container--default .select2-selection--single[aria-disabled="true"] {
  background: #f5f6f7;
  opacity: 1;
  cursor: not-allowed;
}

/* ==========================================================================
   STEP 2 — Category questions accordion
   ========================================================================== */
.ptq-list { display: flex; flex-direction: column; gap: .75rem; }
.ptq-item {
  border: 1px solid #e6e7ea;
  border-radius: .75rem;
  background: #fafbfc;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ptq-item:hover { border-color: #d9dade; }
.ptq-item.is-open {
  background: #fff;
  border-color: rgba(var(--bs-red-rgb), .35);
  box-shadow: 0 12px 30px -18px rgba(var(--bs-red-rgb), .4);
}
.ptq-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.ptq-q {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bs-dark-brand);
}
.ptq-item.is-open .ptq-q { color: var(--bs-red); font-weight: 700; }
.ptq-chev { color: #9ca3af; flex-shrink: 0; transition: transform .25s ease, color .2s ease; }
.ptq-item.is-open .ptq-chev { transform: rotate(180deg); color: var(--bs-red); }

/* Collapsible body */
.ptq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.ptq-item.is-open .ptq-body { max-height: 20rem; }
.ptq-body > * { margin: 0 1.25rem 1.25rem; }

/* Answer input */
.ptq-input {
  width: calc(100% - 2.5rem);
  padding: .75rem 1rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bs-dark-brand);
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .625rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ptq-input::placeholder { color: #9ca3af; font-weight: 400; }
.ptq-input:focus {
  outline: none;
  border-color: var(--bs-red);
  box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1);
}

/* Answer chips (multi-select) */
.ptq-chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.ptq-chip {
  padding: .5rem 1.125rem;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  background: #fff;
  border: 1px solid #e0e0e5;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.ptq-chip:hover { border-color: #cfcfd6; }
.ptq-chip.is-active {
  color: #fff;
  background: var(--bs-red);
  border-color: var(--bs-red);
}

/* ==========================================================================
   STEP 3 — Review & post
   ========================================================================== */
.ptr-task-title {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--bs-dark-brand);
  margin: 0 0 .875rem;
}
.ptr-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.ptr-tag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  background: #f5f6f7;
  border: 1px solid #e9eaec;
  border-radius: 999px;
}
.ptr-tag i { color: var(--bs-red); flex-shrink: 0; }

/* Review blocks */
.ptr-block { margin-bottom: 1.75rem; }
.ptr-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .875rem;
}
.ptr-block-title {
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--bs-dark-brand);
  margin: 0;
}
.ptr-edit {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--bs-red);
  text-decoration: none;
}
.ptr-edit:hover { text-decoration: underline; }

/* Key/value table */
.ptr-table {
  border: 1px solid #ececef;
  border-radius: .75rem;
  overflow: hidden;
}
.ptr-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid #f2f2f4;
}
.ptr-row:last-child { border-bottom: none; }
.ptr-key {
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .55);
}
.ptr-val {
  font-size: .875rem;
  font-weight: 500;
  color: var(--bs-dark-brand);
  line-height: 1.6;
}
@media (max-width: 575.98px) {
  .ptr-row { grid-template-columns: 1fr; gap: .25rem; }
}

/* Confirm row */
.ptr-confirm {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: .5rem 0 1.5rem;
  font-size: .875rem;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  cursor: pointer;
}
.ptr-confirm input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .125rem;
  accent-color: var(--bs-red);
  flex-shrink: 0;
  cursor: pointer;
}
.ptr-link { color: var(--bs-red); font-weight: 700; text-decoration: none; }
.ptr-link:hover { text-decoration: underline; }

/* Disabled Post button until confirmed */
/* Dimmed until the confirm box is ticked. Clicks still land so validation can
   report *why* the task can't be posted — never pointer-events:none on a real
   submit button, or the click is swallowed with no feedback. */
.pt-btn-primary.is-disabled { opacity: .45; }

/* ---------- Edit task: fields locked after posting ---------- */
.pt-locked {
  background: #fafafb;
  border: 1px solid #ececef;
  border-radius: .75rem;
  padding: 1rem 1.125rem;
}
.pt-locked-head {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(var(--bs-dark-brand-rgb), .4);
  margin-bottom: .75rem;
}
.pt-locked-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 575.98px) {
  .pt-locked-grid { grid-template-columns: 1fr; gap: .75rem; }
}
.pt-locked-item { display: flex; flex-direction: column; gap: .1875rem; min-width: 0; }
.pt-locked-k {
  font-size: .6875rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .45);
}
.pt-locked-v {
  font-size: .875rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Step 3: supporting document links ---------- */
.ptr-docs { display: flex; flex-direction: column; gap: .375rem; }
.ptr-doc {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--bs-dark-brand);
  text-decoration: none;
  font-weight: 600;
}
.ptr-doc:hover { color: var(--bs-red); text-decoration: underline; }
.ptr-doc i { color: rgba(var(--bs-dark-brand-rgb), .45); flex-shrink: 0; }

/* ---------- Step 3: submit-or-draft choice modal ---------- */
.ptr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: ptrFadeIn .2s ease;
}
@keyframes ptrFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ptr-modal {
  width: 100%;
  max-width: 28rem;
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  animation: ptrSlideIn .25s ease;
}
@keyframes ptrSlideIn {
  from { opacity: 0; transform: translateY(1rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ptr-modal-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ptr-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bs-dark-brand);
  margin: 0 0 .5rem;
}
.ptr-modal-body {
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(var(--bs-dark-brand-rgb), .65);
  margin: 0 0 1.5rem;
}
.ptr-modal-foot { display: flex; justify-content: center; gap: .75rem; }
@media (max-width: 575.98px) {
  .ptr-modal-foot { flex-direction: column-reverse; }
  .ptr-modal-foot .pt-btn-ghost,
  .ptr-modal-foot .pt-btn-primary { width: 100%; }
}

.ptr-modal-lg {
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
}
.ptr-modal-lg .ptr-modal-summary { text-align: left; }
.ptr-modal-summary { margin-bottom: 1.5rem; }
.ptr-modal-summary-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bs-dark-brand);
  margin: 0 0 .75rem;
}
.ptr-modal-lg .ptr-row { grid-template-columns: 7rem 1fr; }
@media (max-width: 575.98px) {
  .ptr-modal-lg .ptr-row { grid-template-columns: 1fr; gap: .25rem; }
}


/* Inline style attributes moved from index.html */
.index-s199 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.index-s200 { width:.875rem;height:.875rem; }
.index-s201 { width:1rem;height:1rem; }
.index-s202 { font-size:.875rem; }
.index-s203 { width:1.5rem;height:1.5rem; }
.index-s204 { max-width:28rem; }
.index-s205 { width:1.125rem;height:1.125rem; }
.index-s206 { background-color:rgba(255,213,79,.2); color:#222; padding:.375rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid rgba(255,213,79,.4); }
.index-s207 { width:.875rem;height:.875rem;color:#E53935; }
.index-s208 { letter-spacing:-.02em; }
.index-s209 { max-width:36rem; }
.index-s210 { width:1.25rem;height:1.25rem;color:#9ca3af;margin-left:.75rem; }
.index-s211 { font-size:.75rem; }
.index-s212 { width:1.25rem;height:1.25rem; }
.index-s213 { font-size:.625rem; }
.index-s214 { width:1.25rem;height:1.25rem;fill:#facc15; }
.index-s215 { max-width:420px; }
.index-s216 { width:.75rem;height:.75rem; }
.index-s217 { font-size:.6875rem; letter-spacing:.08em; }
.index-s218 { min-height:300px; display:flex; flex-direction:column; justify-content:space-between; }
.index-s219 { font-size:.6875rem; }
.index-s220 { width:.375rem;height:.375rem; }
.index-s221 { min-height:140px; display:flex; flex-direction:column; justify-content:center; }
.index-s222 { width:1rem;height:1rem;color:#E53935; }
.index-s223 { top:-1.5rem; left:-1.5rem; max-width:170px; }
.index-s224 { font-size:.5625rem; }
.index-s225 { bottom:-1rem; right:-1rem; max-width:200px; }
.index-s226 { width:2rem;height:2rem;font-size:.875rem; }
.index-s227 { width:.5rem;height:.5rem; }
.index-s228 { opacity:.75; }
.index-s229 { font-size:.75rem; letter-spacing:.05em; }
.index-s230 { font-size:.625rem; background:rgba(255,255,255,.15); }
.index-s231 { max-width:48rem; }
.index-s232 { width:1.5rem;height:1.5rem;color:#E53935; }
.index-s233 { width:1.5rem;height:1.5rem;color:#f59e0b; }
.index-s234 { width:1.5rem;height:1.5rem;color:#3b82f6; }
.index-s235 { width:1.5rem;height:1.5rem;color:#10b981; }
.index-s236 { background-color:#f3e8ff; }
.index-s237 { width:1.5rem;height:1.5rem;color:#a855f7; }
.index-s238 { background-color:#e0e7ff; }
.index-s239 { width:1.5rem;height:1.5rem;color:#6366f1; }
.index-s240 { font-size:.875rem; width:fit-content; }
.index-s241 { width:2rem;height:.25rem; }
.index-s242 { width:1.75rem;height:1.75rem;font-size:.875rem; }
.index-s243 { opacity:.4; }
.index-s244 { scroll-margin-top:6rem; }
.index-s245 { top:-1.5rem; right:-1.5rem; }
.index-s246 { width:1.25rem;height:1.25rem;color:#E53935;flex-shrink:0;margin-top:.125rem; }
.index-s247 { width:1.25rem;height:1.25rem;color:#3b82f6;flex-shrink:0;margin-top:.125rem; }
.index-s248 { bottom:-1.5rem; left:-1.5rem; }
.index-s249 { max-width:42rem; background:rgba(255,255,255,.6); border:1px solid #f1f1f1; }
.index-s250 { max-width:56rem; }
.index-s251 { width:1rem;height:1rem;color:#9ca3af;margin-right:.5rem; }
.index-s252 { top:-3rem; left:-3rem; width:16rem; height:16rem; background:rgba(255,213,79,.15); filter:blur(40px); pointer-events:none; }
.index-s253 { bottom:-3rem; right:-3rem; width:20rem; height:20rem; background:rgba(255,255,255,.05); filter:blur(60px); pointer-events:none; }
.index-s254 { background:rgba(255,213,79,.25); color:#222; padding:.375rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.index-s255 { max-width:36rem; color:rgba(255,255,255,.9); }
.index-s256 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.index-s259 { font-size:.8125rem; max-width:24rem; }
.index-s260 { font-size:.75rem; color:#FFD54F; }
.index-s261 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.index-s262 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }
.index-s263 { z-index:1100; overflow-y:auto; }
.index-s264 { background:rgba(34,34,34,.6); backdrop-filter:blur(4px); }
.index-s265 { max-width:32rem; z-index:1; }
.index-s266 { top:1.25rem; right:1.25rem; width:2rem; height:2rem; }
.index-s267 { font-size:.625rem; letter-spacing:.05em; }
.index-s268 { width:1rem;height:1rem;color:#E53935;flex-shrink:0; }
.index-s269 { font-size:.75rem; resize:none; }
.index-s270 { left:.75rem; top:.5rem; font-size:.875rem; }
.index-s271 { padding-left:2rem; font-size:.875rem; }
.index-s272 { width:33%; font-size:.75rem; }
.index-s273 { width:67%; font-size:.75rem; }
.index-s274 { width:4rem;height:4rem; }
.index-s275 { width:2.5rem;height:2.5rem; }
.index-s276 { font-size:.75rem; max-width:24rem; }

/* Inline style attributes moved from browse-services.html */
.browse-services-s1 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.browse-services-s2 { width:.875rem;height:.875rem; }
.browse-services-s3 { width:1rem;height:1rem; }
.browse-services-s4 { font-size:.875rem; }
.browse-services-s5 { width:1.5rem;height:1.5rem; }
.browse-services-s6 { max-width:28rem; }
.browse-services-s7 { width:1.125rem;height:1.125rem; }
.browse-services-s8 { letter-spacing:-.02em; }
.browse-services-s9 { font-size:.9375rem; max-width:32rem; }
.browse-services-s10 { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); padding:.5rem 1rem; border-radius:999px; width:fit-content; }
.browse-services-s11 { width:.5rem;height:.5rem; }
.browse-services-s12 { opacity:.75; }
.browse-services-s13 { font-size:.75rem; }
.browse-services-s14 { top:7rem; }
.browse-services-s15 { font-size:.9375rem; }
.browse-services-s16 { width:.875rem;height:.875rem;color:#9ca3af;position:absolute;left:.75rem;top:.7rem; }
.browse-services-s17 { padding-left:2rem; }
.browse-services-s18 { font-size:.8125rem; }
.browse-services-s19 { font-size:.8125rem; width:auto; }
.browse-services-s20 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.browse-services-s21 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.browse-services-s22 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.browse-services-s23 { font-size:.8125rem; max-width:24rem; }
.browse-services-s24 { font-size:.75rem; color:#FFD54F; }
.browse-services-s25 { width:1rem;height:1rem;color:#E53935; }
.browse-services-s26 { font-size:.75rem; letter-spacing:.05em; }
.browse-services-s27 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.browse-services-s28 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from categories.html */
.categories-s29 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.categories-s30 { width:.875rem;height:.875rem; }
.categories-s31 { width:1rem;height:1rem; }
.categories-s32 { color:#E53935; }
.categories-s33 { font-size:.875rem; }
.categories-s34 { width:1.5rem;height:1.5rem; }
.categories-s35 { max-width:28rem; }
.categories-s36 { width:1.125rem;height:1.125rem; }
.categories-s37 { letter-spacing:-.02em; max-width:44rem; }
.categories-s38 { max-width:40rem; }
.categories-s39 { max-width:32rem; }
.categories-s40 { width:1.125rem;height:1.125rem;color:#9ca3af;margin-right:.5rem; }
.categories-s41 { top:-3rem; left:-3rem; width:16rem; height:16rem; background:rgba(255,213,79,.15); filter:blur(40px); pointer-events:none; }
.categories-s42 { bottom:-3rem; right:-3rem; width:20rem; height:20rem; background:rgba(255,255,255,.05); filter:blur(60px); pointer-events:none; }
.categories-s43 { max-width:52rem; }
.categories-s44 { max-width:34rem; color:rgba(255,255,255,.9); }
.categories-s45 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.categories-s46 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.categories-s47 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.categories-s48 { font-size:.8125rem; max-width:24rem; }
.categories-s49 { font-size:.75rem; color:#FFD54F; }
.categories-s50 { width:1rem;height:1rem;color:#E53935; }
.categories-s51 { font-size:.75rem; letter-spacing:.05em; }
.categories-s52 { font-size:.75rem; }
.categories-s53 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.categories-s54 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from category.html */
.category-s55 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.category-s56 { width:.875rem;height:.875rem; }
.category-s57 { width:1rem;height:1rem; }
.category-s58 { color:#E53935; }
.category-s59 { font-size:.875rem; }
.category-s60 { width:1.5rem;height:1.5rem; }
.category-s61 { max-width:28rem; }
.category-s62 { width:1.125rem;height:1.125rem; }
.category-s63 { width:1.05rem;height:1.05rem; }
.category-s64 { width:.9375rem;height:.9375rem; }
.category-s65 { max-width:40rem; }
.category-s66 { letter-spacing:-.02em; }
.category-s67 { font-size:.9375rem; }
.category-s68 { scroll-margin-top:6rem; }
.category-s69 { max-width:52rem; }
.category-s70 { max-width:34rem; color:rgba(255,255,255,.85); font-size:.9375rem; }
.category-s71 { font-size:.75rem; color:rgba(255,255,255,.55); }
.category-s72 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.category-s73 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.category-s74 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.category-s75 { font-size:.8125rem; max-width:24rem; }
.category-s76 { font-size:.75rem; color:#FFD54F; }
.category-s77 { width:1rem;height:1rem;color:#E53935; }
.category-s78 { font-size:.75rem; letter-spacing:.05em; }
.category-s79 { font-size:.75rem; }
.category-s80 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.category-s81 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from faq.html */
.faq-s121 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.faq-s122 { width:.875rem;height:.875rem; }
.faq-s123 { width:1rem;height:1rem; }
.faq-s124 { color:#E53935; }
.faq-s125 { font-size:.875rem; }
.faq-s126 { width:1.5rem;height:1.5rem; }
.faq-s127 { max-width:28rem; }
.faq-s128 { width:1.125rem;height:1.125rem; }
.faq-s129 { width:.9375rem;height:.9375rem; }
.faq-s130 { letter-spacing:-.02em; max-width:44rem; }
.faq-s131 { max-width:40rem; }
.faq-s132 { max-width:32rem; }
.faq-s133 { width:1.125rem;height:1.125rem;color:#9ca3af;margin-right:.5rem; }
.faq-s134 { top:7rem; }
.faq-s135 { font-size:.75rem; letter-spacing:.08em; }
.faq-s136 { font-size:.875rem; max-width:24rem; }
.faq-s137 { font-size:.8125rem; }
.faq-s138 { width:1.5rem;height:1.5rem;color:#fff; }
.faq-s139 { font-size:.875rem; color:rgba(255,255,255,.75); }
.faq-s140 { font-size:.8125rem; color:#222; }
.faq-s141 { font-size:.875rem; color:rgba(255,255,255,.85); }
.faq-s142 { top:-3rem; left:-3rem; width:16rem; height:16rem; background:rgba(255,213,79,.15); filter:blur(40px); pointer-events:none; }
.faq-s143 { bottom:-3rem; right:-3rem; width:20rem; height:20rem; background:rgba(255,255,255,.05); filter:blur(60px); pointer-events:none; }
.faq-s144 { max-width:56rem; }
.faq-s145 { background:rgba(255,213,79,.25); color:#222; padding:.375rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.faq-s146 { max-width:36rem; color:rgba(255,255,255,.9); }
.faq-s147 { width:1.25rem;height:1.25rem; }
.faq-s148 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.faq-s149 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.faq-s150 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.faq-s151 { font-size:.8125rem; max-width:24rem; }
.faq-s152 { font-size:.75rem; color:#FFD54F; }
.faq-s153 { width:1rem;height:1rem;color:#E53935; }
.faq-s154 { font-size:.75rem; letter-spacing:.05em; }
.faq-s155 { font-size:.75rem; }
.faq-s156 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.faq-s157 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from how-it-works.html */
.how-it-works-s158 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.how-it-works-s159 { width:.875rem;height:.875rem; }
.how-it-works-s160 { width:1rem;height:1rem; }
.how-it-works-s161 { color:#E53935; }
.how-it-works-s162 { font-size:.875rem; }
.how-it-works-s163 { width:1.5rem;height:1.5rem; }
.how-it-works-s164 { max-width:28rem; }
.how-it-works-s165 { width:1.125rem;height:1.125rem; }
.how-it-works-s166 { letter-spacing:-.02em; max-width:44rem; }
.how-it-works-s167 { max-width:40rem; }
.how-it-works-s168 { width:1.25rem;height:1.25rem; }
.how-it-works-s169 { max-width:44rem; }
.how-it-works-s170 { letter-spacing:-.02em; }
.how-it-works-s171 { width:.375rem;height:.375rem; }
.how-it-works-s172 { width:2rem;height:.25rem; }
.how-it-works-s173 { width:1.75rem;height:1.75rem;font-size:.875rem; }
.how-it-works-s174 { font-size:.75rem; }
.how-it-works-s175 { font-size:.5625rem; }
.how-it-works-s176 { opacity:.4; }
.how-it-works-s177 { width:1.25rem;height:1.25rem;color:#E53935;flex-shrink:0;margin-top:.125rem; }
.how-it-works-s178 { max-width:420px; }
.how-it-works-s179 { width:.75rem;height:.75rem; }
.how-it-works-s180 { font-size:.6875rem; letter-spacing:.08em; }
.how-it-works-s181 { font-size:.8125rem; }
.how-it-works-s182 { font-size:.6875rem; }
.how-it-works-s183 { background:rgba(229,57,53,.05); border:1px solid rgba(229,57,53,.15); }
.how-it-works-s184 { font-size:.6875rem; color:rgba(229,57,53,.7); }
.how-it-works-s185 { top:-3rem; left:-3rem; width:16rem; height:16rem; background:rgba(255,213,79,.15); filter:blur(40px); pointer-events:none; }
.how-it-works-s186 { bottom:-3rem; right:-3rem; width:20rem; height:20rem; background:rgba(255,255,255,.05); filter:blur(60px); pointer-events:none; }
.how-it-works-s187 { max-width:56rem; }
.how-it-works-s188 { background:rgba(255,213,79,.25); color:#222; padding:.375rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.how-it-works-s189 { max-width:36rem; color:rgba(255,255,255,.9); }
.how-it-works-s190 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.how-it-works-s191 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.how-it-works-s192 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.how-it-works-s193 { font-size:.8125rem; max-width:24rem; }
.how-it-works-s194 { font-size:.75rem; color:#FFD54F; }
.how-it-works-s195 { width:1rem;height:1rem;color:#E53935; }
.how-it-works-s196 { font-size:.75rem; letter-spacing:.05em; }
.how-it-works-s197 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.how-it-works-s198 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from messages.html */
.messages-s280 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.messages-s281 { width:.875rem;height:.875rem; }
.messages-s282 { width:1rem;height:1rem; }
.messages-s283 { color:#E53935; }
.messages-s284 { font-size:.875rem; }
.messages-s285 { width:1.5rem;height:1.5rem; }
.messages-s286 { max-width:28rem; }
.messages-s287 { width:1.125rem;height:1.125rem; }
.messages-s288 { margin-bottom:1.25rem; }
.messages-s289 { width:.9375rem;height:.9375rem; }
.messages-s290 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.messages-s291 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.messages-s292 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.messages-s293 { font-size:.8125rem; max-width:24rem; }
.messages-s294 { font-size:.75rem; color:#FFD54F; }
.messages-s295 { width:1rem;height:1rem;color:#E53935; }
.messages-s296 { font-size:.75rem; letter-spacing:.05em; }
.messages-s297 { font-size:.75rem; }
.messages-s298 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.messages-s299 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Contents of <style> tag moved from messages.html */
/* Chat-specific overrides to keep the existing dashboard style intact */

    .msg-chat-card {
      background: #fff;
      border: 1px solid #ececef;
      border-radius: 1.125rem;
      box-shadow: 0 20px 45px -34px rgba(0,0,0,.18);
      display: flex;
      flex-direction: column;
      height: calc(100vh - 12.5rem);
      min-height: 28rem;
      overflow: hidden;
    }
    @media (max-width: 991.98px) {
      .msg-chat-card { height: auto; min-height: 26rem; }
    }

    .msg-chat-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.125rem 1.5rem;
      border-bottom: 1px solid #f0f0f2;
      background: #fff;
    }
    .msg-chat-user {
      display: flex;
      align-items: center;
      gap: .75rem;
      min-width: 0;
      flex: 1;
    }
    /* The text column needs its own min-width:0, or a long task title stops the
       name and subtitle from ever ellipsising. */
    .msg-chat-user > div { min-width: 0; }
    .msg-chat-avatar {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: var(--bs-dark-brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: .875rem;
      flex-shrink: 0;
    }
    .msg-chat-name {
      font-size: .9375rem;
      font-weight: 800;
      color: var(--bs-dark-brand);
      margin: 0;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .msg-chat-sub {
      font-size: .75rem;
      color: rgba(var(--bs-dark-brand-rgb), .55);
      margin: .0625rem 0 0;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Status reads as a quiet state, not a shout — sentence case with a dot
       instead of heavy uppercase. */
    .msg-status {
      display: inline-flex;
      align-items: center;
      gap: .375rem;
      font-size: .75rem;
      font-weight: 700;
      padding: .3125rem .75rem;
      border-radius: 999px;
      white-space: nowrap;
      color: rgba(var(--bs-dark-brand-rgb), .55);
      background: #f2f3f5;
      flex-shrink: 0;
    }
    .msg-status::before {
      content: '';
      width: .4375rem; height: .4375rem; border-radius: 50%;
      background: currentColor; opacity: .7; flex-shrink: 0;
    }
    .msg-status.is-online { color: #059669; background: rgba(16,185,129,.12); }
    .msg-status.is-online::before { opacity: 1; }

    .msg-chat-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .875rem;
      background: #fafafb;
    }

    .msg-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 75%;
    }
    .msg-row.me { align-items: flex-end; align-self: flex-end; }
    .msg-bubble {
      padding: .625rem .875rem;
      border-radius: 1.125rem;
      font-size: .875rem;
      line-height: 1.5;
      word-wrap: break-word;
      overflow-wrap: anywhere;
      max-width: 100%;
    }
    .msg-bubble.them {
      background: #fff;
      color: var(--bs-dark-brand);
      border: 1px solid #e8e9ec;
      border-bottom-left-radius: .3125rem;
      box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .msg-bubble.me {
      background: var(--bs-red);
      color: #fff;
      border-bottom-right-radius: .3125rem;
    }
    /* Links inside a sent bubble need to stay legible on red. */
    .msg-bubble.me a { color: #fff; }
    .msg-time {
      font-size: .6875rem;
      font-weight: 500;
      color: rgba(var(--bs-dark-brand-rgb), .42);
      margin-top: .25rem;
      padding: 0 .25rem;
      display: flex;
      align-items: center;
      gap: .25rem;
    }
    .msg-time svg,
    .msg-time i { width: .75rem; height: .75rem; }

    .msg-input-bar {
      padding: .875rem 1.25rem .5rem;
      border-top: 1px solid #f0f0f2;
      background: #fff;
      display: flex;
      align-items: center;
      gap: .625rem;
    }
    .msg-attach {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      border: 1px solid #e2e4e8;
      background: #fff;
      color: rgba(var(--bs-dark-brand-rgb), .55);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all .2s ease;
    }
    .msg-attach:hover { border-color: var(--bs-red); color: var(--bs-red); background: rgba(var(--bs-red-rgb), .05); }
    .msg-attach i { width: 1rem; height: 1rem; }
    .msg-input {
      flex: 1;
      min-width: 0;
      border: 1px solid #e2e4e8;
      border-radius: 999px;
      padding: .6875rem 1rem;
      font-size: .875rem;
      font-weight: 500;
      color: var(--bs-dark-brand);
      outline: none;
      background: #fff;
    }
    .msg-input:focus { border-color: var(--bs-red); box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1); }
    .msg-send {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      border: none;
      background: var(--bs-red);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all .2s ease;
    }
    .msg-send:hover { background: #c62828; }
    .msg-send:active { transform: scale(.95); }
    .msg-send i { width: 1rem; height: 1rem; }
    .msg-send:disabled { opacity: .45; cursor: not-allowed; }

    /* ---------- Chat: states the static mockup did not cover ---------- */

    /* Uploaded avatar fills the initials circle. */
    .msg-chat-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

    /* Empty conversation. */
    /* The chat body is a flex column, so the box needs full width to centre its
       own contents — margin:auto alone only centres it vertically. */
    .msg-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .375rem; margin: auto; padding: 2rem 1rem; width: 100%; text-align: center;
      color: rgba(var(--bs-dark-brand-rgb), .5);
    }
    .msg-empty-icon { width: 2.25rem; height: 2.25rem; color: rgba(var(--bs-dark-brand-rgb), .25); margin-bottom: .25rem; }
    .msg-empty h6 { font-size: .875rem; font-weight: 800; color: var(--bs-dark-brand); margin: 0; }
    .msg-empty p { font-size: .8125rem; margin: 0; }

    /* File attached to a sent message. */
    .msg-attachment {
      display: inline-flex; align-items: center; gap: .375rem; margin-top: .375rem;
      font-size: .75rem; font-weight: 600; text-decoration: underline;
      color: inherit; opacity: .9;
    }
    .msg-attachment:hover { opacity: 1; color: inherit; }
    .msg-attachment i, .msg-attachment svg { width: .8125rem; height: .8125rem; }

    /* Pending attachment shown above the input bar before sending. */
    .msg-attach-preview {
      display: flex; align-items: center; gap: .5rem;
      margin: 0 1.5rem; padding: .5rem .75rem;
      background: #f7f8f9; border: 1px solid #ececef; border-radius: .625rem;
      font-size: .75rem; font-weight: 600; color: rgba(var(--bs-dark-brand-rgb), .7);
    }
    .msg-attach-preview.d-none { display: none !important; }
    .msg-attach-preview > i, .msg-attach-preview > svg { width: .875rem; height: .875rem; flex-shrink: 0; }
    .msg-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .msg-attach-remove {
      margin-left: auto; background: none; border: none; padding: 0; cursor: pointer;
      display: inline-flex; color: rgba(var(--bs-dark-brand-rgb), .4); transition: color .2s ease;
    }
    .msg-attach-remove:hover { color: var(--bs-red); }
    .msg-attach-remove i, .msg-attach-remove svg { width: .875rem; height: .875rem; }

    /* Character counter + validation message. Sits inside the card under the
       input bar, which owns the card's bottom edge — so no top border here. */
    .msg-validation-bar {
      display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
      padding: 0 1.25rem .75rem; background: #fff;
      font-size: .6875rem; font-weight: 600;
      min-height: 1rem;
    }
    /* Counter sits quietly under the input; the error takes the left side so it
       reads first when something is wrong. */
    .msg-counter { color: rgba(var(--bs-dark-brand-rgb), .3); }
    .msg-error { color: var(--bs-red); margin-right: auto; }
    .msg-input.input-error { border-color: var(--bs-red); }

    /* Read receipt ticks on your own messages. The double tick is two glyphs,
       so it is tightened rather than spaced like normal text. */
    .read-tick {
      margin-left: .125rem;
      font-size: .8125rem;
      line-height: 1;
      letter-spacing: -.15em;
      color: rgba(var(--bs-dark-brand-rgb), .42);
    }

    /* "Typing…" bubble, injected by task-chat-page.js. */
    .typing-bubble { display: inline-flex; align-items: center; gap: .25rem; }
    .typing-bubble .dot {
      width: .375rem; height: .375rem; border-radius: 50%;
      background: rgba(var(--bs-dark-brand-rgb), .45);
      animation: msgTypingBounce 1.4s infinite ease-in-out both;
    }
    .typing-bubble .dot:nth-child(1) { animation-delay: -.32s; }
    .typing-bubble .dot:nth-child(2) { animation-delay: -.16s; }
    @keyframes msgTypingBounce {
      0%, 80%, 100% { transform: scale(.6); opacity: .5; }
      40% { transform: scale(1); opacity: 1; }
    }

    /* ==========================================================================
       Responsive refinements
       ========================================================================== */
    @media (max-width: 991.98px) {
      .msg-page { padding-top: 5rem; }
      .bv-grid { grid-template-columns: 1fr; }
      .bv-banner { position: static; margin-bottom: 1.25rem; }
      .msg-chat-card { height: calc(100vh - 24rem); min-height: 22rem; }
    }

    @media (max-width: 767.98px) {
      .cd-top { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
      .cd-title { font-size: 1.75rem; }
      .back-btn { margin-bottom: 1rem; }
      .msg-chat-card { height: calc(100vh - 22rem); min-height: 20rem; }
    }

    @media (max-width: 575.98px) {
      .msg-page { padding-top: 4.75rem; padding-bottom: 1.5rem; }
      .cd-container { padding-left: 1rem; padding-right: 1rem; }
      .cd-title { font-size: 1.375rem; }
      .cd-sub { font-size: .8125rem; }
      .back-btn { padding: .375rem 1rem .375rem .75rem; font-size: .75rem; }
      .bv-banner { padding: 1rem; border-radius: 1rem; margin-bottom: 1rem; }
      .bv-task-title { font-size: .9375rem; }
      .bv-stats { gap: .625rem; }
      .bv-stat-v { font-size: .75rem; }
      .bv-stat-v small { display: block; margin-left: 0; }
      .bv-stat-k { font-size: .5625rem; }
      .bv-stat-ico { display: none; }
      .msg-chat-card { border-radius: 1rem; height: calc(100vh - 17rem); min-height: 20rem; }
      .msg-chat-head { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .875rem 1rem; }
      .msg-chat-user { width: 100%; min-width: 0; }
      .msg-chat-avatar { width: 2rem; height: 2rem; font-size: .75rem; }
      .msg-chat-name { font-size: .875rem; }
      .msg-chat-sub { font-size: .6875rem; white-space: normal; overflow: visible; text-overflow: clip; }
      .msg-status { font-size: .625rem; padding: .25rem .5rem; }
      .msg-chat-body { padding: 1rem; gap: .75rem; }
      .msg-row { max-width: 88%; }
      .msg-bubble { padding: .625rem .875rem; font-size: .8125rem; border-radius: .875rem; }
      .msg-time { font-size: .625rem; }
      .msg-input-bar { padding: .75rem 1rem; gap: .5rem; }
      .msg-input { padding: .625rem .875rem; font-size: .8125rem; }
      .msg-attach, .msg-send { width: 2.25rem; height: 2.25rem; }
      .msg-attach i { width: .875rem; height: .875rem; }
      .msg-send i { width: 1rem; height: 1rem; }
    }

    @media (max-width: 400px) {
      .msg-row { max-width: 92%; }
      .msg-chat-card { height: calc(100vh - 16rem); min-height: 18rem; }
      .msg-chat-head { padding: .75rem .875rem; }
      .msg-chat-body { padding: .875rem; }
      .msg-input-bar { padding: .625rem .875rem; }
    }

/* Inline style attributes moved from post-task.html */
.post-task-s341 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.post-task-s342 { width:.875rem;height:.875rem; }
.post-task-s343 { width:1rem;height:1rem; }
.post-task-s344 { color:#E53935; }
.post-task-s345 { font-size:.875rem; }
.post-task-s346 { width:1.5rem;height:1.5rem; }
.post-task-s347 { max-width:28rem; }
.post-task-s348 { width:1.125rem;height:1.125rem; }
.post-task-s349 { margin-bottom:0; }
.post-task-s350 { width:.9375rem;height:.9375rem; }
.post-task-s351 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.post-task-s352 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.post-task-s353 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.post-task-s354 { font-size:.8125rem; max-width:24rem; }
.post-task-s355 { font-size:.75rem; color:#FFD54F; }
.post-task-s356 { width:1rem;height:1rem;color:#E53935; }
.post-task-s357 { font-size:.75rem; letter-spacing:.05em; }
.post-task-s358 { font-size:.75rem; }
.post-task-s359 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.post-task-s360 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from post-task-questions.html */
.post-task-questions-s300 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.post-task-questions-s301 { width:.875rem;height:.875rem; }
.post-task-questions-s302 { width:1rem;height:1rem; }
.post-task-questions-s303 { color:#E53935; }
.post-task-questions-s304 { font-size:.875rem; }
.post-task-questions-s305 { width:1.5rem;height:1.5rem; }
.post-task-questions-s306 { max-width:28rem; }
.post-task-questions-s307 { width:1.125rem;height:1.125rem; }
.post-task-questions-s308 { margin-bottom:0; }
.post-task-questions-s309 { width:.9375rem;height:.9375rem; }
.post-task-questions-s310 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.post-task-questions-s311 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.post-task-questions-s312 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.post-task-questions-s313 { font-size:.8125rem; max-width:24rem; }
.post-task-questions-s314 { font-size:.75rem; color:#FFD54F; }
.post-task-questions-s315 { width:1rem;height:1rem;color:#E53935; }
.post-task-questions-s316 { font-size:.75rem; letter-spacing:.05em; }
.post-task-questions-s317 { font-size:.75rem; }
.post-task-questions-s318 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.post-task-questions-s319 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from post-task-review.html */
.post-task-review-s320 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.post-task-review-s321 { width:.875rem;height:.875rem; }
.post-task-review-s322 { width:1rem;height:1rem; }
.post-task-review-s323 { color:#E53935; }
.post-task-review-s324 { font-size:.875rem; }
.post-task-review-s325 { width:1.5rem;height:1.5rem; }
.post-task-review-s326 { max-width:28rem; }
.post-task-review-s327 { width:1.125rem;height:1.125rem; }
.post-task-review-s328 { margin-bottom:0; }
.post-task-review-s329 { width:.9375rem;height:.9375rem; }
.post-task-review-s330 { width:.8125rem;height:.8125rem; }
.post-task-review-s331 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.post-task-review-s332 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.post-task-review-s333 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.post-task-review-s334 { font-size:.8125rem; max-width:24rem; }
.post-task-review-s335 { font-size:.75rem; color:#FFD54F; }
.post-task-review-s336 { width:1rem;height:1rem;color:#E53935; }
.post-task-review-s337 { font-size:.75rem; letter-spacing:.05em; }
.post-task-review-s338 { font-size:.75rem; }
.post-task-review-s339 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.post-task-review-s340 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from privacy.html */
.privacy-s361 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.privacy-s362 { width:.875rem;height:.875rem; }
.privacy-s363 { width:1rem;height:1rem; }
.privacy-s364 { color:#E53935; }
.privacy-s365 { font-size:.875rem; }
.privacy-s366 { width:1.5rem;height:1.5rem; }
.privacy-s367 { max-width:28rem; }
.privacy-s368 { width:1.125rem;height:1.125rem; }
.privacy-s369 { width:.9375rem;height:.9375rem; }
.privacy-s370 { letter-spacing:-.02em; }
.privacy-s371 { font-size:.9375rem; max-width:40rem; }
.privacy-s372 { font-size:.8125rem; }
.privacy-s373 { width:1rem;height:1rem;flex-shrink:0; }
.privacy-s374 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.privacy-s375 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.privacy-s376 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.privacy-s377 { font-size:.8125rem; max-width:24rem; }
.privacy-s378 { font-size:.75rem; color:#FFD54F; }
.privacy-s379 { width:1rem;height:1rem;color:#E53935; }
.privacy-s380 { font-size:.75rem; letter-spacing:.05em; }
.privacy-s381 { font-size:.75rem; }
.privacy-s382 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.privacy-s383 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from subcategory.html */
.subcategory-s388 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.subcategory-s389 { width:.875rem;height:.875rem; }
.subcategory-s390 { width:1rem;height:1rem; }
.subcategory-s391 { color:#E53935; }
.subcategory-s392 { font-size:.875rem; }
.subcategory-s393 { width:1.5rem;height:1.5rem; }
.subcategory-s394 { max-width:28rem; }
.subcategory-s395 { width:1.125rem;height:1.125rem; }
.subcategory-s396 { width:1.05rem;height:1.05rem; }
.subcategory-s397 { width:.9375rem;height:.9375rem; }
.subcategory-s398 { max-width:40rem; }
.subcategory-s399 { letter-spacing:-.02em; }
.subcategory-s400 { font-size:.9375rem; }
.subcategory-s401 { scroll-margin-top:6rem; }
.subcategory-s402 { max-width:52rem; }
.subcategory-s403 { max-width:34rem; color:rgba(255,255,255,.85); font-size:.9375rem; }
.subcategory-s404 { font-size:.75rem; color:rgba(255,255,255,.55); }
.subcategory-s405 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.subcategory-s406 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.subcategory-s407 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.subcategory-s408 { font-size:.8125rem; max-width:24rem; }
.subcategory-s409 { font-size:.75rem; color:#FFD54F; }
.subcategory-s410 { width:1rem;height:1rem;color:#E53935; }
.subcategory-s411 { font-size:.75rem; letter-spacing:.05em; }
.subcategory-s412 { font-size:.75rem; }
.subcategory-s413 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.subcategory-s414 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from task-details.html */
.task-details-s415 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.task-details-s416 { width:.875rem;height:.875rem; }
.task-details-s417 { width:1rem;height:1rem; }
.task-details-s418 { font-size:.875rem; }
.task-details-s419 { width:1.5rem;height:1.5rem; }
.task-details-s420 { max-width:28rem; }
.task-details-s421 { width:1.125rem;height:1.125rem; }
.task-details-s422 { padding-top:6.5rem; padding-bottom:3rem; }
.task-details-s423 { width:.9375rem;height:.9375rem; }
.task-details-s424 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.task-details-s425 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.task-details-s426 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.task-details-s427 { font-size:.8125rem; max-width:24rem; }
.task-details-s428 { font-size:.75rem; color:#FFD54F; }
.task-details-s429 { width:1rem;height:1rem;color:#E53935; }
.task-details-s430 { font-size:.75rem; letter-spacing:.05em; }
.task-details-s431 { font-size:.75rem; }
.task-details-s432 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.task-details-s433 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }
.task-details-s434 { z-index:1100; overflow-y:auto; }
.task-details-s435 { background:rgba(34,34,34,.6); backdrop-filter:blur(4px); }
.task-details-s436 { max-width:28rem; z-index:1; }
.task-details-s437 { top:1.25rem; right:1.25rem; width:2rem; height:2rem; }
.task-details-s438 { width:1.25rem;height:1.25rem; }
.task-details-s439 { font-size:.625rem; letter-spacing:.05em; }
.task-details-s440 { font-size:.6875rem; }
.task-details-s441 { left:.75rem; top:.5rem; font-size:.875rem; }
.task-details-s442 { padding-left:2rem; font-size:.875rem; }
.task-details-s443 { font-size:.75rem; resize:none; }
.task-details-s444 { width:3.5rem;height:3.5rem; }
.task-details-s445 { width:2rem;height:2rem; }
.task-details-s446 { font-size:.8125rem; }

/* Inline style attributes moved from terms.html */
.terms-s447 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.terms-s448 { width:.875rem;height:.875rem; }
.terms-s449 { width:1rem;height:1rem; }
.terms-s450 { color:#E53935; }
.terms-s451 { font-size:.875rem; }
.terms-s452 { width:1.5rem;height:1.5rem; }
.terms-s453 { max-width:28rem; }
.terms-s454 { width:1.125rem;height:1.125rem; }
.terms-s455 { width:.9375rem;height:.9375rem; }
.terms-s456 { letter-spacing:-.02em; }
.terms-s457 { font-size:.9375rem; max-width:40rem; }
.terms-s458 { font-size:.8125rem; }
.terms-s459 { width:1rem;height:1rem;flex-shrink:0; }
.terms-s460 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.terms-s461 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.terms-s462 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.terms-s463 { font-size:.8125rem; max-width:24rem; }
.terms-s464 { font-size:.75rem; color:#FFD54F; }
.terms-s465 { width:1rem;height:1rem;color:#E53935; }
.terms-s466 { font-size:.75rem; letter-spacing:.05em; }
.terms-s467 { font-size:.75rem; }
.terms-s468 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.terms-s469 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* Inline style attributes moved from wallet-topup.html */
.wt-s102 { font-size:.625rem; background-color:rgba(255,213,79,.3); color:#222; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.wt-s103 { width:.875rem;height:.875rem; }
.wt-s104 { width:1rem;height:1rem; }
.wt-s105 { color:#E53935; }
.wt-s106 { font-size:.875rem; }
.wt-s107 { width:1.5rem;height:1.5rem; }
.wt-s108 { max-width:28rem; }
.wt-s109 { width:1.125rem;height:1.125rem; }
.wt-s111 { scroll-margin-top:6rem; border-color:rgba(255,255,255,.05) !important; }
.wt-s112 { width:2.5rem;height:2.5rem;font-size:1.4rem; }
.wt-s113 { font-size:.625rem; background-color:rgba(255,213,79,.2); color:#FFD54F; padding:.125rem .4rem; border-radius:999px; font-weight:700; margin-left:.375rem; }
.wt-s114 { font-size:.8125rem; max-width:24rem; }
.wt-s115 { font-size:.75rem; color:#FFD54F; }
.wt-s116 { width:1rem;height:1rem;color:#E53935; }
.wt-s117 { font-size:.75rem; letter-spacing:.05em; }
.wt-s118 { font-size:.75rem; }
.wt-s119 { font-size:.75rem; border-color:rgba(255,255,255,.05) !important; }
.wt-s120 { width:.875rem;height:.875rem;color:#E53935;fill:#E53935; }

/* ==========================================================================
   TOP UP WALLET PAGE (wallet-topup.html)
   ========================================================================== */
.wt-panel { margin-bottom: 1.25rem; }

/* ---------- Preset amount grid ---------- */
.wt-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
@media (max-width: 479.98px) { .wt-preset-grid { grid-template-columns: repeat(2, 1fr); } }
.wt-preset {
  padding: .875rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--bs-dark-brand);
  background: #f4f5f6;
  border: 1px solid #e2e4e8;
  border-radius: .875rem;
  cursor: pointer;
  transition: all .2s ease;
}
.wt-preset:hover { border-color: #cfcfd6; }
.wt-preset.is-selected {
  color: #fff;
  background: var(--bs-dark-brand);
  border-color: var(--bs-dark-brand);
}

/* ---------- Fields (payment form) ---------- */
.wt-field { margin-bottom: 1.25rem; }
.wt-field:last-of-type { margin-bottom: 1rem; }
.wt-field-label { display: block; font-size: .8125rem; font-weight: 700; color: rgba(var(--bs-dark-brand-rgb), .8); margin-bottom: .5rem; }
.wt-req { color: var(--bs-red); }

.wt-input {
  width: 100%;
  padding: .8125rem 1rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bs-dark-brand);
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .75rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wt-input::placeholder { color: #9ca3af; font-weight: 400; }
.wt-input:focus {
  outline: none;
  border-color: var(--bs-red);
  box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1);
}

.wt-amount-wrap { position: relative; }
.wt-amount-prefix {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .5);
  pointer-events: none;
}
.wt-amount-input { padding-left: 1.75rem; font-weight: 800; }
.wt-hint { font-size: .75rem; color: rgba(var(--bs-dark-brand-rgb), .5); margin: .5rem 0 0; }
.wt-check {
  display: flex;
  align-items: flex-start;
  gap: .5625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0f1f3;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  cursor: pointer;
}
.wt-check input { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .125rem; accent-color: var(--bs-red); cursor: pointer; }

/* ---------- Submit ---------- */
.wt-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5625rem;
  padding: 1rem;
  margin-top: 1.25rem;
  font-size: .9375rem;
  font-weight: 800;
  color: #fff;
  background: var(--bs-red);
  border: none;
  border-radius: .875rem;
  cursor: pointer;
  box-shadow: 0 14px 28px -14px rgba(var(--bs-red-rgb), .6);
  transition: all .2s ease;
}
.wt-submit-btn:hover { background: #c62828; }
.wt-submit-btn:disabled { opacity: .55; cursor: not-allowed; }
.wt-submit-btn i, .wt-submit-btn svg { width: 1rem; height: 1rem; }
.wt-spin { animation: wtSpin .7s linear infinite; }
@keyframes wtSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wt-spin { animation: none; } }

.wt-redirect-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .5);
  margin: .875rem 0 0;
}
.wt-redirect-note i, .wt-redirect-note svg { width: .8125rem; height: .8125rem; }

/* ---------- Recent transactions ---------- */
.wt-tx-panel { margin-top: 1.25rem; margin-bottom: 0; }
.wt-tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wt-tx-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 0;
  border-top: 1px solid #f1f2f4;
}
.wt-tx-row:first-child { border-top: none; padding-top: 0; }
.wt-tx-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: .625rem;
}
.wt-tx-ico i, .wt-tx-ico svg { width: 1rem; height: 1rem; }
.wt-tx-ico-in { background: rgba(16,185,129,.12); color: #10b981; }
.wt-tx-ico-out { background: rgba(var(--bs-dark-brand-rgb), .06); color: rgba(var(--bs-dark-brand-rgb), .55); }
.wt-tx-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wt-tx-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-tx-date { font-size: .75rem; color: rgba(var(--bs-dark-brand-rgb), .5); margin-top: .125rem; }
.wt-tx-amt { font-size: .9375rem; font-weight: 800; flex-shrink: 0; }
.wt-tx-amt-in { color: #10b981; }
.wt-tx-amt-out { color: var(--bs-dark-brand); }

/* ---------- Sidebar ---------- */
.wt-side-card {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 1.125rem;
  padding: 1.375rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 30px -26px rgba(0,0,0,.25);
}
.wt-side-card:last-child { margin-bottom: 0; }

.wt-balance-card {
  background: var(--bs-dark-brand);
  border-color: var(--bs-dark-brand);
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.wt-balance-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wt-balance-amt { font-size: 1.875rem; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.wt-balance-amt small { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.5); }

.wt-side-title { font-size: 1.0625rem; font-weight: 800; color: var(--bs-dark-brand); margin: 0 0 1.125rem; letter-spacing: -.01em; }

.wt-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .875rem;
  color: rgba(var(--bs-dark-brand-rgb), .65);
  padding: .5rem 0;
}
.wt-summary-v { font-weight: 700; color: var(--bs-dark-brand); }
.wt-summary-total { font-weight: 800; color: var(--bs-dark-brand); border-top: 1px dashed #e2e4e8; margin-top: .25rem; padding-top: .75rem; }
.wt-summary-total .wt-summary-v { font-size: 1.0625rem; }
.wt-summary-divider { height: 1px; background: #f0f1f3; margin: 1rem 0; }
.wt-summary-after .wt-summary-v,
.wt-summary-after { color: #10b981; }

/* Secure payments note */
.wt-secure-card { display: flex; align-items: flex-start; gap: .75rem; }
.wt-secure-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: .625rem;
  background: rgba(16,185,129,.1);
  color: #10b981;
}
.wt-secure-ico i, .wt-secure-ico svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   AUTH — split-panel login / register layout
   ========================================================================== */
.auth-body { background: #fff; min-height: 100vh; }
.auth-shell {
  display: flex;
  min-height: 100vh;
}
@media (min-width: 992px) {
  .auth-body { height: 100vh; overflow: hidden; }
  .auth-shell { height: 100vh; }
}

/* ---------- Left brand panel (hidden below lg) ---------- */
/* Fixed in place — does not scroll with the form panel. */
.auth-brand {
  display: none;
  position: relative;
  width: 42%;
  height: 100vh;
  padding: 3rem 3.5rem;
  background:
    radial-gradient(ellipse at top left, rgba(var(--bs-red-rgb), .08), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(var(--bs-accent-rgb), .12), transparent 55%),
    var(--bs-grey);
  border-right: 1px solid #ececef;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  overflow-y: auto;
}
@media (min-width: 992px) {
  .auth-brand { display: flex; }
}
.auth-brand-inner { max-width: 26rem; }
.auth-brand-headline {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--bs-dark-brand);
  margin: 2rem 0 1rem;
}
.auth-brand-headline .accent { color: var(--bs-red); }
.auth-brand-sub {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.auth-point {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
}
.auth-point-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(16,185,129,.12);
  color: #10b981;
}
.auth-point-check i { width: .875rem; height: .875rem; }

/* ---------- Right form panel ---------- */
.auth-main {
  flex: 1;
  display: flex;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 992px) {
  .auth-main { height: 100vh; overflow-y: auto; }
}
.auth-card { width: 100%; max-width: 26rem; margin: auto; }
.auth-card-logo { display: flex; }
@media (min-width: 992px) {
  .auth-card-logo { display: none; }
}
.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  margin-bottom: 2rem;
}
.auth-logo-img { height: 2.25rem; width: auto; }
.auth-title { font-size: 1.625rem; font-weight: 900; color: var(--bs-dark-brand); margin-bottom: .375rem; }
.auth-subtitle { font-size: .875rem; font-weight: 500; color: rgba(var(--bs-dark-brand-rgb), .65); margin-bottom: 1.75rem; }
.auth-switch {
  font-size: .875rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .7);
  text-align: center;
  margin: 1.5rem 0 0;
}
/* Without this the link falls back to the browser's blue underline, which is
   obvious when it sits alone on its own line rather than after a sentence. */
.auth-switch a {
  color: var(--bs-red);
  font-weight: 700;
  text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }
/* Standalone "back" link under a form — quieter than the red action links, with
   the arrow nudging left like the dashboard back buttons. */
.auth-switch a.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  font-weight: 700;
}
.auth-switch a.auth-back-link:hover { color: var(--bs-red); text-decoration: none; }
.auth-back-link i, .auth-back-link svg { width: .875rem; height: .875rem; transition: transform .2s ease; }
.auth-back-link:hover i, .auth-back-link:hover svg { transform: translateX(-2px); }
.auth-link { color: var(--bs-red); font-weight: 700; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-link-sm { font-size: .75rem; }

/* ---------- Form fields ---------- */
.auth-field { margin-bottom: 1.125rem; }
.auth-label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--bs-dark-brand);
  margin-bottom: .4rem;
}
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > i,
.auth-input-wrap > svg {
  position: absolute;
  left: .875rem;
  width: 1rem; height: 1rem;
  color: rgba(var(--bs-dark-brand-rgb), .4);
  pointer-events: none;
}
.auth-input {
  width: 100%;
  padding: .75rem .875rem .75rem 2.5rem;
  background: var(--bs-grey);
  border: 1px solid #f1f1f1;
  border-radius: .9rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-dark-brand);
  transition: all .15s ease;
}
.auth-input::placeholder { color: rgba(var(--bs-dark-brand-rgb), .35); font-weight: 500; }
.auth-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--bs-red);
  box-shadow: 0 0 0 3px rgba(var(--bs-red-rgb), .1);
}
.auth-input.is-invalid { border-color: var(--bs-red); background: rgba(var(--bs-red-rgb), .04); }
.auth-input-pw { padding-right: 2.75rem; }
.auth-eye {
  position: absolute;
  right: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border: none;
  background: none;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  cursor: pointer;
}
.auth-eye:hover { color: var(--bs-dark-brand); }
.auth-eye i, .auth-eye svg { width: 1rem; height: 1rem; }

.auth-error {
  font-size: .75rem;
  font-weight: 700;
  color: var(--bs-red);
  margin: .375rem 0 0;
}
.invalid-feedback.d-block { font-size: .75rem; font-weight: 700; color: var(--bs-red); margin-top: .375rem; }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.auth-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(var(--bs-dark-brand-rgb), .75);
  cursor: pointer;
}
.auth-check input[type="checkbox"] { accent-color: var(--bs-red); width: .95rem; height: .95rem; cursor: pointer; }

.auth-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.25rem;
  background: var(--bs-red);
  color: #fff;
  border: none;
  border-radius: .9rem;
  font-size: .9375rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s ease;
}
.auth-submit:hover { filter: brightness(.94); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.auth-submit i, .auth-submit svg { width: 1.125rem; height: 1.125rem; }

/* ---------- Role toggle (register) ---------- */
.auth-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.auth-role {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem .75rem;
  background: var(--bs-grey);
  border: 1.5px solid #f1f1f1;
  border-radius: .9rem;
  font-size: .8125rem;
  font-weight: 800;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  cursor: pointer;
  transition: all .15s ease;
}
.auth-role i, .auth-role svg { width: 1rem; height: 1rem; }
.auth-role.is-active {
  background: #fff;
  border-color: var(--bs-red);
  color: var(--bs-red);
  box-shadow: 0 4px 12px -6px rgba(var(--bs-red-rgb), .3);
}

/* ---------- Two-column field row (register name fields) ---------- */
.auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* ---------- Captcha ---------- */
.auth-captcha-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem; }
.auth-captcha-img { border-radius: .6rem; border: 1px solid #f1f1f1; }
.auth-captcha-refresh {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .55);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.auth-captcha-refresh:hover { color: var(--bs-red); }
.auth-captcha-refresh i, .auth-captcha-refresh svg { width: .875rem; height: .875rem; }

/* ---------- Password strength meter ---------- */
.auth-strength-wrap {
  height: .3rem;
  background: #f1f1f1;
  border-radius: 999px;
  margin-top: .625rem;
  overflow: hidden;
  display: none;
}
.auth-strength-wrap.is-visible { display: block; }
.auth-strength-bar { height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; }
.auth-strength-bar.strength-weak { width: 25%; background: var(--bs-red); }
.auth-strength-bar.strength-medium { width: 60%; background: var(--bs-accent); }
.auth-strength-bar.strength-strong { width: 100%; background: #10b981; }
.auth-strength-label {
  font-size: .6875rem;
  font-weight: 700;
  color: rgba(var(--bs-dark-brand-rgb), .5);
  margin: .3rem 0 0;
  display: none;
}
.auth-strength-label.is-visible { display: block; }

/* ---------- Flash alerts ---------- */
.auth-alert {
  padding: .75rem 1rem;
  border-radius: .75rem;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.auth-alert-info { background: rgba(59,130,246,.08); color: #1d4ed8; border: 1px solid rgba(59,130,246,.18); }
.auth-alert-success { background: rgba(16,185,129,.08); color: #047857; border: 1px solid rgba(16,185,129,.18); }
.auth-alert-danger { background: rgba(var(--bs-red-rgb), .08); color: var(--bs-red); border: 1px solid rgba(var(--bs-red-rgb), .18); }

/* ---------- intl-tel-input integration ---------- */
.auth-field .iti { width: 100%; display: block; }
.iti__dropdown-content,
.iti__country-list {
  z-index: 2000 !important;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border-radius: .6rem;
}
.auth-field .iti__selected-country { background: transparent; border: none; border-radius: .9rem 0 0 .9rem; padding: 0 .375rem 0 .875rem; }
.auth-field .iti__selected-country:hover,
.auth-field .iti__selected-country:focus { background: transparent; }
.auth-field .iti__selected-dial-code { font-size: .875rem; font-weight: 600; color: var(--bs-dark-brand); margin-left: .25rem; }
.auth-field .iti--separate-dial-code .auth-input-tel { padding-left: 5.75rem; }

/* ==========================================================================
   CONTACT page
   ========================================================================== */
.contact-card {
  height: 100%;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.06);
  transition: all .25s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(0,0,0,.12); }
.contact-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}
.contact-icon-red { background: rgba(var(--bs-red-rgb), .1); color: var(--bs-red); }
.contact-icon-accent { background: rgba(var(--bs-accent-rgb), .25); color: #b7791f; }
.contact-icon-green { background: rgba(16,185,129,.1); color: #10b981; }
.contact-card-title { font-size: 1rem; font-weight: 800; color: var(--bs-dark-brand); margin-bottom: .375rem; }
.contact-card-desc { font-size: .8125rem; font-weight: 500; color: rgba(var(--bs-dark-brand-rgb), .6); margin-bottom: 1rem; }
.contact-card-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--bs-red);
  text-decoration: none;
}
.contact-card-link:hover { text-decoration: underline; }

.contact-form-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 10px 25px -8px rgba(0,0,0,.06);
}
.contact-textarea { padding-top: .75rem; resize: vertical; min-height: 8rem; }
.contact-error { font-size: .75rem; font-weight: 700; color: var(--bs-red); margin: .375rem 0 0; }

.contact-status {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: .9rem;
  margin-top: 1.25rem;
  font-size: .8125rem;
}
.contact-status-success { background: rgba(16,185,129,.08); color: #047857; border: 1px solid rgba(16,185,129,.18); }
.contact-status-success i { color: #10b981; flex-shrink: 0; }
.contact-status-error { background: rgba(var(--bs-red-rgb), .08); color: var(--bs-red); border: 1px solid rgba(var(--bs-red-rgb), .18); }
.contact-status-error i { color: var(--bs-red); flex-shrink: 0; }

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.08);
}
.contact-info-card .contact-card-icon-wrap { margin-bottom: 0; flex-shrink: 0; }

.contact-faq-nudge {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  background: rgba(var(--bs-red-rgb), .05);
  border: 1px dashed rgba(var(--bs-red-rgb), .3);
  border-radius: 1.25rem;
  padding: 1.25rem;
  color: var(--bs-red);
}
.contact-faq-nudge > i { flex-shrink: 0; margin-top: .125rem; }
.contact-hero-sub { max-width: 38rem; }
.dot-sm { width: .75rem; height: .75rem; }
.text-white-85 { color: rgba(255,255,255,.85) !important; }
.wt-secure-copy { font-size: .8125rem; line-height: 1.55; color: rgba(var(--bs-dark-brand-rgb), .6); margin: 0; }
.tracking-wide { letter-spacing: .04em; }
.leading-loose { line-height: 1.7; }
.max-w-sm { max-width: 24rem; }

/* ---------- Task card (homepage marketplace preview) ---------- */
.task-card-cat-pill { font-size: .625rem; letter-spacing: .05em; }
.task-card-poster { font-size: .6875rem; }
.task-card-title { font-size: 1.0625rem; }
.task-card-desc { font-size: .8125rem; }
.task-card-meta { font-size: .6875rem; }
.task-card-meta-icon { width: .875rem; height: .875rem; color: var(--bs-red); flex-shrink: 0; }
.task-card-budget-label { font-size: .5625rem; letter-spacing: .05em; }
.task-card-lowbid { font-size: .6875rem; }
.task-card-lowbid-icon { width: .75rem; height: .75rem; margin-right: .125rem; }
.task-card-empty-copy { font-size: .75rem; max-width: 28rem; }
.task-card-empty-btn { font-size: .75rem; }

/* ---------- Testimonial card ---------- */
.testimonial-star { width: 1.125rem; height: 1.125rem; fill: var(--bs-accent); color: var(--bs-accent); }
.testimonial-quote { font-size: .875rem; }
.testimonial-avatar {
  width: 3rem; height: 3rem;
  border: 2px solid rgba(var(--bs-red-rgb), .1);
  background: rgba(var(--bs-red-rgb), .08);
}
.testimonial-name { font-size: .875rem; }
.testimonial-role-wrap { font-size: .6875rem; }
.testimonial-role { font-size: .5625rem; letter-spacing: .05em; }

/* ═══ Auth: verification & password pages ════════════════════════════════ */

/* Icon above the heading on status-style pages (verify email, OTP). */
.auth-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(var(--bs-red-rgb), .08);
  color: var(--bs-red);
}
.auth-icon-badge i, .auth-icon-badge svg { width: 1.5rem; height: 1.5rem; }

.auth-note {
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(var(--bs-dark-brand-rgb), .6);
  margin: 0 0 1.5rem;
}

/* A button that has to look like a link — logout and "start over" are POST
   routes, so they cannot be anchors. */
.auth-linkish {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--bs-red);
  cursor: pointer;
}
.auth-linkish:hover { text-decoration: underline; }
.auth-switch-form { margin: 0; }

/* ---------- OTP code entry ---------- */
.otp-digit-group {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.otp-digit {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--bs-dark-brand);
  background: #fff;
  border: 1px solid #e2e4e8;
  border-radius: .625rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.otp-digit:focus {
  border-color: var(--bs-red);
  box-shadow: 0 0 0 4px rgba(var(--bs-red-rgb), .1);
}
.otp-digit.is-invalid { border-color: var(--bs-red); }
@media (max-width: 400px) {
  .otp-digit-group { gap: .375rem; }
  .otp-digit { width: 2.5rem; height: 3rem; font-size: 1.125rem; }
}

.otp-resend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  margin-top: 1.25rem;
}
.otp-resend-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--bs-red);
  cursor: pointer;
}
.otp-resend-btn:hover:not(:disabled) { text-decoration: underline; }
.otp-resend-btn:disabled {
  color: rgba(var(--bs-dark-brand-rgb), .35);
  cursor: not-allowed;
}
.otp-timer {
  font-size: .75rem;
  color: rgba(var(--bs-dark-brand-rgb), .45);
  margin: 0;
}