/* =========================================================
   AskPerTask Homepage V2
   Theme file: askpertask-child/assets/css/homepage-v2.css
   Scope: prefixed with .aptv2- / #aptv2- to avoid collisions
           with ExpertHive / HivePress / Elementor styles.
   ========================================================= */

:root {
  /* Brand colours */
  --aptv2-green: #1FA34A;
  --aptv2-green-dark: #168238;
  --aptv2-green-light: #EAF7EE;
  --aptv2-blue: #2D6CDF;
  --aptv2-blue-light: #EAF1FD;
  --aptv2-navy: #1A2E52;
  --aptv2-navy-light: #E8EBF2;
  --aptv2-orange: #F2884B;
  --aptv2-orange-light: #FDEFE6;
  --aptv2-amber: #D97706;
  --aptv2-amber-dark: #B45309;
  --aptv2-amber-light: #FFFBEB;

  /* Text */
  --aptv2-text: #1A1A1A;
  --aptv2-text-muted: #6B7280;
  --aptv2-text-light: #9CA3AF;

  /* Surfaces & borders */
  --aptv2-bg: #FFFFFF;
  --aptv2-bg-soft: #F7F8F7;
  --aptv2-border: #E5E7EB;

  /* Shadows */
  --aptv2-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --aptv2-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
  --aptv2-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08);

  /* Radii */
  --aptv2-radius-sm: 8px;
  --aptv2-radius-md: 12px;
  --aptv2-radius-lg: 16px;
  --aptv2-radius-pill: 999px;

  /* Spacing scale */
  --aptv2-space-1: 4px;
  --aptv2-space-2: 8px;
  --aptv2-space-3: 12px;
  --aptv2-space-4: 16px;
  --aptv2-space-5: 24px;
  --aptv2-space-6: 32px;
  --aptv2-space-7: 48px;
  --aptv2-space-8: 64px;

  /* Footer transition spacing — deliberately larger than the normal
     inter-section padding above, so the page-end content doesn't run
     straight into the (separately themed) site footer. */
  --aptv2-footer-gap-desktop: 56px;
  --aptv2-footer-gap-tablet: 40px;
  --aptv2-footer-gap-mobile: 32px;

  /* Layout */
  --aptv2-container: 1200px;
  --aptv2-tap-min: 44px;
}

/* =========================================================
   Reset / base
   ========================================================= */

.aptv2 * {
  box-sizing: border-box;
}

.aptv2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--aptv2-text);
  background: var(--aptv2-bg);
  line-height: 1.5;
  overflow-x: hidden;
  /* Real cause of the footer/content spacing bug: ExpertHive's global
     CSS sets `html, body { height: 100% }` and `body { display: flex;
     flex-direction: column }`. As a flex child, this div's default
     flex-shrink:1 let the flexbox algorithm compress it to fit the
     100%-height body instead of growing past the viewport — and
     because `overflow-x: hidden` above with no explicit overflow-y
     causes the UA to auto-compute overflow-y as `auto` (CSS Overflow
     spec 3 §3), the compressed box became its own internal scroll
     container, trapping all homepage content instead of letting the
     page flow and scroll normally. flex-shrink: 0 stops the
     compression; overflow-y: visible keeps this div from ever
     creating that local scrollbar again. This is scoped to .aptv2
     only — body's own flex layout (used site-wide, including the
     real homepage) is untouched. */
  flex-shrink: 0;
  overflow-y: visible;
}

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

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

.aptv2__container {
  max-width: var(--aptv2-container);
  margin: 0 auto;
  padding: 0 var(--aptv2-space-5);
}

/* Wider variant for sections that should feel less hemmed-in than the
   standard 1200px content column, e.g. the Home Hub marketplace rails. */
.aptv2__container--wide {
  max-width: 1400px;
}

@media (max-width: 600px) {
  .aptv2__container {
    padding: 0 var(--aptv2-space-4);
  }
}

/* =========================================================
   Header
   ========================================================= */

.aptv2-header {
  border-bottom: 1px solid var(--aptv2-border);
  background: var(--aptv2-bg);
}

.aptv2-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aptv2-space-5);
  padding-top: var(--aptv2-space-4);
  padding-bottom: var(--aptv2-space-4);
}

.aptv2-header__logo {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-2);
  font-weight: 800;
  font-size: 1.4rem;
  white-space: nowrap;
}

/* APT-BRAND-LOGO-1A: real logo artwork (cropped icon, transparent bg) —
   constrained by height only so it scales crisply without ever growing
   large enough to push the wordmark/nav or increase header height. */
.aptv2-header__logo-mark {
  display: block;
  height: 36px;
  width: auto;
  max-width: 50px;
  flex-shrink: 0;
}

.aptv2-header__logo small {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--aptv2-text-muted);
  letter-spacing: 0.01em;
}

.aptv2-header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.aptv2-header__nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--aptv2-text);
  white-space: nowrap;
}

.aptv2-header__nav a:hover {
  color: var(--aptv2-green);
}

.aptv2-header__actions {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-3);
}

/* Legacy single-line location (kept for fallback) */
.aptv2-header__location {
  display: inline-flex;
  align-items: center;
  gap: var(--aptv2-space-1);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--aptv2-text);
  white-space: nowrap;
}

.aptv2-header__location svg {
  color: var(--aptv2-green);
}

/* Two-line location block (city + change link) */
.aptv2-header__location-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.aptv2-header__location-city {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--aptv2-text);
  white-space: nowrap;
}

.aptv2-header__location-city svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
}

.aptv2-header__location-change {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--aptv2-green-dark);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  line-height: 1;
}

.aptv2-header__location-change:hover {
  color: var(--aptv2-green);
}

/* "For Businesses" nav highlight pill */
.aptv2-header__nav-biz {
  color: var(--aptv2-blue) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  background: var(--aptv2-blue-light);
  border-radius: var(--aptv2-radius-pill);
  padding: 4px 12px !important;
}

.aptv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aptv2-space-2);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--aptv2-radius-md);
  border: 1px solid transparent;
  padding: var(--aptv2-space-3) var(--aptv2-space-5);
  cursor: pointer;
  min-height: var(--aptv2-tap-min);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aptv2-btn--ghost {
  background: var(--aptv2-bg);
  border-color: var(--aptv2-border);
  color: var(--aptv2-text);
}

.aptv2-btn--ghost:hover {
  border-color: var(--aptv2-text-muted);
}

.aptv2-btn--green {
  background: var(--aptv2-green);
  color: #fff;
}

.aptv2-btn--green:hover {
  background: var(--aptv2-green-dark);
}

.aptv2-btn--blue {
  background: var(--aptv2-blue);
  color: #fff;
}

.aptv2-btn--orange {
  background: var(--aptv2-orange);
  color: #fff;
}

.aptv2-btn--amber {
  background: var(--aptv2-amber);
  color: #fff;
}

.aptv2-btn--amber:hover {
  background: var(--aptv2-amber-dark);
  color: #fff;
  text-decoration: none;
}

.aptv2-btn--sm {
  padding: var(--aptv2-space-2) var(--aptv2-space-4);
  font-size: 0.85rem;
  min-height: 36px;
}

/* Mobile nav toggle */
.aptv2-header__toggle {
  display: none;
  background: none;
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-sm);
  width: var(--aptv2-tap-min);
  height: var(--aptv2-tap-min);
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  /* 6-item nav: tighten gap and hide secondary "List a Service" on medium
     screens so all nav links remain visible without horizontal overflow. */
  .aptv2-header__nav {
    gap: 10px;
  }
  .aptv2-header__actions .aptv2-btn:first-child {
    display: none;
  }
}

@media (max-width: 900px) {
  .aptv2-header__nav {
    display: none;
  }

  /* Hide both old and new location UI on mobile — icon + toggle suffice */
  .aptv2-header__actions .aptv2-header__location-text {
    display: none;
  }

  .aptv2-header__location-block {
    display: none;
  }

  /* Hide "List a Service" on mobile — "Post a Request" is the primary CTA */
  .aptv2-header__actions .aptv2-btn:first-child {
    display: none;
  }

  .aptv2-header__toggle {
    display: inline-flex;
  }

  /* Mobile menu drawer */
  .aptv2-header.is-open .aptv2-header__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aptv2-space-4);
    width: 100%;
    padding: var(--aptv2-space-4) 0 0;
    justify-content: flex-start;
  }

  .aptv2-header.is-open .aptv2-header__inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  /* Compact header on very small screens (HDR-1A). Under real mobile
     viewport conditions (verified via CDP device-metrics emulation,
     content widths never actually exceeded the viewport at 320-500px),
     the header already fits without cropping. flex-wrap here is a
     defensive fallback only — if the actions group (Post a Request +
     Log in/Account + toggle) ever gets wider than available space (long
     translated strings, larger accessibility font settings, etc.), it
     drops to its own row instead of overflowing/cropping the toggle. */
  .aptv2-header__inner {
    flex-wrap: wrap;
    row-gap: var(--aptv2-space-2);
    gap: var(--aptv2-space-2);
  }
  .aptv2-header__actions {
    gap: 6px;
    margin-left: auto;
  }
  .aptv2-header__logo {
    font-size: 1rem;
  }
  .aptv2-header__logo-mark {
    height: 28px;
    max-width: 40px;
  }
  .aptv2-header__logo small {
    display: none;
  }
  .aptv2-header .aptv2-btn--sm {
    padding: 6px 8px;
  }
  .aptv2-header__toggle {
    width: 36px;
    height: 36px;
  }
}

/* =========================================================
   Location notice bar — hidden on Homepage V2 per mockup.
   Location is shown inline in the header instead.
   ========================================================= */

.aptv2-location-bar {
  display: none;
  background: var(--aptv2-green-light);
  border-bottom: 1px solid var(--aptv2-border);
}

.aptv2-location-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aptv2-space-4);
  padding-top: var(--aptv2-space-3);
  padding-bottom: var(--aptv2-space-3);
}

.aptv2-location-bar__text {
  display: flex;
  align-items: flex-start;
  gap: var(--aptv2-space-2);
}

.aptv2-location-bar__text svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
  margin-top: 2px;
}

.aptv2-location-bar__title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 2px;
}

.aptv2-location-bar__title strong {
  color: var(--aptv2-green-dark);
}

.aptv2-location-bar__desc {
  font-size: 0.85rem;
  color: var(--aptv2-text-muted);
  margin: 0;
}

.aptv2-location-bar .aptv2-btn {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .aptv2-location-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .aptv2-location-bar .aptv2-btn {
    align-self: flex-start;
  }
}

/* =========================================================
   Hero
   ========================================================= */

