/* ============================================================================
   LB-REVAMP v1 — Lay'd Back Apps enhancement layer (styling).
   House law: copy, pricing, palette, logos and the font trio are UNTOUCHED.
   This layer only re-composes and re-rhythms the rendered app DOM.
   Mood target: calm, precise, unhurried ("Lay'd Back"), not neon-aggressive.
   ========================================================================= */


/* ------------------------------------------------------------------ 1. TYPE
   Bring the display scale down to a readable, calm register. The full hero
   headline must fit the first viewport at 1280x900 with no mid-sentence cut. */
#hero-title {
  font-size: clamp(1.9rem, 3.5vw, 2.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.022em !important;
  text-wrap: balance;
  max-width: none;
  margin-top: 1rem;
}

/* Consistent, calmer section headings (Syne kept, scale + leading eased). */
main#top section h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.7rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

/* Tighten the hero supporting copy so the headline + lead + CTAs read as one
   calm block instead of a wall — and so the primary CTA clears the fold. */
#hero-title + p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-top: 0.95rem;
  max-width: 38rem;
}
#hero-title + p + p {
  font-size: 0.8125rem;
  line-height: 1.56;
  margin-top: 0.7rem;
  max-width: 36rem;
}
@media (min-width: 640px) {
  #hero-title + p { font-size: 1rem; }
  #hero-title + p + p { font-size: 0.85rem; }
}


/* --------------------------------------------------------- 2. HERO RECOMPOSE
   Kill the dead top-right quadrant (the figure was vertically centred in a
   short row), show the workday widget off, and reserve bottom-right clearance
   so the third-party chat launcher can never overlap page content. */
section[aria-labelledby="hero-title"] {
  --lb-launcher-clear: 7.5rem;
}
section[aria-labelledby="hero-title"] > div:nth-of-type(2) {
  align-items: start;
  padding-bottom: var(--lb-launcher-clear);
  row-gap: 3.25rem;
}
/* Give the text column more room so the wide Syne headline sets in ~3-4 lines
   and the widget column stays generous. */
@media (min-width: 1024px) {
  section[aria-labelledby="hero-title"] > div:nth-of-type(2) {
    grid-template-columns: 1.06fr 0.94fr;
    column-gap: 3rem;
    padding-top: 4.5rem;
  }
}
/* Pull the hero CTA row and meta strip into a calm rhythm. */
section[aria-labelledby="hero-title"] div.mt-9 { margin-top: 1.6rem; }
section[aria-labelledby="hero-title"] div.mt-11 { margin-top: 2.4rem; }

/* Left column a touch wider so the eased headline sets in fewer lines. */
section[aria-labelledby="hero-title"] > div:nth-of-type(2) > div:first-child {
  max-width: 41rem;
}

/* Soften the aggressive neon bloom blobs (opacity only — palette unchanged). */
section[aria-labelledby="hero-title"] > div:first-child > div {
  opacity: 0.62;
}

/* Give the workday widget presence + a calm, framed showcase feel. */
section[aria-labelledby="hero-title"] figure {
  position: relative;
  align-self: start;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.55));
}
section[aria-labelledby="hero-title"] figure > div:nth-child(2) {
  border-color: rgba(116, 216, 225, 0.22);
  background: #0e1216;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 30px 80px -40px rgba(0, 0, 0, 0.95);
  border-radius: 6px;
}
/* Strengthen the existing cyan corner accent into a deliberate frame marker. */
section[aria-labelledby="hero-title"] figure > div:first-child {
  opacity: 0.95;
  border-color: rgba(116, 216, 225, 0.5);
}
/* Figcaption reads as a calm plate label — nudged up in size/contrast/spacing so
   the microcopy is legible rather than tiny/lost (copy text itself untouched). */
section[aria-labelledby="hero-title"] figure figcaption {
  margin-top: 0.6rem;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.013em;
  color: rgba(255, 255, 255, 0.46);
}
@media (min-width: 640px) {
  section[aria-labelledby="hero-title"] figure figcaption {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
  }
}


/* --------------------------------------------------- 3. SECTION TREATMENTS
   Restrained hairlines and rhythm — depth from composition, not saturation. */
main#top > section {
  position: relative;
}
main#top > section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(116, 216, 225, 0) 0%,
              rgba(116, 216, 225, 0.16) 50%,
              rgba(116, 216, 225, 0) 100%);
  pointer-events: none;
}

/* FAQ accordions: calmer resting state, clearer open state. */
main#top details {
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
main#top details[open] {
  border-color: rgba(116, 216, 225, 0.34);
}


