/*--------------------------------------------------------------
Thrive — clean fintech revamp
Overrides the theme's existing --insur-* design tokens (safe,
cascades through the whole site) and adds new "tb-" components
used on the homepage.
--------------------------------------------------------------*/

:root {
  /* Thrive brand colors (matches production thrive.css) */
  --insur-base: #a6b646;
  --insur-base-rgb: 166, 182, 70;
  --insur-primary: #0e664d;
  --insur-primary-rgb: 14, 102, 77;
  --insur-black: #1a1a1a;
  --insur-black-rgb: 26, 26, 26;
  --insur-gray: #696e77;
  --insur-gray-rgb: 105, 110, 119;
  --insur-extra: #f2f5f9;
  --insur-extra-rgb: 242, 245, 249;
  --insur-bdr-color: #e0e4e8;
  --insur-bdr-color-rgb: 224, 228, 232;

  --tb-font-display: 'Poppins', Arial, sans-serif;
  --tb-accent: #f7ae12;
  --tb-brand-dark: #0a2e22;
  --tb-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --tb-shadow-md: 0 16px 40px rgba(16, 24, 40, 0.08);
  --tb-radius-lg: 20px;
  --tb-radius-md: 14px;
}

html {
  overflow-x: hidden;
}

body {
  color: var(--insur-gray);
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

/*--------------------------------------------------------------
# Typography consistency across inner pages
Many inner pages (company, careers, resources, account/product
pages, FAQs, etc.) use the theme's original heading classes rather
than the new .tb-heading used on the homepage. Applying the same
display font here keeps every page feeling like one system instead
of the homepage looking like a different site from the rest.
--------------------------------------------------------------*/
.section-title__title,
.section-title h4,
.team-one__name,
.news-details__content h4,
.news-details__title,
.news-sideabr__content-box h4,
.accrodion-title h4,
.sidebar__title,
.contact-one__title,
.footer-widget__open-hour-title {
  font-family: var(--tb-font-display);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Form inputs (shared across contact, open account, loan request,
complaints, whistle-blower and security-center forms)
--------------------------------------------------------------*/
.comment-form__input-box input[type="text"],
.comment-form__input-box input[type="email"],
.comment-form__input-box input[type="tel"],
.comment-form__input-box input[type="number"],
.comment-form__input-box select,
.comment-form__input-box textarea {
  border-radius: var(--tb-radius-md) !important;
  border: 1px solid transparent !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.comment-form__input-box input[type="text"]:focus,
.comment-form__input-box input[type="email"]:focus,
.comment-form__input-box input[type="tel"]:focus,
.comment-form__input-box input[type="number"]:focus,
.comment-form__input-box select:focus,
.comment-form__input-box textarea:focus {
  background-color: #fff !important;
  border-color: var(--insur-base) !important;
}

/* Loan/savings calculator inputs + result stats. Selectors/IDs used by
   the live JS calculator are untouched - visual only. */
.get-thrive-two__input-box input,
.get-thrive-two__input-box select,
.get-thrive-two__input-box textarea {
  border-radius: var(--tb-radius-md) !important;
  border: 1px solid transparent !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.get-thrive-two__input-box input:focus,
.get-thrive-two__input-box select:focus,
.get-thrive-two__input-box textarea:focus {
  background-color: #fff !important;
  border-color: var(--insur-base) !important;
  outline: none;
}

@media (max-width: 767px) {
  .section-title__title {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  .section-title__title {
    font-size: 25px !important;
  }
}

.section-title__title.text-success,
h2.text-success,
h4.text-success {
  color: var(--insur-primary) !important;
}

.section-title__title.text-warning,
h2.text-warning,
h4.text-warning {
  color: var(--tb-accent) !important;
}

/* Plain bootstrap form wrappers (Open an Account, etc.) */
.contact-page__form.border {
  border: 1px solid var(--insur-bdr-color) !important;
  border-radius: var(--tb-radius-lg) !important;
  box-shadow: var(--tb-shadow-sm);
  padding: 40px !important;
}

.contact-page__form.border h4 {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 26px;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.thm-btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 16px 34px;
}

.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 32px;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

.tb-btn--primary {
  background: var(--insur-base);
  color: #fff;
}

.tb-btn--primary:hover {
  background: var(--insur-primary);
  color: #fff;
}

.tb-btn--white {
  background: #fff;
  color: var(--insur-base);
}

.tb-btn--white:hover {
  background: var(--tb-brand-dark);
  color: #fff;
}

.tb-btn--outline {
  background: transparent;
  border-color: var(--insur-bdr-color);
  color: var(--insur-black);
}

.tb-btn--outline:hover {
  border-color: var(--insur-base);
  color: var(--insur-base);
}

.tb-btn--on-dark {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.tb-btn--on-dark:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tb-btn--sm {
  padding: 9px 18px;
  font-size: 13.5px;
}

/*--------------------------------------------------------------
# Header - single clean row
--------------------------------------------------------------*/
.tb-header {
  background: #fff;
}

.main-menu-two__wrapper-inner.tb-header__row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.main-menu-two {
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
  /* The theme's default -35px margin-top was there to pull the nav bar
     up under the old top-bar/logo rows we removed. Without those rows
     this just pushed the header off the top of the page. */
  margin-top: 0;
}

.tb-header__logo {
  flex: 0 0 auto;
  padding: 18px 0;
}

.tb-header__logo img {
  height: 52px;
  width: auto;
}

.main-menu-two .main-menu-two__left {
  flex: 1 1 auto;
}

.main-menu-two .main-menu__list > li {
  padding-top: 26px;
  padding-bottom: 26px;
}

.main-menu-two .main-menu__list > li + li {
  margin-left: 34px;
}

.main-menu-two .main-menu__list > li > a {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tb-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.tb-header__login {
  font-size: 14px;
  font-weight: 600;
  color: var(--insur-gray);
  transition: color 0.2s ease;
}

.tb-header__login:hover {
  color: var(--insur-base);
}

.main-menu-two__get-quote-btn,
.stricky-header .main-menu-two__get-quote-btn {
  border-radius: 999px !important;
  padding: 13px 26px !important;
  font-size: 14.5px !important;
}

/* Below 1200px the theme switches to the hamburger/drawer nav (its own
   breakpoint - see .mobile-nav__toggler), which already has its own
   prominent "Open an Account" button. This pill had no responsive rule
   at all and was overflowing off the right edge on phones/tablets. */
@media (max-width: 1199px) {
  .tb-header__actions {
    display: none;
  }

  .tb-header__logo {
    padding: 16px 0;
  }

  /* .main-menu-two__left grows to fill the row (it sits between the
     logo and the now-hidden actions column), but its only visible
     child at this width is the hamburger toggler (the full menu list
     is display:none until 1200px) - push it to the far right edge of
     that space instead of leaving it stranded next to the logo. */
  .main-menu-two__main-menu-box {
    display: flex;
    justify-content: flex-end;
  }
}

/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/
.mobile-nav__overlay {
  background-color: var(--tb-brand-dark);
  opacity: 0.6;
}

.mobile-nav__content {
  width: 320px;
  max-width: 85vw;
  background-color: #fff;
  padding: 24px 22px 28px;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.15);
}

.mobile-nav__close {
  top: 22px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--insur-extra);
  color: var(--insur-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-nav__close:hover {
  background: var(--insur-base);
  color: #fff;
}

.mobile-nav__content .logo-box {
  margin-bottom: 22px;
}

.mobile-nav__content .logo-box img {
  width: 130px;
}

.tb-mobile-nav__cta {
  display: block;
  text-align: center;
  background: var(--insur-base);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 999px;
  padding: 13px 20px;
  margin-bottom: 24px;
  transition: background 0.2s ease;
}

.tb-mobile-nav__cta:hover {
  background: var(--insur-primary);
  color: #fff;
}

.mobile-nav__container {
  border-top: none;
  border-bottom: none;
}

.mobile-nav__content .main-menu__list > li:not(:last-child),
.mobile-nav__content .main-menu__list > li > ul > li:not(:last-child) {
  border-bottom: 1px solid var(--insur-bdr-color);
}

.mobile-nav__content .main-menu__list > li > a,
.mobile-nav__content .main-menu__list > li > ul > li > a {
  color: var(--insur-black);
  font-size: 15px;
  font-weight: 600;
  height: auto;
  padding: 13px 4px;
}

.mobile-nav__content .main-menu__list > li > a:hover {
  color: var(--insur-base);
}

.mobile-nav__content .main-menu__list > li > ul {
  border-top: none;
  background: var(--insur-extra);
  border-radius: 10px;
  margin: 2px 0 10px;
  padding: 4px 10px !important;
}

.mobile-nav__content .main-menu__list > li > ul > li {
  border-bottom: 1px solid rgba(16, 24, 40, 0.06) !important;
}

.mobile-nav__content .main-menu__list > li > ul > li:last-child {
  border-bottom: none !important;
}

.mobile-nav__content .main-menu__list > li > ul > li > a {
  color: var(--insur-gray);
  font-weight: 500;
  font-size: 14px;
  padding: 11px 6px;
}

.mobile-nav__content .main-menu__list > li > a > button,
.mobile-nav__content .main-menu__list > li > ul > li > a > button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--insur-extra);
  color: var(--insur-black);
}

.mobile-nav__content .main-menu__list > li > a > button.expanded,
.mobile-nav__content .main-menu__list > li > ul > li > a > button.expanded {
  background: var(--insur-base);
  color: #fff;
}

.mobile-nav__content .thm2-btn.btn-success {
  display: block;
  text-align: center;
  background: transparent;
  border: 2px solid var(--insur-base);
  color: var(--insur-base) !important;
  border-radius: 999px !important;
  font-weight: 700;
  padding: 11px 20px !important;
}

.mobile-nav__content .thm2-btn.btn-success:hover {
  background: var(--insur-base);
  color: #fff !important;
}

.mobile-nav__contact {
  margin-top: 24px;
}

.mobile-nav__contact li {
  color: var(--insur-gray);
}

.mobile-nav__contact li a {
  color: var(--insur-black);
}

.mobile-nav__contact li a:hover {
  color: var(--insur-base);
}

.mobile-nav__contact li > i {
  background-color: var(--insur-base);
}

.mobile-nav__top {
  border-top: 1px solid var(--insur-bdr-color);
  padding-top: 20px;
  margin-top: 4px;
}

.mobile-nav__social a {
  color: var(--insur-gray);
}

.mobile-nav__social a:hover {
  color: var(--insur-base);
}

/*--------------------------------------------------------------
# Hero - editorial split
--------------------------------------------------------------*/
.tb-hero {
  position: relative;
  overflow: hidden;
  background-color: #fbfaf6;
  padding-top: 8px;
}

.tb-hero .container {
  position: relative;
  z-index: 1;
}

.tb-hero__grid {
  display: block;
  padding: 72px 0 56px;
  width: 100%;
}

.tb-hero__content {
  max-width: 520px;
}

.tb-hero__title {
  font-family: var(--tb-font-display);
  font-size: 52px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--insur-black);
  margin: 0 0 20px;
}

.tb-hero__text {
  font-size: 17px;
  line-height: 1.65;
  color: var(--insur-gray);
  margin: 0 0 34px;
}

.tb-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
}

.tb-hero__secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--insur-black);
  border-bottom: 1px solid var(--insur-bdr-color);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tb-hero__secondary-link i {
  font-size: 12px;
  color: var(--insur-base);
}

.tb-hero__secondary-link:hover {
  color: var(--insur-base);
  border-color: var(--insur-base);
}

/* Segmented toggle + stacked stat tiles (Personal/Business hero) */
.tb-hero__grid--split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

/* Grid items default to min-width:auto, which floors their size at the
   content's min-content width. The phone <img> carries a large intrinsic
   size from the source SVG (1200x700) that CSS width:100% doesn't
   override for this calculation, so without min-width:0 here the track
   - and the whole grid - gets forced wide enough to fit it, blowing out
   the layout on narrow screens. Both columns need it since they share
   the same grid. */
.tb-hero__grid--split > * {
  min-width: 0;
}

.tb-hero__seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
  box-shadow: var(--tb-shadow-sm);
}

.tb-hero__seg button {
  border: 0;
  background: none;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--insur-gray);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.tb-hero__seg button[aria-selected="true"] {
  background: var(--tb-brand-dark);
  color: #fff;
}

.tb-hero__list {
  list-style: none;
  margin: 22px 0 30px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tb-hero__list li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--insur-black);
}