.aptv2-hero {
  position: relative;
  padding-top: var(--aptv2-space-5);
  padding-bottom: var(--aptv2-space-6);
  overflow: visible; /* horizontal bleed clipped by .aptv2's overflow-x:hidden; visible here so the request-type popover is not cut off at the hero boundary */
  background: linear-gradient(180deg, var(--aptv2-green-light) 0%, var(--aptv2-bg) 65%);
}

.aptv2-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--aptv2-space-4);
  align-items: center;
}

.aptv2-hero__content h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--aptv2-space-4);
}

.aptv2-hero__content h1 .aptv2-accent {
  color: var(--aptv2-green);
}

.aptv2-hero__content p {
  font-size: 1.1rem;
  color: var(--aptv2-text-muted);
  max-width: 40ch;
  margin: 0 0 var(--aptv2-space-4);
}

/* Social proof strip beneath hero description */
.aptv2-hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-3);
  margin-top: var(--aptv2-space-2);
  margin-bottom: var(--aptv2-space-4);
}

.aptv2-hero__sp-avatars {
  display: flex;
  flex-shrink: 0;
}

.aptv2-hero__sp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0;
  margin-left: -10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.aptv2-hero__sp-avatar:first-child { margin-left: 0; }
.aptv2-hero__sp-avatar--1 { background: var(--aptv2-green); }
.aptv2-hero__sp-avatar--2 { background: var(--aptv2-blue); }
.aptv2-hero__sp-avatar--3 { background: var(--aptv2-orange); }
.aptv2-hero__sp-avatar--4 { background: #7C4FD0; }

.aptv2-hero__sp-text {
  font-size: 0.85rem;
  color: var(--aptv2-text);
  font-weight: 600;
  line-height: 1.4;
  max-width: 32ch;
}

.aptv2-hero__quick-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.875rem;
  color: var(--aptv2-text-muted);
}

.aptv2-hero__quick-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--aptv2-blue);
  font-weight: 600;
  text-decoration: none;
}

.aptv2-hero__quick-link:hover { text-decoration: underline; }

.aptv2-hero__quick-sep {
  color: var(--aptv2-border);
  user-select: none;
}

.aptv2-hero__visual {
  position: relative;
  align-self: stretch; /* image column still fills full hero height; text column is centred */
  /* No border-radius — image acts as a full right panel */
  border-radius: 0;
  overflow: hidden;
  max-width: 100%;
  aspect-ratio: unset;
  /* Stretch to fill full section height (covers hero top+bottom padding) */
  min-height: 500px;
  max-height: none;
  margin-top: calc(-1 * var(--aptv2-space-5));
  margin-bottom: calc(-1 * var(--aptv2-space-6));
  background: var(--aptv2-bg-soft);
  /* Left shadow creates depth against the text column */
  box-shadow: -10px 0 40px rgba(16, 24, 40, 0.1);
  /* True viewport-edge bleed: cancels container padding + outer centering margin */
  margin-right: calc(-1 * (var(--aptv2-space-5) + max(0px, (100vw - var(--aptv2-container)) / 2)));
}

.aptv2-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.aptv2-safety-card {
  position: absolute;
  bottom: var(--aptv2-space-5);
  left: var(--aptv2-space-5);
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--aptv2-radius-md);
  box-shadow: 0 8px 32px rgba(16, 24, 40, 0.14), 0 2px 8px rgba(16, 24, 40, 0.08);
  padding: var(--aptv2-space-4) var(--aptv2-space-5);
  max-width: calc(100% - var(--aptv2-space-5) * 2);
  width: max-content;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.aptv2-safety-card__title {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-2);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 var(--aptv2-space-3);
}

.aptv2-safety-card__title svg {
  color: var(--aptv2-green);
}

.aptv2-safety-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aptv2-space-2);
}

.aptv2-safety-card li {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-2);
  font-size: 0.85rem;
}

.aptv2-safety-card li svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .aptv2-hero {
    padding-top: var(--aptv2-space-4);
  }

  .aptv2-hero__inner {
    grid-template-columns: 1fr;
  }

  .aptv2-hero__visual {
    aspect-ratio: 16 / 10;
    min-height: unset;
    max-height: 340px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: var(--aptv2-radius-lg);
    box-shadow: var(--aptv2-shadow-lg);
  }

  /* APT-HOME-HUB-2C-FIX4: the live-card becomes position:static (stacks
     below the map) on mobile — see .aptv2-live-card's own mobile rule
     further down — but with the base overflow:hidden still in force
     here, that stacked card was being clipped away entirely by this
     element's fixed max-height, making it invisible instead of stacked.
     .aptv2-hero-map (inherited border-radius, its own overflow:hidden)
     still clips the map image itself to the same rounded shape, so this
     only affects content that overflows *below* the image, i.e. the
     stacked card. */
  .aptv2-hero__visual--map {
    overflow: visible;
  }

  .aptv2-safety-card {
    position: static;
    margin-top: var(--aptv2-space-4);
    max-width: none;
    width: auto;
  }
}

/* =========================================================
   Action hub (Section 4 — HOME-PATHS-1A)
   ========================================================= */

.aptv2-action-hub {
  padding: var(--aptv2-space-8) 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(31, 163, 74, 0.08), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(45, 108, 223, 0.08), transparent 30%),
    var(--aptv2-bg);
}

.aptv2-action-hub__header {
  max-width: 760px;
  margin: 0 auto var(--aptv2-space-6);
  text-align: center;
}

.aptv2-action-hub__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 auto var(--aptv2-space-3);
  padding: 8px 13px;
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aptv2-action-hub h2 {
  margin: 0 0 var(--aptv2-space-4);
  color: var(--aptv2-text);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
}

.aptv2-action-hub__header p {
  margin: 0;
  color: var(--aptv2-text-muted);
  font-size: 18px;
  line-height: 1.65;
}

.aptv2-action-hub__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--aptv2-space-4);
}

.aptv2-action-card {
  min-height: 245px;
  display: flex;
  flex-direction: column;
  padding: var(--aptv2-space-5);
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--aptv2-bg-soft) 100%);
  box-shadow: var(--aptv2-shadow-md);
}

.aptv2-action-card--map {
  background:
    radial-gradient(circle at 86% 12%, rgba(45, 108, 223, 0.13), transparent 32%),
    linear-gradient(145deg, #f7fbff 0%, #fff 100%);
}

.aptv2-action-card--request {
  background:
    radial-gradient(circle at 86% 12%, rgba(242, 136, 75, 0.13), transparent 32%),
    linear-gradient(145deg, #fff8f2 0%, #fff 100%);
}

.aptv2-action-card--market {
  background:
    radial-gradient(circle at 86% 12%, rgba(217, 119, 6, 0.14), transparent 32%),
    linear-gradient(145deg, #fffdf2 0%, #fff 100%);
}

.aptv2-action-card--services {
  background:
    radial-gradient(circle at 86% 12%, rgba(31, 163, 74, 0.13), transparent 32%),
    linear-gradient(145deg, #f4fff8 0%, #fff 100%);
}

.aptv2-action-card--skills {
  background:
    radial-gradient(circle at 86% 12%, rgba(124, 58, 237, 0.12), transparent 32%),
    linear-gradient(145deg, #fbf8ff 0%, #fff 100%);
}

.aptv2-action-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: var(--aptv2-space-4);
  border-radius: var(--aptv2-radius-md);
  background: #fff;
  border: 1px solid var(--aptv2-border);
  font-size: 27px;
  box-shadow: var(--aptv2-shadow-sm);
}

.aptv2-action-card h3 {
  margin: 0 0 var(--aptv2-space-2);
  color: var(--aptv2-text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.aptv2-action-card p {
  margin: 0 0 var(--aptv2-space-5);
  color: var(--aptv2-text-muted);
  font-size: 15px;
  line-height: 1.58;
}

.aptv2-action-card a {
  width: fit-content;
  margin-top: auto;
  color: var(--aptv2-blue);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.aptv2-action-card a:hover {
  text-decoration: underline;
}

@media (max-width: 1180px) {
  .aptv2-action-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aptv2-action-card--skills {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .aptv2-action-hub {
    padding: var(--aptv2-space-7) 0;
  }

  .aptv2-action-hub__header {
    text-align: left;
  }

  .aptv2-action-hub__eyebrow {
    margin-left: 0;
  }

  .aptv2-action-hub h2 {
    font-size: 36px;
  }

  .aptv2-action-hub__header p {
    font-size: 16px;
  }

  .aptv2-action-hub__grid {
    grid-template-columns: 1fr;
  }

  .aptv2-action-card,
  .aptv2-action-card--skills {
    grid-column: auto;
    min-height: 0;
    padding: var(--aptv2-space-4);
  }
}

/* --- Need Help expandable area --- */

.aptv2-needhelp__panel {
  border-top: 0 solid var(--aptv2-border);
  margin-top: 0;
  padding-top: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease, border-top-width 0.3s ease;
}

.aptv2-needhelp__panel[data-expanded="true"] {
  border-top-width: 1px;
  margin-top: var(--aptv2-space-2);
  padding-top: var(--aptv2-space-3);
  max-height: 600px;
  opacity: 1;
}

.aptv2-needhelp__panel-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 var(--aptv2-space-3);
}

.aptv2-needhelp__option {
  display: flex;
  align-items: flex-start;
  gap: var(--aptv2-space-3);
  width: 100%;
  text-align: left;
  background: var(--aptv2-bg-soft);
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-md);
  padding: var(--aptv2-space-3) var(--aptv2-space-4);
  margin-bottom: var(--aptv2-space-2);
  cursor: pointer;
  min-height: var(--aptv2-tap-min);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.aptv2-needhelp__option:hover,
.aptv2-needhelp__option:focus-visible {
  border-color: var(--aptv2-green);
  background: #fff;
}

.aptv2-needhelp__option--recommended {
  border-color: var(--aptv2-green);
  background: var(--aptv2-green-light);
}

.aptv2-needhelp__option--recommended .aptv2-needhelp__option-icon {
  color: var(--aptv2-green);
  border-color: var(--aptv2-green);
}

.aptv2-needhelp__option--urgent {
  border-style: dashed;
}

.aptv2-needhelp__option-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--aptv2-radius-sm);
  background: #fff;
  border: 1px solid var(--aptv2-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--aptv2-text-muted);
}

.aptv2-needhelp__option-body {
  flex: 1;
}

.aptv2-needhelp__option-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--aptv2-space-2);
  font-weight: 700;
  font-size: 0.95rem;
}

.aptv2-needhelp__option-soon {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--aptv2-text-muted);
  background: var(--aptv2-bg-soft);
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-pill);
  padding: 2px var(--aptv2-space-2);
}

.aptv2-needhelp__option-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--aptv2-radius-pill);
  padding: 2px var(--aptv2-space-2);
}

