/* Shared presentation for the public Homeowners, Workers, Employers, Pricing, FAQ and About pages. */
:root,
html[data-public-theme='dark'] {
  --public-bg: #050806;
  --public-band: #090f0b;
  --public-panel: rgba(15, 23, 17, 0.88);
  --public-panel-solid: #0f1711;
  --public-text: #f4f8f5;
  --public-muted: #a7b3aa;
  --public-subtle: #75827a;
  --public-line: rgba(50, 205, 50, 0.36);
  --public-line-soft: rgba(255, 255, 255, 0.1);
  --public-green: #32cd32;
  --public-green-strong: #43dc49;
  --public-amber: #f2b84b;
  --public-blue: #4da3ff;
  --public-danger: #ff5f64;
  --public-shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
  --bg-primary: var(--public-bg);
  --bg-secondary: var(--public-band);
  --text-primary: var(--public-text);
  --text-secondary: var(--public-muted);
  --text-muted: var(--public-subtle);
  --primary: var(--public-green);
  --primary-dark: #20a927;
  --primary-pale: rgba(50, 205, 50, 0.1);
  --gray-100: #111913;
  --gray-200: #1c2920;
  --gray-800: #0a0f0b;
  --gray-900: #050806;
  --white: var(--public-panel-solid);
}

html[data-public-theme='light'] {
  --public-bg: #f7faf8;
  --public-band: #edf4ef;
  --public-panel: rgba(255, 255, 255, 0.9);
  --public-panel-solid: #ffffff;
  --public-text: #101712;
  --public-muted: #506056;
  --public-subtle: #748078;
  --public-line: rgba(31, 165, 38, 0.44);
  --public-line-soft: rgba(10, 34, 16, 0.12);
  --public-green: #25b72d;
  --public-green-strong: #1da626;
  --public-amber: #b97709;
  --public-blue: #216fc4;
  --public-danger: #d52d35;
  --public-shadow: 0 22px 54px rgba(27, 78, 39, 0.13);
  --bg-primary: var(--public-bg);
  --bg-secondary: var(--public-band);
  --text-primary: var(--public-text);
  --text-secondary: var(--public-muted);
  --text-muted: var(--public-subtle);
  --primary: var(--public-green);
  --primary-dark: #188e20;
  --primary-pale: rgba(37, 183, 45, 0.1);
  --gray-100: #edf4ef;
  --gray-200: #d9e5dc;
  --gray-800: #172019;
  --gray-900: #0b110d;
  --white: #ffffff;
}

html,
body.public-marketing-page {
  background: var(--public-bg);
}

body.public-marketing-page {
  overflow-x: hidden;
  color: var(--public-text);
  transition: background-color 180ms ease, color 180ms ease;
}

.public-marketing-page h1,
.public-marketing-page h2,
.public-marketing-page h3,
.public-marketing-page h4,
.public-marketing-page p,
.public-marketing-page .lead {
  color: inherit;
  letter-spacing: 0;
}

.public-marketing-page .nav {
  min-height: 76px;
  background: color-mix(in srgb, var(--public-bg) 90%, transparent);
  border-bottom: 1px solid var(--public-line-soft);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(135%);
}

.public-marketing-page .nav--scrolled {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

.public-marketing-page .nav__container {
  min-height: 76px;
  height: 76px;
  max-width: 1320px;
  padding-inline: 24px;
}

.public-marketing-page .nav__logo {
  width: 188px;
  height: 68px;
  overflow: hidden;
}

.public-marketing-page .nav__logo-img,
.public-marketing-page .nav__logo img {
  width: 184px !important;
  height: auto !important;
}

html[data-public-theme='dark'] .public-marketing-page .nav__logo-img {
  mix-blend-mode: screen;
  filter: saturate(1.2) contrast(1.12);
}

.public-marketing-page .nav__menu {
  gap: 26px;
}

.public-marketing-page .nav__link {
  color: var(--public-muted);
  font-size: 14px;
  font-weight: 600;
}

.public-marketing-page .nav__link:hover,
.public-marketing-page .nav__link--active {
  color: var(--public-text);
}

.public-marketing-page .nav__link::after {
  height: 1px;
  background: var(--public-green);
}

.public-marketing-page .nav__actions {
  gap: 9px;
}

.public-mobile-auth {
  display: none;
}

.public-theme-toggle,
.public-marketing-page .nav__login-button,
.public-marketing-page .nav__account-button,
.public-marketing-page .nav__toggle {
  min-height: 42px;
  border-radius: 8px;
  white-space: nowrap;
}

.public-theme-toggle {
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--public-line);
  color: var(--public-text);
  background: var(--public-panel);
}

