/* Soulbook layout-density enhancement (injected, additive).
   Goal: the .section blocks use min-height:100dvh with 40dvh top padding, which
   pushed content to the lower half and left the service pages feeling empty.
   We tighten that padding, add a subtle decorative backdrop, and give cards more
   presence — without touching the scroll-snap or the candle interaction. */

/* 1) Tighten the giant top padding so content sits higher and the void shrinks. */
.section{
  padding-top: clamp(9dvh, 13dvh, 16dvh) !important;
}

/* 2) Better vertical rhythm for the section heading block. */
.section-title{
  margin-bottom: .8rem !important;
}
.section-sub{
  line-height: 1.7 !important;
  margin-top: .6rem !important;
  opacity: .92;
}

/* 3) Subtle decorative backdrop per section (dual brand glow + soft vignette).
      Sits behind content via negative z-index; never intercepts pointer events. */
.section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 16% 10%, rgba(123,108,246,.12), transparent 60%),
    radial-gradient(52vw 52vw at 86% 82%, rgba(255,143,177,.09), transparent 62%),
    radial-gradient(120vw 80vh at 50% 120%, rgba(123,108,246,.10), transparent 70%);
}

/* 4) More substantial, grounded cards. */
.card{
  padding: 26px 22px !important;
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 12px 44px -24px rgba(123,108,246,.55);
}
.card:hover{
  background-color: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* 5) Headings inside cards read a touch larger for hierarchy. */
.card .section-title,
.card [class*="title"]{
  font-size: clamp(18px, 2vw, 24px) !important;
}

/* ============================================================
   MOBILE (<=768px) — narrow-viewport fixes
   ============================================================ */
@media (max-width: 768px){

  /* ---- bottom bar -> app-style function dock ----
     structure: footer.fixed.bottom-0 > [span.justify-self-start(©), nav(links), span.justify-self-end(email)] */
  .fixed.bottom-0.inset-x-0{
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }
  /* remove the email on mobile */
  .fixed.bottom-0.inset-x-0 > span.justify-self-end{
    display: none !important;
  }
  /* copyright sinks to the very bottom */
  .fixed.bottom-0.inset-x-0 > span.justify-self-start{
    order: 2 !important;
    font-size: 10px !important;
    opacity: .65;
    letter-spacing: .02em;
  }
  /* sitemap -> 4-tile app function keys */
  .fixed.bottom-0.inset-x-0 > nav{
    order: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }
  .fixed.bottom-0.inset-x-0 > nav > a{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 11px 4px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    font-size: 11px;
    line-height: 1.2;
    color: #cfd2da;
    text-align: center;
  }
  .fixed.bottom-0.inset-x-0 > nav > a:active{
    background: rgba(255,255,255,.16);
    color: #fff;
    border-color: rgba(255,255,255,.3);
  }

  /* ---- hero: center within the visible area (bars excluded), ~2/5 height ----
     flex-center + asymmetric paddings shift the block slightly above center (≈42%) */
  .section.section--hero{
    justify-content: center !important;
    padding-top: 56px !important;      /* clear the fixed top bar */
    padding-bottom: 175px !important;  /* clear the app dock */
  }

  /* ---- restore strict one-screen-at-a-time paging ---- */
  html{
    scroll-snap-type: y mandatory !important;
  }

  /* ---- tighter typography on narrow screens ---- */
  .section p{
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .section-title{
    font-size: clamp(20px, 5.6vw, 28px) !important;
  }
}