.aptv2-needhelp__option-badge--today {
  color: #fff;
  background: var(--aptv2-green);
}

.aptv2-needhelp__option-badge--soon {
  color: var(--aptv2-text-muted);
  background: var(--aptv2-bg-soft);
  border: 1px solid var(--aptv2-border);
}

.aptv2-needhelp__option p {
  margin: var(--aptv2-space-1) 0 0;
  font-size: 0.85rem;
  color: var(--aptv2-text-muted);
}

.aptv2-needhelp__option-arrow {
  color: var(--aptv2-text-light);
  flex-shrink: 0;
  align-self: center;
}

.aptv2-needhelp__helper {
  font-size: 0.8rem;
  color: var(--aptv2-text-muted);
  text-align: center;
  margin: var(--aptv2-space-2) 0 0;
}

.aptv2-needhelp__helper strong {
  color: var(--aptv2-green-dark);
}

/* ── Post a Request — CTA wrapper + type-choice popover ── */

.aptv2-needhelp__cta-wrap {
  position: relative;
  margin-top: auto;
}

.aptv2-needhelp__cta-wrap .aptv2-btn {
  width: 100%;
  margin-top: 0;
}

.aptv2-needhelp__chevron {
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.aptv2-needhelp__cta-wrap [aria-expanded="true"] .aptv2-needhelp__chevron {
  transform: rotate(180deg);
}

.aptv2-needhelp__popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-md);
  box-shadow: var(--aptv2-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.aptv2-needhelp__popover[data-expanded="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.aptv2-needhelp__popover-opt {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-3);
  padding: var(--aptv2-space-4) var(--aptv2-space-4);
  text-decoration: none;
  color: var(--aptv2-text);
  border-bottom: 1px solid var(--aptv2-border);
  transition: background-color 0.12s ease;
}

.aptv2-needhelp__popover-opt:last-child {
  border-bottom: none;
}

.aptv2-needhelp__popover-opt:hover,
.aptv2-needhelp__popover-opt:focus-visible {
  background: var(--aptv2-bg-soft);
  outline: none;
}

.aptv2-needhelp__popover-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--aptv2-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aptv2-needhelp__popover-opt:first-child .aptv2-needhelp__popover-icon {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
}

.aptv2-needhelp__popover-opt:last-child .aptv2-needhelp__popover-icon {
  background: var(--aptv2-green-light);
  color: var(--aptv2-green);
}

.aptv2-needhelp__popover-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aptv2-needhelp__popover-body strong {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.aptv2-needhelp__popover-body span {
  font-size: 0.78rem;
  color: var(--aptv2-text-muted);
  line-height: 1.3;
}

.aptv2-needhelp__popover-arrow {
  flex-shrink: 0;
  color: var(--aptv2-text-light);
}

/* =========================================================
   Help Needed Near You (Section 5)
   ========================================================= */

.aptv2-requests {
  padding-top: var(--aptv2-space-5);
  padding-bottom: var(--aptv2-space-6);
}

.aptv2-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--aptv2-space-4);
  gap: var(--aptv2-space-4);
}

.aptv2-section-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
}

.aptv2-section-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--aptv2-space-1);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--aptv2-green-dark);
  white-space: nowrap;
}

.aptv2-request-grid {
  display: grid;
  /* Real request count can be lower than 5 (esp. early on/low-traffic
     areas). A fixed 5-column 1fr grid stretched to fill the row even
     with 1 real card, leaving a large empty void before the dark map
     section below. minmax's fixed (non-1fr) upper bound means empty
     tracks collapse to zero width with auto-fit instead of stretching
     the real card(s) to fill the leftover space, so the grid's own
     width tracks the number of real cards actually rendered. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: start;
  gap: var(--aptv2-space-4);
}

.aptv2-request-card {
  background: #fff;
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  box-shadow: var(--aptv2-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.aptv2-request-card:hover,
.aptv2-request-card:focus-visible {
  box-shadow: var(--aptv2-shadow-lg);
  border-color: var(--aptv2-text-light);
  transform: translateY(-2px);
}

.aptv2-request-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--aptv2-bg-soft);
}

.aptv2-request-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aptv2-request-card__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aptv2-bg-soft);
}

/* Category icon rendered as inline SVG — passed via style="background:" from PHP */
.aptv2-request-card__fallback svg {
  width: 52px;
  height: 52px;
  color: rgba(0, 0, 0, 0.28);
  stroke-width: 1.5;
}

.aptv2-request-card__fallback img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.6;
}

.aptv2-request-card__badge {
  position: absolute;
  top: var(--aptv2-space-2);
  left: var(--aptv2-space-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px var(--aptv2-space-2);
  border-radius: var(--aptv2-radius-sm);
  color: #fff;
}

.aptv2-request-card__badge--new      { background: var(--aptv2-blue); }
.aptv2-request-card__badge--urgent   { background: #DC2626; }
.aptv2-request-card__badge--today    { background: #EA580C; }
.aptv2-request-card__badge--tomorrow { background: #2563EB; }
.aptv2-request-card__badge--this-week{ background: #0891B2; }
.aptv2-request-card__badge--flexible { background: #6B7280; }

/* Project-badge chips (open_to_offers / ready_to_start / flexible_budget) */
.aptv2-request-card__project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.aptv2-request-card__project-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--aptv2-radius-pill);
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #BBF7D0;
  line-height: 1.4;
}

.aptv2-request-card__category-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--aptv2-radius-pill);
  background: #F3F4F6;
  color: #374151;
  border: 1px solid #E5E7EB;
  line-height: 1.4;
  margin-top: 2px;
}

.aptv2-request-card__body {
  padding: var(--aptv2-space-3) var(--aptv2-space-3) var(--aptv2-space-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.aptv2-request-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.3;
}

.aptv2-request-card__location {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-1);
  font-size: 0.8rem;
  color: var(--aptv2-text-muted);
}

.aptv2-request-card__location svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
}

.aptv2-request-card__budget {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--aptv2-green-dark);
  margin-top: var(--aptv2-space-1);
}

.aptv2-request-card__time {
  font-size: 0.75rem;
  color: var(--aptv2-text-light);
}

.aptv2-request-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--aptv2-space-2);
  border-top: 1px solid var(--aptv2-border);
}

.aptv2-request-card__avatars {
  display: flex;
}

.aptv2-request-card__avatars img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  object-fit: cover;
}

.aptv2-request-card__avatars img:first-child {
  margin-left: 0;
}

.aptv2-request-card__offers {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--aptv2-text-muted);
}

.aptv2-request-card__offers--cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--aptv2-green-dark);
}

/* Request type badge — Quick Task / Service Request */
.aptv2-request-card__type {
  margin-bottom: var(--aptv2-space-2);
}

.aptv2-request-card__type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px 3px 6px;
  border-radius: var(--aptv2-radius-pill);
  line-height: 1;
}

.aptv2-request-card__type-badge--quick {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #1e40af;
  border: 1px solid rgba(59,130,246,0.28);
}

.aptv2-request-card__type-badge--standard {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  color: #166534;
  border: 1px solid rgba(34,197,94,0.28);
}

/* "Waiting for offers" text for Service Request */
.aptv2-request-card__waiting {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--aptv2-text-muted);
  font-style: italic;
}

/* Type-specific CTA buttons in card footer */
.aptv2-request-card__cta-btn {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--aptv2-radius-pill);
  white-space: nowrap;
  margin-left: auto;
}

.aptv2-request-card__cta-btn--quick {
  background: var(--aptv2-blue);
  color: #fff;
}

.aptv2-request-card__cta-btn--standard {
  background: var(--aptv2-green);
  color: #fff;
}

@media (max-width: 1100px) {
  .aptv2-request-grid {
    /* Same auto-fit collapse as the base rule above — keeps the
       narrower 1100px breakpoint from reintroducing the empty-void
       issue when fewer than 3 real cards exist at this width. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: start;
  }
}

@media (max-width: 700px) {
  .aptv2-request-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--aptv2-space-2);
    -webkit-overflow-scrolling: touch;
  }

  .aptv2-request-grid::-webkit-scrollbar {
    display: none;
  }

  .aptv2-request-card {
    scroll-snap-align: start;
  }
}

/* =========================================================
   Badge education (Section 6) — horizontal strip redesign
   ========================================================= */

.aptv2-badges {
  padding-bottom: var(--aptv2-space-6);
  background: var(--aptv2-bg-soft);
  padding-top: var(--aptv2-space-5);
}

/* Section header */
.aptv2-badges__header {
  text-align: center;
  margin-bottom: var(--aptv2-space-4);
}

.aptv2-badges__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aptv2-green);
  margin: 0 0 var(--aptv2-space-2);
}

.aptv2-badges__header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  color: var(--aptv2-text);
}

/* Premium horizontal capsule chips */
.aptv2-badges__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--aptv2-space-3);
}

.aptv2-badge-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: auto;
  text-align: left;
  padding: 10px 18px 10px 10px;
  border-radius: var(--aptv2-radius-pill);
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.aptv2-badge-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.aptv2-badge-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
}

.aptv2-badge-item__label {
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--aptv2-text);
  line-height: 1.2;
}

.aptv2-badge-item__soon {
  font-size: 0.63rem;
  color: var(--aptv2-text-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0,0,0,0.06);
  border-radius: var(--aptv2-radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
  margin-left: 2px;
}

/* Per-chip gradient background + border + icon colour */
.aptv2-badge-item--verified_profile  { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: rgba(34,197,94,0.22); }
.aptv2-badge-item--quick_responder   { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-color: rgba(59,130,246,0.22); }
.aptv2-badge-item--top_rated         { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: rgba(245,158,11,0.22); }
.aptv2-badge-item--trusted_local     { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); border-color: rgba(20,184,166,0.22); }
.aptv2-badge-item--recommended       { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); border-color: rgba(139,92,246,0.22); }
.aptv2-badge-item--id_checked        { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); border-color: rgba(99,102,241,0.22); }
.aptv2-badge-item--insured           { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-color: rgba(249,115,22,0.22); }
.aptv2-badge-item--available_today   { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); border-color: rgba(236,72,153,0.22); }

