/* Homepage glass and shared signed-in navigation. Existing content, assets and motion stay intact. */
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) {
  background-color: #fff;
  background-image: none;
}

#home {
  --muted: #5c6570;
  --line: rgba(59,74,93, .17);
  --home-glass: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(248,253,253, .72));
  --home-shadow: 0 12px 32px rgba(51,62,78, .07), inset 0 1px 0 rgba(255, 255, 255, .13);
  --home-edge: 1px solid rgba(59,74,93, .22);
  color: #262a2f;
}

/* Navigation changes follow the active view without changing navigation logic. */
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .topbar {
  --line: rgba(59,74,93, .17);
  top: 12px;
  margin: 12px 20px 0;
  border: 1px solid rgba(59,74,93, .23);
  border-radius: 24px;
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 8px 28px rgba(51,62,78, .07), inset 0 1px 0 rgba(255, 255, 255, .13);
  color: #262a2f;
}

body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(.brand, .nav-btn, .search-shell, .search-shell input, .mobile-menu-btn, .global-mode-switch button, .mode-label) { color: #262a2f; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .brand span { color: #0c887e; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar input::placeholder { color: #6e7681; opacity: 1; }

body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(.search-shell, .global-mode-switch, .mobile-menu-btn) {
  background: rgba(244,250,250, .7);
  border-color: rgba(59,74,93, .2);
  box-shadow: inset 0 1px 2px rgba(12,14,18, .06);
}

body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .nav-btn { border-radius: 999px; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .nav-btn:not(.primary):hover { background: rgba(255, 255, 255, .12); }
body:has(> .app-shell > #home.active) .topbar .nav-btn[data-view="home"] {
  background: rgba(94,201,192, .15);
  color: #0b746b;
  box-shadow: inset 0 1px 0 rgba(236,249,249, .16);
}

body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(.account-menu, .notification-menu) {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(59,74,93, .23);
  box-shadow: 0 16px 40px rgba(51,62,78, .14);
}
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(.account-menu, .notification-menu) :is(button, b, small, p) { color: #303c4b; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(.account-menu, .notification-menu) button:hover { background: #f0f9f9; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(.notification-menu-head, .notification-item, .notification-all, .notification-menu .link-action) { background: #fff; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .notification-item.unread { background: #f1fbfb; }
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .notification-copy span { color: #555f6c; }

#home .hero {
  background: rgba(255, 255, 255, .75);
  border: var(--home-edge);
  border-radius: 32px;
  box-shadow: 0 18px 50px rgba(51,62,78, .06), inset 0 1px 0 rgba(255, 255, 255, .12);
}

#home .hero > * { min-width: 0; }
#home .hero h1 { color: #262a2f; }
#home .hero h1 span { color: #0c887e; }
#home .eyebrow { color: #0b746b; }
#home .hero-copy { color: #555f6c; }
#home .hero .eyebrow { color: #0b746b; }

/* Section introductions sit directly on the white background. */
#home .guest-home > :is(.local-service-motion, .browse-cats, .how) .section-head { color: #262a2f; }
#home .guest-home > :is(.local-service-motion, .browse-cats, .how) .section-head .eyebrow { color: #0b746b; }
#home .guest-home > :is(.local-service-motion, .browse-cats, .how) .section-head p:last-child { color: #5c6570; }

#home :is(.hero-search-card, .stats, .trusted-strip, .category-card, .worker-audience, .proof-card, .steps article, .signed-home .card) {
  background: var(--home-glass);
  border: var(--home-edge);
  box-shadow: var(--home-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

#home :is(.hero-search-card, .stats, .trusted-strip, .signed-home .card) { border-radius: 24px; }
#home .tip-box {
  color: #0e2f2d;
  background: rgba(59,176,167, .09);
  border: 1px solid rgba(209,242,240, .18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#home .tip-box p { color: #5c6570; line-height: 1.55; }
#home .hero .tip-box { margin: 20px 0; padding: 16px 18px; }
#home .hero .tip-box b { display: block; line-height: 1.45; }
#home .hero .tip-box p { margin: 6px 0 0; }
#home .how > .hero-actions { margin-top: 20px; }
#home :is(.category-card, .proof-card, .worker-audience) p,
#home .worker-audience li { color: #555f6c; }
#home :is(.category-card, .proof-card) h3,
#home .trusted-strip p { color: #262a2f; }
#home .stats div { border-color: rgba(59,74,93, .17); }
#home .stats strong { color: #262a2f; }
#home .stats span { font-size: .875rem; }

#home .hero-search-line input {
  min-width: 0;
  width: 100%;
  background: rgba(248,253,253, .9);
  border: 1px solid rgba(101,116,136, .25);
  box-shadow: inset 0 2px 5px rgba(12,14,18, .09);
  color: #262a2f;
}
#home .hero-search-line input::placeholder { color: #6e7681; opacity: 1; }
#home :is(.hero-tag-btn, .trusted-logos span) {
  background: rgba(242,250,250, .8);
  border-color: rgba(59,74,93, .17);
  color: #43505f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
#home .hero-tag-btn:hover { background: rgba(255, 255, 255, .14); }

#home :is(.cta, .outline-btn),
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .nav-btn.primary {
  border-radius: 999px;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
#home .cta:not(.secondary),
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .nav-btn.primary {
  background: linear-gradient(160deg, #12a397, #087e75);
  color: #fff;
  box-shadow: 0 5px 12px rgba(11,108,100, .2), inset 0 1px 0 rgba(255, 255, 255, .3);
}
#home .cta:not(.secondary):hover,
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar .nav-btn.primary:hover { background: #0a776e; }
#home :is(.cta.secondary, .outline-btn) {
  background: rgba(255, 255, 255, .9);
  color: #0b534d;
  border: 1px solid rgba(59,74,93, .24);
  box-shadow: 0 3px 8px rgba(12,14,18, .08), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#home :is(.cta.secondary, .outline-btn):hover { background: rgba(255, 255, 255, .16); }
#home :is(button, input):focus-visible,
body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .topbar :is(button, input):focus-visible {
  outline: 3px solid #0c887e;
  outline-offset: 3px;
}

/* Keep the original phone, service animation timing, and floating positions. */
#home .hero-motion-stage {
  background:
    radial-gradient(ellipse at 90% 12%, rgba(22,202,187, .29), transparent 62%),
    radial-gradient(ellipse at 12% 90%, rgba(15,147,136, .19), transparent 58%),
    linear-gradient(140deg, rgba(84,198,188, .07), rgba(14,58,55, .13));
  border: var(--home-edge);
  border-radius: 30px;
  box-shadow: 0 22px 44px rgba(14,47,45, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}
#home .mock-phone {
  color: #2b3239;
  background: rgba(249,253,253, .84);
  border-color: #323c49;
  box-shadow: 0 25px 40px rgba(46,52,61, .25), 0 0 0 1px rgba(255, 255, 255, .7);
}
#home .floating-service {
  background: linear-gradient(130deg, rgba(255, 255, 255, .87), rgba(247,253,253, .7));
  border: var(--home-edge);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 12px 24px rgba(14,47,45, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
}
#home .floating-service > span { background: rgba(246,253,252, .12); }
#home .floating-service small { color: #5c6570; }
#home .motion-service-card {
  background: var(--home-glass);
  border: var(--home-edge);
  border-radius: 22px;
  box-shadow: var(--home-shadow);
}
#home .motion-service-card small { color: #5c6570; font-size: .75rem; }
#home .motion-service-card > span { background: rgba(94,201,192, .12); }

#home .client-audience {
  background: linear-gradient(135deg, rgba(9,100,92, .95), rgba(27,130,122, .88));
  border: var(--home-edge);
  box-shadow: var(--home-shadow);
}
#home .client-audience .eyebrow { color: #e8f8f8; }
#home .cta-banner-home {
  background: linear-gradient(130deg, rgba(45,51,59, .95), rgba(65,81,99, .9));
  border: var(--home-edge);
  box-shadow: var(--home-shadow);
}
#home .cta-banner-home .eyebrow { color: #ccf0ef; }
#home .steps .feedback-step { background: linear-gradient(135deg, rgba(39, 164, 173, .17), rgba(31,108,102, .09)); }
#home .steps article > span { color: #0b746b; background: rgba(94,201,192, .12); }
#home .signed-home :is(.feed-item, .job-card) { background: rgba(255, 255, 255, .025); }
#home .signed-home :is(.feed-item, .job-card):hover { background: rgba(255, 255, 255, .065); }
#home .mode-home-hero { background: var(--home-glass); }
#home .signed-home :is(.job-desc, .feed-desc, .posted, .client-code, .worker-code, .mode-home-location, .muted) { color: #555f6c; }
#home .signed-home :is(.link-action, .top-worker-row) { color: #0b746b; }
#home .signed-home :is(.link-action, .link-card) { background: transparent; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #home .category-card { transition: transform .2s ease, box-shadow .2s ease; }
  #home .category-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(51,62,78, .12), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

@media (max-width: 850px) {
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .topbar { top: 8px; margin: 8px 12px 0; border-radius: 22px; }
  #home .hero { border-radius: 26px; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .mobile-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: auto;
    min-height: 66px;
    border: 1px solid rgba(59,74,93, .23);
    border-radius: 24px;
    background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 8px 30px rgba(51,57,64, .12), inset 0 1px 0 rgba(255, 255, 255, .13);
  }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-bottom-nav button { color: #424f5e; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-nav-sheet { background: #fff; color: #262a2f; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-nav-sheet :is(button, summary, small, .mobile-mode-block > span) { color: #424f5e; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-nav-sheet :is(.mobile-auth-actions button, .mobile-mode-switch button, .mobile-nav-head button) { background: #f1f9f9; border-color: rgba(59,74,93, .2); }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-nav-sheet :is(.mobile-menu-links button, summary):hover { background: #f0f9f9; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-nav-sheet .mobile-mode-switch button.active { background: var(--blue); color: #fff; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) .mobile-nav-sheet summary::after { color: #0c887e; }
  #home .hero-search-card { padding: 14px; }
}

@media (max-width: 480px) {
  #home .hero { padding: 30px 20px; gap: 30px; }
  #home .hero h1 { font-size: clamp(2rem, 9.5vw, 2.7rem); letter-spacing: -1.5px; line-height: 1.08; }
  #home .hero-copy { font-size: 1rem; }
  #home .hero-search-tags { gap: 7px; }
  #home .hero-tag-btn { font-size: .875rem; padding: 8px 10px; }
  #home .hero-motion-stage { margin-inline: -8px; }
}

/* Opaque surfaces remain readable where blur/transparency is unavailable or unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #home { --home-glass: #fff; }
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .topbar,
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .mobile-bottom-nav,
  #home .floating-service { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
  #home { --home-glass: #fff; }
  #home .hero,
  #home .floating-service,
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .topbar,
  body:is(:has(> .app-shell > #home.active), :has(#signedInHome:not(.hidden))) > .mobile-bottom-nav { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  #home :is(.cta, .outline-btn, .category-card) { transition: none; }
}