.public-theme-toggle:hover {
  border-color: var(--public-green);
  background: var(--primary-pale);
}

.public-marketing-page .nav__login-button {
  min-width: 78px;
  padding: 9px 16px !important;
  border: 1px solid var(--public-line);
  color: var(--public-text);
  background: transparent;
  box-shadow: none;
}

.public-marketing-page .nav__account-button {
  min-width: 142px;
  padding: 9px 15px;
  gap: 8px;
  color: #071008;
  background: var(--public-green);
  box-shadow: 0 10px 26px rgba(50, 205, 50, 0.18);
}

.public-marketing-page .nav__account-button:hover {
  color: #071008;
  background: var(--public-green-strong);
}

.public-marketing-page .nav__toggle {
  width: 42px;
  padding: 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--public-line-soft);
  background: var(--public-panel);
}

.public-marketing-page .nav__toggle span {
  width: 20px;
  height: 2px;
  background: var(--public-text);
}

.public-marketing-page .btn {
  min-height: 44px;
  border-radius: 8px;
  letter-spacing: 0;
}

.public-marketing-page .btn--primary {
  color: #071008;
  background: var(--public-green);
  box-shadow: 0 10px 26px rgba(50, 205, 50, 0.16);
}

.public-marketing-page .btn--secondary,
.public-marketing-page .btn--tertiary {
  color: var(--public-text);
  background: transparent;
  border: 1px solid var(--public-line);
  box-shadow: none;
}

.public-marketing-page .section,
.public-marketing-page .pricing-section,
.public-marketing-page .mission-section,
.public-marketing-page .story-section,
.public-marketing-page .team-section,
.public-marketing-page .stats-section {
  background: var(--public-bg) !important;
  color: var(--public-text);
}

.public-marketing-page .section--gray,
.public-marketing-page .pricing-section--gray,
.public-marketing-page .cost-advantage,
.public-marketing-page .protection-strip {
  background: var(--public-band) !important;
}

.public-marketing-page .hero,
.public-marketing-page .worker-hero,
.public-marketing-page .employer-hero,
.public-marketing-page .pricing-hero,
.public-marketing-page .faq-hero,
.public-marketing-page .about-hero {
  margin-top: 76px;
  color: var(--public-text);
  background: var(--public-bg) !important;
  border-bottom: 1px solid var(--public-line-soft);
}

.public-marketing-page .hero,
.public-marketing-page .worker-hero,
.public-marketing-page .employer-hero {
  padding: 56px 0 44px;
}

.public-marketing-page .worker-hero,
.public-marketing-page .employer-hero {
  padding: 38px 0 28px;
}

.public-marketing-page .pricing-hero,
.public-marketing-page .faq-hero,
.public-marketing-page .about-hero {
  padding: 62px 0 50px;
  text-align: left;
}

.public-marketing-page .pricing-hero .container,
.public-marketing-page .faq-hero .container,
.public-marketing-page .about-hero .container {
  max-width: 1120px;
  margin-inline: auto;
}

.public-marketing-page .hero h1,
.public-marketing-page .worker-hero h1,
.public-marketing-page .employer-hero h1,
.public-marketing-page .pricing-hero h1,
.public-marketing-page .faq-hero h1,
.public-marketing-page .about-hero h1 {
  max-width: 800px;
  margin-bottom: 20px;
  color: var(--public-text) !important;
  font-size: clamp(40px, 4.4vw, 58px);
  line-height: 1.04;
}