/* Per-badge-type icon background colours (circle inside chip) */
.aptv2-badge-item--verified_profile  .aptv2-badge-item__icon { background: #d1fae5; color: var(--aptv2-green-dark); }
.aptv2-badge-item--quick_responder   .aptv2-badge-item__icon { background: #bfdbfe; color: #1e40af; }
.aptv2-badge-item--top_rated         .aptv2-badge-item__icon { background: #fde68a; color: #92400e; }
.aptv2-badge-item--trusted_local     .aptv2-badge-item__icon { background: #99f6e4; color: #065f46; }
.aptv2-badge-item--recommended       .aptv2-badge-item__icon { background: #ddd6fe; color: #5b21b6; }
.aptv2-badge-item--id_checked        .aptv2-badge-item__icon { background: #c7d2fe; color: #3730a3; }
.aptv2-badge-item--insured           .aptv2-badge-item__icon { background: #fed7aa; color: #9a3412; }
.aptv2-badge-item--available_today   .aptv2-badge-item__icon { background: #fbcfe8; color: #9d174d; }

/* Bottom note */
.aptv2-badges__note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--aptv2-text-muted);
  margin: var(--aptv2-space-4) auto 0;
  max-width: 60ch;
}

/* Legacy grid classes — kept so no other page breaks if somehow loaded */
.aptv2-badges__panel { background: var(--aptv2-bg-soft); border-radius: var(--aptv2-radius-lg); padding: var(--aptv2-space-6) var(--aptv2-space-5); text-align: center; }
.aptv2-badges__panel h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 var(--aptv2-space-6); }
.aptv2-badges__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--aptv2-space-4); margin-bottom: var(--aptv2-space-5); }
.aptv2-badge { display: flex; flex-direction: column; align-items: center; gap: var(--aptv2-space-2); background: #fff; border-radius: var(--aptv2-radius-md); box-shadow: var(--aptv2-shadow-sm); padding: var(--aptv2-space-4); }
.aptv2-badge__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aptv2-badge__label { font-weight: 700; font-size: 0.85rem; text-align: center; }
.aptv2-badge--verified_profile .aptv2-badge__icon  { background: var(--aptv2-green-light);   color: var(--aptv2-green-dark); }
.aptv2-badge--quick_responder  .aptv2-badge__icon  { background: var(--aptv2-blue-light);    color: var(--aptv2-blue); }
.aptv2-badge--top_rated        .aptv2-badge__icon  { background: #FEF3E2;                    color: #B8740A; }
.aptv2-badge--trusted_local    .aptv2-badge__icon  { background: #E1F5F3;                    color: #0E8074; }
.aptv2-badge--recommended      .aptv2-badge__icon  { background: #F1ECFB;                    color: #7C4FD0; }
.aptv2-badge--id_checked       .aptv2-badge__icon  { background: #E9EAFB;                    color: #4F4FCB; }
.aptv2-badge--insured          .aptv2-badge__icon  { background: var(--aptv2-orange-light);  color: var(--aptv2-orange); }
.aptv2-badge--available_today  .aptv2-badge__icon  { background: #FBE7EF;                    color: #C24A7C; }
.aptv2-badges__footer { display: flex; flex-direction: column; align-items: center; gap: var(--aptv2-space-1); }
.aptv2-badges__footer p { margin: 0; font-size: 0.85rem; color: var(--aptv2-text-muted); max-width: 60ch; }
.aptv2-badges__footer-note { font-size: 0.78rem; color: var(--aptv2-text-light); }

@media (max-width: 700px) {
  .aptv2-badges__grid { grid-template-columns: repeat(2, 1fr); }
  .aptv2-badges__strip { gap: var(--aptv2-space-2) var(--aptv2-space-3); }
  .aptv2-badge-item { padding: 8px 14px 8px 8px; }
  .aptv2-badge-item__icon { width: 34px; height: 34px; }
  .aptv2-badge-item__label { font-size: 0.8rem; }
}

/* =========================================================
   Recommended local professionals (Section 7)
   ========================================================= */

.aptv2-pros {
  padding-bottom: var(--aptv2-space-5);
}

.aptv2-pros__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--aptv2-space-4);
}

.aptv2-pro-card {
  background: #fff;
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  box-shadow: var(--aptv2-shadow-sm);
  padding: var(--aptv2-space-5) var(--aptv2-space-4) var(--aptv2-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--aptv2-space-3);
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.aptv2-pro-card:hover,
.aptv2-pro-card:focus-visible {
  box-shadow: var(--aptv2-shadow-lg);
  border-color: var(--aptv2-text-light);
  transform: translateY(-2px);
}

.aptv2-pro-card__header {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-3);
}

.aptv2-pro-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--aptv2-border);
}

.aptv2-pro-card__name {
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}

.aptv2-pro-card__category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--aptv2-blue);
  background: var(--aptv2-blue-light);
  border-radius: var(--aptv2-radius-pill);
  padding: 2px 8px;
  margin-top: 4px;
}

.aptv2-pro-card__location {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-1);
  font-size: 0.8rem;
  color: var(--aptv2-text-muted);
  margin: 2px 0 0;
}

.aptv2-pro-card__location svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
}

.aptv2-pro-card__specialty {
  font-size: 0.78rem;
  color: var(--aptv2-text-muted);
  margin: 0;
  line-height: 1.4;
}

.aptv2-pro-card__rating {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-1);
  font-size: 0.85rem;
  font-weight: 700;
}

.aptv2-pro-card__rating svg {
  color: #F5A623;
}

.aptv2-pro-card__rating span {
  color: var(--aptv2-text-muted);
  font-weight: 400;
}

.aptv2-pro-card__badges {
  display: flex;
  gap: var(--aptv2-space-2);
  flex-wrap: wrap;
}

.aptv2-pro-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--aptv2-radius-pill);
  padding: 3px var(--aptv2-space-2);
}

.aptv2-pro-card__badge--gold {
  background: #FEF3E2;
  color: #B8740A;
}

.aptv2-pro-card__badge--blue {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
}

.aptv2-pro-card__badge--purple {
  background: #F1ECFB;
  color: #7C4FD0;
}

/* Constrain the icon SVG inside a pro card badge chip */
.aptv2-pro-card__badge svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.aptv2-pro-card__availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--aptv2-green-dark);
  background: var(--aptv2-green-light);
  border-radius: var(--aptv2-radius-pill);
  padding: 3px 10px;
}

.aptv2-pro-card__availability::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aptv2-green);
  display: inline-block;
  flex-shrink: 0;
}

.aptv2-pro-card__view {
  display: inline-flex;
  align-items: center;
  gap: var(--aptv2-space-1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aptv2-blue);
  margin-top: auto;
  padding-top: var(--aptv2-space-3);
  border-top: 1px solid var(--aptv2-border);
}

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

@media (max-width: 560px) {
  .aptv2-pros__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   How it works (Section 8) + Account CTA (Section 9)
   ========================================================= */

.aptv2-bottom {
  /* Final section before the footer — kept in normal document flow,
     no fixed/sticky/absolute positioning. This is the dedicated
     breathing-room gap requested between the account CTA / How It
     Works content and the start of the site footer. */
  padding-bottom: var(--aptv2-footer-gap-desktop);
}

@media (max-width: 900px) {
  .aptv2-bottom {
    padding-bottom: var(--aptv2-footer-gap-tablet);
  }
}

@media (max-width: 600px) {
  .aptv2-bottom {
    padding-bottom: var(--aptv2-footer-gap-mobile);
  }
}

.aptv2-bottom__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aptv2-space-5);
}

.aptv2-howitworks h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 var(--aptv2-space-6);
  text-align: center;
}

.aptv2-howitworks__steps {
  display: flex;
  align-items: flex-start;
  gap: var(--aptv2-space-4);
}

.aptv2-howitworks__step {
  flex: 1;
  text-align: center;
  position: relative;
}

.aptv2-howitworks__step-num {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--aptv2-border);
  color: var(--aptv2-text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  margin: 0 auto var(--aptv2-space-2);
  letter-spacing: 0;
}

.aptv2-howitworks__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto var(--aptv2-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aptv2-howitworks__step:nth-child(1) .aptv2-howitworks__icon {
  background: var(--aptv2-green-light);
  color: var(--aptv2-green);
}

.aptv2-howitworks__step:nth-child(2) .aptv2-howitworks__icon {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
}

.aptv2-howitworks__step:nth-child(3) .aptv2-howitworks__icon {
  background: var(--aptv2-orange-light);
  color: var(--aptv2-orange);
}

.aptv2-howitworks__step:nth-child(4) .aptv2-howitworks__icon {
  background: var(--aptv2-green-light);
  color: var(--aptv2-green);
}

.aptv2-howitworks__step h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 var(--aptv2-space-1);
}

.aptv2-howitworks__step p {
  font-size: 0.8rem;
  color: var(--aptv2-text-muted);
  margin: 0;
}

.aptv2-howitworks__connector {
  position: absolute;
  top: 28px;
  right: -50%;
  width: 100%;
  border-top: 2px dashed var(--aptv2-border);
  z-index: 0;
}

.aptv2-howitworks__step:last-child .aptv2-howitworks__connector {
  display: none;
}

.aptv2-cta {
  background: linear-gradient(135deg, var(--aptv2-green-light), #f0f7ff);
  border-radius: var(--aptv2-radius-lg);
  padding: var(--aptv2-space-6) var(--aptv2-space-7);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--aptv2-space-6);
  border: 1px solid var(--aptv2-border);
}

.aptv2-cta__text {
  flex: 1;
}

.aptv2-cta h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 var(--aptv2-space-2);
}

.aptv2-cta p {
  font-size: 0.9rem;
  color: var(--aptv2-text-muted);
  margin: 0;
}

.aptv2-cta__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--aptv2-space-3);
  flex-shrink: 0;
}

.aptv2-cta__actions {
  display: flex;
  gap: var(--aptv2-space-3);
}

.aptv2-cta__actions .aptv2-btn {
  white-space: nowrap;
}

.aptv2-cta__note {
  font-size: 0.8rem;
  color: var(--aptv2-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.aptv2-cta__note svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .aptv2-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--aptv2-space-5);
  }

  .aptv2-cta__side {
    align-items: flex-start;
    width: 100%;
  }

  .aptv2-cta__actions {
    width: 100%;
  }

  .aptv2-cta__actions .aptv2-btn {
    flex: 1;
  }
}

@media (max-width: 900px) {
  .aptv2-howitworks__steps {
    flex-direction: column;
    align-items: stretch;
    gap: var(--aptv2-space-5);
  }

  .aptv2-howitworks__step {
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--aptv2-space-3);
  }

  .aptv2-howitworks__icon {
    margin: 0;
    flex-shrink: 0;
  }

  .aptv2-howitworks__connector {
    display: none;
  }
}

/* =========================================================
   Section spacing helper
   ========================================================= */

.aptv2-section-pt {
  padding-top: var(--aptv2-space-6);
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .aptv2-needhelp__panel,
  .aptv2-btn,
  .aptv2-needhelp__option,
  .aptv2-needhelp__popover,
  .aptv2-needhelp__chevron {
    transition: none !important;
  }
}

/* =========================================================
   Empty states
   Friendly, non-error-looking placeholders for sections with
   no real data to show (no requests / no professionals).
   ========================================================= */