.tb-hero__list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50% 0 50% 0;
  background: var(--insur-base);
}

/* Phone mockup as a real foreground image (not a page-wide CSS
   background) so the small floating cards can be positioned relative to
   it directly and stay visually anchored to it at every screen width. */
.tb-hero__stage {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
}

.tb-hero__phone {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 75% 47%;
  border-radius: 28px;
}

.tb-hero__tile {
  position: absolute;
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--tb-shadow-md);
  width: 168px;
}

.tb-hero__tile--a {
  top: 6%;
  left: -14%;
  transform: rotate(-2deg);
}

.tb-hero__tile--b {
  bottom: 8%;
  right: -12%;
  background: var(--tb-brand-dark);
  border-color: var(--tb-brand-dark);
  color: #fff;
}

.tb-hero__tile-k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--insur-base);
}

.tb-hero__tile--b .tb-hero__tile-k {
  color: var(--tb-accent);
}

.tb-hero__tile-big {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--insur-black);
  margin: 4px 0 0;
}

.tb-hero__tile-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.tb-hero__tile-link:hover {
  color: var(--tb-accent);
}

@media (max-width: 991px) {
  .tb-hero__grid--split {
    grid-template-columns: 1fr;
  }

  .tb-hero__stage {
    margin-top: 36px;
    max-width: 300px;
  }

  .tb-hero__tile {
    width: 148px;
    padding: 10px 12px;
  }

  .tb-hero__tile--a {
    left: -8%;
  }

  .tb-hero__tile--b {
    right: -8%;
  }
}

