/* ==========================================================================
   Unlonely — new feature sections (AI Journal · Mood check-in · AI companion)
   Self-contained, responsive-first. Bold Headspace-style panels.
   ========================================================================== */
.ul-sec{ position:relative; overflow:hidden; }
.ul-inner{ max-width:80rem; margin:0 auto; padding:4.5rem 1.5rem; }
@media(min-width:768px){ .ul-inner{ padding:6.5rem 2rem; } }

.ul-split{ display:grid; gap:2.5rem; align-items:center; }
@media(min-width:1024px){ .ul-split{ grid-template-columns:1fr 1fr; gap:4.5rem; } }
@media(min-width:1024px){ .ul-split.ul-rev .ul-col-illus{ order:2; } }

.ul-eyebrow{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.8; margin:0 0 .55rem; }
.ul-h{ font-family:'Fredoka','Poppins',sans-serif; font-weight:700;
  font-size:clamp(2rem,4.6vw,3.25rem); line-height:1.04; letter-spacing:-.01em; margin:0 0 1.1rem; }
.ul-p{ font-family:'Inter',sans-serif; font-size:1.075rem; line-height:1.62; opacity:.94; margin:0; max-width:34rem; }
.ul-center{ text-align:center; }
.ul-center .ul-p{ margin-left:auto; margin-right:auto; }

/* illustration */
.ul-col-illus{ display:flex; justify-content:center; }
.ul-illus{ width:100%; max-width:440px; height:auto; border-radius:26px; box-shadow:0 26px 48px -18px rgba(0,0,0,.30); }

/* bullet list */
.ul-bullets{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.85rem; }
.ul-bullets li{ display:flex; align-items:center; gap:.7rem; font-family:'Poppins',sans-serif;
  font-weight:500; font-size:1rem; }
.ul-dot{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.18); }

/* mood grid */
.ul-moodgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem 1rem; margin:3rem auto 0; max-width:52rem; }
@media(max-width:640px){ .ul-moodgrid{ grid-template-columns:repeat(3,1fr); gap:1.5rem .6rem; } }
.ul-mood{ display:flex; flex-direction:column; align-items:center; gap:.6rem; transition:transform .2s ease; }
.ul-mood:hover{ transform:translateY(-6px); }
.ul-mood img{ width:78px; height:78px; }
@media(max-width:640px){ .ul-mood img{ width:64px; height:64px; } }
.ul-mood span{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.9rem; }

/* AI companion chat card */
.ul-chatcard{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:28px; padding:1.4rem; max-width:420px; margin:0 auto; backdrop-filter:blur(4px);
  display:flex; flex-direction:column; gap:.75rem; box-shadow:0 30px 60px -24px rgba(0,0,0,.35); }
.ul-msg{ font-family:'Inter',sans-serif; font-size:.98rem; line-height:1.5; padding:.7rem 1rem; border-radius:20px; max-width:82%; }
.ul-msg-in{ align-self:flex-end; background:#fff; color:#20323a; border-bottom-right-radius:7px; }
.ul-msg-ai{ align-self:flex-start; background:rgba(255,255,255,.22); color:#fff; border-bottom-left-radius:7px;
  display:flex; gap:.6rem; align-items:flex-start; }
.ul-msg-ai img{ width:26px; height:26px; flex:none; margin-top:1px; }
.ul-typing{ align-self:flex-start; display:flex; gap:5px; padding:.85rem 1rem; background:rgba(255,255,255,.22); border-radius:20px; border-bottom-left-radius:7px; }
.ul-typing i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.8); animation:ul-blink 1.2s infinite; }
.ul-typing i:nth-child(2){ animation-delay:.2s } .ul-typing i:nth-child(3){ animation-delay:.4s }
@keyframes ul-blink{ 0%,60%,100%{opacity:.3} 30%{opacity:1} }

/* peeking character accents */
.ul-peek{ position:absolute; z-index:0; pointer-events:none; opacity:1; }
.ul-sec > .ul-inner{ position:relative; z-index:1; }

/* ==========================================================================
   MOBILE POLISH — keep floating characters clear of the headlines (<768px)
   ========================================================================== */
@media (max-width:767px){
  /* hero mascot -> up into the sky, top-right, smaller */
  main > div:first-of-type::after{
    width:72px !important; height:68px !important;
    left:auto !important; right:14px !important; top:10px !important;
  }
  /* blue "night" moon -> peek from the very top edge, above the heading */
  section.bg-gray-900.sm\:py-32:not(.overflow-hidden)::after{
    width:86px !important; height:86px !important; right:-6px !important; top:-30px !important;
  }
  /* orange sun -> small, tucked top-right corner */
  section.bg-gray-900.overflow-hidden::after{
    width:78px !important; height:78px !important; right:-4px !important; top:-6px !important;
  }
  /* Safe Haven speech bubble overlaps the heading on narrow screens -> hide */
  section.py-20.sm\:py-32:not(.bg-gray-900):not(.border-t)::after{ display:none !important; }
  /* companion peek blob overlaps heading -> hide on mobile (chat card carries it) */
  #ul-ai-sections > section:nth-child(3) .ul-peek{ display:none !important; }
  /* mood sparkle/star: keep clear of the heading */
  #ul-ai-sections > section:nth-child(2) .ul-peek:first-of-type{ top:14px !important; left:4% !important; width:34px !important; }

  /* reviews blobs overlap the intro copy on mobile -> tuck away */
  section.pt-20.pb-16::before{ display:none !important; }
  section.pt-20.pb-16::after{ left:auto !important; right:-34px !important; top:auto !important; bottom:60px !important; width:92px !important; height:92px !important; }
  /* FAQ star: keep clear of heading */
  section.border-t.border-gray-200::after{ right:5% !important; top:26px !important; width:40px !important; }
  /* footer teal blob overlaps the copyright text on mobile -> hide it there */
  footer::after{ display:none !important; }
}

/* ---- Footer cleanup: remove socials + QR/download block ------------------ */
footer .group.self-stretch{ display:none !important; }                 /* "Download the app / Scan the QR code" block */
footer a:has(svg[viewBox="0 0 24 24"]){ display:none !important; }      /* social icon links */
footer div:has(> a svg[viewBox="0 0 24 24"]){ display:none !important; }/* their wrapper row */

/* ---- Remove hero floating characters (envelope + smiley blob) ------------ */
main > div:first-of-type::after{ display:none !important; }
main > div:first-of-type > div::after{ display:none !important; }