/* LILYJO_HUD_INSTAGRAM_DESIGN_025G
 * Instagram CTA inspired by the supplied reference image:
 * dark nautical glass pill, white Instagram mark + divider + text.
 * No boat graphic. The CTA sits above the data HUD instead of occupying it.
 */
#lilyjo-public-site .lj70-hero-inner{position:relative}

/* v0.2.5f reserved the final HUD cell for the CTA. Restore the normal HUD. */
#lilyjo-public-site .lj70-hud>div:last-child .lj70-label,
#lilyjo-public-site .lj70-hud>div:last-child>.lj70-value{visibility:visible!important}

#lilyjo-public-site .lj79-instagram{
  position:absolute!important;
  right:1.2rem!important;
  bottom:110px!important;
  z-index:8!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  min-height:54px!important;
  max-width:min(390px,calc(100vw - 48px))!important;
  padding:8px 20px 8px 14px!important;
  border:1.5px solid rgba(195,220,237,.72)!important;
  border-radius:999px!important;
  background:linear-gradient(145deg,rgba(47,78,101,.90),rgba(8,38,59,.94))!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:1.02rem!important;
  font-weight:450!important;
  line-height:1.1!important;
  letter-spacing:.005em!important;
  white-space:nowrap!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 26px rgba(0,13,27,.28)!important;
  backdrop-filter:blur(12px) saturate(115%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(115%)!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
#lilyjo-public-site .lj79-instagram:hover{
  background:linear-gradient(145deg,rgba(58,92,118,.94),rgba(10,44,68,.97))!important;
  transform:translateY(-2px)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 13px 30px rgba(0,13,27,.32)!important;
}
#lilyjo-public-site .lj79-instagram:focus-visible{
  outline:3px solid rgba(255,255,255,.95)!important;
  outline-offset:3px!important;
}
#lilyjo-public-site .lj79-instagram svg{
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  box-sizing:content-box!important;
  padding-right:14px!important;
  border-right:1px solid rgba(220,235,245,.72)!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#lilyjo-public-site .lj79-instagram svg .dot{fill:#fff!important;stroke:none!important}
#lilyjo-public-site .lj79-instagram span{display:block!important}

/* Tablet: CTA still floats above the HUD; do not create an extra HUD row. */
@media(max-width:900px){
  #lilyjo-public-site .lj70-hud>div:last-child{
    display:none!important;
    grid-column:auto!important;
    min-height:0!important;
    padding:0!important;
  }
  #lilyjo-public-site .lj79-instagram{
    right:10px!important;
    bottom:132px!important;
    min-height:48px!important;
    max-width:min(330px,calc(100vw - 38px))!important;
    padding:7px 16px 7px 12px!important;
    gap:11px!important;
    font-size:.90rem!important;
  }
  #lilyjo-public-site .lj79-instagram svg{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    padding-right:11px!important;
  }
}

/* iPhone: compact but recognisable, with clear separation from the data band. */
@media(max-width:620px){
  #lilyjo-public-site .lj79-instagram{
    right:6px!important;
    bottom:126px!important;
    min-height:42px!important;
    max-width:min(265px,calc(100vw - 34px))!important;
    padding:6px 13px 6px 10px!important;
    gap:9px!important;
    font-size:.78rem!important;
  }
  #lilyjo-public-site .lj79-instagram svg{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    padding-right:9px!important;
  }
}

@media(max-width:390px){
  #lilyjo-public-site .lj79-instagram{
    right:4px!important;
    bottom:122px!important;
    max-width:245px!important;
    font-size:.73rem!important;
  }
}