@media (max-width: 420px) {
  .tb-hero__stage {
    max-width: 260px;
  }

  .tb-hero__tile {
    width: 126px;
    padding: 8px 10px;
  }

  .tb-hero__tile-big {
    font-size: 0.92rem;
  }

  .tb-hero__tile--a {
    left: -4%;
  }

  .tb-hero__tile--b {
    right: -4%;
  }
}

@media (max-width: 420px) {
  .tb-hero__seg {
    display: flex;
    width: 100%;
  }

  .tb-hero__seg button {
    flex: 1;
    text-align: center;
    padding-inline: 10px;
  }
}

@media (max-width: 991px) {
  .tb-hero__grid {
    padding: 32px 0 40px;
  }

  .tb-hero__content {
    max-width: none;
  }

  .tb-hero__title {
    font-size: 34px;
  }
}

@media (max-width: 576px) {
  .tb-hero__grid {
    padding: 24px 0 32px;
  }

  .tb-hero .tb-btn {
    font-size: 14.5px;
    line-height: 1.3;
    padding: 11px 22px;
  }

  .tb-hero__title {
    font-size: 30px;
  }

  .tb-hero__text {
    font-size: 15.5px;
  }

  .tb-hero__actions {
    gap: 18px;
  }
}

/*--------------------------------------------------------------
# Inner page header (breadcrumb banner) - used by ~15 inner pages
--------------------------------------------------------------*/
.page-header {
  /* Same -35px margin-top bug as the main header: designed to tuck
     under rows that no longer exist. Set both in the class and
     inline on most pages, hence !important. */
  margin-top: 0 !important;
  padding: 96px 0 56px;
  background: linear-gradient(180deg, #fbfaf6 0%, var(--insur-extra) 100%);
}

.page-header-shape-1 {
  display: none;
}

.page-header__inner h2 {
  font-family: var(--tb-font-display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.thm-breadcrumb {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
}

.thm-breadcrumb li {
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  .page-header {
    padding: 76px 0 40px;
  }

  .page-header__inner h2 {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .page-header__inner h2 {
    font-size: 25px;
  }
}

/*--------------------------------------------------------------
# Section scaffolding
--------------------------------------------------------------*/
.tb-section {
  padding: 90px 0;
}

.tb-section--tight {
  padding: 60px 0;
}

.tb-section--light {
  background: var(--insur-extra);
}

.tb-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--insur-base);
  margin-bottom: 14px;
}

.tb-heading {
  font-family: var(--tb-font-display);
  font-size: 38px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--insur-black);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.tb-sub {
  font-size: 17px;
  color: var(--insur-gray);
  max-width: 560px;
  margin: 0 0 0;
}

.tb-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.tb-head-row .tb-heading,
.tb-head-row .tb-eyebrow {
  margin-bottom: 8px;
}

.tb-head-row--center {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.tb-head-row--center .tb-sub {
  max-width: 620px;
}

/*--------------------------------------------------------------
# Trust bar (below hero)
--------------------------------------------------------------*/
.tb-trust {
  background: #fff;
  border-bottom: 1px solid var(--insur-bdr-color);
}

.tb-trust__row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
  padding: 26px 0;
}

.tb-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--insur-black);
}

.tb-trust__item i {
  color: var(--insur-base);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Quick action cards
--------------------------------------------------------------*/
.tb-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.tb-quick-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-lg);
  padding: 26px;
  box-shadow: var(--tb-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.tb-quick-card:hover {
  box-shadow: var(--tb-shadow-md);
  transform: translateY(-4px);
  border-color: transparent;
}

.tb-quick-card__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50% 0 50% 0;
  background: var(--insur-extra);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--insur-base);
}

.tb-quick-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--insur-black);
  margin: 0 0 4px;
}

.tb-quick-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--insur-base);
}

