@import '_content/HireGuard.Components.Admin/HireGuard.Components.Admin.09uuwq57kh.bundle.scp.css';
@import '_content/HireGuard.Components/HireGuard.Components.y5hmm9mqsb.bundle.scp.css';
@import '_content/HireGuardAspire.Web.Components/HireGuardAspire.Web.Components.84eez8q2nj.bundle.scp.css';

/* /Components/Lending/BodyguardLanding.razor.rz.scp.css */
.container[b-wo63dwgxyn] {
  max-width: 1350px;
  margin: 0 auto;
  padding-inline: 15px;
  box-sizing: border-box;
}

.home-card[b-wo63dwgxyn] {
  border-radius: 16px;
  padding: 32px;
  background: var(--color-bg-primary);
  box-shadow:
    0 2px 35px -2px rgba(0, 0, 0, 0.1),
    0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dark .home-card[b-wo63dwgxyn] {
  background: var(--color-bg-primary);
  box-shadow:
    0 2px 35px -2px rgba(0, 0, 0, 0.3),
    0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

.landing-section-title[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text-title);
  text-align: center;
  margin-top: 0;
  margin-bottom: 32px;
}

/* 1st Block: Hero */
.bg-hero[b-wo63dwgxyn] {
  padding-top: 40px;
  padding-bottom: 40px;
}


.bg-hero__inner[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--color-bg-primary, #ffffff);
}


.bg-hero__content[b-wo63dwgxyn] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bg-hero__title[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.15;
  color: var(--color-text-title);
  margin: 0;
}

.bg-hero__desc[b-wo63dwgxyn] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 580px;
}

