/* =========================================================
   PEPPERLABZ DISCLAIMER PAGE
   Paste as its own Customizer/WPCode CSS snippet, restricted to the
   `disclaimer` page only (WPCode conditional logic), same pattern as
   pepperlabz-account.css being restricted to /my-account/*.

   Everything is scoped under .plz-disclaimer (the [pepperlabz_disclaimer]
   shortcode's wrapper) so this can never affect any other page even if
   the snippet's URL restriction is ever misconfigured.
========================================================= */

.plz-disclaimer {
  --plz-disc-bg: #fafafa;
  --plz-disc-text: #111111;
  --plz-disc-muted: #5a6069;
  --plz-disc-line: rgba(17, 17, 17, 0.08);
  --plz-disc-card: #ffffff;

  position: relative !important;
  overflow: hidden !important;
  background: var(--plz-disc-bg) !important;
  padding: 72px 24px 96px !important;
  color: var(--plz-disc-text) !important;
}

/* ---------------------------------------------------------
   BACKGROUND — two large chrome-liquid assets, purely
   decorative. pointer-events: none on every layer so they can
   never block links, text selection, or mobile scrolling.
--------------------------------------------------------- */

.plz-disclaimer-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.plz-disclaimer-chrome {
  position: absolute !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: blur(1px) !important;
}

/* Asset 1 — anchored bottom-left, allowed to bleed past the edge. */
.plz-disclaimer-chrome-1 {
  left: -12vw !important;
  bottom: -10vh !important;
  width: 55vw !important;
  max-width: 820px !important;
  opacity: 0.4 !important;
  transform: rotate(-6deg) !important;
}

/* Asset 2 — anchored top-right, mirrored so the two read as one
   liquid form traveling across the page. */
.plz-disclaimer-chrome-2 {
  right: -14vw !important;
  top: -8vh !important;
  width: 50vw !important;
  max-width: 760px !important;
  opacity: 0.35 !important;
  transform: rotate(8deg) scaleX(-1) !important;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.plz-disclaimer-hero {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
  margin: 0 auto 64px !important;
  text-align: center !important;
}

.plz-disclaimer-logo {
  width: 84px !important;
  height: auto !important;
  margin: 0 auto 28px !important;
  display: block !important;
}

.plz-disclaimer-eyebrow {
  margin: 0 0 14px !important;
  color: var(--plz-disc-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.plz-disclaimer-title {
  margin: 0 !important;
  font-size: clamp(48px, 8vw, 88px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;

  /* Controlled chrome/liquid-metal text — same gradient family as the
     homepage hero button (pepperlabz-fixes.css section 16), not a
     generic gray or rainbow gradient. Solid fallback color first so
     the heading stays fully readable if background-clip: text isn't
     supported. */
  color: #6e737b !important;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e7e9ec 18%,
    #aeb2b9 38%,
    #f5f6f8 52%,
    #7d828a 70%,
    #c9ccd2 86%,
    #5b5f66 100%
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.plz-disclaimer-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

.plz-disclaimer-section {
  padding: 30px 0 !important;
  border-bottom: 1px solid var(--plz-disc-line) !important;
}

.plz-disclaimer-section:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.plz-disclaimer-section h2 {
  margin: 0 0 12px !important;
  color: var(--plz-disc-text) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.plz-disclaimer-section p {
  margin: 0 !important;
  color: var(--plz-disc-muted) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.plz-disclaimer-section a {
  color: var(--plz-disc-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Research Use Only notice gets slightly stronger emphasis than the
   rest — a light card, not a loud alarm color, per the brief's "not
   overly alarming" direction. */
.plz-disclaimer-notice {
  background: var(--plz-disc-card) !important;
  border: 1px solid var(--plz-disc-line) !important;
  border-radius: 20px !important;
  padding: 28px 30px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05) !important;
}

.plz-disclaimer-notice h2 {
  font-size: 22px !important;
}

/* ---------------------------------------------------------
   MOBILE — reposition, don't just shrink. Smaller, more blurred,
   tucked into corners so they read as atmosphere, not objects.
--------------------------------------------------------- */

@media (max-width: 767px) {
  .plz-disclaimer {
    padding: 56px 18px 64px !important;
  }

  .plz-disclaimer-chrome {
    filter: blur(2px) !important;
  }

  .plz-disclaimer-chrome-1 {
    left: -22vw !important;
    bottom: -6vh !important;
    width: 80vw !important;
    opacity: 0.28 !important;
  }

  .plz-disclaimer-chrome-2 {
    right: -26vw !important;
    top: -4vh !important;
    width: 72vw !important;
    opacity: 0.24 !important;
  }

  .plz-disclaimer-hero {
    margin-bottom: 44px !important;
  }

  .plz-disclaimer-logo {
    width: 64px !important;
    margin-bottom: 20px !important;
  }

  .plz-disclaimer-title {
    font-size: clamp(36px, 13vw, 52px) !important;
  }

  .plz-disclaimer-section {
    padding: 24px 0 !important;
  }

  .plz-disclaimer-section h2 {
    font-size: 18px !important;
  }

  .plz-disclaimer-section p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .plz-disclaimer-notice {
    padding: 22px 20px !important;
  }
}

/* Respect reduced-motion preferences even though this design is
   already static — guards against any future hover/parallax addition. */
@media (prefers-reduced-motion: reduce) {
  .plz-disclaimer * {
    animation: none !important;
    transition: none !important;
  }
}
