/* WovenSignalOverlay — one continuous page-level motif. Decorative only. */

:root {
  --wso-stroke: #ffffff;
  --wso-line-primary: 0.12;
  --wso-line-secondary: 0.08;
  --wso-node: 0.16;
  --wso-node-dim: 0.12;
  --wso-width: 1px;
  --wso-z: 2;
  --wso-content-z: 3;
  --woven-line-light: rgba(91, 111, 145, 0.26);
  --woven-line-lavender: rgba(133, 105, 174, 0.22);
  --woven-node-light: rgba(91, 111, 145, 0.34);
  --woven-node-teal: rgba(70, 153, 158, 0.28);
  --woven-node-peach: rgba(239, 126, 75, 0.24);
}

html.wso-html,
.wso-body-host,
body.marketing-page {
  position: relative;
  overflow-x: hidden;
}

body.marketing-page,
.wso-body-host {
  isolation: auto;
}

/* Page-level overlay: content band only (below hero, above final CTA / footer).
   Bounds come from --wso-hero-skip + --wso-content-span. */
.woven-signal-overlay--page {
  position: absolute;
  top: var(--wso-hero-skip, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--wso-content-span, auto);
  z-index: var(--wso-z);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  min-height: 0;
}

.woven-signal-overlay--page svg,
.woven-signal-overlay svg {
  display: block;
  pointer-events: none;
  user-select: none;
}

.wso-rail {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.woven-signal-overlay--page .wso-rail--left {
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(88px, 20vw, 300px);
  height: 100%;
}

.woven-signal-overlay--page .wso-rail--right {
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(96px, 22vw, 320px);
  height: 100%;
}

.woven-signal-overlay--page .wso-rail--span {
  inset: 0;
  width: 100%;
  height: 100%;
  /* Edge monogram + soft entrance below the hero and soft exit before CTA/footer. */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 14%,
      transparent 30%,
      transparent 70%,
      #000 86%,
      #000 100%
    ),
    linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 72px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 14%,
      transparent 30%,
      transparent 70%,
      #000 86%,
      #000 100%
    ),
    linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 72px), transparent 100%);
  mask-composite: intersect;
}

/* Dual treatment: same geometry, different blend against the section color.
   mix-blend-mode lives on the page host so it composites with section
   backgrounds, not with an isolated overlay stacking context. */
.woven-signal-overlay--page.wso-layer--light {
  mix-blend-mode: multiply;
}

.woven-signal-overlay--page.wso-layer--dark {
  mix-blend-mode: normal;
}

.wso-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.woven-signal-overlay circle.wso-node--sm { r: 1.6px; }
.woven-signal-overlay circle.wso-node { r: 2.4px; }
.woven-signal-overlay circle.wso-node--md { r: 3px; }
.woven-signal-overlay circle.wso-node--lg { r: 3.7px; }

/* Section chrome stays below the overlay; content stays above. */
.marketing-surface-light,
.marketing-surface-light-ambient,
.marketing-surface-dark,
.plat-hero,
.deploy-hero,
section.hero,
section.hero-video,
section.beta-cta,
.hebra-final-cta,
footer,
.main-content,
.why-hebra,
.about-content,
.approach-section,
.principle,
.hebra-meaning {
  position: relative;
  isolation: auto;
}

.marketing-surface-light > *,
.marketing-surface-light-ambient > *,
.marketing-surface-dark > *,
.plat-hero > *,
.deploy-hero > *,
section.hero > *,
section.beta-cta > *,
.hebra-final-cta > *,
footer > *,
.main-content > *,
.why-hebra > *,
.about-content > *,
.approach-section > *,
.principle > *,
.hebra-meaning > *,
.hero-video .hero-content-overlay {
  position: relative;
  z-index: var(--wso-content-z);
}

/* Do not lift leftover section hosts or the video plate over the overlay. */
.marketing-woven-threads,
.hebra-final-cta__visual,
.hero-video .video-container {
  z-index: auto !important;
}

