/*
 * Homepage layout — compact and balanced
 * ======================================
 * Loaded last on public pages, so it settles the spacing that platform.css,
 * compact.css, mobile-app.css and public-polish.css each set a little differently.
 * Everything here is scoped to the landing page (.public-page--landing); the other
 * public pages keep their own layout. No content is removed.
 *
 *   - one content width (1180px) and one side gutter for every section, so their
 *     edges line up down the page;
 *   - one vertical rhythm: 36px between sections on a wide screen, 22px on a phone,
 *     and section headings with 18px under them instead of 30-50px;
 *   - the banner fills its width: headline on the left, the four feature cards on the
 *     right (moved there by site-content.js), instead of an empty right half and a
 *     separate band of cards beneath;
 *   - Why Choose Us: its points in two columns beside the photograph;
 *   - the FAQ in two columns on a wide screen (faq.js builds them);
 *   - on a phone, services as compact rows and the help box stacked tightly.
 */

.public-page--landing {
  --home-max: 1180px;
  --home-gutter: clamp(16px, 4vw, 32px);
  --home-gap: 36px;
}

/* --- Top strip and navigation bar ----------------------------------------- */

.public-page--landing .public-top-strip {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  min-height: 0 !important;
}

.public-page--landing .public-top-strip > .btn {
  padding: 3px 12px !important;
  min-height: 0 !important;
  font-size: 12px !important;
}

.public-page--landing .navbar {
  min-height: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* The logo sat at 65px in a 96px bar; 50px keeps it clear and the bar at ~70px. */
.public-page--landing .navbar .nav-logo .brand-logo,
.public-page--landing .navbar .nav-logo img {
  height: 50px !important;
  max-height: 50px !important;
  width: auto !important;
}

.public-page--landing .navbar .brand-home-link,
.public-page--landing .navbar .nav-logo {
  height: auto !important;
  min-height: 0 !important;
}

/* --- Banner: headline left, feature cards right ----------------------------- */

.public-page--landing .hero-landing {
  min-height: 0 !important;
}

.public-page--landing .hero-inner--landing {
  max-width: calc(var(--home-max) + 2 * var(--home-gutter)) !important;
  margin: 0 auto !important;
  padding: 32px var(--home-gutter) !important;
}

.public-page--landing .hero-landing-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  max-width: none !important;
}

/* Only the headline left: one column. */
.public-page--landing .hero-landing-grid:not(:has(> .home-features--hero:not([style*="none"]))) {
  grid-template-columns: minmax(0, 1fr);
}