.aptv2-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aptv2-space-3);
  text-align: center;
  background: var(--aptv2-bg-soft);
  border: 1px dashed var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  padding: var(--aptv2-space-7) var(--aptv2-space-5);
}

.aptv2-empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--aptv2-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--aptv2-shadow-sm);
}

.aptv2-empty-state p {
  margin: 0;
  max-width: 42ch;
  color: var(--aptv2-text-muted);
  font-size: 0.95rem;
}

/* =========================================================
   Map-first explainer section (HOME-MAP-1B)
   ========================================================= */

.aptv2-map-spine {
  padding: var(--aptv2-space-8) 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(31, 163, 74, 0.10), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(45, 108, 223, 0.10), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.aptv2-map-spine__inner {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 46px;
  align-items: center;
}

.aptv2-map-spine__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 var(--aptv2-space-4);
  padding: 8px 13px;
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-green-light);
  color: var(--aptv2-green-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aptv2-map-spine h2 {
  max-width: 560px;
  margin: 0 0 18px;
  color: var(--aptv2-text);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.aptv2-map-spine__lead {
  max-width: 620px;
  margin: 0 0 var(--aptv2-space-6);
  color: var(--aptv2-text-muted);
  font-size: 18px;
  line-height: 1.65;
}

.aptv2-map-spine__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.aptv2-map-spine__btn {
  min-height: var(--aptv2-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: var(--aptv2-radius-lg);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.aptv2-map-spine__btn--primary {
  background: var(--aptv2-green);
  color: #fff;
  box-shadow: 0 14px 28px rgba(31, 163, 74, 0.22);
}

.aptv2-map-spine__btn--primary:hover {
  background: var(--aptv2-green-dark);
  color: #fff;
}

.aptv2-map-spine__btn--secondary {
  background: var(--aptv2-bg);
  color: var(--aptv2-text);
  border: 1px solid var(--aptv2-border);
}

.aptv2-map-spine__btn--secondary:hover {
  background: var(--aptv2-bg-soft);
  color: var(--aptv2-text);
}

.aptv2-map-spine__visual {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--aptv2-space-5);
  align-items: stretch;
}

.aptv2-map-spine__map-card {
  overflow: hidden;
  min-height: 390px;
  border: 1px solid var(--aptv2-border);
  border-radius: 26px;
  background: var(--aptv2-bg);
  box-shadow: var(--aptv2-shadow-lg);
}

.aptv2-map-spine__map-top {
  height: 54px;
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-2);
  padding: 0 18px;
  border-bottom: 1px solid var(--aptv2-border);
  color: var(--aptv2-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.aptv2-map-spine__map-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-green);
  box-shadow: 0 0 0 5px rgba(31, 163, 74, 0.12);
}

.aptv2-map-spine__map-area {
  position: relative;
  min-height: 336px;
  background:
    linear-gradient(90deg, rgba(226, 232, 240, 0.7) 1px, transparent 1px),
    linear-gradient(180deg, rgba(226, 232, 240, 0.7) 1px, transparent 1px),
    radial-gradient(circle at 30% 25%, rgba(31, 163, 74, 0.12), transparent 24%),
    radial-gradient(circle at 70% 65%, rgba(45, 108, 223, 0.12), transparent 28%),
    var(--aptv2-bg-soft);
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto,
    auto;
}

.aptv2-map-spine__route {
  position: absolute;
  border: 3px dashed rgba(100, 116, 139, 0.32);
  border-color: rgba(100, 116, 139, 0.32) transparent transparent transparent;
  border-radius: 50%;
}

.aptv2-map-spine__route--one {
  width: 68%;
  height: 42%;
  left: 12%;
  top: 23%;
  transform: rotate(-12deg);
}

.aptv2-map-spine__route--two {
  width: 58%;
  height: 34%;
  right: 8%;
  bottom: 13%;
  transform: rotate(18deg);
}

.aptv2-map-pin {
  position: absolute;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px 999px 999px 14px;
  transform: rotate(45deg);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: var(--aptv2-shadow-lg);
}

.aptv2-map-pin span {
  transform: rotate(-45deg);
}

.aptv2-map-pin--request {
  left: 20%;
  top: 30%;
  background: var(--aptv2-orange);
}

.aptv2-map-pin--helper {
  right: 24%;
  top: 22%;
  background: var(--aptv2-green);
}

.aptv2-map-pin--pro {
  left: 49%;
  bottom: 21%;
  background: var(--aptv2-blue);
}

.aptv2-map-spine__layers {
  display: grid;
  gap: var(--aptv2-space-4);
}

.aptv2-map-layer-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 15px;
  align-items: center;
  padding: var(--aptv2-space-4);
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  background: var(--aptv2-bg);
  box-shadow: var(--aptv2-shadow-sm);
}

.aptv2-map-layer-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--aptv2-radius-pill);
  font-size: 23px;
}

.aptv2-map-layer-card--request .aptv2-map-layer-card__icon {
  background: var(--aptv2-orange-light);
}

.aptv2-map-layer-card--helper .aptv2-map-layer-card__icon {
  background: var(--aptv2-green-light);
}

.aptv2-map-layer-card--pro .aptv2-map-layer-card__icon {
  background: var(--aptv2-blue-light);
}

.aptv2-map-layer-card h3 {
  margin: 0 0 5px;
  color: var(--aptv2-text);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
}

.aptv2-map-layer-card p {
  margin: 0;
  color: var(--aptv2-text-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .aptv2-map-spine__inner,
  .aptv2-map-spine__visual {
    grid-template-columns: 1fr;
  }

  .aptv2-map-spine__map-card {
    min-height: 340px;
  }
}

@media (max-width: 700px) {
  .aptv2-map-spine {
    padding: var(--aptv2-space-7) 0;
  }

  .aptv2-map-spine__inner {
    gap: var(--aptv2-space-6);
  }

  .aptv2-map-spine h2 {
    font-size: 1.75rem;
  }

  .aptv2-map-spine__lead {
    font-size: 1rem;
  }

  .aptv2-map-spine__actions {
    flex-direction: column;
  }

  .aptv2-map-spine__btn {
    width: 100%;
  }

  .aptv2-map-spine__map-card {
    min-height: 300px;
  }

  .aptv2-map-spine__map-area {
    min-height: 246px;
  }

  .aptv2-map-layer-card {
    grid-template-columns: 46px 1fr;
    padding: var(--aptv2-space-4);
  }

  .aptv2-map-layer-card__icon {
    width: 46px;
    height: 46px;
  }
}

/* =========================================================
   Marketplace teaser section (HOME-MARKET-1A)
   ========================================================= */

.aptv2-market-spine {
  padding: var(--aptv2-space-8) 0;
  background: var(--aptv2-bg);
}

.aptv2-market-spine__header {
  max-width: 760px;
  margin: 0 auto var(--aptv2-space-6);
  text-align: center;
}

.aptv2-market-spine__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 auto var(--aptv2-space-4);
  padding: 8px 13px;
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-orange-light);
  color: var(--aptv2-amber-dark);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.aptv2-market-spine h2 {
  margin: 0 0 18px;
  color: var(--aptv2-text);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.aptv2-market-spine__header p {
  margin: 0;
  color: var(--aptv2-text-muted);
  font-size: 18px;
  line-height: 1.65;
}

.aptv2-market-spine__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: var(--aptv2-space-4);
  margin-top: var(--aptv2-space-6);
}

.aptv2-market-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: var(--aptv2-space-5);
  border: 1px solid var(--aptv2-border);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, var(--aptv2-bg-soft) 100%);
  box-shadow: var(--aptv2-shadow-lg);
}

.aptv2-market-card--primary {
  background:
    radial-gradient(circle at 90% 12%, rgba(242, 136, 75, 0.16), transparent 32%),
    linear-gradient(145deg, var(--aptv2-orange-light) 0%, #ffffff 100%);
  border-color: rgba(242, 136, 75, 0.3);
}

.aptv2-market-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: var(--aptv2-space-4);
  border-radius: var(--aptv2-radius-lg);
  background: var(--aptv2-orange-light);
  font-size: 27px;
}

.aptv2-market-card h3 {
  margin: 0 0 10px;
  color: var(--aptv2-text);
  font-size: 21px;
  line-height: 1.2;
  font-weight: 800;
}

.aptv2-market-card p {
  margin: 0 0 var(--aptv2-space-5);
  color: var(--aptv2-text-muted);
  font-size: 15.5px;
  line-height: 1.58;
}

.aptv2-market-card a {
  width: fit-content;
  margin-top: auto;
  color: var(--aptv2-blue);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.aptv2-market-card a:hover {
  text-decoration: underline;
}

.aptv2-market-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin-top: var(--aptv2-space-5);
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  background: var(--aptv2-bg);
  box-shadow: var(--aptv2-shadow-md);
}

.aptv2-market-flow__step {
  padding: var(--aptv2-space-4) var(--aptv2-space-5);
  border-right: 1px solid var(--aptv2-border);
}

.aptv2-market-flow__step:last-child {
  border-right: 0;
}

.aptv2-market-flow__step span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: var(--aptv2-space-3);
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-green);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.aptv2-market-flow__step--future span {
  background: var(--aptv2-text-light);
}

.aptv2-market-flow__step strong {
  display: block;
  margin-bottom: 6px;
  color: var(--aptv2-text);
  font-size: 16px;
  font-weight: 800;
}

.aptv2-market-flow__step p {
  margin: 0;
  color: var(--aptv2-text-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .aptv2-market-spine__grid,
  .aptv2-market-flow {
    grid-template-columns: 1fr;
  }

  .aptv2-market-flow__step {
    border-right: 0;
    border-bottom: 1px solid var(--aptv2-border);
  }

  .aptv2-market-flow__step:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  .aptv2-market-spine {
    padding: var(--aptv2-space-7) 0;
  }

  .aptv2-market-spine__header {
    text-align: left;
  }

  .aptv2-market-spine__eyebrow {
    margin-left: 0;
  }

  .aptv2-market-spine h2 {
    font-size: 1.9rem;
  }

  .aptv2-market-spine__header p {
    font-size: 1rem;
  }

  .aptv2-market-card {
    min-height: 0;
    padding: var(--aptv2-space-4);
  }
}

/* =========================================================
   H-2A — Hero refresh & request flow
   ========================================================= */

/* Eyebrow line above hero headline */
.aptv2-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aptv2-green);
  margin: 0 0 var(--aptv2-space-3);
}

/* CTA row: [Post a Request ▾]  [Browse Requests] */
.aptv2-hero__cta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--aptv2-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--aptv2-space-4);
}

.aptv2-hero__cta-row .aptv2-needhelp__cta-wrap {
  margin-top: 0;
  flex-shrink: 0;
}