.marketing-woven-threads,
.hebra-final-cta__visual.woven-signal-overlay {
  display: none !important;
}

/* Product overlap stays on the window, not the whole section. */
body.marketing-page .hero-product-proof {
  z-index: auto !important;
  isolation: auto !important;
}
body.marketing-page .hero-product-proof-inner {
  position: relative;
  z-index: var(--wso-content-z);
}

.hebra-final-cta {
  isolation: auto;
}

.tth-overlay,
.cookie-consent-popup,
.hebra-assistant,
.chatbot-container {
  z-index: 1000;
}

.tth-overlay {
  z-index: 10050;
  position: fixed;
}

.cookie-consent-popup {
  z-index: 10000;
  position: fixed;
  isolation: isolate;
  overflow: hidden;
}

/* Scroll-reveal: animate inner content so the section background stays
   below the page overlay instead of forming a stacking context. */
.scroll-reveal-section {
  opacity: 1 !important;
  transform: none !important;
}
.scroll-reveal-section > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  position: relative;
  z-index: var(--wso-content-z);
}
.scroll-reveal-section.revealed > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-section > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Modal: perimeter only, behind form fields. */
.tth-dialog {
  isolation: isolate;
  position: relative;
}

.woven-signal-overlay--modal {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
}

.woven-signal-overlay--modal .wso-rail--left {
  width: 32px;
  height: 30%;
  top: 0;
  bottom: auto;
  left: 0;
}

.woven-signal-overlay--modal .wso-rail--right {
  width: 32px;
  height: 30%;
  top: auto;
  bottom: 0;
  right: 0;
}

.tth-dialog > .tth-close {
  z-index: 1;
}

.tth-dialog > .tth-form-wrap,
.tth-dialog > .tth-success {
  position: relative;
  z-index: 1;
}

.cookie-consent-popup > .woven-signal-overlay {
  z-index: 0;
}

.cookie-consent-popup > .cookie-consent-content {
  position: relative;
  z-index: 1;
}

.wso-body-host > .container,
.wso-body-host > footer,
.wso-body-host > header,
.wso-body-host > main,
.wso-body-host > section {
  position: relative;
}

.beta-form,
.main-content > .content-wrapper {
  position: relative;
  z-index: var(--wso-content-z);
}

@media (max-width: 1024px) {
  .woven-signal-overlay--page .wso-rail--left,
  .woven-signal-overlay--page .wso-rail--right {
    width: clamp(64px, 16vw, 180px);
  }
}

@media (max-width: 767px) {
  .wso-extra {
    display: none;
  }

  .woven-signal-overlay--page .wso-rail--left,
  .woven-signal-overlay--page .wso-rail--right {
    width: 52px;
    height: 100%;
    top: 0;
    bottom: 0;
  }

  .woven-signal-overlay--page .wso-rail--span {
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 10%,
      transparent 22%,
      transparent 78%,
      #000 90%,
      #000 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0%,
      #000 10%,
      transparent 22%,
      transparent 78%,
      #000 90%,
      #000 100%
    );
  }

  .woven-signal-overlay--modal .wso-rail--left,
  .woven-signal-overlay--modal .wso-rail--right {
    width: 28px;
    height: 24%;
  }

  .woven-signal-overlay circle.wso-node--sm { r: 1.4px; }
  .woven-signal-overlay circle.wso-node { r: 2px; }
  .woven-signal-overlay circle.wso-node--md { r: 2.4px; }
  .woven-signal-overlay circle.wso-node--lg { r: 2.9px; }
}

@media (max-width: 430px) {
  .woven-signal-overlay--page .wso-rail--left,
  .woven-signal-overlay--page .wso-rail--right {
    width: 40px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .woven-signal-overlay--page .wso-rail--left,
  .woven-signal-overlay--page .wso-rail--right {
    width: 48px;
    height: 100%;
  }
}