.tb-quick-card a.tb-quick-card__stretched::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tb-quick-card {
  position: relative;
}

/*--------------------------------------------------------------
# Product tabs (Personal / Business / Lending)
--------------------------------------------------------------*/
.tb-product-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--insur-bdr-color);
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
}

.tb-product-tab {
  border: none;
  background: transparent;
  color: var(--insur-gray);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.tb-product-tab:hover {
  color: var(--insur-black);
}

.tb-product-tab.active {
  background: var(--insur-base);
  color: #fff;
}

.tb-product-featured {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-shadow-sm);
  overflow: hidden;
  margin-bottom: 22px;
  transition: box-shadow 0.25s ease;
}

.tb-product-featured:hover {
  box-shadow: var(--tb-shadow-md);
}

.tb-product-featured__img {
  flex: 0 0 38%;
  max-width: 38%;
  min-height: 220px;
  overflow: hidden;
}

.tb-product-featured__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-product-featured__body {
  flex: 1;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tb-product-featured__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--insur-base);
  margin-bottom: 10px;
}

.tb-product-featured__title {
  font-family: var(--tb-font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--insur-black);
  margin: 0 0 10px;
}

.tb-product-featured__text {
  font-size: 15px;
  color: var(--insur-gray);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 480px;
}

/* The body is a column flexbox with no align-items set, so it defaults
   to stretch - text elements wrap and look unaffected, but the "Learn
   More" pill has no intrinsic width to stretch from, so it fills the
   full card width instead of sizing to its label. */
.tb-product-featured__body .tb-btn {
  align-self: flex-start;
}

.tb-product-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tb-product-support-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-md);
  padding: 18px 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.tb-product-support-card:hover {
  box-shadow: var(--tb-shadow-md);
  transform: translateY(-3px);
  border-color: transparent;
}

.tb-product-support-card__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--insur-extra);
  color: var(--insur-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.tb-product-support-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--insur-black);
  margin: 0 0 2px;
}

.tb-product-support-card__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--insur-base);
}

.tb-product-lending-note {
  margin-top: 22px;
  text-align: center;
}

@media (max-width: 991px) {
  .tb-product-featured {
    flex-direction: column;
  }

  .tb-product-featured__img {
    max-width: 100%;
    flex-basis: auto;
    height: 200px;
  }

  .tb-product-featured__body {
    padding: 26px 26px 30px;
  }

  .tb-product-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .tb-product-tabs {
    width: 100%;
    justify-content: center;
  }

  .tb-product-tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    font-size: 13.5px;
  }

  .tb-product-support-grid {
    grid-template-columns: 1fr;
  }

  .tb-product-featured__body {
    padding: 22px;
  }

  .tb-product-featured__title {
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# CTA banner
--------------------------------------------------------------*/
.tb-cta {
  border-radius: var(--tb-radius-lg);
  background: linear-gradient(120deg, var(--insur-base) 0%, var(--tb-brand-dark) 100%);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.tb-cta__eyebrow {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.tb-cta__title {
  font-family: var(--tb-font-display);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 560px;
  margin: 0;
}

.tb-cta__body {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tb-cta__decor {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  object-fit: contain;
  animation: tb-hero-float 5s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

/*--------------------------------------------------------------
# App Promo
--------------------------------------------------------------*/
.tb-app-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  border-radius: var(--tb-radius-lg);
  background: var(--tb-brand-dark);
  padding: 56px;
  overflow: hidden;
}

.tb-app-promo__content {
  color: #fff;
}

.tb-app-promo__eyebrow {
  color: var(--insur-base);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.tb-app-promo__title {
  font-family: var(--tb-font-display);
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 16px;
}

.tb-app-promo__text {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 460px;
}

.tb-app-promo__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tb-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: all 0.25s ease;
}

.tb-store-btn i {
  font-size: 26px;
}

.tb-store-btn__label {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.tb-store-btn__label small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.tb-store-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--tb-brand-dark);
}

.tb-app-promo__media {
  display: flex;
  justify-content: center;
}

.tb-app-promo__media img {
  max-width: 320px;
  width: 100%;
  height: auto;
  animation: tb-hero-float 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tb-cta__decor,
  .tb-app-promo__media img {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Why Thrive
--------------------------------------------------------------*/
.tb-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tb-why-card {
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-lg);
  padding: 30px;
}

.tb-why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50% 0 50% 0;
  background: var(--insur-extra);
  color: var(--insur-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
}

.tb-why-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--insur-black);
  margin: 0 0 8px;
}

.tb-why-card__text {
  font-size: 14.5px;
  color: var(--insur-gray);
  margin: 0;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.tb-testimonial-card {
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-lg);
  padding: 30px;
}

.tb-testimonial-card__stars {
  color: var(--tb-accent);
  font-size: 13px;
  margin-bottom: 14px;
}

.tb-testimonial-card__text {
  font-family: var(--tb-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--insur-black);
  line-height: 1.55;
  margin-bottom: 18px;
}

.tb-testimonial-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--insur-black);
  margin: 0;
}

.tb-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tb-testimonial-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--insur-bdr-color);
}

.tb-testimonial-card__position {
  font-size: 12.5px;
  color: var(--insur-gray);
  margin: 2px 0 0;
}

/* The theme sets this carousel's stage to overflow:visible (harmless on
   desktop where side whitespace absorbs it), but on mobile - with no
   spare margin - it exposes the full ~3000px carousel track and forces
   page-wide horizontal scroll. */
.testimonial-three__carousel.owl-carousel .owl-stage-outer {
  overflow: hidden;
}

.testimonial-three__carousel.owl-carousel .owl-dots .owl-dot span {
  background: var(--insur-bdr-color);
}

.testimonial-three__carousel.owl-carousel .owl-dot.active span {
  background: var(--insur-base);
}

/*--------------------------------------------------------------
# Resources
--------------------------------------------------------------*/
.tb-resource-card {
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tb-resource-card:hover {
  box-shadow: var(--tb-shadow-md);
  transform: translateY(-4px);
}

.tb-resource-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tb-resource-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-resource-card__body {
  padding: 22px 24px 26px;
}

.tb-resource-card__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--insur-base);
  background: var(--insur-extra);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 12px;
}