/* Hero popover: auto width, opens downward */
.aptv2-hero__cta-row .aptv2-needhelp__cta-wrap .aptv2-btn {
  width: auto;
}

.aptv2-hero__cta-row .aptv2-needhelp__popover {
  min-width: 280px;
  bottom: auto;
  top: calc(100% + 8px);
  z-index: 200; /* above the paths section that immediately follows the hero */
}

/* =========================================================
   H-2B — Live activity card (replaces safety card in hero)
   ========================================================= */

.aptv2-live-card {
  /* APT-HOME-HUB-2C-FIX4: back on the left (upper-left), matching the
     original design — but sat below the small area-label/prompt pill
     (top:14px) rather than bottom-left, since Mapbox/OpenStreetMap's
     required attribution renders across the bottom of the source image
     and must never be covered. Decorative pins are positioned (further
     down this file) to keep clear of this card's footprint. */
  position: absolute;
  top: 64px;
  left: var(--aptv2-space-5);
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--aptv2-radius-lg);
  box-shadow: 0 10px 36px rgba(16, 24, 40, 0.16), 0 2px 8px rgba(16, 24, 40, 0.08);
  padding: var(--aptv2-space-4) var(--aptv2-space-5);
  min-width: 230px;
  max-width: calc(100% - var(--aptv2-space-5) * 2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.aptv2-live-card__title {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-2);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 var(--aptv2-space-3);
  color: var(--aptv2-text);
}

.aptv2-live-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aptv2-green);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(31, 163, 74, 0.2);
  animation: aptv2-dot-pulse 2s infinite;
}

@keyframes aptv2-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31, 163, 74, 0.2); }
  50%       { box-shadow: 0 0 0 5px rgba(31, 163, 74, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .aptv2-live-card__dot { animation: none; }
}

.aptv2-live-card__stats {
  list-style: none;
  margin: 0 0 var(--aptv2-space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.aptv2-live-card__stat {
  display: flex;
  align-items: center;
  gap: var(--aptv2-space-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--aptv2-border);
  font-size: 0.84rem;
}

.aptv2-live-card__stat:last-child {
  border-bottom: none;
}

.aptv2-live-card__stat-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--aptv2-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--aptv2-green-light);
  color: var(--aptv2-green-dark);
}

.aptv2-live-card__stat-icon--blue {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
}

.aptv2-live-card__stat-icon--navy {
  background: var(--aptv2-navy-light);
  color: var(--aptv2-navy);
}

.aptv2-live-card__stat-label {
  flex: 1;
  color: var(--aptv2-text-muted);
}

.aptv2-live-card__stat-value {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--aptv2-text);
  flex-shrink: 0;
}

.aptv2-live-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--aptv2-space-2);
  background: #fff;
  color: var(--aptv2-navy);
  border: 1.5px solid var(--aptv2-border);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--aptv2-radius-sm);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.aptv2-live-card__cta:hover {
  background: var(--aptv2-bg-soft);
  border-color: var(--aptv2-text-muted);
  color: var(--aptv2-navy);
  text-decoration: none;
}

@media (max-width: 900px) {
  .aptv2-live-card {
    position: static;
    margin-top: var(--aptv2-space-4);
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Social proof / trusted line below request types */
.aptv2-hero__trusted {
  font-size: 0.79rem;
  color: var(--aptv2-text-muted);
  margin: 0 0 var(--aptv2-space-4);
  display: flex;
  align-items: center;
  gap: 6px;
}

.aptv2-hero__trusted svg {
  color: var(--aptv2-green);
  flex-shrink: 0;
}

/* =========================================================
   H-2F — Request card visual polish
   ========================================================= */

/* Request card: compact colour strip when no real image exists.
   Replaces the large pale 3:2 placeholder block with a narrow
   category-accent band, making space for the actual card content. */
.aptv2-request-card__media--no-image {
  aspect-ratio: unset;
  height: 60px;
}

.aptv2-request-card__media--no-image .aptv2-request-card__fallback svg {
  width: 28px;
  height: 28px;
}

/* =========================================================
   H-2B — Benefits strip (replaces badge education section)
   ========================================================= */

.aptv2-benefits {
  padding: var(--aptv2-space-5) 0;
  background: var(--aptv2-bg-soft);
  border-top: 1px solid var(--aptv2-border);
  border-bottom: 1px solid var(--aptv2-border);
}

.aptv2-benefits__strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--aptv2-space-6);
  flex-wrap: wrap;
}

.aptv2-benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aptv2-space-2);
  text-align: center;
  min-width: 80px;
}

.aptv2-benefit-item__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--aptv2-shadow-sm);
  border: 1px solid var(--aptv2-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aptv2-green-dark);
  flex-shrink: 0;
}

.aptv2-benefit-item__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--aptv2-text);
  line-height: 1.3;
}

@media (max-width: 700px) {
  .aptv2-benefits__strip {
    gap: var(--aptv2-space-4);
  }

  .aptv2-benefit-item {
    min-width: 64px;
  }

  .aptv2-benefit-item__label {
    font-size: 0.75rem;
  }
}

/* =========================================================
   APT-VISUAL-1A — Vendors archive (/experts/) search & filter
   Scope: body.hp-template--vendors-view-page ONLY.

   /experts/ (hp_page_vendors) is the one catalog page that never got
   an APT visual pass — it inherited raw HivePress + parent-theme
   defaults (yellow/orange "alt" buttons) while /services/ and
   /service-category/* already got a matching blue-branded pass via
   apt-services.css (which is scoped to body.apt-services-archive and
   only enqueued on the listings_view_page route, so it never reaches
   this page). This mirrors that same treatment onto the equivalent
   vendor search (.hp-form--vendor-search) and filter
   (.hp-widget--vendor-filter) markup so both catalog types read as
   one visual system. This file (homepage-v2.css) is already enqueued
   here automatically once apt_uses_new_header() covers hp_page_vendors
   (see inc/apt-header-conditions.php), so no new enqueue was needed.
   CSS only — no vendor template/PHP touched.
   ========================================================= */

/* experthive's own base stylesheet (style.css) sets
   .hp-template--vendors-view-page .hp-form--primary { margin-top: -5.25rem }
   (-6.25rem / -100px at >=75em) — a "float the search card up into the tall
   hero image" trick intended for the old Elementor photo header. With no
   hero element between .aptv2-header and this search form, that negative
   margin pulled the form's own opaque white background up to visually
   cover the new header instead (same overlap the audit found on the old
   header, just relocated). Cancelled at every breakpoint the theme defines
   it at. Higher specificity (adds the body type selector) than the theme
   rule already wins without !important, kept anyway for consistency with
   the rest of this file's Elementor-safety overrides. */
body.hp-template--vendors-view-page .hp-form--primary {
  margin-top: 0 !important;
}

body.hp-template--vendors-view-page .hp-page__header {
  background: var(--aptv2-bg-soft);
  border-bottom: 1px solid var(--aptv2-border);
  padding: 24px 20px;
}

body.hp-template--vendors-view-page .hp-page__header .hp-form__fields {
  padding: 0;
}

body.hp-template--vendors-view-page .hp-page__header .hp-form__footer {
  padding: 0;
}

body.hp-template--vendors-view-page .hp-page__header input[type="text"],
body.hp-template--vendors-view-page .hp-page__header input[type="search"] {
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-sm);
  box-shadow: none;
  background: #fff;
  padding: 0 12px;
  height: 40px;
  font-size: 0.9375rem;
  color: var(--aptv2-text);
}

body.hp-template--vendors-view-page .hp-page__header input[type="text"]:focus,
body.hp-template--vendors-view-page .hp-page__header input[type="search"]:focus {
  outline: none;
  border-color: var(--aptv2-blue);
  box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.10);
}

/* Search submit button — same icon/text stacking fix applied to
   .apt-services-archive in apt-services.css (experthive's base
   .hp-form--primary .hp-form__button span::after appends a 24px
   Font Awesome arrow straight after the "Search" text node; the span
   itself is never made an inline-flex row at this height). */
body.hp-template--vendors-view-page .hp-page__header .hp-form__button,
body.hp-template--vendors-view-page .hp-page__header .hp-form__button.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aptv2-blue);
  color: #fff;
  border-color: var(--aptv2-blue);
  border-radius: var(--aptv2-radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  height: 42px;
  padding: 0 24px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.hp-template--vendors-view-page .hp-page__header .hp-form__button span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.hp-template--vendors-view-page .hp-page__header .hp-form__button span::after {
  font-size: 15px;
  margin: 0;
  line-height: 1;
}

body.hp-template--vendors-view-page .hp-page__header .hp-form__button:hover,
body.hp-template--vendors-view-page .hp-page__header .hp-form__button.button-primary:hover {
  background: #2459BE;
  border-color: #2459BE;
  color: #fff;
}

/* Sidebar filter widget card. */
body.hp-template--vendors-view-page .hp-page__sidebar .widget,
body.hp-template--vendors-view-page .hp-page__sidebar .hp-widget {
  background: #fff;
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-md);
  box-shadow: var(--aptv2-shadow-sm);
  overflow: hidden;
}

body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-modal {
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

body.hp-template--vendors-view-page .hp-widget--vendor-filter::before {
  content: "Filters";
  display: block;
  padding: 12px 20px 11px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--aptv2-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--aptv2-bg-soft);
  border-bottom: 1px solid var(--aptv2-border);
}

body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form {
  margin: 0;
}

body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__fields {
  padding: 16px 20px 4px;
}