.bg-hero__actions[b-wo63dwgxyn] {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.home__button[b-wo63dwgxyn] {
  height: 48px;
  border-radius: 8px;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
  width: auto;
  min-width: 180px;
}

.home__button--primary[b-wo63dwgxyn] {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}


.home__button--primary:hover[b-wo63dwgxyn] {
  opacity: 0.9;
  transform: translateY(-1px);
}

.home__button--secondary[b-wo63dwgxyn] {
  background: var(--color-bg-gray);
  color: var(--color-text-primary);
}


.home__button--secondary:hover[b-wo63dwgxyn] {
  background: var(--color-bg-gray, #cbd5e1);
  transform: translateY(-1px);
}


.bg-hero__image-container[b-wo63dwgxyn] {
  flex: 0 0 42%;
  max-width: 450px;
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin-top: -32px;
  margin-bottom: -32px;
  margin-right: -32px;
  overflow: hidden;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.bg-hero__image[b-wo63dwgxyn] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2nd Block: Why HireGuard */
.bg-why[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--color-bg-secondary);
}


.bg-why__grid[b-wo63dwgxyn] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.why-card[b-wo63dwgxyn] {
  width: calc(33.333% - 14px);
  min-width: 250px;
  box-sizing: border-box;
}

.why-card.home-card[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  text-align: left;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .why-card[b-wo63dwgxyn] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
}

.why-card:hover[b-wo63dwgxyn] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.why-card__icon[b-wo63dwgxyn] {
  background: var(--color-bg-gray-4, #f1f5f9);
  border-radius: 12px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
}

.dark .why-card__icon[b-wo63dwgxyn] {
  background: rgba(255, 255, 255, 0.05);
}

.why-card__title[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-title);
  margin: 0;
  line-height: 1.4;
}

/* 3rd Block: Audience */
.bg-audience[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}


.bg-audience__grid[b-wo63dwgxyn] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.audience-card[b-wo63dwgxyn] {
  display: flex;
  gap: 20px;
  padding: 32px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .audience-card[b-wo63dwgxyn] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
}

.audience-card:hover[b-wo63dwgxyn] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  background: var(--color-bg-primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.dark .audience-card:hover[b-wo63dwgxyn] {
  background: var(--color-bg-primary-hover);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.audience-card__icon-wrapper[b-wo63dwgxyn] {
  background: var(--color-bg-primary, #ffffff);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dark .audience-card__icon-wrapper[b-wo63dwgxyn] {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.audience-card:hover .audience-card__icon-wrapper[b-wo63dwgxyn] {
  transform: scale(1.1);
  background: var(--color-blue-100, #396df0);
  color: #ffffff;
}

.audience-card__title[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-title);
  margin: 0;
  line-height: 1.4;
}

.audience-card__text-wrapper[b-wo63dwgxyn] {
  flex: 1;
}

@media (min-width: 1025px) {
  /* Left column cards (indices 1, 3, 5) have icons on the right */
  .audience-card:nth-child(odd)[b-wo63dwgxyn] {
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* 4th Block: How It Works */
.bg-steps[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-secondary);
}


.bg-steps__timeline[b-wo63dwgxyn] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 48px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.bg-steps__step[b-wo63dwgxyn] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  transition: all 0.3s ease;
}

.bg-steps__step-number[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--color-blue-100, #396df0);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.bg-steps__step:hover .bg-steps__step-number[b-wo63dwgxyn] {
  transform: scale(1.15);
  opacity: 1;
}

.bg-steps__arrow[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  align-self: center;
  margin-bottom: 40px;
}

.dark .bg-steps__step-number[b-wo63dwgxyn] {
  opacity: 0.9;
}

.dark .bg-steps__arrow[b-wo63dwgxyn] {
  color: rgba(57, 109, 240, 0.7);
}

.bg-steps__content[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: 8px;
}

.bg-steps__step-title[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-title);
  margin: 0;
  line-height: 1.35;
}

.bg-steps__step-desc[b-wo63dwgxyn] {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.bg-steps__footer[b-wo63dwgxyn] {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 5th Block: Platform Features */
.bg-features[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}


.bg-features__grid[b-wo63dwgxyn] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.bg-features__grid > *:first-child[b-wo63dwgxyn] {
  grid-column: 1 / -1;
}

.bg-features__card[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .bg-features__card[b-wo63dwgxyn] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
}

.bg-features__card:hover[b-wo63dwgxyn] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.dark .bg-features__card:hover[b-wo63dwgxyn] {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.bg-features__icon[b-wo63dwgxyn] {
  background: var(--color-bg-primary, #ffffff);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
}

.dark .bg-features__icon[b-wo63dwgxyn] {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.bg-features__card-title[b-wo63dwgxyn] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-title);
  margin: 0;
}

.bg-features__card-desc[b-wo63dwgxyn] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}



/* 6th Block: Active Tasks */
.bg-tasks[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-secondary);
}


.bg-tasks__grid[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 32px auto 0 auto;
}

/* 7th Block: Bodyguard Reviews */
.bg-reviews[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary, #ffffff);
}


.landing-reviews__container[b-wo63dwgxyn] {
  max-width: 850px;
  margin: 32px auto 0 auto;
  padding: 32px;
}

.professional-page__reviews[b-wo63dwgxyn] {
  background: transparent;
}

.professional-page__reviews-body[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.professional-page__reviews-body-item[b-wo63dwgxyn] {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-bg-gray);
}

.professional-page__reviews-body-item:last-child[b-wo63dwgxyn] {
  padding-bottom: 0;
  border-bottom: none;
}

.professional-page__reviews-item[b-wo63dwgxyn] {
}

.professional-page__reviews-item-head[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.professional-page__reviews-item-head-right[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.professional-page__reviews-item-head-right-date[b-wo63dwgxyn] {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.professional-page__reviews-item-head-right-stars[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  gap: 2px;
}

.professional-page__reviews-item-head-right-star[b-wo63dwgxyn] {
  width: 18px;
  height: 18px;
}

[b-wo63dwgxyn] .professional-page__reviews-item-head-right-star path {
  fill: var(--color-bg-gray-9, #cbd5e1);
}

[b-wo63dwgxyn] .professional-page__reviews-item-head-right-star--active path {
  fill: var(--color-yellow, #fbbf24);
}

.professional-page__reviews-item-text[b-wo63dwgxyn] {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0;
}

/* Isolated FAQ and Mobile Application CSS moved to LandingFaq and LandingAppDownload components */

/* Responsiveness / Mobile Adaptive */
@media (max-width: 1024px) {
  .bg-hero__inner[b-wo63dwgxyn] {
    flex-direction: column;
    text-align: center;
    gap: 32px;
    padding: 24px;
  }
  .bg-hero__content[b-wo63dwgxyn] {
    align-items: center;
  }
  .bg-hero__title[b-wo63dwgxyn] {
    font-size: 32px;
  }
  .bg-hero__actions[b-wo63dwgxyn] {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .home__button[b-wo63dwgxyn] {
    width: 100%;
    max-width: 320px;
  }
  .bg-hero__image-container[b-wo63dwgxyn] {
    max-width: 100%;
    width: calc(100% + 48px);
    margin-bottom: -24px;
    margin-left: -24px;
    margin-right: -24px;
    margin-top: 0;
    overflow: hidden;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .why-card[b-wo63dwgxyn] {
    width: calc(50% - 10px);
  }

  .bg-audience__grid[b-wo63dwgxyn] {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .audience-card:nth-child(odd)[b-wo63dwgxyn] {
    flex-direction: row;
    text-align: left;
  }

  .bg-steps__timeline[b-wo63dwgxyn] {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-left: 20px;
  }

  .bg-steps__arrow[b-wo63dwgxyn] {
    transform: rotate(90deg);
    margin: 12px 0 12px 28px;
    align-self: flex-start;
  }

  .bg-steps__step[b-wo63dwgxyn] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    width: 100%;
  }

  .bg-steps__content[b-wo63dwgxyn] {
    padding-top: 8px;
    padding-inline: 0;
  }

  .bg-features__grid[b-wo63dwgxyn] {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-reviews__container[b-wo63dwgxyn] {
    padding: 20px;
    margin-top: 20px;
  }

  .professional-page__reviews-item-head[b-wo63dwgxyn] {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .professional-page__reviews-item-head-right[b-wo63dwgxyn] {
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
  }

  .bg-mobile__inner[b-wo63dwgxyn] {
    flex-direction: column-reverse;
    gap: 40px;
    padding: 32px 24px;
    text-align: center;
  }
  .bg-mobile__content[b-wo63dwgxyn] {
    align-items: center;
  }
  .bg-mobile__desc[b-wo63dwgxyn] {
    margin: 0 auto;
  }
  .bg-mobile__buttons[b-wo63dwgxyn] {
    justify-content: center;
  }
  .bg-mobile__image[b-wo63dwgxyn] {
    max-width: 440px;
  }
}

@media (max-width: 768px) {
  .bg-features__grid[b-wo63dwgxyn] {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .audience-card[b-wo63dwgxyn] {
    flex-direction: column !important;
    align-items: center;
    text-align: center !important;
    padding: 24px;
  }

  .bg-hero[b-wo63dwgxyn],
  .bg-why[b-wo63dwgxyn],
  .bg-audience[b-wo63dwgxyn],
  .bg-steps[b-wo63dwgxyn],
  .bg-features[b-wo63dwgxyn],
  .bg-tasks[b-wo63dwgxyn],
  .bg-reviews[b-wo63dwgxyn],
  .bg-faq[b-wo63dwgxyn],
  .bg-mobile[b-wo63dwgxyn] {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .landing-section-title[b-wo63dwgxyn] {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .bg-hero__title[b-wo63dwgxyn] {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .why-card[b-wo63dwgxyn] {
    width: 100%;
    align-items: center;
    text-align: center;
  }
}

/* Mock Widget Layouts for Features Section */
@media (min-width: 769px) {
  .bg-features__card--chat[b-wo63dwgxyn],
  .bg-features__card--finance[b-wo63dwgxyn],
  .bg-features__card--search[b-wo63dwgxyn],
  .bg-features__card--reviews[b-wo63dwgxyn],
  .bg-features__card--payment[b-wo63dwgxyn],
  .bg-features__card--documents[b-wo63dwgxyn] {
    grid-column: span 2;
  }
}

.bg-features__card-content[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bg-features__card-visual[b-wo63dwgxyn] {
  width: 100%;
  border-radius: 12px;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  padding: 16px;
  box-sizing: border-box;
  flex-grow: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dark .bg-features__card-visual[b-wo63dwgxyn] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
}

.mock-chat[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.chat-bubble[b-wo63dwgxyn] {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-bubble__text[b-wo63dwgxyn] {
  word-break: break-word;
}

.chat-bubble__time[b-wo63dwgxyn] {
  align-self: flex-end;
  font-size: 9px;
  color: var(--color-text-secondary);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-bubble--outgoing .chat-bubble__time[b-wo63dwgxyn] {
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble--incoming[b-wo63dwgxyn] {
  align-self: flex-start;
  background: var(--color-bg-secondary, #f1f5f9);
  color: var(--color-text-primary);
  border-bottom-left-radius: 2px;
}

.dark .chat-bubble--incoming[b-wo63dwgxyn] {
  background: rgba(255, 255, 255, 0.05);
}

.chat-bubble--outgoing[b-wo63dwgxyn] {
  align-self: flex-end;
  background: var(--color-blue-100, #396df0);
  color: #ffffff;
  border-bottom-right-radius: 2px;
}

.mock-chat-input-area[b-wo63dwgxyn] {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  width: 100%;
}

.mock-input-wrapper[b-wo63dwgxyn] {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 4px 8px;
  flex-grow: 1;
  background: var(--color-bg-primary, #ffffff);
}

.dark .mock-input-wrapper[b-wo63dwgxyn] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-input-wrapper input[b-wo63dwgxyn] {
  border: none;
  outline: none;
  flex-grow: 1;
  margin-left: 8px;
  font-size: 13px;
  background: transparent;
  color: var(--color-text-primary);
  width: 100%;
}

.mock-attach-btn[b-wo63dwgxyn] {
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.mock-send-btn[b-wo63dwgxyn] {
  background: var(--color-bg-dark, #0f172a);
  border-radius: 8px;
  padding: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.dark .mock-send-btn[b-wo63dwgxyn] {
  background: var(--color-bg-primary, #ffffff);
  color: var(--color-text-primary);
}

/* Mock Profile Sidebar Styles — now hosts real components */
.bg-features__card--finance .bg-features__card-visual[b-wo63dwgxyn] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mock-sidebar[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  pointer-events: none; /* disable navigation from landing page sidebar */
}

.profile-sidebar__avatar[b-wo63dwgxyn] {
  border-radius: var(--border-radius, 12px);
  background: var(--color-bg-primary);
  padding: 16px;
}

[b-wo63dwgxyn] .profile-sidebar__nav {
  font-size: 13px;
}

[b-wo63dwgxyn] .profile-sidebar__nav-item--red {
  display: none; /* hide logout button on landing */
}

/* Custom Task Search Filters Card & Styling Overrides */
.bg-features__card--search .bg-features__card-visual[b-wo63dwgxyn] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Force specific styling on the FindFilters component inside the bento card using ::deep */
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters {
  width: 100% !important;
  max-width: 360px !important;
  height: 480px !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  gap: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--border-light) !important;
}

/* Hide the Close button in the filter header since it is embedded */
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-head button {
  display: none !important;
}

/* Hide the Apply/Reset buttons footer as requested */
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-footer {
  display: none !important;
}

/* Make the filters list scrollable and fit the constrained height */
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-list {
  overflow-y: auto !important;
  flex-grow: 1 !important;
  padding-right: 4px !important;
}

/* Custom scrollbar for the scrollable list */
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-list::-webkit-scrollbar {
  width: 4px;
}
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-list::-webkit-scrollbar-track {
  background: transparent;
}
.bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-list::-webkit-scrollbar-thumb {
  background: var(--color-bg-gray-4, #cbd5e1);
  border-radius: 2px;
}
.dark .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* Scoped styles for the Bento Box reviews card */
.bg-features__card--reviews .bg-features__card-visual[b-wo63dwgxyn],
.bg-features__card--documents .bg-features__card-visual[b-wo63dwgxyn] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-features__card--reviews .professional-page__reviews[b-wo63dwgxyn] {
  width: 100%;
  max-width: 450px;
  height: 400px;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.dark .bg-features__card--reviews .professional-page__reviews[b-wo63dwgxyn] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
  box-shadow: none;
}

.bg-features__card--reviews .professional-page__reviews-body[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 4px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* Custom scrollbar for reviews list */
.bg-features__card--reviews .professional-page__reviews-body[b-wo63dwgxyn]::-webkit-scrollbar {
  width: 4px;
}
.bg-features__card--reviews .professional-page__reviews-body[b-wo63dwgxyn]::-webkit-scrollbar-track {
  background: transparent;
}
.bg-features__card--reviews .professional-page__reviews-body[b-wo63dwgxyn]::-webkit-scrollbar-thumb {
  background: var(--color-bg-gray-4, #cbd5e1);
  border-radius: 2px;
}
.dark .bg-features__card--reviews .professional-page__reviews-body[b-wo63dwgxyn]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

.bg-features__card--reviews .professional-page__reviews-body-item[b-wo63dwgxyn] {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.bg-features__card--reviews .professional-page__reviews-body-item:last-child[b-wo63dwgxyn] {
  border-bottom: none;
  padding-bottom: 0;
}

.dark .bg-features__card--reviews .professional-page__reviews-body-item[b-wo63dwgxyn] {
  border-color: rgba(255, 255, 255, 0.05);
}

.bg-features__card--reviews .professional-page__reviews-item[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bg-features__card--reviews .professional-page__reviews-item-head[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.bg-features__card--reviews .professional-page__reviews-item-head-right[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bg-features__card--reviews .professional-page__reviews-item-head-right-date[b-wo63dwgxyn] {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.bg-features__card--reviews .professional-page__reviews-item-head-right-stars[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bg-features__card--reviews .professional-page__reviews-item-head-right-star[b-wo63dwgxyn] {
  display: flex;
  align-items: center;
}

.bg-features__card--reviews .professional-page__reviews-item-head-right-star--active[b-wo63dwgxyn] {
  color: var(--color-yellow, #fbbf24);
}

.bg-features__card--reviews .professional-page__reviews-item-text[b-wo63dwgxyn] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
  text-align: left;
}

/* Mock Payments widget inside bento card */
.bg-features__card--payment .bg-features__card-visual[b-wo63dwgxyn] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mock-payments[b-wo63dwgxyn] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 450px;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.dark .mock-payments[b-wo63dwgxyn] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
  box-shadow: none;
}

.mock-payments[b-wo63dwgxyn]  .wallet-page__history-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-bg-gray);
  padding-bottom: 12px;
  width: 100%;
  text-align: left;
}

.dark .mock-payments[b-wo63dwgxyn]  .wallet-page__history-item {
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-payments[b-wo63dwgxyn]  .wallet-page__history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ===== Mobile overrides for embedded components inside landing bento cards ===== */

/* Override FindFilters fullscreen overlay behavior on mobile.
   The component's own CSS makes it position:fixed at ≤1024px,
   but on the landing page it should stay inline within its card. */
@media (max-width: 1024px) {
  .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    border-radius: var(--border-radius, 12px) !important;
    overflow: hidden !important;
    transition: none !important;
  }

  .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters--open {
    transform: none !important;
  }

  .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-head {
    display: none !important;
  }

  .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-footer {
    display: none !important;
  }

  .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-list {
    max-height: 370px !important;
    overflow-y: auto !important;
    padding-top: 0 !important;
  }

  .bg-features__card--search[b-wo63dwgxyn]  .professionals__filters-col {
    border-bottom: none !important;
  }

  /* Keep mock-sidebar constrained inside its card */
  .mock-sidebar[b-wo63dwgxyn] {
    max-width: 100% !important;
  }
}

.bg-faq[b-wo63dwgxyn] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}
/* /Components/Lending/ClientLanding.razor.rz.scp.css */
.container[b-w2f4gsw9tk] {
  max-width: 1350px;
  margin: 0 auto;
  padding-inline: 15px;
  box-sizing: border-box;
}

.home-card[b-w2f4gsw9tk] {
  border-radius: 16px;
  padding: 32px;
  background: var(--color-bg-primary);
  box-shadow:
    0 2px 35px -2px rgba(0, 0, 0, 0.1),
    0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dark .home-card[b-w2f4gsw9tk] {
  background: var(--color-bg-primary);
  box-shadow:
    0 2px 35px -2px rgba(0, 0, 0, 0.3),
    0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

/* 1st Block: Hero */
.landing-hero[b-w2f4gsw9tk] {
  padding-top: 40px;
  padding-bottom: 40px;
}

.landing-hero__inner[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--color-bg-primary, #ffffff);
}


.landing-hero__content[b-w2f4gsw9tk] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-hero__title[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.15;
  color: var(--color-text-title);
  margin: 0;
}

.landing-hero__desc[b-w2f4gsw9tk] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 540px;
}

.landing-hero__actions[b-w2f4gsw9tk] {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.home__button[b-w2f4gsw9tk] {
  height: 48px;
  border-radius: 8px;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
  width: auto;
  min-width: 180px;
}

.home__button--primary[b-w2f4gsw9tk] {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}


.home__button--primary:hover[b-w2f4gsw9tk] {
  opacity: 0.9;
  transform: translateY(-1px);
}

.home__button--secondary[b-w2f4gsw9tk] {
  background: var(--color-bg-gray);
  color: var(--color-text-primary);
}


.home__button--secondary:hover[b-w2f4gsw9tk] {
  background: var(--color-bg-gray, #cbd5e1);
  transform: translateY(-1px);
}


.landing-hero__image-container[b-w2f4gsw9tk] {
  flex: 0 0 42%;
  max-width: 450px;
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin-top: -32px;
  margin-bottom: -32px;
  margin-right: -32px;
  overflow: hidden;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.landing-hero__image[b-w2f4gsw9tk] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2nd Block: Why Us Grid */
.landing-why[b-w2f4gsw9tk] {
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--color-bg-secondary);
}

.landing-section-title[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text-title);
  text-align: center;
  margin-top: 0;
  margin-bottom: 32px;
}

.landing-why__grid[b-w2f4gsw9tk] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.why-card[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  text-align: left;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: calc(25% - 15px);
  min-width: 250px;
  box-sizing: border-box;
}

.dark .why-card[b-w2f4gsw9tk] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
}

.why-card:hover[b-w2f4gsw9tk] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}


.why-card__icon[b-w2f4gsw9tk] {
  background: var(--color-bg-gray-4, #f1f5f9);
  border-radius: 12px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
}

.dark .why-card__icon[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.05);
}

.why-card__title[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-title);
  margin: 0;
}

.why-card__desc[b-w2f4gsw9tk] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* 3rd Block: Target Audience (Asymmetric Split Layout) */
.landing-target[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--color-bg-primary);
}


.landing-target__inner[b-w2f4gsw9tk] {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}

.landing-target__content[b-w2f4gsw9tk] {
  flex: 1 1 45%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
}

.landing-target__title[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  color: var(--color-text-title);
  margin-top: 0;
  margin-bottom: 20px;
}

.landing-target__desc[b-w2f4gsw9tk] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.landing-target__features[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-target__feat-item[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-target__feat-check[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success, #28c76f);
}

.landing-target__feat-text[b-w2f4gsw9tk] {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.landing-target__list[b-w2f4gsw9tk] {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.target-item[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.dark .target-item[b-w2f4gsw9tk] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
}

.target-item:hover[b-w2f4gsw9tk] {
  transform: translateX(4px);
  background: var(--color-bg-primary);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.target-item__icon-wrapper[b-w2f4gsw9tk] {
  background: var(--color-bg-primary, #ffffff);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.dark .target-item__icon-wrapper[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.05);
}

.target-item__text-wrapper[b-w2f4gsw9tk] {
  flex: 1;
}

.target-item__text[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0;
}

/* 4th Block: How It Works (Timeline Track Layout) */
.landing-how[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-secondary);
}


.landing-how__timeline-wrapper[b-w2f4gsw9tk] {
  position: relative;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-bottom: 48px;
}

.landing-how__timeline[b-w2f4gsw9tk] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.timeline-step[b-w2f4gsw9tk] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  transition: all 0.3s ease;
}

.timeline-step__number[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--color-blue-100, #396df0);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.timeline-step:hover .timeline-step__number[b-w2f4gsw9tk] {
  transform: scale(1.15);
  opacity: 1;
}

.timeline-arrow[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  align-self: center;
  margin-bottom: 40px;
}

.dark .timeline-step__number[b-w2f4gsw9tk] {
  opacity: 0.9;
}

.dark .timeline-arrow[b-w2f4gsw9tk] {
  color: rgba(57, 109, 240, 0.7);
}

.timeline-step__content[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: 8px;
}

.timeline-step__title[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-title);
  margin: 0;
  line-height: 1.35;
}

.timeline-step__desc[b-w2f4gsw9tk] {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.landing-how__action-container[b-w2f4gsw9tk] {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .why-card[b-w2f4gsw9tk] {
    width: calc(50% - 10px);
  }

  .landing-hero__title[b-w2f4gsw9tk] {
    font-size: 36px;
  }

  .landing-target__inner[b-w2f4gsw9tk] {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .landing-target__content[b-w2f4gsw9tk] {
    max-width: none;
    text-align: center;
  }

  .landing-target__features[b-w2f4gsw9tk] {
    align-items: center;
  }

  /* Timeline goes vertical */
  .landing-how__timeline-wrapper[b-w2f4gsw9tk] {
    padding-left: 20px;
  }

  .landing-how__timeline[b-w2f4gsw9tk] {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .timeline-arrow[b-w2f4gsw9tk] {
    transform: rotate(90deg);
    margin: 12px 0 12px 28px;
    align-self: flex-start;
  }

  .timeline-step[b-w2f4gsw9tk] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    width: 100%;
  }

  .timeline-step__content[b-w2f4gsw9tk] {
    padding-top: 8px;
    padding-inline: 0;
  }

  /* Platform Features (Bento Grid) Tablet Layout */
  .bento-box--task[b-w2f4gsw9tk],
  .bento-box--chat[b-w2f4gsw9tk] {
    grid-column: span 12;
  }
  .bento-box--filter[b-w2f4gsw9tk],
  .bento-box--catalog[b-w2f4gsw9tk] {
    grid-column: span 6;
  }
  .bento-box--payment[b-w2f4gsw9tk],
  .bento-box--manage[b-w2f4gsw9tk],
  .bento-box--settings[b-w2f4gsw9tk] {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .landing-hero__inner[b-w2f4gsw9tk] {
    flex-direction: column-reverse;
    text-align: center;
    padding: 24px;
  }

  .landing-hero__desc[b-w2f4gsw9tk] {
    margin: 0 auto;
  }

  .landing-hero__actions[b-w2f4gsw9tk] {
    flex-direction: column;
    align-items: center;
  }

  .home__button[b-w2f4gsw9tk] {
    width: 100%;
  }

  .landing-hero__image-container[b-w2f4gsw9tk] {
    max-width: 100%;
    width: calc(100% + 48px);
    margin-top: -24px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 0;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Compact spacing & titles for mobile */
  .landing-section-title[b-w2f4gsw9tk] {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .landing-hero__title[b-w2f4gsw9tk] {
    font-size: 28px;
  }

  .landing-hero[b-w2f4gsw9tk],
  .landing-why[b-w2f4gsw9tk],
  .landing-target[b-w2f4gsw9tk],
  .landing-how[b-w2f4gsw9tk],
  .landing-features[b-w2f4gsw9tk],
  .landing-recommendations[b-w2f4gsw9tk],
  .landing-reviews[b-w2f4gsw9tk],
  .landing-faq[b-w2f4gsw9tk],
  .landing-mobile-app[b-w2f4gsw9tk] {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Platform Features (Bento Grid) Mobile Layout */
  .landing-features__grid[b-w2f4gsw9tk] {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bento-box[b-w2f4gsw9tk] {
    grid-column: span 12 !important;
    padding: 24px;
    border-radius: 16px;
  }
}

@media (max-width: 576px) {
  .why-card[b-w2f4gsw9tk] {
    width: 100%;
  }
}

/* 5th Block: Platform Features (Bento Grid) */
.landing-features[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}

.landing-features__grid[b-w2f4gsw9tk] {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-box[b-w2f4gsw9tk] {
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.dark .bento-box[b-w2f4gsw9tk] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
}

.bento-box:hover[b-w2f4gsw9tk] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

/* Col Spans */
.bento-box--task[b-w2f4gsw9tk] {
  grid-column: span 8;
}

.bento-box--filter[b-w2f4gsw9tk] {
  grid-column: span 4;
}

.bento-box--catalog[b-w2f4gsw9tk] {
  grid-column: span 4;
}

.bento-box--chat[b-w2f4gsw9tk] {
  grid-column: span 8;
}

.bento-box--payment[b-w2f4gsw9tk] {
  grid-column: span 4;
}

.bento-box--manage[b-w2f4gsw9tk] {
  grid-column: span 4;
}

.bento-box--settings[b-w2f4gsw9tk] {
  grid-column: span 4;
}

/* Bento Box Text Styling */
.bento-box__content[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bento-box__icon[b-w2f4gsw9tk] {
  background: var(--color-bg-primary, #ffffff);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
}

.dark .bento-box__icon[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.bento-box__title[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--color-text-title);
  margin: 0;
}

.bento-box__desc[b-w2f4gsw9tk] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.bento-box__visual[b-w2f4gsw9tk] {
  width: 100%;
  border-radius: 12px;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  padding: 16px;
  box-sizing: border-box;
  flex-grow: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dark .bento-box__visual[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.01);
  border-color: rgba(255, 255, 255, 0.04);
}

.bento-box__visual--img[b-w2f4gsw9tk] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.bento-visual-img[b-w2f4gsw9tk] {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.bento-box--catalog .professionals__main-card[b-w2f4gsw9tk] {
  width: 100%;
  max-width: 500px;
}

.bento-box--task .task-card[b-w2f4gsw9tk] {
  width: 100%;
  max-width: 800px;
}

.bento-box:hover .bento-visual-img[b-w2f4gsw9tk] {
  transform: scale(1.02);
}


/* Bento Box 1: Mock Form */
.mock-form[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-form__row[b-w2f4gsw9tk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-light);
}

.mock-form__row:last-child[b-w2f4gsw9tk] {
  border-bottom: none;
  padding-bottom: 0;
}

.dark .mock-form__row[b-w2f4gsw9tk] {
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-form__label[b-w2f4gsw9tk] {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.mock-form__value[b-w2f4gsw9tk] {
  color: var(--color-text-primary);
  font-weight: 600;
}

.mock-badge[b-w2f4gsw9tk] {
  background: var(--color-bg-gray-4, #f1f5f9);
  color: var(--color-text-primary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.dark .mock-badge[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.05);
}

.mock-badge--blue[b-w2f4gsw9tk] {
  background: var(--badge-blue-bg, #eff6ff);
  color: var(--color-blue-100, #396df0);
}

.dark .mock-badge--blue[b-w2f4gsw9tk] {
  background: rgba(57, 109, 240, 0.1);
}

/* Bento Box 2: Mock Filter Grid */
.mock-filters-grid[b-w2f4gsw9tk] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.filter-pill[b-w2f4gsw9tk] {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.dark .filter-pill[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

.filter-pill:nth-child(2)[b-w2f4gsw9tk],
.filter-pill:nth-child(7)[b-w2f4gsw9tk] {
  border-color: var(--color-blue-100, #396df0);
  color: var(--color-blue-100, #396df0);
  background: var(--badge-blue-bg, #eff6ff);
}

.dark .filter-pill:nth-child(2)[b-w2f4gsw9tk],
.dark .filter-pill:nth-child(7)[b-w2f4gsw9tk] {
  background: rgba(57, 109, 240, 0.1);
}

/* Bento Box 3: Mock Performer Card */
.mock-profile-card[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-card__head[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-card__avatar[b-w2f4gsw9tk] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-blue-100, #396df0);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.profile-card__info[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.profile-card__name[b-w2f4gsw9tk] {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.profile-card__rating[b-w2f4gsw9tk] {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.profile-card__badge[b-w2f4gsw9tk] {
  font-size: 10px;
  font-weight: 700;
  background: #fef3c7;
  color: #d97706;
  padding: 3px 6px;
  border-radius: 4px;
}

.dark .profile-card__badge[b-w2f4gsw9tk] {
  background: rgba(217, 119, 6, 0.15);
}

.profile-card__skills[b-w2f4gsw9tk] {
  display: flex;
  gap: 6px;
}

.skill-tag[b-w2f4gsw9tk] {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  padding: 4px 8px;
  border-radius: 6px;
}

.dark .skill-tag[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

.profile-card__bio[b-w2f4gsw9tk] {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Bento Box 4: Mock Chat */
.mock-chat[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.chat-bubble[b-w2f4gsw9tk] {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-bubble__text[b-w2f4gsw9tk] {
  word-break: break-word;
}

.chat-bubble__time[b-w2f4gsw9tk] {
  align-self: flex-end;
  font-size: 9px;
  color: var(--color-text-secondary);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-bubble--outgoing .chat-bubble__time[b-w2f4gsw9tk] {
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble--incoming[b-w2f4gsw9tk] {
  align-self: flex-start;
  background: var(--color-bg-secondary, #f1f5f9);
  color: var(--color-text-primary);
  border-bottom-left-radius: 2px;
}

.dark .chat-bubble--incoming[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.05);
}

.chat-bubble--outgoing[b-w2f4gsw9tk] {
  align-self: flex-end;
  background: var(--color-blue-100, #396df0);
  color: #ffffff;
  border-bottom-right-radius: 2px;
}

/* Chat Input Area in Bento box */
.mock-chat-input-area[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  width: 100%;
}

.mock-input-wrapper[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 4px 8px;
  flex-grow: 1;
  background: var(--color-bg-primary, #ffffff);
}

.dark .mock-input-wrapper[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-input-wrapper input[b-w2f4gsw9tk] {
  border: none;
  outline: none;
  flex-grow: 1;
  margin-left: 8px;
  font-size: 13px;
  background: transparent;
  color: var(--color-text-primary);
  width: 100%;
}

.mock-attach-btn[b-w2f4gsw9tk] {
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.mock-send-btn[b-w2f4gsw9tk] {
  background: var(--color-bg-dark, #0f172a);
  border-radius: 8px;
  padding: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.dark .mock-send-btn[b-w2f4gsw9tk] {
  background: var(--color-bg-primary, #ffffff);
  color: var(--color-text-primary);
}

/* Bento Box 5: Secure Payments */
.mock-payments[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.mock-payments[b-w2f4gsw9tk]  .wallet-page__history-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-bg-gray);
  padding-bottom: 12px;
  width: 100%;
  text-align: left;
}

.mock-payments[b-w2f4gsw9tk]  .wallet-page__history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Bento Box 6: Task Management */
.mock-tasks[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.mock-task-row[b-w2f4gsw9tk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.status-badge[b-w2f4gsw9tk] {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.status-badge--active[b-w2f4gsw9tk] {
  background: var(--badge-blue-bg, #eff6ff);
  color: var(--color-blue-100, #396df0);
}

.dark .status-badge--active[b-w2f4gsw9tk] {
  background: rgba(57, 109, 240, 0.1);
}

.status-badge--done[b-w2f4gsw9tk] {
  background: #ecfdf5;
  color: #059669;
}

.dark .status-badge--done[b-w2f4gsw9tk] {
  background: rgba(5, 150, 105, 0.1);
}

.status-badge--neutral[b-w2f4gsw9tk] {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--border-light);
}

.dark .status-badge--neutral[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

/* Bento Box 7: Settings Toggle */
.mock-settings[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.mock-setting-item[b-w2f4gsw9tk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.mock-toggle[b-w2f4gsw9tk] {
  width: 34px;
  height: 18px;
  border-radius: 10px;
  background: var(--color-bg-gray-4, #cbd5e1);
  position: relative;
  cursor: pointer;
}

.mock-toggle[b-w2f4gsw9tk]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s;
}

.mock-toggle--active[b-w2f4gsw9tk] {
  background: var(--color-blue-100, #396df0);
}

.mock-toggle--active[b-w2f4gsw9tk]::after {
  transform: translateX(16px);
}

/* Responsiveness for features bento grid */
@media (max-width: 1024px) {
  .landing-features__grid[b-w2f4gsw9tk] {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bento-box[b-w2f4gsw9tk] {
    grid-column: span 1 !important;
    padding: 24px;
  }
}

/* 6th Block: Recommended Specialists */
.landing-recommendations[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--color-bg-secondary);
}

.dark .landing-recommendations[b-w2f4gsw9tk] {
  background: var(--color-bg-secondary);
}

.landing-recommendations__grid[b-w2f4gsw9tk] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.guard-card[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--color-bg-primary, #ffffff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .guard-card[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.guard-card:hover[b-w2f4gsw9tk] {
  transform: translateY(-6px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.guard-card__photo-container[b-w2f4gsw9tk] {
  position: relative;
  width: 100%;
  height: 240px;
  background: var(--color-bg-gray-4, #f1f5f9);
  overflow: hidden;
}

.dark .guard-card__photo-container[b-w2f4gsw9tk] {
  background: rgba(255, 255, 255, 0.05);
}

.guard-card__photo[b-w2f4gsw9tk] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.guard-card:hover .guard-card__photo[b-w2f4gsw9tk] {
  transform: scale(1.04);
}

.guard-card__rating-badge[b-w2f4gsw9tk] {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.guard-card__rating-val[b-w2f4gsw9tk] {
  color: #fbbf24;
}

.guard-card__reviews-count[b-w2f4gsw9tk] {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
}

.guard-card__info[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex: 1;
}

.guard-card__header[b-w2f4gsw9tk] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.guard-card__name[b-w2f4gsw9tk] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-title);
  margin: 0;
}

.guard-card__age[b-w2f4gsw9tk] {
  font-size: 14px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.guard-card__exp-badge[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.guard-card__exp-badge[b-w2f4gsw9tk]  svg path {
  fill: var(--color-blue-100, #396df0);
}

.guard-card__skills[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guard-card__skills-label[b-w2f4gsw9tk] {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guard-card__skills-list[b-w2f4gsw9tk] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guard-card__footer[b-w2f4gsw9tk] {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.dark .guard-card__footer[b-w2f4gsw9tk] {
  border-color: rgba(255, 255, 255, 0.05);
}

.guard-card__price[b-w2f4gsw9tk] {
  display: flex;
  align-items: baseline;
  color: var(--color-text-primary);
}

.guard-card__price-value[b-w2f4gsw9tk] {
  font-size: 22px;
  font-weight: 700;
  font-family: "Mulish", "Arial", sans-serif;
}

.guard-card__price-unit[b-w2f4gsw9tk] {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-left: 2px;
}

.guard-card__price-separator[b-w2f4gsw9tk] {
  margin-inline: 8px;
  color: var(--color-text-secondary);
  opacity: 0.5;
}

.guard-card__actions[b-w2f4gsw9tk] {
  display: flex;
  gap: 8px;
  width: 100%;
}

.guard-card__btn[b-w2f4gsw9tk],
.guard-card__btn-sec[b-w2f4gsw9tk] {
  flex: 1;
  min-width: 0 !important;
  height: 40px !important;
  font-size: 13.5px !important;
  padding-inline: 8px !important;
}

/* 7th Block: Customer Reviews */
.landing-reviews[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary, #ffffff);
}


.landing-reviews__container[b-w2f4gsw9tk] {
  max-width: 850px;
  margin: 32px auto 0 auto;
  padding: 32px;
}

.professional-page__reviews[b-w2f4gsw9tk] {
  background: transparent;
}

.professional-page__reviews-body[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.professional-page__reviews-body-item[b-w2f4gsw9tk] {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-bg-gray);
}

.professional-page__reviews-body-item:last-child[b-w2f4gsw9tk] {
  padding-bottom: 0;
  border-bottom: none;
}

.professional-page__reviews-item[b-w2f4gsw9tk] {
}

.professional-page__reviews-item-head[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.professional-page__reviews-item-head-right[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.professional-page__reviews-item-head-right-date[b-w2f4gsw9tk] {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.professional-page__reviews-item-head-right-stars[b-w2f4gsw9tk] {
  display: flex;
  align-items: center;
  gap: 2px;
}

.professional-page__reviews-item-head-right-star[b-w2f4gsw9tk] {
  width: 18px;
  height: 18px;
}

[b-w2f4gsw9tk] .professional-page__reviews-item-head-right-star path {
  fill: var(--color-bg-gray-9, #cbd5e1);
}

[b-w2f4gsw9tk] .professional-page__reviews-item-head-right-star--active path {
  fill: var(--color-yellow, #fbbf24);
}

.professional-page__reviews-item-text[b-w2f4gsw9tk] {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0;
}

/* Responsiveness for Recommended Specialists & Reviews */
@media (max-width: 1200px) {
  .landing-recommendations__grid[b-w2f4gsw9tk] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .landing-recommendations__grid[b-w2f4gsw9tk] {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .guard-card[b-w2f4gsw9tk] {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }

  .guard-card__photo-container[b-w2f4gsw9tk] {
    height: 280px;
  }

  .landing-reviews__container[b-w2f4gsw9tk] {
    padding: 20px;
    margin-top: 20px;
  }

  .professional-page__reviews-item-head[b-w2f4gsw9tk] {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .professional-page__reviews-item-head-right[b-w2f4gsw9tk] {
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
  }
}

/* Isolated FAQ and Mobile Application CSS moved to LandingFaq and LandingAppDownload components */

.bento-box--settings .bento-box__visual[b-w2f4gsw9tk],
.bento-box--manage .bento-box__visual[b-w2f4gsw9tk] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.bento-box--manage .bento-box__visual[b-w2f4gsw9tk] {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mock-sidebar[b-w2f4gsw9tk] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  pointer-events: none; /* disable navigation from landing page sidebar */
}

.profile-sidebar__avatar[b-w2f4gsw9tk] {
  border-radius: var(--border-radius, 12px);
  background: var(--color-bg-primary);
  padding: 16px;
}

[b-w2f4gsw9tk] .profile-sidebar__nav {
  font-size: 13px;
}

[b-w2f4gsw9tk] .profile-sidebar__nav-item--red {
  display: none; /* hide logout button on landing */
}

/* ===== Mobile overrides for embedded components inside landing bento cards ===== */
@media (max-width: 1024px) {
  /* Keep mock-sidebar constrained inside its card */
  .mock-sidebar[b-w2f4gsw9tk] {
    max-width: 100% !important;
  }

  /* Override FindFilters fullscreen overlay behavior on mobile.
     The component's own CSS makes it position:fixed at ≤1024px,
     but on the landing page it should stay inline within its card. */
  .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    transform: none !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    border-radius: var(--border-radius, 12px) !important;
    overflow: hidden !important;
    transition: none !important;
  }

  .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters--open {
    transform: none !important;
  }

  .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-head {
    display: none !important;
  }

  .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-footer {
    display: none !important;
  }

  .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-list {
    max-height: 370px !important;
    overflow-y: auto !important;
    padding-top: 0 !important;
  }

  .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-col {
    border-bottom: none !important;
  }
}

/* Scoped styles for Bento Box filter card */
.bento-box--filter .bento-box__visual[b-w2f4gsw9tk] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Force specific styling on the FindFilters component inside the bento card using ::deep */
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters {
  width: 100% !important;
  max-width: 360px !important;
  height: 480px !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  gap: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--border-light) !important;
}

/* Hide the Close button in the filter header since it is embedded */
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-head button {
  display: none !important;
}

/* Hide the Apply/Reset buttons footer */
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-footer {
  display: none !important;
}

/* Make the filters list scrollable and fit the constrained height */
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-list {
  overflow-y: auto !important;
  flex-grow: 1 !important;
  padding-right: 4px !important;
}

/* Custom scrollbar for the scrollable list */
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-list::-webkit-scrollbar {
  width: 4px;
}
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-list::-webkit-scrollbar-track {
  background: transparent;
}
.bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-list::-webkit-scrollbar-thumb {
  background: var(--color-bg-gray-4, #cbd5e1);
  border-radius: 2px;
}
.dark .bento-box--filter[b-w2f4gsw9tk]  .professionals__filters-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

.landing-reviews[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}

.landing-faq[b-w2f4gsw9tk] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}
/* /Components/Lending/LendingComponents/LandingAppDownload.razor.rz.scp.css */
.landing-mobile-app[b-8o85tiwng8] {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--color-bg-primary, #ffffff);
}

.landing-mobile-app__inner[b-8o85tiwng8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 48px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
}

.dark .landing-mobile-app__inner[b-8o85tiwng8] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
  box-shadow: none;
}

.landing-mobile-app__content[b-8o85tiwng8] {
  flex: 0 1 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.landing-mobile-app__title[b-8o85tiwng8] {
  font-family: "Mulish", "Arial", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text-title);
  margin: 0;
  line-height: 1.25;
}

.landing-mobile-app__desc[b-8o85tiwng8] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 520px;
}

.landing-mobile-app__buttons[b-8o85tiwng8] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.app-btn[b-8o85tiwng8] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--color-bg-dark, #0f172a);
  color: var(--color-text-light, #ffffff);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  width: auto;
  min-width: 170px;
}

.dark .app-btn[b-8o85tiwng8] {
  background: var(--color-bg-primary, #ffffff);
  color: var(--color-text-primary, #0f172a);
}

.app-btn:hover[b-8o85tiwng8] {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  opacity: 0.95;
}

.dark .app-btn:hover[b-8o85tiwng8] {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.app-btn__icon[b-8o85tiwng8] {
  flex-shrink: 0;
  color: inherit;
}

.app-btn__text[b-8o85tiwng8] {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.app-btn__subtitle[b-8o85tiwng8] {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
  font-weight: 600;
  line-height: 1.1;
}

.app-btn__title[b-8o85tiwng8] {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.landing-mobile-app__image-container[b-8o85tiwng8] {
  flex: 0 1 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-mobile-app__image[b-8o85tiwng8] {
  max-width: 700px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.08));
}

@media (max-width: 1024px) {
  .landing-mobile-app__inner[b-8o85tiwng8] {
    flex-direction: column-reverse;
    gap: 40px;
    padding: 32px 24px;
    text-align: center;
  }
  .landing-mobile-app__content[b-8o85tiwng8] {
    align-items: center;
  }
  .landing-mobile-app__desc[b-8o85tiwng8] {
    margin: 0 auto;
  }
  .landing-mobile-app__buttons[b-8o85tiwng8] {
    justify-content: center;
  }
  .landing-mobile-app__image[b-8o85tiwng8] {
    max-width: 440px;
  }
}

@media (max-width: 1024px) {
  .landing-mobile-app[b-8o85tiwng8] {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
/* /Components/Lending/LendingComponents/LandingFaq.razor.rz.scp.css */
.landing-faq__accordion[b-92q31wdf5n] {
  max-width: 850px;
  margin: 32px auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item[b-92q31wdf5n] {
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .faq-item[b-92q31wdf5n] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
  box-shadow: none;
}

.faq-item:hover[b-92q31wdf5n] {
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.faq-item--open[b-92q31wdf5n] {
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.faq-item__trigger[b-92q31wdf5n] {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  outline: none;
}

.faq-item__question[b-92q31wdf5n] {
  font-family: "Mulish", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-title);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.faq-item:hover .faq-item__question[b-92q31wdf5n],
.faq-item--open .faq-item__question[b-92q31wdf5n] {
  color: var(--color-blue-100, #396df0);
}

.faq-item__icon-wrapper[b-92q31wdf5n] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.faq-item--open .faq-item__icon-wrapper[b-92q31wdf5n] {
  color: var(--color-blue-100, #396df0);
}

.faq-icon--rotated[b-92q31wdf5n] {
  transform: rotate(45deg);
}

.faq-item__content-wrapper[b-92q31wdf5n] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
  overflow: hidden;
}

.faq-item__content-wrapper--open[b-92q31wdf5n] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item__content-inner[b-92q31wdf5n] {
  min-height: 0;
}

.faq-item__content[b-92q31wdf5n] {
  padding: 0 24px 20px 24px;
}

.faq-item__answer[b-92q31wdf5n] {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
/* /Components/Lending/LendingComponents/MockCompanyStats.razor.rz.scp.css */
.mock-stats[b-54krkar8rd] {
  width: 100%;
  max-width: 340px;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.dark .mock-stats[b-54krkar8rd] {
  box-shadow: none;
}

.mock-stats__header[b-54krkar8rd] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.mock-stats__title[b-54krkar8rd] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-title);
}

.mock-stats__period[b-54krkar8rd] {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.mock-stats__main-card[b-54krkar8rd] {
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.3s ease;
}

.mock-stats__main-info[b-54krkar8rd] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.mock-stats__main-label[b-54krkar8rd] {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.mock-stats__main-val-group[b-54krkar8rd] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-stats__trend[b-54krkar8rd] {
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 6px;
}

.mock-stats__trend--up[b-54krkar8rd] {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-green, #10b981);
}

.mock-stats__mini-graph[b-54krkar8rd] {
  display: flex;
  align-items: center;
  height: 38px;
}

.mock-stats__svg-graph[b-54krkar8rd] {
  width: 90px;
  height: 38px;
  display: block;
  overflow: visible;
}

.mock-stats__grid[b-54krkar8rd] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mock-sub-stat[b-54krkar8rd] {
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.mock-sub-stat__label[b-54krkar8rd] {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.mock-sub-stat__value[b-54krkar8rd] {
  font-family: "Mulish", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-title);
}

.mock-sub-stat__value-group[b-54krkar8rd] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}
/* /Components/Lending/LendingComponents/MockDocuments.razor.rz.scp.css */
.profile-documents[b-m4kcoct4ir] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.profile-documents__progress[b-m4kcoct4ir] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 8px;
}
.profile-documents__progress-title[b-m4kcoct4ir] {
  grid-area: 1 / 1 / 2 / 2;
}
.profile-documents__progress-status[b-m4kcoct4ir] {
  grid-area: 1 / 2 / 2 / 3;
  font-size: 14px;
  line-height: 1.43;
  text-align: right;
  color: var(--color-blue-100);
}
.profile-documents__progress--approved .profile-documents__progress-status[b-m4kcoct4ir] {
  color: var(--color-green-50);
}
.profile-documents__progress-bar[b-m4kcoct4ir] {
  grid-area: 2 / 1 / 3 / 3;
  border-radius: 8px;
  height: 6px;
  background: var(--color-bg-gray-7);
  position: relative;
}
.profile-documents__progress--approved .profile-documents__progress-bar[b-m4kcoct4ir] {
  color: var(--color-green-50);
}
.profile-documents__progress-line[b-m4kcoct4ir] {
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: 8px;
}
.profile-documents__progress-circle[b-m4kcoct4ir] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-bg-gray-7);
  border: 2px solid var(--color-bg-primary);
}
.profile-documents__progress-circle--fill[b-m4kcoct4ir] {
  background: currentColor;
}
.profile-documents__progress-circle--end[b-m4kcoct4ir] {
  left: auto;
  right: 0;
}

.profile-documents__section[b-m4kcoct4ir] {
}
.profile-documents__section-head[b-m4kcoct4ir] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.profile-documents__section-document[b-m4kcoct4ir] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-documents__section-document-name[b-m4kcoct4ir] {
  font-size: 12px;
  line-height: 1.33;
  color: var(--color-text-secondary);
  padding-left: 28px;
  width: fit-content;
  user-select: none;
}

@media (max-width: 576px) {
  .profile-documents[b-m4kcoct4ir] {
    gap: 12px;
  }
  .profile-documents__progress[b-m4kcoct4ir] {
    display: flex;
    flex-direction: column;
    row-gap: 0;
  }
  .profile-documents__progress-status[b-m4kcoct4ir] {
    text-align: left;
    order: 3;
  }
  .profile-documents__progress-bar[b-m4kcoct4ir] {
    margin-block: 8px 12px;
    order: 2;
  }
}
/* /Components/Lending/LendingComponents/MockStaffList.razor.rz.scp.css */
.profile-staff__main[b-fggk290an8] {
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
}

.profile-staff__main-head[b-fggk290an8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-staff__main-head-link[b-fggk290an8] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-title);
}

.profile-staff__main-body[b-fggk290an8] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mock-search-input[b-fggk290an8] {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--color-bg-primary, #ffffff);
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
}

.dark .mock-search-input[b-fggk290an8] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-search-input input[b-fggk290an8] {
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: var(--color-text-primary);
  width: 100%;
}

.profile-staff__main-body-list[b-fggk290an8] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-staff__main-body-item[b-fggk290an8] {
  padding: 16px;
  border-radius: var(--border-radius, 12px);
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  width: 100%;
}

.dark .profile-staff__main-body-item[b-fggk290an8] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
  box-shadow: none;
}

/* StaffCard styles */
.staff-card[b-fggk290an8] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-align: left;
}

.staff-card__head[b-fggk290an8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mock-toggle-area[b-fggk290an8] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.staff-card__specialties[b-fggk290an8] {
  margin-block: 8px 12px;
}

.staff-card__specialties-label[b-fggk290an8] {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  margin-top: 0;
}

.staff-card__specialties-list[b-fggk290an8] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-card__grid[b-fggk290an8] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-card__grid-item[b-fggk290an8] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.staff-card__grid-label[b-fggk290an8] {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.staff-card__grid-value[b-fggk290an8] {
  font-size: 14px;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-card__grid-value span[b-fggk290an8]::after {
  content: ", ";
}

.staff-card__grid-value span:last-child[b-fggk290an8]:after {
  content: "";
}

@media (max-width: 1024px) {
  .staff-card__specialties-label[b-fggk290an8] {
    font-size: 12px;
  }
  .staff-card__grid-label[b-fggk290an8] {
    font-size: 12px;
  }
  .staff-card__grid-value[b-fggk290an8] {
    font-size: 13px;
  }
}
/* /Components/Lending/LendingComponents/MockTaskDashboard.razor.rz.scp.css */
.mock-dashboard[b-tqxofjlvug] {
  width: 100%;
  max-width: 320px;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.dark .mock-dashboard[b-tqxofjlvug] {
  box-shadow: none;
}

.mock-dashboard__header[b-tqxofjlvug] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.mock-dashboard__title[b-tqxofjlvug] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-title);
}

.mock-dashboard__count[b-tqxofjlvug] {
  font-size: 11px;
  font-weight: 700;
  background: var(--color-bg-gray-4, #cbd5e1);
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.mock-dashboard__list[b-tqxofjlvug] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-task-item[b-tqxofjlvug] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.3s ease;
}

.mock-task-item__left[b-tqxofjlvug] {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.mock-task-icon[b-tqxofjlvug] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-task-icon--active[b-tqxofjlvug] {
  background: rgba(57, 109, 240, 0.1);
  color: var(--color-blue-100, #396df0);
}

.mock-task-icon--done[b-tqxofjlvug] {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-green, #10b981);
}

.mock-task-info[b-tqxofjlvug] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mock-task-name[b-tqxofjlvug] {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.mock-task-status[b-tqxofjlvug] {
  font-size: 10px;
  font-weight: 600;
}

.mock-task-status--active[b-tqxofjlvug] {
  color: var(--color-blue-100, #396df0);
}

.mock-task-status--done[b-tqxofjlvug] {
  color: var(--color-green, #10b981);
}

.mock-task-item__right[b-tqxofjlvug] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mock-task-actions[b-tqxofjlvug] {
  display: flex;
  gap: 6px;
}

.mock-action-btn[b-tqxofjlvug] {
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 0;
  transition: all 0.2s ease;
}

.mock-action-btn:hover[b-tqxofjlvug] {
  background: var(--color-bg-primary-hover);
  color: var(--color-blue-100, #396df0);
  border-color: var(--color-blue-100, #396df0);
}
/* /Components/Lending/LendingComponents/StaticExecutorCard.razor.rz.scp.css */
/* Outer profile card wrapper matching landing page card styling */
.bg-features__profile-card[b-vqmsxz8mbu] {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Outer Layout container matching ExecutorCard.razor */
.professional-page__inner[b-vqmsxz8mbu] {
  gap: 24px;
  display: grid;
  grid-template-columns: minmax(300px, 371px) auto;
  width: 100%;
  text-align: left;
}

.professional-page__left[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  max-width: 371px;
  justify-self: end;
  width: 100%;
  min-width: 300px;
  height: fit-content;
}

.professional-page__center[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 450px;
  max-width: 681px;
}

/* Photos Section */
.professional-page__photos[b-vqmsxz8mbu] {
  display: flex;
  gap: 16px;
  height: 420px;
  width: 100%;
}

.professional-page__photos-swiper[b-vqmsxz8mbu] {
  max-width: 75px;
  width: 100%;
  margin-inline: 0;
}

.swiper-wrapper[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swiper-slide[b-vqmsxz8mbu] {
  height: 75px;
  width: 75px;
}

.professional-page__photos-button[b-vqmsxz8mbu] {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0.25;
  border: 1px solid var(--border-light);
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: opacity 0.2s ease-in-out;
}

.professional-page__photos-button--active[b-vqmsxz8mbu] {
  opacity: 1;
  border-color: var(--color-blue-100, #396df0);
}

.professional-page__photos-button img[b-vqmsxz8mbu] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.professional-page__photos-current[b-vqmsxz8mbu] {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-light);
}

.professional-page__photos-current img[b-vqmsxz8mbu] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info & Details Section */
.professional-page__info[b-vqmsxz8mbu] {
  border-radius: var(--border-radius, 12px);
  padding: 16px;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info__head[b-vqmsxz8mbu] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.info__head-left[b-vqmsxz8mbu] {
  max-width: 100%;
  min-width: 0;
}

.info__head-name[b-vqmsxz8mbu] {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-title);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.info__head-reviews[b-vqmsxz8mbu] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info__head-rating[b-vqmsxz8mbu] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.info__head-reviews-missions[b-vqmsxz8mbu] {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.info__head-right[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  align-items: end;
  flex-shrink: 0;
}

.info__head-right-list[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.info__head-right-item[b-vqmsxz8mbu] {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: end;
  font-size: 12px;
  text-align: right;
  color: var(--color-text-secondary);
}

.info__head-body[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info__head-body-col[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info__head-body-col-title[b-vqmsxz8mbu] {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-title);
}

.info__head-body-specialties[b-vqmsxz8mbu] {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.info__head-body-parameters[b-vqmsxz8mbu] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.info__head-body-parameters-item[b-vqmsxz8mbu] {
  display: flex;
  flex-direction: column;
}

.info__head-body-parameters-label[b-vqmsxz8mbu] {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.info__head-body-parameters-value[b-vqmsxz8mbu] {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.info__head-body-parameters-item--lang .info__head-body-parameters-value span[b-vqmsxz8mbu]::after {
  content: ", ";
}

.info__head-body-parameters-item--lang .info__head-body-parameters-value span:last-child[b-vqmsxz8mbu]::after {
  content: "";
  display: none;
}

.info__head-body-resume[b-vqmsxz8mbu] {
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

/* Pricing Section */
.professional-page__price[b-vqmsxz8mbu] {
  border-radius: var(--border-radius, 12px);
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.professional-page__price-button[b-vqmsxz8mbu] {
  width: 100%;
}


/* Responsiveness mirroring ExecutorCard.razor */
@media (max-width: 1024px) {
  .professional-page__inner[b-vqmsxz8mbu] {
    gap: 12px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
  }
  .professional-page__left[b-vqmsxz8mbu] {
    max-width: none;
    min-width: 0;
  }
  .professional-page__center[b-vqmsxz8mbu] {
    min-width: 0;
  }

  .professional-page__photos[b-vqmsxz8mbu] {
    flex-direction: column-reverse;
    height: auto;
    gap: 12px;
  }
  .professional-page__photos-current[b-vqmsxz8mbu] {
    display: block;
    width: 100%;
    height: 300px;
    border-radius: 12px;
  }
  .professional-page__photos-swiper[b-vqmsxz8mbu] {
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none; /* Hide scrollbar on Firefox */
  }
  .professional-page__photos-swiper[b-vqmsxz8mbu]::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Chrome/Safari */
  }
  .swiper-wrapper[b-vqmsxz8mbu] {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
  }
  .swiper-slide[b-vqmsxz8mbu] {
    height: 64px;
    width: 64px;
    flex-shrink: 0;
  }

  .info__head-body-parameters[b-vqmsxz8mbu] {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
  .info__head-body-parameters-item[b-vqmsxz8mbu] {
    flex-direction: row;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-bg-gray, #e2e8f0);
  }
  .info__head-body-parameters-label[b-vqmsxz8mbu] {
    width: 100%;
  }
  .info__head-body-parameters-value[b-vqmsxz8mbu] {
    width: 100%;
    font-size: 14px;
  }
}
/* /Components/Lending/PscLanding.razor.rz.scp.css */
.container[b-5sa6dl7834] {
  max-width: 1350px;
  margin: 0 auto;
  padding-inline: 15px;
  box-sizing: border-box;
}

.home-card[b-5sa6dl7834] {
  border-radius: 16px;
  padding: 32px;
  background: var(--color-bg-primary);
  box-shadow:
    0 2px 35px -2px rgba(0, 0, 0, 0.1),
    0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dark .home-card[b-5sa6dl7834] {
  background: var(--color-bg-primary);
  box-shadow:
    0 2px 35px -2px rgba(0, 0, 0, 0.3),
    0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

.landing-section-title[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--color-text-title);
  text-align: center;
  margin-top: 0;
  margin-bottom: 32px;
}

/* 1st Block: Hero */
.psc-hero[b-5sa6dl7834] {
  padding-top: 40px;
  padding-bottom: 40px;
}


.psc-hero__inner[b-5sa6dl7834] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--color-bg-primary);
}


.psc-hero__content[b-5sa6dl7834] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.psc-hero__title[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.15;
  color: var(--color-text-title);
  margin: 0;
}

.psc-hero__desc[b-5sa6dl7834] {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 580px;
}

.psc-hero__actions[b-5sa6dl7834] {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.home__button[b-5sa6dl7834] {
  height: 48px;
  border-radius: 8px;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
  width: auto;
  min-width: 180px;
}

.home__button--primary[b-5sa6dl7834] {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}


.home__button--primary:hover[b-5sa6dl7834] {
  opacity: 0.9;
  transform: translateY(-1px);
}

.home__button--secondary[b-5sa6dl7834] {
  background: var(--color-bg-gray);
  color: var(--color-text-primary);
}


.home__button--secondary:hover[b-5sa6dl7834] {
  background: var(--color-bg-gray);
  transform: translateY(-1px);
}


.psc-hero__image-container[b-5sa6dl7834] {
  flex: 0 0 42%;
  max-width: 450px;
  display: flex;
  justify-content: center;
  align-self: stretch;
  margin-top: -32px;
  margin-bottom: -32px;
  margin-right: -32px;
  overflow: hidden;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.psc-hero__image[b-5sa6dl7834] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2nd Block: Why HireGuard */
.psc-why[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--color-bg-secondary);
}


.psc-why__grid[b-5sa6dl7834] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why-card[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  text-align: left;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .why-card[b-5sa6dl7834] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
}

.why-card:hover[b-5sa6dl7834] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.why-card__icon[b-5sa6dl7834] {
  background: var(--color-bg-gray-4, #f1f5f9);
  border-radius: 12px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
}

.dark .why-card__icon[b-5sa6dl7834] {
  background: rgba(255, 255, 255, 0.05);
}

.why-card__title[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-title);
  margin: 0;
}

.why-card__desc[b-5sa6dl7834] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Adjust grid flow for 5 items: first row has 3, second row has 2 centered */
@media (min-width: 1025px) {
  .psc-why__grid[b-5sa6dl7834] {
    grid-template-columns: repeat(6, 1fr);
  }

  .why-card:nth-child(1)[b-5sa6dl7834],
  .why-card:nth-child(2)[b-5sa6dl7834],
  .why-card:nth-child(3)[b-5sa6dl7834] {
    grid-column: span 2;
  }

  .why-card:nth-child(4)[b-5sa6dl7834] {
    grid-column: 2 / span 2;
  }

  .why-card:nth-child(5)[b-5sa6dl7834] {
    grid-column: 4 / span 2;
  }
}

/* 3rd Block: Audience */
.psc-audience[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}


.psc-audience__grid[b-5sa6dl7834] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.audience-card[b-5sa6dl7834] {
  display: flex;
  gap: 20px;
  padding: 32px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  align-items: flex-start;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .audience-card[b-5sa6dl7834] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
}

.audience-card:hover[b-5sa6dl7834] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  background: var(--color-bg-primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.dark .audience-card:hover[b-5sa6dl7834] {
  background: var(--color-bg-primary-hover);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.audience-card__icon-wrapper[b-5sa6dl7834] {
  background: var(--color-bg-primary);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dark .audience-card__icon-wrapper[b-5sa6dl7834] {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.audience-card:hover .audience-card__icon-wrapper[b-5sa6dl7834] {
  transform: scale(1.1);
  background: var(--color-blue-100, #396df0);
  color: #ffffff;
}

.audience-card__title[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--color-text-title);
  margin: 0 0 10px 0;
}

.audience-card__desc[b-5sa6dl7834] {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.audience-card__text-wrapper[b-5sa6dl7834] {
  flex: 1;
}

@media (min-width: 1025px) {
  .audience-card:nth-child(odd)[b-5sa6dl7834] {
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* 4th Block: How It Works */
.psc-steps[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-secondary);
}


.psc-steps__timeline[b-5sa6dl7834] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 48px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.psc-steps__step[b-5sa6dl7834] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  transition: all 0.3s ease;
}

.psc-steps__step-number[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--color-blue-100, #396df0);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.psc-steps__step:hover .psc-steps__step-number[b-5sa6dl7834] {
  transform: scale(1.15);
  opacity: 1;
}

.psc-steps__arrow[b-5sa6dl7834] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  align-self: center;
  margin-bottom: 40px;
}

.dark .psc-steps__step-number[b-5sa6dl7834] {
  opacity: 0.9;
}

.dark .psc-steps__arrow[b-5sa6dl7834] {
  color: rgba(57, 109, 240, 0.7);
}

.psc-steps__content[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: 8px;
}

.psc-steps__step-title[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--color-text-title);
  margin: 0;
  line-height: 1.35;
}

.psc-steps__step-desc[b-5sa6dl7834] {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.psc-steps__footer[b-5sa6dl7834] {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 5th Block: Platform Features */
.psc-features[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}


.psc-features__grid[b-5sa6dl7834] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.psc-features__card[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .psc-features__card[b-5sa6dl7834] {
  background: var(--color-bg-secondary);
  border-color: var(--border-light);
}

.psc-features__card:hover[b-5sa6dl7834] {
  transform: translateY(-4px);
  border-color: var(--color-blue-100, #396df0);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.dark .psc-features__card:hover[b-5sa6dl7834] {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.psc-features__icon[b-5sa6dl7834] {
  background: var(--color-bg-primary);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-100, #396df0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 4px;
}

.dark .psc-features__icon[b-5sa6dl7834] {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.psc-features__card-title[b-5sa6dl7834] {
  font-family: "Mulish", "Arial", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-text-title);
  margin: 0;
}

.psc-features__card-desc[b-5sa6dl7834] {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Mock Widget Layouts for Features Section */
@media (min-width: 769px) {
  .psc-features__card--documents[b-5sa6dl7834],
  .psc-features__card--payment[b-5sa6dl7834],
  .psc-features__card--chat[b-5sa6dl7834],
  .psc-features__card--staff[b-5sa6dl7834],
  .psc-features__card--stats[b-5sa6dl7834] {
    grid-column: span 2;
  }
}

.psc-features__card-content[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.psc-features__card-visual[b-5sa6dl7834] {
  width: 100%;
  border-radius: 12px;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  padding: 16px;
  box-sizing: border-box;
  flex-grow: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dark .psc-features__card-visual[b-5sa6dl7834] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
}

.psc-features__card--documents .psc-features__card-visual[b-5sa6dl7834],
.psc-features__card--payment .psc-features__card-visual[b-5sa6dl7834],
.psc-features__card--staff .psc-features__card-visual[b-5sa6dl7834],
.psc-features__card--stats .psc-features__card-visual[b-5sa6dl7834] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mock Chat Styles */
.mock-chat[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.chat-bubble[b-5sa6dl7834] {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-bubble__text[b-5sa6dl7834] {
  word-break: break-word;
}

.chat-bubble__time[b-5sa6dl7834] {
  align-self: flex-end;
  font-size: 9px;
  color: var(--color-text-secondary);
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-bubble--outgoing .chat-bubble__time[b-5sa6dl7834] {
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble--incoming[b-5sa6dl7834] {
  align-self: flex-start;
  background: var(--color-bg-secondary, #f1f5f9);
  color: var(--color-text-primary);
  border-bottom-left-radius: 2px;
}

.dark .chat-bubble--incoming[b-5sa6dl7834] {
  background: rgba(255, 255, 255, 0.05);
}

.chat-bubble--outgoing[b-5sa6dl7834] {
  align-self: flex-end;
  background: var(--color-blue-100, #396df0);
  color: #ffffff;
  border-bottom-right-radius: 2px;
}

.mock-chat-input-area[b-5sa6dl7834] {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  width: 100%;
}

.mock-input-wrapper[b-5sa6dl7834] {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 4px 8px;
  flex-grow: 1;
  background: var(--color-bg-primary, #ffffff);
}

.dark .mock-input-wrapper[b-5sa6dl7834] {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-input-wrapper input[b-5sa6dl7834] {
  border: none;
  outline: none;
  flex-grow: 1;
  margin-left: 8px;
  font-size: 13px;
  background: transparent;
  color: var(--color-text-primary);
  width: 100%;
}

.mock-attach-btn[b-5sa6dl7834] {
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.mock-send-btn[b-5sa6dl7834] {
  background: var(--color-bg-dark, #0f172a);
  border-radius: 8px;
  padding: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.dark .mock-send-btn[b-5sa6dl7834] {
  background: var(--color-bg-primary, #ffffff);
  color: var(--color-text-primary);
}

/* Mock Payments Styles */
.mock-payments[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 450px;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.dark .mock-payments[b-5sa6dl7834] {
  background: var(--color-bg-primary);
  border-color: var(--border-light);
  box-shadow: none;
}

.mock-payments[b-5sa6dl7834]  .wallet-page__history-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-bg-gray);
  padding-bottom: 12px;
  width: 100%;
  text-align: left;
}

.dark .mock-payments[b-5sa6dl7834]  .wallet-page__history-item {
  border-color: rgba(255, 255, 255, 0.05);
}

.mock-payments[b-5sa6dl7834]  .wallet-page__history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 6th Block: Active Tasks */
.psc-tasks[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-secondary);
}


.psc-tasks__grid[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 32px auto 0 auto;
}

/* 7th Block: Customer Reviews */
.psc-reviews[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}


.landing-reviews__container[b-5sa6dl7834] {
  max-width: 850px;
  margin: 32px auto 0 auto;
  padding: 32px;
}

.professional-page__reviews[b-5sa6dl7834] {
  background: transparent;
}

.professional-page__reviews-body[b-5sa6dl7834] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.professional-page__reviews-body-item[b-5sa6dl7834] {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-bg-gray);
}

.professional-page__reviews-body-item:last-child[b-5sa6dl7834] {
  padding-bottom: 0;
  border-bottom: none;
}

.professional-page__reviews-item[b-5sa6dl7834] {}

.professional-page__reviews-item-head[b-5sa6dl7834] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.professional-page__reviews-item-head-right[b-5sa6dl7834] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.professional-page__reviews-item-head-right-date[b-5sa6dl7834] {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.professional-page__reviews-item-head-right-stars[b-5sa6dl7834] {
  display: flex;
  align-items: center;
  gap: 2px;
}

.professional-page__reviews-item-head-right-star[b-5sa6dl7834] {
  width: 18px;
  height: 18px;
}

[b-5sa6dl7834] .professional-page__reviews-item-head-right-star path {
  fill: var(--color-bg-gray-9, #cbd5e1);
}

[b-5sa6dl7834] .professional-page__reviews-item-head-right-star--active path {
  fill: var(--color-yellow, #fbbf24);
}

.professional-page__reviews-item-text[b-5sa6dl7834] {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0;
}

/* Isolated FAQ and Mobile Application CSS moved to LandingFaq and LandingAppDownload components */

/* Responsiveness */
@media (max-width: 1024px) {
  .psc-why__grid[b-5sa6dl7834] {
    grid-template-columns: repeat(2, 1fr);
  }

  .psc-audience__grid[b-5sa6dl7834] {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .psc-hero__title[b-5sa6dl7834] {
    font-size: 36px;
  }

  /* Timeline goes vertical */
  .psc-steps__timeline[b-5sa6dl7834] {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-left: 20px;
  }

  .psc-steps__arrow[b-5sa6dl7834] {
    transform: rotate(90deg);
    margin: 12px 0 12px 28px;
    align-self: flex-start;
  }

  .psc-steps__step[b-5sa6dl7834] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    width: 100%;
  }

  .psc-steps__content[b-5sa6dl7834] {
    padding-top: 8px;
    padding-inline: 0;
  }

  .psc-features__grid[b-5sa6dl7834] {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-reviews__container[b-5sa6dl7834] {
    padding: 20px;
    margin-top: 20px;
  }

  .professional-page__reviews-item-head[b-5sa6dl7834] {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .professional-page__reviews-item-head-right[b-5sa6dl7834] {
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
  }

  .psc-mobile__inner[b-5sa6dl7834] {
    flex-direction: column-reverse;
    gap: 40px;
    padding: 32px 24px;
    text-align: center;
  }

  .psc-mobile__content[b-5sa6dl7834] {
    align-items: center;
  }

  .psc-mobile__desc[b-5sa6dl7834] {
    margin: 0 auto;
  }

  .psc-mobile__buttons[b-5sa6dl7834] {
    justify-content: center;
  }

  .psc-mobile__image[b-5sa6dl7834] {
    max-width: 440px;
  }
}

@media (max-width: 768px) {
  .psc-hero__inner[b-5sa6dl7834] {
    flex-direction: column-reverse;
    text-align: center;
    padding: 24px;
  }

  .psc-hero__desc[b-5sa6dl7834] {
    margin: 0 auto;
  }

  .psc-hero__actions[b-5sa6dl7834] {
    flex-direction: column;
    align-items: center;
  }

  .home__button[b-5sa6dl7834] {
    width: 100%;
  }

  .psc-hero__image-container[b-5sa6dl7834] {
    max-width: 100%;
    width: calc(100% + 48px);
    margin-top: -24px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 0;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .psc-why__grid[b-5sa6dl7834] {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .audience-card[b-5sa6dl7834] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
  }

  .psc-features__grid[b-5sa6dl7834] {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .faq-item__trigger[b-5sa6dl7834] {
    padding: 16px 20px;
  }

  .faq-item__content[b-5sa6dl7834] {
    padding: 0 20px 16px 20px;
  }

  .faq-item__question[b-5sa6dl7834] {
    font-size: 15px;
  }

  .faq-item__answer[b-5sa6dl7834] {
    font-size: 13.5px;
  }

  .psc-mobile__buttons[b-5sa6dl7834] {
    flex-direction: column;
    width: 100%;
  }

  .app-btn[b-5sa6dl7834] {
    width: 100%;
    justify-content: center;
  }

  /* Compact spacing & titles for mobile */
  .psc-hero[b-5sa6dl7834],
  .psc-why[b-5sa6dl7834],
  .psc-audience[b-5sa6dl7834],
  .psc-steps[b-5sa6dl7834],
  .psc-features[b-5sa6dl7834],
  .psc-tasks[b-5sa6dl7834],
  .psc-reviews[b-5sa6dl7834],
  .psc-faq[b-5sa6dl7834],
  .psc-mobile[b-5sa6dl7834] {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .landing-section-title[b-5sa6dl7834] {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .psc-hero__title[b-5sa6dl7834] {
    font-size: 28px;
  }
}

.psc-faq[b-5sa6dl7834] {
  padding-top: 60px;
  padding-bottom: 80px;
  background: var(--color-bg-primary);
}
/* /Components/LendingUpdated/BodyguardLanding.razor.rz.scp.css */
/* The landing shell and shared typography (.landing-main-content, .landing-section,
   .section-title, .section-subtitle, .landing-cta, .landing-sheet, …) live in
   wwwroot/css/landing.css so all three landing variants stay identical.
   Only pieces unique to this landing belong here. */

.who-is-for-action[b-tigyay9hrq] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 32px;
}

.who-is-for-action[b-tigyay9hrq]  .kit-button {
    max-width: 303px !important;
    height: 58px;
    border-radius: 12px;
}

.how-it-works-action[b-tigyay9hrq] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 40px;
}

.how-it-works-action[b-tigyay9hrq]  .kit-button {
    max-width: 303px !important;
    height: 58px;
    border-radius: 12px;
}
/* /Components/LendingUpdated/ClientLanding.razor.rz.scp.css */
/* The landing shell and shared typography (.landing-main-content, .landing-section,
   .section-title, .section-subtitle, .landing-cta, .landing-sheet, …) live in
   wwwroot/css/landing.css so all three landing variants stay identical.
   Only pieces unique to the client landing belong here.
   The advantage grid itself is in LendingCardsContainer.razor.css (.cards-rows). */

/* Placeholder shown instead of the steps block for the bodyguard/company audience */
.how-it-works-placeholder-stub[b-n6fqo2lgof] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background: #EAEFF5;
    border-radius: 28px;
    min-height: 400px;
    width: 100%;
    box-sizing: border-box;
}

.how-it-works-placeholder-stub h3[b-n6fqo2lgof] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 12px 0;
    color: #000000;
}

.how-it-works-placeholder-stub p[b-n6fqo2lgof] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #33373F;
    margin: 0;
    max-width: 500px;
    line-height: 150%;
}

/* Dark Theme Adaptation */
.dark .how-it-works-placeholder-stub[b-n6fqo2lgof] {
    background: var(--color-bg-primary);
}

.dark .how-it-works-placeholder-stub h3[b-n6fqo2lgof] {
    color: #FFFFFF;
}

.dark .how-it-works-placeholder-stub p[b-n6fqo2lgof] {
    color: #9CA3AF;
}
/* /Components/LendingUpdated/LendingComponents/ClientCard.razor.rz.scp.css */
/* Audience card — Figma: 312x440, #EAEFF5, 28px radius, 28px padding */
.client-card[b-5kgnm35yp6] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px;
    width: 312px;
    height: 440px;
    min-width: 312px;
    flex-shrink: 0;
    background: #EAEFF5;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.client-card:hover[b-5kgnm35yp6] {
    transform: translateY(-4px);
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.08);
}

/* Background Shield — 315.32x368.68, centered, flush with the card top */
.shield-bg[b-5kgnm35yp6] {
    position: absolute;
    left: calc(50% - 315.32px / 2);
    top: 0;
    width: 315.32px;
    height: 368.68px;
    z-index: 0;
    pointer-events: none;
    background: url('/images/Fill 324.svg') no-repeat center/contain;
}

/* Clipped artwork window — starts 60px below the card top */
.card-image-container[b-5kgnm35yp6] {
    position: absolute;
    left: 0;
    top: 60px;
    width: 312px;
    height: 380px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Exact Figma placement, supplied per card through custom properties */
.card-image[b-5kgnm35yp6] {
    position: absolute;
    left: var(--img-left, 0);
    top: var(--img-top, 0);
    width: var(--img-w, 312px);
    height: var(--img-h, auto);
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Text section container (top) */
.card-text-section[b-5kgnm35yp6] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    text-align: center;
}

.card-title[b-5kgnm35yp6] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: #000000;
    margin: 0;
    align-self: stretch;
}

/* Dark Theme Adaptation */
.dark .client-card[b-5kgnm35yp6] {
    background: var(--color-bg-primary);
}

.dark .client-card .card-title[b-5kgnm35yp6] {
    color: #FFFFFF;
}

.dark .client-card .shield-bg[b-5kgnm35yp6] {
    filter: invert(1) opacity(0.15);
}
/* /Components/LendingUpdated/LendingComponents/ClientCardsSlider.razor.rz.scp.css */
/* Audience slider — the scrollable row bleeds past the content column to both screen edges,
   so a finger drag can carry the cards all the way off-screen. A 300px white gradient
   fades the last card out on the right. */
.client-slider-container[b-c6tlz08rue] {
    position: relative;
    box-sizing: border-box;
    width: auto;
    /* distance from the 1320px content column to the viewport edge; below 1368px of
       viewport that is just the .landing-section gutter */
    --slider-bleed: clamp(24px, calc((100vw - 1368px) / 2 + 24px), 300px);
    /* where the first card rests, measured from the left screen edge */
    --slider-inset: calc(var(--slider-bleed) + 4px);
    --slider-gap: 22px;
    margin-left: calc(-1 * var(--slider-bleed));
    margin-right: calc(-1 * var(--slider-bleed));
}

.client-slider-viewport[b-c6tlz08rue] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: none; /* Hide standard Firefox scrollbar */
}

/* Hide scrollbars for Chrome, Safari and Opera */
.client-slider-viewport[b-c6tlz08rue]::-webkit-scrollbar {
    display: none;
}

.client-slider-viewport.active[b-c6tlz08rue] {
    cursor: grabbing;
}

/* The track is a block-level flex box, so it is stretched to the viewport width and the
   312px cards overflow it. Only the leading padding lives inside that box: it is what holds
   the first card on the content column at rest (scrollLeft can never go negative, so an
   initial scroll offset could not do it). */
.client-slider-track[b-c6tlz08rue] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--slider-gap);
    padding: 12px 0 12px var(--slider-inset);
    box-sizing: border-box;
}

/* Trailing room has to be a real flex item: a padding-right on the track would sit at the
   track's own right edge — i.e. at the screen edge, before the overflowing cards — and so
   would never widen the scrollable area. The negative margin cancels the flex gap, leaving
   exactly one bleed of travel, which parks the last card's right edge on the landing
   container edge rather than on the page edge. */
.client-slider-tail[b-c6tlz08rue] {
    flex: 0 0 var(--slider-bleed);
    margin-left: calc(-1 * var(--slider-gap));
    pointer-events: none;
}

/* Right-edge fade */
.client-slider-container[b-c6tlz08rue]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 40%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 768px) {
    .client-slider-container[b-c6tlz08rue] {
        --slider-gap: 16px;
    }

    .client-slider-container[b-c6tlz08rue]::after {
        width: 60px;
    }
}

/* Dark Theme Adaptation */
.dark .client-slider-container[b-c6tlz08rue]::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-bg-body, #0F172A) 100%);
}
/* /Components/LendingUpdated/LendingComponents/FeatureCard.razor.rz.scp.css */
/* Feature card — Figma: 764x520 / 534x520, #EAEFF5, 28px radius, 38px padding */
.feature-card[b-nu7guqyww3] {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 520px;
    background: #EAEFF5;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover[b-nu7guqyww3] {
    transform: translateY(-4px);
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.08);
}

/* Figma: 764 = 58.86% of the row once the 22px gutter is removed, 534 = 41.14% */
.feature-card.wide-card[b-nu7guqyww3] {
    flex: 0 1 calc((100% - 22px) * 0.5886);
}

.feature-card.narrow-card[b-nu7guqyww3] {
    flex: 0 1 calc((100% - 22px) * 0.4114);
}

.card-header[b-nu7guqyww3] {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 38px;
    text-align: left;
}

.card-title[b-nu7guqyww3] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

.card-desc[b-nu7guqyww3] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #33373F;
    margin: 0;
}

/* Artwork area — bottom 360px of the card, clipped */
.card-image-area[b-nu7guqyww3] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 360px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Base placement (used when no Figma ImageStyle is supplied); inline styles win */
.card-img[b-nu7guqyww3] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

/* Bodyguard cutouts */
.executor-cutout[b-nu7guqyww3] {
    position: absolute;
    width: auto;
    display: block;
    transform-origin: 0 0;
}

/* Floating chips */
.rating-chip[b-nu7guqyww3] {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border-radius: 16px;
    box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.1);
}

.executor-chip[b-nu7guqyww3] {
    top: 257px;
    width: 220px;
}

/* Round avatar cut from the full-body cutout, zoomed onto the head */
.chip-avatar-wrap[b-nu7guqyww3] {
    display: block;
    width: 42.7px;
    height: 42.7px;
    border-radius: 50%;
    overflow: hidden;
    background: #D9DEE6;
    flex-shrink: 0;
}

.chip-avatar[b-nu7guqyww3] {
    display: block;
    width: 175%;
    height: auto;
    margin: -2% 0 0 -37.5%;
}

.chip-info[b-nu7guqyww3] {
    display: flex;
    flex-direction: column;
    gap: 4.8px;
    flex: 1;
    min-width: 0;
}

.chip-name[b-nu7guqyww3] {
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    font-size: 14.4px;
    line-height: 1.55;
    color: #000000;
}

.chip-meta[b-nu7guqyww3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6.4px;
}

.chip-score[b-nu7guqyww3] {
    display: inline-flex;
    align-items: center;
    gap: 3.2px;
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 11.2px;
    color: #000000;
}

.chip-star[b-nu7guqyww3] {
    width: 12.8px;
    height: 12.8px;
    color: #FACC15;
    flex-shrink: 0;
}

.chip-missions[b-nu7guqyww3] {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 11.2px;
    color: #606771;
}

/* "Rating:" chip on the ratings card */
.stars-chip[b-nu7guqyww3] {
    left: 34.27%;
    top: 147px;
    width: 157px;
    flex-direction: column;
    align-items: stretch;
    gap: 4.8px;
}

.stars-chip .chip-name[b-nu7guqyww3] {
    text-align: center;
}

.chip-stars[b-nu7guqyww3] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 24px;
}

.chip-star--lg[b-nu7guqyww3] {
    width: 21.7px;
    height: 21.7px;
}

/* Responsiveness */
@media (max-width: 1200px) {
    .feature-card[b-nu7guqyww3] {
        height: 470px;
    }

    .card-header[b-nu7guqyww3] {
        padding: 28px;
    }

    .card-title[b-nu7guqyww3] {
        font-size: 22px;
    }

    .card-desc[b-nu7guqyww3] {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    .feature-card.wide-card[b-nu7guqyww3],
    .feature-card.narrow-card[b-nu7guqyww3] {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    /* The copy is far taller on a phone than the Figma card allows for, and overlaying it on
       a bottom-anchored artwork layer put it straight on top of the illustration. Drop the
       fixed height and put the artwork back in flow underneath the text. */
    .feature-card[b-nu7guqyww3] {
        height: auto;
    }

    .card-image-area[b-nu7guqyww3] {
        position: relative;
        height: 260px;
        flex-shrink: 0;
        margin-top: auto;
    }

    /* chips would collide with the shrunken cutouts */
    .executor-chip[b-nu7guqyww3] {
        display: none;
    }

    .executor-cutout[b-nu7guqyww3] {
        height: 380px !important;
        top: 20px !important;
    }

    .stars-chip[b-nu7guqyww3] {
        left: auto;
        right: 16px;
        top: 40px;
    }

    /* let single illustrations scale with the card instead of keeping Figma pixels */
    .card-img[b-nu7guqyww3] {
        left: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Dark Theme Adaptation */
.dark .feature-card[b-nu7guqyww3] {
    background: var(--color-bg-primary);
}

.dark .card-title[b-nu7guqyww3] {
    color: #FFFFFF;
}

.dark .card-desc[b-nu7guqyww3] {
    color: #9CA3AF;
}
/* /Components/LendingUpdated/LendingComponents/FeaturesContainer.razor.rz.scp.css */
/* Figma: two rows of cards, 24px between rows and 22px between columns */
.features-container[b-ardhlgmfqf] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    column-gap: 22px;
    row-gap: 24px;
    width: 100%;
}

@media (max-width: 768px) {
    .features-container[b-ardhlgmfqf] {
        row-gap: 16px;
    }
}
/* /Components/LendingUpdated/LendingComponents/HowItWorksContainer.razor.rz.scp.css */
/* Figma: 581px steps card + flexible illustration card, 22px apart, both 671px tall */
.how-it-works-columns[b-jomwc5occ0] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .how-it-works-columns[b-jomwc5occ0] {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
}

/* The swipe rail only exists on phones — above that the two-column switcher is used.
   These must stay ahead of the media query below: same specificity, so source order decides. */
.how-it-works-carousel[b-jomwc5occ0],
.hiw-dots[b-jomwc5occ0] {
    display: none;
}

@media (max-width: 768px) {
    .how-it-works-columns[b-jomwc5occ0] {
        display: none;
    }

    .how-it-works-carousel[b-jomwc5occ0] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .hiw-rail[b-jomwc5occ0] {
        /* offsetParent for the slides — the dot sync measures against it */
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hiw-rail[b-jomwc5occ0]::-webkit-scrollbar {
        display: none;
    }

    /* Slightly narrower than the rail so the next step peeks in — without that edge there is
       nothing on screen saying the block can be swiped at all. An explicit width beats a
       percentage flex-basis here: the basis resolves against an already-overflowing box. */
    .hiw-slide[b-jomwc5occ0] {
        box-sizing: border-box;
        flex: 0 0 auto;
        width: calc(100% - 28px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 28px 24px 0;
        background: #EAEFF5;
        border-radius: 24px;
        overflow: hidden;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Copy sits above the mockup on mobile */
    .hiw-slide-copy[b-jomwc5occ0] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hiw-slide-number[b-jomwc5occ0] {
        font-family: 'Mulish', sans-serif;
        font-weight: 700;
        font-size: 34px;
        line-height: 1.2;
        color: #396DF0;
    }

    .hiw-slide-title[b-jomwc5occ0] {
        font-family: 'Mulish', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.2;
        color: #000000;
        margin: 0;
    }

    .hiw-slide-subtitle[b-jomwc5occ0] {
        font-family: 'Geist', sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.5;
        color: #33373F;
        margin: 0;
    }

    .hiw-slide-visual[b-jomwc5occ0] {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: auto;
    }

    .hiw-slide-image[b-jomwc5occ0] {
        width: 100%;
        max-width: 300px;
        height: auto;
        display: block;
        -webkit-user-drag: none;
    }

    .hiw-dots[b-jomwc5occ0] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
}

.hiw-dot[b-jomwc5occ0] {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #C7CFDA;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: width 0.25s ease, background-color 0.25s ease;
}

/* The active dot stretches into a pill so the position reads at a glance */
.hiw-dot.is-active[b-jomwc5occ0] {
    width: 24px;
    background: #396DF0;
}

/* Dark Theme Adaptation */
.dark .hiw-slide[b-jomwc5occ0] {
    background: var(--color-bg-primary);
}

.dark .hiw-slide-title[b-jomwc5occ0] {
    color: #FFFFFF;
}

.dark .hiw-slide-subtitle[b-jomwc5occ0] {
    color: #9CA3AF;
}
/* /Components/LendingUpdated/LendingComponents/HowItWorksIllustrationStub.razor.rz.scp.css */
/* Illustration card — Figma: fills the rest of the row (717px at 1920), 671px tall */
.how-it-works-stub-container[b-tvmmz1ja3e] {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    /* min-height so the row's align-items: stretch can match a taller steps card; an
       explicit height would opt this column out of stretching */
    min-height: 671px;
    padding: 0 48px;
    background: #EAEFF5;
    border-radius: 28px;
    flex: 1 1 auto;
    overflow: hidden;
}

/* 441px vertical gradient panel behind the mockup */
.how-it-works-backdrop[b-tvmmz1ja3e] {
    position: absolute;
    left: 50%;
    top: 0;
    width: 441.3px;
    max-width: 100%;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #D9D9D9 78.82%, rgba(217, 217, 217, 0.6) 100%);
    filter: blur(16px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.how-it-works-image[b-tvmmz1ja3e] {
    position: relative;
    z-index: 1;
    width: auto;
    height: 688px; /* phone mockup is taller than the card and is clipped at the bottom */
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

@media (max-width: 1200px) {
    .how-it-works-stub-container[b-tvmmz1ja3e] {
        width: 100%;
        max-width: 581px;
        min-height: 480px;
        padding: 40px 20px 0 20px;
    }

    .how-it-works-image[b-tvmmz1ja3e] {
        width: 100%;
        height: auto;
    }
}

/* Dark Theme Adaptation */
.dark .how-it-works-stub-container[b-tvmmz1ja3e] {
    background: var(--color-bg-primary);
}

.dark .how-it-works-backdrop[b-tvmmz1ja3e] {
    opacity: 0.12;
}
/* /Components/LendingUpdated/LendingComponents/HowItWorksSteps.razor.rz.scp.css */
/* Steps card — Figma: 581x671, #EAEFF5, 28px radius, 4px inner padding */
.how-it-works-steps-container[b-dub7zedi1e] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 4px;
    width: 581px;
    max-width: 100%;
    /* min-height, not height: variants with two-line step titles need ~800px and a fixed box
       let the surplus escape the card instead of growing it */
    min-height: 671px;
    flex: 0 0 581px;
    background: #EAEFF5;
    border-radius: 28px;
}

.steps-list[b-dub7zedi1e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* centred overflow spills out of *both* ends — the top rows would ride up over the
       section title. `safe` degrades to flex-start the moment the list does not fit. */
    justify-content: safe center;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

.step-row[b-dub7zedi1e] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 22px 18px;
    gap: 18px;
    width: 100%;
    border-radius: 24px;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.step-row.active[b-dub7zedi1e] {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
}

.step-number-box[b-dub7zedi1e] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    min-width: 50px;
    height: 85.4px;
    border-radius: 24px;
    flex-shrink: 0;
}

.step-number[b-dub7zedi1e] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.2;
    text-align: center;
    color: #396DF0;
}

.step-content[b-dub7zedi1e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.step-title[b-dub7zedi1e] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

.step-subtitle[b-dub7zedi1e] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: #33373F;
    margin: 0;
}

/* Responsiveness */
@media (max-width: 1200px) {
    .how-it-works-steps-container[b-dub7zedi1e] {
        width: 100%;
        max-width: 581px;
        min-height: 0;
        flex: 1 1 auto;
    }

    .steps-list[b-dub7zedi1e] {
        gap: 8px;
    }

    .step-row[b-dub7zedi1e] {
        padding: 18px 14px;
    }
}

@media (max-width: 576px) {
    .step-title[b-dub7zedi1e] {
        font-size: 20px;
    }

    .step-subtitle[b-dub7zedi1e] {
        font-size: 15px;
    }

    .step-number[b-dub7zedi1e] {
        font-size: 34px;
    }

    .step-number-box[b-dub7zedi1e] {
        height: 64px;
        min-width: 40px;
        padding: 0 8px;
    }
}

/* Dark Theme Adaptation */
.dark .how-it-works-steps-container[b-dub7zedi1e] {
    background: var(--color-bg-primary);
}

.dark .step-row.active[b-dub7zedi1e] {
    background: var(--color-bg-secondary);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

.dark .step-title[b-dub7zedi1e] {
    color: #FFFFFF;
}

.dark .step-subtitle[b-dub7zedi1e] {
    color: #9CA3AF;
}
/* /Components/LendingUpdated/LendingComponents/LendingAppBanner.razor.rz.scp.css */
/* App banner — Figma: 1320x520, #EAEFF5, 28px radius, 48px padding, 120px gap, 636px visual */
.app-banner[b-71b4ubpj8j] {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 120px;
    width: 100%;
    height: 520px;
    background: #EAEFF5;
    border-radius: 28px;
    overflow: hidden;
}

.app-banner-content[b-71b4ubpj8j] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    padding: 48px;
    z-index: 3;
}

.app-banner-text[b-71b4ubpj8j] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.app-banner-title[b-71b4ubpj8j] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

.app-banner-desc[b-71b4ubpj8j] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #33373F;
    margin: 0;
}

/* Stays a single row above the mobile breakpoint. Between 768 and 992 the copy column is
   narrower than two full-size badges, so the badges shrink instead of wrapping. */
.app-banner-buttons[b-71b4ubpj8j] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: nowrap;
}

.app-button-link[b-71b4ubpj8j] {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.app-button-link:hover[b-71b4ubpj8j] {
    transform: translateY(-2px);
    opacity: 0.9;
}

.app-button-link:active[b-71b4ubpj8j] {
    transform: translateY(0);
}

.app-button-img[b-71b4ubpj8j] {
    width: 180px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    display: block;
}

/* Right-hand app mockup — 636x520 */
.app-banner-visual[b-71b4ubpj8j] {
    position: relative;
    flex: 0 0 636px;
    width: 636px;
    max-width: 50%;
    height: 100%;
    align-self: stretch;
    pointer-events: none;
    z-index: 2;
}

/* Decorative arch, right-aligned (Figma Fill 323) */
.app-banner-decor[b-71b4ubpj8j] {
    position: absolute;
    top: 0;
    right: 0;
    width: 738px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.app-banner-illustration[b-71b4ubpj8j] {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: none;
    z-index: 2;
}

/* Responsiveness */
@media (max-width: 1200px) {
    .app-banner[b-71b4ubpj8j] {
        gap: 48px;
        height: 480px;
    }

    .app-banner-title[b-71b4ubpj8j] {
        font-size: 34px;
    }

    .app-banner-desc[b-71b4ubpj8j] {
        font-size: 16px;
    }

    .app-banner-visual[b-71b4ubpj8j] {
        flex: 0 1 480px;
    }
}

@media (max-width: 992px) {
    .app-banner[b-71b4ubpj8j] {
        height: auto;
        min-height: 480px;
        gap: 24px;
    }

    .app-banner-content[b-71b4ubpj8j] {
        padding: 40px 32px;
        gap: 32px;
    }

    .app-banner-title[b-71b4ubpj8j] {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .app-banner[b-71b4ubpj8j] {
        flex-direction: column;
        height: auto;
        gap: 0;
        overflow: hidden;
    }

    .app-banner-content[b-71b4ubpj8j] {
        width: 100%;
        padding: 40px 24px 0;
        align-items: center;
        text-align: center;
        gap: 28px;
    }

    .app-banner-title[b-71b4ubpj8j] {
        font-size: 26px;
    }

    .app-banner-desc[b-71b4ubpj8j] {
        font-size: 15px;
    }

    /* Mobile may wrap; App Store is first in source order, so it lands on top */
    .app-banner-buttons[b-71b4ubpj8j] {
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .app-button-img[b-71b4ubpj8j] {
        width: 150px;
    }

    .app-banner-visual[b-71b4ubpj8j] {
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 636 / 460;
        margin-top: 24px;
    }

    .app-banner-decor[b-71b4ubpj8j] {
        width: 140%;
        height: auto;
        bottom: 0;
        top: auto;
    }

    .app-banner-illustration[b-71b4ubpj8j] {
        position: absolute;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        height: 100%;
        width: auto;
    }
}

.dark-only[b-71b4ubpj8j] {
    display: none !important;
}

/* Dark Theme Adaptation */
.dark .app-banner[b-71b4ubpj8j] {
    background: var(--color-bg-primary);
}

.dark .app-banner-title[b-71b4ubpj8j] {
    color: #FFFFFF;
}

.dark .app-banner-desc[b-71b4ubpj8j] {
    color: #9CA3AF;
}

.dark .app-banner-decor[b-71b4ubpj8j] {
    opacity: 0.15;
}

.dark .light-only[b-71b4ubpj8j] {
    display: none !important;
}

.dark .dark-only[b-71b4ubpj8j] {
    display: block !important;
}
/* /Components/LendingUpdated/LendingComponents/LendingCard.razor.rz.scp.css */
/* Advantage card — Figma: 312x360, #EAEFF5, 28px radius, 28px padding */
.lending-card[b-23c4dar8n6] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 280px; /* default sizing; the client landing rows override this */
    height: 360px;
    padding: 28px;
    background: #EAEFF5;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lending-card:hover[b-23c4dar8n6] {
    transform: translateY(-4px);
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.08);
}

/* Artwork layer — the Figma frame is 20px taller than the card and bleeds past the top edge */
.card-image-section[b-23c4dar8n6] {
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: calc(100% + 20px);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* Text section container (top) */
.card-text-section[b-23c4dar8n6] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    text-align: center;
}

.card-title[b-23c4dar8n6] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

.card-subtitle[b-23c4dar8n6] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #6B6F77;
    margin: 0;
}

/* Featured card — 652x360, artwork fills the whole frame, copy left-aligned on top */
.lending-card.featured-card[b-23c4dar8n6] {
    flex: 2 1 480px;
    justify-content: space-between;
    align-items: flex-start;
    /* radial gradient sits under the photo (Figma frame fill) */
    background: radial-gradient(562.56px 485.9px at 75.77% 128.78%, #B6BAC0 0%, #3F4551 59.62%, #1D1E20 100%);
}

.lending-card.featured-card .card-image-section[b-23c4dar8n6] {
    top: 0;
    height: 100%;
}

.lending-card.featured-card .card-text-section[b-23c4dar8n6] {
    align-items: flex-start;
    text-align: left;
}

.lending-card.featured-card .card-title[b-23c4dar8n6] {
    color: #FFFFFF;
}

.lending-card.featured-card .card-subtitle[b-23c4dar8n6] {
    color: #8B8E96;
}

/* Featured Card Button — 200px wide */
.card-btn[b-23c4dar8n6] {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    max-width: 100%;
    padding: 20px 24px;
    background: #FFFFFF;
    color: #000000;
    border-radius: 12px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
}

.card-btn:hover[b-23c4dar8n6] {
    background: #F5F5F7;
    transform: translateY(-2px);
}

.card-btn:active[b-23c4dar8n6] {
    transform: translateY(0);
}

/* Responsiveness */
@media (max-width: 992px) {
    .lending-card[b-23c4dar8n6] {
        height: 340px;
        padding: 24px;
    }

    .card-title[b-23c4dar8n6] {
        font-size: 22px;
    }

    .card-subtitle[b-23c4dar8n6] {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .lending-card.featured-card[b-23c4dar8n6] {
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .lending-card.featured-card .card-text-section[b-23c4dar8n6] {
        align-items: center;
        text-align: center;
    }

    .card-btn[b-23c4dar8n6] {
        margin-top: auto;
    }
}

/* Dark Theme Adaptation */
.dark .lending-card:not(.featured-card)[b-23c4dar8n6] {
    background: var(--color-bg-primary);
}

.dark .lending-card:not(.featured-card) .card-title[b-23c4dar8n6] {
    color: #FFFFFF;
}

.dark .lending-card:not(.featured-card) .card-subtitle[b-23c4dar8n6] {
    color: #9CA3AF;
}
/* /Components/LendingUpdated/LendingComponents/LendingCardsContainer.razor.rz.scp.css */
/* Default: cards wrap inside one flex row (bodyguard / agency landings) */
.lending-cards-container[b-oz4xi6hz0x] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px 22px;
    width: 100%;
    box-sizing: border-box;
}

/* Client landing — 7 advantage cards, the last one wide. Four layouts, driven purely by the
   column count; the featured card's span is what turns the tail of the grid into a full row.
       >=1280px  4 cols  ->  4 + (2 + wide featured spanning 2)   = 4, 3   (Figma: 312px cards)
       >=992px   3 cols  ->  3 + 3 + featured across the row      = 3, 3, 1
       >=600px   2 cols  ->  2 + 2 + 2 + featured across the row  = 2, 2, 2, 1
       <600px    1 col   ->  every card on its own row            = 1 x 7                     */
.lending-cards-container.cards-rows[b-oz4xi6hz0x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 22px;
}

/* Grid items must be allowed to shrink below their content width */
.lending-cards-container.cards-rows[b-oz4xi6hz0x]  .lending-card {
    min-width: 0;
}

/* Wide layout: the featured card is two cards wide, so it closes the second row */
.lending-cards-container.cards-rows[b-oz4xi6hz0x]  .lending-card.featured-card {
    grid-column: span 2;
}

@media (max-width: 1279px) {
    .lending-cards-container.cards-rows[b-oz4xi6hz0x] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* From here down the featured card always takes a row of its own.
       At one column `1 / -1` is simply a single cell. */
    .lending-cards-container.cards-rows[b-oz4xi6hz0x]  .lending-card.featured-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .lending-cards-container.cards-rows[b-oz4xi6hz0x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .lending-cards-container.cards-rows[b-oz4xi6hz0x] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .lending-cards-container[b-oz4xi6hz0x],
    .lending-cards-container.cards-rows[b-oz4xi6hz0x] {
        gap: 16px;
    }
}
/* /Components/LendingUpdated/LendingComponents/LendingFaqContainer.razor.rz.scp.css */
.lending-faq-container[b-0rp5zpoz0m] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Figma */
    width: 100%;
}

@media (max-width: 768px) {
    .lending-faq-container[b-0rp5zpoz0m] {
        gap: 12px;
    }
}
/* /Components/LendingUpdated/LendingComponents/LendingFaqItem.razor.rz.scp.css */
/* FAQ item — Figma: #EAEFF5, 28px radius, 38px padding, 32px gap to the answer */
.faq-item[b-8xls1e2ofm] {
    box-sizing: border-box;
    width: 100%;
    background: #EAEFF5;
    border-radius: 28px;
    transition: background-color 0.2s ease;
}

.faq-trigger[b-8xls1e2ofm] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 38px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none !important;
    gap: 16px;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight color on mobile Safari */
    user-select: none;
    -webkit-user-select: none;
    /* Must ease in step with the answer: snapping this back on close shoves the answer
       down by a full padding before the collapse even starts. */
    transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item--open .faq-trigger[b-8xls1e2ofm] {
    padding-bottom: 0;
}

.faq-trigger:focus[b-8xls1e2ofm],
.faq-trigger:active[b-8xls1e2ofm] {
    outline: none !important;
    box-shadow: none !important;
}

.faq-question[b-8xls1e2ofm] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #000000;
    user-select: none;
    -webkit-user-select: none;
    flex: 1;
}

.faq-icon-wrapper[b-8xls1e2ofm] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    color: #6B6F77;
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
}

.faq-icon[b-8xls1e2ofm] {
    width: 24px;
    height: 24px;
}

/* Open states */
.faq-item--open .faq-icon-wrapper[b-8xls1e2ofm] {
    transform: rotate(180deg);
    color: #000000;
}

/* Animating a 0fr/1fr grid track resolves to the answer's real height, so the easing is
   spread over the actual distance travelled — a max-height guess spends most of its
   duration on empty space and reads as an instant snap. */
.faq-content-wrapper[b-8xls1e2ofm] {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item--open .faq-content-wrapper[b-8xls1e2ofm] {
    grid-template-rows: 1fr;
}

/* min-height is what lets the row actually reach 0; the padding has to live on the answer
   itself, since padding on this box would keep it open at its own height. */
.faq-content-inner[b-8xls1e2ofm] {
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
}

.faq-answer[b-8xls1e2ofm] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #33373F;
    margin: 0;
    padding: 32px 38px 38px 38px;
}

/* Hover effects */
.faq-item:hover[b-8xls1e2ofm] {
    background: #E3EAF2;
}

/* Responsiveness */
@media (max-width: 992px) {
    .faq-trigger[b-8xls1e2ofm] {
        padding: 28px;
    }

    .faq-question[b-8xls1e2ofm] {
        font-size: 20px;
    }

    .faq-answer[b-8xls1e2ofm] {
        font-size: 16px;
        padding: 20px 28px 28px 28px;
    }
}

@media (max-width: 768px) {
    .faq-item[b-8xls1e2ofm] {
        border-radius: 20px;
    }

    .faq-trigger[b-8xls1e2ofm] {
        padding: 22px 24px;
        gap: 12px;
    }

    .faq-question[b-8xls1e2ofm] {
        font-size: 17px;
    }

    .faq-answer[b-8xls1e2ofm] {
        font-size: 15px;
        padding: 16px 24px 24px 24px;
    }
}

/* Dark Theme Adaptation */
.dark .faq-item[b-8xls1e2ofm] {
    background: var(--color-bg-primary);
}

.dark .faq-item:hover[b-8xls1e2ofm] {
    background: var(--color-bg-secondary);
}

.dark .faq-question[b-8xls1e2ofm] {
    color: #FFFFFF;
}

.dark .faq-answer[b-8xls1e2ofm] {
    color: #9CA3AF;
}

.dark .faq-icon-wrapper[b-8xls1e2ofm] {
    color: #FFFFFF;
}
/* /Components/LendingUpdated/LendingComponents/LendingFooter.razor.rz.scp.css */
.lending-footer[b-2s1dxpvxpx] {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 60px 24px;
    gap: 48px;
    isolation: isolate;
    width: 100%;
    min-height: 380px;
    background: #222631;
    overflow: hidden;
}

/* Fill 323 — Figma: 1053x1232 arch starting 133px inside the content column */
.fill-323[b-2s1dxpvxpx] {
    position: absolute;
    left: calc(50% - 527px);
    top: 0;
    width: 1053px;
    height: 1232px;
    pointer-events: none;
    z-index: 0;
}

.footer-inner[b-2s1dxpvxpx] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    gap: 48px;
}

/* Column 1 (Frame 837) */
.frame-837[b-2s1dxpvxpx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 22px;
    width: 288px;
}

.footer-logo[b-2s1dxpvxpx] {
    display: flex;
}

.footer-logo[b-2s1dxpvxpx]  svg {
    width: 100px;
    height: 45px;
}

.footer-logo[b-2s1dxpvxpx]  svg path {
    fill: #FFFFFF;
}

.copyright-text[b-2s1dxpvxpx] {
    width: 288px;
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: flex-end;
    color: #8B8E96;
    margin: 0;
}

/* Column 2 (Frame 836) */
.frame-836[b-2s1dxpvxpx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 468px;
    flex-grow: 1;
}

.column-title[b-2s1dxpvxpx] {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 150%;
    display: flex;
    align-items: flex-end;
    color: #FFFFFF;
    color: color(display-p3 1.000 1.000 1.000);
    margin: 0;
}

.frame-835[b-2s1dxpvxpx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    align-self: stretch;
}

/* Rows (Frame 832, 833, 834) */
.frame-832[b-2s1dxpvxpx], .frame-833[b-2s1dxpvxpx], .frame-834[b-2s1dxpvxpx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 12px;
    width: 100%;
}

.contact-icon[b-2s1dxpvxpx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #FFFFFF;
    color: color(display-p3 1.000 1.000 1.000);
}

.contact-text[b-2s1dxpvxpx] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: flex-end;
    color: #FFFFFF;
    color: color(display-p3 1.000 1.000 1.000);
}

.contact-link[b-2s1dxpvxpx] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: flex-end;
    text-decoration-line: underline;
    color: #FFFFFF;
    color: color(display-p3 1.000 1.000 1.000);
}

.contact-link:hover[b-2s1dxpvxpx] {
    opacity: 0.8;
}

/* Column 3 (Frame 838) */
.frame-838[b-2s1dxpvxpx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 468px;
    flex-grow: 1;
}

.legal-text[b-2s1dxpvxpx] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: flex-end;
    color: #8B8E96;
}

.frame-838 .frame-834[b-2s1dxpvxpx] {
    gap: 18px;
}

.legal-link[b-2s1dxpvxpx] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    align-items: flex-end;
    text-decoration-line: underline;
    color: #FFFFFF;
    color: color(display-p3 1.000 1.000 1.000);
}

.legal-link:hover[b-2s1dxpvxpx] {
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .lending-footer[b-2s1dxpvxpx] {
        padding: 40px 24px;
    }
    .footer-inner[b-2s1dxpvxpx] {
        flex-direction: column;
        gap: 40px;
    }
    .frame-836[b-2s1dxpvxpx], .frame-838[b-2s1dxpvxpx] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .lending-footer[b-2s1dxpvxpx] {
        padding: 40px 16px;
    }
}
/* /Components/LendingUpdated/LendingComponents/LendingHeader.razor.rz.scp.css */
.lending-header[b-ts92yfyem8] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 69px; /* Figma: 12px padding + 45px content */
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    /* fixed rather than sticky: it stays pinned while the page scrolls and keeps taking no
       space in flow, so the existing .landing-main-content padding-top still lines up */
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.header-inner[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1368px; /* 1320 content column + 2*24 padding */
    margin: 0 auto;
    padding: 12px 24px;
    box-sizing: border-box;
}

/* Header Left Section */
.header-left[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    margin-right: auto; /* Push middle and right sections to the right */
    order: 1;
}

/* Logo_lable */
.logo-label[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    /* the mark is 23px inside a 32px box — bottom-aligning it dropped it ~4.5px below the
       optical centre the chips sit on */
    align-items: center;
    padding: 0px;
    gap: 2px;
    width: 52px;
    height: 32px;
}

.logo-label[b-ts92yfyem8]  svg {
    width: 52px;
    height: 23px;
}

.logo-label[b-ts92yfyem8]  svg path {
    fill: #212632;
    fill: color(display-p3 0.133 0.149 0.192);
}

/* Variant Switcher */
.variant-switcher[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 13px 0;
}

.variant-switcher-label[b-ts92yfyem8] {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #6B6F77;
    white-space: nowrap;
}

.variant-switcher-nav[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.variant-link[b-ts92yfyem8] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    color: #6B6F77;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.variant-link:hover[b-ts92yfyem8] {
    color: #000000;
}

.variant-link.active[b-ts92yfyem8] {
    color: #000000;
}

/* Header Middle Section */
.header-middle[b-ts92yfyem8] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12px; /* Figma: 12px between the language chip and the auth button */
    order: 3; /* Positioned after language switcher on desktop */
}

/* Header Right Section */
.header-right[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    order: 2; /* Positioned before auth button on desktop */
}

/* Language Switcher */
.language-switcher-wrapper[b-ts92yfyem8] {
    position: relative;
}

/* Language chip — Figma: 105px wide, #EAEFF5, 12px radius, 8/12 padding */
.frame-481[b-ts92yfyem8] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    background: #EAEFF5;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.frame-481:hover[b-ts92yfyem8] {
    background: #E1E8F1;
}

.frame-18[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    flex-shrink: 0;
    color: #000000;
}

.frame-18[b-ts92yfyem8]  svg {
    display: block;
    width: 18px;
    height: 18px;
}

.frame-480[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px;
    gap: 4px;
    flex: 1;
}

.lang-text[b-ts92yfyem8] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    color: #000000;
}

.arrow-icon[b-ts92yfyem8] {
    width: 18px;
    height: 18px;
    color: #000000;
    color: color(display-p3 0.000 0.000 0.000);
    transition: transform 0.2s ease;
}

.frame-481.open .arrow-icon[b-ts92yfyem8] {
    transform: rotate(180deg);
}

.lang-dropdown[b-ts92yfyem8] {
    position: absolute;
    top: 32px;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #D6E1ED;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    z-index: 10;
    min-width: 120px;
}

.lang-dropdown-item[b-ts92yfyem8] {
    background: none;
    border: none;
    padding: 8px 16px;
    text-align: left;
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #212632;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
}

.lang-dropdown-item:hover[b-ts92yfyem8] {
    background: #F4F6F9;
}

.lang-dropdown-item.active[b-ts92yfyem8] {
    color: #216EF9;
    background: #ECF3FF;
}

/* Log in button — Figma: #DBECFF, 12px radius, 12/32 padding */
.frame-11[b-ts92yfyem8] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    gap: 8px;
    background: #DBECFF;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.frame-11:hover[b-ts92yfyem8] {
    background: #CCE2FF;
}

.login-text[b-ts92yfyem8] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    color: #396DF0;
}

.profile-avatar-container[b-ts92yfyem8] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #DFE5EC;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.profile-avatar-container:hover[b-ts92yfyem8] {
    transform: scale(1.05);
}

/* Mobile Variant Switcher */
.mobile-variant-switcher-wrapper[b-ts92yfyem8] {
    position: relative;
    display: none; /* Hidden on desktop by default */
}

.mobile-variant-trigger[b-ts92yfyem8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px; /* Added horizontal padding to match other header elements */
    gap: 4px;
    height: 26px;
    cursor: pointer;
    user-select: none;
}

.mobile-variant-trigger.open .arrow-icon[b-ts92yfyem8] {
    transform: rotate(180deg);
}

.mobile-variant-text[b-ts92yfyem8] {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #000000;
    color: color(display-p3 0.000 0.000 0.000);
}

.variant-dropdown[b-ts92yfyem8] {
    position: absolute;
    top: 32px;
    left: 0;
    background: #FFFFFF;
    border: 1px solid #D6E1ED;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    z-index: 110;
    min-width: 150px;
}

.variant-dropdown-item[b-ts92yfyem8] {
    padding: 10px 16px;
    text-align: left;
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #212632;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.variant-dropdown-item:hover[b-ts92yfyem8] {
    background: #F4F6F9;
}

.variant-dropdown-item.active[b-ts92yfyem8] {
    color: #216EF9;
    background: #ECF3FF;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .variant-switcher[b-ts92yfyem8],
    .variant-switcher-nav[b-ts92yfyem8] {
        gap: 16px;
    }

    .variant-switcher-label[b-ts92yfyem8],
    .variant-link[b-ts92yfyem8] {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .header-inner[b-ts92yfyem8] {
        padding: 10px 16px;
    }

    .lending-header[b-ts92yfyem8] {
        height: auto;
        min-height: 60px;
    }

    /* Every header control is pinned to the same 34px height on mobile — driving it from
       padding alone let the login button drift ~3px taller than the chips beside it. */
    .frame-481[b-ts92yfyem8],
    .frame-11[b-ts92yfyem8],
    .mobile-variant-trigger[b-ts92yfyem8] {
        height: 34px;
    }

    /* Language switcher collapses to the bare globe — no label, no chevron.
       18px icon inside 2x8px of padding keeps it square at 34px. */
    .frame-481[b-ts92yfyem8] {
        width: auto;
        padding: 0 8px;
        gap: 0;
    }

    .frame-480[b-ts92yfyem8] {
        display: none;
    }

    .frame-11[b-ts92yfyem8] {
        padding: 0 18px;
    }

    .login-text[b-ts92yfyem8] {
        font-size: 14px;
    }

    .variant-switcher[b-ts92yfyem8] {
        display: none; /* Hide variant switcher on mobile */
    }
    .mobile-variant-switcher-wrapper[b-ts92yfyem8] {
        display: block; /* Show mobile dropdown variant switcher */
    }
    .header-left[b-ts92yfyem8] {
        flex: 0 0 auto;
        margin-right: 0; /* Reset desktop margin */
        gap: 12px; /* Reduce gap between logo and switcher on mobile */
        order: 1; /* Leftmost on mobile */
    }
    .header-middle[b-ts92yfyem8] {
        flex: 1 1 auto;
        margin-left: 0; /* Reset desktop margin */
        order: 2; /* Centered on mobile */
    }
    .header-right[b-ts92yfyem8] {
        flex: 0 0 auto;
        order: 3; /* Rightmost on mobile */
    }

    /* Individual spacing overrides on mobile */
    .mobile-variant-trigger[b-ts92yfyem8] {
        padding: 0 12px; /* Spacing for landing switcher */
    }

    /* Over the full-bleed hero the header is a transparent overlay with light-on-dark chips.
       `.is-scrolled` is set from JS (initHeaderScrollState) the moment the content sheet
       starts covering the hero, otherwise the chrome would be unreadable on white. */
    .lending-header[b-ts92yfyem8] {
        background: transparent;
    }

    .lending-header.is-scrolled[b-ts92yfyem8] {
        background: #FFFFFF;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
    }

    .lending-header:not(.is-scrolled) .logo-label[b-ts92yfyem8]  svg path {
        fill: #FFFFFF;
    }

    /* Only the skin changes with scroll state — height and padding stay put above, or the
       chip would resize the moment the sheet covers the hero. */
    .lending-header:not(.is-scrolled) .mobile-variant-trigger[b-ts92yfyem8] {
        background: rgba(255, 255, 255, 0.12);
        border-radius: 10px;
    }

    .lending-header:not(.is-scrolled) .mobile-variant-text[b-ts92yfyem8],
    .lending-header:not(.is-scrolled) .mobile-variant-trigger .arrow-icon[b-ts92yfyem8] {
        color: #FFFFFF;
    }

    .lending-header:not(.is-scrolled) .frame-481[b-ts92yfyem8] {
        background: rgba(255, 255, 255, 0.12);
    }

    .lending-header:not(.is-scrolled) .frame-18[b-ts92yfyem8] {
        color: #FFFFFF;
    }

    .lending-header:not(.is-scrolled) .frame-11[b-ts92yfyem8] {
        background: rgba(57, 109, 240, 0.28);
    }

    .lending-header:not(.is-scrolled) .login-text[b-ts92yfyem8] {
        color: #8FB6FF;
    }
}
/* /Components/LendingUpdated/LendingComponents/LendingModeSwitcher.razor.rz.scp.css */
.mode-switcher-container[b-rzpkoqjkt6] {
    display: flex;
    width: fit-content;
    margin: 0;
}

.mode-switcher-pill[b-rzpkoqjkt6] {
    background-color: #EAEFF5;
    border-radius: 16px;
    padding: 4px;
    display: flex;
    gap: 4px;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.switcher-tab[b-rzpkoqjkt6] {
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #4E4F59;
    font-family: 'Geist', 'Mulish', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    user-select: none;
}

.switcher-tab.active[b-rzpkoqjkt6] {
    background-color: #FFFFFF;
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.switcher-tab:hover:not(.active)[b-rzpkoqjkt6] {
    color: #1D1E20;
    background-color: rgba(255, 255, 255, 0.45);
}

.tab-icon[b-rzpkoqjkt6] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.switcher-tab:active .tab-icon[b-rzpkoqjkt6] {
    transform: scale(0.92);
}

.tab-label[b-rzpkoqjkt6] {
    white-space: nowrap;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 992px) {
    .mode-switcher-container[b-rzpkoqjkt6] {
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .mode-switcher-container[b-rzpkoqjkt6] {
        width: 100%;
        margin: 0 auto;
    }

    .mode-switcher-pill[b-rzpkoqjkt6] {
        width: 100%;
        flex-direction: column;
        border-radius: 20px;
        padding: 6px;
        gap: 6px;
    }
    
    .switcher-tab[b-rzpkoqjkt6] {
        width: 100%;
        padding: 10px 16px;
        border-radius: 10px;
    }
}
/* /Components/LendingUpdated/LendingComponents/LendingSlider.razor.rz.scp.css */
/* Hero slider — Figma: Landing / hero 1872x619 (24px page gutters, 32px radius) */
.lending-slider-container[b-kbewz45dif] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;
    margin-bottom: 80px; /* Figma: hero ends at 688, first section starts at 768 */
}

.slider-wrapper[b-kbewz45dif] {
    position: relative;
    width: 100%;
    max-width: 1872px;
    height: 619px;
    margin: 0 auto;
    background: radial-gradient(1000.23px 820.04px at 75.64% 73.16%, #333A48 0%, #1D1E20 100%);
    border-radius: 32px;
    overflow: hidden;
    isolation: isolate; /* Create new stacking context to fix Safari/Chrome border-radius clipping bug */
    transform: translateZ(0); /* Force hardware acceleration and correct masking */
}

/* Background Decorative Shape — 1082x926, right edge 24px past the hero, vertically centered */
.slider-bg-shape[b-kbewz45dif] {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 1082px;
    height: 926px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

/* Individual Slide */
.slider-slide[b-kbewz45dif] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    /* Text column starts at the 1320px content column; hero box is 276px wider on each side */
    padding: 80px clamp(24px, calc((100% - 1320px) / 2), 276px);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

.slider-slide.active[b-kbewz45dif] {
    opacity: 1;
    pointer-events: auto;
}

/* Info Section (Left side) — copy block sits at the top, progress bars are pinned to the bottom */
.slide-info-section[b-kbewz45dif] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 660px;
    max-width: 100%;
    flex-shrink: 0;
    height: 100%;
    z-index: 3;
}

/* Text + CTA group (top) */
.slide-text-content[b-kbewz45dif] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.slide-title[b-kbewz45dif] {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: #FFFFFF;
    margin: 0;
}

.slide-description[b-kbewz45dif] {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.5;
    color: #FFFFFF;
    margin: 0;
    max-width: 560px;
}

/* Button — 280px wide, 20/24 padding, 12px radius */
.slide-action-btn[b-kbewz45dif] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 280px;
    padding: 20px 24px;
    margin-top: 48px;
    background: #FFFFFF;
    color: #000000;
    text-decoration: none;
    border-radius: 12px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    white-space: nowrap;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.slide-action-btn:hover[b-kbewz45dif] {
    transform: translateY(-2px);
    background-color: #F5F5F7;
}

.slide-action-btn:active[b-kbewz45dif] {
    transform: translateY(0);
}

/* Progress Indicators — 480px row, 3 tracks, 8px gap */
.slider-progress-bars[b-kbewz45dif] {
    position: absolute;
    left: clamp(24px, calc((100% - 1320px) / 2), 276px);
    bottom: 80px;
    width: 480px;
    max-width: calc(100% - 48px);
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 10;
}

.progress-bar-track[b-kbewz45dif] {
    position: relative;
    flex: 1;
    height: 16px; /* 4px rail + 6px padding top/bottom (Figma tap target) */
    display: flex;
    align-items: center;
    cursor: pointer;
}

.progress-bar-rail[b-kbewz45dif] {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    overflow: hidden;
}

.progress-bar-fill[b-kbewz45dif] {
    height: 100%;
    width: 0;
    background: #FFFFFF;
    border-radius: 14px;
}

.progress-bar-fill.full[b-kbewz45dif] {
    width: 100%;
}

.progress-bar-fill.empty[b-kbewz45dif] {
    width: 0;
}

.progress-bar-fill.filling[b-kbewz45dif] {
    animation: fillProgress-b-kbewz45dif 10s linear forwards;
}

@keyframes fillProgress-b-kbewz45dif {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Image Section (Right side) — 1011/1872 of the hero.
   Absolutely positioned, so the artwork can never push the copy column or the CTA. */
.slide-image-section[b-kbewz45dif] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    pointer-events: none;
    z-index: 2;
}

.slide-image-wrapper[b-kbewz45dif] {
    position: absolute;
    inset: 0;
}

/* contain fits the whole 1448x1086 cutout into the frame — nothing is cropped,
   whatever the frame's aspect ratio ends up being at a given breakpoint */
.slide-image[b-kbewz45dif] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1500px) {
    .slider-wrapper[b-kbewz45dif] {
        height: 560px;
    }

    .slide-title[b-kbewz45dif] {
        font-size: 40px;
    }

    .slide-description[b-kbewz45dif] {
        font-size: 19px;
    }

    .slide-info-section[b-kbewz45dif] {
        width: 55%;
    }
}

@media (max-width: 1200px) {
    .slider-wrapper[b-kbewz45dif] {
        height: 520px;
    }

    .slide-title[b-kbewz45dif] {
        font-size: 36px;
    }

    .slide-description[b-kbewz45dif] {
        font-size: 18px;
    }

    .slide-image-section[b-kbewz45dif] {
        width: 50%;
    }
}

@media (max-width: 992px) {
    .lending-slider-container[b-kbewz45dif] {
        padding: 0 16px;
    }

    .slider-wrapper[b-kbewz45dif] {
        height: auto;
        min-height: 480px;
        border-radius: 28px;
    }

    .slider-bg-shape[b-kbewz45dif] {
        display: none;
    }

    .slider-slide[b-kbewz45dif] {
        position: relative;
        flex-direction: column;
        height: auto;
        padding: 56px 24px 32px;
        display: none;
    }

    .slider-slide.active[b-kbewz45dif] {
        display: flex;
    }

    .slider-progress-bars[b-kbewz45dif] {
        left: 24px;
        right: 24px;
        top: 16px;
        bottom: auto;
        width: auto;
        max-width: none;
    }

    .slide-info-section[b-kbewz45dif] {
        width: 100%;
        height: auto;
    }

    .slide-title[b-kbewz45dif] {
        font-size: 28px;
    }

    .slide-description[b-kbewz45dif] {
        font-size: 16px;
        max-width: 100%;
    }

    .slide-action-btn[b-kbewz45dif] {
        width: 100%;
        margin-top: 32px;
    }

    /* Image drops below the copy and keeps the design crop */
    .slide-image-section[b-kbewz45dif] {
        position: relative;
        width: calc(100% + 48px);
        margin: 24px -24px -32px;
        height: 320px;
        flex-shrink: 0;
    }
}

/* Mobile hero — a full-bleed dark panel running the height of the screen, under the
   transparent header. The page content rides over its bottom edge as a rounded sheet
   (.landing-main-content > section:first-of-type in the landing stylesheets). */
@media (max-width: 768px) {
    /* Pinned and static: the page scroll slides the content sheet over the hero instead of
       moving the hero itself. Sticky rather than fixed — the hero sits inside
       .landing-main-content, which is an overflow-clip context, and staying in flow keeps
       it out of that argument entirely. scroll-snap-align is the "sheet closed" magnet. */
    .lending-slider-container[b-kbewz45dif] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 100vh;
        height: 100svh;
        padding: 0;
        margin-bottom: 0;
        scroll-snap-align: start;
    }

    .slider-wrapper[b-kbewz45dif] {
        border-radius: 0;
        height: 100%;
        min-height: 0;
    }

    .slider-slide[b-kbewz45dif] {
        height: 100%;
        justify-content: flex-start;
        /* top clears the fixed header plus the progress rail below it; bottom reserves the
           band the resting sheet covers, so the artwork lands just above its lip instead of
           being laid out into the hidden third of the hero */
        padding: 104px 24px var(--sheet-peek, 32svh);
    }

    .slider-progress-bars[b-kbewz45dif] {
        left: 24px;
        right: 24px;
        top: 76px;
    }

    /* Pill hugging its label and pinned left, as in the design */
    .slide-action-btn[b-kbewz45dif] {
        width: auto;
        align-self: flex-start;
        padding: 18px 28px;
        margin-top: 28px;
    }

    /* Artwork bleeds to both edges and takes whatever height is left above the sheet */
    .slide-image-section[b-kbewz45dif] {
        width: calc(100% + 48px);
        margin: 24px -24px 0;
        height: auto;
        min-height: 180px;
        flex: 1 1 auto;
    }

    /* Close-up on a phone. The band the sheet leaves is wide and short, so `contain` fits by
       height and letterboxes the pair down to roughly 70% of the screen width. `cover` fills
       the width instead and trims from the bottom — the source is already a torso crop, so
       only jacket is lost and the faces stay clear of the top edge. */
    .slide-image[b-kbewz45dif] {
        object-fit: cover;
        object-position: center top;
    }
}

@media (max-width: 576px) {
    .slide-image-section[b-kbewz45dif] {
        min-height: 150px;
    }
}
/* /Components/LendingUpdated/PscLanding.razor.rz.scp.css */
/* The landing shell and shared typography (.landing-main-content, .landing-section,
   .section-title, .section-subtitle, .landing-cta, .landing-sheet, …) live in
   wwwroot/css/landing.css so all three landing variants stay identical.
   Only pieces unique to this landing belong here. */

.who-is-for-action[b-gz3oqz5tnt] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 32px;
}

.who-is-for-action[b-gz3oqz5tnt]  .kit-button {
    max-width: 303px !important;
    height: 58px;
    border-radius: 12px;
}

.how-it-works-action[b-gz3oqz5tnt] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 40px;
}

.how-it-works-action[b-gz3oqz5tnt]  .kit-button {
    max-width: 303px !important;
    height: 58px;
    border-radius: 12px;
}
/* /Components/Pages/Admin/AdminAuth.razor.rz.scp.css */
.login[b-xvx50514pn] {
  height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 576px) {
  .login[b-xvx50514pn] {
    align-items: end;
  }
}
/* /Components/Pages/Admin/AdminProfile.razor.rz.scp.css */
.profile-container[b-9ikjnvwf13] {
  width: 70%;
  margin: 40px auto;
}

.profile-general__head[b-9ikjnvwf13] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-general__head-title[b-9ikjnvwf13] {
  font-size: 18px;
}

.profile-general__item-photo[b-9ikjnvwf13] {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: var(--color-bg-primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-general__item-photo-img[b-9ikjnvwf13] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.profile-general__item-photo-img[src=""][b-9ikjnvwf13] {
  display: none;
}

[b-9ikjnvwf13] .profile-general__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-primary);
}

[b-9ikjnvwf13] .profile-general__item:last-child {
  border-bottom: none;
}

@media (max-width: 576px) {
  .profile-container[b-9ikjnvwf13] {
    width: 100%;
    margin: 0;
  }

  .profile-general__head[b-9ikjnvwf13] {
    margin-bottom: 12px;
  }
}
/* /Components/Pages/Admin/AppManagement.razor.rz.scp.css */
.admin-page-content[b-6xgp40v2dr] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Ensure content has some spacing from the bottom */
    padding-bottom: 24px;
}
/* /Components/Pages/Admin/Components/AdminDateFilter.razor.rz.scp.css */
.tasks-create__btn[b-s6r68jyplr] {
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--border);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-primary-2);
}

.tasks-create__card-input[b-s6r68jyplr] {
    max-width: none;
}
/* /Components/Pages/Admin/Products.razor.rz.scp.css */
/* Specific column targeting using standardized admin-table class */
[b-npzjwgddv5] .admin-table {
    width: 100%;
}

[b-npzjwgddv5] .admin-table td:nth-child(1),
[b-npzjwgddv5] .admin-table th:nth-child(1) {
    width: 80px;
}

/* Id */
[b-npzjwgddv5] .admin-table td:nth-child(2),
[b-npzjwgddv5] .admin-table th:nth-child(2) {
    width: 120px;
}

/* Name */
[b-npzjwgddv5] .admin-table td:nth-child(3),
[b-npzjwgddv5] .admin-table th:nth-child(3) {
    width: 250px;
}

/* Price */
[b-npzjwgddv5] .admin-table td:nth-child(4),
[b-npzjwgddv5] .admin-table th:nth-child(4) {
    width: 120px;
}

/* Sub Type */
[b-npzjwgddv5] .admin-table td:nth-child(5),
[b-npzjwgddv5] .admin-table th:nth-child(5) {
    width: 150px;
}

/* Visibility (Status) */
[b-npzjwgddv5] .admin-table td:nth-child(6),
[b-npzjwgddv5] .admin-table th:nth-child(6) {
    width: 110px;
}

/* Creation Date */
[b-npzjwgddv5] .admin-table td:nth-child(7),
[b-npzjwgddv5] .admin-table th:nth-child(7) {
    width: 140px;
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
.last-login-cell[b-q9qn49bm3r] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}



/* Specific column targeting using standardized admin-table class */
[b-q9qn49bm3r] .admin-table {
    width: 100%;
}

[b-q9qn49bm3r] .admin-table td:nth-child(1),
[b-q9qn49bm3r] .admin-table th:nth-child(1) {
    width: 80px;
}

/* Id */
[b-q9qn49bm3r] .admin-table td:nth-child(2),
[b-q9qn49bm3r] .admin-table th:nth-child(2) {
    width: 100px;
}

/* Password */
[b-q9qn49bm3r] .admin-table td:nth-child(3),
[b-q9qn49bm3r] .admin-table th:nth-child(3) {
    width: 150px;
}

/* Name */
[b-q9qn49bm3r] .admin-table td:nth-child(4),
[b-q9qn49bm3r] .admin-table th:nth-child(4) {
    width: 140px;
}

/* Phone */
[b-q9qn49bm3r] .admin-table td:nth-child(5),
[b-q9qn49bm3r] .admin-table th:nth-child(5) {
    width: 180px;
}

/* Mail */
[b-q9qn49bm3r] .admin-table td:nth-child(6),
[b-q9qn49bm3r] .admin-table th:nth-child(6) {
    width: 110px;
}

/* Status */
[b-q9qn49bm3r] .admin-table td:nth-child(7),
[b-q9qn49bm3r] .admin-table th:nth-child(7) {
    width: 120px;
}

/* Reg Date */
[b-q9qn49bm3r] .admin-table td:nth-child(8),
[b-q9qn49bm3r] .admin-table th:nth-child(8) {
    width: 140px;
}
/* /Components/Pages/Home.razor.rz.scp.css */