/* Life180 Labs - CTA banner card + global footer (light surface per wireframe) */

.l180-cta { display: block; padding-top: 28px; }

.l180-cta__card {
  position: relative;
  overflow: hidden;
  background: var(--color-navy-deep);
  border-radius: var(--radius-2xl);
  padding: 37px 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

/* soft dotted wave behind the headline, right side */
.l180-cta__wave {
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(120, 180, 255, .55) 1px, transparent 1px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(120% 80% at 55% 105%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 80% at 55% 105%, #000 0%, transparent 62%);
}

.l180-cta__text {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  min-width: 0;
}
.l180-cta__icon {
  width: 72px; height: 72px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--color-amber);
}
.l180-cta__card h2 {
  color: #fff;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.l180-cta__lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15.5px;
  line-height: 1.6;
  margin-top: 9px;
}
.l180-cta__actions { position: relative; display: flex; gap: 16px; flex-wrap: wrap; }
.l180-cta__action { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.l180-cta__action small { font-size: 14px; color: rgba(255, 255, 255, 0.85); }

/* Decorative dotted mesh, bottom-right - shown whenever a button caption is present */
.l180-cta__mesh {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 26%;
  pointer-events: none;
  opacity: 1;
}
.l180-cta__mesh svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Full-bleed banner variant (cta-full="true") */
.l180-cta--full { padding-top: 0; }
.l180-cta--full .container-flush { max-width: none; padding: 0; }
.l180-cta--full .l180-cta__card {
  border-radius: 0;
  padding: 30px calc((100vw - var(--container-max) + 2 * var(--container-pad-desktop)) / 2 + var(--container-pad-desktop));
}

/* Amber banner variant (cta-theme="amber" - Talk to an Expert) */
.l180-cta--amber .l180-cta__card { background: var(--color-amber); }
.l180-cta--amber .l180-cta__card h2 { color: var(--color-heading); }
.l180-cta--amber .l180-cta__lead { color: rgba(16, 24, 56, 0.72); }
.l180-cta--amber .l180-cta__action small { color: rgba(16, 24, 56, 0.65); }
.l180-cta--amber .btn-primary { background: var(--color-navy); color: #fff; }
.l180-cta--amber .btn-primary:hover { background: var(--color-navy-deep); }

/* ---- Footer ---- */
.l180-footer {
  display: block;
  background: var(--color-canvas);
  padding-top: 46px;
}

.l180-footer__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr 1fr;
  gap: 37px;
  padding-bottom: 19px;
}

.l180-footer__desc {
  margin-top: 16px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 27ch;
}

.l180-footer__social { display: flex; gap: 23px; margin-top: 19px; }
.l180-footer__social a {
  color: var(--color-heading);
  display: inline-flex;
  transition: color .15s ease;
}
.l180-footer__social a:hover { color: var(--color-amber); }
.l180-footer__social svg { width: 21px; height: 21px; display: block; }

.l180-footer__col-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 19px;
}
.l180-footer__col nav ul { display: flex; flex-direction: column; gap: 14px; }
.l180-footer__col a {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-heading);
  font-weight: 500;
}
.l180-footer__col a:hover { color: var(--color-amber); }
.l180-footer__col a.is-current { color: var(--color-amber); font-weight: 600; }
.l180-footer__soon {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-muted);
  font-weight: 500;
  font-style: italic;
}

.l180-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 14px 0 21px;
  border-top: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
}
.l180-footer__bottom p { font-size: 14.5px; color: var(--color-muted); }

@media (max-width: 1024px) {
  .l180-cta__card { padding: 32px; }
  .l180-cta__card h2 { font-size: 23px; }
  .l180-footer__grid { grid-template-columns: 1fr 1fr 1fr; row-gap: var(--space-2xl); }
  .l180-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .l180-cta { padding-top: var(--space-xl); }
  .l180-cta__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
    border-radius: var(--radius-xl);
  }
  .l180-cta__card h2 { font-size: 20px; }
  .l180-cta__card h2 br { display: none; }
  .l180-cta__icon { width: 50px; height: 50px; }
  .l180-cta__actions { width: 100%; }
  .l180-cta__actions .btn { flex: 1; }

  .l180-footer { padding-top: var(--space-2xl); }
  .l180-footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-xl); }
  .l180-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}