body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__field--radio::before {
  content: "Category";
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--aptv2-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Filter submit button — no icon/arrow to fix here: .hp-form--vendor-filter
   never carries the hp-form--primary modifier that triggers the
   span::after arrow, so only the yellow/default color needs correcting. */
body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__button.button-primary {
  width: 100%;
  height: 40px;
  background: var(--aptv2-blue);
  border-color: var(--aptv2-blue);
  color: #fff;
  border-radius: var(--aptv2-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__button.button-primary:hover {
  background: #2459BE;
  border-color: #2459BE;
  color: #fff;
}

@media (max-width: 768px) {
  /* Mobile filter toggle — HivePress native .hp-button--vendor-filter.
     Visible only on mobile; opens the filter modal via HP JS (unchanged).
     Styled as an APT blue outline button, same treatment as
     .hp-button--listing-filter in apt-services.css. */
  body.hp-template--vendors-view-page .hp-page__header .hp-button--vendor-filter {
    display: flex;
    max-width: 760px;
    margin: 12px auto 0;
    height: 42px;
    padding: 0 16px;
    background: transparent;
    border: 1.5px solid var(--aptv2-blue);
    border-radius: var(--aptv2-radius-sm);
    color: var(--aptv2-blue);
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 8px;
    transition: background 0.15s ease;
  }

  body.hp-template--vendors-view-page .hp-page__header .hp-button--vendor-filter:hover {
    background: var(--aptv2-blue-light);
  }

  body.hp-template--vendors-view-page .hp-page__header .hp-button--vendor-filter .hp-icon {
    font-size: 0.875rem;
  }
}

/* =========================================================
   ARCHIVE-FILTERS-TOP-1A — filters panel above results (>=768px)
   Same technique as apt-requests-list.css: HivePress's DOM already
   places aside.hp-page__sidebar (filter widget) before
   .hp-page__content (topbar + grid) inside .hp-row (flex-wrap:wrap).
   Core grid.min.css only splits them into a side-by-side 33/66
   column pair at >=48em via .hp-col-sm-4 / .hp-col-sm-8; overriding
   both to 100% width here (two-class compound selector beats core's
   single-class rule on specificity, no !important needed) makes them
   wrap onto separate full-width rows instead — filter panel on top,
   results panel beneath, giving vendor cards the full content width.
   Below 768px this is a no-op: core already renders both at
   hp-col-xs-12 (100%) and hides .hp-widget--vendor-filter entirely
   in favour of the mobile filter button + modal (frontend.min.css).
   ========================================================= */

body.hp-template--vendors-view-page .hp-page__sidebar.hp-col-sm-4,
body.hp-template--vendors-view-page .hp-page__content.hp-col-sm-8 {
  flex-basis: 100%;
  max-width: 100%;
}

/* Desktop only: lay the filter fields out as a wrapping row instead
   of the narrow vertical stack the widget was designed for as a
   380px sidebar column, now that it spans the full row width. Fields
   here are the category radio tree plus any extra select fields
   (e.g. Availability, Experience) added via the vendor_filter form
   hook — neither is touched, only their layout. */
@media (min-width: 768px) {
  body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__fields {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px 32px !important;
  }

  body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__field--radio {
    flex: 1 1 100% !important;
  }

  body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__field--select {
    flex: 0 1 220px !important;
  }

  body.hp-template--vendors-view-page .hp-widget--vendor-filter .hp-form__button.button-primary {
    width: auto !important;
    min-width: 180px !important;
  }
}

/* =========================================================
   HERO MAP PANEL (APT-HOME-HUB-2A; replaced with a real map-style
   preview in APT-HOME-HUB-2C-FIX2)
   No live map library or third-party tile provider is loaded on the
   homepage — the install has no Mapbox key configured (confirmed:
   hp_mapbox_secret_key / hp_mapbox_api_key are both unset), so this
   stays a lightweight static preview: a hand-drawn, map-style SVG
   (organic streets, a park, water, building parcels — hero-map-preview.svg,
   entirely generic, not a real place or real coordinates) with teardrop
   map pins and a "you are here" marker on top, linking through to the
   real /map/ route. All real counts live in the existing .aptv2-live-card
   overlay, never on the decorative layer itself.
   ========================================================= */

.aptv2-hero-map {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* Matches whatever radius .aptv2-hero__visual has at this breakpoint
     (0 on desktop, rounded on mobile — see below) so the map image is
     still clipped to the right shape even after .aptv2-hero__visual
     itself stops clipping on mobile (APT-HOME-HUB-2C-FIX4). */
  border-radius: inherit;
}

.aptv2-hero-map__area {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background-color: #EDF1E8;
}

/* Rendered as a real <img> (filemtime-versioned URL, see page-homepage-v2.php)
   rather than a CSS background-image, so a code change always shows up
   immediately instead of possibly being served from a stale cache under
   an unchanged URL. Contained to the panel on every breakpoint: fixed
   inset:0 within an overflow:hidden ancestor chain (.aptv2-hero-map__area
   → .aptv2-hero-map → .aptv2-hero__visual), width/height 100% + max-width
   100% + object-fit:cover so the real Mapbox image can never spill past
   the panel edge on desktop or mobile. */
.aptv2-hero-map__area .aptv2-hero-map__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bottom-aligned, not centred: when this is the real Mapbox static
     image, Mapbox/OpenStreetMap's required attribution is baked into
     the bottom of the source image — cropping only from the top
     guarantees it stays visible instead of being cut off by cover.
     Two-class selector deliberately: the generic ".aptv2-hero__visual
     img { object-position: center 25%; }" rule further up this file
     (for framing other hero photos) has higher specificity than a
     single class and would otherwise silently win over this rule. */
  object-position: center bottom;
  display: block;
}

/* Small, honest area label drawn on the map itself — reuses the same
   already-fetched, truthful city name shown in the location bar and
   the live-card title above (aptv2_get_location_short()), never a
   separate/invented claim. */
.aptv2-hero-map__area-label {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--aptv2-radius-pill);
  background: rgba(255, 255, 255, 0.85);
  color: var(--aptv2-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
}

/* Logged-in visitor with no personal location signal at all (2C-FIX3) —
   the whole map visual becomes a link to set one up, so this pill reads
   as actionable rather than an area name. */
.aptv2-hero-map__area-label--prompt {
  background: var(--aptv2-bg);
  color: var(--aptv2-blue);
}

/* "You are here" — the viewer's own approximate area (already
   disclosed in plain text by the location bar above the hero and
   the live-card's "Live near X" title), not a precise geolocation
   pin. Visually distinct from the activity pins below. */
.aptv2-hero-map__you-are-here {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--aptv2-blue);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(16, 24, 40, 0.25);
  z-index: 2;
}

.aptv2-hero-map__you-are-here::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--aptv2-blue);
  opacity: 0.5;
  animation: aptv2-pin-pulse 2.4s ease-out infinite;
}

/* Activity pins — classic teardrop map-marker silhouette (round head,
   pointed tail) via clip-path, not a plain circle, so they read as
   real map pins rather than decorative badges. */
.aptv2-hero-map__pin {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 26px;
  height: 34px;
  margin-left: -13px;
  margin-top: -34px;
  padding-top: 3px;
  clip-path: path('M13 0C5.8 0 0 5.8 0 13c0 9.7 13 21 13 21s13-11.3 13-21C26 5.8 20.2 0 13 0z');
  background: var(--aptv2-bg);
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.2);
  font-size: 13px;
  line-height: 1;
}

/* APT-HOME-HUB-2C-FIX4: kept clear of the live-card's upper-left
   footprint (roughly top 13-59%, left 3-38%) now that the card sits
   there again instead of top-right. */
.aptv2-hero-map__pin--1 { top: 16%; left: 55%; }
.aptv2-hero-map__pin--2 { top: 38%; left: 75%; }
.aptv2-hero-map__pin--3 { top: 62%; left: 45%; }
.aptv2-hero-map__pin--4 { top: 72%; left: 80%; }
.aptv2-hero-map__pin--5 { top: 28%; left: 42%; }

/* Colour-coded by real activity type (request/helper/pro), matching the
   same colour language as the live-card's own stat icons, so the map
   reads as layered local activity rather than plain white dots. */
.aptv2-hero-map__pin--request {
  background: var(--aptv2-green);
}

.aptv2-hero-map__pin--helper {
  background: var(--aptv2-blue);
}

.aptv2-hero-map__pin--pro {
  background: var(--aptv2-navy);
}

.aptv2-hero-map__pin--live::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--aptv2-green);
  opacity: 0.55;
  animation: aptv2-pin-pulse 2.4s ease-out infinite;
}

@keyframes aptv2-pin-pulse {
  0% {
    transform: scale(0.75);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aptv2-hero-map__pin--live::after,
  .aptv2-hero-map__you-are-here::after {
    animation: none;
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .aptv2-hero-map:hover .aptv2-hero-map__pin {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
  }
}

/* =========================================================
   HOME HUB — logged-in visual dashboard (APT-HOME-HUB-2A)
   Rounded panel between the Hero and the Action Hub grid,
   containing the welcome band, chips, stat cards, trust strip
   and the three image-first rails. Scoped under .aptv2-home-hub.
   ========================================================= */

.aptv2-home-hub {
  /* Full-bleed tinted section background — continues the hero's own
     fade so the two read as one page flow, not a separate boxed
     component dropped onto the page. */
  padding: var(--aptv2-space-7) 0 var(--aptv2-space-6);
  background: linear-gradient(180deg, var(--aptv2-green-light) 0%, var(--aptv2-bg) 42%);
}

.aptv2-home-hub__panel {
  display: flex;
  flex-direction: column;
  gap: var(--aptv2-space-6);
}

/* Only the compact profile summary gets a contained card treatment —
   the rails below sit directly on the section background so they read
   as normal page browsing content, not nested dashboard panels. */
.aptv2-home-hub__profile {
  display: flex;
  flex-direction: column;
  gap: var(--aptv2-space-4);
  padding: var(--aptv2-space-5);
  background: var(--aptv2-bg);
  border-radius: var(--aptv2-radius-lg);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.aptv2-home-hub__rails {
  display: flex;
  flex-direction: column;
  gap: var(--aptv2-space-6);
}

/* Welcome band */

.aptv2-home-hub__welcome {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--aptv2-space-4);
}

.aptv2-home-hub__welcome-text {
  flex: 1 1 260px;
  min-width: 0;
}

.aptv2-home-hub__avatar-ring {
  flex-shrink: 0;
  display: flex;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aptv2-green), var(--aptv2-blue));
}

.aptv2-home-hub__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  display: block;
}

.aptv2-home-hub__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.aptv2-home-hub__welcome-text h2 {
  margin: 0 0 2px;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--aptv2-text);
}

.aptv2-home-hub__welcome-text > p {
  margin: 0 0 var(--aptv2-space-2);
  color: var(--aptv2-text-muted);
  font-size: 14px;
}

.aptv2-home-hub__welcome-text .aptv2-chip-row {
  margin-top: var(--aptv2-space-2);
}

.aptv2-chip-row__badges {
  display: inline-flex;
  align-items: center;
}

/* Weather / local snapshot + profile completion tiles
   (APT-HOME-HUB-2B-REFERENCE-GAPS) — live-ready, honest-fallback. */

.aptv2-home-hub__snapshot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aptv2-space-3);
  margin-left: auto;
}

.aptv2-snapshot-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--aptv2-radius-lg);
  background: linear-gradient(160deg, var(--aptv2-bg) 0%, var(--aptv2-green-light) 220%);
  border: 1px solid var(--aptv2-border);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05);
  min-width: 196px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.aptv2-snapshot-tile:hover {
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.09);
  transform: translateY(-1px);
}

.aptv2-snapshot-tile--profile {
  background: linear-gradient(160deg, var(--aptv2-bg) 0%, var(--aptv2-blue-light) 220%);
}

.aptv2-snapshot-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--aptv2-green-light);
  color: var(--aptv2-green-dark);
  flex-shrink: 0;
}

