/* =========================================================
   LOGOS Hero v36 — Adaptive Editorial Frame
   Final responsive layer loaded after story-kinetic.css.
   Goals:
   - CTAs sit immediately below the current story, never on the HUD rail.
   - Constellation remains visually stable.
   - Desktop, small laptop, Surface, iPad landscape/portrait and mobile
     each receive an intentional layout rather than a squeezed fallback.
   ========================================================= */

body.logos-landing-page--hybrid {
  --logos-v36-safe-x: clamp(3rem, 3.75vw, 4.6rem);
  --logos-v36-safe-y: clamp(2.15rem, 3.25vh, 3.1rem);
  --logos-v36-gap: clamp(1.1rem, 2vw, 2.7rem);
  --logos-v36-content-max: 49rem;
}

body.logos-landing-page--hybrid .logos-stage {
  min-height: 100svh;
  overflow: hidden;
}

body.logos-landing-page--hybrid .logos-editorial-shell {
  box-sizing: border-box;
  width: min(100%, 2200px) !important;
  height: 100svh !important;
  min-height: 620px;
  margin-inline: auto;
  padding:
    max(var(--logos-v36-safe-y), env(safe-area-inset-top, 0px))
    max(var(--logos-v36-safe-x), env(safe-area-inset-right, 0px))
    max(var(--logos-v36-safe-y), env(safe-area-inset-bottom, 0px))
    max(var(--logos-v36-safe-x), env(safe-area-inset-left, 0px)) !important;
}