.tb-resource-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--insur-black);
  line-height: 1.35;
  margin: 0 0 10px;
}

.tb-resource-card__title a {
  color: inherit;
}

.tb-resource-card__text {
  font-size: 14px;
  color: var(--insur-gray);
  margin: 0 0 14px;
}

.tb-resource-card__more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--insur-base);
}

/*--------------------------------------------------------------
# App download band
--------------------------------------------------------------*/
.download-bg,
.site-footer-bg {
  background-image: none !important;
  width: 100% !important;
  right: 0 !important;
}

/* Same "full-bleed decorative shape with a hardcoded desktop pixel
   width" pattern as the two rules above - harmless on a wide desktop
   viewport where it just bleeds into extra whitespace, but it forces
   page-wide horizontal scroll on anything narrower than the shape
   itself (e.g. testimonial-two-shape-1 is 1432px, get-thrive-two-shape-1
   is 814px). Constrain both to their container instead of removing them
   outright so the subtle background tint they provide is kept on desktop. */
.testimonial-two-shape-1,
.get-thrive-two-shape-1 {
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

.download {
  background: linear-gradient(120deg, var(--insur-base) 0%, var(--tb-brand-dark) 100%);
  padding: 76px 0;
}

.download__sub-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.download__title {
  font-size: 36px;
  line-height: 1.25;
  margin-top: 10px;
  margin-bottom: 30px;
  max-width: 520px;
}

.download__app-one > a {
  padding: 12px 26px 12px 22px;
  border-radius: 999px;
  gap: 4px;
}

.download__app-one > a > i {
  font-size: 24px;
  top: 0;
}

.download__app-one > a > p {
  font-size: 15px;
  line-height: 18px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
  background-color: var(--tb-brand-dark) !important;
}

.footer-widget__title {
  font-size: 16px;
  margin-bottom: 22px;
  opacity: 0.9;
}

.footer-widget__contact-list li + li {
  margin-top: 12px;
}

/*--------------------------------------------------------------
# Live calculators (loan / investment)
All colors, spacing, radius and shadow are driven by the --tb-calc-*
variables below so the whole component can be re-themed by editing
just this block.
--------------------------------------------------------------*/
.tb-calc {
  --tb-calc-radius: var(--tb-radius-lg);
  --tb-calc-shadow: var(--tb-shadow-md);
  --tb-calc-track: var(--insur-bdr-color);
  --tb-calc-thumb: var(--insur-base);
  --tb-calc-accent: var(--insur-base);
}

.tb-calc__intro {
  margin-bottom: 44px;
}

.tb-calc__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 40px;
  align-items: start;
}

.tb-calc__fields {
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-calc-radius);
  padding: 36px;
}

/* Personal loan request: left column holds several stacked .tb-ploan__card
   blocks rather than one flat field list, so strip the calculator's own
   box styling here and let each card carry its own border/shadow. */
.tb-ploan__fields.tb-calc__fields {
  background: transparent;
  border: none;
  padding: 0;
}

.tb-ploan__fields .tb-ploan__card:last-child {
  margin-bottom: 0;
}

/* The left column is narrower here than on the standalone calculator
   page, so the 3-up "Your Details" row needs to drop to 2 columns to
   avoid cramped, wrapping labels. */
.tb-ploan__fields .tb-ploan__row--3 {
  grid-template-columns: 1fr 1fr;
}

.tb-ploan__fields .tb-ploan__employment-options {
  grid-template-columns: 1fr;
}

@media (max-width: 576px) {
  .tb-ploan__fields .tb-ploan__row--3,
  .tb-ploan__fields .tb-ploan__row--2 {
    grid-template-columns: 1fr;
  }
}

.tb-calc__cta {
  font: inherit;
  width: 100%;
}

.tb-ploan__summary .tb-calc__field {
  margin-bottom: 22px;
}

.tb-ploan__summary .tb-calc__result-row {
  margin: 4px 0 20px;
}

.tb-calc__field {
  margin-bottom: 28px;
}

.tb-calc__field:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Repayment basis toggle (flat rate / reducing balance)
Used on the loan calculator, the personal loan request estimate
and the business loan worked example.
--------------------------------------------------------------*/
.tb-calc__basis {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 10px;
  border: 1px solid var(--insur-bdr-color);
  border-radius: 999px;
  background: var(--insur-extra);
}

.tb-calc__basis button {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--insur-gray);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tb-calc__basis button[aria-pressed="true"] {
  background: #fff;
  color: var(--insur-primary);
  box-shadow: 0 6px 14px -8px rgba(16, 24, 40, 0.4);
}

.tb-calc__basis-hint {
  margin: 0 0 26px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--insur-gray);
}