.aptv2-snapshot-tile--profile .aptv2-snapshot-tile__icon {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
}

.aptv2-snapshot-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aptv2-snapshot-tile__body strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--aptv2-text);
  line-height: 1.3;
}

.aptv2-snapshot-tile__pending {
  color: var(--aptv2-text-muted);
  font-weight: 700;
  font-size: 13px;
}

.aptv2-snapshot-tile__body span {
  font-size: 12.5px;
  color: var(--aptv2-text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aptv2-snapshot-tile__bar {
  display: block;
  width: 44px;
  height: 6px;
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-border);
  overflow: hidden;
  flex-shrink: 0;
  margin-left: auto;
}

.aptv2-snapshot-tile__bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aptv2-blue), var(--aptv2-green));
  border-radius: inherit;
}

/* APT-HOME-HUB-2C-FIX4B: this tile is now a real link (to Profile
   Settings) — a small chevron makes the existing hover lift (see
   .aptv2-snapshot-tile:hover above) read as "this opens something"
   rather than a purely decorative stat card. */
.aptv2-snapshot-tile__chevron {
  display: flex;
  align-items: center;
  color: var(--aptv2-text-light);
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.aptv2-snapshot-tile--profile:hover .aptv2-snapshot-tile__chevron {
  transform: translateX(2px);
  color: var(--aptv2-blue);
}

@media (max-width: 900px) {
  .aptv2-home-hub__snapshot-row {
    margin-left: 0;
    width: 100%;
  }

  .aptv2-snapshot-tile {
    flex: 1 1 200px;
  }
}

@media (max-width: 480px) {
  .aptv2-home-hub__snapshot-row {
    flex-direction: column;
  }
}

/* Chip rows (context + trust) */

.aptv2-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aptv2-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.aptv2-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--aptv2-radius-pill);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.aptv2-chip--green {
  background: var(--aptv2-green-light);
  color: var(--aptv2-green-dark);
}

.aptv2-chip--blue {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
}

.aptv2-chip--muted {
  background: var(--aptv2-bg-soft);
  color: var(--aptv2-text-muted);
  border: 1px solid var(--aptv2-border);
}

/* APT-HOME-HUB-2C-FIX4B: the one chip that is a real action (go complete
   your profile), not a status tag — dashed border + edit icon deliberately
   distinguish it from the solid "Helper"/"Professional"-style tags so it
   doesn't read as an inert, mislabelled badge. */
.aptv2-chip--action {
  background: var(--aptv2-blue-light);
  color: var(--aptv2-blue);
  border: 1px dashed var(--aptv2-blue);
}

.aptv2-chip--action:hover {
  background: var(--aptv2-bg);
}

/* Expands the click target back out to the chip's own padding (the <a>
   sits inside a <li class="aptv2-chip"> that already carries the visual
   padding) so the whole pill is clickable, not just the icon+text. */
.aptv2-chip__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  margin: -5px -12px;
  padding: 5px 12px;
  border-radius: inherit;
}

.aptv2-chip__link:hover {
  text-decoration: underline;
}

/* Stat cards */

.aptv2-home-hub__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--aptv2-space-3);
}

.aptv2-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--aptv2-tap-min);
  padding: 16px;
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  background: var(--aptv2-bg);
  color: var(--aptv2-text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.aptv2-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--aptv2-green);
}

.aptv2-stat-card:nth-child(2)::before,
.aptv2-stat-card:nth-child(4)::before {
  background: var(--aptv2-blue);
}

.aptv2-stat-card:hover {
  border-color: var(--aptv2-green);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.09);
  transform: translateY(-2px);
}

.aptv2-stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--aptv2-green-light);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* Alternate accent per tile so the row reads as a designed set rather
   than identical admin boxes repeated five times. */
.aptv2-stat-card:nth-child(2) .aptv2-stat-card__icon,
.aptv2-stat-card:nth-child(4) .aptv2-stat-card__icon {
  background: var(--aptv2-blue-light);
}

.aptv2-stat-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.aptv2-stat-card__value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.aptv2-stat-card__label {
  font-size: 12.5px;
  color: var(--aptv2-text-muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aptv2-stat-card__label--link {
  color: var(--aptv2-green-dark);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .aptv2-home-hub__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .aptv2-home-hub__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Rails — image-first horizontal carousels (APT-HOME-HUB-2A)
   ========================================================= */

.aptv2-rail {
  /* Spacing between rails now comes from .aptv2-home-hub__rails' own gap;
     no per-rail divider line so the section reads as one continuous
     browsing area rather than stacked boxed sub-panels. */
}

.aptv2-rail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--aptv2-space-3);
  margin-bottom: var(--aptv2-space-3);
}

.aptv2-rail__heading {
  min-width: 0;
}

.aptv2-rail__header h3 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 800;
  color: var(--aptv2-text);
}

.aptv2-rail__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--aptv2-text-muted);
}

.aptv2-rail__view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 5px 11px;
  border-radius: var(--aptv2-radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--aptv2-green-dark);
  background: var(--aptv2-green-light);
  transition: background 0.15s ease;
}

.aptv2-rail__view-all:hover {
  background: #d7f0de;
}

.aptv2-rail__scroller {
  position: relative;
}

.aptv2-rail__scroller::before,
.aptv2-rail__scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 1;
  pointer-events: none;
}

.aptv2-rail__scroller::before {
  left: 0;
  background: linear-gradient(90deg, var(--aptv2-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.aptv2-rail__scroller::after {
  right: 0;
  background: linear-gradient(270deg, var(--aptv2-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

@media (max-width: 900px) {
  .aptv2-rail__scroller::before,
  .aptv2-rail__scroller::after {
    display: none;
  }
}

.aptv2-rail__track {
  display: flex;
  gap: var(--aptv2-space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.aptv2-rail__track::-webkit-scrollbar {
  display: none;
}

.aptv2-rail-card {
  position: relative;
  flex: 0 0 228px;
  scroll-snap-align: start;
  border-radius: var(--aptv2-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px rgba(16, 24, 40, 0.07);
  border: 1px solid rgba(16, 24, 40, 0.06);
  color: #fff;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Premium carousel focus: the hovered/focused card lifts and enlarges
   slightly above its neighbours. transform/z-index only — never changes
   width/margin, so sibling cards never reflow or shift. */
.aptv2-rail-card:hover,
.aptv2-rail-card:focus-visible {
  transform: translateY(-4px) scale(1.045);
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.1), 0 20px 36px rgba(16, 24, 40, 0.16);
  border-color: rgba(16, 24, 40, 0.12);
  z-index: 2;
}

.aptv2-rail-card:focus-visible {
  outline: 2px solid var(--aptv2-green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .aptv2-rail-card {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .aptv2-rail-card:hover,
  .aptv2-rail-card:focus-visible {
    transform: none;
  }
}

.aptv2-rail-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--aptv2-bg-soft);
}

.aptv2-rail-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.aptv2-rail-card:hover .aptv2-rail-card__media img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .aptv2-rail-card__media img,
  .aptv2-rail-card:hover .aptv2-rail-card__media img {
    transition: none;
    transform: none;
  }
}

.aptv2-rail-card__fallback {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Quieter now that real photos fill most cards (APT-HOME-HUB-2B-FINAL-
     CARD-SOURCE-FIX) — the deep accent colour is a smaller, softer
     presence rather than a bold duotone split. */
  background: linear-gradient(135deg, var(--aptv2-cover-a, #eaf7ee) 0%, var(--aptv2-cover-b, #168238) 190%);
}

/* Large, semi-transparent duotone icon bleeding off the bottom-right
   corner — an intentional "category cover" composition instead of a
   small centred icon on a flat pale block. */
.aptv2-rail-card__fallback-icon {
  position: absolute;
  right: -16px;
  bottom: -16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  color: rgba(255, 255, 255, 0.4);
}

.aptv2-rail-card__fallback-icon svg {
  width: 80px;
  height: 80px;
}

/* Deterministic alt variant (post ID parity) — mirrors the gradient
   angle and icon position so a run of same-category fallback covers
   doesn't look identical. */
.aptv2-rail-card__fallback--alt {
  background: linear-gradient(225deg, var(--aptv2-cover-a, #eaf7ee) 0%, var(--aptv2-cover-b, #168238) 190%);
}

.aptv2-rail-card__fallback--alt .aptv2-rail-card__fallback-icon {
  right: auto;
  left: -16px;
}

.aptv2-rail-card__fallback-kicker {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--aptv2-radius-pill);
  background: rgba(255, 255, 255, 0.85);
  color: var(--aptv2-text);
  font-size: 11.5px;
  font-weight: 700;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aptv2-rail-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border-radius: var(--aptv2-radius-pill);
  background: var(--aptv2-green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.aptv2-rail-card__badge--muted {
  background: rgba(255, 255, 255, 0.94);
  color: var(--aptv2-text);
  text-transform: none;
}

.aptv2-rail-card__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 12px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.58) 65%, rgba(0, 0, 0, 0.62) 100%);
}

.aptv2-rail-card__title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aptv2-rail-card__meta {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.aptv2-rail-card--member {
  color: var(--aptv2-text);
  background: var(--aptv2-bg);
}

.aptv2-rail-card__member-top {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(135deg, var(--aptv2-green-light) 0%, var(--aptv2-blue-light) 100%);
}

.aptv2-rail-card__member-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.16);
}

.aptv2-rail-card__member-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.aptv2-rail-card__member-body {
  padding: 10px 12px 12px;
}

.aptv2-rail-card__member-body .aptv2-rail-card__title {
  color: var(--aptv2-text);
  -webkit-line-clamp: 1;
}

.aptv2-rail-card__member-body .aptv2-rail-card__meta {
  color: var(--aptv2-text-muted);
}

.aptv2-rail-card__badge--member {
  top: auto;
  bottom: 8px;
  right: 8px;
  background: var(--aptv2-green);
}

.aptv2-rail__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--aptv2-border);
  background: var(--aptv2-bg);
  color: var(--aptv2-text);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.14);
  cursor: pointer;
  z-index: 2;
}

.aptv2-rail__arrow:hover {
  border-color: var(--aptv2-green);
  color: var(--aptv2-green-dark);
}

.aptv2-rail__arrow--prev { left: 4px; }
.aptv2-rail__arrow--next { right: 4px; }

@media (max-width: 900px) {
  .aptv2-rail__arrow {
    display: none;
  }
}

@media (max-width: 700px) {
  .aptv2-home-hub__panel {
    gap: var(--aptv2-space-5);
  }

  .aptv2-home-hub__profile {
    padding: var(--aptv2-space-4);
  }

  .aptv2-home-hub__rails {
    gap: var(--aptv2-space-5);
  }

  .aptv2-rail-card {
    flex-basis: 172px;
  }
}