.public-marketing-page .pricing-hero p,
.public-marketing-page .faq-hero p,
.public-marketing-page .about-hero p,
.public-marketing-page .hero .hero__sub,
.public-marketing-page .worker-hero .lead,
.public-marketing-page .employer-hero .lead {
  max-width: 720px;
  color: var(--public-muted) !important;
  font-size: 18px;
  line-height: 1.7;
}

.public-page--homeowners .hero__eyebrow,
.public-marketing-page .coming-soon {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 20px;
  padding: 7px 11px;
  border: 1px solid var(--public-line);
  border-radius: 999px;
  color: var(--public-green);
  background: var(--primary-pale);
  font-size: 11px;
  font-weight: 700;
}

.public-page--homeowners .hero__grid,
.public-page--workers .worker-hero__grid,
.public-page--employers .employer-hero__grid {
  gap: 72px;
  align-items: center;
}

.public-marketing-page .hero-panel,
.public-marketing-page .hero-card,
.public-marketing-page .action-card,
.public-marketing-page .info-card,
.public-marketing-page .feature-card,
.public-marketing-page .selling-card,
.public-marketing-page .cost-card,
.public-marketing-page .process-step,
.public-marketing-page .pricing-card,
.public-marketing-page .pricing-panel,
.public-marketing-page .value-card,
.public-marketing-page .stat-item,
.public-marketing-page .faq-item {
  border: 1px solid var(--public-line-soft) !important;
  border-radius: 8px !important;
  color: var(--public-text);
  background: var(--public-panel) !important;
  box-shadow: var(--public-shadow) !important;
  backdrop-filter: blur(14px) saturate(125%);
}

.public-marketing-page .hero-panel,
.public-marketing-page .hero-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-color: var(--public-line) !important;
}

.public-marketing-page .hero-panel::before,
.public-marketing-page .hero-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--public-green);
}

.public-marketing-page .hero-panel__list span,
.public-marketing-page .hero-bullets > div,
.public-marketing-page .hero-points > div {
  color: var(--public-muted);
}

.public-marketing-page .hero-panel__list i,
.public-marketing-page .hero-bullets i,
.public-marketing-page .hero-points i,
.public-marketing-page .feature-card__icon,
.public-marketing-page .selling-card__icon,
.public-marketing-page .value-card__icon {
  color: var(--public-green);
}

.public-marketing-page .trust-badge,
.public-marketing-page .hero-chip,
.public-marketing-page .cost-note {
  border: 1px solid var(--public-line-soft);
  border-radius: 999px;
  color: var(--public-muted);
  background: rgba(255, 255, 255, 0.03);
}

.public-marketing-page .section-title,
.public-marketing-page .section-head {
  max-width: 760px;
  margin: 0 0 38px;
  text-align: left;
}

.public-marketing-page .section-title h2,
.public-marketing-page .section-head h2,
.public-marketing-page .mission-section h2,
.public-marketing-page .stats-section h2 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
}

.public-marketing-page .section-title p,
.public-marketing-page .section-head .lead,
.public-marketing-page .mission-text,
.public-marketing-page .value-card__text,
.public-marketing-page .story-text p,
.public-marketing-page .feature-card p,
.public-marketing-page .selling-card p,
.public-marketing-page .cost-card p,
.public-marketing-page .process-step p {
  color: var(--public-muted);
}

.public-marketing-page .action-card,
.public-marketing-page .info-card,
.public-marketing-page .feature-card,
.public-marketing-page .selling-card,
.public-marketing-page .cost-card,
.public-marketing-page .process-step,
.public-marketing-page .value-card {
  padding: 28px;
}

.public-marketing-page .action-card:hover,
.public-marketing-page .feature-card:hover,
.public-marketing-page .selling-card:hover,
.public-marketing-page .value-card:hover {
  transform: translateY(-3px);
  border-color: var(--public-line) !important;
}

.public-page--homeowners .cards-grid {
  grid-template-columns: 1.25fr 1fr 0.85fr;
}

.public-page--homeowners .sticky-cta {
  border-top: 1px solid var(--public-line-soft);
  background: color-mix(in srgb, var(--public-bg) 92%, transparent);
  backdrop-filter: blur(16px);
}