/* on the dark results card (personal loan summary) */
.tb-calc__results .tb-calc__basis {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.tb-calc__results .tb-calc__basis button {
  color: rgba(255, 255, 255, 0.78);
}

.tb-calc__results .tb-calc__basis button[aria-pressed="true"] {
  background: var(--insur-base);
  color: var(--tb-brand-dark);
  box-shadow: none;
}

.tb-calc__results .tb-calc__basis-hint {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 420px) {
  .tb-calc__basis {
    display: flex;
    width: 100%;
  }

  .tb-calc__basis button {
    flex: 1;
    padding-inline: 10px;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Repayment breakdown (month-by-month schedule)
--------------------------------------------------------------*/
.tb-calc__schedule {
  margin-top: 18px;
}

.tb-calc__schedule-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--insur-bdr-color);
  border-radius: 14px;
  background: #fff;
  color: var(--insur-primary);
  font: 700 13.5px var(--insur-font, inherit);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tb-calc__schedule-toggle:hover {
  border-color: var(--insur-primary);
}

.tb-calc__schedule-toggle i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.tb-calc__schedule-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.tb-calc__schedule-body {
  margin-top: 10px;
  border: 1px solid var(--insur-bdr-color);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.tb-calc__schedule-body[hidden] {
  display: none;
}

.tb-calc__schedule-scroll {
  max-height: 320px;
  overflow: auto;
}

.tb-calc__schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tb-calc__schedule-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  background: var(--insur-extra);
  color: var(--insur-primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: right;
}

.tb-calc__schedule-table th:first-child,
.tb-calc__schedule-table td:first-child {
  text-align: left;
}

.tb-calc__schedule-table td {
  padding: 8px 12px;
  border-top: 1px solid var(--insur-bdr-color);
  text-align: right;
  color: var(--insur-black);
}

.tb-calc__schedule-table td:first-child {
  color: var(--insur-gray);
  font-weight: 700;
}

/* dark results card context */
.tb-calc__results .tb-calc__schedule-toggle {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tb-calc__results .tb-calc__schedule-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

.tb-calc__results .tb-calc__schedule-body {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.tb-calc__results .tb-calc__schedule-table th {
  background: rgba(255, 255, 255, 0.1);
  color: var(--insur-base);
}

.tb-calc__results .tb-calc__schedule-table td {
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.tb-calc__results .tb-calc__schedule-table td:first-child {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 420px) {
  .tb-calc__schedule-table {
    font-size: 12px;
  }

  .tb-calc__schedule-table th,
  .tb-calc__schedule-table td {
    padding: 7px 8px;
  }
}

.tb-calc__field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tb-calc__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--insur-black);
  letter-spacing: 0.01em;
}

.tb-calc__label-hint {
  font-size: 12px;
  color: var(--insur-gray);
  font-weight: 500;
}

.tb-calc__input-group {
  position: relative;
}

.tb-calc__input-prefix {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--insur-gray);
  font-size: 15px;
  pointer-events: none;
}

.tb-calc__input {
  width: 100%;
  height: 56px;
  border-radius: var(--tb-radius-md);
  border: 1px solid var(--insur-bdr-color);
  background: var(--insur-extra);
  padding: 0 18px 0 34px;
  font-size: 17px;
  font-weight: 700;
  color: var(--insur-black);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tb-calc__input:focus {
  outline: none;
  background: #fff;
  border-color: var(--tb-calc-accent);
}

.tb-calc__input--rate {
  padding-left: 18px;
  padding-right: 40px;
}

.tb-calc__input-suffix {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--insur-gray);
  font-size: 15px;
  pointer-events: none;
}

/* Range slider - cross-browser custom track/thumb */
.tb-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--tb-calc-track);
  outline: none;
  margin-top: 6px;
}

.tb-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tb-calc-thumb);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.25);
  cursor: pointer;
}

.tb-calc__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tb-calc-thumb);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.25);
  cursor: pointer;
}

.tb-calc__slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--tb-calc-track);
}

.tb-calc__slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--insur-gray);
  margin-top: 8px;
}

/* Results card */
.tb-calc__results {
  position: sticky;
  top: 24px;
  background: linear-gradient(150deg, var(--insur-primary) 0%, var(--tb-brand-dark) 100%);
  border-radius: var(--tb-calc-radius);
  box-shadow: var(--tb-calc-shadow);
  padding: 36px;
  color: #fff;
}

.tb-calc__results-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
  display: block;
}

.tb-calc__results-headline {
  font-family: var(--tb-font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 28px;
}

.tb-calc__result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
}

.tb-calc__result-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.tb-calc__result-label {
  color: rgba(255, 255, 255, 0.72);
}

.tb-calc__result-value {
  font-weight: 700;
  font-size: 15.5px;
}

.tb-calc__cta {
  display: block;
  text-align: center;
  margin-top: 28px;
  background: #fff;
  color: var(--insur-primary) !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 15px 20px;
  transition: background 0.2s ease, color 0.2s ease;
}

.tb-calc__cta:hover {
  background: var(--tb-calc-accent);
  color: #fff !important;
}

.tb-calc__disclaimer {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 16px;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .tb-calc__grid,
  .tb-calc__grid--ploan {
    grid-template-columns: 1fr;
  }

  .tb-calc__results {
    position: static;
  }

  .tb-calc__fields,
  .tb-calc__results {
    padding: 28px;
  }
}

@media (max-width: 576px) {
  .tb-calc__fields,
  .tb-calc__results {
    padding: 22px;
  }

  .tb-calc__results-headline {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Personal loan request form
Leans on the deep teal green (--insur-primary) rather than the
olive (--insur-base) for its primary actions, per brand direction
for this form specifically.
--------------------------------------------------------------*/
.tb-ploan__form {
  width: 100%;
}

.tb-calc__grid--ploan {
  grid-template-columns: 1fr 1fr;
}

.tb-ploan__form .tb-calc__slider::-webkit-slider-thumb {
  background: var(--insur-primary);
}

.tb-ploan__form .tb-calc__slider::-moz-range-thumb {
  background: var(--insur-primary);
}

.tb-ploan__form .tb-calc__input:focus {
  border-color: var(--insur-primary);
}

.tb-ploan__card {
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-lg);
  padding: 32px;
  margin-bottom: 24px;
}

.tb-ploan__card-title {
  font-family: var(--tb-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--insur-black);
  margin: 0 0 24px;
}

.tb-ploan__card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.tb-ploan__card-title-row .tb-ploan__card-title {
  margin: 0;
}

.tb-ploan__row {
  display: grid;
  gap: 20px;
}

.tb-ploan__row--2 {
  grid-template-columns: 1fr 1fr;
}

.tb-ploan__row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.tb-ploan__row--4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Horizontal scroll wrapper for wide data-entry tables inside a tb-ploan__card,
   so long forms (e.g. the business loan application) stay usable on mobile
   without forcing the whole page to scroll sideways. */
.tw-table-scroll {
  overflow-x: auto;
}

.tw-table-scroll table th,
.tw-table-scroll table td {
  white-space: nowrap;
}

.tw-table-scroll table input.form-control,
.tw-table-scroll table select.form-control {
  min-width: 130px;
}

.tb-ploan__employment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tb-ploan__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-md);
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--insur-black);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tb-ploan__choice input {
  accent-color: var(--insur-primary);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.tb-ploan__choice:has(input:checked) {
  border-color: var(--insur-primary);
  background: rgba(14, 102, 77, 0.06);
}

.tb-ploan__conditional {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--insur-bdr-color);
}

