/* static/css/landing.css */
:root { --blue:#0d3b66; --green:#2a7d6c; --orange:#d9682a; --ink:#142237; --muted:#5f6b7a; --bg:#f7f9fc; --white:#fff; }
*{box-sizing:border-box} body.hl-body{margin:0;color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto}
.hl-container{max-width:1120px;margin:0 auto;padding:0 20px}

/* NAV */
.hl-nav{background:var(--white);border-bottom:1px solid #e8edf3}
.hl-nav .hl-container{display:flex;align-items:center;justify-content:space-between;height:64px}
.hl-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.hl-brand-mark{height:40px}.hl-brand-type{height:22px}
.hl-menu .hl-link{margin-right:20px;text-decoration:none;color:var(--ink)}
.hl-btn{display:inline-block;border-radius:10px;padding:.7rem 1.1rem;text-decoration:none}
.hl-btn--nav{background:var(--blue);color:#fff}

/* HERO */
.hl-hero{position:relative;overflow:hidden}
.hl-hero-bg{width:100%;height:540px;object-fit:cover;display:block}
.hl-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.hl-hero-grid{position:absolute;inset:0;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hl-hero-left{color:#fff}
.hl-hero-lockup{height:64px;margin-bottom:16px}
.hl-hero-title{margin:.25rem 0 1rem;font-size:2.2rem}
.hl-hero-sub{max-width:40ch;margin:0 0 1rem;color:#eef2f6}
.hl-btn--light{background:#fff;color:var(--ink)}
.hl-path-title{color:#fff;margin:0 0 10px}

/* CARDS */
.hl-card{background:#fff;border-radius:14px;padding:18px 18px 20px;margin-bottom:16px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.hl-card--blue{border:2px solid var(--blue)} .hl-card--green{border:2px solid var(--green)}
.hl-card-icon img{height:28px}
.hl-card-title{margin:.5rem 0}
.hl-card-text{color:var(--muted);margin:.25rem 0 1rem}
.hl-btn--primary{background:var(--blue);color:#fff}
.hl-btn--success{background:var(--blue);color:#fff}
.hl-btn--green{ background: var(--green);color:#fff}
.hl-btn--orange{background:var(--blue);color:#fff}

/* SECTION HEADERS */
.hl-section{padding:64px 0;background:var(--bg)}
.hl-section--alt{background:#fff}
.hl-h2{font-size:1.8rem;margin:0 0 .5rem;text-align:center}
.hl-lead{text-align:center;color:var(--muted);margin:0 0 28px}

/* TILES */
.hl-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hl-tile{background:#fff;border-radius:16px;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.hl-tile-logo{height:44px}
.hl-tile-copy{color:var(--muted);min-height:72px}

/* FEATURES */
.hl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hl-feature{background:#fff;border-radius:16px;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.hl-feature-icon{height:28px;margin-bottom:10px}

/* TESTIMONIALS */
.hl-testimonial{position:relative;display:flex;align-items:center;gap:10px}
.hl-tsm-track{flex:1}
.hl-tsm-slide{display:none;background:#fff;border-radius:18px;padding:22px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.hl-tsm-slide blockquote{margin:0 0 14px;font-size:1.1rem;color:var(--ink)}
.hl-avatar{display:inline-grid;place-items:center;background:var(--blue);color:#fff;border-radius:999px;width:40px;height:40px;margin-right:10px}
.hl-name{font-weight:600}
.hl-tsm-nav{width:44px;height:44px;border-radius:999px;border:1px solid #ccd6e4;background:#fff}

/* CTA */
.hl-cta{background:#e9f2ff;padding:52px 0}
.hl-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.hl-cta-img{width:100%;border-radius:14px}
.hl-cta-card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.hl-cta-title{margin-top:0}

/* FOOTER */
.hl-footer{background:#101a33;color:#e8eefb;padding:40px 0 0}
.hl-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.hl-footer-logo{height:28px;margin-bottom:10px}
.hl-list{list-style:none;padding:0;margin:0}
.hl-list li{margin:.25rem 0}
.hl-footer-bottom{border-top:1px solid rgba(255,255,255,.08);text-align:center;padding:16px 0;margin-top:24px}
@media (max-width: 900px){
  .hl-hero-grid{grid-template-columns:1fr}
  .hl-tiles, .hl-features, .hl-footer-grid, .hl-cta-grid{grid-template-columns:1fr}
}

/* Path card banners */
.hl-card--path { overflow: hidden; padding-top: 0; }
.hl-card-banner {
  height: 88px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px 14px 0 0;
}
.hl-card-banner--blue  { background: var(--blue); }
.hl-card-banner--green { background: var(--green); }
.hl-card-banner-icon   { width: 36px; height: auto; }

/* Center text in the path cards */
.hl-card--path .hl-card-title { text-align: center; margin: 16px 0 6px; }
.hl-card--path .hl-card-text  { text-align: center; }

/* Make the Get Started buttons match the mock: wide + round */
.hl-btn--block { display: block; width: 100%; text-align: center; }
.hl-btn--lg    { padding: 0.95rem 1.25rem; font-size: 1.125rem; border-radius: 18px; }
.hl-card--path .hl-btn { box-shadow: 0 6px 0 rgba(0,0,0,.08); }

/* --- FIX: let hero auto-size and keep the bg as a cover layer --- */
.hl-hero {               /* the section itself */
  position: relative;
  padding: 32px 0;       /* breathing room; adjust as you like */
  min-height: 540px;     /* keep the original minimum height */
}

.hl-hero-bg {            /* make the bg cover the full hero height */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hl-hero-overlay {       /* stays as the dimmer, pinned to edges */
  position: absolute;
  inset: 0;
}

/* the grid should NOT be absolute — it should size the hero */
.hl-hero-grid {
  position: relative;    /* overrides previous 'absolute' */
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
  padding-top: 24px;     /* optional: keep the title away from nav */
}

/* optional: ensure stacked cards have space between them */
.hl-hero-right .hl-card { margin-bottom: 18px; }

.hl-card--path .hl-card-banner{
  /* pull across card padding (18px) + border (2px) on each side */
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -2px;     /* cover the top border */
  margin-bottom: 16px;  /* keep your spacing to the title */
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* --- Tile banners (edge-to-edge, like the mock) --- */
.hl-tile { position: relative; padding-top: 0; overflow: hidden; }

.hl-tile-banner {
  height: 72px;
  display: flex; align-items: center;
  padding: 0 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* pull over card padding (18px) + border (if any) so it’s full width */
  margin: -18px -18px 16px -18px;
}

.hl-tile-banner--blue   { background: var(--blue); }
.hl-tile-banner--orange { background: var(--blue); }
.hl-tile-banner--green  { background: var(--blue); }

.hl-tile-banner-logo { height: 28px; width: auto; display: block; }


/* Bigger, centered logos inside the product tile banners */
.hl-tile-banner {
  height: 188px;              /* give the banner more headroom */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;   /* <-- centers the logo */
}

/* Scale the logo up and keep it crisp + contained */
.hl-tile-banner-logo {
  display: block;
  margin: 0 auto;            /* extra centering safety */
  height: 120px;              /* make it much larger */
  max-height: calc(100% - 20px); /* respect banner padding */
  width: auto;
  object-fit: contain;       /* handle odd aspect ratios */
}


/* Feature icon chip */
.hl-feature svg {
  display: inline-block;
  width: 48px;
  height: 48px;

  /* blue rounded square behind the icon */
  background: var(--blue);
  border-radius: 14px;
  padding: 10px;

  /* icon color */
  color: #ffffff;              /* currentColor for stroke/fill */

  /* nice shadow like the mock */
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);

  /* spacing under icon */
  margin-bottom: 18px;
}

/* 70% width, centered button */
.hl-btn--70 {
  display: block;
  width: 70%;
  margin: 12px auto 0;   /* top spacing + center horizontally */
  text-align: center;
}


.hl-footer {
  background: #03023a;          /* deep navy like screenshot */
  color: #ffffff;
  padding: 3rem 0 2rem;
  font-size: 0.95rem;
}

.hl-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
}

.hl-footer-left {
  max-width: 420px;
}

.hl-footer-logo {
  max-width: 260px;
  height: auto;
  margin-bottom: 1.5rem;
}

.hl-footer-tagline {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.hl-footer-subtagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.hl-footer-right {
  min-width: 320px;
}

.hl-footer-heading {
  font-size: 1.3rem;
  margin: 0 0 1.5rem;
}

.hl-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hl-footer-contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
}

.hl-footer-contact-row a {
  color: #ffffff;
  text-decoration: none;
}

.hl-footer-contact-row a:hover {
  text-decoration: underline;
}

/* pill behind email/location icons */
.hl-footer-icon-pill {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hl-footer-icon-pill svg {
  color: #ffffff;
}

/* social row pills */
.hl-footer-socials {
  display: flex;
  gap: 0.9rem;
}

.hl-footer-social-pill {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
}

.hl-footer-social-pill svg {
  color: #ffffff;
}

.hl-footer-social-pill:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* bottom divider + copyright line */
.hl-footer-bottom {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.hl-footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  max-width: 90%;
  margin: 0 auto 1rem;
}

/* responsive stacking */
@media (max-width: 768px) {
  .hl-footer-top {
    flex-direction: column;
    gap: 2rem;
  }

  .hl-footer-right {
    width: 100%;
  }
}

/* Optional: make it full-width on small screens */
@media (max-width: 900px) {
  .hl-btn--70 { width: 100%; }
}