.public-page--workers .protection-item,
.public-page--employers .process-step {
  border-left: 1px solid var(--public-line);
}

.public-page--employers .coming-soon,
.public-page--employers .hero-points i,
.public-page--employers .selling-card__icon {
  color: var(--public-amber);
}

.public-page--employers .hero-card::before {
  background: var(--public-amber);
}

.public-page--pricing .pricing-groups,
.public-page--pricing .pricing-cards {
  max-width: 1240px;
  margin-inline: auto;
}

.public-page--pricing .pricing-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px;
  padding-top: 48px;
}

.public-page--pricing .pricing-cards .pricing-card {
  grid-column: auto !important;
}

.public-page--pricing .pricing-groups {
  color: var(--public-muted);
}

.public-page--pricing .pricing-card {
  padding: 30px 24px;
  border-top-color: var(--public-line) !important;
}

.public-page--pricing .pricing-card__price {
  color: var(--public-green);
  font-size: 42px;
}

.public-page--pricing .pricing-card__feature,
.public-page--pricing .pricing-card__price-note,
.public-page--pricing .pricing-card__subtitle,
.public-page--pricing .pricing-example {
  color: var(--public-muted);
}

.public-page--faq .faq-section {
  max-width: 860px;
}

.public-page--faq .faq-category h2 {
  color: var(--public-text);
}

.public-page--faq .faq-question {
  min-height: 62px;
  color: var(--public-text);
  background: transparent;
}

.public-page--faq .faq-answer {
  color: var(--public-muted);
}

.public-page--about .mission-section,
.public-page--about .story-section,
.public-page--about .stats-section,
.public-page--about .team-section {
  text-align: left;
}

.public-page--about .mission-text {
  max-width: 920px;
  margin: 0;
  font-size: 21px;
  line-height: 1.7;
}

.public-page--about .about-hero .lead {
  margin: 0;
}

.public-page--about .story-image {
  border: 1px solid var(--public-line);
  border-radius: 8px;
  color: var(--public-green);
  background: var(--primary-pale);
}

.public-marketing-page .cta,
.public-marketing-page .final-cta,
.public-marketing-page .contact-cta {
  color: #071008;
  background: var(--public-green) !important;
}

.public-marketing-page .cta h2,
.public-marketing-page .cta p,
.public-marketing-page .final-cta h2,
.public-marketing-page .final-cta p,
.public-marketing-page .contact-cta h2,
.public-marketing-page .contact-cta p {
  color: #071008 !important;
}

.public-marketing-page .cta .btn,
.public-marketing-page .final-cta .btn,
.public-marketing-page .contact-cta .btn {
  border-color: #071008;
  color: #071008;
  background: transparent;
  box-shadow: none;
}

.public-marketing-page .footer {
  border-top: 1px solid var(--public-line-soft);
  background: #050806;
}

.public-marketing-page .footer__copyright,
.public-marketing-page .footer__legal a {
  color: #8f9c93;
}

@media (max-width: 1100px) {
  .public-marketing-page .nav__menu {
    gap: 15px;
  }

  .public-marketing-page .nav__account-button {
    min-width: auto;
  }

  .public-page--homeowners .hero__grid,
  .public-page--workers .worker-hero__grid,
  .public-page--employers .employer-hero__grid {
    gap: 42px;
  }
}