/* --------------------------------------------------------- 4. SCROLL REVEAL
   CSS classes + IntersectionObserver in revamp.js. Re-applied after React
   re-renders; safe because the reveal only affects below-the-fold sections. */
.lb-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.lb-reveal.lb-in {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------- 5. MICRO-POLISH */
main#top a[href="#audit"] {
  box-shadow: 0 10px 34px -20px rgba(186, 251, 58, 0.6) !important;
}
main#top a[href="#audit"]:hover {
  transform: translateY(-1px);
}
main#top a,
main#top button,
main#top summary {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease;
}

/* The 3D hero canvas — ambient backdrop, strongest where the composition has
   air (lower-right), faded behind the headline for legibility. */
#lb-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* Mask keeps the 3D field in the open lower-right air and off the copy so it
     can never bleed behind the body text (contrast law). */
  -webkit-mask-image: radial-gradient(90% 92% at 80% 92%,
                      #000 0%, rgba(0, 0, 0, 0.55) 44%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(90% 92% at 80% 92%,
              #000 0%, rgba(0, 0, 0, 0.55) 44%, rgba(0, 0, 0, 0) 76%);
}
#lb-hero-canvas.lb-on {
  opacity: 1;
}
/* Keep hero text above the canvas regardless of React's stacking. */
section[aria-labelledby="hero-title"] > div:nth-of-type(2) {
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------- 5b. CATEGORY STRIP FRAME
   The bottom category rail (ROSTERS / QUOTES | INVOICES / ORDERS | DASHBOARDS /
   HANDOFFS) previously read as loose type floating over the 3D grid. Contain it:
   faint house-black fill + hairline full border + soft shadow, so it reads as a
   deliberate, seated element. Tints only — no new hues. */
div[class*="grid-cols-3"][class*="border-y"][class*="tracking-[0.13em]"] {
  background: linear-gradient(180deg,
              rgba(15, 19, 24, 0.88) 0%,
              rgba(11, 14, 18, 0.72) 100%);
  border: 1px solid rgba(116, 216, 225, 0.17);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 24px 52px -38px rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.52);
}
/* Even rail gutters; the interior dividers stay as the column markers. */
div[class*="grid-cols-3"][class*="border-y"][class*="tracking-[0.13em]"] > span {
  padding-left: 0.9rem;
}
div[class*="grid-cols-3"][class*="border-y"][class*="tracking-[0.13em]"] > span:first-child {
  padding-left: 0;
}


/* ----------------------------------------------- 5c. MOBILE SUB-NAV FADE EDGE
   The scrollable sub-nav clipped its last item at the right edge with no cue.
   A right-edge mask fade signals "scroll for more" as an intentional affordance. */
header nav[class*="xl:hidden"] > div[class*="overflow-x-auto"] {
  -webkit-mask-image: linear-gradient(90deg,
                      #000 0, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg,
              #000 0, #000 calc(100% - 44px), transparent 100%);
}


/* --------------------------------------------------------------- 6. MOBILE */
@media (max-width: 640px) {
  #hero-title {
    font-size: clamp(1.75rem, 7.5vw, 2.3rem) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.11 !important;
    max-width: none;
  }
  main#top section h2 {
    font-size: clamp(1.6rem, 6.9vw, 2.2rem);
  }
  #hero-title + p {
    font-size: 0.845rem;
    line-height: 1.46;
    margin-top: 0.75rem;
  }
  #hero-title + p + p {
    font-size: 0.775rem;
    line-height: 1.42;
    margin-top: 0.5rem;
  }
  section[aria-labelledby="hero-title"] > div:nth-of-type(2) { padding-top: 1.75rem; }
  section[aria-labelledby="hero-title"] div.mt-9 { margin-top: 1.1rem; }
  section[aria-labelledby="hero-title"] div.mt-11 { margin-top: 1rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
  section[aria-labelledby="hero-title"] > div:nth-of-type(2) {
    padding-bottom: 5.5rem;
    row-gap: 2.5rem;
  }
  /* keep the workday widget clear of the fixed bottom-right badge zone */
  section[aria-labelledby="hero-title"] figure { margin-top: 3.5rem; }
  #lb-hero-canvas {
    /* Mobile: keep the field low, under the copy, as a calm base note. */
    -webkit-mask-image: radial-gradient(150% 62% at 62% 99%,
                        #000 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(150% 62% at 62% 99%,
                #000 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 70%);
  }
}


/* --------------------------------------------------- 7. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .lb-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #lb-hero-canvas {
    transition: none;
  }
  main#top a,
  main#top button,
  main#top summary,
  main#top details {
    transition: none;
  }
}