.tb-ploan__eligibility {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--tb-radius-md);
  background: var(--insur-extra);
  border: 1px solid var(--insur-bdr-color);
}

.tb-ploan__eligibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--insur-gray);
  margin-bottom: 8px;
}

.tb-ploan__eligibility-row strong {
  font-size: 17px;
  color: var(--insur-black);
}

.tb-ploan__eligibility p {
  margin: 0;
  font-size: 13.5px;
  color: var(--insur-gray);
}

.tb-ploan__eligibility--ok {
  background: rgba(14, 102, 77, 0.06);
  border-color: rgba(14, 102, 77, 0.25);
}

.tb-ploan__eligibility--ok p {
  color: var(--insur-primary);
  font-weight: 600;
}

.tb-ploan__eligibility--warn {
  background: rgba(247, 174, 18, 0.1);
  border-color: rgba(247, 174, 18, 0.35);
}

.tb-ploan__eligibility--warn p {
  color: #8a5a00;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* At-a-glance ledger card (fees, limits, account summaries)          */
/* ------------------------------------------------------------------ */
.tb-ledger {
  background: #fff;
  border: 1px solid var(--insur-bdr-color);
  border-radius: var(--tb-radius-md);
  box-shadow: var(--tb-shadow-sm);
  padding: 26px 28px;
}

.tb-ledger__title {
  font-family: var(--tb-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--insur-black);
  margin: 0 0 14px;
}

.tb-ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dotted var(--insur-bdr-color);
  font-size: 14px;
}

.tb-ledger__row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.tb-ledger__label {
  color: var(--insur-gray);
}

.tb-ledger__value {
  font-weight: 700;
  color: var(--insur-black);
  text-align: right;
}

/* Inline "to confirm" placeholder badge, used wherever a real figure   */
/* (licence numbers, fees, rates) isn't yet available from compliance. */
.tb-ph {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(247, 174, 18, 0.14);
  color: #8a5a00;
  border: 1px solid rgba(247, 174, 18, 0.4);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tb-ph::before {
  content: "\f071";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
}

/* Simple KYC / document checklist */
.tb-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tb-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--insur-black);
}

.tb-checklist li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--insur-primary);
  background: rgba(14, 102, 77, 0.1);
  border-radius: 50% 0 50% 0;
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

/* Safety / "stay safe" callout, reusing the ploan eligibility warn tone */
.tb-safety {
  background: rgba(247, 174, 18, 0.08);
  border: 1px solid rgba(247, 174, 18, 0.3);
  border-radius: var(--tb-radius-lg);
  padding: 28px 30px;
}

.tb-safety h3 {
  font-family: var(--tb-font-display);
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--insur-black);
}

.tb-ploan__guarantor-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 18px;
}

.tb-ploan__add-btn {
  background: transparent;
  border: 1.5px solid var(--insur-primary);
  color: var(--insur-primary);
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 9px 18px;
  transition: background 0.2s ease, color 0.2s ease;
}

.tb-ploan__add-btn:hover {
  background: var(--insur-primary);
  color: #fff;
}

.tb-ploan__remove-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--insur-bdr-color);
  background: #fff;
  color: var(--insur-gray);
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tb-ploan__remove-btn:hover {
  border-color: #c0392b;
  color: #c0392b;
}

.tb-ploan__submit {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--insur-primary);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  padding: 18px 20px;
  transition: background 0.2s ease;
}

.tb-ploan__submit:hover {
  background: var(--tb-brand-dark);
  color: #fff;
}

@media (max-width: 767px) {
  .tb-ploan__row--2,
  .tb-ploan__row--3,
  .tb-ploan__row--4,
  .tb-ploan__employment-options {
    grid-template-columns: 1fr;
  }

  .tb-ploan__guarantor-row {
    grid-template-columns: 1fr;
  }

  .tb-ploan__remove-btn {
    justify-self: end;
  }

  .tb-ploan__card {
    padding: 22px;
  }
}

@media (max-width: 576px) {
  /* Paired CTA buttons (e.g. "Download Account Form" / "Open Account
     Online" on product pages) are plain inline-block anchors with no
     wrap handling - on narrow screens they crowd or clip edge-to-edge
     instead of stacking cleanly. */
  .thm-btn,
  .thm2-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
  }

  .thm-btn:last-child,
  .thm2-btn:last-child {
    margin-bottom: 0;
  }

  .scroll-to-top {
    right: 18px !important;
  }
}

/*--------------------------------------------------------------
# Data tables (business loan request form)
The "table-responsive" class here is applied straight to the <table>
itself instead of a wrapping div (the markup Bootstrap actually expects),
so the built-in behavior never kicked in and these wide, many-column
tables forced the whole page to scroll horizontally on mobile. Applying
the same overflow behavior directly to the table achieves the same
result without touching the form's markup/JS (several tables share the
same id and are targeted by inline scripts, so that's left untouched).
--------------------------------------------------------------*/
.table-responsive,
.table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .tb-quick-grid {
    grid-template-columns: 1fr;
  }

  .tb-why-grid {
    grid-template-columns: 1fr;
  }

  /* .tb-calc__grid--ploan's own unconditional rule (further up the file,
     in the Personal Loan Request section) has the same specificity and
     comes later in source order, so it always won over the collapse
     rule that lived next to .tb-calc__grid. Repeating it here, after
     that rule, is what actually makes it apply. */
  .tb-calc__grid--ploan {
    grid-template-columns: 1fr;
  }

  .tb-cta {
    padding: 36px;
  }

  .tb-app-promo {
    grid-template-columns: 1fr;
    padding: 40px;
    text-align: center;
  }

  .tb-app-promo__text {
    max-width: 100%;
  }

  .tb-app-promo__actions {
    justify-content: center;
  }

  .tb-app-promo__media {
    order: -1;
  }

  .tb-app-promo__media img {
    max-width: 220px;
  }

  .tb-heading {
    font-size: 30px;
  }

  .tb-section {
    padding: 70px 0;
  }
}