@media (max-width: 900px) {
  .public-marketing-page .nav__container {
    padding-inline: 16px;
  }

  .public-marketing-page .nav__logo {
    width: 132px;
  }

  .public-marketing-page .nav__logo-img,
  .public-marketing-page .nav__logo img {
    width: 132px !important;
  }

  .public-marketing-page .nav__menu {
    top: 76px;
    padding: 16px;
    border-color: var(--public-line-soft);
    background: var(--public-panel-solid);
  }

  .public-marketing-page .hero,
  .public-marketing-page .worker-hero,
  .public-marketing-page .employer-hero,
  .public-marketing-page .pricing-hero,
  .public-marketing-page .faq-hero,
  .public-marketing-page .about-hero {
    margin-top: 76px;
    padding: 56px 0 48px;
  }

  .public-page--homeowners .hero__grid,
  .public-page--workers .worker-hero__grid,
  .public-page--employers .employer-hero__grid {
    grid-template-columns: 1fr;
  }

  .public-page--homeowners .cards-grid,
  .public-marketing-page .feature-grid,
  .public-marketing-page .selling-grid,
  .public-marketing-page .cost-grid,
  .public-marketing-page .values-grid,
  .public-marketing-page .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .public-marketing-page .nav__container {
    gap: 8px;
  }

  .public-marketing-page .nav__logo {
    width: 116px;
    margin-right: auto;
  }

  .public-marketing-page .nav__logo-img,
  .public-marketing-page .nav__logo img {
    width: 116px !important;
  }

  .public-theme-toggle,
  .public-marketing-page .nav__login-button,
  .public-marketing-page .nav__account-button,
  .public-marketing-page .nav__toggle {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
  }

  .public-marketing-page .nav__login-button {
    width: auto;
    min-width: 62px;
    padding-inline: 12px !important;
    font-size: 13px;
  }

  .public-marketing-page .nav__account-button span {
    display: none;
  }

  .public-marketing-page .nav__account-button i {
    margin: 0;
    font-size: 14px;
  }

  .public-marketing-page .nav__toggle {
    display: flex;
  }

  .public-marketing-page .public-mobile-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--public-line-soft);
  }

  .public-marketing-page .public-mobile-auth__link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--public-line);
    border-radius: 8px;
    color: var(--public-text);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
  }

  .public-marketing-page .public-mobile-auth__link--primary {
    border-color: var(--public-green);
    color: #071008;
    background: var(--public-green);
  }

  .public-marketing-page .hero h1,
  .public-marketing-page .worker-hero h1,
  .public-marketing-page .employer-hero h1,
  .public-marketing-page .pricing-hero h1,
  .public-marketing-page .faq-hero h1,
  .public-marketing-page .about-hero h1 {
    font-size: 38px;
  }

  .public-marketing-page .hero .hero__sub,
  .public-marketing-page .worker-hero .lead,
  .public-marketing-page .employer-hero .lead,
  .public-marketing-page .pricing-hero p,
  .public-marketing-page .faq-hero p,
  .public-marketing-page .about-hero p {
    font-size: 16px;
  }

  .public-marketing-page .hero-panel,
  .public-marketing-page .hero-card {
    padding: 24px;
  }

  .public-page--workers .worker-hero,
  .public-page--employers .employer-hero {
    padding: 34px 0 26px;
  }

  .public-page--workers .worker-hero .hero-card,
  .public-page--employers .employer-hero .hero-card,
  .public-page--homeowners .hero .hero-panel,
  .public-page--workers .hero-bullets > div:nth-child(n + 3),
  .public-page--employers .hero-points > div:nth-child(n + 3) {
    display: none;
  }

  .public-page--homeowners .cards-grid,
  .public-marketing-page .feature-grid,
  .public-marketing-page .selling-grid,
  .public-marketing-page .cost-grid,
  .public-marketing-page .values-grid,
  .public-marketing-page .stats-grid,
  .public-marketing-page .process-grid,
  .public-marketing-page .protection-grid {
    grid-template-columns: 1fr;
  }

  .public-page--homeowners .sticky-cta .cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .public-page--homeowners .sticky-cta .btn--tertiary {
    display: none;
  }

  .public-page--pricing .pricing-groups {
    display: none;
  }

  .public-page--pricing .pricing-cards {
    grid-template-columns: 1fr !important;
    padding-top: 44px;
  }
}

@media (max-width: 390px) {
  .public-marketing-page .nav__container {
    padding-inline: 12px;
  }

  .public-marketing-page .nav__logo {
    width: 102px;
  }

  .public-marketing-page .nav__logo-img,
  .public-marketing-page .nav__logo img {
    width: 104px !important;
  }

  .public-marketing-page .nav__login-button {
    display: none;
  }

  .public-page--homeowners .sticky-cta .cta-buttons {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-marketing-page *,
  .public-marketing-page *::before,
  .public-marketing-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}