/* INSIGHTS (#/insights), plus the modal and the mobile bottom nav. */

.insight-hero {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px
}

.bar-week {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:end;
  gap:9px;
  height:180px;
  padding:22px 8px 0
}

.bar {
  border-radius:10px 10px 5px 5px;
  background:#F2C18A;
  min-height:44px;
  position:relative
}

.bar span {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-26px;
  font-size:.72rem
}

.insight-cta {
  background:#DDE9D9
}

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(8,28,54,.42);
  display:grid;
  place-items:end center;
  padding:20px
}

.modal {
  width:min(620px,100%);
  background:var(--paper);
  border-radius:28px;
  padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.18)
}

.age-options {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}

.age-options button {
  border:1px solid var(--line);
  background:white;
  min-height:48px;
  border-radius:16px;
  cursor:pointer
}

.bottom-nav {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:30;
  background:rgba(248,242,233,.95);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:7px max(10px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  display:none
}

.bottom-nav-inner {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:520px;
  margin:auto
}

.bottom-nav a {
  text-decoration:none;
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  opacity:.55;
  padding:7px;
  border-radius:12px
}

.bottom-nav a.active {
  opacity:1
}


.bottom-nav a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px}
.mobile-nav-icon {display:block;width:34px;height:30px;object-fit:contain;object-position:center;background:transparent;image-rendering:auto}
.bottom-nav a span {display:block;line-height:1.1}