/*--------------------------------------------------------------
# Legacy theme section padding (inner pages)
Pages that still use the theme's original section wrappers
(company, contact, team, FAQs, account/product detail pages) never
had their generous desktop padding (up to 120px top/bottom) scaled
down for mobile - the theme's own responsive file only touches header
nav rules at this breakpoint.
--------------------------------------------------------------*/
@media (max-width: 767px) {
  .team-one,
  .contact-page,
  .faq-one {
    padding: 56px 0;
  }

  .news-details {
    padding: 40px 0 56px;
  }

  .services-three {
    padding: 0 0 56px;
    margin-top: 56px;
  }

  .about-four {
    padding: 36px 0;
  }

  .contact-page__left .section-title {
    margin-bottom: 26px;
  }

  .contact-page__location-text {
    padding-top: 20px;
  }

  .team-one__single {
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .tb-trust__row {
    gap: 14px 22px;
    padding: 18px 0;
  }

  .tb-trust__item {
    font-size: 13px;
  }

  .tb-head-row {
    margin-bottom: 32px;
  }

  .tb-heading {
    font-size: 26px;
  }

  .tb-sub {
    font-size: 15.5px;
  }

  .tb-quick-card {
    padding: 20px;
  }

  .tb-cta {
    padding: 28px 22px;
    text-align: center;
    justify-content: center;
  }

  .tb-cta__title {
    font-size: 22px;
    max-width: 100%;
  }

  .tb-cta .tb-btn {
    width: 100%;
    justify-content: center;
  }

  .tb-cta__body {
    flex-direction: column;
  }

  .tb-app-promo {
    padding: 30px 22px;
  }

  .tb-app-promo__title {
    font-size: 24px;
  }

  .tb-why-card,
  .tb-testimonial-card {
    padding: 22px;
  }
}

@media (max-width: 576px) {
  .tb-section {
    padding: 56px 0;
  }

  .tb-section--tight {
    padding: 40px 0;
  }

  .tb-trust__row {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .tb-trust__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/*--------------------------------------------------------------
# Header polish (desktop nav, dropdowns, actions)
Applies to both the main header and the sticky clone.
--------------------------------------------------------------*/
.main-menu-two .main-menu__list > li,
.stricky-header .main-menu__list > li {
  padding-top: 14px;
  padding-bottom: 14px;
}

.main-menu-two .main-menu__list > li + li,
.stricky-header .main-menu__list > li + li {
  margin-left: 4px;
}

.main-menu-two .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--insur-black);
  transition: background 0.2s ease, color 0.2s ease;
}

/* replace the theme's little triangle with a soft pill highlight */
.main-menu-two .main-menu__list > li > a::before,
.stricky-header .main-menu__list > li > a::before {
  display: none;
}

.main-menu-two .main-menu__list > li:hover > a,
.main-menu-two .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li:hover > a,
.stricky-header .main-menu__list > li.current > a {
  background: rgba(var(--insur-primary-rgb), 0.08);
  color: var(--insur-primary);
}

/* chevron on dropdown parents */
.main-menu-two .main-menu__list > li.dropdown > a::after,
.stricky-header .main-menu__list > li.dropdown > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.7;
}

.main-menu-two .main-menu__list > li.dropdown:hover > a::after,
.stricky-header .main-menu__list > li.dropdown:hover > a::after {
  transform: rotate(225deg);
  margin-top: 3px;
}

/* dropdown card */
.main-menu-two .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul {
  top: 100%;
  left: 50%;
  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--insur-bdr-color);
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(10, 46, 34, 0.18);
  transform: translateX(-50%) translateY(8px);
  transform-origin: top center;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.main-menu-two .main-menu__list > li:hover > ul,
.stricky-header .main-menu__list > li:hover > ul {
  transform: translateX(-50%) translateY(0);
}

.main-menu-two .main-menu__list > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li + li {
  margin-top: 2px;
}

.main-menu-two .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--insur-black);
  white-space: nowrap;
}

.main-menu-two .main-menu__list > li > ul > li:hover > a,
.stricky-header .main-menu__list > li > ul > li:hover > a {
  background: rgba(var(--insur-primary-rgb), 0.08);
  color: var(--insur-primary);
  padding-left: 18px;
}

.main-menu-two .main-menu__list > li > ul > li > a::before,
.stricky-header .main-menu__list > li > ul > li > a::before {
  right: 14px;
  color: var(--insur-primary);
}

/* actions: outlined Log in + solid pill CTA */
.tb-header__actions {
  gap: 12px;
}

.tb-header__login {
  padding: 11px 22px;
  border: 1.5px solid var(--insur-primary);
  border-radius: 999px;
  color: var(--insur-primary);
  align-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.tb-header__login:hover {
  background: var(--insur-primary);
  color: #fff;
}

.main-menu-two__get-quote-btn,
.stricky-header .main-menu-two__get-quote-btn {
  background: var(--insur-primary);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(var(--insur-primary-rgb), 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.main-menu-two__get-quote-btn:hover {
  background: var(--insur-base);
  color: var(--tb-brand-dark);
  transform: translateY(-1px);
}

/* tighter spacing between logo and nav on mid-size desktops */
@media (min-width: 1200px) and (max-width: 1399px) {
  .main-menu-two .main-menu__list > li > a,
  .stricky-header .main-menu__list > li > a {
    padding: 10px 11px;
    font-size: 14.5px;
  }

  .main-menu__wrapper-inner.tb-header__row,
  .main-menu-two__wrapper-inner.tb-header__row {
    gap: 20px;
  }
}