body.logos-landing-page--hybrid .logos-editorial-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(31rem, .92fr);
  grid-template-areas: "visual content";
  align-items: stretch;
  gap: var(--logos-v36-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.logos-landing-page--hybrid .logos-editorial-visual,
body.logos-landing-page--hybrid .logos-editorial-content {
  min-width: 0;
  min-height: 0;
}

body.logos-landing-page--hybrid .logos-editorial-visual {
  display: grid;
  place-items: center;
  overflow: visible;
}

body.logos-landing-page--hybrid .logos-editorial-content {
  display: grid;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

body.logos-landing-page--hybrid .logos-hybrid-scene {
  width:
    min(
      58vw,
      1160px,
      calc((100svh - (var(--logos-v36-safe-y) * 2)) * 1.58)
    ) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: translate3d(0, -.1rem, 0) scale(1.045) !important;
  transform-origin: 50% 50%;
}

/* The story and CTA pair form one compact editorial unit. */
body.logos-landing-page--hybrid .logos-story-panel {
  display: grid !important;
  grid-template-rows: minmax(0, auto) auto;
  align-content: center;
  width: 100% !important;
  max-width: var(--logos-v36-content-max);
  max-height: calc(100svh - (var(--logos-v36-safe-y) * 2));
  margin: 0 0 0 auto;
  overflow: visible !important;
}

body.logos-landing-page--hybrid .logos-story-panel__contents {
  flex: none !important;
  min-height: 0;
  max-height: calc(100svh - (var(--logos-v36-safe-y) * 2) - 4.9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding:
    clamp(.25rem, .7vh, .6rem)
    clamp(.2rem, .55vw, .65rem)
    0
    clamp(.45rem, .8vw, .9rem) !important;
}

body.logos-landing-page--hybrid .logos-story-panel__contents::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Attach actions to the story instead of the bottom of the viewport. */
body.logos-landing-page--hybrid .logos-story-panel__dock {
  position: relative !important;
  inset: auto !important;
  align-self: start;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(.55rem, .8vw, .8rem);
  min-height: 0 !important;
  margin: clamp(.7rem, 1.3vh, 1.05rem) 0 0 !important;
  padding: 0 clamp(.2rem, .55vw, .65rem) 0 clamp(.45rem, .8vw, .9rem) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.logos-landing-page--hybrid .logos-story-panel__dock::before,
body.logos-landing-page--hybrid .logos-story-panel__dock::after,
body.logos-landing-page--hybrid .logos-story-panel__progress,
body.logos-landing-page--hybrid .logos-story-panel__progress * {
  display: none !important;
  content: none !important;
}

body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button,
body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more {
  flex: 0 1 10.6rem;
  min-width: 9.4rem;
  min-height: 2.85rem;
}

/* Prevent last lines from visually colliding with the CTA pair. */
body.logos-landing-page--hybrid .logos-story-panel__content {
  padding-bottom: .1rem;
}

/* Large monitors: use the extra space without making the copy too wide. */
@media (min-width: 1920px) and (min-height: 900px) {
  body.logos-landing-page--hybrid {
    --logos-v36-safe-x: clamp(4rem, 4.2vw, 5.5rem);
    --logos-v36-safe-y: clamp(2.7rem, 3.4vh, 3.6rem);
    --logos-v36-content-max: 52rem;
  }

  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(36rem, .88fr);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(60vw, 1280px, calc((100svh - 6rem) * 1.62)) !important;
    transform: translate3d(0, -.2rem, 0) scale(1.065) !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(3.35rem, 3.1vw, 4.7rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__narrative p {
    font-size: clamp(.95rem, .72vw, 1.06rem);
    line-height: 2;
  }
}

/* Standard desktop and common 1366/1440 laptops. */
@media (min-width: 1180px) and (max-width: 1919px) {
  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns: minmax(0, 1.07fr) minmax(30rem, .93fr);
  }
}

/* Short laptops (1280x720, 1366x768): compact vertically, keep two columns. */
@media (min-width: 1180px) and (max-height: 780px) {
  body.logos-landing-page--hybrid {
    --logos-v36-safe-y: 1.7rem;
    --logos-v36-safe-x: clamp(2.6rem, 3.2vw, 3.8rem);
    --logos-v36-gap: clamp(.75rem, 1.35vw, 1.5rem);
  }

  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(29rem, .94fr);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(56vw, 1000px, calc((100svh - 3.4rem) * 1.5)) !important;
    transform: translate3d(0, 0, 0) scale(1.005) !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(2.25rem, 2.75vw, 3.45rem);
    line-height: 1.12;
  }

  body.logos-landing-page--hybrid .logos-story-panel__narrative p {
    margin-bottom: .42rem;
    font-size: clamp(.78rem, .68vw, .88rem);
    line-height: 1.72;
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    max-height: calc(100svh - 7.2rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    margin-top: .55rem !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button,
  body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more {
    min-height: 2.55rem;
  }
}

/* Surface and iPad landscape: keep a true split layout, but compact it. */
@media (min-width: 900px) and (max-width: 1179px) and (orientation: landscape) {
  body.logos-landing-page--hybrid {
    --logos-v36-safe-x: clamp(2rem, 2.8vw, 2.7rem);
    --logos-v36-safe-y: clamp(1.65rem, 2.8vh, 2.25rem);
    --logos-v36-gap: clamp(.65rem, 1.4vw, 1.25rem);
  }

  body.logos-landing-page--hybrid .logos-stage {
    overflow: hidden;
  }

  body.logos-landing-page--hybrid .logos-editorial-shell {
    height: 100svh !important;
    min-height: 600px;
  }

  body.logos-landing-page--hybrid .logos-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(24rem, .98fr);
    grid-template-areas: "visual content";
    gap: var(--logos-v36-gap);
    height: 100%;
  }

  body.logos-landing-page--hybrid .logos-editorial-visual {
    min-height: 0;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(57vw, 760px, calc((100svh - 3.5rem) * 1.43)) !important;
    transform: translate3d(0, 0, 0) scale(.96) !important;
  }

  body.logos-landing-page--hybrid .logos-editorial-content {
    width: 100%;
    margin: 0;
    overflow: hidden;
  }

  body.logos-landing-page--hybrid .logos-story-panel {
    max-width: none;
    max-height: calc(100svh - (var(--logos-v36-safe-y) * 2));
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__narrative p {
    font-size: clamp(.75rem, 1.2vw, .86rem);
    line-height: 1.72;
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    max-height: calc(100svh - 8rem);
  }
}

/* iPad portrait and narrow tablets: stack with balanced scene and content. */
@media (min-width: 768px) and (max-width: 1179px) and (orientation: portrait) {
  body.logos-landing-page--hybrid {
    --logos-v36-safe-x: clamp(1.8rem, 3.4vw, 2.6rem);
    --logos-v36-safe-y: clamp(1.6rem, 2.7vh, 2.3rem);
  }

  body.logos-landing-page--hybrid .logos-stage {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.logos-landing-page--hybrid .logos-editorial-shell {
    height: auto !important;
    min-height: 100svh;
  }

  body.logos-landing-page--hybrid .logos-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "visual"
      "content";
    gap: clamp(1rem, 2.2vh, 1.65rem);
    height: auto;
  }

  body.logos-landing-page--hybrid .logos-editorial-visual {
    min-height: clamp(30rem, 56svh, 42rem);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(94vw, 920px) !important;
    transform: translate3d(0, 0, 0) scale(.98) !important;
  }

  body.logos-landing-page--hybrid .logos-editorial-content {
    width: min(100%, 54rem);
    margin-inline: auto;
    overflow: visible;
  }

  body.logos-landing-page--hybrid .logos-story-panel {
    max-width: none;
    max-height: none;
    align-content: start;
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    max-height: none;
    overflow: visible;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    margin-bottom: clamp(1rem, 2vh, 1.6rem) !important;
  }
}

/* Mobile: natural document flow, compact HUD and full-width controls. */
@media (max-width: 767px) {
  body.logos-landing-page--hybrid {
    --logos-v36-safe-x: .95rem;
    --logos-v36-safe-y: 1rem;
  }

  body.logos-landing-page--hybrid .logos-stage {
    overflow-x: hidden;
    overflow-y: visible;
  }

  body.logos-landing-page--hybrid .logos-editorial-shell {
    height: auto !important;
    min-height: 100svh;
    padding:
      calc(var(--logos-v36-safe-y) + env(safe-area-inset-top, 0px))
      calc(var(--logos-v36-safe-x) + env(safe-area-inset-right, 0px))
      calc(1.6rem + env(safe-area-inset-bottom, 0px))
      calc(var(--logos-v36-safe-x) + env(safe-area-inset-left, 0px)) !important;
  }

  body.logos-landing-page--hybrid .logos-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "visual"
      "content";
    gap: 1rem;
    height: auto;
  }

  body.logos-landing-page--hybrid .logos-editorial-visual {
    min-height: clamp(34rem, 118vw, 47rem);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(100%, 760px) !important;
    transform: none !important;
  }

  body.logos-landing-page--hybrid .logos-editorial-content {
    width: 100%;
    overflow: visible;
  }

  body.logos-landing-page--hybrid .logos-story-panel {
    max-width: none;
    max-height: none;
    align-content: start;
    overflow: visible !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    max-height: none;
    overflow: visible;
    padding-inline: .2rem !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    position: relative !important;
    bottom: auto !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .8rem !important;
    margin-bottom: .5rem !important;
    padding: 0 !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button,
  body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more {
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
  }
}

@media (max-width: 430px) {
  body.logos-landing-page--hybrid .logos-story-panel__dock {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion keeps the layout identical but removes nonessential motion. */
@media (prefers-reduced-motion: reduce) {
  body.logos-landing-page--hybrid .logos-hybrid-scene,
  body.logos-landing-page--hybrid .logos-story-panel__content,
  body.logos-landing-page--hybrid [data-visual-module] {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   LOGOS Hero v37 — Scene Anchor Hotfix
   V36 accidentally replaced the scene's -50% centering transform while
   the scene was still absolutely positioned at top:50% / left:50%.
   This guard restores the optical center on desktop and landscape tablets,
   and explicitly returns the scene to normal document flow on stacked
   tablet layouts.
   ========================================================= */

/* Desktop: keep the constellation locked to the center of the left column. */
@media (min-width: 1180px) {
  body.logos-landing-page--hybrid .logos-editorial-visual {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform:
      translate3d(-50%, calc(-50% - .1rem), 0)
      scale(1.045) !important;
    transform-origin: 50% 50% !important;
  }
}

/* Large monitors: preserve the same anchor while using the intended scale. */
@media (min-width: 1920px) and (min-height: 900px) {
  body.logos-landing-page--hybrid .logos-hybrid-scene {
    transform:
      translate3d(-50%, calc(-50% - .2rem), 0)
      scale(1.065) !important;
  }
}

/* Short laptops: centered, slightly tighter, never dropped toward the footer. */
@media (min-width: 1180px) and (max-height: 780px) {
  body.logos-landing-page--hybrid .logos-hybrid-scene {
    transform:
      translate3d(-50%, -50%, 0)
      scale(1.005) !important;
  }
}

/* Surface / iPad landscape: true split view with a centered left visual. */
@media (min-width: 900px) and (max-width: 1179px) and (orientation: landscape) {
  body.logos-landing-page--hybrid .logos-editorial-visual {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform:
      translate3d(-50%, -50%, 0)
      scale(.96) !important;
    transform-origin: 50% 50% !important;
  }
}

/* Portrait tablets and narrow landscape tablets use normal flow. */
@media (min-width: 768px) and (max-width: 899px),
       (min-width: 768px) and (max-width: 1179px) and (orientation: portrait) {
  body.logos-landing-page--hybrid .logos-editorial-visual {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* Mobile remains in normal flow and cannot inherit a desktop anchor. */
@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-hybrid-scene {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* =========================================================
   LOGOS Hero v38 — Powered signature + direct login CTA
   ========================================================= */

/* Bottom-center signature integrated into the circuit rail. */
body.logos-landing-page--hybrid .logos-powered-by {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: max(.72rem, env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .32rem;
  min-width: max-content;
  padding: .12rem 1.05rem .16rem;
  direction: ltr;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
  color: rgba(8, 87, 67, .48);
  background:
    linear-gradient(
      90deg,
      rgba(247, 252, 250, 0),
      rgba(247, 252, 250, .94) 22%,
      rgba(247, 252, 250, .98) 50%,
      rgba(247, 252, 250, .94) 78%,
      rgba(247, 252, 250, 0)
    );
  box-shadow: 0 0 16px 8px rgba(247, 252, 250, .72);
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: clamp(.56rem, .52vw, .68rem);
  line-height: 1;
  letter-spacing: .085em;
  text-transform: none;
}

body.logos-landing-page--hybrid .logos-powered-by span {
  font-weight: 500;
}

body.logos-landing-page--hybrid .logos-powered-by strong {
  color: rgba(0, 158, 111, .82);
  font-weight: 850;
  letter-spacing: .075em;
}

/* The secondary CTA is now a genuine login link, not a modal trigger. */
body.logos-landing-page--hybrid .logos-story-panel__login {
  text-decoration: none !important;
  cursor: pointer;
}

body.logos-landing-page--hybrid .logos-story-panel__login:visited {
  color: var(--logos-story-ink);
}

body.logos-landing-page--hybrid .logos-story-panel__login:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--story-accent) 36%, transparent);
  outline-offset: 3px;
}

/* Keep the signature clear of the Windows/macOS viewport edge on short laptops. */
@media (min-width: 768px) and (max-height: 760px) {
  body.logos-landing-page--hybrid .logos-powered-by {
    bottom: max(.52rem, env(safe-area-inset-bottom, 0px));
    font-size: .54rem;
  }
}

/* On stacked tablet/mobile layouts the signature belongs to document flow,
   so it never floats over content while the page scrolls. */
@media (max-width: 1179px) and (orientation: portrait),
       (max-width: 899px) {
  body.logos-landing-page--hybrid .logos-powered-by {
    position: relative;
    z-index: 10;
    left: auto;
    bottom: auto;
    width: max-content;
    margin: .35rem auto calc(.85rem + env(safe-area-inset-bottom, 0px));
    transform: none;
    background: transparent;
    box-shadow: none;
    color: rgba(8, 87, 67, .48);
  }
}

@media (max-width: 430px) {
  body.logos-landing-page--hybrid .logos-powered-by {
    margin-top: .15rem;
    font-size: .55rem;
  }
}
/* Powered by Aidea — larger final size */
body.logos-landing-page--hybrid .logos-powered-by {
  font-size: clamp(0.72rem, 0.72vw, 0.92rem) !important;
  gap: 0.4rem;
  letter-spacing: 0.075em;
}

body.logos-landing-page--hybrid .logos-powered-by strong {
  font-size: 1.12em;
  font-weight: 900;
}