.public-page--landing .hero-content--panel {
  max-width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.public-page--landing .hero-content--panel h1 {
  margin: .35rem 0 .7rem !important;
  line-height: 1.12 !important;
}

.public-page--landing .hero-lead {
  margin: 0 0 1rem !important;
  max-width: 34rem;
}

.public-page--landing .hero-btns {
  margin: 0 0 .8rem !important;
  gap: .6rem !important;
}

.public-page--landing .hero-trust-row {
  margin: 0 !important;
}

.public-page--landing .hero-landing-grid > .home-features--hero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.public-page--landing .home-features--hero .home-feature-card {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  text-align: left !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
}

.public-page--landing .home-features--hero .stat-icon {
  grid-row: 1 / span 2;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

.public-page--landing .home-features--hero .stat-value {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.public-page--landing .home-features--hero .stat-label {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

/* --- Sections: one width, one rhythm ----------------------------------------- */

.public-page--landing .home-services,
.public-page--landing .home-why,
.public-page--landing .home-trust,
.public-page--landing .home-faq {
  margin: 0 !important;
  padding: var(--home-gap) var(--home-gutter) !important;
  max-width: none !important;
}

.public-page--landing .home-services-row,
.public-page--landing .home-why-grid,
.public-page--landing .home-trust-grid,
.public-page--landing .home-faq__list,
.public-page--landing .home-contact-cta {
  max-width: var(--home-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.public-page--landing .section-head {
  max-width: 720px;
  margin: 0 auto 18px !important;
  padding: 0 !important;
}

.public-page--landing .home-section-kicker {
  margin: 0 0 4px !important;
  font-size: 11.5px !important;
  letter-spacing: .12em !important;
}

.public-page--landing .section-head h2,
.public-page--landing .home-why-copy h2 {
  margin: 0 !important;
  font-size: clamp(22px, 2.3vw, 28px) !important;
  line-height: 1.2 !important;
}

.public-page--landing .home-section-lead {
  margin: 6px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.public-page--landing .section-head .about-intro-accent {
  margin: 10px auto 0 !important;
}

/* Services: five across, each compact. */
.public-page--landing .home-services-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px !important;
}

.public-page--landing .home-service-item {
  margin: 0 !important;
  padding: 16px 14px !important;
  min-height: 0 !important;
  /* platform.css spans each card over two tracks of a six-track grid below 1024px. */
  grid-column: auto !important;
}

/* Tablets: three to a row, the last row centred rather than left hanging. */
@media (min-width: 769px) and (max-width: 1099px) {
  .public-page--landing .home-services-row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .public-page--landing .home-service-item {
    flex: 0 1 calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
  }
}

.public-page--landing .home-service-item__icon {
  margin: 0 auto 8px !important;
}

.public-page--landing .home-service-item h3 {
  margin: 0 0 3px !important;
  font-size: 15px !important;
}

.public-page--landing .home-service-item p {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
}

/* Why Choose Us: copy and points beside the photograph. */
.public-page--landing .home-why-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px !important;
  align-items: center !important;
}

.public-page--landing .home-why-copy {
  padding: 0 !important;
}

.public-page--landing .home-why-copy .home-section-lead {
  margin-bottom: 14px !important;
}

.public-page--landing .home-why-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.public-page--landing .home-why-list li {
  margin: 0 !important;
  padding: 9px 12px !important;
  min-height: 0 !important;
  font-size: 13.5px !important;
}

/*
 * One left over on the last row of a two-column grid spans the full width, with its
 * icon and words centred in the middle, rather than hanging on the left. The rule
 * follows the number of items, so it holds whatever is added or removed under
 * Website Content.
 */
.public-page--landing .home-why-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  width: auto !important;
  justify-content: center !important;
  text-align: center;
}

.public-page--landing .home-features--hero .home-feature-card:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  width: auto !important;
  grid-template-columns: 40px max-content !important;
  justify-content: center !important;
}

.public-page--landing .home-why-media {
  margin: 0 !important;
}

/* No taller than the points beside it, so neither column floats in space. */
.public-page--landing .whyg__viewport {
  aspect-ratio: 16 / 9 !important;
  max-height: 300px;
}

/* Help box: one tidy bar. */
.public-page--landing .home-contact-cta-wrap {
  margin: 0 !important;
  padding: 0 var(--home-gutter) var(--home-gap) !important;
}

.public-page--landing .home-contact-cta {
  padding: 16px 20px !important;
  gap: 14px !important;
}

/* Trusted by Our Members: four figures in a row. */
.public-page--landing .home-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px !important;
}

.public-page--landing .home-trust-stat {
  margin: 0 !important;
  padding: 14px 16px !important;
}

/* FAQ: two columns, each its own stack. */
.public-page--landing .home-faq {
  padding-top: var(--home-gap) !important;
  padding-bottom: calc(var(--home-gap) + 4px) !important;
}

.public-page--landing .home-faq__list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px !important;
  align-items: start;
  margin-top: 0 !important;
}

.home-faq__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.public-page--landing .home-faq__question {
  padding: 13px 16px !important;
  font-size: 14.5px !important;
}

.public-page--landing .home-faq__answer {
  padding: 0 16px 14px !important;
}

/* --- Narrower screens --------------------------------------------------------- */

@media (max-width: 991px) {
  .public-page--landing .hero-landing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }

  .public-page--landing .hero-content--panel {
    max-width: none !important;
  }

  .public-page--landing .home-why-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .public-page--landing .home-faq__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .public-page--landing {
    --home-gap: 22px;
  }

  .public-page--landing .hero-inner--landing {
    padding-top: 20px !important;
    padding-bottom: 22px !important;
  }

  .public-page--landing .hero-content--panel h1 {
    margin: .25rem 0 .5rem !important;
  }

  .public-page--landing .hero-lead {
    margin-bottom: .8rem !important;
    font-size: 14px !important;
  }

  .public-page--landing .home-features--hero {
    gap: 8px !important;
  }

  .public-page--landing .home-features--hero .home-feature-card {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 10px;
    padding: 10px 12px !important;
  }

  .public-page--landing .home-features--hero .stat-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .public-page--landing .home-features--hero .stat-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .public-page--landing .home-features--hero .stat-value {
    font-size: 13.5px !important;
  }

  .public-page--landing .home-features--hero .stat-label {
    font-size: 11.5px !important;
  }

  .public-page--landing .section-head {
    margin-bottom: 14px !important;
  }

  /* Services two to a row, icon beside the words; an odd one out spans both. */
  .public-page--landing .home-services-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .public-page--landing .home-service-item {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    /* Title and description stay together in a card the taller one beside it stretched. */
    align-content: center;
    text-align: left !important;
    padding: 10px 11px !important;
    /* Every card fills its column: they were each as wide as their own words. */
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    justify-self: stretch !important;
  }

  /* The one left over spans the row, its icon and words centred (see the rule above). */
  .public-page--landing .home-service-item:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    grid-template-columns: 32px max-content !important;
    justify-content: center !important;
  }

  .public-page--landing .home-features--hero .home-feature-card:last-child:nth-child(odd) {
    grid-template-columns: 32px max-content !important;
  }

  .public-page--landing .home-trust-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    width: auto !important;
    justify-content: center !important;
  }

  .public-page--landing .home-service-item__icon {
    grid-row: 1 / span 2;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }

  .public-page--landing .home-service-item__icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .public-page--landing .home-service-item h3 {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  .public-page--landing .home-service-item p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* Two columns on a phone too, the tick and words sized to fit half the width. */
  .public-page--landing .home-why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .public-page--landing .home-why-list li {
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 9px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  .public-page--landing .home-why-list .home-why__check {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .public-page--landing .home-why-list .home-why__check svg {
    width: 12px !important;
    height: 12px !important;
  }

  .public-page--landing .whyg__viewport {
    max-height: 220px;
  }

  /* Help box: stacked, the two contact chips side by side, the button full width. */
  .public-page--landing .home-contact-cta {
    padding: 14px !important;
    gap: 10px !important;
  }

  .public-page--landing .home-contact-cta__details {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }

  .public-page--landing .home-contact-cta__detail {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }

  .public-page--landing .home-contact-cta__btn {
    width: 100%;
    margin: 0 !important;
  }

  .public-page--landing .home-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .public-page--landing .home-trust-stat {
    padding: 10px 12px !important;
  }

  .public-page--landing .home-faq__question {
    padding: 11px 14px !important;
    font-size: 14px !important;
  }

  .public-page--landing .home-faq__answer {
    padding: 0 14px 12px !important;
  }

  .public-page--landing .home-faq__list,
  .public-page--landing .home-faq__col {
    gap: 8px !important;
  }
}